/* ═══ Progress Card ═══ */
.progress-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 20px;display:flex;align-items:center;gap:24px;box-shadow:var(--shadow-1);transition:background var(--duration-slow),transform var(--duration-base)}
.progress-card:hover{transform:translateY(-2px)}
.progress-card::before{content:'';position:absolute;top:-9px;inset-inline-start:26px;width:62px;height:19px;background:var(--tape);transform:rotate(-4deg);border-radius:2px;pointer-events:none}

.ring-wrap{position:relative;width:88px;height:88px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--accent) calc(var(--pct) * 1%),var(--accent-soft) 0);
  transition:--pct var(--duration-slow) cubic-bezier(.22,1,.36,1)}
.ring-inner{position:relative;width:72px;height:72px;background:var(--surface);border-radius:50%;display:grid;place-items:center;z-index:2;box-shadow:inset 0 2px 6px rgba(0,0,0,.04);transition:background var(--duration-slow)}
.ring-text{font-family:var(--font-personality);font-weight:700;font-size:26px;color:var(--text);line-height:1;display:flex;align-items:baseline;gap:2px;z-index:3}
.ring-text small{font-size:12px;opacity:.6;font-weight:700}
/* The completion breath: a halo that leaves the ring rather than a shadow that
   grows out of it. Same slow exhale, but it only touches transform and opacity,
   so the progress ring stays on the compositor — a box-shadow loop would repaint
   the whole card on every frame while the ring sat at 100%. */
.ring-wrap.complete::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2.5px solid var(--accent);opacity:0;pointer-events:none;animation:breathe 2.6s ease-in-out infinite}
.ring-wrap.complete .ring-inner::after{content:'✓';position:absolute;bottom:-2px;right:-2px;width:24px;height:24px;background:var(--green);color:#fff;border-radius:50%;font-size:13px;display:grid;place-items:center;border:3px solid var(--surface);animation:popIn var(--duration-base) cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px rgba(127,176,105,.4)}
@keyframes breathe{0%{transform:scale(.96);opacity:.5}65%{transform:scale(1.14);opacity:0}100%{transform:scale(1.14);opacity:0}}
@property --pct{syntax:'<number>';initial-value:0;inherits:false}

.progress-info{min-width:0}
.progress-info strong{display:block;font-family:var(--font-personality);font-size:18px;font-weight:700;margin-bottom:4px}
.progress-info span{color:var(--muted);font-size:13px;line-height:1.6;font-weight:400}

/* ═══ My Week ═══ */
.week-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm);transition:background var(--duration-slow)}
.week-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px}
.week-head strong{font-family:var(--font-ui);font-size:15px;font-weight:600}
.streak{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:12px;font-weight:500;color:var(--muted);background:var(--bg);padding:5px 12px;border-radius:var(--radius-pill);transition:all var(--duration-base);white-space:nowrap}
.streak.hot{color:#d84a4a;background:rgba(255,93,93,.12)}
html[data-mode="dark"] .streak.hot{color:#ff8f8f}
.streak.hot svg{animation:flicker 3s ease-in-out infinite}
@keyframes flicker{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

.chart{display:flex;gap:8px;align-items:flex-end;height:78px}
.col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;min-width:0}
.col .bar{width:100%;max-width:26px;margin-top:auto;background:var(--accent-soft);border-radius:7px 7px 4px 4px;height:6%;transition:height var(--duration-slow) cubic-bezier(.22,1,.36,1)}
.col .bar.zero{background:var(--border)}
.col.today .bar{background:var(--accent)}
/* The label sits in a row of its own, and that row is held open for every
   column whether or not it carries a name: an empty span would otherwise
   collapse and drop its bar by the height of the text line, so two columns with
   the same number of tasks would sit at two different heights. */
.col span{font-size:11px;color:var(--muted);font-weight:500;line-height:17px;height:17px;white-space:nowrap}
.col.today span{color:var(--accent);font-weight:600}
.col .mdot{width:7px;height:7px;border-radius:50%}

/* ═══ Daily Mood ═══ */
.mood-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:13px;border-top:1.5px dashed var(--border);flex-wrap:wrap}
.mood-label{font-family:var(--font-ui);font-size:13px;font-weight:500;color:var(--muted);line-height:1.6}
.moods{display:flex;gap:8px}
.moods button{width:40px;height:40px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:all var(--duration-base) cubic-bezier(.22,1,.36,1);position:relative}
.moods button svg{width:22px;height:22px;transition:transform var(--duration-base) cubic-bezier(.34,1.56,.64,1)}
.moods button:hover{border-color:var(--mc);color:var(--mc);box-shadow:0 4px 12px -3px rgba(0,0,0,.1)}
.moods button:hover svg{transform:scale(1.08)}
.moods button:active{transform:scale(.94)}
.moods button.sel{color:var(--mc);background:color-mix(in srgb,var(--mc) 12%,transparent);border-color:var(--mc);box-shadow:0 2px 10px -2px rgba(0,0,0,.08)}
.moods button.sel svg{animation:pop var(--duration-base) var(--ease-out)}
.moods button[data-sub]:hover::after{content:attr(data-sub);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);font-size:11px;font-weight:500;line-height:1.5;padding:5px 10px;border-radius:var(--radius-xs);white-space:nowrap;pointer-events:none;animation:tooltipIn var(--duration-fast) ease;z-index:10}
.moods button[data-sub]:hover::before{content:'';position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--text);pointer-events:none;animation:tooltipIn var(--duration-fast) ease;z-index:10}
@keyframes tooltipIn{from{opacity:0;transform:translateX(-50%) translateY(4px)}}

