/* ================================================
   KL ATTENDANCE CALCULATOR — style.css
   Premium Dark Theme · Boys & Girls Versions
   ================================================ */

/* ── GOOGLE FONTS already loaded via HTML <link> ── */

/* ─────────────────────────────────────
   CSS CUSTOM PROPERTIES  (Boys default)
───────────────────────────────────────*/
:root {
  /* Palette */
  --bg:         #06060c;
  --bg2:        #0b0b14;
  --accent:     #e8192c;
  --accent2:    #00c8f0;
  --accent3:    #39ff14;

  /* Text */
  --text:       #eaf4ff;
  --text2:      #7a92a8;
  --text3:      rgba(255,255,255,0.28);

  /* Surfaces */
  --surface:    rgba(255,255,255,0.032);
  --surface2:   rgba(255,255,255,0.058);
  --border:     rgba(232,25,44,0.28);
  --border2:    rgba(0,200,240,0.22);

  /* Glows */
  --glow:       0 0 26px rgba(232,25,44,0.38), 0 0 52px rgba(232,25,44,0.13);
  --glow2:      0 0 18px rgba(0,200,240,0.35);
  --glow-safe:  0 0 24px rgba(57,255,20,0.35);
  --glow-warn:  0 0 24px rgba(255,170,0,0.35);
  --glow-danger:0 0 24px rgba(232,25,44,0.38);

  /* Status colours */
  --safe:   #39ff14;
  --warn:   #ffaa00;
  --danger: #e8192c;

  /* Typography */
  --font-head: 'Orbitron', monospace;
  --font-body: 'Rajdhani', sans-serif;

  /* Button gradient */
  --btn-grad: linear-gradient(135deg, #e8192c 0%, #b00020 100%);
  --btn-glow:  rgba(232,25,44,0.55);

  /* Misc */
  --radius:   14px;
  --radius-sm: 10px;
  --radius-pill: 50px;
}

/* GIRLS THEME OVERRIDES */
body.girls-theme {
  --bg:        #080614;
  --bg2:       #0f0a1e;
  --accent:    #b97cf8;
  --accent2:   #7c86f5;
  --accent3:   #f9a8d4;
  --text:      #f0e8ff;
  --text2:     #9070bb;
  --text3:     rgba(185,124,248,0.3);
  --surface:   rgba(185,124,248,0.048);
  --surface2:  rgba(185,124,248,0.08);
  --border:    rgba(185,124,248,0.28);
  --border2:   rgba(124,134,245,0.22);
  --glow:      0 0 26px rgba(185,124,248,0.38), 0 0 52px rgba(185,124,248,0.13);
  --glow2:     0 0 18px rgba(124,134,245,0.35);
  --glow-safe: 0 0 24px rgba(134,239,172,0.35);
  --glow-warn: 0 0 24px rgba(253,230,138,0.35);
  --glow-danger: 0 0 24px rgba(249,168,212,0.38);
  --safe:      #86efac;
  --warn:      #fde68a;
  --danger:    #f9a8d4;
  --font-head: 'Quicksand', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --btn-grad:  linear-gradient(135deg, #b97cf8 0%, #7c86f5 100%);
  --btn-glow:  rgba(185,124,248,0.55);
}

/* ─────────────────────────────────────
   RESET & BASE
───────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

.hidden { display: none !important; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ─────────────────────────────────────
   BACKGROUND CANVAS
───────────────────────────────────────*/
#selectorCanvas,
#bgCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ─────────────────────────────────────
   THEME SELECTOR SCREEN
───────────────────────────────────────*/
.theme-screen {
  position: fixed;
  inset: 0;
  background: #030307;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  overflow: hidden;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.theme-screen.exit {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

.selector-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem 1.5rem;
  width: 100%;
  max-width: 900px;
  animation: fadeDown 0.8s ease both;
}

/* Hero Logo */
.selector-logo { margin-bottom: 0.5rem; }

.logo-kl {
  font-family: 'Orbitron', monospace;
  font-weight: 900;
  font-size: clamp(3.5rem, 10vw, 6rem);
  line-height: 1;
  background: linear-gradient(135deg, #e8192c 0%, #00c8f0 50%, #b97cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(232,25,44,0.5));
  letter-spacing: 0.04em;
}

.logo-title {
  font-family: 'Orbitron', monospace;
  font-size: clamp(0.85rem, 2.4vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,0.82);
  margin-top: 0.3rem;
}

.logo-sub {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(0.68rem, 1.8vw, 0.95rem);
  letter-spacing: 0.5em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  margin-top: 0.2rem;
}

.selector-tagline {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.2em;
  margin: 1.4rem 0 2.8rem;
  animation: fadeUp 0.7s 0.2s ease both;
}

/* Theme Cards */
.theme-cards {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeUp 0.7s 0.35s ease both;
}

.theme-card {
  position: relative;
  width: 320px;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255,255,255,0.022);
  border: 1px solid rgba(255,255,255,0.07);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  outline: none;
}
.theme-card:focus-visible { box-shadow: 0 0 0 3px var(--accent2); }
.boys-card:hover  { transform: translateY(-10px) scale(1.022); box-shadow: 0 22px 60px rgba(232,25,44,0.28), 0 0 40px rgba(0,200,240,0.18); border-color: rgba(232,25,44,0.5); }
.girls-card:hover { transform: translateY(-10px) scale(1.022); box-shadow: 0 22px 60px rgba(185,124,248,0.28), 0 0 40px rgba(124,134,245,0.18); border-color: rgba(185,124,248,0.5); }

.card-glow-bg {
  position: absolute; inset: 0; border-radius: inherit;
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.boys-glow-bg  { background: radial-gradient(circle at 50% 0%, rgba(232,25,44,0.18) 0%, transparent 65%); }
.girls-glow-bg { background: radial-gradient(circle at 50% 0%, rgba(185,124,248,0.18) 0%, transparent 65%); }
.theme-card:hover .card-glow-bg { opacity: 1; }

.card-body {
  position: relative;
  z-index: 1;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
}

.card-svg-wrap { width: 72px; height: 72px; }

.boys-svg  .spin-slow  { animation: spinFull 22s linear infinite; }
.girls-svg .float-slow { animation: floatSpin 9s ease-in-out infinite; }

@keyframes spinFull  { to { transform: rotate(360deg); } }
@keyframes floatSpin {
  0%,100% { transform: rotate(0deg) translateY(0); }
  50%     { transform: rotate(180deg) translateY(-7px); }
}

.card-emoji { font-size: 2.3rem; line-height: 1; }

.card-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.boys-title  { font-family: 'Orbitron', monospace; color: #e8192c; text-shadow: 0 0 14px rgba(232,25,44,0.65); }
.girls-title { font-family: 'Quicksand', sans-serif; color: #b97cf8; text-shadow: 0 0 14px rgba(185,124,248,0.65); }

.card-desc {
  font-size: 0.87rem;
  color: rgba(255,255,255,0.42);
  text-align: center;
  letter-spacing: 0.04em;
}

.card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.ctag {
  padding: 0.2rem 0.7rem;
  border-radius: 100px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  border: 1px solid var(--tc);
  color: var(--tc);
  text-shadow: 0 0 8px var(--tc);
}

.enter-btn {
  padding: 0.72rem 2.2rem;
  border-radius: 50px;
  border: none;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 0.3rem;
  position: relative;
  overflow: hidden;
}
.boys-btn  { background: linear-gradient(135deg,#e8192c,#b00020); color:#fff; font-family:'Orbitron',monospace; font-size:0.75rem; box-shadow:0 0 20px rgba(232,25,44,0.4); }
.girls-btn { background: linear-gradient(135deg,#b97cf8,#7c86f5); color:#fff; font-family:'Quicksand',sans-serif; font-size:0.9rem; box-shadow:0 0 20px rgba(185,124,248,0.4); }
.enter-btn:hover { transform: scale(1.07); }
.boys-btn:hover  { box-shadow:0 0 32px rgba(232,25,44,0.7); }
.girls-btn:hover { box-shadow:0 0 32px rgba(185,124,248,0.7); }

/* ─────────────────────────────────────
   MAIN APP
───────────────────────────────────────*/
.main-app {
  position: relative;
  min-height: 100vh;
  z-index: 1;
}

/* ── Doodles ── */
.doodle-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.doodle {
  position: absolute;
  font-size: 1.45rem;
  opacity: 0.22;
  filter: blur(0.4px);
  animation: doodleFloat var(--dur,8s) var(--dly,0s) ease-in-out infinite;
}
.d1  { top: 8%;  left:  5%; --dur:7s;  --dly:0s;    }
.d2  { top:18%;  right: 7%; --dur:9s;  --dly:-2s;   }
.d3  { top:38%;  left:  3%; --dur:6s;  --dly:-1s;   }
.d4  { top:60%;  right: 4%; --dur:11s; --dly:-3s;   }
.d5  { top:75%;  left: 10%; --dur:8s;  --dly:-4s;   }
.d6  { top:14%;  left: 46%; --dur:10s; --dly:-1.5s; }
.d7  { top:82%;  right:13%; --dur:7s;  --dly:-2.5s; }
.d8  { top:50%;  left: 52%; --dur:9s;  --dly:-0.5s; }
.d9  { top:28%;  right:28%; --dur:12s; --dly:-3.5s; }
.d10 { top:68%;  left: 32%; --dur:8s;  --dly:-1.8s; }

@keyframes doodleFloat {
  0%,100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.22; }
  33%      { transform: translateY(-22px) rotate(12deg) scale(1.12); opacity: 0.38; }
  66%      { transform: translateY(10px) rotate(-6deg) scale(0.9);  opacity: 0.18; }
}

/* ── Header ── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(6,6,12,0.88);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 0;
  transition: background 0.3s;
}
body.girls-theme .app-header { background: rgba(8,6,20,0.88); }

.header-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand-badge {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--btn-grad);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: 1rem; font-weight: 900; color: #fff;
  box-shadow: var(--glow);
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

.brand-title {
  font-family: var(--font-head);
  font-size: clamp(0.72rem, 2vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text);
}
.brand-sub {
  font-size: 0.7rem;
  color: var(--text2);
  letter-spacing: 0.1em;
  margin-top: 1px;
}

.header-actions { display: flex; align-items: center; gap: 0.8rem; }

.back-btn {
  padding: 0.4rem 1.1rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text2);
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.25s;
}
.back-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }

.mode-badge {
  padding: 0.3rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  white-space: nowrap;
}

/* ── Main Container ── */
.app-container {
  max-width: 920px;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
  position: relative;
  z-index: 2;
}

/* ── Tabs ── */
.tab-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.tab-btn {
  flex: 1;
  min-width: 185px;
  padding: 0.95rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text2);
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  backdrop-filter: blur(10px);
}
.tab-btn:hover { border-color: var(--accent); color: var(--text); }
.tab-btn.active {
  background: linear-gradient(135deg, rgba(232,25,44,0.14), rgba(0,200,240,0.07));
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--glow);
}
body.girls-theme .tab-btn.active {
  background: linear-gradient(135deg, rgba(185,124,248,0.14), rgba(124,134,245,0.07));
}

/* ── Calc Panels ── */
.calc-panel { display: none; animation: fadeUp 0.4s ease both; }
.show-panel  { display: block; }

.panel-header {
  padding-bottom: 1.4rem;
  margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--border);
}
.panel-title {
  font-family: var(--font-head);
  font-size: clamp(1rem, 3vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text);
  margin-bottom: 0.45rem;
}
.panel-sub {
  font-size: 0.9rem;
  color: var(--text2);
  line-height: 1.6;
}
.panel-sub em { color: var(--accent); font-style: normal; font-weight: 600; }

/* ── Input Grid ── */
.input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 560px) { .input-grid { grid-template-columns: 1fr; } }

.inp-group { display: flex; flex-direction: column; gap: 6px; }

.inp-label {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.wt-pill {
  padding: 0.1rem 0.5rem;
  background: rgba(232,25,44,0.12);
  border: 1px solid rgba(232,25,44,0.3);
  border-radius: 100px;
  font-size: 0.6rem;
  color: var(--accent);
  letter-spacing: 0.08em;
}
body.girls-theme .wt-pill {
  background: rgba(185,124,248,0.12);
  border-color: rgba(185,124,248,0.3);
}

.inp-wrap {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color 0.25s, box-shadow 0.25s;
  backdrop-filter: blur(12px);
}
.inp-wrap:focus-within { border-color: var(--accent); box-shadow: var(--glow); }

.inp-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  pointer-events: none;
  z-index: 1;
}

.inp-field {
  width: 100%;
  padding: 0.88rem 1rem 0.88rem 2.8rem;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}
.inp-field::placeholder { color: var(--text3); }

/* ── Weight Strip (LTPS info row) ── */
.weight-strip {
  display: flex;
  gap: 0;
  margin-bottom: 1.6rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(10px);
  flex-wrap: wrap;
}

.wcard {
  flex: 1;
  min-width: 80px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-right: 1px solid var(--border);
  transition: background 0.25s;
}
.wcard:last-child { border-right: none; }
.wcard:hover { background: var(--surface2); }

.wcard-ico  { font-size: 1.2rem; }
.wcard-name { font-family: var(--font-head); font-size: 0.65rem; letter-spacing: 0.08em; color: var(--text2); text-align: center; }
.wcard-wt   { font-size: 0.72rem; color: var(--text3); text-align: center; }
.wcard-wt strong { color: var(--accent); font-weight: 700; }

/* ── Formula Box ── */
.formula-box {
  margin-bottom: 1.5rem;
  padding: 1rem 1.3rem;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(10px);
  transition: border-color 0.3s;
  min-height: 58px;
}
.formula-box.has-formula { border-color: var(--accent2); box-shadow: var(--glow2); }
body.girls-theme .formula-box.has-formula { border-color: var(--accent2); box-shadow: var(--glow2); }

.formula-label {
  font-family: var(--font-head);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--text2);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.formula-text {
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  color: var(--accent2);
  line-height: 1.65;
  word-break: break-word;
}
.formula-text.placeholder { color: var(--text3); font-family: var(--font-body); }

/* ── Calculate Button ── */
.calc-btn {
  width: 100%;
  padding: 1.1rem;
  background: var(--btn-grad);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.3s;
  box-shadow: 0 4px 22px rgba(0,0,0,0.3);
}
.calc-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px var(--btn-glow); }
.calc-btn:active { transform: translateY(0); }

.calc-btn-glow {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.16), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.calc-btn:hover .calc-btn-glow { opacity: 1; }

/* ─────────────────────────────────────
   RESULT SECTION
───────────────────────────────────────*/
.result-section { margin-top: 2.8rem; animation: fadeUp 0.5s ease both; }

/* ── Ring ── */
.ring-wrap {
  position: relative;
  width: 196px; height: 196px;
  margin: 0 auto 2.2rem;
}

.ring-svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}

.ring-track {
  fill: none;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 11;
}

.ring-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 11;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.25,1,0.5,1),
              stroke 0.5s ease;
  filter: drop-shadow(0 0 9px var(--accent));
}

