/* ==========================================================================
   幻言 · AI 角色扮演 —— 样式表
   1. 变量与主题  2. 基础重置  3. 布局骨架  4. 通用组件
   5. 资源区      6. 对话区    7. 我的      8. 响应式
   ========================================================================== */

/* ---------- 1. 变量与主题 ---------- */
/* 与主题无关的量 */
:root{
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:22px;
  --sidebar-w:272px;
  --font-ui:"PingFang SC","Microsoft YaHei UI","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Songti SC","Noto Serif SC","Source Han Serif SC",Georgia,"STSong",serif;
  /* 字号与字体的用户设置（「我的 → 字号与字体」写这两个变量，全站生效） */
  --font-scale:1;
  --fs-base:15px;
  --font-body:var(--font-body-custom,var(--font-ui));
  /* AI 动用制裁时的「恐怖字体」：更重、更紧、带血色描边（字体族跟随用户的正文设置） */
  --font-horror:var(--font-body-custom,"Songti SC","Noto Serif SC","Source Han Serif SC",Georgia,"STSong",serif);
  --ease:cubic-bezier(.22,.61,.36,1);
}
html{font-size:var(--fs-base);}

/* 颜色令牌 —— 浅色：paper（默认）/ mist；深色：night / ink / vermilion / neon
   规则里不再直接写白/黑叠加色，全部走令牌，才能一套 CSS 吃两种模式。
   深色底色刻意抬高到 #16181d 一线，不再用近黑，长时间看不容易发涩。 */
:root,
body[data-theme="paper"]{
  --bg-0:#ebe5d9; --bg-1:#f4f0e8; --bg-2:#fcfaf6;
  --glow-1:rgba(122,152,214,.13); --glow-2:rgba(214,168,120,.11);
  --panel:rgba(255,255,255,.62); --panel-2:rgba(255,255,255,.84); --panel-3:rgba(255,255,255,.95);
  --line:rgba(74,62,44,.14); --line-strong:rgba(74,62,44,.26);
  --text:#2b2925; --text-2:#56524a; --text-3:#8a8375;
  --accent:#2f6fe0; --accent-2:#1c56bd; --accent-ink:#ffffff;
  --accent-soft:rgba(47,111,224,.10); --accent-line:rgba(47,111,224,.32);
  --purple:#7154cf; --gold:#a9761f; --ok:#18886a; --warn:#b5720f; --danger:#c9353f;
  --glass:linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.46));
  --glass-2:rgba(255,255,255,.78);
  --recess-1:rgba(96,84,64,.06); --recess-2:rgba(96,84,64,.12);
  --surface:rgba(253,251,246,.97);
  --track:rgba(74,62,44,.15);
  --scroll:rgba(74,62,44,.26);
  --switch-off:rgba(74,62,44,.20);
  --reveal:linear-gradient(180deg, rgba(252,250,245,.62), rgba(247,243,235,.92));
  --overlay:rgba(58,50,38,.44);
  --shadow-1:0 10px 28px rgba(84,70,48,.13);
  --shadow-2:0 24px 56px rgba(84,70,48,.20);
}
body[data-theme="mist"]{
  --bg-0:#e5eaf0; --bg-1:#eef2f7; --bg-2:#f9fbfd;
  --glow-1:rgba(120,160,220,.14); --glow-2:rgba(150,180,230,.11);
  --panel:rgba(255,255,255,.66); --panel-2:rgba(255,255,255,.88); --panel-3:rgba(255,255,255,.96);
  --line:rgba(52,68,92,.14); --line-strong:rgba(52,68,92,.26);
  --text:#232a35; --text-2:#4e5766; --text-3:#7c8697;
  --accent:#2b6fd4; --accent-2:#1c55ab; --accent-ink:#ffffff;
  --accent-soft:rgba(43,111,212,.10); --accent-line:rgba(43,111,212,.30);
  --purple:#6a55c9; --gold:#a2761f; --ok:#15876b; --warn:#b0740f; --danger:#c53945;
  --glass:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.48));
  --glass-2:rgba(255,255,255,.80);
  --recess-1:rgba(72,88,110,.06); --recess-2:rgba(72,88,110,.12);
  --surface:rgba(250,252,255,.97);
  --track:rgba(52,68,92,.15);
  --scroll:rgba(52,68,92,.26);
  --switch-off:rgba(52,68,92,.20);
  --reveal:linear-gradient(180deg, rgba(250,252,255,.62), rgba(243,247,252,.92));
  --overlay:rgba(38,46,58,.44);
  --shadow-1:0 10px 28px rgba(60,76,100,.13);
  --shadow-2:0 24px 56px rgba(60,76,100,.20);
}
body[data-theme="night"]{
  --bg-0:#16181d; --bg-1:#1b1e24; --bg-2:#222630;
  --glow-1:rgba(96,140,235,.17); --glow-2:rgba(150,120,220,.14);
  --panel:rgba(255,255,255,.055); --panel-2:rgba(255,255,255,.085); --panel-3:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.19);
  --text:#dfe3ec; --text-2:#a3aabc; --text-3:#79808f;
  --accent:#6f9dff; --accent-2:#9dbcff; --accent-ink:#0d1220;
  --accent-soft:rgba(111,157,255,.16); --accent-line:rgba(111,157,255,.40);
  --purple:#b294ff; --gold:#e7ba7c; --ok:#4fd3a6; --warn:#ffbe6b; --danger:#ff6b78;
  --glass:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016));
  --glass-2:rgba(28,31,39,.66);
  --recess-1:rgba(0,0,0,.20); --recess-2:rgba(0,0,0,.32);
  --surface:rgba(33,37,46,.96);
  --track:rgba(255,255,255,.10);
  --scroll:rgba(255,255,255,.14);
  --switch-off:rgba(255,255,255,.15);
  --reveal:linear-gradient(180deg, rgba(18,20,26,.34), rgba(14,16,21,.68));
  --overlay:rgba(10,11,14,.60);
  --shadow-1:0 10px 30px rgba(0,0,0,.30);
  --shadow-2:0 24px 60px rgba(0,0,0,.44);
}
body[data-theme="ink"]{
  --bg-0:#151a19; --bg-1:#1a201f; --bg-2:#212825;
  --glow-1:rgba(79,216,176,.15); --glow-2:rgba(140,190,175,.12);
  --panel:rgba(255,255,255,.055); --panel-2:rgba(255,255,255,.085); --panel-3:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.19);
  --text:#dfe6e3; --text-2:#a1aca7; --text-3:#78837e;
  --accent:#5fd8b4; --accent-2:#95efd6; --accent-ink:#08201a;
  --accent-soft:rgba(95,216,180,.15); --accent-line:rgba(95,216,180,.38);
  --purple:#9ed9c8; --gold:#d8c48a; --ok:#4fd3a6; --warn:#ffbe6b; --danger:#ff6b78;
  --glass:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016));
  --glass-2:rgba(27,33,31,.66);
  --recess-1:rgba(0,0,0,.20); --recess-2:rgba(0,0,0,.32);
  --surface:rgba(31,38,36,.96);
  --track:rgba(255,255,255,.10);
  --scroll:rgba(255,255,255,.14);
  --switch-off:rgba(255,255,255,.15);
  --reveal:linear-gradient(180deg, rgba(17,22,21,.34), rgba(13,17,16,.68));
  --overlay:rgba(9,12,11,.60);
  --shadow-1:0 10px 30px rgba(0,0,0,.30);
  --shadow-2:0 24px 60px rgba(0,0,0,.44);
}
body[data-theme="vermilion"]{
  --bg-0:#1d1716; --bg-1:#241c1a; --bg-2:#2c2320;
  --glow-1:rgba(255,107,94,.16); --glow-2:rgba(224,160,90,.15);
  --panel:rgba(255,255,255,.06); --panel-2:rgba(255,255,255,.09); --panel-3:rgba(255,255,255,.13);
  --line:rgba(255,235,225,.10); --line-strong:rgba(255,235,225,.20);
  --text:#ece3dd; --text-2:#b2a49d; --text-3:#877a74;
  --accent:#ff8a72; --accent-2:#ffb19c; --accent-ink:#2a100b;
  --accent-soft:rgba(255,138,114,.15); --accent-line:rgba(255,138,114,.40);
  --purple:#e0a05a; --gold:#f0c987; --ok:#5fcfa8; --warn:#ffbe6b; --danger:#ff6b78;
  --glass:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  --glass-2:rgba(38,29,26,.66);
  --recess-1:rgba(0,0,0,.20); --recess-2:rgba(0,0,0,.32);
  --surface:rgba(41,32,29,.96);
  --track:rgba(255,255,255,.10);
  --scroll:rgba(255,255,255,.14);
  --switch-off:rgba(255,255,255,.15);
  --reveal:linear-gradient(180deg, rgba(26,20,18,.34), rgba(20,15,14,.68));
  --overlay:rgba(14,10,9,.60);
  --shadow-1:0 10px 30px rgba(0,0,0,.30);
  --shadow-2:0 24px 60px rgba(0,0,0,.44);
}
body[data-theme="neon"]{
  --bg-0:#121620; --bg-1:#161b26; --bg-2:#1d2331;
  --glow-1:rgba(40,224,216,.16); --glow-2:rgba(255,106,213,.13);
  --panel:rgba(255,255,255,.055); --panel-2:rgba(255,255,255,.085); --panel-3:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.20);
  --text:#dde6ef; --text-2:#9fadbd; --text-3:#76838f;
  --accent:#3fe0d8; --accent-2:#8bf3ec; --accent-ink:#062024;
  --accent-soft:rgba(63,224,216,.15); --accent-line:rgba(63,224,216,.40);
  --purple:#ff7ad9; --gold:#ffd166; --ok:#4fd3a6; --warn:#ffbe6b; --danger:#ff6b78;
  --glass:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016));
  --glass-2:rgba(23,28,38,.68);
  --recess-1:rgba(0,0,0,.22); --recess-2:rgba(0,0,0,.34);
  --surface:rgba(28,34,45,.96);
  --track:rgba(255,255,255,.10);
  --scroll:rgba(255,255,255,.14);
  --switch-off:rgba(255,255,255,.15);
  --reveal:linear-gradient(180deg, rgba(15,18,25,.34), rgba(11,13,19,.68));
  --overlay:rgba(7,9,13,.60);
  --shadow-1:0 10px 30px rgba(0,0,0,.32);
  --shadow-2:0 24px 60px rgba(0,0,0,.46);
}

/* ---------- 2. 基础重置 ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:calc(14px * var(--font-scale));
  line-height:1.65;
  color:var(--text);
  background:var(--bg-0);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 8% -8%, var(--glow-1), transparent 62%),
    radial-gradient(820px 620px at 102% 2%, var(--glow-2), transparent 58%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 55%);
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0;}
ul,ol{list-style:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
input,textarea{font:inherit;color:inherit;}
textarea{resize:none;}
svg.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;}
::selection{background:var(--accent-soft);}

*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px;border:3px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:var(--scroll);background-clip:content-box;}

/* ---------- 3. 布局骨架 ---------- */
.app{
  position:relative;z-index:1;height:100vh;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
}
.topbar{
  display:flex;align-items:center;gap:26px;
  padding:12px 22px;
  border-bottom:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:11px;min-width:210px;}
.brand-mark{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:20px;font-weight:700;
  color:var(--accent-2);
  background:linear-gradient(145deg, var(--accent-soft), var(--panel-2));
  border:1px solid var(--accent-line);
  box-shadow:0 6px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-text{display:flex;flex-direction:column;line-height:1.25;}
.brand-text strong{font-family:var(--font-display);font-size:17px;letter-spacing:.14em;}
.brand-text span{font-size:11px;color:var(--text-3);letter-spacing:.06em;}

.nav{display:flex;gap:6px;padding:4px;border-radius:14px;background:var(--panel);border:1px solid var(--line);}
.nav-item{
  position:relative;display:flex;align-items:center;gap:7px;
  padding:8px 20px;border-radius:11px;color:var(--text-2);
  font-size:14px;letter-spacing:.06em;transition:.22s var(--ease);
}
.nav-item:hover{color:var(--text);background:var(--panel);}
.nav-item.active{
  color:var(--accent-2);
  background:linear-gradient(180deg, var(--accent-soft), var(--panel));
  box-shadow:inset 0 0 0 1px var(--accent-line), 0 6px 18px rgba(0,0,0,.3);
}
.nav-dot{
  position:absolute;top:5px;right:8px;width:6px;height:6px;border-radius:50%;
  background:var(--accent);opacity:0;transform:scale(.4);transition:.25s var(--ease);
}
.nav-dot.on{opacity:1;transform:none;box-shadow:0 0 0 3px var(--accent-soft);}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.quota-mini{
  display:flex;align-items:center;gap:9px;padding:7px 14px;border-radius:11px;
  background:var(--panel);border:1px solid var(--line);font-size:12.5px;color:var(--text-2);
}
.quota-mini b{color:var(--accent-2);font-weight:600;}
.quota-mini .bar{width:64px;height:5px;border-radius:4px;background:var(--track);overflow:hidden;}
.quota-mini .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:4px;transition:width .4s var(--ease);}
.icon-btn{
  position:relative;
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--panel);color:var(--text-2);transition:.22s var(--ease);
}
.icon-btn:hover{color:var(--text);border-color:var(--line-strong);transform:translateY(-1px);}
/* 内容后台入口的状态点：绿色=已连后端，可在线编辑 */
.dot-state{
  position:absolute;right:6px;bottom:6px;width:6px;height:6px;border-radius:50%;
  background:var(--text-3);opacity:.45;transition:.25s var(--ease);
}
.dot-state.on{background:var(--ok);opacity:1;box-shadow:0 0 0 3px rgba(69,211,164,.18);}

