:root{
  --bg: #0e1e32;
  --card: rgba(255,255,255,0.07);
  --stroke: rgba(255,255,255,0.12);
  --text: #e9eef7;
  --muted: rgba(233,238,247,0.72);
  --green:#32b561;
  --blue:#2b5c9e;
  --danger:#ff004e;

  /* topbar */
  --topbar-bg: rgba(14,30,50,0.55);
}

/* ===== LIGHT THEME OVERRIDES ===== */
:root[data-theme="light"]{
  --bg: #f4f7fb;
  --card: rgba(255,255,255,0.92);
  --stroke: rgba(12,29,48,0.14);
  --text: #0c1d30;
  --muted: rgba(12,29,48,0.68);

  --topbar-bg: rgba(255,255,255,0.75);
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}

.bg{
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(50,181,97,0.18), transparent 60%),
    radial-gradient(1000px 700px at 90% 10%, rgba(43,92,158,0.20), transparent 55%),
    var(--bg);
}

/* light theme background looks cleaner if gradients are softer */
:root[data-theme="light"] .bg{
  background:
    radial-gradient(1100px 520px at 12% 0%, rgba(50,181,97,0.12), transparent 62%),
    radial-gradient(980px 640px at 88% 8%, rgba(43,92,158,0.10), transparent 58%),
    var(--bg);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--stroke);
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 9999;
}

.brand{ display:flex; gap:12px; align-items:center; }
.brand-logo{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
:root[data-theme="light"] .brand-logo{
  box-shadow: 0 10px 24px rgba(12,29,48,0.10);
}

.brand-title{ font-weight:800; letter-spacing:0.2px; }
.brand-subtitle{ font-size:12px; color: var(--muted); margin-top:2px; }

.container{ max-width:1100px; margin:0 auto; padding:22px 16px 40px; }
.card{
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, var(--card), rgba(255,255,255,0.05));
  border-radius:18px;
  padding:18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
}
:root[data-theme="light"] .card{
  box-shadow: 0 18px 50px rgba(12,29,48,0.10);
}

.h1{ margin:0 0 10px; font-size:28px; }
.h1.compact{ margin-bottom:6px; }
.h2{ margin:0 0 10px; font-size:18px; color: rgba(233,238,247,0.92); }
:root[data-theme="light"] .h2{ color: rgba(12,29,48,0.92); }

.p{ margin:0 0 12px; color: rgba(233,238,247,0.88); line-height:1.45; }
:root[data-theme="light"] .p{ color: rgba(12,29,48,0.86); }

.muted{ color: var(--muted); }
.small{ font-size:12px; }
.kicker{ font-size:12px; color: rgba(233,238,247,0.6); text-transform: uppercase; letter-spacing:0.12em; }
:root[data-theme="light"] .kicker{ color: rgba(12,29,48,0.55); }

.row{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }

.btn{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  pointer-events: auto;
}
.btn:hover{ background: rgba(255,255,255,0.10); }
.btn:active{ transform: translateY(1px); }

:root[data-theme="light"] .btn{
  background: rgba(12,29,48,0.04);
}
:root[data-theme="light"] .btn:hover{
  background: rgba(12,29,48,0.07);
}

.btn.primary{
  background: rgba(50,181,97,0.18);
  border-color: rgba(50,181,97,0.35);
}
.btn.primary:hover{ background: rgba(50,181,97,0.26); }

.btn.ghost{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.top-actions{ display:flex; gap:10px; align-items:center; }

.teacher-grid{
  display:grid;
  grid-template-columns: 1.6fr 0.9fr;
  gap:16px;
}
@media (max-width: 980px){
  .teacher-grid{ grid-template-columns: 1fr; }
}

.teacher-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 12px;
}

.qrbox{
  width:190px;
  padding:10px;
  border:1px dashed rgba(233,238,247,0.22);
  border-radius:14px;
  background: rgba(255,255,255,0.05);
  text-align:center;
}
#qrcode img{ border-radius:10px; }

.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(233,238,247,0.14);
  background: rgba(255,255,255,0.06);
}
.chip-emoji{ font-size:18px; }
.chip-label{ font-weight:700; }
.chip-val{
  margin-left:4px;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(43,92,158,0.25);
  border:1px solid rgba(43,92,158,0.35);
  font-weight:800;
}

