/* ============================================================
   POMODEV APP — PREMIUM THEME LAYER
   Loaded last. Overrides only presentation; no IDs/handlers touched.
   Shares the landing page's warm palette: ink / bone / tomato / ember / sage
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  --ink-950: #070605;
  --ink-900: #0B0A09;
  --ink-850: #100E0C;
  --ink-800: #16130F;
  --ink-700: #1E1A16;
  --ink-600: #2A241E;

  --bone: #F4EFE8;
  --bone-2: #DED5C9;
  --tomato: #DF4526;
  --tomato-lit: #FF5C36;
  --ember: #E8913C;
  --sage: #7E8C63;

  --pline: rgba(244, 239, 232, 0.09);
  --pline-2: rgba(244, 239, 232, 0.17);
  --psurface: rgba(244, 239, 232, 0.030);
  --psurface-2: rgba(244, 239, 232, 0.055);

  --p-font: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --p-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --p-serif: "Instrument Serif", Georgia, serif;
  --p-ease: cubic-bezier(.22, 1, .36, 1);
  --p-lift: 0 30px 64px -28px rgba(0, 0, 0, .82), 0 1px 0 rgba(244, 239, 232, .05) inset;
  --p-radius: 20px;

  /* remap the app's own tokens onto the warm scale */
  --bg: var(--ink-900);
  --panel: var(--psurface);
  --panel-strong: var(--ink-800);
  --text: var(--bone);
  --muted: #8E8377;
  --radius: var(--p-radius);
}

:root[data-theme="light"] {
  --ink-950: #FFFFFF;
  --ink-900: #F7F3EC;
  --ink-850: #F2EDE5;
  --ink-800: #FFFFFF;
  --ink-700: #EDE7DD;
  --ink-600: #E2DACD;

  --bone: #16120E;
  --bone-2: #3A332B;

  --pline: rgba(22, 18, 14, 0.10);
  --pline-2: rgba(22, 18, 14, 0.18);
  --psurface: rgba(255, 255, 255, 0.72);
  --psurface-2: rgba(22, 18, 14, 0.04);
  --p-lift: 0 24px 52px -26px rgba(80, 58, 40, .28), 0 1px 0 rgba(255, 255, 255, .9) inset;

  --bg: var(--ink-900);
  --panel: #FFFFFF;
  --panel-strong: #FFFFFF;
  --text: var(--bone);
  --muted: #6E6459;
  --text-secondary: #6E6459;
  --bg-body: var(--ink-900);
}

/* ---------- 2. BASE ---------- */
body {
  font-family: var(--p-font) !important;
  background-color: var(--ink-900) !important;
  background-image: none !important;
  color: var(--bone);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  transition: background-color .6s var(--p-ease), color .6s var(--p-ease);
}

::selection { background: var(--primary, var(--tomato)); color: #fff; }

/* ambient warm field behind everything */
.pa-ambient {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
  contain: strict;
  transform: translateZ(0);
}
/* No filter here on purpose. `filter: blur(90px)` on these three elements was
   measured at 7-8 fps on a Windows machine; switching just this layer off took
   the same page to 180. A blurred radial gradient is only a smoother radial
   gradient, so the blur is baked into the colour stops as a gaussian falloff.

   An earlier attempt at this left a faint circular edge: blur bleeds well
   outside the element box, and a gradient has to reach zero at it. The fix is
   the geometry below -- each blob is enlarged (52->78vw, 44->66vw, 40->60vw)
   about its original centre, so the glow reaches zero well inside the box and
   the boundary is never visible. Peaks are tuned to match the blurred original
   by A/B screenshot. Dropping the filter also makes the scale() in the drift
   free: a gradient layer can be GPU-transformed, a blurred one re-rasterises. */
.pa-blob {
  position: absolute; border-radius: 50%;
  will-change: transform; opacity: .5;
  backface-visibility: hidden;
}
/* The ambient wash follows the user's accent — hardcoding it left the whole
   background orange while the UI turned blue/green/etc. */
.pa-blob--a { width: 78vw; height: 78vw; left: -27vw; top: -29vw;
  background: radial-gradient(circle,
    rgba(var(--primary-rgb, 223,69,38),0.28) 0%,
    rgba(var(--primary-rgb, 223,69,38),0.2436) 15%,
    rgba(var(--primary-rgb, 223,69,38),0.1596) 30%,
    rgba(var(--primary-rgb, 223,69,38),0.0784) 45%,
    rgba(var(--primary-rgb, 223,69,38),0.02912) 60%,
    rgba(var(--primary-rgb, 223,69,38),0.00812) 75%,
    rgba(var(--primary-rgb, 223,69,38),0.00168) 90%,
    rgba(var(--primary-rgb, 223,69,38),0) 100%); }
.pa-blob--b { width: 66vw; height: 66vw; right: -23vw; top: calc(10vh - 11vw);
  background: radial-gradient(circle,
    rgba(var(--primary-rgb, 223,69,38),0.15) 0%,
    rgba(var(--primary-rgb, 223,69,38),0.1305) 15%,
    rgba(var(--primary-rgb, 223,69,38),0.0855) 30%,
    rgba(var(--primary-rgb, 223,69,38),0.042) 45%,
    rgba(var(--primary-rgb, 223,69,38),0.0156) 60%,
    rgba(var(--primary-rgb, 223,69,38),0.00435) 75%,
    rgba(var(--primary-rgb, 223,69,38),0.0009) 90%,
    rgba(var(--primary-rgb, 223,69,38),0) 100%); }
.pa-blob--c { width: 60vw; height: 60vw; left: 18vw; bottom: -28vw;
  background: radial-gradient(circle,
    rgba(var(--primary-rgb, 223,69,38),0.11) 0%,
    rgba(var(--primary-rgb, 223,69,38),0.0957) 15%,
    rgba(var(--primary-rgb, 223,69,38),0.0627) 30%,
    rgba(var(--primary-rgb, 223,69,38),0.0308) 45%,
    rgba(var(--primary-rgb, 223,69,38),0.01144) 60%,
    rgba(var(--primary-rgb, 223,69,38),0.00319) 75%,
    rgba(var(--primary-rgb, 223,69,38),0.00066) 90%,
    rgba(var(--primary-rgb, 223,69,38),0) 100%); }
html[data-theme="light"] .pa-blob { opacity: .40; }
@media (prefers-reduced-motion: no-preference) {
  .pa-blob--a { animation: paDriftA 34s ease-in-out infinite alternate; }
  .pa-blob--b { animation: paDriftB 41s ease-in-out infinite alternate; }
  .pa-blob--c { animation: paDriftC 37s ease-in-out infinite alternate; }
}
@keyframes paDriftA {
  0%   { transform: translate3d(-22px, 18px, 0) scale(.94); }
  48%  { transform: translate3d(16px, -13px, 0) scale(1.055); }
  100% { transform: translate3d(22px, 16px, 0) scale(.98); }
}
@keyframes paDriftB {
  0%   { transform: translate3d(25px, -21px, 0) scale(1.04); }
  52%  { transform: translate3d(-31px, 18px, 0) scale(.945); }
  100% { transform: translate3d(12px, 25px, 0) scale(1.025); }
}
@keyframes paDriftC {
  0%   { transform: translate3d(-35px, -27px, 0) scale(1.055); }
  46%  { transform: translate3d(40px, 21px, 0) scale(.94); }
  100% { transform: translate3d(-12px, 32px, 0) scale(1.015); }
}
.pa-mesh {
  position: absolute; inset: 0; opacity: .45;
  background-image: linear-gradient(var(--pline) 1px, transparent 1px),
                    linear-gradient(90deg, var(--pline) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 70%);
}
/* inset was -120%, making this 340vw x 340vh — 11.6x the viewport — and every
   frame of the drift re-blended that whole area (mix-blend-mode) against the
   glass panels beneath it. The drift only ever moves 6.8vw/6.8vh, so -10%
   overflow still covers the screen at every point of the animation; the
   keyframes below are expressed in vw/vh so the motion stays pixel-identical
   at the smaller size. will-change promotes it so the blend runs on the GPU. */
.pa-grain {
  position: fixed; inset: -10%; z-index: 9990; pointer-events: none;
  /* The texture still moves with the exact same animation. Normal alpha
     compositing avoids a full-screen blend pass on every grain step, which is
     disproportionately expensive in Windows/Chromium. */
  opacity: .095; mix-blend-mode: normal;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: paGrain 700ms steps(3) infinite;
  will-change: transform;
  contain: strict;
  backface-visibility: hidden;
}
html[data-theme="light"] .pa-grain { opacity: .055; mix-blend-mode: normal; }
@keyframes paGrain {
  0%   { transform: translate3d(0,0,0); }
  33%  { transform: translate3d(-6.8vw, 5.1vh, 0); }
  66%  { transform: translate3d(5.1vw, -6.8vh, 0); }
  100% { transform: translate3d(0,0,0); }
}

/* ---------- 3. HEADER ---------- */
.app-header {
  position: sticky; top: 0; z-index: 500;
  /* Opaque equivalent of the former glass. The header keeps every entrance,
     hover, pulse and shimmer animation, but no longer re-blurs the moving
     ambient field twenty times a second. */
  background: linear-gradient(180deg,
    color-mix(in srgb, rgb(var(--primary-rgb, 223,69,38)) 2.2%, #100f0d),
    color-mix(in srgb, rgb(var(--primary-rgb, 223,69,38)) 1.4%, #0b0a09)) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--pline) !important;
  box-shadow: none !important;
  padding: 0 !important;
  transition: background-color .4s var(--p-ease), border-color .4s;
}
html[data-theme="light"] .app-header {
  background: linear-gradient(180deg, #fff, #f7f3ec) !important;
}
.app-header .header-inner {
  min-height: 72px; display: flex; align-items: center; gap: 16px;
  max-width: 1560px !important; padding-inline: clamp(16px, 3vw, 34px) !important;
}
.app-header .brand-section { margin-right: auto; }

/* ======================================================================
   BRAND LOCKUP
   Was a flat 46px icon + a static 18px sans-serif label — correct, but
   forgettable next to the rest of the app's premium surfaces (onboarding,
   session summary) which all lean on Instrument Serif and a warm glow.
   Brought the wordmark up to match: bigger mark, a soft ambient pulse
   behind it, and a serif label that catches a light sweep once on load
   and again on hover, instead of sitting there static.
   ====================================================================== */
.app-header .logo { display: flex; align-items: center; gap: 13px; }

.app-header .logo-mark-wrap { position: relative; display: grid; place-items: center; flex: none; }
.app-header .logo-mark-wrap::before {
  content: '';
  position: absolute; inset: -8px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary, var(--tomato)) 40%, transparent), transparent 72%);
  opacity: .4;
  animation: logoPulse 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes logoPulse {
  0%, 100% { transform: scale(.88); opacity: .3; }
  50%      { transform: scale(1.1); opacity: .58; }
}

.app-header .logo-mark {
  position: relative;
  width: 72px; height: 72px; flex: none; object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(223,69,38,.5));
  transition: transform .5s var(--p-ease);
}
@media (max-width: 640px) { .app-header .logo-mark { width: 56px; height: 56px; } }
.app-header .brand-section:hover .logo-mark { transform: rotate(-6deg) scale(1.08); }

.app-header .logo-text {
  font-family: var(--p-serif, "Instrument Serif", Georgia, serif) !important;
  font-weight: 400 !important; font-size: 23px !important;
  letter-spacing: -0.01em !important;
  background: linear-gradient(100deg,
    var(--bone) 28%,
    var(--primary, var(--tomato)) 48%,
    var(--bone) 68%) !important;
  background-size: 240% 100% !important;
  background-position: 130% 0 !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  text-shadow: none !important;
  animation: logoShimmer 2.6s var(--p-ease) .5s 1 both;
}
.app-header .brand-section:hover .logo-text { animation: logoShimmer 1.3s var(--p-ease) both; }
@keyframes logoShimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .app-header .logo-mark-wrap::before { animation: none; opacity: .4; }
  .app-header .logo-text { animation: none; background-position: 0 0 !important; }
}

.app-header .actions-section { display: flex; align-items: center; gap: 8px; }
.app-header .divider-vertical {
  width: 1px; height: 22px; background: var(--pline) !important; border: 0 !important;
}

/* live badge */
.live-group {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--psurface) !important; border: 1px solid var(--pline) !important;
  font-family: var(--p-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted) !important;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage) !important; box-shadow: 0 0 10px var(--sage);
  animation: paPulse 1.9s infinite;
}
@keyframes paPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.live-group #liveUsersCount { color: var(--bone) !important; font-weight: 500; }