.workbench{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:0;}
.main{position:relative;min-width:0;min-height:0;}
.view{display:none;position:absolute;inset:0;flex-direction:column;min-height:0;}
.view.active{display:flex;}
.view-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;}

.global-foot{
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  padding:8px 20px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--text-3);letter-spacing:.03em;
  background:var(--recess-1);
}
.global-foot .sep{opacity:.4;}

/* ---------- 3.1 左侧会话区 ---------- */
.sidebar{
  display:flex;flex-direction:column;min-height:0;
  border-right:1px solid var(--line);
  background:var(--glass);
}
.sidebar-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 16px 12px;border-bottom:1px solid var(--line);
}
.sidebar-title{font-size:12.5px;letter-spacing:.22em;color:var(--text-3);}
.mini-btn{
  font-size:12px;padding:5px 11px;border-radius:9px;color:var(--text-2);
  border:1px solid var(--line);background:var(--panel);transition:.2s var(--ease);
}
.mini-btn:hover{color:var(--accent-2);border-color:var(--accent-line);background:var(--accent-soft);}

.conv-list{flex:1;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px;}
.conv-item{
  position:relative;display:flex;gap:10px;align-items:center;
  padding:10px 11px;border-radius:13px;cursor:pointer;
  border:1px solid transparent;transition:.2s var(--ease);
}
.conv-item:hover{background:var(--panel);border-color:var(--line);}
.conv-item.active{
  background:linear-gradient(180deg, var(--accent-soft), var(--panel));
  border-color:var(--accent-line);
  box-shadow:0 10px 26px -18px var(--accent);
}
.conv-ico{
  width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;
  font-family:var(--font-display);font-size:15px;color:#fff;
  border:1px solid rgba(255,255,255,.14);
}
.conv-main{min-width:0;flex:1;}
.conv-title{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--text);letter-spacing:.03em;}
.conv-title > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.conv-prev{
  font-size:11.5px;color:var(--text-3);margin-top:2px;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.conv-time{font-size:10px;color:var(--text-3);opacity:.72;flex:none;align-self:flex-start;padding-top:3px;}
.conv-del{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:7px;display:none;place-items:center;
  font-size:15px;line-height:1;color:var(--text-3);background:var(--surface);
  border:1px solid var(--line);
}
.conv-item:hover .conv-del{display:grid;}
.conv-del:hover{color:var(--danger);border-color:rgba(255,95,109,.45);}
.mini-tag{
  flex:none;font-size:10px;padding:1px 7px;border-radius:999px;letter-spacing:.04em;
  color:var(--text-3);border:1px solid var(--line);background:var(--recess-1);
}
.mini-tag.hp{color:var(--ok);border-color:rgba(69,211,164,.35);}
.mini-tag.warn{color:var(--warn);border-color:rgba(255,185,88,.35);}
.mini-tag.dead{color:var(--danger);border-color:rgba(255,95,109,.35);}
.sidebar-foot{
  display:flex;align-items:center;gap:7px;
  padding:11px 16px;border-top:1px solid var(--line);
  font-size:11px;color:var(--text-3);
}
.dot-ok{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(69,211,164,.14);}

/* ---------- 4. 通用组件 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 17px;border-radius:11px;font-size:13.5px;
  border:1px solid var(--line);background:var(--panel);color:var(--text-2);
  transition:.2s var(--ease);white-space:nowrap;
}
.btn:hover{color:var(--text);border-color:var(--line-strong);background:var(--panel-2);}
.btn:active{transform:translateY(1px);}
.btn.primary{
  background:linear-gradient(180deg,var(--accent),var(--accent));color:var(--accent-ink);
  border-color:transparent;font-weight:600;
  box-shadow:0 10px 24px -10px var(--accent);
}
.btn.primary:hover{filter:brightness(1.08);color:var(--accent-ink);}
.btn.ghost{background:transparent;}
.btn.danger{color:var(--danger);border-color:rgba(255,95,109,.3);}
.btn.danger:hover{background:rgba(255,95,109,.12);color:var(--danger);}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:9px;}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none;}

.pill{
  padding:6px 13px;border-radius:999px;font-size:12.5px;color:var(--text-2);
  border:1px solid var(--line);background:var(--panel);transition:.2s var(--ease);
}
.pill:hover{color:var(--text);border-color:var(--line-strong);}
.pill.on{color:var(--accent-2);background:var(--accent-soft);border-color:var(--accent-line);}

.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:7px;font-size:11px;letter-spacing:.04em;
  background:rgba(8,9,14,.62);border:1px solid var(--line-strong);color:var(--text-2);
  backdrop-filter:blur(6px);
}
.badge.hot{color:var(--gold);border-color:rgba(231,186,124,.4);}
.badge.rate{color:var(--danger);border-color:rgba(255,95,109,.42);}
.badge.soon{color:var(--purple);border-color:rgba(168,132,255,.4);}

.chip{
  display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;
  color:var(--text-2);background:var(--panel);border:1px solid var(--line);
}
.progress{height:7px;border-radius:6px;background:var(--track);overflow:hidden;}
.progress i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .5s var(--ease);}

.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:70px 20px;text-align:center;color:var(--text-3);
}
.empty .big{font-size:34px;opacity:.5;}

.toasts{position:fixed;right:22px;bottom:60px;z-index:80;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none;}
/* 进对话后自动全屏的倒计时提示：悬在输入区上方，整条都能点（点哪都等于取消） */
.autofocus-hint{
  position:fixed;left:50%;transform:translateX(-50%);bottom:104px;z-index:95;
  display:flex;align-items:center;gap:12px;padding:9px 10px 9px 15px;border-radius:999px;
  background:rgba(26,24,21,.93);color:#fff;font-size:13px;letter-spacing:.01em;
  box-shadow:0 10px 28px rgba(0,0,0,.3);cursor:pointer;user-select:none;white-space:nowrap;
  animation:afIn .22s ease-out;
}
@keyframes afIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.autofocus-hint .af-n{font-family:var(--mono);font-size:14px;color:#8fb6ff;margin-left:2px}
.autofocus-hint .af-close{
  font:inherit;font-size:12.5px;padding:4px 11px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.42);background:transparent;color:#fff;white-space:nowrap;
}
.autofocus-hint .af-close:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.7);}
body[data-focus="1"] .autofocus-hint{display:none;}
@media (max-width:700px){
  .autofocus-hint{bottom:150px;font-size:12.5px;padding:8px 9px 8px 12px;gap:9px;}
}
.toast{
  min-width:210px;max-width:340px;padding:11px 16px;border-radius:13px;
  background:var(--surface);border:1px solid var(--line-strong);
  box-shadow:var(--shadow-2);font-size:13px;color:var(--text-2);
  animation:toastIn .32s var(--ease);backdrop-filter:blur(10px);
}
.toast b{color:var(--text);font-weight:600;}
.toast.ok{border-color:rgba(69,211,164,.45);}
.toast.warn{border-color:rgba(255,185,88,.45);}
.toast.danger{border-color:rgba(255,95,109,.45);}
.toast.out{animation:toastOut .3s var(--ease) forwards;}
@keyframes toastIn{from{opacity:0;transform:translateX(18px) scale(.97);}}
@keyframes toastOut{to{opacity:0;transform:translateX(18px) scale(.97);}}

/* 弹窗 */
.modal-mask{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:var(--overlay);backdrop-filter:blur(6px);animation:fadeIn .2s var(--ease);
}
.modal{
  width:min(520px,92vw);max-height:82vh;overflow:auto;
  border-radius:var(--radius-lg);border:1px solid var(--line-strong);
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  box-shadow:var(--shadow-2);padding:24px;
}
.modal h3{font-family:var(--font-display);font-size:18px;margin-bottom:12px;letter-spacing:.06em;}
.modal .modal-body{color:var(--text-2);font-size:13.5px;line-height:1.85;}
.modal .modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}
@keyframes fadeIn{from{opacity:0;}}

/* 弹出层 */
.popover{
  position:fixed;z-index:85;min-width:230px;padding:10px;
  border-radius:15px;border:1px solid var(--line-strong);
  background:var(--surface);backdrop-filter:blur(14px);
  box-shadow:var(--shadow-2);animation:popIn .18s var(--ease);
}
@keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.98);}}
.popover-item{
  display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
  padding:9px 11px;border-radius:10px;transition:.18s var(--ease);
}
.popover-item:hover{background:var(--panel-2);}
.popover-item.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line);}
.popover-item .sw{width:22px;height:22px;border-radius:7px;flex:none;border:1px solid var(--line-strong);}
.popover-item .t{font-size:13px;color:var(--text);}
.popover-item .d{font-size:11.5px;color:var(--text-3);line-height:1.5;}

/* 折叠面板 */
.acc{display:flex;flex-direction:column;gap:12px;}
.acc-item{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);
  overflow:hidden;transition:.25s var(--ease);
}
.acc-item:hover{border-color:var(--line-strong);}
.acc-head{
  display:flex;align-items:center;gap:13px;width:100%;padding:15px 18px;text-align:left;
}
.acc-ico{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--accent-soft);color:var(--accent-2);border:1px solid var(--accent-line);
}
.acc-titles{display:flex;flex-direction:column;line-height:1.35;min-width:0;}
.acc-titles .t{font-size:14.5px;letter-spacing:.04em;}
.acc-titles .s{font-size:11.5px;color:var(--text-3);}
.acc-meta{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-3);}
.acc-arrow{transition:.3s var(--ease);color:var(--text-3);}
.acc-item.open .acc-arrow{transform:rotate(180deg);color:var(--accent-2);}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease);}
.acc-item.open .acc-body{grid-template-rows:1fr;}
.acc-body > div{overflow:hidden;}
.acc-inner{padding:2px 18px 20px;}

/* ---------- 5. 资源区 ---------- */
.res-wrap{padding:26px 30px 40px;max-width:1420px;margin:0 auto;width:100%;}
.res-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:20px;}
.res-hero h1{
  font-family:var(--font-display);font-size:28px;letter-spacing:.16em;font-weight:600;
  background:linear-gradient(120deg, var(--text), var(--accent-2) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.res-hero p{color:var(--text-3);font-size:13px;margin-top:5px;letter-spacing:.04em;}
.hero-stats{display:flex;gap:22px;}
.hero-stats .st{text-align:right;}
.hero-stats .st b{display:block;font-family:var(--font-display);font-size:20px;color:var(--accent-2);letter-spacing:.05em;}
.hero-stats .st span{font-size:11px;color:var(--text-3);letter-spacing:.08em;}

.search-bar{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:15px;
  border:1px solid var(--line);background:var(--panel);
  transition:.25s var(--ease);
}
.search-bar:focus-within{border-color:var(--accent-line);background:var(--panel-2);box-shadow:0 0 0 4px var(--accent-soft);}
.search-bar svg.ico{color:var(--text-3);width:19px;height:19px;}
.search-bar input{
  flex:1;background:none;border:0;outline:none;font-size:14.5px;letter-spacing:.02em;
}
.search-bar input::placeholder{color:var(--text-3);}
.search-bar .clear{color:var(--text-3);padding:2px 6px;border-radius:7px;font-size:16px;line-height:1;}
.search-bar .clear:hover{color:var(--text);background:var(--panel-2);}

.filterbar{
  margin-top:14px;padding:14px 16px;border-radius:15px;
  border:1px solid var(--line);background:var(--panel);
  display:flex;flex-direction:column;gap:11px;
}
.filter-row{display:flex;align-items:center;gap:12px;}
.filter-label{
  flex:none;width:42px;font-size:12px;color:var(--text-3);letter-spacing:.14em;
  border-right:1px solid var(--line);padding-right:12px;
}
.pills{display:flex;gap:7px;flex-wrap:wrap;}
.filter-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:11px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--text-3);
}
.filter-foot b{color:var(--accent-2);font-weight:600;}

.res-grid{
  margin-top:22px;
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
}
.res-card{
  position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  border:1px solid var(--line);
  background:var(--panel);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), background .35s var(--ease);
}
.res-card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-1);}
.res-card.locked{cursor:default;}
.res-card.locked:hover{transform:none;}

.res-cover{position:relative;aspect-ratio:16/10;overflow:hidden;}
.res-cover > svg,.res-cover > img{width:100%;height:100%;display:block;transition:opacity .4s var(--ease), filter .4s var(--ease);}
.res-cover > img{object-fit:cover;}
.res-cover-mask{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(7,8,13,.94) 4%, rgba(7,8,13,.45) 46%, rgba(7,8,13,.06) 100%);
  transition:opacity .4s var(--ease);
}
.res-badges{position:absolute;top:11px;left:11px;display:flex;gap:6px;}
.res-cover-title{position:absolute;left:15px;right:15px;bottom:12px;}
.res-cover-title h3{
  font-family:var(--font-display);font-size:19px;letter-spacing:.1em;font-weight:600;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}
.res-cover-title p{font-size:11.5px;color:var(--text-2);letter-spacing:.1em;margin-top:2px;}

.res-body{padding:12px 16px 16px;}
.res-meta{display:flex;flex-direction:column;gap:5px;}
.res-meta li{
  position:relative;padding-left:12px;font-size:12.5px;color:var(--text-2);line-height:1.6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.res-meta li::before{
  content:"";position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;
  background:var(--accent);opacity:.75;
}
.res-brief{
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);
  font-size:12.5px;color:var(--text-3);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}

