:root{
  --ink:      #1e1a14;
  --ink-soft: #6b5f4f;
  --rule:     #c9b78c;

  --brass:      #c2913f;
  --brass-deep: #9c7029;
  --brass-glow: rgba(194,145,63,.35);

  --pine:      #2f5142;
  --pine-deep: #1d3325;

  --moss:      #4a7a5b;
  --rust:      #a54028;

  --glass:        rgba(241,232,211,.72);
  --glass-deep:   rgba(231,217,182,.65);
  --glass-border: rgba(184,134,59,.18);
  --glass-highlight: rgba(255,255,255,.55);

  --shadow-sm:
    0 1px 2px rgba(38,32,25,.04),
    0 2px 6px rgba(38,32,25,.05);
  --shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 1px 2px rgba(38,32,25,.05),
    0 8px 24px -8px rgba(38,32,25,.12),
    0 24px 48px -16px rgba(38,32,25,.10);
  --shadow-lg:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 2px 4px rgba(38,32,25,.06),
    0 16px 32px -8px rgba(38,32,25,.16),
    0 40px 80px -24px rgba(38,32,25,.14);

  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-spring: cubic-bezier(.34,1.4,.6,1);
}

body.dark{
  --ink:      #f0ebdc;
  --ink-soft: #a9b3ac;
  --rule:     rgba(236,231,216,.14);

  --glass:        rgba(20,33,29,.65);
  --glass-deep:   rgba(24,41,34,.6);
  --glass-border: rgba(194,145,63,.22);
  --glass-highlight: rgba(236,231,216,.08);

  --shadow-sm:
    0 1px 2px rgba(0,0,0,.35),
    0 2px 6px rgba(0,0,0,.25);
  --shadow:
    0 1px 0 rgba(236,231,216,.05) inset,
    0 1px 2px rgba(0,0,0,.4),
    0 8px 24px -8px rgba(0,0,0,.5),
    0 24px 48px -16px rgba(0,0,0,.45);
  --shadow-lg:
    0 1px 0 rgba(236,231,216,.08) inset,
    0 2px 4px rgba(0,0,0,.4),
    0 16px 32px -8px rgba(0,0,0,.55),
    0 40px 80px -24px rgba(0,0,0,.6);
}

body{ position:relative; min-height:100vh; background-attachment:fixed; }
body::before{
  content:"";
  position:fixed; inset:-20%;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 25%, rgba(194,145,63,.16), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(74,122,91,.10), transparent 42%),
    radial-gradient(circle at 70% 85%, rgba(47,81,66,.12), transparent 45%),
    radial-gradient(circle at 25% 90%, rgba(194,145,63,.08), transparent 40%);
  animation:auroraDrift 32s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes auroraDrift{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(2%, -1.5%, 0) scale(1.04); }
  100% { transform:translate3d(-2%, 2%, 0) scale(1.02); }
}
body.dark::before{
  background:
    radial-gradient(circle at 15% 25%, rgba(194,145,63,.10), transparent 42%),
    radial-gradient(circle at 85% 15%, rgba(74,122,91,.08), transparent 45%),
    radial-gradient(circle at 70% 85%, rgba(47,81,66,.14), transparent 48%),
    radial-gradient(circle at 25% 90%, rgba(194,145,63,.06), transparent 42%);
}

