:root {
    --color-bg: #f0f2f5;
    --color-surface: #fff;
    --color-text: #111827;
    --color-muted: #5b6b82;
    --color-text-secondary: #475467;
    --color-primary: #1565a8;
    --color-primary-hover: #0f4d82;
    --color-primary-dark: #1e5a8a;
    --color-primary-soft: #e8f2fa;
    --color-primary-soft-alt: #eef4fa;
    --color-primary-border-hover: #c7d7e8;
    --color-danger: #b42318;
    --color-success-bg: #ecfdf3;
    --color-success-text: #027a48;
    --color-success-accent: #12b76a;
    --color-error-bg: #fef3f2;
    --color-error-text: #b42318;
    --color-error-accent: #f04438;
    --color-error-hover: #fde2df;
    --color-warning-bg: #fff6e6;
    --color-warning-text: #b54708;
    --color-warning-accent: #f79009;
    --color-warning-bg-alt: #fef3c7;
    --color-warning-text-dark: #92400e;
    --color-warning-bg-soft: #fffbeb;
    --color-warning-border: #f59e0b;
    --color-warning-bg-light: #fff8e6;
    --color-warning-border-light: #f0d58c;
    --color-info-bg: #eff8ff;
    --color-info-text: #175cd3;
    --color-info-border: #b2ddff;
    --color-info-bg-alt: #f0f9ff;
    --color-info-text-alt: #026aa2;
    --color-progress-bg: #eef4ff;
    --color-progress-text: #3538cd;
    --color-gray-50: #f8fafc;
    --color-gray-100: #f2f4f7;
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-border-input: #d0d5dd;
    --color-border-subtle: #eee;
    --color-border-muted: #98a2b3;
    --color-admin-bg: #fffbf5;
    --color-admin-border: #fcd9a8;
    --color-admin-border-light: #fde8c3;
    --color-print-dark: #1a1a1a;
    --color-print-border: #ccc;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --header-height: 3.25rem;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

.container { max-width: 960px; margin: 0 auto; padding: 0 1rem; }
.body--staff .container {
    max-width: 1100px;
}
.dashboard { max-width: 1100px; margin: 0 auto; }

.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--header-height);
}
.logo {
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
    color: var(--color-primary);
    text-decoration: none;
    flex-shrink: 0;
}
.logo:hover { color: var(--color-primary-hover); }

