/* ══════════════════════════════════
   EslatmaAI V5.0 — Design System
   ══════════════════════════════════ */
:root {
  --bg:      #020507;
  --bg2:     #070d12;
  --bg3:     #0c1520;
  --pri:     #00ffb3;
  --pri-dim: rgba(0,255,179,.12);
  --pri-glow:rgba(0,255,179,.25);
  --cyan:    #00d4ff;
  --purple:  #a855f7;
  --red:     #ff4567;
  --gold:    #ffc533;
  --orange:  #ff8c42;
  --text:    #dde6f0;
  --muted:   #4a5e72;
  --glass:   rgba(255,255,255,.028);
  --glassb:  rgba(255,255,255,.065);
  --r:14px; --rs:10px; --rxs:8px;
  --fh:'Outfit',sans-serif;
  --fb:'Inter',sans-serif;
  --fm:'JetBrains Mono',monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);}
body{font-family:var(--fb);font-size:14px;-webkit-tap-highlight-color:transparent;}
::-webkit-scrollbar{width:0;}
input,textarea,select,button{font-family:var(--fb);}

/* ── ORBS ── */
.orb{position:fixed;border-radius:50%;pointer-events:none;filter:blur(100px);}
.orb1{width:600px;height:600px;background:rgba(0,255,179,.045);top:-200px;left:-150px;animation:orbmove 25s ease-in-out infinite;}
.orb2{width:400px;height:400px;background:rgba(168,85,247,.04);bottom:-100px;right:-100px;animation:orbmove 20s ease-in-out infinite reverse;}
.orb3{width:300px;height:300px;background:rgba(0,212,255,.03);top:50%;left:50%;transform:translate(-50%,-50%);animation:orbmove 30s ease-in-out infinite 5s;}
@keyframes orbmove{0%,100%{transform:translate(0,0);}33%{transform:translate(20px,-15px);}66%{transform:translate(-10px,20px);}}

/* ── SCREENS ── */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;z-index:1;opacity:0;pointer-events:none;transition:opacity .35s;}
.screen.active{opacity:1;pointer-events:all;}

/* ══════════ AUTH ══════════ */
#scAuth{background:var(--bg);overflow:hidden;}
.auth-scroll{flex:1;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:20px;}
.auth-center{width:100%;max-width:400px;display:flex;flex-direction:column;gap:22px;animation:slideUp .4s ease both;}

.logo-wrap{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;}
.logo-ring{width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(0,255,179,.08),transparent 70%);border:1px solid rgba(0,255,179,.2);display:flex;align-items:center;justify-content:center;animation:pulse 3s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,255,179,.15);}50%{box-shadow:0 0 0 16px rgba(0,255,179,0);}}
.logo-name{font-family:var(--fh);font-size:2.2rem;font-weight:900;color:var(--pri);letter-spacing:-.02em;}
.logo-ver{font-family:var(--fm);font-size:.6rem;color:var(--muted);letter-spacing:.18em;}
.auth-tagline{text-align:center;font-family:var(--fh);font-size:1rem;color:var(--text);opacity:.65;line-height:1.7;}

.card{background:var(--glass);border:1px solid var(--glassb);border-radius:18px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.auth-card{padding:24px;display:flex;flex-direction:column;gap:14px;}
.auth-msg{font-size:.75rem;text-align:center;min-height:14px;line-height:1.4;}
.auth-msg.ok{color:var(--pri);}.auth-msg.err{color:var(--red);}

/* ── Seg Control ── */
.seg-ctrl{display:flex;gap:4px;background:rgba(255,255,255,.04);padding:4px;border-radius:12px;}
.seg{flex:1;padding:9px;border:none;background:none;color:var(--muted);font-size:.82rem;border-radius:9px;cursor:pointer;transition:all .2s;font-weight:500;}
.seg.active{background:var(--pri-dim);color:var(--pri);font-weight:600;}

/* ── Fields ── */
.field{display:flex;flex-direction:column;gap:6px;}
.field.half{flex:1;}
.field-row{display:flex;gap:10px;}
.field > label{font-family:var(--fm);font-size:.62rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;}
.field > input, .field > textarea, .field > select,
.field.half > input, .field.half > select{
  padding:11px 13px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--glassb);
  border-radius:var(--rxs);
  color:var(--text);font-size:.88rem;
  outline:none;width:100%;
  transition:border-color .2s;
}
.field > input:focus,.field > textarea:focus,.field > select:focus,
.field.half > input:focus,.field.half > select:focus{border-color:rgba(0,255,179,.35);}
.ta{resize:none;line-height:1.5;}
select{cursor:pointer;color-scheme:dark;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234a5e72' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;}
option{background:#0c1520;color:var(--text);}

/* ── Buttons ── */
.btn-primary{padding:13px 22px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--pri),var(--cyan));color:#020507;font-size:.9rem;font-weight:700;font-family:var(--fh);cursor:pointer;transition:transform .15s,box-shadow .2s;}
.btn-primary:active{transform:scale(.97);}
.btn-ghost{padding:11px 20px;border:1px solid var(--glassb);border-radius:12px;background:none;color:var(--muted);font-size:.85rem;cursor:pointer;transition:all .2s;}
.btn-ghost:hover{border-color:var(--pri-glow);color:var(--pri);}
.btn-save{flex:2;padding:14px 20px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--pri),var(--cyan));color:#020507;font-size:.9rem;font-weight:700;cursor:pointer;letter-spacing:.02em;box-shadow:0 4px 20px var(--pri-glow);transition:transform .15s;}
.btn-save:active{transform:scale(.97);}
.btn-sm{padding:6px 12px;border-radius:7px;font-size:.73rem;cursor:pointer;transition:all .2s;border:1px solid;font-weight:500;}
.btn-ok{background:var(--pri-dim);color:var(--pri);border-color:rgba(0,255,179,.3);}
.btn-danger{background:rgba(255,69,103,.1);color:var(--red);border-color:rgba(255,69,103,.3);}
.ic-btn{background:none;border:none;font-size:1.15rem;cursor:pointer;padding:6px;opacity:.6;transition:opacity .2s;line-height:1;}
.ic-btn:hover{opacity:1;}
.link-btn{background:none;border:none;color:var(--pri);font-size:.78rem;cursor:pointer;padding:4px 0;text-align:left;opacity:.8;}
.link-btn:hover{opacity:1;}
.ai-btn{color:var(--purple);}
.chip-btn{padding:7px 15px;border:1px solid rgba(0,255,179,.25);border-radius:20px;background:var(--pri-dim);color:var(--pri);font-size:.78rem;cursor:pointer;transition:all .2s;}
.w100{width:100%;}
.mt8{margin-top:8px;}.mt12{margin-top:12px;}.mt16{margin-top:16px;}.mb12{margin-bottom:12px;}
.time-input{padding:6px 10px;background:rgba(255,255,255,.045);border:1px solid var(--glassb);border-radius:7px;color:var(--text);font-size:.83rem;outline:none;width:90px;color-scheme:dark;}

/* ══════════ APP LAYOUT ══════════ */
#scApp{background:var(--bg);}

/* Topbar */
.topbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--glassb);background:rgba(2,5,7,.8);backdrop-filter:blur(20px);z-index:10;}
.tb-left{display:flex;align-items:center;gap:10px;}
.tb-logo{flex-shrink:0;}
.app-title{font-family:var(--fh);font-size:.95rem;font-weight:700;color:var(--pri);}
.app-sub{font-size:.66rem;color:var(--muted);}
.tb-right{display:flex;gap:6px;}

/* Pages */
.page{display:none;flex:1;overflow:hidden;padding-bottom:calc(68px + env(safe-area-inset-bottom));}
.page.active{display:flex;flex-direction:column;}
.page-scroll{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;}

/* Navbar */
.navbar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;background:rgba(4,9,16,.97);border-top:1px solid var(--glassb);padding:5px 8px;padding-bottom:max(10px,env(safe-area-inset-bottom));z-index:100;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);}
.nb-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;border:none;background:none;cursor:pointer;border-radius:10px;transition:all .2s;}
.nb-ic{font-size:1.1rem;line-height:1;}
.nb-lbl{font-size:.54rem;color:var(--muted);transition:color .2s;}
.nb-btn.active .nb-lbl{color:var(--pri);}
.nb-btn.active .nb-ic{filter:drop-shadow(0 0 5px var(--pri));}
.nb-add{width:52px;height:52px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--pri),var(--cyan));display:flex;align-items:center;justify-content:center;cursor:pointer;margin-top:-16px;box-shadow:0 4px 20px var(--pri-glow);flex-shrink:0;transition:transform .15s;}
.nb-add:active{transform:scale(.92);}

