/* ==========================================================================
   Sistem Kelab Memanah — gaya utama
   Warna, bucu dan fon datang daripada pemboleh ubah CSS yang dijana oleh
   Tetapan → Tema & warna (lihat theme_css() dalam app/settings.php).
   ========================================================================== */

/* ---------- Fon (disertakan, tiada muat turun luar) ---------- */
@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/bricolage.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(fonts/figtree.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(fonts/fraunces.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/source-sans-3.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Nunito"; src: url(fonts/nunito.woff2) format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(fonts/archivo.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

/* ---------- Nilai lalai (jika tema belum dimuatkan) — :where() supaya tema daripada Tetapan sentiasa menang ---------- */
:where(:root) {
  --primary: #1E6B45; --on-primary: #fff; --accent: #E0A526; --on-accent: #111;
  --sidebar: #123524; --sidebar-text: #E6F0E9; --bg: #F1F4F0; --surface: #fff; --text: #16221B;
  --radius-sm: 10px; --radius: 16px; --radius-btn: 10px;
  --font-heading: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Figtree", system-ui, sans-serif;
  --shadow-card: none; --density: 1;
}
/* ---------- Warna terbitan ---------- */
:root {
  --text-muted: color-mix(in srgb, var(--text) 64%, var(--surface));
  --text-soft: color-mix(in srgb, var(--text) 46%, var(--surface));
  --border: color-mix(in srgb, var(--text) 11%, var(--surface));
  --border-strong: color-mix(in srgb, var(--text) 22%, var(--surface));
  --surface-2: color-mix(in srgb, var(--text) 3.5%, var(--surface));
  --surface-3: color-mix(in srgb, var(--text) 7%, var(--surface));
  --primary-soft: color-mix(in srgb, var(--primary) 12%, var(--surface));
  --primary-softer: color-mix(in srgb, var(--primary) 6%, var(--surface));
  --primary-ink: color-mix(in srgb, var(--primary) 80%, var(--text));
  --primary-hover: color-mix(in srgb, var(--primary) 86%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 20%, var(--surface));
  --accent-ink: color-mix(in srgb, var(--accent) 50%, var(--text));
  --danger: #C2362B; --danger-soft: color-mix(in srgb, #C2362B 11%, var(--surface)); --danger-ink: color-mix(in srgb, #C2362B 82%, var(--text));
  --warn: #B7791F; --warn-soft: color-mix(in srgb, #D69E2E 16%, var(--surface)); --warn-ink: color-mix(in srgb, #975A16 85%, var(--text));
  --ok: #2F855A; --ok-soft: color-mix(in srgb, #2F855A 12%, var(--surface)); --ok-ink: color-mix(in srgb, #276749 85%, var(--text));
  --info-soft: color-mix(in srgb, #2B6CB0 10%, var(--surface)); --info-ink: color-mix(in srgb, #2C5282 85%, var(--text));
  --sidebar-muted: color-mix(in srgb, var(--sidebar-text) 62%, var(--sidebar));
  --sidebar-hover: color-mix(in srgb, var(--sidebar-text) 8%, var(--sidebar));
  --sidebar-active: color-mix(in srgb, var(--sidebar-text) 14%, var(--sidebar));
  --focus: color-mix(in srgb, var(--primary) 60%, transparent);
  --btn2-bg: var(--surface); --btn2-border: var(--border-strong);
  --sp: calc(1rem * var(--density));
  --gutter: clamp(16px, 3vw, 36px);
  --sidebar-w: 260px;
  --topbar-h: 64px;
  --bottom-h: 0px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Asas ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 15.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
body.menu-open { overflow: hidden; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.15; margin: 0; letter-spacing: -.012em; font-weight: 700; }
p { margin: 0; }
a { color: var(--primary-ink); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
code { font-size: .92em; background: var(--surface-3); padding: 1px 6px; border-radius: 6px; }
small { font-size: .82rem; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--text-muted); }
.small { font-size: .85rem; }
.opt { font-weight: 400; color: var(--text-soft); font-size: .82rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--primary); color: var(--on-primary); padding: 10px 14px; border-radius: var(--radius-sm); }
.skip-link:focus { top: 12px; }
[hidden] { display: none !important; }

/* ---------- Butang ---------- */
.btn {
  --b-bg: var(--btn2-bg); --b-fg: var(--text); --b-bd: var(--btn2-border);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 16px; border-radius: var(--radius-btn);
  border: 1px solid var(--b-bd); background: var(--b-bg); color: var(--b-fg);
  font: 600 .93rem/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.btn:hover { background: color-mix(in srgb, var(--b-bg) 88%, var(--text)); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn .icon { width: 17px; height: 17px; }
.btn.primary { --b-bg: var(--primary); --b-fg: var(--on-primary); --b-bd: var(--primary); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.danger { --b-fg: var(--danger-ink); --b-bd: color-mix(in srgb, var(--danger) 35%, var(--surface)); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.primary.danger, form[data-form="score_delete"] .btn.primary { --b-bg: var(--danger); --b-bd: var(--danger); --b-fg: #fff; }
.btn.ghost { --b-bg: transparent; --b-bd: transparent; color: var(--text-muted); }
.btn.ghost:hover { background: var(--surface-3); color: var(--text); }
.btn.small { min-height: 34px; padding: 0 11px; font-size: .84rem; gap: 6px; }
.btn.small .icon { width: 15px; height: 15px; }
.btn-lg { min-height: 50px; padding: 0 22px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn.on-hero { --b-bg: var(--on-primary); --b-fg: var(--primary-ink); --b-bd: transparent; }
.btn.on-hero:hover { background: color-mix(in srgb, var(--on-primary) 88%, var(--primary)); }
.btn.ghost-hero { --b-bg: transparent; --b-fg: var(--on-primary); --b-bd: color-mix(in srgb, var(--on-primary) 45%, transparent); }
.btn.ghost-hero:hover { background: color-mix(in srgb, var(--on-primary) 12%, transparent); }
.btn.on-dark { --b-bg: transparent; --b-fg: var(--sidebar-text); --b-bd: color-mix(in srgb, var(--sidebar-text) 35%, transparent); }
.btn.on-dark:hover { background: var(--sidebar-hover); }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-btn);
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; flex: none;
}
.icon-btn:hover { background: var(--surface-3); }
.icon-btn.danger { color: var(--danger-ink); }
.link-btn { background: none; border: 0; padding: 6px 0; color: var(--primary-ink); font: 600 .92rem var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--text-muted); font: 600 .9rem var(--font-body); text-decoration: none; cursor: pointer; }
.back-link:hover { color: var(--text); }
.back-link .icon { width: 16px; height: 16px; }
.file-btn { cursor: pointer; }

/* ---------- Borang ---------- */
label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--text); }
label > :is(input, select, textarea, small, output, div, .password-visibility) { flex-basis: 100%; }
label > :is(input[type="checkbox"], input[type="radio"]) { flex-basis: auto; }
label small, fieldset small { font-weight: 400; color: var(--text-muted); line-height: 1.45; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: 400 1rem/1.4 var(--font-body); transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 84px; resize: vertical; }
select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--text) 35%, var(--surface)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--text-muted); }
input[type="checkbox"], input[type="radio"] { width: 18px; min-height: 18px; height: 18px; padding: 0; accent-color: var(--primary); }
input[type="color"] { padding: 3px; width: 46px; height: 44px; cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--text-soft); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 700; font-size: .9rem; padding: 0; margin-bottom: 8px; }
form { display: grid; gap: calc(var(--sp) * 1); }
.stack { display: grid; gap: calc(var(--sp) * 1); }
.narrow { max-width: 620px; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.split.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-error { color: var(--danger-ink); font-weight: 600; font-size: .9rem; }
.form-error:empty, .form-success:empty { display: none; }
.form-success { color: var(--ok-ink); background: var(--ok-soft); padding: 12px 14px; border-radius: var(--radius-sm); font-weight: 600; }
.check-inline { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.password-visibility { position: relative; display: block; }
.password-visibility input { padding-right: 92px; }
.password-visibility-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--text-muted); font: 600 .8rem var(--font-body); padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.password-visibility-toggle:hover { background: var(--surface-3); color: var(--text); }
.password-eye { width: 16px; height: 16px; }

/* ---------- Tag, makluman ---------- */
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-ink); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.tag .icon { width: 14px; height: 14px; }
.tag.gray { background: var(--surface-3); color: var(--text-muted); }
.tag.amber { background: var(--warn-soft); color: var(--warn-ink); }
.tag.accent { background: var(--accent-soft); color: var(--accent-ink); }
.alert { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--info-soft); color: var(--info-ink); font-size: .9rem; line-height: 1.5; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.alert.amber { background: var(--warn-soft); color: var(--warn-ink); }
.alert.error { background: var(--danger-soft); color: var(--danger-ink); }
.alert.success { background: var(--ok-soft); color: var(--ok-ink); }
.alert + .alert, .heading + .alert { margin-bottom: 16px; }
.license-banner { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; }
.license-banner .icon { flex: none; margin-top: 2px; }
.license-pay { font-weight: 700; color: inherit; text-decoration: underline; white-space: nowrap; }
.list-note { color: var(--text-muted); font-size: .86rem; line-height: 1.5; }