.site-footer {
    margin-top: 3rem;
    padding: 1.5rem 0;
    color: var(--color-muted);
    font-size: .875rem;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-links a { color: var(--color-muted); text-decoration: none; }
.footer-links a:hover { color: var(--color-primary); }

.legal-page { max-width: 720px; }
.legal-page h2 { font-size: 1.125rem; margin: 1.75rem 0 .75rem; }
.legal-page ul { padding-left: 1.25rem; }
.legal-draft-notice {
    background: var(--color-warning-bg-light);
    border: 1px solid var(--color-warning-border-light);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    font-size: .9375rem;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.page-header h1 { margin: 0; font-size: 1.5rem; }

.stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stats-row--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.stat-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.25rem;
    min-width: 120px;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    border: 1px solid var(--color-border);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.stat-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.stat-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    background: var(--color-primary-soft-alt);
    color: var(--color-primary);
}
.stat-card__body { min-width: 0; }
.stat-card strong {
    display: block;
    font-size: 1.75rem;
    color: var(--color-primary);
    line-height: 1.2;
}
.stat-card__label {
    display: block;
    font-size: .8125rem;
    color: var(--color-muted);
    margin-top: .15rem;
}
.stat-card--total .stat-card__icon { background: var(--color-primary-soft-alt); color: var(--color-primary-dark); }
.stat-card--total strong { color: var(--color-primary-dark); }
.stat-card--open .stat-card__icon { background: var(--color-warning-bg); color: var(--color-warning-text); }
.stat-card--open strong { color: var(--color-warning-text); }
.stat-card--new .stat-card__icon { background: var(--color-info-bg); color: var(--color-info-text); }
.stat-card--new strong { color: var(--color-info-text); }
.stat-card--done .stat-card__icon { background: var(--color-success-bg); color: var(--color-success-text); }
.stat-card--done strong { color: var(--color-success-text); }
.stat-card--warn .stat-card__icon { background: var(--color-warning-bg); color: var(--color-warning-text); }
.stat-card--warn strong { color: var(--color-warning-text); }
.stat-card--danger .stat-card__icon { background: var(--color-error-bg); color: var(--color-error-text); }
.stat-card--danger strong { color: var(--color-error-text); }
.stats-row--miniserver { margin-top: 0; }

.dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.dashboard-header h1 {
    margin: 0 0 .35rem;
    font-size: 1.625rem;
}
.dashboard-header__lead {
    margin: 0;
    color: var(--color-muted);
    font-size: .9375rem;
    max-width: 36rem;
}
.dashboard-header__action { flex-shrink: 0; }
.dashboard-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.dashboard-widget { margin-bottom: 0; }
.dashboard-widget__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}
.dashboard-widget__title {
    margin: 0;
    font-size: 1.0625rem;
}
.dashboard-widget__link {
    font-size: .875rem;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
}
.dashboard-widget__link:hover { text-decoration: underline; }
.dashboard-widget__hint {
    font-size: .8125rem;
    margin: 0 0 .75rem;
}
.dashboard-widget__empty { margin: 0; }
.dashboard-ticket-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dashboard-ticket-list li {
    padding: .65rem 0;
    border-bottom: 1px solid var(--color-gray-100);
}
.dashboard-ticket-list li:last-child { border-bottom: none; }
.dashboard-ticket-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    text-decoration: none;
    color: inherit;
}
.dashboard-ticket-list__item:hover .dashboard-ticket-list__subject {
    color: var(--color-primary);
}
.dashboard-ticket-list__id {
    font-weight: 600;
    font-size: .875rem;
    color: var(--color-muted);
}
.dashboard-ticket-list__subject {
    flex: 1;
    min-width: 0;
    font-weight: 500;
}
.dashboard-ticket-list__meta {
    display: block;
    font-size: .8125rem;
    margin-top: .2rem;
    padding-left: 2.5rem;
}
.dashboard-toolbar {
    margin-bottom: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.dashboard-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.dashboard-search input[type="search"] {
    min-width: 200px;
    padding: .45rem .75rem;
    border: 1px solid var(--color-border-input);
    border-radius: 6px;
    font: inherit;
}
.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;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.filter-chip {
    display: inline-block;
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-input);
    transition: border-color .15s, background .15s, color .15s;
}
.filter-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.filter-chip.is-active {
    background: var(--color-primary);
    color: var(--color-surface);
    border-color: var(--color-primary);
}
.filter-chip--reset {
    color: var(--color-muted);
    border-style: dashed;
}

.alert-summary { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; }
.alert-summary__pill {
    display: inline-flex; align-items: center; gap: .375rem;
    background: var(--color-error-bg); color: var(--color-error-text);
    border-radius: 999px; padding: .375rem .875rem; font-size: .875rem;
    text-decoration: none;
}
.alert-summary__pill:hover { background: var(--color-error-hover); }
.alert-summary--clear { color: var(--color-muted); font-size: .9375rem; }

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px dashed var(--color-border-input);
}
.empty-state--compact {
    padding: 1.5rem;
    text-align: left;
    border-style: solid;
}
.empty-state__icon {
    color: var(--color-muted);
    margin-bottom: 1rem;
    opacity: .7;
}
.empty-state__title {
    margin: 0 0 .5rem;
    font-size: 1.25rem;
}
.empty-state__text {
    margin: 0 0 1.25rem;
    color: var(--color-muted);
}
.empty-state--compact .empty-state__text { margin-bottom: 0; }

.ticket-table-wrap { margin-bottom: 0; }
.ticket-table tbody tr.ticket-row {
    cursor: pointer;
    transition: background .12s;
}
.ticket-table tbody tr.ticket-row:hover { background: var(--color-gray-50); }
.ticket-table__subject { font-weight: 500; max-width: 280px; }
.ticket-table__assignee { font-size: .875rem; }
.assignee-label {
    display: inline-block;
    padding: .15rem .5rem;
    background: var(--color-gray-100);
    border-radius: 4px;
    font-size: .8125rem;
}
.assignee-label--none {
    color: var(--color-muted);
    background: transparent;
    font-style: italic;
    padding-left: 0;
}

