/* Page structure; shared club tokens and theme load after this file. */

:root{--ink:#0e0e0c;--ink2:#2a2a26;--ink3:#5a5a52;--cream:#f5f2eb;--cream2:#ede9df;--cream3:#e2ddd2;--green:#1a7a52;--gl:#d4ede2;--gm:#2a9e6a;--amber:#c8821a;--al:#faeeda;--w:#fff;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;--mono:'DM Mono',monospace;--rsm:8px;--rlg:20px;--rxl:28px;--ease:cubic-bezier(.25,.46,.45,.94)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--cream2);color:var(--ink);font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased;min-height:100vh}
a{text-decoration:none;color:inherit}
button{font-family:var(--sans);cursor:pointer;border:none;background:none}
#app{display:none}
.ls-logo{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--cream);text-align:center}
.ls-logo span{color:var(--gm)}
.ls-spin{width:20px;height:20px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--gm);border-radius:50%;animation:spin .7s linear infinite;margin:16px auto 0}
@keyframes spin{to{transform:rotate(360deg)}}

/* TOPBAR */
.topbar{height:60px;background:var(--w);border-bottom:1px solid var(--cream3);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:50}
.logo{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink)}
.logo span{color:var(--green)}
.topbar-right{display:flex;align-items:center;gap:14px}
.topbar-progress{font-size:14px;font-weight:500;letter-spacing:.05em;color:var(--green);font-family:var(--mono)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--gm);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:500}

/* SHELL */
.shell{max-width:1060px;margin:0 auto;padding:32px 24px 80px;display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start}

/* SIDEBAR */
.sidebar{position:sticky;top:88px;background:var(--w);border:1px solid var(--cream3);border-radius:var(--rlg);padding:20px}
.sidebar-pct{font-family:var(--serif);font-size:30px;font-weight:900;color:var(--ink);line-height:1}
.sidebar-pct-lbl{font-size:14px;color:var(--ink3);margin-top:2px;margin-bottom:12px}
.sidebar-bar-bg{height:4px;background:var(--cream3);border-radius:4px;overflow:hidden;margin-bottom:18px}
.sidebar-bar-fill{height:100%;background:var(--gm);border-radius:4px;transition:width .4s var(--ease)}
.module-nav{display:flex;flex-direction:column;gap:4px}
.module-nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--rsm);cursor:pointer;transition:background .15s}
.module-nav-item:hover{background:var(--cream2)}
.module-nav-item.active{background:var(--gl)}
.module-nav-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;font-weight:700;background:var(--cream3);color:var(--ink3)}
.module-nav-item.done .module-nav-dot{background:var(--green);color:#fff}
.module-nav-item.active .module-nav-dot{background:var(--green);color:#fff}
.module-nav-label{font-size:14px;font-weight:500;color:var(--ink2)}
.module-nav-item.active .module-nav-label{color:var(--ink);font-weight:700}
.module-nav-item.done .module-nav-label{color:var(--ink3)}

/* MAIN CONTENT */
.module-panel{display:none}
.module-panel.active{display:block;animation:fadeIn .35s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.module-eyebrow{font-size:14px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.module-title{font-family:var(--serif);font-size:clamp(24px,4vw,34px);font-weight:900;letter-spacing:-.5px;line-height:1.12;color:var(--ink);margin-bottom:14px}
.module-title em{font-style:italic;color:var(--green)}
.module-sub{font-size:14px;font-weight:300;color:var(--ink3);max-width:560px;line-height:1.8;margin-bottom:28px}

.lesson-card{background:var(--w);border:1px solid var(--cream3);border-radius:var(--rlg);padding:24px 26px;margin-bottom:14px}
.lesson-num{font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.lesson-title{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--ink);margin-bottom:10px}
.lesson-body{font-size:14px;font-weight:300;color:var(--ink2);line-height:1.85}
.lesson-body strong{font-weight:600;color:var(--ink)}
.lesson-body ul{margin:10px 0 4px;padding-left:0;list-style:none}
.lesson-body li{position:relative;padding-left:18px;margin-bottom:8px}
.lesson-body li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--gm)}

.example-box{background:var(--gl);border:1px solid rgba(42,158,106,.25);border-radius:var(--rsm);padding:14px 16px;margin-top:12px}
.example-label{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.example-text{font-size:14px;color:var(--ink);line-height:1.7;font-style:italic}

.dont-box{background:var(--al);border:1px solid rgba(200,130,26,.25);border-radius:var(--rsm);padding:14px 16px;margin-top:10px}
.dont-label{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:6px}
.dont-text{font-size:14px;color:var(--ink2);line-height:1.7}

.quiz-card{background:var(--w);border:1px solid var(--cream3);border-radius:var(--rlg);padding:24px 26px;margin-bottom:14px}
.quiz-q{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:14px;line-height:1.5}
.quiz-opt{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--cream3);border-radius:var(--rsm);margin-bottom:8px;cursor:pointer;transition:all .15s;font-size:14px;color:var(--ink2)}
.quiz-opt:hover{border-color:var(--gm);background:var(--gl)}
.quiz-opt.selected{border-color:var(--gm);background:var(--gl);color:var(--ink);font-weight:500}
.quiz-opt.correct{border-color:var(--gm);background:var(--gl)}
.quiz-opt.incorrect{border-color:var(--amber);background:var(--al)}
.quiz-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--cream3);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.quiz-opt.selected .quiz-radio{border-color:var(--gm)}
.quiz-radio-dot{width:8px;height:8px;border-radius:50%;background:var(--gm);display:none}
.quiz-opt.selected .quiz-radio-dot{display:block}
.quiz-feedback{font-size:14px;margin-top:10px;padding:10px 12px;border-radius:var(--rsm);display:none}
.quiz-feedback.show{display:block}
.quiz-feedback.correct{background:var(--gl);color:var(--green)}
.quiz-feedback.incorrect{background:var(--al);color:var(--amber)}

.module-actions{display:flex;justify-content:space-between;align-items:center;margin-top:24px}
.btn-prev{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);background:none;border:none;cursor:pointer;transition:color .15s}
.btn-prev:hover{color:var(--ink)}
.btn-prev:disabled{opacity:0;pointer-events:none}
.btn-next{font-size:14px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--ink);border:none;padding:12px 28px;border-radius:var(--rsm);cursor:pointer;transition:all .2s}
.btn-next:hover{background:var(--ink2)}
.btn-next:disabled{background:var(--cream3);color:var(--ink3);cursor:not-allowed}

.cert-screen{text-align:center;padding:50px 24px}
.cert-badge{width:80px;height:80px;border-radius:50%;background:var(--gm);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;box-shadow:0 8px 28px rgba(42,158,106,.25)}
.cert-title{font-family:var(--serif);font-size:30px;font-weight:900;color:var(--ink);margin-bottom:12px;letter-spacing:-.5px}
.cert-title em{font-style:italic;color:var(--green)}
.cert-sub{font-size:14px;color:var(--ink3);max-width:400px;margin:0 auto 28px;line-height:1.8}
.cert-pledge{background:var(--w);border:1px solid var(--cream3);border-radius:var(--rlg);padding:22px 24px;max-width:460px;margin:0 auto 24px;text-align:left}
.pledge-title{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.pledge-item{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px;font-size:14px;color:var(--ink2);line-height:1.6}
.pledge-check{width:16px;height:16px;border-radius:50%;background:var(--gm);flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center}

@media(max-width:760px){.shell{grid-template-columns:1fr}.sidebar{position:static}}