/* ==================================================================
   TERM — phosphor terminal skin (my pick)
   Dark console, JetBrains Mono everywhere, hue-tinted phosphor
   accent, ASCII-ish rules, soft CRT glow. Accent follows --hue.
   ================================================================== */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,600;0,800;1,400&display=swap");

html[data-ui="term"] {
  --t-bg: hsl(var(--hue) 35% 6%);
  --t-panel: hsl(var(--hue) 30% 9%);
  --t-panel2: hsl(var(--hue) 28% 12%);
  --t-line: hsl(var(--hue) 30% 22%);
  --t-text: hsl(var(--hue) 30% 86%);
  --t-dim: hsl(var(--hue) 18% 55%);
  --t-faint: hsl(var(--hue) 15% 40%);
  --t-accent: hsl(var(--hue) 95% 62%);
  --t-accent-soft: hsl(var(--hue) 80% 16%);
  --t-good: hsl(140 70% 55%);
  --t-warn: hsl(40 90% 58%);
  --t-bad: hsl(350 85% 62%);

  /* flip the base theme's ink-on-paper vars so any rule we didn't
     explicitly restyle still reads light-on-dark */
  --ink: hsl(var(--hue) 30% 86%);
  --ink-strong: hsl(var(--hue) 35% 95%);
  --muted: hsl(var(--hue) 18% 62%);
  --faint: hsl(var(--hue) 15% 45%);
  --edge: hsl(var(--hue) 30% 22%);
  --bg: var(--t-bg);
  --surface: var(--t-panel);
  --accent: var(--t-accent);
  --accent-deep: var(--t-accent);
  --green: var(--t-good);
  --amber: var(--t-warn);
  --red: var(--t-bad);

  background: var(--t-bg);
  color: var(--t-text);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}

/* ---------- chrome ---------- */
html[data-ui="term"] body {
  background: var(--t-bg);
  background-image:
    radial-gradient(hsl(var(--hue) 60% 30% / 0.08) 1px, transparent 1.4px);
  background-size: 22px 22px;
  color: var(--t-text);
  font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 13.5px;
}

html[data-ui="term"] .topbar {
  background: color-mix(in srgb, var(--t-panel) 88%, transparent);
  border-bottom: 1px solid var(--t-line);
  backdrop-filter: blur(6px);
}

html[data-ui="term"] .brand-name {
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--t-accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--t-accent) 55%, transparent);
}

html[data-ui="term"] .brand-tag {
  font-weight: 600;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  color: var(--t-dim);
  background: transparent;
  border: 1px solid var(--t-line);
  border-radius: 4px;
  box-shadow: none;
  transform: none;
  padding: 0.3em 0.7em;
}

html[data-ui="term"] .flatbtn {
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--t-text);
  background: transparent;
  border: 1px solid var(--t-line);
  border-radius: 6px;
  box-shadow: none;
  padding: 0.45em 0.9em;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

html[data-ui="term"] .flatbtn:hover {
  border-color: var(--t-accent);
  color: var(--t-accent);
  background: var(--t-accent-soft);
  transform: none;
  box-shadow: 0 0 12px color-mix(in srgb, var(--t-accent) 30%, transparent);
}

html[data-ui="term"] .flatbtn[aria-pressed="true"] {
  border-color: var(--t-accent);
  color: var(--t-accent);
  background: var(--t-accent-soft);
}

html[data-ui="term"] .inkbtn {
  background: var(--t-accent);
  color: var(--t-bg);
  border: 0;
  border-radius: 6px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--t-accent) 45%, transparent);
}

html[data-ui="term"] .inkbtn:hover {
  transform: none;
  filter: brightness(1.15);
}

html[data-ui="term"] .loadbar i {
  background: var(--t-accent);
  border-radius: 0;
  box-shadow: 0 0 10px var(--t-accent);
}

/* ---------- hero ---------- */
html[data-ui="term"] .hero {
  padding: 3.2rem 0 3.4rem;
}

html[data-ui="term"] .kicker {
  gap: 0.5rem;
  margin: 0 0 1.5rem;
}

html[data-ui="term"] .kicker span {
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--t-accent);
  background: var(--t-accent-soft);
  border: 1px solid var(--t-line);
  border-radius: 4px;
  box-shadow: none;
  transform: none;
  padding: 0.35em 0.9em;
}

html[data-ui="term"] .kicker span:nth-child(1),
html[data-ui="term"] .kicker span:nth-child(3) {
  transform: none;
}

html[data-ui="term"] .display {
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--t-text);
}

html[data-ui="term"] .display::before {
  content: "$ ";
  color: var(--t-faint);
  font-weight: 400;
}