.weather-stage{
  position:relative;
  height:420px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(233,238,247,0.14);
  background: rgba(255,255,255,0.04);
}
.weather-stage .sky-gradient{
  position:absolute; inset:0;
  background: radial-gradient(900px 500px at 30% 20%, rgba(255,255,255,0.18), transparent 55%),
              radial-gradient(1000px 700px at 80% 30%, rgba(43,92,158,0.25), transparent 60%);
  opacity:0.95;
}

.weather-stage[data-mood="sun"] .sky-gradient{ filter: saturate(1.2) brightness(1.05); }
.weather-stage[data-mood="cloud"] .sky-gradient{ filter: saturate(0.9) brightness(0.95); }
.weather-stage[data-mood="rain"] .sky-gradient{ filter: saturate(0.85) brightness(0.90); }
.weather-stage[data-mood="storm"] .sky-gradient{ filter: saturate(0.75) brightness(0.85) contrast(1.05); }

.cloud{
  position:absolute;
  top: 70px;
  width: 220px; height: 70px;
  background: rgba(255,255,255,0.20);
  border:1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  filter: blur(0.2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.cloud::before, .cloud::after{
  content:"";
  position:absolute;
  background: rgba(255,255,255,0.22);
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
}
.cloud::before{ width:90px; height:90px; left:28px; top:-45px; }
.cloud::after{ width:110px; height:110px; left:90px; top:-55px; }

.c1{ left:-240px; top:70px; animation: drift1 26s linear infinite; }
.c2{ left:-260px; top:150px; transform: scale(0.85); opacity:0.85; animation: drift2 32s linear infinite; }
.c3{ left:-280px; top:230px; transform: scale(0.72); opacity:0.70; animation: drift3 40s linear infinite; }

@keyframes drift1 { to { transform: translateX(1400px); } }
@keyframes drift2 { to { transform: translateX(1500px) scale(0.85); } }
@keyframes drift3 { to { transform: translateX(1600px) scale(0.72); } }

.big-emoji{
  position:absolute;
  left:50%; top:52%;
  transform: translate(-50%,-50%);
  font-size:110px;
  text-shadow: 0 18px 40px rgba(0,0,0,0.30);
  user-select:none;
}

.hint{
  position:absolute;
  left:50%; bottom:64px;
  transform: translateX(-50%);
  padding:10px 14px;
  border-radius:999px;
  background: rgba(14,30,50,0.55);
  border:1px solid rgba(233,238,247,0.14);
  color: rgba(233,238,247,0.88);
  font-weight:700;
}

.footer-brand{
  position:absolute;
  left:14px; bottom:12px;
  font-size:12px;
  color: rgba(233,238,247,0.62);
}
.footer-strong{ font-weight:900; color: rgba(233,238,247,0.82); }

.particle{
  position:absolute;
  top:-30px;
  font-size:34px;
  animation: fall 2.2s ease-in forwards;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.18));
}
@keyframes fall{
  0%{ transform: translateY(0) rotate(-6deg); opacity:0; }
  10%{ opacity:1; }
  100%{ transform: translateY(520px) rotate(10deg); opacity:0; }
}

.badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(43,92,158,0.22);
  border:1px solid rgba(43,92,158,0.32);
  font-weight:800;
  margin-bottom:10px;
}

