/* Akasha 深色秘境设计系统 —— 陪伴、设置、工坊三页共用。
   纯静态、零依赖：不引外部字体、不拉 CDN，file:// 直开即所得。
   色板与形态全部对齐伊甸 EDEN 的 Midnight Cathedral：ink/gold/text/astral 四组令牌、
   2px 雕版圆角、实色面 + 细线、宽字距只留给纯拉丁元素。只此一套深色，没有浅色档。 */

:root {
  /* 底与面：EDEN ink-900 / 800 / 700 */
  --bg: #0b0f16;
  --bg-2: #111823;
  --panel: #111823;
  --panel-2: #182231;
  /* 线：EDEN line / line-faint */
  --line: #24303f;
  --line-soft: #1a2432;
  --line-strong: #35485f;
  /* 需要「金色描边」的地方走这条，不要误用结构线 --line */
  --line-gold: rgba(198, 161, 91, .38);
  /* 金：EDEN gold-500 / gold-300 / gold-dim */
  --gold: #c6a15b;
  --gold-bright: #e2ca96;
  --gold-dim: rgba(198, 161, 91, .13);
  /* 域强调色：EDEN oriental / astral / risk */
  --teal: #4fa391;
  --violet: #7d9fd8;
  --rose: #c27070;
  --verify: #d08a3c;
  /* 文本：EDEN text-1 / text-2 / text-3 */
  --text: #ece6d8;
  --dim: #a9b3c2;
  --faint: #848ea0;
  /* 字体栈照 EDEN：拉丁在前、中文显式指定，绝不能落到 SimSun（宋体小字发虚、无真粗体）。
     本机实测 Cormorant/EB Garamond 未装，Palatino Linotype / Noto Serif SC / Noto Sans SC 可用。 */
  --serif: "Cormorant Garamond", "EB Garamond", "Palatino Linotype", "Book Antiqua", Palatino, "Century Schoolbook", Georgia, "Times New Roman", "Noto Serif SC", "Source Han Serif SC", "Microsoft YaHei", serif;
  --sans: "Segoe UI", "Helvetica Neue", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, "Segoe UI Mono", ui-monospace, "Noto Sans SC", "Microsoft YaHei", monospace;
  /* 雕版圆角：卡片与控件都是 2px，只有小圆点/旋钮用 50%。
     唯一的例外是气泡样式（classic/terminal/card 三档是作者可选的「对话形态」，
     不是卡片形态），三档圆角写在 .bubble-* 里，别改这条去迁就它们。 */
  --r-card: 2px;
  --r-ctl: 2px;
  /* 金/青/红三色的半透明档：只收这几档，别在页里再写新的 rgba。
     .04/.06 是 hover 与徽章底，.10/.18 是选中底与轨道，.38 是描边 */
  --gold-04: rgba(198, 161, 91, .04);
  --gold-06: rgba(198, 161, 91, .06);
  --gold-10: rgba(198, 161, 91, .10);
  --gold-18: rgba(198, 161, 91, .18);
  --teal-10: rgba(79, 163, 145, .10);
  --teal-35: rgba(79, 163, 145, .35);
  --teal-45: rgba(79, 163, 145, .45);
  --rose-06: rgba(194, 112, 112, .06);
  --rose-10: rgba(194, 112, 112, .10);
  --rose-45: rgba(194, 112, 112, .45);
  /* 金底上的字色（按钮、选中项） */
  --ink: #10151d;
  /* 标签口径：含中文的标签一律 11.5px 起、不加宽字距；宽字距只给纯拉丁。
     字号阶只留这 7 档；9/10/10.5px 的旧写法视为 bug（CJK 会糊） */
  --f-1: 11.5px;
  --f-2: 12.5px;
  --f-3: 14px;
  --f-4: 16px;
  --f-5: 20px;
  --f-6: 26px;
  --f-7: 44px;
  --f-lbl: 600 var(--f-1)/1.45 var(--sans);
  /* 当前域的强调色；页面可按 tab 覆盖（工坊三个域各一色） */
  --acc: var(--gold);
  --acc-b: var(--gold-bright);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* [hidden] 必须压过组件自己的 display（.ws 是 grid，否则切 tab 藏不住） */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  /* EDEN 的底：顶部 astral 冷光 + 右下 oxblood 暗红 + 雕版斜纹，压在 ink-900 上 */
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(125, 159, 216, .10), transparent 62%),
    radial-gradient(900px 500px at 100% 100%, rgba(142, 44, 57, .08), transparent 60%),
    repeating-linear-gradient(135deg, rgba(236, 230, 216, .022) 0 1px, transparent 1px 7px),
    var(--bg);
  color: var(--text);
  font: 14px/1.75 var(--sans);
  letter-spacing: normal;
}

