/* =====================================================================
   glass.css (3.0.8): one frosted-glass finish for every card and box.
   Loads last, so it unifies the look across all sections. Semi-transparent
   dark glass, a soft blur and a fine light border everywhere.
   ===================================================================== */
:root{
  --gl-bg:rgba(16,23,32,.22);
  --gl-sheen:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.0));
  --gl-line:1px solid rgba(255,255,255,.09);
  --gl-blur:blur(14px) saturate(160%) brightness(1.08);
}
.st-card,.panel,.stat,.gstage,.hero,.hm-side,.wx-panel,.pc-card,.focus-map,.week-weather,
.ach,.bk-card,.ach-card,.zen-box,.zen-stage,.hz-stage,.hz-bar,.card,.sk-kpi,.nt-card,
.pc-item,.pc-show a,.garden-panel,.today-card,.sess-toast,.gm-card,.wl-card,.welcome-card,
.wc-card,.w-features li,.wx-day,.hz-modes button,.pcm-panel,.ritual-toast,.ach-toast,
.gwrap .box,.gm-box,.todo-box,.note-box,.bg-dlg,dialog{
  background:var(--gl-sheen),var(--gl-bg)!important;
  border:var(--gl-line)!important;
  -webkit-backdrop-filter:var(--gl-blur)!important;
  backdrop-filter:var(--gl-blur)!important;
  box-shadow:0 22px 48px -28px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
/* the active tab / pill keeps its accent fill; only the glass around it is unified */
.hz-modes button[aria-pressed="true"],.zen-tabs button[aria-pressed="true"]{
  background:linear-gradient(135deg,#d6e6f2,#A0BDD2 60%,#E8C48A)!important;
}
/* ---------- Minus and plus buttons: one look, no sticky highlight ---------- */
.adjust button,#minus,#plus{
  background:transparent!important;color:var(--muted)!important;border:1.5px solid var(--track)!important;
  box-shadow:none!important;transition:border-color .2s,color .2s!important;
}
.adjust button:hover,.adjust button:focus:not(:focus-visible){
  background:transparent!important;color:var(--muted)!important;border-color:var(--track)!important;box-shadow:none!important;outline:none;
}
.adjust button:focus-visible{outline:2px solid #A0BDD2;outline-offset:2px}
.ft-step-btn,.ft-step-btn:hover,.ft-step-btn:focus{background:rgba(255,255,255,.07)!important;color:var(--text)!important;box-shadow:none!important;outline:none}
.ft-step-btn:focus-visible{outline:2px solid #A0BDD2!important;outline-offset:2px}

/* ---------- Floating sidebar: rounded, inset from the screen edge (desktop) ---------- */
@media (min-width:861px){
  .nav{
    top:14px;height:calc(100vh - 28px);width:236px;
    margin:14px 0 14px 14px;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.09)!important;
    background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,0)),rgba(14,20,28,.34)!important;
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    backdrop-filter:blur(16px) saturate(160%);
    box-shadow:0 24px 56px -28px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.05);
    overflow:hidden;
  }
  .shell{gap:0}
}

/* ---------- Sidebar: true frosted glass over the wallpaper (desktop) ---------- */
@media (min-width:861px){
  .nav{
    background:linear-gradient(170deg,rgba(255,255,255,.04),rgba(255,255,255,0)),rgba(18,22,31,.65)!important;
    -webkit-backdrop-filter:blur(16px)!important;
    backdrop-filter:blur(16px)!important;
  }
}

/* ---------- Frosted glass: every dashboard card and container (desktop) ---------- */
:root{
  --gl-bg:rgba(18,22,31,.42);
  --gl-blur:blur(16px) saturate(160%);
}
.st-card,.panel,.stat,.gstage,.hero,.hm-side,.wx-panel,.pc-card,.focus-map,.week-weather,
.ach,.bk-card,.ach-card,.zen-box,.zen-stage,.hz-stage,.hz-bar,.card,.sk-kpi,.nt-card,
.pc-item,.pc-show a,.garden-panel,.today-card,.wx-day,.gm-card,.welcome-card,.wc-card{
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01)),var(--gl-bg)!important;
  -webkit-backdrop-filter:var(--gl-blur)!important;
  backdrop-filter:var(--gl-blur)!important;
}
/* Hertz canvas panels: same frosted glass, with a lighter blur so the animation stays smooth */
.hz-stage,.hz-bar{-webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important}

/* ---------- Sidebar header: logo and title perfectly centred ---------- */
@media (min-width:861px){
  .nav > .brand{
    display:flex;flex-direction:row;align-items:center;justify-content:center;
    gap:10px;width:100%;box-sizing:border-box;margin:0;padding:4px 0;text-align:center;
  }
  .nav > .brand > span:last-child{line-height:1}
  .nav > .brand .logo{flex:none}
}
@media (min-width:861px){
  .nav > .brand{flex-wrap:wrap;row-gap:6px}
  .nav > .brand .ver{flex-basis:100%;text-align:center;margin:0;line-height:1}
}