.grid4{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
  margin-top:12px;
}
.wbtn{
  border:1px solid rgba(233,238,247,0.16);
  background: rgba(255,255,255,0.06);
  border-radius:16px;
  padding:16px;
  cursor:pointer;
  text-align:left;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.wbtn:hover{ background: rgba(255,255,255,0.10); }
.wbtn:active{ transform: translateY(1px); }
.wbtn .emoji{ font-size:34px; }
.wbtn .label{ margin-top:6px; font-weight:900; }
.wbtn.active{
  border-color: rgba(50,181,97,0.55);
  background: rgba(50,181,97,0.16);
}

.status{ margin-top:14px; font-weight:700; }
.student-footer{ margin-top:14px; }

/* --- stable chips layout (4 fixed) --- */
.chips{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
  align-items:stretch;
}

@media (max-width: 980px){
  .chips{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.chip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  min-height:54px;
  border-radius:14px;
  border:1px solid rgba(233,238,247,0.14);
  background: rgba(255,255,255,0.06);
}

.chip-emoji{ font-size:18px; flex:0 0 auto; }
.chip-label{ font-weight:800; flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.chip-val{
  flex:0 0 34px;         /* фіксуємо місце під цифру */
  text-align:center;
  padding:4px 0;
  border-radius:999px;
  background: rgba(43,92,158,0.25);
  border:1px solid rgba(43,92,158,0.35);
  font-weight:900;
}
.btn.pulse{
  border-color: rgba(50,181,97,0.55);
  box-shadow: 0 0 0 0 rgba(50,181,97,0.35);
  animation: pulse 1.2s infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(50,181,97,0.35); }
  70%{ box-shadow: 0 0 0 14px rgba(50,181,97,0.00); }
  100%{ box-shadow: 0 0 0 0 rgba(50,181,97,0.00); }
}
.topbar{ z-index: 9999; }
.btn{ pointer-events: auto; }

/* ===== SUMMARY: vertical list, readable labels ===== */

#chips.chips{
  display:flex !important;
  flex-direction: column !important;
  gap:10px !important;
}

/* один рядок = один стан */
#chips.chips .chip{
  display:grid !important;
  grid-template-columns: 36px 1fr 40px;
  align-items:center;
  gap:10px;

  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(233,238,247,0.14);
  background: rgba(255,255,255,0.06);
}

/* емодзі */
#chips.chips .chip-emoji{
  font-size:20px;
  text-align:center;
}

/* ТЕКСТ: тепер він гарантовано видно */
#chips.chips .chip-label{
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color: rgba(233,238,247,0.95);
}

/* цифра праворуч — як і було */
#chips.chips .chip-val{
  text-align:center;
  font-weight:900;
  padding:4px 0;
  border-radius:999px;
  background: rgba(43,92,158,0.25);
  border:1px solid rgba(43,92,158,0.35);
}
/* ===== Index hero layout ===== */

.hero-card{
  padding: 0;
  overflow: hidden;
}

.hero-media{
  position: relative;
  height: 240px;
}

.hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(14,30,50,0.10), rgba(14,30,50,0.82)),
    radial-gradient(900px 280px at 18% 40%, rgba(50,181,97,0.18), transparent 55%),
    radial-gradient(700px 260px at 78% 40%, rgba(43,92,158,0.18), transparent 55%);
}

.hero-content{
  display:grid;
  grid-template-columns: 1.35fr 0.75fr;
  gap: 16px;
  padding: 18px;
  margin-top: -56px;
  position: relative;
}

@media (max-width: 980px){
  .hero-content{
    grid-template-columns: 1fr;
    margin-top: -44px;
  }
}

.pill{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(233,238,247,0.16);
  color: rgba(233,238,247,0.86);
  font-weight: 800;
  font-size: 12px;
}

.hero-title{
  margin: 12px 0 10px;
  font-size: 34px;
  letter-spacing: 0.2px;
}

@media (max-width: 980px){
  .hero-title{ font-size: 28px; }
}

.hero-text{
  margin: 0 0 12px;
  color: rgba(233,238,247,0.88);
  line-height: 1.5;
}

.hero-mini{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
  color: rgba(233,238,247,0.72);
  font-weight: 700;
  font-size: 12px;
}

.mini-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(50,181,97,0.85);
  box-shadow: 0 0 0 6px rgba(50,181,97,0.12);
}

.start-card{
  border-radius: 18px;
  border: 1px solid rgba(233,238,247,0.16);
  background: rgba(14,30,50,0.62);
  backdrop-filter: blur(10px);
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
}

.start-title{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(233,238,247,0.62);
}

.start-mode{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
}

.start-note{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
}

.btn-big{
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  font-size: 15px;
  border-radius: 14px;
}

.start-foot{
  margin-top: 10px;
}

/* ===== Index info block ===== */

.info-card{
  margin-top: 14px;
}

.info-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 980px){
  .info-grid{ grid-template-columns: 1fr; }
}

.info-item{
  display:flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(233,238,247,0.14);
  background: rgba(255,255,255,0.05);
}

.info-ico{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(43,92,158,0.22);
  border: 1px solid rgba(43,92,158,0.30);
}

.info-txt{
  color: rgba(233,238,247,0.86);
  line-height: 1.35;
}

