/* ============================================================================
   工作站外壳与通用组件
   ----------------------------------------------------------------------------
   模仿自 www.fangzk.com「家庭工作台」的 assets/css/app.css：
     · 外壳 = 左侧栏（.ws-side） + 右侧主区（.ws-main = 顶栏 .ws-top + 内容 .ws-view）
     · 组件 = 卡片 / 按钮 / 表格 / 弹窗 / Toast / 指标卡 / 空状态 / 表单
   ★ 这个文件里**没有任何硬编码颜色**，一律走 tokens.css 的变量。
   ============================================================================ */

/* ---------------------------------------------------------------- 基础 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--tx);font-family:var(--font);
  font-size:var(--fs-md);line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

/* ---------------------------------------------------------------------------
   技术感底纹：两层「光斑」+ 一层细网格
   —— 都用 fixed + pointer-events:none 的伪元素，不参与布局、不挡点击。
   ★ 网格用 repeating-linear-gradient 画（比贴图省事，也没有资源请求），
     透明度压得很低（--grid），只在深底上若隐若现，不会干扰读数据。
   --------------------------------------------------------------------------- */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 12% -8%, var(--aura-1), transparent 60%),
    radial-gradient(760px 460px at 88% 4%, var(--aura-2), transparent 62%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:38px 38px;
  /* 往下淡出：顶部清晰、底部化开，避免整屏都是格子显得脏 */
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 72%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 72%);
}
/* 外壳必须压在这两层之上 */
.ws{position:relative;z-index:1}

h1,h2,h3,h4,p{margin:0}
a{color:var(--ac-ink);text-decoration:none}
button{font-family:inherit}
input,select,textarea{font-family:inherit;font-size:var(--fs-md)}
::selection{background:var(--ac-soft)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hint{font-size:var(--fs-sm);color:var(--tx-3)}
.nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 滚动条 */
.ws-side__scroll::-webkit-scrollbar,.ws-view::-webkit-scrollbar,
.dlg__body::-webkit-scrollbar{width:9px;height:9px}
.ws-side__scroll::-webkit-scrollbar-thumb,.ws-view::-webkit-scrollbar-thumb,
.dlg__body::-webkit-scrollbar-thumb{background:var(--ac-line);border-radius:9px;
  border:2px solid transparent;background-clip:content-box}
.ws-side__scroll::-webkit-scrollbar-thumb:hover,.ws-view::-webkit-scrollbar-thumb:hover,
.dlg__body::-webkit-scrollbar-thumb:hover{background:var(--ac)}
.ws-side__scroll::-webkit-scrollbar-track,.ws-view::-webkit-scrollbar-track{background:transparent}

/* ---------------------------------------------------------------- 外壳 */
.ws{display:flex;height:100%;overflow:hidden}

/* ---- 侧栏 ---- */
.ws-side{
  width:var(--side-w);flex:none;background:var(--bg-2);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  transition:width var(--t-mid) var(--ease);
  /* 极淡的主色晕染：让侧栏和内容区之间有层次，而不是一块死板的灰 */
  background-image:linear-gradient(180deg, var(--ac-soft), transparent 30%);
}
.ws.mini .ws-side{width:var(--side-w-mini)}
.ws-side__brand{
  height:var(--top-h);flex:none;display:flex;align-items:center;gap:9px;
  padding:0 13px;border-bottom:1px solid var(--line);overflow:hidden;
}
.ws-side__logo{
  width:26px;height:26px;flex:none;border-radius:var(--r-sm);
  background:var(--ac-grad);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;letter-spacing:-.5px;
  box-shadow:var(--glow-sm);
}
.ws-side__name{font-weight:700;font-size:var(--fs-lg);letter-spacing:-.3px;white-space:nowrap}
.ws.mini .ws-side__name{display:none}

.ws-side__scroll{flex:1;overflow-y:auto;padding:10px 9px 16px}
.ws-grp{
  font-size:10.5px;font-weight:700;color:var(--tx-3);letter-spacing:.7px;
  padding:14px 9px 6px;text-transform:uppercase;
}
.ws.mini .ws-grp{opacity:0;height:10px;padding:0;overflow:hidden}
.ws-nav{
  display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r-sm);
  cursor:pointer;color:var(--tx-2);font-size:var(--fs-md);border:1px solid transparent;
  background:none;width:100%;text-align:left;transition:background var(--t-fast) var(--ease);
}
.ws-nav:hover{background:var(--panel-2);color:var(--tx)}
.ws-nav.on{
  background:var(--ac-soft);color:var(--ac-ink);font-weight:600;
  border-color:var(--ac-line);box-shadow:var(--glow-sm);
  position:relative;
}
/* 左侧亮条：仪表盘那种「当前在哪一项」的指示 */
.ws-nav.on::before{
  content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%);
  width:2px;height:18px;border-radius:2px;background:var(--ac);
  box-shadow:0 0 8px var(--ac);
}
.ws-nav__ic{width:17px;flex:none;text-align:center;font-size:14px;opacity:.9;
  display:flex;align-items:center;justify-content:center;color:inherit}
