*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* ===== Luxury Black/White/Gold Palette ===== */
  --primary: #C9A84C;
  --primary-light: #DFC878;
  --primary-dark: #9E8228;
  --secondary: #B8960C;
  --success: #4A7C59;
  --warning: #C9A84C;
  --danger: #EF4444;
  --bg-main: #F5F5F5;
  --bg-card: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --text-main: #1A1A1A;
  --text-muted: #666666;
  --text-white: #FFFFFF;
  --border-color: #E0E0E0;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --font-main: 'Inter', sans-serif;
  --font-heading: 'Poppins', sans-serif;
  --nav-height: 64px;
  --bottom-nav-height: 80px;
  
  /* Compatibility Variables */
  --accent: var(--primary);
  --accent2: #D4AF37;
  --accent3: #C9A84C;
  --accent4: #E6C84C;
  --accent5: #EF4444;
  --bg2: #EEEEEE;
  --bg3: #F5F5F5;
  --bg4: #EEEEEE;
  --text: var(--text-main);
  --text2: var(--text-muted);
  --text3: #999999;
  --border: var(--border-color);
  --card: var(--bg-card);
  --card2: var(--bg-card);
  --grad1: linear-gradient(135deg, var(--primary), var(--primary-light));
}


[data-theme="dark"] {
  --bg-main: #0A0A0A;
  --bg-card: #1A1A1A;
  --bg-sidebar: #1A1A1A;
  --text-main: #F5F5F5;
  --text-muted: #AAAAAA;
  --border-color: #333333;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
  --input-bg: #222222;

  /* Compatibility Variables */
  --bg2: #151515;
  --bg3: #1A1A1A;
  --bg4: #111111;
  --text: #F5F5F5;
  --text2: #AAAAAA;
  --text3: #777777;
  --border: #333333;
  --card: #1A1A1A;
  --card2: #1E1E1E;
  --grad1: linear-gradient(135deg, var(--primary), var(--primary-dark));
}




body{
  font-family: var(--font-main);
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior-y: auto;
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] body {
  background-color: var(--bg-main);
}

/* Full-app illustration backdrop */
.app-global-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.app-global-bg-photo {
  position: absolute;
  inset: 0;
  background-color: var(--bg-main);
  background-image: url('study-doodle-background-vector.jpg');
  background-repeat: repeat;
  background-position: center top;
  background-size: min(440px, 96vw) auto;
  animation: none;
  will-change: auto;
}
@media (max-width: 480px) {
  .app-global-bg-photo {
    background-size: min(300px, 92vw) auto;
  }
}
[data-theme="dark"] .app-global-bg-photo {
  filter: brightness(0.28) contrast(1.08) saturate(0.85);
  opacity: 0.92;
}
.app-global-bg-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    rgba(245, 245, 245, 0.78) 0%,
    rgba(245, 245, 245, 0.55) 40%,
    rgba(238, 238, 238, 0.5) 100%
  );
}
[data-theme="dark"] .app-global-bg-veil {
  background: linear-gradient(
    165deg,
    rgba(10, 10, 10, 0.52) 0%,
    rgba(10, 10, 10, 0.38) 50%,
    rgba(10, 10, 10, 0.48) 100%
  );
}

#login-screen,
#signup-screen,
#app {
  position: relative;
  z-index: 1;
}
input, textarea, select, [contenteditable] {
  user-select: auto;
  -webkit-user-select: auto;
}
.hidden{display:none!important}
button{cursor:pointer;border:none;font-family:inherit;outline:none; -webkit-tap-highlight-color: transparent;}
a{text-decoration:none;color:inherit}


/* NATIVE APP FEEL: Hide web scrollbars */
::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ANIMATIONS */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Main feature area: enter animation when switching pages */
@keyframes mainFeatureEnter {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes navIconSpark {
  0% { transform: scale(1) rotate(0deg); }
  35% { transform: scale(1.14) rotate(-8deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.nav-item i.nav-icon-pulse {
  animation: navIconSpark 0.48s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes bottomNavIconKick {
  0% { transform: scale(1); }
  40% { transform: scale(1.18) translateY(-2px); }
  100% { transform: scale(1); }
}

.bottom-nav-item i.bottom-nav-pulse-ico {
  animation: bottomNavIconKick 0.52s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#main-content.main-content-swap {
  animation: mainFeatureEnter 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  #main-content.main-content-swap {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .nav-item i.nav-icon-pulse,
  .bottom-nav-item i.bottom-nav-pulse-ico {
    animation: none;
  }
}

@keyframes authPhotoKen {
  0%, 100% { transform: scale(1.05) translate(0, 0); }
  50% { transform: scale(1.09) translate(-0.35%, 0.25%); }
}

@keyframes shimmerEdge {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes logoGlow {
  0%, 100% { box-shadow: 0 8px 32px rgba(201, 168, 76, 0.35), 0 0 0 1px rgba(255,255,255,0.15) inset; }
  50% { box-shadow: 0 12px 40px rgba(184, 150, 12, 0.35), 0 0 0 1px rgba(255,255,255,0.2) inset; }
}

@keyframes sidebarAccentFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes sidebarNavShimmer {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.55; }
}

/* LOGIN — local veil over global illustration */
#login-screen, #signup-screen {
  overflow-y: auto;
  overflow-x: hidden;
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 20px;
}

.auth-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.auth-bg-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.02) 38%,
    transparent 55%,
    rgba(158, 130, 40, 0.08) 100%
  );
  pointer-events: none;
}

[data-theme="dark"] .auth-bg-veil {
  background: linear-gradient(
    155deg,
    rgba(10, 10, 10, 0.45) 0%,
    rgba(10, 10, 10, 0.12) 42%,
    transparent 58%,
    rgba(10, 10, 10, 0.5) 100%
  );
}

/* Login screen — premium vignette over illustration */
#login-screen .auth-bg-veil {
  background:
    radial-gradient(ellipse 72% 68% at 50% 42%, rgba(255, 255, 255, 0.06) 0%, transparent 62%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 35%, rgba(10, 10, 10, 0.18) 100%),
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.03) 38%,
      transparent 52%,
      rgba(158, 130, 40, 0.1) 100%
    );
}
[data-theme="dark"] #login-screen .auth-bg-veil {
  background:
    radial-gradient(ellipse 72% 68% at 50% 42%, rgba(255, 255, 255, 0.03) 0%, transparent 55%),
    radial-gradient(ellipse 115% 88% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.65) 100%),
    linear-gradient(
      155deg,
      rgba(10, 10, 10, 0.5) 0%,
      rgba(10, 10, 10, 0.14) 42%,
      transparent 56%,
      rgba(10, 10, 10, 0.55) 100%
    );
}

@media (prefers-reduced-motion: reduce) {
  .app-global-bg-photo {
    animation: none !important;
    inset: 0;
    transform: none;
  }
  .login-box,
  .login-logo,
  .login-box::before,
  #login-screen .btn-login {
    animation: none !important;
  }
  .login-box::before { opacity: 0.35; }
  .nav-item:hover,
  .nav-item.active,
  .card:hover,
  .stat-card:hover,
  .feed-item:hover,
  .btn-primary:hover,
  .btn-login:hover,
  .btn-sm:hover,
  .btn-logout:hover {
    transform: none !important;
  }
  .sidebar-accent-bar,
  .sidebar-accent-bar::after {
    animation: none !important;
  }
}

.login-box {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-xl);
  padding: 40px;
  width: 100%;
  max-width: 440px;
  box-shadow:
    0 4px 24px rgba(201, 168, 76, 0.08),
    0 24px 64px rgba(10, 10, 10, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-align: center;
  animation: pageFadeIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-theme="dark"] .login-box {
  background: rgba(26, 26, 26, 0.75);
  border-color: rgba(160, 160, 160, 0.15);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    0 24px 64px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.login-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(201, 168, 76, 0.55),
    rgba(184, 150, 12, 0.45),
    rgba(167, 139, 250, 0.4)
  );
  background-size: 200% 200%;
  animation: shimmerEdge 8s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.65;
}

/* Premium login panel (hero screen only) */
#login-screen .login-box {
  max-width: 460px;
  padding: 48px 44px 44px;
  border-radius: 28px;
  background: url("pngtree-colorful-pastel-gradient-background-texture-in-shades-of-pink-purple-blue-image_16381316.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backdrop-filter: blur(28px) saturate(1.45);
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 8px 32px rgba(158, 130, 40, 0.08),
    0 32px 80px rgba(10, 10, 10, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.4);
}
[data-theme="dark"] #login-screen .login-box {
  background: url("pngtree-colorful-pastel-gradient-background-texture-in-shades-of-pink-purple-blue-image_16381316.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-color: rgba(160, 160, 160, 0.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Signup panel background image */
#signup-screen .login-box{
  background: url("dark-grainy-gradient-background-blue-magenta-pink-purple-black-colors-banner-poster-cover-abstract-design-photo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#login-screen .login-logo {
  width: 112px;
  height: 112px;
  border-radius: 26px;
  margin: 0 auto 28px;
  padding: 3px;
  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,255,255,0.35));
  box-shadow:
    0 20px 50px rgba(201, 168, 76, 0.22),
    0 8px 24px rgba(184, 150, 12, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: none;
}
#login-screen .login-logo .brand-logo-img {
  border-radius: 23px;
}
[data-theme="dark"] #login-screen .login-logo {
  background: linear-gradient(145deg, rgba(51, 51, 51, 0.6), rgba(26, 26, 26, 0.9));
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(160, 160, 160, 0.15) inset;
}

.login-logo {
  width: 64px;
  height: 64px;
  background: linear-gradient(145deg, var(--primary), var(--secondary));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: white;
  overflow: hidden;
  animation: logoGlow 6s ease-in-out infinite;
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.login-box h1 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(125deg, var(--text-main) 0%, var(--primary) 45%, var(--secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
[data-theme="dark"] .login-box h1 {
  background: linear-gradient(125deg, #F5F5F5 0%, #D4AF37 40%, #D4AF37 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

#login-screen .login-box h1 {
  font-size: 42px;
  letter-spacing: -0.045em;
  margin-bottom: 12px;
  display: inline-block;
  font-style: italic;
  transform: skewX(-10deg);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #1A1A1A;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.75),
    0 10px 28px rgba(0, 0, 0, 0.22);
}

.login-tagline {
  margin: 0 0 28px;
  padding: 0;
}
.login-tagline-main {
  display: block;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-main);
  line-height: 1.35;
}
[data-theme="dark"] .login-tagline-main {
  color: #EEEEEE;
}
.login-tagline-sub {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.login-box p {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 32px;
}

.login-hint {
  background: var(--bg2);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: left;
  line-height: 1.6;
  border-left: 4px solid var(--primary);
}

#login-screen .login-hint {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.06) 0%, rgba(184, 150, 12, 0.05) 100%);
  border: 1px solid rgba(201, 168, 76, 0.12);
  border-left: none;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] #login-screen .login-hint {
  background: rgba(26, 26, 26, 0.65);
  border-color: rgba(201, 168, 76, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#login-screen .input-group label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
}

#login-screen .gmail-input {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(224, 224, 224, 0.95);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
}
#login-screen .gmail-input:focus-within {
  border-color: rgba(201, 168, 76, 0.55);
  box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.12), 0 4px 16px rgba(201, 168, 76, 0.08);
  background: #fff;
}
[data-theme="dark"] #login-screen .gmail-input {
  background: rgba(26, 26, 26, 0.85);
  border-color: rgba(51, 51, 51, 0.9);
}

#login-screen .btn-login {
  margin-top: 8px;
  padding: 16px 20px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #C9A84C 0%, #B8960C 45%, #9E8228 100%);
  background-size: 200% 200%;
  animation: shimmerEdge 10s ease infinite;
  box-shadow: 0 8px 28px rgba(201, 168, 76, 0.35), 0 2px 8px rgba(184, 150, 12, 0.15);
  border: none;
}
#login-screen .btn-login:hover {
  background: linear-gradient(135deg, #B8960C 0%, #9E8228 50%, #7A6320 100%);
  box-shadow: 0 12px 36px rgba(201, 168, 76, 0.42), 0 4px 12px rgba(184, 150, 12, 0.2);
}

.login-footer-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 36px;
  opacity: 0.72;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

#login-screen .login-actions-row {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(224, 224, 224, 0.95);
}
[data-theme="dark"] #login-screen .login-actions-row {
  border-top-color: rgba(51, 51, 51, 0.85);
}

.login-hint b { color: var(--text-main); }

.gmail-input {
  display: flex;
  align-items: center;
  background: var(--bg3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  gap: 12px;
  transition: all 0.2s;
}

.gmail-input:focus-within {
  border-color: var(--primary);
  background: var(--bg-main);
  box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.1);
}

.gmail-input i {
  color: var(--text-muted);
  font-size: 16px;
}

.gmail-input input {
  background: none;
  border: none;
  color: var(--text-main);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  flex: 1;
}
.btn-primary, .btn-login {
  width: 100%;
  padding: 14px;
  background: var(--primary);
  border-radius: var(--radius-md);
  color: white;
  font-size: 15px;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(201, 168, 76, 0.2);
}

.btn-primary:hover, .btn-login:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201, 168, 76, 0.3);
}

.gemini-fab {
  position: fixed;
  right: 24px;
  bottom: calc(var(--bottom-nav-height) + 24px);
  z-index: 1100;
  border: none;
  cursor: pointer;
  border-radius: 40px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 25px rgba(201, 168, 76, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gemini-fab:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 15px 35px rgba(201, 168, 76, 0.4);
}

.maintenance-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}