.panel-vote{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(233,238,247,0.12);
}

.panel-title{
  font-weight: 900;
  margin-bottom: 10px;
  color: rgba(233,238,247,0.92);
}

.panel-actions{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}

.pbtn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(233,238,247,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(233,238,247,0.92);
  font-weight: 900;
  cursor: pointer;
  user-select:none;
}

.pbtn span{ font-size: 14px; }

.pbtn:active{ transform: scale(0.99); }

.panel-row{
  display:flex;
  gap:10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
/* ===== Panel voting buttons (teacher) ===== */

.panel-actions{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top: 8px;
}

.pbtn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding: 14px 12px;
  border-radius: 14px;

  border: 1px solid rgba(233,238,247,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(233,238,247,0.92);

  font-weight: 900;
  font-size: 14px;

  cursor: pointer;
  user-select:none;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
}

.pbtn:hover{
  background: rgba(255,255,255,0.085);
  border-color: rgba(50,181,97,0.28);
}

.pbtn:active{
  transform: scale(0.99);
}

.pbtn:disabled{
  opacity: .6;
  cursor: default;
}

.pbtn span{
  white-space: nowrap;
}

.panel-row{
  margin-top: 10px;
}

.btn-full{
  width: 100%;
}

/* мобілки: 1 колонка */
@media (max-width: 520px){
  .panel-actions{ grid-template-columns: 1fr; }
}
/* ===== QR Modal ===== */

.qr-clickable{
  cursor: zoom-in;
}

.qr-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.qr-modal[hidden]{
  display: none;
}

.qr-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(10,18,30,0.85);
  backdrop-filter: blur(4px);
}

.qr-modal-content{
  position: relative;
  height:100%;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.qr-modal-content canvas,
.qr-modal-content img{
  width: min(80vw, 420px);
  height: auto;
}

.qr-modal-hint{
  color: rgba(233,238,247,0.75);
  font-size: 14px;
}
/* ===== Light theme polish for /reflection/index ===== */
:root[data-theme="light"] .card{
  background: rgba(255,255,255,0.92);
}

:root[data-theme="light"] .hero-card{
  box-shadow: 0 18px 55px rgba(12,29,48,0.10);
}

/* робимо читабельнішими наклейку + підзаголовки */
:root[data-theme="light"] .pill{
  color: rgba(12,29,48,0.88);
  background: rgba(12,29,48,0.06);
  border: 1px solid rgba(12,29,48,0.12);
}

:root[data-theme="light"] .hero-title{
  color: #0c1d30;
}

:root[data-theme="light"] .hero-text{
  color: rgba(12,29,48,0.78);
}

/* міні-кроки під заголовком: зараз надто бліді */
:root[data-theme="light"] .hero-mini .mini-item{
  color: rgba(12,29,48,0.70);
}
:root[data-theme="light"] .hero-mini .mini-dot{
  opacity: .45;
}

/* затемнення поверх hero-зображення у світлій темі — менш агресивне */
:root[data-theme="light"] .hero-overlay{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.55) 60%,
    rgba(255,255,255,0.78) 100%
  );
}

/* права старт-картка: у світлій темі робимо "паперовою", а не темною */
:root[data-theme="light"] .start-card{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(12,29,48,0.14);
  box-shadow: 0 16px 45px rgba(12,29,48,0.12);
}
:root[data-theme="light"] .start-title,
:root[data-theme="light"] .start-mode{
  color: rgba(12,29,48,0.88);
}
:root[data-theme="light"] .start-note,
:root[data-theme="light"] .start-foot{
  color: rgba(12,29,48,0.64);
}

/* кнопка "Запустити" — щоб в світлій не виглядала блякло */
:root[data-theme="light"] .btn.primary{
  background: rgba(50,181,97,0.14);
  border-color: rgba(50,181,97,0.28);
}
:root[data-theme="light"] .btn.primary:hover{
  background: rgba(50,181,97,0.20);
}

/* ===== Центрування/баланс hero-сітки ===== */
.hero-content{
  align-items: center;
}

.hero-right{
  display: flex;
  justify-content: flex-end;
}

/* якщо в тебе там grid — піджимаємо праву колонку трохи, виглядає рівніше */
@media (min-width: 980px){
  .hero-content{
    grid-template-columns: 1.55fr 0.95fr;
    gap: 18px;
  }
}

