/* 深色夜战 · 青玉 / 白紫 / 珊瑚红（原创配色，不用任何官方素材） */
:root {
  --bg-0: #070B12;
  --bg-1: #0C131A;
  --bg-2: #131E24;
  --bg-3: #1A2730;
  --line: #25403C;
  --line-soft: rgba(127, 233, 200, .12);
  --txt-1: #F2F7F4;
  --txt-2: #A9C3BB;
  --txt-3: #6E8C85;

  --neon-cyan: #7FE9C8;      /* 主色：薄荷青玉 */
  --neon-magenta: #C9B6F5;   /* 白紫 */
  --neon-violet: #9C86E0;
  --neon-lime: #A8F0D0;
  --gold: #E8C86A;
  --danger: #FF5C6E;         /* 珊瑚红 */

  --jade: #7FE9C8;
  --jade-deep: #3FBFA0;
  --jade-ink: #0A1A16;
  --lilac: #C9B6F5;
  --lilac-hi: #E6DCFF;
  --coral: #FF5C6E;
  --violet-deep: #6B4FA8;

  --glow-cyan: 0 0 14px rgba(127, 233, 200, .42);
  --glow-magenta: 0 0 16px rgba(201, 182, 245, .34);
  --glow-violet: 0 0 18px rgba(156, 134, 224, .32);

  --grad-hero: linear-gradient(120deg, rgba(201, 182, 245, .18), rgba(127, 233, 200, .16) 48%, rgba(63, 191, 160, .12));
  --grad-btn: linear-gradient(100deg, #7FE9C8, #A8F0D0 55%, #C9B6F5);

  --radius: 10px;
  --radius-lg: 14px;
  --clip-cut: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --clip-cut-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  --font: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 锐角切边：切左上 + 右下；clip-path 会裁断实体 border，改由 inset 阴影描边 */
.cut { clip-path: var(--clip-cut); border-radius: 0; }
.cut-sm { clip-path: var(--clip-cut-sm); border-radius: 0; }
@supports not (clip-path: polygon(0 0)) {
  .cut, .cut-sm { clip-path: none; border-radius: var(--radius); }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--txt-1);
  background: var(--bg-0);
  background-image:
    radial-gradient(900px 520px at 8% -8%, rgba(201, 182, 245, .16), transparent 70%),
    radial-gradient(760px 460px at 100% 0%, rgba(127, 233, 200, .12), transparent 68%),
    radial-gradient(700px 500px at 50% 110%, rgba(63, 191, 160, .10), transparent 70%),
    linear-gradient(rgba(127, 233, 200, .030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 233, 200, .030) 1px, transparent 1px);
  background-size: auto, auto, auto, 32px 32px, 32px 32px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul { padding-left: 1.2em; }
button, select, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
a { color: var(--neon-cyan); }

:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 3px; }
::selection { background: rgba(201, 182, 245, .38); color: #fff; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(127, 233, 200, .22); border-radius: 8px; }

.muted { color: var(--txt-2); }
.neon { color: var(--neon-cyan); }
.tip { font-size: .84rem; color: var(--txt-3); margin: 12px 0; }
.eyebrow {
  font-family: var(--mono); font-size: .70rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--neon-cyan); opacity: .9;
}
.star-mini { color: var(--gold); font-size: .9rem; margin-left: 4px; }
.star-tag, .warn-tag {
  font-size: .72rem; color: var(--gold); border: 1px solid rgba(232, 200, 106, .4);
  border-radius: 999px; padding: 1px 8px; margin-left: 6px; white-space: nowrap;
}

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 20px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(19, 30, 36, .8);
  color: var(--txt-1); font-weight: 600; font-size: .94rem;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover { border-color: var(--neon-cyan); box-shadow: var(--glow-cyan); }
.btn:active { transform: scale(.98); }
.btn.primary {
  background: var(--grad-btn); color: var(--jade-ink); border-color: transparent;
  box-shadow: 0 6px 22px rgba(127, 233, 200, .18);
}
.btn.primary:hover { box-shadow: 0 8px 28px rgba(127, 233, 200, .30); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--txt-2); }
.btn.ghost:hover { color: var(--txt-1); }
.btn.small { min-height: 38px; padding: 7px 13px; font-size: .82rem; border-radius: 10px; }
.btn.full { width: 100%; }
.btn.disabled { opacity: .5; }
.btn.danger { border-color: rgba(255, 92, 110, .5); color: var(--danger); }

.icon-btn {
  min-width: 44px; min-height: 44px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(19, 30, 36, .7);
  font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { border-color: var(--neon-magenta); box-shadow: var(--glow-magenta); }

/* 徽标 chip：与章节横条同四色 */
.chip {
  display: inline-flex; align-items: center; font-size: .72rem; line-height: 1;
  padding: 5px 9px; border-radius: 7px; border: 1px solid var(--line);
  color: var(--txt-2); background: rgba(12, 19, 26, .7); white-space: nowrap;
}
.chip.tier-T1 { color: #7FE9C8; border-color: rgba(127, 233, 200, .4); }
.chip.tier-T2 { color: #3FBFA0; border-color: rgba(63, 191, 160, .45); }
.chip.tier-T3 { color: #C9B6F5; border-color: rgba(201, 182, 245, .4); }
.chip.star-chip { color: var(--gold); border-color: rgba(232, 200, 106, .45); }

/* 设置行副标题 */
.set-row small { display: block; font-size: .7rem; color: var(--txt-3); font-weight: 400; margin-top: 2px; }

select, .import-box {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--txt-1); padding: 10px 12px; min-height: 44px; max-width: 100%;
}
.import-box { width: 100%; min-height: 110px; font-family: var(--mono); font-size: .78rem; resize: vertical; }