/* ---------- Kerangka staf ---------- */
.shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-w);
  display: flex; flex-direction: column; background: var(--sidebar); color: var(--sidebar-text);
  padding: 18px 14px 14px; overflow-y: auto; scrollbar-width: thin;
}
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 6px 18px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 12px; flex: none; }
.brand-side .brand-logo { background: color-mix(in srgb, var(--sidebar-text) 10%, transparent); padding: 4px; }
.brand-copy { display: grid; min-width: 0; }
.brand-copy b { font-family: var(--font-heading); font-size: 1.02rem; line-height: 1.2; overflow-wrap: anywhere; }
.brand-copy small { color: var(--sidebar-muted); font-size: .76rem; line-height: 1.35; margin-top: 2px; }
.close-sidebar { display: none; background: transparent; color: var(--sidebar-text); border-color: color-mix(in srgb, var(--sidebar-text) 20%, transparent); }
.nav { display: grid; gap: 2px; }
.nav-group { margin: 16px 10px 6px; font-size: .74rem; font-weight: 700; color: var(--sidebar-muted); letter-spacing: .02em; }
.nav-group:first-child { margin-top: 0; }
.nav-link {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 12px;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--sidebar-text);
  font: 500 .93rem var(--font-body); text-decoration: none; text-align: left; cursor: pointer; position: relative;
}
.nav-link .icon { color: var(--sidebar-muted); }
.nav-link:hover { background: var(--sidebar-hover); }
.nav-link.active { background: var(--sidebar-active); font-weight: 700; }
.nav-link.active .icon { color: var(--accent); }
.nav-link.active::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); }
.sidebar-foot { margin-top: auto; padding-top: 18px; display: grid; gap: 2px; border-top: 1px solid color-mix(in srgb, var(--sidebar-text) 12%, transparent); }
.sidebar-foot .credit { padding: 12px 12px 2px; font-size: .72rem; color: var(--sidebar-muted); text-decoration: none; }
.external-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.scrim { display: none; }
.main { margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: 14px;
  padding: 0 var(--gutter); background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}
.mobile-menu { display: none; }
.topbar-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-title b { font-family: var(--font-heading); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-logo { display: none; width: 32px; height: 32px; object-fit: contain; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.account { display: flex; align-items: center; gap: 10px; padding-left: 12px; border-left: 1px solid var(--border); }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink); font-weight: 800; }
.account-copy { display: grid; line-height: 1.2; }
.account-copy b { font-size: .9rem; }
.account-copy small { color: var(--text-muted); font-size: .76rem; }
.content, .public-content, #competition-root, .bulk-students, .cbulk, .settings-body { grid-template-columns: minmax(0, 1fr); }
.content > *, .public-content > * { min-width: 0; }
.content { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: calc(var(--sp) * 1.75) var(--gutter) calc(var(--sp) * 2.5 + var(--bottom-h)); display: grid; gap: calc(var(--sp) * 1.25); align-content: start; }
.content:focus { outline: none; }
.footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 8px; color: var(--text-soft); font-size: .8rem; }
.bottom-nav { display: none; }

/* ---------- Tajuk halaman, panel ---------- */
.heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.heading h1 { font-size: clamp(1.55rem, 2.4vw, 2.05rem); }
.heading p { color: var(--text-muted); margin-top: 6px; max-width: 64ch; }
.heading-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); min-width: 0; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: calc(var(--sp) * 1.1) calc(var(--sp) * 1.25) calc(var(--sp) * .9); border-bottom: 1px solid var(--border); }
.panel-head h2 { font-size: 1.08rem; }
.panel-head p { color: var(--text-muted); font-size: .87rem; margin-top: 3px; }
.panel-actions { display: flex; gap: 8px; flex: none; }
.panel-body { padding: calc(var(--sp) * 1.25); }
.grid-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: calc(var(--sp) * 1.25); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--sp) * 1); }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: calc(var(--sp) * 1.05) calc(var(--sp) * 1.15); box-shadow: var(--shadow-card); display: grid; gap: 4px; }
.stat-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stat p { color: var(--text-muted); font-size: .86rem; font-weight: 600; }
.stat-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--primary-softer); color: var(--primary-ink); }
.stat b { font-family: var(--font-heading); font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.1; letter-spacing: -.02em; }
.stat small { color: var(--text-soft); }
.empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: calc(var(--sp) * 2.5) 20px; color: var(--text-muted); }
.empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--primary-softer); color: var(--primary-ink); margin-bottom: 4px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 4%, transparent); }
.empty-icon .icon { width: 24px; height: 24px; }
.empty h3 { color: var(--text); font-size: 1.08rem; }
.empty p { max-width: 46ch; }
.empty .btn { margin-top: 10px; }

/* ---------- Hero ringkasan (satu-satunya elemen berani) ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--primary); color: var(--on-primary);
  padding: clamp(22px, 3.4vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
  isolation: isolate;
}
.hero::before { /* gelang sasaran besar di sebelah kanan */
  content: ""; position: absolute; z-index: -1; right: -120px; top: 50%; width: 520px; aspect-ratio: 1; transform: translateY(-50%);
  background: repeating-radial-gradient(circle, transparent 0 34px, color-mix(in srgb, var(--on-primary) 11%, transparent) 34px 36px);
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 55%, transparent 71%); mask: radial-gradient(circle, #000 55%, transparent 71%);
}
.hero-date { font-weight: 600; opacity: .82; font-size: .92rem; }
.hero h1 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin: 6px 0 8px; }
.hero-copy > p:not(.hero-date) { opacity: .9; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.hero-target { width: 136px; aspect-ratio: 1; border-radius: 50%; position: relative; margin-right: 20px;
  background: radial-gradient(circle, var(--accent) 0 18%, color-mix(in srgb, var(--on-primary) 92%, var(--primary)) 18% 20%, transparent 20% 38%, color-mix(in srgb, var(--on-primary) 92%, var(--primary)) 38% 40%, transparent 40% 58%, color-mix(in srgb, var(--on-primary) 92%, var(--primary)) 58% 60%, transparent 60% 78%, color-mix(in srgb, var(--on-primary) 92%, var(--primary)) 78% 80%, transparent 80%);
}
.hero-target span { position: absolute; left: 50%; top: 50%; width: 92px; height: 3px; background: var(--on-primary); transform-origin: 0 50%; transform: rotate(-38deg); border-radius: 2px; }
.hero-target span::after { content: ""; position: absolute; right: -2px; top: -5px; width: 14px; height: 13px; border-right: 3px solid var(--on-primary); border-top: 3px solid var(--on-primary); transform: skewX(-20deg); }
@media (prefers-reduced-motion: no-preference) {
  .hero-target span { animation: arrow-in .7s var(--ease) .15s both; }
  @keyframes arrow-in { from { transform: rotate(-38deg) translateX(70px); opacity: 0; } to { transform: rotate(-38deg) translateX(0); opacity: 1; } }
}

/* ---------- Carta aktiviti & trend ---------- */
.activity { display: grid; gap: 8px; }
.activity-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 3px; height: 180px; }
.activity-bar { height: 100%; display: flex; align-items: flex-end; }
.activity-bar i { display: block; width: 100%; height: var(--h); border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--primary) 70%, var(--surface)); transition: background .15s; }
.activity-bar.zero i { background: var(--surface-3); }
.activity-bar.today i { background: var(--accent); }
.activity-bar:hover i { background: var(--primary); }
.activity-axis { display: flex; justify-content: space-between; color: var(--text-soft); font-size: .78rem; }
.progress-chart { width: 100%; height: auto; display: block; margin-top: 12px; }
.progress-chart text { fill: var(--text-soft); font-size: 11px; font-family: var(--font-body); }
.progress-chart .grid { stroke: var(--border); }
.progress-chart .line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; }
.progress-chart .area { fill: color-mix(in srgb, var(--primary) 10%, transparent); }
.progress-chart .dot { fill: var(--surface); stroke: var(--primary); stroke-width: 2; }
.chart-caption { color: var(--text-soft); font-size: .8rem; margin-top: 8px; }

