:root {
  --ink: #17181c;
  --on-ink: #fbfbfc;
  --muted: #6d7480;
  --line: #e1e5ea;
  --bg: #f4f6f8;
  --paper: #ffffff;
  --sheet: #f7f8fa;
  --accent: #1f2937;
  --ok: #1f7a4d;
  --warn: #9a6700;
  --bad: #c03221;
  --rail: #ffffff;
  --rail-ink: #5c6370;
  --mat: #e9edf2;
  --hover: #eef2f6;
  --lift: #f8fafc;
  --btn-border: #1c1e22;
  --ghost-hover-line: #c9ced6;
  --label: #5c6370;
  --placeholder: #9aa1aa;
  --focus: rgba(17, 17, 20, .16);
  --chip-ok-line: #cfe6d8;
  --chip-warn-line: #ead9a8;
  --danger-hover: #f8e8e6;
  --track: #eceef1;
  --menu-shadow: 0 18px 48px rgba(17, 17, 20, .14);
  --panel-shadow: 0 14px 34px rgba(31, 41, 55, .06);
  --panel-shadow-strong: 0 22px 54px rgba(31, 41, 55, .1);
  --font-display: "Instrument Sans", "PingFang SC", "Noto Sans SC", sans-serif;
  --font-body: "Instrument Sans", "PingFang SC", "Noto Sans SC", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius: 8px;
  --shadow: 0 0 0 1px var(--line);
  color-scheme: light;
}
html[data-theme="dark"] {
  --ink: #eeeef0;
  --on-ink: #111114;
  --muted: #8b919a;
  --line: #2c3038;
  --bg: #111114;
  --paper: #18191d;
  --sheet: #111114;
  --accent: #eeeef0;
  --ok: #6fd49a;
  --warn: #e0b15a;
  --bad: #f07167;
  --rail: #16171b;
  --rail-ink: #a8adb6;
  --mat: #0c0d10;
  --hover: #22242a;
  --lift: #1e2026;
  --btn-border: #c5c8d0;
  --ghost-hover-line: #3a3e47;
  --label: #a8adb6;
  --placeholder: #6b7178;
  --focus: rgba(238, 238, 240, .18);
  --chip-ok-line: #2a5c40;
  --chip-warn-line: #5c4a20;
  --danger-hover: #3a1e1c;
  --track: #2a2d33;
  --menu-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  --panel-shadow: 0 16px 40px rgba(0, 0, 0, .2);
  --panel-shadow-strong: 0 24px 60px rgba(0, 0, 0, .32);
  color-scheme: dark;
}
html[data-theme="dark"] .brand__logo,
html[data-theme="dark"] .login__logo { filter: invert(1); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 45%, var(--bg)) 0, var(--bg) 18rem);
  letter-spacing: -.01em;
}
button, input, select, textarea { font: inherit; }
button {
  border: 1px solid var(--btn-border);
  border-radius: 7px;
  padding: .48rem .92rem;
  font-weight: 620;
  letter-spacing: -.01em;
  cursor: pointer;
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
  transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
button:hover {
  background: var(--accent);
  color: var(--on-ink);
  border-color: var(--accent);
  box-shadow: 0 10px 22px rgba(31, 41, 55, .14);
}
button:disabled { opacity: .45; cursor: not-allowed; }
button.ghost {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}
button.ghost:hover { background: var(--hover); color: var(--ink); border-color: var(--ghost-hover-line); }
button.danger {
  background: transparent;
  color: var(--bad);
  border: 1px solid transparent;
  padding: .28rem .55rem;
  font-weight: 500;
  box-shadow: none;
}
button.danger:hover { background: var(--danger-hover); color: var(--bad); }
button.danger.solid {
  background: var(--bad);
  color: #fff;
  border-color: var(--bad);
  box-shadow: none;
}
.nav button,
.account__btn,
.account__menu button,
.text-btn,
.days button,
.preview__pages button {
  box-shadow: none;
  background-image: none;
}
input, select, textarea {
  padding: .56rem .72rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 100%;
  background: color-mix(in srgb, var(--paper) 96%, var(--bg));
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--ghost-hover-line));
}
textarea { min-height: 4.2rem; resize: vertical; }
label { display: grid; gap: .28rem; font-size: .72rem; font-weight: 550; color: var(--label); letter-spacing: .02em; }
.muted { color: var(--muted); font-size: .78rem; }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
a { color: var(--ink); }
.mono { font-family: var(--font-mono); font-size: .72rem; word-break: break-all; letter-spacing: 0; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.top {
  display: flex;
  gap: .85rem;
  align-items: center;
  height: 64px;
  padding: 0 1.35rem;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 26px rgba(31, 41, 55, .05);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand { display: flex; align-items: center; gap: .72rem; min-width: 12rem; }
.brand__logo {
  width: 30px; height: 30px;
  display: block;
  flex-shrink: 0;
  border-radius: 9px;
  box-shadow: 0 10px 24px rgba(17, 17, 20, .08);
}
.brand__text { display: grid; gap: 0; min-width: 0; line-height: 1.15; }
.brand__kicker {
  margin: 0;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.top h1 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  margin: 0;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink);
}
.top__meta { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.top__company {
  font-size: .9rem;
  font-weight: 700;
  max-width: 26rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -.02em;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: .14rem .48rem;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .04em;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.chip--ok { color: var(--ok); border-color: var(--chip-ok-line); background: color-mix(in srgb, var(--ok) 7%, transparent); }
.chip--warn { color: var(--warn); border-color: var(--chip-warn-line); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.top__grow { flex: 1; }
.top__cluster {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding-right: .85rem;
  margin-right: .2rem;
  border-right: 1px solid var(--line);
}
.top .text-btn { color: var(--muted); padding: .28rem .45rem; }
.top .text-btn:hover { color: var(--ink); background: transparent; }
.top .ghost { color: var(--ink); border-color: var(--line); }
.top .preview__live { padding: 0 .35rem; }
.top__theme {
  height: 34px;
  padding: .28rem .65rem;
  font-weight: 500;
}
.top select {
  width: auto;
  max-width: 11.5rem;
  height: 32px;
  padding: 0 .55rem;
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
.account { position: relative; }
.account__btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  height: 36px;
  padding: .1rem .58rem .1rem .25rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
}
.account__btn:hover { background: var(--hover); color: var(--ink); }
.account__btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.account__avatar {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--ink) 72%, var(--muted)));
  color: var(--on-ink);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 0;
}
.account__name {
  max-width: 8.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink);
}
.account__caret {
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid var(--muted);
  transition: transform .15s ease;
}
.account__btn[aria-expanded="true"] .account__caret { transform: rotate(180deg); }
.account__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 13.5rem;
  padding: .3rem 0 .35rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--menu-shadow);
  z-index: 40;
}
.account__who {
  display: grid;
  gap: .12rem;
  padding: .55rem .85rem .6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: .25rem;
}
.account__who strong {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 600;
}
.account__who span {
  color: var(--muted);
  font-size: .72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account__menu button[role="menuitem"] {
  width: 100%;
  text-align: left;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 500;
  padding: .48rem .85rem;
}
.account__menu button[role="menuitem"]:hover,
.account__menu button[role="menuitem"]:focus-visible {
  background: var(--hover);
  color: var(--ink);
  outline: none;
}
.account__menu button[role="menuitem"].danger { color: var(--bad); }
.account__menu button[role="menuitem"].danger:hover { background: var(--danger-hover); }
.account__theme {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .45rem .85rem .55rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: .25rem;
}
.account__theme span {
  flex: 1;
  font-size: .78rem;
  color: var(--muted);
}
.account__theme button {
  height: 28px;
  padding: .15rem .55rem;
  font-size: .74rem;
  font-weight: 500;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
}
.account__theme button:hover { background: var(--hover); color: var(--ink); border-color: var(--ghost-hover-line); }
.account__theme button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--on-ink);
  border-color: var(--ink);
}
.account__theme button[aria-pressed="true"]:hover { background: var(--ink); color: var(--on-ink); }
.login {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 64px);
  padding: 3rem 1.4rem;
}
.login__wrap {
  width: min(62rem, 100%);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 4.5rem;
  align-items: center;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.login__story {
  padding: 0;
  background: none;
  border: 0;
  display: grid;
  align-content: start;
  gap: .9rem;
}
.login__story h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1.08;
}
.login__story p { margin: 0; color: var(--muted); max-width: 38ch; }
.login__story ol {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.login__story li {
  display: grid;
  grid-template-columns: 1.8rem 1fr;
  gap: .5rem;
  align-items: baseline;
  font-size: .88rem;
  color: var(--ink);
}
.login__story b {
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--muted);
}
.login__card {
  padding: 1.6rem 1.45rem 1.35rem;
  display: grid;
  align-content: start;
  gap: .75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.login__logo {
  width: 28px; height: 28px;
  border-radius: 7px;
}
.login__card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 550;
  letter-spacing: -.04em;
}
.login__card .muted { margin: -.2rem 0 0; }
.login__card a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.login__card button[type="submit"] { width: 100%; margin-top: .25rem; padding: .65rem 1rem; }
.keys-table { width: 100%; border-collapse: collapse; }
.keys-table th, .keys-table td {
  text-align: left;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.keys-table th {
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.key-flash {
  margin: 1rem 1.6rem;
  padding: 1rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: .55rem;
}
.key-flash textarea {
  min-height: 7.5rem;
  background: var(--bg);
  color: var(--ink);
  border-color: var(--line);
  font-family: var(--font-mono);
  font-size: .72rem;
}

.app { display: grid; height: calc(100vh - 64px); min-height: 0; }
.app--list { grid-template-columns: 1fr; }
.app--studio { grid-template-columns: 232px 1fr; }
.studio-main { display: grid; grid-template-columns: minmax(26rem, 36rem) minmax(0, 1fr); min-height: 0; min-width: 0; }
.studio-main.is-kb { grid-template-columns: minmax(0, 1fr); }
.studio-main.is-kb .preview { display: none; }
.studio-main.is-kb .edit__head,
.studio-main.is-kb .stack { max-width: 72rem; }
.studio-main.is-kb .stack--products { max-width: none; }
.nav {
  background: color-mix(in srgb, var(--rail) 88%, var(--bg));
  padding: .95rem .78rem .9rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: auto;
  border-right: 1px solid var(--line);
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--paper) 70%, transparent);
  min-height: 0;
}
.nav button {
  width: 100%;
  text-align: left;
  border-radius: 9px;
  padding: .62rem .82rem;
  background: transparent;
  color: var(--rail-ink);
  border: 0;
  font-size: .84rem;
  font-weight: 620;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.nav button:hover {
  color: var(--ink);
  background: var(--hover);
}
.nav__back {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .76rem !important;
  color: var(--muted) !important;
  margin: 0 0 .55rem;
  padding: .4rem .7rem !important;
  border-radius: 8px;
  letter-spacing: 0 !important;
}
.nav__back::before {
  content: "";
  width: 6px;
  height: 6px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.nav__back:hover { color: var(--ink) !important; background: var(--hover); }
.nav button[aria-selected="true"] {
  background: var(--paper);
  color: var(--ink);
  font-weight: 760;
  box-shadow: var(--panel-shadow);
}
.nav button[aria-selected="true"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: .48rem;
  border-radius: 999px;
  background: var(--accent);
  vertical-align: .08em;
}
.nav button.is-aux {
  margin-top: auto;
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  color: var(--muted);
  font-size: .8rem;
  padding-top: .7rem;
}
.nav button.is-aux[aria-selected="true"] { color: var(--ink); }
.sites-main {
  overflow: auto;
  padding: 0;
  background: transparent;
  min-width: 0;
}
.sites-main__inner {
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.sites-head {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 1rem;
  padding: 1.35rem 1.65rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 64%, transparent);
}
.sites-head__title { display: grid; gap: .18rem; }
.sites-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 720;
  letter-spacing: -.045em;
  color: var(--ink);
}
.sites-head__grow { flex: 1; }
.sites-head__search {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
}
.sites-head input {
  width: clamp(16rem, 28vw, 28rem);
  height: 44px;
  padding: 0 .92rem;
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
  border-radius: 10px;
  font-size: .9rem;
}
.sites-head input::placeholder { color: var(--placeholder); }
.sites-head button {
  height: 44px;
  padding: 0 1.05rem;
  border-radius: 10px;
  white-space: nowrap;
}
.sites-head__create {
  min-width: 5.1rem;
}
.create {
  display: grid;
  flex: 0 0 auto;
  gap: .55rem;
  padding: .85rem 1.5rem 1rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.create label { color: var(--label); }
.create input { background: var(--paper); border-color: var(--line); color: var(--ink); }
.create .muted { color: var(--muted); }
.create .ghost { color: var(--ink); border-color: var(--line); }
.create__bar { display: flex; align-items: end; gap: .65rem; }
.create__bar label { flex: 1; min-width: 12rem; }
.create__bar .ops { display: flex; gap: .4rem; padding-bottom: 1px; }
.sites-empty {
  padding: 5.5rem 1.6rem;
  text-align: center;
  color: var(--muted);
  font-size: 1.05rem;
  letter-spacing: -.03em;
}
.sites-table {
  width: 100%;
  flex: 0 0 auto;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--panel-shadow);
}
.sites-table th, .sites-table td {
  text-align: left;
  padding: 1rem 1.05rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.sites-table th:first-child, .sites-table td:first-child { padding-left: 1.5rem; }
.sites-table th:last-child, .sites-table td:last-child { padding-right: 1.5rem; }
.sites-table th {
  font-size: .62rem;
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 72%, var(--paper));
}
.sites-table td strong {
  display: block;
  font-size: .96rem;
  font-weight: 720;
  letter-spacing: -.025em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.sites-table .muted { color: var(--muted); }
.sites-table col.col-co { width: 36%; }
.sites-table col.col-progress { width: 26%; }
.sites-table col.col-live { width: 14%; }
.sites-table col.col-ops { width: 24%; }
.live-cell { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.live-link { color: var(--ok); font-weight: 550; text-decoration: none; }
.live-link:hover { text-decoration: underline; }
.text-btn {
  background: transparent;
  color: var(--ink);
  border: 0;
  padding: 0;
  font-weight: 550;
}
.text-btn:hover {
  color: var(--ink);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.sites-table tbody tr { cursor: pointer; }
.sites-table tbody tr:hover td { background: var(--lift); }
.sites-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.sites-table tr:last-child td { border-bottom: 0; }
.sites-table .ops { display: flex; gap: .42rem; justify-content: flex-end; flex-wrap: wrap; }
.sites-table button.danger { color: var(--bad); }
.sites-table button.danger:hover { background: var(--danger-hover); }
.sites-table button.ghost {
  min-height: 34px;
  padding: .32rem .68rem;
  color: var(--ink);
  border-color: var(--line);
  background: color-mix(in srgb, var(--paper) 92%, var(--bg));
}
.sites-table button.ghost:hover {
  background: var(--hover);
  border-color: var(--ghost-hover-line);
  color: var(--ink);
  box-shadow: none;
}
.member-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: flex-end;
  background: rgba(17, 18, 22, .34);
  backdrop-filter: blur(4px);
}
.member-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 1rem;
  width: min(560px, 100vw);
  height: 100vh;
  margin: 0;
  padding: 1rem;
  background: var(--paper);
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  box-shadow: var(--panel-shadow-strong);
  overflow: auto;
}
.member-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.member-panel__head h3 {
  margin: .1rem 0 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  letter-spacing: -.03em;
}
.member-close { flex-shrink: 0; }
.member-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  align-items: end;
  padding: .9rem;
  background: color-mix(in srgb, var(--paper) 72%, var(--bg));
  border: 1px solid var(--line);
  border-radius: 10px;
}
.member-form__title {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  align-items: baseline;
}
.member-form__title strong { font-size: .9rem; }
.role-picker {
  grid-column: 1 / -1;
  display: grid;
  gap: .45rem;
}
.role-picker__label {
  font-size: .72rem;
  font-weight: 550;
  color: var(--label);
  letter-spacing: .02em;
}
.role-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
}
.role-tabs button {
  min-height: 34px;
  padding: .38rem .42rem;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: none;
  font-size: .78rem;
  font-weight: 720;
}
.role-tabs button:hover {
  background: var(--hover);
  color: var(--ink);
  border-color: var(--ghost-hover-line);
  box-shadow: none;
}
.role-tabs button.is-selected {
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  box-shadow: none;
}
.role-current {
  display: grid;
  gap: .42rem;
  padding: .62rem .7rem;
  background: color-mix(in srgb, var(--bg) 66%, var(--paper));
  border: 1px solid var(--line);
  border-radius: 8px;
}
.role-current strong {
  font-size: .78rem;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.35;
}
.role-summary {
  color: var(--muted);
  font-size: .74rem;
  font-style: normal;
  line-height: 1.35;
}
.role-current span {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem;
}
.role-current i {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: .12rem .42rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 62%, var(--paper));
  font-size: .68rem;
  font-style: normal;
  font-weight: 600;
}
.member-submit {
  grid-column: 1 / -1;
  height: 38px;
  white-space: nowrap;
}
.member-list {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  align-self: start;
}
.member-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem 4.5rem;
  gap: .8rem;
  align-items: center;
  padding: .72rem .85rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.member-row:last-child { border-bottom: 0; }
