/* Shared mockup kit: a realistic Herdr GPUI window, video placeholder, shot tiles.
   Pages theme the surroundings; the window itself follows data-theme. */
.hm-app { --bg:#131518; --side:#191b1f; --fg:#d9dce1; --dim:#7a808a; --ln:rgba(255,255,255,.075); --sel:rgba(255,255,255,.07); --acc:#3dd6d0; --card:#1b1e23;
  background:var(--bg); color:var(--fg); border-radius:12px; overflow:hidden; font:12px/1.45 -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  border:1px solid rgba(255,255,255,.1); box-shadow:0 0 0 .5px rgba(0,0,0,.6), 0 50px 120px -20px rgba(0,0,0,.55); text-align:left; }
.hm-app.light { --bg:#fdfdfc; --side:#f3f2ef; --fg:#24272c; --dim:#8b9098; --ln:rgba(0,0,0,.085); --sel:rgba(0,0,0,.06); --acc:#0f9f99; --card:#f6f5f2;
  border-color:rgba(0,0,0,.12); box-shadow:0 50px 100px -30px rgba(30,30,50,.35); }
.hm-tb { height:36px; display:grid; grid-template-columns:var(--sw,224px) minmax(0,1fr); align-items:center; border-bottom:1px solid var(--ln); }
.hm-tb .l { padding-left:13px; height:100%; display:flex; align-items:center; gap:7px; background:var(--side); border-right:1px solid var(--ln); }
.hm-tb .l i { width:11px; height:11px; border-radius:50%; } .hm-tb .l i:nth-child(1){background:#ff5f57}.hm-tb .l i:nth-child(2){background:#febc2e}.hm-tb .l i:nth-child(3){background:#28c840}
.hm-tb .l .nav { margin-left:auto; margin-right:10px; color:var(--dim); letter-spacing:6px; }
.hm-tabs { display:flex; height:100%; overflow:hidden; }
.hm-tab { display:flex; align-items:center; gap:7px; padding:0 14px; color:var(--dim); border-right:1px solid var(--ln); white-space:nowrap; }
.hm-tab.on { color:var(--fg); background:var(--bg); box-shadow:inset 0 -2px 0 var(--acc); }
.hm-tab img { width:13px; height:13px; }
.hm-bd { display:grid; grid-template-columns:var(--sw,224px) minmax(0,1fr); height:var(--h,420px); }
.hm-sd { background:var(--side); border-right:1px solid var(--ln); padding:6px 8px; overflow:hidden; display:flex; flex-direction:column; }
.hm-search { margin:4px 2px 6px; padding:5px 9px; border-radius:7px; background:var(--sel); color:var(--dim); font-size:11.5px; }
.hm-h { display:flex; justify-content:space-between; align-items:center; color:var(--dim); font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; padding:9px 8px 4px; font-weight:600; }
.hm-h .bar { width:38px; height:3px; border-radius:2px; background:var(--ln); overflow:hidden; display:inline-block; margin-left:6px; vertical-align:2px; } .hm-h .bar i { display:block; height:100%; background:var(--acc); }
.hm-r { display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius:6px; white-space:nowrap; overflow:hidden; }
.hm-r.on { background:var(--sel); }
.hm-r img { width:14px; height:14px; flex:none; } .hm-r .s { margin-left:auto; color:var(--dim); font-size:11px; display:flex; gap:6px; align-items:center; }
.hm-r.ind { padding-left:22px; }
.hm-r .note { color:var(--dim); font-size:10.5px; }
.hm-foot { margin-top:auto; padding:7px 8px; border-top:1px solid var(--ln); color:var(--dim); font-size:11px; display:flex; justify-content:space-between; }
.hm-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; }
.hm-dot.work { background:#f5a524; animation:hm-pulse 1.4s infinite; } .hm-dot.block { background:#e5484d; } .hm-dot.done { background:#30a46c; } .hm-dot.idle { background:#6b7079; }
@keyframes hm-pulse { 50% { opacity:.35; } }
.hm-mn { display:grid; grid-template-rows:1fr 26px; min-width:0; }
.hm-panes { display:grid; grid-template-columns:1.1fr 1fr; min-height:0; }
.hm-pn { padding:10px 14px; font:11.5px/1.62 ui-monospace, "SF Mono", Menlo, monospace; white-space:pre; overflow:hidden; }
.hm-pn + .hm-pn { border-left:1px solid var(--ln); }
.hm-st { border-top:1px solid var(--ln); display:flex; align-items:center; gap:16px; padding:0 12px; color:var(--dim); font-size:11px; white-space:nowrap; overflow:hidden; }
.hm-st .m { display:flex; align-items:center; gap:6px; } .hm-st .m span { width:42px; height:4px; border-radius:2px; background:var(--ln); overflow:hidden; } .hm-st .m span i { display:block; height:100%; background:var(--acc); }
.hm-view { padding:16px 18px; overflow:hidden; min-width:0; }
.hm-view h5 { margin:0 0 10px; font-size:14px; display:flex; align-items:center; gap:10px; }
.hm-view h5 small { color:var(--dim); font-weight:400; font-size:11.5px; }
.hm-card { background:var(--card); border:1px solid var(--ln); border-radius:9px; padding:10px 12px; }
.hm-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hm-pill { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px; background:var(--sel); color:var(--dim); font-size:11px; }
.hm-pill.on { background:var(--acc); color:#06201f; }
.hm-tbl { width:100%; border-collapse:collapse; font-size:11.5px; } .hm-tbl td, .hm-tbl th { padding:6px 8px; border-bottom:1px solid var(--ln); text-align:left; white-space:nowrap; } .hm-tbl th { color:var(--dim); font-weight:500; }
.hm-heat { display:grid; grid-template-columns:repeat(60,1fr); gap:1px; }
.hm-heat i { height:12px; border-radius:1px; background:var(--ln); }
.hm-diff { font:11px/1.6 ui-monospace, Menlo, monospace; white-space:pre; overflow:hidden; }
.hm-diff .a { background:rgba(48,164,108,.16); } .hm-diff .d { background:rgba(229,72,77,.16); } .hm-diff .n { color:var(--dim); }
.hm-diff .cm { margin:4px 0 4px 40px; padding:6px 9px; border-radius:7px; border:1px solid var(--acc); background:var(--card); font-family:-apple-system, sans-serif; white-space:normal; }
.cg{color:#5fd38d}.cy{color:#f2c14e}.cb{color:#7cb7ff}.cm{color:#cfa6ff}.cd{color:var(--dim)}.cr{color:#ff7b72}
.hm-app.light .cg{color:#1a7f37}.hm-app.light .cy{color:#9a6700}.hm-app.light .cb{color:#0969da}.hm-app.light .cm{color:#8250df}.hm-app.light .cr{color:#cf222e}

/* video placeholder */
.hm-video { position:relative; aspect-ratio:16/9; border-radius:var(--vr,18px); overflow:hidden; background:var(--vbg,#0b0c0f); display:grid; place-items:center; }
.hm-video .poster { position:absolute; inset:6% 8% -4%; opacity:.5; pointer-events:none; }
.hm-video .play { position:relative; z-index:2; width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,.94); display:grid; place-items:center; box-shadow:0 10px 40px rgba(0,0,0,.4), 0 0 0 10px rgba(255,255,255,.12); cursor:pointer; }
.hm-video .play::after { content:""; border-left:23px solid #111; border-top:14px solid transparent; border-bottom:14px solid transparent; margin-left:6px; }
.hm-video .tag { position:absolute; z-index:2; left:16px; top:14px; font:600 11px/1 ui-monospace, Menlo, monospace; letter-spacing:.05em; padding:6px 8px; border-radius:6px; background:#ffe58f; color:#222; }
.hm-video .chs { position:absolute; z-index:2; left:0; right:0; bottom:0; display:flex; gap:4px; padding:26px 16px 12px; background:linear-gradient(transparent, rgba(0,0,0,.8)); }
.hm-video .ch { flex:1; font:11.5px -apple-system, sans-serif; color:#c9ccd2; cursor:pointer; }
.hm-video .ch i { display:block; height:3px; border-radius:2px; background:rgba(255,255,255,.25); margin-bottom:6px; }
.hm-video .ch.on { color:#fff; } .hm-video .ch.on i { background:#3dd6d0; }
.hm-video .ch small { color:#8b9099; font-family:ui-monospace, Menlo, monospace; margin-right:4px; }

/* screenshot placeholder tile */
.hm-shot { position:relative; aspect-ratio:16/10; border-radius:var(--sr,12px); overflow:hidden; border:1px solid var(--sbd,rgba(127,127,127,.28));
  background:repeating-linear-gradient(135deg, rgba(127,127,127,.07) 0 12px, transparent 12px 24px), var(--sbg,#16181c); color:var(--sfg,#8b9099);
  display:flex; flex-direction:column; justify-content:flex-end; padding:12px; font:11px/1.45 ui-monospace, Menlo, monospace; }
.hm-shot .k { position:absolute; top:10px; left:10px; font-weight:700; font-size:10.5px; letter-spacing:.05em; padding:4px 7px; border-radius:5px; background:rgba(61,214,208,.16); color:#3dd6d0; }
.hm-shot .only { position:absolute; top:10px; right:10px; font-weight:700; font-size:10px; letter-spacing:.05em; padding:4px 7px; border-radius:5px; background:rgba(229,72,77,.16); color:#ff8589; }

/* lightbox */
.hm-lb { position:fixed; inset:0; z-index:1000; background:rgba(5,6,8,.93); display:none; place-items:center; color:#fff; font-family:-apple-system, sans-serif; }
.hm-lb.on { display:grid; } .hm-lb .in { width:min(1100px, 90vw); } .hm-lb .hm-shot { aspect-ratio:16/9; font-size:13px; }
.hm-lb .cap { display:flex; justify-content:space-between; gap:20px; margin-top:14px; } .hm-lb .cap span { opacity:.6; }
.hm-lb .nv { position:fixed; top:50%; font-size:34px; opacity:.6; cursor:pointer; padding:20px; user-select:none; } .hm-lb .pv { left:8px; } .hm-lb .nx { right:8px; }

.hm-disc { font-size:12px; opacity:.6; }
.hm-app:not(.light) img[src*="agent-"] { filter:brightness(0) invert(.86); }