:root {
    --ink: #1b1f24;
    --muted: #6b7280;
    --line: #d8dee4;
    --green: #1f7a3d;
    --green-bg: #eaf7ee;
    --yellow: #8a6100;
    --yellow-bg: #fdf5e2;
    --grey-bg: #f2f3f5;
    --red: #a3221f;
    --red-bg: #fdeceb;
    --button-bg: #e0eeee;
    --button-text: #333333;
    --button-border: #333333;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: #fff;
}

header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--line);
}

header .brand { font-weight: 700; text-decoration: none; color: var(--ink); }
header nav { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
header .who { color: var(--muted); }

main { max-width: 46rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; }

.muted { color: var(--muted); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.button {
    display: inline-flex;
    min-width: 8rem;
    padding: .55rem 1.1rem;
    border: 1px solid var(--button-border);
    border-radius: .4rem;
    background: var(--button-bg);
    color: var(--button-text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.button.small { padding: .2rem .6rem; font-size: .85rem; }
.button.danger { background: var(--red); border-color: var(--red); }
.button[disabled] { background: var(--line); border-color: var(--line); color: var(--muted); cursor: not-allowed; }

button.link {
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    padding: 0;
}

form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
label { display: block; width: 100%; margin-top: .5rem; }
input, select { padding: .5rem; border: 1px solid var(--line); border-radius: .3rem; font: inherit; }

.summary { display: flex; gap: 2.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.figure { display: flex; flex-direction: column; }
.figure .value { font-size: 2rem; font-weight: 700; }
.figure .label { color: var(--muted); font-size: .9rem; }

.blocked {
    display: block;
    padding: .75rem 1rem;
    background: var(--yellow-bg);
    border-left: 3px solid var(--yellow);
    border-radius: .3rem;
    margin-bottom: 1.5rem;
}

.stepper { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 1.5rem 0; }
.stepper li {
    flex: 1;
    padding: .5rem;
    text-align: center;
    font-size: .9rem;
    color: var(--muted);
    border-top: 3px solid var(--line);
}
.stepper li.done { color: var(--ink); border-top-color: var(--green); font-weight: 600; }

.card { padding: 1.25rem 1.5rem; border-radius: .5rem; border: 1px solid var(--line); }
.card-progress { background: var(--grey-bg); }
.card-ready { background: var(--green-bg); border-color: var(--green); }
.card-stopped { background: var(--yellow-bg); border-color: var(--yellow); }
.card-deleted { background: var(--grey-bg); color: var(--muted); }
.card-failed { background: var(--red-bg); border-color: var(--red); }

.card .label { display: inline-block; width: 6rem; color: var(--muted); }
.card code { font-size: 1.05rem; padding: .1rem .4rem; background: rgba(0, 0, 0, .05); border-radius: .25rem; }
.card .actions { display: flex; gap: .75rem; }

.spinner {
    display: inline-block;
    width: .9rem;
    height: .9rem;
    border: 2px solid var(--line);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin 900ms linear infinite;
    vertical-align: -.1rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }

.deployments { list-style: none; padding: 0; }
.deployments li { display: flex; gap: .75rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--line); }

.pill { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .5rem; border-radius: 1rem; background: var(--grey-bg); }
.pill-ready { background: var(--green-bg); color: var(--green); }
.pill-stopped { background: var(--yellow-bg); color: var(--yellow); }
.pill-failed { background: var(--red-bg); color: var(--red); }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }
td form { margin: 0; }
td.named { display: flex; align-items: center; gap: .4rem; }
td.named form { display: inline-flex; }

button.pin {
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}
button.pin[aria-pressed="true"] { color: var(--yellow); }
button.pin:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.account-picker { width: 100%; margin: .5rem 0; }
.account-picker input[type="text"] { width: 100%; margin-bottom: .5rem; }
.account-picker table { cursor: pointer; }
.account-picker tr.user-row:hover td { background: var(--grey-bg); }
.account-picker tr.user-row.selected td { background: var(--green-bg); }
.pagination { display: flex; gap: .75rem; align-items: center; margin-top: .5rem; }