body::after{
  content:"";
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.35;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.20 0 0 0 0 0.16 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body.dark::after{ mix-blend-mode:screen; opacity:.22; }

h1, h2, h3, h4{ letter-spacing:-.01em; font-feature-settings:"ss01","liga"; }
.page-header h1{ font-size:30px; font-weight:500; letter-spacing:-.015em; line-height:1.1; }
.page-header small{ text-transform:uppercase; letter-spacing:.14em; font-size:9.5px; }
.page-header p{ font-size:12.5px; line-height:1.55; max-width:60ch; }
.card-header h3{ font-size:14px; letter-spacing:-.005em; }
.card-header span{ text-transform:uppercase; letter-spacing:.1em; font-size:9px; font-weight:600; }
.menu-title{ text-transform:uppercase; letter-spacing:.16em; font-size:9.5px; }

.sidebar{
  background:
    radial-gradient(circle at 20% 0%, rgba(194,145,63,.16), transparent 38%),
    linear-gradient(180deg, #16241f 0%, #0a1310 100%);
  box-shadow:
    inset -1px 0 0 rgba(236,231,216,.06),
    4px 0 32px -8px rgba(0,0,0,.5);
  border-right:1px solid rgba(0,0,0,.3);
}
.logo-icon{
  background:
    radial-gradient(circle at 30% 30%, rgba(194,145,63,.35), transparent 60%),
    rgba(194,145,63,.12);
  box-shadow:
    0 0 0 1px rgba(194,145,63,.4),
    0 0 24px rgba(194,145,63,.25),
    inset 0 1px 0 rgba(255,255,255,.1);
}
.profile{
  background:linear-gradient(135deg, rgba(236,231,216,.08), rgba(236,231,216,.03));
  border:1px solid rgba(236,231,216,.08);
  border-top:2px solid var(--brass);
  backdrop-filter:blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 16px -4px rgba(0,0,0,.3);
}
.menu-button{ position:relative; transition:all .22s var(--ease-out); }
.menu-button:hover{
  background:rgba(236,231,216,.07);
  color:var(--chalk);
  transform:translateX(2px);
}
.menu-button.active{
  background:linear-gradient(90deg, rgba(194,145,63,.22), rgba(194,145,63,.04));
  border-left-color:var(--brass);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 24px rgba(194,145,63,.12),
    0 0 20px -4px rgba(194,145,63,.3);
}
.menu-button.active .menu-icon{ filter:drop-shadow(0 0 6px rgba(194,145,63,.6)); }
.menu-icon{ transition:transform .22s var(--ease-spring); }
.menu-button:hover .menu-icon{ transform:scale(1.12); }

.header{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--glass-border);
  box-shadow:
    0 1px 0 var(--glass-highlight) inset,
    0 4px 24px -8px rgba(38,32,25,.08);
}
.header-button{
  background:var(--glass-deep);
  border-color:var(--glass-border);
  backdrop-filter:blur(8px);
  transition:all .22s var(--ease-out);
}
.header-button:hover{
  border-color:var(--brass);
  transform:translateY(-1px);
  box-shadow:0 6px 16px -6px var(--brass-glow);
}
.search{ border-bottom-color:var(--glass-border); transition:border-color .22s var(--ease-out); }
.search:focus-within{ border-bottom-color:var(--brass); }

.card,
.stat-card,
.course-card,
.course-large,
.calendar-card,
.upcoming-card,
.focus-card,
.task-list{
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
  position:relative;
  overflow:hidden;
}
.card::before,
.stat-card::before,
.course-card::before,
.course-large::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--glass-highlight) 30%, var(--glass-highlight) 70%, transparent);
  pointer-events:none;
}
.card:hover{ border-color:rgba(194,145,63,.28); }
.course-card:hover,
.course-large:hover,
.stat-card:hover{
  transform:translateY(-3px);
  border-color:rgba(194,145,63,.3);
  box-shadow:var(--shadow-lg);
}

.primary-button,
.btn-submit,
.stamp-btn{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, var(--pine) 0%, var(--pine-deep) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 -2px 0 rgba(0,0,0,.16) inset,
    0 10px 24px -8px rgba(29,51,37,.55);
  transition:transform .22s var(--ease-spring), box-shadow .22s var(--ease-out);
}
.primary-button::before,
.btn-submit::before,
.stamp-btn::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform:translateX(-120%);
  transition:transform .8s var(--ease-out);
  pointer-events:none;
}
.primary-button:hover::before,
.btn-submit:hover::before,
.stamp-btn:hover::before{ transform:translateX(120%); }
.primary-button:hover,
.btn-submit:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -2px 0 rgba(0,0,0,.16) inset,
    0 14px 32px -8px rgba(29,51,37,.65);
}
.reset-button,
.btn-cancel{
  background:var(--glass-deep);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(8px);
  transition:all .2s var(--ease-out);
}
.reset-button:hover,
.btn-cancel:hover{
  border-color:var(--brass);
  transform:translateY(-1px);
}
.filter-button{ transition:all .2s var(--ease-out); }
.filter-button:hover{ border-color:var(--brass); transform:translateY(-1px); }
.filter-button.active{
  background:linear-gradient(135deg, var(--pine), var(--pine-deep));
  border-color:var(--pine-deep);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 6px 16px -6px rgba(29,51,37,.5);
}

.stat-card{ padding:20px; }
.stat-card span{ text-transform:uppercase; letter-spacing:.1em; font-size:9px; }
.stat-card strong{
  font-family:"Fraunces", Georgia, serif;
  font-size:24px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  line-height:1.1;
  margin-top:6px;
}
.stat-icon{
  position:relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 4px 12px -4px rgba(0,0,0,.1);
}
.stat-icon::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 20px rgba(255,255,255,.12);
  pointer-events:none;
}

.task{
  background:var(--glass-deep);
  border:1px solid var(--glass-border);
  border-left-width:3px;
  backdrop-filter:blur(10px);
  transition:all .22s var(--ease-out);
}
.task:hover{
  background:var(--glass);
  border-color:rgba(194,145,63,.35);
  transform:translateX(3px);
  box-shadow:0 8px 20px -8px rgba(38,32,25,.12);
}
.task-check{ transition:all .22s var(--ease-spring); }
.task-check:hover{ border-color:var(--moss); transform:scale(1.12); }
.task-check.done{
  box-shadow:0 0 0 1px rgba(74,122,91,.4), 0 0 12px -2px rgba(74,122,91,.6);
}