/* 悬停片刻：背景透明 + 展开更多介绍 */
.res-reveal{
  position:absolute;inset:0;padding:17px 17px 18px;
  display:flex;flex-direction:column;gap:9px;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .34s var(--ease), transform .34s var(--ease);
  background:var(--reveal);
  backdrop-filter:blur(3px);
}
.res-card.revealed{
  background:transparent;
  border-color:var(--accent-line);
  box-shadow:0 22px 60px -22px var(--accent), 0 0 0 1px var(--accent-line) inset;
}
.res-card.revealed .res-cover svg,
.res-card.revealed .res-cover img{opacity:.085;filter:saturate(.35) blur(1px);}
.res-card.revealed .res-cover-mask{opacity:0;}
.res-card.revealed .res-cover-title,
.res-card.revealed .res-body{opacity:0;transition:opacity .28s var(--ease);}
.res-card.revealed .res-reveal{opacity:1;transform:none;pointer-events:auto;}
.res-reveal-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.res-reveal-head h3{font-family:var(--font-display);font-size:17px;letter-spacing:.09em;}
.res-reveal-head span{font-size:11px;color:var(--text-3);letter-spacing:.06em;}
.res-reveal-head .heat{margin-left:auto;font-style:normal;font-size:11px;color:var(--text-3);white-space:nowrap;}
.res-reveal .intro{
  flex:0 1 auto;min-height:0;margin-bottom:auto;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;
  font-size:12.5px;line-height:1.78;color:var(--text-2);
}
.res-reveal .tags{display:flex;gap:6px;flex-wrap:wrap;}
.res-reveal .tags i{
  font-style:normal;font-size:11px;padding:2px 9px;border-radius:999px;
  color:var(--accent-2);background:var(--accent-soft);border:1px solid var(--accent-line);
}
.res-reveal-foot{
  display:flex;align-items:center;gap:8px;min-height:34px;
  padding-right:96px;   /* 给右下角的「游玩」按钮留位 */
}

/* 游玩按钮：随卡片展开出现；鼠标移开（不再悬停）即消失。
   选中状态只保留卡片描边，按钮本身不常驻。 */
.play-btn{
  position:absolute;right:14px;bottom:14px;z-index:5;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;border-radius:11px;
  font-size:13.5px;font-weight:700;letter-spacing:.18em;
  color:#eaf1ff;background:linear-gradient(180deg, rgba(77,141,255,.95), rgba(49,104,214,.95));
  box-shadow:0 12px 30px -10px rgba(77,141,255,.9), inset 0 1px 0 rgba(255,255,255,.25);
  opacity:0;transform:translateY(8px) scale(.94);pointer-events:none;
  transition:.3s var(--ease);
}
.res-card.revealed .play-btn{opacity:1;transform:none;pointer-events:auto;animation:pulseBlue 2.4s infinite;}
.res-card.selected{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-line), 0 18px 40px -20px rgba(77,141,255,.7);}
.play-btn:hover{filter:brightness(1.1);}
@keyframes pulseBlue{
  0%,100%{box-shadow:0 12px 30px -10px rgba(77,141,255,.9), inset 0 1px 0 rgba(255,255,255,.25);}
  50%{box-shadow:0 12px 34px -6px rgba(77,141,255,1), 0 0 0 6px rgba(77,141,255,.10), inset 0 1px 0 rgba(255,255,255,.25);}
}
.res-card .soon-btn{
  position:absolute;right:14px;bottom:14px;z-index:4;
  padding:7px 15px;border-radius:10px;font-size:12.5px;letter-spacing:.1em;
  color:var(--purple);border:1px solid rgba(168,132,255,.4);background:rgba(168,132,255,.1);
  backdrop-filter:blur(6px);
}
.res-card .soon-btn:hover{background:rgba(168,132,255,.2);}
.res-card.fav::after{
  content:"\2605";position:absolute;top:10px;right:12px;z-index:4;
  font-size:14px;color:var(--gold);text-shadow:0 2px 8px rgba(0,0,0,.7);
}

/* ---------- 6. 对话区 ---------- */
.chat{display:flex;flex-direction:column;height:100%;min-height:0;}

.chat-head{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:13px 24px;border-bottom:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(12px);
}
.chat-id{display:flex;align-items:center;gap:12px;min-width:0;}
.chat-avatar{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;
  font-family:var(--font-display);font-size:19px;color:#fff;
  border:1px solid var(--line-strong);box-shadow:0 8px 22px rgba(0,0,0,.4);
}
.chat-id h2{font-family:var(--font-display);font-size:17px;letter-spacing:.1em;font-weight:600;}
.chat-id p{font-size:11.5px;color:var(--text-3);letter-spacing:.04em;margin-top:1px;}
.chat-id .status{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2px 9px;border-radius:999px;
  margin-left:8px;border:1px solid var(--line);color:var(--text-2);
}
.status.on{color:var(--ok);border-color:rgba(69,211,164,.35);background:rgba(69,211,164,.08);}
.status.warn{color:var(--warn);border-color:rgba(255,185,88,.35);background:rgba(255,185,88,.08);}
.status.dead{color:var(--danger);border-color:rgba(255,95,109,.35);background:rgba(255,95,109,.08);}

