/* ============================================================
   styles.css — ToDoList ilovasining barcha uslublari
   ============================================================ */

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    /* ===== DESIGN TOKENS: RADIUS SCALE ===== */
    --radius-2xs: 4px; --radius-sm: 8px; --radius-md: 12px;
    --radius-lg: 16px; --radius-xl: 20px; --radius-full: 999px;
    /* ===== DESIGN TOKENS: TYPE SCALE ===== */
    --fs-3xs: 10px; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px;
    --fs-md: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 28px;
    --fs-4xl: 32px; --fs-5xl: 40px; --fs-6xl: 48px; --fs-7xl: 64px; --fs-8xl: 96px;
    /* ===== DESIGN TOKENS: BREAKPOINTS (reference only; @media can't read vars) ===== */
    /* --bp-xs: 420px; --bp-sm: 600px; --bp-md: 900px; --bp-lg: 1200px; --bp-xl: 1440px; */
    --bg: #0E0E12; --surface: #18181F; --surface2: #22222C;
    --border: rgba(255,255,255,0.07); --border-hover: rgba(255,255,255,0.15);
    --accent: #7C5CFC; --accent-glow: rgba(124,92,252,0.25);
    --gold: #F5A623; --gold-dim: rgba(245,166,35,0.15);
    --green: #34D399; --red: #F87171; --info: #60A5FA;
    --text: #F0EEF8; --text-muted: rgba(240,238,248,0.45); --text-dim: rgba(240,238,248,0.5);
    --theme-toggle-bg: rgba(255,255,255,0.08);
    /* 🧍 Steve xarakteri kiyimi — mavzuga (Theme) qarab rang o'zgaradi */
    --char-shirt: #3FBDBD; --char-shirt-dark: #2E8F8F; --char-shirt-darker: #256F6F;
    --char-pants-l: #3B4CCA; --char-pants-r: #33449E;
    --char-pants-l-dark: #2E3A9E; --char-pants-r-dark: #26327E;
  }
  /* LIGHT MODE */
  body.light {
    --bg: #F4F3FF; --surface: #FFFFFF; --surface2: #EDEDF8;
    --border: rgba(0,0,0,0.08); --border-hover: rgba(0,0,0,0.18);
    --accent: #7C5CFC; --accent-glow: rgba(124,92,252,0.2);
    --gold: #D48806; --gold-dim: rgba(212,136,6,0.12);
    --green: #059669; --red: #DC2626; --info: #2563EB;
    --text: #1A1830; --text-muted: rgba(26,24,48,0.5); --text-dim: rgba(26,24,48,0.5);
    --theme-toggle-bg: rgba(0,0,0,0.06);
  }
  body.light::before { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 70%); }
  body.light::after  { background: radial-gradient(circle, color-mix(in srgb, var(--gold) 5%, transparent) 0%, transparent 70%); }
  body.light .modal  { background: var(--surface); }
  body.light .levelup-box { background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--accent) 8%, var(--surface))); }

  /* Light mode fixes — now theme-aware via tokens (was hardcoded hex, broke Ocean/Forest/Cyberpunk) */
  body.light .badge-repeat  { background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
  body.light .badge-weekly  { background:color-mix(in srgb, var(--info) 10%, transparent);   color:var(--info); border-color:color-mix(in srgb, var(--info) 25%, transparent); }
  body.light .badge-coins   { color:var(--gold); background:color-mix(in srgb, var(--gold) 12%, transparent); border-color:color-mix(in srgb, var(--gold) 25%, transparent); }
  body.light .tab           { background:var(--surface); color:var(--text-muted); }
  body.light .tab.active    { background:var(--accent); color:var(--surface); }
  body.light .task-card     { background:var(--surface); }
  body.light .check-btn     { border-color:var(--border-hover); }
  body.light .act-btn       { border-color:var(--border); color:var(--text-muted); }
  body.light .stat          { background:var(--surface); }
  body.light .progress-wrap { background:var(--surface); }
  body.light .progress-track{ background:var(--surface2); }
  body.light .reward-card   { background:var(--surface); }
  body.light .badge-card    { background:var(--surface2); border-color:var(--border); }
  body.light .badge-card.earned { background:color-mix(in srgb, var(--gold) 12%, transparent); border-color:color-mix(in srgb, var(--gold) 40%, transparent); }
  body.light .badge-card.earned .badge-label { color:var(--gold); }
  body.light .badge-group-title { color:var(--text-dim); }
  body.light .badge-progress-track { background:var(--surface2); }
  body.light .add-task-btn  { border-color:var(--border-hover); }
  body.light .add-task-btn:hover { border-color:var(--accent); }
  body.light .level-track   { background:var(--surface2); }
  body.light .section-title { color:var(--text-dim); }
  body.light #done-panel, body.light #streak-milestones,
  body.light #level-panel   { background:var(--surface); }
  body.light .milestone-chip { background:color-mix(in srgb, var(--gold) 12%, transparent); color:var(--gold); border-color:color-mix(in srgb, var(--gold) 30%, transparent); }
  body.light .header-left h1 { background:linear-gradient(135deg, var(--text) 0%, color-mix(in srgb, var(--text) 70%, transparent) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  body.light .coins-pill { background:color-mix(in srgb, var(--gold) 12%, transparent); border-color:color-mix(in srgb, var(--gold) 35%, transparent); }
  body.light .task-name  { color:var(--text); }
  body.light .task-sub   { color:var(--text-dim); }
  body.light .empty      { color:var(--text-dim); }
  body.light .r-btn      { color:var(--text-muted); }
  body.light .r-name     { color:var(--text); }
  body.light #level-badge { background:var(--surface); }
  body.light .cal-day    { color:var(--text); }

  /* MOOD TRACKER */
  .mood-pick-btn { width:44px;height:44px;border-radius:var(--radius-md);border:2px solid var(--border);background:var(--surface);font-size:var(--fs-2xl);cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center; }
  .mood-pick-btn:hover { border-color:var(--accent);transform:scale(1.12); }
  .mood-pick-btn.sel { border-color:var(--accent);background:rgba(124,92,252,0.15);transform:scale(1.1); }
  .mood-cal-day { aspect-ratio:1;border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border:1px solid transparent;transition:all 0.15s;position:relative;min-height:40px; }
  .mood-cal-day:hover { border-color:var(--border-hover);background:var(--surface2); }
  .mood-cal-day.today { border-color:var(--accent);background:rgba(124,92,252,0.08); }
  .mood-cal-day.other-month { opacity:0.3; }
  .mood-cal-day .day-num { font-size:var(--fs-2xs);color:var(--text-muted);line-height:1; }
  .mood-cal-day .day-emoji { font-size:var(--fs-lg);line-height:1; }
  @keyframes slideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }

  /* 🎨 Dizayn mavzulari (Magic Rings, Gradient Blinds, Grid Scan, Prismatic Burst) — designs.css da */

  html { scroll-behavior: smooth; }
  body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; }
  /* 🎨 Standart (oq/kulrang) tizim scrollbar'lari o'rniga mavzuga mos ingichka, qorong'i scrollbar */
  html { scrollbar-width: thin; scrollbar-color: var(--border-hover) var(--bg); }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--surface2); border-radius:var(--radius-full); border: 2px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
  ::-webkit-scrollbar-corner { background: var(--bg); }
  ::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
  body::before { content:''; position:fixed; top:-200px; left:-200px; width:600px; height:600px; background:radial-gradient(circle, rgba(124,92,252,0.12) 0%, transparent 70%); pointer-events:none; z-index:0; }
  body::after { content:''; position:fixed; bottom:-150px; right:-150px; width:500px; height:500px; background:radial-gradient(circle, rgba(245,166,35,0.08) 0%, transparent 70%); pointer-events:none; z-index:0; }
  .wrapper { max-width: 680px; margin: 0 auto; padding: 40px 20px 80px; position: relative; z-index: 1; }

  /* 🖥️ Dizayn: Notebook/Desktop rejimi — Sozlamalar > Dizayn orqali yoqiladi.
     Kompakt (mobil) rejim standart bo'lib qoladi, bu esa katta ekranlar uchun kengroq va yirikroq ko'rinish beradi. */
  html.layout-desktop body { font-size:var(--fs-sm); }
  html.layout-desktop .wrapper { max-width: 1180px; padding: 24px 28px 56px; }
  html.layout-desktop .header-left h1 { font-size:var(--fs-2xl); }
  html.layout-desktop .header-left p { font-size:var(--fs-xs); }
  html.layout-desktop .stats { gap: 10px; margin-bottom: 14px; }
  html.layout-desktop .stat { padding: 10px 12px; border-radius:var(--radius-md); }
  html.layout-desktop .stat-val { font-size:var(--fs-lg); font-weight: 600; }
  html.layout-desktop .progress-wrap { padding: 10px 12px; margin-bottom: 14px; border-radius:var(--radius-md); }
  /* Tabs: teng bo'linib, butun qatorni chiroyli to'ldiradi (chapga qisilib qolmaydi) */
  html.layout-desktop .tabs { display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 14px; }
  html.layout-desktop .tab { flex: 1 1 0; padding: 8px 10px; font-size:var(--fs-xs); font-weight: 500; border-radius:var(--radius-sm); text-align: center; white-space: nowrap; }
  html.layout-desktop .task-list { gap: 7px; }
  html.layout-desktop .task-card { padding: 10px 12px; border-radius:var(--radius-md); }
  html.layout-desktop .task-name { font-size:var(--fs-sm); font-weight: 400; }
  html.layout-desktop .add-task-btn { padding: 9px; font-size:var(--fs-xs); border-radius:var(--radius-sm); }
  html.layout-desktop .search-wrap { display: flex; align-items: center; gap: 8px; }
  html.layout-desktop .search-bar { padding: 8px 10px; font-size:var(--fs-xs); }
  html.layout-desktop .section-title { font-size:var(--fs-3xs); margin: 12px 0 6px; }
  html.layout-desktop .modal { max-width: 460px; }
  html.layout-desktop #pomo-cal-modal-box { max-width: 560px; }
  @media (max-width: 1200px) {
    html.layout-desktop .wrapper { max-width: 920px; padding: 24px 24px 56px; }
  }
  @media (max-width: 900px) {
    html.layout-desktop .wrapper { max-width: 680px; padding: 40px 20px 80px; }
    html.layout-desktop .header-left h1 { font-size:var(--fs-4xl); }
    html.layout-desktop .stat-val { font-size:var(--fs-2xl); }
    html.layout-desktop .tabs { flex-wrap: wrap; }
    html.layout-desktop .tab { flex: 1 1 auto; }
  }
  .layout-opt-btn.sel { border-color:var(--accent); background:rgba(124,92,252,0.14); color:var(--text); }
  body.light .layout-opt-btn { background:#fff; }

  .header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:36px; }
  .header-left h1 { font-family:'Syne',sans-serif; font-size:var(--fs-4xl); font-weight:700; letter-spacing:-0.5px; background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,0.6) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  .header-left p { font-size:var(--fs-base); color:var(--text-muted); margin-top:4px; }
  .coins-pill { display:flex; align-items:center; gap:7px; background:var(--gold-dim); border:1px solid rgba(245,166,35,0.3); border-radius:var(--radius-full); padding:8px 16px; font-size:var(--fs-base); font-weight:500; color:var(--gold); font-family:'Syne',sans-serif; flex-shrink:0; }
  .coins-pill svg { width:18px; height:18px; }
  /* QARZ (DEBT) HOLATI: balans manfiy bo'lganda pill qizil rangga o'tadi va
     sekin "nafas oladi" (pulse) — foydalanuvchi buni darhol sezishi uchun. */
  .coins-pill.coins-pill-debt { background:rgba(248,113,113,0.14); border-color:var(--red); color:var(--red); animation: coins-pill-debt-pulse 1.8s ease-in-out infinite; }
  @keyframes coins-pill-debt-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(248,113,113,0.35); } 50% { box-shadow:0 0 0 6px rgba(248,113,113,0); } }

  .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
  .stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; }
  .stat-label { font-size:var(--fs-xs); color:var(--text-muted); margin-bottom:6px; letter-spacing:0.04em; text-transform:uppercase; }
  .stat-val { font-size:var(--fs-2xl); font-weight:500; font-family:'Syne',sans-serif; }

  .progress-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 18px; margin-bottom:24px; }
  .progress-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .progress-head span { font-size:var(--fs-sm); color:var(--text-muted); }
  .progress-head strong { font-size:var(--fs-sm); color:var(--accent); }
  .progress-track { height:6px; background:var(--surface2); border-radius:var(--radius-full); overflow:hidden; }
  .progress-fill { height:100%; background:linear-gradient(90deg,var(--accent),#B48EFF); border-radius:var(--radius-full); transition:width 0.5s cubic-bezier(0.4,0,0.2,1); width:0%; }

  .tabs { display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap; user-select:none; }
  .tab { padding:9px 20px; border-radius:var(--radius-full); font-size:var(--fs-base); font-weight:500; cursor:pointer; border:1px solid var(--border); color:var(--text-muted); background:var(--surface); transition:all 0.2s; font-family:'DM Sans',sans-serif; }
  .tab:hover { border-color:var(--border-hover); color:var(--text); }
  .tab.active { background:var(--accent); color:#fff; border-color:transparent; box-shadow:0 4px 20px var(--accent-glow); }
  #tabs-bar .tab, html.layout-desktop #ds-sidebar .tab { touch-action:none; }
  .tab.tab-dragging { opacity:0.35; border:2px dashed var(--accent); background:rgba(124,92,252,0.08); }
  /* Profil ichidagi 4 ta ichki tab (Umumiy/Statistika/Yutuqlar/Sozlamalar) —
     asosiy .tab uslubini meros oladi, faqat biroz ixchamroq (ikkinchi
     darajali navigatsiya bo'lgani uchun). */
  .profile-subtab-btn { padding:7px 14px; font-size:var(--fs-xs); white-space:nowrap; }
  .tab.tab-drag-over { border-color:var(--accent); transform:scale(1.06); box-shadow:0 0 16px var(--accent-glow); }

  /* Add task button */
  .add-task-btn { width:100%; padding:13px; background:var(--surface); border:1px dashed rgba(255,255,255,0.15); border-radius:var(--radius-md); color:var(--text-muted); font-size:var(--fs-base); font-family:'DM Sans',sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:20px; transition:all 0.2s; }
  .add-task-btn:hover { border-color:var(--accent); color:var(--text); }

  /* Label/color chips */
  .label-opts { display:flex; gap:7px; flex-wrap:wrap; }
  .label-chip { width:28px; height:28px; border-radius:50%; border:3px solid transparent; cursor:pointer; transition:all 0.15s; flex-shrink:0; }
  .label-chip.sel { border-color:var(--text); transform:scale(1.15); }
  .task-label-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }

  /* Search bar */
  .search-bar { width:100%; padding:11px 14px 11px 38px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text); font-size:var(--fs-base); font-family:'DM Sans',sans-serif; outline:none; transition:border-color 0.2s; margin-bottom:14px; box-sizing:border-box; }
  .search-bar:focus { border-color:var(--accent); }
  .search-bar::placeholder { color:var(--text-dim); }
  .search-wrap { position:relative; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
  .search-wrap .search-bar { margin-bottom:0; flex:1; }
  .search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-dim); font-size:var(--fs-base); pointer-events:none; }
  .all-toggle { display:flex; align-items:center; gap:6px; padding:9px 12px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface); color:var(--text-muted); font-size:var(--fs-sm); font-weight:600; font-family:'DM Sans',sans-serif; cursor:pointer; white-space:nowrap; transition:all 0.2s; flex-shrink:0; }
  .all-toggle.active { background:rgba(124,92,252,0.15); border-color:var(--accent); color:var(--accent); }
  .all-toggle .all-check { width:15px; height:15px; border-radius:var(--radius-2xs); border:2px solid currentColor; display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-3xs); transition:all 0.15s; }
  .future-days-badge { display:inline-block; font-size:var(--fs-2xs); padding:2px 7px; border-radius:var(--radius-full); background:rgba(124,92,252,0.15); color:var(--accent); margin-left:6px; font-weight:600; vertical-align:middle; }
  body.light .search-bar { background:#fff; }

  /* Note field */
  .task-note { font-size:var(--fs-sm); color:var(--text-muted); margin-top:4px; font-style:italic; overflow-wrap:break-word; word-break:break-word; }
  .task-note-collapsed { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .task-note-toggle { font-size:var(--fs-2xs); color:var(--accent); background:none; border:none; cursor:pointer; padding:2px 0; font-family:'DM Sans',sans-serif; margin-top:2px; display:block; }

  /* Modal overlay */
  .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:100; align-items:center; justify-content:center; padding:20px; }
  .modal-overlay.open { display:flex; }
  .modal { background:#1C1C25; border:1px solid var(--border-hover); border-radius:var(--radius-xl); padding:24px; width:100%; max-width:480px; animation:modalIn 0.2s ease; }
  @keyframes modalIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }

  /* 🍅 Pomodoro — endi kichkina karta emas, boshqa sahifalar kabi to'liq ekran oyna */
  #pomo-modal-overlay { padding:0; align-items:stretch; justify-content:stretch; background:var(--bg,#12121A); animation:pomoScreenIn 0.18s ease; }
  #pomo-modal-box { max-width:none; width:100%; min-height:100vh; min-height:100dvh; border-radius:0; border:none; padding:0; margin:0; max-height:none; overflow-y:auto; animation:none; }
  @keyframes pomoScreenIn { from{opacity:0} to{opacity:1} }
  @media (max-width: 600px) {
    #pomo-modal-overlay { padding:0; align-items:stretch; }
    #pomo-modal-box { border-radius:0; }
  }

  /* 🌆 PomoTimer hero — studywithme.io uslubidagi dizayn: fon rasm o'rnida
     rangli gradientlar + shisha (glass) panellar, ammo ilovaning o'z
     amaliylik/vaqt tizimi bilan ishlaydi */
  #pomo-hero {
    position:relative; padding:26px 20px 130px; text-align:center; overflow:hidden;
    background:
      radial-gradient(ellipse 900px 520px at 12% -12%, rgba(124,92,252,0.38), transparent 60%),
      radial-gradient(ellipse 760px 520px at 105% 0%, rgba(245,166,35,0.24), transparent 55%),
      radial-gradient(ellipse 1000px 720px at 50% 125%, rgba(37,99,235,0.30), transparent 60%),
      linear-gradient(160deg, #2a2048 0%, #1c1633 45%, #100d1e 100%);
  }
  #pomo-hero-topbar { display:flex; align-items:flex-start; justify-content:space-between; text-align:left; margin-bottom:38px; position:relative; z-index:1; }
  #pomo-hero-brand { font-family:'Brush Script MT','Segoe Script','Comic Sans MS',cursive; font-size:var(--fs-4xl); font-weight:700; color:#fff; line-height:1; }
  #pomo-hero-brand span { display:block; font-family:'DM Sans',sans-serif; font-size:var(--fs-3xs); font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-top:6px; }
  #pomo-hero-topbtns { display:flex; gap:8px; flex-shrink:0; }
  .pomo-hero-icon-btn { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.08); color:#fff; font-size:var(--fs-base); cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); transition:background 0.2s; }
  .pomo-hero-icon-btn:hover { background:rgba(255,255,255,0.18); }

  #pomo-hero-pills { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:30px; position:relative; z-index:1; max-height:110px; overflow-y:auto; }
  .pomo-hero-pill { padding:9px 16px; border-radius:var(--radius-full); border:1px solid rgba(255,255,255,0.24); background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.8); font-size:var(--fs-sm); font-weight:700; font-family:'DM Sans',sans-serif; cursor:pointer; backdrop-filter:blur(6px); transition:all 0.15s; }
  .pomo-hero-pill:hover { background:rgba(255,255,255,0.14); }
  .pomo-hero-pill.sel { background:#fff; color:#1A1830; border-color:#fff; }
  .pomo-hero-pill.running:not(.sel) { border-color:rgba(122,222,157,0.7); color:#a7f3c5; }

  #pomo-hero-clock { font-family:'Syne',sans-serif; font-size:var(--fs-7xl); font-weight:800; color:#fff; letter-spacing:1px; line-height:1; margin-bottom:10px; text-shadow:0 6px 30px rgba(0,0,0,0.4); position:relative; z-index:1; }
  #pomo-hero-clock.break { color:#FFD580; }
  #pomo-hero-phase { font-size:var(--fs-sm); font-weight:700; color:rgba(255,255,255,0.65); letter-spacing:0.05em; margin-bottom:28px; position:relative; z-index:1; }

  #pomo-hero-controls { display:flex; align-items:center; justify-content:center; gap:14px; position:relative; z-index:1; }
  .pomo-hero-start-btn { padding:15px 36px; border-radius:var(--radius-full); border:none; background:#fff; color:#1A1830; font-size:var(--fs-base); font-weight:800; font-family:'DM Sans',sans-serif; cursor:pointer; letter-spacing:0.02em; box-shadow:0 10px 26px rgba(0,0,0,0.3); transition:opacity 0.2s; }
  .pomo-hero-start-btn:hover { opacity:0.9; }
  .pomo-hero-round-btn { width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,0.26); background:rgba(255,255,255,0.08); color:#fff; font-size:var(--fs-md); cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); transition:background 0.2s; }
  .pomo-hero-round-btn:hover { background:rgba(255,255,255,0.18); }

  #pomo-ambient-bubble { position:absolute; left:16px; bottom:16px; display:flex; align-items:center; gap:6px; background:rgba(18,15,30,0.78); border:1px solid rgba(255,255,255,0.16); border-radius:var(--radius-lg); padding:7px 8px; backdrop-filter:blur(10px); max-width:270px; z-index:2; transition:background 0.2s; }
  #pomo-ambient-bubble:hover { background:rgba(18,15,30,0.94); }
  #pomo-ambient-bubble-mid { display:flex; align-items:center; gap:9px; cursor:pointer; min-width:0; padding:2px 4px; user-select:none; -webkit-user-select:none; }
  #pomo-ambient-bubble-icon { width:34px; height:34px; border-radius:var(--radius-sm); background:linear-gradient(135deg,#7C5CFC,#5B3FD4); display:flex; align-items:center; justify-content:center; font-size:var(--fs-base); flex-shrink:0; }
  #pomo-ambient-bubble-text { min-width:0; }
  #pomo-ambient-bubble-title { font-size:var(--fs-xs); font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; }
  #pomo-ambient-bubble-sub { font-size:var(--fs-3xs); color:rgba(255,255,255,0.5); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; }
  #pomo-ambient-bubble-play { width:24px; height:24px; border-radius:50%; background:#fff; color:#1A1830; border:none; display:flex; align-items:center; justify-content:center; font-size:var(--fs-3xs); flex-shrink:0; cursor:pointer; padding:0; }
  #pomo-ambient-prev, #pomo-ambient-next { width:24px; height:24px; border-radius:50%; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.06); color:#fff; font-size:var(--fs-base); line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; padding:0; transition:background 0.15s; }
  #pomo-ambient-prev:hover, #pomo-ambient-next:hover { background:rgba(255,255,255,0.16); }

  #pomo-fullscreen-btn { position:absolute; right:16px; bottom:16px; width:38px; height:38px; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,0.22); background:rgba(255,255,255,0.08); color:#fff; font-size:var(--fs-base); cursor:pointer; z-index:2; backdrop-filter:blur(8px); transition:background 0.2s; }
  #pomo-fullscreen-btn:hover { background:rgba(255,255,255,0.18); }
  #pomo-fullscreen-btn.active { background:rgba(255,255,255,0.3); border-color:rgba(255,255,255,0.5); }

  /* 🗂️ Pomodoro — pastki navigatsiya paneli: Loyihalar / Sozlama / (+) / Statistika / Musiqa */
  #pomo-modal-box { padding-bottom:88px; box-sizing:border-box; }
  #pomo-bottomnav { position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; align-items:flex-end; justify-content:space-around; gap:2px; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:#15121F; border-top:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(14px); }
  .pomo-nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:none; border:none; color:rgba(255,255,255,0.42); font-size:9px; font-weight:700; font-family:'DM Sans',sans-serif; letter-spacing:0.02em; cursor:pointer; padding:5px 6px 3px; min-width:54px; border-radius:var(--radius-sm); transition:color 0.15s; }
  .pomo-nav-item .pomo-nav-icon { font-size:var(--fs-lg); line-height:1; filter:grayscale(0.4); opacity:0.7; transition:all 0.15s; }
  .pomo-nav-item:hover { color:rgba(255,255,255,0.75); }
  .pomo-nav-item.active { color:#fff; }
  .pomo-nav-item.active .pomo-nav-icon { opacity:1; filter:none; transform:translateY(-1px); }
  .pomo-nav-add-btn { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#7C5CFC,#5B3FD4); border:none; color:#fff; font-size:22px; font-weight:600; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 12px rgba(124,92,252,0.45); transition:transform 0.15s; flex-shrink:0; align-self:center; }
  .pomo-nav-add-btn:hover { transform:scale(1.06); }
  .pomo-nav-add-btn:active { transform:scale(0.95); }
  #pomo-modal-box.pomo-immersive #pomo-bottomnav { display:none; }
  @media (max-width:360px) { .pomo-nav-item { min-width:44px; font-size:8px; } }

  /* 📅 Pomodoro — Statistika kalendari (bottom nav "Statistika" bosilganda) */
  .pomo-cal-nav-btn { width:34px; height:34px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:var(--fs-md); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
  .pomo-cal-nav-btn:hover { border-color:var(--accent); color:var(--accent); }
  .pomo-cal-title { font-family:'Syne',sans-serif; font-size:var(--fs-base); font-weight:700; color:var(--text); }
  .pomo-cal-weekday { text-align:center; font-size:var(--fs-3xs); color:var(--text-dim); font-weight:700; padding-bottom:4px; text-transform:uppercase; }
  .pomo-cal-day { aspect-ratio:1; border-radius:var(--radius-sm); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; border:1px solid transparent; transition:all 0.15s; position:relative; min-height:42px; background:var(--surface2); }
  .pomo-cal-day:hover { border-color:var(--border-hover); }
  .pomo-cal-day.today { border-color:rgba(124,92,252,0.5); }
  .pomo-cal-day.sel { border-color:var(--accent); background:rgba(124,92,252,0.18); }
  .pomo-cal-day.other-month { opacity:0; pointer-events:none; }
  .pomo-cal-day .pomo-cal-daynum { font-size:var(--fs-2xs); color:var(--text); font-weight:700; line-height:1; }
  .pomo-cal-day .pomo-cal-daytime { font-size:8px; color:var(--accent); font-weight:800; line-height:1; }
  .pomo-cal-day.has-data { background:rgba(124,92,252,0.09); }

  /* 📊 Pomodoro statistikasi — kengaytirilgan tahlil: haftalik/oylik
     faollik grafigi, asosiy ko'rsatkichlar (kartalar) va produktivlik
     tahlili (kun/soat bo'yicha taqsimot). Kalendarning pastki qismida
     ko'rsatiladi, mavjud qora/dark uslubga mos ravishda. */
  .pomo-stats-section { margin-top:14px; }
  .pomo-stats-section-title { font-size:var(--fs-xs); font-weight:700; color:var(--text-muted); letter-spacing:0.03em; text-transform:uppercase; margin-bottom:8px; }
  .pomo-stats-subtitle { font-size:9px; font-weight:700; color:var(--text-dim); letter-spacing:0.02em; text-transform:uppercase; margin-bottom:8px; }
  .pomo-stats-chart-box { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 10px 8px; }
  .pomo-stats-chart-empty { text-align:center; color:var(--text-dim); font-size:var(--fs-xs); padding:14px 0; }

  .pomo-stats-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:14px; }
  .pomo-stats-metric-card { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 6px; text-align:center; transition:border-color 0.15s; }
  .pomo-stats-metric-card:hover { border-color:var(--border-hover); }
  .pomo-stats-metric-icon { font-size:var(--fs-lg); margin-bottom:4px; line-height:1; }
  .pomo-stats-metric-value { font-family:'Syne',sans-serif; font-size:var(--fs-md); font-weight:800; color:var(--text); line-height:1.15; word-break:break-word; }
  .pomo-stats-metric-label { font-size:9px; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:0.03em; margin-top:4px; }
  .pomo-stats-metric-sub { font-size:8px; color:var(--gold); font-weight:800; margin-top:3px; }

  /* 🗂️ Kategoriyalar bo'yicha taqsimot — donut/pie chart + legend */
  .pomo-stats-donut-wrap { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  .pomo-stats-donut { width:118px; height:118px; border-radius:50%; flex-shrink:0; position:relative; margin:0 auto; }
  .pomo-stats-donut-hole { position:absolute; inset:20px; border-radius:50%; background:var(--surface2); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
  .pomo-stats-donut-hole-val { font-family:'Syne',sans-serif; font-weight:800; font-size:var(--fs-sm); color:var(--text); line-height:1.1; }
  .pomo-stats-donut-hole-lbl { font-size:7px; color:var(--text-dim); text-transform:uppercase; font-weight:700; margin-top:2px; }
  .pomo-stats-legend { flex:1; min-width:150px; display:flex; flex-direction:column; gap:8px; }
  .pomo-stats-legend-row { display:flex; align-items:center; gap:7px; }
  .pomo-stats-legend-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .pomo-stats-legend-name { flex:1; min-width:0; color:var(--text-muted); font-weight:700; font-size:var(--fs-2xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pomo-stats-legend-pct { color:var(--text); font-weight:800; font-size:var(--fs-2xs); flex-shrink:0; }

  /* 📊 Haftalik/oylik solishtirish kartalari */
  .pomo-stats-compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .pomo-stats-compare-card { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 12px; }
  .pomo-stats-compare-label { font-size:9px; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:6px; }
  .pomo-stats-compare-val { font-family:'Syne',sans-serif; font-size:var(--fs-base); font-weight:800; color:var(--text); }
  .pomo-stats-compare-sub { font-size:8px; color:var(--text-dim); margin-top:2px; }
  .pomo-stats-compare-delta { font-size:var(--fs-2xs); font-weight:800; margin-top:6px; display:inline-block; }
  .pomo-stats-compare-delta.up { color:var(--green); }
  .pomo-stats-compare-delta.down { color:var(--red); }
  .pomo-stats-compare-delta.flat { color:var(--text-dim); }

  /* 🏅 Vazifalar reytingi — rank badge + progress bar */
  .pomo-stats-rank-row { display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid var(--border); }
  .pomo-stats-rank-row:last-child { border-bottom:none; padding-bottom:2px; }
  .pomo-stats-rank-row:first-child { padding-top:2px; }
  .pomo-stats-rank-badge { width:23px; height:23px; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:var(--text-muted); flex-shrink:0; }
  .pomo-stats-rank-badge.top1 { background:linear-gradient(135deg,#F5A623,#ffcf6b); color:#241608; }
  .pomo-stats-rank-badge.top2 { background:linear-gradient(135deg,#C7CDD8,#EDEFF4); color:#242832; }
  .pomo-stats-rank-badge.top3 { background:linear-gradient(135deg,#C97A45,#E3A876); color:#2b1608; }
  .pomo-stats-rank-body { flex:1; min-width:0; }
  .pomo-stats-rank-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:5px; }
  .pomo-stats-rank-name { font-size:var(--fs-2xs); font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pomo-stats-rank-time { font-size:var(--fs-2xs); font-weight:800; color:var(--accent); flex-shrink:0; }
  .pomo-stats-rank-track { height:7px; border-radius:var(--radius-full); background:rgba(255,255,255,0.06); overflow:hidden; }
  .pomo-stats-rank-fill { height:100%; border-radius:var(--radius-full); }
  .pomo-stats-rank-pct { font-size:8px; color:var(--text-dim); margin-top:3px; font-weight:700; }

  .pomo-stats-dist-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .pomo-stats-dist-row:last-child { margin-bottom:0; }
  .pomo-stats-dist-label { width:28px; flex-shrink:0; font-size:var(--fs-2xs); font-weight:700; color:var(--text-muted); }
  .pomo-stats-dist-track { flex:1; height:9px; border-radius:var(--radius-full); background:rgba(255,255,255,0.06); overflow:hidden; }
  .pomo-stats-dist-fill { height:100%; border-radius:var(--radius-full); background:linear-gradient(90deg,var(--accent),#9d84ff); transition:width 0.3s ease; }
  .pomo-stats-dist-row.peak .pomo-stats-dist-fill { background:linear-gradient(90deg,var(--gold),#ffcf6b); }
  .pomo-stats-dist-row.peak .pomo-stats-dist-label { color:var(--gold); }
  .pomo-stats-dist-val { width:54px; flex-shrink:0; text-align:right; font-size:var(--fs-2xs); color:var(--text-dim); font-weight:700; }

  .pomo-stats-hour-peak { text-align:center; font-size:var(--fs-2xs); color:var(--text-muted); margin-top:10px; }
  .pomo-stats-hour-peak b { color:var(--gold); }

  @media (max-width:360px) {
    .pomo-stats-metrics { gap:5px; }
    .pomo-stats-metric-card { padding:9px 3px; }
    .pomo-stats-metric-value { font-size:var(--fs-sm); }
    .pomo-stats-metric-icon { font-size:var(--fs-base); }
  }

  /* 🖥️ Immersive rejim — brauzerning haqiqiy F11 fullscreen'i emas, balki
     ilova ichida pastdagi "amaliyliklar" panelini yashirib, faqat taymer
     hero qismini butun ekranga cho'zib ko'rsatadi. */
  #pomo-modal-box.pomo-immersive #pomo-manage-panel { display:none; }
  #pomo-modal-box.pomo-immersive #pomo-hero { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding-bottom:26px; }
  /* 🔝 TUZATISH: to'liq ekranda #pomo-hero-topbar ("PomoTimer" logotipi +
     statistika/yopish tugmalari) ilgari yuqoridagi justify-content:center
     hisobiga boshqa elementlar bilan BIRGA markazga siljib ketardi — shu
     sabab ekran tepasida foydasiz bo'sh joy qolib ketardi. Endi topbar
     position:absolute bilan flex-markazlashtirish oqimidan CHIQARILADI va
     doim ekranning eng tepasiga mahkamlanadi; qolgan elementlar (pills,
     soat, tugmalar) esa qolgan bo'sh joyda markazlashtirilgan bo'lib qoladi. */
  #pomo-modal-box.pomo-immersive #pomo-hero-topbar {
    position:absolute; top:max(18px, env(safe-area-inset-top)); left:20px; right:20px;
    margin-bottom:0; z-index:3;
  }

  #pomo-manage-panel { position:relative; background:#1C1C25; padding:22px 18px calc(28px + env(safe-area-inset-bottom)); }
  /* "Yopish" tugmasi — ✕ bilan bir xil vazifa; ro'yxat ostida keng
     chiziq bo'lib turmasligi uchun ixcham, markazlashgan tugma. */
  #pomo-manage-panel > .modal-actions { justify-content:center; }
  #pomo-manage-panel > .modal-actions .btn-cancel { flex:0 1 220px; }

  @media (max-width: 600px) {
    #pomo-hero { padding:20px 16px 118px; }
    #pomo-hero-brand { font-size:var(--fs-3xl); }
    #pomo-hero-clock { font-size:var(--fs-6xl); }
    #pomo-hero-controls { gap:10px; }
    .pomo-hero-start-btn { padding:13px 26px; font-size:var(--fs-base); }
    #pomo-ambient-bubble { max-width:210px; padding:6px 6px; }
    #pomo-ambient-bubble-sub { display:none; }
    #pomo-ambient-bubble-title { max-width:70px; }
  }
  /* 🆕 FAQAT HAQIQIY NOTEBOOK/DESKTOP DIZAYNDA (html.layout-desktop):
     to'liq ekran o'rniga, boshqa modallar kabi markazlashtirilgan,
     chegaralangan o'lchamdagi "quti" ko'rinishida ko'rsatiladi.
     MUHIM: bu endi xom window kengligiga (min-width) emas, ilova
     o'zi aniqlagan qurilma dizayniga (html.layout-desktop klassi) bog'liq —
     chunki telefon/planshet userAgent'lari (iPad kiritilgan) har doim
     "mobile" dizayn deb aniqlanadi, hatto ekran keng bo'lsa ham. Shu
     tufayli planshetlarda Pomodoro endi noto'g'ri "katta quti" bo'lib
     chiqmaydi — telefon kabi to'liq ekranda qoladi. Faqat chinakam
     noutbuk/desktop brauzerda (layout-desktop) quti ko'rinishi ishlaydi.
     🔧 KENGAYTIRISH: avvalgi quti juda tor edi (max-width:640px, keyin
     760px) — noutbuklarda "kichkina popup" bo'lib ko'rinardi. Endi
     ekran o'lchamiga moslashib (vw/vh asosida), amalda deyarli to'liq
     ekranga yaqin, ancha katta va qulay o'lchamda ochiladi. */
  html.layout-desktop #pomo-modal-overlay { padding:20px; align-items:center; justify-content:center; background:rgba(0,0,0,0.72); }
  html.layout-desktop #pomo-modal-box {
    max-width:min(1300px, 96vw); width:min(1300px, 96vw); min-height:0;
    height:min(900px, calc(100vh - 40px)); max-height:min(900px, calc(100vh - 40px));
    height:min(900px, calc(100dvh - 40px)); max-height:min(900px, calc(100dvh - 40px));
    border-radius:var(--radius-xl); border:1px solid var(--border-hover);
    box-shadow:0 24px 70px rgba(0,0,0,0.55); overflow-y:auto; padding-bottom:0;
    /* 🔧 TUZATISH: quti balandligi qat'iy (94vh), lekin kontent qisqa
       bo'lsa (masalan 0 ta amaliylik) pastki navigatsiya oddiy oqimda
       ro'yxat ortidan — qutining O'RTASIDA qolib ketardi, ostida esa
       katta bo'sh qorong'i joy qolardi (position:sticky faqat kontent
       qutidan uzun bo'lganda pastga yopishadi). Endi quti flex-ustun:
       hero (o'z balandligi) → amaliyliklar paneli (flex:1, bo'sh joyni
       to'ldiradi) → navigatsiya (doim eng pastda). Kontent uzun bo'lsa
       butun quti scroll qiladi va nav sticky bo'lib pastda turadi. */
    display:flex; flex-direction:column;
  }
  html.layout-desktop #pomo-hero { flex-shrink:0; }
  html.layout-desktop #pomo-bottomnav { flex-shrink:0; }
  /* Pastki navigatsiya endi butun brauzer oynasiga emas, shu "quti"ning
     o'ziga yopishadi (sticky) — chunki #pomo-modal-box endi haqiqiy
     viewport emas, o'zining ichki scrolliga ega chegaralangan konteyner. */
  html.layout-desktop #pomo-bottomnav { position:sticky; left:auto; right:auto; bottom:0; border-radius:0 0 var(--radius-xl) var(--radius-xl); }
  /* Immersive (to'liq ekran taymer) rejimi — cheksiz 100vh o'rniga
     "quti" ichida mos keladigan qat'iy balandlik ishlatiladi, aks holda
     karta o'zining max-height'idan tashqariga chiqib ketardi. */
  html.layout-desktop #pomo-modal-box.pomo-immersive #pomo-hero { min-height:0; flex:1 0 auto; }
  /* Juda kichik noutbuk oynalari (masalan 1024px kenglik) uchun ham
     quti hech qachon ekrandan tashqariga chiqmaydi va yon bo'shliq
     qolmaydi — vw/vh asosidagi o'lcham buni avtomatik ta'minlaydi,
     shuning uchun qo'shimcha pasaytiruvchi @media qoidasi kerak emas. */
  @media (min-width: 1600px) {
    html.layout-desktop #pomo-modal-box { max-width:1400px; }
  }
  /* 📄 Ichki kontent (amaliyliklar ro'yxati, yangi amaliylik formasi va h.k.)
     tor ro'yxat/forma ko'rinishida ishlab chiqilgan — quti kattalashgani
     sabab ular cheksiz cho'zilib, o'qishga noqulay bo'lib qolmasligi
     uchun markazlashtirilgan, o'qish uchun qulay kenglikda saqlanadi.
     Fon va sarlavha (#pomo-hero) esa katta quti kengligiga to'liq
     cho'ziladi — natijada zamonaviy "katta ekran, markazlashgan kontent"
     ko'rinishi hosil bo'ladi. */
  html.layout-desktop #pomo-manage-panel { max-width:760px; margin:0 auto; width:100%; box-sizing:border-box; flex:1 0 auto; }

  /* 📱 PLANSHET (layout-mobile, lekin 600px dan kengroq ekran): to'liq
     ekranda qoladi (notebook'dagi kabi "quti"ga aylanmaydi), lekin
     telefondagi kichraytirilgan shriftlar ham QO'LLANMAYDI — chunki
     planshet ekrani buning uchun yetarlicha katta. Faqat pastdagi
     "kichkina qurilma" (haqiqiy telefon, ≤600px) uchun kichraytirish
     saqlanadi (yuqoridagi @media (max-width:600px) bloki). */
  html.layout-mobile #pomo-modal-overlay { padding:0; align-items:stretch; justify-content:stretch; }
  html.layout-mobile #pomo-modal-box { max-width:none; width:100%; min-height:100vh; min-height:100dvh; border-radius:0; border:none; max-height:none; }
  html.layout-mobile #pomo-bottomnav { position:fixed; left:0; right:0; bottom:0; border-radius:0; }

  /* 📊 Pomodoro statistikasi (Kalendar) — endi kichkina markazlashgan
     popup EMAS, balki katta to'liq ekran/yirik oyna: bu yerga keyinchalik
     ko'proq statistika/grafik elementlari qo'shilishi rejalashtirilgan,
     shuning uchun avvalgi tor 420px "modal" torlik qiladi. Xuddi asosiy
     Pomodoro oynasi kabi — telefon/planshetda (layout-mobile) to'liq
     ekran, faqat haqiqiy noutbuk/desktopda (layout-desktop) katta
     markazlashgan "quti" bo'lib ko'rinadi. */
  #pomo-cal-modal-overlay { padding:0; align-items:stretch; justify-content:stretch; }
  #pomo-cal-modal-box { max-width:none !important; width:100%; min-height:100vh; min-height:100dvh; border-radius:0; max-height:none; overflow-y:auto; padding:24px 20px calc(24px + env(safe-area-inset-bottom)); }
  html.layout-desktop #pomo-cal-modal-overlay { padding:20px; align-items:center; justify-content:center; }
  html.layout-desktop #pomo-cal-modal-box { max-width:min(820px, 94vw) !important; width:100%; min-height:0; max-height:min(94vh, 920px); max-height:min(94dvh, 920px); border-radius:var(--radius-xl); border:1px solid var(--border-hover); box-shadow:0 24px 70px rgba(0,0,0,0.55); }
  /* 🐛 BUG FIX: kalendar kataklari (repeat(7,1fr) + aspect-ratio:1)
     ilgari HECH QANDAY tepa chegarasiga (max-width) ega emasdi — agar
     html.layout-desktop klassi ishlab ketmasa (masalan noto'g'ri
     aniqlangan qurilma turi yoki keng "mobile" rejimdagi konteyner),
     #pomo-cal-modal-box to'liq ekran kengligini egallagani uchun har bir
     kunlik katak proporsional ravishda ulkan kvadratga aylanib qolardi
     — va ekran kichraytirilganda ham (agar konteyner reflow bo'lmasa
     yoki layout rejimi "mobile"da qolib ketsa) shu holat davom etardi.
     Endi to'rning o'ziga mustaqil max-width qo'yildi va markazlashtirildi
     — shunda layout-desktop klassidan qat'iy nazar, kataklar hech qachon
     me'yoridan katta bo'lib ketmaydi. */
  #pomo-cal-weekdays, #pomo-cal-grid { max-width:480px; margin-left:auto; margin-right:auto; }
  .modal h2 { font-family:'Syne',sans-serif; font-size:var(--fs-lg); font-weight:600; margin-bottom:20px; }
  .modal-field { margin-bottom:14px; break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; }

  /* 🆕 "Kitob" ko'rinishi: Yangi vazifa/Tahrirlash oynasidagi maydonlar
     uzunasiga cho'zilib ketmasligi uchun, yetarli joy bo'lganda (planshet/
     desktop) ikkita ustunga (2 sahifa kabi) bo'linib ko'rsatiladi — tor
     (mobil) ekranda esa odatdagidek bitta ustunda, tepadan pastga davom
     etadi. CSS `columns` avtomatik oqim beradi, shu sababli qaysi maydon
     qaysi "sahifada" turishini qo'lda belgilashning hojati yo'q — .modal-field
     dagi break-inside:avoid tufayli bitta maydon ikki ustun orasida bo'linib
     qolmaydi. */
  .modal-fields-columns { column-count:1; }
  .gm-page .modal-field { break-inside:avoid; }
  @media (min-width:620px) {
    .modal-fields-columns { column-count:2; column-gap:32px; }
  }
  .modal-field label { display:block; font-size:var(--fs-xs); color:var(--text-muted); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:6px; }
  .modal-field input[type="text"], .modal-field select, .modal-field input[type="date"], #goal-modal-box .modal-field input[type="number"], #goal-modal-box .modal-field input[type="time"], #modal-box .modal-field input[type="number"] {
    width:100%; padding:11px 14px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm);
    color:var(--text); font-size:var(--fs-base); font-family:'DM Sans',sans-serif; outline:none; transition:border-color 0.2s;
  }
  .modal-field input:focus, .modal-field select:focus { border-color:var(--accent); }
  .modal-field input::placeholder { color:var(--text-dim); }
  #goal-modal-box input[type="time"]::-webkit-calendar-picker-indicator, .modal-field input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(1) opacity(0.4); cursor:pointer; }

  /* Day picker */
  .day-picker { display:flex; gap:6px; flex-wrap:wrap; }
  .day-btn { padding:7px 12px; border-radius:var(--radius-full); border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:var(--fs-sm); font-family:'DM Sans',sans-serif; cursor:pointer; transition:all 0.15s; }
  .day-btn.sel { background:var(--accent); border-color:transparent; color:#fff; }

  /* Repeat options */
  .repeat-opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .repeat-opt { padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:var(--fs-sm); font-family:'DM Sans',sans-serif; cursor:pointer; text-align:left; transition:all 0.15s; display:flex; align-items:center; gap:8px; }
  .repeat-opt.sel { border-color:var(--accent); color:var(--text); background:rgba(124,92,252,0.1); }

  /* Diff selector */
  .diff-opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .diff-opt { flex:1; padding:9px; border-radius:var(--radius-sm); border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:var(--fs-sm); font-family:'DM Sans',sans-serif; cursor:pointer; text-align:center; transition:all 0.15s; }
  .diff-opt.sel { border-color:var(--accent); background:rgba(124,92,252,0.1); color:var(--text); }

  .modal-actions { display:flex; gap:10px; margin-top:20px; }
  .btn-cancel { flex:1; padding:12px; border-radius:var(--radius-md); border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:var(--fs-base); font-family:'DM Sans',sans-serif; cursor:pointer; }
  .btn-save { flex:2; padding:12px; border-radius:var(--radius-md); border:none; background:var(--accent); color:#fff; font-size:var(--fs-base); font-weight:500; font-family:'DM Sans',sans-serif; cursor:pointer; box-shadow:0 4px 16px var(--accent-glow); transition:opacity 0.2s; }
  .btn-save:hover { opacity:0.88; }

  .section-title { font-size:var(--fs-2xs); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim); margin:20px 0 10px; font-weight:500; }
  .task-list { display:flex; flex-direction:column; gap:8px; }
  .task-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; display:flex; flex-direction:column; transition:all 0.2s; animation:slideIn 0.25s ease; cursor:grab; touch-action:pan-y; }
  .task-card.task-pinned { border-color:rgba(245,166,35,0.5); box-shadow:0 0 0 1px rgba(245,166,35,0.15) inset; }
  /* Karta yuqori qatori: checkbox, nom, belgilar va tugmalar bir qatorda,
     TASK NOMI bilan bir tekisda (yuqorida) turadi. Sub-tasklar esa endi shu
     qatordan TASHQARIDA, alohida to'liq kenglikdagi qator sifatida chiqadi —
     shu sababli sub-tasklar ko'p bo'lgan kartalarda o'ng tomondagi
     belgilar/tugmalar ostida katta bo'sh joy qolmaydi. */
  .task-card-top { display:flex; align-items:flex-start; gap:10px; }
  .task-card-top > .check-btn,
  .task-card-top > .task-label-dot,
  .task-card-top > .task-badges,
  .task-card-top > .subtask-add-quick-btn,
  .task-card-top > .task-quick-btn,
  .task-card-top > .task-dots-wrap,
  .task-card-top > .task-menu-btn { margin-top:2px; }
  .task-card-bottom { display:flex; gap:10px; }
  .task-card-bottom-spacer { width:28px; flex-shrink:0; }
  .task-card-bottom .subtask-wrap { flex:1; min-width:0; }
  .task-card.dragging, .task-card:active { cursor:grabbing; }
  @keyframes slideIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
  .task-card:hover { border-color:var(--border-hover); }
  .task-card.done { opacity:0.4; }
  .task-card.done .task-name { text-decoration:line-through; }
  .task-card.skipped { opacity:0.3; border-style:dashed; }
  .task-card.overdue { border-color:rgba(248,113,113,0.45); }
  .task-sub.overdue { color:#F87171; font-weight:600; }

  .check-btn { width:28px; height:28px; border-radius:50%; border:2px solid var(--border-hover); background:transparent; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all 0.2s; color:transparent; }
  .check-btn:hover { border-color:var(--green); }
  .check-btn.checked { background:var(--green); border-color:var(--green); color:#fff; }
  .check-btn svg { width:14px; height:14px; }

  .task-info { flex:1; min-width:0; }
  .task-name { font-size:var(--fs-md); color:var(--text); white-space:normal; overflow-wrap:break-word; word-break:break-word; }
  .task-parent-badge { color:var(--red); font-weight:700; }
  .task-sub { font-size:var(--fs-xs); color:var(--text-dim); margin-top:2px; }

  .task-badges { display:flex; align-items:center; gap:5px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
  .badge { font-size:var(--fs-xs); padding:4px 9px; border-radius:var(--radius-full); font-weight:500; white-space:nowrap; }
  .badge-repeat { background:rgba(124,92,252,0.15); color:#B48EFF; border:1px solid rgba(124,92,252,0.25); }
  .badge-once { background:var(--surface2); color:var(--text-muted); border:1px solid var(--border); }
  .badge-weekly { background:color-mix(in srgb, var(--info) 15%, transparent); color:var(--info); border:1px solid color-mix(in srgb, var(--info) 25%, transparent); }
  .badge-coins { color:var(--gold); background:var(--gold-dim); border:1px solid rgba(245,166,35,0.2); }

  .task-actions { display:flex; gap:4px; flex-shrink:0; }
  .act-btn { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; padding:6px 10px; font-size:var(--fs-sm); color:var(--text-muted); transition:all 0.15s; white-space:nowrap; font-family:'DM Sans',sans-serif; }
  .act-btn:hover { border-color:var(--border-hover); color:var(--text); }
  .act-btn.del:hover { border-color:var(--red); color:var(--red); }

  /* ===== SUB-TASKLAR ===== */
  .subtask-add-quick-btn { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; padding:6px 9px; font-size:var(--fs-base); line-height:1; color:var(--text-muted); transition:all 0.15s; font-family:'DM Sans',sans-serif; flex-shrink:0; }
  .subtask-add-quick-btn:hover { border-color:var(--accent); color:var(--accent); }

  /* Notebook/desktop dizaynda bo'sh joy ko'p qolmasligi uchun: Tahrirlash va
     O'tkazib yuborish tugmalari ⋮ menyu ichidan chiqarilib, ➕ tugma yoniga
     alohida ikonka sifatida qo'yiladi. Faqat html.layout-desktop bo'lganda ko'rinadi. */
  .task-quick-btn { display:none; background:none; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; padding:6px 9px; font-size:var(--fs-base); line-height:1; color:var(--text-muted); transition:all 0.15s; font-family:'DM Sans',sans-serif; flex-shrink:0; }
  html.layout-desktop .task-quick-btn { display:inline-flex; align-items:center; justify-content:center; }
  .task-quick-btn:hover { border-color:var(--accent); color:var(--accent); }
  .task-quick-btn.skipped-active { border-color:var(--accent); color:var(--accent); }
  /* Desktop'da ⋮ menyudan Skip band'i olib tashlanadi (dublikat bo'lmasin,
     chunki Skip alohida tezkor tugma sifatida ko'rinadi). Tahrirlash (qalam)
     esa aksincha — endi DESKTOP'da alohida tugma sifatida ko'RSATILMAYDI,
     faqat ⋮ menyu ichida qoladi (o'ng tarafda ortiqcha joy olmasligi uchun) — 
     shu sabab dd-item-edit endi desktop'da yashirilmaydi. */
  html.layout-desktop .task-dropdown-item.dd-item-skip,
  html.layout-desktop .task-dropdown-item.dd-item-unskip { display:none; }
  html.layout-desktop .task-quick-btn.qb-edit { display:none !important; }
  /* MUHIM TUZATISH: avvalgi "10+ sub-task" UX yaxshilanishida bu yerga
     `max-height` + `overflow-y:auto` qo'shilgan edi. Ammo har bir
     sub-task qatoridagi "⋮" dropdown menyusi (task-dropdown-menu)
     shu konteyner ICHIDA position:absolute bilan pastga ochiladi —
     overflow:auto esa uni kesib, "🗑 O'chirish" kabi pastki tugmalarni
     butunlay ko'rinmas qilib qo'yardi. Shu sabab overflow-clip
     yechimidan voz kechildi (dropdown funksionalligi ustunroq). */
  .subtask-list { margin-top:8px; display:flex; flex-direction:column; gap:5px; }
  .subtask-item { display:flex; align-items:center; gap:8px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 8px; }
  .subtask-label-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .subtask-check { width:18px; height:18px; border-radius:var(--radius-2xs); border:1.5px solid var(--border-hover); background:transparent; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:0; transition:all 0.15s; }
  .subtask-check.checked { background:var(--accent); border-color:var(--accent); }
  .subtask-check svg { width:11px; height:11px; color:#fff; }
  .subtask-name { flex:1; font-size:var(--fs-xs); color:var(--text); word-break:break-word; }
  .subtask-item.done .subtask-name { text-decoration:line-through; color:var(--text-dim); }
  .subtask-del { background:none; border:none; cursor:pointer; color:var(--text-dim); font-size:var(--fs-sm); padding:2px 4px; border-radius:var(--radius-2xs); flex-shrink:0; transition:all 0.15s; }
  .subtask-del:hover { color:var(--red); }
  .subtask-edit, .subtask-extract { background:none; border:none; cursor:pointer; color:var(--text-dim); font-size:var(--fs-xs); padding:2px 4px; border-radius:var(--radius-2xs); flex-shrink:0; transition:all 0.15s; line-height:1; }
  .subtask-edit:hover, .subtask-extract:hover { color:var(--accent); }
  .subtask-item.skipped { opacity:0.45; border-style:dashed; }
  .subtask-dots-wrap .task-dots-btn { padding:4px 7px; font-size:var(--fs-sm); }
  /* UX YAXSHILANISH: progress ko'rsatkichi (X/Y) avval juda xira/kichik
     bo'lib, ko'zga tashlanmasdi — endi biroz kattaroq, qalinroq va
     nozik fon-bilan ajratib ko'rsatiladi. */
  .subtask-progress { font-size:var(--fs-2xs); font-weight:600; color:var(--text-muted); margin-top:8px; padding:3px 8px; background:rgba(255,255,255,0.04); border-radius:20px; display:inline-block; }
  .subtask-done-toggle { background:none; border:none; cursor:pointer; color:var(--accent); font-size:var(--fs-2xs); font-weight:600; padding:4px 0; font-family:'DM Sans',sans-serif; display:block; margin-top:6px; }
  .subtask-done-toggle:hover { text-decoration:underline; }
  .subtask-list-done { margin-top:5px; opacity:0.75; }
  #subtask-modal-overlay .modal-field { margin-bottom:14px; }

  /* Drag-to-subtask hold-to-confirm popup */
  .subtask-drop-confirm { position:fixed; z-index:99999; background:var(--surface, #1c1830); border:1.5px solid var(--accent); border-radius:var(--radius-md); padding:10px 12px; box-shadow:0 10px 30px rgba(0,0,0,0.5); max-width:220px; animation:sdcPop 0.15s ease; }
  @keyframes sdcPop { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }
  .subtask-drop-confirm .sdc-text { font-size:var(--fs-xs); color:var(--text); margin-bottom:8px; font-family:'DM Sans',sans-serif; }
  .subtask-drop-confirm .sdc-btns { display:flex; gap:8px; }
  .subtask-drop-confirm button { flex:1; border-radius:var(--radius-sm); border:none; padding:6px 0; font-size:var(--fs-xs); cursor:pointer; font-family:'DM Sans',sans-serif; font-weight:600; }
  .subtask-drop-confirm .sdc-yes { background:var(--accent); color:#fff; }
  .subtask-drop-confirm .sdc-no { background:var(--surface2, #2a2440); color:var(--text-muted); }
  .task-card.subtask-hover-target { border-color:var(--accent) !important; box-shadow:0 0 0 2px var(--accent-glow, rgba(124,92,252,0.3)); }

  /* ⋮ Task dropdown menu (compact context menu on task card) */
  .task-dots-wrap { position:relative; flex-shrink:0; }
  .task-dots-btn { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; padding:6px 9px; font-size:var(--fs-md); line-height:1; color:var(--text-muted); transition:all 0.15s; font-family:'DM Sans',sans-serif; }
  .task-dots-btn:hover, .task-dots-btn.active { border-color:var(--border-hover); color:var(--text); background:var(--surface2); }
  .task-dropdown-menu {
    position:absolute; top:calc(100% + 6px); right:0; min-width:184px;
    background:var(--surface); border:1px solid var(--border-hover); border-radius:14px;
    box-shadow:0 16px 40px rgba(0,0,0,0.38), 0 2px 8px rgba(0,0,0,0.18); padding:5px; z-index:60;
    opacity:0; transform:translateY(-4px) scale(0.97); transform-origin:top right; pointer-events:none;
    transition:opacity 0.14s ease, transform 0.14s ease;
  }
  html.design-fx .task-dropdown-menu { background:var(--glass-strong, var(--surface)); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
  .task-dropdown-menu.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .task-dropdown-item {
    display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:0 10px; border-radius:9px;
    background:none; border:none; cursor:pointer; font-size:var(--fs-sm); font-weight:500; color:var(--text); text-align:left;
    font-family:'DM Sans',sans-serif; white-space:nowrap; transition:background 0.12s;
  }
  .task-dropdown-item:hover { background:color-mix(in srgb, var(--text) 7%, transparent); }
  .task-dropdown-item:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
  .task-dropdown-item.danger { color:var(--red); margin-top:3px; position:relative; }
  .task-dropdown-item.danger::before { content:''; position:absolute; left:8px; right:8px; top:-3px; border-top:1px solid var(--border); }
  .task-dropdown-item.danger:hover { background:color-mix(in srgb, var(--red) 12%, transparent); }
  .task-dropdown-item .tdi-icon { font-size:var(--fs-base); flex-shrink:0; width:20px; text-align:center; }
  @media (prefers-reduced-motion: reduce) { .task-dropdown-menu { transition:none; } }

  .empty { text-align:center; padding:48px 20px; color:var(--text-dim); font-size:var(--fs-base); line-height:1.7; }
  .empty-icon { font-size:var(--fs-5xl); margin-bottom:12px; opacity:0.6; }

  .rewards-intro { font-size:var(--fs-base); color:var(--text-muted); margin-bottom:20px; line-height:1.6; }
  .rewards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px; margin-bottom:28px; }
  .reward-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 12px; text-align:center; transition:all 0.2s; }
  .reward-card:hover:not(.cant-afford) { border-color:var(--accent); box-shadow:0 0 20px var(--accent-glow); }
  .reward-card.cant-afford { opacity:0.35; }
  /* Manfiy tanga bloki: eng ko'p sotib olingan reward atrofida qizil ogohlantirish */
  .reward-card.reward-negative-blocked { opacity:1; border-color:var(--red); box-shadow:0 0 18px rgba(248,113,113,0.35); }
  .reward-card.reward-negative-blocked:hover { border-color:var(--red); box-shadow:0 0 22px rgba(248,113,113,0.45); }
  .r-icon { font-size:var(--fs-3xl); margin-bottom:8px; }
  .r-name { font-size:var(--fs-sm); color:var(--text); margin-bottom:4px; line-height:1.4; }
  .r-cost { font-size:var(--fs-sm); color:var(--gold); font-weight:500; margin-bottom:10px; }
  .r-btn { width:100%; padding:7px; border-radius:var(--radius-sm); border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:var(--fs-xs); cursor:pointer; transition:all 0.2s; font-family:'DM Sans',sans-serif; }
  .reward-card:not(.cant-afford) .r-btn { background:var(--accent); border-color:transparent; color:#fff; cursor:pointer; }
  .reward-card.cant-afford .r-btn { cursor:not-allowed; }
  .r-over-btn { width:100%; padding:6px; border-radius:var(--radius-sm); border:1px solid rgba(248,113,113,0.3); background:rgba(248,113,113,0.08); color:#F87171; font-size:var(--fs-xs); cursor:pointer; margin-top:6px; transition:all 0.2s; font-family:'DM Sans',sans-serif; }
  .r-over-btn:hover { background:rgba(248,113,113,0.18); border-color:rgba(248,113,113,0.6); }
  .r-del { background:none; border:none; cursor:pointer; color:var(--text-dim); font-size:var(--fs-2xs); margin-top:6px; display:block; width:100%; text-align:center; transition:color 0.15s; }
  .r-del:hover { color:var(--red); }

  .add-reward-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; }
  .reward-stats-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; margin-top:16px; }
  .rstat-filter-btn { padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); font-size:var(--fs-xs); cursor:pointer; font-family:'DM Sans',sans-serif; transition:all 0.2s; white-space:nowrap; }
  .rstat-filter-btn.active { background:var(--accent); border-color:transparent; color:#fff; }
  .rstat-date-select { padding:8px 10px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:var(--fs-xs); font-family:'DM Sans',sans-serif; outline:none; cursor:pointer; }
  .rstat-stat-row, .rstat-day-item { display:flex; align-items:center; justify-content:space-between; background:var(--surface2); border-radius:var(--radius-sm); padding:10px 14px; margin-bottom:8px; font-size:var(--fs-sm); gap:10px; }
  .add-reward-section h3 { font-family:'Syne',sans-serif; font-size:var(--fs-base); font-weight:600; margin-bottom:14px; color:var(--text); }
  .reward-inputs { display:flex; flex-direction:column; gap:10px; }
  .reward-inputs input { width:100%; padding:11px 14px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:var(--fs-base); font-family:'DM Sans',sans-serif; outline:none; transition:border-color 0.2s; }
  .reward-inputs input:focus { border-color:var(--accent); }
  .reward-inputs input::placeholder { color:var(--text-dim); }
  .reward-inputs .inline { display:flex; gap:8px; }
  .reward-inputs .inline input { flex:1; }
  .btn-add-reward { width:100%; padding:12px; background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm); font-size:var(--fs-base); font-weight:500; font-family:'DM Sans',sans-serif; cursor:pointer; transition:opacity 0.2s; box-shadow:0 4px 16px var(--accent-glow); }
  .btn-add-reward:hover { opacity:0.88; }

  /* New reward steps */
  .reward-step { margin-bottom:16px; }
  .rstep-label { font-size:var(--fs-xs); color:var(--text-muted); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:7px; }
  .rstep-num { width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff; font-size:var(--fs-2xs); font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
  .reward-step input { width:100%; padding:11px 14px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:var(--fs-base); font-family:'DM Sans',sans-serif; outline:none; transition:border-color 0.2s; }
  .reward-step input:focus { border-color:var(--accent); }
  .reward-step input::placeholder { color:var(--text-dim); }
  .rcost-chip { padding:7px 13px; border-radius:var(--radius-full); border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); font-size:var(--fs-sm); font-family:'DM Sans',sans-serif; cursor:pointer; transition:all 0.15s; }
  .rcost-chip.sel { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }
  .rcost-chip:hover { border-color:var(--gold); color:var(--gold); }
  .rtype-btn { flex:1; padding:11px 10px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); font-size:var(--fs-base); font-family:'DM Sans',sans-serif; cursor:pointer; transition:all 0.15s; text-align:center; }
  .rtype-btn.sel { border-color:var(--accent); background:rgba(124,92,252,0.12); color:var(--text); }
  .ramount-chip { padding:7px 13px; border-radius:var(--radius-full); border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); font-size:var(--fs-sm); font-family:'DM Sans',sans-serif; cursor:pointer; transition:all 0.15s; }
  .ramount-chip.sel { border-color:var(--accent); color:var(--text); background:rgba(124,92,252,0.1); }
  .ramount-chip:hover { border-color:var(--accent); color:var(--text); }
  .remoji-chip { width:30px; height:30px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface2); font-size:var(--fs-base); cursor:pointer; transition:all 0.15s; display:inline-flex; align-items:center; justify-content:center; }
  .remoji-chip.sel { border-color:var(--accent); background:rgba(124,92,252,0.12); transform:scale(1.08); }
  .remoji-chip:hover { border-color:var(--accent); transform:scale(1.08); }


  /* Badge styles */
  .badge-card { display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 4px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface2); text-align:center; transition:all 0.2s; position:relative; }
  .badge-card.earned { border-color:rgba(245,166,35,0.5); background:rgba(245,166,35,0.08); }
  .badge-card.earned::after { content:'✓'; position:absolute; top:3px; right:5px; font-size:var(--fs-3xs); color:var(--gold); font-weight:700; }
  .badge-card .badge-icon { font-size:var(--fs-lg); line-height:1; }
  .badge-card .badge-label { font-size:var(--fs-3xs); color:var(--text-muted); line-height:1.3; }
  .badge-card.earned .badge-label { color:var(--gold); }
  .badge-card.locked .badge-icon { filter:grayscale(1); opacity:0.35; }
  .badge-card.locked .badge-label { color:var(--text-dim); }
  .badge-group-row { margin-bottom:10px; }
  .badge-group-title { font-size:var(--fs-3xs); color:var(--text-dim); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:5px; }
  .badge-group-cards { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
  .badge-progress-row { display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--text-muted); }
  .badge-progress-track { flex:1; height:5px; background:var(--surface2); border-radius:var(--radius-full); overflow:hidden; }
  .badge-progress-fill { height:100%; border-radius:var(--radius-full); background:linear-gradient(90deg,var(--accent),#B48EFF); transition:width 0.5s; }

  /* Level bar - compact */
  .level-bar-wrap { display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .level-icon { font-size:var(--fs-md); }
  .level-info { display:flex; flex-direction:column; gap:3px; }
  .level-top { display:flex; align-items:center; gap:6px; }
  .level-name { font-size:var(--fs-2xs); color:var(--text-muted); white-space:nowrap; }
  .level-num { font-size:var(--fs-2xs); color:var(--accent); font-weight:600; white-space:nowrap; }
  .level-track { width:80px; height:4px; background:var(--surface2); border-radius:var(--radius-full); overflow:hidden; }
  .level-fill { height:100%; background:linear-gradient(90deg,var(--gold),#FFD580); border-radius:var(--radius-full); transition:width 0.6s cubic-bezier(0.4,0,0.2,1); }
  .level-sub { font-size:var(--fs-3xs); color:var(--text-dim); white-space:nowrap; }

  /* Drag & drop */
  .task-card.dragging { opacity:0.4; border:2px dashed var(--accent); }
  .task-card.drag-over { border-color:var(--accent); background:rgba(124,92,252,0.08); transform:scale(1.01); }
  .toast { position:fixed; bottom:30px; left:50%; transform:translateX(-50%); background:var(--surface2); border:1px solid var(--border-hover); color:var(--text); padding:12px 24px; border-radius:var(--radius-full); font-size:var(--fs-base); z-index:9999; opacity:0; transition:all 0.3s; pointer-events:none; white-space:nowrap; box-shadow:0 8px 32px rgba(0,0,0,0.4); }

  /* 🎶 Ambient Focus Sound widgets */
  @keyframes focusNoteSpin { from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
  #focus-fab:hover { filter:brightness(1.08); }
  #focus-mini-player { animation: focusMiniIn 0.25s ease; }
  @keyframes focusMiniIn { from{ opacity:0; transform:translateY(8px) scale(0.95); } to{ opacity:1; transform:translateY(0) scale(1); } }
  .focus-sound-btn {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    padding:14px 8px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface2);
    color:var(--text); font-size:var(--fs-xs); font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif;
    transition:border-color 0.2s, background 0.2s, transform 0.15s;
  }
  .focus-sound-btn .focus-sound-emoji { font-size:var(--fs-2xl); line-height:1; }
  .focus-sound-btn:hover { border-color:var(--border-hover); transform:translateY(-1px); }
  .focus-sound-btn.active { border-color:var(--accent); background:var(--accent-glow); color:var(--accent); }

  /* ⚠️ Strict Rules & Penalties — ogohlantiruvchi qizil/sariq urg'uli karta */
  .strict-rules-card {
    background: linear-gradient(135deg, rgba(248,113,113,0.12), rgba(245,166,35,0.06));
    border: 1px solid rgba(248,113,113,0.35);
    border-radius:var(--radius-lg);
    overflow: hidden;
    margin-bottom: 12px;
  }
  .strict-rules-header {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px; background: transparent; border: none; cursor: pointer; text-align: left;
    font-family: 'DM Sans', sans-serif;
  }
  .strict-rules-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .strict-rules-icon {
    font-size:var(--fs-2xl); flex-shrink: 0;
    animation: strictPulse 2.4s ease-in-out infinite;
  }
  @keyframes strictPulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(248,113,113,0.45)); }
    50%      { filter: drop-shadow(0 0 11px rgba(248,113,113,0.85)); }
  }
  @keyframes reytingHighlightPulse {
    0%   { box-shadow: 0 0 0 0 rgba(245,166,35,0.9); background: rgba(245,166,35,0.22); }
    50%  { box-shadow: 0 0 0 10px rgba(245,166,35,0); background: rgba(245,166,35,0.1); }
    100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
  }
  .reyting-highlight-pulse { animation: reytingHighlightPulse 1s ease-out 2; }
  .reyting-toggle-btn {
    flex:1; padding:9px 6px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface2);
    color:var(--text-muted); font-size:var(--fs-xs); font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif;
    white-space:nowrap; text-align:center; transition: all 0.15s;
  }
  .reyting-toggle-btn.active { border-color:var(--accent); background:rgba(124,92,252,0.16); color:#fff; }
  .reyting-subject-pill {
    padding:7px 14px; border-radius:var(--radius-full); border:1.5px solid var(--border); background:var(--surface2);
    color:var(--text-muted); font-size:var(--fs-2xs); font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif;
    white-space:nowrap; transition: all 0.15s;
  }
  .reyting-subject-pill.active { border-color:var(--accent); background:var(--accent-glow); color:var(--text); }
  .pe-prep-pill {
    display:inline-flex; align-items:center; gap:5px; padding:7px 12px; border-radius:var(--radius-full);
    border:1.5px solid var(--border); background:var(--surface2); color:var(--text-muted);
    font-size:var(--fs-xs); font-weight:600; cursor:pointer; transition: all 0.15s; font-family:'DM Sans',sans-serif;
  }
  .pe-prep-pill:hover { border-color:var(--accent); }
  .pe-prep-pill.sel {
    border-color:var(--accent); background:var(--accent-glow); color:var(--text);
    box-shadow:0 0 10px var(--accent-glow); transform:scale(1.03);
  }
  .pe-prep-pill .pe-prep-check { display:none; font-size:var(--fs-2xs); color:var(--accent); }
  .pe-prep-pill.sel .pe-prep-check { display:inline; }
  /* 🎨 Rang bo'yicha taqsimot panelidagi qatorlar — bosib turib sudrab
     tartibni o'zgartirish mumkin (SortableJS). Tartib o'zgarsa, asosiy
     vazifalar ro'yxati ham shu rang tartibiga qarab qayta saralanadi. */
  .lb-row { cursor:grab; padding:4px 2px; border-radius:var(--radius-sm); transition: background 0.15s, opacity 0.15s; touch-action:none; }
  .lb-row:active { cursor:grabbing; }
  .lb-row.dragging { opacity:0.5; }
  .lb-row.drag-over { background:var(--surface2); }
  .reyting-card { display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface); margin-bottom:8px; transition: border-color 0.2s; }
  .reyting-card.reyting-me { border-color:var(--accent); background:rgba(124,92,252,0.08); }
  .reyting-card.reyting-gold   { border-color:rgba(245,166,35,0.6); background:linear-gradient(135deg,rgba(245,166,35,0.16),rgba(245,166,35,0.04)); }
  .reyting-card.reyting-silver { border-color:rgba(192,192,205,0.55); background:linear-gradient(135deg,rgba(192,192,205,0.14),rgba(192,192,205,0.03)); }
  .reyting-card.reyting-bronze { border-color:rgba(205,127,50,0.55); background:linear-gradient(135deg,rgba(205,127,50,0.16),rgba(205,127,50,0.03)); }
  .strict-rules-title-group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .strict-rules-title {
    font-family: 'Syne', sans-serif; font-size:var(--fs-base); font-weight: 700; color: #F87171; letter-spacing: 0.01em;
  }

  .strict-rules-sub { font-size:var(--fs-2xs); color: var(--text-muted); }
  .strict-rules-arrow { font-size:var(--fs-base); color: #F87171; transition: transform 0.25s ease; flex-shrink: 0; }
  .strict-rules-card.open .strict-rules-arrow { transform: rotate(180deg); }

  .strict-rules-panel {
    display: flex; flex-direction: column; gap: 12px;
    padding: 0 18px 18px 18px; margin-top: -2px; padding-top: 14px;
    border-top: 1px solid rgba(248,113,113,0.25);
  }
  .strict-rule-block {
    background: rgba(0,0,0,0.16); border: 1px solid rgba(248,113,113,0.18);
    border-radius:var(--radius-md); padding: 12px 14px;
  }
  .strict-rule-block-title {
    display: flex; align-items: center; gap: 8px;
    font-size:var(--fs-sm); font-weight: 700; color: var(--text); margin-bottom: 8px;
  }
  .strict-rule-block-title span:first-child { font-size:var(--fs-md); }
  .strict-rule-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
  .strict-rule-list li { font-size:var(--fs-xs); color: var(--text-muted); line-height: 1.65; }
  .strict-rule-list li b { color: #F87171; font-weight: 700; }

  /* Light mode moslashuvi */
  body.light .strict-rules-card { background: linear-gradient(135deg, rgba(220,38,38,0.08), rgba(212,136,6,0.05)); }
  body.light .strict-rule-block { background: rgba(255,255,255,0.5); }

  /* ⚙️ Settings bo'limi — ixcham, chiroyli guruh kartalari */
  #settings-panel { max-width: 1040px; margin: 0 auto; }
  .settings-eyebrow {
    font-size:var(--fs-2xs); font-weight: 700; color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase;
    margin: 4px 2px 10px; display: flex; align-items: center; gap: 8px;
  }
  .settings-eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--border); }
  .settings-groups-grid {
    display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px;
  }
  @media (min-width: 900px) {
    .settings-groups-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  }
  .settings-sub-card {
    background: var(--surface); border: 1px solid var(--border); border-radius:var(--radius-lg);
    overflow: hidden; margin-bottom: 0; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  }
  .settings-sub-card:hover { border-color: var(--border-hover); }
  .settings-sub-card.open { border-color: rgba(124,92,252,0.35); box-shadow: 0 6px 20px rgba(0,0,0,0.18); }
  .settings-sub-header {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; background: transparent; border: none; cursor: pointer; text-align: left;
    font-family: 'DM Sans', sans-serif;
  }
  .settings-sub-header:hover { background: rgba(124,92,252,0.05); }
  .settings-sub-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
  .settings-sub-icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius:var(--radius-md);
    display: flex; align-items: center; justify-content: center; font-size:var(--fs-lg);
    background: rgba(124,92,252,0.14);
  }
  .settings-sub-icon.icon-blue   { background: rgba(96,165,250,0.16); }
  .settings-sub-icon.icon-pink   { background: rgba(244,114,182,0.16); }
  .settings-sub-icon.icon-orange { background: rgba(245,166,35,0.16); }
  .settings-sub-icon.icon-green  { background: rgba(52,211,153,0.16); }
  .settings-sub-icon.icon-red    { background: rgba(248,113,113,0.16); }
  .settings-sub-title {
    font-size:var(--fs-base); font-weight: 700; color: var(--text); line-height: 1.3; display: block;
  }
  .settings-sub-subtitle {
    font-size:var(--fs-2xs); color: var(--text-muted); margin-top: 2px; line-height: 1.4;
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .settings-sub-arrow-wrap {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--surface2);
    display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.25s;
  }
  .settings-sub-card.open .settings-sub-arrow-wrap { background: var(--accent); transform: rotate(180deg); }
  .settings-sub-arrow { font-size:var(--fs-2xs); color: var(--text-dim); line-height: 1; }
  .settings-sub-card.open .settings-sub-arrow { color: #fff; }
  .settings-sub-body {
    padding: 2px 18px 18px 18px;
  }
  .settings-sub-divider { height: 1px; background: var(--border); opacity: 0.6; margin: 10px 0; }
  .settings-info-card {
    background: var(--surface); border: 1px solid var(--border); border-radius:var(--radius-lg); padding: 16px;
    transition: border-color 0.2s;
  }
  .settings-info-card:hover { border-color: var(--border-hover); }
  .settings-info-card .settings-sub-icon { margin-bottom: 10px; }
  .settings-info-card-title { font-size:var(--fs-sm); font-weight: 700; color: var(--text); margin-bottom: 4px; }
  .settings-info-card-desc { font-size:var(--fs-xs); color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }
  .toast.show { opacity:1; transform:translateX(-50%) translateY(-4px); }
  .confetti-dot { position:fixed; width:8px; height:8px; border-radius:var(--radius-2xs); pointer-events:none; z-index:9998; animation:confettiFall 0.9s ease-in forwards; }
  @keyframes confettiFall { 0%{opacity:1;transform:translateY(0) rotate(0deg)} 100%{opacity:0;transform:translateY(160px) rotate(360deg)} }

  /* Level-up overlay */
  .levelup-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:600; display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn 0.3s ease; }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }
  .levelup-box { background:linear-gradient(135deg,#1C1C25,#22222C); border:2px solid var(--gold); border-radius:var(--radius-xl); padding:36px 28px; width:100%; max-width:360px; text-align:center; position:relative; overflow:hidden; }
  .levelup-box::before { content:''; position:absolute; inset:-50%; background:radial-gradient(circle,rgba(245,166,35,0.12) 0%,transparent 60%); pointer-events:none; }
  .levelup-icon { font-size:var(--fs-7xl); margin-bottom:8px; animation:bounceIn 0.5s cubic-bezier(0.34,1.56,0.64,1); display:block; }
  @keyframes bounceIn { 0%{transform:scale(0)} 60%{transform:scale(1.2)} 100%{transform:scale(1)} }
  .levelup-title { font-family:'Syne',sans-serif; font-size:var(--fs-base); color:var(--gold); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:6px; }
  .levelup-name { font-family:'Syne',sans-serif; font-size:var(--fs-2xl); font-weight:700; color:var(--text); margin-bottom:6px; }
  .levelup-sub { font-size:var(--fs-base); color:var(--text-muted); margin-bottom:24px; }
  .levelup-btn { padding:14px 40px; border-radius:var(--radius-md); border:none; background:var(--gold); color:#111; font-size:var(--fs-base); font-weight:700; cursor:pointer; font-family:'Syne',sans-serif; }

  /* Profile avatar modal */
  .avatar-view-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:500; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .avatar-view-img { width:260px; height:260px; border-radius:50%; object-fit:cover; border:3px solid var(--accent); animation:bounceIn 0.35s cubic-bezier(0.34,1.56,0.64,1); }
  .avatar-view-letter { width:260px; height:260px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:var(--fs-8xl); font-family:'Syne',sans-serif; font-weight:700; color:#fff; border:3px solid rgba(255,255,255,0.2); animation:bounceIn 0.35s cubic-bezier(0.34,1.56,0.64,1); }

  /* Secret PIN */
  .pin-key { width:64px;height:64px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:var(--fs-xl);font-weight:600;font-family:Syne,sans-serif;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center; }
  .pin-key:hover { border-color:var(--accent);background:rgba(124,92,252,0.1); }
  .pin-key:active { transform:scale(0.92); }
  .pin-ok { background:var(--accent);border-color:transparent;color:#fff; }
  .pin-ok:hover { background:#9B7FFF;border-color:transparent; }

  /* ===== MOBIL RESPONSIVE ===== */
  /* Mobile action menu */
  .task-menu-btn {
    display: none;
    background: none;
    border: 1px solid var(--border);
    border-radius:var(--radius-sm);
    padding: 6px 10px;
    font-size:var(--fs-lg);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    transition: all 0.15s;
  }
  .task-menu-btn:hover { border-color: var(--border-hover); color: var(--text); }

  /* ===== ⋯ Vazifa amallari: telefonda bottom sheet, kompyuterda popover ===== */
  .task-action-sheet {
    display: none; position: fixed; inset: 0; z-index: 900;
    --as-bg: var(--surface); --as-item-h: 46px;
    --as-hover: color-mix(in srgb, var(--text) 7%, transparent);
    --as-tile-bg: color-mix(in srgb, var(--text) 5%, transparent);
  }
  html.design-fx .task-action-sheet { --as-bg: var(--glass-strong, var(--surface)); }
  .task-action-sheet.open, .task-action-sheet.closing { display: block; }
  .task-action-sheet.closing { pointer-events: none; }
  .task-action-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); animation: asFade .2s ease both; }
  .task-action-sheet.closing .task-action-sheet-backdrop { animation: asFadeOut .16s ease both; }
  .task-action-sheet-inner {
    position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 560px;
    max-height: min(86vh, 86dvh); overflow-y: auto; overscroll-behavior: contain;
    background: var(--as-bg); color: var(--text);
    border: 1px solid var(--border-hover); border-bottom: none;
    border-radius: 22px 22px 0 0;
    padding: 6px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 -18px 50px rgba(0,0,0,0.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
    animation: asSheetIn .26s cubic-bezier(.2,.9,.25,1) both;
    outline: none; font-family: 'DM Sans', sans-serif;
  }
  .task-action-sheet.closing .task-action-sheet-inner { animation: asSheetOut .16s ease-in both; }
  .task-action-sheet.as-swap .task-action-sheet-inner { animation: none; }
  .task-action-sheet.as-swap .as-body { animation: asSwap .16s ease both; }
  @keyframes asFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes asFadeOut { from { opacity: 1; } to { opacity: 0; } }
  @keyframes asSheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @keyframes asSheetOut { from { transform: translateY(0); } to { transform: translateY(100%); } }
  @keyframes asPopIn { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes asPopInUp { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes asPopOut { from { opacity: 1; } to { opacity: 0; transform: scale(.98); } }
  @keyframes asSwap { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
  .as-grabber { width: 40px; height: 5px; border-radius: 99px; background: var(--border-hover); margin: 4px auto 2px; flex-shrink: 0; }
  .as-head { display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 10px; border-bottom: 1px solid var(--border); }
  .sheet-title {
    font-family: 'Syne', sans-serif; font-size: var(--fs-md); font-weight: 700; color: var(--text); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
  }
  .as-title-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 2px; }
  .sheet-badge-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .as-body { display: flex; flex-direction: column; gap: 10px; }
  .as-note { font-size: var(--fs-sm); color: var(--text-muted); background: var(--as-tile-bg); border: 1px dashed var(--border-hover); border-radius: var(--radius-md); padding: 10px 12px; line-height: 1.45; }
  .as-note.small { font-size: var(--fs-2xs); border: none; background: none; padding: 0 4px; }
  .as-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; }
  .as-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 74px; padding: 10px 4px; border-radius: 16px; cursor: pointer;
    background: var(--as-tile-bg); border: 1px solid var(--border); color: var(--text);
    font: 600 var(--fs-xs)/1.15 'DM Sans', sans-serif; text-align: center;
    transition: background .15s, border-color .15s, transform .12s; -webkit-tap-highlight-color: transparent;
  }
  .as-tile-ic { font-size: 22px; line-height: 1; }
  .as-tile-lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .as-tile:hover { border-color: var(--border-hover); background: var(--as-hover); }
  .as-tile:active { transform: scale(.96); }
  .as-tile.ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
  .as-tile.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .as-tile.dim { opacity: .5; }
  .as-group { display: flex; flex-direction: column; gap: 2px; background: var(--as-tile-bg); border: 1px solid var(--border); border-radius: 16px; padding: 4px; }
  .as-gt { font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); padding: 6px 10px 2px; }
  .as-item {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--as-item-h); padding: 0 12px;
    border: none; border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; text-align: left;
    font: 500 var(--fs-base)/1.25 'DM Sans', sans-serif; transition: background .12s; -webkit-tap-highlight-color: transparent;
  }
  .as-item:hover { background: var(--as-hover); }
  .as-item:disabled { opacity: .45; cursor: default; background: none; }
  .as-ic { width: 24px; flex-shrink: 0; text-align: center; font-size: 17px; line-height: 1; }
  .as-lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .as-sub { color: var(--text-dim); font-size: var(--fs-2xs); font-weight: 500; margin-left: 4px; }
  .as-hint { flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: 6px; }
  .as-chev { flex-shrink: 0; color: var(--text-dim); font-size: 20px; line-height: 1; margin-left: -4px; }
  .as-item.sel { background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .as-item.sel .as-lb::after { content: '  ✓'; color: var(--accent); font-weight: 700; }
  .as-item.danger { color: var(--red); }
  .as-item.danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }
  .as-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 10%, transparent); }
  .as-subhead { display: flex; align-items: center; gap: 8px; }
  .as-back { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--border); background: var(--as-tile-bg); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding-bottom: 2px; }
  .as-back:hover { border-color: var(--border-hover); }
  .as-subtitle { font-weight: 700; font-size: var(--fs-base); color: var(--text); }
  .as-subbody { display: flex; flex-direction: column; gap: 10px; }
  .as-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .as-chip {
    display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border-hover); background: var(--as-tile-bg); color: var(--text); font: 600 var(--fs-sm) 'DM Sans', sans-serif;
    transition: background .12s, border-color .12s;
  }
  .as-chip small { color: var(--text-dim); font-weight: 500; }
  .as-chip:hover { background: var(--as-hover); }
  .as-chip.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
  .as-chip-add { border-style: dashed; color: var(--text-muted); }
  .as-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .as-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px; border-radius: 14px; border: 1px solid var(--border); background: var(--as-tile-bg); color: var(--text-muted); cursor: pointer; font: 600 var(--fs-2xs) 'DM Sans', sans-serif; }
  .as-swatch:hover { background: var(--as-hover); }
  .as-swatch.sel { border-color: var(--accent); color: var(--text); }
  .as-swatch-dot { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-dim); }
  .as-swatch-dot.none { border: 1.5px dashed var(--border-hover); }
  .as-swatch.sel .as-swatch-dot { box-shadow: 0 0 0 3px var(--as-bg), 0 0 0 5px var(--accent); }
  .as-swatch-lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .as-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .as-form:has(> :only-child) { grid-template-columns: 1fr; }
  .as-field { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-2xs); color: var(--text-muted); font-weight: 600; }
  .as-field input { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border-hover); background: var(--surface2); color: var(--text); font: 500 var(--fs-md) 'DM Sans', sans-serif; color-scheme: dark; }
  body.light .as-field input { color-scheme: light; }
  .as-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
  .as-form-btns { display: flex; gap: 8px; }
  .as-btn { flex: 1; min-height: 44px; border-radius: 12px; cursor: pointer; font: 700 var(--fs-sm) 'DM Sans', sans-serif; border: 1px solid var(--border-hover); }
  .as-btn.ghost { background: transparent; color: var(--text-muted); }
  .as-btn.primary { flex: 2; background: var(--accent); border-color: var(--accent); color: #fff; }
  .as-btn:hover { filter: brightness(1.08); }
  .task-action-sheet :is(.as-item, .as-tile, .as-chip, .as-swatch, .as-back, .as-btn, .sheet-cancel-btn):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .sheet-cancel-btn {
    width: 100%; min-height: 48px; padding: 12px; border-radius: 14px; border: 1px solid var(--border);
    background: var(--as-tile-bg); color: var(--text-muted); font: 600 var(--fs-base) 'DM Sans', sans-serif; cursor: pointer; flex-shrink: 0;
  }
  .sheet-cancel-btn:hover { color: var(--text); border-color: var(--border-hover); }
  /* — Popover (kompyuter) — */
  .task-action-sheet.as-pop { --as-item-h: 34px; }
  .task-action-sheet.as-pop .task-action-sheet-backdrop { background: transparent; animation: none; }
  .task-action-sheet.as-pop .task-action-sheet-inner {
    bottom: auto; right: auto; margin: 0; width: 292px; max-width: calc(100vw - 16px);
    border: 1px solid var(--border-hover); border-radius: 16px; padding: 8px; gap: 6px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.42), 0 2px 8px rgba(0,0,0,0.2);
    animation: asPopIn .16s cubic-bezier(.2,.9,.25,1) both;
  }
  .task-action-sheet.as-pop.as-up .task-action-sheet-inner { animation-name: asPopInUp; }
  .task-action-sheet.as-pop.as-swap .task-action-sheet-inner { animation: none; }
  .task-action-sheet.as-pop.closing .task-action-sheet-inner { animation: asPopOut .12s ease-in both; }
  .task-action-sheet.as-pop .as-grabber, .task-action-sheet.as-pop .sheet-cancel-btn { display: none; }
  .task-action-sheet.as-pop .as-head { padding: 4px 6px 8px; gap: 6px; }
  .task-action-sheet.as-pop .sheet-title { font-size: var(--fs-sm); -webkit-line-clamp: 1; }
  .task-action-sheet.as-pop .sheet-badge-row .badge, .task-action-sheet.as-pop .sheet-badge-row .tk-chip { font-size: var(--fs-3xs); }
  .task-action-sheet.as-pop .as-body { gap: 6px; }
  .task-action-sheet.as-pop .as-tiles { grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 4px; }
  .task-action-sheet.as-pop .as-tile { min-height: 54px; gap: 4px; border-radius: 12px; font-size: var(--fs-2xs); padding: 6px 2px; }
  .task-action-sheet.as-pop .as-tile-ic { font-size: 17px; }
  .task-action-sheet.as-pop .as-group { background: none; border: none; border-top: 1px solid var(--border); border-radius: 0; padding: 4px 0 0; }
  .task-action-sheet.as-pop .as-gt { padding: 4px 8px 2px; }
  .task-action-sheet.as-pop .as-item { font-size: var(--fs-sm); border-radius: 9px; padding: 0 8px; gap: 10px; }
  .task-action-sheet.as-pop .as-ic { font-size: 15px; width: 20px; }
  .task-action-sheet.as-pop .as-chip { min-height: 32px; padding: 0 11px; font-size: var(--fs-xs); }
  .task-action-sheet.as-pop .as-back { width: 30px; height: 30px; font-size: 18px; border-radius: 9px; }
  .task-action-sheet.as-pop .as-swatch { padding: 8px 2px; }
  .task-action-sheet.as-pop .as-swatch-dot { width: 22px; height: 22px; }
  .task-action-sheet.as-pop .as-field input, .task-action-sheet.as-pop .as-btn { min-height: 36px; font-size: var(--fs-sm); }
  body.light .task-action-sheet-backdrop { background: rgba(20,18,40,0.32); }
  body.light .task-action-sheet-inner { box-shadow: 0 -12px 40px rgba(20,18,40,0.16); }
  body.light .task-action-sheet.as-pop .task-action-sheet-inner { box-shadow: 0 14px 40px rgba(20,18,40,0.18), 0 2px 6px rgba(20,18,40,0.08); }
  @media (prefers-reduced-motion: reduce) {
    .task-action-sheet *, .task-action-sheet .task-action-sheet-inner { animation: none !important; transition: none !important; }
  }

  /* ===== ☑️ Ommaviy amallar paneli ===== */
  .bulk-select-checkbox { accent-color: var(--accent); width: 20px; height: 20px; flex-shrink: 0; margin-right: 2px; cursor: pointer; }
  .task-card.bulk-mode { cursor: pointer; }
  .task-card.bulk-sel { border-color: color-mix(in srgb, var(--accent) 70%, transparent) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 6px 20px -10px var(--accent-glow); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
  .bulk-bar {
    position: sticky; top: 8px; z-index: 12; margin-bottom: 10px; padding: 8px;
    display: flex; flex-direction: column; gap: 8px;
    background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 16px;
    box-shadow: 0 10px 30px -14px rgba(0,0,0,0.6), 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent);
    animation: bulkIn .18s ease both;
  }
  html.design-fx .bulk-bar { background: var(--glass-strong, var(--surface)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  @keyframes bulkIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .bulk-bar-top { display: flex; align-items: center; gap: 8px; padding: 0 4px; min-height: 30px; }
  .bulk-count { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bulk-link { background: none; border: none; color: var(--accent); font: 600 var(--fs-xs) 'DM Sans', sans-serif; cursor: pointer; padding: 6px 8px; border-radius: 8px; white-space: nowrap; }
  .bulk-link:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .bulk-link:disabled { opacity: .4; cursor: default; }
  .bulk-link.bulk-cancel { color: var(--text-muted); }
  .bulk-bar-actions { display: flex; gap: 6px; }
  .bulk-act {
    flex: 1 1 0; min-width: 0; min-height: 44px; padding: 4px 6px; border-radius: 12px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text);
    font: 600 var(--fs-xs) 'DM Sans', sans-serif; transition: background .12s, border-color .12s, opacity .12s; -webkit-tap-highlight-color: transparent;
  }
  .bulk-act .ba-ic { font-size: 15px; line-height: 1; flex-shrink: 0; }
  .bulk-act .ba-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bulk-act:hover:not(:disabled) { border-color: var(--border-hover); background: color-mix(in srgb, var(--text) 8%, transparent); }
  .bulk-act:disabled { opacity: .4; cursor: default; }
  .bulk-act.ok:not(:disabled) { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
  .bulk-act.del:not(:disabled) { color: var(--red); }
  .bulk-act.del:hover:not(:disabled) { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
  .bulk-act.more { flex: 0 0 auto; padding: 4px 12px; }
  .bulk-act-wide { display: none; }
  @media (min-width: 640px) { .bulk-act-wide { display: inline-flex; } }
  @media (max-width: 520px) {
    .bulk-act { flex-direction: column; gap: 3px; font-size: var(--fs-3xs); min-height: 52px; padding: 6px 2px; }
    .bulk-act .ba-ic { font-size: 17px; }
    .bulk-act.more { flex: 1 1 0; padding: 6px 2px; }
  }
  @media (prefers-reduced-motion: reduce) { .bulk-bar { animation: none; } }

  @media (max-width: 420px) {
    .wrapper { padding: 20px 14px 100px; }
    .header { margin-bottom: 20px; gap: 6px; flex-wrap: nowrap; }
    .header-left h1 { font-size:var(--fs-xl); }
    .coins-pill { padding: 6px 10px; font-size:var(--fs-xs); }
    /* Telefonda header compactroq */
    #header-spin-btn { padding: 0 8px !important; font-size:var(--fs-xs) !important; }
    #header-spin-btn #header-spin-label { display: none; }
    #level-badge { padding: 4px 7px !important; }
    #level-badge span { font-size:var(--fs-2xs) !important; }
    .coins-text { display: none; }
    /* Ismi va avatar joyi */
    .header-left > div { gap: 6px !important; }
    .stats { gap: 7px; margin-bottom: 14px; }
    .stat { padding: 10px 10px; border-radius:var(--radius-md); }
    .stat-label { font-size:var(--fs-3xs); }
    .stat-val { font-size:var(--fs-xl); }
    .progress-wrap { padding: 12px 14px; margin-bottom: 16px; }
    .tabs { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
    .tabs::-webkit-scrollbar { display: none; }
    #profile-subtabs::-webkit-scrollbar { display: none; }
    .tab { padding: 8px 14px; font-size:var(--fs-xs); white-space: nowrap; flex-shrink: 0; }
    /* Compact mobile task card */
    .task-card { padding: 11px 12px; border-radius:var(--radius-md); }
    .task-card-top { gap: 8px; flex-wrap: nowrap; align-items: flex-start; }
    .task-card-bottom { gap: 8px; }
    .task-card-bottom-spacer { width: 26px; }
    .task-info { min-width: 0; flex: 1; }
    .task-name { font-size:var(--fs-base); }
    .check-btn { width: 26px; height: 26px; flex-shrink: 0; }
    .badge { font-size:var(--fs-3xs); padding: 2px 6px; }
    /* On mobile: hide badges & actions, show them in task-info row instead */
    .task-badges { display: none; }
    .task-actions { display: none; }
    .task-dots-wrap { display: none; }
    .task-menu-btn { display: flex; align-items: center; justify-content: center; }
    /* Show compact badges below task name */
    .task-info-badges {
      display: flex !important;
      gap: 5px;
      flex-wrap: wrap;
      margin-top: 4px;
    }
    .act-btn { padding: 6px 8px; font-size:var(--fs-xs); min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center; }
    .modal-overlay { padding: 10px; align-items: flex-end; }
    .modal { border-radius:var(--radius-xl) 20px 14px 14px; padding: 20px 16px; max-height: 88vh; overflow-y: auto; }
    .modal h2 { font-size:var(--fs-md); margin-bottom: 14px; }
    .modal-field input[type="text"],
    .modal-field select,
    .modal-field input[type="date"],
    .modal-field input[type="number"] { padding: 12px 12px; font-size:var(--fs-md); }
    .btn-cancel, .btn-save { padding: 14px; font-size:var(--fs-base); }
    .repeat-opts { grid-template-columns: 1fr 1fr; gap: 6px; }
    .repeat-opt { padding: 10px 8px; font-size:var(--fs-xs); }
    .diff-opt { padding: 10px 6px; font-size:var(--fs-xs); }
    .rewards-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .reward-card { padding: 12px 10px; }
    .r-icon { font-size:var(--fs-2xl); }
    .r-name { font-size:var(--fs-xs); }
    #spin-viewport { max-width: 300px !important; }
    .toast { bottom: 80px; font-size:var(--fs-sm); padding: 10px 18px; max-width: 90vw; white-space: normal; text-align: center; }
    .pin-key { width: 56px; height: 56px; font-size:var(--fs-lg); }
    .section-title { font-size:var(--fs-3xs); margin: 14px 0 8px; }
    .add-task-btn { padding: 12px; font-size:var(--fs-sm); }
    .empty { padding: 32px 16px; font-size:var(--fs-base); }
  }
  @media (max-width: 420px) {
    .wrapper { padding: 16px 10px 100px; }
    .tab { padding: 7px 11px; font-size:var(--fs-2xs); }
    .task-card { padding: 9px 8px; }
    .task-card-top { gap: 6px; }
    .task-card-bottom { gap: 6px; }
    .task-name { font-size:var(--fs-sm); }
    .stat-val { font-size:var(--fs-lg); }
  }

  /* ============================================================
     🍅 POMODORO / ISH VAQTINI HISOBLASH — floating timer modul
     ============================================================ */
  #tab-pomo.running { border-color:var(--accent); background:var(--accent-glow); color:var(--accent); }

  /* ============================================================
     🍅 POMODORO — TASK-KARTALAR (2026 qayta dizayn)
     Faqat pastki task-kartalar blokining vizual qatlami — yuqoridagi
     hero (#pomo-hero) qismiga bu klasslar hech qanday ta'sir qilmaydi.
     ============================================================ */
  /* 🆕 Ichki nested scrollbox (max-height+overflow-y) olib tashlandi —
     avval bu yerda alohida kichik scroll paydo bo'lardi (butun sahifa
     allaqachon #pomo-modal-box orqali o'z-o'zidan scroll qiladi, shu
     sabab ikkinchi ichki scroll ortiqcha va noqulay edi). Endi kartalar
     shunchaki sahifaning tabiiy oqimida ketma-ket joylashadi — har biri
     alohida ajratilgan "quti" (.pomo-act-card) ko'rinishida. */
  #pomo-activity-list { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; padding:2px; }
  .pomo-act-card {
    position:relative; overflow:hidden;
    /* 🆕 TUZATILDI: ko'p amaliylik qo'shilganda kartalar "siqilib" (nomi,
       progress-bar, vaqt qatori butunlay ko'rinmay, avatar esa yarmigacha
       kesilib) qolardi. Sababi — klassik flexbox xatosi: `overflow:hidden`
       bo'lgan flex-elementlarda `min-height:auto` brauzerda "0" deb
       hisoblanadi, shu sabab #pomo-activity-list (flex-column,
       max-height+overflow-y:auto) umumiy balandlik max-height'dan oshib
       ketganda, scroll qilish o'rniga AVVAL kartalarni o'z tarkib
       balandligidan PASTGA siqib, ichidagi kontentni kesib tashlardi.
       `flex-shrink:0` kartalarga har doim o'z tabiiy balandligini
       saqlashni majburlaydi — endi konteyner shunchaki scroll qiladi. */
    flex-shrink:0;
    background:linear-gradient(155deg, var(--surface2), color-mix(in srgb, var(--surface2) 82%, var(--accent-card, var(--accent)) 18%));
    border:1px solid var(--border); border-radius:var(--radius-lg); padding:13px 16px 15px;
    cursor:pointer; transition:transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    box-shadow:0 1px 2px rgba(0,0,0,0.12);
  }
  .pomo-act-card:hover { border-color:var(--border-hover); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,0.18); }
  /* Faol/tanlangan (board'ga belgilangan yoki hozir bog'langan) karta —
     sariq/oltin rang bilan ajratilgan chegara. */
  .pomo-act-card.active { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 8px 22px rgba(245,166,35,0.22); }
  @keyframes pomoLivePulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(0.8); } }

  /* O'ng yuqori burchak — 3 ta kichik icon-tugma: pin/board, edit, delete */
  .pomo-act-icons { position:absolute; top:12px; right:12px; display:flex; align-items:center; gap:2px; z-index:2; }
  .pomo-act-icon-btn {
    background:rgba(120,120,140,0.10); border:none; color:var(--text-dim);
    width:26px; height:26px; border-radius:8px; font-size:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:background 0.15s, color 0.15s, transform 0.15s;
  }
  body.light .pomo-act-icon-btn { background:rgba(0,0,0,0.05); }
  .pomo-act-icon-btn:hover { transform:scale(1.08); }
  .pomo-act-icon-btn:active { transform:scale(0.94); }
  .pomo-act-icon-btn.pin.pinned { color:var(--gold); background:color-mix(in srgb, var(--gold) 18%, transparent); }
  .pomo-act-icon-btn.pin:hover { color:var(--gold); background:color-mix(in srgb, var(--gold) 16%, transparent); }
  .pomo-act-icon-btn.edit:hover { color:var(--accent-card, var(--accent)); background:var(--accent-glow); }
  .pomo-act-icon-btn.del:hover { color:var(--red); background:rgba(248,113,113,0.14); }

  /* Chapda: rangli doira ichida ikonka + holat labeli + nom */
  .pomo-act-main { display:flex; align-items:flex-start; gap:12px; padding-right:78px; }
  .pomo-act-avatar {
    width:42px; height:42px; border-radius:50%; flex-shrink:0; font-size:19px;
    display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--accent-card, var(--accent)) 22%, transparent);
    box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent-card, var(--accent)) 45%, transparent);
  }
  .pomo-act-info { min-width:0; flex:1; }
  /* Chapdagi kichik "To'xtagan"/"Ishlamoqda" labeli — endi to'liq kenglikdagi
     badge emas, nomning tepasida ixcham qator sifatida. */
  .pomo-act-status-inline { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-3xs); font-weight:800; letter-spacing:0.04em; margin-bottom:3px; font-family:'DM Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'; }
  .pomo-act-status-inline::before { content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
  .pomo-act-status-inline.running { color:var(--green); }
  .pomo-act-status-inline.running::before { background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); animation:pomoLivePulse 1.4s ease-in-out infinite; }
  .pomo-act-status-inline.paused { color:var(--text-dim); }
  .pomo-act-status-inline.paused::before { background:var(--text-dim); }
  .pomo-act-name { font-size:var(--fs-base); font-weight:700; color:var(--text); font-family:'Syne',sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pomo-act-limit { font-size:var(--fs-2xs); color:var(--text-muted); margin-top:4px; letter-spacing:0.02em; }

  /* Pastdagi ingichka progress-bar — faoliyat rangiga mos */
  .pomo-act-progress-track { height:6px; border-radius:var(--radius-full); background:rgba(255,255,255,0.06); margin:10px 0 0; overflow:hidden; box-shadow:inset 0 0 0 1px transparent; transition:box-shadow 0.15s; }
  body.light .pomo-act-progress-track { background:rgba(0,0,0,0.06); }
  .pomo-act-progress-track.empty { box-shadow:inset 0 0 0 1px var(--border-hover); background:transparent; padding:0; height:6px; text-align:initial; }
  .pomo-act-progress-fill { height:100%; border-radius:var(--radius-full); background:linear-gradient(90deg, var(--accent-card, var(--accent)), color-mix(in srgb, var(--accent-card, var(--accent)) 60%, var(--green))); transition:width 0.4s ease; }
  .pomo-act-progress-fill.over { background:linear-gradient(90deg, var(--red), color-mix(in srgb, var(--red) 70%, #7a0d0d)); }
  .pomo-act-overflow-text { font-size:var(--fs-xs); font-weight:800; color:var(--red); margin-top:7px; letter-spacing:0.01em; display:flex; align-items:center; justify-content:flex-end; gap:5px; }

  /* Progress-bar ostida, o'ng tomonda: "hozirgi vaqt / maqsad vaqti" */
  .pomo-act-elapsed-row { display:flex; align-items:baseline; justify-content:flex-end; gap:6px; margin-top:6px; flex-wrap:wrap; }
  .pomo-act-elapsed { font-family:'Syne',sans-serif; font-size:var(--fs-md); font-weight:800; color:var(--accent-card, var(--accent)); letter-spacing:0.02em; }
  .pomo-act-elapsed-row.over .pomo-act-elapsed { color:var(--red); }
  .pomo-act-elapsed-cmp { font-family:'Syne',sans-serif; font-size:var(--fs-xs); font-weight:700; color:var(--text-muted); letter-spacing:0.02em; }

  /* Ishlab turgan taymer uchun Stop tugmasi — oddiy (overlay emas) qator */
  .pomo-act-controls { display:flex; gap:8px; margin-top:14px; }
  .pomo-ctrl-btn { flex:1; padding:11px; border-radius:var(--radius-md); border:none; font-size:var(--fs-sm); font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; transition:filter 0.2s, transform 0.15s; display:flex; align-items:center; justify-content:center; gap:6px; box-shadow:0 3px 10px rgba(0,0,0,0.18); }
  .pomo-ctrl-btn:hover { filter:brightness(1.08); }
  .pomo-ctrl-btn:active { transform:scale(0.97); }
  .pomo-ctrl-start { background:linear-gradient(135deg, var(--accent-card, var(--accent)), color-mix(in srgb, var(--accent-card, var(--accent)) 70%, #fff)); color:#fff; }
  .pomo-ctrl-stop { background:linear-gradient(135deg, var(--red), color-mix(in srgb, var(--red) 70%, #fff)); color:#fff; }

  /* 🟢 To'xtatilgan, ammo tanlangan/faol karta pastida — to'liq kenglikdagi
     yashil gradient overlay-panel + o'rtasida "Davom ettirish" tugmasi.
     Kartaga "yopishtirilgan" ko'rinish uchun manfiy margin bilan karta
     paddingidan tashqariga (chekka-chekkagacha) chiqariladi. */
  .pomo-act-resume-bar {
    margin:14px -18px -18px; padding:13px 18px; border-radius:0 0 var(--radius-lg) var(--radius-lg);
    background:linear-gradient(90deg, color-mix(in srgb, var(--green) 88%, transparent), color-mix(in srgb, var(--green) 55%, var(--accent)));
    color:#fff; display:flex; align-items:center; justify-content:center; gap:8px;
    font-weight:800; font-size:var(--fs-sm); font-family:'DM Sans',sans-serif; cursor:pointer;
    box-shadow:0 -3px 12px rgba(0,0,0,0.16); transition:filter 0.15s, transform 0.15s;
  }
  .pomo-act-resume-bar:hover { filter:brightness(1.07); }
  .pomo-act-resume-bar:active { transform:scale(0.99); }
  .pomo-act-resume-icon { font-size:var(--fs-sm); }

  #pomo-new-form { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; margin-bottom:14px; display:none; }
  #pomo-new-form.open { display:block; }
  #pomo-new-form input, #pomo-new-form select { width:100%; padding:11px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:var(--fs-base); font-family:'DM Sans',sans-serif; margin-bottom:10px; outline:none; }
  #pomo-new-form input:focus, #pomo-new-form select:focus { border-color:var(--accent); }
  .pomo-limit-hm { display:flex; gap:10px; margin-bottom:10px; }
  .pomo-limit-hm-field { flex:1; }
  .pomo-limit-hm-field label { display:block; font-size:var(--fs-2xs); color:var(--text-muted); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:6px; }
  .pomo-limit-hm-field input { width:100%; padding:11px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:var(--fs-md); font-family:'Syne',sans-serif; font-weight:700; text-align:center; outline:none; margin-bottom:0; }
  .pomo-limit-hm-field input:focus { border-color:var(--accent); }
  /* Icon/rang tanlash — har bir amaliylikni ro'yxatda oson farqlash uchun */
  .pomo-picker-label { font-size:var(--fs-2xs); color:var(--text-muted); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:6px; }
  .pomo-emoji-picker { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
  .pomo-emoji-opt { width:36px; height:36px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); font-size:var(--fs-md); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; padding:0; }
  .pomo-emoji-opt:hover { border-color:var(--accent); transform:scale(1.08); }
  .pomo-emoji-opt.sel { border-color:var(--accent); background:var(--accent-glow); transform:scale(1.06); }
  .pomo-color-picker { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; align-items:center; }
  .pomo-color-opt { width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15); transition:transform 0.15s,border-color 0.15s; }
  .pomo-color-opt:hover { transform:scale(1.15); }
  .pomo-color-opt.sel { border-color:var(--text); transform:scale(1.15); }
  .pomo-color-opt.auto { width:auto; height:26px; border-radius:var(--radius-full); background:var(--surface); border:1px solid var(--border); color:var(--text-muted); font-size:var(--fs-3xs); font-weight:700; padding:0 10px; box-shadow:none; }
  .pomo-color-opt.auto.sel { border-color:var(--accent); color:var(--accent); background:var(--accent-glow); }

  /* Floating draggable mini widget */
  #pomo-float { position:fixed; top:120px; right:16px; z-index:500; background:#1C1C25; border:1px solid var(--border-hover); border-radius:var(--radius-lg); padding:10px 12px; box-shadow:0 8px 28px rgba(0,0,0,0.4); display:none; align-items:center; gap:10px; cursor:grab; user-select:none; touch-action:none; min-width:168px; }
  body.light #pomo-float { background:#FFFFFF; }
  #pomo-float.show { display:flex; }
  /* 🎨 PiP (suzuvchi, boshqa saytlar ustida ham ko'rinadigan) oynacha —
     yangi, ancha "jonli" dizayn: ish fazasida accent, tanaffus fazasida
     gold rangli yumshoq nur (glow) bilan, markazlashgan joylashuv. */
  #pomo-float.pip-mode { position:static !important; top:auto !important; left:auto !important; right:auto !important; width:100% !important; height:100% !important; min-width:0; max-width:none; border-radius:14px; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06); box-sizing:border-box; margin:0; cursor:default; padding:10px 12px; justify-content:center; background:radial-gradient(120% 160% at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 60%), #14141C; }
  #pomo-float.pip-mode.break-mode { background:radial-gradient(120% 160% at 50% -10%, color-mix(in srgb, var(--gold) 18%, transparent) 0%, transparent 60%), #14141C; }
  /* PiP rejimida faqat vaqt, stop/resume va yopish tugmasi ko'rinadi — pip va tanaffusni o'tkazib yuborish tugmalari yashiriladi */
  #pomo-float.pip-mode #pomo-float-pip,
  #pomo-float.pip-mode #pomo-float-skip { display:none !important; }
  /* 🆕 Endi PiP oynachada faoliyat nomi ham (kichik, markazlashgan
     "qopqoq" sifatida) ko'rinadi — ilgari umuman yashiringan edi, shu
     sabab qaysi vazifa ustida ishlanayotgani noaniq bo'lardi. */
  #pomo-float.pip-mode #pomo-float-label { display:block !important; text-align:center; font-size:10px; margin-bottom:3px; opacity:0.75; }
  #pomo-float.pip-mode #pomo-float-info { flex:none; cursor:default; display:flex; flex-direction:column; align-items:center; }
  #pomo-float.pip-mode #pomo-float-time { font-size:20px; letter-spacing:0.03em; }
  #pomo-float.pip-mode.running #pomo-float-time { animation:pomoPipPulse 2s ease-in-out infinite; }
  @keyframes pomoPipPulse { 0%,100%{opacity:1;} 50%{opacity:0.72;} }
  #pomo-float.pip-mode .pomo-float-btn { width:24px; height:24px; font-size:12px; }
  #pomo-float.pip-mode #pomo-float-row { gap:10px; }
  /* 🆕 PiP rejimida asosiy Stop/Resume tugmasi endi kattaroq, to'liq
     rangli (ish fazasida accent, tanaffusda gold) doira — atrofida
     yumshoq nur (glow) bilan, bosish qulay va ko'zga yoqimli bo'lishi
     uchun. */
  #pomo-float.pip-mode #pomo-float-toggle { width:46px; height:46px; font-size:20px; background:var(--accent); color:#fff; box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 55%, transparent); }
  #pomo-float.pip-mode.break-mode #pomo-float-toggle { background:var(--gold); box-shadow:0 6px 18px color-mix(in srgb, var(--gold) 55%, transparent); }
  #pomo-float.pip-mode .pomo-float-btn.close { width:26px; height:26px; font-size:12px; background:rgba(248,113,113,0.14); }
  /* 🎵 PiP oynasida, agar fon musiqasi yoqilgan bo'lsa, uni ham shu yerdan
     stop/resume qilish uchun qo'shimcha qator — vaqt pastida ko'rinadi va
     faqat musiqa faol (yuklangan) bo'lsa chiqadi. */
  #pomo-float-music-row { display:none; align-items:center; gap:8px; width:100%; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
  #pomo-float.pip-mode #pomo-float-music-row.show { display:flex; }
  #pomo-float-music-icon { font-size:14px; flex-shrink:0; line-height:1; }
  #pomo-float-music-label { flex:1; min-width:0; font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
  #pomo-float-music-row .pomo-float-btn { width:26px; height:26px; font-size:12px; }
  #pomo-float.dragging { cursor:grabbing; transition:none; box-shadow:0 12px 36px rgba(0,0,0,0.5); }
  #pomo-float-info { flex:1; min-width:0; cursor:pointer; }
  #pomo-float-label { font-size:var(--fs-3xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
  #pomo-float-time { font-family:'Syne',sans-serif; font-size:var(--fs-md); font-weight:700; color:var(--accent); letter-spacing:0.02em; }
  #pomo-float.break-mode #pomo-float-time { color:var(--gold); }
  #pomo-float-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
  .pomo-float-btn { width:30px; height:30px; border-radius:50%; border:none; background:var(--surface2); color:var(--text); font-size:var(--fs-sm); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform 0.15s,opacity 0.2s,box-shadow 0.15s; }
  .pomo-float-btn:hover { opacity:0.85; transform:scale(1.06); }
  .pomo-float-btn:active { transform:scale(0.94); }
  .pomo-float-btn.close { background:rgba(248,113,113,0.15); color:var(--red); font-size:var(--fs-xs); }
  #pomo-float-skip { display:none; margin-top:8px; width:100%; padding:7px; border-radius:var(--radius-sm); border:none; background:var(--gold-dim); color:var(--gold); font-size:var(--fs-2xs); font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; }
  #pomo-float.break-mode #pomo-float-skip { display:block; }
  #pomo-float-inner { display:flex; flex-direction:column; width:100%; align-items:center; }
  #pomo-float-row { display:flex; align-items:center; gap:10px; width:100%; }

  /* 🍅 Pomodoro — Tarix (History) — 2026 qayta dizayn: sana bo'yicha guruhlangan */
  .pomo-history-section { margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
  .pomo-history-toggle {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
    background:linear-gradient(155deg, var(--surface2), color-mix(in srgb, var(--surface2) 85%, var(--accent) 15%));
    border:1px solid var(--border); border-radius:var(--radius-lg); padding:13px 16px; color:var(--text);
    font-size:var(--fs-base); font-weight:700; cursor:pointer; font-family:'Syne',sans-serif;
    transition:border-color 0.2s, box-shadow 0.2s;
  }
  .pomo-history-toggle:hover { border-color:var(--border-hover); box-shadow:0 4px 14px rgba(0,0,0,0.15); }
  .pomo-history-arrow { transition:transform 0.2s; color:var(--text-muted); font-size:var(--fs-sm); }
  .pomo-history-section.open .pomo-history-arrow { transform:rotate(180deg); }
  .pomo-history-body { display:none; margin-top:14px; }
  .pomo-history-section.open .pomo-history-body { display:block; }
  .pomo-history-filters { display:flex; gap:8px; margin-bottom:14px; }
  .pomo-history-date-input { flex:1; padding:10px 12px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:var(--fs-sm); font-family:'DM Sans',sans-serif; outline:none; transition:border-color 0.15s; }
  .pomo-history-date-input:focus { border-color:var(--accent); }
  .pomo-history-all-btn { padding:10px 18px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); font-size:var(--fs-sm); font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; white-space:nowrap; transition:all 0.2s; }
  .pomo-history-all-btn.sel { border-color:var(--accent); background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #fff)); color:#fff; box-shadow:0 3px 10px var(--accent-glow); }
  .pomo-history-empty { padding:28px 10px; text-align:center; font-size:var(--fs-sm); color:var(--text-muted); }

  /* Sana bo'yicha guruh — collapsible */
  .pomo-history-day-group { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:10px; overflow:hidden; transition:border-color 0.15s; }
  .pomo-history-day-group:hover { border-color:var(--border-hover); }
  .pomo-history-day-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; background:none; border:none; padding:13px 14px; cursor:pointer; text-align:left; }
  .pomo-history-day-left { display:flex; align-items:center; gap:8px; min-width:0; }
  .pomo-history-day-icon { font-size:var(--fs-sm); flex-shrink:0; }
  .pomo-history-day-label { font-size:var(--fs-sm); font-weight:700; color:var(--text); font-family:'Syne',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pomo-history-day-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .pomo-history-day-count { font-size:var(--fs-3xs); color:var(--text-muted); background:rgba(120,120,140,0.12); padding:3px 8px; border-radius:var(--radius-full); font-weight:700; white-space:nowrap; }
  .pomo-history-day-total { font-family:'Syne',sans-serif; font-size:var(--fs-sm); font-weight:800; color:var(--accent); }
  .pomo-history-day-arrow { color:var(--text-muted); font-size:var(--fs-xs); transition:transform 0.2s; }
  .pomo-history-day-group.open .pomo-history-day-arrow { transform:rotate(180deg); }
  .pomo-history-day-body { display:none; padding:0 12px 12px; }
  .pomo-history-day-group.open .pomo-history-day-body { display:block; }
  .pomo-history-day-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 8px; border-radius:var(--radius-sm); cursor:pointer; transition:background 0.15s; }
  .pomo-history-day-row:hover { background:rgba(120,120,140,0.08); }
  /* 🆕 Kalendar kun-detalida vazifa qatori "ochiq" (sessiyalar ro'yxati
     ko'rsatilayotgan) bo'lsa, biroz ajratib turadigan fon beriladi. */
  .pomo-history-day-row.open { background:rgba(124,92,252,0.10); }
  .pomo-history-day-row-left { display:flex; align-items:center; gap:8px; min-width:0; }
  .pomo-history-day-row-icon { font-size:var(--fs-sm); flex-shrink:0; }
  .pomo-history-day-row-name { font-size:var(--fs-sm); font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pomo-history-time-badge { font-family:'Syne',sans-serif; font-size:var(--fs-2xs); font-weight:700; color:#fff; background:var(--info); padding:4px 10px; border-radius:var(--radius-full); flex-shrink:0; letter-spacing:0.02em; }
  /* 🆕 Vazifa nomi yonida — o'sha kuni nechta marta Start/Stop qilingani
     (seansiar soni) kichik badge sifatida. */
  .pomo-cal-act-count { font-size:var(--fs-3xs); font-weight:700; color:var(--text-muted); background:rgba(120,120,140,0.14); padding:2px 7px; border-radius:var(--radius-full); flex-shrink:0; white-space:nowrap; }
  /* 🆕 Vazifa bosilganda ochiladigan — shu kundagi har bir alohida
     Start→Stop/Pause seansini ko'rsatuvchi ro'yxat. */
  .pomo-cal-sessions-list { margin:2px 4px 8px 30px; padding-left:10px; border-left:2px solid var(--border); display:flex; flex-direction:column; gap:2px; }
  .pomo-cal-session-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; font-size:var(--fs-2xs); }
  .pomo-cal-session-left { display:flex; align-items:center; gap:6px; min-width:0; flex-wrap:wrap; }
  .pomo-cal-session-num { font-weight:800; color:var(--accent); flex-shrink:0; }
  .pomo-cal-session-time { color:var(--text-muted); white-space:nowrap; }
  .pomo-cal-session-dur { font-family:'Syne',sans-serif; font-weight:700; color:var(--text); flex-shrink:0; }
  .pomo-cal-session-tag { font-size:var(--fs-3xs); font-weight:700; padding:1px 6px; border-radius:var(--radius-full); flex-shrink:0; }
  .pomo-cal-session-tag.bg { color:#F5A623; background:rgba(245,166,35,0.12); }
  .pomo-cal-session-tag.manual { color:var(--accent); background:var(--accent-glow); }

  .pomo-history-close-btn { display:block; width:100%; margin-top:14px; padding:11px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); font-size:var(--fs-sm); font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; text-align:center; transition:border-color 0.15s, color 0.15s; }
  .pomo-history-close-btn:hover { border-color:var(--border-hover); color:var(--text); }

  .pomo-history-detail-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .pomo-history-back-btn { background:var(--surface2); border:1px solid var(--border); color:var(--accent); font-size:var(--fs-sm); font-weight:700; cursor:pointer; padding:7px 12px; border-radius:var(--radius-full); font-family:'DM Sans',sans-serif; transition:border-color 0.15s; }
  .pomo-history-back-btn:hover { border-color:var(--accent); }
  .pomo-history-detail-title { font-size:var(--fs-base); font-weight:700; color:var(--text); font-family:'Syne',sans-serif; }
  .pomo-history-detail-stats { display:flex; gap:10px; margin-bottom:16px; }
  .pomo-history-detail-stat { flex:1; background:linear-gradient(155deg, var(--surface2), color-mix(in srgb, var(--surface2) 85%, var(--accent) 15%)); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 9px; text-align:center; }
  .pomo-history-detail-stat-val { font-family:'Syne',sans-serif; font-size:var(--fs-lg); font-weight:800; color:var(--accent); }
  .pomo-history-detail-stat-label { font-size:var(--fs-3xs); color:var(--text-muted); margin-top:3px; text-transform:uppercase; letter-spacing:0.03em; }
  .pomo-history-sessions-title { font-size:var(--fs-2xs); color:var(--text-dim); letter-spacing:0.05em; text-transform:uppercase; margin-bottom:9px; font-weight:700; }
  .pomo-history-session-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 14px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:7px; font-size:var(--fs-xs); transition:border-color 0.15s; }
  .pomo-history-session-row:hover { border-color:var(--border-hover); }
  .pomo-history-session-time { color:var(--text); font-weight:600; }
  .pomo-history-session-dur { color:var(--accent); font-weight:700; font-family:'Syne',sans-serif; flex-shrink:0; background:var(--accent-glow); padding:3px 9px; border-radius:var(--radius-full); font-size:var(--fs-2xs); }

  /* 📊 Pomodoro statistikasi — Profile > Statistika bo'limi */
  .pomo-stats-filter-btn { padding:6px 14px; border-radius:var(--radius-full); border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); font-size:var(--fs-xs); font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all 0.2s; }
  .pomo-stats-filter-btn:hover { border-color:var(--border-hover); }
  .pomo-stats-filter-btn.sel { border-color:var(--accent); background:var(--accent-glow); color:var(--accent); }
  .pomo-stats-legend-chip { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-2xs); color:var(--text-muted); background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-full); padding:4px 10px 4px 8px; cursor:pointer; user-select:none; transition:all 0.15s; }
  .pomo-stats-legend-chip:hover { border-color:var(--border-hover); }
  .pomo-stats-legend-chip.off { opacity:0.4; }
  .pomo-stats-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .pomo-stats-yaxis-label { position:absolute; left:0; right:4px; text-align:right; font-size:var(--fs-3xs); color:var(--text-dim); transform:translateY(-50%); white-space:nowrap; }

  @media (max-width: 420px) {
    #pomo-float { right:10px; top:100px; min-width:150px; padding:9px 10px; }
    #pomo-float-time { font-size:var(--fs-base); }
  }

  /* ============================================================
     🖥️ DESKTOP DASHBOARD SHELL — chap sidebar + markaz + o'ng panel
     Faqat html.layout-desktop klassi mavjud bo'lganda ishlaydi
     (mavjud "Notebook" rejimi tugmasi shu klassni yoqadi/o'chiradi).
     Mobil (kompakt) rejimga umuman ta'sir qilmaydi.
     ============================================================ */

  /* -- Bazaviy: layout-desktop yoqilgan har qanday kenglikda -- */
  html.layout-desktop #ds-sidebar,
  html.layout-desktop #ds-aside {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius:var(--radius-md);
    padding: 14px 12px;
    margin: 0 auto 14px;
    max-width: 1180px;
  }
  html.layout-desktop .header { display: none; } /* mazmuni sidebar/aside ga ko'chirildi */
  html.layout-desktop #ds-brand {
    display: flex; align-items: center; gap: 7px;
    font-family: Syne, sans-serif; font-weight: 700; font-size:var(--fs-sm);
    color: var(--text); padding: 2px 4px 10px;
    border-bottom: 1px solid var(--border); margin-bottom: 2px;
  }
  html.layout-desktop #ds-sidebar .header-left {
    padding: 0 4px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
  }
  html.layout-desktop #ds-sidebar .header-left #user-title { max-width: 150px; overflow: hidden; text-overflow: ellipsis; display: inline-block; white-space: nowrap; vertical-align: middle; font-size:var(--fs-xs); }
  html.layout-desktop #ds-sidebar .header-left #date-label { font-size:var(--fs-2xs); }
  /* Notebook/desktop dizaynda 👤 profil doira-tugmasiga kirish qiyin bo'lgani
     uchun u yashiriladi, o'rniga "Tasks / Rewards / ..." ro'yxati oxiriga
     alohida "Profil" bandi qo'shiladi (pastda #tab-profile). */
  html.layout-desktop #profile-nav-btn { display: none; }
  /* Profil tabi endi telefonda ham ko'rinadi (avval faqat notebook rejimida edi) */
  #tab-profile { display: inline-flex; }
  html.layout-desktop #tab-profile { display: flex; }
  html.layout-desktop #tabs-bar.tabs {
    display: flex; flex-direction: column; gap: 4px; margin: 0;
  }
  html.layout-desktop #ds-sidebar .tab {
    width: 100%; text-align: left; justify-content: flex-start;
    display: flex; align-items: center; padding: 7px 9px; border-radius:var(--radius-sm);
    font-size:var(--fs-xs); font-weight: 500; white-space: nowrap;
  }
  html.layout-desktop #ds-shortcuts { display: flex; flex-direction: column; gap: 6px; }
  html.layout-desktop .ds-shortcut-btn {
    width: 100%; text-align: left; padding: 7px 9px; border-radius:var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface2); color: var(--text);
    font-family: 'DM Sans', sans-serif; font-size:var(--fs-xs); font-weight: 500; cursor: pointer;
    transition: border-color 0.2s;
  }
  html.layout-desktop .ds-shortcut-btn:hover { border-color: var(--accent); }
  html.layout-desktop #ds-aside #header-actions-right {
    flex-direction: column; align-items: stretch; gap: 6px; width: 100%;
  }
  /* Coin ko'rsatkichi tepada, Spin tugmasi pastda turishi uchun (faqat
     desktop aside'da) — DOM tartibiga (mobil header'dagi gorizontal
     joylashuvga) tegmasdan, faqat vizual tartibni CSS `order` orqali
     almashtiramiz. */
  html.layout-desktop #ds-aside #header-coins-pill { order: 1; }
  html.layout-desktop #ds-aside #header-spin-btn   { order: 2; }
  html.layout-desktop #ds-aside #header-coins-pill,
  html.layout-desktop #ds-aside #header-spin-btn,
  html.layout-desktop #ds-aside #focus-fab {
    width: 100%; justify-content: center; height: auto; padding: 7px; border-radius:var(--radius-sm);
    font-size:var(--fs-xs) !important;
  }
  html.layout-desktop #ds-aside #header-coins-pill svg { width: 13px !important; height: 13px !important; }
  html.layout-desktop #ds-aside #coins-display,
  html.layout-desktop #ds-aside .coins-text { font-size:var(--fs-xs) !important; }
  /* 👥 Do'stlar tugmasi endi "Tezkor kirish" bo'limida (tanga ustida emas) —
     faqat desktop shell'da, kompakt (mobil) dizaynda tugma o'z joyida
     (tanga oldida) qoladi. */
  html.layout-desktop #ds-aside #header-friends-btn {
    width: 100% !important; justify-content: flex-start !important; height: auto !important;
    padding: 7px 9px !important; border-radius: var(--radius-sm) !important;
    background: var(--surface2) !important; font-size: var(--fs-xs) !important;
    font-weight: 500 !important; gap: 6px !important; margin-bottom: 6px;
  }
  html.layout-desktop #ds-aside #level-panel {
    display: block !important; margin-bottom: 0; width: 100%;
    padding: 10px 10px !important; border-radius:var(--radius-md) !important;
  }
  html.layout-desktop #ds-aside #level-panel #lp-icon { font-size:var(--fs-lg) !important; }
  html.layout-desktop #ds-aside #level-panel #lp-name { font-size:var(--fs-xs) !important; }
  html.layout-desktop #ds-aside #level-panel #lp-num { font-size:var(--fs-2xs) !important; }
  html.layout-desktop #ds-aside #level-panel #level-sub { font-size:var(--fs-3xs) !important; margin-bottom: 8px !important; }
  html.layout-desktop #ds-aside #all-levels-list { gap: 3px !important; }
  html.layout-desktop #ds-aside #all-levels-list > div { padding: 4px 7px !important; gap: 6px !important; }
  html.layout-desktop #ds-aside #all-levels-list > div span:first-child { font-size:var(--fs-sm) !important; }
  html.layout-desktop #ds-aside #all-levels-list > div span:nth-child(2) { font-size:var(--fs-2xs) !important; }
  html.layout-desktop #ds-aside #all-levels-list > div .lv-xp { font-size:var(--fs-3xs) !important; }
  html.layout-desktop #ds-aside #all-levels-list > div .lv-sub { font-size:var(--fs-3xs) !important; }
  html.layout-desktop #ds-aside-title {
    font-size:var(--fs-3xs); color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0 4px; margin-top: 2px;
  }

  /* -- Statik bloklar (Bajarildi/Jami/Streak/Progress) — gorizontal KPI kartochkalar -- */
  html.layout-desktop .stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px;
  }
  html.layout-desktop .stat {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
  }
  html.layout-desktop .stat-label { margin-bottom: 0; font-size:var(--fs-3xs); }
  html.layout-desktop .stats .progress-wrap {
    grid-column: span 1; margin-bottom: 0; display: flex; flex-direction: column; justify-content: center;
  }
  html.layout-desktop .progress-head span,
  html.layout-desktop .progress-head strong { font-size:var(--fs-3xs); }
  html.layout-desktop .progress-track { height: 4px; }

  /* -- Markaziy panel: profil avatari va ichki tablar --
     Eski holat: avatar 44px'gacha kichraytirilib, hammasi tik ustma-ust
     turardi (rasmda ko'ringan "juda kichkina" muammo shundan edi).
     Endi: katta avatar chapda, ism/davlat/fanlar/Tahrirlash o'ng tomonda,
     gorizontal qatorda joylashadi — shu bilan avatar ham kattaroq bo'ladi,
     ham joy tejaladi. */
  html.layout-desktop #profile-header-row {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 18px 16px !important;
    text-align: left !important;
  }
  html.layout-desktop #profile-header-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    text-align: left !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  html.layout-desktop #profile-header-goal-widget { display: flex !important; flex: 1 !important; justify-content: flex-end !important; min-width: 0 !important; margin-left: 16px !important; }
  html.layout-desktop #profile-header-text { min-width: 0 !important; }
  html.layout-desktop #profile-avatar { width: 76px !important; height: 76px !important; font-size:var(--fs-3xl) !important; margin: 0 !important; border-width: 3px !important; flex-shrink: 0 !important; }
  html.layout-desktop #profile-name-big { font-size:var(--fs-lg) !important; margin-bottom: 3px !important; }
  html.layout-desktop #profile-country-big { font-size:var(--fs-xs) !important; margin-top: 0 !important; }
  html.layout-desktop #profile-subjects-badges { justify-content: flex-start !important; margin-top: 6px !important; }
  html.layout-desktop #profile-edit-row { justify-content: flex-start !important; margin-top: 8px !important; }
  html.layout-desktop .profile-subtab-btn { padding: 5px 10px !important; font-size:var(--fs-2xs) !important; }
  html.layout-desktop #settings-accordion-btn { padding: 8px 10px !important; font-size:var(--fs-xs) !important; }

  /* -- Kenglik 1100px+ bo'lsa: haqiqiy 3-ustunli, doimiy (fixed) sidebar/aside -- */
  @media (min-width: 1200px) {
    html.layout-desktop .wrapper {
      max-width: 1180px;
      margin: 0 auto;
      padding: 20px 20px 56px;
    }
    html.layout-desktop #ds-sidebar {
      position: fixed; top: 0; left: 0; bottom: 0; width: var(--ds-sidebar-w, 200px);
      margin: 0; border-radius: 0; border-right: 1px solid var(--border); border-top: none; border-left: none; border-bottom: none;
      padding: 16px 12px; overflow-y: auto; z-index: 30;
    }
    html.layout-desktop #ds-aside {
      position: fixed; top: 0; right: 0; bottom: 0; width: var(--ds-aside-w, 230px);
      margin: 0; border-radius: 0; border-left: 1px solid var(--border); border-top: none; border-right: none; border-bottom: none;
      padding: 16px 12px; overflow-y: auto; z-index: 30;
    }
    body.layout-shell-ready { padding-left: var(--ds-sidebar-w, 200px); padding-right: var(--ds-aside-w, 230px); }
  }
  @media (min-width: 1440px) {
    html.layout-desktop #ds-sidebar { width: var(--ds-sidebar-w, 220px); }
    html.layout-desktop #ds-aside { width: var(--ds-aside-w, 250px); }
    body.layout-shell-ready { padding-left: var(--ds-sidebar-w, 220px); padding-right: var(--ds-aside-w, 250px); }
  }

  /* ============================================================
     ⚖️ BALANCED MEDIUM LAYOUT — "oltin o'rtalik" tuzatishlari
     Grid proporsiyasi: Sidebar(200-220px) | Main(1fr) | Right(260-280px)
     Konteyner max-width:1400px, o'rtaga joylangan. Barcha bo'sh joy
     markaziy panelga (Tasks) beriladi. Shrift/padding balansi Notion/
     Linear darajasiga moslashtirilgan.
     ============================================================ */
  @media (min-width: 1200px) {
    html.layout-desktop .wrapper {
      max-width: 1400px;
      margin: 0 auto;
      padding: 26px 32px 56px;
    }
    html.layout-desktop #ds-sidebar { width: var(--ds-sidebar-w, 210px); padding: 18px 14px; }
    html.layout-desktop #ds-aside   { width: var(--ds-aside-w, 270px); padding: 18px 16px; }
    body.layout-shell-ready { padding-left: var(--ds-sidebar-w, 210px); padding-right: var(--ds-aside-w, 270px); }
  }
  @media (min-width: 1440px) {
    html.layout-desktop #ds-sidebar { width: var(--ds-sidebar-w, 220px); }
    html.layout-desktop #ds-aside   { width: var(--ds-aside-w, 280px); }
    body.layout-shell-ready { padding-left: var(--ds-sidebar-w, 220px); padding-right: var(--ds-aside-w, 280px); }
  }

  /* ============================================================
     ↔️ RESIZABLE SIDEBARS — chap va o'ng panel chetidagi tortiladigan
     chiziqlar. min 180px / max 380px. O'rtadagi asosiy panel (.wrapper)
     qolgan bo'sh joyni avtomatik egallaydi (sidebar/aside position:fixed
     bo'lgani uchun body padding-left/right orqali "flex:1" effekti beriladi).
     ============================================================ */
  html.layout-desktop #ds-sidebar-resizer,
  html.layout-desktop #ds-aside-resizer { display: none; }
  @media (min-width: 1200px) {
    html.layout-desktop #ds-sidebar-resizer,
    html.layout-desktop #ds-aside-resizer {
      display: block;
      position: fixed;
      top: 0; bottom: 0;
      width: 8px;
      z-index: 31;
      cursor: col-resize;
      background: transparent;
      touch-action: none;
    }
    html.layout-desktop #ds-sidebar-resizer::after,
    html.layout-desktop #ds-aside-resizer::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      left: 50%;
      width: 1px;
      transform: translateX(-50%);
      background: var(--border);
      transition: background 0.15s, width 0.15s;
    }
    html.layout-desktop #ds-sidebar-resizer:hover::after,
    html.layout-desktop #ds-aside-resizer:hover::after,
    html.layout-desktop #ds-sidebar-resizer.resizing::after,
    html.layout-desktop #ds-aside-resizer.resizing::after {
      background: var(--accent);
      width: 2px;
    }
    html.layout-desktop #ds-sidebar-resizer { left: calc(var(--ds-sidebar-w, 210px) - 4px); }
    html.layout-desktop #ds-aside-resizer   { right: calc(var(--ds-aside-w, 270px) - 4px); }
  }
  html.ds-resizing, html.ds-resizing * { user-select: none !important; cursor: col-resize !important; }

  /* -- Shrift balansi: matn 13-14px, sarlavhalar 16-18px -- */
  html.layout-desktop body { font-size:var(--fs-base); }
  html.layout-desktop #ds-brand { font-size:var(--fs-md); gap: 9px; padding: 4px 4px 12px; }
  html.layout-desktop #ds-aside-title { font-size:var(--fs-2xs); }

  /* -- KPI kartochkalari: balandroq, o'qishga qulay -- */
  html.layout-desktop .stats { gap: 12px; margin-bottom: 18px; }
  html.layout-desktop .stat { padding: 16px 20px; border-radius:var(--radius-md); }
  html.layout-desktop .stat-label { font-size:var(--fs-xs); }
  html.layout-desktop .stat-val { font-size:var(--fs-xl); font-weight: 600; }
  html.layout-desktop .stats .progress-wrap { padding: 16px 20px; }
  html.layout-desktop .progress-head span,
  html.layout-desktop .progress-head strong { font-size:var(--fs-xs); }
  html.layout-desktop .progress-track { height: 5px; }

  /* -- Tasks maydoni: aniq matn, input balandligi 44px atrofida -- */
  html.layout-desktop .search-bar { padding: 13px 16px 13px 40px; font-size:var(--fs-base); border-radius:var(--radius-md); min-height: 44px; }
  html.layout-desktop .add-task-btn { padding: 13px 16px; font-size:var(--fs-base); border-radius:var(--radius-md); min-height: 44px; }
  html.layout-desktop .task-card { padding: 14px 18px; border-radius:var(--radius-md); }
  html.layout-desktop .task-card-top { gap: 12px; }
  html.layout-desktop .task-card-bottom { gap: 12px; }
  html.layout-desktop .task-name { font-size:var(--fs-base); font-weight: 450; }
  html.layout-desktop .task-sub { font-size:var(--fs-xs); }
  html.layout-desktop .section-title { font-size:var(--fs-xs); margin: 16px 0 8px; }

  /* -- Chap menyu: kengroq ichki masofa -- */
  html.layout-desktop #ds-sidebar .tab { padding: 10px 14px; font-size:var(--fs-sm); border-radius:var(--radius-sm); }
  html.layout-desktop .ds-shortcut-btn { padding: 10px 14px; font-size:var(--fs-sm); border-radius:var(--radius-sm); }

  /* -- O'ng gamification panel: kengroq ichki masofa -- */
  html.layout-desktop #ds-aside #level-panel { padding: 14px !important; border-radius:var(--radius-md) !important; }
  html.layout-desktop #ds-aside #level-panel #lp-icon { font-size:var(--fs-xl) !important; }
  html.layout-desktop #ds-aside #level-panel #lp-name { font-size:var(--fs-base) !important; }
  html.layout-desktop #ds-aside #level-panel #lp-num { font-size:var(--fs-xs) !important; }
  html.layout-desktop #ds-aside #level-panel #level-sub { font-size:var(--fs-2xs) !important; margin-bottom: 10px !important; }
  html.layout-desktop #ds-aside #all-levels-list > div { padding: 6px 9px !important; }
  html.layout-desktop #ds-aside #header-coins-pill,
  html.layout-desktop #ds-aside #header-spin-btn,
  html.layout-desktop #ds-aside #focus-fab { padding: 9px !important; font-size:var(--fs-sm) !important; }

  /* ============================================================
     👥 DO'STLAR (FRIENDS) MODULI — mavjud dizayn tizimi (rang/radius/font
     tokenlari) asosida. Hozircha faqat LOCAL (brauzer) rejimda ishlaydi.
     ============================================================ */
  #header-friends-btn { position:relative; }
  .friend-badge-count { position:absolute; top:-5px; right:-5px; background:var(--red); color:#fff; font-size:9px; font-weight:800; min-width:16px; height:16px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 3px; line-height:1; font-family:'DM Sans',sans-serif; box-shadow:0 0 0 2px var(--bg); }
  .friends-tab-btn { text-align:left; padding:9px 10px; border-radius:var(--radius-sm); border:none; background:none; color:var(--text-muted); font-size:var(--fs-sm); font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; display:flex; align-items:center; gap:6px; position:relative; width:100%; }
  .friends-tab-btn.active { background:var(--accent-glow); color:var(--accent); font-weight:700; }
  .friend-card { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .friend-avatar { width:38px; height:38px; border-radius:50%; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:var(--fs-lg); flex-shrink:0; position:relative; overflow:hidden; }
  .friend-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
  .friend-avatar.fallback-gradient { font-size:var(--fs-xs); letter-spacing:0.02em; }
  /* 🟢 Online/offline status indikatori — avatarning pastki-o'ng burchagida */
  .friend-status-dot { position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; border-radius:50%; border:2px solid var(--surface2); background:var(--text-dim); box-shadow:0 0 0 1px var(--surface2); }
  .friend-status-dot.online { background:var(--green); }
  .friend-status-dot.offline { background:var(--text-dim); }
  body.light .friend-status-dot { border-color:var(--surface); box-shadow:0 0 0 1px var(--surface); }
  .friend-name { font-size:var(--fs-sm); font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .friend-sub { font-size:var(--fs-2xs); color:var(--text-muted); margin-top:2px; }
  .friend-mutual-chip { font-size:var(--fs-3xs); font-weight:700; color:var(--info); background:rgba(96,165,250,0.14); border:1px solid rgba(96,165,250,0.3); border-radius:var(--radius-full); padding:1px 7px; white-space:nowrap; }
  .friend-expiry-chip { font-size:var(--fs-3xs); font-weight:600; color:var(--text-dim); white-space:nowrap; }
  .friend-expiry-chip.soon { color:var(--gold); font-weight:700; }
  .friend-req-btn { padding:7px 12px; border-radius:var(--radius-full); border:1px solid var(--border); background:transparent; font-size:var(--fs-xs); font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; white-space:nowrap; flex-shrink:0; color:var(--text-muted); transition:all 0.15s; }
  .friend-req-btn.accept { border-color:var(--green); color:var(--green); }
  .friend-req-btn.accept:hover { background:rgba(52,211,153,0.12); }
  .friend-req-btn.decline { border-color:var(--red); color:var(--red); }
  .friend-req-btn.decline:hover { background:rgba(248,113,113,0.12); }
  .friend-req-btn.ghost { border-style:dashed; }
  /* Amaliyot (action) tugmalari guruhi — mobil ekranda to'liq qatorga tushib, teng bo'linadi */
  .friend-card-actions { display:flex; gap:6px; flex-shrink:0; margin-left:auto; }
  .friend-card-info { display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 180px; }
  .pid-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); }
  .pid-label { font-size:var(--fs-xs); color:var(--text-muted); font-weight:600; }
  .pid-value { font-size:var(--fs-sm); color:var(--text); font-weight:700; text-align:right; }
  .party-progress-track, .duel-progress-track { height:8px; background:var(--surface2); border-radius:var(--radius-full); overflow:hidden; }
  .party-progress-fill { height:100%; background:linear-gradient(90deg,var(--accent),#B48EFF); border-radius:var(--radius-full); transition:width 0.5s ease; }
  .duel-progress-fill { height:100%; border-radius:var(--radius-full); transition:width 0.5s ease; }
  .duel-vs-bar { display:flex; align-items:center; gap:8px; }
  body.light .friend-card { background:var(--surface); }
  body.light .friend-avatar { background:var(--surface2); }
  /* ✅ TUZATILDI: mobil ekranda Ban/Accept/Decline tugmalari ism/avatar bilan
     bitta qatorga siqilib, torayib ketardi. Endi 460px dan tor ekranlarda
     amallar guruhi to'liq kenglikka tushadi va tugmalar teng bo'linadi. */
  @media (max-width:460px) {
    .friend-card { padding:11px 12px; gap:8px; }
    .friend-card-actions { width:100%; margin-left:0; }
    .friend-card-actions .friend-req-btn { flex:1; text-align:center; padding:9px 8px; }
  }
  /* 🔢 Sabab (reason) textarea uchun dinamik belgi sanagich */
  .char-counter { text-align:right; font-size:var(--fs-3xs); color:var(--text-dim); margin:-8px 0 12px; font-family:'DM Sans',sans-serif; transition:color 0.15s; }
  .char-counter.warn { color:var(--gold); font-weight:700; }
  .char-counter.max { color:var(--red); font-weight:700; }
  /* Sabab uchun tayyor chiplar */
  .reason-chip { padding:6px 11px; border-radius:var(--radius-full); border:1px solid var(--border-hover); background:var(--surface); color:var(--text-muted); font-size:var(--fs-2xs); font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all 0.15s; }
  .reason-chip:hover { border-color:var(--accent); color:var(--accent); }
  .reason-chip.sel { border-color:var(--accent); background:var(--accent-glow); color:var(--accent); }


  .mood-modal-inner { background:var(--surface);border-radius:var(--radius-xl) 28px 0 0;width:100%;max-width:680px;max-height:92vh;overflow-y:auto;padding:0 0 40px;animation:slideUp 0.35s cubic-bezier(0.32,0.72,0,1); }
  .mood-modal-handle { width:40px;height:4px;border-radius:var(--radius-2xs);background:var(--border-hover);margin:12px auto 0; }
  .mood-modal-header { display:flex;align-items:center;justify-content:space-between;padding:18px 20px 0; }
  .mood-modal-title { font-family:'Syne',sans-serif;font-size:var(--fs-md);font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px; }
  .mood-close-btn { width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--surface2);color:var(--text-muted);font-size:var(--fs-base);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s; }
  .mood-close-btn:hover { border-color:var(--border-hover);color:var(--text); }
  .mood-cal-section { padding:16px 20px 0; }
  .mood-nav { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px; }
  .mood-nav-btn { width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:var(--fs-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s; }
  .mood-nav-btn:hover { border-color:var(--accent);color:var(--accent); }
  .mood-nav-title { font-family:'Syne',sans-serif;font-size:var(--fs-base);font-weight:600;color:var(--text); }
  .mood-pick-section { margin:0 20px;background:linear-gradient(135deg,var(--surface2),rgba(124,92,252,0.06));border:1px solid var(--border);border-radius:var(--radius-xl);padding:18px; }
  .mood-pick-label { font-size:var(--fs-2xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:14px;text-align:center; }
  .mood-emojis-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px; }
  .mood-pick-btn { width:100%;aspect-ratio:1;border-radius:var(--radius-md);border:2px solid var(--border);background:var(--surface);font-size:var(--fs-xl);cursor:pointer;transition:all 0.18s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;overflow:hidden; }
  .mood-pick-btn:hover { border-color:var(--accent);transform:scale(1.08);background:rgba(124,92,252,0.08); }
  .mood-pick-btn.sel { border-color:var(--accent);background:rgba(124,92,252,0.15);transform:scale(1.1);box-shadow:0 4px 16px rgba(124,92,252,0.3); }
  .mood-pick-btn .mlabel { font-size:var(--fs-3xs);color:var(--text-dim);font-family:'DM Sans',sans-serif;letter-spacing:0.02em;line-height:1; }
  .mood-pick-btn.sel .mlabel { color:var(--accent); }
  .mood-note-wrap { position:relative;margin-bottom:12px; }
  .mood-note-input { width:100%;padding:10px 12px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-size:var(--fs-sm);font-family:'DM Sans',sans-serif;resize:none;height:58px;outline:none;box-sizing:border-box;transition:border-color 0.2s; }
  .mood-note-input:focus { border-color:var(--accent); }
  .mood-save-btn { width:100%;padding:13px;border-radius:var(--radius-md);border:none;background:linear-gradient(135deg,var(--accent),#9B7FFF);color:#fff;font-size:var(--fs-base);font-weight:700;cursor:pointer;font-family:'Syne',sans-serif;letter-spacing:0.02em;transition:all 0.2s;box-shadow:0 4px 20px rgba(124,92,252,0.35); }
  .mood-save-btn:hover { transform:translateY(-1px);box-shadow:0 6px 24px rgba(124,92,252,0.45); }
  .mood-save-btn:active { transform:translateY(0); }
  .mood-divider { height:1px;background:var(--border);margin:16px 20px; }


  /* Butun ekranni bosishlardan bloklaydigan shaffof qatlam.
     Spotlight box-shadow orqali qorong'ulashtirish effektini o'zi yaratadi,
     shuning uchun bu qatlam faqat klik/tap hodisalarini ushlab qoladi. */
  .onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: transparent;
    cursor: default;
  }

  /* Spotlight — nishon elementni "teshik" qilib ko'rsatadigan qatlam.
     box-shadow: 0 0 0 9999px ... — atrofidagi butun ekranni xiralashtiradi,
     o'zining ichki maydoni esa shaffof (yoritilgan) qoladi. */
  .onboarding-spotlight {
    position: fixed;
    z-index: 601;
    border-radius:var(--radius-lg);
    box-shadow: 0 0 0 9999px rgba(8, 8, 14, 0.82);
    background: transparent;
    pointer-events: none;
    transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    outline: 2px solid rgba(124, 92, 252, 0.9);
    outline-offset: 4px;
    animation: onboarding-pulse 1.8s ease-in-out infinite;
  }

  @keyframes onboarding-pulse {
    0%, 100% { outline-color: rgba(124, 92, 252, 0.9); }
    50%      { outline-color: rgba(124, 92, 252, 0.35); }
  }

  /* Strelkali Tooltip — spotlightlangan elementga qarab joylashadi */
  .onboarding-tooltip {
    position: fixed;
    z-index: 602;
    width: 280px;
    max-width: calc(100vw - 32px);
    background: #1C1C25;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius:var(--radius-lg);
    padding: 16px 18px 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Strelka — 4 ta yo'nalish uchun (tooltip qaysi tomonda bo'lsa,
     strelka spotlightga qarab teskari tomondan chiqadi) */
  .onboarding-tooltip-arrow {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #1C1C25;
    border: 1px solid rgba(255,255,255,0.15);
    transform: rotate(45deg);
  }
  /* Tooltip nishondan PASTDA bo'lsa — strelka yuqoriga qaraydi */
  .onboarding-tooltip.arrow-top .onboarding-tooltip-arrow {
    top: -8px; left: 50%; margin-left: -7px;
    border-right: none; border-bottom: none;
  }
  /* Tooltip nishondan YUQORIDA bo'lsa — strelka pastga qaraydi */
  .onboarding-tooltip.arrow-bottom .onboarding-tooltip-arrow {
    bottom: -8px; left: 50%; margin-left: -7px;
    border-left: none; border-top: none;
  }
  /* Tooltip nishondan O'NGDA bo'lsa — strelka chapga qaraydi */
  .onboarding-tooltip.arrow-left .onboarding-tooltip-arrow {
    left: -8px; top: 50%; margin-top: -7px;
    border-right: none; border-top: none;
  }
  /* Tooltip nishondan CHAPDA bo'lsa — strelka o'ngga qaraydi */
  .onboarding-tooltip.arrow-right .onboarding-tooltip-arrow {
    right: -8px; top: 50%; margin-top: -7px;
    border-left: none; border-bottom: none;
  }

  .onboarding-tt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .onboarding-tt-step {
    font-size:var(--fs-2xs);
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .onboarding-tt-skip {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size:var(--fs-2xs);
    cursor: pointer;
    padding: 2px 4px;
    font-family: 'DM Sans', sans-serif;
  }
  .onboarding-tt-skip:hover { color: var(--text-muted); }

  .onboarding-tt-icon {
    font-size:var(--fs-3xl);
    margin-bottom: 8px;
  }
  .onboarding-tt-title {
    font-family: 'Syne', sans-serif;
    font-size:var(--fs-md);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
  }
  .onboarding-tt-desc {
    font-size:var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 10px;
  }

  /* "Batafsil ma'lumot" — kengaytiriladigan qo'shimcha izoh bloki */
  .onboarding-tt-advanced-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 2px 0;
    margin-bottom: 10px;
    color: var(--accent);
    font-size:var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
  }
  .onboarding-tt-advanced-toggle .onboarding-tt-advanced-caret {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size:var(--fs-3xs);
  }
  .onboarding-tt-advanced-toggle.open .onboarding-tt-advanced-caret {
    transform: rotate(180deg);
  }
  .onboarding-tt-advanced {
    display: none;
    font-size:var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.6;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius:var(--radius-md);
    padding: 10px 12px;
    margin-bottom: 14px;
  }
  .onboarding-tt-dots {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
  }
  .onboarding-tt-dots span {
    display: inline-block;
    height: 6px;
    border-radius:var(--radius-full);
    background: var(--border);
    transition: all 0.2s;
  }
  .onboarding-tt-dots span.active {
    width: 18px;
    background: var(--accent);
  }
  .onboarding-tt-dots span.done {
    background: var(--accent);
    opacity: 0.5;
  }

  .onboarding-tt-actions {
    display: flex;
    gap: 8px;
  }
  .onboarding-btn {
    padding: 10px;
    border-radius:var(--radius-md);
    font-size:var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
  }
  .onboarding-btn-ghost {
    flex: 1;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
  }
  .onboarding-btn-primary {
    flex: 2;
    border: none;
    background: var(--accent);
    color: #fff;
  }
  .onboarding-btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.3);
  }

  /* Kichik ekranlarda (mobil) tooltip kenglikni moslashtiradi */
  @media (max-width: 420px) {
    .onboarding-tooltip { width: calc(100vw - 32px); }
  }

  /* ============ 🎉 WELCOME SURVEY — chiroyli fon (glow blobs) ============
     Savol-javob oynasi ochilganda orqa fon oddiy qora emas, balki
     accent/gold ranglarida yumshoq "glow" shakllar bilan bezatiladi.
     Blob'lar sekin suzib yuradi (float animatsiya), modal oynasi esa
     nozik gradient + porlash bilan chiziladi. */
  .ws-overlay {
    background: radial-gradient(ellipse 900px 700px at 50% 8%, rgba(124,92,252,0.22) 0%, transparent 60%),
                radial-gradient(ellipse 700px 600px at 90% 95%, rgba(245,166,35,0.14) 0%, transparent 55%),
                rgba(6,6,10,0.86);
    backdrop-filter: blur(10px) saturate(1.15);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    animation: wsOverlayFadeIn 0.35s ease;
    overflow: hidden;
  }
  @keyframes wsOverlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
  .ws-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
  }
  .ws-blob-1 {
    width: 340px; height: 340px; top: -120px; left: -90px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    animation: wsBlobFloat1 9s ease-in-out infinite;
  }
  .ws-blob-2 {
    width: 300px; height: 300px; bottom: -110px; right: -80px;
    background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
    animation: wsBlobFloat2 11s ease-in-out infinite;
  }
  .ws-blob-3 {
    width: 220px; height: 220px; top: 40%; right: 10%;
    background: radial-gradient(circle, var(--green) 0%, transparent 72%);
    opacity: 0.28;
    animation: wsBlobFloat1 13s ease-in-out infinite reverse;
  }
  @keyframes wsBlobFloat1 {
    0%, 100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(30px,25px) scale(1.08); }
  }
  @keyframes wsBlobFloat2 {
    0%, 100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(-25px,-20px) scale(1.1); }
  }
  .ws-box {
    background: linear-gradient(160deg, var(--surface) 0%, var(--surface2) 120%);
    box-shadow: 0 24px 60px -12px rgba(0,0,0,0.55), 0 0 0 1px var(--border-hover), 0 0 40px -10px var(--accent-glow);
    animation: wsBoxPop 0.4s cubic-bezier(0.16,1,0.3,1);
  }
  .ws-box::before {
    content: '';
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 220px;
    background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
  }
  @keyframes wsBoxPop {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  body.light .ws-overlay {
    background: radial-gradient(ellipse 900px 700px at 50% 8%, rgba(124,92,252,0.16) 0%, transparent 60%),
                radial-gradient(ellipse 700px 600px at 90% 95%, rgba(212,136,6,0.12) 0%, transparent 55%),
                rgba(20,18,35,0.5);
  }

  /* ===== ACCESSIBILITY: keyboard focus ring =====
     The codebase has ~30 scattered `outline:none` declarations (some in <style>
     rules, some in JS-generated inline `style="..."` strings), which silently
     killed the keyboard focus indicator app-wide. Rather than hunt down every
     inline occurrence (risky in a 20k-line file), we neutralize them here with
     one authoritative, high-specificity rule placed last in the cascade:
     mouse/touch users never see it (`:focus-visible` only matches keyboard/
     programmatic focus), and keyboard users always get a visible, on-brand ring. */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
    border-radius: var(--radius-2xs);
  }