/* ===== Light theme – pass #2 (readability + remove seam line) ===== */

/* 1) Прибираємо "шов" (той 1px) під hero-зображенням */
:root[data-theme="light"] .hero-media{
  background: transparent;
  border: 0 !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .hero-img{
  display:block;            /* інколи inline-img дає 1px gap */
  transform: translateZ(0); /* прибирає артефакти фільтрів */
}

/* Якщо шов створює overlay — робимо його без різкої межі */
:root[data-theme="light"] .hero-overlay{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.35) 55%,
    rgba(255,255,255,0.82) 100%
  );
}

/* 2) Зсуваємо композицію картинки трохи правіше (герой/клас вирівнюється) */
@media (min-width: 980px){
  :root[data-theme="light"] .hero-img{
    object-position: 60% 40%;
  }
}

/* 3) “Для чого це” — повертаємо нормальний контраст (зараз воно як disabled) */
:root[data-theme="light"] .info-card{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(12,29,48,0.12);
}

:root[data-theme="light"] .info-item{
  background: rgba(12,29,48,0.03);
  border: 1px solid rgba(12,29,48,0.10);
}

:root[data-theme="light"] .info-ico{
  background: rgba(12,29,48,0.06);
  border: 1px solid rgba(12,29,48,0.10);
}

:root[data-theme="light"] .info-txt{
  color: rgba(12,29,48,0.82);
}
:root[data-theme="light"] .info-txt b{
  color: #0c1d30;
}

/* на випадок якщо десь залишилась "заглушка" через opacity */
:root[data-theme="light"] .info-card,
:root[data-theme="light"] .info-item,
:root[data-theme="light"] .info-ico,
:root[data-theme="light"] .info-txt{
  opacity: 1 !important;
  filter: none !important;
}

/* 4) Легка підкрутка hero-плашки, щоб не губилась на білому */
:root[data-theme="light"] .pill{
  background: rgba(12,29,48,0.07);
  border-color: rgba(12,29,48,0.14);
  color: rgba(12,29,48,0.88);
}

:root[data-theme="light"] .hero-text{
  color: rgba(12,29,48,0.78);
}
/* =========================================================
   THEME (dark/light) — shared for reflection pages
   ========================================================= */
:root{
  color-scheme: dark;
}

/* Light theme variables */
:root[data-theme="light"]{
  color-scheme: light;

  --bg: #f3f6fb;
  --card: rgba(255,255,255,0.96);
  --card2: rgba(255,255,255,0.88);

  --text: #0c1d30;
  --muted: rgba(12,29,48,0.70);

  --stroke: rgba(12,29,48,0.14);
  --shadow: 0 16px 44px rgba(12,29,48,0.10);

  /* акцент (ваш зелений) лишаємо */
  --accent: #32b561;
}

/* Background for light */
:root[data-theme="light"] .bg{
  background:
    radial-gradient(1200px 700px at 20% 15%, rgba(50,181,97,0.10), transparent 60%),
    radial-gradient(1000px 600px at 80% 20%, rgba(43,92,158,0.10), transparent 60%),
    radial-gradient(900px 700px at 50% 100%, rgba(12,29,48,0.06), transparent 55%),
    var(--bg);
}

/* Cards in light */
:root[data-theme="light"] .card{
  background: var(--card);
  box-shadow: var(--shadow);
}

/* Topbar in light (щоб не було “брудної” полоси) */
:root[data-theme="light"] .topbar{
  background: rgba(255,255,255,0.70);
  border-bottom: 1px solid rgba(12,29,48,0.10);
  backdrop-filter: blur(10px);
}

/* Buttons in light */
:root[data-theme="light"] .btn{
  background: rgba(12,29,48,0.04);
}
:root[data-theme="light"] .btn:hover{
  background: rgba(12,29,48,0.07);
}

/* Make sure anchors never underline inside btn */
.btn{
  text-decoration: none;
}

/* Theme icon button (small rounded) */
.btn.icon{
  padding: 10px 12px;
  min-width: 44px;
  justify-content: center;
}