/* ---------- Pintasan & langkah ---------- */
.shortcut-list { display: grid; gap: 8px; }
.shortcut { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: 600 .94rem var(--font-body); text-align: left; cursor: pointer; }
.shortcut > .icon:first-child { color: var(--primary-ink); }
.shortcut > .icon:last-child { margin-left: auto; color: var(--text-soft); }
.shortcut:hover { border-color: var(--primary); background: var(--primary-softer); }
.setup-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.setup-steps li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.setup-steps li.done { color: var(--text-muted); }
.setup-step-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--primary-ink); }
.setup-steps li.done .setup-step-mark { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 16px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; }
.steps li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink); font-weight: 800; }
.steps li p { color: var(--text-muted); font-size: .9rem; }

/* ---------- Jadual ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: calc(var(--sp) * .9) calc(var(--sp) * 1.25); border-bottom: 1px solid var(--border); }
.toolbar > select, .toolbar > input { width: auto; min-width: 150px; flex: 0 1 auto; min-height: 40px; }
.toolbar-end { margin-left: auto; display: flex; gap: 8px; }
.search-wrap { position: relative; flex: 1 1 240px; }
.search-wrap .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-soft); pointer-events: none; }
.search-wrap input { padding-left: 38px; min-height: 40px; }
.segmented { display: inline-flex; padding: 3px; border-radius: calc(var(--radius-btn) + 3px); background: var(--surface-3); gap: 2px; flex-wrap: wrap; }
.segmented button, .segmented label { min-height: 34px; padding: 0 14px; border: 0; border-radius: var(--radius-btn); background: transparent; color: var(--text-muted); font: 600 .88rem var(--font-body); cursor: pointer; display: inline-flex; align-items: center; }
.segmented label input { position: absolute; opacity: 0; pointer-events: none; }
.segmented button[aria-pressed="true"], .segmented label:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px var(--border); }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--focus); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-weight: 600; font-size: .8rem; color: var(--text-muted); padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--primary-softer); }
td small { display: block; color: var(--text-muted); font-size: .78rem; margin-top: 2px; }
td b { font-weight: 700; }
.cell-actions { width: 1%; white-space: nowrap; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
/* Dalam jadual (skrin besar), butang tindakan jadi ikon sahaja supaya nama pelajar tidak terhimpit. */
@media (min-width: 761px) {
  .row-actions .btn { width: 34px; padding: 0; }
  .row-actions .btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  td.cell-main { min-width: 190px; }
  .score-table td:nth-child(2):not(.cell-main), .score-table th { white-space: nowrap; }
}
.cell-time { font-size: .84rem; color: var(--text-muted); white-space: nowrap; }
.table-footer { display: flex; justify-content: space-between; padding: 10px 16px; color: var(--text-soft); font-size: .8rem; border-top: 1px solid var(--border); }
.record-score-pair { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.record-score-pair b { font-family: var(--font-heading); font-size: 1.18rem; }
.record-score-pair span { color: var(--text-soft); font-size: .82rem; }
.record-counts { display: flex; flex-wrap: wrap; gap: 5px; }
.score-count-badge, .miss-badge { display: inline-flex; max-width: 100%; padding: 2px 8px; border-radius: 6px; font-size: .76rem; font-weight: 600; background: var(--surface-3); color: var(--text-muted); white-space: nowrap; }
.score-count-badge:not(.unrecorded) { background: var(--primary-soft); color: var(--primary-ink); }
.miss-badge:not(.missing) { background: var(--warn-soft); color: var(--warn-ink); }
.distance-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 3px 9px; border-radius: 999px; border: 1.5px solid var(--border-strong); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.teacher-note-inline { margin-top: 6px; padding: 6px 9px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 6px 6px 0; font-size: .8rem; color: var(--text-muted); max-width: 32ch; }
.rank-badge { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 800; background: var(--surface-3); }
.rank-badge.rank-1 { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }
.rank-badge.rank-2, .rank-badge.rank-3 { background: var(--accent-soft); color: var(--accent-ink); }
.person { display: flex; align-items: center; gap: 10px; }
.mini-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink); font-weight: 800; font-size: .85rem; }

/* ---------- Key-in & tempat ---------- */
.keyin-grid, .location-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.keyin-place { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; box-shadow: var(--shadow-card); }
.keyin-place:hover { border-color: var(--primary); }
.keyin-place > span:nth-child(2) { display: grid; flex: 1; }
.keyin-place small { color: var(--text-muted); }
.keyin-place > .icon { color: var(--text-soft); }
.keyin-place-icon, .location-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-ink); flex: none; }
.location-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: grid; gap: 8px; box-shadow: var(--shadow-card); }
.location-card.is-inactive { opacity: .7; }
.location-heading { display: flex; justify-content: space-between; align-items: center; }
.location-card h2 { font-size: 1.12rem; margin-top: 6px; }
.location-card p { color: var(--text-muted); font-size: .88rem; }
.location-count { display: flex; align-items: baseline; gap: 6px; margin: 4px 0; }
.location-count b { font-family: var(--font-heading); font-size: 1.6rem; }
.location-count span { color: var(--text-muted); font-size: .86rem; }
.location-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Tetingkap (modal) ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, #0b120e 52%, transparent); display: grid; place-items: center; padding: 20px; animation: fade .15s ease; }
.modal { width: min(640px, 100%); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .45); overflow: hidden; animation: rise .2s var(--ease); }
.modal.score-workspace-modal, .modal.competition-workspace-modal, .modal.competition-bulk-modal { width: min(980px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 1.18rem; }
.modal-body { padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(14px) scale(.985); opacity: 0; } }
#toast { position: fixed; z-index: 80; left: 50%; bottom: calc(24px + var(--bottom-h)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--text); color: var(--surface); padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: .92rem; max-width: min(92vw, 520px); box-shadow: 0 12px 30px -10px rgb(0 0 0 / .4); transition: opacity .2s, transform .2s var(--ease); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { background: var(--danger); color: #fff; }

