:root {
    --bg: #ffffff;
    --surface: #f5f7fb;
    --text: #0f172a;
    --muted: #5b6475;
    --border: #e2e8f0;
    --accent: #2563eb;
    --accent-soft: #e0e9ff;
    --on-accent: #ffffff;
    --ok: #166534;
    --ok-soft: #dcfce7;
    --warn: #92400e;
    --warn-soft: #fef3c7;
    --danger: #b91c1c;
    --danger-soft: #fee2e2;
    --shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 4px 16px rgb(15 23 42 / 0.06);
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b1020;
        --surface: #141b2e;
        --text: #e6e9f2;
        --muted: #9aa3b5;
        --border: #232c42;
        --accent: #7aa2ff;
        --accent-soft: #1d2a4d;
        --on-accent: #0b1020;
        --ok: #86efac;
        --ok-soft: #12321f;
        --warn: #fcd34d;
        --warn-soft: #3a2a0a;
        --danger: #fca5a5;
        --danger-soft: #3b1414;
        --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.25);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    line-height: 1.6;
}

a {
    color: var(--accent);
}

h1:focus {
    outline: none;
}

.hero {
    padding: 3rem 0 2rem;
    max-width: 48rem;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0.5rem 0 1rem;
}

.lead {
    font-size: 1.125rem;
    color: var(--muted);
    margin: 0;
}

.badge {
    display: inline-block;
    margin: 0;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 600;
}

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

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.card h2 {
    font-size: 1.125rem;
    margin: 0 0 0.5rem;
}

.card p {
    margin: 0;
    color: var(--muted);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--accent);
    color: var(--on-accent);
}

.btn-outline {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
    width: 100%;
}

.btn-block {
    width: 100%;
}

.btn-small {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

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

/* Forms */
.account-card h1 {
    font-size: 1.5rem;
    margin: 0 0 1rem;
}

.form {
    display: grid;
    gap: 1rem;
}

.field {
    display: grid;
    gap: 0.25rem;
}

.field label {
    font-weight: 600;
    font-size: 0.9375rem;
}

.field input {
    font: inherit;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
}

.field input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.hint {
    color: var(--muted);
    font-size: 0.8125rem;
}

.check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.validation-message {
    color: #dc2626;
    font-size: 0.8125rem;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

.alert-error {
    background: var(--danger-soft);
    color: var(--danger);
}

.alert-success {
    background: var(--ok-soft);
    color: var(--ok);
}

.alert-warning {
    background: var(--warn-soft);
    color: var(--warn);
}

.aside {
    margin: 1rem 0 0;
    font-size: 0.9375rem;
    text-align: center;
}

.divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 1rem;
    color: var(--muted);
    font-size: 0.875rem;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border);
}

.external-logins {
    display: grid;
    gap: 0.5rem;
}

/* Header user menu */
.user-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-menu form {
    margin: 0;
}

.console-head {
    padding: 2rem 0 1.5rem;
}

.console-head h1 {
    margin: 0.5rem 0 0.25rem;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
}

/* Header navigation and search */
.site-nav {
    display: flex;
    gap: 1.25rem;
}

.site-nav a {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
}

.header-search {
    flex: 1;
    max-width: 26rem;
}

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

.search-box {
    display: flex;
    gap: 0.5rem;
    margin: 0;
}

.search-box input {
    flex: 1;
    min-width: 0;
    font: inherit;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
}

.search-box input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.search-box-large {
    margin-top: 1.5rem;
    max-width: 40rem;
}

.search-box-large input {
    padding: 0.75rem 1rem;
    font-size: 1.0625rem;
}

/* Catalog */
.catalog-head {
    padding: 1.5rem 0 1rem;
}

.catalog-head h1 {
    margin: 0 0 0.5rem;
}

.catalog-head .search-box-large {
    margin-top: 0.5rem;
}

.catalog-layout {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 2rem;
    align-items: start;
}

.filters fieldset {
    border: 0;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}