.ws-nav__ic svg{width:17px;height:17px;display:block;flex:none}
.ws-nav__tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-nav__bdg{
  font-size:10px;font-weight:700;color:var(--tx-3);background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--r-full);padding:1px 7px;
}
.ws-nav.on .ws-nav__bdg{color:var(--ac-ink);background:var(--panel);border-color:var(--ac-line)}
.ws.mini .ws-nav{justify-content:center;padding:9px 0}
.ws.mini .ws-nav__tx,.ws.mini .ws-nav__bdg{display:none}

.ws-side__foot{flex:none;padding:9px;border-top:1px solid var(--line)}
.ws-fold{
  display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;
  border:0;background:none;color:var(--tx-2);cursor:pointer;border-radius:var(--r-sm);
  font-size:var(--fs-sm);
}
.ws-fold:hover{background:var(--panel-2);color:var(--tx)}
.ws.mini .ws-fold{justify-content:center;padding:9px 0}
.ws.mini .ws-fold span{display:none}
.ws-fold svg{transition:transform var(--t-mid) var(--ease)}
.ws.mini .ws-fold svg{transform:rotate(180deg)}

/* ---- 主区 ---- */
.ws-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.ws-top{
  height:var(--top-h);flex:none;display:flex;align-items:center;gap:10px;
  padding:0 18px;border-bottom:1px solid var(--line);
  /* 半透明 + 模糊：内容和底纹从下面透上来，比纯色顶栏有层次
     ★ 先写纯色再写 color-mix：老浏览器不认 color-mix 时会忽略那一行、
       退回纯色面板，**不会**变成透明顶栏（否则文字会和内容糊在一起）。 */
  background:var(--panel);
  background:color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
}
.ws-crumb{font-size:var(--fs-md);color:var(--tx-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ws-crumb b{color:var(--tx);font-weight:600}
.ws-top__sp{flex:1}
.ws-view{flex:1;overflow-y:auto;overflow-x:hidden}
.ws-view__in{
  max-width:var(--content-max);margin:0 auto;padding:var(--sp-6) var(--sp-5) var(--sp-10);
}

/* ---- 顶栏小控件 ---- */
.ws-iconbtn{
  width:32px;height:32px;flex:none;border-radius:var(--r-sm);border:1px solid transparent;
  background:none;color:var(--tx-2);cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:15px;
}
.ws-iconbtn:hover{background:var(--ac-soft);color:var(--ac-ink)}
.ws-iconbtn.on{background:var(--ac-soft);color:var(--ac-ink)}

/* ---- 顶栏的备份状态药丸（原站首页横幅的等价物）---- */
.ws-pill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-full);
  border:1px solid var(--line);background:var(--panel);cursor:pointer;
  font-size:var(--fs-sm);color:var(--tx-2);white-space:nowrap;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.ws-pill:hover{border-color:var(--ac-line);background:var(--panel-2)}
.ws-pill[hidden]{display:none!important}
.ws-pill[data-busy]{opacity:.5;pointer-events:none}
.ws-pill__dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--tx-3)}
.ws-pill[data-level="ok"] .ws-pill__dot{background:var(--ok)}
.ws-pill[data-level="ok"] .ws-pill__tx{color:var(--ok-2)}
.ws-pill[data-level="warn"]{border-color:transparent;background:var(--warn-soft)}
.ws-pill[data-level="warn"] .ws-pill__dot{background:var(--warn)}
.ws-pill[data-level="warn"] .ws-pill__tx{color:var(--warn);font-weight:650}
.ws-pill[data-level="unknown"] .ws-pill__dot{background:var(--tx-3)}
@media (max-width:680px){ .ws-pill__tx{display:none} .ws-pill{padding:4px 7px} }
.ws-me{
  display:flex;align-items:center;gap:8px;padding:4px 9px 4px 5px;border-radius:var(--r-full);
  border:1px solid var(--line);background:var(--panel);cursor:pointer;color:var(--tx);
  font-size:var(--fs-sm);max-width:230px;
}
.ws-me:hover{border-color:var(--ac-line)}
.ws-me__av{
  width:24px;height:24px;flex:none;border-radius:50%;background:var(--ac-soft);
  color:var(--ac-ink);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:11px;
}
.ws-me__tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-me__caret{color:var(--tx-3);font-size:10px;flex:none}
.ws-menu{
  position:fixed;top:calc(var(--top-h) - 6px);right:14px;z-index:60;min-width:210px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3);padding:5px;display:none;
}
.ws-menu.open{display:block}
.ws-menu__t{font-size:10.5px;font-weight:700;color:var(--tx-3);padding:8px 10px 5px;
  letter-spacing:.6px}
