:root { color-scheme: light; --ink:#17251f; --muted:#62716a; --line:#d8e0dc; --paper:#f4f6f4; --white:#fff; --green:#146c43; --green-soft:#e7f4ec; --amber:#9a5b00; --red:#a33232; --blue:#315f78; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); } button,select { font:inherit; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.55; }
.skip-link { position:absolute; left:-999px; top:8px; z-index:10; background:var(--ink); color:white; padding:10px; } .skip-link:focus { left:8px; }
.topbar { min-height:92px; padding:20px clamp(20px,4vw,64px); background:var(--ink); color:white; display:flex; align-items:center; justify-content:space-between; gap:24px; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; font-size:clamp(1.35rem,3vw,2rem); } h2 { margin-bottom:8px; } .eyebrow { margin-bottom:5px; text-transform:uppercase; letter-spacing:.13em; font-size:.7rem; font-weight:800; opacity:.72; }
main { max-width:1440px; margin:auto; padding:clamp(20px,4vw,52px); } .identity { display:flex; align-items:center; gap:14px; font-size:.86rem; }
.center-card { max-width:520px; margin:10vh auto; padding:42px; background:white; border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 45px #17251f12; }
.auth-form { display:grid; gap:16px; margin-top:26px; }.auth-form label { display:grid; gap:7px; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }.auth-form input { width:100%; font-size:1rem; text-transform:none; letter-spacing:normal; }.auth-error { margin:0; color:var(--red); }.auth-secret { padding:12px; border:1px solid var(--line); overflow-wrap:anywhere; font-family:ui-monospace,SFMono-Regular,monospace; color:var(--green); }
.primary,.secondary,.icon-button { border-radius:8px; padding:10px 16px; font-weight:700; border:1px solid transparent; } .primary { color:white; background:var(--green); } .secondary { background:white; border-color:#9ba9a2; color:var(--ink); } .icon-button { padding:4px 10px; background:transparent; font-size:1.5rem; }
.toolbar { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:24px; } .muted { color:var(--muted); }
.workspace { display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:24px; } .environment-list,.detail { background:white; border:1px solid var(--line); border-radius:14px; overflow:hidden; } .detail { min-height:520px; padding:clamp(20px,3vw,36px); }
.stack { display:grid; } .environment-button { width:100%; text-align:left; padding:18px 20px; border:0; border-bottom:1px solid var(--line); background:white; color:inherit; } .environment-button:hover,.environment-button[aria-current="true"] { background:#edf3ef; } .environment-button[aria-current="true"] { box-shadow:inset 4px 0 var(--green); }
.environment-row,.section-head,.dialog-head { display:flex; align-items:start; justify-content:space-between; gap:16px; } .status { display:inline-flex; align-items:center; gap:7px; padding:4px 9px; border-radius:99px; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; background:#eef1ef; } .status::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; } .status-current { color:var(--green); background:var(--green-soft); } .status-deploying { color:var(--blue); background:#e7f0f5; } .status-failed,.status-drifted { color:var(--red); background:#fae9e9; } .status-stale { color:var(--amber); background:#fff1d8; }
.identity-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:24px 0; } .identity-card { padding:15px; background:#f7f9f7; border:1px solid var(--line); border-radius:10px; } .identity-card dt { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; } .identity-card dd { margin:6px 0 0; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.82rem; overflow-wrap:anywhere; }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin:24px 0; } .actions label { display:grid; gap:5px; color:var(--muted); font-size:.78rem; } .actions textarea { min-width:260px; } input,textarea,select { border:1px solid #9ba9a2; border-radius:7px; padding:9px; background:white; color:var(--ink); } table { width:100%; border-collapse:collapse; font-size:.86rem; } th,td { padding:12px 9px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; } th { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.notice { margin-bottom:20px; padding:13px 16px; border-radius:9px; background:#e8f0f4; border-left:4px solid var(--blue); } .notice.error { background:#fae9e9; border-color:var(--red); } .empty,.loading { padding:36px; text-align:center; color:var(--muted); }
dialog { width:min(760px,calc(100% - 28px)); max-height:90vh; border:0; border-radius:16px; padding:0; box-shadow:0 24px 80px #0005; } dialog::backdrop { background:#17251fb8; } dialog form { padding:28px; overflow:auto; } .plan-block { padding:14px 0; border-bottom:1px solid var(--line); } .confirmation { margin-top:18px; padding:16px; border:1px solid #e4bb73; background:#fff8e9; border-radius:9px; } .confirmation label { display:flex; gap:10px; align-items:start; } .dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
@media (max-width:760px) { .workspace { grid-template-columns:1fr; } .environment-list { max-height:260px; overflow:auto; } .identity-grid { grid-template-columns:1fr; } .topbar { align-items:start; } .identity { flex-direction:column; align-items:end; } }
@media (prefers-reduced-motion:no-preference) { button { transition:background-color .15s ease, transform .15s ease; } button:active { transform:translateY(1px); } }

/* Cinematic control-room skin: visual only; semantic and safety surfaces remain intact. */
:root { color-scheme:dark; --ink:#e9fbff; --muted:#76939d; --line:#184956; --paper:#02090d; --white:#07151b; --green:#38e8bd; --green-soft:#06372f; --amber:#ffb84d; --red:#ff5d6c; --blue:#38c7ff; --glow:#25d8ff; }
body { min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at 75% 0%,#0b3442 0,transparent 34%),linear-gradient(145deg,#02070a,#031117 58%,#041b22); color:var(--ink); }
body::before { content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(#49cceb18 1px,transparent 1px),linear-gradient(90deg,#49cceb18 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 84%); }
.atmosphere { position:fixed;inset:0;pointer-events:none;overflow:hidden; }.atmosphere span{position:absolute;border:1px solid #2bdcff22;border-radius:50%;box-shadow:0 0 80px #18cfff0d,inset 0 0 80px #18cfff0d}.atmosphere span:nth-child(1){width:580px;height:580px;right:-250px;top:110px}.atmosphere span:nth-child(2){width:360px;height:360px;right:-140px;top:220px}.atmosphere span:nth-child(3){width:760px;height:760px;left:-620px;bottom:-400px}
.topbar { min-height:104px;background:#031016d9;border-bottom:1px solid #2ddcff55;box-shadow:0 12px 45px #0009,0 1px 28px #18d8ff14;backdrop-filter:blur(18px);position:relative;z-index:2}.topbar::after{content:"";position:absolute;bottom:-1px;left:4vw;width:22%;height:2px;background:linear-gradient(90deg,var(--glow),transparent);box-shadow:0 0 14px var(--glow)}
.brand-lockup{display:flex;align-items:center;gap:17px}.reactor{width:54px;height:54px;border:1px solid #53e7ff80;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fff 0 6%,#21c9ec 7% 16%,transparent 17% 32%,#19b7da44 33% 40%,transparent 41%);box-shadow:0 0 22px #1fd8ff88,inset 0 0 18px #1fd8ff66;position:relative}.reactor::before,.reactor::after{content:"";position:absolute;inset:5px;border:1px dashed #74efff80;border-radius:50%}.reactor::after{inset:-5px;border-style:solid;border-color:#39daf444 transparent}.reactor i{width:6px;height:6px;border-radius:50%;background:white;box-shadow:0 0 12px 4px #49e9ff}
h1,h2{font-weight:500;letter-spacing:.025em}h1{text-shadow:0 0 28px #2bcfff55}.eyebrow{color:#66e7ff;letter-spacing:.19em;opacity:.9}.system-state{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;color:#9fffe5;text-transform:uppercase;letter-spacing:.12em;font-size:.66rem}.system-state small{grid-column:2;color:var(--muted);margin-top:3px}.pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px #38e8bd16,0 0 14px var(--green)}
main{max-width:1540px;position:relative;z-index:1}.identity{color:#b7d9e1}.center-card{background:linear-gradient(145deg,#071a22ee,#041016ee);border:1px solid #38d8fa70;border-radius:3px 22px 3px 22px;box-shadow:0 24px 80px #000b,0 0 40px #19ceff13,inset 0 0 40px #1fd8ff08;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}
.primary,.secondary,.icon-button{border-radius:2px 10px 2px 10px;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}.primary{color:#001014;background:linear-gradient(135deg,#7ef7ff,#28c9e8);box-shadow:0 0 18px #28d7f744}.secondary{background:#07171d99;border-color:#2daec5;color:#a9efff}.primary:hover,.secondary:hover{filter:brightness(1.18);box-shadow:0 0 22px #28d7f766}.icon-button{color:var(--ink)}
.telemetry{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 18px;border:1px solid #1c5360;background:#041116b8}.telemetry span{padding:9px 14px;border-right:1px solid #1c5360;color:#63818a;text-transform:uppercase;letter-spacing:.1em;font-size:.59rem}.telemetry span:last-child{border:0}.telemetry b{color:#6eeed0;font-weight:700;margin-left:7px}
.workspace{gap:18px}.environment-list,.detail{background:linear-gradient(145deg,#06171dd9,#031015e8);border:1px solid #1b5868;border-radius:2px 18px 2px 18px;box-shadow:inset 0 0 35px #1bdcff08,0 18px 50px #0006}.detail{min-height:560px;position:relative}.detail::before{content:"SYS / ENVIRONMENT TELEMETRY";position:absolute;right:18px;top:11px;color:#288097;font:600 .55rem ui-monospace,monospace;letter-spacing:.14em}
.environment-button{background:transparent;border-bottom-color:#164451}.environment-button:hover,.environment-button[aria-current="true"]{background:linear-gradient(90deg,#0c3b47aa,transparent)}.environment-button[aria-current="true"]{box-shadow:inset 3px 0 var(--glow);text-shadow:0 0 16px #52e6ff55}.identity-card{background:#071b22cc;border-color:#1e5663;border-radius:2px 12px 2px 12px;box-shadow:inset 0 0 20px #20d8ff08}.identity-card dt,th{color:#5fa5b5;letter-spacing:.1em}.identity-card dd{color:#c6f7ff}
input,textarea,select{border-color:#276879;border-radius:2px 8px 2px 8px;background:#020c10;color:var(--ink)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--glow);box-shadow:0 0 0 2px #28d8ff1e}th,td{border-bottom-color:#17434e}.notice{background:#073044;border-color:var(--blue)}.notice.error{background:#38151b;border-color:var(--red)}
dialog{color:var(--ink);background:#06151b;border:1px solid #32c9e5;border-radius:2px 20px 2px 20px;box-shadow:0 24px 100px #000c,0 0 50px #22d8ff22}dialog::backdrop{background:#01070bd9;backdrop-filter:blur(5px)}.confirmation{border-color:#a67731;background:#2b1c09}
@media(max-width:900px){.system-state{display:none}.telemetry{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.telemetry{display:none}.reactor{width:42px;height:42px}}
@media(prefers-reduced-motion:no-preference){.reactor::before{animation:hud-spin 12s linear infinite}.reactor::after{animation:hud-spin 8s linear infinite reverse}.pulse{animation:hud-pulse 2s ease-out infinite}@keyframes hud-spin{to{transform:rotate(360deg)}}@keyframes hud-pulse{50%{box-shadow:0 0 0 8px #38e8bd08,0 0 18px var(--green)}}}