/* ============================================================
   RESET + BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:14px;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--tx);height:100vh;overflow:hidden;transition:background .3s,color .3s;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px;}
button{cursor:pointer;font-family:inherit;border:none;background:none;}
input,textarea,select{font-family:inherit;}
a{color:inherit;text-decoration:none;}

/* ============================================================
   LOGIN
   ============================================================ */
@keyframes orb1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,-30px) scale(1.08);}}
@keyframes orb2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-35px,25px) scale(1.06);}}
@keyframes orb3{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(20px,40px) scale(0.95);}66%{transform:translate(-25px,-15px) scale(1.05);}}
@keyframes loginIn{from{opacity:0;transform:translateY(28px) scale(0.96);}to{opacity:1;transform:none;}}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 0 8px var(--pr));}50%{filter:drop-shadow(0 0 22px var(--pr));}}
@keyframes gridFade{from{opacity:0;}to{opacity:0.06;}}
@keyframes shake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-6px);}40%,80%{transform:translateX(6px);}}
@keyframes pgIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@keyframes npPulse{0%,100%{opacity:1;}50%{opacity:.4;}}

#login-screen{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--bg);overflow:hidden;}
#login-screen.hidden{display:none;}
.l-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;}
.l-orb-1{width:500px;height:500px;top:-150px;left:-120px;background:radial-gradient(circle,var(--pr) 0%,transparent 70%);opacity:.16;animation:orb1 16s ease-in-out infinite;}
.l-orb-2{width:360px;height:360px;bottom:-100px;right:-80px;background:radial-gradient(circle,var(--se) 0%,transparent 70%);opacity:.12;animation:orb2 20s ease-in-out infinite;}
.l-orb-3{width:200px;height:200px;top:40%;left:60%;background:radial-gradient(circle,var(--pr2) 0%,transparent 70%);opacity:.1;animation:orb3 13s ease-in-out infinite;}
.l-grid{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,var(--tx3) 1px,transparent 1px);background-size:30px 30px;opacity:0;animation:gridFade 1.5s .4s forwards;}
.l-box{position:relative;z-index:1;background:var(--sf);border:1px solid var(--bd);border-radius:20px;padding:44px 40px;width:400px;box-shadow:var(--shl),var(--gw);text-align:center;animation:loginIn .6s cubic-bezier(.22,1,.36,1) both;}
.l-logo-img{width:72px;height:72px;border-radius:16px;object-fit:cover;margin:0 auto 14px;display:block;animation:logoGlow 4s ease-in-out infinite;}
.l-logo{font-family:'Syne',sans-serif;font-size:2.2rem;font-weight:800;color:var(--pr);letter-spacing:-.02em;margin-bottom:3px;animation:logoGlow 4s ease-in-out infinite;}
.l-sub{font-size:.72rem;color:var(--tx3);margin-bottom:8px;font-family:'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;}
.l-quote{font-size:.75rem;color:var(--tx2);margin-bottom:28px;font-style:italic;min-height:18px;}
.l-div{height:1px;background:var(--bd);margin:0 0 22px;}
.l-field{margin-bottom:13px;text-align:left;}
.l-field label{display:block;font-size:.7rem;font-weight:600;color:var(--tx3);margin-bottom:5px;text-transform:uppercase;letter-spacing:.08em;}
.l-field input{width:100%;padding:11px 14px;background:var(--sf2);border:1px solid var(--bd);border-radius:10px;color:var(--tx);font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s;}
.l-field input:focus{border-color:var(--pr);box-shadow:0 0 0 3px color-mix(in srgb,var(--pr) 18%,transparent);}
.l-btn{width:100%;padding:12px;background:var(--pr);color:#fff;border-radius:10px;font-size:.9rem;font-weight:600;margin-top:6px;transition:opacity .2s,transform .15s;font-family:'Syne',sans-serif;}
.l-btn:hover{opacity:.88;transform:translateY(-1px);}
.l-err{color:var(--dg);font-size:.75rem;margin-top:8px;min-height:16px;font-family:'DM Mono',monospace;}
.l-box.shake{animation:loginIn .6s cubic-bezier(.22,1,.36,1) both,shake .4s ease;}
.l-setup-note{font-size:.72rem;color:var(--tx3);margin-top:10px;font-family:'DM Mono',monospace;}

/* ============================================================
   LOCK SCREEN
   ============================================================ */
#lock-screen{position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(20px);}
#lock-screen.visible{display:flex;}
.lock-box{background:var(--sf);border:1px solid var(--bd);border-radius:20px;padding:40px;width:320px;text-align:center;box-shadow:var(--shl);}
.lock-icon{font-size:2rem;margin-bottom:12px;}
.lock-title{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:700;color:var(--tx);margin-bottom:4px;}
.lock-sub{font-size:.75rem;color:var(--tx3);margin-bottom:24px;}
.lock-dots{display:flex;gap:10px;justify-content:center;margin-bottom:20px;}
.lock-dot{width:14px;height:14px;border-radius:50%;background:var(--bd);transition:background .15s;}
.lock-dot.filled{background:var(--pr);}
.lock-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;}
.lock-key{padding:14px;border-radius:10px;background:var(--sf2);border:1px solid var(--bd);font-size:1.1rem;font-weight:600;font-family:'Syne',sans-serif;color:var(--tx);transition:background .12s;}
.lock-key:hover{background:var(--sf3);}
.lock-err{color:var(--dg);font-size:.75rem;min-height:16px;font-family:'DM Mono',monospace;}

/* ============================================================
   APP SHELL
   ============================================================ */
#app{display:flex;height:100vh;overflow:hidden;}
#app.hidden{display:none;}

/* ============================================================
   SIDEBAR
   ============================================================ */
#sidebar{width:224px;min-width:224px;background:var(--sf);border-right:1px solid var(--bd);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;z-index:10;transition:width .25s;}
.sb-header{padding:18px 14px 14px;border-bottom:1px solid var(--bd2);display:flex;align-items:center;justify-content:space-between;}
.sb-logo{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:800;color:var(--pr);letter-spacing:-.01em;}
.sb-logo-img{width:28px;height:28px;border-radius:6px;object-fit:cover;margin-right:8px;vertical-align:middle;}
.sb-mode{width:28px;height:28px;border-radius:7px;background:var(--sf2);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:background .2s;}
.sb-mode:hover{background:var(--sf3);}
.sb-nav{flex:1;padding:6px 0;}
.sb-sec-label{padding:10px 14px 3px;font-size:.62rem;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.1em;}
.sb-div{height:1px;background:var(--bd2);margin:5px 10px;}
.ni{display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:.8rem;font-weight:500;color:var(--tx2);transition:background .12s,color .12s;position:relative;user-select:none;}
.ni:hover{background:var(--sf2);color:var(--tx);}
.ni.active{background:var(--sf2);color:var(--pr);}
.ni.active::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:3px;background:var(--pr);border-radius:0 2px 2px 0;}
.ni-icon{font-size:.85rem;width:17px;text-align:center;flex-shrink:0;}
.ni-text{flex:1;}
.ni-badge{background:var(--pr);color:#fff;font-size:.6rem;font-weight:700;padding:1px 5px;border-radius:8px;font-family:'DM Mono',monospace;}
.ni-cover{width:18px;height:18px;border-radius:3px;object-fit:cover;flex-shrink:0;}
.ni-child{padding-left:38px;font-size:.76rem;color:var(--tx3);}
.ni-child.active{color:var(--pr);font-weight:500;}
.sb-footer{padding:10px 14px;border-top:1px solid var(--bd2);display:flex;flex-direction:column;gap:4px;}
.sb-user{font-size:.78rem;font-weight:600;color:var(--tx);}
.sb-meta{font-size:.65rem;color:var(--tx3);font-family:'DM Mono',monospace;}
.sb-footer-btns{display:flex;gap:6px;margin-top:4px;}
.sb-lock-btn,.sb-logout-btn{flex:1;padding:5px 8px;border-radius:7px;font-size:.7rem;font-weight:500;font-family:'DM Sans',sans-serif;transition:all .15s;}
.sb-lock-btn{background:var(--sf2);color:var(--tx2);border:1px solid var(--bd);}
.sb-lock-btn:hover{background:var(--sf3);}
.sb-logout-btn{background:transparent;color:var(--dg);border:1px solid color-mix(in srgb,var(--dg) 30%,transparent);}
.sb-logout-btn:hover{background:color-mix(in srgb,var(--dg) 10%,transparent);}

/* ============================================================
   MAIN + PAGES
   ============================================================ */
#main{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--bg);}
.page{display:none;padding:26px 28px 48px;min-height:100%;}
.page.active{display:block;animation:pgIn .18s ease;}
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:22px;}
.ph-title{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:700;color:var(--tx);letter-spacing:-.02em;}
.ph-sub{font-size:.75rem;color:var(--tx3);margin-top:2px;}
.ph-right{display:flex;gap:7px;align-items:center;flex-shrink:0;flex-wrap:wrap;}