/* ═══ Add Form ═══ */
.add-form{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 10px 8px;box-shadow:var(--shadow-sm);transition:box-shadow var(--duration-base),border-color var(--duration-base),background var(--duration-slow)}
.add-form:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),var(--shadow-sm)}
.add-line{display:flex;gap:10px}
.add-line input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--font-ui);font-size:15px;font-weight:400;color:var(--text);padding:10px 12px}
.add-line input::placeholder{color:var(--muted);font-weight:400}
.add-btn{width:46px;height:46px;border:none;border-radius:var(--radius-sm);background:var(--accent);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-accent);transition:transform var(--duration-fast) var(--ease-spring),box-shadow var(--duration-fast);flex-shrink:0}
.add-btn:hover{transform:translateY(-2px) scale(1.03)}
.add-btn:active{transform:translateY(3px);box-shadow:0 1px 0 0 rgba(120,55,20,.35)}
.add-form.shake,.name-card.shake{animation:shake var(--duration-base) ease;border-color:var(--danger)!important}

/* ── Priority Row ── */
.pri-row{display:flex;align-items:center;gap:7px;padding:2px 8px 4px;flex-wrap:wrap}
.pri-row>span{font-size:12px;color:var(--muted);flex-shrink:0;font-weight:500}
.pri-row button{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:12px;font-weight:500;border:1.5px solid var(--border);background:transparent;color:var(--muted);border-radius:var(--radius-pill);padding:5px 12px;cursor:pointer;position:relative;overflow:hidden;transition:all var(--duration-base) cubic-bezier(.22,1,.36,1)}
.pri-row .ic{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:all var(--duration-base) cubic-bezier(.34,1.56,.64,1);flex-shrink:0}
.pri-row button:hover{border-color:var(--muted)}
.pri-row button:hover .ic{transform:scale(1.15)}
.pri-row button:active{transform:scale(.95)}
.pri-row button[data-p="low"]:hover .ic{filter:drop-shadow(0 0 4px rgba(127,176,105,.5))}
.pri-row button[data-p="mid"]:hover .ic{filter:drop-shadow(0 0 4px rgba(255,180,92,.5))}
.pri-row button[data-p="high"]:hover .ic{filter:drop-shadow(0 0 4px rgba(255,93,93,.5))}
.pri-row button::before{content:'';position:absolute;inset-inline-start:6px;top:50%;width:22px;height:22px;border-radius:50%;transform:translateY(-50%) scale(0);opacity:0;transition:all var(--duration-base) var(--ease-out);z-index:0}
.pri-row button .ic,.pri-row button span:not(.ic){position:relative;z-index:1}
.pri-row button.sel.low{border-color:var(--green);color:#4a7a3a;background:rgba(127,176,105,.08);font-weight:600}
.pri-row button.sel.low::before{background:rgba(127,176,105,.25);transform:translateY(-50%) scale(1);opacity:1}
.pri-row button.sel.low .ic{stroke:var(--green);transform:scale(1.1)}
.pri-row button.sel.mid{border-color:#ffb45c;color:#b06a10;background:rgba(255,180,92,.08);font-weight:600}
.pri-row button.sel.mid::before{background:rgba(255,180,92,.3);transform:translateY(-50%) scale(1);opacity:1}
.pri-row button.sel.mid .ic{stroke:#e8a030;transform:scale(1.1)}
.pri-row button.sel.high{border-color:#ff5d5d;color:#c93a3a;background:rgba(255,93,93,.08);font-weight:600}
.pri-row button.sel.high::before{background:rgba(255,93,93,.25);transform:translateY(-50%) scale(1);opacity:1}
.pri-row button.sel.high .ic{stroke:#ff5d5d;transform:scale(1.1)}
html[data-mode="dark"] .pri-row button.sel.low{color:#9ccc86}
html[data-mode="dark"] .pri-row button.sel.mid{color:#ffcd8a}
html[data-mode="dark"] .pri-row button.sel.high{color:#ff8f8f}

/* ── Category & Due Date ── */
.cat-row,.due-row,.dur-row{display:flex;align-items:center;gap:7px;padding:2px 8px 4px;flex-wrap:wrap}
.cat-row>span,.due-row>span,.dur-row>span{font-size:12px;color:var(--muted);flex-shrink:0;font-weight:500}
.due-row button,.dur-row button{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-ui);font-size:12px;font-weight:500;border:1.5px solid var(--border);background:transparent;color:var(--muted);border-radius:var(--radius-pill);padding:4px 11px;cursor:pointer;transition:all var(--duration-fast) cubic-bezier(.22,1,.36,1)}
.due-row button:hover,.dur-row button:hover{border-color:var(--muted)}
.due-row button:active,.dur-row button:active{transform:scale(.95)}
.due-row button.sel,.dur-row button.sel{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 8px -2px rgba(244,112,58,.4);font-weight:600}
#durCustom{width:84px;font-family:var(--font-ui);font-size:12px;font-weight:500;text-align:center;border:1.5px dashed var(--border);background:transparent;color:var(--text);border-radius:var(--radius-pill);padding:4px 8px;outline:none;transition:border-color var(--duration-fast)}
#durCustom:focus{border-color:var(--accent)}
.dur-hint{font-size:11px;color:var(--danger);font-weight:500;padding:0 10px;line-height:1.6}

.cat-scroll{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;-webkit-overflow-scrolling:touch}
.cat-scroll::-webkit-scrollbar{display:none}
.cat-scroll button{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-ui);font-size:12px;font-weight:500;border:1.5px solid var(--border);background:transparent;color:var(--muted);border-radius:var(--radius-pill);padding:3px 10px;cursor:pointer;transition:all var(--duration-fast) cubic-bezier(.22,1,.36,1)}
.cat-scroll button:hover{border-color:var(--muted)}
.cat-scroll button:active{transform:scale(.95)}
.cat-scroll .dot{width:7px;height:7px;border-radius:50%;background:var(--cc)}
.cat-scroll button.sel{background:var(--cc);border-color:var(--cc);color:#fff;box-shadow:0 2px 8px -2px rgba(0,0,0,.15);font-weight:600}
.cat-scroll button.sel .dot{background:rgba(255,255,255,.85)}

/* ═══ Search + Dice ═══ */
.search{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);padding:8px 16px 8px 8px;box-shadow:var(--shadow-sm);transition:box-shadow var(--duration-base),border-color var(--duration-base)}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--font-ui);font-size:14px;font-weight:400;color:var(--text)}
.search input::placeholder{color:var(--muted);font-weight:400}
.search>svg{color:var(--muted);flex-shrink:0}
.dice{border:none;background:var(--accent-soft);color:var(--accent);width:34px;height:34px;border-radius:var(--radius-xs);cursor:pointer;display:grid;place-items:center;transition:all var(--duration-fast);flex-shrink:0}
.dice:hover{background:var(--accent);color:#fff;transform:rotate(-8deg)}
.dice:active{transform:rotate(0) scale(.95)}

/* ═══ Category Bar ═══ */
.cats{display:flex;gap:8px;overflow-x:auto;padding:3px 1px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cats::-webkit-scrollbar{display:none}
.cat-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:12px;font-weight:500;padding:6px 13px;border-radius:var(--radius-pill);border:1.5px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;transition:all var(--duration-fast);box-shadow:var(--shadow-sm)}
.cat-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--cc)}
.cat-chip .cnt{font-size:10px;opacity:.75;font-weight:600}
.cat-chip:hover{border-color:var(--color-text-muted)}
.cat-chip:active{transform:scale(.95)}
.cat-chip.active{background:var(--cc);border-color:var(--cc);color:#fff;font-weight:600}
.cat-chip.active .dot{background:#fff}

/* ═══ Filters — quiet, not a SaaS toolbar (8.5) ═══ */
.filters{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:4px;position:relative;box-shadow:none;transition:background var(--duration-slow)}
.filters button{flex:1;min-width:0;border:none;background:transparent;font-family:var(--font-ui);font-size:13px;font-weight:500;color:var(--muted);padding:9px 0;cursor:pointer;border-radius:var(--radius-sm);position:relative;z-index:1;transition:color var(--duration-base)}
.filters button:not(.active):hover{color:var(--color-text-secondary)}
.filters button.active{color:var(--accent);font-weight:600}
.filter-pill{position:absolute;left:0;top:4px;bottom:4px;border-radius:var(--radius-sm);background:var(--accent-soft);z-index:0;transition:transform var(--duration-base) var(--ease-out),width var(--duration-base) var(--ease-out)}

/* ═══ Scene & Music Cards (Focus Page) ═══ */
.vibe-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm);transition:background var(--duration-slow)}
.vibe-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;flex-wrap:wrap}
.vibe-head strong{font-family:var(--font-ui);font-size:15px;font-weight:600}

/* ── Entry card — a door to another page ──
   Two of these stand on the profile (Stats, Settings): the card everything else
   on the page is made of, made tappable, with the way in named at the end of its
   heading and one line under it saying what is behind the door. The shape is
   written once and worn twice, so the two doors cannot drift apart — and the
   risen-on-hover / pressed-on-tap movement is the one the app already uses for
   a card that leads somewhere. */
.entry-card{display:block;width:100%;text-align:start;font-family:var(--font-ui);color:var(--text);cursor:pointer;
  transition:transform var(--duration-fast) var(--ease-out)}
@media (hover:hover){.entry-card:hover{transform:translateY(-1px)}}
.entry-card:active{transform:translateY(1px)}
.entry-card:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.entry-card .vibe-head{margin-bottom:6px}
.entry-go{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--accent);border:1.5px solid var(--border);
  border-radius:var(--radius-pill);padding:5px 14px}
.entry-hint{display:block;font-size:12px;line-height:1.9;color:var(--muted)}

/* Ambient sound control */
.amb-control{display:flex;align-items:center;gap:8px}
.amb-control span{font-size:12px;color:var(--muted);transition:color var(--duration-base);font-weight:500}

/* Spring switch */
.switch{position:relative;width:44px;height:24px;border-radius:var(--radius-pill);border:1.5px solid var(--border);background:var(--bg);cursor:pointer;transition:background var(--duration-base),border-color var(--duration-base);flex-shrink:0;padding:0}
.switch::after{content:'';position:absolute;top:50%;right:3px;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;background:var(--muted);transition:all var(--duration-base) cubic-bezier(.34,1.56,.64,1)}
.switch:hover::after{transform:translateY(-50%) scale(1.15)}
.switch.on{background:var(--green);border-color:var(--green)}
.switch.on::after{right:calc(100% - 19px);background:#fff}

/* Scene and music chips — same family as the rest of the product */
.scene-chips{display:flex;gap:7px;flex-wrap:wrap}
.scene-chips button{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:12px;font-weight:500;border:1.5px solid var(--border);background:transparent;color:var(--muted);border-radius:var(--radius-pill);padding:6px 14px;cursor:pointer;transition:all var(--duration-base) cubic-bezier(.22,1,.36,1)}
.scene-chips button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--duration-base) cubic-bezier(.34,1.56,.64,1)}
.scene-chips button:hover{border-color:var(--muted);color:var(--text)}
.scene-chips button:hover svg{transform:scale(1.1)}
.scene-chips button:active{transform:scale(.95)}
.scene-chips button.sel{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 3px 10px -2px rgba(244,112,58,.45);font-weight:600;transition:background var(--duration-fast),border-color var(--duration-fast)}

