/* The HQ interface over the 3D office (hq-ui.js). Everything lives under #hq, so the office's own styles can't reach it.
   Inter only, on one scale; day and night follow <html data-theme>, which the bar's switch sets. */
#hq{
  --bg:#EDF1F7; --surface:#FFFFFF; --surface-2:#F4F6FA; --sunk:#E9EDF4;
  --glass:rgba(255,255,255,.87); --glass-2:rgba(255,255,255,.95);
  --line:rgba(20,35,70,.09); --line-2:rgba(20,35,70,.16);
  --text:#0E1729; --meta:#556179; --dim:#8892A6;
  --accent:#2459D8; --accent-soft:rgba(36,89,216,.09); --on-accent:#FFFFFF;
  --good:#12985F; --warn:#BF7A05; --bad:#D23F3F; --warn-soft:rgba(191,122,5,.10); --good-soft:rgba(18,152,95,.10); --bad-soft:rgba(210,63,63,.09);
  --shadow:0 10px 30px rgba(20,32,64,.14); --shadow-s:0 1px 3px rgba(20,32,64,.08); --hi:inset 0 1px 0 rgba(255,255,255,.9);
  --ui:"Inter","Segoe UI",system-ui,sans-serif;
  --t-display:600 28px/34px var(--ui); --t-title:600 19px/24px var(--ui); --t-head:600 15px/20px var(--ui);
  --t-body:400 14px/20px var(--ui); --t-strong:500 14px/20px var(--ui); --t-label:500 13px/18px var(--ui);
  --t-caption:400 12px/16px var(--ui); --t-micro:500 11px/14px var(--ui); --t-num:600 30px/36px var(--ui);
  --r-lg:16px; --r:12px; --r-sm:9px;
  font:var(--t-body); color:var(--text); -webkit-font-smoothing:antialiased; font-feature-settings:"cv11";
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #hq{
  --bg:#0E1320; --surface:#151B2B; --surface-2:#1A2134; --sunk:#111727; --glass:rgba(15,21,35,.78); --glass-2:rgba(17,23,38,.95);
  --line:rgba(170,192,255,.09); --line-2:rgba(170,192,255,.17); --text:#EAF0FA; --meta:#A3AEC4; --dim:#6E7A93;
  --accent:#7DA9FF; --accent-soft:rgba(125,169,255,.13); --on-accent:#0B1222;
  --good:#45D19C; --warn:#F5B24E; --bad:#F27070; --warn-soft:rgba(245,178,78,.12); --good-soft:rgba(69,209,156,.12); --bad-soft:rgba(242,112,112,.12);
  --shadow:0 14px 40px rgba(0,0,0,.45); --shadow-s:0 1px 3px rgba(0,0,0,.4); --hi:inset 0 1px 0 rgba(255,255,255,.06); color-scheme:dark}}
:root[data-theme="dark"] #hq{
  --bg:#0E1320; --surface:#151B2B; --surface-2:#1A2134; --sunk:#111727; --glass:rgba(15,21,35,.78); --glass-2:rgba(17,23,38,.95);
  --line:rgba(170,192,255,.09); --line-2:rgba(170,192,255,.17); --text:#EAF0FA; --meta:#A3AEC4; --dim:#6E7A93;
  --accent:#7DA9FF; --accent-soft:rgba(125,169,255,.13); --on-accent:#0B1222;
  --good:#45D19C; --warn:#F5B24E; --bad:#F27070; --warn-soft:rgba(245,178,78,.12); --good-soft:rgba(69,209,156,.12); --bad-soft:rgba(242,112,112,.12);
  --shadow:0 14px 40px rgba(0,0,0,.45); --shadow-s:0 1px 3px rgba(0,0,0,.4); --hi:inset 0 1px 0 rgba(255,255,255,.06); color-scheme:dark}

/* the office's own chrome steps aside once the new interface is up */
body.hq2 header.hud,body.hq2 .dock,body.hq2 #openPanel,body.hq2 #ctl,body.hq2 > .toast,body.hq2 #plist{display:none!important}

