/* ==================================================================
   M3 EXPRESSIVE — Material 3 Expressive skin (the modern one)
   Big shapes, tonal containers, pill buttons, springy colour blocks.
   Accent derives from --hue so the INK button recolours everything.
   ================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600;8..144,700;8..144,800&family=Roboto+Mono:wght@400;500;600;700&display=swap");

html[data-ui="m3"] {
  --m3-primary: hsl(var(--hue) 75% 45%);
  --m3-on-primary: #ffffff;
  --m3-pc: hsl(var(--hue) 85% 91%);
  --m3-on-pc: hsl(var(--hue) 80% 22%);
  --m3-sc: hsl(calc(var(--hue) + 40) 70% 92%);
  --m3-on-sc: hsl(calc(var(--hue) + 40) 60% 24%);
  --m3-tc: hsl(calc(var(--hue) + 90) 65% 90%);
  --m3-on-tc: hsl(calc(var(--hue) + 90) 55% 24%);
  --m3-surface: hsl(var(--hue) 45% 98%);
  --m3-container: hsl(var(--hue) 40% 95%);
  --m3-ink: hsl(var(--hue) 20% 14%);
  --m3-mute: hsl(var(--hue) 15% 42%);
  --m3-outline: hsl(var(--hue) 18% 82%);
  --m3-good: hsl(145 55% 32%);
  --m3-warn: hsl(35 80% 40%);
  --m3-bad: hsl(350 65% 45%);

  background: var(--m3-surface);
  color: var(--m3-ink);
  font-family: "Roboto Flex", "Roboto", "Segoe UI", sans-serif;
}

/* ---------- chrome ---------- */
html[data-ui="m3"] body {
  background: var(--m3-surface);
  background-image: none;
  color: var(--m3-ink);
  font-family: "Roboto Flex", "Roboto", "Segoe UI", sans-serif;
  font-size: 15px;
}

html[data-ui="m3"] .topbar {
  background: var(--m3-surface);
  border-bottom: 0;
}

html[data-ui="m3"] .topbar-in {
  padding-block: 0.8rem;
}

html[data-ui="m3"] .brand-logo {
  border-radius: 12px;
}

html[data-ui="m3"] .brand-name {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--m3-ink);
}

html[data-ui="m3"] .brand-tag {
  font-family: "Roboto Mono", monospace;
  font-weight: 600;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  color: var(--m3-on-pc);
  background: var(--m3-pc);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  transform: none;
  padding: 0.35em 0.9em;
}

html[data-ui="m3"] .flatbtn {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  color: var(--m3-on-pc);
  background: var(--m3-pc);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  padding: 0.5em 1.1em;
  transition: filter 0.15s, transform 0.15s;
}

html[data-ui="m3"] .flatbtn:hover {
  filter: brightness(0.96);
  transform: none;
}

html[data-ui="m3"] .flatbtn[aria-pressed="true"] {
  background: var(--m3-primary);
  color: var(--m3-on-primary);
}

html[data-ui="m3"] .inkbtn {
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  border: 0;
  box-shadow: none;
}

html[data-ui="m3"] .inkbtn:hover {
  transform: scale(1.08);
}

html[data-ui="m3"] .loadbar i {
  background: var(--m3-primary);
  border-radius: 999px;
}

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

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

html[data-ui="m3"] .kicker span {
  font-family: "Roboto Mono", monospace;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--m3-on-pc);
  background: var(--m3-pc);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  transform: none;
  padding: 0.4em 1em;
}

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

html[data-ui="m3"] .kicker span:nth-child(2) {
  background: var(--m3-sc);
  color: var(--m3-on-sc);
}

html[data-ui="m3"] .display {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 800;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.2rem, 4.8vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--m3-ink);
}

html[data-ui="m3"] .outline-word {
  color: var(--m3-primary);
  -webkit-text-stroke: 0;
}

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

html[data-ui="m3"] .sticker-word {
  display: inline-block;
  padding: 0.04em 0.28em;
  border: 0;
  border-radius: 999px;
  background: var(--m3-pc);
  color: var(--m3-on-pc);
  box-shadow: none;
  transform: rotate(-1.2deg);
  font-size: 0.98em;
}

html[data-ui="m3"] .lede {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--m3-mute);
}

/* ---------- lookup ---------- */
html[data-ui="m3"] .lookup {
  background: var(--m3-pc);
  border: 0;
  border-radius: 32px;
  box-shadow: none;
  padding: 2.2rem 1.6rem 1.6rem;
  gap: 1.15rem;
}

html[data-ui="m3"] .lookup-tab {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  border: 0;
  border-radius: 999px;
  padding: 0.4em 1em;
}

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

html[data-ui="m3"] .lf > .micro {
  font-family: "Roboto Mono", monospace;
  font-weight: 600;
  color: var(--m3-on-pc);
  opacity: 0.85;
  padding-left: 0.4rem;
}