.member-row--head {
  font-size: .62rem;
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 72%, var(--paper));
}
.member-row strong { display: block; font-weight: 720; }
.member-row em {
  display: block;
  margin-top: .08rem;
  color: var(--muted);
  font-style: normal;
}
.member-row select { height: 34px; padding: .2rem .5rem; }
.member-row .role-summary { margin-top: .25rem; }
.member-row__ops { display: flex; justify-content: flex-end; }
.member-empty {
  margin: 0;
  padding: 1.4rem;
  text-align: center;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper) 72%, var(--bg));
  border: 1px dashed var(--line);
  border-radius: 10px;
}
.steps {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 550;
  letter-spacing: .04em;
  color: var(--placeholder);
}
.steps span.on { color: var(--ok); }
.steps span.wait { color: var(--warn); }
.steps i {
  width: 1.4rem;
  height: 1px;
  background: var(--line);
}

.edit {
  overflow: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 42%, var(--sheet)), var(--sheet) 12rem);
  min-width: 0;
}
.edit__head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.65rem 1.05rem;
  background: color-mix(in srgb, var(--sheet) 88%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.edit__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 760;
  letter-spacing: -.045em;
}
.edit__adds {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem;
  flex: 0 0 auto;
  padding-top: .2rem;
}
.need { margin: .28rem 0 0; padding: 0; background: none; color: var(--muted); font-size: .8rem; font-weight: 400; }
.stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .85rem;
  padding: 1.1rem 1.65rem 1.35rem;
}
.stack > button { align-self: start; }
.stack--products {
  display: flex;
  gap: 1.6rem;
  max-width: 82rem;
}
.product-subnav { display: flex; align-items: center; gap: .35rem; padding: .4rem; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--paper) 82%, var(--hover)); }
.product-subnav button { display: inline-flex; align-items: center; gap: .45rem; padding: .52rem .8rem; border: 1px solid transparent; background: transparent; box-shadow: none; color: var(--muted); }
.product-subnav button:hover { color: var(--ink); background: var(--paper); border-color: var(--line); box-shadow: none; }
.product-subnav button.active { color: var(--ink); background: var(--paper); border-color: var(--line); box-shadow: 0 2px 7px color-mix(in srgb, var(--ink) 8%, transparent); }
.product-subnav span { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .32rem; border-radius: 999px; background: var(--hover); color: var(--muted); font-size: .72rem; }
.stack--products > .block { min-width: 0; }
.stack--products > .block + .block { margin-top: 0; padding-top: 0; }
.block { display: flex; flex-direction: column; gap: .7rem; }
.block + .block { margin-top: .45rem; padding-top: .25rem; }
.block__head h3 {
  margin: 0;
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.block__empty { margin: 0; color: var(--muted); font-size: .8rem; }
.field-hint {
  margin: -.35rem 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
  font-weight: 400;
}
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem .75rem; }
.fields > .span-2, .fields > .pic { grid-column: 1 / -1; }
.i18n-box {
  display: grid;
  gap: .72rem;
  padding: .92rem;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--paper));
}
.i18n-box h3 {
  margin: 0;
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.i18n-box .fields {
  gap: .58rem .68rem;
}
/* Bilingual rows: English left, Chinese right, one field per row. */
.bi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .65rem 1rem;
  align-items: start;
}
.bi__head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line);
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.bi__head span + span { color: var(--accent); }
.bi > .bi__note { grid-column: 1 / -1; margin-top: -.3rem; }
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.15rem 1.2rem;
  box-shadow: var(--panel-shadow);
}
.item {
  display: flex;
  flex-direction: column;
  gap: .78rem;
  padding: 1.15rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--panel-shadow);
}
.item:hover,
.panel:hover {
  border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
  box-shadow: var(--panel-shadow-strong);
}
.item__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.item__head strong { font-size: .9rem; font-family: var(--font-display); font-weight: 760; letter-spacing: -.02em; }
.item--category { gap: .9rem; padding: 1rem; }
.category-summary { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.category-summary span { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.item__actions { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; flex-wrap: wrap; }
.item__actions .product-group__add { padding: .34rem .55rem; font-size: .78rem; }
.product-group {
  display: grid;
  gap: .75rem;
  padding: 1.1rem;
  background: color-mix(in srgb, var(--paper) 70%, var(--hover));
  border: 1px solid var(--line);
  border-radius: 12px;
}
.product-group__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .05rem .1rem .35rem; }
.product-group__head > div { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.product-group__head h4 { margin: 0; font-family: var(--font-display); font-size: .92rem; font-weight: 760; letter-spacing: -.02em; }
.product-group__head span { color: var(--muted); font-size: .76rem; }
.product-group__add {
  flex: 0 0 auto;
  padding: .48rem .78rem;
  color: var(--on-ink);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 18%, transparent);
}
.product-group__add:hover { transform: translateY(-1px); }
.product-group__empty { padding: .7rem .1rem .15rem; }
.product-category-filter {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  padding: 0 1rem .2rem;
  scrollbar-width: thin;
}
.product-category-filter button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex: 0 0 auto;
  padding: .48rem .7rem;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: none;
}
.product-category-filter button:hover,
.product-category-filter button.active {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--paper));
}
.product-category-filter small {
  min-width: 1.25rem;
  padding: .08rem .32rem;
  border-radius: 999px;
  background: var(--hover);
  color: var(--muted);
  font-size: .68rem;
  text-align: center;
}
.product-list { display: grid; gap: .6rem; }
.product-row { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; }
.product-row:has(.product-row__detail) { border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.product-row__summary { display: grid; grid-template-columns: 46px minmax(12rem, 1.6fr) minmax(7rem, 1fr) auto 1rem; align-items: center; gap: .8rem; width: 100%; padding: .8rem .95rem; text-align: left; color: var(--ink); background: transparent; border: 0; border-radius: 0; }
.product-row__summary:hover { background: var(--hover); }
.product-row__summary img, .product-row__thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 7px; background: var(--hover); border: 1px solid var(--line); }
.product-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.product-row__sku, .product-row__state { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.product-row__state { padding: .18rem .42rem; border-radius: 999px; background: var(--hover); }
.product-row__chevron { color: var(--muted); font-size: 1rem; transition: transform .16s ease; }
.product-row__summary[aria-expanded="true"] .product-row__chevron { transform: rotate(180deg); }
.product-row__actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; padding: 0 .95rem .8rem; }
.product-row__actions button { padding: .25rem .5rem; font-size: .74rem; }
.sequence-field { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .75rem; white-space: nowrap; }
.sequence-field input { width: 3.6rem; min-width: 0; padding: .28rem .4rem; text-align: center; }
.product-editor-dialog {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 2vw, 1.5rem);
  background: rgba(17, 18, 22, .48);
  backdrop-filter: blur(6px);
}
.product-editor-dialog__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1080px, 100%);
  max-height: min(92vh, 940px);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--panel-shadow-strong);
}
.product-editor-dialog__panel--category { width: min(860px, 100%); }
.product-editor-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem 1rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 94%, var(--bg));
}
.product-editor-dialog__head .brand__kicker,
.product-editor-dialog__head h3,
.product-editor-dialog__head .muted { margin: 0; }
.product-editor-dialog__head h3 {
  margin-top: .18rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: -.035em;
}
.product-editor-dialog__head .muted { margin-top: .18rem; }
.product-editor-dialog__body {
  overflow: auto;
  align-content: start;
  gap: 1rem;
  padding: 1.2rem 1.25rem 1.5rem;
  background: color-mix(in srgb, var(--paper) 78%, var(--bg));
}
.product-editor-dialog__body > .bi {
  gap: .9rem 1.5rem;
  padding: .95rem 1rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.product-editor-dialog__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 94%, var(--bg));
}
.product-editor-dialog__foot > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  min-width: 0;
}
.product-row__detail { padding: 1.25rem 1.35rem 1.4rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 82%, var(--hover)); }
.product-row__detail-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.product-row__detail-head strong { font-size: .8rem; color: var(--muted); }
.product-home-toggle { display: flex; align-items: center; gap: .42rem; }
.product-home-toggle input { width: auto; margin: 0; }
.product-home-toggle--list {
  margin-right: auto;
  color: var(--ink);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
}
.product-row__detail .bi { gap: .9rem 1.5rem; padding: .9rem 1rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.product-detail-editor {
  display: grid;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.product-detail-editor .gallery__head { align-items: flex-start; }
.product-detail-editor .gallery__head .muted { margin: .22rem 0 0; }
.product-detail-editor__section {
  display: grid;
  gap: .8rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--paper) 82%, var(--hover));
}
.product-detail-editor__head,
.product-detail-editor__actions { display: flex; align-items: center; gap: .4rem; }
.product-detail-editor__head { justify-content: space-between; }
.product-detail-editor__head > strong { color: var(--muted); font-size: .78rem; }
.product-detail-editor__actions button { padding: .25rem .5rem; font-size: .72rem; }
.pic.product-detail-editor__image {
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
}
.product-detail-editor__image-controls {
  display: grid;
  gap: .6rem;
  min-width: 0;
}
.product-detail-editor__image .pic__ops {
  margin-top: 0;
  gap: .45rem;
  align-items: center;
}
.product-detail-editor__image .pic__ops button {
  width: auto;
  white-space: nowrap;
}
.product-detail-editor__image .pic__ops .product-detail-editor__upload-primary {
  background: var(--accent);
  color: var(--on-ink);
  border-color: var(--accent);
}
.product-detail-editor__image .pic__ops .product-detail-editor__upload-primary:hover {
  transform: translateY(-1px);
}
.pic.product-detail-editor__image img {
  order: 2;
  width: min(240px, 100%);
  height: auto;
  max-height: 180px;
  object-fit: contain;
  background: var(--paper);
}
.pic { display: grid; grid-template-columns: 72px 1fr; gap: .55rem; align-items: start; }
.pic img, .thumb {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: 9px;
  background: var(--hover);
  border: 1px solid var(--line);
}
.pic--portrait { grid-template-columns: 54px 1fr; }
.pic--portrait img, .pic--portrait .thumb { width: 54px; height: 72px; }
.pic__ops { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .35rem; }
.gallery {
  display: grid;
  gap: .55rem;
  padding-top: .15rem;
}
.gallery__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.gallery__head strong {
  font-size: .82rem;
  color: var(--muted);
}
.gallery .muted { margin: 0; }
.gallery__row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto;
  gap: .55rem;
  align-items: end;
}
.gallery__row img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 9px;
  background: var(--hover);
  border: 1px solid var(--line);
}
.media-card { display: grid; grid-template-columns: 72px 1fr; gap: .55rem; }
.media-card__ops { display: flex; flex-wrap: wrap; gap: .3rem; }
.media-card__ops button { padding: .25rem .5rem; font-size: .74rem; font-weight: 500; }
.picker {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(20, 16, 12, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.picker__panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  max-width: 860px;
  width: 100%;
  max-height: min(80vh, 720px);
  overflow: auto;
  padding: 1rem 1.1rem 1.15rem;
}
.picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .55rem;
  margin-top: .75rem;
}
.picker__tile {
  display: grid;
  gap: .35rem;
  padding: .35rem;
  text-align: left;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.picker__tile img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  background: var(--hover);
  border: 1px solid var(--line);
}