#hq *{box-sizing:border-box}
#hq button,#hq input,#hq textarea,#hq select{font:inherit;color:inherit}
#hq button{cursor:pointer;border:0;background:none;padding:0;text-align:left}
#hq :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#hq h1,#hq h2,#hq h3,#hq h4,#hq p{margin:0}
#hq svg.lucide{width:17px;height:17px;stroke-width:1.8;flex:none}
#hq .cap{font:var(--t-caption);color:var(--meta);font-variant-numeric:tabular-nums}
#hq .dim{color:var(--dim)} #hq .meta{color:var(--meta)}
#hq .num{font-variant-numeric:tabular-nums}
#hq [hidden]{display:none!important}
#hq .glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(115%);backdrop-filter:blur(22px) saturate(115%);border:1px solid var(--line-2);box-shadow:var(--shadow),var(--hi)}

/* small parts */
#hq .ib{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--text);position:relative;flex:none}
#hq .ib:hover{background:var(--accent-soft)}
#hq .badge{position:absolute;top:3px;right:2px;min-width:16px;height:16px;border-radius:8px;padding:0 4px;background:var(--bad);color:#fff;font:var(--t-micro);font-weight:600;line-height:16px;text-align:center}
#hq .hbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 14px;border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);font:var(--t-label);font-weight:600;white-space:nowrap}
#hq .hbtn.hsec{background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);font-weight:500}
#hq .hbtn.sm{height:30px;padding:0 11px}
#hq .hbtn.danger{color:var(--bad)}
#hq .hbtn[disabled]{opacity:.5;cursor:default}
#hq .htag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;font:var(--t-micro);font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--meta);border:1px solid var(--line)}
#hq .htag.good{background:var(--good-soft);color:var(--good);border-color:transparent}
#hq .htag.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
#hq .htag.acc{background:var(--accent-soft);color:var(--accent);border-color:transparent}
#hq .htag.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
#hq .hdot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;display:inline-block}
#hq .fi{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;background:#000;box-shadow:0 0 0 1px var(--line-2)}
#hq .fi.app{border-radius:9px}
#hq .ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);color:var(--meta);flex:none}
#hq .ico.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
#hq .ico.acc{background:var(--accent-soft);color:var(--accent);border-color:transparent}
#hq .ico.good{background:var(--good-soft);color:var(--good);border-color:transparent}
#hq .ico.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
#hq .seg{display:flex;padding:3px;gap:2px;border-radius:10px;background:var(--sunk);border:1px solid var(--line)}
#hq .seg button{display:flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:7px;color:var(--meta);font:var(--t-label)}
#hq .seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-s);font-weight:600}
#hq .seg svg.lucide{width:15px;height:15px}

/* the bar */
#hq .hbar{position:fixed;z-index:30;top:calc(env(safe-area-inset-top,0px) + 12px);left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));height:56px;border-radius:var(--r-lg);display:flex;align-items:center;gap:14px;padding:0 10px 0 12px}
#hq .mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--text);color:var(--bg);font:700 11.5px/1 var(--ui);letter-spacing:.02em;flex:none}
#hq .brand{display:flex;align-items:center;gap:10px;min-width:0}
#hq .brand b{display:block;font:var(--t-head);white-space:nowrap}
#hq .brand small{display:block;font:var(--t-caption);color:var(--meta);white-space:nowrap}
#hq .crew{display:flex;align-items:center;gap:2px;margin-left:8px;padding-left:14px;border-left:1px solid var(--line-2)}
#hq .crw{display:flex;align-items:center;gap:7px;height:40px;padding:0 9px 0 5px;border-radius:10px}
#hq .crw:hover{background:var(--accent-soft)}
#hq .cm{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);color:var(--meta);border:1px solid var(--line);position:relative}
#hq .cm svg.lucide{width:14px;height:14px}
#hq .crw.on .cm{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent);background:var(--good-soft)}
#hq .crw.on .cm::after{content:"";position:absolute;inset:-4px;border-radius:11px;border:1px solid color-mix(in srgb,var(--good) 40%,transparent);animation:hqring 2.4s ease-out infinite}
#hq .crw b{display:block;font:500 12px/15px var(--ui)}
#hq .crw small{display:flex;align-items:center;gap:4px;font:var(--t-micro);color:var(--dim)}
#hq .crw small .hdot{width:5px;height:5px}
#hq .crw.on small{color:var(--good)} #hq .crw.next small,#hq .crw.hask small{color:var(--warn)}
#hq .hbar .sp{flex:1}
#hq .me{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font:var(--t-label);font-weight:600;flex:none}

