/* Failpilot — shared design system. Inter (self-hosted, OFL). Dark default, light supported. */
@font-face{font-family:"Inter";src:url("/assets/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{--font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --accent:#7c7dff;--accent2:#a78bfa;--ok:#34d399;--warn:#fbbf24;--bad:#f87171;--r:16px;--ease:cubic-bezier(.2,.8,.2,1)}
[data-theme=dark]{--bg:#07080b;--bg2:#0c0e13;--card:rgba(255,255,255,.035);--solid:#0f1117;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.15);--text:#f3f4f6;--muted:#8d92a0;--faint:#5c616e;--input:rgba(255,255,255,.045);--inputh:rgba(255,255,255,.075);--glow1:rgba(99,102,241,.30);--glow2:rgba(16,185,129,.12);--shadow:0 1px 0 rgba(255,255,255,.05) inset,0 24px 60px -28px rgba(0,0,0,.85);--spot:rgba(124,125,255,.10);color-scheme:dark}
[data-theme=light]{--bg:#f7f7fa;--bg2:#fff;--card:#fff;--solid:#fff;--line:rgba(15,18,30,.09);--line2:rgba(15,18,30,.17);--text:#0e1120;--muted:#5f6577;--faint:#98a0ae;--input:#f3f4f8;--inputh:#eceef4;--glow1:rgba(99,102,241,.17);--glow2:rgba(16,185,129,.09);--shadow:0 1px 2px rgba(15,18,30,.04),0 22px 48px -26px rgba(30,35,80,.25);--spot:rgba(99,102,241,.07);color-scheme:light}
*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;min-height:100dvh;overflow-x:clip}
h1,h2,h3,h4{margin:0;letter-spacing:-.03em;font-weight:650;line-height:1.1}p{margin:0}a{color:inherit}button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}.muted{color:var(--muted)}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.glow{position:fixed;inset:0 0 auto 0;height:720px;pointer-events:none;z-index:0;background:radial-gradient(55% 60% at 50% -12%,var(--glow1),transparent 70%),radial-gradient(35% 40% at 92% 4%,var(--glow2),transparent 70%);mask-image:linear-gradient(#000 45%,transparent)}
.grid-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(60% 60% at 50% 0%,#000,transparent 75%);opacity:.5}
.grad{background:linear-gradient(100deg,#c4b5fd 0%,#818cf8 45%,#34d399 110%);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme=light] .grad{background-image:linear-gradient(100deg,#7c3aed 0%,#4f46e5 50%,#059669 115%)}

/* nav */
.nav{position:sticky;top:0;z-index:30;backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:62px;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:17px;letter-spacing:-.03em;text-decoration:none}
.brand svg{border-radius:9px}
.links{display:flex;gap:26px;font-size:14px;color:var(--muted)}.links a{text-decoration:none;transition:color .2s}.links a:hover{color:var(--text)}
.nav-r{display:flex;gap:8px;align-items:center}
@media(max-width:760px){.links{display:none}}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:var(--card);cursor:pointer;color:var(--muted);transition:.2s var(--ease)}.icon-btn:hover{color:var(--text);border-color:var(--line2)}
[data-theme=dark] .i-moon,[data-theme=light] .i-sun{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--text);font-weight:560;font-size:14.5px;text-decoration:none;cursor:pointer;transition:transform .15s var(--ease),background .2s,border-color .2s,box-shadow .25s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.btn:hover{border-color:var(--line2);background:var(--inputh)}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.6;cursor:default}
.btn-sm{height:34px;padding:0 13px;font-size:13.5px;border-radius:9px}.btn-lg{height:52px;padding:0 24px;font-size:16px;border-radius:13px}
.btn-primary{border:0;color:#fff;background:linear-gradient(180deg,#8f90ff,#6366f1);box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.35) inset,0 10px 28px -8px rgba(99,102,241,.75)}
.btn-primary:hover{background:linear-gradient(180deg,#9c9dff,#6d70f5);box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 1px 0 rgba(255,255,255,.4) inset,0 14px 34px -8px rgba(99,102,241,.9)}
.btn-ghost{background:transparent}.btn-danger:hover{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 50%,transparent)}

/* forms */
input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{width:100%;min-width:0;height:46px;padding:0 14px;border-radius:11px;border:1px solid var(--line);background:var(--input);outline:none;font-size:16px;transition:border-color .2s,background .2s,box-shadow .2s}
textarea{height:auto;padding:12px 14px;line-height:1.55;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--faint)}input:hover,select:hover,textarea:hover{background:var(--inputh)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent);background:var(--input)}
label{font-size:13px;font-weight:500;color:var(--muted)}.field{display:grid;gap:7px;margin-bottom:16px}
.select{position:relative}.select select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer}.select::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.select option{background:var(--solid);color:var(--text)}

/* cards */
.card{position:relative;border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);overflow:hidden;isolation:isolate}
.card.spot::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),var(--spot),transparent 60%)}.card.spot:hover::before{opacity:1}
.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:13px;color:var(--muted)}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.tag{display:inline-block;font:600 10px/1 var(--font);letter-spacing:.06em;padding:3px 6px;border-radius:5px;color:#fff;background:linear-gradient(135deg,#818cf8,#a78bfa)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:550;border:1px solid var(--line2);color:var(--muted);white-space:nowrap}
.chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent)}
.chip.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 9%,transparent)}
.chip.acc{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.ticks li{display:flex;gap:10px;align-items:flex-start}.ticks li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:color-mix(in srgb,var(--ok) 18%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-4.9' fill='none' stroke='%2334d399' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.ticks.no li::before{background:color-mix(in srgb,var(--faint) 20%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5l5 5m0-5l-5 5' fill='none' stroke='%238d92a0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,16px);z-index:80;padding:11px 18px;border-radius:12px;background:var(--solid);border:1px solid var(--line2);box-shadow:0 14px 40px -10px rgba(0,0,0,.6);font-size:14px;opacity:0;pointer-events:none;transition:.35s var(--ease);max-width:calc(100vw - 32px)}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}