:root {
    --color-brand-primary: #0A1E55;
    --color-page-bg: #f3f4f6;
    --color-surface: #ffffff;
    --color-surface-muted: #f8f9fc;
    --color-text-primary: #1f2937;
    --color-text-secondary: #4f5d78;
    --color-text-muted: #6b7280;
    --color-border-soft: #d9e0ea;
    --color-border-input: #aab5cc;
    --color-focus: #163c85;
    --color-status-info-bg: #eef4ff;
    --color-status-info-text: #163c85;
    --color-status-success-bg: #edf8ef;
    --color-status-success-text: #1f6c34;
    --color-status-warning-bg: #fff8e8;
    --color-status-warning-text: #8a5a00;
    --color-status-error-bg: #fff2f2;
    --color-status-error-text: #a32020;
    --color-page-tile-brand-rail-start: #f3f5fb;
    --color-page-tile-brand-rail-mid: #7f8eb6;
    --color-page-tile-brand-rail-end: #0A1E55;
    --color-btn-primary-bg: #0A1E55;
    --color-btn-primary-bg-hover: #204596;
    --color-btn-primary-text: #ffffff;
    --color-btn-secondary-bg: #efefef;
    --color-btn-secondary-bg-hover: #f9fafc;
    --color-btn-secondary-border: #c8d0dd;
    --color-btn-secondary-border-hover: #7f92ad;
    --color-btn-secondary-text: #0A1E55;
    --color-btn-danger-bg: #fff2f2;
    --color-btn-danger-bg-hover: #ffe5e5;
    --color-btn-danger-border: #e4b0b0;
    --color-btn-danger-border-hover: #c56767;
    --color-btn-danger-text: #9d2323;
    --font-family-base: Arial, Helvetica;
    --font-size-page-title: 2rem;
    --font-size-page-subtitle: 0.9rem;
    --font-size-body: 14px;
    --font-size-label: 0.9rem;
    --font-size-input: 0.92rem;
    --font-size-note: 0.86rem;
    --font-size-error: 0.84rem;
    --font-size-section-title: 1rem;
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --size-page-tile-max: 1120px;
    --size-page-tile-max-wide: 1520px;
    --size-page-tile-padding-inline: 26px;
    --size-page-tile-brand-source-width: 1024px;
    --size-page-tile-brand-source-height: 1022px;
    --size-page-tile-brand-crop-width: 895px;
    --size-page-tile-brand-crop-height: 460px;
    --size-page-tile-brand-crop-offset-x: -73px;
    --size-page-tile-brand-crop-offset-y: -294px;
    --size-page-tile-brand-rail-gap: 8px;
    --size-page-tile-brand-rail-height: 30px;
    --size-page-tile-brand-scale: 0.24;
    --size-page-content-max-full: calc(var(--size-page-tile-max) - var(--size-page-tile-padding-inline) - var(--size-page-tile-padding-inline));
    --size-page-content-max-compact: 680px;
    --size-page-content-max-standard: 780px;
    --size-page-content-max-reading: 880px;
    --size-form-label-width: 200px;
    --size-input-height: 44px;
    --size-button-height: 44px;
    --size-field-max-short: 220px;
    --size-field-max-medium: 360px;
    --radius-tile: 16px;
    --radius-control: 10px;
    --radius-status: 12px;
    --radius-section-card: 12px;
    --shadow-tile: 0 14px 32px rgba(8, 30, 84, 0.08);
    --shadow-focus-ring: 0 0 0 3px rgba(22, 60, 133, 0.14);
}

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

html {
    min-height: 100%;
    background: var(--color-page-bg);
}

body.page-body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-page-bg);
    color: var(--color-text-primary);
    font-family: var(--font-family-base, Arial, Helvetica), sans-serif;
    font-size: var(--font-size-body);
}

.page-shell {
    min-height: 100vh;
    padding: var(--space-md);
}

.page-tile {
    max-width: var(--size-page-tile-max);
    margin: 0 auto;
    padding: 22px var(--size-page-tile-padding-inline) 20px;
    background-color: var(--color-surface);
    background-image: none;
    border-radius: var(--radius-tile);
    box-shadow: var(--shadow-tile);
}

.page-tile--wide {
    max-width: var(--size-page-tile-max-wide);
}

.page-tile--public {
    padding: 0 0 20px;
    overflow: hidden;
}

.page-tile__body {
    padding: 22px var(--size-page-tile-padding-inline) 0;
}

.page-tile-brand {
    padding: 12px var(--size-page-tile-padding-inline) 0;
    background: var(--color-surface);
}

