/* ============== DESIGN TOKENS ============== */
:root{
  --bg:#f7f8fc;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --primary:#4338CA;
  --primary-dark:#372DAE;
  --accent:#F59E0B;
  --success:#10B981;
  --danger:#E11D48;
  --border:#e5e7eb;
  --radius:12px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:var(--primary); text-decoration:none;}
.view{display:none;}
.view.active{display:block;}

/* ============== NAV ============== */
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; background:var(--card); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
nav .brand{font-weight:700; font-size:20px; cursor:pointer;}
nav .brand span{color:var(--primary);}
#nav-right{display:flex; gap:10px; align-items:center;}

/* ============== BUTTONS ============== */
button, .btn{
  font-family:inherit; font-size:14px; font-weight:600;
  padding:10px 18px; border-radius:8px; border:1px solid transparent;
  cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:6px;
}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-accent{background:var(--accent); color:#111827;}
.btn-accent:hover{filter:brightness(0.95);}
.btn-outline{background:#fff; border:1px solid var(--border); color:var(--text);}
.btn-outline:hover{background:#f3f4f6;}
.btn-danger{background:var(--danger); color:#fff;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn-sm{padding:6px 12px; font-size:13px;}
.btn-block{width:100%; justify-content:center;}

/* ============== LAYOUT ============== */
.container{max-width:1000px; margin:0 auto; padding:32px 20px;}
.center-screen{
  min-height:calc(100vh - 65px); display:flex; align-items:center; justify-content:center; padding:24px;
}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.auth-card{width:100%; max-width:400px;}
.form-group{margin-bottom:16px; text-align:left;}
label{display:block; font-size:13px; font-weight:600; margin-bottom:6px;}
input{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px;
  font-size:14px; font-family:inherit;
}
input:focus{outline:2px solid var(--primary); outline-offset:1px;}
.error-text{color:var(--danger); font-size:13px; margin:8px 0;}
.muted{color:var(--muted); font-size:14px;}
.divider{display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--muted); font-size:12px;}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--border);}

/* ============== LANDING ============== */
.hero{text-align:center; padding:80px 20px;}
.badge{
  display:inline-block; background:rgba(245,158,11,.15); color:#92400e;
  padding:6px 16px; border-radius:999px; font-size:13px; font-weight:600; margin-bottom:16px;
}
.hero h1{font-size:40px; margin:10px 0; max-width:700px; margin-left:auto; margin-right:auto;}
.hero p{color:var(--muted); font-size:17px; max-width:560px; margin:0 auto 28px;}

/* ============== DASHBOARD ============== */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px; margin-top:20px;}
.subject-card{cursor:pointer;}
.subject-card h3{margin:0 0 6px;}
.subject-card .class-tag{
  display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase;
  color:var(--primary); background:#eef2ff; padding:3px 8px; border-radius:6px; margin-bottom:8px;
}
.status-pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px;
  font-size:12px; font-weight:700;
}
.status-trial{background:#fffbeb; color:#92400e;}
.status-active{background:#ecfdf5; color:#065f46;}
.status-expired{background:#fef2f2; color:#991b1b;}
.banner{
  padding:14px 18px; border-radius:10px; margin-bottom:20px; font-size:14px; font-weight:600;
}
.banner-trial{background:#fffbeb; color:#92400e; border:1px solid #fde68a;}
.banner-expired{background:#fef2f2; color:#991b1b; border:1px solid #fecaca;}

.session-row{
  display:flex; justify-content:space-between; align-items:center; padding:14px 0;
  border-bottom:1px solid var(--border);
}
.session-row:last-child{border-bottom:none;}
.back-link{display:inline-block; margin-bottom:16px; font-size:14px;}

h2.section-title{font-size:22px; margin:32px 0 4px;}
.top-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}

#toast{
  position:fixed; bottom:20px; right:20px; background:#111827; color:#fff; padding:12px 20px;
  border-radius:8px; font-size:14px; display:none; z-index:999; max-width:320px;
}
footer{text-align:center; color:var(--muted); font-size:13px; padding:30px 20px;}
.password-wrap{
  position:relative;
}
.password-wrap input{
  padding-right:60px;
}
.toggle-pw{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:var(--primary);
  font-size:12px;
  font-weight:700;
  padding:6px 8px;
  cursor:pointer;
}
.toggle-pw:hover{
  text-decoration:underline;
}
.teacher-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  font-size:16px;
  text-decoration:none;
  transition:.15s;
}
.teacher-badge:hover{
  background:var(--primary-dark);
}
/* ============== ANIMATIONS ============== */

/* Smooth fade+slide when a view becomes active */
.view.active{
  animation: viewIn .35s ease;
}
@keyframes viewIn{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Button press feel */
button, .btn{
  position:relative;
  overflow:hidden;
  transform: scale(1);
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
button:active, .btn:active{
  transform: scale(0.95);
}

/* Ripple effect (the circle that expands from where you tap) */
.ripple{
  position:absolute;
  border-radius:50%;
  background: rgba(255,255,255,0.55);
  transform: scale(0);
  animation: rippleAnim .5s ease-out;
  pointer-events:none;
}
@keyframes rippleAnim{
  to{ transform: scale(3); opacity:0; }
}

/* Cards lift slightly on hover/tap (nice on desktop, harmless on mobile) */
.card{
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:active{
  transform: scale(0.98);
}
.subject-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(67,56,202,0.15);
}

/* Banner/toast entrance */
.banner, #toast{
  animation: viewIn .3s ease;
}