:root{
  /* 浅色工作台：白色侧栏 + 浅蓝渐变画布 + 贤牛蓝强调色 */
  --ground:#F6F8FC; --surface:#FFFFFF; --surface-2:#F2F4FA; --surface-3:#E9EDF6;
  --ink:#141824;          /* 正文，对白底 15.8:1 */
  --ink-2:#4A5468;        /* 次级，对白底 8.3:1 */
  --ink-3:#616B85;        /* 弱化，对白底 5.3:1 */
  --line:#E6E9F2; --line-strong:#CFD5E4;
  --accent:#2B62E8;       /* 对白底 5.6:1 */
  --accent-strong:#1B4FD0; --on-accent:#FFFFFF;
  --accent-ink:#1B4FD0; --accent-soft:rgba(43,98,232,.09); --accent-line:rgba(43,98,232,.30);
  --warm:#9A6407;         /* 对白底 4.8:1 */
  --warm-ink:#6F4705;     /* 用在 warm-soft 底色上 */
  --warm-soft:rgba(214,150,32,.14);
  --crit:#C0342B; --crit-soft:rgba(192,52,43,.10);
  --shadow:0 1px 2px rgba(24,38,72,.05), 0 14px 34px -20px rgba(24,38,72,.28);
  --shadow-lg:0 2px 6px rgba(24,38,72,.06), 0 22px 48px -24px rgba(24,38,72,.35);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sans:"Microsoft YaHei","微软雅黑","PingFang SC",-apple-system,"Hiragino Sans GB","Heiti SC",sans-serif;
  --mono:"Microsoft YaHei","微软雅黑","PingFang SC",-apple-system,sans-serif;
  --num:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --body-bg:linear-gradient(180deg,#E7EEFB 0%,#EFF3FB 220px,var(--ground) 460px);
  color-scheme:light;
}

/* ================= 界面主题 ================= */
/* 浅海蓝 */
:root[data-ui="sky"]{
  --ground:#EFF7FE; --surface:#FFFFFF; --surface-2:#EAF3FC; --surface-3:#DCEBF8;
  --ink:#0E1B27; --ink-2:#3E566B; --ink-3:#5A7288;
  --line:#DDEAF6; --line-strong:#C3DAEE;
  --accent:#0F6CC9; --accent-strong:#0A5399; --on-accent:#FFFFFF;
  --accent-ink:#0A5399; --accent-soft:rgba(15,108,201,.10); --accent-line:rgba(15,108,201,.32);
  --shadow:0 1px 2px rgba(11,52,88,.06), 0 14px 34px -20px rgba(11,52,88,.30);
  --shadow-lg:0 2px 6px rgba(11,52,88,.07), 0 22px 48px -24px rgba(11,52,88,.36);
  --body-bg:
    radial-gradient(1100px 520px at 12% -8%, rgba(120,206,255,.30), transparent 62%),
    radial-gradient(900px 480px at 96% 6%, rgba(96,178,255,.22), transparent 60%),
    linear-gradient(180deg,#DCF0FF 0%,#E9F6FF 240px,var(--ground) 520px);
}
/* 晨曦紫 */
:root[data-ui="violet"]{
  --ground:#F5F1FE; --surface:#FFFFFF; --surface-2:#F1EBFD; --surface-3:#E5DCFA;
  --ink:#161230; --ink-2:#4E4570; --ink-3:#6A5F8C;
  --line:#E7DFF9; --line-strong:#D2C5F0;
  --accent:#6B3FD4; --accent-strong:#5330AC; --on-accent:#FFFFFF;
  --accent-ink:#5330AC; --accent-soft:rgba(107,63,212,.10); --accent-line:rgba(107,63,212,.32);
  --warm:#8A5A0C; --warm-ink:#663F06; --warm-soft:rgba(214,150,32,.15);
  --shadow:0 1px 2px rgba(46,26,92,.06), 0 14px 34px -20px rgba(46,26,92,.32);
  --shadow-lg:0 2px 6px rgba(46,26,92,.08), 0 22px 48px -24px rgba(46,26,92,.38);
  --body-bg:
    radial-gradient(1000px 520px at 8% -6%, rgba(170,132,255,.30), transparent 62%),
    radial-gradient(880px 460px at 98% 4%, rgba(122,160,255,.22), transparent 60%),
    linear-gradient(180deg,#EDE4FE 0%,#F3ECFE 240px,var(--ground) 520px);
}
/* 晨雾青 */
:root[data-ui="jade"]{
  --ground:#F1F7F5; --surface:#FFFFFF; --surface-2:#EAF3F0; --surface-3:#DCEAE5;
  --ink:#0D1D19; --ink-2:#3A5450; --ink-3:#557069;
  --line:#DCEAE5; --line-strong:#C1D8D1;
  --accent:#0C6E62; --accent-strong:#08544A; --on-accent:#FFFFFF;
  --accent-ink:#08544A; --accent-soft:rgba(12,110,98,.10); --accent-line:rgba(12,110,98,.32);
  --shadow:0 1px 2px rgba(10,50,44,.06), 0 14px 34px -20px rgba(10,50,44,.30);
  --shadow-lg:0 2px 6px rgba(10,50,44,.08), 0 22px 48px -24px rgba(10,50,44,.36);
  --body-bg:
    radial-gradient(1000px 500px at 10% -8%, rgba(94,206,186,.26), transparent 62%),
    linear-gradient(180deg,#E2F1EC 0%,#EDF6F3 240px,var(--ground) 520px);
}
/* 深墨（深色） */
:root[data-ui="ink"]{
  --ground:#0D131E; --surface:#161D2B; --surface-2:#1D2637; --surface-3:#273143;
  --ink:#EAF0FA; --ink-2:#AFBDD3; --ink-3:#8E9DB6;
  --line:#273143; --line-strong:#37435A;
  --accent:#78A6FF; --accent-strong:#9CBEFF; --on-accent:#0A1120;
  --accent-ink:#9CBEFF; --accent-soft:rgba(120,166,255,.14); --accent-line:rgba(120,166,255,.38);
  --warm:#E3B25C; --warm-ink:#F0C87F; --warm-soft:rgba(227,178,92,.16);
  --crit:#FF8A80; --crit-soft:rgba(255,138,128,.14);
  --shadow:0 1px 2px rgba(0,0,0,.40), 0 14px 34px -20px rgba(0,0,0,.72);
  --shadow-lg:0 2px 6px rgba(0,0,0,.46), 0 22px 48px -24px rgba(0,0,0,.80);
  --body-bg:
    radial-gradient(1100px 520px at 12% -8%, rgba(60,96,190,.26), transparent 62%),
    radial-gradient(900px 480px at 96% 4%, rgba(96,66,190,.20), transparent 60%),
    linear-gradient(180deg,#111A28 0%,#0F1724 240px,var(--ground) 520px);
  color-scheme:dark;
}
/* 深色下的细节修正 */
:root[data-ui="ink"] .topbar,
:root[data-ui="ink"] .subbar{background:rgba(22,29,43,.86)}
:root[data-ui="ink"] .btn.primary{box-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 16px -8px rgba(120,166,255,.5)}
:root[data-ui="ink"] .mask{background:rgba(4,8,16,.62)}
:root[data-ui="ink"] .thumb,:root[data-ui="ink"] .citem .mini{background:#080D16}
:root[data-ui="ink"] .fontrow .fw{border-color:var(--line-strong)}
:root[data-ui="ink"] .spec table th{background:var(--surface-2)}
:root[data-ui="ink"] .slotprev{background:#080D16}
:root[data-ui="ink"] input,:root[data-ui="ink"] select,:root[data-ui="ink"] textarea{color:var(--ink)}
:root[data-ui="ink"] input::placeholder,:root[data-ui="ink"] textarea::placeholder{color:var(--ink-3)}
:root[data-ui="ink"] .ffmt{color:#fff}
:root[data-ui="ink"] .toast{background:var(--surface-3);color:var(--ink)}

/* ---- 登录页 ----
   不是弹窗：没登录就什么都看不到，应用整个不渲染，
   这一页自己就是页面。原来那种「卡片浮在虚化的应用上」会让人以为
   自己已经进去了、只是被挡了一下。 */
body.gated>.app{display:none}
.loginGate{position:fixed;inset:0;z-index:300;overflow:auto;background:var(--surface)}
.lgpage{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* 左：品牌面。深色，贤牛 + 仁科的标识用白色透明版 */
.lgside{position:relative;display:flex;flex-direction:column;justify-content:center;
  gap:22px;padding:56px 56px 48px;color:#fff;
  background:
    radial-gradient(760px 420px at 84% -18%, rgba(124,92,246,.46), transparent 62%),
    radial-gradient(620px 380px at 6% 108%, rgba(43,98,232,.40), transparent 60%),
    linear-gradient(150deg,#0C1330 0%,#14235C 54%,#0A1128 100%)}
.lgbrand{display:flex;align-items:center;gap:16px}
.lgbrand img{display:block;width:auto;filter:brightness(0) invert(1)}
.lgbrand img{height:32px}
.lgbrand img.lgzc{height:20px;opacity:.92}
.lgsep2{width:1px;height:24px;background:rgba(255,255,255,.26);flex:none}
.lgside h1{margin:0;font-size:34px;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.lgside p{margin:0;font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.74);max-width:34ch}
.lgpts{list-style:none;margin:6px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;max-width:420px}
.lgpts li{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.lgpts b{font-size:13.5px;font-weight:700;letter-spacing:.01em}
.lgpts span{font-size:11.5px;color:rgba(255,255,255,.66)}
.lgver{position:absolute;left:56px;bottom:26px;font-family:var(--mono);
  font-size:11.5px;color:rgba(255,255,255,.44)}
/* 蓝色面右下角的装饰字。只是装饰，读屏跳过（aria-hidden），
   压在内容底下一层，字重拉满、透明度压到很低，远看是一块肌理而不是一句话。 */
.lgmark{position:absolute;right:52px;bottom:18px;z-index:0;pointer-events:none;
  font-size:clamp(40px,8vw,112px);font-weight:800;line-height:.86;letter-spacing:-.045em;
  color:rgba(255,255,255,.085);white-space:nowrap;user-select:none}
/* 只把静态排版的几块抬到装饰字上面。
   别写成 .lgside>*:not(.lgmark)——那会把 .lgver 的 absolute 改成 relative，
   角标就从左下角掉回文档流里了。 */
.lgside>.lgbrand,.lgside>h1,.lgside>p,.lgside>.lgpts{position:relative;z-index:1}
.lgver{z-index:1}

/* 右：表单面 */
.lgmain{display:grid;place-items:center;padding:40px 24px}
.loginForm{width:min(100%,360px);display:flex;flex-direction:column;gap:14px}
.lgmini{display:none;align-items:center;gap:13px;margin-bottom:4px}
.lgmini img{display:block;width:auto;height:26px}
.lgmini img.lgzc{height:17px;opacity:.9}
.lgmini .lgsep2{background:var(--line-strong);height:20px}
.loginHd b{display:block;font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.loginHd span{display:block;font-size:13px;color:var(--ink-3);margin-top:7px;line-height:1.65}
.loginForm label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-3);font-weight:500}
.loginForm input{padding:12px 13px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font-size:14.5px}
.loginForm input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.loginForm .btn{padding:13px;font-size:14.5px;margin-top:4px;border-radius:10px}
.loginMsg{font-size:12.5px;color:var(--crit);background:var(--crit-soft);border-radius:var(--r-sm);padding:9px 11px;line-height:1.6}
.loginMsg.warn{color:var(--warm-ink);background:var(--warm-soft)}
.loginFoot{font-size:11.5px;color:var(--ink-3);line-height:1.7}

/* 窄屏：不是把品牌面删掉，是把它横过来。
   深色面收成顶部一条，标识、名字、那句话、模块都还在，只是排成一行行；
   白色表单面做成一张上浮的纸，圆角压在深色面上——和 PC 端左右分栏
   是同一套关系，只是竖过来了。 */
@media(max-width:860px){
  .lgpage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100dvh}
  .lgside{display:flex;justify-content:flex-end;gap:13px;
    padding:calc(30px + env(safe-area-inset-top)) 22px 44px}
  .lgbrand{gap:12px}
  .lgbrand img{height:25px}
  .lgbrand img.lgzc{height:16px}
  .lgsep2{height:20px}
  .lgside h1{font-size:26px}
  .lgside p{font-size:13.5px;max-width:none}
  /* 四个模块在手机上排成一行胶囊，占一行就够，不抢表单的高度 */
  .lgpts{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 0;max-width:none}
  .lgpts li{flex-direction:row;align-items:baseline;gap:6px;padding:5px 11px;border-radius:var(--r-pill)}
  .lgpts b{font-size:12px}
  /* 胶囊上只留名字：手机上一行排得下，也不跟表单抢注意力 */
  .lgpts span{display:none}
  /* 装饰字压到最底，一半被白色那张纸盖住，看着是肌理不是一句标语 */
  .lgmark{right:14px;bottom:2px;font-size:clamp(52px,17vw,96px);letter-spacing:-.05em;
    color:rgba(255,255,255,.065)}
  /* 版本号回到文档流，跟在品牌面最后一行，不再绝对定位压字 */
  .lgver{position:relative;left:auto;bottom:auto;margin-top:1px;font-size:11px;
    color:rgba(255,255,255,.42)}
  .lgmain{padding:0 20px 34px;align-items:start;background:var(--surface);
    border-radius:20px 20px 0 0;margin-top:-18px;position:relative;z-index:2}
  .lgmini{display:none}
  .loginForm{width:min(100%,420px);padding:28px 0 34px}
  .loginHd b{font-size:22px}
}
/* 极窄屏（iPhone SE 这类）：再压一档，保证不用滚动就能看到登录按钮 */
@media(max-width:860px) and (max-height:700px){
  .lgside{gap:10px;padding:calc(20px + env(safe-area-inset-top)) 20px 36px}
  .lgside h1{font-size:23px}
  .lgside p{font-size:13px}
  .lgpts{display:none}
  .lgmark{font-size:clamp(46px,15vw,80px)}
}
.savemenu{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.savemask{position:absolute;inset:0;background:rgba(12,20,38,.46);backdrop-filter:blur(3px)}
.savecard{position:relative;width:min(94vw,400px);background:var(--surface);border-radius:16px;
  padding:16px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow-lg)}
.savehd{font-size:14.5px;font-weight:700;color:var(--ink);padding:2px 4px 8px}
.savebtn{display:block;text-align:left;padding:13px 15px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);transition:all .15s;min-height:44px}
.savebtn:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.savebtn b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.savebtn span{display:block;font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.55}
.savebtn.ghost{border-color:transparent;text-align:center;color:var(--ink-3);font-size:13.5px;padding:11px}
.savebtn.ghost:hover{background:var(--surface-2);color:var(--ink-2)}
.savepreview .savecard{gap:10px}
.saveprevmask{position:absolute;inset:0;background:rgba(12,20,38,.46);backdrop-filter:blur(3px)}
.saveprev-frame{position:relative;z-index:1;background:var(--surface-2);border-radius:10px;
  overflow:visible;max-height:52vh;display:flex;align-items:center;justify-content:center;padding:10px}
.saveprev-frame img{max-width:100%;max-height:48vh;object-fit:contain;background:#fff;display:block;
  -webkit-touch-callout:default;-webkit-user-select:none;user-select:none}
.saveprev-hint{position:relative;z-index:1;font-size:12.5px;color:var(--ink-2);line-height:1.6;
  margin:0;padding:2px 4px 0}
.savepreview .savebtn,.savepreview .savehd{position:relative;z-index:1}
.demobadge{font-size:11px;color:var(--warm-ink);background:var(--warm-soft);border-radius:var(--r-pill);
  padding:3px 10px;white-space:nowrap;font-weight:600}
@media(max-width:820px){ .demobadge{display:none} }

/* 主题切换器 */
/* .uipick / .uidot：顶栏的主题色点已下线，主题切换统一在个人中心弹窗里。
   样式保留，将来若要在别处再放一组色点可直接复用。 */
.uipick{display:flex;align-items:center;gap:5px;padding:4px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface)}
.uidot{width:22px;height:22px;border-radius:50%;border:2px solid transparent;padding:0;
  position:relative;transition:transform .15s,border-color .15s}
.uidot:hover{transform:scale(1.12)}
.uidot.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.uidot i{position:absolute;inset:2px;border-radius:50%;display:block}
@media(max-width:820px){ .uipick{display:none} }
.uirow{display:flex;flex-direction:column;gap:7px}
.uibtn{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:13px;
  text-align:left;transition:all .15s}
.uibtn:hover{border-color:var(--accent-line);color:var(--accent)}
.uibtn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.uibtn i{width:20px;height:20px;border-radius:50%;flex:none;border:1px solid rgba(20,32,60,.12)}
.uibtn span{flex:1;min-width:0}
.uibtn .uidef{display:none;font-style:normal;font-size:10.5px;font-weight:600;color:var(--ink-3);
  border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:1px 7px;flex:none}
.uibtn.isdef .uidef{display:inline-block}
.uidot.isdef::after{content:"";position:absolute;right:-1px;bottom:-1px;width:7px;height:7px;
  border-radius:50%;background:var(--accent);border:1.5px solid var(--surface)}
.uifoot{display:flex;flex-direction:column;gap:7px}
.uinote{font-size:11.5px;color:var(--ink-3);line-height:1.6}
.uinote b{color:var(--ink-2)}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);background-image:var(--body-bg);background-attachment:fixed;color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- shell ---------- */
.app{display:flex;flex-direction:column;min-height:100vh}
.topbar{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand .mk{font-weight:600;font-size:15px;letter-spacing:.02em;white-space:nowrap}
.brand .mk i{font-style:normal;color:var(--accent)}
.brand .cnt{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.search{flex:1 1 260px;min-width:180px;position:relative}
.search input{width:100%;padding:8px 12px 8px 32px;background:var(--ground);border:1px solid var(--line);border-radius:3px;outline-offset:0}
.search input::placeholder{color:var(--ink-3)}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;stroke:var(--ink-3);fill:none;stroke-width:2}
.tb-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.btn{padding:7px 12px;border:1px solid var(--line-strong);border-radius:3px;color:var(--ink-2);white-space:nowrap;font-size:13px;background:var(--surface)}
.btn:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.btn.primary{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent);font-weight:500}
.btn.primary:hover{background:#4A85FF;border-color:#4A85FF;color:var(--on-accent)}
.btn.primary:disabled{opacity:.4;cursor:not-allowed;filter:none}
.btn.ghost{border-color:transparent;color:var(--ink-3)}
.btn.ghost:hover{color:var(--accent);background:var(--accent-soft);border-color:transparent}
#btnFilter{display:none}

.body{display:grid;grid-template-columns:236px minmax(0,1fr) 300px;gap:0;flex:1;align-items:start}
@media(max-width:1180px){ .body{grid-template-columns:210px minmax(0,1fr)} .cart{grid-column:1/-1;border-left:none;border-top:1px solid var(--line);position:static;height:auto} }
@media(max-width:760px){
  .body{grid-template-columns:1fr}
  .rail{border-right:none;border-bottom:1px solid var(--line);position:static;height:auto;display:none}
  .rail.open{display:block}
  #btnFilter{display:inline-block}
}

/* ---------- rail ---------- */
.rail{border-right:1px solid var(--line);background:var(--surface);position:sticky;top:53px;height:calc(100vh - 53px);overflow-y:auto;padding:4px 0 40px}
.fgroup{border-bottom:1px solid var(--line);padding:14px 16px}
.fgroup h4{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:400}
.fgroup h4 button{font-family:var(--sans);font-size:11px;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.fgroup h4 button:hover{color:var(--accent)}
.fgroup .ghint{font-size:11px;color:var(--ink-3);line-height:1.5;margin:-4px 0 9px}
.opt{display:flex;align-items:flex-start;gap:8px;padding:4px 0;cursor:pointer;font-size:13px;color:var(--ink-2);line-height:1.45}
.opt:hover{color:var(--ink)}
.opt input{margin:3px 0 0;accent-color:var(--accent);flex:none}
.opt .ol{flex:1;min-width:0}
.opt .oc{font-family:var(--mono);font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none}
.opt.checked{color:var(--accent);font-weight:500}

/* ---------- grid ---------- */
.main{padding:16px 20px 60px;min-width:0}
.mainhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.mainhead:empty,.mainhead:has(.chips:empty){margin-bottom:0}
.counter{font-family:var(--mono);font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;padding:5px 10px;border:1px solid var(--line);border-radius:3px;background:var(--ground);white-space:nowrap}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 6px 3px 9px;border:1px solid var(--accent-line);color:var(--accent);background:var(--accent-soft);border-radius:2px}
.chip button{color:inherit;opacity:.7;line-height:1;font-size:14px}
.chip button:hover{opacity:1}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.card.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-line)}
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0A0D14;cursor:zoom-in}
.thumb .stagebox{position:absolute;inset:0}
/* 竖版 9:16：卡片与购物车缩略图切换比例 */
body.v916 .thumb{aspect-ratio:9/16}
body.v916 .citem .mini{aspect-ratio:9/16}
body.v916 .grid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.pick{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:3px;border:1.5px solid rgba(255,255,255,.55);background:rgba(6,10,18,.55);display:grid;place-items:center;z-index:2;backdrop-filter:blur(2px)}
.pick svg{width:12px;height:12px;stroke:#fff;stroke-width:2.6;fill:none;opacity:0}
.card.sel .pick{background:var(--accent);border-color:var(--accent)}
.card.sel .pick svg{opacity:1}
.cbody{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.ctitle{font-size:13.5px;font-weight:600;line-height:1.45;color:var(--ink)}
.csub{font-size:12px;color:var(--ink-3);line-height:1.5}
.ctags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.t{font-size:11px;padding:2px 6px;border-radius:2px;border:1px solid var(--line);color:var(--ink-2);background:var(--surface-2);white-space:nowrap}
.t.vp{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
.t.cs{color:var(--warm);border-color:var(--warm);background:var(--warm-soft)}
.t.tpl{color:var(--ink-2);border-style:dashed}
.cclient{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.cclient b{color:var(--ink-2);font-weight:500}
.cfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:8px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.cfoot .id{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfoot .uses{flex:none;font-variant-numeric:tabular-nums}
.empty{padding:60px 20px;text-align:center;color:var(--ink-3);border:1px dashed var(--line-strong);border-radius:4px}

/* ---------- cart ---------- */
.cart{border-left:1px solid var(--line);background:var(--surface);position:sticky;top:53px;height:calc(100vh - 53px);display:flex;flex-direction:column}
.carthead{padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.carthead .ch{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.carthead h4{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:400}
.carthead .n{font-family:var(--mono);font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums}
.carthead label{display:block;font-size:11px;color:var(--ink-3);margin-bottom:5px}
.carthead input{width:100%;padding:7px 10px;background:var(--ground);border:1px solid var(--line);border-radius:3px;font-size:12.5px;font-family:var(--mono)}
.cartlist{flex:1;overflow-y:auto;padding:8px 10px}
.citem{display:grid;grid-template-columns:14px 16px 54px 1fr auto;gap:8px;align-items:center;padding:6px;border-radius:3px;border:1px solid transparent}
.citem .grip{color:var(--ink-3);font-size:12px;line-height:1;text-align:center;cursor:grab;user-select:none}
.citem:hover .grip{color:var(--accent)}
.citem:hover{background:var(--surface-2);border-color:var(--line)}
.citem .ord{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-align:center;font-variant-numeric:tabular-nums}
.citem .mini{aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:#0A0D14;position:relative}
.citem .ct .edmark{display:inline-block;margin-left:5px;font-size:10px;color:var(--warm);border:1px solid var(--warm);background:var(--warm-soft);border-radius:2px;padding:0 4px;vertical-align:1px}
.citem .ct{font-size:12px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--ink-2)}
.citem .ops{display:flex;flex-direction:column;gap:1px}
.citem .ops button{font-family:var(--mono);font-size:10px;color:var(--ink-3);line-height:1;padding:2px 3px;border-radius:2px}
.citem .ops button:hover{color:var(--accent);background:var(--accent-soft)}
.citem .ops .x:hover{color:var(--crit);background:var(--crit-soft)}
.cartfoot{padding:12px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.cartfoot .cfrow{display:flex;gap:8px}
.cartfoot .btn{flex:1;text-align:center}
.cartempty{padding:34px 16px;text-align:center;color:var(--ink-3);font-size:12.5px;line-height:1.7}


/* ================================================================
   浅色工作台 · 组件层（参考站点结构：白侧栏 / 圆角卡片 / 胶囊筛选）
   ================================================================ */
.topbar{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);
  padding:11px 22px}
.brand .mk{font-size:16.5px;font-weight:700;letter-spacing:.005em;color:var(--ink);white-space:nowrap}
.brand .mk i{font-style:normal;color:var(--accent);font-weight:800}
.brand .mk i{color:var(--accent)}
.brand .cnt{color:var(--ink-3)}
.search input{background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-pill);
  padding:9px 14px 9px 36px;font-size:13.5px;transition:background .16s,border-color .16s,box-shadow .16s}
.search input:focus{background:var(--surface);border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-soft);outline:none}
.search svg{left:13px;stroke:var(--ink-3)}

.btn{border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);
  padding:8px 13px;font-size:13px;font-weight:500;transition:all .15s}
.btn:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);
  box-shadow:0 1px 2px rgba(27,79,208,.24),0 6px 16px -8px rgba(27,79,208,.5)}
.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-3)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink-2);border-color:transparent}
select.btn{background:var(--surface);color:var(--ink-2)}

/* ---- 侧栏：白底 + 圆角选项行 ---- */
.rail{background:var(--surface);border-right:1px solid var(--line);padding:6px 0 48px}
.fgroup{border-bottom:1px solid var(--line);padding:15px 14px}
.fgroup h4{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;text-transform:none;
  font-weight:700;color:var(--ink-3);margin:0 0 9px;padding:0 6px}
.fgroup h4 button{font-size:11.5px;color:var(--ink-3);font-weight:500}
.fgroup .ghint{padding:0 6px;color:var(--ink-3)}
.opt{align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-sm);
  position:relative;transition:background .13s,color .13s}
.opt:hover{background:var(--surface-2);color:var(--ink)}
.opt input{margin:0}
.opt.checked{background:var(--accent-soft);color:var(--accent);font-weight:600}
.opt.checked::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:16px;border-radius:0 3px 3px 0;background:var(--accent)}
.opt .oc{color:var(--ink-3)}
.opt.checked .oc{color:var(--accent)}

/* ---- 筛选胶囊 ---- */
.counter{border-radius:var(--r-pill);background:var(--surface-2);border:none;color:var(--ink-2);
  padding:6px 13px;font-weight:500}
.chip{border-radius:var(--r-pill);padding:5px 8px 5px 13px;font-weight:500;font-size:12.5px;
  background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.chip button{font-size:15px}

/* ---- 卡片 ---- */
.grid{grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:18px}
.card{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);
  box-shadow:0 1px 2px rgba(24,38,72,.04);transition:transform .18s cubic-bezier(.22,.8,.28,1),box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft),var(--shadow)}
.thumb{border-radius:var(--r-lg) var(--r-lg) 0 0;background:#0A1730}
.pick{border-radius:7px;width:24px;height:24px;border:1.5px solid rgba(255,255,255,.7);
  background:rgba(10,23,48,.5)}
.cbody{padding:13px 15px 14px;gap:7px}
.ctitle{font-size:14px;color:var(--ink)}
.csub{color:var(--ink-2);font-size:12.2px}
.t{border-radius:var(--r-pill);padding:3px 9px;font-size:11px;background:var(--surface-2);
  border-color:transparent;color:var(--ink-2)}
.t.vp{background:var(--accent-soft);color:var(--accent);border-color:transparent;
  display:inline-flex;align-items:center;gap:5px}
.t.vp .ico{width:13px;height:13px;flex:none;display:inline-block}
.t.cs{background:var(--warm-soft);color:var(--warm);border-color:transparent}
.t.tpl{border:1px dashed var(--line-strong);background:transparent}
.cclient{color:var(--ink-3)}
.cclient b{color:var(--ink-2)}
.cfoot{color:var(--ink-3);border-top-color:var(--line)}
.empty{border-radius:var(--r-lg);border-color:var(--line-strong);color:var(--ink-2);background:var(--surface)}

/* ---- 购物车 ---- */
.cart{background:var(--surface);border-left:1px solid var(--line)}
.carthead{padding:15px 16px 13px}
.carthead h4{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;text-transform:none;
  font-weight:700;color:var(--ink-3)}
.carthead .n{color:var(--accent);font-weight:600}
.carthead input{background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-sm);
  font-family:var(--sans);padding:9px 12px}
.carthead input:focus{background:var(--surface);border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
.citem{border-radius:var(--r-sm);padding:7px}
.citem:hover{background:var(--surface-2);border-color:transparent}
.citem .mini{border-radius:5px;background:#0A1730}
.citem .ct{color:var(--ink-2)}
.cartempty{color:var(--ink-3)}
.cartfoot{gap:9px;padding:13px 15px}
.preset{border-radius:var(--r-md);background:var(--surface);border-color:var(--line)}
.preset:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.preset .pd{color:var(--ink-2)}
.preset .pc{color:var(--ink-3)}

/* ---- 弹窗 ---- */
.mask{background:rgba(18,26,45,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal{background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.mhead{border-bottom:1px solid var(--line)}
.mhead h3{color:var(--ink)}
.mhead .ms{color:var(--ink-3)}
.metagrid .ml{color:var(--ink-3)}
.metagrid .mv{color:var(--ink)}
.previewbox{background:var(--surface-2);border-radius:var(--r-md)}
.edbar{background:var(--warm-soft);border-color:transparent;color:var(--ink-2);border-radius:var(--r-md)}
.edbar b{color:var(--ink)}

/* ---- 顶栏收纳：外观弹层 ---- */
.pop-wrap{position:relative}
.pop{position:absolute;right:0;top:calc(100% + 8px);width:262px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  padding:12px;z-index:60;display:flex;flex-direction:column;gap:9px;
  /* 内容比屏幕高时弹层自己滚；overscroll-behavior 挡住滚动穿透到页面 */
  max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch}
.pop::-webkit-scrollbar{width:6px}
.pop::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.pop::-webkit-scrollbar-track{background:transparent}
.poprow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink-2)}
.poprow select{flex:0 0 130px;padding:7px 9px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font-size:13px}
.popsep{height:1px;background:var(--line);margin:2px 0}
.poplab{font-size:11.5px;font-weight:700;color:var(--ink-3)}
.popbtn{width:100%;text-align:left;padding:8px 10px}
.bgpick{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.bgpick button{aspect-ratio:16/10;border-radius:7px;border:2px solid transparent;overflow:hidden;
  background-size:cover;background-position:center;position:relative;transition:border-color .15s,transform .15s}
.bgpick button:hover{transform:scale(1.06)}
.bgpick button.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bgpick button.none{background:repeating-linear-gradient(45deg,#EDF0F7 0 5px,#fff 5px 10px)}
.bgpick button span{position:absolute;left:0;right:0;bottom:0;font-size:8.5px;line-height:1.5;
  background:rgba(10,20,40,.6);color:#fff;text-align:center}
.bgpick button.none span{background:rgba(52,60,78,.86)}
/* 顶栏有 backdrop-filter，会成为 fixed 的包含块，移动端弹层改用 absolute 锚定 */
@media(max-width:760px){
  .pop{position:absolute;left:auto;right:0;top:calc(100% + 8px);bottom:auto;
    width:min(92vw,320px);max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  #popLook{left:0;right:auto}
}

/* ---- 轻提示 ---- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);opacity:0;pointer-events:none;
  background:var(--ink);color:#fff;padding:11px 20px;border-radius:var(--r-pill);font-size:13.5px;
  box-shadow:var(--shadow-lg);z-index:200;transition:opacity .2s,transform .2s;max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* ---- 只读分享视图：隐藏编辑类入口 ---- */
body.sharedview .topbar,body.sharedview #viewLib,body.sharedview #viewPaper,body.sharedview #viewHome{display:none!important}
body.sharedview #present.on{display:flex}

/* ---- 分享 PDF 预览页：灰底白纸，像浏览器打开 PDF ---- */
html.sharepdf body,body.sharepdf{background:#525659;overflow:auto}
html.sharepdf .app,html.sharepdf #present,html.sharepdf #pExit,
body.sharepdf .app,body.sharepdf #present,body.sharepdf #pExit,body.sharepdf .cart,body.sharepdf .rail{display:none!important}
html.sharepdf .sharepdf-shell,body.sharepdf .sharepdf-shell{display:flex!important;flex-direction:column;min-height:100vh}
.sharepdf-shell{display:none}
.sharepdf-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 18px;background:#323639;color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.35)}
.sharepdf-left{min-width:0}
.sharepdf-brand{display:block;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.55);margin-bottom:2px}
.sharepdf-bar h1{margin:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(52vw,520px)}
.sharepdf-right{display:flex;align-items:center;gap:12px;flex:none}
.sharepdf-right #shareMeta{font-size:12px;color:rgba(255,255,255,.7)}
.sharepdf-bar .btn{background:#fff;color:#1a1a1a;border:0}
.sharepdf-doc{display:flex;flex-direction:column;align-items:center;gap:22px;padding:22px 16px 64px}
.sharepdf-page{position:relative;width:min(1120px,100%);isolation:isolate}
.sharepdf-paper{position:relative;width:100%;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.45);overflow:hidden;aspect-ratio:16/9;isolation:isolate}
.sharepdf-page.v916{width:min(420px,100%)}
.sharepdf-page.v916 .sharepdf-paper{aspect-ratio:9/16}
.sharepdf-stage,.sharepdf-paper .stagebox{position:absolute!important;inset:0;width:100%!important;height:100%!important;overflow:hidden}
.sharepdf-pnum{margin-top:8px;text-align:center;font-size:12px;color:rgba(255,255,255,.72)}
.sharepdf-empty{display:none;flex:1;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#fff;text-align:center;padding:48px 20px}
.sharepdf-empty[hidden]{display:none!important}
body.sharepdf .sharepdf-empty:not([hidden]){display:flex}
.sharepdf-empty h2{margin:0;font-size:22px}
.sharepdf-empty p{margin:0;color:rgba(255,255,255,.7)}
@media print{
  body.sharepdf{background:#fff}
  body.sharepdf .sharepdf-bar,body.sharepdf .sharepdf-pnum,body.sharepdf .sharepdf-empty{display:none!important}
  body.sharepdf .sharepdf-doc{padding:0;gap:0}
  body.sharepdf .sharepdf-page{width:100%;break-after:page;page-break-after:always}
  body.sharepdf .sharepdf-paper{box-shadow:none}
  body.sharepdf:not(.v916) .sharepdf-paper{aspect-ratio:auto;height:100vh}
}

/* ================= 移动端 / 分享放映 ================= */
.present{padding:20px}
.pstage{transition:transform .3s cubic-bezier(.22,.8,.28,1)}
.pbar{flex-wrap:nowrap}

@media(max-width:820px){
  .present{padding:0;justify-content:flex-start;gap:0}
  .pstage{width:100vw;max-width:100vw;border-radius:0;box-shadow:none}
  .pbar{position:fixed;left:0;right:0;bottom:0;padding:11px 14px calc(11px + env(safe-area-inset-bottom));
    background:rgba(10,14,22,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.10);gap:10px;font-size:12px;justify-content:space-between}
  .pbar button{flex:none;padding:9px 14px;border-radius:var(--r-pill);font-size:13px;min-width:44px;
    border-color:rgba(255,255,255,.22)}
  .pbar #pExit{display:none}
  body.sharedview .pbar #pExit{display:none}
  .present::after{content:"上下滑动翻页";position:fixed;left:0;right:0;top:calc(50% + 30vw);
    text-align:center;font-size:11.5px;color:rgba(255,255,255,.42);pointer-events:none;
    animation:hintfade 5s ease forwards}
  @keyframes hintfade{0%,62%{opacity:1}100%{opacity:0}}
  .present.zoomed::after{display:none}
  /* 放大：竖屏下把 16:9 页面旋转 90° 铺满整屏 */
  .present.zoomed{background:#000}
  .present.zoomed .pstage{--zw:min(100vh, calc(100vw * 16 / 9));
    position:fixed;left:50%;top:50%;
    width:var(--zw)!important;max-width:none!important;height:calc(var(--zw) * 9 / 16)!important;
    aspect-ratio:auto!important;
    transform:translate(-50%,-50%) rotate(90deg);transform-origin:center center;z-index:5}
  .present.zoomed .pbar{background:rgba(0,0,0,.72)}
  /* 竖版 9:16：页面天然铺满竖屏，不再需要旋转放大 */
  .present.v916 .pstage{width:100vw;max-width:100vw;aspect-ratio:9/16;height:auto}
  .present.v916.zoomed .pstage{position:static;width:100vw!important;height:auto!important;
    aspect-ratio:9/16!important;transform:none;max-height:100vh}
  .present.v916::after{content:"上下滑动翻页";top:auto;bottom:calc(86px + env(safe-area-inset-bottom))}
}
@media(max-width:820px) and (orientation:landscape){
  .present.zoomed .pstage{width:100vw;height:calc(100vw * 9 / 16);transform:translate(-50%,-50%)}
}

/* ================= WebSlide 移动端 ================= */
@media(max-width:820px){
  .topbar{padding:9px 13px;gap:9px}
  .brand .mk{font-size:15px}
  .brand .cnt{display:none}
  .search{flex:1 1 100%;order:3}
  .tb-actions{gap:7px;width:100%;order:4;justify-content:flex-start;overflow-x:auto;
    flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
  .tb-actions .btn{flex:none}
  .tb-actions::-webkit-scrollbar{display:none}
  .btn{padding:8px 12px;font-size:13px}
  .counter{display:none}
  .main{padding:13px 13px 96px}
  .grid{grid-template-columns:1fr;gap:14px}
  .card{border-radius:var(--r-md)}
  .thumb{border-radius:var(--r-md) var(--r-md) 0 0}
  .pick{width:30px;height:30px}
  .pick svg{width:15px;height:15px}
  /* 筛选做成抽屉 */
  .rail{position:fixed;left:0;top:0;bottom:0;width:min(85vw,320px);z-index:70;
    overflow-y:auto;padding-bottom:80px;
    transform:translateX(-102%);transition:transform .26s cubic-bezier(.22,.8,.28,1);display:block}
  .rail.open{transform:translateX(0);box-shadow:0 0 0 100vmax rgba(12,20,38,.45)}
  .fgroup{padding:14px 13px}
  .opt{padding:10px 10px;font-size:14px}
  /* 购物车做成底部抽屉 */
  .cart{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;max-height:76vh;z-index:65;
    border-left:none;border-top:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:0 -8px 34px -14px rgba(24,38,72,.34);
    transform:translateY(calc(100% - 60px));transition:transform .26s cubic-bezier(.22,.8,.28,1)}
  .cart.open{transform:translateY(0)}
  .carthead{cursor:pointer;padding:16px 16px 13px}
  .carthead .ch{margin-bottom:0}
  .cart:not(.open) .carthead .hintline{display:none}
  .carthead h4{font-size:13px;color:var(--ink)}
  .carthead .n{font-size:14px}
  .carthead label,.carthead input{display:none}
  .cart.open .carthead label,.cart.open .carthead input{display:block}
  .cartlist{max-height:44vh}
  .cartfoot{padding-bottom:calc(13px + env(safe-area-inset-bottom))}
  #btnFilter{display:inline-block}
  .viewseg button{padding:7px 12px}
  .modal{width:min(96vw,720px);max-height:92vh}
  .metagrid{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  .metagrid{grid-template-columns:1fr}
  .tb-actions .btn{padding:8px 11px;font-size:12.5px}
}
@media(max-width:400px){
  .topbar .brand .mk{font-size:13.5px}
  .topbar .brand{padding-right:6px}
  .viewseg button{padding:0 9px;font-size:13px}
}

/* ================= 两级导航 ================= */
.topbar{padding:0 22px;height:56px;gap:0;flex-wrap:nowrap;align-items:stretch}
.topbar .brand{display:flex;align-items:center;gap:11px;flex:none;padding-right:26px}
.topbar .brand .cnt{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
/* 一级菜单：底部指示条 */
.viewseg{display:flex;gap:4px;border:none;border-radius:0;flex:none;align-self:stretch}
.viewseg button,.viewseg button:hover,.viewseg button.on{background:none!important;border:none!important;border-radius:0!important}
.viewseg button{position:relative;padding:0 20px;font-size:14.5px;font-weight:600;color:var(--ink-3);
  white-space:nowrap;transition:color .16s}
.viewseg button+button{border-left:none}
.viewseg button:hover{color:var(--ink-2);background:none}
.viewseg button.on{color:var(--accent);background:none;font-weight:700}
.viewseg button::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:2.5px;
  border-radius:2px 2px 0 0;background:var(--accent);transform:scaleX(0);
  transition:transform .22s cubic-bezier(.22,.8,.28,1)}
.viewseg button.on::after{transform:scaleX(1)}
.topbar .tb-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
#btnAdmin2{font-size:16px;line-height:1;padding:7px 10px}

/* 二级栏 */
.subbar{position:sticky;top:56px;z-index:39;display:flex;align-items:center;gap:12px 16px;
  padding:10px 22px;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.subbar .search{flex:1 1 320px;max-width:520px;min-width:170px}
.subbar .tb-actions{margin-left:auto}
#paperNow{font-size:13.5px;color:var(--ink);font-weight:600;white-space:nowrap;flex:1 1 auto;
  max-width:520px;overflow:hidden;text-overflow:ellipsis;padding-left:2px}
/* OnePage 视图下二级栏左侧留白由文档名占位 */
body:has(#viewPaper:not([hidden])) .subbar .tb-actions{margin-left:auto}
.rail,.cart{top:105px;height:calc(100vh - 105px)}

@media(max-width:820px){
  #btnStats{display:none}
  .subbar .tb-actions{flex-wrap:wrap;row-gap:8px}
  .subbar #paperNow{flex:1 1 100%;max-width:none;order:0;padding:0}
  #viewPaper .prail{max-height:40vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  #viewPaper .canvas{padding:16px 12px 90px}
  .topbar{height:52px;padding:0 10px;gap:4px}
  .topbar .brand{padding-right:8px;min-width:0}
  .topbar .brand .cnt{display:none}
  .topbar .brand .mk{font-size:14.5px}
  .viewseg{min-width:0!important;flex:1 1 auto!important;overflow-x:auto;scrollbar-width:none}
  .topbar .brand{flex:none}
  .topbar .brand .mk .mkw{display:none}
  .topbar .brand .mk{font-size:17px;letter-spacing:.02em}
  .topbar .tb-right{flex:0 0 auto}
  .viewseg::-webkit-scrollbar{display:none}
  .viewseg button{padding:0 7px;font-size:12.8px;flex:none;letter-spacing:0}
  .viewseg button::after{left:4px;right:4px}
  .topbar .tb-right{flex:none;gap:4px}
  #btnAdmin2{padding:6px 8px}
  #btnLayout{padding:6px 8px}
  #btnLayout span{display:none}
  .subbar{top:52px;padding:9px 13px;gap:9px;flex-wrap:wrap}
  .subbar .search{flex:1 1 100%;max-width:none;order:1}
  .subbar .tb-actions{order:2;width:100%;margin-left:0}
  .rail{top:0;height:100%}
  .cart{top:auto}
}

/* ================= PPT 模板与规范 ================= */
.pwrap{max-width:1000px;margin:0 auto;padding:20px 22px 80px}
.pseg{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.pseg button{position:relative;padding:9px 4px;margin-right:22px;font-size:14.5px;font-weight:600;
  color:var(--ink-3);transition:color .16s}
.pseg button:hover{color:var(--ink-2)}
.pseg button.on{color:var(--accent);font-weight:700}
.pseg button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transition:transform .22s cubic-bezier(.22,.8,.28,1)}
.pseg button.on::after{transform:scaleX(1)}

/* 模板卡片 */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(24,38,72,.04);
  transition:transform .18s cubic-bezier(.22,.8,.28,1),box-shadow .18s,border-color .18s}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
.tcover{aspect-ratio:16/9;background:linear-gradient(150deg,#0E1B3E,#16255C 55%,#0A142F);
  display:grid;place-items:center;position:relative;overflow:hidden}
.tcover img{width:100%;height:100%;object-fit:cover;display:block}
.tcover .tph{font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:rgba(255,255,255,.78)}
.tcover .trat{position:absolute;right:9px;top:9px;font-family:var(--mono);font-size:10.5px;
  padding:2px 8px;border-radius:var(--r-pill);background:rgba(8,14,34,.6);color:rgba(255,255,255,.86)}
.tbody2{padding:13px 15px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.tname{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.45}
.tdesc{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.tmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px;
  font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}
.tfoot{display:flex;gap:8px;align-items:center;margin-top:auto;padding-top:11px;border-top:1px solid var(--line)}
.tfoot .btn{padding:6px 11px;font-size:12.5px}
.tfoot .btn.primary{margin-left:auto}

/* ---- BrandStudio 生成工具 ---- */
.genintro{font-size:13.5px;color:var(--ink-2);line-height:1.75;margin:-4px 0 16px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 18px 16px;
  text-align:left;display:flex;flex-direction:column;gap:8px;cursor:pointer;
  box-shadow:0 1px 2px rgba(24,38,72,.04);
  transition:transform .18s cubic-bezier(.22,.8,.28,1),box-shadow .18s,border-color .18s}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent-line)}
.gcard .gi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--accent-strong),var(--accent));color:var(--on-accent)}
.gcard .gi svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.gcard b{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4}
.gcard span{font-size:12.5px;color:var(--ink-2);line-height:1.6}
.gcard i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:auto;padding-top:6px}

.crumb{display:flex;align-items:center;gap:10px;margin:-4px 0 16px;font-size:13px;color:var(--ink-3)}
.crumb .cback{padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font-size:13px;font-weight:600;transition:all .15s}
.crumb .cback:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.crumb .csep{opacity:.5}
.crumb .cnow{color:var(--ink);font-weight:600}

/* 版式切换：实时缩略图，横向一排 */
.vbar{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px;width:100%;padding-bottom:2px}
.vbar .vlab{flex:0 0 100%;font-size:11.5px;font-weight:700;color:var(--ink-3);
  letter-spacing:.06em;margin-bottom:-2px}
.vopt{flex:none;border:2px solid transparent;border-radius:10px;background:var(--surface);padding:0;
  cursor:pointer;overflow:hidden;transition:border-color .16s,transform .16s,box-shadow .16s;
  box-shadow:0 1px 2px rgba(24,38,72,.06)}
.vopt:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.vopt.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.vopt canvas{display:block;background:#fff}
.vopt .vn{display:block;padding:5px 8px 6px;font-size:11.5px;color:var(--ink-2);
  white-space:nowrap;text-align:center;border-top:1px solid var(--line)}
.vopt.on .vn{color:var(--accent);font-weight:700}
.bench{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;align-items:start}
.bform{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 16px 18px;
  display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 2px rgba(24,38,72,.04)}
.bform .bh{font-size:14.5px;font-weight:700;color:var(--ink);padding-bottom:10px;border-bottom:1px solid var(--line)}
.bform label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-3);font-weight:500}
.bform input,.bform select,.bform textarea{padding:9px 11px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:13.5px;font-family:var(--sans)}
.bform input:focus,.bform select:focus,.bform textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.bform input[type=file]{padding:7px 9px;font-size:12px}
.bform .bhint{font-size:11.5px;color:var(--ink-3);line-height:1.6;margin-top:-3px}
.bprev{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;display:flex;flex-direction:column;gap:14px;align-items:center}
.bpv{width:100%;display:flex;justify-content:center}
.bpv canvas{max-width:100%;max-height:62vh;height:auto;border-radius:6px;
  box-shadow:0 10px 30px -14px rgba(24,38,72,.42);background:#fff}
.bpbar{display:flex;align-items:center;gap:14px;width:100%;justify-content:flex-end}
.bpsize{margin-right:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}

.fontlist{display:flex;flex-direction:column;gap:9px}
.fontrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;text-align:left;
  padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  transition:border-color .15s,box-shadow .15s}
.fontrow:hover{border-color:var(--accent-line)}
.fontrow.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fontrow .fn{font-size:14.5px;font-weight:600;color:var(--ink)}
.fontrow.on .fn{color:var(--accent)}
.fontrow .fp{grid-column:1/-1;font-size:14px;color:var(--ink-2);line-height:1.6}
.fontrow .fw{font-size:11px;color:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:2px 9px;align-self:start;white-space:nowrap}
.fontrow .fw.sys{border-style:dashed}
.logh{display:grid;grid-template-columns:132px 96px minmax(0,1fr) 150px;gap:10px;
  padding:0 4px 8px;font-size:11.5px;font-weight:700;color:var(--ink-3);border-bottom:1px solid var(--line)}
.loglist{display:flex;flex-direction:column}
.logrow{display:grid;grid-template-columns:132px 96px minmax(0,1fr) 150px;gap:10px;
  padding:11px 4px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2);align-items:baseline}
.logrow:last-child{border-bottom:none}
.logrow .lgt{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.logrow .lga{font-weight:600;color:var(--accent)}
.logrow .lgn{color:var(--ink);word-break:break-word}
.logrow .lgb{color:var(--ink-3);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:820px){
  .logh{display:none}
  .logrow{grid-template-columns:1fr;gap:3px;padding:12px 2px}
  .logrow .lgb{text-align:left}
}
/* ---------- 组件库面板 ---------- */
.blkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.blkcard{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(24,38,72,.04);
  transition:transform .16s,box-shadow .16s,border-color .16s}
.blkcard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.blkcard.off{opacity:.52}
.blkcard.off .blkthumb{filter:grayscale(.75)}
.blkthumb{position:relative;aspect-ratio:16/9;background:#0A1730;overflow:hidden}
.blkthumb .stagebox{position:absolute;inset:0}
.blkoffmark{position:absolute;right:8px;top:8px;font-size:11px;padding:2px 9px;border-radius:var(--r-pill);
  background:rgba(10,16,32,.78);color:#fff}
.blknoprev{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:rgba(255,255,255,.5)}
.blkbody{padding:12px 14px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.blkhd{display:flex;align-items:baseline;gap:8px}
.blkhd b{font-size:14.5px;font-weight:600;color:var(--ink)}
.blkcat{margin-left:auto;font-size:11px;color:var(--ink-3);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:1px 8px;white-space:nowrap}
.blkhint{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.blkslot{margin:0;font-size:11.5px;line-height:1.55;color:var(--ink-3)}
.blkfoot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:9px;border-top:1px solid var(--line)}
.blkuse{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.blknew{font-size:10.5px;color:var(--accent);border:1px solid var(--accent-line);background:var(--accent-soft);
  border-radius:var(--r-pill);padding:1px 7px}
.blkfoot .btn{margin-left:auto;padding:3px 10px;font-size:11.5px}
.blkfoot .btn+.btn{margin-left:0}
.blkcard.off .blktog{color:var(--accent);border-color:var(--accent-line)}
#blkSeg i{font-style:normal;font-weight:400;opacity:.72;margin-left:7px;font-size:12px}

/* 左侧栏入口 */
.railblk{padding:14px}
.railblk button{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);text-align:left;transition:all .15s}
.railblk button:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.railblk .rbi{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--accent-strong),var(--accent));color:var(--on-accent);
  font-size:13px;line-height:1}
.railblk .rbt{flex:1;min-width:0}
.railblk .rbt b{display:block;font-size:13px;font-weight:600;color:inherit}
.railblk .rbt span{display:block;font-size:11px;color:var(--ink-3);margin-top:1px}
.railblk button:hover .rbt span{color:var(--accent)}

/* 管理员编辑里的版式切换 */
.blkswitch .blkopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;
  width:100%;margin-top:8px;max-height:280px;overflow-y:auto;padding:2px}
.blkopt{padding:0;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);
  display:block;text-align:center;transition:border-color .15s,transform .15s}
.blkopt:hover{transform:translateY(-2px);border-color:var(--accent-line)}
.blkopt.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.blkopt .bostage{display:block;position:relative;aspect-ratio:16/9;background:#0A1730}
.blkopt .bostage .stagebox{position:absolute;inset:0;display:block}
.blkopt .bon{display:block;padding:6px 8px 7px;font-size:12px;color:var(--ink-2);border-top:1px solid var(--line)}
.blkopt.on .bon{color:var(--accent);font-weight:600}
.blkopt .bon i{font-style:normal;font-size:10.5px;color:var(--ink-3);margin-left:5px}
.blkopt.on .bon i{color:var(--accent)}
@media(max-width:820px){
  .blkgrid{grid-template-columns:1fr}
  .blkswitch .blkopts{grid-template-columns:repeat(2,1fr);max-height:none}
}

.stkpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.stkpi>div{background:var(--surface-2);border-radius:var(--r-md);padding:14px 16px}
.stkpi b{display:block;font-family:var(--num);font-size:26px;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.2}
.stkpi span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:4px}
.stsec{margin-bottom:20px}
.stsec h4{margin:0 0 10px;font-size:12.5px;font-weight:700;color:var(--ink-3);letter-spacing:.04em}
.stnone{margin:0;font-size:12.5px;color:var(--ink-3)}
.stlist{display:flex;flex-direction:column;gap:7px}
.strow{display:grid;grid-template-columns:minmax(0,1fr) 130px 74px;gap:12px;align-items:center}
.strow .stn{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strow .stbar{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.strow .stbar i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--accent),#7C5CF6)}
.strow .stv{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:820px){ .stkpi{grid-template-columns:repeat(2,1fr)} .strow{grid-template-columns:minmax(0,1fr) 70px 60px} }

/* ---- 品牌切换 ---- */
.bseg{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.bseg button{padding:9px 20px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font-size:13.5px;font-weight:600;transition:all .15s}
.bseg button:hover{border-color:var(--accent-line);color:var(--accent)}
.bseg button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.bseg button i{font-style:normal;font-weight:400;opacity:.72;margin-left:7px;font-size:12px}
.specdiv{display:flex;align-items:center;gap:14px;margin:34px 0 18px;color:var(--ink-3)}
.specdiv::before,.specdiv::after{content:"";height:1px;background:var(--line);flex:1}
.specdiv span{font-size:12.5px;font-weight:700;letter-spacing:.06em;white-space:nowrap}

/* ---- 品牌卡 ---- */
.bcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(24,38,72,.04);margin-bottom:22px}
.bcard .bhd{display:flex;align-items:center;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line)}
.bcard .blogo{height:44px;display:flex;align-items:center}
.bcard .blogo img{height:100%;width:auto;display:block}
.bcard .blogo .bph{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--ink-3);
  border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:8px 14px}
.bcard .bmeta{min-width:0}
.bcard .bmeta b{display:block;font-size:16px;font-weight:700;color:var(--ink);line-height:1.4}
.bcard .bmeta span{font-size:12.5px;color:var(--ink-3);font-family:var(--mono)}
.bcard .bhd .btn{flex:none}
.bcard .bbody{padding:18px 22px 22px;display:flex;flex-direction:column;gap:20px}
.bsub .bcnt{font-style:normal;font-weight:500;color:var(--ink-3);margin-left:10px;font-family:var(--mono);font-size:11px}
.binfo{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 26px}
.binfo .bi{min-width:0}
.binfo .bi .bl{font-size:11.5px;font-weight:700;color:var(--ink-3);margin-bottom:4px}
.binfo .bi .bv{font-size:13.5px;color:var(--ink);line-height:1.65;word-break:break-word}
.binfo .bi .bv.todo{color:var(--ink-3);font-style:normal}
.binfo .bi.wide{grid-column:1/-1}
.binfo .bi .bv.intro{font-size:13.2px;color:var(--ink-2);line-height:1.85}
.bsub{font-size:12.5px;font-weight:700;color:var(--ink-3);margin:0 0 10px}
.bassets{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:11px}
.basset{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s,border-color .16s}
.basset:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.basset .bt{aspect-ratio:16/9;display:grid;place-items:center;padding:12px;background:var(--surface-2)}
.basset .bt:has(img){background:#fff}
.basset .bt.dark{background:linear-gradient(150deg,#0E1B3E,#16255C 55%,#0A142F)}
.basset .bt.qr{background:var(--surface-2);padding:8px}
.basset .bt img{max-width:100%;max-height:100%;object-fit:contain}
.basset .bt .bph{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-3)}
.basset .bf{padding:8px 10px 9px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px}
.basset .bf .bn{font-size:12px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.basset .bf .btn{margin-left:auto;padding:3px 9px;font-size:11px;flex:none}

/* ---- 品牌元素 ---- */
.kith{font-size:15px;font-weight:700;color:var(--ink);margin:30px 0 6px}
.kitp{font-size:12.8px;color:var(--ink-2);line-height:1.7;margin:0 0 14px}
.kitwrap .ksec{margin-bottom:26px}
.kitwrap .ksec>h3{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 6px}
.kitwrap .ksec>p{font-size:12.8px;color:var(--ink-2);line-height:1.7;margin:0 0 12px}
.krow{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.kitem{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s,border-color .16s}
.kitem:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.kthumb{aspect-ratio:16/9;display:grid;place-items:center;padding:14px;background:var(--surface-2)}
.kthumb:has(img){background:#fff}
.kthumb.dark{background:linear-gradient(150deg,#0E1B3E,#16255C 55%,#0A142F)}
.kthumb img{max-width:100%;max-height:100%;object-fit:contain}
.kitem .kfoot{padding:9px 11px 10px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px}
.kitem .kn{font-size:12.5px;color:var(--ink);font-weight:500;line-height:1.4;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kitem .kfoot .btn{margin-left:auto;padding:4px 10px;font-size:11.5px;flex:none}
.kbg{aspect-ratio:16/9;background-size:cover;background-position:center}
.kswatch{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.ksw{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);text-align:left;cursor:pointer}
.ksw .kc{height:56px}
.ksw .kt{padding:8px 10px 9px}
.ksw .kt b{display:block;font-size:12.5px;color:var(--ink);font-weight:600}
.ksw .kt span{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.knote{background:var(--warm-soft);border-radius:var(--r-md);padding:12px 14px;font-size:12.5px;
  color:var(--ink-2);line-height:1.7;margin-top:10px}
.knote b{color:var(--ink)}
@media(max-width:900px){ .bench{grid-template-columns:1fr} }

/* 规范正文 */
.spec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 42px 44px;box-shadow:0 1px 2px rgba(24,38,72,.04);color:var(--ink)}
.spec .sphead{border-bottom:2px solid var(--accent);padding-bottom:14px;margin-bottom:8px}
.spec .sphead h1{margin:0;font-size:29px;font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(96deg,var(--accent-strong),var(--accent) 62%,#7C5CF6);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.spec .sphead .spsub{margin-top:6px;font-size:14px;font-weight:600;color:var(--ink)}
.spec .sphead .spm{margin-top:7px;font-size:12.5px;color:var(--ink-3);font-family:var(--mono);
  display:flex;flex-wrap:wrap;gap:6px 16px}
.spec .spintro{font-size:14px;color:var(--ink-2);line-height:1.8;margin:16px 0 4px}
.spec h2{display:flex;align-items:center;gap:11px;font-size:17px;font-weight:700;
  margin:30px 0 12px;color:var(--ink);letter-spacing:.005em}
.spec h2 .sn{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--on-accent);
  background:linear-gradient(145deg,var(--accent-strong),var(--accent))}
.spec h3{font-size:14px;font-weight:700;color:var(--ink);margin:18px 0 8px}
.spec p{font-size:13.8px;line-height:1.85;color:var(--ink-2);margin:0 0 10px}
.spec ul{margin:0 0 12px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.spec ul li{position:relative;padding-left:19px;font-size:13.8px;line-height:1.75;color:var(--ink-2)}
.spec ul li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:2px;
  background:var(--accent);opacity:.72}
.spec ul li b{color:var(--ink);font-weight:600}
.spec table{width:100%;border-collapse:collapse;margin:4px 0 14px;font-size:13.2px}
.spec table th,.spec table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);
  vertical-align:top;line-height:1.65}
.spec table th{font-size:12px;font-weight:700;color:var(--ink-2);background:var(--surface-2);
  border-bottom:1px solid var(--line-strong)}
.spec table td{color:var(--ink-2)}
.spec table td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
.spec table tr:last-child td{border-bottom:none}
.spec .rule-do,.spec .rule-no{border-radius:var(--r-md);padding:12px 15px;margin:0 0 12px;
  font-size:13.4px;line-height:1.75}
.spec .rule-do{background:var(--accent-soft);color:var(--ink-2);border-left:3px solid var(--accent)}
.spec .rule-no{background:var(--crit-soft);color:var(--ink-2);border-left:3px solid var(--crit)}
.spec .rule-do b,.spec .rule-no b{color:var(--ink);font-weight:700;margin-right:5px}
.spec .chk{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;margin:2px 0 8px}
.spec .chk div{position:relative;padding-left:24px;font-size:13.5px;line-height:1.65;color:var(--ink-2)}
.spec .chk div::before{content:"";position:absolute;left:0;top:.28em;width:15px;height:15px;
  border-radius:4px;border:1.5px solid var(--line-strong)}
.spec .todo{background:var(--warm-soft);border-radius:var(--r-md);padding:14px 16px;margin-top:6px}
.spec .todo b{color:var(--ink);font-weight:700}
.spec .spfoot{margin-top:30px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-3);line-height:1.8}
@media(max-width:820px){
  .pwrap{padding:14px 13px 96px}
  .spec{padding:22px 18px 30px;border-radius:var(--r-md)}
  .spec .chk{grid-template-columns:1fr}
  .tgrid{grid-template-columns:1fr}
}
@media print{
  body.v-ppt .topbar,body.v-ppt .subbar,body.v-ppt #pptSeg,body.v-ppt #pptTpl{display:none!important}
  body.v-ppt .spec{border:none;box-shadow:none;padding:0}
  body.v-ppt .pwrap{padding:0;max-width:none}
}

/* ================= 下载资料视图 ================= */
.fwrap{max-width:1080px;margin:0 auto;padding:20px 22px 70px}
.ftags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.ftag{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:13px;font-weight:500;
  cursor:pointer;transition:all .15s}
.ftag:hover{border-color:var(--accent-line);color:var(--accent)}
.ftag.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ftag i{font-style:normal;font-size:11.5px;opacity:.7;font-family:var(--mono)}
.flist{display:flex;flex-direction:column;gap:11px}
.frow{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:16px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:15px 17px;
  box-shadow:0 1px 2px rgba(24,38,72,.04);transition:transform .16s,box-shadow .16s,border-color .16s}
.frow:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.ffmt{display:grid;place-items:center;height:44px;border-radius:9px;font-family:var(--mono);
  font-size:12.5px;font-weight:700;letter-spacing:.03em;color:#fff;background:var(--fc)}
.fmain{min-width:0}
.fname{font-size:15px;font-weight:600;color:var(--ink);line-height:1.45}
.fdesc{font-size:12.8px;color:var(--ink-2);line-height:1.55;margin-top:3px}
.fmeta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:8px;
  font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}
.fchip{font-family:var(--sans);padding:2px 9px;border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--accent-ink);font-size:11.5px;font-weight:500}
.fdot{opacity:.5}
.fops{display:flex;gap:8px;align-items:center;flex:none}
.fempty{padding:56px 24px;text-align:center;background:var(--surface);border:1px dashed var(--line-strong);
  border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;gap:9px}
.fempty b{font-size:15.5px;color:var(--ink)}
.fempty span{font-size:13px;color:var(--ink-2);max-width:400px;line-height:1.7}
.fempty .btn{margin-top:8px}
.demobar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--warm-soft);
  border-radius:var(--r-md);padding:13px 16px;font-size:12.8px;color:var(--ink-2);line-height:1.7}
.demobar b{color:var(--ink);font-weight:700;margin-right:2px}
.demobar .btn{margin-left:auto;flex:none}
.tcard.demo{border-style:dashed;background:transparent;box-shadow:none}
.tcard.demo:hover{transform:none;box-shadow:none;border-color:var(--line-strong)}
.tcard.demo .tcover{background:linear-gradient(150deg,#3A465F,#46536E 55%,#333E56)}
.tcard.demo .tfoot .btn{margin-left:auto}
.frow.demo{border-style:dashed;background:transparent;box-shadow:none}
.frow.demo:hover{transform:none;box-shadow:none;border-color:var(--line-strong)}
.frow.demo .ffmt{opacity:.55}
.fchip.demo{background:var(--warm-soft);color:var(--warm-ink)}
/* 添加 / 编辑表单 */
.fform{display:flex;flex-direction:column;gap:13px}
.fform label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-2);font-weight:500}
.fform input,.fform textarea,.fform select{padding:10px 12px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:13.5px;font-family:var(--sans)}
.fform input:focus,.fform textarea:focus,.fform select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.fform textarea{resize:vertical}
.ff2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.ffbtn{display:flex;justify-content:flex-end;gap:9px;margin-top:4px}
@media(max-width:820px){
  .fwrap{padding:14px 13px 96px}
  .fempty{padding:38px 18px}
  .ftags{gap:7px;margin-bottom:13px}
  .ftag{padding:6px 12px;font-size:12.5px}
  .frow{grid-template-columns:48px minmax(0,1fr);gap:12px}
  .ffmt{height:38px;font-size:11.5px}
  .fops{grid-column:1/-1;justify-content:flex-end}
  .ff2{grid-template-columns:1fr}
}




/* ---- 公司业务介绍：去掉全部横线，统一为面板语言 ---- */
#viewPaper .page.page.page{padding-bottom:27mm}
#viewPaper .page.bg-rule.bg-rule{background:
  linear-gradient(90deg,var(--brand) 0%,color-mix(in srgb,var(--brand) 45%,transparent) 46%,transparent 78%)
    top left/100% 1.6mm no-repeat,
  var(--pbg)!important; padding-top:16mm}
#viewPaper .page.sk-deep.bg-rule.bg-rule,#viewPaper .page.sk-beam.bg-rule.bg-rule{background:
  linear-gradient(90deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.28) 46%,transparent 78%)
    top left/100% 1.6mm no-repeat,
  var(--pbg)!important}
#viewPaper .page.bg-wave::after{border-top:none}
#viewPaper .b-header{border-bottom:none;padding-bottom:2mm;position:relative}
#viewPaper .b-header::after{content:"";position:absolute;left:0;bottom:0;width:22mm;height:1.4mm;
  border-radius:1mm;background:var(--brand)}
#viewPaper .b-stats{border-top:none;border-bottom:none;padding:5mm 6mm;
  background:var(--psoft);border-radius:3mm}
#viewPaper .b-cases .c{border-top:none;padding:4mm 5mm;background:var(--psoft);border-radius:3mm;
  position:relative}
#viewPaper .b-cases .c::before{content:none!important;display:none!important}
#viewPaper .b-cases .c>.cdot{position:absolute;left:19px;top:16px;width:9px;height:9px;
  border-radius:2px;background:var(--brand);display:block;pointer-events:none}
#viewPaper .b-cases .c .who{padding-left:4.4mm}
#viewPaper .b-six .c .t::before{content:none!important;display:none!important}
#viewPaper .b-six .c .t>.cdot{width:9px;height:9px;border-radius:2px;background:var(--brand);
  display:block;flex:none}
#viewPaper .b-contact{border-top:none;padding:5mm 6mm;background:var(--psoft);border-radius:3mm}


/* ---- 公司业务介绍：卡片型模块吃掉多余空间，区块间距保持一致 ---- */
#viewPaper .page:not(.psheet){justify-content:flex-start}
#viewPaper .blk:has(.b-six),#viewPaper .blk:has(.b-cases),
#viewPaper .blk:has(.b-stats),#viewPaper .blk:has(.b-problems),
#viewPaper .blk:has(.b-list){flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
#viewPaper .blk:has(.b-six)>*,#viewPaper .blk:has(.b-cases)>*,
#viewPaper .blk:has(.b-stats)>*,#viewPaper .blk:has(.b-problems)>*,
#viewPaper .blk:has(.b-list)>*{flex:1 1 auto}
#viewPaper .blk:has(.b-stats){flex-grow:.5;max-height:40mm}
#viewPaper .blk:has(.b-list){flex-grow:1;max-height:56mm}
#viewPaper .blk:has(.b-six){flex-grow:1.4;max-height:58mm}
#viewPaper .blk:has(.b-cases){flex-grow:1.4;max-height:62mm}
#viewPaper .blk:has(.b-problems){flex-grow:1.6;max-height:76mm}
#viewPaper .b-six,#viewPaper .b-cases{align-content:center}
#viewPaper .b-stats{align-items:center}
#viewPaper .b-six .c,#viewPaper .b-cases .c{display:flex;flex-direction:column;justify-content:center}
#viewPaper .b-problems{display:flex;flex-direction:column;justify-content:center;gap:2.5mm}
#viewPaper .b-list{display:flex;flex-direction:column;justify-content:center}

/* ---- OnePage 外观：公司业务介绍（正反面）---- */
#viewPaper .page.sk-intro:not(.bg-dark){--brand:#1B54C8!important;--pink:#0F1620;--pdim:#5A6472;
  --pline:#E4E9F2;--pbg:#FFFFFF;--psoft:#F3F6FC}
#viewPaper .page.sk-pro:not(.bg-dark){--pink:#0F1620;--pdim:#5A6472;--pline:#E2E6EC;--pbg:#FFFFFF;--psoft:#F3F6FA}
#viewPaper .page.sk-sky:not(.bg-dark){--pink:#0B1A2E;--pdim:#5A6B88;--pline:#DCE7F6;--psoft:#F2F7FE;
  --pbg:linear-gradient(168deg,#FFFFFF 0%,#F4F9FF 58%,#EAF3FE 100%)}
#viewPaper .page.sk-deep:not(.bg-dark){--brand:#6BB6FF!important;--pink:#FFFFFF;--pdim:#93A5C6;
  --pline:rgba(255,255,255,.17);--psoft:rgba(255,255,255,.07);
  --pbg:linear-gradient(168deg,#0E1B3E 0%,#12224C 52%,#0A142F 100%)}
#viewPaper .page.sk-beam:not(.bg-dark){--brand:#7FD6FF!important;--pink:#FFFFFF;--pdim:#A8BCF0;
  --pline:rgba(255,255,255,.22);--psoft:rgba(158,196,255,.14);
  --pbg:linear-gradient(180deg,#1A27B6 0%,#1E2FC2 46%,#141E8C 100%)}
#viewPaper .page.sk-deep .pgfoot .pfo b,#viewPaper .page.sk-beam .pgfoot .pfo b{color:#FFFFFF}
#viewPaper .page.sk-deep .pgfoot,#viewPaper .page.sk-beam .pgfoot{color:var(--pdim)}

.ffup{font-size:12.2px;line-height:1.6;color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;margin-top:-4px}
.ffup.ok{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.ffup.warn{background:var(--warm-soft);border-color:transparent;color:var(--warm)}
.fform input[type=file]{padding:8px 10px;background:var(--surface)}

/* 顶栏身份 */
.mechip{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.mechip:hover{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.mechip i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-style:normal;font-size:13px;font-weight:700;color:var(--on-accent);
  background:linear-gradient(145deg,var(--accent-strong),var(--accent))}
.mechip span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;min-width:0}
.mechip b{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.mechip em{font-style:normal;font-size:11px;color:var(--ink-3);white-space:nowrap}
.mechip em.adm{color:var(--accent);font-weight:600}
.pop-me{width:286px}
.meform{display:flex;flex-direction:column;gap:10px}
.meform label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink-3);font-weight:500}
.meform input{padding:8px 11px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font-size:13.5px}
.meform input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* 当前身份（只读）。角色由账号决定，个人中心不再提供切换。 */
.rolenow{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 13px;
  background:var(--surface-2);display:flex;flex-direction:column;gap:5px}
.rolenow b{font-size:13.5px;font-weight:700;color:var(--ink)}
.rolenow span{font-size:11.8px;color:var(--ink-2);line-height:1.6}
.rolenow i{font-style:normal;font-size:11px;color:var(--ink-3);line-height:1.5;
  padding-top:6px;border-top:1px dashed var(--line-strong)}
.rolenow.r-root{border-color:var(--accent-line);background:var(--accent-soft)}
.rolenow.r-root b{color:var(--accent)}
.rolenow.r-admin b{color:var(--accent-ink)}
.rolepick{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.rolebtn{text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);display:flex;flex-direction:column;gap:3px;transition:all .15s}
.rolebtn:hover{border-color:var(--accent-line)}
.rolebtn.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)}
.rolebtn b{font-size:13.5px;color:var(--ink);font-weight:600}
.rolebtn.on b{color:var(--accent)}
.rolebtn span{font-size:11.5px;color:var(--ink-3);line-height:1.5}
@media(max-width:820px){
  .mechip{padding:4px 9px 4px 4px;gap:7px}
  .mechip i{width:24px;height:24px;font-size:12px}
  .mechip b{font-size:12px}
  .mechip em{font-size:10.5px}
  .pop-me{width:auto}
}

/* OnePage 外观：色块 chip */
.pophint{display:block;font-style:normal;font-weight:400;font-size:11px;color:var(--ink-3);
  line-height:1.5;margin-top:3px;letter-spacing:0}
.popnote{font-size:11.2px;color:var(--ink-3);line-height:1.65;background:var(--surface-2);
  border-radius:var(--r-sm);padding:8px 10px}
#popDesign{width:280px}
#popDesign .skinchips{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#popDesign .skinchip{width:100%;justify-content:flex-start}
.skinbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.skinlab{font-size:12.5px;color:var(--ink-3);font-weight:600;white-space:nowrap}
.skinchips{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.skinchip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 7px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:500;
  white-space:nowrap;transition:all .15s}
.skinchip:hover{border-color:var(--accent-line);color:var(--accent)}
.skinchip.on{border-color:var(--accent);color:var(--accent);font-weight:600;background:var(--accent-soft)}
.skinchip i{width:16px;height:16px;border-radius:5px;flex:none;border:1px solid rgba(20,32,60,.14)}
.skinchip.on i{box-shadow:0 0 0 2px var(--accent-soft)}
@media(max-width:820px){ .skinbar{width:100%} .skinchip{padding:5px 10px 5px 6px;font-size:12px} }

/* OnePage 外观选择器（旧版下拉，保留样式以兼容） */
.pskinlab{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);
  white-space:nowrap;font-weight:500}
.pskinlab select{padding:7px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font-size:13px}
.pskinlab select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
@media(max-width:820px){ .pskinlab{font-size:12px;gap:6px} .pskinlab select{padding:6px 8px;font-size:12.5px} }
/* ================= 管理员：改字换图 / 模版 ================= */
.edbar.edadm{background:var(--accent-soft);color:var(--ink-2)}
.edbar.edadm b{color:var(--accent)}
.aimgs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.aimgs>b{font-size:12.5px;color:var(--ink-3);font-weight:700;margin-right:2px}
.aimgs .akhint{font-size:12.5px;color:var(--ink-2);margin-right:auto}
.aimg{display:flex;align-items:center;gap:9px;padding:6px 10px 6px 6px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.aimg:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.aimg img{width:56px;height:32px;object-fit:cover;border-radius:4px;display:block;background:#0A1730}
.aimg span{font-size:12.5px;color:var(--ink-2);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aimg i{font-style:normal;font-size:11.5px;color:var(--accent);font-weight:600;
  background:var(--accent-soft);border-radius:var(--r-pill);padding:2px 9px}
.apick{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.apick-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line);
  background:var(--surface-2)}
.apick-h b{font-size:13.5px;color:var(--ink)}
.apick-h span{font-size:12px;color:var(--ink-3)}
.apick-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px;padding:14px;
  max-height:320px;overflow-y:auto}
.apick-g button{position:relative;border-radius:var(--r-sm);overflow:hidden;border:2px solid transparent;
  background:#0A1730;aspect-ratio:16/10;transition:border-color .15s,transform .15s}
.apick-g button:hover{border-color:var(--accent);transform:scale(1.03)}
.apick-g button img{width:100%;height:100%;object-fit:cover;display:block}
.apick-g button span{position:absolute;left:0;right:0;bottom:0;font-size:10.5px;line-height:1.7;
  background:rgba(10,20,40,.68);color:#fff;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
@media(max-width:820px){
  .aimgs{gap:8px;padding:10px}
  .apick-g{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));max-height:240px}
}

/* 分享链接的第一帧：黑底放映台，不经过首页，也不走文档预览。
   标记由 <head> 里那段同步脚本打上。 */
html.is-shared,html.is-shared body{background:#07090D;overflow:hidden;overscroll-behavior:none;touch-action:none}
html.is-shared .app,html.is-shared .sharepdf-shell{display:none!important}
html.is-shared #viewHome{display:none!important}
html.is-shared #present.on,body.sharedview #present.on{display:flex}