/* your move */
#hq .move{position:fixed;z-index:20;top:calc(env(safe-area-inset-top,0px) + 80px);right:max(12px,env(safe-area-inset-right,0px));width:340px;border-radius:var(--r-lg);padding:12px}
#hq .move>header{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:var(--t-head)}
#hq .move>header .htag{margin-left:auto}
#hq .hmt{display:flex;align-items:center;gap:8px;white-space:nowrap}
#hq .mfold{width:28px;height:28px}
#hq .mfold svg.lucide{transition:transform .2s}
#hq .move.shut{width:auto;padding:5px 5px 5px 12px}
#hq .move.shut>header{margin:0}
#hq .move.shut .mv,#hq .move.shut .mnone{display:none}
#hq .move.shut .mfold svg.lucide{transform:rotate(180deg)}
#hq .mv{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;width:100%}
#hq .mv+.mv{border-top:1px solid var(--line)}
#hq .mv b,#hq .li b{display:block;font:var(--t-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hq .mv small,#hq .li small{display:block;font:var(--t-caption);color:var(--meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hq .mnone{font:var(--t-caption);color:var(--meta);padding:4px 0 2px}

/* the line */
#hq .lineb{position:fixed;z-index:20;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);width:min(1120px,calc(100% - 24px));border-radius:var(--r-lg);padding:10px 12px 8px;max-height:calc(100% - 180px);overflow:auto}
#hq .lhead{display:flex;align-items:center;gap:10px;padding:0 2px 8px}
#hq .lhead h3{font:var(--t-head);white-space:nowrap}
#hq .lt{display:flex;align-items:center;flex:none}
#hq .lhead .sp{flex:1}
#hq .lfold svg.lucide{transition:transform .2s}
#hq .lsum{display:none;align-items:center;gap:10px;min-width:0}
#hq .lsum .fi{width:28px;height:28px}
#hq .lsum b{display:block;font:var(--t-strong);white-space:nowrap}
#hq .lsum small{display:block;font:var(--t-caption);color:var(--meta);white-space:nowrap}
#hq .lineb.shut{width:auto;max-width:calc(100% - 24px);padding:6px 6px 6px 14px}
#hq .lineb.shut .lhead{padding:0;gap:14px}
#hq .lineb.shut .stages,#hq .lineb.shut .rows,#hq .lineb.shut .lall,#hq .lineb.shut .lcount{display:none}
#hq .lineb.shut .lsum{display:flex}
#hq .lineb.shut .lfold svg.lucide{transform:rotate(180deg)}
#hq .grid9{display:grid;grid-template-columns:220px repeat(9,minmax(0,1fr)) 150px;align-items:center}
#hq .stages{border-top:1px solid var(--line);border-bottom:1px solid var(--line);height:30px}
#hq .stages div{display:flex;align-items:center;justify-content:center;gap:5px;font:var(--t-micro);color:var(--meta);white-space:nowrap}
#hq .stages div.you{color:var(--warn)}
#hq .stages svg.lucide{width:13px;height:13px}
#hq .lrow{height:52px}
#hq .lrow+.lrow{border-top:1px solid var(--line)}
#hq .hwho{display:flex;align-items:center;gap:10px;min-width:0}
#hq .hwho>div{min-width:0}
#hq .hwho b{display:block;font:var(--t-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hq .hwho small{display:block;font:var(--t-caption);color:var(--meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hq .cell{position:relative;height:100%;display:grid;place-items:center}
#hq .cell::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--line-2)}
#hq .cell.first::before{left:50%} #hq .cell.last::before{right:50%}
#hq .cell.done::before{background:var(--accent)}
#hq .cell.cur::before{background:linear-gradient(90deg,var(--accent) 50%,var(--line-2) 50%)}
#hq .cell.first.cur::before{background:var(--line-2)}
#hq .node{position:relative;z-index:1;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2)}
#hq .cell.done .node{background:var(--accent);border-color:var(--accent)}
#hq .cell.cur .node{width:16px;height:16px;border:4px solid var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
#hq .cell.cur.hask .node{border-color:var(--warn);box-shadow:0 0 0 4px var(--warn-soft)}
#hq .cell .lab{position:absolute;z-index:1;top:calc(50% + 11px);left:50%;transform:translateX(-50%);font:var(--t-micro);font-weight:600;color:var(--accent);white-space:nowrap}
#hq .cell.hask .lab{color:var(--warn)}
#hq .stack{position:relative;z-index:1;display:flex;align-items:center}
#hq .stack img{width:26px;height:26px;border-radius:50%;margin-left:-8px;box-shadow:0 0 0 2px var(--surface);object-fit:cover;background:#000}
#hq .stack img:first-child{margin-left:0}
#hq .stack em{font-style:normal;font:var(--t-micro);font-weight:600;margin-left:4px;color:var(--meta);background:var(--surface);border-radius:6px;padding:1px 5px;border:1px solid var(--line)}
#hq .act{display:flex;justify-content:flex-end;gap:6px}
#hq .lineb .more{display:none}
#hq .lineb.open .more{display:grid}
#hq .lineb.open .group{display:none}
#hq .mini{display:none;gap:3px;margin-top:5px}
#hq .mini i{width:14px;height:4px;border-radius:2px;background:var(--line-2)}
#hq .mini i.d{background:var(--accent)} #hq .mini i.c{background:var(--warn)}
#hq .lsum .mini{display:flex;margin:0}
#hq .lempty{font:var(--t-caption);color:var(--meta);padding:10px 4px}