.edit__dock {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: .85rem 1.65rem .95rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.gate { margin: 0; padding: 0; background: none; border: 0; display: grid; gap: .15rem; flex: 1; min-width: 0; }
.gate h3 { margin: 0; font-size: .8rem; font-weight: 550; }
.gate ul { margin: .1rem 0 0; padding-left: 1.05rem; font-size: .78rem; }
.actions { display: flex; gap: .45rem; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.public-host {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-size: .78rem;
  font-weight: 550;
  color: var(--muted);
}
.public-host input {
  width: min(16rem, 42vw);
  height: 32px;
  padding: 0 .55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
}
.public-host__hint {
  flex-basis: 100%;
  margin: -.15rem 0 0;
  font-size: .72rem;
}
.publish-lang {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  font-size: .78rem;
  font-weight: 550;
  color: var(--ink);
  cursor: pointer;
}
.publish-lang input { width: auto; padding: 0; margin: 0; }
.publish-lang select { width: auto; padding: .15rem .35rem; font-size: .78rem; }

.preview {
  display: grid;
  grid-template-rows: auto 1fr;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mat) 82%, var(--paper)), var(--mat));
  min-width: 0;
  border-left: 1px solid var(--line);
}
.preview__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .7rem;
  padding: .55rem .8rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.preview__bar select { width: auto; max-width: 11.5rem; flex: 0 0 auto; height: 32px; padding: 0 .55rem; }
