:root {
    color: #172033;
    background: #f4f7fb;
    font-family: system-ui, sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; }

h1, h2, p { margin-top: 0; }

p { line-height: 1.5; }

a, button, input, select { font: inherit; }

input:focus-visible, button:focus-visible, a:focus-visible, select:focus-visible {
    outline: 3px solid #5b9cff;
    outline-offset: 3px;
}

.page { display: grid; min-height: 100vh; place-items: center; padding: 1.5rem; }

.card {
    width: min(100%, 28rem);
    padding: 2rem;
    background: #fff;
    border: 1px solid #d8e0eb;
    border-radius: .75rem;
    box-shadow: 0 .5rem 1.5rem rgb(23 32 51 / 8%);
}

.card h1 { margin-bottom: .5rem; font-size: 1.65rem; }
.field { margin-top: 1rem; }
label { display: block; margin-bottom: .35rem; font-weight: 600; }
input, select { width: 100%; padding: .7rem; border: 1px solid #9aa9bd; border-radius: .35rem; background: #fff; }
button { border: 0; border-radius: .35rem; cursor: pointer; font-weight: 700; }
.card button { margin-top: 1.25rem; padding: .7rem 1rem; background: #154e9d; color: #fff; }
.card button:hover { background: #0d3d7f; }
.error { margin-top: .4rem; color: #ad1f1f; }
.notice { padding: .75rem 1rem; background: #fceaea; border-left: .25rem solid #ad1f1f; }

.panel-shell { display: grid; min-height: 100vh; grid-template-columns: 17rem minmax(0, 1fr); }

.panel-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.5rem;
    color: #fff;
    background: #102b52;
}

.panel-brand { color: inherit; font-size: 1.15rem; font-weight: 750; text-decoration: none; }
.panel-navigation { display: grid; gap: .35rem; }

.panel-navigation__link {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem;
    border-radius: .4rem;
    color: inherit;
    text-decoration: none;
}

.panel-navigation__link.is-active { background: #1d5aa6; font-weight: 700; }
.panel-navigation__link.is-disabled { color: #b8c8dd; cursor: not-allowed; }
.panel-navigation__link small { color: #d7e3f2; font-size: .75rem; }

.panel-account { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid #395a83; }
.panel-account__label { margin-bottom: .2rem; color: #b8c8dd; font-size: .85rem; }
.panel-account__name { overflow-wrap: anywhere; font-weight: 700; }
.button { padding: .65rem .85rem; }
.button--primary { display: inline-block; color: #fff; background: #154e9d; text-decoration: none; }
.button--primary:hover { background: #0d3d7f; }
.button--secondary { width: 100%; color: #fff; background: #1d5aa6; }
.button--secondary:hover { background: #2670c9; }

.panel-main { width: min(100%, 76rem); padding: clamp(1.5rem, 4vw, 3.5rem); }
.page-heading { max-width: 44rem; margin-bottom: 2rem; }
.eyebrow { margin-bottom: .5rem; color: #1d5aa6; font-size: .8rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.page-heading h1 { margin-bottom: .6rem; font-size: clamp(2rem, 4vw, 3rem); }
.page-heading p:last-child { margin-bottom: 0; color: #526174; }

.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.status-card {
    min-height: 12rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #d8e0eb;
    border-radius: .75rem;
    box-shadow: 0 .4rem 1.25rem rgb(23 32 51 / 6%);
}

.status-card__label { margin-bottom: .8rem; color: #526174; font-size: .85rem; font-weight: 700; }
.status-card h2 { margin-bottom: .75rem; color: #154e9d; font-size: 1.2rem; }
.status-card p:last-child { margin-bottom: 0; color: #526174; }

.empty-state, .site-card, .domain-card {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #d8e0eb;
    border-radius: .75rem;
    box-shadow: 0 .4rem 1.25rem rgb(23 32 51 / 6%);
}

.empty-state { max-width: 46rem; }
.empty-state h2, .site-card h2, .domain-card h2 { margin-bottom: .6rem; color: #154e9d; font-size: 1.25rem; }
.empty-state p { margin-bottom: 0; color: #526174; }
.site-list { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-card dl { display: grid; gap: .8rem; margin: 1.25rem 0 0; }
.site-card dl div { padding-top: .8rem; border-top: 1px solid #d8e0eb; }
.site-card dt { color: #526174; font-size: .85rem; font-weight: 700; }
.site-card dd { margin: .2rem 0 0; overflow-wrap: anywhere; }
.site-card__actions { margin: 1.25rem 0 0; }
.domain-list { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.domain-card__type { margin-bottom: .5rem; color: #526174; font-size: .85rem; font-weight: 700; }
.domain-card dl, .subdomain-card dl { display: grid; gap: .8rem; margin: 1.25rem 0 0; }
.domain-card dl div, .subdomain-card dl div { padding-top: .8rem; border-top: 1px solid #d8e0eb; }
.domain-card dt, .subdomain-card dt { color: #526174; font-size: .85rem; font-weight: 700; }
.domain-card dd, .subdomain-card dd { margin: .2rem 0 0; overflow-wrap: anywhere; }
.subdomain-list { display: grid; gap: .75rem; margin-top: 1.5rem; }
.subdomain-list h3 { margin: 0; color: #154e9d; font-size: 1rem; }
.subdomain-card { padding: 1rem; border: 1px solid #d8e0eb; border-radius: .5rem; background: #f4f7fb; }
.subdomain-card h4 { margin: 0; color: #172033; overflow-wrap: anywhere; }
.subdomain-card dl { margin-top: .75rem; }
.success-notice { max-width: 46rem; margin: 0 0 1.25rem; padding: .85rem 1rem; border-left: .25rem solid #20744a; background: #e8f6ed; color: #124a2d; }
.site-form { max-width: 46rem; padding: 1.5rem; background: #fff; border: 1px solid #d8e0eb; border-radius: .75rem; box-shadow: 0 .4rem 1.25rem rgb(23 32 51 / 6%); }
.site-form .field:first-child { margin-top: 0; }
.field-optional { color: #526174; font-size: .85rem; font-weight: 400; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.form-actions .button { margin: 0; }
.button-link { color: #154e9d; font-weight: 700; }

@media (max-width: 48rem) {
    .panel-shell { grid-template-columns: 1fr; }
    .panel-sidebar { gap: 1.25rem; }
    .panel-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panel-navigation__link { display: block; }
    .panel-navigation__link small { display: block; margin-top: .25rem; }
    .panel-account { margin-top: 0; }
    .status-grid { grid-template-columns: 1fr; }
    .site-list { grid-template-columns: 1fr; }
    .domain-list { grid-template-columns: 1fr; }
    .form-actions { align-items: stretch; flex-direction: column; }
    .form-actions .button { text-align: center; }
}