:root{
  --bg-night:#12182b;
  --bg-night2:#1a2340;
  --bronze:#c98a4b;
  --bronze-light:#e3ac6f;
  --off-white:#f3ead9;
  --maroon:#9c3b3b;
  --teal:#3f8f8a;
  --dim:#8892b0;
  --line:rgba(201,138,75,0.25);
  --good:#3f8f8a;
  --bad:#c1585f;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:
    radial-gradient(circle at 15% 10%, rgba(201,138,75,0.08), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(63,143,138,0.10), transparent 45%),
    var(--bg-night);
  color:var(--off-white);
  font-family:'Noto Sans Tamil','Segoe UI',sans-serif;
  min-height:100vh;
  line-height:1.6;
}
.tamil-head{ font-family:'Baloo Thambi 2','Catamaran',sans-serif; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 20px; }

/* nav */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(18,24,43,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.navbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; max-width:1100px; margin:0 auto; flex-wrap:wrap; gap:10px;}
.brand{ font-family:'Baloo Thambi 2',sans-serif; font-weight:700; font-size:1.25rem; color:var(--bronze-light); letter-spacing:.5px; display:flex; gap:8px; align-items:center;}
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--maroon); box-shadow:0 0 0 3px rgba(156,59,59,.25); }
nav.links{ display:flex; gap:6px; flex-wrap:wrap;}
nav.links button{
  background:none; border:1px solid transparent; color:var(--dim);
  font-family:'Noto Sans Tamil',sans-serif; font-size:.92rem; font-weight:600;
  padding:8px 14px; border-radius:20px; cursor:pointer; transition:.2s;
}
nav.links button.active, nav.links button:hover{ color:var(--off-white); border-color:var(--line); background:rgba(201,138,75,0.08); }

