/* Shared public/admin design foundation. */
:root{
  --ui-bg:#0b0d10;
  --ui-bg-elev:#101318;
  --ui-surface:rgba(23,27,33,.72);
  --ui-surface-strong:rgba(19,23,29,.90);
  --ui-surface-soft:rgba(255,255,255,.045);
  --ui-text:#f5f7fa;
  --ui-text-2:#a7b0bc;
  --ui-text-3:#7f8996;
  --ui-line:rgba(255,255,255,.10);
  --ui-line-strong:rgba(255,255,255,.16);
  --ui-accent:#9bc4c8;
  --ui-accent-strong:#b7d8da;
  --ui-accent-ink:#102225;
  --ui-shadow:0 24px 70px rgba(0,0,0,.28);
  --ui-shadow-soft:0 12px 36px rgba(0,0,0,.16);
  --ui-radius:22px;
  --ui-ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
html[data-theme="light"]{
  --ui-bg:#f4f7fa;
  --ui-bg-elev:#edf2f6;
  --ui-surface:rgba(255,255,255,.76);
  --ui-surface-strong:rgba(255,255,255,.94);
  --ui-surface-soft:rgba(19,42,58,.035);
  --ui-text:#18202a;
  --ui-text-2:#647080;
  --ui-text-3:#7a8796;
  --ui-line:rgba(18,42,60,.10);
  --ui-line-strong:rgba(18,42,60,.16);
  --ui-accent:#236778;
  --ui-accent-strong:#184e5b;
  --ui-accent-ink:#f6fbfc;
  --ui-shadow:0 24px 70px rgba(45,63,78,.12);
  --ui-shadow-soft:0 12px 34px rgba(45,63,78,.09);
  color-scheme:light;
}

:root{--ui-danger:#ffadb2;--ui-selected:rgba(155,196,200,.12)}
html[data-theme="light"]{--ui-danger:#a22b35;--ui-selected:#e1f2f4}

/* ---- cs: unified custom select + expand/dialog motion (20260908) ---- */
.cs-wrap{position:relative;min-width:0;flex:1 1 auto;width:100%}
.cs-wrap>select{display:none!important}
.cs-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0;min-height:48px;padding:12px 16px;background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-line);border-radius:16px;font-size:14px;font-weight:600;text-align:left;transition:border-color .2s,background .2s}
.cs-toggle:hover{border-color:var(--ui-line-strong)}
.cs-toggle[aria-expanded="true"]{border-color:color-mix(in srgb,var(--ui-accent) 55%,var(--ui-line))}
.cs-toggle>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-caret{flex:0 0 auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);opacity:.65;transition:transform .25s var(--ui-ease),opacity .2s}
.cs-toggle[aria-expanded="true"] .cs-caret{transform:rotate(225deg) translate(-2px,-2px);opacity:1}
.cs-menu{position:absolute;left:0;top:calc(100% + 8px);width:max-content;min-width:100%;max-width:min(340px,calc(100vw - 32px));max-height:min(380px,62vh);overflow:auto;overscroll-behavior:contain;padding:7px;background:var(--ui-surface-strong);color:var(--ui-text);border:1px solid var(--ui-line);border-radius:18px;box-shadow:0 24px 60px rgba(10,20,30,.16);z-index:60;transform-origin:top left;animation:csMenuIn .22s var(--ui-ease)}
.cs-menu.cs-up{top:auto;bottom:calc(100% + 8px);transform-origin:bottom left}
.cs-menu.closing{animation:csMenuOut .18s ease both}
.cs-menu.closing button{animation:none}
.cs-menu[hidden]{display:none!important}
.cs-menu button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:42px;text-align:left;padding:10px 13px;border-radius:12px;background:transparent;color:inherit;font-size:14px;transition:background .15s;animation:csItem .3s var(--ui-ease) both}
.cs-menu button>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-menu button:hover,.cs-menu button:focus-visible{background:var(--ui-surface-soft)}
.cs-menu button[aria-checked="true"]{background:color-mix(in srgb,var(--ui-accent) 18%,transparent);color:var(--ui-accent-strong);font-weight:750}
.cs-menu button[aria-checked="true"]:after{content:'✓';flex:0 0 auto;font-weight:800;color:var(--ui-accent)}
@keyframes csMenuIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes csMenuOut{to{opacity:0;transform:translateY(-4px) scale(.98)}}
@keyframes csItem{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes csFade{from{opacity:0}}
@keyframes csFadeOut{to{opacity:0}}
@keyframes csDlgIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes csDlgOut{to{opacity:0;transform:translateY(10px) scale(.97)}}
dialog[open]{animation:csDlgIn .34s var(--ui-ease)}
dialog[open]::backdrop{animation:csFade .3s ease}
dialog.closing{animation:csDlgOut .2s ease both;pointer-events:none}
dialog.closing::backdrop{animation:csFadeOut .2s ease both}
details[open]>*:not(summary){animation:csItem .4s var(--ui-ease) both}

.cs-menu button:disabled{opacity:.45;cursor:not-allowed}
.cs-menu{background:var(--ui-bg-elev)}
@media(prefers-reduced-motion:reduce){
  :root body,:root body *,:root body *::before,:root body *::after,#app *,#main-nav,#main-nav *{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}