/* ---------- Butiran skor ---------- */
.detail-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 18px; border-radius: var(--radius-sm); background: var(--primary-softer); margin-bottom: 16px; }
.detail-hero p { color: var(--text-muted); font-weight: 600; }
.detail-hero b { font-family: var(--font-heading); font-size: 2.6rem; line-height: 1; }
.detail-hero b span { font-size: 1rem; color: var(--text-muted); margin-left: 4px; }
.detail-hero-meta { display: grid; justify-items: end; gap: 6px; color: var(--text-muted); font-size: .88rem; }
.detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.detail-list > div { background: var(--surface); padding: 11px 13px; display: grid; gap: 2px; }
.detail-list small { color: var(--text-muted); }
.detail-list b { font-weight: 600; font-size: .92rem; }
.notes { margin-top: 14px; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.notes small { color: var(--text-muted); font-weight: 600; }
.delete-confirm { display: flex; grid-template-columns: none; align-items: center; gap: 10px; font-weight: 600; }

/* ---------- Ruang key-in skor (draf) ---------- */
.score-keyin-context { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; padding: 14px; border-radius: var(--radius-sm); background: var(--primary-softer); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.score-workspace-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.score-workspace-tools small { color: var(--text-muted); margin-left: auto; }
.score-drafts { display: grid; gap: 10px; }
.score-draft { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.score-draft[open] { border-color: color-mix(in srgb, var(--primary) 40%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 8%, transparent); }
.score-draft.saved { background: var(--surface-2); }
.draft-summary { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.draft-toggle { width: 9px; height: 9px; border-right: 2px solid var(--text-soft); border-bottom: 2px solid var(--text-soft); transform: rotate(-45deg); transition: transform .15s; flex: none; }
.score-draft[open] .draft-toggle { transform: rotate(45deg); }
.draft-summary-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.draft-summary-top { display: flex; align-items: center; gap: 8px; }
.draft-summary-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-state { font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); }
.draft-state.saved { background: var(--ok-soft); color: var(--ok-ink); }
.draft-summary-values { color: var(--text-muted); font-size: .82rem; }
.draft-summary-metrics { display: flex; align-items: baseline; gap: 3px; flex: none; }
.draft-summary-metrics strong { font-family: var(--font-heading); font-size: 1.4rem; }
.draft-summary-metrics small { color: var(--text-soft); }
.score-draft form { padding: 4px 14px 14px; gap: 14px; }
.score-draft fieldset { display: grid; gap: 14px; }
.draft-grid { display: grid; grid-template-columns: 1fr 1.3fr .7fr; gap: 12px; }
.score-entry { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.score-big { flex: 1 1 180px; }
.score-big input { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; min-height: 58px; text-align: center; letter-spacing: .02em; }
.format-toggle { min-height: 58px; align-items: stretch; }
.format-toggle label { min-height: auto; font-size: 1rem; padding: 0 18px; }
.score-fast-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; }
.distance-status-box { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.distance-quick-next { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .86rem; color: var(--text-muted); }
.distance-quick-next strong { color: var(--text); font-family: var(--font-heading); font-size: 1.12rem; }
.score-count-wrap { display: grid; gap: 10px; padding: 14px; border-radius: var(--radius-sm); border: 1px dashed var(--border-strong); }
.score-count-title { font-weight: 700; font-size: .9rem; }
.score-count-title span { font-weight: 500; color: var(--text-soft); font-size: .8rem; margin-left: 4px; }
.score-count-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.score-count-inputs label { font-size: .82rem; }
.score-count-wrap > small { color: var(--text-muted); font-size: .8rem; }
.score-optional summary { cursor: pointer; font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.score-optional summary span { color: var(--text-soft); font-weight: 500; font-size: .8rem; }
.score-optional summary em { font-style: normal; font-size: .74rem; padding: 1px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-ink); }
.score-optional-body { margin-top: 10px; }
.draft-actions, .draft-saved-note { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.draft-saved-note { justify-content: flex-start; color: var(--ok-ink); font-weight: 600; }
.draft-saved-note .btn { margin-left: auto; }
.draft-hint { margin-top: 14px; color: var(--text-soft); font-size: .8rem; }

/* ---------- Profil & perkembangan ---------- */
.profile-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px 20px; padding: calc(var(--sp) * 1.25); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.profile-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.profile-avatar { display: grid; place-items: center; width: 58px; height: 58px; flex: none; border-radius: 50%; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--accent); }
.profile-main h2 { font-size: 1.4rem; overflow-wrap: anywhere; }
.profile-main p { color: var(--text-muted); font-size: .9rem; margin-top: 2px; }
.profile-tags { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; order: 3; }
.profile-pick { display: flex; align-items: end; gap: 8px; }
.profile-pick label { min-width: 190px; }
.progress-summary-grid { display: grid; gap: 12px; }
.count-summary-card { display: grid; gap: 12px; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.count-summary-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.count-summary-head small { display: block; color: var(--text-muted); }
.count-chip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.count-chip { display: grid; gap: 1px; padding: 9px 10px; background: var(--surface); border-radius: 10px; border: 1px solid var(--border); }
.count-chip small { color: var(--text-muted); font-size: .74rem; }
.count-chip b { font-family: var(--font-heading); font-size: 1.25rem; }
.miss-summary { display: flex; justify-content: space-between; font-size: .88rem; color: var(--text-muted); }
.miss-summary b { color: var(--text); }
.distance-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 6px; position: relative; }
.distance-dot { display: grid; justify-items: center; align-content: center; height: 56px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); }
.distance-dot span { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; line-height: 1; }
.distance-dot small { font-size: .7rem; }
.distance-dot.reached { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; }
.distance-dot.current { background: var(--primary); color: var(--on-primary); border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 70%, transparent); }
.distance-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; color: var(--text-muted); font-size: .82rem; }
.distance-legend span { display: inline-flex; align-items: center; gap: 6px; }
.distance-legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--primary-soft); }
.distance-legend i.current { background: var(--primary); }

/* ---------- Log aktiviti ---------- */
.audit-list { display: grid; }
.audit-item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.audit-item:last-child { border-bottom: 0; }
.audit-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-3); color: var(--text-muted); }
.audit-copy { display: grid; gap: 4px; font-size: .9rem; min-width: 0; }
.audit-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.audit-top time { color: var(--text-soft); font-size: .8rem; }
.audit-copy p { color: var(--text-muted); }
.audit-copy small { color: var(--text-soft); }
.audit-score { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.audit-score b { color: var(--text); }
.audit-note { font-style: italic; }
.audit-copy details summary { cursor: pointer; color: var(--primary-ink); font-size: .85rem; }

/* ---------- Tetapan ---------- */
.settings-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: calc(var(--sp) * 1.25); align-items: start; }
.settings-nav { position: sticky; top: calc(var(--topbar-h) + 16px); display: grid; gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.settings-nav button { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font: 600 .9rem var(--font-body); text-align: left; cursor: pointer; }
.settings-nav button:hover { background: var(--surface-2); color: var(--text); }
.settings-nav button.active { background: var(--primary-soft); color: var(--primary-ink); }
.settings-body { display: grid; gap: calc(var(--sp) * 1.25); min-width: 0; }
.save-bar { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.sticky-save { position: sticky; bottom: calc(12px + var(--bottom-h)); z-index: 5; padding: 12px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); box-shadow: 0 10px 30px -15px rgb(0 0 0 / .3); display: grid; gap: 8px; }
.theme-form { display: grid; gap: calc(var(--sp) * 1.25); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.toggle-copy { display: grid; gap: 2px; }
.toggle-copy b { font-size: .95rem; }
.switch { position: relative; flex: none; width: 48px; height: 28px; }
.switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong); transition: background .15s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .18s var(--ease); }
.switch input:checked + i { background: var(--primary); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice-group legend { margin-bottom: 8px; }
.choice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice span { display: grid; gap: 2px; padding: 11px 13px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); height: 100%; }
.choice span b { font-size: .9rem; }
.choice span small { color: var(--text-muted); font-weight: 400; }
.choice input:checked + span { border-color: var(--primary); background: var(--primary-softer); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.preset { display: grid; gap: 8px; padding: 8px 8px 10px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font: 600 .84rem var(--font-body); cursor: pointer; text-align: left; }
.preset:hover { border-color: var(--border-strong); }
.preset.active { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.preset-swatch { display: grid; grid-template-columns: 30% 1fr; grid-template-rows: 1fr 1fr; height: 64px; border-radius: 8px; overflow: hidden; background: var(--bg); border: 1px solid color-mix(in srgb, #000 8%, transparent); }
.preset-swatch i:nth-child(1) { grid-row: span 2; background: var(--sb); }
.preset-swatch i:nth-child(2) { margin: 10px 10px 4px; border-radius: 4px; background: var(--sf); box-shadow: inset 4px 0 0 var(--p); }
.preset-swatch i:nth-child(3) { margin: 4px 10px 10px; width: 50%; border-radius: 4px; background: linear-gradient(90deg, var(--p) 70%, var(--a) 70%); }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.color-field { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); align-content: start; }
.color-field .color-copy { order: -1; }
.color-input { display: flex; gap: 6px; }
.color-input input:not([type="color"]) { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88rem; text-transform: uppercase; }
.color-copy { display: grid; gap: 1px; min-width: 0; }
.color-copy small { font-weight: 400; color: var(--text-muted); }
.contrast-note { margin-top: 12px; font-size: .86rem; font-weight: 600; }
.contrast-note.ok { color: var(--ok-ink); }
.contrast-note.bad { color: var(--danger-ink); }
.logo-uploader { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.logo-preview { width: 120px; height: 120px; border-radius: var(--radius); display: grid; place-items: center; padding: 14px; background: repeating-conic-gradient(var(--surface-3) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px; border: 1px solid var(--border); }
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-actions { display: grid; gap: 10px; justify-items: start; }
.field-pair { display: grid; gap: 10px; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.category-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; counter-reset: cat; }
.category-row { counter-increment: cat; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.drag-num::before { content: counter(cat); color: var(--text-soft); font-weight: 700; font-size: .86rem; }
.category-move { display: flex; gap: 4px; }
.category-move .icon-btn { width: 34px; height: 34px; font-weight: 700; }
.smtp-log { margin: 0; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-3); font-size: .78rem; white-space: pre-wrap; max-height: 220px; overflow: auto; }

/* ---------- Halaman log masuk / lupa / set semula ---------- */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.auth-brand { position: relative; overflow: hidden; background: var(--sidebar); color: var(--sidebar-text); padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; isolation: isolate; }
.auth-brand-link { color: inherit; text-decoration: none; }
.brand-auth .brand-logo { width: 56px; height: 56px; background: color-mix(in srgb, var(--sidebar-text) 10%, transparent); padding: 5px; }
.brand-auth .brand-copy small { color: var(--sidebar-muted); }
.auth-rings { position: absolute; z-index: -1; width: min(760px, 120%); aspect-ratio: 1; right: -32%; bottom: -36%; border-radius: 50%; }
[data-pattern="rings"] .auth-rings, [data-pattern="rings"] .portal-rings { background: radial-gradient(circle, var(--accent) 0 7%, transparent 7.2%), repeating-radial-gradient(circle, transparent 0 7.8%, color-mix(in srgb, var(--sidebar-text) 13%, transparent) 7.8% 8.2%); }
[data-pattern="stripes"] .auth-rings, [data-pattern="stripes"] .portal-rings { border-radius: 0; inset: 0; width: auto; right: 0; bottom: 0; background: repeating-linear-gradient(-45deg, transparent 0 22px, color-mix(in srgb, var(--sidebar-text) 7%, transparent) 22px 24px); }
[data-pattern="plain"] .auth-rings, [data-pattern="plain"] .portal-rings { display: none; }
.auth-brand-copy h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); max-width: 14ch; line-height: 1.05; }
.auth-brand-copy p { margin-top: 14px; color: var(--sidebar-muted); font-size: 1.05rem; max-width: 40ch; }
.auth-main { display: grid; align-content: center; justify-items: center; padding: clamp(24px, 5vw, 64px) var(--gutter); gap: 24px; background: var(--bg); }
.auth-card { width: min(420px, 100%); display: grid; gap: 16px; }
.auth-card h2 { font-size: clamp(1.6rem, 3vw, 2rem); }
.auth-lead { color: var(--text-muted); margin-top: -6px; }
.auth-foot { color: var(--text-soft); font-size: .8rem; }
.auth-foot .credit { color: inherit; text-decoration: none; }

/* ---------- Portal awam ---------- */
.public-header { position: sticky; top: 0; z-index: 30; background: var(--sidebar); color: var(--sidebar-text); }
.public-header-inner { max-width: 1240px; width: 100%; margin: 0 auto; padding: 12px var(--gutter); display: flex; align-items: center; gap: 20px; }
.academy-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.academy-logo { width: 42px; height: 42px; object-fit: contain; border-radius: 10px; background: color-mix(in srgb, var(--sidebar-text) 10%, transparent); padding: 3px; flex: none; }
.academy-brand > span { display: grid; min-width: 0; }
.academy-brand b { font-family: var(--font-heading); font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.academy-brand small { color: var(--sidebar-muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-nav { display: flex; gap: 4px; margin-left: auto; }
.portal-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: var(--radius-btn); color: var(--sidebar-text); text-decoration: none; font-weight: 600; font-size: .92rem; }
.portal-nav a .icon { color: var(--sidebar-muted); }
.portal-nav a:hover { background: var(--sidebar-hover); }
.portal-nav a[aria-current="page"] { background: var(--sidebar-active); }
.portal-nav a[aria-current="page"] .icon { color: var(--accent); }
.portal-header-actions { display: flex; align-items: center; gap: 10px; }
.on-dark-link { color: var(--sidebar-text); font-weight: 600; font-size: .9rem; padding: 8px 6px; }
.portal-mobile-nav { display: none; }
.portal-home { min-height: 100vh; display: flex; flex-direction: column; }
/* --- Halaman utama portal --- */
.portal-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.portal-hero { position: relative; overflow: hidden; background: var(--sidebar); color: var(--sidebar-text); isolation: isolate; }
[data-pattern="stripes"] .portal-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(-45deg, transparent 0 22px, color-mix(in srgb, var(--sidebar-text) 6%, transparent) 22px 24px); }
.portal-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: clamp(24px, 5vw, 72px); padding-top: clamp(36px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 80px); }
.portal-kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: var(--sidebar-muted); }
.portal-kicker::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.portal-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.7rem); line-height: 1.02; margin-top: 14px; max-width: 13ch; }
.portal-lead { margin-top: 16px; max-width: 52ch; color: var(--sidebar-muted); font-size: 1.06rem; }
.portal-finder { margin-top: 28px; padding: clamp(14px, 2vw, 20px); background: var(--surface); color: var(--text); border-radius: var(--radius); box-shadow: 0 28px 60px -28px rgb(0 0 0 / .55); display: grid; gap: 12px; max-width: 640px; position: relative; z-index: 3; }
.portal-mark { display: grid; place-items: center; }
.portal-mark-face { position: relative; width: min(100%, 420px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, transparent 0 25%, var(--accent) 25% 27%, transparent 27%),
              repeating-radial-gradient(circle, transparent 0 9.2%, color-mix(in srgb, var(--sidebar-text) 16%, transparent) 9.2% 10%); }