.ring-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
}

.ring-number {
  font-family: var(--font-head);
  font-size: 1.9rem; font-weight: 900;
  color: var(--text);
  letter-spacing: -0.02em;
  transition: color 0.5s;
}

.ring-caption {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text2);
}

/* ── Status Banner ── */
.status-banner {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  padding: 1.4rem 1.8rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  margin-bottom: 2.2rem;
  backdrop-filter: blur(16px);
  transition: background 0.5s, border-color 0.5s, box-shadow 0.5s;
}

.status-banner.is-safe   { background: linear-gradient(135deg,rgba(57,255,20,0.1),rgba(0,200,100,0.05));    border-color: rgba(57,255,20,0.4);    box-shadow: 0 0 32px rgba(57,255,20,0.14);    }
.status-banner.is-warn   { background: linear-gradient(135deg,rgba(255,170,0,0.1),rgba(255,100,0,0.05));    border-color: rgba(255,170,0,0.4);    box-shadow: 0 0 32px rgba(255,170,0,0.14);    }
.status-banner.is-danger { background: linear-gradient(135deg,rgba(232,25,44,0.1),rgba(180,0,30,0.05));     border-color: rgba(232,25,44,0.45);   box-shadow: 0 0 32px rgba(232,25,44,0.16);    }

body.girls-theme .status-banner.is-safe   { background: linear-gradient(135deg,rgba(134,239,172,0.1),rgba(80,200,120,0.05));  border-color: rgba(134,239,172,0.4); }
body.girls-theme .status-banner.is-warn   { background: linear-gradient(135deg,rgba(253,230,138,0.1),rgba(220,180,60,0.05));  border-color: rgba(253,230,138,0.4); }
body.girls-theme .status-banner.is-danger { background: linear-gradient(135deg,rgba(249,168,212,0.12),rgba(220,80,120,0.06)); border-color: rgba(249,168,212,0.45); }

