@font-face { font-family: Bricolage; src: url('/fonts/bricolage-grotesque.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: Noto; src: url('/fonts/noto-sans-latin.woff2') format('woff2'); font-display: swap; }
:root { color-scheme: light; --ink:#151515; --paper:#f7f7f3; --white:#fff; --blue:#2aabee; --blue-soft:#dff4ff; --line:#d9d9d3; --muted:#6b6b65; --green:#278a57; --green-soft:#e0f4e8; --amber:#b46700; --amber-soft:#fff0cc; --red:#c93643; --red-soft:#ffe7e9; --violet:#7c3aed; }
* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Noto,system-ui,sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.login-page { min-height:100svh; display:grid; place-items:center; padding:24px; background:linear-gradient(115deg,var(--blue) 0 34%,var(--paper) 34%); }
.login-card { width:min(880px,100%); min-height:480px; display:grid; grid-template-columns:1.1fr .9fr; border:2px solid var(--ink); border-radius:28px; overflow:hidden; background:var(--white); box-shadow:12px 12px 0 var(--ink); }
.login-story { background:var(--ink); color:white; padding:46px; display:flex; flex-direction:column; justify-content:space-between; }
.login-story img { width:190px; filter:brightness(0) invert(1); }
.login-story h1 { font:700 clamp(2.5rem,6vw,4.8rem)/.9 Bricolage,sans-serif; letter-spacing:-.06em; margin:20px 0; }
.login-story p { color:#c9c9c4; max-width:30ch; }
.login-form { padding:46px; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.eyebrow { text-transform:uppercase; letter-spacing:.15em; font-size:.7rem; font-weight:800; color:var(--muted); }
label { display:grid; gap:7px; font-size:.8rem; font-weight:700; }
input,select { width:100%; min-height:44px; border:1px solid var(--line); border-radius:10px; background:white; padding:10px 12px; color:var(--ink); }
input:focus,select:focus,button:focus-visible { outline:3px solid color-mix(in srgb,var(--blue) 35%,transparent); outline-offset:2px; }
.primary { border:0; border-radius:10px; background:var(--blue); color:#062535; min-height:46px; font-weight:900; padding:10px 16px; }
.secondary { border:1px solid var(--line); border-radius:9px; background:white; color:var(--ink); min-height:38px; padding:8px 12px; font-weight:700; }
.danger { color:var(--red); }
.feedback { min-height:1.3em; color:var(--red); font-size:.8rem; }
.admin-shell { min-height:100svh; display:grid; grid-template-columns:230px minmax(0,1fr); }
.rail { position:sticky; top:0; height:100svh; padding:22px 16px; background:var(--ink); color:white; display:flex; flex-direction:column; }
.brand { display:flex; align-items:center; gap:10px; padding:4px 8px 24px; font:700 1.25rem Bricolage,sans-serif; }
.brand img { width:36px; height:36px; filter:brightness(0) invert(1); }
.rail nav { display:grid; gap:4px; }
.nav-button { width:100%; border:0; border-radius:9px; padding:11px 12px; background:transparent; color:#c9c9c4; text-align:left; font-weight:700; }
.nav-button:hover,.nav-button.active { color:white; background:#30302e; }
.nav-button.active::before { content:'●'; color:var(--blue); margin-right:9px; }
.rail-foot { margin-top:auto; display:grid; gap:10px; padding:12px 8px 0; color:#9b9b95; font-size:.72rem; }
.rail-foot button { border:0; background:transparent; color:white; padding:0; text-align:left; }
.main { min-width:0; padding:28px clamp(18px,4vw,52px) 60px; }
.main-header { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:28px; }
.main-header h1 { margin:3px 0 0; font:700 clamp(2.1rem,5vw,4.2rem)/.95 Bricolage,sans-serif; letter-spacing:-.055em; }
.main-header p { margin:6px 0 0; color:var(--muted); }
.range { width:120px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:28px; }
.metric { min-height:118px; border:1px solid var(--line); border-radius:14px; background:white; padding:16px; display:flex; flex-direction:column; justify-content:space-between; }
.metric strong { font:700 2.1rem Bricolage,sans-serif; }
.metric small { color:var(--muted); }
.metric.attention { background:var(--amber-soft); border-color:#e4bd6c; }
.metric.good { background:var(--green-soft); border-color:#92cda9; }
.section { margin-top:26px; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:12px; margin-bottom:12px; }
.section h2 { margin:0; font:700 1.35rem Bricolage,sans-serif; }
.section-head p { margin:3px 0 0; color:var(--muted); font-size:.78rem; }
.panel { background:white; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.journey-spine { display:grid; grid-template-columns:repeat(10,minmax(86px,1fr)); overflow-x:auto; padding:18px; }
.stage { position:relative; min-width:86px; padding:0 8px; }
.stage:not(:last-child)::after { content:''; position:absolute; top:17px; left:58%; right:-42%; height:3px; background:var(--line); }
.stage-dot { position:relative; z-index:1; display:grid; place-items:center; width:36px; height:36px; border:3px solid white; border-radius:50%; background:var(--blue); box-shadow:0 0 0 1px var(--ink); font:800 .72rem Bricolage,sans-serif; }
.stage h3 { font-size:.72rem; line-height:1.15; margin:10px 0 4px; }
.stage p { margin:0; color:var(--muted); font-size:.66rem; }
.stage.loss .stage-dot { background:var(--red-soft); color:var(--red); }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:.78rem; }
th { position:sticky; top:0; z-index:1; background:#efefeb; text-align:left; color:#55554f; font-size:.67rem; text-transform:uppercase; letter-spacing:.08em; }
th,td { padding:11px 13px; border-bottom:1px solid #ecece7; vertical-align:top; white-space:nowrap; }
td.wrap { white-space:normal; min-width:220px; max-width:440px; }
tr:last-child td { border-bottom:0; }
.badge { display:inline-flex; align-items:center; min-height:24px; border-radius:999px; padding:3px 8px; background:#ecece8; font-weight:800; font-size:.66rem; }
.badge.good { color:var(--green); background:var(--green-soft); }
.badge.warn { color:var(--amber); background:var(--amber-soft); }
.badge.bad { color:var(--red); background:var(--red-soft); }
.two-column { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.queue-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:16px; }
.queue { padding:14px; border:1px solid var(--line); border-radius:12px; }
.queue strong { display:block; font:700 1.7rem Bricolage,sans-serif; }
.spark { height:150px; display:flex; align-items:end; gap:3px; padding:18px; border-top:1px solid var(--line); }
.spark span { flex:1; min-width:3px; background:var(--blue); border-radius:4px 4px 0 0; }
.empty { padding:36px; text-align:center; color:var(--muted); }
.loading { padding:60px; text-align:center; color:var(--muted); }
@media (max-width:900px) { .metric-grid{grid-template-columns:repeat(2,1fr)} .two-column{grid-template-columns:1fr} .queue-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px) { .admin-shell{grid-template-columns:1fr}.rail{position:static;height:auto;padding:12px}.brand{padding-bottom:10px}.rail nav{display:flex;overflow:auto}.nav-button{white-space:nowrap;width:auto}.rail-foot{display:none}.main{padding:22px 14px 50px}.main-header{align-items:start}.metric-grid{gap:8px}.metric{min-height:100px}.login-card{grid-template-columns:1fr}.login-story{min-height:220px;padding:28px}.login-form{padding:28px}.queue-grid{grid-template-columns:1fr 1fr} }
@media (prefers-reduced-motion:no-preference) { .main>div { animation:arrive .22s ease-out; } @keyframes arrive { from{opacity:.25;transform:translateY(5px)} } }