/* Akroly app UI. Design tokens shared with akroly.com (master brand: indigo/violet + electric teal). */
@font-face { font-family: "Inter Tight"; src: url(/fonts/inter-tight-var-latin.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
:root {
  --bg:#07070d; --bg2:#0b0b15; --card:#10101c; --card2:#161627; --ink:#eceef7; --muted:#9ea3bc; --dim:#868ba6;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --brand-700:#3b2bb8; --brand-600:#4f37e6; --brand:#6d5dfc; --brand-400:#8f82ff; --brand-300:#b4abff;
  --teal:#19e3c8; --teal-300:#7cf3e2;
  --ok:#34d399; --warn:#fbbf24; --bad:#fb7185; --info:#7fb0ff;
  /* product accents: only on product badges and connect buttons */
  --p-cf:#f6821f; --p-cf-text:#ffa45a; --p-m365:#2f7cf6; --p-m365-text:#7fb0ff;
  --radius:14px;
  color-scheme: dark;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font:15px/1.55 "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:radial-gradient(900px 500px at 10% -10%, rgba(79,55,230,.18), transparent 60%), radial-gradient(700px 400px at 100% 0, rgba(25,227,200,.06), transparent 60%), var(--bg); background-attachment:fixed; min-height:100vh; -webkit-font-smoothing:antialiased; }
a { color:var(--brand-300); }
:focus-visible { outline:2px solid var(--teal); outline-offset:2px; border-radius:8px; }
.top { display:flex; align-items:center; gap:24px; padding:12px 24px; background:rgba(7,7,13,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.brand { font-weight:700; font-size:18px; color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:10px; }
.brand img { height:22px; width:auto; }
.pbadge { font-size:12px; font-weight:650; padding:3px 9px; border-radius:99px; border:1px solid var(--line2); color:var(--muted); background:rgba(255,255,255,.04); }
.pbadge.cf { color:var(--p-cf-text); border-color:rgba(246,130,31,.4); background:rgba(246,130,31,.1); }
.pbadge.m365 { color:var(--p-m365-text); border-color:rgba(47,124,246,.45); background:rgba(47,124,246,.1); }
nav { display:flex; gap:4px; } .right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.brand, .tab, .switch, #user-email { white-space:nowrap; }
.tab { background:none; border:0; padding:8px 12px; border-radius:8px; cursor:pointer; color:var(--muted); font:inherit; }
.tab:hover { background:rgba(255,255,255,.05); color:var(--ink); }
.tab.active { background:rgba(109,93,252,.16); color:var(--ink); box-shadow:inset 0 0 0 1px rgba(109,93,252,.35); }
main { max-width:1100px; margin:24px auto; padding:0 24px; }
h1,h2,h3 { letter-spacing:-.015em; }
.card { background:linear-gradient(180deg, var(--card), var(--bg2)); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:16px; }
.grid { display:grid; grid-template-columns: 260px 1fr; gap:16px; }
.score { font-size:64px; font-weight:800; line-height:1; } .score.good{color:var(--ok)} .score.mid{color:var(--warn)} .score.bad{color:var(--bad)}
.muted { color:var(--muted); } .center { text-align:center; } .lead { font-size:16px; }
.btn { display:inline-block; border:1px solid var(--line2); background:rgba(255,255,255,.04); padding:8px 14px; border-radius:10px; cursor:pointer; font:inherit; color:var(--ink); text-decoration:none; transition:background .15s, border-color .15s; }
.btn:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.26); }
.btn.primary { background:linear-gradient(180deg,#6a55f5,var(--brand-600)); border-color:#7b68ff; color:#fff; font-weight:600; box-shadow:0 6px 22px -8px rgba(109,93,252,.7); }
.btn.primary:hover { background:linear-gradient(180deg,#7663ff,#5a43ee); }
.btn.ghost { background:transparent; } .btn.small { padding:4px 10px; font-size:13px; } .btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.cf { background:linear-gradient(180deg,#ff9a3c,var(--p-cf)); border-color:#ff9a3c; color:#1a0d00; font-weight:650; padding:12px 20px; font-size:16px; }
.rec { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:14px 0; border-top:1px solid var(--line); }
.rec:first-child { border-top:0; } .rec h3 { margin:0 0 4px; font-size:16px; }
.pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:650; background:rgba(255,255,255,.07); color:var(--muted); }
.pill.critical,.pill.high,.pill.failed,.pill.blocked { background:rgba(244,63,94,.15); color:var(--bad); }
.pill.medium,.pill.proposed,.pill.approved,.pill.applying { background:rgba(251,191,36,.14); color:var(--warn); }
.pill.low,.pill.info { background:rgba(96,165,250,.14); color:var(--info); }
.pill.applied,.pill.ok,.pill.done { background:rgba(52,211,153,.14); color:var(--ok); } .pill.rolled_back,.pill.cancelled { background:rgba(255,255,255,.07); }
table { width:100%; border-collapse:collapse; font-size:14px; } th,td { text-align:left; padding:8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; }
code { color:var(--teal-300); }
pre { background:#05050a; color:#e2e8f0; border:1px solid var(--line); padding:12px; border-radius:10px; overflow:auto; max-height:420px; }
.diff-from { color:var(--bad); text-decoration:line-through; } .diff-to { color:var(--ok); font-weight:600; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .row.end { justify-content:flex-end; margin-top:16px; }
dialog { border:1px solid var(--line2); border-radius:16px; padding:0; max-width:640px; width:92vw; background:var(--card); color:var(--ink); box-shadow:0 30px 90px rgba(0,0,0,.7); }
dialog::backdrop { background:rgba(3,3,8,.7); backdrop-filter:blur(3px); }
.dialog { padding:24px; } .dialog h2 { margin-top:0; }
.check { padding:6px 0; } .check.ok::before { content:"✔ "; color:var(--ok); } .check.bad::before { content:"✖ "; color:var(--bad); } .check.warn::before { content:"! "; color:var(--warn); font-weight:700; }
input[type=text], input[type=email], input[type=password] { padding:9px 12px; border:1px solid var(--line2); border-radius:10px; font:inherit; min-width:280px; background:rgba(0,0,0,.3); color:var(--ink); }
input:focus-visible { outline:none; border-color:var(--brand-400); box-shadow:0 0 0 3px rgba(109,93,252,.3); }
input[type=checkbox] { accent-color:var(--brand); }
.switch { display:flex; align-items:center; gap:6px; cursor:pointer; color:var(--muted); }
.hero { text-align:center; padding:48px 20px; } .hero h1 { font-size:32px; margin:0 0 8px; }
.notice { background:rgba(109,93,252,.12); border:1px solid rgba(109,93,252,.35); padding:10px 14px; border-radius:10px; margin-bottom:16px; }
.hidden { display:none; } .mt { margin-top:16px; }
@media (max-width: 760px) { .grid { grid-template-columns:1fr; } nav { display:none; } .top .pbadge { display:none; } }
.auth { max-width:440px; margin:48px auto; text-align:center; padding:32px; }
.auth h1 { font-size:26px; margin:12px 0 6px; }
.stack { display:flex; flex-direction:column; gap:10px; margin:20px 0 8px; }
.btn.idp { display:flex; align-items:center; justify-content:center; gap:10px; padding:11px 14px; font-weight:600; }
.or { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; margin:16px 0; } .or::before,.or::after { content:""; flex:1; border-top:1px solid var(--line); }
.auth form.row { justify-content:center; } .auth input[type=email], .auth input[type=text] { min-width:0; flex:1; }
.small { font-size:13px; } .devbox { border-top:1px dashed var(--line2); padding-top:12px; }
code.secret { font-size:16px; letter-spacing:1px; background:rgba(255,255,255,.06); padding:6px 10px; border-radius:8px; }