.ticket-cards { display: none; }
.ticket-card {
    display: block;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.1rem;
    margin-bottom: .75rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--color-border);
    transition: border-color .12s, box-shadow .12s;
}
.ticket-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(30, 90, 138, .1);
}
.ticket-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .5rem;
}
.ticket-card__id {
    font-weight: 600;
    color: var(--color-primary);
    font-size: .875rem;
}
.ticket-card__subject {
    font-weight: 500;
    margin-bottom: .65rem;
    line-height: 1.35;
}
.ticket-card__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem .75rem;
    margin: 0;
    font-size: .8125rem;
}
.ticket-card__meta div { display: contents; }
.ticket-card__meta dt {
    color: var(--color-muted);
    font-weight: 500;
}
.ticket-card__meta dd { margin: 0; }

.badge-status-new { background: var(--color-info-bg); color: var(--color-info-text); }
.badge-status-review { background: var(--color-info-bg-alt); color: var(--color-info-text-alt); }
.badge-status-appointment { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-status-confirmed { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-status-progress { background: var(--color-progress-bg); color: var(--color-progress-text); }
.badge-status-done { background: var(--color-gray-100); color: var(--color-text-secondary); }
.badge-status-cancelled { background: var(--color-error-bg); color: var(--color-error-text); }

.auth-card, .card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    max-width: 520px;
    border: 1px solid var(--color-border);
}
.auth-page {
    display: flex;
    justify-content: center;
    padding: 1rem 0 2rem;
}
.auth-card {
    width: 100%;
    border: 1px solid var(--color-border);
}
.auth-card--wide { max-width: 520px; }
.auth-card__header {
    text-align: center;
    margin-bottom: 1.5rem;
}
.auth-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color-primary-soft-alt);
    color: var(--color-primary);
    margin-bottom: .75rem;
}
.auth-card h1 {
    margin: 0 0 .5rem;
    font-size: 1.5rem;
}
.auth-card__lead {
    margin: 0;
    color: var(--color-muted);
    font-size: .9375rem;
    line-height: 1.45;
}
.auth-card__footer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}
.auth-card__footer p { margin: .35rem 0; }
.auth-card .info-box { text-align: left; }
.card { max-width: none; margin-bottom: 1.5rem; }

.form label {
    display: block;
    margin-bottom: 1rem;
    font-weight: 500;
}
.form input, .form select, .form textarea {
    display: block;
    width: 100%;
    margin-top: .35rem;
    padding: .6rem .75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.form input:focus, .form select:focus, .form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(21, 101, 168, .12);
}
.form-row { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
.form-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.filter-bar { max-width: none; margin-bottom: 1.5rem; }
.filter-bar .form-row { grid-template-columns: 1fr 1fr; align-items: end; }
.checkbox { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; }
.checkbox input { width: auto; margin-top: .25rem; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .55rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-primary {
    background: var(--color-primary);
    color: var(--color-surface);
    box-shadow: 0 1px 2px rgba(21, 101, 168, .25);
}
.btn-primary:hover {
    background: var(--color-primary-hover);
    box-shadow: 0 2px 6px rgba(21, 101, 168, .3);
}
.btn-lg { padding: .7rem 1.25rem; font-size: 1rem; font-weight: 600; }
.btn-danger { background: var(--color-danger); color: var(--color-surface); }
.btn-sm { padding: .35rem .75rem; font-size: .875rem; }
.btn:not(.btn-primary):not(.btn-danger) {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}
.btn:not(.btn-primary):not(.btn-danger):hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.alert {
    padding: .75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}
.alert-success { background: var(--color-success-bg); color: var(--color-success-text); }
.alert-error { background: var(--color-error-bg); color: var(--color-error-text); }

.muted { color: var(--color-muted); }
.info-box {
    background: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
    padding: .75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.table th, .table td {
    padding: .75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border-subtle);
}
.table th { background: var(--color-gray-50); font-size: .875rem; font-weight: 600; color: var(--color-muted); }

.badge {
    display: inline-block;
    padding: .2rem .5rem;
    background: var(--color-gray-100);
    border-radius: 999px;
    font-size: .75rem;
}
.badge-lg { font-size: .875rem; }
.badge-muted { background: var(--color-gray-100); color: var(--color-muted); }
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-danger { background: var(--color-error-bg); color: var(--color-error-text); }

/* Navigation */
.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
}
.site-nav--staff {
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
}
.nav-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}
.nav-section--primary { margin-right: .25rem; }
.nav-section--account {
    margin-left: auto;
    padding-left: .5rem;
    border-left: 1px solid var(--color-border);
}
.nav-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .65rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.nav-item:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
.nav-item.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
}
.nav-item--compact { font-size: .8125rem; padding: .35rem .55rem; }
.nav-item--muted { color: var(--color-muted); }
.nav-item--muted:hover {
    color: var(--color-text);
    background: var(--color-gray-50);
}
.nav-item--accent {
    background: var(--color-primary);
    color: var(--color-surface);
}
.nav-item--accent:hover {
    background: var(--color-primary-hover);
    color: var(--color-surface);
}
.nav-item__icon {
    flex-shrink: 0;
    opacity: .85;
}
.nav-item.is-active .nav-item__icon,
.nav-item:hover .nav-item__icon { opacity: 1; }