.ws-mi{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;
  background:none;color:var(--tx-2);cursor:pointer;border-radius:var(--r-sm);
  font-size:var(--fs-md);text-align:left;
}
.ws-mi:hover{background:var(--panel-2);color:var(--tx)}
.ws-mi--bad:hover{background:var(--bad-soft);color:var(--bad)}

/* ---------------------------------------------------------------- 页头 */
.pg-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:var(--sp-5);flex-wrap:wrap}
.pg-head h1{font-size:var(--fs-3xl);font-weight:700;letter-spacing:-.6px;line-height:1.2}
.pg-head p{color:var(--tx-2);font-size:var(--fs-md);margin-top:3px}
.pg-head__r{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pg-sub{font-size:var(--fs-xl);font-weight:650;letter-spacing:-.2px;
  margin:var(--sp-6) 0 var(--sp-3)}

/* ---------------------------------------------------------------- 卡片 */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);overflow:hidden;
}
.card--pad{padding:var(--sp-4)}
.card__hd{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line)}
.card__hd h3{font-size:var(--fs-lg);font-weight:650;letter-spacing:-.2px}
.card__hd .hint{margin-left:auto}
.card--pad > .card__hd{padding:0 0 var(--sp-3);margin-bottom:var(--sp-3)}
.card__bd{padding:var(--sp-4)}
.card__bd--flush{padding:0}
.card__hover{transition:box-shadow var(--t-fast) var(--ease),
  transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.card__hover:hover{box-shadow:var(--sh-2);transform:translateY(-1px);border-color:var(--ac-line)}
.card__hover:hover::after{opacity:1}
/* 卡片顶边一条渐变亮线：很轻，但一眼就有「屏」的感觉 */
.card{position:relative}
.card__hover::after{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--ac-grad);opacity:0;transition:opacity var(--t-mid) var(--ease);
  pointer-events:none;
}

/* ---------------------------------------------------------------- 栅格 */
.grid{display:grid;gap:var(--sp-3)}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--auto{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* ---------------------------------------------------------------- 指标卡 */
.metric{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--sp-4);box-shadow:var(--sh-1);
}
.metric .v{
  font-family:var(--mono);font-size:var(--fs-3xl);font-weight:700;
  letter-spacing:-1px;line-height:1.1;color:var(--ac-ink);
  text-shadow:0 0 18px var(--ac-soft);
}
.metric .v small{font-size:var(--fs-md);font-weight:600;color:var(--tx-3);margin-left:3px}
.metric .k{font-size:var(--fs-sm);color:var(--tx-3);margin-top:3px}
.metric.is-ok .v{color:var(--ok)}
.metric.is-warn .v{color:var(--warn)}
.metric.is-bad .v{color:var(--bad)}