/* ============================================================
   COMPONENTS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-size:.78rem;font-weight:500;font-family:'DM Sans',sans-serif;transition:all .15s;cursor:pointer;border:none;white-space:nowrap;}
.btn-p{background:var(--pr);color:#fff;}.btn-p:hover{opacity:.88;}
.btn-s{background:var(--sf2);color:var(--tx2);border:1px solid var(--bd);}.btn-s:hover{background:var(--sf3);}
.btn-ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);}.btn-ok:hover{background:color-mix(in srgb,var(--ok) 25%,transparent);}
.btn-d{background:color-mix(in srgb,var(--dg) 12%,transparent);color:var(--dg);border:1px solid color-mix(in srgb,var(--dg) 25%,transparent);}
.btn-sm{padding:4px 9px;font-size:.72rem;}
.btn-xs{padding:2px 7px;font-size:.65rem;font-family:'DM Mono',monospace;}

.card{background:var(--sf);border:1px solid var(--bd);border-radius:12px;overflow:hidden;box-shadow:var(--sh);}
.card-body{padding:14px 18px;}
.card-header{padding:11px 16px;border-bottom:1px solid var(--bd2);display:flex;align-items:center;justify-content:space-between;}
.card-title{font-family:'Syne',sans-serif;font-size:.88rem;font-weight:700;color:var(--tx);}

.stats-row{display:grid;gap:10px;margin-bottom:20px;}
.sc{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:14px 18px;box-shadow:var(--sh);}
.sc-label{font-size:.65rem;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;}
.sc-val{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:700;color:var(--pr);letter-spacing:-.02em;line-height:1;}
.sc-sub{font-size:.68rem;color:var(--tx3);margin-top:2px;}

.fg{margin-bottom:14px;}
.fl{display:block;font-size:.68rem;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px;}
.fi,.fs,.fta{width:100%;padding:8px 11px;background:var(--sf2);border:1px solid var(--bd);border-radius:8px;color:var(--tx);font-size:.82rem;outline:none;transition:border-color .2s;font-family:inherit;}
.fi:focus,.fs:focus,.fta:focus{border-color:var(--pr);}
.fi::placeholder,.fta::placeholder{color:var(--tx3);}
.fta{resize:vertical;min-height:72px;line-height:1.6;}
.fs{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}

.tag{padding:2px 7px;border-radius:4px;font-size:.63rem;font-weight:600;background:var(--sf2);color:var(--tx3);border:1px solid var(--bd);font-family:'DM Mono',monospace;}
.badge{padding:2px 7px;border-radius:10px;font-size:.63rem;font-weight:700;font-family:'DM Mono',monospace;}
.badge-p{background:color-mix(in srgb,var(--pr) 18%,transparent);color:var(--pr);}
.badge-ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok);}
.badge-dg{background:color-mix(in srgb,var(--dg) 18%,transparent);color:var(--dg);}
.badge-wn{background:color-mix(in srgb,var(--wn) 18%,transparent);color:var(--wn);}
.badge-tx{background:var(--sf2);color:var(--tx3);}

.prog-wrap{height:4px;background:var(--sf3);border-radius:2px;overflow:hidden;}
.prog-fill{height:100%;background:var(--pr);border-radius:2px;transition:width .4s;}

.mo{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);}
.mo.open{display:flex;}
.mo-box{background:var(--sf);border:1px solid var(--bd);border-radius:16px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:var(--shl);}
.mo-hd{padding:18px 22px 14px;border-bottom:1px solid var(--bd2);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--sf);z-index:1;}
.mo-title{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:var(--tx);}
.mo-x{font-size:1.1rem;color:var(--tx3);padding:3px 7px;border-radius:6px;}
.mo-x:hover{background:var(--sf2);color:var(--tx);}
.mo-bd{padding:18px 22px;}
.mo-ft{padding:12px 22px 18px;border-top:1px solid var(--bd2);display:flex;gap:7px;justify-content:flex-end;}

.sec-title{font-family:'Syne',sans-serif;font-size:.9rem;font-weight:700;color:var(--tx);margin-bottom:12px;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.flex-b{display:flex;align-items:center;justify-content:space-between;}
.flex-g{display:flex;align-items:center;gap:8px;}
.mt4{margin-top:4px;}.mt8{margin-top:8px;}.mt12{margin-top:12px;}.mt16{margin-top:16px;}.mt20{margin-top:20px;}.mt24{margin-top:24px;}
.mb4{margin-bottom:4px;}.mb8{margin-bottom:8px;}.mb12{margin-bottom:12px;}.mb16{margin-bottom:16px;}
.muted{font-size:.75rem;color:var(--tx3);}
.mono{font-family:'DM Mono',monospace;}
.hidden{display:none!important;}
.text-ok{color:var(--ok);}.text-dg{color:var(--dg);}.text-pr{color:var(--pr);}.text-wn{color:var(--wn);}

/* YouTube mini bar */
#yt-mini-bar{position:fixed;top:0;left:224px;right:0;z-index:500;height:48px;background:var(--sf);border-bottom:1px solid var(--bd);display:none;align-items:center;gap:10px;padding:0 16px;box-shadow:var(--sh);}
#yt-mini-bar.visible{display:flex;}