/* phone menu */
#hq .pnav{display:none}

/* panels over the world: a face, an app, Studio, Team, a new face */
#hq .scrim{position:fixed;inset:0;z-index:40;background:color-mix(in srgb,#05080F 34%,transparent)}
#hq .panel{position:fixed;z-index:41;top:calc(env(safe-area-inset-top,0px) + 14px);bottom:calc(env(safe-area-inset-bottom,0px) + 14px);left:max(14px,env(safe-area-inset-left,0px));right:max(14px,env(safe-area-inset-right,0px));background:var(--glass-2);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 30px 80px rgba(0,0,0,.35);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;outline:none}
#hq .panel.small{left:50%;right:auto;width:min(560px,calc(100% - 24px));top:50%;bottom:auto;transform:translate(-50%,-50%);max-height:calc(100% - 120px)}
#hq .phead{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--glass-2);border-bottom:1px solid var(--line)}
#hq .phead .fi{width:42px;height:42px}
#hq .phead .t{flex:1;min-width:0}
#hq .phead h2{font:var(--t-title);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hq .phead .cap{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hq .phead .tags{display:flex;gap:6px}
#hq .journey{display:grid;grid-template-columns:repeat(9,minmax(84px,1fr));padding:16px 14px 6px;overflow-x:auto;scrollbar-width:none}
#hq .jc{position:relative;display:grid;justify-items:center;gap:6px;text-align:center}
#hq .jc::before{content:"";position:absolute;top:13px;left:0;right:0;height:2px;background:var(--line-2)}
#hq .jc:first-child::before{left:50%} #hq .jc:last-child::before{right:50%}
#hq .jc.done::before{background:var(--accent)}
#hq .jc.cur::before{background:linear-gradient(90deg,var(--accent) 50%,var(--line-2) 50%)}
#hq .jn{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1.5px solid var(--line-2);color:var(--dim)}
#hq .jn svg.lucide{width:14px;height:14px}
#hq .jc.done .jn{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
#hq .jc.cur .jn{border:2px solid var(--accent);color:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
#hq .jc.cur.hask .jn{border-color:var(--warn);color:var(--warn);box-shadow:0 0 0 5px var(--warn-soft)}
#hq .jc.you .jn{border-style:dashed;color:var(--warn)}
#hq .jc b{font:600 12px/16px var(--ui)}
#hq .jc small{font:var(--t-micro);color:var(--meta);min-height:14px}
#hq .jc.cur b{color:var(--accent)} #hq .jc.cur.hask b{color:var(--warn)}
#hq .pbody{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;padding:10px 14px 14px;align-items:start}
#hq .pmain{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
#hq .pside{display:grid;gap:12px;position:sticky;top:80px}
#hq .tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
#hq .tab{display:flex;align-items:center;gap:7px;height:40px;color:var(--meta);font:var(--t-label);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
#hq .tab.on{color:var(--text);border-color:var(--accent);font-weight:600}
#hq .tab svg.lucide{width:15px;height:15px}
#hq .tab em{font-style:normal;font:var(--t-micro);color:var(--dim)}
#hq .convo{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:4px 0}
#hq .msg{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px}
#hq .msg .ico{width:30px;height:30px;border-radius:8px}
#hq .msg .ico svg.lucide{width:15px;height:15px}
#hq .by{font:600 13px/18px var(--ui)}
#hq .by time{font:var(--t-caption);color:var(--dim);margin-left:6px}
#hq .bub{margin-top:4px;padding:10px 12px;border-radius:4px var(--r) var(--r) var(--r);background:var(--surface);border:1px solid var(--line);max-width:720px;font:var(--t-body);overflow-wrap:anywhere}
#hq .bub p+p,#hq .bub p+ol,#hq .bub ol+p,#hq .bub p+ul{margin-top:6px}
#hq .bub ol,#hq .bub ul{margin:6px 0 0;padding-left:1.25em;display:grid;gap:2px}
#hq .bub .q{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--warn-soft);color:var(--text)}
#hq .bub.herr{border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
#hq .mine{justify-self:end;display:grid;justify-items:end;gap:3px;max-width:78%}
#hq .mine .bub{background:var(--accent);color:var(--on-accent);border-color:transparent;border-radius:var(--r) 4px var(--r) var(--r)}
#hq .mine small{font:var(--t-caption);color:var(--dim)}
#hq .ev{justify-self:center;display:flex;align-items:center;gap:7px;font:var(--t-caption);color:var(--dim);text-align:center}
#hq .ev svg.lucide{width:14px;height:14px}
#hq .atts{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
#hq .atts button{flex:none}
#hq .atts img{height:92px;border-radius:10px;border:1px solid var(--line);display:block;background:#000}
#hq .compose{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:8px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow)}
#hq .compose .ln{display:flex;align-items:flex-end;gap:6px}
#hq .compose .to{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
#hq .compose .to button{height:24px;padding:0 8px;border-radius:6px;font:var(--t-caption);color:var(--meta);white-space:nowrap}
#hq .compose .to button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
#hq .bub.txt{white-space:pre-wrap}
#hq .send[disabled]{opacity:.5}
#hq .compose textarea{flex:1;min-width:0;border:0;background:transparent;resize:none;min-height:36px;max-height:140px;padding:8px 4px;outline:none;font:var(--t-body)}
#hq .send{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--accent);color:var(--on-accent);flex:none}
#hq .sbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
#hq .sbox>header{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:var(--t-head)}
#hq .sbox>header .sp{flex:1}
#hq .gate p{font:var(--t-body)}
#hq .gate .askq{margin-top:8px;padding:9px 11px;border-radius:9px;background:var(--warn-soft);font:var(--t-body)}
#hq .gate textarea{width:100%;margin-top:10px;min-height:70px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface-2);padding:8px 10px;resize:vertical;outline:none;font:var(--t-body)}
#hq .gate .hacts{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
#hq .qs{display:grid;gap:12px;margin-top:6px}
#hq .qq p{font:var(--t-body)}
#hq .opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#hq .opt{min-height:32px;padding:6px 12px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);font:var(--t-label);color:var(--text);text-align:left}
#hq .opt:hover{border-color:var(--accent)}
#hq .opt.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
#hq .other{width:100%;margin-top:8px;height:34px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface-2);padding:0 10px;outline:none;font:var(--t-body)}
#hq .kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 12px;font:var(--t-caption);margin:0}
#hq .kv dt{color:var(--meta)} #hq .kv dd{margin:0;text-align:right;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}
#hq .list{display:grid}
#hq .li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;width:100%}
#hq .list>.li+.li{border-top:1px solid var(--line)}
#hq .li .r{text-align:right;font:var(--t-caption);color:var(--meta)}
#hq .path{font:var(--t-caption);color:var(--meta);overflow-wrap:anywhere;white-space:normal!important}
#hq .shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
#hq .shot{display:grid;gap:5px}
#hq .shot img{width:100%;max-width:100%;aspect-ratio:1;object-fit:contain;background:#000;border-radius:var(--r);border:1px solid var(--line)}
#hq .shot b{font:var(--t-label);font-weight:600}
#hq .shot small{display:block;font:var(--t-caption);color:var(--dim)}
#hq .fsec{display:grid;gap:8px}
#hq .fsec+.fsec{margin-top:16px}
#hq .fsec>h4{display:flex;align-items:center;gap:8px;font:var(--t-label);font-weight:600;color:var(--meta)}
#hq .empty{display:flex;align-items:center;gap:10px;padding:12px;border:1px dashed var(--line-2);border-radius:var(--r);color:var(--meta);font:var(--t-body)}
#hq .amount{font:var(--t-num);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#hq .amount span{font:500 18px/1 var(--ui);color:var(--meta);margin-right:3px}
#hq .bars{display:flex;align-items:flex-end;gap:10px;height:76px;margin-top:10px}
#hq .bars div{flex:1;display:grid;gap:5px;justify-items:center}
#hq .bars i{display:block;width:100%;max-width:26px;border-radius:5px 5px 2px 2px;background:color-mix(in srgb,var(--accent) 24%,transparent)}
#hq .bars i.hnow{background:var(--accent)}
#hq .bars small{font:var(--t-micro);color:var(--dim)}
#hq .foot{display:flex;gap:18px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font:var(--t-caption);color:var(--meta)}
#hq .foot b{color:var(--text);font-weight:600}
#hq .nowork{display:flex;align-items:center;gap:14px;margin:14px;padding:16px;border-radius:var(--r);border:1px dashed var(--line-2);background:var(--surface)}
#hq .nowork>div{flex:1} #hq .nowork b{display:block;font:var(--t-head)} #hq .nowork small{font:var(--t-caption);color:var(--meta)}

