/* Care, part B scenes (js/scenes/care-b.js). Every class starts with cb-. */
.cb-col { display: flex; flex-direction: column; gap: 10px; }
.cb-hd { gap: 8px; height: 20px; flex: none; }
.cb-hd .ic { font-size: 16px; color: var(--notch-text-2); }
.cb-hd .cb-r { margin-left: auto; }
.cb-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cb-tx small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-go { align-self: flex-start; flex: none; }
.nb:disabled { opacity: .55; pointer-events: none; }
.cb-res { min-height: 16px; opacity: 0; translate: 0 4px; color: var(--notch-green); font-weight: 600; transition: opacity 300ms var(--ease-out), translate 300ms var(--ease-out); }
.cb-res.show { opacity: 1; translate: none; }
.cb-stat { color: var(--notch-text-2); font-weight: 400; }
.cb-slash { stroke: var(--notch-red); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* Keep awake */
.cb-ka { gap: 14px; margin-top: 6px; }
.cb-orb { position: relative; display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.08); transition: background var(--m-base); }
.cb-orb > .ic { position: absolute; font-size: 34px; transition: opacity 300ms, scale 500ms var(--sp-reward); }
.cb-cup { position: absolute; width: 46px; height: 46px; fill: none; stroke: #000; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; scale: .6; transition: opacity 300ms, scale 500ms var(--sp-reward); }
.cb-steam { opacity: 0; }
.cb-orb.on { background: var(--notch-amber); }
.cb-orb.on > .ic { opacity: 0; scale: .5; }
.cb-orb.on .cb-cup { opacity: 1; scale: 1; }
.cb-orb.on .cb-steam { animation: cb-steam 1.8s var(--ease-inout) infinite; }
@keyframes cb-steam { 0% { opacity: 0; translate: 0 3px; } 50% { opacity: 1; } 100% { opacity: 0; translate: 0 -4px; } }
.cb-chips { gap: 6px; opacity: 0; translate: 0 6px; pointer-events: none; transition: opacity 300ms, translate 300ms var(--ease-out); }
.cb-chips.show { opacity: 1; translate: none; pointer-events: auto; }

/* Kill Process */
.cb-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; font-size: 13px; flex: none; }
.cb-search .ic { font-size: 15px; color: var(--notch-text-2); }
.cb-q:not(:empty) + .cb-ph { display: none; }
.cb-search .caret { height: 15px; }
.cb-list { display: grid; gap: 3px; opacity: 0; pointer-events: none; transition: opacity 200ms; flex: none; }
.cb-list.show { opacity: 1; pointer-events: auto; }
.cb-p { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; border-radius: 10px; text-align: left; color: var(--notch-text); background: rgba(255,255,255,.05);
  transition: background var(--m-base), opacity 320ms var(--ease-out), translate 320ms var(--ease-out); }
.cb-p .ic { font-size: 14px; color: var(--notch-text-2); }
.cb-p .t2 { margin-left: auto; }
.cb-p.kid { margin-left: 24px; }
.cb-p:hover { background: rgba(255,255,255,.1); }
.cb-p.sel { background: rgba(10,132,255,.3); }
.cb-list.show .cb-p { animation: cb-in 360ms var(--ease-out) both; }
.cb-list .cb-p:nth-child(2) { animation-delay: 70ms; transition-delay: 70ms; } .cb-list .cb-p:nth-child(3) { animation-delay: 140ms; transition-delay: 140ms; }
.cb-p.gone { opacity: 0; translate: 40px 0; pointer-events: none; }
.cb-p.re { animation: cb-re 700ms var(--ease-inout) 2; }
@keyframes cb-in { from { opacity: 0; translate: 0 6px; } }
@keyframes cb-re { 50% { opacity: .3; } }
.cb-acts { gap: 8px; flex: none; opacity: 0; translate: 0 6px; pointer-events: none; transition: opacity 300ms, translate 300ms var(--ease-out); }
.cb-acts.show { opacity: 1; translate: none; pointer-events: auto; }

/* Memory */
.cb-meter { height: 10px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; flex: none; }
.cb-meter i { display: block; height: 100%; border-radius: 5px; background: var(--notch-green); transition: width 900ms var(--ease-inout), background 400ms; }
.cb-meter.w i { background: var(--notch-amber); }
.cb-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; flex: none; }
.cb-stats span, .cb-ps span { display: flex; flex-direction: column; gap: 2px; }
.cb-stats b { font-size: 15px; }
.cb-pill { color: var(--notch-green); transition: color 400ms; } .cb-pill.w { color: var(--notch-amber); }
.cb-note { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; font-weight: 600; opacity: 0; translate: 0 6px; flex: none; transition: opacity 300ms, translate 300ms var(--ease-out); }
.cb-note.show { opacity: 1; translate: none; }
.cb-note .ic { font-size: 16px; color: var(--notch-amber); }

/* Music app blocker */
.cb-bk { gap: 0; justify-content: space-between; padding: 0 10px; height: 64px; flex: none; }
.cb-key { display: grid; place-items: center; width: 64px; height: 56px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 -3px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14);
  color: var(--notch-text); position: relative; transition: transform var(--m-fast) var(--ease-quint); }
.cb-key::after { content: ""; position: absolute; inset: -8px; }
.cb-key .ic { font-size: 24px; fill: currentColor; }
.cb-key:active, .cb-key.press { transform: translateY(2px); }
.cb-key:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; }
.cb-wire { position: relative; flex: 1; height: 2px; margin: 0 14px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 4px, transparent 4px 10px); }
.cb-wire i { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--notch-teal); opacity: 0; }
.cb-wire.go i { animation: cb-pulse 560ms var(--ease-inout) both; }
@keyframes cb-pulse { 0% { opacity: 1; left: 0; } 100% { opacity: 1; left: calc(100% - 10px); } }
.cb-app { position: relative; display: grid; place-items: center; width: 56px; height: 56px; transition: opacity 300ms, scale 400ms var(--sp-reward); }
.cb-app .art { position: absolute; inset: 0; width: auto; height: auto; border-radius: 14px; }
.cb-app > .ic { position: relative; font-size: 24px; color: #fff; }
.cb-no { position: absolute; inset: -6px; width: 68px; height: 68px; fill: none; stroke: var(--notch-red); stroke-width: 2; stroke-linecap: round; opacity: 0; scale: 1.3; transition: opacity 250ms, scale 450ms var(--sp-reward); }
.cb-app.blocked { opacity: .5; } .cb-app.blocked .cb-no { opacity: 1; scale: 1; }
.cb-app.opens { scale: 1.18; }
.cb-bt { gap: 12px; flex: none; }

/* Mute microphone */
.cb-mic { gap: 16px; margin-top: 8px; }
.cb-mb { position: relative; display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--notch-text);
  transition: background 300ms, transform var(--m-fast) var(--ease-quint); }
.cb-mb::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.cb-mb .ic { font-size: 32px; overflow: visible; }
.cb-mb.press { transform: scale(.94); }
.cb-mb:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; }
.cb-mb.muted { background: var(--notch-red); }
.cb-mb.muted .cb-slash { animation: cb-draw 380ms var(--ease-out) forwards; }
.cb-red .cb-slash { stroke-dashoffset: 0; stroke: currentColor; }
@keyframes cb-draw { to { stroke-dashoffset: 0; } }
.cb-mb.muted .cb-slash { stroke: #fff; }
.cb-red { color: var(--notch-red); display: inline-flex; align-items: center; }
.cb-wi { font-size: 16px; }
.cb-lv { display: flex; align-items: center; gap: 3px; height: 28px; margin-top: 4px; }
.cb-lv b { width: 3px; height: var(--h); border-radius: 2px; background: var(--notch-teal); animation: cb-lv 640ms var(--ease-inout) var(--d) infinite alternate; transition: scale 300ms; }
.cb-lv.off b { animation: none; scale: 1 .14; opacity: .4; }
@keyframes cb-lv { from { scale: 1 .25; } to { scale: 1 1; } }

/* Network */
.cb-rates { display: flex; gap: 30px; flex: none; }
.cb-rates span { display: flex; flex-direction: column; gap: 2px; }
.cb-rates b { font-size: 16px; min-width: 92px; }
.cb-dn b { color: var(--notch-teal); } .cb-up b { color: var(--notch-blue); }
.cb-g { width: 100%; height: 66px; flex: none; border-radius: 10px; background: rgba(255,255,255,.04); }
.cb-g path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cb-gd { stroke: var(--notch-teal); } .cb-gu { stroke: var(--notch-blue); }

/* Output switcher */
.cb-outs { display: grid; gap: 4px; flex: none; }
.cb-o { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,.04); color: var(--notch-text-2); transition: background 250ms, color 250ms; }
.cb-o .ic { font-size: 16px; }
.cb-o .bars { margin-left: auto; }
.cb-o.on { background: rgba(10,132,255,.26); color: var(--notch-text); }

/* Port Manager */
.cb-ports { display: grid; gap: 4px; flex: none; }
.cb-pt { display: grid; grid-template-columns: 64px 1fr 78px 108px; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; border-radius: 10px; background: rgba(255,255,255,.05);
  transition: opacity 360ms var(--ease-out), translate 360ms var(--ease-out); }
.cb-pt .nb { height: 26px; padding: 0 10px; border-radius: 13px; }
.cb-pt.gone { opacity: 0; translate: 40px 0; pointer-events: none; }