.preview__grow { flex: 1; min-width: .4rem; }
.preview__cluster {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.preview__cluster + .preview__cluster {
  padding-left: .7rem;
  border-left: 1px solid var(--line);
}
.preview__live {
  font-size: .76rem;
  font-weight: 550;
  color: var(--ok);
  text-decoration: none;
  padding: 0 .15rem;
}
.preview__live:hover { text-decoration: underline; }
.preview__cluster .text-btn {
  padding: .28rem .45rem;
  color: var(--muted);
  font-weight: 500;
}
.preview__cluster .text-btn:hover { color: var(--ink); background: transparent; }
.preview__pages {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.preview__pages button {
  border-radius: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  padding: .28rem .65rem;
  font-weight: 500;
}
.preview__pages button:hover { background: var(--hover); color: var(--ink); }
.preview__pages button + button { border-left: 1px solid var(--line); }
.preview__pages button[aria-current="page"] { background: var(--ink); color: var(--on-ink); }
.preview__pages button[aria-current="page"]:hover { background: var(--ink); color: var(--on-ink); }
.preview__stage {
  min-height: 0;
  margin: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--panel-shadow-strong);
  overflow: hidden;
}
.preview iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.preview__empty {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: .84rem;
}
.preview-wide {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #111114;
}
.preview-wide[hidden] { display: none !important; }
.preview-wide__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .4rem .75rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.preview-wide__bar select { width: auto; max-width: 11.5rem; height: 32px; padding: 0 .55rem; }
.preview-wide__bar .preview__pages { margin-left: auto; }
.preview-wide__stage { min-height: 0; position: relative; }
.preview-wide__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.report {
  background:
    radial-gradient(circle at 18% 0, color-mix(in srgb, var(--accent) 7%, transparent), transparent 26rem),
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 50%, var(--bg)), var(--bg) 18rem);
}
.report__inner {
  display: grid;
  gap: 1rem;
  margin: 1.5rem auto 2.4rem;
  padding: 0 1.6rem;
  max-width: 1320px;
}
.report__head {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1.6rem;
  background: color-mix(in srgb, var(--paper) 74%, transparent);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 12px 34px rgba(31, 41, 55, .04);
}
.report__back {
  position: relative;
  padding-left: 1.55rem !important;
}
.report__back::before {
  content: "";
  position: absolute;
  left: .72rem;
  top: 50%;
  width: 7px;
  height: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.report__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 760;
  letter-spacing: -.035em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report__live {
  color: var(--ok);
  font-size: .78rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.report__live:hover { text-decoration: underline; }
.report__head .ghost { color: var(--ink); border-color: var(--line); }
.report__grow { flex: 1; }
.days {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  background: color-mix(in srgb, var(--paper) 85%, var(--bg));
  overflow: hidden;
}
.days button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: .36rem .76rem;
  font-weight: 650;
}
.days button:hover { background: var(--hover); color: var(--ink); }
.days button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(31, 41, 55, .1);
}
.days button[aria-pressed="true"]:hover {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(31, 41, 55, .1);
}
.spine {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.spine li {
  display: grid;
  gap: .28rem;
  align-content: space-between;
  min-height: 8.2rem;
  padding: 1.15rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
}
.spine b {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.1vw, 2.35rem);
  font-weight: 780;
  letter-spacing: -.045em;
  line-height: 1.1;
}
.spine span {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--muted);
}
.spine em {
  align-self: end;
  font-style: normal;
  font-size: .66rem;
  font-weight: 720;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--placeholder);
}
.report-card {
  background: color-mix(in srgb, var(--paper) 96%, var(--bg));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
  min-width: 0;
}
.report-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.2rem .35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.report-card__head h3,
.report-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 760;
  letter-spacing: -.03em;
  text-transform: none;
  color: var(--ink);
}
.report-card__head span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .72rem;
}
.trend-chart {
  padding: .95rem 1.35rem .8rem;
}
.trend-chart svg {
  display: block;
  width: min(100%, 1080px);
  height: auto;
  aspect-ratio: 700 / 220;
  margin: 0 auto;
  overflow: visible;
}
.trend-chart__grid {
  stroke: color-mix(in srgb, var(--line) 62%, transparent);
  stroke-width: 1;
}
.trend-chart__area {
  fill: color-mix(in srgb, var(--accent) 6%, transparent);
  stroke: none;
}
.trend-chart__line {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 82%, var(--muted));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trend-chart__dot {
  fill: var(--paper);
  stroke: color-mix(in srgb, var(--accent) 82%, var(--muted));
  stroke-width: 3;
}
.trend-chart__value {
  fill: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 720;
}
.trend-chart__date {
  fill: var(--muted);
  font-size: 13px;
  font-weight: 620;
}
.report-hint {
  margin: -.35rem 1.35rem 1rem;
  color: var(--muted);
  font-size: .72rem;
}
.report-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr .85fr;
  gap: 1rem;
}
.report-pane {
  padding: 1.2rem 1.2rem 1.25rem;
  min-width: 0;
}
.report-pane h3 {
  margin: 0 0 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.bars { display: grid; gap: .62rem; }
.bar {
  display: grid;
  grid-template-columns: 4.4rem 1fr 2rem;
  align-items: center;
  gap: .65rem;
  font-size: .8rem;
}
.bar__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar--head {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 680;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bar--head .bar__track,
.bar--head span:nth-child(2) {
  height: auto;
  background: transparent;
}
.bar--head span:last-child {
  text-align: right;
}
.bar__track {
  height: 7px;
  background: var(--track);
  border-radius: 999px;
}
.bar__track i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
.bar__n { text-align: right; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.page-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem 5.5rem;
  gap: .7rem;
  align-items: baseline;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
}
.page-row:last-child { border-bottom: 0; }
.page-row .mono { color: var(--muted); }
.page-row span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-row span:nth-child(2),
.page-row span:nth-child(3) {
  text-align: right;
}
.page-row--head {
  padding-top: 0;
  font-size: .62rem;
  font-weight: 680;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip-row { display: grid; gap: .5rem; }
.chip-row span {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: center;
  gap: .55rem;
  padding: .58rem .68rem;
  background: color-mix(in srgb, var(--bg) 72%, var(--paper));
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: .82rem;
}
.chip-row b {
  font-family: var(--font-mono);
  font-size: .9rem;
  font-weight: 760;
  color: var(--ink);
}
.chip-row em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  color: var(--ink);
}
.chip-row__head {
  padding-top: 0 !important;
  padding-bottom: .28rem !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--muted);
}
.chip-row__head b,
.chip-row__head em {
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 680;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.rfq-wrap {
  padding: 1.15rem 1.2rem 1.25rem;
}
.rfq-wrap h3 {
  margin: 0 0 .85rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.report-table {
  width: 100%;
  border-collapse: collapse;
}
.report-table th, .report-table td {
  text-align: left;
  padding: .86rem .85rem;
  border-bottom: 1px solid var(--line);
  font-size: .8rem;
}
.report-table th:first-child, .report-table td:first-child { padding-left: .2rem; }
.report-table th:last-child, .report-table td:last-child { padding-right: .2rem; }
.report-table th {
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 760;
  background: color-mix(in srgb, var(--bg) 70%, var(--paper));
}
.report-empty {
  padding: 1.4rem 1.2rem 2rem;
  color: var(--muted);
  font-size: .84rem;
}
.report-loading {
  display: grid;
  grid-template-columns: minmax(14rem, 22rem) 1fr;
  align-items: center;
  gap: 2rem;
  min-height: 18rem;
  padding: 2rem;
}
.report-loading h3 {
  margin: .3rem 0 .35rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 760;
  letter-spacing: -.04em;
  color: var(--ink);
}
.report-loading .muted {
  margin: 0;
  max-width: 28rem;
}
.report-loading__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
}
.report-loading__grid i {
  display: block;
  min-height: 6.8rem;
  border-radius: 12px;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 64%, transparent), transparent),
    color-mix(in srgb, var(--bg) 78%, var(--paper));
  background-size: 220% 100%, auto;
  border: 1px solid var(--line);
  animation: reportPulse 1.25s ease-in-out infinite;
}
.report-loading__grid i:nth-child(2) { animation-delay: .08s; }
.report-loading__grid i:nth-child(3) { animation-delay: .16s; }
.report-loading__grid i:nth-child(4) { animation-delay: .24s; }
@keyframes reportPulse {
  0% { background-position: 140% 0, 0 0; opacity: .64; }
  50% { opacity: 1; }
  100% { background-position: -80% 0, 0 0; opacity: .64; }
}
.report-note {
  margin: 0;
  padding: .85rem 1rem;
  color: var(--warn);
  font-size: .78rem;
  background: color-mix(in srgb, var(--warn) 8%, var(--paper));
  border: 1px solid var(--chip-warn-line);
  border-radius: 10px;
}