/* ---------------------------------------------------------------- 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 13px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:var(--panel);color:var(--tx);cursor:pointer;font-size:var(--fs-md);
  font-weight:550;white-space:nowrap;transition:background var(--t-fast) var(--ease),
  border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.btn:hover{background:var(--panel-2)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn--pri{
  background:var(--ac-grad);border-color:transparent;color:#fff;
  box-shadow:var(--glow-sm);font-weight:600;
}
.btn--pri:hover{filter:brightness(1.12);box-shadow:var(--glow)}
.btn--pri:active{filter:brightness(.95)}
/* 深色下渐变按钮的底可以再亮一点，字才压得住 */
html[data-theme="dark"] .btn--pri{color:#031018}
.btn--danger{border-color:var(--bad);color:var(--bad);background:var(--panel)}
.btn--danger:hover{background:var(--bad-soft)}
.btn--ok{border-color:var(--ok);color:var(--ok);background:var(--panel)}
.btn--ok:hover{background:var(--ok-soft)}
.btn--ghost{border-color:transparent;background:none;color:var(--tx-2)}
.btn--ghost:hover{background:var(--panel-2);color:var(--tx)}
.btn--sm{padding:4px 9px;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.btn--blk{width:100%}

/* ---------------------------------------------------------------- 列表行 */
.rows{display:flex;flex-direction:column}
.lrow{
  display:flex;align-items:center;gap:var(--sp-3);padding:11px var(--sp-4);
  border-bottom:1px solid var(--line);
}
.lrow:last-child{border-bottom:0}
.lrow:hover{background:var(--panel-2)}
.lrow.is-on{background:var(--ac-soft)}
.lrow__ic{flex:0 0 28px;display:flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--tx-2)}
.lrow__b{flex:1;min-width:0;cursor:pointer}
.lrow__t{font-size:var(--fs-md);color:var(--tx);font-weight:550;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.lrow__d{font-size:var(--fs-sm);color:var(--tx-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.lrow__m{font-size:var(--fs-sm);color:var(--tx-3);flex:none;text-align:right}
.lrow__a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:none}

/* ---------------------------------------------------------------- 表格 */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.tbl th{
  text-align:left;font-size:var(--fs-xs);font-weight:700;color:var(--tx-3);
  letter-spacing:.5px;text-transform:uppercase;padding:10px var(--sp-4);
  border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap;
}
.tbl td{padding:11px var(--sp-4);border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--panel-2)}
.tbl__wrap{overflow-x:auto}

/* ---------------------------------------------------------------- 标签 */
.tag{
  display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:650;
  padding:2px 8px;border-radius:var(--r-full);border:1px solid var(--line);
  background:var(--panel-2);color:var(--tx-2);white-space:nowrap;
}
.tag--ok{background:var(--ok-soft);color:var(--ok-2);border-color:var(--ok-line)}
.tag--warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.tag--bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.tag--ac{background:var(--ac-soft);color:var(--ac-ink);border-color:var(--ac-line)}
.tag--info{background:var(--info-soft);color:var(--info);border-color:transparent}

/* ---------------------------------------------------------------- 表单 */
.field{margin-bottom:var(--sp-4)}
.label{display:block;font-size:var(--fs-sm);font-weight:650;color:var(--tx-2);
  margin-bottom:5px}
.input,.select,.textarea{
  width:100%;padding:8px 11px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--bg-2);color:var(--tx);outline:none;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--ac);background:var(--panel);
  box-shadow:0 0 0 3px var(--ac-soft), 0 0 18px var(--ac-soft);
}
.textarea{min-height:120px;resize:vertical;font-family:var(--mono);font-size:var(--fs-sm);
  line-height:1.6}
.select{cursor:pointer}
.input-row{display:flex;gap:8px;align-items:center}
.input-row .input{flex:1}

