/* SPX Folio — same night skin as Analyzer / KeyBook */
:root {
  --bg:#0f1419; --card:#1a2332; --border:#2d3a4f; --text:#e7ecf3;
  --muted:#8b9bb4; --green:#3dd68c; --red:#f07178; --yellow:#ffd580;
  --cyan:#5ccfe6; --blue:#82aaff;
}
* { box-sizing:border-box; }
html { max-width:100%; overflow-x:hidden; }
body {
  margin:0; font-family:"Segoe UI",system-ui,-apple-system,"Noto Sans TC",sans-serif;
  background:var(--bg); color:var(--text); line-height:1.5; padding:0;
}
a { color:var(--cyan); text-decoration:none; }
a:hover { text-decoration:underline; }
.top {
  display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap;
  padding:10px 16px; border-bottom:1px solid var(--border); background:#121a24;
}
.brand { font-weight:700; font-size:1.05rem; }
.brand .sub { color:var(--muted); font-weight:400; font-size:.8rem; margin-left:8px; }
nav a { color:var(--muted); margin-right:12px; }
nav a.on, nav a:hover { color:var(--text); text-decoration:none; }
.ver { margin-left:auto; color:var(--muted); font-size:.78rem; }
.wrap { max-width:880px; margin:0 auto; padding:16px 16px 88px; }
h1 { font-size:1.35rem; margin:0 0 4px; font-weight:650; }
h2 { font-size:1.02rem; color:var(--cyan); margin:0 0 10px; font-weight:600; }
.sub { color:var(--muted); font-size:.88rem; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0 14px; }
.chip {
  display:inline-block; padding:3px 10px; border:1px solid var(--border);
  border-radius:999px; font-size:.8rem; color:var(--text); background:#152033;
}
.chip.on { border-color:var(--cyan); color:var(--cyan); }
.badge {
  display:inline-block; padding:2px 8px; border-radius:6px; font-size:.75rem;
  background:#243044; color:var(--muted);
}
.badge.ok { color:var(--green); }
.badge.bad { color:var(--red); }
.badge.yellow { color:var(--yellow); }
.badge.cyan { color:var(--cyan); }
.panel {
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; margin:12px 0; width:100%;
}
.grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px;
}
.card {
  background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px 14px;
  min-width:0;
}
.card .label { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.card .val { font-size:1.02rem; font-weight:600; margin-top:3px; }
.card a.title { color:var(--text); font-weight:650; font-size:1.02rem; }
.meta { color:var(--muted); font-size:.8rem; margin-top:6px; }
.warn {
  background:rgba(255,213,128,.1); border:1px solid rgba(255,213,128,.3);
  color:var(--yellow); padding:8px 12px; border-radius:8px; margin:8px 0;
}
.flash {
  background:rgba(61,214,140,.12); border:1px solid rgba(61,214,140,.35);
  color:var(--green); padding:8px 12px; border-radius:8px; margin:8px 0;
}
.err {
  background:rgba(240,113,120,.12); border:1px solid rgba(240,113,120,.35);
  color:var(--red); padding:8px 12px; border-radius:8px; margin:8px 0;
}
label.lbl { display:block; font-size:.75rem; color:var(--muted); margin:8px 0 4px; }
input[type=text], input[type=password], input[type=search], select, textarea {
  background:#101826; color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:7px 9px; font:inherit; width:100%; max-width:100%;
}
textarea { min-height:320px; height:320px; max-height:480px; resize:vertical; overflow:auto; box-sizing:border-box; font-family:Consolas,ui-monospace,monospace; font-size:.84rem; line-height:1.45; }
.body-col { min-width:0; }
.preview-box, #bodyPreview { height:320px; min-height:320px; overflow:hidden; padding:0; }
.html-frame { width:100%; height:320px; border:0; background:#fff; display:block; }
.btn {
  background:#243044; color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:7px 12px; cursor:pointer; font:inherit;
}
.btn:hover { border-color:var(--cyan); }
.btn.pri { background:#1b3a4a; border-color:#3a6a80; color:var(--cyan); }
.btn.danger { border-color:#6a3038; color:var(--red); }
.btn.ok { border-color:#2a5a44; color:var(--green); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:860px) { .split { grid-template-columns:1fr; } }
.folio-body { font-size:.98rem; }
.folio-body h1, .folio-body h2, .folio-body h3 { color:var(--cyan); border:0; margin:1.1em 0 .4em; }
.folio-body h1 { font-size:1.25rem; color:var(--text); }
.folio-body p { margin:.6em 0; }
.folio-body ul, .folio-body ol { padding-left:1.3em; }
.folio-body a { color:var(--blue); }
.folio-body blockquote {
  margin:.8em 0; padding:6px 12px; border-left:3px solid var(--cyan);
  color:var(--muted); background:#152033;
}
.folio-body table { border-collapse:collapse; width:100%; font-size:.88rem; }
.folio-body th, .folio-body td { border-bottom:1px solid var(--border); padding:5px 6px; text-align:left; }
.folio-body pre, pre.folio-pre {
  background:#101826; border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; overflow:auto; font-family:Consolas,ui-monospace,monospace;
  font-size:.82rem; line-height:1.4;
}
.folio-body code { font-family:Consolas,ui-monospace,monospace; font-size:.86em; }
.folio-body :not(pre) > code { background:#101826; padding:1px 5px; border-radius:4px; }
.empty { color:var(--muted); padding:24px 8px; text-align:center; }
.filters {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:8px 10px;
  align-items:end;
  margin:4px 0 16px;
}
.filters .lbl { margin:0; min-width:0; }
.filters select, .filters input { max-width:none; }
.filters .btn { width:100%; padding:9px 12px; }
.week-rail { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.week-rail a { white-space:nowrap; }
.toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0 14px; }
.week-block { margin:14px 0; }
.week-block h2 { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.week-block h2 .sub { font-weight:400; }
.slots { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:720px) { .slots { grid-template-columns:1fr; } }
.slot.empty .val { color:var(--muted); font-weight:500; font-size:.92rem; }
.path { font-family:Consolas,ui-monospace,monospace; font-size:.78rem; color:var(--muted); word-break:break-all; }
.kicker { color:var(--muted); font-size:.82rem; margin:2px 0 12px; line-height:1.4; }
.doc-list {
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:var(--card);
}
.doc-row {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  color:inherit;
  text-decoration:none;
  min-height:56px;
}
.doc-row:last-child { border-bottom:0; }
.doc-row:hover, .doc-row:active { background:#152033; text-decoration:none; }
.doc-row .pick { display:flex; align-items:center; }
.batch-bar { display:flex; gap:10px; align-items:center; margin:8px 0 12px; }
.batch-bar .lbl { margin:0; }
.doc-row .mark {
  flex:0 0 4px; align-self:stretch; border-radius:4px; background:var(--border);
}
.doc-row.kind-view .mark { background:var(--cyan); }
.doc-row.kind-review .mark { background:var(--yellow); }
.doc-main { flex:1 1 auto; min-width:0; }
.doc-title {
  font-weight:650; font-size:.98rem; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.doc-meta {
  margin-top:3px; color:var(--muted); font-size:.75rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.doc-actions { flex:0 0 auto; display:flex; gap:8px; align-items:center; }
.doc-actions a { font-size:.8rem; padding:6px 10px; }
.list-count { color:var(--muted); font-size:.78rem; margin:0 0 8px; }
.empty-line { color:var(--muted); padding:28px 12px; text-align:center; font-size:.9rem; }

.chip-row { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
.filters .chip-row { grid-column:1 / -1; margin:0 0 4px; }
.chip-row .chip {
  padding:6px 12px; font-size:.84rem; cursor:pointer;
  appearance:none; -webkit-appearance:none; font:inherit;
}
.chip-row button.chip { color:var(--text); text-decoration:none; }
.chip-row .chip.on { background:#1b3a4a; color:var(--cyan); border-color:var(--cyan); }
.dock {
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:#121a24ee; border-top:1px solid var(--border);
  backdrop-filter:blur(8px);
}
.dock .btn { min-width:120px; }

@media (max-width:720px) {
  .wrap { padding:12px 12px 96px; }
  .top { padding:10px 12px; }
  .ver { width:100%; margin-left:0; }
  nav a { margin-right:10px; font-size:.92rem; }
  h1 { font-size:1.2rem; }
  .toolbar .btn { flex:1 1 calc(50% - 8px); text-align:center; padding:9px 8px; font-size:.84rem; }
  .split { grid-template-columns:1fr; }
  textarea { min-height:200px; }
  .doc-title { white-space:normal; }
  .doc-meta { white-space:normal; }
}