:root{--purple: #341A63;--purple-dark: #200F3A;--purple-light: #4E2E8E;--purple-pale: #EFEBF6;--gold: #B08F25;--gold-light: #D6BC6B;--ink: #1F1533;--muted: #6E6685;--bg: #FAF8FD;--card: #FFFFFF;--green: #2E8B57;--red: #C0392B;--radius: 14px;--shadow: 0 2px 10px rgba(32, 15, 58, .12)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}a{color:var(--purple);text-decoration:none}button{font-family:inherit;cursor:pointer}.app-shell{display:flex;min-height:100vh}.sidebar{width:230px;background:linear-gradient(180deg,var(--purple-dark),var(--purple));color:#fff;padding:22px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;flex-shrink:0}.brand{display:flex;align-items:center;gap:10px;padding:0 8px 18px}.brand .shield{font-size:30px}.brand .shield-img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:10px;padding:3px}.shield-big img{width:96px;height:96px;object-fit:contain;display:block;margin:0 auto}.brand h1{font-size:17px;color:#fff;line-height:1.15}.brand small{color:var(--gold-light);font-size:10.5px;letter-spacing:1px;text-transform:uppercase}.nav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#ffffffd9;font-size:14.5px}.nav-link:hover{background:#ffffff1a;color:#fff}.nav-link.active{background:var(--gold);color:var(--purple-dark);font-weight:700}.sidebar .verse{margin-top:auto;font-size:11px;color:#ffffff8c;font-style:italic;padding:12px 8px 0}.main{flex:1;padding:28px 34px 60px;max-width:1060px}.page-title{font-size:26px;color:var(--purple-dark);margin-bottom:4px}.page-sub{color:var(--muted);margin-bottom:22px;font-size:14.5px}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:18px}.card h3{color:var(--purple-dark);margin-bottom:10px;font-size:16px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media (max-width: 900px){.grid2,.grid3{grid-template-columns:1fr}.main{padding:18px}.app-shell{flex-direction:column}.sidebar{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap}.sidebar .verse{display:none}}.btn{background:var(--purple);color:#fff;border:none;border-radius:10px;padding:11px 20px;font-size:14.5px;font-weight:700;transition:background .15s}.btn:hover{background:var(--purple-light)}.btn:disabled{background:#b9b3cc;cursor:not-allowed}.btn.gold{background:var(--gold);color:var(--purple-dark)}.btn.gold:hover{background:var(--gold-light)}.btn.ghost{background:transparent;color:var(--purple);border:2px solid var(--purple)}.btn.small{padding:6px 12px;font-size:13px}input,select,textarea{width:100%;padding:11px 12px;border:1.5px solid #D8D2E8;border-radius:10px;font-size:14.5px;font-family:inherit;background:#fff;color:var(--ink)}input:focus,select:focus,textarea:focus{outline:2px solid var(--purple-light);border-color:var(--purple-light)}label{display:block;font-size:13px;font-weight:700;color:var(--purple-dark);margin:12px 0 5px}.pill{display:inline-block;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:700}.pill.purple{background:var(--purple-pale);color:var(--purple)}.pill.gold{background:#f7efd8;color:#8a6e1f}.pill.green{background:#e2f3e9;color:var(--green)}.stat-row{display:flex;gap:14px;flex-wrap:wrap}.stat{flex:1;min-width:110px;background:var(--purple-pale);border-radius:12px;padding:14px;text-align:center}.stat .num{font-size:26px;font-weight:700;color:var(--purple)}.stat .lbl{font-size:12px;color:var(--muted)}.progress-bar{height:10px;background:#eae5f5;border-radius:99px;overflow:hidden}.progress-bar>div{height:100%;background:linear-gradient(90deg,var(--purple),var(--gold));border-radius:99px;transition:width .4s}.error-msg{background:#fbeae8;color:var(--red);padding:10px 14px;border-radius:10px;margin:10px 0;font-size:14px}.success-msg{background:#e2f3e9;color:var(--green);padding:10px 14px;border-radius:10px;margin:10px 0;font-size:14px}.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--purple-dark),var(--purple) 60%,var(--purple-light));padding:20px}.auth-card{background:#fff;border-radius:18px;padding:36px;width:100%;max-width:430px;box-shadow:0 12px 44px #0000004d}.auth-card .shield-big{font-size:52px;text-align:center}.auth-card h1{text-align:center;color:var(--purple-dark);font-size:24px}.auth-card .tag{text-align:center;color:var(--gold);font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-bottom:18px}.survey-q{font-size:19px;color:var(--purple-dark);font-weight:700;margin-bottom:16px}.option-btn{display:block;width:100%;text-align:left;background:#fff;border:2px solid #D8D2E8;border-radius:12px;padding:14px 16px;font-size:15px;margin-bottom:10px;color:var(--ink)}.option-btn:hover{border-color:var(--purple-light);background:var(--purple-pale)}.option-btn.selected{border-color:var(--purple);background:var(--purple-pale);font-weight:700}.kegel-circle{width:210px;height:210px;border-radius:50%;margin:18px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:700;transition:background .5s,transform .5s}.kegel-circle.squeeze{background:radial-gradient(circle,var(--purple-light),var(--purple-dark));transform:scale(1.06)}.kegel-circle.rest{background:radial-gradient(circle,var(--gold),#A8863A);transform:scale(.96)}.kegel-circle.idle{background:#c9c2dc}.kegel-circle .phase{font-size:22px;letter-spacing:2px;text-transform:uppercase}.kegel-circle .count{font-size:56px}.roadmap-scroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px}.phase-card{min-width:235px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;border-top:5px solid var(--purple)}.phase-card.gold{border-top-color:var(--gold)}.milestone{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #EEE9F7}.milestone .dot{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;background:#eae5f5}.milestone.unlocked .dot{background:var(--gold)}.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.badge-card{text-align:center;padding:16px 10px;border-radius:12px;background:var(--purple-pale);opacity:.45}.badge-card.earned{opacity:1;background:linear-gradient(180deg,#f7efd8,#fff);border:2px solid var(--gold)}.badge-card .icon{font-size:34px}.badge-card .name{font-weight:700;font-size:13px;color:var(--purple-dark);margin:4px 0}.badge-card .desc{font-size:11.5px;color:var(--muted)}.post{border-bottom:1px solid #EEE9F7;padding:16px 0}.post h4{color:var(--purple-dark)}.post .meta{font-size:12px;color:var(--muted);margin:3px 0 8px}.reply{background:var(--purple-pale);border-radius:10px;padding:10px 14px;margin:8px 0 0 22px;font-size:14px}.recipe-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column}.recipe-card h4{color:var(--purple-dark);margin-bottom:6px}.compound-tags{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.celebrate-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#38216beb;display:flex;align-items:center;justify-content:center;z-index:100}.celebrate-box{text-align:center;color:#fff;animation:pop .5s ease}.celebrate-box .big{font-size:80px}@keyframes pop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.quiz-opt{display:block;width:100%;text-align:left;padding:10px 14px;margin:6px 0;border-radius:10px;border:2px solid #D8D2E8;background:#fff;font-size:14px}.quiz-opt.selected{border-color:var(--purple);background:var(--purple-pale)}.quiz-opt.right{border-color:var(--green);background:#e2f3e9}.quiz-opt.wrong{border-color:var(--red);background:#fbeae8}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px;flex-wrap:wrap}.notif-banner{background:linear-gradient(90deg,var(--purple-pale),#F7EFD8);border-left:4px solid var(--gold);padding:12px 16px;border-radius:10px;margin-bottom:10px;font-size:14px}table{width:100%;border-collapse:collapse;font-size:14px}th{text-align:left;color:var(--purple-dark);border-bottom:2px solid var(--purple-pale);padding:8px}td{padding:8px;border-bottom:1px solid #F0EDF8}
