:root{--bg:#F7F5F0;--bg2:#EFECE5;--bg3:#E8E4DB;--ink:#1A1814;--ink2:#6B6560;--ink3:#A09A93;--accent:#2D2620;--gold:#C4952A;--gold2:#E8B840;--line:rgba(0,0,0,.08);--r:14px;--r2:20px;}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;background:var(--bg);font-family:'DM Sans',sans-serif;color:var(--ink);}
#app{height:100%;display:flex;flex-direction:column;max-width:430px;margin:0 auto;position:relative;background:var(--bg);}
/* SCREENS */
.view{display:none;flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:80px;}
.view.active{display:flex;flex-direction:column;}
.view.center{align-items:center;justify-content:center;padding:24px;}
/* BOTTOM NAV */
#bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:rgba(247,245,240,.92);backdrop-filter:blur(20px);border-top:1px solid var(--line);padding:8px 0 20px;display:none;z-index:100;}
.bnav-inner{display:flex;justify-content:space-around;align-items:center;}
.bn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 16px;cursor:pointer;border:none;background:none;color:var(--ink3);transition:color .15s;}
.bn.active{color:var(--accent);}
.bn-icon{font-size:20px;line-height:1;}
.bn-lbl{font-size:10px;font-weight:500;letter-spacing:.02em;}
/* TOP BAR */
.topbar{padding:16px 20px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.topbar-logo{font-family:'Fraunces',serif;font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.3px;}
.topbar-logo em{color:var(--gold);font-style:italic;}
/* CARDS */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:20px;}
.card+.card{margin-top:10px;}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:50px;padding:14px 28px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .18s;width:100%;}
.btn-dark{background:var(--accent);color:#fff;}
.btn-dark:hover{opacity:.88;}
.btn-dark:disabled{opacity:.35;cursor:not-allowed;}
.btn-gold{background:var(--gold);color:#fff;}
.btn-gold:hover{background:var(--gold2);}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--line);}
.btn-outline:hover{border-color:var(--accent);}
.btn-sm{padding:10px 20px;font-size:13px;}
.btn-ghost{background:transparent;color:var(--ink2);border:none;font-size:13px;cursor:pointer;font-family:'DM Sans',sans-serif;text-decoration:underline;text-underline-offset:3px;}
/* INPUTS */
.inp{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;font-family:'DM Sans',sans-serif;font-size:15px;color:var(--ink);outline:none;transition:border-color .15s;}
.inp:focus{border-color:var(--accent);}
.inp::placeholder{color:var(--ink3);}
textarea.inp{resize:none;line-height:1.6;}
.field{margin-bottom:14px;}
.lbl{display:block;font-size:12px;font-weight:500;color:var(--ink2);margin-bottom:6px;letter-spacing:.02em;}
/* ALERTS */
.alert{padding:12px 16px;border-radius:12px;font-size:13px;margin-bottom:14px;line-height:1.5;}
.alert-err{background:#FEF2F2;border:1px solid #FCA5A5;color:#991B1B;}
.alert-ok{background:#F0FDF4;border:1px solid #86EFAC;color:#14532D;}
/* TAGS / BADGES */
.tag{display:inline-flex;align-items:center;background:var(--bg3);color:var(--ink2);font-size:11px;font-weight:500;padding:4px 12px;border-radius:50px;letter-spacing:.03em;}
.tag-gold{background:#FEF3C7;color:#92400E;}
.tag-green{background:#D1FAE5;color:#065F46;}
.tag-red{background:#FEE2E2;color:#991B1B;}
.tag-blue{background:#DBEAFE;color:#1E40AF;}
/* PROGRESS */
.pbar{height:3px;background:var(--bg3);border-radius:2px;overflow:hidden;}
.pbar-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .4s;}
/* SCROLL PADDING */
.pad{padding:0 20px;}
.section{padding:24px 20px 0;}
/* LESSON ITEM */
.lesson-row{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);}
.lesson-row:last-child{border-bottom:none;}
.lesson-dot{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;font-family:'Fraunces',serif;}
.lesson-info{flex:1;min-width:0;}
.lesson-title{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lesson-sub{font-size:12px;color:var(--ink3);}
/* CFI OPTION */
.opt{display:flex;align-items:center;gap:12px;padding:13px 16px;background:#fff;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:all .15s;margin-bottom:9px;}
.opt.sel{background:var(--accent);border-color:var(--accent);}
.opt.sel span{color:#fff;}
.opt-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;transition:all .15s;display:flex;align-items:center;justify-content:center;}
.opt.sel .opt-dot{background:#fff;border-color:#fff;}
.opt-inner{width:7px;height:7px;border-radius:50%;background:var(--accent);display:none;}
.opt.sel .opt-inner{display:block;}
/* STATS */
.stat{text-align:center;padding:20px 16px;}
.stat-n{font-family:'Fraunces',serif;font-size:48px;font-weight:700;line-height:1;color:var(--ink);}
.stat-l{font-size:11px;color:var(--ink3);margin-top:4px;text-transform:uppercase;letter-spacing:.06em;}
/* TABLE */
table{width:100%;border-collapse:collapse;}
th{font-size:10px;font-weight:500;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);}
td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink2);}
tr:last-child td{border-bottom:none;}
/* ANIM */
@keyframes up{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.up{animation:up .3s ease both;}
@keyframes spin{to{transform:rotate(360deg);}}
.spin{animation:spin 1s linear infinite;}
/* PAYWALL */
.paywall{background:linear-gradient(135deg,#1A1814,#2D2620);border-radius:var(--r2);padding:28px 24px;color:#fff;text-align:center;margin:0 20px 16px;}
.paywall h3{font-family:'Fraunces',serif;font-size:24px;font-weight:600;margin-bottom:8px;}
.paywall p{font-size:13px;opacity:.7;line-height:1.6;margin-bottom:20px;}
.paywall-price{font-family:'Fraunces',serif;font-size:38px;font-weight:700;color:var(--gold2);margin-bottom:4px;}
.paywall-sub{font-size:11px;opacity:.5;margin-bottom:20px;}
.feature-row{display:flex;align-items:center;gap:8px;text-align:left;margin-bottom:8px;font-size:13px;opacity:.8;}
/* ROLE TOGGLE */
.role-toggle{display:flex;background:var(--bg3);border-radius:10px;padding:3px;margin-bottom:14px;}
.role-btn{flex:1;padding:9px;border:none;border-radius:8px;background:transparent;color:var(--ink2);font-family:'DM Sans',sans-serif;font-size:13px;cursor:pointer;transition:all .15s;}
.role-btn.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.1);}
/* LOADER */
.loader{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;}
/* DOTS */
.dots{display:flex;gap:6px;justify-content:center;}
.dots span{width:7px;height:7px;border-radius:50%;background:var(--ink3);}
@keyframes dot{0%,80%,100%{opacity:.2;transform:scale(1);}40%{opacity:1;transform:scale(1.2);}}
.dots span{animation:dot 1.2s infinite;}
.dots span:nth-child(2){animation-delay:.15s;}
.dots span:nth-child(3){animation-delay:.3s;}
.overflow{overflow-x:auto;}