/* =====================================================================
   Phone polish (up to 860px wide): bigger touch targets, calmer spacing,
   the timer header on one line, and softer card corners.
   ===================================================================== */
@media (max-width:860px){
  /* touch targets at least 44px tall */
  .adjust button,#minus,#plus,.chip,.fchip,.zen-tabs button,.hz-modes button,.st-btn,.gm-btn,.wx-go{
    min-height:44px;padding-top:10px;padding-bottom:10px;
  }
  .adjust button{padding-left:18px;padding-right:18px;font-size:14px}
  .ft-step-btn{width:40px;height:40px}
  /* calmer spacing and corners */
  .st-card,.panel,.card,.hero,.hm-side,.wx-panel,.stat{border-radius:22px!important}
  .st-card,.panel,.card{padding:18px!important}
  .view{padding:14px 12px 96px}
  /* timer header: keep the title on one line */
  .gwrap .gh h1,.gh h1{font-size:clamp(28px,8vw,36px)}
  .timer-head,.focus-head,#focusHead{letter-spacing:.12em;white-space:nowrap;font-size:11px}
  /* the big numbers and rings scale down a little */
  .stat .big,.stat strong,.hz-readout b{font-size:clamp(26px,8vw,34px)}
  /* glass stays readable on small screens */
  .st-card,.panel,.stat,.card,.hero{-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important}
}

/* ---------- Page scrollbar: same slim grey thumb as the sidebar ---------- */
html{scrollbar-width:thin;scrollbar-color:rgba(120,130,140,.55) transparent}

/* ---------- Sidebar header: one row, aligned left with the menu items ---------- */
@media (min-width:861px){
  .nav > .brand{
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;
    gap:4px 10px;width:100%;box-sizing:border-box;margin:0;text-align:left;
    padding:4px 12px 6px;
  }
  .nav > .brand .logo{margin:0;flex:none}
  .nav > .brand > span:not(.logo){display:block;text-align:left;line-height:1.15}
  .nav > .brand .ver{flex-basis:100%;width:100%;text-align:left;margin:0;padding-left:44px;box-sizing:border-box;line-height:1}
}

/* ---------- Sidebar header: a fine divider that matches the menu's edges ---------- */
@media (min-width:861px){
  .nav > .brand{position:relative;padding-bottom:14px;margin-bottom:6px}
  .nav > .brand::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(160,189,210,.28),transparent)}
  .nav > .brand > span:not(.logo){font-size:17px;font-weight:800;letter-spacing:.01em}
}

/* ---------- Sidebar header: the title is centred on the logo icon vertically ---------- */
@media (min-width:861px){
  .nav > .brand{align-items:center}
  .nav > .brand .logo{height:34px;width:34px}
  .nav > .brand > span:not(.logo){display:flex;align-items:center;height:34px;min-height:34px;line-height:1;padding:0}
}


/* ---------- Moon: an ambient halo that follows the illumination ---------- */
.moon-orb{position:relative;width:38px;height:38px;display:grid;place-items:center}
.moon-orb svg{position:relative;z-index:1}
.moon-halo{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;z-index:0;
  width:calc(38px + var(--lit,0) * 70px);height:calc(38px + var(--lit,0) * 70px);
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(226,236,246,calc(.05 + var(--lit,0) * .32)),rgba(160,189,210,calc(.02 + var(--lit,0) * .12)) 55%,transparent 72%);
  filter:blur(3px);animation:moonBreathe 6s ease-in-out infinite}
@keyframes moonBreathe{0%,100%{opacity:.9}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.moon-halo{animation:none}}

/* ---------- Active mix: a compact, organised container with slim sliders ---------- */
#mix{margin-top:10px;padding:10px 12px 8px;border-radius:18px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,0)),rgba(18,22,31,.42);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:6px}
#mix:has(.mixrow)::before{content:'Active mix';font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#E8C48A;margin:0 2px 2px}
#mix .note{margin:0;font-size:12px;color:var(--muted)}
#mix .mixrow{display:grid;grid-template-columns:auto 1fr 38px;align-items:center;gap:10px;margin:0;padding:2px 0;cursor:default}
#mix .mixrow>span:first-child{justify-self:start;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;
  color:#d6e6f2;background:rgba(160,189,210,.14);border:1px solid rgba(160,189,210,.22);white-space:nowrap}
#mix .mixrow input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;margin:0;border-radius:99px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,#A0BDD2 var(--p,50%),rgba(255,255,255,.12) var(--p,50%))}
#mix .mixrow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(160,189,210,.22),0 2px 6px rgba(0,0,0,.4)}
#mix .mixrow input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}
#mix .mixval{font-size:11px;font-weight:700;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
#mix .mixtotal{margin:4px 0 0;font-size:11px;color:var(--muted);text-align:right;opacity:.85}