/* Private workbench: operational counterpart to the public Stripe x Arc visual system. */
:root {
  --page: #090a0f;
  --page-strong: #11131b;
  --panel: #151821;
  --panel-soft: #10121a;
  --ink: #f5f5f7;
  --text: #d5d6df;
  --muted: #9698a8;
  --line: #30333f;
  --line-strong: #505462;
  --teal: #c9f36a;
  --teal-ink: #dfffa1;
  --teal-soft: #263224;
  --green: #87d77b;
  --green-soft: #193525;
  --amber: #ffc36b;
  --amber-soft: #3a2a15;
  --rose: #ff9eab;
  --rose-soft: #3d202b;
  --violet: #aaa5ff;
  --violet-soft: #292653;
  --shadow: 0 22px 58px rgba(0, 0, 0, 0.3);
  --focus: 0 0 0 3px rgba(201, 243, 106, 0.35);
  --radius: 8px;
}

body.workbench-page { color: var(--text); background: var(--page); opacity: 1; animation: none; }
body.workbench-page::before { display: none; }
body.workbench-page::after { position: fixed; top: 0; right: 8vw; z-index: -1; width: 1px; height: 100vh; content: ""; background: rgba(255, 255, 255, 0.055); }
.app { width: min(1500px, calc(100% - 56px)); padding: 24px 0 48px; }
.workbench-topbar { position: relative; min-height: 58px; margin: 0 0 40px; padding: 0 0 17px; border-bottom: 1px solid var(--line); }
.workbench-topbar::after { position: absolute; bottom: -1px; left: 0; width: 92px; height: 2px; content: ""; background: var(--teal); }
.workbench-brand { color: #d8d9e2; font: 800 11px/1 var(--display); letter-spacing: 0.11em; }
.workbench-brand::before { width: 29px; height: 29px; color: #11131b; border: 0; border-radius: 50%; background: var(--teal); font-size: 9px; }
.workbench-back { min-height: 39px; padding: 0 13px; color: #e9e9ed; border: 1px solid var(--line-strong); border-radius: 4px; background: #11131b; font-size: 12px; }
.workbench-back:hover { color: #11131b; border-color: var(--teal); background: var(--teal); transform: none; }

.hero { align-items: start; gap: 24px; margin-bottom: 29px; }
.hero-copy { max-width: 730px; }
.eyebrow { color: var(--teal); font: 800 11px/1.3 var(--display); letter-spacing: 0.11em; }
.eyebrow::before { width: 23px; height: 1px; border-radius: 0; background: currentColor; box-shadow: none; }
.hero-copy h1 { color: #fff; font-family: var(--display); font-size: clamp(35px, 4vw, 57px); font-weight: 750; letter-spacing: -0.045em; }
.hero-copy p { color: #a8aab8; }
.updated { min-width: 216px; padding: 15px 17px; border-color: var(--line); border-radius: 6px; background: #151821; box-shadow: none; }
.updated span { color: var(--muted); }
.updated strong { color: #f8f8fb; }

.stats { gap: 10px; margin-bottom: 19px; }
.stat-card { min-height: 117px; padding: 17px; border-color: var(--line); border-radius: 6px; background: #151821; box-shadow: none; transform: none; opacity: 1; animation: none; transition: border-color 180ms ease, transform 180ms ease, background 180ms ease; }
.stat-card:hover { border-color: #5a5f6d; background: #1a1e28; transform: translateY(-2px); }
.stat-card span, .stat-card em { color: var(--muted); }
.stat-card strong { color: #f8f8fb; font: 750 30px/1 var(--display); letter-spacing: -0.04em; }

.summary-grid { gap: 10px; margin-bottom: 20px; }
.summary-panel { padding: 20px; border-color: var(--line); border-radius: 7px; background: #151821; box-shadow: none; }
.summary-head h2, .detail-title h2, .section h3, .sidebar-head h2 { color: #f6f6f8; }
.summary-head p, .sidebar-head p, .detail-title p { color: var(--muted); }
.status-pill { border-radius: 999px; font-size: 11px; }
.status-online { color: #c8f7b5; background: #183725; }
.status-dev, .status-test { color: #ffd486; background: #3a2b17; }
.status-talk { color: #ffb5bd; background: #3a202b; }
.status-due, .status-iteration { color: #c0bdff; background: #2a2856; }
.finance-metrics { gap: 8px; }
.finance-metric, .stage-item, .info-item, .client-finance-item, .payment-total-item { border-color: #343844; border-radius: 5px; background: #10131b; }
.finance-metric strong, .stage-item strong, .info-item .value, .client-finance-item strong, .payment-total-item strong { color: #f1f2f5; }
.finance-metric span, .finance-metric small, .stage-item span, .label, .client-finance-item span, .payment-total-item span { color: var(--muted); }
button.finance-metric:hover { border-color: var(--teal); background: #1b2820; box-shadow: none; transform: none; }
.finance-metric.is-due, .client-finance-item.is-due { border-color: #6d542a; background: #312514; }
.finance-metric.is-due strong, .client-finance-item.is-due strong, .due-money, .payment-row strong { color: var(--amber); }
.due-item, .stage-item { border-color: #343844; border-radius: 5px; background: #10131b; }
.due-item strong, .stage-item strong { color: #e9eaf0; }
.due-item span, .stage-item span { color: var(--muted); }
.stage-count { color: #151821; background: var(--teal); }

.workspace { min-height: 670px; border-color: var(--line); border-radius: 8px; background: #151821; box-shadow: var(--shadow); }
.sidebar { border-right-color: var(--line); background: #11141c; }
.sidebar-head { padding: 22px 19px 16px; border-bottom-color: var(--line); }
.sidebar-head h2 { font-size: 18px; }
.client-list { gap: 6px; padding: 12px; }
.client-tab { min-height: 76px; color: var(--text); border: 1px solid transparent; border-radius: 5px; background: transparent; }
.client-tab:hover { border-color: #3b3f4d; background: #191d27; transform: none; }
.client-tab.is-active { border-color: rgba(201, 243, 106, 0.62); background: #202c20; box-shadow: none; }
.client-tab.is-active::before { top: 16px; bottom: 16px; width: 3px; border-radius: 0; background: var(--teal); }
.tab-title { color: #f2f2f5; }
.tab-meta { color: var(--muted); }
.detail { background: #0d1017; }
.detail-inner { padding: 30px; }
.detail-frame { background: transparent; animation: none; }
.detail-head { padding-bottom: 23px; border-bottom-color: var(--line); }
.detail-title h2 { font-size: 29px; font-family: var(--display); letter-spacing: -0.035em; }
.stage-box { padding: 15px 16px; border-color: #3b414d; border-radius: 5px; background: #151a23; }
.stage-box span { color: var(--muted); }
.stage-box strong { color: var(--teal); }
.progress { gap: 6px; margin: 22px 0 25px; }
.step { padding: 10px 8px; color: #858896; border-color: #30343f; border-radius: 4px; background: #10131b; }
.step.is-done { color: #c7efb6; border-color: #345941; background: #193525; }
.step.is-current { color: #1b201a; border-color: var(--teal); background: var(--teal); box-shadow: none; }
.content-grid { gap: 12px; }
.section { padding: 20px; border-color: #343844; border-radius: 6px; background: #151821; }
.section h3 { margin-bottom: 16px; }
.info-grid { gap: 8px; }
.info-item { padding: 13px; }
.value { color: #eef0f3; }
.link-btn, .link-disabled { border-color: #3e4351; border-radius: 5px; }
.link-btn { color: #e7f4d0; background: #233024; }
.link-btn:hover { color: #141814; border-color: var(--teal); background: var(--teal); box-shadow: none; transform: none; }
.link-disabled { color: #818491; background: #10131b; }
.notice { color: #c9cad2; border-color: #5b4828; border-left-width: 1px; background: #242016; }

.modal-backdrop { background: rgba(5, 6, 10, 0.75); backdrop-filter: blur(10px); }
.modal { color: var(--text); border-color: #484c59; border-radius: 8px; background: #151821; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55); }
.modal-head { border-bottom-color: var(--line); background: #10131b; }
.modal-head h2, .payment-row h3 { color: #f8f8fb; }
.modal-head p, .payment-row p { color: var(--muted); }
.modal-close { color: #fff; border-color: #454a58; border-radius: 50%; background: #191d27; }
.modal-close:hover { color: #131713; background: var(--teal); transform: rotate(90deg); }
.payment-row { border-color: #383d49; border-radius: 5px; background: #10131b; }
.payment-tags span { color: #d7f5a3; background: #263224; }

.workbench-gate { color: #f8f8fb; background: #090a0f; }
.workbench-gate::before { position: fixed; top: -215px; right: -180px; width: 570px; height: 570px; content: ""; border: 84px solid var(--blue); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(-26deg); }
.workbench-gate::after { position: fixed; right: 8vw; width: 1px; height: 100vh; content: ""; background: rgba(255, 255, 255, 0.075); }
.gate-card { position: relative; z-index: 1; width: min(100%, 466px); padding: 42px; border-color: #3d424f; border-radius: 8px; background: #151821; box-shadow: 22px 24px 0 #26263d; }
.gate-mark { width: 44px; height: 44px; color: #10131b; border: 0; border-radius: 50%; background: var(--teal); }
.gate-card p:first-of-type { margin: 28px 0 8px; color: var(--teal); font: 800 11px/1.2 var(--display); letter-spacing: 0.12em; }
.gate-card h1 { color: #fff; font-family: var(--display); font-size: 39px; font-weight: 750; letter-spacing: -0.04em; }
.gate-card > p:last-of-type { color: #b3b5c0; }
.gate-form label { color: #e1e2e8; }
.gate-form input { border-color: #484d5c; border-radius: 5px; background: #0d1017; }
.gate-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(201, 243, 106, 0.16); }
.gate-form button { color: #141814; border: 0; border-radius: 5px; background: var(--teal); }
.gate-form button:hover { background: #dcff8e; }
.gate-error { color: #ffabb7; }

@media (max-width: 920px) {
  .app { width: min(100% - 34px, 1500px); }
  .workbench-topbar { align-items: flex-start; flex-direction: column; margin-bottom: 30px; }
  .workbench-back { width: 100%; justify-content: center; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary-grid { grid-template-columns: 1fr; }
  .workspace { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .client-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .app { width: min(100% - 24px, 1500px); padding-top: 16px; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: 39px; }
  .updated { min-width: 0; }
  .stats, .client-list, .finance-metrics, .info-grid, .progress, .client-finance, .payment-total, .content-grid { grid-template-columns: 1fr; }
  .stat-card { min-height: 94px; }
  .stat-card strong { font-size: 27px; }
  .detail-inner { padding: 18px; }
  .detail-head { grid-template-columns: 1fr; }
  .detail-title h2 { font-size: 25px; }
  .stage-box { min-width: 0; }
  .section, .summary-panel { padding: 16px; }
  .gate-card { padding: 29px 22px; box-shadow: 12px 14px 0 #26263d; }
  .gate-card h1 { font-size: 34px; }
  .workbench-gate::before { top: auto; right: -176px; bottom: -182px; width: 445px; height: 445px; border-width: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}