/* 潘氏集团 AI 工作台 · 前台（首页、员工页、接入说明）：宣纸、墨、朱砂与水墨山水。后台只用 app.css，前台只用本文件，互不引用。
   不用渐层、毛玻璃、emoji。字体：数字 SD Display（Barlow Condensed Bold Italic 子集，OFL），标题 SD Serif（Noto Serif SC Black 子集，OFL）。 */
@font-face{font-family:"SD Display";src:url(fonts/sd-display.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"SD Serif";src:url(fonts/sd-serif.woff2) format("woff2");font-weight:900;font-display:swap}
:root{
  --ink:#0a0a0c;--bg:#111113;--panel:#19191c;--line:#26262b;--line-strong:#3a3a41;
  --fg:#f4f2ec;--fg2:#c8c5bd;--muted:#8a8890;
  --red:#e8313c;--red-hover:#ff4552;--red-press:#b81f29;--red-ink:#2a0d10;--red-line:#5a1a20;
  --gold:#f2b134;--gold-ink:#2a1e08;
  --ok:#3ccf7a;--ok-ink:#0f2a1a;--warn:#f2b134;--warn-ink:#2a1e08;--err:#e8313c;--err-ink:#2a0d10;--info:#8a8890;
  --r-sm:4px;--r:6px;--r-pill:999px;
  --sans:"PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --mono:"JetBrains Mono","SF Mono",Consolas,monospace;
  --display:"SD Display",var(--mono);
  --cjk-display:"SD Serif",var(--sans);
  /* 旧名保留给页面脚本里的行内样式 */
  --bg2:#0e0e10;--card:var(--panel);--card2:#1f1f24;--line2:var(--line-strong);--red2:var(--red-hover);
  --redbg:var(--red-ink);--goldbg:var(--gold-ink);--okbg:var(--ok-ink);--rs:var(--r)
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--red);color:#fff}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.hide{display:none!important}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
tr.click:focus-visible,.tabs a:focus-visible,.seg a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- seal & brand ---------- */
.seal{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);background:var(--red);color:#fff;font:900 17px/1 var(--sans);flex:none}
.seal.lg{width:56px;height:56px;font-size:30px;border-radius:var(--r)}

.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand b{font:900 16px/1.15 var(--cjk-display);letter-spacing:.04em;white-space:nowrap}
.brand small{display:block;color:var(--muted);font-size:11px;letter-spacing:.16em;margin-top:2px}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:208px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px;padding:18px 0 12px;background:var(--bg2);border-right:1px solid var(--line)}
.side .brand{padding:0 18px 16px;border-bottom:1px solid var(--line);margin-bottom:10px}
.side a.nav{position:relative;display:flex;align-items:center;gap:12px;padding:9px 18px;color:var(--fg2);font-weight:600}
.side a.nav .no{font:italic 700 15px/1 var(--display);color:var(--muted);width:20px}
.side a.nav .ic{display:none}
.side a.nav:hover{color:var(--fg)}
.side a.nav.on{color:var(--red)}
.side a.nav.on::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--red)}
.side a.nav.on .no{color:var(--red)}
.side a.nav .n{margin-left:auto;min-width:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--red);color:#fff;font:700 11px/18px var(--mono);text-align:center}
.side .grow{flex:1}
.side .who{padding:10px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;display:flex;justify-content:space-between;align-items:center}
.side .who a:hover{color:var(--red)}
.side a.more-btn{display:none}
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
main.view{padding:28px clamp(16px,3vw,40px) 90px;min-width:0;max-width:1400px}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 22px}
.ph h1{margin:0;font:900 26px/1.15 var(--cjk-display);letter-spacing:.02em}
.ph h1 small{font:500 13px var(--sans);color:var(--muted);margin-left:10px;letter-spacing:0}
.ph .acts{display:flex;gap:8px;flex-wrap:wrap}
.sec{border-top:1px solid var(--line);padding-top:16px;margin-top:26px}
.sec>h2,.sec-h{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;font-size:17px;font-weight:800}
.sec-h .no,.sec>h2 .no{font:italic 700 20px/1 var(--display);color:var(--gold)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 18px;border:0;border-radius:var(--r-pill);background:var(--red);color:#fff;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .12s}
.btn:hover{background:var(--red-hover)}
.btn:active{background:var(--red-press);transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--fg);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--fg2)}
.btn.ghost:active{background:var(--panel)}
.btn.danger{background:transparent;color:var(--red);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--red-line)}
.btn.danger:hover{background:var(--red);color:#fff;box-shadow:none}
.modal .acts .btn.danger{background:var(--red);color:#fff;box-shadow:none}
.btn.gold{background:transparent;color:var(--gold);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--gold)}
.btn.gold:hover{background:var(--gold);color:#1a1200}
.btn.sm{height:28px;padding:0 11px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.is-loading{pointer-events:none;color:transparent}
.btn.is-loading::after{content:"";position:absolute;width:12px;height:12px;border:2px solid #fff;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn.ghost.is-loading::after,.btn.danger.is-loading::after{border-color:var(--fg2);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
.btnrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* ---------- form ---------- */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{
  width:100%;height:38px;padding:0 12px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r);outline:0;transition:border-color .12s}
input:hover,select:hover,textarea:hover{border-color:var(--fg2)}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-ink)}
input:disabled,select:disabled,textarea:disabled{background:var(--ink);color:var(--muted)}
textarea{height:auto;min-height:110px;padding:10px 12px;font-family:var(--mono);font-size:13px;resize:vertical}
label.f{display:block;margin:0 0 14px}
label.f>span{display:block;margin:0 0 6px;color:var(--fg2);font-size:12.5px;font-weight:600}
label.f>em{display:block;margin:5px 0 0;color:var(--muted);font-size:12px;font-style:normal}
label.f:has(em.bad) input,label.f:has(em.bad) select,label.f:has(em.bad) textarea{border-color:var(--err)}
.f em.bad,.bad-msg{color:#ff7d86!important;font-style:normal}
.bad-msg{min-height:22px;margin:10px 0 0}
.warn-t{color:var(--gold)!important;font-style:normal}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--fg2)}
.check input{accent-color:var(--red);width:16px;height:16px}

/* ---------- panels / kpis ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card h3{margin:0 0 14px;font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px}
.card h3 .more{margin-left:auto;font-size:12px;font-weight:500;color:var(--muted)}
.card h3 a.more:hover{color:var(--red)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 14px}
.kpi{display:block;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;position:relative;overflow:hidden}
a.kpi:hover{border-color:var(--line-strong)}
.kpi span{display:block;color:var(--muted);font-size:12px;letter-spacing:.06em}
.kpi b{display:block;margin-top:8px;font:italic 700 34px/1 var(--display);letter-spacing:-.02em}
.kpi b small{font:600 15px var(--sans);color:var(--muted);letter-spacing:0}
.kpi small{color:var(--muted);font-size:12px}
.kpi.hot,.poster{background:var(--red-ink);border-color:var(--red-line)}
.kpi.hot::before,.poster::before{content:"";position:absolute;left:16px;top:0;width:28px;height:2px;background:var(--gold)}
.kpi.hot b{color:#fff}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{color:var(--muted);font-weight:600;font-size:12px;text-align:left;padding:10px 12px;white-space:nowrap;letter-spacing:.04em}
td{height:44px;padding:8px 12px;border-top:1px solid var(--line);vertical-align:middle}
td:first-child{font-weight:600}
tr.click{cursor:pointer}
tr.click:hover td{background:#1f1f24}
tr.err td:first-child{box-shadow:inset 2px 0 var(--red)}
td .sub{display:block;color:var(--muted);font-size:12px;font-weight:400}
td.num,th.num{text-align:right}
td.num{font:italic 700 15px var(--display);letter-spacing:-.01em}
td.num .sub{font:400 12px var(--sans)}
tr.grp td{background:var(--card2);font-weight:800;cursor:pointer;user-select:none}
tr.grp td .sub{display:inline;margin-left:10px;font-weight:500}

/* ---------- pills / tags / chips ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:12px;font-weight:600;white-space:nowrap;background:var(--panel);color:var(--fg2);box-shadow:inset 0 0 0 1px var(--line)}
.pill.ok{background:var(--ok-ink);color:var(--ok);box-shadow:none}
.pill.warn{background:var(--warn-ink);color:var(--gold);box-shadow:none}
.pill.err{background:var(--err-ink);color:#ff6b75;box-shadow:none}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.plain::before{display:none}
.tag{display:inline-block;padding:1px 7px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:11.5px;color:var(--fg2);margin:0 4px 4px 0}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:transparent;color:var(--fg2);font-size:12px;cursor:pointer;user-select:none}
.chip:hover{border-color:var(--fg2)}
.chip.on{background:var(--red-ink);border-color:var(--red);color:#ff7d86}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:1px}
.dot.err{background:var(--red)}
h3.sec{font-size:13px;color:var(--muted);margin:0 0 8px;font-weight:700}

/* ---------- quota bar ---------- */
.qbar{position:relative;height:6px;border-radius:3px;background:var(--line);overflow:hidden;min-width:90px}
.qbar i{position:absolute;left:0;top:0;bottom:0;background:var(--ok);border-radius:3px}
.qbar.mid i{background:var(--gold)}
.qbar.hi i{background:var(--red)}
.qtext{font:italic 700 13px var(--display);color:var(--fg2);margin-top:4px;display:block;letter-spacing:.01em}