.chat-stats{display:flex;gap:20px;align-items:center;margin-left:6px;}
.stat{min-width:132px;}
.stat-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px;}
.stat-top span{font-size:11px;color:var(--text-3);letter-spacing:.12em;}
.stat-top b{font-family:var(--font-display);font-size:15px;letter-spacing:.04em;}
.hp-bar,.aff-bar{position:relative;height:8px;border-radius:6px;background:var(--track);overflow:hidden;}
.hp-bar i{display:block;height:100%;border-radius:6px;transition:width .55s var(--ease), background .4s ease;
  background:linear-gradient(90deg,#45d3a4,#7ee7c4);}
.hp-bar.mid i{background:linear-gradient(90deg,#ffb958,#ffd58a);}
.hp-bar.low i{background:linear-gradient(90deg,#ff5f6d,#ff9a8b);}
.hp-bar.low{animation:hpPulse 1.6s infinite;}
@keyframes hpPulse{50%{box-shadow:0 0 0 4px rgba(255,95,109,.13);}}
.aff-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--purple),#d6b6ff);transition:width .55s var(--ease);}
.chat-actions{margin-left:auto;display:flex;gap:9px;}

.chat-stage{
  position:relative;flex:1;min-height:0;display:flex;flex-direction:column;
  background:
    radial-gradient(900px 460px at 78% -12%, var(--sc-3, rgba(77,141,255,.14)), transparent 62%),
    radial-gradient(700px 520px at 4% 108%, var(--sc-2, rgba(168,132,255,.12)), transparent 60%),
    linear-gradient(180deg, var(--sc-1, var(--recess-1)), var(--recess-2));
  transition:background .6s ease;
}
.stage-name{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:11px;letter-spacing:.24em;color:var(--text-3);
  padding:4px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--glass-2);backdrop-filter:blur(8px);pointer-events:none;
}
.messages{
  flex:1;min-height:0;overflow-y:auto;padding:26px 0 14px;
  display:flex;flex-direction:column;gap:16px;
}
.chat-stage.has-scene .messages{padding-top:58px;}   /* 给顶部场景名留出空间 */
.msg-row{width:100%;max-width:900px;margin:0 auto;padding:0 28px;display:flex;gap:12px;animation:msgIn .34s var(--ease);}
@keyframes msgIn{from{opacity:0;transform:translateY(9px);}}
.msg-row.user{flex-direction:row-reverse;}
.msg-av{
  width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;
  font-family:var(--font-display);font-size:15px;color:#fff;
  border:1px solid var(--line-strong);box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.msg-body{min-width:0;max-width:74%;display:flex;flex-direction:column;gap:5px;}
.msg-row.user .msg-body{align-items:flex-end;}
.msg-name{font-size:11.5px;color:var(--text-3);letter-spacing:.08em;padding:0 4px;}
.bubble{
  position:relative;padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.85;
  border:1px solid var(--line);background:var(--panel-2);color:var(--text);
  word-break:break-word;white-space:pre-wrap;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.9);
}
.msg-row.ai .bubble{border-top-left-radius:5px;}
.msg-row.user .bubble{
  border-top-right-radius:5px;border-color:var(--accent-line);
  background:linear-gradient(180deg, var(--accent-soft), var(--panel));
}
body[data-bubble="crisp"] .bubble{border-radius:7px;font-size:13.5px;}
body[data-bubble="outline"] .bubble{background:transparent;border-color:var(--line-strong);}
.msg-time{font-size:10.5px;color:var(--text-3);opacity:.7;padding:0 4px;}
.bubble.typing{display:inline-flex;gap:5px;align-items:center;padding:14px 18px;}
.bubble.typing i{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:bounce 1.1s infinite;}
.bubble.typing i:nth-child(2){animation-delay:.15s;}
.bubble.typing i:nth-child(3){animation-delay:.3s;}
/* 推理中的说明 + 流式光标：本机 CPU 模型慢，得让人看见它在写而不是卡死 */
.bubble.typing{flex-wrap:wrap;}
.typing-note{font-size:11.5px;color:var(--text-3);letter-spacing:.02em;margin-left:6px;width:100%;}
.bubble.streaming .caret{
  display:inline-block;width:7px;height:1.05em;margin-left:2px;vertical-align:-.14em;
  background:var(--accent-2);opacity:.75;animation:caretBlink 1s steps(1,end) infinite;
}
@keyframes caretBlink{0%,49%{opacity:.75;}50%,100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){.bubble.streaming .caret{animation:none;}}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-4px);opacity:1;}}

/* 剧情提醒卡 */
.reminder{
  width:100%;max-width:900px;margin:0 auto;padding:0 28px;animation:msgIn .4s var(--ease);
}
.reminder-inner{
  border-radius:var(--radius);border:1px solid var(--accent-line);
  background:linear-gradient(180deg, var(--accent-soft), var(--panel));
  padding:18px 22px;box-shadow:0 18px 44px -26px var(--accent);
}
.reminder-top{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.reminder-top .tag{
  font-size:11px;letter-spacing:.18em;color:var(--accent-2);
  padding:3px 10px;border-radius:999px;background:var(--panel-3);border:1px solid var(--accent-line);
}
.reminder-top h4{font-family:var(--font-display);font-size:15px;letter-spacing:.1em;}
.reminder ol{counter-reset:r;display:flex;flex-direction:column;gap:8px;}
.reminder ol li{
  counter-increment:r;position:relative;padding-left:28px;font-size:13px;line-height:1.75;color:var(--text-2);
}
.reminder ol li::before{
  content:counter(r,decimal-leading-zero);position:absolute;left:0;top:2px;
  font-family:var(--font-display);font-size:11px;color:var(--accent-2);opacity:.85;
}
.reminder-foot{
  margin-top:13px;padding-top:11px;border-top:1px dashed var(--accent-line);
  font-size:11.5px;color:var(--text-3);line-height:1.7;
}

/* 旁白 / 系统提示 */
.beat{
  width:100%;max-width:900px;margin:0 auto;padding:0 28px;text-align:center;animation:msgIn .4s var(--ease);
}
.beat span{
  display:inline-block;max-width:660px;font-family:var(--font-display);
  font-size:13px;line-height:2;color:var(--text-2);letter-spacing:.05em;
  padding:10px 20px;border-radius:13px;border:1px dashed var(--line-strong);
  background:var(--panel);
}
.notice{width:100%;max-width:900px;margin:0 auto;padding:0 28px;animation:msgIn .3s var(--ease);}
.notice span{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;padding:7px 14px;border-radius:10px;letter-spacing:.03em;
  border:1px solid var(--line);color:var(--text-2);background:var(--panel-2);
}
.notice.hp span{color:#ff9a8b;border-color:rgba(255,95,109,.35);background:rgba(255,95,109,.09);}
.notice.gain span{color:#8ff0d3;border-color:rgba(69,211,164,.35);background:rgba(69,211,164,.09);}
.notice.warn span{color:var(--warn);border-color:rgba(255,185,88,.4);background:rgba(255,185,88,.1);}
.notice.danger span{color:var(--danger);border-color:rgba(255,95,109,.45);background:rgba(255,95,109,.13);font-weight:600;}
.notice.scene span{color:var(--accent-2);border-color:var(--accent-line);background:var(--accent-soft);}
.notice.center{text-align:center;}
.notice.center span{display:inline-flex;}

/* 处刑 */
.execution{
  width:100%;max-width:900px;margin:0 auto;padding:0 28px;animation:msgIn .5s var(--ease);
}
.execution-inner{
  text-align:center;padding:26px 24px;border-radius:var(--radius);
  border:1px solid rgba(255,95,109,.45);
  background:radial-gradient(600px 200px at 50% 0%, rgba(255,95,109,.16), rgba(255,95,109,.04));
  box-shadow:0 22px 60px -30px rgba(255,95,109,.9);
}
.execution-inner .mark{
  font-family:var(--font-display);font-size:26px;letter-spacing:.4em;color:var(--danger);
  text-shadow:0 0 26px rgba(255,95,109,.55);margin-bottom:6px;
}
.execution-inner .sub{font-size:11.5px;color:var(--text-3);letter-spacing:.2em;margin-bottom:14px;}
.execution-inner .line{
  font-family:var(--font-display);font-size:14.5px;line-height:2.1;color:var(--text);letter-spacing:.06em;
}

/* 输入区 */
.composer{
  border-top:1px solid var(--line);padding:14px 24px 12px;
  background:linear-gradient(180deg, var(--panel), var(--recess-1));
}
.composer-inner{max-width:900px;margin:0 auto;display:flex;gap:12px;align-items:flex-end;}
.composer-box{
  flex:1;display:flex;align-items:flex-end;gap:10px;padding:10px 14px;border-radius:15px;
  border:1px solid var(--line);background:var(--panel);transition:.22s var(--ease);
}
.composer-box:focus-within{border-color:var(--accent-line);background:var(--panel-2);box-shadow:0 0 0 4px var(--accent-soft);}
.composer-box textarea{
  flex:1;background:none;border:0;outline:none;font-size:14px;line-height:1.75;
  max-height:150px;min-height:26px;padding:2px 0;
}
.composer-box textarea::placeholder{color:var(--text-3);}
.send-btn{
  padding:11px 22px;border-radius:13px;font-size:14px;font-weight:600;
  color:var(--accent-ink);background:linear-gradient(180deg,var(--accent),var(--accent));
  box-shadow:0 12px 28px -12px var(--accent);transition:.2s var(--ease);
}
.send-btn:hover{filter:brightness(1.08);}
.send-btn:disabled{opacity:.4;cursor:not-allowed;filter:none;box-shadow:none;}
.composer-hint{
  max-width:900px;margin:9px auto 0;font-size:11px;color:var(--text-3);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;letter-spacing:.03em;
}
.hints{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;max-width:900px;margin-left:auto;margin-right:auto;}
/* 没有可用模型 / 额度用完时的提示条：说明现状 + 给出可点的出口 */
.model-warn{
  max-width:900px;margin:0 auto 10px;padding:12px 15px;border-radius:14px;
  display:flex;align-items:flex-start;gap:12px;
  border:1px solid rgba(255,185,88,.38);background:rgba(255,185,88,.08);
}
body[data-mode="light"] .model-warn{border-color:rgba(181,114,15,.3);background:rgba(255,196,88,.14);}
.model-warn .mw-ico{font-size:15px;line-height:1.5;color:var(--warn,#ffb958);flex:none;}
.model-warn .mw-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.model-warn .mw-main b{font-family:var(--font-display);font-size:13.5px;letter-spacing:.06em;color:var(--text);}
.model-warn .mw-main span{font-size:12px;line-height:1.65;color:var(--text-2);}
.model-warn .mw-act{display:flex;gap:8px;flex:none;align-items:center;padding-top:2px;}
@media (max-width:820px){
  .model-warn{flex-wrap:wrap;}
  .model-warn .mw-act{width:100%;justify-content:flex-start;}
}
.hint-chip{
  font-size:12px;padding:6px 13px;border-radius:999px;color:var(--text-2);
  border:1px dashed var(--line-strong);background:var(--panel);transition:.2s var(--ease);
}
.hint-chip:hover{color:var(--accent-2);border-color:var(--accent-line);border-style:solid;background:var(--accent-soft);}

.locked-panel{
  max-width:900px;margin:0 auto;padding:16px 20px;border-radius:15px;text-align:center;
  border:1px solid rgba(255,95,109,.4);background:rgba(255,95,109,.07);
}
.locked-panel.paused{border-color:rgba(255,185,88,.4);background:rgba(255,185,88,.07);}
.locked-panel h4{font-family:var(--font-display);font-size:15px;letter-spacing:.14em;margin-bottom:6px;}
.locked-panel p{font-size:12.5px;color:var(--text-2);margin-bottom:13px;line-height:1.7;}
.locked-panel .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
/* 每日额度用尽：不是惩罚，用中性偏暖的提示，并给出「换成自己的模型」的出口 */
.locked-panel.quota{
  border-color:rgba(255,185,88,.42);background:rgba(255,185,88,.07);
  margin-bottom:14px;text-align:left;
}
.locked-panel.quota h4{color:var(--warn,#ffb958);}
.locked-panel.quota .row{justify-content:flex-start;}
.quota-tag{
  padding:2px 8px;border-radius:999px;border:1px solid var(--line-strong);
  color:var(--text-3);font-size:10.5px;letter-spacing:.04em;
}
.quota-tag.ok{color:var(--ok,#5fd6a4);border-color:rgba(95,214,164,.4);}
.quota-tag.warn{color:var(--warn,#ffb958);border-color:rgba(255,185,88,.4);}

/* ---------- 7. 我的 ---------- */
/* 「现在是谁在说话」+ 换成云端的快捷说明 */
.api-now{
  padding:12px 14px;border-radius:var(--radius-sm);margin-bottom:14px;
  border:1px solid var(--line);background:var(--recess-1);
}
.api-now.warn{border-color:rgba(255,185,88,.35);background:rgba(255,185,88,.07);}
.api-now.ok{border-color:rgba(24,136,106,.32);background:rgba(24,136,106,.06);}
.api-now .an-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px;}
.api-now .an-top b{font-size:13px;letter-spacing:.05em;}
.api-now .an-badge{
  font-size:11.5px;padding:2px 9px;border-radius:999px;border:1px solid var(--line-strong);color:var(--text-2);
}
.api-now .an-badge.warn{color:var(--warn);border-color:rgba(255,185,88,.45);}
.api-now .an-badge.ok{color:var(--ok);border-color:rgba(24,136,106,.42);}
.api-now .an-model{font-size:12.5px;color:var(--accent-2);letter-spacing:.03em;word-break:break-all;}
.api-now .an-model em{font-style:normal;color:var(--text-3);font-size:11.5px;}
.api-now .an-note{font-size:11.5px;color:var(--text-3);line-height:1.65;margin-top:4px;}
.api-quick{
  padding:11px 14px;border-radius:var(--radius-sm);margin-bottom:12px;
  border:1px dashed var(--accent-line);background:var(--accent-soft);
}
.api-quick .aq-title{font-size:12.5px;color:var(--text);margin-bottom:7px;line-height:1.6;}
.api-quick .aq-steps{margin:0;padding-left:19px;font-size:11.5px;color:var(--text-2);line-height:1.85;}
.api-quick .aq-steps b{color:var(--accent-2);}
/* 免费额度清单（我的 → 模型） */
.free-tier{margin:0 0 12px;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--panel);}
.free-tier > summary{cursor:pointer;font-size:12.5px;color:var(--accent-2);letter-spacing:.03em;list-style:none;display:flex;align-items:center;gap:7px;}
.free-tier > summary::-webkit-details-marker{display:none;}
.free-tier > summary::before{content:'\25B8';color:var(--text-3);display:inline-block;transition:transform .18s ease;}
.free-tier[open] > summary::before{transform:rotate(90deg);}
.free-tier .ft-note{font-size:11.5px;color:var(--text-3);line-height:1.7;margin:10px 0 6px;}
.free-tier .ft-row{padding:10px 0;border-top:1px dashed var(--line);}
.free-tier .ft-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px;}
.free-tier .ft-head b{font-size:12.5px;color:var(--text);letter-spacing:.03em;}
.free-tier .ft-net{font-size:10.5px;color:var(--text-3);border:1px solid var(--line);padding:1px 7px;border-radius:999px;}
.free-tier .ft-head .btn{margin-left:auto;}
.free-tier .ft-why{font-size:11.5px;color:var(--text-2);line-height:1.7;margin-bottom:6px;}
.free-tier .ft-kv{display:flex;gap:8px;font-size:11px;line-height:1.85;color:var(--text-3);}
.free-tier .ft-kv > span:first-child{flex:0 0 48px;color:var(--text-3);}
.free-tier .ft-kv code{font-family:ui-monospace,Consolas,'Cascadia Mono',monospace;color:var(--accent-2);word-break:break-all;}
.free-tier .ft-kv a{color:var(--accent-2);}
.free-tier .ft-warn{margin-top:10px;padding:8px 11px;border-radius:var(--radius-sm);border:1px dashed rgba(255,185,88,.4);background:rgba(255,185,88,.07);font-size:11px;color:var(--text-2);line-height:1.7;}
/* 字号与字体面板 */
.font-panel{display:flex;flex-direction:column;gap:18px;}
.font-block{display:flex;flex-direction:column;gap:9px;}
.font-title{font-size:13px;font-weight:600;letter-spacing:.04em;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.font-title span{font-size:11.5px;font-weight:400;color:var(--text-3);letter-spacing:0;}
.font-sizes{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;}
.font-chip{
  padding:5px 13px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);
  color:var(--text-2);line-height:1.3;transition:.18s var(--ease);
}
.font-chip:hover{color:var(--accent-2);border-color:var(--accent-line);background:var(--accent-soft);}
.font-chip.on{color:var(--accent-ink);background:linear-gradient(145deg,var(--accent),var(--accent-2));border-color:transparent;}
.font-families{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px;}
.font-card{
  text-align:left;padding:11px 13px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--panel);display:flex;flex-direction:column;gap:4px;transition:.18s var(--ease);
}
.font-card:hover{border-color:var(--accent-line);background:var(--accent-soft);}
.font-card.on{border-color:var(--accent-line);box-shadow:inset 0 0 0 1px var(--accent-line);}
.font-card .sample{font-size:15px;color:var(--text);letter-spacing:.02em;}
.font-card .fname{font-size:12px;color:var(--accent-2);letter-spacing:.06em;}
.font-card .fnote{font-size:11px;color:var(--text-3);}
.font-preview{
  padding:14px 16px;border-radius:var(--radius-sm);border:1px dashed var(--line-strong);
  background:var(--recess-1);display:flex;flex-direction:column;gap:9px;
}
.font-preview .pv-row{display:flex;}
.font-preview .pv-row.user{justify-content:flex-end;}
.font-preview .pv-bubble{
  max-width:78%;padding:9px 13px;border-radius:13px;border:1px solid var(--line);
  background:var(--panel-2);font-size:calc(13.5px * var(--font-scale));line-height:1.7;
}
.font-preview .pv-row.user .pv-bubble{background:var(--accent-soft);border-color:var(--accent-line);}
.font-preview .pv-row[data-act-sev] .pv-bubble{
  font-family:var(--font-horror);font-weight:700;
  font-size:calc(15px * var(--font-scale));
  color:#ffd9de;border-color:rgba(224,64,79,.55);
  background-image:linear-gradient(180deg,rgba(224,64,79,.16),rgba(120,20,32,.1));
  text-shadow:0 0 16px rgba(224,64,79,.5);
}
body[data-mode="light"] .font-preview .pv-row[data-act-sev] .pv-bubble{color:#8d1622;text-shadow:0 0 14px rgba(200,30,50,.3);}
.font-preview .pv-row[data-act-sev="3"] .pv-bubble{font-size:calc(17px * var(--font-scale));letter-spacing:.04em;}
.profile-wrap{padding:26px 30px 44px;max-width:1080px;margin:0 auto;width:100%;}
.profile-card{
  display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:linear-gradient(135deg, var(--accent-soft), var(--panel) 46%, rgba(168,132,255,.08));
  margin-bottom:20px;flex-wrap:wrap;
}
.profile-av{
  width:60px;height:60px;border-radius:18px;display:grid;place-items:center;flex:none;
  font-family:var(--font-display);font-size:26px;color:#fff;
  border:1px solid var(--line-strong);box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.profile-main{display:flex;flex-direction:column;gap:4px;min-width:0;}
.profile-main h2{font-family:var(--font-display);font-size:20px;letter-spacing:.1em;}
.profile-main p{font-size:12px;color:var(--text-3);}
.profile-tags{display:flex;gap:7px;margin-top:6px;flex-wrap:wrap;}
.profile-side{margin-left:auto;display:flex;gap:26px;}
.profile-side .st{text-align:center;}
.profile-side .st b{display:block;font-family:var(--font-display);font-size:20px;color:var(--accent-2);}
.profile-side .st span{font-size:11px;color:var(--text-3);letter-spacing:.08em;}

.quota-panel{display:flex;gap:22px;flex-wrap:wrap;align-items:center;}
.quota-ring{
  width:96px;height:96px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--accent) calc(var(--p) * 1%), rgba(255,255,255,.08) 0);
  position:relative;
}
.quota-ring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--bg-1);}
.quota-ring .n{position:relative;z-index:1;text-align:center;line-height:1.25;}
.quota-ring .n b{display:block;font-family:var(--font-display);font-size:22px;color:var(--accent-2);}
.quota-ring .n span{font-size:10px;color:var(--text-3);letter-spacing:.1em;}
.quota-info{flex:1;min-width:250px;}
.quota-info .row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-2);padding:6px 0;}
.quota-info .row + .row{border-top:1px dashed var(--line);}
.quota-info .row b{color:var(--text);font-weight:600;}
.note{
  margin-top:14px;font-size:11.5px;color:var(--text-3);line-height:1.75;
  padding:10px 13px;border-radius:11px;border:1px dashed var(--line);background:var(--panel);
}

.grid-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}
.tile{
  border:1px solid var(--line);border-radius:14px;padding:13px 14px;
  background:var(--panel);transition:.22s var(--ease);cursor:pointer;
}
.tile:hover{border-color:var(--line-strong);background:var(--panel-2);transform:translateY(-2px);}
.tile.on{border-color:var(--accent-line);background:var(--accent-soft);}
.tile .swatch{height:52px;border-radius:10px;margin-bottom:10px;border:1px solid var(--line-strong);}
.tile .t{font-size:13.5px;letter-spacing:.05em;}
.tile .d{font-size:11px;color:var(--text-3);margin-top:2px;line-height:1.5;}
.tile .foot{display:flex;align-items:center;justify-content:space-between;margin-top:9px;}

.prop{
  display:flex;gap:14px;align-items:center;padding:14px 15px;border-radius:14px;
  border:1px solid var(--line);background:var(--panel);transition:.22s var(--ease);
}
.prop:hover{border-color:var(--line-strong);background:var(--panel-2);}
.prop-ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;font-size:20px;
  background:linear-gradient(145deg, var(--accent-soft), var(--panel-2));
  border:1px solid var(--accent-line);
}
.prop-main{flex:1;min-width:0;}
.prop-main .t{font-size:13.5px;display:flex;align-items:center;gap:8px;}
.prop-main .t em{font-style:normal;font-size:11px;color:var(--text-3);}
.prop-main .d{font-size:11.5px;color:var(--text-3);line-height:1.6;margin-top:3px;}
.prop-num{font-family:var(--font-display);font-size:17px;color:var(--accent-2);min-width:34px;text-align:center;}
.prop-num.zero{color:var(--text-3);}

.res-row{
  display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;
  border:1px solid var(--line);background:var(--panel);flex-wrap:wrap;
}
.res-row:hover{border-color:var(--line-strong);}
.res-row .thumb{width:62px;height:44px;border-radius:9px;overflow:hidden;flex:none;border:1px solid var(--line-strong);}
.res-row .thumb svg{width:100%;height:100%;display:block;}
.res-row .info{flex:1;min-width:170px;}
.res-row .info .t{font-size:13.5px;letter-spacing:.04em;display:flex;align-items:center;gap:8px;}
.res-row .info .d{font-size:11.5px;color:var(--text-3);margin-top:2px;}
.res-row .acts{display:flex;gap:8px;align-items:center;}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px;}
.field label{font-size:12px;color:var(--text-3);letter-spacing:.08em;}
.field input,.field select{
  padding:10px 13px;border-radius:11px;border:1px solid var(--line);
  background:var(--recess-2);outline:none;font-size:13px;transition:.2s var(--ease);width:100%;
}
.field input:focus,.field select:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft);}
.field .tip{font-size:11px;color:var(--text-3);line-height:1.6;}
.switch-row{display:flex;align-items:center;gap:12px;padding:11px 0;}
.switch{
  position:relative;width:44px;height:24px;border-radius:999px;flex:none;
  background:var(--switch-off);border:1px solid var(--line);transition:.25s var(--ease);cursor:pointer;
}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--text-3);transition:.25s var(--ease);
}
.switch.on{background:var(--accent-soft);border-color:var(--accent-line);}
.switch.on::after{left:22px;background:var(--accent-2);}
.switch-text{font-size:12.5px;color:var(--text-2);}
.switch-text small{display:block;font-size:11px;color:var(--text-3);}