.maintenance-chip.ok { background: rgba(74,124,89,0.15); color: #3D6B4A; border-color: rgba(74,124,89,0.25); }
.maintenance-chip.warn { background: rgba(201,168,76,0.15); color: #8B6914; border-color: rgba(201,168,76,0.30); }
.maintenance-chip.bad { background: rgba(192,57,43,0.12); color: #8B1A1A; border-color: #E8A0A0; }

/* Toast Notifications */
.toast {
  background: var(--bg-card);
  padding: 16px 20px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
  animation: toastSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-left: 5px solid var(--primary);
  margin-bottom: 8px;
}
.notif-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  width: min(320px, calc(100vw - 24px));
  max-height: min(400px, 70vh);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin-top: 12px;
  z-index: 1100;
  overflow: hidden;
  display: none;
  animation: slideInUp 0.3s ease;
}
.notif-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.notif-header h4 { font-size: 15px; font-weight: 800; color: var(--text-main); margin: 0; }
.notif-mark-read {
  font-size: 11px;
  color: var(--primary);
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.notif-list {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: min(320px, 55vh);
  -webkit-overflow-scrolling: touch;
}
.notif-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  transition: background 0.2s;
}
.notif-item:hover { background: var(--bg2); }
.notif-item.unread { background: var(--bg3); border-left: 3px solid var(--primary); }
.notif-item i {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.notif-item-body {
  flex: 1;
  min-width: 0;
}
.notif-item-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 4px;
}
.notif-item-title-row h5 {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
  word-break: break-word;
}
.notif-item-title-row time {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.notif-item-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.notif-dropdown-footer {
  padding: 12px 14px max(12px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
}
.notif-close-btn {
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg2);
  border: 1px solid var(--border-color);
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 12px;
  transition: background 0.2s, color 0.2s;
}
.notif-close-btn:hover {
  background: var(--bg3);
  color: var(--text-main);
}

@media (max-width: 768px) {
  .notif-dropdown {
    position: fixed;
    top: calc(var(--nav-height) + 8px);
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: auto;
    max-width: none;
    max-height: min(calc(100vh - var(--nav-height) - 24px), 640px);
    margin-top: 0;
    border-radius: 18px;
    box-shadow: 0 24px 48px rgba(10, 10, 10, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
  }
  [data-theme="dark"] .notif-dropdown {
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .notif-list {
    max-height: min(52vh, 420px);
  }
  .notif-header {
    padding: 16px;
  }
  .notif-item-title-row {
    flex-wrap: wrap;
  }
  .notif-item-title-row time {
    white-space: normal;
  }
}

.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
.toast-icon { font-size: 18px; }
.toast-msg { font-size: 14px; font-weight: 600; color: var(--text-main); }

@keyframes toastSlideIn {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes toastFadeOut {
  to { opacity: 0; transform: scale(0.95); }
}

/* APP SHELL */
#app{display:flex;min-height:100vh;flex-direction:row}

.sidebar {
  width: 300px;
  background: url("rainbow-coloured-hand-painted-watercolour-background-free-vector.jpg");
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(36px) saturate(1.65);
  -webkit-backdrop-filter: blur(36px) saturate(1.65);
  border-right: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    1px 0 0 rgba(255, 255, 255, 0.85) inset,
    -20px 0 80px rgba(201, 168, 76, 0.06),
    16px 0 64px rgba(10, 10, 10, 0.09);
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  z-index: 1000;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.25s ease;
}

.sidebar::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  z-index: 0;
}

[data-theme="dark"] .sidebar {
  background: url("rainbow-coloured-hand-painted-watercolour-background-free-vector.jpg");
  background-size: cover;
  background-position: center;
  border-right-color: rgba(160, 160, 160, 0.18);
  box-shadow:
    1px 0 0 rgba(255, 255, 255, 0.06) inset,
    -24px 0 100px rgba(201, 168, 76, 0.12),
    20px 0 88px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .sidebar::after {
  mix-blend-mode: soft-light;
  opacity: 0.35;
}

.sidebar-accent-bar {
  flex-shrink: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(
    90deg,
    #9E8228 0%,
    #C9A84C 22%,
    #DFC878 48%,
    #B8960C 72%,
    #C9A84C 100%
  );
  background-size: 220% 100%;
  animation: sidebarAccentFlow 10s linear infinite;
  position: relative;
  z-index: 2;
}

.sidebar-accent-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  animation: sidebarNavShimmer 4s ease-in-out infinite;
  pointer-events: none;
}

.sidebar-logo {
  position: relative;
  z-index: 2;
  padding: 22px 20px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid rgba(224, 224, 224, 0.85);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.08) 100%);
}

[data-theme="dark"] .sidebar-logo {
  border-bottom-color: rgba(51, 51, 51, 0.75);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 100%);
}

.sidebar-logo-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.sidebar-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sidebar-brand-name {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.12;
  background: linear-gradient(125deg, var(--text-main) 0%, var(--primary) 50%, #9E8228 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  font-style: italic;
  transform: skewX(-10deg);
  text-shadow: 0 10px 24px rgba(201, 168, 76, 0.16);
}

[data-theme="dark"] .sidebar-brand-name {
  background: linear-gradient(125deg, #F5F5F5 0%, #D4AF37 42%, #D4AF37 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.sidebar-edition-pill {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  color: #B8960C;
  background: linear-gradient(135deg, rgba(224, 231, 255, 0.95), rgba(199, 210, 254, 0.85));
  border: 1px solid rgba(201, 168, 76, 0.45);
  box-shadow: 0 2px 8px rgba(201, 168, 76, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .sidebar-edition-pill {
  color: #F0DFA0;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.45), rgba(158, 130, 40, 0.35));
  border-color: rgba(165, 180, 252, 0.35);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sidebar-brand-tagline {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.35;
  opacity: 0.9;
}

.sidebar-logo-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: linear-gradient(145deg, #C9A84C 0%, #C9A84C 45%, #9E8228 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  overflow: hidden;
  box-shadow:
    0 14px 36px rgba(201, 168, 76, 0.42),
    0 4px 14px rgba(184, 150, 12, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 6px rgba(158, 130, 40, 0.35);
  position: relative;
}

.sidebar-logo-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.sidebar-brand-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-container {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  margin: 10px 12px 12px;
  padding: 14px 10px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 22px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.52) 0%,
    rgba(238, 238, 238, 0.38) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(160, 160, 160, 0.08),
    0 14px 40px rgba(201, 168, 76, 0.07),
    0 4px 14px rgba(10, 10, 10, 0.04);
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 168, 76, 0.35) transparent;
}

.sidebar-nav-mode {
  display: flex;
  gap: 8px;
  padding: 4px 12px 0;
}

.sidebar-nav-mode-btn {
  flex: 1;
  border: 1px solid rgba(201, 168, 76, 0.18);
  background: rgba(255, 255, 255, 0.6);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-nav-mode-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(201, 168, 76, 0.3);
  color: var(--text-main);
}

.sidebar-nav-mode-btn.active {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.96), rgba(158, 130, 40, 0.92));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(201, 168, 76, 0.22);
}

[data-theme="dark"] .sidebar-nav-mode-btn {
  background: rgba(10, 10, 10, 0.55);
  border-color: rgba(160, 160, 160, 0.16);
}

[data-theme="dark"] .sidebar-nav-mode-btn:hover {
  color: #F5F5F5;
  border-color: rgba(165, 180, 252, 0.28);
}

.nav-container::-webkit-scrollbar {
  display: block !important;
  width: 5px !important;
}
.nav-container::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.65), rgba(201, 168, 76, 0.55));
  border-radius: 999px;
}
.nav-container::-webkit-scrollbar-track {
  background: transparent;
}

[data-theme="dark"] .nav-container {
  background: linear-gradient(
    180deg,
    rgba(26, 26, 26, 0.55) 0%,
    rgba(10, 10, 10, 0.42) 100%
  );
  border-color: rgba(60, 60, 60, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 16px 48px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .nav-container::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.45), rgba(201, 168, 76, 0.35));
}

.nav-section {
  margin-bottom: 6px;
}

.nav-section:last-of-type {
  margin-bottom: 0;
}

.nav-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 16px 8px 10px 10px;
  opacity: 0.92;
}

.nav-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    rgba(160, 160, 160, 0.55) 0%,
    rgba(160, 160, 160, 0) 100%
  );
}

[data-theme="dark"] .nav-section-title::after {
  background: linear-gradient(
    90deg,
    rgba(160, 160, 160, 0.35) 0%,
    rgba(160, 160, 160, 0) 100%
  );
}

.nav-section:first-child .nav-section-title {
  padding-top: 4px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border-radius: 15px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.015em;
  transition:
    background 0.24s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.24s ease,
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease;
  margin-bottom: 4px;
  cursor: pointer;
  border: 1px solid transparent;
}
.nav-item span{
  min-width:0;
  line-height:1.25;
  overflow-wrap:anywhere;
}

/* Improve sidebar text contrast on image background */
.sidebar .nav-section-title,
.sidebar .nav-item:not(.active),
.sidebar .sidebar-brand-tagline,
.sidebar .sidebar-session-hint{
  color: rgba(10, 10, 10, 0.92);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.sidebar .nav-item:not(.active){
  font-weight: 750;
}

/* Cocurriculum notices: horizontal carousel + equal sizing */
.cca-notice-row{
  display:flex;
  flex-direction:row;
  gap:12px;
  overflow-x:auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.cca-notice-row::-webkit-scrollbar{ height: 8px; }
.cca-notice-row::-webkit-scrollbar-thumb{ background: rgba(100,116,139,0.35); border-radius: 999px; }
.cca-notice-card{
  flex: 0 0 320px;
  min-height: 148px;
  align-items: stretch;
  scroll-snap-align: start;
}
.cca-notice-card .cca-notice-body{
  display:flex;
  flex-direction:column;
  min-height: 148px;
}
.cca-notice-card .cca-notice-radio{
  margin-left:auto;
  align-self:flex-start;
  margin-top: 4px;
}
.cca-notice-card .cca-notice-foot{
  margin-top:auto;
  font-size: 11px;
  color: var(--text-muted);
}

.nav-item:focus-visible {
  outline: none;
  border-color: rgba(201, 168, 76, 0.55);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}

.nav-item:hover {
  background: rgba(201, 168, 76, 0.085);
  color: var(--primary);
  border-color: rgba(201, 168, 76, 0.12);
  transform: translateX(4px);
  box-shadow: 0 6px 20px rgba(201, 168, 76, 0.08);
}

.nav-item.active {
  background: linear-gradient(135deg, #B8960C 0%, #C9A84C 38%, #C9A84C 70%, #7A6320 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateX(5px);
  box-shadow:
    inset 5px 0 0 rgba(255, 255, 255, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 12px 36px rgba(201, 168, 76, 0.48),
    0 4px 14px rgba(184, 150, 12, 0.12);
}

.nav-item i {
  font-size: 17px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.12), rgba(184, 150, 12, 0.10));
  border: 1px solid rgba(201, 168, 76, 0.18);
  box-shadow: 0 6px 16px rgba(201, 168, 76, 0.08), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

[data-theme="dark"] .nav-item:not(.active) i {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.20), rgba(184, 150, 12, 0.14));
  border-color: rgba(165, 180, 252, 0.24);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
}

.nav-item:hover:not(.active) i {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.24), rgba(184, 150, 12, 0.20));
  color: var(--primary);
  transform: scale(1.08);
  box-shadow: 0 10px 22px rgba(201, 168, 76, 0.18);
}

.nav-item.active i {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.15);
}

.nav-badge{
  margin-left: auto;
  background: linear-gradient(180deg, #C0392B 0%, #C0392B 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  min-width: 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(192, 57, 43, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.nav-item.active .nav-badge {
  background: rgba(255, 255, 255, 0.96);
  color: #A93226;
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.15);
}

.sidebar-bottom {
  position: relative;
  z-index: 2;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(224, 224, 224, 0.88);
  background: linear-gradient(0deg, rgba(245, 245, 245, 0.92) 0%, rgba(245, 245, 245, 0) 92%);
}

[data-theme="dark"] .sidebar-bottom {
  border-top-color: rgba(51, 51, 51, 0.8);
  background: linear-gradient(0deg, rgba(17, 24, 39, 0.85) 0%, transparent 92%);
}

.sidebar-session-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 12px 0 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.72;
}

.sidebar-session-hint i {
  font-size: 11px;
  opacity: 0.85;
  color: var(--primary);
}

.btn-logout {
  width: 100%;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 245, 245, 0.72));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(224, 224, 224, 0.98);
  border-radius: 15px;
  color: #A93226;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 24px rgba(10, 10, 10, 0.06);
}

[data-theme="dark"] .btn-logout {
  background: linear-gradient(180deg, rgba(51, 51, 51, 0.65), rgba(26, 26, 26, 0.55));
  border-color: rgba(60, 60, 60, 0.95);
  color: #E8A0A0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.btn-logout:hover {
  background: linear-gradient(180deg, #C0392B 0%, #A93226 100%);
  border-color: #A93226;
  color: #fff;
  box-shadow:
    0 12px 36px rgba(169, 50, 38, 0.42),
    0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}


/* TOP HEADER */
.top-header {
  height: var(--nav-height);
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(224, 224, 224, 0.85);
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 32px rgba(10, 10, 10, 0.06);
}

.app-page-title{
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  display: inline-block;
  font-style: italic;
  transform: skewX(-10deg);
  transform-origin: left center;
  padding-right: 6px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(125deg, var(--text-main) 0%, var(--primary) 44%, var(--secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 14px 28px rgba(201, 168, 76, 0.14),
    0 6px 14px rgba(184, 150, 12, 0.10);
}
[data-theme="dark"] .app-page-title{
  background: linear-gradient(125deg, #F5F5F5 0%, #D4AF37 40%, #D4AF37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 14px 28px rgba(201, 168, 76, 0.22);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.mobile-menu-toggle {
  display: none;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 18px;
  color: var(--text-main);
  align-items: center;
  justify-content: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--primary);
}

[data-theme="dark"] .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .top-header {
  background: rgba(26, 26, 26, 0.78);
  border-bottom-color: rgba(51, 51, 51, 0.65);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 40px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .inp {
  background: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-main);
}

[data-theme="dark"] .card {
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  border-color: var(--border-color);
}

[data-theme="dark"] .nav-item:not(.active):hover {
  background: rgba(201, 168, 76, 0.14);
  border-color: rgba(165, 180, 252, 0.18);
  color: #E6C84C;
}

[data-theme="dark"] .stat-card .trend-up { background: rgba(74, 124, 89, 0.15); color: #5A9A6A; }
[data-theme="dark"] .stat-card .trend-dn { background: rgba(192, 57, 43, 0.15); color: #C0392B; }

[data-theme="dark"] .profile-trigger {
  background: #222222;
  border-color: #333333;
}

[data-theme="dark"] .gmail-input {
  background: #222222;
  border-color: #333333;
}
[data-theme="dark"] .gmail-input:focus-within {
  background: #222222;
  border-color: var(--primary);
}



.profile-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 40px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s;
}

.profile-trigger:hover {
  border-color: var(--primary-light);
}

.user-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

/* BOTTOM NAV */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-height);
  background: rgba(255, 255, 255, 0.88);
  border-top: 1px solid var(--border-color);
  z-index: 1000;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: 4px;
  padding-right: 4px;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 -8px 32px rgba(10, 10, 10, 0.08);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.bottom-nav::-webkit-scrollbar {
  display: none;
}
[data-theme="dark"] .bottom-nav {
  background: rgba(26, 26, 26, 0.92);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
}

.bottom-nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 6px 10px;
  min-width: 56px;
  max-width: 88px;
  min-height: 72px;
  scroll-snap-align: center;
  transition: color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, rgba(201, 168, 76, 0.16), rgba(184, 150, 12, 0.1));
  border: 1px solid rgba(201, 168, 76, 0.26);
  box-shadow:
    0 6px 18px rgba(201, 168, 76, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition:
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.32s ease,
    background 0.32s ease,
    border-color 0.32s ease;
}

[data-theme="dark"] .bottom-nav-icon-wrap {
  background: linear-gradient(155deg, rgba(201, 168, 76, 0.26), rgba(184, 150, 12, 0.12));
  border-color: rgba(201, 168, 76, 0.38);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.bottom-nav-item i {
  font-size: 19px;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease, filter 0.25s ease;
}

.bottom-nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.25s ease, font-weight 0.2s ease;
}

.bottom-nav-item:active:not(.active) .bottom-nav-icon-wrap {
  transform: scale(0.94);
}
.bottom-nav-item.active:active .bottom-nav-icon-wrap {
  transform: translateY(-5px) scale(0.98);
}

.bottom-nav-item.active {
  color: var(--primary);
}

.bottom-nav-item.active .bottom-nav-icon-wrap {
  background: linear-gradient(145deg, #C9A84C 0%, #C9A84C 42%, #7A6320 100%);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow:
    0 12px 32px rgba(201, 168, 76, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 -4px 16px rgba(184, 150, 12, 0.22);
  transform: translateY(-5px) scale(1.04);
}

.bottom-nav-item.active i {
  color: #fff;
  transform: scale(1.08);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.28));
}

.bottom-nav-item.active .bottom-nav-label {
  color: var(--primary);
  font-weight: 800;
}

.bottom-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #D4AF37, #C9A84C);
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.75);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav-item.active .bottom-nav-icon-wrap {
    transform: none;
  }
  .bottom-nav-item:active .bottom-nav-icon-wrap {
    transform: none;
  }
}