/* accent picker */
.accent-dropdown-btn, .accent-select-btn {
  height: 38px; padding: 0 13px !important; border-radius: 999px !important;
  background: var(--psurface) !important; border: 1px solid var(--pline) !important;
  color: var(--muted) !important; font-size: 13px !important;
  transition: border-color .3s, background-color .3s, color .3s, transform .3s var(--p-ease);
}
.accent-dropdown-btn:hover, .accent-select-btn:hover {
  border-color: var(--pline-2) !important; color: var(--bone) !important; transform: translateY(-1px);
}
.accent-selected { display: flex; align-items: center; gap: 8px; }
.accent-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.22) inset; }
.accent-dot-tomato { background: #DF4526 !important; }
.accent-chevron { font-size: 8px; opacity: .55; }
.accent-dropdown-menu, .accent-select-menu, .dropdown-menu {
  background: color-mix(in srgb, var(--ink-800) 94%, transparent) !important;
  border: 1px solid var(--pline-2) !important;
  border-radius: 16px !important;
  box-shadow: var(--p-lift) !important;
  padding: 7px !important;
}
html[data-theme="light"] .accent-dropdown-menu,
html[data-theme="light"] .accent-select-menu,
html[data-theme="light"] .dropdown-menu { background: rgba(255,255,255,.97) !important; }
/* Only blurred while actually open. Closed, these menus stay in the layout at
   opacity:0 / visibility:hidden, and a backdrop-filter on an invisible 131k px
   box still has the compositor allocate a render surface and sample a backdrop
   for it. The surface is 94% opaque anyway, so the blur is worth ~6% of the
   final pixel -- it is not worth paying for when the menu is not on screen. */
.dropdown-menu.show,
.accent-dropdown-menu.open,
.accent-select-menu.open {
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
}
.accent-option, .dropdown-item {
  border-radius: 10px !important; font-size: 13.5px !important;
  color: var(--muted) !important; padding: 9px 11px !important;
  transition: background-color .22s, color .22s, transform .22s var(--p-ease);
}
.accent-option:hover, .dropdown-item:hover {
  background: var(--psurface-2) !important; color: var(--bone) !important; transform: translateX(2px);
}
.dropdown-label {
  font-family: var(--p-mono) !important; font-size: 9.5px !important;
  letter-spacing: .2em !important; text-transform: uppercase !important;
  color: rgba(142,131,119,.75) !important; padding: 12px 11px 6px !important;
}
.dropdown-divider { background: var(--pline) !important; margin: 6px 4px !important; }

/* icon buttons */
.icon-btn, #menuBtn {
  width: 38px; height: 38px; min-width: 38px; border-radius: 999px !important;
  background: var(--psurface) !important; border: 1px solid var(--pline) !important;
  color: var(--muted) !important; font-size: 15px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  transition: color .3s, border-color .3s, background-color .3s, transform .35s var(--p-ease);
  box-shadow: none !important;
}
.icon-btn:hover, #menuBtn:hover {
  color: var(--bone) !important; border-color: var(--pline-2) !important;
  background: var(--psurface-2) !important; transform: translateY(-2px);
}

/* primary header button */
.btn-primary-sm {
  height: 38px; padding: 0 20px !important; border-radius: 999px !important;
  /* --tomato is the brand constant; the button must follow the user's
     chosen accent like every other primary control. */
  background: var(--primary, var(--tomato)) !important; color: #fff !important;
  border: 0 !important; font-size: 13.5px !important; font-weight: 550 !important;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 26px -12px rgba(var(--primary-rgb, 223,69,38),.8), inset 0 1px 0 rgba(255,255,255,.22) !important;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .4s var(--p-ease), color .3s;
}
.btn-primary-sm::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-950);
  transform: translateY(101%); transition: transform .5s var(--p-ease);
}
.btn-primary-sm:hover::before { transform: translateY(0); }
.btn-primary-sm:hover { color: var(--bone) !important; transform: translateY(-2px); }
html[data-theme="light"] .btn-primary-sm:hover { color: #F4EFE8 !important; }

/* ---------- 4. LAYOUT ---------- */
main#main-content > .container { max-width: 1560px !important; padding-inline: clamp(16px, 3vw, 34px) !important; }
.premium-layout { gap: clamp(14px, 1.5vw, 22px) !important; align-items: start; padding-block: clamp(20px, 3vh, 34px) !important; }

/* ---------- 5. PANELS ----------
   These were translucent (3-5.5% white) over a blur(18px) saturate(130%)
   backdrop. Twelve are on screen at once, and because the ambient wash drifts
   behind them, every one had to re-blur its backdrop on each step of that
   drift -- ~1.3M px of blur per update. That was the bulk of what made the app
   crawl on Windows.

   Painting them opaque reproduces the result exactly: once blurred, the
   backdrop behind a panel is a flat warm near-black, and the only
   high-frequency thing back there is the 1px mesh grid, which the blur existed
   to hide. Verified by A/B screenshot -- indistinguishable. Now the wash can no
   longer invalidate them at all. The header, dropdowns and modals keep their
   blur: real content scrolls under those. */
.panel-section,
.panel-section.glass,
.timer-container,
.timer-container.glass {
  /* a few percent of the accent is mixed in so the panels still track the
     theme the way the blurred accent wash used to tint them */
  background: linear-gradient(168deg,
    color-mix(in srgb, rgb(var(--primary-rgb, 223,69,38)) 3%, #171614),
    color-mix(in srgb, rgb(var(--primary-rgb, 223,69,38)) 2.5%, #121110)) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--pline) !important;
  border-radius: var(--p-radius) !important;
  box-shadow: none !important;
  position: relative; overflow: hidden;
  transition: border-color .5s var(--p-ease), box-shadow .5s var(--p-ease), transform .5s var(--p-ease);
}
html[data-theme="light"] .panel-section,
html[data-theme="light"] .panel-section.glass,
html[data-theme="light"] .timer-container,
html[data-theme="light"] .timer-container.glass {
  /* opaque equivalent of the old rgba(255,255,255,.80) over --ink-900 */
  background: linear-gradient(168deg,
    color-mix(in srgb, rgb(var(--primary-rgb, 223,69,38)) 2%, #FFFFFE),
    color-mix(in srgb, rgb(var(--primary-rgb, 223,69,38)) 1.5%, #FCFBF8)) !important;
  box-shadow: 0 2px 18px -10px rgba(80,58,40,.28) !important;
}
.panel-section::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(440px circle at var(--pmx, 50%) var(--pmy, 50%), rgba(244,239,232,.06), transparent 42%);
  transition: opacity .45s;
}
.panel-section:hover::after { opacity: 1; }
.panel-section:hover { border-color: var(--pline-2) !important; }

/* The child combinator missed the headings that sit one level deeper
   (challenges, sound studio), so those two rendered in the default large
   bold face while every other panel used the small mono caps. */
.panel-section > h3,
.section-header h3,
.challenges-header h3,
.sound-mixer-toggle h3 {
  font-family: var(--p-mono) !important;
  font-size: 10.5px !important; font-weight: 500 !important;
  letter-spacing: .19em !important; text-transform: uppercase !important;
  color: rgba(142,131,119,.9) !important;
  margin: 0 0 16px !important; text-align: left !important;
  display: flex; align-items: center; gap: 8px;
}
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-header h3 { margin: 0 !important; }
.section-header .icon-btn { width: 30px; height: 30px; min-width: 30px; font-size: 13px !important; }

/* The side columns are flex with a capped height; without this the cards
   shrink to fit and their content gets clipped instead of the column scrolling. */
.left-panel > .panel-section,
.right-panel > .panel-section { flex: 0 0 auto; }

.left-panel, .right-panel { scrollbar-width: thin; scrollbar-color: var(--pline-2) transparent; }
.left-panel::-webkit-scrollbar, .right-panel::-webkit-scrollbar { width: 5px; }
.left-panel::-webkit-scrollbar-thumb, .right-panel::-webkit-scrollbar-thumb {
  background: var(--pline-2); border-radius: 999px;
}
.left-panel::-webkit-scrollbar-track, .right-panel::-webkit-scrollbar-track { background: transparent; }

/* ---------- 6. STATS ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px !important; }
.stat-card {
  background: var(--psurface) !important;
  border: 1px solid var(--pline) !important;
  border-radius: 14px !important;
  padding: 15px 10px !important;
  text-align: center; position: relative; overflow: hidden;
  transition: border-color .4s, transform .45s var(--p-ease), background-color .4s;
}
.stat-card::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary, var(--tomato)), transparent);
  transform: scaleX(0); transition: transform .6s var(--p-ease);
}
.stat-card:hover { transform: translateY(-3px); border-color: var(--pline-2) !important; background: var(--psurface-2) !important; }
.stat-card:hover::before { transform: scaleX(1); }
.stat-value {
  font-family: var(--p-font) !important;
  font-size: 27px !important; font-weight: 500 !important;
  letter-spacing: -0.05em !important; line-height: 1 !important;
  font-variant-numeric: tabular-nums;
  color: var(--bone) !important;
  background: none !important; -webkit-text-fill-color: var(--bone) !important;
}
.stat-label {
  font-family: var(--p-mono) !important; font-size: 8.5px !important;
  letter-spacing: .17em !important; text-transform: uppercase !important;
  color: rgba(142,131,119,.85) !important; margin-top: 8px !important;
}

/* visual pomodoro counter */
#visualPomodoroCounter { margin-top: 16px; }
#visualPomodoroCounter .counter-text, .counter-label {
  font-family: var(--p-mono) !important; font-size: 9.5px !important;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(142,131,119,.85) !important;
}

/* the app renders these as ⚪ emoji — swap the glyph for a real dot */
.focus-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 7px; margin: 12px 0 10px;
}
.focus-unit {
  font-size: 0 !important; line-height: 0;
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block; flex: none;
  background: transparent; border: 1.5px solid rgba(244, 239, 232, .26);
  transition: background-color .45s var(--p-ease), border-color .45s, box-shadow .45s, transform .35s var(--p-ease);
}
.focus-unit:hover { transform: scale(1.3); border-color: rgba(244, 239, 232, .5); }
:root[data-theme="light"] .focus-unit { border-color: rgba(22, 18, 14, .26); }
.focus-unit:not(.pending) {
  background: var(--primary, var(--tomato)); border-color: transparent;
  box-shadow: 0 0 12px -2px rgba(var(--primary-rgb, 223,69,38), .95);
}
.focus-unit.short { background: var(--sage); border-color: transparent; box-shadow: 0 0 10px -3px var(--sage); }
.focus-unit.bonus { background: var(--ember); border-color: transparent; box-shadow: 0 0 10px -3px var(--ember); }

/* analytics modal */
.analytics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* style.css collapses this to one column under 768px; this file loads after
   it and re-declared the 3-column layout with no media guard, so the mobile
   rule was silently overridden and every stat card was squeezed to ~100px. */
@media (max-width: 768px) {
  .analytics-grid { grid-template-columns: 1fr; }
}
.analytics-card, .chart-container {
  background: var(--psurface) !important;
  border: 1px solid var(--pline) !important;
  border-radius: 16px !important;
  padding: 18px !important;
}
.analytics-card h3, .chart-container h3 {
  font-family: var(--p-mono) !important; font-size: 9.5px !important;
  letter-spacing: .18em !important; text-transform: uppercase !important;
  color: rgba(142,131,119,.9) !important; margin-bottom: 12px !important;
}
.analytics-card .stat-value { font-size: 30px !important; }

/* weekly summary */
.weekly-summary {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 6px 0;
}
.weekly-value {
  font-size: 25px !important; font-weight: 500 !important; letter-spacing: -0.045em;
  color: var(--bone) !important; font-variant-numeric: tabular-nums;
}
.weekly-label {
  font-family: var(--p-mono) !important; font-size: 9px !important;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(142,131,119,.85) !important;
  margin-left: 4px;
}
.comparison-message { font-size: 12.5px !important; color: var(--muted) !important; opacity: 1 !important; }

/* heatmap — weekday-aligned grid + legend + summary */
.heatmap { margin-top: 14px; display: grid; gap: 6px; }
.heatmap-weekdays,
.heatmap-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 4px !important;
}
.heatmap-weekdays span {
  font-family: var(--p-mono) !important; font-size: 8.5px !important;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(142,131,119,.75); text-align: center; line-height: 1;
}
.heatmap-cell {
  aspect-ratio: 1; border-radius: 4px;
  background: var(--psurface-2);
  border: 1px solid var(--pline);
  transition: transform .3s var(--p-ease), box-shadow .3s;
}
.heatmap-cell:hover { transform: scale(1.22); box-shadow: 0 0 14px -2px var(--primary, var(--tomato)); z-index: 2; }
/* Days that haven't happened yet read as absent, not as "zero focus". */
.heatmap-cell.is-future { background: transparent !important; border-style: dashed; opacity: .35; }
.heatmap-cell.is-future:hover { transform: none; box-shadow: none; }
.heatmap-cell.is-today { box-shadow: 0 0 0 1.5px var(--primary, var(--tomato)); }

.heatmap-legend {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  font-family: var(--p-mono) !important; font-size: 8.5px !important;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(142,131,119,.75) !important;
}
.heatmap-legend .heatmap-cell {
  width: 9px; height: 9px; aspect-ratio: unset;
  flex: 0 0 auto; border-radius: 2px;
}
.heatmap-legend .heatmap-cell:hover { transform: none; box-shadow: none; }
.heatmap-summary {
  font-size: 11px !important; line-height: 1.45;
  color: var(--muted) !important; text-align: left;
}

/* ---------- 7. TIMER — the centerpiece ---------- */
.timer-container {
  padding: clamp(22px, 3vw, 38px) clamp(18px, 2.6vw, 34px) !important;
  display: grid; gap: clamp(18px, 2.4vh, 28px);
}
.timer-container::before {
  content: ""; position: absolute; left: 50%; top: 46%;
  width: 142%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(var(--pglow, .8));
  border-radius: 50%; pointer-events: none; z-index: 0;
  /* Blur is baked into the gradient stops. The scale/opacity glow animation
     remains identical, while the browser can transform a cached texture
     instead of rasterising a 430k+ pixel filter surface every second. */
  background: radial-gradient(circle,
    rgba(var(--primary-rgb, 223,69,38), .15) 0%,
    rgba(var(--primary-rgb, 223,69,38), .105) 22%,
    rgba(var(--primary-rgb, 223,69,38), .052) 42%,
    rgba(var(--primary-rgb, 223,69,38), .015) 61%,
    transparent 78%);
  filter: none;
  will-change: transform, opacity;
  transition: transform 1.2s var(--p-ease), opacity 1.2s var(--p-ease);
  opacity: var(--pglowo, .55);
}
.timer-container > * { position: relative; z-index: 1; }

/* mode switcher — segmented pill */
.mode-switcher {
  display: flex !important; flex-wrap: wrap; justify-content: center; gap: 4px !important;
  padding: 5px !important; border-radius: 999px !important;
  background: var(--psurface) !important;
  border: 1px solid var(--pline) !important;
  width: fit-content; margin-inline: auto !important;
  position: relative;
}
.mode-switcher .mode {
  position: relative; z-index: 1;
  padding: 9px 17px !important; border-radius: 999px !important;
  background: transparent !important; border: 0 !important;
  font-family: var(--p-font) !important;
  font-size: 13px !important; font-weight: 480 !important; letter-spacing: -0.012em !important;
  color: var(--muted) !important; box-shadow: none !important;
  transition: color .32s var(--p-ease);
}
.mode-switcher .mode:hover { color: var(--bone) !important; }
.mode-switcher .mode.active {
  color: #fff !important; background: transparent !important;
}
html[data-theme="light"] .mode-switcher .mode.active { color: #fff !important; }
.pa-mode-pill {
  position: absolute; z-index: 0; top: 0; left: 0;
  border-radius: 999px; background: var(--primary, var(--tomato));
  box-shadow: 0 8px 22px -10px rgba(var(--primary-rgb, 223,69,38), .9), inset 0 1px 0 rgba(255,255,255,.24);
  transition: transform .55s var(--p-ease), width .55s var(--p-ease);
  will-change: transform, width;
}

/* timer display + progress ring */
.timer-display {
  position: relative; display: grid; place-items: center; gap: 6px;
  padding-block: clamp(26px, 4vh, 52px);
}
.pa-ring {
  position: absolute; z-index: 0; pointer-events: none;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
}
.pa-ring svg { width: 100%; height: 100%; overflow: visible; }
.pa-ring__track { fill: none; stroke: var(--pline-2); stroke-width: 1.5; }
.pa-ring__glow {
  fill: none;
  stroke: rgba(var(--primary-rgb, 223,69,38), .16);
  stroke-width: 18;
  stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: center;
  transition: stroke-dashoffset .9s linear, stroke .5s;
}
.pa-ring__arc {
  fill: none; stroke: var(--primary, var(--tomato)); stroke-width: 6; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: center;
  filter: none;
  transition: stroke-dashoffset .9s linear, stroke .5s;
}
.pa-ring__tick { stroke: var(--pline-2); stroke-width: 1.3; }

.timer-time {
  font-family: var(--p-font) !important;
  font-size: clamp(56px, 8vw, 112px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.055em !important; line-height: .92 !important;
  font-variant-numeric: tabular-nums;
  color: var(--bone) !important;
  text-shadow: none !important;
  background: linear-gradient(180deg, var(--bone) 34%, color-mix(in srgb, var(--bone) 46%, transparent) 128%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  position: relative; z-index: 2;
  transition: transform .5s var(--p-ease), filter .5s var(--p-ease);
}
body.pa-running .timer-time { animation: paBreathe 4.2s ease-in-out infinite; }
@keyframes paBreathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.014); filter: brightness(1.10); }
}

.timer-mode {
  font-family: var(--p-mono) !important;
  font-size: 10.5px !important; font-weight: 500 !important;
  letter-spacing: .24em !important; text-transform: uppercase !important;
  color: var(--primary, var(--tomato)) !important;
  margin-top: 10px !important; position: relative; z-index: 2;
}
.current-goal-display { font-size: 13px !important; color: var(--muted) !important; opacity: 1 !important; z-index: 2; }
.strict-mode-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(223,69,38,.13) !important;
  border: 1px solid rgba(223,69,38,.34);
  color: var(--tomato) !important;
  font-family: var(--p-mono) !important; font-size: 9.5px !important;
  letter-spacing: .14em; text-transform: uppercase;
}

/* daily goal bar */
.mini-goal-display {
  border-top: 1px solid var(--pline) !important;
  width: 100%; max-width: 420px; margin-inline: auto;
  position: relative; z-index: 2;
}
.mini-goal-display #dailyGoalLabel {
  font-family: var(--p-mono) !important; font-size: 9.5px !important;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(142,131,119,.9) !important;
  opacity: 1 !important; margin-bottom: 10px !important;
}
.progress-bar {
  height: 4px !important; border-radius: 999px !important;
  background: var(--pline) !important; overflow: hidden; border: 0 !important;
}
.progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary, #DF4526) 55%, #000), var(--primary, var(--tomato)), var(--ember)) !important;
  box-shadow: 0 0 14px -2px rgba(var(--primary-rgb, 223,69,38), .8);
  transition: width 1s var(--p-ease);
}
.mini-goal-display #goalProgress {
  font-family: var(--p-mono) !important; font-size: 10.5px !important; color: var(--muted) !important;
}

