/* 拍拍云 · 手绘风格模板 v3
   布局：官网为多页面（首页精简 + 导航分页介绍）；用户中心 / 后台为固定侧栏工作台。
   规则：官网可以有动画插画；用户中心与后台没有任何进出场、闪动或位移动画。 */
:root{
  --bg:#0d0e21; --bg-2:#121433; --panel:#171a3c; --panel-2:#1f2250; --line:#272a58; --line-2:#383c78;
  --fg:#f2f3ff; --muted:#a8acdc; --dim:#7378b2;
  --sun:#ffd166; --sky:#74e0ff; --pink:#ff94be; --mint:#7bedb4; --violet:#b69cff; --red:#ff6b83; --orange:#ffb37a;
  --ink:#0a0b1c; --cloud:#eef4ff; --paper:#f6f1e4;
  --sun-a:rgba(255,209,102,.14); --sky-a:rgba(116,224,255,.13); --pink-a:rgba(255,148,190,.14); --mint-a:rgba(123,237,180,.13); --violet-a:rgba(182,156,255,.15); --red-a:rgba(255,107,131,.14);
  --f-display:"Fredoka","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --f-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --f-hand:"ZCOOL KuaiLe","Fredoka","Noto Sans SC",cursive;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  /* 手绘不规则圆角 */
  --hd-1:16px 20px 14px 22px / 20px 14px 22px 16px;
  --hd-2:22px 14px 20px 16px / 14px 22px 16px 20px;
  --hd-3:12px 16px 11px 18px / 16px 11px 18px 12px;
  --zoom:1;
  color-scheme:dark;
}
@media (min-width:1700px){:root{--zoom:1.08}}
@media (min-width:2000px){:root{--zoom:1.2}}
@media (min-width:2400px){:root{--zoom:1.35}}
@media (min-width:3000px){:root{--zoom:1.65}}
html{zoom:var(--zoom)}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font-family:var(--f-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.15;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
a{color:var(--sky);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px dashed var(--sky);outline-offset:3px;border-radius:10px}
::selection{background:var(--sun);color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:2px solid var(--bg)}
.mono,.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{white-space:nowrap}
.muted{color:var(--muted)} .dim{color:var(--dim)}
.hand{font-family:var(--f-hand);font-weight:400;letter-spacing:.02em}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sp{flex:1}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.eyebrow::before{content:"";width:16px;height:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6'%3E%3Cpath d='M1 4c2-3 4 1 6-1s4-2 8 0' fill='none' stroke='%2374e0ff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* 手绘下划线 */
.scribble{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9C40 3 70 12 105 7S170 3 197 8' fill='none' stroke='%23ff94be' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% .32em no-repeat;padding-bottom:.08em}
.hl{color:var(--sun)}

/* ---------- 手绘图标 ---------- */
.di{display:inline-block;vertical-align:middle;flex:0 0 auto;overflow:visible}
.di .blob{opacity:.3}
.di .s1 *,.di .s2 *{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.di .s1 .f,.di .s2 .f{fill:currentColor;stroke:none}
.di .s2{opacity:.32;transform:translate(.7px,.55px) rotate(.9deg);transform-origin:12px 12px}
.ibadge{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:var(--hd-2);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);color:var(--ink);flex:0 0 auto}
.ibadge .di .blob{display:none}
.ibadge.lg{width:58px;height:58px}

/* ---------- 按钮（手绘边框） ---------- */
.btn{--c:var(--panel-2);--t:var(--fg);--b:var(--line-2);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border:2px solid var(--b);border-radius:var(--hd-3);background:var(--c);color:var(--t);font-weight:700;font-size:14.5px;line-height:1.15;cursor:pointer;white-space:nowrap;box-shadow:3px 4px 0 var(--ink);text-decoration:none!important;transition:background-color .15s,border-color .15s,box-shadow .15s,filter .15s}
.btn .di .blob{display:none}
.btn:hover{filter:brightness(1.08)}
.btn.primary{--c:var(--sun);--t:var(--ink);--b:var(--ink)}
.btn.sky{--c:var(--sky);--t:var(--ink);--b:var(--ink)}
.btn.mint{--c:var(--mint);--t:var(--ink);--b:var(--ink)}
.btn.pink{--c:var(--pink);--t:var(--ink);--b:var(--ink)}
.btn.violet{--c:var(--violet);--t:var(--ink);--b:var(--ink)}
.btn.danger{--c:var(--red);--t:var(--ink);--b:var(--ink)}
.btn.ghost{--c:transparent;--b:var(--line-2);box-shadow:none;border-style:dashed}
.btn.ghost:hover{--b:var(--sky);background:var(--sky-a);filter:none}
.btn.sm{padding:6px 11px;font-size:13px;box-shadow:2px 3px 0 var(--ink);gap:6px}
.btn.sm.ghost{box-shadow:none}
.btn.lg{padding:12px 22px;font-size:16px}
.btn[disabled]{opacity:.45;pointer-events:none}
/* 官网按钮可以有轻微浮起；工作台按钮不位移 */
.site .btn:hover{transform:translate(-1px,-1px);box-shadow:4px 5px 0 var(--ink)}
.site .btn.ghost:hover{transform:none;box-shadow:none}
.site .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.link{background:none;border:0;padding:0;color:var(--sky);cursor:pointer;font-weight:600}

/* ---------- 卡片 / 标签 ---------- */
.card{background:var(--panel);border:2px solid var(--line-2);border-radius:var(--hd-1);padding:16px;min-width:0}
.card.ink{border-color:var(--ink);box-shadow:4px 5px 0 var(--ink)}
.card.flat{border-width:1px;border-color:var(--line)}
.card.paper{background:var(--paper);color:var(--ink);border-color:var(--ink);box-shadow:4px 5px 0 var(--ink)}
.tape{position:relative}
.tape::before{content:"";position:absolute;top:-11px;left:50%;width:84px;height:22px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,209,102,.55);border-left:2px dashed rgba(10,11,28,.25);border-right:2px dashed rgba(10,11,28,.25)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border:1.5px solid currentColor;border-radius:var(--hd-3);font-size:12.5px;font-weight:700;white-space:nowrap;color:var(--muted)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--mint);background:var(--mint-a)} .pill.warn{color:var(--sun);background:var(--sun-a)} .pill.bad{color:var(--red);background:var(--red-a)}
.pill.info{color:var(--sky);background:var(--sky-a)} .pill.pink{color:var(--pink);background:var(--pink-a)} .pill.violet{color:var(--violet);background:var(--violet-a)}
.tag{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:var(--hd-3);font-size:12.5px;font-weight:700;background:var(--panel-2);color:var(--muted);border:1px solid var(--line-2);white-space:nowrap}
.sticker{display:inline-block;padding:4px 12px;background:var(--pink);color:var(--ink);font:400 16px var(--f-hand);border:2px solid var(--ink);border-radius:var(--hd-3);box-shadow:2px 3px 0 var(--ink);transform:rotate(-3deg)}
.note{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:var(--hd-3);background:var(--sky-a);border:1.5px dashed rgba(116,224,255,.45);font-size:14px}
.note.warn{background:var(--sun-a);border-color:rgba(255,209,102,.45)}
.note .di{color:var(--sky);margin-top:1px} .note.warn .di{color:var(--sun)}

/* ---------- 表单 ---------- */
.field{display:grid;gap:6px;min-width:0}
.field>span{font-size:13.5px;color:var(--muted);font-weight:500}
.input,select.input,textarea.input{width:100%;background:var(--bg-2);border:2px solid var(--line-2);border-radius:var(--hd-3);padding:10px 12px;font-size:15px;color:var(--fg)}
.input:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 4px var(--sky-a)}
.input::placeholder{color:var(--dim)}
textarea.input{min-height:88px;resize:vertical;font-family:var(--f-mono);font-size:13px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.check{display:flex;gap:8px;align-items:center;font-size:14.5px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--sun)}
.seg{display:inline-flex;gap:4px;padding:4px;border:2px solid var(--line-2);border-radius:var(--hd-3);background:var(--bg-2);flex-wrap:wrap}
.seg button,.seg a{border:0;background:transparent;color:var(--muted);font-weight:700;font-size:14px;padding:7px 14px;border-radius:var(--hd-3);cursor:pointer;text-decoration:none}
.seg button,.seg a{display:inline-flex;align-items:center;gap:6px}
.seg [aria-pressed="true"] .di{color:var(--ink)}
.seg [aria-pressed="true"],.seg [aria-current="page"]{background:var(--sun);color:var(--ink)}
.switch{position:relative;width:46px;height:26px;display:inline-block;flex:0 0 auto}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:99px;background:var(--line-2);border:2px solid var(--ink)}
.switch i::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--cloud)}
.switch input:checked+i{background:var(--mint)} .switch input:checked+i::after{left:auto;right:2px}