.nav-logout-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
.nav-logout-form__btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: .35rem .55rem;
    cursor: pointer;
    text-decoration: none;
}
.nav-logout-form__btn:hover {
    color: var(--color-text);
}

.nav-dropdown {
    position: relative;
}
.nav-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .65rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .12s ease, color .12s ease;
}
.nav-dropdown__trigger::-webkit-details-marker { display: none; }
.nav-dropdown__trigger:hover,
.nav-dropdown[open] > .nav-dropdown__trigger {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
.nav-dropdown__trigger.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
}
.nav-dropdown__chevron {
    flex-shrink: 0;
    opacity: .65;
    transition: transform .15s ease;
}
.nav-dropdown[open] > .nav-dropdown__trigger .nav-dropdown__chevron {
    transform: rotate(180deg);
}
.nav-dropdown__panel {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    min-width: 11.5rem;
    padding: .45rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 120;
}
.nav-dropdown--admin > .nav-dropdown__panel {
    border-color: var(--color-admin-border);
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-admin-bg) 100%);
}
.nav-dropdown__heading {
    margin: .35rem .55rem .15rem;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-muted);
}
.nav-dropdown__heading:first-child { margin-top: .15rem; }
.nav-dropdown__link {
    display: block;
    padding: .45rem .55rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
}
.nav-dropdown__link:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}
.nav-dropdown__link.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 600;
}
.nav-badge {
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: 999px;
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--color-warning-bg-alt);
    color: var(--color-warning-text-dark);
    line-height: 1.4;
}
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .12s ease, background .12s ease;
}
.nav-toggle:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}
.nav-toggle__bar {
    display: block;
    width: 1.125rem;
    height: 2px;
    margin: 0 auto;
    background: var(--color-text);
    border-radius: 1px;
    transition: transform .15s ease, opacity .15s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Legacy nav-link alias (views may still reference) */
.nav-link {
    color: var(--color-text);
    text-decoration: none;
    font-size: .9375rem;
    white-space: nowrap;
}
.nav-link:hover,
.nav-link.is-active { color: var(--color-primary); }
.nav-link.is-active { font-weight: 600; }
.nav-link--muted { color: var(--color-muted); }

.maintenance-log-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
.maintenance-log-item {
    padding: .75rem 0;
    border-bottom: 1px solid var(--color-border);
}
.maintenance-log-item:last-child { border-bottom: none; }
.maintenance-log-item p { margin: .35rem 0; }

.checkbox-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-top: 1.75rem;
}

.inline-form { display: inline; margin: 0; }
.btn-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;
}
.btn-link-danger { color: var(--color-danger); }

.dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; }
.dl dt { font-weight: 600; color: var(--color-muted); }