@media (max-width: 1100px) {
  .login__wrap { grid-template-columns: 1fr; gap: 2rem; }
  .login__story { border: 0; }
  .app--studio, .studio-main { grid-template-columns: 1fr; height: auto; }
      .nav { flex-direction: row; flex-wrap: wrap; height: auto; }
      .nav button { width: auto; max-width: 100%; }
  .nav button.is-aux { margin-top: 0; border-top: 0; padding-top: .52rem; }
  .create__bar { flex-wrap: wrap; }
  .sites-head { flex-wrap: wrap; }
  .sites-head__search { width: 100%; }
  .sites-head input { width: 100%; }
  .preview { min-height: 48vh; }
  .stack--products { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .bi { grid-template-columns: 1fr; }
  .bi__head { display: none; }
  .item__head { align-items: flex-start; }
  .item__actions { max-width: 15rem; }
  .product-row__summary { grid-template-columns: 42px minmax(0, 1fr) auto 1rem; }
  .product-row__sku { display: none; }
  .product-editor-dialog { padding: 0; }
  .product-editor-dialog__panel { width: 100%; height: 100vh; max-height: none; border: 0; border-radius: 0; }
  .product-editor-dialog__head,
  .product-editor-dialog__body,
  .product-editor-dialog__foot { padding-left: 1rem; padding-right: 1rem; }
  .product-editor-dialog__foot { align-items: flex-start; flex-wrap: wrap; }
  .product-editor-dialog__foot > div { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .gallery__row { grid-template-columns: 72px minmax(0, 1fr); }
  .gallery__row button { width: max-content; }
  .spine { grid-template-columns: repeat(2, 1fr); gap: .8rem 0; }
  .spine { gap: .75rem; }
  .spine li { min-height: 7.2rem; }
  .report-loading { grid-template-columns: 1fr; }
  .report-loading__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-grid { grid-template-columns: 1fr; }
  .report__head { flex-wrap: wrap; }
  .member-panel {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-left: 0;
  }
  .member-form { grid-template-columns: 1fr; }
  .member-form__title {
    display: grid;
    gap: .15rem;
  }
  .member-row {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .member-row--head { display: none; }
  .member-row__ops { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}