/* ============================================================
   🎁 CHEST BO'LIMI — qayta ishlangan dizayn
   ============================================================ */
.chest-view { padding: 8px 0 24px; }

.chest-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); padding: 18px 18px 16px; margin-bottom: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--surface2), var(--surface));
}
.chest-hero[data-state="ready"],
.chest-hero[data-state="active"] {
  border-color: rgba(245,166,35,0.45);
  background: linear-gradient(135deg, rgba(245,166,35,0.16), rgba(245,166,35,0.04));
}
.chest-hero[data-state="done"] {
  border-color: rgba(52,211,153,0.35);
  background: linear-gradient(135deg, rgba(52,211,153,0.12), rgba(52,211,153,0.03));
}
.chest-hero-top { display: flex; align-items: center; gap: 14px; }
.chest-hero-icon {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; background: var(--surface); border: 1px solid var(--border);
}
.chest-hero[data-state="locked"] .chest-hero-icon { filter: grayscale(0.6); opacity: 0.85; }
.chest-hero[data-state="ready"] .chest-hero-icon { animation: chestWiggle 2.4s ease-in-out infinite; }
@keyframes chestWiggle {
  0%, 80%, 100% { transform: rotate(0); }
  85% { transform: rotate(-10deg) scale(1.06); }
  90% { transform: rotate(8deg) scale(1.06); }
  95% { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) { .chest-hero-icon { animation: none !important; } }
.chest-hero-text { flex: 1; min-width: 0; }
.chest-hero-title {
  font-family: Syne, sans-serif; font-size: var(--fs-md); font-weight: 700;
  color: var(--text); margin-bottom: 3px; overflow-wrap: anywhere;
}
.chest-hero[data-state="ready"] .chest-hero-title,
.chest-hero[data-state="active"] .chest-hero-title { color: var(--gold); }
.chest-hero[data-state="done"] .chest-hero-title { color: var(--green); }
.chest-hero-sub { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere; }

.chest-progress {
  height: 8px; margin-top: 14px; border-radius: var(--radius-full);
  background: var(--surface); border: 1px solid var(--border); overflow: hidden;
}
.chest-progress-fill {
  height: 100%; width: 0%; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--gold), #FFD580);
  transition: width 0.5s ease;
}
.chest-hero[data-state="done"] .chest-progress-fill { background: var(--green); }
.chest-hero-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.chest-progress-label { font-size: var(--fs-xs); color: var(--text-muted); }
.chest-hero-btn {
  min-height: 40px; padding: 9px 18px; border: none; border-radius: var(--radius-md);
  background: var(--gold); color: #111; cursor: pointer;
  font-family: Syne, sans-serif; font-size: var(--fs-sm); font-weight: 700;
  box-shadow: 0 4px 14px rgba(245,166,35,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.chest-hero-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(245,166,35,0.4); }
.chest-hero-btn:active { transform: scale(0.97); }
.chest-hero-btn.is-secondary {
  background: var(--surface); color: var(--text); border: 1px solid var(--border-hover); box-shadow: none;
}

.chest-stats { margin-bottom: 18px; }

.chest-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px;
}
.chest-section-title {
  font-size: var(--fs-2xs); color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.chest-add-btn {
  min-height: 36px; padding: 7px 16px; border: none; border-radius: var(--radius-full);
  background: var(--accent); color: #fff; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: var(--fs-sm); font-weight: 600;
  box-shadow: 0 3px 12px var(--accent-glow); transition: transform 0.15s;
}
.chest-add-btn:active { transform: scale(0.96); }
.chest-add-btn-lg { margin-top: 14px; min-height: 42px; padding: 10px 22px; }

.chest-list { display: flex; flex-direction: column; gap: 8px; }
.chest-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 14px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color 0.15s, opacity 0.2s;
}
.chest-item:hover { border-color: var(--border-hover); }
.chest-item-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.chest-item-dot.d1 { background: var(--green); }
.chest-item-dot.d2 { background: var(--gold); }
.chest-item-dot.d3 { background: var(--red); }
.chest-item-body { flex: 1; min-width: 0; }
.chest-item-name { font-size: var(--fs-base); color: var(--text); overflow-wrap: anywhere; line-height: 1.35; }
.chest-item-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.chest-chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px;
  border-radius: var(--radius-full); font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap;
}
.chest-chip-coins { background: var(--gold-dim); color: var(--gold); }
.chest-chip-done { background: rgba(52,211,153,0.14); color: var(--green); }
.chest-chip-active { background: rgba(245,166,35,0.18); color: var(--gold); }
.chest-item.is-done { opacity: 0.6; }
.chest-item.is-done .chest-item-name { text-decoration: line-through; text-decoration-color: var(--text-dim); }
.chest-item.is-active { border-color: rgba(245,166,35,0.5); }
.chest-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.chest-icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted);
  cursor: pointer; font-size: var(--fs-sm); transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.chest-icon-btn:hover { border-color: var(--accent); color: var(--text); }