/* studio */
#hq .swrap{padding:14px;display:grid;gap:14px}
#hq .hello h1{font:var(--t-display);letter-spacing:-.02em}
#hq .hello p{color:var(--meta);margin-top:4px}
#hq .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--shadow-s)}
#hq .card>header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
#hq .card>header h3{font:var(--t-head)}
#hq .card>header .sp{flex:1}
#hq .three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#hq .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
#hq .fc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:12px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);width:100%}
#hq .fc img{width:52px;height:52px;border-radius:50%;box-shadow:0 0 0 1px var(--line-2);object-fit:cover;background:#000}
#hq .fc img.app{border-radius:13px}
#hq .fc b{display:block;font:var(--t-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
#hq .fc .stats{display:flex;gap:10px;margin-top:5px;font:var(--t-caption);color:var(--meta);white-space:nowrap}
#hq .fc .stats b{display:inline;color:var(--text)}

/* team */
#hq .hteam{display:grid;grid-template-columns:330px minmax(0,1fr);gap:14px;padding:14px;align-items:start}
#hq .tlist{display:grid;gap:12px;position:sticky;top:84px}
#hq .tgroup>h4{font:var(--t-micro);font-weight:600;color:var(--dim);margin:0 0 6px 4px}
#hq .tgroup .list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0 12px}
#hq .tgroup .li.on{background:var(--accent-soft);margin:0 -12px;padding:10px 12px;width:calc(100% + 24px)}
#hq .tgroup .li.off{opacity:.55}
#hq .tdet{display:grid;gap:12px;min-width:0}
#hq .thero{display:flex;align-items:center;gap:14px}
#hq .thero .ico{width:52px;height:52px;border-radius:14px}
#hq .thero .ico svg.lucide{width:24px;height:24px}
#hq .thero h3{font:var(--t-title)}
#hq .thero p{color:var(--meta)}
#hq .thero>div{flex:1;min-width:0}
#hq .stats4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#hq .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
#hq .stat b{display:block;font:600 24px/30px var(--ui);font-variant-numeric:tabular-nums}
#hq .stat small{font:var(--t-caption);color:var(--meta)}
#hq .rules{display:grid;gap:6px;margin:0;padding:0;list-style:none}
#hq .rules li{display:flex;gap:8px}
#hq .rules svg.lucide{width:16px;height:16px;color:var(--good);margin-top:2px}
#hq .idea{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);background:var(--accent-soft)}
#hq .idea>div{flex:1} #hq .idea b{display:block;font:var(--t-strong)} #hq .idea p{color:var(--meta)}