/* MAIN CONTENT AREA */
.main-wrapper {
  margin-left: 300px;
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.main {
  flex: 1;
  padding: 32px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}

.page{display:none}
.page.active{display:block;animation: pageFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px}
.page-header h2{font-size:22px;font-weight:800}
.page-header p{color:var(--text2);font-size:13px;margin-top:4px}

/* CARDS */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
}
[data-theme="dark"] .card {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.card:hover {
  box-shadow: var(--shadow-lg), 0 12px 40px rgba(201, 168, 76, 0.08);
  transform: translateY(-3px);
  border-color: rgba(201, 168, 76, 0.35);
}
[data-theme="dark"] .card:hover {
  box-shadow: var(--shadow-lg), 0 16px 48px rgba(0, 0, 0, 0.45);
  border-color: rgba(201, 168, 76, 0.35);
}
.card-sm { padding: 16px; }
.cards-grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

/* STAT CARDS */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-card::before{
  content:'';
  position:absolute;
  inset:-2px;
  background: linear-gradient(135deg,
    rgba(201, 168, 76, 0.20),
    rgba(201, 168, 76, 0.16),
    rgba(167, 139, 250, 0.18)
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events:none;
}
.stat-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 220px at 20% 10%, rgba(255,255,255,0.22), transparent 60%),
    radial-gradient(700px 240px at 90% 30%, rgba(255,255,255,0.16), transparent 62%);
  opacity: 0.85;
  pointer-events:none;
}
.stat-card > *{ position: relative; z-index: 1; }
.stat-card:hover::before{ opacity: 1; }

/* Colorful dashboard blocks (stat cards) */
.stat-card.theme-blue{ background: linear-gradient(135deg, rgba(201, 168, 76,0.32), rgba(184, 150, 12,0.22)); }
.stat-card.theme-purple{ background: linear-gradient(135deg, rgba(212, 175, 55,0.32), rgba(184, 150, 12,0.22)); }
.stat-card.theme-green{ background: linear-gradient(135deg, rgba(16,185,129,0.28), rgba(74, 124, 89,0.20)); }
.stat-card.theme-amber{ background: linear-gradient(135deg, rgba(230, 200, 76,0.32), rgba(249,115,22,0.22)); }

[data-theme="dark"] .stat-card.theme-blue{ background: linear-gradient(135deg, rgba(201, 168, 76,0.28), rgba(184, 150, 12,0.16)); }
[data-theme="dark"] .stat-card.theme-purple{ background: linear-gradient(135deg, rgba(167,139,250,0.28), rgba(184, 150, 12,0.16)); }
[data-theme="dark"] .stat-card.theme-green{ background: linear-gradient(135deg, rgba(52,211,153,0.24), rgba(74, 124, 89,0.14)); }
[data-theme="dark"] .stat-card.theme-amber{ background: linear-gradient(135deg, rgba(251,191,36,0.26), rgba(249,115,22,0.14)); }
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
}
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 4px;
}
.stat-icon.blue { background: rgba(201, 168, 76, 0.1); color: var(--primary); }
.stat-icon.purple { background: rgba(139, 92, 246, 0.1); color: #D4AF37; }
.stat-icon.green { background: rgba(74, 124, 89, 0.1); color: var(--success); }
.stat-icon.amber { background: rgba(230, 200, 76, 0.1); color: var(--warning); }
.stat-icon.red { background: rgba(192, 57, 43, 0.1); color: var(--danger); }

.stat-card h3 { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--text-main); margin: 0; }
.stat-card p { font-size: 14px; color: var(--text-muted); font-weight: 500; margin: 0; }
.stat-card .trend { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; width: fit-content; }
.trend-up { background: rgba(74,124,89,0.15); color: #3D6B4A; }
.trend-dn { background: rgba(192,57,43,0.12); color: #8B1A1A; }


/* SECTION HEADER */
.section-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.section-hd h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--text-main); }

.btn-sm {
  font-size: 12px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: rgba(201, 168, 76, 0.08);
  border: 1.5px solid rgba(201, 168, 76, 0.15);
  color: var(--primary);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-sm:hover { 
  background: var(--primary); 
  color: white;
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201, 168, 76, 0.2);
}


/* TABLE */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 16px; text-align: left; border-bottom: 1px solid var(--border-color); }
td { font-size: 14px; color: var(--text-main); padding: 16px; border-bottom: 1px solid var(--border-color); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-main); }


/* BADGES */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
.badge-green{background:rgba(16,185,129,0.15);color:var(--accent3)}
.badge-red{background:rgba(192, 57, 43,0.15);color:var(--accent5)}
.badge-amber{background:rgba(230, 200, 76,0.15);color:var(--accent4)}
.badge-blue{background:rgba(79,142,247,0.15);color:var(--accent)}
.badge-purple{background:rgba(212, 175, 55,0.15);color:var(--accent2)}

/* SPEAK & LEARN — CHAT UI */
.chat-container{
  display:flex; flex-direction:column; gap:12px;
  max-height:420px; overflow-y:auto; padding:8px 4px;
  scroll-behavior:smooth;
}
.chat-container::-webkit-scrollbar{width:5px}
.chat-container::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:999px}
.chat-empty{
  text-align:center; padding:32px 16px; color:var(--text-muted);
}
.chat-empty-icon{font-size:48px; margin-bottom:12px; opacity:0.6}
.chat-empty h4{font-size:16px; font-weight:700; color:var(--text-main); margin-bottom:6px}
.chat-empty p{font-size:13px; line-height:1.5}
.chat-bubble{
  max-width:85%; padding:12px 16px; border-radius:18px;
  font-size:14px; line-height:1.6; position:relative;
  animation: chatIn 0.25s ease-out;
  word-break:break-word;
}
@keyframes chatIn{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.chat-bubble-user{
  align-self:flex-end;
  background:var(--grad1); color:#fff;
  border-bottom-right-radius:6px;
}
.chat-bubble-assistant{
  align-self:flex-start;
  background:var(--bg-card); color:var(--text-main);
  border:1px solid var(--border-color);
  border-bottom-left-radius:6px;
}
.chat-bubble .chat-time{
  font-size:10px; opacity:0.7; margin-top:6px; display:block;
}
.chat-bubble-user .chat-time{text-align:right}
.chat-bubble-actions{
  display:flex; gap:6px; margin-top:8px; flex-wrap:wrap;
}
.chat-bubble-actions button{
  font-size:11px; padding:5px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.3); background:transparent;
  color:inherit; cursor:pointer; transition:all 0.15s;
  display:inline-flex; align-items:center; gap:4px;
}
.chat-bubble-actions button:hover{
  background:rgba(255,255,255,0.15);
}
.chat-bubble-assistant .chat-bubble-actions button{
  border-color:var(--border-color); color:var(--text-muted);
}
.chat-bubble-assistant .chat-bubble-actions button:hover{
  background:var(--bg-main); color:var(--text-main);
}
.chat-status{
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  font-size:13px; color:var(--text-muted); font-weight:500;
}
.chat-status .fa-circle-notch{color:var(--primary)}
.chat-status .fa-volume-up{color:var(--success)}
.chat-status .fa-microphone{color:var(--danger)}

/* Quick question chips */
.quick-chips{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;
}
.quick-chip{
  font-size:12px; padding:6px 14px; border-radius:999px;
  border:1px solid var(--border-color); background:var(--bg-main);
  color:var(--text-muted); cursor:pointer; white-space:nowrap;
  transition:all 0.15s; font-weight:500;
}
.quick-chip:hover{
  background:var(--primary); color:#fff; border-color:var(--primary);
  transform:translateY(-1px);
}

/* Voice pulse animation for mic */
.voice-pulse{
  position:relative;
}
.voice-pulse::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--danger);
  animation: voicePulseRing 1.2s ease-out infinite;
}
@keyframes voicePulseRing{
  0%{transform:scale(1);opacity:0.8}
  100%{transform:scale(1.8);opacity:0}
}

/* Speed slider */
.speed-slider-wrap{
  display:flex; align-items:center; gap:8px;
}
.speed-slider-wrap input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100px; height:6px;
  background:var(--border-color); border-radius:999px; outline:none;
}
.speed-slider-wrap input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px;
  border-radius:50%; background:var(--primary); cursor:pointer;
}
.speed-slider-wrap .speed-label{
  font-size:12px; font-weight:700; color:var(--text-main);
  min-width:36px; text-align:center;
}

/* Settings bar */
.settings-bar{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
}
.settings-bar .setting-group{
  display:flex; align-items:center; gap:6px;
}
.settings-bar label{
  font-size:11px; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:0.03em; white-space:nowrap;
}
.settings-bar select{
  font-size:12px; padding:6px 10px; border-radius:8px;
  border:1px solid var(--border-color); background:var(--bg-main);
  color:var(--text-main); font-family:var(--font-main);
  font-weight:500; cursor:pointer;
}

/* Practice mode */
.practice-card{
  text-align:center; padding:20px;
}
.practice-word{
  font-size:28px; font-weight:800; color:var(--text-main);
  font-family:var(--font-heading); margin-bottom:8px;
}
.practice-phonetic{
  font-size:14px; color:var(--text-muted); margin-bottom:16px;
}
.practice-result{
  margin-top:16px; padding:16px; border-radius:var(--radius-md);
  font-weight:700; font-size:14px;
}
.practice-match{background:rgba(74, 124, 89,0.1);color:var(--success)}
.practice-mismatch{background:rgba(192, 57, 43,0.1);color:var(--danger)}

/* ── Voice speaking waveform ── */
.voice-waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 32px;
  margin-bottom: 8px;
}
.voice-waveform span {
  display: inline-block;
  width: 4px;
  height: 16px;
  background: var(--primary);
  border-radius: 4px;
  animation: voiceWave 0.8s ease-in-out infinite alternate;
}
.voice-waveform span:nth-child(1) { animation-delay: 0s; height: 12px; }
.voice-waveform span:nth-child(2) { animation-delay: 0.1s; height: 22px; }
.voice-waveform span:nth-child(3) { animation-delay: 0.2s; height: 28px; }
.voice-waveform span:nth-child(4) { animation-delay: 0.3s; height: 20px; }
.voice-waveform span:nth-child(5) { animation-delay: 0.4s; height: 14px; }
@keyframes voiceWave {
  0% { transform: scaleY(0.5); opacity: 0.5; }
  100% { transform: scaleY(1.2); opacity: 1; }
}

/* ── Speaking chat bubble highlight ── */
.chat-bubble.speaking {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 1px var(--primary), 0 0 20px rgba(201,168,76,0.15);
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* ── Voice settings mobile responsive ── */
@media (max-width: 480px) {
  .settings-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .setting-group {
    flex-wrap: wrap;
  }
  .speed-slider-wrap input[type="range"] {
    width: 80px;
  }
  /* Quick-chips horizontal scroll on mobile */
  .quick-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 6px;
    margin-bottom: 10px;
  }
  .quick-chip {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 5px 12px;
    white-space: nowrap;
  }
  /* Compact chat container */
  .chat-container {
    max-height: 240px;
  }
  .chat-bubble {
    padding: 10px 14px;
    font-size: 13px;
  }
  .chat-bubble .chat-time {
    font-size: 9px;
  }
}

/* PROGRESS */
.progress-bar{height:6px;background:var(--bg3);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;border-radius:999px;transition:width 1s ease}