.status-emoji { font-size: 2.2rem; flex-shrink: 0; }

.status-title {
  font-family: var(--font-head);
  font-size: clamp(1rem, 3vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.status-banner.is-safe   .status-title { color: var(--safe); text-shadow: 0 0 12px rgba(57,255,20,0.5); }
.status-banner.is-warn   .status-title { color: var(--warn); text-shadow: 0 0 12px rgba(255,170,0,0.5); }
.status-banner.is-danger .status-title { color: var(--danger); text-shadow: 0 0 12px rgba(232,25,44,0.5); }

.status-desc { font-size: 0.9rem; color: var(--text2); line-height: 1.55; }

/* ── Analysis Section ── */
.analysis-section { margin-bottom: 1.5rem; }
.analysis-title {
  font-family: var(--font-head);
  font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.1em; color: var(--text);
  margin-bottom: 1.2rem;
}

.analysis-grid { display: flex; flex-direction: column; gap: 1rem; }

/* ── Analysis Card ── */
.acard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  backdrop-filter: blur(14px);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.45s ease both;
}
.acard:hover { border-color: var(--accent); box-shadow: var(--glow); transform: translateY(-2px); }

/* Shimmer */
.acard::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,0.025),transparent);
  animation: shimmer 4s ease infinite;
  pointer-events: none;
}
@keyframes shimmer { 0%{left:-100%;} 100%{left:220%;} }