/* ── HOME ── */
.home-header{display:flex;align-items:center;justify-content:space-between;}
.home-date{font-family:var(--fh);font-size:1rem;font-weight:700;}
.sec-title{font-family:var(--fh);font-size:.95rem;font-weight:700;}
.sec-hdr{display:flex;align-items:center;gap:7px;font-family:var(--fm);font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.dot.red{background:var(--red);box-shadow:0 0 6px var(--red);}
.dot.green{background:var(--pri);}
.dot.blue{background:var(--cyan);}
.badge{margin-left:auto;background:var(--glass);border:1px solid var(--glassb);padding:1px 8px;border-radius:10px;font-size:.62rem;}

/* ── DASHBOARD ── */
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.ds-item{background:var(--glass);border:1px solid var(--glassb);border-radius:var(--rxs);padding:10px 8px;text-align:center;}
.ds-num{font-family:var(--fh);font-size:1.3rem;font-weight:800;line-height:1.1;}
.ds-num.g{color:var(--pri);}.ds-num.r{color:var(--red);}.ds-num.o{color:var(--orange);}
.ds-lbl{font-size:.56rem;color:var(--muted);margin-top:2px;}
.dash-prog{background:var(--glass);border:1px solid var(--glassb);border-radius:var(--r);padding:12px;}
.dp-row{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-bottom:8px;}
.dp-pct{font-family:var(--fm);color:var(--pri);font-weight:700;}
.dp-bar{height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;}
.dp-fill{height:100%;background:linear-gradient(90deg,var(--pri),var(--cyan));border-radius:3px;transition:width 1s ease;}
.dash-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.dcat{background:var(--glass);border:1px solid var(--glassb);border-radius:var(--r);padding:12px 8px;text-align:center;cursor:pointer;transition:all .2s;position:relative;}
.dcat:hover,.dcat:active{background:var(--pri-dim);border-color:rgba(0,255,179,.25);}
.dcat-ic{font-size:1.3rem;margin-bottom:4px;}
.dcat-nm{font-size:.62rem;color:var(--muted);}
.dcat-cnt{position:absolute;top:5px;right:6px;background:var(--red);color:#fff;border-radius:10px;font-size:.56rem;font-weight:700;padding:1px 5px;font-family:var(--fm);}

/* ── NOTE CARDS ── */
.nlist{display:flex;flex-direction:column;gap:7px;}
.empty-msg{font-size:.78rem;color:var(--muted);padding:12px 0;text-align:center;}
.ncard{background:var(--glass);border:1px solid var(--glassb);border-radius:var(--r);padding:12px 14px;border-left-width:3px;border-left-style:solid;transition:background .2s;animation:fadeUp .25s ease both;}
.ncard:hover{background:rgba(255,255,255,.04);}
.ncard.done{opacity:.5;}
.nc-row{display:flex;align-items:flex-start;gap:10px;}
.nc-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;font-size:.7rem;font-weight:700;transition:all .2s;margin-top:1px;}
.nc-check.chk{background:var(--pri);border-color:var(--pri);color:#020507;}
.nc-body{flex:1;min-width:0;cursor:pointer;}
.nc-title{font-size:.88rem;font-weight:500;line-height:1.4;margin-bottom:5px;}
.nc-title.crossed{text-decoration:line-through;color:var(--muted);}
.nc-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.nc-actions{display:flex;gap:2px;flex-shrink:0;}
.nc-btn{background:none;border:none;font-size:.85rem;cursor:pointer;opacity:0;transition:opacity .2s;padding:3px;}
.ncard:hover .nc-btn{opacity:.5;}
.nc-prog{font-family:var(--fm);font-size:.62rem;color:var(--muted);margin-left:auto;}
.nc-photos{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap;}
.nc-photo{width:48px;height:48px;border-radius:6px;object-fit:cover;cursor:pointer;border:1px solid var(--glassb);}
.nc-repeat{font-size:.62rem;color:var(--cyan);font-family:var(--fm);}

/* Category badges */
.cat{padding:2px 8px;border-radius:20px;font-size:.62rem;font-weight:600;}
.cat-Ish{background:rgba(0,212,255,.1);color:var(--cyan);}
.cat-Sport{background:rgba(0,255,179,.1);color:var(--pri);}
.cat-Shaxsiy{background:rgba(168,85,247,.1);color:var(--purple);}
.cat-Oqish{background:rgba(255,197,51,.1);color:var(--gold);}
.cat-Soglik{background:rgba(255,69,103,.1);color:var(--red);}
.cat-Boshqa{background:rgba(255,255,255,.07);color:var(--muted);}
.imp-star{font-size:.8rem;}

/* ── SUBTASKS ── */
.subtask-item{display:flex;align-items:center;gap:8px;padding:4px 0;}
.subtask-check{width:18px;height:18px;border-radius:4px;border:2px solid var(--muted);display:flex;align-items:center;justify-content:center;font-size:.65rem;cursor:pointer;flex-shrink:0;transition:all .2s;}
.subtask-check.done{background:var(--pri);border-color:var(--pri);color:#020507;}
.subtask-label{font-size:.82rem;flex:1;}
.subtask-label.done{text-decoration:line-through;color:var(--muted);}
.subtask-input{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--glassb);border-radius:6px;padding:7px 10px;color:var(--text);font-size:.82rem;outline:none;}
.subtask-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;padding:0 4px;}

/* ── PHOTOS ── */
.photo-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.photo-add-btn{width:60px;height:60px;border-radius:10px;border:1px dashed var(--muted);background:var(--glass);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:.6rem;transition:all .2s;}
.photo-add-btn:hover{border-color:var(--pri);color:var(--pri);}
.photo-thumb{width:60px;height:60px;border-radius:10px;object-fit:cover;cursor:pointer;border:1px solid var(--glassb);position:relative;}
.photo-thumb-wrap{position:relative;display:inline-block;}
.photo-rm{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;background:var(--red);border:none;color:#fff;font-size:.65rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:1000;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.lightbox img{max-width:95vw;max-height:90vh;border-radius:12px;object-fit:contain;}

/* ── VOICE ── */
.voice-chip{display:flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid var(--glassb);border-radius:20px;background:var(--glass);color:var(--muted);font-size:.78rem;cursor:pointer;transition:all .2s;width:auto;}
.voice-chip.active{background:rgba(255,69,103,.1);border-color:rgba(255,69,103,.4);color:var(--red);}

/* ── GOALS ── */
.goal-card{background:var(--glass);border:1px solid var(--glassb);border-radius:var(--r);padding:14px;animation:fadeUp .25s ease both;}
.gc-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.gc-title{font-family:var(--fh);font-size:.95rem;font-weight:700;flex:1;}
.gc-meta{font-size:.7rem;color:var(--muted);}
.goal-prog{margin-bottom:10px;}
.gp-row{display:flex;justify-content:space-between;font-size:.7rem;margin-bottom:5px;}
.gp-pct{font-family:var(--fm);color:var(--pri);}
.gp-bar{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;}
.gp-fill{height:100%;background:linear-gradient(90deg,var(--pri),var(--cyan));border-radius:4px;transition:width .8s ease;}
.goal-steps{display:flex;flex-direction:column;gap:6px;}
.gs-item{display:flex;align-items:center;gap:9px;padding:8px 10px;background:rgba(255,255,255,.025);border-radius:8px;cursor:pointer;transition:background .2s;}
.gs-item:hover{background:rgba(255,255,255,.05);}
.gs-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;transition:all .2s;}
.gs-check.done{background:var(--pri);border-color:var(--pri);color:#020507;}
.gs-lbl{font-size:.82rem;flex:1;}
.gs-lbl.done{text-decoration:line-through;color:var(--muted);}
.goal-actions{display:flex;gap:8px;margin-top:10px;}
.pom-chip{padding:7px 12px;border:1px solid rgba(255,140,66,.3);border-radius:20px;background:rgba(255,140,66,.08);color:var(--orange);font-size:.75rem;cursor:pointer;transition:all .2s;}
.pom-chip:hover{background:rgba(255,140,66,.15);}

/* ── PARTNER ── */
.partner-empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 20px;text-align:center;}
.partner-empty .big-ic{font-size:3rem;}
.partner-empty h3{font-family:var(--fh);font-size:1.1rem;}
.partner-empty p{font-size:.82rem;color:var(--muted);line-height:1.6;}
.code-display{font-family:var(--fm);font-size:2rem;font-weight:700;color:var(--pri);letter-spacing:.2em;padding:16px 24px;background:var(--pri-dim);border:1px solid rgba(0,255,179,.3);border-radius:12px;}
.pair-card{background:var(--glass);border:1px solid var(--glassb);border-radius:var(--r);padding:14px;}
.pair-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.pair-avatar{width:42px;height:42px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.pair-name{font-weight:600;}
.pair-status{font-size:.7rem;color:var(--muted);}
.shared-goal{background:rgba(255,255,255,.025);border-radius:10px;padding:12px;margin-bottom:8px;}
.sg-title{font-size:.9rem;font-weight:600;margin-bottom:8px;}
.sg-both{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.sg-user{padding:8px;border-radius:8px;text-align:center;}
.sg-user.me{background:var(--pri-dim);border:1px solid rgba(0,255,179,.2);}
.sg-user.them{background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.2);}
.sg-uname{font-size:.65rem;color:var(--muted);margin-bottom:4px;}
.sg-tick{font-size:1.1rem;}
.sg-proof{margin-top:8px;display:flex;gap:8px;}
.proof-btn{flex:1;padding:7px;border:1px solid var(--glassb);border-radius:8px;background:var(--glass);cursor:pointer;font-size:.75rem;color:var(--muted);transition:all .2s;}
.proof-btn:hover{border-color:var(--pri);color:var(--pri);}
.streak-row{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--orange);margin-top:8px;}

/* ── POMODORO PiP ── */
.pom-pip{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom));right:16px;width:68px;height:68px;border-radius:50%;background:rgba(4,9,16,.95);border:2px solid rgba(255,140,66,.4);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:90;box-shadow:0 4px 20px rgba(255,140,66,.3);animation:pipPulse 2s ease-in-out infinite;}
@keyframes pipPulse{0%,100%{box-shadow:0 4px 20px rgba(255,140,66,.3);}50%{box-shadow:0 4px 30px rgba(255,140,66,.6);}}
.pom-ring-svg{position:absolute;inset:0;width:100%;height:100%;}
.pom-pip-time{font-family:var(--fm);font-size:.72rem;font-weight:700;color:var(--orange);position:relative;z-index:1;}

/* ── POMODORO MODAL ── */
.pom-sheet{align-items:center;gap:16px;}
.pom-ring-wrap{position:relative;width:180px;height:180px;display:flex;align-items:center;justify-content:center;}
.pom-ring-big{position:absolute;inset:0;width:100%;height:100%;}
.pom-time-big{font-family:var(--fm);font-size:2.6rem;font-weight:700;color:var(--orange);position:relative;z-index:1;}
.pom-phase{font-size:.75rem;color:var(--muted);position:absolute;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap;}
.pom-time-btns{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;}
.time-chip{padding:7px 13px;border:1px solid var(--glassb);border-radius:20px;background:var(--glass);color:var(--muted);font-size:.78rem;cursor:pointer;transition:all .2s;}
.time-chip.active,.time-chip:hover{background:rgba(255,140,66,.15);border-color:rgba(255,140,66,.4);color:var(--orange);}
.pom-ctrl{display:flex;gap:10px;width:100%;}
.pom-btn-main{flex:2;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--orange),#ff6b35);color:#fff;font-size:.9rem;font-weight:700;cursor:pointer;transition:transform .15s;}
.pom-btn-main:active{transform:scale(.96);}

/* ── CALENDAR ── */
.cal-nav-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;}
.cal-title{font-family:var(--fh);font-size:1rem;font-weight:700;}
.cal-week-labels{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-family:var(--fm);font-size:.62rem;color:var(--muted);padding:6px 0;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-cell{aspect-ratio:1;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;position:relative;gap:2px;}
.cal-cell:hover{background:rgba(255,255,255,.06);}
.cal-cell.empty{pointer-events:none;}
.cal-cell.today{background:var(--pri-dim);border:1px solid rgba(0,255,179,.3);}
.cal-cell.today .cdn{color:var(--pri);font-weight:700;}
.cal-cell.sel{background:rgba(0,255,179,.2);border:1px solid rgba(0,255,179,.5);}
.cdn{font-size:.78rem;font-family:var(--fm);}
.cdot{width:5px;height:5px;border-radius:50%;}

/* ── STATS ── */
.stats-top{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.stat-card{background:var(--glass);border:1px solid var(--glassb);border-radius:var(--r);padding:14px;text-align:center;}
.sc-num{font-family:var(--fh);font-size:1.8rem;font-weight:900;}
.sc-lbl{font-size:.68rem;color:var(--muted);margin-top:3px;}
.heatmap-row{display:flex;gap:3px;align-items:center;}
.hm-cell{width:12px;height:12px;border-radius:2px;background:rgba(255,255,255,.06);}
.hm-cell.l1{background:rgba(0,255,179,.2);}
.hm-cell.l2{background:rgba(0,255,179,.45);}
.hm-cell.l3{background:rgba(0,255,179,.75);}
.hm-cell.l4{background:var(--pri);}
.hm-lbl{font-size:.62rem;color:var(--muted);width:28px;text-align:right;font-family:var(--fm);}

/* ── MODALS ── */
.modal-bg{position:fixed;inset:0;z-index:200;background:rgba(2,5,7,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;}
.modal-bg.open{opacity:1;pointer-events:all;}
.modal-sheet{width:100%;max-width:540px;background:var(--bg3);border:1px solid var(--glassb);border-radius:20px 20px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));max-height:92dvh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;transform:translateY(100%);transition:transform .3s ease;}
.modal-bg.open .modal-sheet{transform:translateY(0);}
.modal-handle{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.12);margin:0 auto;}
.modal-title{font-family:var(--fh);font-size:1rem;font-weight:700;}
.modal-actions{display:flex;gap:8px;}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--glassb);font-size:.85rem;}