/* STUDENT WELLNESS INTELLIGENCE */
.wellness-feature-panel{
  position:relative;
  overflow:hidden;
  padding:18px;
  border:1px solid rgba(201, 168, 76,0.22);
  border-radius:18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(45,212,191,0.20), transparent 28%),
    radial-gradient(circle at 94% 14%, rgba(244,114,182,0.16), transparent 30%),
    linear-gradient(135deg, rgba(184, 150, 12,0.10), rgba(212, 175, 55,0.08) 52%, rgba(16,185,129,0.10));
}
.wellness-feature-panel::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0.20), transparent 34%, rgba(255,255,255,0.12));
  pointer-events:none;
}
.wellness-feature-panel > *{position:relative;z-index:1}
.wellness-feature-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.66);
  color:#7A6320;
  font-size:11px;
  font-weight:900;
  margin-bottom:10px;
  border:1px solid rgba(201, 168, 76,0.22);
}
[data-theme="dark"] .wellness-feature-kicker{background:rgba(10, 10, 10,0.68);color:#D4AF37}
.wellness-result{
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(45,212,191,0.24);
  background:
    linear-gradient(135deg, rgba(10, 10, 10,0.96), rgba(26, 26, 26,0.94) 48%, rgba(158, 130, 40,0.86));
  color:#fff;
  box-shadow:0 20px 48px rgba(10, 10, 10,0.20);
}
.wellness-result-hero{
  position:relative;
  padding:18px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(160px,220px);
  gap:16px;
  background:
    radial-gradient(circle at 8% 0%, rgba(201, 168, 76,0.32), transparent 34%),
    radial-gradient(circle at 88% 22%, rgba(212, 175, 55,0.28), transparent 34%);
}
.wellness-result-hero h4{
  margin:0 0 8px;
  color:#fff;
  font-size:20px;
  font-weight:900;
  letter-spacing:0;
}
.wellness-ai-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.13);
  border:1px solid rgba(255,255,255,0.18);
  color:#dffcff;
  font-size:11px;
  font-weight:900;
  margin-bottom:10px;
}
.wellness-score-dial{
  align-self:stretch;
  min-height:156px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:conic-gradient(from 220deg, var(--wellness-tone), rgba(255,255,255,0.18), var(--wellness-tone));
  box-shadow:inset 0 0 0 10px rgba(255,255,255,0.12), 0 16px 34px rgba(0,0,0,0.22);
}
.wellness-score-dial strong{font-size:42px;line-height:1;font-weight:900}
.wellness-score-dial span{font-size:12px;font-weight:900;color:rgba(255,255,255,0.88)}
.wellness-score-caption{font-size:13px;color:rgba(255,255,255,0.78);line-height:1.55;max-width:680px}
.wellness-metric-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  padding:14px;
  background:rgba(255,255,255,0.07);
}
.wellness-metric{
  border-radius:16px;
  padding:13px;
  background:rgba(255,255,255,0.92);
  color:#1A1A1A;
  border:1px solid rgba(255,255,255,0.34);
}
[data-theme="dark"] .wellness-metric{background:rgba(10, 10, 10,0.86);color:#F5F5F5;border-color:rgba(160, 160, 160,0.20)}
.wellness-metric-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.wellness-metric-icon{
  width:34px;
  height:34px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:var(--metric-color);
}
.wellness-metric-label{font-size:12px;font-weight:900;color:inherit}
.wellness-metric-value{font-size:26px;font-weight:900;line-height:1;color:inherit}
.wellness-metric-sub{font-size:12px;color:rgba(60, 60, 60,0.92);line-height:1.45;margin-top:7px}
[data-theme="dark"] .wellness-metric-sub{color:rgba(203,213,225,0.82)}
.wellness-bar{
  height:7px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(160, 160, 160,0.22);
  margin-top:10px;
}
.wellness-bar-fill{
  height:100%;
  border-radius:999px;
  width:var(--metric-width);
  background:linear-gradient(90deg, var(--metric-color), rgba(45,212,191,0.86));
}
.wellness-insight-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,253,250,0.96));
}
[data-theme="dark"] .wellness-insight-grid{background:linear-gradient(180deg, rgba(10, 10, 10,0.94), rgba(26, 26, 26,0.96))}
.wellness-insight{
  border-radius:16px;
  padding:14px;
  border:1px solid rgba(158, 130, 40,0.14);
  background:#fff;
  color:#1A1A1A;
  box-shadow:0 8px 20px rgba(10, 10, 10,0.06);
}
[data-theme="dark"] .wellness-insight{background:rgba(10, 10, 10,0.78);color:#F5F5F5;border-color:rgba(160, 160, 160,0.18)}
.wellness-insight-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;color:#7A6320;margin-bottom:8px}
.wellness-insight-value{font-size:20px;font-weight:900;color:inherit;line-height:1.15;margin-bottom:6px}
.wellness-insight-detail{font-size:12px;color:rgba(60, 60, 60,0.94);line-height:1.55}
[data-theme="dark"] .wellness-insight-detail{color:rgba(203,213,225,0.84)}
.wellness-companion{
  margin:0 14px 14px;
  padding:15px;
  border-radius:16px;
  color:#1A1A1A;
  background:linear-gradient(135deg, #EEEEEE, #F5F5F5 58%, #F5F5F5);
  border:1px solid rgba(184, 150, 12,0.18);
}
[data-theme="dark"] .wellness-companion{color:#F5F5F5;background:linear-gradient(135deg, rgba(8,47,73,0.72), rgba(46,16,101,0.56), rgba(20,83,45,0.52));border-color:rgba(125,211,252,0.18)}
.wellness-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 14px;
}
.academic-mri-hero{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  padding:22px;
  margin-bottom:16px;
  background:
    radial-gradient(circle at 18% 18%, rgba(56,189,248,.30), transparent 30%),
    radial-gradient(circle at 84% 24%, rgba(168,85,247,.24), transparent 32%),
    linear-gradient(135deg,#020617,#111827 48%,#312e81);
  color:#fff;
  border:1px solid rgba(125,211,252,.22);
  box-shadow:0 22px 60px rgba(2,6,23,.32), inset 0 1px 0 rgba(255,255,255,.08);
}
.academic-mri-hero::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:linear-gradient(115deg, transparent 42%, rgba(56,189,248,.18) 50%, transparent 58%);
  animation:academicMriSweep 3.8s ease-in-out infinite;
}
.academic-mri-hero > *{position:relative;z-index:1}
.academic-mri-dial{
  width:132px;
  height:132px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 0 34px rgba(56,189,248,.26);
}
.academic-mri-dial-core{
  width:104px;
  height:104px;
  border-radius:50%;
  background:rgba(2,6,23,.92);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
@keyframes academicMriSweep{
  0%{transform:translateX(-42%) rotate(0deg);opacity:.35}
  50%{opacity:1}
  100%{transform:translateX(42%) rotate(0deg);opacity:.35}
}
@media (max-width:900px){
  .wellness-result-hero{grid-template-columns:1fr}
  .wellness-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wellness-insight-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wellness-form-grid,.wellness-metric-grid{grid-template-columns:1fr}
}

/* CHART CONTAINER */
.chart-wrap{position:relative;height:200px}

/* ANNOUNCEMENT / FEED */
.feed-item{
  display:flex;gap:12px;padding:14px;border-radius:12px;margin-bottom:8px;
  background:var(--bg3);border:1px solid transparent;transition:all 0.2s;
}
.feed-item:hover{border-color:var(--border);transform:translateX(4px);background:var(--card2)}
.feed-icon{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.feed-item h4{font-size:13px;font-weight:600;margin-bottom:3px}
.feed-item p{font-size:12px;color:var(--text2);line-height:1.5}
.feed-item time{font-size:11px;color:var(--text3)}

/* AVATAR */
.avatar{
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;
}

/* TOGGLE */
.toggle-tabs{
  display:flex;background:var(--bg3);border-radius:12px;padding:4px;gap:4px;
  margin-bottom:20px;
}
.toggle-tab{
  flex:1;padding:8px;border-radius:9px;font-size:13px;font-weight:600;
  color:var(--text2);transition:all 0.2s;
}
.toggle-tab.active{background:var(--card);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,0.3)}

/* MODAL OVERLAY */
@keyframes modalZoom { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(2,6,15,0.8);z-index:1000;
  align-items:center;justify-content:center;backdrop-filter:blur(12px);
}
.modal-overlay.open{display:flex}
.modal-overlay.open .modal-box{animation: modalZoom 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;}
.modal-box{
  background:var(--card2);border:1px solid var(--border);border-radius:24px;
  padding:32px;width:480px;max-height:85vh;overflow-y:auto;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
.modal-box h3{font-size:18px;font-weight:800;margin-bottom:16px}
.modal-close{
  background:var(--bg3);border:none;width:32px;height:32px;border-radius:8px;
  color:var(--text2);font-size:16px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;float:right;margin-top:-4px;
}

/* INPUT STYLE */
.input-group{margin-bottom:16px}
.input-group label{font-size:12px;font-weight:700;color:var(--text2);display:block;margin-bottom:6px;letter-spacing:0.3px}
.inp{
  width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;color:var(--text);font-family:inherit;font-size:14px;outline:none;
  transition:all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.inp:focus{border-color:var(--accent);box-shadow: 0 0 0 3px rgba(56,189,248,0.15), inset 0 2px 4px rgba(0,0,0,0.1);}
.btn-primary{
  padding:14px 24px;background:var(--grad1);border-radius:12px;
  color:#fff;font-size:14px;font-weight:700;transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 16px rgba(184, 150, 12,0.15);
}
.btn-primary:hover{opacity:0.95;transform:translateY(-2px);box-shadow:0 12px 28px rgba(184, 150, 12,0.35)}
.btn-danger{
  padding:10px 20px;background:rgba(192, 57, 43,0.15);border:1px solid rgba(192, 57, 43,0.3);
  border-radius:10px;color:var(--accent5);font-size:13px;font-weight:600;
}
.btn-ghost{
  padding:12px 24px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius:var(--radius-md);
  color:var(--text-main);
  font-size:14px;
  font-weight:700;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-ghost:hover {
  background: var(--bg-main);
  border-color: var(--text-muted);
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
}


/* ECO/POINTS */
.points-ring{
  width:100px;height:100px;position:relative;display:flex;align-items:center;
  justify-content:center;flex-direction:column;
}
.points-ring svg{position:absolute;top:0;left:0}

/* FOOD CARD */
.food-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:14px;
  display:flex;gap:12px;align-items:center;margin-bottom:10px;
}
.food-img{
  width:52px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0;
  background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:28px;
}

/* SOS */
.sos-btn{
  width:124px;height:124px;border-radius:50%;
  background: radial-gradient(circle at 30% 25%, #E8A0A0 0%, #C0392B 35%, #8B1A1A 100%);
  color:#fff;font-size:34px;font-weight:950;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-family:inherit;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    0 0 0 0 rgba(192, 57, 43,0.42),
    0 18px 44px rgba(192, 57, 43,0.28),
    0 8px 18px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.45);
  animation: sosPulse 1.25s infinite, sosWobble 3.2s ease-in-out infinite;
  gap:5px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@keyframes sosPulse{
  0%{ box-shadow:0 0 0 0 rgba(192, 57, 43,0.44), 0 18px 44px rgba(192, 57, 43,0.28), 0 8px 18px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.45); transform: scale(1); }
  55%{ box-shadow:0 0 0 28px rgba(192, 57, 43,0), 0 22px 56px rgba(192, 57, 43,0.34), 0 10px 22px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.5); transform: scale(1.03); }
  100%{ box-shadow:0 0 0 0 rgba(192, 57, 43,0), 0 18px 44px rgba(192, 57, 43,0.28), 0 8px 18px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.45); transform: scale(1); }
}
@keyframes sosWobble{
  0%,100%{ filter: saturate(1); }
  50%{ filter: saturate(1.25); }
}
.sos-btn span{font-size:12px;font-weight:600;opacity:0.85}
.sos-btn:active{ transform: scale(0.96) !important; }

.sos-modal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top: 14px;
}
.sos-action-btn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(160, 160, 160,0.35);
  background: rgba(255,255,255,0.08);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 800;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
[data-theme="dark"] .sos-action-btn{
  background: rgba(10, 10, 10,0.28);
  border-color: rgba(160, 160, 160,0.22);
}

/* TIMER */
.focus-timer{
  font-family:'Space Grotesk',sans-serif;font-size:64px;font-weight:700;
  text-align:center;color:var(--accent);letter-spacing:-2px;
  background:var(--bg3);border-radius:20px;padding:32px;margin-bottom:20px;
}

/* LEARNING COMPANION */
.companion-scene{
  position:relative;min-height:380px;border-radius:28px;overflow:hidden;margin-bottom:20px;
  border:1px solid rgba(201, 168, 76,0.2);box-shadow:0 20px 50px rgba(201, 168, 76,0.12);
}
.companion-bg-meadow{background:linear-gradient(165deg,#F5F5F5 0%,#EEEEEE 45%,rgba(201,168,76,0.15) 100%);}
.companion-bg-aurora{background:linear-gradient(165deg,#1A1A1A 0%,#7A6320 40%,#B8960C 100%);}
.companion-bg-sunset{background:linear-gradient(165deg,#F5F5F5 0%,#fdba74 45%,#D4AF37 100%);}
.companion-bg-ocean{background:linear-gradient(165deg,#EEEEEE 0%,#D4AF37 40%,#C9A84C 100%);}
[data-theme="dark"] .companion-bg-meadow{background:linear-gradient(165deg,rgba(6,78,59,0.45),rgba(30,58,138,0.35),rgba(120,53,15,0.2));}
[data-theme="dark"] .companion-bg-aurora{background:linear-gradient(165deg,#1A1A1A,rgba(49,46,129,0.8),rgba(158, 130, 40,0.35));}
.companion-scene-stars{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.companion-scene-stars span{
  position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.85);
  animation:companionTwinkle 3s ease-in-out infinite;
}
@keyframes companionTwinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
.companion-ground{
  position:absolute;left:0;right:0;bottom:0;height:92px;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(74, 124, 89,0.18),rgba(22,163,74,0.42));
}
.companion-world-floor{
  position:absolute;left:0;right:0;bottom:82px;z-index:2;
  display:flex;align-items:flex-end;justify-content:center;gap:0;
  padding:0 4% 0;min-height:150px;pointer-events:none;
}
.companion-world-slot{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  flex:0 0 26%;min-height:120px;
}
.companion-world-slot.slot-center{
  flex:1 1 auto;min-width:140px;max-width:220px;position:relative;
  align-items:center;padding-bottom:6px;
}
.companion-world-base{
  display:block;width:72%;max-width:72px;height:7px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(10, 10, 10,0.14),transparent 72%);
  margin-top:6px;flex-shrink:0;
}
.companion-world-placeholder{
  min-height:44px;width:100%;
}
.companion-home-display,.companion-garden-display{
  position:relative;left:auto;right:auto;bottom:auto;
  line-height:1;text-align:center;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.16));
  transition:font-size .4s ease,opacity .35s ease,transform .4s ease;
  transform-origin:center bottom;
}
.companion-home-display.is-visible,.companion-garden-display.is-visible{
  animation:companionWorldPop .45s ease-out;
}
@keyframes companionWorldPop{
  0%{opacity:.4;transform:scale(.82) translateY(8px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
.companion-avatar-platform{
  width:78%;max-width:160px;height:28px;border-radius:50%;margin-top:2px;
  background:radial-gradient(ellipse,rgba(255,255,255,0.55),rgba(201, 168, 76,0.08));
  box-shadow:0 6px 20px rgba(201, 168, 76,0.2);z-index:1;
}
.companion-aura{
  position:absolute;left:50%;bottom:28%;transform:translateX(-50%);
  width:110px;height:110px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(201, 168, 76,0.2),transparent 70%);
  animation:companionAuraPulse 3.5s ease-in-out infinite;
}
@keyframes companionAuraPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.6}50%{transform:translateX(-50%) scale(1.06);opacity:.9}}
.companion-tree{
  position:absolute;left:50%;bottom:58%;transform:translateX(-50%);
  line-height:1;filter:drop-shadow(0 8px 16px rgba(0,0,0,0.12));
  transition:font-size .4s ease;z-index:1;pointer-events:none;
}
.companion-pet-wrap{
  position:relative;z-index:3;
  display:flex;align-items:flex-end;justify-content:center;
  perspective:720px;perspective-origin:center 78%;
}
.companion-pet-3d{
  position:relative;transform-style:preserve-3d;
  filter:drop-shadow(0 14px 22px rgba(201, 168, 76,0.32));
  animation:companion3dFloat 4.2s ease-in-out infinite;
}
@keyframes companion3dFloat{
  0%,100%{transform:rotateY(-11deg) rotateX(5deg) translateY(0);}
  50%{transform:rotateY(11deg) rotateX(-4deg) translateY(-10px);}
}
.companion-pet-figure{
  position:relative;transform-style:preserve-3d;
  display:flex;flex-direction:column;align-items:center;
}
.companion-pet-glow{
  position:absolute;inset:-22%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(201, 168, 76,0.28),transparent 68%);
  animation:companionGlowPulse 3.2s ease-in-out infinite;
}
@keyframes companionGlowPulse{
  0%,100%{opacity:.45;transform:scale(.94);}
  50%{opacity:.95;transform:scale(1.08);}
}
.companion-pet-shadow{
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  width:68%;height:10px;border-radius:50%;z-index:0;
  background:radial-gradient(ellipse,rgba(201, 168, 76,0.28),transparent 72%);
  animation:companionShadowBob 4.2s ease-in-out infinite;
}
@keyframes companionShadowBob{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.58;}
  50%{transform:translateX(-50%) scale(.86);opacity:.35;}
}
.companion-pet-cape{
  position:absolute;top:18%;left:50%;transform:translateX(-50%) translateZ(-6px);
  font-size:.55em;line-height:1;z-index:0;opacity:.92;
}
.companion-pet-head-3d{
  position:relative;z-index:4;
  width:1.1em;height:1.1em;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transform:translateZ(20px) translateY(.1em);
  box-shadow:
    inset -7px -11px 18px rgba(0,0,0,0.2),
    inset 9px 9px 20px rgba(255,255,255,0.38),
    0 14px 28px rgba(201, 168, 76,0.28);
}
.companion-pet-head-shine{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 30% 26%, rgba(255,255,255,0.62), transparent 48%);
}
.companion-pet-face{
  position:relative;z-index:2;font-size:.74em;line-height:1;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}
.companion-pet-torso-3d{
  position:relative;z-index:2;
  width:1.16em;height:.94em;margin-top:-.2em;
  border-radius:46% 46% 42% 42%;
  transform:translateZ(10px);
  box-shadow:
    inset -9px -13px 20px rgba(0,0,0,0.16),
    inset 7px 9px 16px rgba(255,255,255,0.3),
    0 16px 30px rgba(201, 168, 76,0.24);
}
.companion-pet-belly-3d{
  position:absolute;left:50%;top:40%;transform:translateX(-50%);
  width:52%;height:40%;border-radius:50%;
  background:rgba(255,255,255,0.24);
  box-shadow:inset 0 -3px 8px rgba(0,0,0,0.08);
}
.companion-pet-arm-3d{
  position:absolute;top:26%;
  width:.28em;height:.28em;border-radius:50%;
  box-shadow:inset -3px -4px 6px rgba(0,0,0,0.14), 0 5px 10px rgba(0,0,0,0.12);
}
.companion-pet-arm-3d.left{left:-.14em;transform:translateZ(16px);}
.companion-pet-arm-3d.right{right:-.14em;transform:translateZ(16px);}
.companion-pet-feet-3d{
  display:flex;gap:.36em;margin-top:-.1em;position:relative;z-index:1;
  transform:translateZ(6px);
}
.companion-pet-foot-3d{
  width:.32em;height:.24em;border-radius:50% 50% 40% 40%;
  box-shadow:inset 0 -4px 6px rgba(0,0,0,0.16), 0 7px 12px rgba(0,0,0,0.12);
}
.companion-costume-hat{
  position:absolute;top:-.42em;left:50%;transform:translateX(-50%) translateZ(24px);
  font-size:.5em;line-height:1;z-index:5;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,0.15));
}
.companion-pet-sparkles{
  position:absolute;inset:-18%;pointer-events:none;z-index:6;
  transform:translateZ(30px);
}
.companion-pet-sparkles i{
  position:absolute;font-size:.22em;color:#D4AF37;opacity:0;
  animation:companionSparkle 2.8s ease-in-out infinite;
  text-shadow:0 0 6px rgba(251,191,36,0.8);
}
.companion-pet-sparkles i:nth-child(1){left:10%;top:22%;animation-delay:0s;}
.companion-pet-sparkles i:nth-child(2){right:8%;top:28%;animation-delay:.9s;}
.companion-pet-sparkles i:nth-child(3){left:40%;top:6%;animation-delay:1.8s;}
@keyframes companionSparkle{
  0%,100%{opacity:0;transform:translateY(0) scale(.8);}
  50%{opacity:1;transform:translateY(-8px) scale(1.1);}
}
.companion-pet.talking .companion-pet-3d{animation:companion3dTalk .52s ease-in-out infinite;}
@keyframes companion3dTalk{
  0%,100%{transform:rotateY(-7deg) rotateX(3deg) translateY(-2px);}
  50%{transform:rotateY(7deg) rotateX(-2deg) translateY(-7px);}
}
.companion-pet.celebrate .companion-pet-3d{animation:companion3dCelebrate .68s cubic-bezier(.34,1.56,.64,1) 2;}
@keyframes companion3dCelebrate{
  0%,100%{transform:rotateY(0) translateY(0) scale(1);}
  28%{transform:rotateY(14deg) translateY(-18px) scale(1.1);}
  58%{transform:rotateY(-10deg) translateY(-9px) scale(1.05);}
}
.companion-pet.happy .companion-pet-glow{animation:companionGlowBurst .85s ease-out;}
@keyframes companionGlowBurst{
  0%{opacity:.35;transform:scale(.88);}
  45%{opacity:1;transform:scale(1.22);}
  100%{opacity:.55;transform:scale(1);}
}
.companion-pet.talking .companion-pet-face{animation:companionFaceBounce .52s ease-in-out infinite;}
@keyframes companionFaceBounce{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.06);}
}
.companion-level-badge{
  position:absolute;top:16px;right:16px;z-index:5;
  padding:8px 14px;border-radius:999px;font-size:11px;font-weight:800;
  background:rgba(255,255,255,0.92);border:1px solid rgba(201, 168, 76,0.2);
  color:var(--primary);backdrop-filter:blur(8px);
}
.companion-xp-bar{
  position:absolute;left:16px;right:16px;bottom:14px;z-index:5;
  height:10px;border-radius:999px;background:rgba(255,255,255,0.35);overflow:hidden;
  border:1px solid rgba(255,255,255,0.4);
}
.companion-xp-fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,#C9A84C,#6A9A6A,#E6C84C);
  transition:width .5s ease;
}
.companion-speech{
  position:relative;z-index:3;margin:20px 20px 0;padding:16px 18px;
  background:rgba(255,255,255,0.94);border:1px solid rgba(201, 168, 76,0.14);
  border-radius:18px 18px 18px 6px;font-size:14px;line-height:1.6;color:var(--text-main);
  box-shadow:0 10px 30px rgba(10, 10, 10,0.08);
}
[data-theme="dark"] .companion-speech{background:rgba(10, 10, 10,0.88);border-color:rgba(201, 168, 76,0.22);}
.companion-picker-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;
}
.companion-picker-card{
  padding:12px 8px;border-radius:16px;text-align:center;cursor:pointer;
  border:2px solid var(--border-color);background:var(--bg-main);
  transition:border-color .2s,transform .15s,box-shadow .2s;
}
.companion-picker-card:hover{transform:translateY(-2px);}
.companion-picker-card.selected{
  border-color:var(--primary);box-shadow:0 0 0 3px rgba(201, 168, 76,0.15);
  background:linear-gradient(180deg,rgba(201, 168, 76,0.06),var(--bg-main));
}
.companion-picker-emoji{font-size:32px;line-height:1;margin-bottom:6px;}
.companion-picker-label{font-size:10px;font-weight:800;color:var(--text-muted);}
.companion-study-timer{
  text-align:center;padding:20px;border-radius:20px;
  background:linear-gradient(135deg,rgba(201, 168, 76,0.08),rgba(16,185,129,0.06));
  border:1px solid rgba(201, 168, 76,0.14);
}
.companion-timer-display{
  font-family:'Space Grotesk',sans-serif;font-size:52px;font-weight:800;
  letter-spacing:-2px;color:var(--primary);margin:12px 0;
}
.companion-duration-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px;}
.companion-duration-chip{
  padding:8px 14px;border-radius:999px;font-size:12px;font-weight:800;cursor:pointer;
  border:1px solid var(--border-color);background:var(--bg-main);color:var(--text-muted);
  transition:all .15s ease;
}
.companion-duration-chip.active,.companion-duration-chip:hover{
  border-color:var(--primary);color:var(--primary);background:rgba(201, 168, 76,0.08);
}
.companion-lb-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--bg-main);border-radius:14px;border:1px solid var(--border-color);margin-bottom:8px;
}
.companion-lb-item.is-me{outline:2px solid var(--success);outline-offset:0;}
.companion-lb-rank{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:14px;color:#fff;flex-shrink:0;
}
.companion-evolution-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px;}
.companion-stage-card{
  padding:14px 10px;border-radius:16px;text-align:center;border:1px solid var(--border-color);
  background:var(--bg-main);transition:border-color .2s,box-shadow .2s;
}
.companion-stage-card.active{border-color:rgba(201, 168, 76,0.45);box-shadow:0 0 0 2px rgba(201, 168, 76,0.12);}
.companion-stage-card.locked{opacity:0.55;}
.companion-community-unlock{
  padding:14px;border-radius:14px;border:1px dashed var(--border-color);
  background:var(--bg-main);text-align:center;
}
.companion-community-unlock.unlocked{border-style:solid;border-color:rgba(74, 124, 89,0.35);background:rgba(74, 124, 89,0.06);}
.companion-dash-widget{
  display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:18px;
  background:linear-gradient(135deg,rgba(16,185,129,0.08),rgba(201, 168, 76,0.06));
  border:1px solid rgba(16,185,129,0.18);cursor:pointer;transition:transform .15s ease;
}
.companion-dash-widget:hover{transform:translateY(-2px);}
.companion-dash-avatar{
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:36px;background:linear-gradient(135deg,rgba(201, 168, 76,0.2),rgba(16,185,129,0.15));
  border:2px solid rgba(201, 168, 76,0.3);box-shadow:0 8px 24px rgba(201, 168, 76,0.2);
}
.companion-costume-badge{display:none;}
.companion-deco-float{
  position:absolute;top:18%;font-size:26px;z-index:3;animation:companionDecoFloat 4s ease-in-out infinite;
}
.companion-deco-float.left{left:12%;}
.companion-deco-float.right{right:12%;animation-delay:1.2s;}
@keyframes companionDecoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.companion-level-next{
  padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,rgba(201, 168, 76,0.08),rgba(16,185,129,0.06));
  border:1px solid rgba(201, 168, 76,0.14);margin-bottom:16px;
}
.companion-chat-panel{
  border-top:1px solid var(--border-color);padding:16px 20px;background:var(--bg3);
}
.companion-chat-messages{
  min-height:320px;max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;
  margin-bottom:12px;padding-right:4px;
}
.companion-chat-bubble{
  max-width:88%;padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.55;
}
.companion-chat-bubble.pet{
  align-self:flex-start;background:rgba(201, 168, 76,0.12);border:1px solid rgba(201, 168, 76,0.2);
  border-radius:16px 16px 16px 4px;color:var(--text-main);
}
.companion-chat-bubble.user{
  align-self:flex-end;background:var(--primary);color:#fff;border-radius:16px 16px 4px 16px;
}
.companion-chat-input-row{display:flex;gap:8px;margin-bottom:10px;align-items:stretch;}
.companion-chat-input-row .inp{flex:1;min-height:52px;font-size:14px;}
.companion-chat-send{
  width:46px;min-width:46px;height:46px;padding:0;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.companion-chat-send i{margin:0;font-size:14px;}
.companion-chat-quick{display:flex;flex-wrap:wrap;gap:6px;}
.companion-chat-quick button{
  padding:6px 12px;border-radius:999px;font-size:11px;font-weight:700;cursor:pointer;
  border:1px solid var(--border-color);background:var(--bg-main);color:var(--text-muted);
}
.companion-chat-quick button:hover{border-color:var(--primary);color:var(--primary);}
.companion-lb-tier-pill{
  font-size:10px;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px;white-space:nowrap;
}
.companion-lb-tier-pill.t-grandmaster{color:#D4AF37;border:1px solid rgba(192,38,211,0.35);background:rgba(192,38,211,0.08)}
.companion-lb-tier-pill.t-master{color:#C9A84C;border:1px solid rgba(147,51,234,0.35);background:rgba(147,51,234,0.08)}
.companion-lb-tier-pill.t-platinum{color:#B8960C;border:1px solid rgba(184, 150, 12,0.35);background:rgba(184, 150, 12,0.08)}
.companion-lb-tier-pill.t-gold{color:#9E8228;border:1px solid rgba(230, 200, 76,0.4);background:rgba(230, 200, 76,0.1)}
.companion-lb-tier-pill.t-silver{color:#888888;border:1px solid rgba(160, 160, 160,0.4);background:rgba(160, 160, 160,0.12)}
.companion-lb-item.t-grandmaster{border-color:rgba(192,38,211,0.35)}
.companion-lb-item.t-master{border-color:rgba(147,51,234,0.3)}
.companion-lb-item.t-platinum{border-color:rgba(184, 150, 12,0.35)}
.companion-lb-item.t-gold{border-color:rgba(230, 200, 76,0.4)}
.companion-lb-item.t-silver{border-color:rgba(160, 160, 160,0.35)}
@media (max-width:700px){
  .companion-evolution-track{grid-template-columns:repeat(2,minmax(0,1fr));}
  .companion-world-slot{flex-basis:24%;}
  .companion-world-floor{padding:0 2%;}
}

/* LEADERBOARD */
.lb-item{
  display:flex;align-items:center;gap:12px;padding:12px;
  background:var(--bg3);border-radius:12px;margin-bottom:8px;
}
.lb-rank{font-size:20px;font-weight:800;width:28px;text-align:center;flex-shrink:0}
.lb-rank.grandmaster{color:#D4AF37}
.lb-rank.master{color:#C9A84C}
.lb-rank.platinum{color:#B8960C}
.lb-rank.gold{color:#E6C84C}
.lb-rank.silver{color:#94A3B8}
.lb-rank.bronze{color:#7A6320}
.eco-lb-item{border:1px solid var(--border)}
.eco-lb-item.eco-lb-grandmaster{border-color:rgba(192,38,211,0.45);box-shadow:0 0 0 1px rgba(192,38,211,0.12) inset}
.eco-lb-item.eco-lb-master{border-color:rgba(147,51,234,0.4)}
.eco-lb-item.eco-lb-platinum{border-color:rgba(184, 150, 12,0.45)}
.eco-lb-item.eco-lb-gold{border-color:rgba(230, 200, 76,0.5)}
.eco-lb-item.eco-lb-silver{border-color:rgba(160, 160, 160,0.45)}
.eco-lb-item.eco-lb-bronze{border-color:rgba(180,83,9,0.35)}
.eco-tier-pill{
  font-size:10px;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--border);background:var(--bg-main);color:var(--text-muted);
}
.eco-tier-pill.t-grandmaster{color:#D4AF37;border-color:rgba(192,38,211,0.35);background:rgba(192,38,211,0.08)}
.eco-tier-pill.t-master{color:#C9A84C;border-color:rgba(147,51,234,0.35);background:rgba(147,51,234,0.08)}
.eco-tier-pill.t-platinum{color:#B8960C;border-color:rgba(184, 150, 12,0.35);background:rgba(184, 150, 12,0.08)}
.eco-tier-pill.t-gold{color:#9E8228;border-color:rgba(230, 200, 76,0.4);background:rgba(230, 200, 76,0.1)}
.eco-tier-pill.t-silver{color:#888888;border-color:rgba(160, 160, 160,0.4);background:rgba(160, 160, 160,0.12)}
.eco-tier-pill.t-bronze{color:#7A6320;border-color:rgba(180,83,9,0.35);background:rgba(180,83,9,0.08)}
.eco-lb-rank-badge{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:14px;flex-shrink:0;color:#fff;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    z-index: 1001;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow:
      24px 0 80px rgba(0, 0, 0, 0.35),
      1px 0 0 rgba(255, 255, 255, 0.08) inset;
  }
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s;
    backdrop-filter: blur(2px);
  }
  .sidebar-overlay.open {
    display: block;
    opacity: 1;
  }
  .main-wrapper {
    margin-left: 0;
  }
  .mobile-menu-toggle {
    display: flex;
  }
}

/* ── Tablet / large phones (≤ 768 px) ── */
@media (max-width: 768px) {
  /* Bottom nav */
  .bottom-nav { display: flex; }

  /* Main content */
  .main {
    padding: 16px 14px;
    padding-bottom: calc(var(--bottom-nav-height) + 20px);
  }

  /* Top header */
  .top-header { padding: 0 12px; height: 56px; }
  :root { --nav-height: 56px; }
  .header-right { gap: 6px; }
  .profile-trigger { padding: 5px 8px; gap: 6px; }

  /* Page headers */
  .page-header { flex-direction: column; gap: 8px; margin-bottom: 12px !important; }
  .page-header h2 { font-size: 20px; }
  .page-header p  { font-size: 12px; }

  /* Section headers */
  .section-hd { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 10px; }
  .section-hd h3 { font-size: 16px; }

  /* Dashboard: override inline margin-bottom: 32px on card grids */
  .cards-grid[style*="margin-bottom: 32px"],
  .cards-grid[style*="margin-bottom:32px"] { margin-bottom: 14px !important; }

  /* Dashboard: override inline margin-bottom: 32px on .card elements */
  .card[style*="margin-bottom: 32px"],
  .card[style*="margin-bottom:32px"] { margin-bottom: 14px !important; }

  /* Announcement / Quick actions inner padding */
  .card > div[style*="padding: 20px"],
  .card > div[style*="padding:20px"] { padding: 14px !important; }

  /* All grids collapse to 1 column */
  .cards-grid.g4,
  .cards-grid.g3,
  .cards-grid.g2 { grid-template-columns: 1fr; gap: 12px; }

  /* Cards */
  .card      { padding: 16px; }
  .stat-card { padding: 16px; gap: 10px; }
  .card-sm   { padding: 12px; }
  .stat-card h3 { font-size: 22px; }

  /* Modals slide up from bottom */
  .modal-overlay { align-items: flex-end; }
  .modal-box {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    max-height: 90vh;
  }

  /* Feed items */
  .feed-item { padding: 12px; gap: 10px; }

  /* Tables scroll horizontally */
  .card table, table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .card table th, .card table td,
  table th, table td {
    padding: 12px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Co-curriculum vertical */
  .cca-notice-row {
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    gap: 10px;
  }
  .cca-notice-card { flex: 1 1 auto; width: 100%; min-height: unset; }

  /* Flex rows inside cards wrap */
  .card > div[style*="display: flex"],
  .card > div[style*="display:flex"] { flex-wrap: wrap; }

  /* Toggle tabs */
  .toggle-tabs { gap: 2px; }
  .toggle-tab  { padding: 8px 6px; font-size: 12px; }

  /* Buttons */
  .btn-sm { padding: 9px 14px; font-size: 12px; }

  /* FAB */
  .gemini-fab {
    right: 14px;
    bottom: calc(var(--bottom-nav-height) + 14px);
    padding: 12px 16px;
    font-size: 13px;
  }
}

/* ── Small phones (≤ 480 px) ── */
@media (max-width: 480px) {
  /* Auth screens — bottom sheet style */
  #login-screen, #signup-screen {
    padding: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px));
    align-items: flex-end;
  }
  .login-box {
    padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px));
    max-width: 100%;
    border-radius: 24px 24px 0 0;
  }
  #login-screen .login-box {
    padding: 28px 18px calc(28px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
  }
  #login-screen .login-box h1 { font-size: 32px; }
  #login-screen .login-logo   { width: 80px; height: 80px; margin-bottom: 18px; }

  /* Main padding */
  .main {
    padding: 12px 10px;
    padding-bottom: calc(var(--bottom-nav-height) + 16px);
  }

  /* Cards */
  .card, .stat-card { padding: 14px; }
  .card[style]      { padding: 14px !important; }

  /* Dashboard: collapse all 32px gaps to 10px on small phones */
  .cards-grid[style*="margin-bottom: 32px"],
  .cards-grid[style*="margin-bottom:32px"] { margin-bottom: 10px !important; }
  .card[style*="margin-bottom: 32px"],
  .card[style*="margin-bottom:32px"]       { margin-bottom: 10px !important; }

  /* Compact page header on small phones */
  .page-header[style*="margin-bottom: 32px"],
  .page-header[style*="margin-bottom:32px"] { margin-bottom: 10px !important; }

  /* Page titles */
  .page-header h2 { font-size: 18px; }
  .top-header     { height: 52px; }
  :root           { --nav-height: 52px; }

  /* Focus timer */
  .focus-timer { font-size: 36px; padding: 20px; }

  /* SOS button */
  .sos-btn { width: 108px; height: 108px; font-size: 28px; }

  /* Avoid iOS input zoom */
  input, select, textarea, .inp { font-size: 16px; }

  /* Media safety net */
  img, video, svg, canvas { max-width: 100%; height: auto; }
  pre, code { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Word break safety */
  .card, .modal-box, .page, #main-content { overflow-wrap: anywhere; word-break: break-word; }

  /* Touch targets */
  button, .btn-primary, .btn-sm, .btn-ghost, .btn-login { min-height: 44px; }

  /* Points ring */
  .points-ring { width: 80px; height: 80px; }

  /* Bottom nav items */
  .bottom-nav-item     { max-width: 72px; gap: 4px; }
  .bottom-nav-icon-wrap { width: 42px; height: 42px; border-radius: 13px; }
  .bottom-nav-item i   { font-size: 17px; }
  .bottom-nav-label    { font-size: 9px; }

  /* Grid gaps */
  .cards-grid.g4, .cards-grid.g3, .cards-grid.g2 { gap: 10px; }

  /* Stat numbers */
  .stat-card h3 { font-size: 20px; }
  .section-hd h3 { font-size: 15px; }

  /* Modal padding with safe area */
  .modal-box { padding: 20px 14px calc(20px + env(safe-area-inset-bottom, 0px)); }

  /* Leaderboard */
  .lb-item { padding: 10px; gap: 10px; }
  .lb-rank { font-size: 17px; width: 24px; }

  /* Feed */
  .feed-item { padding: 10px; gap: 8px; }
  .feed-icon { width: 30px; height: 30px; font-size: 13px; }
}

/* ── Very small phones (≤ 360 px) ── */
@media (max-width: 360px) {
  .main {
    padding: 10px 8px;
    padding-bottom: calc(var(--bottom-nav-height) + 14px);
  }
  .card, .stat-card { padding: 12px; }
  .page-header h2   { font-size: 16px; }
  .bottom-nav-item  { max-width: 64px; }
  .bottom-nav-icon-wrap { width: 38px; height: 38px; }
  .bottom-nav-label { font-size: 8px; }
  .login-box        { padding: 20px 14px calc(20px + env(safe-area-inset-bottom, 0px)); }
}


/* ATTENDANCE MAP */
.att-map{
  background:var(--bg3);border-radius:16px;padding:20px;text-align:center;
  border:1px solid var(--border);
}
.att-map-icon{font-size:48px;margin-bottom:12px}
.att-status{
  display:inline-flex;align-items:center;gap:8px;padding:10px 20px;
  border-radius:999px;font-size:14px;font-weight:700;margin-top:12px;
}
.att-status.checked-in{background:rgba(16,185,129,0.15);color:var(--accent3)}
.att-status.not-checked{background:rgba(192, 57, 43,0.15);color:var(--accent5)}

/* CHART CANVAS HEIGHT FIX */
canvas{max-width:100%}

/* QUIZ */
.quiz-option{
  width:100%;text-align:left;padding:14px 16px;background:var(--bg3);
  border:1px solid var(--border);border-radius:10px;color:var(--text);
  font-size:14px;font-weight:500;margin-bottom:8px;
  transition:all 0.2s;
}
.quiz-option:hover{border-color:var(--accent);background:rgba(79,142,247,0.08)}
.quiz-option.correct{border-color:var(--accent3);background:rgba(16,185,129,0.1);color:var(--accent3)}
.quiz-option.wrong{border-color:var(--accent5);background:rgba(192, 57, 43,0.1);color:var(--accent5)}

.quiz-battle-shell{display:flex;flex-direction:column;gap:18px}
.quiz-battle-hero{
  position:relative;overflow:hidden;border-radius:24px;padding:24px;
  display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:18px;align-items:center;
  color:#fff;border:1px solid rgba(125,211,252,.24);
  background:
    radial-gradient(circle at 12% 18%, rgba(56,189,248,.34), transparent 30%),
    radial-gradient(circle at 86% 22%, rgba(168,85,247,.32), transparent 34%),
    linear-gradient(135deg,#020617,#111827 48%,#312e81);
  box-shadow:0 22px 60px rgba(2,6,23,.28), inset 0 1px 0 rgba(255,255,255,.10);
}
.quiz-battle-hero::before{
  content:"";position:absolute;inset:-40%;
  background:linear-gradient(115deg, transparent 43%, rgba(56,189,248,.16) 50%, transparent 57%);
  animation:academicMriSweep 4.2s ease-in-out infinite;
}
.quiz-battle-hero>*{position:relative;z-index:1}
.quiz-battle-hero h2{font-family:var(--font-heading);font-size:32px;line-height:1.08;margin:8px 0;color:#fff}
.quiz-battle-hero p{font-size:13px;line-height:1.65;color:rgba(255,255,255,.78);max-width:780px;margin:0}
.quiz-battle-pill,.quiz-battle-feature-row span{
  display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  font-size:11px;font-weight:900;color:#e0f2fe;
}
.quiz-battle-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.quiz-battle-rank-card{
  min-height:190px;border-radius:20px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.20);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:16px;backdrop-filter:blur(16px);
}
.quiz-battle-rank-ring{
  width:106px;height:106px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;box-shadow:0 0 34px rgba(56,189,248,.25);
  margin-bottom:10px;
}
.quiz-battle-rank-ring strong{font-size:34px;line-height:1;color:#fff}
.quiz-battle-rank-ring span,.quiz-battle-rank-card p{font-size:11px;color:rgba(255,255,255,.72);font-weight:800;margin:0}
.quiz-battle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.quiz-battle-panel{margin:0}
.quiz-battle-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.quiz-battle-feature-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.quiz-battle-feature-row span{color:var(--text-muted);background:var(--bg3);border-color:var(--border-color)}
.quiz-battle-lb{display:flex;flex-direction:column;gap:8px;max-height:380px;overflow:auto;padding-right:4px}
.quiz-battle-lb-row{
  display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px;align-items:center;
  padding:11px;border-radius:14px;background:var(--bg3);border:1px solid var(--border-color);
}
.quiz-battle-lb-row.me{background:rgba(59,130,246,.10);border-color:rgba(59,130,246,.25)}
.quiz-battle-lb-rank{
  width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#38bdf8,#8b5cf6);color:#fff;font-weight:950;font-size:12px;
}
.quiz-battle-lb-row b{font-size:13px;color:var(--text-main)}
.quiz-battle-lb-row p{font-size:11px;color:var(--text-muted);margin:3px 0 0}
.quiz-battle-stage{margin:0;min-height:220px}
.quiz-battle-empty{text-align:center;padding:28px 10px;color:var(--text-muted)}
.quiz-battle-empty i{font-size:34px;color:var(--primary);margin-bottom:10px}
.quiz-battle-empty h3{font-size:20px;color:var(--text-main);margin:0 0 6px}
.quiz-battle-question-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.quiz-battle-question-meta span{font-size:11px;font-weight:900;color:var(--text-muted);background:var(--bg3);border:1px solid var(--border-color);border-radius:999px;padding:6px 9px}
.quiz-battle-question h3{font-size:20px;color:var(--text-main);line-height:1.35;margin:0 0 14px}
.quiz-battle-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.quiz-battle-feedback{margin-top:14px;padding:14px;border-radius:16px;border:1px solid var(--border-color);background:var(--bg3)}
.quiz-battle-feedback.correct{border-color:rgba(16,185,129,.32);background:rgba(16,185,129,.10)}
.quiz-battle-feedback.wrong{border-color:rgba(239,68,68,.32);background:rgba(239,68,68,.10)}
.quiz-battle-feedback p{font-size:13px;color:var(--text-muted);line-height:1.6;margin:6px 0 12px}
.quiz-battle-result-grid,.quiz-battle-analytics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.quiz-battle-analytics{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:0}
@media(max-width:900px){
  .quiz-battle-hero,.quiz-battle-grid{grid-template-columns:1fr}
  .quiz-battle-rank-card{min-height:150px}
  .quiz-battle-result-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .quiz-battle-hero{padding:18px}
  .quiz-battle-hero h2{font-size:26px}
  .quiz-battle-form,.quiz-battle-options,.quiz-battle-analytics{grid-template-columns:1fr}
}

/* NOTIFICATION DOT */
.notif-dot{
  width:8px;height:8px;background:var(--accent5);border-radius:50%;
  display:inline-block;margin-left:4px;vertical-align:middle;
}

/* SCROLL */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ============================================================
   MOBILE RESPONSIVENESS — COMPREHENSIVE FIX
   ============================================================ */

/* === GLOBAL: Prevent horizontal overflow, allow vertical === */
html, body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100vw;
  height: auto !important;
  min-height: 100vh;
}

/* The app shell must never exceed the viewport */
#app {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Main wrapper must fill exactly the available space, no more */
.main-wrapper {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* All cards, grids, tables are contained */
.card, .stat-card, .cards-grid, .page, #main-content {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Profile dropdown: never overflow */
#profile-dropdown {
  width: min(220px, calc(100vw - 24px)) !important;
  right: 0 !important;
  left: auto !important;
}

/* ============================================================
   TABLET / LARGE MOBILE  (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .main-wrapper {
    width: 100vw;
    max-width: 100vw;
  }
}

/* ============================================================
   MOBILE  (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* --- Core layout --- */
  #app { flex-direction: column; }

  .main-wrapper {
    margin-left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .main {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* --- Toast: below top nav --- */
  #toast-container {
    top: calc(var(--nav-height) + 10px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  /* --- Top header --- */
  .header-right[style] { gap: 6px !important; }
  #header-user-name { display: none !important; }
  .app-page-title { font-size: 15px; max-width: calc(100vw - 180px); }
  .profile-trigger { padding: 5px 8px !important; gap: 5px !important; }
  .profile-trigger .fa-chevron-down { display: none; }

  /* --- All CSS-class grids collapse to 1 col --- */
  .cards-grid.g2,
  .cards-grid.g3,
  .cards-grid.g4 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* --- ALL inline grid overrides (JS-rendered HTML) --- */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Stat pill rows — keep 2-across if they're small enough */
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* --- All inline flex rows wrap --- */
  [style*="display: flex"],
  [style*="display:flex"] {
    flex-wrap: wrap !important;
  }

  /* But navigation rows and icon rows stay unwrapped */
  .bottom-nav,
  .header-left,
  .header-right,
  .nav-item,
  .bottom-nav-item,
  .gmail-input,
  .badge,
  .feed-item,
  .lb-item,
  .toggle-tabs,
  #teacher-att-tabs,
  .food-card,
  .sidebar-brand-row,
  .sos-modal-actions,
  .maintenance-chip,
  .notif-item,
  .section-hd {
    flex-wrap: nowrap !important;
  }

  /* Section-hd: allow wrap only when needed */
  .section-hd { flex-wrap: wrap !important; gap: 6px; }

  /* --- Page headers --- */
  .page-header { flex-direction: column !important; gap: 8px; margin-bottom: 12px !important; flex-wrap: wrap !important; }
  .page-header h2 { font-size: 20px !important; }
  .page-header > div { flex-wrap: wrap !important; gap: 6px; }

  /* --- Cards --- */
  .card, .stat-card { padding: 16px !important; box-sizing: border-box; }
  .card-sm { padding: 12px !important; }
  .stat-card h3 { font-size: 22px; }

  /* --- All inline padding on card children --- */
  .card > div[style*="padding"] { padding: 14px !important; }

  /* --- Tables scroll inside their container --- */
  table, .card table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
  }
  th, td { padding: 10px 12px; font-size: 12px; white-space: nowrap; }

  /* --- Charts --- */
  .chart-wrap, .chart-wrap[style] { height: 160px !important; }

  /* --- Toggle tabs: horizontal scroll, no wrap --- */
  .toggle-tabs,
  #teacher-att-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
    gap: 6px !important;
  }
  .toggle-tab { flex: 0 0 auto !important; white-space: nowrap; }
  #teacher-att-tabs button { flex: 0 0 auto !important; white-space: nowrap; }

  /* --- Modals slide up --- */
  .modal-overlay { align-items: flex-end !important; }
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 90vh !important;
  }

  /* --- Focus timer --- */
  .focus-timer { font-size: 48px; padding: 24px; }

  /* --- Feed --- */
  .feed-item { padding: 12px; gap: 10px; }

  /* --- FAB --- */
  .gemini-fab {
    right: 14px;
    bottom: calc(var(--bottom-nav-height) + 14px);
    padding: 12px 16px;
    font-size: 13px;
  }

  /* --- Section headers --- */
  .section-hd { margin-bottom: 12px; gap: 6px; }
  .section-hd h3 { font-size: 15px; }

  /* --- Body text readability --- */
  body { font-size: 15px; }
  p, li, .text-body { font-size: 14px; line-height: 1.6; }

  /* --- Toggle tabs --- */
  .toggle-tabs { gap: 4px; padding: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .toggle-tab { padding: 8px 10px; font-size: 12px; white-space: nowrap; flex: 0 0 auto; }

  /* --- Buttons --- */
  .btn-primary, .btn-login { min-height: 46px; padding: 12px 18px; font-size: 14px; }
  .btn-ghost { min-height: 44px; padding: 10px 16px; font-size: 13px; }
  .btn-sm { min-height: 38px; padding: 8px 14px; font-size: 12px; }

  /* --- Badge chip sizing --- */
  .badge { padding: 4px 10px; font-size: 10px; }

  /* --- Card internal spacing --- */
  .card > div[style*="gap"] { gap: 12px !important; }

  /* --- CCA carousel --- */
  .cca-notice-row { flex-direction: column !important; overflow-x: visible; scroll-snap-type: none; padding-bottom: 0; gap: 10px; }
  .cca-notice-card { flex: 1 1 auto !important; width: 100% !important; min-height: unset !important; }

  /* --- Text overflow safety --- */
  h1, h2, h3, h4, h5, h6, p, span, a, label, td, th {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Images contained */
  img, canvas, svg, video { max-width: 100% !important; }
}

/* ============================================================
   SMALL PHONES  (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {

  /* Force truly all grids to single column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Attendance stat pills: keep 2-col (big numbers) */
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Auth: bottom-sheet */
  #login-screen, #signup-screen { padding: 10px; align-items: flex-end; }
  .login-box { padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px)); max-width: 100%; border-radius: 24px 24px 0 0; }
  #login-screen .login-box { padding: 28px 18px calc(28px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; }
  #login-screen .login-box h1 { font-size: 32px !important; }
  #login-screen .login-logo { width: 80px !important; height: 80px !important; margin-bottom: 18px; }

  /* Main padding — more breathing room */
  .main { padding: 14px 12px !important; padding-bottom: calc(var(--bottom-nav-height) + 16px) !important; }

  /* Cards — tighter but comfortable */
  .card, .stat-card { padding: 14px !important; }
  .card-sm { padding: 10px !important; }
  .stat-card h3 { font-size: 20px; }
  
  /* Section headers — compact */
  .section-hd { gap: 6px; margin-bottom: 10px; }
  .section-hd h3 { font-size: 15px; }

  /* App title */
  .app-page-title { font-size: 14px !important; max-width: calc(100vw - 160px) !important; }

  /* Top header */
  .top-header { height: 52px; }
  :root { --nav-height: 52px; }

  /* Inputs: prevent iOS zoom */
  input, select, textarea, .inp { font-size: 16px !important; }
  
  /* Buttons — consistent touch targets */
  .btn-primary, .btn-login, .btn-ghost { min-height: 46px; padding: 12px 16px; font-size: 14px; }
  .btn-sm { min-height: 40px; padding: 10px 14px; font-size: 12px; }

  /* Bottom nav — swipable items with comfortable gap */
  .bottom-nav { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .bottom-nav-item { max-width: 72px; gap: 3px; padding: 6px 8px; min-height: 66px; }
  .bottom-nav-icon-wrap { width: 42px !important; height: 42px !important; border-radius: 13px !important; }
  .bottom-nav-item i { font-size: 17px; }
  .bottom-nav-label { font-size: 9px; }

  /* Focus timer */
  .focus-timer { font-size: 36px; padding: 20px; }

  /* SOS */
  .sos-btn { width: 108px !important; height: 108px !important; font-size: 28px !important; }

  /* Modal */
  .modal-box { padding: 20px 14px calc(20px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Charts */
  .chart-wrap, .chart-wrap[style] { height: 140px !important; }

  /* Leaderboard */
  .lb-item { padding: 10px; gap: 10px; }
  .lb-rank { font-size: 17px; width: 24px; }

  /* Feed */
  .feed-item { padding: 10px; gap: 8px; }
  .feed-icon { width: 30px !important; height: 30px !important; font-size: 13px !important; }

  /* Points ring */
  .points-ring { width: 80px; height: 80px; }

  /* Profile dropdown */
  #profile-dropdown { width: calc(100vw - 24px) !important; right: -8px !important; }

  /* Notif badge */
  #notif-count-badge { font-size: 8px !important; min-width: 12px !important; height: 12px !important; }
}

/* ============================================================
   VERY SMALL  (≤ 360px)
   ============================================================ */
@media (max-width: 360px) {
  .main { padding: 10px 8px !important; padding-bottom: calc(var(--bottom-nav-height) + 12px) !important; }
  .card, .stat-card { padding: 12px !important; }
  .card-sm { padding: 8px !important; }
  .page-header { gap: 6px; margin-bottom: 12px !important; }
  .page-header h2 { font-size: 16px !important; }
  .page-header p { font-size: 11px; }
  .section-hd h3 { font-size: 14px; }
  
  /* Bottom nav — compact */
  .bottom-nav { gap: 2px; padding-left: 4px; padding-right: 4px; }
  .bottom-nav-item { max-width: 64px; min-width: 48px; padding: 4px 6px; min-height: 58px; }
  .bottom-nav-icon-wrap { width: 36px !important; height: 36px !important; }
  .bottom-nav-item i { font-size: 15px; }
  .bottom-nav-label { font-size: 8px; }
  
  /* Auth */
  .login-box { padding: 20px 14px calc(20px + env(safe-area-inset-bottom, 0px)) !important; }
  #login-screen .login-box { padding: 24px 14px calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
  #login-screen .login-box h1 { font-size: 28px !important; }
  #login-screen .login-logo { width: 72px !important; height: 72px !important; margin-bottom: 14px; }
  
  /* Title */
  .app-page-title { font-size: 13px !important; max-width: calc(100vw - 140px) !important; }
  
  /* Buttons */
  .btn-primary, .btn-login, .btn-ghost { min-height: 42px; padding: 10px 14px; font-size: 13px; }
  .btn-sm { min-height: 36px; padding: 8px 12px; font-size: 11px; }
  
  /* Compact feed */
  .feed-item { padding: 8px; gap: 6px; }
  .feed-icon { width: 28px !important; height: 28px !important; font-size: 11px !important; }
  .feed-item h4 { font-size: 12px; }
  .feed-item p { font-size: 11px; }
  
  /* Stat cards */
  .stat-card { gap: 8px; }
  .stat-card h3 { font-size: 18px; }
  
  /* Focus timer */
  .focus-timer { font-size: 28px; padding: 14px; }
}

/* ============================================================
   SAFE AREA / NOTCH (iPhone X+)
   ============================================================ */
@supports (padding: max(0px)) {
  .bottom-nav {
    padding-bottom: max(env(safe-area-inset-bottom), 8px);
  }
  @media (max-width: 768px) {
    .top-header {
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
    }
    .main {
      padding-left: max(14px, env(safe-area-inset-left)) !important;
      padding-right: max(14px, env(safe-area-inset-right)) !important;
    }
  }
}

/* ============================================================
   LANDSCAPE PHONES (short height)
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .login-box { padding: 18px 20px; }
  #login-screen .login-logo { width: 60px; height: 60px; margin-bottom: 12px; }
  #login-screen .login-box h1 { font-size: 26px; }
  .main { padding-top: 8px !important; padding-bottom: calc(var(--bottom-nav-height) + 8px) !important; }
  .chart-wrap { height: 120px !important; }
  .bottom-nav { height: 60px; gap: 2px; padding-left: 4px; padding-right: 4px; }
  .bottom-nav-icon-wrap { width: 36px !important; height: 36px !important; }
  .bottom-nav-label { display: none; }
  :root { --bottom-nav-height: 60px; }
}

/* ============================================================
   TOUCH DEVICES — disable sticky hover effects
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .card:hover,
  .stat-card:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .btn-sm:hover,
  .feed-item:hover,
  .gemini-fab:hover,
  .companion-picker-card:hover,
  .companion-dash-widget:hover,
  .companion-chat-quick button:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .card:hover { border-color: var(--border-color); }
  .feed-item:hover { border-color: transparent; background: var(--bg3); }
  .btn-primary:hover { opacity: 1; }
  .btn-ghost:hover { background: transparent; }
  .companion-picker-card:hover { transform: none; }
}
<<<<<<< HEAD

/* ===== QUIZ BATTLE ARENA ===== */
.battle-room-code {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 12px;
  color: var(--primary);
  font-family: monospace;
  text-align: center;
}
.battle-opt-btn {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid var(--border-color);
  background: var(--bg-main);
  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}
.battle-opt-btn:hover {
  border-color: var(--primary) !important;
  background: rgba(79,70,229,0.06) !important;
}
.battle-opt-btn:disabled {
  opacity: 0.85;
  cursor: default;
}
.battle-opt-btn.correct {
  border-color: #10b981;
  background: rgba(16,185,129,0.1);
}
.battle-opt-btn.wrong {
  border-color: #ef4444;
  background: rgba(239,68,68,0.1);
}
.battle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.battle-stat {
  text-align: center;
}
.battle-stat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.battle-stat-value {
  font-size: 22px;
  font-weight: 900;
}
.battle-stat-value.score { color: var(--primary); }
.battle-stat-value.timer { color: var(--accent3); font-family: monospace; }
.battle-stat-value.timer.urgent { color: var(--danger); }
.battle-stat-value.timer.warning { color: var(--amber); }
.battle-stat-value.streak { color: var(--amber); }
.battle-stat-value.xp { color: var(--accent3); }
.battle-stat-value.lives { font-size: 20px; }
.battle-player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  margin-bottom: 6px;
}
.battle-player-row.self {
  background: rgba(79,70,229,0.1);
  border-color: var(--primary);
}
.battle-player-row.ai {
  opacity: 0.8;
}
.battle-player-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}
.battle-player-avatar.rank-1 { background: var(--amber); }
.battle-player-avatar.ai { background: var(--accent3); }
.battle-player-name {
  flex: 1;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-main);
}
.battle-player-score {
  font-weight: 900;
  font-size: 16px;
  color: var(--primary);
}
.battle-rank-number {
  font-size: 18px;
  font-weight: 900;
  min-width: 30px;
}
.battle-rank-number.rank-1 { color: var(--amber); }
.battle-rank-number.other { color: var(--text-muted); }
.battle-lobby-card {
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.battle-lobby-card:hover {
  border-color: var(--primary);
  background: rgba(79,70,229,0.03);
}
.battle-lobby-icon {
  font-size: 32px;
  margin-bottom: 10px;
}
.battle-lobby-title {
  margin-bottom: 6px;
  font-weight: 700;
}
.battle-lobby-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.battle-public-room {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.battle-public-room:hover {
  border-color: var(--primary);
}
.battle-topic-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  margin-bottom: 4px;
}
.battle-topic-name {
  font-size: 12px;
  font-weight: 700;
  flex: 1;
  color: var(--text-main);
}
.battle-progress-bar {
  width: 60px;
  height: 5px;
  border-radius: 3px;
  background: var(--border-color);
  overflow: hidden;
}
.battle-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}
.battle-progress-fill.good { background: var(--accent3); }
.battle-progress-fill.ok { background: var(--amber); }
.battle-progress-fill.bad { background: var(--accent5); }
.battle-pct-label {
  font-size: 10px;
  font-weight: 800;
  min-width: 30px;
  text-align: right;
}
.battle-pct-label.good { color: var(--accent3); }
.battle-pct-label.ok { color: var(--amber); }
.battle-pct-label.bad { color: var(--accent5); }
.battle-history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  margin-bottom: 6px;
}
.battle-history-mode-icon { font-size: 16px; }
.battle-history-info { flex: 1; }
.battle-history-title { font-weight: 700; font-size: 13px; }
.battle-history-date { font-size: 10px; color: var(--text-muted); }
.battle-history-score { font-weight: 900; color: var(--primary); }
.battle-history-xp { font-size: 11px; color: var(--accent3); font-weight: 700; }
.battle-history-acc { font-size: 11px; color: var(--text-muted); }
.spm-gauge-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
}
.spm-gauge-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 28px;
  font-weight: 900;
}
.spm-grade-display {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}
.spm-message {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.analytics-bar {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
}
.analytics-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.analytics-day-bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  background: var(--primary);
  transition: height 0.3s;
  min-height: 4px;
}
.analytics-day-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
}
.analytics-day-acc {
  font-size: 8px;
}
.analytics-day-acc.good { color: var(--accent3); }
.analytics-day-acc.bad { color: var(--accent5); }

/* ===================== BATTLE ANIMATIONS ===================== */

/* Battle result entrance */
@keyframes battleResultEnter {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Rank up bounce */
@keyframes rankUpBounce {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* Leaderboard slide-in */
@keyframes leaderboardSlideIn {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Achievement pop-in */
@keyframes achievementPopIn {
  0% { opacity: 0; transform: translateX(100%) scale(0.8); }
  60% { transform: translateX(-5%) scale(1.05); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Confetti fall */
@keyframes confettiFall {
  0% { transform: translate(0,0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) rotate(var(--rot)); opacity: 0; }
}

/* Question slide-in */
@keyframes questionSlideIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Correct answer glow */
@keyframes correctGlow {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
  50% { box-shadow: 0 0 20px 4px rgba(16,185,129,0.3); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* Wrong answer shake */
@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

/* Timer pulse (when low) */
@keyframes timerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Streak fire effect */
@keyframes streakFire {
  0% { text-shadow: 0 0 4px #F59E0B, 0 0 8px #EF4444; }
  50% { text-shadow: 0 0 8px #F59E0B, 0 0 16px #EF4444, 0 0 24px #F59E0B; }
  100% { text-shadow: 0 0 4px #F59E0B, 0 0 8px #EF4444; }
}

/* XP bar fill animation */
@keyframes xpBarFill {
  from { width: 0%; }
}

/* Score float up */
@keyframes scoreFloatUp {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(1.3); }
}

/* Answer button hover pulse */
@keyframes answerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Countdown ring shrink */
@keyframes countdownShrink {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 94.2; }
}

/* Top 3 glow */
@keyframes topThreeGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(201,168,76,0.3); }
  50% { box-shadow: 0 0 20px rgba(201,168,76,0.6); }
}

/* Rank moving up */
@keyframes rankMoveUp {
  from { transform: translateY(20px); opacity: 0.5; }
  to { transform: translateY(0); opacity: 1; }
}

/* Rank moving down */
@keyframes rankMoveDown {
  from { transform: translateY(-20px); opacity: 0.5; }
  to { transform: translateY(0); opacity: 1; }
}

/* Battle detail expand */
@keyframes battleDetailExpand {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 300px; }
}

/* Celebration burst */
@keyframes celebrateBurst {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Floating particles */
@keyframes floatUp {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-80px) scale(0); opacity: 0; }
}

/* Mode card entrance */
@keyframes modeCardEnter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===================== BATTLE UI STYLES ===================== */

.battle-mode-card {
  animation: modeCardEnter 0.4s ease both;
}
.battle-mode-card:nth-child(1) { animation-delay: 0s; }
.battle-mode-card:nth-child(2) { animation-delay: 0.05s; }
.battle-mode-card:nth-child(3) { animation-delay: 0.1s; }
.battle-mode-card:nth-child(4) { animation-delay: 0.15s; }
.battle-mode-card:nth-child(5) { animation-delay: 0.2s; }
.battle-mode-card:nth-child(6) { animation-delay: 0.25s; }
.battle-mode-card:nth-child(7) { animation-delay: 0.3s; }
.battle-mode-card:nth-child(8) { animation-delay: 0.35s; }

.battle-mode-card:hover {
  border-color: var(--primary) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
}

/* Question card animation */
.battle-question-card {
  animation: questionSlideIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

/* Answer option buttons */
.battle-opt-btn {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid var(--border-color);
  background: var(--bg-main);
  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  overflow: hidden;
}
.battle-opt-btn:hover {
  border-color: var(--primary);
  background: rgba(201,168,76,0.05);
  transform: translateX(4px);
  animation: answerPulse 1.5s ease-in-out infinite;
}
.battle-opt-btn:active {
  transform: scale(0.97);
}
.battle-opt-btn.correct {
  border-color: #10b981 !important;
  background: rgba(16,185,129,0.1) !important;
  animation: correctGlow 0.6s ease;
}
.battle-opt-btn.wrong {
  border-color: #ef4444 !important;
  background: rgba(239,68,68,0.1) !important;
  animation: wrongShake 0.5s ease;
}

/* Timer display */
.battle-timer-display {
  font-size: 22px;
  font-weight: 900;
  font-family: monospace;
  transition: color 0.3s;
}
.battle-timer-display.urgent {
  color: var(--danger) !important;
  animation: timerPulse 0.5s ease-in-out infinite;
}
.battle-timer-display.warning {
  color: var(--amber);
}

/* Streak display */
.battle-streak-fire {
  animation: streakFire 0.8s ease-in-out infinite;
}

/* Score popup */
.score-popup {
  position: fixed;
  pointer-events: none;
  font-weight: 900;
  font-size: 24px;
  z-index: 1000;
  animation: scoreFloatUp 1.2s ease-out forwards;
}

/* Leaderboard row */
.leaderboard-row {
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.leaderboard-row:hover {
  transform: scale(1.02);
  background: rgba(201,168,76,0.08) !important;
}
.leaderboard-row.top-1 {
  animation: topThreeGlow 2s ease-in-out infinite;
  border-color: #C9A84C !important;
}
.leaderboard-row.top-2 {
  border-color: #A0A0A0 !important;
}
.leaderboard-row.top-3 {
  border-color: #CD7F32 !important;
}
.leaderboard-row.moving-up {
  animation: rankMoveUp 0.4s ease;
}
.leaderboard-row.moving-down {
  animation: rankMoveDown 0.4s ease;
}

/* XP bar fill */
.xp-bar-fill {
  animation: xpBarFill 1s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* Achievement toast */
.achievement-toast {
  pointer-events: auto;
}

/* Countdown circle */
.countdown-ring {
  transition: stroke-dashoffset 1s linear;
}

/* Battle page enter animation */
#quiz-battle-lobby {
  animation: battleResultEnter 0.4s ease;
}

/* Daily mission progress */
.mission-progress-fill {
  transition: width 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

/* Responsive battle cards */
@media (max-width: 600px) {
  .battle-mode-card {
    padding: 10px !important;
  }
  .battle-mode-card > div:first-child {
    font-size: 22px !important;
  }
  .battle-opt-btn {
    padding: 12px 14px;
    font-size: 13px;
  }
}

/* ===================== XP DROPLET ANIMATION ===================== */
@keyframes xpDropFloat {
  0% { opacity: 1; transform: translateY(0) scale(0.5); }
  30% { opacity: 1; transform: translateY(-30px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.8); }
}

.xp-droplet {
  animation: xpDropFloat 1s ease-out forwards;
}

/* Score bounce */
@keyframes scoreBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Timer ring shrink */
@keyframes timerRingShrink {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 283; }
}

/* Leaderboard lives flash */
@keyframes livesFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Pie chart container */
.ai-report-chart-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.ai-report-chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Emoji burst */
@keyframes emojiBurst {
  0% { opacity: 1; transform: translateY(0) scale(0.5) rotate(0deg); }
  30% { opacity: 1; transform: translateY(-30px) scale(1.4) rotate(15deg); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.8) rotate(-10deg); }
}

/* Motivational toast */
@keyframes motivationalPopIn {
  0% { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.8); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes motivationalFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* Title unlock */
@keyframes titlePopIn {
  0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
  60% { transform: translateX(-50%) scale(1.1); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes titleFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(0.9); }
}
@keyframes floatOrbit {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
  25% { transform: translateY(-18px) scale(1.2); opacity: 1; }
  50% { transform: translateY(-6px) translateX(10px) scale(0.9); opacity: 0.7; }
  75% { transform: translateY(-22px) scale(1.1); opacity: 0.9; }
}
@keyframes ringPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%,-50%) scale(1.1); opacity: 1; }
}

/* ============================================================
   PARENT DASHBOARD — PREMIUM INTELLIGENCE CENTER
   ============================================================ */

/* --- Animations --- */
@keyframes parentFadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes parentSlideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes parentScaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes parentGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(201,168,76,0.15); }
  50% { box-shadow: 0 0 40px rgba(201,168,76,0.3); }
}
@keyframes parentCountUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes parentPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes parentShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes parentFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes progressRingAnim {
  from { stroke-dashoffset: var(--ring-circumference, 283); }
  to { stroke-dashoffset: var(--ring-offset, 0); }
}
@keyframes heroGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes parentCardReveal {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Skeleton Loader --- */
.parent-skeleton {
  background: linear-gradient(90deg, var(--border-color) 25%, rgba(201,168,76,0.08) 50%, var(--border-color) 75%);
  background-size: 200% 100%;
  animation: parentShimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* --- Hero Section --- */
.parent-hero {
  background: linear-gradient(135deg, rgba(201,168,76,0.12) 0%, rgba(201,168,76,0.04) 40%, rgba(184,150,12,0.08) 100%);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  animation: parentCardReveal 0.6s cubic-bezier(0.4,0,0.2,1) both, parentHeroGlow 4s ease-in-out infinite;
}
@keyframes parentHeroGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(201,168,76,0.05), inset 0 0 20px rgba(201,168,76,0.02); }
  50% { box-shadow: 0 0 40px rgba(201,168,76,0.12), inset 0 0 30px rgba(201,168,76,0.04); }
}
.parent-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(201,168,76,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.parent-hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%);
  pointer-events: none;
}
[data-theme="dark"] .parent-hero {
  background: linear-gradient(135deg, rgba(201,168,76,0.1) 0%, rgba(26,26,26,0.9) 40%, rgba(201,168,76,0.06) 100%);
  border-color: rgba(201,168,76,0.15);
}

.parent-hero-greeting {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}
.parent-hero-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.parent-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.parent-hero-stat {
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.1);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.parent-hero-stat:hover {
  background: rgba(201,168,76,0.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,168,76,0.1);
}
[data-theme="dark"] .parent-hero-stat {
  background: rgba(201,168,76,0.04);
  border-color: rgba(201,168,76,0.08);
}
.parent-hero-stat-value {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  color: var(--primary);
  line-height: 1.1;
}
.parent-hero-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.parent-hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.parent-hero-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 13px;
  border-radius: var(--radius-md);
}

/* --- Glass Card --- */
.parent-glass {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
}
.parent-glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.04), transparent);
  transform: skewX(-15deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.parent-glass:hover::after {
  left: 120%;
}
[data-theme="dark"] .parent-glass {
  background: rgba(26,26,26,0.75);
  border-color: rgba(201,168,76,0.08);
}
.parent-glass:hover {
  box-shadow: 0 12px 40px rgba(201,168,76,0.12);
  transform: translateY(-2px);
}

/* --- Progress Ring --- */
.parent-ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.parent-ring-svg {
  transform: rotate(-90deg);
}
.parent-ring-bg {
  fill: none;
  stroke: var(--border-color);
  stroke-width: 6;
}
[data-theme="dark"] .parent-ring-bg {
  stroke: rgba(255,255,255,0.06);
}
.parent-ring-fill {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: var(--ring-circumference, 283);
  stroke-dashoffset: var(--ring-offset, 283);
  animation: progressRingAnim 1.2s cubic-bezier(0.4,0,0.2,1) forwards;
  animation-delay: 0.3s;
}
.parent-ring-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.parent-ring-value {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 20px;
  color: var(--text-main);
  line-height: 1;
}
.parent-ring-text {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* --- Section Header (premium) --- */
.parent-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.parent-section-hd h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}
.parent-section-hd h3 i {
  color: var(--primary);
  font-size: 16px;
}
.parent-section-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(201,168,76,0.1);
  color: var(--primary);
}

/* --- Stat Box (compact) --- */
.parent-stat-box {
  background: rgba(201,168,76,0.04);
  border: 1px solid rgba(201,168,76,0.08);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  transition: all 0.3s ease;
}
.parent-stat-box:hover {
  background: rgba(201,168,76,0.1);
  transform: translateY(-2px);
}
[data-theme="dark"] .parent-stat-box {
  background: rgba(201,168,76,0.03);
  border-color: rgba(201,168,76,0.06);
}
.parent-stat-box-icon {
  font-size: 20px;
  margin-bottom: 6px;
}
.parent-stat-box-value {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 900;
  color: var(--primary);
  line-height: 1.1;
}
.parent-stat-box-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 2px;
}

/* --- AI Insight Card --- */
.parent-ai-card {
  background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(201,168,76,0.02));
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.parent-ai-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--primary));
  background-size: 200% 100%;
  animation: heroGradient 3s ease infinite;
}
[data-theme="dark"] .parent-ai-card {
  background: linear-gradient(135deg, rgba(201,168,76,0.06), rgba(26,26,26,0.8));
}

/* --- Card Reveal Animation --- */
.parent-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1), transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.parent-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Homework Card --- */
.parent-hw-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.parent-hw-card:hover {
  border-color: rgba(201,168,76,0.3);
  box-shadow: 0 8px 32px rgba(201,168,76,0.1);
  transform: translateY(-2px);
}
.parent-hw-card .hw-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.hw-status-complete { background: rgba(16,185,129,0.12); color: #10b981; }
.hw-status-pending { background: rgba(249,115,22,0.12); color: #F59E0B; }
.hw-status-late { background: rgba(239,68,68,0.12); color: #EF4444; }

/* --- Chart Container --- */
.parent-chart-container {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.parent-chart-container canvas {
  max-height: 280px;
}

/* --- Alert Card --- */
.parent-alert-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  transition: all 0.3s ease;
}
.parent-alert-card:hover {
  transform: translateX(4px);
}
.parent-alert-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.parent-alert-critical { border-left: 3px solid #EF4444; }
.parent-alert-critical .parent-alert-icon { background: rgba(239,68,68,0.1); }
.parent-alert-warning { border-left: 3px solid #F59E0B; }
.parent-alert-warning .parent-alert-icon { background: rgba(249,115,22,0.1); }
.parent-alert-success { border-left: 3px solid #10b981; }
.parent-alert-success .parent-alert-icon { background: rgba(16,185,129,0.1); }
.parent-alert-info { border-left: 3px solid var(--primary); }
.parent-alert-info .parent-alert-icon { background: rgba(201,168,76,0.1); }

/* --- Badge Grid --- */
.parent-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.parent-badge-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px 14px;
  text-align: center;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}
.parent-badge-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(201,168,76,0.15);
  border-color: rgba(201,168,76,0.3);
}
.parent-badge-item.locked {
  opacity: 0.45;
  filter: grayscale(0.8);
}
.parent-badge-item.locked:hover {
  opacity: 0.6;
  transform: translateY(-2px);
}
.parent-badge-emoji {
  font-size: 36px;
  margin-bottom: 8px;
  display: block;
}
.parent-badge-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 2px;
}
.parent-badge-desc {
  font-size: 10px;
  color: var(--text-muted);
}

/* --- Chat / Messages --- */
.parent-chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px);
  min-height: 400px;
}
.parent-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.parent-chat-bubble {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
}
.parent-chat-sent {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #1A1A1A;
  border-bottom-right-radius: 6px;
}
.parent-chat-received {
  align-self: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-bottom-left-radius: 6px;
}
.parent-chat-time {
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}
.parent-chat-received .parent-chat-time {
  color: var(--text-muted);
}
.parent-chat-input-wrap {
  display: flex;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.parent-chat-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-main);
  color: var(--text-main);
  font-size: 14px;
  outline: none;
  font-family: var(--font-main);
  resize: none;
}
.parent-chat-input:focus {
  border-color: var(--primary);
}

