/* Preview harness chrome — deliberately neutral dark grey so it never competes
   with the design being reviewed. Not part of any of the four directions. */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 400 14px/1.5 "Inter", ui-sans-serif, system-ui, -apple-system, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #17181c; color: #e6e7ea;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
/* harness.js renders the bar + stage into this wrapper, so the wrapper — not .hz-stage —
   is body's flex item; without its own column flex the stage has no definite height and
   the iframe falls back to its intrinsic 150px. */
#harness { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.hz {
  flex: 0 0 auto; background: #101114; border-bottom: 1px solid #26282e;
  display: flex; align-items: center; gap: 14px; padding: 0 14px; height: 52px;
  position: relative; z-index: 20;
}
.hz-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hz-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--dir-accent); flex: 0 0 auto; }
.hz-name { font-weight: 650; font-size: 13.5px; white-space: nowrap; }
.hz-tag { font-size: 11.5px; color: #8a8d96; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-sep { width: 1px; height: 24px; background: #26282e; flex: 0 0 auto; }
/* below this the tagline only ever shows a useless truncated fragment, and it costs the
   screen tabs ~380px — drop it so all five tabs stay visible instead of scrolling. */
@media (max-width: 1560px) { .hz-brand .hz-sep, .hz-tag { display: none; } }

.hz-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
.hz-tabs::-webkit-scrollbar { display: none; }
.hz-tab {
  appearance: none; border: 0; background: transparent; color: #9ea1aa;
  font: inherit; font-size: 12.5px; padding: 7px 11px; border-radius: 7px;
  cursor: pointer; white-space: nowrap; transition: background 150ms, color 150ms;
}
.hz-tab:hover { background: #1c1e23; color: #d8dae0; }
.hz-tab[aria-current="true"] { background: #2a2d34; color: #fff; font-weight: 600; }
.hz-tab:focus-visible { outline: 2px solid var(--dir-accent); outline-offset: 1px; }
.hz-tab .n {
  display: inline-block; min-width: 15px; margin-right: 5px; text-align: center;
  font-size: 10px; color: #6f727b; font-variant-numeric: tabular-nums;
}

.hz-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.hz-seg { display: flex; background: #1c1e23; border: 1px solid #2a2d34; border-radius: 8px; padding: 2px; }
.hz-seg button {
  appearance: none; border: 0; background: transparent; color: #9ea1aa; cursor: pointer;
  padding: 5px 9px; border-radius: 6px; display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 11.5px; min-height: 30px; transition: background 150ms, color 150ms;
}
.hz-seg button[aria-pressed="true"] { background: #33363e; color: #fff; }
.hz-seg button:focus-visible { outline: 2px solid var(--dir-accent); outline-offset: 1px; }
.hz-seg svg { width: 14px; height: 14px; }

.hz-menu { position: relative; }
.hz-menu > button {
  appearance: none; background: #1c1e23; border: 1px solid #2a2d34; color: #cfd2d9;
  border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 11.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px;
}
.hz-menu > button:hover { background: #23262c; }
.hz-menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); background: #1c1e23;
  border: 1px solid #33363e; border-radius: 10px; padding: 6px; min-width: 244px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); display: none;
}
.hz-menu.open .hz-menu-pop { display: block; }
.hz-menu-pop a {
  display: flex; align-items: flex-start; gap: 9px; padding: 8px 9px; border-radius: 7px;
  text-decoration: none; color: #d8dae0; font-size: 12px; line-height: 1.4;
}
.hz-menu-pop a:hover { background: #292c33; }
.hz-menu-pop a .sw { width: 9px; height: 9px; border-radius: 3px; margin-top: 4px; flex: 0 0 auto; }
.hz-menu-pop a small { display: block; color: #82858e; font-size: 11px; }
.hz-menu-pop a[aria-current="page"] { background: #2f323a; }

.hz-stage { flex: 1 1 auto; position: relative; overflow: hidden; background: #202227; }
.hz-stage.phone {
  display: grid; place-items: center; padding: 22px 0;
  background:
    radial-gradient(120% 80% at 50% 0%, #2a2d33 0%, #1a1c20 60%, #15171a 100%);
  overflow: auto;
}
#appframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.hz-stage.phone .frame {
  width: 402px; height: 830px; max-height: calc(100vh - 96px);
  border-radius: 40px; padding: 11px; background: #0a0b0d;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8), inset 0 0 0 1px #34373e;
  flex: 0 0 auto;
}
.hz-stage.phone #appframe { border-radius: 30px; }
.hz-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font-size: 11px; color: #6f727b; background: rgba(16, 17, 20, .82);
  padding: 4px 10px; border-radius: 99px; pointer-events: none;
}

@media (max-width: 900px) {
  .hz { height: auto; flex-wrap: wrap; padding: 8px 10px; gap: 8px; }
  .hz-tabs { order: 3; width: 100%; }
  .hz-tag, .hz-sep { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }