:root{
  --cream:#FBF8F2; --ink:#2B2620; --muted:#6F665A; --olive:#8A7A3D; --gold:#B89B49;
  --brown:#3A332A; --pink:#F4C9D0; --line:#E6DECF; --green:#5E7D52;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:#EDE7DA;color:var(--ink);font-family:"Helvetica Neue",Arial,sans-serif;line-height:1.55;}
.serif{font-family:Georgia,"Times New Roman",serif;}
a{color:var(--olive);}
.wrap{max-width:920px;margin:0 auto;padding:0 22px;}
.narrow{max-width:440px;}

/* Topbar */
.topbar{background:var(--brown);color:#F3EEE3;padding:16px 0;position:sticky;top:0;z-index:10;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;}
.brand{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700;}
.brand b{color:#fff;font-weight:800;}
.logout{background:transparent;border:1px solid rgba(255,255,255,.25);color:#E2D9C5;font-size:13px;
  padding:7px 14px;border-radius:30px;cursor:pointer;}
.logout:hover{background:rgba(255,255,255,.08);}

/* Auth card */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;}
.card{background:var(--cream);border-radius:20px;padding:34px 30px;width:100%;max-width:420px;
  box-shadow:0 20px 50px rgba(43,38,32,.12);}
.hearts{color:var(--pink);letter-spacing:5px;font-size:16px;}
.kick{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--olive);font-weight:700;}
h1{font-family:Georgia,serif;font-size:28px;line-height:1.15;margin:10px 0 6px;font-weight:800;}
h2{font-family:Georgia,serif;font-size:22px;margin:0 0 4px;font-weight:800;}
.lead{color:var(--muted);font-size:15px;margin-bottom:20px;}
label{display:block;font-size:13px;font-weight:700;margin:14px 0 6px;}
input{width:100%;padding:14px 15px;font-size:16px;border:1.5px solid var(--line);border-radius:11px;background:#FCFAF5;outline:none;}
input:focus{border-color:var(--gold);}
.btn{display:inline-block;width:100%;text-align:center;background:var(--gold);color:#2B2620;font-weight:800;font-size:16px;
  padding:15px;border:0;border-radius:30px;cursor:pointer;margin-top:20px;text-decoration:none;}
.btn:hover{background:#A88C3E;}
.btn[disabled]{opacity:.6;cursor:default;}
.msg{font-size:14px;margin-top:14px;padding:11px 14px;border-radius:10px;display:none;}
.msg.err{display:block;background:#FBE3E3;color:#A23B3B;}
.msg.ok{display:block;background:#E7F0E2;color:#3F6233;}
.muted{color:var(--muted);font-size:13px;text-align:center;margin-top:16px;}

/* Dashboard */
.hero{background:var(--brown);color:#F3EEE3;padding:34px 0 30px;}
.hero h1{color:#fff;font-size:30px;}
.hero p{color:#D8CFBB;font-size:15px;margin-top:6px;}
.progress{margin-top:18px;background:rgba(255,255,255,.12);border-radius:20px;height:10px;overflow:hidden;max-width:340px;}
.progress > div{height:100%;background:var(--gold);width:0;transition:width .4s;}
.progress-label{font-size:12px;color:#C9BFA8;margin-top:6px;}
.banner{background:#FBEEC9;border:1px solid var(--gold);color:#6e5916;border-radius:12px;padding:14px 16px;margin:18px 0;font-size:14px;}

.phase{margin-top:30px;}
.phase-h{font-family:Georgia,serif;font-size:20px;font-weight:800;}
.phase-sub{color:var(--muted);font-size:13px;margin-bottom:12px;}
.mod{display:flex;align-items:center;gap:14px;background:var(--cream);border:1px solid var(--line);border-radius:14px;
  padding:15px 16px;margin-bottom:10px;text-decoration:none;color:var(--ink);transition:transform .08s,box-shadow .12s;}
.mod:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(43,38,32,.07);}
.mod .num{flex:0 0 40px;height:40px;border-radius:50%;background:var(--brown);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:16px;}
.mod.done .num{background:var(--green);}
.mod .body{flex:1;min-width:0;}
.mod .t{font-weight:700;font-size:15px;}
.mod .meta{font-size:12.5px;color:var(--muted);margin-top:2px;}
.mod .chev{color:var(--gold);font-weight:800;font-size:20px;}
.tag{display:inline-block;font-size:11px;font-weight:700;color:var(--green);margin-left:8px;}

/* Lesson */
.lesson{padding:26px 0 60px;}
.back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;margin-bottom:14px;}
.video-ph{aspect-ratio:16/9;background:linear-gradient(135deg,#3A332A,#5A4F40);border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#E2D9C5;text-align:center;padding:20px;}
.video-ph .play{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:12px;}
.video-ph .soon{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;}
.lesson h1{font-size:26px;margin:18px 0 4px;}
.kernbox{background:#F6EFDD;border:1.5px dashed var(--gold);border-radius:12px;padding:16px 18px;margin:16px 0;}
.kernbox .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);font-weight:700;}
.kernbox p{font-size:18px;font-style:italic;color:var(--brown);margin-top:4px;}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.row .btn{width:auto;flex:1;min-width:180px;margin-top:0;}
.btn.ghost{background:transparent;border:1.5px solid var(--gold);color:var(--olive);}
.lessnav{display:flex;justify-content:space-between;margin-top:30px;border-top:1px solid var(--line);padding-top:18px;}
.lessnav a{font-size:14px;text-decoration:none;color:var(--olive);font-weight:700;}
footer{background:var(--brown);color:#A99E86;text-align:center;padding:22px;font-size:11px;margin-top:40px;}
@media(max-width:600px){ h1{font-size:24px;} .hero h1{font-size:25px;} }