/* ══════════════════════════════════════════════════════════════
   GESTO98 · Aero 组件库 / Component library
   见 docs/DESIGN.md §4。只引用 tokens.css 的令牌。
   ══════════════════════════════════════════════════════════════ */

/* ─────────────── 重置 ─────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,ol,ul,li,figure,figcaption,dl,dd{margin:0;padding:0}
ol,ul{list-style-position:inside}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
img{max-width:100%;border:0}
table{border-spacing:0}

html{height:100%;min-height:0}
body{
  /* the host 会在 WebView 顶部保留宿主区域。继承宿主实际高度，避免
     100dvh 再按完整屏幕算一遍，把内容和按钮顶到 App Area 外面。 */
  height:100%;min-height:0;
  font:var(--fs-base)/1.55 var(--font);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  /* OS 本身不滚动，滚动发生在窗口内容区里 */
  overflow:hidden;
  overscroll-behavior:none;
  /* 壁纸：深蓝底 + 左上光源 + 一道斜向光带。纯 CSS，无外部图片、无 filter、无动画。 */
  background-color:var(--desk-deep);
  background-image:
    radial-gradient(120% 90% at 22% 8%, rgba(150,215,255,.42) 0%, rgba(21,104,173,0) 58%),
    linear-gradient(168deg, transparent 38%, rgba(160,225,255,.16) 46%, rgba(160,225,255,.05) 52%, transparent 60%),
    linear-gradient(#0a4a86 0%, #1568ad 42%, #0d4e8c 74%, #06305c 100%);
  background-repeat:no-repeat;
}

[hidden]{display:none !important}

/* Aero 的焦点态：点线框 + 蓝光。不能只靠颜色。 */
:focus-visible{outline:1px dotted var(--text);outline-offset:-4px}