/* ── TOAST ── */
.toast{position:fixed;bottom:calc(78px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(12px);background:var(--bg3);border:1px solid var(--pri-glow);backdrop-filter:blur(20px);color:var(--pri);padding:9px 20px;border-radius:20px;font-size:.78rem;z-index:999;opacity:0;pointer-events:none;transition:all .3s;white-space:nowrap;font-family:var(--fm);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.err{border-color:rgba(255,69,103,.4);color:var(--red);}

/* ── ANIMATIONS ── */
@keyframes slideUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes confetti{0%{transform:translateY(0) rotate(0);opacity:1;}100%{transform:translateY(-80px) rotate(720deg);opacity:0;}}

/* Confetti particle */
.confetti-p{position:fixed;pointer-events:none;z-index:999;width:8px;height:8px;border-radius:2px;animation:confetti .6s ease forwards;}

/* ══════════════════════════════════════
   KITOB — Kundalik tizimi
   ══════════════════════════════════════ */

/* ── Kitob page layout ── */
#pgKitob .page-scroll { gap: 0; padding: 0; }
.kb-header { display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px; }
.kb-title { font-family:var(--fh);font-size:1rem;font-weight:800; }

/* ── Empty state ── */
.kb-empty { display:flex;flex-direction:column;align-items:center;text-align:center;padding:50px 24px;gap:12px; }
.kb-empty-ic { font-size:3.5rem;animation:float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
.kb-empty h3 { font-family:var(--fh);font-size:1.1rem;font-weight:700; }
.kb-empty p { font-size:.82rem;color:var(--muted);line-height:1.6; }

/* ── Book cards ── */
.book-card {
  display:flex;align-items:center;gap:14px;
  background:var(--glass);border:1px solid var(--glassb);border-radius:var(--r);
  padding:16px 14px;margin:0 14px 10px;cursor:pointer;transition:all .2s;
  animation:fadeUp .25s ease both;
}
.book-card:hover { background:rgba(255,255,255,.05);border-color:rgba(0,255,179,.2); }
.bc-cover { font-size:2.2rem;flex-shrink:0;width:50px;height:50px;border-radius:12px;background:var(--pri-dim);border:1px solid rgba(0,255,179,.2);display:flex;align-items:center;justify-content:center; }
.bc-body { flex:1;min-width:0; }
.bc-title { font-family:var(--fh);font-size:.95rem;font-weight:700;margin-bottom:3px; }
.bc-desc { font-size:.72rem;color:var(--muted);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.bc-meta { display:flex;gap:10px;font-size:.68rem;color:var(--muted);font-family:var(--fm);margin-bottom:3px; }
.bc-last { font-size:.65rem;color:var(--muted); }
.bc-arrow { font-size:1.3rem;color:var(--muted);flex-shrink:0; }

/* ── Kitob topbar ── */
.kb-topbar { display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--glassb);background:rgba(2,5,7,.8);position:sticky;top:0;z-index:10; }
.kb-book-title { font-family:var(--fh);font-size:.9rem;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.kb-save-btn { padding:8px 14px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--pri),var(--cyan));color:#020507;font-size:.78rem;font-weight:700;cursor:pointer;flex-shrink:0; }

/* ── Write button ── */
.kb-write-btn {
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:linear-gradient(135deg,rgba(0,255,179,.08),rgba(0,212,255,.06));
  border:1px solid rgba(0,255,179,.25);border-radius:var(--r);
  padding:16px;margin:12px 14px 0;cursor:pointer;transition:all .2s;width:calc(100% - 28px);
}
.kb-write-btn:hover { background:rgba(0,255,179,.12);border-color:rgba(0,255,179,.4); }
.kb-write-btn span:first-child { font-size:1.5rem; }
.kb-write-btn span:nth-child(2) { font-family:var(--fh);font-size:.9rem;font-weight:700;color:var(--pri); }

/* ── AI invite ── */
.kb-ai-invite {
  margin:10px 14px 0;padding:10px 14px;border:1px dashed rgba(168,85,247,.3);
  border-radius:var(--r);background:rgba(168,85,247,.05);color:var(--purple);
  font-size:.78rem;cursor:pointer;transition:all .2s;width:calc(100% - 28px);text-align:center;
}
.kb-ai-invite:hover { background:rgba(168,85,247,.1);border-color:rgba(168,85,247,.5); }

/* ── AI Panel ── */
.kb-ai-panel {
  margin:10px 14px 0;border:1px solid rgba(168,85,247,.3);border-radius:var(--r);
  background:rgba(168,85,247,.05);overflow:hidden;
}
.kb-ai-header { display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(168,85,247,.2);font-size:.78rem;color:var(--purple);font-weight:600; }
.kb-ai-msgs { padding:10px 12px;min-height:80px;max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:8px; }
.kb-ai-hint { font-size:.72rem;color:var(--muted); }
.kb-ai-chip { padding:6px 11px;border:1px solid rgba(168,85,247,.3);border-radius:20px;background:rgba(168,85,247,.08);color:var(--purple);font-size:.7rem;cursor:pointer;transition:all .2s;white-space:nowrap; }
.kb-ai-chip:hover { background:rgba(168,85,247,.18); }
.kb-ai-msg { display:flex; }
.kb-ai-msg.user { justify-content:flex-end; }
.kb-ai-msg.ai { justify-content:flex-start; }
.kb-ai-bubble { max-width:85%;padding:8px 12px;border-radius:12px;font-size:.78rem;line-height:1.5; }
.kb-ai-msg.user .kb-ai-bubble { background:var(--pri-dim);color:var(--pri);border:1px solid rgba(0,255,179,.2); }
.kb-ai-msg.ai .kb-ai-bubble { background:rgba(168,85,247,.1);color:var(--text);border:1px solid rgba(168,85,247,.2); }
.kb-ai-thinking { opacity:.6;font-style:italic; }
.kb-ai-input-row { display:flex;gap:8px;padding:8px 12px;border-top:1px solid rgba(168,85,247,.2); }

/* ── Month blocks ── */
.kb-month-block { margin:12px 14px 0; }
.kb-month-hdr { display:flex;align-items:center;gap:8px;margin-bottom:8px; }
.kb-month-title { font-family:var(--fh);font-size:.85rem;font-weight:800; }
.kb-month-badge { font-family:var(--fm);font-size:.62rem;background:var(--glass);border:1px solid var(--glassb);padding:2px 8px;border-radius:10px;color:var(--muted); }
.kb-month-closed { font-size:.62rem;color:var(--muted);margin-left:auto; }
.kb-month-open { font-size:.62rem;color:var(--pri);margin-left:auto; }

/* ── Page rows ── */
.kb-pages-list { display:flex;flex-direction:column;gap:6px; }
.kb-page-row {
  display:flex;align-items:center;gap:10px;
  background:var(--glass);border:1px solid var(--glassb);border-radius:var(--rxs);
  padding:10px 12px;cursor:pointer;transition:all .2s;
}
.kb-page-row:hover { background:rgba(255,255,255,.05);border-color:rgba(0,255,179,.15); }
.kb-page-left { flex-shrink:0;width:28px;text-align:center; }
.kb-page-num { font-family:var(--fm);font-size:.65rem;color:var(--muted);background:var(--glass);border:1px solid var(--glassb);border-radius:4px;padding:2px 4px; }
.kb-page-body { flex:1;min-width:0; }
.kb-page-title { font-family:var(--fh);font-size:.85rem;font-weight:700;margin-bottom:2px; }
.kb-page-date { font-size:.65rem;color:var(--muted);font-family:var(--fm);margin-bottom:3px; }
.kb-page-preview { font-size:.75rem;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.kb-page-right { display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0; }
.kb-page-arrow { color:var(--muted);font-size:1rem; }

/* ── Write page ── */
.kb-write-wrap { padding:14px;display:flex;flex-direction:column;gap:12px; }
.kb-write-meta { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px; }
.kb-write-pagenum { font-family:var(--fm);font-size:.72rem;color:var(--muted);background:var(--glass);border:1px solid var(--glassb);padding:4px 10px;border-radius:20px; }
.kb-textarea {
  width:100%;min-height:220px;padding:12px 14px;
  background:rgba(255,255,255,.03);border:1px solid var(--glassb);border-radius:var(--rxs);
  color:var(--text);font-size:.9rem;font-family:var(--fb);line-height:1.7;
  outline:none;resize:none;transition:border-color .2s;
}
.kb-textarea:focus { border-color:rgba(0,255,179,.3); }

/* ── Read page ── */
.kb-read-wrap { padding:16px;display:flex;flex-direction:column;gap:14px; }
.kb-read-meta { display:flex;align-items:center;justify-content:space-between; }
.kb-read-pagenum { font-family:var(--fm);font-size:.7rem;color:var(--muted);background:var(--glass);border:1px solid var(--glassb);padding:3px 10px;border-radius:20px; }
.kb-read-date { font-family:var(--fm);font-size:.72rem;color:var(--muted); }
.kb-read-title { font-family:var(--fh);font-size:1.2rem;font-weight:800;line-height:1.3; }
.kb-read-content { font-size:.9rem;line-height:1.8;color:var(--text);white-space:pre-wrap;word-break:break-word; }
.kb-read-photos { display:flex;gap:8px;flex-wrap:wrap; }
.kb-read-photo { width:90px;height:90px;border-radius:10px;object-fit:cover;cursor:pointer;border:1px solid var(--glassb);transition:transform .2s; }
.kb-read-photo:hover { transform:scale(1.04); }
.kb-read-nav { display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid var(--glassb); }
.kb-nav-btn { padding:8px 12px;border:1px solid var(--glassb);border-radius:10px;background:var(--glass);color:var(--muted);font-size:.72rem;cursor:pointer;transition:all .2s;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.kb-nav-btn:hover { border-color:rgba(0,255,179,.3);color:var(--pri); }

/* ── Kitob Modal ── */
.kb-cover-grid { display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:4px; }
.kb-cover-opt { font-size:1.4rem;padding:10px;border:2px solid var(--glassb);border-radius:10px;background:var(--glass);cursor:pointer;transition:all .2s;text-align:center;line-height:1; }
.kb-cover-opt.selected { border-color:var(--pri);background:var(--pri-dim); }
.kb-cover-opt:hover { border-color:rgba(0,255,179,.35); }

/* ── Navbar kitob icon ── */
.nb-kitob { flex-shrink:0;position:relative; }

/* ── 6-navbar items adjustment ── */
@media (max-width: 400px) {
  .nb-lbl { font-size:.48rem; }
  .nb-btn { padding:5px 2px; }
}

/* ══════════════════════════════════════
   MOTIVATSIYA — Achievements · Challenge
   ══════════════════════════════════════ */

/* ── Achievement popup (unlock toast) ── */
.achieve-popup {
  position:fixed;top:70px;left:50%;transform:translateX(-50%) translateY(-20px);
  z-index:9999;width:calc(100% - 32px);max-width:400px;
  background:var(--bg3);border-radius:18px;overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.6);
  opacity:0;transition:all .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none;
}
.achieve-popup.show { opacity:1;transform:translateX(-50%) translateY(0);pointer-events:all; }
.ap-glow { position:absolute;inset:0;opacity:.06;filter:blur(40px);pointer-events:none; }
.ap-inner { display:flex;align-items:center;gap:14px;padding:16px 18px;position:relative;z-index:1; }
.ap-badge { width:58px;height:58px;border-radius:14px;border:2px solid;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex-shrink:0; }
.ap-icon { font-size:1.6rem;line-height:1; }
.ap-tier { font-family:var(--fm);font-size:.48rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; }
.ap-text { flex:1;min-width:0; }
.ap-label { font-family:var(--fm);font-size:.58rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px; }
.ap-name { font-family:var(--fh);font-size:.95rem;font-weight:800;margin-bottom:3px; }
.ap-desc { font-size:.72rem;color:var(--muted);line-height:1.4; }

/* ── Motiv page tabs ── */
.motiv-tabs { display:flex;gap:0;border-bottom:1px solid var(--glassb);padding:0 14px;background:rgba(2,5,7,.6); }
.motiv-tab { flex:1;padding:12px 8px;border:none;background:none;color:var(--muted);font-size:.82rem;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;font-family:var(--fh); }
.motiv-tab.active { color:var(--pri);border-bottom-color:var(--pri); }

/* ── Achievements ── */
.ach-header { padding:14px 14px 8px; }
.ach-prog-wrap { background:var(--glass);border:1px solid var(--glassb);border-radius:var(--r);padding:14px; }
.ach-prog-row { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px; }
.ach-prog-title { font-family:var(--fh);font-size:.95rem;font-weight:800; }
.ach-prog-num { font-size:1.1rem;font-weight:700; }
.ach-tier-counts { display:flex;gap:10px;flex-wrap:wrap;margin-top:8px; }

.ach-tier-block { padding:0 14px;margin-bottom:6px; }
.ach-tier-hdr { display:flex;justify-content:space-between;align-items:center;padding:10px 0 8px;font-family:var(--fm);font-size:.65rem;font-weight:700;letter-spacing:.1em; }
.ach-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.ach-card { border-radius:var(--r);padding:12px;border:1px solid var(--glassb);background:var(--glass);display:flex;flex-direction:column;gap:4px;animation:fadeUp .2s ease both; }
.ach-card.unlocked { border-width:1px; }
.ach-card.locked { opacity:.45; }
.ach-card-icon { font-size:1.5rem;line-height:1.2; }
.ach-card-name { font-family:var(--fh);font-size:.78rem;font-weight:700;line-height:1.2; }
.ach-card-desc { font-size:.64rem;color:var(--muted);line-height:1.4; }
.ach-card-tier { font-family:var(--fm);font-size:.55rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:2px; }

/* ── Challenge ── */
.ch-header { display:flex;align-items:center;justify-content:space-between;padding:14px 14px 8px; }
.ch-title { font-family:var(--fh);font-size:.95rem;font-weight:800; }
.ch-empty { display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 24px;gap:10px; }
.ch-empty h3 { font-family:var(--fh);font-size:1rem;font-weight:700; }
.ch-empty p { font-size:.8rem;color:var(--muted);line-height:1.6; }
.ch-section-title { font-family:var(--fm);font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;padding:10px 14px 4px; }
.ch-card {
  margin:0 14px 10px;padding:14px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--glassb);border-left:3px solid var(--orange);
  animation:fadeUp .25s ease both;
}
.ch-card.won { border-left-color:var(--pri);opacity:.85; }
.ch-card.lost { border-left-color:var(--muted);opacity:.6; }
.ch-card-head { display:flex;align-items:flex-start;gap:10px; }
.ch-card-icon { font-size:1.5rem;flex-shrink:0; }
.ch-card-info { flex:1;min-width:0; }
.ch-card-title { font-family:var(--fh);font-size:.92rem;font-weight:700;margin-bottom:3px; }
.ch-card-meta { font-size:.7rem;color:var(--muted);line-height:1.5; }
.ch-checkin-btn {
  display:block;width:100%;margin-top:12px;padding:11px;
  border:1px solid rgba(255,140,66,.3);border-radius:10px;
  background:rgba(255,140,66,.08);color:var(--orange);
  font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s;
}
.ch-checkin-btn:hover { background:rgba(255,140,66,.18);border-color:rgba(255,140,66,.5); }
.ch-day-chip { padding:8px 14px;border:1px solid var(--glassb);border-radius:20px;background:var(--glass);color:var(--muted);font-size:.78rem;cursor:pointer;transition:all .2s; }
.ch-day-chip.active { background:rgba(255,140,66,.15);border-color:rgba(255,140,66,.4);color:var(--orange); }
.ch-day-chips { display:flex;gap:7px;flex-wrap:wrap; }

/* ── Weekly Report Modal ── */
.wr-body { display:flex;flex-direction:column;gap:14px; }
.wr-msg { font-size:.88rem;line-height:1.6;padding:12px;background:var(--glass);border-radius:var(--r);text-align:center;font-weight:500; }
.wr-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.wr-item { background:var(--glass);border:1px solid var(--glassb);border-radius:var(--rxs);padding:12px;text-align:center; }
.wr-num { font-family:var(--fh);font-size:1.5rem;font-weight:800; }
.wr-lbl { font-size:.65rem;color:var(--muted);margin-top:2px; }
.wr-row { display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--glass);border-radius:var(--rxs);font-size:.78rem; }
.wr-row span:first-child { color:var(--muted); }
.wr-row span:last-child { font-weight:600; }

/* ══════════════════════════════════
   BOSQICH 4-5 — Yangi komponentlar
   ══════════════════════════════════ */

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg:      #f0f4f8;
  --bg2:     #e4ecf4;
  --bg3:     #d8e4f0;
  --pri:     #00a67a;
  --pri-dim: rgba(0,166,122,.12);
  --pri-glow:rgba(0,166,122,.25);
  --cyan:    #0097c4;
  --text:    #1a2a3a;
  --muted:   #6a8aaa;
  --glass:   rgba(0,0,0,.035);
  --glassb:  rgba(0,0,0,.1);
}
[data-theme="light"] body { background: var(--bg); }
[data-theme="light"] .ncard { background: #fff; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .navbar { background: rgba(240,244,248,.95); border-top-color: rgba(0,0,0,.08); }
[data-theme="light"] .topbar { background: rgba(240,244,248,.95); }
[data-theme="light"] select option { background: #fff; color: var(--text); }
[data-theme="light"] .modal-sheet { background: #fff; }
[data-theme="light"] .modal-bg { background: rgba(0,0,0,.3); }

/* ── SEARCH OVERLAY ── */
.search-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(2,5,7,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.search-overlay.open { opacity: 1; pointer-events: all; }
.search-box {
  width: 100%; max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px 0;
  display: flex; flex-direction: column; gap: 0;
  height: 100%; max-height: 100vh;
}
.search-top {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0 10px;
}
.search-field {
  flex: 1; display: flex; align-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--glassb);
  border-radius: 14px; padding: 0 14px; gap: 10px;
}
.search-ic { font-size: 1rem; opacity: .5; }
.search-input {
  flex: 1; background: none; border: none;
  color: var(--text); font-size: .95rem;
  padding: 13px 0; outline: none;
}
.search-results {
  flex: 1; overflow-y: auto; padding-bottom: 40px;
}
.sr-hint {
  text-align: center; color: var(--muted);
  font-size: .82rem; padding: 40px 20px;
}
.sr-section {
  font-family: var(--fm); font-size: .62rem;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: .1em; padding: 14px 4px 6px;
}
.sr-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 10px; border-radius: 12px;
  cursor: pointer; transition: background .15s;
  margin-bottom: 2px;
}
.sr-item:active { background: var(--glass); }
.sr-item.sr-done { opacity: .5; }
.sr-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.sr-body { flex: 1; min-width: 0; }
.sr-title { font-size: .88rem; line-height: 1.4; }
.sr-why { font-size: .72rem; color: var(--muted); margin-top: 3px; font-style: italic; }
.sr-meta { font-size: .68rem; color: var(--muted); margin-top: 3px; }
.sr-check { color: var(--pri); font-size: .85rem; flex-shrink: 0; }
mark.sr-mark {
  background: rgba(0,255,179,.25); color: var(--pri);
  border-radius: 3px; padding: 0 1px;
}

/* ── WHY PROMPT — modal ── */
.why-modal-bg {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(2,5,7,.7);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.why-modal-bg.open { opacity: 1; pointer-events: all; }
.why-modal-sheet {
  width: 100%; max-width: 540px;
  background: var(--bg3);
  border: 1px solid var(--glassb);
  border-radius: 20px 20px 0 0;
  padding: 16px 18px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
  transform: translateY(100%);
  transition: transform .3s ease;
}
.why-modal-bg.open .why-modal-sheet { transform: translateY(0); }
.why-q {
  font-size: .82rem; color: var(--muted); line-height: 1.5;
}
.why-input {
  width: 100%; background: rgba(255,255,255,.045);
  border: 1px solid var(--glassb); border-radius: 10px;
  color: var(--text); font-size: .88rem;
  padding: 11px 13px; outline: none;
  font-family: var(--fb); transition: border-color .2s;
}
.why-input:focus { border-color: rgba(0,255,179,.35); }
.why-btns { display: flex; gap: 8px; }
.why-save {
  flex: 1; padding: 12px; border: none; border-radius: 10px;
  background: var(--pri-dim); color: var(--pri);
  font-size: .85rem; cursor: pointer; font-weight: 700;
  border: 1px solid rgba(0,255,179,.25);
}
.why-skip {
  padding: 12px 16px; border: 1px solid var(--glassb);
  border-radius: 10px; background: none; color: var(--muted);
  font-size: .82rem; cursor: pointer;
}

/* ── SHADOW INSIGHT PANEL ── */
.si-panel {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-end;
  background: rgba(2,5,7,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.si-panel.open { opacity: 1; pointer-events: all; }
.si-panel > * {
  width: 100%; background: var(--bg3);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid rgba(0,255,179,.15);
  padding: 20px 20px 40px;
  animation: slideUp .35s ease both;
}
.si-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 6px;
}
.si-title {
  font-family: var(--fh); font-size: 1.05rem;
  font-weight: 700; color: var(--pri);
}
.si-close {
  background: none; border: none; color: var(--muted);
  font-size: 1rem; cursor: pointer; padding: 4px;
}
.si-sub {
  font-size: .78rem; color: var(--muted); margin-bottom: 16px;
}
.si-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.si-item {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--glass); border-radius: 12px; padding: 12px;
}
.si-icon { font-size: 1.1rem; flex-shrink: 0; }
.si-text { font-size: .83rem; line-height: 1.55; color: var(--text); }
.si-btn { width: 100%; }
.si-footer { text-align: center; }

/* ── SWIPE HINT (birinchi marta) ── */
.swipe-hint {
  font-size: .65rem; color: var(--muted); text-align: center;
  padding: 6px 0 0; opacity: .6;
  font-family: var(--fm);
}

/* ══════════════════════════════════
   HAMFIKR — Partner UI
   ══════════════════════════════════ */

/* ── CONNECT SCREEN ── */
.pn-connect-wrap { padding: 0 4px 24px; display: flex; flex-direction: column; gap: 16px; }
.pn-hero { text-align: center; padding: 28px 16px 12px; }
.pn-hero-ic { font-size: 3rem; margin-bottom: 12px; }
.pn-hero-title { font-family: var(--fh); font-size: 1.4rem; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.pn-hero-sub { font-size: .82rem; color: var(--muted); line-height: 1.6; }

.pn-card { background: var(--glass); border: 1px solid var(--glassb); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.pn-card-label { font-family: var(--fm); font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.pn-code-big { font-family: var(--fm); font-size: 1.8rem; font-weight: 700; color: var(--pri); text-align: center; letter-spacing: .15em; background: var(--pri-dim); border-radius: 12px; padding: 14px; }
.pn-copy-btn { background: var(--pri-dim); border: none; color: var(--pri); border-radius: 10px; padding: 10px; font-size: .82rem; cursor: pointer; font-weight: 600; }
.pn-hint { font-size: .72rem; color: var(--muted); text-align: center; }
.pn-code-input { background: rgba(255,255,255,.06); border: 1px solid var(--glassb); border-radius: 10px; color: var(--text); font-size: 1rem; font-family: var(--fm); letter-spacing: .12em; padding: 13px; text-align: center; width: 100%; text-transform: uppercase; outline: none; transition: border-color .2s; }
.pn-code-input:focus { border-color: rgba(0,255,179,.35); }
.pn-connect-btn { width: 100%; margin-top: 2px; }
.pn-conn-msg { font-size: .75rem; text-align: center; min-height: 14px; }

/* ── HEADER CARD ── */
.pn-header-card { background: var(--glass); border: 1px solid var(--glassb); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.pn-partner-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pn-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--pri), var(--cyan)); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; color: #020507; flex-shrink: 0; }
.pn-partner-info { flex: 1; }
.pn-partner-name { font-weight: 700; font-size: .95rem; }
.pn-partner-since { font-size: .68rem; color: var(--muted); margin-top: 2px; }
.pn-refresh-btn { background: none; border: 1px solid var(--glassb); border-radius: 8px; padding: 6px 10px; font-size: .85rem; cursor: pointer; color: var(--muted); transition: all .2s; }
.pn-refresh-btn:active { transform: rotate(180deg); }

.pn-compare { display: flex; align-items: center; gap: 0; background: rgba(255,255,255,.03); border-radius: 10px; overflow: hidden; }
.pn-cmp-col { flex: 1; text-align: center; padding: 10px 6px; }
.pn-cmp-col.me { border-right: 1px solid var(--glassb); }
.pn-cmp-num { font-family: var(--fh); font-size: 1.3rem; font-weight: 800; }
.pn-cmp-col.me .pn-cmp-num { color: var(--pri); }
.pn-cmp-col.them .pn-cmp-num { color: var(--orange); }
.pn-cmp-lbl { font-size: .62rem; color: var(--muted); margin-top: 2px; }
.pn-cmp-vs { font-family: var(--fm); font-size: .68rem; color: var(--muted); flex-shrink: 0; padding: 0 8px; }

/* ── TABS ── */
.pn-tabs { display: flex; gap: 4px; background: rgba(255,255,255,.04); padding: 4px; border-radius: 12px; margin-bottom: 14px; overflow-x: auto; }
.pn-tab { flex: 1; padding: 9px 4px; border: none; background: none; color: var(--muted); font-size: .72rem; border-radius: 9px; cursor: pointer; white-space: nowrap; font-weight: 500; transition: all .2s; }
.pn-tab.active { background: var(--pri-dim); color: var(--pri); font-weight: 700; }

/* ── LENTA ── */
.pn-feed { display: flex; flex-direction: column; gap: 2px; }
.pn-feed-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px; border-radius: 10px; transition: background .15s; }
.pn-feed-item:active { background: var(--glass); }
.pn-feed-who { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.pn-feed-who.me { background: var(--pri-dim); color: var(--pri); }
.pn-feed-who.them { background: rgba(255,140,66,.15); color: var(--orange); }
.pn-feed-body { flex: 1; min-width: 0; }
.pn-feed-name { font-weight: 700; font-size: .82rem; }
.pn-feed-name.me { color: var(--pri); }
.pn-feed-name.them { color: var(--orange); }
.pn-feed-text { font-size: .82rem; color: var(--text); }
.pn-feed-time { font-size: .65rem; color: var(--muted); margin-top: 3px; }

/* ── VAZIFALAR ── */
.pn-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 600; font-size: .85rem; }
.pn-new-task { background: var(--glass); border: 1px solid var(--glassb); border-radius: 12px; padding: 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.pn-task-input { background: rgba(255,255,255,.045); border: 1px solid var(--glassb); border-radius: 9px; color: var(--text); font-size: .85rem; padding: 11px 12px; width: 100%; outline: none; font-family: var(--fb); transition: border-color .2s; }
.pn-task-input:focus { border-color: rgba(0,255,179,.35); }
.pn-task-btns { display: flex; gap: 8px; }
.pn-task-list { display: flex; flex-direction: column; gap: 8px; }
.pn-task-card { background: var(--glass); border: 1px solid var(--glassb); border-radius: 12px; padding: 14px; transition: border-color .2s; }
.pn-task-card.both-done { border-color: rgba(0,255,179,.3); background: var(--pri-dim); }
.pn-task-title { font-size: .88rem; font-weight: 600; margin-bottom: 10px; }
.pn-task-title.crossed { text-decoration: line-through; opacity: .5; }
.pn-task-row { display: flex; align-items: center; gap: 12px; }
.pn-task-user { display: flex; align-items: center; gap: 6px; }
.pn-mini-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; }
.pn-mini-avatar.me { background: var(--pri-dim); color: var(--pri); }
.pn-mini-avatar.them { background: rgba(255,140,66,.15); color: var(--orange); }
.pn-task-tick { font-size: .9rem; }
.pn-done-btn { margin-left: auto; background: var(--pri-dim); border: none; color: var(--pri); border-radius: 8px; padding: 7px 12px; font-size: .75rem; cursor: pointer; font-weight: 600; }

/* ── RAQOBAT ── */
.pn-battle-card { background: var(--glass); border: 1px solid var(--glassb); border-radius: 16px; padding: 18px; }
.pn-battle-title { font-family: var(--fh); font-size: 1.1rem; font-weight: 800; text-align: center; margin-bottom: 16px; }
.pn-battle-bar-wrap { display: flex; flex-direction: column; gap: 8px; }
.pn-battle-label { font-size: .78rem; font-weight: 600; }
.pn-battle-label.me { color: var(--pri); text-align: left; }
.pn-battle-label.them { color: var(--orange); text-align: right; }
.pn-battle-bar { height: 14px; background: rgba(255,255,255,.06); border-radius: 7px; overflow: hidden; display: flex; margin: 2px 0; }
.pn-battle-fill { height: 100%; transition: width .5s ease; }
.pn-battle-fill.me { background: linear-gradient(90deg, var(--pri), var(--cyan)); }
.pn-battle-fill.them { background: linear-gradient(90deg, var(--orange), #ffb347); }
.pn-battle-hint { font-size: .65rem; color: var(--muted); text-align: center; margin-top: 10px; }
.pn-week-history { display: flex; flex-direction: column; gap: 10px; }
.pn-week-row { display: flex; align-items: center; gap: 10px; }
.pn-week-lbl { font-size: .68rem; color: var(--muted); width: 80px; flex-shrink: 0; }
.pn-week-bars { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pn-wbar { height: 10px; border-radius: 5px; min-width: 20px; display: flex; align-items: center; padding-left: 6px; transition: width .4s ease; }
.pn-wbar.me { background: var(--pri-dim); border: 1px solid rgba(0,255,179,.2); }
.pn-wbar.them { background: rgba(255,140,66,.15); border: 1px solid rgba(255,140,66,.2); }
.pn-wbar span { font-size: .58rem; font-weight: 700; font-family: var(--fm); }
.pn-wbar.me span { color: var(--pri); }
.pn-wbar.them span { color: var(--orange); }
.pn-week-winner { font-size: .9rem; flex-shrink: 0; }

/* ── PING ── */
.pn-quick-pings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pn-quick-btn { background: var(--glass); border: 1px solid var(--glassb); border-radius: 12px; padding: 12px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: all .2s; }
.pn-quick-btn:active { background: var(--pri-dim); border-color: rgba(0,255,179,.3); transform: scale(.96); }
.pn-qping-ic { font-size: 1.4rem; }
.pn-qping-txt { font-size: .68rem; color: var(--muted); font-weight: 500; }
.pn-custom-ping { display: flex; gap: 8px; margin-bottom: 4px; }
.pn-send-btn { flex-shrink: 0; padding: 10px 14px; font-size: .78rem; }
.pn-pings-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pn-ping-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; }
.pn-ping-item.incoming { background: rgba(255,140,66,.08); border: 1px solid rgba(255,140,66,.15); }
.pn-ping-item.outgoing { background: var(--pri-dim); border: 1px solid rgba(0,255,179,.15); }
.pn-ping-ic { font-size: 1.3rem; flex-shrink: 0; }
.pn-ping-body { flex: 1; }
.pn-ping-text { font-size: .84rem; font-weight: 500; }
.pn-ping-time { font-size: .65rem; color: var(--muted); margin-top: 2px; }

/* ══ MORE MENU ══ */
.more-menu-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(2,5,7,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.more-menu-overlay.open { opacity: 1; pointer-events: all; }
.more-menu-sheet {
  width: 100%; max-width: 540px;
  background: var(--bg3);
  border: 1px solid var(--glassb);
  border-radius: 24px 24px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .3s ease;
}
.more-menu-overlay.open .more-menu-sheet { transform: translateY(0); }
.more-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.more-menu-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 16px 8px;
  background: var(--glass);
  border: 1px solid var(--glassb);
  border-radius: 14px; cursor: pointer;
  transition: all .2s;
}
.more-menu-btn:active {
  background: var(--pri-dim);
  border-color: rgba(0,255,179,.3);
  transform: scale(.95);
}
.mm-ic { font-size: 1.4rem; }
.mm-lbl { font-size: .68rem; color: var(--muted); font-family: var(--fb); }

/* ══════════════════════════════════════
   PIN LOCK — Kirish ekrani
   ══════════════════════════════════════ */
.pin-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .25s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.pin-box {
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 30px 20px 24px;
  background: var(--glass);
  border: 1px solid var(--glassb);
  border-radius: 24px;
  backdrop-filter: blur(20px);
}
.pin-logo { animation: pulse 3s ease-in-out infinite; }
.pin-title {
  font-family: var(--fh); font-size: 1.4rem;
  font-weight: 900; color: var(--pri);
}
.pin-subtitle { font-size: .8rem; color: var(--muted); }
.pin-dots { display: flex; gap: 16px; }
.pin-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--muted);
  transition: all .2s;
}
.pin-dot.filled {
  background: var(--pri); border-color: var(--pri);
  box-shadow: 0 0 10px var(--pri-glow);
  transform: scale(1.15);
}
.pin-msg {
  font-size: .75rem; color: var(--red);
  min-height: 16px; text-align: center;
  font-family: var(--fm);
}
.pin-pad, .pin-numpad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; width: 100%;
}
.pin-key {
  aspect-ratio: 1; border: 1px solid var(--glassb);
  border-radius: 14px; background: var(--glass);
  color: var(--text); font-size: 1.3rem;
  font-family: var(--fh); font-weight: 700;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.pin-key:active {
  background: var(--pri-dim);
  border-color: rgba(0,255,179,.4);
  transform: scale(.92);
}
.pin-key-empty { opacity: 0; pointer-events: none; }
.pin-forgot {
  background: none; border: none;
  color: var(--muted); font-size: .72rem;
  cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}

/* Setup modal inputs */
.pin-input-row {
  display: flex; gap: 12px; cursor: pointer;
  padding: 10px 0;
}
.pin-setup-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--muted);
  transition: all .2s; flex-shrink: 0;
}
.pin-setup-dot.filled { background: var(--pri); border-color: var(--pri); }
.pin-setup-dot.active { border-color: var(--pri); }

.pin-setting { margin: 0; }
.pin-setting-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
}

/* Animations */
@keyframes pinShake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-10px)}
  40%{transform:translateX(10px)}
  60%{transform:translateX(-7px)}
  80%{transform:translateX(7px)}
}
@keyframes pinSuccess {
  0%{transform:scale(1);opacity:1}
  50%{transform:scale(1.05)}
  100%{transform:scale(.95);opacity:0}
}