/* Power */
.cb-pw { gap: 20px; height: 80px; flex: none; }
.cb-bat { position: relative; flex: none; width: 150px; height: 72px; padding: 4px; border: 3px solid rgba(255,255,255,.5); border-radius: 16px; }
.cb-bat::after { content: ""; position: absolute; right: -10px; top: 22px; width: 6px; height: 20px; border-radius: 0 3px 3px 0; background: rgba(255,255,255,.5); }
.cb-bat i { display: block; height: 100%; border-radius: 10px; transition: width 1.4s var(--ease-inout), background 500ms; }
.cb-bat i.lo { background: var(--notch-amber); } .cb-bat i.ok { background: var(--notch-green); }
.cb-bolt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; color: #000; opacity: 0; scale: .5; transition: opacity 300ms, scale 500ms var(--sp-reward); }
.cb-bolt.on { opacity: 1; scale: 1; }
.cb-ps { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.cb-ps b { font-size: 14px; }

/* Quick toggles */
.cb-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: none; }
.cb-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; height: 100px; padding: 0 16px; border-radius: 16px; color: var(--notch-text); text-align: left;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); transition: background var(--m-base), transform var(--m-fast) var(--ease-quint); }
.cb-tile .ic { font-size: 24px; margin-bottom: 4px; }
.cb-tile:hover { background: rgba(255,255,255,.11); }
.cb-tile.press, .cb-tile:active { transform: scale(.96); }
.cb-tile.on { background: rgba(10,132,255,.78); border-color: rgba(255,255,255,.2); }
.cb-tile.on .t2 { color: rgba(255,255,255,.85); }
.cb-tile:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; }
.cb-cap { text-align: center; }
.cb-dim { position: absolute; left: 0; right: 0; top: 32px; bottom: 0; background: rgba(6,8,18,.62); opacity: 0; pointer-events: none; transition: opacity 700ms var(--ease-inout); }
.cb-dim.on { opacity: 1; }

/* Uninstaller */
.cb-ua { gap: 12px; height: 52px; flex: none; }
.cb-aic { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #7c5cff, #0a84ff); color: #fff; font-size: 24px;
  transition: translate 650ms var(--ease-inout), scale 650ms var(--ease-inout), opacity 300ms 450ms; }
.cb-aic.gone { translate: 340px 0; scale: .3; opacity: 0; }
.cb-tr { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); font-size: 20px; color: var(--notch-text-2); transition: background 300ms, color 300ms; }
.cb-tr.on { background: var(--notch-green); color: #000; animation: cb-hop 520ms var(--sp-reward); }
@keyframes cb-hop { 30% { scale: 1.18; } }
.cb-lf { gap: 6px; flex: none; }
.cb-l { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 14px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.07); color: var(--notch-text-2); transition: background 300ms, color 300ms; }
.cb-l .ic { font-size: 12px; opacity: 0; scale: .4; transition: opacity 250ms, scale 400ms var(--sp-reward); }
.cb-l.done { background: rgba(48,209,88,.2); color: var(--notch-text); } .cb-l.done .ic { opacity: 1; scale: 1; color: var(--notch-green); }

/* Volume mixer */
.cb-mx { position: relative; height: 138px; flex: none; }
.cb-mr { position: absolute; left: 0; right: 0; top: 0; height: 42px; display: grid; grid-template-columns: 22px 64px 1fr 40px 28px; align-items: center; gap: 10px; padding: 0 6px 0 12px; border-radius: 12px; background: rgba(255,255,255,.05);
  transition: translate 520ms var(--sp-expand); }
.cb-mr .art.b { background: linear-gradient(135deg, #0a84ff, #64d2ff); } .cb-mr .art.c { background: linear-gradient(135deg, #30d158, #0e7490); }
.cb-mr .t2 { text-align: right; }
.cb-sl { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); cursor: pointer; }
.cb-sl::before { content: ""; position: absolute; inset: -12px 0; }
.cb-sl i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--notch-text); transition: width 420ms var(--ease-out); }
.cb-pin { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--notch-text-2); transition: background var(--m-base), color var(--m-base); }
.cb-pin::after { content: ""; position: absolute; inset: -6px; }
.cb-pin .ic { font-size: 14px; }
.cb-pin:hover { background: rgba(255,255,255,.1); }
.cb-pin.on { background: var(--notch-blue); color: #fff; }
.cb-pin:focus-visible { outline: 2px solid var(--notch-blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cb-orb, .cb-orb > .ic, .cb-cup, .cb-chips, .cb-p, .cb-acts, .cb-meter i, .cb-note, .cb-res, .cb-app, .cb-no, .cb-mb, .cb-lv b, .cb-o, .cb-pt, .cb-bat i, .cb-bolt, .cb-tile, .cb-dim,
  .cb-aic, .cb-tr, .cb-l, .cb-l .ic, .cb-mr, .cb-sl i, .cb-list { transition: none; }
  .cb-orb.on .cb-steam, .cb-list.show .cb-p, .cb-p.re, .cb-wire.go i, .cb-mb.muted .cb-slash, .cb-lv b, .cb-tr.on { animation: none; }
  .cb-mb.muted .cb-slash { stroke-dashoffset: 0; }
  .cb-wire.go i { opacity: 1; left: calc(100% - 10px); }
}