.page-tile-brand__image {
    display: block;
    width: calc(var(--size-page-tile-brand-crop-width) * var(--size-page-tile-brand-scale));
    height: calc(var(--size-page-tile-brand-crop-height) * var(--size-page-tile-brand-scale));
    background-image: url(../images/astragalFullLogo.png);
    background-repeat: no-repeat;
    background-position:
        calc(var(--size-page-tile-brand-crop-offset-x) * var(--size-page-tile-brand-scale))
        calc(var(--size-page-tile-brand-crop-offset-y) * var(--size-page-tile-brand-scale));
    background-size:
        calc(var(--size-page-tile-brand-source-width) * var(--size-page-tile-brand-scale))
        calc(var(--size-page-tile-brand-source-height) * var(--size-page-tile-brand-scale));
}

.page-tile-brand::after {
    content: "";
    display: block;
    height: var(--size-page-tile-brand-rail-height);
    margin-top: var(--size-page-tile-brand-rail-gap);
    background: linear-gradient(90deg, var(--color-page-tile-brand-rail-start) 0%, var(--color-page-tile-brand-rail-mid) 52%, var(--color-page-tile-brand-rail-end) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -1px 0 rgba(10, 30, 85, 0.08);
}

.page-content {
    width: 100%;
    max-width: var(--size-page-content-max-full);
    margin: 0 auto;
}

.page-content--full {
    max-width: var(--size-page-content-max-full);
}

.page-content--compact {
    max-width: var(--size-page-content-max-compact);
}

.page-content--standard {
    max-width: var(--size-page-content-max-standard);
}

.page-content--reading {
    max-width: var(--size-page-content-max-reading);
}

.public-footer {
    max-width: var(--size-page-content-max-standard);
    margin: 18px auto 0;
    padding: 14px 18px 0;
    border-top: 1px solid var(--color-border-soft);
    color: var(--color-text-secondary);
    text-align: center;
}

.public-footer__summary {
    margin: 0;
    font-size: var(--font-size-note);
}

.public-footer__links {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.public-footer__links a {
    color: var(--color-brand-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.page-title {
    margin: 0 0 var(--space-xs);
    color: var(--color-brand-primary);
    font-size: var(--font-size-page-title);
    line-height: 1.05;
}

.page-subtitle {
    margin: 0 0 12px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-page-subtitle);
}

.page-status {
    display: none;
    margin-bottom: var(--space-md);
    padding: var(--space-sm) 14px;
    border-radius: var(--radius-status);
    font-weight: 600;
}

.page-status--info,
.page-status--success,
.page-status--warning,
.page-status--error {
    display: block;
}

.page-status--info {
    background: var(--color-status-info-bg);
    color: var(--color-status-info-text);
}

.page-status--success {
    background: var(--color-status-success-bg);
    color: var(--color-status-success-text);
}

.page-status--warning {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-text);
}

.page-status--error {
    background: var(--color-status-error-bg);
    color: var(--color-status-error-text);
}

.form-grid {
    display: grid;
    gap: 12px;
}

.page-tile .form-grid .form-row {
    display: grid;
    grid-template-columns: var(--size-form-label-width) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 0;
}

.page-tile .form-grid .form-row.form-row--compact {
    align-items: center;
}

.page-tile .form-grid .form-row.form-row--choice {
    display: block;
    margin-left: calc(var(--size-form-label-width) + 20px);
}

.page-tile .form-grid .form-row.form-row--choice .form-choice {
    display: block;
}

.page-tile .form-grid .form-row.form-row--choice label {
    padding-top: 0;
    color: var(--color-text-primary);
    white-space: normal;
}

.page-tile .form-grid .form-row label,
.page-tile .form-grid .form-label {
    width: auto;
    margin-right: 0;
    padding-top: 9px;
    color: var(--color-brand-primary);
    font-size: var(--font-size-label);
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.form-field,
.form-control {
    width: 100%;
    min-height: var(--size-input-height);
    padding: 9px 12px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-control);
    background: #fff;
    color: var(--color-text-primary);
    font: inherit;
    font-size: var(--font-size-input);
}

.form-field.form-field--short,
.form-control.form-control--short {
    max-width: var(--size-field-max-short);
}

.form-field.form-field--medium,
.form-control.form-control--medium {
    max-width: var(--size-field-max-medium);
}

.form-value {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--size-input-height);
    padding: 9px 12px;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-control);
    background: var(--color-surface-muted);
    color: var(--color-text-primary);
    font: inherit;
    font-size: var(--font-size-input);
    overflow-wrap: anywhere;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-focus);
    box-shadow: var(--shadow-focus-ring);
}

.form-control:disabled,
.form-control[readonly] {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.field-wrap {
    position: relative;
    width: 100%;
}

.field-wrap .form-control {
    padding-right: 56px;
}

.field-action {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--color-brand-primary);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    padding: 0;
}

.field-action .pw-icon {
    display: block;
}

.field-error {
    margin-top: 5px;
    color: var(--color-status-error-text);
    font-size: var(--font-size-error);
}