.safety-list{display:flex;flex-direction:column;gap:9px;}
.safety-list li{
  display:flex;gap:10px;font-size:12.5px;color:var(--text-2);line-height:1.7;
}
.safety-list li::before{content:"\2713";color:var(--ok);flex:none;}
.safety-list li.no::before{content:"\2715";color:var(--danger);}

/* 头像框（我的装扮） */
body[data-frame="gold"] .profile-av,
body[data-frame="gold"] .msg-av{box-shadow:0 0 0 2px var(--gold), 0 0 26px rgba(231,186,124,.4);}
body[data-frame="mist"] .profile-av,
body[data-frame="mist"] .msg-av{box-shadow:0 0 0 2px var(--purple), 0 0 28px rgba(168,132,255,.45);}

/* 安全提示气泡（出戏警告） */
.bubble.safety{
  border-color:rgba(255,185,88,.42);
  background:linear-gradient(180deg, rgba(255,185,88,.10), rgba(255,95,109,.06));
  font-size:13.5px;line-height:1.9;
}

.only-mobile{display:none;}

/* ---------- 6.4 行为台词（下划线裁决） ---------- */
.act{
  font-style:normal;
  text-decoration:underline;
  text-decoration-thickness:1.6px;
  text-underline-offset:3px;
  text-decoration-color:var(--accent-line);
}
.act-chip{
  display:inline-block;font-style:normal;font-size:10.5px;letter-spacing:.06em;
  padding:1px 8px;margin-right:7px;border-radius:999px;
  border:1px solid currentColor;vertical-align:1.5px;
}
.act-warn{text-decoration-color:rgba(255,185,88,.92);}
.act-warn .act-chip{color:var(--warn);}
.act-punish{text-decoration-color:rgba(255,95,109,.92);}
.act-punish .act-chip{color:var(--danger);}
.act-mute{text-decoration-color:rgba(255,185,88,.92);}
.act-mute .act-chip{color:var(--warn);}
.act-execute{text-decoration-color:rgba(255,95,109,.98);}
.act-execute .act-chip{color:var(--danger);}
.act-resist{text-decoration-color:rgba(168,132,255,.92);}
.act-resist .act-chip{color:var(--purple);}
.act-plain{text-decoration-color:var(--line-strong);}
.execution-inner .act{text-decoration-color:rgba(255,95,109,.9);}
.execution-inner .act-chip{display:none;}

/* ---------- 6.5 破碎：状态值不显示数字，改为裂痕 ---------- */
:root{
  --crack-1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80' preserveAspectRatio='none'%3E%3Cpath d='M2 78 L24 54 L33 61 L54 32 L66 43 L88 14 L118 36' fill='none' stroke='%23c9353f' stroke-opacity='.42' stroke-width='1.3'/%3E%3Cpath d='M2 78 L24 54 L33 61 L54 32 L66 43 L88 14 L118 36' fill='none' stroke='%23ffffff' stroke-opacity='.30' stroke-width='1.3' transform='translate(1,1)'/%3E%3C/svg%3E");
  --crack-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80' preserveAspectRatio='none'%3E%3Cpath d='M2 78 L22 52 L31 60 L52 30 L64 41 L86 12 L118 34' fill='none' stroke='%23c9353f' stroke-opacity='.55' stroke-width='1.4'/%3E%3Cpath d='M2 78 L22 52 L31 60 L52 30 L64 41 L86 12 L118 34' fill='none' stroke='%23ffffff' stroke-opacity='.34' stroke-width='1.4' transform='translate(1.2,1.2)'/%3E%3Cpath d='M52 30 L44 44 L56 52 M86 12 L74 22 L80 34 M22 52 L16 66' fill='none' stroke='%23c9353f' stroke-opacity='.45' stroke-width='1.1'/%3E%3C/svg%3E");
  --crack-3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80' preserveAspectRatio='none'%3E%3Cpath d='M2 78 L22 52 L31 60 L52 30 L64 41 L86 12 L118 34' fill='none' stroke='%23c9353f' stroke-opacity='.72' stroke-width='1.8'/%3E%3Cpath d='M2 78 L22 52 L31 60 L52 30 L64 41 L86 12 L118 34' fill='none' stroke='%23ffffff' stroke-opacity='.40' stroke-width='1.8' transform='translate(1.6,1.6)'/%3E%3Cpath d='M52 30 L42 46 L58 56 M86 12 L72 24 L80 36 M22 52 L14 68 L26 72 M64 41 L76 58 L68 70 M31 60 L36 74' fill='none' stroke='%23c9353f' stroke-opacity='.55' stroke-width='1.2'/%3E%3C/svg%3E");
  /* 最重一档：主裂缝 + 分叉 + 碎块，看得见的「裂开」 */
  --crack-4:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80' preserveAspectRatio='none'%3E%3Cpath d='M-2 82 L20 50 L30 60 L50 26 L63 39 L84 8 L104 20 L122 30' fill='none' stroke='%23e0404f' stroke-opacity='.95' stroke-width='2.4'/%3E%3Cpath d='M-2 82 L20 50 L30 60 L50 26 L63 39 L84 8 L104 20 L122 30' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='2.4' transform='translate(2,2)'/%3E%3Cpath d='M50 26 L40 44 L54 54 L44 72 M84 8 L70 22 L78 34 L66 44 M30 60 L22 74 L34 78 M104 20 L92 34 L100 46 M63 39 L74 54 L62 66' fill='none' stroke='%23e0404f' stroke-opacity='.7' stroke-width='1.6'/%3E%3Cpath d='M20 50 L6 40 M40 44 L26 34 M70 22 L56 12' fill='none' stroke='%23e0404f' stroke-opacity='.5' stroke-width='1.3'/%3E%3Cpath d='M54 54 L62 66 L44 72 Z' fill='%23e0404f' fill-opacity='.14'/%3E%3Cpath d='M78 34 L92 34 L100 46 L74 54 Z' fill='%23e0404f' fill-opacity='.10'/%3E%3C/svg%3E");
  /* 整块面板/输入框用的宽裂缝 */
  --crack-wall:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M0 8 L74 46 L120 30 L188 88 L246 62 L318 128 L400 96' fill='none' stroke='%23e0404f' stroke-opacity='.55' stroke-width='1.6'/%3E%3Cpath d='M74 46 L96 96 L60 138 M188 88 L214 148 L170 178 M246 62 L282 108 L268 152 M318 128 L340 180' fill='none' stroke='%23e0404f' stroke-opacity='.42' stroke-width='1.3'/%3E%3Cpath d='M96 96 L40 108 M214 148 L150 140 M282 108 L232 96' fill='none' stroke='%23e0404f' stroke-opacity='.3' stroke-width='1.1'/%3E%3C/svg%3E");
}
.msg-row.user .bubble{position:relative;overflow:hidden;}
.msg-row.user .bubble::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-size:100% 100%;background-repeat:no-repeat;opacity:0;transition:opacity .5s var(--ease);
}
.messages.dmg-1 .msg-row.user .bubble{filter:saturate(.92);}
.messages.dmg-1 .msg-row.user .bubble::after{background-image:var(--crack-1);opacity:.45;}
.messages.dmg-2 .msg-row.user .bubble{filter:saturate(.82);}
.messages.dmg-2 .msg-row.user .bubble::after{background-image:var(--crack-2);opacity:.72;}
.messages.dmg-2 .msg-row.user .bubble{border-color:rgba(255,95,109,.30);}
.messages.dmg-3 .msg-row.user .bubble{filter:saturate(.68) contrast(.96);}
.messages.dmg-3 .msg-row.user .bubble::after{background-image:var(--crack-3);opacity:.9;}
.messages.dmg-3 .msg-row.user .bubble{border-color:rgba(255,95,109,.45);}
.messages.dmg-4 .msg-row.user .bubble{filter:grayscale(.35) saturate(.5);opacity:.62;}
.messages.dmg-4 .msg-row.user .bubble::after{background-image:var(--crack-3);opacity:1;}
.messages.dmg-4 .msg-row.user .bubble{border-color:rgba(255,95,109,.6);}

/* 左栏会话：同一个伤势等级 */
.conv-item::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-size:100% 100%;background-repeat:no-repeat;opacity:0;transition:opacity .5s var(--ease);
}
.conv-item[data-dmg="1"]::after{background-image:var(--crack-1);opacity:.28;}
.conv-item[data-dmg="2"]::after{background-image:var(--crack-2);opacity:.5;}
.conv-item[data-dmg="3"]::after{background-image:var(--crack-3);opacity:.72;}
.conv-item[data-dmg="3"] .conv-title > span:first-child{color:var(--danger);}
.conv-item[data-dmg="4"]::after{background-image:var(--crack-3);opacity:.9;}
.conv-item[data-dmg="4"]{opacity:.78;filter:grayscale(.3);}
.conv-item[data-dmg="4"] .conv-title > span:first-child{color:var(--danger);}
.chat-avatar{position:relative;}
.chat-avatar[data-dmg="3"]::after,
.chat-avatar[data-dmg="4"]::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;
  background-image:var(--crack-3);background-size:100% 100%;opacity:.85;pointer-events:none;
}

/* ---------- 6.5b 破碎升级：越伤越裂，整个对话界面慢慢变红 ----------
   状态值不显示数字，全靠这一套视觉语言：
     dmg-1 淡淡一条裂纹 · dmg-2 裂缝变长、气泡泛红 · dmg-3 文字开始分裂、界面渗血
     dmg-4 边缘缺口、整块面板裂开、呼吸式血色脉动
   控制变量写在 #view-chat 上：data-dmg（0-4，管形状）+ --hp-k（0-1，管血色浓度，连续变化） */
/* 注意：这里绝不能再写 position —— .view 是 position:absolute;inset:0，
   一旦被 ID 选择器改成 relative，对话视图就会掉进普通流、随内容长高，
   #messages 失去可滚动高度，表现就是「消息滚不动、页面像卡死」。 */
#view-chat::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;
  opacity:calc(var(--hp-k, 0) * .8);
  transition:opacity .7s linear;
  background:radial-gradient(130% 90% at 50% 108%, rgba(220,40,60,.46), rgba(150,20,35,.18) 42%, transparent 74%);
}
#view-chat::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:4;border-radius:inherit;
  background-image:var(--crack-wall);background-size:100% 100%;background-repeat:no-repeat;
  opacity:calc(var(--hp-k, 0) * .62);
  transition:opacity .7s linear;
}

/* 对话面板的边框也跟着渗红，像一条正在扩大的伤口 */
.chat-stage{position:relative;transition:box-shadow .6s var(--ease),border-color .6s var(--ease);}
#view-chat[data-dmg="1"] .chat-stage{box-shadow:inset 0 0 0 1px rgba(224,64,79,.10);}
#view-chat[data-dmg="2"] .chat-stage{box-shadow:inset 0 0 0 1px rgba(224,64,79,.20),inset 0 -26px 46px -30px rgba(224,64,79,.5);}
#view-chat[data-dmg="3"] .chat-stage{box-shadow:inset 0 0 0 1px rgba(224,64,79,.34),inset 0 -40px 70px -34px rgba(224,64,79,.62);}
#view-chat[data-dmg="4"] .chat-stage{box-shadow:inset 0 0 0 1px rgba(224,64,79,.5),inset 0 -60px 96px -36px rgba(224,64,79,.78);}

/* 玩家气泡：更长的裂缝 + 文字分裂 + 边缘缺口 */
.msg-row.user .bubble{position:relative;overflow:hidden;transition:filter .5s var(--ease),transform .5s var(--ease),border-color .5s var(--ease);}
.messages.dmg-3 .msg-row.user .bubble{
  text-shadow:1.4px 0 rgba(255,95,109,.55),-1.4px 0 rgba(120,190,255,.35);
  border-color:rgba(255,95,109,.5);
}
.messages.dmg-4 .msg-row.user .bubble{
  text-shadow:2.2px 0 rgba(255,95,109,.72),-2.2px 0 rgba(120,190,255,.42),0 1px 0 rgba(0,0,0,.35);
  border-color:rgba(255,95,109,.68);
  filter:grayscale(.3) saturate(.55);
  clip-path:polygon(0 0,100% 0,100% 62%,calc(100% - 9px) 78%,100% 100%,0 100%,0 40%,7px 26%,0 12%);
}
.messages.dmg-4 .msg-row.user .bubble::after{background-image:var(--crack-4);opacity:1;}
.messages.dmg-3 .msg-row.user .bubble::after{background-image:var(--crack-4);opacity:.8;}