/* Danger button — одинаково “спокойная”, без токсичности */
.btn.danger{
  color: #fff;
}
:root[data-theme="light"] .btn.danger{
  background: rgba(255,0,78,0.18);
  border-color: rgba(255,0,78,0.34);
  color: #0c1d30;
}
:root[data-theme="light"] .btn.danger:hover{
  background: rgba(255,0,78,0.24);
}

/* OPTIONAL: якщо десь “підсумок/рядки” виглядають занадто темно в light */
:root[data-theme="light"] .pill{
  background: rgba(12,29,48,0.06);
  border-color: rgba(12,29,48,0.12);
  color: rgba(12,29,48,0.82);
}

/* ===== Light theme (teacher / weather) ===== */
html[data-theme="light"]{
  --bg: #f3f6fb;
  --card: rgba(255,255,255,0.92);
  --stroke: rgba(12,29,48,0.12);
  --text: #0c1d30;
  --muted: rgba(12,29,48,0.62);
}

html[data-theme="light"] body.bg{
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(50,181,97,0.14), transparent 60%),
    radial-gradient(1000px 700px at 90% 10%, rgba(43,92,158,0.14), transparent 55%),
    var(--bg);
}

html[data-theme="light"] .topbar{
  background: rgba(255,255,255,0.75);
  border-bottom: 1px solid var(--stroke);
}

html[data-theme="light"] .card{
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.86));
  box-shadow: 0 18px 50px rgba(12,29,48,0.12);
}

html[data-theme="light"] .btn{
  background: rgba(12,29,48,0.04);
  border-color: rgba(12,29,48,0.12);
  color: var(--text);
}
html[data-theme="light"] .btn:hover{ background: rgba(12,29,48,0.06); }

/* danger в світлій — приглушено-червоно, без "токсичного" тексту */
html[data-theme="light"] .btn.danger{
  background: rgba(255,0,78,0.10);
  border-color: rgba(255,0,78,0.28);
  color: var(--text);
}
html[data-theme="light"] .btn.danger:hover{ background: rgba(255,0,78,0.14); }

/* щоб "Назад" не підкреслювало */
a.btn, a.btn:hover, a.btn:visited{ text-decoration:none; }

/* ---------- Light theme readability fixes (chips + weather sidebar) ---------- */
[data-theme="light"] #chips.chips .chip{
  background: rgba(12,29,48,0.035);
  border-color: rgba(12,29,48,0.14);
}
[data-theme="light"] #chips.chips .chip-label{
  color: rgba(12,29,48,0.92);
}
[data-theme="light"] #chips.chips .chip-count{
  background: rgba(12,29,48,0.08);
  color: rgba(12,29,48,0.92);
  border-color: rgba(12,29,48,0.16);
}
[data-theme="light"] #chips.chips .hint{
  color: rgba(12,29,48,0.72);
}

/* ---------- Buttons: no underline + consistent danger across themes ---------- */
a.btn, a.btn:visited{ text-decoration: none; }
a.btn:hover{ text-decoration: none; }

.btn.danger{
  background: rgba(255,0,78,0.12);
  border-color: rgba(255,0,78,0.32);
  color: rgba(255,255,255,0.94); /* білий текст, як ти і хотів */
}
.btn.danger:hover{ background: rgba(255,0,78,0.18); }

/* =========================
   LIGHT THEME: panel-vote fix
   ========================= */

/* працює, якщо тема перемикається через data-theme="light" на html або body */
html[data-theme="light"] .panel-vote,
body[data-theme="light"] .panel-vote{
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(12,29,48,.10) !important;
  box-shadow: 0 18px 45px rgba(12,29,48,.10) !important;
}

html[data-theme="light"] .panel-vote .panel-title,
body[data-theme="light"] .panel-vote .panel-title{
  color: rgba(12,29,48,.92) !important;
}

html[data-theme="light"] .panel-vote .muted,
html[data-theme="light"] .panel-vote .small,
body[data-theme="light"] .panel-vote .muted,
body[data-theme="light"] .panel-vote .small{
  color: rgba(12,29,48,.70) !important;
}

/* кнопки ручного голосування */
html[data-theme="light"] .panel-vote .pbtn,
body[data-theme="light"] .panel-vote .pbtn{
  background: rgba(12,29,48,.035) !important;
  border: 1px solid rgba(12,29,48,.16) !important;
  color: rgba(12,29,48,.92) !important;
  box-shadow: 0 10px 22px rgba(12,29,48,.08) !important;
}

