/* ============================================================
   RawDrop · 比赛专用版（WebRTC 点对点直传）
   Neo-retro / neo-brutalist 重设计：奶油底 + 炭灰 + 陶土橙 + 鼠尾草绿
   硬投影(offset shadow) + 衬线大标题 + 等宽标签 + 噪点叠层
   纯 vanilla CSS，保留全部 app.js 依赖的 class / id
   ============================================================ */
:root{
  /* 调色板：neo-retro */
  --bg:#F4F1EA;            /* 奶油底 */
  --cream:#F4F1EA;
  --ink:#2F312E;           /* 炭灰（主文字 / 边框 / 硬投影） */
  --ink-2:#4A4C45;         /* 次级文字（暖炭灰） */
  --muted:#867F70;         /* 弱化文字（暖灰褐） */
  --line:#2F312E;          /* 主边框 = 炭灰（粗描边） */
  --line-2:rgba(47,49,46,.16); /* 细分隔线 */
  --card-bg:#FCFAF4;       /* 暖白卡片 */
  --pane-bg:#EFEADF;       /* 略深奶油面板 */
  --brand:#D97B58;         /* 陶土橙（主强调 / 发送端） */
  --brand-700:#B5613F;     /* 深陶土（文字用） */
  --sage:#8EA391;          /* 鼠尾草绿（接收端 / 成功） */
  --sage-700:#5E7A62;
  --ok:#5E8C61;            /* 成功（绿，贴合调色板） */
  --ok-bg:rgba(142,163,145,.22);
  --err:#C0492F;           /* 砖红（错误） */
  --err-bg:rgba(192,73,47,.14);
  --warn:#C99A3B;
  --warn-bg:rgba(201,154,59,.18);
  --tr:#2F6FED;            /* 传输中（蓝，状态区分） */
  --tr-700:#1E4FB8;
  --tr-bg:rgba(47,111,237,.12);
  --maxw:1200px;
  /* 柔和悬浮投影（新版传输卡片用，营造轻盈感） */
  --shadow-soft:0 6px 18px rgba(47,49,46,.10);
  --shadow-soft-sm:0 3px 10px rgba(47,49,46,.10);
  /* 字体：MiSans 本地自托管（4 字重 woff2，中文/英文/数字统一） */
  --sans:"MiSans","PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  --serif:"MiSans","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"MiSans","Cascadia Code",ui-monospace,"Courier New","SFMono-Regular",Menlo,Consolas,monospace;
  /* 圆角：偏小，保留硬朗感 */
  --radius:12px; --radius-sm:8px; --radius-xs:5px;
  /* 硬投影（offset shadow） */
  --shadow-hard:4px 4px 0 var(--ink);
  --shadow-hard-lg:6px 6px 0 var(--ink);
  --shadow-hard-sm:3px 3px 0 var(--ink);
}
html[data-theme=dark]{
  --bg:#2F312E; --cream:#34362F;  /* 暗模式下 cream 翻成深色面，让 cream 背景 + ink 文字的组件保持可读 */
  --ink:#F4F1EA;            /* 暗模式下边框/投影翻成奶油色 */
  --ink-2:#D9D5C9; --muted:#A39E92;
  --line:#F4F1EA; --line-2:rgba(244,241,234,.18);
  --card-bg:#3A3C36; --pane-bg:#34362F;
  --brand:#E0976F; --brand-700:#F0B798;
  --sage:#9DB39F; --sage-700:#B9CCBB;
  --ok:#8FB291; --ok-bg:rgba(142,163,145,.22);
  --err:#E0795C; --err-bg:rgba(224,121,92,.20);
  --warn:#D9B65A; --warn-bg:rgba(217,182,90,.18);
  --tr:#5B8DEF; --tr-700:#7FA8F2; --tr-bg:rgba(91,141,239,.18);
  --shadow-hard:4px 4px 0 var(--ink);
  --shadow-hard-lg:6px 6px 0 var(--ink);
  --shadow-hard-sm:3px 3px 0 var(--ink);
  --shadow-soft:0 6px 18px rgba(0,0,0,.30);
  --shadow-soft-sm:0 3px 10px rgba(0,0,0,.26);
}
/* 暗色模式下的对比度修复：原用 ink 作背景、cream 作文字的组件，在暗色下会反转为浅底深色，需要显式压回深底浅色 */
html[data-theme=dark] .step-badge,
html[data-theme=dark] .ws-setup-btn,
html[data-theme=dark] .how-step .how-num,
html[data-theme=dark] .seg-btn.on,
html[data-theme=dark] .icon-btn:hover,
html[data-theme=dark] .btn.ghost:hover,
html[data-theme=dark] .mode-btn.mode-pro,
html[data-theme=dark] .toast,
html[data-theme=dark] .site-footer{
  background:var(--bg); color:var(--ink);
}
html[data-theme=dark] .icon-btn:hover{
  background:var(--brand); color:#fff;
}
html[data-theme=dark] .ws-setup-btn:hover{
  background:var(--brand); color:#fff;
}
html[data-theme=dark] .mode-btn.mode-pro .mb-ico,
html[data-theme=dark] .mode-btn.mode-pro .mb-tag{
  border-color:var(--ink);
}
html[data-theme=dark] .mode-btn.mode-pro .mb-desc{
  color:rgba(244,241,234,.82);
}
html[data-theme=dark] .dialog-backdrop,
html[data-theme=dark] .mode-choice-backdrop{
  background:rgba(0,0,0,.55);
}
html[data-theme=dark] .brand-logo{
  filter:brightness(0) invert(1) drop-shadow(2px 2px 0 var(--ink));
}
*{box-sizing:border-box;margin:0;padding:0;}