.filters legend {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.filters label {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.9375rem;
}

.filters select {
    font: inherit;
    padding: 0.375rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
}

.results > .muted {
    margin-top: 0;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
}

.service-card {
    display: grid;
    gap: 0.5rem;
    align-content: start;
}

.service-card h3 {
    margin: 0;
    font-size: 1.0625rem;
}

.service-card h3 a {
    color: var(--text);
    text-decoration: none;
}

.service-card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.service-card {
    position: relative;
}

.service-card:hover {
    border-color: var(--accent);
}

.service-card-head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: start;
}

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
    font-size: 0.875rem;
    color: var(--muted);
}

.card .meta {
    margin: 0;
}

.pill {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.pill-muted {
    background: var(--border);
    color: var(--muted);
}

.pill-warn {
    background: var(--warn-soft);
    color: var(--warn);
}

.pill-ok {
    background: var(--ok-soft);
    color: var(--ok);
}

.tag {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: var(--muted);
    text-decoration: none;
}

.empty h2 {
    margin-top: 0;
}

.empty p + p {
    margin-top: 0.75rem;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.home-services {
    margin-bottom: 2.5rem;
}

/* Service page */
.breadcrumb {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    font-size: 0.875rem;
    color: var(--muted);
}

.service-head {
    display: flex;
    gap: 1.25rem;
    align-items: start;
    padding: 1rem 0 1.5rem;
}

.service-head-text {
    flex: 1;
}

.service-head h1 {
    margin: 0 0 0.25rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
}

.service-head .meta {
    margin: 0.75rem 0 0;
}

.service-logo {
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    object-fit: contain;
}

.service-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.service-actions .btn-outline {
    width: auto;
}

.tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: thin;
}

.tabs a {
    padding: 0.625rem 0.875rem;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tabs a[aria-current="page"] {
    color: var(--text);
    font-weight: 600;
    border-bottom-color: var(--accent);
}

.tabs-compact {
    border-bottom: 0;
}

.tab-panel {
    padding: 1.5rem 0;
    max-width: 48rem;
}

.tab-panel h2:first-child {
    margin-top: 0;
}

.markdown pre,
.markdown code,
code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
}

.markdown pre {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
}

.markdown table {
    border-collapse: collapse;
}

.markdown th,
.markdown td {
    border: 1px solid var(--border);
    padding: 0.375rem 0.625rem;
}

.feature-list {
    padding-left: 1.25rem;
}

.table-scroll {
    overflow-x: auto;
}

.api-table,
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.api-table th,
.api-table td,
.admin-table th,
.admin-table td {
    text-align: left;
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.api-table tr.deprecated {
    opacity: 0.6;
    text-decoration: line-through;
}

.method {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: var(--accent-soft);
    color: var(--accent);
}

.method-post { background: #dcfce7; color: #166534; }
.method-delete { background: #fee2e2; color: #991b1b; }
.method-put, .method-patch { background: #fef3c7; color: #92400e; }

.changelog {
    padding-left: 1.25rem;
}

.changelog time {
    color: var(--muted);
    margin: 0 0.5rem;
}

.agent-docs {
    max-width: 48rem;
    margin-bottom: 2rem;
}

.agent-docs p + p {
    margin-top: 0.5rem;
}

/* Admin */
.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

.admin-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.admin-form {
    display: grid;
    gap: 1rem;
    max-width: 56rem;
    margin-bottom: 2rem;
}

.admin-form fieldset {
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1rem;
    display: grid;
    gap: 0.75rem;
}

.admin-form legend {
    font-weight: 700;
    padding: 0 0.25rem;
}

.admin-form label {
    display: grid;
    gap: 0.25rem;
    font-weight: 600;
    font-size: 0.9375rem;
}

.admin-form label:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-form input:not([type="checkbox"]),
.admin-form select,
.admin-form textarea {
    font: inherit;
    font-weight: 400;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    width: 100%;
}

.admin-form .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
}

.admin-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.5rem;
}

.synonym-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}

.synonym-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--border);
}

.synonym-list form {
    margin: 0;
}

@media (max-width: 48rem) {
    .site-nav {
        display: none;
    }

    .catalog-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .filters form {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
        gap: 0.75rem;
    }

    .service-head {
        flex-wrap: wrap;
    }
}

/* Service connect prompt */
.admin-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lead-muted {
    color: var(--muted);
    max-width: 56rem;
}