/* ---------- 表格 ---------- */
.tblw{overflow-x:auto;border:2px solid var(--line);border-radius:var(--hd-1);background:var(--panel)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-weight:600;font-size:12.5px;color:var(--dim);letter-spacing:.04em;padding:10px 14px;border-bottom:2px dashed var(--line);white-space:nowrap;background:var(--bg-2)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:rgba(116,224,255,.03)}
.tbl .sub{font-size:12.5px;color:var(--dim);margin-top:2px}
.tbl td:first-child>b{white-space:nowrap}
.tbl .ops{display:flex;gap:6px;justify-content:flex-end}
.tbl .r{text-align:right}
.pos{color:var(--mint)} .neg{color:var(--pink)}
.empty{display:grid;justify-items:center;gap:6px;padding:18px 12px;color:var(--dim);text-align:center;font-size:13.5px}
.empty .di{color:var(--dim);opacity:.8}.empty .mascot{width:56px}
.meter{height:10px;border-radius:99px;background:var(--bg-2);border:1.5px solid var(--line-2);overflow:hidden}
.meter>i{display:block;height:100%;background:var(--mint);border-radius:99px}

/* ---------- 吉祥物（工作台内静态） ---------- */
.mascot{display:block;overflow:visible}
.m-outline *{fill:var(--ink);stroke:var(--ink);stroke-width:7}
.m-fill *{fill:var(--cloud)}
.m-ant line{stroke:var(--ink);stroke-width:3.5;stroke-linecap:round}
.m-ant circle{fill:var(--sun);stroke:var(--ink);stroke-width:3}
.m-tab{fill:var(--ink)} .m-d1{fill:var(--red)} .m-d2{fill:var(--sun)} .m-d3{fill:var(--mint)}
.m-eye{fill:var(--ink)} .m-glint{fill:var(--cloud)} .m-cheek{fill:var(--pink);opacity:.9}
.m-mouth{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round}
.m-hand{fill:var(--cloud);stroke:var(--ink);stroke-width:3.5}
.m-shadow{fill:var(--ink);opacity:.5}
.sleep .m-eye{transform:scaleY(.15);transform-box:fill-box;transform-origin:center}.sleep .m-glint{display:none}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none!important}
.brand .mascot{width:46px}
.brand b{font:700 25px/1 var(--f-display)} .brand b i{font-style:normal;color:var(--sun)}
.brand small{display:block;font:500 10px var(--f-mono);letter-spacing:.18em;color:var(--dim);margin-top:3px;text-transform:uppercase}