::selection { background: var(--gold-dim); }
/* 键盘焦点是键盘用户唯一能看见的「我在哪」：1px 在深底上太弱，2px 起 */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #202c3d; border: 3px solid transparent; background-clip: content-box; }

/* 星野：两组 1px 微光点，缓慢明灭（颜色跟 EDEN 的暖白/金/星蓝走，压得很暗，只当纸纹） */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  width: 1px; height: 1px;
  background: transparent;
}
body::before {
  box-shadow:
    90px 120px rgba(226,202,150,.3), 260px 60px rgba(236,230,216,.22),
    410px 210px rgba(79,163,145,.22), 620px 90px rgba(236,230,216,.18),
    780px 260px rgba(226,202,150,.22), 960px 140px rgba(125,159,216,.26),
    1120px 60px rgba(236,230,216,.2), 1290px 230px rgba(226,202,150,.22),
    180px 420px rgba(125,159,216,.2), 540px 480px rgba(236,230,216,.16),
    880px 450px rgba(79,163,145,.18), 1240px 500px rgba(226,202,150,.16),
    340px 700px rgba(236,230,216,.15), 1060px 680px rgba(125,159,216,.16),
    60px 620px rgba(226,202,150,.16), 700px 560px rgba(236,230,216,.14),
    1350px 380px rgba(79,163,145,.15), 480px 320px rgba(125,159,216,.14),
    1020px 240px rgba(236,230,216,.16), 1200px 160px rgba(226,202,150,.14);
  animation: twinkle 7s ease-in-out infinite alternate;
}
body::after {
  box-shadow:
    150px 300px rgba(236,230,216,.16), 480px 160px rgba(226,202,150,.2),
    700px 380px rgba(79,163,145,.16), 1000px 320px rgba(236,230,216,.15),
    1320px 120px rgba(125,159,216,.2), 260px 560px rgba(226,202,150,.15),
    940px 600px rgba(236,230,216,.12), 1180px 420px rgba(79,163,145,.13),
    60px 200px rgba(125,159,216,.13), 560px 100px rgba(236,230,216,.12),
    830px 520px rgba(226,202,150,.13), 1290px 620px rgba(236,230,216,.11),
    380px 240px rgba(79,163,145,.12), 1100px 560px rgba(125,159,216,.12);
  animation: twinkle 9s ease-in-out -3s infinite alternate;
}
@keyframes twinkle {
  from { opacity: .25; }
  to   { opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before, body::after { animation: none; opacity: .7; }
}

/* ── 骨架 ─────────────────────────────────────────── */

.shell { max-width: 1280px; margin: 0 auto; padding: 0 28px 96px; }

header.top {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; row-gap: 10px;
  padding: 40px 0 10px;
}
.brand {
  font: 600 26px/1.2 var(--serif);
  color: var(--gold-bright);
  letter-spacing: .18em;
  text-decoration: none;
}
.brand:hover { color: var(--text); }
.page-title { font: 400 20px/1.2 var(--serif); color: var(--text); }
.page-sub { font-size: 12.5px; color: var(--faint); letter-spacing: .3em; }
.top-nav { margin-left: auto; display: flex; gap: 10px; }
.top-nav a {
  font-size: 12.5px; color: var(--dim); text-decoration: none;
  font-family: var(--sans); padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl);
}
.top-nav a:hover, .top-nav a.on { color: var(--gold-bright); border-color: var(--line-gold); background: var(--gold-dim); }

.rule {
  height: 0; margin: 22px 0 34px; border-bottom: 3px double var(--line-strong);
}

/* 域横幅：一句话说清「这层管什么、喂给谁」，颜色跟当前域走 */
.domain {
  display: flex; gap: 16px; align-items: flex-start; padding: 16px 20px; margin-bottom: 20px;
  border-left: 2px solid var(--acc); border-radius: 0 var(--r-card) var(--r-card) 0; background: var(--bg-2);
}
.domain .dt { font: 600 14px/1.5 var(--serif); color: var(--acc); letter-spacing: .02em; }
.domain .dd { font-size: 12.5px; color: var(--dim); line-height: 1.85; margin-top: 3px; }
.domain .dd code, .domain .dd .readout { font: 11.5px var(--mono); color: var(--faint); }
.domain .dd a { text-decoration: none; }

/* ── 卡片与区块 ───────────────────────────────────── */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.card + .card { margin-top: 20px; }

.card-h {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--line);
}
.card-h svg { width: 17px; height: 17px; stroke: var(--acc); fill: none; stroke-width: 1.4; flex: none; }
.card-h h2 { font: 600 16.5px/1.3 var(--serif); color: var(--acc-b); letter-spacing: .02em; }
.card-h .hint { margin-left: auto; font-size: 12px; color: var(--faint); }
.card-b { padding: 20px 24px 24px; }