/* ══════════════════════════════════════
   BIOMETRIC — Fingerprint/FaceID ekrani
   ══════════════════════════════════════ */
.bio-overlay {
  position: fixed; inset: 0; z-index: 2001;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .3s ease;
}
.bio-box {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; width: 100%; max-width: 320px;
  padding: 36px 24px 28px;
  background: var(--glass);
  border: 1px solid var(--glassb);
  border-radius: 28px;
  backdrop-filter: blur(20px);
}
.bio-logo { margin-bottom: 4px; animation: pulse 3s ease-in-out infinite; }
.bio-title {
  font-family: var(--fh); font-size: 1.4rem;
  font-weight: 900; color: var(--pri); margin-bottom: 8px;
}
.bio-icon-wrap {
  position: relative; width: 100px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 50%;
  transition: transform .2s;
}
.bio-icon-wrap:active { transform: scale(.93); }
.bio-finger-icon {
  position: relative; z-index: 2;
  animation: bioFloat 3s ease-in-out infinite;
}
.bio-pulse {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(0,255,179,.3);
  animation: bioPulse 2s ease-in-out infinite;
}
@keyframes bioPulse {
  0%,100% { transform: scale(1); opacity: .6; }
  50%      { transform: scale(1.15); opacity: .2; }
}
@keyframes bioFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes bioShake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}
  60%{transform:translateX(-6px)}
  80%{transform:translateX(6px)}
}
.bio-hint {
  font-size: .82rem; color: var(--text);
  font-weight: 500; text-align: center;
}
.bio-hint2 { font-size: .72rem; color: var(--muted); margin-top: -8px; }
.bio-msg {
  font-size: .75rem; color: var(--red);
  min-height: 16px; text-align: center;
  font-family: var(--fm);
}
.bio-skip-btn {
  background: none; border: 1px solid var(--glassb);
  border-radius: 10px; color: var(--muted);
  font-size: .78rem; padding: 9px 20px;
  cursor: pointer; margin-top: 4px;
  transition: all .2s;
}
.bio-skip-btn:active { background: var(--glass); }

