/* ============================================================
   蓝白社 · 异常收容档案库
   LANBAI SOCIETY — ANOMALY CONTAINMENT ARCHIVE
   ============================================================ */

:root{
  --ink:#08152C;
  --ink-2:#152C50;
  --ink-3:#3D5B84;
  --dim:#7B92B2;
  --blue:#134A9E;
  --blue-hi:#2B6BFF;
  --blue-deep:#061631;
  --blue-mid:#0C2A5C;
  --paper:#E9F0FA;
  --paper-2:#F4F8FE;
  --card:#FCFDFF;
  --line:#C3D5EC;
  --line-soft:#DCE7F6;
  --red:#B7292E;
  --green:#1B7A5A;

  /* 归档人署名 */
  --who:#5236C6;
  --who-hi:#C3B6FF;

  --alpha:#1F9D5C;
  --beta:#D6A21A;
  --gamma:#E0701F;
  --delta:#8344B8;
  --omega:#C2182A;

  /* 等级色在文字上的用法（徽标、选择器）——夜间模式会换成高亮版本 */
  --alpha-fg:#14764A;
  --beta-fg:#8A6708;
  --gamma-fg:#B04A0E;
  --delta-fg:#7137A2;
  --omega-fg:#A3121F;

  /* 背景网格线 */
  --grid:rgba(19,74,158,.055);
  --paper-fade:rgba(233,240,250,0);

  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",SimSun,"STSong",serif;
  --sans:"Inter","Segoe UI","Microsoft YaHei UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --mono:"JetBrains Mono",Consolas,"Cascadia Mono","SF Mono",monospace;

  --hdr:64px;
  --rail:232px;
  --sh-1:0 1px 0 rgba(8,21,44,.05), 0 2px 8px rgba(8,21,44,.05);
  --sh-2:0 10px 30px -8px rgba(8,21,44,.18), 0 2px 6px rgba(8,21,44,.06);
  --sh-3:0 30px 70px -20px rgba(6,22,49,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  display:grid;
  grid-template-columns:var(--rail) 1fr;
  grid-template-rows:var(--hdr) 1fr;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(43,107,255,.22);color:var(--ink)}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;color:inherit}

/* 背景网格 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 0%,transparent 78%);
}

/* 滚动条 */
.stage::-webkit-scrollbar,.rail::-webkit-scrollbar,.drawer-body::-webkit-scrollbar{width:9px;height:9px}
.stage::-webkit-scrollbar-thumb,.rail::-webkit-scrollbar-thumb,.drawer-body::-webkit-scrollbar-thumb{
  background:rgba(19,74,158,.22);border-radius:9px;border:2px solid transparent;background-clip:padding-box;
}
.stage::-webkit-scrollbar-thumb:hover,.rail::-webkit-scrollbar-thumb:hover{background:rgba(19,74,158,.4);background-clip:padding-box}

