/* ==========================================================================
   Orbit Performance — Mockup Design System  (Floward visual brand)
   World-class, luxury-editorial enterprise UI. One source of truth.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --teal-deep:#00313C; --teal-mid:#074E59; --teal-500:#1F6B73; --teal-300:#6E9296;
  --cream:#F0E9E0; --cream-100:#FAF6F0; --cream-300:#E6DCCE;
  --rosegold:#F1CEB3; --rose-300:#F8DECB; --rose-500:#D9A78A; --rose-600:#B97D62;
  --canvas:#F4F2EE; --surface:#FFFFFF; --surface-2:#FAFAF9; --sunken:#F0EEE9;
  --border:rgba(0,49,60,0.12); --border-str:rgba(0,49,60,0.22); --hairline:rgba(0,49,60,0.06);
  --t-main:#00313C; --t-muted:#5A7A82; --t-light:#8FA8AE; --t-inv:#F0E9E0;
  --ok:#2E7D6B; --ok-bg:#E6F4F1; --warn:#A0612A; --warn-bg:#FDF3EB;
  --bad:#9B2335; --bad-bg:#FBE9EC; --info:#3E6B7A; --info-bg:#E4ECEF;
  --neutral:#666; --neutral-bg:#F0F0F0;
  --r-card:12px; --r-pill:999px; --r-tag:6px;
  --shadow-sm:0 1px 2px rgba(0,49,60,0.04), 0 1px 3px rgba(0,49,60,0.06);
  --shadow-md:0 4px 14px rgba(0,49,60,0.08); --shadow-lg:0 12px 32px rgba(0,49,60,0.12);
  --display:"Cormorant Garamond", Georgia, serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
}

body { font-family:var(--body); background:var(--canvas); color:var(--t-main);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:var(--teal-mid); text-decoration:none; } a:hover { text-decoration:underline; }
.serif { font-family:var(--display); font-weight:500; }
.mono { font-family:var(--mono); }

.nav { background:var(--teal-deep); height:54px; display:flex; align-items:center;
  padding:0 26px; gap:30px; position:sticky; top:0; z-index:100; }
.nav-logo { font-family:var(--display); color:var(--cream); font-size:20px;
  letter-spacing:0.02em; font-weight:600; }
.nav-logo span { color:var(--rosegold); }
.nav-items { display:flex; gap:2px; }
.nav-item { color:rgba(240,233,224,0.66); font-size:13px; padding:6px 14px;
  border-radius:7px; cursor:pointer; transition:.15s; letter-spacing:.01em; }
.nav-item:hover { color:var(--cream); background:rgba(241,206,179,0.08); }
.nav-item.active { background:rgba(241,206,179,0.16); color:var(--cream); }
.nav-sp { flex:1; }
.nav-tool { color:rgba(240,233,224,0.6); cursor:pointer; font-size:16px; }
.nav-avatar { width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,var(--rosegold),var(--rose-500)); color:var(--teal-deep);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }

.bc { background:var(--surface); border-bottom:1px solid var(--border); }
.bc-in { max-width:1240px; margin:0 auto; padding:0 26px; height:42px; display:flex;
  align-items:center; gap:7px; font-size:13px; }
.bc a { color:var(--t-muted); } .bc .sep { color:var(--t-light); font-size:11px; }
.bc .cur { color:var(--t-main); font-weight:600; }

.phead { background:var(--surface); border-bottom:1px solid var(--border); }
.phead-in { max-width:1240px; margin:0 auto; padding:22px 26px 20px; display:flex;
  align-items:flex-start; justify-content:space-between; gap:24px; }
.ptitle { font-family:var(--display); font-size:30px; font-weight:600; color:var(--teal-deep);
  line-height:1.15; letter-spacing:-0.01em; }
.psub { font-size:13px; color:var(--t-muted); margin-top:6px; display:flex; align-items:center;
  gap:9px; flex-wrap:wrap; }
.phead-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; padding-top:4px; }

.stepper { background:var(--surface); border-bottom:1px solid var(--border); }
.stepper-in { max-width:1240px; margin:0 auto; padding:0 26px; height:46px; display:flex;
  align-items:center; overflow-x:auto; }
.step { display:flex; align-items:center; }
.step-lbl { font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--t-light); padding:0 13px; height:46px; display:flex; align-items:center;
  white-space:nowrap; cursor:pointer; }
.step.done .step-lbl { color:var(--t-muted); }
.step.active .step-lbl { color:var(--teal-deep); font-weight:700;
  border-bottom:2px solid var(--teal-deep); margin-bottom:-1px; }
.step-arr { color:var(--t-light); font-size:10px; padding:0 1px; }

.wrap { max-width:1240px; margin:0 auto; padding:22px 26px 72px; }
.grid { display:grid; gap:16px; }
.g-2 { grid-template-columns:1fr 1fr; } .g-3 { grid-template-columns:repeat(3,1fr); }
.g-4 { grid-template-columns:repeat(4,1fr); } .g-12 { grid-template-columns:repeat(12,1fr); }
.col-3 { grid-column:span 3; } .col-4 { grid-column:span 4; } .col-5 { grid-column:span 5; }
.col-6 { grid-column:span 6; } .col-7 { grid-column:span 7; } .col-8 { grid-column:span 8; }
.mb { margin-bottom:16px; } .mt { margin-top:16px; }

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  box-shadow:var(--shadow-sm); overflow:hidden; }
.card-h { padding:16px 20px 14px; border-bottom:1px solid var(--border); display:flex;
  align-items:center; justify-content:space-between; gap:12px; }
.card-t { font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--t-muted); }
.card-b { padding:20px; }
.card-actions { display:flex; gap:8px; align-items:center; }

.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  box-shadow:var(--shadow-sm); padding:20px 22px; position:relative; overflow:hidden; }
.stat::after { content:""; position:absolute; right:-20px; top:-20px; width:90px; height:90px;
  border-radius:50%; background:radial-gradient(circle, rgba(241,206,179,0.16), transparent 70%); }
.stat-lbl { font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--t-muted); }
.stat-val { font-family:var(--display); font-size:38px; font-weight:600; color:var(--teal-deep);
  line-height:1; margin-top:10px; letter-spacing:-0.01em; }
.stat-val .u { font-size:18px; color:var(--t-muted); margin-left:3px; }
.stat-sub { font-size:11.5px; color:var(--t-muted); margin-top:7px; display:flex;
  align-items:center; gap:6px; }
.trend { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:var(--r-pill); }
.trend.up { color:var(--ok); background:var(--ok-bg); }
.trend.down { color:var(--bad); background:var(--bad-bg); }
.trend.flat { color:var(--t-muted); background:var(--neutral-bg); }

.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:var(--r-pill);
  font-size:11px; font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.b-ok{background:var(--ok-bg);color:var(--ok);} .b-warn{background:var(--warn-bg);color:var(--warn);}
.b-bad{background:var(--bad-bg);color:var(--bad);} .b-info{background:var(--info-bg);color:var(--info);}
.b-draft{background:rgba(0,49,60,0.07);color:var(--teal-deep);}
.b-neutral{background:var(--neutral-bg);color:var(--neutral);}
.b-rose{background:rgba(241,206,179,0.4);color:var(--rose-600);}
.tag { display:inline-flex; align-items:center; background:rgba(0,49,60,0.06); color:var(--teal-deep);
  border-radius:var(--r-tag); padding:2px 9px; font-size:12px; font-weight:500; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border-radius:var(--r-pill); font-size:11.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:9px 22px; cursor:pointer; border:none; transition:.15s;
  white-space:nowrap; font-family:var(--body); }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--teal-deep); color:var(--cream); box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--teal-mid); box-shadow:var(--shadow-md); }
.btn-ghost { background:transparent; color:var(--teal-deep); border:1.5px solid var(--border-str); }
.btn-ghost:hover { background:rgba(0,49,60,0.04); }
.btn-rose { background:var(--rosegold); color:var(--teal-deep); }
.btn-sm { padding:6px 15px; font-size:10.5px; } .btn-icon { padding:8px 12px; }

.frow { display:flex; align-items:baseline; gap:14px; padding:10px 0;
  border-bottom:1px solid var(--hairline); }
.frow:last-child { border-bottom:none; }
.flbl { font-size:12px; font-weight:600; color:var(--t-muted); width:132px; flex-shrink:0; }
.fval { font-size:13.5px; color:var(--t-main); }

.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--t-muted); padding:11px 16px; background:var(--surface-2);
  border-bottom:1px solid var(--border); white-space:nowrap; }
.tbl td { padding:12px 16px; font-size:13px; border-bottom:1px solid var(--hairline);
  color:var(--t-main); }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:rgba(0,49,60,0.018); }
.tbl .num { text-align:right; font-variant-numeric:tabular-nums; }

.bar { height:8px; background:rgba(0,49,60,0.08); border-radius:99px; overflow:hidden; }
.bar > i { display:block; height:100%; border-radius:99px; background:var(--teal-deep); }
.bar.rose > i { background:var(--rosegold); } .bar.warn > i { background:#E0B28C; }
.bar.ok > i { background:var(--ok); } .bar.bad > i { background:var(--bad); }
.mini { height:5px; }

.av { width:34px; height:34px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; }
.av-sm { width:26px; height:26px; font-size:10px; }
.av-lg { width:52px; height:52px; font-size:16px; }
.av-stack { display:flex; } .av-stack .av { margin-left:-8px; border:2px solid var(--surface); }
.av-stack .av:first-child { margin-left:0; }

.ninebox { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; aspect-ratio:1; }
.nb-cell { border-radius:10px; padding:12px; min-height:96px; display:flex; flex-direction:column;
  position:relative; border:1px solid transparent; transition:.15s; cursor:pointer; }
.nb-cell:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.nb-low { background:#FBE9EC; } .nb-mid { background:#FDF3EB; } .nb-high { background:#E6F4F1; }
.nb-star { background:linear-gradient(135deg,#E6F4F1,rgba(241,206,179,0.5)); }
.nb-lbl { font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--t-muted); }
.nb-count { font-family:var(--display); font-size:26px; font-weight:600; color:var(--teal-deep); margin-top:auto; }

.dist-row { display:grid; grid-template-columns:120px 1fr 46px; gap:12px; align-items:center;
  padding:8px 0; }
.dist-lbl { font-size:12px; color:var(--t-muted); font-weight:500; }
.dist-track { height:26px; background:var(--sunken); border-radius:7px; position:relative; overflow:hidden; }
.dist-fill { height:100%; border-radius:7px; background:var(--teal-500); }
.dist-target { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--rose-600); }
.dist-pct { font-family:var(--display); font-size:16px; font-weight:600; text-align:right; color:var(--teal-deep); }

.donut { transform:rotate(-90deg); transform-box:fill-box; transform-origin:center; }
.ring-num { font-family:var(--display); font-size:34px; font-weight:600; color:var(--teal-deep); line-height:1; }

.tl { position:relative; padding-left:26px; }
.tl::before { content:""; position:absolute; left:7px; top:4px; bottom:4px; width:2px;
  background:var(--border); }
.tl-item { position:relative; padding:0 0 18px; }
.tl-item::before { content:""; position:absolute; left:-23px; top:3px; width:12px; height:12px;
  border-radius:50%; background:var(--surface); border:2px solid var(--teal-300); }
.tl-item.hl::before { background:var(--teal-deep); border-color:var(--teal-deep); }

.kan { display:grid; grid-auto-flow:column; grid-auto-columns:300px; gap:16px; overflow-x:auto;
  padding-bottom:8px; }
.kan-col { background:var(--sunken); border-radius:var(--r-card); padding:12px; }
.kan-h { display:flex; align-items:center; justify-content:space-between; padding:4px 6px 12px;
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--t-muted); }
.kan-card { background:var(--surface); border:1px solid var(--border); border-radius:9px;
  padding:13px; margin-bottom:10px; box-shadow:var(--shadow-sm); cursor:pointer; transition:.15s; }
.kan-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }

.wz { display:flex; gap:10px; }
.wz-step { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:10px; }
.wz-num { width:28px; height:28px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.wz-step.done .wz-num { background:var(--teal-deep); color:var(--cream); }
.wz-step.active .wz-num { background:var(--rosegold); color:var(--teal-deep); }
.wz-step .wz-num { background:var(--sunken); color:var(--t-light); }

.report { background:#fff; max-width:820px; margin:24px auto; box-shadow:var(--shadow-lg);
  padding:54px 60px; }
.report h1 { font-family:var(--display); font-size:30px; font-weight:600; color:var(--teal-deep); }
.report .meta { color:var(--t-muted); font-size:12px; border-bottom:2px solid var(--teal-deep);
  padding-bottom:14px; margin-bottom:24px; }
.report h3 { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--rose-600); margin:24px 0 10px; }

.foot { background:var(--surface); border-top:1px solid var(--border); position:sticky; bottom:0;
  z-index:10; padding:13px 26px; }
.foot-in { max-width:1240px; margin:0 auto; display:flex; align-items:center; gap:10px; }
.foot-info { margin-left:auto; font-size:11.5px; color:var(--t-light); }

.flex { display:flex; } .between { justify-content:space-between; } .center { align-items:center; }
.gap { gap:12px; } .gap-sm { gap:6px; } .wrap-x { flex-wrap:wrap; }
.muted { color:var(--t-muted); } .light { color:var(--t-light); }
.right { text-align:right; } .grow { flex:1; }
.fs-11{font-size:11px;} .fs-12{font-size:12px;} .fs-13{font-size:13px;}
.fw-6{font-weight:600;} .fw-7{font-weight:700;}
.eyebrow { font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--t-muted); }

.dark { background:var(--teal-deep); color:var(--cream); }
.dark .card, .dark .stat { background:rgba(255,255,255,0.04); border-color:rgba(240,233,224,0.12);
  box-shadow:none; }
.dark .stat-val, .dark .ptitle, .dark .card-t, .dark .stat-lbl { color:var(--cream); }
.dark .muted, .dark .stat-sub { color:rgba(240,233,224,0.6); }

.gallery { max-width:1240px; margin:0 auto; padding:40px 26px 80px; }
.gx { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; }
.gx-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:.18s; text-decoration:none; color:inherit; display:block; }
.gx-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); text-decoration:none; }
.gx-thumb { height:150px; background:var(--teal-deep); display:flex; align-items:center;
  justify-content:center; position:relative; overflow:hidden; }
.gx-body { padding:16px 18px; }
.gx-title { font-family:var(--display); font-size:19px; font-weight:600; color:var(--teal-deep); }
.gx-desc { font-size:12.5px; color:var(--t-muted); margin-top:4px; line-height:1.45; }