/* ---------- 动画插画（仅官网使用） ---------- */
.art{display:block;width:100%;height:auto;overflow:visible}
.art .ink-line{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.art .chalk{fill:none;stroke:var(--line-2);stroke-width:2;stroke-dasharray:6 9;stroke-linecap:round}
.art .note-t{font:400 20px var(--f-hand);fill:var(--sun)}
.art .tint-a .m-fill *{fill:#c9f7e0}.art .tint-b .m-fill *{fill:#ffd6e6}
.a-float{animation:a-float 5s ease-in-out infinite}
.a-float.d1{animation-delay:-1.6s}.a-float.d2{animation-delay:-3.2s}
.a-twinkle{transform-box:fill-box;transform-origin:center;animation:a-twinkle 3s ease-in-out infinite}
.a-twinkle.d1{animation-delay:-1s}.a-twinkle.d2{animation-delay:-2s}
.a-spin{transform-box:fill-box;transform-origin:center;animation:a-spin 18s linear infinite}
.a-draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);animation:a-draw 6s ease-in-out infinite}
.a-tap{transform-box:fill-box;transform-origin:center;animation:a-tap 2.6s ease-in-out infinite}
.a-ripple{transform-box:fill-box;transform-origin:center;animation:a-ripple 2.6s ease-out infinite}
.a-blink{transform-box:fill-box;transform-origin:center;animation:a-blink 5s infinite}
.a-wobble{transform-box:fill-box;transform-origin:50% 100%;animation:a-wobble 2.8s ease-in-out infinite}
.a-flip{transform-box:fill-box;transform-origin:50% 0;animation:a-flip 4s ease-in-out infinite}
.a-coin{offset-rotate:0deg;animation:a-coin 4s ease-in-out infinite}
@keyframes a-float{50%{transform:translateY(-10px)}}
@keyframes a-twinkle{0%,100%{transform:scale(.6);opacity:.5}50%{transform:scale(1.1);opacity:1}}
@keyframes a-spin{to{transform:rotate(360deg)}}
@keyframes a-draw{0%{stroke-dashoffset:var(--len,600)}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:calc(var(--len,600) * -1)}}
@keyframes a-tap{0%,100%{transform:translate(0,0)}45%{transform:translate(-6px,-6px)}55%{transform:translate(-4px,-4px) scale(.85)}}
@keyframes a-ripple{0%,40%{transform:scale(.2);opacity:0}50%{opacity:1}100%{transform:scale(1.6);opacity:0}}
@keyframes a-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes a-wobble{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes a-flip{0%,60%,100%{transform:scaleY(1)}75%{transform:scaleY(.08)}}

/* ---------- 官网 ---------- */
.site{min-height:calc(100vh / var(--zoom));display:flex;flex-direction:column;background-image:radial-gradient(1px 1px at 12% 18%,rgba(242,243,255,.5) 50%,transparent 51%),radial-gradient(1px 1px at 72% 9%,rgba(242,243,255,.4) 50%,transparent 51%),radial-gradient(1.5px 1.5px at 88% 42%,rgba(255,209,102,.5) 50%,transparent 51%),radial-gradient(1px 1px at 33% 64%,rgba(242,243,255,.3) 50%,transparent 51%),radial-gradient(900px 500px at 85% -10%,rgba(116,224,255,.08),transparent 70%),radial-gradient(700px 500px at -10% 30%,rgba(255,148,190,.06),transparent 70%);background-attachment:fixed}
.wrap{max-width:1200px;margin:0 auto;padding-inline:20px;width:100%}
.topnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(13,14,33,.86);backdrop-filter:blur(12px);border-bottom:2px dashed var(--line)}
.topnav .wrap{display:flex;align-items:center;gap:12px;height:64px}
.links{display:flex;gap:4px;margin-left:12px}
.links a{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-weight:600;padding:7px 11px;border-radius:var(--hd-3);font-size:15px;text-decoration:none}
.links a .di{color:var(--dim)}
.links a{white-space:nowrap}
@media (min-width:901px) and (max-width:1120px){.links{margin-left:4px;gap:2px}.links a{padding:7px 8px;font-size:14.5px}.links a .di{display:none}.topnav .brand small{display:none}}
.links a:hover{color:var(--fg);background:var(--panel)}
.links a[aria-current="page"]{color:var(--ink);background:var(--sun);border:2px solid var(--ink);box-shadow:2px 3px 0 var(--ink);padding:6px 10px}
.links a[aria-current="page"] .di{color:var(--ink)}
.burger{display:none}
.page-hero{padding-block:34px 18px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px;align-items:center}
.page-hero h1{font-size:clamp(30px,3.8vw,48px);line-height:1.12;margin-top:10px}
.page-hero .lead{color:var(--muted);font-size:clamp(15px,1.25vw,17px);margin-top:12px;max-width:34em}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
@media (max-width:640px){.hide-s{display:none!important}.topnav .brand small{display:none}}
section.block{padding-block:18px 34px}
.block-h{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.block-h h2{font-size:clamp(22px,2.4vw,30px);margin-top:4px}
.block-h p{color:var(--muted);max-width:40em}
.foot{margin-top:auto;border-top:2px dashed var(--line);padding-block:24px}
.foot .wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap;color:var(--dim);font-size:14px}
.foot a{color:var(--muted)}
.foot .foot-min{justify-content:center;gap:10px;font-size:13px}
.foot-min span{display:inline-flex;align-items:center;gap:6px}
.foot-dot{width:4px;height:4px;border-radius:50%;background:var(--line-2)}

