: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; }
.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); } }