.chest-icon-btn.is-danger:hover { border-color: var(--red); background: rgba(248,113,113,0.1); }

.chest-empty {
  text-align: center; padding: 32px 16px; border-radius: var(--radius-lg);
  border: 1px dashed var(--border-hover); background: var(--surface);
}
.chest-empty-icon { font-size: 40px; margin-bottom: 8px; }
.chest-empty-title { font-size: var(--fs-base); color: var(--text); font-weight: 600; margin-bottom: 4px; }
.chest-empty-sub { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.5; }

/* Chest vazifa qo'shish / tahrirlash oynasi */
.ct-sheet {
  background: var(--surface); border: 1px solid var(--border-hover); border-bottom: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  width: 100%; max-width: 560px; animation: modalIn 0.22s ease;
}
.ct-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border-hover); margin: 0 auto 14px; }
.ct-sheet-title { font-family: Syne, sans-serif; font-size: var(--fs-md); font-weight: 700; margin-bottom: 16px; color: var(--text); }
.ct-field { margin-bottom: 16px; }
.ct-label {
  display: block; margin-bottom: 7px; font-size: var(--fs-2xs); color: var(--text-muted);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.ct-input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  font-size: var(--fs-base); font-family: 'DM Sans', sans-serif; transition: border-color 0.15s;
}
.ct-input:focus { border-color: var(--accent); outline: none; }
.ct-input.is-invalid { border-color: var(--red); }
.ct-presets { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ct-preset {
  min-height: 34px; padding: 6px 14px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.ct-preset.is-sel { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); }
.ct-actions { display: flex; gap: 10px; margin-top: 6px; }
.ct-btn {
  min-height: 46px; padding: 12px; border-radius: var(--radius-md); cursor: pointer;
  font-size: var(--fs-base); font-family: 'DM Sans', sans-serif;
}
.ct-btn-cancel { flex: 1; border: 1px solid var(--border); background: transparent; color: var(--text-muted); }
.ct-btn-save { flex: 2; border: none; background: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 4px 16px var(--accent-glow); }

/* ============================================================
   🎁 REWARDS BO'LIMI — qayta ishlangan dizayn
   ============================================================ */
.rw-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 18px; margin-bottom: 14px; border-radius: var(--radius-lg);
  border: 1px solid rgba(245,166,35,0.35);
  background: linear-gradient(135deg, rgba(245,166,35,0.14), rgba(124,92,252,0.08));
}
.rw-hero-main { flex: 1; min-width: 0; }
.rw-hero-label { font-size: var(--fs-2xs); color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.rw-hero-coins {
  font-family: Syne, sans-serif; font-size: 30px; font-weight: 800; color: var(--gold);
  line-height: 1.15; margin: 2px 0 6px;
}
.rw-hero-coin-icon { font-size: 24px; }
.rw-hero-sub { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.rw-hero-add {
  flex-shrink: 0; min-height: 42px; padding: 10px 16px; border: none; border-radius: var(--radius-md);
  background: var(--accent); color: #fff; cursor: pointer; white-space: nowrap;
  font-family: 'DM Sans', sans-serif; font-size: var(--fs-sm); font-weight: 700;
  box-shadow: 0 4px 14px var(--accent-glow); transition: transform 0.15s;
}
.rw-hero-add:active { transform: scale(0.96); }

/* Sotib olinganlar */
.rw-owned {
  padding: 14px; margin-bottom: 16px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid rgba(52,211,153,0.3);
}
.rw-owned-title { font-size: var(--fs-2xs); color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
.rw-owned-list { display: flex; flex-direction: column; gap: 8px; }
.rw-owned-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px;
  border-radius: var(--radius-sm); background: var(--surface2);
}
.rw-owned-name { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text); overflow-wrap: anywhere; }
.rw-owned-left { font-size: var(--fs-xs); font-weight: 700; color: var(--green); white-space: nowrap; }
.rw-owned-use {
  min-height: 32px; padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
  border: 1px solid rgba(96,165,250,0.35); background: rgba(96,165,250,0.08); color: var(--info);
  font-size: var(--fs-2xs); font-weight: 600; font-family: 'DM Sans', sans-serif;
}

/* Ro'yxat */
.rw-section-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 0 10px;
  font-size: var(--fs-2xs); color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.rw-section-title:empty { display: none; }
.rw-section-meta { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-muted); }
.rw-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }

.rw-card {
  padding: 12px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s, transform 0.15s;
}
.rw-card:not(.cant-afford):not(.is-blocked):hover { border-color: var(--accent); box-shadow: 0 0 18px var(--accent-glow); }
.rw-card.is-blocked { border-color: var(--red); box-shadow: 0 0 16px rgba(248,113,113,0.3); }
.rw-card.is-dragging { opacity: 0.45; transform: scale(0.98); }
.rw-card.is-drop-target { border-color: var(--accent); border-style: dashed; }
.rw-card-top { display: flex; align-items: flex-start; gap: 12px; }
.rw-icon {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: var(--surface2); border: 1px solid var(--border);
}
.rw-card.cant-afford .rw-icon { filter: grayscale(0.7); opacity: 0.75; }
.rw-body { flex: 1; min-width: 0; padding-top: 2px; }
.rw-name { font-size: var(--fs-base); font-weight: 600; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; }
.rw-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.rw-chip {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full);
  font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap;
}
.rw-chip-cost { background: var(--gold-dim); color: var(--gold); }
.rw-chip-own { background: rgba(52,211,153,0.14); color: var(--green); }
.rw-chip-muted { background: var(--surface2); color: var(--text-muted); font-weight: 500; }
.rw-tools { display: flex; gap: 6px; flex-shrink: 0; }
.rw-icon-btn {
  width: 34px; height: 34px; border-radius: var(--radius-sm); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm);
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted);
  transition: border-color 0.15s, background 0.15s;
}
.rw-icon-btn:hover { border-color: var(--accent); }
.rw-icon-btn.is-danger:hover { border-color: var(--red); background: rgba(248,113,113,0.1); }

.rw-need { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.rw-need-bar { flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--surface2); overflow: hidden; }
.rw-need-fill { height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--gold), #FFD580); }
.rw-need-label { font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap; }

.rw-actions { display: flex; gap: 8px; margin-top: 12px; }
.rw-btn {
  min-height: 40px; padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600; font-family: 'DM Sans', sans-serif;
  transition: transform 0.12s, opacity 0.15s;
}
.rw-btn:active:not(:disabled) { transform: scale(0.97); }
.rw-actions .rw-btn:first-child { flex: 3; }
.rw-actions .rw-btn-use { flex: 2; }
.rw-btn-buy { border: none; background: var(--accent); color: #fff; box-shadow: 0 3px 12px var(--accent-glow); }
.rw-btn-disabled { border: 1px dashed var(--border-hover); background: transparent; color: var(--text-dim); cursor: not-allowed; }
.rw-btn-blocked { border: 1px solid var(--red); background: rgba(248,113,113,0.12); color: var(--red); }
.rw-btn-use { border: 1px solid rgba(96,165,250,0.35); background: rgba(96,165,250,0.08); color: var(--info); }
.rw-btn-use:disabled { border-color: var(--red); color: var(--red); background: rgba(248,113,113,0.08); cursor: not-allowed; opacity: 0.75; }

.rw-empty {
  text-align: center; padding: 30px 18px; border-radius: var(--radius-lg);
  border: 1px dashed var(--border-hover); background: var(--surface);
}
.rw-empty-icon { font-size: 40px; margin-bottom: 8px; }
.rw-empty-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); margin-bottom: 4px; }
.rw-empty-sub { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.5; }
.rw-empty-btn { margin-top: 14px; padding: 10px 20px; }

/* Qo'shish formasi */
.rw-add-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0; min-height: 32px; background: none; border: none; cursor: pointer;
  font-family: Syne, sans-serif; font-size: var(--fs-base); font-weight: 600; color: var(--text);
}
#add-reward-section { scroll-margin-top: 16px; }
#add-reward-body { counter-reset: rstep; }
.reward-step { counter-increment: rstep; }
.rstep-num::before { content: counter(rstep); }
.remoji-chip { width: 38px; height: 38px; }
#r-icon { max-width: 200px !important; }

/* ============================================================
   💎 OLMOS (GEMS) — header belgisi va hamyon oynasi
   ============================================================ */
.gems-pill {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; cursor: pointer;
  padding: 8px 14px; border-radius: var(--radius-full);
  background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.35);
  color: #38BDF8; font-family: 'Syne', sans-serif; font-size: var(--fs-base); font-weight: 600;
  transition: transform 0.15s, box-shadow 0.15s;
}
.gems-pill:hover { box-shadow: 0 0 14px rgba(56,189,248,0.3); }
.gems-pill:active { transform: scale(0.96); }
.gems-pill-icon { font-size: 15px; line-height: 1; }
body.light .gems-pill { color: #0284C7; background: rgba(2,132,199,0.1); border-color: rgba(2,132,199,0.3); }

.gems-overlay {
  position: fixed; inset: 0; z-index: 600; display: none;
  align-items: flex-end; justify-content: center; background: rgba(0,0,0,0.72);
}
.gems-sheet {
  width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-hover); border-bottom: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  animation: modalIn 0.22s ease;
}
.gems-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; position: relative; }
.gems-head-icon {
  width: 56px; height: 56px; border-radius: var(--radius-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: linear-gradient(135deg, rgba(56,189,248,0.22), rgba(124,92,252,0.18));
  border: 1px solid rgba(56,189,248,0.35);
}
.gems-head-label { font-size: var(--fs-2xs); color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.gems-head-val { font-family: Syne, sans-serif; font-size: 30px; font-weight: 800; color: #38BDF8; line-height: 1.1; }
.gems-head-sub { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; }
.gems-close {
  position: absolute; top: 0; right: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); cursor: pointer;
}
.gems-note {
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5;
  padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface2); margin-bottom: 12px;
}
.gems-ways { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.gems-way {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface);
}
.gems-way-icon { font-size: 22px; width: 32px; text-align: center; flex-shrink: 0; }
.gems-way-body { flex: 1; min-width: 0; }
.gems-way-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.gems-way-sub { font-size: var(--fs-2xs); color: var(--text-dim); line-height: 1.4; margin-top: 2px; }
.gems-way-val {
  text-align: right; font-family: Syne, sans-serif; font-weight: 700; font-size: var(--fs-sm);
  color: #38BDF8; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end;
}
.gems-way-val small { font-family: 'DM Sans', sans-serif; font-size: var(--fs-2xs); color: var(--text-dim); font-weight: 500; }
.gems-exchange {
  padding: 12px; border-radius: var(--radius-md); margin-bottom: 14px;
  border: 1px solid rgba(245,166,35,0.3); background: linear-gradient(135deg, rgba(245,166,35,0.08), transparent);
}
.gems-ex-title { font-family: Syne, sans-serif; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.gems-ex-sub { font-size: var(--fs-2xs); color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; }
.gems-ex-row { display: flex; gap: 8px; }
.gems-ex-row .rw-btn { flex: 1; }
.gems-ex-row .rw-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.gems-log-title { font-size: var(--fs-2xs); color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; }
.gems-log { display: flex; flex-direction: column; gap: 6px; }
.gems-log-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface2);
}
.gems-log-note { font-size: var(--fs-sm); color: var(--text); min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; }
.gems-log-date { font-size: var(--fs-3xs, 10px); color: var(--text-dim); margin-top: 2px; }
.gems-log-amt { font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }
.gems-log-amt.up { color: var(--green); }
.gems-log-amt.down { color: var(--red); }
.gems-empty { text-align: center; color: var(--text-dim); font-size: var(--fs-sm); padding: 16px 8px; }
@media (max-width: 520px) {
  .gems-pill { padding: 6px 10px; gap: 4px; font-size: var(--fs-sm); }
  #header-friends-btn > span[data-i18n="friends_label"] { display: none; }
  #header-friends-btn { padding: 0 10px !important; }
  #header-coins-pill { padding: 6px 12px; }
}
@media (max-width: 400px) {
  #header-spin-label, #coins-suffix { display: none; }
  #header-spin-btn { padding: 0 9px !important; }
}
@media (max-width: 400px) {
  .header { gap: 6px; }
  .header-left { min-width: 0; flex: 1 1 auto; }
  .header-left #user-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; display: inline-block; vertical-align: middle; }
  .header-left #profile-nav-btn { display: none !important; }
  #header-right-wrap, #header-actions-right { gap: 5px !important; }
  .gems-pill { padding: 6px 8px; }
  #header-coins-pill { padding: 6px 9px; gap: 4px; }
}

/* ============================================================
   🍅 POMODORO — qayta ishlangan, qulayroq dizayn
   ============================================================ */
/* Kartalar: katta ▶/⏸ tugmasi, bitta holat belgisi, asboblar pastda */
.pomo-act-card { padding: 14px 14px 10px; }
.pomo-act-card.is-running { border-color: color-mix(in srgb, var(--green) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 35%, transparent), 0 8px 22px rgba(52,211,153,0.12); }
.pomo-act-card.is-over .pomo-act-elapsed { color: var(--red); }
.pomo-act-top { display: flex; align-items: center; gap: 12px; }
.pomo-act-top .pomo-act-avatar { flex-shrink: 0; }
.pomo-act-top .pomo-act-info { flex: 1; min-width: 0; }
.pomo-act-top .pomo-act-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pomo-act-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.pomo-act-meta .pomo-act-status-inline { margin: 0; }
.pomo-act-meta .pomo-act-limit { margin: 0; }
.pomo-act-play {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-card, var(--accent)); color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-card, var(--accent)) 40%, transparent);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.pomo-act-play:hover { transform: scale(1.05); }
.pomo-act-play:active { transform: scale(0.94); }
.pomo-act-play svg { margin-left: 2px; }
.pomo-act-play.on { background: var(--surface2); color: var(--text); border: 1px solid var(--border-hover); box-shadow: none; }
.pomo-act-play.on svg { margin-left: 0; }
.pomo-act-progress-track { margin-top: 12px; }
.pomo-act-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.pomo-act-bottom .pomo-act-elapsed-row { justify-content: flex-start; margin: 0; align-items: baseline; }
.pomo-act-bottom .pomo-act-overflow-text { margin: 0; font-size: var(--fs-2xs); }
.pomo-act-card .pomo-act-icons { position: static; gap: 4px; flex-shrink: 0; }
.pomo-act-card .pomo-act-icon-btn { width: 34px; height: 34px; border-radius: var(--radius-sm); font-size: 14px; }
.pomo-act-main, .pomo-act-controls, .pomo-act-resume-bar { display: none !important; }

/* Ro'yxat pastga aylantirilganda tepada turuvchi "hozir ishlayapti" paneli */
#pomo-now-bar {
  position: sticky; top: 8px; z-index: 5; display: none; align-items: center; gap: 10px;
  margin: -6px 0 12px; padding: 8px 8px 8px 12px; border-radius: var(--radius-full); cursor: pointer;
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); box-shadow: 0 8px 22px rgba(0,0,0,0.3);
}
#pomo-now-bar.show { display: flex; }
.pomo-now-emoji { font-size: 18px; }
.pomo-now-name { flex: 1; min-width: 0; font-weight: 600; color: var(--text); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pomo-now-time { font-family: Syne, sans-serif; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.pomo-now-time.break { color: #FFD580; }
.pomo-now-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--accent); color: #fff; cursor: pointer; font-size: 14px; }

/* Yangi faoliyat — pastdan chiqadigan oyna */
#pomo-new-backdrop { position: fixed; inset: 0; z-index: 1190; background: rgba(0,0,0,0.6); display: none; }
#pomo-new-backdrop.open { display: block; }
#pomo-new-form.open {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  width: 100%; max-width: 560px; margin: 0 auto; max-height: 86vh; overflow-y: auto;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: none;
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); box-shadow: 0 -10px 40px rgba(0,0,0,0.45);
  animation: pomoSheetUp 0.22s ease;
}
@keyframes pomoSheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.pomo-new-title { font-family: Syne, sans-serif; font-weight: 700; font-size: var(--fs-md); color: var(--text); margin-bottom: 12px; }
#pomo-new-form .pomo-emoji-picker button, #pomo-new-form .pomo-emoji-opt { min-width: 40px; min-height: 40px; }

/* Ambient pleyer nomi kesilmasin */
#pomo-ambient-bubble-title { max-width: 150px; }
@media (max-width: 480px) {
  #pomo-ambient-bubble { max-width: calc(100% - 90px); }
  #pomo-ambient-bubble-title { max-width: 110px; }
}

/* Sozlamalar oynasi telefonda: tablar tepada, tugmalar sig'adi */
@media (max-width: 560px) {
  #pomo-settings-modal-box .pomo-set-layout { flex-direction: column; min-height: 0 !important; }
  #pomo-settings-modal-box .pomo-set-tabs {
    width: auto !important; flex-direction: row !important; overflow-x: auto; gap: 6px !important;
    padding: 50px 14px 10px !important; border-right: none !important; border-bottom: 1px solid var(--border);
  }
  #pomo-settings-modal-box .pomo-set-tabs .pomo-settings-tab-btn { white-space: nowrap; flex-shrink: 0; }
  #pomo-settings-modal-box .pomo-set-content { padding: 18px 16px !important; max-height: 58vh; }
  #pomo-settings-modal-box .pomo-set-footer { flex-wrap: wrap; gap: 10px; padding: 12px 14px !important; }
  #pomo-settings-modal-box .pomo-set-footer > div { flex: 1; justify-content: flex-end; }
  #pomo-settings-modal-box .pomo-set-footer button { white-space: nowrap; }
}

/* 💎 Desktop o'ng panel: olmos ham tanga kabi to'rtburchak blok */
html.layout-desktop #ds-aside #header-gems-pill { order: 1; }
html.layout-desktop #ds-aside #header-coins-pill { order: 0; }
html.layout-desktop #ds-aside #header-gems-pill {
  width: 100%; justify-content: center; height: auto; padding: 9px !important;
  border-radius: var(--radius-sm); font-size: var(--fs-sm) !important; font-weight: 500;
}
html.layout-desktop #ds-aside #header-gems-pill .gems-pill-icon { font-size: 13px; }
html.layout-desktop #ds-aside #gems-display,
html.layout-desktop #ds-aside .gems-text { font-size: var(--fs-xs) !important; }

/* ============================================================
   🏆 LEADERBOARD — qayta ishlangan dizayn
   ============================================================ */
.rk-view { padding: 4px 0 110px; max-width: 720px; margin: 0 auto; }
.rk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rk-title { flex: 1; font-family: 'Syne', sans-serif; font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.rk-icon-btn {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted);
  font-weight: 700; font-family: Georgia, serif;
}
.rk-icon-btn:hover { border-color: var(--accent); color: var(--text); }