/* 首页 */
.home-hero{padding-block:36px 18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
.home-hero h1{font-size:clamp(34px,4.4vw,56px);line-height:1.1;letter-spacing:-.02em;margin-top:12px}
.home-hero .lead{color:var(--muted);font-size:clamp(15px,1.3vw,17px);margin-top:14px;max-width:31em}
.mini-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.mini-stats div{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border:2px dashed var(--line-2);border-radius:var(--hd-2)}
.mini-stats b{display:block;font:600 17px/1.1 var(--f-display)} .mini-stats span{font-size:12.5px;color:var(--dim)}
.entries{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-block:6px 36px}
.entry{display:grid;gap:8px;align-content:start;padding:16px;border:2px solid var(--line-2);border-radius:var(--hd-1);background:var(--panel);color:var(--fg);text-decoration:none!important;transition:border-color .2s,transform .2s,box-shadow .2s}
.entry:hover{border-color:var(--ink);transform:translate(-2px,-2px) rotate(-.4deg);box-shadow:5px 6px 0 var(--ink)}
.entry h3{font-size:17px} .entry p{color:var(--muted);font-size:13.5px}
.home-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.hero-art{margin-right:-12px}
.news{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border:1.5px dashed var(--line-2);border-radius:99px;color:var(--muted);font-size:13px;font-weight:600;text-decoration:none!important}
.news:hover{border-color:var(--sun);color:var(--fg)}
.news-tag{background:var(--pink);color:var(--ink);border:2px solid var(--ink);border-radius:99px;padding:0 9px;font:400 13px/20px var(--f-hand)}
.stack-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:16px;font-size:12.5px}
.stack-row .tag{font-size:12px}
.entry-top{display:flex;align-items:center;justify-content:space-between}
.entry-top .ibadge{width:40px;height:40px}
.entry-no{font:600 13px var(--f-mono);color:var(--dim)}
.entry:hover .entry-no{color:var(--sun)}
.entry .go{display:inline-flex;align-items:center;gap:6px;font:400 17px var(--f-hand);color:var(--sun)}