/* a new face */
#hq .opt{display:grid;gap:10px;padding:14px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
#hq .opt header{display:flex;gap:10px;align-items:center}
#hq .opt header b{display:block;font:var(--t-head)}
#hq .opt header small{font:var(--t-caption);color:var(--meta)}
#hq .field{display:flex;align-items:center;gap:6px;padding:3px 3px 3px 10px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface-2)}
#hq .field input{flex:1;min-width:0;height:32px;border:0;background:transparent;outline:none;font:var(--t-body)}
#hq .lbx{position:fixed;inset:0;z-index:60;background:rgba(5,8,15,.86);display:grid;place-items:center;padding:24px}
#hq .lbx img{max-width:100%;max-height:calc(100vh - 80px);border-radius:12px}
#hq .lbx p{color:#fff;text-align:center;margin-top:8px;font:var(--t-caption)}
#hq .htoast{position:fixed;z-index:70;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translateX(-50%);background:var(--text);color:var(--bg);padding:9px 14px;border-radius:10px;font:var(--t-label);max-width:calc(100% - 32px);text-align:center;box-shadow:var(--shadow)}

body.hqopen #hq .move,body.hqopen #hq .lineb,body.hqopen #hq .pnav{opacity:0;pointer-events:none}
#hq .move,#hq .lineb{transition:opacity .2s}