/* controls */
.timer-controls { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.start-btn, .reset-btn {
  position: relative; overflow: hidden; isolation: isolate;
  height: 56px; min-width: 154px; padding: 0 34px !important;
  border-radius: 999px !important;
  font-family: var(--p-font) !important;
  font-size: 14px !important; font-weight: 600 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  transition: transform .45s var(--p-ease), color .3s var(--p-ease), border-color .3s;
  will-change: transform;
}
.start-btn {
  background: var(--primary, var(--tomato)) !important;
  color: #fff !important; border: 0 !important;
  box-shadow: 0 16px 38px -16px rgba(var(--primary-rgb, 223,69,38), .85),
              inset 0 1px 0 rgba(255,255,255,.24) !important;
}
.start-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink-950);
  transform: translateY(101%); transition: transform .55s var(--p-ease);
}
.start-btn:hover::before { transform: translateY(0); }
.start-btn:hover { color: var(--bone) !important; transform: translateY(-3px); }
html[data-theme="light"] .start-btn:hover { color: #F4EFE8 !important; }
.start-btn:active { transform: translateY(-1px) scale(.985); }

.reset-btn {
  background: transparent !important;
  border: 1px solid var(--pline-2) !important;
  color: var(--bone) !important; box-shadow: none !important;
}
.reset-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bone);
  transform: translateY(101%); transition: transform .55s var(--p-ease);
}
.reset-btn:hover::before { transform: translateY(0); }
.reset-btn:hover { color: var(--ink-900) !important; border-color: var(--bone) !important; transform: translateY(-3px); }

/* ripple on start */
.pa-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.42); transform: translate(-50%,-50%) scale(0);
  animation: paRipple .72s var(--p-ease) forwards;
}
@keyframes paRipple { to { transform: translate(-50%,-50%) scale(3.4); opacity: 0; } }

/* timer quick actions row */
.timer-actions {
  display: flex !important; justify-content: center; align-items: center; gap: 8px;
  margin-top: 14px !important; flex-wrap: wrap;
  background: linear-gradient(135deg, #171614, #121110) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] .timer-actions { background: #fff !important; }
.nav-divider { width: 1px; height: 20px; background: var(--pline) !important; }

/* ---------- 8. RIGHT PANEL ---------- */
/* timeline */
.timeline-container { display: grid; gap: 2px; position: relative; padding-left: 16px; }
.timeline-container::before {
  content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, var(--primary, var(--tomato)), transparent);
}
.timeline-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; position: relative;
  border-bottom: 1px solid var(--pline);
}
.timeline-item:last-child { border-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-600); border: 1px solid var(--pline-2);
  transition: background-color .4s, box-shadow .4s;
}
.timeline-item:first-child::before {
  background: var(--primary, var(--tomato));
  box-shadow: 0 0 12px rgba(var(--primary-rgb, 223,69,38), .8);
  border-color: transparent;
}
.timeline-item .time {
  font-family: var(--p-mono) !important; font-size: 11.5px !important;
  color: var(--bone) !important; font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
/* min-width:0 lets the label shrink; without it a long label ("Şimdi: Uzun
   Mola") overflows the card instead of ellipsing. */
.timeline-item .label {
  font-size: 12.5px !important; color: var(--muted) !important;
  min-width: 0; flex: 1 1 auto; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.timeline-item.active .label {
  color: var(--bone) !important; font-weight: 500 !important;
}
.timeline-item.active .time { color: var(--primary, var(--tomato)) !important; }
.timeline-footer {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pline);
  text-align: center;
}
.timeline-footer small {
  font-family: var(--p-mono) !important; font-size: 9.5px !important;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(142,131,119,.85) !important;
}

/* brain dump */
.brain-dump-input-wrapper { display: flex; gap: 8px; margin-bottom: 12px; }
#brainDumpInput, .modal-input, .setting-input, .setting-textarea, .setting-select, .pomodoro-input {
  background: var(--psurface) !important;
  border: 1px solid var(--pline) !important;
  border-radius: 12px !important;
  color: var(--bone) !important;
  font-family: var(--p-font) !important; font-size: 13.5px !important;
  padding: 11px 14px !important;
  transition: border-color .3s, background-color .3s, box-shadow .3s;
  box-shadow: none !important;
}
#brainDumpInput::placeholder, .modal-input::placeholder, .setting-input::placeholder { color: rgba(142,131,119,.7) !important; }
/* .setting-select inherited the box above but never got appearance:none, so
   the browser's own dropdown chrome (a system-grey chevron, native popup
   styling) rendered on top of the dark premium box — a plain OS control
   sitting inside an otherwise restyled panel. Chevron is drawn as a
   background SVG so it can pick up the theme's muted colour. */
.setting-select {
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238E8377' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 34px !important;
  cursor: pointer;
}
html[data-theme="light"] .setting-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233A332B' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.setting-select option { background: var(--ink-800); color: var(--bone); }
#brainDumpInput:focus, .modal-input:focus, .setting-input:focus, .setting-textarea:focus, .setting-select:focus {
  outline: none !important;
  border-color: color-mix(in srgb, var(--primary, #DF4526) 55%, transparent) !important;
  background: var(--psurface-2) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 223,69,38), .13) !important;
}
#addNoteBtn {
  width: 42px; flex: none; border-radius: 12px !important;
  background: var(--primary, var(--tomato)) !important; color: #fff !important;
  border: 0 !important; font-size: 18px !important; font-weight: 400;
  box-shadow: 0 8px 20px -10px rgba(var(--primary-rgb, 223,69,38), .9) !important;
  transition: transform .35s var(--p-ease), filter .3s;
}
#addNoteBtn:hover { transform: translateY(-2px) rotate(90deg); filter: brightness(1.1); }

.brain-dump-list { display: grid; gap: 7px; max-height: 190px; overflow-y: auto; }
.note-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 11px;
  background: var(--psurface) !important;
  border: 1px solid var(--pline) !important;
  font-size: 13px; color: var(--bone-2) !important;
  animation: paIn .5s var(--p-ease) both;
  transition: border-color .3s, transform .3s var(--p-ease), background-color .3s;
}
.note-item:hover { border-color: var(--pline-2) !important; transform: translateX(3px); background: var(--psurface-2) !important; }
@keyframes paIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } }

/* tasks */
.task-list { display: grid; gap: 7px; max-height: 260px; overflow-y: auto; }
.task-item {
  position: relative; overflow: hidden;
  padding: 13px 14px !important; border-radius: 13px !important;
  background: var(--psurface) !important;
  border: 1px solid var(--pline) !important;
  color: var(--bone) !important;
  animation: paIn .5s var(--p-ease) both;
  transition: border-color .35s, transform .35s var(--p-ease), background-color .35s, opacity .35s;
}
.task-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--primary, var(--tomato)); transform: scaleY(0); transform-origin: center;
  transition: transform .4s var(--p-ease);
}
.task-item:hover { border-color: var(--pline-2) !important; transform: translateX(3px); background: var(--psurface-2) !important; }
.task-item:hover::before { transform: scaleY(1); }
.task-item.completed { opacity: .45; }
.task-item.completed::before { background: var(--sage); transform: scaleY(1); }
.task-item h4 { font-size: 14px !important; font-weight: 500 !important; letter-spacing: -0.015em; color: var(--bone) !important; }
.task-item .meta, .task-estimation, .est-label { font-family: var(--p-mono) !important; font-size: 10px !important; letter-spacing: .1em; color: rgba(142,131,119,.9) !important; }
.task-priority--urgent { color: var(--tomato-lit) !important; }
.task-priority--important { color: #E8A33D !important; }
.task-tag { font-family: var(--p-mono) !important; font-size: 9px !important; letter-spacing: .06em; color: rgba(142,131,119,.9) !important; background: var(--psurface-2) !important; }
.task-note { font-family: var(--p-mono) !important; font-size: 10px !important; color: rgba(142,131,119,.75) !important; }

.empty-state { padding: 22px 10px; text-align: center; }
.empty-icon { font-size: 26px; opacity: .4; margin-bottom: 10px; }
.empty-title { font-size: 13.5px !important; color: var(--bone-2) !important; font-weight: 500; }
.empty-description { font-size: 12px !important; color: var(--muted) !important; margin-top: 5px; }

/* sound mixer */
.sound-mixer-toggle { cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.sound-mixer-toggle h3 { margin: 0 !important; }
.sound-mixer-toggle::after {
  content: "▾"; font-size: 11px; color: var(--muted);
  transition: transform .45s var(--p-ease);
}
.sound-mixer-panel:not(.collapsed) .sound-mixer-toggle::after { transform: rotate(180deg); }
.mixer-tracks { display: grid; gap: 12px; margin-top: 16px; }
.mixer-track { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; }
.track-icon {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  font-size: 16px; cursor: pointer;
  background: var(--psurface) !important; border: 1px solid var(--pline) !important;
  transition: transform .35s var(--p-ease), border-color .3s, box-shadow .3s;
}
.track-icon:hover { transform: translateY(-2px) scale(1.06); border-color: var(--pline-2) !important; }
.track-icon.active {
  border-color: color-mix(in srgb, var(--primary, #DF4526) 60%, transparent) !important;
  box-shadow: 0 0 18px -4px rgba(var(--primary-rgb, 223,69,38), .8);
}
.track-name {
  font-family: var(--p-mono) !important; font-size: 9.5px !important;
  letter-spacing: .15em; text-transform: uppercase; color: rgba(142,131,119,.9) !important;
  display: block; margin-bottom: 7px;
}
/* The track used to be one flat colour end to end regardless of value — a
   slider that visually can't tell you what it's set to reads as a cheap
   native control no matter how the thumb is styled. --fill (0%-100%, kept in
   sync with .value by app-premium.js) splits the track into a filled accent
   half and an unfilled one, like every slider in a real design system. */
.volume-slider, .setting-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 999px;
  background: linear-gradient(to right,
    var(--primary, var(--tomato)) 0%, var(--primary, var(--tomato)) var(--fill, 50%),
    var(--pline) var(--fill, 50%), var(--pline) 100%) !important;
  outline: none; cursor: pointer;
}
.volume-slider::-moz-range-progress, .setting-slider::-moz-range-progress {
  background: var(--primary, var(--tomato)); height: 4px; border-radius: 999px;
}
.volume-slider::-moz-range-track, .setting-slider::-moz-range-track {
  background: var(--pline); height: 4px; border-radius: 999px;
}
.volume-slider::-webkit-slider-thumb, .setting-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary, var(--tomato));
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 223,69,38), .18), 0 2px 6px rgba(0,0,0,.4);
  transition: transform .25s var(--p-ease);
}
.volume-slider::-webkit-slider-thumb:hover, .setting-slider::-webkit-slider-thumb:hover { transform: scale(1.25); }
.volume-slider::-moz-range-thumb, .setting-slider::-moz-range-thumb {
  width: 14px; height: 14px; border: 0; border-radius: 50%;
  background: var(--primary, var(--tomato));
}

/* ---------- 9. CHALLENGES ---------- */
/* The sidebar is narrow: without an explicit basis the title and the badge
   both shrink and each breaks onto three lines. Give the title a floor and
   let the badge drop to its own row instead of wrapping mid-phrase. */
.challenges-header {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 6px 10px; margin-bottom: 10px;
}
.challenges-header h3 { margin: 0 !important; flex: 1 1 150px; min-width: 0; }
.challenges-timer {
  font-family: var(--p-mono) !important; font-size: 9.5px !important;
  letter-spacing: .12em; color: var(--muted) !important;
  padding: 4px 9px; border-radius: 999px;
  background: var(--psurface) !important; border: 1px solid var(--pline);
  flex: 0 0 auto; white-space: nowrap;
}
.challenges-subtitle {
  font-size: 11.5px !important; line-height: 1.45 !important;
  color: var(--muted) !important; opacity: 1 !important;
  margin: 0 0 12px !important;
}
.challenges-list { display: grid; gap: 9px; }
.challenge-name { font-size: 13px !important; font-weight: 500 !important; color: var(--bone) !important; }
.challenge-reward {
  font-family: var(--p-mono) !important; font-size: 10px !important;
  color: var(--ember) !important; letter-spacing: .08em;
}
.challenge-progress-bar { height: 3px !important; border-radius: 999px; background: var(--pline) !important; overflow: hidden; }
.challenge-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary, var(--tomato)), var(--ember)) !important;
  transition: width .9s var(--p-ease);
}
.challenge-progress-text { font-family: var(--p-mono) !important; font-size: 9.5px !important; color: rgba(142,131,119,.9) !important; }
.claim-btn {
  border-radius: 999px !important; padding: 6px 13px !important;
  background: var(--primary, var(--tomato)) !important; color: #fff !important; border: 0 !important;
  font-size: 11px !important; font-weight: 550 !important;
  transition: transform .3s var(--p-ease), filter .3s;
}
.claim-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ---------- 10. MODALS ---------- */
.modal {
  background: rgba(7,6,5,.72) !important;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
html[data-theme="light"] .modal { background: rgba(60,44,30,.32) !important; }
.modal:not(.hidden) .modal-content { animation: paModal .58s var(--p-ease) both; }
@keyframes paModal {
  from { opacity: 0; transform: translateY(26px) scale(.965); filter: blur(8px); }
}
.modal-content, .modal-content.glass, .glass-modal, .settings-modal-content, .confirm-modal-box {
  background: linear-gradient(168deg, var(--ink-800), var(--ink-850)) !important;
  border: 1px solid var(--pline-2) !important;
  border-radius: 24px !important;
  box-shadow: var(--p-lift) !important;
  color: var(--bone) !important;
}
html[data-theme="light"] .modal-content,
html[data-theme="light"] .glass-modal,
html[data-theme="light"] .settings-modal-content { background: #FFFFFF !important; }
.modal-header, .settings-modal-header {
  border-bottom: 1px solid var(--pline) !important;
  padding-bottom: 16px !important; margin-bottom: 18px !important;
}
.modal-header h2, .modal-title, .settings-modal-header h2 {
  font-family: var(--p-font) !important;
  font-size: 20px !important; font-weight: 550 !important;
  letter-spacing: -0.03em !important; color: var(--bone) !important;
  /* index.html ships an inline <style> gradient-text rule here (white -> lilac,
     background-clip:text + transparent fill) that renders emoji as a blank
     box in some engines — reset the clip so the glyph and color paint normally */
  background: none !important;
  -webkit-background-clip: initial !important; background-clip: initial !important;
  -webkit-text-fill-color: var(--bone) !important;
}
.modal-label {
  font-family: var(--p-mono) !important; font-size: 9.5px !important;
  letter-spacing: .18em !important; text-transform: uppercase !important;
  color: rgba(142,131,119,.9) !important; margin-bottom: 9px !important; display: block;
}
.close-modal, .close-modal-btn, .confirm-modal-close {
  width: 34px; height: 34px; border-radius: 999px !important;
  background: var(--psurface) !important; border: 1px solid var(--pline) !important;
  color: var(--muted) !important; font-size: 17px !important;
  display: grid !important; place-items: center;
  transition: color .3s, border-color .3s, transform .35s var(--p-ease), background-color .3s;
}
.close-modal:hover, .close-modal-btn:hover, .confirm-modal-close:hover {
  color: var(--bone) !important; border-color: var(--pline-2) !important;
  background: var(--psurface-2) !important; transform: rotate(90deg);
}
.modal-footer, .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.modal-actions .btn, .modal-footer .btn, .settings-action-btn, .confirm-modal-ok, .confirm-modal-cancel {
  border-radius: 999px !important; padding: 11px 22px !important;
  font-size: 13.5px !important; font-weight: 500 !important;
  border: 1px solid var(--pline-2) !important;
  background: transparent !important; color: var(--bone) !important;
  transition: background-color .3s, color .3s, border-color .3s, transform .35s var(--p-ease);
}
.modal-actions .btn:hover, .modal-footer .btn:hover, .settings-action-btn:hover {
  background: var(--psurface-2) !important; transform: translateY(-2px);
}
.modal-actions .btn.save, .modal-footer .btn.save, .confirm-modal-ok, .btn.confirm-delete-btn {
  background: var(--primary, var(--tomato)) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: 0 10px 26px -12px rgba(var(--primary-rgb, 223,69,38), .85) !important;
}
.modal-actions .btn.save:hover, .confirm-modal-ok:hover { filter: brightness(1.08); }

/* AI helper button — the base theme ships a violet gradient; keep it warm */
.ai-magic-btn {
  background: linear-gradient(140deg, var(--ember), var(--tomato)) !important;
  color: #fff !important; border: 0 !important;
  border-radius: 999px !important; padding: 7px 14px !important;
  font-family: var(--p-font) !important;
  font-size: 11.5px !important; font-weight: 550 !important; letter-spacing: .02em;
  box-shadow: 0 8px 20px -10px rgba(232,145,60,.9), inset 0 1px 0 rgba(255,255,255,.28) !important;
  transition: transform .35s var(--p-ease), filter .3s;
}
.ai-magic-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* stepper buttons */
.pomodoro-control { display: flex; align-items: center; gap: 9px; }
.pomodoro-btn {
  width: 38px; height: 38px; border-radius: 12px !important;
  background: var(--primary, var(--tomato)) !important; color: #fff !important;
  border: 0 !important; font-size: 17px !important; line-height: 1;
  box-shadow: 0 8px 20px -12px rgba(var(--primary-rgb, 223,69,38), .9) !important;
  transition: transform .3s var(--p-ease), filter .3s;
}
.pomodoro-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.pomodoro-input { text-align: center; max-width: 78px; }

.badge-category { background: rgba(232,145,60,.16) !important; color: var(--ember) !important; }

/* settings tabs */
.settings-tabs { display: flex; gap: 5px; flex-wrap: wrap; padding: 5px; border-radius: 999px; background: var(--psurface); border: 1px solid var(--pline); }
/* the 999px stadium radius only reads correctly on a single row; once the
   tabs wrap onto 2-3 lines on narrow screens it draws a lopsided oval
   around the whole block, so flatten it to a normal rounded-rect there */
@media (max-width: 768px) {
  .settings-tabs { border-radius: 18px; }
}
.settings-tab {
  border-radius: 999px !important; padding: 9px 15px !important;
  background: transparent !important; border: 0 !important;
  font-size: 12.5px !important; color: var(--muted) !important;
  transition: background-color .3s, color .3s;
}
.settings-tab:hover { color: var(--bone) !important; }
.settings-tab.active {
  background: var(--primary, var(--tomato)) !important; color: #fff !important;
  box-shadow: 0 6px 16px -8px rgba(var(--primary-rgb, 223,69,38), .9);
}
.settings-section {
  border: 1px solid var(--pline) !important; border-radius: 16px !important;
  background: var(--psurface) !important; padding: 18px !important;
}
.settings-section h3, .settings-section h4 {
  font-family: var(--p-mono) !important; font-size: 9.5px !important;
  letter-spacing: .18em !important; text-transform: uppercase !important;
  color: rgba(142,131,119,.9) !important;
}
.settings-description { font-size: 12.5px !important; color: var(--muted) !important; }
.settings-info-box, .settings-status-box {
  border: 1px solid var(--pline) !important; border-radius: 12px !important;
  background: var(--psurface-2) !important; font-size: 12.5px; color: var(--muted) !important;
}
.setting-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--pline); }
.setting-toggle:last-child { border-bottom: 0; }
/* .setting-field had no spacing rule of its own outside a grid, so every
   standalone field touched the next element at 0px — confirmed by measuring
   every adjacent pair in the modal, not just the one screenshotted (Görünüm's
   "Mavi" dropdown flush against the "Karanlık Mod" box was the visible case,
   because both have borders/radius that make a 0px seam read as one malformed
   shape; Ses's Alarm Sesi/Tekrar Sayısı/Ses Seviyesi fields had the identical
   0px gap, just less obvious without borders to collide). .settings-grid-2
   already spaces its own fields via `gap`, so it's excluded here. */
.setting-field { margin-bottom: 14px; }
.setting-field:last-child { margin-bottom: 0; }
.settings-grid-2 .setting-field { margin-bottom: 0; }
.toggle-text { font-size: 13.5px !important; color: var(--bone) !important; }
/* .toggle-btn (Karanlık Mod / Bildirimler / Tam Ekran) was left over from
   before the premium redesign: a hardcoded rgba(77,163,255,...) blue,
   independent of --primary, plus an 8px radius that didn't match the pill
   language everywhere else. It happened to look intentional whenever the
   user's own accent picker was blue and clashed the rest of the time. */
.toggle-btn {
  padding: 8px 16px !important;
  background: var(--psurface) !important;
  border: 1px solid var(--pline) !important;
  border-radius: 999px !important;
  color: var(--bone) !important;
  font-family: var(--p-font) !important; font-size: 12.5px !important; font-weight: 500 !important;
  transition: background-color .3s, border-color .3s, transform .35s var(--p-ease);
}
.toggle-btn:hover {
  background: var(--psurface-2) !important; border-color: var(--pline-2) !important;
  transform: translateY(-1px);
}

