:root{
    --bg:#0b0f17; --panel:#121826; --line:#223049; --text:#e6edf7; --dim:#8a97ad;
    --face:#52e0ff; --faceGlow:#52e0ff59; --accent:#52e0ff; --copper:#2a3d55;
    --me:#1c2b47; --meText:#e6edf7; --hab:#152033; --habText:#e6edf7; --faceSize:240px;
    --card:#141b28; --chip:#232b3a; --unread:#12324a;
    /* the tiny round face by HAB's chat bubbles (a mask, so it takes his face colour) */
    --habMini:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ccircle cx='8.5' cy='10' r='1.7' fill='%23000' stroke='none'/%3E%3Ccircle cx='15.5' cy='10' r='1.7' fill='%23000' stroke='none'/%3E%3Cpath d='M8 14.5q4 3.5 8 0' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  [hidden]{display:none!important}
  /* scrollbars: thin, in the colours picked in Settings → Look */
  ::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-corner{background:transparent}
  ::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 38%,transparent);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--accent) 70%,transparent);background-clip:padding-box}
  @supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 45%,transparent) transparent}}
  html,body{height:100%;margin:0;background:var(--bg);color:var(--text);
    font:16px/1.4 var(--font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);overscroll-behavior:none}
  textarea,input,select{font-family:inherit}
  html.textured body{background-image:var(--tex);background-attachment:fixed}
  #app{display:flex;flex-direction:column;height:100dvh;max-width:900px;margin:0 auto;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px}
  #backBtn{margin-left:6px;width:32px;height:30px;padding:0;border-radius:10px;font-size:17px;line-height:1}
  #drawerBtn{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:13px;z-index:4}
  #drawerBtn .dbIcon{width:16px;height:12px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 5px/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 10px/100% 2px no-repeat}
  .hdrSpacer{width:78px}#brand{text-align:center}
  .dProj{display:flex;align-items:center;gap:6px;margin:10px 0 2px;font-weight:700;font-size:13px;cursor:pointer;color:var(--accent)}.dProj .pn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dProj small{opacity:.6;font-weight:400}
  .dProj button{padding:2px 8px;font-size:12px}.dProjBody{margin-left:8px;border-left:2px solid var(--line);padding-left:6px}
  #newProj{display:flex;gap:6px;margin:6px 0}#newProj input{flex:1;min-width:0}
  header b{letter-spacing:.2em;color:var(--accent)}
  header div{display:flex;gap:6px}
  button{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);
    border-radius:10px;padding:8px 12px;cursor:pointer}
  button:active{background:var(--line)}
  button:disabled{opacity:.5}
  button.primary,button.sel{border-color:var(--accent);color:var(--accent)}

  /* face */
  #faceWrap{flex:0 0 auto;display:flex;justify-content:center;padding:0 0 4px}
  #face{width:min(60vw,var(--faceSize));height:auto;filter:drop-shadow(0 0 12px var(--faceGlow));transition:width .3s;transform-origin:50% 80%;
    position:relative;z-index:1;overflow:visible}   /* his head is always drawn over his body; hats may poke out of the box */
  /* solid head: while suited up (and until the window is fully back to normal) nothing behind his face shows through */
  .fFill{fill:var(--bg);stroke:none;display:none}
  #app.suited .fFill{display:inline}
  #app.flowmode #face{width:min(30vw,110px)}
  #app.claudemode #face{width:min(22vw,84px)}
  #app.claudemode #status{display:none}
  .fs{stroke:var(--face);fill:none}
  .ff{fill:var(--face)}
  .fm{fill:var(--bg);stroke:var(--face)}
  .fpup{fill:var(--bg)}
  #status{text-align:center;color:var(--dim);font-size:13px;min-height:18px}

  /* ---- HAB's Hub frame: a slim HAB header (slides away while you scroll down), the bottom dock, and card pages.
     Theme colours drive everything: soft shadows, 16 px rounded cards, gentle motion (200 ms or less). */
  #habTop{position:relative;z-index:6;height:46px;flex:0 0 auto;gap:6px;padding:4px 10px 4px 14px;background:transparent;transition:margin-top .2s ease}
  #app.topHide #habTop{margin-top:-46px}
  #app.uiSnap #habTop,#app.uiSnap #face{transition:none!important}
  #habTop #brand{font-family:inherit;font-size:22px;font-weight:800;letter-spacing:.14em;color:var(--accent)}
  #topSearch{width:38px;height:38px;flex:0 0 38px;padding:0;border:0;border-radius:12px;background:none;font-size:18px;line-height:38px;text-align:center}
  #topSearch:active{background:color-mix(in srgb,var(--accent) 14%,transparent)}
  /* the small dot by "HAB": his status (green OK, amber pulsing = working, red = problem, grey = off) */
  #brandDot{display:inline-block;width:9px;height:9px;border-radius:50%;margin:-14px 0 0 3px;align-self:center;background:var(--dim);flex:0 0 auto;transition:background .2s}
  #brandDot.ok{background:#3fd87f;box-shadow:0 0 6px #3fd87f}#brandDot.work{background:#ffb020;animation:hubPulse 1.2s ease-in-out infinite}#brandDot.bad{background:#ff4d5e;box-shadow:0 0 6px #ff4d5e}
  #habTop .hdrSpacer{flex:1;width:auto}
  .habRound{width:38px;height:38px;flex:0 0 38px;padding:0;border:0;border-radius:50%;background:var(--chip);font-size:17px;line-height:38px;text-align:center;position:relative;transition:transform .12s}
  .habRound:active{transform:scale(.92);background:var(--chip)}
  /* the bottom dock: 💬 Chat · 🔀 Flow · HAB's face (Home) · 🔔 Inbox · ☰ Menu (kids: Chat · face · Menu). Theme coloured, soft blur,
     rounded top corners; the page you're on glows in the accent colour; new things are small accent dots */
  #app{--dockH:62px}
  #habTabs{display:flex;align-items:flex-end;gap:2px;flex:0 0 auto;position:relative;z-index:7;min-height:var(--dockH);padding:4px 8px env(safe-area-inset-bottom);
    background:color-mix(in srgb,var(--card) 82%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
    border-radius:20px 20px 0 0;box-shadow:0 -4px 18px rgba(0,0,0,.12);border-top:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))}
  #habTabs button{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;border-radius:14px;padding:7px 0 6px;color:var(--dim);transition:background .18s,color .18s}
  #habTabs button i{font-style:normal;font-size:21px;line-height:1;display:inline-block;filter:grayscale(1) opacity(.6);transition:filter .18s,transform .18s}
  #habTabs button small{font-size:11px;font-weight:600;line-height:1;letter-spacing:.02em}
  #habTabs button.on{color:var(--accent)}
  #habTabs button.on i{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 70%,transparent));transform:translateY(-1px)}
  #habTabs button.on small{text-shadow:0 0 8px color-mix(in srgb,var(--accent) 55%,transparent)}
  #habTabs button:not(.dockFace):hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
  /* HAB's face in the middle: a raised round button (his live face, mood and blink) with a ring that glows in his mood colour */
  #habTabs button.dockFace{flex:0 0 66px;height:66px;margin:-22px 4px 4px;padding:0;border-radius:50%;background:var(--bg);overflow:visible;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--moodC,var(--face)) 75%,transparent),0 0 16px 3px color-mix(in srgb,var(--moodC,var(--face)) 45%,transparent),0 4px 12px rgba(0,0,0,.25);transition:box-shadow .25s,transform .12s;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
  #habTabs button.dockFace:active{transform:scale(.94)}
  #habTabs button.dockFace.on{box-shadow:0 0 0 3px var(--accent),0 0 22px 6px color-mix(in srgb,var(--accent) 55%,transparent),0 4px 12px rgba(0,0,0,.25)}
  #habTabs button.dockFace.listen{box-shadow:0 0 0 3px #ff4d5e,0 0 22px 6px #ff4d5e88}
  #dockFace{width:58px;height:auto;display:block;margin:2px auto 0;pointer-events:none;filter:drop-shadow(0 0 4px var(--faceGlow))}
  #habTabs button.dockFace small{position:absolute;bottom:-15px;left:0;right:0;text-align:center}
  #habTabs .dockGap{flex:1 1 0}                                    /* an empty slot, so HAB's face stays in the middle */
  html.kbUp #habTabs{display:none}                                 /* the phone keyboard is up: the chat box gets the room */
  .habBadge{position:absolute;top:4px;left:calc(50% + 9px);min-width:9px;width:9px;height:9px;padding:0;border-radius:50%;background:var(--accent);color:transparent;font-size:0;
    box-shadow:0 0 0 2px var(--card),0 0 6px color-mix(in srgb,var(--accent) 70%,transparent)}
  .habBadge.dot{min-width:9px;width:9px;height:9px;padding:0}
  .habBadge.n{width:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;color:var(--bg);font:700 11px/18px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-align:center}
  .habPop{position:absolute;right:10px;top:100%;z-index:61;min-width:210px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.25);display:grid;gap:2px}
  .habPop button{display:flex;gap:10px;align-items:center;text-align:left;background:none;border:0;border-radius:10px;padding:10px 12px;font-size:15px}
  .habPop button:hover{background:var(--chip)}
  .habScroll{flex:1;min-height:0;overflow-y:auto;padding:4px 0 18px;-webkit-overflow-scrolling:touch}
  .habCard{display:block;background:var(--card);color:var(--text);border:0;border-radius:16px;margin:8px 10px;padding:12px;box-shadow:0 2px 10px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06)}
  .habPageHead{display:flex;align-items:center;gap:8px;padding:8px 14px 2px}
  .habPageHead h2{margin:0;flex:1;font-size:24px;font-weight:800}
  .habPic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:var(--bg);box-shadow:0 0 0 2px var(--accent),0 0 10px var(--faceGlow);font-size:20px;font-weight:700;color:#fff}
  .habPic svg{width:92%;height:auto}
  .habPic.sm{width:36px;height:36px;font-size:16px}.habPic.lg{width:56px;height:56px;font-size:24px}
  .habPic.person{box-shadow:none}
  /* 🏠 HAB's Hub: his face is the hero (a soft glow tinted by his mood over a faint, slowly drifting circuit trace), then a
     greeting, status chips and quick actions ("What's new" is the ✨ pill in the top bar) */
  #app.hubHome #faceWrap{position:relative;isolation:isolate;padding-top:6px}
  #app.hubHome #faceWrap::before,#app.hubHome #faceWrap::after{content:'';position:absolute;inset:-8px 0 -4px;z-index:-1;pointer-events:none}
  #app.hubHome #faceWrap::before{background:radial-gradient(closest-side at 50% 52%,color-mix(in srgb,var(--moodC,var(--face)) 34%,transparent),transparent 100%);transition:background .2s}
  #app.hubHome #faceWrap::after{background:var(--accent);opacity:.13;animation:hubDrift 90s linear infinite;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M0 20h40l10 10h40M90 30v30h30l10-10h30M20 120V80l15-15h35M70 65v25h45M120 0v20h40M0 95h20'/%3E%3Ccircle cx='90' cy='30' r='3'/%3E%3Ccircle cx='70' cy='65' r='3'/%3E%3Ccircle cx='115' cy='90' r='3'/%3E%3Ccircle cx='120' cy='20' r='3'/%3E%3C/svg%3E") 0 0/160px 120px repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M0 20h40l10 10h40M90 30v30h30l10-10h30M20 120V80l15-15h35M70 65v25h45M120 0v20h40M0 95h20'/%3E%3Ccircle cx='90' cy='30' r='3'/%3E%3Ccircle cx='70' cy='65' r='3'/%3E%3Ccircle cx='115' cy='90' r='3'/%3E%3Ccircle cx='120' cy='20' r='3'/%3E%3C/svg%3E") 0 0/160px 120px repeat}
  @keyframes hubDrift{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:160px 120px;mask-position:160px 120px}}
  @keyframes hubPulse{50%{opacity:.35}}
  .hubGreet{text-align:center;font-size:16.5px;font-weight:600;padding:4px 18px 2px;min-height:26px}
  .hubChips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:6px 10px 4px}
  .hubChip{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;background:var(--card);color:var(--text);padding:6px 12px 6px 10px;font-size:13px;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.08);max-width:100%;transition:transform .15s}
  .hubChip:active{transform:scale(.95)}
  .hubChip small{color:var(--dim);font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hubChip .ci{width:15px;height:15px}
  .hubDot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--dim)}
  [data-state="ok"] > .hubDot,[data-state="ok"] > h3 > .hubDot{background:#3fd87f;box-shadow:0 0 5px #3fd87f}
  [data-state="work"] > .hubDot,[data-state="work"] > h3 > .hubDot{background:#ffb020;animation:hubPulse 1.2s ease-in-out infinite}
  [data-state="bad"] > .hubDot,[data-state="bad"] > h3 > .hubDot{background:#ff4d5e;box-shadow:0 0 5px #ff4d5e}
  [data-state="loading"] > .hubDot{opacity:.4}
  .homeGame{display:flex;flex-direction:column;align-items:center;gap:2px;width:calc(100% - 20px);margin:4px 10px 10px;padding:14px 12px;border-radius:16px;font-size:17px;
    border:2px solid #6b4cff;background:color-mix(in srgb,#6b4cff 12%,transparent);color:var(--text)}
  .homeGame small{font-size:12px;color:var(--dim);font-weight:400}
  .homeGame.on{background:#6b4cff;color:#fff;border-color:#6b4cff}.homeGame.on small{color:#e9e4ff}
  .homeJobs{display:block;width:calc(100% - 20px);margin:-4px 10px 10px;padding:8px 12px;border-radius:12px;font-size:13px;color:var(--dim);text-align:left}
  .jobsNow{margin:8px 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:14px;line-height:1.45}
  .jobRow{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
  .jobRow b{flex:1;min-width:0;font-weight:600}.jobRow small{color:var(--dim)}.jobRow .jobSt{font-size:12px;color:var(--dim);white-space:nowrap}
  .jobRow.running .jobSt{color:var(--accent);font-weight:700}
  .hubActs{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;margin:8px 10px}
  .hubActs button{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;border-radius:16px;background:var(--card);padding:12px 4px 10px;font-size:22px;line-height:1;box-shadow:0 2px 10px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);transition:transform .15s}
  .hubActs button:active{transform:scale(.95)}
  .hubActs button span{font-size:12.5px;font-weight:600;color:var(--text)}
  .hubActs .habBadge{top:6px;left:auto;right:10px}
  .hubHead{margin:14px 16px 4px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
  .hubNew{margin:0 10px;background:var(--card);border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);overflow:hidden}
  .hubRow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card);border:0;border-radius:0;border-bottom:1px solid var(--line);padding:10px 12px;touch-action:pan-y;position:relative;transition:transform .18s,opacity .18s}
  .hubRow:last-child{border-bottom:0}
  .hubRow:hover{background:var(--chip)}
  .hubRow.dragging{transition:none}
  .hubRow .hubIco{flex:0 0 26px;text-align:center;font-size:19px}
  .hubRow .hubTxt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px}
  .hubRow time{flex:0 0 auto;color:var(--dim);font-size:12px}
  .hubNew .feedEmpty{padding:16px}
  #hubSheet{position:fixed;left:0;right:0;bottom:0;z-index:80;max-width:520px;margin:0 auto;background:var(--card);color:var(--text);border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.25);padding:14px 16px calc(16px + env(safe-area-inset-bottom));animation:hubUp .18s ease-out}
  @keyframes hubUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
  #hubSheet h3{margin:0 0 6px;font-size:17px;display:flex;align-items:center;gap:8px}
  #hubSheet p{margin:4px 0;color:var(--dim);font-size:14px;white-space:pre-wrap}
  #hubSheet .hsActs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  #hubSheet .hsActs button{border:0;border-radius:999px;background:var(--chip);font-weight:600;padding:9px 16px}
  #hubSheet .hsActs button.primary{background:var(--accent);color:var(--bg)}
  #hubShade{position:fixed;inset:0;z-index:79;background:rgba(0,0,0,.25)}
  /* ✨ What's new: a small pill by the HAB wordmark (a count in the accent colour when something is unseen, a faint ✨ when not)
     that opens a sheet sliding down from the top bar; tap outside or swipe it up to close */
  #newsPill{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;height:28px;margin-left:6px;padding:0 9px;border:0;border-radius:999px;background:none;font-size:14px;line-height:1;opacity:.4;transition:opacity .18s,background .18s}
  #newsPill.has{opacity:1;background:color-mix(in srgb,var(--accent) 16%,transparent)}
  #newsPill b{font:700 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--accent);letter-spacing:0}
  #newsPill.pulse{animation:newsPulse .9s ease-out 1}
  @keyframes newsPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);transform:scale(1)}35%{transform:scale(1.12)}100%{box-shadow:0 0 0 12px transparent;transform:scale(1)}}
  #newsShade{position:fixed;inset:0;z-index:81;background:rgba(0,0,0,.25)}
  #newsSheet{position:fixed;left:0;right:0;top:0;z-index:82;max-width:560px;margin:0 auto;max-height:72dvh;display:flex;flex-direction:column;background:var(--card);color:var(--text);border-radius:0 0 16px 16px;box-shadow:0 8px 30px rgba(0,0,0,.25);padding:calc(10px + env(safe-area-inset-top)) 0 6px;animation:newsDown .2s ease-out;transition:transform .18s}
  #newsSheet.dragging{transition:none}
  @keyframes newsDown{from{transform:translateY(-24px);opacity:0}to{transform:none;opacity:1}}
  #newsSheet .nsHead{display:flex;align-items:center;gap:8px;padding:2px 14px 8px}
  #newsSheet .nsHead b{flex:1;font-size:17px}
  #newsSheet .nsHead button{border:0;border-radius:999px;background:var(--chip);font-weight:600;font-size:13px;padding:7px 12px}
  #newsSheet .hubNew{flex:1;min-height:0;overflow-y:auto;box-shadow:none;border:1px solid var(--line)}
  #newsSheet .nsGrip{flex:0 0 auto;width:40px;height:5px;border-radius:3px;background:var(--line);margin:8px auto 2px;cursor:grab}
  .hubRow.unseen .hubTxt{font-weight:700}
  .hubRow.unseen::before{content:'';position:absolute;left:3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent)}
  @media (prefers-reduced-motion:reduce){#newsPill.pulse,#newsSheet{animation:none}}
  @media (prefers-reduced-motion:reduce){#app.hubHome #faceWrap::after,.hubDot,#brandDot.work{animation:none!important}#hubSheet{animation:none}.hubRow{transition:none}}
  .habActs{display:flex;flex-wrap:wrap;gap:8px;padding:6px 12px}
  .habActs button{border:0;background:var(--chip);border-radius:999px;font-weight:600;font-size:14px;padding:8px 14px}
  .habSearch{display:block;width:calc(100% - 24px);margin:6px 12px 8px;border:0;border-radius:999px;background:var(--chip);color:var(--text);padding:10px 16px;font-size:16px}
  .habHelp{padding:6px 16px;text-align:center}
  section.on:not(#flow){animation:habIn .2s ease-out}            /* the Flow board is left exactly as it was */
  @keyframes habIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){section.on:not(#flow){animation:none}#habTop,#habTabs button::after,#habTabs button i{transition:none}}
  /* feed cards */
  .feedCard{padding:12px 0 4px}
  .feedHead{display:flex;align-items:center;gap:10px;padding:0 12px}
  .feedHead div{flex:1;min-width:0}.feedHead b{display:block;font-size:15px}.feedHead small{color:var(--dim);font-size:12.5px}
  .feedHead .habMore{background:none;border:0;font-size:20px;padding:2px 8px;color:var(--dim)}
  .feedBody{padding:8px 12px 4px;white-space:pre-wrap;word-wrap:break-word;font-size:15px}
  .feedImg{display:block;width:100%;max-height:420px;object-fit:cover;margin-top:6px;background:var(--bg);cursor:zoom-in}
  .feedCount{padding:6px 12px 0;color:var(--dim);font-size:13px}
  .feedActs{display:flex;border-top:1px solid var(--line);margin:6px 12px 0;padding-top:2px}
  .feedActs button{flex:1;background:none;border:0;color:var(--dim);font-weight:600;font-size:14px;padding:8px 2px;border-radius:8px}
  .feedActs button:hover{background:var(--chip)}
  .feedActs button.liked{color:var(--accent)}
  .feedEmpty{text-align:center;color:var(--dim);padding:24px 16px}
  /* Chats (Messenger style) */
  #chatsList .dItem{display:flex;align-items:center;gap:12px;padding:8px 12px;margin:0 6px;border-radius:12px;background:none;border:0;cursor:pointer;position:relative}
  #chatsList .dItem:hover,#chatsList .dItem.on{background:var(--chip)}
  #chatsList .habcText{flex:1;min-width:0;display:flex;flex-direction:column}
  #chatsList .habcText b{font-size:15.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #chatsList .habcText small{color:var(--dim);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #chatsList time{color:var(--dim);font-size:12px;flex:0 0 auto}
  #chatsList .dMore{opacity:1;background:none;border:0;font-size:18px;padding:4px 8px}
  #chatsList .dMenu{right:12px;top:70%}
  #chatsList .habProj{color:var(--accent);font-size:12px}
  #chatsList .habcDay{color:var(--dim);font-size:12.5px;font-weight:700;padding:14px 18px 4px;text-transform:uppercase;letter-spacing:.04em}
  /* Family */
  .inPage{display:flex;flex-direction:column}
  .inPage .pane{overflow:visible;padding:4px 10px 12px}
  #family .famMember{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;background:var(--card);border:0;border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.12);padding:12px}
  #family .famMember > :not(.habPic){grid-column:2}
  #family .famMember .habPic{grid-row:1 / span 3}
  #family .famChat{background:var(--card);border:0;border-radius:14px;padding:10px 12px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
  #family .famChat{margin:0 0 12px}
  /* Notifications: a list; unread rows are light blue; tap a row to open it */
  #notif .dhead{padding:8px 14px 2px}
  #notif .stabs{border-bottom:0;padding:4px 12px 6px}
  #notif .stabs button{border:0;border-radius:999px;background:var(--chip);flex:0 0 auto;padding:7px 14px;font-weight:600}
  #notif .stabs button.on{background:var(--unread);color:var(--accent)}
  #notif #mSelBar{padding:0 12px 4px}
  #notif .pane{padding:0 0 12px}
  #notif .mcard{border:0;border-radius:0;margin:0;background:transparent;padding:12px 14px;cursor:pointer}
  #notif .mcard.new{background:var(--unread)}
  #notif .mcard.sel{box-shadow:inset 0 0 0 2px var(--accent)}
  #notif .mcard .micon{width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:var(--chip);display:inline-flex;align-items:center;justify-content:center;font-size:22px}
  #notif .mcard .mtop b{font-weight:600}
  #notif .mcard .mmeta{padding-left:54px}
  #notif .mcard.new .mmeta{color:var(--accent);font-weight:600}
  #notif .mcard:not(.open) > :not(.mtop):not(.mmeta):not(.mswipe){display:none}
  #notif .mcard.open{cursor:default}
  #notif .dGroup{padding:10px 14px 2px}
  #notif .dEmpty{padding:24px 16px;text-align:center}
  /* Menu */
  .habMe{display:flex;align-items:center;gap:12px;width:calc(100% - 20px);text-align:left;cursor:pointer}
  .habMe b{display:block;font-size:17px}.habMe small{color:var(--dim);font-size:13px}
  /* the Menu's grouped list: a small section title, then one rounded card of rows; each row has a small coloured icon */
  .mnSec{margin:16px 22px 6px;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
  .mnList{margin:0 10px;background:var(--card);border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);overflow:hidden}
  .mnList .mnItem{border-radius:0;padding:9px 14px;gap:12px;border-bottom:1px solid var(--line)}
  .mnList .mnItem:last-child{border-bottom:0}
  .dsCard{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:10px 0;display:grid;gap:6px}
  .dsCard h4{margin:0;font-size:16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .dsPill{font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--line)}
  .dsPill.good{background:#1f8a4c;color:#fff}.dsPill.thin{background:#c58a12;color:#fff}.dsPill.loss{background:#c43c3c;color:#fff}
  .dsMath{font-size:13px;opacity:.85;line-height:1.5}
  .dsActs{display:flex;gap:8px;flex-wrap:wrap}.dsActs button{font-size:13px;padding:6px 12px}
  .dsForm{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.dsForm input{flex:1 1 120px;min-width:0}
  .dsNumForm{display:grid;gap:10px}.dsNumForm label{display:grid;gap:4px;font-size:14px}
  .dsKit{border-top:1px solid var(--line);padding-top:8px;display:grid;gap:8px;font-size:14px}
  .dsKit b{display:flex;justify-content:space-between;align-items:center;gap:8px}.dsKit b button{font-size:12px;padding:3px 10px}
  .dsKit ul{margin:0;padding-left:18px}.dsKit img{max-width:220px;border-radius:12px}
  .dsSrc{font-size:12px;opacity:.75;overflow-wrap:anywhere}
  .bizTop{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
  .bizTop div{border:1px solid var(--line);border-radius:12px;padding:8px 10px;text-align:center}
  .bizTop small{display:block;font-size:11px;opacity:.7}.bizTop b{font-size:17px}
  .bizNeg{color:#e05555}.bizPos{color:#2fa866}
  .bizSec{font-size:12px;font-weight:700;opacity:.65;text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
  .dsCard ul{margin:0;padding-left:18px;font-size:14px}
  .bizRow{display:flex;justify-content:space-between;gap:8px;align-items:center;border-bottom:1px solid var(--line);padding:6px 0;font-size:14px}
  .bizRow button{font-size:12px;padding:2px 8px}
  #bizTabs{overflow-x:auto;scrollbar-width:none}#bizTabs button{flex:0 0 auto;padding:7px 12px}
  .jobPick{display:flex;gap:6px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:none}
  .jobPick button{flex:0 0 auto;border-radius:999px;padding:8px 14px;font-weight:600;background:var(--chip)}
  .jobPick button.on{outline:2px solid var(--accent)}
  .jobPick .live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1f8a4c;margin-left:6px;vertical-align:middle}
  .jobRun{font-size:18px;padding:14px;border-radius:14px;width:100%;font-weight:700}
  .jobRun.on{background:#1f8a4c;color:#fff}.jobRun.off{background:#c43c3c;color:#fff}
  .jobState{font-weight:600}
  .tdHead{display:grid;gap:4px;margin:10px 0;font-size:14px}
  .tdItem{border:1px solid var(--line);border-radius:16px;padding:14px;margin:10px 0;display:grid;gap:10px}
  .tdItem h4{margin:0;font-size:17px}.tdItem ol{margin:0;padding-left:20px;font-size:15px;display:grid;gap:6px}
  .tdStep{display:flex;gap:12px;align-items:center;width:100%;text-align:left;font-size:16px;padding:14px;border-radius:14px;background:var(--chip);line-height:1.35}
  .tdStep .tick{flex:0 0 32px;height:32px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:18px}
  .tdStep.done{opacity:.6}.tdStep.done .tick{background:#1f8a4c;border-color:#1f8a4c;color:#fff}
  .tdBig{font-size:18px;padding:14px;border-radius:14px;width:100%;font-weight:700}
  .tdBig.go{background:#1f8a4c;color:#fff}.tdBig.no{background:transparent;border:1px solid var(--line)}
  .spWrap{border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:0 0 14px}.spWrap h4{margin:0 0 4px}
  .spWrap textarea{flex:1 1 100%;min-width:0}.tmPhoto{display:inline-block;cursor:pointer;margin:6px 0}.tmCard{border-top:1px solid var(--line);padding:8px 0}.tmCard img{max-width:120px;max-height:120px;border-radius:8px;float:right;margin-left:8px}.tmCard textarea{width:100%;box-sizing:border-box}.spWhy{display:block;color:var(--dim);font-size:12px}.spText{margin-top:10px}
  .stCard{border:1px solid var(--line);border-radius:14px;padding:12px;margin:8px 0;display:grid;gap:6px}
  .stCard .stPrice{font-weight:800;font-size:18px}.stCard small{color:var(--dim)}
  #stTabs{overflow-x:auto;scrollbar-width:none}#stTabs button{flex:0 0 auto;padding:7px 12px}
  #stDlg input,#stDlg select,#stDlg textarea{width:100%;box-sizing:border-box}
  .dutyRow{border:1px solid var(--line);border-radius:14px;padding:12px;margin:8px 0;display:grid;gap:6px}
  .dutyRow.late{border-color:#e5484d}.dutyRow.today,.dutyRow.urgent{border-color:#ffb340}
  .dutyRow .dWhen{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
  .dutyRow details{font-size:13px;color:var(--dim)}
  .dutyH{margin:16px 0 4px;font-size:15px}.dutyRed li{margin:4px 0}
  .dutySet{display:grid;gap:8px;margin-top:6px}.dutySet label{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .tdSplit{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:15px}
  .tdForm{display:grid;gap:8px}.tdForm input,.tdSel{font-size:17px;padding:12px;border-radius:12px;border:1px solid var(--line);width:100%;box-sizing:border-box}
  .shotGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:10px 0}
  .shotGrid figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:grid}
  .shotGrid img{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in;background:var(--chip)}
  .shotGrid figcaption{font-size:12px;padding:6px 8px;display:grid;gap:2px}
  .shotGrid figcaption button{justify-self:start;font-size:11px;padding:2px 8px}
  .wkFind{display:grid;gap:8px;margin:10px 0}
  .wkChips{display:flex;flex-wrap:wrap;gap:6px}.wkChips button{border-radius:999px;padding:6px 12px}
  .wkProfile{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:8px}
  .wkProfile .wkActs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .wkProfile .wkActs button{padding:10px}
  .wkProfile .wkMove{display:flex;gap:6px}.wkProfile .wkMove select{flex:1}
  .bizReportText{white-space:pre-wrap;font:inherit;font-size:14px;line-height:1.5;margin:8px 0}
  .bizTax{display:flex;gap:6px;align-items:center;font-size:14px}.bizTax input{width:70px}
  .dsForm select{flex:1 1 140px;min-width:0}
  .mnList .mnItem.mnLocked{opacity:.45;filter:grayscale(1)}
  .mnList .mnItem.mnLocked b::after{content:' 🔒';font-size:12px}
  .mnList .mnItem:hover,.mnList .mnItem:active{background:color-mix(in srgb,var(--secC,var(--accent)) 8%,transparent)}
  .mnList .mnItem i{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;color:var(--secC,var(--accent));background:color-mix(in srgb,var(--secC,var(--accent)) 16%,transparent)}
  .mnList .mnItem i .ci{width:18px;height:18px}
  .mnList .mnItem b{font-size:15.5px}
  .mnList .mnItem::after{content:'›';color:var(--dim);font-size:20px;line-height:1;margin-left:4px}
  .mnList .mnItem .habBadge{position:static;flex:0 0 auto;box-shadow:none}
  .mnList .mnItem b small{display:block;font-weight:400;font-size:12.5px;color:var(--dim);margin-top:1px}
  .mnPinMark{flex:0 0 auto;font-size:12px}
  /* 🔍 at the top of the Menu, the top level, and All settings (collapsed groups) */
  .mnSearch{display:flex;align-items:center;gap:8px;margin:4px 10px 10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 12px}
  .mnSearch input{flex:1;min-width:0;border:0;background:none;color:var(--text);font-size:16px;outline:none;padding:2px 0;margin:0}
  #menuTop{margin-top:10px}
  .mnAllHead{margin:20px 22px 6px;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
  #menuFolds{margin:0 10px;background:var(--card);border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);overflow:hidden}
  #menuFolds .mnFold{border-bottom:1px solid var(--line)}
  #menuFolds .mnFold:last-child{border-bottom:0}
  #menuFolds summary{list-style:none;display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;-webkit-user-select:none;user-select:none}
  #menuFolds summary::-webkit-details-marker{display:none}
  #menuFolds summary::after{content:'›';color:var(--dim);font-size:20px;line-height:1;transition:transform .2s}
  #menuFolds .mnFold[open] > summary::after{transform:rotate(90deg)}
  #menuFolds summary i{font-style:normal;flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;background:color-mix(in srgb,var(--secC,var(--accent)) 16%,transparent)}
  #menuFolds summary .mnSec{margin:0;flex:1;font-size:15.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text)}
  #menuFolds summary .habBadge{position:static;flex:0 0 auto;box-shadow:none}
  #menuFolds .mnList{margin:0;border-radius:0;box-shadow:none;background:transparent;border-top:1px solid var(--line)}
  #menuFolds .mnList .mnItem{padding-left:26px}
  .mnMoreBtn{display:block;width:100%;text-align:left;background:none;border:0;border-radius:0;padding:10px 14px 10px 68px;color:var(--accent);font-size:14.5px;font-weight:600;cursor:pointer}
  #menuRes .mnList{margin-top:4px}
  @keyframes setFlash{0%,55%{box-shadow:0 0 0 3px var(--accent);border-radius:8px}100%{box-shadow:0 0 0 0 transparent}}
  .setFlash{animation:setFlash 1.8s ease-out 1}
  .regBar{margin:8px 0;padding:10px 12px;border:2px solid var(--accent);border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent)}
  .regBar p{margin:4px 0 8px}.regBar .dbtns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.regBar input{flex:1;min-width:90px}
  @media (prefers-reduced-motion:reduce){.setFlash{animation:none;box-shadow:0 0 0 3px var(--accent)}#menuFolds summary::after{transition:none}}
  .habLogout{width:calc(100% - 20px);margin-top:18px!important;text-align:center;font-weight:700;cursor:pointer}
  /* 🔍 Search */
  #searchBox{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
  #searchBox .sbRow{display:flex;gap:8px;align-items:center;padding:8px 12px;background:var(--card)}
  #searchIn{flex:1;min-width:0;border:0;border-radius:999px;background:var(--chip);color:var(--text);padding:10px 16px;font-size:16px}
  #searchRes{flex:1;overflow-y:auto;padding:6px 0 20px}
  #searchRes .srHead{color:var(--dim);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:12px 16px 4px}
  #searchRes button{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:none;border:0;border-radius:0;padding:10px 16px}
  #searchRes button:hover{background:var(--chip)}
  #searchRes button span{flex:1;min-width:0}#searchRes button small{display:block;color:var(--dim);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* HAB's face: the hero on 🏠 Home (HAB's Hub); hidden on the other card pages (the NEEDS YOUR OK button stays, floating);
     a small round head while you scroll back in a chat */
  #app.habPage:not(.hubHome) #faceWrap{padding:0;height:0;overflow:visible}
  #app.habPage:not(.hubHome) #faceWrap > :not(#approveBtn):not(#approveX){display:none!important}
  #app.habPage #status{display:none}
  #app.habPage:not(.hubHome) #approveBtn{position:fixed;top:auto;right:14px;bottom:calc(16px + var(--dockH) + env(safe-area-inset-bottom));transform:none;width:84px;height:84px;font-size:10px}
  #app.habPage:not(.hubHome) #approveX{position:fixed;top:auto;right:10px;bottom:calc(96px + var(--dockH) + env(safe-area-inset-bottom))}
  #app.hubHome #face{width:min(46vw,var(--faceSize),34vh)}
  #app.hubHome #homeNewBtn,#app.hubHome #tourBtn,#app.hubHome #quickDock,#app.hubHome #qdShade{display:none!important}
  @media (max-width:520px){#app.chatmode:not(.approving) #face{width:min(38vw,var(--faceSize),19vh)}}
  #app.faceSmall #face{width:min(18vw,64px)!important;border-radius:50%;background:var(--card);box-shadow:0 0 0 2px var(--accent)}
  #app.faceSmall #faceWrap > button:not(#approveBtn):not(#approveX),#app.faceSmall #quickDock,#app.faceSmall #emoBubble{display:none!important}
  .bdot{position:absolute;top:3px;left:calc(50% + 8px);width:10px;height:10px;border-radius:50%;background:#ff4d4d;border:2px solid var(--bg)}
  main #form,main #cForm{padding-bottom:8px}
  main .row{padding-bottom:8px}
  main #flowLog{margin-bottom:8px}
  main .fscroll{padding-bottom:10px}
  #uhood{padding-bottom:10px!important}
  /* ☰ More: grouped list with icons */
  .mnGroup{color:var(--dim);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:14px 4px 4px}
  .mnGroup:first-child{margin-top:4px}
  .mnItem{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;
    border-radius:10px;padding:11px 10px;font-size:16px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .mnItem:hover,.mnItem:active{background:var(--line)}
  .mnItem i{font-style:normal;width:26px;text-align:center;font-size:19px;color:var(--accent)}
  .mnItem b{flex:1;font-weight:500}
  .mnItem small{color:var(--dim);font-size:12px}
  .mnItem .bdot{position:static;flex:0 0 auto}
  .mnPin{margin:2px 0 6px 48px;display:flex;gap:6px}
  #moreDlg .dhead{gap:8px}#moreDlg .dhead b{flex:1}#moreOptBtn{font-size:13px;padding:4px 10px}
  #moreOpts{padding:4px 16px 10px;border-bottom:1px solid var(--line);display:grid;gap:8px}#moreOpts .moRow{display:flex;align-items:center;gap:10px;font-size:14px}
  #moreOpts .moRow>span:first-child{width:96px;color:var(--dim)}#moreOpts input[type=range]{flex:1}#moreOpts b{width:44px;text-align:right;font-size:13px}
  #moreOpts .seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}#moreOpts .seg button{border:0;border-radius:0;padding:6px 12px;background:none;color:var(--text)}#moreOpts .seg button.on{background:var(--accent);color:#06222a}
  #moreOpts:not(.moIsGrid) .moGrid{display:none}
  .mnTiles{display:grid;grid-template-columns:repeat(var(--mcols,4),minmax(0,1fr));gap:8px;margin:4px 0 6px}
  .mnTile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;aspect-ratio:1/1;min-width:0;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:6px 4px;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .mnTile:hover,.mnTile:active{border-color:var(--accent)}.mnTile i{font-style:normal;font-size:calc(26px * var(--msize,1));line-height:1;color:var(--accent)}.mnTile i .ci{width:calc(26px * var(--msize,1));height:calc(26px * var(--msize,1))}
  .mnTile small{font-size:calc(11px * min(var(--msize,1), 1.25));color:var(--dim);text-align:center;line-height:1.15;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .mnTile .bdot{position:absolute;top:6px;right:6px}.mnTile .pinMark{position:absolute;top:4px;left:6px;font-size:10px}
  #moreList.rowsCap{overflow-y:auto}
  #moreList .mnTile i .ci{width:calc(28px * var(--msize,1));height:calc(28px * var(--msize,1))}
  .mnPin button{font-size:14px;padding:6px 12px}
  main{flex:1;min-height:0;position:relative}
  section{position:absolute;inset:0;display:none;flex-direction:column}
  section.on{display:flex}

  /* chat */
  #log{flex:1;overflow-y:auto;padding:8px 14px;display:flex;flex-direction:column;gap:8px}
  #log>:first-child{margin-top:auto}                            /* a short chat (and the say-hi suggestions) sits at the bottom, just above the chat box */
  .msg{max-width:88%;padding:9px 12px;border-radius:14px;white-space:pre-wrap;word-wrap:break-word}
  .me{align-self:flex-end;background:var(--me);color:var(--meText)}
  .hab{align-self:flex-start;background:var(--hab);color:var(--habText);border:1px solid var(--line)}
  .hab.test{border-style:dashed}
  .sys{align-self:stretch;color:var(--dim);background:var(--panel);border:1px dashed var(--line);border-radius:10px;
    padding:8px 10px;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.55 ui-monospace,Menlo,Consolas,monospace;overflow-x:auto}
  #log > *, #mcLog > *{flex-shrink:0}                               /* never squash a message to one line when the chat is full (the overflow above allowed it) */
  .sys.paw{align-self:center;background:none;border:0;padding:2px 8px;font-family:inherit;font-size:12px;opacity:.8}
  .err{align-self:center;color:#ff9aa2;font-size:14px;text-align:center}
  .hint0{align-self:center;color:var(--dim);font-size:13px;text-align:center;margin-top:12px}
  .welcome{display:flex;flex-direction:column;align-items:center;gap:8px}.welcome .tiny{font-size:12px;opacity:.7}
  .chipq,.retry{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:999px;padding:8px 14px;font:inherit;cursor:pointer}
  .retry{margin-top:6px;border-radius:8px}
  /* 💬 the chat panel: the conversation in a framed card (16 px corners) under HAB's face, with a slim header, clear bubbles (HAB's on
     the left with a tiny round face, yours on the right in the accent colour) and the outlined message box always at its bottom,
     above the phone keyboard (--kb, from visualViewport) and the iPhone's home bar */
  #chat{inset:2px 8px calc(6px + var(--kb,0px)) 8px;background:var(--chatBg,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:16px;box-shadow:0 2px 14px rgba(0,0,0,.12)}
  #chatHead{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding:6px 8px 6px 14px;border-bottom:1px solid var(--line);background:var(--card);border-radius:16px 16px 0 0}
  #chatHead b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px;font-weight:700}
  #chatHead button{flex:0 0 auto;border:0;background:var(--chip);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:600}
  #log .msg.me{background:var(--accent);color:var(--accentText,#fff);border-bottom-right-radius:5px}
  #log .msg.hab:not(.tourMsg){position:relative;margin-left:30px;max-width:calc(88% - 30px);background:var(--habBub,var(--hab));color:var(--habBubText,var(--habText));border-color:color-mix(in srgb,var(--accent) 18%,var(--line));border-bottom-left-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
  #log .msg.hab.vo:not(.tourMsg){color:transparent}
  #log .msg.hab:not(.tourMsg)::before,#log .chatHello .chAva{content:'';position:absolute;left:-30px;bottom:0;width:24px;height:24px;background:var(--face);-webkit-mask:var(--habMini) center/100% no-repeat;mask:var(--habMini) center/100% no-repeat}
  #log .msg.hab:not(.tourMsg) + .msgTools{margin-left:36px}
  #log .msg.hab:not(.tourMsg) + .msgTime{margin-left:38px}
  #log .chatHello{position:relative;align-self:flex-start;margin:auto 0 0 30px;max-width:calc(88% - 30px);text-align:left;font-size:15px;color:var(--habBubText,var(--habText))}
  #log .chatHello .chBub{display:block;padding:9px 12px;border-radius:14px 14px 14px 5px;background:var(--habBub,var(--hab));border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));box-shadow:0 1px 3px rgba(0,0,0,.08)}
  #log .chatHello + .welcome{margin-top:4px}
  #chat #form{flex:0 0 auto;margin:6px 8px 8px;padding:4px;gap:4px;align-items:flex-end;border:1.5px solid color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:22px;background:var(--bg)}
  #chat #form:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
  #chat #input{border:0;background:transparent;padding-left:6px;padding-right:6px;outline:none;min-height:40px}
  #chat #form button{min-height:40px;border:0;background:none;border-radius:999px;padding:6px 9px}
  #chat #form #sendBtn{background:var(--accent);color:var(--accentText,#fff);font-weight:700;padding:6px 15px}
  #chat #form #micBtn.rec{background:#d63a3a;color:#fff}
  /* phones: room for the words (🧠 deep think is just the brain, lit when on; tighter buttons) */
  @media (max-width:520px){
    #chat #form{gap:2px}
    #chat #form button{padding:6px 7px}
    #chat #form #sendBtn{padding:6px 13px}
    #chat #deepTog .dtTrack{display:none}
    #chat #deepTog .dtIco{font-size:16px;padding:3px;border-radius:50%;opacity:.5}
    #chat #deepTog.on .dtIco{opacity:1;background:color-mix(in srgb,#7b5cff 32%,transparent)}
  }
  #netBar{position:fixed;top:env(safe-area-inset-top,0);left:0;right:0;z-index:9999;background:#b3261e;color:#fff;text-align:center;padding:6px 12px;font-size:13px}
  #lTrust{font-size:12px;color:var(--dim);margin-top:10px;line-height:1.5}
  form{position:relative;display:flex;gap:8px;padding:8px 14px 8px}
  input,textarea,select{width:100%;font:inherit;color:var(--text);background:var(--panel);
    border:1px solid var(--line);border-radius:10px;padding:10px}
  form input{flex:1;min-width:0}
  /* the message box grows upward as you type, so a long message can be proofread before it is sent */
  #form{align-items:flex-end}
  #form button{min-height:44px}
  #form.tall{flex-wrap:wrap}#form.tall #input{order:-1;flex:1 1 100%}#form.tall #sendBtn{flex:1}
  #input{flex:1;min-width:0;resize:none;overflow-y:hidden;line-height:1.35;min-height:44px;max-height:42dvh;padding-top:11px;padding-bottom:11px;box-sizing:border-box}
  #slashBtn{font-family:ui-monospace,Menlo,monospace;color:var(--accent)}
  #cmdPop{position:absolute;left:14px;right:14px;bottom:100%;max-height:46vh;overflow-y:auto;z-index:5;
    background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px;box-shadow:0 -8px 24px rgba(0,0,0,.35)}
  #cmdPop div{display:flex;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;align-items:baseline}
  #cmdPop div:hover,#cmdPop div:active{background:var(--line)}
  #cmdPop code{color:var(--accent);font:13px ui-monospace,Menlo,Consolas,monospace;white-space:nowrap}
  #cmdPop span{color:var(--dim);font-size:13px}

  /* workspace */
  #notes{flex:1;margin:8px 14px;width:auto;resize:none}
  .row{display:flex;gap:8px;padding:0 14px 8px;flex-wrap:wrap;align-items:center}
  .row label{color:var(--dim);font-size:14px;display:flex;gap:6px;align-items:center}
  .row label input{width:auto}

  /* flow / circuit board */
  .ftools{display:flex;gap:6px;padding:2px 14px 4px;flex-wrap:wrap;align-items:center}
  .ftools button{padding:6px 10px;font-size:14px}
  .ftools small{color:var(--dim);font-size:12px;margin-left:auto}
  #flowScroll{flex:1;min-height:0;position:relative;overflow:hidden;margin:0 14px;border:1px solid var(--line);border-radius:12px}
  #flowSvg{display:block;width:100%;height:100%;touch-action:none;cursor:grab;transform:translateZ(0);will-change:transform}   /* its own GPU layer */
  /* While dragging / pinching the costly effects (blur glows, breathing halos, fades) are off until the finger lifts. */
  #flowSvg.dragging{cursor:grabbing}
  #flowSvg.dragging [filter]{filter:none}
  #flowSvg.dragging .chip .halo{animation:none}
  #flowSvg.dragging *{transition:none !important}
  #flowSvg,#flowSvg *,.zhint{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}   /* dragging the board must not highlight text */
  #flowSvg *{outline:none}
  #flowSvg:active{cursor:grabbing}
  .zoom{margin-left:auto;display:flex;gap:4px}
  .zoom button{min-width:34px;padding:6px 8px}
  .zhint{position:absolute;left:8px;bottom:6px;font-size:11px;color:var(--dim);pointer-events:none;opacity:.8}
  #chipInfo{position:absolute;left:8px;right:8px;bottom:8px;background:var(--panel);border:1px solid var(--accent);border-radius:12px;
    padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
  #chipInfo > div{display:flex;align-items:center;justify-content:space-between;gap:8px}
  #chipInfo p{margin:6px 0 8px;font-size:14px}
  #chipInfo small{color:var(--dim)}
  #chipInfo button{padding:4px 10px;font-size:13px}
  #vBoard.full{position:fixed;inset:0;z-index:60;background:var(--bg);
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  #vBoard.full .ftools{padding-top:8px}
  #vBoard.full #flowLog{flex-basis:12%;min-height:56px}
  .group{fill:none;stroke:var(--copper);stroke-width:1.2;stroke-dasharray:3 3}
  .lane{fill:var(--bg);fill-opacity:.45;stroke:var(--line);stroke-width:1.2;stroke-dasharray:5 4}
  .lane.toolbox{stroke:var(--copper);stroke-width:1.6;stroke-dasharray:none}
  .toolHandle{fill:none;stroke:var(--copper);stroke-width:2.5;stroke-linecap:round}
  .laneLabel{fill:var(--dim);font:700 9px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em}
  .chev{fill:var(--copper)}
  .chip.small .cname{font-size:11px}
  .chip.small .csub{font-size:9px}
  .dot{fill:var(--line)}
  .board{fill:url(#dots)}
  .boardEdge{fill:none;stroke:var(--line);stroke-width:1.5}
  .trace{fill:none;stroke:var(--copper);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
  .trace-glow{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 1.6s ease-out}
  .trace-glow.hot{opacity:1;transition:opacity .15s}
  /* Line colours: blue = working / being sent, green = finished, orange = waiting for a permission, red = error */
  .trace-glow.ok{stroke:#3fd87f;opacity:.8;transition:opacity .3s}
  .trace-glow.ask{stroke:#ffa63d;opacity:.95;transition:opacity .15s}
  .trace-glow.err{stroke:#ff4d5e;opacity:.95;transition:opacity .15s}
  .ftools select{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:5px 6px;font:inherit;font-size:13px;max-width:100%}
  .ftools select{flex:1 1 140px;min-width:0}
  #learnLayer{position:fixed;inset:0;z-index:9000;pointer-events:none}
  .learnBadge{position:fixed;width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:#3b82f6;color:#fff;font-size:13px;line-height:20px;padding:0;pointer-events:auto;box-shadow:0 0 0 0 rgba(59,130,246,.7);animation:learnPulse 2.2s infinite;cursor:pointer}
  @keyframes learnPulse{0%{box-shadow:0 0 0 0 rgba(59,130,246,.65)}70%{box-shadow:0 0 0 9px rgba(59,130,246,0)}100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}}
  #learnCard{position:fixed;z-index:9100;width:min(88vw,330px);background:var(--bg);color:var(--text);border:1px solid #3b82f6;border-radius:14px;padding:12px 14px;box-shadow:0 10px 34px rgba(0,0,0,.5)}
  #learnCard b{font-size:15px}#learnCard p{margin:6px 0 10px;font-size:14px;line-height:1.55}.lcRow{display:flex;gap:8px;justify-content:flex-end}.lcRow button{padding:6px 12px}
  .learnBtn{border:1px solid #3b82f6;background:#1e3a6e;color:#fff;border-radius:999px;padding:2px 9px;font-size:12px;margin-left:6px}
  .learnNote{border:1px solid #3b82f6;background:var(--panel);border-radius:10px;padding:8px 12px;margin:8px 12px;font-size:13.5px;line-height:1.55}
  #habSay{position:fixed;left:50%;top:18%;transform:translateX(-50%);width:min(88vw,360px);z-index:9300;background:var(--bg);color:var(--text);border:2px solid var(--accent);border-radius:16px;padding:12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.55);animation:hsPop .25s ease-out}
  #habSay .hsHead{display:flex;align-items:center;gap:8px}#habSay .hsHead b{flex:1}#habSay .ci{width:26px;height:26px}#hsText{margin-top:6px;font-size:15px;line-height:1.55}
  @keyframes hsPop{from{opacity:0;transform:translateX(-50%) scale(.92)}to{opacity:1;transform:translateX(-50%) scale(1)}}
  #uiRing{position:fixed;z-index:9250;border:3px solid var(--accent);border-radius:14px;pointer-events:none;box-shadow:0 0 0 4px rgba(82,224,255,.25),0 0 22px 6px var(--accent);animation:ringPulse 1s ease-in-out infinite}
  @keyframes ringPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.65}}
  #fxStop{position:fixed;left:50%;bottom:calc(70px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:9400;background:var(--accent);color:#06222a;border:0;border-radius:999px;padding:8px 16px;font:600 13px system-ui;box-shadow:0 6px 20px rgba(0,0,0,.45)}
  /* icon effects (JS adds fx-… to <html> for a few seconds, then takes it off again) */
  html[class*="fx-"] #habTabs i,html[class*="fx-"] #habTabs button,html[class*="fx-"] #petBtn,html[class*="fx-"] #tourBtn,html[class*="fx-"] #viewAsBtn,html[class*="fx-"] #dropBtn,html[class*="fx-"] #emoTog,html[class*="fx-"] #micBtn,html[class*="fx-"] #slashBtn,html[class*="fx-"] #attachBtn{animation-duration:.9s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
  html.fx-dance #habTabs button:nth-child(odd),html.fx-dance #petBtn,html.fx-dance #tourBtn,html.fx-dance #micBtn,html.fx-dance #slashBtn{animation-name:fxHopA}
  html.fx-dance #habTabs button:nth-child(even),html.fx-dance #emoTog,html.fx-dance #viewAsBtn,html.fx-dance #attachBtn,html.fx-dance #dropBtn{animation-name:fxHopB}
  html.fx-spin #habTabs i,html.fx-spin #petBtn,html.fx-spin #tourBtn,html.fx-spin #viewAsBtn,html.fx-spin #dropBtn,html.fx-spin #emoTog,html.fx-spin #micBtn,html.fx-spin #slashBtn,html.fx-spin #attachBtn{animation-name:fxSpin;animation-duration:1.1s}
  html.fx-shake #habTabs button,html.fx-shake #petBtn,html.fx-shake #tourBtn,html.fx-shake #viewAsBtn,html.fx-shake #dropBtn,html.fx-shake #emoTog,html.fx-shake #micBtn,html.fx-shake #slashBtn,html.fx-shake #attachBtn{animation-name:fxShake;animation-duration:.18s}
  html.fx-rainbow #habTabs i,html.fx-rainbow #petBtn,html.fx-rainbow #tourBtn,html.fx-rainbow #viewAsBtn,html.fx-rainbow #dropBtn,html.fx-rainbow #emoTog,html.fx-rainbow #micBtn,html.fx-rainbow #slashBtn,html.fx-rainbow #attachBtn{animation-name:fxHue;animation-duration:1.6s;animation-timing-function:linear}
  html.fx-party #habTabs button,html.fx-party #petBtn,html.fx-party #tourBtn,html.fx-party #viewAsBtn,html.fx-party #dropBtn,html.fx-party #emoTog,html.fx-party #micBtn,html.fx-party #slashBtn,html.fx-party #attachBtn{animation-name:fxParty;animation-duration:.8s}
  @keyframes fxHopA{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px) rotate(-6deg)}}@keyframes fxHopB{0%,100%{transform:translateY(-8px) rotate(6deg)}50%{transform:translateY(0)}}
  @keyframes fxSpin{to{transform:rotate(360deg)}}@keyframes fxShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px) rotate(-3deg)}75%{transform:translateX(3px) rotate(3deg)}}
  @keyframes fxHue{from{filter:hue-rotate(0)}to{filter:hue-rotate(360deg)}}@keyframes fxParty{0%{transform:translateY(0) rotate(0) scale(1);filter:hue-rotate(0)}50%{transform:translateY(-8px) rotate(14deg) scale(1.18);filter:hue-rotate(180deg)}100%{transform:translateY(0) rotate(0) scale(1);filter:hue-rotate(360deg)}}
  .msgTools{display:flex;align-items:center;gap:8px;margin:-2px 6px 10px 6px;font-size:13px;color:var(--dim);flex-wrap:wrap}
  .msgTools{gap:2px}.msgTools button{background:none;border:0;padding:0;color:inherit;cursor:pointer;font:inherit;border-radius:8px}
  .msgTools .mtIcon{width:30px;height:28px;display:inline-grid;place-items:center;font-size:15px;opacity:.6;filter:grayscale(1)}.msgTools .mtIcon:hover{opacity:1;background:var(--line)}
  .msgTools .mtIcon.on{opacity:1;filter:none;background:var(--line)}.msgTools .mtCopy,.msgTools .mtRetry,.msgTools .mtMore{font-size:17px;filter:none}
  .msgTools .mtDone,.msgTools .mtTip,.msgTools .mtDeep{font-size:12px;opacity:.8;margin-left:6px}.msgTools .mtDeep{color:#b39dff}
  .rateDetail .rdHead{font-size:13px}
  .rateDetail{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:8px 10px;margin:-4px 6px 10px;display:grid;gap:6px}
  .rateDetail .rdRow{display:flex;align-items:center;gap:8px;justify-content:space-between;font-size:13px}.rateDetail .rdDots{display:inline-flex;gap:4px}
  .rateDetail .rdDot{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--text);cursor:pointer}.rateDetail .rdDot.on{background:var(--accent);color:#06222a;border-color:transparent}
  .rateDetail input{width:100%}
  #brainBar{margin:2px 14px 6px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:7px 10px;display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;font-size:13px}
  #brainBar .bbMain{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#brainBar .bbDot{width:11px;height:11px;border-radius:50%;background:#8a93a3;flex:none}
  #brainBar #bbModel{font-size:12px;color:var(--dim)}#bbControl{grid-column:1/-1;font-size:12.5px;color:var(--dim)}
  #bbRam{grid-column:1/-1;font-size:12px;color:var(--dim)}
  #brainOrb{background:none;border:1px solid var(--line);border-radius:999px;width:30px;height:30px;padding:0;display:grid;place-items:center;cursor:pointer;margin-left:6px}
  #brainOrb .bbDot,#brainPop .bbDot{width:12px;height:12px;border-radius:50%;background:#8a93a3;display:inline-block}
  #brainOrb.bb-awake .bbDot,#brainPop.bb-awake .bbDot{background:#3fd87f;box-shadow:0 0 7px #3fd87f}#brainOrb.bb-thinking .bbDot,#brainPop.bb-thinking .bbDot{background:#52b8ff;box-shadow:0 0 8px #52b8ff;animation:bbPulse 1s ease-in-out infinite}
  #brainOrb.bb-waking .bbDot,#brainOrb.bb-transfer .bbDot,#brainPop.bb-waking .bbDot,#brainPop.bb-transfer .bbDot{background:#ffcc33;box-shadow:0 0 7px #ffcc33;animation:bbPulse 1.4s ease-in-out infinite}
  #brainOrb.bb-offline .bbDot,#brainOrb.bb-paused .bbDot,#brainOrb.bb-frozen .bbDot,#brainPop.bb-offline .bbDot,#brainPop.bb-paused .bbDot,#brainPop.bb-frozen .bbDot{background:#ff4d4d;box-shadow:0 0 7px #ff4d4d}#brainOrb.bb-picture .bbDot{background:#c77dff}
  header{position:relative}#brainPop{position:absolute;right:10px;top:100%;z-index:60;width:min(320px,90vw);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13.5px;box-shadow:0 8px 28px rgba(0,0,0,.45);display:grid;gap:4px}
  #brainPop .bpHead{display:flex;align-items:center;gap:8px;font-size:15px}#brainPop .bpDim{color:var(--dim);font-size:12.5px}#brainPop button{justify-self:start;margin-top:4px;padding:5px 10px}
  .msgTime{font-size:11px;color:var(--dim);opacity:.75;margin:-4px 8px 6px}.msgTime.mtUser{text-align:right}.msgTools .msgTime{margin:0}
  .etaMeter{display:flex;align-items:center;gap:8px;margin:-2px 8px 8px;font-size:12px;color:var(--dim)}.etaTrack{flex:0 0 120px;height:6px;border-radius:9px;background:var(--line);overflow:hidden}.etaTrack i{display:block;height:100%;width:0;background:linear-gradient(90deg,#52b8ff,#3fd87f);transition:width .3s}
.holiEgg{position:fixed;z-index:45;width:26px;height:30px;padding:0;border:0;background:none;font-size:22px;line-height:30px;cursor:pointer;animation:holiEgg 2.8s ease-in-out infinite}.holiEgg:hover{transform:scale(1.2)!important}@keyframes holiEgg{0%,88%,100%{translate:0 0}92%{translate:0 -3px}96%{translate:0 0}}@media (prefers-reduced-motion:reduce){.holiEgg{animation:none}}
html.holiIce #chat #form{position:relative;border-color:rgba(214,236,255,.85);background:linear-gradient(180deg,rgba(236,246,255,.20),rgba(186,218,250,.08)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60'%3E%3Cg fill='none' stroke='white' stroke-opacity='.55' stroke-width='.8' stroke-linecap='round'%3E%3Cpath d='M0 60 L28 32 M10 50 l-6 -8 M10 50 l9 2 M18 42 l-5 -9 M18 42 l10 1 M26 34 l-3 -8 M26 34 l8 0'/%3E%3Cpath d='M0 40 L16 24 M6 34 l-4 -6 M6 34 l7 1 M12 28 l-3 -6'/%3E%3Cpath d='M0 22 L9 13 M4 18 l-3 -4 M4 18 l5 0'/%3E%3C/g%3E%3C/svg%3E") left bottom/90px 60px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60'%3E%3Cg fill='none' stroke='white' stroke-opacity='.55' stroke-width='.8' stroke-linecap='round'%3E%3Cpath d='M0 60 L28 32 M10 50 l-6 -8 M10 50 l9 2 M18 42 l-5 -9 M18 42 l10 1 M26 34 l-3 -8 M26 34 l8 0'/%3E%3Cpath d='M0 40 L16 24 M6 34 l-4 -6 M6 34 l7 1 M12 28 l-3 -6'/%3E%3Cpath d='M0 22 L9 13 M4 18 l-3 -4 M4 18 l5 0'/%3E%3C/g%3E%3C/svg%3E") right bottom/90px 60px no-repeat,var(--bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 0 18px rgba(190,225,255,.30),0 0 16px rgba(160,205,255,.22)}
html.holiIce #chat #form::after{content:'';position:absolute;left:18px;right:18px;top:100%;height:12px;margin-top:-1px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='12'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23cfe6ff' stop-opacity='.35'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0 H46 L43 3 L40 11 L37 3 L30 5 L27 9 L24 3 L17 4 L14 12 L11 3 L5 4 L3 7 Z' fill='url(%23g)'/%3E%3C/svg%3E") left top/46px 12px repeat-x;filter:drop-shadow(0 2px 2px rgba(120,170,230,.35))}
html.holiIce #chat #form:focus-within{border-color:#cfe6ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 22px rgba(190,225,255,.38),0 0 0 3px rgba(190,225,255,.25)}
@media (prefers-reduced-motion:reduce){html.holiIce #chat #form::after{filter:none}}
.holiCard{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;width:min(92vw,440px);max-height:70vh;overflow:auto;padding:14px;border-radius:16px;background:var(--panel);color:var(--text);border:1px solid var(--accent);box-shadow:0 12px 32px rgba(0,0,0,.35)}.holiList{display:flex;flex-direction:column;gap:4px}.holiBtns{display:flex;flex-wrap:wrap;gap:8px}
#holiMelt{position:fixed;top:calc(64px + env(safe-area-inset-top,0px));right:12px;z-index:45;padding:6px 12px;border-radius:999px;border:1px solid #cfe6ff;background:rgba(235,245,255,.92);color:#2a5b8a;font-weight:600;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
#holiFx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
.lookMore{margin:8px 0 4px;padding:8px 10px;border:1px solid var(--line);border-radius:12px}.lookMore summary{cursor:pointer;font-weight:600}.lookMore label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
#settings.peeking{background:transparent;border-color:transparent;box-shadow:none}
#settings.peeking::backdrop{background:transparent;backdrop-filter:none}
#settings.peeking > :not(.lookTry){visibility:hidden}
.lookTry > *{white-space:nowrap}
#settings.peeking .lookTry{top:auto;bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.lookTry{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:9999;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--panel);color:var(--text);border:1px solid var(--accent);box-shadow:0 8px 24px rgba(0,0,0,.3);max-width:92vw}
.pressAsk{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:9999;display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:max-content;max-width:min(92vw,460px);padding:12px 14px;border-radius:14px;background:var(--panel,#1c2333);color:var(--fg,#fff);border:1px solid var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.35)}.pressAsk>div{flex:1 1 100%;font-size:14px}
.etaStep{all:unset;cursor:pointer;display:grid;gap:1px;margin:-6px 8px 8px;max-width:calc(100% - 16px);font-size:12px;color:var(--dim);font-style:italic}
.etaStep:focus-visible{outline:2px solid var(--accent, #0b8fa3);outline-offset:2px;border-radius:4px}
.etaStep div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.6}.etaStep div.etaNow{opacity:1}
.etaStep.open div{white-space:normal}
.hThink{margin:-4px 8px 8px;font-size:12px;color:var(--dim)}.hThink summary{cursor:pointer;list-style:none}.hThink summary::-webkit-details-marker{display:none}.hThink ol{margin:6px 0 0 18px;padding:0;line-height:1.5}
#input.fixing{box-shadow:inset 0 0 0 2px var(--accent)}
  #msgMenu{position:fixed;z-index:200;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:5px;box-shadow:0 10px 30px rgba(0,0,0,.5);display:grid;min-width:210px}
  #msgMenu button{text-align:left;background:none;border:0;color:var(--text);padding:9px 12px;border-radius:8px;font:inherit;font-size:14.5px;cursor:pointer}#msgMenu button:hover{background:var(--line)}
  #deepTog{display:flex;align-items:center;gap:3px;cursor:pointer;flex:none;align-self:center;user-select:none}#deepTog input{position:absolute;opacity:0;width:0;height:0}
  #deepTog .dtTrack{width:30px;height:17px;border-radius:9px;background:var(--line);position:relative;transition:background .2s}#deepTog .dtTrack i{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#cfd6e0;transition:left .2s}
  #deepTog.on .dtTrack{background:#7b5cff}#deepTog.on .dtTrack i{left:15px}#deepTog .dtIco{font-size:15px;opacity:.6}#deepTog.on .dtIco{opacity:1}
  details.adv{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}details.adv summary{cursor:pointer;font-weight:600}
  #brainBar .bbBtns button{padding:4px 10px;font-size:12px}
  #brainBar.bb-awake .bbDot{background:#3fd87f;box-shadow:0 0 6px #3fd87f}#brainBar.bb-thinking .bbDot{background:#52b8ff;box-shadow:0 0 8px #52b8ff;animation:bbPulse 1s ease-in-out infinite}
  #brainBar.bb-waking .bbDot{background:#ffb25a;animation:bbPulse .7s ease-in-out infinite}#brainBar.bb-transfer .bbDot{background:#b583ff;animation:bbPulse .8s ease-in-out infinite}
  #brainBar.bb-picture .bbDot{background:#ff7ac6;animation:bbPulse 1s ease-in-out infinite}#brainBar.bb-asleep .bbDot{background:#8a93a3}
  #brainBar.bb-offline .bbDot,#brainBar.bb-paused .bbDot,#brainBar.bb-frozen .bbDot{background:#ff4d5e;box-shadow:0 0 8px #ff4d5e}
  #brainBar.bb-offline,#brainBar.bb-paused,#brainBar.bb-frozen{border-color:#ff4d5e}
  @keyframes bbPulse{50%{opacity:.35;transform:scale(1.25)}}
  #taskList{margin:0 14px 6px;border:1px solid var(--line);border-radius:12px;background:var(--panel);max-height:34dvh;overflow:auto}
  #taskList .tkRow{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line);font-size:13px}#taskList .tkRow:last-child{border:0}
  #taskList .tkT{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#taskList small{color:var(--dim)}#taskList button{padding:3px 10px}
  #replayBar{margin:2px 14px 6px;border:1px solid var(--accent);border-radius:12px;background:var(--panel);padding:7px 10px}
  #replayBar .rpTop{display:flex;align-items:center;gap:8px;font-size:13px}#replayBar .rpTop b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#replayBar .rpTop span{color:var(--dim);font-size:12px}
  #rpScrub{width:100%;margin:6px 0}#replayBar .rpBtns{display:flex;gap:8px;align-items:center;justify-content:center}#replayBar .rpBtns button{padding:5px 14px;font-size:16px}#rpSpeed{min-width:34px;text-align:center;font-size:13px}
  #sirenDlg{width:min(94vw,440px)}
  .sirenBody h4{margin:12px 0 3px}.sirenBody p{margin:0;font-size:14.5px;line-height:1.55}
  .sirenTop{display:flex;gap:14px;align-items:center}.sirenTop > div{flex:1}
  #sirenLevel{font-weight:800;letter-spacing:.06em;font-size:13px}#sirenLevel.danger{color:#ff4d5e}#sirenLevel.heads{color:#ffb25a}
  #sirenWhat{font-size:16px;font-weight:600;line-height:1.35;margin-top:3px}
  .siren{width:96px;height:96px;flex:none;overflow:visible;filter:drop-shadow(0 0 10px rgba(255,45,70,.8));animation:sirenGlow .6s ease-in-out infinite alternate}
  .siren .dome{fill:#ff2b3a;animation:sirenFlash .6s steps(1) infinite}
  .siren .spark{fill:#fff;opacity:.9;animation:sirenPulse .6s ease-in-out infinite alternate}
  .siren .beams{transform-origin:48px 40px;animation:sirenSpin 1.2s linear infinite}
  .siren .beam{fill:rgba(255,60,80,.38)}
  .siren.heads{filter:drop-shadow(0 0 10px rgba(255,170,60,.8))}.siren.heads .dome{animation:sirenFlashAmber .8s steps(1) infinite}.siren.heads .beam{fill:rgba(255,178,90,.35)}
  @keyframes sirenFlash{0%{fill:#ff2b3a}50%{fill:#8d1020}}@keyframes sirenFlashAmber{0%{fill:#ffb25a}50%{fill:#a2631b}}
  @keyframes sirenSpin{to{transform:rotate(360deg)}}@keyframes sirenPulse{from{r:3;opacity:.4}to{r:7;opacity:1}}
  @keyframes sirenGlow{from{filter:drop-shadow(0 0 4px rgba(255,45,70,.4))}to{filter:drop-shadow(0 0 16px rgba(255,45,70,.95))}}
  /* reduced motion: a steady red (or amber) light instead of the spinning siren */
  @media (prefers-reduced-motion:reduce){.siren,.siren .dome,.siren .spark,.siren .beams{animation:none}.siren .beams{display:none}.siren .dome{fill:#ff2b3a}.siren.heads .dome{fill:#ffb25a}}
  /* the Sentinel's lockdown (freeze switch) */
  #frozenBar{position:fixed;top:env(safe-area-inset-top,0);left:0;right:0;z-index:9998;background:repeating-linear-gradient(45deg,#7a0c16 0 14px,#3a050b 14px 28px);color:#fff;text-align:center;padding:7px 12px;font-size:13.5px;font-weight:700;cursor:pointer}
  body.frozen #sendBtn{opacity:.55}
  #licLock{position:fixed;inset:0;z-index:10000;background:var(--bg,#0b1020);display:flex;align-items:center;justify-content:center;padding:16px}
  #licLock .llBox{max-width:460px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}
  #licLock input{width:100%;margin:10px 0;font-family:monospace}#licLock button{width:100%;padding:12px;font-size:16px}
  #deskPill{position:fixed;left:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 86px);z-index:9996;background:#2a2312;color:#ffc857;border:1px solid rgba(255,200,87,.55);
    border-radius:999px;padding:7px 14px;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.35);white-space:nowrap}
  #buildBar{position:fixed;top:env(safe-area-inset-top,0);left:0;right:0;z-index:9997;background:repeating-linear-gradient(45deg,#ffd400 0 14px,#111 14px 28px);color:#111;text-align:center;padding:3px 10px;font-size:12px;font-weight:800;line-height:1.3}
  #buildBar span{display:inline-block;max-width:100%;background:#ffd400;padding:1px 9px;border-radius:5px;box-shadow:0 0 0 1.5px #111;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}   /* one slim line, never a quarter of the screen */
  body.hasBuildBar #app{padding-top:calc(env(safe-area-inset-top,0px) + 24px)}   /* the page moves down instead of hiding under it */
  #sentLock{overflow:auto}
  .lockState{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0;background:var(--panel)}
  .lockState.on{border-color:#ff2b3a;box-shadow:0 0 0 2px rgba(255,43,58,.25)}.lockBig{font-size:30px;line-height:1}
  .lockForm{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);margin-top:12px;padding:4px 0 0}
  .lockForm h4{margin:8px 0 2px}.lockForm label.radio{display:flex;gap:8px;align-items:center;font-size:14px}
  .warnTxt{color:#ffb25a}
  .sentEv.freeze{border-color:#ff2b3a;background:color-mix(in srgb,#ff2b3a 10%,var(--panel))}.sentCard.freeze b{color:#ff2b3a}
  #incDlg{width:min(96vw,620px)}#incBody{overflow:auto}#incBody h4{margin:14px 0 4px}#incBody p{margin:0;line-height:1.5;font-size:14.5px}
  .incTl{border-left:3px solid var(--line);padding-left:8px;font:12px/1.6 ui-monospace,Consolas,monospace}
  .incStep.alert,.incStep.freeze{color:#ff5a66}.incStep.warn{color:#ffb25a}
  .incPre{white-space:pre-wrap;word-break:break-word;font:11.5px/1.5 ui-monospace,Consolas,monospace;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px;margin:4px 0;max-height:240px;overflow:auto}
  .incList{margin:0;padding-left:18px;line-height:1.5;font-size:14px}
  .flowClick{cursor:pointer;text-decoration:underline dotted}
  #tourActRow{margin:0 0 8px}
  #tbRp{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}#tbRp[hidden]{display:none}
  .wtRow{align-self:flex-start;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-2px 0 4px}
  .wtBtn{border:1px solid var(--accent);background:var(--panel);color:var(--text);border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer}
  .wtRow .wtT{font-size:12px;color:var(--dim)}
  #htQ{width:100%;margin-bottom:8px}
  .htItem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:10px 12px;margin-bottom:6px;font:inherit;cursor:pointer}
  .htItem i{font-style:normal;font-size:20px;flex:none}.htItem b{display:block;font-size:15px}.htItem small{display:block;color:var(--dim);font-size:12px}
  .libAsk,.libNew{display:flex;gap:8px;margin:10px 0}.libAsk input,.libNew input{flex:1;min-width:0}
  .rwCredit{display:block;text-align:right;font-size:11px;color:var(--dim);margin:4px 0}.rwCredit a,a.rwCredit{color:var(--dim)}
  #vsWhere{margin-bottom:6px}#rwWrite{margin:4px 0}
  .cabBig{display:block;width:100%;box-sizing:border-box;text-align:left;padding:14px 16px;border-radius:14px;margin:10px 0;text-decoration:none}
  a.cabBig{background:var(--accent);color:#fff;border:0}a.cabBig small{color:#fff}.cabBig b{display:block;font-size:17px}.cabBig small{display:block;opacity:.85;margin-top:2px}
  .cabOr{text-align:center;color:var(--dim);font-size:12px;margin:12px 0 6px}
  .cabGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cabPick{display:flex;gap:8px;align-items:center;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);text-align:left}.cabPick i{font-style:normal;font-size:20px}
  .cabStep{display:grid;grid-template-columns:28px 120px 1fr;gap:10px;align-items:center;margin:10px 0}.cabN{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:13px}
  .cabStep p{margin:0;font-size:14px}.cabPic{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg);font-size:9px}
  .cabBar{display:flex;gap:3px;align-items:center;padding:3px 5px;background:var(--panel)}.cabBar i{width:5px;height:5px;border-radius:50%;background:var(--line)}.cabBar span{margin-left:4px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cabPage{padding:8px;display:grid;gap:6px;justify-items:start}.cabLine{height:5px;border-radius:3px;background:var(--line)}.w40{width:40%}.w60{width:60%}.w70{width:70%}
  .cabBtn{background:var(--accent);color:#fff;border-radius:5px;padding:3px 7px;font-weight:700;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent);animation:cabPulse 1.6s ease-in-out infinite}
  .cabKeyRow{display:flex;gap:6px;align-items:center;font-family:monospace}.cabPaste{border:2px dashed var(--accent);border-radius:6px;padding:3px 7px}
  @keyframes cabPulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 15%,transparent)}}@media (prefers-reduced-motion:reduce){.cabBtn{animation:none}}
  .fitBox{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0;display:grid;gap:6px}.fitRow{display:grid;grid-template-columns:20px 1fr;gap:4px 8px;font-size:13px}
  .fitRow small{grid-column:2;color:var(--dim)}.fitMark{font-weight:700}.fitRow.ok .fitMark{color:#3cb371}.fitRow.no .fitMark{color:#e0703c}
  .cabOk{background:color-mix(in srgb,var(--accent) 15%,transparent);border-radius:10px;padding:10px;margin-bottom:8px;font-weight:600}
  @media (max-width:420px){.cabStep{grid-template-columns:26px 1fr}.cabStep p{grid-column:2}}
  .vsRow{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0;align-items:center;font-size:13px}.vsRow select,.vsRow input[type=number]{width:auto;font-size:13px}.vsRow input[type=number]{width:110px}
  #vsPrompt{width:100%;margin-top:8px}#vsPicPrev{max-width:160px;max-height:120px;border-radius:8px;display:block;margin-top:6px}
  .vsGal{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;max-height:220px;overflow:auto;margin-top:8px}
  .vsTile{padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;aspect-ratio:1}.vsTile img{width:100%;height:100%;object-fit:cover;display:block}.vsTile.sel{border-color:var(--accent)}
  .hlpCard{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:10px 12px;margin-bottom:8px}
  .hlpCard.off{opacity:.75}.hlpTop{display:flex;align-items:center;gap:8px}.hlpTop b{flex:1;font-size:15px}.hlpTop i{font-style:normal;font-size:20px}
  .hlpWhat{color:var(--dim);font-size:12px;margin:4px 0}.hlpSched{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;margin-top:6px}
  .hlpSched select,.hlpSched input{font-size:13px;padding:4px 6px;width:auto}.hlpSched input[type=number]{width:56px}
  .hlpH{margin:14px 0 6px;font-size:14px}.teamMembers{display:grid;gap:2px;margin:6px 0}#teamNew input{margin:4px 0;width:100%}.hlpRun{font-size:13px;padding:6px 0;border-top:1px solid var(--line)}.hlpRun small{color:var(--dim);display:block}
  .hlpDo{margin-top:8px;padding:8px 10px;border-radius:10px;border:1px dashed var(--accent)}.hlpDo ol{margin:4px 0 8px 18px;padding:0}.hlpDo pre{white-space:pre-wrap;font-size:11px;max-height:140px;overflow:auto}
  .hlpDo .dbtns{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.hlpDo input{width:110px}
  .libCard{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:10px 12px;margin-bottom:8px}
  .libCard h4{margin:0 0 2px;font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.libCard .libMeta{color:var(--dim);font-size:12px}
  .libPill{font-size:11px;font-weight:600;border-radius:999px;padding:1px 8px;background:color-mix(in srgb,var(--accent) 18%,transparent)}
  .libActs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.libActs button{font-size:13px;padding:6px 10px}
  .libSrc{font-size:12px;color:var(--dim);margin-top:6px}.libSrc div{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:2px 0}.libSrc button{padding:0 6px;font-size:12px}
  .libHit{border-left:3px solid var(--accent);padding:4px 10px;margin:6px 0}.libHit b{font-size:13px;display:block}.libHit pre{white-space:pre-wrap;font-size:12px;max-height:120px;overflow:auto;margin:4px 0 0;color:var(--dim)}
  #flowSvg .outside{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:6 5}
  @keyframes boardAlarm{0%,100%{fill:var(--panel)}50%{fill:rgba(255,45,70,.38)}}
  @keyframes boardAlarmEdge{0%,100%{stroke:var(--line)}50%{stroke:#ff2d46}}
  #flowSvg.alarm.hold .board{animation-iteration-count:infinite!important}#flowSvg.alarm.hold .boardEdge{animation-iteration-count:infinite!important}
  #flowSvg.alarm .board{animation:boardAlarm .8s ease-in-out 4}#flowSvg.alarm .boardEdge{animation:boardAlarmEdge .8s ease-in-out 4;stroke-width:3}
  .trace-glow.fade,.trace-glow.ok.fade,.trace-glow.ask.fade,.trace-glow.err.fade{opacity:0;transition:opacity 2.1s ease-out}
  .pulse.ok{fill:#3fd87f}
  .pulse.core.ok{fill:#d8ffe7}
  .pulse.ask{fill:#ffa63d}
  .pulse.core.ask{fill:#ffe6c2}
  .pulse.err{fill:#ff4d5e}
  .pulse.core.err{fill:#ffd6da}
  #legend{position:absolute;right:8px;bottom:6px;display:flex;gap:10px;font-size:11px;color:var(--dim);pointer-events:none;flex-wrap:wrap}
  #legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:baseline}
  #legend .b{background:var(--accent)}#legend .g{background:#3fd87f}#legend .o{background:#ffa63d}#legend .r{background:#ff4d5e}
  .via{fill:var(--bg);stroke:var(--copper);stroke-width:2}
  .pulse{fill:var(--accent)}
  .pulse.core{fill:#fff}
  .chip{cursor:pointer;transition:opacity .4s}
  .chip text{pointer-events:none}
  .chip .body{fill:var(--panel);stroke:var(--line);stroke-width:2;transition:stroke .3s}
  .chip .halo{fill:none;stroke:var(--accent);stroke-width:6;opacity:0;transition:opacity .5s}
  .chip .pin{fill:var(--copper)}
  .chip .notch{fill:var(--line)}
  .chip .led{fill:var(--line);transition:fill .2s}
  .chip .cname{fill:var(--text);font:600 12px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
  .chip .csub{fill:var(--dim);font:10px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
  .chip.big .cname{font-size:15px}
  .chip.unwired.idle{opacity:.45}
  .chip.active .body{stroke:var(--accent)}
  .chip.active .halo{opacity:.9;animation:breathe 1.1s ease-in-out infinite}
  .chip.active .led{fill:var(--accent)}
  .chip.done .body{stroke:#2e8f6b}
  .chip.done .led{fill:#3fb950}
  .chip.error .body{stroke:#ff6b78}
  .chip.error .led{fill:#ff6b78}
  .chip.ask .body{stroke:#ffa63d}
  .chip.ask .led{fill:#ffa63d}
  .chip.ask .halo{stroke:#ffa63d;opacity:.9;animation:breathe 1.1s ease-in-out infinite}
  .chip.skip{opacity:.35}
  @keyframes breathe{50%{opacity:.3}}
  #flowLog{flex:0 0 22%;min-height:70px;overflow-y:auto;margin:6px 14px 8px;padding:10px;
    background:var(--panel);border:1px solid var(--line);border-radius:10px;font:12px/1.6 ui-monospace,Menlo,Consolas,monospace}
  #flowLog span{color:var(--accent);margin-right:6px}
  #flowLog .dim{color:var(--dim)}
  #flowLog .bad{color:#ff9aa2}

  /* settings */
  dialog{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:14px;
    width:min(94vw,500px);max-height:88dvh;padding:0;overflow:hidden}
  dialog[open]{display:flex;flex-direction:column}
  dialog::backdrop{background:rgba(0,0,0,.45)}
  .dhead,.dfoot{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:12px 16px}
  .dfoot{justify-content:flex-end;border-top:1px solid var(--line);flex-wrap:wrap;position:relative}
  #locBtn{order:3;flex:1 1 100%;text-align:right;background:none;border:0;padding:2px 2px 0;font-size:11px;color:var(--dim);min-height:0!important}
  #locDetail{position:absolute;right:12px;bottom:100%;z-index:5;width:min(300px,86vw);max-height:56dvh;overflow-y:auto;padding:10px 12px;margin-bottom:4px;
    background:var(--panel);border:1px solid var(--accent);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.45);font-size:13px}
  .locNote{color:var(--dim);font-size:12px;margin:2px 0 6px}
  .locSub{color:var(--accent);font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin:8px 0 2px}
  .locRow{font:12px/1.55 ui-monospace,Menlo,Consolas,monospace;white-space:pre}
  .stabs{display:flex;gap:6px;padding:0 16px 8px;border-bottom:1px solid var(--line)}
  .stabs button{flex:1;padding:7px 4px;font-size:14px}
  .stabs button.on{border-color:var(--accent);color:var(--accent)}
  .pane{display:none;overflow-y:auto;padding:4px 16px 16px;flex:1}
  .pane.on{display:block}
  .pane label{display:block;color:var(--dim);font-size:13px;margin:12px 0 4px}
  .pane label.check{display:flex;gap:8px;align-items:flex-start;justify-content:flex-start;text-align:left;color:var(--text);font-size:14px;clear:both}
  .pane label.check input{width:auto;margin-top:3px}
  /* checkboxes and sliders don't get the big text-box look (on iPhone that made checkboxes huge and pushed their
     text over, and let the next setting sit under a slider): checkbox left, text right next to it; sliders get room */
  input[type=checkbox],input[type=radio]{width:auto;flex:0 0 auto;padding:0;margin:0;min-height:0}
  input[type=range]{display:block;width:100%;height:28px;padding:0;margin:2px 0 10px;border:0;background:none;min-height:0}
  .hintx{color:var(--dim);font-size:12px}
  .inline{display:flex;gap:8px}
  .help{color:var(--dim);font-size:12px;margin-top:8px}
  .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
  .chips button{padding:4px 10px;font-size:13px;border-radius:20px}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
  .grid button{padding:8px 6px;font-size:13px}
  .swatch{display:flex;flex-direction:column;align-items:center;gap:4px}
  .swatch i{display:block;width:100%;height:26px;border-radius:6px;border:1px solid var(--line);position:relative}
  .swatch i b{position:absolute;right:6px;top:6px;width:12px;height:12px;border-radius:50%}
  .lookTop{display:flex;gap:12px;align-items:center;margin-top:8px}
  #preview{width:110px;height:auto;flex:0 0 auto;filter:drop-shadow(0 0 8px var(--faceGlow))}
  .colors{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
  .colors label{display:flex;justify-content:space-between;align-items:center;margin:4px 0;color:var(--text);font-size:14px}
  .colors input{width:44px;height:32px;padding:2px;border-radius:8px}
  .stack{display:flex;flex-direction:column;gap:8px;margin-top:12px}
  .chips button.sel{border-color:var(--accent);color:var(--accent);background:var(--line)}
  .talkStyle{display:flex;gap:12px;align-items:center;margin-top:10px;padding:8px;border:1px solid var(--line);border-radius:10px}
  .talkStyle svg{width:76px;height:auto;flex:0 0 auto;filter:drop-shadow(0 0 6px var(--faceGlow))}
  .talkStyle div{flex:1;font-size:13px;color:var(--dim)}
  .talkStyle b{display:block;color:var(--text);font-size:13px;margin-bottom:4px}
  .talkStyle button{margin-top:6px;padding:5px 10px;font-size:13px}
  #traitGroups details{border:1px solid var(--line);border-radius:10px;margin-top:6px;padding:6px 10px}
  #traitGroups summary{cursor:pointer;font-size:14px;padding:2px 0}
  #traitGroups summary span{color:var(--accent);font-size:12px;margin-left:6px}
  #traitGroups .chips{margin:6px 0 4px}

  /* flow sub-tabs: Board / Thoughts / Score */
  .subtabs{display:flex;gap:4px;margin:0 14px 4px;padding:3px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
  .subtabs button{flex:1;padding:5px 6px;font-size:13px;border:0;background:none;color:var(--dim)}
  .subtabs button.on{background:var(--line);color:var(--accent)}
  .fview{display:none;flex:1;min-height:0;flex-direction:column}
  .fview.on{display:flex}
  .fscroll{flex:1;overflow-y:auto;padding:4px 14px 10px;-webkit-overflow-scrolling:touch}
  .tcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px}
  .tcard.live{border-color:var(--accent)}
  .thead{display:flex;gap:10px;align-items:flex-start}
  .thead .q{flex:1;font-size:14px}
  .thead time{display:block;color:var(--dim);font-size:11px}
  .badge{flex:0 0 auto;min-width:46px;text-align:center;padding:3px 7px;border-radius:8px;font:700 14px ui-monospace,Menlo,Consolas,monospace;
    border:1px solid var(--line);color:var(--dim)}
  .badge.good{border-color:#2e8f6b;color:#7ee787}
  .badge.ok{border-color:#9a6b00;color:#ffcf5c}
  .badge.bad{border-color:#8f2e36;color:#ff9aa2}
  .short{margin:8px 0 4px;font-size:14px}
  .short b{color:var(--accent)}
  .steps{margin:6px 0 0;padding-left:22px;font-size:13px;color:var(--text)}
  .steps li{margin:2px 0}
  .steps li.warn{color:#ffcf5c}
  .steps li.bad{color:#ff9aa2}
  .steps li span{color:var(--dim);font-size:11px;margin-left:6px}
  .tcard details{margin-top:6px;font-size:12px;color:var(--dim)}
  .tcard details pre{white-space:pre-wrap;max-height:220px;overflow:auto;margin:6px 0 0;font:11px/1.5 ui-monospace,Menlo,Consolas,monospace}
  .arow{margin-top:8px;font-size:12px;color:var(--dim)}
  .arow i{font-style:normal;color:var(--text)}
  .flags{margin:4px 0 0;padding-left:18px;color:#ff9aa2;font-size:12px}
  .empty{color:var(--dim);text-align:center;margin-top:30px;font-size:14px}
  .bigscore{display:flex;align-items:baseline;gap:10px;margin:6px 0 4px}
  .bigscore b{font:700 44px/1 ui-monospace,Menlo,Consolas,monospace;color:var(--accent)}
  .bigscore em{font-style:normal;font:700 22px ui-monospace,Menlo,Consolas,monospace}
  .bars{margin:10px 0}
  .bar{display:grid;grid-template-columns:96px 1fr 34px;gap:8px;align-items:center;font-size:13px;margin:6px 0}
  .bar div{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
  .bar div i{display:block;height:100%;background:var(--accent);border-radius:4px}
  .bar div i.ok{background:#ffb000}
  .bar div i.bad{background:#ff6b78}
  .counts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
  .counts div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px;color:var(--dim)}
  .counts b{display:block;font-size:18px;color:var(--text)}
  .trend{width:100%;height:46px;display:block;margin:6px 0}
  .trend polyline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
  .trend line{stroke:var(--line);stroke-dasharray:3 3}
  h5{margin:14px 0 4px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}

  /* tool added */
  .notice.fix{border-radius:12px;text-align:left;white-space:pre-wrap;max-width:92%;border-color:#ffb25a;color:#ffb25a}
  .notice{align-self:center;background:var(--panel);border:1px solid var(--accent);color:var(--text);border-radius:14px;padding:8px 14px;font-size:14px;line-height:1.4;text-align:center;max-width:92%;white-space:normal;overflow-wrap:anywhere;flex:0 0 auto}
  .notice.wait{border-color:#ffb25a;box-shadow:0 0 0 3px color-mix(in srgb,#ffb25a 18%,transparent)}
  .notice.wait::before{content:'⏳ ';}
  #log .msg.cutOff{opacity:.75}
  #log .msg.cutOff::after{content:attr(data-cut);display:block;margin-top:6px;font-size:12px;color:#ffb25a}
  #dropBtn.lit{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px #52e0ff44,0 0 16px var(--accent);animation:litPulse .5s ease-in-out infinite}
  @keyframes litPulse{50%{box-shadow:0 0 0 7px #52e0ff22,0 0 26px var(--accent);transform:scale(1.2)}}
  .sClunk{fill:var(--accent);font:700 7px -apple-system,"Segoe UI",sans-serif;opacity:0}
  #hammerProp{position:absolute;pointer-events:none;opacity:0;transition:opacity .4s;overflow:visible}

  /* Stock Checker cards, in Tester's store order: green = in, amber = limited, grey = out, dashed = a link to check, blue = online only */
  .scards{display:flex;flex-direction:column;gap:6px;align-self:flex-start;max-width:min(92%,420px)}
  .scHead{font-size:12px;color:var(--dim)}
  .scard{display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:12px;padding:7px 10px;text-decoration:none;color:var(--text)}
  .scard:active{background:var(--line)}
  .scard.s-in{border-left-color:#3fb950}.scard.s-limited{border-left-color:#ffb000}.scard.s-out{opacity:.75}.scard.s-check{border-style:dashed;border-left-style:solid;border-left-color:var(--accent)}.scard.s-online{border-left-color:#58a6ff}
  .scTop{display:flex;align-items:center;gap:8px}.scTop b{flex:1;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .scBadge{font-size:12px;font-weight:700;white-space:nowrap}
  .scTitle{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .scMeta{font-size:12px;color:var(--dim)}.scFresh{font-size:11px;color:var(--dim)}
  /* the Shopping team's cards (shop.py) */
  .scards.shop{max-width:min(96%,580px)}
  .shBox{border-left-color:var(--accent)}.shText{font-size:13px;line-height:1.35}
  .shChips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .shChip{font-size:12px;padding:5px 10px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--text);text-decoration:none;cursor:pointer}
  .shChip:disabled{opacity:.5}
  .shTableWrap{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:12px;background:var(--panel);-webkit-overflow-scrolling:touch}
  .shTable{border-collapse:collapse;font-size:12px;min-width:560px;width:100%}
  .shTable th{text-align:left;color:var(--dim);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
  .shTable td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
  .shTable tbody tr{cursor:pointer}.shTable tbody tr:active{background:var(--line)}
  .shTable tr.shBest td{background:rgba(63,185,80,.14)}
  .shItem{display:flex;flex-direction:column;gap:2px;min-width:180px}
  .shName{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .shPrice{font-weight:700;white-space:nowrap}.shGo{white-space:nowrap;color:var(--accent);text-decoration:none}
  .shCheckout{cursor:pointer}.shBig{font-size:20px}
  .shCode{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--line);padding:1px 6px;border-radius:6px}
  .shCopy{margin-left:6px;font-size:11px;padding:2px 8px}
  /* Law Lookup, Medical Lookup and Maps cards (lookup.py) */
  .lawSec{font-size:13px}.lawQuote{margin:2px 0;padding:6px 10px;border-left:3px solid var(--accent);background:var(--line);border-radius:6px;font-size:13px;line-height:1.4;white-space:pre-wrap}
  .lawNote{font-size:11px;color:var(--dim);font-style:italic}
  .medUrgent{border-left-color:#f85149;background:rgba(248,81,73,.12)}.medPts{margin:2px 0 0 18px;padding:0;font-size:13px;line-height:1.4}
  .mapBox{height:220px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--panel);z-index:0}
  .mapPin{background:none;border:none}.mapPin b{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-sizing:border-box;background:var(--accent);color:#fff;font-size:12px;box-shadow:0 1px 3px rgba(0,0,0,.5)}
  .shBigView{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px;text-align:center;font-size:18px}
  .shBigPrice{font-size:48px;font-weight:800}
  /* YouTube cards */
  .vcards{display:flex;flex-direction:column;gap:8px;align-self:flex-start;max-width:min(92%,420px)}
  .vcard{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;text-decoration:none;color:var(--text)}
  .vcard:active{background:var(--line)}
  .vcard img{width:112px;height:63px;object-fit:cover;border-radius:8px;flex:0 0 auto;background:var(--bg)}
  .vinfo{display:flex;flex-direction:column;gap:2px;min-width:0}
  .vinfo b{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .vinfo span{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vinfo .vmeta{font-size:11px}

  /* attachments */
  #attachBtn,#cAttachBtn{padding:8px 10px}
  /* voice chat: 🎤 hold to talk; red while recording, accent ring while hands-free conversation mode listens */
  #micBtn{padding:8px 10px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  #micBtn.rec{background:#d63a3a;border-color:#d63a3a;color:#fff}
  #micBtn.convo{box-shadow:0 0 0 2px var(--accent)}
  #micBtn.ring{background:conic-gradient(var(--accent) calc(var(--ring,0) * 360deg),color-mix(in srgb,var(--accent) 18%,var(--panel)) 0);border-color:var(--accent)}
  #micBtn.hold{background:color-mix(in srgb,var(--accent) 35%,var(--panel))}#micBtn.hold::after{content:'⏸';font-size:11px;margin-left:2px}
  #input.livePart{color:var(--dim);font-style:italic}
  .msg.queuedMsg{opacity:.55}
  .msg.queuedMsg::after{content:'⏳ waiting: HAB answers this right after';display:block;font-size:11px;opacity:.8;margin-top:2px}
  .notForHab{color:var(--dim);font-size:12.5px;font-style:italic;text-align:center;margin:4px 0}
  #baDlg{width:min(96vw,900px)}
  .pairPin{margin-top:8px;font-size:15px;font-weight:600;text-align:center}
  .baFilter{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}.baFilter>*{flex:1 1 120px;min-width:0}
  .baRow{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:10px 12px;margin:0 0 6px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
  .baRow small{color:var(--dim);display:block}
  .baTag{font-size:12px;white-space:nowrap;color:var(--dim)}
  #baFrame{width:100%;height:70vh;border:1px solid var(--line);border-radius:10px;background:#fff;margin-top:6px}
  .notForHab button{margin-left:6px;font-size:12px;padding:1px 8px}
  .draftHide{display:none!important}
  #setHome{padding:4px 16px calc(16px + env(safe-area-inset-bottom));overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch}#setHome[hidden]{display:none}#setQ{width:100%;margin:6px 0 10px;box-sizing:border-box}
  #settings .pane{min-height:0}
  .setRow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);margin-bottom:8px}
  .setRow i{font-style:normal;font-size:24px;width:32px;text-align:center}.setRow b{display:block;font-size:16px}.setRow small{display:block;color:var(--dim);font-size:12px;margin-top:2px}.setRow::after{content:'›';margin-left:auto;font-size:22px;color:var(--dim)}
  #setHead{display:flex;align-items:center;gap:8px;padding:2px 0 8px;border-bottom:1px solid var(--line);margin-bottom:8px}#setHead b{font-size:17px;flex:1}#setBackBtn{padding:6px 10px}
  #setDots{display:flex;gap:4px}#setDots i{width:6px;height:6px;border-radius:50%;background:var(--line)}#setDots i.on{background:var(--accent)}
  #settings .pane{animation:none}#settings .pane.on.slideL{animation:setInL .18s ease-out}#settings .pane.on.slideR{animation:setInR .18s ease-out}
  @keyframes setInL{from{transform:translateX(24px);opacity:.4}}@keyframes setInR{from{transform:translateX(-24px);opacity:.4}}
  @media (prefers-reduced-motion:reduce){#settings .pane.on.slideL,#settings .pane.on.slideR{animation:none}}
  #btScroll > :not(.habPageHead){margin-left:16px;margin-right:16px}#btScroll .habPageHead{padding-left:16px}
  #dvScroll > :not(.habPageHead){margin-left:16px;margin-right:16px}#dvScroll .habPageHead{padding-left:16px}.dvLede{margin-top:0}
  .dvCard{background:var(--card,var(--panel));border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:10px}
  .dvState{display:flex;align-items:center;gap:10px}.dvDot{width:10px;height:10px;border-radius:50%;background:var(--dim);flex:none}
  #dvNow{white-space:pre-line;overflow-wrap:anywhere}
  .dvDot.running{background:#e0a020;animation:cabPulse 1.6s ease-in-out infinite}.dvDot.review{background:#3cb371}.dvDot.failed{background:#e0505c}
  #dvRun,#dvReview,#dvAsk,#dvFailed{display:grid;gap:8px}#dvRun[hidden],#dvReview[hidden],#dvAsk[hidden],#dvFailed[hidden]{display:none}
  #dvReview h3{margin:4px 0 0;font-size:16px}.dvSummary{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;max-height:50vh;overflow-y:auto}
  .dvCheck{font-size:13px;white-space:pre-wrap}.dvCheck.ok{color:#3cb371}.dvCheck.no{color:#e0703c}
  .dvAdd{display:grid;gap:8px}#dvText{width:100%}#dvJobs{display:grid;gap:6px;margin:10px 16px}
  .dvJob{display:grid;grid-template-columns:24px 1fr 36px;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:12px}
  .dvN{color:var(--dim);font-weight:700;text-align:center}.dvT{overflow-wrap:anywhere}.dvX{min-height:36px;padding:0}
  .mkItem{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:6px;margin:0 16px 8px}.mkItem.bug{border-left:3px solid #e0703c}.mkItem.idea{border-left:3px solid var(--accent)}
  .mkHead{font-size:12px;color:var(--dim)}.mkText{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}#mkList{margin:0 -16px}#mkChips{margin-bottom:8px}
  .dvGo{display:grid;grid-template-columns:1fr auto;gap:8px}.dvGo select{min-width:0}
  .btLede{margin-top:0;margin-bottom:12px}.btKinds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
  .btKind{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px;border-radius:14px;min-height:64px}
  .btKind small{color:var(--dim);font-weight:400;font-size:12px}.btKind.on{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
  @media (max-width:520px){.btKinds{grid-template-columns:1fr}.btKind{flex-direction:row;align-items:baseline;gap:8px;min-height:48px}}
  #btApp .pane{padding:0}#btMake{display:grid;gap:8px}#btMake[hidden]{display:none}#btIdea{width:100%}
  .btHead{margin:20px 0 8px;font-size:15px}.btLinks{display:grid;gap:8px}.btLinks button{text-align:left;padding:12px 14px;border-radius:12px;position:relative}
  .todoCard{align-self:stretch;max-width:100%;border-left:3px solid var(--accent)}.todoHead{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.todoHead span{color:var(--dim);font-size:12px}
  .todoList{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}.todoList li{display:flex;gap:8px;align-items:flex-start;font-size:14px}
  .todoBox{flex:none;width:18px;height:18px;border:2px solid var(--line);border-radius:5px;display:grid;place-items:center;font-size:12px;line-height:1}
  .todo-done{color:var(--dim)}.todo-done span:last-child{text-decoration:line-through}.todo-done .todoBox{background:var(--accent);border-color:var(--accent);color:#fff}
  .todo-in_progress .todoBox{border-color:var(--accent);color:var(--accent)}.todo-in_progress span:last-child{font-weight:600}
  .todoCard.live .todo-in_progress .todoBox{animation:cabPulse 1.6s ease-in-out infinite}
  .voicePhrase{font-size:14px;color:var(--text);font-weight:600;margin:6px 0}
  .voiceGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.voiceCard{display:flex;gap:4px}
  .voicePick{flex:1;display:flex;align-items:center;gap:6px;text-align:left;font-size:13px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text)}
  .voicePick.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.voicePick i{font-style:normal}.voicePlay{padding:4px 10px;border-radius:10px}
  @media (max-width:420px){.voiceGrid{grid-template-columns:1fr}}
  #micBtn.wait{opacity:.6}
  .msg.vo{cursor:pointer;color:transparent;text-shadow:0 0 8px var(--dim)}
  .tray{display:flex;gap:8px;flex-wrap:wrap;padding:6px 14px 0}
  .attChip{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px 4px 4px 6px;font-size:13px;max-width:100%}
  .attChip img{width:44px;height:44px;object-fit:cover;border-radius:6px}
  .attChip button{padding:0 8px;min-height:0;background:none;border:0;color:var(--dim);font-size:15px}
  .attRow{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
  .attRow img{max-width:min(100%,280px);max-height:280px;border-radius:8px;cursor:zoom-in;display:block}
  .attFile{font-size:12px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:3px 8px}

  /* tidy bot + watchdog log */
  .msg.tidied{cursor:pointer;position:relative;padding-right:22px}
  .msg.tidied::after{content:'✂';position:absolute;right:7px;bottom:3px;font-size:11px;opacity:.55}
  #wdLog{margin-top:8px;font:11px/1.55 ui-monospace,Menlo,Consolas,monospace;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px;
    max-height:58dvh;overflow:auto;white-space:pre-wrap;word-break:break-word}
  #wdLog .wdBad{color:#ffb25a}
  #pConn.klocked > :not(#kidLock){display:none}
  #kidLock{border:1px solid var(--accent);border-radius:12px;padding:10px 12px;background:var(--panel)}
  #kidLock .inline input{min-width:0;flex:1}
  #kidOpenBar{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin-bottom:8px;font-size:13px}
  .famBody{overflow:auto}
  .famMember{border:1px solid var(--line);border-radius:12px;padding:9px 11px;margin:8px 0;background:var(--panel)}
  .famMember b{font-size:15px}.famMember .tag{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:6px;color:var(--dim)}
  .famMember .row{font-size:13px;margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.famMember .row button{padding:4px 10px;font-size:12px}
  .famMember .bar{display:inline-block;width:46px;height:6px;border-radius:3px;background:var(--line);vertical-align:middle;margin:0 2px}.famMember .bar i{display:block;height:100%;border-radius:3px;background:var(--accent)}
  .famChat{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
  #famThread{min-height:30dvh;max-height:58dvh;overflow:auto;margin:6px 0;padding:8px;display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:12px}
  .famTop{display:flex;margin:4px 0 8px}.famTop button{flex:1;padding:12px;font-size:16px;border-radius:12px}
  .famPick{border:2px solid var(--accent);border-radius:12px;padding:8px 10px;margin:0 0 8px}
  #famPickList{display:flex;flex-direction:column;gap:6px;margin-top:6px}#famPickList button{text-align:left;padding:12px;font-size:16px;border-radius:10px}
  .famTo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.famToLbl{font-size:14px;color:var(--dim)}
  #famToChips{display:flex;gap:6px;flex-wrap:wrap}#famToChips button{padding:7px 14px;border-radius:999px;font-size:14px;border:1px solid var(--line)}
  #famToChips button.on{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:600}
  .famSend{display:flex;gap:8px;align-items:flex-end;margin:0;padding:0}.famSend textarea{margin:0}.famSend textarea{flex:1;min-height:3.2em;max-height:40dvh;resize:none;padding:10px 12px;font:inherit;font-size:16px;border-radius:12px}
  .famSend button{padding:12px 18px;font-size:16px;border-radius:12px}
  .famMsg{max-width:86%;border-radius:12px;padding:6px 10px;font-size:14px;background:var(--panel);border:1px solid var(--line);align-self:flex-start}
  .famMsg.me{align-self:flex-end;background:var(--me);color:var(--meText);border-color:transparent}.famMsg small{display:block;opacity:.65;font-size:11px}
  .famMsg.watched{border-style:dashed}
  .doomIcon{vertical-align:middle;border-radius:3px}
  .ci{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;line-height:1}.ci svg{width:100%;height:100%;display:block}
  #habTabs i .ci,#moreList i .ci{width:22px;height:22px}#tourBtn .ci,#viewAsBtn .ci{margin-right:3px}#petBtn .ci,#sceneGear .ci{width:15px;height:15px;vertical-align:middle}
  .aboutBody h4{margin:14px 0 4px}.aboutBody p,.aboutBody li{font-size:14px;line-height:1.55}.aboutBody{overflow:auto}
  #lockWiz{width:min(96vw,560px);min-height:min(80dvh,520px);display:none;flex-direction:column}#lockWiz[open]{display:flex}
  #lockWiz .dhead{gap:8px}#lockWiz .dhead b{flex:1}#lwHelpTog{font-size:13px}
  #lwBody{flex:1;overflow:auto;padding:6px 16px 12px}#lwBody p{font-size:15px;line-height:1.55;margin:8px 0}#lwBody p.lwHelp{opacity:.8;border-left:3px solid var(--accent,#4cc9f0);padding-left:10px;font-size:14px}
  #lwBody .lwBig{font-size:20px;font-weight:700;margin:10px 0}#lwBody input[type=password]{width:100%;margin:8px 0;font-size:16px}#lwBody button{margin:4px 6px 4px 0}
  #lwBody .lwChoice{display:block;margin-top:10px}.lwFoot{display:flex;align-items:center;justify-content:space-between;gap:8px}#lwDots{letter-spacing:3px;opacity:.7}
  #owDlg{width:min(96vw,600px)}#owBody{overflow:auto}.owLine{font:12px/1.6 ui-monospace,Consolas,monospace;padding:1px 4px;border-left:3px solid transparent}.owLine.ok{border-color:#7ee787}.owLine.bad{border-color:#ff4d4d;color:#ffb3b3}.owLine.warn{border-color:#ffb000}
  #hbDlg{width:min(96vw,640px)}#hbBody textarea{width:100%}#hbState .hbLog{font:11.5px/1.5 ui-monospace,Consolas,monospace;max-height:34dvh;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px 8px;margin:6px 0}
  #hbState .hbLog .e{color:#ffb3b3}#hbState pre{max-height:40dvh;overflow:auto;font:11px/1.45 ui-monospace,Consolas,monospace;white-space:pre;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px}
  #hbState pre .a{color:#7ee787}#hbState pre .d{color:#ff9aa2}
  .tpQ{font-size:15px;margin:4px 0 10px}.tpList{display:grid;gap:8px}.tpList label{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;font-size:15px}
  .tpList label:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.tpList input{width:18px;height:18px}.tpList small{display:block;color:var(--dim);font-size:12.5px}
  .reqGrid{display:grid;gap:8px;margin-top:6px}.reqGrid button{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:12px;padding:12px;font:inherit;cursor:pointer}
  .reqGrid button:hover{border-color:var(--accent,#4cc9f0)}.reqGrid .rqI{font-size:26px}.reqGrid b{display:block;font-size:15px}.reqGrid small{color:var(--dim);font-size:12.5px}
  #reqBody textarea{width:100%}#reqBody input{width:100%}.mtop .reqNew{margin-left:auto}
  #quickDock{position:absolute;right:14px;top:0;display:flex;gap:6px;align-items:center;z-index:6;flex-direction:row-reverse}
  #quickDock>button{position:static}
  #quickDock:not(.open)>button:not(#qdCaret):not(.qdActive){display:none!important}
  #quickDock.open>button:not([hidden]):not(#qdX):not(#qdCaret){display:flex!important;align-items:center}
  #qdCaret{height:26px;min-width:26px;padding:0 8px;border-radius:13px;font-size:16px;line-height:1;color:var(--dim);transition:transform .2s}
  #quickDock.open #qdCaret{transform:rotate(180deg)}
  #qdX{display:none}#qdShade{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9400}
  @media (pointer:coarse), (max-width:600px){
    #quickDock.open{position:fixed;right:12px;top:calc(env(safe-area-inset-top,0px) + 56px);flex-direction:column;align-items:stretch;gap:8px;background:var(--panel);
      border:1px solid var(--line);border-radius:14px;padding:12px;z-index:9500;box-shadow:0 12px 36px rgba(0,0,0,.55);min-width:190px}
    #quickDock.open>button{height:42px!important;font-size:15px!important;justify-content:flex-start;padding:0 14px!important}
    #quickDock.open #qdCaret{display:none}#quickDock.open #qdX{display:flex;align-items:center;justify-content:center}
    #quickDock.open #emoTog::after{content:'Emoji bubble';margin-left:6px;color:var(--text)}
    #quickDock.open #qdBroom::after{content:'Show or hide buttons';margin-left:6px;color:var(--text)}
    #quickDock.open #qdBug::after{content:'Report a bug';margin-left:6px;color:var(--text)}
  }
  .agCard{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0;background:var(--panel)}.agCard h4{margin:0 0 4px;font-size:15px}
  .scopeWrap{display:inline-block;vertical-align:middle}.scopePill{font-size:12px;border-radius:999px;padding:2px 10px;border:1px solid var(--line)}
  .scopePill[data-scope="default"]{border-color:#e3b341}.scopePill[data-scope="people"]{border-color:var(--accent)}
  .scopeEd{display:block;margin:6px 0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:13px}
  .scopeEd .scopePeople{margin:4px 0 4px 18px}.scopeRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0}
  .agCard .agMeta{font-size:12.5px;opacity:.75;line-height:1.5}.agCard .agTools{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0}.agCard .agTools span{font-size:11.5px;border:1px solid var(--line);border-radius:999px;padding:1px 8px}
  .agCard .agTest{font-size:12.5px;margin-top:6px;padding:6px 8px;border-radius:8px;background:var(--bg)}.agCard .agTest.ok{border-left:3px solid #7ee787}.agCard .agTest.bad{border-left:3px solid #ff9aa2}
  #agList details.agCard>summary{font-weight:700;cursor:pointer}#agList details.agCard .agMeta div{margin:2px 0}
  .agCard .agActs{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.agCard.prop{border-color:#ffb000}.agCard.tamper{border-color:#ff4d4d}
  /* 🔧 Workshop (jobs.py): the steps on each job card */
  .wsSteps{display:flex;gap:3px;flex-wrap:wrap;margin:6px 0 4px}.wsSteps span{font-size:11px;padding:2px 7px;border-radius:999px;border:1px solid var(--line);opacity:.55}
  .wsSteps span.done{opacity:.9;border-color:#7ee787}.wsSteps span.now{opacity:1;border-color:var(--accent);background:var(--bg);font-weight:700}
  .wsSteps span.bad{opacity:1;border-color:#ff4d4d;color:#ff9aa2}
  .agCard.wsWait{border-color:#ffb000}.agCard.wsBad{border-color:#ff4d4d}.agCard.wsLive{border-color:#7ee787}
  #wsBox textarea{width:100%;box-sizing:border-box}#wsBox .inline{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
  .wsSec{font-weight:700;margin:14px 0 2px;font-size:14px}.wsList li{margin:2px 0}
  .memRow{display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--line);padding:7px 2px}.memRow span{flex:1}.memRow small{opacity:.6}
  .clEntry{border-left:4px solid var(--line);padding:6px 9px;margin:8px 0;background:var(--panel);border-radius:0 8px 8px 0;font-size:13px}.clEntry.blocked{border-color:#ff2b3a}
  .clSaid{font-weight:600;margin-top:3px;white-space:pre-wrap}.clReply{opacity:.85;white-space:pre-wrap;margin-top:3px}.clEntry small{opacity:.65}
  #perTools{display:grid;gap:2px;max-height:38dvh;overflow:auto}
  .robobtn{display:flex;align-items:center;gap:10px}.robobtn small{opacity:.8}
  .robo .rl{animation:roboR 1s steps(1) infinite}.robo .bl{animation:roboB 1s steps(1) infinite}
  @keyframes roboR{0%{opacity:1}50%{opacity:.15}}@keyframes roboB{0%{opacity:.15}50%{opacity:1}}
  /* the Sentinel's shield-with-eye icon: blue while it watches, red (flashing like the board) while it raises an alert */
  .shieldEye{display:inline-block;vertical-align:middle}
  .shieldEye.red .sh-b,.sentRed .shieldEye .sh-b,.chip.error .shieldEye .sh-b{fill:#ff3b4a;stroke:#b0122a}
  .shieldEye.red .sh-h,.sentRed .shieldEye .sh-h,.chip.error .shieldEye .sh-h{fill:#ff7381}
  .shieldEye.red .sh-i,.sentRed .shieldEye .sh-i,.chip.error .shieldEye .sh-i{fill:#8a0f1f}
  .shieldEye.red,.sentRed .shieldEye,.chip.error .shieldEye{animation:shRed 1s steps(1) infinite}
  @keyframes shRed{0%{opacity:1}50%{opacity:.55}}
  @media (prefers-reduced-motion: reduce){.shieldEye.red,.sentRed .shieldEye,.chip.error .shieldEye{animation:none}}
  #sentDlg .dhead b{display:flex;align-items:center;gap:8px}
  .storyHead{display:flex;gap:10px;align-items:center;border-radius:12px;padding:12px 14px;margin:6px 0 10px;font-size:16px;font-weight:600;line-height:1.4;border:1px solid var(--line);background:var(--panel)}
  .storyHead.good{border-color:#3fd87f}.storyHead.bad{border-color:#ffb25a}.storyIcon{font-size:26px}
  .storyAttn{border-left:4px solid #ffb25a;background:var(--panel);border-radius:0 10px 10px 0;padding:6px 12px;margin:8px 0}.storyAttn h4{margin:2px 0 4px}
  .storySec{border:1px solid var(--line);border-radius:12px;margin:8px 0;background:var(--panel);padding:2px 12px}.storySec summary{padding:9px 0;font-weight:600;cursor:pointer}
  .brCmpGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.brCmpGrid > div{white-space:pre-wrap;min-width:0}
  @media (max-width:768px){ .brCmpGrid{grid-template-columns:1fr} }
  #brDlg input:not([type=checkbox]),#brDlg textarea{width:100%;margin:4px 0}#brDlg .inline input{flex:1;min-width:0;width:auto}
  .brBig{width:100%;padding:12px;font-size:16px;margin:6px 0}#brOffline.on{border-color:#3fd87f;background:rgba(63,216,127,.12)}
  .brGroup{font-size:13px;opacity:.7;margin:10px 0 4px}
  .brPay{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:10px;color:var(--text);text-decoration:none;font-weight:600}
  #orBox details{margin:6px 0}.orSaved{margin:4px 0 12px}.orSw{width:20px;height:20px;flex:none}.brRow.orOff{opacity:.5}#orBox summary{cursor:pointer;font-weight:600;padding:6px 0}
  .brRow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;margin:4px 0;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;flex-wrap:wrap}
  .brRow.on{border-color:#3fd87f;background:rgba(63,216,127,.10)}.brRow b{font-weight:600}.brRow small{opacity:.7;flex:1;min-width:120px}
  .brDot{font-size:16px;width:18px;text-align:center}.brRow.on .brDot{color:#3fd87f}
  .brAct{display:flex;gap:8px;align-items:center;margin-left:auto}.brAct select{max-width:200px}.brRm{padding:4px 8px;opacity:.6}.brRm:hover{opacity:1}
  .brSw input{width:20px;height:20px}
  .bigAct{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;text-align:left;padding:14px 16px;margin:6px 0;border-radius:14px;font-size:16px}
  .bigAct small{font-size:13px;opacity:.75;line-height:1.4;font-weight:400}#giftBox{margin:4px 0 12px}#giftBox input:not([type=checkbox]),#giftText{width:100%;margin:4px 0}
  .legalText{white-space:pre-wrap;font-size:14px;line-height:1.5}.legalBtns{margin-top:6px;flex-wrap:wrap}
  .pubWarn{border:1px solid #ffb25a;border-radius:12px;padding:12px 14px;margin:8px 0;background:rgba(255,178,90,.08)}.pubWarn ul{margin:6px 0 10px;padding-left:20px;line-height:1.5}
  #phoneBox{margin:4px 0 12px}.phoneRow{border:1px solid var(--line);border-radius:12px;padding:12px;margin:8px 0;background:var(--panel)}
  .phoneUrl{display:block;font-family:monospace;font-size:15px;word-break:break-all;margin:6px 0;color:#7cc8ff;text-decoration:none}.phoneQr{margin-top:8px}.phoneQr img,.phoneQr canvas{background:#fff;padding:8px;border-radius:8px}
  .invWarn{color:#ffb25a}
  #invWrap.flash{outline:3px solid #3fd87f;outline-offset:4px;border-radius:10px;transition:outline-color 1s}
  .suChoices .brRow{margin:3px 0}.suChoices input{width:18px;height:18px}#setupDlg p{line-height:1.5}
  .storyItem{padding:5px 0 7px;font-size:14px;line-height:1.5;border-top:1px solid var(--line)}.storyAttn .storyItem{border:0;padding:3px 0}
  #sentPlain{overflow:auto}
  .sentCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:8px 0}
  .sentCard{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--panel)}.sentCard b{font-size:20px;display:block}
  .sentCard.alert b{color:#ff5a66}.sentCard.warn b{color:#ffb25a}.sentCard.notice b{color:#5ab8ff}
  .sentEv{border-left:4px solid var(--line);padding:6px 9px;margin:6px 0;background:var(--panel);border-radius:0 8px 8px 0;font-size:13px;cursor:pointer}
  .sentEv.alert{border-color:#ff2b3a}.sentEv.warn{border-color:#ffb25a}.sentEv.notice{border-color:#2b7bff}
  .sentEv small{opacity:.7;display:block}.sentEv pre{white-space:pre-wrap;word-break:break-word;font:11px/1.5 ui-monospace,Consolas,monospace;margin:6px 0 0;display:none}
  .sentEv.open pre{display:block}.sentFilters{display:flex;gap:6px;flex-wrap:wrap}#sentDet,#sentSum{overflow:auto}


  /* kids' chats */
  #kidsDlg{width:min(96vw,560px);height:min(88dvh,820px)}
  @media (max-width:600px){#kidsDlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}}
  .kTools{display:flex;gap:8px;padding:8px 16px 0}
  .kTools input[type=date]{width:auto}
  .kRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 4px;border-bottom:1px solid var(--line);cursor:pointer}
  .kRow b{flex:1;min-width:40%}
  .pill.bad{border-color:#8f2e36;color:#ff9aa2}
  .kHit{outline:2px solid #ffcf5c}
  #kBody .msg{display:block;margin:6px 0}
  #kBody .msg.me{margin-left:auto;width:fit-content}

  /* pictures, videos, gallery, under the hood */
  .mediaCard{min-width:min(70vw,300px)}
  .mlabel{font-size:14px}
  .mbar{height:6px;background:var(--line);border-radius:3px;margin-top:8px;overflow:hidden}
  .mbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .6s}
  .mmedia img,.mmedia video{display:block;max-width:100%;border-radius:10px;cursor:zoom-in}
  .mcap{margin-top:6px;font-size:12px;color:var(--dim)}
  #galleryGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;padding-top:8px}
  .gWide{grid-column:1/-1}
  .gTile{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--line);cursor:pointer;background:var(--panel)}
  .gTile img,.gTile video{width:100%;height:100%;object-fit:cover;display:block}
  .gBadge{position:absolute;left:6px;bottom:6px;font-size:14px}
  .gDel{position:absolute;right:4px;top:4px;padding:2px 6px;font-size:12px;opacity:.85}
  #lightbox{width:min(96vw,900px)}

  /* PHONES: every pop-up window opens full screen. This one shared rule covers every <dialog>, so pop-ups
     added later get it automatically. Desktop is unchanged. */
  @media (max-width:768px){
    dialog[open]{position:fixed;inset:0;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;
      margin:0;border:0;border-radius:0}
    dialog[open] .dhead{position:sticky;top:0;z-index:2;background:var(--bg);border-bottom:1px solid var(--line);
      padding:calc(10px + env(safe-area-inset-top)) 16px 10px}
    dialog[open] .dhead b{font-size:18px}
    dialog[open] .dhead button{min-width:44px;min-height:44px;font-size:18px}
    dialog[open] .dfoot{background:var(--bg);padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
    dialog[open] .dfoot button{flex:1;min-height:48px;font-size:16px}
    dialog[open] .stabs{padding-top:8px}
    dialog[open] .stabs button{min-height:44px;font-size:15px}
    dialog[open] input,dialog[open] select,dialog[open] textarea{font-size:16px;min-height:44px}   /* 16px also stops the iPhone zooming in */
    dialog[open] input[type=checkbox],dialog[open] input[type=radio]{min-height:0;width:22px;height:22px;margin-top:1px}
    dialog[open] input[type=range]{min-height:0;height:36px;margin-bottom:12px}
    dialog[open] input[type=color]{min-height:0}
    dialog[open] .pane label.check{align-items:flex-start;margin:14px 0 4px}
    dialog[open] button{min-height:44px}
    dialog[open] .pane{font-size:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
    #lbBody .mmedia img,#lbBody .mmedia video{max-height:75dvh}
    #cmdPop{left:8px;right:8px;max-height:max(240px,calc(var(--vvh,100dvh) - 150px))}
    #cmdPop div{min-height:48px;padding:12px;align-items:center}
    #cmdPop code,#cmdPop span{font-size:15px}
    .dMenu button{min-height:44px}
    .chips button{min-height:40px}
  }
  #lbBody .mmedia img,#lbBody .mmedia video{max-height:70dvh;margin:0 auto;cursor:default}
  .person{flex-wrap:wrap}
  #cHood.on{border-color:var(--accent);color:var(--accent)}
  /* the Stop button (Send turns into it while HAB works), and the long-press "Edit & resend" menu */
  button.stopBtn{background:#d63a3a!important;border-color:#d63a3a!important;color:#fff!important;font-weight:700}
  .mediaCard.stopped{opacity:.6}
  #editPop{position:fixed;z-index:120;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px;
    box-shadow:0 6px 24px rgba(0,0,0,.35)}
  #editPop button{display:block;min-height:44px;padding:0 16px;font-size:15px;border:0;background:none;color:inherit}
  .msg.me.pressing{opacity:.7}
  .msg.me{-webkit-touch-callout:none}
  /* builder controls (Build now panel) */
  #bNow{font-size:13px;color:var(--dim);margin:-2px 0 6px;word-break:break-word}
  #bCtl{display:flex;flex-direction:column;gap:6px;margin-top:8px}
  #bAsk{border:1px solid var(--accent);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
  .brow{display:flex;gap:6px}
  .brow input{flex:1;min-width:0}
  .bnote{font-size:13px;color:var(--dim)}
  #bpanel{margin:8px 14px 0;padding:10px 12px;background:var(--panel);border:1px solid var(--accent);border-radius:12px;flex:0 0 auto}
  #bState{font-weight:700;margin-bottom:6px}
  #bFeed{display:flex;flex-direction:column;gap:6px}
  #bSummary{margin-top:8px}
  #bDenials{margin-top:8px;font-size:13px}
  #cScroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch}
  #cScroll .cbar{position:sticky;top:0;z-index:2;background:var(--bg);padding-bottom:6px}
  /* Direct line: 💬 Chat and 📡 Status tabs, the ⬇ Jump to latest button, and the Status page */
  #cTabs{padding:6px 14px 6px;flex:0 0 auto}
  #cTabs button{position:relative}
  .sdot{position:absolute;top:4px;right:8px;width:9px;height:9px;border-radius:50%;background:#ff4d4d}
  #cJump{position:absolute;right:16px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:5;border-radius:20px;padding:8px 14px;
    background:var(--panel);border:1px solid var(--accent);color:var(--accent);font-weight:700;box-shadow:0 4px 16px rgba(0,0,0,.35)}
  #cWait.flash{border-color:#ffa63d;color:#ffa63d;font-weight:700;animation:waitFlash 1s ease-in-out infinite}
  @keyframes waitFlash{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px rgba(255,166,61,.35),0 0 16px #ffa63d}}
  @media (prefers-reduced-motion:reduce){#cWait.flash{animation:none;box-shadow:0 0 0 3px rgba(255,166,61,.4)}}
  #cStatus{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 0 calc(14px + env(safe-area-inset-bottom))}
  .sChips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px 0}
  .sChips button{font-size:13px;padding:5px 12px;border-radius:16px}
  .sChips button.on{border-color:var(--accent);color:var(--accent)}
  .sHead{margin:14px 14px 4px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
  #sNow,#sWait,#sFeed,#sRecent{padding:0 14px;display:flex;flex-direction:column;gap:6px}
  #sWait #bAsk,#bHeld{margin-top:4px}
  #bHeld{border:1px solid #ffa63d;border-radius:10px;padding:8px 10px;font-size:13px}
  .sJob{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:14px}
  .sJob .sStep{color:var(--dim);font-size:13px;margin-top:2px;word-break:break-word}
  .sJob.bad{border-color:#8f2e36}
  .sJob .macts{margin-top:6px}
  .sbar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin:6px 0}
  .sbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .4s}
  .sbar.busy i{width:35%;animation:sbusy 1.4s ease-in-out infinite}
  @keyframes sbusy{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
  .wLine{font-size:13px;padding:6px 8px;border-radius:8px;background:var(--panel);cursor:pointer;word-break:break-word;white-space:pre-wrap}
  .wLine time{color:var(--dim);margin-right:6px}
  .wLine b{margin-right:6px}
  .wLine.err{border-left:3px solid #ff6b78}
  #uhood{flex:1 0 auto;padding:8px 14px calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
  .hsay{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:14px;white-space:pre-wrap;word-wrap:break-word}
  .hsay time{display:block;color:var(--dim);font-size:11px;margin-bottom:2px}
  .hdo{color:var(--dim);font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;padding:0 6px;word-break:break-word}

  /* log-in screen, account box, direct line */
  #login{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px}
  #lForm{width:min(92vw,360px);display:flex;flex-direction:column;gap:6px}
  #lForm label{color:var(--dim);font-size:13px;margin-top:8px}
  #lForm h2{margin:6px 0 0;font-size:22px}
  .lBrand{letter-spacing:.3em;color:var(--accent);font-size:20px}
  #lGo{margin-top:14px;padding:12px}
  .linkish{background:none;border:0;color:var(--accent);font-size:14px;padding:8px}
  #login.invite{align-items:flex-start;overflow-y:auto}
  #lSteps{margin:4px 0 0;padding-left:20px;font-size:14px;color:var(--dim)}
  #lSteps li{margin:4px 0}
  #invOut textarea{width:100%;min-height:150px;font-size:13px;margin-top:6px}
  .acct{flex-wrap:wrap;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:10px 12px;background:var(--panel);
    border:1px solid var(--line);border-radius:10px;font-size:14px}
  .person{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
  .person b{flex:1}
  .person button{padding:4px 10px;font-size:13px}
  .person .danger{color:#ff9aa2}
  .pairBody{display:grid;gap:10px;justify-items:center;text-align:left}.pairSteps{margin:0;padding-left:20px;display:grid;gap:4px;justify-self:stretch}
  .lRules{margin:4px 0 12px;padding:10px 12px;border-radius:12px;background:rgba(11,143,163,.12);border:1px solid rgba(11,143,163,.45);font-size:15px;line-height:1.45}
  .lRules div{margin-top:4px}
  #relBtn{position:absolute;right:14px;top:38px;height:30px;padding:0 12px;border-radius:999px;font-weight:700;font-size:13px;z-index:4;
    background:var(--accent, #0b8fa3);color:#fff;border:0;animation:buildFlash 1.6s ease-in-out infinite}
  @media (prefers-reduced-motion:reduce){#relBtn{animation:none}}
  #gameBtn{position:absolute;left:14px;top:38px;height:30px;min-width:30px;padding:0 8px;border-radius:999px;font-size:15px;line-height:1;z-index:4;color:var(--text)}
  #gameBtn.on{background:#6b4cff;color:#fff;border-color:transparent;font-size:13px;font-weight:700}
  /* 🚀 Launch (launch.py): Tester's own button by HAB's face, maker's PC only. After the press it reads "Live since <date>" and does nothing. */
  #launchBtn{position:absolute;right:14px;bottom:34px;height:30px;padding:0 12px;border-radius:999px;font-weight:700;font-size:13px;z-index:4;background:#1b8a4b;color:#fff;border-color:transparent}
  #launchBtn.done{background:transparent;color:var(--dim);border:1px solid var(--line);font-weight:600;opacity:1;cursor:default}
  .lcRow{display:flex;gap:10px;align-items:flex-start;justify-content:flex-start;text-align:left;padding:10px 12px;margin:6px 0;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
  .lcRow i{font-style:normal;font-weight:800;width:22px;text-align:center;flex:none}
  .lcRow.ok{border-color:#3fd87f;background:rgba(63,216,127,.10)}.lcRow.ok i{color:#3fd87f}
  .lcRow.bad{border-color:#ff6b6b}.lcRow.bad i{color:#ff6b6b}
  .lcRow>div{flex:1;min-width:0}.lcRow b{display:block;font-weight:600}.lcRow small{display:block;opacity:.8;margin-top:2px}
  .lcDone{text-align:center;padding:26px 8px;font-size:20px;font-weight:700;line-height:1.4}
  button.lcGo{flex:1 1 60%;min-height:52px;font-size:17px;font-weight:700;background:#1b8a4b;color:#fff;border-color:transparent}
  button.lcGo:disabled{background:var(--panel);color:var(--dim);border-color:var(--line)}
  .bugAdmin{margin-top:12px;padding:10px 12px;border:1px dashed var(--accent, #0b8fa3);border-radius:12px}.bcBtns{display:flex;gap:8px;margin:8px 0}.bcBtns button{flex:1}
  .bugKinds{display:flex;gap:8px;margin-bottom:10px}.bugKinds button{flex:1;padding:10px;border-radius:12px;font-weight:600}
  .bugKinds button.on{background:var(--accent, #0b8fa3);color:#fff;border-color:transparent}
  #lMsg.lErr{color:#fff;background:#b3261e;border-radius:10px;padding:10px 12px;margin-top:10px;font-weight:600}
  .trustSec{margin:10px 0;padding:12px 14px;border:1px solid var(--line, #3334);border-radius:14px}.trustAdd{display:flex;gap:8px;margin:8px 0}.trustAdd input{flex:1;min-width:0}
  .trustWho{margin:10px 0 2px;font-weight:600;opacity:.8}.trustRow{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line, #3332)}
  .trustTxt{flex:1;min-width:0;display:flex;flex-direction:column}.trustTxt small{opacity:.7;overflow-wrap:anywhere}
  .pairQr{background:#fff;padding:12px;border-radius:14px;line-height:0}.pairQr.old{opacity:.25}.pairQr img,.pairQr canvas{display:block}
  .pairLink{display:flex;gap:8px;align-items:center;overflow-wrap:anywhere}.pairLink a{flex:1;min-width:0}
  #recSend{display:grid;gap:6px}#recSend > *{margin-top:6px}#recCodes{background:var(--card,#fff);padding:10px;border-radius:10px;font-size:16px;letter-spacing:.05em}
  html:not(.noKids) .noKidOnly{display:none!important}
  .noKids #famKids,.noKids #vsKids,.noKids #shopKidRow,.noKids #whereKidRow,.noKids #kidsDlg,.noKids .kidOnly{display:none!important}
  .pushBox{border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0;display:grid;gap:8px}
  .pushDev{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px}
  .dangerText{color:#e0505c;background:none;border:0;padding:10px 0;font-size:14px;text-align:left}.dangerBtn{background:#d63a3a;color:#fff;border-color:#d63a3a}
  .mwho{font-size:13px;color:var(--dim);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cbar{display:flex;flex-wrap:wrap;gap:6px;padding:6px 14px 0}
  .cbar button{font-size:13px;padding:6px 10px;white-space:nowrap}
  /* "Add to build list" glows when Claude's newest reply asks for it (stops on tap or after a minute) */
  #cBuild.flash{border-color:var(--accent);color:var(--accent);animation:buildFlash 1s ease-in-out infinite}
  @keyframes buildFlash{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent),0 0 18px var(--accent)}}
  @media (prefers-reduced-motion:reduce){#cBuild.flash{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent)}}
  #clog{flex:1 0 auto;padding:8px 14px;display:flex;flex-direction:column;gap:8px}
  .msg.claude{border-color:#d97757}
  #cForm{display:flex;gap:8px;padding:8px 14px 8px}
  #cForm input{flex:1;min-width:0}

  /* mailbox */
  .dbtns{display:flex;gap:6px;align-items:center}
  .mdot{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff4d4d;color:#fff;
    font:700 11px/18px -apple-system,"Segoe UI",sans-serif;text-align:center}
  #mWho{font-size:13px;padding:6px 10px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .blBtn{position:relative}
  .blGroup{margin-top:12px}
  .blGroup>summary{cursor:pointer;color:var(--dim);font-size:13px;padding:4px 0}
  .bl .mtop{cursor:pointer}
  .pill.building{border-color:var(--accent);color:var(--accent)}
  .pill.failed{border-color:#8f2e36;color:#ff9aa2}
  .mcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:10px}
  /* mailbox Select, swipe and the Undo toast */
  .mselbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  #mSelBar{padding:8px 16px 0}
  #mSelBar button{font-size:13px;padding:6px 10px;min-height:36px}
  #mSelN{font-size:13px;color:var(--accent);padding:0 4px}
  .mMenuWrap{position:relative;margin-left:auto}
  .mtick{width:22px;height:22px;flex:0 0 auto;margin:0 4px 0 0;accent-color:var(--accent)}
  .mcard.selmode{cursor:pointer}
  .mcard.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
  .mcard{position:relative;overflow:hidden}
  .mcard .mswipe{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:stretch;justify-content:flex-end;background:var(--panel);overflow:hidden;
    width:calc(-1 * var(--sx, 0px));max-width:100%;transition:width .22s ease}   /* the buttons show as the card slides left (06-accounts.js) */
  .mcard > :not(.mswipe){transform:translateX(var(--sx, 0px));transition:transform .22s ease}
  .mcard.sliding > :not(.mswipe), .mcard.sliding .mswipe{transition:none}
  .mswipe button{flex:none;white-space:nowrap}
  .mswipe button{border-radius:0;border:0;padding:0 16px;font-weight:700}
  .mswipe .danger{background:#d63a3a;color:#fff}
  #mToast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + var(--dockH,0px) + env(safe-area-inset-bottom));z-index:5;display:flex;gap:10px;align-items:center;
    background:var(--panel);border:1px solid var(--accent);border-radius:12px;padding:8px 12px;box-shadow:0 6px 24px rgba(0,0,0,.4);max-width:92vw;font-size:14px}
  #mToast[hidden]{display:none}
  #mToastU{font-weight:700;color:var(--accent)}
  .mcard.new{border-color:var(--accent)}
  .mcard.done,.mcard.dismissed,.mcard.declined{opacity:.7}
  .mtop{display:flex;gap:8px;align-items:center}
  .mtop b{flex:1;font-size:15px}
  .micon{font-size:18px}
  .pill{font-size:11px;padding:2px 8px;border-radius:10px;border:1px solid var(--line);color:var(--dim);white-space:nowrap}
  .pill.new{border-color:var(--accent);color:var(--accent)}
  .pill.approved,.pill.done{border-color:#2e8f6b;color:#7ee787}
  .pill.declined{border-color:#8f2e36;color:#ff9aa2}
  .mmeta{color:var(--dim);font-size:12px;margin-top:2px}
  .mcard p{margin:8px 0 0;white-space:pre-wrap;font-size:14px}
  .mcard p.mwhy{color:var(--dim);font-size:13px}
  .mreply{white-space:pre-wrap;margin-top:6px;padding:6px 10px;border-left:3px solid var(--accent);background:var(--bg);border-radius:6px;font-size:13px}
  .macts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .macts button{padding:5px 12px;font-size:13px}
  .macts .approve{background:#14361f;border-color:#3fb950;color:#7ee787;font-weight:700}
  .macts .danger{color:#ff9aa2}
  .mrbox{display:flex;gap:6px;margin-top:8px}
  #pickList button{font-size:15px;padding:8px 14px}
  #pinGo,#pickAdd{white-space:nowrap}
  .mreview{margin-top:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg)}
  .mreview b{font-size:13px}
  .mreview.approve{border-color:#2e8f6b}
  .mreview.approve b{color:#7ee787}
  .mreview.needs_changes{border-color:#9a6b00}
  .mreview.needs_changes b{color:#ffcf5c}
  .mreview.reject{border-color:#8f2e36}
  .mreview.reject b{color:#ff9aa2}
  .mreview p{margin:4px 0 0;font-size:13px}
  .mreview details{margin-top:6px;font-size:12px}
  .mt{font:11px/1.5 ui-monospace,Menlo,Consolas,monospace;margin-top:3px;word-break:break-word}
  .mt.ok{color:#7ee787}
  .mt.bad{color:#ff9aa2}
  .mtest{margin-top:8px;font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;word-break:break-word}
  .mtest b{font-family:inherit;color:var(--dim)}
  .mcode{margin-top:6px;font-size:13px}
  .mcode pre{max-height:240px;overflow:auto;margin:6px 0 0;padding:8px;background:var(--bg);border:1px solid var(--line);border-radius:8px;font:11px/1.45 ui-monospace,Menlo,Consolas,monospace;white-space:pre}

  /* chat history drawer */
  #drawerBack{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45)}
  #drawer{position:fixed;left:0;top:0;bottom:0;z-index:71;width:min(82vw,300px);display:flex;flex-direction:column;gap:8px;
    padding:calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
    background:var(--panel);border-right:1px solid var(--line);transform:translateX(-102%);transition:transform .25s ease;
    box-shadow:8px 0 30px rgba(0,0,0,.35)}
  #drawer.open{transform:none}
  .dTop{display:flex;align-items:center;justify-content:space-between;padding:0 4px}
  .dTop b{letter-spacing:.2em;color:var(--accent)}
  .dTop button{width:38px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--dim)}
  .newChat{display:flex;align-items:center;gap:8px;text-align:left;background:none;border:0;padding:9px 10px;font-weight:600}
  .newChat:hover,.newChat:active{background:var(--line)}
  .newChat span{color:var(--accent)}
  #chatSearch{padding:8px 10px;font-size:15px}
  #chatList{flex:1;overflow-y:auto;margin:0 -4px;padding:0 4px}
  .dGroup{color:var(--dim);font-size:12px;font-weight:600;margin:12px 8px 4px}
  .dItem{position:relative;display:flex;align-items:center;gap:6px;padding:8px 6px 8px 10px;border-radius:10px;cursor:pointer;font-size:14px}
  .dItem span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dItem:hover,.dItem.on{background:var(--line)}
  .dMore{padding:0 6px;height:24px;background:none;border:0;color:var(--dim);opacity:.7}
  .dMenu{position:absolute;right:4px;top:100%;z-index:3;display:flex;flex-direction:column;min-width:130px;padding:4px;
    background:var(--bg);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
  .dMenu button{text-align:left;background:none;border:0;padding:8px 10px;font-size:14px}
  .dMenu button:hover{background:var(--line)}
  .dMenu .danger{color:#ff9aa2}
  .dEmpty{color:var(--dim);font-size:13px;padding:12px 8px}

  /* suit HAB: the main face gets a little body */
  /* he's drawn in front of everything in his window: the room (0), the hammer crate (1), him (2); the little
     buttons in the window's corners (3) stay on top so they can always be tapped */
  #habFig{display:flex;flex-direction:column;align-items:center;will-change:transform;z-index:2}
  #dropBtn,#sceneGear,#petBtn,#emoTog{z-index:3}
  #hammerProp{z-index:1}
  #suitBody{display:none;width:0;height:0;overflow:visible;transition:height .45s ease,opacity .25s}
  #app.suited #suitBody{display:block}
  /* closing: the body fades out clipped to its own box (so nothing pokes up over his head), then the window shrinks */
  #suitBody.closing{opacity:0;overflow:hidden}
  #dropBtn{position:absolute;left:14px;bottom:4px;width:22px;height:17px;padding:0;font-size:10px;line-height:1;
    border-radius:6px;color:var(--dim);transition:transform .1s,box-shadow .15s,border-color .15s}
  #dropBtn.pressed{transform:translateY(2px);border-color:var(--accent);color:var(--accent);box-shadow:0 0 14px var(--accent)}
  .sSuit{stroke:var(--face);stroke-width:1;stroke-linejoin:round}
  .sLimb{stroke-linecap:round;fill:none}
  .sHand{fill:var(--face)}
  .sCase{fill:#7a4a22;stroke:#3a220e;stroke-width:1}
  /* his look (hair, beard, glasses, hats, masks) is drawn inside his face, so it moves with every bob and tilt */
  .sHat{stroke:var(--face);stroke-width:2;stroke-linejoin:round}
  .sSpark{animation:sSpark 1.1s ease-in-out infinite alternate}
  @keyframes sSpark{to{opacity:.25}}
  #ixFx .cfti{position:absolute;top:-6%;width:7px;height:11px;border-radius:2px;opacity:.95;animation:cfti 2.6s linear forwards}
  @keyframes cfti{to{transform:translate(var(--dx),calc(var(--fall) * 1px)) rotate(540deg);opacity:0}}
  @media (prefers-reduced-motion:reduce){.sSpark{animation:none}}
  /* the room behind him, only while the scene is open: wall and floor colours (if picked), then light greyscale
     furniture (or full colour in Colour mode). Only the furniture is see-through; HAB is solid. */
  #sceneRoom{position:absolute;left:0;bottom:0;width:100%;height:0;overflow:visible;pointer-events:none;opacity:0;
    transition:opacity .4s;z-index:0}
  #sceneRoom.on{opacity:1}
  #sceneRoom .rStuff{opacity:.5}
  #sceneRoom.color .rStuff{opacity:.9}
  #sceneRoom.editing .rStuff{opacity:.8}
  #sceneRoom.color.editing .rStuff{opacity:1}
  #sceneRoom.editing .fp{pointer-events:auto;cursor:ew-resize;touch-action:none}
  #sceneRoom .rp{fill:#8a8a8a;fill-opacity:.22;stroke:#8a8a8a;stroke-width:1.1;stroke-linejoin:round}
  #sceneRoom .rl{fill:none;stroke:#8a8a8a;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
  #sceneGear{position:absolute;right:14px;bottom:4px;width:26px;height:20px;padding:0;font-size:12px;line-height:1;border-radius:6px;color:var(--dim)}
  /* steam puffs when he's annoyed */
  #ixFx .stm{position:absolute;top:10%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#e8e8e8;opacity:0;animation:stm 1.1s ease-out forwards}
  @keyframes stm{0%{opacity:.85;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(var(--dx),-46px) scale(1.6)}}
  /* scene editor: a panel at the bottom, so he stays in view above it */
  #sceneEd,#petEd{position:fixed;left:0;right:0;bottom:0;z-index:60;max-width:900px;margin:0 auto;max-height:min(50vh,440px);display:flex;flex-direction:column;
    background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.4);
    padding-bottom:env(safe-area-inset-bottom)}
  #petEd{z-index:61;max-height:min(60vh,520px)}
  /* Pet Mode: the 🐾 button by his face, the stats bars and the care buttons */
  #petBtn{position:absolute;right:14px;bottom:4px;height:22px;padding:0 6px;font-size:13px;line-height:1;border-radius:6px;color:var(--dim)}
  #mailPop{position:absolute;left:calc(50% - 98px);top:14px;z-index:4;width:44px;height:36px;border-radius:12px;font-size:22px;line-height:1;padding:0;border:1px solid var(--accent);background:var(--panel);box-shadow:0 0 14px rgba(76,201,240,.45);animation:mailBob 1.6s ease-in-out infinite}
  #mailPop b{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;border-radius:9px;background:#ff4d5e;color:#fff;font-size:11px;line-height:18px;padding:0 4px}
  @keyframes mailBob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-5px) rotate(6deg)}}
  #logJump{position:absolute;right:16px;bottom:78px;z-index:6;border-radius:18px;padding:6px 12px;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
  #homeNewBtn{display:none!important}   /* hotfix: duplicated the chat panel's ✎ New chat */
  #homeBugBtn{position:absolute;right:14px;bottom:4px;height:24px;padding:0 9px;font-size:12.5px;line-height:1;border-radius:8px;color:var(--text);z-index:3}
  .petMood{font-size:15px;margin:10px 0 2px}
  .petMood i{color:var(--dim)}
  .petStats{display:grid;grid-template-columns:auto 1fr 2.6em;gap:6px 10px;align-items:center;font-size:14px;margin-top:8px}
  .petStats .petN{text-align:right;color:var(--dim)}
  .petBar{height:10px;border-radius:5px;background:var(--line);overflow:hidden}
  .petBar>span{display:block;height:100%;background:var(--accent);border-radius:5px;transition:width .4s}
  .petBar.low>span{background:#e0a030}
  .petBar.xp>span{background:#f5c542}
  .petMsg{min-height:1.2em;color:var(--dim);font-size:13px;margin-top:6px}
  .seChips button:disabled{opacity:.45}
  #petTuneText{width:100%;min-height:260px;font:12px/1.4 ui-monospace,Consolas,monospace;color:var(--text);background:var(--bg);
    border:1px solid var(--line);border-radius:8px;padding:8px;box-sizing:border-box}
  .seHead{display:flex;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
  .seHead b{flex:1}
  .seBody{overflow-y:auto;padding:2px 14px 14px;-webkit-overflow-scrolling:touch}
  .seBody h4{margin:12px 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
  .seBody h4 small{text-transform:none;letter-spacing:0;font-weight:400}
  .seChips{display:flex;flex-wrap:wrap;gap:6px}
  .seChips button{padding:6px 10px;font-size:14px}
  .seRow{display:flex;align-items:center;gap:8px;padding:2px 0;font-size:14px}
  .seRow label{flex:0 0 120px;display:flex;gap:6px;align-items:center}
  .seRow input[type=range]{flex:1;min-width:0}
  .seCols{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:14px;margin-top:8px}
  .seCols label{display:flex;align-items:center;gap:6px}
  .seCols input[type=color]{width:38px;height:28px;padding:0;border:1px solid var(--line);border-radius:6px;background:none}
  .seCols select{font:inherit;font-size:14px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:4px 6px;width:auto}
  .seCols input[type=date]{width:auto;padding:4px 6px;font-size:14px;background:var(--bg)}
  .seCols button{padding:4px 10px;font-size:13px}
  .seRow input[type=color]{flex:0 0 34px;width:34px;height:26px;padding:0;border:1px solid var(--line);border-radius:6px;background:none}
  .seTog{display:flex;align-items:flex-start;gap:8px;font-size:14px;margin:4px 0 8px}
  .seNote{color:var(--dim);font-size:12px;margin-top:6px}
  .seNote:empty{display:none}

  /* emotions: a thought bubble with an emoji floats up out of his head */
  #habFig{position:relative}
  #emoBubble{position:absolute;top:2%;right:-6%;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-size:26px;line-height:1;background:var(--hab);border:2px solid var(--face);
    box-shadow:0 0 12px var(--faceGlow);opacity:0;transform:translate(-26px,36px) scale(.3);
    transition:opacity .3s,transform .45s cubic-bezier(.3,1.5,.6,1);pointer-events:none;z-index:5}
  #emoBubble::before,#emoBubble::after{content:'';position:absolute;border-radius:50%;background:var(--hab);border:2px solid var(--face)}
  #emoBubble::before{width:12px;height:12px;left:-8px;bottom:-6px}
  #emoBubble::after{width:7px;height:7px;left:-17px;bottom:-15px}
  #emoBubble.on{opacity:1;transform:none}
  #app.flowmode #emoBubble,#app.claudemode #emoBubble{width:30px;height:30px;font-size:17px;right:-14%}
  @media (prefers-reduced-motion:reduce){#emoBubble{transition:opacity .3s}}
  #emoTog{height:26px;padding:0 7px 0 5px;display:flex;align-items:center;gap:4px;
    font-size:13px;border-radius:13px;color:var(--dim)}
  #emoTog .knob{position:relative;width:22px;height:12px;border-radius:6px;background:var(--line);transition:background .2s}
  #emoTog .knob::after{content:'';position:absolute;left:1px;top:1px;width:10px;height:10px;border-radius:50%;background:var(--dim);transition:transform .2s,background .2s}
  #emoTog.on .knob{background:var(--accent)}
  #emoTog.on .knob::after{transform:translateX(10px);background:#fff}
  #soloBtn{height:26px;padding:0 9px;display:flex;align-items:center;gap:6px;font-size:12px;border-radius:13px;color:var(--text);z-index:3;white-space:nowrap}
  #soloBtn .soloDot{width:9px;height:9px;border-radius:50%;background:#3fd87f;box-shadow:0 0 6px #3fd87f}
  #soloBtn.off{border-color:#ff4d5e;background:rgba(255,45,70,.16)}#soloBtn.off .soloDot{background:#ff4d5e;box-shadow:0 0 8px #ff4d5e;animation:soloBlink 1s steps(1) infinite}
  #soloBtn.capped .soloDot{background:#ffb25a;box-shadow:0 0 6px #ffb25a}#soloBtn.missing .soloDot{background:#8a93a3;box-shadow:none}
  #soloBtn.arm{border-color:#ffb25a;background:rgba(255,178,90,.18)}
  @keyframes soloBlink{50%{opacity:.25}}
  #app.approving #soloBtn{display:none}
  #viewAsBtn{height:26px;padding:0 9px;display:flex;align-items:center;gap:4px;font-size:12px;border-radius:13px;color:var(--dim);z-index:3}
  #viewAsBtn.on{color:#111;background:#f5c542;border-color:#f5c542}
  #viewBar{position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom,0px));z-index:9000;background:#f5c542;color:#111;text-align:center;padding:4px 10px;font-size:12px;font-weight:600}
  #app.approving #viewAsBtn{display:none}
  #tourBtn{position:absolute;left:14px;top:0;height:28px;padding:0 6px;display:flex;align-items:center;gap:6px;font-size:13px;border-radius:14px;color:var(--text);z-index:4;
    opacity:.35;border-color:transparent;background:transparent;transition:opacity .2s,box-shadow .2s,background .2s,border-color .2s}
  #tourBtn .tbI{font-size:16px;line-height:1}#tourBtn .tbL{display:none;white-space:nowrap}
  #tourBtn:hover,#tourBtn:focus-visible,#tourBtn.lit,#tourBtn.on{opacity:1;background:var(--panel);border-color:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 55%,transparent)}
  #tourBtn:hover .tbL,#tourBtn.lit .tbL,#tourBtn.on .tbL{display:inline}
  #tourBtn.on{color:var(--text);border-color:var(--accent)}
  /* tour mode: 70% dim with cut-outs (the SVG path's holes let taps through to the lit item only), a glowing ring, HAB's bubble */
  #tour{position:fixed;inset:0;z-index:100000;pointer-events:none}
  #tourDim{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
  #tourDimP{fill:rgba(0,0,0,.7);pointer-events:auto;touch-action:none}
  #tourRing{position:fixed;border:3px solid var(--accent);border-radius:12px;pointer-events:none;box-shadow:0 0 14px 3px var(--accent);transition:left .25s,top .25s,width .25s,height .25s}
  #tourRing.flash{animation:tourFlash .55s ease-in-out 3}
  @keyframes tourFlash{0%,100%{opacity:1;box-shadow:0 0 14px 3px var(--accent)}50%{opacity:.3;box-shadow:0 0 32px 12px var(--accent)}}
  #tourTag{position:fixed;pointer-events:none;background:var(--accent);color:#111;font-size:12px;font-weight:600;padding:3px 9px;border-radius:10px;white-space:nowrap;max-width:70vw;overflow:hidden;text-overflow:ellipsis}
  /* the shared HAB bubble (.bub): the tour/lesson bubble and the 💬 mini chat are both one, with .bubHead, .bubBody, .bubArrow and .bubFace */
  .bub{position:fixed;z-index:99000;width:340px;max-width:calc(100vw - 16px);display:flex;flex-direction:column;background:var(--bg);color:var(--text);border:2px solid var(--accent);border-radius:16px;box-shadow:0 10px 34px rgba(0,0,0,.6);pointer-events:auto}
  .bub[hidden],.bubFace[hidden],#tourTag[hidden],.bubArrow[hidden],#miniBtn[hidden]{display:none}
  .bubArrow{position:absolute;width:16px;height:16px;background:var(--bg);border:solid var(--accent);border-width:2px 0 0 2px;pointer-events:none}
  .bubHead{display:flex;align-items:center;gap:8px;margin-bottom:4px;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
  .tourMsg .bubHead{cursor:default;touch-action:auto}
  .bubHead .ci{width:24px;height:24px;flex:none}.bubHead b{flex:1;font-size:15px}
  .bubBody{padding:10px 14px 12px;font-size:15px;line-height:1.5;white-space:normal;min-height:0}
  .bubFace{position:fixed;z-index:99000;width:56px;height:56px;border-radius:50%;padding:7px;background:var(--bg);border:2px solid var(--accent);box-shadow:0 0 16px 3px var(--accent);pointer-events:auto;cursor:pointer;color:var(--text)}
  .bubFace .ci{display:block;width:100%;height:100%}
  /* the 💬 mini chat (off the Chat screen) */
  #miniRoot{position:fixed;left:0;top:0;width:0;height:0;z-index:99000}
  #miniBtn{padding:0;font-size:25px;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.45)}
  #miniBtn .bdot{top:-3px;left:auto;right:-3px}
  #miniBub{padding:8px 10px 10px;gap:6px;font-size:15px}
  #mcHead{margin:0}
  #mcHead button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:8px;padding:0 10px;font:inherit;font-size:14px;line-height:1.7;cursor:pointer}
  #mcMood{font-size:18px;line-height:1}
  #mcOk{background:#3a1d00!important;border-color:#ffb000!important;color:#ffcf5c!important;font-size:12px!important;font-weight:700}
  #mcOk.hard{background:#4a0f0f!important;border-color:#ff4d4d!important;color:#ffb3b3!important}
  #mcLog{flex:1 1 auto;min-height:48px;max-height:42vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
  #mcLog .msg{font-size:14px;padding:6px 10px;max-width:92%}
  #mcLog .sys{font-size:11px}
  #mcTray{flex:none;padding:0}
  #mcForm{display:flex;gap:6px;flex:none}
  #mcForm input{flex:1;min-width:0}
  #mcForm #mcIn{flex:1;min-width:0;resize:none;overflow-y:hidden;line-height:1.35;min-height:38px;max-height:34dvh;box-sizing:border-box;padding-top:8px;padding-bottom:8px;align-self:flex-end}
  #mcForm button{padding:6px 10px;align-self:flex-end;height:38px}
  @media (max-width:600px){#mcIn{font-size:16px}}
  #tourBody button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:8px;padding:6px 12px;font:inherit;font-size:14px;cursor:pointer}
  #tourBody button:disabled{opacity:.4}
  #tourBody button[hidden]{display:none}
  #tourBub #tourBody{flex:1 1 auto;overflow-y:auto}
  #tbCount{font-size:12px;color:var(--dim);white-space:nowrap}
  #tbText{margin:0 0 10px}
  #tbMin{padding:0 10px!important;line-height:1.4}.tourMsg #tbMin{display:none}
  #tourBody .tnav{display:flex;flex-wrap:wrap;align-items:center;gap:6px}#tourBody .tnav .tsp{flex:1}
  #tourBody .tnext{border-color:var(--accent)}
  #tbAsk{display:flex;gap:6px;margin:0 0 8px}#tbAsk[hidden]{display:none}#tbQ{flex:1;min-width:0}
  #tbAns{margin:0 0 10px;padding:8px 10px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
  #tbAns .tbYou{color:var(--dim);font-size:13px;margin-bottom:3px}
  .msg.tourMsg{max-width:94%;padding:0;border:2px solid var(--accent)}
  @media (max-width:600px){.bub{font-size:17px}.bub button{min-height:42px;font-size:15px}.bubHead b{font-size:17px}#tourBody{font-size:17px}#tourBody button{min-height:42px;font-size:15px}#tbCount{font-size:13px}}
  @media (prefers-reduced-motion:reduce){.bub,.bubFace,#tourRing{transition:none}#tourRing.flash{animation:none}}

  /* touching his face: poke, pet, bonk, shake. Hearts, stars and his little reply line float over him */
  #app.ixOn #face{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab}
  #ixFx{position:absolute;left:0;right:0;top:0;height:min(60vw,var(--faceSize));pointer-events:none;z-index:6;overflow:visible}
  #app.flowmode #ixFx{height:min(30vw,110px)}
  #app.claudemode #ixFx{height:min(22vw,84px)}
  #ixFx .ixHeart{position:absolute;bottom:35%;font-size:22px;animation:ixHeart 1.4s ease-out forwards}
  #ixFx .ixBonk{position:absolute;left:50%;top:6%;font-weight:900;font-size:22px;line-height:1;color:#ffcf5c;text-shadow:0 2px 0 #7a4a00;
    animation:ixBonk .9s ease-out forwards;white-space:nowrap}
  #ixFx .ixStars{position:absolute;left:50%;top:4%;width:70%;height:22%;margin-left:-35%;animation:ixSpin 1s linear infinite;transition:opacity .4s}
  #ixFx .ixStars i{position:absolute;font-style:normal;font-size:16px}
  #ixSay{position:absolute;left:50%;top:-4px;transform:translate(-50%,-30%);max-width:min(78vw,300px);padding:6px 11px;
    border-radius:14px;background:var(--hab);color:var(--habText);border:1px solid var(--face);font-size:13.5px;line-height:1.3;text-align:center;
    opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:7;white-space:normal;width:max-content}
  #ixSay.on{opacity:1;transform:translate(-50%,-50%)}
  #app.flowmode #ixSay,#app.claudemode #ixSay{font-size:12px;left:100%;top:50%;transform:translate(6px,-50%);max-width:min(52vw,220px)}
  #app.flowmode #ixSay.on,#app.claudemode #ixSay.on{transform:translate(10px,-50%)}
  @keyframes ixHeart{0%{opacity:0;transform:translateY(0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translateY(-90px) scale(1.15)}}
  @keyframes ixBonk{0%{opacity:0;transform:translate(-50%,0) scale(.4) rotate(-12deg)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.25) rotate(-6deg)}100%{opacity:0;transform:translate(-50%,-26px) scale(1)}}
  @keyframes ixSpin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){#ixFx .ixStars{animation-duration:3s}}

  /* approval */
  #faceWrap{position:relative}
  #app.approving #face{width:min(44vw,var(--faceSize))}
  #approveBtn{position:absolute;right:max(10px,calc(50% - 230px));top:50%;transform:translateY(-50%);width:92px;height:92px;
    border-radius:50%;padding:0;background:#3a1d00;border:3px solid #ffb000;color:#ffcf5c;font:700 12px/1.25 inherit;
    box-shadow:0 0 18px #ffb00088;animation:alarm 1.1s ease-in-out infinite}
  #approveBtn span{display:block;font-size:24px;line-height:1.1}
  #approveBtn.hard{background:#4a0f0f;border-color:#ff4d4d;color:#ffb3b3;box-shadow:0 0 22px #ff4d4daa}
  @media (max-width:768px){#approveBtn{width:104px;height:104px;font-size:13px;right:10px}#app.approving #face{width:min(40vw,var(--faceSize))}}
  @keyframes alarm{50%{box-shadow:0 0 34px #ffb000cc;transform:translateY(-50%) scale(1.06)}}
  /* always on top of the tabs below it (the Direct line's sticky bar used to cover its lower edge), and small enough
     to fit beside the shrunken head on the Direct line and Flow tabs */
  #approveBtn{z-index:30}
  #app.claudemode #approveBtn,#app.flowmode #approveBtn{width:76px;height:76px;font-size:10px}
  #app.claudemode #approveBtn span,#app.flowmode #approveBtn span{font-size:18px}
  #app.claudemode.approving #face{width:min(22vw,84px)}
  #app.flowmode.approving #face{width:min(30vw,110px)}
  #approveX{position:absolute;z-index:31;width:30px;height:30px;padding:0;border-radius:50%;font-size:14px;line-height:1;
    background:var(--panel);border:1px solid #ffb000;color:#ffcf5c;top:calc(50% - 54px);right:calc(max(10px,calc(50% - 230px)) - 8px)}
  @media (max-width:768px){#approveX{top:calc(50% - 60px);right:2px;width:36px;height:36px}}
  #app.claudemode #approveX,#app.flowmode #approveX{top:calc(50% - 46px)}
  #approve .dhead button{color:var(--text)}
  #approve .dhead{border-bottom:1px solid var(--line);color:#ffcf5c}
  .apBody h4{margin:14px 0 4px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
  .apBody p{margin:0;white-space:pre-wrap}
  .apBody p.fact{color:#ffcf5c}
  .apBody pre{margin:0;max-height:180px;overflow:auto;padding:8px;background:var(--panel);border:1px solid var(--line);
    border-radius:8px;font:12px/1.45 ui-monospace,Menlo,Consolas,monospace;white-space:pre}
  #apYes{font-size:18px;text-align:center;letter-spacing:.2em}
  #apAllow:not(:disabled){background:#14361f;border-color:#3fb950;color:#7ee787}
.invKeyBox{margin:10px 0;padding:12px;border:2px solid var(--accent,#119c93);border-radius:12px}
.invKeyText{font:700 26px/1.3 ui-monospace,Consolas,monospace;letter-spacing:1px;margin:4px 0 8px;user-select:all;word-break:break-all}
#a2hs{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:2147483000;padding:14px 16px;border-radius:16px;
  background:var(--card,#16202e);color:var(--text,#e8f0f7);border:2px solid var(--accent,#52e0ff);box-shadow:0 8px 30px #0008;font-size:15px;line-height:1.45}
#a2hs .a2t{display:block;font-size:16px;margin-bottom:4px}#a2hs div{margin:4px 0}
#a2hs button{margin-top:8px;width:100%;padding:10px;border:0;border-radius:10px;background:var(--accent,#52e0ff);color:#00131a;font-weight:700;font-size:16px}
.giftCard{margin:10px 0;padding:12px;border:2px solid var(--accent);border-radius:12px;display:flex;flex-direction:column;gap:6px}
.giftCard .mrbox{display:flex;gap:6px;align-items:center}.giftCard input{flex:1;min-width:0}
a.btnLink{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;border:1px solid var(--line);color:var(--text)}
a.btnLink.primary{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:600}
#farewell{position:fixed;inset:0;z-index:2147483001;background:var(--bg);color:var(--text);display:flex;flex-direction:column;justify-content:center;gap:14px;padding:24px;max-width:520px;margin:0 auto}
#farewell button{background:none;border:0;color:var(--dim);text-decoration:underline;font:inherit;cursor:pointer}
#pwAsk{position:fixed;inset:0;z-index:2147483002;background:#0009;display:flex;align-items:center;justify-content:center;padding:16px;border:0;margin:0;width:100%;height:100%;max-width:none;max-height:none}#pwAsk::backdrop{background:transparent}
#pwAsk form{background:var(--card);color:var(--text);border:2px solid var(--accent);border-radius:16px;padding:18px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:10px}
#pwAsk input{font-size:17px;padding:10px;border-radius:10px}
.lFamIn{display:flex;align-items:center;gap:6px}.lFamIn input{flex:1;min-width:0}#lFamDom{color:var(--dim);white-space:nowrap}

/* 🔥 Ember theme (Tester 2026-10-28): forge iron that glows hot and cools again, and an old parchment scroll for the message box */
@keyframes emberHeat{0%,100%{box-shadow:0 0 5px rgba(255,60,15,.30),inset 0 0 0 1px rgba(255,80,25,.45)}50%{box-shadow:0 0 16px rgba(255,90,25,.65),inset 0 0 0 1px rgba(255,150,70,.85)}}
@keyframes emberText{0%,100%{text-shadow:0 0 4px rgba(255,70,20,.45)}50%{text-shadow:0 0 12px rgba(255,120,40,.9),0 0 2px #ffd0a0}}
html[data-tex="ember"] button.primary,html[data-tex="ember"] #habTabs,html[data-tex="ember"] .habPic,html[data-tex="ember"] #setHead{animation:emberHeat 3.4s ease-in-out infinite}
html[data-tex="ember"] #habTabs{border-top-color:#5a1d0c}
html[data-tex="ember"] #brand,html[data-tex="ember"] #setTitle{animation:emberText 3.4s ease-in-out infinite}
/* the whole chat window is one tattered parchment scroll hung between two iron rods (Tester 2026-10-29: embers as glowing lights, the scroll covers every message, not just the box) */
html[data-tex="ember"] #chat{border:0;border-radius:0;color:#2e1a0c;clip-path:polygon(100% 0,100% 46px,calc(100% - 2px) 6.0%,calc(100% - 1px) 8.2%,calc(100% - 7px) 10.4%,calc(100% - 6px) 12.6%,calc(100% - 6px) 14.8%,calc(100% - 5px) 17.0%,calc(100% - 1px) 19.2%,calc(100% - 2px) 21.4%,calc(100% - 7px) 23.6%,calc(100% - 9px) 25.8%,calc(100% - 9px) 28.0%,calc(100% - 0px) 30.2%,calc(100% - 0px) 32.4%,calc(100% - 1px) 34.6%,calc(100% - 4px) 36.8%,calc(100% - 3px) 39.0%,calc(100% - 7px) 41.2%,calc(100% - 1px) 43.4%,calc(100% - 4px) 45.6%,calc(100% - 7px) 47.8%,calc(100% - 6px) 50.0%,calc(100% - 2px) 52.2%,calc(100% - 9px) 54.4%,calc(100% - 3px) 56.6%,calc(100% - 4px) 58.8%,calc(100% - 2px) 61.0%,calc(100% - 3px) 63.2%,calc(100% - 9px) 65.4%,calc(100% - 9px) 67.6%,calc(100% - 6px) 69.8%,calc(100% - 2px) 72.0%,calc(100% - 3px) 74.2%,calc(100% - 2px) 76.4%,calc(100% - 9px) 78.6%,calc(100% - 5px) 80.8%,calc(100% - 5px) 83.0%,calc(100% - 2px) 85.2%,calc(100% - 3px) 87.4%,calc(100% - 9px) 89.6%,calc(100% - 4px) 91.8%,calc(100% - 2px) 94.0%,100% calc(100% - 14px),100% 100%,0 100%,0 calc(100% - 14px),3px 94.0%,6px 91.8%,6px 89.6%,10px 87.4%,2px 85.2%,4px 83.0%,10px 80.8%,1px 78.6%,8px 76.4%,3px 74.2%,6px 72.0%,3px 69.8%,8px 67.6%,1px 65.4%,5px 63.2%,4px 61.0%,3px 58.8%,4px 56.6%,4px 54.4%,2px 52.2%,6px 50.0%,10px 47.8%,3px 45.6%,8px 43.4%,2px 41.2%,6px 39.0%,0px 36.8%,0px 34.6%,4px 32.4%,4px 30.2%,5px 28.0%,3px 25.8%,4px 23.6%,3px 21.4%,6px 19.2%,0px 17.0%,0px 14.8%,0px 12.6%,6px 10.4%,1px 8.2%,0px 6.0%,0 46px,0 0);
  background:radial-gradient(circle at 4% 30%,rgba(90,45,10,.35),transparent 7%),radial-gradient(circle at 97% 62%,rgba(70,30,8,.40),transparent 6%),radial-gradient(circle at 30% 85%,rgba(120,70,20,.14),transparent 14%),radial-gradient(circle at 72% 18%,rgba(120,70,20,.12),transparent 16%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .08 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(ellipse at 50% 50%,#f3e2bb 45%,#e2c591 80%,#c49a5c 100%);
  box-shadow:inset 0 0 40px rgba(110,60,20,.45),inset 0 0 8px rgba(60,25,5,.5)}
html[data-tex="ember"] #chat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;border-radius:6px;background:linear-gradient(180deg,#0e0503 0,#3a1a0c 18%,#7a3a18 38%,#2a120a 62%,#0a0402 100%);box-shadow:0 0 10px rgba(255,90,25,.35);pointer-events:none}
html[data-tex="ember"] #chatHead{border-radius:6px;border:0;padding:8px 10px 8px 16px;background:linear-gradient(180deg,#0e0503 0,#3a1a0c 18%,#7a3a18 38%,#2a120a 62%,#0a0402 100%);color:#f6d7a4;animation:emberHeat 3.4s ease-in-out infinite}
html[data-tex="ember"] #chatHead b{font-family:Georgia,"Palatino Linotype","Book Antiqua",Palatino,serif;letter-spacing:.3px;text-shadow:0 0 6px rgba(255,110,40,.6)}
html[data-tex="ember"] #chatHead button{background:rgba(255,190,120,.14);color:#f6d7a4}
html[data-tex="ember"] #log{font-family:Georgia,"Palatino Linotype","Book Antiqua",Palatino,serif;padding:10px 22px}
html[data-tex="ember"] #log .msg.me{background:rgba(140,50,15,.13);color:#3a1606;border:1px solid rgba(110,45,12,.38);box-shadow:none}
html[data-tex="ember"] #log .msg.hab:not(.tourMsg),html[data-tex="ember"] #log .chatHello .chBub{background:rgba(255,248,228,.42);color:#2e1a0c;border:1px solid rgba(110,70,25,.32);box-shadow:none}
html[data-tex="ember"] #log .msg a{color:#8a2a08}
html[data-tex="ember"] #log .msgTime,html[data-tex="ember"] #log .msgTools,html[data-tex="ember"] #log .msgTools button,html[data-tex="ember"] #log small{color:#7a5434}
html[data-tex="ember"] #log .msg code,html[data-tex="ember"] #log .msg pre{background:rgba(90,50,15,.10);color:#2e1a0c}
html[data-tex="ember"] #chat #form{position:relative;margin:4px 16px 18px;border:0;border-top:1px dashed rgba(90,50,15,.45);border-radius:0;padding:6px 4px 2px;background:transparent;box-shadow:none;color:#3a2210}
html[data-tex="ember"] #chat #form textarea{color:#2e1a0c;background:transparent;font-family:Georgia,"Palatino Linotype","Book Antiqua",Palatino,serif}
html[data-tex="ember"] #chat #form textarea::placeholder{color:#8a6440}
html[data-tex="ember"] #chat #form button{color:#5a3416;background:transparent;border-color:transparent}
html[data-tex="ember"] #chat #form #sendBtn{color:#f6d7a4;background:#5a1f0b;border-radius:4px;animation:emberHeat 3.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html[data-tex="ember"] *{animation:none!important}}
.fontGrid button{font-size:17px;padding:10px 8px}
.fontGrid button.sel{outline:2px solid var(--accent);outline-offset:1px}
#setReturn{position:fixed;left:auto;right:16px;top:calc(70px + env(safe-area-inset-top,0px));z-index:60;padding:7px 14px;border-radius:999px;border:1px solid var(--accent);background:var(--panel);color:var(--text);font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.3);animation:setBackIn .25s ease-out}
#setReturn[style*="left"]{right:auto}
@keyframes setBackIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.fontMore{margin:6px 0 4px}.fontMore summary{cursor:pointer;color:var(--accent);font-weight:600;padding:6px 2px}
.fontGroup{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:10px 2px 4px}

/* ⚙︎ Settings, redesigned (Tester 2026-10-28: "clean, nice, flows easy"): a list of sections with coloured icon tiles; inside, cards
   with a bold title and one line of help, iOS-style switches, tidy nav rows, and one dashed "Advanced" fold per section.
   Only theme vars (--bg, --panel, --text, --dim, --accent, --line), so light, dark and the textured themes all fit. */
#settings{width:min(94vw,560px)}
#setHome{padding-top:6px}
#setQ{border-radius:999px;padding-left:14px}
.setRow{gap:14px;padding:12px 14px;border-radius:16px;margin-bottom:10px;transition:border-color .15s,transform .1s}
.setRow:hover{border-color:color-mix(in srgb,var(--secC,var(--accent)) 65%,var(--line))}
.setRow:active{transform:scale(.99)}
.setRow i{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;border-radius:12px;font-size:22px;background:color-mix(in srgb,var(--secC,var(--accent)) 24%,transparent);border:1px solid color-mix(in srgb,var(--secC,var(--accent)) 40%,transparent)}
.setRow b{font-size:16px;font-weight:700}.setRow small{font-size:13px;line-height:1.35}
.setTip{text-align:center;margin:14px 8px 4px;opacity:.75}
#setHead{gap:10px;padding:8px 16px 10px;margin:0}
#setHead b{font-size:17px;font-weight:700}
#setBackBtn{border-radius:999px;padding:6px 12px;font-size:14px;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
#setDots i.on{background:var(--secC,var(--accent))}
#settings .pane{padding:2px 16px 22px}
/* cards */
#settings .sCard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:12px 0;box-shadow:0 1px 3px rgba(0,0,0,.08)}
#settings .sCardT{display:block;margin:0 0 4px;font-size:15.5px;font-weight:700;color:var(--text)}
#settings .sCardH{margin:0 0 10px;color:var(--dim);font-size:13px;line-height:1.4}
#settings .sCard > :last-child{margin-bottom:0}
#settings .pane label:not(.check){color:var(--text);font-weight:600;font-size:14px;margin:14px 0 6px}
#settings .pane :is(.sCardT,.sCardH) + label:not(.check){margin-top:8px}
#settings .colors label{font-weight:500;margin:4px 0}
#settings .help{font-size:12.5px;line-height:1.4}
#settings .sSmallBtn{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:7px 14px;border-radius:999px;font-size:13.5px}
#settings .sHero{display:flex;gap:14px;align-items:center}
#settings .sHero svg{width:92px;height:auto;flex:0 0 auto;filter:drop-shadow(0 0 8px var(--faceGlow))}
#settings .sHeroTx{flex:1;min-width:0;color:var(--dim);font-size:13px}
#settings .sHeroTx > b{display:block;font-size:16px;color:var(--text)}
#settings .sHeroTx > small{display:block;font-size:13px;line-height:1.4;margin:2px 0 4px;color:var(--dim)}
#settings .sHeroTx .chips{margin-top:8px}
#settings .sDanger{border-color:color-mix(in srgb,#e0505c 40%,var(--line));padding:2px 16px}
#settings .sCard .acct{background:none;border:0;padding:4px 0 0;margin:0}
#settings .pushBox.sCard{gap:10px}
#settings .pushBox > b.sCardT{margin:0}
#famAddBtn{margin-top:12px}
/* switches: the whole row is the label; the checkbox draws as a switch on the right */
#settings label.tog{display:flex;align-items:center;gap:14px;margin:0;padding:12px 0;border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent);cursor:pointer;color:var(--text);font-size:15px;font-weight:400}
#settings :is(.sCardT,.sCardH,summary,.sCardT + .help) + label.tog,#settings .sCard > label.tog:first-child{border-top:0}
#settings label.tog > input[type=checkbox]{order:2;-webkit-appearance:none;appearance:none;position:relative;flex:0 0 auto;width:48px;height:28px;min-height:0;margin:0;padding:0;border:0;border-radius:999px;background:color-mix(in srgb,var(--dim) 45%,var(--line));cursor:pointer;transition:background .2s}
#settings label.tog > input[type=checkbox]::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s}
#settings label.tog > input[type=checkbox]:checked{background:var(--accent)}
#settings label.tog > input[type=checkbox]:checked::after{transform:translateX(20px)}
#settings label.tog > input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#settings label.tog > input[type=checkbox]:disabled{opacity:.45}
#settings .ckT{flex:1;min-width:0}
#settings .ckT b{display:block;font-weight:600;font-size:15px;line-height:1.3}
#settings .ckT small{display:block;color:var(--dim);font-size:12.5px;line-height:1.4;margin-top:2px}
#settings .sep{display:none}
@media (prefers-reduced-motion:reduce){#settings label.tog > input,#settings label.tog > input::after{transition:none}}
/* nav rows: a button that opens its own screen */
#settings .sNav{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--bg) 35%,var(--panel));color:var(--text);font-size:15px}
#settings .sNav:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
#settings .sNav > i{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border-radius:10px;font-style:normal;font-size:19px;background:color-mix(in srgb,var(--accent) 14%,transparent)}
#settings .sNav > span{flex:1;min-width:0}
#settings .sNav > span > b{display:block;font-size:15px;font-weight:600}
#settings .sNav > span > b small{font-weight:400;color:var(--accent);font-size:12px}
#settings .sNav > span > small{display:block;color:var(--dim);font-size:12.5px;line-height:1.35;margin-top:2px;opacity:1}
#settings .sNav::after{content:'›';font-size:22px;color:var(--dim);line-height:1}
#settings .sNavs .legalBtns{margin:8px 0 0}
#settings .legalBtns button{font-size:13px;padding:6px 12px;border-radius:999px}
/* the one "Advanced" fold per section */
#settings details.sAdv{margin:18px 0 8px;padding:0 16px;border:1px dashed var(--line);border-radius:16px}
#settings details.sAdv[open]{border-style:solid;background:color-mix(in srgb,var(--panel) 55%,transparent);padding-bottom:14px}
#settings details.sAdv > summary{list-style:none;position:relative;cursor:pointer;padding:13px 28px 13px 0;font-weight:700;font-size:15px;color:var(--text)}
#settings details.sAdv > summary::-webkit-details-marker{display:none}
#settings details.sAdv > summary::after{content:'›';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--dim);transition:transform .2s}
#settings details.sAdv[open] > summary::after{transform:translateY(-50%) rotate(90deg)}
#settings details.sAdv > summary small{display:block;font-weight:400;font-size:12.5px;color:var(--dim);margin-top:2px}
#settings .sCard details.sAdv{margin:12px 0 0;padding:0 12px;border-radius:12px}
#settings .sCard details.sAdv[open]{padding-bottom:12px}
#settings .sHeroTx .chips button{min-height:34px;padding:4px 11px;font-size:13px}
#settings input[type=range]{accent-color:var(--accent)}
/* ☰ Menu, matched to the new Settings (Tester 2026-10-28): coloured icon tiles and a one-line "what's in here" under each topic */
#menuFolds summary{padding:12px 14px;gap:14px}
#menuFolds summary i{flex:0 0 38px;width:38px;height:38px;border-radius:11px;font-size:19px;background:color-mix(in srgb,var(--secC,var(--accent)) 22%,transparent);border:1px solid color-mix(in srgb,var(--secC,var(--accent)) 38%,transparent)}
#menuFolds summary .mnSec{font-weight:700;min-width:0}
#menuFolds .mnSecSub{display:block;font-weight:400;font-size:12.5px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#menuFolds .mnFold[open] .mnSecSub{display:none}
#menuTop .mnItem{padding:11px 14px}
#menuTop .mnItem i{flex-basis:34px;width:34px;height:34px;border-radius:10px;font-size:18px}

/* ===== Wide, short screens (the 4.3" 800x480 kiosk, a phone on its side): face in a column on the left, the screen's
   content (chat, home, menus) fills the right from top to bottom. Tester 2026-11-01: "our layout works for tall screens but
   not wide screen, the chat box is unreadable". ===== */
@media (orientation:landscape) and (max-height:560px){
  #app{display:grid;grid-template-columns:minmax(200px,31%) 1fr;grid-template-rows:auto minmax(0,1fr) auto auto;
       grid-template-areas:"top top" "face main" "status main" "tabs tabs";max-width:none;--dockH:52px}
  #habTop{grid-area:top;min-height:0;padding-top:2px;padding-bottom:2px}
  /* ❄ in the empty space of the top bar, after ✨, so it never covers the chat's buttons (Tester 11-01, habnode) */
  #holiMelt{top:calc(8px + env(safe-area-inset-top,0px));left:165px;right:auto;padding:4px 10px;font-size:12px}
  #faceWrap{grid-area:face;min-height:0;align-self:stretch;justify-content:center;align-items:center}
  /* 🎮 right under the HAB name, big enough to hit in one tap (Tester: "so I can easily press it when I want to game") */
  #gameBtn{left:8px;top:4px;height:72px;min-width:108px;padding:0 12px;font-size:42px;border-radius:20px}   /* big enough to hit mid-game (Tester 11-01) */
  #gameBtn.on{font-size:17px;min-width:108px}
  #launchBtn{right:8px;bottom:auto;top:46px;height:auto;min-height:30px;max-width:calc(100% - 124px);padding:4px 9px;font-size:12px;line-height:1.2;
    white-space:normal;text-align:center}   /* under the ✉ corner, on the side away from the 🎮 (wraps rather than covering it) */
  #mailPop{top:8px;left:auto;right:10px}   /* ✉ on the other side of his head from the 🎮 (Tester 11-01) */
  /* the other screens (Inbox, Menu...) keep HAB's face in the left column too: there's room for it here (Tester likes it) */
  #app.habPage:not(.hubHome) #faceWrap{height:auto;padding-top:6px}
  #app.habPage:not(.hubHome) #faceWrap > #habFig:not(#approveBtn):not(#approveX):not(#a1){display:flex!important}
  #app.habPage:not(.hubHome) #faceWrap > #sceneRoom:not(#approveBtn):not(#approveX):not(#a1){display:block!important}
  #app.habPage:not(.hubHome) #faceWrap > #gameBtn:not([hidden]):not(#approveBtn):not(#approveX):not(#a1){display:block!important}
  #status{grid-area:status;font-size:17px;font-weight:600;padding:0 6px 6px}   /* idle / thinking... readable from the bed (Tester 11-01) */
  #app > main{grid-area:main;min-height:0;min-width:0}
  #habTabs{grid-area:tabs}
  #app #face,#app.chatmode #face,#app.hubHome #face,#app.approving #face{width:min(26vw,48vh,var(--faceSize))}
  #relBtn{top:auto!important;bottom:34px!important;left:4px!important;right:auto!important;transform:scale(.85);transform-origin:bottom left}
  #homeBugBtn{bottom:2px!important;right:4px!important;top:auto!important}
  body.hasBuildBar #deskPill{top:32px}
  #deskPill{left:50%;top:8px;bottom:auto;max-width:40vw;font-size:12px;padding:5px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* starts at the middle of the screen (Tester 11-01) */
  #chat{inset:4px 6px 4px 0!important}
  #log{min-height:0}
  /* the mini-chat bubble has no free corner here (it covered 🔍); the Chat tab is one tap away */
  #miniRoot{display:none}
  /* pop-ups (Settings, Business...) use the whole height; the lines-of-code note gives its row to the settings list */
  dialog[open]{max-height:calc(100dvh - 12px)!important;margin-top:6px;margin-bottom:6px}
  #locBtn,#locDetail{display:none!important}
}

/* Status words start with a capital: "Idle", "Thinking", "Running", "Ready" (Tester 11-01). Not the brain chip: model names stay as written. */
#status::first-letter,.hubChip:not([data-id="brain"]) small::first-letter,.mcard .pill::first-letter{text-transform:uppercase}
.mcard .pill{display:inline-block}
/* 📣 the gaming announcement card (10-guide.js gameAnnounce) */
#annCard{position:fixed;left:50%;top:16%;transform:translateX(-50%);z-index:99500;max-width:min(92vw,620px);display:flex;flex-direction:column;gap:6px;
  padding:16px 22px;border-radius:18px;border:2px solid #ffd166;background:rgba(22,18,8,.96);color:#fff;text-align:left;cursor:pointer;
  box-shadow:0 0 0 6px rgba(255,209,102,.18),0 12px 40px rgba(0,0,0,.6);animation:annIn .35s ease-out}
#annCard[hidden]{display:none}
#annCard b{font-size:22px;line-height:1.25}#annCard small{font-size:14px;color:#ffd166}
@keyframes annIn{from{opacity:0;translate:0 -12px}}
@media (prefers-reduced-motion:reduce){#annCard{animation:none}}

.whatsUpBtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.whatsUpBtns button{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2,#1d2433);color:var(--text);font:inherit;cursor:pointer}
/* 🙂🎙 face + voice unlock card (07-media.js bioUnlock) */
.bioCard{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:99600;width:min(92vw,520px);padding:20px 24px;border-radius:20px;
  background:rgba(10,14,28,.97);color:#fff;border:2px solid #3b82f6;box-shadow:0 12px 40px rgba(0,0,0,.6);text-align:center;display:flex;flex-direction:column;gap:8px}
.bioCard b{font-size:20px}.bioCard p{margin:0;font-size:15px;opacity:.85}.bioWords{font-size:28px;font-weight:800;color:#ffd166}.bioCard small{opacity:.7}
/* ⏻ habnode shutdown screen (05-abilities.js powerVoice): the whole screen, a big countdown, red Cancel, green Shut down now (Tester 11-01) */
.powerPill{position:fixed;inset:0;z-index:99600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  background:radial-gradient(circle at 50% 40%,#5a0d0d,#140303 70%);color:#fff;font:700 15px system-ui,sans-serif;animation:pwPulse 1s ease-in-out infinite}
.powerPill span{font-size:clamp(28px,7vw,56px);text-align:center;padding:0 16px}
.powerPill button{border:0;border-radius:20px;min-width:min(80vw,320px);padding:22px 30px;font:800 clamp(20px,4vw,30px) system-ui,sans-serif;color:#fff;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.powerPill .pwCancel{background:#d63b3b}.powerPill .pwNow{background:#1f9d55}
@keyframes pwPulse{50%{background-color:#3a0808}}
@media (prefers-reduced-motion:reduce){.powerPill{animation:none}}
.pwBye{position:fixed;inset:0;z-index:99700;display:flex;align-items:center;justify-content:center;background:#000;color:#fff;font:700 clamp(36px,9vw,72px) system-ui,sans-serif;transition:color 1.2s ease}
.pwBye.out{color:#000}

/* 👧 Ctrl+Shift+Enter: hand HAB to your kid, and the grown-up's PIN pad (19-kidswitch.js) */
#ksDlg{ max-width: 360px; }
.ksBody{ display: flex; flex-direction: column; gap: 8px; }
.ksKid{ display: block; width: 100%; margin: 6px 0; font-size: 18px; padding: 12px; }
#ksDots{ text-align: center; font-size: 28px; letter-spacing: 8px; min-height: 40px; line-height: 40px; }
#ksDots.ksEmpty{ font-size: 15px; letter-spacing: 0; opacity: .7; }
#ksPad{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#ksPad button{ font-size: 24px; min-height: 52px; padding: 6px; }
.ksLink{ background: none; border: 0; text-decoration: underline; opacity: .8; align-self: center; }

/* 📺 the YouTube Kids player: the whole screen (app/08-cards.js) */
#ytDlg{ width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #000; color: #fff; display: none; }
#ytDlg[open]{ display: flex; flex-direction: column; }
#ytDlg .dhead{ flex: 0 0 auto; }
#ytDlg #ytX{ font-size: 22px; min-width: 52px; min-height: 44px; }
#ytFrame{ flex: 1 1 auto; width: 100%; border: 0; background: #000; }
/* 👪 who a kid's parents are (app/06-accounts.js) */
#parList label{ display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 16px; }

/* 🧒 a kid's HAB (until a parent unlocks it): no What's new, 🧠 deep think, attach, commands, projects or voice ID (app/09-people.js) */
body.kidLocked #newsPill, body.kidLocked #homeBugBtn, body.kidLocked #deepTog, body.kidLocked #attachBtn, body.kidLocked #slashBtn, body.kidLocked #projBtn, body.kidLocked .kidHide{ display: none !important; }
.ksPower:not([hidden]){ display: flex; gap: 8px; }
.ksPower button{ flex: 1; min-height: 44px; }

/* 🧠 deep think is automatic now (app/11-brains.js deepWanted): no switch by the chat box (Tester 2026-11-05) */
#deepTog{ display: none !important; }

/* 🖐 HAB's hands: the progress card in the chat (app/20-hands.js) */
.handsCard{ align-self: flex-start; max-width: min(92%, 460px); background: var(--panel); border: 2px solid #ff2d55; border-radius: 12px; padding: 10px 12px; }
.handsCard b{ display: block; margin-bottom: 4px; }
.handsCard ol{ margin: 4px 0 6px 18px; padding: 0; font-size: 14px; }
.handsCard .hdAsk{ background: rgba(255, 45, 85, .12); border-radius: 8px; padding: 8px; margin: 6px 0; }
.handsCard .hdRow{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.handsCard .hdRow input{ flex: 1; min-width: 140px; }
.handsCard .hdEnd{ margin-top: 6px; }
.handsCard .hdShot{ display: block; width: 100%; border-radius: 8px; margin: 4px 0; }