/* --- Teacher List --- */
.parent-teacher-item.active {
  background: rgba(201,168,76,0.08);
  border-left: 3px solid var(--primary);
}
.parent-teacher-item:hover {
  background: rgba(201,168,76,0.04);
}

/* --- Calendar --- */
.parent-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.parent-calendar-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  padding: 8px 0;
  text-transform: uppercase;
}
.parent-calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.parent-calendar-day:hover {
  background: rgba(201,168,76,0.1);
}
.parent-calendar-day.today {
  background: var(--primary);
  color: #1A1A1A;
  font-weight: 800;
}
.parent-calendar-day.has-event::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
}
.parent-calendar-day.other-month {
  color: var(--text-muted);
  opacity: 0.3;
}

/* --- Settings --- */
.parent-settings-group {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.parent-settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s ease;
  cursor: pointer;
}
.parent-settings-item:last-child { border-bottom: none; }
.parent-settings-item:hover { background: rgba(201,168,76,0.04); }
.parent-settings-item-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.parent-settings-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: rgba(201,168,76,0.1);
  color: var(--primary);
}
.parent-settings-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}
.parent-settings-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* --- Floating AI Assistant --- */
.parent-ai-fab {
  position: fixed;
  bottom: 100px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #1A1A1A;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(201,168,76,0.3);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  animation: parentFloat 3s ease-in-out infinite;
}
.parent-ai-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 40px rgba(201,168,76,0.4);
}
.parent-ai-panel {
  position: fixed;
  bottom: 170px;
  right: 24px;
  width: 360px;
  max-height: 500px;
  background: var(--bg-card);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  z-index: 1001;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: parentSlideUp 0.3s ease both;
}
.parent-ai-panel.open { display: flex; }
.parent-ai-panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.parent-ai-panel-header h4 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}
.parent-ai-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.parent-ai-panel-input {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
}
.parent-ai-panel-input input {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-main);
  color: var(--text-main);
  font-size: 13px;
  outline: none;
  font-family: var(--font-main);
}
.parent-ai-panel-input input:focus { border-color: var(--primary); }