html[data-ui="m3"] .lf input,
html[data-ui="m3"] .lf select {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--m3-ink);
  background: var(--m3-surface);
  border: 0;
  border-radius: 20px;
  padding: 0.85rem 1.1rem;
  transition: box-shadow 0.15s, background 0.15s;
}

html[data-ui="m3"] .lf input::placeholder {
  color: var(--m3-mute);
  font-weight: 500;
}

html[data-ui="m3"] .lf input:focus,
html[data-ui="m3"] .lf select:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px var(--m3-primary);
}

html[data-ui="m3"] .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='%23311b1b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
}

html[data-ui="m3"] .submit {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--m3-on-primary);
  background: var(--m3-primary);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  padding: 0.95rem 1.6rem;
  transition: filter 0.15s, transform 0.15s;
}

html[data-ui="m3"] .submit:hover {
  filter: brightness(1.08);
  transform: none;
  box-shadow: none;
}

html[data-ui="m3"] .submit:active {
  transform: scale(0.98);
}

html[data-ui="m3"] .try-line {
  font-family: "Roboto Mono", monospace;
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--m3-on-pc);
  text-align: center;
}

html[data-ui="m3"] .textlink,
html[data-ui="m3"] .linklike {
  color: var(--m3-primary);
  text-decoration-thickness: 2px;
}

/* ---------- marquee / foot ---------- */
html[data-ui="m3"] .marquee {
  background: var(--m3-sc);
  border-block: 0;
}

html[data-ui="m3"] .marquee-track span {
  font-family: "Roboto Mono", monospace;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--m3-on-sc);
}

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

html[data-ui="m3"] .foot {
  background: var(--m3-pc);
  color: var(--m3-on-pc);
  border-radius: 40px 40px 0 0;
}

html[data-ui="m3"] .foot-mark {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  color: var(--m3-on-pc);
}

html[data-ui="m3"] .foot .micro {
  color: var(--m3-on-pc);
  opacity: 0.7;
}

html[data-ui="m3"] .foot a {
  color: var(--m3-on-pc);
  font-weight: 600;
}

html[data-ui="m3"] .foot a:hover {
  color: var(--m3-primary);
}

html[data-ui="m3"] .foot-legal {
  color: var(--m3-on-pc);
  opacity: 0.7;
}

html[data-ui="m3"] .foot-legal kbd {
  border-color: var(--m3-outline);
  background: var(--m3-surface);
  color: var(--m3-ink);
}

/* ---------- record: banner ---------- */
html[data-ui="m3"] .c-banner {
  background: var(--m3-pc);
  border: 0;
  border-radius: 32px;
  box-shadow: none;
  padding: 1.1rem 1.4rem;
}

html[data-ui="m3"] .c-avatar {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--m3-on-primary);
  background: var(--m3-primary);
  border: 0;
  box-shadow: none;
  width: 48px;
  height: 48px;
}

html[data-ui="m3"] .c-name {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 800;
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--m3-on-pc);
}

html[data-ui="m3"] .c-father {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--m3-on-pc);
  opacity: 0.75;
}

html[data-ui="m3"] .c-chip {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  border: 0;
  border-radius: 999px;
  background: var(--m3-surface);
  color: var(--m3-ink);
  padding: 0.3em 0.95em;
}

html[data-ui="m3"] .c-chip-ink {
  background: var(--m3-ink);
  color: var(--m3-surface);
}

html[data-ui="m3"] .c-chip-tint {
  background: var(--m3-primary);
  color: var(--m3-on-primary);
}

html[data-ui="m3"] .c-refresh {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--m3-on-pc);
  background: var(--m3-surface);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  padding: 0.5em 1.1em;
}

html[data-ui="m3"] .c-refresh:hover {
  transform: none;
  box-shadow: none;
  filter: brightness(0.97);
}

html[data-ui="m3"] .c-live,
html[data-ui="m3"] .c-verify {
  font-family: "Roboto Mono", monospace;
  font-size: 0.64rem;
  color: var(--m3-on-pc);
  opacity: 0.75;
}

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

html[data-ui="m3"] .c-stat {
  border: 0;
  border-radius: 28px;
  box-shadow: none;
  padding: 1.05rem 1.2rem;
}

html[data-ui="m3"] .c-stat:nth-child(1) {
  background: var(--m3-pc);
  color: var(--m3-on-pc);
  box-shadow: none;
}

html[data-ui="m3"] .c-stat:nth-child(2) {
  background: var(--m3-sc);
  color: var(--m3-on-sc);
  box-shadow: none;
}

html[data-ui="m3"] .c-stat:nth-child(3) {
  background: var(--m3-tc);
  color: var(--m3-on-tc);
  box-shadow: none;
}

html[data-ui="m3"] .c-stat:nth-child(4) {
  background: var(--m3-container);
  color: var(--m3-ink);
  box-shadow: none;
}

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

html[data-ui="m3"] .c-k {
  font-family: "Roboto Mono", monospace;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: inherit;
  opacity: 0.75;
}

