:root{
  --blue:#00A2E8;
  --blue-dark:#0B7FBB;
  --orange:#FF7F27;
  --orange-dark:#E06A15;
  --ink:#0B1B2B;
  --ink-soft:#132A42;
  --paper:#F6F9FC;
  --card:#FFFFFF;
  --line:#E3E8F0;
  --text:#16202C;
  --muted:#5B6B7C;
  --radius:14px;
  --shadow: 0 10px 30px rgba(11,27,43,0.08);
  font-family:"Inter",system-ui,sans-serif;
}

/* ============ MARKETPLACE THEMES ============
   Purchased/equipped via the Marketplace; applied by setting
   body[data-theme="..."] in app.js. Default theme = no attribute. */
body[data-theme="nature"]{
  --blue:#2F9E44; --blue-dark:#217A33; --orange:#69DB7C; --orange-dark:#37B24D;
  --paper:#F1FBF3; --ink:#0B2416; --ink-soft:#123A20; --line:#D8F0DE;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23217A33' stroke-width='1.6' opacity='0.08'%3E%3Crect x='36' y='54' width='34' height='34' rx='6' transform='rotate(-12 53 71)'/%3E%3Crect x='214' y='36' width='22' height='22' rx='5' transform='rotate(18 225 47)'/%3E%3Crect x='132' y='222' width='48' height='30' rx='8'/%3E%3Crect x='248' y='178' width='20' height='20' rx='4' transform='rotate(-20 258 188)'/%3E%3C/g%3E%3Cg fill='%23217A33' opacity='0.14' font-family='Poppins, sans-serif' font-weight='700'%3E%3Ctext x='86' y='150' font-size='30' transform='rotate(-6 86 150)'%3E&%23960;%3C/text%3E%3Ctext x='196' y='96' font-size='26' transform='rotate(10 196 96)'%3E&%238721;%3C/text%3E%3Ctext x='30' y='226' font-size='24'%3E&%238730;%3C/text%3E%3Ctext x='168' y='276' font-size='28' transform='rotate(-8 168 276)'%3E&%23215;%3C/text%3E%3Ctext x='250' y='128' font-size='22'%3E&%23247;%3C/text%3E%3Ctext x='58' y='34' font-size='20'%3E+%3C/text%3E%3Ctext x='118' y='196' font-size='22' transform='rotate(5 118 196)'%3E&%238734;%3C/text%3E%3Ctext x='276' y='262' font-size='20' transform='rotate(-12 276 262)'%3E=%3C/text%3E%3C/g%3E%3C/svg%3E");
}
body[data-theme="rock"]{
  --blue:#1A1A1A; --blue-dark:#000000; --orange:#FF2D55; --orange-dark:#C81E45;
  --paper:#F3F3F3; --ink:#0A0A0A; --ink-soft:#1A1A1A; --line:#DDDDDD;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23C81E45' stroke-width='1.6' opacity='0.08'%3E%3Crect x='36' y='54' width='34' height='34' rx='6' transform='rotate(-12 53 71)'/%3E%3Crect x='214' y='36' width='22' height='22' rx='5' transform='rotate(18 225 47)'/%3E%3Crect x='132' y='222' width='48' height='30' rx='8'/%3E%3Crect x='248' y='178' width='20' height='20' rx='4' transform='rotate(-20 258 188)'/%3E%3C/g%3E%3Cg fill='%23C81E45' opacity='0.14' font-family='Poppins, sans-serif' font-weight='700'%3E%3Ctext x='86' y='150' font-size='30' transform='rotate(-6 86 150)'%3E&%23960;%3C/text%3E%3Ctext x='196' y='96' font-size='26' transform='rotate(10 196 96)'%3E&%238721;%3C/text%3E%3Ctext x='30' y='226' font-size='24'%3E&%238730;%3C/text%3E%3Ctext x='168' y='276' font-size='28' transform='rotate(-8 168 276)'%3E&%23215;%3C/text%3E%3Ctext x='250' y='128' font-size='22'%3E&%23247;%3C/text%3E%3Ctext x='58' y='34' font-size='20'%3E+%3C/text%3E%3Ctext x='118' y='196' font-size='22' transform='rotate(5 118 196)'%3E&%238734;%3C/text%3E%3Ctext x='276' y='262' font-size='20' transform='rotate(-12 276 262)'%3E=%3C/text%3E%3C/g%3E%3C/svg%3E");
}
body[data-theme="galaxy"]{
  --blue:#7C4DFF; --blue-dark:#5E35B1; --orange:#FF6EC7; --orange-dark:#D6409F;
  --paper:#F4F0FF; --card:#FBFAFF; --ink:#160A33; --ink-soft:#241246; --line:#E4DBFF;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%235E35B1' stroke-width='1.6' opacity='0.08'%3E%3Crect x='36' y='54' width='34' height='34' rx='6' transform='rotate(-12 53 71)'/%3E%3Crect x='214' y='36' width='22' height='22' rx='5' transform='rotate(18 225 47)'/%3E%3Crect x='132' y='222' width='48' height='30' rx='8'/%3E%3Crect x='248' y='178' width='20' height='20' rx='4' transform='rotate(-20 258 188)'/%3E%3C/g%3E%3Cg fill='%235E35B1' opacity='0.14' font-family='Poppins, sans-serif' font-weight='700'%3E%3Ctext x='86' y='150' font-size='30' transform='rotate(-6 86 150)'%3E&%23960;%3C/text%3E%3Ctext x='196' y='96' font-size='26' transform='rotate(10 196 96)'%3E&%238721;%3C/text%3E%3Ctext x='30' y='226' font-size='24'%3E&%238730;%3C/text%3E%3Ctext x='168' y='276' font-size='28' transform='rotate(-8 168 276)'%3E&%23215;%3C/text%3E%3Ctext x='250' y='128' font-size='22'%3E&%23247;%3C/text%3E%3Ctext x='58' y='34' font-size='20'%3E+%3C/text%3E%3Ctext x='118' y='196' font-size='22' transform='rotate(5 118 196)'%3E&%238734;%3C/text%3E%3Ctext x='276' y='262' font-size='20' transform='rotate(-12 276 262)'%3E=%3C/text%3E%3C/g%3E%3C/svg%3E");
}
body[data-theme="rainbow"]{
  --blue:#8E2DE2; --blue-dark:#6A11CB; --orange:#FF7E5F; --orange-dark:#FEB47B;
  --paper:#FFF8F0; --ink:#2B0B3F; --ink-soft:#3D1656; --line:#FFE3D0;
  --rainbow-gradient: linear-gradient(120deg,
    #FF5F6D 0%, #FFA94D 20%, #FFD93D 40%, #4DD599 60%, #4DA6FF 80%, #B84DFF 100%);
  --rainbow-shadow: 0 6px 18px rgba(184,77,255,.22), 0 2px 8px rgba(255,95,109,.18);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke-width='1.6' opacity='0.09'%3E%3Crect x='36' y='54' width='34' height='34' rx='6' transform='rotate(-12 53 71)' stroke='%23FF5F6D'/%3E%3Crect x='214' y='36' width='22' height='22' rx='5' transform='rotate(18 225 47)' stroke='%234DA6FF'/%3E%3Crect x='132' y='222' width='48' height='30' rx='8' stroke='%23FFD93D'/%3E%3Crect x='248' y='178' width='20' height='20' rx='4' transform='rotate(-20 258 188)' stroke='%23B84DFF'/%3E%3C/g%3E%3Cg font-family='Poppins, sans-serif' font-weight='700' opacity='0.16'%3E%3Ctext x='86' y='150' font-size='30' transform='rotate(-6 86 150)' fill='%23FF5F6D'%3E&%23960;%3C/text%3E%3Ctext x='196' y='96' font-size='26' transform='rotate(10 196 96)' fill='%23FFA94D'%3E&%238721;%3C/text%3E%3Ctext x='30' y='226' font-size='24' fill='%23FFD93D'%3E&%238730;%3C/text%3E%3Ctext x='168' y='276' font-size='28' transform='rotate(-8 168 276)' fill='%234DD599'%3E&%23215;%3C/text%3E%3Ctext x='250' y='128' font-size='22' fill='%234DA6FF'%3E&%23247;%3C/text%3E%3Ctext x='58' y='34' font-size='20' fill='%23B84DFF'%3E+%3C/text%3E%3Ctext x='118' y='196' font-size='22' transform='rotate(5 118 196)' fill='%23FF5F6D'%3E&%238734;%3C/text%3E%3Ctext x='276' y='262' font-size='20' transform='rotate(-12 276 262)' fill='%234DA6FF'%3E=%3C/text%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%230B7FBB' stroke-width='1.6' opacity='0.08'%3E%3Crect x='36' y='54' width='34' height='34' rx='6' transform='rotate(-12 53 71)'/%3E%3Crect x='214' y='36' width='22' height='22' rx='5' transform='rotate(18 225 47)'/%3E%3Crect x='132' y='222' width='48' height='30' rx='8'/%3E%3Crect x='248' y='178' width='20' height='20' rx='4' transform='rotate(-20 258 188)'/%3E%3C/g%3E%3Cg fill='%230B7FBB' opacity='0.14' font-family='Poppins, sans-serif' font-weight='700'%3E%3Ctext x='86' y='150' font-size='30' transform='rotate(-6 86 150)'%3E&%23960;%3C/text%3E%3Ctext x='196' y='96' font-size='26' transform='rotate(10 196 96)'%3E&%238721;%3C/text%3E%3Ctext x='30' y='226' font-size='24'%3E&%238730;%3C/text%3E%3Ctext x='168' y='276' font-size='28' transform='rotate(-8 168 276)'%3E&%23215;%3C/text%3E%3Ctext x='250' y='128' font-size='22'%3E&%23247;%3C/text%3E%3Ctext x='58' y='34' font-size='20'%3E+%3C/text%3E%3Ctext x='118' y='196' font-size='22' transform='rotate(5 118 196)'%3E&%238734;%3C/text%3E%3Ctext x='276' y='262' font-size='20' transform='rotate(-12 276 262)'%3E=%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Poppins",system-ui,sans-serif; margin:0 0 6px;}
p{margin:0;}
button{font-family:inherit;}

.hidden{display:none !important;}

/* ============ SPLASH ============ */
.splash{
  position:fixed; inset:0;
  background:
    radial-gradient(60% 60% at 50% 30%, #123554 0%, var(--ink) 70%);
  display:flex; align-items:center; justify-content:center;
  z-index:100;
  overflow:hidden;
}
.splash::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image: radial-gradient(70% 70% at 50% 40%, black, transparent);
}
.splash-inner{ position:relative; text-align:center; padding:24px; }

.wordmark{
  font-family:"Poppins",system-ui,sans-serif;
  font-weight:800;
  font-size:clamp(2.2rem, 8vw, 5rem);
  letter-spacing:.5px;
  line-height:1;
  white-space:nowrap;
}
.letter{
  position:relative;
  display:inline-block;
  opacity:0;
  animation: letterPop .55s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i) * 70ms + 250ms);
}
.letter.blue{ color:var(--blue); }
.letter.orange{ color:var(--orange); }
.letter::after{
  content:"";
  position:absolute; inset:-4% -8%;
  background: linear-gradient(180deg, #EAF7FF, #FFFFFF);
  transform-origin:right center;
  animation: wipeReveal .46s cubic-bezier(.65,0,.35,1) forwards;
  animation-delay: calc(var(--i) * 70ms + 250ms);
  border-radius:4px;
}
@keyframes letterPop{
  0%{ opacity:0; transform:translateY(6px) scale(.9); }
  55%{ opacity:1; }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes wipeReveal{
  0%{ transform:scaleX(1); }
  100%{ transform:scaleX(0); }
}

.tagline{
  margin-top:18px;
  color:#BFD9EC;
  font-size:1.05rem;
  letter-spacing:.3px;
  opacity:0;
  animation: fadeUp .6s ease forwards;
  animation-delay:1.15s;
}
.credit{
  margin-top:10px;
  color:#7C93A8;
  font-size:.85rem;
  opacity:0;
  animation: fadeUp .6s ease forwards;
  animation-delay:1.55s;
}
.credit span{ color:#DCEBF6; font-weight:600; }

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.splash.leaving{
  animation: splashOut .5s ease forwards;
}
@keyframes splashOut{
  to{ opacity:0; transform:scale(1.02); visibility:hidden; }
}

.skip-btn{
  position:absolute; top:20px; right:20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#DCEBF6;
  padding:8px 14px;
  border-radius:999px;
  font-size:.8rem;
  cursor:pointer;
}
.skip-btn:hover{ background:rgba(255,255,255,.16); }

/* ============ SHARED SCREENS ============ */
.screen{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:32px 20px;
}

.auth-card{
  width:100%; max-width:400px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:32px 28px 28px;
}
.auth-logo{ width:64px; height:64px; object-fit:contain; margin-bottom:12px; }
.auth-card h1{ font-size:1.4rem; }
.auth-sub{ color:var(--muted); font-size:.88rem; margin-bottom:20px; }

form label{
  display:block; font-size:.8rem; font-weight:600;
  color:var(--text); margin:14px 0 6px;
}
form input, form select, form textarea{
  width:100%; padding:11px 12px;
  border:1.5px solid var(--line); border-radius:10px;
  font-size:.95rem; color:var(--text);
  background:#FCFDFE;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
form textarea{ resize:vertical; font-family:inherit; line-height:1.4; }
form input:focus, form select:focus, form textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,162,232,.15);
}
.hint{ font-size:.72rem; color:var(--muted); margin-top:4px; }

.primary-btn{
  margin-top:18px; width:100%;
  background:linear-gradient(135deg, var(--blue), var(--blue-dark));
  color:#fff; border:none; padding:12px 16px;
  border-radius:10px; font-weight:600; font-size:.95rem;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,162,232,.28);
  transition:transform .12s ease, box-shadow .12s ease;
}
.primary-btn:hover{ transform:translateY(-1px); }
.primary-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

.primary-btn.secondary-look{
  background:#fff; color:var(--blue-dark);
  border:1.5px solid var(--blue); box-shadow:none;
}
.primary-btn.secondary-look:hover{ background:#EAF7FF; }

.link-btn{
  background:none; border:none; color:var(--blue-dark);
  font-size:.8rem; font-weight:600; cursor:pointer; padding:0;
  text-decoration:underline;
}
.auth-footnote{
  margin-top:18px; font-size:.78rem; color:var(--muted); text-align:center; line-height:1.6;
}

.form-msg{ min-height:1.1em; font-size:.82rem; margin-top:10px; }
.form-msg.error{ color:#D93636; }
.form-msg.success{ color:#0E9F6E; }

/* ============ APP / DASHBOARD ============ */
#dashView, #homeView{ min-height:100vh; display:block; padding:0; }
.app-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.app-bar-logo{ display:flex; align-items:center; gap:10px; }
.app-bar-logo-icon{ height:46px; width:auto; }
.app-bar-logo-text{
  font-family:"Poppins",system-ui,sans-serif; font-weight:800;
  font-size:1.35rem; line-height:1; color:var(--blue);
  white-space:nowrap;
}
.app-bar-logo-text .accent-orange{ color:var(--orange); }
.app-bar-user{ display:flex; align-items:center; gap:14px; font-size:.88rem; color:var(--muted); }

.ghost-btn{
  background:#fff; border:1.5px solid var(--line); color:var(--text);
  padding:8px 14px; border-radius:9px; font-weight:600; font-size:.82rem; cursor:pointer;
}
.ghost-btn:hover{ border-color:var(--orange); color:var(--orange-dark); }
.icon-btn{
  padding:8px; width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}
.icon-btn .icon{ width:1.05rem; height:1.05rem; }

/* ============ RAINBOW THEME — BUTTON TREATMENT ============
   Elegant multi-hue gradient on every actionable button: a soft
   diagonal sweep (not a loud stripe) with a subtle shimmer on hover. */
body[data-theme="rainbow"] .primary-btn{
  background:var(--rainbow-gradient);
  background-size:200% 200%;
  background-position:0% 50%;
  box-shadow:var(--rainbow-shadow);
  transition:transform .12s ease, box-shadow .2s ease, background-position .5s ease;
}
body[data-theme="rainbow"] .primary-btn:hover{
  background-position:100% 50%;
  box-shadow:0 10px 24px rgba(184,77,255,.3), 0 3px 10px rgba(255,95,109,.24);
  transform:translateY(-1px);
}
body[data-theme="rainbow"] .primary-btn.secondary-look,
body[data-theme="rainbow"] .ghost-btn{
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--rainbow-gradient) border-box;
  border:1.5px solid transparent;
  color:var(--blue-dark);
  box-shadow:none;
}
body[data-theme="rainbow"] .primary-btn.secondary-look:hover,
body[data-theme="rainbow"] .ghost-btn:hover{
  color:#3D1656;
  box-shadow:0 4px 14px rgba(184,77,255,.18);
}
body[data-theme="rainbow"] .link-btn{
  background:var(--rainbow-gradient);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-decoration:none;
}
body[data-theme="rainbow"] .link-btn:hover{ background-position:100% 0; }
/* .tab-btn.active already reads color:var(--blue-dark), which the rainbow
   theme above redefines to its own purple — no extra override needed for
   the bottom nav bar's active state. */

.dash{ max-width:1000px; margin:0 auto; padding:36px 24px 60px; }
.muted{ color:var(--muted); font-size:.92rem; margin-top:6px; }

.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px; margin-top:26px;
}
.info-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
}
.info-card h3{ font-size:1rem; color:var(--blue-dark); }

/* ============ MARKETPLACE ============ */
.market-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px; margin-top:18px; align-items:stretch;
}
.market-card{
  position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:8px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.market-card:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(11,27,43,0.12); }