/* Settings row */
.bio-setting-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
}

/* ══════════════════════════════════════
   PWA FULLSCREEN — Telefon navigatsiyasini yashirish
   ══════════════════════════════════════ */
/* Android navigation bar ni qoplaydigan rang */
:root {
  color-scheme: dark;
}

/* Bottom navigation bar area - app uchun joy qoldirish */
.navbar {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

/* Butun body ni to'ldirish */
html, body {
  height: 100%; height: 100dvh;
  overflow: hidden;
  background: #020507;
  /* Android nav bar rangini moslashtirish */
  overscroll-behavior: none;
}

/* Page scroll areas properly */
.page-scroll {
  /* iOS safe area */
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}

/* ── "Nega navigatsiya ko'rinib turibdi?" haqida tushuntirish:
   Brauzerda ochilganda doim ko'rinadi.
   PWA sifatida "Uy ekraniga qo'shish" qilinsa — YO'QOLADI.
   ── */

/* ── PWA Install Banner ── */
.install-banner {
  position: fixed; top: 60px; left: 10px; right: 10px;
  z-index: 400; animation: slideDown .3s ease;
}
@keyframes slideDown { from{transform:translateY(-20px);opacity:0} to{transform:translateY(0);opacity:1} }
.install-inner {
  background: var(--bg3);
  border: 1px solid rgba(0,255,179,.25);
  border-radius: 12px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  font-size: .78rem; color: var(--text);
}
.install-btn {
  margin-left: auto; background: var(--pri); border: none;
  color: #020507; font-weight: 700; font-size: .76rem;
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  white-space: nowrap;
}
.install-close {
  background: none; border: none; color: var(--muted);
  font-size: .9rem; cursor: pointer; padding: 2px 4px;
  flex-shrink: 0;
}

/* ══════════════════════════════════
   V8 YANGI XUSUSIYATLAR CSS
   ══════════════════════════════════ */

/* ── BULK ACTIONS ── */
.bulk-bar {
  position: fixed;
  bottom: calc(66px + env(safe-area-inset-bottom));
  left: 12px; right: 12px;
  background: #1a1f2e;
  border: 1px solid rgba(0,255,179,.25);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 900;
  opacity: 0;
  transform: translateY(20px);
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.bulk-bar.show { opacity: 1; transform: translateY(0); }
.bulk-info { display: flex; align-items: center; gap: 10px; }
.bulk-info span { font-size: .8rem; font-weight: 700; color: var(--pri); }
.bulk-all-btn { background: var(--glass); border: 1px solid var(--glassb); border-radius: 8px; padding: 5px 10px; font-size: .72rem; color: var(--muted); cursor: pointer; }
.bulk-actions { display: flex; gap: 8px; }
.bulk-btn { border: none; border-radius: 10px; padding: 8px 12px; font-size: .78rem; font-weight: 600; cursor: pointer; }
.bulk-btn.done { background: var(--pri-dim); color: var(--pri); }
.bulk-btn.del  { background: rgba(255,69,103,.15); color: var(--red); }
.bulk-btn.cancel { background: var(--glass); color: var(--muted); border: 1px solid var(--glassb); }
.ncard.bulk-selected { border: 1px solid rgba(0,255,179,.4) !important; background: rgba(0,255,179,.04) !important; }

/* ── TAGS ── */
.tags-input-wrap {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--glassb);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 42px;
  transition: border-color .2s;
}
.tags-input-wrap:focus-within { border-color: rgba(0,255,179,.35); }
.tags-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-chip {
  background: var(--pri-dim);
  color: var(--pri);
  border-radius: 20px;
  padding: 3px 8px 3px 10px;
  font-size: .72rem;
  font-weight: 600;
  display: flex; align-items: center; gap: 4px;
}
.tag-chip button {
  background: none; border: none; color: var(--pri); cursor: pointer;
  font-size: .75rem; padding: 0; line-height: 1; opacity: .7;
}
.tags-raw-input {
  flex: 1; min-width: 80px;
  background: none; border: none; outline: none;
  color: var(--text); font-size: .82rem; font-family: var(--fb);
  padding: 2px 0;
}
.tags-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px; min-height: 0;
}
.tag-sugg-btn {
  background: var(--glass); border: 1px solid var(--glassb);
  color: var(--muted); border-radius: 20px;
  padding: 4px 10px; font-size: .72rem; cursor: pointer;
  transition: all .15s;
}
.tag-sugg-btn:active { background: var(--pri-dim); color: var(--pri); }

