/* MAX — voice AI assistant
   Living, breathing status orb + voice UI. Colours are driven by the mode class
   on #orb, which sets --c (an "r,g,b" triplet) used everywhere below. */

:root {
  /* v6.62 — global ACCENT colour. Every frame/border/glow/menu/settings accent is rgba(var(--acc),…);
     --acc2/--acc3 are the light tints (text/headings). The Theme picker rewrites these three so ONE
     choice recolours the entire app. Default = the original cyan. */
  --acc: 34,211,238;
  --acc2: 159,241,255;
  --acc3: 159,208,255;
  --bg:   #05070e;
  --ink:  #e7ecf6;
  --muted:#8a93a8;
  --line: rgba(140,160,200,.16);
  --card: rgba(18,26,44,.72);
}
* { box-sizing: border-box; }
/* v4.97 — HOUSE RULE: never show a scrollbar anywhere. Content still scrolls with the wheel/
   trackpad/touch — we just hide the bar. Applies to every scroll area, current and future. */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* access PIN gate */
.pin-gate { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1000px 700px at 50% -5%, rgba(40,90,200,.22), transparent 60%), #05070e; }
.pin-gate[hidden] { display: none !important; }   /* honour hidden — display:flex above would otherwise keep it visible forever */
.pin-box { text-align: center; padding: 30px 26px; max-width: 340px; width: 88%; }
.pin-orb { width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(120,150,255,.35), rgba(60,90,200,.12));
  border: 1px solid rgba(140,160,220,.35); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 40px rgba(70,110,240,.35); animation: pinBreath 3.4s ease-in-out infinite; }
@keyframes pinBreath { 0%,100% { transform: scale(1); box-shadow: 0 0 34px rgba(70,110,240,.3); } 50% { transform: scale(1.05); box-shadow: 0 0 52px rgba(70,110,240,.5); } }
.pin-lock { font-size: 40px; }
.pin-title { margin: 0; font-size: 30px; letter-spacing: 3px; color: var(--ink); }
.pin-sub { color: var(--muted); margin: 6px 0 20px; font-size: 14px; }
.pin-ver { margin: 22px 0 0; font-size: 12px; letter-spacing: 1px; color: rgba(140,160,210,.5); }
#pinForm { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pin-mask { -webkit-text-security: disc; text-security: disc; }
#pinInput { width: 220px; text-align: center; letter-spacing: 12px; font-size: 26px; padding: 12px 10px;
  background: rgba(10,16,30,.8); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; }
#pinInput:focus { outline: none; border-color: rgba(120,150,255,.6); box-shadow: 0 0 16px rgba(70,110,240,.3); }
.pin-dots { display: flex; gap: 10px; }
.pin-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(140,160,210,.25); transition: background .15s, transform .15s; }
.pin-dots i.on { background: #7c9bff; transform: scale(1.15); }
.pin-gate .btn.activate { padding: 12px 34px; }
.pin-err { color: #ff6b6b; min-height: 20px; margin: 14px 0 0; font-size: 14px; }
.pin-box.shake { animation: pinShake .4s; }
@keyframes pinShake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-9px); } 40%,80% { transform: translateX(9px); } }

/* v6.35 — sign-in gate (users) */
#loginForm, #npForm, #loginCont { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#loginForm[hidden], #npForm[hidden], #loginCont[hidden] { display: none !important; }
.login-in { width: 250px; font-size: 16px; padding: 12px 14px; text-align: center;
  background: rgba(10,16,30,.8); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; }
.login-in:focus { outline: none; border-color: rgba(120,150,255,.6); box-shadow: 0 0 16px rgba(70,110,240,.3); }
.login-cont-btn { min-width: 250px; }
.login-switch { font-size: 13px; opacity: .8; }
.login-np-note { color: var(--muted); margin: 0 0 4px; font-size: 13px; max-width: 260px; }

/* v6.35 — Settings → 👥 Users (admin) */
.usr-box { display: flex; flex-direction: column; gap: 12px; }
.usr-row { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: rgba(10,18,34,.55);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.usr-main { flex: 1 1 260px; min-width: 0; }
.usr-role { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: 8px;
  background: rgba(148,163,184,.18); color: #cbd5e1; margin-left: 8px; }
.usr-role.adm { background: rgba(var(--acc),.16); color: rgb(var(--acc2)); }
.usr-meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; overflow-wrap: anywhere; }
.usr-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.usr-panel { flex-basis: 100%; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; }
.usr-panel[hidden] { display: none !important; }
.usr-in { width: min(320px, 100%); font-size: 14px; padding: 8px 12px; background: rgba(10,16,30,.8);
  color: var(--ink); border: 1px solid var(--line); border-radius: 10px; }
.usr-msg { color: var(--muted); font-size: 13px; margin-left: 8px; }
.usr-all { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13.5px; }
.usr-wsearch { display: block; width: 100%; max-width: 320px; box-sizing: border-box; margin: 0 0 10px; font: inherit; font-size: 13px; padding: 8px 11px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.32); color: var(--ink); }
.usr-wsearch:focus { outline: none; border-color: rgba(var(--acc),.6); }
.usr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 12px; transition: opacity .15s; }
.usr-w { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usr-actions { margin-top: 10px; }
/* v6.42 — while MAX announces new programming, the versions widget is clamped readable + centred */
.res-card.wdg-announce { width: min(560px, 92vw) !important; height: min(620px, 78vh) !important; }
/* v6.46 — media-guard badge: the "little box" showing the mic is guarded/muted while media plays */
#mediaGuardBadge { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 86px); left: 50%; transform: translateX(-50%);
  z-index: 205; padding: 8px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
  background: rgba(8,14,28,.94); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45);
  box-shadow: 0 6px 24px rgba(0,0,0,.5), 0 0 14px rgba(var(--acc),.18); pointer-events: none; white-space: nowrap; max-width: 94vw; overflow: hidden; text-overflow: ellipsis; }
body.max-phone #mediaGuardBadge { top: calc(env(safe-area-inset-top, 0px) + 130px); font-size: 12px; }
/* v6.39 — ✎ edit-user rows */
.usr-edrow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--ink); font-size: 13.5px; }
.usr-edrow > span { flex: 0 0 90px; color: var(--muted); }
.usr-edrow .usr-in { flex: 1 1 auto; }

/* home devices — down BOTH sides of the screen, grouped by location, centre stays clear */
.home-sides { position: fixed; inset: 0; z-index: 65; pointer-events: none; }
.home-sides[hidden] { display: none !important; }   /* honour hidden — no display:flex trap here */
.home-col { position: fixed; top: 92px; bottom: 20px; width: min(30vw, 420px); overflow-y: auto;
  pointer-events: auto; padding: 4px 6px; scrollbar-width: thin; }
.home-col-left { left: 10px; }
.home-col-right { right: 8px; }
/* v3.50: centre the device columns between the orb and each edge (like the widgets) */
@media (min-width: 1181px) {
  .home-col-left  { left: 25%; right: auto; transform: translateX(-50%); }
  .home-col-right { left: 75%; right: auto; transform: translateX(-50%); }
}
.home-col-right[hidden] { display: none !important; }
.home-loc { margin-bottom: 14px; }
.home-loc h5 { margin: 2px 4px 8px; font-size: 11px; color: rgb(var(--acc3)); text-transform: uppercase; letter-spacing: .7px; opacity: .85; }
.home-loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 7px; }
/* small square icon tiles */
.home-dev { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; aspect-ratio: 1 / 1; min-height: 62px; padding: 6px 5px;
  border-radius: 11px; border: 1px solid var(--line); background: rgba(12,18,34,.75); color: var(--ink);
  cursor: pointer; text-align: center; overflow: hidden; transition: transform .12s, background .15s, border-color .15s, box-shadow .15s; }
.home-dev .hd-icon { width: 20px; height: 20px; fill: #9fb2d8; transition: fill .15s; flex: 0 0 auto; }
.home-dev .hd-name { font-size: 10px; font-weight: 600; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.home-dev .hd-state { font-size: 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.home-dev.on { background: linear-gradient(180deg, rgba(60,220,130,.24), rgba(30,175,100,.08));
  border-color: rgba(70,220,140,.62); box-shadow: 0 0 18px rgba(50,210,120,.28); }
.home-dev.on .hd-icon { fill: #4fe598; }
/* v4.49 — per-device tile density (Tristan: HA icons were too big) */
.home-density-btn { position: fixed; left: 16px; bottom: 16px; z-index: 70; font: inherit; font-size: 12px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer; background: rgba(18,26,44,.9); color: rgb(var(--acc3));
  border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.home-density-btn:hover { background: rgba(40,60,90,.95); border-color: rgba(46,140,255,.5); }
.home-den-compact .home-loc-grid { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; }
.home-den-compact .home-dev { min-height: 52px; padding: 5px 4px; gap: 2px; }
.home-den-compact .home-dev .hd-icon { width: 17px; height: 17px; }
.home-den-compact .home-dev .hd-name { font-size: 9px; }
.home-den-compact .home-dev .hd-state { font-size: 7.5px; }
.home-den-tiny .home-loc-grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 5px; }
.home-den-tiny .home-dev { min-height: 44px; padding: 4px 3px; gap: 1px; }
.home-den-tiny .home-dev .hd-icon { width: 15px; height: 15px; }
.home-den-tiny .home-dev .hd-name { font-size: 8px; -webkit-line-clamp: 1; }
.home-den-tiny .home-dev .hd-state { display: none; }
.home-dev.on .hd-state { color: #58e59a; }
.home-dev.busy { opacity: .5; }
.home-dev:active { transform: scale(.95); }
/* v5.25 — Home Automation device tiles placed directly on the widgets board */
.home-dev.ha-tile { position: fixed !important; margin: 0 !important; aspect-ratio: auto; min-height: 0;
  gap: 4px; padding: 8px 6px; touch-action: none; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(30,41,59,.72), rgba(15,23,42,.72));
  border: 1px solid rgba(148,163,184,.28); border-radius: 16px; backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0,0,0,.32); overflow: hidden; }
.home-dev.ha-tile .ha-emoji { font-size: clamp(20px, 34%, 48px); line-height: 1; }
.home-dev.ha-tile .hd-icon { width: clamp(20px, 30%, 44px); height: clamp(20px, 30%, 44px); }
.home-dev.ha-tile .hd-name { font-size: 12px; -webkit-line-clamp: 2; }
.home-dev.ha-tile .hd-state { font-size: 9px; }
.home-dev.ha-tile.dragging { opacity: .9; }
.home-dev.ha-tile.ha-selected { outline: 2px solid rgb(var(--acc)); outline-offset: 2px; box-shadow: 0 0 16px rgba(var(--acc),.45); }
/* v9.06 — 🚨 smoke-detector devices: Material "detector" symbol, green "Active" / red "Alert" line + battery */
.hd-msym { font-size: 26px; line-height: 1; color: rgb(var(--acc2)); flex: 0 0 auto; }
.home-den-compact .home-dev .hd-msym { font-size: 22px; }
.home-den-tiny .home-dev .hd-msym { font-size: 19px; }
.home-dev.ha-tile .hd-msym { font-size: clamp(22px, 32%, 46px); }
.hgf-ricon .hd-msym { font-size: 22px; }
.hd-msym-alarm { color: #ff5b5b !important; }
.ha-smoke-ok .hd-state { color: #6ee7a8 !important; font-weight: 700; text-transform: none !important; letter-spacing: 0 !important; }
.ha-smoke-alarm { border-color: #ef4444 !important; background: rgba(239,68,68,.16) !important; }
.ha-smoke-alarm .hd-state { color: #ffd7d7 !important; font-weight: 800; text-transform: none !important; letter-spacing: 0 !important; }
.ha-smoke-alarm .hd-name { color: #ffe3e3 !important; }
.ha-smoke-alarm { animation: haSmokePulse 1.1s ease-in-out infinite; }
@keyframes haSmokePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 50% { box-shadow: 0 0 0 5px rgba(239,68,68,0); } }
.reduce-motion .ha-smoke-alarm { animation: none; }
/* v7.99 — Home Automation FRAMED layout: devices as a self-scaling icon grid inside the widget frame.
   Container queries scale the tiles + icons with the frame width, so icons stay even and resize with the frame. */
.haf-body { container-type: inline-size; display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; overflow: auto; }
.haf-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; }
.haf-room { flex: 1; min-width: 0; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.haf-cog { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; }
.haf-cog:hover { color: rgb(var(--acc2)); }
.haf-auto { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; margin-left: auto; }
.haf-auto:hover { color: rgb(var(--acc2)); }
/* v9.97 — ⚡ Automations panel + editor */
.haa-body, .haa-edit { display: flex; flex-direction: column; gap: 9px; overflow: auto; }
.haa-intro, .haa-empty, .haa-seclbl small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.haa-list { display: flex; flex-direction: column; gap: 7px; }
.haa-row { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 11px; background: rgba(255,255,255,.03); border: 1px solid rgba(120,160,220,.16); }
.haa-ic { font-size: 20px; flex: 0 0 auto; width: 26px; text-align: center; }
.haa-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.haa-name { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.haa-sub { font-size: 10.5px; color: var(--muted); }
.haa-run { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 17px; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); }
.haa-run:hover { background: rgba(var(--acc),.32); }
.haa-cfg, .haa-del, .haa-clone { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 13px; background: rgba(18,26,44,.85); color: var(--muted); border: 1px solid var(--line); }
.haa-clone:hover, .haa-cfg:hover { color: rgb(var(--acc2)); border-color: rgba(var(--acc),.5); }
.haa-del:hover { color: #ff8a8a; border-color: rgba(244,63,94,.5); }
.haa-new { align-self: flex-start; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); }
.haa-f { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.haa-f input[type=text] { font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.haa-emos { display: flex; flex-wrap: wrap; gap: 5px; }
.haa-emo { font-size: 17px; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.haa-emo.on { background: rgba(var(--acc),.24); border-color: rgba(var(--acc),.6); }
.haa-tf { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.haa-tf input { width: 16px; height: 16px; accent-color: rgb(var(--acc)); }
.haa-timerow input { font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.haa-seclbl { font-size: 12px; font-weight: 700; color: rgb(var(--acc2)); margin-top: 4px; }
.haa-chosen { display: flex; flex-direction: column; gap: 5px; }
.haa-dev { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.haa-dn { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.haa-st { flex: 0 0 auto; min-width: 44px; font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 7px; cursor: pointer; border: 1px solid var(--line); }
.haa-st.on { background: rgba(52,199,89,.2); color: #7be495; border-color: rgba(52,199,89,.5); }
.haa-st.off { background: rgba(120,130,150,.15); color: var(--muted); }
.haa-rm { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; background: rgba(18,26,44,.85); color: #ff8a8a; border: 1px solid var(--line); }
.haa-search { flex: 1 1 auto; min-width: 80px; font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.haa-addbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.haa-grp { font: inherit; font-size: 12.5px; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; max-width: 45%; }
.haa-reset { flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px; cursor: pointer; background: rgba(18,26,44,.85); color: var(--muted); border: 1px solid var(--line); }
.haa-reset:hover { color: rgb(var(--acc2)); border-color: rgba(var(--acc),.5); }
.haa-color { flex: 0 0 auto; width: 30px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.haa-pool { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.haa-add { text-align: left; font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 8px; cursor: pointer; background: rgba(255,255,255,.03); color: var(--ink); border: 1px solid var(--line); }
.haa-add.in { background: rgba(var(--acc),.14); color: rgb(var(--acc2)); border-color: rgba(var(--acc),.4); }
.sched-ev.k-auto .sched-ic { filter: none; }
.haf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(56px, 20cqw, 122px), 1fr)); gap: 8px; align-content: start; }
.home-dev.haf-tile { position: static !important; margin: 0 !important; width: auto !important; height: auto !important;
  aspect-ratio: 1 / 1; min-height: 0; touch-action: manipulation; overflow: hidden;
  background: linear-gradient(180deg, rgba(30,41,59,.55), rgba(15,23,42,.55));
  border: 1px solid rgba(148,163,184,.24); border-radius: 14px; }
.home-dev.haf-tile .ha-emoji { font-size: clamp(20px, 9cqw, 52px); line-height: 1; }
.home-dev.haf-tile .hd-icon { width: clamp(20px, 9cqw, 50px); height: clamp(20px, 9cqw, 50px); }
.home-dev.haf-tile .hd-name { font-size: clamp(9px, 2.6cqw, 13px); }
.home-dev.haf-tile .hd-state { font-size: clamp(7px, 2cqw, 10px); }
.haf-grid.haf-nolabel .hd-name { display: none; }
.haf-load, .haf-empty { grid-column: 1 / -1; font-size: 12px; color: var(--muted); padding: 14px 4px; text-align: center; }
/* v8.28 — HA GROUP FRAMES: one movable/resizable frame per group (device Location). Reuses .haf-tile
   scaling inside a container. Background respects --card-alpha so widget opacity works on frames too. */
.ha-gframe { position: fixed !important; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(8,26,40,var(--card-alpha,.95)), rgba(4,14,24,var(--card-alpha,.95)));
  border: 1px solid rgba(var(--acc),.4); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 18px rgba(var(--acc),.10); }
.hgf-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; cursor: move; touch-action: none; border-bottom: 1px solid rgba(var(--acc),.28);
  font-weight: 700; font-size: 12px; color: rgb(var(--acc2)); text-transform: uppercase; letter-spacing: .04em; }
.hgf-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hgf-count { flex: 0 0 auto; font-size: 10px; color: var(--muted); background: rgba(var(--acc),.16); border-radius: 999px; padding: 1px 7px; }
.hgf-grid { flex: 1 1 auto; min-height: 0; overflow: auto; container-type: inline-size;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(52px, 22cqw, 110px), 1fr)); gap: 7px; align-content: start; padding: 8px; }
.hgf-grid.haf-nolabel .hd-name { display: none; }
/* v8.36 — group ⚙, LIST view + hide-parts compacting */
.hgf-cog { flex: 0 0 auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; }
.hgf-cog:hover { color: rgb(var(--acc2)); }
.hgf-listwrap { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 5px; padding: 8px; }
.hgf-row { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.14); }
.hgf-row.on { background: linear-gradient(180deg, rgba(60,220,130,.18), rgba(30,175,100,.06)); border-color: rgba(60,220,130,.3); }
.hgf-row:active { transform: scale(.99); }
.hgf-ricon { flex: 0 0 auto; display: flex; align-items: center; }
.hgf-ricon .hd-icon { width: 20px; height: 20px; fill: #9fb2d8; }
.hgf-row.on .hgf-ricon .hd-icon { fill: #4fe598; }
.hgf-ricon .ha-emoji { font-size: 18px; }
.hgf-rtext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hgf-rtext .hd-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hgf-rtext .hd-state { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.hgf-row.on .hd-state { color: #58e59a; }
.hgf-rpow { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px;
  border: 1px solid rgba(var(--acc),.4); background: rgba(var(--acc),.12); color: rgb(var(--acc2)); }
.hgf-row.on .hgf-rpow { background: rgba(60,220,130,.22); border-color: rgba(60,220,130,.5); color: #6ff0aa; }
.hgf-nolabel .hd-name { display: none; }
.hgf-nostatus .hd-state { display: none; }
.hgf-noicon .hd-icon, .hgf-noicon .ha-emoji, .hgf-noicon .hgf-ricon { display: none; }
/* per-group settings popup */
.hgs-sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 10px 0 6px; }
.hgs-sec:first-child { margin-top: 0; }
.hgs-views { display: flex; gap: 8px; }
.hgs-vbtn { flex: 1 1 0; padding: 9px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: rgba(var(--acc),.06); color: var(--ink); }
.hgs-vbtn.on { background: rgba(var(--acc),.2); border-color: rgba(var(--acc),.6); color: rgb(var(--acc2)); }
.hgs-note { font-size: 11px; color: var(--muted); margin: 8px 0 2px; line-height: 1.45; }
.hgs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 2px; font-size: 13px; border-bottom: 1px solid rgba(148,163,184,.1); cursor: pointer; }
.hgs-row input { transform: scale(1.15); cursor: pointer; }
/* v8.42 — MOBILE HA: inline stacked LIST groups under the widgets (non-movable) + HA menu items */
.ha-groups-mobile { display: block; width: 100%; margin: 10px 0 4px; }
body:not(.max-phone) .ha-groups-mobile { display: none; }
.hgm-card { background: linear-gradient(180deg, rgba(8,26,40,var(--card-alpha,.95)), rgba(4,14,24,var(--card-alpha,.95)));
  border: 1px solid rgba(var(--acc),.35); border-radius: 12px; margin: 0 0 10px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.hgm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px;
  font-weight: 700; font-size: 13px; color: rgb(var(--acc2)); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid rgba(var(--acc),.25); }
.hgm-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hgm-cnt { flex: 0 0 auto; font-size: 10px; color: var(--muted); background: rgba(var(--acc),.16); border-radius: 999px; padding: 1px 8px; }
.hgm-list { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.hgm-list .hgf-row { padding: 9px 11px; }   /* a touch roomier for touch */
.hgm-list .hgf-rpow { width: 36px; height: 36px; }
/* v9.21 — grouped-list Home Automation card on phone + iPad (renders inside the widget card) */
/* v9.28 — HA mobile card AUTO-HEIGHTS (no inner scroll): the whole group list flows down and the PAGE
   scrolls, instead of nested "scrolling within scrolling" (card-body 70vh cap + .haf-body overflow). */
.ha-mob-body { display: block !important; overflow: visible !important; }
body.max-phone .wdg-stacked .res-card-body.ha-mob-body,
body.max-ipad .wdg-stacked .res-card-body.ha-mob-body { max-height: none !important; overflow: visible !important; }
.ha-mob-groups { display: flex; flex-direction: column; gap: 8px; }
body.max-phone #hdrHaBtn { display: none !important; }   /* ⏻ moves into the ☰ menu on mobile */
body:not(.max-phone) .mbi-ha { display: none !important; }   /* Home Assistant / Home devices menu items = mobile only */
.hgf-resize { position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; cursor: nwse-resize; z-index: 3;
  background: linear-gradient(135deg, transparent 45%, rgba(var(--acc),.55) 45%, rgba(var(--acc),.55) 62%, transparent 62%, transparent 74%, rgba(var(--acc),.55) 74%, rgba(var(--acc),.55) 90%, transparent 90%); }
.ha-dev-areawrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ha-dev-areawrap .ha-dev-area { flex: 1 1 auto; min-width: 0; }
.ha-dev-grpchk { flex: 0 0 auto; cursor: pointer; }
/* v8.29 — 🗂 Device Groups control box */
/* v8.30 — big obvious master toggle (the small checkbox was too easy to miss) */
.hagrp-bigtoggle { display: block; width: 100%; text-align: left; cursor: pointer; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 12px; border: 1px solid rgba(var(--acc),.5); color: var(--ink);
  background: rgba(var(--acc),.10); transition: background .15s, border-color .15s; }
.hagrp-bigtoggle b { display: block; font-size: 14px; }
.hagrp-bigtoggle.on { background: linear-gradient(180deg, rgba(60,220,130,.22), rgba(30,175,100,.10)); border-color: rgba(60,220,130,.6); }
.hagrp-bigtoggle.on b { color: #6ff0aa; }
.hagrp-bigtoggle:hover { border-color: rgba(var(--acc),.85); }
.hagrp-bigtoggle .hagrp-sub { margin-top: 4px; }
.hagrp-master { padding: 2px 2px 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.hagrp-mrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; cursor: pointer; }
.hagrp-mrow > span { display: block; font-size: 13px; }
.hagrp-sub { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 3px; }
.hagrp-mrow input { flex: 0 0 auto; margin-top: 3px; transform: scale(1.25); cursor: pointer; }
.hagrp-tools { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.hagrp-list { display: flex; flex-direction: column; gap: 6px; }
.hagrp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(var(--acc),.05); }
.hagrp-row.hid { opacity: .55; }
.hagrp-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hagrp-cnt { font-size: 10px; color: var(--muted); background: rgba(var(--acc),.16); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.hagrp-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.hagrp-acts .btn { font-size: 11.5px; padding: 4px 9px; }
.hagrp-empty { font-size: 12.5px; color: var(--muted); padding: 14px 6px; text-align: center; line-height: 1.5; }
.ha-sizetag { position: absolute; top: 4px; right: 4px; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 7px;
  background: rgba(4,18,26,.85); color: #bff3ff; border: 1px solid rgba(var(--acc),.5); opacity: 0; pointer-events: none; transition: opacity .1s; }
.ha-sizetag.show { opacity: 1; }
/* v5.48 — Alt+H hide mode: red dot on each tile to remove single devices */
.ha-hidedot { position: absolute; top: -6px; left: -6px; width: 20px; height: 20px; border-radius: 50%; z-index: 9; cursor: pointer; padding: 0;
  background: #ff3b3b; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45); animation: haDotPulse 1.2s ease-in-out infinite; }
.ha-hidedot::after { content: '✕'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #fff; }
.ha-hidedot:hover { background: #ff5f5f; transform: scale(1.15); }
@keyframes haDotPulse { 0%,100% { box-shadow: 0 0 0 rgba(255,59,59,.5); } 50% { box-shadow: 0 0 10px rgba(255,59,59,.9); } }
#widgets.ha-hiding .ha-tile { outline: 1px dashed rgba(255,59,59,.5); outline-offset: 2px; }
/* v5.33 — HA icon-picker modal (Ctrl+E) */
.ha-iconmodal { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; background: rgba(4,10,22,.55); backdrop-filter: blur(3px); }
.ha-iconmodal-card { width: min(440px, 92vw); max-height: 82vh; overflow: auto; background: #0f1830; border: 1px solid rgba(120,160,220,.3); border-radius: 16px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.ha-iconmodal-h { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.ha-iconmodal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.ha-icochoice { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; cursor: pointer;
  background: rgba(18,26,44,.7); border: 1px solid var(--line); color: #cfe0f5; font-size: 10px; }
.ha-icochoice svg { width: 24px; height: 24px; fill: #9fb2d8; }
.ha-icochoice:hover { background: rgba(var(--acc),.16); border-color: rgba(var(--acc),.45); }
.ha-icochoice.on { background: rgba(var(--acc),.22); border-color: rgba(var(--acc),.6); }
.ha-icochoice.on svg { fill: rgb(var(--acc)); }
.ha-iconmodal-emoji { margin-top: 12px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.ha-iconmodal-emoji input { width: 64px; text-align: center; font-size: 18px; padding: 5px; border-radius: 8px; }
.ha-iconmodal-btns { margin-top: 14px; text-align: right; }
/* v6.31 — per-device editor floating panel (Alt+E): replaces the fading icon modal — movable,
   resizable, no dimmed backdrop; adds background-colour swatches + a show/hide toggle */
#haDevEdit { width: min(460px, 92vw); height: min(560px, 86vh); }
#haDevEdit .cal-panel-body { overflow: auto; }
.ha-ed-sec { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 6px; }
.ha-ed-sec:first-child { margin-top: 0; }
.ha-ed-shades { display: flex; flex-wrap: wrap; gap: 6px; }
.ha-shade-sw { width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(120,160,220,.3); background: transparent; color: #9fb2d8; font-size: 15px; cursor: pointer; }
.ha-shade-sw:hover { border-color: rgba(var(--acc),.45); }
.ha-shade-sw.on { border: 2px solid rgb(var(--acc)); }
.ha-ed-show { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ha-ed-show input { width: 16px; height: 16px; }
/* v6.33 — Logout panel (desktop): save-arrangement prompt before locking */
#logoutModal { width: min(440px, 92vw); height: auto; min-height: 240px; max-height: 80vh; }
.lo-note { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.lo-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 14px; }
.lo-skip { border-color: rgba(248,113,113,.5); color: #fca5a5; }
.lo-skip:hover { background: rgba(248,113,113,.14); }
/* v5.35 — HA tiles: keep the corner resizable but hide the busy grip graphic (looks cluttered when small); a faint hint appears only on hover */
.home-dev.ha-tile .ha-resize { display: block; width: 16px; height: 16px; background: none !important; }
.home-dev.ha-tile:hover .ha-resize { background: linear-gradient(135deg, transparent 55%, rgba(var(--acc),.55) 55%, rgba(var(--acc),.55) 68%, transparent 68%, transparent 80%, rgba(var(--acc),.55) 80%, rgba(var(--acc),.55) 92%, transparent 92%) !important; }
.ha-dev-emoji { width: 46px; text-align: center; font-size: 16px; padding: 4px; border-radius: 8px; }
.wopt-note { font-size: 11px; color: var(--muted); line-height: 1.45; padding: 4px 2px 2px; }
.wopt-reset { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 13px; font-weight: 600; padding: 9px; border-radius: 10px; cursor: pointer;
  background: rgba(255,178,107,.16); color: #ffcf9c; border: 1px solid rgba(255,178,107,.45); }
.wopt-reset:hover { background: rgba(255,178,107,.3); }
/* v8.01 — Alt+R "type an exact size" modal */
.wsz-modal { position: fixed; left: 50%; top: 42%; transform: translate(-50%,-50%); z-index: 460; width: min(300px, 92vw);
  background: rgba(14,22,40,.98); border: 1px solid rgba(120,160,220,.35); border-radius: 16px; padding: 16px 16px 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55); backdrop-filter: blur(10px); }
.wsz-h { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.wsz-in { box-sizing: border-box; width: 100%; font: inherit; font-size: 22px; font-weight: 700; text-align: center; letter-spacing: 1px;
  padding: 10px 12px; border-radius: 11px; background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid var(--line); }
.wsz-in:focus { outline: none; border-color: rgba(var(--acc),.65); }
.wsz-hint { font-size: 10.5px; color: var(--muted); text-align: center; margin: 7px 0 12px; }
.wsz-btns { display: flex; gap: 8px; }
.wsz-b { flex: 1; font: inherit; font-size: 12.5px; font-weight: 600; padding: 9px; border-radius: 10px; cursor: pointer;
  background: rgba(120,160,220,.14); color: #cfe0ff; border: 1px solid rgba(120,160,220,.32); }
.wsz-b:hover { background: rgba(120,160,220,.26); }
.wsz-b.wsz-done { background: rgba(var(--acc),.18); color: rgb(var(--acc2)); border-color: rgba(var(--acc),.5); }
.home-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 20px 10px; line-height: 1.5; }
/* v3.50: small close button top-right beside the version pill (was a big bottom button) */
.home-close { position: fixed; top: 16px; right: 140px; z-index: 66; pointer-events: auto;
  background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px;
  font: inherit; font-size: 12.5px; line-height: 1; cursor: pointer; }
.home-close:hover { background: rgba(40,60,90,.9); border-color: rgba(46,140,255,.5); }
@media (max-width: 760px) {
  .home-col { width: 46vw; top: 54px; bottom: 52px; }
  .home-loc-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Settings → Home Assistant device manager */
.ha-mgr-filter { display: flex; align-items: center; gap: 12px; margin: 10px 0 8px; }
.ha-mgr-filter input[type="text"] { flex: 1; background: rgba(10,16,30,.7); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 13px; }
.ha-onlyon { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.ha-devlist { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.ha-dom-head { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: rgb(var(--acc3)); padding: 10px 6px 4px; }
.ha-dev-row { display: grid; grid-template-columns: auto 1fr 1.1fr .8fr; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 8px; }
.ha-dev-row + .ha-dev-row { border-top: 1px dashed rgba(140,160,200,.12); }
.ha-dev-row.on { background: rgba(255,180,60,.06); }
.ha-dev-chk { width: 17px; height: 17px; accent-color: #ffb454; flex: 0 0 auto; }
.ha-dev-meta { display: flex; flex-direction: column; min-width: 0; }
.ha-dev-fn { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-dev-id { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-dev-name, .ha-dev-area { background: rgba(10,16,30,.7); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; font-size: 12.5px; min-width: 0; }
.ha-dev-name:focus, .ha-dev-area:focus { outline: none; border-color: rgba(120,150,255,.6); }
.ha-dev-iconwrap { display: flex; align-items: center; gap: 7px; }
.ha-dev-iconprev svg { width: 22px; height: 22px; fill: rgb(var(--acc3)); display: block; }
.ha-dev-icon { flex: 1; background: rgba(10,16,30,.7); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 6px 6px; font-size: 12px; min-width: 0; }
@media (max-width: 620px) {
  .ha-dev-row { grid-template-columns: auto 1fr; grid-auto-rows: auto; }
  .ha-dev-name, .ha-dev-area { grid-column: 2; }
}

/* v7.49 — See-devices modal as a TABLE (row per device), not cards */
.cfg-panel.hadev-panel { max-width: 1600px; width: 97vw; }   /* beat the later .cfg-panel{max-width:640px} */
/* v7.89 — the ⏻ Home devices window behaves like a widget: NO backdrop fade, movable + resizable */
.cfg-overlay.hadev-float { background: transparent; backdrop-filter: none; pointer-events: none; display: block; overflow: visible; padding: 0; z-index: 60; }
.cfg-overlay.hadev-float .cfg-panel.hadev-panel { pointer-events: auto; position: fixed; left: 50%; top: 74px; transform: translateX(-50%);
  width: min(1100px, 94vw); height: min(80vh, 940px); max-width: none; margin: 0; padding: 0 18px 14px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--acc),.28); }
.cfg-overlay.hadev-float .cfg-head { cursor: move; touch-action: none; }
.cfg-overlay.hadev-float #haDevList { flex: 1 1 auto; overflow: auto; }
/* v8.44 — Screen Profiles window as a proper floating panel (movable/resizable, no dim backdrop) */
.cfg-overlay.hadev-float .cfg-panel.ss-panel { pointer-events: auto; position: fixed; left: 50%; top: 74px; transform: translateX(-50%);
  width: min(680px, 94vw); height: min(80vh, 780px); max-width: none; max-height: none; }
.cfg-overlay.hadev-float .ss-panel #ssList { flex: 1 1 auto; min-height: 0; overflow: auto; }
.hadev-grip { position: absolute; right: 5px; bottom: 5px; width: 18px; height: 18px; cursor: nwse-resize; z-index: 3;
  background: linear-gradient(135deg, transparent 40%, rgba(var(--acc),.75) 40%, rgba(var(--acc),.75) 52%, transparent 52%, transparent 66%, rgba(var(--acc),.75) 66%, rgba(var(--acc),.75) 78%, transparent 78%); }
.hadev-bar { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; flex-wrap: wrap; }
.hadev-bar input[type="text"] { flex: 1; min-width: 160px; background: rgba(10,16,30,.7); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 13px; }
.ha-sort { background: rgba(10,16,30,.7); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 13px; }
.hadev-hint { margin: 0 0 10px; }
.ha-devlist-modal { max-height: 74vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 2px 4px; display: block; }
.ha-devlist-modal .ha-dom-head { border-top: 1px solid var(--line); margin-top: 2px; }
.ha-dev-thead, .ha-devlist-modal .ha-dev-row { display: grid; grid-template-columns: 26px minmax(140px,1.5fr) 96px 1.1fr .9fr 92px 52px 44px 40px; gap: 8px; align-items: center; }
.ha-dev-thead { position: sticky; top: 0; z-index: 2; background: rgba(10,16,30,.96); padding: 7px 8px; border-bottom: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.ha-devlist-modal .ha-dev-row { grid-template-areas: none; padding: 6px 8px; border: 0; border-bottom: 1px dashed rgba(140,160,200,.14); background: none; border-radius: 0; }
.ha-devlist-modal .ha-dev-row.on { background: rgba(255,180,60,.06); }
.ha-dev-state { display: flex; flex-direction: column; min-width: 0; font-size: 11px; }
.ha-dev-dom { color: var(--muted); text-transform: capitalize; }
.ha-dev-st { color: rgb(var(--acc3)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-dev-hide { width: 16px; height: 16px; accent-color: #ff6b6b; justify-self: center; }
/* v5.96 — per-device "reset position" button (snap a lost tile back to top-left @ 20×20) */
.ha-dev-reset { flex: 0 0 auto; width: 34px; height: 32px; font-size: 15px; line-height: 1; cursor: pointer; border-radius: 8px;
  background: rgba(120,160,220,.14); color: var(--ink); border: 1px solid var(--line); }
.ha-dev-reset:hover { background: rgba(120,160,220,.3); border-color: rgba(120,150,255,.6); }
/* v8.12 — per-row power test button */
.ha-dev-test { flex: 0 0 auto; width: 34px; height: 32px; font-size: 15px; line-height: 1; cursor: pointer; border-radius: 8px;
  background: rgba(120,160,220,.14); color: var(--muted); border: 1px solid var(--line); }
.ha-dev-test:hover { background: rgba(120,160,220,.3); }
.ha-dev-test.on { background: rgba(74,222,128,.24); color: #7dffa8; border-color: rgba(74,222,128,.55); }
.ha-dev-test.busy { opacity: .5; }
.ha-devlist-modal .ha-dev-test { width: 34px; padding: 5px 0; font-size: 14px; justify-self: center; }
.ha-devlist-modal .ha-dev-reset { width: 34px; padding: 5px 0; font-size: 14px; justify-self: center; }
@media (max-width: 760px) {
  .ha-dev-thead { display: none; }
  .ha-devlist-modal .ha-dev-row { grid-template-columns: 26px 1fr 44px; grid-template-areas: "chk meta hide" "name name name" "area area area" "state icon emoji"; gap: 6px 8px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
  .ha-devlist-modal .ha-dev-chk { grid-area: chk; } .ha-devlist-modal .ha-dev-meta { grid-area: meta; } .ha-devlist-modal .ha-dev-hide { grid-area: hide; }
  .ha-devlist-modal .ha-dev-name { grid-area: name; } .ha-devlist-modal .ha-dev-area { grid-area: area; } .ha-devlist-modal .ha-dev-state { grid-area: state; }
  .ha-devlist-modal .ha-dev-iconwrap { grid-area: icon; } .ha-devlist-modal .ha-dev-emoji { grid-area: emoji; } .ha-devlist-modal .ha-dev-reset { display: none; }
}
.ha-flash { outline: 3px solid #ffd45e !important; animation: haFlash 1.6s ease-out; }
@keyframes haFlash { 0%, 100% { outline-color: rgba(255,212,94,0); } 20%, 60% { outline-color: rgba(255,212,94,1); } }

/* group automations — list + editor */
.ha-grouplist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ha-grp-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(12,18,34,.55); }
.ha-grp-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ha-grp-name { font-size: 14px; font-weight: 600; }
.ha-grp-count { font-size: 11px; color: var(--muted); }
.ha-grp-row .btn.ghost { padding: 6px 12px; }
.ha-grp-del { background: none; border: 0; cursor: pointer; font-size: 15px; opacity: .6; padding: 4px 6px; border-radius: 6px; }
.ha-grp-del:hover { opacity: 1; background: rgba(255,90,90,.15); }
.cfg-panel.hagrp-panel { max-width: 620px; width: 94vw; }
.hagrp-filter { width: 100%; background: rgba(10,16,30,.7); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 13px; margin: 6px 0; }
.hagrp-devs { max-height: 46vh; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; }
.hagrp-dev { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: 13px; background: rgba(10,16,30,.4); }
.hagrp-dev input { width: 16px; height: 16px; accent-color: #ffb454; }
.hagrp-dev.on { background: linear-gradient(180deg, rgba(255,190,70,.2), rgba(255,160,40,.07)); border-color: rgba(255,180,60,.55); }
.hagrp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }

/* timers & reminders tray — stacked chips, top-right */
.timer-tray { position: fixed; top: 14px; right: 14px; z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.timer-chip { pointer-events: auto; display: flex; align-items: center; gap: 9px; padding: 8px 10px 8px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 13px; backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.34); color: var(--ink); font-size: 15px; max-width: 78vw;
  animation: tcIn .22s ease-out; }
@keyframes tcIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.timer-chip .tc-ico { font-size: 16px; }
.timer-chip .tc-time { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .5px; min-width: 42px; }
.timer-chip .tc-lbl { color: var(--muted); max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer-chip .tc-x { pointer-events: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; padding: 2px 4px; line-height: 1; border-radius: 6px; }
.timer-chip .tc-x:hover { color: var(--ink); background: rgba(255,255,255,.08); }
.timer-chip.tc-soon { border-color: rgba(255,170,60,.6); box-shadow: 0 0 18px rgba(255,150,40,.35); }
.timer-chip.tc-soon .tc-time { color: #ffb454; }
.timer-chip.tc-done { border-color: rgba(255,90,90,.7); animation: tcPulse 1s ease-in-out infinite; }
.timer-chip.tc-done .tc-time { color: #ff6b6b; font-weight: 700; }
@keyframes tcPulse { 0%,100% { box-shadow: 0 0 8px rgba(255,80,80,.3); } 50% { box-shadow: 0 0 22px rgba(255,80,80,.6); } }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(40,90,200,.16), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(30,180,140,.08), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--max-font, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif);   /* v7.36 — Settings → Theme font choice cascades from here */
  min-height: 100%;
  transition: background 0.9s ease;
}
/* "Let's chat" mode: gentle purple wash + a stripped-back, conversation-only screen */
body.chatmode {
  background:
    radial-gradient(1200px 820px at 50% -10%, rgba(140,70,210,.30), transparent 62%),
    radial-gradient(900px 700px at 50% 120%, rgba(110,60,190,.16), transparent 60%),
    #0a0716;
}
/* chat mode strips the screen back to just the orb + the conversation */
body.chatmode .head,          /* logo / wordmark */
body.chatmode .topbar,        /* all the top-right icons (buzz, saved, history, notes, photos, settings, fullscreen, 💗) */
body.chatmode #verBtn,        /* version badge */
body.chatmode #status,        /* status line */
body.chatmode #liveMeter,     /* mic level bar */
body.chatmode .controls,      /* Activate + Notes + Photos buttons */
body.chatmode .foot,          /* footer: version + token usage + legend */
body.chatmode #feed,
body.chatmode #pager,
body.chatmode #tips,
body.chatmode #followups,
body.chatmode #typeForm { display: none !important; }
/* conversation bubbles — newest on top, pushing older ones down; older fade away */
.chat-pane { width: 100%; max-width: 620px; margin: 24px auto 0; display: flex; flex-direction: column; gap: 10px; }
.chat-pane[hidden] { display: none !important; }
.chat-msg { max-width: 82%; padding: 11px 15px; border-radius: 18px; font-size: 15.5px; line-height: 1.4;
  opacity: 0; transform: translateY(-6px); animation: chatIn .35s ease forwards; transition: opacity .6s ease; }
.chat-msg.me  { align-self: flex-start; background: linear-gradient(180deg, rgba(64,84,150,.92), rgba(42,58,108,.92));
  border: 1px solid rgba(130,160,255,.32); border-bottom-left-radius: 6px; }
.chat-msg.her { align-self: flex-end; text-align: left; background: linear-gradient(180deg, rgba(158,86,224,.36), rgba(116,62,188,.34));
  border: 1px solid rgba(206,150,255,.45); border-bottom-right-radius: 6px; color: #f4ecff; }
.chat-msg.fade { opacity: 0; }
@keyframes chatIn { to { opacity: 1; transform: none; } }
/* her "typing…" dots while she thinks */
.chat-msg.typing { display: inline-flex; gap: 6px; align-items: center; padding: 14px 16px; }
.chat-msg.typing .td { width: 8px; height: 8px; border-radius: 50%; background: #ecd9ff; opacity: .35; animation: tdot 1.25s infinite ease-in-out; }
.chat-msg.typing .td:nth-child(2) { animation-delay: .18s; }
.chat-msg.typing .td:nth-child(3) { animation-delay: .36s; }
@keyframes tdot { 0%, 65%, 100% { opacity: .3; transform: translateY(0); } 32% { opacity: 1; transform: translateY(-4px); } }
.stage {
  max-width: 860px; margin: 0 auto; padding: 34px 20px 80px;
  display: flex; flex-direction: column; align-items: center;
}

/* ---- header ---- */
.head { text-align: center; margin-bottom: 10px; }
.wordmark { margin: 0; line-height: 1; }
.wordmark-txt {
  font-size: clamp(34px, 8vw, 60px); font-weight: 800;
  letter-spacing: .06em; text-indent: .06em;
  background: linear-gradient(180deg, #eaf1ff, #9fb6e6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* transparent PNG logo — renders cleanly on any background (no blend needed) */
.wordmark-img { display: block; margin: 0 auto; height: clamp(72px, 16vw, 128px); width: auto; max-width: 96vw; }
.pin-logo { display: block; margin: 0 auto; height: clamp(52px, 13vw, 74px); width: auto; max-width: 84vw; }
/* animated MAX logo — electricity through the conduits (canvas fills this box) */
.max-logo { display: block; margin: 0 auto; height: clamp(72px, 16vw, 128px); aspect-ratio: 835 / 299; width: auto; max-width: 96vw; }
.max-logo canvas { display: block; width: 100%; height: 100%; }
.tagline { margin: 6px 0 0; color: var(--muted); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }

/* ---- the orb ---- */
.orb-canvas { width: 100%; height: 100%; display: block; }
body.breathing #orb { animation: orbbreathe 9s ease-in-out infinite; }
@keyframes orbbreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* v3.36 — radial hover menu around the orb.
   Hover the orb → the action icons fan out evenly around it; hover an icon and its
   name shows inside the orb (+ a soft tick sound). Icons overflow the orb box. */
.orb-menu { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
/* Material Symbols (Google) — used for the orb menu icons (v3.49) */
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap;
  direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; }
.orb-menu .omi {
  position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  /* circle tinted to the orb's colour (--c changes per mode) */
  background: rgba(10,16,30,.85); border: 1.5px solid rgba(var(--c),.7); color: rgb(var(--c));
  transform: translate(0,0) scale(.3); opacity: 0;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .2s ease, background .15s, border-color .15s, color .15s;
  box-shadow: 0 0 10px rgba(var(--c),.28), 0 4px 14px rgba(0,0,0,.5);
}
.orb-menu .omi .material-symbols-outlined { font-size: 23px; }
.orb.menu-open .orb-menu { pointer-events: auto; }
.orb.menu-open .orb-menu .omi { transform: translate(var(--x), var(--y)) scale(1); opacity: 1; }
.orb-menu .omi:hover { background: rgba(var(--c),.92); border-color: rgba(var(--c),1); color: #05101f; box-shadow: 0 0 18px rgba(var(--c),.7); }
.orb-menu .omi.omi-muted { background: rgba(120,18,18,.92); border-color: rgba(255,74,74,.8); color: #ff7676; }
.orb-menu .omi.omi-muted:hover { background: rgba(150,24,24,.95); color: #fff; }
.orb-menu .omi.omi-on { border-color: rgba(40,220,140,.8); box-shadow: 0 0 12px rgba(40,220,140,.45); }
/* the hovered icon's NAME, shown in the centre of the orb */
.orb-label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 6; pointer-events: none; text-align: center; max-width: 160px;
  font-size: 15px; font-weight: 700; letter-spacing: .02em; color: rgb(var(--c));   /* v3.40: matches the orb */
  text-shadow: 0 1px 10px rgba(0,0,0,.92), 0 0 5px rgba(0,0,0,.7); opacity: 0; transition: opacity .15s ease;
}
.orb-label .material-symbols-outlined { font-size: 34px; display: block; margin: 0 auto 5px; }   /* icon + label combo (v3.49) */
.orb.menu-open .orb-label.show { opacity: 1; }
/* v3.38/v3.40: while the menu is open, drop the busy orb ANIMATION and the status
   line under it — but keep a clean blue circle (the ring below) so the orb still
   reads as itself, with the label centred inside. All restored on close. */
.orb-canvas { transition: opacity .22s ease; }
.orb-wrap.menu-live .orb-canvas { opacity: 0; }
.orb-wrap.menu-live #status, .orb-wrap.menu-live #heard { opacity: 0; transition: opacity .22s ease; }
#orb::after { content: ''; position: absolute; top: 50%; left: 50%; width: 176px; height: 176px; margin: -88px 0 0 -88px;
  border-radius: 50%; border: 2px solid rgba(var(--c),.85);
  box-shadow: 0 0 24px rgba(var(--c),.45), inset 0 0 30px rgba(var(--c),.22);
  opacity: 0; transition: opacity .22s ease; pointer-events: none; z-index: 1; }
.orb-wrap.menu-live #orb::after { opacity: 1; }

.orb-wrap { display: flex; flex-direction: column; align-items: center; margin: 96px 0 8px; }
.orb {
  --c: 120,140,170;                 /* overridden by mode-* */
  position: relative; width: 240px; height: 240px;
  display: grid; place-items: center;
  transition: filter .5s ease;
}
.orb .core {
  width: 128px; height: 128px; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(var(--c),1) 0%, rgba(var(--c),.55) 42%, rgba(var(--c),.10) 68%, transparent 74%);
  box-shadow: 0 0 60px 6px rgba(var(--c),.55), inset 0 0 40px rgba(var(--c),.5);
  animation: breathe 4.6s ease-in-out infinite;
}
.orb .ring {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  border: 2px solid rgba(var(--c),.55);
  animation: ripple 4.6s ease-out infinite;
}
.orb .ring.r2 { animation-delay: 1.5s; }
.orb .ring.r3 { animation-delay: 3.0s; }
.orb .spinner {
  position: absolute; width: 200px; height: 200px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(var(--c),.9) 82%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  opacity: 0; animation: spin 1.1s linear infinite; transition: opacity .3s;
}

@keyframes breathe { 0%,100% { transform: scale(1);   filter: brightness(.92); }
                     50%     { transform: scale(1.07); filter: brightness(1.12); } }
@keyframes ripple  { 0%   { transform: scale(.66); opacity: .75; }
                     100% { transform: scale(1.5);  opacity: 0; } }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes flash   { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- modes (the colours you specified) ---- */
.orb.mode-idle       { --c: 120,140,170; }
.orb.mode-listen     { --c: 46,140,255; }   /* BLUE  — listening */
.orb.mode-heard      { --c: 40,220,140; }   /* GREEN — heard a command */
.orb.mode-processing { --c: 255,150,46; }   /* ORANGE— processing */
.orb.mode-error      { --c: 255,74,74; }    /* RED   — can't process */

.orb.mode-idle .core, .orb.mode-idle .ring { animation-duration: 7s; }
.orb.mode-heard .core { animation-duration: 1.2s; }
.orb.mode-processing .core { animation-duration: 1.6s; }
.orb.mode-processing .spinner { opacity: 1; }
.orb.mode-error .core { animation: flash .5s steps(1) 4; }

.status { margin: 20px 0 2px; font-size: 15px; color: var(--ink); min-height: 20px; text-align: center; pointer-events: none; }
.heard { pointer-events: none; }   /* v3.51: never let the text under the orb steal hover from the menu ring */
.heard  { margin: 2px 0 0; min-height: 18px; color: var(--muted); font-style: italic; font-size: 14px; text-align: center; }

/* ---- controls ---- */
.controls { margin: 14px 0 6px; display: flex; gap: 10px; }
.btn { font: inherit; font-size: 15px; border-radius: 999px; padding: 13px 26px; cursor: pointer; border: 1px solid transparent; transition: transform .12s, box-shadow .2s, background .2s; }
.btn:active { transform: translateY(1px); }
.activate { background: linear-gradient(180deg, #2e8cff, #1f6fe0); color: #fff; border: none; font-weight: 600; letter-spacing: .02em; box-shadow: 0 8px 26px rgba(46,140,255,.35); display: inline-flex; align-items: center; gap: 10px; }
.activate:hover { box-shadow: 0 10px 32px rgba(46,140,255,.5); }
.mic-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: micpulse 1.8s infinite; }
@keyframes micpulse { 0%{box-shadow:0 0 0 0 rgba(255,255,255,.6);} 70%{box-shadow:0 0 0 8px rgba(255,255,255,0);} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0);} }
.stop { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.stop:hover { color: var(--ink); border-color: rgba(255,255,255,.35); }

/* ---- response feed ---- */
.feed { width: 100%; margin: 24px 0 0; display: flex; flex-direction: column; gap: 14px; }
.card {
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
/* the pin code shown on each live feed item */
.feed-code { position: absolute; top: 10px; right: 12px; z-index: 2; cursor: pointer;
  background: rgba(46,140,255,.16); color: rgb(var(--acc3)); border: 1px solid rgba(46,140,255,.4);
  border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  font-variant-numeric: tabular-nums; }
.feed-code:hover { background: rgba(46,140,255,.32); color: #fff; }
.card.newest .feed-code { top: 12px; }
/* fade + shrink as an item ages off the feed into History */
.card-archiving { animation: cardArchive .6s ease forwards; pointer-events: none; }
@keyframes cardArchive { to { opacity: 0; transform: translateX(24px) scale(.96); } }
.card .q { color: rgb(var(--acc3)); font-size: 13.5px; font-weight: 600; letter-spacing: .01em; margin-bottom: 8px; }
.card .q::before { content: "You: "; color: var(--muted); font-weight: 400; }
.card .a { color: var(--ink); font-size: 15.5px; line-height: 1.5; white-space: pre-wrap; }
.card .a::before { content: "MAX: "; color: #8fe6bf; font-weight: 600; }
.card.newest { animation: rise .45s ease; border-color: rgba(46,140,255,.5); box-shadow: 0 8px 28px rgba(46,140,255,.18); }
@keyframes rise { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---- pager ---- */
.pager { margin: 18px 0 0; display: flex; align-items: center; gap: 14px; }
.pager button { font: inherit; font-size: 13px; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.pager button:disabled { opacity: .35; cursor: default; }
.pager .pageinfo { color: var(--muted); font-size: 12px; }

/* ---- footer legend ---- */
.foot { margin-top: 30px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 12px; align-items: center; }
.legend .k { width: 11px; height: 11px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.legend .k.listen     { background: rgb(46,140,255); }
.legend .k.heard      { background: rgb(40,220,140); }
.legend .k.processing { background: rgb(255,150,46); }
.legend .k.error      { background: rgb(255,74,74); }

@media (prefers-reduced-motion: reduce) {
  .orb .core, .orb .ring, .orb .spinner, .mic-dot { animation: none !important; }
}

/* ───────── settings button + panel ─────────
   v3.36: on desktop the top icon row is HIDDEN — the menu is now the radial ring
   around the orb (hover it). The buttons stay in the DOM (the ring clicks them).
   On mobile (≤680px, no hover) the media query re-shows this row as a tap bar. */
.topbar { display: none; }
.cfg-btn { position: fixed; top: 14px; right: 16px; z-index: 20; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(18,26,44,.8); color: var(--ink); border: 1px solid var(--line); font-size: 20px; cursor: pointer;
  transition: transform .3s, background .2s; }
.cfg-btn:hover { background: rgba(40,60,90,.9); transform: rotate(45deg); }

.cfg-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(3,6,14,.72); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.cfg-panel { width: 100%; max-width: 520px; background: #0b1120; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6); padding: 4px 22px 22px; position: relative; }
/* v8.98 — when the Settings window is resized it becomes a fixed floating window whose BODY scrolls,
   so the 8 edge/corner resize handles stay pinned to the window edges (not to the scrolling content). */
.cfg-panel.cfg-floating { display: flex; flex-direction: column; overflow: hidden; }
.cfg-panel.cfg-floating .cfg-layout { flex: 1 1 auto; min-height: 0; overflow: auto; }
.cfg-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #0b1120; padding: 16px 0 10px; border-bottom: 1px solid var(--line); }
.cfg-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.cfg-x { background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.cfg-x:hover { color: var(--ink); }
.cfg-sec { padding: 18px 0; border-bottom: 1px solid var(--line); }
.cfg-sec:last-of-type { border-bottom: none; }
.cfg-sec h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: rgb(var(--acc3)); letter-spacing: .02em; }
.cfg-hint { margin: 6px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.cfg-hint b { color: var(--ink); font-weight: 600; }

.cfg-train { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.btn.train { background: #d63a4a; color: #fff; border: none; font-weight: 600; padding: 11px 18px; }
.btn.train:hover { background: #e2495a; }
.btn.train:disabled { opacity: .7; cursor: default; }
.cfg-heard { font-size: 13px; color: #8fe6bf; font-style: italic; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(46,140,255,.14); border: 1px solid rgba(46,140,255,.4);
  color: #cfe4ff; border-radius: 999px; padding: 6px 8px 6px 13px; font-size: 13px; }
.chip-x { background: rgba(255,255,255,.12); border: none; color: #fff; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 10px; line-height: 1; }
.chip-x:hover { background: #d63a4a; }
.cfg-add { display: flex; gap: 8px; margin-top: 6px; }
.cfg-add input { flex: 1; min-width: 0; }

.voice-slot { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 14px; margin: 12px 0; background: rgba(12,18,34,.4); }
.voice-slot-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--acc3)); font-weight: 700; margin: 2px 0 6px; }
.cfg-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; font-size: 14px; }
.cfg-row[hidden] { display: none !important; }   /* honour hidden — display:flex above would otherwise keep an empty Voice row visible (fish/xtts have one voice) */
.cfg-row > span:first-child { min-width: 110px; color: var(--muted); }
.cfg-row.toggle { gap: 10px; }
.cfg-val { color: rgb(var(--acc3)); font-size: 13px; }
.cfg-panel input[type="text"], .cfg-panel select { font: inherit; font-size: 14px; color: var(--ink);
  background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; }
.cfg-panel select { flex: 1; }
.cfg-panel input[type="range"] { flex: 1; accent-color: #2e8cff; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 9px 14px; font-size: 13px; }
.btn.ghost:hover { border-color: rgba(255,255,255,.35); }
/* v6.07 — Saved places + Detected location (Settings → My location) */
.sp-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.sp-label { flex: 0 0 120px; }
.sp-addr { flex: 1 1 auto; min-width: 0; }
.cfg-panel .sp-label, .cfg-panel .sp-addr { font: inherit; font-size: 13.5px; color: var(--ink); background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.sp-del { flex: 0 0 auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; padding: 4px 8px; border-radius: 7px; }
.sp-del:hover { color: #ff8a8a; background: rgba(255,90,90,.12); }
#addPlaceBtn { margin-top: 6px; }
.cfg-detected { font-size: 13.5px; line-height: 1.5; padding: 11px 13px; border-radius: 10px; background: rgba(120,160,220,.1); border: 1px solid rgba(120,160,220,.2); margin: 8px 0; }
.cfg-detected small { color: var(--muted); }
.cfg-detbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.cfg-foot { padding-top: 18px; display: flex; justify-content: flex-end; }

/* ───────── mic level meter ───────── */
.meter { flex: 1; height: 12px; border-radius: 6px; background: rgba(255,255,255,.08); border: 1px solid var(--line); overflow: hidden; }
.meter-fill { height: 100%; width: 0; background: linear-gradient(90deg, #2e8cff, #40dc8c); transition: width .05s linear; }

/* ───────── main-page live input meter ───────── */
.live-meter { width: 220px; max-width: 70vw; height: 6px; border-radius: 4px; margin: 12px auto 0;
  background: rgba(255,255,255,.08); border: 1px solid var(--line); overflow: hidden; }
.live-meter .meter-fill { height: 100%; width: 0; background: linear-gradient(90deg, #2e8cff, #40dc8c); transition: width .05s linear; }

/* fix: honour the hidden attribute (display:flex above was overriding it) */
.cfg-overlay[hidden] { display: none !important; }

/* ── settings modal polish: wider panel + dark-themed native controls ── */
:root { color-scheme: dark; }                      /* native dropdowns/slider/checkbox render dark */
.cfg-panel { max-width: 640px; }
.cfg-panel select, .cfg-panel input[type="text"] { min-width: 0; max-width: 100%; }
.cfg-panel select { flex: 1 1 auto; text-overflow: ellipsis; background: #0d1526; color: var(--ink); }
.cfg-panel select option { background: #0d1526; color: var(--ink); }
.cfg-row { flex-wrap: wrap; }

/* ───────── training session: pulsing Stop button + tag counter ───────── */
.btn.train.recording { background: #7a1f2b; animation: recpulse 1.2s ease-in-out infinite; }
@keyframes recpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(214,58,74,.55); } 50% { box-shadow: 0 0 0 9px rgba(214,58,74,0); } }
.chip-count { align-self: center; font-size: 11.5px; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; padding: 4px 10px; }

/* ───────── image results in feed cards ───────── */
.card .imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.card .imgs a { position: relative; display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: rgba(0,0,0,.3); }
.card .imgs img { display: block; width: 100%; height: 130px; object-fit: cover; transition: transform .15s ease; }
.card .imgs a:hover img { transform: scale(1.04); }
/* number badge on each result — "say show me image 3" */
.card .imgs .imgnum { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.72); color: #fff;
  font-weight: 700; font-size: 12.5px; border-radius: 50%; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none; }

/* ───────── token usage ───────── */
.card .tok { margin-top: 10px; font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }
.tok-badge { text-align: center; margin-bottom: 12px; font-size: 12.5px; color: rgb(var(--acc3)); }

/* ───────── history button + panel ───────── */
.hist-btn { right: 68px; font-size: 18px; }          /* sits left of the ⚙ button */
.hist-panel { max-width: 720px; }
.hist-tabs { display: flex; gap: 8px; padding: 14px 0 4px; }
.hist-tabs .btn.active { border-color: #2e8cff; color: rgb(var(--acc3)); background: rgba(46,140,255,.12); }
.hist-feed { margin: 14px 0 0; }
.hist-panel .pager { margin: 16px 0 4px; justify-content: center; }

/* ───────── version + token pill (top-right) + version history modal ─────────
   v3.36: the version and token-usage % now live together in one pill top-right,
   e.g. "v3.36 | 5.48%". Click for the version history. */
.ver-btn { position: fixed; top: 16px; right: 16px; z-index: 20;
  background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 15px; font: inherit; font-size: 12.5px; letter-spacing: .04em;
  cursor: pointer; transition: background .2s, border-color .2s; white-space: nowrap; }
.ver-btn:hover { background: rgba(40,60,90,.9); border-color: rgba(46,140,255,.5); }
/* v4.52 — unseen-release dot */
.ver-btn.has-update::after { content: ''; position: absolute; top: -3px; right: -3px; width: 11px; height: 11px;
  border-radius: 50%; background: #ff5a5a; border: 2px solid #0b1020; box-shadow: 0 0 8px rgba(255,90,90,.9);
  animation: verPulse 1.6s ease-in-out infinite; }
@keyframes verPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .7; } }
.ver-btn .vb-tok { color: #eaf1ff; opacity: .85; }
.ver-btn .vb-sep { opacity: .4; margin: 0 6px; }

/* v3.57 — top-left Menu button (mirrors the version pill) + horizontal menu bar */
.menu-btn { position: fixed; top: 16px; left: 16px; z-index: 120;
  background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 15px; font: inherit; font-size: 12.5px; letter-spacing: .04em; cursor: pointer; white-space: nowrap;
  transition: background .2s, border-color .2s; }
.menu-btn:hover, .menu-btn.open { background: rgba(40,60,90,.9); border-color: rgba(46,140,255,.5); }
.menu-bar { position: fixed; top: 54px; left: 16px; z-index: 120; display: flex; flex-wrap: wrap; gap: 8px;
  max-width: min(64vw, 760px); padding: 12px; border-radius: 14px;
  background: rgba(10,16,30,.96); border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(0,0,0,.55); }
.menu-bar[hidden] { display: none; }
.mbi { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 68px; padding: 9px 4px;
  border-radius: 10px; background: rgba(14,22,40,.6); border: 1px solid var(--line); color: #cfe0ff; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s; }
.mbi:hover { background: rgba(46,140,255,.9); border-color: rgba(46,140,255,.9); color: #fff; }
.mbi .material-symbols-outlined { font-size: 23px; }
.mbi-label { font-size: 10.5px; font-weight: 600; line-height: 1; text-align: center; }
.mbi.mbi-on { border-color: rgba(40,220,140,.8); color: #6ff0ad; box-shadow: 0 0 10px rgba(40,220,140,.35); }
.mbi.mbi-muted { border-color: rgba(255,74,74,.75); color: #ff7676; }
.orb.orb-muted { filter: saturate(.35) brightness(.8); }   /* subtle mute indicator on the orb */

/* widget layout preview (Settings → Widgets) */
.wdg-preview { display: flex; gap: 14px; margin: 4px 0 14px; }
.wdgp-side { flex: 1; min-width: 0; }
.wdgp-title { font-size: 11px; color: rgb(var(--acc3)); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.wdgp-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 30px; gap: 4px; grid-auto-flow: row dense;
  background: rgba(0,0,0,.25); border: 1px dashed var(--line); border-radius: 8px; padding: 5px; min-height: 40px; }
.wdgp-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; overflow: hidden;
  background: rgba(46,140,255,.18); border: 1px solid rgba(46,140,255,.5); border-radius: 6px; color: #cfe4ff; }
.wdgp-cell .material-symbols-outlined { font-size: 15px; }
.wdgp-t { font-size: 8.5px; line-height: 1; text-align: center; opacity: .85; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wdgp-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 12px; align-self: center; }

.ver-panel { max-width: min(1100px, 94vw); max-height: calc(100vh - 56px); overflow-y: auto; }
.ver-body { padding: 6px 0 4px; }
.ver-entry { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 20px 14px; margin: 14px 0; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.ver-entry.latest { border-color: rgba(46,140,255,.55); box-shadow: 0 8px 28px rgba(46,140,255,.16); }
.ver-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ver-chip { background: linear-gradient(180deg, #2e8cff, #1f6fe0); color: #fff; font-weight: 700;
  font-size: 13px; border-radius: 999px; padding: 4px 13px; letter-spacing: .03em; }
.ver-entry.latest .ver-chip { background: linear-gradient(180deg, #40dc8c, #23a866); }
.ver-title { font-weight: 600; font-size: 15px; color: #eaf1ff; }
.ver-date { margin-left: auto; color: var(--muted); font-size: 12px; }
.ver-entry ul { margin: 10px 0 0 4px; padding-left: 18px; color: var(--ink); font-size: 13.5px; line-height: 1.6; }
.ver-entry li { margin: 4px 0; }
.ver-panel .pager { margin: 16px 0 6px; justify-content: center; }
/* v4.83 — Version History as a board widget: compact entries + pager pinned inside the widget body */
.ver-widget .ver-entry { padding: 10px 12px 9px; margin: 8px 0; border-radius: 11px; box-shadow: none; }
.ver-widget .ver-entry:first-child { margin-top: 2px; }
.ver-widget .ver-title { font-size: 13px; }
.ver-widget .ver-entry ul { font-size: 12.5px; line-height: 1.5; }
.ver-widget .res-page { margin: 0 0 6px; }
/* v4.84 — Loan repayment calculator widget */
.loan-box { display: flex; flex-direction: column; gap: 9px; }
.loan-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.loan-in { display: flex; align-items: center; gap: 5px; background: rgba(10,18,34,.55);
  border: 1px solid rgba(120,160,220,.28); border-radius: 9px; padding: 6px 10px; }
.loan-in i { font-style: normal; opacity: .7; font-size: 12.5px; }
.loan-in input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; }
.loan-freq { display: flex; gap: 6px; }
.loan-fq { flex: 1 1 0; font: inherit; font-size: 12px; padding: 6px 4px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(120,160,220,.28); background: rgba(120,160,220,.1); color: var(--ink); }
.loan-fq.on { border-color: rgba(46,140,255,.6); background: rgba(46,140,255,.22); color: #fff; }
.loan-out { margin-top: 3px; }
.loan-hint { opacity: .65; font-size: 12.5px; padding: 6px 0; }
.loan-big { display: flex; align-items: baseline; gap: 8px; font-size: 27px; font-weight: 800; color: #eaf1ff; }
.loan-big small { font-size: 12.5px; font-weight: 500; opacity: .7; }
.loan-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.loan-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
  padding: 6px 9px; background: rgba(120,160,220,.08); border-radius: 8px; }
.loan-row b { font-weight: 700; }
.loan-row-sub { background: transparent; font-size: 11.5px; opacity: .7; padding: 2px 9px; }
/* v4.85 — YouTube widget */
.ytw-body { display: flex; flex-direction: column; gap: 7px; }
.ytw-row { display: flex; gap: 6px; }
.ytw-sel { flex: 1 1 0; min-width: 0; font: inherit; font-size: 12.5px; padding: 5px 7px; border-radius: 8px;
  background: rgba(10,18,34,.6); color: var(--ink); border: 1px solid rgba(120,160,220,.28); }
.ytw-stage { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 10px; overflow: hidden; }
.ytw-frame { width: 100%; height: 100%; border: 0; display: block; }
.ytw-ctl { display: flex; gap: 6px; justify-content: center; }
.ytw-skip { font: inherit; font-size: 15px; line-height: 1; padding: 5px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(120,160,220,.3); background: rgba(120,160,220,.12); color: var(--ink); }
.ytw-skip:hover { background: rgba(120,160,220,.24); }
.ytw-empty { padding: 18px 10px; text-align: center; opacity: .8; font-size: 13px; line-height: 1.7; }
.ytw-setup { margin-top: 8px; font: inherit; font-size: 12.5px; padding: 6px 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(46,140,255,.55); background: rgba(46,140,255,.2); color: #fff; }
/* v4.85 — YouTube channel manager, shown inside the widget's ⚙ options */
.ytm { margin-top: 2px; }
.ytm-h { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .7; margin-bottom: 6px; }
.ytm-srow { display: flex; gap: 6px; margin-bottom: 8px; }
.ytm-srow .wdg-opttxt { flex: 1 1 auto; }
.ytm-btn { font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(46,140,255,.5); background: rgba(46,140,255,.18); color: #fff; }
.ytm-results { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; margin-bottom: 8px; }
.ytm-results:empty { display: none; }
.ytm-list { display: flex; flex-direction: column; gap: 4px; }
.ytm-chan { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; background: rgba(120,160,220,.08); }
.ytm-chan img, .ytm-noimg { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; background: rgba(120,160,220,.2); object-fit: cover; }
.ytm-name { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ytm-add, .ytm-del { font: inherit; font-size: 13px; width: 30px; height: 28px; border-radius: 7px; cursor: pointer; flex: 0 0 auto;
  border: 1px solid rgba(120,160,220,.3); background: rgba(120,160,220,.14); color: var(--ink); }
.ytm-add.on { border-color: rgba(64,220,140,.6); background: rgba(64,220,140,.2); }
.ytm-hint { opacity: .6; font-size: 12px; padding: 4px 2px; }

/* ───────── PURPLE = awake window (wake word said; actively listening for questions) ───────── */
.orb.mode-awake { --c: 168,85,247; }
.orb.mode-awake .core { animation-duration: 2.6s; }
.orb.mode-awake .ring { animation-duration: 3.4s; }
/* guided breathing — slow, soft, calming; the orb also scales via inline transform per phase */
body.breathing #orb { --c: 150,110,235; will-change: transform; }
body.breathing #orb .core { animation-duration: 9s; }
body.breathing #orb .spinner { opacity: 0; }
body.breathing #orb .ring { animation-duration: 9s; }
body.breathing #status { font-size: 22px; letter-spacing: .05em; opacity: .95; }
.legend .k.awake { background: rgb(168,85,247); }

/* ───────── voice-unlock hint (Chrome mutes TTS until the page is tapped once) ───────── */
.voice-hint { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30;
  background: rgba(18,26,44,.95); color: #ffd9a0; border: 1px solid rgba(255,150,46,.5);
  border-radius: 999px; padding: 10px 20px; font-size: 13.5px; cursor: pointer;
  box-shadow: 0 8px 26px rgba(0,0,0,.5); animation: hintpulse 2s ease-in-out infinite; }
@keyframes hintpulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.04); } }

/* ───────── full-screen picture / map viewer ───────── */
.viewer { position: fixed; inset: 0; z-index: 70; background: rgba(2,4,10,.92); backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; }
.viewer[hidden] { display: none !important; }   /* same hidden-vs-display gotcha as the overlays */
.viewer-body { display: flex; align-items: center; justify-content: center; max-width: 94vw; max-height: 80vh; }
.viewer-body img { max-width: 94vw; max-height: 80vh; border-radius: 12px; box-shadow: 0 24px 90px rgba(0,0,0,.75); animation: rise .3s ease; }
.viewer-map { width: min(1100px, 94vw); height: min(680px, 76vh); border: 0; border-radius: 12px;
  background: #0d1526; box-shadow: 0 24px 90px rgba(0,0,0,.75); }
.viewer-cap { margin-top: 14px; color: var(--muted); font-size: 13px; text-align: center; max-width: 92vw; }
.viewer-x { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(18,26,44,.85); color: #fff; border: 1px solid var(--line); font-size: 18px; cursor: pointer; }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%;
  background: rgba(18,26,44,.85); color: #fff; border: 1px solid var(--line); font-size: 30px; line-height: 1; cursor: pointer; }
.viewer-nav.prev { left: 18px; } .viewer-nav.next { right: 18px; }
.viewer-x:hover, .viewer-nav:hover { background: rgba(46,140,255,.45); }

/* ───────── directions route canvas ───────── */
.viewer-canvas { border-radius: 12px; box-shadow: 0 24px 90px rgba(0,0,0,.75); max-width: 94vw; }

/* ───────── settings: left-menu layout ───────── */
.cfg-wide { max-width: min(1080px, 94vw); }   /* v3.57: ~20% wider — settings had needless cramping */
.cfg-layout { display: flex; gap: 20px; padding-top: 14px; min-height: 400px; }
.cfg-nav { display: flex; flex-direction: column; gap: 6px; flex: 0 0 172px; border-right: 1px solid var(--line); padding-right: 14px; }
.cfg-tab { text-align: left; font: inherit; font-size: 14px; background: transparent; color: var(--muted);
  border: 1px solid transparent; border-radius: 10px; padding: 10px 14px; cursor: pointer; transition: background .15s, color .15s; }
.cfg-tab:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.cfg-tab.active { color: rgb(var(--acc3)); background: rgba(46,140,255,.12); border-color: rgba(46,140,255,.4); }
.cfg-content { flex: 1; min-width: 0; }
.cfg-page > .cfg-sec:first-child { padding-top: 4px; }
@media (max-width: 680px) {
  .cfg-layout { flex-direction: column; min-height: 0; }
  .cfg-nav { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 10px; flex: 0 0 auto; }
  .cfg-tab { white-space: nowrap; }
}

/* ───────── usage panel ───────── */
.use-stats { display: flex; gap: 12px; margin: 10px 0 12px; flex-wrap: wrap; }
.use-stat { flex: 1; min-width: 130px; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-align: center; }
.use-stat b { display: block; font-size: 18px; color: rgb(var(--acc3)); margin-bottom: 3px; }
.use-stat span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.use-total-bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.08); border: 1px solid var(--line); overflow: hidden; margin-bottom: 6px; }
.use-total-bar > div { height: 100%; background: linear-gradient(90deg, #2e8cff, #a855f7); }
.use-h { margin: 16px 0 8px; font-size: 13px; color: var(--ink); font-weight: 600; }
.use-row { display: flex; align-items: center; gap: 10px; margin: 5px 0; }
.use-day { flex: 0 0 58px; font-size: 11.5px; color: var(--muted); text-align: right; }
.use-bar { flex: 1; height: 12px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.use-fill { height: 100%; background: linear-gradient(90deg, #2e8cff, #40dc8c); }
.use-val { flex: 0 0 72px; font-size: 11.5px; color: var(--muted); }

/* ───────── notes ───────── */
.btn.notes { background: transparent; color: #cfe0ff; border: 1px solid var(--line); }
.btn.notes:hover { border-color: rgba(46,140,255,.6); color: #fff; }
.cfg-panel.notes-panel { max-width: 1500px; width: 96vw; }   /* span the screen, not a narrow modal */
.notes-body { padding: 8px 0 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-content: start; max-height: 72vh; overflow-y: auto; }
.note-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin: 0; }
.note-head { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); margin-bottom: 8px; flex-wrap: wrap; }
.note-head .grow { flex: 1; }
.note-btn { font: inherit; font-size: 12px; background: transparent; color: #cfe0ff; border: 1px solid var(--line); border-radius: 7px; padding: 4px 12px; cursor: pointer; }
.note-btn:hover { border-color: rgba(46,140,255,.6); }
.note-btn.del { color: #ff9c9c; }
.note-btn.del:hover { border-color: rgba(255,74,74,.6); }
.note-btn.claude { color: #c9b6ff; border-color: rgba(168,85,247,.45); }   /* v5.12 — send-to-Claude */
.note-btn.claude:hover { border-color: rgba(168,85,247,.8); background: rgba(168,85,247,.14); }
.nw-b.nw-del { color: #ff9c9c; }   /* v5.12 — delete a note from its row */
.nw-b.nw-del:hover { background: rgba(255,74,74,.16); border-color: rgba(255,74,74,.5); }
.note-btn.play { color: #8fe6bf; }
.note-btn.play:hover { border-color: rgba(64,220,140,.6); color: #b6f2d5; }
.note-text { white-space: pre-wrap; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.note-edit textarea { width: 100%; min-height: 110px; font: inherit; font-size: 14px; color: var(--ink); background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 8px; padding: 10px; box-sizing: border-box; }
.note-edit-row { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; }

/* ───────── Activate toggle: BLUE = active, GREY = off ───────── */
.activate.off { background: linear-gradient(180deg, #4b5563, #374151); color: #cbd5e6; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.activate.off:hover { box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.activate.off .mic-dot { animation: none; background: #9aa4b8; box-shadow: none; }

/* ───────── slideshow transition (fade + gentle zoom) ───────── */
.viewer.slideshow .viewer-body img { animation: slidein .7s ease; }
@keyframes slidein { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }

/* ───────── camera + my photos ───────── */
.viewer-cam { max-width: 94vw; max-height: 78vh; border-radius: 12px; box-shadow: 0 24px 90px rgba(0,0,0,.75); background: #000; }
.viewer.cam-flash::after { content: ''; position: absolute; inset: 0; background: #fff; pointer-events: none; animation: camflash .4s ease-out forwards; }
@keyframes camflash { from { opacity: .9; } to { opacity: 0; } }
.photos-panel { max-width: 820px; }
.photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; padding: 10px 0; }
.photo-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.photo-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: pointer; transition: transform .15s ease; }
.photo-card img:hover { transform: scale(1.03); }
.photo-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 11.5px; color: var(--muted); }

/* ───────── buzz words dictionary ───────── */
.saved-btn { right: 120px; font-size: 16px; }       /* sits left of 🕘 */
.buzz-btn { right: 172px; font-size: 17px; }        /* sits left of 📌 */
.fs-btn { right: 224px; font-size: 15px; }          /* fullscreen — sits left of 📖 */
.fs-btn:hover { transform: none; }                   /* no rotate — it's not a gear */
.fs-btn.on { background: rgba(46,140,255,.28); border-color: rgba(46,140,255,.6); color: #cfe4ff; }
.prog-btn { right: 380px; font-size: 16px; }        /* programming log */
.clear-btn { right: 328px; font-size: 17px; }      /* clear the screen — near fullscreen */
.showoff-btn { right: 276px; font-size: 16px; }      /* 🔊 voice demo — sits left of ⛶ */
.showoff-btn:hover { transform: none; background: rgba(46,140,255,.28); border-color: rgba(59,130,246,.6); }

/* 🔊 voice show-off modal (site blue) */
.showoff-ov { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  background: rgba(6,10,20,.72); backdrop-filter: blur(3px); padding: 20px; }
.showoff-ov[hidden] { display: none !important; }
.showoff-card { position: relative; width: min(840px, 96vw); max-height: 92vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--card2, #1b2540), var(--bg2, #0e1626));
  border: 1px solid var(--line, #26324c); border-radius: 22px; padding: 33px 33px 30px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 40px var(--glow, rgba(59,130,246,.2)); }
.showoff-card h3 { margin: 0 0 14px; font-size: 28px; color: var(--brand-2, #60a5fa); }
.showoff-x { position: absolute; top: 16px; right: 20px; background: none; border: 0; color: var(--ink); font-size: 26px; cursor: pointer; opacity: .7; }
.showoff-x:hover { opacity: 1; }
.showoff-status { font-size: 14px; color: var(--muted, #9fb0c8); margin-bottom: 16px; min-height: 20px; line-height: 1.45; }
.showoff-status.loading { color: var(--brand-2, #60a5fa); }
.showoff-status.loading::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%;
  background: var(--brand, #3b82f6); vertical-align: 0; animation: soblink .8s ease-in-out infinite; }
@keyframes soblink { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.ladder-panel { position: fixed; top: 70px; left: 16px; width: 300px; max-width: 42vw; max-height: calc(100vh - 90px); overflow-y: auto; z-index: 60; background: linear-gradient(180deg, var(--card2,#1b2540), var(--bg2,#0e1626)); border: 1px solid var(--line,#26324c); border-radius: 16px; padding: 14px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.ladder-panel[hidden] { display: none !important; }
.ladder-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--brand-2,#60a5fa); margin-bottom: 10px; font-size: 15px; }
.ladder-head button { background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; }
.lad-row { padding: 6px 8px; border-radius: 8px; font-size: 13.5px; color: var(--ink); border-bottom: 1px solid rgba(255,255,255,.05); }
.lad-row.fav { background: rgba(59,130,246,.20); color: #cfe0ff; font-weight: 700; }
.notelive-edit { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; background: var(--bg2,#0e1626); border: 1px solid var(--line,#26324c); border-radius: 12px; color: var(--ink); padding: 12px 14px; }
.notelive-edit:focus { outline: none; border-color: var(--brand,#3b82f6); }
@media (max-width: 680px) { .ladder-panel { left: 8px; width: min(88vw, 320px); top: 58px; } }
.mem-table { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.mem-row.held { opacity: .5; }
.mem-row.held .mem-text { text-decoration: line-through; }
.mem-row { display: flex; align-items: center; gap: 10px; background: var(--bg2, #0e1626); border: 1px solid var(--line, #26324c); border-radius: 12px; padding: 10px 12px; }
.mem-badge { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.mem-badge.fact { background: rgba(59,130,246,.18); color: var(--brand-2, #60a5fa); }
.mem-badge.dir { background: rgba(245,158,11,.18); color: #fbbf24; }
.mem-text { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--ink); word-break: break-word; }
.mem-when { flex: 0 0 auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.mem-del { flex: 0 0 auto; border: 0; background: rgba(255,255,255,.06); color: var(--muted); border-radius: 8px; cursor: pointer; padding: 6px 9px; font-size: 14px; }
.mem-del:hover { background: rgba(244,63,94,.2); color: #fb7185; }
.cfg-add select { padding: 11px 12px; border-radius: 12px; background: var(--bg2, #0e1626); border: 1px solid var(--line, #26324c); color: var(--ink); font: inherit; }
.showoff-voicerow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.showoff-voicerow span { font-size: 14px; color: var(--muted, #9fb0c8); flex: 0 0 auto; }
.showoff-voicerow select { flex: 1 1 auto; padding: 11px 12px; border-radius: 12px; background: var(--bg2, #0e1626);
  border: 1px solid var(--line, #26324c); color: var(--ink); font: inherit; font-size: 15px; }
.showoff-card textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 140px; padding: 16px 18px;
  background: var(--bg2, #0e1626); border: 1px solid var(--line, #26324c); border-radius: 14px; color: var(--ink);
  font-size: 17px; line-height: 1.45; font-family: inherit; }
.showoff-card textarea:focus { outline: none; border-color: var(--brand, #3b82f6); box-shadow: 0 0 16px var(--glow, rgba(59,130,246,.35)); }
.showoff-btns { display: flex; gap: 12px; margin-top: 18px; }
.showoff-play { flex: 2 1 0; padding: 17px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, #3b82f6, #2563eb); color: #fff; font-size: 18px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(59,130,246,.35); transition: transform .1s ease, opacity .2s ease; }
.showoff-play:hover { transform: translateY(-1px); }
.showoff-play:disabled { opacity: .5; cursor: default; transform: none; }
.showoff-save { flex: 1 1 0; padding: 17px; border: 1px solid rgba(59,130,246,.45); border-radius: 14px; cursor: pointer;
  background: rgba(59,130,246,.12); color: var(--brand-2, #60a5fa); font-size: 15px; font-weight: 700; transition: background .15s ease; }
.showoff-save:hover { background: rgba(59,130,246,.22); }
.showoff-listwrap { margin-top: 22px; }
.showoff-listhead { font-size: 12px; letter-spacing: .6px; text-transform: uppercase; opacity: .55; margin-bottom: 10px; }
.showoff-list { display: flex; flex-direction: column; gap: 9px; }
.showoff-list:empty::after { content: 'No saved messages yet — type one above and press “Save as message”.'; font-size: 13px; opacity: .5; }
.showoff-msg { display: flex; align-items: center; gap: 11px; background: rgba(10,14,26,.6);
  border: 1px solid var(--line, #26324c); border-radius: 13px; padding: 11px 13px; }
.showoff-msg .mname { font-weight: 700; color: var(--brand-2, #60a5fa); flex: 0 0 auto; font-size: 14px; }
.showoff-msg .mtext { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; opacity: .82; }
.showoff-msg button { flex: 0 0 auto; border: 0; border-radius: 9px; cursor: pointer; padding: 7px 10px; font-size: 14px;
  background: rgba(59,130,246,.14); color: var(--brand-2, #60a5fa); transition: background .15s ease; }
.showoff-msg button:hover { background: rgba(59,130,246,.28); }
.showoff-msg .m-play { background: rgba(59,130,246,.3); }

/* ===== Personality settings ===== */
.trait-list { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.trait-row { display: flex; flex-direction: column; gap: 4px; }
.trait-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted, #9fb0c8); }
.trait-ends .lo, .trait-ends .hi { max-width: 46%; }
.trait-ends .hi { text-align: right; }
.trait-row input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(46,140,255,.5), rgba(168,85,247,.5), rgba(244,114,182,.6)); outline: none; }
.trait-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid #a855f7; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.trait-row input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #a855f7; cursor: pointer; }
.tag-pool { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 12px; }
.tag-grp-h { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; opacity: .5; margin-bottom: 6px; }
.tag-grp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-chip { cursor: pointer; user-select: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px;
  background: rgba(255,255,255,.04); color: var(--ink); transition: all .12s ease; }
.tag-chip:hover { border-color: rgba(168,85,247,.6); }
.tag-chip.like { background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.6); color: #bbf7d0; }
.tag-chip.dislike { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.55); color: #fecaca; }
.tag-chip .tag-state { opacity: .9; margin-right: 3px; }
/* personality sub-tabs (Traits / Attributes / Likes) */
.pers-subnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.pers-tab { background: rgba(255,255,255,.04); color: var(--muted, #9fb0c8); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.pers-tab.active { background: rgba(168,85,247,.22); border-color: rgba(168,85,247,.6); color: #eadcff; }
.pers-sub[hidden] { display: none !important; }
.attr-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.attr-row { display: flex; flex-direction: column; gap: 3px; }
.attr-row.wide { grid-column: 1 / -1; }
.attr-row label { font-size: 11.5px; letter-spacing: .3px; text-transform: uppercase; opacity: .55; }
.attr-row input { background: rgba(10,16,30,.7); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 13.5px; }
.attr-row input:focus { outline: none; border-color: rgba(168,85,247,.6); }
@media (max-width: 560px) { .attr-list { grid-template-columns: 1fr; } }
.tag-add-row { flex-wrap: wrap; gap: 8px; align-items: center; }
.tag-add-row #tagAdd { flex: 1 1 160px; }
.tag-cat-sel { background: rgba(10,16,30,.7); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 13px; }
/* Notes / Photos / Console live in the top icon row on every screen size (v3.34) */
.notes-btn-m   { right: 432px; font-size: 16px; }
.photos-btn-m  { right: 484px; font-size: 16px; }
.console-btn   { right: 536px; font-size: 16px; }
/* 🔈 mute toggle (v3.35) — RED when muted: no TTS calls, answers written on screen */
.mute-btn      { right: 588px; font-size: 16px; }
.mute-btn.muted { background: rgba(120,18,18,.88); border-color: rgba(255,74,74,.75); color: #ff7676;
  box-shadow: 0 0 12px rgba(255,74,74,.4); }
.mute-btn.muted:hover { background: rgba(150,24,24,.92); }
.foot-ver { display: none; background: rgba(18,26,44,.8); color: rgb(var(--acc3)); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 12px; letter-spacing: .04em; cursor: pointer; }
.foot-ver:hover { border-color: rgba(46,140,255,.5); }

/* ───────── mobile: centered top icon row · MAX pushed down · version in footer ───────── */
@media (max-width: 680px) {
  .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30;
    display: flex; justify-content: center; align-items: center; gap: 12px;
    padding: 10px 8px; background: linear-gradient(180deg, rgba(6,10,20,.95) 55%, rgba(6,10,20,0)); }
  .topbar .cfg-btn { position: static; top: auto; right: auto; left: auto; width: 40px; height: 40px; font-size: 18px; }
  .topbar .cfg-btn:hover { transform: none; }
  .notes-btn-m, .photos-btn-m { display: inline-flex; align-items: center; justify-content: center; }
  .head { margin-top: 60px; }                       /* clear the fixed row + gap before MAX */
  .tagline { display: none; }
  .ver-btn { display: none; }                       /* version relocates to the footer */
  .foot { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  .foot-ver { display: inline-block; }
  .legend { justify-content: center; }
  .timer-tray { top: 58px; }                        /* keep timer chips clear of the icon row */
}
.buzz-panel { max-width: 760px; }
.buzz-body { padding: 6px 0 4px; }
.bw-group { margin: 16px 0 22px; }
.bw-group h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: rgb(var(--acc3)); letter-spacing: .02em; }
.bw-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 9px 0; border-bottom: 1px dashed rgba(140,160,200,.12); }
.bw-item:last-child { border-bottom: none; }
.bw-say { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 1 auto; min-width: 220px; }
.bw-chip { background: rgba(168,85,247,.14); border: 1px solid rgba(168,85,247,.4); color: #e3d0ff;
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; }
.bw-does { flex: 1 1 260px; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ───────── live note dictation window + copy button ───────── */
.notelive-panel { max-width: 680px; }
.rec-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #ff4a4a;
  margin-right: 10px; vertical-align: 1px; animation: recblink 1.2s ease-in-out infinite; }
@keyframes recblink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.notelive-text { min-height: 180px; max-height: 46vh; overflow-y: auto; background: rgba(0,0,0,.35);
  border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 14px 0 6px;
  font-size: 16px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; }
.nl-interim { color: var(--muted); font-style: italic; }
.notelive-foot { display: flex; justify-content: space-between; gap: 10px; }
.note-btn.ok { color: #8fe6bf; border-color: rgba(64,220,140,.5); }

/* ───────── "what can MAX do" tip bubbles (dark speech bubbles down both sides) ───────── */
.tips { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.tips[hidden] { display: none !important; }
/* two dense columns down the sides — packs many suggestions */
.tips-col { position: fixed; top: 52px; bottom: 12px; width: min(30vw, 340px); display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.tips-col-left { left: 12px; align-items: flex-start; }
.tips-col-right { right: 12px; align-items: flex-end; }
.tip-bubble { max-width: 100%; pointer-events: auto; cursor: pointer;
  background: linear-gradient(180deg, rgba(24,34,56,.96), rgba(13,21,38,.96));
  border: 1px solid rgba(168,85,247,.4); border-radius: 13px; padding: 8px 12px;
  font-size: 12.5px; line-height: 1.35; color: var(--ink);
  box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 0 12px rgba(168,85,247,.1);
  opacity: 0; animation: tipin .4s ease forwards; transition: transform .12s ease;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tip-bubble:hover { transform: scale(1.04); border-color: rgba(168,85,247,.75); }
@keyframes tipin { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .tips-col { width: 45vw; top: 46px; } .tip-bubble { font-size: 11px; padding: 6px 9px; } }

/* contextual follow-up suggestions — reminder bubbles down the RIGHT side */
.followups { position: fixed; top: 104px; bottom: 12px; right: 12px; width: min(30vw, 320px);
  z-index: 46; display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
  pointer-events: none; overflow: hidden; }   /* starts below the ⚙ + version badge (top-right) */
.followups[hidden] { display: none !important; }   /* display:flex overrides [hidden] otherwise */
.fu-bubble { max-width: 100%; pointer-events: auto; cursor: pointer;
  background: linear-gradient(180deg, rgba(30,22,60,.97), rgba(18,13,40,.97));
  border: 1px solid rgba(168,85,247,.6); border-radius: 13px; padding: 8px 13px;
  font-size: 13px; line-height: 1.3; color: var(--ink); white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 14px rgba(168,85,247,.2);
  opacity: 0; animation: tipin .4s ease forwards; transition: transform .12s ease;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.fu-bubble:hover { transform: scale(1.04); border-color: rgba(168,85,247,.9); }
.fu-say { opacity: .65; }
@media (max-width: 760px) { .followups { width: 52vw; top: 92px; } .fu-bubble { font-size: 11.5px; padding: 6px 10px; } }

/* ───────── compact camera dock ("identify this"): ~60% smaller, bottom-centre,
   page + orb stay visible behind ───────── */
.viewer.mini { background: transparent; backdrop-filter: none; pointer-events: none;
  justify-content: flex-end; padding-bottom: 18px; }
.viewer.mini .viewer-body, .viewer.mini .viewer-cap, .viewer.mini .viewer-x { pointer-events: auto; }
.viewer.mini .viewer-cam { max-height: 30vh; max-width: min(480px, 72vw);
  border: 1px solid rgba(168,85,247,.45); box-shadow: 0 14px 50px rgba(0,0,0,.65); }
.viewer.mini .viewer-cap { font-size: 11.5px; margin-top: 8px;
  background: rgba(13,21,38,.85); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }
.viewer.mini .viewer-x { top: auto; bottom: 20px; right: 20px; width: 38px; height: 38px; font-size: 15px; }

/* ───────── note codes (A1, A2, …) ───────── */
.note-code { background: rgba(46,140,255,.16); border: 1px solid rgba(46,140,255,.5); color: rgb(var(--acc3));
  border-radius: 7px; padding: 2px 9px; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; }

/* ───────── compact version panel (voice-opened): bottom-centre, orb visible ───────── */
.cfg-overlay.ver-mini { background: transparent; backdrop-filter: none; pointer-events: none;
  align-items: flex-end; padding: 0 16px 18px; overflow: hidden; }
.ver-mini .ver-panel { pointer-events: auto; max-width: min(560px, 92vw); max-height: 44vh;
  overflow-y: auto; padding: 2px 18px 12px; border-color: rgba(168,85,247,.45);
  box-shadow: 0 14px 50px rgba(0,0,0,.65); }
.ver-mini .cfg-head { padding: 10px 0 6px; }
.ver-mini .cfg-head h2 { font-size: 15px; }
.ver-mini .ver-entry { padding: 11px 14px 9px; margin: 9px 0; }
.ver-mini .ver-entry ul { font-size: 12.5px; margin-top: 7px; }
.ver-mini .ver-title { font-size: 13.5px; }

/* ───────── refine voice panel ───────── */
.refine-overlay { z-index: 55; }
.refine-panel { max-width: 560px; }
.rf-row { display: flex; align-items: center; gap: 12px; margin: 13px 0; font-size: 14px; }
.rf-row > span { flex: 0 0 150px; color: var(--muted); }
.rf-row > span i { font-style: normal; font-size: 11px; opacity: .7; }
.rf-row input[type="range"] { flex: 1; accent-color: #a855f7; }
.rf-row .cfg-val { flex: 0 0 46px; text-align: right; }
.rf-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.rf-actions .activate { padding: 10px 20px; }
.rf-presets { display: flex; align-items: center; gap: 8px; margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; flex-wrap: wrap; }
.rf-presets > span { flex: 0 0 150px; color: var(--muted); }
.rf-presets select { flex: 1; min-width: 140px; background: rgba(10,16,30,.7); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-size: 14px; }
.rf-presets .btn { padding: 8px 12px; }

/* ───────── compact panel (voice-opened notes): bottom-centre, orb visible ───────── */
.cfg-overlay.mini-panel { background: transparent; backdrop-filter: none; align-items: flex-end; padding: 0 16px 20px; }
.cfg-overlay.mini-panel .cfg-panel { max-width: min(560px, 94vw); max-height: 46vh; overflow-y: auto; box-shadow: 0 14px 50px rgba(0,0,0,.7); border-color: rgba(46,140,255,.4); }
.cfg-overlay.mini-panel .note-text { max-height: 3.2em; overflow: hidden; }

/* ───────── article/news list in cards ───────── */
.artlist { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.artitem { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; border: 1px solid transparent; }
.artitem:hover { background: rgba(46,140,255,.1); border-color: var(--line); }
.art-n { flex: 0 0 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(46,140,255,.18); color: rgb(var(--acc3)); font-size: 12.5px; font-weight: 700; margin-top: 1px; }
.art-tw { display: flex; flex-direction: column; min-width: 0; }
.art-t { color: #cfe4ff; font-size: 13.5px; line-height: 1.35; }
.art-s { color: var(--muted); font-size: 11px; margin-top: 2px; }

/* cloned-voice (Fish Audio) inputs */
.fish-row { align-items: flex-start; }
.fish-cfg { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fish-cfg input { background: rgba(10,16,30,.7); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; }

/* Settings → YouTube channels */
.yt-search { display: flex; gap: 8px; margin: 8px 0 12px; }
.yt-search input { flex: 1; background: rgba(10,16,30,.7); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font-size: 14px; }
.yt-results { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.yt-subhead { margin: 14px 0 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.yt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.yt-chan { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(12,18,34,.55); }
.yt-ch-thumb { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #223; flex: 0 0 auto; }
.yt-ch-name { flex: 1; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-ch-add, .yt-ch-del { background: rgba(46,140,255,.14); color: rgb(var(--acc3)); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 12.5px; padding: 5px 10px; white-space: nowrap; }
.yt-ch-add:hover { border-color: rgba(46,140,255,.6); }
.yt-ch-add.added { background: rgba(70,220,140,.14); color: #58e59a; }
.yt-ch-del { background: none; color: var(--muted); }
.yt-ch-del:hover { color: #ff8a8a; background: rgba(255,90,90,.12); }

/* bottom-middle video player window */
.vidbox { position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 66; width: min(580px, 92vw);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.6); backdrop-filter: blur(8px); }
.vidbox[hidden] { display: none !important; }
.vidbox-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.vidbox-title { flex: 1; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vidbox-ctrls { display: flex; gap: 5px; }
.vidbox-btn { background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; cursor: pointer; font-size: 14px; padding: 4px 9px; line-height: 1; }
.vidbox-btn:hover { border-color: rgba(46,140,255,.55); background: rgba(46,140,255,.12); }
.vidbox-body { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vidbox-body iframe, .vidbox-body video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* numbered video result thumbnails */
.vidgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.vidthumb { position: relative; padding: 0 0 6px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; background: rgba(10,16,30,.5); text-align: left; }
.vidthumb:hover { border-color: rgba(46,140,255,.55); }
.vidthumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
.vidnum { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.72); color: #fff; font-weight: 700; font-size: 12px; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.vidcap { display: block; font-size: 11.5px; color: var(--ink); padding: 6px 8px 0; line-height: 1.25; max-height: 3.2em; overflow: hidden; }

/* "See on Google Images" link */
.gimg-link { display: inline-block; margin-top: 10px; font-size: 12.5px; color: rgb(var(--acc3)); text-decoration: none;
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 11px; background: rgba(46,140,255,.08); }
.gimg-link:hover { border-color: rgba(46,140,255,.55); color: #fff; }
#imgModalTitle .gimg-link { margin: 0 0 0 8px; font-size: 12px; vertical-align: middle; }

/* built-in "how do I…" guide steps */
.doclist { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.docstep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 9px 12px; border-radius: 10px;
  background: rgba(46,140,255,.07); border: 1px solid var(--line); }
.doc-say { color: #8fe6bf; font-weight: 700; font-size: 13.5px; }
.doc-do { color: #cfe0ff; font-weight: 600; font-size: 13.5px; }
.doc-then { color: var(--muted); font-size: 13px; }
.doc-then::before { content: "→ "; color: rgb(var(--acc3)); }

/* more-images grid modal */
.img-modal-panel { max-width: 900px; width: 94vw; }
.img-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; max-height: 70vh; overflow-y: auto; }
.img-cell { padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; background: rgba(10,16,30,.5); aspect-ratio: 1/1; }
.img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.img-cell:hover img { transform: scale(1.05); }

/* history — selection + hard delete */
.hist-toolbar { display: flex; align-items: center; gap: 14px; padding: 8px 2px 4px; }
.hist-selall { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.hist-selall input, .card-sel input { width: 16px; height: 16px; accent-color: #ff6b6b; }
.hist-del:not(:disabled) { color: #ff8a8a; border-color: rgba(255,120,120,.45); }
.card.selectable { position: relative; padding-left: 40px; }
.card-sel { position: absolute; left: 12px; top: 14px; }
.card-trash { position: absolute; right: 12px; top: 12px; background: none; border: 0; cursor: pointer; font-size: 15px; opacity: .55; padding: 2px 4px; border-radius: 6px; }
.card-trash:hover { opacity: 1; background: rgba(255,90,90,.15); }

/* ───────── type-to-MAX input (lives inside the 🖥 console modal, v3.34) ───────── */
.type-row { width: 100%; max-width: 620px; margin: 8px auto 0; display: flex; gap: 8px; }
.type-row input { flex: 1; font: inherit; font-size: 14px; color: var(--ink); background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; }
.type-row input:focus { outline: none; border-color: var(--brand, #2e8cff); }
.type-row .btn { border-radius: 999px; }

/* ── orb is the on/off toggle (v3.34): lit when active, dimmed grey when off ── */
.orb { cursor: pointer; }
.orb:hover { filter: brightness(1.18); }
.orb.orb-off { opacity: .55; }
.orb.orb-off:hover { opacity: .8; }

/* ── console modal (replaces the on-screen type box, v3.34) ── */
.console-panel { max-width: 560px; }
.console-panel .type-row { margin-top: 6px; }

/* ── web-search research panels — arranged AROUND the live MAX screen (v3.37) ──
   The container is a click-through overlay (pointer-events:none) so the orb/menu
   underneath still work; only the panels themselves are interactive. Three zones:
   LEFT (2 images + 2 text), MIDDLE under the orb (biography), RIGHT (1 big image
   + 2 text). */
.research-live { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
/* v4.67 — full-screen web search: blur whatever's on screen behind the results, reveal on close */
.research-bg { position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: rgba(4,8,16,.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); animation: rbgIn .2s ease; }
.research-bg[hidden] { display: none; }
@keyframes rbgIn { from { opacity: 0; } to { opacity: 1; } }
#research { z-index: 41; }        /* results sit ABOVE the blurred backdrop */
#researchClose { z-index: 42; }   /* the close ✕ stays sharp + clickable */
/* v3.45: small close button sitting just LEFT of the version pill (same look/size),
   instead of a big red circle. */
.research-x { position: fixed; top: 16px; right: 140px; z-index: 32; pointer-events: auto;
  background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 12.5px; line-height: 1; cursor: pointer; }
.research-x:hover { background: rgba(40,60,90,.9); border-color: rgba(46,140,255,.5); }
/* v3.47: zones no longer scroll (content is trimmed + paginated to fit) — no scrollbars */
.res-zone { position: fixed; top: 92px; pointer-events: auto; display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100vh - 104px); overflow: hidden; padding-bottom: 8px; }
.res-left  { left: 10px;  width: min(29vw, 430px); }
.res-right { right: 10px; width: min(33vw, 500px); }
/* centre pair — MAX's reply + biography, side by side, sitting just under the orb */
.res-mid   { left: 50%; transform: translateX(-50%); top: 60%; bottom: auto;
  width: min(48vw, 660px); max-height: 36vh; flex-direction: row; gap: 12px; align-items: stretch; }
.res-mid > .res-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
/* v3.45: text panels PAGINATE instead of scrolling (no inner scrollbars). */
.res-pagebody { }
.res-page { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 8px; }   /* v7.25 — pager arrows live at the TOP of the list */
.res-page button { background: rgba(30,44,70,.9); color: #cfe4ff; border: 1px solid var(--line); border-radius: 8px;
  width: 30px; height: 26px; font-size: 15px; line-height: 1; cursor: pointer; }
.res-page button:disabled { opacity: .35; cursor: default; }
.res-page .ind { color: var(--muted); font-size: 12px; min-width: 44px; text-align: center; }
/* v3.44/45: both the WIDGETS board and the WEB-SEARCH columns sit centred between the
   orb and each edge (not pinned to the far edges). Wide screens only; narrow stacks. */
@media (min-width: 1181px) {
  /* research has a wide centre pair (MAX + Biography), so its side columns are
     centred within the gap BESIDE that centre block (mid ≈ 660px → half ≈ 330). */
  #research .res-left  { left: calc(25vw - 175px); right: auto; transform: translateX(-50%); }
  #research .res-right { left: calc(75vw + 175px); right: auto; transform: translateX(-50%); }
}
/* v3.53 — WIDGETS on an invisible cell grid. Each side is a grid; widgets span W×H
   cells (size chosen per widget in Settings). Centre kept clear for MAX. No scrollbars —
   each widget fits the cells it's given (content clips, so pick a size that suits). */
/* denser widget grid — more columns + more vertical room the wider the screen */
/* comfortable side gutters (no edge-hugging) at every width */
@media (min-width: 1181px) and (max-width: 1499px) {   /* 3 cells per side */
  #widgets .res-left  { left: 2.2vw;  right: auto; transform: none; width: min(34vw, 500px); }
  #widgets .res-right { right: 2.2vw; left: auto;  transform: none; width: min(34vw, 500px); }
  #widgets .res-zone  { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 128px; gap: 9px; align-content: start; grid-auto-flow: row dense; overflow: visible; }
}
@media (min-width: 1500px) and (max-width: 1899px) {   /* 4 cells per side */
  #widgets .res-left  { left: 2.5vw;  right: auto; transform: none; width: min(38vw, 740px); }
  #widgets .res-right { right: 2.5vw; left: auto;  transform: none; width: min(38vw, 740px); }
  #widgets .res-zone  { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 128px; gap: 9px; align-content: start; grid-auto-flow: row dense; overflow: visible; }
}
@media (min-width: 1900px) {   /* 5 cells per side + tighter rows to use the extra height */
  #widgets .res-left  { left: 2.8vw;  right: auto; transform: none; width: min(42vw, 1000px); }
  #widgets .res-right { right: 2.8vw; left: auto;  transform: none; width: min(42vw, 1000px); }
  #widgets .res-zone  { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 124px; gap: 9px; align-content: start; grid-auto-flow: row dense; overflow: visible; }
}
/* slightly denser typography inside widgets so more detail fits */
#widgets .res-card-head { font-size: 12px; padding: 6px 11px; }
#widgets .wdg-big { font-size: 34px; margin: 2px 0 1px; }
#widgets .wdg-band { font-size: 13px; margin-bottom: 5px; }
#widgets .wdg-stat b { font-size: 13.5px; }
#widgets .wdg-stat span { font-size: 10.5px; }
#widgets .wdg-clock { font-size: 34px; }
#widgets .wdg-clock.sm { font-size: 26px; }
#widgets .wdg-clock.tiny { font-size: clamp(18px, 26cqw, 34px); }
#widgets .wx-now b { font-size: 32px; }
#widgets .res-news-t, #widgets .tmdb-t { font-size: 12.5px; }
/* cards fill their spanned cells; no inner scrollbars */
#widgets .res-card { height: 100%; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#widgets .res-card .res-card-head { flex: 0 0 auto; padding: 7px 12px; font-size: calc(13px * var(--wdg-title-scale, 1)); }   /* v7.36 — global widget-title size */
#widgets .res-card .res-card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; zoom: var(--wdg-body-zoom, 1); }   /* v7.34 wheel-scroll (scrollbar hidden globally) · v7.36 global body-font zoom */
#widgets .res-page { margin: 0 0 6px; }
/* per-widget size selector in Settings → Widgets */
.wdg-trow { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.wdg-move { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.wdg-move button { width: 24px; height: 24px; border-radius: 6px; background: rgba(30,44,70,.9); color: #cfe4ff; border: 1px solid var(--line); font-size: 13px; line-height: 1; cursor: pointer; }
.wdg-move button:disabled { opacity: .3; cursor: default; }
.wdg-tlabel { display: flex; align-items: center; gap: 6px; flex: 1; cursor: pointer; }
.wdg-size { background: rgba(10,16,30,.7); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font-size: 12px; }
.res-imgrow, .res-textrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.res-imgrow .res-card.photo img { height: clamp(120px, 15vh, 180px); }
.res-right > .res-card.photo img { height: clamp(150px, 19vh, 220px); }
.res-card { background: rgba(14,22,40,var(--card-alpha,.95)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.45); }
/* below ~1180px the side gutters get too tight — stack the zones into one scrolling column */
@media (max-width: 1180px) {
  .research-live { background: rgba(4,8,16,.97); overflow-y: auto; pointer-events: auto; padding: 60px 14px 20px; }
  .res-zone { position: static; transform: none; width: auto; max-height: none; margin: 0 auto 12px; max-width: 640px; }
  .res-mid { max-height: none; flex-direction: column; }
}
.res-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; color: rgb(var(--acc3)); }
.res-card-head .res-x { background: none; border: 0; color: var(--muted); font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.res-card-head .res-x:hover { color: var(--ink); background: rgba(255,255,255,.08); }
/* v9.78 — pager arrows in the title bar (TV Shows) */
.res-headpage { display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto; }
.res-headpage button { background: none; border: 0; color: rgb(var(--acc2)); font-size: 17px; line-height: 1; cursor: pointer; padding: 1px 6px; border-radius: 6px; }
.res-headpage button:hover { background: rgba(var(--acc),.16); }
.res-headpage button:disabled { opacity: .3; cursor: default; }
/* v4.71 — per-widget ⚙ options button in the top-left corner of the card */
.res-card-head .wdg-optcorner { background: none; border: 0; color: var(--muted); font-size: 14px; cursor: pointer; padding: 2px 5px; border-radius: 6px; line-height: 1; flex: 0 0 auto; }
.res-card-head .wdg-optcorner:hover { color: rgb(var(--acc2)); background: rgba(var(--acc),.16); }
/* v5.04 — 🔊 read-aloud button on every widget header */
.res-card-head .wdg-playbtn, .res-card-head .wdg-refreshbtn, .res-card-head .wdg-xbtn { background: none; border: 0; font-size: 13px; cursor: pointer; padding: 2px 5px; border-radius: 6px; line-height: 1; flex: 0 0 auto; opacity: .8; }
.res-card-head .wdg-playbtn:hover, .res-card-head .wdg-refreshbtn:hover, .res-card-head .wdg-xbtn:hover { opacity: 1; background: rgba(var(--acc),.16); }
.res-card-head .wdg-refreshbtn:active { transform: rotate(90deg); }
/* v6.34 — ↕ extend-to-full-height: phone-only (desktop widgets resize freely already) */
.res-card-head .wdg-xbtn { display: none; color: rgb(var(--acc2)); }
body.max-phone .res-card-head .wdg-xbtn { display: inline-flex; }
.res-card-head .wdg-xbtn.on { opacity: 1; background: rgba(var(--acc),.22); }
body.max-phone .wdg-stacked.wdg-xfull .res-card-body { max-height: none !important; }
/* v5.05 — title icon+text on the far left; ⚙ 🔊 ✕ grouped on the right */
.res-card-head > span:first-of-type { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-card-head .wdg-optcorner { order: -1; margin-right: 2px; }   /* v5.54 — settings gear pinned to the far left */
/* v7.35 — ⋯ options menu button (replaces the crowded gear/play/refresh/extend row) + its popover */
.res-card-head .wdg-menucorner { order: -1; margin-right: 2px; background: none; border: 0; color: var(--muted); font-size: 16px; font-weight: 700; cursor: pointer; padding: 0 6px; border-radius: 6px; line-height: 1; flex: 0 0 auto; }
.res-card-head .wdg-menucorner:hover { color: rgb(var(--acc2)); background: rgba(var(--acc),.16); }
.wdg-optmenu { position: fixed; z-index: 400; min-width: 168px; padding: 5px; border-radius: 12px;
  background: rgba(10,16,30,.98); border: 1px solid rgba(var(--acc),.4); box-shadow: 0 10px 34px rgba(0,0,0,.55); }
.wdg-optmenu-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0;
  color: var(--ink); font-size: 13px; padding: 8px 10px; border-radius: 8px; cursor: pointer; line-height: 1.1; }
.wdg-optmenu-item:hover { background: rgba(var(--acc),.18); color: rgb(var(--acc2)); }
.wdg-optmenu-item .wom-ic { width: 18px; text-align: center; flex: 0 0 auto; }
/* v5.05 — 🎉 NRL score celebration: logo rain behind widgets + centre popup + confetti */
.nrl-rain { position: fixed; inset: 0; z-index: 99998; pointer-events: none; overflow: hidden; }   /* v8.59 — above every widget */
.nrl-drop { position: absolute; top: -90px; opacity: .55; animation: nrlFall linear forwards; will-change: transform; }
.nrl-drop img { display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
@keyframes nrlFall { from { transform: translateY(-90px) rotate(0deg); } to { transform: translateY(112vh) rotate(360deg); } }
.nrl-celebrate { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.nrl-cel-card { transform: scale(2); transform-origin: center; }   /* v8.59 — Tristan: double the score modal */
@media (max-width: 760px) { .nrl-cel-card { transform: scale(1.35); } }
.nrl-cel-card { position: relative; text-align: center; padding: 26px 40px 30px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(circle at 50% 0%, rgba(var(--acc),.25), rgba(11,20,36,.96) 70%); border: 1px solid rgba(120,160,220,.4);
  box-shadow: 0 30px 90px rgba(0,0,0,.7); animation: nrlPop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes nrlPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.nrl-cel-badge img { width: 96px; height: 96px; animation: nrlBounce 1s ease-in-out infinite; }
.nrl-cel-badge { font-size: 90px; line-height: 1; }
@keyframes nrlBounce { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.08); } }
.nrl-cel-try { font-size: 40px; font-weight: 900; letter-spacing: .06em; color: #ffd93b; margin: 6px 0 2px; text-shadow: 0 3px 14px rgba(255,217,59,.5); }
.nrl-cel-team { font-size: 18px; font-weight: 700; color: #eaf1ff; }
.nrl-cel-scorer { font-size: 14px; font-weight: 600; color: #ffd93b; margin-top: 4px; }
.nrl-cel-score { font-size: 16px; color: #cfe0f5; margin-top: 8px; }
.nrl-cel-score b { color: rgb(var(--acc)); font-size: 20px; }
.nrl-cel-meta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.nrl-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.nrl-conf { position: absolute; top: -14px; width: 8px; height: 14px; border-radius: 2px; opacity: .9; animation: nrlConf linear forwards; }
.mvr-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }   /* v8.61 — movie-reveal confetti burst */
/* v8.66 — full-screen animated background behind all widgets (Settings → Interface) */
#bgFx { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#bgHyperFrame { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 0; pointer-events: none; background: #000; }   /* v10.20 — real WebGL Hyperspeed background (desktop) */
#bgLightning { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }   /* v10.23 — WebGL Lightning background */
#bgFrame { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 0; pointer-events: none; background: #000; }   /* v10.25 — ReactBits /bg/ iframe backgrounds */
.ifx-sopt { display: none; } .ifx-sopt.on { display: block; }
/* v10.27 — 🔓 Face ID widget */
.fid-body { display: flex; flex-direction: column; overflow: hidden; }
.fid-frame { flex: 1 1 auto; position: relative; min-height: 200px; border-radius: 12px; overflow: hidden; background: #05070d; }
.fid-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.fid-bar { display: flex; gap: 6px; margin-top: 8px; flex: 0 0 auto; }
.fid-bar button { flex: 1; font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 10px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.fid-bar button:hover { background: rgba(var(--acc),.28); } .fid-bar button:disabled { opacity: .45; cursor: default; }
.fid-note { font-size: 11.5px; color: var(--muted); margin-top: 6px; flex: 0 0 auto; }
.fid-msg { padding: 16px; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.ifx-col { display: inline-flex; align-items: center; gap: 8px; }
.ifx-col input[type=color] { width: 40px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.cfg-mini { font: inherit; font-size: 11.5px; padding: 4px 11px; border-radius: 999px; cursor: pointer; background: rgba(120,160,220,.12); color: var(--ink); border: 1px solid var(--line); }
.cfg-mini.on { background: rgba(var(--acc),.2); border-color: rgba(var(--acc),.6); color: #bff3ff; }
/* v8.85 — Interface → Board action buttons */
.cfg-actrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.cfg-actbtn { font: inherit; font-size: 13px; padding: 9px 14px; border-radius: 10px; cursor: pointer; background: rgba(120,160,220,.12); color: var(--ink); border: 1px solid var(--line); }
.cfg-actbtn:hover { background: rgba(var(--acc),.18); border-color: rgba(var(--acc),.5); }
.cfg-actbtn-warn { background: rgba(255,120,90,.12); border-color: rgba(255,120,90,.4); }
.cfg-actbtn-warn:hover { background: rgba(255,120,90,.24); border-color: rgba(255,120,90,.6); }
/* v8.85 — ＋ add/manage button on the Countdowns widget */
.cd-addbtn { position: absolute; top: 8px; right: 10px; z-index: 6; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.cd-addbtn:hover { background: rgba(var(--acc),.2); border-color: rgba(var(--acc),.55); }
@keyframes nrlConf { from { transform: translateY(-14px) rotate(0deg); } to { transform: translateY(420px) rotate(540deg); opacity: .2; } }
.res-card-body { padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.res-card.photo .res-card-body { padding: 0; }
.res-card.photo img { display: block; width: 100%; max-height: 340px; object-fit: cover; cursor: pointer; }
.res-card.photo .res-cap { padding: 8px 12px; font-size: 12px; color: var(--muted); }
.res-fact { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,.07); font-size: 13.5px; }
.res-fact:last-child { border-bottom: 0; }
.res-fact b { flex: 0 0 38%; color: rgb(var(--acc3)); font-weight: 600; }
.res-news { padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.09); }
.res-news:last-child { border-bottom: 0; }
.res-news .res-news-t { font-weight: 600; margin-bottom: 3px; }
.res-news .res-news-m { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* v9.38 — 📰 in-MAX article reader */
.res-news-open { font: inherit; font-size: 11px; font-weight: 600; margin-left: 6px; padding: 2px 9px; border-radius: 999px; cursor: pointer;
  background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.4); vertical-align: middle; }
.res-news-open:hover { background: rgba(var(--acc),.3); }
.art-wrap { padding: 2px 2px 6px; }
.art-bar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; background: var(--card, #10192b); padding: 6px 0 10px; z-index: 2; }
.art-play { font: inherit; font-size: 14px; font-weight: 700; padding: 8px 16px; border-radius: 10px; cursor: pointer;
  background: rgb(var(--acc)); color: #041018; border: 0; }
.art-play.on { background: rgba(248,113,113,.9); color: #fff; }
.art-play:hover { filter: brightness(1.08); }
.art-ext { font-size: 12px; color: var(--muted); text-decoration: none; margin-left: auto; }
.art-ext:hover { color: rgb(var(--acc2)); }
.art-title { font-size: 20px; line-height: 1.3; margin: 6px 0 4px; }
.art-meta { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.art-body { font-size: 15px; line-height: 1.72; }
.art-body p { margin: 0 0 13px; }
.art-fail { font-size: 14px; opacity: .85; padding: 10px 0; }
/* v9.39 — News search header + arrow paging */
.news-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.news-search { display: flex; flex: 1 1 auto; min-width: 0; }
.news-q { flex: 1 1 auto; min-width: 0; background: rgba(255,255,255,.06); color: var(--fg); border: 1px solid rgba(255,255,255,.14); border-radius: 8px 0 0 8px; padding: 6px 10px; font: inherit; font-size: 13px; }
.news-go { flex: none; border: 1px solid rgba(255,255,255,.14); border-left: 0; border-radius: 0 8px 8px 0; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); cursor: pointer; padding: 6px 11px; font-size: 13px; }
.news-go:hover { background: rgba(var(--acc),.3); }
.news-nav { flex: none; display: flex; gap: 4px; }
.news-nav button { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--fg); border: 1px solid rgba(255,255,255,.14); font-size: 16px; line-height: 1; cursor: pointer; }
.news-nav button:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.news-nav button:disabled { opacity: .35; cursor: default; }
.news-numbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-right: 7px; border-radius: 6px; background: rgba(var(--acc),.2); color: rgb(var(--acc2)); font-size: 11px; font-weight: 800; vertical-align: middle; }
/* v9.39 — article reader image row + exploded image frames */
.art-imgs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; }
.art-thumb { flex: none; width: 122px; height: 80px; padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; overflow: hidden; cursor: pointer; background: #000; }
.art-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-thumb:hover { border-color: rgb(var(--acc)); }
.movie-panel.art-explode .movie-panel-body { padding: 0; display: flex; align-items: center; justify-content: center; background: #000; min-height: 0; overflow: hidden; }
.art-explode-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.res-src { font-size: 12px; color: var(--muted); margin-top: 8px; }
.res-src a { color: rgb(var(--acc3)); text-decoration: none; }
.res-src a:hover { text-decoration: underline; }
.res-loading { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 60px 0; font-size: 16px; }

/* 🧩 widgets (v3.42) */
/* v5.02 — Settings → Widgets: compact 3-column checkbox list (A→Z), no sizes/options here */
.wdg-toggles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
.wdg-toggles .wdg-tlabel { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdg-toggles .wdg-tlabel input { flex: 0 0 auto; }
/* v6.53 — widgets this user isn't allowed: fully greyed out & not selectable */
.wdg-toggles .wdg-tlabel-off { opacity: .38; cursor: not-allowed; filter: grayscale(1); pointer-events: none; }
/* v6.62 — accent-colour theme swatches */
.thm-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 6px; }
.thm-sw { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 12px; cursor: pointer;
  background: rgba(10,18,34,.6); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 14px; text-align: left; }
.thm-sw:hover { border-color: var(--sw); }
.thm-sw.on { border-color: var(--sw); box-shadow: 0 0 0 1px var(--sw), 0 0 16px -4px var(--sw); }
.thm-dot { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; background: var(--sw); box-shadow: 0 0 12px -2px var(--sw); }
.thm-lbl { flex: 1 1 auto; }
.thm-tick { color: var(--sw); font-weight: 800; }
/* v6.63 — custom colour swatch: the whole tile is the label for a hidden native colour input */
.thm-custom { position: relative; cursor: pointer; }
.thm-colorin { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
/* v6.64 — reduce motion: near-instant animations & transitions across the app */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
/* v6.54 — map address picker */
.sp-pick { flex: 0 0 auto; background: rgba(var(--acc),.14); border: 1px solid rgba(var(--acc),.4); color: rgb(var(--acc2));
  border-radius: 8px; padding: 4px 8px; font-size: 12px; cursor: pointer; }
.sp-pick:hover { background: rgba(var(--acc),.28); }
.home-pick { margin-top: 6px; }
.home-geo { margin-top: 5px; font-size: 12px; color: rgb(var(--acc2)); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.home-geo[hidden] { display: none; }
/* v6.55 — resize grip on the map picker */
.mapPick { position: relative; }
.mp-grip { position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; cursor: nwse-resize; z-index: 6; touch-action: none;
  background: linear-gradient(135deg, transparent 45%, rgba(var(--acc),.55) 45%, rgba(var(--acc),.55) 62%, transparent 62%, transparent 74%, rgba(var(--acc),.55) 74%, rgba(var(--acc),.55) 90%, transparent 90%); }
/* v6.56 — arrangement → address binding row in the 💾 save modal */
.wps-addr { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; color: var(--muted); }
.wps-addr > span { flex: 0 0 auto; }
.wps-addr select { flex: 1 1 auto; }
.mapPick { width: min(560px, 94vw); max-width: 94vw; }
.mp-search { display: flex; gap: 6px; margin: 4px 0 6px; }
.mp-q { flex: 1 1 auto; font-size: 14px; padding: 8px 11px; border-radius: 10px; background: rgba(10,16,30,.8); color: #eaf1ff; border: 1px solid var(--line); }
.mp-results { max-height: 132px; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 3px; }
.mp-results::-webkit-scrollbar { display: none; }
.mp-rrow { text-align: left; background: rgba(120,160,220,.08); border: 1px solid rgba(120,160,220,.16); color: #dfe8f5;
  border-radius: 8px; padding: 6px 9px; font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-rrow:hover { background: rgba(var(--acc),.2); }
.mp-rload { color: var(--muted); font-size: 12.5px; padding: 6px 2px; }
.mp-map { position: relative; height: 300px; margin-top: 8px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: #0a1422; touch-action: none; cursor: grab; }
.mp-map:active { cursor: grabbing; }
.mp-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.mp-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); font-size: 30px; pointer-events: auto; cursor: grab; touch-action: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); z-index: 3; }
.mp-pin.dragging { cursor: grabbing; }
.mp-z { position: absolute; right: 8px; width: 30px; height: 30px; border-radius: 8px; z-index: 4; cursor: pointer;
  background: rgba(8,14,28,.9); color: #eaf1ff; border: 1px solid rgba(var(--acc),.45); font-size: 18px; line-height: 1; }
.mp-zin { top: 8px; } .mp-zout { top: 44px; }
.mp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.mp-coord { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .wdg-toggles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wdg-soc { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.wdg-soc-bar { flex: 1; height: 12px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.wdg-soc-bar span { display: block; height: 100%; background: linear-gradient(90deg, #28dc8c, #2e8cff); }
.wdg-soc b { font-size: 20px; color: #eaf1ff; }
.wdg-soc small { color: var(--muted); font-size: 11px; }
.wdg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.wdg-stat { display: flex; flex-direction: column; gap: 1px; padding: 4px 0; }
.wdg-stat span { font-size: 11px; color: var(--muted); }
.wdg-stat b { font-size: 15px; color: #eaf1ff; }
.wdg-wx { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.wdg-wx-ic { font-size: 40px; line-height: 1; }
.wdg-wx-t b { font-size: 30px; color: #eaf1ff; }
.wdg-wx-t span { display: block; font-size: 12px; color: var(--muted); }
.wdg-clock { font-size: 40px; font-weight: 700; color: #eaf1ff; letter-spacing: .02em; white-space: nowrap; }
.wdg-clock small { font-size: 18px; color: var(--muted); margin-left: 5px; }

/* v3.75 — true 1×1 clock: fill the cell, centre it, scale the time to fit the width */
.wdg-clock-tiny { display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 2px; padding: 0; text-align: center; container-type: inline-size; }
.wdg-clock.tiny { font-size: clamp(18px, 26cqw, 34px); line-height: 1; letter-spacing: 0; }
.wdg-clock.tiny small { font-size: .42em; margin-left: 3px; vertical-align: super; }
.wdg-clock-tiny .wdg-clock-date { font-size: clamp(9px, 8cqw, 13px); white-space: nowrap; margin: 0; }

/* v3.50 — more widgets. The widgets board (unlike web search) MAY scroll its columns
   since there can be many panels; toggle which show in Settings → Widgets. */
.wdg-big { font-size: 44px; font-weight: 800; line-height: 1; text-align: center; margin: 4px 0 2px; }
.wdg-band { text-align: center; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.wdg-advice { text-align: center; font-size: 12px; color: #b9c8e6; margin: -2px 0 8px; padding: 0 6px; line-height: 1.35; }   /* v6.85 — UV / air-quality plain-English advice */
/* weather — sky background + weekly forecast */
.res-card.wx-card { border-color: rgba(255,255,255,.14); }
.res-card.wx-card .res-card-head { background: rgba(0,0,0,.18); border-bottom-color: rgba(255,255,255,.14); color: #eaf3ff; }
.wx-hero { display: flex; align-items: center; gap: 14px; padding: 4px 0 12px; }
.wx-ic { font-size: 46px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.wx-now b { font-size: 40px; font-weight: 800; color: #fff; }
.wx-now span { display: block; font-size: 14px; color: #eaf3ff; }
.wx-now small { display: block; font-size: 11.5px; color: rgba(255,255,255,.75); margin-top: 3px; }
.wx-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 10px; }
.wx-day { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.wx-dn { font-size: 11px; color: rgba(255,255,255,.8); font-weight: 600; }
.wx-di { font-size: 20px; }
.wx-hl { font-size: 12px; color: #fff; font-weight: 700; }
.wx-hl i { color: rgba(255,255,255,.65); font-style: normal; margin-left: 3px; font-weight: 400; }
.wx-src { color: rgba(255,255,255,.7) !important; }
/* NRL */
.nrl-row { padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,.09); }
.nrl-row:last-child { border-bottom: 0; }
.nrl-row b { color: #eaf1ff; font-size: 13.5px; }
.nrl-row .nrl-v { color: var(--muted); margin: 0 7px; font-size: 12px; }
.nrl-row .nrl-when { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* TMDB rows (poster + title + rating) */
.tmdb-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.08); align-items: center; }
.tmdb-row:last-child { border-bottom: 0; }
.tmdb-row img { width: 42px; height: 62px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: rgba(255,255,255,.05); }
.tmdb-noimg { width: 42px; height: 62px; border-radius: 6px; background: rgba(255,255,255,.06); flex: 0 0 auto; }
.tmdb-t { font-weight: 600; font-size: 13.5px; color: #eaf1ff; }
.tmdb-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* NASA APOD */
.apod-img { width: 100%; max-height: 200px; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 8px; }
.apod-t { font-weight: 700; font-size: 14px; color: rgb(var(--acc3)); }
.apod-x { font-size: 12.5px; color: var(--ink); line-height: 1.5; margin-top: 6px; }
/* Traffic map */
.traffic-map { width: 100%; height: 260px; border: 0; border-radius: 10px; display: block; }
#widgets .traffic-map { height: 100%; min-height: 120px; }   /* fill the widget cell */
@media (max-width: 640px) { .research-grid { grid-template-columns: 1fr; } .research-ov { padding-top: 58px; } }
/* v3.61: a folded-in follow-up panel slides + fades into the board; the columns re-flow */
.res-zone { transition: gap .2s ease; }
.res-card { transition: opacity .3s ease, transform .3s ease; }
.res-card.res-appear { animation: resAppear .5s cubic-bezier(.34,1.3,.5,1) both; }
@keyframes resAppear { 0% { opacity: 0; transform: translateY(-14px) scale(.9); } 100% { opacity: 1; transform: none; } }

/* ═══════════════════ JARVIS / IRON-MAN HUD THEME (v3.60) ═══════════════════
   Full re-skin: cyan electric-blue on deep space-black, glowing thin borders,
   hex-grid backdrop, uppercase HUD labels. Appended last so it overrides; delete
   this whole block (or restore max-web-backup-preironman) to revert. */
:root {
  --bg: #03070f; --ink: #dbefff; --muted: #6f90a8;
  --line: rgba(var(--acc),.30); --card: rgba(6,20,32,.7);
  --brand: rgb(var(--acc)); --brand-2: #55e6ff; --glow: rgba(var(--acc),.45);
}
body {
  background:
    radial-gradient(1300px 820px at 50% -12%, rgba(var(--acc),.12), transparent 60%),
    radial-gradient(900px 700px at 50% 118%, rgba(var(--acc),.06), transparent 62%),
    #03070f !important;
}
/* faint hex/tech grid, faded toward the edges */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(rgba(var(--acc),.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--acc),.055) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, rgba(0,0,0,.5) 55%, transparent 82%);
  mask-image: radial-gradient(circle at 50% 42%, #000 0%, rgba(0,0,0,.5) 55%, transparent 82%);
}
.stage { position: relative; z-index: 1; }
.tagline { color: rgba(85,230,255,.72) !important; }
.status { color: #bfe9ff; letter-spacing: .12em; }

/* orb mode colours → cyan family (processing=amber, error=red stay) */
.orb.mode-idle   { --c: 70,120,150; }
.orb.mode-listen { --c: var(--acc); }   /* v6.62 — orb listen colour follows the accent theme */
.orb.mode-awake  { --c: 90,230,255; }

/* top-corner pills (menu / version / close buttons) */
.menu-btn, .ver-btn, .research-x, .home-close, .foot-ver {
  background: rgba(6,22,34,.85) !important; color: rgb(var(--acc2)) !important;
  border: 1px solid rgba(var(--acc),.5) !important; text-transform: uppercase; letter-spacing: .08em;
  box-shadow: 0 0 14px rgba(var(--acc),.18), inset 0 0 10px rgba(var(--acc),.06);
}
.menu-btn:hover, .menu-btn.open, .ver-btn:hover, .research-x:hover, .home-close:hover, .foot-ver:hover {
  background: rgba(12,42,58,.92) !important; border-color: rgba(var(--acc),.95) !important;
  box-shadow: 0 0 22px rgba(var(--acc),.4) !important; color: #d6f7ff !important;
}

/* panels / cards / bars — dark glass, glowing cyan edge */
.cfg-panel, .res-card, .menu-bar, .vidbox, .ladder-panel, .home-dev, .showoff-card, .viewer-body,
.mini-panel .cfg-panel {
  background: linear-gradient(180deg, rgba(8,26,40,.94), rgba(4,14,24,.94)) !important;
  border: 1px solid rgba(var(--acc),.34) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.55), 0 0 22px rgba(var(--acc),.10), inset 0 0 0 1px rgba(var(--acc),.05) !important;
}
/* v8.27 — make the widget-opacity control actually work under the re-skin. The rule above forces a
   FIXED-alpha gradient on .res-card with !important, so --card-alpha (master S.cardAlpha AND the
   per-widget override) was being ignored entirely. Re-apply the same look on board cards but drive
   BOTH gradient stops from --card-alpha — 100% => rgba(...,1) = fully solid, no see-through. The
   #widgets .res-card selector out-specifies the .res-card rule above so this wins. */
#widgets .res-card {
  background: linear-gradient(180deg, rgba(8,26,40,var(--card-alpha,.95)), rgba(4,14,24,var(--card-alpha,.95))) !important;
}
.cfg-head, .res-card-head { border-bottom: 1px solid rgba(var(--acc),.3) !important; }
.cfg-head h2, .buzz-panel h2, .notes-panel h2, .hist-panel h2, .photos-panel h2, .ver-panel h2 {
  color: rgb(var(--acc2)) !important; text-transform: uppercase; letter-spacing: .07em;
}
.res-card-head { color: rgb(var(--acc2)) !important; letter-spacing: .02em; }   /* v9.80 — Title Case, not ALL CAPS */

/* buttons */
.btn.activate {
  background: linear-gradient(180deg, rgba(var(--acc),.95), rgba(16,140,170,.95)) !important;
  color: #03151c !important; border: 0 !important; font-weight: 700;
  box-shadow: 0 0 18px rgba(var(--acc),.5) !important;
}
.btn.ghost { border: 1px solid rgba(var(--acc),.45) !important; color: #bfe9ff !important; }
.btn.ghost:hover { background: rgba(var(--acc),.12) !important; border-color: rgba(var(--acc),.8) !important; }
.cfg-btn { background: rgba(6,22,34,.85); border: 1px solid rgba(var(--acc),.4); color: #bfe9ff;
  box-shadow: 0 0 10px rgba(var(--acc),.14); }
.cfg-btn:hover { background: rgba(12,42,58,.95); }

/* menu-bar items */
.mbi { background: rgba(6,22,34,.72); border: 1px solid rgba(var(--acc),.3); color: #bfe9ff; }
.mbi:hover { background: rgba(var(--acc),.92); border-color: rgba(var(--acc),1); color: #03151c;
  box-shadow: 0 0 16px rgba(var(--acc),.6); }

/* accents that used the old blue */
.cfg-tab.active { color: #55e6ff; }
.wdg-stat b, .res-fact b, .res-news-t { color: #d6f7ff; }
.res-src a, .res-news-m a { color: #55e6ff; }
.home-loc h5 { color: #55e6ff !important; }
#pinInput:focus { border-color: rgba(var(--acc),.7) !important; box-shadow: 0 0 16px rgba(var(--acc),.35) !important; }
.pin-dots i.on { background: rgb(var(--acc)) !important; }

/* ═══════════════════ WEBSITE SECURITY SCAN (v3.62) ═══════════════════ */
.scan-ov { position: fixed; inset: 0; z-index: 72; display: flex; align-items: center; justify-content: center;
  background: rgba(2,7,14,.82); backdrop-filter: blur(5px); padding: 20px; }
.scan-ov[hidden] { display: none; }
.scan-box { position: relative; width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(8,26,40,.97), rgba(4,14,24,.97));
  border: 1px solid rgba(var(--acc),.5); border-radius: 16px; padding: 22px 22px 18px;
  box-shadow: 0 0 40px rgba(var(--acc),.25), 0 20px 60px rgba(0,0,0,.6); }
.scan-x { position: absolute; top: 12px; right: 14px; }
.scan-head { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: rgb(var(--acc2));
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; }
.scan-head .material-symbols-outlined { font-size: 24px; }
/* v3.72 — cleaner typed-scan form (button sized to match the input, not oversized) */
.scan-form { display: flex; gap: 8px; align-items: stretch; margin: 2px 0 16px; }
.scan-form input { flex: 1; min-width: 0; background: rgba(10,16,30,.7); color: var(--ink);
  border: 1px solid rgba(var(--acc),.4); border-radius: 9px; padding: 9px 13px; font: inherit; font-size: 14px; }
.scan-form input:focus { outline: none; border-color: rgba(var(--acc),.85); box-shadow: 0 0 12px rgba(var(--acc),.25); }
.scan-form .btn.activate { padding: 0 18px; font-size: 13.5px; border-radius: 9px; flex: 0 0 auto; }
.scan-body { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.scan-gauge { flex: 0 0 auto; width: 132px; height: 132px; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; border: 2px solid rgba(var(--acc),.35); position: relative;
  box-shadow: inset 0 0 26px rgba(var(--acc),.12); }
.scan-grade { font-size: 44px; font-weight: 800; line-height: 1; color: rgb(var(--acc3)); }
.scan-grade.scanning::after { content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: rgb(var(--acc)); animation: scanspin 1s linear infinite; }
.scan-grade.grade-Aplus, .scan-grade.grade-A { color: #34e29a; }
.scan-grade.grade-B { color: #6fe0d0; }
.scan-grade.grade-C { color: #e8c53a; }
.scan-grade.grade-D { color: #ff9b2e; }
.scan-grade.grade-F { color: #ff5a5a; }
.scan-score { font-size: 12px; color: var(--muted); margin-top: 4px; letter-spacing: .04em; }
.scan-checks { flex: 1 1 300px; min-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.scan-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 7px 8px;
  border-radius: 9px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  opacity: 0; transform: translateX(-8px); animation: scanRow .3s ease forwards; }
@keyframes scanRow { to { opacity: 1; transform: none; } }
.scan-row.running { opacity: .7; transform: none; animation: none; }
.scan-ic { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 13px; }
.scan-row.pass .scan-ic { background: rgba(52,226,154,.18); color: #34e29a; }
.scan-row.warn .scan-ic { background: rgba(232,197,58,.18); color: #e8c53a; }
.scan-row.fail .scan-ic { background: rgba(255,90,90,.18); color: #ff5a5a; }
.scan-name { font-size: 13px; font-weight: 600; color: #dbefff; }
.scan-detail { grid-column: 2 / 3; font-size: 11px; color: var(--muted); line-height: 1.35; }
.scan-pts { grid-row: 1 / 2; grid-column: 3; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.scan-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(var(--acc),.25); border-top-color: rgb(var(--acc)); display: inline-block; animation: scanspin .8s linear infinite; }
@keyframes scanspin { to { transform: rotate(360deg); } }

/* ═══════════════════ WIDGET EDIT MODE (v3.66) ═══════════════════ */
.wdg-editbtn { top: 52px; right: 16px; z-index: 34; }
.wdg-autobtn { top: 88px; }
/* in edit mode: faint grid feel, grab cursor, dashed outline; ✕ still closes each box */
#widgets .res-card { position: relative; }
#widgets.editing .res-card { cursor: grab; outline: 1px dashed rgba(var(--acc),.45); }
#widgets.editing .res-card.wdg-drag:hover { outline-color: rgba(var(--acc),.9); box-shadow: 0 0 18px rgba(var(--acc),.3); }
#widgets.editing .res-card.dragging { opacity: .5; }
#widgets .res-zone.dragover { background: rgba(var(--acc),.05); }
.wdg-cardsize { position: absolute; top: 6px; right: 34px; z-index: 4; background: rgba(6,22,34,.95);
  color: #bfe9ff; border: 1px solid rgba(var(--acc),.5); border-radius: 7px; font-size: 11px; padding: 2px 4px; cursor: pointer; }

/* ═══════════════════ iPad Pro 12.9" TUNED LAYOUT (v3.67) ═══════════════════
   body.ipad-pro is toggled in JS when that device is detected. Lowers the top
   controls (so Chrome's toolbar / the ✕ don't collide) and shrinks everything. */
body.ipad-pro .menu-btn,
body.ipad-pro .hdr-ico,
body.ipad-pro #verBtn,
body.ipad-pro .research-x,
body.ipad-pro .home-close { top: 60px; }
body.ipad-pro .wdg-editbtn { top: 98px; }
body.ipad-pro .wdg-autobtn { top: 134px; }
body.ipad-pro .menu-bar { top: 100px; }
/* push the side panels below the lowered controls */
body.ipad-pro #widgets .res-zone,
body.ipad-pro .research-live .res-zone,
body.ipad-pro .home-col { top: 136px; }
/* smaller header + orb */
body.ipad-pro .head { margin-top: 6px; }
body.ipad-pro .max-logo { height: clamp(52px, 9vw, 88px); }
body.ipad-pro .tagline { font-size: 11px; }
body.ipad-pro .orb-wrap { margin-top: 64px; }
body.ipad-pro .orb { width: 196px; height: 196px; }
body.ipad-pro .status { font-size: 13.5px; }
/* denser, smaller widgets */
body.ipad-pro #widgets .res-zone { grid-auto-rows: 104px; gap: 7px; }
body.ipad-pro #widgets .res-card-head { font-size: 11px; padding: 5px 9px; }
body.ipad-pro #widgets .wdg-big { font-size: 26px; }
body.ipad-pro #widgets .wdg-band { font-size: 11px; margin-bottom: 4px; }
body.ipad-pro #widgets .wdg-stat b { font-size: 12px; }
body.ipad-pro #widgets .wdg-stat span { font-size: 9.5px; }
body.ipad-pro #widgets .wdg-clock { font-size: 26px; }
body.ipad-pro #widgets .wdg-clock.sm { font-size: 22px; }
body.ipad-pro #widgets .wdg-clock.tiny { font-size: clamp(16px, 26cqw, 30px); }
body.ipad-pro #widgets .wx-now b { font-size: 26px; }
body.ipad-pro #widgets .res-news-t, body.ipad-pro #widgets .tmdb-t { font-size: 11.5px; }
body.ipad-pro #widgets .tmdb-row img { width: 34px; height: 50px; }

/* ═══════════════════ PROG-LOG DEVICE TAGS (v3.71) ═══════════════════ */
.prog-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 4px 0 10px; }
.prog-tags-lbl { font-size: 12px; color: var(--muted); margin-right: 2px; }
.prog-tag { background: rgba(6,22,34,.7); color: #bfe9ff; border: 1px solid rgba(var(--acc),.4);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; transition: background .15s, border-color .15s; }
.prog-tag:hover { background: rgba(var(--acc),.14); border-color: rgba(var(--acc),.7); }
.prog-tag.active { background: rgba(var(--acc),.92); color: #04141c; border-color: rgba(var(--acc),1); box-shadow: 0 0 12px rgba(var(--acc),.45); }

/* iPad: Home Assistant devices run down the LEFT side (v3.71) */
body.ipad-pro .home-col-left  { left: 2vw; right: auto; transform: none; width: min(30vw, 320px); }
body.ipad-pro .home-col-right { left: calc(2vw + min(30vw, 320px) + 12px); right: auto; transform: none; width: min(30vw, 320px); }

/* iPad: the programming-log modal ~20% wider (v3.74) */
body.ipad-pro .cfg-panel.notelive-panel { max-width: 768px; width: 92vw; }

/* ===== v3.77 — compact logo (top-left, menu-button-sized) + full-screen news board ===== */
/* the big centred wordmark shrinks into the top-left corner beside the ☰ Menu pill */
.head { position: fixed; top: 13px; left: 116px; z-index: 110; margin: 0; text-align: left; pointer-events: none; }
.max-logo, .wordmark-img { height: 32px; margin: 0; max-width: none; }
.wordmark-txt { font-size: 22px; }
.tagline { display: none !important; }
.orb-wrap { margin-top: 120px; }   /* header is out of the flow now — keep the orb clear of the top pills */
body.ipad-pro .head { top: 58px; }         /* clears the browser toolbar like the other top controls */
body.ipad-pro .max-logo { height: 30px; }
body.ipad-pro .orb-wrap { margin-top: 100px; }

/* 📰 news board — rich story rows (thumbnail + snippet + source/date) */
.news-rich { display: flex; gap: 9px; cursor: pointer; align-items: flex-start; }
.news-rich:hover .res-news-t { color: rgb(var(--acc3)); }
.news-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; border: 1px solid var(--line); }
.news-rich-tx { min-width: 0; flex: 1; }
.news-snip { font-size: 12px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* featured story — big picture + headline + live article text */
.news-feature-img { display: block; width: 100%; height: 132px; object-fit: cover; border-radius: 10px; margin-bottom: 8px; border: 1px solid var(--line); cursor: pointer; }
.news-feature-t { font-size: 15px; font-weight: 700; cursor: pointer; line-height: 1.3; }
.news-feature-body { margin-top: 6px; font-size: 12.5px; }
/* 📖 full-article reader — centred over the board */
.news-reader { position: fixed; left: 50%; top: 52%; transform: translate(-50%, -50%); width: min(680px, 92vw);
  max-height: 80vh; overflow: hidden; z-index: 96; pointer-events: auto; box-shadow: 0 18px 60px rgba(0,0,0,.65); }
.news-reader .res-card-body { max-height: calc(80vh - 46px); overflow: auto; scrollbar-width: thin; }
.news-reader .news-feature-img { height: 180px; cursor: default; }
body.ipad-pro .news-reader { max-height: 72vh; top: 54%; }

/* ===== v3.78 — free widget placement (drag ANYWHERE, ~1mm snap; only the header strip is off-limits) ===== */
.wdg-free { position: fixed; margin: 0; z-index: 31; pointer-events: auto; overflow: hidden; }
#widgets.editing .wdg-free { outline: 1px dashed rgba(var(--acc),.4); }

/* ===== v3.80 — orb retired (desktop/iPad): header WAVEFORM + menu rows + logo left of Menu ===== */
/* logo sits at the very corner; the ☰ Menu pill moves to its right */
.head { left: 16px; }
.menu-btn { left: 118px; }
.menu-bar { left: 118px; flex-direction: column; align-items: flex-start; }
.menu-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mbi-green .material-symbols-outlined { color: #4ade80 !important; }
@media (min-width: 681px) {
  .orb { display: none !important; }               /* the waveform is the status graphic now */
  .orb-wrap { margin-top: 34px; }                  /* status + heard text sit just under the header */
  .wave-wrap { position: fixed; top: 12px; left: 232px; right: 170px; height: 36px; z-index: 105; cursor: pointer; }
  .wave-wrap canvas { display: block; width: 100%; height: 100%; }
  body.ipad-pro .wave-wrap { top: 60px; left: 240px; right: 210px; }
  body.ipad-pro .orb-wrap { margin-top: 40px; }
}
@media (max-width: 680px) { .wave-wrap { display: none; } }   /* phones keep the orb */
/* widget-board header buttons all on ONE row, aligned with the version pill:
   [✕ close]  [⤢ Arrange]  [✎ Edit/Done]  [version] */
#wdgEditBtn { top: 16px; right: 150px; padding: 6px 15px; }
#wdgAutoBtn { top: 16px; right: 226px; padding: 6px 15px; }
#widgetsClose { top: 16px; right: 330px; padding: 6px 15px; line-height: normal; }
body.ipad-pro #wdgEditBtn, body.ipad-pro #wdgAutoBtn, body.ipad-pro #widgetsClose { top: 60px; }
/* v3.80 — the widget board is ONE full-width canvas below the header (the orb is gone) */
@media (min-width: 681px) {
  #widgets .res-left { left: 2vw !important; right: auto !important; transform: none !important; width: 96vw !important; top: 64px; }
  #widgets .res-right { display: none !important; }
  body.ipad-pro #widgets .res-left { top: 110px; }
}

/* ===== v3.81 — bouncy status text EMBEDDED in the header waveform ===== */
@media (min-width: 681px) {
  .orb-wrap .status { display: none; }             /* the header shows it now */
  .wave-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    pointer-events: none; white-space: nowrap; overflow: hidden;
    font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: #eafaff; text-shadow: 0 0 10px rgba(var(--acc),.85), 0 1px 2px rgba(0,0,0,.8); }
  .ws-ch { display: inline-block;
    animation: wsPop .5s cubic-bezier(.3,1.6,.4,1) both, wsBob 2.4s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * .028s), calc(.5s + var(--i) * .07s); }
  .ws-count { display: inline-block; margin-left: 10px; padding: 1px 9px; border-radius: 999px;
    border: 1px solid rgba(var(--acc),.55); background: rgba(var(--acc),.14); color: rgb(var(--acc2));
    font-size: 11.5px; letter-spacing: .04em; text-shadow: none;
    animation: wsPulse 1s ease-in-out infinite; }
}
@keyframes wsPop { from { transform: translateY(15px) scale(.55); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wsBob { from { transform: translateY(1.6px); } to { transform: translateY(-1.6px); } }
@keyframes wsPulse { 0%, 100% { box-shadow: 0 0 0 rgba(var(--acc),0); } 50% { box-shadow: 0 0 12px rgba(var(--acc),.55); } }

/* ===== v3.82 — header = [status] [mic EQUALIZER] [what you said] — nothing overlaps ===== */
@media (min-width: 681px) {
  .wave-wrap { display: flex; align-items: center; gap: 16px; }
  .wave-status { position: static; inset: auto; flex: 0 1 auto; max-width: 40%; overflow: hidden;
    justify-content: flex-start; }
  .wave-wrap canvas { flex: 1 1 60px; min-width: 60px; width: auto; align-self: stretch; }
  .wave-heard { flex: 0 1 auto; max-width: 34%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    text-align: right; font-size: 12.5px; font-style: italic; color: #9fc4e8; pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.7); transition: opacity .25s; }
  .wave-heard:empty { opacity: 0; }
  .orb-wrap .heard { display: none; }              /* it lives in the header now */
}
/* v3.82 — the answer feed is a compact vertical column on the LEFT (no tokens, no pin badge) */
@media (min-width: 681px) {
  .feed { position: fixed; left: 2vw; top: 64px; width: min(330px, 28vw); margin: 0; z-index: 25;
    max-height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: thin; gap: 10px; }
  .card { padding: 12px 14px; }
  .card .q { font-size: 13px; }
  .card .a { font-size: 14px; }
  .pager { position: fixed; left: 2vw; bottom: 10px; z-index: 25; margin: 0; }
  body.ipad-pro .feed { top: 110px; }
}

/* ===== v3.84 — widget header row respaced: [✕] [⤢ Arrange] [✓ Done] [version], no overlap ===== */
#wdgEditBtn { right: 150px !important; }
#wdgAutoBtn { right: 246px !important; }
#widgetsClose { right: 368px !important; }

/* ===== v3.85 — research board uses the WHOLE screen (Tristan's mock-up) =====
   [ left 24vw: photos / profile / right-now ] [ centre 34vw: BIG photo + MAX|Bio ] [ right 38vw: news | web ]
   All three zones run from under the header to one straight line at the bottom. */
@media (min-width: 1181px) {
  #research .res-zone { top: 64px; bottom: 12px; max-height: none; }
  #research .res-left { left: 1vw !important; right: auto !important; width: 24vw !important; transform: none !important; }
  #research .res-mid { position: fixed; left: 26vw !important; width: 34vw !important; top: 64px; bottom: 12px;
    transform: none !important; flex-direction: column !important; max-height: none !important; }
  #research .res-right { left: 61vw !important; right: auto !important; width: 38vw !important;
    transform: none !important; flex-direction: row !important; align-items: stretch; }
  /* cards flex so every column meets the same bottom line */
  #research .res-card { display: flex; flex-direction: column; min-height: 0; }
  #research .res-card .res-card-body { flex: 1; min-height: 0; overflow: hidden; }
  #research .res-left > :last-child,
  #research .res-mid > :last-child { flex: 1; min-height: 0; }
  #research .res-right > .res-card { flex: 1; height: 100%; }
  /* the centre photo is the hero — big, full width of its column */
  #research .res-mid > .res-card.photo img { width: 100%; height: 44vh; object-fit: cover; }
  .res-midrow { display: flex; gap: 12px; flex: 1; min-height: 0; }
  .res-midrow .res-card { flex: 1; }
  body.ipad-pro #research .res-zone, body.ipad-pro #research .res-mid { top: 110px; }
}

/* ===== v3.86 — status text calmed down: no bounce, no bobbing, no pulsing — just clean text ===== */
.ws-ch { animation: none !important; }
.ws-count { animation: none !important; box-shadow: none !important; }

/* ===== v3.87 — header buttons are ONE gap-free group left of the version pill; the EQ stops where they start ===== */
.hdr-btns { position: fixed; top: 12px; right: 148px; z-index: 121; display: flex; gap: 8px; align-items: center; }
#hdrBtns > button { position: static !important; }   /* they flow in the group, not fixed offsets */
body.ipad-pro .hdr-btns { top: 60px; }

/* ===== v3.89 — spell-a-name search box + Full-details escalation ===== */
.spell-box { position: fixed; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 95000;
  width: min(520px, 92vw); background: rgba(10,16,30,.97); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px 16px; box-shadow: 0 18px 60px rgba(0,0,0,.65); }
.spell-head { display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; color: #bfe9ff; }
.spell-head .res-x { position: static !important; }
/* v9.17 — ALL settings modals + supplement/floating windows use their OWN colour (--sup, default purple)
   for the border + glow, so they visibly stand out from the widgets behind them (never blend in).
   The colour is set in Settings → 🖥 Interface → Settings-box colour. */
.cfg-panel, .spell-box, .movie-panel {
  border: 1.5px solid rgba(var(--sup, 168,85,247), .85) !important;
  box-shadow: 0 0 0 1px rgba(var(--sup, 168,85,247), .35), 0 0 26px rgba(var(--sup, 168,85,247), .30), 0 18px 60px rgba(0,0,0,.6) !important;
}
.cfg-head, .spell-head, .movie-panel-head { border-bottom: 1px solid rgba(var(--sup, 168,85,247), .4); }
/* v9.29 — MOBILE/TABLET: every settings modal + supplement window becomes a full-width sheet pinned below
   the header (not a movable floating frame), consistent everywhere. The panel scrolls as ONE column. */
body.max-phone .cfg-panel, body.max-phone .spell-box, body.max-phone .movie-panel,
body.max-ipad .cfg-panel, body.max-ipad .spell-box, body.max-ipad .movie-panel {
  position: fixed !important; left: 0 !important; right: 0 !important; top: 52px !important; bottom: auto !important;
  width: 100vw !important; max-width: 100vw !important; min-width: 0 !important; margin: 0 !important; transform: none !important;
  max-height: calc(100vh - 58px) !important; overflow-y: auto !important; overflow-x: hidden !important;
  border-radius: 0 0 16px 16px !important; border-left: 0 !important; border-right: 0 !important; scrollbar-width: none; }
body.max-phone .cfg-panel::-webkit-scrollbar, body.max-phone .spell-box::-webkit-scrollbar, body.max-phone .movie-panel::-webkit-scrollbar,
body.max-ipad .cfg-panel::-webkit-scrollbar, body.max-ipad .spell-box::-webkit-scrollbar, body.max-ipad .movie-panel::-webkit-scrollbar { display: none; }
body.max-phone .hadev-grip, body.max-phone .fuel-map-grip, body.max-phone .cfg-resize, body.max-phone .edge-rz,
body.max-ipad .hadev-grip, body.max-ipad .fuel-map-grip, body.max-ipad .cfg-resize, body.max-ipad .edge-rz { display: none !important; }
.haf-devices { font: inherit; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 8px; cursor: pointer; flex: none;
  background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.haf-devices:hover { background: rgba(var(--acc),.3); }
.sup-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.sup-sw { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; padding: 0; border: 2px solid rgba(255,255,255,.15); position: relative; overflow: hidden; }
.sup-sw.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(var(--sup),.7); }
.sup-sw-match { background: conic-gradient(#22d3ee,#a855f7,#ec4899,#f59e0b,#22c55e,#22d3ee); color: #fff; font-size: 13px; line-height: 1; }
.sup-sw-custom { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); }
.sup-sw-custom input[type=color] { width: 30px; height: 30px; border: none; background: none; padding: 0; cursor: pointer; }
.spell-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 22px; padding: 10px 14px; border-radius: 12px;
  background: rgba(18,26,44,.9); color: var(--ink); border: 1px solid var(--line); outline: none; }
.spell-input:focus { border-color: rgba(46,140,255,.6); box-shadow: 0 0 10px rgba(var(--acc),.25); }
.spell-btns { display: flex; gap: 10px; margin-top: 14px; }
.spell-btn { flex: 1; font: inherit; font-size: 15px; padding: 10px 0; border-radius: 999px; cursor: pointer;
  background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); transition: background .2s, border-color .2s; }
.spell-btn:hover { background: rgba(40,60,90,.9); border-color: rgba(46,140,255,.5); }
.spell-primary { border-color: rgba(var(--acc),.6); color: #bff3ff; box-shadow: 0 0 12px rgba(var(--acc),.25); }
.spell-hint { margin-top: 9px; font-size: 11.5px; color: var(--muted); text-align: center; }
/* the [🔎 Full details] pill on live answer cards */
.card-full { display: inline-block; margin-top: 10px; font: inherit; font-size: 12px; padding: 5px 12px;
  border-radius: 999px; cursor: pointer; background: rgba(18,26,44,.85); color: rgb(var(--acc3));
  border: 1px solid rgba(var(--acc),.45); transition: background .2s; }
.card-full:hover { background: rgba(40,60,90,.9); }
/* v3.89 — free widget cards never animate position (a transition here made drags lag/fly) */
.wdg-free { transition: none !important; animation: none !important; }
/* v4.64 — drag-to-resize grip on every widget (snaps to preset sizes) */
.wdg-resize { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; cursor: nwse-resize; z-index: 6; touch-action: none;
  background: linear-gradient(135deg, transparent 45%, rgba(var(--acc),.5) 45%, rgba(var(--acc),.5) 62%, transparent 62%, transparent 74%, rgba(var(--acc),.5) 74%, rgba(var(--acc),.5) 90%, transparent 90%); }
.wdg-resize:hover { background: linear-gradient(135deg, transparent 45%, rgba(var(--acc),.95) 45%, rgba(var(--acc),.95) 62%, transparent 62%, transparent 74%, rgba(var(--acc),.95) 74%, rgba(var(--acc),.95) 90%, transparent 90%); }
.wdg-resizing { outline: 2px solid rgba(var(--acc),.6); outline-offset: -2px; }
/* v8.82 — edge/corner resize handles for any window (widget + supplement). Invisible; just hit-zones + cursors. */
.edge-rz { position: absolute; z-index: 5; background: transparent; touch-action: none; }
.edge-rz-n { top: 0; left: 14px; right: 14px; height: 7px; cursor: ns-resize; }
.edge-rz-s { bottom: 0; left: 14px; right: 14px; height: 7px; cursor: ns-resize; }
.edge-rz-e { right: 0; top: 14px; bottom: 14px; width: 7px; cursor: ew-resize; }
.edge-rz-w { left: 0; top: 14px; bottom: 14px; width: 7px; cursor: ew-resize; }
.edge-rz-ne { top: 0; right: 0; width: 15px; height: 15px; cursor: nesw-resize; }
.edge-rz-nw { top: 0; left: 0; width: 15px; height: 15px; cursor: nwse-resize; }
.edge-rz-se { bottom: 0; right: 0; width: 15px; height: 15px; cursor: nwse-resize; }
.edge-rz-sw { bottom: 0; left: 0; width: 15px; height: 15px; cursor: nesw-resize; }
.edge-rzing { outline: 2px solid rgba(var(--acc),.6); outline-offset: -2px; }
/* header buttons must stay clickable above the top edge/corner handles */
.res-card-head .wdg-menucorner, .res-card-head .res-x, .res-card-head .wdg-grip,
.movie-panel-head .res-x, .movie-panel-head .sup-gear, .movie-panel-head > button,
.spell-head > button, .ytp-head > button, .cal-mhead > button, .ha-modhead > button, .spot-head > button { position: relative; z-index: 7; }
/* no edge-resize while a widget is intentionally collapsed (use the ↺ reset or double-click to expand first) */
.res-card.wdg-collapsed .edge-rz { display: none !important; }
body.max-phone .wdg-stacked .edge-rz, body.max-ipad .wdg-stacked .edge-rz { display: none !important; }
/* ↺ Reset-to-native button in the widget settings panel */
.wopt-resetbtn { font: inherit; font-size: 12.5px; padding: 7px 12px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.16); color: var(--ink); border: 1px solid rgba(var(--acc),.4); }
.wopt-resetbtn:hover { background: rgba(var(--acc),.28); }
/* v7.47 — Focus mode (spotlight one widget, dim the rest) + double-click pop-out big */
body.max-focusmode #widgets .res-card:not(.wdg-spotlight) { opacity: .12; filter: blur(1.5px); pointer-events: none; transition: opacity .25s, filter .25s; }
body.max-focusmode .res-card.wdg-spotlight { box-shadow: 0 0 0 3px rgba(var(--acc),.7), 0 0 60px rgba(var(--acc),.5); }
.res-card.wdg-popout { position: fixed !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%,-50%) !important; width: min(1100px, 88vw) !important; height: min(820px, 84vh) !important; z-index: 350 !important; box-shadow: 0 0 0 100vmax rgba(2,6,14,.62), 0 24px 70px rgba(0,0,0,.6) !important; }
.wdg-size-tag { position: absolute; right: 8px; bottom: 8px; z-index: 7; font-size: 13px; font-weight: 800; letter-spacing: .04em;
  color: #d6f6ff; background: rgba(8,14,26,.9); border: 1px solid rgba(var(--acc),.6); border-radius: 8px; padding: 3px 9px; pointer-events: none; }
/* v7.39 — supplement-window settings: ⚙ header button, live resize badge, the settings panel */
.sup-gear { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; opacity: .85; }
.sup-gear:hover { color: rgb(var(--acc)); opacity: 1; }
.sup-sizetag { position: absolute; right: 10px; bottom: 34px; z-index: 30; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #d6f6ff; background: rgba(8,14,26,.92); border: 1px solid rgba(var(--acc),.6); border-radius: 8px; padding: 3px 9px; pointer-events: none; }
.sup-set-sec { margin-bottom: 14px; }
.sup-set-h { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.sup-set-now { font-weight: 600; font-size: 11px; color: var(--muted); }
.sup-set-row { display: flex; flex-wrap: wrap; gap: 6px; }
/* v8.45 — per-window opacity override row */
.sup-set-orow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; cursor: pointer; margin-bottom: 6px; }
.sup-set-orow input { transform: scale(1.15); cursor: pointer; }
.sup-set-oprow { align-items: center; gap: 10px; }
.sup-set-oprow input[type="range"] { flex: 1 1 auto; }
.sup-set-oprow #supOpV { font-size: 12px; color: var(--muted); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.sup-op-dim { opacity: .45; }
.sup-set-b { font: inherit; font-size: 12px; padding: 6px 11px; border-radius: 8px; background: rgba(var(--acc),.14); color: #cdeffb; border: 1px solid rgba(var(--acc),.45); cursor: pointer; }
.sup-set-b:hover { background: rgba(var(--acc),.26); }
.sup-set-note { font-size: 11px; color: var(--muted); margin-bottom: 6px; line-height: 1.4; }
.sup-set-inp { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: rgba(18,26,44,.9); color: var(--ink); border: 1px solid var(--line); }
/* ===== v4.66 — Notes widget + rich-text note editor ===== */
.nw-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 16px 10px; line-height: 1.6; }
.nw-search { flex: 1 1 auto; min-width: 90px; box-sizing: border-box; margin: 0; padding: 7px 11px; border-radius: 10px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.35); color: #eaf3ff; font: inherit; font-size: 13px; }
.nw-search:focus { outline: none; border-color: rgba(var(--acc),.65); }
/* v9.79 — My Notes body toolbar (＋ New beside search; archive/sent moved to the ⋯ menu) */
.nw-toolbar { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; flex-wrap: wrap; }
.nw-addbtn { flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 10px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); }
.nw-addbtn:hover { background: rgba(var(--acc),.3); }
.nw-back { flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 9px; cursor: pointer; background: rgba(18,26,44,.85); color: var(--ink); border: 1px solid var(--line); }
.nw-back:hover { background: rgba(40,60,90,.9); }
.nw-viewlbl { font-size: 12px; font-weight: 700; color: rgb(var(--acc2)); margin-left: auto; }
/* v10.07 — read a sent note (with embedded images) */
.nw-viewbody { padding: 6px 4px; font-size: 14px; line-height: 1.55; color: var(--ink); word-break: break-word; }
.nw-viewbody img { max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0; display: block; }
.nw-viewbody a { color: rgb(var(--acc2)); }
/* v9.82 — 📰 Newspaper supplement */
.np-body { overflow: auto; }
.np-loading { padding: 24px; text-align: center; color: var(--muted); font-size: 14px; }
.np-mast { text-align: center; border-bottom: 3px double rgba(var(--acc),.6); padding: 2px 6px 12px; margin-bottom: 14px; }
.np-mtitle { font-family: Georgia, 'Times New Roman', serif; font-size: 32px; font-weight: 800; letter-spacing: .5px; color: var(--ink); }
.np-msub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.np-grid { column-count: 3; column-gap: 16px; }
/* v9.86 — compact rows: a small thumbnail beside the headline (images ~70% smaller) so far more stories fit */
.np-card { break-inside: avoid; position: relative; display: flex; gap: 10px; margin: 0 0 11px; padding: 0 0 11px; border-bottom: 1px solid rgba(255,255,255,.1); cursor: pointer; }
.np-card:hover .np-h { color: rgb(var(--acc2)); }
.np-num { position: absolute; top: 2px; left: 2px; z-index: 2; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 5px; background: rgba(var(--acc),.92); color: #03151c; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.np-imgwrap { flex: 0 0 78px; width: 78px; height: 78px; margin: 0; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.04); }
.np-img { width: 78px; height: 78px; display: block; object-fit: cover; }
.np-txt { flex: 1 1 auto; min-width: 0; }
.np-h { font-family: Georgia, 'Times New Roman', serif; font-size: 13.5px; font-weight: 700; line-height: 1.22; color: var(--ink); }
.np-src { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.np-lead { column-span: all; border-bottom: 2px solid rgba(var(--acc),.4); padding-bottom: 13px; margin-bottom: 15px; }
.np-lead .np-imgwrap { flex-basis: 150px; width: 150px; height: 96px; }
.np-lead .np-img { width: 150px; height: 96px; }
.np-lead .np-h { font-size: 18px; line-height: 1.18; }
@media (max-width: 900px) { .np-grid { column-count: 2; } .np-mtitle { font-size: 26px; } }
@media (max-width: 560px) { .np-grid { column-count: 1; } }
/* v9.98 — 💡 Ideas widget (Pinterest-style masonry) */
.idea-body, .idea-favs-body { display: flex; flex-direction: column; min-height: 0; }
.idea-wrap { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
.idea-form { display: flex; gap: 6px; }
.idea-q { flex: 1 1 auto; font: inherit; font-size: 14px; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.35); color: #eaf3ff; }
.idea-q:focus { outline: none; border-color: rgba(var(--acc),.65); }
.idea-go { font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 10px; cursor: pointer; background: rgba(var(--acc),.18); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); }
.idea-statusline { font-size: 11.5px; color: var(--muted); }
.idea-empty { font-size: 12.5px; color: var(--muted); padding: 16px 6px; line-height: 1.5; }
.idea-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.idea-grid { column-count: 3; column-gap: 8px; }   /* v10.06 — natural height inside .idea-scroll (JS sets columns); scroll is on the wrapper so WIDE = more columns, not sideways overflow */
.idea-favs-body { display: flex; flex-direction: column; min-height: 0; }
.idea-favs-body .idea-grid { column-count: 3; overflow: visible; }
@media (max-width: 640px) { .idea-grid { column-count: 2; } }
.idea-card { break-inside: avoid; position: relative; margin: 0 0 8px; border-radius: 10px; overflow: hidden; cursor: pointer; background: rgba(255,255,255,.04); }
.idea-img { width: 100%; display: block; }
.idea-acts { position: absolute; top: 6px; right: 6px; display: flex; gap: 5px; opacity: 0; transition: opacity .12s; }
.idea-card:hover .idea-acts { opacity: 1; }
.idea-acts button { width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; background: rgba(6,12,24,.82); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.idea-acts button:hover { background: rgba(var(--acc),.5); }
.idea-more { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 8px 6px; font-size: 11px; font-weight: 700; color: #fff; text-align: center; background: linear-gradient(0deg, rgba(6,12,24,.85), transparent); opacity: 0; transition: opacity .12s; }
.idea-card:hover .idea-more { opacity: 1; }
.idea-rm:hover { background: rgba(244,63,94,.7) !important; }
.idea-rename { background: none; border: 0; color: var(--muted); font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 6px; flex: 0 0 auto; }
.idea-rename:hover { color: rgb(var(--acc2)); background: rgba(var(--acc),.16); }
.idea-img { cursor: grab; }
.movie-panel.idea-pop .movie-panel-body { padding: 0; overflow: hidden; }
.idea-pop-img { width: 100%; display: block; cursor: pointer; }
.nw-list { display: flex; flex-direction: column; }
.nw-note { display: flex; gap: 10px; padding: 9px 2px; border-bottom: 1px solid rgba(120,160,220,.12); }
.nw-note:last-child { border-bottom: 0; }
.nw-num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: rgb(var(--acc3)); background: rgba(var(--acc),.12); border: 1px solid rgba(var(--acc),.3); }
.nw-main { min-width: 0; flex: 1; }
.nw-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nw-btns { display: flex; gap: 5px; margin: 5px 0 3px; flex-wrap: wrap; }
.nw-b { font: inherit; font-size: 11px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); }
.nw-b:hover { background: rgba(var(--acc),.18); border-color: rgba(var(--acc),.45); }
/* v5.28 — single-icon action row on each note */
.nw-iconrow { gap: 4px; }
.nw-i { font: inherit; font-size: 14px; line-height: 1; width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; cursor: pointer; background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); padding: 0; }
.nw-i:hover { background: rgba(var(--acc),.18); border-color: rgba(var(--acc),.45); }
.nw-i.nw-del { color: #ff9c9c; }
.nw-i.nw-del:hover { background: rgba(255,74,74,.16); border-color: rgba(255,74,74,.5); }
.nw-i.nw-claude:hover { background: rgba(180,120,255,.18); border-color: rgba(180,120,255,.5); }
.card-hbtn.on { background: rgba(var(--acc),.22); border-color: rgba(var(--acc),.55); }
.nw-date { font-size: 10.5px; color: var(--muted); }
/* rich-text editor modal */
.note-edit-panel { width: min(680px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
/* v5.12 — note editor: don't dim the screen, and let the panel move + resize */
#noteEdit { background: transparent; backdrop-filter: none; pointer-events: none; }
/* v5.75 — custom grip handles resize (both directions) reliably; native resize retired */
#noteEdit .note-edit-panel { pointer-events: auto; resize: none; overflow: auto; position: relative; min-width: 300px; min-height: 260px; }
.note-resize { position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; cursor: nwse-resize; z-index: 6;
  background: linear-gradient(135deg, transparent 42%, rgba(120,160,220,.75) 42%, rgba(120,160,220,.75) 55%, transparent 55%); border-radius: 0 0 8px 0; }
#noteEdit .cfg-head { cursor: move; touch-action: none; }
/* v5.21 — Settings window: don't dim the screen, and let it be dragged by its header */
#cfg { background: transparent; backdrop-filter: none; pointer-events: none; }
#cfg .cfg-panel { pointer-events: auto; }
#cfg .cfg-head { cursor: move; touch-action: none; }
/* v5.23 — Chat widget: two-way bubbles, selected voice */
.chatw-body { display: flex; flex-direction: column; }
.chatw-out { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; min-height: 60px; }
.chatw-me, .chatw-max { max-width: 85%; padding: 7px 11px; border-radius: 12px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.chatw-me { align-self: flex-end; background: rgba(46,140,255,.22); border: 1px solid rgba(46,140,255,.4); border-bottom-right-radius: 4px; }
.chatw-max { align-self: flex-start; background: rgba(120,160,220,.12); border: 1px solid rgba(120,160,220,.22); border-bottom-left-radius: 4px; }
.chatw-typing { opacity: .6; letter-spacing: 2px; }
.chatw-body .cw-form { margin-top: 6px; }
/* v5.20 — Video Games widget */
.games-body { display: flex; flex-direction: column; }
.games-ctl { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.games-ctl .wdg-size, .games-search input { font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 8px; background: rgba(10,18,34,.6); color: var(--ink); border: 1px solid rgba(120,160,220,.28); }
.games-search { flex: 1 1 120px; display: flex; } .games-search input { width: 100%; }
.games-grid { flex: 1 1 auto; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; align-content: start; }
.game-cell { position: relative; border: 0; padding: 0; cursor: pointer; border-radius: 10px; overflow: hidden; background: #0a1424; aspect-ratio: 16/10; }
.game-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-noart { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 34px; }
.game-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 6px; text-align: left; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.85)); display: flex; flex-direction: column; gap: 1px; }
.game-info b { font-size: 12px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.game-info span { font-size: 11px; color: #ffd93b; }
/* v7.43 — game detail: gameplay clips + reviews */
.game-vids h4, .game-reviews h4 { font-size: 13px; margin: 12px 0 6px; }
.game-vids-wrap { display: flex; flex-direction: column; gap: 10px; }
.game-vid { display: flex; flex-direction: column; gap: 4px; }
.game-vid video { width: 100%; border-radius: 10px; background: #000; max-height: 340px; }
.game-vid-t { font-size: 11px; color: var(--muted); }
.game-reviews { margin-top: 6px; }
.game-rev { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 3px 0; }
.game-rev-t { flex: 0 0 88px; text-transform: capitalize; color: var(--ink); }
.game-rev-bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(120,160,220,.18); overflow: hidden; }
.game-rev-bar i { display: block; height: 100%; background: rgb(var(--acc)); }
.game-rev-p { flex: 0 0 36px; text-align: right; color: var(--muted); }
.games-setup { padding: 18px 12px; text-align: center; opacity: .85; font-size: 13px; line-height: 1.7; }
.games-setup a { color: rgb(var(--acc3)); }
.game-stores { margin-top: 10px; } .game-stores h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .7; margin: 0 0 6px; }
.game-stores a { display: inline-block; margin: 0 8px 6px 0; font-size: 12.5px; color: rgb(var(--acc3)); }
/* v5.18 — widget groups & colours manager (Settings → Widgets) */
.grp-mgr { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.grp-row { display: flex; align-items: center; gap: 10px; }
.grp-row input[type=color] { width: 34px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; flex: 0 0 auto; }
.grp-row .grp-name { flex: 1 1 auto; font-size: 13.5px; }
.grp-del { background: none; border: 0; color: #ff9c9c; font-size: 14px; cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.grp-del:hover { background: rgba(255,74,74,.16); }
.grp-add { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.grp-add .cfg-input { flex: 1 1 auto; }
.grp-add input[type=color] { width: 34px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; flex: 0 0 auto; }
/* v5.13 — currency: let the rate list scroll (wheel) when it doesn't all fit */
.fx-body { display: flex; flex-direction: column; }
.fx-body .fx-ref { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.note-edit-title { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; font-weight: 700; padding: 10px 13px; margin-bottom: 10px;
  border-radius: 10px; background: rgba(18,26,44,.9); color: var(--ink); border: 1px solid var(--line); outline: none; }
.note-edit-title:focus { border-color: rgba(46,140,255,.6); }
.note-tb { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 8px; }
.note-tb button { font: inherit; font-size: 13px; min-width: 30px; padding: 5px 9px; border-radius: 8px; cursor: pointer;
  background: rgba(18,26,44,.85); color: #cfe0f5; border: 1px solid var(--line); }
.note-tb button:hover { background: rgba(var(--acc),.2); border-color: rgba(var(--acc),.45); }
.note-tb-sep { width: 1px; height: 20px; background: rgba(120,160,220,.25); margin: 0 3px; }
/* v5.75 — 🎤 record button, pulsing red while recording */
.note-rec-btn.rec { background: rgba(255,59,59,.22) !important; border-color: rgba(255,90,90,.7) !important; color: #ffb3b3 !important; animation: noteRecPulse 1.1s ease-in-out infinite; }
@keyframes noteRecPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,59,59,.5); } 50% { box-shadow: 0 0 0 4px rgba(255,59,59,0); } }
.note-edit-body { flex: 1; min-height: 220px; overflow-y: auto; font: inherit; font-size: 14px; line-height: 1.6; padding: 12px 14px;
  border-radius: 12px; background: rgba(10,16,30,.85); color: var(--ink); border: 1px solid var(--line); outline: none; }
.note-edit-body:focus { border-color: rgba(46,140,255,.5); }
.note-edit-body ul, .note-edit-body ol { margin: 6px 0 6px 22px; }
.note-edit-body:empty::before { content: 'Write your note, paste a screenshot (Ctrl+V), or tap 📎 Attach…'; color: var(--muted); }
/* v5.73 — pasted screenshots inside a note */
.note-edit-body img { max-width: 100%; height: auto; display: block; margin: 6px 0; border-radius: 8px; border: 1px solid rgba(120,160,220,.3); }
/* v7.14 — 📎 attached files inside a note render as tappable chips (class attrs get sanitised away, so match by href) */
.note-edit-body a[href^="notefile/"] { display: inline-block; margin: 4px 0; padding: 5px 10px; border-radius: 8px;
  background: rgba(var(--acc),.12); border: 1px solid rgba(var(--acc),.4); color: rgb(var(--acc2)); text-decoration: none; }
.note-edit-body a[href^="notefile/"]:hover { background: rgba(var(--acc),.2); }
.note-attach-btn { white-space: nowrap; }
.note-edit-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.note-edit-actions .grow { flex: 1; }
.note-edit-actions .note-btn.ok { background: rgba(var(--acc),.18); color: rgb(var(--acc2)); border-color: rgba(var(--acc),.5); }
/* ===== v4.74 — styled "save arrangement" modal + hand-control widget ===== */
.wps-panel { width: min(440px, 92vw); }
.wps-name { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 11px 14px; margin-bottom: 12px;
  border-radius: 10px; background: rgba(18,26,44,.9); color: var(--ink); border: 1px solid var(--line); outline: none; }
.wps-name:focus { border-color: rgba(46,140,255,.6); box-shadow: 0 0 10px rgba(var(--acc),.22); }
.wps-h { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 4px 0 7px; }
.wps-existing { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; scrollbar-width: thin; }
.wps-erow { display: flex; gap: 5px; align-items: stretch; }
.wps-row { flex: 1; text-align: left; font: inherit; font-size: 13.5px; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.04); color: var(--ink); border: 1px solid rgba(120,160,220,.16); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wps-row:hover { background: rgba(var(--acc),.16); border-color: rgba(var(--acc),.45); }
.wps-del { flex: 0 0 auto; font-size: 12px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  background: rgba(255,90,90,.12); color: #ff8a8a; border: 1px solid rgba(255,90,90,.35); }
.wps-del:hover { background: rgba(255,90,90,.28); }
.wps-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* hand-control widget */
.hg-widget { display: flex; flex-direction: column; }
.hg-widget .hg-stage { width: 100%; border-radius: 10px; overflow: hidden; aspect-ratio: auto; flex: 1 1 auto; min-height: 90px; position: relative; background: #000; }
.hg-widget #hgVideo { width: 100%; height: 100%; object-fit: cover; display: block; }
.hg-ctl { margin-top: 8px; }
.hg-startbtn { width: 100%; font: inherit; font-size: 13px; padding: 8px; border-radius: 10px; cursor: pointer;
  background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.hg-startbtn:hover { background: rgba(var(--acc),.3); }
.hg-widget .hg-legend { padding: 8px 2px 2px; }
/* v7.45 — Hand Control: fingertip overlay, telemetry console, dwell buttons, make-it-rain */
.hg-wrap { display: flex; gap: 10px; flex: 1 1 auto; min-height: 90px; }
.hg-wrap .hg-stage { flex: 1 1 60%; }
.hg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hg-gbtns { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.hg-gbtn { position: relative; display: flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 700; padding: 7px 11px; border-radius: 999px; cursor: pointer; color: #eafff5; background: rgba(6,14,26,.72); border: 1px solid rgba(52,211,153,.5); backdrop-filter: blur(2px); }
.hg-gbtn-hot { border-color: #34d399; box-shadow: 0 0 14px rgba(52,211,153,.6); }
.hg-gbtn-ring { width: 14px; height: 14px; border-radius: 50%; background: transparent; flex: none; }
.hg-telem { flex: 0 0 38%; max-width: 200px; border: 1px solid rgba(52,211,153,.35); border-radius: 10px; background: rgba(3,12,9,.72); padding: 8px 10px; font-family: ui-monospace, "SF Mono", Consolas, monospace; overflow: hidden; }
.hg-telem-h { font-size: 10px; letter-spacing: .1em; color: #34d399; font-weight: 800; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.hg-telem-live { color: #f43f5e; font-size: 9px; animation: ppBlink 1.4s steps(2, jump-none) infinite; }
.hg-telem-body { font-size: 11px; }
.hg-tl { display: flex; justify-content: space-between; gap: 6px; padding: 2px 0; border-bottom: 1px dotted rgba(52,211,153,.16); color: rgba(52,211,153,.72); }
.hg-tl b { color: #eafff5; font-weight: 700; }
.hg-rain { position: fixed; inset: 0; z-index: 470; pointer-events: none; overflow: hidden; }
.hg-drop { position: absolute; top: -8%; width: 2px; height: 60px; background: linear-gradient(transparent, rgba(120,190,255,.85)); border-radius: 2px; animation: hgRainFall linear infinite; }
@keyframes hgRainFall { to { transform: translateY(115vh); } }
/* stack telemetry under the camera on narrow/phone layouts */
@media (max-width: 560px) { .hg-wrap { flex-direction: column; } .hg-wrap .hg-telem { max-width: none; flex-basis: auto; } }
/* v7.50 — Hand Control v2: per-hand/face toggle chips + gesture-remap panel */
.hg-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hg-tog { font: inherit; font-size: 12px; padding: 6px 11px; border-radius: 999px; cursor: pointer; color: var(--muted); background: rgba(120,160,220,.08); border: 1px solid var(--line); }
.hg-tog.on { color: #eafff5; background: rgba(52,211,153,.16); border-color: rgba(52,211,153,.55); }
.hg-tog-locked { opacity: .6; }
.hg-tog-gear { margin-left: auto; }
.hg-tl-hd { color: rgb(var(--acc3)) !important; font-weight: 800; letter-spacing: .06em; border-bottom: 0 !important; margin-top: 4px; }
.hg-gest-hint { font-size: 12px; color: var(--muted); margin-bottom: 10px; line-height: 1.4; }
.hg-gest-row { display: grid; grid-template-columns: 24px 1fr 1.3fr auto; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px dashed rgba(140,160,200,.14); }
.hg-gest-ic { font-size: 17px; text-align: center; }
.hg-gest-n { font-size: 13px; font-weight: 600; }
.hg-gest-act { font: inherit; font-size: 12.5px; padding: 6px 8px; border-radius: 8px; background: rgba(10,16,30,.7); color: var(--ink); border: 1px solid var(--line); min-width: 0; }
.hg-gest-mute { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); white-space: nowrap; }
/* ===== v4.76 — Fuel prices widget ===== */
.fuel-reg { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; }
.fuel-list { display: flex; flex-direction: column; gap: 2px; }
.fuel-row { display: grid; grid-template-columns: 46px auto 1fr; align-items: baseline; gap: 8px; text-decoration: none; color: inherit;
  padding: 6px 2px; border-bottom: 1px solid rgba(120,160,220,.1); }
.fuel-row:last-child { border-bottom: 0; }
.fuel-row:hover { background: rgba(120,160,220,.08); border-radius: 8px; }
.fuel-ty { font-size: 12px; font-weight: 700; color: rgb(var(--acc3)); }
.fuel-pr { font-size: 15px; font-weight: 800; color: #7dffa8; white-space: nowrap; }
.fuel-pr small { font-size: 9px; font-weight: 600; color: var(--muted); margin-left: 1px; }
.fuel-st { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
/* v4.79 — radius fuel widget + mini map */
.fuel-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 10px 0 5px; }
.fuel-h-mine { color: #ffd34d; }
.fuel-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid rgba(120,160,220,.1); padding: 7px 2px; cursor: pointer; color: inherit; font: inherit; }
.fuel-row:last-child { border-bottom: 0; }
.fuel-row:hover { background: rgba(120,160,220,.08); border-radius: 8px; }
.fuel-row.fuel-mine .fuel-pr { color: #7dffa8; }
.fuel-row .fuel-ty { font-size: 11px; font-weight: 700; color: rgb(var(--acc3)); min-width: 62px; }
.fuel-row .fuel-pr { font-size: 16px; font-weight: 800; color: #bfe9ff; white-space: nowrap; }
.fuel-row .fuel-pr small { font-size: 9px; font-weight: 600; color: var(--muted); }
.fuel-row .fuel-st { display: flex; flex-direction: column; text-align: left; color: var(--ink); font-size: 12px; }
.fuel-row .fuel-st i { font-style: normal; font-size: 10px; color: var(--muted); }
.fuel-map-ic { font-size: 14px; opacity: .6; }
.fuel-map { position: fixed; right: 24px; bottom: 24px; z-index: 125; width: 360px; height: 320px; display: flex; flex-direction: column;
  background: rgba(10,16,30,.98); border: 1px solid rgba(var(--acc),.5); border-radius: 14px; overflow: hidden; box-shadow: 0 16px 50px rgba(0,0,0,.6); cursor: move; }
.fuel-map-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12.5px; color: rgb(var(--acc2)); }
.fuel-map-head .res-x { background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer; }
.fuel-map-if { flex: 1; width: 100%; border: 0; background: #223; }
.fuel-map-foot { padding: 6px 12px; font-size: 12px; } .fuel-map-foot a { color: rgb(var(--acc3)); }
.fuel-map-grip { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; z-index: 3; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, rgba(var(--acc),.6) 50%); }
/* ===== v4.73 — Skills widget + Console widget ===== */
.skills-widget { display: flex; flex-direction: column; }
.skills-widget .skills-search { margin: 0 0 8px; }
.skills-widget .sw-body { flex: 1; overflow-y: auto; scrollbar-width: thin; }
.cw-body { display: flex; flex-direction: column; }
.cw-out { flex: 1; overflow-y: auto; scrollbar-width: thin; font-size: 13px; line-height: 1.5; padding: 2px 2px 8px; min-height: 40px; }
.cw-hint { color: var(--muted); font-size: 12px; line-height: 1.6; padding: 6px 2px; }
.cw-you { color: rgb(var(--acc2)); font-family: ui-monospace, monospace; font-size: 12.5px; padding: 3px 0; word-break: break-word; }
.cw-form { margin-top: 6px; }
/* v4.87 — MAX Answers widget (console + responses merged) */
.mx-body { display: flex; flex-direction: column; height: 100%; min-height: 0; }   /* v5.81 — fill the card so the transcript can grow */
.mx-out { flex: 1; overflow-y: auto; scrollbar-width: thin; padding: 2px 2px 8px; min-height: 60px; }
.mx-you { color: rgb(var(--acc2)); font-family: ui-monospace, monospace; font-size: 12.5px; padding: 8px 0 3px; word-break: break-word; }
.mx-max { background: rgba(120,160,220,.09); border: 1px solid rgba(120,160,220,.18); border-radius: 10px; padding: 8px 11px; margin-bottom: 4px; }
.mx-txt { font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.mx-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mx-imgs img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }
/* v4.90 — live listening status + mic transcript inside the widget */
.mx-live { display: flex; flex-direction: column; gap: 2px; padding: 6px 2px 4px; min-height: 18px; }
.mx-status { font-size: 12px; color: #7fd8ff; font-weight: 600; letter-spacing: .01em; }
.mx-status:empty { display: none; }
.mx-heard { font-size: 12px; color: var(--muted); font-style: italic; word-break: break-word; }
.mx-heard:empty { display: none; }
/* v5.66 — MAX CONSOLE: live mic transcript, colour-coded (white idle · green listening · yellow wake word) */
.mx-seclab { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #8ba6cf; margin: 8px 0 3px; }
.mx-transcript { flex: 1 1 40%; min-height: 64px; max-height: 42%; overflow-y: auto; scrollbar-width: thin;
  background: rgba(4,10,22,.5); border: 1px solid rgba(120,160,220,.18); border-radius: 10px; padding: 8px 10px;
  font-size: 13px; line-height: 1.55; word-break: break-word; }
/* v5.78 — grey idle · yellow listening · green MAX replies · red-bold wake + command triggers */
.mx-tl { color: #9aa6bb; }                                   /* grey — you, while MAX is idle */
.mx-tl.mx-listening { color: #ffd23f; }                      /* yellow — you, while MAX is listening */
.mx-tl.mx-resp { color: #57e08b; }                           /* green — MAX responding */
.mx-tl.mx-live-line { opacity: .72; font-style: italic; }    /* the current interim (still being heard) */
.mx-wake, .mx-cmd { color: #ff4d4d; font-weight: 800; }      /* wake word + command triggers — red bold */
.mx-tl.mx-resp .mx-wake, .mx-tl.mx-resp .mx-cmd { color: inherit; font-weight: inherit; }   /* don't recolour inside MAX's own reply */
.mx-out { flex: 1 1 30%; }
/* v5.68 — live microphone equalizer to the LEFT of the transcript */
/* v5.81 — transcript row GROWS to fill; equalizer stays 150px pinned at the top of the row */
.mx-hearrow { display: flex; gap: 8px; margin-bottom: 6px; flex: 1 1 auto; min-height: 120px; align-items: stretch; }
.mx-eqbox { flex: 0 0 96px; height: 150px; align-self: flex-start; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(120,160,220,.22); background: radial-gradient(120% 80% at 50% 50%, rgba(18,30,54,.9), rgba(4,10,22,.85)); }
.mx-eq-cv { width: 96px; height: 150px; display: block; }
.mx-hearrow .mx-transcript { flex: 1 1 auto; height: auto; min-height: 0; max-height: none; margin: 0; }
/* diagnostic / activation bar */
/* v5.81 — a FIXED 2-line strip under the input, reserved for system messages (stays put when empty) */
.mx-diag { display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 8px; flex: 0 0 auto;
  min-height: 2.6em; padding: 5px 2px 0; margin-top: 6px; font-size: 11.5px; line-height: 1.3;
  border-top: 1px solid rgba(120,160,220,.14); }
.cw-form { flex: 0 0 auto; }
.mx-diag-t { color: var(--muted); }
.mx-diag-t.warn { color: #ffd23f; }
.mx-diag-btn { font: inherit; font-size: 11.5px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  background: rgba(var(--acc),.16); color: #bdf0ff; border: 1px solid rgba(var(--acc),.45); }
.mx-diag-btn:hover { background: rgba(var(--acc),.32); }
.mx-diag-btn.warn { background: rgba(255,90,90,.16); border-color: rgba(255,90,90,.5); color: #ffb3b3; }
.mx-diag-btn.warn:hover { background: rgba(255,90,90,.3); }
/* v5.80 — 📋 voice-command control panel */
.mxcmd-panel { position: fixed; top: 64px; right: 20px; z-index: 130; width: min(380px, 92vw); max-height: 78vh; display: flex; flex-direction: column;
  background: rgba(10,16,30,.98); border: 1px solid rgba(var(--acc),.4); border-radius: 14px; padding: 10px; box-shadow: 0 18px 54px rgba(0,0,0,.6); }
.mxcmd-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: rgb(var(--acc3)); font-size: 14px; padding: 2px 2px 8px; }
.mxcmd-x { background: none; border: 0; color: var(--muted); font-size: 15px; cursor: pointer; }
.mxcmd-x:hover { color: #ff8a8a; }
.mxcmd-search { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid var(--line); }
.mxcmd-note { font-size: 11px; color: var(--muted); margin: 7px 2px; line-height: 1.4; }
.mxcmd-list { overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 10px; }
.mxcmd-grp { border-left: 3px solid rgba(var(--acc),.5); padding-left: 9px; }
.mxcmd-g { font-size: 13px; font-weight: 800; color: rgb(var(--acc2)); }
.mxcmd-d { font-size: 11.5px; color: var(--muted); margin: 1px 0 5px; line-height: 1.4; }
.mxcmd-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mxcmd-chip { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: rgba(120,160,220,.14); border: 1px solid rgba(120,160,220,.34); color: #dbe8ff; }
.mxcmd-empty { font-size: 12px; color: var(--muted); padding: 8px 2px; }
.mxcmd-panel { resize: none; }
.mxcmd-resize { position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; cursor: nwse-resize; z-index: 3;
  background: linear-gradient(135deg, transparent 42%, rgba(var(--acc),.7) 42%, rgba(var(--acc),.7) 55%, transparent 55%); border-radius: 0 0 12px 0; }
/* v5.84 — per-widget voice-command editor in the ⚙ options */
.wopt-cmd-lab { font-size: 11px; font-weight: 700; color: rgb(var(--acc3)); margin: 10px 0 5px; }
.wopt-cmd-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.wopt-cmd-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 6px 3px 10px; border-radius: 999px; background: rgba(120,160,220,.16); border: 1px solid rgba(120,160,220,.4); color: #eaf1ff; }
.wopt-cmd-chip button { background: none; border: 0; color: #9fb2d8; cursor: pointer; font-size: 12px; line-height: 1; padding: 0 2px; }
.wopt-cmd-chip button:hover { color: #ff8a8a; }
.wopt-cmd-none { font-size: 11.5px; color: var(--muted); }
.wopt-cmd-add { display: flex; gap: 6px; }
.wopt-cmd-add input { flex: 1 1 auto; }
.wopt-cmd-addbtn { font: inherit; font-size: 12px; padding: 5px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.wopt-cmd-addbtn:hover { background: rgba(var(--acc),.3); }
/* v5.87 — 🍎 Calorie Count widget */
.cal-body { display: flex; flex-direction: column; gap: 7px; }
.cal-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cal-big { font-size: 30px; font-weight: 800; line-height: 1; color: #eef4ff; }
.cal-big small { font-size: 12px; font-weight: 600; color: var(--muted); }
.cal-left { font-size: 13px; font-weight: 700; color: #57e08b; white-space: nowrap; }
.cal-left.over { color: #ff8a8a; }
.cal-bar { height: 8px; border-radius: 999px; background: rgba(120,160,220,.18); overflow: hidden; }
.cal-bar span { display: block; height: 100%; background: linear-gradient(90deg,rgb(var(--acc)),#4fe98a); border-radius: 999px; transition: width .3s; }
.cal-kj { font-size: 11px; color: var(--muted); }
.cal-search { display: flex; gap: 6px; }
.cal-search .cal-q { flex: 1 1 auto; box-sizing: border-box; font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 9px; background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid var(--line); }
.cal-search button { font-size: 13px; padding: 0 11px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.cal-results { display: flex; flex-direction: column; gap: 4px; max-height: 34%; overflow-y: auto; scrollbar-width: thin; }
.cal-results:empty { display: none; }
.cal-res { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 9px; background: rgba(120,160,220,.08); border: 1px solid rgba(120,160,220,.16); }
.cal-res-n { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--ink); }
.cal-res-n small { color: var(--muted); }
.cal-res-p { font-size: 11px; color: rgb(var(--acc3)); }
.cal-res-add { flex: 0 0 auto; font-size: 15px; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.cal-seclab { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #8ba6cf; margin-top: 2px; }
.cal-log { flex: 1 1 auto; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 3px; min-height: 40px; }
.cal-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 2px; border-bottom: 1px solid rgba(120,160,220,.1); }
.cal-rn { flex: 1 1 auto; min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-rn small { color: var(--muted); }
.cal-row b { color: rgb(var(--acc3)); }
.cal-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; }
.cal-x:hover { color: #ff8a8a; }
/* v6.01 — quick-add + inline edit of calorie rows */
.cal-search .cal-qadd { font-size: 16px; padding: 0 12px; }
.cal-ed { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 2px; }
.cal-ed:hover { color: rgb(var(--acc2)); }
.cal-row.cal-editing { gap: 6px; }
.cal-rn-ed { flex: 0 1 auto; max-width: 40%; }
.cal-eq { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12px; padding: 4px 7px; border-radius: 7px; background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid var(--line); }
.cal-ek { flex: 0 0 62px; width: 62px; font: inherit; font-size: 12px; padding: 4px 6px; border-radius: 7px; background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid var(--line); }
.cal-eq:focus, .cal-ek:focus { outline: none; border-color: rgba(120,150,255,.6); }
.cal-ok { flex: 0 0 auto; background: rgba(74,222,128,.18); border: 1px solid rgba(74,222,128,.45); color: #baf7c9; cursor: pointer; font-size: 12px; border-radius: 7px; padding: 4px 9px; }
.cal-ok:hover { background: rgba(74,222,128,.32); }
.cal-empty, .cal-loading { font-size: 12px; color: var(--muted); padding: 6px 2px; line-height: 1.4; }
.cal-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-btn { font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 9px; cursor: pointer; background: rgba(120,160,220,.14); color: #cfe0f5; border: 1px solid rgba(120,160,220,.4); }
.cal-btn:hover { background: rgba(120,160,220,.28); }
/* calorie modals (My Foods / History) */
.cal-modal { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 132; width: min(460px, 94vw); max-height: 78vh; display: flex; flex-direction: column;
  background: rgba(10,16,30,.98); border: 1px solid rgba(var(--acc),.4); border-radius: 14px; padding: 12px; box-shadow: 0 18px 54px rgba(0,0,0,.6); }
.cal-mhead { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: rgb(var(--acc3)); font-size: 15px; margin-bottom: 8px; }
.cal-mx { background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; }
.cal-mx:hover { color: #ff8a8a; }
.cal-mnote { font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-bottom: 8px; }
.cal-mlist { overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.cal-frow, .cal-hrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: rgba(120,160,220,.08); border: 1px solid rgba(120,160,220,.16); }
.cal-fnm, .cal-hrow span { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink); }
.cal-fnm small, .cal-hrow small { color: var(--muted); }
.cal-fadd { font-size: 11.5px; padding: 4px 9px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); white-space: nowrap; }
/* v6.40 — remembered qty box to the left of ＋log (replaces the popup dialog) */
.cal-fq { width: 62px; flex: 0 0 auto; font-size: 12px; padding: 4px 6px; text-align: center; border-radius: 8px;
  background: rgba(10,16,30,.8); color: #eaf1ff; border: 1px solid rgba(120,160,220,.3); }
.cal-fq:focus { outline: none; border-color: rgba(var(--acc),.6); }
.cal-fdel { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; }
.cal-fdel:hover { color: #ff8a8a; }
.cal-madd { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-madd .cal-fn { flex: 1 1 140px; }
.cal-madd input, .cal-madd select { box-sizing: border-box; font: inherit; font-size: 13px; padding: 7px 9px; border-radius: 9px; background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid var(--line); }
.cal-madd .cal-fk { width: 80px; }
/* ═══ v7.92 — My Foods editable table (ref codes, KJ↔Cal, groups, portions) ═══ */
.cal-ftools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cal-ghost { background: rgba(120,160,220,.12) !important; color: #cfe0ff !important; border-color: rgba(120,160,220,.3) !important; }
.cal-ftablewrap { overflow: auto; scrollbar-width: thin; border: 1px solid var(--line); border-radius: 10px; }
.cal-ftable { border-collapse: collapse; width: 100%; font-size: 12px; }
.cal-ftable thead th { position: sticky; top: 0; z-index: 1; background: rgba(10,20,38,.96); color: var(--muted);
  font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; text-align: left;
  padding: 7px 6px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.cal-ftr td { padding: 4px 6px; border-bottom: 1px solid rgba(120,160,220,.12); vertical-align: middle; }
.cal-ftr:last-child td { border-bottom: 0; }
.cal-fref { font-weight: 700; color: rgb(var(--acc2)); font-size: 12px; text-align: center; white-space: nowrap; }
.cal-ci { box-sizing: border-box; font: inherit; font-size: 12px; padding: 5px 7px; border-radius: 8px;
  background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid var(--line); }
.cal-ci:focus { outline: none; border-color: rgba(var(--acc),.6); }
select.cal-ci { padding: 5px 5px; }
.cal-cn { width: 140px; min-width: 110px; }
.cal-cg { width: 118px; }
.cal-ckj, .cal-ckc { width: 66px; text-align: right; }
.cal-cp { width: 104px; }
.cal-cd { width: 150px; min-width: 110px; }
.cal-cq { width: 62px; text-align: center; }
.cal-ftr .cal-fadd { padding: 5px 9px; }
.cal-ftable .cal-empty { text-align: center; padding: 16px 8px; color: var(--muted); }
/* the little add/rename/remove list editor (Groups & Portions) */
.cle-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cle-row { display: flex; align-items: center; gap: 8px; }
.cle-in { flex: 1 1 auto; min-width: 0; box-sizing: border-box; font: inherit; font-size: 13px; padding: 7px 9px;
  border-radius: 9px; background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid var(--line); }
.cle-in:focus { outline: none; border-color: rgba(var(--acc),.6); }
.cle-add { display: flex; gap: 6px; }
.cle-new { flex: 1 1 auto; box-sizing: border-box; font: inherit; font-size: 13px; padding: 7px 9px;
  border-radius: 9px; background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid var(--line); }
.cle-new:focus { outline: none; border-color: rgba(var(--acc),.6); }
/* v6.01 — My Foods / History as movable panels; styled target modal; history chart */
.cal-panel { width: min(480px, 94vw); height: min(560px, 86vh); }
.cal-panel-body { padding: 12px 14px; }
.cal-panel-body .cal-mlist { max-height: none; margin-bottom: 10px; }
.cal-tgtmodal { width: min(380px, 92vw); }
.cal-tfield { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 9px 0; font-size: 13px; color: var(--ink); }
.cal-tfield span { opacity: .85; }
.cal-tfield input { width: 110px; box-sizing: border-box; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 9px; background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid var(--line); text-align: right; }
.cal-tfield input:focus { outline: none; border-color: rgba(120,150,255,.6); }
.cal-tbtns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cal-tghost { background: rgba(120,160,220,.12) !important; color: #cfe0ff !important; border-color: rgba(120,160,220,.3) !important; }
.cal-chart { display: flex; align-items: flex-end; gap: 5px; height: 150px; padding: 6px 2px 0; overflow-x: auto; margin-bottom: 12px; }
.cal-cbar { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 30px; height: 100%; justify-content: flex-end; }
.cal-cbarwrap { position: relative; width: 22px; flex: 1 1 auto; display: flex; align-items: flex-end; }
.cal-cfill { width: 100%; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #4ade80, #22c55e); min-height: 3px; }
.cal-cfill.over { background: linear-gradient(180deg, #fb7185, #ef4444); }
.cal-ctgt { position: absolute; left: -2px; right: -2px; height: 0; border-top: 1.5px dashed rgba(255,212,94,.85); }
.cal-cval { font-size: 9px; color: var(--muted); }
.cal-cday { font-size: 9px; color: var(--muted); white-space: nowrap; }
.cal-hlist { display: flex; flex-direction: column; gap: 4px; }
.cal-hover { color: #ff8a8a !important; }
/* v5.93 — recipe/cocktail search supplement (reuses .cal-modal) */
.fs-form { display: flex; gap: 6px; margin-bottom: 8px; }
.fs-form .fs-q { flex: 1 1 auto; box-sizing: border-box; font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 9px; background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid var(--line); }
.fs-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 9px; background: rgba(120,160,220,.08); border: 1px solid rgba(120,160,220,.16); }
.fs-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.fs-nm { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink); }
.fs-open { font-size: 11.5px; padding: 4px 10px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.fs-fav { background: none; border: 0; color: #ffd23f; cursor: pointer; font-size: 15px; }
/* v5.94 — 🔊 Audio Mixer widget */
.amix-body { display: flex; flex-direction: column; gap: 9px; }
.amix-eqbox { border-radius: 12px; overflow: hidden; border: 1px solid rgba(120,160,220,.22); background: radial-gradient(120% 90% at 50% 100%, rgba(18,30,54,.9), rgba(4,10,22,.85)); padding: 4px; }
.amix-eq { width: 100%; height: 70px; display: block; }
.amix-master { display: flex; align-items: center; gap: 8px; }
.amix-mlbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: rgb(var(--acc3)); flex: 0 0 auto; }
.amix-mvol { flex: 1 1 auto; accent-color: rgb(var(--acc)); }
.amix-mval { font-size: 11.5px; color: var(--muted); flex: 0 0 34px; text-align: right; }
.amix-list { display: flex; flex-direction: column; gap: 6px; }
.amix-srcs { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.amix-none { font-size: 12px; color: var(--muted); text-align: center; padding: 8px 6px; opacity: .85; }
/* 📺 v8.74 — My TV */
.mytv-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; }
.mytv-search { display: flex; gap: 8px; }
.mytv-search input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 999px; background: rgba(18,26,44,.95); color: var(--ink); border: 1px solid var(--line); outline: none; }
.mytv-search button { width: 38px; height: 36px; border-radius: 50%; cursor: pointer; flex: none; background: rgba(18,26,44,.9); color: rgb(var(--acc3)); border: 1px solid var(--line); }
.mytv-list { flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 3px; }
.mytv-list::-webkit-scrollbar { display: none; }
.mytv-row { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 9px; cursor: pointer; text-align: left; background: rgba(255,255,255,.03); border: 1px solid transparent; color: var(--ink); font: inherit; }
.mytv-row:hover { background: rgba(var(--acc),.1); border-color: rgba(var(--acc),.3); }
.mytv-row .mytv-ic { flex: none; color: rgb(var(--acc)); font-size: 13px; }
.mytv-meta { display: flex; flex-direction: column; min-width: 0; }
.mytv-meta b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mytv-meta i { font-style: normal; font-size: 11px; color: var(--muted); }
.mytv-off { opacity: .45; cursor: default; }
.mytv-player .movie-panel-body { padding: 0; background: #000; }
.mytv-video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
/* 📖 Stories (v8.78) */
.story-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; }
.story-tools { display: flex; gap: 8px; }
.story-tellbtn { flex: 1 1 auto; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 12px; border-radius: 999px; cursor: pointer; background: rgba(var(--acc),.16); color: var(--ink); border: 1px solid rgba(var(--acc),.4); }
.story-tellbtn:hover { background: rgba(var(--acc),.28); }
.story-newbtn { flex: 0 0 auto; width: 40px; font-size: 15px; border-radius: 999px; cursor: pointer; background: rgba(18,26,44,.9); color: rgb(var(--acc3)); border: 1px solid var(--line); }
.story-newbtn:hover:not(:disabled) { background: rgba(var(--acc),.2); }
.story-newbtn:disabled { opacity: .55; cursor: default; }
.story-list { flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 4px; }
.story-list::-webkit-scrollbar { display: none; }
.story-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 10px; cursor: pointer; text-align: left; background: rgba(255,255,255,.03); border: 1px solid transparent; color: var(--ink); font: inherit; }
.story-row:hover { background: rgba(var(--acc),.1); border-color: rgba(var(--acc),.3); }
.story-meta { display: flex; flex-direction: column; min-width: 0; }
.story-meta b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-meta i { font-style: normal; font-size: 11px; color: var(--muted); }
.story-go { flex: none; color: rgb(var(--acc)); font-size: 12px; }
/* traced reader */
.story-reader .movie-panel-body { padding: 0; display: flex; flex-direction: column; }
.story-rhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex: none; }
.story-rgenre { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.story-play { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; background: rgba(var(--acc),.18); color: var(--ink); border: 1px solid rgba(var(--acc),.45); }
.story-play:hover { background: rgba(var(--acc),.3); }
.story-text { flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; padding: 18px 22px 40px; font-size: 18px; line-height: 1.85; color: var(--ink); }
.story-text::-webkit-scrollbar { display: none; }
.story-text .sw { border-radius: 4px; transition: background .12s, color .12s; padding: 0 1px; }
.story-text .sw-on { background: rgb(var(--acc)); color: #08101f; box-shadow: 0 0 14px rgba(var(--acc),.7); }
/* 📋 Daily Summary (v8.79) */
.dsum-body { display: flex; flex-direction: column; gap: 7px; padding: 9px 11px; overflow-y: auto; scrollbar-width: none; }
.dsum-body::-webkit-scrollbar { display: none; }
.dsum-tools { display: flex; }
.dsum-play { width: 100%; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 12px; border-radius: 999px; cursor: pointer; background: rgba(var(--acc),.18); color: var(--ink); border: 1px solid rgba(var(--acc),.45); }
.dsum-play:hover { background: rgba(var(--acc),.3); }
.dsum-sec { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.dsum-sec i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .8; }
.dsum-order { display: flex; flex-direction: column; gap: 4px; }
.dsum-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.dsum-num { flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: rgba(var(--acc),.2); color: rgb(var(--acc)); }
.dsum-name { flex: 1 1 auto; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsum-btns { flex: none; display: flex; gap: 2px; }
.dsum-btns button { width: 24px; height: 24px; border-radius: 6px; cursor: pointer; background: rgba(18,26,44,.8); color: var(--ink); border: 1px solid var(--line); font-size: 11px; line-height: 1; }
.dsum-btns button:hover:not(:disabled) { background: rgba(var(--acc),.2); }
.dsum-btns button:disabled { opacity: .3; cursor: default; }
.dsum-rm { color: #ff6b6b !important; }
.dsum-play1 { color: rgb(var(--acc)) !important; font-size: 10px !important; }
.dsum-play1:hover:not(:disabled) { background: rgba(var(--acc),.28) !important; }
.dsum-empty { font-size: 12px; color: var(--muted); padding: 4px 2px; }
.dsum-add { width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 9px; background: rgba(18,26,44,.95); color: var(--ink); border: 1px solid var(--line); outline: none; cursor: pointer; }
.dsum-trigs { display: flex; flex-direction: column; gap: 3px; }
.dsum-trig { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid transparent; font-size: 12.5px; }
.dsum-trig span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.dsum-trigrm { flex: none; background: none; border: 0; cursor: pointer; color: #ff6b6b; font-size: 12px; }
.dsum-trigadd { display: flex; gap: 6px; }
.dsum-trigin { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 8px 11px; border-radius: 999px; background: rgba(18,26,44,.95); color: var(--ink); border: 1px solid var(--line); outline: none; }
.dsum-trigbtn { flex: none; font: inherit; font-size: 13px; padding: 8px 14px; border-radius: 999px; cursor: pointer; background: rgba(var(--acc),.16); color: var(--ink); border: 1px solid rgba(var(--acc),.4); }
.dsum-trigbtn:hover { background: rgba(var(--acc),.28); }
/* 📋 Daily Summary PRESENTATION stage (v8.84) */
body.dsum-on { overflow: hidden; }
#widgets.dsum-blurred { pointer-events: none; }
.dsum-stage { position: fixed; inset: 0; z-index: 99990; display: flex; flex-direction: column;
  background: rgba(4,8,16,.5); backdrop-filter: blur(13px) saturate(.85); -webkit-backdrop-filter: blur(13px) saturate(.85);
  animation: dsumFade .35s ease; }
@keyframes dsumFade { from { opacity: 0; } to { opacity: 1; } }
.dsum-stage-head { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 14px 24px 6px; }
.dsum-stage-t { font-size: 18px; font-weight: 800; color: rgb(var(--acc2)); letter-spacing: .04em; text-transform: uppercase; }
.dsum-stage-hint { font-size: 12.5px; color: var(--muted); }
.dsum-stage-x { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; background: rgba(20,28,48,.9); color: var(--ink); border: 1px solid var(--line); font-size: 15px; line-height: 1; }
.dsum-stage-x:hover { background: rgba(255,80,80,.25); border-color: rgba(255,80,80,.5); }
.dsum-grid { flex: 1 1 auto; display: grid; gap: 16px; padding: 8px 24px 22px; min-height: 0; }
.dsum-cell { min-width: 0; min-height: 0; display: flex; transition: opacity .35s ease, transform .3s ease; }
.dsum-card { position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
  width: 100% !important; height: 100% !important; margin: 0 !important; transform: none !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.5); transition: box-shadow .3s ease, outline-color .3s ease; }
.dsum-card .edge-rz, .dsum-card .wdg-resize, .dsum-card .wdg-menucorner { display: none !important; }   /* no resize/menu chrome in the presentation */
/* while a widget is being read, it pops and the others dim */
.dsum-grid:has(.dsum-current) .dsum-cell { opacity: .4; }
.dsum-grid:has(.dsum-current) .dsum-cell:has(.dsum-current) { opacity: 1; transform: scale(1.015); z-index: 2; }
.dsum-card.dsum-current { outline: 2px solid rgb(var(--acc)); box-shadow: 0 0 0 3px rgba(var(--acc),.45), 0 16px 55px rgba(0,0,0,.6); }
@media (max-width: 820px) { .dsum-grid { grid-template-columns: 1fr !important; grid-template-rows: none !important; overflow-y: auto; } .dsum-cell { min-height: 220px; } }
.amix-row { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 10px; background: rgba(120,160,220,.08); border: 1px solid rgba(120,160,220,.16); }
.amix-mute { flex: 0 0 auto; background: none; border: 0; cursor: pointer; font-size: 15px; }
.amix-mute.muted { opacity: .55; }
.amix-nm { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink); display: flex; flex-direction: column; }
.amix-nm small { font-size: 10.5px; color: var(--muted); }
.amix-vol { flex: 1 1 90px; accent-color: #4fe98a; }
.amix-open { flex: 0 0 auto; font-size: 11.5px; padding: 4px 10px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
/* ===== v4.72 — Web Search widget ===== */
.ws-widget { display: flex; flex-direction: column; }
.ws-types { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; font-size: 12px; color: var(--muted); }
.ws-radio { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.ws-radio input { accent-color: rgb(var(--acc)); }
.ws-canvas { flex: 1; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }   /* v4.89 — scroll works, no visible bar */
.ws-canvas::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ws-img { cursor: zoom-in; }
/* v4.91 — related-videos section in the Web Search widget */
.ws-vidframe { grid-column: 1/-1; }
.ws-vids, .ws-vidgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ws-vidgrid { margin-top: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* v9.91 — always 3 columns, fit the frame */
@media (max-width: 460px) { .ws-vidgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-vid { cursor: pointer; position: relative; display: flex; flex-direction: column; gap: 5px; }
.ws-vid-thumb { position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; }
.ws-vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-vid-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.7); background: rgba(0,0,0,.12); }
.ws-vid:hover .ws-vid-play { background: rgba(0,0,0,.28); }
.ws-vid-t { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-vidbtn { align-self: flex-start; font: inherit; font-size: 11px; padding: 2px 8px; border-radius: 7px; cursor: pointer; border: 1px solid rgba(255,90,90,.45); background: rgba(255,90,90,.14); color: inherit; }
.ws-vidbtn:hover { background: rgba(255,90,90,.28); }
/* v4.91 — in-app media lightbox (images + video), used by the Web Search widget */
.media-lb { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(4,8,18,.86); backdrop-filter: blur(4px); }
.media-lb-stage { max-width: 90vw; max-height: 82vh; display: flex; align-items: center; justify-content: center; }
.media-lb-img { max-width: 90vw; max-height: 82vh; border-radius: 10px; box-shadow: 0 20px 70px rgba(0,0,0,.7); }
.media-lb-if { width: min(90vw, 1100px); aspect-ratio: 16/9; height: auto; border: 0; border-radius: 10px; box-shadow: 0 20px 70px rgba(0,0,0,.7); background: #000; }
.media-lb-x { position: fixed; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  font-size: 18px; color: #fff; background: rgba(30,40,60,.7); border: 1px solid rgba(160,190,230,.35); }
.media-lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 72px; border-radius: 12px; cursor: pointer;
  font-size: 34px; line-height: 1; color: #fff; background: rgba(30,40,60,.55); border: 1px solid rgba(160,190,230,.3); }
.media-lb-nav:hover, .media-lb-x:hover { background: rgba(46,140,255,.4); }
.media-lb-prev { left: 18px; } .media-lb-next { right: 18px; }
.media-lb-cap { position: fixed; bottom: 20px; left: 0; right: 0; text-align: center; color: #cfe0f5; font-size: 13px; padding: 0 60px; }
@media (max-width: 680px) { .media-lb-nav { width: 40px; height: 56px; font-size: 26px; } .media-lb-cap { padding: 0 20px; } }
.ws-titlehint { flex: 1 1 auto; min-width: 0; margin-left: 10px; font-size: 10.5px; font-weight: 400; font-style: italic; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v5.44 — 🖼 Image mode: bigger grid + movable/resizable viewer */
.ws-imgs-only { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
/* v5.46 — thumbnail size choices (Web Search ⚙) */
.ws-imgs.ws-sz-sm { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
.ws-imgs.ws-sz-md { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.ws-imgs.ws-sz-lg { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.ws-imgs.ws-sz-xl { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.wsiv { position: fixed; left: 50%; top: 12%; transform: translateX(-50%); width: min(560px, 92vw); height: min(70vh, 620px);
  display: flex; flex-direction: column; background: #0a1120; border: 1px solid rgba(120,160,220,.35); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6); z-index: 90; overflow: hidden; }
.wsiv .spot-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(20,30,52,.9); border-bottom: 1px solid var(--line); }
.wsiv .spot-head span { flex: 1 1 auto; font-size: 13px; font-weight: 600; }
.wsiv-stage { flex: 1 1 auto; position: relative; display: flex; align-items: center; justify-content: center; background: #050b16; min-height: 0; }
.wsiv-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.wsiv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 60px; border: 0; cursor: pointer;
  background: rgba(8,14,26,.55); color: #fff; font-size: 30px; line-height: 1; border-radius: 10px; }
.wsiv-nav:hover { background: rgba(var(--acc),.45); }
.wsiv-prev { left: 6px; } .wsiv-next { right: 6px; }
.wsiv-cap { padding: 7px 12px; font-size: 11.5px; color: var(--muted); background: rgba(20,30,52,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v5.44 — adult site quick-links under Related videos (private adult-only system) */
.ws-adult { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ws-adult-lbl { font-size: 11px; color: var(--muted); }
.ws-adult-btn { font-size: 12px; padding: 4px 12px; border-radius: 999px; text-decoration: none; color: #ffd0e0; background: rgba(255,80,140,.14); border: 1px solid rgba(255,80,140,.4); }
.ws-adult-btn:hover { background: rgba(255,80,140,.28); }
.ws-hint { font-size: 12.5px; color: var(--muted); line-height: 1.6; padding: 12px 6px; }
/* v5.42 — Web Search "working on it" loader */
.ws-loader { grid-column: 1/-1; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; padding: 30px 16px; text-align: center; }
.ws-load-title { font-size: 15px; color: var(--ink); }
.ws-load-title b { color: rgb(var(--acc)); }
.ws-load-bar { width: min(280px, 90%); height: 10px; border-radius: 999px; background: rgba(148,163,184,.16); overflow: hidden; position: relative; }
.ws-load-bar span { position: absolute; top: 0; bottom: 0; width: 42%; border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgb(var(--acc)), rgb(var(--acc)) 6px, #7c9cff 6px, #7c9cff 12px);
  animation: wsLoadSlide 1.15s ease-in-out infinite; box-shadow: 0 0 14px rgba(var(--acc),.5); }
@keyframes wsLoadSlide { 0% { left: -45%; } 100% { left: 103%; } }
.ws-load-msg { font-size: 12.5px; color: var(--muted); min-height: 1.2em; animation: wsMsgPulse 1.5s ease-in-out infinite; }
@keyframes wsMsgPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.ws-canvas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; align-content: start; grid-auto-flow: row dense; }
.ws-canvas > .ws-hint { grid-column: 1/-1; }
.ws-frame { background: rgba(255,255,255,.03); border: 1px solid rgba(120,160,220,.16); border-radius: 12px; padding: 10px 12px; }
/* v5.61 — only genuinely wide blocks span the full row; the compact text frames pack into the columns so the
   top fills densely with no big empty gap (dynamic to however much info comes back). */
.ws-frame:has(.ws-imgs), .ws-frame:has(.ws-news), .ws-frame:has(.ws-vids), .ws-frame:has(.ws-genlist), .ws-frame:has(.ws-genrel) { grid-column: 1 / -1; }
.ws-frame-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: rgb(var(--acc3)); margin-bottom: 7px; display: flex; align-items: center; gap: 8px; }
/* v9.89 — 💥 Explode button + the tiled image boxes */
.ws-explodebtn { margin-left: auto; font: inherit; font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 4px 10px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.18); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); }
.ws-explodebtn:hover { background: rgba(var(--acc),.32); }
.movie-panel.ws-explode .movie-panel-head { padding: 1px 6px; font-size: 10px; min-height: 0; }
.movie-panel.ws-explode .movie-panel-body { padding: 0; overflow: hidden; }
.ws-explode-img { width: 100%; height: 100%; object-fit: contain; display: block; background: #0a1120; }   /* v9.91 — keep aspect ratio (box already matches the image's ratio) */
/* v9.94 — dim + blur the rest of MAX behind the exploded images */
.ws-explode-bd { position: fixed; inset: 0; background: rgba(4,9,20,.55); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); cursor: zoom-out; }
/* v9.94 — Implode button now sits TOP-middle (was dead-centre) */
.ws-implode-center { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 96000; cursor: pointer;
  padding: 10px 26px; border-radius: 12px;
  font: inherit; font-size: clamp(16px, 2vw, 24px); font-weight: 800; letter-spacing: .14em;
  background: rgba(10,17,32,.82); color: rgb(var(--acc2)); border: 2px solid rgba(var(--acc),.85);
  box-shadow: 0 0 30px rgba(var(--acc),.5), inset 0 0 22px rgba(var(--acc),.12); backdrop-filter: blur(3px); }
.ws-implode-center:hover { background: rgba(var(--acc),.28); box-shadow: 0 0 50px rgba(var(--acc),.7); }
/* v9.93 — 🏷 Label Printer widget */
.lp-body { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.lp-tpls { display: flex; flex-wrap: wrap; gap: 5px; }
.lp-tpl { font: inherit; font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 8px; cursor: pointer; background: rgba(255,255,255,.04); color: var(--muted); border: 1px solid var(--line); }
.lp-tpl.on { background: rgba(var(--acc),.18); color: rgb(var(--acc2)); border-color: rgba(var(--acc),.5); }
.lp-fields { display: flex; flex-direction: column; gap: 7px; }
.lp-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.lp-f input, .lp-f select, .lp-f textarea { font: inherit; font-size: 13px; padding: 6px 9px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; box-sizing: border-box; width: 100%; resize: vertical; }
.lp-f input:focus, .lp-f select:focus, .lp-f textarea:focus { outline: none; border-color: rgba(var(--acc),.65); }
.lp-actions { display: flex; align-items: center; gap: 8px; }
.lp-qty { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.lp-qty input { width: 62px; font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.lp-print { margin-left: auto; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.2); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.55); }
.lp-print:hover { background: rgba(var(--acc),.34); }
.lp-preview-wrap { background: repeating-conic-gradient(#c9d3e0 0% 25%, #dde4ee 0% 50%) 50% / 16px 16px; border-radius: 8px; padding: 6px; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
.lp-preview { transform-origin: top center; background: #fff; color: #000; overflow: hidden; display: flex; padding: 2mm; gap: 3mm; align-items: center; box-sizing: border-box; font-family: "Helvetica Neue", Arial, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.lp-preview .text-block { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1mm; }
.lp-preview .title-line { font-weight: 700; font-size: 4mm; line-height: 1.15; }
.lp-preview .desc-line { font-size: 2.8mm; line-height: 1.2; color: #222; }
.lp-preview .meta-line { font-size: 2.3mm; line-height: 1.2; color: #444; }
.lp-ph { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: monospace; color: #333; border: 1px dashed #999; border-radius: 2px; padding: 2mm; font-size: 2.4mm; text-align: center; }
.lp-ph-bc { min-width: 30mm; letter-spacing: 1px; }
.lp-ph-qr { width: 24mm; height: 24mm; } .lp-ph-qr span { font-size: 2mm; word-break: break-all; opacity: .7; }
.lp-preview.ebay-label { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .5mm; }
.lp-preview.ebay-label .eb-name { font-weight: 700; font-size: 6mm; line-height: 1.05; text-transform: uppercase; }
.lp-preview.ebay-label .eb-id { font-size: 3.75mm; }
.lp-preview.ebay-label .eb-street, .lp-preview.ebay-label .eb-city { font-weight: 700; font-size: 5.4mm; line-height: 1.1; text-transform: uppercase; }
.lp-preview.bing-lee { display: grid; grid-template-columns: 1fr 24mm; grid-template-rows: auto 1fr auto; grid-template-areas: "header qr" "barcode qr" "footer qr"; gap: .5mm 2mm; padding: 1.5mm 2mm; }
.lp-preview.bing-lee .bl-header { grid-area: header; font-weight: 700; font-size: 2.8mm; display: grid; grid-template-columns: auto 1fr; gap: 4mm; align-items: baseline; }
.lp-preview.bing-lee .bl-ref { justify-self: end; font-weight: 400; }
.lp-preview.bing-lee .lp-ph-bc { grid-area: barcode; align-self: center; min-width: 0; }
.lp-preview.bing-lee .lp-ph-qr { grid-area: qr; }
.lp-preview.bing-lee .bl-footer { grid-area: footer; display: flex; flex-direction: column; gap: .3mm; }
.lp-preview.bing-lee .bl-sku { font-weight: 700; font-size: 3mm; } .lp-preview.bing-lee .bl-model { font-size: 2.4mm; } .lp-preview.bing-lee .bl-desc { font-size: 2.2mm; color: #333; }
/* v10.11 — 🗄 Storage label preview (matches lpStorageCss used by the print popup) */
.lp-preview.storage { align-items: stretch; gap: 2mm; padding: 1.5mm 2mm; }
.lp-preview.storage .st-left { flex: 1 1 62%; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1mm; }
.lp-preview.storage .st-right { flex: 0 0 34%; min-width: 0; border-left: .3mm solid #000; padding-left: 2mm; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; }
.lp-preview.storage .st-title { display: flex; align-items: center; gap: 1.5mm; font-weight: 700; font-size: 3.6mm; line-height: 1.1; white-space: nowrap; }
.lp-preview.storage .st-title::before, .lp-preview.storage .st-title::after { content: ""; flex: 1; border-top: .4mm dashed #000; }
.lp-preview.storage .st-title span { padding: 0 1mm; overflow: hidden; text-overflow: ellipsis; }
.lp-preview.storage .st-desc { font-size: 2.5mm; line-height: 1.25; color: #111; white-space: pre-wrap; overflow: hidden; }
.lp-preview.storage .lp-ph-bc { align-self: flex-start; margin-top: .5mm; }
.lp-preview.storage .st-items-h { font-weight: 700; font-size: 2.9mm; line-height: 1.2; margin-bottom: .6mm; }
.lp-preview.storage .st-items { display: flex; flex-direction: column; gap: .2mm; font-size: 2.4mm; line-height: 1.2; }
.lp-preview.storage .st-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-preview.storage .st-item-empty { color: #999; }
.lp-bcrow { display: flex; gap: 6px; align-items: stretch; }
.lp-bcgen { flex: 0 0 auto; font-size: 15px; padding: 0 10px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.18); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); }
.lp-bcgen:hover { background: rgba(var(--acc),.3); }
.lp-bcrow input { flex: 1; min-width: 0; }
/* v10.12 — 🌍 Explore (3D) widget */
.e3d-body { padding: 0 !important; display: flex; flex-direction: column; overflow: hidden; }
.e3d-msg, .e3d-setup { padding: 16px; color: var(--ink); font-size: 13.5px; line-height: 1.6; }
.e3d-setup .e3d-h { font-size: 15px; font-weight: 700; color: rgb(var(--acc3)); margin-bottom: 8px; }
.e3d-setup p { margin: 8px 0; } .e3d-dim { color: var(--muted); font-size: 12px; }
.e3d-keyrow { display: flex; gap: 6px; margin: 10px 0; }
.e3d-key { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.35); color: #eaf3ff; }
.e3d-save { font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.2); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.55); white-space: nowrap; }
.e3d-bar { display: flex; gap: 6px; padding: 6px; flex: 0 0 auto; flex-wrap: wrap; }
.e3d-marks { font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 8px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.12); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.4); max-width: 150px; }
.e3d-search { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.e3d-bar button { font: inherit; font-size: 13px; font-weight: 700; padding: 7px 11px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.4); white-space: nowrap; }
.e3d-bar button:hover { background: rgba(var(--acc),.28); }
.e3d-frame { flex: 1 1 auto; position: relative; min-height: 220px; background: #0a1018; }
.e3d-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* v10.14 — 🎵 Lyrics widget */
.lyr-body { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.lyr-bar { display: flex; gap: 6px; }
.lyr-q { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.lyr-go { font-size: 15px; padding: 0 12px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.18); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); }
.lyr-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.lyr-btns button { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.12); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.35); }
.lyr-btns button:hover { background: rgba(var(--acc),.24); }
.lyr-head { flex: 0 0 auto; }
.lyr-t { font-size: 16px; font-weight: 750; color: var(--ink); line-height: 1.2; }
.lyr-a { font-size: 12.5px; color: rgb(var(--acc3)); }
.lyr-out { flex: 1 1 auto; overflow: auto; min-height: 60px; }
.lyr-text { margin: 0; font: inherit; font-size: 13.5px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.lyr-msg { font-size: 13px; color: var(--muted); padding: 10px 2px; line-height: 1.5; }
.lyr-setup { font-size: 13px; color: var(--ink); line-height: 1.55; } .lyr-sh { font-weight: 700; color: rgb(var(--acc3)); margin-bottom: 6px; }
.lyr-keyrow { display: flex; gap: 6px; margin-top: 8px; }
.lyr-key { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.35); color: #eaf3ff; }
.lyr-ksave { font: inherit; font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.2); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.55); white-space: nowrap; }
/* v10.15 — Lyrics upgrades: relative body (for the listen overlay), status line, art header, history, animation */
.lyr-body { position: relative; }
.lyr-status { font-size: 12px; color: rgb(var(--acc3)); padding: 1px 2px; }
.lyr-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.lyr-art { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.lyr-meta { min-width: 0; }
.lyr-spot { display: inline-block; margin-top: 3px; font-size: 11.5px; color: #1ed760; text-decoration: none; font-weight: 600; }
.lyr-spot:hover { text-decoration: underline; }
.lyr-histhd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: rgb(var(--acc3)); }
.lyr-histhd span { flex: 1; text-align: center; }
.lyr-histback, .lyr-histclear { font: inherit; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 7px; cursor: pointer; background: rgba(var(--acc),.14); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.4); }
.lyr-histlist { display: flex; flex-direction: column; gap: 5px; }
.lyr-hrow { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 9px; background: rgba(255,255,255,.03); border: 1px solid var(--line); cursor: pointer; }
.lyr-hrow:hover { background: rgba(var(--acc),.1); border-color: rgba(var(--acc),.4); }
.lyr-hart { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.lyr-hnoart { display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(var(--acc),.12); }
.lyr-hmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.lyr-hmeta b { font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyr-hmeta i { font-size: 12px; color: var(--muted); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyr-hx { flex: 0 0 auto; background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 6px; }
.lyr-hx:hover { color: #ff8a8a; background: rgba(255,90,90,.12); }
.lyr-listen { position: absolute; inset: 0; z-index: 6; background: radial-gradient(circle at 50% 45%, rgba(10,20,34,.94), rgba(4,7,14,.97)); border-radius: 14px; overflow: hidden; }
.lyr-lcv { position: absolute; inset: 0; width: 100%; height: 100%; }
.lyr-ltext { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: #dbeeff; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-shadow: 0 1px 3px #000; }
/* v10.14 — 🧭 Directions widget */
.dir-body { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.dir-form { display: flex; flex-direction: column; gap: 7px; flex: 0 0 auto; }
.dir-row { display: flex; align-items: center; gap: 8px; }
.dir-lbl { flex: 0 0 40px; font-size: 12px; color: var(--muted); text-align: right; }
.dir-row input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.dir-modes { display: flex; flex-wrap: wrap; gap: 5px; }
.dir-mode { font: inherit; font-size: 12px; padding: 5px 9px; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.04); color: var(--muted); border: 1px solid var(--line); }
.dir-mode.on { background: rgba(var(--acc),.18); color: rgb(var(--acc2)); border-color: rgba(var(--acc),.5); }
.dir-go { font: inherit; font-size: 13px; font-weight: 700; padding: 9px 12px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.2); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.55); }
/* v10.36 — 💊 Medications / vitamin tracker */
.med-body { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.med-list { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.med-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px 2px; }
.med-date { font-size: 12px; color: var(--muted); font-weight: 600; }
.med-prog { font-size: 12px; font-weight: 800; color: rgb(var(--acc3)); font-variant-numeric: tabular-nums; }
.med-prog.all { color: #28dc8c; }
.med-item { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px; transition: opacity .2s, background .2s; }
.med-item.done { background: rgba(40,220,140,.08); border-color: rgba(40,220,140,.3); }
.med-info { flex: 1 1 auto; min-width: 0; }
.med-name { font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.med-item.done .med-name { text-decoration: line-through; opacity: .7; }
.med-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.med-pills { color: rgb(var(--acc3)); font-weight: 700; }
.med-pills.low { color: #ff9e5a; }
.med-take { flex: 0 0 auto; font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(var(--acc),.5); background: rgba(var(--acc),.16); color: rgb(var(--acc2)); }
.med-take:hover { background: rgba(var(--acc),.28); }
.med-take.on { border-color: rgba(40,220,140,.5); background: rgba(40,220,140,.18); color: #28dc8c; }
.med-del { flex: 0 0 auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; padding: 4px 5px; border-radius: 7px; opacity: .6; }
.med-del:hover { opacity: 1; color: #ff8a8a; background: rgba(255,120,120,.1); }
.med-empty { font-size: 13px; color: var(--muted); line-height: 1.5; padding: 10px 4px; }
.med-add { display: flex; gap: 6px; flex: 0 0 auto; }
.med-newname { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 9px 11px; border-radius: 9px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.med-newcount { width: 58px; flex: 0 0 auto; font: inherit; font-size: 13px; padding: 9px 8px; border-radius: 9px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; text-align: center; }
.med-addbtn { flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 700; padding: 9px 13px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.2); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.55); }
.med-addbtn:hover { background: rgba(var(--acc),.3); }
/* v10.44 — 🎂 Birthdays */
.bday-body { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.bday-list { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 7px; min-height: 40px; }
.bday-item { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px; }
.bday-item.today { background: rgba(var(--acc),.12); border-color: rgba(var(--acc),.5); }
.bday-info { flex: 1 1 auto; min-width: 0; }
.bday-name { font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bday-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.bday-when { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); text-align: right; }
.bday-when.soon { color: rgb(var(--acc3)); }
.bday-when.now { color: #ffcf5c; }
.bday-del { flex: 0 0 auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; padding: 4px 5px; border-radius: 7px; opacity: .55; }
.bday-del:hover { opacity: 1; color: #ff8a8a; background: rgba(255,120,120,.1); }
.bday-empty { font-size: 13px; color: var(--muted); line-height: 1.5; padding: 10px 4px; }
.bday-add { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; }
.bday-name-in { flex: 1 1 100px; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 9px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.bday-d, .bday-m { flex: 0 0 auto; font: inherit; font-size: 13px; padding: 8px 6px; border-radius: 9px; background: rgba(0,0,0,.3); border: 1px solid var(--line); color: var(--ink); }
.bday-y { width: 64px; flex: 0 0 auto; font: inherit; font-size: 13px; padding: 8px 6px; border-radius: 9px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; text-align: center; }
.bday-addbtn { flex: 1 1 auto; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 13px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.2); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.55); }
.bday-addbtn:hover { background: rgba(var(--acc),.3); }
/* v10.53 — 🧠 Trivia */
.trv-body { display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.trv-load { padding: 20px 8px; text-align: center; color: var(--muted); font-size: 13px; }
.trv-load button { margin-top: 10px; font: inherit; font-size: 13px; padding: 7px 13px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.18); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); }
.trv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.trv-cat { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.trv-score { font-size: 12px; font-weight: 800; color: rgb(var(--acc3)); font-variant-numeric: tabular-nums; }
.trv-q { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.trv-ans { display: flex; flex-direction: column; gap: 7px; }
.trv-a { font: inherit; font-size: 13.5px; text-align: left; padding: 11px 13px; border-radius: 10px; cursor: pointer; background: rgba(255,255,255,.04); color: var(--ink); border: 1px solid var(--line); transition: all .12s; }
.trv-a:hover:not(:disabled) { border-color: rgba(var(--acc),.55); background: rgba(var(--acc),.1); }
.trv-a:disabled { cursor: default; opacity: .9; }
.trv-a.right { background: rgba(40,220,140,.18); border-color: rgba(40,220,140,.6); color: #7dffb0; font-weight: 700; }
.trv-a.wrong { background: rgba(255,90,90,.16); border-color: rgba(255,90,90,.55); color: #ff9a9a; }
.trv-foot { display: flex; gap: 6px; align-items: center; }
.trv-read, .trv-new { font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 12px; border-radius: 9px; cursor: pointer; background: rgba(120,160,220,.1); color: var(--ink); border: 1px solid var(--line); }
.trv-read:hover, .trv-new:hover { background: rgba(var(--acc),.16); border-color: rgba(var(--acc),.5); }
.trv-next { margin-left: auto; font: inherit; font-size: 13px; font-weight: 800; padding: 8px 16px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.2); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.55); }
.trv-next:hover { background: rgba(var(--acc),.32); }
/* v10.57 — 🎙 Podcasts */
.pod-body { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.pod-search { display: flex; gap: 6px; flex: 0 0 auto; }
.pod-search input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 8px 11px; border-radius: 9px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.pod-search button { flex: 0 0 auto; font: inherit; padding: 8px 12px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.18); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); }
.pod-results { flex: 0 0 auto; max-height: 42%; overflow: auto; display: flex; flex-direction: column; gap: 4px; background: rgba(0,0,0,.2); border-radius: 10px; padding: 5px; }
.pod-r, .pod-sub { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px; cursor: pointer; }
.pod-sub:hover, .pod-r:hover { background: rgba(var(--acc),.08); }
.pod-r img, .pod-sub img { width: 40px; height: 40px; border-radius: 7px; object-fit: cover; flex: none; background: rgba(255,255,255,.05); }
.pod-rt, .pod-subt { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.pod-rt b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-rt i { font-style: normal; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-subt { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-add { flex: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 14px; background: rgba(60,220,120,.14); color: #7dffb0; border: 1px solid rgba(60,220,120,.5); }
.pod-unsub { flex: none; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; opacity: .55; padding: 4px; border-radius: 6px; }
.pod-unsub:hover { opacity: 1; color: #ff8a8a; }
.pod-subs { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.pod-empty, .pod-load { padding: 16px 6px; color: var(--muted); font-size: 13px; text-align: center; }
.pod-ehead { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pod-ehead b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-back { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px; cursor: pointer; background: rgba(120,160,220,.1); color: var(--ink); border: 1px solid var(--line); flex: none; }
.pod-eps { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 5px; }
.pod-ep { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.pod-epi { flex: 1; min-width: 0; }
.pod-epi b { display: block; font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-epi i { font-style: normal; font-size: 11px; color: var(--muted); }
.pod-play { flex: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 13px; background: rgba(var(--acc),.14); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.pod-now { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px; border-radius: 11px; background: rgba(var(--acc),.1); border: 1px solid rgba(var(--acc),.3); }
.pod-now img { width: 38px; height: 38px; border-radius: 7px; object-fit: cover; flex: none; }
.pod-nmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.pod-nmeta b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-nmeta i { font-style: normal; font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-pp { flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 14px; background: rgba(var(--acc),.2); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.55); }
.pod-sleep { flex: none; font: inherit; font-size: 11.5px; padding: 5px 6px; border-radius: 8px; background: rgba(0,0,0,.3); color: var(--ink); border: 1px solid var(--line); cursor: pointer; }
/* v10.58 — 📚 Reading list + 📖 reader view */
.rl-body { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.rl-add { display: flex; gap: 6px; flex: 0 0 auto; }
.rl-url { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 8px 11px; border-radius: 9px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.rl-add button { flex: none; font: inherit; font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.2); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.55); }
.rl-sub { font-size: 11.5px; color: var(--muted); }
.rl-list { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.rl-item { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); cursor: pointer; }
.rl-item:hover { border-color: rgba(var(--acc),.5); }
.rl-item.read { opacity: .62; }
.rl-info { flex: 1; min-width: 0; }
.rl-title { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-host { font-size: 11px; color: var(--muted); margin-top: 2px; }
.rl-open, .rl-del { flex: none; background: none; border: 0; cursor: pointer; font-size: 14px; padding: 4px 6px; border-radius: 7px; }
.rl-open { color: rgb(var(--acc3)); } .rl-open:hover { background: rgba(var(--acc),.14); }
.rl-del { color: var(--muted); opacity: .55; } .rl-del:hover { opacity: 1; color: #ff8a8a; }
.rl-empty { padding: 16px 6px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.reader-float .movie-panel-body { padding: 0; }
.rdr-body { display: flex; flex-direction: column; overflow: hidden; }
.rdr-load { padding: 24px 16px; color: var(--muted); font-size: 14px; text-align: center; line-height: 1.6; }
.rdr-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; flex: 0 0 auto; border-bottom: 1px solid var(--line); }
.rdr-read, .rdr-stop { font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); }
.rdr-open { margin-left: auto; font-size: 12.5px; color: rgb(var(--acc3)); text-decoration: none; }
.rdr-art { flex: 1 1 auto; overflow: auto; padding: 18px 22px 30px; max-width: 720px; margin: 0 auto; }
.rdr-art h1 { font-size: 22px; line-height: 1.3; margin: 0 0 4px; color: var(--ink); }
.rdr-host { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.rdr-art p { font-size: 15.5px; line-height: 1.7; color: #dfe8f5; margin: 0 0 15px; }
.rdr-none { color: var(--muted); }
/* v10.60 — 🎚 Ambient Rooms */
.room-body { display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.room-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.room-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; border-radius: 12px; cursor: pointer; background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--ink); transition: all .15s; }
.room-btn:hover { border-color: rgba(var(--acc),.5); background: rgba(var(--acc),.08); }
.room-btn.on { background: rgba(var(--acc),.2); border-color: rgba(var(--acc),.7); box-shadow: 0 0 0 1px rgba(var(--acc),.4), 0 4px 16px rgba(var(--acc),.25); }
.room-emoji { font-size: 26px; line-height: 1; }
.room-name { font-size: 12px; font-weight: 700; text-align: center; }
.room-stop { font: inherit; font-size: 13px; font-weight: 700; padding: 9px; border-radius: 10px; cursor: pointer; background: rgba(255,120,90,.14); color: #ff9e5a; border: 1px solid rgba(255,120,90,.45); }
.room-stop:hover { background: rgba(255,120,90,.24); }
.room-hint { font-size: 12px; color: var(--muted); line-height: 1.5; text-align: center; padding: 4px; }
/* v10.63 — MAX Videos custom-folder manager (in ⚙ options) */
.mxvf-mgr { display: flex; flex-direction: column; gap: 8px; }
.mxvf-add { display: flex; flex-wrap: wrap; gap: 6px; }
.mxvf-link { flex: 1 1 100%; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.3); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.mxvf-name { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.3); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.mxvf-addb { flex: 0 0 auto; font: inherit; font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.2); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.55); }
.mxvf-list { display: flex; flex-direction: column; gap: 5px; }
.mxvf-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--line); font-size: 13px; }
.mxvf-del { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; opacity: .6; padding: 3px 6px; border-radius: 6px; }
.mxvf-del:hover { opacity: 1; color: #ff8a8a; }
/* v10.64 — folder dropdown options must be dark-on-white (native popups ignored the select's colour → washed-out) */
.mxv-folsel option { color: #111; background: #fff; }
/* v10.64 — 🗂 Pathways button in the Google Drive Videos head */
.mxv-paths { flex: none; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 9px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.14); color: var(--fg); border: 1px solid rgba(var(--acc),.4); }
.mxv-paths:hover { background: rgba(var(--acc),.26); }
/* v10.64 — 🗂 Drive Pathways manager (movable modal) */
.movie-panel.drive-paths { width: 460px; max-width: 94vw; }
.movie-panel.drive-paths .movie-panel-body { padding: 12px 14px 14px; overflow-y: auto; }
.dp-intro { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin-bottom: 12px; }
.dp-intro b { color: var(--fg); }
.dp-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.dp-empty { font-size: 13px; color: var(--muted); padding: 8px 2px; }
.dp-row { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 9px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.dp-mv { display: flex; flex-direction: column; gap: 1px; }
.dp-up, .dp-dn { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 9px; line-height: 1; padding: 1px 3px; border-radius: 4px; }
.dp-up:hover, .dp-dn:hover { color: rgb(var(--acc2)); background: rgba(var(--acc),.15); }
.dp-up:disabled, .dp-dn:disabled { opacity: .25; cursor: default; }
.dp-name { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 9px; border-radius: 7px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.25); color: #eaf3ff; }
.dp-id { flex: none; font-size: 10.5px; color: var(--muted); font-family: ui-monospace, monospace; opacity: .7; }
.dp-tag { flex: none; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--acc2)); background: rgba(var(--acc),.16); border-radius: 5px; padding: 2px 5px; }
.dp-del { flex: none; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; opacity: .6; padding: 3px 6px; border-radius: 6px; }
.dp-del:hover { opacity: 1; color: #ff8a8a; }
.dp-add { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-link { flex: 1 1 100%; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.3); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.dp-nn { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.3); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.dp-addb { flex: 0 0 auto; font: inherit; font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.2); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.55); }
.dp-full { font-size: 12px; color: var(--muted); padding: 6px 2px; }
body.max-room::before { content: ''; position: fixed; inset: 0; background: rgba(4,7,14,.4); z-index: 1; pointer-events: none; transition: opacity .6s; }
/* v10.54 — Settings → 📋 User logs */
.ulog-box { display: flex; flex-direction: column; gap: 8px; }
.ulog-search { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 9px 12px; border-radius: 9px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.ulog-count { font-size: 11.5px; color: var(--muted); }
.ulog-list { display: flex; flex-direction: column; gap: 5px; }
.ulog-row { display: grid; grid-template-columns: 1.4fr 1fr auto 1.2fr; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; background: rgba(255,255,255,.03); border: 1px solid var(--line); font-size: 12.5px; }
.ulog-u { min-width: 0; } .ulog-u b { display: block; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ulog-u span { font-size: 11px; color: var(--muted); }
.ulog-ip { font-variant-numeric: tabular-nums; color: rgb(var(--acc3)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ulog-dev { color: var(--muted); white-space: nowrap; }
.ulog-when { color: var(--muted); text-align: right; white-space: nowrap; }
.ulog-empty { padding: 16px 4px; color: var(--muted); font-size: 13px; }
.ulog-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.ulog-pager button { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.14); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.ulog-pager button:disabled { opacity: .4; cursor: default; }
@media (max-width: 620px) { .ulog-row { grid-template-columns: 1fr auto; grid-auto-flow: row; } .ulog-when { text-align: left; } }
.dir-mapbtn { font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 12px; border-radius: 9px; cursor: pointer; background: rgba(120,160,220,.1); color: var(--ink); border: 1px solid var(--line); }
.dir-mapbtn:hover { background: rgba(var(--acc),.16); border-color: rgba(var(--acc),.5); }
.dirmap-float .movie-panel-body { padding: 0; overflow: hidden; }
.dirmap-frame { width: 100%; height: 100%; border: 0; display: block; }
/* v10.40 — transparent shield during drag/resize so iframes don't swallow pointer moves */
#_dragShield { position: fixed; inset: 0; z-index: 2147483646; background: transparent; }
.dir-out { flex: 1 1 auto; overflow: auto; min-height: 50px; }
.dir-msg { font-size: 13px; color: var(--muted); padding: 8px 2px; }
.dir-summary { display: flex; align-items: baseline; gap: 12px; padding: 4px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.dir-eta { font-size: 24px; font-weight: 800; color: rgb(var(--acc3)); font-variant-numeric: tabular-nums; }
.dir-dist { font-size: 14px; color: var(--ink); } .dir-traffic { color: #ff9e5a; font-weight: 600; }
.dir-steps { display: flex; flex-direction: column; gap: 2px; }
.dir-step { display: flex; align-items: baseline; gap: 8px; padding: 6px 2px; border-bottom: 1px solid rgba(120,160,220,.08); font-size: 13px; line-height: 1.4; }
.dir-si { flex: 0 0 20px; color: rgb(var(--acc3)); font-weight: 700; font-variant-numeric: tabular-nums; }
.dir-stx { flex: 1; color: var(--ink); } .dir-sd { flex: 0 0 auto; color: var(--muted); font-size: 11.5px; }
.dir-open { display: inline-block; margin-top: 10px; font-size: 12.5px; color: rgb(var(--acc3)); }
/* v10.38 — destination, toll-free alt & "did you mean" matches */
.dir-toll { color: #ff9e5a; font-weight: 600; }
.dir-dest { font-size: 13px; font-weight: 700; color: var(--ink); margin: 2px 0 6px; }
.dir-alt { font-size: 12.5px; color: #7cf5c0; background: rgba(40,220,140,.1); border: 1px solid rgba(40,220,140,.3); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
.dir-dym { font-size: 11.5px; color: var(--muted); margin: 4px 0 6px; }
.dir-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dir-chip { font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 999px; cursor: pointer; background: rgba(120,160,220,.1); color: var(--ink); border: 1px solid var(--line); text-align: left; }
.dir-chip:hover { border-color: rgba(var(--acc),.5); }
.dir-chip.on { background: rgba(var(--acc),.9); border-color: rgba(var(--acc),.9); color: #fff; }
/* v10.16 — 📦 eBay Orders widget */
.ebay-body { display: flex; flex-direction: column; overflow: hidden; }
.ebay-tabs { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-bottom: 8px; }
.ebay-tab { font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.04); color: var(--muted); border: 1px solid var(--line); }
.ebay-tab.on { background: rgba(var(--acc),.18); color: rgb(var(--acc2)); border-color: rgba(var(--acc),.5); }
.ebay-refresh { margin-left: auto; background: transparent; border: 0; color: rgb(var(--acc3)); cursor: pointer; font-size: 16px; }
.ebay-view { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; min-height: 60px; }
.ebay-sub { font-size: 11.5px; color: var(--muted); padding: 0 2px 7px; flex: 0 0 auto; }
.ebay-dim { opacity: .8; }
.ebay-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.ebay-stat { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; padding: 12px 10px; text-align: center; }
.ebay-static { font-size: 17px; line-height: 1; margin-bottom: 5px; }
.ebay-statn { font-size: 21px; font-weight: 800; color: rgb(var(--acc3)); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ebay-statl { font-size: 11px; color: var(--muted); margin-top: 3px; }
.ebay-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 2px 2px 8px; flex: 0 0 auto; }
.ebay-list { display: flex; flex-direction: column; gap: 8px; }
.ebay-empty { padding: 16px 4px; color: var(--muted); font-size: 13px; }
.ebay-order { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; }
.ebay-otop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ebay-otop b { font-size: 14px; color: var(--ink); }
.ebay-pill { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ebay-shipped { background: rgba(40,220,140,.16); color: #28dc8c; border: 1px solid rgba(40,220,140,.4); }
.ebay-topost { background: rgba(255,158,90,.16); color: #ff9e5a; border: 1px solid rgba(255,158,90,.4); }
.ebay-unpaid { background: rgba(255,90,90,.14); color: #ff7a7a; border: 1px solid rgba(255,90,90,.4); }
.ebay-items { font-size: 13px; color: var(--ink); margin: 6px 0 4px; line-height: 1.35; }
.ebay-addr { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.ebay-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; opacity: .85; }
.ebay-acts { display: flex; gap: 6px; margin-top: 9px; }
.ebay-acts button { font: inherit; font-size: 12px; font-weight: 700; padding: 7px 11px; border-radius: 8px; cursor: pointer; border: 1px solid rgba(var(--acc),.45); background: rgba(var(--acc),.14); color: rgb(var(--acc2)); }
.ebay-acts button:hover { background: rgba(var(--acc),.26); }
.ebay-acts .ebay-ship { border-color: rgba(40,220,140,.45); background: rgba(40,220,140,.14); color: #28dc8c; }
.ebay-acts .ebay-ship:hover { background: rgba(40,220,140,.24); }
/* v10.34 — eBay: 3 tabs (wrap), not-posted badge, order code line, Listings quick-links, Messages, celebration */
.ebay-tabs { flex-wrap: wrap; }
.ebay-tab { position: relative; }
.ebay-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; margin-left: 5px; border-radius: 999px; background: #ff3b52; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1; vertical-align: middle; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.ebay-badge[hidden] { display: none; }
.ebay-code { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: rgb(var(--acc3)); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.ebay-linkhead { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 14px 2px 8px; }
.ebay-links { display: flex; flex-direction: column; gap: 6px; }
.ebay-link { display: block; font-size: 13px; font-weight: 600; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: rgb(var(--acc2)); background: rgba(var(--acc),.1); border: 1px solid rgba(var(--acc),.35); }
.ebay-link:hover { background: rgba(var(--acc),.22); border-color: rgba(var(--acc),.6); }
.ebay-msgs { display: flex; flex-direction: column; gap: 8px; }
.ebay-msg { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; }
.ebay-msg.unread { border-color: rgba(var(--acc),.55); background: rgba(var(--acc),.07); }
.ebay-msgtop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ebay-msgtop b { font-size: 13px; color: var(--ink); }
.ebay-msgwhen { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ebay-msgsub { font-size: 13px; font-weight: 700; color: var(--ink); margin: 3px 0; }
.ebay-msgtext { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.ebay-msgreply { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 8px; text-decoration: none; color: rgb(var(--acc2)); background: rgba(var(--acc),.14); border: 1px solid rgba(var(--acc),.45); }
.ebay-msgreply:hover { background: rgba(var(--acc),.26); }
/* 🎉 new-sale celebration (eBay-logo rain + centre popup + confetti) */
.eb-rain { position: fixed; inset: 0; z-index: 99998; pointer-events: none; overflow: hidden; }
.eb-rdrop { position: absolute; top: -90px; opacity: .9; animation: ebFall linear forwards; will-change: transform; }
.eb-rdrop img { display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
@keyframes ebFall { from { transform: translateY(-90px) rotate(-12deg); } to { transform: translateY(112vh) rotate(20deg); } }
.eb-cel { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.eb-cel-card { position: relative; text-align: center; padding: 26px 40px 30px; border-radius: 20px; overflow: hidden; max-width: min(92vw, 560px); transform: scale(1);
  background: radial-gradient(circle at 50% 0%, rgba(var(--acc),.28), rgba(11,20,36,.97) 72%); border: 1px solid rgba(120,160,220,.45);
  box-shadow: 0 30px 90px rgba(0,0,0,.72); animation: ebPop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes ebPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.eb-cel-badge img { width: 132px; height: auto; animation: ebBounce 1s ease-in-out infinite; }
@keyframes ebBounce { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9px) scale(1.06); } }
.eb-cel-h { font-size: 19px; font-weight: 800; color: #ffd93b; margin: 10px 0 8px; text-shadow: 0 2px 12px rgba(255,217,59,.4); line-height: 1.25; text-wrap: balance; }
.eb-cel-item { font-size: 22px; font-weight: 900; color: #eaf1ff; line-height: 1.2; }
.eb-cel-amt { font-size: 15px; color: #cfe0f5; margin-top: 6px; }
.eb-cel-amt b { color: #28dc8c; font-size: 22px; font-weight: 900; }
.eb-cel-buyer { font-size: 13px; color: var(--muted); margin-top: 8px; }
.eb-cel-more { font-size: 13px; font-weight: 700; color: rgb(var(--acc3)); margin-top: 6px; }
.eb-cel-conf { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.eb-conf { position: absolute; top: -14px; width: 8px; height: 14px; border-radius: 2px; opacity: .9; animation: ebConf linear forwards; }
@keyframes ebConf { from { transform: translateY(-14px) rotate(0deg); } to { transform: translateY(460px) rotate(560deg); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .eb-rdrop, .eb-conf, .eb-cel-badge img { animation: none; } }
.lp-dsave { display: flex; gap: 6px; margin-bottom: 10px; }
.lp-dname { flex: 1; font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.3); color: #eaf3ff; }
.lp-dsavebtn, .lp-dload { font: inherit; font-size: 12px; font-weight: 700; padding: 7px 11px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.18); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); }
.lp-dlist { display: flex; flex-direction: column; gap: 6px; }
.lp-drow { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.lp-dn { flex: 1; font-size: 13px; color: var(--ink); }
.lp-ddel { background: rgba(18,26,44,.85); color: var(--muted); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; padding: 5px 8px; }
.lp-ddel:hover { color: #ff8a8a; }
.lp-dempty, .lp-dim { font-size: 12px; color: var(--muted); }
.lp-tips { font-size: 13px; line-height: 1.5; color: var(--ink); } .lp-tips ul { margin: 6px 0; padding-left: 18px; } .lp-tips li { margin: 3px 0; }
.ws-txt { font-size: 13px; line-height: 1.55; color: var(--ink); }
.ws-more { display: inline-block; margin-top: 6px; font-size: 12px; color: rgb(var(--acc3)); }
/* v10.11 — 🌐 General search: plain google-style results (title / green url / snippet) */
.ws-gen-answer { font-size: 14px; line-height: 1.55; color: var(--ink); font-weight: 600; }
.ws-gen-kgtype { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .6; font-size: 10px; }
.ws-genlist { display: flex; flex-direction: column; gap: 14px; }
.ws-genrow { display: flex; flex-direction: column; gap: 2px; }
.ws-gen-url { font-size: 12px; color: #74c274; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-gen-url:hover { text-decoration: underline; }
.ws-gen-title { font-size: 15px; line-height: 1.3; color: rgb(var(--acc3)); text-decoration: none; }
.ws-gen-title:hover { text-decoration: underline; }
.ws-gen-snip { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ws-gen-date { color: rgb(var(--acc3)); opacity: .8; }
.ws-genrel { display: flex; flex-wrap: wrap; gap: 7px; }
.ws-genrel-chip { font: inherit; font-size: 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer; background: rgba(var(--acc),.12); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.35); }
.ws-genrel-chip:hover { background: rgba(var(--acc),.22); }
.ws-socials { display: flex; flex-wrap: wrap; gap: 7px; }
.ws-social { font-size: 12px; padding: 6px 12px; border-radius: 999px; text-decoration: none; background: rgba(var(--acc),.14); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.4); }
.ws-social:hover { background: rgba(var(--acc),.3); }
.ws-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.ws-img { display: block; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.05); }
.ws-img img { width: 100%; height: 100%; object-fit: cover; }
/* v6.50 — a tile being pre-loaded shows nothing (no broken-image glyph) until it provably decodes */
.ws-imgs img.ws-imgpend { visibility: hidden; }
/* v5.26 — reverse-image "this is them" confirm control on each photo */
.ws-imgwrap { position: relative; display: block; }
.ws-imgwrap .ws-confirm { position: absolute; left: 4px; right: 4px; bottom: 4px; border: 0; border-radius: 7px;
  padding: 3px 4px; font-size: 10px; font-weight: 700; cursor: pointer; color: #e2e8f0;
  background: rgba(15,23,42,.72); opacity: 0; transition: opacity .12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-imgwrap:hover .ws-confirm { opacity: 1; }
.ws-imgwrap .ws-confirm:hover { background: rgba(var(--acc),.85); color: #04121a; }
.ws-imgwrap .ws-confirm:disabled { cursor: default; }
.ws-imgwrap.confirmed { outline: 2px solid #4fe598; outline-offset: 1px; border-radius: 9px; }
.ws-imgwrap.confirmed .ws-confirm { opacity: 1; background: rgba(30,175,100,.9); color: #04120a; }
.ws-photohint { grid-column: 1 / -1; font-size: 11px; color: var(--muted); line-height: 1.4; margin-top: 4px; }
/* v5.27 — 🏦 RBA Cash Rate widget */
.rba-body { display: flex; flex-direction: column; gap: 8px; }
.rba-top { display: flex; align-items: center; gap: 10px; }
.rba-big { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.rba-big small { font-size: 18px; font-weight: 700; opacity: .7; margin-left: 2px; }
.rba-topr { display: flex; flex-direction: column; gap: 5px; }
.rba-lbl { font-size: 12px; font-weight: 700; line-height: 1.2; }
.rba-sub { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.rba-chip { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.rba-chip.rba-up { background: rgba(255,120,80,.18); color: #ff8a5c; }
.rba-chip.rba-down { background: rgba(60,220,130,.18); color: #4fe598; }
.rba-chart { display: block; width: 100%; }
.rba-chart .rba-axl { fill: #9fb2d8; font-size: 9px; opacity: .8; }
.rba-meet { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: rgba(148,163,184,.1); }
.rba-meet span { font-size: 11px; color: var(--muted); }
.rba-meet b { font-size: 13px; }
.rba-count { font-size: 11px; color: var(--muted); margin-top: 2px; }
.rba-count b { font-size: 15px; color: rgb(var(--acc)); }
.rba-newsh { font-size: 12px; font-weight: 700; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.rba-pg { font-size: 10px; color: var(--muted); font-weight: 500; }
.rba-news { display: flex; flex-direction: column; gap: 4px; }
/* v5.30 — 📻 Radio widget */
.radio-wrap { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.radio-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.radio-search { flex: 1 1 130px; display: flex; gap: 4px; }
.radio-search input { flex: 1; }
.radio-country { max-width: 100%; flex: 1 1 120px; }
.radio-tab { font: inherit; font-size: 11px; padding: 4px 10px; border-radius: 999px; cursor: pointer; background: rgba(18,26,44,.85); color: #ffd07a; border: 1px solid var(--line); }
.radio-tab.on { background: rgba(255,200,90,.2); border-color: rgba(255,200,90,.55); }
.radio-now { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: linear-gradient(180deg, rgba(var(--acc),.14), rgba(var(--acc),.04)); flex-wrap: wrap; }
.radio-list { display: flex; flex-direction: column; gap: 3px; }
.radio-row { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 10px; cursor: pointer; }
.radio-row:hover { background: rgba(148,163,184,.12); }
.radio-row.playing { background: rgba(var(--acc),.14); }
.radio-ico { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 7px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); font-size: 16px; }
.radio-ico img { width: 100%; height: 100%; object-fit: cover; }
.radio-meta { flex: 1 1 auto; min-width: 0; }
.radio-nm { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-sub { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-fav, .radio-play, .radio-stop { flex: 0 0 auto; font: inherit; font-size: 15px; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.radio-fav.on { color: #ffd93b; }
.radio-play:hover, .radio-stop:hover, .radio-fav:hover { background: rgba(var(--acc),.18); border-color: rgba(var(--acc),.45); }
.radio-vol { flex: 1 1 80px; accent-color: rgb(var(--acc)); }
.radio-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 16px 8px; }
/* v5.92 — radio volume row + mini equaliser */
.radio-volw { display: flex; align-items: center; gap: 6px; flex: 1 1 100%; margin-top: 2px; }
.radio-spk { flex: 1 1 100%; margin-top: 4px; font: inherit; font-size: 12px; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.3); color: var(--ink); border: 1px solid var(--line); cursor: pointer; }
.radio-volic { font-size: 12px; opacity: .8; }
.radio-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; flex: 0 0 auto; }
.radio-eq i { width: 3px; height: 4px; background: rgb(var(--acc)); border-radius: 2px; }
.radio-now .radio-eq i { animation: radioEq .9s ease-in-out infinite alternate; }
.radio-eq i:nth-child(2) { animation-delay: .15s; } .radio-eq i:nth-child(3) { animation-delay: .3s; }
.radio-eq i:nth-child(4) { animation-delay: .45s; } .radio-eq i:nth-child(5) { animation-delay: .6s; }
@keyframes radioEq { from { height: 3px; opacity: .5; } to { height: 16px; opacity: 1; } }
/* v5.31 — 😀 Emoji widget */
.emo-wrap { display: flex; flex-direction: column; gap: 7px; height: 100%; }
.emo-search { display: flex; gap: 4px; }
.emo-search input { flex: 1; }
.emo-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.emo-tab { font-size: 16px; line-height: 1; padding: 4px 7px; border-radius: 8px; cursor: pointer; background: rgba(18,26,44,.7); border: 1px solid var(--line); }
.emo-tab.on { background: rgba(var(--acc),.2); border-color: rgba(var(--acc),.55); }
.emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 3px; align-content: start; }
.emo-cell { font-size: 22px; line-height: 1; aspect-ratio: 1/1; border: 0; border-radius: 9px; cursor: pointer; background: transparent; padding: 0; transition: transform .08s, background .12s; }
.emo-cell:hover { background: rgba(148,163,184,.16); transform: scale(1.12); }
.emo-cell.copied { background: rgba(60,220,130,.3); }
.emo-empty { grid-column: 1 / -1; color: var(--muted); font-size: 12px; text-align: center; padding: 16px 8px; }
/* v5.31 — 🔤 Spelling + Dictionary widget */
.sp-wrap { display: flex; flex-direction: column; gap: 8px; }
.sp-search { display: flex; gap: 4px; } .sp-search input { flex: 1; }
.sp-tabs { display: flex; gap: 5px; }
.sp-tab { font: inherit; font-size: 11px; padding: 4px 10px; border-radius: 999px; cursor: pointer; background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); }
.sp-tab.on { background: rgba(var(--acc),.2); border-color: rgba(var(--acc),.55); }
.sp-out { display: flex; flex-direction: column; gap: 6px; }
.sp-hint { color: var(--muted); font-size: 12px; line-height: 1.45; padding: 6px 2px; }
.sp-word { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.sp-phon { font-size: 14px; color: var(--muted); font-style: italic; }
.sp-letters { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0; }
.sp-l { width: 30px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700;
  border-radius: 8px; background: rgba(var(--acc),.14); border: 1px solid rgba(var(--acc),.3); color: #bff3ff; }
.sp-space { width: 14px; }
.sp-pos { font-size: 12px; font-weight: 700; color: #ffd07a; margin-top: 4px; text-transform: lowercase; }
.sp-def { font-size: 13px; line-height: 1.4; }
.sp-eg { display: block; font-size: 12px; color: var(--muted); font-style: italic; margin-top: 2px; }
.sp-slang { padding: 6px 0; border-bottom: 1px solid rgba(120,160,220,.12); }
.sp-votes { font-size: 11px; color: var(--muted); margin-top: 3px; }
.sp-actions { display: flex; gap: 6px; margin-top: 6px; }
.sp-say, .sp-spellbtn { font: inherit; font-size: 12px; padding: 5px 12px; border-radius: 999px; cursor: pointer; background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); }
.sp-say:hover, .sp-spellbtn:hover { background: rgba(var(--acc),.18); border-color: rgba(var(--acc),.45); }
/* v5.34 — 🛰 UniFi Dream Machine */
.uni-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.uni-gw { font-size: 17px; font-weight: 800; }
.uni-isp { font-size: 11px; color: var(--muted); }
.uni-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; margin: 8px 0; }
.uni-stat { background: rgba(148,163,184,.1); border-radius: 10px; padding: 7px 4px; text-align: center; }
.uni-stat b { display: block; font-size: 18px; font-weight: 800; }
.uni-stat span { font-size: 10px; color: var(--muted); }
.uni-stat.warn b { color: #ff9b5c; }
.uni-dev-h { font-size: 12px; font-weight: 700; margin: 4px 0; }
.uni-devs { display: flex; flex-direction: column; gap: 3px; }
.uni-dev { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 3px 0; }
.uni-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.uni-dot.on { background: #4fe598; } .uni-dot.off { background: #ff5c5c; }
.uni-dn { font-weight: 600; } .uni-dm { color: var(--muted); font-size: 10.5px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uni-upd { font-size: 9px; background: rgba(255,155,90,.2); color: #ff9b5c; padding: 1px 5px; border-radius: 6px; }
/* 🟠 Hacker News */
.hn-wrap { display: flex; flex-direction: column; gap: 7px; }
.hn-tabs { display: flex; gap: 5px; }
.hn-tab { font: inherit; font-size: 11px; padding: 4px 11px; border-radius: 999px; cursor: pointer; background: rgba(18,26,44,.85); color: #ffb37a; border: 1px solid var(--line); }
.hn-tab.on { background: rgba(255,140,40,.2); border-color: rgba(255,140,40,.55); }
.hn-list { display: flex; flex-direction: column; gap: 6px; }
.hn-item { display: flex; gap: 8px; align-items: center; text-decoration: none; color: inherit; padding: 5px; border-radius: 10px; }
.hn-item:hover { background: rgba(148,163,184,.1); }
.hn-thumb { width: 54px; height: 42px; flex: 0 0 auto; border-radius: 7px; overflow: hidden; background: rgba(255,255,255,.05); }
.hn-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hn-main { flex: 1 1 auto; min-width: 0; }
.hn-title { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.hn-meta { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.hn-comments { flex: 0 0 auto; font: inherit; font-size: 11px; padding: 4px 7px; border-radius: 8px; cursor: pointer; background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); }
.hn-more { align-self: center; font: inherit; font-size: 12px; padding: 6px 16px; border-radius: 999px; cursor: pointer; background: rgba(18,26,44,.85); color: #ffb37a; border: 1px solid var(--line); }
/* 🌏 Earthquakes */
.qk-listh { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.qk-list { display: flex; flex-direction: column; gap: 3px; }
.qk-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 9px; cursor: pointer; }
.qk-row:hover { background: rgba(148,163,184,.12); }
.qk-mag { flex: 0 0 auto; min-width: 34px; text-align: center; font-size: 13px; font-weight: 800; color: #04121a; padding: 3px 6px; border-radius: 8px; }
.qk-rp { flex: 1 1 auto; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qk-ago { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.qk-card { width: min(520px, 94vw); }
.qk-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.qk-h .qk-mag { font-size: 15px; }
.qk-place { flex: 1 1 auto; font-size: 14px; font-weight: 700; }
.qk-x { position: static; }
.qk-map { width: 100%; height: 260px; border: 0; border-radius: 12px; background: #10203a; }
.qk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; margin: 10px 0; }
.qk-stats > div { background: rgba(148,163,184,.1); border-radius: 10px; padding: 7px 4px; text-align: center; }
.qk-stats b { display: block; font-size: 15px; } .qk-stats span { font-size: 10px; color: var(--muted); }
.qk-links { display: flex; gap: 12px; } .qk-links a { color: rgb(var(--acc)); font-size: 13px; }
/* 🚆 My Trains */
.tr-wrap { display: flex; flex-direction: column; gap: 8px; }
.tr-row1 { display: flex; gap: 6px; align-items: flex-start; }
.tr-field { flex: 1 1 0; position: relative; min-width: 0; }
.tr-in { width: 100%; box-sizing: border-box; }
/* v6.58 — station dropdowns + inline search */
.tr-sel { width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px; padding: 7px 8px; border-radius: 9px;
  background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid var(--line); }
.tr-search { position: absolute; z-index: 21; left: 0; right: 0; top: 100%; margin-top: 3px; }
.tr-search .tr-in { padding: 7px 9px; font-size: 12.5px; border-radius: 9px; background: rgba(10,20,38,.98); color: #eaf1ff; border: 1px solid rgba(var(--acc),.5); }
.tr-search .tr-drop { top: calc(100% + 3px); }
.tr-swap { flex: 0 0 auto; align-self: center; font-size: 16px; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); }
.tr-drop { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 3px; background: #0f1830; border: 1px solid rgba(120,160,220,.3); border-radius: 10px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.tr-dropitem { padding: 8px 10px; font-size: 12.5px; cursor: pointer; } .tr-dropitem:hover { background: rgba(var(--acc),.15); }
.tr-dropitem.tr-err { color: var(--muted); cursor: default; }
.tr-go { font: inherit; font-size: 13px; padding: 8px; border-radius: 10px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); }
/* v5.71 — 🚆 Next trains + 🔊 Play row */
.tr-btnrow { display: flex; gap: 6px; }
.tr-btnrow .tr-go { flex: 1 1 auto; }
.tr-play { font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 10px; cursor: pointer; flex: 0 0 auto;
  background: rgba(120,160,220,.14); color: #cfe0f5; border: 1px solid rgba(120,160,220,.4); }
.tr-play:hover { background: rgba(120,160,220,.28); }
.tr-hint { font-size: 12px; color: var(--muted); line-height: 1.45; }
.tr-out { display: flex; flex-direction: column; gap: 6px; }
.tr-j { background: rgba(148,163,184,.1); border-radius: 12px; padding: 8px 10px; }
.tr-jtop { display: flex; align-items: baseline; gap: 8px; }
.tr-dep { font-size: 17px; font-weight: 800; } .tr-away { font-size: 12px; color: #4fe598; } .tr-plat { margin-left: auto; font-size: 11px; color: var(--muted); }
.tr-mid { margin: 4px 0; } .tr-line { display: inline-block; font-size: 11px; font-weight: 700; background: rgba(var(--acc),.18); color: #bff3ff; padding: 2px 8px; border-radius: 999px; }
.tr-jbot { font-size: 11px; color: var(--muted); }
/* v5.37 — 📷 unified Camera widget */
.cam-wrap { display: flex; flex-direction: column; gap: 7px; height: 100%; }
.cam-tabs { display: flex; gap: 4px; }
.cam-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 16px; line-height: 1; padding: 5px 2px; border-radius: 9px; cursor: pointer; background: rgba(18,26,44,.7); border: 1px solid var(--line); color: #cfe0f5; }
.cam-tab span { font-size: 9px; color: var(--muted); }
.cam-tab.on { background: rgba(var(--acc),.2); border-color: rgba(var(--acc),.55); }
.cam-tab.on span { color: #bff3ff; }
.cam-stage { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: #06101f; }
.cam-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-badge { position: absolute; top: 8px; left: 8px; font-size: 22px; line-height: 1; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
/* v8.10 — Identify focus frame: a bracketed square in the centre where you hold the item */
.cam-focusbox { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); width: 58%; aspect-ratio: 1/1;
  border: 2px solid rgba(255,255,255,.7); border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.18); pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 33%, transparent 66%); }
.cam-focusbox::before, .cam-focusbox::after { content: ''; position: absolute; width: 20px; height: 20px; border: 3px solid rgb(var(--acc2)); }
.cam-focusbox::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.cam-focusbox::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.cam-focuslbl { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); white-space: nowrap; font-size: 10.5px;
  color: #eaf3ff; background: rgba(10,20,38,.72); padding: 2px 8px; border-radius: 999px; }
/* v8.11 — 🧠 Object Detection supplement */
.cam-detect-panel .movie-panel-body { padding: 10px 12px; overflow-y: auto; }
.cdet-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.cdet-btn { font: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(120,160,220,.14); color: #cfe0ff; border: 1px solid rgba(120,160,220,.32); }
.cdet-btn:hover { background: rgba(120,160,220,.26); }
.cdet-btn.cdet-live.on { background: rgba(255,90,90,.24); color: #ffb4b4; border-color: rgba(255,90,90,.55); }
.cdet-note { font-size: 10.5px; color: var(--muted); margin-left: auto; }
.cdet-list { display: flex; flex-direction: column; gap: 7px; }
.cdet-item { padding: 8px 10px; border-radius: 11px; cursor: pointer; background: rgba(120,160,220,.06); border: 1px solid rgba(120,160,220,.16); }
.cdet-item:hover { background: rgba(var(--acc),.14); border-color: rgba(var(--acc),.4); }
.cdet-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cdet-name { font-size: 13.5px; color: var(--ink); }
.cdet-conf { font-size: 11px; font-weight: 700; color: rgb(var(--acc2)); }
.cdet-cbar { height: 4px; border-radius: 999px; background: rgba(0,0,0,.3); overflow: hidden; margin: 5px 0; }
.cdet-cbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4aa3e8, #4ade80); }
.cdet-reason { font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.cdet-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 20px 8px; }
.cdet-hint { font-size: 10px; color: var(--muted); text-align: center; margin-top: 9px; opacity: .8; }
/* v8.13 — Home Assistant Cameras supplement + live view */
.hacam-panel .movie-panel-body { padding: 10px 12px; overflow-y: auto; }
.hacam-note { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.hacam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.hacam-cell { padding: 0; border: 1px solid rgba(120,160,220,.2); border-radius: 12px; overflow: hidden; cursor: pointer; background: #06101f; position: relative; }
.hacam-cell:hover { border-color: rgba(var(--acc),.5); }
.hacam-thumb { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #06101f; }
.hacam-cell.hacam-err .hacam-thumb { visibility: hidden; }
.hacam-cell.hacam-err::before { content: '📷 no image'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); }
.hacam-name { display: block; padding: 6px 8px; font-size: 11.5px; color: var(--ink); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hacam-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 20px 10px; line-height: 1.5; }
.hacam-view { width: min(720px, 94vw); height: min(480px, 74vh); }
.hacam-view .movie-panel-body { padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #000; }
.hacam-live { width: 100%; height: 100%; object-fit: contain; background: #000; }
.hacam-live.hacam-liveerr { opacity: .3; }
/* v8.14 — 🧊 3D Models widget + WebGL STL viewer */
.md3-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; overflow-y: auto; }
.md3-search { display: flex; gap: 6px; }
.md3-q { flex: 1 1 auto; min-width: 0; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 9px; background: rgba(10,20,38,.9); color: #eaf1ff; border: 1px solid var(--line); }
.md3-q:focus { outline: none; border-color: rgba(var(--acc),.6); }
.md3-b { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 11px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.md3-b:hover { background: rgba(var(--acc),.3); }
.md3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.md3-cell { padding: 0; border: 1px solid rgba(120,160,220,.2); border-radius: 11px; overflow: hidden; cursor: pointer; background: #06101f; }
.md3-cell:hover { border-color: rgba(var(--acc),.5); }
.md3-cell img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #06101f; }
.md3-cn { display: block; padding: 4px 6px; font-size: 10px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md3-seclab { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: 4px; }
.md3-saved { display: flex; flex-direction: column; gap: 5px; }
.md3-srow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: rgba(120,160,220,.06); border: 1px solid rgba(120,160,220,.14); }
.md3-sthumb { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 6px; object-fit: cover; background: #06101f; border: 1px solid rgba(120,160,220,.2); }
.md3-sthumbph { display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.md3-sn { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md3-ss { font-size: 10px; color: var(--muted); }
.md3-open, .md3-del, .md3-ren, .md3-grp, .md3-p1s { font: inherit; font-size: 11px; padding: 3px 8px; border-radius: 7px; cursor: pointer; background: rgba(120,160,220,.14); color: #cfe0ff; border: 1px solid rgba(120,160,220,.3); }
.md3-p1s { background: rgba(255,180,60,.16); color: #ffcf85; border-color: rgba(255,180,60,.4); }
/* v8.71 — Send-to-P1S bridge panel */
.bmb-bridge-panel .movie-panel-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.bmbr-head { font-size: 15px; }
.bmbr-info { font-size: 12px; }
.bmbr-steps { display: flex; flex-direction: column; gap: 8px; }
.bmbr-step { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink); }
.bmbr-step b { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: rgba(120,160,220,.14); border: 1px solid var(--line); color: var(--muted); }
.bmbr-step.done b { background: rgba(60,220,120,.2); border-color: rgba(60,220,120,.5); color: #7dffb0; }
.bmbr-dl { color: rgb(var(--acc)); cursor: pointer; text-decoration: underline; }
.bmbr-btns { display: flex; gap: 8px; }
.bmbr-b { flex: 1; font: inherit; font-size: 13px; font-weight: 600; padding: 9px; border-radius: 10px; cursor: pointer; background: rgba(var(--acc),.14); color: rgb(var(--acc3)); border: 1px solid rgba(var(--acc),.4); }
.bmbr-b:hover { background: rgba(var(--acc),.26); }
.bmbr-note { font-size: 11.5px; line-height: 1.5; color: var(--muted); background: rgba(255,180,60,.08); border: 1px solid rgba(255,180,60,.25); border-radius: 10px; padding: 10px 12px; }
.bmbr-auto { background: rgba(60,220,120,.16) !important; color: #7dffb0 !important; border-color: rgba(60,220,120,.6) !important; font-size: 14px !important; }
.bmbr-auto:disabled { opacity: .5; cursor: default; }
.bmbr-jobstatus:empty { display: none; }
.bmbr-jobstatus { font-size: 12.5px; text-align: center; color: var(--ink); background: rgba(120,160,220,.1); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
/* v8.70 — STL upload panel + local prints library */
.md3-uploadbtn { background: rgba(60,220,120,.15) !important; color: #7dffb0 !important; border-color: rgba(60,220,120,.5) !important; }
.md3-glabel { font-size: 11px; font-weight: 700; color: rgb(var(--acc3)); text-transform: uppercase; letter-spacing: .04em; margin: 9px 0 3px; opacity: .92; }
.md3-upload-panel .movie-panel-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.stlu-drop { border: 2px dashed rgba(var(--acc),.5); border-radius: 12px; padding: 24px 14px; text-align: center; cursor: pointer; background: rgba(var(--acc),.05); transition: background .15s, border-color .15s; }
.stlu-drop.drag, .stlu-drop:hover { background: rgba(var(--acc),.12); border-color: rgba(var(--acc),.8); }
.stlu-drop.has { border-style: solid; border-color: rgba(60,220,120,.6); background: rgba(60,220,120,.08); }
.stlu-dropinner { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink); }
.stlu-dropinner span { font-size: 12px; color: var(--muted); }
.stlu-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.stlu-row > span { flex: none; width: 104px; }
.stlu-row input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px; background: rgba(18,26,44,.95); color: var(--ink); border: 1px solid var(--line); outline: none; }
.stlu-save { font: inherit; font-size: 14px; font-weight: 700; padding: 10px; border-radius: 10px; cursor: pointer; background: rgba(60,220,120,.16); color: #7dffb0; border: 1px solid rgba(60,220,120,.6); }
.stlu-save:disabled { opacity: .5; cursor: default; }
.stlu-save:not(:disabled):hover { background: rgba(60,220,120,.3); }
.stlu-status { font-size: 12px; color: var(--muted); min-height: 16px; text-align: center; }
.md3-del { color: var(--muted); }
.md3-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 12px 8px; line-height: 1.5; }
.md3-viewer .movie-panel-body { padding: 0; display: flex; flex-direction: column; }
.md3-vwrap { position: relative; flex: 1 1 auto; min-height: 0; background: #081120; }
.md3-cv { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.md3-cv:active { cursor: grabbing; }
.md3-load, .md3-err { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); }
.md3-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.md3-tools .md3-b { font-size: 11.5px; padding: 5px 9px; }
.md3-stats { font-size: 10.5px; color: var(--muted); margin-left: auto; }
.md3-print-panel { flex: 0 0 auto; border-top: 1px solid var(--line); background: rgba(8,17,32,.6); max-height: 42%; overflow: auto; }
.md3-pi { padding: 9px 12px; display: flex; flex-direction: column; gap: 4px; }
.md3-pirow { font-size: 11.5px; color: var(--ink); }
.md3-pirow b { color: rgb(var(--acc2)); font-weight: 700; margin-right: 6px; display: inline-block; min-width: 88px; }
.md3-fit { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-right: 5px; }
.md3-fit.ok { background: rgba(34,197,94,.16); color: #86efac; border: 1px solid rgba(34,197,94,.4); }
.md3-fit.no { background: rgba(220,38,38,.16); color: #fca5a5; border: 1px solid rgba(220,38,38,.4); }
.md3-pinote { font-size: 10px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.md3-pick .movie-panel-body { padding: 8px; }
.md3-picklist { display: flex; flex-direction: column; gap: 5px; }
/* ===== Bambu Lab P1S widget ===== */
.bmb-body { display: flex; flex-direction: column; gap: 9px; }
.bmb-loading, .bmb-setup { font-size: 12.5px; color: var(--muted); text-align: center; padding: 14px 8px; line-height: 1.5; }
.bmb-hint { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
.bmb-matchin { margin-top: 9px; width: 66%; max-width: 220px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: rgba(120,160,220,.08); color: var(--ink); }
.bmb-hero { display: flex; gap: 12px; align-items: center; }
.bmb-svg { width: 84px; height: 84px; flex: 0 0 auto; }
.bmb-heroimg { width: 96px; height: 96px; object-fit: contain; flex: 0 0 auto; border-radius: 8px; }
.bmb-heroimg.on { filter: drop-shadow(0 0 8px rgba(55,214,122,.45)); }
.bmb-spools { display: flex; align-items: center; gap: 6px; }
.bmb-spoolslab { font-size: 9px; font-weight: 700; letter-spacing: .05em; color: var(--muted); margin-right: 2px; }
.bmb-spool { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); position: relative; box-shadow: inset 0 0 5px rgba(0,0,0,.45); }
.bmb-spool::after { content: ''; position: absolute; inset: 37%; border-radius: 50%; background: #0b1220; }
.bmb-heroinfo { flex: 1 1 auto; min-width: 0; }
.bmb-stage { font-size: 15px; font-weight: 800; text-transform: capitalize; color: var(--muted); line-height: 1.15; }
.bmb-stage.on { color: #37d67a; }
.bmb-task { font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.bmb-progwrap { height: 8px; border-radius: 999px; background: rgba(120,160,220,.16); overflow: hidden; margin-top: 7px; }
.bmb-progbar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgb(var(--acc)), rgb(var(--acc2))); transition: width .5s ease; }
.bmb-progrow { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.bmb-layer { font-size: 10.5px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.bmb-temps { display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: 6px; }
.bmb-temp { background: rgba(120,160,220,.06); border: 1px solid rgba(120,160,220,.14); border-radius: 9px; padding: 6px 4px; text-align: center; }
.bmb-tl { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bmb-tv { display: block; font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bmb-tv i { font-style: normal; font-size: 10px; color: var(--muted); }
.bmb-ctl { display: flex; flex-wrap: wrap; gap: 6px; }
.bmb-b { font: inherit; font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.bmb-b:hover { background: rgba(var(--acc),.3); }
.bmb-light.on { background: rgba(255,196,60,.2); color: #ffd873; border-color: rgba(255,196,60,.5); }
.bmb-stop { background: rgba(220,38,38,.16); color: #fca5a5; border-color: rgba(220,38,38,.45); }
.bmb-seclab { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bmb-ams { display: flex; flex-wrap: wrap; gap: 6px; }
.bmb-tray { display: flex; align-items: center; gap: 6px; background: rgba(120,160,220,.06); border: 1px solid rgba(120,160,220,.14); border-radius: 8px; padding: 4px 8px; font-size: 11px; color: var(--ink); }
.bmb-swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.25); flex: 0 0 auto; }
.bmb-fans { display: flex; flex-wrap: wrap; gap: 8px; font-size: 10.5px; color: var(--muted); }
.bmb-alltgl { width: 100%; text-align: left; }
.bmb-all { display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow: auto; }
.bmb-mrow { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; padding: 3px 6px; border-radius: 6px; background: rgba(120,160,220,.05); }
.bmb-mn { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmb-mv { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bmb-campanel .movie-panel-body { padding: 0; display: flex; flex-direction: column; }
.bmb-camfoot { flex: 0 0 auto; padding: 8px 12px; font-size: 11px; color: var(--muted); line-height: 1.4; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.25); }
.bmb-camwrap { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; background: #05090f; }
.bmb-camimg { max-width: 100%; max-height: 100%; display: block; }
.bmb-camnote { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-size: 12px; color: var(--muted); }
/* ===== Surveillance Cameras widget ===== */
.cctv-body { display: flex; flex-direction: column; gap: 8px; }
.cctv-empty { font-size: 12.5px; color: var(--muted); text-align: center; padding: 16px 8px; line-height: 1.5; }
.cctv-bar { display: flex; align-items: center; gap: 8px; }
.cctv-count { font-size: 10.5px; color: var(--muted); margin-left: auto; }
.cctv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cctv-cell { position: relative; padding: 0; border: 1px solid rgba(120,160,220,.2); border-radius: 11px; overflow: hidden; cursor: pointer; background: #06101f; aspect-ratio: 16/9; display: block; }
.cctv-cell:hover { border-color: rgba(var(--acc),.55); }
.cctv-thumb { display: block; width: 100%; height: 100%; object-fit: cover; background: #06101f; }
.cctv-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; opacity: .85; }
.cctv-lbl { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; font-size: 11px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cctv-off { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: default; color: var(--muted); }
.cctv-offi { font-size: 22px; opacity: .6; }
.cctv-off .cctv-lbl { position: static; background: none; color: var(--muted); text-align: center; }
.cctv-view .movie-panel-body { padding: 0; display: flex; flex-direction: column; }
.cctv-viewwrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: #05090f; }
.cctv-viewimg { max-width: 100%; max-height: 100%; display: block; }
.cctv-viewnote { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-size: 12px; color: var(--muted); }
.cctv-viewbar { flex: 0 0 auto; display: flex; gap: 6px; padding: 7px 10px; border-top: 1px solid var(--line); }
.cam-rec { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(220,38,38,.9); padding: 2px 8px; border-radius: 999px; animation: campulse 1.1s ease-in-out infinite; }
@keyframes campulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.cam-stage.cam-shot::after { content: ''; position: absolute; inset: 0; background: #fff; animation: camflash .35s ease-out; }
@keyframes camflash { from { opacity: .9; } to { opacity: 0; } }
.cam-ctl { display: flex; flex-wrap: wrap; gap: 5px; }
.cam-btn { flex: 1 1 auto; font: inherit; font-size: 12px; padding: 7px 8px; border-radius: 9px; cursor: pointer; background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); white-space: nowrap; }
.cam-btn:hover { background: rgba(var(--acc),.16); border-color: rgba(var(--acc),.45); }
.cam-primary { background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border-color: rgba(var(--acc),.5); }
.cam-recon { background: rgba(220,38,38,.22); color: #ffb4b4; border-color: rgba(220,38,38,.5); }
.cam-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.cam-frbtn { font: inherit; font-size: 11px; padding: 4px 9px; border-radius: 999px; cursor: pointer; background: rgba(18,26,44,.7); color: #cfe0f5; border: 1px solid var(--line); }
.cam-frbtn.on { background: rgba(var(--acc),.2); border-color: rgba(var(--acc),.55); }
.cam-legend { font-size: 10.5px; color: var(--muted); line-height: 1.4; text-align: center; }
/* v5.38 — 🌪 Disaster Watch widget */
.dis-wrap { display: flex; flex-direction: column; gap: 7px; }
.dis-alert { background: linear-gradient(180deg, rgba(220,38,38,.28), rgba(220,38,38,.12)); border: 1px solid rgba(255,90,90,.6); border-radius: 12px; padding: 9px 11px; animation: disPulse 1.8s ease-in-out infinite; }
@keyframes disPulse { 0%,100% { box-shadow: 0 0 0 rgba(255,80,80,0); } 50% { box-shadow: 0 0 16px rgba(255,80,80,.45); } }
.dis-alert-h { font-size: 13px; font-weight: 800; color: #ffdada; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.dis-dismiss { margin-left: auto; font: inherit; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.dis-dismiss:hover { background: rgba(255,255,255,.28); }
.dis-alert-row { font-size: 12px; color: #ffecec; line-height: 1.5; }
.dis-ok { font-size: 12px; color: #7bdca0; background: rgba(60,220,130,.12); border-radius: 10px; padding: 7px 10px; }
.dis-head { font-size: 11px; color: var(--muted); }
.dis-list { display: flex; flex-direction: column; gap: 2px; }
.dis-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 9px; cursor: pointer; }
.dis-row:hover { background: rgba(148,163,184,.12); }
.dis-row.dis-near { background: rgba(255,80,80,.12); }
/* v6.60 — near-you disaster rows stand out more on mobile (they already sort to the top) */
body.max-phone .dis-row.dis-near { border-left: 3px solid #ff5050; padding-left: 6px; }
.dis-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dis-ico { font-size: 16px; flex: 0 0 auto; }
.dis-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dis-nm { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dis-sub { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dis-dist { font-size: 10.5px; color: rgb(var(--acc3)); white-space: nowrap; }
.dis-sev { font-size: 12.5px; color: #cfe0f5; margin: 8px 0; padding: 8px 10px; background: rgba(148,163,184,.12); border-radius: 10px; }
/* v5.39 — 📅 Calendar + 📧 Gmail widgets */
.gc-hint, .gm-hint { font-size: 12px; color: var(--muted); line-height: 1.5; padding: 6px 2px; }
.gc-list { display: flex; flex-direction: column; gap: 3px; }
.gc-day { font-size: 11px; font-weight: 800; color: #ffd07a; margin: 8px 0 2px; text-transform: uppercase; letter-spacing: .4px; }
.gc-day:first-child { margin-top: 0; }
.gc-ev { display: flex; gap: 9px; padding: 5px 4px; border-radius: 8px; align-items: baseline; }
.gc-ev:hover { background: rgba(148,163,184,.1); }
.gc-time { flex: 0 0 58px; font-size: 11.5px; color: rgb(var(--acc3)); font-weight: 600; }
.gc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gc-sum { font-size: 13px; }
.gc-loc { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-wrap { display: flex; flex-direction: column; gap: 6px; }
.gm-head { font-size: 12px; color: var(--muted); }
.gm-unread { font-size: 15px; font-weight: 800; color: rgb(var(--acc)); }
.gm-list { display: flex; flex-direction: column; gap: 2px; }
.gm-msg { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'dot meta' 'dot subj' 'dot snip'; gap: 0 8px; padding: 6px 4px; border-radius: 9px; }
.gm-msg:hover { background: rgba(148,163,184,.1); }
.gm-dot { grid-area: dot; width: 8px; height: 8px; border-radius: 50%; background: transparent; align-self: center; }
.gm-msg.gm-new .gm-dot { background: rgb(var(--acc)); }
.gm-msg.gm-new .gm-from, .gm-msg.gm-new .gm-subj { font-weight: 700; }
.gm-meta { grid-area: meta; display: flex; justify-content: space-between; gap: 8px; }
.gm-from { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-when { font-size: 10.5px; color: var(--muted); flex: 0 0 auto; }
.gm-subj { grid-area: subj; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-snip { grid-area: snip; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-open { align-self: flex-start; font-size: 12px; color: rgb(var(--acc)); margin-top: 2px; }
/* v5.47 — surprise batch: World Clock, Fear&Greed, Cocktail/Recipe, Holidays */
.wc-list { display: flex; flex-direction: column; gap: 4px; }
.wc-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid rgba(120,160,220,.1); }
.wc-row:last-child { border-bottom: 0; }
.wc-meta { flex: 1 1 auto; min-width: 0; }
.wc-city { font-size: 13px; font-weight: 700; }
.wc-sub { font-size: 10.5px; color: var(--muted); }
.wc-time { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.wc-del { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; opacity: 0; transition: opacity .12s; }
.wc-row:hover .wc-del { opacity: 1; }
.fg-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px; }
.fg-val { font-size: 46px; font-weight: 800; line-height: 1; }
.fg-lbl { font-size: 15px; font-weight: 700; }
.fg-bar { width: 100%; height: 8px; border-radius: 999px; background: linear-gradient(90deg,#ff4d4d,#ff8a3d,#ffd93b,#8fd96a,#4fe598); position: relative; margin-top: 4px; }
.fg-bar span { position: absolute; left: 0; top: -3px; height: 14px; width: 3px; background: #fff; border-radius: 2px; box-shadow: 0 0 6px rgba(0,0,0,.6); transform: translateX(-1px); margin-left: 0; }
.fg-scale { width: 100%; display: flex; justify-content: space-between; font-size: 9.5px; color: var(--muted); }
.fg-spark { width: 100%; height: 40px; margin-top: 6px; }
.fg-note { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.4; }
.food-wrap { display: flex; flex-direction: column; gap: 6px; }
/* v6.44 — the recipe/cocktail body SCROLLS with the wheel (scrollbar hidden as always) instead of
   forcing a widget resize to see the rest of the ingredients/method. !important because the generic
   .res-card-body clips overflow. v6.48 — same for the Gmail list. */
.res-card-body.food-body, .res-card-body.gm-body { overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: none; }
.res-card-body.food-body::-webkit-scrollbar, .res-card-body.gm-body::-webkit-scrollbar { display: none; width: 0; }
/* v6.48 — Gmail [N] red unread badge next to the title */
.gm-badge { display: inline-block; margin-left: 7px; min-width: 18px; padding: 1px 6px; border-radius: 9px; text-align: center;
  background: #dc2626; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0; vertical-align: 1px;
  box-shadow: 0 0 8px rgba(220,38,38,.5); }
.gm-badge[hidden] { display: none !important; }
button.gm-open { background: none; border: 0; padding: 0; cursor: pointer; font-size: 12px; color: rgb(var(--acc)); }
/* v6.49 — Plex: filter dropdowns + ‹ Prev / Next › pager + the resume DROPDOWN */
.plex-fbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.plex-sel { flex: 1 1 30%; min-width: 110px; font-size: 12px; padding: 5px 8px; border-radius: 9px;
  background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid var(--line); }
.plex-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.plex-pager[hidden] { display: none !important; }
.plex-pinfo { font-size: 12px; color: var(--muted); min-width: 46px; text-align: center; }
.plex-resume-dd { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.plex-resume-dd[hidden] { display: none !important; }
.plex-resume-sel { flex: 1 1 auto; }
.plex-resume-rm { flex: 0 0 auto; background: none; border: 1px solid rgba(248,113,113,.4); color: #fca5a5;
  border-radius: 8px; padding: 4px 8px; font-size: 11px; cursor: pointer; }
.plex-resume-rm:hover { background: rgba(248,113,113,.18); }
/* v6.44 — small ▶ video link on the right of the Ingredients heading + the in-MAX player panel */
.food-h-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.food-vidlink { font-size: 11px; padding: 2px 9px; border-radius: 8px; cursor: pointer; flex: 0 0 auto;
  background: rgba(248,113,113,.14); color: #fca5a5; border: 1px solid rgba(248,113,113,.4); }
.food-vidlink:hover { background: rgba(248,113,113,.28); }
.food-vid-solo { align-self: flex-start; margin-top: 4px; font-size: 12px; }
#foodVideo { width: min(720px, 92vw); height: min(460px, 72vh); }
#foodVideo .cal-panel-body { padding: 0; display: flex; }
.food-vidframe { flex: 1 1 auto; width: 100%; border: 0; display: block; border-radius: 0 0 12px 12px; background: #000; }
.food-img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 12px; }
.food-name { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.food-fav { flex: 0 0 auto; background: none; border: 0; color: rgb(var(--acc2)); font-size: 19px; line-height: 1; cursor: pointer; padding: 0 2px; }
.food-fav:hover { transform: scale(1.15); }
.food-meta { font-size: 11.5px; color: var(--muted); }
.food-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #ffd07a; margin-top: 4px; }
.food-ing { margin: 0; padding-left: 18px; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.food-ing li span { color: var(--muted); }
.food-steps { font-size: 12.5px; line-height: 1.5; color: #cfe0f5; }
.food-vid { font-size: 12.5px; color: rgb(var(--acc)); margin-top: 4px; }
.hol-list { display: flex; flex-direction: column; gap: 4px; }
.hol-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 9px; }
.hol-row:hover { background: rgba(148,163,184,.1); }
.hol-when { flex: 0 0 auto; width: 40px; text-align: center; }
.hol-when b { display: block; font-size: 18px; font-weight: 800; color: rgb(var(--acc)); line-height: 1; }
.hol-when span { font-size: 9px; color: var(--muted); }
.hol-meta { flex: 1 1 auto; min-width: 0; }
.hol-name { font-size: 13px; font-weight: 600; }
.hol-sub { font-size: 10.5px; color: var(--muted); }
/* v5.51 — 📍 My Location */
.loc-wrap { display: flex; flex-direction: column; gap: 7px; }
.loc-top { display: flex; align-items: center; gap: 8px; }
.loc-badge { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.loc-badge.loc-gps { background: rgba(79,229,152,.2); color: #7dffa8; }
.loc-badge.loc-home { background: rgba(var(--acc),.2); color: rgb(var(--acc2)); }
.loc-badge.loc-ip { background: rgba(255,178,107,.2); color: #ffcf9c; }
.loc-acc { font-size: 11px; color: var(--muted); }
.loc-place { font-size: 17px; font-weight: 800; line-height: 1.2; }
.loc-sub { font-size: 11.5px; color: var(--muted); }
.loc-map { width: 100%; height: 200px; border: 0; border-radius: 12px; background: #10203a; }
.loc-coords { font-size: 11px; color: var(--muted); } .loc-coords a { color: rgb(var(--acc)); }
.loc-gpsbtn { font: inherit; font-size: 12.5px; padding: 8px; border-radius: 10px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); }
.loc-gpsbtn:hover { background: rgba(var(--acc),.28); }
/* v5.53 — 🎤 My Voice widget */
.mv-wrap { display: flex; flex-direction: column; gap: 7px; }
.mv-voice { width: 100%; }
.mv-text { width: 100%; resize: vertical; min-height: 60px; font: inherit; font-size: 13px; padding: 8px; border-radius: 10px; background: rgba(10,20,38,.9); color: #eaf1ff; border: 1px solid var(--line); }
.mv-btns { display: flex; gap: 6px; }
.mv-play { flex: 1 1 auto; font: inherit; font-size: 13px; padding: 8px; border-radius: 10px; cursor: pointer; background: rgba(var(--acc),.18); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); }
.mv-save, .mv-stopb { font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 10px; cursor: pointer; background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); }
.mv-play:hover, .mv-save:hover, .mv-stopb:hover { background: rgba(var(--acc),.16); }
.mv-status { font-size: 11.5px; color: var(--muted); min-height: 1em; }
.mv-list { display: flex; flex-direction: column; gap: 3px; }
.mv-msg { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(120,160,220,.1); }
.mv-mtext { flex: 1 1 auto; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-m { flex: 0 0 auto; font-size: 13px; width: 28px; height: 26px; border-radius: 7px; cursor: pointer; background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); padding: 0; }
.mv-m:hover { background: rgba(var(--acc),.16); }
/* v5.55 — History + Buzz Words widgets */
.histw-body, .bw-body { overflow-y: auto; }
.histw-list { display: flex; flex-direction: column; gap: 8px; }
.histw-pager { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.histw-pager button { font: inherit; font-size: 12px; padding: 4px 11px; border-radius: 999px; cursor: pointer; background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); }
.histw-pager button:disabled { opacity: .4; cursor: default; }
.bw-scroll { display: flex; flex-direction: column; gap: 10px; }
.bw-body .bw-group h3 { font-size: 12px; margin: 4px 0; }
/* v5.56 — Bookmarks widget + Web Search bookmark bar */
.ws-bmbar { display: flex; gap: 6px; margin: 4px 0 2px; }
.ws-bmbtn { flex: 1 1 auto; font: inherit; font-size: 11.5px; padding: 6px 8px; border-radius: 999px; cursor: pointer; background: rgba(255,200,90,.14); color: #ffd07a; border: 1px solid rgba(255,200,90,.4); }
.ws-bmbtn:hover { background: rgba(255,200,90,.28); }
.bm-body { overflow-y: auto; }
.bm-empty { font-size: 12.5px; color: var(--muted); line-height: 1.5; padding: 10px 4px; }
.bm-list { display: flex; flex-direction: column; gap: 5px; }
.bm-row { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-radius: 10px; cursor: pointer; }
.bm-row:hover { background: rgba(148,163,184,.12); }
.bm-thumb { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.bm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bm-meta { flex: 1 1 auto; min-width: 0; }
.bm-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-sub { font-size: 10.5px; color: var(--muted); }
.bm-del { flex: 0 0 auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; opacity: 0; transition: opacity .12s; }
.bm-row:hover .bm-del { opacity: 1; }
#hdrFsBtn.on { color: rgb(var(--acc)); }
.ws-profile { display: flex; flex-direction: column; gap: 4px; }
.ws-pf { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; border-bottom: 1px solid rgba(120,160,220,.1); padding: 3px 0; }
.ws-pf span { color: var(--muted); } .ws-pf b { color: #bfe9ff; text-align: right; }
.ws-news { display: flex; flex-direction: column; gap: 6px; }
.ws-newsrow { text-decoration: none; color: inherit; padding: 5px 0; border-bottom: 1px solid rgba(120,160,220,.1); display: block; }
.ws-newsrow:last-child { border-bottom: 0; }
.ws-news-t { font-size: 12.5px; font-weight: 600; color: #cfe0f5; line-height: 1.35; }
.ws-news-m { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.ws-soon { grid-column: 1/-1; border-color: rgba(229,160,13,.4); background: rgba(229,160,13,.08); }
/* v4.82 — "bring up <name>" flashes only the FRAMING & underlines red for ~2s — text stays its normal colour */
.wdg-flash { animation: wdgFlash 0.5s ease-in-out 0s 4; }
.wdg-flash .res-card-head { animation: wdgFlashUnderline 0.5s ease-in-out 0s 4; }
/* v5.89 — NRL live-tracking green dot in the title bar */
.res-card-head .nrl-livebadge { color: #3ad07a; font-size: 12px; margin-right: 5px; flex: 0 0 auto; animation: nrlPulse 1.3s ease-in-out infinite; }
@keyframes nrlPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; text-shadow: 0 0 8px rgba(58,208,122,.9); } }
/* v5.88 — a red line traces around the widget border */
.wdg-trace { position: relative; }
.wdg-trace::after { content: ''; position: absolute; inset: -1px; border-radius: 13px; padding: 2px; pointer-events: none; z-index: 60;
  background: conic-gradient(#ff3b3b 0deg 45deg, rgba(255,59,59,0) 45deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: wdgTraceSpin 1.1s linear infinite; }
@keyframes wdgTraceSpin { to { transform: rotate(360deg); } }
@keyframes wdgFlash {
  0%, 100% { border-color: var(--line); box-shadow: none; }
  50% { border-color: #ff3b3b; box-shadow: 0 0 0 2px rgba(255,59,59,.7), 0 0 26px rgba(255,59,59,.55); }
}
@keyframes wdgFlashUnderline {
  0%, 100% { border-bottom-color: var(--line); }
  50% { border-bottom-color: #ff3b3b; box-shadow: 0 2px 0 -1px rgba(255,59,59,.6); }
}
/* v4.82 — In Cinemas / TV: click a title → inline detail band (year, plot, cast) + trailer/pics panel */
.tmdb-click { cursor: pointer; }
.tmdb-click:hover { outline: 1px solid rgba(var(--acc),.5); outline-offset: -1px; border-radius: 8px; }
.tmdb-detail { margin-top: 8px; padding: 8px; display: flex; gap: 10px;
  background: rgba(10,18,34,.55); border: 1px solid rgba(120,160,220,.25); border-radius: 10px; }
.tmdb-d-load { padding: 6px 2px; opacity: .8; font-size: 13px; }
.tmdb-d-pos { width: 74px; height: auto; border-radius: 6px; flex: 0 0 auto; align-self: flex-start; }
.tmdb-d-body { min-width: 0; flex: 1 1 auto; }
.tmdb-d-title { font-weight: 700; font-size: 14px; }
.tmdb-d-sub { font-size: 12px; opacity: .75; margin: 2px 0 5px; }
.tmdb-d-plot { font-size: 12.5px; line-height: 1.4; max-height: 6.4em; overflow: auto; }
.tmdb-d-dim { opacity: .6; }
.tmdb-d-cast { font-size: 12px; margin-top: 5px; opacity: .9; }
.tmdb-d-acts { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.tmdb-d-btn { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(var(--acc),.5); background: rgba(var(--acc),.14); color: inherit; }
.tmdb-d-btn:hover { background: rgba(var(--acc),.26); }
.tmdb-d-x { border-color: rgba(120,160,220,.35); background: rgba(120,160,220,.12); }
.movie-panel { position: fixed; right: 24px; top: 84px; width: min(560px, 92vw); height: min(560px, 82vh);
  z-index: 70; display: flex; flex-direction: column; background: rgba(11,20,36, var(--card-alpha, 1)); color: #e8f0ff;   /* v8.45 — respects master + per-window opacity */
  border: 1px solid rgba(120,160,220,.35); border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,.6); overflow: hidden; }
.movie-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; font-weight: 700; cursor: move; border-bottom: 1px solid rgba(120,160,220,.25); background: rgba(20,32,56,.7); }
.movie-panel-head .res-x { cursor: pointer; }
.movie-panel-body { flex: 1 1 auto; overflow: auto; padding: 12px; }
.mv-frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #000; margin-bottom: 10px; }
.mv-frame iframe, .mv-still img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.mv-sub { font-size: 12.5px; opacity: .8; margin-bottom: 6px; }
.mv-plot { font-size: 13.5px; line-height: 1.5; margin: 0 0 12px; }
.mv-dim { opacity: .6; }
.mv-cast h4, .mv-pics h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin: 0 0 6px; }
.mv-cast-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mv-cast-chip { display: inline-flex; flex-direction: column; padding: 4px 9px; border-radius: 9px;
  background: rgba(120,160,220,.12); border: 1px solid rgba(120,160,220,.2); font-size: 12px; line-height: 1.25; }
.mv-cast-chip i { font-style: normal; opacity: .6; font-size: 11px; }
.mv-pics-wrap { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.mv-pics-wrap img { height: 96px; width: auto; border-radius: 8px; flex: 0 0 auto; }
/* 🎬 In Cinemas widget (v5.95) */
.cin-head { margin: 2px 0 8px; display: flex; flex-direction: column; gap: 5px; }
/* v9.96 — restructured header: location row on top, "NOW SHOWING" + Coming Soon underneath */
.cin-htop { display: flex; align-items: center; gap: 8px; }
.cin-head .cin-loc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; color: var(--ink); }
.cin-hsub { display: flex; align-items: center; gap: 8px; }
.cin-now { flex: 1 1 auto; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: rgb(var(--acc2)); }
.cin-nav { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.cin-nav button { width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,.06); color: var(--fg); border: 1px solid rgba(255,255,255,.14); font-size: 15px; line-height: 1; cursor: pointer; }
.cin-nav button:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.cin-nav button:disabled { opacity: .35; cursor: default; }
.cin-head .cin-day { font-weight: 600; opacity: .85; min-width: 84px; text-align: center; }
.cin-soon { flex: none; font: inherit; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.4); }
.cin-soon:hover { background: rgba(var(--acc),.3); }
.cin-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 22px 8px; line-height: 1.7; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; padding: 4px; }
.cs-card { display: flex; flex-direction: column; gap: 5px; cursor: pointer; border-radius: 8px; transition: transform .12s; }
.cs-card:hover { transform: translateY(-2px); } .cs-card:hover .cs-t { color: rgb(var(--acc2)); }
.cs-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 8px; background: #0a1120; }
.cs-t { font-size: 12px; font-weight: 600; line-height: 1.25; }
.cs-d { font-size: 11px; color: rgb(var(--acc2)); }
/* v9.58 — 🎞 MAX Videos (Google Drive) */
.mxv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 2px; }
.mxv-card { position: relative; display: flex; flex-direction: column; }   /* v9.72 — now a container; the play button + actions live inside */
.mxv-cplay { display: flex; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; width: 100%; }
.mxv-sz { font-size: 10.5px; color: var(--muted); margin-top: 1px; }   /* v9.72 — file size under the name */
.mxv-cact { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; z-index: 2; }
.mxv-card:hover .mxv-cact, .mxv-card:focus-within .mxv-cact { opacity: 1; }
body.max-phone .mxv-cact, body.max-ipad .mxv-cact { opacity: 1; }   /* touch: always show (no hover) */
.mxv-cact button { width: 28px; height: 28px; border-radius: 8px; background: rgba(6,12,24,.82); color: #fff; border: 1px solid rgba(255,255,255,.2); font-size: 13px; line-height: 1; cursor: pointer; }
.mxv-cact button:hover { background: rgba(var(--acc),.55); border-color: rgba(var(--acc),.8); }
/* v9.72 — download progress popup (bottom-right, above everything) */
.mxv-dlpop { position: fixed; right: 18px; bottom: 18px; width: min(340px, 88vw); background: rgba(12,20,36,.97); border: 1px solid rgba(var(--acc),.55); border-radius: 12px; box-shadow: 0 16px 50px rgba(0,0,0,.6); padding: 12px 14px; color: var(--fg); }
.mxv-dlp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.mxv-dlp-ic { font-size: 16px; flex: none; }
.mxv-dlp-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mxv-dlp-x { flex: none; background: none; border: 0; color: var(--fg); opacity: .7; cursor: pointer; font-size: 14px; padding: 2px 4px; }
.mxv-dlp-x:hover { opacity: 1; }
.mxv-dlp-bar { height: 9px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.mxv-dlp-fill { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, rgba(var(--acc),.85), rgb(var(--acc))); transition: width .2s ease; }
.mxv-dlpop.indet .mxv-dlp-fill { width: 40% !important; animation: mxvDlIndet 1.1s linear infinite; }
@keyframes mxvDlIndet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.mxv-dlp-stat { margin-top: 7px; font-size: 11.5px; color: var(--muted); }
.mxv-thumb { position: relative; aspect-ratio: 16/9; border-radius: 9px; overflow: hidden; background: #0a1120; display: flex; align-items: center; justify-content: center; }
.mxv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
.mxv-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; opacity: .45; }
.mxv-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.7); background: rgba(0,0,0,.14); opacity: 0; transition: opacity .15s; }
.mxv-card:hover .mxv-play { opacity: 1; }
.mxv-dur { position: absolute; right: 5px; bottom: 5px; font-size: 10.5px; font-weight: 700; background: rgba(0,0,0,.75); color: #fff; padding: 1px 6px; border-radius: 5px; }
.mxv-name { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mxv-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 22px 10px; line-height: 1.7; }
.movie-panel.mxv-player .movie-panel-body { padding: 0; background: #000; }
.mxv-frame { width: 100%; height: 100%; border: 0; display: block; }
/* v9.59 — search + folder tabs + list/thumbnail toggle */
.mxv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.mxv-folsel { flex: none; background: rgba(var(--acc),.14); color: var(--fg); border: 1px solid rgba(var(--acc),.45); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.mxv-folsel:hover { background: rgba(var(--acc),.24); }
.mxv-search { flex: 1 1 auto; min-width: 0; background: rgba(255,255,255,.06); color: var(--fg); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; }
.mxv-views { flex: none; display: flex; gap: 4px; }
.mxv-vw { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--fg); border: 1px solid rgba(255,255,255,.14); font-size: 15px; line-height: 1; cursor: pointer; }
.mxv-vw.on { border-color: rgba(var(--acc),.6); background: rgba(var(--acc),.16); color: rgb(var(--acc2)); }
.mxv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.mxv-tab { font: inherit; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.06); color: var(--fg); border: 1px solid rgba(255,255,255,.14); }
.mxv-tab.on { border-color: rgba(var(--acc),.6); background: rgba(var(--acc),.16); color: rgb(var(--acc2)); }
.mxv-tab:disabled { opacity: .5; cursor: default; }
.mxv-rows { display: flex; flex-direction: column; gap: 4px; }
.mxv-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: rgba(255,255,255,.03); border: 1px solid rgba(120,160,220,.12); }
.mxv-row:hover { background: rgba(var(--acc),.08); border-color: rgba(var(--acc),.35); }
.mxv-ric { flex: none; font-size: 16px; opacity: .8; }
.mxv-rplay { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; padding: 2px 0; }
.mxv-rt { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mxv-rd { flex: none; font-size: 11px; color: var(--muted); }
.mxv-rp { flex: none; font-size: 13px; color: rgb(var(--acc2)); }
.mxv-ract { flex: none; display: flex; gap: 3px; }
.mxv-ract button { width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.06); color: var(--fg); border: 1px solid rgba(255,255,255,.14); font-size: 13px; line-height: 1; cursor: pointer; }
.mxv-ract button:hover { background: rgba(var(--acc),.2); border-color: rgba(var(--acc),.5); }
.mxv-up { flex: none; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.4); white-space: nowrap; }
.mxv-up:hover { background: rgba(var(--acc),.3); }
.mxv-prog { font-size: 12px; color: rgb(var(--acc2)); background: rgba(var(--acc),.1); border: 1px solid rgba(var(--acc),.3); border-radius: 8px; padding: 7px 11px; margin-bottom: 8px; }
.mxv-listwrap.mxv-dragover { outline: 2px dashed rgba(var(--acc),.7); outline-offset: -4px; border-radius: 12px; background: rgba(var(--acc),.06); }
/* v9.62 — a video still being processed by Google Drive: play greyed out until it's ready */
.mxv-pending .mxv-rplay, .mxv-card.mxv-pending { opacity: .55; cursor: default; }
.mxv-pending .mxv-play, .mxv-pending .mxv-rp { color: var(--muted); }
.mxv-proc { color: #f0b23a !important; font-style: italic; }
/* v9.62 — inline rename field on the list shelf */
.mxv-edit { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 3px 7px; border-radius: 7px; color: var(--fg); background: rgba(0,0,0,.35); border: 1px solid rgba(var(--acc),.6); outline: none; }
/* v9.63 — native player (streamed via api/vstream.php) + save/resume controls in the title bar */
.mxv-video { width: 100%; height: 100%; display: block; background: #000; border: 0; }
.mxv-savebtn, .mxv-resumebtn { flex: none; font: inherit; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 7px; cursor: pointer; background: rgba(var(--acc),.18); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); margin-right: 6px; white-space: nowrap; }
.mxv-savebtn:hover, .mxv-resumebtn:hover { background: rgba(var(--acc),.32); }
.mxv-resumebtn { background: rgba(90,200,120,.18); color: #7fe0a0; border-color: rgba(90,200,120,.45); }
.mxv-resumebtn:hover { background: rgba(90,200,120,.32); }
.mxv-noresume { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; color: var(--muted); background: rgba(0,0,0,.55); padding: 5px 10px; text-align: center; }
.cin-list { display: flex; flex-direction: column; gap: 10px; }
.cin-row { display: flex; gap: 10px; align-items: flex-start; }
.cin-pos { flex: 0 0 auto; width: 44px; height: 64px; border-radius: 7px; object-fit: cover; background: rgba(120,160,220,.12); cursor: pointer; }
.cin-pos.cin-nopos { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.cin-meta { flex: 1 1 auto; min-width: 0; }
.cin-t { font-size: 13px; font-weight: 600; line-height: 1.25; margin-bottom: 5px; cursor: pointer; }
.cin-t:hover { color: rgb(var(--acc2)); }
.cin-times { display: flex; flex-wrap: wrap; gap: 5px; }
.cin-time { display: inline-block; font-size: 11.5px; padding: 3px 8px; border-radius: 7px; text-decoration: none;
  background: rgba(var(--acc),.14); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.4); white-space: nowrap; }
.cin-time:hover { background: rgba(var(--acc),.28); }
.cin-p-when { font-size: 12.5px; opacity: .8; margin: 4px 0 8px; }
.cin-p-times { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
/* v9.92 — Watch Trailer button on the cinema movie panel */
.cin-trailer { font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 9px; cursor: pointer; margin: 0 0 14px; background: rgba(var(--acc),.18); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); }
.cin-trailer:hover { background: rgba(var(--acc),.32); }
.cin-cast { font-size: 12.5px; line-height: 1.45; opacity: .85; }
/* 📁 My Files widget (v5.97) */
.mf-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font-size: 12px; margin-bottom: 8px; }
.mf-cr { color: rgb(var(--acc2)); text-decoration: none; padding: 2px 5px; border-radius: 6px; cursor: pointer; }
.mf-cr:hover { background: rgba(var(--acc),.16); }
.mf-sep { opacity: .5; }
.mf-list { display: flex; flex-direction: column; }
.mf-row { display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-radius: 8px; cursor: pointer; }
.mf-row + .mf-row { border-top: 1px solid rgba(140,160,200,.1); }
.mf-row:hover { background: rgba(120,160,220,.12); }
.mf-ic { flex: 0 0 auto; font-size: 17px; width: 22px; text-align: center; }
.mf-nm { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-dir .mf-nm { font-weight: 600; }
.mf-mt { flex: 0 0 auto; font-size: 11px; opacity: .6; white-space: nowrap; }
.mf-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 22px 12px; line-height: 1.5; }
/* v6.15 — file management: new folder, delete, drag-drop */
.mf-bar { display: flex; gap: 6px; margin-bottom: 8px; }
.mf-newfolder { font: inherit; font-size: 12px; padding: 6px 11px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.14); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.4); }
.mf-newfolder:hover { background: rgba(var(--acc),.28); }
.mf-del { flex: 0 0 auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 6px; border-radius: 6px; opacity: 0; transition: opacity .12s; }
.mf-row:hover .mf-del { opacity: .8; }
.mf-del:hover { color: #ff8a8a; background: rgba(255,90,90,.14); opacity: 1; }
.mf-row.mf-dragging { opacity: .45; }
.mf-row.mf-drop, .mf-cr.mf-drop { background: rgba(var(--acc),.22); outline: 1px dashed rgba(var(--acc),.6); border-radius: 8px; }
.mf-dir { cursor: pointer; }
/* browser-style file viewer */
.file-viewer { width: min(860px, 94vw); height: min(680px, 88vh); display: flex; flex-direction: column; }
.fv-head .fv-ext { color: rgb(var(--acc3)); text-decoration: none; font-size: 16px; padding: 0 8px; margin-left: auto; }
.fv-head .fv-ext:hover { color: #fff; }
.fv-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; border-radius: 0 0 12px 12px; }
.fv-imgwrap { flex: 1 1 auto; overflow: auto; display: flex; align-items: center; justify-content: center; background: #0a0e18; }
.fv-imgwrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* 🏃 Exercise widget (v5.98) */
.ex-prog { margin: 2px 0 12px; }
.ex-bar { height: 12px; border-radius: 7px; background: rgba(120,160,220,.14); overflow: hidden; }
.ex-fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, rgb(var(--acc)), #4ade80); transition: width .4s ease; }
.ex-stat { font-size: 13px; margin-top: 6px; opacity: .9; }
.ex-stat b { font-size: 15px; color: rgb(var(--acc2)); }
.ex-burn { color: #fca5a5; font-size: 12px; margin-left: 8px; }   /* v6.43 — burned kcal chip */
.ex-btns { margin-top: 8px; }
.ex-done { color: #4ade80; font-weight: 600; margin-left: 4px; }
.ex-list { display: flex; flex-direction: column; margin-bottom: 10px; }
.ex-row { display: flex; align-items: center; gap: 8px; padding: 7px 4px; }
.ex-row + .ex-row { border-top: 1px solid rgba(140,160,200,.1); }
.ex-tx { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-mn { flex: 0 0 auto; font-size: 11.5px; opacity: .65; }
.ex-del { flex: 0 0 auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 6px; }
.ex-del:hover { color: #ff8a8a; background: rgba(255,90,90,.14); }
.ex-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 14px 10px; line-height: 1.5; }
.ex-add { display: flex; gap: 6px; }
.ex-add input { flex: 1 1 auto; min-width: 0; background: rgba(10,16,30,.7); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; }
.ex-add input:focus { outline: none; border-color: rgba(120,150,255,.6); }
.ex-addbtn { flex: 0 0 auto; width: 38px; font-size: 20px; line-height: 1; cursor: pointer; border-radius: 8px; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.ex-addbtn:hover { background: rgba(var(--acc),.3); }
/* 🏭 Power Plant widget (v5.99) */
.pp-body { font-size: 13px; }
.pp-batt { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.pp-battvis { position: relative; width: 46px; height: 78px; border: 2px solid rgba(160,190,230,.5); border-radius: 7px; overflow: hidden; background: rgba(10,16,30,.6); flex: 0 0 auto; }
.pp-battcap { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 18px; height: 5px; border-radius: 2px 2px 0 0; background: rgba(160,190,230,.5); }
.pp-battfill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #4ade80, #22c55e); transition: height .5s ease; }
.pp-battvis.pp-low .pp-battfill { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.pp-battvis.pp-crit .pp-battfill { background: linear-gradient(180deg, #f87171, #ef4444); }
.pp-battvis.pp-full .pp-battfill { background: linear-gradient(180deg, #34d399, #10b981); }
.pp-battsoc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; text-shadow: 0 1px 3px #000; }
.pp-battmeta { flex: 1 1 auto; min-width: 0; }
.pp-bm-t { font-weight: 600; margin-bottom: 3px; }
.pp-bm-r { color: rgb(var(--acc2)); font-size: 12.5px; }
.pp-bm-s { font-size: 12px; opacity: .75; margin-top: 2px; }
.pp-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pp-node { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 10px; background: rgba(120,160,220,.1); border: 1px solid rgba(120,160,220,.16); text-align: center; }
.pp-node .pp-ic { font-size: 18px; }
.pp-node .pp-nl { font-size: 10.5px; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.pp-node b { font-size: 13.5px; }
.pp-node small { font-size: 9.5px; opacity: .55; }
.pp-graph { margin-bottom: 10px; }
.pp-graph-h, .pp-learn { font-size: 11px; opacity: .7; margin-bottom: 4px; }
.pp-learn { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.2); border-radius: 8px; padding: 6px 9px; opacity: 1; margin-bottom: 10px; }
.pp-learn small { opacity: .6; }
.pp-spark { width: 100%; height: 34px; display: block; }
.pp-spark polyline { fill: none; stroke: rgb(var(--acc)); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.pp-amber { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pp-price { font-size: 22px; font-weight: 700; }
.pp-price small { font-size: 11px; opacity: .6; font-weight: 400; margin-left: 3px; }
.pp-price.pp-veryLow, .pp-price.pp-low { color: #4ade80; }
.pp-price.pp-high { color: #fbbf24; }
.pp-price.pp-spike, .pp-price.pp-extremeHigh { color: #f87171; }
/* v9.35 — BUY (default/descriptor-coloured) + SELL (red) prices side by side, each clearly labelled */
.pp-prices { display: flex; gap: 8px; flex: 0 0 auto; }
.pp-price { display: flex; flex-direction: column; line-height: 1.05; padding: 5px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.pp-plabel { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; opacity: .7; margin-bottom: 1px; }
.pp-buyprice .pp-plabel { color: #7fd4ff; }
.pp-sellprice { color: #ff5a5a; }
.pp-sellprice .pp-plabel { color: #ff8a8a; opacity: .9; }
.pp-price .pp-pval { font-size: 22px; }
.pp-price small { display: inline; }
/* v9.35 — sell-to-grid controls */
.pp-sellctl { margin-top: 10px; }
.pp-sell { flex: 1 1 auto; font: inherit; font-size: 12.5px; padding: 8px 4px; border-radius: 9px; cursor: pointer;
  background: rgba(255,90,90,.14); color: #ffb0b0; border: 1px solid rgba(255,90,90,.4); }
.pp-sell:hover { background: rgba(255,90,90,.28); }
.pp-sellstop { flex: 0 0 auto; font: inherit; font-size: 12.5px; padding: 8px 12px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.08); color: var(--fg); border: 1px solid rgba(255,255,255,.18); }
.pp-sellstop:hover { background: rgba(255,255,255,.16); }
.pp-sellstat { color: #ff8a8a; }
.pp-sellnote { font-size: 10.5px; opacity: .6; margin-top: 5px; }
.pp-fcs { display: flex; gap: 6px; flex: 1 1 auto; flex-wrap: wrap; }
.pp-fc { display: inline-flex; flex-direction: column; align-items: center; font-size: 11px; padding: 3px 6px; border-radius: 6px; background: rgba(120,160,220,.1); }
.pp-fc i { font-style: normal; opacity: .55; font-size: 9.5px; }
.pp-ctl { margin-bottom: 10px; }
.pp-ctl-h { font-size: 12px; opacity: .8; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.pp-status { font-size: 11px; opacity: .85; }
/* v7.21 — live buy tracker: countdown · kW · running cost */
.pp-livebuy { font-size: 13px; margin: 2px 0 8px; padding: 8px 10px; border-radius: 9px;
  background: rgba(255,80,80,.1); border: 1px solid rgba(255,110,110,.4); color: #ffd9d9;
  font-variant-numeric: tabular-nums; }
.pp-livebuy .pp-cd { color: #ffb3b3; }
.pp-btns { display: flex; gap: 6px; }
.pp-buy, .pp-stop { flex: 1 1 auto; font: inherit; font-size: 12.5px; padding: 8px 4px; border-radius: 9px; cursor: pointer;
  background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.4); }
.pp-buy:hover { background: rgba(var(--acc),.3); }
.pp-stop { background: rgba(248,113,113,.16); color: #ffb0b0; border-color: rgba(248,113,113,.4); flex: 0 0 auto; padding: 8px 12px; }
.pp-stop:hover { background: rgba(248,113,113,.3); }
.pp-stop:disabled { opacity: .4; cursor: default; }
/* v9.34 — Stop is never truly disabled anymore (so you can always halt a buy the feed can't confirm);
   it just dims when nothing is known to be running, but stays fully clickable. */
.pp-stop-idle { opacity: .5; }
.pp-stop-idle:hover { opacity: 1; }
/* v7.88 — 📋 metric-log button + the log viewer table */
.pp-log { flex: 0 0 auto; font: inherit; font-size: 12.5px; padding: 8px 12px; border-radius: 9px; cursor: pointer;
  background: rgba(148,163,184,.16); color: #cbd5e1; border: 1px solid rgba(148,163,184,.4); }
.pp-log:hover { background: rgba(148,163,184,.3); }
/* v9.36 — 📊 AEMO rates button + report panel */
.pp-aemo { flex: 0 0 auto; font: inherit; font-size: 12.5px; padding: 8px 12px; border-radius: 9px; cursor: pointer;
  background: rgba(56,189,248,.16); color: #7dd3fc; border: 1px solid rgba(56,189,248,.4); }
.pp-aemo:hover { background: rgba(56,189,248,.3); }
.aemo-wrap { padding: 4px 2px; }
.aemo-regrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.aemo-regrow label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.aemo-region { background: rgba(56,189,248,.1); color: var(--fg); border: 1px solid rgba(56,189,248,.4); border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.aemo-now { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.aemo-price { font-size: 40px; font-weight: 800; color: #7dd3fc; line-height: 1; }
.aemo-price small { font-size: 13px; font-weight: 500; opacity: .6; margin-left: 4px; }
.aemo-meta { font-size: 12px; line-height: 1.6; opacity: .9; }
.aemo-when { font-size: 11px; opacity: .6; }
.aemo-h { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin: 14px 0 6px; }
.aemo-chart { display: flex; align-items: flex-end; gap: 3px; height: 130px; padding: 4px; background: rgba(255,255,255,.03); border-radius: 10px; overflow-x: auto; }
.aemo-bar { flex: 1 0 20px; min-width: 20px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.aemo-bar i { width: 70%; border-radius: 3px 3px 0 0; display: block; transition: height .3s; }
.aemo-bar span { font-size: 8.5px; opacity: .55; white-space: nowrap; transform: rotate(-45deg); transform-origin: center; }
.aemo-notice { font-size: 11.5px; line-height: 1.5; padding: 7px 9px; border-radius: 8px; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.28); margin-bottom: 5px; }
.aemo-notice b { color: #fbbf24; margin-right: 5px; }
.aemo-note { font-size: 11.5px; opacity: .6; padding: 4px 2px; }
.aemo-src { font-size: 10.5px; opacity: .6; line-height: 1.6; margin-top: 14px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; }
.aemo-src code { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 4px; }
.pl-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pl-count { font-size: 13px; color: var(--ink); }
.pl-range { display: inline-flex; gap: 5px; }
.pl-rbtn { font: inherit; font-size: 12px; padding: 5px 9px; border-radius: 8px; cursor: pointer;
  background: rgba(var(--acc),.14); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.35); }
.pl-rbtn.on { background: rgba(var(--acc),.4); color: #fff; }
.pl-rbtn:hover { background: rgba(var(--acc),.3); }
.pl-empty { padding: 22px 8px; text-align: center; color: var(--muted); font-size: 13px; }
/* v8.93 — Power Plant charts */
.pl-views { display: inline-flex; gap: 5px; }
.pl-vbtn { font: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 8px; cursor: pointer; background: rgba(120,160,220,.12); color: var(--ink); border: 1px solid var(--line); }
.pl-vbtn.on { background: rgba(var(--acc),.4); color: #fff; border-color: rgba(var(--acc),.6); }
.pl-vbtn:hover { background: rgba(var(--acc),.25); }
.plg-wrap { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; max-height: calc(100% - 44px); padding-right: 4px; scrollbar-width: thin; }
.plg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.plg-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.plg-card .plg-cv { font-size: 21px; font-weight: 800; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.plg-card .plg-cl { font-size: 11.5px; color: var(--muted); }
.plg-spend { background: linear-gradient(135deg, rgba(255,215,94,.14), rgba(255,107,92,.14)); border-color: rgba(255,150,90,.4); }
.plg-spend .plg-cv { color: #ffb96b; }
.plg-earn2 .plg-cv, .plg-sol .plg-cv { color: #6fe0a0; }
.plg-sol .plg-cv { color: #ffd75e; }
.plg-sec { display: flex; flex-direction: column; gap: 6px; }
.plg-h { font-size: 13px; font-weight: 700; color: rgb(var(--acc2)); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plg-h small { font-weight: 400; font-size: 11px; color: var(--muted); }
.plg-k { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.plg-k-solar { color: #ffcf5c; background: rgba(255,207,92,.15); }
.plg-k-load { color: #ff7ab0; background: rgba(255,122,176,.15); }
.plg-svg { width: 100%; height: auto; display: block; background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: 12px; }
.plg-grid { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.plg-ytick, .plg-xtick { fill: var(--muted); font-size: 11px; font-family: inherit; }
.plg-ytick { text-anchor: end; }
.plg-xtick { text-anchor: middle; }
.plg-blabel { fill: #ffd9a0; font-size: 11px; font-weight: 700; text-anchor: middle; font-variant-numeric: tabular-nums; }
.plg-bar { transition: opacity .15s; }
.plg-bar:hover { opacity: .82; }
.plg-earn { stroke: #3ddc84; stroke-width: 2.5; stroke-linecap: round; }
.pl-tablewrap { overflow: auto; max-height: calc(100% - 44px); border-radius: 10px; border: 1px solid var(--line); }
.pl-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.pl-table th { position: sticky; top: 0; z-index: 1; background: rgba(12,20,36,.98); color: var(--muted);
  font-weight: 600; text-align: right; padding: 7px 8px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.pl-table th:first-child, .pl-table td:first-child { text-align: left; }
.pl-table td { text-align: right; padding: 6px 8px; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.05); }
.pl-table tbody tr:hover { background: rgba(var(--acc),.08); }
.pl-table .pl-t { color: var(--ink); font-weight: 600; }
.pl-table .pl-na { color: var(--muted); opacity: .5; }
.pl-table .pl-wx { text-align: left; color: #bcd; }
.pl-table .pl-buy { text-align: center; color: var(--muted); }
.pl-table tr.pl-buying { background: rgba(248,113,113,.08); }
.pl-table tr.pl-buying .pl-buy { color: #ff9b9b; font-weight: 600; }
.pl-table tr.pl-buystart { background: rgba(248,113,113,.2); }
.pl-table tr.pl-buystart .pl-buy { color: #ff6b6b; font-weight: 800; }
.pl-table tr.pl-buystop { background: rgba(74,222,128,.14); }
.pl-table tr.pl-buystop .pl-buy { color: #86efac; font-weight: 700; }
.pp-auto { border-radius: 10px; padding: 9px 11px; background: rgba(120,160,220,.08); border: 1px solid rgba(120,160,220,.16); }
.pp-auto.on { background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.32); }
.pp-autotog { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pp-autotog input { width: 16px; height: 16px; accent-color: #4ade80; }
.pp-why { font-size: 12px; line-height: 1.45; margin-top: 7px; opacity: .95; }
/* v7.90 — Auto Buy when cheap toggle */
.pp-autocheap { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(140,160,200,.14); }
.pp-autocheap input { width: 16px; height: 16px; accent-color: #ffd45e; margin-top: 1px; flex: 0 0 auto; }
.pp-autocheap small { font-weight: 400; opacity: .72; }
.pp-tips { font-size: 11.5px; line-height: 1.5; margin-top: 7px; opacity: .72; border-top: 1px solid rgba(140,160,200,.14); padding-top: 6px; }
/* v7.44 — Power Plant: animated electricity-flow diagram + telemetry console */
.pp-flowwrap { padding: 2px 0 4px; }
/* v9.44 — animated canvas energy-flow */
.pp-hdr-time { margin-left: auto; margin-right: 10px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }   /* v9.50 — last-refresh time in the title bar */
.pp-flowfx { position: relative; margin: 6px 0 6px; }
.pp-fx-canvas { width: 100%; height: clamp(280px, 44vh, 380px); display: block; }
.pp-fx-asof { position: absolute; right: 8px; bottom: 6px; font-size: 10px; letter-spacing: .04em; color: #4c749a; pointer-events: none; }
.pp-flowsvg { width: 100%; height: auto; max-height: 200px; display: block; }
.pp-fl-base { stroke: rgba(120,160,220,.20); stroke-width: 3; }
/* v9.05 — steady glowing spoke (motion is now shown by the travelling arrowheads, not marching dashes) */
.pp-fl-on { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .55; }
.pp-fl-solar { stroke: #34d399; } .pp-fl-batt { stroke: #38bdf8; } .pp-fl-disc { stroke: #f59e0b; }
.pp-fl-imp { stroke: #f43f5e; } .pp-fl-exp { stroke: #34d399; }
.pp-fl-home { stroke: #d6f6ff; }
/* v9.05 — animated direction arrowheads travelling along each live flow */
.pp-arrowhd { stroke: none; }
.pp-arrowhd.pp-fl-solar { fill: #4ade80; } .pp-arrowhd.pp-fl-batt { fill: #56cbfd; } .pp-arrowhd.pp-fl-disc { fill: #fbbf24; }
.pp-arrowhd.pp-fl-imp { fill: #fb7185; } .pp-arrowhd.pp-fl-exp { fill: #4ade80; } .pp-arrowhd.pp-fl-home { fill: #eafaff; }
.reduce-motion .pp-arrowhd animateMotion { display: none; }
/* v8.99 — scheduled grid-buy chips on Power Plant */
.pp-sched { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pp-sched-row { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(255,215,94,.1); border: 1px solid rgba(255,215,94,.4); border-radius: 9px; padding: 7px 10px; font-size: 12.5px; color: #ffe6a3; transition: border-color .3s, color .3s; }
/* v9.04 — live progress-bar background that fills across the buy (charging) or the 5-min run-up (pre) */
.pp-sched-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; z-index: 0; border-radius: 9px 0 0 9px; transition: width 1s linear, background .3s; background: transparent; }
.pp-sched-lbl { position: relative; z-index: 1; flex: 1; min-width: 0; }
.pp-sched-row .pp-sched-x { position: relative; z-index: 1; }
/* within 5 min of starting → light blue countdown */
.pp-sched-row.pp-sched-pre { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.55); color: #bfe0ff; }
.pp-sched-row.pp-sched-pre .pp-sched-bar { background: rgba(96,165,250,.28); }
/* charging now → green, background fills as a bar across the 120-min timer */
.pp-sched-row.pp-sched-active { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.55); color: #b6ffdd; }
.pp-sched-row.pp-sched-active .pp-sched-bar { background: linear-gradient(90deg, rgba(52,211,153,.4), rgba(74,222,128,.28)); }
.pp-sched-x { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: inherit; border-radius: 7px; padding: 4px 8px; font-size: 11.5px; cursor: pointer; white-space: nowrap; }
.pp-sched-x:hover { background: rgba(244,63,94,.35); border-color: rgba(244,63,94,.6); }
/* v9.01 — Scheduled-buy SECTION: checkbox header + manual time/duration entry form */
.pp-sched-head { display: flex; align-items: center; }
.pp-sched-tog { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #ffe6a3; cursor: pointer; }
.pp-sched-tog input { width: 16px; height: 16px; flex: none; accent-color: #ffd75e; cursor: pointer; }
.pp-sched-form { display: flex; flex-direction: column; gap: 7px; padding: 9px 10px; border-radius: 10px;
  background: rgba(255,215,94,.07); border: 1px solid rgba(255,215,94,.28); }
.pp-sched-fields { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.pp-sched-fl { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pp-sched-fl input { font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; background: rgba(10,20,38,.9); color: #eaf1ff; border: 1px solid var(--line); }
.pp-sched-time { width: 116px; }
.pp-sched-dur { display: flex; align-items: center; gap: 5px; }
.pp-sched-dur input { width: 74px; text-align: center; }
.pp-sched-dur i { font-style: normal; font-size: 11.5px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.pp-sched-set { font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  background: rgba(255,215,94,.18); color: #ffe6a3; border: 1px solid rgba(255,215,94,.5); margin-left: auto; }
.pp-sched-set:hover { background: rgba(255,215,94,.32); }
.pp-sched-hint { font-size: 11px; color: var(--muted); line-height: 1.45; }
.pp-sched-hint i { color: rgb(var(--acc3)); font-style: normal; }
.pp-sched-list { display: flex; flex-direction: column; gap: 6px; }
.pp-sched-list:empty { display: none; }
.pp-nd circle { fill: rgba(12,20,38,.94); stroke: rgba(var(--acc),.55); stroke-width: 1.5; }
.pp-nd-ic { font-size: 16px; text-anchor: middle; dominant-baseline: central; }
.pp-nd-l { font-size: 8px; text-anchor: middle; fill: var(--muted); font-weight: 700; letter-spacing: .05em; }
.pp-nd-v { font-size: 8.5px; text-anchor: middle; fill: #d6f6ff; font-weight: 800; }
/* v8.97 — wide hub-and-spoke flow diagram */
.pp-flowsvg2 { max-height: 320px; }   /* v9.05 — ~20% larger */
.pp-gridbg line { stroke: rgba(120,160,220,.06); stroke-width: 1; }
.pp-fllab rect { fill: rgba(6,14,30,.9); stroke: rgba(var(--acc),.4); stroke-width: 1; }
.pp-fllab text { font-size: 8.5px; text-anchor: middle; fill: #eaf7ff; font-weight: 800; }
.pp-hub-core { fill: url(#ppHub); stroke: rgba(120,230,255,.85); stroke-width: 1.5; }
.pp-hub-ring { fill: none; stroke: rgba(120,230,255,.35); stroke-width: 1.5; stroke-dasharray: 3 5; transform-origin: 220px 118px; animation: ppHubSpin 9s linear infinite; }
.pp-fl-asof { font-size: 8px; text-anchor: middle; fill: rgba(159,178,216,.6); font-weight: 600; letter-spacing: .04em; }
@keyframes ppHubSpin { to { transform: rotate(360deg); } }
.pp-hub-ic { font-size: 17px; text-anchor: middle; dominant-baseline: central; }
.pp-hub-t { font-size: 7.5px; text-anchor: middle; fill: #bdeaff; font-weight: 800; letter-spacing: .12em; }
.pp-nd-crit circle { stroke: #f43f5e; stroke-width: 2; }
.reduce-motion .pp-hub-ring { animation: none; }
.pp-console { margin: 8px 0; border: 1px solid rgba(52,211,153,.35); border-radius: 10px; background: rgba(3,12,9,.7); padding: 8px 10px; font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.pp-console-h { font-size: 10px; letter-spacing: .12em; color: #34d399; font-weight: 800; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.pp-console-live { color: #f43f5e; font-size: 9px; animation: ppBlink 1.4s steps(2, jump-none) infinite; }
@keyframes ppBlink { 50% { opacity: .3; } }
.pp-console-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 14px; }
.pp-cw { display: flex; justify-content: space-between; font-size: 11px; border-bottom: 1px dotted rgba(52,211,153,.16); padding: 2px 0; gap: 8px; }
.pp-cw-k { color: rgba(52,211,153,.72); letter-spacing: .03em; white-space: nowrap; }
.pp-cw-v { color: #eafff5; font-weight: 700; white-space: nowrap; }
/* 📹 Camera Feeds widget (v6.04) */
.cam-bar { display: flex; gap: 6px; margin-bottom: 10px; }
.cam-add, .cam-viewall, .cam-map-btn { font: inherit; font-size: 12.5px; padding: 7px 11px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.cam-add:hover, .cam-viewall:hover, .cam-map-btn:hover { background: rgba(var(--acc),.3); }
/* v8.03 — 🗺 Camera Map supplement: canvas world map + a scrolling list of the cameras in view */
.cam-map-panel { width: min(940px, 96vw); height: min(640px, 88vh); }
.cam-map-panel .movie-panel-body { padding: 0; overflow: hidden; }
.cammap-wrap { display: flex; width: 100%; height: 100%; min-height: 0; }
.cammap-mapwrap { position: relative; flex: 1 1 auto; min-width: 0; background: #0a1422; overflow: hidden; touch-action: none; }
.cammap-cv { display: block; width: 100%; height: 100%; cursor: grab; }
.cammap-cv:active { cursor: grabbing; }
.cammap-zc { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; }
.cammap-z { width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 17px; font-weight: 700;
  background: rgba(10,20,38,.82); color: #eaf3ff; border: 1px solid rgba(255,255,255,.28); }
.cammap-z:hover { background: rgba(var(--acc),.4); }
.cammap-status { position: absolute; left: 10px; bottom: 10px; font-size: 11px; color: #cfe0ff;
  background: rgba(10,20,38,.7); padding: 3px 9px; border-radius: 999px; pointer-events: none; }
.cammap-side { flex: 0 0 236px; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: rgba(10,16,30,.5); }
.cammap-sh { flex: 0 0 auto; padding: 9px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.cammap-sh b { color: rgb(var(--acc2)); font-size: 15px; }
.cammap-list { flex: 1 1 auto; overflow-y: auto; scrollbar-width: thin; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.cammap-row { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 10px; cursor: pointer;
  background: rgba(120,160,220,.06); border: 1px solid rgba(120,160,220,.14); }
.cammap-row:hover, .cammap-row.on { background: rgba(var(--acc),.16); border-color: rgba(var(--acc),.45); }
.cammap-row img { width: 58px; height: 40px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: #000; }
.cammap-rt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cammap-rt b { font-size: 11.5px; color: var(--ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cammap-rt span { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cammap-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 18px 8px; line-height: 1.5; }
body.max-phone .cammap-wrap { flex-direction: column; }
body.max-phone .cammap-side { flex-basis: 40%; border-left: 0; border-top: 1px solid var(--line); }
/* v8.05 — 🚀 Quick Load launcher: group-coloured icon per widget, reflows to fit the frame */
.ql-body { container-type: inline-size; display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; }
.res-card.ql-focused { outline: 2px solid rgba(var(--acc),.7); outline-offset: -2px; }
.ql-grid { flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(40px, 15cqw, 74px), 1fr)); gap: 7px; align-content: start; }
.ql-ico { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  border-radius: 13px; background: color-mix(in srgb, var(--qlc, #94a3b8) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--qlc, #94a3b8) 55%, transparent); transition: transform .1s, background .15s; }
.ql-ico:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--qlc, #94a3b8) 32%, transparent); }
.ql-emoji { font-size: clamp(16px, 8cqw, 34px); line-height: 1; }
.ql-ico.ql-sel { outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 12px var(--qlc, #94a3b8); }
.ql-ico.ql-on { opacity: .32; filter: grayscale(.7); cursor: default; }
.ql-ico.ql-on:hover { transform: none; }
.ql-namebar { flex: 0 0 auto; font-size: 12px; color: var(--ink); text-align: center; padding: 5px 4px 2px; border-top: 1px solid var(--line); min-height: 18px; }
.ql-hint { color: var(--muted); }
/* v8.09 — Quick Load tools + group titles */
.ql-tools { flex: 0 0 auto; display: flex; gap: 6px; margin-bottom: 6px; }
.ql-tool { font: inherit; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  background: rgba(120,160,220,.12); color: #cfe0ff; border: 1px solid rgba(120,160,220,.3); }
.ql-tool:hover { background: rgba(120,160,220,.24); }
/* v8.62 — Quick Load: search box, list view, hide-showing, click-to-flash the open widget */
.ql-body .ql-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ql-search { flex: 1 1 90px; min-width: 60px; font: inherit; font-size: 12px; padding: 5px 9px; border-radius: 8px;
  background: rgba(18,26,44,.9); color: var(--ink); border: 1px solid var(--line); outline: none; }
.ql-search:focus { border-color: rgba(var(--acc),.55); }
.ql-list { flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 3px; }
.ql-list::-webkit-scrollbar { display: none; }
.ql-row { display: flex; align-items: center; gap: 10px; padding: 6px 9px; border-radius: 9px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.03); border: 1px solid transparent; color: var(--ink); font: inherit; }
.ql-row:hover { background: color-mix(in srgb, var(--qlc, #94a3b8) 22%, transparent); }
.ql-row .ql-emoji { font-size: 17px; flex: none; }
.ql-row .ql-rlbl { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ql-row.ql-sel { border-color: rgba(var(--acc),.6); background: rgba(var(--acc),.12); }
.ql-row.ql-on { border-left: 3px solid var(--qlc, rgb(var(--acc))); opacity: .78; }
.ql-onbadge { flex: none; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: #7dffb0; border: 1px solid rgba(60,220,120,.5); border-radius: 6px; padding: 1px 6px; }
.ql-empty { flex: 1 1 auto; padding: 14px 8px; color: var(--muted); font-size: 13px; text-align: center; }
.ql-locate { animation: qlLocate 1s ease-out forwards; }
@keyframes qlLocate { 0% { box-shadow: 0 0 0 3px #ff3b3b, 0 0 30px rgba(255,59,59,.85); } 100% { box-shadow: 0 0 0 3px rgba(255,59,59,0), 0 0 30px rgba(255,59,59,0); } }
.ql-hold { box-shadow: 0 0 0 3px #ff3b3b, 0 0 28px rgba(255,59,59,.8) !important; }   /* v8.75 — held-down bright red locator border */
.ql-tool.on { background: rgba(var(--acc),.22); color: rgb(var(--acc2)); border-color: rgba(var(--acc),.5); }
.ql-ghead { grid-column: 1 / -1; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--qlc, #94a3b8); padding: 6px 2px 1px; border-bottom: 1px solid color-mix(in srgb, var(--qlc, #94a3b8) 30%, transparent); }
.ql-ghead:first-child { padding-top: 0; }
.cam-empty { color: var(--muted); font-size: 12.5px; line-height: 1.5; padding: 14px 8px; text-align: center; }
.cam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
/* v8.32 — fit ALL favourites inside the widget frame: the body is a flex column, the grid fills the
   remaining height, and JS sets the exact columns/rows for the current count so nothing scrolls. */
.cam-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; height: 100%; }
.cam-grid.cam-fit { flex: 1 1 auto; min-height: 0; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); overflow: hidden; }
.cam-grid.cam-fit .cam-cell { aspect-ratio: auto; min-height: 0; min-width: 0; height: 100%; width: 100%; }
.cam-cell { position: relative; border-radius: 10px; overflow: hidden; cursor: pointer; background: #0a0e18; aspect-ratio: 16/10; }
.cam-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; text-shadow: 0 2px 8px #000; opacity: .85; }
.cam-cell:hover .cam-play { opacity: 1; }
.cam-lbl { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10.5px; padding: 8px 6px 4px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.8)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam-rm { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 6px; border: 0; cursor: pointer; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; }
.cam-rm:hover { background: rgba(248,113,113,.85); }
/* add-camera panel */
.cam-add-panel { width: min(460px, 94vw); height: min(620px, 88vh); }
.cam-form { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.cam-country { flex: 1 1 130px; min-width: 0; font: inherit; font-size: 12.5px; padding: 7px 8px; border-radius: 9px; background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid var(--line); }
.cam-city { flex: 2 1 120px; min-width: 0; font: inherit; font-size: 12.5px; padding: 7px 10px; border-radius: 9px; background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid var(--line); }
.cam-city:focus, .cam-country:focus { outline: none; border-color: rgba(120,150,255,.6); }
.cam-search { font: inherit; font-size: 12.5px; padding: 7px 13px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.cam-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cam-chip { font: inherit; font-size: 12px; padding: 5px 11px; border-radius: 999px; cursor: pointer; background: rgba(120,160,220,.12); color: #cfe0ff; border: 1px solid rgba(120,160,220,.3); }
.cam-chip:hover { background: rgba(var(--acc),.22); border-color: rgba(var(--acc),.5); }
.cam-mtitle { font-size: 12px; opacity: .85; margin-bottom: 5px; }
.cam-mapif { width: 100%; height: 150px; border: 0; border-radius: 10px; margin-bottom: 12px; background: #0a0e18; }
.cam-results { display: flex; flex-direction: column; gap: 7px; }
.cam-rrow { display: flex; align-items: center; gap: 8px; padding: 5px; border-radius: 9px; background: rgba(120,160,220,.08); border: 1px solid rgba(120,160,220,.16); }
.cam-rrow img { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: #0a0e18; }
.cam-rt { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.3; max-height: 2.6em; overflow: hidden; }
.cam-star, .cam-view-b { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 14px; background: rgba(120,160,220,.12); color: #cfe0ff; border: 1px solid rgba(120,160,220,.28); }
.cam-star.on { color: #ffd45e; border-color: rgba(255,212,94,.5); }
.cam-star:hover, .cam-view-b:hover { background: rgba(var(--acc),.24); }
/* live view window — the iframe fills the panel and grows as you resize it */
/* 🕵️ Investigate / OSINT widget (v6.12) */
.os-modes { display: flex; gap: 6px; margin-bottom: 8px; }
.os-mode { flex: 1 1 auto; font: inherit; font-size: 12px; padding: 7px 6px; border-radius: 9px; cursor: pointer; background: rgba(120,160,220,.1); color: #cfe0ff; border: 1px solid rgba(120,160,220,.24); }
.os-mode.on { background: rgba(var(--acc),.2); color: rgb(var(--acc2)); border-color: rgba(var(--acc),.5); }
.os-search { display: flex; gap: 6px; }
.os-search .os-q { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 9px; background: rgba(10,20,38,.9); color: #eaf1ff; border: 1px solid var(--line); }
.os-search .os-q:focus { outline: none; border-color: rgba(120,150,255,.6); }
.os-search button { font-size: 13px; padding: 0 12px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.os-note { font-size: 11px; color: var(--muted); margin: 7px 0 10px; line-height: 1.4; }
.os-empty, .os-good { font-size: 13px; color: var(--muted); padding: 12px 8px; line-height: 1.5; text-align: center; }
.os-good { color: #bdf5cf; }
.os-riskcard { border: 1px solid; border-radius: 11px; padding: 11px 13px; margin-bottom: 10px; background: rgba(120,160,220,.06); }
/* v7.46 — Investigate: person deep-dive note + username enumeration list */
.os-note2 { font-size: 13px; color: var(--ink); padding: 12px 10px; line-height: 1.55; background: rgba(var(--acc),.08); border: 1px solid rgba(var(--acc),.3); border-radius: 10px; }
.os-ucard { border-color: rgba(var(--acc),.5); }
.os-usub { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.4; }
.os-ulist { display: flex; flex-direction: column; gap: 4px; }
.os-urow { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; text-decoration: none; color: var(--ink); background: rgba(120,160,220,.06); border: 1px solid rgba(120,160,220,.12); }
.os-urow:hover { background: rgba(var(--acc),.12); }
.os-uic { flex: none; font-size: 15px; }
.os-usite { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-ust { flex: none; font-size: 11px; color: var(--muted); }
.os-u-found { border-color: rgba(74,222,128,.5); background: rgba(74,222,128,.1); }
.os-u-found .os-ust { color: #4ade80; font-weight: 700; }
.os-u-maybe .os-ust { color: rgb(var(--acc2)); }
.os-u-no { opacity: .5; }
.os-riskhd { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.os-riskdot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.os-riskscore { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-left: auto; }
.os-riskn { font-size: 12.5px; margin-top: 5px; opacity: .9; }
.os-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; opacity: .65; margin: 12px 0 6px; }
.os-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.os-chip { font-size: 11px; padding: 3px 8px; border-radius: 7px; background: rgba(120,160,220,.14); border: 1px solid rgba(120,160,220,.22); }
.os-chip-x { background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.3); color: #ffc9c9; }
.os-brow { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(140,160,200,.1); }
.os-blogo { width: 38px; height: 38px; object-fit: contain; border-radius: 7px; background: #fff; flex: 0 0 auto; }
.os-bmeta { flex: 1 1 auto; min-width: 0; }
.os-bname { font-size: 13.5px; font-weight: 600; }
.os-bname small { color: var(--muted); font-weight: 400; }
.os-bsub { font-size: 11.5px; color: var(--muted); margin: 2px 0 5px; }
.os-bdesc { font-size: 12px; line-height: 1.45; opacity: .85; margin-top: 5px; }
.os-pw { font-size: 10.5px; padding: 3px 7px; border-radius: 7px; background: rgba(255,180,60,.16); border: 1px solid rgba(255,180,60,.35); color: #ffd79a; }
/* 📓 Log Book widget (v6.17) */
.lb-head { font-size: 12px; opacity: .7; margin-bottom: 8px; }
.lb-list { display: flex; flex-direction: column; gap: 7px; }
.lb-row { padding: 8px 10px; border-radius: 9px; background: rgba(120,160,220,.08); border: 1px solid rgba(120,160,220,.16); font-size: 12px; line-height: 1.5; }
.lb-when { font-weight: 600; color: rgb(var(--acc3)); }
.lb-ip { color: rgb(var(--acc2)); font-variant-numeric: tabular-nums; }
.lb-ua, .lb-scr { opacity: .82; }
.lb-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 20px 12px; line-height: 1.5; }
.cam-view { width: min(780px, 94vw); height: min(500px, 76vh); display: flex; flex-direction: column; }
.cam-view .movie-panel-body { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.cam-frame { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: 0; background: #000; border-radius: 0 0 12px 12px; }
.wopt-sep { height: 1px; background: rgba(120,160,220,.25); margin: 9px 2px; }
.wdg-wakerow .wdg-opttxt { max-width: 160px; }
/* v4.65 — spotlighted widget (voice "what's in cinemas" etc.) */
.wdg-spotlight { outline: 2px solid rgba(var(--acc),.7); outline-offset: -2px;
  box-shadow: 0 0 0 4000px rgba(4,8,18,.55), 0 20px 70px rgba(0,0,0,.7), 0 0 40px rgba(var(--acc),.35) !important;
  animation: spotIn .28s cubic-bezier(.2,1.3,.4,1); }
@keyframes spotIn { from { transform: scale(.9); opacity: .5; } to { transform: none; opacity: 1; } }
/* v3.89 — news board: images get priority (bigger feature shots + larger thumbnails) */
.news-feature-img { height: 210px; }
.news-thumb { width: 84px; height: 84px; }
.news-reader .news-feature-img { height: 240px; }
/* v3.89 — home devices: header ✕/✎ join the button group; edit mode drags groups freely */
.home-loc.home-free { position: fixed; z-index: 66; margin: 0; }
.home-editing .home-loc { outline: 1px dashed rgba(var(--acc),.4); border-radius: 12px; }
.home-editing .home-loc h5 { cursor: move; user-select: none; }
/* v3.89 — deep scan: ~20% smaller box, NO background fade — it just sits on top */
.scan-ov { background: transparent; backdrop-filter: none; pointer-events: none; }
.scan-box { max-width: 512px; max-height: 80vh; pointer-events: auto; }
/* v3.89 — MAX logo on the FAR RIGHT; menu back in the corner, pills shift left */
.head { left: auto; right: 16px; }
.menu-btn { left: 16px; }
.menu-bar { left: 16px; }
@media (min-width: 681px) { .wave-wrap { left: 120px; } }
#verBtn { right: 118px; }
.hdr-btns { right: 256px; }

/* ===== v3.90 — stunning weather widget ===== */
.wx-tiny { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 2px; }
.wx-tiny .wx-mico { font-size: 30px; }
.wx-tiny b { font-size: 26px; line-height: 1; }
.wx-tiny .wx-cond { font-size: 11px; opacity: .85; }
.wx-citybar { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.wx-city { font: inherit; font-size: 12px; padding: 3px 8px; border-radius: 8px; cursor: pointer; color: #fff;
  background: rgba(10,20,38,.5); border: 1px solid rgba(255,255,255,.35); max-width: 100%; }
.wx-city option { color: #10203a; background: #eaf1ff; }
.wx-hero2 { display: flex; align-items: center; gap: 12px; margin: 2px 0 6px; }
.wx-mico { font-size: 52px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.45); font-variation-settings: 'FILL' 1; }
.wx-big { display: flex; align-items: center; gap: 10px; }
.wx-big b { font-size: 44px; font-weight: 800; line-height: 1; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.wx-condwrap { display: flex; flex-direction: column; gap: 2px; }
.wx-cond { font-size: 14px; font-weight: 600; }
.wx-hilo { font-size: 11.5px; opacity: .85; }
.wx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.wx-chip { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.22); white-space: nowrap; backdrop-filter: blur(2px); }
.wx-sun { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; font-size: 12px; color: #eaf3ff; opacity: .92; }
.wx-sun span { white-space: nowrap; }
.wx-rain { margin-bottom: 8px; padding: 6px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: #dff0ff;
  background: rgba(70,150,240,.22); border: 1px solid rgba(120,180,255,.5); }
.wx-tip { margin-bottom: 8px; font-size: 12.5px; color: #eaf3ff; opacity: .92; }
.wx-hours { display: flex; gap: 4px; margin-bottom: 8px; padding: 7px 6px; border-radius: 12px;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.14); }
.wx-hour { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.wx-hour .wx-ht { font-size: 9.5px; opacity: .8; }
.wx-hour .material-symbols-outlined { font-size: 17px; }
.wx-hour b { font-size: 12.5px; }
.wx-hour i { font-style: normal; font-size: 9px; color: #9fd8ff; min-height: 11px; }
.wx-days2 { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.wx-drow { display: grid; grid-template-columns: 34px 20px 32px 28px 1fr 28px; align-items: center; gap: 6px; font-size: 12px; }
.wx-drow .material-symbols-outlined { font-size: 16px; }
.wx-drow .wx-dn { opacity: .9; font-weight: 600; }
.wx-drow .wx-rain { font-size: 10px; color: #9fd8ff; text-align: right; }
.wx-drow .wx-lo { text-align: right; opacity: .8; }
.wx-drow .wx-hi { font-weight: 700; }
.wx-rangebar { position: relative; height: 5px; border-radius: 999px; background: rgba(0,0,0,.3); overflow: hidden; }
.wx-rangebar i { position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(90deg, #4aa3e8, #ffd34d, #ff8a3d); }
.wx-sun { font-size: 11.5px; opacity: .9; margin-bottom: 4px; }
.wx-card .res-card-body { overflow: hidden; }
/* v8.02 — daily rain % shown for EVERY day (was an empty pill under 20%); strip the pill look in daily rows */
.wx-drow .wx-rain { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; }
.wx-drow .wx-rain.wx-rain-hi { color: #ff9d6b; font-weight: 700; }
.wx-drow .wx-rain.wx-rain-mid { color: #7fc4ff; }
.wx-drow .wx-rain:not(.wx-rain-hi):not(.wx-rain-mid) { color: #7f93b5; }
/* v8.02 — switchable layout density (⚙ → Layout style) to trim the empty space or open it up */
.res-card.wx-style-compact .wx-mico { font-size: 40px; }
.res-card.wx-style-compact .wx-big b { font-size: 34px; }
.res-card.wx-style-compact .wx-hero2 { gap: 8px; margin: 0 0 4px; }
.res-card.wx-style-compact .wx-chips { gap: 4px; margin-bottom: 5px; }
.res-card.wx-style-compact .wx-chip { font-size: 10px; padding: 2px 7px; }
.res-card.wx-style-compact .wx-sun, .res-card.wx-style-compact .wx-tip, .res-card.wx-style-compact .wx-rain { margin-bottom: 5px; font-size: 11.5px; }
.res-card.wx-style-compact .wx-hours { margin-bottom: 5px; padding: 5px; }
.res-card.wx-style-compact .wx-days2 { gap: 2px; }
.res-card.wx-style-compact .wx-drow { font-size: 11px; }
.res-card.wx-style-cozy .wx-mico { font-size: 62px; }
.res-card.wx-style-cozy .wx-big b { font-size: 52px; }
.res-card.wx-style-cozy .wx-hero2 { gap: 16px; margin: 6px 0 12px; }
.res-card.wx-style-cozy .wx-chips { gap: 8px; margin-bottom: 12px; }
.res-card.wx-style-cozy .wx-chip { font-size: 12px; padding: 5px 12px; }
.res-card.wx-style-cozy .wx-days2 { gap: 6px; }
.res-card.wx-style-cozy .wx-drow { font-size: 13px; }
.res-card.wx-style-cozy .wx-hours { margin-bottom: 12px; padding: 10px 8px; }

/* ===== v3.91 — Settings→Widgets: show/hide + ⚙ options (position/size live on the board) ===== */
#wdgPreview { display: none !important; }
.wdg-optbtn { font: inherit; font-size: 12px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); margin-left: auto; }
.wdg-optbtn:hover:not(:disabled) { background: rgba(40,60,90,.9); border-color: rgba(46,140,255,.5); }
.wdg-optbtn.open { border-color: rgba(var(--acc),.6); color: #bff3ff; }
.wdg-optbtn:disabled { opacity: .35; cursor: default; }
.wdg-trow { display: flex; align-items: center; gap: 10px; }
.wdg-opts { margin: 2px 0 10px 26px; padding: 10px 14px; border-radius: 12px;
  background: rgba(10,18,32,.7); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.wdg-oprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.wdg-op-dim { opacity: .45; }   /* v8.33 — greyed opacity slider when 'Override opacity' is off (following master) */
/* v7.91 — per-widget opacity slider row */
.wdg-oprange { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; max-width: 200px; }
.wdg-oprange input[type="range"] { flex: 1 1 auto; accent-color: rgb(var(--acc)); min-width: 90px; }
.wdg-oprange i { font-style: normal; font-size: 12px; color: var(--muted); min-width: 34px; text-align: right; }
.wdg-opttxt { font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 8px; width: 180px;
  background: rgba(18,26,44,.9); color: var(--ink); border: 1px solid var(--line); }
/* 🕐 analog clock */
.aclk { display: flex; justify-content: center; padding: 4px 0 2px; }
.aclk-face { position: relative; width: 96px; height: 96px; border-radius: 50%;
  border: 2px solid rgba(140,190,255,.55);
  background: radial-gradient(circle at 35% 30%, rgba(60,90,140,.35), rgba(8,14,26,.92));
  box-shadow: inset 0 0 16px rgba(var(--acc),.22), 0 4px 14px rgba(0,0,0,.4); }
.aclk-hand { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; border-radius: 999px; background: #dbeaff; }
.aclk-h { width: 4px; height: 26px; margin-left: -2px; }
.aclk-m { width: 3px; height: 36px; margin-left: -1.5px; }
.aclk-s { width: 1.5px; height: 42px; margin-left: -0.75px; background: rgb(var(--acc)); }
.aclk-pin { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: rgb(var(--acc)); }

/* ===== v3.92 — the whole header sits on ONE line: menu, status, EQ, buttons, version, logo ===== */
.hdr-btns { top: 16px; }
#hdrBtns > button { line-height: 1.2 !important; padding: 6px 13px !important; }
/* v3.92 — ⚙ widget options live in a small modal above Settings */
.wopt-modal { z-index: 95010; width: min(420px, 90vw); top: 40%; }   /* v9.41 — settings modals stay above the dynamic panel/widget z-pool (incl. camera feeds) so they're never buried */
.wopt-modal .wdg-oprow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14px; padding: 7px 0; border-bottom: 1px solid rgba(120,160,220,.12); }
.wopt-modal .wdg-oprow:last-child { border-bottom: 0; }

/* v7.33 — ⏩ Plex jump-to-percent modal */
.plex-pct-modal { z-index: 120; width: min(360px, 92vw); top: 40%; }
.plex-pct-body { padding: 8px 2px 2px; }
.plex-pct-range { width: 100%; margin: 8px 0 12px; accent-color: rgb(var(--acc)); }
.plex-pct-row { display: flex; align-items: center; gap: 6px; }
.plex-pct-num { width: 84px; padding: 5px 8px; }
.plex-pct-sym { font-weight: 700; opacity: .8; }
.plex-pct-readout { margin-top: 12px; font-size: 15px; font-weight: 600; opacity: .92; }
.plex-pct-go { margin-top: 14px; width: 100%; }

/* ===== v3.94 — 📹 my camera: blue-framed live webcam (left), filter + background buttons ===== */
.camp { position: fixed; left: 2vw; top: 64px; z-index: 35; width: min(440px, 36vw);
  background: rgba(8,14,26,.96); border: 2px solid #2e8cff; border-radius: 16px;
  box-shadow: 0 0 26px rgba(46,140,255,.5), 0 16px 50px rgba(0,0,0,.6); padding: 10px 12px 12px; }
.camp-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--acc3)); margin-bottom: 8px; }
.camp-head .res-x { position: static !important; }
.camp-body { display: flex; gap: 8px; }
.camp-stage { flex: 1; border-radius: 10px; overflow: hidden; background: #000; min-width: 0; }
.camp-stage video { display: none; }
.camp-stage canvas { display: block; width: 100%; height: auto; }
.camp-side { display: flex; flex-direction: column; gap: 6px; }
.camp-btn { width: 40px; height: 40px; border-radius: 10px; font-size: 17px; cursor: pointer; line-height: 1;
  background: rgba(18,26,44,.9); border: 1px solid var(--line); color: rgb(var(--acc3)); }
.camp-btn:hover { border-color: rgba(46,140,255,.6); }
.camp-btn.on { border-color: #2e8cff; box-shadow: 0 0 10px rgba(46,140,255,.55); background: rgba(46,140,255,.18); }
.camp-bg { margin-top: 8px; }
body.ipad-pro .camp { top: 110px; }
/* v3.94 — research photos show the WHOLE frame (shrink-to-fit, letterboxed) — no more clipped faces */
#research .res-card.photo img,
#research .res-imgrow .res-card.photo img,
#research .res-right > .res-card.photo img,
#research .res-mid > .res-card.photo img { object-fit: contain !important; background: rgba(0,0,0,.45); }

/* ===== v3.96 — Settings → 🎵 Spotify ===== */
.spot-cfgstatus { margin: 6px 0 14px; padding: 9px 14px; border-radius: 10px; font-size: 13.5px;
  background: rgba(18,26,44,.85); border: 1px solid var(--line); }
.spot-cfgstatus.ok { border-color: rgba(80,220,140,.5); color: #8ff0b4; }
.spot-cfgstatus.warn { border-color: rgba(240,200,80,.5); color: #ffd98a; }
.spot-cfgstatus.bad { border-color: rgba(255,110,110,.5); color: #ff9d9d; }
.spot-cfgrow { display: flex; gap: 14px; align-items: baseline; padding: 7px 0; font-size: 13.5px;
  border-bottom: 1px solid rgba(120,160,220,.12); }
.spot-cfgrow > span:first-child { flex: 0 0 110px; color: var(--muted); }
.spot-cfgrow code { font-size: 12.5px; color: #bfe9ff; word-break: break-all; }

/* ===== v3.97 — 🎵 the music box (MAX glass style, right side) ===== */
/* v5.16 — My Music as a board widget: reuse the .spot-* children inside the widget body */
.spot-body { display: flex; flex-direction: column; height: 100%; }
.spot-body .spot-list { flex: 1 1 auto; min-height: 60px; }
.spot { position: fixed; right: 2vw; top: 64px; z-index: 36; width: min(480px, 38vw);
  max-height: calc(100vh - 84px); display: flex; flex-direction: column;
  background: rgba(8,14,26,.97); border: 1px solid rgba(var(--acc),.5); border-radius: 16px;
  box-shadow: 0 0 26px rgba(var(--acc),.25), 0 16px 50px rgba(0,0,0,.6); padding: 12px 14px; }
.spot-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--acc3)); margin-bottom: 10px; }
.spot-head .res-x { position: static !important; }
.spot-plrow { display: flex; gap: 8px; margin-bottom: 10px; }
.spot-plsel { flex: 1; min-width: 0; font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 10px;
  background: rgba(18,26,44,.95); color: var(--ink); border: 1px solid var(--line); }
.spot-playbtn { font: inherit; font-size: 13px; padding: 8px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: rgba(var(--acc),.16); color: #bff3ff; border: 1px solid rgba(var(--acc),.6); }
.spot-playbtn:hover { background: rgba(var(--acc),.3); }
.spot-nowbox { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.spot-nowbox:empty { display: none; }
.spot-nowbox img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; flex: none;
  border: 1px solid rgba(var(--acc),.35); box-shadow: 0 4px 14px rgba(0,0,0,.5); }
.spot-tt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.spot-tt b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-tt i { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-ctl { display: flex; gap: 6px; align-items: center; }
.spot-ctl button, .spot-mini { font: inherit; font-size: 14px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(18,26,44,.9); color: rgb(var(--acc3)); border: 1px solid var(--line); line-height: 1; flex: none; }
.spot-ctl button:hover, .spot-mini:hover { border-color: rgba(var(--acc),.6); background: rgba(var(--acc),.14); }
.spot-devsel { font: inherit; font-size: 11.5px; padding: 5px 8px; border-radius: 8px; max-width: 140px;
  background: rgba(18,26,44,.95); color: var(--ink); border: 1px solid var(--line); }
.spot-list { flex: 1; min-height: 120px; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid rgba(120,160,220,.14); padding-top: 6px; margin-bottom: 10px; }
.spot-song { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px; cursor: pointer;
  background: none; border: 0; color: var(--ink); font: inherit; text-align: left; }
.spot-song:hover { background: rgba(var(--acc),.1); }
.spot-song .spot-n { flex: none; width: 20px; text-align: right; font-size: 11px; color: var(--muted); }
.spot-song .spot-dur { flex: none; font-size: 11px; color: var(--muted); }
.spot-song .spot-go { flex: none; opacity: 0; color: rgb(var(--acc)); }
.spot-song:hover .spot-go { opacity: 1; }
.spot-song img, .spot-noart { width: 38px; height: 38px; border-radius: 7px; object-fit: cover; flex: none; }
.spot-noart { display: flex; align-items: center; justify-content: center; background: rgba(18,26,44,.9); }
.spot-result { cursor: default; }
.spot-search { display: flex; gap: 8px; }
.spot-search input { flex: 1; min-width: 0; font: inherit; font-size: 13.5px; padding: 8px 12px; border-radius: 999px;
  background: rgba(18,26,44,.95); color: var(--ink); border: 1px solid var(--line); outline: none; }
.spot-search input:focus { border-color: rgba(var(--acc),.55); }
.spot-search button { font: inherit; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; flex: none;
  background: rgba(18,26,44,.9); color: rgb(var(--acc3)); border: 1px solid var(--line); }
.spot-results { overflow-y: auto; scrollbar-width: thin; max-height: 220px; margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.spot-results:empty { display: none; }
.spot-setup { padding: 12px; font-size: 13px; line-height: 1.55; color: var(--muted); }
body.ipad-pro .spot { top: 110px; }
/* 🎵 Spotify Music — compact widget layout (v8.56): album art + [playlist·now·4 controls] header, dense track rows */
.spot-compact .spot-head2 { display: flex; gap: 10px; align-items: stretch; margin-bottom: 8px; }
.spot-art { flex: none; width: 92px; height: 92px; border-radius: 10px; overflow: hidden;
  background: rgba(18,26,44,.9); border: 1px solid rgba(var(--acc),.35); box-shadow: 0 4px 14px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; }
.spot-art img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.spot-art .spot-noart { width: 100%; height: 100%; border-radius: 0; font-size: 34px; background: transparent; }
.spot-rcol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.spot-rcol .spot-plsel { width: 100%; flex: none; font-size: 12.5px; padding: 6px 9px; }
.spot-nowline { font-size: 12px; line-height: 1.25; min-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-nowline b { color: rgb(var(--acc3)); font-weight: 600; }
.spot-nowline > span { color: var(--muted); }
.spot-nptxt { color: var(--muted); font-style: italic; }
.spot-ctl4 { display: flex; gap: 6px; margin-top: auto; }
.spot-ctl4 .spot-cbtn { flex: 1; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1;
  background: rgba(var(--acc),.12); color: rgb(var(--acc3)); border: 1px solid rgba(var(--acc),.4); }
.spot-ctl4 .spot-cbtn:hover { background: rgba(var(--acc),.26); }
.spot-devsel2 { width: 100%; font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 8px;
  background: rgba(18,26,44,.95); color: var(--ink); border: 1px solid var(--line); }
.spot-tt2 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.spot-tt2 b { font-weight: 600; }
.spot-compact .spot-list { gap: 1px; padding-top: 5px; margin-bottom: 8px; }
.spot-compact .spot-song { gap: 7px; padding: 3px 7px; }
.spot-compact .spot-song .spot-n { width: 22px; }
/* 🔎 v8.67 — Discover other playlists (button + supplement panel) */
.spot-disc { width: 100%; font: inherit; font-size: 12.5px; padding: 7px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(var(--acc),.1); color: rgb(var(--acc3)); border: 1px solid rgba(var(--acc),.35); }
.spot-disc:hover { background: rgba(var(--acc),.2); }
.spot-disc-panel .movie-panel-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.spd-top { display: flex; flex-direction: column; gap: 8px; }
.spd-search { display: flex; gap: 8px; }
.spd-search input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 999px; background: rgba(18,26,44,.95); color: var(--ink); border: 1px solid var(--line); outline: none; }
.spd-search button { width: 40px; height: 38px; border-radius: 50%; cursor: pointer; flex: none; background: rgba(18,26,44,.9); color: rgb(var(--acc3)); border: 1px solid var(--line); }
.spd-addto { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.spd-mine { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; padding: 6px 9px; border-radius: 8px; background: rgba(18,26,44,.95); color: var(--ink); border: 1px solid var(--line); }
.spd-results { flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 8px; }
.spd-results::-webkit-scrollbar { display: none; }
.spd-empty { padding: 16px 8px; color: var(--muted); font-size: 13px; text-align: center; }
.spd-pl { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.02); }
.spd-plhead { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.spd-plhead img, .spd-plhead .spot-noart { width: 44px; height: 44px; aspect-ratio: 1 / 1; border-radius: 7px; object-fit: cover; flex: none; }
.spd-plhead { transition: background .12s; } .spd-plhead:hover { background: rgba(var(--acc),.07); }
.spd-plmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.spd-plmeta b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spd-plmeta i { font-style: normal; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spd-play, .spd-expand { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; flex: none; font: inherit; font-size: 14px; background: rgba(var(--acc),.12); color: rgb(var(--acc3)); border: 1px solid rgba(var(--acc),.4); }
.spd-play:hover, .spd-expand:hover { background: rgba(var(--acc),.26); }
.spd-tracks { border-top: 1px solid var(--line); padding: 4px 6px; display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow-y: auto; scrollbar-width: none; }
.spd-tracks::-webkit-scrollbar { display: none; }
.spd-song { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; }
.spd-song:hover { background: rgba(var(--acc),.08); }
.spd-song img { width: 40px; height: 40px; border-radius: 5px; object-fit: cover; flex: none; }
.spd-song .spot-noart { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(255,255,255,.05); border-radius: 5px; flex: none; }
.spd-sn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.spd-sn b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spd-sn i { font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spd-sadd { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex: none; font-size: 13px; background: rgba(60,220,120,.14); color: #7dffb0; border: 1px solid rgba(60,220,120,.5); }
.spd-sadd:hover { background: rgba(60,220,120,.28); }
/* v9.03 — Discover: ☆ save-playlist toggle + ▶ per-song preview + 🎧 add-to-MAX-playlist */
.spd-save, .spd-splay, .spd-smax { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex: none; font-size: 13px; background: rgba(255,255,255,.06); color: var(--ink); border: 1px solid var(--line); }
.spd-save:hover, .spd-splay:hover, .spd-smax:hover { border-color: rgba(var(--acc),.6); background: rgba(var(--acc),.14); }
.spd-save.on { background: rgba(255,206,84,.22); color: #ffdf7e; border-color: rgba(255,206,84,.6); }
/* v9.03 — 📌 Public Playlists + 🎧 MAX Playlist sections in the Spotify widget */
.spot-section { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: rgba(255,255,255,.02); display: flex; flex-direction: column; gap: 7px; }
.spot-sec-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.spot-sec-c { font-size: 10.5px; font-weight: 600; background: rgba(var(--acc),.2); color: rgb(var(--acc2)); border-radius: 999px; padding: 0 7px; }
.spot-sec-play { margin-left: auto; font: inherit; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.spot-sec-play:hover { background: rgba(var(--acc),.3); }
.spot-sec-empty { font-size: 11px; color: var(--muted); line-height: 1.45; }
.spot-sec-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; scrollbar-width: none; }
.spot-sec-list::-webkit-scrollbar { display: none; }
.spot-pub-row, .spot-max-row { display: flex; align-items: center; gap: 8px; padding: 4px 5px; border-radius: 8px; }
.spot-pub-row:hover, .spot-max-row:hover { background: rgba(var(--acc),.08); }
.spot-pub-row img, .spot-max-row img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; flex: none; }
.spot-pub-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.spot-pub-meta b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-pub-meta i { font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-section .spot-mini { width: 28px; height: 28px; font-size: 12px; }
.spot-max-search { display: flex; gap: 6px; }
.spot-max-search input { flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 6px 9px; border-radius: 8px; background: rgba(10,20,38,.9); color: #eaf1ff; border: 1px solid var(--line); }
.spot-max-search button { font: inherit; font-size: 13px; padding: 0 11px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.spot-max-res:empty { display: none; }
.spot-max-res { display: flex; flex-direction: column; gap: 3px; max-height: 200px; overflow-y: auto; scrollbar-width: none; }
.spot-max-res::-webkit-scrollbar { display: none; }
.spot-maxr-add { background: rgba(60,220,120,.14) !important; color: #7dffb0 !important; border-color: rgba(60,220,120,.5) !important; }
/* ═══ v9.24 — 🗓 Event Scheduler: single-hour view with ‹ › + wheel time-travel ═══ */
.sched-body { display: flex; flex-direction: column; min-height: 0; }
.sched-wrap { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 8px; }
.sched-nav { display: flex; align-items: center; gap: 8px; flex: none; }
.sched-arw { width: 34px; height: 34px; flex: none; border-radius: 9px; cursor: pointer; font-size: 20px; line-height: 1; font-weight: 700;
  background: rgba(var(--acc),.14); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.sched-arw:hover:not(:disabled) { background: rgba(var(--acc),.3); }
.sched-arw:disabled { opacity: .3; cursor: default; }
.sched-navmid { flex: 1; min-width: 0; text-align: center; display: flex; flex-direction: column; }
.sched-hr { font-size: 15px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.sched-date { font-size: 10.5px; color: var(--muted); }
.sched-evwrap { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 6px; }
.sched-evwrap::-webkit-scrollbar { display: none; }
.sched-now { font: inherit; font-size: 10.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; cursor: pointer; flex: none;
  background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.sched-now:hover { background: rgba(var(--acc),.3); }
.sched-daterow { display: flex; align-items: center; gap: 8px; flex: none; }
.sched-datepick { flex: 1; min-width: 0; font: inherit; font-size: 11.5px; padding: 5px 8px; border-radius: 8px; color: #eaf1ff; background: rgba(10,20,38,.9); border: 1px solid var(--line); color-scheme: dark; }
.sched-datepick:focus { outline: none; border-color: rgba(var(--acc),.6); }
.sched-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; scroll-snap-type: y proximity; display: flex; flex-direction: column; gap: 5px; padding-right: 1px; }
.sched-scroll::-webkit-scrollbar { display: none; }
.sched-hour { scroll-snap-align: center; border: 1px solid rgba(120,160,220,.16); border-radius: 9px; background: rgba(255,255,255,.03); overflow: hidden; transition: border-color .2s, background .2s, opacity .2s; }
.sched-hour.past { opacity: .5; }
.sched-hour.cur { border-color: rgba(var(--acc),.6); background: rgba(var(--acc),.09); box-shadow: 0 0 0 1px rgba(var(--acc),.25), 0 3px 12px rgba(var(--acc),.14); }
.sched-hour.sched-focus { border-color: rgba(var(--acc),.7); background: rgba(var(--acc),.11); box-shadow: 0 0 0 1px rgba(var(--acc),.3), 0 4px 14px rgba(var(--acc),.18); }
.sched-hh { display: flex; align-items: center; gap: 7px; padding: 6px 8px; cursor: pointer; user-select: none; }
.sched-hh:hover { background: rgba(var(--acc),.06); }
.sched-caret { font-size: 9px; color: var(--muted); width: 10px; flex: none; }
.sched-hlabel { font-size: 11.5px; font-weight: 700; color: var(--ink); flex: 1; white-space: nowrap; }
.sched-hcount { font-size: 9.5px; color: var(--muted); white-space: nowrap; }
.sched-nowtag { font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: rgba(var(--acc),.28); color: rgb(var(--acc2)); }
.sched-events { display: none; padding: 0 7px; }
.sched-events.open { display: block; padding-bottom: 6px; animation: schedExpand .22s ease; }
@keyframes schedExpand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sched-ev { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 7px; border-left: 3px solid rgba(120,160,220,.4); background: rgba(255,255,255,.02); margin-top: 4px; }
.sched-ev.k-reminder { border-left-color: #ffb454; }
.sched-ev.k-power { border-left-color: rgb(var(--acc)); }
.sched-ev.k-log { border-left-color: rgba(120,160,220,.45); }
.sched-ev.k-sys { border-left-color: #b98cff; }
.sched-ev.done { opacity: .5; }
.sched-ic { font-size: 13px; flex: none; width: 17px; text-align: center; }
.sched-et { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sched-et b { font-size: 11px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-et i { font-style: normal; font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-tick { font-size: 11px; color: #7dffa8; flex: none; }
.sched-empty { font-size: 11.5px; color: var(--muted); line-height: 1.5; padding: 10px 6px; }
/* ═══ v9.12 — 🔗 TG Links: square icon-tile launcher mirrored from tgnet.com.au/basic_links ═══ */
.tgl-body { display: flex; flex-direction: column; min-height: 0; }
.tgl-wrap { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 8px; }
.tgl-top { display: flex; gap: 7px; flex: none; }
.tgl-search { flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 9px; background: rgba(10,20,38,.9); color: #eaf1ff; border: 1px solid var(--line); }
.tgl-search:focus { outline: none; border-color: rgba(var(--acc),.6); }
.tgl-refresh { font: inherit; font-size: 13px; padding: 0 11px; border-radius: 9px; cursor: pointer; flex: none; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.tgl-refresh:hover { background: rgba(var(--acc),.3); }
/* v9.15 — dense colour-coded square grid (no group headers); shortcuts + links together. Columns from ⚙. */
.tgl-grid { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; align-content: start; }
.tgl-grid::-webkit-scrollbar { display: none; }
.tgl-grid > .res-loading { grid-column: 1 / -1; }
.tgl-tile { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 3px; border-radius: 10px; text-decoration: none; cursor: pointer; overflow: hidden;
  background: rgba(255,255,255,.035); border: 1px solid var(--tc, rgba(120,160,220,.22)); transition: transform .1s, box-shadow .15s, background .15s; }
.tgl-tile:hover { transform: translateY(-1px); background: rgba(255,255,255,.07); box-shadow: 0 0 0 1px var(--tc, rgba(var(--acc),.6)), 0 3px 10px rgba(0,0,0,.35); }
.tgl-ic { font-size: 22px; line-height: 1; color: var(--tc, rgb(var(--acc2))); }
.tgl-lbl { font-size: 8px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.05; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgl-sc img { width: 62%; height: 62%; max-width: 32px; max-height: 32px; object-fit: contain; }
/* ═══ v9.23 — 🗂 Sub Profiles: page switcher ═══ */
.subp-body { display: flex; flex-direction: column; min-height: 0; }
.subp-wrap { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 8px; }
.subp-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 5px; }
.subp-list::-webkit-scrollbar { display: none; }
.subp-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; cursor: pointer; background: rgba(255,255,255,.03); border: 1px solid rgba(120,160,220,.16); transition: border-color .15s, background .15s; }
.subp-row:hover { border-color: rgba(var(--acc),.5); background: rgba(var(--acc),.08); }
.subp-row.active { border-color: rgba(var(--acc),.65); background: rgba(var(--acc),.13); }
.subp-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subp-ren, .subp-del { width: 26px; height: 26px; border-radius: 7px; cursor: pointer; flex: none; font-size: 12px; background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); }
.subp-ren:hover { background: rgba(40,60,90,.9); }
.subp-del:hover { color: #ff8a8a; border-color: rgba(244,63,94,.5); }
.subp-btns { display: flex; gap: 6px; flex: none; }
.subp-btns button { flex: 1; font: inherit; font-size: 12px; font-weight: 700; padding: 8px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.subp-btns button:hover { background: rgba(var(--acc),.3); }
.subp-hint { font-size: 10.5px; color: var(--muted); line-height: 1.4; flex: none; }
/* v9.77 — 🕓 Restore Points panel */
.rp-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rp-intro { font-size: 12px; color: var(--muted); line-height: 1.45; }
.rp-savenow { font: inherit; font-size: 12px; font-weight: 700; padding: 8px 12px; border-radius: 9px; cursor: pointer; align-self: flex-start; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.rp-savenow:hover { background: rgba(var(--acc),.3); }
.rp-list { display: flex; flex-direction: column; gap: 7px; }
.rp-empty { font-size: 12px; color: var(--muted); padding: 14px 4px; line-height: 1.45; }
.rp-row { display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(120,160,220,.16); }
.rp-row:hover { border-color: rgba(var(--acc),.4); }
.rp-when { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink); flex-wrap: wrap; }
.rp-kind { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; color: var(--muted); background: rgba(120,160,220,.14); }
.rp-kind.rp-man { color: rgb(var(--acc2)); background: rgba(var(--acc),.18); }
.rp-label { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rp-chip { font-size: 10.5px; color: var(--ink); background: rgba(18,26,44,.7); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.rp-chip b { color: rgb(var(--acc2)); }
.rp-chip.rp-ss { color: var(--muted); }
.rp-acts { display: flex; gap: 6px; }
.rp-do { flex: 1; font: inherit; font-size: 12px; font-weight: 700; padding: 7px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.rp-do:hover { background: rgba(var(--acc),.3); }
.rp-del { width: 34px; font-size: 12px; border-radius: 8px; cursor: pointer; background: rgba(18,26,44,.85); color: var(--muted); border: 1px solid var(--line); }
.rp-del:hover { color: #ff8a8a; border-color: rgba(244,63,94,.5); }
.mp-plex { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink); cursor: pointer; white-space: nowrap; padding: 0 4px; }
.mp-plex input { accent-color: rgb(var(--acc)); width: 15px; height: 15px; }
/* v8.69 — Plex play buttons (Plex gold) on movie cells / randomiser + the Plex-widget picker shortcut */
.mp-cell { position: relative; }
.mp-plexplay { position: absolute; left: 4px; bottom: 4px; z-index: 2; font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 999px; cursor: pointer;
  background: rgba(229,160,13,.94); color: #1a1205; border: 1px solid rgba(255,210,120,.8); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.mp-plexplay:hover { background: #ffcb4d; }
.mp-onplex { outline: 1px solid rgba(229,160,13,.5); outline-offset: -1px; }
.mvr-plex { margin-top: 10px; font: inherit; font-size: 14px; font-weight: 700; padding: 8px 18px; border-radius: 999px; cursor: pointer;
  background: rgba(229,160,13,.92); color: #1a1205; border: 1px solid rgba(255,210,120,.8); }
.mvr-plex:hover { background: #ffcb4d; }
.plex-pickbtn { font: inherit; font-size: 12px; padding: 6px 11px; border-radius: 999px; cursor: pointer; flex: none; white-space: nowrap;
  background: rgba(var(--acc),.14); color: rgb(var(--acc3)); border: 1px solid rgba(var(--acc),.4); }
.plex-pickbtn:hover { background: rgba(var(--acc),.28); }

/* v3.97 — 🎙/🔈 header mutes right of ☰ Menu (mic mute + voice mute) */
/* v5.61 — fixed header order left→right: ☰ Menu · 🎙 mic mute · ⛶ fullscreen · 🤖 MAX-voice mute.
   (Fullscreen was landing on top of the mic button — each now has its own slot.) */
.hdr-ico { left: 112px; padding: 6px 11px; font-size: 14px; }
.hdr-ico .material-symbols-outlined { font-size: 19px; line-height: 1; vertical-align: -4px; }   /* v9.03 — Home-devices button now uses the widget_menu symbol instead of the power glyph */
/* v7.86 — ⏻ Home devices gets its OWN slot right after ☰ Menu; the mute/fs/voice
   icons shift one slot right so nothing stacks on the mic (the ⏻ was invisible,
   pinned on top of 🎙). Each icon has an explicit left so none collide. */
#hdrHaBtn { left: 112px; }                                       /* ⏻ Home devices — next to ☰ Menu */
#hdrMicBtn { left: 156px; }                                      /* 🎙 mic mute */
#hdrFsBtn { left: 200px; }                                       /* ⛶ fullscreen */
.hdr-spk { left: 244px; }                                        /* 🤖 MAX-voice mute */
/* v5.62 — 💾 / 📂 Save & Open screen arrangement, right of the version badge (top-right) */
.hdr-arr { position: fixed; top: 16px; left: auto; padding: 6px 11px; font-size: 14px; z-index: 121; }
#hdrSaveArr { right: 62px; }
#hdrOpenArr { right: 16px; }
body.ipad-pro #hdrSaveArr, body.ipad-pro #hdrOpenArr { top: 60px; }

/* v5.62 — HEADER = ONE consistent row: every control the same height, same baseline, no overlap,
   flowing left→right:  ☰ Menu · 🎙 mic · ⛶ fullscreen · 🤖 voice · [ listening wave ] ···· version · 💾 · 📂 */
.menu-btn, .hdr-ico, .hdr-arr, .ver-btn {
  height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  padding-top: 0; padding-bottom: 0; line-height: 1;
}
/* v5.63 — no more Arrange / Edit-layout buttons: every widget has its own built-in edit handles now */
.wdg-editbtn, .wdg-autobtn { display: none !important; }
/* v5.63 — right cluster grouped tight in the corner (version + 💾 + 📂), so no stray gap by the version */
.hdr-right { position: fixed; top: 16px; right: 16px; z-index: 121; display: inline-flex; align-items: center; gap: 8px; }
body.ipad-pro .hdr-right { top: 60px; }
#hdrRight #verBtn, #hdrRight .hdr-arr { position: static !important; top: auto !important; right: auto !important; left: auto !important; }
#hdrProfileBtn { text-transform: none !important; letter-spacing: normal; }   /* show "Profile", not the reskin's forced UPPERCASE */
/* v8.35 — time + version in one rounded bubble; the clock uses a FIXED width (tabular digits) so the
   bubble never resizes as the time changes → the header colour ribbon beside it stops flickering. */
/* v8.38 — pill is the SAME 34px height as every other header control (it was ballooning because the
   version button inside is itself a 34px .ver-btn + the pill's own padding). Pin height, fit children. */
.hdr-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; box-sizing: border-box; padding: 0 12px; border-radius: 999px;
  background: rgba(8,18,32,.72); border: 1px solid rgba(var(--acc),.35); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.hdr-pill .hdr-clock { font-variant-numeric: tabular-nums; min-width: 60px; text-align: center; font-size: 12.5px; color: rgb(var(--acc3)); letter-spacing: .02em; line-height: 1; }
.hdr-pill #verBtn { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 2px !important; height: auto !important; }
/* v8.43 — 📁 Profile dropdown (Save / Open / New) */
.profile-menu { position: fixed; z-index: 130; display: flex; flex-direction: column; min-width: 214px; max-width: min(320px, 92vw); max-height: 78vh; overflow-y: auto; scrollbar-width: none;
  background: rgba(10,16,30,.98); border: 1px solid rgba(var(--sup, 168,85,247),.55); border-radius: 12px; padding: 6px; box-shadow: 0 0 0 1px rgba(var(--sup,168,85,247),.3), 0 14px 44px rgba(0,0,0,.55); }
.profile-menu::-webkit-scrollbar { display: none; }
/* v10.47 — HA group frame ⚙ menu */
.ha-grpmenu { position: fixed; z-index: 100002; display: flex; flex-direction: column; min-width: 190px; background: rgba(10,16,30,.98); border: 1px solid rgba(var(--sup,168,85,247),.55); border-radius: 11px; padding: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.ha-grpmenu .hgm-h { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--acc3)); padding: 5px 9px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-grpmenu .hgm-item { font: inherit; font-size: 13px; text-align: left; padding: 9px 10px; border-radius: 8px; cursor: pointer; background: none; border: 0; color: var(--ink); }
.ha-grpmenu .hgm-item:hover { background: rgba(var(--acc),.16); }
/* v9.27 — section headers + Sub-Profile page rows inside the Profiles menu */
.pm-h { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--acc3)); padding: 6px 11px 3px; }
.pm-sep { height: 1px; background: rgba(120,160,220,.18); margin: 5px 4px; }
.pm-page.on { background: rgba(var(--acc),.14); }
.pm-page.on b { color: rgb(var(--acc2)); }
.pm-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; text-align: left; background: none; border: 0;
  color: var(--ink); cursor: pointer; padding: 9px 11px; border-radius: 8px; font: inherit; font-size: 16px; }
.pm-item:hover { background: rgba(var(--acc),.16); }
.pm-item b { font-size: 14px; font-weight: 700; }
.pm-item em { flex-basis: 100%; font-style: normal; font-size: 11px; color: var(--muted); margin-left: 30px; }
/* v5.63 — the mic equalizer beam gets its OWN dedicated lane, ending well left of the version cluster
   (and the buttons sit above it, so the beam never shows through their backgrounds). */
@media (min-width: 681px) {
  /* v8.37 — `right` is set precisely by JS (fitRight) to stop just before the time/version bubble so the
     ribbon never runs underneath it (that overlap caused the flicker). This is only a safe fallback. */
  .wave-wrap { top: 16px !important; left: 300px !important; right: 330px; height: 34px !important; z-index: 104 !important; }
}
body.ipad-pro .wave-wrap { top: 60px !important; left: 306px !important; right: 340px; height: 34px !important; }
.hdr-ico.muted { color: #ff8585; border-color: rgba(255,110,110,.6); background: rgba(80,20,25,.55); }
@media (min-width: 681px) { .wave-wrap { left: 206px; } }

/* v3.97 — version history: ~30% smaller, paginated, sits IN the workspace (no screen fade) */
#ver { background: transparent !important; backdrop-filter: none !important; pointer-events: none; }
#ver .ver-panel { pointer-events: auto; max-width: min(730px, 62vw); max-height: 74vh; margin-top: 56px;
  box-shadow: 0 0 24px rgba(var(--acc),.2), 0 18px 60px rgba(0,0,0,.65); }

/* ===== v3.98 — widget placement rewrite: absolute boxes, header size controls ===== */
.wdg-selected { outline: 2px solid rgb(var(--acc)) !important; outline-offset: 2px; box-shadow: 0 0 18px rgba(var(--acc),.5) !important; }
.wdg-sizectl { display: inline-flex; align-items: center; gap: 4px; pointer-events: auto; }
.wdg-sizectl .wsc-lb { font-size: 9px; letter-spacing: .1em; color: var(--muted); }
.wdg-sizectl .wsc-sel { font-size: 10px; padding: 3px 4px; border-radius: 7px;
  background: rgba(18,26,44,.95); color: var(--ink); border: 1px solid var(--line); }
.wdg-szwrap { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; }
.wdg-szwrap i { font-style: normal; font-size: 10px; color: var(--muted); }
.wdg-szwrap .wdg-size { font-size: 11px; padding: 3px 5px; }

/* ===== v3.99 — music: browser playback, mini player pill, robot mute, ✕ fix ===== */
/* the ✕ bug: display:flex on the class was beating the [hidden] attribute */
.spot[hidden], .spot-mini-pill[hidden], .camp[hidden] { display: none !important; }
.spot-headbtns { display: inline-flex; gap: 6px; }
.spot-headbtns .res-x { position: static !important; }
/* mini player pill (in the header button group): ▶/⏸ + live bars + ⏭ */
.spot-mini-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  background: rgba(18,26,44,.85); border: 1px solid rgba(var(--acc),.5); pointer-events: auto; }
.spot-mini-pill button { background: none; border: 0; color: rgb(var(--acc3)); font: inherit; font-size: 12px; cursor: pointer; padding: 0 2px; line-height: 1; }
.spot-mini-pill { padding-left: 5px; }
.spot-mini-art { width: 24px; height: 24px; border-radius: 5px; object-fit: cover; cursor: pointer; flex: none; }
.spot-mini-art[hidden] { display: none; }
.spot-mini-ttl { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--ink); cursor: pointer; }
.spot-mini-x { opacity: .5; font-size: 11px !important; } .spot-mini-x:hover { opacity: 1; }
@media (max-width: 720px) { .spot-mini-ttl { max-width: 84px; } }
.smq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; cursor: pointer; }
.smq i { width: 3px; height: 3px; background: rgb(var(--acc)); border-radius: 2px; transition: height .3s; }
.spot-mini-pill.playing .smq i { animation: smqB .8s ease-in-out infinite alternate; }
.spot-mini-pill.playing .smq i:nth-child(2) { animation-delay: .12s; }
.spot-mini-pill.playing .smq i:nth-child(3) { animation-delay: .24s; }
.spot-mini-pill.playing .smq i:nth-child(4) { animation-delay: .36s; }
.spot-mini-pill.playing .smq i:nth-child(5) { animation-delay: .48s; }
@keyframes smqB { from { height: 3px; } to { height: 14px; } }
/* 🤖 MAX-voice mute: robot with a line through it when muted */
.hdr-spk { position: fixed; }
.hdr-spk.muted { position: fixed; }
.hdr-ico.muted::after { content: ''; position: absolute; left: 15%; right: 15%; top: 50%; height: 2px;
  background: #ff6b6b; transform: rotate(-32deg); border-radius: 2px; pointer-events: none; }
.hdr-ico { position: fixed; overflow: visible; }
/* v3.99 — version history NEVER scrolls: first couple of releases + pagination */
#ver .ver-panel { overflow: hidden !important; max-height: 78vh; }
#ver #verBody { overflow: hidden !important; }

/* ===== v4.00 — widget drag: card content goes INERT in edit mode (iframes/buttons can't
   steal the pointer), whole card is the drag surface ===== */
#widgets.editing .wdg-free { cursor: move; user-select: none; }
#widgets.editing .wdg-free .res-card-body { pointer-events: none !important; }
#widgets.editing .wdg-free iframe { pointer-events: none !important; }
#widgets.editing .wdg-free.dragging { opacity: .88; }

/* ===== v4.05 — drag coordinates readout ===== */
.wdg-xy { position: fixed; top: 58px; left: 50%; transform: translateX(-50%); z-index: 1000;
  font-size: 12px; letter-spacing: .08em; color: rgb(var(--acc2)); padding: 4px 14px; border-radius: 999px;
  background: rgba(10,18,32,.92); border: 1px solid rgba(var(--acc),.55); pointer-events: none; }
.wdg-xy[hidden] { display: none; }
.wdg-xy { opacity: 1; transition: opacity .6s ease; }   /* v9.14 — arrow-key nudge readout fades out */
.wdg-xy.wdg-xy-fade { opacity: 0; }

/* ===== v4.07 — THE upward-wall root cause ===== */
/* #widgets .res-card { position: relative } (v3.66 leftover, line ~1303) was BEATING
   .wdg-free's position:fixed on ID specificity — so every "fixed" widget was actually
   positioned relative to its place in the document flow, giving each widget its own
   per-widget ceiling (deeper in the flow = lower the ceiling). Down worked, up didn't.
   This rule out-specifies it and makes free widgets genuinely viewport-fixed. */
/* v4.10: inset:auto!important was WRONG — the inset shorthand includes left/top, so it reset
   every rendered position to 0,0 on re-render (Done/resize). Only position/margin are forced. */
#widgets .res-card.wdg-free { position: fixed !important; margin: 0 !important; }

/* ===== v4.09 — header size boxes: tiny yellow HEIGHT / WIDTH captions ===== */
.wsc-col { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.wsc-cap { font-size: 8px; letter-spacing: .1em; color: #ffd34d; line-height: 1; }

/* ===== v4.12 — home devices ARE widgets: free tiles, no groups ===== */
.home-dev.hd-free { position: fixed !important; margin: 0 !important; pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.home-editing .home-dev.hd-free { cursor: move; user-select: none; outline: 1px dashed rgba(var(--acc),.45); }
.home-editing .home-dev.hd-free:hover { outline-color: rgba(var(--acc),.9); box-shadow: 0 0 18px rgba(var(--acc),.3); }
.home-dev.hd-free.dragging { opacity: .88; }
.home-dev.hd-free.wdg-selected { outline: 2px solid rgb(var(--acc)) !important; outline-offset: 2px; box-shadow: 0 0 18px rgba(var(--acc),.5) !important; }
/* v4.12 — camera edit mode + ▶ YouTube panel */
.camp.editing { cursor: move; user-select: none; }
.camp.editing .camp-stage canvas { pointer-events: none; }
.ytp { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 36; width: min(760px, 60vw);
  background: rgba(8,14,26,.97); border: 1px solid rgba(var(--acc),.5); border-radius: 16px;
  box-shadow: 0 0 26px rgba(var(--acc),.25), 0 16px 50px rgba(0,0,0,.6); padding: 12px 14px; }
.ytp[hidden] { display: none !important; }
.ytp-row { display: flex; gap: 8px; margin-bottom: 10px; }
.ytp-row select { flex: 1; min-width: 0; }
.ytp-stage { border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.ytp-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.ytp-ctl { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
body.ipad-pro .ytp { top: 110px; }
/* v4.13 — video player edit mode */
.ytp.editing { cursor: move; user-select: none; }
.ytp.editing .ytp-stage iframe { pointer-events: none; }
/* v4.13 — every live answer card has its own ✕ */
.card { padding-right: 34px; }
.card-x { position: absolute; top: 8px; right: 9px; background: none; border: 0; color: var(--muted);
  font-size: 14px; cursor: pointer; padding: 3px 7px; border-radius: 7px; line-height: 1; }
.card-x:hover { color: var(--ink); background: rgba(255,255,255,.08); }
/* v6.81 — copy-answer button, sits just left of the ✕ */
.card-copy { position: absolute; top: 8px; right: 34px; background: none; border: 0; color: var(--muted);
  font-size: 13px; cursor: pointer; padding: 3px 6px; border-radius: 7px; line-height: 1; opacity: .6; }
.card-copy:hover { opacity: 1; background: rgba(var(--acc),.16); }

/* v4.15 — music box edit mode */
.spot.editing { cursor: move; user-select: none; }
.spot.editing .spot-list, .spot.editing .spot-results { pointer-events: none; }

/* ===== v4.17 — ⚡ Amber Electric widget ===== */
.amber-unit { font-size: 14px; margin-left: 3px; opacity: .8; }
.amber-fc { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; border-top: 1px solid rgba(120,160,220,.14); padding-top: 6px; }
.amber-row { display: flex; justify-content: space-between; font-size: 12px; }
.amber-row span { color: var(--muted); }

/* ===== v4.19 — 💱 currency + 🧮 calculator widgets ===== */
.fx-list { display: flex; flex-direction: column; gap: 4px; }
.fx-row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 3px 2px;
  border-bottom: 1px solid rgba(120,160,220,.1); }
.fx-row:last-child { border-bottom: 0; }
.fx-row span { color: var(--muted); }
.fx-row b { color: #bfe9ff; }
/* v4.42 — currency converter */
.fx-conv { margin-bottom: 10px; }
.fx-conv-row { display: flex; gap: 6px; align-items: center; }
.fx-conv-row .fx-amt { width: 78px; min-width: 0; flex: none; }
.fx-conv-row select { flex: 1; min-width: 0; }
.fx-swap { flex: none; background: rgba(var(--acc),.14); border: 1px solid rgba(var(--acc),.4); color: rgb(var(--acc2));
  border-radius: 8px; cursor: pointer; font-size: 14px; padding: 4px 7px; line-height: 1; }
.fx-swap:hover { background: rgba(var(--acc),.3); }
.fx-result { margin-top: 9px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.fx-result .fx-big { color: #7dffa8; font-size: 15px; }
.fx-result .fx-rate { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.fx-ref-h { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 4px 0 5px; }
.calc-disp { min-height: 44px; margin-bottom: 8px; padding: 8px 12px; border-radius: 10px; text-align: right;
  background: rgba(4,10,20,.85); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.calc-disp .calc-e { font-size: 15px; color: var(--ink); word-break: break-all; }
.calc-disp .calc-r { font-size: 19px; font-weight: 700; color: rgb(var(--acc)); }
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.calc-btn { font: inherit; font-size: 15px; padding: 8px 0; border-radius: 9px; cursor: pointer;
  background: rgba(18,26,44,.9); color: var(--ink); border: 1px solid var(--line); }
.calc-btn:hover { border-color: rgba(var(--acc),.55); }
.calc-op { color: rgb(var(--acc3)); }
.calc-eq { background: rgba(var(--acc),.2); color: #bff3ff; border-color: rgba(var(--acc),.6); }
/* v5.22 — calculator: scientific keys, history dump, keyboard focus */
.calc-body { display: flex; flex-direction: column; outline: none; }
.calc-body:focus-within { box-shadow: inset 0 0 0 1px rgba(var(--acc),.35); border-radius: 10px; }
.calc-sci { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 5px; }
.calc-scibtn { font-size: 12.5px; padding: 6px 0; color: #c9b6ff; border-color: rgba(168,85,247,.35); }
.calc-scibtn:hover { border-color: rgba(168,85,247,.7); }
.calc-hist { max-height: 40%; overflow-y: auto; margin-bottom: 8px; border: 1px solid rgba(120,160,220,.2); border-radius: 10px; padding: 4px; }
.calc-hist-empty { padding: 8px; opacity: .6; font-size: 12.5px; text-align: center; }
.calc-hist-row { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; padding: 5px 7px; cursor: pointer; color: var(--ink); font: inherit; }
.calc-hist-row:hover { background: rgba(var(--acc),.12); }
.calc-hist-code { font-weight: 700; color: rgb(var(--acc)); font-size: 12px; flex: 0 0 auto; }
.calc-hist-x { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-hist-row b { font-size: 13px; }
/* v4.19 — 📈 ASX rows: code + name, sparkline, price + change pill */
.asx-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid rgba(120,160,220,.1); }
.asx-row:last-child { border-bottom: 0; }
.asx-l { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.asx-l b { font-size: 14px; letter-spacing: .03em; }
.asx-l span { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asx-spark { width: 64px; height: 24px; flex: none; }
.asx-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.asx-r b { font-size: 14px; }
.asx-r i { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px; }
.asx-up { color: #06281a; background: #28dc8c; }
.asx-dn { color: #2b0a0a; background: #ff5a5a; }

/* ===== v4.20 — 🛩 air radar ===== */
.radar-wrap { display: flex; justify-content: center; position: relative; }
/* v9.08 — radar circle-size slider, top-right of the scope */
.radar-sizer { position: absolute; top: 4px; right: 4px; z-index: 4; display: flex; align-items: center; gap: 5px;
  background: rgba(6,14,30,.72); border: 1px solid rgba(var(--acc),.4); border-radius: 999px; padding: 3px 9px 3px 7px; backdrop-filter: blur(3px); }
.radar-sizer-ic { font-size: 11px; color: rgb(var(--acc3)); }
.radar-sizer input[type=range] { width: 78px; accent-color: rgb(var(--acc)); height: 3px; cursor: pointer; }
.radar-cv { border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(10,28,40,.9), rgba(3,10,18,.95));
  border: 1px solid rgba(var(--acc),.4); box-shadow: 0 0 22px rgba(var(--acc),.2), inset 0 0 30px rgba(var(--acc),.08); }
.radar-list { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
/* v6.51 — split layout: radar (+ its range slider) on the LEFT, the plane text/list on the RIGHT */
.radar-split { display: flex; align-items: flex-start; gap: 12px; }
.radar-split .radar-col { flex: 0 0 46%; min-width: 0; }
.radar-split .radar-list { flex: 1 1 auto; margin-top: 0; min-width: 0; align-self: stretch; }
.radar-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; padding: 2px 2px;
  border-bottom: 1px solid rgba(120,160,220,.1); }
.radar-row:last-child { border-bottom: 0; }
.radar-row b { flex: 1; color: #a9f5c9; letter-spacing: .04em; }
.radar-row span { color: var(--muted); font-size: 11px; }
.radar-row i { font-style: normal; color: #7fd4ff; }
.radar-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 6px 0; }
/* v4.56 — wheel-driven plane browser (no scrollbars) */
.radar-focus { margin-top: 8px; border: 1px solid rgba(var(--acc),.35); border-radius: 12px; padding: 8px 10px; background: rgba(var(--acc),.06); }
.rf-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.rf-nav button { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1;
  background: rgba(18,26,44,.85); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.rf-nav button:hover { background: rgba(var(--acc),.3); }
.rf-count { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.rf-body { display: flex; align-items: baseline; gap: 8px; cursor: pointer; padding: 3px 1px; border-radius: 8px; }
.rf-body:hover { background: rgba(var(--acc),.1); }
.rf-body b { flex: 1; color: #a9f5c9; letter-spacing: .04em; font-size: 14px; }
.rf-body .rf-type, .rf-body .rf-alt { color: var(--muted); font-size: 11px; }
.rf-body i { font-style: normal; color: #7fd4ff; font-weight: 700; }
.rf-hint { font-size: 9.5px; color: var(--muted); text-align: center; margin-top: 5px; opacity: .8; }

/* ===== v4.21 — Amber grid-buy controls ===== */
.amber-buy { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.amber-buylb { font-size: 9px; letter-spacing: .12em; color: #ffd34d; }
.amber-bb { font: inherit; font-size: 12px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  background: rgba(18,26,44,.9); color: #bfe9ff; border: 1px solid var(--line); }
.amber-bb:hover:not(:disabled) { border-color: rgba(var(--acc),.6); }
.amber-bb.on { border-color: rgba(40,220,140,.7); color: #8ff0b4; box-shadow: 0 0 10px rgba(40,220,140,.3); }
.amber-bb.amber-stop { color: #ff9d9d; }
.amber-bb:disabled { opacity: .5; }
.amber-chg { margin-top: 6px; font-size: 12px; color: #8ff0b4; min-height: 14px; }
/* v4.63 — prominent "buying from the grid" banner (battery + amber widgets) */
.buy-banner { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 11px; border-radius: 10px;
  font-size: 12.5px; font-weight: 600; color: #8ff0b4; background: rgba(40,220,140,.14); border: 1px solid rgba(40,220,140,.5); }
.buy-dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; flex: none; box-shadow: 0 0 8px #4ade80; animation: buyPulse 1.3s ease-in-out infinite; align-self: flex-start; margin-top: 4px; }
@keyframes buyPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
/* v4.68 — charge countdown + projected-SoC chart */
.buy-info { flex: 1; min-width: 0; }
.buy-line { font-weight: 600; }
.buy-count { font-variant-numeric: tabular-nums; color: #d6ffe6; }
.soc-proj { margin-top: 7px; }
.sp-bar { position: relative; height: 12px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.sp-now { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg,#28dc8c,#4ade80); border-radius: 999px 0 0 999px; }
.sp-add { position: absolute; top: 0; height: 100%; background: repeating-linear-gradient(45deg, rgba(74,222,128,.5) 0 6px, rgba(74,222,128,.25) 6px 12px); }
.sp-lb { font-size: 10.5px; color: #bfe9ff; margin-top: 4px; font-weight: 500; }
/* v4.68 — buy recommendation banner */
.buy-rec { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; background: rgba(229,160,13,.14); border: 1px solid rgba(229,160,13,.5); }
.rec-txt { font-size: 12.5px; color: #ffe0a3; line-height: 1.45; }
.rec-txt b { color: #ffcf6b; }
.rec-count { color: var(--muted); font-size: 10.5px; }
.rec-buy { margin-top: 8px; font: inherit; font-size: 12.5px; padding: 6px 13px; border-radius: 999px; cursor: pointer;
  background: rgba(229,160,13,.24); color: #ffcf6b; border: 1px solid rgba(229,160,13,.6); }
.rec-buy:hover { background: rgba(229,160,13,.38); }
/* v4.63 — refresh button spin */
.card-refresh.spin { animation: cardSpin .6s linear; }
@keyframes cardSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* v4.63 — Amber price projection graph */
.amber-graph-h { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 10px 0 4px; }
.amber-graph { display: flex; align-items: flex-end; gap: 4px; height: 66px; padding-top: 2px; }
.ag-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.ag-bar { width: 100%; max-width: 26px; border-radius: 3px 3px 0 0; min-height: 4px; }
.ag-bar.ag-now { outline: 1px solid rgba(255,255,255,.5); }
.ag-lb { font-size: 8.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; }

/* ===== v4.22 — 🎬 movie picker + radar range slider ===== */
.mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.mp-tile { position: relative; display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 2 / 3;
  background: rgba(18,26,44,.9); border: 1px solid var(--line); text-decoration: none; }
.mp-tile:hover { border-color: rgba(var(--acc),.7); box-shadow: 0 0 14px rgba(var(--acc),.35); }
.mp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-noimg { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 22px; }
.mp-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 6px 4px; font-size: 9.5px; color: #dff0ff;
  background: linear-gradient(transparent, rgba(0,0,0,.85)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-ctl { display: flex; gap: 6px; margin-top: 9px; align-items: center; }
.mp-ctl select { flex: 1; min-width: 0; }
.mp-search { font: inherit; font-size: 12px; padding: 5px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: rgba(var(--acc),.16); color: #bff3ff; border: 1px solid rgba(var(--acc),.6); }
.mp-search:hover { background: rgba(var(--acc),.3); }
.radar-range { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.radar-range input[type=range] { flex: 1; accent-color: rgb(var(--acc)); height: 4px; }
.radar-range span { font-size: 11px; color: #7fd4ff; min-width: 44px; text-align: right; }
.radar-loc { margin-top: 6px; }
.radar-loc-sel { width: 100%; font-size: 11px; padding: 3px 6px; border-radius: 7px; background: rgba(8,14,28,.9); color: #eaf1ff; border: 1px solid rgba(var(--acc),.4); }

/* ===== v4.23 — ✈️ flight details modal + radar view buttons ===== */
.radar-view { font: inherit; font-size: 10px; padding: 2px 9px; border-radius: 999px; cursor: pointer; flex: none;
  background: rgba(var(--acc),.14); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); text-transform: uppercase; letter-spacing: .06em; }
.radar-view:hover { background: rgba(var(--acc),.3); }
.flight-modal { z-index: 92; width: min(460px, 90vw); height: min(620px, 86vh); top: 42%; display: flex; flex-direction: column; }
.flight-body { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1 1 auto; }
/* v4.97 — beefed-up flight file: route strip, live map, metrics grid */
.flight-route { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; }
.flight-route .fr-end { flex: 1; display: flex; flex-direction: column; }
.flight-route .fr-end:last-child { text-align: right; align-items: flex-end; }
.flight-route .fr-end b { font-size: 20px; color: #eaf1ff; letter-spacing: .02em; }
.flight-route .fr-end span { font-size: 11px; color: var(--muted); }
.flight-route .fr-arrow { color: rgb(var(--acc)); font-size: 16px; flex: 0 0 auto; }
.flight-route-plain { font-size: 14px; font-weight: 600; color: #eaf1ff; }
.flight-map { width: 100%; height: 200px; border: 1px solid rgba(120,160,220,.3); border-radius: 10px; margin: 4px 0 6px; display: block; }
.flight-grid { display: flex; flex-direction: column; }
.flight-photo { display: block; border-radius: 10px; overflow: hidden; position: relative; border: 1px solid rgba(var(--acc),.35); margin-bottom: 4px; }
.flight-photo img { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.flight-photo span { position: absolute; right: 6px; bottom: 4px; font-size: 9.5px; color: rgb(var(--acc3)); background: rgba(0,0,0,.55); padding: 1px 7px; border-radius: 6px; }
.flight-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 5px 2px; border-bottom: 1px solid rgba(120,160,220,.12); }
.flight-row:last-of-type { border-bottom: 0; }
.flight-row span { color: var(--muted); }
.flight-link { margin: 8px 0 0; font-size: 13px; }
.flight-link a { color: rgb(var(--acc3)); }
/* v4.57 — external flight-database links */
.flight-links { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 0; }
.flight-links a { font-size: 12px; padding: 6px 12px; border-radius: 999px; text-decoration: none;
  background: rgba(var(--acc),.14); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.flight-links a:hover { background: rgba(var(--acc),.3); }
.flight-note { font-size: 10.5px; color: var(--muted); margin: 7px 0 0; line-height: 1.45; }
/* v4.23 — movie picker always shows posters AND controls inside the frame */
.mp-body { display: flex; flex-direction: column; }
.mp-body .mp-grid { flex: 1; min-height: 0; overflow: hidden; }
.mp-body .mp-ctl { flex: none; }
.mp-tile { aspect-ratio: auto; height: 100%; min-height: 0; }

/* ===== v4.24 — movie picker: portrait posters + facts, header pick + copy ===== */
.mp-cell { display: flex; gap: 8px; align-items: center; padding: 4px; border-radius: 9px; cursor: pointer;
  background: rgba(18,26,44,.55); border: 1px solid var(--line); text-align: left; font: inherit; color: var(--ink); min-height: 0; overflow: hidden; }
.mp-cell:hover { border-color: rgba(var(--acc),.7); box-shadow: 0 0 12px rgba(var(--acc),.3); }
.mp-cell img { width: 44px; height: 66px; object-fit: cover; border-radius: 6px; flex: none; }   /* portrait, like a real poster */
.mp-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 10.5px; color: var(--muted); }
.mp-info b { font-size: 12px; color: #bfe9ff; }
.mp-copy { background: rgba(var(--acc),.14); border: 1px solid rgba(var(--acc),.5); color: rgb(var(--acc2));
  font-size: 12px; padding: 2px 9px; border-radius: 999px; cursor: pointer; margin-left: auto; margin-right: 6px; }
.mp-copy:hover { background: rgba(var(--acc),.3); }

/* v4.25 — movie cells: posters fill the cell height */
.mp-cell img { width: auto; height: calc(100% - 6px); max-height: 120px; aspect-ratio: 2 / 3; object-fit: cover; }
.mp-info b { font-size: 13.5px; }
.mp-info { font-size: 11.5px; gap: 2px; }

/* ===== v4.26 — header layout: fixed status box (scrolling text) + aurora middle + mic pill ===== */
@media (min-width: 681px) {
  .wave-status { flex: 0 0 230px; max-width: 230px; overflow: hidden; white-space: nowrap; justify-content: flex-start; }
}
.ws-inner { display: inline-block; white-space: nowrap; }
.ws-inner.ws-scroll { animation: wsMarq 9s ease-in-out infinite alternate; }
@keyframes wsMarq { 0%, 14% { transform: translateX(0); } 86%, 100% { transform: translateX(var(--ws-shift, -40px)); } }
.mic-eq { flex: none; display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px;
  background: rgba(18,26,44,.85); border: 1px solid var(--line); }
.mic-eq canvas { width: 64px; height: 22px; display: block; }

/* v4.27 — movie picker: 4 columns, tighter cells */
.mp-cell { gap: 6px; padding: 3px; }
.mp-cell img { max-height: 104px; }
.mp-info { font-size: 10.5px; }
.mp-info b { font-size: 12.5px; }

/* ===== v4.28 — 🎬 Plex library search ===== */
.plex-body { display: flex; flex-direction: column; }
.plex-res { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.plex-hint { font-size: 12.5px; color: var(--muted); padding: 6px 2px; }
.plex-row { display: flex; align-items: center; gap: 9px; padding: 5px; border-radius: 9px; text-decoration: none;
  background: rgba(18,26,44,.55); border: 1px solid var(--line); color: var(--ink); }
.plex-row:hover { border-color: rgba(229,160,13,.6); box-shadow: 0 0 12px rgba(229,160,13,.25); }
.plex-row img { width: 40px; height: 60px; object-fit: cover; border-radius: 5px; flex: none; background: #111; }
.plex-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.plex-meta b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plex-meta i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.plex-sum { font-size: 10.5px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.plex-go { flex: none; color: #e5a00d; font-size: 14px; }

/* ===== v4.29 — Batch 1 widgets: crypto reuses .asx-*; word/surprise/countdown ===== */
.wd-word { font-size: 22px; font-weight: 800; color: #bff3ff; letter-spacing: .02em; }
.wd-part { font-size: 11px; font-style: italic; color: var(--muted); margin: 1px 0 6px; }
.wd-def { font-size: 13px; }
.wd-ex { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 6px; }
/* v4.47 — multi-language word of the day */
.wd-lang { width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; margin-bottom: 9px;
  padding: 6px 9px; border-radius: 8px; background: rgba(18,26,44,.9); color: var(--ink); border: 1px solid var(--line); }
.wd-main .wd-word { line-height: 1.15; }
.wd-ex-en { display: block; font-style: normal; color: #9fb2d8; opacity: .8; margin-top: 2px; }
.wd-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.wd-btn { font: inherit; font-size: 12px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: rgba(var(--acc),.14); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); transition: background .15s; }
.wd-btn:hover { background: rgba(var(--acc),.3); }
.wd-nav { min-width: 34px; padding: 5px 12px; font-size: 15px; line-height: 1; font-weight: 700; }   /* v4.95 — compact ‹ › word nav */
/* v5.01 — Settings → Events */
.ev-item { border: 1px solid rgba(120,160,220,.22); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.ev-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.ev-head b { font-size: 15px; }
.wd-recent { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wd-recent-h { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-right: 2px; }
.wd-chip { font: inherit; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.05); color: #cfe0f5; border: 1px solid rgba(120,160,220,.2); }
.wd-chip:hover { background: rgba(var(--acc),.16); border-color: rgba(var(--acc),.45); }
.sp-out { min-height: 40px; font-size: 13.5px; margin-bottom: 10px; }
/* v4.93 — pin the Joke/Fact/On-this-day buttons to the bottom so they don't jump when a new answer loads */
.sp-body { display: flex; flex-direction: column; height: 100%; }
.sp-body .sp-out { flex: 1 1 auto; overflow-y: auto; margin-bottom: 8px; }
.sp-body .sp-btns { margin-top: auto; flex: 0 0 auto; }
.sp-main { color: var(--ink); }
.sp-punch { color: #7ff0a8; margin-top: 5px; }
.sp-year { color: #ffce4d; font-weight: 700; }
.sp-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-btn { font: inherit; font-size: 12px; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: rgba(18,26,44,.9); color: rgb(var(--acc3)); border: 1px solid var(--line); }
.sp-btn:hover { border-color: rgba(var(--acc),.6); }
.cd-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.cd-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 2px; border-bottom: 1px solid rgba(120,160,220,.1); }
.cd-row .cd-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-row b { color: rgb(var(--acc)); } .cd-row b.cd-past { color: var(--muted); }
.cd-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 11px; }
.cd-empty { font-size: 12px; color: var(--muted); }
.cd-form { display: flex; gap: 5px; }
.cd-form input { font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 8px; background: rgba(18,26,44,.9); color: var(--ink); border: 1px solid var(--line); min-width: 0; }
.cd-name { flex: 1; } .cd-date { flex: 1; }
.cd-form button { font: inherit; width: 30px; border-radius: 8px; background: rgba(var(--acc),.16); color: #bff3ff; border: 1px solid rgba(var(--acc),.5); cursor: pointer; }

/* v7.38 — Countdowns: one big live DAYS·HRS·MINS·SECS display + add/manage dialog */
.cd-body2 { padding: 0 !important; position: relative; }
.cd-stage { position: relative; width: 100%; height: 100%; min-height: 120px; container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px 8px; box-sizing: border-box; text-align: center; }
.cd-title { font-weight: 800; letter-spacing: .3px; font-size: clamp(14px, 6cqw, 30px); color: var(--ink); max-width: 96%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-when { font-size: clamp(9px, 3.2cqw, 15px); color: var(--muted); }
.cd-digits { display: flex; align-items: flex-start; justify-content: center; gap: clamp(3px, 1.5cqw, 12px); margin-top: 4px; }
.cd-seg { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cd-num { font-variant-numeric: tabular-nums; font-weight: 800; line-height: 1; font-size: clamp(22px, 17cqw, 76px); color: rgb(var(--acc)); text-shadow: 0 0 14px rgba(var(--acc),.55), 0 0 3px rgba(var(--acc),.85); font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.cd-lbl { font-size: clamp(6px, 2.4cqw, 12px); letter-spacing: 1.5px; color: var(--muted); margin-top: 4px; }
.cd-colon { font-weight: 800; line-height: 1; font-size: clamp(16px, 11cqw, 52px); color: rgba(var(--acc),.45); align-self: flex-start; margin-top: 2px; animation: cdBlink 1s steps(2, jump-none) infinite; }
@keyframes cdBlink { 50% { opacity: .25; } }
.reduce-motion .cd-colon { animation: none; }
.cd-digits.cd-elapsed .cd-num { color: var(--muted); text-shadow: none; }
.cd-ago { font-size: clamp(9px, 3cqw, 14px); color: var(--muted); font-style: italic; }
.cd-count { font-size: clamp(8px, 2.6cqw, 12px); color: var(--muted); letter-spacing: 1px; }
.cd-empty-sub { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.cd-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(var(--acc),.12); border: 1px solid rgba(var(--acc),.35); color: rgb(var(--acc)); width: 30px; height: 44px; border-radius: 9px; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; }
.cd-nav:hover { background: rgba(var(--acc),.22); }
.cd-prev { left: 6px; } .cd-next { right: 6px; }
.cd-addform { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.cd-arow { display: flex; gap: 7px; }
.cd-ainput { font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 9px; background: rgba(18,26,44,.9); color: var(--ink); border: 1px solid var(--line); min-width: 0; }
.cd-arow .cd-adate { flex: 2; } .cd-arow .cd-atime { flex: 1; }
.cd-aadd { font: inherit; font-weight: 700; padding: 9px 10px; border-radius: 9px; background: rgba(var(--acc),.18); color: #bff3ff; border: 1px solid rgba(var(--acc),.5); cursor: pointer; }
.cd-aadd:hover { background: rgba(var(--acc),.28); }
.cd-mlist { display: flex; flex-direction: column; gap: 4px; }
.cd-mrow { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 4px; border-bottom: 1px solid rgba(120,160,220,.12); }
.cd-mname { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-mdate { color: var(--muted); font-size: 11px; white-space: nowrap; }
.cd-mdel { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; }
.cd-mdel:hover { color: #ff6b6b; }
.cd-ayear { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
/* v7.42 — Reminders widget, editor & alert */
.rem-list { display: flex; flex-direction: column; gap: 6px; }
.rem-row { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid rgba(120,160,220,.12); }
.rem-row.rem-off { opacity: .5; }
.rem-toggle { background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1; flex: none; }
.rem-mid { flex: 1; min-width: 0; }
.rem-label { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rem-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.rem-edit, .rem-del { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; flex: none; padding: 2px 4px; }
.rem-edit:hover { color: rgb(var(--acc)); } .rem-del:hover { color: #ff6b6b; }
.rem-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 14px 8px; }
.rem-empty-sub { font-size: 11px; margin-top: 6px; line-height: 1.5; opacity: .85; }
.rem-form { display: flex; flex-direction: column; gap: 8px; }
.rem-flabel { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.rem-input { font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 9px; background: rgba(18,26,44,.9); color: var(--ink); border: 1px solid var(--line); width: 100%; box-sizing: border-box; }
.rem-frow { display: flex; gap: 8px; } .rem-fcol { flex: 1; min-width: 0; }
.rem-daterow { display: flex; flex-direction: column; gap: 4px; }
.rem-save { font: inherit; font-weight: 700; padding: 10px; border-radius: 9px; background: rgba(var(--acc),.18); color: #bff3ff; border: 1px solid rgba(var(--acc),.5); cursor: pointer; margin-top: 2px; }
.rem-save:hover { background: rgba(var(--acc),.28); }
.rem-alert { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background: rgba(4,8,16,.55); backdrop-filter: blur(3px); }
.rem-alert-card { background: rgba(14,22,40,.98); border: 1px solid rgba(var(--acc),.7); border-radius: 18px; padding: 26px 30px; text-align: center; box-shadow: 0 0 40px rgba(var(--acc),.45); max-width: 440px; animation: remPop .28s ease; }
@keyframes remPop { from { transform: scale(.82); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.reduce-motion .rem-alert-card { animation: none; }
.rem-alert-icon { font-size: 46px; line-height: 1; animation: remRing 1s ease-in-out infinite; }
@keyframes remRing { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
.reduce-motion .rem-alert-icon { animation: none; }
.rem-alert-t { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--acc)); font-weight: 800; margin-top: 8px; }
.rem-alert-l { font-size: 22px; font-weight: 800; color: var(--ink); margin: 6px 0; line-height: 1.25; }
.rem-alert-time { font-size: 13px; color: var(--muted); }
.rem-alert-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.rem-alert-b { font: inherit; font-weight: 700; padding: 9px 18px; border-radius: 10px; cursor: pointer; border: 1px solid rgba(var(--acc),.5); }
.rem-snooze { background: rgba(var(--acc),.14); color: #cdeffb; }
.rem-dismiss { background: rgb(var(--acc)); color: #04121c; border-color: transparent; }
.rem-alert-b:hover { filter: brightness(1.1); }
/* v7.60 — Bin Night widget */
.bin-body { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.bin-when { font-size: clamp(24px, 8cqw, 46px); font-weight: 800; letter-spacing: .5px; color: var(--ink); }
.bin-when.bin-soon { color: rgb(var(--acc)); text-shadow: 0 0 18px rgba(var(--acc),.5); }
.bin-when.bin-done { color: #4ade80; text-shadow: 0 0 18px rgba(74,222,128,.45); }   /* v9.42 — acknowledged: green "DONE ✅" */
.bin-icon-done { opacity: .5; }
.bin-sub { font-size: 13px; color: var(--muted); }
.bin-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.bin-chip { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: rgba(120,160,220,.1); border: 1px solid var(--line); color: var(--ink); }
/* 🗑 bin pictures (v8.57): the actual bins to put out, 2× red always + rotating */
.bin-icons { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; align-items: flex-end; margin-top: 10px; }
.bin-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bin-icon img { height: clamp(56px, 22cqw, 120px); width: auto; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.bin-cap { font-size: 11.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.bin-when.bin-ring { animation: binRing 1s ease-in-out infinite; }
@keyframes binRing { 0%,100% { transform: none; } 50% { transform: scale(1.04); } }
.bin-ackbtn { margin-top: 10px; font: inherit; font-size: 14px; font-weight: 700; padding: 9px 20px; border-radius: 999px; cursor: pointer;
  background: rgba(60,220,120,.16); color: #7dffb0; border: 1px solid rgba(60,220,120,.6); }
.bin-ackbtn:hover { background: rgba(60,220,120,.3); }
/* floating bin-night alarm banner (shows over everything until acknowledged) */
.bin-alarm { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 4000;
  display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 16px;
  background: rgba(10,16,26,.97); border: 1px solid rgba(var(--acc),.6); box-shadow: 0 0 26px rgba(var(--acc),.35), 0 16px 50px rgba(0,0,0,.6);
  animation: binRing 1.1s ease-in-out infinite; max-width: 92vw; flex-wrap: wrap; justify-content: center; }
.bin-alarm-t { font-size: 16px; font-weight: 800; color: rgb(var(--acc3)); }
.bin-alarm-s { font-size: 13px; color: var(--muted); }
.bin-alarm-btn { font: inherit; font-size: 14px; font-weight: 700; padding: 9px 18px; border-radius: 999px; cursor: pointer;
  background: rgba(60,220,120,.18); color: #7dffb0; border: 1px solid rgba(60,220,120,.65); }
.bin-alarm-btn:hover { background: rgba(60,220,120,.32); }

/* v4.30 — Plex play buttons + in-MAX player window */
.plex-btns { display: flex; align-items: center; gap: 5px; flex: none; }
.plex-play { font: inherit; font-size: 11px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  background: rgba(229,160,13,.18); color: #ffcf7a; border: 1px solid rgba(229,160,13,.55); white-space: nowrap; }
.plex-play:hover { background: rgba(229,160,13,.32); }
.plex-open { color: rgb(var(--acc3)); text-decoration: none; font-size: 14px; padding: 0 4px; }
.plex-player video { width: 100%; height: 100%; display: block; background: #000; }
.plex-note { margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.plex-note a { color: rgb(var(--acc3)); }

/* ===== v4.31 — NRL emblems, ASX/card header buttons, prog-log non-blocking, plex player drag ===== */
.nrl-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid rgba(120,160,220,.1); }
.nrl-row:last-child { border-bottom: 0; }
.nrl-badge { width: 30px; height: 30px; object-fit: contain; flex: none; }
.nrl-abbr { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  border-radius: 50%; background: rgba(var(--acc),.14); border: 1px solid var(--line); color: rgb(var(--acc3)); }
.nrl-sc { font-size: 13px; font-weight: 700; color: rgb(var(--acc3)); min-width: 42px; text-align: center; }
.nrl-when { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.card-hbtn { background: rgba(var(--acc),.14); border: 1px solid rgba(var(--acc),.5); color: rgb(var(--acc2));
  font-size: 13px; padding: 1px 9px; border-radius: 999px; cursor: pointer; margin-left: auto; margin-right: 6px; line-height: 1.3; }
.card-hbtn:hover { background: rgba(var(--acc),.3); }
/* prog-log: appears as its own window, doesn't dim the screen */
#progLive.cfg-overlay { background: transparent !important; backdrop-filter: none !important; pointer-events: none; }
#progLive .notelive-panel { pointer-events: auto; box-shadow: 0 0 26px rgba(var(--acc),.25), 0 18px 60px rgba(0,0,0,.6); }
/* plex player: draggable */
.plex-player.dragging { opacity: .92; }
/* v4.48 — Plex "Play on TV" (cast) */
.plex-tv-btn { font: inherit; font-size: 12px; padding: 4px 11px; margin-right: 8px; border-radius: 999px; cursor: pointer;
  background: rgba(var(--acc),.14); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.5); white-space: nowrap; }
.plex-tv-btn:hover { background: rgba(var(--acc),.3); }
.plex-save-btn { background: rgba(74,222,128,.16); color: #7dffa8; border-color: rgba(74,222,128,.45); }
.plex-save-btn:hover { background: rgba(74,222,128,.3); }
/* v5.32 — jump-to-time input in the Plex player header */
.plex-jump { font: inherit; font-size: 12px; width: 72px; padding: 4px 8px; margin-right: 6px; border-radius: 999px;
  background: rgba(18,26,44,.9); color: #eaf1ff; border: 1px solid rgba(var(--acc),.4); text-align: center; }
.plex-jump::placeholder { color: rgba(159,209,255,.5); }
/* v4.62 — Plex resume strip */
.plex-resume { margin-bottom: 8px; }
.plex-resume-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: #7dffa8; margin: 0 2px 5px; }
.plex-resume-row { display: flex; flex-wrap: wrap; gap: 6px; }
.plex-chip { display: flex; align-items: stretch; border: 1px solid rgba(74,222,128,.4); border-radius: 999px; overflow: hidden; background: rgba(74,222,128,.1); }
.plex-chip-go { font: inherit; font-size: 11.5px; padding: 4px 10px; border: 0; background: none; color: #d6ffe6; cursor: pointer; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.plex-chip-go small { color: #7dffa8; margin-left: 3px; }
.plex-chip-go:hover { background: rgba(74,222,128,.18); }
.plex-chip-x { font-size: 10px; padding: 0 8px; border: 0; border-left: 1px solid rgba(74,222,128,.3); background: none; color: var(--muted); cursor: pointer; }
.plex-chip-x:hover { color: #ff8a8a; }
.plex-cast-menu { position: absolute; top: 46px; right: 12px; z-index: 40; min-width: 220px; max-height: 60vh; overflow-y: auto;
  background: rgba(10,16,30,.98); border: 1px solid rgba(var(--acc),.5); border-radius: 12px; padding: 8px; box-shadow: 0 16px 50px rgba(0,0,0,.6); }
.pcm-h { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 4px 8px 8px; }
.pcm-load { font-size: 12.5px; color: var(--muted); padding: 10px 8px; line-height: 1.5; }
.pcm-item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; gap: 1px;
  font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 9px; cursor: pointer; background: none; border: 0; color: var(--ink); }
.pcm-item:hover { background: rgba(var(--acc),.14); }
.pcm-item span { font-size: 10.5px; color: var(--muted); }
.pcm-item.pcm-off { opacity: .6; }   /* v5.36 — offline player, still tappable (Companion may wake it) */
.plex-cast-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 8px;
  background: rgba(10,16,30,.98); border: 1px solid rgba(var(--acc),.5); border-radius: 999px; padding: 7px 10px 7px 15px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55); cursor: move; }
.pcb-txt { font-size: 12.5px; color: var(--ink); margin-right: 4px; white-space: nowrap; }
.pcb-btn { font-size: 15px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(var(--acc),.14); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.4); }
.pcb-btn:hover { background: rgba(var(--acc),.3); }
.pcb-x { font-size: 12px; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; background: none; border: 0; color: var(--muted); }
.pcb-x:hover { color: var(--ink); }
/* v4.42 — plex player is resizable: stage fills the frame, grab the corner grip */
.plex-player { display: flex; flex-direction: column; }
.plex-player .ytp-stage { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
.ytp-resize { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; cursor: nwse-resize;
  z-index: 6; touch-action: none; border-radius: 0 0 12px 0;
  background: linear-gradient(135deg, transparent 45%, rgba(var(--acc),.55) 45%, rgba(var(--acc),.55) 60%, transparent 60%, transparent 72%, rgba(var(--acc),.55) 72%, rgba(var(--acc),.55) 87%, transparent 87%); }
.ytp-resize:hover { background: linear-gradient(135deg, transparent 45%, rgba(var(--acc),.9) 45%, rgba(var(--acc),.9) 60%, transparent 60%, transparent 72%, rgba(var(--acc),.9) 72%, rgba(var(--acc),.9) 87%, transparent 87%); }

/* ===== v4.32 — TMDB wide poster grid + Plex poster wall ===== */
.tmdb-grid { display: grid; gap: 6px; }
.tmdb-tile { position: relative; border-radius: 7px; overflow: hidden; aspect-ratio: 2/3; background: rgba(18,26,44,.9); border: 1px solid var(--line); }
.tmdb-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tmdb-tile.tmdb-noart::before { content: '🎬'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.tmdb-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 5px 2px; font-size: 9.5px; font-weight: 600; color: #eaf3ff;
  background: linear-gradient(transparent, rgba(0,0,0,.85)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v4.80 — optional rating/year line under a poster title */
.tmdb-capsub { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 5px 3px; font-size: 8.5px; color: #ffd36b;
  background: rgba(0,0,0,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmdb-tile:has(.tmdb-capsub) .tmdb-cap { bottom: 14px; }
.plex-wall { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 7px; align-content: start; }
.plex-tile { position: relative; border-radius: 7px; overflow: hidden; aspect-ratio: 2/3; cursor: pointer;
  background: rgba(18,26,44,.9); border: 1px solid var(--line); }
.plex-tile:hover { border-color: rgba(229,160,13,.7); box-shadow: 0 0 12px rgba(229,160,13,.3); }
.plex-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plex-tile.plex-noart { display: flex; align-items: center; justify-content: center; }
.plex-tile.plex-noart::after { content: attr(data-t); font-size: 9px; color: var(--muted); padding: 6px; text-align: center; }
.plex-tcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 4px 3px; font-size: 8.5px; color: #eaf3ff;
  background: linear-gradient(transparent, rgba(0,0,0,.85)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== v4.33 — TikTok widget ===== */
.tk-feed { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; scrollbar-width: thin; height: 100%; }
.tk-item { position: relative; }
.tk-frame { width: 100%; height: 560px; max-height: 72vh; border: 0; border-radius: 10px; display: block; background: #000; }
.tk-x { position: absolute; top: 6px; right: 6px; z-index: 2; background: rgba(0,0,0,.6); border: 1px solid var(--line);
  color: #fff; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 12px; }
.tk-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 20px 10px; line-height: 1.6; }
.tk-empty small { opacity: .8; }
.tk-cap { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-cap b { color: rgb(var(--acc3)); }
/* compact list view of saved TikToks (v8.91) */
.tk-feed.tk-listmode { gap: 4px; }
.tk-lrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 6px 8px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid transparent; color: var(--ink); font: inherit; }
.tk-lrow:hover { background: rgba(var(--acc),.1); border-color: rgba(var(--acc),.3); }
.tk-lthumb { flex: none; width: 44px; height: 58px; border-radius: 7px; object-fit: cover; background: #12151f; display: block; }
.tk-lthumb-ph { background: linear-gradient(135deg, #ff0050 0%, #00f2ea 100%); opacity: .55; }
.tk-lmeta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tk-lmeta b { font-size: 13px; color: rgb(var(--acc3)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-lmeta i { font-style: normal; font-size: 11.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-lplay { flex: none; color: rgb(var(--acc)); font-size: 13px; padding: 0 2px; }
.tk-ldel { flex: none; color: #ff6b6b; font-size: 13px; padding: 0 4px; opacity: .7; }
.tk-ldel:hover { opacity: 1; }
.tk-playpanel .movie-panel-body { padding: 0; background: #000; }
.tk-playframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
/* 📘 Facebook video widget (v8.92) — reuses the TikTok list/player styles */
.tk-lthumb-fb { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px;
  background: linear-gradient(135deg, #1877f2 0%, #0a52c7 100%); opacity: 1; }
.fb-frame { height: 320px; max-height: 60vh; }
.fb-playpanel .movie-panel-body { padding: 0; background: #000; }
.fb-playframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
/* 📲 Facebook curated feed (v8.94) — reuses .ttfeed-scroll from the TikTok feed */
.fbfeed-panel .movie-panel-body { padding: 0; display: flex; flex-direction: column; background: #000; overflow: hidden; }
.fbv { position: relative; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fbv-frame { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.fbv-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 12px 16px 16px; color: #fff; font-size: 13px;
  background: linear-gradient(0deg, rgba(0,0,0,.72), transparent); text-shadow: 0 1px 4px rgba(0,0,0,.8); pointer-events: none; }
.fbv-cap b { font-weight: 700; }
.tk-trendbtn { width: 100%; font: inherit; font-size: 13px; font-weight: 600; padding: 10px 12px; margin-bottom: 8px; border-radius: 10px; cursor: pointer; flex: none;
  background: linear-gradient(90deg, rgba(255,0,80,.22), rgba(0,220,235,.18)); color: var(--ink); border: 1px solid rgba(var(--acc),.4); }
.tk-trendbtn:hover { background: linear-gradient(90deg, rgba(255,0,80,.34), rgba(0,220,235,.3)); }
/* 📱 TikTok TRENDING feed — inside a supplement window (v8.90) */
.ttfeed-panel .movie-panel-body { padding: 0; display: flex; flex-direction: column; background: #000; overflow: hidden; }
.ttfeed-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #0a0a12; border-bottom: 1px solid rgba(255,255,255,.1); }
.ttfeed-region { font: inherit; font-size: 12.5px; padding: 5px 9px; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22); outline: none; }
.ttfeed-region option { color: #111; }
.ttfeed-hint2 { font-size: 11px; color: rgba(255,255,255,.6); margin-left: auto; white-space: nowrap; }
.ttfeed-scroll { flex: 1 1 auto; min-height: 0; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: #000; }
.ttfeed-scroll::-webkit-scrollbar { display: none; }
.ttv { position: relative; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ttv-vid { width: 100%; height: 100%; object-fit: contain; background: #000; }
.ttv-cap { position: absolute; left: 0; right: 60px; bottom: 0; z-index: 2; padding: 14px 16px 18px; color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,.72), transparent); text-shadow: 0 1px 4px rgba(0,0,0,.8); pointer-events: none; }
.ttv-au { font-size: 14px; font-weight: 800; margin-bottom: 3px; }
.ttv-desc { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ttv-music { font-size: 11.5px; opacity: .85; margin-top: 4px; }
.ttv-stats { font-size: 11.5px; opacity: .9; margin-top: 6px; }
.ttv-mute { position: absolute; right: 10px; bottom: 16px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: rgba(20,20,26,.65); color: #fff; border: 1px solid rgba(255,255,255,.25); font-size: 18px; }
.ttv-save { position: absolute; right: 10px; bottom: 66px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: rgba(20,20,26,.65); color: #fff; border: 1px solid rgba(255,255,255,.25); font-size: 18px; }
.ttv-save:hover { background: rgba(var(--acc),.5); }
.ttv-save.ttv-saved { background: rgba(40,200,120,.7); border-color: rgba(120,255,180,.6); }
.ttfeed-spin, .ttfeed-err { color: #fff; text-align: center; padding: 30px 16px; font-size: 14px; line-height: 1.6; }

/* ===== v4.46 — Power Advisor ===== */
.en-advice { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.en-line { font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.en-strip { display: flex; align-items: flex-end; gap: 1px; height: 54px; padding: 3px 0; margin-top: 2px;
  background: rgba(255,255,255,.03); border-radius: 8px; overflow: hidden; }
.en-cell { flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0; opacity: .9; }
.en-cheap { background: #34d17a; }
.en-ok { background: #6b7fa8; }
.en-expensive { background: #ff5a5a; }
.en-negative { background: rgb(var(--acc)); }
.en-now { outline: 1px solid #fff; outline-offset: -1px; }
.en-hassun { box-shadow: inset 0 3px 0 rgba(255,208,64,.9); }
.en-legend { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; font-size: 10.5px; color: var(--muted); margin-top: 6px; }
.en-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 3px; vertical-align: -1px; }
.en-legend .en-sun { color: #ffd040; }
.en-actions { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.en-buy { font: inherit; font-size: 12.5px; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: rgba(229,160,13,.18); color: #ffcf6b; border: 1px solid rgba(229,160,13,.5); transition: background .15s; }
.en-buy:hover { background: rgba(229,160,13,.32); }
.en-buy:disabled { opacity: .5; cursor: default; }
.en-buystat { font-size: 11.5px; color: var(--muted); }

/* ===== v4.37 — NRL match-centre modal ===== */
.nrl-clk { cursor: pointer; } .nrl-clk:hover { background: rgba(var(--acc),.08); border-radius: 6px; }
.nrl-game { z-index: 94; width: min(480px, 92vw); height: min(640px, 84vh); top: 44%; display: flex; flex-direction: column; }
.nrl-game-body { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1 1 auto; }
/* v4.96 — NRL live indicator + match centre stats */
.nrl-livedot { color: #ff4d4d; font-weight: 800; font-size: 11px; letter-spacing: .03em; animation: nrlPulse 1.3s ease-in-out infinite; }
@keyframes nrlPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.nrl-row.nrl-live { background: rgba(255,77,77,.07); border-radius: 8px; }
.ng-headbtns { display: inline-flex; align-items: center; gap: 8px; }
.ng-count { font-size: 11px; color: #ff9b6b; font-variant-numeric: tabular-nums; }
.ng-rf { background: none; border: 0; cursor: pointer; font-size: 15px; }
.ng-rf.spin { animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ng-scorers { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #cfe0f5; padding: 2px 2px 6px; }
.ng-scorers div { flex: 1; }
.ng-scorers div:last-child { text-align: right; }
.ng-sect { margin-top: 4px; }
.ng-sect h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; opacity: .7; margin: 6px 0 6px; }
.ng-stat { display: grid; grid-template-columns: 44px 1fr 44px; grid-template-rows: auto auto; gap: 2px 8px; font-size: 12px; margin-bottom: 7px; align-items: center; }
.ng-stat-h { text-align: left; font-weight: 700; } .ng-stat-a { text-align: right; font-weight: 700; }
.ng-stat-t { text-align: center; color: var(--muted); font-size: 11px; }
.ng-stat-bar { grid-column: 1/-1; height: 4px; border-radius: 2px; background: rgba(255,120,120,.35); overflow: hidden; }
.ng-stat-bar i { display: block; height: 100%; background: rgb(var(--acc)); }
.ng-plgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ng-plteam h5 { font-size: 12px; margin: 0 0 5px; color: #eaf1ff; }
.ng-pl { display: flex; flex-direction: column; gap: 1px; padding: 4px 0; border-bottom: 1px solid rgba(120,160,220,.1); }
.ng-pl-n { font-size: 12px; } .ng-pl-n i { font-style: normal; opacity: .55; }
.ng-pl-s { font-size: 11px; color: var(--muted); }
.ng-note { font-size: 12px; opacity: .6; padding: 4px 2px; }
/* v6.09 — NRL play-by-play feed */
.ng-tl-list { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; gap: 1px; }
.ng-tl-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 4px; border-bottom: 1px solid rgba(140,160,200,.08); font-size: 12.5px; }
.ng-tl-row.ng-tl-big { background: rgba(74,222,128,.08); border-radius: 6px; }
.ng-tl-min { flex: 0 0 34px; color: var(--muted); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.ng-tl-ic { flex: 0 0 auto; font-size: 13px; }
.ng-tl-tx { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.ng-tl-tx i { font-style: normal; opacity: .6; }
.ng-tl-sc { color: rgb(var(--acc2)); font-weight: 700; font-variant-numeric: tabular-nums; }
.ng-teams { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; }
.ng-team { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; text-align: center; }
.ng-team .nrl-badge { width: 54px; height: 54px; }
.ng-team b { font-size: 12.5px; }
.ng-score { font-size: 24px; font-weight: 800; color: rgb(var(--acc)); }
.ng-vs { font-size: 13px; font-weight: 700; color: var(--muted); flex: 0 0 auto; }
.ng-rows { display: flex; flex-direction: column; gap: 2px; }
.ng-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 2px; border-bottom: 1px solid rgba(120,160,220,.12); }
.ng-row span { color: var(--muted); } .ng-row b { text-align: right; }
.ng-link { margin: 8px 0 0; font-size: 13px; } .ng-link a { color: rgb(var(--acc3)); }

/* v4.39 — widget title bars are grab handles at all times */
#widgets .wdg-free .res-card-head { cursor: move; }
#widgets .wdg-free.dragging { opacity: .9; }

/* ===== v4.40 — new colour-channelling MAX logo (top-centre) + Widgets mini-menu (top-right) ===== */
.head[hidden] { display: none !important; }
/* v4.41 — waveform reconnected: aurora flows BEHIND the glowing MAX wordmark */
#waveCanvas { opacity: .8; }
#maxHero { position: fixed; top: 9px; left: 50%; transform: translateX(-50%); z-index: 116; pointer-events: none;
  font-weight: 800; font-size: 26px; letter-spacing: .30em; text-indent: .30em; white-space: nowrap;
  background: linear-gradient(100deg, rgb(var(--acc)) 0%, #4aa3e8 20%, #c86bff 40%, #ff7ac6 55%, #4ade80 75%, rgb(var(--acc)) 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: maxFlow 5s linear infinite; filter: drop-shadow(0 0 10px rgba(var(--acc),.45)); }
@keyframes maxFlow { from { background-position: 0% 0; } to { background-position: 300% 0; } }
@media (max-width: 680px) { #maxHero { font-size: 20px; } }
body.ipad-pro #maxHero { top: 56px; }
/* Widgets mini-menu button (top-right, matches ☰ Menu) */
.wdgmenu-btn { position: fixed; top: 16px; right: 16px; left: auto; z-index: 121; }
body.ipad-pro .wdgmenu-btn { top: 60px; }
.wdgmenu-bar { position: fixed; top: 54px; right: 16px; left: auto; z-index: 121; flex-direction: column; align-items: stretch;
  max-height: 70vh; overflow-y: auto; scrollbar-width: thin; min-width: 210px; }
body.ipad-pro .wdgmenu-bar { top: 98px; }
.wdgmenu-item { display: flex !important; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 11px; }
.wdgmenu-item .wm-ic { width: 20px; text-align: center; }
.wdgmenu-item .mbi-label { flex: 1; }
/* v4.42 — plain [icon][name] list; ones already on screen are greyed out */
.wdgmenu-item.wdgmenu-on { opacity: .4; }
.wdgmenu-item.wdgmenu-on .mbi-label { text-decoration: line-through; }
/* v4.61 — Widgets DOCK: circular Material-Symbol icons down the right edge (off-screen widgets) */
/* v5.57 — widgets menu: search + all widgets grouped (on-state highlighted) + Settings section, responsive */
/* v5.62 — the dock now drops down from the top-left ☰ Menu (was a separate top-right panel). */
.wdg-dock { position: fixed; left: 16px; right: auto; top: 60px; z-index: 118; max-height: calc(100vh - 76px);
  display: flex; flex-direction: column; gap: 8px; pointer-events: auto;
  background: rgba(10,16,30,.96); border: 1px solid rgba(120,160,220,.25); border-radius: 16px; padding: 10px; box-shadow: 0 16px 46px rgba(0,0,0,.55); }
.wdg-dock[hidden] { display: none; }
body.ipad-pro .wdg-dock { top: 104px; }
.wdg-dock-search { flex: 0 0 auto; }
.wdg-dock-sin { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid var(--line); }
.wdg-dock-scroll { overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
/* v10.37 — 🖥 Set display (top of the ☰ menu) */
.wdg-dock-display { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; padding: 10px; margin-bottom: 8px; border-radius: 11px; background: rgba(120,160,220,.07); border: 1px solid var(--line); }
.wdg-dock-display.is-extra { background: rgba(255,158,90,.1); border-color: rgba(255,158,90,.4); }
.wdd-lbl { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.wdd-sel { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; font-weight: 700; padding: 8px 10px; border-radius: 9px; background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid rgba(var(--acc),.4); cursor: pointer; }
.wdg-dock-display.is-extra .wdd-sel { border-color: rgba(255,158,90,.55); }
.wdd-hint { font-size: 11px; color: var(--muted); line-height: 1.4; }
/* persistent corner badge on an extra monitor */
#displayBadge { position: fixed; left: 10px; bottom: 10px; z-index: 99990; font-size: 11.5px; font-weight: 700; color: #ffcf9e; background: rgba(28,20,12,.9); border: 1px solid rgba(255,158,90,.5); border-radius: 999px; padding: 5px 12px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.4); pointer-events: auto; }
#displayBadge:hover { background: rgba(40,28,16,.95); }
/* extra monitors: no mic/voice UI (voice is Primary-only) */
body.max-extra #orb, body.max-extra #activate { display: none !important; }
/* v5.64 — neutral group headers (colours dropped) */
.wdg-dock-gh { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin: 9px 0 3px; padding-left: 7px; border-left: 3px solid rgba(120,160,220,.4); color: #9fb2d8; }
.wdg-dock-gh-settings { color: #9fb2d8; margin-top: 12px; }
.wdg-dock-grp { display: flex; flex-direction: column; gap: 3px; }
/* v5.64 — square, neutral chips (no per-group colour). Position:relative so the status dot can sit in the corner. */
.wdg-dot { position: relative; pointer-events: auto; cursor: pointer; display: flex; align-items: center; padding: 0;
  background: rgba(18,26,44,.9); border: 1px solid var(--line); color: #cfe0f5;
  transition: background .15s, border-color .15s, filter .12s; }
.wdg-dot:hover { filter: brightness(1.18); border-color: rgba(var(--acc),.6); }
.wdg-dot .material-symbols-outlined { font-size: 22px; flex: 0 0 auto; }
.wdg-dot.wdg-on { border-color: rgba(58,208,122,.55); }
.wdg-dot-set { color: #cfe0f5 !important; border-color: var(--line) !important; }
/* v5.64 — status dot: green = on screen, red = off. Widget chips only (settings items have no dot). */
.wdg-dot-st { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(10,16,30,.9); }
.wdg-dot-st.on { background: #3ad07a; box-shadow: 0 0 0 1.5px rgba(10,16,30,.9), 0 0 6px rgba(58,208,122,.8); }
.wdg-dot-st.off { background: #ff5a5a; }
.wdg-dock-phone .wdg-dot-st { top: 4px; right: 4px; }
/* v7.02 — ⭐ favourite star on each widget chip/row */
.wdg-fav { cursor: pointer; color: #55647f; font-size: 13px; line-height: 1; user-select: none; }
.wdg-fav.on, .wdg-fav:hover { color: #ffd54a; }
.wdg-dock-desktop .wdg-dot { position: relative; }
.wdg-dock-desktop .wdg-fav { position: absolute; bottom: 2px; right: 4px; opacity: .3; transition: opacity .12s; }
.wdg-dock-desktop .wdg-dot:hover .wdg-fav, .wdg-dock-desktop .wdg-fav.on { opacity: 1; }
.wdg-dock-phone .wdg-fav, .wdg-dock-ipad .wdg-fav { flex: 0 0 auto; margin-left: 6px; padding: 2px 4px; opacity: .55; }
.wdg-dock-phone .wdg-fav.on, .wdg-dock-ipad .wdg-fav.on { opacity: 1; }
/* v5.63/64 — horizontal width: each group's widgets wrap as compact [icon] name square chips, far less scrolling. */
.wdg-dock-desktop { width: auto; max-width: min(92vw, 760px); }
.wdg-dock-desktop .wdg-dock-grp { display: flex; flex-flow: row wrap; gap: 6px; }
.wdg-dock-desktop .wdg-dot { width: auto; height: auto; border-radius: 10px; justify-content: flex-start; gap: 7px; padding: 7px 14px 7px 12px; }
.wdg-dock-desktop .wdg-dot .material-symbols-outlined { font-size: 20px; }
.wdg-dock-desktop .wdg-dot-lbl { font-size: 12.5px; white-space: nowrap; }
.wdg-dock-ipad { width: auto; max-width: min(94vw, 580px); }
.wdg-dock-ipad .wdg-dock-grp { display: flex; flex-flow: row wrap; gap: 5px; }
.wdg-dock-ipad .wdg-dot { width: auto; height: auto; border-radius: 9px; justify-content: flex-start; gap: 6px; padding: 6px 12px 6px 10px; }
.wdg-dock-ipad .wdg-dot .material-symbols-outlined { font-size: 18px; }
.wdg-dock-ipad .wdg-dot-lbl { font-size: 12px; white-space: nowrap; }
.wdg-dock-phone { width: auto; }
.wdg-dock-phone .wdg-dock-scroll { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 8px; max-width: 250px; }
.wdg-dock-phone .wdg-dock-gh { display: none; }
.wdg-dock-phone .wdg-dock-grp { display: contents; }
.wdg-dock-phone .wdg-dot { width: 46px; height: 46px; border-radius: 12px; justify-content: center; }
.wdg-dock-empty { pointer-events: auto; font-size: 11.5px; color: var(--muted); background: rgba(18,26,44,.88);
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; max-width: 150px; text-align: center; }
/* v4.69 — arrangement-preset controls on the widgets dock */
.wdg-dot-act { font-size: 20px; background: rgba(var(--acc),.16); border-color: rgba(var(--acc),.5); }
.wdg-dot-act:hover { background: rgba(var(--acc),.32); }
/* v5.58 — resizable Settings window */
#cfg .cfg-panel { position: relative; }
.cfg-resize { position: absolute; right: 3px; bottom: 3px; width: 20px; height: 20px; cursor: nwse-resize; z-index: 6; touch-action: none;
  background: linear-gradient(135deg, transparent 42%, rgba(var(--acc),.55) 42%, rgba(var(--acc),.55) 58%, transparent 58%, transparent 72%, rgba(var(--acc),.55) 72%, rgba(var(--acc),.55) 88%, transparent 88%); }
.wdg-preset-pop { position: fixed; right: 16px; top: 56px; z-index: 122; min-width: 190px; max-width: 250px; max-height: 60vh; overflow-y: auto;
  background: rgba(10,16,30,.98); border: 1px solid rgba(var(--acc),.5); border-radius: 12px; padding: 8px; box-shadow: 0 16px 50px rgba(0,0,0,.6); }
body.ipad-pro .wdg-preset-pop { top: 100px; }
.wpp-h { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 3px 6px 8px; }
.wpp-row { display: flex; gap: 4px; align-items: stretch; }
.wpp-row + .wpp-row { margin-top: 4px; }
.wpp-open { flex: 1; text-align: left; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 9px; cursor: pointer;
  background: rgba(18,26,44,.85); color: var(--ink); border: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpp-open:hover { background: rgba(var(--acc),.18); border-color: rgba(var(--acc),.45); }
.wpp-del { font-size: 11px; padding: 0 9px; border-radius: 9px; cursor: pointer; background: none; color: var(--muted); border: 1px solid var(--line); }
.wpp-del:hover { color: #ff8a8a; }
/* v6.03 — rename control in the Open-arrangement list */
.wpp-ren { font-size: 11px; padding: 0 9px; border-radius: 9px; cursor: pointer; background: none; color: var(--muted); border: 1px solid var(--line); }
.wpp-ren:hover { color: rgb(var(--acc2)); border-color: rgba(var(--acc),.45); }
.wpp-renin { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 7px 9px; border-radius: 9px; background: rgba(10,20,38,.92); color: #eaf1ff; border: 1px solid rgba(120,150,255,.6); }
.wpp-renin:focus { outline: none; }
/* v6.03 — Save arrangement as a movable/resizable floating panel (overrides .cal-panel sizing) */
.movie-panel.wps-float { width: min(420px, 92vw); height: auto; max-height: 82vh; }

/* ===== v4.41 — version/widgets spacing, movable+smaller scan box, scan widget ===== */
#verBtn { right: 150px; }
.scan-box { max-width: 410px !important; }
.scan-head { cursor: move; }
#scan .scan-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; }
@media (max-width: 560px){ #scan .scan-checks { grid-template-columns: 1fr; } }
.scan-wtip { font-size: 11.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
/* 🏷 OzBargain deals (v4.42) */
.ozb-row { display: block; text-decoration: none; color: inherit; padding: 8px 4px; border-bottom: 1px solid rgba(120,160,220,.1); }
.ozb-row:last-child { border-bottom: 0; }
.ozb-row:hover { background: rgba(120,160,220,.08); border-radius: 8px; }
.ozb-t { font-size: 12.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ozb-m { display: flex; gap: 8px; align-items: center; margin-top: 3px; font-size: 10.5px; color: var(--muted); }
.ozb-dept { color: #f59e0b; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
/* v6.60 — free Steam game deal: pinned to the top with a green FREE GAME badge + subtle highlight */
.ozb-row.ozb-free { background: rgba(40,220,140,.10); border-left: 3px solid rgba(40,220,140,.6); border-radius: 8px; padding-left: 7px; }
.ozb-freebadge { display: inline-block; background: #16a34a; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .3px; padding: 1px 6px; border-radius: 7px; margin-right: 5px; vertical-align: 1px; }
.ozb-ago { margin-left: auto; }

/* ===== v7.84 — Feeds (RSS/Atom) widget ===== */
.feed-list { display: block; }
.feed-row { display: block; text-decoration: none; color: inherit; padding: 8px 4px; border-bottom: 1px solid rgba(120,160,220,.1); }
.feed-row:last-child { border-bottom: 0; }
.feed-row:hover { background: rgba(120,160,220,.08); border-radius: 8px; }
.feed-t { font-size: 12.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feed-m { display: flex; gap: 8px; align-items: center; margin-top: 3px; font-size: 10.5px; color: var(--muted); }
.feed-src { color: var(--acc); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62%; }
.feed-ago { margin-left: auto; white-space: nowrap; }
.feed-empty { padding: 10px 6px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.feed-empty code { background: rgba(120,160,220,.14); padding: 1px 5px; border-radius: 5px; font-size: 11px; }

/* ===== v4.44 — MAX Skills catalogue ===== */
.skills-panel { width: min(760px, 94vw); max-height: 86vh; display: flex; flex-direction: column; }
.skills-search { margin: 4px 0 10px; width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
  padding: 9px 13px; border-radius: 999px; background: rgba(18,26,44,.9); color: var(--ink);
  border: 1px solid var(--line); outline: none; }
.skills-search:focus { border-color: rgba(46,140,255,.6); box-shadow: 0 0 10px rgba(var(--acc),.22); }
.skills-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.skill-tab { font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); transition: background .15s, border-color .15s; white-space: nowrap; }
.skill-tab:hover { background: rgba(40,60,90,.9); }
.skill-tab.on { border-color: rgba(var(--acc),.7); color: #bff3ff; background: rgba(var(--acc),.14); box-shadow: 0 0 12px rgba(var(--acc),.25); }
.skills-body { overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
.skill-group { margin-bottom: 18px; }
.skill-group h3 { margin: 0 0 9px; font-size: 12px; color: rgb(var(--acc3)); text-transform: uppercase; letter-spacing: .8px; opacity: .9; }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 9px; }
.skill-card { display: flex; gap: 11px; align-items: flex-start; padding: 11px 12px; border-radius: 13px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(120,160,220,.14); transition: border-color .15s, background .15s; }
.skill-card:hover { border-color: rgba(var(--acc),.4); background: rgba(var(--acc),.06); }
.skill-ic { font-size: 22px; line-height: 1.2; flex: 0 0 auto; }
.skill-txt { min-width: 0; }
.skill-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.skill-say { font-size: 11.5px; color: #7dffa8; font-style: italic; margin-top: 1px; word-break: break-word; }
.skill-desc { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.skill-foot { text-align: center; font-size: 11.5px; color: var(--muted); padding: 6px 0 2px; }
/* v9.56 — widget-centric Skills: cards are buttons; each opens a command-detail view */
button.skill-card { cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
.skill-cmdn { font-size: 11px; color: rgb(var(--acc2)); margin-top: 5px; font-weight: 600; }
.skill-detail { padding: 2px; }
.skill-back { font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 8px; cursor: pointer; background: rgba(255,255,255,.06); color: var(--fg); border: 1px solid rgba(255,255,255,.16); margin-bottom: 12px; }
.skill-back:hover { background: rgba(255,255,255,.14); }
.skill-dhead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.skill-dic { font-size: 34px; line-height: 1; }
.skill-dname { font-size: 18px; font-weight: 800; }
.skill-ddesc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.skill-sec { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--acc2)); margin: 16px 0 8px; }
.skill-cmds { display: flex; flex-direction: column; gap: 7px; }
.skill-cmd { padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(120,160,220,.14); }
.skill-cmd b { display: block; font-size: 13.5px; color: #bff3ff; font-weight: 700; }
.skill-cmd span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.skill-none { font-size: 12.5px; color: var(--muted); padding: 6px 2px; }
.skill-dfoot { font-size: 11px; color: var(--muted); opacity: .8; margin-top: 16px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; }
.wopt-cmd-more { margin-top: 8px; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; background: rgba(var(--acc),.14); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.4); }
.wopt-cmd-more:hover { background: rgba(var(--acc),.28); }

/* ===== v4.50 — hand-gesture control ===== */
.hg-panel { position: fixed; right: 16px; bottom: 16px; z-index: 130; width: 260px; cursor: move;
  background: rgba(10,16,30,.97); border: 1px solid rgba(var(--acc),.5); border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 44px rgba(0,0,0,.6); }
.hg-panel[hidden] { display: none; }
.hg-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 12.5px; color: rgb(var(--acc2)); }
.hg-x { background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer; }
.hg-x:hover { color: var(--ink); }
.hg-stage { position: relative; background: #000; aspect-ratio: 4 / 3; }
.hg-stage video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.hg-badge { position: absolute; left: 8px; bottom: 8px; font-size: 30px; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.hg-legend { font-size: 10px; color: var(--muted); padding: 7px 12px 9px; line-height: 1.5; }
.hg-resize { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; cursor: nwse-resize; z-index: 4; touch-action: none;
  background: linear-gradient(135deg, transparent 45%, rgba(var(--acc),.55) 45%, rgba(var(--acc),.55) 62%, transparent 62%, transparent 74%, rgba(var(--acc),.55) 74%, rgba(var(--acc),.55) 90%, transparent 90%); }
.hg-resize:hover { background: linear-gradient(135deg, transparent 45%, rgba(var(--acc),.95) 45%, rgba(var(--acc),.95) 62%, transparent 62%, transparent 74%, rgba(var(--acc),.95) 74%, rgba(var(--acc),.95) 90%, transparent 90%); }
@media (max-width: 560px) { .skill-grid { grid-template-columns: 1fr; } }

/* ===== v4.54 — Screen Sets ===== */
.ss-panel { width: min(560px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.ss-cur { display: flex; align-items: baseline; gap: 12px; padding: 12px 14px; margin-bottom: 12px;
  background: rgba(var(--acc),.08); border: 1px solid rgba(var(--acc),.3); border-radius: 12px; }
.ss-cur-h { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.ss-cur-res { font-size: 22px; font-weight: 800; color: #bff3ff; margin-left: auto; }
.ss-cur-res small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.ss-auto { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; cursor: pointer; line-height: 1.4; }
.ss-auto input { width: 16px; height: 16px; flex: none; }
.ss-list { overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 8px; }
.ss-empty { font-size: 13px; color: var(--muted); line-height: 1.6; padding: 8px 4px; }
/* v9.00 — COMPACT TABLE: one tight row per profile (caret · info · buttons); the editable detail drops
   below on its own full-width grid row when expanded. Reads as a neat table instead of a stack of cards. */
.ss-row { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; column-gap: 10px; row-gap: 4px;
  padding: 7px 11px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(120,160,220,.16); }
.ss-row.active { border-color: rgba(var(--acc),.6); background: rgba(var(--acc),.08); }
.ss-exp { grid-column: 1; width: 22px; height: 22px; padding: 0; border-radius: 6px; cursor: pointer; font-size: 11px; line-height: 1;
  background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); }
.ss-exp:hover { background: rgba(40,60,90,.9); }
.ss-info { grid-column: 2; min-width: 0; cursor: pointer; }
.ss-btns { grid-column: 3; }
.ss-sub { font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-detail { grid-column: 1 / -1; display: none; padding-top: 2px; }
.ss-row.open .ss-detail { display: block; }
.ss-detrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ss-btns2 { display: flex; gap: 5px; }
.ss-name { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v5.65 — resolution + frame(yes/no) tag shown next to the profile name */
.ss-nres { font-size: 10.5px; font-weight: 600; color: rgb(var(--acc3)); background: rgba(46,140,255,.14);
  border: 1px solid rgba(46,140,255,.35); border-radius: 999px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; }
.ss-meta { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
/* v5.49 — editable resolution range + label per profile */
.ss-range { font-size: 11px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ss-range input { font: inherit; font-size: 11.5px; padding: 3px 6px; border-radius: 7px; background: rgba(10,20,38,.9); color: #eaf1ff; border: 1px solid var(--line); }
.ss-range .ss-min, .ss-range .ss-max { width: 62px; text-align: center; }
.ss-range .ss-label { width: 130px; }
/* v7.93 — Screen Profiles: per-profile descriptive fields (Label · Screen size · Resolution · Zoom · Orientation · Arrangement) */
.ss-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 8px; margin-top: 8px; }
.ss-f { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-f > span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ss-fld { box-sizing: border-box; width: 100%; font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 8px;
  background: rgba(10,20,38,.9); color: #eaf1ff; border: 1px solid var(--line); }
.ss-fld:focus { outline: none; border-color: rgba(var(--acc),.6); }
.ss-fwide { grid-column: 1 / -1; }
.ss-fnote { resize: vertical; min-height: 38px; line-height: 1.35; }
.ss-cur-active { font-size: 12px; color: rgb(var(--acc2)); margin-top: 4px; }
.ss-badge { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; padding: 1px 7px; border-radius: 999px;
  background: rgba(var(--acc),.2); color: rgb(var(--acc2)); vertical-align: middle; }
.ss-badge.ss-fit { background: rgba(74,222,128,.2); color: #7dffa8; }
.ss-badge.ss-role { background: rgba(255,158,90,.2); color: #ffcf9e; text-transform: none; letter-spacing: 0; }
.ss-btns { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.ss-b { font: inherit; font-size: 11.5px; padding: 5px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(18,26,44,.85); color: rgb(var(--acc3)); border: 1px solid var(--line); }
.ss-b:hover { background: rgba(40,60,90,.9); }
.ss-b.ss-apply { background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border-color: rgba(var(--acc),.45); }
.ss-b.ss-del { color: #ff8a8a; }
.ss-saveas { margin-top: 12px; font: inherit; font-size: 13px; padding: 10px; border-radius: 12px; cursor: pointer;
  background: rgba(var(--acc),.14); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); width: 100%; }
.ss-saveas:hover { background: rgba(var(--acc),.28); }
.ss-note { font-size: 11px; color: var(--muted); line-height: 1.55; margin-top: 10px; }
/* v9.00 — RECOVER OLD ARRANGEMENTS block (pull lost profiles back from the old 💾 arrangements) */
.ss-recover { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(46,140,255,.06); border: 1px dashed rgba(46,140,255,.4); }
.ssr-h { font-size: 12.5px; font-weight: 700; color: rgb(var(--acc3)); }
.ssr-c { font-size: 10.5px; background: rgba(46,140,255,.2); border-radius: 999px; padding: 0 7px; margin-left: 4px; }
.ssr-sub { font-size: 11px; color: var(--muted); margin: 3px 0 8px; line-height: 1.4; }
.ssr-list { display: flex; flex-direction: column; gap: 5px; }
.ssr-row { display: flex; align-items: center; gap: 10px; }
.ssr-name { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssr-add, .ssr-addall { font: inherit; font-size: 11.5px; padding: 4px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  background: rgba(var(--acc),.16); color: rgb(var(--acc2)); border: 1px solid rgba(var(--acc),.45); }
.ssr-add:hover, .ssr-addall:hover { background: rgba(var(--acc),.28); }
.ssr-addall { width: 100%; margin-top: 8px; }
/* ===== v4.43 — header polish: status + heard text live in blue pills; fix ✕/version overlap ===== */
@media (min-width: 681px) {
  /* "Listening… say MAX" now sits in a rounded blue pill, matching the header buttons */
  .wave-status { flex: 0 0 auto; box-sizing: border-box; max-width: 300px; overflow: hidden;
    background: rgba(18,26,44,.85); border: 1px solid var(--line); border-radius: 999px;
    padding: 5px 14px; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: none; color: rgb(var(--acc3)); }
  .wave-status .ws-inner { display: inline-block; max-width: 100%; }
  .ws-ch { color: rgb(var(--acc3)); text-shadow: none; letter-spacing: normal; }
  .ws-count { border-color: rgba(46,140,255,.5); background: rgba(40,60,90,.6); color: #cfe4ff; text-shadow: none; }
  /* what you just said gets its own matching blue pill on the right */
  .wave-heard { flex: 0 0 auto; box-sizing: border-box; max-width: 300px;
    background: rgba(18,26,44,.85); border: 1px solid var(--line); border-radius: 999px;
    padding: 5px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12.5px; font-style: normal; color: rgb(var(--acc3)); text-shadow: none; }
  .wave-heard:empty { opacity: 0; border-color: transparent; background: transparent; padding: 0; }
}
/* the ✕ / ✎ Edit button group clears the version pill (which can be ~120px wide) */
.hdr-btns { right: 300px; }
/* ════════════════ v6.18 MOBILE MODE — iPhone (16 Pro Max ~440×956) & other phones ════════════════
   Everything is clamped to the viewport so nothing overflows sideways; widgets stack vertically;
   a widget nav strip sits under the header; the ☰ menu becomes a scrollable labelled list. */
html { overflow-x: hidden; }
body.max-phone { overflow-x: hidden; max-width: 100vw; font-size: 14px; }
/* ---- global: NOTHING is wider than the screen ---- */
body.max-phone .movie-panel, body.max-phone .cal-modal, body.max-phone .cal-panel, body.max-phone #fileViewer,
body.max-phone .fuel-map, body.max-phone .wdg-preset-pop, body.max-phone #cinemaPanel, body.max-phone .cam-view,
body.max-phone .cam-add-panel, body.max-phone .file-viewer, body.max-phone .wps-float, body.max-phone .flight-modal,
body.max-phone .movie-panel.game-panel {
  left: 6px !important; right: 6px !important; width: auto !important; max-width: calc(100vw - 12px) !important;
  top: calc(env(safe-area-inset-top) + 92px) !important; bottom: auto !important; max-height: 78dvh !important; transform: none !important; z-index: 196 !important;
}
/* opaque header backdrop so scrolled widget content can't show through the gaps between the header buttons */
body.max-phone::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: calc(env(safe-area-inset-top) + 84px);
  background: rgba(6,10,20,.97); z-index: 185; pointer-events: none; }
/* v6.25 — supplements open INLINE in the widget stack (below their parent), full-width, NO resize */
body.max-phone .wdg-supp-inline { position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; transform: none !important; margin: 0 !important; z-index: auto !important; border-radius: 12px !important; }
body.max-phone .wdg-supp-inline .fuel-map-grip { display: none !important; }
body.max-phone .wdg-supp-inline .movie-panel-body, body.max-phone .wdg-supp-inline .cal-panel-body { max-height: none !important; }
/* panels built around an iframe need an explicit height when they flow inline */
body.max-phone .wdg-supp-inline.file-viewer, body.max-phone .wdg-supp-inline.cam-view { height: 60vh !important; }
body.max-phone .wdg-supp-inline .fv-frame, body.max-phone .wdg-supp-inline .cam-frame { min-height: 240px; }
/* nothing inside a supplement may overflow sideways; button rows wrap and buttons shrink to fit */
body.max-phone .wdg-supp-inline, body.max-phone .wdg-supp-inline .movie-panel-body, body.max-phone .wdg-supp-inline .ytp-body { overflow-x: hidden !important; }
body.max-phone .wdg-supp-inline .plex-tv-bar, body.max-phone .wdg-supp-inline .ytp-bar, body.max-phone .wdg-supp-inline .mv-acts,
body.max-phone .wdg-supp-inline .cam-form, body.max-phone .wdg-supp-inline .wps-actions { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
body.max-phone .wdg-supp-inline .plex-tv-btn, body.max-phone .wdg-supp-inline .plex-jump, body.max-phone .wdg-supp-inline .mv-btn { font-size: 12px !important; padding: 6px 10px !important; max-width: 100% !important; }
body.max-phone .wdg-supp-inline video, body.max-phone .wdg-supp-inline iframe, body.max-phone .wdg-supp-inline img { max-width: 100% !important; }
/* settings + any full modal panel → near-fullscreen sheet on phone */
body.max-phone .cfg-overlay { padding: 0 !important; }
/* v6.29 — the settings overlay was z-index:40, i.e. BEHIND the widget board (z50), the ☰ menu (z130)
   and the header (z200), so on a phone it opened hidden behind everything. Lift every full modal above
   all mobile layers, and make the main Settings (#cfg — transparent + click-through on desktop) an OPAQUE,
   tap-blocking full-screen sheet so the widgets are covered/hidden while it's open. */
body.max-phone .cfg-overlay { z-index: 250 !important; }
body.max-phone #cfg { z-index: 250 !important; background: rgba(4,7,15,.99) !important; backdrop-filter: blur(2px) !important; pointer-events: auto !important; padding: 0 !important; }
body.max-phone .cfg-panel, body.max-phone .cfg-panel.cfg-wide, body.max-phone .cfg-panel.hadev-panel, body.max-phone .cfg-panel.hagrp-panel {
  width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important;
  border-radius: 0 !important; margin: 0 !important; padding: calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px) !important; overflow-y: auto; }
body.max-phone .cfg-layout { flex-direction: column; }
body.max-phone .cfg-nav { flex-direction: row; flex-wrap: wrap; width: auto; }
body.max-phone .viewer-modal, body.max-phone .img-modal, body.max-phone .cal-modal { max-width: calc(100vw - 12px) !important; }
body.max-phone img, body.max-phone iframe, body.max-phone canvas { max-width: 100%; }

/* ---- hide desktop header chrome on phone: the round-icon topbar + edit-button cluster + fullscreen ---- */
body.max-phone .topbar { display: none !important; }
body.max-phone #hdrBtns { display: none !important; }
body.max-phone #hdrFsBtn, body.max-phone #fsBtn, body.max-phone .fs-btn { display: none !important; }
/* ═══ layers (mobile): header 200 · nav 190 · menu 130 · board 50 ═══ */
/* ---- header: ROW 1 = MAX logo/title, ROW 2 = ☰ MENU · mic · version · 💾 · 📂 ---- */
body.max-phone #maxHero { top: calc(env(safe-area-inset-top) + 6px) !important; left: 50% !important; transform: translateX(-50%) !important; font-size: 24px !important; z-index: 200 !important; }
body.max-phone #wave { top: calc(env(safe-area-inset-top) + 6px) !important; left: 10px !important; right: auto !important; width: 84px !important; height: 32px !important; z-index: 200 !important; }
body.max-phone #hdrMicBtn { display: none !important; }   /* one mute is enough on a phone */
body.max-phone .ver-btn { font-size: 11px !important; padding: 5px 7px !important; }
body.max-phone #hdrSaveArr, body.max-phone #hdrOpenArr { padding: 5px 8px !important; }
/* v6.30 — [↑ Top] button is phone-only (desktop keeps its fixed header controls) */
.hdr-top { display: none; }
/* v6.30 — row 2 = ONE neat flex line: [☰ Menu (grows to fill)] · [↑ Top] · [🤖] · [ver · 💾 · 📂].
   #phoneHdrRow is built by layoutPhoneHeader() which reparents the fixed header controls into it on phone. */
body.max-phone #phoneHdrRow { position: fixed; top: calc(env(safe-area-inset-top) + 44px); left: 8px; right: 8px; z-index: 201;
  display: flex; align-items: center; gap: 6px; }
body.max-phone #phoneHdrRow > * { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; margin: 0 !important; transform: none !important; }
body.max-phone #phoneHdrRow #menuBtn { flex: 1 1 auto; text-align: center; font-size: 13px !important; padding: 6px 12px !important; }   /* grows to fill the line */
body.max-phone #phoneHdrRow #hdrTopBtn { flex: 0 0 auto; display: inline-flex !important; align-items: center; font-size: 13px !important; padding: 6px 12px !important; }
body.max-phone #phoneHdrRow #hdrSpkBtn { flex: 0 0 auto; }
body.max-phone #phoneHdrRow #hdrRight { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px !important; }
/* kill the footer version pill that ghosts near the top on phone */
body.max-phone .foot, body.max-phone #footVer { display: none !important; }

/* ---- the WIDGET BOARD is the scroller (fixed, below the header → its content is clipped below the header,
        so nothing can ever paint over the header). The orb sits fixed BEHIND it and shows through the
        stack's transparent top padding, so widgets appear BELOW the orb. ---- */
body.max-phone { overflow: hidden !important; height: 100dvh; }
body.max-phone .stage { min-height: 0 !important; padding-top: 0 !important; }
/* v6.28 — the orb + "Activate" text are hidden on phones; a compact "Push to talk" button (#pttBtn) replaces them. */
body.max-phone .orb-wrap { display: none !important; }
body.max-phone #widgets.wdg-phone { position: fixed !important; top: calc(env(safe-area-inset-top) + 84px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 50 !important; overflow-y: auto !important; overflow-x: hidden !important; background: transparent !important; }
body.max-phone #widgets.wdg-phone .res-zone { position: static !important; width: 100% !important; left: auto !important; right: auto !important; transform: none !important; display: block !important; padding: 0 !important; }
body.max-phone #widgets.wdg-phone .res-right { display: none !important; }
body.max-phone .wdg-stack { display: flex; flex-direction: column; gap: 20px; width: 100%;
  padding: 100px 8px calc(env(safe-area-inset-bottom) + 60px); box-sizing: border-box; }   /* v7.20 — top band fits the 2× Hold-to-talk button, centred in the gap by pttPlace() */
body.max-phone .wdg-stacked { position: static !important; width: 100% !important; max-width: 100% !important; left: auto !important; top: auto !important;
  height: auto !important; min-height: 0 !important; transform: none !important; box-sizing: border-box; }
body.max-phone .wdg-stacked .res-card-body { max-height: 70vh; overflow-y: auto; overflow-x: hidden; }
body.max-phone .wdg-stacked .wdg-resize { display: none !important; }   /* no manual resize on phone */

/* ═══ v6.61 — iPad Pro (landscape): a fixed-size, multi-column TILED board that scrolls, keeping the
   desktop header. Cards flow into 2–3 columns (masonry-style via CSS multicol); no manual resize. ═══ */
/* v7.23 — the iPad board is IN-FLOW and the PAGE scrolls. Tristan's finger was rubber-banding the
   document while the fixed inner scroller sat still: iPadOS WebKit would not treat the overlay as
   touch-scrollable (multicol OR grid — v6.67 and v7.17 both failed on the real device). The root
   scroller is the one thing iOS always pans, so the board now lives in normal flow below the fixed
   header chrome and the document provides the scrolling. */
html.max-ipad-root, body.max-ipad { height: auto !important; min-height: 100%; overflow-y: auto !important; overflow-x: hidden !important; }
body.max-ipad #widgets.wdg-ipad { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  margin-top: 92px; min-height: calc(100vh - 92px); height: auto !important; max-height: none !important;
  z-index: auto !important; overflow: visible !important; background: transparent !important; touch-action: pan-y; }
/* v6.67 — finger-scroll must work when you touch a WIDGET, not just the gaps. pan-y tells iOS a
   vertical drag on a card = scroll the board (never a card-drag), and the board is the SINGLE
   scroll surface (cards flow to full height; no nested per-card scroll region to trap the touch). */
body.max-ipad #widgets.wdg-ipad .wdg-stack,
body.max-ipad .wdg-stacked,
body.max-ipad .wdg-stacked .res-card-head { touch-action: pan-y !important; }
body.max-ipad #widgets.wdg-ipad .res-zone { position: static !important; width: auto !important; left: auto !important; right: auto !important; transform: none !important; display: block !important; padding: 0 !important; max-height: none !important; }
body.max-ipad #widgets.wdg-ipad .res-right { display: none !important; }
/* v7.17 — GRID masonry (was CSS multicol): WebKit won't touch-scroll an overflow:auto scroller whose
   content is CSS columns, which is why the real iPad couldn't scroll the board. The stack is now a
   grid of 10px row-tracks; JS (ipadGridFit) gives each card a row-span from its measured height, so
   the tiled look is preserved and the board scrolls natively under a finger. */
body.max-ipad .wdg-stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-auto-rows: 10px; column-gap: 12px; row-gap: 0; padding: 10px 12px 40px; box-sizing: border-box; }
body.max-ipad .wdg-stacked { position: static !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important;
  height: auto !important; min-height: 0 !important; transform: none !important; box-sizing: border-box;
  display: block; align-self: start; margin: 0 0 12px !important; }
body.max-ipad .wdg-stacked .res-card-body { max-height: none !important; overflow: visible !important; overflow-x: hidden !important; touch-action: pan-y; }
body.max-ipad .wdg-stacked .wdg-resize { display: none !important; }   /* no manual resize on iPad — fixed sizes */
body.max-ipad .wdg-supp-inline { margin: 0 0 12px !important; width: 100% !important; display: block; align-self: start; }
/* iPad keeps the desktop header/orb; hide the phone-only push-to-talk + mobile header row just in case */
body.max-ipad #phoneHdrRow { display: none !important; }   /* v7.26 — #pttBtn now LIVES on the iPad too (top-left) */
/* v6.61 — wider, more HORIZONTAL iPad menu: a grid of labelled chips grouped by category */
body.max-ipad .wdg-dock.wdg-dock-ipad { width: min(96vw, 1120px) !important; max-width: min(96vw, 1120px) !important; }
body.max-ipad .wdg-dock-ipad .wdg-dock-grp { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
body.max-ipad .wdg-dock-ipad .wdg-dot { width: 100% !important; height: auto !important; display: flex !important; align-items: center; gap: 9px;
  justify-content: flex-start !important; padding: 9px 11px !important; border-radius: 10px !important; }
body.max-ipad .wdg-dock-ipad .wdg-dot-lbl { display: inline !important; flex: 1 1 auto; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.max-ipad .wdg-dock-ipad .wdg-dock-gh { grid-column: 1 / -1; }
/* v6.34 — iOS auto-zooms any focused field whose font is under 16px, and stays zoomed after you tap
   away. Give every phone input 16px so the zoom never happens (iosZoomReset() catches stragglers). */
body.max-phone input[type="text"], body.max-phone input[type="search"], body.max-phone input[type="number"],
body.max-phone input[type="password"], body.max-phone input[type="email"], body.max-phone input[type="url"],
body.max-phone input:not([type]), body.max-phone textarea, body.max-phone select { font-size: 16px !important; }

/* ---- widget nav strip: REMOVED in v6.28 (the ☰ menu now opens-or-jumps to widgets). Kept hidden for safety. ---- */
.wdg-nav { display: none !important; }

/* ---- v6.28 push-to-talk button (phone only) — v7.15: HOLD to talk, 2× bigger, one row lower,
        background fills while holding (1s) then the mic locks open for 30s ---- */
#pttBtn { display: none; }
body.max-phone #pttBtn , body.max-ipad #pttBtn  { display: inline-flex; position: fixed; z-index: 120;
  top: calc(env(safe-area-inset-top) + 140px); left: 50%; transform: translateX(-50%);
  align-items: center; gap: 12px; padding: 18px 40px; border-radius: 40px;
  background: rgba(10,16,28,.92); border: 1px solid rgba(90,200,255,.5); color: #dff2ff;
  font-size: 17px; font-weight: 600; letter-spacing: .3px; white-space: nowrap;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none;
  box-shadow: 0 4px 18px rgba(0,0,0,.5); cursor: pointer; overflow: hidden; }
body.max-phone #pttBtn > span , body.max-ipad #pttBtn > span  { position: relative; z-index: 1; }
body.max-phone #pttBtn .ptt-ic , body.max-ipad #pttBtn .ptt-ic  { font-size: 28px; line-height: 1; }
/* the hold-progress fill: sweeps left→right over the 1s hold, snaps back if released early */
body.max-phone #pttBtn::before , body.max-ipad #pttBtn::before  { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(46,204,113,.35), rgba(46,204,113,.8)); transition: width .15s ease-out; }
body.max-phone #pttBtn.ptt-holding::before , body.max-ipad #pttBtn.ptt-holding::before  { width: 100%; transition: width 1s linear; }
body.max-phone #pttBtn.ptt-live , body.max-ipad #pttBtn.ptt-live  { background: rgba(30,120,86,.96); border-color: #6effa8; color: #eafff2;
  box-shadow: 0 0 0 3px rgba(80,255,160,.22), 0 4px 18px rgba(0,0,0,.5); }
body.max-phone #pttBtn.ptt-locked , body.max-ipad #pttBtn.ptt-locked  { background: rgba(24,140,92,.97); border-color: #7dffb2; color: #ecfff5;
  box-shadow: 0 0 0 4px rgba(80,255,160,.3), 0 0 22px rgba(80,255,160,.35), 0 4px 18px rgba(0,0,0,.5);
  animation: pttLockPulse 1.6s ease-in-out infinite; }
@keyframes pttLockPulse { 50% { box-shadow: 0 0 0 7px rgba(80,255,160,.16), 0 0 30px rgba(80,255,160,.5), 0 4px 18px rgba(0,0,0,.5); } }
/* v7.18 — fixed-width countdown so "Mic open 100s" → "9s" never resizes the button */
body.max-phone #pttBtn .ptt-timer , body.max-ipad #pttBtn .ptt-timer  { display: inline-block; min-width: 4ch; text-align: left; font-variant-numeric: tabular-nums; }
/* v7.18 — the +10/+30 second extenders, flanking the mic button while it's locked open */
.ptt-ext { display: none; }
body.max-phone .ptt-ext:not([hidden]) , body.max-ipad .ptt-ext:not([hidden])  { display: inline-flex; position: fixed; z-index: 120;
  top: calc(env(safe-area-inset-top) + 150px); padding: 12px 16px; border-radius: 26px;
  background: rgba(10,16,28,.94); border: 1px solid rgba(125,255,178,.55); color: #d9ffe9;
  font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  box-shadow: 0 4px 14px rgba(0,0,0,.45); }
body.max-phone #pttPlus10:not([hidden]) , body.max-ipad #pttPlus10:not([hidden])  { right: calc(50% + 128px); left: auto; }
body.max-phone #pttPlus30:not([hidden]) , body.max-ipad #pttPlus30:not([hidden])  { left: calc(50% + 128px); right: auto; }
body.max-phone .ptt-ext:active , body.max-ipad .ptt-ext:active  { background: rgba(24,140,92,.9); }
/* v7.26 — iPad: the hold-to-talk cluster is LEFT-justified under the header, fixed (always on top);
   the board's top margin clears it. Extender x/y set by JS beside the button when they appear. */
body.max-ipad #pttBtn { top: 102px; left: 14px; transform: none; }
body.max-ipad #widgets.wdg-ipad { margin-top: 182px; min-height: calc(100vh - 182px); }
body.max-phone.dock-open #pttBtn, body.max-phone.dock-open .ptt-ext { display: none !important; }   /* hidden behind the open menu */

/* ---- ☰ menu → scrollable sheet of icon + NAME rows, colour-grouped. Sits BELOW the header (v6.19) ---- */
body.max-phone .wdg-dock.wdg-dock-phone { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  top: calc(env(safe-area-inset-top) + 84px) !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; max-height: none !important;
  border-radius: 16px 16px 0 0 !important; padding: 8px 10px calc(env(safe-area-inset-bottom) + 16px) !important; margin: 0 !important;
  background: rgba(8,12,22,.985) !important; border-top: 1px solid var(--line) !important; z-index: 130 !important;
  overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
/* CRITICAL: respect the hidden attribute so tapping ☰ MENU actually collapses the menu (the display rule above must not win when hidden) */
body.max-phone .wdg-dock.wdg-dock-phone[hidden] { display: none !important; }
/* v7.16 — the sheet's content uses the FULL width: an old compact-dock rule (max-width:250px on
   .wdg-dock-scroll, line ~3788) was still winning here, squeezing the 2-col menu to ~60% of the screen */
body.max-phone .wdg-dock-phone .wdg-dock-scroll { display: block; overflow: visible; width: 100% !important; max-width: none !important; }
/* v6.59 — TWO links per row, grouped (heading above each group), subtle group colour set inline in JS */
body.max-phone .wdg-dock-phone .wdg-dock-grp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
body.max-phone .wdg-dock-phone .wdg-dot { width: 100% !important; height: auto !important; display: flex !important; align-items: center; gap: 9px;
  justify-content: flex-start !important; padding: 10px 10px !important; border-radius: 11px !important; font-size: 13px !important; text-align: left; min-width: 0; }
body.max-phone .wdg-dock-phone .wdg-dot .material-symbols-outlined { font-size: 20px; flex: 0 0 auto; }
body.max-phone .wdg-dock-phone .wdg-dot-lbl { display: inline !important; flex: 1 1 auto; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the ⚙ Settings items stay full-width, one per row */
body.max-phone .wdg-dock-phone .wdg-dock-gh-settings ~ .wdg-dock-grp,
body.max-phone .wdg-dock-phone .wdg-dock-grp:last-child { grid-template-columns: 1fr; }
body.max-phone .wdg-dock-phone .wdg-dot-st { margin-left: auto; flex: 0 0 auto; }
body.max-phone .wdg-dock-phone .wdg-dock-gh { display: block !important; font-size: 12px; margin: 14px 0 5px; }   /* v6.59 — show the group NAME above each group on phone */
body.max-phone .wdg-dock-phone .wdg-dock-search { position: static; padding: 2px 0 8px; }
body.max-phone .wdg-dock-phone .wdg-dock-close { position: sticky; top: 0; z-index: 3; width: 100%; margin: 0 0 8px; padding: 11px;
  border-radius: 11px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; background: rgba(248,113,113,.18); color: #ffb3b3; border: 1px solid rgba(248,113,113,.45); }

/* v6.68 — ? keyboard-shortcuts cheat-sheet (themed via accent vars; no visible scrollbars) */
.kbh-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  background: rgba(4,7,15,.72); backdrop-filter: blur(3px); padding: 24px; box-sizing: border-box; animation: kbhFade .16s ease; }
@keyframes kbhFade { from { opacity: 0; } to { opacity: 1; } }
.kbh-card { position: relative; width: min(560px, 94vw); max-height: 88vh; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;
  background: linear-gradient(180deg, rgba(18,27,48,.98), rgba(10,16,28,.98)); border: 1px solid rgba(var(--acc),.45);
  border-radius: 18px; padding: 22px 24px 18px; box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--acc),.12); }
.kbh-card::-webkit-scrollbar { display: none; }
.kbh-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid var(--line, #26324c); color: #cfe0ff; font-size: 14px; line-height: 1; }
.kbh-x:hover { background: rgba(var(--acc),.18); border-color: rgba(var(--acc),.5); }
.kbh-title { margin: 0 0 14px; font-size: 19px; color: rgb(var(--acc)); font-weight: 700; letter-spacing: .3px; }
.kbh-grp { margin-bottom: 14px; }
.kbh-grp h3 { margin: 0 0 7px; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: #8fa3c8; font-weight: 600; }
.kbh-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.kbh-keys { flex: 0 0 148px; display: flex; align-items: center; gap: 5px; }
.kbh-plus { color: #6b7da0; opacity: .7; font-size: 12px; }
.kbh-desc { flex: 1 1 auto; color: #dbe6fb; font-size: 14px; }
.kbh-card kbd { display: inline-block; min-width: 20px; text-align: center; padding: 3px 8px; border-radius: 7px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: #eaf3ff; background: rgba(var(--acc),.14); border: 1px solid rgba(var(--acc),.45); box-shadow: 0 2px 0 rgba(var(--acc),.22); }
.kbh-foot { margin: 6px 0 2px; font-size: 12.5px; color: #8fa3c8; }

/* v6.69 — ambient idle screensaver clock (themed via accent vars; full-screen, no scroll) */
.idle-ss { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: radial-gradient(circle at 50% 42%, rgba(8,14,26,.96), rgba(2,4,9,.99)); color: rgb(var(--acc));
  opacity: 0; transition: opacity .45s ease; cursor: none; overflow: hidden; }
.idle-ss.on { opacity: 1; }
.idle-time { font-size: clamp(64px, 18vw, 340px); font-weight: 300; letter-spacing: 2px; line-height: 1;
  text-shadow: 0 0 42px rgba(var(--acc),.5); font-variant-numeric: tabular-nums; }
.idle-date { font-size: clamp(18px, 3.4vw, 54px); font-weight: 400; color: rgb(var(--acc2)); letter-spacing: 1px; opacity: .92; }
.idle-greet { font-size: clamp(16px, 2.4vw, 34px); font-weight: 600; color: rgb(var(--acc3)); opacity: .85; margin-bottom: 1.5vh; letter-spacing: .5px; }
.idle-greet:empty { display: none; }
.idle-wx { margin-top: 1.5vh; font-size: clamp(14px, 2vw, 28px); font-weight: 500; color: #cfe3ff; opacity: .82; }
.idle-wx:empty { display: none; }
body.hide-cursor, body.hide-cursor * { cursor: none !important; }   /* v7.63 — kiosk idle cursor hide */
.hdr-clock { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; color: var(--muted); margin-right: 8px; align-self: center; white-space: nowrap; }   /* v7.69 — header clock */
body.max-phone .hdr-clock { display: none; }
.idle-next { margin-top: 3vh; font-size: clamp(14px, 2vw, 26px); font-weight: 600; color: #cfe3ff; opacity: .8; letter-spacing: .5px; }
.idle-next:empty { display: none; }
.idle-tip { position: absolute; bottom: 12vh; max-width: 70vw; font-size: clamp(13px, 1.6vw, 22px); color: #9fb4d8; opacity: .7; text-align: center; line-height: 1.4; }
.idle-tip:empty { display: none; }
.idle-hint { position: absolute; bottom: 6vh; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #6b7da0; opacity: .55; }

/* v6.72 — “Closed X — ↩ Undo” toast (themed via accent vars) */
.wdg-undo { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 320;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 13px;
  background: rgba(14,22,40,.98); border: 1px solid rgba(var(--acc),.5); color: #dbe6fb; font-size: 14px;
  box-shadow: 0 14px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--acc),.1); animation: wdgUndoUp .2s ease; }
@keyframes wdgUndoUp { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.wdg-undo-msg { white-space: nowrap; }
.wdg-undo-btn { cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 9px;
  background: rgba(var(--acc),.16); color: rgb(var(--acc)); border: 1px solid rgba(var(--acc),.5); white-space: nowrap; }
.wdg-undo-btn:hover { background: rgba(var(--acc),.28); }

/* v6.73 — Settings quick-search */
.cfg-search { width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 8px 11px; border-radius: 10px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.35); color: #eaf3ff; font: inherit; font-size: 13px; }
.cfg-search:focus { outline: none; border-color: rgba(var(--acc),.65); box-shadow: 0 0 0 2px rgba(var(--acc),.18); }
.cfg-search::placeholder { color: #7f92b5; }
.cfg-tab.cfg-tab-nomatch { display: none !important; }
.cfg-nores { padding: 8px 4px; font-size: 12.5px; color: #8fa3c8; }
.cfg-row.cfg-hit { background: rgba(var(--acc),.12); border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(var(--acc),.4); }

/* v6.74 — snooze-speech badge */
.speech-snooze { position: fixed; right: 14px; bottom: 14px; z-index: 315; padding: 7px 13px; border-radius: 20px;
  background: rgba(14,22,40,.96); border: 1px solid rgba(var(--acc),.5); color: #dbe6fb; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 6px 22px rgba(0,0,0,.45); pointer-events: none; }

/* v6.76 — night-dim veil (over everything; never blocks input) */
#screenDim { position: fixed; inset: 0; background: #000; pointer-events: none; z-index: 380; transition: opacity .3s ease; }

/* v6.91 — double-click title to collapse a widget to just its header */
.res-card.wdg-collapsed { height: auto !important; min-height: 0 !important; }
.res-card.wdg-collapsed .res-card-body { display: none !important; }
.res-card.wdg-collapsed .wdg-resize { display: none !important; }
.res-card.wdg-collapsed .res-card-head { border-bottom: 0; }

/* v6.90 — 😴 Sleep Calculator widget */
.sleep-body { display: flex; flex-direction: column; gap: 7px; padding: 8px 10px; }
.sleep-modes { display: flex; gap: 6px; }
.sleep-m { flex: 1 1 auto; cursor: pointer; font: inherit; font-size: 12.5px; padding: 7px 8px; border-radius: 9px; background: rgba(255,255,255,.05); color: #cfe0ff; border: 1px solid var(--line, #26324c); }
.sleep-m.on { background: rgba(var(--acc),.18); color: rgb(var(--acc)); border-color: rgba(var(--acc),.5); }
.sleep-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: #b9c8e6; }
.sleep-row input { padding: 6px 9px; border-radius: 9px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.35); color: #eaf3ff; font: inherit; font-size: 14px; }
.sleep-hint { font-size: 12px; color: #8fa3c8; }
.sleep-list { display: flex; flex-direction: column; gap: 4px; }
.sleep-opt { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 9px; background: rgba(255,255,255,.04); }
.sleep-ic { font-size: 15px; }
.sleep-opt b { font-size: 16px; color: rgb(var(--acc)); font-variant-numeric: tabular-nums; }
.sleep-cy { margin-left: auto; font-size: 11.5px; color: #8fa3c8; }

/* v7.00 — 🌟 Today at a Glance widget */
.gl-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; }
.gl-date { font-size: 16px; font-weight: 600; color: rgb(var(--acc)); margin-bottom: 6px; }
.gl-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-bottom: 1px solid rgba(255,255,255,.05); border-radius: 8px; cursor: pointer; transition: background .12s; }
.gl-row:last-child { border-bottom: 0; }
.gl-row:hover { background: rgba(var(--acc),.12); }
.gl-ic { font-size: 17px; flex: 0 0 auto; }
.gl-l { font-size: 13px; color: #8fa3c8; flex: 0 0 68px; }
.gl-v { font-size: 13.5px; color: #eaf3ff; flex: 1 1 auto; text-align: right; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v6.94 — 🎲 Randomizer widget */
.rnd-body { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 10px; justify-content: center; }
.rnd-result { font-size: clamp(24px, 6vw, 40px); font-weight: 600; color: rgb(var(--acc)); min-height: 1.2em; text-align: center; }
.rnd-result.rnd-pop { animation: rndPop .28s ease; }
@keyframes rndPop { 0% { transform: scale(.6); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }
.rnd-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.rnd-b { cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 10px; background: rgba(var(--acc),.14); color: rgb(var(--acc)); border: 1px solid rgba(var(--acc),.45); }
.rnd-b:hover { background: rgba(var(--acc),.26); }
.rnd-pick { display: flex; gap: 6px; width: 100%; }
.rnd-in { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.35); color: #eaf3ff; font: inherit; font-size: 14px; }
.rnd-in:focus { outline: none; border-color: rgba(var(--acc),.65); }
/* v8.08 — animated Randomizer: coin flip / dice tumble / number reel */
.rnd-stage { display: flex; align-items: center; justify-content: center; min-height: clamp(70px, 22vh, 150px); width: 100%; perspective: 600px; cursor: pointer; }
.rnd-stage.rnd-run { cursor: pointer; }
.rnd-vis, .rnd-big { font-size: clamp(48px, 16vw, 104px); line-height: 1; text-align: center; }
.rnd-big { font-weight: 800; color: rgb(var(--acc)); animation: rndPop .3s ease; }
.rnd-coin { position: relative; width: clamp(60px, 18vw, 110px); height: clamp(60px, 18vw, 110px); transform-style: preserve-3d; will-change: transform; }
.rnd-cf { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font-size: clamp(34px, 10vw, 64px); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: radial-gradient(circle at 35% 30%, #ffe89a, #d9a53a 70%, #a9791f); box-shadow: inset 0 0 0 4px rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.4); }
.rnd-cf-t { transform: rotateX(180deg); background: radial-gradient(circle at 35% 30%, #ffe89a, #c7922f 70%, #8f6417); }
.rnd-lbl { font-size: 12.5px; color: var(--muted); text-align: center; min-height: 1.2em; }
.rnd-run .rnd-big { color: #cfe0ff; }
@media (prefers-reduced-motion: reduce) { .rnd-coin { transition: none; } .rnd-big { animation: none; } }

/* v6.88 — 📜 Quote of the Day widget */
.quote-body { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 14px; position: relative; }
.quote-mark { position: absolute; top: 0; left: 10px; font-size: 54px; line-height: 1; color: rgba(var(--acc),.35); font-family: Georgia, serif; }
.quote-t { font-size: clamp(15px, 2.4vw, 20px); line-height: 1.4; color: #eaf3ff; font-style: italic; padding-left: 6px; z-index: 1; }
.quote-a { font-size: 13px; color: rgb(var(--acc)); text-align: right; }
.quote-more { align-self: flex-start; margin-top: 4px; cursor: pointer; font: inherit; font-size: 12px; padding: 5px 11px; border-radius: 9px; background: rgba(var(--acc),.14); color: rgb(var(--acc)); border: 1px solid rgba(var(--acc),.45); }
.quote-more:hover { background: rgba(var(--acc),.26); }

/* v7.03 — ⏰ Timer widget */
.tmr-body { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 10px; justify-content: center; }
.tmr-time { font-size: clamp(34px, 9vw, 62px); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; color: rgb(var(--acc)); }
.tmr-quick { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.tmr-q { cursor: pointer; font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 9px; background: rgba(255,255,255,.05); color: #cfe0ff; border: 1px solid var(--line, #26324c); }
.tmr-q:hover { background: rgba(var(--acc),.18); color: rgb(var(--acc)); border-color: rgba(var(--acc),.5); }
.tmr-custom { display: flex; gap: 5px; align-items: center; }
.tmr-min { width: 64px; box-sizing: border-box; padding: 6px 8px; border-radius: 9px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.35); color: #eaf3ff; font: inherit; font-size: 13px; text-align: center; }
.tmr-min:focus { outline: none; border-color: rgba(var(--acc),.65); }
.tmr-btns { display: flex; gap: 6px; }
.tmr-b { cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 10px; background: rgba(var(--acc),.14); color: rgb(var(--acc)); border: 1px solid rgba(var(--acc),.45); }
.tmr-b:hover { background: rgba(var(--acc),.26); }
.res-card.tmr-ring { animation: tmrRing 1s ease-in-out infinite; }
@keyframes tmrRing { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--acc),.0); } 50% { box-shadow: 0 0 0 4px rgba(var(--acc),.55), 0 0 26px rgba(var(--acc),.5); } }

/* v6.86 — ⏲ Stopwatch widget */
.sw-body { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 10px; min-height: 0; }
.sw-time { font-size: clamp(30px, 8vw, 56px); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; color: rgb(var(--acc)); }
.sw-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sw-b { cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 10px; background: rgba(var(--acc),.14); color: rgb(var(--acc)); border: 1px solid rgba(var(--acc),.45); }
.sw-b:hover { background: rgba(var(--acc),.26); }
.sw-b:disabled { opacity: .4; cursor: default; }
.sw-b.sw-stop { background: rgba(248,113,113,.18); color: #ffb3b3; border-color: rgba(248,113,113,.5); }
.sw-laps { width: 100%; flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.sw-laps::-webkit-scrollbar { display: none; }
.sw-lap-row { display: flex; justify-content: space-between; font-size: 12.5px; color: #b9c8e6; padding: 3px 6px; border-radius: 7px; }
.sw-lap-row:nth-child(odd) { background: rgba(255,255,255,.03); }
.sw-lap-row b { color: #eaf3ff; font-variant-numeric: tabular-nums; }

/* v7.05 — 🔁 Habits widget */
.hb-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; min-height: 0; }
.hb-add { display: flex; gap: 6px; }
.hb-in { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.35); color: #eaf3ff; font: inherit; font-size: 14px; }
.hb-in:focus { outline: none; border-color: rgba(var(--acc),.65); }
.hb-addb { flex: 0 0 auto; cursor: pointer; font: inherit; font-size: 16px; font-weight: 700; padding: 0 13px; border-radius: 10px; background: rgba(var(--acc),.18); color: rgb(var(--acc)); border: 1px solid rgba(var(--acc),.5); }
.hb-list { flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.hb-list::-webkit-scrollbar { display: none; }
.hb-row { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 9px; }
.hb-row:hover { background: rgba(255,255,255,.04); }
.hb-row input { flex: 0 0 auto; width: 17px; height: 17px; accent-color: rgb(var(--acc)); }
.hb-nm { flex: 1 1 auto; font-size: 14px; color: #eaf3ff; word-break: break-word; }
.hb-row.done .hb-nm { color: rgb(var(--acc)); }
.hb-streak { flex: 0 0 auto; font-size: 12.5px; color: #ffb347; font-weight: 600; }
.hb-del { flex: 0 0 auto; cursor: pointer; background: none; border: 0; color: #7f92b5; font-size: 13px; opacity: .5; padding: 2px 4px; border-radius: 6px; }
.hb-del:hover { opacity: 1; background: rgba(248,113,113,.16); }

/* v6.84 — ✅ To-Do List widget */
.todo-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; min-height: 0; }
.todo-add { display: flex; gap: 6px; }
.todo-in { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.35); color: #eaf3ff; font: inherit; font-size: 14px; }
.todo-in:focus { outline: none; border-color: rgba(var(--acc),.65); }
.todo-addb { flex: 0 0 auto; cursor: pointer; font: inherit; font-size: 16px; font-weight: 700; padding: 0 13px; border-radius: 10px; background: rgba(var(--acc),.18); color: rgb(var(--acc)); border: 1px solid rgba(var(--acc),.5); }
.todo-list { flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.todo-list::-webkit-scrollbar { display: none; }
.todo-row { display: flex; align-items: center; gap: 9px; padding: 6px 6px; border-radius: 9px; cursor: pointer; }
.todo-row:hover { background: rgba(255,255,255,.04); }
.todo-row input { flex: 0 0 auto; width: 17px; height: 17px; accent-color: rgb(var(--acc)); }
.todo-txt { flex: 1 1 auto; font-size: 14px; color: #eaf3ff; word-break: break-word; }
.todo-row.done .todo-txt { text-decoration: line-through; color: #7f92b5; }
.todo-del { flex: 0 0 auto; cursor: pointer; background: none; border: 0; color: #7f92b5; font-size: 13px; opacity: .5; padding: 2px 4px; border-radius: 6px; }
.todo-del:hover { opacity: 1; background: rgba(248,113,113,.16); }
.todo-due-badge { flex: 0 0 auto; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: rgba(var(--acc),.16); color: rgb(var(--acc)); white-space: nowrap; }
.todo-due-badge.today { background: rgba(232,197,58,.2); color: #f0d24a; }
.todo-due-badge.overdue { background: rgba(248,113,113,.2); color: #ffb3b3; }
.todo-due { flex: 0 0 auto; box-sizing: border-box; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,.28); border: 1px solid var(--line, #26324c); color: #cfe0ff; font: inherit; font-size: 12px; }
.todo-mv { flex: 0 0 auto; cursor: pointer; background: none; border: 0; color: #8fa3c8; font-size: 14px; line-height: 1; opacity: .55; padding: 2px 5px; border-radius: 6px; }
.todo-mv:hover { opacity: 1; background: rgba(var(--acc),.16); color: rgb(var(--acc)); }
.todo-mv:disabled { opacity: .18; cursor: default; }
.todo-edit { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 4px 8px; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid rgba(var(--acc),.6); color: #eaf3ff; font: inherit; font-size: 14px; }
.todo-edit:focus { outline: none; }
.todo-foot { font-size: 12px; color: #8fa3c8; display: flex; gap: 10px; align-items: center; }
.todo-clear { cursor: pointer; background: none; border: 0; color: rgb(var(--acc)); font: inherit; font-size: 12px; text-decoration: underline; padding: 0; }

/* v6.82 — 📆 Year Progress widget */
.yp-body { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; justify-content: center; }
.yp-date { font-size: 16px; font-weight: 600; color: rgb(var(--acc)); }
.yp-sub { font-size: 12px; color: #8fa3c8; margin-bottom: 4px; }
.yp-lbl { font-size: 12.5px; color: #b9c8e6; display: flex; justify-content: space-between; }
.yp-lbl b { color: #eaf3ff; }
.yp-bar { height: 9px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 3px; }
.yp-fill { height: 100%; background: linear-gradient(90deg, rgb(var(--acc2)), rgb(var(--acc))); transition: width .3s ease; }
.yp-fill.yp-today { background: linear-gradient(90deg, rgb(var(--acc3)), rgb(var(--acc2))); }

/* v6.79 — 💧 Water Tracker widget */
.water-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; text-align: center; }
.water-big { font-size: clamp(30px, 8vw, 58px); font-weight: 300; color: rgb(var(--acc)); line-height: 1; }
.water-big span { font-size: .4em; color: #8fa3c8; }
.water-goal { font-size: 12.5px; color: #b9c8e6; }
.water-bar { width: 92%; height: 10px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.water-fill { height: 100%; background: linear-gradient(90deg, rgb(var(--acc2)), rgb(var(--acc))); transition: width .3s ease; }
.water-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 3px; }
.water-b { cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 11px; border-radius: 10px; background: rgba(var(--acc),.14); color: rgb(var(--acc)); border: 1px solid rgba(var(--acc),.45); }
.water-b:hover { background: rgba(var(--acc),.26); }
.water-b.water-undo { background: rgba(255,255,255,.05); color: #cfe0ff; border-color: var(--line, #26324c); }
.water-done { color: rgb(var(--acc2)) !important; margin-top: 2px; }

/* v6.78 — 🌙 Moon Phase widget */
.moon-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; text-align: center; }
.moon-emoji { font-size: clamp(48px, 14vw, 110px); line-height: 1; }
.moon-name { font-size: 15px; font-weight: 600; color: rgb(var(--acc)); }
.moon-illum { font-size: 12.5px; color: #b9c8e6; }
.moon-next { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #8fa3c8; }
/* v7.95 — scale-to-frame: when the Moon Phase frame is WIDE, lay the moon on the left and its text on the right
   (opt-in via ⚙ → “Reflow to fit frame shape”; the card carries .wdg-ar-wide from applyWidgetReflow). */
.res-card.wdg-ar-wide .moon-body {
  display: grid; grid-template-columns: auto 1fr; grid-auto-rows: min-content;
  align-content: center; align-items: center; justify-content: center;
  gap: 2px 20px; text-align: left; padding: 10px 16px;
}
.res-card.wdg-ar-wide .moon-body .moon-emoji { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
.res-card.wdg-ar-wide .moon-body .moon-next { margin-top: 6px; }
/* v7.96 — scale-to-frame reflow for 💧 Water: big total on the left, goal · bar · quick-add on the right */
.res-card.wdg-ar-wide .water-body {
  display: grid; grid-template-columns: auto 1fr; grid-auto-rows: min-content;
  align-content: center; align-items: center; justify-content: center;
  gap: 4px 20px; text-align: left; padding: 10px 18px;
}
.res-card.wdg-ar-wide .water-body .water-big { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
.res-card.wdg-ar-wide .water-body .water-bar { width: 100%; }
.res-card.wdg-ar-wide .water-body .water-btns { flex-wrap: wrap; justify-content: flex-start; }
/* v7.98 — scale-to-frame reflow for 📆 Year Progress: date block on the left, the two progress bars on the right */
.res-card.wdg-ar-wide .yp-body {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-content: center; gap: 3px 22px; padding: 12px 18px;
}
.res-card.wdg-ar-wide .yp-body > .yp-date { grid-column: 1; grid-row: 1; align-self: end; }
.res-card.wdg-ar-wide .yp-body > .yp-sub { grid-column: 1; grid-row: 2; align-self: start; }
.res-card.wdg-ar-wide .yp-body > *:nth-child(3) { grid-column: 2; grid-row: 1; }
.res-card.wdg-ar-wide .yp-body > *:nth-child(4) { grid-column: 2; grid-row: 2; }
.res-card.wdg-ar-wide .yp-body > *:nth-child(5) { grid-column: 2; grid-row: 3; }
.res-card.wdg-ar-wide .yp-body > *:nth-child(6) { grid-column: 2; grid-row: 4; }
.res-card.wdg-ar-wide .yp-body > .res-src { grid-column: 1 / -1; grid-row: 5; margin-top: 4px; }

/* v6.77 — 📐 Unit Converter widget */
.uc-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; }
.uc-cats { display: flex; flex-wrap: wrap; gap: 5px; }
.uc-cat { cursor: pointer; font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 9px; background: rgba(255,255,255,.05); color: #cfe0ff; border: 1px solid var(--line, #26324c); }
.uc-cat.on { background: rgba(var(--acc),.18); color: rgb(var(--acc)); border-color: rgba(var(--acc),.5); }
.uc-row { display: flex; gap: 8px; align-items: center; }
.uc-row input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.28); border: 1px solid rgba(var(--acc),.35); color: #eaf3ff; font: inherit; font-size: 15px; }
.uc-row input:focus { outline: none; border-color: rgba(var(--acc),.65); }
.uc-out { color: rgb(var(--acc)) !important; font-weight: 600; }
.uc-row select { flex: 0 0 auto; padding: 8px 8px; border-radius: 10px; background: rgba(0,0,0,.28); border: 1px solid var(--line, #26324c); color: #eaf3ff; font: inherit; font-size: 13px; }
.uc-eq { text-align: center; color: #8fa3c8; font-size: 15px; line-height: 1; }

/* v6.75 — ⏱ Focus Timer widget */
.focus-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 6px 8px; text-align: center; }
.focus-phase { font-size: 14px; font-weight: 600; letter-spacing: .5px; color: rgb(var(--acc)); }
.focus-time { font-size: clamp(34px, 9vw, 72px); font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; color: #eaf3ff; text-shadow: 0 0 24px rgba(var(--acc),.35); }
.focus-body.focus-break .focus-phase { color: rgb(var(--acc2)); }
.focus-body.focus-break .focus-time { text-shadow: 0 0 24px rgba(var(--acc2),.35); }
.focus-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 2px; }
.focus-b { cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 10px;
  background: rgba(var(--acc),.14); color: rgb(var(--acc)); border: 1px solid rgba(var(--acc),.45); }
.focus-b:hover { background: rgba(var(--acc),.26); }
.focus-sub { margin-top: 4px; }

/* 🎵 Now-playing mini-bar (v8.48) — slim bottom-centre pill showing current Spotify/Radio track */
.now-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 118;
  display: flex; align-items: center; gap: 10px; max-width: min(430px, 92vw);
  background: rgba(10,16,30,.94); border: 1px solid rgba(var(--acc),.42); border-radius: 999px;
  padding: 6px 10px 6px 6px; box-shadow: 0 10px 34px rgba(0,0,0,.5); backdrop-filter: blur(7px); }
.now-bar[hidden] { display: none; }
.nb-art { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; cursor: pointer;
  background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.now-bar:not(.nb-paused) .nb-art { animation: nb-spin 6s linear infinite; }
@keyframes nb-spin { to { transform: rotate(360deg); } }
.nb-txt { display: flex; flex-direction: column; min-width: 0; cursor: pointer; }
.nb-title { font-size: 12.5px; font-weight: 700; color: var(--ink); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-sub { font-size: 10.5px; color: var(--muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-btn { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1;
  border: 1px solid rgba(var(--acc),.5); background: rgba(var(--acc),.16); color: rgb(var(--acc2)); }
.nb-btn:hover { background: rgba(var(--acc),.3); }

/* v8.48 — drag-to-reorder grip on the phone/iPad stack */
.wdg-grip { flex: 0 0 auto; cursor: grab; background: transparent; border: 0; color: var(--muted);
  font-size: 15px; line-height: 1; padding: 2px 5px; margin-right: 1px; touch-action: none; opacity: .75; }
.wdg-grip:hover { opacity: 1; color: rgb(var(--acc2)); }
.wdg-grip:active { cursor: grabbing; }
.wdg-stacked.wdg-dragging { opacity: .94; position: relative; z-index: 60; transform: scale(1.01);
  box-shadow: 0 14px 36px rgba(0,0,0,.55); outline: 2px solid rgba(var(--acc),.6); }
body.wdg-reordering, body.wdg-reordering * { user-select: none !important; -webkit-user-select: none !important; }

/* v8.49 — Spotify Build-my-playlists + cached song list */
.cfg-hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 14px 0 6px; }
.spot-cache-note { font-size: 11px; color: var(--muted); padding: 2px 6px 6px; opacity: .85; }
.spot-e { display: inline-block; font-size: 8.5px; font-weight: 700; line-height: 1; padding: 2px 3px; margin-left: 4px;
  border-radius: 3px; background: rgba(255,255,255,.16); color: var(--muted); vertical-align: middle; }

/* v8.50/8.52 — Movie Picker dense mode: portrait posters (locked 2:3) that auto-flow to fit any window
   width and SCROLL vertically if they overflow. Poster width is set inline by the zoom slider. */
.mp-body .mp-grid-dense { gap: 6px; overflow-y: auto; align-content: start; }   /* override the compact overflow:hidden */
.mp-grid-dense .mp-cell { padding: 0; gap: 0; border-radius: 6px; height: auto; aspect-ratio: 2 / 3; }
.mp-grid-dense .mp-cell img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.mp-grid-dense .mp-noimg { width: 100%; height: 100%; font-size: 16px; }
.mp-grid-dense .mp-info { display: none; }

/* v8.51 — 🎲 Find-a-random-movie: dice button + slot-machine highlight/winner */
.mp-dice { background: rgba(var(--acc),.14); border: 1px solid rgba(var(--acc),.5); color: rgb(var(--acc2));
  font-size: 13px; padding: 2px 8px; border-radius: 999px; cursor: pointer; margin-left: auto; margin-right: 6px; line-height: 1; }
.mp-dice:hover { background: rgba(var(--acc),.3); }
.mp-dice.spinning { animation: mp-dice-roll .5s linear infinite; }
@keyframes mp-dice-roll { to { transform: rotate(360deg); } }
.mp-cell { transition: transform .08s ease, box-shadow .08s ease; }
.mp-cell.mp-hi { border-color: rgba(var(--acc),.9); box-shadow: 0 0 14px rgba(var(--acc),.7); transform: scale(1.07); position: relative; z-index: 2; }
.mp-cell.mp-win { border-color: #ffd54a; box-shadow: 0 0 24px rgba(255,213,74,.95); transform: scale(1.12); position: relative; z-index: 3; animation: mp-winpulse 1s ease-in-out 3; }
@keyframes mp-winpulse { 0%,100% { box-shadow: 0 0 16px rgba(255,213,74,.7); } 50% { box-shadow: 0 0 32px rgba(255,213,74,1); } }

/* v8.53 — 🎲 Movie Randomizer modal: poster flick → reveal (trailer + plot + cast) */
.mv-rand { z-index: 120; display: flex; flex-direction: column; }
.mvr-body { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.mvr-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; flex: 1 1 auto; min-height: 0; padding: 6px; }
.mvr-stage.mvr-landed { flex: 0 0 auto; }
.mvr-poster { height: 48vh; max-height: 520px; max-width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 12px; background: #000; box-shadow: 0 14px 44px rgba(0,0,0,.6); }
.mvr-stage:not(.mvr-landed) .mvr-poster { animation: mvr-pulse .5s ease-in-out infinite alternate; }
@keyframes mvr-pulse { from { transform: scale(.99); filter: brightness(.92); } to { transform: scale(1.02); filter: brightness(1.08); } }
.mvr-stage.mvr-landed .mvr-poster { height: auto; max-height: 210px; box-shadow: 0 0 28px rgba(255,213,74,.55); }
.mvr-cap { font-size: 15px; font-weight: 700; color: #bfe9ff; text-align: center; letter-spacing: .01em; }
/* v9.74 — 🎲 Try again button in the Random Movie title bar */
.mvr-again { margin-left: auto; font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer; background: rgba(var(--acc),.2); color: var(--fg); border: 1px solid rgba(var(--acc),.55); white-space: nowrap; }
.mvr-again:hover { background: rgba(var(--acc),.36); }
.mvr-again:active { transform: scale(.96); }
.mvr-detail { display: flex; flex-direction: column; gap: 8px; }
.mvr-loading { text-align: center; padding: 10px; }

/* v8.54 — Movie Picker extra filters (keyword/sort/min-rating): let the control row wrap */
.mp-ctl { flex-wrap: wrap; }
.mp-kw { flex: 1 1 150px; min-width: 120px; font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px;
  background: rgba(8,14,28,.9); color: #eaf1ff; border: 1px solid rgba(var(--acc),.4); }
.mp-kw::placeholder { color: var(--muted); }
.mp-kw:focus { outline: none; border-color: rgba(var(--acc),.8); box-shadow: 0 0 0 2px rgba(var(--acc),.2); }
.mp-ctl select { flex: 1 1 90px; }

/* v8.55 — 📡 WiFi Presence widget (ESP32-S3 CSI node readout) */
.pres-body { display: flex; flex-direction: column; }
.pres-wrap { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; min-height: 0; padding: 2px; }
.pres-node { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: rgba(18,26,44,.55); }
.pres-node.pres-on { border-color: rgba(255,120,120,.7); box-shadow: 0 0 14px rgba(255,90,90,.3); background: rgba(60,20,24,.5); }
.pres-node.pres-off { opacity: .5; }
.pres-top { display: flex; align-items: center; gap: 8px; }
.pres-top b { font-size: 13px; color: var(--ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pres-dot { width: 9px; height: 9px; border-radius: 50%; background: #48d17a; box-shadow: 0 0 8px #48d17a; flex: none; }
.pres-off .pres-dot { background: #888; box-shadow: none; }
.pres-on .pres-dot { background: #ff5a5a; box-shadow: 0 0 10px #ff5a5a; animation: pres-blink .8s infinite; }
@keyframes pres-blink { 50% { opacity: .4; } }
.pres-state { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.pres-on .pres-state { color: #ff8080; }
.pres-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.08); margin: 7px 0 5px; overflow: hidden; }
.pres-bar i { display: block; height: 100%; background: linear-gradient(90deg, rgb(var(--acc)), #ff6a6a); transition: width .5s ease; }
.pres-meta { font-size: 10px; color: var(--muted); }
.pres-empty { text-align: center; color: var(--muted); font-size: 12px; padding: 16px 8px; line-height: 1.6; }
.pres-empty span { font-size: 10.5px; opacity: .8; }

/* v9.31 — World Globe */
.globe-body { padding: 0 !important; }
.globe-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* v9.46 — bar sits ABOVE the canvas (relative + z-index) so its buttons are never covered or click-stolen by the globe */
.globe-bar { display: flex; align-items: center; gap: 8px; padding: 7px 8px; flex: none; position: relative; z-index: 20; background: rgba(6,15,28,.82); flex-wrap: wrap; }
.globe-layer { flex: none; background: rgba(255,255,255,.06); color: var(--fg); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 4px 8px; font-size: 12px; font-weight: 600; }
.globe-legend { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.globe-legend span { margin-right: 6px; }
.globe-toggles { flex: none; margin-left: auto; display: flex; gap: 4px; }
.globe-tg { width: 28px; height: 28px; border-radius: 7px; background: rgba(255,255,255,.06); color: var(--fg); border: 1px solid rgba(255,255,255,.14); font-size: 14px; line-height: 1; cursor: pointer; opacity: .5; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; }
.globe-tg:hover { background: rgba(255,255,255,.14); opacity: .85; }
.globe-tg.on { opacity: 1; border-color: rgba(var(--acc),.6); background: rgba(var(--acc),.16); }
.globe-maplayers { flex: none; display: flex; gap: 4px; }
.globe-ml { font: inherit; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 7px; cursor: pointer; background: rgba(255,255,255,.06); color: var(--fg); border: 1px solid rgba(255,255,255,.14); opacity: .6; }
.globe-ml:hover { opacity: .85; }
.globe-ml.on { opacity: 1; border-color: rgba(var(--acc),.6); background: rgba(var(--acc),.16); }
.globe-zoom { flex: none; display: flex; gap: 4px; }
.globe-zbtn { width: 28px; height: 28px; border-radius: 7px; background: rgba(255,255,255,.06); color: var(--fg); border: 1px solid rgba(255,255,255,.14); font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; }
.globe-zbtn:hover { background: rgba(255,255,255,.14); }
.globe-cvwrap { flex: 1 1 auto; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.globe-cv { display: block; cursor: grab; touch-action: none; }
.globe-cv:active { cursor: grabbing; }
.globe-map-frame { width: 100%; height: 100%; border: 0; display: block; background: #0a0f1a; }
.movie-panel.globe-map-panel .movie-panel-body { padding: 0; overflow: hidden; position: relative; }   /* v9.40 — iframe fills the 2×2 map windows */
.globe-mini-cv { width: 100%; height: 100%; display: block; background: #0a1422; cursor: grab; touch-action: none; }   /* v9.67 — interactive canvas tile map (draggable shared pin) */
.globe-mini-cv:active { cursor: grabbing; }
.globe-sv-link { position: absolute; left: 8px; bottom: 8px; z-index: 3; font-size: 12px; font-weight: 700; text-decoration: none;
  background: rgba(15,23,42,.86); color: #7dd3fc; border: 1px solid rgba(125,211,252,.5); border-radius: 8px; padding: 5px 10px; }
.globe-sv-link:hover { background: rgba(15,23,42,.96); }
/* v9.54 — in-app Street View key-enable panel (replaces the pop-out link) */
.globe-svkey { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; height: 100%; justify-content: center; }
.globe-svkey-h { font-size: 15px; font-weight: 800; color: #7dd3fc; }
.globe-svkey p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--fg); opacity: .9; }
.globe-svkey-in { background: rgba(255,255,255,.06); color: var(--fg); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12px; }
.globe-svkey-go { align-self: flex-start; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 9px; cursor: pointer; background: rgb(var(--acc)); color: #041018; border: 0; }
.globe-svkey-go:hover { filter: brightness(1.08); }
.globe-svkey-help { font-size: 11.5px; color: #7dd3fc; }
/* v9.69 — 📌 bookmark-this-spot button in a globe map window's title bar */
.globe-mm-head { background: none; border: 0; cursor: pointer; font-size: 14px; line-height: 1; color: inherit; padding: 0 4px; opacity: .85; }
.globe-mm-head:hover { opacity: 1; transform: scale(1.12); }
/* v9.69 — 📌 MAP BOOKMARKS widget */
.mapmarks-body { display: flex; flex-direction: column; gap: 8px; }
.mm-head { flex: none; }
.mm-addcur { width: 100%; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 10px; border-radius: 9px; cursor: pointer; background: rgba(var(--acc), .16); color: var(--fg); border: 1px solid rgba(var(--acc), .5); }
.mm-addcur:hover { background: rgba(var(--acc), .28); }
.mm-list { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.mm-empty { opacity: .75; font-size: 12.5px; line-height: 1.6; text-align: center; padding: 14px 8px; }
.mm-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: rgba(255,255,255,.03); border: 1px solid rgba(120,160,220,.12); }
.mm-go { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; padding: 2px 0; }
.mm-nm { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mm-co { font-size: 11px; opacity: .6; }
.mm-go:hover .mm-nm { color: rgb(var(--acc)); }
.mm-act { display: flex; gap: 2px; flex: none; }
.mm-act button { background: none; border: 0; cursor: pointer; font-size: 13px; padding: 3px 5px; border-radius: 7px; color: inherit; opacity: .8; }
.mm-act button:hover { opacity: 1; background: rgba(255,255,255,.08); }
.mm-edit { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 3px 7px; border-radius: 7px; color: var(--fg); background: rgba(0,0,0,.35); border: 1px solid rgba(var(--acc), .6); outline: none; }
/* ★ favourite toggle on the live-camera window */
.cam-view-fav { background: none; border: 0; color: #ffd24a; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .8; }
.cam-view-fav:hover { opacity: 1; transform: scale(1.12); }
.cam-view-fav.on { color: #ffcf33; text-shadow: 0 0 8px rgba(255,207,51,.6); }

/* ═══ v10.30 — 🖼 Wallpaper widget + supplement modal + the Interface "Wallpaper settings" button ═══ */
.cfg-wallbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; margin-top: 4px; }
.cfg-wallbtn small { font-size: 11px; opacity: .6; font-weight: 400; }
.wp-body { padding: 12px 13px; overflow-y: auto; }
.wp-toprow { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; }
.wp-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; cursor: pointer; }
.wp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.wp-track { position: absolute; inset: 0; border-radius: 24px; background: rgba(120,140,170,.28); transition: background .2s; }
.wp-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.wp-switch input:checked + .wp-track { background: rgba(var(--acc),.85); }
.wp-switch input:checked + .wp-track::after { transform: translateX(20px); }
.wp-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .55; font-weight: 700; margin: 15px 0 7px; }
.wp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wp-chip { font: inherit; font-size: 12px; padding: 6px 11px; border-radius: 999px; cursor: pointer; background: rgba(120,160,220,.1); color: var(--ink); border: 1px solid var(--line); transition: all .15s; }
.wp-chip:hover { border-color: rgba(var(--acc),.5); }
.wp-chip.on { background: rgba(var(--acc),.9); border-color: rgba(var(--acc),.9); color: #fff; box-shadow: 0 2px 10px rgba(var(--acc),.35); }
.wp-cols { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wp-col { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; padding: 0; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.wp-col.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(var(--acc),.9); }
.wp-col.wp-auto { width: auto; height: 26px; border-radius: 999px; padding: 0 12px; font: inherit; font-size: 12px; background: rgba(120,160,220,.12); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.wp-col.wp-auto.on { border-color: rgba(var(--acc),.9); background: rgba(var(--acc),.2); box-shadow: none; }
.wp-col.wp-custom { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: conic-gradient(from 0deg, #f43f5e, #f59e0b, #22c55e, #06b6d4, #6366f1, #f43f5e); }
.wp-col.wp-custom input { opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.wp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.wp-orow { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.wp-orow > span { opacity: .7; }
.wp-orow input[type=range] { width: 100%; }
.wp-sel { font: inherit; font-size: 12px; padding: 5px 7px; border-radius: 8px; background: rgba(0,0,0,.3); color: var(--ink); border: 1px solid var(--line); }
.wp-opts { display: flex; flex-direction: column; gap: 10px; }
.wp-noopts { font-size: 12px; opacity: .5; font-style: italic; }
/* v10.46 — per-widget auto-refresh countdown chip in the card header */
.wdg-refresh-cd { font-size: 11px; font-weight: 600; color: var(--muted); opacity: .8; font-variant-numeric: tabular-nums; margin-left: auto; margin-right: 4px; white-space: nowrap; align-self: center; }
.wp-schedrow { flex-direction: row !important; align-items: center; justify-content: space-between; }
.wp-sched { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.wp-hint { font-size: 11px; opacity: .5; margin: 14px 0 2px; line-height: 1.5; }

/* v10.85 — cameras on demand: a still with a ▶, and a tap-to-resume overlay on the live view */
.cctv-cell { position: relative; }
.cctv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px;
  color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.5); }
.cctv-cell:hover .cctv-play { background: rgba(0,0,0,.75); border-color: #fff; }
.cctv-rethumb { position: absolute; top: 5px; right: 6px; width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center; font-size: 12px; color: #fff; background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.3); cursor: pointer; opacity: 0; transition: opacity .15s; }
.cctv-cell:hover .cctv-rethumb { opacity: 1; }
.cctv-rethumb:hover { background: rgba(0,0,0,.8); border-color: #fff; }
.cctv-ondemand { margin-top: 8px; font-size: 11px; line-height: 1.45; color: rgba(200,215,235,.65); }
.cctv-viewwrap { position: relative; }
.cctv-resume { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; cursor: pointer; border: 0; font: inherit; font-size: 30px;
  color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.cctv-resume span { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.cctv-resume:hover { background: rgba(0,0,0,.68); }