.rk-season {
  width: 100%; display: block; text-align: left; cursor: pointer; margin-bottom: 14px;
  padding: 12px 14px; border-radius: var(--radius-lg); color: inherit; font: inherit;
  border: 1px solid rgba(245,166,35,0.35);
  background: linear-gradient(135deg, rgba(245,166,35,0.14), rgba(124,92,252,0.08));
}
.rk-season-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rk-season-label { font-size: var(--fs-xs); color: var(--text-muted); }
.rk-season-val { font-family: 'Syne', sans-serif; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.rk-prize-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rk-prize-bar span {
  padding: 4px 10px; border-radius: var(--radius-full); font-size: var(--fs-2xs); font-weight: 700;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.rk-prize-bar .rk-prize-n { margin-left: auto; color: var(--text-muted); font-weight: 600; }

.rk-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 10px;
  border-radius: var(--radius-full); background: var(--surface2); border: 1px solid var(--border);
}
.rk-seg .reyting-toggle-btn {
  border: none !important; border-radius: var(--radius-full) !important; background: transparent;
  padding: 9px 10px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rk-seg .reyting-toggle-btn.active { background: var(--accent) !important; color: #fff !important; box-shadow: 0 4px 12px var(--accent-glow); }

.rk-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; padding-bottom: 2px; }
.rk-chips::-webkit-scrollbar { display: none; }
.rk-chips .reyting-toggle-btn, .rk-chips .reyting-subject-pill { flex-shrink: 0; white-space: nowrap; border-radius: var(--radius-full) !important; padding: 8px 14px; }
.rk-chips-sm { margin-bottom: 16px; }
.rk-chips-sm .reyting-subject-pill { padding: 6px 12px; font-size: var(--fs-2xs); }
#reyting-metric-gems.active { border-color: #38BDF8 !important; background: rgba(56,189,248,0.15) !important; }

/* Podium */
.rk-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin: 6px 0 16px; }
.rk-pod {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer;
  padding: 12px 6px 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; min-width: 0;
  background: linear-gradient(180deg, var(--surface2), var(--surface)); border: 1px solid var(--border); border-bottom: none;
}
.rk-pod-1 { border-color: rgba(245,166,35,0.55); background: linear-gradient(180deg, rgba(245,166,35,0.2), var(--surface)); }
.rk-pod-2 { border-color: rgba(192,192,205,0.45); }
.rk-pod-3 { border-color: rgba(205,127,50,0.45); }
.rk-pod.is-me { box-shadow: 0 0 0 2px var(--accent); }
.rk-pod-medal { font-size: 22px; line-height: 1; margin-bottom: 6px; }
.rk-pod-1 .rk-pod-medal { font-size: 28px; }
.rk-pod-av {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-family: 'Syne', sans-serif; font-weight: 700; font-size: var(--fs-lg);
  border: 2px solid var(--border-hover);
}
.rk-pod-1 .rk-pod-av { width: 64px; height: 64px; border-color: var(--gold); box-shadow: 0 0 18px rgba(245,166,35,0.35); }
.rk-pod-av img { width: 100%; height: 100%; object-fit: cover; }
.rk-pod-name { margin-top: 8px; max-width: 100%; font-size: var(--fs-xs); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-pod-flag { min-height: 14px; margin-top: 2px; }
.rk-pod-val { font-family: 'Syne', sans-serif; font-weight: 800; color: var(--gold); font-size: var(--fs-sm); margin-top: 4px; }
.rk-pod-prize { font-size: var(--fs-3xs, 10px); color: var(--green); font-weight: 700; margin-top: 2px; }
.rk-pod-base { width: calc(100% + 12px); margin: 10px -6px 0; border-radius: 6px 6px 0 0; }
.rk-pod-1 .rk-pod-base { height: 34px; background: linear-gradient(180deg, rgba(245,166,35,0.45), rgba(245,166,35,0.15)); }
.rk-pod-2 .rk-pod-base { height: 22px; background: linear-gradient(180deg, rgba(192,192,205,0.4), rgba(192,192,205,0.1)); }
.rk-pod-3 .rk-pod-base { height: 14px; background: linear-gradient(180deg, rgba(205,127,50,0.42), rgba(205,127,50,0.12)); }
.rk-you { font-size: 9px; font-weight: 700; color: var(--accent); background: rgba(124,92,252,0.15); border-radius: var(--radius-full); padding: 1px 6px; }

/* Ro'yxat kartalari */
.rk-list .reyting-card { padding: 10px 12px; border-radius: var(--radius-md); transition: border-color 0.15s, transform 0.15s; }
.rk-list .reyting-card:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.rk-val { font-family: 'Syne', sans-serif; font-size: var(--fs-base); font-weight: 700; color: var(--gold); }
.rk-val-gems { color: #38BDF8; }
.rk-val-sub { font-size: var(--fs-3xs, 10px); color: var(--text-muted); margin-top: 1px; }
.rk-info-formula { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; }
.rk-info-now { font-size: var(--fs-xs); color: var(--text); margin-bottom: 10px; }

/* TOTAL paneli: imkoniyat/to'plangan manbalar bo'yicha */
.lb-src-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin-top: 8px; }
.lb-src { font-size: var(--fs-3xs, 10px); color: var(--text-muted); white-space: nowrap; }
.lb-src b { color: var(--text); font-weight: 700; }
.lb-src.zero { opacity: 0.5; }

/* ============================================================
   👤 PROFIL — tartiblangan va chiroyli ko'rinish
   ============================================================ */
#profile-header-row {
  flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 16px !important;
  padding: 18px !important; border-radius: var(--radius-lg) !important; margin-bottom: 12px !important;
  background: linear-gradient(135deg, rgba(124,92,252,0.16), rgba(56,189,248,0.06)) !important;
  border: 1px solid var(--border) !important; min-height: 0 !important;
}
#profile-header-info { display: flex !important; align-items: center; gap: 16px; text-align: left !important; flex: 1; min-width: 0; }
#profile-header-info #profile-avatar { width: 76px !important; height: 76px !important; flex-shrink: 0; margin: 0 !important; }
#profile-header-text { min-width: 0; }
#profile-name-big { margin: 0 !important; text-align: left; overflow-wrap: anywhere; }
#profile-country-big { text-align: left; }
#profile-subjects-badges, #profile-edit-row { justify-content: flex-start !important; }
#profile-edit-row { margin-top: 8px !important; }

.pf-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.pf-q {
  padding: 10px 8px; border-radius: var(--radius-md); text-align: center; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
}
.pf-q-icon { font-size: 18px; line-height: 1; }
.pf-q-val { font-family: 'Syne', sans-serif; font-weight: 800; font-size: var(--fs-md); color: var(--text); margin-top: 4px; white-space: nowrap; }
.pf-q-val small { font-size: var(--fs-2xs); color: var(--text-muted); font-weight: 600; }
.pf-q-label { font-size: var(--fs-3xs, 10px); color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-q-coins .pf-q-val { color: var(--gold); }
.pf-q-gems .pf-q-val { color: #38BDF8; }
.pf-q-streak .pf-q-val { color: #FB923C; }
.pf-q-level .pf-q-val { color: var(--accent); }
.pf-q-bar { height: 4px; border-radius: 99px; background: var(--surface2); overflow: hidden; margin: 5px 4px 0; }
.pf-q-bar > div { height: 100%; background: linear-gradient(90deg, var(--accent), #38BDF8); border-radius: 99px; }
@media (max-width: 380px) { .pf-quick { grid-template-columns: repeat(2, 1fr); } }

/* Ichki tablar — segment ko'rinishi */
#profile-subtabs {
  padding: 4px; gap: 4px !important; border-radius: var(--radius-full); background: var(--surface2);
  border: 1px solid var(--border); scrollbar-width: none; position: sticky; top: 6px; z-index: 6;
}
#profile-subtabs::-webkit-scrollbar { display: none; }
#profile-subtabs .profile-subtab-btn { flex: 1 0 auto !important; border: none !important; background: transparent; padding: 8px 12px; font-size: var(--fs-sm); }
#profile-subtabs .profile-subtab-btn.active { background: var(--accent) !important; color: #fff !important; box-shadow: 0 4px 12px var(--accent-glow); }

/* Statistika: KPI + bir xil kartalar, kompyuterda 2 ustun */
.pf-kpis { grid-template-columns: repeat(2, 1fr) !important; }
.pf-kpis > div { border-radius: var(--radius-md) !important; }
.pf-kpi { padding: 14px 16px; border-radius: var(--radius-md); }
.pf-kpi-label { font-size: var(--fs-2xs); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; }
.pf-kpi-val { font-family: 'Syne', sans-serif; font-size: var(--fs-2xl, 26px); font-weight: 700; }
.pf-kpi-gems { background: rgba(56,189,248,0.1); border: 1px solid rgba(56,189,248,0.3); }
.pf-kpi-gems .pf-kpi-label, .pf-kpi-gems .pf-kpi-val { color: #38BDF8; }
.pf-kpi-streak { background: rgba(251,146,60,0.1); border: 1px solid rgba(251,146,60,0.3); }
.pf-kpi-streak .pf-kpi-label, .pf-kpi-streak .pf-kpi-val { color: #FB923C; }
@media (min-width: 700px) { .pf-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.pf-kpis > div { min-width: 0; }
#profile-subtab-stats > div { border-radius: var(--radius-lg); }
@media (min-width: 1000px) {
  #profile-subtab-stats:not([style*="display: none"]):not([style*="display:none"]) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
  #profile-subtab-stats > div { margin-bottom: 0 !important; min-width: 0; }
  #profile-subtab-stats > .pf-kpis, #profile-subtab-stats > #pomo-stats-card, #profile-subtab-stats > .xst-reports { grid-column: 1 / -1; }
}

/* ============================================================
   📋 TASKS — qulay va toza karta dizayni
   ============================================================ */
.task-card { position: relative; padding: 12px 12px 12px 14px; gap: 0; }
.task-card.has-label { box-shadow: inset 4px 0 0 var(--tk-label); }
.tk-row { align-items: flex-start; gap: 12px; }
.tk-row > .check-btn { width: 26px; height: 26px; flex-shrink: 0; margin-top: 1px; }
.tk-row .task-info { flex: 1; min-width: 0; }
.tk-row .task-name { font-size: var(--fs-base); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.tk-pin { margin-right: 4px; font-size: 12px; }
.tk-emoji { margin-right: 6px; }
.tk-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tk-chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--radius-full);
  font-size: var(--fs-3xs, 10.5px); font-weight: 600; white-space: nowrap; line-height: 1.6;
  background: var(--surface2); color: var(--text-muted); border: 1px solid transparent;
}
.tk-chip-rep { color: #B48EFF; background: rgba(124,92,252,0.12); }
.tk-chip-diff.d0 { color: var(--text-muted); }
.tk-chip-diff.d1 { color: var(--green); background: rgba(52,211,153,0.12); }
.tk-chip-diff.d2 { color: var(--gold); background: var(--gold-dim); }
.tk-chip-diff.d3 { color: var(--red); background: rgba(248,113,113,0.12); }
.tk-chip-diff.d4 { color: #A78BFA; background: rgba(167,139,250,0.14); }
.tk-chip-coin { color: var(--gold); background: var(--gold-dim); }
.tk-chip-subs { color: var(--info); background: rgba(96,165,250,0.12); }
.tk-chip-subs.all { color: var(--green); background: rgba(52,211,153,0.12); }
.tk-chip-over { color: var(--red); background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.35); }
.tk-chip-info { color: var(--text-muted); }
.tk-chip-skip { color: #FB923C; background: rgba(251,146,60,0.12); }
.tk-more {
  width: 36px !important; height: 36px !important; flex-shrink: 0; border-radius: var(--radius-sm) !important;
  display: inline-flex !important; align-items: center; justify-content: center; font-size: 18px !important;
  background: transparent !important; border: 1px solid var(--border) !important; color: var(--text-muted) !important; margin: 0 !important;
}
.tk-more:hover { border-color: var(--accent) !important; color: var(--text) !important; }
.task-card.done .task-name { text-decoration: line-through; text-decoration-color: var(--text-dim); }
.task-card.done { opacity: 0.55; }
.task-card.skipped { opacity: 0.6; }

/* Sub-tasklar: ichkariga surilgan, yupqa chiziq bilan bog'langan */
.task-card-bottom { margin-top: 10px; padding-left: 38px; }
.task-card-bottom .subtask-wrap { width: 100%; border-left: 2px solid var(--border); padding-left: 10px; }
.task-card .subtask-list { gap: 4px; }
.task-card .subtask-item {
  padding: 6px 8px; border-radius: var(--radius-sm); gap: 8px; min-height: 36px;
  background: transparent; border: 1px solid transparent;
}
.task-card .subtask-item:hover { background: var(--surface2); }
.task-card .subtask-item .subtask-name { flex: 1; min-width: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.task-card .subtask-item.done .subtask-name { text-decoration: line-through; color: var(--text-dim); }
.task-card .subtask-item.skipped { opacity: 1; }
.task-card .subtask-item.skipped .subtask-name { color: var(--text-dim); }
.task-card .subtask-check { width: 20px; height: 20px; flex-shrink: 0; }
.subtask-skip-chip {
  flex-shrink: 0; border: none; cursor: pointer; padding: 2px 8px; border-radius: var(--radius-full);
  font-size: var(--fs-3xs, 10.5px); font-weight: 700; color: #FB923C; background: rgba(251,146,60,0.12);
}
.task-card .subtask-dots-btn { width: 30px; height: 30px; }
.task-card .subtask-progress { display: none; }
.task-card .subtask-done-toggle { margin-top: 4px; }
@media (max-width: 480px) {
  .task-card-bottom { padding-left: 14px; }
}

/* ↩ Undo toast */
.undo-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 2000;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 12px; max-width: min(92vw, 460px);
  padding: 10px 10px 10px 16px; border-radius: var(--radius-full);
  background: #23202f; border: 1px solid var(--border-hover); color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45); transition: opacity 0.2s, transform 0.2s;
}
.undo-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#undo-toast-msg { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#undo-toast-btn {
  flex-shrink: 0; border: none; cursor: pointer; padding: 7px 14px; border-radius: var(--radius-full);
  background: var(--accent); color: #fff; font-weight: 700; font-size: var(--fs-sm);
}
body.light .undo-toast { background: #fff; }
.tk-chip-remind { color: var(--info); background: rgba(96,165,250,0.12); }
.tk-remind-hint { font-size: var(--fs-2xs); color: var(--text-dim); margin-top: 5px; line-height: 1.4; }
.task-card .subtask-item { cursor: grab; }
.task-card .subtask-item.dragging { opacity: 0.6; }
.undo-toast { min-width: min(92vw, 300px); } #undo-toast-msg { flex: 1; }

/* ============================================================
   👥 FRIENDS — qulay va chiroyli qayta dizayn
   ============================================================ */
#friends-modal-box { max-width: 860px !important; border-radius: var(--radius-xl) !important; }
#friends-modal-box .fr-layout { min-height: 520px !important; max-height: 86vh !important; }
#friends-modal-box .fr-nav {
  width: 200px !important; padding: 24px 12px !important; gap: 4px !important;
  background: linear-gradient(180deg, rgba(124,92,252,0.10), transparent 60%);
}
#friends-modal-box .friends-tab-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border-radius: var(--radius-md);
  font-size: var(--fs-sm); font-weight: 600; position: relative;
}
#friends-modal-box .friends-tab-btn.active { background: var(--accent) !important; color: #fff !important; box-shadow: 0 4px 14px var(--accent-glow); }
#friends-modal-box .fr-content { padding: 22px 24px !important; }

/* Mening kartam */
#friends-modal-box .fr-me-card {
  padding: 14px 16px !important; border-radius: var(--radius-lg) !important; gap: 12px !important;
  background: linear-gradient(135deg, rgba(124,92,252,0.20), rgba(56,189,248,0.08)) !important;
  border: 1px solid rgba(124,92,252,0.35) !important; margin-bottom: 12px !important;
}
#friends-modal-box .fr-me-card .friend-avatar { width: 48px; height: 48px; font-size: 22px; }
#friends-my-name { font-size: var(--fs-base) !important; }
#friends-my-id { padding: 6px 10px !important; border-radius: var(--radius-full) !important; letter-spacing: 0.04em; }

/* Statistika qatori */
.fr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.fr-stat { padding: 10px 6px; border-radius: var(--radius-md); background: var(--surface2); border: 1px solid var(--border); text-align: center; min-width: 0; }
.fr-stat-val { font-family: 'Syne', sans-serif; font-weight: 800; font-size: var(--fs-md); color: var(--text); white-space: nowrap; }
.fr-stat-label { font-size: var(--fs-3xs, 10px); color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-stat-gems .fr-stat-val { color: #38BDF8; }

/* Do'st kartasi */
#friends-modal-box .friend-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border); transition: border-color 0.15s, transform 0.15s;
}
#friends-modal-box .friend-card:hover { border-color: var(--border-hover); transform: translateY(-1px); }
#friends-modal-box .friend-card-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
#friends-modal-box .friend-avatar { width: 44px; height: 44px; flex-shrink: 0; }
#friends-modal-box .friend-name { font-size: var(--fs-base); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#friends-modal-box .friend-sub { font-size: var(--fs-2xs); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-on { color: var(--green); font-weight: 600; }
.fr-off { color: var(--text-dim); }
#friends-modal-box .friend-card-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: nowrap; }
.fr-act {
  width: 40px; height: 40px; border-radius: var(--radius-md); cursor: pointer; font-size: 16px;
  background: var(--surface2); border: 1px solid var(--border); transition: border-color 0.15s, transform 0.15s;
}
.fr-act:hover { border-color: var(--accent); transform: translateY(-1px); }
.fr-act-duel { background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.35); }
#friends-modal-box .friend-req-btn { min-height: 38px; border-radius: var(--radius-md); font-weight: 700; padding: 8px 14px; }
#friends-modal-box .friend-card[style*="flex-direction:column"] { align-items: stretch !important; }

/* Chorlov progress chiziqlari */
#friends-modal-box .duel-vs-bar { display: flex; align-items: center; gap: 8px; }
#friends-modal-box .duel-progress-track { flex: 1; height: 8px; border-radius: 99px; background: var(--surface2); overflow: hidden; }
#friends-modal-box .duel-progress-fill { height: 100%; border-radius: 99px; }

/* Bo'lim sarlavhalari */
#friends-modal-box [data-i18n$="_title"][style*="text-transform:uppercase"],
#friends-modal-box [data-i18n$="_title"][style*="letter-spacing"] { font-weight: 700; margin-top: 6px; }

/* 📱 Telefon: to'liq ekran, tablar tepada */
@media (max-width: 640px) {
  #friends-modal-overlay { padding: 0 !important; align-items: stretch !important; }
  #friends-modal-box { max-width: none !important; width: 100% !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; }
  #friends-modal-box .fr-layout { flex-direction: column; min-height: 0 !important; max-height: none !important; height: 100%; }
  #friends-modal-box .fr-nav {
    width: auto !important; flex-direction: row !important; align-items: center; overflow-x: auto; flex-shrink: 0;
    padding: 14px 56px 10px 12px !important; border-right: none !important; border-bottom: 1px solid var(--border); scrollbar-width: none;
  }
  #friends-modal-box .fr-nav::-webkit-scrollbar { display: none; }
  #friends-modal-box .fr-nav > div[data-i18n="friends_modal_title"] { display: none; }
  #friends-modal-box .fr-nav > div[style*="height:1px"] { display: none; }
  #friends-modal-box .friends-tab-btn { width: auto !important; flex-shrink: 0; white-space: nowrap; padding: 8px 12px; }
  #friends-modal-box .fr-content { padding: 14px !important; flex: 1; overflow-y: auto; }
  .fr-stats { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .fr-stat-val { font-size: var(--fs-sm); }
}
@media (max-width: 640px) {
  #friends-modal-box .friend-card:not([style*="flex-direction:column"]) { flex-wrap: nowrap !important; }
  #friends-modal-box .friend-card:not([style*="flex-direction:column"]) .friend-card-actions { width: auto !important; margin: 0 !important; }
  #friends-modal-box .friend-card:not([style*="flex-direction:column"]) .friend-card-actions .friend-req-btn { flex: 0 0 auto; }
}

/* ⌨️ Klaviatura yorliqlari */
.task-card.kb-focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.kb-help-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; padding: 20px; }
.kb-help-box { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border-hover); border-radius: var(--radius-xl); padding: 20px; }
.kb-help-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: var(--fs-md); margin-bottom: 12px; color: var(--text); }
.kb-help-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-muted); }
.kb-help-row kbd { min-width: 72px; text-align: center; padding: 3px 8px; border-radius: 6px; background: var(--surface2); border: 1px solid var(--border-hover); color: var(--text); font-family: ui-monospace, monospace; font-size: var(--fs-xs); }
.kb-help-close { width: 100%; margin-top: 14px; padding: 10px; border: none; border-radius: var(--radius-md); background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; }

/* 🎯 Kvestlar */
.quests-card { margin-bottom: 12px; border-radius: var(--radius-lg); border: 1px solid rgba(124,92,252,0.3); background: linear-gradient(135deg, rgba(124,92,252,0.12), rgba(56,189,248,0.05)); padding: 4px 12px 8px; }
.quests-card:empty { display: none; }
.mq-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 2px; background: none; border: none; cursor: pointer; color: var(--text); text-align: left; }
.mq-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: var(--fs-base); }
.mq-sum { flex: 1; font-size: var(--fs-xs); color: var(--text-muted); }
.mq-sum b { color: var(--green); }
.mq-caret { color: var(--text-muted); }
.mq-group-title { font-size: var(--fs-3xs, 10px); color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; margin: 6px 2px 6px; }
.mq-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); margin-bottom: 6px; }
.mq-row.is-done { border-color: rgba(52,211,153,0.5); }
.mq-row.is-claimed { opacity: 0.6; }
.mq-icon { font-size: 18px; width: 26px; text-align: center; flex-shrink: 0; }
.mq-body { flex: 1; min-width: 0; }
.mq-text { font-size: var(--fs-sm); color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.mq-bar { height: 5px; border-radius: 99px; background: var(--surface2); overflow: hidden; margin-top: 5px; }
.mq-bar > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), #38BDF8); }
.mq-row.is-done .mq-bar > div { background: var(--green); }
.mq-prog { font-size: var(--fs-3xs, 10px); color: var(--text-muted); margin-top: 3px; }
.mq-reward { font-size: var(--fs-2xs); font-weight: 700; color: #38BDF8; white-space: nowrap; }
.mq-claim { border: none; cursor: pointer; padding: 7px 12px; border-radius: var(--radius-full); background: var(--green); color: #06251A; font-weight: 800; font-size: var(--fs-xs); white-space: nowrap; animation: mqPulse 1.6s ease-in-out infinite; }
@keyframes mqPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.5); } 50% { box-shadow: 0 0 0 6px rgba(52,211,153,0); } }
.mq-claimed { color: var(--green); font-weight: 800; }

/* ❄️ Freeze sotib olish */
.freeze-buy-btn { width: 100%; margin-bottom: 8px; padding: 10px; border-radius: var(--radius-md); cursor: pointer; font-weight: 700; border: 1px solid rgba(56,189,248,0.4); background: rgba(56,189,248,0.1); color: #38BDF8; }
.gems-freeze { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: var(--radius-md); margin-bottom: 10px; border: 1px solid rgba(56,189,248,0.3); background: rgba(56,189,248,0.06); }
.gems-freeze .rw-btn { flex-shrink: 0; }
.gems-freeze .rw-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* 🏅 Ligalar */
.rk-seg { grid-template-columns: repeat(3, 1fr) !important; }
.rk-league-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.rk-league-badge { padding: 5px 12px; border-radius: var(--radius-full); font-weight: 800; font-size: var(--fs-xs); background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(245,166,35,0.35); }
.rk-league-next { font-size: var(--fs-2xs); color: var(--text-muted); }

/* 📅 Haftalik hisobot */
.wr-open-btn { width: 100%; margin-bottom: 10px; padding: 11px; border-radius: var(--radius-md); cursor: pointer; font-weight: 700; color: var(--text); background: linear-gradient(135deg, rgba(124,92,252,0.18), rgba(56,189,248,0.08)); border: 1px solid rgba(124,92,252,0.35); }
.wr-overlay { position: fixed; inset: 0; z-index: 2500; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; padding: 18px; }
.wr-box { width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-hover); border-radius: var(--radius-xl); padding: 20px; }
.wr-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: var(--fs-lg); color: var(--text); }
.wr-sub { font-size: var(--fs-xs); color: var(--text-muted); margin: 2px 0 14px; }
.wr-bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding: 6px 4px; border-radius: var(--radius-md); background: var(--surface2); margin-bottom: 12px; }
.wr-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.wr-bar-v { font-size: 10px; color: var(--text-muted); min-height: 13px; }
.wr-bar-fill { width: 70%; border-radius: 4px 4px 0 0; background: var(--accent); }
.wr-bar.best .wr-bar-fill { background: var(--gold); }
.wr-bar-l { font-size: 10px; color: var(--text-dim); margin-top: 4px; }
.wr-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.wr-tile { padding: 10px 6px; border-radius: var(--radius-md); background: var(--surface2); text-align: center; }
.wr-tile-v { font-family: 'Syne', sans-serif; font-weight: 800; color: var(--text); }
.wr-tile-l { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.wr-msg { font-size: var(--fs-sm); color: var(--text); text-align: center; margin-bottom: 14px; line-height: 1.5; }
.wr-ok { width: 100%; padding: 12px; border: none; border-radius: var(--radius-md); background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; }

/* 🌳 Pomodoro daraxti */
.pomo-tree { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: -14px 0 22px; position: relative; z-index: 1; }
.pomo-tree-plant { font-size: calc(26px * var(--g, 1)); line-height: 1; transition: font-size 0.6s ease; }
.pomo-tree-plant.growing { animation: pomoTreeSway 3s ease-in-out infinite; display: inline-block; transform-origin: bottom center; }
@keyframes pomoTreeSway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.pomo-tree-text { font-size: var(--fs-xs); color: rgba(255,255,255,0.7); }
.pomo-forest { font-size: 14px; letter-spacing: 1px; padding: 3px 10px; border-radius: var(--radius-full); background: rgba(52,211,153,0.15); color: #fff; }

/* 💾 Avtomatik nusxalar */
.auto-snapshots { margin-top: 12px; }
.snap-title { font-size: var(--fs-2xs); color: var(--text-dim); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; }
.snap-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--surface2); margin-bottom: 5px; font-size: var(--fs-xs); color: var(--text); }
.snap-row button { padding: 5px 12px; border-radius: var(--radius-full); border: 1px solid var(--border-hover); background: transparent; color: var(--text); cursor: pointer; font-size: var(--fs-2xs); font-weight: 700; }
.snap-empty { font-size: var(--fs-xs); color: var(--text-dim); }

/* ☁️ Sinxronizatsiya belgisi */
.sync-pill { display: inline-flex; align-items: center; margin-top: 4px; padding: 2px 9px; border-radius: var(--radius-full); font-size: 10.5px; font-weight: 600; background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); }
.sync-pill:empty { display: none; }
.sync-ok { color: var(--green); border-color: rgba(52,211,153,0.35); }
.sync-pending { color: var(--gold); border-color: rgba(245,166,35,0.35); }
.sync-offline { color: var(--red); border-color: rgba(248,113,113,0.35); }

/* ⌨️ Yorliqlarni sozlash */
.kbs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin: 10px 0; }
.kbs-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface2); }
.kbs-label { font-size: var(--fs-sm); color: var(--text); }
.kbs-key { min-width: 64px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border-hover); background: var(--surface); color: var(--text); font-family: ui-monospace, monospace; font-weight: 700; cursor: pointer; }
.kbs-key.capturing { border-color: var(--accent); color: var(--accent); animation: mqPulse 1.4s ease-in-out infinite; font-family: inherit; font-size: var(--fs-2xs); }
.kbs-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kbs-btn { flex: 1; min-width: 140px; padding: 10px; border-radius: var(--radius-md); border: 1px solid var(--border-hover); background: transparent; color: var(--text); cursor: pointer; font-weight: 600; }
.kb-help-hint { font-size: var(--fs-2xs); color: var(--text-dim); margin-top: 10px; }

/* 🕒 Vaqt bloklari */
.tk-time-row { display: flex; align-items: center; gap: 8px; }
.tk-time-row input { flex: 1; }
.tk-time-sep { color: var(--text-muted); }
.tk-time-check { display: flex !important; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-sm); color: var(--text-muted); text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; }
.tk-time-check input { width: 18px; height: 18px; }
#time-view-btn.active { border-color: var(--accent); background: rgba(124,92,252,0.16); color: var(--text); }
.tk-time-col {
  flex-shrink: 0; width: 52px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 2px; font-variant-numeric: tabular-nums; border-right: 2px solid var(--border); margin-right: 2px;
}
.tk-time-col b { font-family: 'Syne', sans-serif; font-size: var(--fs-sm); color: var(--text); }
.tk-time-col span { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; }
.task-card.tk-now { border-color: rgba(52,211,153,0.6); box-shadow: 0 0 0 1px rgba(52,211,153,0.35), 0 8px 22px rgba(52,211,153,0.12); }
.task-card.tk-now .tk-time-col { border-right-color: var(--green); }
.task-card.tk-now .tk-time-col b { color: var(--green); }
.task-card.tk-time-missed { opacity: 0.5; filter: grayscale(0.35); }
.task-card.tk-time-missed:hover { opacity: 0.85; }
.tk-chip-now { color: var(--green); background: rgba(52,211,153,0.14); border-color: rgba(52,211,153,0.35); }
.tk-chip-dur { color: var(--text-muted); }
@media (max-width: 520px) {
  #view-tasks .search-wrap { flex-wrap: wrap; }
  #view-tasks .search-wrap .search-bar { flex: 1 1 100%; min-width: 0; }
  #view-tasks .search-wrap .all-toggle { flex: 1 1 0; justify-content: center; }
  #view-tasks .search-wrap .search-icon { top: 23px !important; transform: translateY(-50%) !important; }
}

/* 📐 Notebook rejimi 900–1199px (planshet/kichik noutbuk): yon panellar torroq */
@media (min-width: 900px) and (max-width: 1199px) {
  html.layout-desktop .wrapper { max-width: none; margin: 0; padding: 16px 16px 56px; }
  html.layout-desktop #ds-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--ds-sidebar-w, 176px);
    margin: 0; border-radius: 0; border-right: 1px solid var(--border); border-top: none; border-left: none; border-bottom: none;
    padding: 14px 10px; overflow-y: auto; z-index: 30;
  }
  html.layout-desktop #ds-aside {
    position: fixed; top: 0; right: 0; bottom: 0; width: var(--ds-aside-w, 210px);
    margin: 0; border-radius: 0; border-left: 1px solid var(--border); border-top: none; border-right: none; border-bottom: none;
    padding: 14px 10px; overflow-y: auto; z-index: 30;
  }
  body.layout-shell-ready { padding-left: var(--ds-sidebar-w, 176px); padding-right: var(--ds-aside-w, 210px); }
  html.layout-desktop .stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* 📅 Kun jadvali (timeline) */
