:root {
  --rail: #111111;
  --canvas: #f3efe6;
  --page: #ebe6db;
  --surface: #ffffff;
  --surface-2: #faf8f3;
  --text: #161513;
  --muted: #8a8578;
  --line: #e7e1d4;
  --yellow: #f6e7a3;
  --blue: #d7e6ff;
  --rose: #f3d4e2;
  --mint: #d8efe6;
  --ink: #111111;
  --ok: #2f7a4d;
  --bad: #b42318;
  --shadow: 0 10px 32px rgba(22, 18, 10, 0.06);
  --ease: 160ms ease;
  --r: 22px;
  --r-sm: 14px;
  --sans: "Manrope", "PingFang SC", "Noto Sans SC", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--page); }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--page);
  line-height: 1.45;
  font-feature-settings: "ss01", "tnum";
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--page);
}
.login-wrap {
  width: min(980px, calc(100% - 24px));
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: var(--surface);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.login-stage {
  padding: 48px 40px;
  background: var(--rail);
  color: #f6f1e6;
}
.login-stage .kicker,
.login-card .kicker {
  font-family: var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
  color: #d8c48a;
  margin: 0;
}
.login-stage h1 {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.12;
  font-weight: 650;
  letter-spacing: -0.04em;
  margin: 18px 0 14px;
}
.login-stage p { color: #c9c2b4; line-height: 1.65; max-width: 36ch; }
.login-card { padding: 44px 40px; }
.login-card h2 {
  margin: 0 0 8px;
  font-size: 32px;
  letter-spacing: -0.04em;
}
.login-wrap.slim { grid-template-columns: 1fr; max-width: 460px; }
.lang-row { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 8px; font-size: 12px; }
.lang-row a.is-on { font-weight: 700; }
.auth-tabs { display: flex; gap: 16px; margin: 0 0 20px; }
.auth-tabs a { color: var(--muted); border-bottom: 2px solid transparent; padding-bottom: 6px; }
.auth-tabs a.is-on { color: var(--text); border-color: #111; }
.auth-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 0; font-size: 13px; }
.auth-links a { color: #4a5d8a; text-decoration: underline; text-underline-offset: 3px; }
.btn-row { display: flex; gap: 8px; }
.btn-row .btn-primary, .btn-row .btn-ghost { flex: 1; }
.legal p { line-height: 1.65; color: var(--muted); }
.stack-form, .login-card form { display: grid; gap: 14px; }
label span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="search"], textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: 11px 12px;
  border-radius: 12px;
  transition: border-color var(--ease), background var(--ease);
}
input:hover, textarea:hover, select:hover { border-color: #cfc6b4; }
input:focus, textarea:focus, select:focus {
  border-color: #111;
  background: #fff;
}
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.btn-primary, .btn-ghost {
  border: 0;
  cursor: pointer;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  font-weight: 600;
  transition: transform 80ms ease, background var(--ease), border-color var(--ease);
}
.btn-primary { background: #111; color: #f6f1e6; }
.btn-primary:hover { background: #2a2a2a; }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { background: transparent; border: 1px solid #d8d1c4; }
.btn-ghost:hover { background: #fff; border-color: #111; }
.btn-ghost.compact, .btn-primary.compact { height: 32px; padding: 0 12px; font-size: 12px; }
.hint { color: var(--muted); font-size: 12px; }
.form-error, .banner-ok {
  padding: 10px 12px;
  margin: 0 0 12px;
  border-radius: 12px;
  font-size: 13px;
}
.form-error { background: #fde8e6; color: var(--bad); }
.banner-ok { background: var(--mint); color: var(--ok); }
.landing-cols {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.landing-cols li { display: flex; gap: 12px; color: #e8e0d0; }
.landing-cols em { font-family: var(--mono); font-style: normal; color: #d8c48a; font-size: 11px; }

.app-body { min-height: 100vh; padding: 14px; }
.app-frame {
  display: grid;
  grid-template-columns: 80px 1fr;
  min-height: calc(100vh - 28px);
  background: var(--canvas);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.rail {
  background: var(--rail);
  color: #f3eee3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 12px;
}
.rail-logo {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #f6e7a3;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.rail-logo i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #111;
  transform: rotate(20deg);
}
.rail-nav { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0 10px; flex: 1; }
.rail-item {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  color: #cfc6b4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  letter-spacing: 0.02em;
}
.rail-item svg { width: 20px; height: 20px; }
.rail-item:hover { background: #1d1d1d; color: #fff; }
.rail-item.is-on { background: #fff; color: #111; }
.rail-foot { padding: 8px 10px 4px; width: 100%; }

.canvas { min-width: 0; display: flex; flex-direction: column; }
.canvas-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px 8px;
}
.cmd {
  flex: 1;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 999px;
  padding: 0 14px;
  height: 40px;
  box-shadow: 0 1px 0 rgba(20,16,10,0.04);
}
.cmd svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.cmd input { border: 0; background: transparent; padding: 0; height: 38px; }
.bar-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.crumb-chip {
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--muted);
}
.bar-user { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.lang-pill, .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 650;
}
.avatar.ghost { color: var(--muted); font-size: 14px; }

.main { padding: 10px 22px 36px; max-width: 1240px; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 16px; align-items: flex-start; margin-bottom: 18px; }
.page-head .lead-filters, .page-head .filters { width: 100%; }
.page-head h1 {
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.045em;
  line-height: 1.1;
  font-weight: 700;
}
.sub, .crumb { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.filters { display: flex; gap: 8px; align-items: center; }
.block-title { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }

.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.metric {
  background: var(--yellow);
  padding: 18px 18px 16px;
  border-radius: var(--r);
}
.metric:nth-child(2) { background: var(--blue); }
.metric:nth-child(3) { background: var(--rose); }
.metric:nth-child(4) { background: var(--mint); }
.metric:nth-child(5) { background: var(--yellow); }
.metric:nth-child(6) { background: var(--blue); }
.metric-k { font-size: 13px; color: #5c574c; }
.metric-v {
  font-size: 30px;
  font-weight: 700;
  margin: 10px 0 4px;
  letter-spacing: -0.04em;
}
.metric-d { font-size: 12px; color: #6d685c; }
.metric-d.up { color: var(--ok); }
.metric-d.down { color: var(--bad); }

.grid-2 { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 14px; margin-bottom: 14px; }
.panel {
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: 0 1px 0 rgba(20,16,10,0.03);
}
.panel header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 18px 8px;
}
.panel header h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.panel header span { color: var(--muted); font-size: 12px; }
.chart { width: 100%; height: 180px; color: #111; display: block; }
.mini-stats { display: flex; gap: 24px; padding: 0 18px 16px; font-size: 13px; color: var(--muted); }
.mini-stats b { color: var(--text); }

.hero-dash { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 14px; margin-bottom: 14px; }
.hero-left, .hero-right {
  background: #fff;
  border-radius: var(--r);
  padding: 22px;
}
.hero-left h2, .hero-right h2 {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: -0.03em;
}
.donut-wrap { display: grid; place-items: center; padding: 12px 0 4px; position: relative; }
.donut-wrap svg { width: min(260px, 100%); }
.donut-center {
  position: absolute;
  text-align: center;
}
.donut-center b { display: block; font-size: 34px; letter-spacing: -0.04em; }
.donut-center span { color: var(--muted); font-size: 12px; }
.tx-list { list-style: none; margin: 12px 0 0; padding: 0; }
.tx-list li {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.tx-list li:last-child { border-bottom: 0; }
.tx-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.tx-dot.y { background: var(--yellow); }
.tx-dot.r { background: var(--rose); }
.tx-list time { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.wait-row { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; margin-bottom: 8px; }

.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  background: #fff;
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 14px;
}
.cal-cell {
  min-height: 92px;
  background: var(--surface-2);
  border-radius: 14px;
  padding: 10px;
}
.cal-cell:nth-child(3n) { background: var(--yellow); }
.cal-cell:nth-child(4n) { background: var(--blue); }
.cal-cell:nth-child(5n) { background: var(--rose); }
.cal-cell small { display: block; color: #6d685c; font-size: 11px; }
.cal-cell b { display: block; margin-top: 10px; font-size: 16px; letter-spacing: -0.03em; }

.share-list { list-style: none; margin: 0; padding: 8px 18px 18px; }
.share-list li { display: grid; grid-template-columns: 72px 1fr 48px; gap: 8px; align-items: center; margin: 8px 0; font-size: 13px; }
.share-list i { display: block; height: 8px; background: #efe8d8; border-radius: 99px; position: relative; overflow: hidden; }
.share-list i::after { content: ""; display: block; height: 8px; width: var(--w); background: #111; border-radius: 99px; }
.share-list b { text-align: right; font-family: var(--mono); font-weight: 500; }

.rank { list-style: none; margin: 0; padding: 4px 0 12px; }
.rank li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; padding: 10px 18px; align-items: center; }
.rank li:hover { background: var(--surface-2); }
.rank em { color: var(--muted); font-style: normal; }
.rank strong { display: block; font-size: 13px; }
.rank small { color: var(--muted); }
.stock { display: grid; gap: 8px; padding: 0 18px 18px; }
.stock div { background: var(--surface-2); padding: 16px; border-radius: 16px; }
.stock span { color: var(--muted); font-size: 12px; }
.stock b { display: block; font-size: 26px; margin-top: 6px; letter-spacing: -0.03em; }

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 11px 16px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th {
  color: var(--muted);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
tr:hover td { background: var(--surface-2); }
.mono { font-family: var(--mono); }
.cell-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; background: var(--surface-2); }
.empty { padding: 36px 16px; color: var(--muted); text-align: center; }
.empty.tight { padding: 20px; }

.tool-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tool-card { display: block; min-height: 150px; padding: 20px; color: #161513; border-radius: var(--r); position: relative; overflow: hidden; }
.tool-card h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: -0.03em; }
.tool-card p { margin: 0; color: #5c574c; line-height: 1.5; }
.tool-script { background: var(--yellow); }
.tool-material { background: var(--rose); }
.tool-storyboard { background: var(--blue); }
.tool-mixcut { background: #f4d7b0; }
.tool-oral { background: var(--mint); }
.form-panel { padding: 20px; max-width: 720px; }
.form-panel.wide { max-width: 880px; }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.comp { display: flex; align-items: center; gap: 8px; min-width: 90px; }
.comp i { flex: 1; height: 6px; background: #efe8d8; border-radius: 99px; position: relative; overflow: hidden; }
.comp i::after { content: ""; display: block; height: 6px; width: var(--w); background: #111; }
.comp b { font-family: var(--mono); font-size: 12px; }
.row-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wallet { background: #fff; border-radius: 999px; padding: 8px 12px; font-size: 12px; }
.wallet b { font-weight: 700; }
.hero-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.hero-card { display: block; padding: 24px; min-height: 148px; background: #111; color: #f6f1e6; border-radius: var(--r); }
.hero-card.alt { background: #1d2a36; }
.hero-card em { font-style: normal; font-size: 11px; letter-spacing: 0.12em; color: #d8c48a; }
.hero-card h2 { margin: 10px 0; font-size: 24px; letter-spacing: -0.03em; }
.hero-card p { margin: 0; color: rgba(246,241,230,.78); line-height: 1.5; }
.planner { display: grid; grid-template-columns: 240px 1fr; min-height: 520px; background: #fff; border-radius: var(--r); }
.planner aside { border-right: 1px solid var(--line); padding: 12px; }
.planner h3 { font-size: 12px; color: var(--muted); margin: 16px 0 8px; }
.sess { list-style: none; margin: 10px 0; padding: 0; }
.sess a { display: block; padding: 6px 4px; font-size: 13px; color: var(--muted); }
.sess a.is-on { color: var(--text); font-weight: 700; }
.tight input { margin-bottom: 6px; }
.planner-main { display: flex; flex-direction: column; min-width: 0; }
.planner-log { flex: 1; }
.bubble.think { opacity: 0.75; font-size: 12px; }
.planner-opts { display: flex; gap: 10px; align-items: center; padding: 0 10px; font-size: 12px; }
.planner-form { grid-template-columns: 1fr; }
.planner-form textarea { margin: 0 10px; width: calc(100% - 20px); }
.planner-form .btn-primary { margin: 0 10px 10px; }
.export-bar { padding: 8px 10px; border-top: 1px solid var(--line); }
.examples { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
.result { white-space: pre-wrap; padding: 14px; font-size: 13px; line-height: 1.55; margin: 0; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 10px; padding: 12px 16px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

.workspace-crm .main:has(.inbox) { padding: 0 14px 14px; max-width: none; }
.inbox {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: calc(100vh - 120px);
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
}
.inbox-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.plat-tabs, .pool-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; }
.plat-tabs a, .pool-tabs a, .stage-rail a {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-2);
}
.plat-tabs a.is-on, .pool-tabs a.is-on, .stage-rail a.is-on {
  color: #111;
  background: var(--yellow);
}
.inbox-list ul { list-style: none; margin: 0; padding: 0; overflow: auto; }
.conv { display: block; padding: 12px 14px; border-bottom: 1px solid var(--line); position: relative; }
.conv:hover { background: var(--surface-2); }
.conv strong { display: block; }
.conv small, .conv span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.conv em {
  position: absolute; right: 10px; top: 12px;
  background: #111; color: #fff; font-style: normal;
  min-width: 16px; text-align: center; font-size: 11px; padding: 0 4px; border-radius: 99px;
}
.conv.is-on { background: var(--blue); }
.inbox-thread { display: flex; flex-direction: column; min-width: 0; }
.thread-empty { margin: auto; color: var(--muted); }
.thread-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.thread-head h1 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
.thread-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.bubbles { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 70%; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); }
.bubble.them { align-self: flex-start; }
.bubble.me { align-self: flex-end; background: var(--mint); }
.bubble time { display: block; color: var(--muted); font-size: 11px; margin-top: 6px; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.assist { padding: 8px 10px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.assist > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.assist span { font-size: 11px; color: var(--muted); width: 32px; }
.assist form { margin: 0; }
.chip {
  border: 0;
  background: var(--surface-2);
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 999px;
}
.chip.ghost { display: inline-flex; align-items: center; color: var(--muted); }
.thread-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stage-rail { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.stage-rail b { font-weight: 650; }
.pipe {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: #fff;
  border-radius: var(--r);
}
.pipe a { color: #111; }
.pipe b { margin-left: 6px; font-size: 18px; }
.pipe span { color: var(--muted); }
.event-log { list-style: none; margin: 0; padding: 8px 18px 16px; }
.event-log li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.event-log time { font-family: var(--mono); color: var(--muted); margin-right: 8px; font-size: 11px; }
.event-log em { font-style: normal; color: #8a5a16; margin-right: 8px; }
.event-log li.staff { background: var(--mint); margin: 0 -18px; padding: 8px 18px; }
.acct-pick { border: 1px solid var(--line); padding: 10px 12px; border-radius: 14px; }
.acct-pick legend { font-size: 12px; color: var(--muted); }
.reply-inline { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.reply-inline input[type="text"] { min-width: 160px; }
.inline-stage { display: flex; gap: 6px; align-items: center; }
.ops { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ops form { margin: 0; }
.caption-body { padding: 0 16px 16px; line-height: 1.7; }
.win { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 99px; background: var(--surface-2); }
.win.ok { color: var(--ok); background: var(--mint); }
.win.dead { color: var(--bad); background: #fde8e6; }
.hour-bars { display: flex; align-items: flex-end; gap: 3px; height: 56px; padding: 8px 16px 14px; }
.hour-bars i { flex: 1; background: #111; opacity: 0.7; border-radius: 3px; }
.is-mute-row { opacity: 0.55; }
.lead-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; align-items: center; }
.lead-filters input, .lead-filters select { width: auto; min-width: 120px; background: #fff; }
.batch-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 12px; padding: 10px 12px; background: #111; color: #f6f1e6; border-radius: 16px;
}
.batch-bar select { width: auto; background: #fff; color: var(--text); }
.batch-bar .btn-primary { height: 36px; background: var(--yellow); color: #111; }
.lead-edit summary { cursor: pointer; color: #4a5d8a; font-size: 13px; }
.lead-edit form { margin-top: 8px; min-width: 180px; }
.swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; vertical-align: middle; }
.crumb { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.crumb a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1100px) {
  .metric-row { grid-template-columns: 1fr 1fr; }
  .tool-row { grid-template-columns: 1fr 1fr; }
  .hero-dash { grid-template-columns: 1fr; }
  .cal { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 960px) {
  .app-body { padding: 0; }
  .app-frame, .login-wrap, .grid-2, .metric-row, .tool-row, .inbox, .hero-row, .planner, .split-2, .hero-dash {
    grid-template-columns: 1fr;
  }
  .app-frame { min-height: 100vh; border-radius: 0; }
  .rail {
    flex-direction: row;
    overflow: auto;
    padding: 8px;
    gap: 4px;
  }
  .rail-nav { flex-direction: row; padding: 0; }
  .rail-item { min-width: 58px; min-height: 46px; }
  .rail-logo, .rail-foot, .rail-item span { display: none; }
  .bar-meta { display: none; }
  .cmd { max-width: none; }
  .metric-row { grid-template-columns: 1fr 1fr; }
  .inbox { min-height: auto; }
  .page-head { flex-direction: column; align-items: stretch; }
  .main { padding: 12px 14px 28px; }
  .page-head h1 { font-size: 28px; }
  .cal { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Customer operations: shared neutral surfaces, dense data, clear action hierarchy. */
.workspace-platform { --page:#eef1f3; --canvas:#f6f8f9; --line:#dce2e6; --muted:#596775; --r:12px; --r-sm:8px; }
.workspace-platform .main { max-width:1480px; margin-inline:auto; width:100%; }
.tenant-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:24px 0; border-block:1px solid var(--line); }
.tenant-stats > div { padding:20px 24px; border-right:1px solid var(--line); }
.tenant-stats > div:first-child { padding-left:0; }
.tenant-stats > div:last-child { border-right:0; }
.tenant-stats span { display:block; font-size:13px; color:var(--muted); }
.tenant-stats strong { display:block; font-family:var(--mono); font-size:32px; font-weight:500; margin-top:8px; }
.tenant-create { padding:22px; margin-bottom:24px; }
.tenant-create summary { cursor:pointer; font-size:17px; font-weight:650; min-height:28px; }
.tenant-create summary span { font-size:13px; font-weight:400; color:var(--muted); margin-left:14px; }
.tenant-create-form { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:860px; padding-top:12px; }
.tenant-create-form button { align-self:end; min-height:44px; }
.tenant-filters { display:flex; gap:12px; align-items:end; flex-wrap:wrap; padding:22px 22px 12px; }
.tenant-filters label:first-child { flex:1; min-width:220px; }
.tenant-filters input,.tenant-filters select { width:100%; min-height:44px; }
.tenant-filters button,.tenant-filters a { min-height:44px; }
.tenant-result { padding:0 22px; color:var(--muted); font-size:12px; }
.tenant-state { color:#246548; font-size:12px; }
.tenant-state::before { content:'●'; margin-right:6px; font-size:8px; vertical-align:middle; }
.state-suspended { color:#9c3528; }.state-trial { color:#85620d; }
.workspace-platform td { padding-block:18px; }
.workspace-platform .inline-stage { flex-wrap:nowrap; }
@media(max-width:640px) {
 .tenant-stats > div { padding:14px 8px; }.tenant-stats strong { font-size:25px; }
 .tenant-create { padding:18px; }.tenant-create summary span { display:block; margin:8px 0 0; }
 .tenant-create-form { grid-template-columns:1fr; }.tenant-filters { padding:16px; gap:10px; }
 .tenant-filters label:first-child { flex-basis:100%; min-width:0; }
 .workspace-platform .table-wrap { max-width:100%; overflow-x:auto; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

.integration-notice { padding:12px 16px; border:1px solid var(--line); background:var(--surface); color:#59616c; font-size:13px; border-radius:8px; }
.tenant-create-form input,.tenant-create-form select { display:block; width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }

button:disabled { opacity:.55; cursor:not-allowed; }
.workspace-platform .inline-stage input[type=date] { min-width:140px; width:140px; padding:8px; border:1px solid var(--line); border-radius:8px; }
.account-form { max-width:520px; }
.home-workflows,.integration-list { padding:24px; }
.workflow-row { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:20px; align-items:center; padding:24px 0; border-top:1px solid var(--line); }
.workflow-number { font-family:var(--mono); color:var(--muted); }
.workflow-row h3 { margin:0 0 6px; font-size:17px; }.workflow-row p { margin:0; color:#62666b; font-size:14px; }
.integration-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; padding:24px 0; border-bottom:1px solid var(--line); }
.integration-row:last-child { border:0; }.integration-row h2 { margin:0; font-size:20px; }.integration-row p { color:#62666b; line-height:1.7; }.integration-row strong { font-size:13px; }
.integration-row dl { margin:0; }.integration-row dl div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; font-size:13px; }.integration-row dt { font-family:var(--mono); overflow-wrap:anywhere; }.integration-row dd { margin:0; white-space:nowrap; color:#62666b; }
@media(max-width:640px) { .workflow-row { grid-template-columns:24px minmax(0,1fr); gap:12px; }.workflow-row a { grid-column:2; justify-self:start; }.integration-row { grid-template-columns:1fr; gap:12px; }.home-workflows,.integration-list { padding:18px; } }
@media(max-width:640px) {
 .workspace-social .tenant-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .workspace-social .tenant-stats > div { padding:16px; }
 .workspace-social .tenant-stats > div:nth-child(2) { border-right:0; }
 .workspace-social .tenant-stats strong { white-space:nowrap; }
 .home-workflows > header { display:block; padding:0 0 16px; }
 .home-workflows > header h2 { margin:0 0 8px; }
}
.recovery-action { margin-top:10px; font-size:12px; min-width:90px; }.recovery-action summary { cursor:pointer; padding:8px 0; }.recovery-action[open] { max-width:240px; min-width:180px; }.recovery-action label { white-space:normal; }