.comments { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }
.comments--chat { gap: .85rem; }
.comment-row {
    display: flex;
    width: 100%;
}
.comment-row--customer { justify-content: flex-start; }
.comment-row--staff { justify-content: flex-end; }
.comment-row--internal { justify-content: stretch; }
.comment-bubble {
    max-width: min(88%, 34rem);
    padding: .7rem .9rem;
    border-radius: 1rem;
    box-shadow: var(--shadow);
    word-break: break-word;
}
.comment-bubble--customer {
    background: var(--color-gray-100);
    border-bottom-left-radius: .35rem;
    color: var(--color-text);
}
.comment-bubble--staff {
    background: var(--color-primary);
    color: var(--color-surface);
    border-bottom-right-radius: .35rem;
}
.comment-bubble--internal {
    max-width: none;
    width: 100%;
    background: var(--color-warning-bg-soft);
    border: 1px dashed var(--color-warning-border);
    border-radius: var(--radius);
    box-shadow: none;
}
.comment-bubble__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    font-size: .8125rem;
    margin-bottom: .45rem;
}
.comment-bubble__author { font-weight: 600; }
.comment-bubble--staff .comment-bubble__author { color: var(--color-surface); }
.comment-bubble--staff .comment-bubble__time { color: rgba(255, 255, 255, .82); }
.comment-bubble__time {
    color: var(--color-muted);
    margin-left: auto;
    font-size: .75rem;
    white-space: nowrap;
}
.comment-bubble__body { line-height: 1.55; font-size: .9375rem; }
.comment-bubble--staff .comment-bubble__body a { color: var(--color-surface); }
.comment-bubble--staff .attachment-list a { color: var(--color-surface); }
.comment-bubble--staff .attachment-list .muted { color: rgba(255, 255, 255, .75); }
.comment-bubble__attachments { margin-top: .55rem; }
.comment-form { margin-top: 1.25rem; }
.comment-form__title { margin: 0 0 1rem; font-size: 1rem; }

.breadcrumb { margin-bottom: 1rem; font-size: .875rem; }
.breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}
.breadcrumb a:hover { text-decoration: underline; }

.ticket-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.ticket-header__id {
    display: inline-block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-muted);
    letter-spacing: .02em;
    margin-bottom: .25rem;
}
.ticket-header__subject {
    margin: 0 0 .75rem;
    font-size: 1.5rem;
    line-height: 1.3;
}
.ticket-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    margin: 0;
    font-size: .875rem;
}
.ticket-header__meta div { display: contents; }
.ticket-header__meta dt {
    color: var(--color-muted);
    font-weight: 500;
}
.ticket-header__meta dd { margin: 0; }
.ticket-header__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    flex-shrink: 0;
}

.ticket-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}
.ticket-layout--staff {
    grid-template-columns: minmax(0, 1fr) 300px;
}
.ticket-section { margin-bottom: 1.5rem; }
.ticket-section__title {
    margin: 0 0 1rem;
    font-size: 1.125rem;
}
.ticket-section__title--spaced { margin-top: 1.5rem; }
.ticket-customer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.ticket-staff-panel { position: sticky; top: 1rem; }
.ticket-staff-panel__inner { margin-bottom: 0; }
.staff-form { margin-bottom: 1rem; }
.staff-form label { font-size: .875rem; }
.staff-form__actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.staff-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1.25rem 0;
}
.staff-subtitle {
    margin: 0 0 .75rem;
    font-size: .9375rem;
}
.staff-hint { font-size: .8125rem; margin: .5rem 0 .75rem; }
.staff-proposal-list {
    list-style: none;
    padding: 0;
    margin: .75rem 0 0;
    font-size: .8125rem;
    color: var(--color-muted);
}
.staff-proposal-list li { margin-bottom: .35rem; }
.btn-block { width: 100%; text-align: center; }

.error-page {
    display: flex;
    justify-content: center;
    padding: 2rem 0 3rem;
}
.error-page__card {
    max-width: 480px;
    text-align: center;
    margin-bottom: 0;
}
.error-page__code {
    margin: 0 0 .5rem;
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    opacity: .35;
}
.error-page__lead {
    color: var(--color-muted);
    margin: 0 0 1.5rem;
}
.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

.ticket-create-form { max-width: 720px; }
.ticket-create-section { margin-bottom: 1rem; }
.ticket-create-section__title {
    margin: 0 0 1rem;
    font-size: 1.0625rem;
}
.ticket-create-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-top: .5rem;
}
.category-preview {
    margin-top: .75rem;
    padding: .75rem 1rem;
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: .9375rem;
}
.category-preview__pipeline {
    margin: 0 0 .25rem;
    font-weight: 500;
    color: var(--color-text);
}
.category-preview__fields { margin: 0; }