@media (max-width:1320px){#hq .crw small{display:none}#hq .crw{height:36px}}
@media (max-width:1180px){#hq .crw>span:last-child{display:none}#hq .crw{padding:0 2px}}
@media (max-width:1100px){#hq .pbody{grid-template-columns:minmax(0,1fr)}#hq .pside{position:static;order:-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:980px){#hq .grid9{grid-template-columns:170px repeat(9,minmax(0,1fr)) 0}#hq .lineb .act{display:none}#hq .three{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:899px){
  #hq .crew,#hq .hbar .seg,#hq .stages{display:none}
  #hq .hbar{height:52px;gap:8px}
  #hq .move{top:calc(env(safe-area-inset-top,0px) + 72px);left:max(12px,env(safe-area-inset-left,0px));width:auto}
  #hq .move.shut{left:auto}
  #hq .move .mv:nth-of-type(n+2){display:none}
  #hq .lineb{bottom:calc(env(safe-area-inset-bottom,0px) + 80px);transform:none;left:max(12px,env(safe-area-inset-left,0px));width:auto;right:max(12px,env(safe-area-inset-right,0px))}
  #hq .lineb.shut{max-width:none}
  #hq .grid9{grid-template-columns:minmax(0,1fr) auto}
  #hq .lrow .cell{display:none}
  #hq .lrow .mini{display:flex}
  #hq .lineb .act{display:flex}
  #hq .lsum .mini,#hq .lineb.shut .lsum small{display:none}
  #hq .pnav{display:flex;position:fixed;z-index:30;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 12px);height:58px;border-radius:var(--r-lg);align-items:center;justify-content:space-around;padding:0 4px}
  #hq .pnav button{display:grid;justify-items:center;gap:2px;font:500 11px/14px var(--ui);color:var(--meta);padding:4px 8px;border-radius:8px;min-width:58px}
  #hq .pnav button.on{color:var(--accent)}
  #hq .pnav .new{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);min-width:0;padding:0}
  #hq .panel{top:calc(env(safe-area-inset-top,0px) + 8px);left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
  #hq .panel.small{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));width:auto;transform:none;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
  #hq .phead .tags,#hq .phead .hbtn{display:none}
  #hq .pside{grid-template-columns:minmax(0,1fr)}
  #hq .three{grid-template-columns:minmax(0,1fr)}
  #hq .hteam{grid-template-columns:minmax(0,1fr)}
  #hq .tlist{position:static}
  #hq .stats4{grid-template-columns:repeat(2,minmax(0,1fr))}
  #hq .hello h1{font-size:24px;line-height:30px}
}
@media (prefers-reduced-motion:reduce){#hq .crw.on .cm::after{animation:none}}
@media (prefers-reduced-motion:no-preference){#hq .panel:not([hidden]):not(.small){animation:hqup .32s cubic-bezier(.2,.8,.2,1)}#hq .scrim:not([hidden]){animation:hqfade .2s ease}}
@keyframes hqring{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.25)}}
@keyframes hqup{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
@keyframes hqfade{from{opacity:0}}