.tb-timeline { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 12px 14px; margin: 18px 0 14px; }
.tbl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tbl-title { font-weight: 700; font-size: var(--fs-md); color: var(--text); }
.tbl-sum { display: flex; gap: 10px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-muted); }
.tbl-sum b { color: var(--text); }
.tbl-grid { position: relative; margin-left: 48px; }
.tbl-hour { position: absolute; left: -48px; right: 0; border-top: 1px dashed var(--border); height: 0; }
.tbl-hour span { position: absolute; left: 0; top: -8px; font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; background: var(--surface); padding-right: 4px; }
.tbl-gap { position: absolute; left: 2px; right: 2px; border: 1.5px dashed color-mix(in srgb, #22c55e 45%, transparent); background: color-mix(in srgb, #22c55e 7%, transparent); border-radius: 10px; color: #16a34a; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; font-family: inherit; }
.tbl-gap:hover { background: color-mix(in srgb, #22c55e 14%, transparent); }
.tbl-block { --tbl-c: var(--accent); position: absolute; z-index: 2; display: flex; align-items: flex-start; gap: 6px; padding: 5px 7px; border-radius: 10px; background: color-mix(in srgb, var(--tbl-c) 18%, var(--surface)); border-left: 4px solid var(--tbl-c); box-shadow: 0 1px 3px rgba(0,0,0,.12); cursor: grab; user-select: none; overflow: hidden; box-sizing: border-box; transition: box-shadow .15s; }
.tbl-block:hover { box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.tbl-block.dragging { cursor: grabbing; z-index: 4; opacity: .92; box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: none; }
.tbl-block.now { outline: 2px solid var(--tbl-c); }
.tbl-block.done { opacity: .55; }
.tbl-block.done .tbl-b-name { text-decoration: line-through; }
.tbl-block.missed { opacity: .5; filter: grayscale(.6); }
.tbl-block.skipped { opacity: .45; }
.tbl-grip { touch-action: none; cursor: grab; color: var(--text-dim); font-size: 14px; line-height: 1; padding: 2px 2px; flex-shrink: 0; }
.tbl-b-main { min-width: 0; flex: 1; }
.tbl-b-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-b-time { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tbl-block.short { align-items: center; padding-top: 2px; padding-bottom: 2px; }
.tbl-block.short .tbl-b-main { display: flex; gap: 6px; align-items: baseline; }
.tbl-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; cursor: ns-resize; touch-action: none; }
.tbl-resize::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 26px; height: 3px; margin-left: -13px; border-radius: 2px; background: color-mix(in srgb, var(--tbl-c) 60%, transparent); opacity: .7; }
.tbl-now { position: absolute; left: -6px; right: 0; height: 0; border-top: 2px solid #ef4444; z-index: 3; pointer-events: none; }
.tbl-now::before { content: ''; position: absolute; left: -4px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; }
.tbl-now span { position: absolute; right: 0; top: -18px; font-size: 10px; font-weight: 700; color: #fff; background: #ef4444; border-radius: 6px; padding: 1px 5px; }
.tbl-empty { text-align: center; font-size: var(--fs-sm); color: var(--text-dim); margin-top: 10px; }
.tk-chip-ontime { background: color-mix(in srgb, #22c55e 16%, transparent); color: #16a34a; }

/* 👤 Profil belgisi endi Lv tugmasi ichida — alohida doira-tugma kerak emas */
#profile-nav-btn { display: none !important; }
#level-icon { filter: grayscale(.15); }

.tbl-head { user-select: none; }
.tbl-caret { font-size: 12px; color: var(--text-muted); }
.tb-timeline.collapsed { padding-bottom: 6px; }
.tb-timeline.collapsed .tbl-head { margin-bottom: 0; }

/* 🔐 Shaxsiy nazorat — qayta dizayn */
.pc-wrap { display: flex; flex-direction: column; gap: 12px; }
.pc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-title { font-family: Syne, sans-serif; font-size: var(--fs-xl); font-weight: 700; color: var(--text); }
.pc-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.pc-head-btns { display: flex; gap: 6px; }
.pc-icon { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 16px; }
.pc-icon:hover { border-color: var(--accent); }
.pc-hero { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: var(--radius-lg); border: 1px solid rgba(52,211,153,0.25); background: radial-gradient(circle at 15% 30%, rgba(52,211,153,0.16), transparent 60%), var(--surface); }
.pc-ring { position: relative; width: 112px; height: 112px; flex-shrink: 0; }
.pc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pc-ring circle { fill: none; stroke-width: 9; }
.pc-ring .bg { stroke: rgba(52,211,153,0.14); }
.pc-ring .fg { stroke: #34D399; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 6px rgba(52,211,153,.5)); }
.pc-ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pc-ring-in b { font-family: Syne, sans-serif; font-size: 34px; line-height: 1; color: #34D399; }
.pc-ring-in span { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }
.pc-hero-r { flex: 1; min-width: 0; }
.pc-tier { font-weight: 700; color: var(--text); font-size: var(--fs-md, 15px); }
.pc-next { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.pc-next b { color: #34D399; }
.pc-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.pc-mini > div { background: var(--surface2); border-radius: 12px; padding: 7px 4px; text-align: center; }
.pc-mini b { display: block; font-size: var(--fs-base); color: var(--text); font-family: Syne, sans-serif; }
.pc-mini span { font-size: 10px; color: var(--text-muted); }
.pc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
.pc-card-t { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: .05em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
.pc-det > summary { margin: 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.pc-det > summary::-webkit-details-marker { display: none; }
.pc-det > summary::after { content: '▾'; transition: transform .2s; }
.pc-det:not([open]) > summary::after { transform: rotate(-90deg); }
.pc-log-top { display: flex; justify-content: space-between; align-items: center; }
.pc-log-date { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: .05em; font-weight: 700; }
.pc-q { font-size: var(--fs-lg); font-weight: 700; color: var(--text); margin: 8px 0 12px; font-family: Syne, sans-serif; }
.pc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px; border-radius: 16px; cursor: pointer; font-family: inherit; transition: transform .12s, box-shadow .2s; }
.pc-btn:active { transform: scale(.96); }
.pc-btn.ok { border: 2px solid rgba(52,211,153,0.4); background: rgba(52,211,153,0.1); color: #34D399; }
.pc-btn.ok:hover { box-shadow: 0 6px 20px rgba(52,211,153,0.25); }
.pc-btn.bad { border: 2px solid rgba(248,113,113,0.35); background: rgba(248,113,113,0.08); color: #F87171; }
.pc-btn.bad:hover { box-shadow: 0 6px 20px rgba(248,113,113,0.2); }
.pc-btn-e { font-size: 30px; }
.pc-btn b { font-size: var(--fs-base); }
.pc-btn i { font-style: normal; font-size: var(--fs-xs); opacity: .8; font-weight: 700; }
.pc-done { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px; border-radius: 14px; }
.pc-done.ok { background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.3); }
.pc-done.bad { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.3); }
.pc-done-e { font-size: 30px; }
.pc-done-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-done-t b { color: var(--text); font-size: var(--fs-sm); }
.pc-done-t span { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.pc-edit, .pc-sbtn { padding: 7px 11px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: var(--fs-xs); cursor: pointer; font-family: inherit; white-space: nowrap; }
.pc-sbtn { color: var(--text); padding: 9px; }
.pc-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.pc-wd { text-align: center; font-size: 10px; color: var(--text-muted); font-weight: 600; }
.pc-day { aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-dim); background: var(--surface2); font-weight: 600; max-width: 42px; justify-self: center; width: 100%; }
.pc-day.ok { background: #34D399; color: #064e3b; }
.pc-day.bad { background: #F87171; color: #450a0a; }
.pc-day.bad2 { background: #FF8C00; color: #431407; }
.pc-day.today { box-shadow: 0 0 0 2px var(--accent); }
.pc-day.active:not(.ok):not(.bad):not(.bad2) { box-shadow: 0 0 0 2px #34D399 inset; color: var(--text); animation: pcPulse 1.6s ease-in-out infinite; }
@keyframes pcPulse { 50% { box-shadow: 0 0 0 2px rgba(52,211,153,.3) inset; } }
.pc-trend { display: flex; align-items: center; justify-content: space-around; }
.pc-trend > div:not(.pc-trend-arrow) { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.pc-trend span { font-size: 10.5px; color: var(--text-muted); }
.pc-trend b { font-size: var(--fs-xl); font-family: Syne, sans-serif; color: var(--text); }
.pc-trend-arrow { font-size: var(--fs-2xl); }
.pc-trend-bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; margin: 12px 0 8px; }
.pc-trend-bars i { height: 8px; border-radius: 4px; background: var(--surface2); }
.pc-trend-bars i.ok { background: #34D399; }
.pc-trend-bars i.bad { background: #F87171; }
.pc-trend-bars i.sep { margin-right: 4px; }
.pc-trend-msg { text-align: center; font-size: var(--fs-sm); font-weight: 600; }
.pc-hist-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; margin-top: 10px; }
.pc-hist { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--surface2); border-radius: 10px; font-size: var(--fs-sm); color: var(--text); }
.pc-hist.ok b { color: #34D399; } .pc-hist.bad b { color: #F87171; }
.pc-empty { color: var(--text-dim); font-size: var(--fs-sm); text-align: center; padding: 12px 0; }
@media (max-width: 380px) { .pc-hero { flex-direction: column; text-align: center; } }

@media (max-width: 560px) { #header-secret-btn { padding: 0 10px !important; } #header-secret-btn .hs-lbl { display: none; } }

/* 💸 Qarz jazosi turlari */
.dm-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dm-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px; border-radius: var(--radius-md); border: 1.5px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
.dm-opt:hover { border-color: var(--border-hover); }
.dm-opt.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); }
.dm-opt.dis { opacity: .45; cursor: not-allowed; }
.dm-ic { font-size: 24px; width: 40px; height: 40px; border-radius: 12px; background: var(--surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dm-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dm-tx b { font-size: var(--fs-sm); }
.dm-tx span { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
.dm-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-hover); flex-shrink: 0; }
.dm-opt.sel .dm-radio { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--surface2); background: var(--accent); }
.dm-note { font-size: var(--fs-xs); color: var(--gold); text-align: center; margin-top: 2px; }
.dm-tasks { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.dm-tasks-lbl { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }
.dm-tasks textarea { width: 100%; box-sizing: border-box; padding: 10px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface2); color: var(--text); font: inherit; font-size: var(--fs-sm); resize: vertical; }

/* 📅 Kalendar — yumshoq katakchalar */
#cal-grid { gap: 5px !important; }
.calx-day { --cc: transparent; position: relative; aspect-ratio: 1; max-height: 52px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; overflow: hidden;
  background: color-mix(in srgb, var(--cc) 18%, var(--surface2)); border: 1.5px solid color-mix(in srgb, var(--cc) 55%, transparent); transition: transform .12s; }
.calx-day:not(.future):hover { transform: translateY(-1px); }
.calx-day.future { background: transparent; border-color: transparent; opacity: .4; }
.calx-day.empty { background: var(--surface2); border-color: transparent; opacity: .55; }
.calx-day.today { box-shadow: 0 0 0 2px var(--accent); }
.calx-day.perfect { background: color-mix(in srgb, var(--cc) 30%, var(--surface2)); }
.calx-num { font-size: var(--fs-xs); font-weight: 700; color: var(--text); line-height: 1; }
.calx-day.future .calx-num, .calx-day.empty .calx-num { color: var(--text-dim); font-weight: 500; }
.calx-coin { font-size: 8.5px; line-height: 1; font-weight: 700; color: var(--green, #34D399); }
.calx-coin.neg { color: var(--red, #F87171); }
.calx-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--cc); border-radius: 0 3px 0 0; }
.calx-mood { position: absolute; top: 1px; right: 2px; font-size: 10px; line-height: 1; }
.calx-sum { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; background: none !important; padding: 0 !important; }
.calx-sum > div { background: var(--surface2); border-radius: 12px; padding: 8px 4px; text-align: center; }
.calx-sum b { display: block; font-family: Syne, sans-serif; font-size: var(--fs-base); color: var(--text); }
.calx-sum span { font-size: 10px; color: var(--text-muted); font-weight: 500; }

/* ✨ Kayfiyat kundaligi — yangi ko'rinish */
#mood-cal-grid { gap: 5px !important; }
.moodx-wd { text-align: center; font-size: 10px; color: var(--text-dim); font-weight: 600; padding-bottom: 2px; }
.moodx-wd.sun { color: var(--accent); }
.moodx-day { position: relative; aspect-ratio: 1; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--surface2); border: 1.5px solid transparent; cursor: pointer; transition: transform .12s, border-color .15s; min-height: 38px; }
.moodx-day:hover:not(.fut) { transform: translateY(-1px); border-color: var(--border-hover); }
.moodx-day.fut { background: transparent; opacity: .35; cursor: default; }
.moodx-n { font-size: 10px; color: var(--text-muted); line-height: 1; font-weight: 600; }
.moodx-day.has .moodx-n { position: absolute; top: 3px; left: 5px; font-size: 8.5px; }
.moodx-e { font-size: 20px; line-height: 1; }
.moodx-day.pos { background: rgba(52,211,153,0.16); }
.moodx-day.neu { background: rgba(250,204,21,0.12); }
.moodx-day.neg { background: rgba(248,113,113,0.16); }
.moodx-day.note::after { content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.moodx-day.today { border-color: var(--accent); }
.moodx-day.target { box-shadow: 0 0 0 2px var(--accent), 0 4px 14px rgba(124,92,252,0.3); }
.moodx-stats { margin-top: 12px; }
.moodx-st-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.moodx-st-row > div { background: var(--surface2); border-radius: 12px; padding: 8px 4px; text-align: center; }
.moodx-st-row b { display: block; font-size: var(--fs-base); color: var(--text); font-family: Syne, sans-serif; }
.moodx-st-row span { font-size: 10px; color: var(--text-muted); }
.moodx-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; margin-top: 10px; background: var(--surface2); gap: 2px; }
.moodx-bar i { display: block; }
.moodx-bar i.pos { background: #34D399; } .moodx-bar i.neu { background: #FACC15; } .moodx-bar i.neg { background: #F87171; }
.moodx-top { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; justify-content: center; }
.moodx-top span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--surface2); color: var(--text); }

.tbl-zoom { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.tbl-zoom button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.tbl-zoom button:hover { border-color: var(--accent); }
.tbl-zoom b { font-size: 11px; color: var(--text-muted); min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
.tbl-hour span { cursor: ns-resize; }

/* 📊 Bugungi statistika kartalari faqat Vazifalar sahifasida (boshqa sahifalarda takrorlanmasin) */
html[data-tab]:not([data-tab="tasks"]) .wrapper > .stats,
html[data-tab]:not([data-tab="tasks"]) .wrapper > #progress-wrap-block,
html[data-tab]:not([data-tab="tasks"]) .wrapper > #done-panel,
html[data-tab]:not([data-tab="tasks"]) .wrapper > #label-breakdown-panel,
html[data-tab]:not([data-tab="tasks"]) .wrapper > #streak-milestones { display: none !important; }

/* 📌 Kun jadvali eslatmalari (vazifa emas) */
.tbl-grid { cursor: cell; }
.tbl-gap { cursor: pointer; }
.tbl-note { --tbl-c: var(--text-muted); position: absolute; z-index: 2; display: flex; align-items: flex-start; padding: 5px 8px; border-radius: 10px; box-sizing: border-box; overflow: hidden; cursor: pointer; user-select: none; -webkit-user-select: none;
  border: 1.5px dashed color-mix(in srgb, var(--tbl-c) 65%, transparent);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--tbl-c) 16%, var(--surface)) 0 7px, color-mix(in srgb, var(--tbl-c) 6%, var(--surface)) 7px 14px); }
.tbl-note:hover { border-style: solid; }
.tbl-note .tbl-b-name { font-style: italic; }
.tbl-n-pin { font-size: 11px; margin-right: 4px; font-style: normal; }
.tbl-note.now { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tbl-c) 45%, transparent); }
.tbl-note.past { opacity: .55; }
.tbl-note.short { align-items: center; padding-top: 1px; padding-bottom: 1px; }
.tbl-note.short .tbl-b-main { display: flex; gap: 6px; align-items: baseline; }
.tbl-note.short .tbl-b-name { flex: 0 1 auto; min-width: 0; }
.tbl-note.short .tbl-b-time { flex: 0 100 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-zoom .tbl-addnote { width: auto; padding: 0 7px; font-size: 12px; margin-right: 4px; }
.tbl-empty-add { margin-top: 10px; padding: 8px 14px; border-radius: 10px; border: 1.5px dashed var(--border); background: var(--surface2); color: var(--text); font-size: var(--fs-sm); font-family: inherit; cursor: pointer; }
.tbl-empty-add:hover { border-color: var(--accent); }
.tbn-ov { position: fixed; inset: 0; z-index: 450; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tbn-box { width: 100%; max-width: 380px; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl, 18px); padding: 18px 16px 14px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.tbn-title { font-weight: 700; font-size: var(--fs-lg); color: var(--text); }
.tbn-sub { font-size: var(--fs-xs); color: var(--text-muted); margin: 3px 0 12px; }
.tbn-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 16px; font-family: inherit; }
.tbn-input:focus, .tbn-times input:focus { outline: none; border-color: var(--accent); }
.tbn-times { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.tbn-times label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--text-muted); }
.tbn-times input { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 16px; font-family: inherit; min-width: 0; }
.tbn-dash { padding-bottom: 9px; color: var(--text-dim); }
.tbn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tbn-row[hidden] { display: none; }
.tbn-row button { border: 1px solid var(--border); background: var(--surface2); color: var(--text); border-radius: 9px; cursor: pointer; font-family: inherit; }
.tbn-row button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--surface2)); }
.tbn-emojis button { width: 34px; height: 34px; font-size: 17px; padding: 0; }
.tbn-colors button { width: 26px; height: 26px; border-radius: 50%; padding: 0; background: var(--c); }
.tbn-colors button.none { background: repeating-linear-gradient(135deg, var(--surface2) 0 4px, var(--border) 4px 6px); }
.tbn-colors button.on { outline: 2px solid var(--text); outline-offset: 2px; background: var(--c); }
.tbn-colors button.none.on { background: repeating-linear-gradient(135deg, var(--surface2) 0 4px, var(--border) 4px 6px); }
.tbn-reps button, .tbn-days button { padding: 6px 10px; font-size: var(--fs-xs); }
.tbn-days button { min-width: 38px; }
.tbn-err { color: var(--red, #ef4444); font-size: var(--fs-xs); min-height: 16px; margin-top: 8px; }
.tbn-actions { display: flex; gap: 8px; margin-top: 6px; }
.tbn-actions button { padding: 10px 12px; border-radius: 10px; font-size: var(--fs-sm); font-family: inherit; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-muted); }
.tbn-actions .tbn-save { flex: 1; border: none; background: var(--accent); color: #fff; font-weight: 600; }
.tbn-actions .tbn-del { color: var(--red, #ef4444); border-color: color-mix(in srgb, var(--red, #ef4444) 45%, transparent); }
.tbn-actions .tbn-del, .tbn-actions .tbn-astask { margin-right: auto; }

/* 📅 Kun jadvali v2 — kun navigatsiyasi, sudrash/cho'zish, yonma-yon ustunlar, vaqtsizlar tokchasi */
.tb-timeline { position: relative; }
.tbl-tools { display: flex; align-items: center; gap: 6px; }
.tbl-title { background: none; border: none; padding: 2px 0; margin: 0; font: inherit; font-weight: 700; font-size: var(--fs-md); color: var(--text); cursor: pointer; text-align: left; min-width: 0; }
.tbl-title-d { font-weight: 500; color: var(--text-muted); font-size: var(--fs-xs); }
.tbl-seg { display: inline-flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 2px; gap: 2px; }
.tbl-seg button { border: none; background: none; color: var(--text-muted); font-size: 12px; font-family: inherit; padding: 4px 9px; border-radius: 8px; cursor: pointer; min-height: 26px; }
.tbl-seg button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.tbl-ib { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.tbl-ib:hover, .tbl-nb:hover { border-color: var(--accent); }
.tb-timeline.menu-open .tbl-ib[data-act="menu"] { border-color: var(--accent); color: var(--accent); }
.tbl-nav { display: flex; align-items: center; gap: 6px; margin-top: 10px; position: relative; }
.tbl-nb { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 0 2px; }
.tbl-dl { flex: 1; min-width: 0; border: none; background: none; color: var(--text); font: inherit; font-weight: 700; font-size: var(--fs-sm); padding: 7px 6px; border-radius: 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-dl:hover { background: var(--surface2); }
.tbl-dl-i { font-size: 10px; color: var(--text-muted); }
.tbl-dinput { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.tbl-today { flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.tbl-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.tbl-sd { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 0 5px; border-radius: 11px; border: 1px solid transparent; background: var(--surface2); color: var(--text-muted); font-family: inherit; cursor: pointer; min-width: 0; }
.tbl-sd span { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; }
.tbl-sd b { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.tbl-sd i { display: flex; gap: 2px; height: 4px; }
.tbl-sd i em { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.tbl-sd.today { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.tbl-sd.today b { color: var(--accent); }
.tbl-sd.past { opacity: .72; }
.tbl-sd.sel { background: var(--accent); border-color: var(--accent); opacity: 1; }
.tbl-sd.sel span, .tbl-sd.sel b { color: #fff; }
.tbl-sd.sel i em { background: #fff; }
.tb-timeline .tbl-sum { margin-top: 10px; gap: 6px; }
.tb-timeline .tbl-sum > span { background: var(--surface2); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.tbl-sum .tbl-sum-warn { color: #d97706; background: color-mix(in srgb, #f59e0b 14%, transparent) !important; }
.tbl-tray { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-width: 0; }
.tbl-tray-t { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.tbl-tray-list { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; padding: 2px; scrollbar-width: none; }
.tbl-tray-list::-webkit-scrollbar { display: none; }
.tbl-chip { --tbl-c: var(--accent); flex-shrink: 0; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 11px; border-radius: 999px; border: 1.5px dashed color-mix(in srgb, var(--tbl-c) 60%, transparent); background: color-mix(in srgb, var(--tbl-c) 9%, var(--surface)); color: var(--text); font: inherit; font-size: 12px; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tbl-chip.lifted { opacity: .4; }
.tbl-scroll { position: relative; margin-top: 10px; max-height: min(58vh, 540px); overflow-y: auto; overscroll-behavior: contain; padding-top: 8px; }
.tbl-empty { margin: 0 0 10px; }
.tbl-half { position: absolute; left: 0; right: 0; border-top: 1px dotted color-mix(in srgb, var(--border) 70%, transparent); height: 0; }
.tbl-block, .tbl-note { container-type: inline-size; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tbl-block { padding: 5px 7px; }
.tbl-block:focus-visible, .tbl-note:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tbl-block.dragging, .tbl-note.dragging { z-index: 7; cursor: grabbing; opacity: .95; box-shadow: 0 10px 24px rgba(0,0,0,.28); transition: none; }
.tbl-b-mini { display: none; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; min-width: 0; line-height: 1.15; }
.tbl-b-mini span { font-size: 14px; }
.tbl-b-mini small { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tbl-block.short .tbl-b-mini, .tbl-note.short .tbl-b-mini { flex-direction: row; gap: 3px; justify-content: center; align-items: center; }
@container (max-width: 84px) {
  .tbl-b-main { display: none; }
  .tbl-b-mini { display: flex; }
}
.tbl-h { position: absolute; left: 0; right: 0; height: 12px; z-index: 3; cursor: ns-resize; touch-action: none; }
.tbl-h-top { top: -3px; }
.tbl-h-bot { bottom: -3px; }
.tbl-h::after { content: ''; position: absolute; left: 50%; width: 24px; margin-left: -12px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--tbl-c) 75%, var(--text)); opacity: 0; transition: opacity .15s; }
.tbl-h-top::after { top: 4px; }
.tbl-h-bot::after { bottom: 4px; }
.tbl-block:hover .tbl-h::after, .tbl-note:hover .tbl-h::after, .dragging .tbl-h::after { opacity: .7; }
@media (hover: none) { .tbl-h::after { opacity: .45; } }
.tbl-block.tiny .tbl-h-top, .tbl-note.tiny .tbl-h-top { display: none; }
.tbl-block.tiny .tbl-h-bot, .tbl-note.tiny .tbl-h-bot { height: 8px; bottom: -2px; }
.tbl-split { position: absolute; width: 18px; margin-left: -9px; z-index: 5; cursor: col-resize; touch-action: none; display: flex; align-items: center; justify-content: center; }
.tbl-split::before { content: ''; width: 4px; height: min(40px, 70%); min-height: 10px; border-radius: 3px; background: var(--text-dim); opacity: .55; box-shadow: 0 0 0 2px var(--surface); transition: opacity .15s, background .15s; }
.tbl-split:hover::before, .tbl-split.active::before { opacity: 1; background: var(--accent); }
.tbl-tip { position: absolute; right: 2px; z-index: 9; transform: translateY(calc(-100% - 3px)); background: var(--text); color: var(--surface); font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 7px; pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl-drop { position: absolute; left: 2px; right: 2px; z-index: 6; border: 2px dashed var(--accent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); pointer-events: none; }
.tbl-ghost { position: fixed; z-index: 800; pointer-events: none; transform: translate(-50%, -130%); padding: 6px 11px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 8px 20px rgba(0,0,0,.3); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-timeline.tbl-dragging .tbl-scroll { touch-action: none; }
.tbl-slot-mark { position: absolute; left: 2px; right: 2px; z-index: 4; border: 2px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; }
.tbl-pop { position: absolute; left: 8px; z-index: 10; width: 230px; max-width: calc(100% - 16px); box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.28); padding: 6px; display: flex; flex-direction: column; gap: 1px; cursor: default; }
.tbl-pop-t { font-size: 11px; color: var(--text-muted); padding: 4px 8px 4px; font-weight: 600; }
.tbl-pop-s { font-size: 10.5px; color: var(--text-dim); padding: 6px 8px 2px; text-transform: uppercase; letter-spacing: .04em; border-top: 1px solid var(--border); margin-top: 3px; }
.tbl-pop button { text-align: left; border: none; background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); padding: 9px 10px; border-radius: 9px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-pop button:hover, .tbl-pop button:focus-visible { background: var(--surface2); }
.tbl-menu { display: none; position: absolute; right: 10px; top: 50px; z-index: 30; width: min(300px, calc(100% - 20px)); box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 36px rgba(0,0,0,.3); padding: 8px; }
.tb-timeline.menu-open .tbl-menu { display: block; }
.tbl-m-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 6px; font-size: var(--fs-sm); color: var(--text); }
.tbl-m-row .tbl-zoom { margin-left: 0; }
.tbl-m-btn { display: block; width: 100%; text-align: left; border: none; background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); padding: 9px 6px; border-radius: 9px; cursor: pointer; }
.tbl-m-btn:hover { background: var(--surface2); }
.tbl-m-hint { font-size: 11px; color: var(--text-muted); line-height: 1.45; padding: 8px 6px 2px; border-top: 1px solid var(--border); margin-top: 4px; }
.tbl-sw { width: 40px; height: 24px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); position: relative; cursor: pointer; padding: 0; flex-shrink: 0; transition: background .2s; }
.tbl-sw i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-muted); transition: transform .2s, background .2s; }
.tbl-sw.on { background: var(--accent); border-color: var(--accent); }
.tbl-sw.on i { transform: translateX(16px); background: #fff; }
.tbl-copy-list { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--text); max-height: 140px; overflow-y: auto; }
.tbl-copy-list small { color: var(--text-muted); }
.tbl-grid.ro { cursor: default; }
/* Hafta ko'rinishi */
.tbl-wk-head { position: sticky; top: -8px; z-index: 6; background: var(--surface); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: -8px 0 6px; padding: 6px 0 4px 48px; }
.tb-timeline .tbl-now span { left: -47px; right: auto; top: -9px; padding: 1px 4px; }
.tbl-wk-grid .tbl-now span { display: none; }
.tbl-wk-d { display: flex; flex-direction: column; align-items: center; border: none; background: none; color: var(--text-muted); font-family: inherit; cursor: pointer; padding: 2px 0; border-radius: 8px; min-width: 0; }
.tbl-wk-d span { font-size: 10px; text-transform: uppercase; }
.tbl-wk-d b { font-size: 13px; color: var(--text); }
.tbl-wk-d.today b { color: var(--accent); }
.tbl-wk-d.sel { background: var(--surface2); }
.tbl-wk-grid { cursor: pointer; }
.tbl-wk-col { position: absolute; top: 0; bottom: 0; border-left: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.tbl-wk-col.today { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.tbl-wk-col:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.tbl-wk-b { --tbl-c: var(--accent); position: absolute; box-sizing: border-box; border-radius: 5px; margin-left: 1px; background: color-mix(in srgb, var(--tbl-c) 26%, var(--surface)); border-left: 2px solid var(--tbl-c); font-size: 9.5px; line-height: 1.2; color: var(--text); overflow: hidden; padding: 1px 2px; white-space: nowrap; pointer-events: none; }
.tbl-wk-b.note { --tbl-c: var(--text-muted); border: 1px dashed color-mix(in srgb, var(--tbl-c) 65%, transparent); background: color-mix(in srgb, var(--tbl-c) 10%, var(--surface)); }
.tbl-wk-b.done { opacity: .5; }
.tbl-wk-b.missed { opacity: .45; filter: grayscale(.6); }
.tbl-wk-b span { overflow: hidden; text-overflow: clip; }
.tbl-wk-now { left: 0; }
.tbl-wk-now::before { left: -3px; top: -4px; width: 7px; height: 7px; }
@media (max-width: 400px) {
  .tbl-seg button { padding: 4px 7px; }
  .tbl-wk-b span { display: none; }
  .tbl-wk-head { padding-left: 40px; }
  .tbl-wk-grid { margin-left: 40px; }
  .tbl-wk-grid .tbl-hour { left: -40px; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-timeline *, .tb-timeline *::before, .tb-timeline *::after { transition: none !important; animation: none !important; }
  .tbl-scroll { scroll-behavior: auto; }
}

/* 💰 Qiyinlik → tanga tanlagich va "Tanga qoidalari" oynasi */
.tier-opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tier-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; font-family: inherit; min-width: 0; }
.tier-opt b { font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tier-opt small { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.tier-opt .tier-i { font-size: 16px; line-height: 1; }
.tier-opt.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface2)); box-shadow: 0 0 0 1px var(--accent) inset; }
.tier-hint { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 8px; line-height: 1.6; }
.tier-guide-link { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
@media (max-width: 420px) { .tier-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.econ-ov { position: fixed; inset: 0; z-index: 600; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 16px; }
.econ-box { position: relative; width: 100%; max-width: 480px; max-height: 86vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 18px 18px 14px; color: var(--text); }
.econ-box h3 { margin: 0 0 6px; font-family: Syne, sans-serif; }
.econ-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); cursor: pointer; }
.econ-p { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin: 4px 0 10px; }
.econ-p b { color: var(--text); }
.econ-h { font-weight: 700; font-size: 13.5px; margin-top: 10px; }
.econ-t { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 4px; }
.econ-t th { text-align: left; font-size: 11px; color: var(--text-muted); font-weight: 600; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.econ-t td { padding: 7px 4px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.econ-t td small { display: block; color: var(--text-muted); font-size: 11px; }