.dynamic-fields label { margin-top: .5rem; }

.attachment-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.attachment-list li { margin-bottom: .25rem; }
.attachment-list a { color: var(--color-primary); }

.timeline {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    border-left: 2px solid var(--color-border);
}
.timeline-item {
    position: relative;
    padding: 0 0 1rem 1.25rem;
    font-size: .9375rem;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -.4375rem;
    top: .35rem;
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    background: var(--color-primary);
}
.timeline-item time {
    display: block;
    font-size: .8125rem;
    color: var(--color-muted);
    margin-bottom: .15rem;
}
.timeline-more-toggle {
    display: inline-block;
    margin-top: -.5rem;
    font-size: .875rem;
}

.text-expand__content {
    display: block;
}
.text-expand__content--clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
.text-expand__toggle {
    display: inline-block;
    margin-top: .25rem;
    font-size: .875rem;
}
.comment-bubble--staff .text-expand__toggle {
    color: rgba(255, 255, 255, .92);
}

.admin-quicklinks .h3,
.admin-quicklinks__title {
    margin: 0 0 .75rem;
    font-size: 1rem;
}
.link-list--cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .65rem;
}
.quicklink-card {
    display: block;
    padding: .75rem 1rem;
    background: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    font-size: .9375rem;
    transition: border-color .12s, background .12s;
}
.quicklink-card:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft-alt);
    color: var(--color-primary);
}
.filter-bar--admin { margin-bottom: 1.25rem; }
.form-row--admin { grid-template-columns: 1fr 1.5fr 1fr; }

.upcoming-appointments { margin-bottom: 1.25rem; }
.upcoming-appointments__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: .75rem;
}
.upcoming-appointments__header .admin-quicklinks__title { margin: 0; }
.filter-chips--inline { margin: 0; }
.upcoming-appointments__empty { margin: 0; }
.upcoming-appointments__table { margin: 0; }
.upcoming-appointments__row { cursor: pointer; }
.upcoming-appointments__row:hover { background: var(--color-gray-50); }
.upcoming-appointments__subject { max-width: 16rem; }

.contract-reminders { margin-bottom: 1.25rem; border-left: 4px solid var(--color-warning-accent); }
.contract-reminders__subtitle {
    margin: .75rem 0 .35rem;
    font-size: .9375rem;
}
.contract-reminders__list {
    margin: 0 0 .75rem;
    padding-left: 1.25rem;
}
.contract-reminders__list li { margin-bottom: .35rem; }
.contract-reminders__footer { margin: 0; font-size: .875rem; }