/* ---------- 11. INFO SECTION (scroll content) ---------- */
.info-section { max-width: 900px !important; margin-inline: auto; padding-block: clamp(40px, 7vh, 90px) !important; }
.info-section,
body > footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
}
/* the slider itself is the card; slides stack inside it */
.info-slider {
  padding: clamp(24px, 3vw, 40px) !important;
  border: 1px solid var(--pline) !important;
  border-radius: var(--p-radius) !important;
  background: linear-gradient(168deg, var(--psurface-2), var(--psurface)) !important;
  box-shadow: none !important;
  color: var(--bone) !important;
  font-family: var(--p-font) !important;
}
.info-slider .slide { text-align: left; }
.info-slider h2 {
  font-family: var(--p-font) !important;
  font-size: clamp(24px, 3vw, 36px) !important; font-weight: 550 !important;
  letter-spacing: -0.035em !important; color: var(--bone) !important; margin-bottom: 16px !important;
}
.info-slider p, .info-slider li { font-size: 15px !important; line-height: 1.66 !important; color: var(--muted) !important; }
.info-slider ul { display: grid; gap: 9px; margin-top: 14px; padding-left: 0; }
.info-slider li { position: relative; padding-left: 22px; list-style: none; }
.info-slider li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--primary, var(--tomato));
}

/* ---------- 12. FOOTER ---------- */
body > footer {
  border-top: 1px solid var(--pline) !important;
  color: var(--muted) !important;
  padding: 34px 20px !important; margin-top: 0 !important;
  font-family: var(--p-mono) !important; font-size: 10.5px !important;
  letter-spacing: .1em; text-transform: uppercase;
}
body > footer a { color: var(--muted) !important; transition: color .3s; }
body > footer a:hover { color: var(--primary, var(--tomato)) !important; }

/* ---------- 13. ENTRANCE CHOREOGRAPHY ---------- */
body.pa-boot .panel-section,
body.pa-boot .timer-container,
body.pa-boot .app-header,
body.pa-boot .timer-actions {
  opacity: 0; transform: translateY(20px);
}
body.pa-live .app-header      { animation: paRise .8s var(--p-ease) .02s both; }
body.pa-live .timer-container { animation: paRise .95s var(--p-ease) .14s both; }
body.pa-live .timer-actions   { animation: paRise .8s var(--p-ease) .40s both; }
body.pa-live .left-panel  .panel-section { animation: paRise .85s var(--p-ease) both; }
body.pa-live .right-panel .panel-section { animation: paRise .85s var(--p-ease) both; }
body.pa-live .left-panel  .panel-section:nth-of-type(1) { animation-delay: .22s; }
body.pa-live .left-panel  .panel-section:nth-of-type(2) { animation-delay: .30s; }
body.pa-live .left-panel  .panel-section:nth-of-type(3) { animation-delay: .38s; }
body.pa-live .right-panel .panel-section:nth-of-type(1) { animation-delay: .26s; }
body.pa-live .right-panel .panel-section:nth-of-type(2) { animation-delay: .34s; }
body.pa-live .right-panel .panel-section:nth-of-type(3) { animation-delay: .42s; }
body.pa-live .right-panel .panel-section:nth-of-type(4) { animation-delay: .50s; }
@keyframes paRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* scroll reveal for the info slides */
.pa-rv { opacity: 0; transform: translateY(30px); }
.pa-rv.pa-in { opacity: 1; transform: none; transition: opacity .9s var(--p-ease), transform 1s var(--p-ease); }

/* ---------- 14. SCROLLBARS ---------- */
.task-list::-webkit-scrollbar, .brain-dump-list::-webkit-scrollbar,
.modal-content::-webkit-scrollbar { width: 5px; }
.task-list::-webkit-scrollbar-thumb, .brain-dump-list::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb { background: var(--pline-2); border-radius: 999px; }
.task-list::-webkit-scrollbar-track, .brain-dump-list::-webkit-scrollbar-track { background: transparent; }

/* ---------- 15. FOCUS VISIBILITY ---------- */
:focus-visible {
  outline: 2px solid var(--primary, var(--tomato)) !important;
  outline-offset: 3px !important; border-radius: 6px;
}

/* ---------- 16. RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .timer-time { font-size: clamp(56px, 13vw, 100px) !important; }
  .pa-ring svg { width: min(300px, 84%); }
}
@media (max-width: 640px) {
  .app-header .header-inner { min-height: 62px; }
  .app-header .logo-text { font-size: 16px !important; }
  .live-group, .app-header .divider-vertical { display: none !important; }
  .app-header .header-inner { gap: 8px; }
  .app-header .actions-section { gap: 6px; }
  .btn-primary-sm { padding: 0 14px !important; font-size: 12.5px !important; white-space: nowrap; }
  .accent-dropdown-btn { padding: 0 10px !important; }
  .accent-dropdown-btn .accent-label { display: none; }
  .mode-switcher .mode { padding: 8px 13px !important; font-size: 12px !important; }
  .start-btn, .reset-btn { height: 50px; min-width: 132px; padding: 0 26px !important; font-size: 13px !important; }
  .timer-time { font-size: clamp(52px, 17vw, 82px) !important; }
}
@media (max-width: 480px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .app-header .header-inner { padding-inline: 10px !important; gap: 6px; }
  .app-header .brand-section { flex: 0 0 auto; }
  .app-header .logo-text, .app-header .xp-track,
  .app-header .accent-dropdown-container { display: none !important; }
  .app-header .actions-section {
    min-width: 0; flex: 1 1 auto; justify-content: flex-end; gap: 5px;
  }
  .app-header .xp-group { flex: 0 0 auto; padding: 5px 8px; }
  .app-header .btn-primary-sm {
    min-width: 0; max-width: 92px; padding-inline: 10px !important;
    overflow: hidden; text-overflow: ellipsis;
  }
}

/* ---------- 17. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  body.pa-boot .panel-section, body.pa-boot .timer-container,
  body.pa-boot .app-header, body.pa-boot .timer-actions { opacity: 1; transform: none; }
  .pa-rv { opacity: 1; transform: none; }
  .pa-grain { display: none; }
}

/* ---------- 18. PRINT ---------- */
@media print { .pa-ambient, .pa-grain, .pa-ring { display: none !important; } }

/* ============================================================
   19. INNER CONTENT — dropdown menu, dynamic lists, deep modals
   These carry hard-coded light-theme inline styles (JS-injected or
   in the template) that would otherwise win over anything not
   marked !important. Every rule below exists to beat one of those.
   ============================================================ */

/* --- header dropdown menu: icon chips + entrance --- */
#headerDropdown, #settingsAccentDropdown { min-width: 248px; padding: 10px !important; }
#headerDropdown .dropdown-item {
  display: flex !important; align-items: center; gap: 12px;
  padding: 10px 11px !important; font-size: 13.5px !important;
}
#headerDropdown .dropdown-item .pa-dico {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-size: 14.5px;
  background: var(--psurface-2); border: 1px solid var(--pline);
  transition: transform .4s var(--p-ease), border-color .3s, background-color .3s;
}
#headerDropdown .dropdown-item:hover .pa-dico {
  transform: translateY(-2px) rotate(-4deg) scale(1.06);
  border-color: color-mix(in srgb, var(--primary, var(--tomato)) 45%, transparent);
}
/* base CSS already drives .show (#headerDropdown) / .open (accent menus)
   via opacity+visibility+transform — just make the motion feel premium */
.dropdown-menu, .accent-dropdown-menu, .accent-select-menu {
  transform-origin: top right;
  transition: opacity .3s var(--p-ease), transform .34s var(--p-ease), visibility .3s !important;
}
.dropdown-menu:not(.show) { transform: scale(.95) translateY(-8px) !important; }
.dropdown-menu.show { transform: scale(1) translateY(0) !important; }
.accent-dropdown-menu:not(.open), .accent-select-menu:not(.open) { transform: scale(.95) translateY(-8px) !important; }
.accent-dropdown-menu.open, .accent-select-menu.open { transform: scale(1) translateY(0) !important; }

/* --- generic modal typography (covers auth / onboarding / session
   summary / habit / task headings that still say color:#666 etc.) --- */
.modal p, .modal label, .modal span, .modal div { color: inherit; }
.modal h2, .modal .modal-title { color: var(--bone) !important; }
.modal-content [style*="color:#666"], .modal-content [style*="color: #666"],
.modal-content [style*="color:#999"], .modal-content [style*="color: #999"],
.modal-content [style*="color:#333"], .modal-content [style*="color: #333"] {
  color: var(--muted) !important;
}

/* --- auth modal --- */
#authModal .auth-tabs { border-bottom-color: var(--pline) !important; }
#authModal .tab-btn { color: var(--muted) !important; }
#authModal .tab-btn.active { color: var(--bone) !important; border-bottom-color: var(--primary, var(--tomato)) !important; }
#authModal label { color: var(--bone-2) !important; }
#authModal #authError { background: rgba(223,69,38,.14) !important; color: var(--tomato-lit, #FF5C36) !important; }

/* --- leaderboard: JS injects inline background/border/color per row --- */
#leaderboardList > div {
  background: var(--psurface) !important;
  border: 1px solid var(--pline) !important;
  border-radius: 13px !important;
  transition: border-color .3s, background-color .3s, transform .3s var(--p-ease);
}
#leaderboardList > div:hover { border-color: var(--pline-2) !important; transform: translateX(3px); }
#leaderboardList > div[style*="rgba(255, 77, 79"] {
  background: color-mix(in srgb, var(--primary, var(--tomato)) 12%, var(--psurface)) !important;
  border-color: color-mix(in srgb, var(--primary, var(--tomato)) 45%, transparent) !important;
}
#leaderboardList [style*="color:#666"] { color: var(--muted) !important; }
#leaderboardList [style*="color:red"] { color: var(--tomato-lit, #FF5C36) !important; }

/* --- shop --- */
.shop-modal-content { max-width: 640px; max-height: 82vh; overflow-y: auto; }
.shop-modal-header { text-align: center; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--pline); }
.shop-modal-header h2 { margin: 0 0 4px; }
.shop-modal-header p { color: var(--muted); margin: 0; font-size: .92rem; }
.shop-modal-xp {
  font-family: var(--p-mono); font-size: 1.15rem; font-weight: 650;
  color: var(--primary, var(--tomato)); margin-top: 10px;
}
.shop-modal-close { margin-top: 24px; width: 100%; }

.shop-potion-banner {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary, var(--tomato)) 22%, var(--psurface)), var(--psurface-2));
  border: 1px solid color-mix(in srgb, var(--primary, var(--tomato)) 45%, transparent);
  border-radius: 13px; padding: 12px 16px; margin-bottom: 20px;
  font-size: .92rem; color: var(--text, var(--bone));
  animation: shopPotionPulse 2.4s ease-in-out infinite;
}
.shop-potion-banner__icon { font-size: 1.3rem; line-height: 1; }
@keyframes shopPotionPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary, var(--tomato)) 35%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary, var(--tomato)) 0%, transparent); }
}

#shopModal h3 {
  font-family: var(--p-mono); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(142,131,119,.9); margin: 22px 0 12px;
}
#shopModal h3:first-of-type { margin-top: 0; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }

.shop-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px;
  background: linear-gradient(168deg, var(--psurface-2), var(--psurface));
  border: 1px solid var(--pline);
  border-radius: 14px;
  padding: 16px 12px;
  transition: border-color .35s, transform .4s var(--p-ease), box-shadow .4s;
}
.shop-card:hover { border-color: var(--pline-2); transform: translateY(-3px); box-shadow: var(--p-lift); }

.shop-card.is-owned {
  background: linear-gradient(168deg, color-mix(in srgb, var(--sage) 14%, var(--psurface-2)), color-mix(in srgb, var(--sage) 8%, var(--psurface)));
  border-color: color-mix(in srgb, var(--sage) 40%, transparent);
}
.shop-card.is-equipped {
  border-color: color-mix(in srgb, var(--primary, var(--tomato)) 65%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary, var(--tomato)) 45%, transparent) inset;
}
.shop-card.is-locked { opacity: .58; }
.shop-card.is-armed { border-color: color-mix(in srgb, var(--primary, var(--tomato)) 70%, transparent); }

.shop-card__icon { font-size: 2rem; line-height: 1; margin-bottom: 2px; }
.shop-card__swatch {
  display: flex; width: 100%; height: 34px; border-radius: 9px; overflow: hidden;
  margin-bottom: 4px; border: 1px solid var(--pline);
}
.shop-card__swatch span { flex: 1; }

.shop-card__name { font-weight: 600; font-size: .95rem; }
.shop-card__desc { font-size: .76rem; color: var(--muted); line-height: 1.3; min-height: 1.3em; }