/* ============ MiSans（小米字体，本地自托管 4 字重 woff2）============ */
@font-face{
  font-family:'MiSans';
  src:url('fonts/MiSans-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'MiSans';
  src:url('fonts/MiSans-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'MiSans';
  src:url('fonts/MiSans-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'MiSans';
  src:url('fonts/MiSans-Heavy.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap;
}

/* ============ 图标（内联 Material Symbols 字形，替代 emoji）============ */
.mi{width:1.15em;height:1.15em;display:inline-block;fill:currentColor;vertical-align:-0.18em;flex:none;}
.mi-14{width:14px;height:14px;}
.mi-28{width:28px;height:28px;}
.mono{font-family:var(--mono);}
.up{text-transform:uppercase;}

/* 噪点叠层（feTurbulence） */
body{
  font-family:var(--sans);color:var(--ink);background-color:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;transition:background .2s,color .2s;
  display:flex;flex-direction:column;min-height:100vh;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px;}

/* 全局焦点可见性（a11y） */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

/* ============ Header（sticky；去掉 backdrop-filter，避免滚动时持续 GPU 重绘） ============ */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:2px solid var(--ink);}
.nav{display:flex;align-items:center;gap:12px;height:62px;}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:800;color:var(--ink);font-size:22px;text-decoration:none;letter-spacing:-.02em;}
.brand-logo{width:30px;height:30px;display:inline-block;filter:drop-shadow(2px 2px 0 var(--ink));transition:transform .25s ease;}
.brand:hover .brand-logo{animation:mi-pop .35s cubic-bezier(.34,1.56,.64,1);}
.logo-mark{width:30px;height:30px;border-radius:6px;background:var(--brand);border:2px solid var(--ink);display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.icon-btn{width:38px;height:38px;border-radius:6px;border:2px solid var(--ink);background:var(--cream);color:var(--ink);font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s ease,background .2s,color .2s;font-family:var(--sans);}
.icon-btn:hover{transform:translate(-1px,-1px);background:var(--ink);color:var(--cream);}
.icon-btn:active{transform:translate(0,0);}

/* ============ Hero（居中，参考文件版式）============ */
.hero{text-align:center;padding-top:6px;}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-700);background:var(--cream);border:2px solid var(--ink);padding:5px 12px;margin-bottom:16px;box-shadow:2px 2px 0 var(--ink);}
h1{font-family:var(--serif);font-size:clamp(2.1rem,5vw,3.2rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px;color:var(--ink);}
.lead{font-family:var(--mono);color:var(--muted);font-size:12.5px;letter-spacing:.14em;margin:0 auto;max-width:720px;}

/* ============ 使用步骤条（参考风格：offset 卡 + 炭灰圆序号白色居中）============ */
.how{display:flex;align-items:center;justify-content:center;gap:14px;margin:44px auto 0;max-width:920px;flex-wrap:wrap;}
.how-step{display:flex;align-items:center;gap:12px;text-align:left;background:var(--card-bg);border:2px solid var(--ink);border-radius:6px;box-shadow:var(--shadow-hard);padding:14px 18px;flex:0 1 252px;}
.how-step b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);font-family:var(--sans);line-height:1.4;}
.how-step .how-desc{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4;}
.how-step .how-num{flex:none;width:36px;height:36px;border-radius:999px;background:var(--ink);color:#fff;border:2px solid var(--ink);font-family:var(--mono);font-weight:800;font-size:16px;display:grid;place-items:center;text-align:center;line-height:1;margin:0;box-shadow:2px 2px 0 var(--brand);}
.how-arrow{display:flex;align-items:center;color:var(--muted);font-size:20px;font-weight:800;}
@media(max-width:680px){.how-arrow{display:none;}.how-step{flex:1 1 100%;}}

/* ============ 工作区条 ============ */
.ws-wrap{padding:6px 0 8px;}
.ws-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border:2px solid var(--ink);border-radius:var(--radius-sm);background:var(--card-bg);box-shadow:var(--shadow-hard-sm);}
.ws-label{font-family:var(--mono);font-size:11.5px;font-weight:800;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;}
.ws-chips{display:flex;gap:6px;flex-wrap:wrap;}
.ws-chips .chip{padding:6px 12px;border:2px solid var(--ink);border-radius:var(--radius-xs);background:var(--cream);color:var(--ink);font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--sans);transition:transform .12s ease,background .2s,color .2s;box-shadow:2px 2px 0 var(--ink);}
.ws-chips .chip:hover{transform:translate(-1px,-1px);}
.ws-chips .chip.on{background:var(--brand);color:#fff;box-shadow:2px 2px 0 var(--ink);}
/* ============ 工作区灰字提醒 ============ */
.ws-hint{margin:8px 2px 0;font-size:12.5px;line-height:1.6;color:var(--muted);}
.ws-hint::before{content:"› ";color:var(--brand);font-weight:800;}

/* ============ Section / card ============ */
.section{padding:8px 0 40px;}
.card{background:var(--card-bg);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-hard);padding:26px;}
.card-head{margin-bottom:18px;}
.card-head h2{font-size:18px;font-weight:800;letter-spacing:-.01em;font-family:var(--serif);}
.card-sub{font-size:13px;color:var(--muted);margin-top:4px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:760px){.grid-2{grid-template-columns:1fr;}}