/* --- AI Quick Chips --- */
.parent-ai-chip {
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-main);
  white-space: nowrap;
}
.parent-ai-chip:hover {
  background: rgba(201,168,76,0.18);
  border-color: rgba(201,168,76,0.3);
  transform: translateY(-1px);
}

/* --- Responsive --- */
@media (max-width: 768px) {

/* --- Ambient Background Animation (Parent) --- */
.parent-ambient-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}
.parent-ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: parentOrbFloat 12s ease-in-out infinite;
}
.parent-ambient-orb:nth-child(1) {
  width: 300px;
  height: 300px;
  background: rgba(201,168,76,0.06);
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}
.parent-ambient-orb:nth-child(2) {
  width: 200px;
  height: 200px;
  background: rgba(124,58,237,0.05);
  top: 60%;
  right: 10%;
  animation-delay: -4s;
}
.parent-ambient-orb:nth-child(3) {
  width: 250px;
  height: 250px;
  background: rgba(16,185,129,0.04);
  bottom: 5%;
  left: 30%;
  animation-delay: -8s;
}
@keyframes parentOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(40px, -30px) scale(1.1); }
  50% { transform: translate(-20px, 20px) scale(0.9); }
  75% { transform: translate(-30px, -10px) scale(1.05); }
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .parent-hero { padding: 20px; }
  .parent-hero-greeting { font-size: 20px; }
  .parent-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .parent-hero-stat-value { font-size: 22px; }
  .parent-badge-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .parent-ai-panel { width: calc(100vw - 32px); right: 16px; }
  .parent-chat-container { height: calc(100vh - 250px); min-height: 300px; }
  .parent-ai-fab { bottom: 90px; right: 16px; width: 48px; height: 48px; font-size: 20px; }
  .parent-teacher-layout, .parent-calendar-layout { grid-template-columns: 1fr !important; }
  .parent-teacher-list-panel { max-height: 200px !important; }
}
@media (max-width: 480px) {
  .parent-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .parent-hero-stat { padding: 12px; }
  .parent-hero-stat-value { font-size: 20px; }
  .parent-badge-grid { grid-template-columns: repeat(2, 1fr); }
  .parent-calendar-header { font-size: 10px; }
  .parent-calendar-day { font-size: 12px; }
  /* Two-column layouts stack on mobile */
  .parent-teacher-layout, .parent-calendar-layout { grid-template-columns: 1fr !important; }
  .parent-teacher-list-panel { max-height: 200px !important; }
}