.shop-card__meta { margin-top: 2px; min-height: 1.4em; display: flex; align-items: center; justify-content: center; }
.shop-card__price { font-family: var(--p-mono); font-size: .82rem; color: var(--muted); }
.shop-card.is-locked .shop-card__price { color: var(--tomato-lit, #FF5C36); }
.shop-card__status { font-size: .8rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.shop-card__status.is-owned { color: var(--sage); }
.shop-card__status.is-equipped { color: var(--primary, var(--tomato)); }

.shop-card__btn {
  width: 100%; padding: 9px; margin-top: 4px; border: none; border-radius: 999px;
  font-weight: 550; font-size: .86rem; cursor: pointer;
  transition: transform .3s var(--p-ease), filter .3s, background-color .3s;
}
.shop-card__btn--buy {
  background: var(--primary, var(--tomato)); color: #fff;
}
.shop-card__btn--buy:hover { transform: translateY(-2px); filter: brightness(1.08); }
.shop-card__btn--locked {
  background: var(--ink-600); color: var(--muted); cursor: not-allowed;
}
.shop-card__btn--apply {
  background: none; border: 1px solid color-mix(in srgb, var(--primary, var(--tomato)) 55%, transparent);
  color: var(--primary, var(--tomato));
}
.shop-card__btn--apply:hover { background: color-mix(in srgb, var(--primary, var(--tomato)) 14%, transparent); transform: translateY(-2px); }
.shop-card__btn--applied {
  background: color-mix(in srgb, var(--primary, var(--tomato)) 16%, transparent);
  color: var(--primary, var(--tomato)); cursor: default;
}
.shop-card__confirm { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
.shop-card__btn--confirm {
  flex: 1; margin-top: 0; background: var(--sage); color: #fff; padding: 9px 4px;
}
.shop-card__btn--confirm:hover { filter: brightness(1.1); }
.shop-card__btn--cancel {
  flex: 0 0 38px; margin-top: 0; background: var(--ink-600); color: var(--muted); padding: 9px 0;
}
.shop-card__btn--cancel:hover { background: color-mix(in srgb, var(--tomato-lit, #FF5C36) 25%, var(--ink-600)); color: var(--tomato-lit, #FF5C36); }

#shopUserXP { color: var(--primary, var(--tomato)); font-weight: 600; }

/* --- achievements: give the base grid a premium hover + glow --- */
.achievement-card {
  background: var(--psurface) !important;
  border: 1px solid var(--pline) !important;
  transition: border-color .4s, transform .4s var(--p-ease), background-color .4s;
}
.achievement-card:hover { transform: translateY(-3px); border-color: var(--pline-2) !important; }
.achievement-card.unlocked {
  background: linear-gradient(150deg, color-mix(in srgb, var(--ember) 16%, transparent), color-mix(in srgb, var(--tomato) 8%, transparent)) !important;
  border-color: color-mix(in srgb, var(--ember) 45%, transparent) !important;
  box-shadow: 0 10px 26px -16px rgba(232,145,60,.6);
}
.achievement-card .achievement-name { color: var(--bone) !important; }
.achievements-summary {
  color: var(--muted) !important;
  border-top: 1px solid var(--pline); margin-top: 6px; padding-top: 16px;
  font-family: var(--p-mono) !important; font-size: 10.5px !important; letter-spacing: .1em;
  text-align: center;
}

/* ======================================================================
   ACHIEVEMENTS SHEET
   The badge grid can run to 20+ cards, taller than most viewports. It used
   to live inside one scrolling box together with the title and the close
   button, so scrolling to see more badges scrolled the header and the
   "Kapat" button out of view with it — from the grid there was no visible
   way back out. Now only the grid scrolls; the header (with its own ×) and
   the footer stay put.
   ====================================================================== */
.ach-content {
  max-width: 700px !important;
  max-height: 82vh !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex; flex-direction: column;
}

.ach-header {
  position: relative;
  flex: 0 0 auto;
  text-align: center;
  padding: 30px 44px 20px;
  border-bottom: 1px solid var(--pline);
}
.ach-header__close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  /* style.css's bare `button { background: #0078d4; ... }` reset otherwise
     wins here: a class selector beats an element selector overall, but
     only for the properties it actually declares, and this one hadn't
     declared background — so the icon rendered as a solid blue OS-button
     blob instead of a ghost icon button. */
  background: none !important;
  font-weight: 400 !important;
  color: var(--muted); border: 1px solid transparent;
  transition: color .25s, background-color .25s, border-color .25s, transform .25s var(--p-ease);
}
.ach-header__close svg { width: 16px; height: 16px; }
.ach-header__close:hover { color: var(--bone); background: var(--psurface-2); border-color: var(--pline); transform: rotate(90deg); }

.ach-header__badge {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin: 0 auto 12px;
  border-radius: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ember, #E8913C) 22%, transparent), color-mix(in srgb, var(--primary, var(--tomato)) 14%, transparent));
  border: 1px solid color-mix(in srgb, var(--ember, #E8913C) 35%, transparent);
  color: var(--ember, #E8913C);
}
.ach-header__badge svg { width: 24px; height: 24px; }

.ach-content h2 {
  font-family: var(--p-serif, "Instrument Serif", Georgia, serif) !important;
  font-weight: 400 !important; font-size: 1.5rem !important;
  margin: 0 0 6px !important; color: var(--bone) !important;
}
.ach-header__sub { margin: 0; font-size: 13px; color: var(--muted); }

.ach-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 28px;
}

.ach-footer {
  flex: 0 0 auto;
  padding: 16px 28px;
  border-top: 1px solid var(--pline);
}
.ach-footer__btn {
  width: 100%; padding: 12px; border-radius: 999px;
  background: var(--psurface); border: 1px solid var(--pline);
  color: var(--bone); font-weight: 550;
  transition: transform .3s var(--p-ease), border-color .3s, background-color .3s;
}
.ach-footer__btn:hover { border-color: var(--pline-2); background: var(--psurface-2); transform: translateY(-2px); }

/* ======================================================================
   SESSION SUMMARY — a small ceremony, not a light-mode share widget
   Was a hardcoded #f0f0f0 box with #666 labels and brand-colored full-
   width buttons; none of it read the app's own theme. Rebuilt as a
   class-based component (see the new markup in index.html) so it never
   drifts from the rest of the product again.
   ====================================================================== */
.ss-content {
  max-width: 420px !important;
  text-align: center;
  padding: 36px 32px 28px !important;
}

.ss-badge { width: 64px; height: 64px; margin: 0 auto 18px; }
.ss-badge svg { width: 100%; height: 100%; overflow: visible; }
.ss-badge__ring { fill: none; stroke: var(--pline-2); stroke-width: 1.5; }
.ss-badge__check {
  fill: none; stroke: var(--primary, var(--tomato)); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26;
  animation: ssCheck .6s cubic-bezier(.65,0,.35,1) .15s forwards;
}
#sessionSummaryModal:not(.hidden) .ss-badge__ring {
  animation: ssRing .5s var(--p-ease) forwards;
  transform-box: fill-box; transform-origin: center;
}
@keyframes ssRing { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ssCheck { to { stroke-dashoffset: 0; } }

.ss-eyebrow {
  display: block;
  font-family: var(--p-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--primary, var(--tomato));
  margin-bottom: 10px;
}
.ss-content h2 {
  font-family: var(--p-serif, "Instrument Serif", Georgia, serif) !important;
  font-weight: 400 !important; font-size: 1.7rem !important;
  line-height: 1.15 !important; margin: 0 0 26px !important;
  color: var(--bone) !important;
}

.ss-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 22px;
  background: linear-gradient(168deg, var(--psurface-2), var(--psurface));
  border: 1px solid var(--pline);
  border-radius: 18px;
  padding: 20px 12px;
  margin-bottom: 24px;
}
.ss-stat { flex: 1; min-width: 0; }
.ss-stat__value {
  font-family: var(--p-serif, "Instrument Serif", Georgia, serif);
  font-size: 2.4rem; line-height: 1; color: var(--primary, var(--tomato));
  font-variant-numeric: tabular-nums;
}
.ss-stat:nth-child(3) .ss-stat__value { color: var(--sage); }
.ss-stat__label {
  margin-top: 6px;
  font-family: var(--p-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.ss-stat__divider { width: 1px; height: 34px; background: var(--pline-2); flex: 0 0 auto; }

.ss-share { margin-bottom: 22px; }
.ss-share__label {
  font-family: var(--p-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(142,131,119,.75);
  margin: 0 0 12px;
}
.ss-share__row { display: flex; justify-content: center; gap: 10px; }
.ss-share__btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--psurface); border: 1px solid var(--pline);
  color: var(--muted);
  transition: transform .3s var(--p-ease), border-color .3s, color .3s, background-color .3s;
}
.ss-share__btn svg { width: 18px; height: 18px; fill: currentColor; }
.ss-share__btn--link svg { fill: none; }
.ss-share__btn:hover { transform: translateY(-3px); border-color: var(--pline-2); }
.ss-share__btn--x:hover { color: var(--bone); background: rgba(255,255,255,.06); }
.ss-share__btn--fb:hover { color: #6f95e8; border-color: rgba(111,149,232,.4); }
.ss-share__btn--wa:hover { color: #3ddc7c; border-color: rgba(61,220,124,.4); }
.ss-share__btn--link:hover { color: var(--primary, var(--tomato)); border-color: color-mix(in srgb, var(--primary, var(--tomato)) 40%, transparent); }

.ss-close {
  width: 100%;
  padding: 13px;
  border-radius: 999px;
  background: var(--primary, var(--tomato));
  color: #fff;
  font-weight: 600;
  transition: transform .3s var(--p-ease), filter .3s;
}
.ss-close:hover { transform: translateY(-2px); filter: brightness(1.07); }

/* Onboarding is a full-bleed sequence with its own stylesheet, and no
   longer borrows .modal/.modal-content — see onboarding.css. */

/* --- add-habit emoji picker --- */
.emoji-picker-container { display: flex; align-items: center; gap: 10px; }
.emoji-suggestions { display: flex; gap: 6px; flex-wrap: wrap; }
.emoji-suggestions span {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; font-size: 16px; cursor: pointer;
  background: var(--psurface); border: 1px solid var(--pline);
  transition: transform .3s var(--p-ease), border-color .3s, background-color .3s;
}
.emoji-suggestions span:hover { transform: translateY(-2px) scale(1.08); border-color: var(--pline-2); background: var(--psurface-2); }

/* --- AI subtasks modal --- */
#aiResultsList { background: var(--psurface) !important; border: 1px solid var(--pline) !important; }
.checklist-style label { color: var(--bone-2) !important; }

/* --- habit rows (settings + standalone) --- */
.habit-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 13px;
  background: var(--psurface); border: 1px solid var(--pline);
  transition: border-color .3s, transform .3s var(--p-ease), opacity .3s;
}
.habit-item:hover { border-color: var(--pline-2); transform: translateX(3px); }
.habit-item.completed { opacity: .55; }
.habit-content { display: flex; align-items: center; gap: 12px; }
.habit-checkbox { font-size: 19px; line-height: 1; }
.habit-name { font-size: 13.5px; font-weight: 500; color: var(--bone); }
.habit-stats { display: flex; gap: 10px; margin-top: 3px; font-family: var(--p-mono); font-size: 10px; letter-spacing: .06em; color: var(--muted); }
.habit-delete { opacity: .5; transition: opacity .3s, transform .3s var(--p-ease); }
.habit-delete:hover { opacity: 1; transform: scale(1.12); }

/* ============================================================
   20. AUTH MODAL — login / register, fully premium
   The old markup styled everything inline (fighting this file on
   every property); rebuilt with real classes so it inherits the
   modal system cleanly and never clips on short viewports.
   ============================================================ */
.auth-modal-content {
  width: 100%; max-width: 420px;
  max-height: min(88vh, 760px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 34px 30px 28px !important;
  position: relative;
}
.auth-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; font-size: 17px;
}
.auth-modal-head { text-align: center; margin-bottom: 24px; padding-right: 0; }
.auth-modal-head h2 {
  font-size: 22px !important; margin-bottom: 8px !important;
}
.auth-modal-head p {
  color: var(--muted) !important; font-size: 13.5px !important; margin: 0 !important;
}

.auth-tabs {
  display: flex; gap: 4px; margin-bottom: 26px;
  padding: 5px; border-radius: 999px;
  background: var(--psurface); border: 1px solid var(--pline);
}
.auth-tabs .tab-btn {
  flex: 1; padding: 10px 0; border-radius: 999px;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--p-font); font-size: 13.5px; font-weight: 550;
  color: var(--muted); transition: color .3s var(--p-ease), background-color .35s var(--p-ease);
}
.auth-tabs .tab-btn:hover { color: var(--bone); }
.auth-tabs .tab-btn.active {
  background: var(--primary, var(--tomato)); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(var(--primary-rgb, 223,69,38), .85);
}

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: flex; flex-direction: column; gap: 7px; }
.auth-field label {
  font-family: var(--p-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(142,131,119,.9); font-weight: 500;
}
.auth-field--collapsible {
  /* auth.js toggles display/opacity inline on tab switch — this only
     sets the pre-JS initial state, no max-height here or the field
     would stay clipped to 0 once JS reveals it. */
  display: none; opacity: 0;
  transition: opacity .3s ease;
}

.auth-pw-wrap { position: relative; display: flex; }
.auth-pw-wrap .modal-input { flex: 1; padding-right: 46px !important; }
.auth-pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; color: var(--muted);
  background: transparent; border: 0; cursor: pointer;
  transition: color .25s, background-color .25s;
}
.auth-pw-toggle:hover { color: var(--bone); background: var(--psurface-2); }
.auth-pw-toggle svg { width: 18px; height: 18px; }
.auth-pw-toggle .eye-closed { display: none; }
.auth-pw-toggle.is-showing .eye-open { display: none; }
.auth-pw-toggle.is-showing .eye-closed { display: block; }

/* password strength meter */
.pw-strength {
  display: flex; align-items: center; gap: 10px;
  margin-top: 2px; height: 0; opacity: 0; overflow: hidden;
  transition: opacity .3s ease, height .3s ease;
}
.pw-strength.is-visible { height: 20px; opacity: 1; }
.pw-strength__bars { display: flex; gap: 4px; flex: 1; max-width: 140px; }
.pw-strength__bar {
  height: 4px; flex: 1; border-radius: 999px;
  background: var(--pline-2);
  transition: background-color .35s var(--p-ease);
}
.pw-strength__bar.filled.lvl-1 { background: #A32E17; }
.pw-strength__bar.filled.lvl-2 { background: #DF4526; }
.pw-strength__bar.filled.lvl-3 { background: #E8913C; }
.pw-strength__bar.filled.lvl-4 { background: #D9A62E; }
.pw-strength__bar.filled.lvl-5 { background: #7E8C63; }
.pw-strength__label {
  font-family: var(--p-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.pw-strength__label[data-level="lvl-1"] { color: #DF4526; }
.pw-strength__label[data-level="lvl-2"] { color: #E8913C; }
.pw-strength__label[data-level="lvl-3"] { color: #E8913C; }
.pw-strength__label[data-level="lvl-4"] { color: #D9A62E; }
.pw-strength__label[data-level="lvl-5"] { color: #7E8C63; }

.auth-pw-match {
  display: block; min-height: 1em; font-size: 11.5px; margin-top: 2px;
  font-family: var(--p-mono); letter-spacing: .04em;
}
.auth-pw-match.match-ok { color: #7E8C63; }
.auth-pw-match.match-bad { color: #DF4526; }

.auth-error {
  display: none; text-align: center; font-size: 12.5px;
  color: var(--tomato-lit, #FF5C36);
  background: rgba(223,69,38,.12); border: 1px solid rgba(223,69,38,.28);
  padding: 10px 12px; border-radius: 12px;
}

.auth-submit { width: 100%; margin-top: 4px; }
.auth-modal-close-text {
  display: block; width: 100%; margin-top: 18px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-size: 13px; font-weight: 500;
  transition: color .25s;
}
.auth-modal-close-text:hover { color: var(--bone); }

@media (max-width: 480px) {
  .auth-modal-content { padding: 28px 20px 22px !important; max-height: min(92vh, 760px); }
}

/* ===== Sound Studio — ten live-synthesised tracks ===================== */
/* The panel grew from four sample players to ten synthesised soundscapes, so
   the track list needs to stay compact in the sidebar and never push the
   column taller than the viewport. */

.sound-mixer-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mixer-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-family: var(--p-mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--primary, #DF4526);
  box-shadow: 0 0 12px -2px rgba(var(--primary-rgb, 223, 69, 38), .9);
}

.mixer-badge.hidden { display: none; }

.mixer-master {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pline);
}

.mixer-master-label {
  font-family: var(--p-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(142, 131, 119, .9);
  white-space: nowrap;
}

.mixer-stop {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 12px;
  cursor: pointer;
  color: rgba(142, 131, 119, .9);
  background: var(--psurface);
  border: 1px solid var(--pline);
  transition: color .25s, border-color .25s;
}

.mixer-stop:hover {
  color: #fff;
  border-color: var(--pline-2);
}

/* Ten rows would run off the bottom of the sidebar, so the list scrolls
   inside the panel instead of stretching it. The panel's open/closed
   animation lives on .mixer-body (layout-improvements.css) — setting a
   max-height on .mixer-tracks here would override the collapsed state and
   leave the panel permanently open. */
.sound-mixer-panel .mixer-tracks {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.mixer-tracks::-webkit-scrollbar { width: 6px; }
.mixer-tracks::-webkit-scrollbar-thumb {
  background: var(--pline-2);
  border-radius: 3px;
}

/* The icon is a real <button> now (it toggles a track), so the button reset
   has to be undone to keep the original tile look. */
button.track-icon {
  padding: 0;
  font-family: inherit;
  line-height: 1;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

button.track-icon:focus-visible {
  outline: 2px solid var(--primary, #DF4526);
  outline-offset: 2px;
}

.mixer-hint {
  margin: 12px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(142, 131, 119, .75);
}

/* A quiet pulse on the header while anything is playing. */
.sound-mixer-panel.is-playing .sound-mixer-toggle h3 {
  color: var(--primary, #DF4526);
}

@media (prefers-reduced-motion: reduce) {
  .track-icon { transition: none; }
  .track-icon:hover { transform: none; }
}

/* ===== Level / XP indicator ============================================ */
/* The gamification code has always written a level, a title and a progress
   percentage; until now there was nowhere on screen for any of it. */

.xp-group {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 11px 5px 7px;
  border-radius: 999px;
  background: var(--psurface);
  border: 1px solid var(--pline);
  transition: border-color .3s, box-shadow .35s var(--p-ease);
}

.level-chip {
  font-family: var(--p-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary, #DF4526);
  white-space: nowrap;
}

.xp-track {
  position: relative;
  width: 68px;
  height: 4px;
  border-radius: 2px;
  background: rgba(142, 131, 119, .22);
  overflow: hidden;
}

.xp-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--primary, #DF4526) 65%, transparent),
    var(--primary, #DF4526));
  transition: width .6s var(--p-ease);
}

/* checkLevelUp() adds this class for a beat when the level goes up. */
.xp-group.level-up-anim {
  animation: xpLevelUp .9s var(--p-ease);
}

@keyframes xpLevelUp {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.09); border-color: var(--primary, #DF4526); }
  100% { transform: scale(1); }
}

/* The header is tight on phones: keep the level, drop the bar. */
@media (max-width: 760px) {
  .xp-track { display: none; }
  .xp-group { padding: 5px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .xp-fill { transition: none; }
  .xp-group.level-up-anim { animation: none; }
}

/* Visually hidden but read by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===== Task toolbar ==================================================== */
.task-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0 4px;
}

.task-filter {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--text, #e8e2da);
  background: var(--psurface);
  border: 1px solid var(--pline);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.task-filter:focus-visible,
.task-archive-btn:focus-visible {
  outline: 2px solid var(--primary, #DF4526);
  outline-offset: 2px;
}

.task-archive-btn {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 11.5px;
  white-space: nowrap;
  color: rgba(142, 131, 119, .95);
  background: var(--psurface);
  border: 1px solid var(--pline);
  cursor: pointer;
  transition: color .25s, border-color .25s;
}

.task-archive-btn:hover {
  color: var(--text, #fff);
  border-color: var(--pline-2);
}

/* ===== Habits panel ==================================================== */
.habits-card .habits-empty {
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(142, 131, 119, .8);
  padding: 6px 0 2px;
}

.habits-card .habits-list { margin-top: 4px; }

/* ===== Habit management inside Settings ================================ */
.habit-add-row {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.habit-icon-field,
.habit-name-field {
  padding: 9px 10px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text, #e8e2da);
  background: var(--psurface);
  border: 1px solid var(--pline);
}

.habit-icon-field { text-align: center; font-size: 16px; }

.habit-icon-field:focus-visible,
.habit-name-field:focus-visible {
  outline: 2px solid var(--primary, #DF4526);
  outline-offset: 1px;
}

.habits-settings-list { display: flex; flex-direction: column; gap: 8px; }

.habit-item-settings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--psurface);
  border: 1px solid var(--pline);
}

.habit-item-settings.completed { border-color: color-mix(in srgb, var(--primary, #DF4526) 45%, transparent); }
.habit-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.habit-checkbox-settings,
.habit-delete-settings {
  background: transparent; border: none; cursor: pointer; font-size: 15px; padding: 2px;
}
.habit-delete-settings { opacity: .5; transition: opacity .2s; }
.habit-delete-settings:hover { opacity: 1; }
.habit-name-settings { font-size: 13px; }
.habit-stats-settings { display: flex; gap: 10px; font-size: 10.5px; opacity: .7; margin-top: 2px; }

/* ===== Settings action buttons ========================================= */
.settings-action-row { display: flex; flex-wrap: wrap; gap: 8px; }

.settings-action-btn {
  flex: 1 1 200px;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  color: var(--text, #e8e2da);
  background: var(--psurface);
  border: 1px solid var(--pline);
  cursor: pointer;
  transition: border-color .25s, transform .25s var(--p-ease);
}

.settings-action-btn:hover { border-color: var(--pline-2); transform: translateY(-1px); }
.settings-action-btn:focus-visible { outline: 2px solid var(--primary, #DF4526); outline-offset: 2px; }

.settings-hint {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(142, 131, 119, .75);
}

/* ===== Productivity by hour ============================================ */
.productivity-toggle {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
}

.productivity-toggle::after {
  content: '▾';
  font-size: 11px;
  opacity: .55;
  transition: transform .3s var(--p-ease);
}

.productivity-card:not(.collapsed) .productivity-toggle::after { transform: rotate(180deg); }

.productivity-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

.productivity-card:not(.collapsed) .productivity-body {
  max-height: 420px;
  overflow-y: auto;
  margin-top: 12px;
}

.productive-hours { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }

.hour-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 11.5px;
  background: var(--psurface);
  border: 1px solid var(--pline);
}

.hour-time { font-family: var(--p-mono); letter-spacing: .04em; }
.hour-count { opacity: .7; }

.hourly-chart { display: flex; flex-direction: column; gap: 3px; }

.chart-bar {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 10px;
}

.chart-hour { font-family: var(--p-mono); opacity: .6; }

.chart-fill {
  height: 6px;
  min-width: 2px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--primary, #DF4526) 55%, transparent),
    var(--primary, #DF4526));
  transition: width .4s var(--p-ease);
}

@media (prefers-reduced-motion: reduce) {
  .productivity-body, .chart-fill, .settings-action-btn { transition: none; }
}

/* ======================================================================
   SHEET MODALS — task & habit
   The task dialog was one flat column: title, eight identical inputs and
   the buttons, all scrolling together with no grouping and no hierarchy.
   It now reads as a sheet — pinned header, scrolling body, pinned footer —
   with paired fields on one row and a single accent moment (the primary
   button). Everything below is scoped to .sheet / the two dialogs so no
   other modal changes.
   ====================================================================== */

.modal-content.sheet,
#addHabitModal .modal-content {
  display: flex;
  flex-direction: column;
  max-height: min(86vh, 780px);
  padding: 0 !important;
  overflow: hidden;
  border-radius: 22px !important;
  border: 1px solid var(--pline) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 120px),
    var(--pcard, #16110d) !important;
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(255, 255, 255, .03) inset;
}

/* --- header ---------------------------------------------------------- */
.sheet-head,
#addHabitModal .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--pline) !important;
  flex: 0 0 auto;
}

.sheet-title-wrap { min-width: 0; }

.modal-content.sheet .modal-title,
#addHabitModal .modal-header h2 {
  margin: 0 !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: var(--bone, #f2ece4) !important;
}

.sheet-sub {
  margin: 4px 0 0 !important;
  font-size: 11.5px !important;
  line-height: 1.4;
  color: rgba(142, 131, 119, .85) !important;
}

/* --- body ------------------------------------------------------------ */
.sheet-body,
#addHabitModal .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 24px 22px !important;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
}

.sheet-body::-webkit-scrollbar,
#addHabitModal .modal-body::-webkit-scrollbar { width: 7px; }
.sheet-body::-webkit-scrollbar-thumb,
#addHabitModal .modal-body::-webkit-scrollbar-thumb {
  background: var(--pline-2); border-radius: 4px;
}

.field { display: block; min-width: 0; }

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.field-head .modal-label { margin-bottom: 0 !important; }

.modal-content.sheet .modal-label .opt,
#addHabitModal .modal-label .opt {
  letter-spacing: .08em;
  opacity: .55;
  text-transform: none;
}

.field-hint {
  margin: 8px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.45;
  color: rgba(142, 131, 119, .7) !important;
}

/* --- inputs ---------------------------------------------------------- */
.modal-content.sheet .modal-input,
#addHabitModal .modal-input {
  width: 100%;
  padding: 12px 14px !important;
  font-family: inherit;
  font-size: 14px !important;
  border-radius: 13px !important;
  color: var(--text, #ece5dc) !important;
  background: rgba(255, 255, 255, .035) !important;
  border: 1px solid var(--pline) !important;
  transition: border-color .25s, background .25s, box-shadow .25s;
}

.modal-content.sheet .modal-input::placeholder,
#addHabitModal .modal-input::placeholder { color: rgba(142, 131, 119, .55); }

.modal-content.sheet .modal-input:hover,
#addHabitModal .modal-input:hover { border-color: var(--pline-2) !important; }

.modal-content.sheet .modal-input:focus,
.modal-content.sheet .modal-input:focus-visible,
#addHabitModal .modal-input:focus,
#addHabitModal .modal-input:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .06) !important;
  border-color: color-mix(in srgb, var(--primary, #DF4526) 55%, transparent) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 223, 69, 38), .16);
}

.modal-content.sheet textarea.modal-input { resize: vertical; min-height: 82px; line-height: 1.55; }

/* Native select arrows differ per platform; draw one chevron instead. */
.select-wrap { position: relative; }
.select-wrap select.modal-input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px !important;
  cursor: pointer;
}
.select-wrap::after {
  content: '';
  position: absolute;
  right: 14px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -5px;
  border-right: 1.6px solid rgba(142, 131, 119, .9);
  border-bottom: 1.6px solid rgba(142, 131, 119, .9);
  transform: rotate(45deg);
  pointer-events: none;
}

/* --- pomodoro stepper ------------------------------------------------- */
/* Was two filled accent squares either side of a box — three competing
   shapes. One segmented pill instead, with the number as the hero. */
.modal-content.sheet .pomodoro-control {
  display: inline-flex !important;
  align-items: center;
  gap: 0 !important;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--pline);
}

.modal-content.sheet .pomodoro-btn {
  width: 40px !important;
  height: 38px !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: rgba(142, 131, 119, .95) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  cursor: pointer;
  transition: background .2s, color .2s, transform .12s;
}

.modal-content.sheet .pomodoro-btn:hover {
  transform: none !important;
  filter: none !important;
  background: rgba(255, 255, 255, .07) !important;
  color: var(--bone, #fff) !important;
}

.modal-content.sheet .pomodoro-btn:active { transform: scale(.94) !important; }

.modal-content.sheet .pomodoro-btn:focus-visible {
  outline: 2px solid var(--primary, #DF4526);
  outline-offset: -2px;
}

.modal-content.sheet .pomodoro-input {
  width: 58px !important;
  max-width: none !important;
  padding: 0 !important;
  text-align: center;
  font-family: var(--p-mono) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--bone, #fff) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
}

.modal-content.sheet .pomodoro-input::-webkit-outer-spin-button,
.modal-content.sheet .pomodoro-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* --- AI button -------------------------------------------------------- */
.modal-content.sheet .ai-magic-btn {
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-family: var(--p-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(142, 131, 119, .95) !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid var(--pline) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
}

.modal-content.sheet .ai-magic-btn:hover {
  color: var(--bone, #fff) !important;
  border-color: color-mix(in srgb, var(--primary, #DF4526) 50%, transparent) !important;
  background: rgba(var(--primary-rgb, 223, 69, 38), .1) !important;
}

/* --- emoji picker ----------------------------------------------------- */
#addHabitModal .emoji-picker-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#addHabitModal .habit-icon-input {
  width: 62px !important;
  flex: 0 0 auto;
  text-align: center;
  font-size: 20px !important;
  padding: 10px 6px !important;
}

#addHabitModal .emoji-suggestions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.emoji-chip {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-size: 18px;
  line-height: 1;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--pline);
  transition: transform .2s var(--p-ease), border-color .2s, background .2s;
}

.emoji-chip:hover { transform: translateY(-2px); border-color: var(--pline-2); }

.emoji-chip.selected {
  border-color: color-mix(in srgb, var(--primary, #DF4526) 70%, transparent);
  background: rgba(var(--primary-rgb, 223, 69, 38), .14);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 223, 69, 38), .13);
}

.emoji-chip:focus-visible { outline: 2px solid var(--primary, #DF4526); outline-offset: 2px; }

/* --- footer ----------------------------------------------------------- */
.sheet-foot,
#addHabitModal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px !important;
  margin: 0 !important;
  border-top: 1px solid var(--pline) !important;
  background: rgba(0, 0, 0, .18);
  flex: 0 0 auto;
}

.modal-content.sheet .btn,
#addHabitModal .modal-footer .btn {
  padding: 11px 20px !important;
  border-radius: 12px !important;
  font-family: inherit;
  font-size: 13.5px !important;
  font-weight: 550 !important;
  cursor: pointer;
  transition: transform .2s var(--p-ease), filter .2s, border-color .2s;
}

.modal-content.sheet .btn.cancel,
#addHabitModal .modal-footer .btn.cancel {
  color: rgba(142, 131, 119, .95) !important;
  background: transparent !important;
  border: 1px solid var(--pline) !important;
}

.modal-content.sheet .btn.cancel:hover,
#addHabitModal .modal-footer .btn.cancel:hover {
  color: var(--bone, #fff) !important;
  border-color: var(--pline-2) !important;
}

.modal-content.sheet .btn.save,
#addHabitModal .modal-footer .btn.save {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg,
    var(--primary, #DF4526),
    color-mix(in srgb, var(--primary, #DF4526) 72%, #000)) !important;
  box-shadow: 0 10px 26px -12px rgba(var(--primary-rgb, 223, 69, 38), .95);
}

.modal-content.sheet .btn.save:hover,
#addHabitModal .modal-footer .btn.save:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.modal-content.sheet .btn:focus-visible,
#addHabitModal .modal-footer .btn:focus-visible {
  outline: 2px solid var(--primary, #DF4526);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .field-grid { grid-template-columns: 1fr; }
  .sheet-head, .sheet-body, .sheet-foot,
  #addHabitModal .modal-header, #addHabitModal .modal-body, #addHabitModal .modal-footer {
    padding-left: 18px !important; padding-right: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .emoji-chip, .modal-content.sheet .btn, .modal-content.sheet .pomodoro-btn { transition: none; }
  .emoji-chip:hover, .modal-content.sheet .btn.save:hover { transform: none; }
}

/* ======================================================================
   DAILY CHALLENGES header
   In the sidebar the title claimed the full row and pushed the countdown
   onto its own line under a rule, so the two read as unrelated fragments.
   The countdown is a live status, so it belongs beside the title and gets
   a quiet pulse rather than an hourglass emoji.
   ====================================================================== */

#dailyChallengesSection .challenges-header {
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 10px !important;
  margin-bottom: 6px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

#dailyChallengesSection .challenges-header h3 {
  flex: 1 1 auto !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#dailyChallengesSection .challenges-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px !important;
  border-radius: 999px;
  background: rgba(var(--primary-rgb, 223, 69, 38), .1) !important;
  border: 1px solid color-mix(in srgb, var(--primary, #DF4526) 32%, transparent) !important;
  color: color-mix(in srgb, var(--primary, #DF4526) 82%, #fff) !important;
}

.challenges-timer-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--primary, #DF4526);
  box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 223, 69, 38), .7);
  animation: challengePulse 2.4s ease-out infinite;
}

@keyframes challengePulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 223, 69, 38), .55); }
  70%  { box-shadow: 0 0 0 5px rgba(var(--primary-rgb, 223, 69, 38), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 223, 69, 38), 0); }
}

.challenges-timer-value {
  font-family: var(--p-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.challenges-timer-value .u { opacity: .6; margin-left: 1px; margin-right: 3px; font-weight: 400; }

#dailyChallengesSection .challenges-subtitle {
  margin: 0 0 14px !important;
  font-size: 11px !important;
  color: rgba(142, 131, 119, .72) !important;
}

@media (prefers-reduced-motion: reduce) {
  .challenges-timer-dot { animation: none; }
}

/* style.css draws a rule under every label inside .modal-content. In a form
   with eight fields that reads as ruled notepad paper and fights the grouping
   the sheet layout is trying to establish. */
.modal-content.sheet label,
#addHabitModal .modal-content label {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Native date inputs size themselves to their content, so the field ended up
   visibly narrower than the one beside it in the same grid column. */
.modal-content.sheet input[type="date"].modal-input {
  width: 100%;
  min-width: 0;
}

.modal-content.sheet input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .55;
  cursor: pointer;
  filter: invert(.8);
}

.modal-content.sheet input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Keep the custom-emoji field and the six presets on one line: at the previous
   sizes they overflowed and the field was stranded on a row of its own. */
#addHabitModal .emoji-picker-container { flex-wrap: nowrap; gap: 8px; }

#addHabitModal .habit-icon-input {
  width: 52px !important;
  padding: 9px 4px !important;
  font-size: 18px !important;
}

#addHabitModal .emoji-suggestions { gap: 6px; flex-wrap: nowrap; }

#addHabitModal .emoji-chip { width: 36px; height: 36px; font-size: 16px; }

@media (max-width: 460px) {
  #addHabitModal .emoji-picker-container { flex-wrap: wrap; }
  #addHabitModal .emoji-suggestions { flex-wrap: wrap; }
}

/* Match the custom field to the preset chips exactly so the row sits on one
   baseline instead of being a pixel or two off. */
#addHabitModal .emoji-picker-container { align-items: center; }
#addHabitModal .habit-icon-input {
  height: 36px !important;
  padding: 0 4px !important;
  line-height: 36px;
}

/* The sidebar is ~218px wide: the title alone needs almost all of it, so
   forcing the countdown onto the same row either wrapped it awkwardly or
   truncated the title. Title gets its own line; the countdown and the
   explanation share a single meta row beneath it. */
#dailyChallengesSection .challenges-header { display: block !important; margin-bottom: 8px !important; }

#dailyChallengesSection .challenges-header h3 {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.45 !important;
}

.challenges-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

#dailyChallengesSection .challenges-subtitle {
  margin: 0 !important;
  font-size: 10.5px !important;
  color: rgba(142, 131, 119, .7) !important;
}

/* ======================================================================
   MODE SWITCHER — one row, pulled up
   style.css pins every .mode to min-width:100px, so four buttons needed
   422px inside a 410px track and "Kronometre" dropped to a second line on
   its own. The track also carried a 28px top margin on top of the card's
   38px padding, leaving a large gap above it.

   Equal segments that shrink to the track instead of a fixed floor, and the
   whole control sits tight under the card edge. The sliding indicator reads
   the active button's own box, so it follows either way.
   ====================================================================== */

.mode-switcher {
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  gap: 3px !important;
}

.mode-switcher .mode {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 9px 6px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px !important;
}

/* Reclaim the space above: the card's own top padding is enough separation. */
.timer-container { padding-top: clamp(16px, 2vw, 24px) !important; }

/* Very narrow cards: let the track scroll sideways rather than wrap, which
   would put the sliding indicator on a row of its own. */
@media (max-width: 420px) {
  .mode-switcher {
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start !important;
  }
  .mode-switcher::-webkit-scrollbar { display: none; }
  .mode-switcher .mode { flex: 0 0 auto !important; padding: 9px 12px !important; }
}

/* ======================================================================
   FOCUS GOAL — inline, optional
   Setting a goal used to be a modal in front of START: a dialog, a text
   field and three buttons before the app's most repeated action, where two
   of those buttons did the same thing on an empty field. It is a quiet
   affordance under the timer now.
   ====================================================================== */

.current-goal-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(100%, 340px);
  margin: 10px auto 0;
  padding: 6px 13px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  color: rgba(142, 131, 119, .8);
  background: transparent;
  border: 1px dashed var(--pline);
  transition: color .25s, border-color .25s, background .25s;
}

.current-goal-display:hover {
  color: var(--bone, #fff);
  border-color: var(--pline-2);
  background: rgba(255, 255, 255, .035);
}

.current-goal-display:focus-visible { outline: 2px solid var(--primary, #DF4526); outline-offset: 2px; }

/* Once there is a goal it stops looking like an empty slot. */
.current-goal-display.has-goal {
  color: var(--bone, #f2ece4);
  border-style: solid;
  border-color: color-mix(in srgb, var(--primary, #DF4526) 34%, transparent);
  background: rgba(var(--primary-rgb, 223, 69, 38), .09);
}

.last-goal-chip {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 13px;
  border-radius: 11px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  color: var(--bone, #f2ece4);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--pline);
  transition: border-color .2s, background .2s;
}

.last-goal-chip::before { content: '↺  '; opacity: .5; }
.last-goal-chip:hover { border-color: var(--pline-2); background: rgba(255, 255, 255, .06); }
.last-goal-chip:focus-visible { outline: 2px solid var(--primary, #DF4526); outline-offset: 2px; }

.goal-sheet .sheet-body { gap: 14px; }
.goal-sheet .sheet-foot { justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  .current-goal-display, .last-goal-chip { transition: none; }
}

/* The two collapsible panel headers became real <button>s so keyboard users can
   reach them; undo the UA button styling so they look exactly as before. */
button.sound-mixer-toggle,
button.productivity-toggle {
  width: 100%;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

button.sound-mixer-toggle:focus-visible,
button.productivity-toggle:focus-visible {
  outline: 2px solid var(--primary, #DF4526);
  outline-offset: 4px;
  border-radius: 8px;
}

/* ===== Danger zone ===================================================== */
/* A dedicated destructive colour, deliberately not the accent: whatever the
   user picks for --primary, "delete my account" must not look like "save". */
:root { --danger: #ef4444; --danger-strong: #dc2626; --danger-rgb: 239, 68, 68; }

.danger-zone {
  /* JS flips display between none and block, so the base state stays hidden. */
  display: none;
  border: 1px solid rgba(var(--danger-rgb), .32);
  border-radius: 14px;
  padding: 16px 18px;
  background: rgba(var(--danger-rgb), .05);
}

.danger-zone h3 {
  color: var(--danger) !important;
  margin-bottom: 8px !important;
}

.danger-zone__note {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(142, 131, 119, .9);
}

.danger-btn {
  padding: 10px 18px !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  cursor: pointer;
  color: var(--danger) !important;
  background: transparent !important;
  border: 1px solid rgba(var(--danger-rgb), .5) !important;
  transition: color .2s, background .2s, border-color .2s;
}

.danger-btn:hover {
  color: #fff !important;
  background: var(--danger-strong) !important;
  border-color: var(--danger-strong) !important;
}

.danger-btn:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }