:root{--surface:#fff;--soft:#f5f6f0;--tone:#677568;--accent-ink:#142b36;--on-strong:#fff}
:root[data-theme=ocean]{--paper:#eef5fa;--ink:#123549;--muted:#526b7a;--line:#ccdfe9;--amber:#7dcced;--amber-hover:#60bbdf;--pale:#e1f3fc;--green:#17646b;--surface:#fff;--soft:#f2f8fc;--tone:#526e7d;--accent-ink:#123549}
:root[data-theme=forest]{--paper:#eff4ec;--ink:#243c30;--muted:#566c5c;--line:#cdddc9;--amber:#b6d595;--amber-hover:#9ec67a;--pale:#e3efd7;--green:#306a44;--surface:#fcfef9;--soft:#f1f7ea;--tone:#576e56;--accent-ink:#243c30}
:root[data-theme=night]{color-scheme:dark;--paper:#111b26;--ink:#edf3fa;--muted:#b0bed0;--line:#3b4b5e;--amber:#e9ba67;--amber-hover:#f1cd8b;--pale:#303a44;--green:#a3d6bb;--surface:#1a2838;--soft:#223247;--tone:#b8c8d9;--accent-ink:#192632;--on-strong:#192632;--white:#1a2838;--shadow:0 9px 30px #0003}
.theme-picker{max-width:105px;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:12px}
.file-preview{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:28px;background:var(--soft);color:var(--ink)}
.file-preview>.icon{width:48px;height:48px}.file-preview p{margin:0}.drop-subtitle{overflow-wrap:anywhere;max-width:100%}
:root:not([data-theme=classic]) .card,:root:not([data-theme=classic]) .dialog,:root:not([data-theme=classic]) .input,:root:not([data-theme=classic]) .select,:root:not([data-theme=classic]) .text-input{background:var(--surface);border-color:var(--line);color:var(--ink)}
:root:not([data-theme=classic]) :is(.editor-bottom,.dropzone,.image-selection,.received-image,.received-text,.share-row .input,.admin-table th,.upload-icon,.filter.active,.status-badge,.nav-link.current,.nav-link:hover,.message.info){background:var(--soft);color:var(--tone);border-color:var(--line)}
:root:not([data-theme=classic]) .primary{background:var(--amber);color:var(--accent-ink);border-color:var(--amber)}
:root:not([data-theme=classic]) .primary:hover:not(:disabled){background:var(--amber-hover)}
:root:not([data-theme=classic]) :is(.secondary,.subtle-button,.icon-button){color:var(--ink)}
:root:not([data-theme=classic]) :is(.eyebrow,.step,.side-kicker,.how-list,.drop-subtitle,.meta-label,.filter,.result-count,.cell-secondary,.page-label,.parcel-id,.event-action,.expiry-note strong){color:var(--tone)}
:root:not([data-theme=classic]) :is(.side-title,.how-list strong,.drop-title,.file-name,.meta-value,.received-text){color:var(--ink)}
:root:not([data-theme=classic]) :is(.editor,.editor-bottom,.settings,.share-content,.metadata,.admin-top,.admin-filter-row,.admin-table th,.admin-table td,.admin-table tr,.step-number,.image-selection,.received-image,.received-text){border-color:var(--line)}
:root:not([data-theme=classic]) :is(.admin-tab.active,.step.active .step-number,.skip-link){color:var(--on-strong)}
:root:not([data-theme=classic]) .tag{background:var(--pale);color:var(--ink)}
:root:not([data-theme=classic]) .brand-mark{color:var(--amber);background:var(--accent-ink)}
:root[data-theme=night] :is(.success-icon,.status-badge.active,.step.done .step-number){background:#254137;color:#b1e3c4;border-color:#4a6958}
:root[data-theme=night] :is(.message.error,.status-badge.revoked){background:#492d34;color:#ffc2b5}
:root[data-theme=night] .status-badge.expired{background:#334052;color:#b8c8d9}
:root[data-theme=night] :is(.how-num,.editor-bottom,.optional){color:var(--muted)}
:root[data-theme=night] .how-num{background:var(--soft);border-color:var(--line)}
:root:not([data-theme=classic]) .type-tabs{background:var(--soft);border-color:var(--line)}
:root:not([data-theme=classic]) .type-tab{color:var(--tone)}
:root:not([data-theme=classic]) .type-tab.active{background:var(--surface);color:var(--ink);border-color:var(--line)}
:root[data-theme=night] input::placeholder,:root[data-theme=night] textarea::placeholder{color:#a3b2c6;opacity:1}
@media(max-width:640px){.site-header{gap:6px}.brand-note{max-width:145px}.theme-picker{max-width:81px;padding:7px 5px;font-size:11px}.header-nav{gap:2px}.brand{gap:6px}.file-preview{min-height:180px}}
@media(max-width:360px){.brand-note{font-size:9px;max-width:112px}.brand-name{font-size:19px}.brand-mark{width:29px;height:29px}.theme-picker{max-width:69px}.nav-link{padding-inline:4px}}