/* Tags na kartochkada */
.nc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.nc-tag {
  background: rgba(0,255,179,.1);
  color: var(--pri);
  border-radius: 10px;
  padding: 2px 7px;
  font-size: .62rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(0,255,179,.15);
}
.nc-tag:active { background: var(--pri-dim); }

/* Tags filter bar */
.tags-filter-bar {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  padding: 4px 0 8px;
  align-items: center;
  scrollbar-width: none;
}
.tags-filter-bar::-webkit-scrollbar { display: none; }
.tag-filter-chip {
  background: var(--glass);
  border: 1px solid var(--glassb);
  color: var(--muted);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s;
}
.tag-filter-chip.active {
  background: var(--pri-dim);
  border-color: rgba(0,255,179,.3);
  color: var(--pri);
}
.tag-filter-chip.clear {
  background: rgba(255,69,103,.12);
  border-color: rgba(255,69,103,.2);
  color: var(--red);
}

/* ── FORGOT PASSWORD ── */
#forgotBtn {
  border: none !important;
  background: none !important;
  cursor: pointer;
}

/* ── AI SETTINGS ── */
.setting-section-title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 12px 0 6px;
  border-top: 1px solid var(--glassb);
  margin-top: 4px;
}
.setting-ai-wrap {
  background: var(--glass);
  border: 1px solid var(--glassb);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
}

/* ══════════════════════════════════════════════
   AUTO AI SUGGEST BAR
   ══════════════════════════════════════════════ */
.ai-suggest-bar {
  background: linear-gradient(135deg, rgba(0,255,179,.06), rgba(0,212,255,.06));
  border: 1px solid rgba(0,255,179,.2);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  animation: fadeSlideIn .3s ease;
}
.ai-suggest-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.ai-suggest-icon { font-size: .9rem; }
.ai-suggest-label {
  font-size: .7rem;
  font-weight: 700;
  color: var(--pri);
  text-transform: uppercase;
  letter-spacing: .05em;
  flex: 1;
}
.ai-suggest-close {
  background: none; border: none;
  color: var(--muted); font-size: .8rem;
  cursor: pointer; padding: 2px 6px;
}
.ai-reason {
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: 8px;
  font-style: italic;
}
.ai-suggest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-chip {
  border: none;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  font-family: var(--fb);
}
.ai-chip.cat  { background: rgba(0,255,179,.12); color: var(--pri); }
.ai-chip.imp  { background: rgba(255,165,0,.12); color: #ffa500; }
.ai-chip.date { background: rgba(0,212,255,.12); color: var(--cyan); }
.ai-chip.tag  { background: rgba(180,100,255,.12); color: #b464ff; }
.ai-chip.applied {
  opacity: .4;
  text-decoration: line-through;
}
.ai-chip:active { transform: scale(.95); }

/* ══════════════════════════════════════════════
   AI CHAT PAGE
   ══════════════════════════════════════════════ */
#pgAIChat {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--glassb) transparent;
}
.ai-chat-welcome {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ai-chat-avatar {
  font-size: 1.6rem;
  flex-shrink: 0;
  margin-top: 4px;
}
.ai-chat-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  animation: fadeSlideIn .25s ease;
}
.ai-chat-row.user { flex-direction: row-reverse; }
.ai-chat-row.bot  { flex-direction: row; }
.ai-chat-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: .82rem;
  line-height: 1.55;
}
.ai-chat-bubble.user {
  background: var(--pri);
  color: #020507;
  font-weight: 500;
  border-bottom-right-radius: 4px;
}
.ai-chat-bubble.bot {
  background: var(--glass);
  border: 1px solid var(--glassb);
  color: var(--text);
  border-bottom-left-radius: 4px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.ai-bicon { font-size: .9rem; flex-shrink: 0; margin-top: 1px; }
.ai-chat-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.ai-chat-hints button {
  background: rgba(0,255,179,.1);
  border: 1px solid rgba(0,255,179,.2);
  color: var(--pri);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--fb);
  transition: all .15s;
}
.ai-chat-hints button:active {
  background: rgba(0,255,179,.2);
  transform: scale(.97);
}
/* Typing dots */
.typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
}
.typing-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: typingBounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
  0%,60%,100% { transform: translateY(0); opacity:.4; }
  30% { transform: translateY(-6px); opacity:1; }
}
/* Input area */
.ai-chat-input-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--glassb);
  background: var(--bg);
}
.ai-chat-input {
  flex: 1;
  background: var(--glass);
  border: 1px solid var(--glassb);
  border-radius: 20px;
  padding: 10px 16px;
  color: var(--text);
  font-size: .84rem;
  font-family: var(--fb);
  resize: none;
  outline: none;
  line-height: 1.4;
  max-height: 120px;
  overflow-y: auto;
  transition: border-color .2s;
}
.ai-chat-input:focus { border-color: rgba(0,255,179,.35); }
.ai-chat-input::placeholder { color: var(--muted); }
.ai-chat-send {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--pri);
  border: none;
  color: #020507;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .2s;
}
.ai-chat-send:active { transform: scale(.9); }

@keyframes fadeSlideIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════════════════════
   AI HOME TRIGGER BAR
   ══════════════════════════════════════════════ */
.ai-home-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: linear-gradient(135deg, rgba(0,255,179,.07), rgba(0,212,255,.07));
  border: 1px solid rgba(0,255,179,.18);
  border-radius: 14px;
  padding: 11px 14px;
  margin: 8px 0 12px;
  cursor: pointer;
  transition: all .2s;
  font-family: var(--fb);
  text-align: left;
}
.ai-home-trigger:active {
  background: rgba(0,255,179,.12);
  transform: scale(.99);
}
.ai-home-trigger-avatar {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.ai-home-trigger-text {
  flex: 1;
  font-size: .83rem;
  color: var(--muted);
}
.ai-home-trigger-icon {
  color: var(--pri);
  flex-shrink: 0;
  opacity: .7;
}

/* ══════════════════════════════════════════════
   AI CHAT FULLSCREEN OVERLAY
   ══════════════════════════════════════════════ */
.ai-chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg);
  display: none;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.ai-chat-overlay.show {
  transform: translateY(0);
}

/* Top bar */
.ai-chat-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  padding-top: calc(14px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--glassb);
  background: var(--bg);
  gap: 12px;
  flex-shrink: 0;
}
.ai-chat-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ai-chat-topbar-avatar {
  width: 38px; height: 38px;
  background: linear-gradient(135deg,rgba(0,255,179,.15),rgba(0,212,255,.15));
  border: 1px solid rgba(0,255,179,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.ai-chat-topbar-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
}
.ai-chat-topbar-status {
  font-size: .7rem;
  color: var(--pri);
}
.ai-topbar-btn {
  background: var(--glass);
  border: 1px solid var(--glassb);
  border-radius: 10px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: .9rem;
  color: var(--muted);
  transition: all .15s;
}
.ai-topbar-btn:active { background: rgba(255,255,255,.1); }

/* Messages */
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--glassb) transparent;
}
.ai-chat-welcome {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-chat-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.ai-chat-hints button {
  background: rgba(0,255,179,.08);
  border: 1px solid rgba(0,255,179,.18);
  color: var(--pri);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--fb);
  transition: all .15s;
}
.ai-chat-hints button:active {
  background: rgba(0,255,179,.18);
  transform: scale(.97);
}

/* Message rows */
.ai-chat-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  animation: fadeSlideIn .22s ease;
}
.ai-chat-row.user { flex-direction: row-reverse; }
.ai-chat-row.bot  { flex-direction: row; }

.ai-chat-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: .84rem;
  line-height: 1.6;
}
.ai-chat-bubble.user {
  background: var(--pri);
  color: #020507;
  font-weight: 500;
  border-bottom-right-radius: 4px;
}
.ai-chat-bubble.bot {
  background: #1a1f2e;
  border: 1px solid var(--glassb);
  color: var(--text);
  border-bottom-left-radius: 4px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.ai-bicon { font-size: .9rem; flex-shrink: 0; padding-top: 1px; }

/* Typing */
.typing-dots { display:flex; gap:4px; align-items:center; padding:4px 0; }
.typing-dots span {
  width:7px; height:7px; border-radius:50%;
  background:var(--muted);
  animation: typingBounce 1.2s infinite;
}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typingBounce {
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-6px);opacity:1}
}

/* Input */
.ai-chat-input-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--glassb);
  background: var(--bg);
  flex-shrink: 0;
}
.ai-chat-input {
  flex: 1;
  background: #1a1f2e;
  border: 1px solid var(--glassb);
  border-radius: 22px;
  padding: 11px 18px;
  color: var(--text);
  font-size: .84rem;
  font-family: var(--fb);
  resize: none;
  outline: none;
  line-height: 1.45;
  max-height: 120px;
  overflow-y: auto;
  transition: border-color .2s;
}
.ai-chat-input:focus { border-color: rgba(0,255,179,.3); }
.ai-chat-input::placeholder { color: var(--muted); }
.ai-chat-send {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--pri);
  border: none;
  color: #020507;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .2s;
}
.ai-chat-send:active { transform: scale(.9); }

/* Bot bubble iconni olib tashlash */
.ai-chat-bubble.bot {
  display: block !important;
}
.ai-bicon { display: none !important; }

/* ══════════════════════════════════════════════
   AI HOME ROW
   ══════════════════════════════════════════════ */
.ai-home-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0 12px;
}
.ai-home-trigger { margin: 0; flex: 1; }
.ai-nlp-btn {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg,rgba(0,255,179,.1),rgba(0,212,255,.1));
  border: 1px solid rgba(0,255,179,.2);
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .2s;
  display: flex; align-items: center; justify-content: center;
}
.ai-nlp-btn:active { transform: scale(.92); background: rgba(0,255,179,.18); }

/* ══════════════════════════════════════════════
   NLP MODAL
   ══════════════════════════════════════════════ */