/* ── 表单控件 ─────────────────────────────────────── */

label.f { display: block; margin-bottom: 16px; }
label.f span, .glabel {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; color: var(--dim); letter-spacing: .02em;
}
/* 文本类控件一律走这一套：漏了 password 的话，登录页会出现一个白框立在黑页上
   （浏览器默认样式在深色底上不是「没配色」，是「刺眼」）。 */
input[type="text"], input[type="url"], input[type="number"],
input[type="password"], input[type="email"], input[type="search"], textarea, select {
  width: 100%;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 9px 12px;
  font: 14px/1.6 var(--sans);
}
textarea { resize: vertical; min-height: 74px; }
/* 只改边框，不吞焦点环：全局 :focus-visible 的 2px 描边要留给键盘用户。
   鼠标点输入框时浏览器也判 :focus-visible（文本控件如此），描边会一起出现，这是有意的。 */
input:focus, textarea:focus, select:focus { border-color: var(--gold); }
::placeholder { color: var(--faint); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }

/* 分段选择（experience mode 等二选一） */
.seg { display: flex; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; }
.seg button {
  flex: 1; padding: 10px 0; white-space: nowrap;
  background: transparent; border: 0; cursor: pointer;
  color: var(--dim); font: 600 13px/1 var(--sans); letter-spacing: .02em;
}
.seg button.on {
  background: linear-gradient(180deg, transparent, var(--gold-dim)), var(--panel-2);
  color: var(--gold-bright);
}
.seg button:not(:last-child) { border-right: 1px solid var(--line-soft); }
.seg button:disabled { opacity: .38; cursor: not-allowed; }
.seg button:disabled:hover { color: var(--dim); }

/* 滑杆 */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--line-strong);
  border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -6px;
  border-radius: 50%;
  background: var(--gold-bright);
  border: 1px solid var(--line-strong);
}

/* 开关 */
.switch { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--line-soft); }
.switch:last-child { border-bottom: 0; }
.switch .t { font-size: 13.5px; }
.switch .d { font-size: 12px; color: var(--faint); }
/* 设置页的开关是 JS 直接生成的 .switch-btn，和陪伴页的 .switch button 同一形态，共用一套定义 */
.switch button, .switch-btn {
  flex: none; width: 44px; height: 24px; border-radius: var(--r-ctl); cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-2); position: relative;
  transition: background .25s, border-color .25s;
}
.switch button::after, .switch-btn::after {
  content: ""; position: absolute; top: 3px; left: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--faint); transition: transform .25s, background .25s;
}
.switch button.on, .switch-btn.on { border-color: var(--gold); background: var(--gold-18); }
.switch button.on::after, .switch-btn.on::after { transform: translateX(19px); background: var(--gold-bright); }

/* 徽章 / 读数 */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--f-lbl); letter-spacing: .02em;
  color: var(--gold-bright);
  border: 1px solid var(--line-gold); border-radius: var(--r-ctl);
  padding: 5px 11px;
  background: var(--gold-dim);
}
.badge.teal { color: var(--teal); border-color: var(--teal-45); background: var(--teal-10); }
.badge.dim-b { color: var(--faint); border-color: var(--line); background: transparent; }
/* 「没接线」不是错误，是还没接：虚线边 + 灰字，和已接线的金色徽章明确区分 */
.badge.draft { color: var(--faint); border: 1px dashed var(--line-strong); background: transparent; }
.badge.warn { color: var(--verify); border-color: rgba(208,138,60,.45); background: rgba(208,138,60,.08); }

/* 小标题：全站唯一的大写 mono 口径（原 .widget .cap 抬到这里） */
.cap {
  display: block; font: 600 var(--f-1)/1.6 var(--mono);
  letter-spacing: .18em; color: var(--faint); text-transform: uppercase;
}
.cap:lang(zh) { text-transform: none; letter-spacing: .08em; }

.readout { font: 13px/1 var(--mono); color: var(--teal); }
.note { font-size: 12px; color: var(--faint); line-height: 1.7; }
.note strong { color: var(--dim); font-weight: 600; }

/* ── 按钮系统 ─────────────────────────────────────
   全站只有这一套按钮：.btn 是基类，四个变体 + 一个尺寸。
   旧的 .primary / .ghost 保留为别名，新写的代码请用 .btn。 */

.btn, .primary, .ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 34px; padding: 8px 16px; cursor: pointer;
  font: 600 12.5px/1.2 var(--sans); letter-spacing: .02em;
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--bg-2); color: var(--dim);
  text-decoration: none; white-space: nowrap;
  transition: border-color .16s, background .16s, color .16s;
}
.btn:hover, .primary:hover, .ghost:hover { border-color: var(--line-gold); color: var(--gold-bright); }
.btn-primary, .primary {
  width: auto; margin-top: 0; padding: 11px 20px;
  color: var(--ink); background: var(--gold); border-color: var(--gold-bright);
  font-size: 13px;
}
.btn-primary:hover, .primary:hover { background: var(--gold-bright); color: var(--ink); }
.btn-ghost, .ghost { background: none; border-color: var(--line-gold); color: var(--gold-bright); }
.btn-quiet { background: none; border-color: var(--line); color: var(--faint); }
.btn-danger { background: none; border-color: var(--rose-45); color: var(--rose); }
.btn-sm { min-height: 26px; padding: 4px 10px; font-size: 11.5px; }
.btn-block { display: flex; width: 100%; }
/* 禁用态：金色按钮不许「看起来还能点」 */
.btn:disabled, .primary:disabled, .ghost:disabled,
.btn[aria-disabled="true"] {
  opacity: .42; cursor: not-allowed; filter: grayscale(.35);
}
.btn:disabled:hover, .primary:disabled:hover { background: var(--gold); color: var(--ink); border-color: var(--gold-bright); }

/* ── 气泡样式（与引擎 BUBBLE_STYLES 对齐）─────────── */

.msg-in, .msg-out {
  border-radius: var(--r-card); padding: 10px 14px;
  font-size: 13.5px; line-height: 1.7; max-width: 88%;
}
.msg-in { background: var(--bg-2); border: 1px solid var(--line); align-self: flex-start; }
.msg-out { align-self: flex-end; background: rgb(var(--acc-rgb, 198 161 91) / .16); border: 1px solid rgb(var(--acc-rgb, 198 161 91) / .45); color: var(--acc-fg, var(--gold-bright)); }
.bubble-classic { border-radius: 12px; }
.bubble-terminal {
  font: 12.5px/1.7 var(--mono);
  border-left: 2px solid var(--acc, var(--gold)); border-radius: 0 8px 8px 0;
}
.bubble-card { border-radius: var(--r-card); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.font-sans { font-family: var(--sans); }
.font-serif { font-family: var(--serif); }
.font-mono { font-family: var(--mono); }

/* ── 页脚 ─────────────────────────────────────────── */

footer {
  margin-top: 56px; padding-top: 18px; text-align: center;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--faint); letter-spacing: .02em;
}

@media (max-width: 900px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .card-h { flex-wrap: wrap; row-gap: 6px; }
  .card-h .hint { margin-left: 0; flex-basis: 100%; }
}

/* 触屏设备：按钮与色板按 44px 触控目标抬一档（桌面鼠标不需要这么粗） */
@media (pointer: coarse) {
  .btn, .primary, .ghost, .top-nav a, .kit button { min-height: 44px; }
  .top-nav a { display: inline-flex; align-items: center; justify-content: center; }
  .swatches button { width: 44px; height: 44px; }
  .switch button, .switch-btn { width: 48px; height: 28px; }
  .switch button::after, .switch-btn::after { width: 20px; height: 20px; }
  .switch button.on::after, .switch-btn.on::after { transform: translateX(18px); }
}

/* 窄屏：顶栏必须能折行，否则三颗导航药丸会把页面撑出横向滚动条 */
@media (max-width: 700px) {
  .shell { padding: 0 18px 72px; }
  header.top { padding-top: 26px; }
  .top-nav { margin-left: 0; flex-basis: 100%; }
  .top-nav a { flex: 1; text-align: center; padding: 9px 10px; }
  .domain { padding: 14px 16px; }
  .rule { margin: 16px 0 24px; }
  .brand { font-size: 22px; }
  .page-title { font-size: 18px; }
}


/* ── 顶栏的账号那一格（account.js 注入，几面共用）──────────────
   名字是这段记录的主人，退出紧挨着它：这两件事必须在同一处，
   别让人到「设置」里去找「我在哪」。 */
.acct { display: inline-flex; align-items: center; gap: 10px; margin-left: 14px; }
.acct b { font: 600 12.5px/1 var(--serif); color: var(--gold-bright); letter-spacing: .02em; }
.acct button {
  font: 11.5px/1 var(--mono); letter-spacing: .08em; color: var(--faint);
  background: none; border: 1px solid var(--line); border-radius: var(--r-card); padding: 5px 9px;
}
.acct button:hover { color: var(--rose); border-color: var(--rose); }
.acct button:disabled { opacity: .5; }
@media (max-width: 700px) {
  .acct { margin-left: 0; }
}