/* ---------- ranking (红果榜单式) ---------- */
.rank{list-style:none;margin:0;padding:0}
.rank li{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.rank li:first-child{border-top:0}
.rank .no{width:32px;font:italic 700 28px/1 var(--display);color:var(--muted);text-align:center}
.rank li:nth-child(1) .no{color:var(--red)}
.rank li:nth-child(2) .no{color:var(--gold)}
.rank li:nth-child(3) .no{color:var(--fg2)}
.rank .nm{flex:1;min-width:0}
.rank .nm b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank .nm a:hover b{color:var(--red)}
.rank .nm small{color:var(--muted)}
.rank .val{font:italic 700 17px var(--display)}

/* ---------- pool (上游账号卡) ---------- */
.pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.acct{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;cursor:pointer;transition:border-color .15s}
.acct:hover{border-color:var(--line-strong)}
.acct .t{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px}
.acct .t .pill{margin-left:auto}
.acct .big{font:italic 700 38px/1 var(--display);margin:14px 0 4px}
.acct .big small{font:600 14px var(--sans);color:var(--muted)}
.dots{display:flex;flex-wrap:wrap;gap:3px;margin:10px 0 0}
.dots i{width:10px;height:10px;border-radius:2px;background:var(--ok)}
.dots i.c{background:var(--gold)}
.dots i.d{background:var(--red)}
.dots i.x{background:var(--line-strong)}
.acct .meta{display:flex;gap:12px;color:var(--muted);font-size:12px;margin-top:10px;flex-wrap:wrap}

/* ---------- chart ---------- */
.bars{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:6px}
.bars i{flex:1;min-width:3px;background:var(--fg2);border-radius:2px 2px 0 0;position:relative;opacity:.55}
.bars i.e{background:var(--red);opacity:.95}
.bars i:hover{opacity:1}
.bars-x{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:6px;font-family:var(--mono)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:0 0 16px;overflow-x:auto}
.tabs a{padding:10px 0;color:var(--muted);font-weight:700;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap;cursor:pointer}
.tabs a:hover{color:var(--fg2)}
.tabs a{flex-shrink:0}
.tabs a.on{color:var(--fg);border-bottom-color:var(--red)}

/* ---------- drawer / modal / toast ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;display:flex;justify-content:flex-end}
.drawer{width:min(720px,100%);height:100%;overflow:auto;background:var(--bg);border-left:1px solid var(--line);padding:0 22px 22px;animation:slide .18s ease-out}
@keyframes slide{from{transform:translateX(24px);opacity:0}}
.drawer-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;margin:0 -22px 16px;padding:16px 22px;background:var(--bg);border-bottom:1px solid var(--line)}
.drawer-h h2{margin:0;font-size:20px;font-weight:900;flex:1;min-width:0}
.modal-wrap{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:50;display:grid;place-items:center;padding:16px}
.modal{width:min(520px,100%);background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r);padding:22px;max-height:90vh;overflow:auto}
.modal h2{margin:0 0 6px;font-size:19px;font-weight:900}
.modal .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.secret{display:flex;gap:8px;align-items:center;background:var(--ink);border:1px dashed var(--gold);border-radius:var(--r);padding:12px;margin:12px 0;font:600 13px var(--mono);word-break:break-all;color:var(--gold)}
.secret span{flex:1}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);opacity:0;z-index:60;padding:11px 18px 11px 16px;border-radius:var(--r);background:var(--ink);border:1px solid var(--line-strong);border-left:3px solid var(--ok);color:var(--fg);font-weight:600;transition:.2s;pointer-events:none;max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{border-left-color:var(--red)}
.empty{padding:40px 16px;text-align:center;color:var(--muted);font-size:13px}
.empty::before{content:"";display:block;width:28px;height:28px;margin:0 auto 12px;background:url(ink/seal-sm.webp) center/contain no-repeat;opacity:.85}
.empty b{display:block;color:var(--fg);font-size:16px;font-weight:700;margin-bottom:6px}
.empty .btn{margin-top:14px}
.skel{padding:6px 0}
.skel i{display:block;height:14px;margin:12px 0;border-radius:var(--r-sm);background:var(--line)}
.skel i:nth-child(2){width:78%}
.skel i:nth-child(3){width:56%}
.note{padding:12px 14px;border-radius:var(--r);background:var(--gold-ink);border-left:3px solid var(--gold);color:#f6d48c;font-size:13px;margin:0 0 14px}
.note.red{background:var(--red-ink);border-left-color:var(--red);color:#ffb0b5}
.note a{text-decoration:underline}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
code.inline{padding:1px 6px;border-radius:var(--r-sm);background:var(--card2);font:12.5px var(--mono)}
pre.code{margin:0;padding:14px;border-radius:var(--r);background:var(--ink);border:1px solid var(--line);font:12.5px/1.6 var(--mono);overflow:auto;color:#e8e6e1}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.filters select,.filters input[type=search],.filters input[type=text]{width:auto;min-width:130px;height:34px}
.keyrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.keyrow:first-child{border-top:0}
.keyrow.click{cursor:pointer}
.keyrow.click:hover{background:#1f1f24}
.keyblock{padding:8px 0;border-bottom:1px solid var(--line)}
.keyblock:last-child{border-bottom:0}
.keyblock .keyrow{border-bottom:0;padding-bottom:4px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.step{display:flex;gap:12px;border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--bg)}
.step b.no{font:italic 700 30px/1 var(--display);color:var(--gold)}
.step p{margin:4px 0 10px;font-size:12.5px}
.step.done{opacity:.55}
.step.done b.no{color:var(--ok)}
.totp{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.qr svg{display:block;width:176px;height:176px;background:#fff;border-radius:var(--r)}
.sheet-nav a{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);font-weight:600}

/* ---------- login ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-art{position:relative;overflow:hidden;background:var(--red-ink);display:flex;flex-direction:column;justify-content:flex-end;padding:48px;border-right:1px solid var(--red-line)}
.auth-art::after{content:"";position:absolute;left:48px;top:48px;width:28px;height:2px;background:var(--gold)}
.auth-art h1{position:relative;margin:16px 0 8px;font:900 44px/1.15 var(--cjk-display);letter-spacing:.04em}
.auth-art p{position:relative;color:var(--fg2);max-width:420px}
.auth-form{display:grid;place-items:center;padding:24px}
.auth-form form{width:min(360px,100%)}
.auth-form h2{font-size:22px;font-weight:900;margin:0 0 4px}
.auth-form .help{margin-top:18px;font-size:12.5px;color:var(--muted)}

/* ---------- employee page ---------- */
.me-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px clamp(16px,3vw,40px);border-bottom:1px solid var(--line);background:var(--bg2);position:sticky;top:0;z-index:5}
.quota-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin:0 0 14px}
.quota-big{position:relative;background:var(--red-ink);border:1px solid var(--red-line);border-radius:var(--r);padding:22px}
.quota-big::before{content:"";position:absolute;left:22px;top:0;width:28px;height:2px;background:var(--gold)}
.quota-big .lbl{color:#ffb0b5;font-size:13px;font-weight:700;letter-spacing:.08em}
.quota-big .amt{font:italic 700 56px/1 var(--display);margin:12px 0 6px;letter-spacing:-.02em}
.quota-big .amt small{font:600 16px var(--sans);color:var(--fg2);letter-spacing:0}
.quota-big .qbar{height:10px;border-radius:5px;margin-top:14px;background:rgba(255,255,255,.1)}
.minis{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px}
.minis div span{display:block;color:var(--muted);font-size:12px}
.minis div b{font:italic 700 22px/1.1 var(--display)}
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden}
.seg a{padding:4px 10px;font-size:12px;color:var(--muted);cursor:pointer}
.seg a.on{background:var(--red-ink);color:#ff7d86}

/* ---------- docs ---------- */
.doc{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;max-width:1180px;margin:0 auto;padding:28px clamp(16px,3vw,40px) 80px}
.toc{position:sticky;top:76px;align-self:start;display:flex;flex-direction:column;gap:2px;font-size:13px}
.toc a{padding:5px 0 5px 12px;color:var(--muted);border-left:2px solid var(--line)}
.toc a:hover{color:var(--fg)}
.toc a.on{color:var(--red);border-left-color:var(--red)}
.doc h1{margin:0 0 8px;font:900 32px/1.15 var(--cjk-display)}
.doc section{border-top:1px solid var(--line);padding-top:18px;margin-top:30px}
.doc section h2{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;font-size:19px;font-weight:800}
.doc section h2 .no{font:italic 700 22px/1 var(--display);color:var(--gold)}
.doc p,.doc li{color:var(--fg2)}
.doc .langs{display:flex;gap:6px;margin:12px 0 8px}
.doc pre.code{margin:0 0 6px}
.doc table td:first-child{font-family:var(--mono);font-weight:600;white-space:nowrap}

@media (max-width:980px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2,.g3,.quota-hero{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doc{grid-template-columns:1fr}
  .toc{display:none}
}
@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;flex-direction:row;justify-content:space-around;padding:4px 2px;z-index:30;border-right:0;border-top:1px solid var(--line)}
  .side .brand,.side .grow,.side .who{display:none}
  .side a.nav{flex-direction:column;gap:2px;padding:6px 8px;font-size:11px;flex:none}
  .side a.nav .no{display:none}
  .side a.nav .ic{display:block;width:19px;height:19px}
  .side a.nav.on::before{left:8px;right:8px;top:auto;bottom:-4px;width:auto;height:2px}
  .side a.nav[data-x]{display:none}
  .side a.more-btn{display:flex;position:relative}
  .side a.nav .n{position:absolute;top:0;right:0;margin:0}
  .auth{grid-template-columns:1fr}
  .auth-art{min-height:200px;padding:28px}
  .auth-art::after{left:28px;top:28px}
  .auth-art h1{font-size:30px}
  .row2,.row3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  main.view{padding:18px 14px 90px}
  .drawer{padding:0 14px 18px}
  .drawer-h{margin:0 -14px 14px;padding:12px 14px}
  .quota-big .amt{font-size:44px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ================= 前台水墨 ================= */
:root{
  --ink:#1c1b18;--bg:#f3eee2;--panel:#fbf8f0;--line:#e4dbc8;--line-strong:#cbbd9f;
  --fg:#1d1b17;--fg2:#4b463d;--muted:#736b5e;
  --red:#b3202a;--red-hover:#c92a34;--red-press:#8c161e;--red-ink:#f6e5df;--red-line:#e3b5ab;
  --gold:#94661a;--gold-ink:#f3e9d2;--ok:#2e8a52;--ok-ink:#e0efe4;--warn:#94661a;--warn-ink:#f3e9d2;--err:#b3202a;--err-ink:#f6e5df;
  --bg2:#eee7d7;--card2:#f0e9db;--card:var(--panel);
  --brush:"SD Serif","Songti SC","STSong","Noto Serif SC","SimSun",serif;
}
/* 宣纸纹：一层极淡的噪点 */
body{background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.brand .seal,.auth-art .seal,.me-top .seal,.home .seal{background:url(ink/seal-sm.webp) center/contain no-repeat;color:transparent;font-size:0;border-radius:0}
tr.click:hover td,.keyrow.click:hover{background:var(--card2)}
.pill.err,.chip.on{color:var(--red)}
.note{color:#6b4c12}
.note.red{color:#7d1a22}
.f em.bad,.bad-msg{color:var(--red)!important}
.kpi.hot b{color:var(--red)}
.scrim{background:rgba(40,32,22,.28)}
.modal-wrap{background:rgba(40,32,22,.34)}
.modal,.drawer{box-shadow:0 20px 60px rgba(60,40,20,.18)}
.empty::before{background-image:url(ink/seal-sm.webp);opacity:.75}
.me-top{background:rgba(243,238,226,.9)}
.btn.ghost{background:rgba(251,248,240,.6)}
.toast{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.quota-big{background:var(--panel);border-color:var(--line-strong);overflow:hidden}
.quota-big::before{left:0;right:0;top:auto;bottom:0;width:auto;height:120px;background:url(ink/mtn-far.webp) center top/cover no-repeat;opacity:.5}
.quota-big>*{position:relative}
.quota-big .lbl{color:var(--red)}
.quota-big .qbar{background:var(--line)}
.secret{background:var(--fg);color:#f2d38e}
.seg a.on{color:var(--red)}

/* ---------- 水墨场景（首页、员工登录共用） ---------- */
.ink-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ink-scene i{position:absolute;display:block;background-repeat:no-repeat}
.ink-scene .far,.ink-scene .mid,.ink-scene .near{left:-6%;right:-6%;bottom:0;height:100%;background-size:cover;background-position:center bottom;
  transform:translate3d(calc(var(--mx, 0) * var(--k, 0px)), 0, 0);transition:transform .8s ease-out;opacity:0;animation:rise 1.8s ease-out forwards}
.ink-scene .far{background-image:url(ink/mtn-far.webp);--k:-10px;top:-2%;bottom:auto;background-position:center top;animation-delay:.1s}
.ink-scene .mid{background-image:url(ink/mtn-mid.webp);--k:-22px;height:96%;animation-delay:.35s}
.ink-scene .near{background-image:url(ink/mtn-near.webp);--k:-40px;height:104%;bottom:-4%;animation-delay:.6s}
.ink-scene .mist{left:0;width:300%;height:42%;background:url(ink/mist.webp) repeat-x left center/auto 100%;opacity:0;animation:fadein 2.4s 1s forwards,drift 140s linear infinite}
.ink-scene .mist.m1{top:30%}
.ink-scene .mist.m2{top:54%;height:32%;animation:fadein 2.4s 1.4s forwards,drift 90s linear infinite reverse}
.ink-scene .bamboo{top:-2%;right:-2%;width:min(34vw,380px);aspect-ratio:633/650;background:url(ink/bamboo.webp) right top/contain no-repeat;transform-origin:100% 0;opacity:0;
  animation:fadein 1.6s 1.2s forwards,sway 7s 1.2s ease-in-out infinite alternate}
@keyframes rise{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes fadein{to{opacity:1}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
@keyframes sway{from{rotate:-1.5deg}to{rotate:2deg}}

/* 「潘」：先晕开一团墨，再一笔写出字，圆相慢转，最后盖印 */
.pan-art{position:relative;width:min(40vw,440px);aspect-ratio:1}
.pan-art i,.pan-art img{position:absolute;display:block;pointer-events:none;user-select:none}
.pan-art .splash{inset:6%;background:url(ink/splash.webp) center/contain no-repeat;opacity:0;animation:bleed 2.2s .2s cubic-bezier(.2,.7,.2,1) forwards}
.pan-art .enso{inset:-4%;background:url(ink/enso.webp) center/contain no-repeat;opacity:0;animation:fadein 1.4s 1.6s forwards,spin 160s 1.6s linear infinite}
.pan-art .brush{left:12%;top:12%;width:76%;height:76%;background:url(ink/pan-brush.webp) center/contain no-repeat;clip-path:inset(0 100% 0 0);animation:write 1.6s .8s cubic-bezier(.6,0,.3,1) forwards}
.pan-art .stamp{right:4%;bottom:6%;width:22%;aspect-ratio:1;background:url(ink/seal.webp) center/contain no-repeat;opacity:0;animation:stamp .5s 2.5s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes bleed{0%{opacity:0;transform:scale(.25);filter:blur(10px)}60%{opacity:.45}100%{opacity:.14;transform:scale(1);filter:blur(0)}}
@keyframes write{to{clip-path:inset(0 0 0 0)}}
@keyframes spin{to{rotate:360deg}}
@keyframes stamp{0%{opacity:0;transform:scale(2.4) rotate(-18deg)}70%{opacity:1;transform:scale(.92) rotate(-6deg)}100%{opacity:1;transform:scale(1) rotate(-6deg)}}
.stroke-u{display:block;height:40px;width:min(420px,90%);margin:6px 0 0 -6px;background:url(ink/stroke.webp) left center/contain no-repeat;clip-path:inset(0 100% 0 0);animation:write 1.1s 1.9s ease-out forwards;opacity:.85}

/* ---------- 首页 ---------- */
.home{position:relative;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.home header,.home footer{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(16px,4vw,48px)}
.home footer{color:var(--muted);font-size:12px;letter-spacing:.2em}
.home .hero{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(20px,5vw,72px);padding:0 clamp(16px,7vw,110px) 18vh}
.home h1{margin:0;font:900 clamp(36px,5.6vw,72px)/1.12 var(--brush);letter-spacing:.06em;opacity:0;animation:rise 1.2s 1.2s ease-out forwards}
.home .go{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;opacity:0;animation:rise 1s 2.1s ease-out forwards}
.home .go .btn{height:46px;padding:0 30px;font-size:15px;letter-spacing:.1em}
.home .ink-scene{z-index:1}

/* ---------- 员工登录 ---------- */
.auth{position:relative;overflow:hidden}
.auth-art{position:relative;overflow:hidden;background:transparent;border-right:1px solid var(--line);display:grid;place-content:center;justify-items:center;padding:40px}
.auth-art::before,.auth-art::after{display:none}
.auth-art .pan-art{z-index:2;width:min(30vw,320px)}
.auth-art h1{position:relative;z-index:2;margin:18px 0 0;font:900 28px/1.25 var(--brush);letter-spacing:.14em;text-align:center;opacity:0;animation:rise 1s 1.4s forwards}
.auth-form{position:relative;z-index:2;background:rgba(251,248,240,.7)}
.auth-form h2{font:900 26px/1.2 var(--brush);letter-spacing:.12em;margin:0 0 22px}

/* ---------- 接入说明 ---------- */
.doc h1{font-family:var(--brush)}
.doc h1::after{content:"";display:block;height:18px;width:220px;margin-top:6px;background:url(ink/stroke.webp) left center/contain no-repeat;opacity:.8}

@media (max-width:760px){
  .home .hero{grid-template-columns:1fr;justify-items:center;text-align:center;padding-bottom:24vh}
  .home .go{justify-content:center}
  .home .stroke-u{margin:10px auto 0}
  .pan-art{width:min(64vw,300px)}
  .auth-art{min-height:auto;padding:28px 16px 8px;border-right:0}
  .auth-art .pan-art{width:170px}
  .ink-scene .bamboo{width:42vw;top:7%}
}
@media (prefers-reduced-motion:reduce){
  .ink-scene i,.pan-art i,.pan-art img,.home h1,.home .go,.auth-art h1,.stroke-u{animation:none!important;opacity:1;clip-path:none}
  .pan-art .splash{opacity:.14}
}



/* ================= 前台水墨 · 登入後（员工页「昼 · 宣纸」） =================
   墨的三种状态：未干（载入：湿笔骨架、绕圈墨鲤）、成形（进场：一笔画圆、数字写出、名次盖印）、定格（常驻只剩雾、梅、水纹）。 */
:root{--ink-2:#3a3732;--wash:#d9d0ba;--amb:.5;--ease-out:cubic-bezier(.2,.7,.2,1);--ease-stamp:cubic-bezier(.3,1.6,.5,1);--ease-move:cubic-bezier(.2,.8,.2,1)}
.ink-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ink-bg i{position:absolute;display:block;background-repeat:no-repeat}
.ink-bg .far{left:-4%;right:-4%;bottom:-2%;height:38vh;background-image:url(ink/mtn-far.webp);background-position:center bottom;background-size:cover;opacity:.32;
  transform:translate3d(calc(var(--mx, 0) * -8px), calc(var(--sy, 0) * -0.06px), 0);animation:fx-rise .6s var(--ease-out) both}
.ink-bg .mid{left:-4%;right:-4%;bottom:-6%;height:30vh;background-image:url(ink/mtn-mid.webp);background-position:center bottom;background-size:cover;opacity:.22;
  transform:translate3d(calc(var(--mx, 0) * -16px), calc(var(--sy, 0) * -0.12px), 0);animation:fx-rise .6s .1s var(--ease-out) both}
.ink-bg .mist{left:0;bottom:18vh;height:14vh;width:300%;background:url(ink/mist.webp) repeat-x left center/auto 100%;opacity:.35;animation:fx-drift 150s linear infinite}
.ink-bg .plum{left:-40px;bottom:-20px;width:min(30vw,340px);aspect-ratio:1;background:url(ink/plum.webp) left bottom/contain no-repeat;opacity:var(--amb);
  transform-origin:0 100%;animation:fx-sway 9s ease-in-out infinite alternate}
#root>.me-top{z-index:5}
#root>main.view{position:relative;z-index:1}

/* 额度：一笔画圆的环、写出来的笔刷进度条、墨池水纹 */
.quota-big.has-ring{padding-right:200px}
.ink-ring{position:absolute;top:22px;right:24px;width:150px;height:150px}
.ink-ring i{position:absolute;inset:0;display:block}
.ink-ring .ghost{background:var(--wash);-webkit-mask:url(ink/pool-ring.webp) center/contain no-repeat;mask:url(ink/pool-ring.webp) center/contain no-repeat}
.ink-ring .fill{display:none}
@supports (mask-composite:intersect) or (-webkit-mask-composite:source-in){
  .ink-ring .fill{display:block;background:var(--ink);will-change:mask-image;
    -webkit-mask-image:url(ink/pool-ring.webp),conic-gradient(#000 calc(var(--p, 0) * 1%),transparent 0);-webkit-mask-size:contain,100% 100%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-composite:source-in;
    mask-image:url(ink/pool-ring.webp),conic-gradient(#000 calc(var(--p, 0) * 1%),transparent 0);mask-size:contain,100% 100%;mask-repeat:no-repeat;mask-position:center;mask-composite:intersect}
}
.ink-ring.mid .fill{background:var(--gold)}
.ink-ring.hi .fill{background:var(--red)}
.ink-ring.unl .fill{display:none}
.ink-ring .pct{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:italic 700 34px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.ink-ring .pct em{font-style:inherit;white-space:nowrap}
.ink-ring .pct small{font-size:18px;margin-left:1px}
.ink-ring .pct span{display:block;margin-top:4px;font:500 12px var(--sans);color:var(--muted);letter-spacing:.1em}
.quota-big .amt,.minis b{font-variant-numeric:tabular-nums}
.quota-big .qbar.ink-brush{height:14px;margin-top:16px;border-radius:0;background:transparent;overflow:visible}
.qbar.ink-brush::before{content:"";position:absolute;inset:0;background:var(--wash);-webkit-mask:url(ink/stroke.webp) left center/100% 100% no-repeat;mask:url(ink/stroke.webp) left center/100% 100% no-repeat}
.qbar.ink-brush i{border-radius:0;-webkit-mask:url(ink/stroke.webp) left center/100% 100% no-repeat;mask:url(ink/stroke.webp) left center/100% 100% no-repeat}
.fx-in .qbar.ink-brush i{animation:fx-write .7s .7s var(--ease-out) both}
.ink-wave{position:absolute;left:0;bottom:0;height:46px;width:300%;background:url(ink/wave.webp) repeat-x left bottom/auto 100%;opacity:.28;pointer-events:none;z-index:0;
  animation:fx-drift 90s linear infinite}
.quota-big::before{z-index:0}

/* 我的密钥：在用的那把，列首一笔朱砂 */
.keyblock{position:relative}
.keyblock.live::before{content:"";position:absolute;left:0;top:24px;width:16px;height:6px;background:var(--red);
  -webkit-mask:url(ink/stroke.webp) center/100% 100% no-repeat;mask:url(ink/stroke.webp) center/100% 100% no-repeat}
.keyblock.live .keyrow{padding-left:22px}

/* 分页：一条会滑动的朱砂笔刷墨线 */
.tabs{position:relative}
.tabs a.on{border-bottom-color:transparent}
.tabs-ink{position:absolute;left:0;bottom:0;width:40px;height:7px;background:var(--red);pointer-events:none;transform-origin:left;
  -webkit-mask:url(ink/stroke.webp) center/100% 100% no-repeat;mask:url(ink/stroke.webp) center/100% 100% no-repeat;
  transition:transform .26s var(--ease-move),opacity .2s}

/* 图表与榜单：墨从纸底长出，前三名是方印 */
.bars{height:140px}
.bars i{background:var(--ink-2);opacity:.7;transform-origin:bottom}
.bars i.e{background:var(--red);opacity:.9}
.bars::after{content:"";display:block}
.bars-x{position:relative;padding-top:8px}
.bars-x::before{content:"";position:absolute;left:0;right:0;top:-2px;height:8px;opacity:.5;background:var(--ink-2);
  -webkit-mask:url(ink/stroke.webp) left center/100% 100% no-repeat;mask:url(ink/stroke.webp) left center/100% 100% no-repeat}
.fx-in .bars i{animation:fx-grow .48s var(--ease-move) both;animation-delay:calc(var(--i, 0) * 12ms + 300ms)}
.rank li:nth-child(-n+3) .no{display:grid;place-items:center;width:26px;height:26px;margin:0 3px;border-radius:3px;font-size:16px;color:#fff;rotate:-4deg;transition:rotate .12s}
.rank li:nth-child(1) .no{background:var(--red)}
.rank li:nth-child(2) .no{background:var(--gold)}
.rank li:nth-child(3) .no{background:var(--ink);color:var(--bg)}
.rank li:hover .no{rotate:-10deg}
.fx-in .rank li:nth-child(-n+3) .no{animation:fx-stamp .38s var(--ease-stamp) both;animation-delay:calc(var(--i, 0) * 50ms + 500ms)}

/* 表格：不加纹理；悬停时首格左缘一笔朱砂 */
tr.click>td:first-child{position:relative;overflow:hidden}
tr.click>td:first-child::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--red);transform:scaleY(0);transition:transform .16s var(--ease-out)}
tr.click:hover>td:first-child::before{transform:scaleY(1)}
tr[data-xd] td{background:var(--card2);box-shadow:inset 2px 0 var(--wash)}

/* 进场 */
.fx-in .quota-big,.fx-in .card,.fx-in .kpi,.fx-in .keyblock,.fx-in .acct,.fx-in .rank li,.fx-in .step,.fx-in .note,.fx-in .tbl-wrap,.fx-in .filters{
  animation:fx-rise .5s var(--ease-out) both;animation-delay:calc(var(--i, 0) * 60ms + 80ms)}
.fx-in .keyblock{animation-duration:.4s;animation-delay:calc(var(--i, 0) * 60ms + 380ms)}
.fx-in tbody tr.fx-row{animation:fx-fade .3s ease-out both;animation-delay:calc(var(--i, 0) * 18ms + 200ms)}
.fx-in .qbar:not(.ink-brush) i{transform-origin:left;animation:fx-grow-x .6s var(--ease-out) both;animation-delay:.3s}
.fx-in .me-top .seal{animation:fx-stamp .42s var(--ease-stamp) both}

/* 点击墨晕、盖印 */
.btn,.tabs a,.chip,.acct,.seg a,.keyrow.click{position:relative;overflow:hidden}
.fx-drop{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:currentColor;pointer-events:none;animation:fx-drop .56s var(--ease-out) forwards}
.fx-stamped{position:relative;overflow:visible}
.fx-stampmark{position:absolute;right:-6px;top:-10px;width:28px;height:28px;background:url(ink/seal-ok.webp) center/contain no-repeat;pointer-events:none;z-index:3;
  animation:fx-stamp .42s var(--ease-stamp) both}
.fx-stampmark.no{background-image:url(ink/seal-no.webp)}
.toast{padding-left:50px}
.toast .fx-seal{position:absolute;left:12px;top:50%;width:28px;height:28px;margin-top:-14px;background:url(ink/seal-ok.webp) center/contain no-repeat;rotate:-6deg}
.toast.bad .fx-seal{background-image:url(ink/seal-no.webp)}
.toast.on .fx-seal{animation:fx-stamp .42s var(--ease-stamp) both}
.toast span{display:inline-block}
.toast.bad.on span{animation:fx-shake .24s .12s}

/* 载入、空、错误 */
.skel i{height:16px;border-radius:0;background:var(--wash);-webkit-mask:url(ink/stroke.webp) left center/100% 100% no-repeat;mask:url(ink/stroke.webp) left center/100% 100% no-repeat;
  animation:fx-wet 1.4s ease-in-out infinite}
.skel i:nth-child(2){animation-delay:.2s}
.skel i:nth-child(3){animation-delay:.4s}
.skel.long::after{content:"";display:block;width:96px;height:96px;margin:18px auto 0;background:url(ink/koi.webp) center/contain no-repeat;opacity:.85;animation:fx-orbit 8s linear infinite}
.empty::before{width:88px;height:88px;background-image:url(ink/plum.webp);opacity:.4;margin-bottom:4px;animation:fx-fade .3s ease-out both}
.empty b::before{content:"";display:block;width:22px;height:22px;margin:0 auto 8px;background:url(ink/seal-sm.webp) center/contain no-repeat}
.note.red{position:relative;padding-left:44px;border-left:0;animation:fx-shake .24s}
.note.red::before{content:"";position:absolute;left:12px;top:50%;width:22px;height:22px;margin-top:-11px;background:var(--red);
  -webkit-mask:url(ink/dot-splash.webp) center/contain no-repeat;mask:url(ink/dot-splash.webp) center/contain no-repeat}
.btn.is-loading::after{border:0;border-radius:0;width:16px;height:16px;background:currentColor;color:#fff;
  -webkit-mask:url(ink/dot-splash.webp) center/contain no-repeat;mask:url(ink/dot-splash.webp) center/contain no-repeat}
.btn.ghost.is-loading::after,.btn.danger.is-loading::after{background:var(--fg2)}

/* 弹窗后方一团淡墨 */
.modal-wrap::before{content:"";position:fixed;left:50%;top:50%;width:70vmin;height:70vmin;margin:-35vmin 0 0 -35vmin;background:url(ink/splash.webp) center/contain no-repeat;
  opacity:.1;pointer-events:none;animation:fx-splash .32s var(--ease-out) both}
.modal{position:relative;animation:fx-pop .18s var(--ease-out) both}
.test-result{position:relative}

/* 常驻氛围：进场时、页面隐藏、闲置、离开视窗都暂停 */
html.fx-hold .amb,html.fx-paused .amb,html.fx-idle .amb,.off .amb,.amb.off{animation-play-state:paused}

@keyframes fx-rise{from{opacity:0;translate:0 16px}}
@keyframes fx-fade{from{opacity:0}}
@keyframes fx-grow{from{transform:scaleY(0)}}
@keyframes fx-grow-x{from{transform:scaleX(0)}}
@keyframes fx-write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fx-stamp{0%{opacity:0;transform:scale(2.2) rotate(-14deg)}70%{opacity:1;transform:scale(.94) rotate(-2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes fx-drift{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
@keyframes fx-sway{from{rotate:-1.2deg}to{rotate:1.6deg}}
@keyframes fx-wet{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes fx-orbit{to{transform:rotate(360deg)}}
@keyframes fx-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}50%{transform:translateX(2px)}75%{transform:translateX(-1px)}}
@keyframes fx-pop{from{opacity:0;transform:scale(.96)}}
@keyframes fx-splash{from{opacity:0;transform:scale(.7)}}
@keyframes fx-drop{from{transform:scale(0);opacity:.24}to{transform:scale(var(--s, 8));opacity:0}}

@media (max-width:760px){
  :root{--amb:.35}
  .ink-bg .plum{display:none}
  .ink-bg .far{height:22vh;opacity:.25}
  .ink-bg .mid{height:18vh;opacity:.18}
  .quota-big.has-ring{padding-right:22px}
  .ink-ring{top:18px;right:18px;width:96px;height:96px}
  .ink-ring .pct{font-size:24px}
  .ink-ring .pct span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .amb,.ink-bg i,[class*="fx-"],.fx-in *,.toast .fx-seal,.toast span,.skel i,.skel.long::after,.modal,.modal-wrap::before,.note.red,.empty::before{animation:none!important;transition:none!important}
}

/* ===================== v2 · 活墨（INK-MOTION-V2；纸下一池水） ===================== */
:root{--ease-cover:cubic-bezier(.6,0,.4,1)}
.fx2-fluid{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;transition:opacity 2s}
html.fx-idle .fx2-fluid{opacity:0!important}
.auth-form{background:rgba(251,248,240,.86)}
.tbl-wrap{background:var(--panel)}
/* 首页展卷：两片纸板带卷轴头向两边退开 */
.fx2-scroll{position:absolute;inset:0;z-index:5;display:flex;pointer-events:none}
.fx2-scroll i{position:relative;flex:1;background:var(--bg);transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
.fx2-scroll .roller{position:absolute;top:-2%;bottom:-2%;width:30px;background:url(ink2/roller.webp) center/100% 100% no-repeat}
.fx2-scroll .l .roller{right:-15px}
.fx2-scroll .r .roller{left:-15px;transform:scaleX(-1)}
.fx2-scroll.go .l{transform:translateX(-100%)}
.fx2-scroll.go .r{transform:translateX(100%)}
/* 远雁、小舟：匀速横越 */
.fx2-birds{position:absolute;top:11%;left:0;width:min(460px,38vw);aspect-ratio:1200/316;background:url(ink2/bird-flock.webp) center/contain no-repeat;opacity:.5;pointer-events:none;animation:fx2-fly 240s linear infinite;animation-delay:-30s}
.fx2-boat{position:absolute;bottom:17%;left:0;width:min(200px,16vw);aspect-ratio:600/235;background:url(ink2/boat.webp) center/contain no-repeat;opacity:.45;pointer-events:none;animation:fx2-row 420s linear infinite;animation-delay:-120s}
@keyframes fx2-fly{from{transform:translateX(-45vw) translateY(0)}50%{transform:translateX(30vw) translateY(-14px)}to{transform:translateX(110vw) translateY(4px)}}
@keyframes fx2-row{from{transform:translateX(-25vw)}to{transform:translateX(110vw)}}
/* 墨晕换场／镜头切 */
.fx2-wipe{position:fixed;z-index:70;pointer-events:none;overflow:hidden}
.fx2-wipe i{position:absolute;display:block;background:var(--bg);-webkit-mask:url(ink2/blot-wipe.webp) center/contain no-repeat;mask:url(ink2/blot-wipe.webp) center/contain no-repeat;transform:scale(.08);will-change:transform}
.fx2-wipe.ink i{background:var(--ink)}
html.fx2-cut-in #root,html.fx2-cut-in body>.home{animation:fx-fade .3s both}
/* 飞沫、滴墨、数字一收、待处理印 */
.fx2-fleck{position:fixed;z-index:80;pointer-events:none;background:currentColor;-webkit-mask:url(ink2/flecks-4.webp) 0 0/400% 100% no-repeat;mask:url(ink2/flecks-4.webp) 0 0/400% 100% no-repeat}
.fx2-fleck.ink{color:var(--ink)}.fx2-fleck.red{color:var(--red)}
.empty{position:relative}
.fx2-drip{position:absolute;left:50%;top:4px;width:10px;height:30px;margin-left:-5px;background:var(--ink);-webkit-mask:url(ink2/drip.webp) center/contain no-repeat;mask:url(ink2/drip.webp) center/contain no-repeat;pointer-events:none;opacity:.8}
.fx2-settle{display:inline-block;animation:fx2-settle .16s ease-out}
@keyframes fx2-settle{from{transform:scale(1.04)}}
.pill.warn::before{content:"";display:inline-block;width:11px;height:11px;margin-right:4px;vertical-align:-1px;background:currentColor;-webkit-mask:url(ink2/seal-wait.webp) center/contain no-repeat;mask:url(ink2/seal-wait.webp) center/contain no-repeat}
/* 输入框焦点：底下一笔朱砂 */
label.f{position:relative}
label.f::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--red);-webkit-mask:url(ink/stroke.webp) left center/100% 100% no-repeat;mask:url(ink/stroke.webp) left center/100% 100% no-repeat;transform:scaleX(0);transform-origin:left;transition:transform .12s;pointer-events:none}
label.f:focus-within::after{transform:scaleX(1);transition:transform .22s var(--ease-out)}
/* toast：手撕纸条 */
.toast{-webkit-mask:url(ink2/paper-strip.webp) center/100% 100% no-repeat;mask:url(ink2/paper-strip.webp) center/100% 100% no-repeat;border-radius:0;padding-top:14px;padding-bottom:14px}
/* 载入：单鲤沿 ∞ 游 */
.skel.long::after{width:72px;height:56px;background:url(ink2/koi-solo.webp) center/contain no-repeat;offset-path:path("M0,0 C40,-30 80,30 120,0 S200,-30 240,0");offset-rotate:auto;animation:fx2-swim 6s linear infinite}
@keyframes fx2-swim{from{offset-distance:0%}to{offset-distance:100%}}
/* 静态降级：已干的墨池 */
html.fx2-static .ink-bg::after,html.fx2-static .home::after{content:"";position:absolute;right:0;bottom:0;width:62vw;height:39vw;background:url(ink2/pool-static.webp) right bottom/contain no-repeat;opacity:.18;pointer-events:none}
@media (max-width:760px){
  .fx2-birds,.fx2-boat{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fx2-fluid,.fx2-wipe,.fx2-fleck,.fx2-drip,.fx2-scroll,.fx2-birds,.fx2-boat{display:none!important}
  .fx2-settle,label.f::after{animation:none!important;transition:none!important}
}

/* ===================== v3 · 骊山晚照与游龙 ===================== */
/* 晚照：天边一层极淡的暖光，落日沉在远山后面 */
.ink-scene .ls-glow,.ink-bg .ls-glow{inset:0;background:radial-gradient(ellipse 70% 55% at 64% 34%,rgba(201,110,62,.17),rgba(201,110,62,.06) 42%,transparent 70%);opacity:0;animation:fadein 3s .6s ease-out forwards}
.ink-scene .ls-sun{left:58%;top:16%;width:min(12vw,168px);aspect-ratio:1;background:url(ink2/sun-glow.webp) center/contain no-repeat;opacity:0;
  transform:translate3d(calc(var(--mx, 0) * -4px), 0, 0);animation:ls-sunset 4.5s .9s ease-out forwards}
@keyframes ls-sunset{from{opacity:0;translate:0 46px}to{opacity:.8;translate:0 0}}
.ink-scene .ls-far{left:-8%;right:-8%;bottom:30%;height:52%;filter:opacity(.7);background:url(ink2/lishan-far.webp) center bottom/cover no-repeat;
  transform:translate3d(calc(var(--mx, 0) * -6px), 0, 0);transition:transform .8s ease-out;opacity:0;animation:rise 2.2s .05s ease-out forwards}
.ink-scene .ls-palace{left:6%;bottom:7%;width:min(36vw,500px);aspect-ratio:2/1;background:url(ink2/lishan-palace.webp) center bottom/contain no-repeat;
  transform:translate3d(calc(var(--mx, 0) * -28px), 0, 0);transition:transform .8s ease-out;opacity:0;animation:fadein 3s 1.6s ease-out forwards}
.ink-scene .ls-palace{filter:opacity(.75)}
/* 题字：竖排「骊山晚照」一方小印 */
.ls-title{position:absolute;right:max(4.5vw,22px);top:30%;z-index:3;display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:0;animation:rise 1.4s 2.9s ease-out forwards;pointer-events:none}
.ls-title b{writing-mode:vertical-rl;font:900 clamp(17px,1.7vw,25px)/1 var(--cjk-display);letter-spacing:.55em;color:var(--ink)}
.ls-title i{display:block;width:22px;height:22px;background:url(ink/seal-sm.webp) center/contain no-repeat}
/* 员工页：远处一抹晚照与宫阙 */
.ink-bg .ls-sun{right:14%;bottom:30vh;width:min(6vw,84px);aspect-ratio:1;background:url(ink2/sun-glow.webp) center/contain no-repeat;opacity:.24}
.ink-bg .ls-palace{left:4%;bottom:6vh;width:min(30vw,420px);aspect-ratio:2/1;background:url(ink2/lishan-palace.webp) center bottom/contain no-repeat;opacity:.32}
/* 游龙的画布：首页在中山与近山之间（从峰后冲出），员工页在背景层，飞过换页时暂时到最上层 */
.fx2-dragon{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.ink-bg .fx2-dragon{z-index:0}
.fx2-dragon.top{z-index:75!important}
@media (max-width:760px){
  .ls-title{display:none}
  .ink-scene .ls-palace{width:58vw;opacity:.6}
  .ink-bg .ls-palace,.ink-bg .ls-sun{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fx2-dragon{display:none!important}
  .ink-scene .ls-glow,.ink-scene .ls-sun,.ink-scene .ls-far,.ink-scene .ls-palace,.ls-title,.ink-bg .ls-glow{animation:none!important;opacity:1}
  .ink-scene .ls-sun{opacity:.8}
}

/* 分页切换：一笔朱砂从左扫到右 */
#pane,[data-pane]{position:relative}
.fx2-sweep{position:absolute;left:0;top:-6px;width:100%;height:22px;pointer-events:none;z-index:3;background:var(--red);-webkit-mask:url(ink/stroke.webp) center/100% 100% no-repeat;mask:url(ink/stroke.webp) center/100% 100% no-repeat;transform-origin:left center}
@media (prefers-reduced-motion:reduce){.fx2-sweep{display:none!important}}

/* 按钮：从按下处炸开一圈墨环 */
.fx2-burst{position:fixed;z-index:81;pointer-events:none;color:var(--ink);background:currentColor;-webkit-mask:url(ink/enso.webp) center/contain no-repeat;mask:url(ink/enso.webp) center/contain no-repeat}
.fx2-burst.red{color:var(--red)}
@media (prefers-reduced-motion:reduce){.fx2-burst{display:none!important}}

/* 首页入口：一笔浓墨上的书法字＋一方小印；接入说明只留右上角一个淡淡的文字入口 */
.home .doc-link{position:relative;color:var(--ink);font:600 14px/1 var(--sans);letter-spacing:.2em;text-decoration:none;padding:8px 2px;opacity:.72;transition:opacity .2s}
.home .doc-link::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-2px;height:6px;background:var(--ink);-webkit-mask:url(ink/stroke.webp) left center/100% 100% no-repeat;mask:url(ink/stroke.webp) left center/100% 100% no-repeat;transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease-out)}
.home .doc-link:hover,.home .doc-link:focus-visible{opacity:1;outline:none}
.home .doc-link:hover::after,.home .doc-link:focus-visible::after{transform:scaleX(1)}
.home .go{margin-top:40px}
.home .go .btn.enter{height:62px;padding:0 56px;background:none;border-radius:0;box-shadow:none;overflow:visible;color:#f6f0e2;font:900 20px/1 var(--cjk-display);letter-spacing:.5em;text-indent:.5em;isolation:isolate;transition:none}
.home .go .btn.enter::before{content:"";position:absolute;inset:6px -38px 4px -26px;z-index:-1;background:linear-gradient(90deg,#141210,#26231f 55%,#141210);animation:enter-write .75s 2.15s cubic-bezier(.6,0,.2,1) both;-webkit-mask:url(ink2/brush-bar.webp) center/100% 100% no-repeat;mask:url(ink2/brush-bar.webp) center/100% 100% no-repeat;transition:transform .45s var(--ease-out)}
/* 首页只留一方印：大字「潘」右下角那方（落款钤印的位置）；按钮、题字、页眉都不再盖印 */
.home .go .btn.enter::after{content:none}
@keyframes enter-stamp{0%{opacity:0;transform:scale(2.2) rotate(-6deg)}70%{opacity:1;transform:scale(.94) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(9deg)}}
@keyframes enter-write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.home .go .btn.enter:hover,.home .go .btn.enter:active{background:none;transform:none}
.home .go .btn.enter:hover::before{transform:scaleX(1.06)}
.home .go .btn.enter:active::before{transform:scaleX(.97)}
.home .go .btn.enter:focus-visible{outline:2px solid var(--red);outline-offset:9px}
@media (max-width:760px){.home .go .btn.enter{height:56px;padding:0 42px;font-size:18px}}
@media (prefers-reduced-motion:reduce){.home .go .btn.enter::before,.home .go .btn.enter::after{animation:none!important}}

/* 可用素材：被我隐藏的那几行淡一些 */
tr.muted-row td{opacity:.55}

/* 我的作品 */
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.work{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.work-media{position:relative;aspect-ratio:16/9;background:#e9e3d4;cursor:pointer;overflow:hidden}
.work-media video,.work-media img{width:100%;height:100%;object-fit:cover;display:block}
.work-wait{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:var(--muted);font-size:13px;padding:10px;cursor:default}
.work-wait small{display:block;font-size:11px;margin-top:4px}
.work-pin{position:absolute;right:8px;top:8px;padding:2px 8px;border-radius:var(--r-pill);background:var(--red);color:#fff;font-size:11px;font-style:normal}
.work-meta{padding:10px 12px 2px;display:flex;flex-direction:column;gap:2px;font-size:12px}
.work-prompt{margin:4px 0 0;color:var(--fg2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}
.work .btnrow{padding:8px 12px 12px;margin-top:auto}
.work-player{display:block;width:min(960px,86vw);max-height:72vh;background:#000;border-radius:var(--r)}

/* 创作 */
.create{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.cf{padding:16px 20px 0;position:relative}
.cf-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.cf-row.top{align-items:flex-start}
.cf-l{flex:0 0 56px;color:var(--fg2);font-size:13px;font-weight:600;letter-spacing:.08em}
.cf-row.top .cf-l{padding-top:7px}
.cf-row select,.cf-row input[type=number]{max-width:300px}
.cf-prompt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.cf-prompt textarea{font-family:inherit;font-size:14px;line-height:1.75;min-height:132px}
.cf-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cf-tools select{height:30px;font-size:12px;width:auto;max-width:240px}
.cf-count{margin-left:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.cf-hint{display:block;color:var(--muted);font-size:12px;line-height:1.55}
.create .seg{flex-wrap:wrap}
.create .seg a{padding:6px 13px;font-size:13px}
.cf-refs{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cf-ref{display:flex;align-items:center;gap:8px;padding:5px 4px 5px 5px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);max-width:270px}
.cf-ref img,.cf-ref video,.cf-ic{width:44px;height:44px;border-radius:6px;object-fit:cover;flex:0 0 44px;background:#e9e3d4}
.cf-ic{display:grid;place-items:center;font-style:normal;font-weight:700;font-size:15px;color:var(--fg2)}
.cf-rn{min-width:0;display:flex;flex-direction:column;gap:3px}
.cf-rn b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.cf-rn small{font-size:11px;color:var(--muted)}
.cf-rn select{height:26px;font-size:12px;padding:0 6px;width:auto}
.cf-x{border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:3px 7px;border-radius:6px}
.cf-x:hover,.cf-x:focus-visible{color:var(--red);background:var(--red-ink)}
.cf-adv{border-bottom:1px dashed var(--line)}
.cf-adv summary{cursor:pointer;color:var(--fg2);font-size:13px;padding:10px 0}
.cf-adv .cf-row{border-bottom:0;padding-top:0;flex-wrap:wrap}
.cf-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:14px;margin:0 -20px;padding:14px 20px;background:linear-gradient(to top,var(--panel) 72%,rgba(255,255,255,0));border-radius:0 0 var(--r) var(--r);z-index:2}
.cf-est{flex:1;display:flex;flex-wrap:wrap;gap:3px 12px;font-size:12px;color:var(--fg2);align-items:baseline}
.cf-est b{font-size:15px;color:var(--fg)}
.cf-go{min-width:136px;height:44px;font-size:15px;letter-spacing:.32em}
.cside{position:sticky;top:14px}
.cside h3{margin-bottom:6px}
.rrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:12px}
.rrow:last-child{border-bottom:0}
.rrow.click{cursor:pointer}
.rrow.click:hover b{color:var(--red)}
.rth{flex:0 0 64px;height:40px;border-radius:6px;overflow:hidden;background:#e9e3d4;display:grid;place-items:center;font-style:normal;color:var(--red);font-weight:700}
.rth img,.rth video{width:100%;height:100%;object-fit:cover;display:block}
.rrow>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rrow b{font-size:12px}
.rrow small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow.bad b{color:var(--red)}
.rrow>.muted{white-space:nowrap}
.plist{display:flex;flex-direction:column;gap:6px;max-height:min(56vh,480px);overflow:auto}
.prow{display:flex;align-items:center;gap:10px;padding:6px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);text-align:left;cursor:pointer;font:inherit;color:inherit;width:100%}
.prow:hover,.prow:focus-visible{border-color:var(--red)}
.prow.off{opacity:.45;cursor:not-allowed}
.prow img,.prow video,.prow .cf-ic{width:58px;height:40px;object-fit:cover;border-radius:5px;flex:0 0 58px}
.prow span{display:flex;flex-direction:column;min-width:0}
.prow b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow small{font-size:11px;color:var(--muted)}
.work-brush{display:block;width:46px;height:46px;margin:0 auto 6px;background:url(ink2/cloud-swirl.webp) center/contain no-repeat;opacity:.75;animation:sd-swirl 7s linear infinite}
.rth .work-brush{width:30px;height:30px;margin:0}
@keyframes sd-swirl{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.work-brush{animation:none}}
.work.task .work-media{cursor:default}
.work-wait b{display:block;font-size:13px;color:var(--fg)}
.work.bad .work-wait b{color:var(--red)}
.work-params{color:var(--muted);font-size:11px}
.works-f{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.works-f input{width:200px;height:30px}
.tab-n{font-style:normal;margin-left:6px;padding:1px 7px;border-radius:var(--r-pill);background:var(--red);color:#fff;font-size:11px;font-weight:600;vertical-align:1px}
.pill.via{margin-left:6px;height:18px;font-size:11px;padding:0 7px}
.usage-tip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding:10px 14px;border:1px dashed var(--line-strong);border-radius:var(--r);font-size:13px;color:var(--fg2)}
.usage-tip span{flex:1;min-width:220px}
.net-off{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:9999;padding:8px 18px;border-radius:var(--r-pill);background:#2a2722;color:#f3eee2;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
@media (max-width:980px){.create{grid-template-columns:minmax(0,1fr)}.cside{position:static}}
@media (max-width:760px){
  .cf{padding:12px 14px 0}.cf-row{flex-wrap:wrap;gap:6px 10px}.cf-l{flex-basis:100%}.cf-row.top .cf-l{padding-top:0}
  .cf-row select,.cf-row input[type=number]{max-width:none;width:100%}.cf-bar{margin:0 -14px;padding:10px 14px}.cf-go{min-width:112px}
  .works{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.work .btnrow{padding:8px}.works-f input{width:100%}
}

.cf-batch{font-size:12px;color:var(--fg2);gap:4px}
.modal .acts.wrap{flex-wrap:wrap}
.modal:has(.work-player){width:min(980px,100%)}
.work-player{width:100%}

.cf-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}

/* ---- gw-r26 质感与流畅（UI-POLISH-R25.md） ---- */
.btn{transition:background .12s,color .12s,box-shadow .12s,transform .08s}
.btn:hover:not([disabled]){transform:translateY(-1px)}
.btn:active:not([disabled]){transform:translateY(1px)}
.chip,.seg a,.prow,.rank li{transition:background .12s,color .12s,border-color .12s,box-shadow .12s}
.tabs a{transition:color .15s;font-weight:600}
.tabs a.on{font-weight:700}
.modal-wrap.out{animation:fx-fade .12s ease-in reverse both}
.modal-wrap.out .modal{animation:fx-pop .12s ease-in reverse both}
.modal-wrap.out::before{display:none}
/* tables: one text face, aligned digits; the display face only where it should stand out */
td.num{font:600 13px var(--sans);font-variant-numeric:tabular-nums;letter-spacing:0}
.qtext{font:500 12px var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
td.mono,td .mono,.kv dd.mono{font-size:12px}
.filters .checks{display:flex;gap:14px;white-space:nowrap;align-items:center}
/* bars: empty days are blank paper */
.bars i.z{height:0!important;min-height:0}
.bars i.z::after{display:none}
/* native controls follow the theme */
input[type=checkbox],input[type=radio]{accent-color:var(--red);width:16px;height:16px}
select{-webkit-appearance:none;appearance:none;padding-right:32px;background-repeat:no-repeat;background-position:right 12px center}
/* tab switches: content fades in, it does not rise again */
.fx-tab.fx-in .card,.fx-tab.fx-in .tbl-wrap,.fx-tab.fx-in .filters,.fx-tab.fx-in .works,.fx-tab.fx-in .create,.fx-tab.fx-in .works-f,.fx-tab.fx-in .usage-tip,.fx-tab.fx-in .btnrow{animation:fx-fade .22s ease-out both!important;animation-delay:0s!important}
.ph h1 .t{position:relative;display:inline-block}
@media (prefers-reduced-motion:reduce){.btn:hover:not([disabled]),.btn:active:not([disabled]){transform:none}}
:root{color-scheme:light}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234b463d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* 创作 bar: a solid strip of paper, nothing shows through */
.cf-bar{background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -10px 18px -16px rgba(60,40,20,.28)}
/* work cards: one solid action */
.works{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.work-meta .model{font:600 12px var(--sans);color:var(--fg2)}
.btn.sm.quiet{box-shadow:none;background:transparent;color:var(--muted)}
.btn.sm.quiet:hover{color:var(--red);background:var(--red-ink)}
.btn.sm.ghost.tog.on{color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.work-player:focus-visible{outline:1px solid var(--line-strong);outline-offset:-1px}
/* media fade in like ink soaking through */
.work-media img,.work-media video,.rth img,.rth video,.prow img,.prow video,.cf-ref img,.cf-ref video{opacity:0;transition:opacity .25s ease-out}
.work-media img.in,.work-media video.in,.rth img.in,.rth video.in,.prow img.in,.prow video.in,.cf-ref img.in,.cf-ref video.in{opacity:1}
.rth.no{background:#ece6d8 url(ink/seal-no.webp) center/22px no-repeat;opacity:.85}
.cf-ic{color:var(--muted);font-size:13px;font-weight:600}
/* focus rings: ink or cinnabar, never a third colour */
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn.ghost:focus-visible,.chip:focus-visible,.seg a:focus-visible{outline-color:var(--red)}
/* key rows: actions as quiet text buttons */
.keyblock .btn.sm.ghost{box-shadow:none;background:transparent;color:var(--fg2);padding:0 8px}
.keyblock .btn.sm.ghost:hover{box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--fg)}
.keyblock .btn.sm.danger{box-shadow:none;padding:0 8px;background:transparent}
.keyblock .btn.sm.danger:hover{background:var(--red-ink);color:var(--red)}
.keyblock{padding:10px 0}
/* the quota card speaks ink, not green */
.quota-big .qbar.ink-brush i{background:var(--ink-2,#3b352c)}
.quota-big .qbar.ink-brush.mid i{background:var(--gold)}
.quota-big .qbar.ink-brush.hi i{background:var(--red)}
/* contrast and the smallest text */
.pill.ok{color:#1f6b3e}
.work-params,.bars-x,.brand small,.tag,.rrow small{font-size:12px}
.ink-bg .ls-sun{display:none}
.home .doc-link{opacity:.88;text-shadow:0 0 6px var(--bg),0 0 14px var(--bg),0 0 22px var(--bg)}
.works-f .muted{flex-basis:100%;order:2;margin-top:4px}
.works-f .chip{height:30px}
.works-f input{width:220px}
.card{padding:20px}
@media (max-width:760px){
  .cf-est span:nth-child(2){display:none}
  .create .seg{border:0;gap:6px;overflow:visible}
  .create .seg a{border:1px solid var(--line-strong);border-radius:var(--r)}
  .create .seg a.on{border-color:var(--red)}
  .tabs{scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .tabs::-webkit-scrollbar{display:none}
  .card{padding:16px}
}
@media (max-width:480px){.works{grid-template-columns:1fr}}

/* ==== gw-r27 水墨 v3：生成的墨形当遮罩，颜色跟主题走 ==== */
.t3{position:fixed;z-index:72;pointer-events:none;overflow:hidden;contain:strict}
.t3 div{position:absolute}
.t3 .blot{background:var(--t3-ink);-webkit-mask:url(ink3/bloom-a.webp) center/contain no-repeat;mask:url(ink3/bloom-a.webp) center/contain no-repeat;will-change:transform,opacity}
.t3 .blot.b{-webkit-mask-image:url(ink3/bloom-b.webp);mask-image:url(ink3/bloom-b.webp)}
.t3 .blot.ring{background:var(--t3-ring,var(--red))}
.t3 .blot.wash{background:var(--t3-paper)}
.t3 .full{inset:0;background:var(--t3-full)}
.t3 .paper,.t3 .veil{inset:0;background:var(--t3-paper)}
.t3-sweep .rail{will-change:transform}
.t3-sweep .edge{top:0;bottom:0;width:var(--e);background:var(--t3-edge);-webkit-mask:url(ink3/sweep-v.webp) center/100% 100% no-repeat;mask:url(ink3/sweep-v.webp) center/100% 100% no-repeat}
.t3-sweep .edge.lead{right:calc(var(--e) * -.6)}
.t3-sweep .edge.tail{left:calc(var(--e) * -.6);transform:scaleX(-1)}
.t3-scroll .half{top:0;bottom:0;width:51%;background:var(--t3-paper);will-change:transform}
.t3-scroll .half.l{left:0}
.t3-scroll .half.r{right:0}
/* 卷轴：border-image 只拉长中间木杆，两端铜头保持原比例 */
.t3-scroll .half::after{content:"";position:absolute;top:-1%;bottom:-1%;--rw:clamp(22px,2.6vw,40px);width:var(--rw);box-sizing:border-box;
  border:solid transparent;border-width:calc(var(--rw) * 1.48) 0 calc(var(--rw) * 1.4);border-image:url(ink3/roller.webp) 124 0 118 fill stretch;filter:drop-shadow(0 4px 10px rgba(0,0,0,.28))}
.t3-scroll .half.l::after{right:calc(var(--rw) * -.5)}
.t3-scroll .half.r::after{left:calc(var(--rw) * -.5)}
.t3-mist .fog{inset:0;background:var(--t3-fog)}
.t3-mist .band{left:0;background:url(ink3/mist-a.webp) left center/50% 100% repeat-x;will-change:transform,opacity}
.t3-mist .band.b{background-image:url(ink3/mist-b.webp)}
.t3-seal .seal{background:url(ink3/seal-zhun.webp) center/contain no-repeat;will-change:transform,opacity}
/* 彩蛋：丹顶鹤 */
.crane{position:fixed;z-index:66;pointer-events:none;background:url(ink3/crane-a.webp) center/contain no-repeat;animation:crane-flap .46s steps(1) infinite}
@keyframes crane-flap{50%{background-image:url(ink3/crane-b.webp)}}
/* 盖印用新的「准」印 */
.fx-stampmark{background-image:url(ink3/seal-zhun.webp)}
/* 弹窗背后的墨花：随弹窗绽开 */
.modal-wrap::before{background:var(--t3-ink);-webkit-mask:url(ink3/bloom-a.webp) center/contain no-repeat;mask:url(ink3/bloom-a.webp) center/contain no-repeat;opacity:.07;animation:t3-pop .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes t3-pop{from{transform:scale(.3) rotate(-24deg);opacity:0}}
/* 按钮：生成的笔刷（九宫格遮罩），主按钮一笔朱砂，次按钮一圈毛笔框 */
@supports (-webkit-mask-box-image: url("x") 1 fill) {
  .btn:not(.enter){background:transparent!important;box-shadow:none!important;border-radius:0;isolation:isolate}
  .btn:not(.enter)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--red);
    -webkit-mask-box-image:url(ink3/btn-ink.webp) 22 120 22 60 fill / 8px 30px 8px 16px stretch;
    transition:background .14s,transform .22s cubic-bezier(.2,.8,.2,1),opacity .14s}
  .btn:not(.enter):hover::before{background:var(--red-hover);transform:scaleX(1.04)}
  .btn:not(.enter):active::before{transform:scaleX(.98) scaleY(.92)}
  .btn.sm::before{-webkit-mask-box-image-width:6px 22px 6px 12px}
  .btn.ghost::before,.btn.danger::before,.btn.gold::before,.btn.quiet::before{background:var(--line-strong);
    -webkit-mask-box-image:url(ink3/btn-frame.webp) 40 / 7px 9px stretch}
  .btn.ghost:hover::before{background:var(--fg2);transform:none}
  .btn.danger::before{background:var(--red)}
  .btn.gold::before{background:var(--gold)}
  .btn.quiet::before,.keyblock .btn.sm.ghost::before,.keyblock .btn.sm.danger::before{opacity:0}
  .btn.quiet:hover::before,.keyblock .btn.sm.ghost:hover::before,.keyblock .btn.sm.danger:hover::before{opacity:1}
  .btn.tog.on::before{background:var(--red)}
  .modal .acts .btn.danger::before,.btn.gold:hover::before{-webkit-mask-box-image:url(ink3/btn-ink.webp) 22 120 22 60 fill / 8px 30px 8px 16px stretch}
  .modal .acts .btn.danger::before{background:var(--red)}
  .btn[disabled]::before{opacity:.45}
  .chip.on,.seg a.on{background:transparent!important;isolation:isolate}
  .chip.on::before,.seg a.on::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--red-ink);
    -webkit-mask-box-image:url(ink3/btn-ink.webp) 22 120 22 60 fill / 6px 18px 6px 10px stretch}
}
@media (prefers-reduced-motion:reduce){.t3,.crane{display:none!important}.modal-wrap::before{animation:none!important}}
:root{--t3-ink:#15120f;--t3-full:#15120f;--t3-paper:#f1ebdd;--t3-fog:#ece6d8;--t3-edge:#15120f}
/* 空状态：各自一幅小画 */
.empty.ink-stone::before{width:150px;height:108px;background-image:url(ink3/empty-inkstone.webp);opacity:.62}
.empty.lotus::before{width:150px;height:108px;background-image:url(ink3/empty-lotus.webp);opacity:.58}
/* 创作卡右上一朵淡祥云；作品卡悬停时出现一圈毛笔框 */
.cf::after{content:"";position:absolute;right:16px;top:10px;width:150px;height:66px;background:url(ink3/xiangyun.webp) center/contain no-repeat;opacity:.13;pointer-events:none}
@supports (-webkit-mask-box-image: url("x") 1 fill) {
  .work{position:relative}
  .work::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--t3-ink);-webkit-mask-box-image:url(ink3/btn-frame.webp) 40 / 9px 12px stretch;opacity:0;transition:opacity .25s}
  .work:hover::after{opacity:.45}
}

/* ==== gw-r31 团队接入：我的密钥（一位组员一把，各自的上限、模型、到期日） ==== */
input[type=date]{width:100%;height:38px;padding:0 12px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r);outline:0;transition:border-color .12s}
div.f{margin:0 0 14px}
div.f>span{display:block;margin:0 0 6px;color:var(--fg2);font-size:12.5px;font-weight:600}
div.f>em{display:block;margin:5px 0 0;color:var(--muted);font-size:12px;font-style:normal}
.kmodels{display:flex;flex-wrap:wrap;gap:6px 18px;max-height:170px;overflow:auto;padding:9px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel)}
.kmodels .check{font-size:13px}
.keys-bar{margin-bottom:12px}
.keys-bar input[type=search]{width:240px;height:34px;margin-left:auto}
.keys-list{padding-top:8px;padding-bottom:8px}
.kmeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding:0 0 4px;font-size:12px;color:var(--muted)}
.keyblock.live .kmeta{padding-left:22px}
.kmeta b{color:var(--fg2);font-weight:600;font-variant-numeric:tabular-nums}
.kmeta .kq{display:flex;align-items:center;gap:10px;flex:0 0 360px}
.kmeta .kq .qbar{flex:0 0 140px;min-width:0}
.kmeta .kq .qbar.none{visibility:hidden}
.kmeta .qbar i{background:var(--ink-2,#3b352c)}
.kmeta .qbar.mid i{background:var(--gold)}
.kmeta .qbar.hi i{background:var(--red)}
.keys-mini .keyblock{padding:4px 0}
.keys-mini .keyrow{gap:10px;padding:8px 0}
.keys-mini .keyrow b{max-width:11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc section h3{margin:24px 0 8px;font-size:15px;font-weight:800;color:var(--fg)}
.doc section h3:first-of-type{margin-top:14px}
.doc ol li,.doc ul li{margin:3px 0}
.doc section,.doc section h3[id]{scroll-margin-top:84px}
.doc dl.faq{margin:0}
.doc dl.faq dt{margin:14px 0 0;color:var(--fg);font-weight:700}
.doc dl.faq dd{margin:3px 0 0;color:var(--fg2)}
/* 接入说明在手机上：内容栏不被最长的一行代码撑宽（代码块自己横向卷动） */
@media (max-width:980px){.doc{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .keys-bar input[type=search]{width:100%;margin-left:0}
  .kmeta .kq{flex-basis:100%}
  .kmeta .kq .qbar{flex:1 1 auto}
  .kmeta .kq .qbar.none{display:none}
  .keyblock .keyrow>.btnrow{margin-left:0!important;width:100%}
}

/* 员工登录页：客服卡（gw-r32c）——宣纸卡、朱砂圆印、金线内框；Telegram 显示 @帐号，新窗口打开 */
.auth-support{position:relative;display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px 14px 12px 12px;border:1px solid var(--line-strong);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,253,246,.96),rgba(244,236,219,.96));color:var(--fg);text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 22px -16px rgba(70,45,10,.55);transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s}
.auth-support::before{content:"";position:absolute;inset:3px;border:1px solid rgba(148,102,26,.30);border-radius:calc(var(--r) - 2px);pointer-events:none}
.auth-support::after{content:"";position:absolute;left:14px;right:14px;top:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--red) 18%,var(--red) 82%,transparent);opacity:.55}
.auth-support:hover{transform:translateY(-1px);border-color:var(--gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 12px 26px -16px rgba(70,45,10,.65)}
.auth-support:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.auth-support[hidden]{display:none}
.auth-support .sup-ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 35% 30%,#d2414a,var(--red) 55%,#7f1219);
  box-shadow:0 0 0 3px rgba(179,32,42,.12),inset 0 -2px 4px rgba(0,0,0,.18);transform:rotate(-6deg)}
.auth-support .sup-ic svg{width:21px;height:21px;transform:rotate(6deg) translateX(-1px)}
.auth-support .sup-t{min-width:0}
.auth-support .sup-t b{display:block;font:900 15px/1.3 var(--brush);letter-spacing:.16em}
.auth-support .sup-t small{display:block;margin-top:2px;font-size:12px;color:var(--muted);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-support .sup-go{margin-left:auto;flex:none;font-style:normal;font-size:12.5px;color:var(--red);letter-spacing:.08em;white-space:nowrap}
.auth-support:hover .sup-go{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.auth-support{transition:none}.auth-support:hover{transform:none}}

/* 员工登录（gw-r32e，学 jp.ashp.tw）：山水铺满整页，表单是浮在山水上的半透明宣纸卡；顶上一道朱红线，右上角小字站名 */
.auth .auth-art{position:static;overflow:visible;border-right:0}
html .auth>.ink-scene{right:0;bottom:0}/* fx/season.css 原本只铺左半（right:47.619%）、窄屏只铺上半（bottom:50%） */
.auth .auth-form{background:transparent!important}
.auth .auth-form form{position:relative;width:min(400px,100%);padding:30px 28px 24px;background:rgba(251,248,240,.74);border:1px solid var(--line-strong);border-radius:6px;
  box-shadow:0 18px 50px rgba(60,40,20,.12);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:sd-card-rise 1s .5s ease-out both}
.auth .auth-form form::before{content:"";position:absolute;left:14px;right:14px;top:8px;height:3px;background:var(--red);opacity:.85;border-radius:2px}
.auth .auth-form h2{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:6px 0 20px}
.auth .auth-form h2 small{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.auth .auth-form input{height:46px;background:rgba(255,253,247,.9)}
@keyframes sd-card-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:760px){.auth .auth-form{padding:8px 16px 28px}.auth .auth-form form{padding:26px 20px 22px}}
@media(prefers-reduced-motion:reduce){.auth .auth-form form{animation:none}}