/* 输入框也会裂：这是玩家自己伸手的地方 */
.composer-box{position:relative;}
#view-chat[data-dmg="2"] .composer-box{border-color:rgba(255,95,109,.26);}
#view-chat[data-dmg="3"] .composer-box{border-color:rgba(255,95,109,.42);box-shadow:inset 0 0 22px -12px rgba(224,64,79,.6);}
#view-chat[data-dmg="4"] .composer-box{border-color:rgba(255,95,109,.6);box-shadow:inset 0 0 30px -10px rgba(224,64,79,.85);}
.composer-box::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:var(--crack-4);background-size:100% 100%;background-repeat:no-repeat;
  opacity:0;transition:opacity .7s var(--ease);
}
#view-chat[data-dmg="3"] .composer-box::after{opacity:.34;}
#view-chat[data-dmg="4"] .composer-box::after{opacity:.6;}
#view-chat[data-dmg="3"] #chatInput::placeholder{color:rgba(190,110,120,.75);}
#view-chat[data-dmg="4"] #chatInput::placeholder{color:rgba(210,100,110,.85);}
#view-chat[data-dmg="4"] .send-btn{box-shadow:0 0 0 1px rgba(224,64,79,.5),0 10px 26px -14px rgba(224,64,79,.9);}

/* 头部状态条与心境也跟着变红 */
#view-chat[data-dmg="2"] .chat-head{border-color:rgba(224,64,79,.18);}
#view-chat[data-dmg="3"] .chat-head{border-color:rgba(224,64,79,.3);}
#view-chat[data-dmg="4"] .chat-head{border-color:rgba(224,64,79,.46);background:linear-gradient(180deg,rgba(224,64,79,.07),transparent);}
#view-chat[data-dmg="3"] .stat b,#view-chat[data-dmg="4"] .stat b{color:var(--danger);}

/* 重伤时整块消息区轻轻抖一下、血色缓慢呼吸（尊重「减少动态效果」） */
@keyframes hpPulse{
  0%,100%{opacity:.62;}
  50%{opacity:.92;}
}
@keyframes hpShiver{
  0%,100%{transform:translate(0,0);}
  22%{transform:translate(-.6px,.4px);}
  48%{transform:translate(.5px,-.5px);}
  74%{transform:translate(-.3px,-.2px);}
}
#view-chat[data-dmg="4"]::before{animation:hpPulse 2.6s ease-in-out infinite;}
#view-chat[data-dmg="4"] .messages{animation:hpShiver 3.4s steps(1,end) infinite;}
#view-chat[data-dmg="3"] .messages{animation:hpShiver 5.2s steps(1,end) infinite;}
@media (prefers-reduced-motion:reduce){
  #view-chat[data-dmg="3"] .messages,
  #view-chat[data-dmg="4"] .messages{animation:none;}
  #view-chat[data-dmg="4"]::before{animation:none;}
}
/* 浅色模式下把血色压得更实一些，避免糊成粉 */
body[data-mode="light"] #view-chat::before{
  background:radial-gradient(130% 90% at 50% 108%, rgba(198,32,52,.34), rgba(170,30,45,.12) 44%, transparent 74%);
}
body[data-mode="light"] #view-chat[data-dmg="3"] .msg-row.user .bubble{text-shadow:1.3px 0 rgba(198,32,52,.5),-1.3px 0 rgba(60,110,190,.3);}

/* ---------- 6.5c 行为台词落地：AI 那一句按严重度变大、变重、变恐怖 ----------
   data-act-sev：1 警告 / 2 惩戒 / 3 禁言·处刑 / 4 即死·离去
   越重 → 字号越大、字距越开、描边越红、阴影越深，并逐级加上抖动与裂痕 */
.msg-row[data-act-sev] .bubble{
  position:relative;
  font-family:var(--font-horror);
  transition:font-size .35s var(--ease),letter-spacing .35s var(--ease),text-shadow .35s var(--ease),transform .35s var(--ease);
}
.msg-row[data-act-sev] .bubble .act{
  text-decoration-thickness:2px;
}
.msg-row[data-act-sev="1"] .bubble{
  font-size:calc(1.04em * var(--font-scale));
  letter-spacing:.01em;
  text-shadow:0 0 14px rgba(255,185,88,.3);
}
.msg-row[data-act-sev="2"] .bubble{
  font-size:calc(1.14em * var(--font-scale));
  font-weight:700;letter-spacing:.02em;
  text-shadow:0 0 18px rgba(224,64,79,.42),0 1px 0 rgba(0,0,0,.3);
  border-color:rgba(224,64,79,.42);
}
.msg-row[data-act-sev="3"] .bubble{
  font-size:calc(1.28em * var(--font-scale));
  font-weight:800;letter-spacing:.04em;
  color:#ffd9de;
  text-shadow:0 0 22px rgba(224,64,79,.6),0 0 6px rgba(255,255,255,.28),0 2px 0 rgba(0,0,0,.4);
  border-color:rgba(224,64,79,.62);
  background-image:linear-gradient(180deg,rgba(224,64,79,.16),rgba(120,20,32,.1));
  animation:actJitter 2.4s steps(1,end) infinite;
}
.msg-row[data-act-sev="4"] .bubble{
  font-size:calc(1.5em * var(--font-scale));
  font-weight:900;letter-spacing:.08em;
  color:#fff0f2;
  text-shadow:0 0 34px rgba(255,40,64,.85),0 0 10px rgba(255,255,255,.4),0 3px 0 rgba(0,0,0,.55);
  border-color:rgba(255,60,84,.85);
  background-image:linear-gradient(180deg,rgba(180,16,34,.34),rgba(60,6,14,.28));
  animation:actJitter 1.5s steps(1,end) infinite,actFatalPulse 2.6s ease-in-out infinite;
  transform:scale(1.01);
}
.msg-row[data-act-sev="4"] .bubble::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  background-image:var(--crack-4);background-size:100% 100%;background-repeat:no-repeat;opacity:.5;
}
body[data-mode="light"] .msg-row[data-act-sev="3"] .bubble{color:#8d1622;text-shadow:0 0 20px rgba(200,30,50,.35),0 1px 0 rgba(255,255,255,.5);}
body[data-mode="light"] .msg-row[data-act-sev="4"] .bubble{color:#6d0d18;text-shadow:0 0 26px rgba(200,30,50,.45),0 2px 0 rgba(255,255,255,.5);}
/* 制裁等级印章，标在名字后面 */
.act-stamp{
  margin-left:7px;padding:1px 7px;border-radius:6px;font-size:.72em;letter-spacing:.14em;
  border:1px solid rgba(224,64,79,.55);color:#ff8f9c;background:rgba(224,64,79,.12);
}
body[data-mode="light"] .act-stamp{color:#a3121f;background:rgba(224,64,79,.1);}
.msg-row[data-act-sev="4"] .act-stamp{animation:hpPulse 1.6s ease-in-out infinite;}

@keyframes actJitter{
  0%,100%{transform:translate(0,0);}
  18%{transform:translate(-.8px,.6px);}
  42%{transform:translate(.7px,-.5px);}
  68%{transform:translate(-.4px,-.3px);}
}
@keyframes actFatalPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(224,64,79,.0),0 8px 26px -16px rgba(224,64,79,.9);}
  50%{box-shadow:0 0 0 4px rgba(224,64,79,.16),0 12px 34px -14px rgba(224,64,79,1);}
}
@media (prefers-reduced-motion:reduce){
  .msg-row[data-act-sev="3"] .bubble,
  .msg-row[data-act-sev="4"] .bubble{animation:none;}
}

/* ---------- 6.5d 冲击：行为台词落地的那一下，整个面板抖一下 ---------- */
#view-chat.impact-warn .chat-stage{animation:impactSoft .9s ease-out 1;}
#view-chat.impact-punish .chat-stage{animation:impactHit 1s var(--ease) 1;}
#view-chat.impact-heavy .chat-stage{animation:impactHit 1.3s var(--ease) 1;}
#view-chat.impact-fatal .chat-stage{animation:impactFatal 2.2s ease-out 1;}
#view-chat.impact-punish::before,
#view-chat.impact-heavy::before,
#view-chat.impact-fatal::before{animation:impactFlash 1.1s ease-out 1;}
#view-chat.impact-fatal::after{animation:impactFlash 2.2s ease-out 1;}
@keyframes impactSoft{
  0%{transform:translateY(0);}30%{transform:translateY(3px);}100%{transform:translateY(0);}
}
@keyframes impactHit{
  0%{transform:translate(0,0);}12%{transform:translate(-5px,3px);}26%{transform:translate(5px,-3px);}
  40%{transform:translate(-3px,2px);}58%{transform:translate(3px,-1px);}78%{transform:translate(-1px,1px);}100%{transform:translate(0,0);}
}
@keyframes impactFatal{
  0%{transform:translate(0,0) scale(1);filter:brightness(1);}
  8%{transform:translate(-9px,5px) scale(1.006);filter:brightness(1.5) saturate(1.4);}
  20%{transform:translate(8px,-5px) scale(1.004);filter:brightness(1.3) saturate(1.5);}
  34%{transform:translate(-6px,3px) scale(1.002);filter:brightness(1.2);}
  52%{transform:translate(4px,-2px);filter:brightness(1.1);}
  72%{transform:translate(-2px,1px);filter:brightness(1.04);}
  100%{transform:translate(0,0) scale(1);filter:brightness(1);}
}
@keyframes impactFlash{
  0%{opacity:.95;background:radial-gradient(130% 90% at 50% 50%, rgba(255,60,84,.55), rgba(160,10,26,.3) 45%, transparent 78%);}
  100%{opacity:calc(var(--hp-k, 0) * .8);}
}
@media (prefers-reduced-motion:reduce){
  #view-chat[class*="impact-"] .chat-stage,
  #view-chat[class*="impact-"]::before,
  #view-chat[class*="impact-"]::after{animation:none;}
}

/* ---------- 6.5e 全屏沉浸：读剧情的时候把界面让出来 ---------- */
body[data-focus="1"] .topbar,
body[data-focus="1"] .sidebar,
body[data-focus="1"] .global-foot,
body[data-focus="1"] .chat-actions #btnDel{display:none !important;}
/* 直接把对话视图钉在视口上，不再受外壳布局影响 */
body[data-focus="1"] #view-chat{
  position:fixed;inset:0;z-index:60;background:var(--bg-1);
  padding:0;border-radius:0;
}
body[data-focus="1"] .chat{max-width:none;height:100%;}
body[data-focus="1"] .chat-stage{border-radius:0;border-left:0;border-right:0;}
body[data-focus="1"] .chat-head{
  border-radius:0;border-left:0;border-right:0;
  padding:10px 26px;gap:14px;
}
/* 全屏是拿来读剧情的：把开场提示、说明行、副标题这些「界面话」收掉 */
body[data-focus="1"] .hints,
body[data-focus="1"] .composer-hint,
body[data-focus="1"] .chat-id p,
body[data-focus="1"] .mood-note,
body[data-focus="1"] .composer-tools{display:none !important;}
body[data-focus="1"] .chat-stats{gap:14px;}
body[data-focus="1"] .stat.wide{min-width:150px;}
body[data-focus="1"] .composer{padding:8px 0 14px;}
body[data-focus="1"] .composer-inner{max-width:min(74rem,94vw);}
body[data-focus="1"] .composer-box{max-width:min(74rem,94vw);}
body[data-focus="1"] #chatInput{min-height:46px;font-size:calc(14.5px * var(--font-scale));}
/* 全屏时正文再大一档：真的像在读书，而不是在看聊天记录 */
body[data-focus="1"] .msg-row .bubble{font-size:calc(1.06em * var(--font-scale));line-height:1.78;}
body[data-focus="1"] .msg-row{max-width:min(74rem,94vw);}
body[data-focus="1"] .bubble{max-width:min(88ch,84%);}
/* 全屏时的暗角，视线更收拢 */
body[data-focus="1"] #view-chat .chat-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 40%, transparent 52%, rgba(0,0,0,.22));
}
body[data-mode="light"][data-focus="1"] #view-chat .chat-stage::after{
  background:radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(74,62,44,.12));
}
/* 更新提示条：代码更新后，旧页面自己提示刷新 */
.update-bar{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:200;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  padding:9px 14px;border-radius:999px;
  border:1px solid var(--accent-line);background:var(--surface);color:var(--text);
  font-size:12.5px;letter-spacing:.03em;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.55);
  animation:jumpIn .24s var(--ease);
}
.update-bar span{color:var(--text-2);}
@media (prefers-reduced-motion:reduce){.update-bar{animation:none;}}
/* 往上翻历史时出现的「回到最新」浮标：说明「没卡死，是你翻上去了」 */
.jump-latest{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:12;
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--accent-line);background:var(--surface);color:var(--accent-2);
  font-size:12px;letter-spacing:.04em;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.5);
  animation:jumpIn .22s var(--ease);
}
.jump-latest:hover{background:var(--accent-soft);}
.jump-latest .ico{width:14px;height:14px;}
@keyframes jumpIn{from{opacity:0;transform:translate(-50%,8px);}}
@media (prefers-reduced-motion:reduce){.jump-latest{animation:none;}}
/* 沉浸模式下的浮层退出按钮：固定在右上角，任何窗口宽度都跑不掉 */
.focus-exit{
  position:fixed;top:14px;right:16px;z-index:120;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px 8px 11px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text);
  font-size:12.5px;letter-spacing:.04em;cursor:pointer;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  transition:.18s var(--ease);
}
.focus-exit:hover{border-color:var(--accent-line);color:var(--accent-2);background:var(--accent-soft);}
.focus-exit .ico{width:15px;height:15px;flex:none;}
.focus-exit em{
  font-style:normal;font-size:10.5px;letter-spacing:.08em;color:var(--text-3);
  border:1px solid var(--line);border-radius:5px;padding:0 5px;line-height:1.5;
}
/* 顶栏的全屏图标：开着的时候高亮 */
#btnFocusTop.on{color:var(--accent-2);border-color:var(--accent-line);background:var(--accent-soft);}
body[data-focus="1"] #btnFocusTop{display:none;}   /* 沉浸时顶栏本来就藏了 */