/* ─────────────── 窗口 ─────────────── */
.win{
  position:relative;
  /* flex 列而不是固定行数的 grid：标题栏 / 工具条 / 内容区 / 命令条 / 状态栏
     里任何一层被 hidden 掉都自动塌陷，不用维护 grid-template-rows */
  display:flex;flex-direction:column;
  /* 窗口是 grid item，默认 min-width:auto 会让它撑到最宽子元素的 min-content
     宽度 —— 360px 的安卓机上工具条就能把整个窗口顶出视口。 */
  min-width:0;min-height:0;
  background:var(--surface);
  box-shadow:var(--shadow-win);
  border-radius:var(--radius-win);
  overflow:hidden;
}
.win::after{                       /* 内层白高光描边（参考图特征 #4） */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:20;
  border:1px solid var(--glass-edge-in);border-radius:inherit;
}
@media (prefers-reduced-motion:no-preference){
  .win[data-anim="open"]{animation:winOpen var(--t-base) var(--ease)}
}
@keyframes winOpen{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

.win-title{
  height:var(--titlebar-h);flex:none;
  display:flex;align-items:stretch;gap:var(--s2);
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.4);
  position:relative;z-index:10;
  /* 刘海机型：标题栏顶到屏幕最上沿时给状态栏让位 */
  padding-top:var(--win-title-pad-top,0px);
  box-sizing:content-box;
}
.win-title .tt{
  display:flex;align-items:center;gap:var(--s2);
  padding-left:var(--s3);min-width:0;
  font-size:var(--fs-sm);font-weight:700;color:var(--text-title);
  text-shadow:var(--text-onglass-glow);letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.win-title .tt .ico{flex:none;font-size:13px}
.win.idle .win-title{background:var(--glass-idle)}
.win.idle .win-title .tt{color:var(--text-soft);text-shadow:none}

/* 三枚按钮连成一组，紧贴窗口上沿，关闭键明显更宽（特征 #3） */
.win-btns{display:flex;margin-left:auto;align-self:stretch;flex:none}
.win-btn{
  width:var(--winbtn-w);
  border:1px solid rgba(255,255,255,.5);border-top:none;
  border-radius:0 0 3px 3px;background:var(--grad-ctl);
  display:grid;place-items:center;padding:0;
  font:400 11px/1 var(--font);color:var(--text-title);cursor:pointer;
  transition:background var(--t-fast) var(--ease);
}
.win-btn + .win-btn{border-left:none}
.win-btn:hover{background:var(--grad-ctl-hov)}
.win-btn:active{background:var(--grad-ctl-act)}
.win-btn:focus-visible{outline:1px dotted var(--text-title);outline-offset:-4px}
.win-btn.close{
  width:var(--winbtn-close-w);
  background:var(--grad-close);color:#fff;
  border-color:rgba(255,255,255,.4);border-radius:0 3px 3px 3px;
}
.win-btn.close:hover{background:var(--grad-close-hov)}

.win-toolbar{
  min-height:var(--toolbar-h);flex:none;
  display:flex;align-items:center;gap:var(--s2);
  padding:var(--s1) var(--s3);
  background:var(--chrome);border-bottom:1px solid var(--chrome-edge);
  /* 手机窄屏放不下时横向滚，不换行撑高窗口 */
  min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
}
.win-toolbar::-webkit-scrollbar{display:none}
.win-toolbar > *{flex:none}
.win-toolbar .spacer{flex:1 1 auto;min-width:var(--s2)}

/* 单行 grid：内容区的子面板自动撑满剩余高度。
   用 block 的话子元素高度是 auto，摄像头面板（子元素全是绝对定位）会算成 0，
   梗图面板就溢出到命令条上面去了。 */
.win-body{
  flex:1 1 auto;min-height:0;position:relative;
  display:grid;grid-template-rows:minmax(0,1fr);
  background:var(--surface);
}

.win-status{
  min-height:var(--statusbar-h);flex:none;
  display:flex;align-items:center;gap:var(--s2);
  padding:0 var(--s3);
  background:var(--chrome);border-top:1px solid var(--chrome-edge);
  font-size:var(--fs-xs);color:var(--text-soft);
  white-space:nowrap;overflow:hidden;
}
.win-status b{font-weight:700;color:var(--text)}
.win-status .sep{opacity:.45}
.win-status .spacer{flex:1 1 auto}

/* ─────────────── 命令按钮 ─────────────── */
.btn{
  min-height:var(--ctl-h);padding:0 var(--s4);
  border-radius:var(--radius-ctl);
  font:700 var(--fs-base)/1 var(--font);color:var(--text);
  background:var(--grad-ctl);border:1px solid #8ba9c1;
  box-shadow:var(--shadow-ctl);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;
  transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.btn:hover{background:var(--grad-ctl-hov);border-color:#3c94d2;
  box-shadow:var(--shadow-ctl),inset 0 0 6px var(--focus-glow)}
/* Win7 的按钮按下时不位移，只换渐变 + 内阴影 */
.btn:active{background:var(--grad-ctl-act);border-color:#2a7ab5;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.25)}
.btn:focus-visible{outline:1px dotted var(--text);outline-offset:-4px}
.btn[disabled]{background:#f0f0f0;border-color:#cfcfcf;color:#a0a0a0;
  box-shadow:none;cursor:default}
.btn[aria-pressed="true"]{background:var(--grad-ctl-act);border-color:#2a7ab5;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.22)}
.btn.sm{min-height:calc(var(--ctl-h) - 4px);padding:0 var(--s3);font-size:var(--fs-sm)}
.btn.wide{min-width:78px}
.btn.pending{opacity:.62;cursor:progress}

/* Aero 的默认按钮持续呼吸蓝光 */
.btn.default{border-color:#3c94d2;animation:aeroPulse 2.2s var(--ease) infinite}
@keyframes aeroPulse{
  0%,100%{box-shadow:var(--shadow-ctl),0 0 0 0 rgba(60,148,210,0)}
  50%    {box-shadow:var(--shadow-ctl),0 0 10px 2px var(--focus-glow)}
}

/* 圆形主操作（特征 #7）：球体渐变 + 顶部椭圆高光 + 白色外环 */
.orb-btn{
  width:54px;height:54px;border-radius:50%;flex:none;padding:0;
  background:radial-gradient(circle at 50% 30%,#7fc8f5 0%,#2f8fd8 42%,#0f57a0 78%,#0a3e70 100%);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 -6px 12px rgba(0,0,0,.25);
  position:relative;color:#fff;cursor:pointer;
  display:grid;place-items:center;font-size:20px;
}
.orb-btn::after{
  content:"";position:absolute;left:14%;right:14%;top:8%;height:38%;
  border-radius:50%;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,0));
}
.orb-btn:active{box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 4px 10px rgba(0,0,0,.4)}
.orb-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.orb-btn.sm{width:36px;height:36px;font-size:14px;border-width:1.5px}
.orb-btn[disabled]{filter:grayscale(.7) brightness(.85);cursor:default}

/* ─────────────── 分组框 ─────────────── */
.group{
  border:1px solid var(--chrome-edge);border-radius:var(--radius-panel);
  background:var(--surface);overflow:hidden;
}
.group-head{                       /* 渐变横条 + 粗体深色字（特征 #9） */
  background:var(--grad-header);border-bottom:1px solid var(--chrome-edge);
  padding:var(--s2) var(--s3);
  font-weight:700;font-size:var(--fs-base);color:var(--text-title);
  display:flex;align-items:center;gap:var(--s2);
}
.group-head .spacer{flex:1}
.group-body{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s3)}
.group-body.flush{padding:0}

/* ─────────────── 输入控件 ─────────────── */
input[type=text],input[type=password],input[type=search],select{
  height:var(--ctl-h);padding:0 var(--s2);
  background:#fff;border:1px solid #7a9db8;border-radius:2px;
  box-shadow:var(--shadow-sunk);              /* Win7 输入框是内陷的 */
  font:var(--fs-base)/1 var(--font);color:var(--text);
  min-width:0;
}
input[type=search]{-webkit-appearance:none;appearance:none}
select{padding:0 4px}
input:focus,select:focus{
  border-color:var(--blue-500);outline:none;
  box-shadow:var(--shadow-sunk),0 0 5px var(--focus-glow);
}
input[disabled],select[disabled]{background:#f2f2f2;color:#a0a0a0}

.field{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-base);min-width:0}
.field > span{flex:none;color:var(--text)}
.field.lbl > span{min-width:56px}
.field input[type=text],.field input[type=password],.field input[type=search],.field select{flex:1 1 auto}
.field-note{font-size:var(--fs-xs);color:var(--text-soft)}

.check{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-base);cursor:pointer}
.check input{accent-color:var(--blue-700);width:15px;height:15px;margin:0;flex:none}

/* Win7 trackbar：滑块是 11×21 的立体小方块，不是圆点 */
input[type=range]{
  -webkit-appearance:none;appearance:none;height:22px;width:110px;
  background:transparent;cursor:pointer;flex:none;
}
input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(#c9d6e0,#e8eef4);box-shadow:var(--shadow-sunk);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:11px;height:21px;margin-top:-9px;border-radius:2px;
  background:var(--grad-ctl);border:1px solid #7a9db8;box-shadow:var(--shadow-ctl);
}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#c9d6e0}
input[type=range]::-moz-range-thumb{width:11px;height:21px;border-radius:2px;
  background:#e8f0f7;border:1px solid #7a9db8}

/* ─────────────── 进度条 ─────────────── */
.progress{
  height:18px;border:1px solid #9db4c4;border-radius:3px;
  background:linear-gradient(#e4e4e4,#f4f4f4);box-shadow:var(--shadow-sunk);
  display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:2px;
}
.progress i{border-radius:2px;background:transparent;position:relative;overflow:hidden}
.progress i.done{background:var(--grad-progress);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.progress i.timeout{background:linear-gradient(#f5b5b5,#d84545 41%,#c03030)}
.progress i.cur{background:var(--grad-progress);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.progress i.cur::after{
  content:"";position:absolute;inset:0;will-change:transform;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  animation:barShine 1.1s linear infinite;
}
@keyframes barShine{from{transform:translateX(-110%)}to{transform:translateX(110%)}}

/* ─────────────── 任务栏 ─────────────── */
.taskbar{
  position:relative;z-index:900;
  height:calc(var(--taskbar-h) + var(--safe-b));
  padding:0 calc(var(--s2) + var(--safe-r)) var(--safe-b) calc(var(--s2) + var(--safe-l));
  background:var(--glass-dark);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
  border-top:1px solid rgba(255,255,255,.28);
  box-shadow:0 -1px 0 rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.15);
  display:flex;align-items:center;gap:var(--s1);
}
.start-orb{
  width:34px;height:34px;border-radius:50%;flex:none;border:0;padding:0;cursor:pointer;
  background:radial-gradient(circle at 50% 32%,#b9e8ff 0%,#37a8ea 38%,#0d63a8 72%,#073a68 100%);
  box-shadow:0 0 0 2px rgba(255,255,255,.35),0 0 12px rgba(80,190,255,.6),
             inset 0 -5px 10px rgba(0,0,0,.3);
  display:grid;place-items:center;font-size:15px;color:#fff;
}
.start-orb:focus-visible,.start-orb[aria-expanded="true"]{outline:2px solid #fff;outline-offset:2px}

.task-btns{display:flex;gap:3px;align-items:center;min-width:0;flex:0 1 auto;overflow-x:auto;scrollbar-width:none}
.task-btns::-webkit-scrollbar{display:none}
.task-btn{
  height:28px;padding:0 10px;border-radius:3px;white-space:nowrap;flex:none;
  background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.2);
  color:#e9f4fd;font:600 var(--fs-xs)/1 var(--font);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  text-shadow:0 1px 2px rgba(0,0,0,.6);text-decoration:none;
  transition:background var(--t-fast) var(--ease);
}
.task-btn:hover{background:linear-gradient(rgba(160,215,255,.34),rgba(120,185,240,.16));
  border-color:rgba(190,230,255,.45)}
.task-btn[aria-pressed="true"]{
  background:linear-gradient(rgba(180,225,255,.42),rgba(130,195,245,.2));
  border-color:rgba(200,235,255,.6);
  box-shadow:inset 0 0 8px rgba(120,200,255,.4);
}
.task-btn:focus-visible{outline:1px dotted #fff;outline-offset:1px}

.tray{
  margin-left:auto;display:flex;align-items:center;gap:var(--s2);flex:none;
  padding-left:var(--s2);border-left:1px solid rgba(255,255,255,.18);
  font-size:var(--fs-xs);color:#e6f2fb;text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.tray .live{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.tray .live i{width:8px;height:8px;border-radius:50%;background:#5ed85e;flex:none;
  box-shadow:0 0 6px rgba(94,216,94,.9)}
.tray-btn{
  background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;
  color:inherit;font:600 var(--fs-xs)/1 var(--font);padding:6px 7px;
  text-shadow:inherit;
}
.tray-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
.tray-btn[aria-pressed="true"]{background:rgba(255,190,90,.28);border-color:rgba(255,210,140,.6)}
.tray-btn:focus-visible{outline:1px dotted #fff;outline-offset:1px}
.clock{font-family:var(--font-num);font-variant-numeric:tabular-nums;
  min-width:46px;text-align:right;white-space:nowrap}

/* ─────────────── 开始菜单 ─────────────── */
.start-menu{
  position:absolute;z-index:950;
  left:calc(var(--s2) + var(--safe-l));bottom:calc(var(--taskbar-h) + var(--safe-b) + 4px);
  width:min(272px,calc(100vw - var(--s4)));
  background:var(--surface);border-radius:var(--radius-panel);
  box-shadow:0 0 0 1px var(--glass-edge-out),0 12px 30px rgba(0,0,0,.5);
  overflow:hidden;
}
.start-menu[hidden]{display:none}
.start-menu-head{
  background:linear-gradient(#1a6fb5,#0a3e70);color:#fff;
  padding:var(--s3);font-weight:700;font-size:var(--fs-sm);
  display:flex;align-items:center;gap:var(--s2);
}
.start-menu-head small{display:block;font-weight:400;opacity:.8;font-size:var(--fs-xs)}
.start-menu ul{list-style:none;padding:var(--s1);margin:0}
.start-menu button{
  width:100%;display:flex;align-items:center;gap:var(--s2);
  min-height:36px;padding:0 var(--s2);
  background:none;border:1px solid transparent;border-radius:3px;
  font:var(--fs-base)/1 var(--font);color:var(--text);text-align:left;cursor:pointer;
}
.start-menu button:hover{background:linear-gradient(#e8f4fd,#d3ebfb);border-color:#a9d3f0}
.start-menu button .k{width:20px;text-align:center;flex:none}
.start-menu hr{border:0;border-top:1px solid var(--chrome-edge);margin:var(--s1) 0}

/* ─────────────── 对话框 ─────────────── */
.modal{
  position:fixed;inset:0;z-index:1000;display:none;
  padding:calc(var(--s4) + var(--safe-t)) var(--s4) calc(var(--s4) + var(--safe-b));
  place-items:center;background:rgba(6,32,60,.42);
}
.modal.on{display:grid}
.dialog{
  position:relative;width:min(430px,100%);max-height:100%;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  background:var(--surface);border-radius:var(--radius-win);
  box-shadow:0 0 0 1px var(--glass-edge-out),0 8px 24px rgba(0,0,0,.45);
  overflow:hidden;
}
.dialog::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:20;
  border:1px solid var(--glass-edge-in);border-radius:inherit}
.dialog.wide{width:min(620px,100%)}
@media (prefers-reduced-motion:no-preference){
  .modal.on .dialog{animation:dlgIn 180ms var(--ease)}
}
@keyframes dlgIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.dialog-body{
  padding:var(--s4);display:flex;gap:var(--s3);align-items:flex-start;
  overflow:auto;-webkit-overflow-scrolling:touch;
}
.dialog-body .sysicon{font-size:30px;flex:none;line-height:1}
.dialog-body > div{min-width:0;flex:1}
.dialog-body p{margin:0 0 var(--s2);font-size:var(--fs-base)}
.dialog-body p:last-child{margin-bottom:0}
.dialog-body ol,.dialog-body ul{margin:0 0 var(--s2);padding-left:1.15em;list-style-position:outside}
.dialog-body li{margin-bottom:4px}
.dialog-body .tiny{font-size:var(--fs-xs);color:var(--text-soft)}

.cmdbar{                            /* 底部命令条：灰渐变，按钮右对齐（特征 #12） */
  background:var(--grad-cmdbar);border-top:1px solid #d4d4d4;flex:none;
  padding:var(--s2) var(--s3);display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
}
.cmdbar .spacer{flex:1 1 auto}
.cmdbar .btn{min-width:78px}
.cmdbar .hint{font-size:var(--fs-xs);color:var(--text-soft)}

/* ─────────────── 气泡通知（替代 toast） ─────────────── */
.balloon{
  position:fixed;z-index:1100;
  right:calc(var(--s3) + var(--safe-r));
  bottom:calc(var(--taskbar-h) + var(--safe-b) + 14px);
  width:min(300px,calc(100vw - var(--s5)));
  background:#fff;border:1px solid #7a9db8;border-radius:4px;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  padding:var(--s3) var(--s5) var(--s3) var(--s3);
  opacity:0;transform:translateY(10px);
  /* 通知不该挡住主按钮。手机上气泡刚好压在命令条上，所以整块不吃点击，
     只有右上角那个 ✕ 可点 —— 底下的「开始计时挑战」照样按得到。 */
  pointer-events:none;
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
}
.balloon.on{opacity:1;transform:none}
.balloon::before{                    /* 指向托盘的小尖角 */
  content:"";position:absolute;right:26px;bottom:-9px;
  border:9px solid transparent;border-top-color:#7a9db8;border-bottom:0;
}
.balloon::after{
  content:"";position:absolute;right:27px;bottom:-7px;
  border:8px solid transparent;border-top-color:#fff;border-bottom:0;
}
.balloon .bt{font-weight:700;font-size:var(--fs-sm);color:var(--text-title);margin-bottom:2px}
.balloon p{font-size:var(--fs-sm);margin:0;color:var(--text-soft)}
.balloon .bx{
  position:absolute;top:4px;right:5px;font-size:11px;color:var(--text-soft);cursor:pointer;
  background:none;border:0;padding:6px 8px;line-height:1;
  pointer-events:auto;
}
.balloon .bx:hover{color:var(--danger)}

/* 手机底部是主操作区，气泡抬高到命令条上方，避免把 Back / Start 按钮盖住。 */
@media (max-width:560px){
  .balloon{
    bottom:calc(var(--taskbar-h) + var(--safe-b) + var(--statusbar-h) + var(--ctl-h) + var(--s6));
  }
  .balloon::before,.balloon::after{display:none}
}

/* ─────────────── 滚动条 ─────────────── */
::-webkit-scrollbar{width:17px;height:17px}
::-webkit-scrollbar-track{background:linear-gradient(90deg,#f0f0f0,#fafafa);border-left:1px solid #dcdcdc}
::-webkit-scrollbar-thumb{
  background:var(--grad-ctl);border:1px solid #9db4c4;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
::-webkit-scrollbar-thumb:hover{background:var(--grad-ctl-hov)}
::-webkit-scrollbar-corner{background:#f0f0f0}
/* 触屏上 17px 的滚动条纯属浪费横向空间，交回系统细滚动条 */
@media (hover:none){
  .start-orb{width:44px;height:44px}
  .btn.sm{min-height:var(--ctl-h)}
  .orb-btn.sm{width:44px;height:44px}
  .task-btn{height:44px}
  .tray-btn{min-width:44px;min-height:44px}
  ::-webkit-scrollbar{width:0;height:0}
}

/* ─────────────── Explorer 零件（图库 / 排行榜共用） ─────────────── */
.nav-tree{
  background:linear-gradient(#f2f7fb,#e7eff6);
  border-right:1px solid var(--chrome-edge);
  padding:var(--s3) var(--s2);font-size:var(--fs-sm);
  overflow:auto;min-height:0;
}
.nav-tree .root{font-weight:700;color:var(--text-title);margin-bottom:6px}
.nav-tree button{
  display:flex;width:100%;justify-content:space-between;gap:var(--s2);align-items:center;
  min-height:30px;padding:0 8px 0 20px;border:1px solid transparent;border-radius:3px;
  background:none;color:var(--text);font:var(--fs-sm)/1 var(--font);text-align:left;cursor:pointer;
}
.nav-tree button:hover{background:rgba(120,190,245,.28)}
.nav-tree button.on{background:linear-gradient(#d3ebfb,#b8dcf6);border-color:#8fc4e8;font-weight:700}
.nav-tree em{font-style:normal;color:var(--text-soft);font-family:var(--font-num);font-size:11px}

.icon-grid{
  padding:var(--s3);display:grid;gap:var(--s2);
  grid-template-columns:repeat(auto-fill,minmax(86px,1fr));
  align-content:start;overflow:auto;min-height:0;
}
.file{
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 3px;
  border:1px solid transparent;border-radius:3px;text-align:center;cursor:pointer;
  background:none;font:var(--fs-xs)/1.3 var(--font);color:var(--text);
}
.file:hover{background:rgba(120,190,245,.2);border-color:#a9d3f0}
.file.on{background:linear-gradient(#d3ebfb,#b8dcf6);border-color:#8fc4e8}
.file:focus-visible{outline:1px dotted var(--text);outline-offset:-3px}
.file .thumb{
  width:56px;height:56px;flex:none;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(#fff,#eef2f5);border:1px solid #cdd8e1;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.file .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.file .fn{font-size:10px;line-height:1.3;word-break:break-all}
.file .tag{
  font-size:9px;font-weight:700;padding:0 5px;border-radius:8px;
  background:var(--blue-100);border:1px solid var(--blue-300);color:var(--blue-900);
}
.file .tag.pending{background:#fdf1d6;border-color:#e8c979;color:#7a5a12}
.file.off{opacity:.45}
.file.off .thumb{filter:grayscale(1)}

.tbl-wrap{overflow:auto;min-height:0}
table.detail{border-collapse:collapse;width:100%;font-size:var(--fs-sm);background:var(--surface)}
table.detail thead th{
  position:sticky;top:0;z-index:1;
  background:var(--grad-header);border-bottom:1px solid var(--chrome-edge);
  padding:6px 10px;text-align:left;font-weight:700;color:var(--text-title);white-space:nowrap;
}
table.detail tbody td{padding:7px 10px;border-bottom:1px solid #e8eef4;vertical-align:middle}
table.detail tbody tr:nth-child(even){background:var(--surface-alt)}
table.detail tbody tr.me{background:linear-gradient(#d3ebfb,#b8dcf6)}
table.detail tbody tr.me td{font-weight:700}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.medal{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;
  font-size:10px;font-weight:700;color:#3a2c00}
.medal.g{background:var(--gold)} .medal.s{background:var(--silver)}
.medal.b{background:var(--bronze);color:#fff}

/* ══════════════════════════════════════════════════════════════
   性能降级 —— docs/DESIGN.md §8。违反这一节产品就坏了。
   全项目只有 .win-title 和 .taskbar 允许 backdrop-filter；
   比赛阶段和 perf-lite 下全部关掉，算力让给 30fps 推理。
   ══════════════════════════════════════════════════════════════ */
body[data-stage="race"] .win-title,
body.perf-lite .win-title{
  backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--glass-flat);
}
/* 对话框和次窗口的标题栏永远不用玻璃：一个弹窗就能把 2 层预算撑到 4 层，
   而它们本来就压在不透明面上，玻璃根本看不出来。 */
.dialog .win-title,
.win.overlay .win-title{
  backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--glass-flat);
}
body[data-stage="race"] .taskbar,
body.perf-lite .taskbar{
  backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--glass-dark-flat);
}
body.perf-lite .btn.default{animation:none}
body.perf-lite .progress i.cur::after{animation:none;opacity:.35}
body.perf-lite .win{box-shadow:0 0 0 1px var(--glass-edge-out),0 4px 12px rgba(0,0,0,.4)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .win-title{background:var(--glass-flat)}
  .taskbar{background:var(--glass-dark-flat)}
}

@media (prefers-reduced-motion:reduce){
  .btn.default{animation:none}
  .progress i.cur::after{animation:none;opacity:.35}
  *,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important}
}