:root {
    color-scheme: dark;
    --ink: #f1f4e9;
    --muted: #a9b3aa;
    --surface: #171d1b;
    --surface-high: #202824;
    --line: #344038;
    --accent: #c9ff65;
    --accent-soft: rgba(201, 255, 101, 0.12);
    --danger: #ff8f7b;
    --success: #a9efc5;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: #0e1311; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background:
        radial-gradient(circle at 85% 5%, rgba(125, 162, 94, 0.16), transparent 28rem),
        linear-gradient(180deg, #111714 0%, #0e1311 100%);
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-shell { width: min(1380px, 100%); margin: 0 auto; padding: 0 4vw; }

.hero {
    position: relative;
    min-height: 500px;
    padding: 34px 0 72px;
    border-bottom: 1px solid var(--line);
}

.hero::after {
    content: "0101\A 1010";
    white-space: pre;
    position: absolute;
    right: 2vw;
    bottom: 36px;
    color: rgba(201, 255, 101, 0.055);
    font: 700 clamp(5rem, 13vw, 12rem)/0.72 ui-monospace, "Cascadia Code", monospace;
    letter-spacing: -0.13em;
    pointer-events: none;
}

.brand, .github-link {
    position: relative;
    z-index: 1;
    color: var(--ink);
    text-decoration: none;
}

.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 750; letter-spacing: -0.02em; }
.brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font: 700 1.05rem/1 ui-monospace, monospace;
}
.brand-mark sup, .loading-mark sup { font-size: 0.55em; transform: translateY(-0.25em); }
.github-link { float: right; padding: 10px 0; color: var(--muted); font-size: 0.92rem; }
.github-link:hover { color: var(--accent); }

.hero-copy { position: relative; z-index: 1; max-width: 920px; margin-top: 90px; }
.eyebrow { margin: 0 0 12px; color: var(--accent); font: 700 0.72rem/1.2 ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: clamp(3.1rem, 7.4vw, 7.5rem); line-height: 0.92; letter-spacing: -0.07em; font-weight: 720; }
.hero h1:focus { outline: none; }
.hero h1 span { color: var(--muted); }
.lede { max-width: 620px; margin: 32px 0 0; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.65; }

