/* ============================================================
   ski-analysis · UI v0.8 — Direction A 定稿设计系统（mockA_final 落地）
   暖纸底 + 陶土强调色 + CAS 蓝；信息分层靠「该看的那一步」渐进呈现。
   v0.8 新增：首页三步向导组件（wsteps/wcard/optgrid/mini）；
   v0.7 的全部组件类名与 DOM 契约保留（上传页/后台/历史/私教按钮）。
   亮暗双主题：prefers-color-scheme 自动 + 手动覆盖（theme.js 三态循环）。
   ============================================================ */

/* ---- tokens: light（默认 · 暖纸底）----
   方向A 定稿色板：纸 #f7f3ee / 卡 #fffdfb / 墨 #26221c / 陶土 #b4551f /
   CAS 蓝 #2a78d6；状态色取已验证序列 good/critical/warn。 */
:root{
  color-scheme: light;
  --bg:#f7f3ee;          /* 页面底（暖纸） */
  --bg-elev:#f1ebe2;     /* 更深一级底（导航条/页面头部带） */
  --panel:#fffdfb;       /* 卡片 */
  --panel2:#f4efe8;      /* 卡内次级面（表头/数字卡/输入底） */
  --panel-hover:#faf6f0; /* 行悬停面 */
  --line:#e7e0d6;        /* 描边 */
  --line-soft:#efe9e1;
  --text:#3a332a;
  --text-strong:#26221c;
  --muted:#6b6257;
  --accent:#b4551f;      /* 陶土强调色（方向A 主色，白底对比 4.9:1） */
  --accent-soft:#f6e6dc; /* 陶土浅底 */
  --accent-dim:rgba(180,85,31,.08);
  --on-accent:#ffffff;

  --ok:#0b6b0b;  --ok-bg:#e7f4e7;  --ok-line:#cbe4cb;
  --warn:#8a6200;--warn-bg:#fdf3da;--warn-line:#f3ddb5;  /* 软提示/警示 */
  --dang:#d03b3b;--dang-bg:#f9e5e5;--dang-line:#f0c4c4;

  /* 主按钮：亮色主题用强调色实底 */
  --btn-bg:var(--accent); --btn-fg:#ffffff;
  --btn-hover:#9c4617;    --btn-active:#873d13;

  --shadow:0 1px 3px rgba(38,34,28,.05);           /* 卡片：极浅描边替代重阴影 */
  --shadow-pop:0 8px 24px -6px rgba(38,34,28,.16); /* 弹层 */
  --ring:0 0 0 3px var(--accent-soft);             /* 统一焦点环 */

  --r-sm:8px; --r-md:12px; --r-lg:16px;  /* v0.8 口径：面板 16 / 中件 12 / 按钮与输入 8 */
  --r-xs:4px;
}

/* ---- tokens: dark（暖黑 · 与报告页 themeInline 同源）----
   暖黑底暖字，陶土提亮保对比；语义色同报告页口径。 */
@media (prefers-color-scheme: dark){
  html:not([data-theme]){
    color-scheme: dark;
    --bg:#171410;      --bg-elev:#12100c;  --panel:#1f1b15;   --panel2:#282318;
    --panel-hover:#2c261d;
    --line:#372f24;    --line-soft:#2c251c;
    --text:#e9e2d6;    --text-strong:#f7f3ee;
    --muted:#c4b8a5;
    --accent:#d97a48;  --accent-soft:#3c2617;
    --accent-dim:rgba(217,122,72,.14);
    --on-accent:#20140a;

    --ok:#6cc36c;  --ok-bg:#122a12;  --ok-line:#1f4a32;
    --warn:#e5b04c;--warn-bg:#2c2410;--warn-line:#54400f;
    --dang:#e57070;--dang-bg:#2d1416;--dang-line:#57212a;

    /* 主按钮：暗色主题用高对比浅底（主按钮反相，避免低对比彩底大色块） */
    --btn-bg:#e9e2d6; --btn-fg:#20140a;
    --btn-hover:#f7f3ee; --btn-active:#d6cfc2;

    --shadow:0 1px 2px rgba(0,0,0,.4);
    --shadow-pop:0 8px 24px -6px rgba(0,0,0,.55);
  }
}
html[data-theme="dark"]{
  color-scheme: dark;
  --bg:#171410;      --bg-elev:#12100c;  --panel:#1f1b15;   --panel2:#282318;
  --panel-hover:#2c261d;
  --line:#372f24;    --line-soft:#2c251c;
  --text:#e9e2d6;    --text-strong:#f7f3ee;
  --muted:#c4b8a5;
  --accent:#d97a48;  --accent-soft:#3c2617;
  --accent-dim:rgba(217,122,72,.14);
  --on-accent:#20140a;

  --ok:#6cc36c;  --ok-bg:#122a12;  --ok-line:#1f4a32;
  --warn:#e5b04c;--warn-bg:#2c2410;--warn-line:#54400f;
  --dang:#e57070;--dang-bg:#2d1416;--dang-line:#57212a;

  --btn-bg:#e9e2d6; --btn-fg:#20140a;
  --btn-hover:#f7f3ee; --btn-active:#d6cfc2;

  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-pop:0 8px 24px -6px rgba(0,0,0,.55);
}
html[data-theme="light"]{ color-scheme: light; }