html[data-ui="term"] .outline-word {
  color: var(--t-accent);
  -webkit-text-stroke: 0;
  text-shadow: 0 0 24px color-mix(in srgb, var(--t-accent) 45%, transparent);
}

@supports not (-webkit-text-stroke: 2px black) {
  html[data-ui="term"] .outline-word {
    color: var(--t-accent);
  }
}

html[data-ui="term"] .sticker-word {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--t-accent);
  box-shadow: none;
  transform: none;
  font-size: 1em;
}

html[data-ui="term"] .display::after {
  content: "▮";
  color: var(--t-accent);
  animation: term-blink 1.1s steps(1) infinite;
}

@keyframes term-blink {
  50% { opacity: 0; }
}

html[data-ui="term"] .lede {
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--t-dim);
}

html[data-ui="term"] .lede::before {
  content: "// ";
  color: var(--t-faint);
}

/* ---------- lookup ---------- */
html[data-ui="term"] .lookup {
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: 10px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--t-accent) 12%, transparent),
    0 0 34px color-mix(in srgb, var(--t-accent) 10%, transparent);
  padding: 2.1rem 1.5rem 1.5rem;
  gap: 1.15rem;
}

html[data-ui="term"] .lookup-tab {
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  background: var(--t-accent-soft);
  color: var(--t-accent);
  border: 1px solid var(--t-line);
  border-radius: 4px;
  padding: 0.4em 0.9em;
}

html[data-ui="term"] .rot-badge {
  display: none;
}

html[data-ui="term"] .lf > .micro {
  font-weight: 600;
  color: var(--t-dim);
  opacity: 1;
}

html[data-ui="term"] .lf > .micro::after {
  content: " _";
  color: var(--t-accent);
}

html[data-ui="term"] .lf input,
html[data-ui="term"] .lf select {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--t-accent);
  background: var(--t-bg);
  border: 1px solid var(--t-line);
  border-radius: 6px;
  padding: 0.8rem 0.95rem;
  caret-color: var(--t-accent);
  transition: border-color 0.15s, box-shadow 0.15s;
}

html[data-ui="term"] .lf input::placeholder {
  color: var(--t-faint);
  font-weight: 400;
}

html[data-ui="term"] .lf input:focus,
html[data-ui="term"] .lf select:focus {
  outline: none;
  border-color: var(--t-accent);
  background: var(--t-bg);
  box-shadow: 0 0 0 1px var(--t-accent), 0 0 18px color-mix(in srgb, var(--t-accent) 28%, transparent);
}

html[data-ui="term"] .lf select {
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

html[data-ui="term"] .lf select option {
  background: var(--t-panel);
  color: var(--t-text);
}

html[data-ui="term"] .submit {
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-bg);
  background: var(--t-accent);
  border: 0;
  border-radius: 6px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--t-accent) 40%, transparent);
  padding: 0.9rem 1.5rem;
  transition: filter 0.15s, transform 0.15s;
}

html[data-ui="term"] .submit:hover {
  filter: brightness(1.12);
  transform: none;
  box-shadow: 0 0 28px color-mix(in srgb, var(--t-accent) 55%, transparent);
}

html[data-ui="term"] .submit:active {
  transform: translateY(1px);
}

html[data-ui="term"] .try-line {
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--t-dim);
}

html[data-ui="term"] .try-line::before {
  content: "# ";
  color: var(--t-faint);
}

html[data-ui="term"] .textlink,
html[data-ui="term"] .linklike {
  color: var(--t-accent);
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
}

/* ---------- marquee / foot ---------- */
html[data-ui="term"] .marquee {
  background: var(--t-panel);
  border-block: 1px solid var(--t-line);
}

html[data-ui="term"] .marquee-track span {
  font-weight: 600;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  color: var(--t-faint);
}

html[data-ui="term"] .marquee-track i {
  color: var(--t-accent);
  font-style: normal;
}

html[data-ui="term"] .foot {
  background: var(--t-panel);
  border-top: 1px solid var(--t-line);
  color: var(--t-dim);
}

html[data-ui="term"] .foot-mark {
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: var(--t-text);
}

html[data-ui="term"] .foot .micro {
  color: var(--t-faint);
}

html[data-ui="term"] .foot a {
  color: var(--t-accent);
}

html[data-ui="term"] .foot a:hover {
  text-shadow: 0 0 12px color-mix(in srgb, var(--t-accent) 55%, transparent);
}

html[data-ui="term"] .foot-legal {
  color: var(--t-faint);
}

