/* SkyBlue Agent 门户 —— 材质系统取自工作台 studio/ui.html（迭代六轮的那套）
   排版尺度取自 studio/landing.html（15px/1.7，落地页密度，不是桌面软件的 13px）

   🔴 材质三件套 = 半透明底 + blur + saturate(180%)
      只 blur 会得到灰塑料，提了饱和背景的颜色才透上来。
   🔴 白必须带蓝调：中性白盖在天空上会把蓝洗干净。
   🔴 容器一律不要阴影 —— 阴影=浮起=卡片=网页语言。阴影只留浮层。
   🔴 描边带蓝调 —— 纯黑透明压在蓝底上会发脏。
   🔴 两套主题都要改。「只改了一个主题」是这套系统里反复犯的错。
*/

:root{
  color-scheme:light;

  --ink:#3b3b3b; --ink2:#616161; --dim:#767676; --faint:#9d9d9d;
  --blue:#005fb8; --blue-d:#005fb8;
  --ok:#1a7f37; --warn:#bf6a02; --bad:#cf222e;

  --ground:transparent;                 /* 底交给 .sky-bg，body 不要盖住它 */

  --mat-chrome:rgba(238,246,255,.70);   /* 顶栏/页脚：最通透 */
  --mat-content:rgba(250,253,255,.80);  /* 内容区：偏实，正文要好读 */
  --mat-panel:rgba(246,251,255,.62);    /* 面板/条目 */
  --mat-solid:#ffffff;                  /* 需要完全不透明的场合 */

  --blur:saturate(180%) blur(30px);
  --blur-sm:saturate(180%) blur(18px);

  --hair:inset 0 1px 0 rgba(255,255,255,.80);
  --line:rgba(12,58,110,.13); --line2:rgba(12,58,110,.08);

  --chip:rgba(0,95,184,.10);
  --fill:rgba(12,58,110,.06);
  --ok-chip:rgba(26,127,55,.12);
  --dim-chip:rgba(12,58,110,.07);

  --pop:0 12px 40px rgba(0,0,0,.16);    /* 只给真正的浮层 */
  --r:10px;                             /* macOS 尺度：面板 10，小圆角不是药丸 */
}

html.dark{
  color-scheme:dark;
  --ink:#cccccc; --ink2:#a9a9a9; --dim:#8b8b8b; --faint:#6e6e6e;
  /* 🔴 深蓝当文字在深底上对比只有 0.18，必须翻成浅蓝 */
  --blue:#0078d4; --blue-d:#4daafc;
  --ok:#4ade80; --warn:#e3b341; --bad:#ff7b72;

  --ground:#16171b;
  --mat-chrome:rgba(30,30,34,.72);
  --mat-content:rgba(32,32,36,.78);
  --mat-panel:rgba(44,44,50,.48);
  --mat-solid:#212226;

  /* 深色的亮边要收敛得多 —— 浅色那档 .80 放深色上像描白线 */
  --hair:inset 0 1px 0 rgba(255,255,255,.10);
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.07);

  --chip:rgba(77,170,252,.16);
  --fill:rgba(255,255,255,.06);
  --ok-chip:rgba(74,222,128,.15);
  --dim-chip:rgba(255,255,255,.08);
  --pop:0 14px 44px rgba(0,0,0,.55);
}

/* ── 背景色雾 ──
   🔴 必须是静止的。一动，上层玻璃采样每帧失效，整页持续重绘。 */
.sky-bg,.night-sky{position:fixed;inset:0;z-index:-2;pointer-events:none;
  transition:opacity .8s ease}