.connect-status {
    max-width: 56rem;
    margin-bottom: 1rem;
}

.uri-list {
    padding-left: 1.25rem;
    font-size: 0.875rem;
}

.connect-result {
    max-width: 56rem;
    margin-bottom: 2rem;
}

.prompt-box {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.45;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    resize: vertical;
}

/* Prompts are hard-wrapped Markdown: on wide screens keep their lines instead of wrapping them twice. */
@media (min-width: 48rem) {
    .prompt-box {
        white-space: pre;
        overflow-x: auto;
    }
}

/* ───────────── Console, /build and publishing (spec 04, 06 §1.5) ───────────── */

.btn:focus-visible,
.chip:focus-within,
.icon-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-primary:hover {
    filter: brightness(1.08);
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-auto {
    width: auto;
}

.btn-large {
    padding: 0.8125rem 1.25rem;
    font-size: 1.0625rem;
}

.btn-danger {
    background: var(--danger);
    color: var(--bg);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.icon {
    flex: none;
}

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    background: none;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
}

.icon-button:hover {
    color: var(--danger);
    border-color: var(--border);
}

.input {
    font: inherit;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    width: 100%;
}

.input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.page-head {
    padding: 1.5rem 0 1rem;
    max-width: 48rem;
}

.page-head h1 {
    margin: 0.5rem 0;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.step-no {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 700;
}

/* Stepper */
.stepper {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0.5rem 0 1.5rem;
    padding: 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

.stepper li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stepper li span {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.8125rem;
    font-weight: 700;
}

.stepper li.is-current {
    color: var(--text);
    font-weight: 600;
}

.stepper li.is-current span {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* /build layout */
.build-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 2rem;
    align-items: start;
    margin-bottom: 2rem;
}

.build-main {
    display: grid;
    gap: 2rem;
}

.build-section h2 {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.25rem;
    margin: 0 0 1rem;
}

.build-section > .hint {
    margin: -0.5rem 0 0.875rem;
}

.select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.875rem;
}

.select-card {
    position: relative;
    display: grid;
    gap: 0.375rem;
    align-content: start;
    padding: 1rem;
    border: 1.5px solid var(--border);
    border-radius: 0.875rem;
    background: var(--bg);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.select-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.select-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.select-card:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.select-card:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 55%, var(--bg));
}

.select-card.is-disabled {
    cursor: default;
    opacity: 0.65;
}

.select-card.is-disabled:hover {
    border-color: var(--border);
    box-shadow: none;
}

.select-card-top {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 0.25rem;
}

.select-card-title {
    font-weight: 700;
    font-size: 1.0625rem;
}

.select-card-text {
    color: var(--muted);
    font-size: 0.9375rem;
}

.select-card .meta {
    margin-top: 0.25rem;
}

.select-card-link {
    margin-left: auto;
    font-size: 0.8125rem;
    position: relative;
    z-index: 1;
}

.check-mark {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 0.375rem;
    border: 1.5px solid var(--border);
    background: var(--bg);
    display: grid;
    place-items: center;
}

.select-card:has(input:checked) .check-mark {
    background: var(--accent);
    border-color: var(--accent);
}

.select-card:has(input:checked) .check-mark::after {
    content: "";
    width: 0.375rem;
    height: 0.6875rem;
    border: solid var(--on-accent);
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}

.select-card.is-disabled .check-mark {
    visibility: hidden;
}

.avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    flex: none;
    object-fit: contain;
}

.avatar-letter {
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.125rem;
    color: hsl(var(--hue) 70% 35%);
    background: hsl(var(--hue) 85% 92%);
}

@media (prefers-color-scheme: dark) {
    .avatar-letter {
        color: hsl(var(--hue) 85% 80%);
        background: hsl(var(--hue) 40% 22%);
    }
}

/* Radio chips */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4375rem 0.875rem;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9375rem;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chip:hover {
    border-color: var(--accent);
}

.chip:has(input:checked),
.chip[aria-current="true"] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

/* Project choice */
.choice-list {
    display: grid;
    gap: 0.625rem;
}

.choice {
    display: flex;
    gap: 0.75rem;
    align-items: start;
    padding: 0.875rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 0.75rem;
    cursor: pointer;
}

