/* Shared appearance tokens. Design changes the palette; light/dark stays independent. */
:root{
  --ui-font-body:Inter,system-fallback,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ui-font-title:Georgia,"Times New Roman",serif;
  --ui-touch-size:44px;--ui-icon-size:20px;--ui-radius-control:10px;--ui-radius-card:14px;--ui-radius-panel:20px;--ui-radius-chip:6px;
  --ui-bg:#f5f7f8;--ui-surface:#fff;--ui-surface-soft:#edf3ef;--ui-surface-raised:#fff;--ui-overlay-surface:#fffffff5;
  --ui-text:#203831;--ui-heading:#153d35;--ui-muted:#5d7069;--ui-line:#dce5e1;
  --ui-input-bg:#fff;--ui-input-line:#dce5e1;--ui-placeholder:#7d8d84;
  --ui-primary:#153d35;--ui-primary-hover:#235444;--ui-on-primary:#fff;--ui-accent:#227a60;
  --ui-nav-bg:#153d35;--ui-nav-text:#d4e2dc;--ui-nav-muted:#9ebeb1;--ui-nav-active:#ffffff18;--ui-nav-hover:#ffffff0d;--ui-nav-highlight:#ecd397;--ui-gold:#ecd397;--ui-auth-bg:#153d35;
  --ui-focus:#b4842c;--ui-danger:#a13727;--ui-danger-soft:#f9ece8;--ui-badge-bg:#ae3024;--ui-on-badge:#fff;
  --ui-warning-bg:#fff1ca;--ui-warning-text:#68501c;
  --ui-owned-bg:#e4f1e9;--ui-owned-text:#174c34;--ui-owned-line:#70a587;--ui-card-hover:#a6bdae;--ui-card-owned:#afc7b7;
  --ui-art-top:#fff;--ui-art-mid:#e4ece5;--ui-art-bottom:#d3dfd5;--ui-photo-bg:#f6f8f5;
  --ui-toast-bg:#173e32;--ui-toast-text:#fff;--ui-shadow:0 8px 24px #163a2710;--ui-panel-shadow:0 30px 80px #0822173d;--ui-backdrop:#081b166b;
}
:root[data-theme="dark"]{
  --ui-bg:#101c16;--ui-surface:#1a2b22;--ui-surface-soft:#20382a;--ui-surface-raised:#34563f;--ui-overlay-surface:#15251dee;
  --ui-text:#e4eeea;--ui-heading:#b7dfcd;--ui-muted:#afc1b8;--ui-line:#3b5147;
  --ui-input-bg:#13251a;--ui-input-line:#54705b;--ui-placeholder:#a5b8a9;
  --ui-primary:#a4d9bd;--ui-primary-hover:#bce9d0;--ui-on-primary:#102c1c;--ui-accent:#8dd6b5;
  --ui-nav-bg:#11271c;--ui-nav-text:#d4e2dc;--ui-nav-muted:#9ebeb1;--ui-nav-highlight:#ecd397;--ui-auth-bg:#0d1912;
  --ui-focus:#f0d291;--ui-danger:#ffb2a1;--ui-danger-soft:#492d29;--ui-badge-bg:#ba4336;
  --ui-warning-bg:#493c20;--ui-warning-text:#f3dda7;
  --ui-owned-bg:#294b37;--ui-owned-text:#e4f7e9;--ui-owned-line:#83ba97;--ui-card-hover:#77987f;--ui-card-owned:#678f70;
  --ui-art-top:#355340;--ui-art-mid:#192d20;--ui-art-bottom:#112117;--ui-photo-bg:#e5e9e4;
  --ui-toast-bg:#b8dfc7;--ui-toast-text:#112b1c;--ui-shadow:0 8px 24px #020a0640;--ui-panel-shadow:0 30px 80px #020a0680;--ui-backdrop:#030a07b8;
}
:root[data-design="neo"]{
  --ui-font-title:var(--ui-font-body);--ui-radius-control:12px;--ui-radius-card:16px;--ui-radius-panel:22px;
  --ui-bg:#f3f6fc;--ui-surface:#fff;--ui-surface-soft:#edf2fc;--ui-surface-raised:#fff;--ui-overlay-surface:#fffffff5;
  --ui-text:#1e2d46;--ui-heading:#17396e;--ui-muted:#5e6f89;--ui-line:#dbe3f0;
  --ui-input-bg:#fff;--ui-input-line:#cbd7eb;--ui-placeholder:#71819b;
  --ui-primary:#2459d6;--ui-primary-hover:#1947b9;--ui-on-primary:#fff;--ui-accent:#265bc7;
  --ui-nav-bg:#122d60;--ui-nav-text:#d8e5ff;--ui-nav-muted:#a9c1eb;--ui-nav-highlight:#e7efff;--ui-gold:#c4d8ff;--ui-auth-bg:#122d60;
  --ui-focus:#325ee7;--ui-danger:#aa322e;--ui-danger-soft:#fceceb;--ui-badge-bg:#b52f36;
  --ui-warning-bg:#fff2d6;--ui-warning-text:#73531a;
  --ui-owned-bg:#e8f0ff;--ui-owned-text:#204c9b;--ui-owned-line:#7f9ed8;--ui-card-hover:#9ab3e1;--ui-card-owned:#8eabdf;
  --ui-art-top:#fff;--ui-art-mid:#e8eef9;--ui-art-bottom:#d8e3f5;--ui-photo-bg:#f1f4f8;
  --ui-toast-bg:#17396e;--ui-toast-text:#fff;--ui-shadow:0 8px 24px #17396e12;--ui-panel-shadow:0 30px 80px #1026553d;--ui-backdrop:#101d386b;
}
:root[data-design="neo"][data-theme="dark"]{
  --ui-bg:#0e1628;--ui-surface:#17233a;--ui-surface-soft:#1e2e49;--ui-surface-raised:#2b4162;--ui-overlay-surface:#142039f2;
  --ui-text:#e7edf8;--ui-heading:#b8d0ff;--ui-muted:#b0bdd3;--ui-line:#344762;
  --ui-input-bg:#101d32;--ui-input-line:#506787;--ui-placeholder:#9aabc6;
  --ui-primary:#97bdff;--ui-primary-hover:#b8d0ff;--ui-on-primary:#101f3a;--ui-accent:#89b4ff;
  --ui-nav-bg:#101d34;--ui-nav-text:#d8e5ff;--ui-nav-muted:#a9c1eb;--ui-nav-highlight:#e7efff;--ui-auth-bg:#0b1323;
  --ui-focus:#9abfff;--ui-danger:#ffb2ac;--ui-danger-soft:#492d36;--ui-badge-bg:#ba3948;
  --ui-warning-bg:#443921;--ui-warning-text:#f5dba5;
  --ui-owned-bg:#263f66;--ui-owned-text:#e1ecff;--ui-owned-line:#88a9e0;--ui-card-hover:#7894bd;--ui-card-owned:#799acc;
  --ui-art-top:#344d72;--ui-art-mid:#1b2c48;--ui-art-bottom:#122039;--ui-photo-bg:#e8edf5;
  --ui-toast-bg:#bdd2fa;--ui-toast-text:#12223e;--ui-shadow:0 8px 24px #02081750;--ui-panel-shadow:0 30px 80px #020817a0;--ui-backdrop:#040a17b8;
}

/* Existing collection, social, progress and messaging components share these aliases. */
:root[data-design]{
  --bg:var(--ui-bg);--surface:var(--ui-surface);--green:var(--ui-heading);--accent:var(--ui-accent);--muted:var(--ui-muted);--line:var(--ui-line);--gold:var(--ui-gold);
  color:var(--ui-text);background:var(--ui-bg);font-family:var(--ui-font-body);accent-color:var(--ui-accent);
}
:root[data-design] :is(h1,dialog h2,.brand,.brand-mark,.mobile-brand,.title-button,.market-title,.sidebar-bottom p,.empty h2),
:root[data-design] #message-coin-picker .mcp-selected-copy h3{font-family:var(--ui-font-title)}
:root[data-design="neo"] :is(h1,dialog h2,.title-button,.market-title),
:root[data-design="neo"] #message-coin-picker .mcp-selected-copy h3{font-weight:600;letter-spacing:-.025em}
:root[data-design] :is(h1,.title-button,.market-title){color:var(--ui-heading)}
:root[data-design] :is(.topbar-context,.sync-status,.result-total,.catalog-note,.coin-meta,.country-line,.stat>span,.stat p span,.stat small,.progress-stat>div>span,footer){color:var(--ui-muted)}
:root[data-design] :is(.auth-card,.stat,.coin-card,dialog){background:var(--ui-surface)}
:root[data-design] :is(.auth-card,dialog){border-radius:var(--ui-radius-panel)}
:root[data-design] dialog{box-shadow:var(--ui-panel-shadow)}
:root[data-design] dialog::backdrop{background:var(--ui-backdrop)}
:root[data-design] .auth{background:var(--ui-auth-bg)}
:root[data-design] :is(.topbar,.desktop-toolbar-slot,.mobile-nav){background:var(--ui-overlay-surface)}
:root[data-design] :is(.coin-card,.stat,.market-card,.progress-group,.notification-item){border-radius:var(--ui-radius-card)}
:root[data-design] .coin-card:hover{border-color:var(--ui-card-hover);box-shadow:var(--ui-shadow)}
:root[data-design] .coin-card.owned{border-color:var(--ui-card-owned)}
:root[data-design] :is(.progress-stat,.type-tabs,.detail-media-modes){background:var(--ui-surface-soft);border-color:var(--ui-line)}
:root[data-design] .progress-track{background:var(--ui-line)}
:root[data-design] .progress-track>div{background:var(--ui-accent)}
:root[data-design] .stat .stat-icon{color:var(--ui-accent)}

/* A single control size and focus treatment, without changing panel layouts. */
:root[data-design] :is(.button,.card-action,.toolbar-icon,.sort-option,.model-controls button,.detail-media-modes button,.type-tabs button,.owned-year-row button),
:root[data-design] #direct-messages .dm-button,
:root[data-design] #message-coin-picker .mcp-scopes button{
  min-height:var(--ui-touch-size);border-radius:var(--ui-radius-control);line-height:1.35;
}
:root[data-design] :is(.ui-icon-button,.ui-close,.ui-back,.help-button,.close,.back-control,.icon-button,.toolbar-icon),
:root[data-design] #direct-messages .dm-icon,
:root[data-design] #message-coin-picker .mcp-icon{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;
  min-width:var(--ui-touch-size);min-height:var(--ui-touch-size);padding:8px 10px;
  border:1px solid var(--ui-line);border-radius:var(--ui-radius-control);background:var(--ui-surface);color:var(--ui-heading);line-height:1;
}
:root[data-design] :is(.ui-icon-button,.ui-close,.help-button,.close,.icon-button),
:root[data-design] #direct-messages .dm-icon,
:root[data-design] #message-coin-picker .mcp-icon{width:var(--ui-touch-size);height:var(--ui-touch-size);padding:10px}
:root[data-design] :is(.ui-icon-button,.ui-close,.ui-back,.help-button,.close,.back-control,.icon-button,.toolbar-icon):hover,
:root[data-design] #direct-messages .dm-icon:hover,
:root[data-design] #message-coin-picker .mcp-icon:hover{background:var(--ui-surface-soft)}
:root[data-design] .ui-control-icon,
:root[data-design] :is(.ui-icon-button,.ui-close,.ui-back,.help-button,.close,.back-control,.icon-button,.dm-icon,.mcp-icon) svg{
  display:block;width:var(--ui-icon-size);height:var(--ui-icon-size);flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
:root[data-design] :is(button,a,input,select,textarea,[tabindex]):focus-visible,
:root[data-design] .import-label:focus-within{outline:3px solid var(--ui-focus);outline-offset:3px}
:root[data-design] :is(input,select,textarea){background:var(--ui-input-bg);color:var(--ui-text);border-color:var(--ui-input-line);border-radius:var(--ui-radius-control)}
:root[data-design] :is(input,textarea)::placeholder{color:var(--ui-placeholder)}
:root[data-design] .search>span{color:var(--ui-placeholder)}
:root[data-design] .stepper input{background:transparent;padding:0}
:root[data-design] :is(.stepper,.sort-controls,.friend-sort-controls){border-radius:var(--ui-radius-control)}
:root[data-design] :is(.stepper button,.friend-sort-controls button,#sort-direction){min-width:var(--ui-touch-size);min-height:var(--ui-touch-size)}
:root[data-design] :is(.secondary,.toolbar-icon,.model-controls button,.card-action),
:root[data-design] #direct-messages .dm-button{background:var(--ui-surface);color:var(--ui-heading);border-color:var(--ui-line)}
:root[data-design] :is(.secondary,.toolbar-icon,.model-controls button,.card-action):hover,
:root[data-design] #direct-messages .dm-button:hover{background:var(--ui-surface-soft)}
:root[data-design] .primary,
:root[data-design] #direct-messages .dm-primary{background:var(--ui-primary);color:var(--ui-on-primary);border-color:var(--ui-primary)}
:root[data-design] .primary:hover,
:root[data-design] #direct-messages .dm-primary:hover{background:var(--ui-primary-hover);border-color:var(--ui-primary-hover)}
:root[data-design] :is(.type-tabs button,.detail-media-modes button){color:var(--ui-muted)}
:root[data-design] :is(.type-tabs button.selected,.detail-media-modes button[aria-pressed="true"]){background:var(--ui-surface-raised);color:var(--ui-heading);box-shadow:var(--ui-shadow)}
:root[data-design] .source-link{color:var(--ui-accent)}

/* Navigation uses the same palette in the sidebar and the nested Social drawer. */
:root[data-design] .sidebar{background:var(--ui-nav-bg);color:var(--ui-nav-text)}
:root[data-design] :is(.brand small,.nav-label,.tiny-label){color:var(--ui-nav-muted)}
:root[data-design] .sidebar-bottom p{color:var(--ui-nav-text)}
:root[data-design] .brand-mark{background:var(--ui-gold);color:var(--ui-nav-bg)}
:root[data-design] .sidebar .nav-button{color:var(--ui-nav-text)}
:root[data-design] .sidebar .nav-button:hover{background:var(--ui-nav-hover)}
:root[data-design] .sidebar .nav-button.active{background:var(--ui-nav-active);color:var(--ui-nav-highlight)}
:root[data-design] .sidebar-add{background:var(--ui-nav-hover);border-color:#ffffff35;color:var(--ui-nav-text)}
:root[data-design] .sidebar-add:hover{background:var(--ui-nav-active)}
:root[data-design] .avatar{background:var(--ui-surface-soft);border-color:var(--ui-line);color:var(--ui-heading)}
:root[data-design] .friend-avatar{background:var(--ui-primary);color:var(--ui-on-primary)}
@media(min-width:1001px){
  :root[data-design] :is(.friend-nav,.social-tabs){background:var(--ui-nav-bg)}
  :root[data-design] :is(.friend-nav,.social-tabs) button{color:var(--ui-nav-text)}
  :root[data-design] :is(.friend-nav,.social-tabs) button[aria-pressed="true"]{background:var(--ui-nav-active);color:var(--ui-nav-highlight)}
}
@media(max-width:1000px){
  :root[data-design] :is(.friend-nav,.social-tabs){background:var(--ui-surface)}
  :root[data-design] :is(.friend-nav,.social-tabs) button,
  :root[data-design] .mobile-nav .nav-button{color:var(--ui-muted)}
  :root[data-design] :is(.friend-nav,.social-tabs) button[aria-pressed="true"]{background:var(--ui-primary);color:var(--ui-on-primary)}
  :root[data-design] .mobile-nav .nav-button.active{background:var(--ui-owned-bg);color:var(--ui-owned-text)}
  :root[data-design] .toolbar-stats{background:var(--ui-surface-soft);border-color:var(--ui-line)}
  :root[data-design] .toolbar-icon{width:100%;height:auto;justify-content:flex-start}
  :root[data-design] :is(input,select,textarea),
  :root[data-design] :is(#friend-page,#message-coin-picker,#direct-messages,#settings-dialog,.collection-tools,.sort-controls) :is(input,select,textarea){font-size:16px;min-height:var(--ui-touch-size);padding:10px 12px}
}

/* Keep metal and photographic colors intact; only the surrounding UI changes. */
:root[data-design] :is(.coin-art,.model-stage){background:radial-gradient(ellipse at 50% 35%,var(--ui-art-top) 0,var(--ui-art-mid) 65%,var(--ui-art-bottom) 100%)}
:root[data-design] .detail-image{background:var(--ui-photo-bg)}
:root[data-design] .coin-art .year-tag{background:var(--ui-overlay-surface);color:var(--ui-muted)}
:root[data-design] .coin-art .model-badge{background:var(--ui-primary);color:var(--ui-on-primary);border-color:var(--ui-line)}
:root[data-design] :is(.owned-tag,.owned-indicator,.owned .card-action){background:var(--ui-owned-bg);color:var(--ui-owned-text);border-color:var(--ui-owned-line)}
:root[data-design] :is(.period-chip,.year-stack span,.market-type){border-radius:var(--ui-radius-chip)}
:root[data-design] .empty{background:var(--ui-surface);border-color:var(--ui-line)}
:root[data-design] .empty>span{color:var(--ui-accent)}
:root[data-design] .demo-banner{background:var(--ui-warning-bg);color:var(--ui-warning-text)}
:root[data-design] .toast{background:var(--ui-toast-bg);color:var(--ui-toast-text);box-shadow:var(--ui-shadow)}
:root[data-design] .notification-badge{background:var(--ui-badge-bg);color:var(--ui-on-badge)}
:root[data-design] .error{color:var(--ui-danger)!important}
:root[data-design] #direct-messages .dm-error,
:root[data-design] #message-coin-picker .mcp-error{color:var(--ui-danger)}
:root[data-design] #message-coin-picker .mcp-error{background:var(--ui-danger-soft)}
:root[data-design] #direct-messages .dm-avatar{font-family:var(--ui-font-title)}
:root[data-design] #direct-messages .dm-unread-count{background:var(--ui-primary);color:var(--ui-on-primary)}
:root[data-design] #message-coin-picker .mcp-scopes button[aria-pressed="true"]{background:var(--ui-primary);color:var(--ui-on-primary)}

/* Information controls stay light while retaining a generous touch target. */
:root[data-design] .help-button{border:0;background:transparent;box-shadow:none;color:var(--ui-muted);border-radius:50%;width:30px;height:30px;min-width:30px;min-height:30px;padding:5px}
:root[data-design] .help-button:hover{background:transparent;color:var(--ui-accent);box-shadow:none}
:root[data-design] .help-button .ui-control-icon{width:19px;height:19px}
@media(pointer:coarse){:root[data-design] .help-button{width:44px;height:44px;min-width:44px;min-height:44px;padding:12px}}

/* Changing a palette repaints once; local hover/focus/press transitions resume afterwards. */
:root[data-appearance-changing],:root[data-appearance-changing] *,
:root[data-appearance-changing] *::before,:root[data-appearance-changing] *::after{transition:none!important}

/* Keep opaque surfaces responsive while palettes change; restore decorative gradients afterwards. */
:root[data-design][data-appearance-changing]{--ui-content-gradient:none}
:root[data-design][data-appearance-changing] body{background-image:none}

/* Depth is shared by every palette: 0 canvas, 1 content, 2 floating surfaces.
   Content stays opaque. Only a few navigation / popover surfaces use glass. */
:root{
  --ui-bg:#f3f5f0;--ui-placeholder:#60736a;
  --ui-auth-muted:#51695e;--ui-auth-link:#1c7056;
  --ui-page-light:#e1eae066;--ui-page-warm:#eee2c52b;
  --ui-content-surface:#fbfcf8;--ui-content-highlight:#ffffffd9;
  --ui-content-gradient:linear-gradient(165deg,var(--ui-content-highlight),transparent 55%);
  --ui-content-border:#d5dfd5;--ui-floating-surface:#f9fcf7;
  --ui-glass-fill:#f9fcf7ed;--ui-glass-fallback:#f9fcf7;
  --ui-glass-border:#cbd9cf;--ui-glass-highlight:#ffffffcc;
  --ui-nav-glass:#153d35ed;--ui-nav-fallback:#153d35;
  --ui-shadow-1:0 3px 12px #193b2c0c;
  --ui-shadow-2:0 16px 44px #102e2929,0 2px 8px #102e2914;
  --ui-card-shadow-hover:0 7px 18px #193b2c18;
  --ui-input-shadow:inset 0 1px 2px #183a2709;
  --ui-control-shadow:0 2px 4px #183a270a;
  --ui-primary-reflection:#ffffff12;--ui-focus-halo:#b4842c24;
  --ui-selected-surface:var(--ui-owned-bg);
  --ui-control-hover:var(--ui-surface-soft);--ui-control-pressed:var(--ui-owned-bg);
  --ui-disabled-opacity:.55;--ui-glass-blur:12px;--ui-glass-saturation:110%;
  --ui-backdrop-blur:2px;--ui-backdrop:#071c1966;
  --ui-duration-fast:160ms;--ui-duration-panel:220ms;--ui-duration-press:90ms;
  --ui-ease:cubic-bezier(.2,.8,.2,1);--ui-hover-lift:-2px;
}
:root[data-theme="dark"]{
  --ui-bg:#101c17;--ui-placeholder:#adbbb2;
  --ui-auth-muted:var(--ui-muted);--ui-auth-link:var(--ui-accent);
  --ui-page-light:#29473538;--ui-page-warm:#ad905007;
  --ui-content-surface:#1e3027;--ui-content-highlight:#d5f5e207;
  --ui-content-border:#3b5146;--ui-floating-surface:#263c31;
  --ui-glass-fill:#263c31f0;--ui-glass-fallback:#263c31;
  --ui-glass-border:#516459;--ui-glass-highlight:#deffeb12;
  --ui-nav-glass:#13291fee;--ui-nav-fallback:#13291f;
  --ui-shadow-1:0 3px 12px #01090526;
  --ui-shadow-2:0 18px 48px #01080566,0 2px 8px #01080533;
  --ui-card-shadow-hover:0 7px 18px #01090542;
  --ui-input-shadow:inset 0 1px 3px #01090522;
  --ui-control-shadow:0 2px 4px #01090524;
  --ui-primary-reflection:#ffffff0a;--ui-focus-halo:#f0d29122;
  --ui-backdrop:#030b08a6;
}
:root[data-design="neo"]{
  --ui-bg:#f1f4f9;--ui-placeholder:#5f708a;
  --ui-auth-muted:#516580;--ui-auth-link:var(--ui-accent);
  --ui-page-light:#d7e4fa66;--ui-page-warm:#ebdfc31a;
  --ui-content-surface:#f9fbfe;--ui-content-highlight:#ffffffeb;
  --ui-content-border:#d4dfee;--ui-floating-surface:#f8fbff;
  --ui-glass-fill:#f8fbffed;--ui-glass-fallback:#f8fbff;
  --ui-glass-border:#c7d6ec;--ui-glass-highlight:#ffffffd9;
  --ui-nav-glass:#122d60ee;--ui-nav-fallback:#122d60;
  --ui-shadow-1:0 3px 12px #1536610d;
  --ui-shadow-2:0 16px 44px #102c5726,0 2px 8px #102c5712;
  --ui-card-shadow-hover:0 7px 18px #1536611a;
  --ui-input-shadow:inset 0 1px 2px #1239690a;
  --ui-control-shadow:0 2px 4px #1239690c;
  --ui-focus-halo:#325ee71c;--ui-backdrop:#0b193466;
}
:root[data-design="neo"][data-theme="dark"]{
  --ui-bg:#10192b;--ui-placeholder:#aab9d0;
  --ui-auth-muted:var(--ui-muted);--ui-auth-link:var(--ui-accent);
  --ui-page-light:#314f7c33;--ui-page-warm:#b4c6df06;
  --ui-content-surface:#1c2b44;--ui-content-highlight:#d6e8ff08;
  --ui-content-border:#3b4e6b;--ui-floating-surface:#253953;
  --ui-glass-fill:#253953f0;--ui-glass-fallback:#253953;
  --ui-glass-border:#506784;--ui-glass-highlight:#e3eeff12;
  --ui-nav-glass:#13233dee;--ui-nav-fallback:#13233d;
  --ui-shadow-1:0 3px 12px #0107142b;
  --ui-shadow-2:0 18px 48px #01061473,0 2px 8px #01061433;
  --ui-card-shadow-hover:0 7px 18px #0107144d;
  --ui-input-shadow:inset 0 1px 3px #01071429;
  --ui-control-shadow:0 2px 4px #01071429;
  --ui-focus-halo:#9abfff26;--ui-backdrop:#030917ad;
}
:root[data-design]{--ui-shadow:var(--ui-shadow-1);--ui-panel-shadow:var(--ui-shadow-2);color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-design] body{
  background-color:var(--ui-bg);
  background-image:radial-gradient(ellipse at 10% 0,var(--ui-page-light),transparent 62%),radial-gradient(ellipse at 100% 20%,var(--ui-page-warm),transparent 55%);
  background-repeat:no-repeat;background-size:100% 100vh;
}
:root[data-design] .auth{
  background-color:var(--ui-auth-bg);
  background-image:radial-gradient(ellipse at 20% 12%,#ffffff0a,transparent 60%),linear-gradient(140deg,transparent,#0000001f);
}
:root[data-design] .auth-card :is(p,small){color:var(--ui-auth-muted)}
:root[data-design] .auth-legal a{color:var(--ui-auth-link)}
:root[data-design] :is(.coin-card,.stat,.market-card,.progress-group,.notification-item,.empty){
  background-color:var(--ui-content-surface);background-image:var(--ui-content-gradient);
  border-color:var(--ui-content-border);box-shadow:var(--ui-shadow-1),inset 0 1px var(--ui-content-highlight);
}
:root[data-design] :is(.coin-card,.market-card){
  transition:transform var(--ui-duration-fast) var(--ui-ease),border-color var(--ui-duration-fast),box-shadow var(--ui-duration-fast);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
:root[data-design] .coin-card.owned{border-color:var(--ui-card-owned)}
:root[data-design] .coin-art{box-shadow:inset 0 1px 1px var(--ui-content-highlight),inset 0 -1px 1px #00000008;border-radius:calc(var(--ui-radius-card) - 5px)}
:root[data-design] .coin-volume-fallback{transform:none;box-shadow:0 4px 8px #071b1922}
:root[data-design] .coin-motion{transform:none}
/* Catalogue motion belongs to the coin image; the surrounding card stays still. */
:root[data-design] #coin-grid .coin-card:hover{transform:none}
:root[data-design] #coin-grid .coin-motion{transition:transform var(--ui-duration-fast) var(--ui-ease)}
:root[data-design] #coin-grid .coin-motion[data-coin-moving]{transform:perspective(650px) rotateX(var(--coin-tilt-x,0deg)) rotateY(var(--coin-tilt-y,0deg))}
:root[data-design] :is(.coin-art,.detail-image) img{filter:none;mix-blend-mode:normal}
:root[data-design] :is(dialog,.auth-card){
  background:var(--ui-floating-surface);border:1px solid var(--ui-glass-border);
  box-shadow:var(--ui-shadow-2),inset 0 1px var(--ui-glass-highlight);
}
:root[data-design] dialog::backdrop{background:var(--ui-backdrop);backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-design] dialog[open]{animation:ecrin-panel-enter var(--ui-duration-panel) var(--ui-ease)}
@keyframes ecrin-panel-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
:root[data-design] :is(.topbar,.desktop-toolbar-slot,.mobile-nav){
  background:var(--ui-glass-fallback);border-color:var(--ui-glass-border);
  box-shadow:0 2px 12px #071b1908,inset 0 1px var(--ui-glass-highlight);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
:root[data-design] .sidebar{
  background:linear-gradient(155deg,#ffffff06,transparent 60%),var(--ui-nav-fallback);
  border-right:1px solid #ffffff12;box-shadow:4px 0 18px #061c180d;
}
:root[data-design] .brand-mark{border-radius:var(--ui-radius-control);box-shadow:inset 0 1px #ffffff66,0 3px 8px #001b1626}
:root[data-design] .sidebar .nav-button{transition:background-color var(--ui-duration-fast),color var(--ui-duration-fast)}
:root[data-design] .sidebar .nav-button.active{box-shadow:inset 0 1px #ffffff12}
:root[data-design] :is(.button,.card-action,.toolbar-icon,.model-controls button,.sort-option,.ui-icon-button,.ui-close,.ui-back,.close,.back-control,.icon-button){
  transition:background-color var(--ui-duration-fast),border-color var(--ui-duration-fast),box-shadow var(--ui-duration-fast),transform var(--ui-duration-press) var(--ui-ease);
}
:root[data-design] :is(.secondary,.toolbar-icon,.model-controls button,.card-action,.ui-icon-button,.ui-close,.ui-back,.close,.back-control,.icon-button){
  background-color:var(--ui-content-surface);background-image:var(--ui-content-gradient);
  border-color:var(--ui-content-border);box-shadow:var(--ui-control-shadow),inset 0 1px var(--ui-content-highlight);
}
:root[data-design] :is(.primary,#direct-messages .dm-primary){
  background-color:var(--ui-primary);background-image:linear-gradient(var(--ui-primary-reflection),transparent);
  border-color:var(--ui-primary);box-shadow:var(--ui-control-shadow),inset 0 1px var(--ui-primary-reflection);
}
/* Keep the sidebar add action deep in dark palettes, with the shared control relief. */
:root[data-design][data-theme="dark"] #add-coin{
  background-color:var(--ui-owned-bg);color:var(--ui-owned-text);border-color:var(--ui-owned-line);
}
:root[data-design][data-theme="dark"] #add-coin:not(:disabled):hover{background-color:var(--ui-surface-raised)}
:root[data-design][data-theme="dark"] #add-coin:not(:disabled):active{background-color:var(--ui-control-pressed)}
:root[data-design] :is(.danger,[data-danger="true"]){color:var(--ui-danger);border-color:var(--ui-danger);background:var(--ui-danger-soft)}
:root[data-design] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  box-shadow:var(--ui-input-shadow);
  transition:border-color var(--ui-duration-fast),box-shadow var(--ui-duration-fast),background-color var(--ui-duration-fast);
}
:root[data-design] :is(input,select,textarea):focus-visible{box-shadow:0 0 0 5px var(--ui-focus-halo);border-color:var(--ui-focus)}
:root[data-design] :is(input,select,textarea)[aria-invalid="true"]{border-color:var(--ui-danger)}
:root[data-design] :is(button,input,select,textarea):disabled{cursor:not-allowed;opacity:var(--ui-disabled-opacity);box-shadow:none;transform:none}
:root[data-design] :is(button,[role="button"])[aria-busy="true"]{cursor:progress}
:root[data-design] :is(.owned-tag,.owned-indicator,.owned .card-action){background:var(--ui-owned-bg);color:var(--ui-owned-text);border-color:var(--ui-owned-line)}
:root[data-design] :is(.sort-controls,.friend-sort-controls,.stepper){background:var(--ui-input-bg);box-shadow:var(--ui-input-shadow)}
:root[data-design] :is(.sort-controls,.friend-sort-controls,.stepper) :is(input,select,button){box-shadow:none}
:root[data-design] .help-button{box-shadow:none;background:transparent;border:0}
:root[data-design] :is(.friend-contact,.friend-profile,.notification-settings,.mintage-panel){background:var(--ui-content-surface);border-color:var(--ui-content-border)}
:root[data-design] .market-visual{box-shadow:inset 0 1px var(--ui-content-highlight);border-radius:var(--ui-radius-control)}
:root[data-design] :is(.market-person small,.market-copy p){color:var(--ui-muted)}
:root[data-design] .trade-safety-advice{background:var(--ui-content-surface);border-color:var(--ui-content-border);border-radius:var(--ui-radius-control)}
:root[data-design] .notification-item.unread{background:var(--ui-owned-bg);border-color:var(--ui-owned-line)}
:root[data-design] .social-header{background:var(--ui-floating-surface);border-color:var(--ui-glass-border)}
@media(min-width:1001px){
  :root[data-design] :is(.friend-nav,.social-tabs){background:linear-gradient(155deg,#ffffff06,transparent 60%),var(--ui-nav-fallback);border-color:#ffffff12}
}
@media(max-width:1000px){
  :root{--ui-glass-blur:8px;--ui-backdrop-blur:0px}
  :root[data-design] dialog .dialog-top{background:var(--ui-floating-surface);border-color:var(--ui-glass-border)}
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-design] :is(.topbar,.desktop-toolbar-slot,.mobile-nav,.auth-card){background-color:var(--ui-glass-fill);backdrop-filter:blur(var(--ui-glass-blur)) saturate(var(--ui-glass-saturation));-webkit-backdrop-filter:blur(var(--ui-glass-blur)) saturate(var(--ui-glass-saturation))}
  :root[data-design] .sidebar{background-color:var(--ui-nav-glass);backdrop-filter:blur(var(--ui-glass-blur));-webkit-backdrop-filter:blur(var(--ui-glass-blur))}
  :root[data-design] dialog::backdrop{backdrop-filter:blur(var(--ui-backdrop-blur));-webkit-backdrop-filter:blur(var(--ui-backdrop-blur))}
}
@media(hover:hover) and (pointer:fine){
  :root[data-design] .coin-card:hover{transform:translateY(var(--ui-hover-lift));box-shadow:var(--ui-card-shadow-hover),inset 0 1px var(--ui-content-highlight);border-color:var(--ui-card-hover)}
  :root[data-design] :is(.button,.card-action,.toolbar-icon):not(:disabled):hover{box-shadow:var(--ui-shadow-1),inset 0 1px var(--ui-content-highlight)}
  :root[data-design] :is(.button,.card-action,.toolbar-icon):not(:disabled):active{transform:translateY(1px);box-shadow:var(--ui-input-shadow);transition-duration:var(--ui-duration-press)}
}
@media(hover:none){
  :root[data-design] .coin-card:hover{box-shadow:var(--ui-shadow-1),inset 0 1px var(--ui-content-highlight);border-color:var(--ui-content-border)}
  :root[data-design] .coin-card.owned:hover{border-color:var(--ui-card-owned)}
  :root[data-design] :is(.button,.card-action,.toolbar-icon):not(:disabled):active{box-shadow:var(--ui-input-shadow);background-color:var(--ui-control-pressed)}
  :root[data-design] .primary:not(:disabled):active{background-color:var(--ui-primary-hover)}
}
@media(prefers-reduced-transparency:reduce){
  :root[data-design][data-theme]{--ui-glass-fill:var(--ui-glass-fallback);--ui-nav-glass:var(--ui-nav-fallback);--ui-glass-blur:0px;--ui-glass-saturation:100%;--ui-backdrop-blur:0px}
  :root[data-design] :is(.topbar,.desktop-toolbar-slot,.mobile-nav,.sidebar,.auth-card),:root[data-design] dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-contrast:more){
  :root[data-design][data-theme]{--ui-content-border:var(--ui-muted);--ui-glass-border:var(--ui-muted);--ui-input-line:var(--ui-muted);--ui-glass-fill:var(--ui-glass-fallback);--ui-nav-glass:var(--ui-nav-fallback);--ui-glass-blur:0px;--ui-glass-saturation:100%;--ui-backdrop-blur:0px}
  :root[data-design] :is(.topbar,.desktop-toolbar-slot,.mobile-nav,.sidebar,.auth-card),:root[data-design] dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
  :root[data-design] .sidebar .nav-button.active{outline:1px solid var(--ui-nav-highlight);outline-offset:-1px}
}
@media(prefers-reduced-motion:reduce){
  :root{--ui-duration-fast:0ms;--ui-duration-panel:0ms;--ui-duration-press:0ms;--ui-hover-lift:0px}
  :root[data-design] dialog[open]{animation:none}
  :root[data-design] :is(.coin-card,.market-card,.button,.card-action,.toolbar-icon){transform:none;transition:none}
  :root[data-design] #coin-grid .coin-motion{transition:none}
}