main{ min-height:80vh; padding:40px 0 80px; }
.view{ display:none; }
.view.active{ display:block; animation:fadein .4s ease; }
@keyframes fadein{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* HOME */
.hero{ text-align:center; padding:50px 0 30px; }
.hero .eyebrow{ color:var(--teal); letter-spacing:3px; font-size:.78rem; font-weight:700; text-transform:uppercase; font-family:'Noto Sans Tamil'; }
.hero h1{ font-family:'Baloo Thambi 2',sans-serif; font-size:2.6rem; color:var(--off-white); margin:10px 0 6px; }
.hero h1 span{ color:var(--bronze-light); }
.hero p.sub{ color:var(--dim); max-width:560px; margin:0 auto; font-size:1rem;}

.quote-card{
  max-width:640px; margin:36px auto 10px; padding:34px 30px;
  background:linear-gradient(180deg, rgba(201,138,75,0.07), rgba(201,138,75,0.02));
  border:1px solid var(--line); border-radius:4px; position:relative;
  text-align:center;
}
.quote-card::before{ content:"“"; position:absolute; top:-18px; left:24px; font-size:3.2rem; color:var(--bronze); font-family:Georgia,serif; opacity:.7;}
.quote-text{ font-size:1.25rem; font-family:'Noto Sans Tamil'; font-weight:600; color:var(--off-white); min-height:66px; display:flex; align-items:center; justify-content:center;}
.quote-label{ margin-top:14px; color:var(--dim); font-size:.85rem; letter-spacing:1px;}
.shuffle-btn{
  margin-top:20px; background:var(--maroon); color:#fff; border:none; padding:10px 22px;
  border-radius:20px; font-family:'Noto Sans Tamil'; font-weight:600; cursor:pointer; font-size:.9rem;
  transition:.2s;
}
.shuffle-btn:hover{ background:#b24747; transform:translateY(-1px); }

.stat-row{ display:flex; justify-content:center; gap:50px; margin-top:56px; flex-wrap:wrap;}
.stat{ text-align:center; }
.stat .n{ font-family:'Baloo Thambi 2'; font-size:2rem; color:var(--bronze-light); }
.stat .l{ color:var(--dim); font-size:.82rem; margin-top:2px;}

.cta-row{ display:flex; gap:16px; justify-content:center; margin-top:44px; flex-wrap:wrap;}
.cta-card{
  width:230px; padding:22px; border:1px solid var(--line); border-radius:4px; cursor:pointer;
  background:rgba(255,255,255,0.015); transition:.2s;
}
.cta-card:hover{ border-color:var(--bronze); transform:translateY(-3px); }
.cta-card .ic{ font-size:1.5rem; }
.cta-card h3{ font-family:'Baloo Thambi 2'; margin:8px 0 4px; font-size:1.05rem; color:var(--off-white);}
.cta-card p{ color:var(--dim); font-size:.85rem; }

/* LEADERS */
.section-title{ text-align:center; margin-bottom:8px; }
.section-title .eyebrow{ color:var(--teal); font-size:.78rem; letter-spacing:3px; font-weight:700; text-transform:uppercase;}
.section-title h2{ font-family:'Baloo Thambi 2'; font-size:2rem; margin-top:6px;}
.section-title p{ color:var(--dim); max-width:560px; margin:8px auto 0; font-size:.92rem;}

.cat-tabs{ display:flex; gap:10px; justify-content:center; margin:30px 0 34px; flex-wrap:wrap;}
.cat-tabs button{
  background:none; border:1px solid var(--line); color:var(--dim); padding:9px 18px; border-radius:20px;
  font-family:'Noto Sans Tamil'; font-weight:600; cursor:pointer; font-size:.88rem; transition:.2s;
}
.cat-tabs button.active{ background:var(--bronze); color:#1a1206; border-color:var(--bronze); }

.leader-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.leader-card{
  border:1px solid var(--line); border-radius:4px; padding:20px; cursor:pointer; background:rgba(255,255,255,0.015);
  transition:.2s; position:relative; overflow:hidden;
}
.leader-card:hover{ border-color:var(--bronze); background:rgba(201,138,75,0.05); transform:translateY(-2px);}
.leader-avatar{
  width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--maroon),var(--bronze));
  display:flex; align-items:center; justify-content:center; font-family:'Baloo Thambi 2'; font-size:1.2rem; color:#fff; font-weight:700;
  margin-bottom:12px; overflow:hidden;
}
.leader-avatar img{ width:100%; height:100%; object-fit:cover; }
.leader-card h4{ font-family:'Noto Sans Tamil'; font-size:1.02rem; color:var(--off-white); margin-bottom:6px;}
.tag-pill{
  display:inline-block; font-size:.72rem; padding:3px 10px; border-radius:12px; background:rgba(63,143,138,0.18);
  color:var(--teal); font-weight:700; letter-spacing:.4px;
}
.studied-badge{
  position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:50%;
  background:var(--teal); color:#082826; font-size:.75rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
}
.progress-line{ text-align:center; color:var(--dim); font-size:.85rem; margin:-18px 0 24px; }
.progress-line b{ color:var(--bronze-light); }

/* modal */
.overlay{ position:fixed; inset:0; background:rgba(8,10,20,0.75); backdrop-filter:blur(3px); display:none; align-items:flex-start; justify-content:center; z-index:100; padding:40px 16px; overflow-y:auto;}
.overlay.active{ display:flex; }
.modal{ background:var(--bg-night2); border:1px solid var(--line); border-radius:6px; max-width:600px; width:100%; padding:34px; position:relative; animation:fadein .3s ease; }
.modal .close{ position:absolute; top:16px; right:18px; background:none; border:none; color:var(--dim); font-size:1.3rem; cursor:pointer;}
.modal .m-avatar{ width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,var(--maroon),var(--bronze)); display:flex; align-items:center; justify-content:center; font-family:'Baloo Thambi 2'; font-size:1.5rem; color:#fff; margin-bottom:14px; overflow:hidden;}
.modal .m-avatar img{ width:100%; height:100%; object-fit:cover; }
.mark-studied-btn{ background:none; border:1px solid var(--teal); color:var(--teal); padding:8px 18px; border-radius:18px; font-family:'Noto Sans Tamil'; font-weight:700; font-size:.82rem; cursor:pointer; margin-bottom:16px; }
.mark-studied-btn.done{ background:var(--teal); color:#082826; }
.modal h3{ font-family:'Baloo Thambi 2'; font-size:1.4rem; color:var(--off-white); margin-bottom:4px;}
.modal .era{ color:var(--dim); font-size:.85rem; margin-bottom:14px;}
.modal .details{ color:var(--off-white); font-size:.95rem; margin-bottom:18px; opacity:.92; }
.q-box{ border-top:1px dashed var(--line); padding-top:16px; margin-top:10px;}
.q-box .q-eyebrow{ color:var(--teal); font-size:.75rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:8px;}
.q-box .q-text{ font-weight:600; margin-bottom:10px; font-size:.95rem;}
.q-opts{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px;}
.q-opt{ border:1px solid var(--line); padding:8px 12px; border-radius:4px; font-size:.88rem; cursor:pointer; transition:.15s;}
.q-opt:hover{ border-color:var(--bronze); }
.q-opt.correct{ border-color:var(--teal); background:rgba(63,143,138,0.15); color:var(--teal); font-weight:700;}
.q-opt.wrong{ border-color:var(--maroon); background:rgba(156,59,59,0.12); color:#e08a8a; }
.ans-line{ margin-top:10px; font-size:.85rem; color:var(--dim); display:none; }
.ans-line.show{ display:block; }
.ans-line b{ color:var(--bronze-light); }

/* REVOLTS */
.revolt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.revolt-card{ border:1px solid var(--line); border-radius:4px; padding:22px; cursor:pointer; background:rgba(255,255,255,0.015); transition:.2s;}
.revolt-card:hover{ border-color:var(--maroon); transform:translateY(-2px); }
.revolt-card .yr{ color:var(--maroon); font-weight:700; font-size:.78rem; letter-spacing:1px;}
.revolt-card h4{ font-family:'Baloo Thambi 2'; font-size:1.1rem; margin:6px 0 8px; color:var(--off-white);}
.revolt-card p{ color:var(--dim); font-size:.85rem;}

.graph-wrap{ border:1px solid var(--line); border-radius:6px; padding:20px; background:rgba(255,255,255,0.012); margin-top:10px;}
.graph-back{ background:none; border:1px solid var(--line); color:var(--dim); padding:7px 16px; border-radius:16px; font-size:.85rem; cursor:pointer; margin-bottom:18px; font-family:'Noto Sans Tamil'; }
.graph-back:hover{ color:var(--off-white); border-color:var(--bronze);}
svg text{ font-family:'Noto Sans Tamil',sans-serif; }
.node-label{ fill:var(--off-white); font-size:12px; font-weight:600; }
.node-label.center{ font-size:14px; fill:var(--bronze-light); font-weight:700;}
.node-sub{ fill:var(--dim); font-size:9.5px; }
.node-circle{ fill:var(--bg-night2); stroke:var(--bronze); stroke-width:1.6; }
.node-circle.center{ fill:var(--maroon); stroke:var(--bronze-light); stroke-width:2; }
.node-circle.event{ fill:var(--bg-night2); stroke:var(--teal); }
.node-circle.studied{ fill:rgba(63,143,138,0.25); stroke:var(--teal); stroke-width:2.4; }
.node-check{ fill:var(--teal); font-size:11px; font-weight:900; }
.edge{ stroke:var(--line); stroke-width:1.4; }
.dot-mark{ fill:var(--bronze); opacity:.55; }
.graph-legend{ display:flex; gap:22px; justify-content:center; margin-top:16px; flex-wrap:wrap;}
.graph-legend span{ font-size:.78rem; color:var(--dim); display:flex; align-items:center; gap:6px;}
.leg-dot{ width:9px; height:9px; border-radius:50%; display:inline-block;}

footer{ text-align:center; padding:30px 0; color:var(--dim); font-size:.8rem; border-top:1px solid var(--line);}

/* ---- TEST VIEW ---- */
.test-start{ max-width:520px; margin:20px auto; text-align:center; border:1px solid var(--line); border-radius:6px; padding:34px; background:rgba(255,255,255,0.015);}
.test-start p{ color:var(--dim); margin-bottom:20px; font-size:.92rem;}
.count-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:22px;}
.count-row button{ background:none; border:1px solid var(--line); color:var(--off-white); padding:9px 20px; border-radius:20px; font-family:'Noto Sans Tamil'; font-weight:600; cursor:pointer; font-size:.88rem;}
.count-row button.active{ background:var(--bronze); color:#1a1206; border-color:var(--bronze);}
.start-btn{ background:var(--teal); color:#082826; border:none; padding:12px 30px; border-radius:20px; font-family:'Noto Sans Tamil'; font-weight:700; cursor:pointer; font-size:.95rem;}
.start-btn:hover{ background:#4fa39d; }
.test-progress{ color:var(--dim); font-size:.82rem; text-align:center; margin-bottom:14px; letter-spacing:.5px;}
.test-card{ max-width:600px; margin:0 auto; border:1px solid var(--line); border-radius:6px; padding:30px; background:rgba(255,255,255,0.015);}
.test-card .q-text{ font-size:1.05rem; font-weight:700; margin-bottom:18px;}
.test-next{ margin-top:18px; background:var(--maroon); color:#fff; border:none; padding:10px 24px; border-radius:20px; font-family:'Noto Sans Tamil'; font-weight:600; cursor:pointer; display:none;}
.test-result{ max-width:480px; margin:20px auto; text-align:center; border:1px solid var(--line); border-radius:6px; padding:36px; background:rgba(255,255,255,0.015);}
.test-result .score{ font-family:'Baloo Thambi 2'; font-size:2.6rem; color:var(--bronze-light); margin-bottom:6px;}
.test-result .verdict{ color:var(--dim); margin-bottom:22px; font-size:.9rem;}

/* ---- ADMIN VIEW ---- */
.lock-wrap{ max-width:400px; margin:40px auto; text-align:center; border:1px solid var(--line); border-radius:6px; padding:32px; background:rgba(255,255,255,0.015);}
.lock-wrap input{ width:100%; margin:16px 0; }
.admin-tabs{ display:flex; gap:8px; justify-content:center; margin:20px 0 26px; flex-wrap:wrap;}
.admin-tabs button{ background:none; border:1px solid var(--line); color:var(--dim); padding:8px 16px; border-radius:16px; cursor:pointer; font-family:'Noto Sans Tamil'; font-weight:600; font-size:.85rem;}
.admin-tabs button.active{ background:var(--teal); color:#082826; border-color:var(--teal);}
.admin-panel{ display:none; }
.admin-panel.active{ display:block; }
.admin-form{ border:1px solid var(--line); border-radius:6px; padding:24px; background:rgba(255,255,255,0.015); margin-bottom:26px;}
.admin-form h4{ font-family:'Baloo Thambi 2'; margin-bottom:16px; color:var(--bronze-light);}
.form-row{ margin-bottom:12px; }
.form-row label{ display:block; font-size:.8rem; color:var(--dim); margin-bottom:5px;}
.form-row input, .form-row textarea, .form-row select{
  width:100%; background:var(--bg-night); border:1px solid var(--line); border-radius:4px; color:var(--off-white);
  padding:9px 12px; font-family:'Noto Sans Tamil'; font-size:.9rem;
}
.form-row textarea{ min-height:70px; resize:vertical; }
.opt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.save-btn{ background:var(--teal); color:#082826; border:none; padding:10px 26px; border-radius:20px; font-family:'Noto Sans Tamil'; font-weight:700; cursor:pointer; margin-top:8px;}
.save-btn:hover{ background:#4fa39d; }
.admin-list-item{ display:flex; justify-content:space-between; align-items:center; gap:10px; border:1px solid var(--line); border-radius:4px; padding:12px 16px; margin-bottom:8px; background:rgba(255,255,255,0.012);}
.admin-list-item .info{ font-size:.87rem; }
.admin-list-item .info b{ color:var(--off-white); }
.admin-list-item .info span{ color:var(--dim); display:block; font-size:.78rem; margin-top:2px;}
.del-btn{ background:none; border:1px solid var(--maroon); color:#e08a8a; padding:6px 14px; border-radius:14px; cursor:pointer; font-size:.78rem; font-weight:600; flex-shrink:0;}
.del-btn:hover{ background:rgba(156,59,59,0.15); }
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--teal); color:#082826; padding:11px 22px; border-radius:20px; font-weight:700; font-size:.85rem; z-index:200; display:none; box-shadow:0 4px 18px rgba(0,0,0,.3);}

@media(max-width:640px){
  .navbar{ flex-direction:column; gap:10px; }
  .hero h1{ font-size:1.9rem;}
  nav.links{ flex-wrap:wrap; justify-content:center; }
  .opt-grid{ grid-template-columns:1fr; }
}
/* ---- GENERAL STUDIES MODULE ---- */
.gs-subject-card{ position:relative; }
.gs-subject-card .gs-icon{ font-size:1.8rem; margin-bottom:10px; display:block; }
.gs-topic-count{ color:var(--dim); font-size:.78rem; margin-top:6px; display:block; }
.gs-topic-card{
  border:1px solid var(--line); border-radius:4px; margin-bottom:14px; background:rgba(255,255,255,0.015); overflow:hidden;
}
.gs-topic-header{
  padding:16px 20px; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  font-family:'Noto Sans Tamil'; font-weight:700; font-size:.98rem; color:var(--off-white);
}
.gs-topic-header:hover{ background:rgba(201,138,75,0.06); }
.gs-topic-header .arrow{ color:var(--bronze); transition:.2s; }
.gs-topic-header.open .arrow{ transform:rotate(90deg); }
.gs-topic-body{ display:none; padding:0 20px 20px; }
.gs-topic-body.open{ display:block; }
.gs-notes{ color:var(--off-white); opacity:.92; font-size:.92rem; line-height:1.7; margin-bottom:16px; }
.gs-quiz-list{ border-top:1px dashed var(--line); padding-top:14px; }
.gs-quiz-item{ margin-bottom:14px; }
.gs-quiz-item .q-text{ font-size:.9rem; margin-bottom:8px; }