/* Habits grid */
.habits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;}

/* Emoji picker */
.emoji-pick{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;transition:background .12s;}
.emoji-pick:hover,.emoji-pick.active{background:var(--sf3);}

/* Selected game card */
.gc.selected{outline:2px solid var(--pr);}

/* Mobile nav */
@media(max-width:680px){
  #sidebar{position:fixed;left:-224px;top:0;bottom:0;z-index:200;transition:left .25s;}
  #sidebar.mobile-open{left:0;box-shadow:var(--shl);}
  #mobile-nav-btn{display:flex!important;align-items:center;justify-content:center;}
  #main{margin-left:0;}
  #yt-mini-bar{left:0;}
}

/* Shimmer animation */
@keyframes shimmer{0%,100%{opacity:1;}50%{opacity:.5;}}

/* Store badges extra */
.store-amazon{background:color-mix(in srgb,#FF9900 20%,var(--sf2));color:#FF9900;border:1px solid color-mix(in srgb,#FF9900 40%,transparent);}
.store-ubi{background:color-mix(in srgb,#0070FF 20%,var(--sf2));color:#0070FF;border:1px solid color-mix(in srgb,#0070FF 40%,transparent);}
.store-ea{background:color-mix(in srgb,#FF4500 20%,var(--sf2));color:#FF4500;border:1px solid color-mix(in srgb,#FF4500 40%,transparent);}
.store-bnet{background:color-mix(in srgb,#148EFF 20%,var(--sf2));color:#148EFF;border:1px solid color-mix(in srgb,#148EFF 40%,transparent);}
/* loading spinner */
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--bd);border-top-color:var(--pr);border-radius:50%;animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Store badges extra */
.store-amazon{background:color-mix(in srgb,#FF9900 20%,var(--sf2));color:#FF9900;border:1px solid color-mix(in srgb,#FF9900 40%,transparent);}
.store-ubi{background:color-mix(in srgb,#0070FF 20%,var(--sf2));color:#0070FF;border:1px solid color-mix(in srgb,#0070FF 40%,transparent);}
.store-ea{background:color-mix(in srgb,#FF4500 20%,var(--sf2));color:#FF4500;border:1px solid color-mix(in srgb,#FF4500 40%,transparent);}
.store-bnet{background:color-mix(in srgb,#148EFF 20%,var(--sf2));color:#148EFF;border:1px solid color-mix(in srgb,#148EFF 40%,transparent);}
.store-xbox{background:color-mix(in srgb,#107C10 20%,var(--sf2));color:#107C10;border:1px solid color-mix(in srgb,#107C10 40%,transparent);}
.btn-ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);}.btn-ok:hover{background:color-mix(in srgb,var(--ok) 25%,transparent);}
.btn-d{background:color-mix(in srgb,var(--dg) 12%,transparent);color:var(--dg);border:1px solid color-mix(in srgb,var(--dg) 25%,transparent);}

/* XP Luna sidebar - authentic blue gradient like "My Computer" left panel */
[data-theme="xp-luna"][data-mode="light"] #sidebar {
  background: linear-gradient(180deg,#667BD8 0%,#4A62C0 100%);
  border-right-color: #0A246A;
}
[data-theme="xp-luna"][data-mode="light"] .sb-logo { color: #FFFFFF; text-shadow: 1px 1px 2px rgba(0,0,0,.4); }
[data-theme="xp-luna"][data-mode="light"] .sb-user { color: #FFFFFF; }
[data-theme="xp-luna"][data-mode="light"] .sb-meta { color: rgba(255,255,255,.6); }
[data-theme="xp-luna"][data-mode="light"] .ni { color: rgba(255,255,255,.88); }
[data-theme="xp-luna"][data-mode="light"] .ni:hover { background: rgba(255,255,255,.15); color: #fff; }
[data-theme="xp-luna"][data-mode="light"] .ni.active { background: rgba(255,255,255,.22); color: #fff; }
[data-theme="xp-luna"][data-mode="light"] .ni.active::before { background: #FFD700; }
[data-theme="xp-luna"][data-mode="light"] .ni-badge { background: rgba(255,255,255,.25); color: #fff; }
[data-theme="xp-luna"][data-mode="light"] .sb-sec-label { color: rgba(255,255,255,.55); }
[data-theme="xp-luna"][data-mode="light"] .sb-sec-header:hover .sb-sec-label { color: rgba(255,255,255,.8); }
[data-theme="xp-luna"][data-mode="light"] .sb-div { background: rgba(255,255,255,.18); margin: 3px 10px; }
[data-theme="xp-luna"][data-mode="light"] .sb-mode { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); color: #fff; }
[data-theme="xp-luna"][data-mode="light"] .sb-lock-btn { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.3); }
[data-theme="xp-luna"][data-mode="light"] .sb-logout-btn { color: #FFB3B3; border-color: rgba(255,100,100,.35); background: transparent; }
[data-theme="xp-luna"][data-mode="light"] .ni-child { color: rgba(255,255,255,.75); }
[data-theme="xp-luna"][data-mode="light"] .ni-child.active { color: #fff; }

/* XP-style green action button */
.btn-xp{background:#40A040;color:#fff;border:1px solid #2E8A2E;}.btn-xp:hover{background:#2E8A2E;}