html[data-ui="term"] .foot-legal kbd {
  border-color: var(--t-line);
  background: var(--t-panel2);
  color: var(--t-accent);
}

/* ---------- record: banner ---------- */
html[data-ui="term"] .c-banner {
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: 10px;
  box-shadow: none;
  padding: 1rem 1.25rem;
}

html[data-ui="term"] .c-avatar {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--t-bg);
  background: var(--t-accent);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--t-accent) 40%, transparent);
  width: 46px;
  height: 46px;
}

html[data-ui="term"] .c-name {
  font-weight: 800;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  letter-spacing: 0.02em;
  color: var(--t-text);
}

html[data-ui="term"] .c-father {
  font-size: 0.74rem;
  color: var(--t-dim);
}

html[data-ui="term"] .c-chip {
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  border: 1px solid var(--t-line);
  border-radius: 4px;
  background: var(--t-panel2);
  color: var(--t-text);
  padding: 0.25em 0.7em;
}

html[data-ui="term"] .c-chip-ink {
  background: var(--t-accent);
  border-color: var(--t-accent);
  color: var(--t-bg);
}

html[data-ui="term"] .c-chip-tint {
  background: var(--t-accent-soft);
  border-color: var(--t-accent);
  color: var(--t-accent);
}

html[data-ui="term"] .c-refresh {
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--t-accent);
  background: transparent;
  border: 1px solid var(--t-line);
  border-radius: 6px;
  box-shadow: none;
  padding: 0.45em 1em;
}

html[data-ui="term"] .c-refresh:hover {
  border-color: var(--t-accent);
  transform: none;
  box-shadow: 0 0 12px color-mix(in srgb, var(--t-accent) 30%, transparent);
}

html[data-ui="term"] .c-live,
html[data-ui="term"] .c-verify {
  font-size: 0.62rem;
  color: var(--t-dim);
}

/* ---------- stats ---------- */
html[data-ui="term"] .c-stats {
  gap: 0.8rem;
}

html[data-ui="term"] .c-stat {
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-top: 2px solid var(--t-accent);
  border-radius: 8px;
  box-shadow: none;
  padding: 0.95rem 1.05rem;
}

html[data-ui="term"] .c-stat:nth-child(odd),
html[data-ui="term"] .c-stat:nth-child(even) {
  box-shadow: none;
}

html[data-ui="term"] .c-k {
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-dim);
}

html[data-ui="term"] .c-v {
  font-weight: 800;
  color: var(--t-text);
}

html[data-ui="term"] .c-v.b-good { color: var(--t-good); text-shadow: 0 0 16px color-mix(in srgb, var(--t-good) 40%, transparent); }
html[data-ui="term"] .c-v.b-mid { color: var(--t-warn); text-shadow: 0 0 16px color-mix(in srgb, var(--t-warn) 40%, transparent); }
html[data-ui="term"] .c-v.b-low { color: var(--t-bad); text-shadow: 0 0 16px color-mix(in srgb, var(--t-bad) 40%, transparent); }

html[data-ui="term"] .c-v.c-vt {
  font-size: 1.1rem;
}

html[data-ui="term"] .c-s {
  color: var(--t-dim);
}

/* ---------- sections & cards ---------- */
html[data-ui="term"] .c-sect {
  font-weight: 800;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  letter-spacing: 0.04em;
  border-bottom: 1px dashed var(--t-line);
  padding-bottom: 0.5rem;
}

html[data-ui="term"] .c-sect::before {
  content: "[ ";
  color: var(--t-faint);
}

html[data-ui="term"] .c-sect::after {
  content: " ]";
  color: var(--t-faint);
}

html[data-ui="term"] .c-sect .c-star {
  color: var(--t-accent);
}

html[data-ui="term"] .c-count {
  font-weight: 600;
  font-size: 0.6rem;
  background: var(--t-accent-soft);
  border: 1px solid var(--t-line);
  border-radius: 4px;
  color: var(--t-accent);
}

html[data-ui="term"] .c-card {
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: 8px;
  box-shadow: none;
  padding: 1.05rem 1.15rem 1.15rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

html[data-ui="term"] .c-card:nth-child(even) {
  box-shadow: none;
}

html[data-ui="term"] .c-card:hover {
  border-color: var(--t-accent);
  transform: none;
  box-shadow: 0 0 20px color-mix(in srgb, var(--t-accent) 12%, transparent);
}

html[data-ui="term"] .c-cardhead h3 {
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  color: var(--t-text);
}

html[data-ui="term"] .prof {
  font-weight: 500;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  border: 1px solid var(--t-line);
  border-radius: 4px;
  background: var(--t-panel2);
  color: var(--t-dim);
  max-width: 46%;
}

/* ---------- test rows / meters ---------- */
html[data-ui="term"] .t-name {
  font-weight: 600;
  font-size: 0.88rem;
}

html[data-ui="term"] .t-score {
  font-weight: 800;
}

html[data-ui="term"] .c-meter {
  border: 1px solid var(--t-line);
  border-radius: 4px;
  background: var(--t-bg);
  height: 12px;
}

html[data-ui="term"] .c-meter i {
  border-radius: 3px;
  background: var(--t-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--t-accent) 60%, transparent);
}