/* ---------- 6.6 心境与剧情完成度 ---------- */
.stat.wide{min-width:198px;}
.mood-note{font-size:11px;color:var(--text-3);line-height:1.5;margin-top:3px;}
.reminder-rules{
  margin-top:12px;padding-top:11px;border-top:1px dashed var(--accent-line);
  display:flex;flex-direction:column;gap:6px;
}
.reminder-rules li{position:relative;padding-left:17px;font-size:12px;line-height:1.72;color:var(--text-3);}
.reminder-rules li::before{content:"※";position:absolute;left:0;color:var(--accent-2);opacity:.85;}
/* 本场专属规则（每个本子自带） */
.rule-group{margin-top:12px;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:var(--panel);}
.rule-group-title{
  font-size:11.5px;letter-spacing:.16em;margin-bottom:7px;color:var(--accent-2);
  display:flex;align-items:center;gap:7px;
}
.rule-group-title::before{content:"";width:3px;height:12px;border-radius:2px;background:var(--accent);}
.rule-group.behavior{border-color:rgba(255,185,88,.28);}
.rule-group.behavior .rule-group-title{color:var(--warn);}
.rule-group.behavior .rule-group-title::before{background:var(--warn);}
.rule-group ul{display:flex;flex-direction:column;gap:5px;}
.rule-group li{position:relative;padding-left:14px;font-size:12px;line-height:1.7;color:var(--text-2);}
.rule-group li::before{content:"·";position:absolute;left:4px;color:var(--text-3);}
.locked-panel.muted{border-color:rgba(168,132,255,.42);background:rgba(168,132,255,.07);}
body[data-mode="light"] .locked-panel.muted{background:rgba(113,84,207,.07);}
/* 邀请制：不是"出错了"，是"还没到开门时间" —— 用中性偏蓝的调子，不用红色告警色 */
.locked-panel.invite{border-color:var(--accent-line);background:var(--accent-soft);}
.locked-panel.invite h4{color:var(--accent-2);}
body[data-mode="light"] .locked-panel.invite{background:rgba(47,111,224,.06);}
/* 顶栏的邀请码入口：锁着的时候是显眼的蓝，通过之后缩成一个安静的状态标记 */
.invite-mini{gap:6px;}
.invite-mini .ico{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.invite-mini.ok{color:var(--text-3);border-color:var(--line);background:transparent;}
.bubble.silent{opacity:.92;}

/* ---------- 6.7 道具：输入框右上角引用 ---------- */
.composer-box{position:relative;}
.composer-tools{align-self:flex-start;flex:none;padding-top:1px;}
.item-btn{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:10px;font-size:12.5px;color:var(--text-2);
  border:1px solid var(--line);background:var(--panel);transition:.2s var(--ease);
}
.item-btn:hover{color:var(--accent-2);border-color:var(--accent-line);background:var(--accent-soft);}
.item-btn.empty{opacity:.55;}
.item-btn svg.ico{width:15px;height:15px;}
.item-btn b{
  font-family:var(--font-display);font-size:12px;color:var(--accent-2);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:999px;padding:0 6px;line-height:16px;
}
.attached-row{
  max-width:900px;margin:0 auto 9px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.attached-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 8px 5px 11px;border-radius:999px;font-size:12.5px;
  color:var(--accent-2);background:var(--accent-soft);border:1px solid var(--accent-line);
  animation:msgIn .25s var(--ease);
}
.attached-chip i{font-style:normal;}
.attached-chip.plot{color:var(--purple);background:rgba(168,132,255,.12);border-color:rgba(168,132,255,.42);}
.attached-chip.counter{color:var(--danger);background:rgba(255,95,109,.12);border-color:rgba(255,95,109,.42);}
.attached-chip button{
  width:16px;height:16px;border-radius:50%;display:grid;place-items:center;line-height:1;
  color:inherit;opacity:.7;font-size:13px;
}
.attached-chip button:hover{opacity:1;background:rgba(0,0,0,.12);}
.attached-tip{font-size:11px;color:var(--text-3);}
.bubble-items{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:5px;justify-content:flex-end;}
.bubble-item{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;padding:3px 10px;border-radius:999px;
  color:var(--accent-2);background:var(--accent-soft);border:1px solid var(--accent-line);
}
.bubble-item i{font-style:normal;}
.bubble-item.plot{color:var(--purple);background:rgba(168,132,255,.12);border-color:rgba(168,132,255,.42);}
.bubble-item.counter{color:var(--danger);background:rgba(255,95,109,.12);border-color:rgba(255,95,109,.42);}
.popover-title{font-size:11px;color:var(--text-3);letter-spacing:.1em;padding:7px 11px 5px;}
.popover-empty{font-size:11.5px;color:var(--text-3);padding:4px 11px 9px;line-height:1.6;}
.popover-item .item-ico{
  display:grid;place-items:center;font-size:15px;background:var(--panel-2);
  border:1px solid var(--line-strong);border-radius:9px;
}
.popover-item .item-ico.plot{color:var(--purple);border-color:rgba(168,132,255,.42);}
.popover-item .cnt{font-style:normal;color:var(--accent-2);font-size:11px;}
.bubble.backlash{border-color:rgba(255,95,109,.45);background:linear-gradient(180deg, rgba(255,95,109,.10), rgba(255,95,109,.03));}

/* 通关卡 */
.execution.victory .execution-inner{
  border-color:rgba(231,186,124,.5);
  background:radial-gradient(600px 220px at 50% 0%, rgba(231,186,124,.18), rgba(231,186,124,.04));
  box-shadow:0 22px 60px -30px rgba(231,186,124,.9);
}
.execution.victory .mark{color:var(--gold);text-shadow:0 0 26px rgba(231,186,124,.5);}
.execution.victory .line{color:var(--text);}

/* ---------- 7.3 积分商店 ---------- */
.shop-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px;}
.shop-score{
  display:flex;align-items:baseline;gap:9px;padding:10px 18px;border-radius:14px;
  background:linear-gradient(135deg, var(--accent-soft), var(--panel));
  border:1px solid var(--accent-line);flex:none;
}
.shop-score span{font-size:11.5px;color:var(--text-3);letter-spacing:.1em;}
.shop-score b{font-family:var(--font-display);font-size:24px;color:var(--accent-2);}
.shop-tip{flex:1;min-width:240px;font-size:11.5px;color:var(--text-3);line-height:1.75;}
.shop-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));}
.shop-card{
  display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:14px;
  border:1px solid var(--line);background:var(--panel);transition:.2s var(--ease);
}
.shop-card:hover{border-color:var(--line-strong);background:var(--panel-2);}
.shop-card.counter{border-color:rgba(255,95,109,.28);}
.shop-ico{
  width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:19px;
  background:linear-gradient(145deg, var(--accent-soft), var(--panel-2));border:1px solid var(--accent-line);
}
.shop-card.counter .shop-ico{border-color:rgba(255,95,109,.4);background:linear-gradient(145deg, rgba(255,95,109,.12), var(--panel-2));}
.shop-main{flex:1;min-width:0;}
.shop-name{font-size:13.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.shop-desc{font-size:11.5px;color:var(--text-3);line-height:1.6;margin-top:3px;}
.tag-counter{font-style:normal;font-size:10.5px;padding:1px 7px;border-radius:999px;color:var(--danger);border:1px solid rgba(255,95,109,.42);}
.tag-owned{font-style:normal;font-size:10.5px;padding:1px 7px;border-radius:999px;color:var(--ok);border:1px solid rgba(69,211,164,.4);}
.shop-card .btn{flex:none;}

/* ---------- 7.1 封面上的元素：固定「深色玻璃 + 浅色字」 ----------
   封面底图本身是深色画面，这些样式不跟随站点主题，浅色主题下同样清晰。 */
.badge{color:#ece7dc;background:rgba(14,13,18,.58);border-color:rgba(255,255,255,.20);}
.badge.hot{color:#f0cf9a;border-color:rgba(240,207,154,.48);}
.badge.rate{color:#ffb4b8;border-color:rgba(255,120,130,.48);}
.badge.soon{color:#d9c6ff;border-color:rgba(190,160,255,.48);}
.res-cover-title{color:#f6f2ea;}
.res-cover-title p{color:rgba(240,235,225,.82);}
.play-btn{color:#f2f6ff;}

/* ---------- 7.2 浅色主题微调（深色主题沿用令牌默认值） ---------- */
body[data-mode="light"] .res-card.revealed{
  box-shadow:0 20px 46px -26px rgba(60,80,140,.55), 0 0 0 1px var(--accent-line) inset;
}
body[data-mode="light"] .toast,
body[data-mode="light"] .popover,
body[data-mode="light"] .modal{box-shadow:var(--shadow-2);}
body[data-mode="light"] .btn.primary,
body[data-mode="light"] .send-btn{color:#fff;}
body[data-mode="light"] .execution-inner{
  background:radial-gradient(600px 200px at 50% 0%, rgba(201,53,63,.12), rgba(201,53,63,.035));
}
body[data-mode="light"] .locked-panel{background:rgba(201,53,63,.055);}
body[data-mode="light"] .locked-panel.paused{background:rgba(181,114,15,.075);}
body[data-mode="light"] .bubble.safety{
  background:linear-gradient(180deg, rgba(181,114,15,.10), rgba(201,53,63,.055));
}
body[data-mode="light"] .notice.hp span{color:#ad2a33;}
body[data-mode="light"] .notice.danger span{color:#9d1f27;}
body[data-mode="light"] .notice.warn span{color:#8a5607;}
body[data-mode="light"] .notice.gain span{color:#10634d;}
body[data-mode="light"] .hp-bar i{background:linear-gradient(90deg,#1f9d7a,#5ac7a2);}
body[data-mode="light"] .hp-bar.mid i{background:linear-gradient(90deg,#c98a12,#e0b055);}
body[data-mode="light"] .hp-bar.low i{background:linear-gradient(90deg,#c9353f,#e0705f);}
body[data-mode="light"] .aff-bar i{background:linear-gradient(90deg,#7154cf,#a48ce8);}
body[data-mode="light"] .res-card.revealed .res-cover svg{opacity:.045;}
body[data-mode="light"] .res-meta li::before{opacity:.9;}
body[data-mode="light"] .play-btn{
  background:linear-gradient(180deg,#3d7ce8,#2a5fc4);
  box-shadow:0 12px 30px -12px rgba(47,111,224,.75), inset 0 1px 0 rgba(255,255,255,.28);
}

/* ---------- 8.1 全页面背景：进行中的本子把配色铺满整页 ---------- */
/* --scrim：输入区/头部/页脚那层「玻璃」的底色，浅色深色各一套 */
:root{--scrim:rgba(255,255,255,.58);}
body[data-mode="dark"]{--scrim:rgba(6,8,12,.48);}
body[data-scene="on"]::before{
  background:
    radial-gradient(1100px 620px at 12% -10%, var(--page-3, transparent), transparent 62%),
    radial-gradient(980px 700px at 104% 4%, var(--page-2, transparent), transparent 60%),
    linear-gradient(180deg, var(--page-1, var(--bg-1)), var(--bg-0) 62%);
}
body[data-scene="on"] .topbar,
body[data-scene="on"] .sidebar,
body[data-scene="on"] .chat-head,
body[data-scene="on"] .composer,
body[data-scene="on"] .global-foot{background:var(--glass);}
body[data-scene="on"] .chat-stage{background:linear-gradient(180deg, transparent, var(--recess-2));}
body[data-scene="on"] .msg-row .bubble,
body[data-scene="on"] .reminder-inner,
body[data-scene="on"] .beat span{backdrop-filter:blur(2px);}
/* ---------- 8.2 输入区也吃背景：不再是压在剧情上的一条实心白条 ----------
   做法：把 composer / chat-head / 页脚换成「半透明玻璃 + 背景模糊」，
   场景色透上来（还能看到一点点底下的画面），气泡与输入框自己保持可读的表层。 */
body[data-scene="on"] .composer{
  background:linear-gradient(180deg, transparent, var(--scrim) 78%);
  backdrop-filter:blur(10px) saturate(1.05);
  border-top-color:transparent;
  box-shadow:0 -18px 40px -30px rgba(0,0,0,.55);
}
body[data-scene="on"] .chat-head{
  background:linear-gradient(180deg, var(--scrim), transparent);
  backdrop-filter:blur(10px) saturate(1.05);
  border-bottom-color:transparent;
}
body[data-scene="on"] .global-foot{
  background:linear-gradient(180deg, transparent, var(--scrim));
  backdrop-filter:blur(8px);
  border-top-color:transparent;
}
body[data-scene="on"] .composer-box{
  background:var(--panel-2);
  backdrop-filter:blur(6px);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.7);
}
body[data-scene="on"] .item-btn,
body[data-scene="on"] .send-btn{backdrop-filter:blur(6px);}
body[data-scene="on"] .hint-chip{background:var(--panel-2);backdrop-filter:blur(6px);}
body[data-scene="on"] .composer-hint{color:var(--text-2);}
/* 侧栏与顶栏也一起玻璃化，整页才是「一张背景」而不是几块白板 */
body[data-scene="on"] .sidebar{backdrop-filter:blur(12px) saturate(1.05);}
body[data-scene="on"] .conv-item{background:transparent;}
body[data-scene="on"] .conv-item.active{background:var(--panel-2);backdrop-filter:blur(8px);}
/* 离去卡 */
.execution.leave .execution-inner{
  border-color:var(--line-strong);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow:var(--shadow-2);
}
.execution.leave .mark{color:var(--text-2);text-shadow:none;letter-spacing:.5em;}
.execution.leave .sub{color:var(--text-3);}
.execution.leave .line{color:var(--text-2);}
.locked-panel.left{border-color:var(--line-strong);background:var(--panel);}
.locked-panel.left h4{color:var(--text-2);}

/* 未成年角色的边界提示（写给玩家看） */
.reminder-notice{
  margin-top:11px;padding:9px 12px;border-radius:10px;font-size:12px;line-height:1.7;
  color:var(--warn);border:1px solid rgba(255,185,88,.42);background:rgba(255,185,88,.08);
}
body[data-mode="light"] .reminder-notice{color:#8a5607;}

/* 本场规则剧透：默认锁住，通关后解锁 */
.spoiler{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden;}
.spoiler summary{
  cursor:pointer;padding:12px 14px;display:flex;flex-direction:column;gap:3px;list-style:none;
}
.spoiler summary::-webkit-details-marker{display:none;}
.spoiler summary::before{content:"▸";float:right;color:var(--text-3);transition:.2s var(--ease);}
.spoiler[open] summary::before{transform:rotate(90deg);}
.spoiler summary b{font-size:12.5px;color:var(--accent-2);letter-spacing:.06em;}
.spoiler summary span{font-size:11.5px;color:var(--text-3);line-height:1.6;}
.spoiler[open] summary{border-bottom:1px dashed var(--line);}
.spoiler .rule-group{margin:10px 12px;}
.spoiler.locked{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-style:dashed;}
.spoiler.locked .lock{font-size:16px;line-height:1.2;flex:none;opacity:.8;}
.spoiler.locked b{display:block;font-size:12.5px;color:var(--text-2);letter-spacing:.06em;margin-bottom:3px;}
.spoiler.locked span{font-size:11.5px;color:var(--text-3);line-height:1.7;}

/* ---------- 8. 响应式 ---------- */
@media (max-width:1180px){
  :root{--sidebar-w:236px;}
  .res-grid{grid-template-columns:repeat(auto-fill,minmax(246px,1fr));}
  .chat-stats{width:100%;order:3;margin-left:0;}
}
@media (max-width:900px){
  .workbench{grid-template-columns:1fr;}
  .only-mobile{display:grid;}
  .brand{min-width:0;}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;width:280px;z-index:70;transform:translateX(-100%);
    transition:transform .3s var(--ease);background:var(--bg-1);box-shadow:var(--shadow-2);
  }
  .sidebar.open{transform:none;}
  .brand-text span{display:none;}
  .res-wrap,.profile-wrap{padding:20px 16px 34px;}
  .msg-row,.reminder,.beat,.notice,.execution{padding:0 14px;}
  .composer{padding:12px 14px 10px;}
  .msg-body{max-width:86%;}
}
/* 窄屏（手机）：实测 390px 下文档被顶到 772px —— 撑宽的唯一源头是顶栏，
   品牌 + 三个标签 + 额度条 + 三个图标按钮在 26px 间距下排不下，于是整列跟着变宽。
   这里按 390px 的预算把顶栏逐项收紧；全屏与后台入口在手机上直接收起来。 */
@media (max-width:700px){
  .topbar{gap:9px;padding:9px 11px;}
  .brand{gap:7px;}
  .brand-mark{width:30px;height:30px;font-size:16px;border-radius:9px;}
  .brand-text strong{font-size:15px;letter-spacing:.08em;}
  .nav{gap:3px;padding:3px;min-width:0;}
  .nav-item{padding:7px 10px;font-size:12.5px;gap:5px;letter-spacing:.02em;white-space:nowrap;}
  .nav-item svg.ico{width:15px;height:15px;}
  .nav-dot{top:3px;right:5px;}
  .topbar-right{gap:6px;}
  .quota-mini{padding:6px 9px;font-size:11.5px;gap:5px;border-radius:9px;}
  .quota-mini > span:first-child,.quota-mini .bar{display:none;}
  .quota-mini b::after{content:' 次';font-size:10.5px;color:var(--text-3);font-weight:400;}
  .icon-btn{width:32px;height:32px;border-radius:9px;}
  #btnFocusTop,#btnAdmin{display:none;}
  .global-foot{font-size:10.5px;padding:6px 10px;gap:6px;}
  .res-wrap,.profile-wrap{padding:16px 12px 28px;}
  .msg-row,.reminder,.beat,.notice,.execution{padding:0 10px;}
  .composer{padding:10px 10px 8px;}
  .msg-body{max-width:92%;}

  /* ---------- 对话页：手机上最值钱的是竖向空间 ----------
     实测（真机截图）进对话页时头部 + 规则卡 + 输入区四行提示 + 两行页脚，
     几乎把消息区挤没了。这里逐块压缩：头部收成两行、规则卡只留标题、
     输入区提示只留一行、页脚压到一行。 */
  .chat-head{gap:6px;padding:7px 10px;}
  .chat-avatar{width:32px;height:32px;border-radius:9px;font-size:15px;}
  .chat-id{gap:8px;}
  .chat-id h2{font-size:14.5px;letter-spacing:.05em;}
  .chat-id .status{font-size:9.5px;padding:1px 6px;margin-left:5px;}
  /* 「角色：…」那行长描述与心境备注在手机上不显示（资源卡里已有同样信息） */
  .chat-id p,.mood-note{display:none;}
  .chat-stats{order:3;width:100%;gap:10px;margin-left:0;}
  .stat{min-width:0;flex:1;}
  .stat.wide{flex:1.5;}
  .stat-top{margin-bottom:2px;}
  .stat-top span{font-size:9.5px;letter-spacing:.06em;}
  .stat-top b{font-size:12.5px;}
  .chat-actions{gap:5px;}
  .chat-actions .btn.sm{padding:4px 9px;font-size:11px;}
  /* 开场提示胶囊：手机上排成一行可横向滑动 —— 竖着堆三行要吃掉 100px（实测） */
  .hints{flex-wrap:nowrap;overflow-x:auto;gap:6px;margin-bottom:7px;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
  .hints::-webkit-scrollbar{display:none;}
  .hints .hint-chip{flex:none;font-size:11.5px;padding:5px 10px;}
  /* 规则卡：只留「🔒 本场规则已隐藏」一行，点开才有正文 */
  .spoiler.locked{padding:9px 11px;align-items:center;}
  .spoiler.locked b{margin-bottom:0;font-size:11.5px;}
  .spoiler.locked span:not(.lock){display:none;}
  /* 输入区：更矮的输入框 + 只留一行提示（次要说明带 .hint-2，窄屏隐藏） */
  .composer-box{padding:7px 10px;border-radius:12px;gap:8px;}
  .composer-box textarea{font-size:14px;min-height:24px;max-height:96px;line-height:1.6;}
  .composer-tools .item-btn{padding:4px 8px;font-size:11.5px;}
  .send-btn{padding:9px 16px;font-size:13px;border-radius:11px;}
  .composer-hint{margin-top:6px;font-size:10.5px;gap:8px;}
  .composer-hint .hint-2{display:none;}
  /* 页脚压到一行：手机上三行声明要吃掉 45px，而对话页最缺的就是竖向空间。
     做法：对话页（body 里有 #view-chat.active 时）只保留第一条声明（内容均为虚构，请勿模仿），
     其它视图仍然完整显示三条。:has() 在 Edge/Chrome 105+ 都支持。 */
  .global-foot{font-size:10px;padding:4px 10px;gap:5px;line-height:1.35;}
  .global-foot .sep{display:none;}
  body:has(#view-chat.active) .global-foot span:not(:first-child){display:none;}
}
/* 更窄（小于 420px）：只剩「幻」字标，标签再收一档 */
@media (max-width:420px){
  .brand-text{display:none;}
  .nav-item{padding:7px 9px;}
  .icon-btn{width:30px;height:30px;}
}

/* ---------- 自带 Key 引导（need-model 面板） ---------- */
.need-model-steps{display:flex;flex-direction:column;gap:9px;margin:12px 0 4px;text-align:left}
.nm-step{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.75;color:var(--text-2)}
.nm-step > b{flex:none;width:19px;height:19px;border-radius:50%;background:var(--accent-soft);color:var(--accent-2);
  font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.nm-step code{font-family:var(--mono);font-size:11.5px;background:var(--track);border-radius:4px;padding:0 4px}
.locked-panel.need-model{text-align:left}
.locked-panel.need-model .row{justify-content:flex-start;margin-top:12px}

/* ---------- 新增资源（投稿） ---------- */
.submit-mask{position:fixed;inset:0;z-index:120;background:rgba(12,10,8,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:18px}
.submit-panel{width:min(760px,100%);max-height:calc(100vh - 36px);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.36)}
.submit-head{display:flex;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.submit-head h3{margin:0 0 4px;font-size:16px}
.submit-head p{margin:0;font-size:12.5px;color:var(--text-3);line-height:1.7}
.submit-x{border:0;background:transparent;font-size:22px;line-height:1;color:var(--text-3);cursor:pointer;padding:0 4px}
.submit-x:hover{color:var(--danger)}
.submit-body{padding:14px 18px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.submit-fld{display:flex;flex-direction:column;gap:5px}
.submit-fld.wide{grid-column:1 / -1}
.submit-fld label{font-size:12.5px;color:var(--text-2);font-weight:600}
.submit-fld label em{font-style:normal;color:var(--danger);font-size:11px;font-weight:400}
.submit-ipt{width:100%;font:inherit;font-size:13px;line-height:1.7;padding:8px 10px;border-radius:9px;
  border:1px solid var(--line-strong);background:var(--panel);color:var(--text);resize:vertical}
.submit-ipt:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.submit-tip{grid-column:1 / -1;font-size:12px;line-height:1.8;color:var(--text-3);
  background:var(--track);border-radius:10px;padding:10px 12px}
.submit-foot{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line);background:var(--panel)}
.submit-foot #submitState{flex:1;font-size:12.5px;color:var(--text-3)}
.submit-foot #submitState.err{color:var(--danger)}
@media (max-width:700px){
  .submit-mask{padding:0;align-items:flex-end}
  .submit-panel{max-height:92vh;border-radius:16px 16px 0 0}
  .submit-body{grid-template-columns:1fr}
  .submit-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}


/* ---------- 成年人确认 ---------- */
.age-mask{position:fixed;inset:0;z-index:200;background:rgba(14,12,10,.78);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px}
.age-card{width:min(460px,100%);background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;
  padding:22px 22px 18px;box-shadow:0 24px 64px rgba(0,0,0,.4);text-align:left}
.age-card h2{margin:0 0 12px;font-size:17px;letter-spacing:.02em}
.age-card p{margin:0 0 10px;font-size:13px;line-height:1.8;color:var(--text-2)}
.age-card .age-fine{font-size:11.5px;color:var(--text-3);margin-top:14px;line-height:1.7}
.age-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
@media (max-width:700px){.age-card{padding:18px 16px 14px}.age-row .btn{flex:1 1 auto}}


/* ---------- 举报 / 隐私（复用年龄确认的遮罩） ---------- */
.legal-card{width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto}
.legal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.legal-head h2{margin:0 0 10px}
.legal-x{border:0;background:transparent;font-size:22px;line-height:1;color:var(--text-3);cursor:pointer;padding:0 4px}
.legal-x:hover{color:var(--danger)}
.legal-body h4{margin:14px 0 4px;font-size:12.5px;color:var(--text);letter-spacing:.02em}
.legal-body p{margin:0 0 6px;font-size:12.5px;line-height:1.85;color:var(--text-2)}
.legal-body code{font-family:var(--mono);font-size:11.5px;background:var(--track);border-radius:4px;padding:0 4px}
.report-form{display:flex;flex-direction:column;gap:10px;margin:12px 0 4px}
.report-form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--text-2)}
.report-form input,.report-form select,.report-form textarea{font:inherit;font-size:13px;padding:7px 9px;border-radius:8px;
  border:1px solid var(--line-strong);background:var(--panel);color:var(--text);resize:vertical}
.report-form input:focus,.report-form select:focus,.report-form textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.foot-link{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.foot-link:hover{color:var(--accent-2)}


/* ---------- 登录 ---------- */
.auth-card{width:min(430px,100%)}
.auth-form{display:flex;flex-direction:column;gap:10px;margin:14px 0 6px}
.auth-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--text-2)}
.auth-form input{font:inherit;font-size:14px;padding:9px 11px;border-radius:9px;border:1px solid var(--line-strong);
  background:var(--panel);color:var(--text);letter-spacing:.04em}
.auth-form input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.auth-code-row{display:flex;gap:8px}
.auth-code-row input{flex:1;letter-spacing:.22em;font-family:var(--mono)}
.auth-code-row .btn{flex:none;white-space:nowrap}
@media (max-width:700px){.auth-code-row{flex-wrap:wrap}.auth-code-row .btn{width:100%}}


/* ---------- 顶栏登录按钮 ---------- */
.login-chip{flex:none;height:30px;padding:0 12px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:12.5px;letter-spacing:.02em;
  border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent-2);font-weight:600;
  transition:background .15s,color .15s,transform .1s}
.login-chip:hover{background:var(--accent);color:#fff}
.login-chip:active{transform:translateY(1px)}
.login-chip.on{border-color:var(--line-strong);background:transparent;color:var(--text-2);font-weight:500;max-width:180px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-chip.on:hover{background:var(--track);color:var(--text)}
@media (max-width:700px){.login-chip{height:28px;padding:0 10px;font-size:12px;max-width:120px}}