/* HQ styles. Ported from the approved canvas drafts (Main, Jobs, Finance, Work, DesignSystem, Sidebar).
   The brand color lives in one variable: --brand. Everything else derives from it. */

:root {
  --brand: #FF1154;
  --brand-ink: color-mix(in srgb, var(--brand) 78%, #000);
  --brand-fill: color-mix(in srgb, var(--brand) 88%, #000);
  --brand-tint: color-mix(in srgb, var(--brand) 10%, #fff);
  --brand-tint-hover: color-mix(in srgb, var(--brand) 18%, #fff);
  --accent: #00798A;

  --bg: #FDFDFD; --card: #FFFFFF; --border: #ECECEC; --text: #121213; --strong: #000000;
  --body: #46484A; --muted: #696B6F; --soft: #F2F2F3; --hover: #F7F7F8; --row-hover: #FAFAFB;
  --input-border: #E2E2E2; --nav-text: #222222; --nav-hover: #F7F7F8; --nav-bg: #FFFFFF;
  --btn: #1A1A1A; --btn-fg: #FFFFFF; --btn-hover: #353638; --dis-bg: #E9E9E9; --dis-fg: #6F7277;
  --err: #C80000; --err-bg: #FCF2F2; --ok: #006735; --ok-bg: #F2F9F6; --ok-solid: #038144;
  --warn: #AD4F0F; --warn-bg: #FFF9F5; --info: #0E55D7; --info-bg: #F3F6FD;
  --track: #E7E8EA; --track-soft: #F2F2F3; --tog-off: #DDDDDD; --scrim: rgba(18, 18, 19, 0.4);
  --link: #00798A; --hair: #EEEEEE; --dash: #8C8F94;

  --r-btn: 999px; --r-input: 999px; --r-card: 24px; --r-chip: 999px; --r-area: 24px; --r-menu: 20px;
  --r-modal: 24px; --r-sm: 12px; --r-xs: 4px; --r-inner: 16px; --r-toast: 20px;
  --h: 48px; --pad: 28px; --gap: 24px; --row: 14px;

  --font: Sora, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --brand-ink: color-mix(in srgb, var(--brand) 65%, #fff);
  --brand-tint: color-mix(in srgb, var(--brand) 22%, #121213);
  --brand-tint-hover: color-mix(in srgb, var(--brand) 32%, #121213);
  --bg: #121213; --card: #1B1B1C; --border: #2E2F31; --text: #F7F7F8; --strong: #FFFFFF;
  --body: #CFD1D5; --muted: #AFB3B9; --soft: #232425; --hover: #2A2B2C; --row-hover: #222324;
  --input-border: #3A3C3F; --nav-text: #F7F7F8; --nav-hover: #2A2B2C; --nav-bg: #1B1B1C;
  --btn: #F7F7F8; --btn-fg: #121213; --btn-hover: #E7E8EA; --dis-bg: #2A2B2C; --dis-fg: #8C8F94;
  --err: #F08080; --err-bg: #2A1717; --ok: #68B38F; --ok-bg: #16241D; --warn: #FDB489; --warn-bg: #2A1F17;
  --info: #6E99E7; --info-bg: #161D2B; --track: #2E2F31; --track-soft: #2A2B2C; --tog-off: #5A5C60;
  --scrim: rgba(0, 0, 0, 0.6); --link: #60E4ED; --hair: #2A2B2C; --dash: #8C8F94;
  color-scheme: dark;
}
:root[data-radius="soft"] {
  --r-btn: 12px; --r-input: 12px; --r-card: 16px; --r-chip: 8px; --r-area: 12px; --r-menu: 12px;
  --r-modal: 16px; --r-sm: 8px; --r-xs: 4px; --r-inner: 10px; --r-toast: 12px;
}
:root[data-radius="square"] {
  --r-btn: 4px; --r-input: 4px; --r-card: 6px; --r-chip: 4px; --r-area: 4px; --r-menu: 6px;
  --r-modal: 6px; --r-sm: 4px; --r-xs: 2px; --r-inner: 4px; --r-toast: 4px;
}
:root[data-density="compact"] { --h: 40px; --pad: 20px; --gap: 16px; --row: 10px; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); font-size: 16px; line-height: 24px; }
a { color: var(--link); }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shell ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; padding: 16px 40px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--brand); font-weight: 700; font-size: 28px; letter-spacing: -0.04em; line-height: 1; }
.logo-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--brand-fill); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; letter-spacing: 0; }
.top-search { display: flex; align-items: center; height: 48px; flex: 1 1 320px; max-width: 560px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 0 6px 0 22px; gap: 12px; }
.top-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px/20px var(--font); color: var(--text); }
.top-search .sep { width: 1px; height: 24px; background: var(--input-border); }
.top-search .period { font-size: 14px; color: var(--body); white-space: nowrap; padding-right: 4px; }
.top-search button { width: 36px; height: 36px; border-radius: 50%; background: var(--btn); border: 0; color: var(--btn-fg); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; position: relative; }
.avatar { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--soft); color: var(--body); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.avatar:hover { background: var(--hover); }

.shell { display: flex; flex-wrap: wrap; gap: 32px; padding: 16px 40px 64px; align-items: flex-start; width: 100%; max-width: 1440px; margin: 0 auto; flex: 1; }
.side { flex: 0 0 260px; max-width: 100%; position: sticky; top: 16px; }
.nav { width: 100%; background: var(--nav-bg); border: 1px solid var(--border); border-radius: 32px; padding: 24px 16px; display: flex; flex-direction: column; gap: 4px; }
.navlink { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-size: 16px; font-weight: 500; line-height: 24px; color: var(--nav-text); }
.navlink:hover { background: var(--nav-hover); }
.navlink[aria-current="page"] { color: var(--brand-ink); }
.navlink .lbl { flex: 1; }
.navlink .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.navlink:not([aria-current="page"]) .dot { display: none; }
.nav-sep { height: 1px; background: var(--border); margin: 8px 16px; }
.main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.main.tight { gap: 24px; }
.page-head { display: flex; flex-direction: column; gap: 12px; }
.title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
h1.page-title { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.02em; color: var(--strong); }
.lede { font-size: 16px; line-height: 24px; color: var(--body); max-width: 640px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 28px; border-radius: var(--r-btn); border: 1px solid transparent; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; text-decoration: none; background: transparent; color: var(--text); }
.btn:disabled { cursor: not-allowed; background: var(--dis-bg); color: var(--dis-fg); }
.btn-primary { background: var(--btn); color: var(--btn-fg); }
.btn-primary:hover:not(:disabled) { background: var(--btn-hover); }
.btn-tint { background: var(--brand-tint); color: var(--brand-ink); }
.btn-tint:hover:not(:disabled) { background: var(--brand-tint-hover); }
.btn-outline { border-color: var(--input-border); color: var(--text); }
.btn-outline:hover:not(:disabled) { background: var(--hover); }
.btn-ghost { color: var(--link); }
.btn-ghost:hover:not(:disabled) { text-decoration: underline; }
.btn-danger { color: var(--err); }
.btn-danger:hover:not(:disabled) { background: var(--err-bg); }
.btn-outline:disabled, .btn-ghost:disabled, .btn-danger:disabled { background: transparent; }
.btn-outline:disabled { border-color: var(--border); }
.btn-sm { height: 40px; padding: 0 20px; }
.btn.top { height: 40px; padding: 0 20px; }
.btn.is-focus { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
.btn.is-hover.btn-primary { background: var(--btn-hover); }
.btn.is-hover.btn-tint { background: var(--brand-tint-hover); }
.btn.is-hover.btn-outline { background: var(--hover); }
.btn.is-hover.btn-ghost { text-decoration: underline; }
.btn.is-hover.btn-danger { background: var(--err-bg); }
.icon-btn { width: var(--h); height: var(--h); border-radius: 50%; border: 0; background: transparent; color: var(--body); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.icon-btn.solid { background: var(--btn); color: var(--btn-fg); }
.icon-btn.soft { background: var(--soft); color: var(--text); }
.icon-btn.tiny { width: 32px; height: 32px; }
.icon-btn.tiny:hover { background: var(--hover); }
.icon-btn.danger { color: var(--err); }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--r-chip); border: 1px solid var(--input-border); background: var(--card); color: var(--text); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; }
.pill:hover { background: var(--hover); }
.pill[aria-pressed="true"] { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }
.pill .n { font-weight: 500; opacity: 0.8; }
.pill.short { height: 40px; padding: 0 20px; }
.utabs { display: flex; flex-wrap: wrap; gap: 28px; border-bottom: 1px solid var(--border); }
.utab { padding: 12px 0; margin-bottom: -1px; background: transparent; border: 0; border-bottom: 2px solid transparent; font-size: 16px; font-weight: 500; color: var(--body); cursor: pointer; }
.utab:hover { color: var(--text); }
.utab[aria-selected="true"] { border-bottom-color: var(--text); font-weight: 600; color: var(--text); }
.utab .n { margin-left: 8px; font-size: 13px; color: var(--muted); font-weight: 500; }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--pad); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card.flush { padding: 0; gap: 0; overflow: hidden; }
.card.sm-gap { gap: 8px; }
.card-title { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: 0.02em; color: #232326; }
:root[data-theme="dark"] .card-title { color: var(--text); }
.card-title.base { font-size: 16px; letter-spacing: 0; }
.h-section { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; color: var(--strong); }
.sub { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--muted); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cards { display: flex; flex-wrap: wrap; gap: 24px; }
.cards > * { flex: 1 1 300px; }
.cards.s > * { flex-basis: 220px; }
.big { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.02em; color: var(--strong); }
.stat { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; color: var(--strong); }
.stat.pos { color: var(--ok); }
.small { font-size: 13px; line-height: 18px; color: var(--muted); }
.mid { font-size: 14px; line-height: 20px; color: var(--body); }
.link { font-size: 14px; font-weight: 600; color: var(--brand-ink); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.link:hover { text-decoration: underline; }
.bar { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.bar.thin { height: 8px; background: var(--track-soft); }
.meter { display: flex; flex-direction: column; gap: 6px; }
.meter .top { display: flex; justify-content: space-between; font-size: 14px; line-height: 20px; }
.meter .top b { font-weight: 600; }
.meter .top span { font-weight: 500; }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kv .k { font-size: 14px; color: var(--body); }
.kv .v { font-size: 20px; font-weight: 700; }
.kv .v.pos { color: var(--ok); }
.hr { height: 1px; background: var(--border); }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-chip); background: var(--soft); color: var(--body); border: 1px solid transparent; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.chip.s26 { height: 26px; }
.chip-brand { background: var(--brand-tint); color: var(--brand-ink); }
.chip-info { background: var(--info-bg); color: var(--info); }
.chip-ok { background: var(--ok-bg); color: var(--ok); }
.chip-warn { background: var(--warn-bg); color: var(--warn); }
.chip-err { background: var(--err-bg); color: var(--err); }
.chip-soft { background: var(--soft); color: var(--body); }
.chip-outline { background: transparent; color: var(--text); border-color: var(--input-border); }
.chip-plain { background: var(--hover); color: var(--body); border-color: var(--border); }
.badge-num { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand-fill); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.cur { margin-left: 8px; display: inline-block; min-width: 34px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--input-border); font-size: 11px; font-weight: 600; color: var(--body); text-align: center; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field > label, .label { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text); }
.req { color: var(--err); }
.input, .select, .textarea { width: 100%; height: var(--h); padding: 0 20px; border-radius: var(--r-input); border: 1px solid var(--input-border); background: var(--card); color: var(--text); font-size: 14px; letter-spacing: 0.02em; }
.select { padding-right: 36px; cursor: pointer; }
.textarea { height: auto; min-height: 96px; padding: 14px 20px; border-radius: var(--r-area); line-height: 20px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:hover:not(:disabled), .select:hover:not(:disabled) { border-color: var(--dash); }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.input:disabled { background: var(--soft); border-color: var(--border); color: var(--dis-fg); }
.input.is-err { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.help { font-size: 13px; line-height: 18px; color: var(--muted); }
.help.err { color: var(--err); }
.form-row { display: flex; flex-wrap: wrap; gap: 20px; }
.form-row > .field { flex: 1 1 160px; }
.form-row > .field.wide { flex: 2 1 260px; }
.search { display: flex; align-items: center; gap: 10px; height: 48px; flex: 1 1 280px; max-width: 420px; background: var(--card); border: 1px solid var(--input-border); border-radius: 999px; padding: 0 20px; }
.search svg { flex: none; color: var(--muted); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; line-height: 20px; letter-spacing: 0.02em; color: var(--text); }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.select.pillsel { width: auto; height: 48px; padding: 0 40px 0 20px; border-radius: 999px; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.checkbox, .radio { flex: 0 0 22px; width: 22px; height: 22px; padding: 0; border: 1.5px solid var(--input-border); background: var(--card); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--btn-fg); }
.checkbox { border-radius: var(--r-xs); }
.checkbox[aria-checked="true"] { background: var(--btn); border-color: var(--btn); }
.radio { border-radius: 50%; }
.radio[aria-checked="true"] { border-color: var(--btn); }
.radio i { width: 10px; height: 10px; border-radius: 50%; background: var(--btn); }
.checkbox:disabled, .radio:disabled, .switch:disabled { cursor: not-allowed; }
.switch { flex: 0 0 52px; width: 52px; height: 30px; padding: 3px; border-radius: 999px; border: 0; background: var(--tog-off); display: flex; align-items: center; justify-content: flex-start; cursor: pointer; }
.switch i { width: 24px; height: 24px; border-radius: 50%; background: #fff; }
.switch[aria-checked="true"] { background: var(--btn); justify-content: flex-end; }
.switch[aria-checked="true"] i { background: var(--btn-fg); }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; position: relative; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.tbl th { text-align: left; color: var(--muted); font-weight: 600; font-size: 13px; padding: 20px 16px 12px; white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { padding-left: 28px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 28px; }
.tbl td { padding: 14px 16px; border-top: 1px solid var(--hair); vertical-align: middle; }
.tbl tbody tr:hover { background: var(--row-hover); }
.tbl .right { text-align: right; }
.tbl tr.clickable { cursor: pointer; }
.org { display: flex; align-items: center; gap: 14px; }
.org .logo-tile { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: var(--soft); color: var(--nav-text); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.org .nm { font-weight: 600; color: var(--text); }
.org .rl { color: var(--muted); max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-foot { padding: 16px 28px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stage-sel { appearance: none; -webkit-appearance: none; height: 28px; padding: 0 12px; border-radius: var(--r-chip); border: 1px solid transparent; font: 600 12px/16px var(--font); letter-spacing: 0.02em; cursor: pointer; }
.stage-sel option { color: var(--text); background: var(--card); }
.empty-note { padding: 48px 28px; text-align: center; border-top: 1px solid var(--hair); }
.empty-note b { display: block; font-size: 20px; font-weight: 700; color: var(--text); }
.empty-note span { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }

/* ---------- lists ---------- */
.row { display: flex; align-items: center; gap: 16px; padding: 14px 12px; border-radius: var(--r-inner); flex-wrap: wrap; }
.row:hover { background: var(--row-hover); }
.row .circle { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--dash); }
.row .body { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row .body b { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text); }
.row .body span { font-size: 14px; line-height: 20px; color: var(--muted); }
.row .when { min-width: 64px; text-align: right; font-size: 14px; color: var(--body); }
.work-item { display: flex; align-items: flex-start; gap: 20px; padding: 20px 16px; border-radius: var(--r-inner); flex-wrap: wrap; }
.work-item:hover { background: var(--row-hover); }
.tile { flex: 0 0 72px; width: 72px; height: 72px; border-radius: var(--r-inner); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.work-item .mid-col { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.work-item h2 { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; color: var(--strong); }
.work-item .note { font-size: 15px; line-height: 22px; color: var(--body); }
.steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.step { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-chip); border: 1px solid var(--input-border); background: var(--card); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--body); }
.step.done { color: var(--ok); }
.work-item .next { flex: 0 1 240px; display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.work-item .next small { font-size: 13px; font-weight: 600; color: var(--muted); }
.work-item .next span { font-size: 15px; line-height: 22px; color: var(--text); }
.work-item .acts { display: flex; gap: 4px; align-self: flex-start; }
.split { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.split > .grow { flex: 999 1 520px; min-width: 0; }
.split > .side-col { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.acct { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.acct .nm { font-weight: 600; font-size: 14px; }
.acct .am { font-size: 14px; color: var(--body); }

/* ---------- dialog, menu, toast ---------- */
dialog.modal { border: 0; padding: 0; border-radius: var(--r-modal); width: calc(100% - 32px); max-width: 680px; background: var(--card); color: var(--text); max-height: calc(100dvh - 32px); overflow: auto; }
dialog.modal::backdrop { background: var(--scrim); }
.modal form { display: flex; flex-direction: column; gap: 20px; padding: 28px; }
.modal h2 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; color: var(--strong); }
.modal .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.modal .grid .span2 { grid-column: 1 / -1; }
.modal .foot { display: flex; align-items: center; gap: 12px; justify-content: flex-end; flex-wrap: wrap; padding-top: 4px; }
.modal .foot .spacer { margin-right: auto; }
.modal .x { position: absolute; top: 14px; right: 14px; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 4px; }
.menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 260px; max-width: calc(100vw - 32px); padding: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-menu); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); }
.menu .who { padding: 8px 12px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.menu button, .menu a { display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 12px; border: 0; background: transparent; border-radius: var(--r-inner); text-decoration: none; font: 500 14px/20px var(--font); color: var(--text); cursor: pointer; text-align: left; }
.menu button:hover, .menu a:hover { background: var(--hover); }
.menu .danger { color: var(--err); }
.menu .hr { margin: 6px 8px; }
.toasts { position: fixed; left: 16px; right: 16px; bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 100; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--r-toast); background: var(--brand-fill); color: #fff; font-size: 14px; line-height: 20px; max-width: 340px; pointer-events: auto; }
.toast.ok { background: var(--ok-solid); }
.toast.err { background: #C80000; }
.toast svg { flex: 0 0 20px; }
.empty-card { border: 1px solid var(--border); border-radius: var(--r-card); padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.empty-card h3 { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--strong); }
.empty-card p { font-size: 14px; line-height: 21px; color: var(--body); max-width: 320px; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login .card { width: 100%; max-width: 440px; gap: 20px; }
.login h1 { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; color: var(--strong); }

.login .card h1 + .mid { margin-top: 8px; }
.btn-google { width: 100%; }
.btn-primary[type=submit] { width: 100%; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.small-link { font-size: 13px; line-height: 18px; }
.login .foot { text-align: center; }
.login .foot a { font-weight: 600; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
button.navlink { border: 0; background: transparent; font-family: inherit; cursor: pointer; width: 100%; text-align: left; }
@media (max-width: 820px) { .side-out { display: none !important; } }

/* ---------- design system page ---------- */
.main.ds { gap: var(--gap); --input-border: #CFD1D5; }
:root[data-theme="dark"] .main.ds { --input-border: #5A5C60; }
.ds .card { gap: var(--gap); }
.ds .tweaks { display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-start; }
.ds .tweak { display: flex; flex-direction: column; gap: 8px; }
.ds .tweak .label { font-size: 13px; color: var(--muted); font-weight: 600; }
.ds .seg { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--input-border); cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
.ds input[type="color"] { width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.ramp { display: flex; flex-direction: column; gap: 10px; }
.ramp h3, .ds h3.h3 { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--strong); }
.ramp .head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.shades { display: flex; flex-wrap: wrap; gap: 8px; }
.shade { flex: 1 1 84px; min-width: 84px; display: flex; flex-direction: column; gap: 6px; }
.shade .sw { height: 56px; border-radius: var(--r-sm); border: 1px solid var(--border); }
.shade .nm { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text); }
.shade .hex { font-size: 12px; line-height: 16px; font-family: var(--mono); color: var(--muted); }
.type-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; padding: 14px 0; border-top: 1px solid var(--border); }
.type-row .meta { flex: 0 0 200px; font-size: 13px; line-height: 18px; color: var(--muted); }
.type-row .meta b { display: block; font-weight: 600; color: var(--text); }
.type-row .sample { flex: 1 1 320px; min-width: 0; color: var(--strong); }
.radii { display: flex; flex-wrap: wrap; gap: 20px; }
.radii .it { display: flex; flex-direction: column; gap: 8px; width: 84px; font-size: 13px; }
.radii .box { width: 84px; height: 84px; background: var(--brand-tint); border: 1.5px solid var(--brand); }
.spacing-row { display: flex; align-items: center; gap: 16px; font-size: 13px; }
.spacing-row .a { flex: 0 0 72px; font-weight: 600; }
.spacing-row .b { flex: 0 0 48px; color: var(--muted); }
.spacing-row i { height: 12px; max-width: 60%; border-radius: 999px; background: var(--brand); }
.shadows { display: flex; flex-wrap: wrap; gap: 24px; padding: 8px 4px 4px; }
.shadows > div { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.shadows .demo { height: 88px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--border); }
.btn-matrix { overflow-x: auto; position: relative; }
.btn-matrix > div { min-width: 640px; display: flex; flex-direction: column; gap: 16px; }
.btn-matrix .line { display: flex; align-items: center; gap: 16px; }
.btn-matrix .line > b { flex: 0 0 110px; font-size: 13px; font-weight: 600; }
.btn-matrix .cell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.btn-matrix .cell span { font-size: 12px; color: var(--muted); }
.demo-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.demo-grid > * { flex: 1 1 240px; min-width: 0; }
.opts { display: flex; flex-direction: column; gap: var(--row); flex: 1 1 220px; }
.opt { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.opt.dis { opacity: 0.5; }
.opt-sw { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.opt-sw .t { display: flex; flex-direction: column; }
.opt-sw .t b { font-size: 15px; font-weight: 600; }
.opt-sw .t span { font-size: 13px; color: var(--muted); }
.list-row { display: flex; align-items: center; gap: 16px; padding: var(--row) 8px; border-radius: var(--r-inner); }
.list-row .ini { flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--r-inner); background: var(--brand-tint); color: var(--brand-ink); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.list-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 22px; }
.list-row .tx small { font-size: 13px; color: var(--muted); }
.av { border-radius: 50%; background: var(--soft); color: var(--body); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.ds-modal-stage { flex: 1 1 360px; min-width: 0; height: 330px; border-radius: var(--r-card); background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ds-dialog { width: 100%; max-width: 340px; background: var(--card); border-radius: var(--r-modal); padding: 28px; position: relative; display: flex; flex-direction: column; gap: 12px; }
.ds-dialog h3 { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--strong); }
.ds-dialog p { font-size: 14px; line-height: 21px; color: var(--body); }
.ds-dialog .foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 12px; }
.ds .menu.static { position: static; width: 240px; }

/* ---------- phone ---------- */
@media (max-width: 820px) {
  .topbar { padding: 16px; }
  .shell { padding: 8px 16px 112px; gap: 20px; }
  .main { gap: 24px; }
  h1.page-title { font-size: 32px; line-height: 40px; }
  .card { padding: 20px; }
  .top-search { order: 3; flex-basis: 100%; max-width: none; }
  .top-actions { gap: 12px; }
  .side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40; flex: none; width: 100%; }
  .nav { flex-direction: row; justify-content: space-around; gap: 0; border-radius: 20px 20px 0 0; border-width: 1px 0 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .nav-sep { display: none; }
  .navlink { flex: 1; flex-direction: column; justify-content: center; gap: 2px; height: 56px; padding: 0 4px; font-size: 11px; line-height: 14px; border-radius: 16px; min-width: 0; }
  .navlink .lbl { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .navlink .dot { display: none !important; }
  .navlink svg { width: 22px; height: 22px; }
  .toasts { bottom: 96px; }
  .tbl th:first-child, .tbl td:first-child { padding-left: 16px; }
  .tbl th:last-child, .tbl td:last-child { padding-right: 16px; }
  .tbl-foot { padding: 16px; }
  .modal form { padding: 20px; }
  .modal .grid { grid-template-columns: minmax(0, 1fr); }
  .big { font-size: 32px; line-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }