/* 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}}