.workspace { display: grid; grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr); gap: 1px; background: var(--line); }
.control-panel, .converter-panel { background: var(--surface); padding: clamp(28px, 4vw, 60px); }
.converter-panel { background: #141a18; }
.section-heading { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 42px; }
.section-heading h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.4rem); letter-spacing: -0.045em; }
.step { color: #758078; font: 600 0.72rem/1 ui-monospace, monospace; padding-top: 4px; }

label { display: flex; justify-content: space-between; gap: 12px; margin: 22px 0 10px; color: #d8ddd5; font-size: 0.84rem; font-weight: 650; }
label span { color: #76827a; font-weight: 450; }
input, select, textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 0;
    color: var(--ink);
    background: var(--surface-high);
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
select { min-height: 48px; padding: 0 14px; }
textarea { resize: vertical; padding: 16px; line-height: 1.55; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input:disabled, select:disabled { color: #707a73; background: #151b18; cursor: not-allowed; opacity: 0.72; }
.encoding-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.encoding-options label { min-height: 20px; }
.option-note { margin: 10px 0 0; color: var(--muted); font: 0.7rem/1.5 ui-monospace, monospace; }
.alphabet-input, .value-input, .value-output { font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", monospace; }
.alphabet-input { min-height: 92px; color: var(--accent); word-break: break-all; }
.separator-input { min-height: 48px; padding: 0 14px; color: var(--accent); font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", monospace; }
.value-input, .value-output { min-height: 178px; font-size: 0.95rem; }
.value-output { color: var(--accent); background: #101513; }

.validation { margin-top: 18px; padding: 14px 16px; border: 1px solid; font: 0.75rem/1.5 ui-monospace, monospace; }
.validation strong, .validation span { display: block; }
.validation strong { margin-bottom: 4px; }
.validation.valid { border-color: rgba(169, 239, 197, 0.45); color: var(--success); background: rgba(169, 239, 197, 0.06); }
.validation.invalid { border-color: rgba(255, 143, 123, 0.5); color: var(--danger); background: rgba(255, 143, 123, 0.06); }
.validation ul { margin: 7px 0 0; padding-left: 19px; }
.validation li + li { margin-top: 5px; }
.share-action { width: 100%; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; }
.share-action:hover { border-color: var(--accent); color: var(--accent); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats div { padding: 18px 10px; border-right: 1px solid var(--line); }
.stats div:first-child { padding-left: 0; }
.stats div:last-child { border-right: 0; }
.stats span { display: block; min-height: 28px; color: #77827b; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; }
.stats strong { font: 650 1rem/1 ui-monospace, monospace; }

.converter-heading { align-items: center; }
.mode-switch { display: flex; margin-left: auto; padding: 4px; border: 1px solid var(--line); background: #0f1512; }
.mode-switch button { border: 0; padding: 9px 13px; color: var(--muted); background: transparent; cursor: pointer; }
.mode-switch button.active { color: #10150f; background: var(--accent); }

.file-loader { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px; border: 1px dashed var(--line); background: #101513; }
.file-loader strong, .file-loader span { display: block; }
.file-loader strong { margin-bottom: 4px; font-size: 0.85rem; }
.file-loader span { color: var(--muted); font-size: 0.72rem; }
.file-loader input[type="file"] { width: min(230px, 48%); border: 0; color: var(--muted); background: transparent; font-size: 0.72rem; }
.file-loader input[type="file"]::file-selector-button { margin-right: 10px; padding: 9px 11px; border: 1px solid var(--line); color: var(--ink); background: var(--surface-high); cursor: pointer; }
.view-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-top: 24px; }
.view-header label { flex: 1; margin-bottom: 10px; }
.view-switch { display: flex; padding: 3px; border: 1px solid var(--line); background: #0f1512; }
.view-switch button { border: 0; padding: 7px 9px; color: var(--muted); background: transparent; cursor: pointer; font-size: 0.7rem; }
.view-switch button.active { color: #10150f; background: var(--accent); }
.preview-note { margin: 8px 0 0; color: var(--muted); font: 0.7rem/1.4 ui-monospace, monospace; }

.primary-action {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--accent);
    color: #10150f;
    background: var(--accent);
    font-weight: 750;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}
.primary-action:hover { color: var(--accent); background: transparent; }
.primary-action:disabled { border-color: var(--line); color: #778078; background: var(--surface-high); cursor: not-allowed; }
.output-header { display: flex; align-items: end; justify-content: space-between; margin-top: 28px; }
.output-header label { flex: 1; margin-bottom: 10px; }
.transfer-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border: 1px solid var(--line); background: #101513; }
.transfer-stats div { padding: 13px 15px; border-right: 1px solid var(--line); }
.transfer-stats div:last-child { border-right: 0; }
.transfer-stats span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; }
.transfer-stats strong { font: 650 0.86rem/1 ui-monospace, monospace; }
.result-actions { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: 10px; }
.text-button { border: 0; padding: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: 0.78rem; }
.text-button:hover:not(:disabled) { color: var(--accent); }
.text-button:disabled { opacity: 0.35; cursor: default; }
.download-action { margin-left: 8px; padding: 9px 12px; border: 1px solid var(--accent); color: var(--accent); background: transparent; cursor: pointer; font-size: 0.75rem; }
.download-action:hover:not(:disabled) { color: #10150f; background: var(--accent); }
.download-action:disabled { border-color: var(--line); color: var(--muted); opacity: 0.35; cursor: default; }
.message { margin: 14px 0 0; font: 500 0.78rem/1.5 ui-monospace, monospace; }
.message.success { color: var(--success); }
.message.error { color: var(--danger); }

footer { display: flex; justify-content: space-between; gap: 24px; padding: 30px 0 50px; border-top: 1px solid var(--line); color: #768078; font-size: 0.76rem; }
.not-found { min-height: 70vh; display: grid; place-content: center; text-align: center; }
.not-found h1 { margin: 0 0 24px; }
.not-found a { color: var(--accent); }

.loading-shell { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 18px; color: var(--muted); }
.loading-mark { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--accent); color: var(--accent); font: 700 1.4rem/1 ui-monospace, monospace; }
.loading-track { width: 180px; height: 2px; background: var(--line); overflow: hidden; }
.loading-track span { display: block; width: 45%; height: 100%; background: var(--accent); animation: load 1.3s ease-in-out infinite; }
.loading-shell p { font: 0.75rem/1 ui-monospace, monospace; }
@keyframes load { 0% { transform: translateX(-110%); } 100% { transform: translateX(340%); } }

#blazor-error-ui { display: none; position: fixed; inset: auto 16px 16px; z-index: 1000; padding: 14px 18px; color: #180c09; background: var(--danger); box-shadow: 0 10px 40px #0008; }
#blazor-error-ui .reload { margin-left: 12px; color: inherit; font-weight: 700; }
#blazor-error-ui .dismiss { float: right; margin-left: 22px; border: 0; color: inherit; background: none; font-size: 1.2rem; cursor: pointer; }

@media (max-width: 900px) {
    .hero { min-height: 430px; }
    .hero-copy { margin-top: 72px; }
    .workspace { grid-template-columns: 1fr; }
    .converter-heading { flex-wrap: wrap; }
    .mode-switch { width: 100%; margin: 4px 0 0 34px; }
    .mode-switch button { flex: 1; }
    .view-header { align-items: stretch; flex-direction: column; gap: 0; }
    .view-switch { align-self: flex-end; }
}

@media (max-width: 560px) {
    .site-shell { padding: 0 18px; }
    .hero { padding-top: 22px; }
    .hero::after { display: none; }
    .hero-copy { margin-top: 68px; }
    .hero h1 { font-size: clamp(3rem, 15vw, 5rem); }
    .control-panel, .converter-panel { padding: 30px 20px; }
    .encoding-options { grid-template-columns: 1fr; gap: 0; }
    .section-heading { margin-bottom: 30px; }
    .file-loader { align-items: flex-start; flex-direction: column; }
    .file-loader input[type="file"] { width: 100%; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stats div:nth-child(2) { border-right: 0; }
    .stats div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .stats div:nth-child(3) { padding-left: 0; }
    .stats span { min-height: 28px; }
    .transfer-stats div { padding: 12px 9px; }
    .result-actions { align-items: stretch; flex-direction: column; }
    .download-action { margin-left: 0; }
    footer { flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}