/* ============================ 顶栏 ============================ */
.topbar{
  grid-column:1/-1; grid-row:1;
  position:relative; z-index:60;
  background:linear-gradient(180deg,#0B2247 0%,#061631 100%);
  display:flex; align-items:center; gap:18px;
  padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 1px 0 rgba(8,21,44,.4), 0 8px 26px -14px rgba(8,21,44,.8);
}
/* 顶栏斜纹装饰 */
.topbar::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:340px; pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 11px);
  -webkit-mask-image:linear-gradient(to left,#000,transparent);
  mask-image:linear-gradient(to left,#000,transparent);
}
.brand{display:flex;align-items:center;gap:12px;user-select:none;flex:none}
.sigil{display:block;width:36px;height:36px;flex:none}
.brand-txt{display:flex;flex-direction:column;gap:3px}
.brand-txt b{
  font-family:var(--serif);font-size:19px;font-weight:700;color:#fff;
  letter-spacing:.34em;margin-right:-.34em;line-height:1;
}
.brand-txt span{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;
  color:rgba(190,215,255,.72);text-transform:uppercase;line-height:1;
}
.topbar .spacer{flex:1}

/* 状态徽标 */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  height:30px;padding:0 12px;border-radius:2px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  border:1px solid rgba(255,255,255,.24);
  color:rgba(215,232,255,.9);
  background:rgba(255,255,255,.05);
  transition:.25s;
  white-space:nowrap;
}
.pill .dot{width:6px;height:6px;border-radius:50%;background:#5C7A9E}
.pill[data-state="online"]{border-color:rgba(70,220,160,.5);color:#8FF0C8;background:rgba(27,122,90,.2)}
.pill[data-state="online"] .dot{background:#3FE0A0;box-shadow:0 0 0 3px rgba(63,224,160,.2);animation:pulse 2.4s infinite}
.pill[data-state="syncing"] .dot{background:#FFC65C;animation:pulse 1s infinite}
.pill[data-state="error"]{border-color:rgba(255,120,120,.5);color:#FFC0C0;background:rgba(183,41,46,.22)}
.pill[data-state="error"] .dot{background:#FF7A7A}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:32px;padding:0 14px;border-radius:2px;
  font-size:12.5px;font-weight:500;letter-spacing:.04em;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);
  transition:transform .12s ease, background .18s, box-shadow .18s, border-color .18s;
  white-space:nowrap;
}
.btn:hover{background:var(--paper-2);border-color:#A9C2E2;box-shadow:var(--sh-1)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 2px 10px -3px rgba(19,74,158,.6);
}
.btn.primary:hover{background:#1A5CBF;border-color:#1A5CBF}
.btn.ghost-dark{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24);color:#DCE9FF;
}
.btn.ghost-dark:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
.btn.danger{color:var(--red);border-color:#E4BFC0}
.btn.danger:hover{background:#FDF3F3;border-color:var(--red)}
.btn.sm{height:27px;padding:0 10px;font-size:11.5px}
.btn svg{width:13px;height:13px;flex:none}

/* ============================ 左侧栏 ============================ */
.rail{
  grid-column:1; grid-row:2; position:relative; z-index:40;
  background:linear-gradient(180deg,#F7FAFE,#EDF3FB);
  border-right:1px solid var(--line);
  overflow-y:auto; overflow-x:hidden;
  padding:18px 14px 26px;
  display:flex;flex-direction:column;gap:20px;
}
.rail-sec-h{
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  color:var(--dim);text-transform:uppercase;
  display:flex;align-items:center;gap:8px;margin:0 0 9px 4px;
}
.rail-sec-h::after{content:"";flex:1;height:1px;background:var(--line-soft)}

.grade-list{display:flex;flex-direction:column;gap:3px}
.grade-item{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:8px 9px;border:1px solid transparent;border-radius:2px;
  background:transparent;text-align:left;color:var(--ink-2);
  transition:.15s;position:relative;
}
.grade-item:hover{background:rgba(255,255,255,.85);border-color:var(--line-soft)}
.grade-item.on{
  background:#fff;border-color:var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 2px 8px -4px rgba(8,21,44,.3);
}
.grade-item.on::before{
  content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:2px;background:var(--gc,var(--blue-hi));
}
.grade-item[data-grade="alpha"]{--gc:var(--alpha)}
.grade-item[data-grade="beta"]{--gc:var(--beta)}
.grade-item[data-grade="gamma"]{--gc:var(--gamma)}
.grade-item[data-grade="delta"]{--gc:var(--delta)}
.grade-item[data-grade="omega"]{--gc:var(--omega)}
.g-glyph{
  width:24px;height:24px;flex:none;display:grid;place-items:center;
  font-family:var(--serif);font-size:14px;font-weight:600;line-height:1;
  border:1px solid;border-radius:1px;
}
.g-name{font-size:12.5px;letter-spacing:.06em;flex:1}
.g-count{
  font-family:var(--mono);font-size:10px;color:var(--dim);
  background:rgba(19,74,158,.07);padding:1px 5px;border-radius:2px;min-width:20px;text-align:center;
}

/* 状态筛选 */
.chip-row{display:flex;flex-wrap:wrap;gap:5px}
.chip{
  padding:4px 9px;font-size:11px;border-radius:2px;
  border:1px solid var(--line);background:#fff;color:var(--ink-3);
  transition:.15s;
}
.chip:hover{border-color:#A9C2E2;color:var(--blue)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* 统计 */
.stat-box{
  border:1px solid var(--line);background:#fff;border-radius:2px;padding:11px 12px;
  display:grid;gap:9px;box-shadow:var(--sh-1);
}
.stat-row{display:flex;align-items:baseline;justify-content:space-between;font-size:11.5px;color:var(--ink-3)}
.stat-row b{font-family:var(--mono);font-size:15px;color:var(--ink);font-weight:600}
.stat-bar{height:3px;background:rgba(19,74,158,.1);display:flex;overflow:hidden;border-radius:2px}
.stat-bar i{display:block;height:100%}

.rail-foot{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:9px;line-height:1.9;letter-spacing:.06em;color:#93A8C4;
}

/* ============================ 主区 ============================ */
.stage{
  grid-column:2; grid-row:2; position:relative; z-index:10;
  overflow-y:auto; padding:0 26px 60px;
}

.toolbar{
  position:sticky; top:0; z-index:30;
  display:flex;align-items:center;gap:10px;
  padding:16px 0 13px; margin-bottom:4px;
  background:linear-gradient(180deg,var(--paper) 62%,var(--paper-fade));
  backdrop-filter:blur(2px);
}
.search{
  position:relative;flex:1;max-width:420px;
}
.search input{
  width:100%;height:34px;padding:0 12px 0 33px;
  border:1px solid var(--line);border-radius:2px;background:#fff;
  font-size:12.5px;letter-spacing:.03em;outline:none;transition:.18s;
  box-shadow:0 1px 2px rgba(8,21,44,.04);
}
.search input:focus{border-color:var(--blue-hi);box-shadow:0 0 0 3px rgba(43,107,255,.12)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--dim);pointer-events:none}
.search kbd{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:9.5px;color:var(--dim);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:2px;padding:1px 4px;background:var(--paper-2);
}
select.sort{
  height:34px;padding:0 26px 0 10px;border:1px solid var(--line);border-radius:2px;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M1 3l4 4 4-4' fill='none' stroke='%237B92B2' stroke-width='1.4'/></svg>") no-repeat right 9px center;
  font-size:12px;color:var(--ink-2);appearance:none;outline:none;
}
select.sort:focus{border-color:var(--blue-hi)}

.result-line{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--dim);
  margin:2px 0 14px;
}
.result-line::after{content:"";flex:1;height:1px;background:var(--line-soft)}

/* ============================ 卡片网格 ============================ */
.grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr));
  align-items:stretch;
}
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:2px;
  padding:15px 16px 14px 18px;
  box-shadow:var(--sh-1);
  cursor:pointer;
  text-align:left;
  overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s;
  animation:riseIn .42s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes riseIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--gc,var(--blue));
  transition:width .18s;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:#A9C2E2}
.card:hover::before{width:5px}
.card:focus-visible{outline:2px solid var(--blue-hi);outline-offset:2px}

.card-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.card-code{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);font-weight:600;
}
.badge{
  display:inline-flex;align-items:center;gap:4px;height:19px;padding:0 6px;
  font-size:10px;letter-spacing:.06em;border:1px solid;border-radius:1px;
  font-family:var(--sans);line-height:1;
}
.badge i{font-family:var(--serif);font-style:normal;font-size:11.5px;font-weight:600;transform:translateY(-.5px)}
.card-spacer{flex:1}
.card-status{
  font-size:10px;letter-spacing:.05em;padding:2px 6px;border-radius:1px;
  background:rgba(19,74,158,.07);color:var(--ink-3);border:1px solid transparent;
}
.card-status[data-s="收容中"]{color:#146B4E;background:rgba(27,122,90,.1)}
.card-status[data-s="封锁中"]{color:#8E2A2E;background:rgba(183,41,46,.1)}
.card-status[data-s="观察中"]{color:#1B5AA0;background:rgba(43,107,255,.1)}
.card-status[data-s="待收容"]{color:#8A5A12;background:rgba(200,140,20,.12)}
.card-status[data-s="已失效"],.card-status[data-s="遗失"]{color:#6A6A6A;background:rgba(0,0,0,.055)}

.card-name{
  font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:.03em;
  color:var(--ink);margin:0 0 7px;line-height:1.3;
}
.card-nature{
  margin:0;font-size:13px;line-height:1.65;color:var(--ink-3);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:43px;
}
.card-foot{
  display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:9px;
  border-top:1px dashed var(--line-soft);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:#93A8C4;
}
.card-foot .mini-lvl{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}
.card-foot .mini-lvl em{font-family:var(--serif);font-style:normal;font-size:12px;color:var(--gc);font-weight:600}
.card-foot .mini-who{
  flex:0 1 auto;min-width:0;max-width:56%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#8FA4C0;
}
.card-foot .mini-who .mini-date{color:#A6B8CF}

/* 归档人署名使用靛紫加粗字 */
.arch{
  color:var(--who);
  font-weight:700;
  letter-spacing:.02em;
  font-style:normal;
  display:inline;
}
.card-foot .mini-who .arch{font-size:11px;letter-spacing:.04em;font-weight:700}
#dMeta .arch{color:var(--who-hi);font-weight:700}
.field .arch{font-size:13px}

/* 机密印章 */
.stamp{
  position:absolute;right:15px;top:46px;
  font-family:var(--serif);font-size:10px;font-weight:700;letter-spacing:.22em;
  color:rgba(183,41,46,.62);
  border:1.5px solid rgba(183,41,46,.48);
  padding:2px 3px 2px 6px;border-radius:2px;
  transform:rotate(-9deg);
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(183,41,46,.16);
  opacity:.9;
}
.card.has-stamp .card-name{padding-right:72px}

/* 空状态 */
.empty{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:80px 20px;color:var(--dim);text-align:center;
}
.empty.on{display:flex}
.empty .big{font-family:var(--serif);font-size:22px;color:var(--ink-3);letter-spacing:.14em}
.empty .small{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em}

/* ============================ 抽屉 ============================ */
.scrim{
  position:fixed;inset:0;z-index:80;background:rgba(6,22,49,.32);
  backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .26s;
}
.scrim.on{opacity:1;pointer-events:auto}

/* 断线提示条：浮在底部居中，不遮挡任何操作 */
.netbar{
  position:fixed;bottom:22px;left:50%;
  transform:translateX(-50%) translateY(12px);
  z-index:86;display:none;align-items:center;gap:8px;
  padding:9px 18px;border-radius:3px;
  background:linear-gradient(180deg,#B7292E,#9C1F24);
  color:#fff;font-size:12px;letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 14px 30px -12px rgba(120,20,26,.8),0 1px 0 rgba(255,255,255,.14) inset;
  opacity:0;transition:opacity .2s,transform .2s;
}
.netbar.on{display:flex;opacity:1;transform:translateX(-50%) translateY(0)}
.netbar .nd{width:6px;height:6px;border-radius:50%;background:#fff;animation:blinkDot 1.3s infinite}
@keyframes blinkDot{0%,100%{opacity:1}50%{opacity:.25}}
@media(max-width:900px){ .netbar{white-space:normal;width:calc(100% - 28px);font-size:11.5px} }

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:90;
  width:min(640px,100%);
  background:var(--paper-2);
  border-left:1px solid var(--line);
  box-shadow:var(--sh-3);
  display:flex;flex-direction:column;
  transform:translateX(102%);
  transition:transform .34s cubic-bezier(.22,.8,.28,1);
}
.drawer.on{transform:none}
.drawer-head{
  flex:none;padding:16px 22px 14px;background:linear-gradient(180deg,#0B2247,#08182F);
  color:#fff;position:relative;overflow:hidden;
}
.drawer-head::after{
  content:"";position:absolute;right:-20px;top:-40px;bottom:-40px;width:180px;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.055) 0 2px,transparent 2px 9px);
  -webkit-mask-image:linear-gradient(to left,#000,transparent);mask-image:linear-gradient(to left,#000,transparent);
}
.dh-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dh-code{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:#8FB6F0;font-weight:600;
}
.dh-grade{
  display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;border-radius:1px;
  border:1px solid rgba(255,255,255,.3);font-size:10.5px;letter-spacing:.08em;
  background:rgba(255,255,255,.08);color:#E4EFFF;
}
.dh-grade b{font-family:var(--serif);font-size:13px;font-weight:600}
.dh-close{
  margin-left:auto;width:28px;height:28px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:2px;
  transition:.15s;position:relative;z-index:2;
}
.dh-close:hover{background:rgba(255,255,255,.2)}
.dh-name{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:.05em;margin:0;line-height:1.25}
.dh-meta{
  display:flex;gap:14px;margin-top:9px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.08em;color:rgba(180,205,240,.8);flex-wrap:wrap;
}
.drawer-body{flex:1;overflow-y:auto;padding:22px 22px 40px}

.field{margin-bottom:22px}
.field:last-child{margin-bottom:0}
.field-h{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--dim);
  text-transform:uppercase;margin-bottom:8px;
}
.field-h::before{content:"";width:14px;height:1px;background:var(--dim)}
.field-h b{font-family:var(--sans);font-size:11px;letter-spacing:.12em;color:var(--ink-2);font-weight:600}
.field-v{
  font-size:13.5px;line-height:2;color:var(--ink-2);
  white-space:pre-wrap;word-break:break-word;
  background:#fff;border:1px solid var(--line-soft);border-left:2px solid var(--blue);
  padding:12px 15px;border-radius:0 2px 2px 0;
}
.field-v.plain{background:transparent;border:none;padding:0 0 0 0}
.tag-inline{
  display:inline-block;font-size:10.5px;letter-spacing:.05em;padding:3px 9px;
  border:1px solid var(--line);background:#fff;border-radius:1px;color:var(--ink-3);
}
/* 接触等级「绝密」：跟极危同色系，但用细边和浅底，不抢等级标签的分量 */
.tag-inline.clr-omega{
  border-color:rgba(194,24,42,.42);color:#A3121F;background:rgba(194,24,42,.07);
  font-weight:600;letter-spacing:.12em;
}
.fg .hint.custom{color:#8A6708}
/* 编号占用：输入框描红 + 提示改色，已注销档案只做灰色提醒 */
.fg input.dup{
  border-color:rgba(180,36,58,.55);background:rgba(180,36,58,.035);
}
.fg input.dup:focus{
  border-color:rgba(180,36,58,.75);box-shadow:0 0 0 3px rgba(180,36,58,.12);
}
.fg .hint.warn{color:#B4243A;font-weight:600}
.fg .hint.gone{color:#8A6708}

.drawer-foot{
  flex:none;display:flex;gap:8px;padding:13px 22px;border-top:1px solid var(--line);
  background:#fff;
}
.drawer-foot .spacer{flex:1}

/* ============================ 模态 / 表单 ============================ */
.modal-wrap{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;
  background:rgba(6,22,49,.42);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.modal-wrap.on{opacity:1;pointer-events:auto}
.modal{
  width:min(720px,100%);max-height:calc(100vh - 60px);
  background:var(--paper-2);border:1px solid var(--line);border-radius:2px;
  box-shadow:var(--sh-3);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(10px) scale(.99);transition:transform .24s cubic-bezier(.2,.8,.3,1);
}
.modal-wrap.on .modal{transform:none}
.modal-head{
  flex:none;padding:14px 20px;background:linear-gradient(180deg,#0B2247,#08182F);color:#fff;
  display:flex;align-items:center;gap:10px;
}
.modal-head h3{margin:0;font-family:var(--serif);font-size:16px;letter-spacing:.14em;font-weight:600}
.modal-head .x{margin-left:auto;width:26px;height:26px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:2px}
.modal-head .x:hover{background:rgba(255,255,255,.2)}
.modal-body{flex:1;overflow-y:auto;padding:20px}
.modal-foot{flex:none;display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--line);background:#fff}
.modal-foot .spacer{flex:1}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg{display:flex;flex-direction:column;gap:6px}
.fg.full{grid-column:1/-1}
.fg label{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--dim);
  text-transform:uppercase;display:flex;gap:6px;align-items:center;
}
.fg label em{font-style:normal;color:var(--red);font-size:10px}
.fg input,.fg select,.fg textarea{
  width:100%;border:1px solid var(--line);border-radius:2px;background:#fff;
  padding:9px 11px;font-size:13px;outline:none;transition:.16s;letter-spacing:.02em;
}
.fg textarea{resize:vertical;line-height:1.8;min-height:88px}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  border-color:var(--blue-hi);box-shadow:0 0 0 3px rgba(43,107,255,.11);background:#fff;
}
.fg input::placeholder,.fg textarea::placeholder{color:#B4C4D9}
.fg .hint{font-size:10.5px;color:#94A9C4;letter-spacing:.02em}

.grade-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.gp{
  border:1px solid var(--line);background:#fff;border-radius:2px;padding:9px 6px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:3px;transition:.16s;
}
.gp b{font-family:var(--serif);font-size:17px;line-height:1;font-weight:600}
.gp span{font-size:10px;letter-spacing:.06em;color:var(--ink-3)}
.gp:hover{border-color:#A9C2E2;background:var(--paper-2)}
.gp.on{color:#fff;border-color:transparent}
.gp.on span{color:inherit;opacity:.78}

/* ============================ 上线面板 ============================ */
.sync-row{display:flex;gap:9px;align-items:flex-end}
.room-code{
  font-family:var(--mono);font-size:20px;letter-spacing:.28em;color:var(--blue);
  font-weight:600;
}
.who{display:flex;flex-direction:column;gap:5px}
.who-item{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);
  padding:6px 9px;border:1px solid var(--line-soft);background:#fff;border-radius:2px;
}
.who-item .dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.who-item .t{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--dim)}

.note{
  background:rgba(43,107,255,.055);border:1px solid rgba(43,107,255,.18);border-left:2px solid var(--blue-hi);
  padding:10px 12px;font-size:11.5px;line-height:1.8;color:var(--ink-2);border-radius:0 2px 2px 0;
}

/* ============================ Toast ============================ */
.toast-host{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:9px;
  background:#08182F;color:#E8F1FF;border:1px solid rgba(255,255,255,.14);
  padding:9px 15px;font-size:12.5px;letter-spacing:.03em;border-radius:2px;
  box-shadow:0 14px 34px -12px rgba(6,22,49,.75);
  animation:toastIn .26s cubic-bezier(.2,.8,.3,1) both;
  max-width:80vw;
}
.toast.out{animation:toastOut .2s ease forwards}
.toast .bar{width:2px;height:14px;background:var(--blue-hi);flex:none}
.toast.err .bar{background:#FF7A7A}
.toast.ok .bar{background:#3FE0A0}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(6px)}}

/* ============================ 响应式 ============================ */
@media(max-width:900px){
  body{grid-template-columns:1fr;grid-template-rows:var(--hdr) auto 1fr}
  .rail{
    grid-column:1;grid-row:2;border-right:none;border-bottom:1px solid var(--line);
    display:block;padding:12px 14px 10px;overflow:visible;
    box-shadow:0 6px 16px -14px rgba(8,21,44,.5);
  }
  .rail > section{margin-bottom:11px}
  .rail > section:last-of-type{margin-bottom:0}
  .rail-sec-h{margin:0 0 6px 0}
  .grade-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .grade-item{width:auto;padding:7px 9px}
  .grade-item.on::before{display:none}
  .rail > section:nth-of-type(3){display:none}
  .rail-foot,.stat-box{display:none}
  .stage{grid-column:1;grid-row:3;padding:0 14px 50px}
  .toolbar{flex-wrap:wrap;padding:12px 0 10px}
  .search{max-width:none;flex:1 1 100%}
  .grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .topbar{padding:0 12px;gap:8px}
  .brand-txt b{font-size:16px}
  .brand-txt span{display:none}
  .pill{display:none}
  .drawer{width:100%}
}
@media(max-width:520px){
  .grade-picker{grid-template-columns:repeat(2,1fr)}
}

/* 功能面板分组 */
.mo-group{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color:var(--dim);text-transform:uppercase;
  margin:9px 0 1px;padding-left:2px;
}
.mo-group:first-child{margin-top:0}
.mo-item{justify-content:flex-start;height:38px;text-align:left;padding-left:14px}
.mo-item.danger{color:var(--red);border-color:#E2C3C6}
.mo-item.danger:hover{background:#FDF4F5;border-color:var(--red)}

/* 降低动效偏好 */
@media (prefers-reduced-motion: reduce){
  .card{animation:none!important}
  .drawer,.modal,.scrim,.modal-wrap{transition:none!important}
}

/* 打印 */
@media print{
  body{display:block;height:auto;overflow:visible;background:#fff}
  .topbar,.rail,.toolbar,.scrim,.modal-wrap,.toast-host,.drawer-foot,.result-line{display:none!important}
  .stage{overflow:visible;padding:0}
  .grid{grid-template-columns:1fr 1fr}
  .card{break-inside:avoid;box-shadow:none}
}

/* ---- 云端同步配置（更多面板里的输入区） ---- */
.mo-cloud{display:grid;gap:6px}
.mo-input{
  border:1px solid var(--line);border-radius:2px;padding:8px 10px;
  font-family:var(--mono);font-size:11.5px;color:var(--ink);background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.mo-input::placeholder{color:#9FB3CC;letter-spacing:0}
.mo-input:focus{outline:none;border-color:var(--blue-hi);box-shadow:0 0 0 3px rgba(43,107,255,.1)}
.mo-cloud-row{display:flex;gap:6px}
.mo-cloud-row .mo-input{min-width:0}

/* ============================================================
   主题按钮：日间显示月亮、夜间显示太阳
   ============================================================ */
.theme-btn .i-sun{display:none}
[data-theme="dark"] .theme-btn .i-moon{display:none}
[data-theme="dark"] .theme-btn .i-sun{display:block}

/* 切换时补一小段过渡，避免整页硬闪 */
html.theming,
html.theming *{
  transition:background-color .22s ease, color .22s ease, border-color .22s ease,
             box-shadow .22s ease, background-image .22s ease !important;
}

/* ============================================================
   夜间模式 —— 深底、冷白字，等级色换成高亮版本
   浅色的纸面变量整体换掉，剩下少数写死白底的组件在下面逐一覆盖
   ============================================================ */
[data-theme="dark"]{
  --ink:#E7EEFA;
  --ink-2:#C7D7ED;
  --ink-3:#94AAC9;
  --dim:#7E95B5;
  --blue:#1D57B8;
  --blue-hi:#5A93FF;
  --blue-deep:#030A16;
  --blue-mid:#0A1A30;
  --paper:#0A1422;
  --paper-2:#0C1929;
  --card:#0F1E32;
  --line:#22374F;
  --line-soft:#182A40;
  --red:#E0646C;
  --green:#3FC08F;

  --who:#B7A6FF;
  --who-hi:#C7BBFF;

  --alpha-fg:#5FE0A6;
  --beta-fg:#F2C75B;
  --gamma-fg:#FFA265;
  --delta-fg:#D6A7FF;
  --omega-fg:#FF8F97;

  --grid:rgba(122,168,255,.075);
  --paper-fade:rgba(10,20,34,0);

  --sh-1:0 1px 0 rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.4);
  --sh-2:0 12px 32px -10px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.5);
  --sh-3:0 30px 70px -18px rgba(0,0,0,.85);

  color-scheme:dark;
}
[data-theme="dark"] ::selection{background:rgba(90,147,255,.32);color:#fff}

/* 滚动条 */
[data-theme="dark"] .stage::-webkit-scrollbar-thumb,
[data-theme="dark"] .rail::-webkit-scrollbar-thumb,
[data-theme="dark"] .drawer-body::-webkit-scrollbar-thumb{
  background:rgba(140,182,255,.2);background-clip:padding-box;
}
[data-theme="dark"] .stage::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .rail::-webkit-scrollbar-thumb:hover{background:rgba(140,182,255,.36);background-clip:padding-box}

/* 通用控件：先铺一层深底，具体组件在下面再修 */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea{
  background-color:var(--card);border-color:var(--line);color:var(--ink);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{color:#63799B}

/* 顶栏 / 侧栏 */
[data-theme="dark"] .topbar{
  background:linear-gradient(180deg,#0A1D38 0%,#050F1E 100%);
  border-bottom-color:rgba(150,192,255,.14);
  box-shadow:0 1px 0 rgba(0,0,0,.6), 0 10px 28px -16px rgba(0,0,0,.9);
}
[data-theme="dark"] .rail{
  background:linear-gradient(180deg,#0B1728,#08121F);
  border-right-color:var(--line);
}
[data-theme="dark"] .rail-sec-h{color:#7C93B3}
[data-theme="dark"] .grade-item{color:var(--ink-2)}
[data-theme="dark"] .grade-item:hover{background:rgba(140,182,255,.07);border-color:var(--line-soft)}
[data-theme="dark"] .grade-item.on{
  background:rgba(140,182,255,.1);border-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .g-count{background:rgba(140,182,255,.14);color:#A2B9D8}
[data-theme="dark"] .chip{background:#12233A;border-color:var(--line);color:var(--ink-2)}
[data-theme="dark"] .chip:hover{border-color:#3A5A83;color:#9CC0FF}
[data-theme="dark"] .stat-box{background:var(--card);border-color:var(--line)}
[data-theme="dark"] .stat-bar{background:rgba(140,182,255,.14)}
[data-theme="dark"] .rail-foot{color:#6C83A3}

/* 按钮 */
[data-theme="dark"] .btn{background:#132540;border-color:#2A415F;color:var(--ink-2)}
[data-theme="dark"] .btn:hover{background:#182B49;border-color:#3A5A83;color:#EAF2FF}
[data-theme="dark"] .btn.primary{background:var(--blue);border-color:#2C6BD0;color:#fff}
[data-theme="dark"] .btn.primary:hover{background:#2568D6;border-color:#3D7BEA}
[data-theme="dark"] .btn.ghost-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24);color:#DCE9FF}
[data-theme="dark"] .btn.ghost-dark:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.42);color:#fff}
[data-theme="dark"] .btn.danger{color:#FF9AA0;border-color:rgba(224,100,108,.42)}
[data-theme="dark"] .btn.danger:hover{background:rgba(224,100,108,.12);border-color:#E0646C}

/* 工具栏 */
[data-theme="dark"] .search input{border-color:var(--line);box-shadow:none}
[data-theme="dark"] .search input:focus{border-color:var(--blue-hi);box-shadow:0 0 0 3px rgba(90,147,255,.16)}
[data-theme="dark"] .search kbd{background:#132540;border-color:var(--line);color:#8CA3C2}
[data-theme="dark"] select.sort{border-color:var(--line);color:var(--ink-2)}
[data-theme="dark"] select.sort:focus{border-color:var(--blue-hi)}
[data-theme="dark"] .result-line::after{background:var(--line-soft)}

/* 卡片 */
[data-theme="dark"] .card{background:var(--card);border-color:var(--line)}
[data-theme="dark"] .card:hover{border-color:#3A5A83}
[data-theme="dark"] .card-name{color:#EFF5FF}
[data-theme="dark"] .card-status{background:rgba(140,182,255,.12);color:var(--ink-3)}
[data-theme="dark"] .card-status[data-s="收容中"]{color:#6BE3B4;background:rgba(63,192,143,.15)}
[data-theme="dark"] .card-status[data-s="封锁中"]{color:#FF9FA6;background:rgba(224,100,108,.17)}
[data-theme="dark"] .card-status[data-s="观察中"]{color:#93BDFF;background:rgba(90,147,255,.17)}
[data-theme="dark"] .card-status[data-s="待收容"]{color:#F3C868;background:rgba(214,162,26,.17)}
[data-theme="dark"] .card-status[data-s="已失效"],
[data-theme="dark"] .card-status[data-s="遗失"]{color:#98A8BD;background:rgba(255,255,255,.07)}
[data-theme="dark"] .card-foot{color:#7E95B5;border-top-color:var(--line-soft)}
[data-theme="dark"] .card-foot .mini-who{color:#8FA6C4}
[data-theme="dark"] .card-foot .mini-who .mini-date{color:#7B90AB}
[data-theme="dark"] .arch{color:var(--who)}
[data-theme="dark"] #dMeta .arch{color:var(--who-hi)}
[data-theme="dark"] .stamp{
  color:rgba(255,132,140,.8);border-color:rgba(255,132,140,.55);
  box-shadow:inset 0 0 0 1px rgba(255,132,140,.18);
}
[data-theme="dark"] .empty .big{color:var(--ink-3)}

/* 抽屉 / 模态 */
[data-theme="dark"] .scrim{background:rgba(2,7,16,.62)}
[data-theme="dark"] .modal-wrap{background:rgba(2,7,16,.66)}
[data-theme="dark"] .drawer{border-left-color:var(--line)}
[data-theme="dark"] .drawer-head{background:linear-gradient(180deg,#0B2247,#061428)}
[data-theme="dark"] .field-v{background:#0D1C2E;border-color:var(--line-soft);border-left-color:var(--blue-hi);color:var(--ink-2)}
[data-theme="dark"] .field-v.plain{background:transparent}
[data-theme="dark"] .tag-inline{background:#132540;border-color:var(--line);color:var(--ink-2)}
[data-theme="dark"] .tag-inline.clr-omega{
  border-color:rgba(255,132,140,.45);color:#FF9EA6;background:rgba(224,100,108,.14);
}
[data-theme="dark"] .drawer-foot{background:#0B1828;border-top-color:var(--line)}
[data-theme="dark"] .modal{background:var(--paper-2);border-color:var(--line)}
[data-theme="dark"] .modal-head{background:linear-gradient(180deg,#0B2247,#061428)}
[data-theme="dark"] .modal-foot{background:#0B1828;border-top-color:var(--line)}

/* 表单 */
[data-theme="dark"] .fg input,
[data-theme="dark"] .fg select,
[data-theme="dark"] .fg textarea{background:#0D1C2E;border-color:var(--line)}
[data-theme="dark"] .fg input:focus,
[data-theme="dark"] .fg select:focus,
[data-theme="dark"] .fg textarea:focus{
  background:#0F2036;border-color:var(--blue-hi);box-shadow:0 0 0 3px rgba(90,147,255,.16);
}
[data-theme="dark"] .fg .hint{color:#7E95B5}
[data-theme="dark"] .fg .hint.warn{color:#FF8F97}
[data-theme="dark"] .fg .hint.gone,
[data-theme="dark"] .fg .hint.custom{color:#E7BB5F}
[data-theme="dark"] .fg input.dup{border-color:rgba(255,132,140,.55);background:rgba(224,100,108,.1)}
[data-theme="dark"] .fg input.dup:focus{border-color:rgba(255,132,140,.8);box-shadow:0 0 0 3px rgba(224,100,108,.16)}
[data-theme="dark"] .gp{background:#0D1C2E;border-color:var(--line)}
[data-theme="dark"] .gp span{color:var(--ink-3)}
[data-theme="dark"] .gp:hover{background:#132540;border-color:#3A5A83}
[data-theme="dark"] .gp.on{border-color:transparent}

/* 面板小件 */
[data-theme="dark"] .who-item{background:#0D1C2E;border-color:var(--line-soft);color:var(--ink-2)}
[data-theme="dark"] .note{
  background:rgba(90,147,255,.09);border-color:rgba(90,147,255,.26);
  border-left-color:var(--blue-hi);color:var(--ink-2);
}
[data-theme="dark"] .mo-item{background:#132540;border-color:#2A415F;color:var(--ink-2)}
[data-theme="dark"] .mo-item:hover{background:#182B49;border-color:#3A5A83;color:#EAF2FF}
[data-theme="dark"] .mo-item.danger{color:#FF9AA0;border-color:rgba(224,100,108,.4)}
[data-theme="dark"] .mo-item.danger:hover{background:rgba(224,100,108,.13);border-color:#E0646C;color:#FFB2B7}
[data-theme="dark"] .mo-input{background:#0D1C2E;border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .mo-input::placeholder{color:#63799B}
[data-theme="dark"] .mo-input:focus{border-color:var(--blue-hi);box-shadow:0 0 0 3px rgba(90,147,255,.14)}
/* 上线面板里两格行内样式的输入框（房间码 / 端点） */
[data-theme="dark"] #roomInput,
[data-theme="dark"] #endpointInput{background:#0D1C2E;color:var(--ink)}

/* 夜间模式下打印仍然按白纸来 */
@media print{
  [data-theme="dark"]{
    --paper:#fff;--paper-2:#fff;--card:#fff;--line:#C3D5EC;--line-soft:#DCE7F6;
    --ink:#08152C;--ink-2:#152C50;--ink-3:#3D5B84;--dim:#7B92B2;
    color-scheme:light;
  }
  [data-theme="dark"] .card,
  [data-theme="dark"] .card-status{background:#fff!important}
  [data-theme="dark"] .card-name{color:#08152C}
}

/* 窄屏：主题按钮只留图标，别把顶栏挤爆 */
@media(max-width:900px){
  .theme-btn span{display:none}
  .theme-btn{padding:0 9px}
}

/* 内部报纸 */
.module-nav{display:grid;gap:5px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.module-nav button{
  display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 10px;
  text-align:left;border:1px solid transparent;border-radius:4px;
  background:transparent;color:var(--ink-2);font-size:13px;font-weight:650;
}
.module-nav button:hover{background:var(--paper-2)}
.module-nav button[aria-current="page"]{
  border-color:var(--line);background:var(--card);color:var(--ink);
  box-shadow:inset 3px 0 var(--blue-hi);
}
.module-icon{
  display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--line);
  border-radius:3px;background:var(--paper);color:var(--ink-3);font:700 13px var(--serif);
}
.module-open .rail > section{display:none}
.stage{min-width:0}
.archive-module,.news-module{max-width:1540px;margin:0 auto;padding-top:clamp(19px,3.5vw,41px)}
.archive-header,.news-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.archive-header h1,.news-header h1{
  margin:0;font:700 clamp(23px,3vw,36px)/1.25 var(--serif);letter-spacing:.045em;
}
.archive-header{padding:0 0 18px;border-bottom:1px solid var(--line)}
.archive-header .btn{flex:none;height:35px}
.toolbar .search{flex:1;max-width:560px;min-width:0}
.view-switch{
  display:inline-flex;flex:none;gap:2px;padding:2px;
  border:1px solid var(--line);border-radius:4px;background:var(--paper-2);
}
.view-switch button{
  border:1px solid transparent;border-radius:3px;padding:4px 10px;
  background:none;color:var(--ink-3);white-space:nowrap;font-size:12px;
}
.view-switch button[aria-pressed="true"]{border-color:var(--line);background:var(--card);color:var(--ink)}
.grid.is-list{grid-template-columns:1fr;gap:5px}
.is-list .card{
  display:grid;grid-template-columns:minmax(125px,1.1fr) minmax(105px,.85fr) minmax(0,2fr);
  align-items:center;gap:12px;padding:10px 13px;min-height:49px;
}
.is-list .card-top{margin:0;flex-wrap:wrap;gap:5px}
.is-list .card-spacer,.is-list .card-foot,.is-list .stamp{display:none}
.is-list .card-name{margin:0;font-size:16px;overflow-wrap:anywhere}
.is-list .card-nature{min-height:0;-webkit-line-clamp:1}
.is-list .card:hover{transform:none}
.card{border-radius:4px;min-width:0}
.card-code{overflow-wrap:anywhere}
.card .badge,.card .card-status{white-space:nowrap}
.drawer-head{padding-block:23px 19px}
.dh-meta > span{padding:3px 6px;border:1px solid rgba(180,205,240,.18);border-radius:3px}
.news-module{max-width:1170px}
.news-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 0 15px;border-bottom:4px double var(--line);
}
.news-content{padding:18px 0 0}
.news-toolbar,.news-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.news-toolbar{justify-content:space-between;margin-bottom:16px}
.news-status,.news-meta{margin:0;color:var(--ink-3);font-size:12px}
.news-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
  gap:14px;margin:0;padding:0;list-style:none;
}
.news-item{
  display:flex;flex-direction:column;width:100%;height:100%;padding:0;text-align:left;
  border:1px solid var(--line);border-top:3px solid var(--blue);
  border-radius:2px;background:var(--card);color:var(--ink);overflow:hidden;
  overflow-wrap:anywhere;
}
.news-item:hover{border-color:var(--blue-hi)}
.news-cover{
  display:block;width:100%;aspect-ratio:16/8;object-fit:cover;object-position:center 22%;
  background:var(--paper);
}
.news-card-copy{display:grid;gap:8px;padding:15px 16px 18px}
.news-item strong{font:700 19px/1.35 var(--serif)}
.news-excerpt{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  color:var(--ink-3);font-size:13px;line-height:1.55;
}
.news-sheet{
  max-width:850px;margin:0 auto;padding:clamp(16px,5vw,48px);
  background:var(--card);border:1px solid var(--line);
  border-top:4px double var(--blue-hi);overflow-wrap:anywhere;
}
.news-sheet .news-meta{font-family:var(--mono)}
.news-sheet h3{
  margin:12px 0 20px;padding-bottom:18px;border-bottom:1px solid var(--line);
  font:700 clamp(24px,4vw,38px)/1.3 var(--serif);
}
.news-body{white-space:pre-wrap;line-height:1.9;font:400 16px/1.9 var(--serif)}
.news-body:empty{display:none}
.news-form:not([hidden]){
  display:grid;gap:14px;max-width:850px;margin:0 auto;
  padding:clamp(14px,4vw,30px);border:1px solid var(--line);background:var(--card);
}
.news-form h3{margin:0;font:700 17px var(--serif)}
.news-form label{display:grid;min-width:0;gap:6px;font-size:13px;color:var(--ink-2)}
.news-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.news-form input,.news-form textarea{
  width:100%;min-width:0;padding:9px;border:1px solid var(--line);
  border-radius:2px;background:var(--card);color:var(--ink);font-size:14px;
}
.news-form textarea{resize:vertical}
.news-form .news-actions{justify-content:flex-end}
.news-module :focus-visible,.module-nav button:focus-visible,.view-switch button:focus-visible{
  outline:2px solid var(--blue-hi);outline-offset:2px;
}
@media(max-width:900px){
  body{grid-template-rows:var(--hdr) auto minmax(0,1fr)}
  .rail{max-height:43dvh;overflow-y:auto}
  .module-nav{grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:8px;margin-bottom:10px}
  .module-open .module-nav{margin-bottom:0;border-bottom:0;padding-bottom:0}
  .toolbar .search{flex:1 1 100%;max-width:none}
}
@media(max-width:520px){
  .archive-header,.news-header{align-items:flex-start}
  .archive-header h1,.news-header h1{letter-spacing:0}
  .archive-header .btn{height:32px;padding-inline:7px;font-size:11px}
  .archive-header .btn svg{display:none}
  .news-form-row{grid-template-columns:1fr}
  .is-list .card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .is-list .card-nature{display:none}
}
@media(max-width:350px){
  .topbar{padding-inline:7px;gap:5px}
  .topbar .btn{padding-inline:7px}
}

.news-gallery{display:grid;gap:16px}
.news-gallery:empty,.news-form [role="status"]:empty{display:none}
.news-sheet .news-gallery{margin-top:22px}
.news-sheet .news-gallery figure{border:1px solid var(--line-soft);background:var(--paper-2)}
.news-gallery figure{min-width:0;margin:0}
.news-gallery img{display:block;max-width:100%;height:auto;margin-inline:auto;border-radius:2px}
.news-previews{grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr));gap:10px}
.news-previews figure{display:grid;gap:6px;padding:8px;border:1px solid var(--line);background:var(--card)}
.news-previews img{width:100%;height:104px;object-fit:contain}
.news-previews figcaption{overflow-wrap:anywhere;font-size:12px;color:var(--ink-3)}
.news-previews button{justify-self:start}

/* 最新一期和往期目录 */
.news-feature{display:grid;grid-template-columns:1fr;min-height:160px}
.news-feature:has(.news-cover){grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch}
.news-feature .news-cover{height:100%;min-height:210px;max-height:300px;aspect-ratio:auto}
.news-feature .news-card-copy{align-content:center;padding:clamp(16px,4vw,36px)}
.news-feature strong{font-size:clamp(22px,3vw,36px)}
.news-feature-label{
  width:max-content;border-bottom:2px solid var(--blue-hi);padding-bottom:4px;
  color:var(--ink-3);font-size:12px;font-weight:650;
}
.news-past{margin-top:24px}
.news-past h2{margin:0 0 11px;font:700 18px var(--serif)}
.news-sheet{border-top:5px double var(--blue-hi)}
.news-sheet .news-body{max-width:66ch;margin-inline:auto}
@media(max-width:620px){
  .news-feature:has(.news-cover){grid-template-columns:1fr}
  .news-feature .news-cover{height:auto;min-height:0;max-height:220px;aspect-ratio:2/1}
}

/* 异常收容状态 */
[data-alert="watch"]{
  --status-ink:#124B88;--status-edge:#4386BD;--status-paper:#DCEEFF;
  --status-pattern:radial-gradient(circle at 1px 1px,var(--status-edge) 1px,transparent 1.5px);
  --status-size:7px 7px;
}
[data-alert="lockdown"]{
  --status-ink:#8B2038;--status-edge:#CA526B;--status-paper:#FFE0E8;
  --status-pattern:repeating-linear-gradient(135deg,var(--status-edge) 0 3px,transparent 3px 8px);
}
[data-alert="pending"]{
  --status-ink:#744000;--status-edge:#BA790C;--status-paper:#FFF0CA;
  --status-pattern:repeating-linear-gradient(90deg,var(--status-edge) 0 7px,transparent 7px 12px);
}
[data-alert="inactive"]{
  --status-ink:#414F60;--status-edge:#788797;--status-paper:#E7EBF0;
  --status-pattern:repeating-linear-gradient(135deg,var(--status-edge) 0 1px,transparent 1px 5px);
}
[data-alert="missing"]{
  --status-ink:#5D2C86;--status-edge:#9160BA;--status-paper:#F2E4FC;
  --status-pattern:repeating-linear-gradient(90deg,var(--status-edge) 0 3px,transparent 3px 6px,var(--status-edge) 6px 13px,transparent 13px 19px);
}
[data-alert="other"]{
  --status-ink:#46596F;--status-edge:#728BA7;--status-paper:#E5ECF4;
  --status-pattern:linear-gradient(var(--status-edge),var(--status-edge));
}
[data-theme="dark"] [data-alert="watch"]{--status-ink:#BCE2FF;--status-paper:#183D59}
[data-theme="dark"] [data-alert="lockdown"]{--status-ink:#FFD2DC;--status-paper:#551F30}
[data-theme="dark"] [data-alert="pending"]{--status-ink:#FFDE91;--status-paper:#4F3814}
[data-theme="dark"] [data-alert="inactive"]{--status-ink:#D6DCE5;--status-paper:#333D4A}
[data-theme="dark"] [data-alert="missing"]{--status-ink:#EFD3FF;--status-paper:#422A57}
[data-theme="dark"] [data-alert="other"]{--status-ink:#DAE7F5;--status-paper:#31475F}

.card[data-alert]{
  border-color:color-mix(in srgb,var(--status-edge) 54%,var(--line));
  background:linear-gradient(110deg,color-mix(in srgb,var(--status-paper) 52%,var(--card)),var(--card) 74%);
}
.card[data-alert]:hover{border-color:var(--status-edge)}
.card[data-alert]::after{
  content:"";position:absolute;inset:0 0 auto 3px;height:4px;pointer-events:none;
  background-image:var(--status-pattern);background-size:var(--status-size,auto);
}
.card[data-alert="inactive"]{border-style:dashed}
.card[data-alert="missing"]{border-style:dotted}
[data-alert]:not([data-alert=""]) .card-status{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--status-ink);background:var(--status-paper);border:1px solid var(--status-edge);
  padding:3px 6px;border-radius:3px;font-size:10px;font-weight:750;line-height:1.25;
}
.status-icon{
  display:inline-grid;place-items:center;position:relative;
  flex:none;width:14px;height:12px;font-size:13px;line-height:1;
}
[data-alert="lockdown"] .status-icon::before,
[data-alert="lockdown"] .status-icon::after{
  content:"";position:absolute;top:3px;width:8px;height:6px;border:1.5px solid currentColor;
  border-radius:4px;transform:rotate(-38deg);
}
[data-alert="lockdown"] .status-icon::before{left:0;top:5px}
[data-alert="lockdown"] .status-icon::after{right:0;top:1px}
#dMeta[data-alert]:not([data-alert=""]) .card-status{padding-block:1px}
@media print{
  [data-theme="dark"] [data-alert]:not([data-alert=""]) .card-status{color:#111}
}
.card[data-alert] .card-top{flex-wrap:wrap}
.card[data-alert] .card-status{max-width:100%;white-space:normal;overflow-wrap:anywhere}

/* 万象魔典 */
.magic-module{max-width:1170px;margin:0 auto;padding-top:clamp(19px,3.5vw,41px)}
.magic-header{border-bottom:4px double var(--line);padding-bottom:15px}
.magic-header h1{margin:0;font:700 clamp(23px,3vw,36px)/1.25 var(--serif);letter-spacing:.045em}
.magic-reference,.magic-count{color:var(--ink-3);font:12px/1.55 var(--mono)}
.magic-reference{margin:0 0 4px}
.magic-rules{margin:16px 0;border:1px solid var(--line);background:var(--card);border-radius:4px}
.magic-rules summary{padding:12px 14px;cursor:pointer}
.magic-rules dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;padding:0 14px 14px}
.magic-rules dt{font-weight:650;color:var(--ink)}
.magic-rules dd{margin:0;color:var(--ink-3);line-height:1.55}
.magic-categories{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.magic-categories button{
  padding:6px 11px;border:1px solid var(--line);border-radius:4px;
  background:var(--card);color:var(--ink-2);
}
.magic-categories button[aria-pressed="true"]{border-color:var(--blue-hi);box-shadow:inset 0 -2px var(--blue-hi);color:var(--ink)}
.magic-categories span{margin-left:4px;font:11px var(--mono);color:var(--ink-3)}
.magic-filters{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.magic-filters label{color:var(--ink-3);font-size:12px}
.magic-filters input,.magic-filters select{
  display:block;width:100%;min-width:0;margin-top:4px;padding:7px 8px;
  border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink);
}
.magic-results{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:14px 0 10px;
}
.magic-count{margin:0}
.magic-notice{color:var(--ink-3);font-size:13px;margin:0 0 12px}
.magic-notice:empty,.magic-form-error:empty{display:none}
.magic-grid{
  list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));
}
.magic-grid article{
  height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:12px;
  padding:15px 16px 10px;border:1px solid var(--line);border-radius:5px;background:var(--card);
}
.magic-grid header{padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.magic-grid h2{margin:0 0 8px;font:700 20px/1.35 var(--serif);overflow-wrap:anywhere}
.magic-tags{display:flex;flex-wrap:wrap;gap:5px}
.magic-tags span{
  padding:2px 6px;border:1px solid var(--line);border-radius:3px;
  background:var(--paper-2);color:var(--ink-3);font:12px/1.45 var(--mono);
}
.magic-grid p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}
.magic-grid footer{display:flex;justify-content:flex-end}
.magic-remove,.magic-restore{
  border:0;background:none;color:var(--ink-3);padding:4px 6px;font-size:12px;
}
.magic-remove:hover{color:var(--red);text-decoration:underline}
.magic-maintenance{text-align:right;margin-top:26px;padding-top:7px;border-top:1px solid var(--line-soft)}
.magic-restore:hover{text-decoration:underline}
.magic-module :focus-visible,.magic-dialog :focus-visible{outline:2px solid var(--blue-hi);outline-offset:2px}
.magic-dialog{
  width:min(520px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;
  border:1px solid var(--line);border-radius:6px;padding:20px;background:var(--card);color:var(--ink);
}
.magic-dialog::backdrop{background:rgba(4,15,35,.65)}
.magic-dialog form{display:grid;gap:12px}
.magic-dialog h2,.magic-dialog p{margin:0}
.magic-dialog label{display:grid;gap:4px;font-size:13px}
.magic-dialog label[hidden],.magic-editor-fields[hidden]{display:none}
.magic-dialog input,.magic-dialog select,.magic-dialog textarea{
  width:100%;min-width:0;border:1px solid var(--line);border-radius:4px;padding:7px 8px;
  background:var(--paper-2);color:var(--ink);font-size:14px;
}
.magic-dialog textarea{resize:vertical}
.magic-editor-fields{display:grid;grid-template-columns:minmax(65px,1fr) minmax(0,2fr) minmax(85px,1fr);gap:8px}
.magic-form-error{color:var(--red);font-size:13px}
.magic-dialog-actions{display:flex;justify-content:flex-end;gap:8px}
@media(max-width:520px){
  .module-nav button{gap:5px;padding-inline:4px}
  .module-icon{width:20px;height:20px;flex:none}
  .magic-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .magic-filters label:first-child{grid-column:1/-1}
  .magic-rules dl{grid-template-columns:1fr;gap:4px}
  .magic-rules dd{margin-bottom:6px}
}

.magic-effect-icon{
  display:grid;place-items:center;flex:0 0 34px;height:34px;
  border:1px solid var(--line);border-radius:5px;background:var(--paper-2);
  font:19px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.magic-grid footer{align-items:center;gap:6px}
.magic-edit{
  padding:4px 9px;border:1px solid var(--line);border-radius:4px;
  background:var(--paper-2);color:var(--ink-2);font-size:12px;
}
.magic-edit:hover{border-color:var(--blue-hi);color:var(--ink)}

/* 魔典卡面 */
.magic-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:16px}
.magic-grid article{
  --card-gold:#a88950;
  --cover-glow:#5845a0;
  --cover-depth:#18152d;
  grid-template-rows:auto auto 1fr auto;gap:0;padding:0;overflow:hidden;
  border:1px solid var(--card-gold);border-radius:11px;
}
.magic-grid article>header{padding:13px 15px 10px;text-align:center}
.magic-grid article>header h2{margin:0 0 6px}
.magic-grid .magic-tags{justify-content:center}
.magic-grid article>p{padding:12px 15px;color:var(--ink)}
.magic-grid article>footer{padding:5px 11px 9px}
.magic-cover{
  position:relative;isolation:isolate;display:grid;place-items:center;
  aspect-ratio:2/1;min-height:113px;color:#fff;
  background:radial-gradient(ellipse at 50% 53%,var(--cover-glow),transparent 57%),
    repeating-conic-gradient(from 0deg at 50% 53%,#fff1 0deg 1deg,transparent 1deg 30deg),
    var(--cover-depth);
  border-bottom:3px double #d9ba76;
}
.magic-cover::before{
  content:"";position:absolute;width:29%;aspect-ratio:1;border:1px solid #f6e5a775;
  border-radius:50%;box-shadow:0 0 0 7px #f6e5a728,0 0 0 15px #f6e5a717;z-index:-1;
}
.magic-cover[data-rank="1"],.magic-cover[data-rank="2"]{--cover-glow:#225c89;--cover-depth:#0b2135}
.magic-cover[data-rank="5"],.magic-cover[data-rank="6"],.magic-cover[data-rank="7"]{--cover-glow:#904158;--cover-depth:#2b1528}
.magic-cover .magic-effect-icon{
  display:grid;width:auto;height:auto;border:0;background:transparent;
  font-size:clamp(36px,5vw,62px);filter:drop-shadow(0 0 13px #c0adff9c);
}
.magic-ribbon,.magic-cost,.magic-cover-caption{
  position:absolute;color:#fff2d1;background:#221938;border:1px solid #d9ba76;
}
.magic-ribbon{
  top:0;left:12px;min-width:34px;padding:8px 5px 11px;text-align:center;
  border-top:0;border-radius:0 0 9px 9px;font:700 13px var(--serif);
}
.magic-cost{top:10px;right:10px;padding:5px 7px;border-radius:20px;font:700 11px var(--mono)}
.magic-cover-caption{
  left:50%;bottom:0;transform:translate(-50%,50%);padding:1px 12px;border-radius:12px;
  white-space:nowrap;font:700 11px/1.5 var(--serif);
}
.magic-unique-grid article{
  --card-gold:#b0915d;
  grid-template-rows:auto auto 1fr auto auto;color:#faf1de;background:#161321;
  border:3px double var(--card-gold);box-shadow:0 0 16px #b59aff22;
}
.magic-unique-grid .magic-cover{
  --cover-glow:#6d4491;--cover-depth:#120c20;aspect-ratio:1.8;
}
.magic-cover[data-domain="时间"],.magic-cover[data-domain="知识"]{--cover-glow:#406297}
.magic-cover[data-domain="生命"]{--cover-glow:#376f61}
.magic-cover[data-domain="死亡"],.magic-cover[data-domain="因果"]{--cover-glow:#8d3d53}
.magic-cover[data-domain="命运"]{--cover-glow:#875d37}
.magic-cover[data-domain="空间"]{--cover-glow:#43509b}
.magic-cover[data-domain="存在"]{--cover-glow:#5d4b77}
.magic-unique-grid article>header{border-bottom-color:#bd9e6138}
.magic-unique-grid .magic-tags span,.magic-unique-grid .magic-edit{
  background:#2a2037;border-color:#bd9e6160;color:#f4dfbd;
}
.magic-unique-grid .magic-remove{color:#c7b4cf}
.magic-unique-hint{padding:13px 15px 9px}
.magic-unique-hint h3{margin:0 0 6px;color:#dabc82;font:700 12px/1.5 var(--serif)}
.magic-unique-hint blockquote{
  margin:0;border-inline-start:1px solid #bd9e61;padding-inline-start:9px;
  color:#faf1de;font:400 15px/1.65 var(--serif);overflow-wrap:anywhere;
}
.magic-redacted{
  display:flex;align-items:center;gap:8px;margin:0 15px 8px;color:#d1c1da;font-size:11px;
}
.magic-redaction{height:13px;flex:1;border:1px solid #67586d;border-radius:2px;background:#020103}

/* 唯一法术的横向阅读卡与自定义图标 */
.magic-grid.magic-unique-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,2vw,20px)}
.magic-unique-grid article{
  grid-template-columns:minmax(170px,.34fr) minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"cover heading" "cover body" "cover actions";
}
.magic-unique-grid .magic-cover{
  grid-area:cover;aspect-ratio:auto;border-bottom:0;border-inline-end:1px solid #bd9e6160;
}
.magic-unique-grid .magic-cover-caption{bottom:14px;transform:translateX(-50%)}
.magic-unique-grid article>header{grid-area:heading;padding:18px 22px 12px;text-align:left}
.magic-unique-grid article>header h2{font-size:clamp(23px,3vw,30px)}
.magic-unique-grid .magic-tags{justify-content:flex-start}
.magic-unique-body{grid-area:body;padding:15px 22px 0;min-width:0}
.magic-unique-grid article>footer{grid-area:actions;padding-inline:22px}
.magic-unique-effect h3{margin:0 0 6px;color:#dabc82;font:700 13px/1.5 var(--serif)}
.magic-grid .magic-unique-effect p{color:#faf1de;font-size:15px;line-height:1.8}
.magic-unique-body .magic-unique-hint{padding:13px 0 10px}
.magic-unique-body .magic-redacted{margin-inline:0}
/* Imported art uses the cover, with labels above it. */
.magic-cover.has-custom-art::before{display:none}
.magic-custom-icon{
  position:absolute;inset:4px 6px;
  width:calc(100% - 12px);height:calc(100% - 8px);
  object-fit:contain;object-position:center;
}
.magic-unique-grid .magic-custom-icon{
  inset:43px 9px 35px;
  width:calc(100% - 18px);height:calc(100% - 78px);
}
.magic-ribbon,.magic-cost,.magic-cover-caption{z-index:1}
.magic-image-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.magic-image-controls label{flex:1;min-width:min(185px,100%)}
.magic-image-controls img{
  width:48px;height:48px;object-fit:contain;border:1px solid var(--line);border-radius:4px;
}
.magic-image-controls p{width:100%;color:var(--ink-3);font-size:12px}
@media(max-width:1050px){
  .magic-unique-grid article{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto 1fr auto;
    grid-template-areas:"cover" "heading" "body" "actions";
  }
  .magic-unique-grid .magic-cover{
    min-height:128px;border-inline-end:0;border-bottom:3px double #d9ba76;
  }
  .magic-unique-grid .magic-cover.has-custom-art{min-height:225px}
  .magic-unique-grid .magic-custom-icon{
    inset:10px 9px 26px;height:calc(100% - 36px);
  }
}

@media(max-width:520px){
  .magic-unique-grid .magic-cover{min-height:90px}
  .magic-unique-grid .magic-cover.has-custom-art{min-height:180px}
  .magic-unique-grid .magic-ribbon{left:6px;min-width:0;padding:4px;font-size:10px}
  .magic-unique-grid .magic-cover-caption{bottom:6px;padding-inline:7px;font-size:10px}
  .magic-unique-grid article>header{padding:11px 9px 8px}
  .magic-unique-grid article>header h2{font-size:19px}
  .magic-unique-body{padding:9px 9px 0}
  .magic-grid .magic-unique-effect p,.magic-unique-hint blockquote{font-size:13px}
  .magic-unique-grid article>footer{padding-inline:8px;flex-wrap:wrap}
  .magic-redaction{min-width:0}
}

/* 唯一法术档案 */
.magic-dossier{
  width:min(740px,calc(100% - 24px));padding:0;
  border-color:var(--line);border-radius:9px;
}
.magic-dossier-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px clamp(14px,4vw,28px);
  background:linear-gradient(115deg,#191735,#32284b);color:#fff0d6;
  border-bottom:3px double #c3a16b;
}
.magic-dossier-head p{font:12px/1.5 var(--mono);color:#e0c89f;overflow-wrap:anywhere}
.magic-dossier-head h2{margin-top:5px;font:700 clamp(22px,4vw,30px)/1.3 var(--serif);overflow-wrap:anywhere}
.magic-dossier-head button{flex:none}
.magic-dossier-content{padding:0 clamp(14px,4vw,28px) 13px}
.magic-dossier-content section{padding:14px 0;color:var(--ink-2);line-height:1.7;overflow-wrap:anywhere}
.magic-dossier-content section+section{border-top:1px solid var(--line)}
.magic-dossier-content h3{margin:0 0 6px;color:var(--ink);font:700 17px/1.4 var(--serif)}
.magic-dossier-content p{white-space:pre-wrap}
.magic-dossier-content .magic-dossier-cooldown{margin-top:5px;color:var(--ink-3);font-size:13px}
.magic-dossier-content ul{margin:0;padding-inline-start:1.4em}
.magic-dossier-content li+li{margin-top:3px}
.magic-dossier-open{margin-inline-start:auto}