html[data-theme="light"] .panel-vote .pbtn span,
body[data-theme="light"] .panel-vote .pbtn span{
  color: rgba(12,29,48,.92) !important;
}

html[data-theme="light"] .panel-vote .pbtn:hover,
body[data-theme="light"] .panel-vote .pbtn:hover{
  background: rgba(12,29,48,.06) !important;
  border-color: rgba(12,29,48,.22) !important;
}

html[data-theme="light"] .panel-vote .pbtn:active,
body[data-theme="light"] .panel-vote .pbtn:active{
  transform: translateY(1px) !important;
}
/* =========================
   panel-vote — only top border (light theme)
   ========================= */

html[data-theme="light"] .panel-vote,
body[data-theme="light"] .panel-vote{
  border: none !important;
  border-top: 1px solid rgba(12,29,48,.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-top: 14px;
}
/* =========================
   footer brand — light theme color fix
   ========================= */

html[data-theme="light"] .footer-brand,
body[data-theme="light"] .footer-brand{
  color: rgba(12,29,48,.70) !important;
}

html[data-theme="light"] .footer-brand .footer-strong,
body[data-theme="light"] .footer-brand .footer-strong{
  color: rgba(12,29,48,.95) !important;
  font-weight: 600;
}
/* =========================
   Weather FX (teacher only)
   ========================= */
#rainFx{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 3; /* поверх фону, але під UI */
  opacity: 0;
  transition: opacity .25s ease;
}

#lightningFx{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4; /* над дощем */
  opacity: 0;
  background: rgba(255,255,255,.0);
}

/* легка “темніша атмосфера” коли хмарно/дощ/гроза */
body.wx-cloud .card,
body.wx-rain .card,
body.wx-storm .card{
  backdrop-filter: saturate(1.05);
}

/* вмикання/вимикання дощу */
body.wx-rain #rainFx{ opacity: .60; }
body.wx-storm #rainFx{ opacity: .85; }

/* спалах блискавки — клас додає JS */
#lightningFx.flash{
  animation: lightningFlash 420ms ease;
}

@keyframes lightningFlash{
  0%   { opacity: 0; background: rgba(255,255,255,0.0); }
  10%  { opacity: 1; background: rgba(255,255,255,0.55); }
  30%  { opacity: .2; background: rgba(255,255,255,0.10); }
  45%  { opacity: 1; background: rgba(255,255,255,0.45); }
  100% { opacity: 0; background: rgba(255,255,255,0.0); }
}

/* overlay блискавки */
.lightning-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: rgba(255,255,255,.85);
  mix-blend-mode: overlay;
  z-index: 9999;
}

.lightning-overlay.flash{
  animation: lightningFlash 900ms ease-out;
}

@keyframes lightningFlash{
  0%   { opacity: 0; }
  12%  { opacity: .75; }
  22%  { opacity: .15; }
  35%  { opacity: .55; }
  48%  { opacity: .10; }
  100% { opacity: 0; }
}

/* якщо користувач має reduced-motion — не блимаємо */
@media (prefers-reduced-motion: reduce){
  .lightning-overlay.flash{ animation: none; }
}
/* ===== Weather overlays ===== */
#rainFx{
  position: fixed;
  inset: 0;
  z-index: 40;            /* над фоном сцени */
  pointer-events: none;
}

#lightningFx{
  position: fixed;
  inset: 0;
  z-index: 41;            /* над дощем */
  pointer-events: none;
  opacity: 0;
  background: rgba(255,255,255,.92); /* сила блискавка  */
  mix-blend-mode: screen; /* робить спалах блискавка “живішим” overlay — м’який, атмосферний screen — яскравіший, “фотоспалах  normal — просто біла плашка*/
}

/* один спалах = 2 короткі “удари” */
#lightningFx.flash{
  animation: lightningFlash 400ms ease-out; /* час життя блискавка  */
}

@keyframes lightningFlash{ /* час життя блискавка */
  0%   { opacity: 0; }
  12%  { opacity: .8; } /* перший удар блискавка */
  28%  { opacity: 0; }
  45%  { opacity: .55; } /* робити завжди слабшим, ніж перший блискавка */
  100% { opacity: 0; }
}