:root {
    --bg: #0f0f13;
    --surface: #1a1a22;
    --surface2: #22222e;
    --border: #2e2e3e;
    --text: #e8e8f0;
    --muted: #7070a0;
    --workout: #ff6b35;
    --food: #4ecdc4;
    --guitar: #a78bfa;
    --art: #f9c74f;
    --meditation: #06b6d4;
    --accent: #ff6b35;
    --green: #4ade80;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  /* html holds the solid bg — stays fixed on iOS/mobile without background-attachment bug */
  html { background: var(--bg); }
  body { font-family: 'Heebo', sans-serif; font-size: 16px; background: transparent; color: var(--text); min-height: 100vh; }
  body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 20% 20%, rgba(255,107,53,0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(167,139,250,0.06) 0%, transparent 50%); pointer-events: none; z-index: 0; }
  .container { max-width: 480px; margin: 0 auto; padding: 20px; padding-bottom: 40px; position: relative; z-index: 1; overflow-x: hidden; }
  /* Timer panel toggle */
  #timer-panel { position: fixed; bottom: 82px; left: 20px; width: 300px; max-width: calc(100vw - 40px); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px; z-index: 2000; box-shadow: 0 8px 40px rgba(0,0,0,0.4); display: none; animation: slideUp 0.25s ease; }
  #timer-panel.open { display: block; }
  #timer-panel-title { font-family: 'Secular One', sans-serif; font-size: 14px; color: var(--accent); margin-bottom: 14px; }
  #gtimer-display { font-family: 'Secular One', sans-serif; font-size: 36px; letter-spacing: 4px; text-align: center; padding: 10px 0; }
  #gtimer-mode-toggle { display: flex; gap: 4px; margin-bottom: 12px; }
  .gtimer-mode-btn { flex: 1; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); cursor: pointer; font-size: 12px; padding: 5px 8px; transition: all 0.18s; }
  .gtimer-mode-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
  #gtimer-countdown-set { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 8px; }
  #gtimer-countdown-set input { width: 52px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 13px; text-align: center; }

  /* ── HEADER ── */
  /* Single-column centered layout for all screen sizes */
  header { display: flex; flex-direction: column; align-items: center; padding: 6px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 20px; gap: 0; overflow: visible; }
  .header-right { display: flex; flex-direction: column; align-items: center; width: 100%; order: -1; gap: 0; }
  .header-left { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 12px; order: 1; }
  .header-left .hrow { justify-content: center; width: 100%; }
  .hrow-status { justify-content: space-between; align-items: center; width: 100%; flex-wrap: nowrap; padding: 4px 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; overflow: visible; }
  .hrow-status .status-clock-group { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; }
  .hrow-status .header-icon-chip { width: 32px; height: 32px; border-radius: 9px; font-size: 16px; flex-shrink: 0; }
  .header-icon-chip--accent { background: linear-gradient(135deg,rgba(255,107,53,0.08),rgba(167,139,250,0.08)); border-color: rgba(167,139,250,0.4) !important; color: #b89dff; }
  .header-icon-chip--accent:hover { background: linear-gradient(135deg,rgba(255,107,53,0.18),rgba(167,139,250,0.18)); border-color: #ff6b35 !important; color: #ff8f5e; }
  .logo { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; }
  .status-actions-group { display: flex; align-items: center; gap: 6px; }
  .status-user-group { display: flex; align-items: center; gap: 6px; }
  .status-clock-group { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1; justify-content: center; }
  .db-status-text { display: none; }
  .export-mini-btn { color: var(--muted); }
  .export-mini-btn:hover { border-color: var(--accent); color: var(--accent); }
  .export-mini-btn::after { content: 'ייצוא (.json file)'; position: absolute; top: calc(100% + 7px); left: 0; background: var(--surface); border: 1px solid var(--border); padding: 5px 10px; border-radius: 7px; font-size: 11px; font-family: 'Heebo', sans-serif; color: var(--text); white-space: nowrap; z-index: 500; pointer-events: none; opacity: 0; transition: opacity 0.15s; }
  .export-mini-btn:hover::after { opacity: 1; }
  @keyframes logoPulse {
    0%,100% { box-shadow: 0 0 18px rgba(255,107,53,0.6), 0 0 36px rgba(167,139,250,0.4); }
    50%     { box-shadow: 0 0 40px rgba(255,107,53,1), 0 0 70px rgba(167,139,250,0.9), 0 0 110px rgba(255,107,53,0.55), 0 0 6px rgba(255,255,255,0.25); }
  }
  @keyframes logoFloat {
    0%,100% { transform: translateY(0);    box-shadow: 0 0 14px rgba(255,107,53,0.5),  0 0 28px rgba(167,139,250,0.3); }
    50%     { transform: translateY(-7px); box-shadow: 0 0 28px rgba(255,107,53,0.85), 0 0 52px rgba(167,139,250,0.6), 0 8px 24px rgba(0,0,0,0.25); }
  }
  @keyframes logoPulseSvg {
    0%,100% { filter: drop-shadow(0 0 4px rgba(255,255,255,0.7)); }
    50%     { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #ff6b35); }
  }
  @keyframes lightningGlow {
    0%,100% { filter: drop-shadow(0 0 6px rgba(255,220,100,0.8)) drop-shadow(0 0 12px rgba(255,200,50,0.5)); }
    50%     { filter: drop-shadow(0 0 14px rgba(255,230,80,1)) drop-shadow(0 0 28px rgba(255,210,60,0.7)) drop-shadow(0 0 42px rgba(255,180,30,0.35)); }
  }
  @keyframes sparkFly {
    0%   { transform: translate(var(--sx), var(--sy)) scale(1.1); opacity: 0.95; }
    60%  { opacity: 0.5; }
    100% { transform: translate(var(--ex), var(--ey)) scale(0); opacity: 0; }
  }
  .logo-spark {
    position: absolute; border-radius: 50%;
    left: 50%; top: 50%; pointer-events: none; z-index: 4;
    box-shadow: 0 0 4px 1px rgba(255,255,255,0.7);
  }
  @keyframes arcGlow {
    0%,100% { opacity:0.45; transform:scale(1); }
    50%     { opacity:0.9;  transform:scale(1.07); }
  }
  .logo-icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: linear-gradient(135deg, #ff6b35, #a78bfa);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 18px rgba(255,107,53,0.6), 0 0 36px rgba(167,139,250,0.4);
    position: relative; cursor: pointer;
    transition: box-shadow 0.35s, transform 0.25s;
    animation: logoFloat 3.2s ease-in-out infinite, logoPulse 4s ease-in-out 2s infinite;
  }
  /* Subtle top shine — kept very light */
  .logo-icon::before {
    content:''; position:absolute;
    top:7%; left:10%; width:55%; height:34%;
    background: radial-gradient(ellipse at 40% 40%, rgba(255,255,255,0.22) 0%, transparent 70%);
    border-radius:50%; pointer-events:none; z-index:2;
  }
  /* Ambient glow ring + inner rim */
  .logo-icon::after {
    content:''; position:absolute; inset:-5px; border-radius:50%;
    background: radial-gradient(circle, rgba(167,139,250,0.15) 55%, transparent 100%);
    animation: arcGlow 4.5s ease-in-out infinite;
    pointer-events:none; z-index:0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  }
  .logo-icon svg { width: 52px; height: 52px; filter: drop-shadow(0 0 6px rgba(255,220,100,0.8)) drop-shadow(0 0 12px rgba(255,200,50,0.5)); transition: filter 0.25s; animation: lightningGlow 2.4s ease-in-out infinite; position:relative; z-index:3; }
  .logo-icon.lit { animation-play-state: paused; box-shadow: 0 0 28px rgba(255,107,53,0.9), 0 0 55px rgba(167,139,250,0.7), 0 0 80px rgba(255,107,53,0.4), inset 0 2px 6px rgba(255,255,255,0.45), inset 0 -3px 8px rgba(0,0,0,0.25); transform: scale(1.1) translateY(-4px); }
  .logo-icon.lit svg { filter: drop-shadow(0 0 12px rgba(255,230,80,1)) drop-shadow(0 0 24px rgba(255,210,60,0.8)) drop-shadow(0 0 38px rgba(255,180,30,0.5)); }
  .logo-text { font-family: 'Rajdhani', sans-serif; font-size: 46px; font-weight: 700; letter-spacing: 4px; background: linear-gradient(135deg, #ff6b35, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
  .hrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
  .date-nav { display: flex; align-items: center; gap: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px 7px; }
  .date-nav-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; transition: color 0.2s; }
  .date-nav-btn:hover { color: var(--text); }
  .date-nav-label { font-size: 11px; font-weight: 700; min-width: 88px; text-align: center; cursor: pointer; }
  .date-nav-label.today-active { color: var(--accent); }


  /* ── Nav drawer (right side) ── */
  /* Nav bubble menu */
  #nav-bubbles {
    display:none; position:fixed; inset:0; z-index:1001;
    flex-direction:column; align-items:center; justify-content:center; gap:14px;
    background:rgba(0,0,0,0.8);
  }
  #nav-bubbles.open { display:flex; }
  @keyframes bubbleFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }
  @keyframes bubbleFloat5 {
    0%,100% { transform: translate(-50%,-50%) translateY(0); }
    50%      { transform: translate(-50%,-50%) translateY(-6px); }
  }
  @keyframes bubbleAlertStroke {
    0%,100% { border-color: rgba(255,80,80,0.25); box-shadow: 0 0 0 0 rgba(255,80,80,0); }
    50%     { border-color: rgba(255,80,80,0.95); box-shadow: 0 0 12px 3px rgba(255,80,80,0.45); }
  }
  .nav-bubble-grid {
    position:relative; width:340px; height:400px;
  }
  .nav-bubble {
    position:absolute;
    width:102px; height:102px; border-radius:50%;
    background:linear-gradient(135deg,rgba(255,107,53,0.32),rgba(167,139,250,0.32));
    border:1.5px solid rgba(167,139,250,0.6);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; cursor:pointer; color:var(--text); font-size:13px; font-weight:700;
    font-family:'Heebo',sans-serif;
    opacity:0; transform:scale(0.4);
    transition:opacity 0.3s, transform 0.3s, border-color 0.2s, background 0.2s;
  }
  /* Scattered positions — each bubble in a different spot */
  .nav-bubble:nth-child(1) { top:15px;   left:15px;  }
  .nav-bubble:nth-child(2) { top:15px;   right:15px; }
  .nav-bubble:nth-child(3) { top:50%;    left:15px; transform:translateY(-50%) scale(0.4); }
  .nav-bubble:nth-child(4) { top:50%;    right:15px; transform:translateY(-50%) scale(0.4); }
  .nav-bubble:nth-child(5) { bottom:15px; left:calc(50% - 51px); }
  .nav-bubble:nth-child(6) { top:50%; left:50%; width:118px; height:118px; transform:translate(-50%,-50%) scale(0.4); transform-origin:center; }
  #nav-bubbles.open .nav-bubble:nth-child(3) { transform:translateY(-50%); }
  #nav-bubbles.open .nav-bubble:nth-child(4) { transform:translateY(-50%); }
  #nav-bubbles.open .nav-bubble:nth-child(6) { transform:translate(-50%,-50%); opacity:1; animation:bubbleFloat5 3.8s ease-in-out infinite; animation-delay:0.9s; transition-delay:380ms; }
  .nav-bubble:hover {
    animation: none !important;
    transform: scale(1) !important;
    transition: none !important;
    border-color: rgba(167,139,250,0.9);
    background: linear-gradient(135deg,rgba(255,107,53,0.32),rgba(167,139,250,0.55));
    box-shadow: 0 0 14px 2px rgba(167,139,250,0.4);
  }
  .nav-bubble:nth-child(6):hover {
    animation: none !important;
    transform: scale(1) translate(-50%,-50%) !important;
    transition: none !important;
    border-color: rgba(167,139,250,0.9);
    background: linear-gradient(135deg,rgba(255,107,53,0.32),rgba(167,139,250,0.55));
    box-shadow: 0 0 14px 2px rgba(167,139,250,0.4);
  }
  .nav-bubble .nb-icon { font-size:34px; line-height:1; }
  .nav-bubble.bubble-alert {
    animation: bubbleFloat 3s ease-in-out infinite, bubbleAlertStroke 1.6s ease-in-out infinite !important;
    border-width: 2px;
  }
  #nav-bubbles.open .nav-bubble {
    opacity:1; transform:scale(1);
    animation: bubbleFloat 3s ease-in-out infinite;
  }
  #nav-bubbles.open .nav-bubble:nth-child(1) { transition-delay:0ms;   animation-delay:0s;    animation-duration:3.2s; }
  #nav-bubbles.open .nav-bubble:nth-child(2) { transition-delay:80ms;  animation-delay:0.6s;  animation-duration:2.8s; }
  #nav-bubbles.open .nav-bubble:nth-child(3) { transition-delay:160ms; animation-delay:1.1s;  animation-duration:3.5s; transform:translateY(-50%); }
  #nav-bubbles.open .nav-bubble:nth-child(4) { transition-delay:240ms; animation-delay:0.3s;  animation-duration:2.6s; transform:translateY(-50%); }
  #nav-bubbles.open .nav-bubble:nth-child(5) { transition-delay:300ms; animation-delay:0.7s;  animation-duration:3.0s; }
  #nav-bubbles.open .nav-bubble:nth-child(6) { transition-delay:380ms; animation-delay:0.9s;  animation-duration:3.8s; transform:translate(-50%,-50%); opacity:1; animation-name:bubbleFloat5; }
  @keyframes aiExpandIn {
    from { opacity:0; transform:translateX(-50%) translateY(36px) scale(0.93); }
    to   { opacity:1; transform:translateX(-50%) translateY(0)    scale(1); }
  }
  @keyframes deepAnalysisIn {
    from { opacity:0; transform:translate(-50%,-50%) translateY(36px) scale(0.93); }
    to   { opacity:1; transform:translate(-50%,-50%) scale(1); }
  }
  #ai-expand-panel { animation: aiExpandIn 0.32s cubic-bezier(0.22,1,0.36,1); }
  @keyframes aiInputGlow {
    0%,100% { box-shadow:0 0 5px 1px rgba(167,139,250,0.2); border-color:rgba(167,139,250,0.3); }
    50%     { box-shadow:0 0 16px 3px rgba(167,139,250,0.6); border-color:rgba(167,139,250,0.85); }
  }
  /* Back-to-home lightning bolt — shown when any card/panel is open */
  .today-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-family: 'Heebo', sans-serif; font-size: 11px; font-weight: 700; padding: 4px 12px; cursor: pointer; transition: all 0.2s; height: 100%; }
  .today-btn:hover { color: var(--text); border-color: var(--accent); }
  .today-btn.on-today { opacity: 0.35; pointer-events: none; }
  .today-btn.off-today { color: #60a5fa; border-color: #60a5fa55; background: rgba(96,165,250,0.08); }
  .today-btn.off-today:hover { border-color: #60a5fa; background: rgba(96,165,250,0.18); }

  /* Floating viewing badge — top left */
  #viewing-float {
    display: none;
    position: fixed; top: 14px; left: 14px; z-index: 990;
    background: rgba(167,139,250,0.13);
    border: 1px solid rgba(167,139,250,0.35);
    border-radius: 20px;
    padding: 5px 12px;
    font-family: 'Heebo', sans-serif; font-size: 11px;
    color: #c4b5fd;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
  }
  #viewing-float.show { display: flex; align-items: center; gap: 5px; }
  #viewing-float:hover { background: rgba(167,139,250,0.22); }
  .viewing-banner { display: none; }
  .viewing-banner.show { display: none; } /* hidden — shown inline in header instead */
  .viewing-inline { display:none; align-items:center; gap:4px; font-size:10px; color:rgba(167,139,250,0.7); font-family:'Heebo',sans-serif; }
  .viewing-inline.show { display:flex; }
  .hrow-clock { justify-content: flex-end; }
  .live-clock-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 4px 12px; }
  .live-clock-time { font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 2px; background: linear-gradient(135deg, #ff6b35, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
  .live-clock-sep { display: none; }
  .live-clock-date { font-family: 'Heebo', sans-serif; font-size: 10px; color: var(--muted); line-height: 1; }
  /* Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */
  input, textarea, select { font-size: 16px; }
  @media (max-width: 600px) {
    .hrow-clock { display: none; }
    .logo { font-size: 28px; text-align: center; width: 100%; margin-bottom: 8px; margin-top: 10px; }
    /* Icons top bar: signout+export on left, user+sync on right */
    .status-actions-group { order: -1; gap: 6px; }
    .status-user-group { order: 1; gap: 6px; }
    .hrow-actions { margin-top: 4px; padding-bottom: 4px; }
    .hrow-status .header-icon-btn { width: 26px !important; min-width: 26px !important; padding: 0 !important; }
    /* Logo on mobile */
    .logo-text { font-size: 28px; letter-spacing: 2px; }
  }

  /* ── TABS ── */
  .tabs { display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 24px; background: var(--surface); padding: 8px 8px 8px 44px; border-radius: 16px; border: 1px solid var(--border); overflow: visible; }
  .tab { flex: 1 1 0; min-width: 0; padding: 11px 8px; border: 1px solid transparent; background: transparent; color: var(--muted); font-family: 'Heebo', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; border-radius: 12px; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; text-align: center; }
  @media (max-width: 600px) {
    .tabs { flex-wrap: wrap; padding: 6px 6px 6px 40px; gap: 5px; }
    .tab { padding: 9px 4px; font-size: 13px; gap: 3px; }
    .tab-core { flex: 1 1 30%; }
    .tab:not(.tab-core) { flex: 1 1 20%; }
    .tab .dot { width: 6px; height: 6px; }
  }
  /* base hover */
  .tab:hover { color: var(--text); background: var(--surface2); }
  /* colored dot */
  .tab .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: transform 0.2s; }
  /* overview tab */
  .tab#tab-overview:hover { color: #a78bfa; border-color: rgba(167,139,250,0.25); }
  .tab#tab-overview.active { color: #a78bfa; background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.4); box-shadow: 0 2px 12px rgba(167,139,250,0.2); }
  /* per-category colors injected via data-color attr (set in renderTabs) */
  .tab[data-color].active { font-weight: 700; }
  .tab[data-color="workout"]:hover       { color: var(--workout); border-color: rgba(255,107,53,0.25); background: rgba(255,107,53,0.06); }
  .tab[data-color="workout"].active      { color: var(--workout); background: rgba(255,107,53,0.13); border-color: rgba(255,107,53,0.5); box-shadow: 0 2px 14px rgba(255,107,53,0.22); }
  .tab[data-color="food"]:hover          { color: #4ade80; border-color: rgba(74,222,128,0.25); background: rgba(74,222,128,0.06); }
  .tab[data-color="food"].active         { color: #4ade80; background: rgba(74,222,128,0.13); border-color: rgba(74,222,128,0.5); box-shadow: 0 2px 14px rgba(74,222,128,0.22); }
  .tab[data-color="meditation"]:hover    { color: var(--meditation); border-color: rgba(6,182,212,0.25); background: rgba(6,182,212,0.06); }
  .tab[data-color="meditation"].active   { color: var(--meditation); background: rgba(6,182,212,0.13); border-color: rgba(6,182,212,0.5); box-shadow: 0 2px 14px rgba(6,182,212,0.22); }
  .tab[data-color="guitar"]:hover        { color: var(--guitar); border-color: rgba(167,139,250,0.25); background: rgba(167,139,250,0.06); }
  .tab[data-color="guitar"].active       { color: var(--guitar); background: rgba(167,139,250,0.13); border-color: rgba(167,139,250,0.5); box-shadow: 0 2px 14px rgba(167,139,250,0.22); }
  .tab[data-color="art"]:hover           { color: var(--art); border-color: rgba(249,199,79,0.25); background: rgba(249,199,79,0.06); }
  .tab[data-color="art"].active          { color: var(--art); background: rgba(249,199,79,0.13); border-color: rgba(249,199,79,0.5); box-shadow: 0 2px 14px rgba(249,199,79,0.22); }
  .tab[data-color="payments"]:hover      { color: #94a3b8; border-color: rgba(148,163,184,0.25); background: rgba(148,163,184,0.06); }
  .tab[data-color="payments"].active     { color: #94a3b8; background: rgba(148,163,184,0.13); border-color: rgba(148,163,184,0.5); box-shadow: 0 2px 14px rgba(148,163,184,0.22); }
  /* dot grows on active */
  .tab.active .dot { transform: scale(1.3); }

  /* ── DESKTOP LAYOUT (≥ 1024px) ── */
  @media (min-width: 1024px) {
    /* Show the inline clock on desktop (hidden on mobile) */
    .status-clock-group { display: flex; flex-direction: column; align-items: center; }


    /* Category tabs — equal widths, fill bar */
    .tabs { justify-content: stretch; overflow-x: visible; }
    .tab  { flex: 1 1 0; }

    /* Task form — single line on wide screens */
    #task-form > div { flex-wrap: nowrap; }
  }

  /* ── PANELS ── */
  .panel { display: none; }
  .panel.active { display: block; animation: fadeIn 0.25s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

  /* ── CARDS ── */
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; margin-bottom: 14px; }
  .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .card-title { font-family: 'Secular One', sans-serif; font-size: 15px; display: flex; align-items: center; gap: 8px; }
  .badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; background: var(--surface2); color: var(--muted); }

  /* ── GRIDS ── */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  @media (max-width: 600px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } }

  /* ── STATS ── */
  .stat-box { background: var(--surface2); border-radius: 12px; padding: 14px; text-align: center; border: 1px solid var(--border); }
  .stat-num { font-size: 30px; font-weight: 900; line-height: 1; margin-bottom: 4px; }
  .stat-label { font-size: 12px; color: var(--muted); }

  /* ── WEEK GRID (tracker) ── */
  .week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .day-col { text-align: center; }
  .day-name { font-size: 11px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
  .day-cell { aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer; transition: all 0.15s; margin-bottom: 4px; }
  .day-cell:hover { border-color: var(--accent); transform: scale(1.05); }
  .day-cell.done { border-width: 2px; }
  .day-cell.today-cell { box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }
  .day-cell.viewing { box-shadow: 0 0 0 2px var(--guitar); }

  /* ── WEEKLY OVERVIEW PANEL ── */
  .week-overview { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 16px; }
  @media (max-width: 700px) { .week-overview { grid-template-columns: repeat(7, 1fr); gap: 4px; } }
  .wov-col { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; cursor: pointer; }
  .wov-col:hover { border-color: var(--guitar); box-shadow: 0 2px 10px rgba(167,139,250,0.15); }
  .wov-col.wov-today { border-color: var(--accent); box-shadow: 0 2px 12px rgba(255,107,53,0.2); }
  .wov-col.wov-viewing { border-color: var(--guitar); background: rgba(167,139,250,0.08); }
  .wov-head { padding: 8px 4px 6px; text-align: center; background: var(--surface2); border-bottom: 1px solid var(--border); }
  .wov-dayname { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 0.3px; }
  .wov-date { font-size: 15px; font-weight: 900; margin-top: 2px; }
  .wov-body { padding: 7px 3px 6px; }
  .wov-dot { width: 8px; height: 8px; border-radius: 50%; margin: 3px auto; }
  .wov-mini { font-size: 9px; text-align: center; color: var(--muted); margin: 2px 0; white-space: nowrap; overflow: hidden; }
  .wov-empty { font-size: 14px; text-align: center; padding: 8px 0; opacity: 0.3; }

  /* ── WEEK ROLLER ── */
  .wrc-card { padding: 0; overflow: hidden; }
  .wrc-header { display: flex; border-bottom: 1px solid var(--border); }
  .wrc-header-right { display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 8px 14px; flex: 1; }
  .wrc-header-right-label { font-size: 14px; color: var(--muted); font-family: 'Heebo', sans-serif; font-weight: 600; flex-shrink: 0; }
  .wrc-title { font-family: 'Secular One', sans-serif; font-size: 20px; color: var(--text); flex-shrink: 0; }
  .wrc-week-label { display: none; }
  .wrc-week-sublabel { font-size: 13px; font-weight: 700; color: var(--text); font-family: 'Heebo', sans-serif; letter-spacing: 0.2px; flex: 1; }
  .wrc-week-summary { display: flex; padding: 10px 14px 7px; align-items: center; justify-content: center; }
  .wrc-summary-btn { padding: 6px 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: 20px; color: rgba(255,255,255,0.82); font-family: 'Heebo', sans-serif; font-size: 14px; cursor: pointer; transition: all 0.15s; width: 100%; }
  .wrc-summary-btn:hover { background: rgba(224, 153, 39, 0.874); color: var(--text); border-color: rgba(255, 255, 255, 0.795); }
  .wrc-sum-title { font-family: 'Heebo', sans-serif; font-size: 20px; font-weight: 700; color: var(--muted); text-align: center; margin-bottom: 1px; }
  .wrc-sum-row { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
  .wrc-sum-chip { font-size: 12px; font-family: 'Heebo', sans-serif; background: var(--surface2); border: 1px solid var(--border); padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
  #week-roller-viewport { overflow: hidden; }
  #week-roller-track { will-change: transform; }
  /* Compact rows (prev / next week) — kept minimal */
  .roller-compact-wrap { background: var(--surface2); }
  .roller-next { border-top: 1px solid var(--border); }
  .roller-compact-row { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; padding: 2px 6px; }
  .rcd { border: 1px solid var(--border); border-radius: 5px; padding: 2px 1px 1px; text-align: center; cursor: pointer; transition: border-color 0.18s, background 0.18s; background: var(--surface); }
  .rcd:active { background: var(--surface2); }
  .rcd.rcd-today { border-color: var(--accent); }
  .rcd.rcd-viewing { border-color: var(--guitar); background: rgba(167,139,250,0.1); }
  .rcd-name { font-size: 7px; font-weight: 700; color: var(--muted); line-height: 1; }
  .rcd-date { font-size: 10px; font-weight: 900; line-height: 1.1; margin-top: 1px; }
  .rcd-dot { width: 3px; height: 3px; border-radius: 50%; background: transparent; margin: 1px auto 0; }
  .rcd-dot.has-data { background: var(--guitar); opacity: 0.7; }
  /* Expanded week (current) */
  .roller-expanded-wrap { padding: 8px 8px 0; border-top: 1px solid var(--border); }
  .roller-week-label { display: none; }
  /* Grid container must NOT have z-index (would make all cells cover the open body) */
  .roller-expanded-days-row { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
  .red-cell { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 2px 5px; text-align: center; cursor: pointer; transition: border-color 0.18s, background 0.18s; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; }
  .red-cell:active { background: var(--surface); }
  /* Today indicator: small orange bar at top of cell (no border clash with open tab) */
  .red-cell.red-today::before { content: ''; position: absolute; top: 3px; left: 18%; right: 18%; height: 2px; background: var(--accent); border-radius: 2px; }
  .red-cell.red-today.red-open::before { display: none; } /* hide bar when today is the open tab */
  .red-cell.red-today .red-cell-date { color: var(--accent); }
  /* Folder-tab: selected cell connects to open body; border-bottom hidden, bottom radius flat */
  .red-cell.red-open { border-color: var(--guitar); border-bottom: none; border-radius: 8px 8px 0 0; background: rgba(167,139,250,0.13); z-index: 2; margin-bottom: -1px; }
  .red-cell.red-open .red-cell-date { color: var(--guitar); }
  .red-cell-name { font-size: 9px; font-weight: 700; color: var(--muted); }
  .red-cell-date { font-size: 14px; font-weight: 900; line-height: 1.2; }
  /* Tiny score ring for compact cells */
  .red-cell-mini-ring { display: block; margin: 5px auto 0; }
  .red-mini-arc { transition: stroke-dasharray 0.75s ease-out; }
  /* Open-day content — folder tab panel; top border drawn by JS via ::before/::after */
  .roller-open-body { display: none; border: 1px solid var(--guitar); border-top: none; border-radius: 0 0 10px 10px; background: rgba(167,139,250,0.09); position: relative; z-index: 1; margin-bottom: 6px; overflow: visible; }
  .roller-open-body.open { display: block; padding-bottom: 10px; }
  /* Tab top-border drawn on left and right of the selected cell, skipping the tab notch */
  .roller-open-body::before, .roller-open-body::after { content: ''; position: absolute; top: -1px; height: 1px; background: var(--guitar); pointer-events: none; }
  .roller-open-body::before { left: 0; width: var(--tab-left, 0%); }
  .roller-open-body::after  { left: calc(var(--tab-left, 0%) + var(--tab-w, 100%)); right: 0; }
  .roi-day-header { text-align: center; padding: 10px 0 11px; font-size: 15px; font-weight: 700; color: var(--text); border-bottom: 1px solid rgba(167,139,250,0.2); letter-spacing: 0.3px; }
  .roi-day-header-label { font-size: 10px; font-weight: 600; color: var(--muted); font-family: 'Heebo', sans-serif; letter-spacing: 0.5px; margin-bottom: 3px; }
  /* 3-column RTL layout: ORB (visual right) | center | data (visual left) */
  .roller-open-inner { display: flex; gap: 0; padding: 6px 6px 6px; align-items: stretch; }
  /* ORB column — first DOM child = visual RIGHT in RTL */
  .roi-col-orb { flex: 0 0 144px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 2px 4px 4px; gap: 8px; }
  .roi-orb-svg { display: block; }
  .roi-orb-legend { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
  .roi-score-chip { display: flex; flex-direction: column; align-items: center; padding: 4px 8px; border-radius: 8px; min-width: 34px; }
  .roi-chip-label { font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: 0.3px; }
  .roi-chip-val { font-size: 16px; font-weight: 900; line-height: 1.3; font-family: 'Secular One', sans-serif; }
  /* Bottom section — plans / payments / living (full width below top row) */
  .roi-bottom-section { display: flex; flex-direction: row; gap: 8px; min-height: 90px; padding: 10px 8px 8px; border-top: 1px solid rgba(167,139,250,0.15); }
  .roi-bottom-section .roi-center-section { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .roi-center-row { display: flex; align-items: center; gap: 4px; font-family: 'Heebo', sans-serif; font-size: 10px; line-height: 1.4; min-width: 0; overflow: hidden; }
  .roi-center-label { color: var(--muted); flex-shrink: 0; font-size: 9px; }
  /* תוכניות section — label heading + items below */
  .roi-center-section { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .roi-center-section-label { font-size: 8px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; opacity: 0.8; }
  .roi-task-item { font-size: 12px; font-family: 'Heebo', sans-serif; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Data column — food / workout / wellness */
  .roi-col-data { flex: 1; min-width: 0; padding: 2px 8px 4px; display: flex; flex-direction: column; align-items: center; min-height: 220px; }
  /* Dual nutrition stat — labels + connected double bar */
  .roi-dual-stat { display: flex; flex-direction: column; gap: 1px; margin-bottom: 5px; align-items: center; width: 100%; }
  .roi-dual-label { display: flex; align-items: baseline; justify-content: space-between; }
  .roi-dual-title { font-size: 10px; font-family: 'Heebo', sans-serif; color: var(--muted); }
  .roi-dual-val { font-size: 15px; font-weight: 700; white-space: nowrap; }
  .roi-dual-unit { font-size: 11px; color: var(--muted); font-weight: 400; }
  .roi-dual-bar { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; width: 65%; }
  .roi-dual-track { height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
  .roi-dual-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease-out; }
  .roi-bar { height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
  .roi-bar-fill { height: 100%; border-radius: 2px; }
  /* Activity rows (workout, wellness) */
  .roi-activities { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .roi-activity-row { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
  .roi-act-icon { font-size: 13px; flex-shrink: 0; }
  .roi-act-text { font-size: 13px; font-family: 'Heebo', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
  /* Wellness horizontal chips — emoji on top, minutes below */
  .roi-wellness-row { display: flex; flex-direction: row; gap: 10px; margin-top: 4px; justify-content: center; }
  .roi-wellness-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .roi-wellness-emoji { font-size: 20px; line-height: 1; }
  .roi-wellness-min { font-size: 12px; font-weight: 700; font-family: 'Heebo', sans-serif; }
  .roi-empty-day { padding: 14px 8px; text-align: center; color: var(--muted); font-size: 12px; }
  /* Extra section — planner tasks + agenda below main orb area */
  .roi-extra-section { border-top: 1px solid var(--border); margin: 4px 6px 0; padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
  .roi-extra-row { display: flex; align-items: center; gap: 5px; font-family: 'Heebo', sans-serif; font-size: 11px; }
  .roi-extra-icon { font-size: 12px; flex-shrink: 0; }
  .roi-extra-label { color: var(--muted); }
  .roi-subsection-label { font-size: 9px; font-weight: 700; color: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 4px; }
  .roi-planner-item { display: flex; align-items: center; gap: 5px; padding: 3px 0; font-family: 'Heebo', sans-serif; }
  .roi-planner-item.done .roi-planner-text { opacity: 0.4; text-decoration: line-through; }
  .roi-planner-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.2); flex-shrink: 0; }
  .roi-planner-dot.done { background: #4ade80; }
  .roi-planner-time { font-size: 10px; color: rgba(167,139,250,0.75); min-width: 32px; flex-shrink: 0; }
  .roi-planner-text { font-size: 11px; color: var(--text); }
  .roi-tasks-inline { font-size: 10px; font-family: 'Heebo', sans-serif; color: var(--text); line-height: 1.5; flex: 1; min-width: 0; }
  .roi-agenda-item { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 7px; font-family: 'Heebo', sans-serif; transition: background 0.15s; }
  .roi-agenda-item.current { background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.25); }
  .roi-agenda-item.done .roi-agenda-text { opacity: 0.38; text-decoration: line-through; }
  .roi-agenda-time { font-size: 10px; color: rgba(167,139,250,0.75); min-width: 32px; flex-shrink: 0; }
  .roi-agenda-text { font-size: 11px; color: var(--text); flex: 1; }
  .roi-agenda-check { font-size: 9px; color: #4ade80; flex-shrink: 0; }
  .roi-agenda-now { font-size: 8px; color: var(--guitar); font-weight: 700; flex-shrink: 0; padding: 1px 4px; background: rgba(167,139,250,0.15); border-radius: 4px; }
  /* Ring arcs — start at 0, animate to fill */
  .ring-arc { transition: stroke-dasharray 0.75s ease-out; }

  /* ── FORMS ── */
  input, textarea, select { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: 'Heebo', sans-serif; font-size: 14px; padding: 9px 12px; width: 100%; outline: none; transition: border-color 0.2s; direction: rtl; }
  input:focus, textarea:focus, select:focus { border-color: var(--accent); }
  textarea { resize: vertical; min-height: 75px; }
  label { font-size: 12px; color: var(--muted); margin-bottom: 5px; display: block; }
  .form-group { margin-bottom: 12px; }
  .inline-row { display: flex; gap: 8px; }
  .inline-row input { flex: 1; }
  .add-form { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-top: 10px; display: none; }
  .add-form.open { display: block; animation: fadeIn 0.2s; }

  /* ── BUTTONS ── */
  .btn { padding: 9px 18px; border-radius: 10px; border: none; font-family: 'Heebo', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; }
  .btn-primary { background: var(--accent); color: white; }
  .btn-primary:hover { opacity: 0.85; transform: translateY(-1px); }
  .btn-ghost { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
  .btn-sm { padding: 5px 11px; font-size: 12px; }

  /* ── LISTS ── */
  .meal-row { display: flex; align-items: center; gap: 10px; padding: 9px; background: var(--surface2); border-radius: 10px; margin-bottom: 7px; border: 1px solid var(--border); animation: fadeIn 0.2s ease; }
  .meal-icon { font-size: 18px; }
  .meal-info { flex: 1; }
  .meal-name { font-size: 13px; font-weight: 600; }
  .meal-cals { font-size: 11px; color: var(--muted); }
  .meal-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 18px; padding: 0 4px; }
  .meal-del:hover { color: #ff4444; }
  .log-entry { display: flex; align-items: flex-start; gap: 10px; padding: 10px; background: var(--surface2); border-radius: 10px; margin-bottom: 7px; border-right: 3px solid var(--border); animation: fadeIn 0.2s ease; }
  .log-time { font-size: 11px; color: var(--muted); min-width: 40px; margin-top: 2px; }
  .log-content { flex: 1; font-size: 13px; }

  /* ── PROGRESS ── */
  .progress-bar { height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; margin-top: 6px; }
  .progress-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }

  /* ── TIMER ── */
  .timer-display { font-family: 'Secular One', sans-serif; font-size: 52px; text-align: center; letter-spacing: 4px; line-height: 1; padding: 16px 0; }
  .timer-controls { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

  /* ── TASKS ── */
  .check-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface2); border-radius: 10px; margin-bottom: 6px; border: 1px solid var(--border); cursor: pointer; transition: all 0.2s; }
  .check-item:hover { border-color: var(--accent); }
  .check-item.done { opacity: 0.5; }
  .check-item.done .check-label { text-decoration: line-through; }
  .checkbox { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
  .checkbox svg { display: none; }
  .check-item.done .checkbox { background: #22c55e22; border-color: #22c55e; }
  .check-item.done .checkbox svg { display: block; }
  .check-label { flex: 1; font-size: 14px; }

  /* ── OVERVIEW CARDS ── */
  .overview-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
  .overview-row1 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .overview-row2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .ov-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 10px 9px; position: relative; overflow: hidden; }
  .ov-trophy { position: absolute; top: 4px; left: 6px; font-size: 15px; display: none; animation: popIn 0.3s ease; }
  @keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .ov-card::before { content: ''; position: absolute; top: 0; right: 0; width: 32px; height: 32px; border-radius: 0 12px 0 32px; opacity: 0.18; }
  .ov-card[data-cat="workout"]::before { background: var(--workout); }
  .ov-card[data-cat="food"]::before { background: var(--food); }
  .ov-card[data-cat="guitar"]::before { background: var(--guitar); }
  .ov-card[data-cat="art"]::before { background: var(--art); }
  .ov-card[data-cat="meditation"]::before { background: var(--meditation); }
  .ov-emoji { font-size: 16px; margin-bottom: 4px; }
  .ov-title { font-size: 12px; color: var(--muted); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ov-value { font-size: 16px; font-weight: 900; }
  .ov-sub { font-size: 10px; color: var(--muted); margin-top: 1px; }

  /* ── MOOD ── */
  .mood-row { display: flex; gap: 8px; justify-content: center; }
  .mood-btn { font-size: 22px; background: var(--surface2); border: 2px solid var(--border); border-radius: 10px; padding: 7px 10px; cursor: pointer; transition: all 0.2s; }
  .mood-btn:hover, .mood-btn.selected { border-color: var(--accent); transform: scale(1.1); }

  /* ── MISC ── */
  .sep { height: 1px; background: var(--border); margin: 14px 0; }
  .section-title { font-family: 'Secular One', sans-serif; font-size: 13px; color: var(--muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
  .scrollable { max-height: 280px; overflow-y: auto; padding-left: 4px; }
  .scrollable::-webkit-scrollbar { width: 4px; }
  .scrollable::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
  .wsp-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }
  .wsp-scroll::-webkit-scrollbar { width: 3px; }
  .wsp-scroll::-webkit-scrollbar-track { background: transparent; }
  .wsp-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; }
  .wsp-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
  #weekly-tasks-list::-webkit-scrollbar { width: 4px; }
  #weekly-tasks-list::-webkit-scrollbar-track { background: transparent; }
  #weekly-tasks-list::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.5); border-radius: 2px; }
  #weekly-tasks-list::-webkit-scrollbar-thumb:hover { background: rgba(167,139,250,0.85); }

  /* ── CLAUDE FAB (horizontal nav bar) ── */
  .claude-fab { position: fixed; bottom: 24px; right: 20px; left: auto; transform: none; z-index: 1500; transition: opacity 0.35s, transform 0.35s, bottom 0.3s; }
  .claude-fab.fab-hidden { opacity: 0; pointer-events: none; transform: translateY(10px); }
  .claude-fab.nav-pushed { bottom: 80px; }
  .claude-fab-btn { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #22c55e, #15803d); border: none; cursor: pointer; font-size: 30px; font-weight: 300; line-height: 1; color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 14px rgba(34,197,94,0.45); transition: all 0.2s; }
  .claude-fab-btn:hover { transform: scale(1.08); box-shadow: 0 5px 18px rgba(34,197,94,0.6); }
  .claude-fab-btn.active { box-shadow: 0 3px 12px rgba(34,197,94,0.4), 0 0 0 2px rgba(74,222,128,0.35); }
  #claude-fab-inline { display: none; }
  /* ── QADD NAV ROW ── */
  .qadd-nav-row { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
  .qadd-nav-btn { flex: 1; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: transparent; cursor: pointer; font-size: 12px; font-family: 'Heebo', sans-serif; color: var(--muted); transition: all 0.15s; white-space: nowrap; }
  .qadd-nav-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
  .qadd-nav-btn.active { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.35); color: #4ade80; }

  /* ── TABS: dynamic visibility + add button ── */
  .tabs-wrap { position: relative; }
  /* Both the "+" and pencil edit button are always pinned to the left of the bar */
  .tab-left-btn { position: absolute; top: 50%; left: 7px; transform: translateY(-50%); width: 26px; height: 26px; background: rgba(120,150,130,0.07); border: 1px dashed rgba(120,150,130,0.38); border-radius: 8px; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 5; font-size: 16px; line-height: 1; transition: all 0.15s; flex-shrink: 0; }
  .tab-left-btn:hover { background: rgba(120,150,130,0.18); color: var(--text); border-color: rgba(120,150,130,0.55); border-style: solid; }
  .tab-left-btn svg { width: 11px; height: 11px; flex-shrink: 0; }
  /* .tab-add-btn and .tab-edit-cats-btn are both replaced by .tab-left-btn */
  #cat-overlay { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); }
  #cat-overlay.open { display: flex; }
  #cat-overlay-card { width: min(260px, calc(100vw - 40px)); background: #2a2a3c; border: 1px solid rgba(167,139,250,0.5); border-radius: 18px; padding: 18px 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.85); animation: catPopIn 0.22s cubic-bezier(0.22,1,0.36,1) forwards; }
  @keyframes catPopIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
  .cat-overlay-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
  .cat-overlay-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background 0.15s; font-size: 13px; }
  .cat-overlay-item:hover { background: var(--surface2); }
  .cat-overlay-item .coi-check { font-size: 11px; color: #4ade80; opacity: 0; }
  .cat-overlay-item.active .coi-check { opacity: 1; }

  /* ── TICKER BANNER ── */
  .ticker-banner { overflow: hidden; height: 28px; background: rgba(167,139,250,0.07); border: 1px solid rgba(167,139,250,0.22); border-radius: 10px; display: flex; align-items: center; justify-content: center; position: relative; }
  .ticker-slide { position: absolute; width: 100%; text-align: center; color: #a78bfa; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 12px; }
  .ticker-slide.enter { animation: tickerEnter 0.4s ease forwards; }
  .ticker-slide.visible { opacity: 1; transform: translateY(0); }
  .ticker-slide.exit  { animation: tickerExit  0.4s ease forwards; }
  @keyframes tickerEnter { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  @keyframes tickerExit  { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }

  /* Guided Tour */
  @keyframes tourPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.6);opacity:0} }
  @keyframes tourDotIn { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
  .tour-dot-el { animation: tourDotIn 0.3s cubic-bezier(0.34,1.28,0.64,1) both; }

  /* Today popup */
  #today-popup {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, calc(100vw - 24px));
    max-height: 85vh;
    overflow-y: auto;
    background: #13131f;
    border: 1px solid rgba(167,139,250,0.25);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.7);
    animation: todayPopIn 0.22s ease;
  }
  @keyframes todayPopIn {
    from { opacity:0; transform:translate(-50%,-50%) scale(0.95); }
    to   { opacity:1; transform:translate(-50%,-50%) scale(1);    }
  }

  /* Quick-add popup entry animation */
  @keyframes qaPopIn {
    from { opacity:0; transform:scaleY(0.92); transform-origin:bottom; }
    to   { opacity:1; transform:scaleY(1);    transform-origin:bottom; }
  }

  #qa-ai-cmd::placeholder { color: rgba(255,255,255,0.6); }

  /* Pause insight-bar glow while quick-add popup is open */
  #insight-bar-wrap.qa-open::before { animation-play-state: paused; }

  /* Quick-add popup — same spinning border beam as insight-bar */
  #qa-popup::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 700px;
    height: 700px;
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 160deg,
      rgba(167,139,250, 0.0) 168deg,
      rgba(167,139,250, 0.85) 180deg,
      rgba(200,180,255, 1.0) 190deg,
      rgba(167,139,250, 0.85) 200deg,
      rgba(167,139,250, 0.0) 212deg,
      transparent 220deg,
      transparent 360deg
    );
    animation: insightBorderSpin 6s linear infinite;
    z-index: 0;
    pointer-events: none;
  }

  /* Insight bar text swap animation */
  @keyframes insightIn  { from { opacity:0; transform:translateY(-7px); } to { opacity:1; transform:translateY(0); } }
  @keyframes insightOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(7px); } }
  #insight-text.swap-out { animation: insightOut 0.28s ease forwards; }
  #insight-text.swap-in  { animation: insightIn  0.32s ease forwards; }
  /* ── Insight bar: running border beam ── */
  #insight-bar-wrap {
    position: relative;
    border-radius: 9px;
    padding: 1.5px;
    overflow: hidden;
  }
  #insight-bar-wrap::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 700px;
    height: 700px;
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 160deg,
      rgba(167,139,250, 0.0) 168deg,
      rgba(167,139,250, 0.85) 180deg,
      rgba(200,180,255, 1.0) 190deg,
      rgba(167,139,250, 0.85) 200deg,
      rgba(167,139,250, 0.0) 212deg,
      transparent 220deg,
      transparent 360deg
    );
    animation: insightBorderSpin 6s linear infinite;
    z-index: 0;
  }
  /* Inner mask — covers the gradient so it shows only on the 1.5px border ring */
  #insight-bar-wrap::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    border-radius: 7.5px;
    background: #0f0f13;
    box-shadow: inset 0 0 0 1px rgba(167,139,250,0.12);
    pointer-events: none;
    z-index: 0;
  }
  #insight-bar {
    position: relative;
    z-index: 1;
  }
  @keyframes insightBorderSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
  }

  /* Hide scrollbar on day timeline wrap */
  #dp-timeline-wrap::-webkit-scrollbar { display: none; }

  /* Day plan touch drag highlight */
  .dp-dropzone-hl {
    background: rgba(167,139,250,0.25) !important;
    border-radius: 6px;
    outline: 1.5px solid rgba(167,139,250,0.6);
  }

  /* AI insight glow — bar (active state) */
  @keyframes insightBarAIGlow {
    0%, 100% { box-shadow: 0 0 6px rgba(167,139,250,0.2); }
    50%       { box-shadow: 0 0 22px rgba(167,139,250,0.6); }
  }
  #insight-bar.ai-insight-active { animation: insightBarAIGlow 2.2s ease-in-out infinite; }
  #insight-bar.ai-insight-active #insight-text {
    color: rgba(220,210,255,0.92);
    text-shadow: 0 0 12px rgba(167,139,250,0.35);
    transition: color 0.4s, text-shadow 0.4s;
  }
  #insight-bar.ai-insight-active #insight-icon { filter: drop-shadow(0 0 8px rgba(167,139,250,0.9)) !important; }

  /* Trackers AI — subtle permanent glow */
  @keyframes trackersAIIdleGlow {
    0%, 100% {
      filter: drop-shadow(0 0 2px rgba(167,139,250,0.4));
      opacity: 0.72;
    }
    50% {
      filter: drop-shadow(0 0 5px rgba(167,139,250,0.85)) drop-shadow(0 0 10px rgba(167,139,250,0.4));
      opacity: 1;
    }
  }
  #trackers-ai-icon { animation: trackersAIIdleGlow 2.8s ease-in-out infinite; }
  #trackers-ai-label { animation: trackersAILabelGlow 2.8s ease-in-out infinite; }
  @keyframes trackersAILabelGlow {
    0%, 100% { color: rgba(167,139,250,0.6); text-shadow: 0 0 4px rgba(167,139,250,0.2); }
    50%       { color: rgba(167,139,250,0.95); text-shadow: 0 0 8px rgba(167,139,250,0.6), 0 0 16px rgba(167,139,250,0.3); }
  }

  /* Trackers AI button — loading flash */
  @keyframes trackersAIFlash {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
  }
  #trackers-ai-btn.trackers-ai-loading { animation: trackersAIFlash 0.55s ease-in-out infinite; pointer-events: none; }
  /* Trackers AI button — active/lit state */
  #trackers-ai-btn.trackers-ai-active #trackers-ai-label {
    color: rgba(167,139,250,0.95) !important;
    text-shadow: 0 0 10px rgba(167,139,250,0.9), 0 0 20px rgba(167,139,250,0.4) !important;
    animation: none !important;
  }
  #trackers-ai-btn.trackers-ai-active #trackers-ai-icon {
    filter: drop-shadow(0 0 5px rgba(167,139,250,1)) drop-shadow(0 0 10px rgba(167,139,250,0.6)) !important;
    animation: none !important;
  }
  .hrow-marquee { width: 100%; margin-top: 8px; margin-bottom: 2px; }

  /* ── STREAKS SECTION ── */
  .streak-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  #core-streaks-row { flex-wrap: nowrap; overflow: hidden; }
  #core-streaks-row .core-streak-chip { flex: 1 1 0; min-width: 0; justify-content: center; overflow: hidden; }
  #core-streaks-row .core-streak-chip .sc-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (max-width: 600px) {
    #core-streaks-row { flex-wrap: wrap; }
    #core-streaks-row .core-streak-chip { flex: 1 1 calc(50% - 4px); }
  }
  .ws-streak-card { background:var(--surface); border:1px solid rgba(255,255,255,0.08); border-right:3px solid transparent; border-radius:9px; padding:7px 6px; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; transition:opacity 0.2s,box-shadow 0.2s; user-select:none; }
  .ws-streak-card.ws-streak-dim { opacity:0.38; }
  .ws-streak-card.ws-streak-hot { box-shadow:0 0 16px rgba(239,68,68,0.2); }
  .streak-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px; font-size: 13px; cursor: pointer; transition: all 0.15s; position: relative; user-select: none; }
  .streak-chip:hover { border-color: rgba(255,255,255,0.25); }
  .streak-chip .sc-emoji { font-size: 15px; }
  .streak-chip .sc-label { font-size: 10px; color: var(--muted); }
  .streak-chip .sc-count { font-size: 15px; font-weight: 900; }
  .streak-add-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.2); background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
  .streak-add-btn:hover { border-color: #4ade80; color: #4ade80; }
  .cs-item { display: flex; flex-direction: column; position: relative; }
  /* Action buttons float as an absolute overlay below the chip */
  .cs-actions-overlay { display: none; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); flex-direction: row; gap: 6px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 4px 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); z-index: 500; white-space: nowrap; }
  .cs-actions-overlay::before { content: ''; position: absolute; bottom: calc(100% - 1px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: var(--border); }
  .cs-item.expanded .cs-actions-overlay { display: flex; animation: fadeIn 0.15s ease; }
  .cs-success-btn { width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(74,222,128,0.2); color: #4ade80; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
  .cs-success-btn:hover { background: rgba(74,222,128,0.4); transform: scale(1.1); }
  .cs-reset-btn { width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(248,113,113,0.2); color: #f87171; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
  .cs-reset-btn:hover { background: rgba(248,113,113,0.4); transform: scale(1.1); }
  .cs-trash-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
  .cs-trash-btn:hover { background: rgba(248,113,113,0.2); color: #f87171; border-color: #f87171; }
  .cs-trash-btn.blink { background: rgba(248,113,113,0.15); color: #f87171; border-color: #f87171; animation: trashBlink 0.5s ease-in-out infinite; }
  @keyframes trashBlink { 0%,100% { opacity: 1; box-shadow: 0 0 0 2px rgba(248,113,113,0); } 50% { opacity: 0.4; box-shadow: 0 0 0 3px rgba(248,113,113,0.45); } }
  /* Emoji picker */
  .emoji-picker-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; }
  .emoji-picker-overlay.open { display: flex; animation: fadeIn 0.15s ease; }
  .emoji-picker-box { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px; max-width: 340px; width: calc(100% - 40px); }
  .emoji-picker-box h4 { font-family: 'Secular One', sans-serif; font-size: 14px; margin-bottom: 12px; }
  .emoji-picker-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0; }
  .ep-emoji { font-size: 26px; text-align: center; padding: 8px 4px; border-radius: 10px; cursor: pointer; border: 2px solid transparent; transition: all 0.15s; }
  .ep-emoji:hover, .ep-emoji.selected { background: rgba(255,255,255,0.1); border-color: var(--accent); }

  /* ── TASK FORM ADDITIONS ── */
  .task-important-static { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); transition: all 0.15s; }
  .task-important-static:hover { border-color: rgba(248,113,113,0.45); color: #f87171; }
  .task-important-active { border-color: #f87171 !important; color: #f87171 !important; background: rgba(248,113,113,0.12) !important; }
  .check-label.important-text { color: #f87171 !important; }

  /* ── ACCORDION (weekly food log) ── */
  .wk-day-group { margin-bottom: 4px; }
  .wk-day-header { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; background: var(--surface2); border-radius: 8px; cursor: pointer; border: 1px solid var(--border); font-size: 12px; transition: border-color 0.15s; }
  .wk-day-header:hover { border-color: var(--food); }
  .wk-day-arrow { color: var(--muted); font-size: 10px; transition: transform 0.2s; margin-inline-start: 6px; }
  .wk-day-group.open .wk-day-arrow { transform: rotate(90deg); }
  .wk-day-items { display: none; padding: 4px 0 2px; }
  .wk-day-group.open .wk-day-items { display: block; }
  /* ── Trackers AI response overlay ── */
  #ai-overlay { position:fixed; inset:0; z-index:1300; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.65); backdrop-filter:blur(6px); }
  #ai-overlay-card { background:#12121e; border:1px solid rgba(167,139,250,0.35); border-radius:22px; padding:24px; width:calc(100% - 40px); max-width:400px; box-shadow:0 8px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(167,139,250,0.1); animation:aiOverlayIn 0.25s ease forwards; }
  @keyframes aiOverlayIn { from { opacity:0; transform:translateY(20px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } }
  #ov-thinking-dots span { display:inline-block; width:8px; height:8px; border-radius:50%; background:#a78bfa; margin:0 3px; animation:ovDot 1.2s ease-in-out infinite; }
  #ov-thinking-dots span:nth-child(2) { animation-delay:0.2s; }
  #ov-thinking-dots span:nth-child(3) { animation-delay:0.4s; }
  @keyframes ovDot { 0%,80%,100% { transform:scale(0.6); opacity:0.4; } 40% { transform:scale(1); opacity:1; } }

  .claude-panel { position: fixed; bottom: 166px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 420px; background: #1a1a2e; border: 1px solid #4ade8033; border-radius: 18px; padding: 16px; z-index: 2000; box-shadow: 0 8px 40px rgba(0,0,0,0.55); display: none; box-sizing: border-box; }
  .claude-panel.open { display: block; animation: panelSlideIn 0.25s ease forwards; }
  @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes popIn { from { opacity:0; transform:translate(-50%,-50%) scale(0.88); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
  @keyframes panelSlideIn { from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.97); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
  @keyframes aiLogoPulse { 0%,100% { opacity:0.85; transform:scale(1); } 50% { opacity:1; transform:scale(1.08); } }
  @keyframes insightPrefsIn { from { opacity:0; transform:translate(-50%,-50%) scale(0.93); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
  /* Quick-add tabs */
  .qadd-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
  .qadd-header-title { font-family: 'Secular One', sans-serif; font-size: 15px; color: #4ade80; }
  .qadd-close-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 18px; padding: 0 2px; line-height: 1; transition: color 0.15s; }
  .qadd-close-btn:hover { color: var(--text); }
  .qadd-tabs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
  .qadd-tab { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: transparent; cursor: pointer; font-size: 12px; transition: all 0.15s; color: var(--muted); font-family: 'Heebo', sans-serif; text-align: center; white-space: nowrap; }
  .qadd-tab-full { width: 100%; }
  .qadd-row2 { display: flex; gap: 5px; }
  .qadd-tab-row2 { flex: 1; }
  .qadd-tab.active { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.35); color: #4ade80; }
  .qadd-form { animation: slideUp 0.2s ease; }
  .qadd-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
  .qadd-label { font-size: 11px; color: var(--muted); text-align: right; }
  .qadd-input, .qadd-select { background: #0f0f1a; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: var(--text); font-family: 'Heebo', sans-serif; font-size: 13px; padding: 7px 10px; outline: none; width: 100%; direction: rtl; box-sizing: border-box; }
  .qadd-input:focus, .qadd-select:focus { border-color: rgba(74,222,128,0.4); }
  .qadd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .qadd-save-btn { width: 100%; padding: 9px; background: linear-gradient(135deg, #22c55e, #15803d); border: none; border-radius: 9px; color: white; font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; margin-top: 4px; transition: opacity 0.15s; }
  .qadd-save-btn:hover { opacity: 0.88; }
  #qadd-turgent-btn.active { background: rgba(248,113,113,0.15); border-color: rgba(248,113,113,0.5); color: #f87171; }
  .qadd-result { margin-top: 8px; font-size: 12px; padding: 6px 10px; border-radius: 7px; display: none; text-align: right; }
  .qadd-result.success { background: #16a34a22; color: #4ade80; border: 1px solid #16a34a44; display: block; }
  .qadd-result.error { background: #dc262622; color: #f87171; border: 1px solid #dc262644; display: block; }
  /* Claude sub-panel */
  .claude-panel-title { font-family: 'Secular One', sans-serif; font-size: 13px; color: #a78bfa; margin-bottom: 10px; }
  .ai-quick-btn { padding:4px 10px; background:rgba(167,139,250,0.1); border:1px solid rgba(167,139,250,0.25); border-radius:8px; color:#a78bfa; font-family:'Heebo',sans-serif; font-size:11px; cursor:pointer; transition:all 0.2s; }
  .ai-quick-btn:hover { background:rgba(167,139,250,0.2); }
  .claude-textarea { width: 100%; background: #0f0f1a; border: 1px solid #a78bfa44; border-radius: 10px; color: var(--text); font-family: 'Heebo', sans-serif; font-size: 13px; padding: 10px; min-height: 80px; resize: none; direction: ltr; outline: none; margin-bottom: 8px; box-sizing: border-box; }
  .claude-textarea:focus { border-color: #a78bfa; }
  .claude-textarea::placeholder { color: #5050a0; direction: rtl; text-align: right; }
  .claude-actions { display: flex; gap: 8px; }
  .claude-run-btn { flex: 1; padding: 9px; background: linear-gradient(135deg, #a78bfa, #6d4afe); border: none; border-radius: 9px; color: white; font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; }
  .claude-clear-btn { padding: 9px 12px; background: transparent; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); font-family: 'Heebo', sans-serif; font-size: 13px; cursor: pointer; }
  .claude-result { margin-top: 8px; font-size: 13px; padding: 7px 10px; border-radius: 7px; display: none; text-align: right; }
  .claude-result.success { background: #16a34a22; color: #4ade80; border: 1px solid #16a34a44; display: block; }
  .claude-result.error { background: #dc262622; color: #f87171; border: 1px solid #dc262644; display: block; }
  .claude-hint { font-size: 11px; color: #5050a0; margin-top: 8px; line-height: 1.5; text-align: right; }

  /* ── EXPORT ── */
  .export-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; color: var(--muted); font-family: 'Heebo', sans-serif; font-size: 12px; padding: 5px 10px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
  .export-btn:hover { color: var(--green); border-color: var(--green); }
  .header-icon-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-family: 'Heebo', sans-serif; font-size: 12px; padding: 6px 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; line-height: 1.3; transition: color 0.2s, border-color 0.2s; width: 68px; min-width: 68px; position: relative; }
  .header-icon-btn .btn-icon { font-size: 18px; }
  .header-icon-btn:hover { color: var(--green); border-color: var(--green); }
  .timer-header-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; display: none; box-shadow: 0 0 5px currentColor; }
  .timer-header-dot.warn { display: block; background: #facc15; color: #facc15; }
  .timer-header-dot.alert { display: block; background: #f87171; color: #f87171; }
  /* ── HEADER ICON BUTTONS (all 4 identical size) ── */
  .header-icon-chip { width: 26px; height: 26px; border-radius: 7px; background: var(--surface2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; font-size: 13px; line-height: 1; cursor: pointer; transition: border-color 0.2s, background 0.2s; position: relative; }
  .signout-btn { border-color: #f8717144; color: #f87171; font-family: 'Heebo', sans-serif; font-size: 15px; font-weight: 700; }
  .signout-btn:hover { border-color: #f87171; background: rgba(248,113,113,0.12); }
  .signout-btn::after { content: 'יציאה מהחשבון'; position: absolute; top: calc(100% + 7px); left: 0; background: var(--surface); border: 1px solid var(--border); padding: 5px 10px; border-radius: 7px; font-size: 11px; font-family: 'Heebo', sans-serif; color: var(--text); white-space: nowrap; z-index: 500; pointer-events: none; opacity: 0; transition: opacity 0.15s; }
  .signout-btn:hover::after { opacity: 1; }
  #user-badge { border-color: #60a5fa55; color: #60a5fa; cursor: pointer; max-width: unset !important; }
  #user-badge:hover { border-color: #60a5fa; background: rgba(96,165,250,0.12); }
  #user-badge::after { content: attr(data-label); position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; font-size: 11px; font-family: 'Heebo', sans-serif; color: var(--text); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 500; }
  #user-badge:hover::after, #user-badge:focus::after { opacity: 1; }
  #version-toast { position: fixed; top: 52px; right: 16px; font-size: 11px; font-weight: 700; color: #4ade80; white-space: nowrap; opacity: 0; transition: opacity 0.3s; pointer-events: none; background: var(--surface); border: 1px solid #4ade8044; border-radius: 8px; padding: 4px 10px; z-index: 9999; }
  /* Sync button */
  #sync-status { border-color: #4ade8055; color: #4ade80; }
  #sync-status:hover { border-color: #4ade80; background: rgba(74,222,128,0.1); }
  #sync-status.sync-error { border-color: #f8717155; color: #f87171; }
  #sync-status.sync-error:hover { border-color: #f87171; background: rgba(248,113,113,0.1); }
  #sync-status.syncing svg { animation: syncSpin 1s linear infinite; }
  #sync-status::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; font-size: 11px; font-family: 'Heebo', sans-serif; color: var(--text); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 500; }
  #sync-status:hover::after, #sync-status:focus::after { opacity: 1; }
  @keyframes syncSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  /* ── TOAST ── */
  #save-toast { position: fixed; bottom: 80px; right: 20px; padding: 8px 16px; border-radius: 10px; font-size: 13px; font-family: 'Heebo', sans-serif; font-weight: 700; z-index: 9999; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
  #save-toast.show { opacity: 1; }
  #save-toast.ok  { background: #16a34a33; color: #4ade80; border: 1px solid #16a34a66; }
  #save-toast.err { background: #dc262633; color: #f87171; border: 1px solid #dc262666; }

  /* ── BMI BADGE ── */
  .bmi-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 20px; border: 1px solid; margin-right: 4px; }

  /* ── BODY METRIC PILLS ── */
  .body-mtab { padding: 5px 10px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface2); color: var(--muted); font-family: 'Heebo', sans-serif; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.18s; white-space: nowrap; }
  .body-mtab.active { background: rgba(99,179,237,0.15); border-color: rgba(99,179,237,0.5); color: #63b3ed; }
  .body-mtab:hover:not(.active) { color: var(--text); border-color: rgba(255,255,255,0.2); }

  /* ── BODY WEIGHT CHART ── */
  .body-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .body-bar-col { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; background: var(--surface2); border-radius: 10px; border: 1px solid var(--border); cursor: pointer; transition: border-color 0.15s; }
  .body-bar-col:hover { border-color: var(--food); }
  .body-bar-label { font-size: 10px; color: var(--muted); min-height: 14px; text-align: center; }
  .body-bar-track { width: 100%; height: 80px; background: var(--border); border-radius: 4px; overflow: hidden; display: flex; align-items: flex-end; }
  .body-bar-fill { width: 100%; border-radius: 4px; transition: height 0.4s ease; min-height: 0; }
  .body-bar-day { font-size: 10px; font-weight: 700; }

  /* ── PROTEIN WEEKLY CHART ── */
  .proto-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .proto-bar-col { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; background: var(--surface2); border-radius: 10px; border: 1px solid var(--border); cursor: pointer; transition: border-color 0.15s; }
  .proto-bar-col:hover { border-color: var(--workout); }
  .proto-bar-label { font-size: 10px; color: var(--muted); min-height: 14px; text-align: center; }
  .proto-bar-track { width: 100%; height: 80px; background: var(--border); border-radius: 4px; overflow: hidden; display: flex; align-items: flex-end; }
  .proto-bar-fill { width: 100%; border-radius: 4px; transition: height 0.4s ease; min-height: 0; }
  .proto-bar-day { font-size: 11px; font-weight: 700; }
  /* ── CALORIES WEEKLY CHART ── */
  .cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .cal-bar-col { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; background: var(--surface2); border-radius: 10px; border: 1px solid var(--border); cursor: pointer; transition: border-color 0.15s; }
  .cal-bar-col:hover { border-color: var(--food); }
  .cal-bar-label { font-size: 10px; color: var(--muted); min-height: 14px; text-align: center; }
  .cal-bar-track { width: 100%; height: 80px; background: var(--border); border-radius: 4px; overflow: hidden; display: flex; align-items: flex-end; }
  .cal-bar-fill { width: 100%; border-radius: 4px; transition: height 0.4s ease; min-height: 0; }
  .cal-bar-day { font-size: 11px; font-weight: 700; }

  /* ── WATER & CAFFEINE TRACKER CHIPS ── */
  .tracker-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 4px 8px; cursor: pointer; transition: all 0.15s; user-select: none; }
  .tracker-chip:hover { border-color: rgba(255,255,255,0.3); background: var(--surface); }
  .tracker-icons { font-size: 13px; letter-spacing: -1px; max-width: 72px; overflow: hidden; white-space: nowrap; }
  .tracker-num { font-size: 13px; font-weight: 700; min-width: 14px; text-align: center; cursor: pointer; color: var(--text); }
  .tracker-num:hover { color: var(--accent); }
  .tracker-minus { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; opacity: 0; transition: opacity 0.15s; line-height: 1; flex-shrink: 0; }
  .tracker-chip:hover .tracker-minus { opacity: 1; }
  .tracker-minus:hover { background: rgba(248,113,113,0.2); color: #f87171; border-color: #f87171; }

  /* ── FOOD VIEW TOGGLE ── */
  .food-view-toggle { display: flex; background: var(--surface2); border-radius: 10px; padding: 3px; gap: 3px; margin-top: 10px; }
  .fvt-btn { flex: 1; padding: 6px 12px; border: none; background: transparent; color: var(--muted); font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 8px; transition: all 0.2s; }
  .fvt-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
  .fvt-btn:hover:not(.active) { color: var(--text); }

  /* ── FOOD SUB-TABS ── */
  .food-sub-tabs { display: flex; gap: 3px; background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; padding: 4px; margin-bottom: 14px; }
  .food-sub-tab { flex: 1; padding: 6px 4px; border: none; background: transparent; color: var(--muted); font-family: 'Heebo', sans-serif; font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 8px; transition: all 0.2s; text-align: center; white-space: nowrap; }
  .food-sub-tab.active { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
  .food-sub-tab:hover:not(.active) { color: var(--text); }

  /* ── WORKOUT BUILDER ── */
  @keyframes bldPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.35;transform:scale(1.5)} }
  @keyframes bldPopIn { 0%{transform:scale(0.82);opacity:0} 100%{transform:scale(1);opacity:1} }
  @keyframes bldFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
  .bld-cat-btn { padding:10px 6px;background:var(--surface2);border:2px solid var(--border);border-radius:11px;color:var(--muted);font-family:'Heebo',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.18s;text-align:center; }
  .bld-cat-btn:hover { border-color:var(--workout);color:var(--text); }
  .bld-cat-btn.sel { border-color:var(--workout);background:rgba(255,107,53,0.12);color:var(--workout); }
  .bld-dur-btn { flex:1;padding:8px;background:var(--surface2);border:2px solid var(--border);border-radius:9px;color:var(--muted);font-family:'Heebo',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.18s; }
  .bld-dur-btn:hover { border-color:var(--workout);color:var(--text); }
  .bld-dur-btn.selected { border-color:var(--workout);background:rgba(255,107,53,0.12);color:var(--workout); }
  .bld-diff-btn { flex:1;padding:8px;background:var(--surface2);border:2px solid var(--border);border-radius:9px;color:var(--muted);font-family:'Heebo',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.18s; }
  .bld-diff-btn:hover { border-color:var(--workout);color:var(--text); }
  .bld-diff-btn.selected { border-color:var(--workout);background:rgba(255,107,53,0.12);color:var(--workout); }
  .bld-ex-preview { background:var(--surface2);border:1px solid var(--border);border-radius:11px;padding:12px;margin-bottom:8px;border-right:3px solid var(--border);animation:bldFadeIn 0.25s ease; }
  .bld-ex-card { background:var(--surface2);border:1px solid var(--border);border-radius:13px;padding:14px;margin-bottom:10px;border-right:4px solid var(--border);transition:border-color 0.3s;animation:bldFadeIn 0.2s ease; }
  .bld-ex-card.bld-active { border-right-color:var(--workout); }
  .bld-ex-card.bld-done { border-right-color:var(--green);opacity:0.6; }
  .bld-dot { width:40px;height:40px;border-radius:10px;background:var(--surface);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:12px;font-weight:700;color:var(--muted);transition:all 0.25s; }
  .bld-dot.hit { background:rgba(255,107,53,0.15);border-color:var(--workout);color:var(--workout); }
  .bld-dot.full { background:rgba(74,222,128,0.15);border-color:var(--green);color:var(--green); }
  .bld-set-btn { width:100%;padding:12px;background:linear-gradient(135deg,var(--workout),#e85d04);border:none;border-radius:10px;color:#fff;font-family:'Heebo',sans-serif;font-size:14px;font-weight:900;cursor:pointer;transition:all 0.18s; }
  .bld-set-btn:hover:not(:disabled) { transform:translateY(-1px);box-shadow:0 4px 14px rgba(255,107,53,0.35); }
  .bld-set-btn:disabled { opacity:0.35;cursor:not-allowed;transform:none;box-shadow:none; }
  .bld-tip { font-size:11px;color:var(--guitar);margin-top:8px;padding:6px 10px;background:rgba(167,139,250,0.08);border-radius:8px;border-right:3px solid var(--guitar); }
  /* Rest overlay */
  #bld-rest-overlay { display:none;position:fixed;inset:0;background:rgba(10,10,15,0.96);z-index:3000;flex-direction:column;align-items:center;justify-content:center; }
  #bld-rest-overlay.open { display:flex;animation:bldFadeIn 0.2s ease; }

  /* ── INLINE PROGRESS BARS ── */
  .food-prog-wrap { margin-bottom: 12px; }
  .food-prog-label { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; }
  .food-prog-outer { height: 36px; background: var(--surface2); border-radius: 10px; overflow: hidden; position: relative; border: 1px solid var(--border); }
  .food-prog-fill { height: 100%; border-radius: 9px; transition: width 0.4s ease; min-width: 0; }
  .food-prog-fill-text { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; }
  .food-prog-remain { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--muted); white-space: nowrap; pointer-events: none; }
  .food-prog-remain.flip { right: auto; left: 10px; }
  .food-prog-center-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 900; color: #fff; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,0.7); letter-spacing: 0.5px; }
  .fprog-low  { background: linear-gradient(90deg, #f87171cc, #fca5a5cc); }
  .fprog-ok   { background: linear-gradient(90deg, #4ade80cc, #86efaccc); }
  .fprog-over { background: linear-gradient(90deg, #4ade80cc, #facc15cc); }
  .fprog-high { background: linear-gradient(90deg, #facc15cc, #f87171cc); }

  /* ── BODY COMBINED CHART ── */
  .body-chart-wrap { display: flex; gap: 6px; align-items: flex-end; min-width: max-content; padding-bottom: 4px; }
  .body-chart-col { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; flex-shrink: 0; }
  .body-chart-bar-track { width: 36px; height: 100px; background: var(--surface2); border-radius: 6px; position: relative; border: 1px solid var(--border); overflow: visible; }
  .body-chart-bar-fill { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 5px; transition: height 0.4s ease; }
  .body-chart-bar-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; right: -4px; transform: translateY(50%); border: 2px solid var(--bg); z-index: 2; }
  .body-chart-date { font-size: 9px; color: var(--muted); text-align: center; line-height: 1.3; }
  .body-chart-weight { font-size: 11px; font-weight: 700; color: var(--food); }
  .body-chart-meta { font-size: 9px; color: var(--muted); text-align: center; line-height: 1.4; }
  .body-chart-legend { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
  .body-chart-legend-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--muted); }
  .body-chart-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  /* ── WORKOUT PLAN MINIMALIST PICKER ── */
  .plan-emoji-btn { width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;border:2px solid var(--border);background:var(--surface2);transition:all 0.15s;user-select:none; }
  .plan-emoji-btn:hover { border-color:var(--workout);transform:scale(1.1); }
  .plan-emoji-btn.plan-done { border-color:var(--workout);background:rgba(255,107,53,0.15); }
  .plan-emoji-btn.plan-empty { border-color:var(--border);opacity:0.6; }
  .plan-picker-drop { position:absolute;top:calc(100% + 6px);left:50%;transform:translate3d(-50%,-6px,0);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:6px;z-index:500;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,0.55);opacity:0;pointer-events:none;will-change:opacity,transform;transition:opacity 0.15s ease,transform 0.15s ease; }
  .plan-picker-drop.open { opacity:1;pointer-events:auto;transform:translate3d(-50%,0,0); }
  .plan-pick-opt { padding:7px 10px;font-size:12px;cursor:pointer;border-radius:8px;white-space:nowrap;transition:background 0.15s; }
  .plan-pick-opt:hover { background:var(--surface2); }

  /* ── PR TAB ── */
  .pr-row { display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface2);border-radius:10px;margin-bottom:8px;border:1px solid var(--border);transition:all 0.3s; }
  .pr-row.achieved { background:rgba(74,222,128,0.1);border-color:#4ade8055; }
  .pr-exercise { flex:1;font-size:13px;font-weight:700; }
  .pr-val { font-size:14px;font-weight:900;color:var(--text); }
  .pr-ghost { font-size:11px;color:var(--muted);margin-right:6px; }
  .pr-target-lbl { font-size:11px;color:var(--muted); }
  .challenge-bar-outer { height:22px;background:var(--surface2);border-radius:8px;overflow:hidden;position:relative;border:1px solid var(--border);margin-top:8px; }
  .challenge-bar-fill { height:100%;background:linear-gradient(90deg,var(--workout),#ff9a3c);border-radius:7px;transition:width 0.4s ease; }
  .challenge-bar-txt { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.6);white-space:nowrap; }

  /* ── OVERVIEW WORKOUT WIDGET ── */
  .ov-trophy-row { display:flex;gap:4px;margin-top:4px;margin-bottom:4px;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center; }
  .ov-trophy-icon { font-size:18px;cursor:pointer;transition:all 0.2s;line-height:1; }
  .ov-trophy-icon.empty { opacity:0.2;filter:grayscale(1); }
  .ov-trophy-icon.empty:hover { opacity:0.5; }
  .ov-no-plan-btn { font-size:10px;color:rgba(74,222,128,0.45);cursor:pointer;background:none;border:none;padding:2px 0;font-family:inherit;margin-top:3px;display:block;text-align:center;width:100%;text-decoration:none;transition:color 0.15s; }
  .ov-no-plan-btn:hover { color:rgba(74,222,128,0.75); }
  /* ══════════ POMODORO ══════════ */
  .pomo-dur-btn { flex:1; padding:7px 4px; background:var(--surface2); border:1px solid var(--border); border-radius:9px; color:var(--muted); font-family:'Heebo',sans-serif; font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s; }
  .pomo-dur-btn.active { background:#dc262622; border-color:#dc2626; color:#dc2626; }
  .pomo-dur-btn:hover { border-color:var(--accent); color:var(--text); }
  .pomo-hist-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border); font-size:12px; }
  .pomo-hist-row:last-child { border-bottom:none; }
  .pomo-hist-result { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
  #pomo-overlay { display:none; }
  #pomo-overlay.active { display:flex !important; }
  #pomo-reflect-modal { display:none; }
  #pomo-reflect-modal.active { display:flex !important; }


  :root { --pay: #f59e0b; }
  .fixed-expense-row { position:relative; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 14px 14px 36px; margin-bottom: 10px; transition: border-color 0.3s; }
  .fixed-expense-row.paid-this-month { border-color: rgba(74,222,128,0.45); background: rgba(74,222,128,0.07); }
  .fix-row-top { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .fix-emoji { font-size:22px; flex-shrink:0; }
  .fix-name { flex:1; font-size:17px; font-weight:700; }
  .fix-freq-badge { font-size:10px; padding:2px 7px; border-radius:10px; background: rgba(245,158,11,0.15); color: #f59e0b; font-weight:600; }
  .auto-charge-chip { font-size:10px; padding:2px 7px; border-radius:10px; background: var(--surface); border:1px solid var(--border); color:var(--muted); font-weight:600; cursor:pointer; transition:all 0.2s; }
  .wiz-tab { padding:5px 12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:16px; color:var(--muted); font-family:'Heebo',sans-serif; font-size:12px; cursor:pointer; transition:all 0.15s; }
  .wiz-tab.active { background:rgba(251,113,133,0.15); border-color:rgba(251,113,133,0.4); color:#fb7185; }
  .auto-charge-chip.on { background:rgba(245,158,11,0.18); border-color:#f59e0b88; color:#f59e0b; }
  .auto-charge-chip:hover { border-color: var(--p); color: var(--p); }
  .fix-amount-big { font-size:18px; font-weight:900; color: var(--pay); }
  .fix-pay-btn { padding:5px 12px; border-radius:8px; background: rgba(251,113,133,0.15); border: 1px solid #fb718544; color:#fb7185; font-size:12px; font-weight:700; cursor:pointer; transition:all 0.2s; }
  .fix-pay-btn:hover { background: rgba(251,113,133,0.25); }
  .fix-pay-btn.paid { background: rgba(74,222,128,0.18); border-color: rgba(74,222,128,0.6); color:#4ade80; }
  .fix-history-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
  .fix-hist-chip { font-size:10px; padding:2px 8px; border-radius:8px; background:var(--surface); border:1px solid var(--border); color:var(--muted); white-space:nowrap; }
  .fix-hist-chip.latest { background:rgba(245,158,11,0.12); border-color:#f59e0b55; color:#f59e0b; font-weight:700; }
  .fix-yearly-bar { height:6px; background:var(--surface); border-radius:3px; overflow:hidden; margin-top:6px; }
  .fix-yearly-fill { height:100%; background: linear-gradient(90deg, var(--pay), #fbbf24); border-radius:3px; transition:width 0.4s ease; }

  .shared-row { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--surface2); border-radius:10px; margin-bottom:7px; border:1px solid var(--border); }
  .shared-cat-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .shared-desc-text { flex:1; font-size:13px; }
  .shared-amount-text { font-size:14px; font-weight:900; color:#4ecdc4; }
  .shared-cat-bar { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
  .shared-cat-bar:last-child { border-bottom:none; }
  .shared-cat-name { flex:1; font-size:12px; font-weight:600; }
  .shared-cat-total { font-size:13px; font-weight:900; color:#4ecdc4; }
  .shared-cat-pct { font-size:11px; color:var(--muted); min-width:32px; text-align:left; }
  .shared-mini-bar { flex:2; height:6px; background:var(--surface); border-radius:3px; overflow:hidden; }
  .shared-mini-fill { height:100%; background:#4ecdc4; border-radius:3px; transition:width 0.4s; }

  .fix-log-input-row { display:flex; gap:8px; align-items:center; margin-top:8px; }

  .wst-highlight { box-shadow:0 0 0 3px #4ade80,0 0 14px #4ade8066 !important;animation:highlightPulse 1.5s ease 4; }

  @keyframes highlightPulse { 0%,100%{box-shadow:0 0 0 3px #4ade80,0 0 12px #4ade8066} 50%{box-shadow:0 0 0 5px #4ade80,0 0 24px #4ade8099} }

  .food-hist-day { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 8px; }
  .food-hist-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: var(--surface2); cursor: pointer; transition: background 0.2s; user-select: none; }
  .food-hist-header:hover { background: #2a2a38; }
  .food-hist-date { font-size: 13px; font-weight: 700; }
  .food-hist-dow  { font-size: 11px; color: var(--muted); margin-right: 8px; }
  .food-hist-stats { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; }
  .food-hist-toggle { font-size: 15px; color: var(--muted); transition: transform 0.25s; margin-right: 6px; line-height: 1; }
  .food-hist-toggle.open { transform: rotate(45deg); }
  .food-hist-meals { display: none; padding: 8px 12px; border-top: 1px solid var(--border); }
  .food-hist-meals.open { display: block; animation: fadeIn 0.2s ease; }

  /* ── WEEKLY PERFORMANCE ── */
  .food-perf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .food-perf-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
  .food-perf-title { font-size: 12px; color: var(--text); font-weight: 700; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }
  .food-perf-avg { font-size: 18px; font-weight: 900; line-height: 1; margin-bottom: 2px; }
  .food-perf-sub { font-size: 11px; color: var(--muted); }
  .food-mini-bars { display: flex; gap: 2px; margin-top: 12px; height: 36px; align-items: flex-end; }
  .food-mini-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; }
  .food-mini-bar { width: 100%; border-radius: 3px; min-height: 3px; }
  .food-mini-lbl { font-size: 7px; color: var(--muted); }

  /* ── BEVERAGE PANEL ── */
  .food-bev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .food-bev-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-align: center; }
  .food-bev-emoji { font-size: 26px; margin-bottom: 4px; }
  .food-bev-count { font-size: 30px; font-weight: 900; line-height: 1; margin-bottom: 2px; }
  .food-bev-unit  { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
  .food-bev-btns  { display: flex; gap: 8px; justify-content: center; }
  .food-bev-btn   { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 16px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; }
  .food-bev-btn:hover { border-color: var(--food); color: var(--food); transform: scale(1.1); }
  .food-bev-btn.minus:hover { border-color: #f87171; color: #f87171; }

  /* ── EDIT / DELETE BUTTONS ── */
  .row-actions { display: flex; gap: 4px; flex-shrink: 0; margin-right: 4px; }
  .btn-row-edit { background: none; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); cursor: pointer; font-size: 13px; padding: 4px 6px; line-height: 1; transition: all 0.18s; display: inline-flex; align-items: center; justify-content: center; }
  .btn-row-edit:hover { color: var(--guitar); border-color: var(--guitar); }
  .btn-row-del { background: none; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); cursor: pointer; font-size: 13px; padding: 3px 7px; line-height: 1; transition: all 0.18s; }
  .btn-row-del:hover { color: #ff4444; border-color: #ff4444; }

  /* ── EDIT MODAL ── */
  #edit-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000; display: none; align-items: center; justify-content: center; }
  #edit-modal-backdrop.open { display: flex; animation: fadeIn 0.2s; }
  #edit-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px; width: calc(100vw - 40px); max-width: 420px; max-height: 85vh; overflow-y: auto; }
  #edit-modal h3 { font-family: 'Secular One', sans-serif; font-size: 16px; margin-bottom: 16px; }
  #edit-modal-fields .form-group { margin-bottom: 12px; }
  .edit-modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

  /* ══════════ TIMER BOARD (panel-timers) ══════════ */
  /* form */
  .tmr-form { background: var(--surface2); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; margin-bottom: 20px; }
  .tmr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .tmr-form-full { grid-column: 1 / -1; }
  .tmr-form-row2 { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-end; }
  .tmr-form-row2 .tmr-field { flex: 1; min-width: 0; }
  .tmr-form-row2 .tmr-field-cal { flex: 0 0 auto; }
  .tmr-cal-btn { background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 10px; color: var(--muted); cursor: pointer; padding: 0 12px; font-size: 16px; height: 39px; flex-shrink: 0; transition: border-color 0.2s, background 0.2s, color 0.2s; position: relative; }
  .tmr-cal-btn:hover { border-color: #7c6fff; background: rgba(124,111,255,0.1); color: var(--text); }
  .tmr-cal-btn.date-set { border-color: #7c6fff66; color: #9b8fff; }
  .tmr-cal-btn .cal-date-hint { position: absolute; top: -18px; right: 0; font-size: 9px; color: #9b8fff; white-space: nowrap; font-family: 'Heebo', sans-serif; }
  @media(max-width:580px){
    .tmr-form-grid { grid-template-columns: 1fr; }
  }
  .tmr-field { display: flex; flex-direction: column; gap: 5px; }
  .tmr-field label { font-size: 0.62rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
  .tmr-field input, .tmr-field select { background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: 'Heebo', sans-serif; font-size: 0.88rem; padding: 9px 12px; outline: none; transition: border-color 0.2s, background 0.2s; width: 100%; box-sizing: border-box; }
  .tmr-field input::placeholder { color: rgba(255,255,255,0.2); }
  .tmr-field input:focus, .tmr-field select:focus { border-color: #7c6fff; background: rgba(124,111,255,0.07); }
  .tmr-field input[type="number"] { width: 100%; text-align: center; }
  .tmr-field input[type="number"]::-webkit-inner-spin-button { opacity: 0; }
  .tmr-field input[type="date"] { color-scheme: dark; cursor: pointer; }
  .tmr-field select option { background: #1a1a2e; }
  .tmr-btn-add { display:inline-flex; align-items:center; gap:5px; padding:6px 16px; background:rgba(120,180,255,0.12); border:1px solid rgba(120,180,255,0.35); border-radius:20px; color:rgba(120,180,255,0.9); font-family:'Heebo',sans-serif; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background 0.2s; align-self:end; }
  .tmr-btn-add:hover { background:rgba(120,180,255,0.22); }
  .tmr-btn-add:active { background:rgba(120,180,255,0.28); }
  /* controls */
  .tmr-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 auto 16px; padding: 0 2px; flex-wrap: wrap; }
  .tmr-count-label { font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
  .tmr-controls-right { display: flex; align-items: center; gap: 10px; }
  .tmr-sort-wrap { display: none; align-items: center; gap: 8px; }
  .tmr-sort-wrap.visible { display: flex; }
  .tmr-sort-wrap label { font-size: 0.62rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
  .tmr-sort-wrap select { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: 'Heebo', sans-serif; font-size: 0.76rem; padding: 6px 10px; outline: none; cursor: pointer; }
  .tmr-sort-wrap select option { background: #1a1a2e; }
  .tmr-mode-toggle { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .tmr-mode-btn { padding: 7px 12px; background: none; border: none; color: var(--muted); font-family: 'Heebo', sans-serif; font-size: 0.78rem; cursor: pointer; transition: background 0.2s, color 0.2s; white-space: nowrap; }
  .tmr-mode-btn.active { background: rgba(124,111,255,0.18); color: #9b8fff; font-weight: 600; }
  .tmr-mode-btn:hover:not(.active) { background: rgba(255,255,255,0.06); color: var(--text); }
  .tmr-view-toggle { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .tmr-view-btn { padding: 7px 13px; background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; transition: background 0.2s, color 0.2s; }
  .tmr-view-btn.active { background: rgba(124,111,255,0.18); color: #9b8fff; }
  .tmr-view-btn:hover:not(.active) { background: rgba(255,255,255,0.06); color: var(--text); }
  /* grid & list wrappers */
  .tmr-grid { display: none; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; align-items: start; }
  .tmr-grid.active { display: grid; }
  .tmr-list { display: none; flex-direction: column; gap: 10px; }
  .tmr-list.active { display: flex; }
  .tmr-empty { grid-column: 1/-1; text-align: center; color: rgba(255,255,255,0.15); font-size: 0.85rem; letter-spacing: 1px; padding: 60px 0; }
  .tmr-empty span { font-size: 1.8rem; display: block; margin-bottom: 10px; opacity: 0.35; }
  /* grid card */
  .timer-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: cardEnter 0.25s ease; transition: border-color 0.4s, box-shadow 0.3s; box-sizing: border-box; min-width: 0; overflow: hidden; }
  .timer-card:hover { border-color: rgba(255,255,255,0.16); box-shadow: 0 6px 28px rgba(0,0,0,0.3); }
  .timer-card.expired-card { border-color: rgba(255,80,80,0.35); }
  @keyframes fadeOut { to { opacity: 0; transform: scale(0.88); } }
  @keyframes slideOut { to { opacity: 0; max-height: 0; margin: 0; padding: 0; overflow: hidden; } }
  @keyframes cardEnter { from { opacity:0; transform:scale(0.92); } to { opacity:1; transform:scale(1); } }
  .timer-name-label { font-family: 'Heebo', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--text); text-align: center; letter-spacing: 0; line-height: 1.3; word-break: break-word; max-width: 100%; }
  .timer-sub-label { font-size: 0.67rem; color: var(--muted); text-align: center; margin-top: -6px; }
  .timer-notes-label { font-size: 0.7rem; color: var(--muted); text-align: center; opacity: 0.7; margin-top: -4px; line-height: 1.4; word-break: break-word; max-width: 100%; padding: 0 4px; }
  /* ring */
  .ring-wrap { position: relative; width: 80px; height: 80px; }
  .ring-wrap svg { display: block; }
  .ring-track { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 6; }
  .ring-progress { fill: none; stroke: #4caf50; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.9s ease-in-out, stroke 0.9s ease-in-out; }
  .ring-glow { fill: none; stroke: #4caf50; stroke-width: 6; stroke-linecap: round; opacity: 0.2; filter: blur(4px); transition: stroke-dashoffset 0.9s ease-in-out, stroke 0.9s ease-in-out; }
  .ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; }
  .time-primary { font-size: 0.72rem; font-weight: 600; color: #fff; line-height: 1.2; }
  .time-secondary { font-size: 0.52rem; color: rgba(255,255,255,0.42); }
  .target-date { font-size: 0.62rem; color: rgba(255,255,255,0.35); margin-top: 2px; text-align: center; }
  .expired-overlay { display: none; flex-direction: column; align-items: center; gap: 7px; width: 100%; }
  .expired-overlay.show { display: flex; }
  .expired-msg { font-size: 0.85rem; font-weight: 500; color: #ff5252; animation: blink 1.2s ease-in-out infinite; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
  .tmr-reset-btn { padding: 6px 16px; background: linear-gradient(135deg,#7c6fff,#c56fff); border: none; border-radius: 7px; color: #fff; font-family: 'DM Mono', monospace; font-size: 0.75rem; cursor: pointer; transition: transform 0.15s; }
  .tmr-reset-btn:hover { transform: scale(1.05); }
  .del-btn { position: absolute; top: 9px; left: 9px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); font-size: 0.68rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; }
  .del-btn:hover { background: rgba(255,80,80,0.3); color: #fff; }
  .edit-btn { position: absolute; top: 9px; right: 9px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(124,111,255,0.12); color: rgba(124,111,255,0.6); font-size: 0.72rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; }
  .edit-btn:hover { background: rgba(124,111,255,0.3); color: #fff; }
  .row-edit-btn { width: 28px; height: 28px; border-radius: 7px; border: 1px solid rgba(124,111,255,0.25); background: transparent; color: rgba(124,111,255,0.6); font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s, border-color 0.2s; }
  .row-edit-btn:hover { background: rgba(124,111,255,0.18); border-color: rgba(124,111,255,0.5); color: #9b8fff; }
  .future-badge { font-size: 0.62rem; color: rgba(255,200,80,0.9); background: rgba(255,200,80,0.09); border: 1px solid rgba(255,200,80,0.22); border-radius: 20px; padding: 2px 9px; }
  /* list row */
  .timer-row { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 20px; display: grid; grid-template-columns: 40px 1fr 110px 30px; align-items: center; gap: 16px; animation: cardEnter 0.25s ease; transition: border-color 0.3s, box-shadow 0.25s; }
  .timer-row:hover { border-color: rgba(255,255,255,0.16); box-shadow: 0 4px 18px rgba(0,0,0,0.25); }
  .timer-row.expired-card { border-color: rgba(255,80,80,0.3); }
  .row-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .row-name { font-family: 'Syne', sans-serif; font-size: 0.92rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .row-meta { font-size: 0.65rem; color: var(--muted); }
  /* mini ring */
  .mini-ring-wrap { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
  .mini-ring-wrap svg { display: block; }
  .mini-ring-track { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 5; }
  .mini-ring-progress { fill: none; stroke: #4caf50; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 0.9s ease-in-out, stroke 0.9s ease-in-out; }
  .mini-ring-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .mini-ring-inner span { font-size: 0.5rem; color: rgba(255,255,255,0.5); }
  .row-countdown { text-align: center; }
  .rtime-primary { font-size: 0.95rem; font-weight: 500; color: #fff; }
  .rtime-secondary { font-size: 0.62rem; color: var(--muted); }
  .row-expired-msg { font-size: 0.72rem; color: #ff5252; animation: blink 1.2s ease-in-out infinite; display: none; }
  .row-expired-msg.show { display: block; }
  .row-actions { display: flex; flex-direction: column; gap: 4px; align-items: center; flex-shrink: 0; }
  .row-del-btn { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: transparent; color: rgba(255,255,255,0.3); font-size: 0.75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s, border-color 0.2s; }
  .row-del-btn:hover { background: rgba(255,80,80,0.22); border-color: rgba(255,80,80,0.4); color: #fff; }
  .row-reset-btn { width: 26px; height: 26px; background: linear-gradient(135deg,#7c6fff,#c56fff); border: none; border-radius: 7px; color: #fff; font-size: 0.75rem; cursor: pointer; transition: transform 0.15s; display: none; align-items: center; justify-content: center; }
  .row-reset-btn.show { display: flex; }
  .row-reset-btn:hover { transform: scale(1.04); }
  @media(max-width:500px){ .timer-row { grid-template-columns: 44px 1fr auto auto; gap: 10px; } }

/* ── Star background ── */
#star-bg { position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ═══════════════════════════════════════════
   TRACKERS HOME v8 — Orbit bubbles + AI strip + Datepicker
   ═══════════════════════════════════════════ */

/* Fixed single-screen */
html, body { height:100%; overflow:hidden; margin:0; padding:0; }
.container { height:100vh; display:flex; flex-direction:column; overflow:hidden; width:100%; box-sizing:border-box; padding-top:0 !important; }
header {
  flex-shrink:0; width:100%;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between;
  padding:18px 14px 18px 8px !important;
  direction:ltr;
}
header .logo-text {
  font-size:17px !important; letter-spacing:2px !important;
  margin:0 !important; flex-shrink:0; direction:ltr; line-height:1;
}
header .header-center {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1px;
  flex:1; min-width:0;
  direction:ltr; pointer-events:none;
}
header .header-spacer { width:60px; flex-shrink:0; }
#dp-chip-icon { display:none !important; }
/* DatePicker widget — fixed center below header */
#clock-side-widget {
  position:relative; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:0 0 6px;
  background:transparent;
  border-top:none;
  pointer-events:auto;
  transition:opacity 0.2s ease;
}
#clock-side-widget.hidden { opacity:0; pointer-events:none; }
/* Card open — animate up to top of screen */
#clock-side-widget.card-open {
  position:fixed; top:0; left:0; right:0; z-index:1600;
  padding:10px 0;
  background:rgba(10,10,20,0.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:none;
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 2px 12px rgba(0,0,0,0.4);
  animation:slideDownFromTop 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
#clock-side-widget.card-open .dp-nav-arrow {
  width:34px; height:34px; font-size:17px; border-radius:10px;
}
#clock-side-widget.card-open .dp-closed {
  font-size:14px; padding:5px 13px; border-radius:10px;
}
#clock-side-widget.card-open .dp-chip-label {
  font-size:14px;
}
#clock-side-widget.card-open .dp-today-btn {
  font-size:12px; padding:2px 7px;
}
@keyframes slideDownFromTop {
  from { transform:translateY(-100%); opacity:0; }
  to   { transform:translateY(0);     opacity:1; }
}
#clock-side-time {
  font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700;
  letter-spacing:2px; line-height:1;
  background:linear-gradient(135deg,#ff6b35,#a78bfa);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
#clock-side-date {
  font-family:'Heebo',sans-serif; font-size:9px; color:var(--muted); letter-spacing:0.2px;
}
#home-scroll-outer { flex:1; overflow:hidden; display:flex; flex-direction:column; width:100%; }
/* Centering wrapper for hero + AI strip + actions */
#hero-wrap { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:100%; padding-top:2px; }
#home-scroll-area  { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-top:14px; }

/* ── Clock: big time + small date ── */
.clock-wrap {
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:1px 0 1px;
}
.clock-time-big {
  font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:700; letter-spacing:2px; line-height:1;
  background:linear-gradient(135deg,#ff6b35,#a78bfa); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.clock-date-line {
  font-family:'Heebo',sans-serif; font-size:10px; color:var(--muted); letter-spacing:0.3px;
}

/* ── Datepicker chip (top-left, collapsing) ── */
#dp-chip {
  position:relative; z-index:960;
  font-family:'Heebo',sans-serif;
}
#dp-chip.floating {
  position:fixed; top:12px; left:12px; z-index:960; margin:0 !important;
}
body.dp-floating #dp-nav-bar .dp-nav-arrow { display:none !important; }
/* Nav arrows — match dp-closed style */
.dp-nav-arrow {
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.11);
  border-radius:8px; color:rgba(255,255,255,0.45);
  font-size:13px; width:26px; height:26px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0; line-height:1; transition:background 0.15s, color 0.15s;
  flex-shrink:0;
}
.dp-nav-arrow:hover { background:rgba(255,255,255,0.13); color:rgba(255,255,255,0.85); border-color:rgba(255,255,255,0.22); }
.dp-closed {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.11);
  border-radius:8px; padding:4px 10px;
  cursor:pointer; user-select:none;
  transition:border-color 0.2s, background 0.15s;
  white-space:nowrap;
  font-size:11px;
}
.dp-closed:hover { background:rgba(255,255,255,0.11); border-color:rgba(255,255,255,0.22); }
.dp-today-btn {
  background:rgba(167,139,250,0.12); border:1px solid rgba(167,139,250,0.35);
  border-radius:10px; color:#c4b5fd; font-family:'Heebo',sans-serif; font-size:9px;
  padding:1px 5px; cursor:pointer; transition:background 0.15s, box-shadow 0.15s; white-space:nowrap;
  box-shadow:0 0 5px rgba(167,139,250,0.18);
}
.dp-today-btn:hover { background:rgba(167,139,250,0.28); box-shadow:0 0 14px rgba(167,139,250,0.45); }
.dp-chip-label {
  font-size:11px; color:rgba(255,255,255,0.5); white-space:nowrap;
  display:flex; align-items:center; gap:4px; letter-spacing:0.2px;
  font-family:'Heebo',sans-serif;
}
.dp-chip-label.off-today { color:var(--accent); }
.dp-open-panel {
  position:fixed; top:auto; left:50%; transform:translateX(-50%) translateY(-6px) scale(0.97);
  background:#0f0c1e; border:1px solid rgba(167,139,250,0.3);
  border-radius:18px; padding:20px 24px 18px;
  box-shadow:0 12px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(167,139,250,0.08);
  min-width:200px;
  display:block; visibility:hidden; opacity:0;
  transition:opacity 0.2s ease, transform 0.22s cubic-bezier(0.22,1,0.36,1), visibility 0s 0.22s;
  pointer-events:none;
  z-index:9999;
}
.dp-open-panel.visible {
  visibility:visible; opacity:1;
  transform:translateX(-50%) translateY(0) scale(1);
  transition:opacity 0.2s ease, transform 0.22s cubic-bezier(0.22,1,0.36,1), visibility 0s 0s;
  pointer-events:auto;
}
#dp-chip.floating .dp-open-panel {
  left:12px; transform:translateX(0) translateY(-6px) scale(0.97);
  min-width:240px;
  padding: 20px 28px 18px;
}
#dp-chip.floating .dp-open-panel.visible {
  transform:translateX(0) translateY(0) scale(1);
}
.dp-panel-month { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:1.5px; text-align:center; margin-bottom:4px; }
.dp-panel-day   { font-size:56px; font-weight:700; line-height:1; color:var(--text); font-family:'Rajdhani',sans-serif; text-align:center; }
.dp-panel-dow   { font-size:11px; color:rgba(167,139,250,0.8); text-align:center; margin-bottom:12px; letter-spacing:0.5px; }
.dp-nav { display:flex; gap:4px; justify-content:center; margin-bottom:10px; }
.dp-nav button {
  background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:9px;
  color:var(--muted); width:30px; height:30px; cursor:pointer;
  font-size:14px; display:flex; align-items:center; justify-content:center;
  padding:0; transition:all 0.15s; line-height:1;
}
.dp-nav button:hover { color:var(--text); border-color:rgba(167,139,250,0.5); background:rgba(167,139,250,0.1); }
.dp-panel-today {
  width:100%; background:none; border:1px solid rgba(167,139,250,0.35);
  border-radius:10px; color:#a78bfa; font-family:'Heebo',sans-serif;
  font-size:11px; padding:6px 0; cursor:pointer; transition:background 0.15s;
  flex-shrink:0; display:block;
  box-sizing: border-box;
  min-width: 0;
}
.dp-panel-today:hover { background:rgba(167,139,250,0.14); }

/* ── Orbit bubbles around logo ── */
#home-hero {
  position:relative;
  width:min(420px,100vw); height:min(370px,96vw);
  margin-top:42px;
  flex-shrink:0;
}
#orbit-bubbles { position:absolute; inset:0; }
#home-hero .logo {
  position:absolute; top:63%; left:50%;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center;
  cursor:pointer; z-index:2; pointer-events:auto;
}
/* Orbit positions: 6 bubbles, rainbow arc above + sides */
.orbit-bubble {
  position:absolute; display:flex; flex-direction:column; align-items:center;
  gap:4px; cursor:pointer; background:none; border:none; padding:0;
  -webkit-tap-highlight-color:transparent; z-index:3;
  transform-origin:center center;
}
.orbit-circle {
  width:clamp(54px,15vw,68px); height:clamp(54px,15vw,68px); border-radius:50%;
  background:var(--surface); border:2px solid transparent;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(22px,6vw,27px); line-height:1; transition:transform 0.2s, box-shadow 0.2s;
  will-change:transform;
}
.orbit-bubble:hover .orbit-circle,
.orbit-bubble:active .orbit-circle { transform:scale(1.12); }
.orbit-label { font-size:clamp(11px,2.8vw,13px); color:var(--muted); font-family:'Heebo',sans-serif; white-space:nowrap; transition:color 0.2s; }
.orbit-bubble:hover .orbit-label { color:var(--text); }

/* Rainbow colors + resting glow per category */
.orbit-bubble[data-cat="workout"]    .orbit-circle { border-color:rgba(255,107,53,0.65);  box-shadow:0 0 14px rgba(255,107,53,0.35); }
.orbit-bubble[data-cat="food"]       .orbit-circle { border-color:rgba(78,205,196,0.65);  box-shadow:0 0 14px rgba(78,205,196,0.35); }
.orbit-bubble[data-cat="payments"]   .orbit-circle { border-color:rgba(148,163,184,0.65);  box-shadow:0 0 14px rgba(148,163,184,0.35); }
.orbit-bubble[data-cat="meditation"] .orbit-circle { border-color:rgba(6,182,212,0.65);   box-shadow:0 0 14px rgba(6,182,212,0.35); }
.orbit-bubble[data-cat="guitar"]     .orbit-circle { border-color:rgba(167,139,250,0.65); box-shadow:0 0 14px rgba(167,139,250,0.35); }
.orbit-bubble[data-cat="art"]        .orbit-circle { border-color:rgba(249,199,79,0.65);  box-shadow:0 0 14px rgba(249,199,79,0.35); }
.orbit-bubble[data-cat="data"]       .orbit-circle { border-color:rgba(167,139,250,0.65); box-shadow:0 0 14px rgba(167,139,250,0.35); }
.orbit-bubble[data-cat="add"]        .orbit-circle { border:2px dashed rgba(74,222,128,0.5); background:rgba(74,222,128,0.06); font-size:20px; color:#4ade80; width:48px; height:48px; }
.orbit-bubble[data-cat="add"]        .orbit-label  { font-size:9px; }
.orbit-data-pinned .orbit-circle { border-color:rgba(167,139,250,0.8); box-shadow:0 0 18px rgba(167,139,250,0.45); }

/* Hover glow — amplifies each category's own colour */
.orbit-bubble[data-cat="workout"]:hover    .orbit-circle { border-color:rgba(255,107,53,1);   box-shadow:0 0 22px 4px rgba(255,107,53,0.65),  0 0 40px rgba(255,107,53,0.3); }
.orbit-bubble[data-cat="food"]:hover       .orbit-circle { border-color:rgba(78,205,196,1);   box-shadow:0 0 22px 4px rgba(78,205,196,0.65),  0 0 40px rgba(78,205,196,0.3); }
.orbit-bubble[data-cat="payments"]:hover   .orbit-circle { border-color:rgba(148,163,184,1);   box-shadow:0 0 22px 4px rgba(148,163,184,0.65),  0 0 40px rgba(148,163,184,0.3); }
.orbit-bubble[data-cat="meditation"]:hover .orbit-circle { border-color:rgba(6,182,212,1);    box-shadow:0 0 22px 4px rgba(6,182,212,0.65),   0 0 40px rgba(6,182,212,0.3); }
.orbit-bubble[data-cat="guitar"]:hover     .orbit-circle { border-color:rgba(167,139,250,1);  box-shadow:0 0 22px 4px rgba(167,139,250,0.65), 0 0 40px rgba(167,139,250,0.3); }
.orbit-bubble[data-cat="art"]:hover        .orbit-circle { border-color:rgba(249,199,79,1);   box-shadow:0 0 22px 4px rgba(249,199,79,0.65),  0 0 40px rgba(249,199,79,0.3); }
.orbit-bubble[data-cat="data"]:hover       .orbit-circle { border-color:rgba(167,139,250,1);  box-shadow:0 0 22px 4px rgba(167,139,250,0.65), 0 0 40px rgba(167,139,250,0.3); }
.orbit-bubble[data-cat="add"]:hover        .orbit-circle { border-color:rgba(74,222,128,0.8); box-shadow:0 0 18px 3px rgba(74,222,128,0.45); }

@keyframes orbitFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* Orbit positions — 3 left, 3 right, arc shape */
/* Will be set inline by JS for full control */

@keyframes sessionGlowPurple {
  0%,100% { box-shadow:0 0 8px 1px rgba(167,139,250,0.25), 0 0 0 0 rgba(167,139,250,0); }
  50%     { box-shadow:0 0 22px 6px rgba(167,139,250,0.55), 0 0 40px 10px rgba(167,139,250,0.18); }
}
@keyframes sessionGlowCyan {
  0%,100% { box-shadow:0 0 8px 1px rgba(6,182,212,0.25), 0 0 0 0 rgba(6,182,212,0); }
  50%     { box-shadow:0 0 22px 6px rgba(6,182,212,0.55), 0 0 40px 10px rgba(6,182,212,0.18); }
}
@keyframes sessionGlowOrange {
  0%,100% { box-shadow:0 0 8px 1px rgba(255,107,53,0.25), 0 0 0 0 rgba(255,107,53,0); }
  50%     { box-shadow:0 0 22px 6px rgba(255,107,53,0.6), 0 0 40px 10px rgba(255,107,53,0.2); }
}
@keyframes twBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Orbit action buttons below AI strip ── */
#orbit-actions {
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:10px auto 0; max-width:380px; width:calc(100% - 32px);
  flex-shrink:0;
}
/* Fixed FAB add-category button at bottom-left */
.orbit-add-micro {
  position:fixed; bottom:28px; left:18px; z-index:100;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  background:rgba(15,15,19,0.85); border:1px dashed rgba(74,222,128,0.4);
  border-radius:16px; padding:4px 8px; cursor:pointer;
  color:#4ade80; font-family:'Heebo',sans-serif;
  opacity:0.35; transition:opacity 0.2s, box-shadow 0.2s;
  backdrop-filter:blur(6px);
}
.orbit-add-micro:hover, .orbit-add-micro:active { opacity:0.85; box-shadow:0 0 8px rgba(74,222,128,0.25); }
.orbit-add-micro #action-add-icon { font-size:11px; line-height:1; }
.orbit-add-micro #action-add-label { font-size:8px; white-space:nowrap; }
/* Data button — compact, not full-width */
.orbit-action-btn {
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(167,139,250,0.2);
  border-radius:14px; padding:7px 16px; cursor:pointer;
  transition:background 0.15s, border-color 0.15s, box-shadow 0.15s;
  width:auto;
}
.orbit-action-btn:hover { background:rgba(167,139,250,0.1); border-color:rgba(167,139,250,0.45); box-shadow:0 0 12px rgba(167,139,250,0.2); }
.oa-icon  { font-size:16px; line-height:1; }
.oa-label { font-size:11px; color:var(--muted); font-family:'Heebo',sans-serif; }

/* ── Main-screen bottom nav row (evenly spaced) ── */
#main-nav-row {
  display:flex; justify-content:center; align-items:flex-start; gap:18px;
  margin:2px auto 8px; max-width:400px; width:100%;
  flex-shrink:0;
}
#main-nav-row .orbit-bubble {
  position:static !important; transform:none !important;
}
/* ── FAB clusters — right & left ── */
#fab-cluster-right {
  position:fixed; bottom:12px; right:12px; z-index:500;
  display:flex; flex-direction:row; align-items:flex-end; gap:14px;
}
#fab-cluster-left {
  position:fixed; bottom:12px; left:12px; z-index:500;
  display:flex; flex-direction:row; align-items:flex-end; gap:14px;
}
#fab-cluster-right button, #fab-cluster-left button {
  display:flex; flex-direction:column; align-items:center; gap:1px;
  background:none; border:none; cursor:pointer; padding:0;
  -webkit-tap-highlight-color:transparent; transition:transform 0.2s;
}
#fab-cluster-right button:hover, #fab-cluster-left button:hover { transform:scale(1.1); }
#fab-cluster-right .orbit-circle, #fab-cluster-left .orbit-circle { width:36px; height:36px; font-size:16px; will-change:auto; }
#fab-cluster-right .orbit-label,  #fab-cluster-left .orbit-label  { font-size:7px; }
#pomo-fab .orbit-circle    { border-color:rgba(252,129,74,0.65);  box-shadow:0 0 10px rgba(252,129,74,0.3); }
#pomo-fab:hover .orbit-circle { border-color:rgba(252,129,74,1);  box-shadow:0 0 16px 3px rgba(252,129,74,0.55), 0 0 30px rgba(252,129,74,0.25); }
#streaks-fab .orbit-circle { border-color:rgba(251,191,36,0.65);  box-shadow:0 0 10px rgba(251,191,36,0.3); }
#streaks-fab:hover .orbit-circle { border-color:rgba(251,191,36,1); box-shadow:0 0 16px 3px rgba(251,191,36,0.55), 0 0 30px rgba(251,191,36,0.25); }
#timers-fab .orbit-circle    { border-color:rgba(99,179,237,0.65);  box-shadow:0 0 10px rgba(99,179,237,0.3); }
#timers-fab:hover .orbit-circle { border-color:rgba(99,179,237,1); box-shadow:0 0 16px 3px rgba(99,179,237,0.55), 0 0 30px rgba(99,179,237,0.25); }
#payments-fab .orbit-circle  { border-color:rgba(148,163,184,0.65);  box-shadow:0 0 10px rgba(148,163,184,0.3); }
#payments-fab:hover .orbit-circle { border-color:rgba(148,163,184,1); box-shadow:0 0 16px 3px rgba(148,163,184,0.55), 0 0 30px rgba(148,163,184,0.25); }
#living-fab .orbit-circle    { border-color:rgba(251,113,133,0.65);  box-shadow:0 0 10px rgba(251,113,133,0.3); }
#living-fab:hover .orbit-circle { border-color:rgba(251,113,133,1); box-shadow:0 0 16px 3px rgba(251,113,133,0.55), 0 0 30px rgba(251,113,133,0.25); }
/* Bottom-arc orbit colours */
.orbit-bubble[data-cat="timers"]   .orbit-circle { border-color:rgba(99,179,237,0.65);  box-shadow:0 0 14px rgba(99,179,237,0.35); }
.orbit-bubble[data-cat="plans"]    .orbit-circle { border-color:rgba(72,199,142,0.65);  box-shadow:0 0 14px rgba(72,199,142,0.35); }
.orbit-bubble[data-cat="pomo"]     .orbit-circle { border-color:rgba(252,129,74,0.65);  box-shadow:0 0 14px rgba(252,129,74,0.35); }
.orbit-bubble[data-cat="week"]     .orbit-circle { border-color:rgba(251,191,36,0.65);  box-shadow:0 0 14px rgba(251,191,36,0.35); }
.orbit-bubble[data-cat="timers"]:hover  .orbit-circle { border-color:rgba(99,179,237,1);   box-shadow:0 0 22px 4px rgba(99,179,237,0.65),  0 0 40px rgba(99,179,237,0.3); }
.orbit-bubble[data-cat="plans"]:hover   .orbit-circle { border-color:rgba(72,199,142,1);   box-shadow:0 0 22px 4px rgba(72,199,142,0.65),  0 0 40px rgba(72,199,142,0.3); }
.orbit-bubble[data-cat="pomo"]:hover    .orbit-circle { border-color:rgba(252,129,74,1);   box-shadow:0 0 22px 4px rgba(252,129,74,0.65),  0 0 40px rgba(252,129,74,0.3); }
.orbit-bubble[data-cat="week"]:hover    .orbit-circle { border-color:rgba(251,191,36,1);   box-shadow:0 0 22px 4px rgba(251,191,36,0.65),  0 0 40px rgba(251,191,36,0.3); }

@keyframes catCardSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes popupFadeIn {
  from { transform:translate(-50%,-50%) scale(0.93); opacity:0; }
  to   { transform:translate(-50%,-50%) scale(1);    opacity:1; }
}
@keyframes catCardSlideDown {
  from { transform: translateY(0); }
  to   { transform: translateY(110%); }
}
/* ── Floating cat card — bottom sheet ── */
  #cat-card-overlay { position:fixed; inset:0; z-index:870; display:none; align-items:flex-end; justify-content:center; padding:0 12px 16px; box-sizing:border-box; }
  #cat-card-overlay.open { display:flex; }
  #cat-card-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); }
  #cat-card-sheet {
    position:relative; z-index:1; width:min(520px,calc(100vw - 24px)); max-height:88vh;
    background:var(--bg); border-radius:22px; border:1px solid var(--border);
    display:flex; flex-direction:column;
    overflow:hidden;
  }
  #cat-card-overlay.open #cat-card-sheet {
    animation: catCardSlideUp 0.45s cubic-bezier(0.22,1,0.36,1) both;
  }
  #cat-card-sheet.ccs-closing {
    animation: catCardSlideDown 0.3s cubic-bezier(0.4,0,1,1) both !important;
  }
.ccs-drag-handle { display:flex; justify-content:center; padding:10px 0 4px; flex-shrink:0; cursor:grab; }
.ccs-drag-handle-pill { width:36px; height:4px; background:rgba(255,255,255,0.2); border-radius:2px; }
.ccs-header {
  display:flex; justify-content:flex-start; align-items:center;
  padding:8px 20px 10px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  flex-shrink:0;
  position:relative; overflow:hidden;
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  transition:background 0.3s, box-shadow 0.3s;
}
.ccs-header::before {
  content:'';
  position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent 20%, rgba(255,255,255,0.18) 60%, transparent 100%);
  pointer-events:none;
}
.ccs-title {
  font-family:'Heebo',sans-serif;
  font-weight:600;
  font-size:15px;
  color:rgba(255,255,255,0.82);
  text-align:right;
  direction:rtl;
  letter-spacing:0.2px;
  position:relative; z-index:1;
}
#cat-card-content { flex:1; overflow-y:auto; overflow-x:hidden; }
.ccs-close-pill { display:flex; justify-content:center; padding:10px 0 14px; flex-shrink:0; border-top:1px solid var(--border); }
.ccs-close-pill button { padding:10px 40px; background:var(--surface2); border:1px solid var(--border); border-radius:24px; color:var(--muted); font-family:'Heebo',sans-serif; font-size:14px; cursor:pointer; transition:all 0.2s; }
.ccs-close-pill button:hover { background:rgba(255,255,255,0.08); color:var(--text); }

.ccs-action-btn { position:relative; z-index:1; margin-right:auto; }

/* ── Shared panel-sheet header (תוכניות / לוח שבועי / סדר יום) ── */
.psh {
  display:flex; justify-content:flex-start; align-items:center;
  padding:10px 18px 12px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  flex-shrink:0; position:relative; overflow:hidden;
  backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  direction:rtl; transition:background 0.3s;
}
.psh::before {
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent 20%, rgba(255,255,255,0.18) 60%, transparent 100%);
  pointer-events:none;
}
.psh-title {
  font-family:'Heebo',sans-serif; font-weight:600; font-size:17px;
  color:rgba(255,255,255,0.82); letter-spacing:0.2px;
  position:relative; z-index:1;
}
.psh-close {
  margin-right:auto; position:relative; z-index:1;
  background:none; border:none; color:rgba(255,255,255,0.4);
  font-size:17px; cursor:pointer; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background 0.15s, color 0.15s; padding:0;
}
.psh-close:hover { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.8); }

/* ── Weekly data toggle ── */
.weekly-toggle-row {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px 8px; cursor:pointer; user-select:none;
  border-top:1px solid var(--border); margin:4px 0 0;
  font-family:'Heebo',sans-serif; font-size:13px; color:var(--muted);
}
.weekly-toggle-row .wt-arrow { transition:transform 0.3s; display:inline-block; }
.weekly-toggle-row.open .wt-arrow { transform:rotate(180deg); }
#weekly-body { max-height:0; overflow:hidden; transition:max-height 0.45s ease; }
#weekly-body.open { max-height:5000px; }

/* ── Hide old tabs ── */
.tabs-wrap { display:none !important; }
.hrow-nav, .hrow-status { display:none !important; }
.header-right, .header-left { display:flex; flex-direction:column; align-items:center; width:100%; }

  /* ══════════ HOBBY BUTTONS (Art/Leisure panel) ══════════ */
  .hobby-grid {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    padding: 8px 0 4px;
  }
  .hobby-btn {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 12px 10px 10px; min-width: 80px; max-width: 96px; flex: 0 0 auto;
    background: var(--surface2); border: 1.5px solid var(--border); border-radius: 16px;
    cursor: pointer; transition: all 0.22s ease; position: relative;
    font-family: 'Heebo', sans-serif; color: var(--text);
  }
  .hobby-btn:hover { border-color: var(--art); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(249,199,79,0.15); }
  .hobby-btn:active { transform: scale(0.95); }
  .hobby-btn.selected { border-color: var(--art); background: rgba(249,199,79,0.10); box-shadow: 0 0 16px rgba(249,199,79,0.2); }
  .hobby-btn .hobby-emoji { font-size: 28px; line-height: 1; transition: transform 0.2s; }
  .hobby-btn:hover .hobby-emoji { transform: scale(1.15); }
  .hobby-btn .hobby-label { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2; color: var(--muted); transition: color 0.2s; }
  .hobby-btn.selected .hobby-label { color: var(--art); }
  .hobby-btn .hobby-today-dot { position: absolute; top: 6px; left: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--art); opacity: 0; transition: opacity 0.2s; }
  .hobby-btn .hobby-today-dot.has-data { opacity: 1; }
  .hobby-btn-add {
    border-style: dashed; border-color: var(--border); background: transparent;
    min-width: 80px; opacity: 0.6; transition: all 0.22s;
  }
  .hobby-btn-add:hover { opacity: 1; border-color: var(--art); background: rgba(249,199,79,0.05); }
  .hobby-btn-add .hobby-emoji { font-size: 22px; color: var(--muted); }

  /* Mini-form that appears below the grid */
  .hobby-mini-form {
    display: none; background: var(--surface2); border: 1.5px solid var(--art);
    border-radius: 14px; padding: 16px; margin-top: 12px;
    animation: fadeIn 0.22s ease; position: relative;
    box-shadow: 0 4px 24px rgba(249,199,79,0.1);
  }
  .hobby-mini-form.open { display: block; }
  .hobby-mini-form-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
  }
  .hobby-mini-form-title {
    font-family: 'Secular One', sans-serif; font-size: 15px;
    display: flex; align-items: center; gap: 8px; color: var(--art);
  }
  .hobby-mini-form-close {
    background: none; border: none; color: var(--muted); font-size: 18px;
    cursor: pointer; padding: 0 4px; line-height: 1; transition: color 0.2s;
  }
  .hobby-mini-form-close:hover { color: var(--text); }
  .hobby-mini-form .inline-row { display: flex; gap: 8px; margin-bottom: 10px; }
  .hobby-mini-form .inline-row input,
  .hobby-mini-form .inline-row textarea {
    flex: 1; font-size: 13px; padding: 8px 10px; border-radius: 10px;
  }
  .hobby-mini-form textarea { min-height: 42px; resize: none; }
  .hobby-mini-save {
    width: 100%; padding: 10px; border: none; border-radius: 10px;
    background: var(--art); color: #000; font-family: 'Heebo', sans-serif;
    font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s;
  }
  .hobby-mini-save:hover { opacity: 0.85; transform: translateY(-1px); }

  /* Add-custom-hobby modal */
  #hobby-add-modal {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.6); align-items: center; justify-content: center;
  }
  #hobby-add-modal.open { display: flex; }
  .hobby-add-box {
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
    padding: 22px; width: 300px; max-width: 90vw; animation: fadeIn 0.2s;
  }
  .hobby-add-box .form-group { margin-bottom: 14px; }
  /* Long-press delete tooltip */
  .hobby-btn-delete {
    display: none; position: absolute; top: -8px; right: -8px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #ef4444; color: #fff; border: 2px solid var(--surface);
    font-size: 12px; line-height: 1; cursor: pointer;
    align-items: center; justify-content: center;
    z-index: 5; animation: fadeIn 0.15s;
  }
  .hobby-btn-delete.show { display: flex; }


/* ════════════════════════════════
   VIEW TRANSITIONS — tab switching
   ════════════════════════════════ */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: ease-out;
}
::view-transition-old(root) {
  animation-name: vt-fade-out;
}
::view-transition-new(root) {
  animation-name: vt-fade-in;
}
@keyframes vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ════════════════════════════════
   DESKTOP CONTAINER — constrain fixed elements to 480px column
   On mobile (≤480px) calc() resolves to original offset, no change.
   Formula: right/left: calc(50vw - 240px + Npx)  where N = original offset
   ════════════════════════════════ */
@media (min-width: 480px) {
  #fab-cluster-right  { right: calc(50vw - 228px); }  /* 240 - 12 */
  #fab-cluster-left   { left:  calc(50vw - 228px); }  /* 240 - 12 */
  .claude-fab         { right: calc(50vw - 220px); }  /* 240 - 20 */
  .orbit-add-micro    { left:  calc(50vw - 222px); }  /* 240 - 18 */
  /* #action-add-btn — in header, no offset override needed */
  /* #dp-chip.floating — clock-side-widget is now in-flow, no fixed offset needed */
  #timer-panel        { left:  calc(50vw - 220px); }  /* 240 - 20 */
  #global-settings-btn { right: calc(50vw - 228px) !important; }  /* 240 - 12 */
  #nav-settings-panel { right: calc(50vw - 228px); }  /* 240 - 12 */
  #save-toast         { right: calc(50vw - 220px); }  /* 240 - 20 */
  #version-toast      { right: calc(50vw - 224px); }  /* 240 - 16 */
}

/* ── Quick Add Panel ─────────────────────────────────────────────────────── */
#quick-add-panel {
  position: fixed;
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px 10px;
  background: #13131f;
  border: 1px solid rgba(167,139,250,0.15);
  border-radius: 12px;
  z-index: 1800;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.34,1.28,0.64,1);
}
#quick-add-panel.qa-visible {
  opacity: 1;
  transform: translateY(0);
}
.qa-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 58px;
  background: none;
  border: 1.5px solid var(--qa-color, rgba(167,139,250,0.3));
  border-radius: 14px;
  padding: 8px 4px 6px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  color: rgba(255,255,255,0.7);
}
.qa-btn:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
  box-shadow: 0 0 10px var(--qa-color, rgba(167,139,250,0.3));
}
.qa-btn:active { transform: scale(0.95); }
.qa-emoji { font-size: 20px; line-height: 1; }
.qa-label {
  font-family: 'Heebo', sans-serif;
  font-size: 9px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}