.nlp-examples {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.nlp-examples button {
  background: var(--glass); border: 1px solid var(--glassb);
  border-radius: 20px; padding: 5px 12px;
  font-size: .72rem; color: var(--muted);
  cursor: pointer; font-family: var(--fb);
  transition: all .15s;
}
.nlp-examples button:active { background: rgba(0,255,179,.1); color: var(--pri); }
.nlp-result-card {
  background: var(--glass); border: 1px solid rgba(0,255,179,.2);
  border-radius: 12px; padding: 12px; margin-top: 10px;
}
.nlp-result-title {
  font-size: .7rem; font-weight: 700; color: var(--pri);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px;
}
.nlp-result-row {
  display: flex; justify-content: space-between;
  font-size: .78rem; padding: 5px 0;
  border-bottom: 1px solid var(--glassb);
}
.nlp-result-row:last-child { border-bottom: none; }
.nlp-result-row span:first-child { color: var(--muted); }
.nlp-result-row span:last-child { color: var(--text); font-weight: 500; }

/* ══════════════════════════════════════════════
   MORNING BRIEF CARD
   ══════════════════════════════════════════════ */
.ai-brief-card {
  background: linear-gradient(135deg,rgba(255,200,50,.06),rgba(255,120,0,.06));
  border: 1px solid rgba(255,180,50,.2);
  border-radius: 16px; padding: 14px; margin-bottom: 14px;
  animation: fadeSlideIn .4s ease;
}
.ai-brief-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.ai-brief-icon { font-size: 1.1rem; }
.ai-brief-title { flex: 1; font-size: .8rem; font-weight: 700; color: #ffb830; }
.ai-brief-header button {
  background: none; border: none; color: var(--muted);
  font-size: .85rem; cursor: pointer;
}
.ai-brief-stats {
  display: flex; gap: 10px; margin-bottom: 10px;
}
.ai-brief-stat {
  flex: 1; text-align: center;
  background: rgba(255,255,255,.05);
  border-radius: 10px; padding: 8px 4px;
}
.ai-brief-stat span { display: block; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.ai-brief-stat small { font-size: .65rem; color: var(--muted); }
.ai-brief-stat.urgent span { color: var(--red); }
.ai-brief-stat.streak span { color: #ffb830; }
.ai-brief-text { font-size: .8rem; line-height: 1.6; color: var(--text); margin: 0 0 10px; }
.ai-brief-btn {
  width: 100%; background: rgba(255,180,50,.12);
  border: 1px solid rgba(255,180,50,.2); border-radius: 10px;
  padding: 9px; color: #ffb830; font-size: .78rem;
  font-weight: 600; cursor: pointer; font-family: var(--fb);
}

/* ══════════════════════════════════════════════
   WEEKLY REPORT
   ══════════════════════════════════════════════ */
.weekly-report-stats, .habits-stats {
  display: flex; gap: 10px; margin: 12px 0;
}
.wr-stat {
  flex: 1; text-align: center; background: var(--glass);
  border: 1px solid var(--glassb); border-radius: 10px; padding: 10px 4px;
}
.wr-num { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.wr-lbl { font-size: .65rem; color: var(--muted); margin-top: 2px; }
.wr-progress {
  height: 6px; background: var(--glass);
  border-radius: 3px; margin-bottom: 12px; overflow: hidden;
}
.wr-progress-bar {
  height: 100%; background: var(--pri);
  border-radius: 3px; transition: width .6s ease;
}
.wr-text { font-size: .8rem; line-height: 1.65; color: var(--text); margin: 0; }

/* ══════════════════════════════════════════════
   HABITS ANALYSIS
   ══════════════════════════════════════════════ */
.habits-analysis {
  font-size: .8rem; line-height: 1.7; color: var(--text);
  background: var(--glass); border: 1px solid var(--glassb);
  border-radius: 12px; padding: 12px; margin-top: 10px;
  max-height: 280px; overflow-y: auto;
}

/* ══════════════════════════════════════════════
   AI PARTNER / COMPARE
   ══════════════════════════════════════════════ */
.compare-stats {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0; text-align: center;
}
.compare-col { flex: 1; }
.compare-vs {
  font-size: .7rem; font-weight: 800; color: var(--muted);
  background: var(--glass); border-radius: 50%;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.compare-col.you .compare-label { color: var(--pri); }
.compare-col.partner .compare-label { color: var(--cyan); }
.compare-label { font-size: .7rem; font-weight: 700; margin-bottom: 4px; }
.compare-val { font-size: 1rem; font-weight: 700; color: var(--text); margin: 2px 0; }

/* Joint Plan */
.joint-plan-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0;
  max-height: 260px; overflow-y: auto;
}
.joint-task {
  font-size: .72rem; color: var(--text);
  background: var(--glass); border-radius: 8px;
  padding: 6px 8px; margin-bottom: 4px;
  border: 1px solid var(--glassb);
}

/* Utility */
.w100 { width: 100%; }
.mt8 { margin-top: 8px; }

/* ══════════════════════════════════════
   POMODORO V8 — Yangilangan
   ══════════════════════════════════════ */
.pom-topbar-btn {
  font-size: 1rem;
  transition: color .3s, transform .2s;
}
.pom-topbar-btn:active { transform: scale(.88); }

@keyframes pomPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .6; transform: scale(1.15); }
}

/* Custom vaqt kiritish qatori */
.pom-custom-row {
  display: flex; gap: 8px; width: 100%;
  margin-top: -4px;
}
.pom-custom-inp {
  flex: 1; background: rgba(255,255,255,.06);
  border: 1px solid var(--glassb); border-radius: 10px;
  color: var(--text); font-size: .85rem;
  padding: 9px 12px; outline: none;
  font-family: var(--fb);
  -moz-appearance: textfield;
}
.pom-custom-inp::-webkit-outer-spin-button,
.pom-custom-inp::-webkit-inner-spin-button { -webkit-appearance: none; }
.pom-custom-inp:focus { border-color: rgba(255,140,66,.5); }
.pom-custom-btn {
  padding: 9px 16px; background: rgba(255,140,66,.15);
  border: 1px solid rgba(255,140,66,.3);
  border-radius: 10px; color: #ff8c42;
  font-size: .82rem; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: all .2s;
}
.pom-custom-btn:active { background: rgba(255,140,66,.3); transform: scale(.95); }

/* Start tugma — ishlayotganda */
.pom-btn-main.running {
  background: rgba(255,69,103,.15);
  border-color: rgba(255,69,103,.4);
  color: #ff4567;
}

/* Reset tugma */
.pom-reset-btn { font-size: .82rem; padding: 10px 18px; }

/* Sessiya doirachalari */
.pom-sessions {
  text-align: center;
  min-height: 32px;
  margin-top: 4px;
}
.pom-sess-label {
  font-size: .65rem; color: var(--muted);
  margin-bottom: 6px; font-family: var(--fm);
  letter-spacing: .05em; text-transform: uppercase;
}
.pom-sess-dots {
  display: flex; gap: 4px;
  justify-content: center; flex-wrap: wrap;
}
.pom-sess-dot {
  font-size: 1rem;
  animation: popIn .3s ease;
}
@keyframes popIn {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}

/* Topbar AI nlp + pom tugmalar bir qatorda */
.tb-right {
  display: flex; align-items: center; gap: 4px;
}
.ai-nlp-btn {
  background: none; border: none;
  font-size: 1.1rem; cursor: pointer;
  padding: 6px 8px; border-radius: 8px;
  transition: background .2s;
}
.ai-nlp-btn:active { background: var(--glass); }

/* ══════════════════════════════════════════════
   ALARM TIZIMI — Faza 1
   ══════════════════════════════════════════════ */

/* ── Page header ── */
.page-hdr {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 16px 16px 0;
}
.page-hdr-title {
  font-size: 1.05rem; font-weight: 900;
  color: var(--text);
}

/* ── Alarm list ── */
.alm-list {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 16px;
}

/* ── Keyingi alarm banner ── */
.alm-next-banner {
  margin: 12px 16px 0;
  padding: 10px 14px;
  background: rgba(0,255,179,.07);
  border: 1px solid rgba(0,255,179,.2);
  border-radius: 10px;
  font-size: .75rem; color: var(--text);
}
.alm-next-banner b { color: var(--pri); }

/* ── Bo'sh holat ── */
.alm-empty {
  text-align: center; padding: 60px 20px;
  color: var(--muted);
}
.alm-empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: .3; }
.alm-empty-txt  { font-size: .9rem; font-weight: 700; margin-bottom: 6px; }
.alm-empty-sub  { font-size: .75rem; opacity: .6; }

/* ── Alarm card ── */
.alm-card {
  background: var(--bg2);
  border: 1px solid var(--glassb);
  border-radius: 14px; overflow: hidden;
  transition: opacity .2s;
}
.alm-card.disabled { opacity: .45; }

.alm-card-main { padding: 14px 14px 10px; }
.alm-card-left { flex: 1; }

.alm-time-row {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 4px;
}
.alm-time {
  font-size: 2.2rem; font-weight: 900;
  font-family: var(--fh); color: var(--text);
  letter-spacing: -.03em; line-height: 1;
}
.alm-label {
  font-size: .8rem; color: var(--muted); margin-bottom: 6px;
}
.alm-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: .68rem; color: var(--muted); margin-bottom: 7px;
}
.alm-days {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.alm-day-chip {
  padding: 2px 7px; border-radius: 5px; font-size: .65rem;
  background: var(--pri-dim); color: var(--pri); font-weight: 700;
}
.alm-day-every {
  font-size: .68rem; color: var(--pri); font-weight: 700;
}

/* Card actions */
.alm-card-actions {
  display: flex; gap: 0;
  border-top: 1px solid var(--glassb);
}
.alm-edit-btn, .alm-del-btn {
  flex: 1; padding: 10px; background: none; border: none;
  color: var(--muted); font-size: .75rem; cursor: pointer;
  transition: background .2s;
}
.alm-edit-btn { border-right: 1px solid var(--glassb); }
.alm-edit-btn:active { background: var(--glass); color: var(--text); }
.alm-del-btn:active  { background: rgba(255,69,103,.1); color: var(--red); }

/* ── Toggle switch ── */
.alm-toggle { position: relative; cursor: pointer; display: inline-block; }
.alm-toggle input { opacity: 0; width: 0; height: 0; }
.alm-toggle-track {
  display: block; width: 44px; height: 24px;
  background: rgba(255,255,255,.1);
  border-radius: 12px; transition: background .25s;
  position: relative;
}
.alm-toggle-track::after {
  content: ''; position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .25s;
}
.alm-toggle input:checked + .alm-toggle-track { background: var(--pri); }
.alm-toggle input:checked + .alm-toggle-track::after { transform: translateX(20px); }

/* ── ALARM MODAL ── */
.alm-sheet {
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
  max-height: 92vh; overflow-y: auto;
}
.alm-modal-hdr { padding: 4px 0 12px; }

/* Vaqt tanlash */
.alm-time-pick {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 18px;
}
.alm-time-col {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.alm-time-col label { font-size: .65rem; color: var(--muted); font-family: var(--fm); }
.alm-num-inp {
  width: 80px; text-align: center;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--glassb); border-radius: 12px;
  color: var(--text); font-size: 2.2rem; font-weight: 900;
  font-family: var(--fh); padding: 10px 6px; outline: none;
  -moz-appearance: textfield;
}
.alm-num-inp::-webkit-inner-spin-button,
.alm-num-inp::-webkit-outer-spin-button { -webkit-appearance: none; }
.alm-num-inp:focus { border-color: rgba(0,255,179,.4); }
.alm-time-sep {
  font-size: 2rem; font-weight: 900; color: var(--muted);
  margin-top: 16px;
}

/* Fields */
.alm-field { margin-bottom: 14px; }
.alm-lbl {
  display: block; font-size: .7rem; font-weight: 700;
  color: var(--muted); margin-bottom: 7px;
  font-family: var(--fm); letter-spacing: .04em; text-transform: uppercase;
}

/* Shablonlar */
.alm-template-row { display: flex; gap: 7px; }
.alm-tmpl-btn {
  flex: 1; padding: 9px 4px; font-size: .72rem;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glassb); border-radius: 9px;
  color: var(--text); cursor: pointer; transition: all .2s;
}
.alm-tmpl-btn:active {
  background: var(--pri-dim); border-color: rgba(0,255,179,.3);
  color: var(--pri);
}

/* Kunlar */
.alm-days-row { display: flex; gap: 5px; }
.alm-day-btn {
  flex: 1; padding: 9px 0; font-size: .72rem; font-weight: 700;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glassb); border-radius: 9px;
  color: var(--muted); cursor: pointer; transition: all .2s;
}
.alm-day-btn.active {
  background: var(--pri-dim); border-color: rgba(0,255,179,.35);
  color: var(--pri);
}