[data-pattern="plain"] .portal-mark-face, [data-pattern="stripes"] .portal-mark-face { background: radial-gradient(circle, transparent 0 25%, var(--accent) 25% 27%, transparent 27%); }
.portal-mark-logo { width: 46%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: 0 0 0 10px color-mix(in srgb, var(--sidebar-text) 8%, transparent), 0 24px 50px -20px rgb(0 0 0 / .5); }
.portal-mark-logo img { width: 66%; height: 66%; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) {
  .portal-mark-face { animation: mark-in .9s var(--ease) both; }
  @keyframes mark-in { from { transform: scale(.92); opacity: 0; } }
}
.portal-body { display: grid; gap: 28px; padding-top: 32px; padding-bottom: 48px; }
.portal-body > #children-results:empty { display: none; }
.portal-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.portal-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.portal-section-head h2 { font-size: 1.3rem; }
.portal-section-head a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; text-decoration: none; }
.portal-section-head a .icon { width: 16px; height: 16px; }
.portal-latest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.portal-event { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; }
.portal-event:hover { border-color: var(--primary); }
.portal-event > .icon { margin-left: auto; color: var(--text-soft); }
.portal-event-date { display: grid; place-items: center; align-content: center; width: 56px; height: 56px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); line-height: 1.05; text-align: center; }
.portal-event-date b { font-family: var(--font-heading); font-size: 1.35rem; }
.portal-event-date small { font-size: .68rem; font-weight: 700; }
.portal-event-copy { display: grid; min-width: 0; }
.portal-event-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-event-copy small { color: var(--text-muted); }
.search-mode-tabs { display: inline-flex; gap: 4px; padding: 3px; background: var(--surface-3); border-radius: calc(var(--radius-btn) + 3px); justify-self: start; }
.search-mode-tabs button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-btn); background: transparent; color: var(--text-muted); font: 600 .9rem var(--font-body); cursor: pointer; }
.search-mode-tabs button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 0 0 1px var(--border); }
.portal-search-form { gap: 8px; }
.portal-search-row { display: flex; gap: 10px; }
.autocomplete-wrap { position: relative; flex: 1; }
.portal-search-input { position: relative; }
.portal-search-input > .icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-soft); width: 20px; height: 20px; }
.portal-search-input input { min-height: 54px; padding: 0 46px 0 46px; font-size: 1.08rem; border-radius: var(--radius-btn); }
.search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-muted); border-radius: 50%; cursor: pointer; }
.search-clear:hover { background: var(--surface-3); }
.portal-search-submit { min-height: 54px; }
#search-hint { color: var(--text-muted); }
#search-status { font-size: .88rem; color: var(--text-muted); }
#search-status:empty { display: none; }
.suggestion-popover { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 20px 50px -20px rgb(0 0 0 / .35); overflow: hidden; }
.suggestion-heading, .suggestion-foot { padding: 9px 14px; font-size: .8rem; color: var(--text-muted); }
.suggestion-foot:empty { display: none; }
.suggestion-heading { border-bottom: 1px solid var(--border); }
.name-suggestion { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.name-suggestion:hover, .name-suggestion[aria-selected="true"] { background: var(--primary-softer); }
.name-suggestion > .icon { margin-left: auto; color: var(--text-soft); }
.suggestion-avatar, .child-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink); font-weight: 800; }
.suggestion-copy { display: grid; min-width: 0; }
.suggestion-copy small { color: var(--text-muted); }
.suggestion-copy mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
#children-results:empty { display: none; }
.children-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.children-heading h2 { font-size: 1.25rem; }
.children-heading span, .family-caption { color: var(--text-muted); font-size: .9rem; }
.family-caption { margin-bottom: 12px; }
.children-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.family-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.child-card { width: 100%; display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.child-card:hover { background: var(--primary-softer); }
.child-copy { display: grid; gap: 3px; }
.child-copy strong { font-size: 1.04rem; }
.child-copy small { color: var(--text-muted); }
.child-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-ink); font-weight: 700; font-size: .88rem; margin-top: 6px; }
.child-cta .icon { width: 15px; height: 15px; }
.family-links { display: grid; gap: 6px; padding: 12px 16px 16px; border-top: 1px solid var(--border); }
.family-links small { color: var(--text-muted); font-weight: 600; }
.family-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: 600 .9rem var(--font-body); cursor: pointer; text-align: left; }
.family-link:hover { border-color: var(--primary); }
.portal-link-card { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; }
.portal-link-card:hover { border-color: var(--primary); }
.portal-link-card > span:nth-child(2) { display: grid; flex: 1; }
.portal-link-card small { color: var(--text-muted); }
.portal-link-card > .icon { color: var(--text-soft); }
.portal-link-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.portal-footer { margin-top: auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 20px var(--gutter); color: var(--text-soft); font-size: .82rem; border-top: 1px solid var(--border); max-width: 1240px; width: 100%; margin-inline: auto; }
.portal-footer .credit { color: inherit; text-decoration: none; }
.public-content { width: 100%; max-width: 1240px; margin: 0 auto; padding: calc(var(--sp) * 1.75) var(--gutter) 24px; display: grid; gap: calc(var(--sp) * 1.25); align-content: start; min-height: calc(100vh - 66px); }
.public-back { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.public-title h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.public-title p { color: var(--text-muted); margin-top: 6px; }
.closed-card { max-width: 520px; margin: 8vh auto; text-align: center; display: grid; justify-items: center; gap: 12px; padding: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.closed-card > .icon { width: 36px; height: 36px; color: var(--text-soft); }
.closed-card p { color: var(--text-muted); }

/* ---------- Ranking awam ---------- */
.ranking-filter-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: calc(var(--sp) * 1.15); }
.public-ranking-form { gap: 16px; }
.ranking-filter-row { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: end; }
.ranking-filter-group { display: grid; gap: 8px; }
.ranking-filter-group input[type="month"] { width: auto; min-height: 40px; }
.filter-label { font-weight: 700; font-size: .84rem; color: var(--text-muted); }
.monthly-distance-options { display: flex; flex-wrap: wrap; gap: 6px; }
.monthly-distance-options button { min-width: 52px; min-height: 42px; padding: 0 10px; border-radius: var(--radius-btn); border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font: 700 .95rem var(--font-heading); cursor: pointer; }
.monthly-distance-options button:hover { border-color: var(--border-strong); }
.monthly-distance-options button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.ranking-search-toolbar { max-width: 520px; }
.monthly-result-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.monthly-result-heading h2 { font-size: 1.3rem; }
.monthly-result-heading p { color: var(--text-muted); }
.monthly-board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.monthly-rank-row { width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto 20px; align-items: center; gap: 16px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.monthly-rank-row:hover { border-color: var(--primary); }
.monthly-rank-top10 { border-left: 4px solid var(--primary); }
.monthly-rank-number b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--surface-3); font-family: var(--font-heading); font-size: 1.08rem; }
.monthly-rank-top10 .monthly-rank-number b { background: var(--primary-soft); color: var(--primary-ink); }
.rank-1 .monthly-rank-number b { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }
.rank-2 .monthly-rank-number b, .rank-3 .monthly-rank-number b { background: var(--accent-soft); color: var(--accent-ink); }
.monthly-pupil { display: grid; gap: 1px; min-width: 0; }
.monthly-pupil strong { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monthly-pupil small, .monthly-pupil-meta { color: var(--text-muted); font-size: .8rem; }
.monthly-score { display: flex; align-items: baseline; gap: 4px; }
.monthly-score b { font-family: var(--font-heading); font-size: 1.6rem; }
.monthly-score span { color: var(--text-soft); font-size: .82rem; }
.ranking-aggregate-box { display: flex; gap: 6px; }
.ranking-aggregate-box span { padding: 3px 8px; border-radius: 6px; background: var(--surface-2); font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
.ranking-aggregate-box b { color: var(--text); }
.monthly-row-arrow { color: var(--text-soft); }
.monthly-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 40px 16px; color: var(--text-muted); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.monthly-empty h2 { font-size: 1.1rem; color: var(--text); }
.monthly-empty > .icon { width: 28px; height: 28px; }
.monthly-prompt { color: var(--text-muted); }
.monthly-method { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 16px; }
.monthly-method summary { display: flex; align-items: center; gap: 8px; padding: 14px 0; cursor: pointer; font-weight: 700; list-style: none; }
.monthly-method summary::-webkit-details-marker { display: none; }
.monthly-method > div { display: grid; gap: 8px; padding-bottom: 16px; color: var(--text-muted); font-size: .9rem; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Pertandingan ---------- */
.competition-shell { display: grid; }
#competition-root { display: grid; gap: calc(var(--sp) * 1.25); }
.competition-loading { color: var(--text-muted); padding: 20px 0; }
.competition-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.competition-heading h1 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); margin-top: 6px; }
.competition-heading p { color: var(--text-muted); margin-top: 4px; }
.competition-heading-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.competition-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.competition-card { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.competition-card-symbol { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.competition-card h2 { font-size: 1.1rem; margin: 4px 0; }
.competition-card p { color: var(--text-muted); font-size: .88rem; }
.competition-category-count { font-size: .78rem; font-weight: 700; color: var(--primary-ink); }
.competition-card-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.competition-delete-info { color: var(--text-muted); font-size: .78rem; flex-basis: 100%; }
.competition-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 48px 20px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-muted); }
.competition-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); }
.competition-workspace-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn-ink); }
.competition-board { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.competition-board-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.competition-board-head h2 { font-size: 1.1rem; }
.competition-board-head p { color: var(--text-muted); font-size: .87rem; }
.competition-category-overview { padding: 16px 20px; display: grid; gap: 12px; }
.competition-category-intro { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.competition-category-intro h3 { font-size: 1rem; }
.competition-category-intro p, .competition-active-summary { color: var(--text-muted); font-size: .86rem; }
.competition-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.competition-category-tile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.competition-category-tile.no-results { color: var(--text-muted); background: var(--surface-2); }
.competition-category-tile:hover { border-color: var(--border-strong); }
.competition-category-tile.is-active { border-color: var(--primary); background: var(--primary-softer); }
.competition-category-copy { display: grid; }
.competition-category-name { font-weight: 700; font-size: .9rem; }
.competition-category-status { color: var(--text-muted); font-size: .78rem; }
.competition-category-status.filled { color: var(--primary-ink); font-weight: 600; }
.competition-category-chevron { font-size: 1.2rem; color: var(--text-soft); font-weight: 700; }
.competition-category-sections { border-top: 1px solid var(--border); }
.competition-category-placeholder, .competition-category-empty-note { padding: 24px 20px; color: var(--text-muted); text-align: center; }
.competition-category-section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 20px; background: var(--surface-2); }
.competition-category-section-label { display: flex; align-items: baseline; gap: 10px; }
.competition-category-section-label h3 { font-size: 1.05rem; }
.competition-category-count-label { color: var(--text-muted); font-size: .84rem; }
.competition-ranking-list { display: grid; }
.competition-table-head, .competition-rank-row { display: grid; grid-template-columns: minmax(220px, 2.4fr) repeat(3, minmax(56px, .6fr)) minmax(70px, .7fr) minmax(80px, .7fr) auto; align-items: center; gap: 10px; padding: 10px 20px; }
.competition-table-head { font-size: .78rem; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.competition-rank-row { border-bottom: 1px solid var(--border); }
.competition-rank-row:last-child { border-bottom: 0; }
.competition-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.competition-position { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--surface-3); font-weight: 800; }
.competition-podium .competition-position { background: var(--accent-soft); color: var(--accent-ink); }
.competition-ranking-list > .competition-podium:nth-child(2) .competition-position { background: var(--accent); color: var(--on-accent); }
.competition-person { display: grid; min-width: 0; }
.competition-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.competition-person small { color: var(--text-muted); font-size: .8rem; }
.competition-person em { font-style: normal; font-size: .72rem; color: var(--primary-ink); font-weight: 600; }
.competition-round { text-align: center; }
.competition-total { text-align: center; font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; }
.competition-official { text-align: center; color: var(--text-muted); }
.competition-entry-actions { display: flex; gap: 4px; }
.competition-action-link { border: 0; background: transparent; color: var(--primary-ink); font: 600 .84rem var(--font-body); padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.competition-action-link:hover { background: var(--surface-3); }
.competition-action-link.danger { color: var(--danger-ink); }
.competition-ranking-note { color: var(--text-muted); font-size: .84rem; }
.competition-history-list { display: grid; }
.competition-history-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.competition-history-link:first-child { border-top: 0; }
.competition-history-link:hover { background: var(--primary-softer); }
.competition-history-link > span:first-child { display: grid; }
.competition-history-link small { color: var(--text-muted); }
.competition-history-total { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.competition-workspace { display: grid; gap: 12px; }
.competition-workspace-intro, .competition-workspace-hint { color: var(--text-muted); font-size: .86rem; }
.competition-editor-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.competition-draft-sidebar { display: grid; gap: 10px; }
.competition-workspace-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.competition-add-short { display: none; }
.competition-draft-filters { display: flex; gap: 4px; padding: 3px; background: var(--surface-3); border-radius: calc(var(--radius-btn) + 3px); }
.competition-draft-filters button { flex: 1; min-height: 32px; border: 0; border-radius: var(--radius-btn); background: transparent; font: 600 .82rem var(--font-body); color: var(--text-muted); cursor: pointer; }
.competition-draft-filters button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.competition-draft-nav { display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.competition-draft-tab { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.competition-draft-tab > span:last-child { display: grid; min-width: 0; }
.competition-draft-tab strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.competition-draft-tab small { color: var(--text-muted); font-size: .76rem; }
.competition-draft-tab.is-active { border-color: var(--primary); background: var(--primary-softer); }
.competition-tab-number { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--surface-3); font-size: .8rem; font-weight: 800; }
.competition-draft-tab.is-saved .competition-tab-number { background: var(--ok-soft); color: var(--ok-ink); }
.competition-nav-empty, .competition-editor-empty { color: var(--text-muted); font-size: .88rem; padding: 12px; }
.competition-draft-card { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.competition-draft-header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border: 0; background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.competition-draft-title { display: grid; }
.competition-draft-title small { color: var(--text-muted); }
.competition-draft-card form { padding: 14px; }
.competition-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.competition-student-field { grid-column: 1 / -1; display: grid; gap: 6px; position: relative; }
.competition-student-field > small { color: var(--text-muted); }
.competition-student-suggestions { position: absolute; z-index: 10; left: 0; right: 0; top: 76px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 16px 40px -18px rgb(0 0 0 / .35); overflow: hidden; }
.competition-student-suggestions button { width: 100%; display: grid; padding: 9px 12px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--text); font: inherit; }
.competition-student-suggestions button:hover { background: var(--primary-softer); }
.competition-student-suggestions small { color: var(--text-muted); }
.competition-external-check { display: flex; grid-template-columns: none; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 500; }
.competition-external-check span { display: grid; }
.competition-round-form { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.competition-result-fields { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.competition-total-preview { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--primary-softer); }
.competition-total-preview span, .competition-total-preview small { color: var(--text-muted); font-size: .84rem; }
.competition-total-preview strong { font-family: var(--font-heading); font-size: 1.5rem; }
.competition-draft-actions { display: flex; justify-content: flex-end; gap: 8px; }
.competition-draft-saved { color: var(--ok-ink); font-weight: 600; }

/* ---------- Jadual pukal (pelajar, rekod buku, pertandingan) ---------- */
.bulk-students, .cbulk { display: grid; gap: calc(var(--sp) * 1.1); }
.bulk-intro { padding: calc(var(--sp) * 1.25); display: grid; gap: 14px; }
.bulk-intro-heading { display: flex; gap: 14px; align-items: flex-start; }
.bulk-intro-heading > span { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--primary-soft); color: var(--primary-ink); }
.bulk-intro-heading h2 { font-size: 1.12rem; }
.bulk-intro-heading p { color: var(--text-muted); font-size: .9rem; margin-top: 3px; }
.bulk-default-row, .history-sheet-defaults, .cbulk-defaults { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: start; }
.bulk-default-note { display: flex; gap: 10px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); font-size: .86rem; grid-column: span 2; }
.cbulk-check { display: flex; grid-template-columns: none; align-items: flex-start; gap: 10px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 600; }
.cbulk-check span { display: grid; }
.history-roster-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.history-roster-toggle { display: flex; grid-template-columns: none; align-items: center; gap: 8px; }
.history-roster-controls small { color: var(--text-muted); }
.bulk-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.bulk-history { display: flex; gap: 8px; margin-left: auto; }
.bulk-paste-box { display: grid; gap: 10px; padding: 14px; border-radius: var(--radius-sm); border: 1px dashed var(--border-strong); background: var(--surface-2); }
.bulk-paste-box p, .bulk-paste-box small { color: var(--text-muted); font-size: .86rem; }
.bulk-paste-box .btn { justify-self: start; }
.bulk-grid-heading { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .88rem; }
.bulk-grid-heading span { color: var(--text-muted); }
.bulk-grid-wrap { overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-height: 70vh; }
.bulk-grid { font-size: .86rem; }
.bulk-grid th { position: sticky; top: 0; z-index: 2; }
.bulk-grid td { padding: 4px; border-right: 1px solid var(--border); }
.bulk-grid td input { min-height: 36px; padding: 6px 8px; border-color: transparent; border-radius: 6px; font-size: .9rem; min-width: 110px; background: transparent; }
.bulk-grid td input:focus { border-color: var(--primary); background: var(--surface); }
.bulk-grid td input:disabled { background: var(--surface-2); }
.bulk-grid tbody tr:hover td { background: transparent; }
.bulk-row-number { white-space: nowrap; color: var(--text-soft); font-weight: 700; padding: 0 10px !important; }
.bulk-row-number span { display: none; }
.bulk-row-actions { min-width: 140px; }
.bulk-row-feedback p { color: var(--danger-ink); font-size: .8rem; margin-top: 4px; }
.bulk-row-feedback label { display: flex; grid-template-columns: none; gap: 6px; font-size: .8rem; font-weight: 600; margin-top: 4px; }
.bulk-row-error td { background: var(--danger-soft) !important; }
.cbulk-total { text-align: center; font-weight: 800; }
.bulk-save-bar { position: sticky; bottom: calc(12px + var(--bottom-h)); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); box-shadow: 0 10px 30px -15px rgb(0 0 0 / .3); }
.bulk-save-bar p { color: var(--text-muted); font-size: .82rem; }
.bulk-save-bar [role="status"] { font-weight: 600; }
.bulk-save-bar [role="status"]:empty { display: none; }
.bulk-success { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--ok-soft); color: var(--ok-ink); }
.bulk-success .btn { margin-left: auto; }
.bulk-help { color: var(--text-muted); font-size: .84rem; }

/* ---------- Halaman pemasangan & muat ---------- */
.boot, .boot-error { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 24px; color: var(--text-muted); }
.boot-logo { width: 72px; height: 72px; object-fit: contain; }
.boot-bar { width: 120px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--primary) 0 40%, var(--surface-3) 40%); background-size: 200% 100%; animation: boot 1s linear infinite; }
@keyframes boot { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.boot-error h1 { color: var(--text); font-size: 1.5rem; }
.setup-body { background: var(--bg); }
.setup-shell { max-width: 720px; margin: 0 auto; padding: 40px 16px 60px; display: grid; gap: 16px; }
.setup-intro { display: grid; gap: 8px; margin-bottom: 8px; }
.setup-mark { width: 56px; height: 56px; }
.setup-intro h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
.setup-intro p { color: var(--text-muted); }
.setup-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: grid; gap: 14px; }
.setup-card h2 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.setup-step { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: .9rem; }
.setup-card .hint { color: var(--text-muted); font-size: .9rem; }
.setup-form { gap: 16px; }
.setup-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.setup-checks li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.setup-checks li div { display: grid; }
.setup-checks small { color: var(--text-muted); }
.setup-checks .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.setup-checks .warn .dot { background: var(--warn); }
.setup-checks .bad .dot { background: var(--danger); }
.setup-checks em { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--text-muted); }
.setup-foot { text-align: center; color: var(--text-soft); font-size: .8rem; }
textarea.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }

/* ==========================================================================
   Responsif
   ========================================================================== */
/* Tablet landskap / laptop kecil: menu jadi jalur ikon */
@media (max-width: 1199px) and (min-width: 900px) {
  :root { --sidebar-w: 86px; }
  .sidebar { padding: 14px 10px; align-items: center; }
  .sidebar-top { padding: 0 0 12px; justify-content: center; }
  .brand-side .brand-copy, .nav-group, .sidebar-foot .credit { display: none; }
  .nav, .sidebar-foot { width: 100%; }
  .nav-link { flex-direction: column; justify-content: center; gap: 4px; min-height: 58px; padding: 6px 4px; font-size: .68rem; text-align: center; line-height: 1.15; }
  .nav-link .icon { width: 20px; height: 20px; }
  .nav-link.active::before { left: -10px; }
  .nav-group + .nav-link { margin-top: 8px; }
  .grid-main { grid-template-columns: 1fr; }
  .account-copy { display: none; }
}
@media (max-width: 1199px) { .grid-main { grid-template-columns: 1fr; } }
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-card { grid-template-columns: 1fr; }
  .profile-pick { flex-wrap: wrap; }
  .competition-editor-layout { grid-template-columns: 1fr; }
  .competition-draft-nav { grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); overflow-x: auto; max-height: none; }
}
/* Tablet potret & telefon: laci menu + navigasi bawah */
@media (max-width: 899px) {
  :root { --topbar-h: 58px; --bottom-h: 68px; --sidebar-w: min(300px, 86vw); }
  .sidebar { transform: translateX(-104%); transition: transform .25s var(--ease); box-shadow: 0 0 60px rgb(0 0 0 / .3); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .sidebar.open { transform: none; }
  .close-sidebar { display: inline-grid; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: color-mix(in srgb, #0b120e 45%, transparent); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .menu-open .scrim { opacity: 1; pointer-events: auto; }
  .main { margin-left: 0; }
  .topbar { gap: 10px; }
  .mobile-menu { display: inline-grid; }
  .topbar-logo { display: block; }
  .topbar-cta, .account-copy { display: none; }
  .account { border-left: 0; padding-left: 0; }
  .bottom-nav { position: fixed; z-index: 34; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border); }
  .bottom-link { display: grid; justify-items: center; gap: 3px; min-height: 54px; padding: 6px 2px; border: 0; background: transparent; color: var(--text-muted); font: 600 .7rem var(--font-body); cursor: pointer; border-radius: 12px; }
  .bottom-link .icon { width: 22px; height: 22px; }
  .bottom-link.active { color: var(--primary-ink); }
  .bottom-link.is-cta .icon { width: 50px; height: 50px; padding: 13px; margin-top: -22px; border-radius: 50%; background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--primary) 70%, transparent), 0 0 0 5px var(--surface); }
  .bottom-link.is-cta { color: var(--primary-ink); }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; padding: 6px; }
  .settings-nav button { flex: none; }
  .auth-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-brand { min-height: 0; padding: 22px var(--gutter) 30px; gap: 22px; }
  .auth-brand-copy { display: none; }
  .auth-brand { padding-bottom: 22px; }
  .auth-rings { right: -40%; bottom: -70%; width: 520px; }
  .auth-main { align-content: start; padding-top: 28px; }
  .portal-nav, .portal-header-actions { display: none; }
  .portal-header-actions { margin-left: auto; }
  .portal-mobile-nav { position: fixed; z-index: 34; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--border); }
  .portal-mobile-nav a { display: grid; justify-items: center; gap: 3px; padding: 7px 2px; color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: .7rem; border-radius: 12px; }
  .portal-mobile-nav a .icon { width: 22px; height: 22px; }
  .portal-mobile-nav a[aria-current="page"] { color: var(--primary-ink); }
  .portal-home, .public-content { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .portal-footer { padding-bottom: 8px; }
  .hero { grid-template-columns: 1fr; }
  .portal-hero-grid { grid-template-columns: 1fr; }
  .portal-mark { display: none; }
  .portal-link-card.is-staff { display: none; }
  .portal-finder { max-width: none; }
  .hero-target { display: none; }
}
/* Telefon */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .content { padding-top: 18px; gap: 16px; }
  .heading { align-items: flex-start; }
  .heading-actions { width: 100%; }
  .heading-actions .btn { flex: 1; }
  .split, .split.three { grid-template-columns: 1fr; }
  .stats { gap: 10px; }
  .stat { padding: 14px; }
  .stat-icon { display: none; }
  .panel-head { padding: 14px 16px 12px; flex-wrap: wrap; }
  .panel-body { padding: 16px; }
  .toolbar { padding: 12px 16px; }
  .toolbar > select, .toolbar > input { flex: 1 1 140px; min-width: 0; }
  .toolbar-end { margin-left: 0; width: 100%; }
  .toolbar-end .btn { flex: 1; }
  .search-wrap { flex-basis: 100%; }
  /* Jadual jadi kad */
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap thead { display: none; }
  .table-wrap tr { padding: 14px 16px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
  .table-wrap tbody tr:hover td { background: transparent; }
  .table-wrap td { padding: 0; border: 0; }
  .table-wrap td::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 600; color: var(--text-soft); margin-bottom: 2px; }
  .table-wrap td.cell-main, .table-wrap td.cell-actions, .table-wrap td:has(.teacher-note-inline) { grid-column: 1 / -1; }
  .table-wrap td.cell-main::before, .table-wrap td.cell-actions::before { display: none; }
  .table-wrap td.cell-main b { font-size: 1.02rem; }
  .row-actions { justify-content: flex-start; flex-wrap: wrap; }
  .score-table td:first-child:has(.rank-badge) { grid-column: 1 / -1; }
  .score-table td:first-child:has(.rank-badge)::before { display: none; }
  .teacher-note-inline { max-width: none; }
  .table-footer { padding: 10px 16px; }
  .detail-list { grid-template-columns: 1fr; }
  .detail-hero { flex-direction: column; align-items: flex-start; }
  .detail-hero-meta { justify-items: start; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal { width: 100% !important; max-height: 94dvh; border-radius: var(--radius) var(--radius) 0 0; animation: sheet .25s var(--ease); }
  @keyframes sheet { from { transform: translateY(40px); opacity: 0; } }
  .modal-head { padding: 14px 16px; }
  .modal-body { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .modal-actions .btn { flex: 1; }
  .score-keyin-context, .draft-grid, .score-fast-grid { grid-template-columns: 1fr; }
  .format-toggle { width: 100%; }
  .format-toggle label { flex: 1; justify-content: center; }
  .score-workspace-tools small { margin-left: 0; width: 100%; }
  .profile-pick label { min-width: 0; flex: 1; }
  .count-chip-row { grid-template-columns: repeat(3, 1fr); }
  .portal-search-row { flex-direction: column; }
  .portal-search-submit { width: 100%; }
  .search-mode-tabs { width: 100%; }
  .search-mode-tabs button { flex: 1; justify-content: center; }
  .public-header-inner { padding: 10px 16px; }
  .academy-brand small { display: none; }
  .monthly-rank-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px 12px; padding: 12px; }
  .monthly-rank-number b { width: 38px; height: 38px; }
  .ranking-aggregate-box { grid-column: 2 / -1; }
  .monthly-row-arrow { display: none; }
  .ranking-filter-row { display: grid; }
  .monthly-distance-options button { flex: 1 0 48px; }
  .competition-table-head { display: none; }
  .competition-rank-row { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px 16px; gap: 8px; }
  .competition-identity { grid-column: 1 / -1; }
  .competition-round, .competition-total, .competition-official { text-align: left; display: grid; }
  .competition-round::before, .competition-total::before, .competition-official::before { content: attr(data-label); font-size: .7rem; font-weight: 600; color: var(--text-soft); font-family: var(--font-body); }
  .competition-total::before { content: "Jumlah"; }
  .competition-official::before { content: "Comp. rank"; }
  .competition-entry-actions { grid-column: 1 / -1; }
  .competition-entry-grid, .competition-result-fields { grid-template-columns: 1fr; }
  .competition-add-long { display: none; }
  .competition-add-short { display: inline; }
  .category-row { grid-template-columns: 24px minmax(0, 1fr); }
  .category-row .check-inline, .category-move { grid-column: 2; }
  .color-grid { grid-template-columns: 1fr; }
  .bulk-default-note { grid-column: auto; }
  .bulk-history { margin-left: 0; }
  .bulk-save-bar { flex-direction: column; align-items: stretch; }
  .bulk-save-bar .btn { width: 100%; }
  .footer { flex-direction: column; }
  .logo-uploader { align-items: flex-start; }
}
@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat b { font-size: 1.5rem; }
  .hero h1 { font-size: 1.55rem; }
  .hero-actions .btn { flex: 1; }
}

/* ---------- Mod gelap automatik bagi tema gelap ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Cetak ---------- */
@media print {
  .sidebar, .topbar, .bottom-nav, .portal-mobile-nav, .public-header, .heading-actions, .panel-actions, .toolbar, .row-actions, .cell-actions, .footer, .portal-footer, .public-back, .profile-pick, #toast { display: none !important; }
  .main { margin: 0; }
  body { background: #fff; }
  .panel, .stat, .profile-card { break-inside: avoid; box-shadow: none; }
}