.choice > input {
    margin-top: 0.3rem;
    accent-color: var(--accent);
}

.choice > span {
    display: grid;
    gap: 0.25rem;
    flex: 1;
}

.choice:has(> input:checked) {
    border-color: var(--accent);
}

.choice-sub {
    color: var(--muted);
    font-size: 0.875rem;
}

.choice .input {
    margin-top: 0.375rem;
    max-width: 24rem;
}

.choice:not(:has(> input:checked)) .input {
    display: none;
}

/* Summary aside */
.build-summary {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.build-summary h2 {
    font-size: 1rem;
    margin: 0;
}

.summary-count {
    margin: 0;
    color: var(--muted);
}

.summary-count strong {
    color: var(--text);
    font-size: 1.5rem;
    margin-right: 0.25rem;
}

.summary-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.summary-list li {
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 600;
}

.summary-list:empty {
    display: none;
}

.summary-points {
    margin: 0.25rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
    display: grid;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--muted);
}

.summary-points li::before {
    content: "✓";
    color: var(--ok);
    font-weight: 700;
    margin-right: 0.5rem;
}

.build-summary .hint {
    margin: 0;
}

@media (max-width: 56rem) {
    .build-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .build-summary {
        position: sticky;
        top: auto;
        bottom: 0.75rem;
        z-index: 5;
    }

    .build-summary h2,
    .summary-points,
    .summary-list,
    .build-summary .hint {
        display: none;
    }

    .build-summary {
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 0.625rem 0.75rem 0.625rem 1rem;
    }

    .build-summary .summary-count {
        font-size: 0.875rem;
        line-height: 1.3;
    }

    .build-summary .btn {
        white-space: nowrap;
        width: auto;
        font-size: 0.9375rem;
        padding: 0.625rem 0.875rem;
    }
}

/* Panels */
.panel {
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.25rem;
    background: var(--bg);
    display: grid;
    gap: 0.875rem;
    align-content: start;
}

.panel-highlight {
    border-color: var(--accent);
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

.panel-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.panel-head h2 {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    font-size: 1.1875rem;
}

.panel-title {
    margin: 0;
    font-size: 1rem;
}

.panel p {
    margin: 0;
}

.panel .alert {
    margin: 0;
}

/* Project page */
.project-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0 1.25rem;
}

.project-head h1 {
    margin: 0 0 0.25rem;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    letter-spacing: -0.01em;
}

.project-head .meta {
    margin: 0;
}

.project-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 2rem;
}

.project-main,
.project-aside {
    display: grid;
    gap: 1.5rem;
}

@media (max-width: 56rem) {
    .project-layout {
        grid-template-columns: 1fr;
    }
}

.secret-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    background: var(--surface);
}

.secret-masked {
    flex: 1;
    min-width: 12rem;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
}

.secret-value,
.secret-field .when-shown {
    display: none;
}

.secret-field:has(.secret-toggle input:checked) .secret-masked,
.secret-field:has(.secret-toggle input:checked) .when-hidden {
    display: none;
}

.secret-field:has(.secret-toggle input:checked) .secret-value {
    display: block;
    flex: 1;
    min-width: 12rem;
    word-break: break-all;
}

.secret-field:has(.secret-toggle input:checked) .when-shown {
    display: inline;
}

.secret-toggle:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.code-block {
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    overflow: hidden;
}

.code-block-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 0.875rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
    color: var(--muted);
    font-weight: 600;
}

.code-block pre {
    margin: 0;
    padding: 0.75rem 0.875rem;
    overflow-x: auto;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.service-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.service-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border);
}

.service-list li:last-child {
    border-bottom: 0;
}

.service-list .avatar {
    width: 2.125rem;
    height: 2.125rem;
    font-size: 0.9375rem;
}

.service-list-text {
    flex: 1;
    display: grid;
    min-width: 0;
}

.service-list-text a {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.service-list-text a:hover {
    color: var(--accent);
}

.service-list form {
    margin: 0;
}

.service-list-wide {
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    padding: 0 1rem;
}

.inline-form {
    display: flex;
    gap: 0.5rem;
    margin: 0;
}

.inline-form .btn {
    white-space: nowrap;
}

.danger-zone {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
}

.danger-zone summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.9375rem;
}