.acard-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.acard-ico  { font-size: 1.1rem; }
.acard-lbl  {
  font-family: var(--font-head); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text2);
}

.acard-value {
  font-family: var(--font-head);
  font-size: clamp(1.05rem,2.8vw,1.5rem);
  font-weight: 700;
  margin-bottom: 7px;
  transition: color 0.3s;
}
.acard-value.c-safe   { color: var(--safe);   text-shadow: 0 0 10px rgba(57,255,20,0.4); }
.acard-value.c-warn   { color: var(--warn);   text-shadow: 0 0 10px rgba(255,170,0,0.4); }
.acard-value.c-danger { color: var(--danger); text-shadow: 0 0 10px rgba(232,25,44,0.4); }

.acard-detail {
  font-size: 0.87rem;
  color: var(--text2);
  line-height: 1.65;
}
.acard-detail .hl { font-weight: 600; }
.acard-detail .hl.c-safe   { color: var(--safe); }
.acard-detail .hl.c-warn   { color: var(--warn); }
.acard-detail .hl.c-danger { color: var(--danger); }

/* Progress bar inside card */
.acard-bar {
  margin-top: 10px;
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 100px;
  overflow: hidden;
}
.acard-bar-fill {
  height: 100%;
  border-radius: 100px;
  width: 0;
  transition: width 1.3s cubic-bezier(0.25,1,0.5,1);
}
.acard-bar-fill.c-safe   { background: var(--safe);   box-shadow: 0 0 6px var(--safe); }
.acard-bar-fill.c-warn   { background: var(--warn);   box-shadow: 0 0 6px var(--warn); }
.acard-bar-fill.c-danger { background: var(--danger); box-shadow: 0 0 6px var(--danger); }