.sla-dot {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.sla-dot--green { background: var(--color-success-accent); }
.sla-dot--yellow { background: var(--color-warning-accent); }
.sla-dot--red { background: var(--color-error-accent); }
.sla-dot--muted { background: var(--color-border-input); }

.contingent-summary { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.contingent-summary__title {
    margin: 0 0 .5rem;
    font-size: .9375rem;
    font-weight: 600;
}
.contingent-summary__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
}
.contingent-summary__stats div { min-width: 0; }
.contingent-summary__stats dt {
    margin: 0;
    font-size: .75rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.contingent-summary__stats dd {
    margin: .15rem 0 0;
    font-size: 1.125rem;
    font-weight: 600;
}
.contingent-summary__stats--profile { margin-top: .75rem; }
.contingent-card .muted { margin-top: 0; }

.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
}
.link-list a {
    font-weight: 500;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-top: 1rem;
    font-size: .9375rem;
}
.pagination-info { color: var(--color-muted); }
.pagination-links { display: flex; flex-wrap: wrap; gap: .35rem; }
.pagination-links a,
.pagination-links span {
    display: inline-block;
    padding: .35rem .65rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}
.pagination-links a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination-links .is-current {
    background: var(--color-primary);
    color: var(--color-surface);
    border-color: var(--color-primary);
}

.landing-hero {
    text-align: center;
    padding: 2.5rem 2rem;
    margin-bottom: 1.5rem;
}
.landing-hero h1 {
    margin: 0 0 1rem;
    font-size: 1.75rem;
}
.landing-lead {
    font-size: 1.0625rem;
    color: var(--color-muted);
    max-width: 36rem;
    margin: 0 auto 1.5rem;
}
.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-bottom: 1rem;
}
.landing-hint {
    font-size: .875rem;
    margin: 0;
}
.landing-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.landing-feature h2 { margin-top: 0; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {
    .nav-toggle { display: flex; }
    .site-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: .65rem;
        padding: .75rem 0 .25rem;
        border-top: 1px solid var(--color-border);
    }
    .site-nav.is-open { display: flex; }
    .site-nav--staff { justify-content: flex-start; }
    .nav-section,
    .nav-section--primary,
    .nav-section--account {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
    }
    .nav-section--account {
        padding-top: .5rem;
        border-top: 1px solid var(--color-border);
    }
    .nav-item,
    .nav-dropdown__trigger {
        width: 100%;
        justify-content: flex-start;
    }
    .nav-dropdown__panel {
        position: static;
        box-shadow: none;
        border: none;
        background: var(--color-gray-50);
        margin-top: .25rem;
        padding: .35rem .5rem .5rem;
    }
    .nav-dropdown--admin > .nav-dropdown__panel {
        background: var(--color-admin-bg);
        border: 1px solid var(--color-admin-border-light);
        border-radius: var(--radius-sm);
    }
    .header-inner {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .page-header,
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .dashboard-header__action { width: 100%; text-align: center; }
    .header-inner {
        flex-wrap: wrap;
        gap: .5rem;
        padding: .5rem 0;
    }
    .dashboard-header__actions {
        width: 100%;
    }
    .dashboard-header__actions .btn,
    .dashboard-header__action { width: 100%; text-align: center; }
    .stats-row { flex-direction: column; }
    .form-row,
    .filter-bar .form-row,
    .form-row--admin {
        grid-template-columns: 1fr;
    }
    .ticket-table-wrap { display: none; }
    .ticket-cards { display: block; }
    .table th, .table td {
        padding: .5rem .65rem;
        font-size: .875rem;
    }
    .action-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .35rem;
    }
    .ticket-layout--staff { grid-template-columns: 1fr; }
    .ticket-staff-panel { position: static; }
    .ticket-header { flex-direction: column; }
    .comment-bubble { max-width: 92%; }
    .comment-bubble__time { margin-left: 0; width: 100%; white-space: normal; }
    .dashboard-search { width: 100%; }
    .dashboard-search input[type="search"] { flex: 1; min-width: 0; }
}

.customer-detail-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 1.25rem;
    align-items: start;
}
.customer-detail-main { display: flex; flex-direction: column; gap: 1.25rem; }
.customer-detail-aside { position: sticky; top: 1rem; }
.customer-detail-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}
.customer-detail-section-header .ticket-section__title { margin-bottom: 0; }
.customer-detail-stats { margin: 0; font-size: .875rem; }
.action-group--stacked {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.print-page { background: var(--color-surface); }
.print-toolbar {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: .75rem 0;
    margin-bottom: 1.5rem;
}
.print-toolbar__inner {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.print-container { max-width: 800px; padding-bottom: 2rem; }
.print-document__header { margin-bottom: 2rem; border-bottom: 2px solid var(--color-print-dark); padding-bottom: 1rem; }
.print-document__meta { font-size: .8125rem; margin: 0 0 .5rem; }
.print-document__title { margin: 0 0 1rem; font-size: 1.5rem; line-height: 1.3; }
.print-document__id { color: var(--color-muted); font-weight: 600; margin-right: .35rem; }
.print-document__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem 1.25rem;
    margin: 0;
}
.print-document__facts dt {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-muted);
    margin: 0;
}
.print-document__facts dd { margin: .15rem 0 0; font-weight: 500; }
.print-section { margin-bottom: 1.75rem; }
.print-section h2 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: .35rem;
    margin: 0 0 1rem;
}
.print-fields dt { font-weight: 600; }
.print-comments { display: flex; flex-direction: column; gap: .85rem; }
.print-comment {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    break-inside: avoid;
    max-width: 85%;
}
.print-comment--customer {
    align-self: flex-start;
    background: var(--color-gray-50);
    border-left: 3px solid var(--color-border-muted);
}
.print-comment--staff {
    align-self: flex-end;
    background: var(--color-progress-bg);
    border-right: 3px solid var(--color-primary);
}
.print-comment--internal {
    align-self: stretch;
    max-width: none;
    background: var(--color-warning-bg-soft);
    border: 1px dashed var(--color-warning-border);
}
.print-comment__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    margin-bottom: .5rem;
    font-size: .875rem;
}
.print-comment__header time { color: var(--color-muted); margin-left: auto; }
.print-comment__body { font-size: .9375rem; }