.modal{
  background:rgba(10,19,16,.72);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
}
.modal-box{
  background:var(--glass);
  backdrop-filter:blur(28px) saturate(1.4);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);
  border:1px solid var(--glass-border);
  border-top:3px solid var(--brass);
  box-shadow:
    0 1px 0 var(--glass-highlight) inset,
    0 30px 80px -20px rgba(0,0,0,.6),
    0 8px 24px -8px rgba(0,0,0,.3);
}

.field input,
.field select,
.field textarea,
.field-input input,
.field-input select{
  transition:border-color .22s var(--ease-out), background .22s;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.field-input input:focus{
  border-color:var(--brass);
  background:rgba(194,145,63,.04);
}
.pw-toggle:hover{ color:var(--brass-deep); }

.progress-bar span,
.course-progress span,
.big-progress span{
  background:linear-gradient(90deg, var(--brass) 0%, var(--moss) 50%, var(--brass) 100%);
  background-size:200% 100%;
  animation:barFlow 4s linear infinite;
}
@keyframes barFlow{
  0%   { background-position:0% 0; }
  100% { background-position:200% 0; }
}

.hero{
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(0,0,0,.4) inset,
    0 20px 48px -16px rgba(0,0,0,.5),
    0 8px 20px -8px rgba(0,0,0,.3);
  background:
    radial-gradient(circle at 20% 20%, rgba(194,145,63,.14), transparent 40%),
    linear-gradient(155deg, #16241f 0%, #0a1310 100%);
}

.notif-panel{
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid var(--glass-border);
  box-shadow:
    0 1px 0 var(--glass-highlight) inset,
    0 24px 60px -16px rgba(0,0,0,.4);
}
.notif-badge{
  box-shadow:0 0 0 2px var(--card), 0 0 12px rgba(168,64,42,.6);
  animation:badgePulse 2.4s ease-in-out infinite;
}
@keyframes badgePulse{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(194,145,63,.4), rgba(194,145,63,.25));
  border-radius:20px;
  border:2px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(194,145,63,.6), rgba(194,145,63,.4));
  background-clip:content-box;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.menu-button:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px var(--glass),
    0 0 0 4px var(--brass);
  border-radius:6px;
}
.menu-button:focus-visible{
  box-shadow:inset 0 0 0 2px var(--brass);
}

::selection{ background:rgba(194,145,63,.32); color:var(--ink); }

.badge{ transition:all .25s var(--ease-out); }
.badge.unlocked .badge-icon{
  background:linear-gradient(135deg, rgba(194,145,63,.22), rgba(74,122,91,.16));
  border-color:var(--brass);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 6px 16px -6px var(--brass-glow);
}
.badge.unlocked:hover{ transform:translateY(-2px); }

.quiz-option,
.letter-tile,
.quiz-mode-card{
  transition:all .22s var(--ease-out);
}
.quiz-option:hover{
  transform:translateX(3px);
  border-color:var(--brass);
  box-shadow:0 6px 16px -6px var(--brass-glow);
}
.letter-tile{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 2px 6px -2px rgba(38,32,25,.12);
}
.letter-tile:hover{
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 10px 20px -8px var(--brass-glow);
}
.quiz-option.correct{
  box-shadow:0 0 0 3px rgba(74,122,91,.15), 0 8px 24px -8px rgba(74,122,91,.5);
  animation:correctPulse .5s var(--ease-spring);
}
@keyframes correctPulse{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.02); }
  100%{ transform:scale(1); }
}
.quiz-option.incorrect{ box-shadow:0 0 0 3px rgba(165,64,40,.12); }
.quiz-mode-card.active{
  border-color:var(--pine);
  background:linear-gradient(135deg, rgba(47,81,66,.08), rgba(47,81,66,.02));
  box-shadow:0 12px 28px -12px rgba(29,51,37,.4);
}

.content{ padding:36px; }
.grid-2{ gap:22px; margin-bottom:24px; }
.stats{ gap:16px; margin-bottom:24px; }
.page-header{ margin-bottom:26px; }
.card{ padding:22px; }
.card-header{ margin-bottom:18px; }

@media (prefers-reduced-motion: reduce){
  body::before{ animation:none; }
  .progress-bar span,
  .course-progress span,
  .big-progress span{ animation:none; }
  .notif-badge{ animation:none; }
  *{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
  }
}

@media (max-width: 850px){
  .content{ padding:20px; }
  .grid-2{ gap:16px; }
  .stats{ gap:12px; }
}
@media (max-width: 650px){
  .content{ padding:16px; }
  .card{ padding:18px; }
  .page-header h1{ font-size:24px; }
}