/* ── Alert / Warning Cards ── */
.warn-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius);
  margin-top: 1.5rem;
  animation: fadeUp 0.45s ease both;
  line-height: 1.65;
}

.danger-card {
  background: linear-gradient(135deg,rgba(232,25,44,0.12),rgba(180,0,30,0.06));
  border: 1px solid rgba(232,25,44,0.5);
  box-shadow: 0 0 28px rgba(232,25,44,0.12);
}
body.girls-theme .danger-card {
  background: linear-gradient(135deg,rgba(249,168,212,0.12),rgba(200,60,100,0.06));
  border-color: rgba(249,168,212,0.5);
}

.condo-card {
  background: linear-gradient(135deg,rgba(255,170,0,0.1),rgba(255,100,0,0.05));
  border: 1px solid rgba(255,170,0,0.45);
  box-shadow: 0 0 26px rgba(255,170,0,0.1);
}
body.girls-theme .condo-card {
  background: linear-gradient(135deg,rgba(253,230,138,0.1),rgba(230,180,50,0.05));
  border-color: rgba(253,230,138,0.45);
}

.warn-ico  { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.warn-text { font-size: 0.9rem; color: var(--text2); }
.warn-text strong { color: var(--text); }
.red-hl { color: var(--danger) !important; }

/* ─────────────────────────────────────
   FOOTER
───────────────────────────────────────*/
.app-footer {
  text-align: center;
  padding: 1.5rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.18);
  letter-spacing: 0.1em;
  position: relative; z-index: 2;
}

/* ─────────────────────────────────────
   TOAST
───────────────────────────────────────*/
.toast {
  position: fixed;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(90px);
  background: rgba(10,10,20,0.97);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.78rem 2rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text);
  z-index: 9999;
  white-space: nowrap;
  box-shadow: var(--glow);
  transition: transform 0.42s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ─────────────────────────────────────
   KEYFRAMES
───────────────────────────────────────*/
@keyframes fadeDown {
  from { opacity:0; transform: translateY(-28px); }
  to   { opacity:1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity:0; transform: translateY(20px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ─────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────*/
@media (max-width: 600px) {
  .theme-cards { flex-direction: column; align-items: center; }
  .theme-card  { width: 100%; max-width: 340px; }
  .status-banner { flex-direction: column; text-align: center; gap: 0.8rem; }
  .tab-btn { font-size: 0.7rem; padding: 0.82rem 1rem; min-width: unset; }
  .ring-wrap { width: 165px; height: 165px; }
  .ring-number { font-size: 1.55rem; }
  .weight-strip { display: grid; grid-template-columns: 1fr 1fr; }
  .header-brand { gap: 0.7rem; }
  .brand-title  { font-size: 0.68rem; }
}