html[data-ui="term"] .c-meter.b-good i { background: var(--t-good); box-shadow: 0 0 10px color-mix(in srgb, var(--t-good) 55%, transparent); }
html[data-ui="term"] .c-meter.b-mid i { background: var(--t-warn); box-shadow: 0 0 10px color-mix(in srgb, var(--t-warn) 55%, transparent); }
html[data-ui="term"] .c-meter.b-low i { background: var(--t-bad); box-shadow: 0 0 10px color-mix(in srgb, var(--t-bad) 55%, transparent); }

/* ---------- attendance ---------- */
html[data-ui="term"] .c-attrow {
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: 8px;
  box-shadow: none;
}

html[data-ui="term"] .c-attrow:nth-child(even) {
  box-shadow: none;
}

html[data-ui="term"] .a-name {
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: var(--t-text);
}

html[data-ui="term"] .a-nums {
  color: var(--t-dim);
}

html[data-ui="term"] .a-nums b {
  color: var(--t-text);
}

html[data-ui="term"] .a-pct {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0;
}

html[data-ui="term"] .a-pct.b-good { color: var(--t-good); text-shadow: 0 0 18px color-mix(in srgb, var(--t-good) 45%, transparent); }
html[data-ui="term"] .a-pct.b-mid { color: var(--t-warn); text-shadow: 0 0 18px color-mix(in srgb, var(--t-warn) 45%, transparent); }
html[data-ui="term"] .a-pct.b-low { color: var(--t-bad); text-shadow: 0 0 18px color-mix(in srgb, var(--t-bad) 45%, transparent); }

/* ---------- heat ---------- */
html[data-ui="term"] .c-heat thead th .d {
  font-weight: 800;
  color: var(--t-accent);
}

html[data-ui="term"] .c-heat thead th .n,
html[data-ui="term"] .c-heat thead th.corner,
html[data-ui="term"] .c-heat thead th.wknd .d,
html[data-ui="term"] .c-heat thead th.wknd .n {
  color: var(--t-faint);
}

html[data-ui="term"] .c-heat tbody th {
  font-weight: 600;
  font-size: 0.76rem;
  color: var(--t-dim);
}

html[data-ui="term"] .c-heat .mk {
  border-radius: 4px;
  font-weight: 800;
}

html[data-ui="term"] .c-heat .mk-P {
  background: var(--t-good);
  color: var(--t-bg);
  box-shadow: 0 0 10px color-mix(in srgb, var(--t-good) 45%, transparent);
}

html[data-ui="term"] .c-heat .mk-A {
  background: var(--t-bad);
  color: var(--t-bg);
  box-shadow: 0 0 10px color-mix(in srgb, var(--t-bad) 45%, transparent);
}

html[data-ui="term"] .c-heat .mk-L {
  background: var(--t-warn);
  color: var(--t-bg);
  box-shadow: 0 0 10px color-mix(in srgb, var(--t-warn) 45%, transparent);
}

html[data-ui="term"] .c-heat .mk-x {
  background: var(--t-panel2);
  box-shadow: inset 0 0 0 1px var(--t-line);
  color: var(--t-faint);
}

html[data-ui="term"] .c-legend {
  color: var(--t-dim);
}

/* ---------- states ---------- */
html[data-ui="term"] .c-state {
  background: var(--t-panel);
  border: 1px solid var(--t-line);
  border-radius: 10px;
  box-shadow: none;
}

html[data-ui="term"] .c-state-mark {
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--t-accent);
}

html[data-ui="term"] .c-state-mark::before {
  content: "! ";
}

html[data-ui="term"] .c-state h3 {
  font-weight: 800;
}

html[data-ui="term"] .c-state p {
  color: var(--t-dim);
}

html[data-ui="term"] .skel-bars i {
  background: var(--t-panel2);
  border-radius: 4px;
  box-shadow: none;
}

/* ---------- motion ---------- */
html[data-ui="term"] .rot-badge svg {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui="term"] .display::after {
    animation: none;
  }
}