.sky-bg{opacity:1;background:
  radial-gradient(130% 76% at 50% -14%, rgba(10,132,255,.40), transparent 60%),
  radial-gradient(58% 42% at 86% 6%, rgba(120,150,255,.24), transparent 68%),
  radial-gradient(64% 40% at 8% 4%, rgba(0,170,255,.20), transparent 70%),
  linear-gradient(180deg,#d3e6fc 0%,#e4eefb 46%,#eff4fa 100%)}
.night-sky{opacity:0;background:
  radial-gradient(60% 50% at 12% 8%, rgba(10,132,255,.20), transparent 70%),
  radial-gradient(50% 45% at 88% 14%, rgba(175,82,222,.16), transparent 72%),
  radial-gradient(70% 60% at 50% 108%, rgba(48,209,88,.10), transparent 70%),
  #16171b}
html.dark .sky-bg{opacity:0}
html.dark .night-sky{opacity:1}

/* 关掉毛玻璃：低配机保命项。🔴 只去 blur，不去半透明 —— 全变实色会丑得认不出 */
html.noglass *{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}

*{box-sizing:border-box}

body{
  margin:0; min-height:100vh; position:relative;
  color:var(--ink); background:var(--ground);
  -webkit-font-smoothing:antialiased;
  /* 字体栈里不出现任何 web font —— 那是最直接的「网页味」 */
  font:15px/1.7 -apple-system,BlinkMacSystemFont,'SF Pro Display','PingFang SC',
       'Microsoft YaHei','Segoe UI',sans-serif;
}

/* 键盘焦点必须看得见 */
:focus-visible{outline:1px solid var(--blue);outline-offset:2px;border-radius:4px}

.wrap{width:100%;max-width:1000px;margin-inline:auto;padding-inline:22px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:20;background:var(--mat-solid);
  color:var(--blue);padding:9px 15px;border-radius:var(--r)}

/* ── 顶栏：玻璃 ── */
.site-head{
  position:sticky; top:0; z-index:10;
  background:var(--mat-chrome);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line2);
  box-shadow:var(--hair);
}
.head-inner{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding-block:13px;
  padding-top:calc(13px + env(safe-area-inset-top,0px))}
.brand{font-weight:800;letter-spacing:.3px;font-size:16px}
.nav{display:flex;gap:22px;flex-wrap:wrap;font-size:14px}
.nav a{color:var(--ink2);text-decoration:none}
.nav a:hover{color:var(--blue-d)}

/* ── 主体 ── */
main{padding-block:clamp(38px,6vw,64px) clamp(48px,8vw,84px)}
section{margin-block-end:clamp(40px,6vw,66px)}

h1{font-size:clamp(27px,5.2vw,44px);line-height:1.25;font-weight:800;
  letter-spacing:-.5px;margin:0 0 18px}
h2{font-size:19px;font-weight:700;letter-spacing:-.2px;margin:0 0 16px}
h3{font-size:15px;font-weight:700;margin:0 0 5px}

.lede{font-size:16.5px;color:var(--ink2);max-width:32em;margin:0}
.sec-note{color:var(--dim);font-size:13.5px;margin:-8px 0 20px}
.muted{color:var(--dim)}

/* ── 价值主张 ── */
.values{list-style:none;padding:0;margin:0;display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.values h3{color:var(--blue-d)}
.values p{margin:0;color:var(--ink2);font-size:14px}

/* ── 目录：条目是玻璃面板 ── */
.cat{margin-block-end:34px}
.cat>h3{font-size:16px;margin-bottom:4px}
.cat-desc{color:var(--dim);font-size:13.5px;margin:0 0 14px}

.items{display:grid;gap:10px}
.item{
  background:var(--mat-panel);
  -webkit-backdrop-filter:var(--blur-sm); backdrop-filter:var(--blur-sm);
  border:1px solid var(--line2);
  border-radius:var(--r);
  box-shadow:var(--hair);          /* 发丝亮边，不是投影 */
  padding:16px 18px;
}
.item-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px}
.item-name{font-weight:700;font-size:15px}
.item-sum{margin:0 0 6px;font-size:14px}
.item-meta{margin:0;color:var(--dim);font-size:13px}

/* 状态标签：颜色 + 文字双编码 */
.badge{font-size:12px;font-weight:700;line-height:1.7;padding:0 9px;
  border-radius:5px;white-space:nowrap}
.b-download{background:var(--ok-chip);color:var(--ok)}
.b-online{background:var(--chip);color:var(--blue-d)}
.b-soon{background:var(--dim-chip);color:var(--dim)}

.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.tag{font-size:12px;color:var(--dim);background:var(--fill);
  padding:1px 8px;border-radius:5px}

/* ── 路线图 ── */
.stages{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(245px,1fr))}
.stage{
  background:var(--mat-panel);
  -webkit-backdrop-filter:var(--blur-sm); backdrop-filter:var(--blur-sm);
  border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:var(--hair);padding:16px 18px;
}
.stage h3{color:var(--blue-d);font-size:14px}
.stage ul{margin:0;padding-left:17px;color:var(--ink2);font-size:13.5px}
.stage li{margin-bottom:6px}
.stage li:last-child{margin-bottom:0}

/* ── 面板 ── */
.panel{
  background:var(--mat-content);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:var(--hair);padding:20px 22px;
}
.panel p{margin:0 0 8px}
.panel p:last-child{margin-bottom:0}

/* ── 状态/错误 ── */
#status{color:var(--ink2);padding-block:28px;font-size:14px}
#status.error{color:var(--bad)}
#status ul{margin:8px 0 0;padding-left:18px}

/* ── 页脚 ──
   🔴 备案号是法律信息，底要偏实，不能让背景的字透上来影响辨认 */
.site-foot{
  background:var(--mat-content);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-top:1px solid var(--line2);
  box-shadow:var(--hair);
  padding-block:20px calc(20px + env(safe-area-inset-bottom,0px));
}
.foot-inner{display:flex;gap:10px 24px;flex-wrap:wrap;
  justify-content:space-between;font-size:13px;color:var(--dim)}
.foot-inner a{color:var(--dim);text-decoration:none}
.foot-inner a:hover{color:var(--blue-d);text-decoration:underline}

[hidden]{display:none !important}

/* ── 登录页 ── */
.auth-page{min-height:100vh;display:grid;place-items:center;
  padding:calc(24px + env(safe-area-inset-top,0px)) 22px
          calc(24px + env(safe-area-inset-bottom,0px))}
.auth-card{
  width:100%;max-width:380px;
  background:var(--mat-content);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--line2);border-radius:14px;
  box-shadow:var(--hair), var(--pop);      /* 登录卡是浮层，可以有投影 */
  padding:30px 28px;
}
.auth-title{font-size:23px;font-weight:800;letter-spacing:-.3px;margin:0 0 6px}
.auth-sub{color:var(--dim);font-size:13.5px;margin:0 0 22px}
.fld{display:block;margin-bottom:15px}
.fld span{display:block;font-size:13px;color:var(--ink2);margin-bottom:6px}
.fld input{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:var(--mat-ctrl,rgba(252,254,255,.72));
  -webkit-backdrop-filter:var(--blur-sm); backdrop-filter:var(--blur-sm);
  border:1px solid var(--line);border-radius:8px;padding:9px 11px;
}
html.dark .fld input{background:rgba(58,58,64,.55)}
.fld input:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px var(--chip)}
.auth-err{color:var(--bad);font-size:13.5px;margin:0 0 14px}
/* 状态用颜色+文字双编码：成功句首带 ✓，失败由文案本身说清原因，不只靠颜色 */
.auth-ok{color:var(--ok);font-size:13.5px;margin:0 0 14px}
.auth-ok::before{content:"\2713 "}
.auth-note{color:var(--dim);font-size:12.5px;line-height:1.6;margin:2px 0 16px}
.auth-note a{color:var(--blue-d);text-decoration:none}
.fld .hint{float:right;font-style:normal;color:var(--faint);font-size:12px}
.btn{
  width:100%;font:inherit;font-size:15px;font-weight:700;
  color:#fff;background:var(--blue);border:0;border-radius:9px;
  padding:10px 16px;cursor:pointer;
}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.6;cursor:default}
html.dark .btn{color:#0b1520}
.auth-foot{margin:16px 0 0;text-align:center;font-size:13px}
.auth-foot a{color:var(--dim);text-decoration:none}
.auth-foot a:hover{color:var(--blue-d)}
#gate{color:var(--ink2);padding-block:40px;font-size:14px}

/* 行内操作按钮：像链接但是按钮语义（键盘可达） */
.linkbtn{
  font:inherit;font-size:12.5px;font-weight:600;
  color:var(--blue-d);background:var(--chip);
  border:0;border-radius:5px;padding:2px 10px;cursor:pointer;
}
.linkbtn:hover{filter:brightness(1.06)}
.viewbox{
  background:var(--fill);border:1px solid var(--line2);
  border-radius:8px;padding:12px 14px;color:var(--ink2);
}

/* ── 工作流设计助手 ── */
.fld textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);resize:vertical;
  background:var(--mat-ctrl,rgba(252,254,255,.72));
  -webkit-backdrop-filter:var(--blur-sm); backdrop-filter:var(--blur-sm);
  border:1px solid var(--line);border-radius:8px;padding:9px 11px;
}
html.dark .fld textarea{background:rgba(58,58,64,.55)}
.fld textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--chip)}
.rowbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rowbar .btn{width:auto}
ol.steps{margin:8px 0 0;padding-left:20px}
ol.steps>li{margin-bottom:12px}
.st-out{font-size:13.5px;color:var(--ink2);margin-top:2px}
.st-pit{font-size:13.5px;color:var(--warn);margin-top:2px}
ul.riskul{margin:4px 0 0;padding-left:18px;color:var(--ink2);font-size:13.5px}
.b-bad{background:rgba(207,34,46,.12);color:var(--bad)}
html.dark .b-bad{background:rgba(255,123,114,.16)}