/* ---------------------------------------------------------------- 空/载入 */
.empty{padding:var(--sp-10) var(--sp-4);text-align:center;color:var(--tx-3)}
.empty__ic{font-size:30px;margin-bottom:6px;line-height:1}
.empty__t{font-size:var(--fs-lg);color:var(--tx-2);font-weight:600;margin-bottom:3px}
.loading{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:var(--sp-10) var(--sp-4);color:var(--tx-3);font-size:var(--fs-md)}
.spin{
  width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--ac);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.note{padding:10px 13px;border-radius:var(--r-sm);font-size:var(--fs-md);
  border:1px solid var(--line);background:var(--panel-2);color:var(--tx-2)}
.note--bad{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
.note--ok{background:var(--ok-soft);border-color:transparent;color:var(--ok-2)}
.note--warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}

/* ---------------------------------------------------------------- Toast */
.toasts{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;
  flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--ac);
  border-radius:var(--r-sm);box-shadow:var(--sh-3);padding:10px 14px;
  font-size:var(--fs-md);color:var(--tx);max-width:340px;
  animation:toastIn .18s var(--ease);
}
@keyframes toastIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.toast.ok{border-left-color:var(--ok)}
.toast.bad{border-left-color:var(--bad)}
.toast.warn{border-left-color:var(--warn)}

/* ---------------------------------------------------------------- 弹窗 */
.mask{
  position:fixed;inset:0;z-index:150;background:var(--overlay);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:maskIn .14s var(--ease);
}
@keyframes maskIn{from{opacity:0}to{opacity:1}}
.dlg{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);width:min(460px,100%);max-height:88vh;display:flex;
  flex-direction:column;animation:dlgIn .18s var(--ease);
}
@keyframes dlgIn{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.dlg h3{font-size:var(--fs-xl);font-weight:650;letter-spacing:-.2px;
  padding:var(--sp-5) var(--sp-5) 0}
.dlg__body{padding:var(--sp-4) var(--sp-5);overflow-y:auto;flex:1;
  font-size:var(--fs-md);color:var(--tx-2)}
.dlg__foot{display:flex;justify-content:flex-end;gap:8px;padding:0 var(--sp-5) var(--sp-5)}
.dlg--wide{width:min(680px,100%)}

/* ---------------------------------------------------------------- 板块密码门 */
.gate{
  max-width:400px;margin:8vh auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:var(--sp-8);text-align:center;
}
.gate__ic{font-size:32px;margin-bottom:10px;line-height:1;
  filter:drop-shadow(0 0 14px var(--ac-soft))}
.gate h2{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.4px;margin-bottom:6px}
.gate p{color:var(--tx-3);font-size:var(--fs-md);margin-bottom:var(--sp-5)}
.gate .field{text-align:left}

/* ---------------------------------------------------------------- 报表卡（iframe 预览） */
.rep{margin-bottom:var(--sp-5)}
.rep__hd{
  display:flex;align-items:center;gap:10px;padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.rep__t{font-size:var(--fs-lg);font-weight:650;letter-spacing:-.2px;
  display:flex;align-items:center;gap:8px}
.rep__a{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.rep__bd{padding:0;background:var(--panel-2);
  box-shadow:inset 0 0 0 1px var(--ac-soft)}
.rep__frame{width:100%;height:820px;border:0;display:block;background:var(--panel)}
.rep__ph{padding:var(--sp-8);text-align:center;color:var(--tx-3)}
@media (max-width:820px){
  .rep__frame{height:560px}
}

/* ---------------------------------------------------------------- 首页欢迎条 */
.hero{
  background:var(--hero-grad);
  border:1px solid var(--hero-edge);
  color:#fff;border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-6) var(--sp-5);
  margin-bottom:var(--sp-5);position:relative;overflow:hidden;
  box-shadow:var(--glow);
}
/* hero 上再叠一层网格 + 右侧光晕：整块看起来像一块面板，而不是一张色卡 */
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px),
    radial-gradient(420px 200px at 88% 10%, rgba(255,255,255,.28), transparent 70%);
  background-size:26px 26px, 26px 26px, 100% 100%;
  -webkit-mask-image:linear-gradient(115deg, rgba(0,0,0,.95), transparent 78%);
  mask-image:linear-gradient(115deg, rgba(0,0,0,.95), transparent 78%);
}
.hero > *{position:relative;z-index:1}
.hero h2{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.5px}
.hero p{color:rgba(255,255,255,.78);font-size:var(--fs-md);margin-top:5px}
html[data-theme="dark"] .hero h2{color:#eafcff;
  text-shadow:0 0 24px rgba(34,211,238,.35)}
.hero__meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:var(--sp-4);
  font-size:var(--fs-sm);color:rgba(255,255,255,.9)}