.danger-zone form {
    display: grid;
    gap: 0.5rem;
    justify-items: start;
    margin: 0.875rem 0 0;
}

.danger-zone form + form {
    padding-top: 0.875rem;
    border-top: 1px dashed var(--border);
}

.restrictions-form {
    display: grid;
    gap: 0.375rem;
    justify-items: start;
}

.restrictions-form label {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-top: 0.5rem;
}

.restrictions-form textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    resize: vertical;
}

.alert ul,
ul.alert {
    margin: 0 0 0.75rem;
    padding-left: 1.75rem;
}

.audit-table {
    font-size: 0.875rem;
}

.audit-table .nowrap {
    white-space: nowrap;
}

/* Console home */
.console-head .lead {
    margin-top: 0.25rem;
}

.entry-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.entry-card {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.entry-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.entry-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.entry-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: var(--accent);
    color: var(--on-accent);
    margin-bottom: 0.25rem;
}

.entry-icon-alt {
    background: var(--text);
    color: var(--bg);
}

.entry-title {
    font-size: 1.1875rem;
    font-weight: 700;
}

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

.entry-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    color: var(--accent);
    font-weight: 600;
}

.console-section {
    margin-bottom: 2.5rem;
}

.console-section h2 {
    font-size: 1.25rem;
}

.empty-state {
    display: grid;
    justify-items: start;
    gap: 0.75rem;
    padding: 1.5rem;
    border: 1.5px dashed var(--border);
    border-radius: 1rem;
}

.empty-state p {
    margin: 0;
    color: var(--muted);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
}

.project-card {
    display: grid;
    gap: 0.5rem;
    color: var(--text);
    text-decoration: none;
}

.project-card:hover {
    border-color: var(--accent);
}

.project-card-name {
    font-weight: 700;
    font-size: 1.0625rem;
}

/* Publisher console */
.how-steps {
    list-style: none;
    margin: 0.5rem 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.how-steps li {
    display: grid;
    gap: 0.375rem;
    align-content: start;
    padding: 1.125rem;
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    background: var(--surface);
}

.how-steps li span:last-child {
    color: var(--muted);
    font-size: 0.9375rem;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin: 0 0 2.5rem;
}

.mcp-setup {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    display: grid;
    gap: 0.75rem;
}

.mcp-setup[open] {
    display: grid;
}

.mcp-setup summary {
    cursor: pointer;
    font-weight: 600;
}

.mcp-setup > * + * {
    margin-top: 0.75rem;
}

.owned-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.owned-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem 1rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.875rem;
}

.owned-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: end;
}

.owned-actions form {
    margin: 0;
}

.owned-creds {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    display: grid;
    gap: 0.75rem;
}

.owned-creds summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9375rem;
}

.owned-creds > * + * {
    margin-top: 0.75rem;
}

.owned-creds .alert {
    margin-bottom: 0;
}

.cred-list {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0.5rem 1rem;
    margin: 0;
    font-size: 0.9375rem;
}

.cred-list dt {
    color: var(--muted);
}

.cred-list dd {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    min-width: 0;
}

.cred-list code {
    word-break: break-all;
}

.rotate-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0;
}

.secret-value-shown {
    display: block;
    flex: 1;
    min-width: 12rem;
    word-break: break-all;
}

.key-explainer {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 0.75rem;
    background: var(--surface);
    max-width: 56rem;
}

.key-explainer h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
}

.key-explainer ul {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.375rem;
    color: var(--muted);
    font-size: 0.9375rem;
}

.key-explainer strong {
    color: var(--text);
}

.owned-main {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.25rem;
}

.owned-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.owned-main p {
    margin: 0;
}

.owned-item form {
    margin: 0;
}

@media (max-width: 40rem) {
    .cred-list {
        grid-template-columns: 1fr;
    }

    .owned-actions {
        grid-column: 1 / -1;
        justify-content: start;
    }

    .owned-item {
        flex-wrap: wrap;
    }
}

/* Calls to action on public pages */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.hero-actions .btn-outline {
    width: auto;
}