:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#182a29;background:#f4f6f2;line-height:1.5;--ink:#182a29;--muted:#68756d;--line:#d9e1d8;--accent:#1c6149;--soft:#edf1eb;--danger:#9e301d;--gutter:clamp(12px,4vw,40px);-webkit-text-size-adjust:100%}
*{box-sizing:border-box}html,body{overflow-x:hidden}body{margin:0;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}

/* Header */
header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px var(--gutter);padding-top:max(12px,env(safe-area-inset-top));border-bottom:1px solid var(--line);background:#fff}
header a{font-size:22px;font-weight:800;text-decoration:none;color:inherit;white-space:nowrap}header a span{font-size:13px;color:var(--muted);font-weight:400;margin-left:12px}
.who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);min-width:0}.who img{width:28px;height:28px;border-radius:50%;flex:none}
#who-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
main{flex:1;width:100%;max-width:1600px;margin:0 auto;padding:20px var(--gutter)}
footer{padding:20px var(--gutter);padding-bottom:max(20px,env(safe-area-inset-bottom));text-align:center}

/* Typography and controls */
.eyebrow{font-size:12px;letter-spacing:2px;color:#426d59}h1{font-size:clamp(28px,6vw,50px);letter-spacing:-1.5px;line-height:1.1;margin:12px 0 20px}h2{font-size:20px;margin:0;overflow-wrap:anywhere}h3{margin:28px 0 8px;font-size:16px}
.card{padding:clamp(16px,3vw,28px);background:#fff;border:1px solid var(--line);border-radius:16px}.card.inset{background:#fbfcfa;margin:16px 0}.card.inset h3{margin-top:0}.login{max-width:520px;margin:clamp(12px,6vh,48px) auto}
label{display:block;font-size:13px;font-weight:600}label.inline{display:inline-flex;align-items:center;gap:6px;font-weight:500}label.inline select,label.inline input{margin:0;width:auto}
input,select,textarea{display:block;width:100%;min-width:0;padding:10px 12px;border:1px solid #becbc1;border-radius:7px;font:inherit;font-size:16px;margin:6px 0 14px;background:#fff;color:var(--ink)}textarea{min-height:48px;resize:vertical}input[type=checkbox]{display:inline;width:auto;margin:0}
@media(min-width:901px){input,select,textarea{font-size:15px}}
button,.button-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border:0;border-radius:7px;padding:9px 16px;background:var(--accent);color:#fff;cursor:pointer;font:inherit;font-weight:600;text-decoration:none;white-space:nowrap}
button:hover,.button-link:hover{filter:brightness(.93)}button:disabled{opacity:.5;cursor:not-allowed}.secondary{background:var(--soft);color:#244637}.danger{background:#fbe9e4;color:var(--danger)}.small{min-height:32px;padding:5px 10px;font-size:13px}
.button-link{background:var(--soft);color:#244637;margin:4px 0 8px}
#message{max-width:1600px;margin:12px auto 0;padding:0 var(--gutter);width:100%;position:sticky;top:64px;z-index:9}#message:not(:empty) span{display:block;padding:12px 16px;background:#e2eee3;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.06);overflow-wrap:anywhere}#message.error span{background:#ffe8e1;color:var(--danger)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.toolbar.wrap{align-items:flex-start}.heading{min-width:0;flex:1 1 260px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.muted{color:var(--muted);font-size:13px;overflow-wrap:anywhere}footer{color:var(--muted);font-size:13px}.lead{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}

/* Workspace: sidebar + detail */
.workspace{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:start}aside{position:sticky;top:84px;min-width:0}
.detail{min-width:0}.back{display:none}
.nav{display:grid;gap:6px;margin-bottom:20px}.nav-item{justify-content:flex-start;background:#fff;color:var(--ink);border:1px solid var(--line)}.nav-item.active{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}.nav-item.accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.services{display:grid;gap:6px;max-height:calc(100vh - 340px);overflow:auto;padding-bottom:4px}
.service{justify-content:flex-start;text-align:left;padding:10px 12px;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;grid-template-columns:12px minmax(0,1fr);gap:10px;align-items:center;overflow-wrap:anywhere;font-weight:500;white-space:normal}.service.active{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}.service small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.dot{width:10px;height:10px;border-radius:50%;background:#b8c2bb}.dot.running{background:#2e9b5f}.dot.degraded,.dot.starting{background:#e0a010}.dot.archived{background:#9aa3a0}.dot.control{background:#4a6fa5}
.content{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(14px,2.5vw,28px);min-height:60vh;min-width:0}.empty{padding:40px 0;text-align:center}.empty-small{padding:12px 0}

/* Tabs scroll sideways on narrow screens */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:16px 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.tabs::-webkit-scrollbar{display:none}
.tabs{mask-image:linear-gradient(to right,#000 85%,transparent);-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);padding-right:24px}.tabs button{flex:none;background:none;color:var(--muted);border-radius:7px 7px 0 0;padding:10px 14px}.tabs button[aria-selected=true]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}

.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:12px 0 20px}.stat{padding:12px 14px;background:var(--soft);border-radius:10px;min-width:0}.stat b{display:block;font-size:19px;overflow-wrap:anywhere}.stat span{font-size:12px;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}th{color:var(--muted);font-weight:600;font-size:12px}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;background:var(--soft);color:#244637;white-space:nowrap}.badge.running,.badge.ready,.badge.active{background:#dff3e6;color:#1d6b40}.badge.failed,.badge.rejected,.badge.down,.badge.error{background:#fbe9e4;color:var(--danger)}.badge.archived,.badge.shutdown{background:#eceeec;color:#56615c}.badge.degraded,.badge.starting,.badge.pending,.badge.preparing{background:#fbf1d6;color:#7a5a00}

/* Environment editor */
.env-row{display:grid;grid-template-columns:minmax(150px,1fr) 100px minmax(200px,2fr) auto auto;gap:10px;align-items:start;margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed var(--line)}.env-row input,.env-row select,.env-row textarea{margin:0}.env-row button{font-size:12px;padding:8px 10px;justify-self:start}
.env-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}.env-tools button{padding:5px 10px;min-height:32px}.env-status.error{color:var(--danger)}.env-preview{margin:8px 0 0;padding:12px;background:var(--soft);border-radius:7px;max-height:240px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}
.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 20px}.secret-mount{border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:16px;overflow-wrap:anywhere}details{margin:20px 0;padding:16px;background:var(--soft);border-radius:8px}summary{cursor:pointer;font-weight:600;margin-bottom:12px}
.logs{background:#0f1a17;color:#d8e6df;padding:14px;border-radius:10px;font-size:12px;line-height:1.5;max-height:65vh;min-height:200px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px;align-items:center}.chips select{width:auto;flex:1 1 160px;margin:0}.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;background:var(--soft);border-radius:999px;font-size:12px;overflow-wrap:anywhere}.chip button{background:none;color:var(--muted);padding:0 2px;font-size:16px;line-height:1;min-height:0}
.user-row{display:grid;grid-template-columns:minmax(200px,1fr) 2fr auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}.user-row input,.user-row select{margin:0}
.hosts a{display:block;color:var(--accent);overflow-wrap:anywhere}

/* Auto-deploy */
.field{display:grid;grid-template-columns:130px minmax(0,1fr);gap:4px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.field-label{font-size:12px;font-weight:600;color:var(--muted)}
.field-row{display:flex;gap:8px;align-items:center;min-width:0;flex-wrap:wrap}.field-row .value{flex:1 1 220px;min-width:0;padding:8px 10px;background:var(--soft);border-radius:6px;overflow-wrap:anywhere;word-break:break-all}.field-tools{display:flex;gap:6px}
.problems{margin:12px 0;padding:12px 12px 12px 32px;background:#fff6ea;border-radius:8px;color:#7a5a00;font-size:14px}
.deliveries{list-style:none;padding:0;margin:0;display:grid;gap:8px}.delivery{padding:12px 14px;border:1px solid var(--line);border-radius:10px;display:grid;gap:4px;min-width:0}.delivery-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.commit{font-size:14px;overflow-wrap:anywhere}.commit a,.commit code{font-family:ui-monospace,Menlo,monospace;color:var(--accent);margin-right:4px}

[hidden]{display:none!important}:focus-visible{outline:3px solid #8ac1aa;outline-offset:2px}

/* Large screens: roomier sidebar */
@media(min-width:1500px){.workspace{grid-template-columns:340px minmax(0,1fr)}}
/* Tablets: stack env rows */
@media(max-width:1200px){.env-row{grid-template-columns:minmax(0,1fr) 100px auto auto}.env-row>div{grid-column:1/-1;grid-row:2}}
/* Phones and small tablets: list and detail become separate screens */
@media(max-width:900px){
  .workspace{grid-template-columns:minmax(0,1fr);gap:12px}aside{position:static}.services{max-height:none}
  .workspace.detail-open aside{display:none}.workspace:not(.detail-open) .detail{display:none}
  .back{display:inline-flex;margin-bottom:10px}
  header a span{display:none}#message{top:58px}
  .user-row{grid-template-columns:minmax(0,1fr)}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}th,td{min-width:110px}
}
@media(max-width:560px){
  main{padding-top:12px}.content{border-radius:12px}
  .who img{display:none}#who-text{max-width:42vw}
  .env-row{grid-template-columns:minmax(0,1fr) 92px}.env-row>div{grid-row:auto}.env-row>button{grid-column:auto}
  .toolbar.wrap .actions{width:100%}.actions>button{flex:1 1 calc(50% - 8px)}
  .field{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat b{font-size:16px}
  .settings{grid-template-columns:minmax(0,1fr)}
}

.notice{padding:12px 14px;background:#eef3fb;border:1px solid #cfdcf0;color:#2d4a6d;border-radius:8px;font-size:14px}input:disabled,select:disabled,input[readonly]{background:#f3f5f2;color:#56615c;cursor:not-allowed}.log-status{margin-left:auto}

/* ===== Sign-in screen: matches the public website (dark, Space Grotesk, swarm) ===== */
body.signed-out{background:#06120e;color:#e9f5ef;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body.signed-out>header,body.signed-out>footer{display:none}
body.signed-out main{max-width:none;padding:0}
body.signed-out #message{position:fixed;top:16px;left:0;right:0;z-index:20;max-width:560px}
body.signed-out #message.error span{background:rgba(255,125,107,.14);color:#ffb3a8;border:1px solid rgba(255,125,107,.35)}
body.signed-out #message:not(.error) span{background:rgba(62,230,164,.12);color:#bff5de;border:1px solid rgba(62,230,164,.3)}
.login-screen{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));overflow:hidden;
  background:radial-gradient(900px 520px at 85% -10%,rgba(62,230,164,.16),transparent 60%),radial-gradient(700px 480px at -10% 110%,rgba(255,199,107,.07),transparent 60%),#06120e}
.login-swarm{position:absolute;inset:0;width:100%;height:100%}
.login-card{position:relative;width:min(440px,100%);padding:clamp(28px,6vw,44px);border-radius:24px;background:linear-gradient(180deg,rgba(14,33,25,.82),rgba(8,22,17,.86));border:1px solid rgba(160,230,200,.18);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);animation:loginIn .9s cubic-bezier(.2,.7,.1,1) both}
@keyframes loginIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.login-brand{display:inline-flex;align-items:center;gap:10px;color:#e9f5ef;text-decoration:none;font:600 20px "Space Grotesk",system-ui,sans-serif;letter-spacing:-.02em}
.login-brand svg{width:28px;height:28px;color:#3ee6a4}.login-brand b{font-weight:400;color:#a9c2b6;margin-left:2px}
.login-eyebrow{display:flex;align-items:center;gap:10px;margin:34px 0 12px;font:600 12px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#3ee6a4}
.login-eyebrow .pulse{width:8px;height:8px;border-radius:50%;background:#3ee6a4;box-shadow:0 0 0 0 rgba(62,230,164,.6);animation:loginPulse 2s infinite}
@keyframes loginPulse{70%{box-shadow:0 0 0 10px rgba(62,230,164,0)}100%{box-shadow:0 0 0 0 rgba(62,230,164,0)}}
.login-card h1{font:600 clamp(36px,8vw,48px)/1.02 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.03em;margin:0 0 14px;color:#e9f5ef}
.login-lede{color:#a9c2b6;font-size:16px;line-height:1.6;margin:0 0 28px}
.google-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:52px;padding:12px 20px;border-radius:999px;background:#fff;color:#1f1f1f;font:600 15px Inter,system-ui,sans-serif;border:0;cursor:pointer;
  box-shadow:0 10px 40px -12px rgba(62,230,164,.55);transition:transform .25s cubic-bezier(.2,.7,.1,1),box-shadow .3s}
.google-btn:hover{filter:none;transform:translateY(-1px);box-shadow:0 0 0 6px rgba(62,230,164,.14),0 14px 50px -10px rgba(62,230,164,.7)}
.google-btn:disabled{opacity:.7;cursor:progress;transform:none}
.google-btn svg{width:20px;height:20px;flex:none}
.login-fine{margin:22px 0 0;color:#8aa69a;font-size:14px;text-align:center}.login-fine a{color:#3ee6a4;text-underline-offset:3px}
.login-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px;margin-top:26px;padding-top:20px;border-top:1px solid rgba(160,230,200,.12)}
.login-links a{color:#a9c2b6;text-decoration:none;font-size:13px}.login-links a:hover{color:#e9f5ef}
.login-screen :focus-visible{outline:2px solid #3ee6a4;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.login-card,.login-eyebrow .pulse{animation:none}}