.hero__meta span{display:flex;align-items:center;gap:5px}

/* 首页板块卡 */
.homecard{
  display:flex;flex-direction:column;gap:6px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-4);
  cursor:pointer;box-shadow:var(--sh-1);text-align:left;width:100%;
  transition:box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),
  border-color var(--t-fast) var(--ease);
}
.homecard:hover{box-shadow:var(--glow);transform:translateY(-1px);border-color:var(--ac-line)}
.homecard__ic{
  width:34px;height:34px;border-radius:var(--r-sm);background:var(--ac-soft);
  color:var(--ac-ink);display:flex;align-items:center;justify-content:center;
  margin-bottom:5px;box-shadow:inset 0 0 0 1px var(--ac-line);
}
.homecard__t{font-size:var(--fs-lg);font-weight:650;letter-spacing:-.2px;color:var(--tx)}
.homecard__d{font-size:var(--fs-sm);color:var(--tx-3);line-height:1.5}
.homecard__f{margin-top:auto;padding-top:8px;font-size:var(--fs-xs);color:var(--tx-3);
  display:flex;align-items:center;gap:6px}

/* ---------------------------------------------------------------- 文件管理 */
.fm-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-bottom:var(--sp-4)}
.fm-bar .input{flex:1;min-width:180px}
/* ⚠️ 这里原来有一组 .fm-pv* 规则（预览面板：框、头、iframe 容器、占位）。
   用户 2026-10-10 要求「预览是不要的」，预览整块已从 files.js 删掉，
   对应的样式也就没有使用者了，一并清掉 —— 别在样式表里留死规则。
   注意 .fm-pv__box iframe 那条里还写死了 background:#fff，
   留着既没用又破坏了「app.css 无硬编码颜色」这条约定。 */

/* 拖拽上传区 */
.drop{
  border:1.5px dashed var(--line-2);border-radius:var(--r);padding:var(--sp-5);
  text-align:center;color:var(--tx-3);font-size:var(--fs-sm);
  background:var(--bg-2);cursor:pointer;transition:all var(--t-fast) var(--ease);
}
.drop:hover,.drop.on{border-color:var(--ac);background:var(--ac-soft);color:var(--ac-ink)}
.drop__f{margin-top:6px;font-size:var(--fs-md);color:var(--tx-2);font-weight:600}

/* ---------------------------------------------------------------- 工具 */
.row-between{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}
.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}
.gap-2{gap:var(--sp-2)}.flex1{flex:1;min-width:0}
.tc{text-align:center}.tr{text-align:right}
.muted{color:var(--tx-3)}
.small{font-size:var(--fs-sm)}
.hidden{display:none!important}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width:900px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .ws-side{position:fixed;left:0;top:0;bottom:0;z-index:100;box-shadow:var(--sh-3)}
  .ws-side__brand{padding-left:13px}
  .grid--4,.grid--3,.grid--2{grid-template-columns:1fr}
  .ws-view__in{padding:var(--sp-4) var(--sp-3) var(--sp-8)}
  .ws-top{padding:0 10px}
  .pg-head h1{font-size:var(--fs-2xl)}
  .lrow{flex-wrap:wrap}
  .lrow__a{width:100%;justify-content:flex-start;padding-left:34px}
  .ws-me__tx{display:none}
  .ws-crumb{max-width:38vw}
}
/* 侧栏折叠时，手机端让它缩成一条 */
@media (max-width:680px){
  .ws.mini .ws-side{width:0;border-right:0}
  .ws.mini .ws-side__brand,.ws.mini .ws-side__scroll,.ws.mini .ws-side__foot{display:none}
}