/* Ovoz grid */
.alm-sound-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
}
.alm-sound-btn {
  padding: 10px 6px; font-size: .72rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glassb); border-radius: 9px;
  color: var(--muted); cursor: pointer; transition: all .2s;
  text-align: center;
}
.alm-sound-btn.active {
  background: rgba(255,140,66,.12);
  border-color: rgba(255,140,66,.35); color: #ff8c42;
}
.alm-sound-btn:active { transform: scale(.95); }

/* Snooze + Vibro row */
.alm-row-2 { display: flex; gap: 12px; }
.alm-vibro-field {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
}
.alm-toggle-lg .alm-toggle-track { width: 50px; height: 28px; }
.alm-toggle-lg .alm-toggle-track::after { width: 22px; height: 22px; }
.alm-toggle-lg input:checked + .alm-toggle-track::after { transform: translateX(22px); }

/* ── ALARM RING EKRANI ── */
.alm-ring-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(160deg, #020507 0%, #0a1a10 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 30px 20px;
  animation: fadeIn .3s ease;
}
.alm-ring-time {
  font-size: 5rem; font-weight: 900;
  font-family: var(--fh); color: var(--pri);
  letter-spacing: -.04em; line-height: 1;
  margin-bottom: 8px;
  text-shadow: 0 0 40px rgba(0,255,179,.3);
}
.alm-ring-label {
  font-size: 1rem; color: var(--muted); margin-bottom: 36px;
}

/* Pulsing circles */
.alm-ring-pulse {
  position: relative; width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 40px;
}
.alm-ring-circle {
  position: absolute; border-radius: 50%;
  border: 2px solid rgba(0,255,179,.25);
  animation: almPulse 2s ease-out infinite;
}
.alm-ring-circle.c1 { width: 80px;  height: 80px;  animation-delay: 0s; }
.alm-ring-circle.c2 { width: 110px; height: 110px; animation-delay: .4s; }
.alm-ring-circle.c3 { width: 140px; height: 140px; animation-delay: .8s; }
@keyframes almPulse {
  0%   { transform: scale(.9); opacity: .7; }
  100% { transform: scale(1.1); opacity: 0; }
}
.alm-ring-bell {
  font-size: 3rem; animation: almBellShake .5s ease-in-out infinite alternate;
  z-index: 2;
}
@keyframes almBellShake {
  0%   { transform: rotate(-12deg); }
  100% { transform: rotate(12deg); }
}

/* Ring actions */
.alm-ring-actions { width: 100%; max-width: 320px; }
.alm-snooze-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.alm-snooze-lbl { font-size: .8rem; color: var(--muted); flex-shrink: 0; }
.alm-snooze-btns { display: flex; gap: 7px; flex: 1; }
.alm-snooze-btns button {
  flex: 1; padding: 10px 0; font-size: .75rem; font-weight: 700;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glassb); border-radius: 10px;
  color: var(--text); cursor: pointer; transition: all .2s;
}
.alm-snooze-btns button:active { background: rgba(255,255,255,.15); }
.alm-stop-btn {
  width: 100%; padding: 16px; font-size: 1rem; font-weight: 900;
  background: var(--pri); border: none; border-radius: 14px;
  color: #020507; cursor: pointer; transition: all .2s;
  box-shadow: 0 4px 20px rgba(0,255,179,.3);
}
.alm-stop-btn:active { transform: scale(.97); }

/* Coming soon ring label */
.alm-ring-coming-soon {
  margin-top: 20px; font-size: .72rem; color: var(--muted);
  display: flex; align-items: center; gap: 6px; opacity: .6;
}

/* ── COMING SOON CARD ── */
.alm-coming-soon-card {
  margin: 8px 16px 24px;
  padding: 16px;
  background: rgba(124,58,237,.07);
  border: 1px dashed rgba(124,58,237,.25);
  border-radius: 14px;
}
.alm-cs-badge {
  display: inline-block; padding: 3px 10px;
  background: rgba(124,58,237,.15); border-radius: 6px;
  font-size: .65rem; font-weight: 900; color: #a78bfa;
  margin-bottom: 8px; letter-spacing: .05em;
}
.alm-cs-title {
  font-size: .95rem; font-weight: 900; color: #c4b5fd;
  margin-bottom: 6px;
}
.alm-cs-desc {
  font-size: .74rem; color: #6a5a8a; line-height: 1.5; margin-bottom: 10px;
}
.alm-cs-chips {
  display: flex; gap: 5px; flex-wrap: wrap;
}
.alm-cs-chips span {
  padding: 3px 9px; border-radius: 6px; font-size: .65rem;
  background: rgba(124,58,237,.1); color: #8b6fd4;
  border: 1px solid rgba(124,58,237,.15);
}

/* ══════════════════════════════════════════════
   FAZA 2 — CHALLENGE ALARM
   ══════════════════════════════════════════════ */

/* ── Modal: challenge tanlash ── */
.alm-challenge-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.alm-ch-btn {
  padding: 9px 4px; font-size: .68rem; font-weight: 700;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glassb); border-radius: 9px;
  color: var(--muted); cursor: pointer; transition: all .2s;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  line-height: 1.3;
}
.alm-ch-btn.active {
  background: rgba(255,69,103,.12);
  border-color: rgba(255,69,103,.35);
  color: #ff4567;
}
.alm-ch-btn:disabled { opacity: .4; cursor: not-allowed; }
.alm-ch-coming { position: relative; }
.alm-soon {
  display: block; font-size: .52rem;
  color: #7c3aed; font-weight: 600;
}
.alm-ch-badge {
  padding: 1px 6px; border-radius: 4px; font-size: .6rem;
  background: rgba(255,69,103,.12); color: #ff4567; font-weight: 700;
}

/* Og'irlik */
.alm-diff-row { display: flex; gap: 7px; }
.alm-diff-btn {
  flex: 1; padding: 9px 0; font-size: .72rem; font-weight: 700;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--glassb); border-radius: 9px;
  color: var(--muted); cursor: pointer; transition: all .2s;
}
.alm-diff-btn.active {
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.35); color: #f59e0b;
}

/* Streak badge */
.alm-streak-badge {
  display: inline-block; padding: 5px 12px;
  background: rgba(255,140,66,.1); border: 1px solid rgba(255,140,66,.25);
  border-radius: 8px; font-size: .75rem; font-weight: 700; color: #ff8c42;
}

/* ── CHALLENGE SCREEN ── */
.ch2-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: linear-gradient(160deg, #0a0208 0%, #150a1a 100%);
  display: flex; flex-direction: column;
  align-items: center; padding: 40px 24px 30px;
  animation: fadeIn .25s ease;
  overflow-y: auto;
}
.ch2-header { text-align: center; margin-bottom: 28px; }
.ch2-badge {
  display: inline-block; padding: 4px 14px;
  background: rgba(255,69,103,.15); border: 1px solid rgba(255,69,103,.3);
  border-radius: 20px; font-size: .72rem; font-weight: 900;
  color: #ff4567; margin-bottom: 10px; letter-spacing: .06em;
}
.ch2-title {
  font-size: 1.6rem; font-weight: 900;
  color: var(--text); margin-bottom: 6px;
}
.ch2-warn {
  font-size: .72rem; color: #ff4567; opacity: .8;
}
.ch2-body {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column;
  align-items: center; gap: 14px; margin-bottom: 20px;
}

/* ── Matematik ── */
.ch2-math-q {
  font-size: 3rem; font-weight: 900; color: var(--pri);
  font-family: var(--fh); letter-spacing: -.02em;
  text-align: center; line-height: 1.1;
}
.ch2-math-hint { font-size: .75rem; color: var(--muted); }
.ch2-math-input-row { display: flex; gap: 8px; width: 100%; }
.ch2-input {
  flex: 1; background: rgba(255,255,255,.07);
  border: 1px solid var(--glassb); border-radius: 12px;
  color: var(--text); font-size: 1.5rem; font-weight: 900;
  font-family: var(--fh); padding: 12px 16px;
  outline: none; text-align: center;
  -moz-appearance: textfield;
}
.ch2-input::-webkit-inner-spin-button,
.ch2-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.ch2-input:focus { border-color: var(--pri); }
.ch2-go-btn {
  padding: 12px 20px; background: var(--pri); border: none;
  border-radius: 12px; color: #020507; font-size: 1rem;
  font-weight: 900; cursor: pointer; transition: all .2s;
  flex-shrink: 0;
}
.ch2-go-btn:active { transform: scale(.95); }
.ch2-go-wide { width: 100%; padding: 16px; font-size: 1rem; }
.ch2-err {
  font-size: .78rem; color: #ff4567; min-height: 18px;
  text-align: center;
}
@keyframes ch2Shake {
  0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}
}

/* ── Silkitish ── */
.ch2-shake-counter {
  font-size: 5rem; font-weight: 900; color: var(--pri);
  font-family: var(--fh); line-height: 1;
  animation: none;
}
.ch2-shake-max { font-size: 1rem; color: var(--muted); margin-top: -6px; }
.ch2-progress-wrap {
  width: 100%; height: 8px;
  background: rgba(255,255,255,.07); border-radius: 4px; overflow: hidden;
}
.ch2-progress-bar {
  height: 100%; background: linear-gradient(90deg, var(--pri), #00b87a);
  border-radius: 4px; transition: width .2s;
}
.ch2-shake-hint { font-size: .75rem; color: var(--muted); text-align: center; }
.ch2-tap-btn {
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(0,255,179,.1); border: 3px solid var(--pri);
  font-size: 1rem; font-weight: 900; color: var(--pri);
  cursor: pointer; transition: all .1s; user-select: none;
}
.ch2-tap-btn:active { transform: scale(.88); background: rgba(0,255,179,.2); }
@keyframes ch2Pop {
  0%{transform:scale(1)} 50%{transform:scale(1.25)} 100%{transform:scale(1)}
}

/* ── Xotira ── */
.ch2-mem-nums {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.ch2-mem-digit {
  width: 52px; height: 52px; border-radius: 12px;
  background: rgba(124,58,237,.15); border: 2px solid rgba(124,58,237,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 900; color: #a78bfa;
}
.ch2-mem-timer { font-size: .8rem; color: var(--muted); }
.ch2-mem-hidden {
  font-size: 1.5rem; padding: 16px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--glassb);
}
.ch2-mem-enter { font-size: .78rem; color: var(--muted); }
.ch2-mem-inputs { display: flex; gap: 8px; justify-content: center; }
.ch2-mem-inp {
  width: 48px; height: 52px; border-radius: 10px;
  background: rgba(255,255,255,.07); border: 1px solid var(--glassb);
  color: var(--text); font-size: 1.4rem; font-weight: 900;
  text-align: center; outline: none; padding: 0;
  -moz-appearance: textfield;
}
.ch2-mem-inp::-webkit-inner-spin-button { -webkit-appearance: none; }
.ch2-mem-inp:focus { border-color: #a78bfa; }

/* ── Suv ── */
.ch2-water-icon { font-size: 4rem; animation: ch2Float 2s ease-in-out infinite; }
@keyframes ch2Float {
  0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}
}
.ch2-water-txt { font-size: .9rem; color: var(--text); }
.ch2-water-timer {
  font-size: 4rem; font-weight: 900; color: #38bdf8;
  font-family: var(--fh); line-height: 1;
}
.ch2-water-sub { font-size: .72rem; color: var(--muted); }

/* ── Rasm ── */
.ch2-photo-target {
  font-size: 2rem; font-weight: 900; color: var(--text);
  padding: 20px 28px;
  background: rgba(255,140,66,.08); border: 2px solid rgba(255,140,66,.2);
  border-radius: 16px;
}
.ch2-photo-txt { font-size: .82rem; color: var(--muted); }
.ch2-photo-hint { font-size: .68rem; color: var(--muted); opacity: .7; }

/* ── AI Coming Soon ── */
.ch2-coming-soon { text-align: center; padding: 10px 0; }
.ch2-cs-icon { font-size: 3rem; margin-bottom: 10px; opacity: .5; }
.ch2-cs-title {
  font-size: 1.1rem; font-weight: 900; color: var(--muted); margin-bottom: 8px;
}
.ch2-cs-txt {
  font-size: .78rem; color: var(--muted); line-height: 1.6; margin-bottom: 20px;
}

/* Skip/cancel tugma */
.ch2-skip-btn {
  margin-top: auto; padding: 12px 24px;
  background: none; border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; color: var(--muted);
  font-size: .75rem; cursor: pointer; transition: all .2s;
}
.ch2-skip-btn:active { background: rgba(255,255,255,.05); }