/* ============ Shared control primitives ============ */
  .play-btn{
    width:72px;height:72px;border-radius:50%;border:none;cursor:pointer;
    background:linear-gradient(140deg,var(--accent),var(--accent2));
    box-shadow:var(--glow-accent),inset 0 1px 0 rgba(255,255,255,.25);
    display:flex;align-items:center;justify-content:center;color:#fff;
    transition:transform var(--t-snap) var(--ease),box-shadow var(--t-base) var(--ease);
  }
  .play-btn:hover{box-shadow:0 10px 28px rgba(var(--accent-rgb),.42),inset 0 1px 0 rgba(255,255,255,.25);transform:translateY(-1px);}
  .play-btn:active{transform:scale(.92);}
  .play-btn svg{width:32px;height:32px;}
  .circle-btn{
    width:50px;height:50px;border-radius:50%;cursor:pointer;
    background:var(--card);border:1px solid var(--line);color:var(--muted);
    display:flex;align-items:center;justify-content:center;
    transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),background var(--t-base) var(--ease),transform var(--t-snap) var(--ease);
  }
  .circle-btn:hover{color:var(--text);border-color:var(--line-bright);background:var(--card-hover);}
  .circle-btn:active{transform:scale(.92);}
  .circle-btn svg{width:21px;height:21px;}
  .circle-btn.active{color:var(--accent2);border-color:var(--accent2);background:rgba(var(--accent2-rgb),.1);}

  input[type=range]{
    -webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:var(--r-sm);
    background:var(--line);outline:none;cursor:pointer;transition:background var(--t-base) var(--ease);
  }
  input[type=range]:hover{background:var(--line-bright);}
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:17px;height:17px;border-radius:50%;
    background:#fff;cursor:pointer;border:1px solid rgba(0,0,0,.25);
    box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform var(--t-snap) var(--ease),box-shadow var(--t-base) var(--ease);
  }
  input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18);}
  input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(var(--accent-rgb),.3);}
  /* Unified soft focus ring on text inputs / selects across the whole app */
  textarea:focus,input[type=text]:focus,input[type=number]:focus,input[type=date]:focus,input[type=search]:focus,select:focus{
    box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16);
  }
  .vol-val{width:38px;text-align:right;font-size:var(--fs-small);color:var(--muted);font-variant-numeric:tabular-nums;}

  .chip{
    background:var(--card);border:1px solid var(--line);color:var(--muted);
    padding:6px 12px;border-radius:var(--r-sm);font-size:12px;cursor:pointer;font-weight:var(--fw-sb);
    transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),color var(--t-base) var(--ease),transform var(--t-snap) var(--ease);
  }
  .chip:hover{color:var(--text);border-color:var(--line-bright);}
  .chip.active{background:rgba(var(--accent-rgb),.18);border-color:var(--accent);color:var(--accent-soft);}
  .chip:active{transform:scale(.95);}

  /* Orb (binaural art) */
  .orb{
    width:188px;height:188px;border-radius:50%;position:relative;
    display:flex;align-items:center;justify-content:center;
  }
  .orb .ring{
    position:absolute;inset:0;border-radius:50%;
    background:radial-gradient(circle at 50% 45%, var(--p-color,var(--accent)) 0%, rgba(var(--accent-rgb),.25) 45%, rgba(var(--accent-rgb),0) 70%);
    opacity:0;transition:opacity .4s;
  }
  .orb.live .ring{opacity:.85;animation:breathe var(--pulse,4s) ease-in-out infinite;}
  .orb .core{
    width:112px;height:112px;border-radius:50%;
    background:radial-gradient(circle at 50% 40%, #fff 0%, var(--p-color,var(--accent)) 55%, var(--p-color2,var(--accent2)) 100%);
    box-shadow:0 0 60px var(--p-color,var(--accent));
    display:flex;align-items:center;justify-content:center;flex-direction:column;
  }
  .orb.live .core{animation:breathe var(--pulse,4s) ease-in-out infinite;}
  @keyframes breathe{0%,100%{transform:scale(.86);}50%{transform:scale(1.06);}}
  .orb .core .bh{font-size:29px;font-weight:700;color:#0a0a12;font-variant-numeric:tabular-nums;line-height:1;}
  .orb .core .bl{font-size:9.5px;color:rgba(10,10,18,.65);font-weight:700;letter-spacing:1px;margin-top:3px;}

  /* Disc (audio art) */
  .disc{
    width:200px;height:200px;border-radius:50%;position:relative;
    background:radial-gradient(circle at 50% 50%, #2a2a2e 0%, #16161a 60%, #0c0c0e 100%);
    border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
    box-shadow:0 18px 50px rgba(0,0,0,.25);
  }
  .disc::before{
    content:"";position:absolute;inset:18px;border-radius:50%;
    border:2px solid rgba(var(--text-rgb),.06);
    background:repeating-radial-gradient(circle at 50% 50%, rgba(var(--text-rgb),.03) 0 2px, rgba(0,0,0,0) 2px 6px);
  }
  .disc.spin{animation:spin 8s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .disc .label{
    width:90px;height:90px;border-radius:50%;
    background:linear-gradient(140deg,var(--a-color,var(--accent2)),var(--a-color2,var(--accent2-soft)));
    display:flex;align-items:center;justify-content:center;color:#fff;z-index:1;
    box-shadow:0 0 40px var(--a-color,var(--accent2));
  }
  .disc .label svg{width:32px;height:32px;}
  .disc .hole{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--bg);z-index:2;border:1px solid var(--line);}

  /* ============ Bottom player bar ============ */
  .playerbar{
    grid-column:1;grid-row:5;
    position:relative;border-top:1px solid var(--line);
    background:
      radial-gradient(640px 180px at 50% 150%, var(--p-glow,#141416) 0%, rgba(0,0,0,0) 70%),
      linear-gradient(180deg,var(--panel-2),var(--panel));
    display:flex;flex-direction:column;align-items:stretch;min-height:90px;
    box-shadow:0 -4px 20px rgba(0,0,0,.15);
  }
  .pb{display:flex;align-items:center;gap:16px;width:100%;padding:12px 22px;}
  .pb[hidden]{display:none;}
  .pb.stacked{border-top:1px solid var(--line-soft);}

  .pb-empty{justify-content:center;color:var(--faint);font-size:13px;gap:11px;text-align:center;}
  .pb-empty svg{width:18px;height:18px;color:var(--accent2);flex:0 0 auto;}
  .pb-empty b{color:var(--muted);font-weight:600;}

  /* ---- HUD equalizer placeholder (Phase 2) ----
     Decorative cyan bars shown only in the idle/empty dock state (see the
     aria-hidden .pb-eq node inside #npEmpty). It is a placeholder — NOT wired
     to the audio engine's AnalyserNode — that stands in when no signal is
     available. purpose: focus/music ambience (MOTION_SYSTEM §6); transform
     (scaleY) only; flattens to static bars under reduced-motion / static. */
  .pb-eq{display:inline-flex;align-items:flex-end;gap:3px;height:14px;flex:0 0 auto;pointer-events:none;}
  .pb-eq i{
    width:3px;height:100%;flex:0 0 auto;border-radius:1px;
    background:linear-gradient(180deg,var(--accent),rgba(var(--accent-rgb),.35));
    transform-origin:bottom;transform:scaleY(.3);opacity:.7;
    animation:pbEq 1.1s ease-in-out infinite;
  }
  .pb-eq i:nth-child(2){animation-duration:.9s;animation-delay:.15s;}
  .pb-eq i:nth-child(3){animation-duration:1.3s;animation-delay:.3s;}
  .pb-eq i:nth-child(4){animation-duration:1s;animation-delay:.05s;}
  .pb-eq i:nth-child(5){animation-duration:1.15s;animation-delay:.22s;}
  @keyframes pbEq{0%,100%{transform:scaleY(.25);}50%{transform:scaleY(1);}}
  @media (prefers-reduced-motion:reduce){
    .pb-eq i{animation:none;transform:scaleY(.5);}
  }
  html[data-motion="static"] .pb-eq i{animation:none;transform:scaleY(.5);}

  .pb-art{flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
  .pb-art .orb{width:56px;height:56px;}
  .pb-art .orb .core{width:38px;height:38px;box-shadow:0 0 22px var(--p-color,var(--accent));}
  .pb-art .orb .core .bh{font-size:13px;}
  .pb-art .orb .core .bl{font-size:6px;letter-spacing:.4px;margin-top:1px;}
  .pb-art .disc{width:56px;height:56px;box-shadow:0 6px 18px rgba(0,0,0,.25);}
  .pb-art .disc::before{inset:7px;}
  .pb-art .disc .label{width:27px;height:27px;box-shadow:0 0 16px var(--a-color,var(--accent2));}
  .pb-art .disc .label svg{width:13px;height:13px;}
  .pb-art .disc .hole{width:6px;height:6px;}

  .pb-info{display:flex;flex-direction:column;gap:5px;min-width:0;}
  .pb-binaural .pb-info{flex:1;}
  .pb-audio .pb-info{flex:0 0 auto;max-width:230px;}
  .pb-title{font-size:15px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pb-sub{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--muted);
    font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pb-sub .ev{position:static;}
  .pb-sub small{color:var(--faint);font-size:10px;}

  .pb-controls{display:flex;align-items:center;gap:14px;flex:0 0 auto;}
  .playerbar .play-btn{width:54px;height:54px;box-shadow:0 8px 20px rgba(var(--accent-rgb),.4);}
  .playerbar .play-btn svg{width:25px;height:25px;}
  .playerbar .circle-btn{width:42px;height:42px;}
  .playerbar .circle-btn svg{width:19px;height:19px;}

  .pb-seek{display:flex;align-items:center;gap:11px;flex:1;min-width:120px;font-variant-numeric:tabular-nums;}
  .pb-seek .tm{font-size:11.5px;color:var(--muted);width:42px;flex:0 0 auto;}
  .pb-seek .tm.right{text-align:right;}

  .pb-vol{display:flex;align-items:center;gap:9px;flex:0 0 auto;width:158px;}
  .pb-vol .ico{color:var(--faint);display:flex;flex:0 0 auto;}
  .pb-vol .ico svg{width:18px;height:18px;}

  .pb-extra{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
  .pop-anchor{position:relative;display:flex;}

  .pb-timerbtn{
    display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);
    color:var(--text);border-radius:11px;padding:9px 13px;font-size:13px;font-weight:600;
    font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .2s;
  }
  .pb-timerbtn:hover{border-color:var(--line-bright);}
  .pb-timerbtn svg{width:15px;height:15px;color:var(--muted);}

  /* Popovers (timer & advanced) — rise above the bar */
  .popover{
    position:absolute;bottom:calc(100% + 14px);right:0;
    background:rgba(20,20,22,.96);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;
    backdrop-filter:blur(12px);
    box-shadow:var(--sh-2);opacity:0;pointer-events:none;transform:translateY(8px) scale(.97);transform-origin:bottom right;
    transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease);z-index:55;min-width:240px;
  }
  .popover.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
  .pop-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--faint);font-weight:700;margin-bottom:11px;}
  .timer-chips{display:flex;gap:7px;flex-wrap:wrap;max-width:230px;}
  .adv-pop{min-width:290px;}
  .adv-inner{display:flex;flex-direction:column;gap:14px;}
  .adv-field{display:flex;flex-direction:column;gap:7px;}
  .adv-field label{font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between;}
  .adv-field label b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600;}
  .adv-note{font-size:10.5px;color:var(--faint);line-height:1.45;}

  /* ============ Collapsible music section ============ */
  /* Down-triangle toggle, sits at the far left of the category tab strip */
  .music-collapse-btn{
    flex:0 0 auto;background:var(--card);border:1px solid var(--line);color:var(--muted);
    width:30px;height:30px;border-radius:9px;cursor:pointer;margin-right:12px;
    display:flex;align-items:center;justify-content:center;
    transition:color .2s,border-color .2s,transform .1s;
  }
  .music-collapse-btn:hover{color:var(--text);border-color:var(--accent2);}
  .music-collapse-btn:active{transform:scale(.92);}
  .music-collapse-btn svg{width:16px;height:16px;}

  /* The tabs + tiles fold away smoothly (max-height driven in JS) */
  .content-zone{overflow:hidden;transition:max-height .4s ease,opacity .35s ease;}
  .shell.music-collapsed .content-zone{opacity:0;border-top-color:transparent;}

  /* Collapsed mini bar (lives inside the player footer) — a single short bar.
     Its height tracks the icon (40px) plus a little padding, nothing more. */
  .shell.music-collapsed .playerbar{min-height:0;}
  .pb-collapsed{align-items:center;gap:14px;padding:8px 16px;}
  .cb-group{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0;}
  .cb-ic{
    width:40px;height:40px;border-radius:10px;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
  }
  .cb-ic svg{width:22px;height:22px;}
  .cb-name{
    font-size:14px;font-weight:600;color:var(--text);max-width:220px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .cb-play{
    width:40px;height:40px;border-radius:50%;flex:0 0 auto;cursor:pointer;
    background:linear-gradient(140deg,var(--accent),var(--accent2));border:none;color:#fff;
    display:flex;align-items:center;justify-content:center;transition:transform .12s;
  }
  .cb-play:active{transform:scale(.9);}
  .cb-play svg{width:19px;height:19px;}
  .cb-vol{display:flex;align-items:center;gap:9px;flex:0 0 auto;width:130px;}
  .cb-vol > svg{width:18px;height:18px;color:var(--faint);flex:0 0 auto;}
  .cb-divider{width:1px;align-self:stretch;background:var(--line-soft);margin:4px 0;flex:0 0 auto;}
  /* Expand toggle — same size & horizontal spot as the collapse toggle */
  .cb-expand{
    width:30px;height:30px;border-radius:9px;flex:0 0 auto;cursor:pointer;
    background:var(--card);border:1px solid var(--line);color:var(--muted);
    display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s,transform .1s;
  }
  .cb-expand:hover{color:var(--text);border-color:var(--accent2);}
  .cb-expand:active{transform:scale(.92);}
  .cb-expand svg{width:16px;height:16px;}

  /* ============ Collapsible to-do / productivity panel ============ */
  /* Down-chevron toggle in the To-Do header — folds the whole right column
     down into a single short bar, mirroring the music collapse. */
  .sidepanel-collapse-btn{
    flex:0 0 auto;background:var(--card);border:1px solid var(--line);color:var(--muted);
    width:26px;height:26px;border-radius:8px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:color .2s,border-color .2s,transform .1s;
  }
  .sidepanel-collapse-btn:hover{color:var(--text);border-color:var(--accent2);}
  .sidepanel-collapse-btn:active{transform:scale(.92);}
  .sidepanel-collapse-btn svg{width:15px;height:15px;}
  .todo-sidebar-headleft{display:flex;align-items:center;gap:9px;min-width:0;}

  /* Collapsed bar: a single short bar pinned to the bottom of the right column.
     Same height as the collapsed music bar and the panel's current width, so the
     two bottom bars together span the full window. Shows only the timer. */
  /* Pinned to the bottom of the right column and cross-faded in/out so the
     panel folds smoothly rather than snapping between states. */
  .rc-collapsed{
    display:flex;align-items:center;gap:12px;
    position:absolute;left:0;right:0;bottom:0;
    min-height:57px;padding:8px 16px;
    border-left:1px solid var(--line);border-top:1px solid var(--line-soft);
    background:linear-gradient(180deg,var(--panel-2),var(--panel));
    opacity:0;pointer-events:none;transform:translateY(10px);
    transition:opacity .3s ease,transform .3s ease;
  }
  .rc-timer{
    font-size:22px;font-weight:300;letter-spacing:1.5px;
    font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap;line-height:1;
  }
  /* ---- Collapse: the right column slides off the RIGHT edge — a mirror of the
     left nav, in the opposite direction. The grid's right track animates to 0,
     so the main content widens to fill the freed space; the panel keeps its
     full width (see .rightcol) and is carried off-screen as its track collapses,
     clipped by the body's overflow:hidden. The old fold-down timer bar retires. */
  .shell.sidepanel-collapsed{grid-template-columns:1fr 0;}
  .shell.sidepanel-collapsed .col-resizer{display:none;}
  .shell.sidepanel-collapsed .rightcol{pointer-events:none;}
  .rc-collapsed{display:none;}

  /* ============ Modal ============ */
  .modal-bg{
    position:fixed;inset:0;z-index:60;background:rgba(3,3,4,.7);backdrop-filter:blur(12px);
    display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--t-base) var(--ease);padding:20px;
  }
  .modal-bg.open{opacity:1;pointer-events:auto;}
  .modal{
    background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);
    border-radius:var(--r-xl);max-width:540px;width:100%;padding:26px 24px;
    transform:translateY(14px) scale(.98);transition:transform var(--t-base) var(--ease);max-height:86vh;overflow-y:auto;box-shadow:var(--sh-3);
  }
  .modal-bg.open .modal{transform:translateY(0) scale(1);}
  .modal h2{margin:0 0 4px;font-size:19px;}
  .modal .sub{color:var(--muted);font-size:13px;margin:0 0 18px;}
  .modal h4{margin:18px 0 7px;font-size:13px;color:var(--accent2);text-transform:uppercase;letter-spacing:.6px;}
  .modal p, .modal li{font-size:13px;color:var(--muted);line-height:1.55;}
  .modal ul{padding-left:18px;margin:6px 0;}
  .modal .pill{
    display:inline-block;font-size:11px;background:var(--card);border:1px solid var(--line);
    border-radius:8px;padding:4px 9px;margin:3px 4px 3px 0;color:var(--text);font-variant-numeric:tabular-nums;
  }
  .modal .danger-box{
    background:rgba(var(--danger-rgb),.1);border:1px solid rgba(var(--danger-rgb),.3);border-radius:12px;padding:12px 14px;margin-top:12px;
  }
  .modal .danger-box p{color:var(--danger-soft);margin:0;font-size:12px;}
  .btn-primary{
    width:100%;margin-top:20px;padding:15px;border-radius:var(--r-md);border:none;cursor:pointer;
    background:linear-gradient(140deg,var(--accent),var(--accent2));color:#fff;font-size:15px;font-weight:var(--fw-b);
    box-shadow:var(--glow-accent);transition:transform var(--t-snap) var(--ease),box-shadow var(--t-base) var(--ease);
  }
  .btn-primary:hover{box-shadow:0 10px 26px rgba(var(--accent-rgb),.42);transform:translateY(-1px);}
  .btn-primary:active{transform:scale(.98);}
  .evidence-row{display:flex;align-items:center;gap:8px;margin:10px 0;font-size:12.5px;color:var(--muted);}
  .evidence-row .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}