/* ============================================================
   Nine Sols — "Taopunk" / Fu-talisman theme
   Angular, cut-corner panels styled like cybernetic 符 talismans:
   sharp edges, neon jade/magenta frames, gold heads, red seals,
   Chi-charge progress bars, ink + bagua accents.
   ============================================================ */
:root {
  --bg: #07090c;
  --bg2: #0c1014;
  --panel-solid: #10161b;
  --panel2: #161e25;
  --line: #213039;
  --line-soft: #18242b;
  --text: #e9f1f2;
  --muted: #8aa0a6;

  --gold: #e9b949;
  --jade: #2fe0c6;
  --cyan: #36d8ff;
  --magenta: #ff3d86;
  --seal: #d6342c;

  --good: var(--jade);

  /* talisman silhouette: clipped top-left + bottom-right corners */
  --cut: 13px;
  --cut-sm: 7px;
  --frame: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  --frame-sm: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
  --frame-grad: linear-gradient(150deg, var(--jade), var(--magenta) 58%, var(--gold));

  --glow-cyan: 0 0 14px rgba(47, 224, 198, 0.45);
  --glow-gold: 0 0 16px rgba(233, 185, 73, 0.4);
  --glow-seal: 0 0 14px rgba(214, 52, 44, 0.5);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 "Chakra Petch", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  min-height: 100vh; position: relative; overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(900px 500px at 18% -8%, rgba(47, 224, 198, 0.10), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(255, 61, 134, 0.10), transparent 55%),
    radial-gradient(1200px 700px at 50% 120%, rgba(214, 52, 44, 0.08), transparent 60%);
}
.bg-grid {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0.4;
  background-image:
    linear-gradient(rgba(47, 224, 198, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 224, 198, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
}
.bg-bagua {
  position: fixed; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: min(82vw, 760px); aspect-ratio: 1; z-index: -1; opacity: 0.04; pointer-events: none;
  background: url("assets/bagua.svg") center/contain no-repeat;
  filter: hue-rotate(120deg) saturate(1.2);
  animation: spin 200s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.muted { color: var(--muted); }
code {
  background: #05080a; padding: 1px 6px; color: var(--jade);
  font-size: 0.9em; border: 1px solid var(--line-soft); clip-path: var(--frame-sm);
}

/* ---- reusable talisman frame ------------------------------- */
/* angular panel with a thin neon gradient edge and opaque inner.
   Applied to every paper-like panel; specific ::after rules below
   only override the inner background (cascade keeps the geometry). */
.talisman, .summary, .meta-card, .cat-card, .cat-detail, .help {
  position: relative; isolation: isolate; background: transparent;
  border: none; clip-path: var(--frame);
}
.talisman::before, .summary::before, .meta-card::before, .cat-card::before, .cat-detail::before, .help::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--frame-grad); clip-path: var(--frame);
}
.talisman::after, .summary::after, .meta-card::after, .cat-card::after, .cat-detail::after, .help::after {
  content: ""; position: absolute; inset: 1.5px; z-index: -1;
  background: var(--panel-solid); clip-path: var(--frame);
}

/* ---- header ------------------------------------------------ */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 28px; position: relative;
  background: linear-gradient(180deg, rgba(12, 18, 22, 0.9), rgba(7, 9, 12, 0.5));
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--jade), var(--magenta), transparent) 1;
  box-shadow: 0 1px 24px rgba(47, 224, 198, 0.08);
}
.brand { display: flex; align-items: center; gap: 16px; }
.logo { width: 50px; height: 50px; filter: drop-shadow(var(--glow-gold)); animation: logospin 90s linear infinite; }
@keyframes logospin { to { transform: rotate(360deg); } }
.topbar h1 { font-size: 20px; margin: 0; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.topbar h1 .cjk {
  font-family: "Noto Serif TC", serif; font-weight: 900; color: var(--seal);
  margin: 0 2px; text-shadow: 0 0 10px rgba(214, 52, 44, 0.5); letter-spacing: 0;
}
.topbar h1 .sub-en {
  display: inline-block; font-size: 12px; letter-spacing: 3px; color: var(--jade);
  border-left: 1px solid var(--line); padding-left: 10px; margin-left: 6px; vertical-align: middle;
}
.topbar p { margin: 3px 0 0; font-size: 13px; letter-spacing: 0.3px; }

.container { max-width: 1060px; margin: 0 auto; padding: 26px 20px 60px; }

/* ---- buttons ----------------------------------------------- */
button { font: inherit; cursor: pointer; border: 1px solid var(--line); letter-spacing: 0.5px; }
.primary {
  position: relative; isolation: isolate; border: none; clip-path: var(--frame-sm);
  background: linear-gradient(135deg, var(--gold), #d99a1f); color: #1a1300;
  padding: 11px 24px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
  box-shadow: var(--glow-gold);
}
.primary:hover { filter: brightness(1.1); }
.ghost {
  position: relative; isolation: isolate; clip-path: var(--frame-sm); border: none;
  background: var(--panel-solid); color: var(--jade);
  padding: 9px 18px; text-transform: uppercase; font-size: 12px; letter-spacing: 1.5px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.ghost:hover { box-shadow: inset 0 0 0 1px var(--jade); filter: drop-shadow(var(--glow-cyan)); }

/* ---- dropzone as a big talisman ---------------------------- */
.dropzone {
  max-width: 540px; margin: 0 auto; padding: 24px 24px 32px; text-align: center;
  transition: 0.18s;
}
.dropzone .talisman, .dropzone.talisman { }
.tal-head {
  font-family: "Noto Serif TC", serif; font-weight: 900; color: var(--seal);
  font-size: 26px; letter-spacing: 10px; padding-left: 10px; margin-bottom: 8px;
  text-shadow: var(--glow-seal);
}
.tal-seal {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 46px; display: grid; place-items: center;
  color: var(--seal); border: 2px solid var(--seal); clip-path: var(--frame-sm);
  font-family: "Noto Serif TC", serif; font-weight: 900; font-size: 24px;
  box-shadow: var(--glow-seal); background: rgba(214, 52, 44, 0.06);
}
.dropzone.drag { filter: drop-shadow(var(--glow-cyan)); }
.dropzone.drag::after { background: #0f1a1c; }
.drop-icon { font-size: 46px; filter: drop-shadow(var(--glow-cyan)); }
.drop-title { font-size: 19px; font-weight: 600; margin: 10px 0 4px; letter-spacing: 0.5px; }
.dropzone .muted { margin: 6px 0; }

.error {
  margin-top: 16px; padding: 12px 16px; position: relative; isolation: isolate; clip-path: var(--frame-sm);
  background: rgba(214, 52, 44, 0.12); color: #ffb9b3; box-shadow: inset 0 0 0 1px var(--seal);
}

.help {
  margin-top: 28px; padding: 18px 22px;
}
.help h3 { margin: 0 0 10px; color: var(--gold); letter-spacing: 0.5px; text-transform: uppercase; font-size: 15px; }
.help ul { margin: 0 0 12px; padding-left: 20px; }
.help li { margin: 4px 0; }

.filebar { margin-bottom: 18px; font-size: 13px; letter-spacing: 0.5px; }
.filebar strong { color: var(--jade); }

/* ---- overall summary --------------------------------------- */
.summary {
  display: flex; align-items: center; gap: 26px; padding: 24px 28px;
}
.summary::after {
  /* veil fades a faint bagua over the opaque panel */
  background:
    linear-gradient(rgba(16, 22, 27, 0.88), rgba(16, 22, 27, 0.88)),
    url("assets/bagua.svg") right -34px center/220px no-repeat,
    var(--panel-solid);
}
.summary-txt h2 {
  margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--jade);
}
.summary-txt p { margin: 6px 0 0; }
.ring {
  --pct: 0; width: 116px; height: 116px; flex: 0 0 auto; position: relative;
  display: grid; place-items: center; filter: drop-shadow(var(--glow-gold));
  background: conic-gradient(var(--gold) calc(var(--pct) * 1%), rgba(255, 255, 255, 0.06) 0);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); /* hex - angular, not round */
}
.ring::before {
  content: ""; position: absolute; inset: 9px; background: #0a0f12;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.ring span { position: relative; font-size: 30px; font-weight: 700; color: var(--gold); }
.ring small { font-size: 14px; color: var(--muted); }

/* ---- meta -------------------------------------------------- */
.meta { margin-top: 18px; }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.meta-card { padding: 12px 16px; }
.meta-card::after {
  background:
    linear-gradient(90deg, rgba(47, 224, 198, 0.14), transparent 8px),
    var(--panel-solid);
}
.meta-k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.meta-v { font-size: 21px; font-weight: 700; margin-top: 2px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag {
  position: relative; isolation: isolate; clip-path: var(--frame-sm);
  background: rgba(214, 52, 44, 0.12); color: #ff8b82; padding: 4px 12px; font-size: 12px;
  letter-spacing: 0.5px; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(214, 52, 44, 0.55);
}
.meta-loc { margin-top: 12px; font-size: 13px; color: var(--muted); letter-spacing: 0.3px; }
.raw { margin-top: 12px; }
.raw summary { cursor: pointer; color: var(--jade); font-size: 13px; letter-spacing: 0.5px; }
.raw pre, .rawrow pre {
  background: #05080a; border: 1px solid var(--line); padding: 12px; clip-path: var(--frame-sm);
  overflow: auto; max-height: 320px; font-size: 12px; color: #bfe9e2;
  font-family: "Chakra Petch", ui-monospace, monospace;
}

/* ---- category cards (vertical talisman slips) -------------- */
/* 10 categories → equal rows: 5 per row, dividing evenly down to 2 / 1 */
.cards { margin-top: 26px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 920px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cards { grid-template-columns: 1fr; } }
.cat-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px; text-align: center;
  min-height: 156px; padding: 16px 14px 14px; color: var(--text); transition: 0.14s;
}
.cat-card::after { /* gold talisman "head" band on the inner paper */
  background: var(--panel-solid); border-top: 2px solid rgba(233, 185, 73, 0.45);
}
.cat-card:hover { transform: translateY(-2px); filter: drop-shadow(var(--glow-cyan)); }
.cat-icon { font-size: 30px; filter: drop-shadow(0 0 6px rgba(47, 224, 198, 0.25)); }
.cat-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.cat-top { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cat-label { font-weight: 600; letter-spacing: 0.5px; font-size: 13px; line-height: 1.2; }
.cat-count { font-size: 14px; color: var(--jade); font-weight: 700; font-variant-numeric: tabular-nums; }
.cat-pct { font-size: 11px; margin-top: 5px; letter-spacing: 1px; }

/* Chi-charge progress bar */
.bar {
  height: 9px; background: rgba(255, 255, 255, 0.05); margin-top: 9px;
  border: 1px solid var(--line); clip-path: var(--frame-sm); position: relative;
}
.fill {
  height: 100%; transition: width 0.4s; position: relative;
  background: linear-gradient(90deg, var(--magenta), var(--gold) 55%, var(--jade));
  box-shadow: 0 0 10px rgba(47, 224, 198, 0.4);
}
.fill::after { /* segmented "charge cells" */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(0, 0, 0, 0.5) 7px 9px);
}
.fill.complete { background: linear-gradient(90deg, var(--jade), var(--cyan)); box-shadow: 0 0 12px rgba(47, 224, 198, 0.65); }

/* ---- controls ---------------------------------------------- */
.controls { display: flex; gap: 14px; align-items: center; margin: 28px 0 14px; flex-wrap: wrap; }
.search {
  flex: 1; min-width: 220px; padding: 11px 16px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--text); font: inherit; letter-spacing: 0.5px; clip-path: var(--frame-sm);
}
.search::placeholder { color: var(--muted); }
.search:focus { outline: none; border-color: var(--jade); box-shadow: var(--glow-cyan); }
.toggle { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; user-select: none; letter-spacing: 0.5px; text-transform: uppercase; }
.toggle input { accent-color: var(--jade); width: 16px; height: 16px; }

/* ---- detail sections (talisman scrolls) -------------------- */
.details { display: flex; flex-direction: column; gap: 12px; }
.cat-detail { }
.cat-detail[open] { filter: drop-shadow(0 0 12px rgba(47, 224, 198, 0.08)); }
.cat-detail > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; font-weight: 600; letter-spacing: 0.5px; position: relative;
}
.cat-detail > summary::before { /* vertical gold tab, like a talisman edge */
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  background: linear-gradient(var(--gold), var(--seal));
}
.cat-detail > summary::-webkit-details-marker { display: none; }
.cat-detail > summary:hover { background: var(--panel2); }
.d-icon { font-size: 20px; }
.d-label { flex: 1; text-transform: uppercase; letter-spacing: 1.5px; font-size: 15px; }
.d-count { color: var(--jade); font-weight: 700; font-variant-numeric: tabular-nums; }

.rows { border-top: 1px solid var(--line); }
.row {
  display: flex; align-items: center; gap: 11px; padding: 8px 18px; cursor: pointer;
  border-bottom: 1px solid var(--line-soft); border-left: 2px solid transparent; transition: 0.1s;
}
.row:last-child { border-bottom: none; }
.row:hover { background: var(--panel2); border-left-color: var(--magenta); }
.row .mark { width: 18px; text-align: center; font-weight: 700; }
.row.done .mark { color: var(--jade); text-shadow: var(--glow-cyan); }
.row.todo .mark { color: #4a5b63; }
.row.done .name { color: var(--text); }
.row.todo .name { color: var(--muted); }
.row .name { flex: 1; letter-spacing: 0.3px; }
.desc-info { color: var(--gold); cursor: help; }
.empty { padding: 14px 18px; }
.rawrow { padding: 4px 18px 14px; background: #070b0d; }

.footer { text-align: center; padding: 26px 20px 40px; font-size: 12px; letter-spacing: 0.5px; }

@media (max-width: 560px) {
  .summary { flex-direction: column; text-align: center; }
  .topbar { flex-direction: column; align-items: flex-start; }
  .topbar h1 .sub-en { display: none; }
}