*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0d1117;color:#f0f0f0;height:100vh;overflow:hidden;display:flex;flex-direction:column}

/* BRAND MARK — unified across all pages */
.brand-mark{font-size:24px;font-weight:800;color:#0d1117;letter-spacing:-0.5px}
.brand-mark span{color:#ff6b35}
.brand-mark-sm{font-size:13px;font-weight:800;color:#fff;letter-spacing:-0.3px}
.brand-mark-sm span{color:#ff6b35}

/* ONBOARDING MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(255,255,255,0.97);z-index:999;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:#fff;border:1px solid #e5e5e5;border-radius:16px;max-width:480px;width:100%;padding:40px 32px;position:relative;box-shadow:0 8px 40px rgba(0,0,0,0.08);max-height:calc(100vh - 40px);overflow-y:auto;border-top:4px solid #0d1117}
.modal-logo{font-size:28px;font-weight:800;color:#111;margin-bottom:4px;letter-spacing:-0.5px}
.modal-logo span{color:#ff6b35}
.modal-by{font-size:12px;color:#888;margin-bottom:24px}
.modal-by a{color:#ff6b35;text-decoration:none}
.modal-by a:hover{text-decoration:underline}
.modal-desc{font-size:14px;color:#555;line-height:1.7;margin-bottom:20px}
.modal-features{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}
.mf{background:#0d1117;border:1px solid #21262d;border-radius:8px;padding:10px 12px;display:flex;align-items:flex-start;gap:10px}
.mf-icon{font-size:16px;flex-shrink:0;line-height:1}
.mf-title{font-size:11px;font-weight:600;color:#fff;margin-bottom:2px}
.mf-sub{font-size:10px;color:#8b949e;line-height:1.4}
.modal-input-label{font-size:11px;color:#555;margin-bottom:6px}
.modal-input{width:100%;background:#f9f9f9;border:1px solid #ddd;color:#111;border-radius:8px;padding:10px 14px;font-size:13px;outline:none;margin-bottom:16px}
.modal-input:focus{border-color:#ff6b35;background:#fff}
.modal-input::placeholder{color:#aaa}
.modal-btn{width:100%;background:linear-gradient(135deg,#ff6b35,#e55a2b);color:#fff;border:none;border-radius:8px;padding:14px;font-size:14px;font-weight:700;cursor:pointer;transition:opacity 0.15s;box-shadow:0 2px 8px rgba(255,107,53,0.3)}
.modal-btn:hover{opacity:0.88}
.modal-err{font-size:10px;color:#dc3545;margin-top:3px;min-height:14px}
.modal-input.error{border-color:#dc3545}
.modal-input.ok{border-color:#4ecb8d}

/* TOPBAR */
.topbar{background:#0d1117;border-bottom:0.5px solid #21262d;padding:0 16px;display:flex;align-items:center;gap:10px;height:48px;flex-shrink:0}
.logo{font-size:13px;font-weight:800;color:#fff;white-space:nowrap;letter-spacing:-0.3px}
.logo span{color:#ff6b35}
.logo-by{font-size:10px;color:#444;margin-left:2px}
.tsearch{position:relative;flex:1;max-width:220px}
.tsearch input{width:100%;background:#161b22;border:0.5px solid #30363d;color:#f0f0f0;border-radius:6px;padding:6px 10px 6px 26px;font-size:12px;outline:none}
.tsearch input:focus{border-color:#ff6b35}
.si{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:#555;font-size:11px}
.ftabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.ftabs::-webkit-scrollbar{display:none}
.tab{background:#161b22;border:0.5px solid #30363d;color:#aaa;border-radius:16px;padding:4px 10px;font-size:11px;cursor:pointer;white-space:nowrap;transition:all 0.12s}
.tab:hover{border-color:#444;color:#ddd}
.tab.active{background:#ff6b35;border-color:#ff6b35;color:#fff;font-weight:600}
.tab.qw{background:#1a1a0d;border-color:#3d3a1a;color:#d4c04d}
.tab.qw.active{background:#d4c04d;border-color:#d4c04d;color:#111}
.topbar-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.score-pill{background:#161b22;border:0.5px solid #30363d;border-radius:20px;padding:4px 12px;font-size:11px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.score-num{font-size:13px;font-weight:700;color:#ff6b35}
.guidebtn{background:#161b22;border:0.5px solid #30363d;color:#888;border-radius:16px;padding:4px 10px;font-size:11px;cursor:pointer;white-space:nowrap;transition:all 0.12s}
.guidebtn:hover{border-color:#ff6b35;color:#ff6b35}
.guidebtn.active{background:#ff6b35;border-color:#ff6b35;color:#fff}
.share-btn{background:#161b22;border:0.5px solid #30363d;color:#888;border-radius:16px;padding:4px 10px;font-size:11px;cursor:pointer;white-space:nowrap;transition:all 0.12s}
.share-btn:hover{border-color:#7b8ff7;color:#7b8ff7}
.share-btn.copied{background:#0d2218;border-color:#4ecb8d;color:#4ecb8d}

/* MAIN */
.main{display:flex;flex:1;overflow:hidden}
.left{width:400px;flex-shrink:0;overflow-y:auto;border-right:0.5px solid #21262d;scrollbar-width:thin;scrollbar-color:#30363d #0a0a0a;display:flex;flex-direction:column}
.left::-webkit-scrollbar{width:4px}
.left::-webkit-scrollbar-thumb{background:#30363d;border-radius:2px}

/* PAGE SCORES */
.page-scores{padding:12px 14px;border-bottom:0.5px solid #1c2129;display:flex;gap:6px;flex-wrap:wrap}
.ps{background:#161b22;border:0.5px solid #21262d;border-radius:8px;padding:6px 10px;flex:1;min-width:80px;text-align:center;cursor:pointer;transition:all 0.12s}
.ps:hover{border-color:#ff6b35}
.ps-label{font-size:8px;color:#555;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px}
.ps-score{font-size:13px;font-weight:700;color:#ff6b35}
.ps-total{font-size:8px;color:#444}

/* GUIDE PANEL */
.guide-panel{display:none;width:320px;flex-shrink:0;overflow-y:auto;border-right:0.5px solid #21262d;background:#0d1117;scrollbar-width:thin}
.guide-panel.show{display:flex;flex-direction:column}
.ghead{padding:20px 18px 14px;border-bottom:0.5px solid #1c2129}
.gtitle{font-size:16px;font-weight:700;color:#ff6b35;margin-bottom:4px}
.gsub{font-size:11px;color:#555;line-height:1.5}
.gstep{padding:16px 18px;border-bottom:0.5px solid #1c2129}
.gstep-num{width:22px;height:22px;border-radius:50%;background:#ff6b35;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:8px}
.gstep-title{font-size:13px;font-weight:600;color:#e0e0e0;margin-bottom:5px}
.gstep-body{font-size:11px;color:#888;line-height:1.7}
.gstep-body b{color:#ff9d4d}
.gtip{background:#161b22;border-left:2px solid #ff6b35;border-radius:0 6px 6px 0;padding:9px 12px;margin-top:8px;font-size:10px;color:#888;line-height:1.6}
.gtip b{color:#ff6b35}
.gkb{background:#1c2129;border:0.5px solid #30363d;border-radius:4px;padding:2px 6px;font-size:9px;color:#aaa;font-family:'SF Mono',monospace}
.guide-footer{padding:16px 18px;border-top:0.5px solid #1c2129;margin-top:auto}
.guide-creator{font-size:11px;color:#555;line-height:1.8}
.guide-creator a{color:#ff6b35;text-decoration:none}
.guide-creator a:hover{text-decoration:underline}

/* CARDS */
.card{background:#0d1117;border-bottom:0.5px solid #1c2129;transition:background 0.1s}
.card:hover{background:#161b22}
.card.checked{opacity:0.4}
.card.checked .ctitle{text-decoration:line-through;color:#555}
.ctop{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;cursor:pointer}
.cnum{font-size:10px;color:#444;font-weight:600;min-width:20px;padding-top:2px}
.cbody{flex:1;min-width:0}
.ctitle{font-size:12px;font-weight:500;color:#e0e0e0;line-height:1.4;margin-bottom:4px}
.cmeta{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ptag{font-size:9px;font-weight:700;padding:2px 6px;border-radius:10px;letter-spacing:0.3px}
.t-hp{background:#1a1a2e;color:#7b8ff7;border:0.5px solid #2a2a4a}
.t-cp{background:#0d2218;color:#4ecb8d;border:0.5px solid #1a3d2c}
.t-pp{background:#2a1a0d;color:#ff9d4d;border:0.5px solid #3d2a1a}
.t-sp{background:#2a0d0d;color:#ff6b6b;border:0.5px solid #3d1a1a}
.t-ct{background:#1a1a0d;color:#d4c04d;border:0.5px solid #3d3a1a}
.t-sw{background:#1a0d2a;color:#b07bf7;border:0.5px solid #2a1a4a}
.prio{font-size:8px;font-weight:700;padding:2px 6px;border-radius:10px;letter-spacing:0.3px}
.prio-h{background:#2a1a0d;color:#ff9d4d;border:0.5px solid #3d2a1a}
.prio-m{background:#1a1a2e;color:#7b8ff7;border:0.5px solid #2a2a4a}
.prio-l{background:#1c2129;color:#555;border:0.5px solid #30363d}
.eico{font-size:10px;color:#444;transition:transform 0.18s;flex-shrink:0;margin-top:2px}
.card.open .eico{transform:rotate(180deg)}
.cbtn{width:18px;height:18px;border-radius:50%;border:1.5px solid #30363d;background:transparent;cursor:pointer;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;transition:all 0.12s}
.cbtn:hover{border-color:#ff6b35}
.cbtn.done{background:#ff6b35;border-color:#ff6b35}
.ck{color:#fff;font-size:9px;display:none}
.cbtn.done .ck{display:block}
.cprev{display:none;padding:0 14px 13px;border-top:0.5px solid #161616}
.card.open .cprev{display:block}
.ptip{font-size:11px;color:#ff9d4d;line-height:1.55;padding-top:11px;margin-bottom:9px}
.ptip b{color:#ff6b35}
.mku{background:#161b22;border:0.5px solid #21262d;border-radius:8px;padding:11px;font-size:11px;margin-bottom:9px}
.pblock{background:#0d1117;border:1px solid #30363d;border-radius:8px;overflow:hidden}
.phdr{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:0.5px solid #1c2129}
.pdot{width:5px;height:5px;border-radius:50%;background:#ff6b35;flex-shrink:0}
.plbl{font-size:9px;color:#555;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;display:flex;align-items:center;gap:4px}
.ptxt{font-size:10px;color:#666;line-height:1.7;padding:9px;font-family:'SF Mono','Fira Code',monospace;white-space:pre-wrap;max-height:110px;overflow-y:auto}
.arow{display:flex;gap:6px;margin-top:8px}
.abtn{flex:1;background:#21262d;border:1px solid #30363d;color:#ccc;border-radius:6px;padding:7px 10px;font-size:11px;cursor:pointer;transition:all 0.12s;text-align:center;font-weight:500}
.abtn:hover{background:#ff6b35;border-color:#ff6b35;color:#fff}
.abtn.cpbtn{flex:none;padding:4px 10px;font-size:10px}
.abtn.pvbtn{background:#1c2129;border-color:#30363d;color:#7b8ff7}
.abtn.pvbtn:hover{background:#7b8ff7;border-color:#7b8ff7;color:#fff}
.abtn.copied{background:#0d2218;border-color:#4ecb8d;color:#4ecb8d}
.empty{text-align:center;padding:40px 16px;color:#444;font-size:12px}

/* RIGHT */
.right{flex:1;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.rtop{background:#1c2129;padding:0 14px;display:flex;align-items:center;gap:8px;height:40px;flex-shrink:0;border-bottom:0.5px solid #30363d}
.ppills{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.ppill{background:#161b22;border:0.5px solid #30363d;color:#888;border-radius:12px;padding:3px 10px;font-size:11px;cursor:pointer;transition:all 0.12s;white-space:nowrap}
.ppill:hover{color:#ddd;border-color:#444}
.ppill.active{background:#fff;color:#111;border-color:#fff;font-weight:600}
.theme-select{display:flex;gap:4px;margin-left:auto}
.tbtn{background:#161b22;border:0.5px solid #30363d;color:#888;border-radius:10px;padding:3px 9px;font-size:10px;cursor:pointer;transition:all 0.12s;white-space:nowrap}
.tbtn:hover{border-color:#555;color:#ccc}
.tbtn.active{background:#30363d;border-color:#ff6b35;color:#ff6b35;font-weight:600}
.rhint{font-size:10px;color:#444;margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.sframe{flex:1;border:none;width:100%;background:#fff}
.wstate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fafafa;gap:12px}
.wico{font-size:40px}
.wtitle{font-size:16px;font-weight:700;color:#888}
.wsub{font-size:12px;color:#bbb;text-align:center;max-width:280px;line-height:1.7}
.wbrand{font-size:11px;color:#555;margin-top:4px}

/* FOOTER */
.left-footer{padding:12px 14px;border-top:0.5px solid #1c2129;margin-top:auto;flex-shrink:0}
.creator-strip{display:flex;align-items:center;gap:10px}
.creator-ava{width:28px;height:28px;border-radius:50%;background:#ff6b35;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.creator-info{flex:1;min-width:0}
.creator-name{font-size:11px;font-weight:600;color:#ccc}
.creator-links{display:flex;gap:8px;margin-top:2px}
.creator-links a{font-size:10px;color:#555;text-decoration:none;transition:color 0.12s}
.creator-links a:hover{color:#ff6b35}

/* MOCKUP ATOMS */
.m-img{background:#21262d;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#444;font-size:10px}
.m-btn{background:#ff6b35;color:#fff;border-radius:5px;padding:5px 10px;font-size:10px;font-weight:600;display:inline-block;text-align:center}
.m-tag{background:#21262d;border-radius:14px;padding:2px 7px;font-size:9px;color:#888;display:inline-block}
.m-tg{background:#0d2218;color:#4ecb8d;border-radius:14px;padding:2px 7px;font-size:9px;display:inline-block}
.m-stars{color:#f5c518;letter-spacing:1px}
.m-s{text-decoration:line-through;color:#555;font-size:9px}
.m-p{color:#ff6b35;font-size:13px;font-weight:700}
.m-av{width:26px;height:26px;border-radius:50%;background:#30363d;display:flex;align-items:center;justify-content:center;font-size:8px;color:#888;flex-shrink:0}
.m-bd{background:#ff6b35;color:#fff;font-size:8px;font-weight:700;padding:2px 5px;border-radius:3px;display:inline-block}
.m-pg{height:5px;background:#21262d;border-radius:3px;overflow:hidden}
.m-pf{height:100%;background:#ff6b35;border-radius:3px}
.m-cd{background:#1c2129;border:0.5px solid #30363d;border-radius:6px;padding:7px 9px}
.xr{display:flex;gap:6px;align-items:center}
.xc{display:flex;flex-direction:column;gap:5px}
.xg2{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.xg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}

/* INFO BUTTONS + TOOLTIPS */
.info-btn{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;font-size:9px;color:#556;cursor:pointer;border-radius:50%;transition:color 0.12s;margin-left:2px;vertical-align:middle}
.info-btn:hover{color:#ff6b35}
.info-tooltip{position:fixed;z-index:1000;background:#1c2129;border:1px solid #30363d;border-radius:8px;padding:10px 12px;max-width:260px;font-size:11px;color:#bbb;line-height:1.6;box-shadow:0 4px 20px rgba(0,0,0,0.4);pointer-events:auto}
.info-tooltip b{color:#ff6b35}
.info-tooltip .info-close{position:absolute;top:4px;right:8px;font-size:12px;color:#555;cursor:pointer}

/* ONBOARDING STEP 2 */
.ob-steps{display:flex;flex-direction:column;gap:12px}
.ob-step{display:flex;gap:12px;align-items:flex-start;padding:14px;background:#f8f9fa;border:1px solid #e8e8e8;border-radius:10px}
.ob-num{width:28px;height:28px;border-radius:50%;background:#ff6b35;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ob-content{flex:1;min-width:0}
.ob-title{font-size:13px;font-weight:600;color:#111;margin-bottom:4px}
.ob-body{font-size:12px;color:#666;line-height:1.6}
.ob-body b{color:#333}

/* MOBILE PANEL TOGGLES (hidden on desktop) */
.mob-panels{display:none;gap:4px}
.mob-tab{background:#161b22;border:0.5px solid #30363d;color:#aaa;border-radius:16px;padding:4px 12px;font-size:11px;cursor:pointer;white-space:nowrap;transition:all 0.12s}
.mob-tab.active{background:#ff6b35;border-color:#ff6b35;color:#fff;font-weight:600}

/* DEVICE PREVIEW TOGGLE */
.device-select{display:flex;gap:4px}
.dbtn{background:#161b22;border:0.5px solid #30363d;color:#888;border-radius:10px;padding:3px 9px;font-size:10px;cursor:pointer;transition:all 0.12s;white-space:nowrap}
.dbtn:hover{border-color:#555;color:#ccc}
.dbtn.active{background:#30363d;border-color:#ff6b35;color:#ff6b35;font-weight:600}

/* MOBILE DEVICE FRAME */
.sframe.mobile-preview{width:390px!important;max-width:390px;margin:0 auto;display:block;border-left:1px solid #30363d;border-right:1px solid #30363d}
.right.mobile-device{background:#1c2129}

/* RESPONSIVE — MOBILE */
@media(max-width:768px){
  .topbar{flex-wrap:wrap;height:auto;padding:8px 12px;gap:8px}
  .logo-by{display:none}
  .tsearch{max-width:100%;order:10;flex-basis:100%}
  .ftabs{order:11;flex-basis:100%}
  .mob-panels{display:flex;order:5}
  .topbar-right{order:6}
  .score-pill{padding:3px 8px}
  .share-btn,.guidebtn{padding:3px 8px;font-size:10px}
  .rhint{display:none}

  .main{flex-direction:column}
  .left{width:100%;border-right:none;border-bottom:0.5px solid #21262d;max-height:50vh}
  .right{width:100%;flex:1;min-height:40vh}
  .right.mob-hidden{display:none}
  .left.mob-hidden{display:none!important}
  .guide-panel{width:100%;max-height:50vh}
  .guide-panel.mob-hidden{display:none!important}

  .rtop{flex-wrap:wrap;height:auto;padding:8px 10px;gap:6px}
  .ppills{flex-basis:100%;order:1}
  .theme-select{order:2}
  .device-select{order:3}

  .page-scores{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .page-scores::-webkit-scrollbar{display:none}
  .ps{min-width:60px;flex:0 0 auto}

  .modal{padding:28px 20px}
  .modal-features{grid-template-columns:1fr}
}