/* ============ Panes ============ */
.pane{border:2px solid var(--ink);border-radius:var(--radius-sm);padding:18px;background:var(--pane-bg);box-shadow:var(--shadow-hard-sm);}
.pane-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;}
.step-badge{flex:none;width:34px;height:34px;border-radius:6px;background:var(--ink);color:var(--cream);border:2px solid var(--ink);font-weight:800;font-size:17px;display:grid;place-items:center;line-height:1;font-family:var(--mono);}
.pane-top h3{font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.3;font-family:var(--serif);}
.pane-desc{font-size:12.5px;color:var(--muted);margin-top:2px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 20px;border-radius:var(--radius-sm);font-weight:800;font-size:14.5px;border:2px solid var(--ink);cursor:pointer;font-family:var(--sans);color:#fff;background:var(--brand);box-shadow:var(--shadow-hard);transition:transform .12s ease,background .2s,box-shadow .2s;}
.btn:hover{transform:translate(-2px,-2px);background:var(--brand-700);box-shadow:var(--shadow-hard-lg);}
.btn:active{transform:translate(0,0);box-shadow:var(--shadow-hard-sm);}
.btn.ghost{background:var(--cream);color:var(--ink);}
.btn.ghost:hover{background:var(--ink);color:var(--cream);}
.btn.small{padding:6px 12px;font-size:12.5px;box-shadow:var(--shadow-hard-sm);}
.btn.small:hover{box-shadow:3px 3px 0 var(--ink);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--shadow-hard-sm);}
.btn.full{width:100%;}
input[type=text]{width:100%;border:2px solid var(--ink);border-radius:var(--radius-sm);padding:10px 12px;font-size:14px;font-family:var(--sans);color:var(--ink);background:var(--cream);}
input[type=text]:focus{outline:none;border-color:var(--brand);}
.row{display:flex;gap:10px;align-items:center;margin-top:10px;}
.code-box{flex:1;background:var(--cream);border:2px solid var(--ink);border-radius:var(--radius-sm);padding:9px;font-size:18px;letter-spacing:2px;text-align:center;font-weight:800;font-family:var(--mono);color:var(--ink);box-shadow:var(--shadow-hard-sm);}
.status{font-size:12.5px;color:var(--muted);margin-top:10px;min-height:18px;font-family:var(--sans);}
.status .ok{color:var(--ok);font-weight:800;}
.status .err{color:var(--err);font-weight:800;}

/* ============ Dropzone（虚线炭灰）============ */
.dropzone{border:2px dashed var(--ink);border-radius:var(--radius-sm);padding:30px 14px;text-align:center;cursor:pointer;margin-top:14px;background:var(--cream);transition:border-color .15s,background .15s,transform .12s;color:var(--ink-2);font-weight:700;font-size:14.5px;}
.dropzone:hover{border-color:var(--brand);background:var(--pane-bg);}
.dropzone.drag{border-color:var(--brand);background:var(--ok-bg);}
.dropzone .dz-sub{font-size:12px;color:var(--muted);font-weight:500;}