/* 功能 / 步骤 */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.feat.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.feat .card{display:grid;gap:10px;align-content:start}
.feat h3{font-size:17px} .feat p{color:var(--muted);font-size:14px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:st}
.steps li{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:10px 12px;border:2px dashed var(--line-2);border-radius:var(--hd-2)}
.steps li::before{counter-increment:st;content:counter(st);display:grid;place-items:center;width:38px;height:38px;border-radius:var(--hd-3);background:var(--sky);color:var(--ink);font:700 22px var(--f-display);border:2px solid var(--ink)}
.steps b{display:block;font-size:15.5px} .steps span{color:var(--muted);font-size:13.5px}
pre.code{margin:0;background:var(--ink);border:2px solid var(--line-2);border-radius:var(--hd-1);padding:16px 18px;overflow-x:auto;font:13px/1.7 var(--f-mono);color:var(--muted)}
pre.code .k{color:var(--pink)} pre.code .s{color:var(--mint)} pre.code .c{color:var(--dim)} pre.code .f{color:var(--sky)}

/* 套餐列表（官网与用户中心共用） */
.plan-list{display:grid;gap:12px}
.plan{display:grid;grid-template-columns:auto minmax(0,1.6fr) minmax(0,1.4fr) auto;gap:16px;align-items:center;padding:14px 16px;border:2px solid var(--line-2);border-radius:var(--hd-1);background:var(--panel)}
.plan.best{border-color:var(--sun);box-shadow:4px 5px 0 var(--ink);background:linear-gradient(90deg,rgba(255,209,102,.08),var(--panel) 40%)}
.plan h3{font-size:17px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plan .desc{color:var(--muted);font-size:13.5px;margin-top:4px}
.specs{display:flex;flex-wrap:wrap;gap:6px}
.spec{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1.5px dashed var(--line-2);border-radius:var(--hd-3);font-size:13px;color:var(--muted);white-space:nowrap}
.spec b{color:var(--fg);font-family:var(--f-display);font-weight:600}
.spec .di{color:var(--sky)}
.plan .price{text-align:right;min-width:140px}
.plan .price b{display:block;font:600 26px/1 var(--f-display);color:var(--sun);font-variant-numeric:tabular-nums}
.plan .price small{color:var(--muted);font-size:12.5px}
.plan .cta{display:grid;gap:8px;justify-items:end}
.stock{display:grid;gap:4px;min-width:150px;font-size:12.5px;color:var(--dim)}
.tier-table td b{font-family:var(--f-display);font-size:18px}
.tier-table tr.cur td{background:rgba(255,209,102,.07)}
.calc{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:0;border:2px solid var(--line-2);border-radius:var(--hd-1);overflow:hidden}
.calc .ctrl{padding:20px;background:var(--panel);display:grid;gap:16px}
.calc .out{padding:20px;background:var(--panel-2);display:grid;gap:8px;align-content:center}
.calc .big{font:600 clamp(30px,3.4vw,42px)/1 var(--f-display);color:var(--sun);font-variant-numeric:tabular-nums}
.range{display:grid;gap:6px}
.range div{display:flex;justify-content:space-between;font-size:14.5px;color:var(--muted)}
.range output{font:600 19px var(--f-display);color:var(--fg)}
input[type=range]{width:100%;accent-color:var(--sun)}
.faq{display:grid;gap:10px}
.faq details{border:2px solid var(--line-2);border-radius:var(--hd-2);background:var(--panel);padding:12px 14px}
.faq summary{cursor:pointer;font-weight:700;font-size:15.5px;list-style:none;display:flex;gap:10px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .di{color:var(--sun)}
.faq summary::after{content:"+";margin-left:auto;font:700 22px var(--f-display);color:var(--sun)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin-top:8px;font-size:14px}

/* 登录 */
.auth{flex:1;display:grid;place-items:center;padding:30px 16px}
.auth-card{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);width:min(880px,100%);border:2px solid var(--ink);border-radius:var(--hd-1);overflow:hidden;box-shadow:6px 8px 0 var(--ink)}
.auth-art{background:linear-gradient(160deg,var(--panel-2),var(--bg-2));padding:26px;display:grid;align-content:center;justify-items:center;gap:14px}
.auth-form{background:var(--panel);padding:24px 26px;display:grid;gap:16px;align-content:start}
.auth-seg{display:grid;grid-template-columns:1fr 1fr;width:100%}
.auth-seg button{justify-content:center}
.auth-stack{display:grid}
.auth-stack>[data-panel]{grid-area:1/1;display:grid;gap:12px;align-content:start}
.auth-stack>[data-panel][hidden]{display:grid!important;visibility:hidden}
.auth-h h2{font-size:24px}.auth-h p{color:var(--muted);font-size:13.5px;margin-top:2px}
.auth-stack .btn.lg{width:100%}
.auth-alt{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:12.5px;color:var(--dim)}
.auth-switch{text-align:center;font-size:13.5px;color:var(--muted)}
.auth-points{display:grid;gap:8px;font-size:13.5px;color:var(--muted)}
.auth-points span{display:flex;gap:8px;align-items:center}

/* ---------- 工作台（用户中心 / 后台）：无动画 ---------- */
.app{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:calc(100vh / var(--zoom));scrollbar-gutter:stable}
.side{position:sticky;top:0;height:calc(100vh / var(--zoom));overflow:auto;display:flex;flex-direction:column;gap:12px;padding:16px 12px;border-right:2px dashed var(--line);background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.side .brand{padding:0 6px}
.nav{display:grid;gap:2px}
.nav .grp{font:600 11px var(--f-mono);letter-spacing:.14em;color:var(--dim);padding:12px 12px 4px;text-transform:uppercase}
.nav a{display:flex;align-items:center;gap:10px;padding:7px 11px;border:2px solid transparent;border-radius:var(--hd-3);color:var(--muted);font-weight:600;font-size:14.5px;text-decoration:none}
.nav a .di{color:var(--dim)}
.nav a:hover{background:var(--panel);color:var(--fg)}
.nav a[aria-current="page"]{background:var(--sun);color:var(--ink);border-color:var(--ink);box-shadow:2px 3px 0 var(--ink)}
.nav a[aria-current="page"] .di{color:var(--ink)}
.nav a .badge{margin-left:auto;font:800 11px var(--f-mono);background:var(--pink);color:var(--ink);border-radius:99px;padding:1px 7px}
/* 用户中心：云浏览器主入口 */
.feature-nav{display:grid;gap:8px;padding:14px;border:2px solid var(--ink);border-radius:var(--hd-1);background:linear-gradient(135deg,rgba(116,224,255,.22),rgba(116,224,255,.06));box-shadow:3px 4px 0 var(--ink);color:var(--fg);text-decoration:none!important}
.feature-nav .fn-top{display:flex;align-items:center;gap:10px}
.feature-nav b{font:700 17px var(--f-display)}
.feature-nav small{color:var(--muted);font-size:12.5px}
.feature-nav .run{display:flex;gap:8px;align-items:center;font-size:13px}
.feature-nav[aria-current="page"]{border-color:var(--sun);background:linear-gradient(135deg,rgba(255,209,102,.26),rgba(116,224,255,.08))}
.side-foot{display:grid;gap:8px;padding:12px;border:2px dashed var(--line-2);border-radius:var(--hd-2)}
.side-foot .bal{font:600 24px var(--f-display);font-variant-numeric:tabular-nums}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:10px;padding:10px 24px;border-bottom:2px dashed var(--line);background:var(--bg)}
.crumb{font:500 13px var(--f-mono);color:var(--dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb b{color:var(--fg)}
.chip-bal{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:2px solid var(--line-2);border-radius:var(--hd-3);font:600 13.5px var(--f-mono);color:var(--sun);text-decoration:none!important;white-space:nowrap;flex:0 0 auto}
.view{padding:18px 22px 40px;display:grid;gap:14px;align-content:start;width:100%;max-width:1640px}
.ph{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.ph h1{font-size:clamp(22px,2.2vw,28px);margin-top:4px;display:flex;align-items:center;gap:10px}
.ph h1 .ibadge{width:38px;height:38px;box-shadow:2px 3px 0 var(--ink)}
.ph p{color:var(--muted);margin-top:2px;font-size:14px}
.ph .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.sec-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sec-h h2{font-size:17px;display:flex;align-items:center;gap:8px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:12px 14px;border:2px solid var(--line-2);border-radius:var(--hd-2);background:var(--panel);min-width:0}
.stat .ibadge{grid-row:span 2;width:38px;height:38px}
.stat .k{font-size:13px;color:var(--muted)}
.stat .v{font:600 clamp(18px,1.4vw,21px)/1.15 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .v small{font:500 13px var(--f-body);color:var(--muted);margin-left:4px}
.stat .s{grid-column:1/-1;font-size:12.5px;color:var(--dim)}
.split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:16px}
.split.even{grid-template-columns:1fr 1fr}
/* 云浏览器工作台 */
.cb-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 18px;border:2px solid var(--ink);border-radius:var(--hd-1);background:linear-gradient(120deg,rgba(116,224,255,.16),rgba(182,156,255,.1) 55%,var(--panel));box-shadow:4px 5px 0 var(--ink)}
.cb-hero h2{font-size:19px}
.cb-hero p{color:var(--muted);font-size:14.5px;margin-top:4px}
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.qcard{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:14px;border:2px dashed var(--line-2);border-radius:var(--hd-2);background:var(--panel);cursor:pointer;text-align:left;color:var(--fg)}
.qcard:hover{border-color:var(--sky);border-style:solid}
a.qcard{text-decoration:none!important}
.qcard b{font-size:15.5px} .qcard>span:not(.ibadge){grid-column:2;color:var(--dim);font-size:12.5px}
.qcard .ibadge{grid-row:span 2}
.bcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.bcard{display:grid;gap:10px;padding:12px;border:2px solid var(--line-2);border-radius:var(--hd-1);background:var(--panel)}
.bcard.on{border-color:var(--mint)}
.bcard .win{border:2px solid var(--ink);border-radius:var(--hd-3);background:var(--bg-2);overflow:hidden}
.bcard .win .bar{display:flex;gap:5px;align-items:center;padding:6px 8px;border-bottom:1.5px dashed var(--line-2)}
.bcard .win .bar i{width:8px;height:8px;border-radius:50%;background:var(--red)}
.bcard .win .bar i:nth-child(2){background:var(--sun)}.bcard .win .bar i:nth-child(3){background:var(--mint)}
.bcard .win .bar span{margin-left:6px;font:500 11px var(--f-mono);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcard .win .shot{height:86px;display:grid;place-items:center;color:var(--dim)}
.bcard h4{font-size:15px;font-family:var(--f-body)}
.bcard .meta{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--dim)}
/* 我的浏览器：横版行 */
.blist{display:grid;gap:6px}
.brow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) 150px 110px 230px;gap:12px;align-items:center;padding:9px 12px;border:1.5px solid var(--line);border-radius:var(--hd-3);background:var(--bg-2)}
.brow.on{border-color:rgba(123,237,180,.55);background:linear-gradient(90deg,rgba(123,237,180,.07),var(--bg-2) 45%)}
.brow:hover{border-color:var(--line-2)}
.b-name{display:grid;min-width:0}.b-name b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.b-name .mono{font-size:11.5px;color:var(--dim)}
.b-net{display:inline-flex;align-items:center;gap:7px;justify-self:start;max-width:100%;padding:4px 10px;border:1.5px solid var(--c);border-radius:99px;font-size:13px;font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-net .di{color:var(--c)}
.b-cost{text-align:right;font-size:13.5px}.b-cost small{color:var(--dim)}
.brow .ops{display:flex;gap:6px;justify-content:flex-end}
@media (max-width:1200px){.brow{grid-template-columns:minmax(0,1fr) auto auto;}.brow .b-net{grid-column:1}.brow .b-st{grid-column:2;grid-row:1}.brow .b-cost{grid-column:3;grid-row:1}.brow .ops{grid-column:2/-1;grid-row:2}}
@media (max-width:640px){.brow{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}.brow .b-st{grid-column:2;grid-row:1}.brow .b-net{grid-column:1;grid-row:2}.brow .b-cost{grid-column:2;grid-row:2}.brow .ops{grid-column:1/-1;grid-row:3;justify-content:flex-start;flex-wrap:wrap}}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar .input{width:auto;padding:8px 12px;font-size:14px}
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;font-size:13.5px;color:var(--dim)}
/* 弹窗：无弹出动画 */
.modal-back{position:fixed;inset:0;background:rgba(6,7,20,.74);display:grid;place-items:center;padding:16px;z-index:100}
.modal{width:min(560px,100%);max-height:calc(100vh / var(--zoom) - 32px);overflow:auto;background:var(--panel);border:2px solid var(--ink);border-radius:var(--hd-1);box-shadow:6px 8px 0 var(--ink)}
.modal.wide{width:min(780px,100%)}
.modal-hd{display:flex;align-items:center;gap:10px;padding:16px 18px 6px}
.modal-hd h3{font-size:19px;display:flex;align-items:center;gap:8px}
.modal-bd{padding:8px 18px;display:grid;gap:12px}
.modal-ft{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px 18px;flex-wrap:wrap}
.x{margin-left:auto;background:var(--panel-2);border:2px solid var(--line-2);width:34px;height:34px;border-radius:var(--hd-3);cursor:pointer;color:var(--muted);font-size:18px}
#toasts{position:fixed;right:16px;bottom:16px;display:grid;gap:8px;z-index:200}
.toast{display:flex;gap:10px;align-items:center;padding:11px 16px;border:2px solid var(--ink);border-radius:var(--hd-3);background:var(--panel-2);box-shadow:3px 4px 0 var(--ink);font-weight:600;font-size:14.5px;max-width:min(380px,calc(100vw - 32px))}
.toast .di{color:var(--mint)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.copy-line{display:flex;gap:8px;align-items:center;background:var(--bg-2);border:2px solid var(--line-2);border-radius:var(--hd-3);padding:6px 6px 6px 12px;min-width:0}
.copy-line code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;font:13.5px var(--f-mono);color:var(--sky)}
.region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.region{display:grid;gap:4px;padding:12px;border:2px dashed var(--line-2);border-radius:var(--hd-2);background:var(--bg-2);cursor:pointer;text-align:left;color:var(--fg)}
.region b{display:flex;align-items:center;gap:6px}
.region small{color:var(--dim)}
.region[aria-pressed="true"]{border:2px solid var(--sun);background:var(--sun-a)}
.region[disabled]{opacity:.45;cursor:not-allowed}
.stepper{display:inline-flex;align-items:center;border:2px solid var(--line-2);border-radius:var(--hd-3);overflow:hidden}
.stepper button{width:36px;height:36px;border:0;background:var(--panel-2);color:var(--fg);font-size:18px;cursor:pointer}
.stepper output{min-width:46px;text-align:center;font:600 17px var(--f-display)}

@media (max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.split,.split.even{grid-template-columns:1fr}.entries{grid-template-columns:repeat(2,minmax(0,1fr))}.feat,.feat.four{grid-template-columns:repeat(2,minmax(0,1fr))}.plan{grid-template-columns:auto minmax(0,1fr) auto}.plan .specs-col{grid-column:2/-1;grid-row:2}}
@media (max-width:900px){
  .links{display:none;position:absolute;left:12px;right:12px;top:70px;flex-direction:column;margin:0;padding:10px;background:var(--panel);border:2px solid var(--ink);border-radius:var(--hd-1);box-shadow:4px 5px 0 var(--ink)}
  .topnav.open .links{display:flex}
  .burger{display:inline-flex}
  .home-hero,.page-hero,.calc,.auth-card{grid-template-columns:1fr}
  .auth-art{display:none}
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;height:auto;width:min(300px,86vw);z-index:60;display:none;box-shadow:16px 0 50px rgba(0,0,0,.5)}
  .app.nav-open .side{display:flex}
  .scrim{position:fixed;inset:0;z-index:55;background:rgba(6,7,20,.6);display:none}
  .app.nav-open .scrim{display:block}
  .top .hide-m{display:none}
  .view{padding:16px 16px 36px}.top{padding:8px 14px}
  .cb-hero{grid-template-columns:1fr}.quick{grid-template-columns:1fr}
}
@media (min-width:901px){.app .burger,.scrim{display:none}}
@media (max-width:640px){
  .wrap{padding-inline:16px}
  .entries,.feat,.feat.four{grid-template-columns:1fr}
  .grid2,.grid3{grid-template-columns:1fr}
  .plan{grid-template-columns:1fr;gap:12px}.plan .price{text-align:left}.plan .cta{justify-items:start}.plan .specs-col{grid-column:auto;grid-row:auto}
  .tblw{border:0;background:transparent;overflow:visible}
  .tbl,.tbl tbody{display:block}.tbl thead{display:none}
  .tbl tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:12px 14px;margin-bottom:10px;background:var(--panel);border:2px solid var(--line-2);border-radius:var(--hd-2)}
  .tbl td{display:block;padding:0;border:0;min-width:0;overflow-wrap:anywhere}
  .tbl td::before{content:attr(data-l);display:block;font-size:11.5px;color:var(--dim)}
  .tbl td:first-child,.tbl td:last-child,.tbl td[colspan]{grid-column:1/-1}
  .tbl td:first-child::before,.tbl td[colspan]::before{display:none}
  .tbl .r{text-align:left}.tbl .ops{justify-content:flex-start;flex-wrap:wrap}
  .tbl td.num,.tbl td .num{white-space:normal}
  .chip-bal{padding:5px 9px;font-size:12.5px}.top .crumb{font-size:12px}
  .stat .v{font-size:20px}
  .modal-back{place-items:end center;padding:0}.modal,.modal.wide{width:100%;border-radius:22px 22px 0 0}
  .kv{grid-template-columns:1fr;gap:2px}.kv dd{margin-bottom:8px}
}
@media (max-width:380px){.stats{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}