/* ---- base ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:15px/1.65 -apple-system,"SF Pro Text","Segoe UI",system-ui,
        "PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  transition:background-color .18s ease,color .18s ease;
  -webkit-font-smoothing:antialiased;
}
h1{font-size:23px;font-weight:700;letter-spacing:-.015em;margin:.2em 0 .3em;color:var(--text-strong);text-wrap:balance}
h1,h2,h3{line-height:1.4}
a{color:var(--accent);text-decoration:none;transition:opacity .15s}
a:hover{opacity:.8;text-decoration:underline;text-underline-offset:3px}
b,strong{color:var(--text-strong);font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent-soft)}
table{border-collapse:collapse}
/* 滚动条降噪（WebKit；Firefox 走 scrollbar-* 亦降噪） */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted);border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---- 顶部导航 ---- */
.tbn{
  flex:none;width:34px;height:34px;padding:0;display:inline-flex;align-items:center;
  justify-content:center;border-radius:var(--r-sm);background:transparent;
  border:1px solid var(--line);color:var(--muted);font-size:15px;cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s;
}
.tbn:hover{background:var(--panel2);color:var(--text)}
.top{
  display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:24px;
}
.wrap-auth .top{padding-bottom:0;border-bottom:0;margin-bottom:0}
.top .spacer{flex:1}
.nav{font-size:13px;line-height:2}
.top h1,.top .h1{margin:0;font-size:18px}
.who{
  display:inline-flex;align-items:center;gap:6px;margin-right:2px;
  color:var(--accent);font-weight:600;font-size:13px;
  background:var(--accent-soft);border:1px solid var(--accent-dim);
  border-radius:999px;padding:3px 11px;
}
.who::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---- 布局 ---- */
.wrap{max-width:720px;margin:0 auto;padding:20px 16px 72px}
.wrap-wide{max-width:1080px}
.sub{color:var(--muted);font-size:13px}

/* ---- 卡片 ---- */
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 22px;margin:18px 0;box-shadow:var(--shadow);
}
.panel.tight{padding:16px 18px}
@media (min-width:900px){.wrap-wide .panel{padding:24px 26px}}
.panel h2{font-size:15px;font-weight:600;margin:0 0 10px;color:var(--text-strong)}
.panel ul{margin:0;padding-left:22px;font-size:14px}
.panel ul li{margin:7px 0}

/* ---- 表单（悬停描边 + 统一焦点环） ---- */
label{display:block;margin:12px 0 6px;font-size:13px;font-weight:500;color:var(--text-strong)}
input,select,textarea{
  width:100%;padding:9px 12px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--panel2);color:var(--text);font-size:14px;font-family:inherit;
  transition:border-color .15s,background-color .15s,box-shadow .15s;
}
input:hover,select:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
::placeholder{color:var(--muted);opacity:.75}

/* ---- 按钮（v0.8：主按钮胶囊陶土底，与方向A .btn.pri 同源） ---- */
button{
  padding:10px 18px;border:0;border-radius:999px;background:var(--btn-bg);
  color:var(--btn-fg);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;
  transition:background-color .15s,transform .1s,box-shadow .15s,opacity .15s,color .15s;
}
button:hover{background:var(--btn-hover)}
button:active{background:var(--btn-active);transform:translateY(1px)}
button:focus-visible{box-shadow:var(--ring)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
button.ghost{
  background:transparent;border:1px solid var(--line);color:var(--muted);font-weight:500;
}
button.ghost:hover{background:var(--panel-hover);color:var(--text);border-color:var(--muted)}
button.ghost:active{background:var(--panel2)}
button.sm{padding:6px 12px;font-size:13px}
/* a 版按钮（向导内 .btn 同源，index 向导按钮也可直接用 <button> 基类） */
.btn{padding:11px 26px;font-size:14.5px}
.btn.pri{background:var(--accent);color:var(--on-accent);font-weight:600}
.btn.pri:hover{background:var(--btn-hover)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted);font-weight:500}
.btn.ghost:hover{background:var(--panel-hover);color:var(--text);border-color:var(--muted)}