/* ============ 发送队列 ============ */
/* 环形进度 + 状态色编码（蓝=传输中 / 绿=完成 / 橙=暂停·取消 / 红=失败） */
.q-ring{position:relative;width:46px;height:46px;flex:none;}
.q-ring.sm{width:38px;height:38px;}
.q-ring-svg{width:100%;height:100%;display:block;}
.q-ring-bg{fill:none;stroke:var(--line-2);stroke-width:4;}
.q-ring-fg{fill:none;stroke:var(--c,var(--brand));stroke-width:4;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .15s linear, stroke .3s ease;}
.q-ring-pct{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:800;color:var(--ink);pointer-events:none;}
.q-ring.sm .q-ring-pct{font-size:10px;}
.q-row{display:flex;gap:12px;align-items:center;padding:10px 12px;margin-top:10px;border:2px solid var(--ink);border-radius:var(--radius-sm);background:var(--card-bg);box-shadow:var(--shadow-soft-sm);transition:box-shadow .2s ease,transform .12s ease,border-color .2s ease;}
.q-row:hover{box-shadow:var(--shadow-soft);}
.q-row.st-fail{border-color:var(--err);}
.q-row.st-done{opacity:.94;}
.q-row.st-cancelled{opacity:.6;}
.q-row.pop{animation:q-pop .85s ease;}
@keyframes q-pop{0%{box-shadow:0 0 0 0 var(--ok-bg);}30%{box-shadow:0 0 0 5px var(--ok-bg);transform:translateY(-3px);}100%{box-shadow:var(--shadow-soft-sm);transform:none;}}
.q-main{flex:1;min-width:0;}
.q-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.q-name{font-weight:800;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.q-size{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;flex:none;}
.q-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;}
.q-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:10.5px;font-weight:800;letter-spacing:.03em;padding:2px 9px;border-radius:999px;border:1.5px solid currentColor;}
.q-badge.c-tr{color:var(--tr-700);background:var(--tr-bg);}
.q-badge.c-ok{color:var(--ok);background:var(--ok-bg);}
.q-badge.c-warn{color:var(--warn);background:var(--warn-bg);}
.q-badge.c-err{color:var(--err);background:var(--err-bg);}
.q-badge.c-muted{color:var(--muted);background:var(--line-2);}
.q-resume{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tr-700);background:var(--tr-bg);border:1px solid var(--tr);padding:1px 7px;border-radius:999px;}
.q-eta{font-size:11px;color:var(--muted);font-family:var(--mono);}
.q-folder{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:3px;}
.q-track{height:6px;border-radius:999px;background:var(--line-2);margin-top:7px;overflow:hidden;}
.q-fill{height:100%;width:0%;border-radius:999px;transition:width .1s linear;}
.q-actions{display:flex;gap:6px;margin-top:8px;}
.q-btn{width:30px;height:26px;border:1.5px solid var(--ink);border-radius:6px;background:var(--cream);color:var(--ink);font-size:12px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s,background .15s,color .15s;}
.q-btn:hover{background:var(--ink);color:var(--cream);transform:translate(-1px,-1px);}
.q-btn.danger{color:var(--err);}
.q-btn.danger:hover{background:var(--err);color:#fff;}
.q-detail{margin-top:8px;border-top:1px dashed var(--line-2);padding-top:6px;}
.q-detail summary{cursor:pointer;font-size:11.5px;font-weight:800;color:var(--brand-700);font-family:var(--mono);letter-spacing:.03em;}
.q-detail-body{margin-top:6px;display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--ink-2);}
.q-detail-body code{font-family:var(--mono);font-size:10.5px;word-break:break-all;}
.q-detail-val{word-break:break-all;}
.q-empty{padding:34px 18px;text-align:center;border:2px dashed var(--ink);border-radius:var(--radius-sm);background:var(--pane-bg);margin-top:10px;}
.q-empty-ill{width:60px;height:60px;margin:0 auto 12px;display:grid;place-items:center;color:var(--brand-700);}
.q-empty-ill svg{width:100%;height:100%;fill:var(--brand-700);}
.q-empty h4{font-size:16px;font-weight:800;color:var(--ink);font-family:var(--serif);margin-bottom:6px;}
.q-empty-sub{font-size:12.5px;color:var(--muted);margin-bottom:14px;}
.q-empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
/* 批量操作条 */
.batch-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;margin-top:12px;border:2px solid var(--ink);border-radius:var(--radius-sm);background:var(--card-bg);box-shadow:var(--shadow-soft-sm);position:sticky;top:6px;z-index:5;}
.batch-info{flex:1;min-width:0;}
.b-counts{display:block;font-family:var(--mono);font-size:13px;font-weight:800;color:var(--ink);}
.b-status{display:block;font-size:11px;color:var(--muted);}
.batch-actions{display:flex;gap:6px;}
.btn.ghost.danger{color:var(--err);}
.btn.ghost.danger:hover{background:var(--err);color:#fff;}
/* 全局拖拽热区遮罩 */
.drop-overlay{position:fixed;inset:0;z-index:200;background:rgba(47,49,46,.80);display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.drop-overlay.show{display:flex;animation:fade-in .15s ease;}
.drop-overlay-inner{border:3px dashed var(--cream);border-radius:18px;padding:46px 64px;text-align:center;color:var(--cream);}
.drop-ill{width:72px;height:72px;margin:0 auto 14px;}
.drop-ill svg{width:100%;height:100%;fill:var(--cream);animation:bob .9s ease-in-out infinite;}
.drop-overlay-inner p{font-size:18px;font-weight:800;font-family:var(--serif);letter-spacing:.02em;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* ============ Received / AI ============ */
.recv-item{border:2px solid var(--ink);border-radius:var(--radius-sm);padding:12px;margin-top:10px;background:var(--card-bg);box-shadow:var(--shadow-soft-sm);}
.recv-head{display:flex;align-items:flex-start;gap:10px;font-size:13px;flex-wrap:wrap;}
.recv-head-main{flex:1;min-width:0;}
.recv-head .name{font-weight:800;word-break:break-all;color:var(--ink);}
.recv-head .meta{font-size:11.5px;color:var(--muted);font-family:var(--mono);display:inline-block;margin-left:6px;}
.recv-badge{font-family:var(--mono);font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:var(--radius-xs);border:2px solid var(--ink);display:inline-block;text-transform:uppercase;}
.recv-badge.sha-ok{color:#fff;background:var(--sage);}
.recv-badge.sha-bad{color:#fff;background:var(--err);}
.recv-badge.ws{color:#fff;background:var(--brand);}
.recv-thumb{width:56px;height:56px;border-radius:var(--radius-xs);object-fit:cover;cursor:zoom-in;margin-top:8px;border:2px solid var(--ink);}
.ai-box{margin-top:10px;background:var(--pane-bg);border:2px solid var(--line-2);border-radius:var(--radius-sm);padding:10px 12px;font-size:12.5px;color:var(--ink-2);}
.ai-box .ai-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px;}
.lbl{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:800;color:var(--brand-700);background:var(--cream);padding:2px 8px;border:2px solid var(--ink);border-radius:var(--radius-xs);letter-spacing:.04em;text-transform:uppercase;}
.chip{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:800;color:#fff;background:var(--brand);border:2px solid var(--ink);padding:2px 8px;border-radius:var(--radius-xs);}
.ai-note{font-size:12px;color:var(--ink-2);margin-top:6px;}

/* ============ 聊天区 ============ */
.chat-wrap{margin-top:18px;border:2px solid var(--ink);border-radius:var(--radius-sm);padding:14px;background:var(--pane-bg);box-shadow:var(--shadow-hard-sm);}
.chat-title{font-size:14px;font-weight:800;margin-bottom:10px;font-family:var(--serif);}
.chat-box{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 2px;}
.msg{max-width:76%;padding:8px 12px;border-radius:10px;font-size:13px;line-height:1.5;word-break:break-word;border:2px solid var(--ink);}
.msg.me{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:3px;}
.msg.them{align-self:flex-start;background:var(--cream);color:var(--ink);border-bottom-left-radius:3px;}
.msg.sys{align-self:center;font-size:11.5px;color:var(--muted);background:transparent;border:none;padding:2px 8px;}
.msg .m-time{font-size:10px;opacity:.7;margin-left:6px;font-family:var(--mono);}
.chat-input-row{display:flex;gap:8px;margin-top:10px;}
.chat-input-row input{flex:1;}

/* ============ 归档中心 ============ */
.archive-section{position:fixed;inset:0;z-index:90;background:rgba(47,49,46,.55);display:grid;place-items:center;padding:24px;overflow-y:auto;}
.archive-section .container{width:100%;max-width:min(94vw,760px);}
.archive-card{border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-hard-lg);max-height:86vh;overflow-y:auto;background:var(--card-bg);padding:20px 22px;}
.archive-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.archive-head h3{font-size:16px;font-weight:800;font-family:var(--serif);}
.archive-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px;}
.archive-tools input{flex:1;min-width:180px;max-width:320px;}
.filter-chips{display:flex;gap:6px;flex-wrap:wrap;}
.filter-chips .fchip{padding:4px 10px;border:2px solid var(--ink);border-radius:var(--radius-xs);background:var(--cream);color:var(--ink);font-size:11.5px;font-weight:800;cursor:pointer;font-family:var(--sans);box-shadow:2px 2px 0 var(--ink);transition:transform .12s ease,background .15s,color .15s;}
.filter-chips .fchip:hover{transform:translate(-1px,-1px);}
.filter-chips .fchip.on{background:var(--sage);color:#fff;}
.archive-stats{font-size:12px;color:var(--muted);margin-bottom:12px;font-family:var(--mono);}
.archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
.arc-item{border:2px solid var(--ink);border-radius:var(--radius-sm);padding:10px 12px;background:var(--cream);font-size:12.5px;display:flex;flex-direction:column;gap:6px;transition:transform .12s ease,box-shadow .2s,border-color .2s;box-shadow:var(--shadow-hard-sm);}
.arc-item:hover{transform:translate(-2px,-2px);border-color:var(--brand);box-shadow:var(--shadow-hard);}
.arc-item .a-name{font-weight:800;word-break:break-all;color:var(--ink);cursor:pointer;}
.arc-item .a-thumb{width:100%;height:96px;object-fit:cover;border-radius:var(--radius-xs);cursor:zoom-in;background:var(--pane-bg);border:2px solid var(--ink);}
.arc-item .a-meta{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;font-family:var(--mono);}
.arc-item .a-actions{display:flex;gap:6px;flex-wrap:wrap;}
.arc-item .a-actions button{padding:4px 9px;border:2px solid var(--ink);border-radius:var(--radius-xs);background:var(--cream);color:var(--ink);font-size:11px;font-weight:800;cursor:pointer;font-family:var(--sans);box-shadow:2px 2px 0 var(--ink);transition:transform .12s ease,background .15s;}
.arc-item .a-actions button:hover{transform:translate(-1px,-1px);background:var(--brand);color:#fff;}
.arc-item .a-actions button.del{color:var(--err);}
.arc-item .a-actions button.del:hover{background:var(--err);color:#fff;}
.archive-empty{text-align:center;color:var(--muted);padding:30px 0;font-size:13px;}

/* ============ 灯箱 ============ */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(47,49,46,.88);display:grid;place-items:center;cursor:zoom-out;padding:20px;}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:8px;border:2px solid var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox.hidden{display:none;}

/* ============ Toast ============ */
.toast-wrap{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast{background:var(--ink);color:var(--cream);font-size:13px;font-weight:700;padding:9px 16px;border-radius:var(--radius-sm);border:2px solid var(--ink);box-shadow:var(--shadow-hard-sm);animation:toastIn .25s ease;font-family:var(--sans);}
.toast.ok{background:var(--sage);color:#fff;}
.toast.err{background:var(--err);color:#fff;}
@keyframes toastIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ============ Footer（炭灰底 + 奶油字 + 等宽）============ */
.site-footer{background:var(--ink);color:var(--cream);padding:22px 0;margin-top:auto;font-size:13px;font-family:var(--mono);border-top:2px solid var(--ink);}
.site-footer .inner{max-width:var(--maxw);margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;}
.site-footer .dim{color:rgba(244,241,234,.65);font-size:12px;}
.site-footer a{color:rgba(244,241,234,.7);text-decoration:none;transition:color .15s;font-weight:700;}
.site-footer a:hover{color:var(--brand);}
.site-footer .foot-tags{color:rgba(244,241,234,.62);font-size:11px;letter-spacing:.08em;}

/* ============ 通用工具 ============ */
.hidden{display:none !important;}
@media(max-width:760px){
  .archive-tools input{max-width:none;}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}

/* ============ 开始页：双区角色卡（参考 TRANSMIT / RECEIVE）============ */
.start{padding:56px 0 30px;}
.start-inner{max-width:1000px;margin:0 auto;}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:44px 0 8px;}
@media(max-width:680px){.role-grid{grid-template-columns:1fr;}}
.role-card{position:relative;text-align:left;cursor:pointer;font-family:var(--sans);background:var(--card-bg);border:2px solid var(--ink);border-radius:6px;box-shadow:var(--shadow-hard);padding:0;color:var(--ink);display:flex;flex-direction:column;width:100%;transition:transform .14s ease,box-shadow .2s;}
.role-card:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-hard-lg);}
.role-card:active{transform:translate(0,0);box-shadow:var(--shadow-hard-sm);}
.role-card.send{--zone:var(--sage);--zone-700:var(--sage-700);}
.role-card.recv{--zone:var(--brand);--zone-700:var(--brand-700);}
.corner-tag{position:absolute;top:-14px;left:18px;z-index:2;font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border:2px solid var(--ink);background:var(--zone);color:#fff;box-shadow:2px 2px 0 var(--ink);}
.zone-drop{padding:28px 24px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.role-icon{width:56px;height:56px;border-radius:8px;display:grid;place-items:center;color:var(--ink);background:color-mix(in srgb,var(--zone) 16%,transparent);border:2px solid var(--ink);margin-bottom:6px;}
.role-icon svg{opacity:.8;}
.role-card h2{font-size:21px;font-weight:800;letter-spacing:-.01em;font-family:var(--serif);}
.role-desc{font-size:13.5px;color:var(--muted);line-height:1.65;flex:1;}
.zone-sub{font-size:11px;color:var(--muted);letter-spacing:.08em;font-family:var(--mono);}
.zone-foot{display:flex;justify-content:space-between;align-items:center;border-top:2px solid var(--line-2);padding:10px 24px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;}
.zone-foot .dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--zone);margin-right:6px;vertical-align:1px;}
.zone-cta{display:block;background:var(--zone);color:#fff;font-family:var(--mono);font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:12px 14px;border-top:2px solid var(--ink);border-radius:0 0 4px 4px;transition:background .15s;}
.role-card:hover .zone-cta{background:var(--zone-700);}

/* ============ 对话框浮窗（动画化开关：打开淡入+上浮，关闭淡出，只动 opacity/transform 保证流畅） ============ */
body.dialog-open{overflow:hidden;}
.dialog-backdrop{position:fixed;inset:0;z-index:80;background:rgba(47,49,46,.5);display:none;align-items:center;justify-content:center;padding:24px;}
.dialog-backdrop.show{display:flex;animation:ui-fade .22s ease;}
.dialog-backdrop.closing{animation:ui-fade-out .18s ease forwards;}
.dialog-panel{width:min(94vw,920px);height:min(88vh,720px);max-height:88vh;background:var(--card-bg);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:8px 8px 0 rgba(47,49,46,.18);display:flex;flex-direction:column;overflow:hidden;transform-origin:center;}
.dialog-backdrop.show .dialog-panel{animation:ui-rise .3s cubic-bezier(.22,.9,.3,1);}

/* ============ 界面衔接动效（性能友好：只动画 opacity/transform） ============ */
@keyframes ui-fade{from{opacity:0;}to{opacity:1;}}
@keyframes ui-fade-out{from{opacity:1;}to{opacity:0;}}
@keyframes ui-rise{from{opacity:0;transform:translateY(16px) scale(.985);}to{opacity:1;transform:none;}}
@keyframes ui-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.ui-in{animation:ui-in .3s cubic-bezier(.22,.9,.3,1);}
.ui-fade{animation:ui-fade .2s ease;}
.ui-rise{animation:ui-rise .28s cubic-bezier(.22,.9,.3,1);}
/* 弹出层（归档 / 工作区设置 / 模式选择）：打开淡入 + 卡片上浮，关闭淡出 */
.archive-section.closing,.mode-choice-backdrop.closing,.ws-setup-backdrop.closing{animation:ui-fade-out .17s ease forwards;}
.archive-section:not(.hidden),.mode-choice-backdrop:not(.hidden),.ws-setup-backdrop:not(.hidden){animation:ui-fade .2s ease;}
.archive-card.ui-rise,.mode-choice-card.ui-rise,.ws-setup-panel.ui-rise{animation:ui-rise .28s cubic-bezier(.22,.9,.3,1);}
/* 开始页角色卡：入场逐个上浮 */
.start:not(.hidden) .role-card{animation:ui-in .38s cubic-bezier(.22,.9,.3,1) both;}
.start:not(.hidden) .role-card.recv{animation-delay:.05s;}
.start:not(.hidden) .how{animation:ui-fade .4s ease .1s both;}
.dialog-header{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:2px solid var(--ink);background:var(--card-bg);flex-shrink:0;}
.dialog-header .back{width:34px;height:34px;font-size:18px;}
.peer-avatar{width:42px;height:42px;border-radius:50%;background:transparent;border:none;flex:none;overflow:hidden;padding:2px;}
.peer-avatar img{width:100%;height:100%;object-fit:cover;display:block;filter:drop-shadow(2px 2px 0 var(--ink));}
html[data-theme=dark] .peer-avatar img{filter:brightness(0) invert(1) drop-shadow(2px 2px 0 var(--ink));}
.peer-meta{flex:1;min-width:0;margin-left:6px;}
.peer-meta .pname{font-weight:800;font-size:15px;line-height:1.2;font-family:var(--serif);}
.peer-meta .ptype{font-size:12px;color:var(--muted);margin-top:1px;font-family:var(--mono);}
.dlg-status{color:var(--muted);font-family:var(--mono);}
.dlg-status.ok{color:var(--ok);font-weight:800;}
.dlg-status.err{color:var(--err);font-weight:800;}
.dialog-actions{display:flex;gap:8px;margin-left:auto;}
.dialog-body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px;}
.dialog-body .pane{background:var(--pane-bg);}
.dialog-body .chat-wrap{margin-top:0;}
.dialog-body .chat-box{max-height:240px;}

/* ============ E2E 加密徽章 ============ */
.e2e-badge{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--brand);border:2px solid var(--ink);padding:5px 10px;box-shadow:2px 2px 0 var(--ink);white-space:nowrap;}
.e2e-badge.off{color:var(--muted);background:var(--cream);box-shadow:none;}

/* ============ 实时速率仪表盘 ============ */
.band-panel{background:var(--pane-bg);border:2px solid var(--ink);border-radius:var(--radius-sm);padding:10px 12px;box-shadow:var(--shadow-hard-sm);}
.band-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);margin-bottom:6px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;}
.band-head #bandNow{font-variant-numeric:tabular-nums;font-weight:800;color:var(--ink);font-size:13px;}
#bandChart{width:100%;height:56px;display:block;}

/* ============ 多对一并发连接行 ============ */
.conn-row{display:flex;align-items:center;gap:12px;padding:8px 12px;margin-top:8px;border:2px solid var(--ink);border-radius:var(--radius-sm);background:var(--card-bg);box-shadow:var(--shadow-soft-sm);}
.conn-main{flex:1;min-width:0;}
.conn-head{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink-2);margin-bottom:5px;font-family:var(--sans);font-weight:700;}
.conn-pct{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-weight:800;}

/* ============ 内联图标行内对齐微调 ============ */
.q-name .mi,.q-sub .mi,.recv-head .name .mi,.ai-note .mi,.conn-head .mi{vertical-align:-0.14em;margin-right:4px;}
.e2e-badge .mi{vertical-align:-0.14em;margin-right:4px;}
.chat-title .mi,.archive-head h3 .mi{vertical-align:-0.16em;margin-right:6px;}

/* ============ 图标 hover 动效（纯 transform，reduced-motion 自动关闭）============ */
/* 头部 / 对话框圆形图标按钮：hover 弹跳 + 轻旋（每次 hover 播放一次） */
.icon-btn:hover .mi{animation:mi-pop .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes mi-pop{
  0%{transform:translateY(0) rotate(0) scale(1);}
  45%{transform:translateY(-3px) rotate(-10deg) scale(1.18);}
  100%{transform:translateY(0) rotate(0) scale(1);}
}
/* 双区角色卡：hover 图标上浮 + 摇摆 */
.role-card:hover .role-icon svg{animation:mi-wiggle .5s ease;}
@keyframes mi-wiggle{
  0%{transform:translateY(0) rotate(0);}
  30%{transform:translateY(-4px) rotate(-7deg);}
  60%{transform:translateY(-2px) rotate(6deg);}
  100%{transform:translateY(0) rotate(0);}
}
/* E2E 锁徽章：hover 轻晃（加密感） */
.e2e-badge:hover .mi{animation:mi-shake .4s linear;}
@keyframes mi-shake{
  0%,100%{transform:rotate(0);}
  25%{transform:rotate(-12deg);}
  50%{transform:rotate(10deg);}
  75%{transform:rotate(-8deg);}
}
/* 标题行图标（会话 / 归档）：hover 轻转 */
.chat-title:hover .mi,.archive-head h3:hover .mi{transform:rotate(-12deg);transition:transform .25s ease;}
/* 列表行内图标（文件 / 文件夹 / 下载 / 信号 / 气泡）：hover 微放大 */
.q-name:hover .mi,.q-sub:hover .mi,.recv-head .name:hover .mi,.conn-head:hover .mi,.ai-note:hover .mi{transform:scale(1.22);transition:transform .18s ease;}

/* ============ 复杂模式：工作区设置弹窗（原版 TIER_SETUP） ============ */
.ws-setup-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:2px solid var(--ink);border-radius:var(--radius-xs);background:var(--ink);color:var(--cream);font-size:12px;font-weight:800;cursor:pointer;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;box-shadow:2px 2px 0 var(--ink);transition:transform .12s ease,background .15s;}
.ws-setup-btn:hover{transform:translate(-1px,-1px);background:var(--brand);color:#fff;}
.ws-setup-btn .mi{font-size:14px;}
.ws-setup-backdrop{position:fixed;inset:0;z-index:95;background:rgba(47,49,46,.55);display:grid;place-items:center;padding:22px;}
.ws-setup-panel{width:min(96vw,860px);max-height:88vh;display:flex;flex-direction:column;background:var(--card-bg);border:2px solid var(--ink);border-radius:8px;box-shadow:8px 8px 0 rgba(47,49,46,.2);overflow:hidden;}
.ws-setup-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:2px solid var(--ink);background:var(--pane-bg);flex-shrink:0;}
.ws-setup-head h3{font-size:16px;font-weight:800;font-family:var(--serif);display:inline-flex;align-items:center;gap:8px;}
.ws-setup-tiers{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px 4px;flex-shrink:0;}
.tier-card{padding:8px 14px;border:2px solid var(--ink);border-radius:var(--radius-xs);background:var(--cream);color:var(--ink);font-size:13px;font-weight:800;cursor:pointer;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;box-shadow:2px 2px 0 var(--ink);transition:transform .12s ease,background .15s,color .15s;}
.tier-card:hover{transform:translate(-1px,-1px);}
.tier-card.on{background:var(--brand);color:#fff;}
.ws-setup-preset{padding:8px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0;}
.ws-preset-label{font-size:11px;color:var(--muted);letter-spacing:.08em;font-family:var(--mono);}
.ws-preset-chips{display:flex;gap:6px;flex-wrap:wrap;}
.ws-preset-chips .fchip.preset{padding:4px 10px;border:2px solid var(--ink);border-radius:var(--radius-xs);background:var(--cream);color:var(--ink);font-size:11.5px;font-weight:800;cursor:pointer;font-family:var(--sans);box-shadow:2px 2px 0 var(--ink);transition:transform .12s ease,background .15s;}
.ws-preset-chips .fchip.preset:hover{transform:translate(-1px,-1px);}
.ws-preset-chips .fchip.preset.on{background:var(--sage);color:#fff;}
.ws-setup-body{flex:1;min-height:0;overflow-y:auto;padding:8px 16px 14px;display:flex;flex-direction:column;gap:12px;}
.setup-group{border:2px solid var(--ink);border-radius:6px;background:var(--cream);padding:10px 12px;box-shadow:var(--shadow-hard-sm);}
.setup-group-title{font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:8px;font-family:var(--serif);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.setup-phase{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--brand-700);background:var(--pane-bg);border:1px solid var(--ink);padding:1px 6px;text-transform:uppercase;}
.setup-field{padding:6px 0;border-top:1px dashed var(--line-2);}
.setup-field:first-of-type{border-top:none;}
.f-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.f-row.f-col{flex-direction:column;align-items:flex-start;gap:6px;}
.f-label{font-size:12.5px;font-weight:700;color:var(--ink-2);flex:1;min-width:180px;}
.f-hint{display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5;}
.f-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink-2);}
.f-toggle input{display:none;}
.f-toggle .f-box{width:34px;height:18px;border-radius:999px;background:var(--line-2);border:2px solid var(--ink);position:relative;flex:none;transition:background .15s;}
.f-toggle .f-box::after{content:'';position:absolute;top:1px;left:1px;width:12px;height:12px;border-radius:999px;background:var(--ink);transition:transform .15s;}
.f-toggle input:checked + .f-box{background:var(--brand);}
.f-toggle input:checked + .f-box::after{transform:translateX(16px);background:#fff;}
.f-seg{display:inline-flex;gap:4px;flex-wrap:wrap;}
.seg-btn{padding:4px 10px;border:2px solid var(--ink);border-radius:var(--radius-xs);background:var(--cream);color:var(--ink);font-size:11.5px;font-weight:800;cursor:pointer;font-family:var(--mono);}
.seg-btn.on{background:var(--ink);color:var(--cream);}
.f-row select{padding:5px 8px;border:2px solid var(--ink);border-radius:var(--radius-xs);font-size:12px;font-family:var(--sans);background:var(--cream);color:var(--ink);cursor:pointer;}
.f-row input[type=text],.f-row input[type=number]{width:200px;padding:5px 8px;border:2px solid var(--ink);border-radius:var(--radius-xs);font-size:12px;font-family:var(--mono);background:var(--cream);color:var(--ink);}
.f-chips{display:flex;gap:6px;flex-wrap:wrap;}
.f-chips .fchip{padding:4px 10px;border:2px solid var(--ink);border-radius:var(--radius-xs);background:var(--cream);color:var(--ink);font-size:11.5px;font-weight:800;cursor:pointer;font-family:var(--sans);}
.f-chips .fchip.on{background:var(--brand);color:#fff;}
.setup-adv{margin-top:8px;border:2px dashed var(--line);border-radius:6px;background:var(--pane-bg);}
.setup-adv summary{cursor:pointer;padding:7px 12px;font-size:12px;font-weight:800;color:var(--brand-700);font-family:var(--mono);letter-spacing:.04em;}
.setup-adv .setup-field{padding:4px 12px;}
.setup-empty{font-size:13px;color:var(--muted);line-height:1.7;padding:14px;}
.ws-setup-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:2px solid var(--ink);background:var(--pane-bg);flex-shrink:0;flex-wrap:wrap;}
.ws-setup-note{font-size:11px;color:var(--muted);margin-right:auto;font-family:var(--mono);line-height:1.5;max-width:56%;}

/* ============ 传输模式选择弹窗（基础 / 专业） ============ */
.mode-choice-backdrop{position:fixed;inset:0;z-index:90;background:rgba(47,49,46,.55);display:grid;place-items:center;padding:22px;}
.mode-choice-card{width:min(94vw,720px);background:var(--card-bg);border:2px solid var(--ink);border-radius:8px;box-shadow:8px 8px 0 rgba(47,49,46,.2);padding:22px 24px 26px;}
.mode-choice-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.mode-choice-head h3{font-size:19px;font-weight:800;font-family:var(--serif);color:var(--ink);}
.mode-choice-sub{font-size:13px;color:var(--ink-2);line-height:1.6;margin:0 0 18px;}
.mode-choice-btns{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.mode-btn{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;padding:18px 18px 16px;border:2px solid var(--ink);border-radius:8px;background:var(--cream);color:var(--ink);cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease,background .15s,color .15s;}
.mode-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);}
.mode-btn .mb-ico{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;background:var(--pane-bg);border:2px solid var(--ink);}
.mode-btn .mb-ico .mi{width:22px;height:22px;fill:var(--brand-700);}
.mode-btn .mb-title{font-size:16px;font-weight:800;font-family:var(--serif);}
.mode-btn .mb-desc{font-size:12.5px;color:var(--ink-2);line-height:1.5;}
.mode-btn .mb-tag{margin-top:2px;align-self:flex-start;font-size:11px;font-weight:800;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-xs);background:var(--pane-bg);border:1px solid var(--ink);color:var(--brand-700);}
.mode-btn.mode-basic{background:var(--cream);}
.mode-btn.mode-basic:hover{background:var(--sage);color:#fff;}
.mode-btn.mode-basic:hover .mb-ico{background:rgba(255,255,255,.18);border-color:#fff;}
.mode-btn.mode-basic:hover .mb-ico .mi{fill:#fff;}
.mode-btn.mode-basic:hover .mb-desc{color:rgba(255,255,255,.9);}
.mode-btn.mode-basic:hover .mb-tag{background:rgba(255,255,255,.2);border-color:#fff;color:#fff;}
.mode-btn.mode-pro{background:var(--ink);color:var(--cream);}
.mode-btn.mode-pro .mb-ico{background:rgba(255,255,255,.12);border-color:var(--cream);}
.mode-btn.mode-pro .mb-ico .mi{fill:var(--brand);}
.mode-btn.mode-pro .mb-desc{color:rgba(244,241,234,.82);}
.mode-btn.mode-pro .mb-tag{background:rgba(255,255,255,.14);border-color:var(--cream);color:var(--brand);}
.mode-btn.mode-pro:hover{background:var(--brand);color:#fff;}
.mode-btn.mode-pro:hover .mb-ico{background:rgba(255,255,255,.2);border-color:#fff;}
.mode-btn.mode-pro:hover .mb-ico .mi{fill:#fff;}
.mode-btn.mode-pro:hover .mb-desc{color:#fff;}
.mode-btn.mode-pro:hover .mb-tag{background:rgba(255,255,255,.25);border-color:#fff;color:#fff;}
.mode-btn.cur{outline:3px solid var(--brand);outline-offset:2px;}
@media(max-width:620px){
  .mode-choice-btns{grid-template-columns:1fr;}
}