.market-card h3{ font-size:1.02rem; color:var(--blue-dark); margin:0; }
.market-card .market-price{ font-weight:700; color:var(--orange-dark); font-size:1.05rem; margin-top:2px; }
.market-card .market-desc{ color:var(--muted); font-size:.86rem; min-height:2.6em; }
.market-card .market-owned-tag,
.market-card .market-equipped-tag{
  position:absolute; top:14px; right:14px;
  border-radius:999px; padding:3px 10px; font-size:.72rem; font-weight:600;
}
.market-card .market-owned-tag{ background:#E6F9F0; color:#0E9F6E; }
.market-card .market-equipped-tag{ background:#EAF7FF; color:var(--blue-dark); }
.market-card button{
  margin-top:auto; width:100%;
}

/* Theme color previews on the theme cards */
.theme-swatch{ width:100%; height:64px; border-radius:10px; margin-bottom:2px; }
.theme-swatch.theme-swatch-default{ background:linear-gradient(90deg,#00A2E8,#FF7F27); }
.theme-swatch.theme-swatch-nature{ background:linear-gradient(90deg,#2F9E44,#69DB7C); }
.theme-swatch.theme-swatch-rock{ background:linear-gradient(90deg,#111111,#FF2D55); }
.theme-swatch.theme-swatch-galaxy{ background:linear-gradient(90deg,#4B2A8F,#FF6EC7); }
.theme-swatch.theme-swatch-rainbow{ background:linear-gradient(90deg,#FF4D4D,#FFD24D,#4DFF88,#4DA6FF,#B84DFF); }

/* ============ AVATARS ============ */
.avatar{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; overflow:hidden; flex:none;
  background:linear-gradient(135deg,#00A2E8,#FF7F27);
  color:#fff; font-weight:700; text-transform:uppercase;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-xs{ width:24px; height:24px; font-size:.72rem; }
.avatar-sm{ width:36px; height:36px; font-size:.9rem; }
.avatar-lg{ width:84px; height:84px; font-size:1.8rem; }

.profile-picture-row{
  display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap;
}
.profile-picture-row > div:not(.avatar){ min-width:0; flex:1 1 180px; }
#editProfilePictureBtn{ width:100%; max-width:220px; }

.panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; margin-top:24px; box-shadow:var(--shadow);
  overflow-x:auto; /* lets wide tables scroll horizontally instead of breaking layout */
}
.panel h2{ font-size:1.05rem; }

.inline-form{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px 16px;
  align-items:end; margin-top:14px;
}
.inline-form .field label{ margin-top:0; }
.inline-form .primary-btn{ margin-top:0; height:44px; }

.optional{ font-weight:400; color:var(--muted); font-size:.72rem; }

.profile-list{
  margin:14px 0 0; display:grid; grid-template-columns:140px 1fr; row-gap:10px;
}
.profile-list dt{ color:var(--muted); font-size:.82rem; font-weight:600; }
.profile-list dd{ margin:0; font-size:.92rem; color:var(--text); }

.user-table{ width:100%; min-width:520px; border-collapse:collapse; margin-top:16px; font-size:.88rem; }
.user-table th{
  text-align:left; color:var(--muted); font-weight:600; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.4px;
  border-bottom:1px solid var(--line); padding:8px 10px;
}
.user-table td{ padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.role-badge{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.3px;
}
.role-badge.admin{ background:#FFF0E3; color:var(--orange-dark); }
.role-badge.student{ background:#E6F5FD; color:var(--blue-dark); }
.role-badge.parent{ background:#EBFBEE; color:#2F9E44; }
.row-danger{
  background:none; border:none; color:#D93636; cursor:pointer; font-size:.8rem; font-weight:600;
}

/* ============ STREAK PILL (header) ============ */
.streak-pill{
  display:inline-flex; align-items:center; gap:4px;
  background:linear-gradient(135deg, #FFF3E4, #FFE7CC);
  border:1px solid #FFD8A8; color:var(--orange-dark);
  font-weight:700; font-size:.85rem;
  padding:6px 12px; border-radius:999px;
}
.streak-countdown{
  font-weight:600; font-size:.72rem; color:var(--muted);
  margin-left:2px;
}
.streak-countdown.earned{ color:#3F8459; }

/* ============ ONLINE STATUS DOT (admin Users table) ============ */
.online-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--line);
}
.online-dot.online{ background:#3F8459; }

/* ============ ICONS (self-hosted inline SVG, see ICONS in app.js) ============ */
.icon{ width:1em; height:1em; display:inline-block; vertical-align:-0.15em; flex-shrink:0; }
.icon-inline{ display:inline-flex; vertical-align:-0.15em; }
.icon-inline .icon{ vertical-align:baseline; }

/* ============ TABS — bottom nav bar (YouTube/Instagram style) ============
   Each of the three tab groups (student dash, admin dash, marketplace
   folders) lives inside its own <main>, only one of which is ever visible
   at a time — so pinning .tabs to the viewport bottom never stacks two
   bars on top of each other; whichever <main> is hidden takes its .tabs
   with it. The matching *Dash containers add bottom padding (below) so
   fixed bar never covers the last bit of scrollable content. */
.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; margin:0;
  background:var(--card); border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(11,27,43,0.08);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab-btn{
  flex:1 1 0; min-width:60px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:none; border:none; cursor:pointer;
  padding:6px 4px; border-radius:10px;
  color:var(--muted);
  transition:color .12s ease, transform .12s ease;
}
.tab-icon{ font-size:1.28rem; line-height:1; transition:transform .12s ease; display:inline-flex; align-items:center; justify-content:center; }
.tab-label{ font-size:.64rem; font-weight:600; white-space:nowrap; letter-spacing:.1px; }
.tab-btn.active{ color:var(--blue-dark); }
.tab-btn.active .tab-icon{ transform:translateY(-1px) scale(1.08); }
.tab-btn:hover{ color:var(--blue-dark); }
.tab-panel.hidden{ display:none; }

/* In-page segmented toggle (e.g. the Study for Exam practice-type picker) —
   visually similar to .tab-btn but NOT a .tabs bar: .tabs is position:fixed
   for the app's bottom nav, so nesting another one inside a panel would
   overlay it. */
.inline-tabs{
  display:flex; gap:8px; margin:14px 0 4px; flex-wrap:wrap;
}
.inline-tab-btn{
  background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:8px 16px; font-size:.82rem; font-weight:600; color:var(--muted);
  cursor:pointer; transition:color .12s ease, background .12s ease, border-color .12s ease;
}
.inline-tab-btn.active{ color:#fff; background:var(--blue-dark); border-color:var(--blue-dark); }
.inline-tab-btn:hover{ color:var(--blue-dark); }
.inline-tab-btn.active:hover{ color:#fff; }

/* Room at the bottom of every dash that has a bottom tab bar, so the fixed
   bar never covers the last card/row of content. */
#studentDash, #adminDash, #marketplaceDash{
  padding-bottom:calc(78px + env(safe-area-inset-bottom));
}

.panel h3{ font-size:.92rem; color:var(--blue-dark); }

/* ============ ANNOUNCEMENTS LIST (student) ============ */
.quiz-list{ display:flex; flex-direction:column; gap:14px; margin-top:14px; }
.quiz-item{
  border:1.5px solid var(--line); border-radius:12px; padding:16px 18px;
  display:flex; flex-direction:column; gap:10px;
}
.quiz-item-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.quiz-item-head h3{ font-size:1rem; }

/* ============ STUDY FOR EXAM (student) ============ */
.study-step{
  display:flex; flex-direction:column; gap:10px;
  padding-top:16px; margin-top:16px; border-top:1px solid var(--line);
}
.study-step:first-of-type{ border-top:none; padding-top:0; margin-top:14px; }
.study-step h3{ font-size:.92rem; color:var(--blue-dark); }
.study-photo-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.study-photo-btn{ width:fit-content; }
.study-photo-preview{
  max-width:180px; max-height:180px; object-fit:cover;
  border:1.5px solid var(--line); border-radius:10px;
}
.study-photo-preview-list{ display:flex; gap:10px; flex-wrap:wrap; }
.study-photo-preview-list .study-photo-preview{ max-width:110px; max-height:110px; }
#studyExtractedText{
  width:100%; padding:11px 12px; border:1.5px solid var(--line); border-radius:10px;
  font-size:.9rem; color:var(--text); background:#FCFDFE; outline:none;
  font-family:inherit; line-height:1.5; resize:vertical;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#studyExtractedText:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,162,232,.15); }

.study-audio-panel{
  display:flex; flex-direction:column; gap:14px; border:1.5px solid var(--line);
  border-radius:12px; padding:18px;
}
.study-audio-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.study-audio-progress{ font-size:.78rem; font-weight:700; color:var(--blue-dark); }
.study-audio-score{ font-size:.78rem; color:var(--muted); }
.study-audio-question{ font-size:1.05rem; font-weight:600; }
.study-audio-status{
  font-size:.85rem; font-weight:600; color:var(--blue-dark);
  display:flex; align-items:center; gap:8px;
}
.study-audio-status.listening{ color:#D97706; }
.study-audio-transcript{
  font-size:.88rem; color:var(--text); background:#F5F8FA;
  border-radius:8px; padding:10px 12px;
}
.study-audio-feedback{ font-size:.92rem; font-weight:600; padding:10px 12px; border-radius:8px; }
.study-audio-feedback.correct{ background:#E9F9F1; color:#0E9F6E; }
.study-audio-feedback.incorrect{ background:#FDEDED; color:#D93636; }
.study-audio-controls{ display:flex; gap:10px; flex-wrap:wrap; }
.study-audio-controls .ghost-btn, .study-audio-controls .primary-btn{ width:fit-content; margin-top:0; }
.study-audio-typed{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.study-audio-typed input[type="text"]{
  flex:1 1 200px; padding:10px 12px; border:1.5px solid var(--line); border-radius:9px; font-size:.9rem;
}
.study-audio-final{ font-size:1rem; font-weight:700; color:var(--blue-dark); }

.study-dialog-turn{ font-size:1.05rem; font-weight:600; }
.study-dialog-turn .char-name{ color:var(--blue-dark); }
.study-dialog-turn.mine{ color:#0E9F6E; }

.speech-preview{ line-height:2; font-size:1.05rem; }
.speech-word{
  color:var(--text); border-radius:4px;
  padding:1px 3px; margin:0 1px; display:inline-block; transition:background .4s, color .4s;
}
.speech-word.speech-word-done, .speech-word.speech-word-ok{ color:#0E9F6E; background:#E9F9F1; }
.speech-word.speech-word-wrong{ color:#B45309; background:#FEF3C7; }
.speech-word.speech-word-missed{ color:#D93636; background:#FDEDED; }

/* Speech practice — record, then AI marks (renderSpeechPractice in js/app.js) */
.speech-rec{ display:flex; flex-direction:column; gap:18px; }
.speech-rec-textwrap{ position:relative; border:1px solid rgba(127,127,127,.2); border-radius:14px; padding:14px 16px; }
.speech-rec-textwrap .speech-preview{ margin:0; transition:filter .35s; }
.speech-rec.recording .speech-preview{ filter:blur(7px); user-select:none; }
.speech-rec.recording.peek .speech-preview{ filter:none; }
.speech-peek{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.speech-rec.peek .speech-peek{ position:static; transform:none; margin-top:10px; }
.speech-rec-stage{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.speech-rec-ring{ position:relative; width:min(300px,78vw); aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.speech-rec-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.speech-rec-btn{
  position:relative; width:44%; aspect-ratio:1; border-radius:50%; border:0; cursor:pointer; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font:inherit; font-size:.8rem; font-weight:700;
  background:radial-gradient(circle at 35% 30%, #a5b4fc, #6366f1 45%, #312e81 100%);
  box-shadow:0 10px 30px rgba(79,70,229,.35); transition:transform .15s, background .4s;
  animation:speechBreathe 3s ease-in-out infinite;
}
.speech-rec-btn .icon{ width:34px; height:34px; }
.speech-rec-btn:active{ transform:scale(.94); }
.speech-rec-btn.rec{ background:radial-gradient(circle at 35% 30%, #a7f3d0, #10b981 45%, #065f46 100%); box-shadow:0 10px 34px rgba(16,185,129,.45); animation:none; }
.speech-rec-btn.busy{ background:radial-gradient(circle at 35% 30%, #c4b5fd, #8b5cf6 45%, #4c1d95 100%); animation:speechBreathe 1.2s ease-in-out infinite; cursor:wait; }
@keyframes speechBreathe{ 50%{ transform:scale(1.05); } }
.speech-rec-time{ font-size:1.6rem; font-weight:800; font-variant-numeric:tabular-nums; margin:0; letter-spacing:.02em; }
.speech-rec-status{ margin:0; color:var(--muted); max-width:420px; }
.speech-result{ border-radius:16px; padding:18px; background:rgba(99,102,241,.06); display:flex; flex-direction:column; gap:12px; animation:speechPop .45s ease-out; }
@keyframes speechPop{ from{ opacity:0; transform:translateY(10px) scale(.98); } }
.speech-marks{ display:flex; align-items:baseline; justify-content:center; gap:6px; }
.speech-marks-num{ font-size:3.2rem; font-weight:900; line-height:1; background:linear-gradient(135deg,#6366f1,#10b981); -webkit-background-clip:text; background-clip:text; color:transparent; }
.speech-marks-of{ font-size:1.2rem; font-weight:700; color:var(--muted); }
.speech-meter-top{ display:flex; justify-content:space-between; font-size:.9rem; margin-bottom:4px; }
.speech-meter-track{ height:10px; border-radius:99px; background:rgba(127,127,127,.18); overflow:hidden; }
.speech-meter-fill{ height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#6366f1,#22d3ee,#10b981); transition:width 1.1s cubic-bezier(.2,.8,.2,1); }
.speech-meter-fill.go{ width:var(--w); }
.speech-tip{ margin:0; font-weight:600; }
.speech-tip .icon{ width:16px; height:16px; vertical-align:-2px; color:#8b5cf6; }
.speech-legend{ margin:0; font-size:.82rem; color:var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
.speech-key{ width:12px; height:12px; border-radius:3px; display:inline-block; margin-left:6px; }
.speech-key.ok{ background:#A7F3D0; } .speech-key.wrong{ background:#FDE68A; } .speech-key.missed{ background:#FCA5A5; }
.speech-deleted{ margin:0; font-size:.8rem; color:var(--muted); }
.speech-deleted .icon{ width:14px; height:14px; vertical-align:-2px; }
@media (prefers-reduced-motion: reduce){ .speech-rec-btn{ animation:none; } }

/* ============ VOICE ORB — "who's talking" pulse ============
   Used next to Vocal Teacher / Audio Q&A controls. Idle = still grey dot.
   AI speaking = blue, quick beat per spoken word. Listening to the
   student = orange, slower breathing pulse. Driven entirely by JS toggling
   .orb-idle / .orb-ai / .orb-human / .orb-beat on #voiceOrb. */
.voice-orb{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 auto;
}
.voice-orb-core{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background:var(--line);
  transition:background .25s ease, transform .12s ease-out;
}
.voice-orb-ring{
  position:absolute; width:100%; height:100%; border-radius:50%;
  border:2px solid transparent; opacity:0;
}
.voice-orb.orb-beat .voice-orb-core{ transform:scale(1.45); }

.voice-orb.orb-ai .voice-orb-core{
  background:var(--blue);
  animation:orbBreathe 0.85s ease-in-out infinite;
}
.voice-orb.orb-ai .voice-orb-ring{
  border-color:var(--blue);
  animation:orbRing 0.85s ease-out infinite;
}
.voice-orb.orb-human .voice-orb-core{
  background:var(--orange);
  animation:orbBreathe 1.3s ease-in-out infinite;
}
.voice-orb.orb-human .voice-orb-ring{
  border-color:var(--orange);
  animation:orbRing 1.3s ease-out infinite;
}
@keyframes orbBreathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.22); } }
@keyframes orbRing{
  0%{ transform:scale(.65); opacity:.55; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* ============ RESPONSIVE — TABLET (≤900px) ============ */
@media (max-width:900px){
  .dash{ padding:28px 18px 48px; }
  .card-grid{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
  .market-grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}

/* ============ RESPONSIVE — LARGE PHONE / SMALL TABLET (≤640px) ============ */
@media (max-width:640px){
  .app-bar{ flex-wrap:wrap; gap:10px; padding:12px 16px; }
  .app-bar-user{ flex-wrap:wrap; gap:8px; width:100%; justify-content:flex-end; }
  .dash{ padding:24px 14px 40px; }
  h1{ font-size:1.4rem; }
  .panel{ padding:16px; }
  .inline-form{ grid-template-columns:1fr; }
  .card-grid{ grid-template-columns:1fr; }
  .quiz-item-head{ flex-direction:column; align-items:flex-start; }
  .profile-list{ grid-template-columns:1fr; row-gap:4px; }
  .profile-list dd{ margin-bottom:8px; }

  /* Bigger tap targets on touch devices — .primary-btn is already sized
     well (12px 16px padding); .ghost-btn was a little tight for a thumb. */
  .ghost-btn{ padding:11px 16px; }
  .market-card button{ padding:11px 16px; }

  .profile-picture-row{ justify-content:center; text-align:center; }
  .profile-picture-row > div:not(.avatar){ flex:1 1 100%; }
  #editProfilePictureBtn{ max-width:none; }

  .market-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
  .market-card{ padding:14px; }
}

/* ============ RESPONSIVE — PHONE (≤520px) ============ */
@media (max-width:520px){
  .auth-card{ padding:26px 20px; }
  .app-bar{ padding:12px 16px; }
  .app-bar-user{ flex-wrap:wrap; gap:8px; }
  .app-bar-logo-icon{ height:34px; }
  .app-bar-logo-text{ font-size:1.05rem; }
  .wordmark{ font-size:clamp(1.7rem, 10vw, 3.2rem); }
  .tagline{ font-size:.92rem; }
  .user-table{ font-size:.8rem; }
  .user-table th, .user-table td{ padding:8px 6px; }
}

/* ============ RESPONSIVE — VERY SMALL PHONE (≤360px) ============ */
@media (max-width:360px){
  .auth-card{ padding:20px 16px; }
  .skip-btn{ top:12px; right:12px; padding:6px 10px; font-size:.72rem; }
  .credit{ font-size:.75rem; }

  .avatar-lg{ width:64px; height:64px; font-size:1.4rem; }
  .market-grid{ grid-template-columns:1fr 1fr; }

  /* 5-item bottom bars (admin, marketplace) are tightest here. */
  .tab-btn{ min-width:52px; padding:6px 2px; }
  .tab-icon{ font-size:1.1rem; }
  .tab-label{ font-size:.58rem; }
}

/* ============ RESPONSIVE — DESKTOP (≥900px) ============
   A fixed bottom nav is a mobile pattern (YouTube/Instagram); on a
   wide-enough screen there's no scroll/thumb-reach reason for it, so let
   it sit inline where the tabs used to be instead of pinned to the
   viewport edge. Falls back to a straightforward underlined tab row. */
@media (min-width:900px){
  .tabs{
    position:static; margin-top:18px; padding:0;
    border-top:none; border-bottom:1px solid var(--line);
    box-shadow:none; background:none;
  }
  .tab-btn{
    flex:0 0 auto; flex-direction:row; gap:8px;
    padding:10px 18px; border-radius:0;
    border-bottom:2.5px solid transparent; margin-bottom:-1px;
  }
  .tab-icon{ font-size:1rem; }
  .tab-label{ font-size:.9rem; }
  .tab-btn.active{ border-bottom-color:var(--blue); }
  .tab-btn.active .tab-icon{ transform:none; }
  #studentDash, #adminDash, #marketplaceDash{ padding-bottom:60px; }
}

/* ============ RESPONSIVE — LARGE DESKTOP (≥1400px) ============ */
@media (min-width:1400px){
  .dash{ max-width:1180px; }
}
/* ============ PLANS (Free / Pro / Premium) ============ */
.credits-pill{
  display:inline-flex; align-items:center; gap:4px;
  background:linear-gradient(135deg, #EAF7FF, #D6EFFF);
  border:1px solid #A9DCF7; color:var(--blue-dark);
  font:inherit; font-weight:700; font-size:.85rem;
  padding:6px 12px; border-radius:999px; cursor:pointer;
}
.credits-pill:hover{ border-color:var(--blue); }
.plan-usage{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px;
  background:#F3FAFF; border:1px solid #D6EFFF; border-radius:10px;
  padding:10px 14px; margin-bottom:16px; font-size:.86rem; color:var(--muted);
}
.plan-usage strong{ color:var(--blue-dark); }
.plan-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px; align-items:stretch;
}
.plan-card{
  position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px;
}
.plan-card h3{ margin:0; font-size:1.1rem; color:var(--blue-dark); }
.plan-card-featured{ border:2px solid var(--orange); }
.plan-card-current{ border-color:var(--blue); }
.plan-price{ font-size:1.6rem; font-weight:800; color:var(--orange-dark); margin:0; }
.plan-price span{ font-size:.85rem; font-weight:600; color:var(--muted); }
.plan-features{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:.9rem; }
.plan-card button{ margin-top:auto; width:100%; }
.plan-card button:disabled{ opacity:.6; cursor:not-allowed; }
.plan-current-tag{
  position:absolute; top:14px; right:14px;
  border-radius:999px; padding:3px 10px; font-size:.72rem; font-weight:600;
  background:#EAF7FF; color:var(--blue-dark);
}
.plan-card .muted + .plan-current-tag, .plan-card > .plan-current-tag:last-child{ position:static; align-self:flex-start; margin-top:auto; }
.plan-select{ padding:4px 6px; border-radius:8px; border:1px solid var(--line); font:inherit; font-size:.85rem; }
.plan-until{ font-size:.72rem; margin-top:2px; }
@media (max-width:560px){
  .credits-pill{ padding:5px 9px; font-size:.78rem; }
}
.plan-features li{ display:flex; align-items:center; gap:8px; }
.plan-features li .icon{ color:var(--blue); width:1.05em; height:1.05em; }
.credits-pill .icon, .plan-usage .icon{ color:var(--orange-dark); }
.streak-pill .icon{ color:var(--orange-dark); }

/* ============ WEEKLY CONTEST ============ */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.error-text{ color:#D93636; }
.contest-card{
  border:1.5px solid var(--line); border-radius:12px; padding:16px 18px; margin-top:14px;
  display:flex; flex-direction:column; gap:8px;
}
.contest-card h3{ display:flex; align-items:center; gap:8px; margin:0; }
.contest-card p{ margin:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.contest-card select{ padding:8px 10px; border:1px solid var(--line); border-radius:10px; font:inherit; }
.contest-registered{ color:#0E9F6E; font-weight:600; }
.contest-countdown{ font-size:1rem; color:var(--blue-dark); }
.contest-live{
  margin-top:14px; border:2px solid var(--blue); border-radius:14px; padding:18px;
  display:flex; flex-direction:column; gap:12px;
}
.contest-live-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--muted); }
.contest-timer{ display:inline-flex; align-items:center; gap:6px; color:var(--orange-dark); font-size:1.05rem; }
.contest-timebar{ height:6px; background:var(--line); border-radius:999px; overflow:hidden; }
.contest-timebar > div{ height:100%; width:100%; background:linear-gradient(90deg, var(--orange), var(--blue)); transition:width .2s linear; }
.contest-question{ font-size:1.25rem; font-weight:700; color:var(--ink); margin:6px 0; line-height:1.4; }
.contest-answer{ display:flex; gap:10px; flex-wrap:wrap; }
.contest-answer input{ flex:1 1 220px; padding:12px 14px; font-size:16px; border:1.5px solid var(--line); border-radius:10px; font-family:inherit; }
.contest-answer input:focus{ outline:none; border-color:var(--blue); }
.contest-answer .primary-btn{ width:auto; margin:0; }
#contestAnswerState{ display:flex; align-items:center; gap:6px; margin:0; }
.contest-result-card{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  background:#F3FAFF; border:1px solid #D6EFFF; border-radius:12px; padding:14px 16px; margin-top:10px;
}
.contest-big{ font-size:2rem; font-weight:800; color:var(--orange-dark); }
.contest-me-row td{ background:#FFF6EC; }
.contest-table td, .contest-table th{ white-space:nowrap; }
.contest-review{ margin-top:16px; }
.contest-review summary{ cursor:pointer; font-weight:600; color:var(--blue-dark); }
.contest-review ol{ padding-left:20px; display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.contest-review li p{ margin:0; }
.contest-review li .muted{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.contest-review li.is-right .icon{ color:#0E9F6E; }
.contest-review li.is-wrong .icon{ color:#D93636; }
.contest-setup textarea{ width:100%; font-family:inherit; }
.contest-admin-list{ display:flex; flex-direction:column; gap:14px; }
.contest-admin-item{ border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; }
.contest-admin-item h3{ display:flex; align-items:center; gap:6px; }
.contest-admin-item .row-danger{ margin-top:10px; }
.contest-group-btn{ padding:0; }
.check-row{ display:flex !important; align-items:center; gap:8px; font-weight:500; margin:6px 0 0 !important; cursor:pointer; }
.check-row input{ width:auto !important; margin:0; }
.contest-fee-line{ margin:4px 0 0; }
.contest-prizes{ background:#FFF6EC; border:1px solid #FFD8A8; border-radius:10px; padding:10px 12px; color:var(--ink); }
.contest-prizes strong{ color:var(--orange-dark); }

/* ---------- step-by-step sign-up ---------- */
.signup-progress{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin:0 0 18px}
.signup-progress span{display:block;height:100%;width:0;background:var(--blue);transition:width .3s}
.role-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
@media (max-width:480px){.role-choice{grid-template-columns:1fr}}
.role-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--text);text-decoration:none;cursor:pointer;font:inherit;text-align:center}
.role-card:hover{border-color:var(--blue)}
.role-card .icon-inline svg{width:30px;height:30px;color:var(--blue)}
.role-card small{color:var(--muted)}
.signup-nav{display:flex;justify-content:space-between;gap:10px;margin-top:16px}
.signup-nav .primary-btn,.signup-nav .ghost-btn{width:auto;margin-top:0}

/* ---------- parent link code (Settings) ---------- */
.link-code{font-size:32px;font-weight:700;letter-spacing:6px;margin:8px 0;font-variant-numeric:tabular-nums;color:var(--blue-dark)}

/* ---------- tap-to-answer practice ---------- */
.text-quiz{display:flex;flex-direction:column;gap:12px}
.text-quiz-progress{color:var(--muted);font-size:14px;margin:0}
.text-quiz-question{font-size:19px;font-weight:600;margin:0}
.text-quiz-options{display:grid;gap:8px}
.text-quiz-option{text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font:inherit;cursor:pointer}
.text-quiz-option:hover:not(:disabled){border-color:var(--blue)}
.text-quiz-option.correct{border-color:#2f9e44;background:#ebfbee}
.text-quiz-option.wrong{border-color:#e03131;background:#fff5f5}
.text-quiz-feedback{min-height:22px;margin:0;font-weight:600}
.text-quiz-score{font-size:20px}

/* ---------- admin: give themes ---------- */
.give-themes-btn{display:block;margin-top:4px;font-size:13px}
.give-themes-list{display:flex;flex-direction:column;gap:8px;max-height:55vh;overflow:auto}
.give-theme-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.give-theme-row input{width:18px;height:18px;flex:none}
.give-theme-row .theme-swatch{width:34px;height:34px;border-radius:8px;flex:none;margin:0}
.give-theme-row small{display:block;color:var(--muted)}
.text-quiz-why{margin:0;color:var(--muted);font-size:14px}
.ai-tag{display:inline-flex;align-items:center;gap:4px;margin-left:10px;padding:2px 8px;border-radius:999px;background:#EEF0FF;color:#4F46E5;font-size:12px;font-weight:600}.ai-tag svg{width:12px;height:12px}

/* "New version ready" bar (live updates — liveTick in js/app.js, parent.php) */
.live-update-bar{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:9999;
  display:flex; align-items:center; gap:14px; padding:10px 12px 10px 18px; border-radius:14px;
  background:#16202C; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.25); max-width:calc(100vw - 32px);
  animation:liveBarIn .3s ease-out;
}
.live-update-bar span{ display:flex; align-items:center; gap:8px; font-size:.92rem; }
.live-update-bar .icon{ width:18px; height:18px; }
.live-update-bar .primary-btn{ padding:8px 16px; white-space:nowrap; }
@keyframes liveBarIn{ from{ opacity:0; transform:translate(-50%,12px); } }

/* Always-on Vocal Buddy switch (Vocal Buddy tab + Settings) */
.always-on-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; margin-bottom:8px; border-radius:14px; background:rgba(99,102,241,.07); }
.always-on-row p{ margin:2px 0 0; font-size:.85rem; }
.always-on-row .icon-inline .icon{ width:16px; height:16px; vertical-align:-2px; }
.always-on-row button{ width:auto; white-space:nowrap; padding:8px 16px; }