/* ---- 徽标 / 状态点 ---- */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-xs);
  font-size:12px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none}
.badge.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.badge.ok::before{background:var(--ok)}
.badge.down{color:var(--dang);border-color:var(--dang-line);background:var(--dang-bg)}
.badge.down::before{background:var(--dang)}
/* 健康检查进行中（未落 ok/down 前）呼吸点 */
#health:not(.ok):not(.down)::before{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.tag{
  display:inline-block;padding:2px 9px;border-radius:var(--r-xs);font-size:12px;
  border:1px solid var(--line);background:var(--panel2);color:var(--muted);white-space:nowrap
}
.tag.adm{color:var(--accent);border-color:var(--accent-soft);background:var(--accent-soft)}
.tag.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.tag.off{color:var(--dang);border-color:var(--dang-line);background:var(--dang-bg)}

/* ---- 提示 / 错误 ---- */
.err{color:var(--dang);font-size:13px;margin-top:10px;white-space:pre-wrap;min-height:0}
.softn{
  display:none;margin-top:12px;padding:10px 14px;border-radius:var(--r-md);font-size:13px;
  color:var(--warn);border:1px solid var(--warn-line);background:var(--warn-bg);white-space:pre-wrap
}

/* ---- 进度条 ---- */
.bar{height:8px;background:var(--panel2);border-radius:999px;overflow:hidden;margin:12px 0 8px;border:1px solid var(--line-soft)}
.bar i{
  display:block;height:100%;width:100%;border-radius:999px;
  transform:scaleX(0);transform-origin:0 50%;       /* transform 进度（≤200ms，只动 transform） */
  background:linear-gradient(90deg,var(--accent),var(--accent) 70%,#d07948);
  transition:transform .2s ease;
}
.stage{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- 上传拖拽区（方向A：陶土虚线 + 浅底，选中转实线好状态） ---- */
.drop{
  border:1.5px dashed var(--accent);border-radius:var(--r-md);padding:32px 16px;text-align:center;
  cursor:pointer;background:var(--accent-soft);transition:border-color .15s,background-color .15s;
}
.drop:hover{border-color:var(--btn-hover)}
.drop.on{border-color:var(--btn-hover);background:var(--accent-dim);box-shadow:inset 0 0 0 1px var(--accent)}
.drop.done{border-style:solid;background:var(--ok-bg);border-color:var(--ok)}
.drop .big{font-size:15.5px;font-weight:600;color:var(--text-strong)}
.drop .hint{color:var(--muted);font-size:12.5px;margin-top:6px}
.fname{margin-top:10px;font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}
#file{display:none}

/* ---- 勾选行 ---- */
.chk{display:flex;align-items:flex-start;gap:10px;margin-top:16px;font-size:13.5px}
.chk input{width:17px;height:17px;margin-top:2px;accent-color:var(--accent);flex:none}

/* ---- 保密说明卡 ---- */
.priv{
  background:var(--panel);border:1px solid var(--ok-line);border-radius:var(--r-lg);
  padding:18px 22px;margin:18px 0;box-shadow:var(--shadow);
}
.priv h2{font-size:14px;color:var(--ok);margin:0 0 8px;display:flex;align-items:center;gap:6px}
.priv ul{margin:0;padding-left:20px;font-size:13px;color:var(--text)}
.priv li{margin:4px 0}

/* ---- 要点/步骤卡 ---- */
.steps{font-size:12.5px;color:var(--muted);line-height:1.9;padding:16px 20px}
.steps b{color:var(--text)}

/* ---- 后台表格（表头通栏浅底 + 行悬停面板色） ---- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.grid,section table,.panel table{width:100%;font-size:13px}
table th,table td{
  padding:8px 10px;border-bottom:1px solid var(--line-soft);text-align:left;
  vertical-align:top;white-space:nowrap;font-variant-numeric:tabular-nums;
}
table th{color:var(--muted);font-weight:500;font-size:12px;letter-spacing:.02em}
table tbody tr{transition:background-color .1s}
table tbody tr:hover{background:var(--panel-hover)}
table tbody tr:last-child td{border-bottom:0}

/* ---- 空态 ---- */
.empty{color:var(--muted);text-align:center;padding:18px 0;font-size:13px}

/* ---- 我的分析历史（v0.5） ---- */
.hrow{
  display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;
  padding:10px 2px;border-bottom:1px solid var(--line-soft);font-size:13.5px;
}
.hrow:last-child{border-bottom:0}
.hrow .when{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hrow .vname{color:var(--text-strong);font-weight:500;overflow-wrap:anywhere}
.hrow .act{margin-left:auto}
.hrow .act a{white-space:nowrap}
.hreason{color:var(--muted);font-size:12.5px;text-align:right;max-width:340px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (max-width:600px){
  .hreason{max-width:100%}
  .hrow .act{margin-left:0}
}

/* ---- 页面特例 ---- */
.wrap-auth{max-width:436px;min-height:calc(100vh - 128px);display:flex;flex-direction:column;justify-content:center;padding-top:0}
.top.plain{border-bottom:0;padding-bottom:0;margin-bottom:0}
.top .sub{width:100%}
.who{margin-right:0}
@media (max-width:600px){.wrap-auth{padding-top:6vh}}
.k{display:inline-block;padding:1px 8px;border:1px solid var(--line);border-radius:999px;
   font-size:12px;margin:2px 0;background:var(--panel2);color:var(--text);white-space:nowrap}

/* ============================================================
   v0.8 首页三步向导（方向A 定稿：选视频 → 拍摄与隐私 → 开始分析）
   完成上一步才展开下一步；未选文件时「下一步」禁用。
   注意 .steps 类沿用旧口径（步骤说明卡），向导胶囊行用 .wsteps。
   ============================================================ */
.hero{padding:18px 0 6px}
.hero h1{font-size:26px}
.hero .lead{color:var(--muted);margin-top:6px;max-width:640px}
.stds{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.stds span{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 14px;
  font-size:13px;background:var(--panel);border:1px solid var(--line);color:var(--muted);
}
.stds b{color:var(--accent)}
.stds .pre{font-style:normal;color:var(--muted);white-space:nowrap}

.wsteps{display:flex;gap:8px;margin:20px 0 14px}
.wsteps .s{
  flex:1;border-radius:999px;padding:7px 12px;text-align:center;background:var(--panel2);
  color:var(--muted);font-size:13px;transition:background-color .2s,color .2s;
}
.wsteps .s.cur{background:var(--accent);color:var(--on-accent);font-weight:600}
.wsteps .s.done{background:var(--accent-soft);color:var(--accent)}

.wcard{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;margin:14px 0 0;box-shadow:var(--shadow);scroll-margin-top:16px;
}
.wcard.await{display:none}
.wcard h2{font-size:18px;margin:0 0 4px;color:var(--text-strong)}
.wcard .sub{margin-bottom:14px}
.optgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.opt{
  border:1px solid var(--line);border-radius:var(--r-md);padding:13px 14px;cursor:pointer;
  background:var(--panel);transition:border-color .15s,background-color .15s;
}
.opt:hover{border-color:var(--muted)}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt .t{font-weight:600;color:var(--text-strong);font-size:14px}
.opt .d{font-size:12.5px;color:var(--muted);margin-top:2px}
.why{margin-top:14px;font-size:13px}
.why details{
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
}
.why summary{cursor:pointer;color:var(--accent);font-weight:500}
.why details p{margin:6px 0 2px}
.wq{font-size:13.5px;margin:14px 0 6px;color:var(--text-strong);font-weight:500}
.btnrow{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:12px;flex-wrap:wrap}
.hint{color:var(--muted);font-size:12.5px}

.homefoot{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.mini{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;
}
.mini h3{font-size:13.5px;color:var(--muted);margin:0 0 6px;font-weight:600}
.mini p{font-size:13px;color:var(--muted);margin:0}
.footnote{color:var(--muted);font-size:12px;margin:22px 0 0}
@media (max-width:820px){
  .homefoot{grid-template-columns:1fr}
  .optgrid{grid-template-columns:1fr}
  .hero h1{font-size:23px}
  .stds{flex-direction:column;align-items:flex-start}
  .wcard{padding:18px 16px}
}

/* ---- v0.7 私教（解读信/对话面板报告页组件同源样式：报告为单文件内联，
       此处保留同名 token 口径，主站页复用一致观感） ---- */
.coachbtn{
  display:inline-flex;align-items:baseline;gap:10px;background:var(--panel);color:var(--accent);
  border:1px solid var(--accent);border-radius:var(--r-md);padding:12px 20px;font-size:14.5px;
  font-weight:600;cursor:pointer;font-family:inherit;box-shadow:var(--shadow);
  transition:background-color .15s,transform .1s;
}
.coachbtn:hover{background:var(--accent-soft)}
.coachbtn .cbtn-sub{font-size:12px;font-weight:400;color:var(--muted)}

/* ---- 移动端 ---- */
@media (max-width:600px){
  .wrap{padding:16px 14px 60px}
  h1{font-size:20px}
  .panel{padding:16px;margin:14px 0}
  .drop{padding:26px 14px}
  button{width:auto}
  .nav{line-height:2}
  .top{gap:6px 10px;padding-bottom:10px;margin-bottom:18px}
  .tbn{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media print{
  .tbn,.coachbtn{display:none}
}