.field-error[hidden] {
    display: none !important;
}

.section-card {
    padding: 14px 16px;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-section-card);
    background: var(--color-surface-muted);
}

.section-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: 12px;
}

.section-card__title {
    margin: 0;
    color: var(--color-brand-primary);
    font-size: var(--font-size-section-title);
    line-height: 1.2;
}

.section-card__actions {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.section-card__summary {
    color: var(--color-text-secondary);
    line-height: 1.45;
    white-space: pre-line;
}

.section-card__summary.is-empty {
    color: var(--color-text-muted);
    font-style: italic;
}

.section-card__editor {
    margin-top: 12px;
}

.section-card__editor[hidden] {
    display: none !important;
}

.section-card .form-row:last-child {
    margin-bottom: 0;
}

.page-callout {
    margin: 2px 0 0 calc(var(--size-form-label-width) + var(--space-sm));
    padding: 10px 14px;
    border: 1px solid var(--color-border-soft);
    border-radius: 12px;
    background: var(--color-surface-muted);
    color: #24395f;
    font-size: var(--font-size-note);
}

.page-callout--columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
}

.page-callout p,
.page-callout ul {
    margin: 0;
}

.page-callout ul {
    padding-left: 18px;
}

.page-actions {
    margin-top: 20px;
    margin-left: calc(var(--size-form-label-width) + var(--space-sm));
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.page-actions--flush {
    margin-left: 0;
}

.page-note {
    margin: 12px 0 0 calc(var(--size-form-label-width) + var(--space-sm));
    color: var(--color-text-secondary);
    font-size: var(--font-size-note);
}

.page-note--flush {
    margin-left: 0;
}

.page-status-actions {
    margin: -4px 0 16px calc(var(--size-form-label-width) + var(--space-sm));
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.page-status-actions[hidden] {
    display: none !important;
}

.page-actions .btn {
    width: auto;
    min-width: 226px;
}

.page-tile .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--size-button-height);
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    box-sizing: border-box;
    font: inherit;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, filter 120ms ease, transform 120ms ease;
}

.btn.btn--primary {
    border-color: var(--color-btn-primary-bg);
    background: var(--color-btn-primary-bg);
    color: var(--color-btn-primary-text);
}

.page-tile .btn.btn--primary:hover:not(:disabled) {
    background: var(--color-btn-primary-bg-hover);
    border-color: var(--color-btn-primary-bg-hover);
    box-shadow: 0 8px 18px rgba(10, 30, 85, 0.18);
    transform: translateY(-1px);
}

.btn.btn--secondary {
    border-color: var(--color-btn-secondary-border);
    background: var(--color-btn-secondary-bg);
    color: var(--color-btn-secondary-text);
}

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

.page-tile .btn.btn--secondary:hover:not(:disabled) {
    background: var(--color-btn-secondary-bg-hover);
    border-color: var(--color-btn-secondary-border-hover);
    box-shadow: 0 6px 14px rgba(10, 30, 85, 0.12);
    transform: translateY(-1px);
}

.page-tile .btn.btn--danger:hover:not(:disabled) {
    background: var(--color-btn-danger-bg-hover);
    border-color: var(--color-btn-danger-border-hover);
    box-shadow: 0 6px 14px rgba(157, 35, 35, 0.12);
    transform: translateY(-1px);
}

.page-tile .btn:disabled {
    cursor: default;
    opacity: 0.72;
    transform: none;
    box-shadow: none;
}

.page-tile .btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.audit-line {
    line-height: 1.6;
}

.audit-line__timezone {
    margin-left: 10px;
}

@media (max-width: 760px) {
    :root {
        --size-page-tile-padding-inline: 14px;
        --size-page-tile-brand-scale: 0.2;
        --size-page-tile-brand-rail-gap: 6px;
        --size-page-tile-brand-rail-height: 24px;
    }

    .page-shell {
        padding: var(--space-sm);
    }

    .page-tile {
        padding: 18px var(--size-page-tile-padding-inline) 18px;
    }

    .page-tile--public {
        padding: 0 0 18px;
    }

    .page-tile__body {
        padding-top: 18px;
    }

    .page-title {
        font-size: 1.8rem;
    }

    .public-footer {
        padding-inline: 0;
    }

    .public-footer__links {
        gap: 12px;
    }

    .page-tile .form-grid .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    .page-tile .form-grid .form-row label,
    .page-tile .form-grid .form-label {
        padding-top: 0;
    }

    .page-tile .form-grid .form-row.form-row--choice {
        margin-left: 0;
    }

    .page-callout,
    .page-status-actions,
    .page-actions,
    .page-note {
        margin-left: 0;
    }

    .page-callout--columns {
        grid-template-columns: 1fr;
    }

    .section-card__head {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions .btn {
        min-width: 0;
    }
}