@media print {
    .no-print,
    .print-toolbar,
    .site-header,
    .site-footer { display: none !important; }
    body.print-page { background: var(--color-surface); }
    .print-container { max-width: none; padding: 0; }
    .print-comment { border-color: var(--color-print-border); }
    a { color: inherit; text-decoration: none; }
}

@media (max-width: 900px) {
    .customer-detail-layout { grid-template-columns: 1fr; }
    .customer-detail-aside { position: static; }
}

/* Terminkalender (Admin) */
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.25rem;
    margin-bottom: 1rem;
}
.calendar-nav__title {
    font-size: 1.125rem;
    text-align: center;
}
.calendar-nav__btn {
    font-size: .875rem;
    white-space: nowrap;
}
.calendar-feed-hint {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
}
.calendar-feed-hint summary {
    cursor: pointer;
    font-weight: 600;
}
.calendar-feed-hint__text,
.calendar-feed-hint__steps {
    margin: .75rem 0 0;
    font-size: .875rem;
}
.calendar-feed-hint__url {
    display: block;
    word-break: break-all;
    font-size: .8125rem;
    padding: .5rem .75rem;
    background: var(--color-bg);
    border-radius: var(--radius);
}
.calendar-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.calendar-day__heading {
    font-size: 1rem;
    margin: 0 0 .5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.calendar-day--today .calendar-day__heading {
    color: var(--color-primary, var(--color-primary-dark));
}
.calendar-day__entries {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.calendar-entry {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    gap: .75rem 1rem;
    align-items: center;
    padding: .85rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.calendar-entry:hover {
    border-color: var(--color-primary-border-hover);
    box-shadow: 0 2px 8px rgba(30, 90, 138, .08);
}
.calendar-entry--proposed {
    background: var(--color-warning-bg-soft);
    border-color: var(--color-warning-border-light);
}
.calendar-entry--proposed:hover {
    border-color: var(--color-warning-border);
    box-shadow: 0 2px 8px rgba(183, 71, 8, .08);
}
.calendar-entry--proposed .calendar-entry__time {
    color: var(--color-warning-text);
}
.calendar-entry__time {
    font-weight: 600;
    font-size: .9375rem;
    color: var(--color-primary, var(--color-primary-dark));
}
.calendar-entry__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.calendar-entry__title {
    font-weight: 600;
}
.calendar-entry__subject {
    font-size: .875rem;
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar-entry__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
    flex-shrink: 0;
}
@media (max-width: 700px) {
    .calendar-entry {
        grid-template-columns: 1fr;
        gap: .5rem;
    }
    .calendar-entry__meta {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }
    .calendar-nav {
        flex-direction: column;
        text-align: center;
    }
}

.customer-miniserver-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.customer-miniserver-item {
    padding: 1rem 0;
    border-top: 1px solid var(--color-border, #e5e7eb);
}
.customer-miniserver-item:first-child {
    border-top: none;
    padding-top: 0;
}
.customer-miniserver-item__subtitle {
    font-size: .9rem;
    margin: 0 0 .35rem;
    font-weight: 600;
}
.customer-miniserver-item__section + .customer-miniserver-item__section {
    margin-top: .85rem;
}
.customer-miniserver-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
}
.customer-miniserver-firmware {
    margin: 0 0 .25rem;
    font-size: .9rem;
}

.project-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1.5rem;
    align-items: start;
}
.project-aside { display: flex; flex-direction: column; gap: 1rem; }
.project-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.project-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.project-card:hover {
    border-color: var(--color-primary, #2563eb);
}
.project-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .5rem;
}
.project-card__title {
    margin: 0;
    font-size: 1.1rem;
}
.project-card__meta { margin: 0; font-size: .9rem; }
.page-header--sticky { margin-bottom: 1.5rem; }
.page-header__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}
.dl--compact dt { margin-bottom: .15rem; }
.dl--compact dd { margin-bottom: .65rem; }

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