/* --- Skeleton Loaders --- */
.parent-skeleton {
  background: linear-gradient(90deg, rgba(201,168,76,0.06) 25%, rgba(201,168,76,0.12) 50%, rgba(201,168,76,0.06) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}
.parent-skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  width: 80%;
}
.parent-skeleton-text.short { width: 50%; }
.parent-skeleton-text.long { width: 95%; }
.parent-skeleton-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto;
}
.parent-skeleton-stat {
  height: 60px;
  border-radius: var(--radius-md);
}
.parent-skeleton-hero {
  height: 180px;
  border-radius: var(--radius-xl);
  margin-bottom: 24px;
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.parent-content-ready { animation: parentFadeIn 0.4s ease both; }
@keyframes parentFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Page Transition --- */
.main-content-swap {
  animation: mainFeatureEnter 0.35s cubic-bezier(0.4,0,0.2,1) both;
}

/* --- Glass Hover Glow --- */
/* --- AI Focus Insights Widget --- */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(124, 58, 237, 0.3); transform: scale(1); }
  50% { box-shadow: 0 0 18px rgba(124, 58, 237, 0.6); transform: scale(1.08); }
}

/* --- Focus Timer Cinematic Visuals --- */
@keyframes focusGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes ringPulseTick {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(201,168,76,0.3)); }
  50% { filter: drop-shadow(0 0 20px rgba(201,168,76,0.6)); }
}

@keyframes ringBurst {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes goalReachedPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
}

.ring-pulse-tick {
  animation: ringPulseTick 1s ease-in-out;
}

.ring-burst {
  animation: ringBurst 0.5s ease-out;
}

.goal-reached {
  animation: goalReachedPulse 2s ease-in-out infinite;
}

/* Glass card effect */
.focus-glass-card {
  background: rgba(15, 15, 35, 0.7) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
}

/* Sound pill hover */
.focus-sound-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Journal modal entrance */
@keyframes journalSlideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#focus-journal-overlay .card {
  animation: journalSlideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Daily goal bar fill */
.focus-goal-bar-fill {
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}