html[data-ui="m3"] .c-v {
  color: inherit;
}

html[data-ui="m3"] .c-v.b-good { color: var(--m3-good); }
html[data-ui="m3"] .c-v.b-mid { color: var(--m3-warn); }
html[data-ui="m3"] .c-v.b-low { color: var(--m3-bad); }

html[data-ui="m3"] .c-v.c-vt {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

html[data-ui="m3"] .c-s {
  color: inherit;
  opacity: 0.7;
}

/* ---------- sections & cards ---------- */
html[data-ui="m3"] .c-sect {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: -0.02em;
  text-transform: none;
  border-bottom: 0;
  padding-bottom: 0;
}

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

html[data-ui="m3"] .c-count {
  font-family: "Roboto Mono", monospace;
  font-weight: 600;
  font-size: 0.64rem;
  background: var(--m3-pc);
  border: 0;
  border-radius: 999px;
  color: var(--m3-on-pc);
}

html[data-ui="m3"] .c-card {
  background: var(--m3-container);
  border: 0;
  border-radius: 28px;
  box-shadow: none;
  padding: 1.2rem 1.3rem 1.3rem;
  transition: transform 0.15s, background 0.15s;
}

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

html[data-ui="m3"] .c-card:hover {
  background: var(--m3-pc);
  transform: translateY(-2px);
  box-shadow: none;
}

html[data-ui="m3"] .c-cardhead h3 {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--m3-ink);
}

html[data-ui="m3"] .prof {
  font-family: "Roboto Mono", monospace;
  font-weight: 500;
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  border: 0;
  border-radius: 999px;
  background: var(--m3-surface);
  color: var(--m3-mute);
  max-width: 46%;
}

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

html[data-ui="m3"] .t-name em {
  font-family: "Roboto Mono", monospace;
  font-weight: 500;
}

html[data-ui="m3"] .t-score {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
}

html[data-ui="m3"] .c-meter {
  border: 0;
  border-radius: 999px;
  background: var(--m3-surface);
  height: 14px;
}

html[data-ui="m3"] .c-meter i {
  border-radius: 999px;
  background: var(--m3-primary);
}

html[data-ui="m3"] .c-meter.b-good i { background: var(--m3-good); }
html[data-ui="m3"] .c-meter.b-mid i { background: var(--m3-warn); }
html[data-ui="m3"] .c-meter.b-low i { background: var(--m3-bad); }

/* ---------- attendance ---------- */
html[data-ui="m3"] .c-attrow {
  background: var(--m3-pc);
  border: 0;
  border-radius: 24px;
  box-shadow: none;
}

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

html[data-ui="m3"] .a-name {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: none;
  color: var(--m3-ink);
}

html[data-ui="m3"] .a-nums {
  color: var(--m3-ink);
  opacity: 0.65;
}

html[data-ui="m3"] .a-nums b {
  color: var(--m3-ink);
  opacity: 1;
}

html[data-ui="m3"] .a-pct {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

html[data-ui="m3"] .a-pct.b-good { color: var(--m3-good); }
html[data-ui="m3"] .a-pct.b-mid { color: var(--m3-warn); }
html[data-ui="m3"] .a-pct.b-low { color: var(--m3-bad); }

/* ---------- heat ---------- */
html[data-ui="m3"] .c-heat thead th .d {
  color: var(--m3-primary);
}

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

html[data-ui="m3"] .c-heat tbody th {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: none;
  color: var(--m3-ink);
}

html[data-ui="m3"] .c-heat .mk {
  border-radius: 10px;
}

html[data-ui="m3"] .c-heat .mk-P {
  background: var(--m3-good);
  color: #fff;
  box-shadow: none;
}

html[data-ui="m3"] .c-heat .mk-A {
  background: var(--m3-bad);
  color: #fff;
  box-shadow: none;
}

html[data-ui="m3"] .c-heat .mk-L {
  background: hsl(40 90% 55%);
  color: hsl(40 80% 15%);
  box-shadow: none;
}

html[data-ui="m3"] .c-heat .mk-x {
  background: var(--m3-surface);
  box-shadow: inset 0 0 0 1.5px var(--m3-outline);
  color: var(--m3-mute);
}

html[data-ui="m3"] .c-legend {
  font-family: "Roboto Mono", monospace;
  color: var(--m3-mute);
}

/* ---------- states ---------- */
html[data-ui="m3"] .c-state {
  background: var(--m3-pc);
  border: 0;
  border-radius: 32px;
  box-shadow: none;
}

html[data-ui="m3"] .c-state-mark {
  font-family: "Roboto Mono", monospace;
  color: var(--m3-primary);
}

html[data-ui="m3"] .c-state h3 {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 800;
  text-transform: none;
}

html[data-ui="m3"] .skel-bars i {
  background: var(--m3-outline);
  border-radius: 999px;
  box-shadow: none;
}

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