/* Add song */
.add-music{display:inline-flex;align-items:center;gap:4px;border:1.5px dashed var(--border);color:var(--muted);font-family:var(--font-ui);font-size:12px;font-weight:500;padding:5px 12px;border-radius:var(--radius-pill);cursor:pointer;transition:all var(--duration-fast)}
.add-music:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.add-music:active{transform:scale(.94)}

/* Volume sliders */
.vol-row{display:flex;gap:14px;margin-top:14px;padding-top:12px;border-top:1.5px dashed var(--border);flex-wrap:wrap}
.vol{flex:1;min-width:140px;display:flex;align-items:center;gap:8px}
.vol span{font-size:11px;color:var(--muted);flex-shrink:0;font-weight:500}
.vol input[type=range]{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:5px;border-radius:var(--radius-pill);background:linear-gradient(to left,var(--accent) var(--v,80%),var(--border) var(--v,80%));outline:none;cursor:pointer}
.vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--surface);border:2.5px solid var(--accent);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast);cursor:grab}
.vol input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
.vol input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1)}
.vol input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--surface);border:2.5px solid var(--accent);box-shadow:var(--shadow-sm);cursor:grab}
.vol input[type=range]::-moz-range-track{height:5px;border-radius:var(--radius-pill);background:var(--border)}
.vol input[type=range]::-moz-range-progress{height:5px;border-radius:var(--radius-pill);background:var(--accent)}

/* User tracks */
.user-tracks{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.user-tracks:empty{display:none}
.user-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:12px;font-weight:500;border:1.5px solid var(--border);background:var(--bg);color:var(--text);border-radius:var(--radius-pill);padding:5px 12px;cursor:pointer;transition:all var(--duration-fast);max-width:100%}
.user-chip:active{transform:scale(.94)}
.user-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.user-chip svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.user-chip.sel{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:600}
.user-chip .rm{font-style:normal;color:var(--muted);font-size:14px;line-height:1;padding:0 2px;transition:color var(--duration-fast),transform var(--duration-fast)}
.user-chip .rm:hover{color:var(--danger);transform:scale(1.3)}

/* ═══ Responsive ═══ */
@media (max-width:480px){
  .progress-card{padding:18px 14px;gap:16px}
  .ring-wrap{width:76px;height:76px}
  .ring-inner{width:62px;height:62px}
  .ring-text{font-size:22px}
  .progress-info strong{font-size:16px}
  .progress-info span{font-size:12px}
  .week-card{padding:14px 14px}
  .week-head strong{font-size:14px}
  .streak{font-size:11px}
  .chart{height:64px;gap:5px}
  .col .bar{max-width:20px}
  .col span{font-size:10px}
  .mood-row{gap:8px}
  .mood-label{font-size:12px}
  .moods button{width:34px;height:34px;border-radius:var(--radius-xs)}
  .moods button svg{width:17px;height:17px}
  .add-form{padding:8px 8px 6px;gap:5px}
  .add-line input{font-size:14px;padding:9px 10px}
  .add-btn{width:42px;height:42px;border-radius:var(--radius-sm)}
  .pri-row{gap:5px;padding:2px 4px 3px}
  .pri-row button{font-size:11px;padding:4px 10px;gap:5px}
  .pri-row .ic{width:11px;height:11px}
  .pri-row button::before{width:18px;height:18px;inset-inline-start:5px}
  .cat-row,.due-row{gap:5px;padding:2px 4px 3px}
  .due-row button{font-size:11px;padding:3px 9px}
  .cat-scroll button{font-size:11px;padding:3px 8px}
  .search{padding:6px 12px 6px 6px}
  .search input{font-size:13px}
  .dice{width:30px;height:30px;border-radius:var(--radius-xs)}
  .dice svg{width:15px;height:15px}
  .cats{gap:6px}
  .cat-chip{font-size:11px;padding:5px 11px}
  .cat-chip .dot{width:7px;height:7px}
  .filters button{font-size:12px;padding:8px 0}
  .vibe-card{padding:14px 14px}
  .vibe-head strong{font-size:14px}
  .scene-chips button{font-size:11px;padding:5px 12px}
  .user-chip span{max-width:100px}
  .vol{min-width:120px}
  .amb-control span{font-size:11px}
}
@media (max-width:360px){
  .progress-card{padding:16px 12px;gap:12px}
  .ring-wrap{width:68px;height:68px}
  .ring-inner{width:56px;height:56px}
  .ring-text{font-size:20px}
  .chart{height:56px;gap:4px}
  .moods button{width:30px;height:30px}
  .moods button svg{width:15px;height:15px}
  .scene-chips button{font-size:10.5px;padding:4px 10px}
  .vol{min-width:110px}
  .filters button{font-size:11px}
  .cat-chip{font-size:10.5px;padding:4px 9px}
}