:root {
    --portal-green: #1f4b3f;
    --portal-green-light: #2d6b58;
    --portal-bg: #f4f7f5;
    --portal-card: #ffffff;
    --portal-text: #1f2a24;
    --portal-muted: #5f7168;
    --portal-border: #d8e3dc;
    --portal-danger: #9b2c2c;
    --portal-success: #276749;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--portal-text);
    background: var(--portal-bg);
    line-height: 1.5;
}

a { color: var(--portal-green-light); }
a:hover { color: var(--portal-green); }

.portal-header {
    background: var(--portal-green);
    color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.portal-header-inner,
.portal-main,
.portal-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.portal-shell-wide .portal-main,
.portal-main:has(.portal-shell-wide),
.portal-shell.portal-shell-wide {
    max-width: 1280px;
}

body:has(.portal-shell-wide) .portal-header-inner,
body:has(.portal-shell-wide) .portal-main,
body:has(.portal-shell-wide) .portal-footer-inner {
    max-width: 1280px;
}

.revenue-forecast .data-table tfoot th {
    border-top: 2px solid var(--portal-border);
    font-weight: 700;
}

.portal-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
}

.portal-brand {
    color: #fff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.portal-brand strong { font-size: 1.05rem; }
.portal-brand span { font-size: 0.82rem; opacity: 0.85; }

.portal-nav {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.portal-nav a { color: #fff; text-decoration: none; }
.portal-user { opacity: 0.9; font-size: 0.92rem; }

.portal-main { padding: 2rem 1.25rem 3rem; }

.portal-footer {
    border-top: 1px solid var(--portal-border);
    background: #fff;
    padding: 1.25rem 0 2rem;
    color: var(--portal-muted);
    font-size: 0.92rem;
}

.portal-shell.narrow { max-width: 720px; margin: 0 auto; }

.page-intro { margin-bottom: 1.5rem; }
.page-intro.split {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-intro h1 { margin: 0 0 0.35rem; font-size: 1.8rem; }
.subtitle { margin: 0; color: var(--portal-muted); }
.hint { color: var(--portal-muted); font-size: 0.92rem; }

.card {
    background: var(--portal-card);
    border: 1px solid var(--portal-border);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tile {
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(31, 75, 63, 0.12);
}

.tile h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.tile p { margin: 0 0 0.75rem; color: var(--portal-muted); }
.tile-static { cursor: default; }

.dashboard-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.item-list { list-style: none; padding: 0; margin: 0; }
.item-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--portal-border);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 0.55rem 1rem;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}

.btn-primary { background: var(--portal-green); color: #fff; }
.btn-primary:hover { background: var(--portal-green-light); color: #fff; }
.btn-secondary { background: #fff; border-color: var(--portal-border); color: var(--portal-text); }
.btn-danger { background: #c0392b; color: #fff; border-color: #c0392b; }
.btn-danger:hover { background: #a93226; color: #fff; }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.92rem; }
.admin-delete-form { display: inline-flex; margin: 0; }
.table-actions { white-space: nowrap; }
.message header .admin-delete-form { margin-left: auto; }

.badge-ok {
    background: #e5f4ec;
    color: #1f6b45;
    border: 1px solid #b9dcc8;
}

.badge-warn {
    background: #fff4e5;
    color: #8a4b00;
    border: 1px solid #f0d2a0;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #e8f0eb;
    color: var(--portal-green);
    font-size: 0.82rem;
    white-space: nowrap;
}

.alert {
    padding: 0.85rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.alert-success { background: #e6f4ea; color: var(--portal-success); }
.alert-error { background: #fdecea; color: var(--portal-danger); }

.portal-form { display: grid; gap: 0.85rem; max-width: 640px; }
.portal-form-wide { max-width: 760px; }
.form-section-title {
    margin: 0.75rem 0 0;
    font-size: 1.05rem;
}
.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}
.form-group { display: grid; gap: 0.35rem; }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--portal-border);
    border-radius: 8px;
    font: inherit;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.inline-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.auth-shell {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - 180px);
}

.auth-card { width: min(100%, 480px); }

.table-wrap { overflow-x: auto; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

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

.message-thread { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
.message {
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    padding: 0.85rem;
    background: #fafcfb;
}

.message-staff { border-color: #b8d4c8; background: #f0f7f3; }
.message header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    font-size: 0.92rem;
}

.pre-wrap { white-space: pre-wrap; }

.detail-list {
    display: grid;
    grid-template-columns: minmax(8rem, 11rem) 1fr;
    gap: 0.35rem 1rem;
    margin: 0 0 1rem;
}

.detail-list dt {
    margin: 0;
    color: var(--portal-muted, #5a6b61);
    font-size: 0.92rem;
}

.detail-list dd {
    margin: 0;
}

.subdomain-input-wrap {
    display: flex;
    align-items: stretch;
    max-width: 100%;
}

.subdomain-input-wrap input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    min-width: 0;
}

.subdomain-suffix {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    border: 1px solid var(--portal-border);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: #f4f7f5;
    color: var(--portal-muted, #5a6b61);
    white-space: nowrap;
}

.subdomain-preview-line {
    margin-top: 0.35rem;
}

.subdomain-feedback {
    margin: 0.35rem 0 0;
    font-size: 0.92rem;
}

.subdomain-feedback--idle { color: var(--portal-muted, #5a6b61); }
.subdomain-feedback--checking { color: var(--portal-muted, #5a6b61); }
.subdomain-feedback--available { color: var(--portal-success); }
.subdomain-feedback--taken,
.subdomain-feedback--invalid { color: var(--portal-danger); }

.consent-block {
    padding: 0.85rem 1rem;
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    background: #fafcfb;
}

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.45;
}

.checkbox-row input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.consent-hint.is-hidden {
    display: none;
}

.consent-hint {
    margin: 0.75rem 0 0;
}

.info-box {
    padding: 0.85rem 1rem;
    border: 1px solid #c5d9ce;
    border-radius: 10px;
    background: #f0f7f3;
    margin-bottom: 0.85rem;
}

.info-box-title {
    margin: 0 0 0.65rem;
    font-weight: 600;
}

.info-box-list {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.55rem;
    font-size: 0.95rem;
    line-height: 1.45;
}

.info-box-list li {
    padding-left: 0.15rem;
}

.agb-consent a {
    color: var(--portal-green);
    text-decoration: underline;
}

.legal-shell {
    max-width: 920px;
}

.legal-document {
    padding: 1.75rem 1.5rem 2rem;
}

.legal-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--portal-border);
}

.legal-eyebrow {
    margin: 0 0 0.35rem;
    color: var(--portal-muted, #5a6b61);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.legal-header h1 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.45rem, 2.5vw, 1.9rem);
    line-height: 1.25;
}

.legal-meta {
    margin: 0;
    color: var(--portal-muted, #5a6b61);
}

.legal-toc {
    margin-bottom: 1.75rem;
    padding: 1rem 1.15rem;
    border-radius: 10px;
    background: #f0f7f3;
    border: 1px solid #c5d9ce;
}

.legal-toc h2 {
    margin: 0 0 0.65rem;
    font-size: 1rem;
}

.legal-toc ol {
    margin: 0;
    padding-left: 1.25rem;
    columns: 2;
    column-gap: 1.5rem;
}

.legal-toc li {
    break-inside: avoid;
    margin: 0.2rem 0;
    font-size: 0.92rem;
}

.legal-toc a {
    color: var(--portal-text);
    text-decoration: none;
}

.legal-toc a:hover {
    color: var(--portal-green);
    text-decoration: underline;
}

.legal-section {
    margin: 0 0 1.5rem;
    padding-top: 0.25rem;
    scroll-margin-top: 1rem;
}

.legal-section h2 {
    display: flex;
    gap: 0.45rem;
    align-items: baseline;
    margin: 0 0 0.65rem;
    font-size: 1.15rem;
}

.legal-num {
    color: var(--portal-green);
    font-variant-numeric: tabular-nums;
}

.legal-section p {
    margin: 0 0 0.65rem;
    line-height: 1.55;
}

.legal-section ul {
    margin: 0.35rem 0 0.75rem;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.35rem;
}

.legal-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--portal-border);
}

.workflow-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.workflow-steps li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: baseline;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--portal-border);
    background: #fafbfa;
}

.workflow-steps li.is-done {
    border-color: #c5d9ce;
    background: #f0f7f3;
}

.workflow-steps li.is-done strong::before {
    content: "✓ ";
    color: var(--portal-green);
}

.workflow-steps li span {
    color: #5a6b62;
    font-size: 0.92rem;
}

.workflow-admin-block {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--portal-border);
}

.workflow-admin-block:first-of-type {
    margin-top: 0.5rem;
    padding-top: 0;
    border-top: 0;
}

.workflow-admin-block h3 {
    margin: 0 0 0.55rem;
    font-size: 1rem;
}

.checklist-form {
    display: grid;
    gap: 0.55rem;
    max-width: 28rem;
}

.mail-fail-actions {
    margin-top: 0.65rem;
    display: grid;
    gap: 0.45rem;
}

@media (max-width: 720px) {
    .legal-toc ol { columns: 1; }
    .legal-document { padding: 1.25rem 1rem 1.5rem; }
}

@media (max-width: 720px) {
    .portal-header-inner { flex-direction: column; align-items: flex-start; padding-top: 0.85rem; padding-bottom: 0.85rem; }
    .portal-nav { width: 100%; }
    .form-row { grid-template-columns: 1fr; }
    .subdomain-input-wrap { flex-direction: column; }
    .subdomain-input-wrap input {
        border-radius: 8px;
        border-right: 1px solid var(--portal-border);
    }
    .subdomain-suffix {
        border-left: 1px solid var(--portal-border);
        border-top: 0;
        border-radius: 0 0 8px 8px;
    }
}