:root{color-scheme:light;
--ink:#1c1c1e;--muted:#6e6e73;--faint:#8e8e93;--sep:rgba(60,60,67,.12);--fill:rgba(118,118,128,.12);
--glass:linear-gradient(140deg,rgba(255,255,255,.62),rgba(255,255,255,.28) 55%,rgba(255,255,255,.4));
--glass-strong:rgba(255,255,255,.78);--glass-line:rgba(255,255,255,.55);
--blue:#007aff;--green:#248a3d;--greenbg:rgba(52,199,89,.16);--red:#d70015;--redbg:rgba(255,59,48,.13);
--orange:#c93400;--orangebg:rgba(255,149,0,.16);
--shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.2),inset 0 0 18px rgba(255,255,255,.18),
0 18px 40px -12px rgba(30,45,110,.18),0 2px 8px rgba(30,45,110,.06);
--blur:blur(26px) saturate(210%) brightness(1.05)}
*{box-sizing:border-box}
html{background:#eef1f7}
body{margin:0;min-height:100vh;color:var(--ink);
font:15px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
-webkit-font-smoothing:antialiased;
background:
radial-gradient(520px 420px at 12% 8%,rgba(96,165,255,.55) 0,transparent 70%),
radial-gradient(560px 460px at 92% 6%,rgba(186,148,255,.5) 0,transparent 70%),
radial-gradient(600px 480px at 70% 62%,rgba(255,184,150,.42) 0,transparent 70%),
radial-gradient(620px 520px at 18% 88%,rgba(110,220,190,.48) 0,transparent 70%),
radial-gradient(420px 360px at 45% 35%,rgba(255,226,140,.3) 0,transparent 70%),
linear-gradient(160deg,#eef3fb,#f3effa 50%,#eef7f4);background-attachment:fixed}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
code,.mono{font:12.5px ui-monospace,"SF Mono",Menlo,monospace;color:var(--muted)}

/* glass: translucent fill, blur and colour from behind, an inner top highlight,
   a soft sheen across the top left, and a rim of light brightest on the
   upper-left edge (a gradient border drawn by masking). */
.card,.table,.side,details.panel,.attention,.tabs,.flash{position:relative;isolation:isolate;
background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
border:1px solid var(--glass-line);box-shadow:var(--shadow)}
.card::before,.table::before,.side::before,details.panel::before,.attention::before{content:"";position:absolute;inset:0;
border-radius:inherit;pointer-events:none;z-index:-1;
background:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.55),transparent 55%),
linear-gradient(115deg,transparent 32%,rgba(255,255,255,.22) 44%,transparent 56%)}
.card::after,.table::after,.side::after,details.panel::after,.attention::after,.tabs::after{content:"";position:absolute;inset:-1px;
border-radius:inherit;pointer-events:none;padding:1.2px;
background:linear-gradient(140deg,rgba(255,255,255,1),rgba(255,255,255,.35) 28%,rgba(255,255,255,.08) 55%,rgba(255,255,255,.45) 85%,rgba(255,255,255,.9));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.envbar{background:rgba(255,255,255,.5);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
box-shadow:inset 0 -1px 0 rgba(255,255,255,.7)}

/* environment */
.envbar{position:sticky;top:0;z-index:5;padding:7px 16px;font-size:13px;text-align:center;
border-radius:0;border-width:0 0 1px;box-shadow:none}
.env-dev,.env-staging,.env-test{color:var(--orange);background:linear-gradient(180deg,rgba(255,240,214,.72),rgba(255,226,186,.55))}
.env-prod{color:#fff;background:linear-gradient(180deg,rgba(235,40,50,.9),rgba(200,0,20,.88))}

/* shell */
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);gap:0;min-height:100vh}
.side{position:sticky;top:46px;align-self:start;height:calc(100vh - 62px);margin:8px 0 8px 12px;
border-radius:22px;padding:18px 12px;display:flex;flex-direction:column;gap:16px}
.side ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.brand{display:flex!important;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.brand svg{flex:none}.brand-sub{font-weight:500;color:var(--muted)}
.side .brand{padding:2px 8px 6px;text-decoration:none}
.side .item{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border-radius:12px;color:var(--muted);
text-decoration:none;font:inherit;font-size:14px;font-weight:500;background:none;border:0;box-shadow:none;text-align:left;cursor:pointer}
.side .item:hover{background:rgba(255,255,255,.55);color:var(--ink);text-decoration:none;filter:none}
.side .item .icon{flex:none}
.side .item[aria-current]{font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.side .product{color:var(--ink);font-weight:600}
.side .product[aria-current]{background:rgba(0,122,255,.12);color:#0062cc}
.avatar{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;font-size:12px;font-weight:700;
color:#fff;background:linear-gradient(140deg,#5ac8fa,#007aff);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.side .sections{margin:2px 0 6px}
.accent-teal .icon{color:#0f9b8e}.accent-teal[aria-current]{background:rgba(15,155,142,.13);color:#0b7a70}
.accent-violet .icon{color:#7c5ce0}.accent-violet[aria-current]{background:rgba(124,92,224,.13);color:#5b3fc4}
.accent-pink .icon{color:#e0457b}.accent-pink[aria-current]{background:rgba(224,69,123,.12);color:#c22a63}
.accent-blue .icon{color:#007aff}.accent-blue[aria-current]{background:rgba(0,122,255,.12);color:#0062cc}
.accent-green .icon{color:#1e9e4a}.accent-green[aria-current]{background:rgba(30,158,74,.13);color:#17803b}
.accent-amber .icon{color:#d98a00}.accent-amber[aria-current]{background:rgba(217,138,0,.14);color:#a66700}
.side-foot{margin-top:auto;border-top:1px solid var(--sep);padding-top:10px}
/* the circle on the edge, level with the logo */
.side-toggle{position:absolute;top:26px;right:-12px;z-index:3}
.side-toggle button{display:grid;place-items:center;width:24px;height:24px;padding:0;border-radius:50%;
color:var(--muted);border:1px solid var(--sep);background:#fff;box-shadow:0 2px 8px rgba(30,45,110,.16)}
.side-toggle button:hover{color:var(--ink);background:#f4f6fb;filter:none}
.side-toggle .icon{width:14px;height:14px}
.when-rail{display:none}body[data-side=hidden] .when-rail{display:block}body[data-side=hidden] .when-full{display:none}
/* the rail */
body[data-side=hidden] .shell{grid-template-columns:76px minmax(0,1fr)}
body[data-side=hidden] .side{padding:18px 10px;align-items:center}
body[data-side=hidden] .side .txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body[data-side=hidden] .side .brand{padding:2px 0 6px;justify-content:center}
body[data-side=hidden] .side .item{justify-content:center;padding:9px 0}
body[data-side=hidden] .side nav,body[data-side=hidden] .side-foot{width:100%}
main{max-width:1080px;width:100%;margin:0 auto;padding:28px 28px 72px}
@media (max-width:820px){
.shell,body[data-side=hidden] .shell{display:block}
.side,body[data-side=hidden] .side{position:sticky;top:34px;z-index:4;height:auto;margin:8px;border-radius:18px;
flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 12px}
body[data-side=hidden] .side .txt{position:static;width:auto;height:auto;overflow:visible;clip:auto}
.side-toggle{display:none}.side .brand,body[data-side=hidden] .side .brand{padding:2px 4px}
.side nav,body[data-side=hidden] .side nav{width:100%;order:3}
.side nav>ul{display:flex;flex-wrap:wrap;gap:4px}.side nav>ul>li{display:contents}
.side .sections{display:flex;gap:2px;margin:0;overflow-x:auto;width:100%}
.side .item,body[data-side=hidden] .side .item{width:auto;padding:6px 10px}
.side-foot,body[data-side=hidden] .side-foot{width:auto;margin:0 0 0 auto;padding:0;border:0}main{padding:16px 16px 56px}}

/* type */
h1{font-size:30px;font-weight:700;letter-spacing:-.022em;margin:0;line-height:1.15}
h2{font-size:19px;font-weight:650;letter-spacing:-.01em;margin:34px 0 12px}
h3{font-size:16px;font-weight:600;margin:18px 0 8px}
.lede{margin:6px 0 0;color:var(--muted);max-width:68ch}
.note{color:var(--muted);font-size:13px}.neg{color:var(--red)}.pos{color:var(--green)}
.flush{margin:0}.flush-bottom{margin-bottom:0}.gap-top{margin-top:16px}
.list{margin:0;padding-left:18px}.list li{margin:4px 0}
.page-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin:0 0 24px}
.page-head .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.section-head h2{margin-bottom:12px}

/* surfaces */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{border-radius:20px;padding:18px}
.stat{font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:4px}
.label{color:var(--muted);font-size:13px;font-weight:500}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.kpis .stat{font-size:32px}
.attention{border-radius:20px;padding:16px 18px;margin:0 0 22px;border-left:5px solid #ff3b30}
.attention.calm{border-left-color:#34c759}
.attention h2{margin:0 0 6px;font-size:16px}.attention ul{margin:0;padding-left:18px}.attention li{margin:4px 0}
.plan-card h3{margin:0;font-size:18px;letter-spacing:-.01em}
.plan-card .price{font-size:21px;font-weight:700;letter-spacing:-.015em;margin:8px 0 2px}
.plan-card ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:0;font-size:14px}
.plan-card li{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--sep);padding:8px 0}
.plan-card li span:first-child{color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 18px;margin:0}
.facts dt{color:var(--muted);font-size:13px}.facts dd{margin:2px 0 8px}
details.panel{border-radius:18px;margin:12px 0}
details.panel>summary{padding:14px 18px;list-style:none;display:flex;justify-content:space-between;gap:12px;font-weight:600;cursor:pointer}
details.panel>summary::after{content:"Show";color:var(--blue);font-weight:500;font-size:14px}
details.panel[open]>summary::after{content:"Hide"}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>.body{padding:0 18px 18px}
details.panel .card{background:rgba(255,255,255,.45)}
details{margin:8px 0}summary{cursor:pointer}

/* segmented tabs */
.tabs{display:inline-flex;gap:2px;flex-wrap:wrap;padding:4px;margin:18px 0 22px;border-radius:16px}
.tabs a{padding:7px 15px;border-radius:12px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.tabs a[aria-current]{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.78));
box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(30,45,110,.14);font-weight:600}
.tabs .count{margin-left:6px}

/* tables */
.table{overflow-x:auto;border-radius:18px}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--sep);white-space:nowrap;vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:600}
tbody tr:hover{background:rgba(255,255,255,.35)}
tr:last-child td{border-bottom:0}td.num,th.num{text-align:right}td.wrap{white-space:normal}

/* bits */
.pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:500;background:var(--fill);color:var(--ink);white-space:nowrap}
.pill.ok{background:var(--greenbg);color:var(--green)}.pill.bad{background:var(--redbg);color:var(--red)}
.pill.warn{background:var(--orangebg);color:var(--orange)}.pill.accent{background:var(--blue);color:#fff}
.flash{padding:11px 16px;border-radius:16px;margin:0 0 18px}
.flash.ok{background:rgba(52,199,89,.18);color:var(--green)}
.flash.error{background:rgba(255,59,48,.14);color:var(--red)}
.problems li{color:var(--red)}.versions{display:grid;gap:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.nowrap,.row.nowrap,form.inline.nowrap{flex-wrap:nowrap}
progress.bar{-webkit-appearance:none;appearance:none;display:block;width:100%;height:7px;margin-top:10px;border:0;border-radius:99px;background:var(--fill);overflow:hidden;color:var(--blue)}
progress.bar::-webkit-progress-bar{background:var(--fill);border-radius:99px}
progress.bar::-webkit-progress-value{background:var(--blue);border-radius:99px}
progress.bar::-moz-progress-bar{background:var(--blue);border-radius:99px}
progress.bar.full::-webkit-progress-value{background:#ff9500}
progress.bar.full::-moz-progress-bar{background:#ff9500}

/* forms */
form.inline{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
form.stack{display:grid;gap:12px;max-width:560px}
label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);font-weight:500}
label.check{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-size:14px}
fieldset{border:1px solid var(--sep);border-radius:14px;padding:8px 14px;display:flex;gap:14px;flex-wrap:wrap}
legend{font-size:13px;color:var(--muted);padding:0 4px}
input,select,textarea{font:inherit;padding:8px 12px;border:1px solid rgba(255,255,255,.7);border-radius:12px;
background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.5));color:var(--ink);outline:none;
box-shadow:inset 0 1px 2px rgba(30,45,110,.08),0 1px 0 rgba(255,255,255,.8);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,122,255,.18)}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue)}
textarea{width:100%;min-height:60px}
button,.button{font:inherit;font-weight:600;padding:9px 18px;border:1px solid rgba(255,255,255,.35);border-radius:14px;
background:linear-gradient(180deg,#3d9bff,#007aff 55%,#006be0);color:#fff;cursor:pointer;text-decoration:none;display:inline-block;
box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,40,120,.25),0 6px 16px -6px rgba(0,122,255,.6)}
button:hover,.button:hover{filter:brightness(1.06);text-decoration:none}
button.secondary,.button.secondary{color:var(--blue);border-color:rgba(255,255,255,.75);
background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.42));
box-shadow:inset 0 1px 0 #fff,0 4px 12px -6px rgba(30,45,110,.25);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
button.danger{background:linear-gradient(180deg,#ff6a61,#ff3b30 55%,#e0261c);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px -6px rgba(255,59,48,.6)}
button.link{background:none;border:0;box-shadow:none;color:var(--muted);padding:0;font-weight:500}
button:disabled{opacity:.45;cursor:not-allowed;filter:none}
a:focus-visible,button:focus-visible,summary:focus-visible,.tabs a:focus-visible{outline:3px solid rgba(0,122,255,.45);outline-offset:2px;border-radius:10px}
.login{max-width:400px;margin:14vh auto;padding:26px}
.login h1{font-size:20px;margin-bottom:6px}.login form{display:grid;gap:14px;margin-top:18px}
.login button{width:100%;padding:11px}

/* feedback and waitlist */
.feedback-list{display:grid;gap:12px}
.feedback-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.feedback-head a{font-weight:600}.feedback-when{margin-left:auto}
.feedback-message{margin:10px 0;white-space:pre-wrap;line-height:1.55;font-size:15px}
.bars{list-style:none;margin:10px 0;padding:0;display:grid;gap:8px}
.bars li{display:grid;grid-template-columns:minmax(80px,1fr) 2fr auto;align-items:center;gap:10px;font-size:14px}
.bars progress{margin:0}
button.small{padding:5px 12px;font-size:13px}
/* phones: last, so it wins over the rules above */
@media (max-width:820px){
.grid,.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.grid.wide{grid-template-columns:minmax(0,1fr)}
.card{padding:14px}.stat,.kpis .stat{font-size:22px}h1{font-size:26px}h2{margin-top:26px}}