@font-face {
    font-family: "Raleway";
    src: url("../font/Raleway-VariableFont_wght.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "FuturaNowHeadline";
    src: url("../font/FuturaNowHeadline.ttf") format("truetype");
    font-display: swap;
}

:root {
    --font-sans: "Raleway", "Trebuchet MS", "Segoe UI", sans-serif;
    --font-headline: "Raleway", "Trebuchet MS", "Segoe UI", sans-serif;
    --mobile-viewport-height: 100dvh;
    --bg: #f4f8ef;
    --bg-strong: #ffffff;
    --bg-accent: linear-gradient(135deg, rgba(184, 255, 18, 0.18), rgba(24, 216, 107, 0.07));
    --text: #1f2933;
    --muted: #5f6b76;
    --border: rgba(31, 41, 51, 0.12);
    --panel-shadow: 0 20px 60px rgba(62, 76, 86, 0.12);
    --primary: #b8ff12;
    --primary-hover: #18d86b;
    --primary-contrast: #06100a;
    --secondary: #e7ecef;
    --secondary-text: #21313c;
    --alert: #8a2d2d;
    --sidebar-nav-hover-bg: #eceff3;
    --sidebar-nav-active-bg: #dfe5eb;
    --sidebar-nav-active-border: rgba(31, 41, 51, 0.12);
    --sidebar-nav-active-text: #1f2933;
}

[data-theme="dark"] {
    --bg: #585858;
    --bg-strong: #2b2c30;
    --bg-accent: none;
    --text: #ecf1f4;
    --muted: #b6c2ca;
    --border: rgba(236, 241, 244, 0.12);
    --panel-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
    --primary: #b8ff12;
    --primary-hover: #18d86b;
    --primary-contrast: #06100a;
    --secondary: #363538;
    --secondary-text: #edf4f7;
    --alert: #ff9b93;
    --sidebar-nav-hover-bg: #363538;
    --sidebar-nav-active-bg: #363538;
    --sidebar-nav-active-border: #363538;
    --sidebar-nav-active-text: #f7fbff;
}

* {
    box-sizing: border-box;
}

html,
body,
.topbar,
.main-content,
.panel,
.hero-panel,
.auth-card,
.button,
.field input,
.field select,
.field textarea,
.topnav-link,
.view-tab,
.page-link,
.pill,
.panel-link,
.dashboard-list-item,
.dashboard-step-card,
.calendar-day-name,
.calendar-cell,
.calendar-source-card,
.timeline-chip,
.calendar-event,
.ribbon-event,
.language-switcher-menu,
.language-switcher-trigger,
.theme-toggle,
.site-brand,
.auth-visual-layer {
    transition:
        background-color 0.7s ease,
        color 0.7s ease,
        border-color 0.7s ease,
        box-shadow 0.7s ease,
        opacity 0.7s ease,
        transform 0.7s ease;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    background:
        radial-gradient(circle at top left, rgba(184, 255, 18, 0.14), transparent 28%),
        radial-gradient(circle at bottom right, rgba(24, 216, 107, 0.1), transparent 34%),
        var(--bg);
    color: var(--text);
}

a {
    color: inherit;
    text-decoration: none;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background: var(--bg);
}

.list-bottom-action {
    margin: 1.25rem 0 0;
}

.list-bottom-action-inner {
    display: flex;
    justify-content: flex-start;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(12px);
}

[data-theme="dark"] .topbar {
    background: rgba(10, 18, 23, 0.35);
}

.brand {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.topnav {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-right: 0.5rem;
}

.topnav a {
    color: var(--muted);
    font-size: 0.95rem;
}

.topnav-link {
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.topnav-link:hover,
.topnav-link:focus-visible {
    color: var(--text);
    background: var(--secondary);
    border-color: var(--border);
}

.topnav-link.is-active {
    color: var(--primary-contrast);
    background: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    font-family: var(--font-headline);
}

.site-brand-logo {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex: 0 0 auto;
}

.site-brand-copy {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.site-brand-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.site-brand-name {
    font-size: 1.05rem;
    font-weight: 700;
}

.error-panel {
    display: grid;
    gap: 0.7rem;
}

.error-title {
    margin: 0;
}

.error-title-soft {
    font-size: clamp(1.55rem, 2.8vw, 2rem);
    line-height: 1.15;
}

.main-content {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: 0;
}

.app-main {
    flex: 1;
    min-width: 0;
    padding: 2rem;
    background: var(--bg-strong);
}

.app-main > * {
    margin-bottom: 33px;
}

.app-main > *:last-child {
    margin-bottom: 0;
}

.sidebar {
    width: 290px;
    flex: 0 0 290px;
    background: var(--bg-strong);
    border-right: 1px solid var(--border);
    box-shadow: none;
    padding: 4rem 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    position: sticky;
    top: 0;
    min-height: 100vh;
    overflow: visible;
}

[data-theme="dark"] .sidebar {
    background: #2b2c30;
    border-right-color: #58585b;
}

.sidebar-brand-wrap {
    display: flex;
    justify-content: center;
    margin-top: 1.1rem;
    margin-bottom: 3.95rem;
}

.sidebar-profile {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    text-align: center;
    padding: 0.25rem 0.4rem 1.05rem;
}

.profile-avatar {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(96, 170, 255, 0.75), rgba(180, 84, 255, 0.5));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 700;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.profile-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-profile-name {
    font-size: 1rem;
    font-weight: 700;
}

.profile-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 0.36rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    background: transparent;
    font-size: 0.88rem;
}

.profile-edit-button:hover,
.profile-edit-button:focus-visible {
    color: var(--text);
    background: color-mix(in srgb, var(--secondary) 72%, transparent);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}

.sidebar-nav {
    display: grid;
    gap: 0.55rem;
    padding-top: 0.25rem;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 0.95rem;
    border-radius: 18px;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
}

.sidebar-nav-link:hover,
.sidebar-nav-link:focus-visible,
.sidebar-nav-link.is-active,
.sidebar-group[open] > .sidebar-group-summary {
    color: var(--sidebar-nav-active-text);
    background: var(--sidebar-nav-hover-bg);
    border-color: var(--sidebar-nav-active-border);
}

[data-theme="dark"] .sidebar-nav-link:hover,
[data-theme="dark"] .sidebar-nav-link:focus-visible,
[data-theme="dark"] .sidebar-nav-link.is-active,
[data-theme="dark"] .sidebar-group[open] > .sidebar-group-summary {
    background: var(--sidebar-nav-active-bg);
}

[data-theme="light"] .sidebar-nav-link.is-active,
[data-theme="light"] .sidebar-group[open] > .sidebar-group-summary {
    color: var(--sidebar-nav-active-text);
    background: var(--sidebar-nav-active-bg);
    border-color: var(--sidebar-nav-active-border);
}

.sidebar-nav-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: currentColor;
}

.sidebar-nav-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

[data-theme="dark"] .sidebar-nav-link .sidebar-nav-icon {
    color: color-mix(in srgb, var(--text) 84%, var(--muted));
}

[data-theme="dark"] .sidebar-nav-link:hover .sidebar-nav-icon,
[data-theme="dark"] .sidebar-nav-link:focus-visible .sidebar-nav-icon,
[data-theme="dark"] .sidebar-nav-link.is-active .sidebar-nav-icon,
[data-theme="dark"] .sidebar-group[open] > .sidebar-group-summary .sidebar-nav-icon {
    color: #fff;
}

.sidebar-nav-label {
    font-size: 0.98rem;
    font-weight: 400;
}

.sidebar-group {
    display: grid;
    gap: 0;
}

.sidebar-group-summary {
    list-style: none;
    cursor: pointer;
    width: 100%;
    justify-content: space-between;
}

.sidebar-group-summary::-webkit-details-marker {
    display: none;
}

.sidebar-group-arrow {
    margin-left: auto;
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    transition: transform 0.3s ease;
}

.sidebar-group[open] .sidebar-group-arrow {
    transform: rotate(180deg);
}

.sidebar-group[open] {
    gap: 0.55rem;
}

.sidebar-group-body {
    padding-left: 0.45rem;
    display: grid;
    gap: 0.45rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        max-height 0.32s ease,
        opacity 0.22s ease,
        transform 0.32s ease,
        padding 0.32s ease;
}

.sidebar-group[open] .sidebar-group-body {
    max-height: 26rem;
    opacity: 1;
    transform: translateY(0);
}

.sidebar-footer {
    display: grid;
    gap: 0.75rem;
    margin-top: 2.35rem;
}

.sidebar-language-switcher {
    margin-top: 1.9rem;
    align-self: flex-start;
    position: relative;
}

.sidebar-version {
    margin-top: 1rem;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1;
    letter-spacing: 0.06em;
    opacity: 0.92;
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    overflow: hidden;
}

.sidebar-version[data-empty="true"] {
    pointer-events: none;
}

.sidebar-version-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
}

.sidebar-version-summary::-webkit-details-marker {
    display: none;
}

.sidebar-version-label {
    text-align: center;
}

.sidebar-version-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.sidebar-version-arrow svg {
    width: 0.9rem;
    height: 0.9rem;
}

.sidebar-version[open] .sidebar-version-arrow {
    transform: rotate(180deg);
}

.sidebar-version-panel {
    display: grid;
    gap: 0.6rem;
    padding: 0 0.85rem 0.85rem;
    text-align: left;
}

.sidebar-version-panel-title {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.sidebar-version-list {
    display: grid;
    gap: 0.5rem;
}

.sidebar-version-item {
    display: grid;
    gap: 0.18rem;
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.sidebar-version-hash {
    font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
    font-size: 0.7rem;
    color: var(--primary);
}

.sidebar-version-message {
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text);
}

.business-credentials-block {
    margin-top: 1.5rem;
}

.business-credential-card {
    display: grid;
    gap: 1rem;
}

.business-credential-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.business-credential-form {
    margin-top: 0.75rem;
}

.theme-toggle-sidebar,
.sidebar-logout,
.language-switcher-trigger-full,
.sidebar-account-display {
    width: 100%;
    justify-content: center;
}

.sidebar-account-display {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    font: inherit;
    color: var(--secondary-text);
}

.sidebar-account-display span {
    text-transform: none;
}

.sidebar-account-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    display: block;
}

.sidebar-toggle {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 40;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-strong) 92%, transparent);
    color: var(--text);
    box-shadow: var(--panel-shadow);
    cursor: pointer;
}

.sidebar-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 99px;
    margin: 3px auto;
}

.app-shell-body.sidebar-open {
    overflow: hidden;
}

.sidebar-backdrop {
    display: none;
}

.hero-panel,
.panel,
.auth-card {
    background: var(--bg-strong);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--panel-shadow);
}

.hero-panel,
.panel {
    padding: 1.5rem;
}

.app-main > .hero-panel,
.app-main > .panel,
.app-main > .panel-link,
.app-main > .quick-links {
    margin-bottom: 33px;
}

.app-main > .hero-panel {
    margin-top: 2.25rem;
}

.hero-panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 1.5rem;
}

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

.auth-shell {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.auth-shell.home-shell {
    overflow-x: hidden;
    overflow-y: auto;
}

.auth-shell.dealerinfo-shell {
    overflow-x: hidden;
    overflow-y: auto;
    background:
        linear-gradient(180deg, #ffffff 0%, #f4f8fd 62%, #ffffff 100%);
    color: #122033;
}

.dealerinfo-shell .auth-visual {
    display: none;
}

.dealerinfo-shell .auth-stage {
    z-index: 1;
}

.dealerinfo-shell .auth-chrome {
    padding-top: 1.35rem;
}

.dealerinfo-shell .site-brand,
.dealerinfo-shell .icon-button,
.dealerinfo-shell .language-switcher-menu,
.dealerinfo-shell .button-secondary {
    color: #122033;
}

.dealerinfo-shell .language-switcher-menu,
.dealerinfo-shell .icon-button,
.dealerinfo-shell .button-secondary {
    background: rgba(255, 255, 255, 0.92);
    border-color: color-mix(in srgb, var(--primary) 18%, #d6e0eb);
    box-shadow: 0 10px 24px rgba(14, 32, 56, 0.06);
}

.dealerinfo-shell .language-option:hover,
.dealerinfo-shell .language-option:focus-visible,
.dealerinfo-shell .language-option.is-active {
    background: color-mix(in srgb, var(--primary) 10%, white);
}

.auth-visual {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    background: var(--bg-strong);
}

.auth-visual-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    transform: scale(1.02);
    filter: saturate(1.08) contrast(1.03);
    transition: opacity 1s ease, transform 1s ease;
}

.auth-visual-layer.is-visible {
    opacity: 1;
    transform: scale(1);
}

.auth-visual-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(4, 10, 18, 0.72), rgba(4, 10, 18, 0.32)),
        radial-gradient(circle at top left, rgba(184, 255, 18, 0.22), transparent 35%),
        radial-gradient(circle at bottom right, rgba(24, 216, 107, 0.16), transparent 30%);
}

.auth-stage {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.auth-chrome {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 4.25rem 3.4rem 0;
}

.home-shell .auth-chrome {
    padding-top: 0.75rem;
}

.auth-chrome-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

.home-login-button {
    white-space: nowrap;
    background: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 65%, var(--border));
    color: var(--primary-contrast);
    box-shadow: 0 10px 26px rgba(96, 170, 255, 0.24);
}

.home-login-button:hover,
.home-login-button:focus-visible {
    background: var(--primary-hover);
    border-color: color-mix(in srgb, var(--primary-hover) 65%, var(--border));
    color: var(--primary-contrast);
}

.auth-main {
    flex: 1;
    display: grid;
    align-items: center;
    justify-items: center;
    padding: 1rem 1.5rem 3rem;
}

.home-shell .auth-main {
    align-items: start;
    justify-items: stretch;
    padding-top: 0.9rem;
    padding-bottom: 4rem;
    gap: 2rem;
}

.home-countdown-band {
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, auto);
    gap: 1rem 1.25rem;
    align-items: center;
    padding: 1rem 1.15rem;
    border-radius: 26px;
    border: 1px solid var(--border);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-strong) 70%, transparent), color-mix(in srgb, var(--bg-strong) 92%, transparent)),
        color-mix(in srgb, var(--bg-strong) 82%, transparent);
    box-shadow: var(--panel-shadow);
    margin: 0 auto 1rem;
    position: relative;
    z-index: 2;
}

.home-countdown-copy {
    display: grid;
    gap: 0.35rem;
    align-content: start;
}

.home-countdown-copy h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    line-height: 1.05;
}

.home-countdown-copy p {
    margin: 0;
    color: var(--muted);
}

.home-countdown-flipdown {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.home-countdown-flipdown .flipdown {
    margin: 0 auto;
}

.home-countdown-flipdown .flipdown.flipdown__theme-dark .rotor-group-heading:before {
    color: #ffffff;
}

.home-countdown-band.is-ended .home-countdown-flipdown {
    opacity: 0.92;
}
}

.home-page {
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
    gap: 1.5rem;
    align-items: stretch;
}

.home-copy {
    display: grid;
    gap: 1.15rem;
    align-content: start;
    padding-top: 1.15rem;
}

.home-copy h1 {
    margin: 0;
    max-width: 10ch;
    font-size: clamp(2.6rem, 4.8vw, 4.75rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

.home-intro {
    margin: 0;
    max-width: 40rem;
    font-size: 1.03rem;
    color: color-mix(in srgb, var(--text) 84%, var(--muted));
}

.home-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.home-login-note {
    color: var(--muted);
    font-size: 0.95rem;
}

.home-highlight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 0.4rem;
}

.home-highlight-card {
    display: grid;
    gap: 0.35rem;
    padding: 1rem 1.05rem;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-strong) 78%, transparent);
    box-shadow: var(--panel-shadow);
}

.home-highlight-card strong {
    font-size: 1rem;
}

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

.home-highlight-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 800;
}

.home-card {
    display: grid;
    gap: 1.2rem;
    align-self: center;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-strong) 72%, transparent), color-mix(in srgb, var(--bg-strong) 88%, transparent)),
        color-mix(in srgb, var(--bg-strong) 92%, transparent);
    backdrop-filter: blur(16px);
}

.home-card-copy {
    display: grid;
    gap: 0.55rem;
}

.home-card-copy h2 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.05;
}

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

.home-metric {
    display: grid;
    gap: 0.25rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--secondary) 62%, transparent);
}

.home-metric strong {
    font-size: 1.1rem;
}

.home-metric span {
    color: var(--muted);
    font-size: 0.92rem;
}

.home-card-footer {
    display: flex;
    justify-content: flex-start;
}

.home-proof-band {
    display: grid;
    gap: 1rem;
    padding: 1.15rem;
    border-radius: 26px;
    border: 1px solid var(--border);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-strong) 70%, transparent), color-mix(in srgb, var(--bg-strong) 92%, transparent)),
        color-mix(in srgb, var(--bg-strong) 82%, transparent);
    box-shadow: var(--panel-shadow);
}

.home-proof-head {
    display: grid;
    gap: 0.35rem;
    max-width: 58ch;
}

.home-proof-head h2,
.home-testimonials-head h2,
.home-final-cta h2 {
    margin: 0;
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    line-height: 1.08;
}

.home-proof-head p,
.home-testimonials-head p,
.home-final-cta p {
    margin: 0;
    color: var(--muted);
}

.home-proof-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.home-proof-point {
    display: grid;
    gap: 0.35rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--secondary) 62%, transparent);
}

.home-proof-point strong {
    font-size: 1rem;
}

.home-proof-point p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.home-testimonials {
    width: min(1120px, 100%);
    display: grid;
    gap: 1rem;
}

.home-testimonials-head {
    display: grid;
    gap: 0.35rem;
    max-width: 60ch;
}

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

.home-testimonial-card {
    display: grid;
    gap: 0.9rem;
    padding: 1.15rem 1.2rem;
    border-radius: 24px;
    border: 1px solid var(--border);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-strong) 68%, transparent), color-mix(in srgb, var(--bg-strong) 86%, transparent)),
        color-mix(in srgb, var(--bg-strong) 90%, transparent);
    box-shadow: var(--panel-shadow);
}

.home-testimonial-quote {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
}

.home-testimonial-meta {
    display: grid;
    gap: 0.2rem;
}

.home-testimonial-meta strong {
    font-size: 0.98rem;
}

.home-testimonial-meta span {
    color: var(--muted);
    font-size: 0.92rem;
}

.home-final-cta {
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.25rem;
    align-items: center;
    padding: 1.25rem 1.35rem;
    margin-top: -0.15rem;
}

.home-final-cta-copy {
    display: grid;
    gap: 0.45rem;
}

.home-final-cta-actions {
    justify-content: flex-end;
    align-items: center;
}

.dealerinfo-shell .auth-main {
    align-items: start;
    justify-items: stretch;
    padding-top: 1.2rem;
    padding-left: 3.4rem;
    padding-right: 3.4rem;
    padding-bottom: 4.5rem;
    gap: 3rem;
}

.dealerinfo-hero,
.dealerinfo-founder,
.dealerinfo-storyline,
.dealerinfo-contrast,
.dealerinfo-quote-band,
.dealerinfo-proof,
.dealerinfo-cta {
    width: min(100%, 1120px);
    margin-left: auto;
    margin-right: auto;
}

.dealerinfo-hero {
    display: block;
}

.dealerinfo-hero-copy,
.dealerinfo-section-head {
    display: grid;
    gap: 0.65rem;
}

.dealerinfo-hero-copy {
    align-content: start;
    padding-top: 1.4rem;
    max-width: 52rem;
}

.dealerinfo-hero-copy h1 {
    margin: 0;
    max-width: 12ch;
    font-size: clamp(2.8rem, 5.4vw, 4.85rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
}

.dealerinfo-intro,
.dealerinfo-section-head p,
.dealerinfo-story-step p,
.dealerinfo-proof-row p,
.dealerinfo-founder p,
.dealerinfo-list li {
    margin: 0;
    color: color-mix(in srgb, var(--text) 84%, var(--muted));
}

.dealerinfo-intro {
    max-width: 45rem;
    font-size: 1.08rem;
    line-height: 1.75;
}

.dealerinfo-section-head p,
.dealerinfo-founder p,
.dealerinfo-story-step p,
.dealerinfo-proof-row p,
.dealerinfo-list li,
.dealerinfo-meta-text {
    color: #4f647b;
}

.dealerinfo-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
}

.dealerinfo-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid #d7e2ee;
    max-width: 48rem;
}

.dealerinfo-hero-meta > div {
    display: grid;
    gap: 0.2rem;
    min-width: 11rem;
}

.dealerinfo-meta-kicker {
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dealerinfo-meta-text {
    line-height: 1.5;
}

.dealerinfo-founder {
    position: relative;
    padding-top: 0.6rem;
    max-width: 46rem;
}

.dealerinfo-founder::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5rem;
    height: 2px;
    background: color-mix(in srgb, var(--primary) 45%, white);
    pointer-events: none;
}

.dealerinfo-founder h2,
.dealerinfo-section-head h2,
.dealerinfo-story-step h3,
.dealerinfo-proof-row h3 {
    margin: 0;
    line-height: 1.08;
}

.dealerinfo-founder h2,
.dealerinfo-section-head h2 {
    font-size: clamp(1.55rem, 2.8vw, 2.35rem);
}

.dealerinfo-founder-signoff {
    color: var(--primary);
    font-weight: 700;
}

.dealerinfo-storyline {
    display: grid;
    gap: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #d7e2ee;
    max-width: 52rem;
}

.dealerinfo-story-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
}

.dealerinfo-story-step {
    display: grid;
    gap: 0.65rem;
    align-content: start;
    padding-top: 1.1rem;
    border-top: 2px solid color-mix(in srgb, var(--primary) 36%, white);
}

.dealerinfo-story-index {
    color: var(--primary);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dealerinfo-story-step h3,
.dealerinfo-proof-row h3 {
    font-size: 1.15rem;
}

.dealerinfo-contrast {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 52rem;
}

.dealerinfo-contrast-panel {
    display: grid;
    gap: 1rem;
    padding-top: 1.2rem;
    border-top: 1px solid #d7e2ee;
}

.dealerinfo-contrast-before .eyebrow {
    color: color-mix(in srgb, #c86754 78%, white);
}

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

.dealerinfo-list li {
    position: relative;
    padding-left: 1.45rem;
    line-height: 1.7;
}

.dealerinfo-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 80%, white);
}

.dealerinfo-quote-band {
    padding: 1.75rem 0 0.4rem;
    border-top: 1px solid #d7e2ee;
    max-width: 52rem;
}

.dealerinfo-quote {
    margin: 0;
    max-width: 18ch;
    font-size: clamp(1.75rem, 3.5vw, 2.8rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: color-mix(in srgb, var(--text) 94%, var(--primary));
    font-family: inherit;
}

.dealerinfo-proof {
    display: grid;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #d7e2ee;
    max-width: 52rem;
}

.dealerinfo-proof-list {
    display: grid;
    gap: 0.4rem;
}

.dealerinfo-proof-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1rem 0;
    border-top: 1px solid #e1e8f0;
}

.dealerinfo-proof-row:first-child {
    border-top: none;
}

.dealerinfo-cta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 1.25rem;
    align-items: start;
    padding-top: 1.25rem;
    border-top: 1px solid #d7e2ee;
    max-width: 52rem;
}

.dealerinfo-shell .home-login-button {
    box-shadow: 0 10px 24px rgba(14, 32, 56, 0.08);
}

.dealerinfo-actions-end {
    justify-content: flex-start;
}

.auth-login-card {
    width: min(540px, calc(100% - 0.5rem));
    margin: 0;
    transform: translateY(-5vh);
    background: color-mix(in srgb, var(--bg-strong) 66%, transparent);
    backdrop-filter: blur(16px);
}

.sidebar .site-brand-logo {
    width: 58px;
    height: 58px;
}

@media (max-width: 900px) {
    .home-page {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .home-countdown-band {
        grid-template-columns: 1fr;
    }

    .home-copy {
        padding-top: 0;
    }

    .home-copy h1 {
        max-width: none;
        font-size: clamp(2.15rem, 10vw, 3.5rem);
    }

    .home-highlight-grid,
    .home-proof-list,
    .home-metrics-grid {
        grid-template-columns: 1fr;
    }

    .home-testimonials-grid,
    .home-final-cta {
        grid-template-columns: 1fr;
    }

    .home-final-cta-actions {
        justify-content: flex-start;
    }

    .dealerinfo-hero-copy {
        padding-top: 0;
    }

    .dealerinfo-hero-copy h1 {
        max-width: none;
        font-size: clamp(2.2rem, 10vw, 3.6rem);
    }

    .dealerinfo-founder {
        max-width: none;
    }

    .dealerinfo-shell .auth-main {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .dealerinfo-quote {
        max-width: none;
    }
}

.auth-copy {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1.35rem;
}

.language-switcher {
    position: relative;
    z-index: 20;
    padding: 0.35rem 0.35rem 1.5rem;
    margin: -0.35rem -0.35rem -1.5rem;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--secondary);
    color: var(--secondary-text);
    cursor: pointer;
}

.language-switcher-trigger svg,
.theme-toggle-icon {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    display: block;
}

.language-switcher-menu {
    position: absolute;
    top: calc(100% - 0.06rem);
    right: 0;
    min-width: 180px;
    padding: 0.55rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 92%, transparent);
    box-shadow: var(--panel-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    backdrop-filter: blur(16px);
}

.language-switcher:hover .language-switcher-menu,
.language-switcher:focus-within .language-switcher-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.language-switcher-sidebar {
    position: relative;
}

.language-switcher-sidebar .language-switcher-trigger {
    width: 100%;
    justify-content: center;
    align-items: center;
}

.language-switcher-sidebar .language-switcher-menu {
    top: calc(100% - 0.04rem);
    right: 0;
    left: 0;
    min-width: 0;
    width: 100%;
}

.language-switcher-sidebar-icon {
    position: relative;
}

.language-switcher-sidebar-icon .language-switcher-trigger {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.language-switcher-sidebar-icon .language-switcher-menu {
    top: auto;
    bottom: calc(100% - 0.04rem);
    right: auto;
    left: 0;
    min-width: 180px;
    width: 180px;
}

.language-option-form {
    margin: 0;
}

.language-option {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: 0.8rem 0.85rem;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.language-option:hover,
.language-option:focus-visible,
.language-option.is-active {
    background: var(--secondary);
}

.auth-shell .site-brand {
    color: #ffffff;
}

.auth-shell .site-brand {
    position: fixed;
    left: clamp(1.2rem, 4vw, 4rem);
    top: clamp(1.1rem, 4vw, 3rem);
    z-index: 0;
    opacity: 0.16;
    pointer-events: none;
}

.auth-shell .site-brand-logo {
    width: clamp(220px, 32vw, 430px);
    height: clamp(220px, 32vw, 430px);
    filter: drop-shadow(0 34px 70px rgba(0, 0, 0, 0.34));
}

.auth-shell .language-switcher-menu,
.auth-shell .icon-button,
.auth-shell .button-secondary {
    background: rgba(8, 14, 22, 0.42);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.16);
}

.auth-shell .language-switcher {
    margin-right: 0.35rem;
}

.auth-shell:not(.home-shell):not(.dealerinfo-shell) .auth-chrome {
    justify-content: flex-end;
    padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 3.4vw, 3rem) 0;
}

.auth-shell:not(.home-shell):not(.dealerinfo-shell) .auth-chrome-actions {
    position: fixed;
    top: clamp(1rem, 3vw, 1.75rem);
    right: clamp(1rem, 3.4vw, 3rem);
    z-index: 5;
}

.hero-panel > div > p.muted {
    display: none;
}

.hero-panel .eyebrow {
    display: none;
}

.hero-panel .muted {
    transition: none;
}

.auth-shell .language-option:hover,
.auth-shell .language-option:focus-visible,
.auth-shell .language-option.is-active {
    background: rgba(255, 255, 255, 0.14);
}

.hero-panel {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.hero-panel:has(.button-back) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
}

.hero-panel:has(.button-back) .hero-panel-title,
.hero-panel:has(.button-back) .hero-meta {
    width: 100%;
}

.hero-panel:has(.button-back) .hero-meta {
    justify-content: flex-start;
}

.customer-page-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
}

.customer-page-hero .hero-panel-title,
.customer-page-hero .hero-meta {
    width: 100%;
}

.customer-page-hero .hero-panel-title {
    display: grid;
    gap: 0.35rem;
    justify-items: flex-start;
}

.customer-hero-title-line {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.customer-mobile-filter-toggle {
    display: none;
}

.rental-contract-wizard-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
}

.rental-contract-wizard-hero .hero-meta {
    width: 100%;
    justify-content: flex-start;
}

.hero-panel-title {
    display: flex;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 1.45rem;
    flex-wrap: wrap;
    width: auto;
}

.hero-panel-title > h1 {
    flex-basis: 100%;
    margin: 0 0 0.35rem;
}

.hero-panel-title > p.muted {
    flex-basis: 100%;
    margin: 0;
}

.hero-panel-title > h1 + p.muted {
    margin: 0.25rem 0 1.55rem;
    padding-bottom: 0.55rem;
}

.hero-panel-title > .form-actions {
    flex-basis: 100%;
    margin-top: 0;
}

.hero-panel-title > .form-actions .website-publish-action-form {
    display: inline-flex;
}

.hero-panel-title > .form-actions .website-publish-action-button {
    min-width: 15.5rem;
    justify-content: center;
    border-radius: 18px;
}

.hero-panel-title > .form-actions + p.muted {
    margin: 0.65rem 0 0;
    padding-bottom: 0;
}

.hero-filter-toggle {
    flex: 0 0 auto;
    white-space: nowrap;
}

.hero-filter-toggle:hover,
.hero-filter-toggle:focus-visible,
.hero-filter-toggle.is-open {
    background: var(--primary);
    color: #ffffff;
    border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
}

.hero-panel h1 {
    text-wrap: balance;
}

.hero-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.hero-panel > .hero-meta > .pill {
    display: none;
}

.hero-alert-panel .hero-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.65rem;
    width: 100%;
}

.hero-alert-pills {
    width: 100%;
}

.hero-alert-pills .pill {
    display: grid;
    gap: 0.2rem;
    align-items: center;
    justify-items: center;
    min-width: 0;
    min-height: 3rem;
    padding: 0.8rem 0.85rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    line-height: 1.15;
    font-weight: 400;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-shadow: none;
}

[data-theme="light"] .hero-alert-pills .pill {
    background: color-mix(in srgb, var(--secondary) 88%, var(--bg-strong));
    border-color: color-mix(in srgb, var(--border) 82%, transparent);
    color: var(--text);
}

[data-theme="dark"] .hero-alert-pills .pill {
    color: #ffffff;
}

.hero-alert-panel:has(.hero-alert-pills .pill:empty):not(:has(.hero-alert-pills .pill:not(:empty))) {
    display: none;
}
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 0.75rem;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-headline);
}

h1 {
    font-size: 2.5rem;
    line-height: 1.05;
    margin: 0;
}

h2,
h3 {
    font-size: 21px;
    line-height: 1.2;
    font-weight: 700;
}

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

.grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.three-up {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: var(--secondary);
    color: var(--secondary-text);
    border: 1px solid var(--border);
    font-size: 0.9rem;
    line-height: 1.2;
}

.field {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
    width: min(100%, 444px);
    max-width: 444px;
}

.form-field {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.field > span,
.form-field > label {
    color: color-mix(in srgb, var(--text) 92%, var(--primary-hover));
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.2;
}

.field input,
.field select,
.field textarea,
.form-field input,
.form-field select,
.form-field textarea,
.topbar select {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-strong) 96%, var(--primary) 4%), var(--bg-strong));
    color: var(--text);
    border-radius: 8px;
    padding: 0.92rem 1rem;
    font: inherit;
    line-height: 1.35;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 64%, transparent),
        0 10px 26px color-mix(in srgb, var(--primary) 6%, transparent);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select {
    min-height: 3.05rem;
}

.field select,
.form-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.8rem;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-strong) 96%, var(--primary) 4%), var(--bg-strong));
    background-position:
        calc(100% - 1.25rem) 50%,
        calc(100% - 0.95rem) 50%,
        0 0;
    background-size: 6px 6px, 6px 6px, 100% 100%;
    background-repeat: no-repeat;
}

.field input:not([type="checkbox"]):not([type="radio"]):hover,
.field select:hover,
.field textarea:hover,
.form-field input:not([type="checkbox"]):not([type="radio"]):hover,
.form-field select:hover,
.form-field textarea:hover {
    border-color: color-mix(in srgb, var(--primary-hover) 40%, var(--border));
}

.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus,
.field textarea:focus,
.form-field input:not([type="checkbox"]):not([type="radio"]):focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: 0;
    border-color: color-mix(in srgb, var(--primary-hover) 62%, var(--primary) 38%);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, var(--bg-strong) 92%), var(--bg-strong));
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent),
        0 14px 30px color-mix(in srgb, var(--primary-hover) 12%, transparent);
}

.field input::placeholder,
.field textarea::placeholder,
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 68%, transparent);
}

.field input[type="checkbox"],
.field input[type="radio"],
.form-field input[type="checkbox"],
.form-field input[type="radio"] {
    width: auto;
    min-height: 0;
    padding: 0;
    box-shadow: none;
}

.field input,
.field select,
.field textarea,
.form-field input,
.form-field select,
.form-field textarea,
.topbar select {
    color-scheme: light;
}

[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field select,
[data-theme="dark"] .form-field textarea,
[data-theme="dark"] .topbar select {
    color-scheme: dark;
}

.znetwork-contact-form {
    width: min(100%, 1040px);
}

.znetwork-contact-form .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.znetwork-contact-form .field {
    width: 100%;
}

.znetwork-contact-form .field input,
.znetwork-contact-form .field select,
.znetwork-contact-form .field textarea {
    min-height: 52px;
    box-sizing: border-box;
}

.znetwork-contact-form .field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.8rem;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 1.25rem) 50%,
        calc(100% - 0.95rem) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.znetwork-company-picker {
    gap: 0.55rem;
}

.znetwork-company-picker-results {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-strong) 92%, var(--secondary) 8%);
}

.znetwork-company-picker-results[hidden] {
    display: none;
}

.znetwork-company-picker-result-list {
    display: grid;
    gap: 0.4rem;
}

.znetwork-company-picker-result-button {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    min-height: 2.75rem;
}

.znetwork-company-picker-button {
    min-height: 2.75rem;
}

.znetwork-company-picker-recent {
    display: grid;
    gap: 0.45rem;
}

.znetwork-company-picker-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.znetwork-company-picker-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.znetwork-company-picker-buttons .znetwork-company-picker-button {
    width: auto;
    flex: 0 1 auto;
}

.field input[type="date"],
.field input[type="month"],
.field input[type="time"],
.field input[type="datetime-local"] {
    min-height: 52px;
    padding-right: 3rem;
}

.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="month"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator,
.field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.78;
}

input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime-local"] {
    color-scheme: light dark;
}

[data-theme="light"] .field input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] .field input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="light"] .field input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="light"] .field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: brightness(0.25) saturate(0);
}

[data-theme="dark"] .field input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .field input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .field input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: brightness(0.2) saturate(0) invert(1);
    opacity: 1;
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"] {
    color-scheme: dark;
}

.field textarea {
    resize: vertical;
}

.code-textarea {
    min-height: 10rem;
    font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", monospace;
    font-size: 0.92rem;
    line-height: 1.55;
    white-space: pre;
}

.button {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    border-radius: 18px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    text-transform: capitalize;
}

.panel-link,
.sidebar-nav-link,
.sidebar-group-summary,
.view-tab,
.language-option,
.dashboard-widget-control,
.dashboard-icon-button,
.profile-edit-button,
.calendar-source-card,
.hero-filter-toggle,
.calendar-filter-toggle,
.dashboard-scope-trigger-inline,
.filter-state-toggle,
.dashboard-edit-toggle,
.sidebar-account-display,
.sidebar-logout,
.button-back,
.calendar-timeline-view,
.dashboard-section-filter {
    text-transform: capitalize;
}

.button:hover,
.button:focus-visible {
    filter: brightness(0.92);
}

.button:active {
    transform: translateY(1px);
}

.button-primary {
    background: var(--primary);
    color: var(--primary-contrast);
    border-radius: 999px;
}

.button-secondary {
    background: var(--secondary);
    color: var(--secondary-text);
    border: 1px solid var(--border);
}

.button-secondary:hover,
.button-secondary:focus-visible {
    color: var(--text);
    background: color-mix(in srgb, var(--secondary) 82%, var(--primary) 8%);
}

.button-approved {
    background: rgba(95, 159, 24, 0.14);
    border: 1px solid rgba(95, 159, 24, 0.32);
    color: #3f7610;
}

.button-approved:disabled {
    cursor: default;
    opacity: 1;
}

.button-quiet {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
}

.button-quiet:hover,
.button-quiet:focus-visible {
    color: var(--text);
    background: color-mix(in srgb, var(--bg-strong) 92%, var(--bg) 8%);
}

.sidebar-footer .theme-toggle-sidebar:hover,
.sidebar-footer .theme-toggle-sidebar:focus-visible,
.sidebar-account-display:hover,
.sidebar-account-display:focus-visible,
.sidebar-logout:hover,
.sidebar-logout:focus-visible {
    background: var(--primary);
    color: var(--primary-contrast);
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}

a,
button,
summary,
.button,
.panel-link,
.sidebar-nav-link,
.sidebar-group-summary,
.view-tab,
.language-option,
.dashboard-widget-tray-item,
.dashboard-widget-control,
.dashboard-icon-button,
.profile-edit-button,
.dashboard-divider-title,
.dashboard-step-card,
.accordion-summary {
    transition:
        background-color 0.22s ease,
        color 0.22s ease,
        border-color 0.22s ease,
        opacity 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease;
}

.dashboard-widget-footer .button-secondary:hover,
.dashboard-widget-footer .button-secondary:focus-visible {
    color: var(--primary-contrast);
    background: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}

.button svg {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    display: block;
}

.button.is-loading {
    padding-right: 2.55rem;
    pointer-events: none;
}

.button.is-loading::after {
    content: "";
    position: absolute;
    right: 0.95rem;
    top: 50%;
    width: 0.92rem;
    height: 0.92rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    opacity: 0.92;
    transform: translateY(-50%);
    animation: button-spinner 0.72s linear infinite;
}

@keyframes button-spinner {
    from {
        transform: translateY(-50%) rotate(0deg);
    }

    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

.button-danger {
    background: color-mix(in srgb, var(--alert) 18%, var(--bg-strong));
    color: var(--alert);
    border: 1px solid color-mix(in srgb, var(--alert) 30%, transparent);
}

.button-login {
    width: 100%;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.password-input-wrap {
    position: relative;
}

.password-input-wrap input {
    padding-right: 3.45rem;
}

.toggle-password {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    transform: translateY(-50%);
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.toggle-password svg {
    width: 1.15rem;
    height: 1.15rem;
}

.toggle-password .eye-off {
    display: none;
}

.toggle-password.visible .eye {
    display: none;
}

.toggle-password.visible .eye-off {
    display: block;
}

.toggle-password:hover,
.toggle-password:focus-visible {
    color: var(--text);
    background: color-mix(in srgb, var(--secondary) 65%, transparent);
}

.inline-form {
    margin: 0;
}

.stack,
.stack-md,
.stack-sm,
.stack-xs {
    display: grid;
}

.stack {
    gap: 1.5rem;
}

.stack-md {
    gap: 1rem;
}

.stack-sm {
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.stack-xs {
    gap: 0.35rem;
}

.stack > *,
.stack-md > *,
.stack-sm > *,
.stack-xs > * {
    margin: 0;
}

.alert {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--alert) 30%, transparent);
    color: var(--alert);
    background: color-mix(in srgb, var(--alert) 10%, transparent);
}

.list {
    margin: 0;
    padding-left: 1.25rem;
}

.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;
}

.quick-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.website-quick-menu {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    justify-items: flex-start;
}

.website-quick-group {
    display: grid;
    gap: 0.85rem;
    width: min(100%, 420px);
    min-width: min(100%, 280px);
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--secondary) 78%, var(--panel));
    overflow: hidden;
}

.website-quick-accordion[open] {
    background: color-mix(in srgb, var(--secondary) 72%, var(--panel));
}

.website-quick-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1rem;
    cursor: pointer;
    list-style: none;
    font-size: 0.95rem;
    font-weight: 700;
}

.website-quick-summary::-webkit-details-marker {
    display: none;
}

.website-quick-summary-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.website-quick-summary-arrow svg {
    width: 1rem;
    height: 1rem;
}

.website-quick-accordion[open] .website-quick-summary-arrow {
    transform: rotate(180deg);
}

.website-quick-summary:hover,
.website-quick-summary:focus-visible {
    background: color-mix(in srgb, var(--secondary) 82%, var(--primary) 8%);
}

.website-quick-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 0 1rem 1rem;
    justify-items: flex-start;
}

.website-quick-link {
    width: min(100%, 320px);
    min-width: min(100%, 220px);
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    text-align: left;
}

.website-dashboard-hero .form-actions {
    align-items: flex-start;
}

.website-home-sections {
    display: grid;
    gap: 1.15rem;
}

.website-home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.website-home-card {
    display: grid;
    gap: 1rem;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: color-mix(in srgb, var(--secondary) 72%, var(--panel));
}

.website-home-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 18%, var(--secondary));
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
}

.website-home-card-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 13, 22, 0.18) 0%, rgba(7, 13, 22, 0.06) 32%, rgba(7, 13, 22, 0.24) 100%);
    pointer-events: none;
}

.website-home-card-thumb-link {
    display: block;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.website-home-card-thumb-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px color-mix(in srgb, var(--primary) 20%, transparent);
    border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
}

.website-home-card-thumb-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.website-home-card-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.website-home-card-thumb-title {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 1;
    display: inline-flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #fff;
    font-family: var(--font-headline);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(4, 10, 18, 0.4);
}

.website-home-card-thumb-title-accent {
    width: 8px;
    min-width: 8px;
    height: 3.1rem;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 48%, transparent);
}

.website-home-card-thumb-badge {
    position: absolute;
    right: 0.9rem;
    bottom: 0.9rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 70%, rgba(7, 13, 22, 0.68));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.28);
}

.website-home-card-copy {
    display: grid;
    gap: 0.55rem;
}

.website-home-card-copy-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.website-home-card-copy h3,
.website-home-card-copy p {
    margin: 0;
}

.website-home-card-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.34rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

a.website-home-card-status {
    text-decoration: none;
}

.website-home-card-status-fresh {
    background: color-mix(in srgb, var(--primary) 12%, var(--panel));
    color: color-mix(in srgb, var(--primary) 88%, var(--text));
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
}

.website-home-card-status-stale {
    background: color-mix(in srgb, #f59e0b 14%, var(--panel));
    color: color-mix(in srgb, #d97706 88%, var(--text));
    border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--border));
}

.website-home-card-status-missing {
    background: color-mix(in srgb, var(--primary) 12%, var(--panel));
    color: color-mix(in srgb, var(--primary) 88%, var(--text));
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
}

.website-home-card-updated {
    font-size: 0.8rem;
    color: var(--muted);
}

.website-home-card-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.website-home-card-meta-stack {
    grid-template-columns: minmax(0, 1fr);
}

.website-home-card-stat {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
    padding: 0.8rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
}

.website-home-card-stat strong {
    font-size: 1rem;
    line-height: 1.2;
    display: block;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.website-home-card-stat span {
    font-size: 0.8rem;
    color: var(--muted);
}

.website-home-card-footer {
    display: grid;
    gap: 0.65rem;
    margin-top: auto;
}

.website-home-card-actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.website-home-card-actions .button {
    min-width: 0;
    flex: 1 1 0;
}

.website-home-card-edit .button {
    width: 100%;
}

.panel-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    padding: 0.95rem 1rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--secondary);
    color: var(--secondary-text);
}

.panel-link:hover,
.panel-link:focus-visible {
    color: var(--text);
    background: color-mix(in srgb, var(--secondary) 82%, var(--primary) 8%);
}

.dashboard-scope-line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.dashboard-scope-panel {
    display: grid;
    gap: 1rem;
}

.dashboard-scope-panel,
.calendar-filter-panel {
    position: relative;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    pointer-events: none;
    transition:
        max-height 0.35s ease,
        opacity 0.22s ease,
        transform 0.35s ease,
        padding 0.35s ease,
        border-color 0.22s ease,
        margin 0.35s ease;
}

.dashboard-scope-panel.is-open,
.calendar-filter-panel.is-open {
    max-height: 900px;
    opacity: 1;
    transform: translateY(0);
    padding-top: 1.2rem;
    padding-bottom: 0.95rem;
    border-color: var(--border);
    pointer-events: auto;
    margin-bottom: 1rem;
    background: color-mix(in srgb, var(--bg-strong) 97%, var(--secondary) 3%);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.dashboard-scope-panel[data-filter-state-panel],
.calendar-filter-panel[data-filter-state-panel] {
    margin-top: 0.75rem;
}

.calendar-filter-panel .module-filter-grid {
    margin-top: 1.1rem;
}

.calendar-filter-summary {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.calendar-filter-summary .pill {
    font-weight: 600;
}

.dashboard-scope-form {
    display: grid;
    gap: 1rem;
}

.dashboard-period-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

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

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

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

.dashboard-title-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: nowrap;
    position: relative;
    width: 100%;
}

.dashboard-scope-trigger-inline {
    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: 999px;
    margin-left: 0.1rem;
    position: relative;
    z-index: 6;
}

.dashboard-scope-trigger-inline.dashboard-widget-section-pill {
    padding: 0.55rem 0.95rem;
    min-height: 2.6rem;
}

.dashboard-scope-trigger-inline:hover,
.dashboard-scope-trigger-inline:focus-visible {
    background: var(--primary);
    color: #ffffff;
    border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
}

.calendar-filter-toggle {
    margin-left: 0.25rem;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.calendar-filter-toggle:hover,
.calendar-filter-toggle:focus-visible,
.calendar-filter-toggle.is-open {
    background: var(--primary);
    color: #ffffff;
    border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
}

.dashboard-modify-toolbar[hidden] {
    display: none !important;
}

.dashboard-edit-toggle {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    padding: 0;
    flex: 0 0 auto;
}

.dashboard-edit-toggle:hover,
.dashboard-edit-toggle:focus-visible {
    background: var(--primary);
    color: #ffffff;
    border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
}

.dashboard-title-edit-wrap {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    flex: 0 1 auto;
}

.dashboard-title-trigger {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-family: var(--font-headline);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.05;
    text-align: left;
    padding: 0;
    cursor: text;
    text-wrap: balance;
}

.dashboard-title-trigger:hover,
.dashboard-title-trigger:focus-visible {
    color: var(--primary);
}

.dashboard-title-input {
    width: 100%;
    max-width: 600px;
    border: 1px solid var(--primary);
    border-radius: 18px;
    padding: 0.8rem 1rem;
    background: var(--bg-strong);
    color: var(--text);
    font: inherit;
    font-family: var(--font-headline);
    font-size: 2rem;
    font-weight: 700;
}

.dashboard-modify-toolbar {
    position: fixed;
    top: var(--dashboard-toolbar-top, 0px);
    left: var(--dashboard-toolbar-left, 0px);
    z-index: 120;
    display: none;
    align-items: center;
    gap: 1rem;
    min-height: 4.25rem;
    padding: 0.9rem 1.1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-strong) 92%, var(--secondary));
    box-shadow: var(--panel-shadow);
    white-space: nowrap;
    margin-left: 0;
    align-self: flex-start;
    flex: 0 0 auto;
    transform: translateZ(0);
}

.dashboard-modify-toolbar.is-open {
    display: inline-flex;
}

.dashboard-modify-label {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    font-family: var(--font-headline);
    font-size: 1.1rem;
    font-weight: 700;
}

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

.dashboard-widget-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.dashboard-section-panel {
    display: grid;
    gap: 0.9rem;
    position: relative;
    z-index: 4;
}

.calendar-page .dashboard-section-panel {
    margin-bottom: 1rem;
}

.dashboard-section-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    position: relative;
    z-index: 5;
}

.dashboard-section-filter {
    justify-content: center;
    text-align: center;
    min-width: 160px;
    padding: 0.95rem 1rem;
    cursor: pointer;
    border: 1px solid var(--border);
    font-weight: 400;
    line-height: 1.25;
    position: relative;
    z-index: 5;
    pointer-events: auto;
}

.dashboard-section-filter:hover,
.dashboard-section-filter:focus-visible {
    color: var(--text);
    background: color-mix(in srgb, var(--secondary) 82%, var(--primary) 8%);
}

.dashboard-section-filter.is-active {
    background: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 65%, var(--border));
    color: var(--primary-contrast);
    box-shadow: 0 12px 28px rgba(96, 170, 255, 0.24);
}

.dashboard-section-filter.is-hidden {
    background: color-mix(in srgb, var(--bg-strong) 95%, var(--secondary) 5%);
    border-color: var(--border);
    color: var(--text);
    opacity: 1;
}

.dashboard-section-filter-label {
    font-weight: 400;
}

.quick-filter-shell {
    display: grid;
    gap: 0.45rem;
    margin-top: -0.45rem;
    margin-bottom: 0.2rem;
}

.quick-filter-shell > summary {
    list-style: none;
    justify-self: start;
}

.quick-filter-shell > summary::-webkit-details-marker {
    display: none;
}

.quick-filter-shell-summary {
    width: 2.7rem;
    height: 2.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
    background: color-mix(in srgb, var(--bg-strong) 86%, var(--secondary) 14%);
    color: color-mix(in srgb, var(--text) 82%, var(--muted));
    box-shadow: 0 10px 24px color-mix(in srgb, #0f172a 10%, transparent);
}

.quick-filter-shell-summary svg {
    width: 1.08rem;
    height: 1.08rem;
}

.quick-filter-shell[open] .quick-filter-shell-summary,
.quick-filter-shell-summary:hover,
.quick-filter-shell-summary:focus-visible {
    background: color-mix(in srgb, var(--primary) 18%, var(--bg-strong));
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 52%, var(--border));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent),
        0 12px 28px color-mix(in srgb, var(--primary) 20%, transparent);
}

.quick-filter-shell-content {
    display: grid;
    gap: 0.85rem;
}

.quick-filter-shell-panel {
    margin: 0;
}

.calendar-title-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.calendar-title-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    flex: 0 0 auto;
}

.quick-filter-trigger {
    flex: 0 0 auto;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
    background: color-mix(in srgb, var(--bg-strong) 86%, var(--secondary) 14%);
    color: color-mix(in srgb, var(--text) 82%, var(--muted));
    box-shadow: 0 10px 24px color-mix(in srgb, #0f172a 10%, transparent);
    transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.quick-filter-trigger svg {
    transition: transform 0.22s ease;
}

.quick-filter-trigger:hover,
.quick-filter-trigger:focus-visible,
.quick-filter-trigger.is-open {
    background: color-mix(in srgb, var(--primary) 18%, var(--bg-strong));
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 52%, var(--border));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent),
        0 12px 28px color-mix(in srgb, var(--primary) 20%, transparent);
}

.quick-filter-trigger.is-open {
    transform: translateY(-1px);
}

.quick-filter-trigger.is-open svg {
    transform: scale(1.08);
}

[data-theme="dark"] .quick-filter-shell-summary,
[data-theme="dark"] .quick-filter-trigger {
    background: color-mix(in srgb, var(--bg-strong) 86%, #3a3d43 14%);
    color: color-mix(in srgb, var(--text) 84%, var(--muted));
    border-color: color-mix(in srgb, var(--primary) 12%, rgba(255, 255, 255, 0.14));
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

.ai-analysis-panel {
    display: grid;
    gap: 1rem;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    box-shadow: none;
    pointer-events: none;
    transition:
        max-height 0.32s ease,
        opacity 0.24s ease,
        transform 0.24s ease,
        padding 0.24s ease,
        margin 0.24s ease,
        border-color 0.24s ease,
        box-shadow 0.24s ease;
}

.ai-analysis-panel.is-open {
    max-height: 120rem;
    opacity: 1;
    transform: translateY(0);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-color: var(--border);
    box-shadow: var(--panel-shadow);
    pointer-events: auto;
}

.ai-analysis-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ai-analysis-copy {
    display: grid;
    gap: 0.35rem;
    min-width: min(100%, 28rem);
}

.ai-analysis-copy h2 {
    margin: 0;
}

.ai-analysis-state,
.ai-analysis-output,
.ai-analysis-more {
    display: grid;
    gap: 0.8rem;
}

.ai-analysis-state p,
.ai-analysis-output p,
.ai-analysis-more p {
    margin: 0;
}

.ai-analysis-more-wrap {
    display: grid;
    gap: 0.8rem;
}

.ai-analysis-actions {
    display: flex;
    justify-content: flex-start;
}

.ai-analysis-more-toggle {
    justify-self: flex-start;
}

.ai-analysis-shell {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.ai-analysis-toggle {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 16px;
}

.ai-analysis-toggle.is-active,
.ai-analysis-toggle:hover,
.ai-analysis-toggle:focus-visible {
    background: var(--primary);
    color: var(--primary-contrast);
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}

.ai-analysis-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ai-analysis-toggle-icon svg {
    width: 1.18rem;
    height: 1.18rem;
    display: block;
}

.ai-analysis-panel [hidden] {
    display: none !important;
}

.timeline-inline {
    margin-top: 0.85rem;
}

.dashboard-section-empty {
    margin: 0.25rem 0 0.5rem;
}

.dashboard-widget-shell,
.dashboard-divider-widget {
    position: relative;
    min-width: 0;
    margin-bottom: 0;
}

.dashboard-widget-size-full {
    grid-column: span 2;
}

.dashboard-widget-size-half {
    grid-column: span 1;
}

.dashboard-widget-shell.is-dragging {
    opacity: 0.55;
}

.dashboard-widget-controls {
    position: absolute;
    right: 0.85rem;
    bottom: 0.85rem;
    display: inline-flex;
    gap: 0.35rem;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    padding: 0.2rem;
    border-radius: 14px;
    background: rgba(8, 8, 10, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(10px);
}

.dashboard-edit-mode .dashboard-widget-shell,
.dashboard-edit-mode .dashboard-divider-widget {
    outline: 1px dashed color-mix(in srgb, var(--primary) 40%, var(--border));
    outline-offset: 2px;
    padding-bottom: 4.25rem;
}

.dashboard-edit-mode .dashboard-widget-controls {
    opacity: 1;
    pointer-events: auto;
}

.dashboard-widget-control {
    width: 2.45rem;
    height: 2.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.95);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
}

.dashboard-icon-button {
    width: 2.45rem;
    height: 2.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: #000000;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.dashboard-icon-button:hover,
.dashboard-icon-button:focus-visible {
    background: var(--primary);
    color: #ffffff;
}

.dashboard-icon-button svg {
    width: 1.05rem;
    height: 1.05rem;
}

.dashboard-widget-control:hover,
.dashboard-widget-control:focus-visible {
    background: var(--primary);
    color: #ffffff;
}

.dashboard-widget-control svg {
    width: 1.05rem;
    height: 1.05rem;
}

.dashboard-widget-section-pill {
    display: inline-flex;
}

.dashboard-edit-mode .dashboard-widget-section-pill {
    display: none;
}

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

.dashboard-platform-card {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-strong) 88%, var(--secondary));
}

.dashboard-platform-title {
    font-family: var(--font-headline);
    font-size: 1.1rem;
    font-weight: 700;
}

.dashboard-platform-grid-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.65rem;
}

.dashboard-platform-business-list {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.dashboard-platform-business-accordion {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.14);
    overflow: hidden;
}

.dashboard-platform-business-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    list-style: none;
}

.dashboard-platform-business-summary::-webkit-details-marker {
    display: none;
}

.dashboard-platform-business-summary-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.85rem;
}

.dashboard-platform-business-summary-side {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.dashboard-platform-business-summary-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.2s ease;
}

.dashboard-platform-business-summary-arrow svg {
    width: 1rem;
    height: 1rem;
}

.dashboard-platform-business-accordion[open] .dashboard-platform-business-summary-arrow {
    transform: rotate(180deg);
}

.dashboard-platform-business-body {
    display: grid;
    gap: 0.9rem;
    padding: 0 1rem 1rem;
}

.dashboard-platform-business-body-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dashboard-platform-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.dashboard-platform-usage-card {
    display: grid;
    gap: 0.5rem;
    padding: 0.85rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-platform-usage-title {
    font-weight: 700;
}

.dashboard-platform-usage-total {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--font-headline);
    font-size: 1.2rem;
}

.dashboard-platform-usage-meta {
    display: grid;
    gap: 0.25rem;
    color: var(--muted);
    font-size: 0.92rem;
}

.dashboard-platform-business-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.85rem;
    align-items: center;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dashboard-platform-metric {
    display: grid;
    gap: 0.2rem;
    padding: 0.8rem 0.85rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.08);
    justify-items: center;
    text-align: center;
}

.dashboard-platform-metric strong {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    line-height: 1.1;
    text-align: center;
}

.dashboard-divider-widget {
    display: grid;
    gap: 0.5rem;
    padding: 0.5rem 0;
    grid-column: span 2;
}

.dashboard-divider-widget-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dashboard-divider-line {
    height: 1px;
    background: var(--border);
    flex: 1 1 auto;
}

.dashboard-divider-title {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-family: var(--font-headline);
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: none;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    cursor: text;
}

.dashboard-divider-title:hover,
.dashboard-divider-title:focus-visible {
    background: color-mix(in srgb, var(--secondary) 72%, transparent);
}

.dashboard-divider-title-input {
    max-width: 100%;
    width: min(420px, 100%);
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: var(--bg-strong);
    color: var(--text);
    font: inherit;
    font-family: var(--font-headline);
    font-size: 1.3rem;
    font-weight: 700;
    padding: 0.4rem 0.85rem;
}

.dashboard-widget-footer-button {
    justify-self: start;
}

.dashboard-widget-tray {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    height: 33vh;
    max-height: 80vh;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border-radius: 22px 22px 0 0;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-strong) 90%, var(--secondary));
    box-shadow: var(--panel-shadow);
    resize: vertical;
    overflow: auto;
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.35s ease;
    border-left: 0;
    border-right: 0;
}

.dashboard-widget-tray::-webkit-resizer {
    background: color-mix(in srgb, var(--primary) 45%, var(--border));
}

.dashboard-widget-tray.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.dashboard-widget-tray-handle {
    width: 104px;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 45%, var(--border));
    margin: 0 auto 0.85rem;
    cursor: ns-resize;
    touch-action: none;
}

body.dashboard-tray-resizing,
body.dashboard-tray-resizing * {
    cursor: ns-resize !important;
    user-select: none;
}

.dashboard-widget-tray-header {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    background: color-mix(in srgb, var(--bg-strong) 90%, var(--secondary));
}

.dashboard-widget-tray-header .dashboard-widget-tray-handle {
    grid-column: 1 / -1;
}

.dashboard-widget-tray-content {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    gap: 0.9rem;
    overflow-y: auto;
    padding-top: 0.25rem;
}

.dashboard-widget-tray-category {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 88%, var(--secondary));
    padding: 0.75rem;
}

.dashboard-widget-tray-category > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-weight: 700;
}

.dashboard-widget-tray-category > summary::-webkit-details-marker {
    display: none;
}

.dashboard-widget-tray-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.dashboard-widget-tray-item {
    flex: 0 0 clamp(260px, 33vw, 360px);
    width: clamp(260px, 33vw, 360px);
    max-width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 0.65rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--secondary);
    cursor: grab;
}

.dashboard-widget-tray-item:hover,
.dashboard-widget-tray-item:focus-visible {
    background: color-mix(in srgb, var(--secondary) 70%, var(--primary) 10%);
}

.dashboard-record-link,
.dashboard-platform-business-row-link {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: 18px;
    overflow: hidden;
}

.dashboard-record-link::before,
.dashboard-platform-business-row-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    z-index: 0;
}

.dashboard-record-link:hover::before,
.dashboard-record-link:focus-visible::before,
.dashboard-platform-business-row-link:hover::before,
.dashboard-platform-business-row-link:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}

.dashboard-record-link:hover .dashboard-list-item,
.dashboard-record-link:focus-visible .dashboard-list-item,
.dashboard-platform-business-row-link:hover .dashboard-platform-business-row,
.dashboard-platform-business-row-link:focus-visible .dashboard-platform-business-row {
    background: color-mix(in srgb, var(--secondary) 72%, var(--primary) 12%);
    border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
}

.dashboard-widget-tray-grip {
    font-size: 1.3rem;
    line-height: 1;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dashboard-widget-tray-grip svg {
    width: 1.25rem;
    height: 1.25rem;
}

.dashboard-widget-tray-copy {
    display: grid;
    gap: 0.35rem;
}

.dashboard-widget-tray-copy p {
    margin: 0;
}

.dashboard-widget-tray-copy strong {
    font-size: 0.95rem;
}

.is-open-target {
    outline: 2px solid color-mix(in srgb, var(--primary) 65%, transparent);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 16%, transparent);
}

tr.is-open-target td,
details.is-open-target,
.dashboard-list-item.is-open-target,
.ribbon-row.is-open-target,
.business-row.is-open-target {
    background: color-mix(in srgb, var(--primary) 12%, var(--bg-strong));
}

tr.is-open-target td {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 62%, transparent);
}

.dashboard-widget-drop-placeholder {
    border-radius: 22px;
    border: 1px dashed var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    min-height: 120px;
    opacity: 0.9;
    pointer-events: none;
    transition: transform 0.12s ease, opacity 0.12s ease;
}

.dashboard-widget-drop-placeholder.dashboard-widget-size-full {
    grid-column: span 2;
}

.dashboard-widget-drop-placeholder.dashboard-widget-size-half {
    grid-column: span 1;
}

.dashboard-widget-resize-preview {
    position: relative;
    overflow: visible;
    z-index: 8;
}

.dashboard-widget-resize-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px dashed color-mix(in srgb, var(--primary) 75%, white 10%);
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
    pointer-events: none;
    z-index: 40;
}

.dashboard-widget-preview-half::after {
    inset: 0 auto 0 0;
    width: calc(50% - 0.4rem);
}

.dashboard-widget-preview-full::after {
    inset: 0 auto 0 0;
    width: calc(200% + 1rem);
}

.dashboard-stat-card {
    display: grid;
    gap: 0.55rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}

.stat-card {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    min-height: 112px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-strong) 94%, var(--bg) 6%);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.stat-card strong {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.05;
}

.stat-card span,
.stat-card small {
    color: var(--muted);
}

.newsletter-soft-card {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 92%, var(--bg) 8%);
    color: var(--text);
    display: grid;
    gap: 12px;
}

.newsletter-soft-link {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-strong) 96%, var(--bg) 4%);
    color: inherit;
    text-decoration: none;
}

.newsletter-soft-inset {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-strong) 97%, var(--bg) 3%);
}

.newsletter-focus-examples {
    display: grid;
    gap: 0.85rem;
    margin-top: 0.35rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 52%),
        color-mix(in srgb, var(--bg-strong) 96%, var(--bg) 4%);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 7%, transparent);
}

.newsletter-focus-examples-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.7rem;
}

.newsletter-focus-examples-head strong {
    color: var(--text);
    font-size: 0.94rem;
    line-height: 1.2;
}

.newsletter-focus-examples-head span {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 750;
}

.newsletter-focus-examples ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.newsletter-focus-examples li {
    position: relative;
    min-height: 2.55rem;
    padding: 0.68rem 0.8rem 0.68rem 2rem;
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-strong) 86%, transparent);
    color: color-mix(in srgb, var(--text) 88%, var(--muted));
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.35;
}

.newsletter-focus-examples li::before {
    content: "";
    position: absolute;
    left: 0.78rem;
    top: 1rem;
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.newsletter-focus-examples-actions {
    display: flex;
    justify-content: flex-end;
}

.newsletter-create-ideas-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 15%, transparent), transparent 48%),
        color-mix(in srgb, var(--bg-strong) 96%, var(--primary) 4%);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--primary) 12%, transparent);
}

.newsletter-create-ideas-copy {
    display: grid;
    gap: 0.35rem;
}

.newsletter-create-ideas-copy h2 {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 2.15rem);
    line-height: 1.05;
}

.newsletter-create-ideas-button {
    min-height: 3.25rem;
    padding-inline: clamp(1.25rem, 4vw, 2.4rem);
    font-size: 1rem;
}

.newsletter-preview-frame {
    width: 100%;
    min-height: 900px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
}

.newsletter-status-box {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    color: var(--text);
}

.newsletter-status-box--ready {
    border-color: color-mix(in srgb, #10b981 28%, var(--border) 72%);
    background: color-mix(in srgb, #10b981 14%, var(--bg-strong) 86%);
}

.newsletter-status-box--warning {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--primary-hover) 16%);
    background: transparent;
}

.newsletter-log-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px 18px;
    background: color-mix(in srgb, var(--bg-strong) 94%, var(--bg) 6%);
    display: grid;
    gap: 8px;
}

.newsletter-hero-actions,
.newsletter-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.newsletter-workflow-header {
    margin-bottom: 24px;
    padding: clamp(14px, 2vw, 20px) clamp(14px, 2.4vw, 24px);
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 48%),
        color-mix(in srgb, var(--bg-strong) 96%, var(--primary) 4%);
    box-shadow: 0 16px 38px color-mix(in srgb, var(--primary) 10%, transparent);
}

.newsletter-app-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 80px;
}

.wildseo-app-header {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 52px;
    padding: 4px clamp(12px, 2vw, 22px);
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 45%),
        color-mix(in srgb, var(--bg-strong) 92%, transparent);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 7%, transparent);
}

.wildseo-app-header-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.wildseo-app-header-logo {
    display: block;
    width: auto;
    height: 34px;
    max-width: 142px;
    object-fit: contain;
}

.wildseo-app-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.wildseo-app-header .language-switcher {
    position: relative;
}

.wildseo-app-header .language-switcher-trigger,
.wildseo-header-icon-button,
.wildseo-header-menu-button {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-strong) 90%, var(--primary) 10%);
    color: var(--text);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 9%, transparent);
}

.wildseo-header-icon-button,
.wildseo-header-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 900;
}

.wildseo-header-icon-button {
    width: 44px;
    padding: 0;
}

.wildseo-header-icon-button svg,
.wildseo-header-menu-button svg {
    width: 19px;
    height: 19px;
}

.wildseo-app-header .language-switcher-trigger:hover,
.wildseo-app-header .language-switcher-trigger:focus-visible,
.wildseo-header-icon-button:hover,
.wildseo-header-icon-button:focus-visible,
.wildseo-header-menu-button:hover,
.wildseo-header-menu-button:focus-visible,
.wildseo-header-popover.is-open > button {
    border-color: color-mix(in srgb, var(--primary-hover) 46%, var(--primary) 54%);
    background: color-mix(in srgb, var(--primary) 28%, var(--bg-strong) 72%);
    transform: translateY(-1px);
}

.wildseo-header-popover {
    position: relative;
}

.wildseo-header-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(320px, calc(100vw - 32px));
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-strong) 97%, var(--primary) 3%);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.wildseo-header-popover.is-open .wildseo-header-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wildseo-header-menu a,
.wildseo-header-menu button {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.wildseo-header-menu a:hover,
.wildseo-header-menu a:focus-visible,
.wildseo-header-menu button:hover,
.wildseo-header-menu button:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
    background: color-mix(in srgb, var(--primary) 14%, var(--bg-strong) 86%);
}

.wildseo-header-menu button:disabled {
    cursor: not-allowed;
    color: color-mix(in srgb, var(--muted) 70%, transparent);
}

.wildseo-header-menu form {
    margin: 0;
}

.wildseo-profile-bobble {
    width: min(340px, calc(100vw - 32px));
}

.wildseo-profile-bobble-head {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
}

.wildseo-profile-avatar {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: #fff;
    font-size: 1.15rem;
    font-weight: 950;
    line-height: 1;
    text-align: center;
}

.wildseo-profile-bobble-head strong,
.wildseo-profile-bobble-head span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.wildseo-profile-bobble-head span {
    color: var(--muted);
    font-size: 0.82rem;
}

.wildseo-profile-bobble-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 14px;
    padding-top: 12px;
}

.wildseo-profile-bobble-grid span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.wildseo-profile-bobble-grid strong {
    font-weight: 950;
    letter-spacing: 0;
}

.website-cms-area .app-main > .hero-panel {
    margin-top: 24px;
    margin-bottom: 18px;
    padding-bottom: 0;
}

.website-cms-area .hero-panel-title {
    row-gap: 0.35rem;
}

.website-cms-area .hero-panel-title > h1 {
    margin: 0;
}

.newsletter-stepper {
    width: 100%;
}

.newsletter-stepper-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.newsletter-stepper-list::before {
    content: "";
    position: absolute;
    top: 19px;
    left: calc(100% / 12);
    right: calc(100% / 12);
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--primary) 82%, var(--primary-hover) 18%),
        color-mix(in srgb, var(--primary-hover) 76%, var(--primary) 24%)
    );
    opacity: 0.82;
}

.newsletter-stepper-step {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.newsletter-stepper-link {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0 8px;
    color: var(--muted);
    text-decoration: none;
}

.newsletter-stepper-node {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-strong) 92%, var(--primary) 8%);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 14%, transparent);
    transition: transform 180ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.newsletter-stepper-label {
    max-width: 9.5rem;
    min-height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.18;
    text-align: center;
    overflow-wrap: anywhere;
    padding: 0.44rem 0.72rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-strong) 90%, var(--primary) 10%);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 8%, transparent);
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 180ms ease;
}

.newsletter-stepper-link:hover,
.newsletter-stepper-link:focus-visible {
    color: var(--text);
}

.newsletter-stepper-link:hover .newsletter-stepper-node,
.newsletter-stepper-link:focus-visible .newsletter-stepper-node {
    transform: translateY(-4px) scale(1.28);
    border-color: color-mix(in srgb, var(--primary-hover) 60%, var(--primary) 40%);
    box-shadow: 0 16px 30px color-mix(in srgb, var(--primary-hover) 26%, transparent);
}

.newsletter-stepper-link:hover .newsletter-stepper-label,
.newsletter-stepper-link:focus-visible .newsletter-stepper-label {
    transform: translateY(2px);
    border-color: color-mix(in srgb, var(--primary-hover) 42%, var(--primary) 58%);
    background: color-mix(in srgb, var(--primary) 18%, var(--bg-strong) 82%);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--primary-hover) 14%, transparent);
}

.newsletter-stepper-link.is-active {
    color: var(--text);
}

.newsletter-stepper-link.is-active .newsletter-stepper-node {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary-hover) 62%, var(--primary) 38%);
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: var(--primary-contrast);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--primary-hover) 28%, transparent);
}

.newsletter-stepper-link.is-active .newsletter-stepper-label {
    border-color: color-mix(in srgb, var(--primary-hover) 52%, var(--primary) 48%);
    background: color-mix(in srgb, var(--primary) 26%, var(--bg-strong) 74%);
    color: var(--text);
}

.newsletter-overview-lead-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
    align-items: start;
}

.newsletter-delivery-card {
    display: grid;
    gap: 12px;
    padding: 20px;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
    border-radius: 20px;
}

.newsletter-delivery-card.is-ready,
.newsletter-delivery-card.needs-setup {
    background: transparent;
}

.newsletter-setup-stack {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.newsletter-card-topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.newsletter-select-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-strong) 96%, var(--bg) 4%);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.newsletter-bulk-panel {
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 97%, var(--bg) 3%);
}

.newsletter-control-stack {
    display: grid;
    gap: 12px;
}

.newsletter-control-panel {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto) auto;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-strong) 97%, var(--bg) 3%);
}

.newsletter-control-copy {
    min-width: 0;
}

.newsletter-control-copy strong {
    display: block;
    line-height: 1.25;
}

.newsletter-control-input {
    min-width: 220px;
}

.newsletter-details {
    display: grid;
    gap: 0;
}

.newsletter-details-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-strong) 94%, var(--bg) 6%);
}

.newsletter-details-summary::-webkit-details-marker {
    display: none;
}

.newsletter-details-summary::after {
    content: "+";
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    background: color-mix(in srgb, var(--bg-strong) 98%, var(--bg) 2%);
}

.newsletter-details[open] .newsletter-details-summary::after {
    content: "−";
}

.newsletter-details-body {
    display: grid;
    gap: 18px;
    margin-top: 16px;
}

.newsletter-details-body > .table-actions + .table-actions {
    margin-top: -6px;
}

.newsletter-bulk-panel .blog-review-batch-controls {
    gap: 8px;
    align-items: center;
}

.newsletter-bulk-panel .blog-review-batch-select-all {
    margin-right: 2px;
}

.newsletter-bulk-panel .blog-bulk-actions-select,
.newsletter-bulk-panel .blog-bulk-actions-input {
    min-height: 2.5rem;
}

.newsletter-bulk-panel .button.button-secondary {
    background: color-mix(in srgb, var(--bg-strong) 82%, var(--secondary) 18%);
}

.newsletter-bulk-panel .button.button-primary {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.newsletter-compact-list {
    display: grid;
    gap: 12px;
}

.newsletter-compact-item {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 96%, var(--bg) 4%);
}

.newsletter-summary-line {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    color: var(--muted);
    font-size: 0.95rem;
}

.newsletter-editor-form {
    display: grid;
    gap: 18px;
}

.newsletter-editor-section {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 95%, var(--bg) 5%);
}

.newsletter-editor-section-head {
    display: grid;
    gap: 4px;
}

.newsletter-editor-section-head h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
}

.newsletter-email-composer {
    gap: 18px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-strong) 98%, white 2%), color-mix(in srgb, var(--bg) 82%, var(--bg-strong) 18%));
}

.newsletter-email-frame {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border) 86%, var(--primary) 14%);
    border-radius: 8px;
    background: var(--bg-strong);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.newsletter-email-chrome {
    display: flex;
    gap: 7px;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-strong) 90%, var(--bg) 10%);
}

.newsletter-email-chrome span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 55%, white);
}

.newsletter-email-chrome span:nth-child(2) {
    background: color-mix(in srgb, var(--secondary) 54%, white);
}

.newsletter-email-chrome span:nth-child(3) {
    background: color-mix(in srgb, var(--muted) 32%, white);
}

.newsletter-email-fields {
    display: grid;
    gap: 0;
}

.newsletter-email-fields .form-field {
    gap: 8px;
    padding: 16px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.newsletter-email-fields .form-field:last-child {
    border-bottom: 0;
}

.newsletter-email-fields label {
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.newsletter-email-fields input,
.newsletter-email-fields textarea {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.newsletter-email-fields input:focus,
.newsletter-email-fields textarea:focus {
    border-color: transparent;
    box-shadow: none;
}

.newsletter-email-fields input {
    font-size: 1.2rem;
    font-weight: 750;
    line-height: 1.35;
}

.newsletter-email-content-field textarea {
    min-height: 16rem;
    line-height: 1.7;
    overflow-y: hidden;
    resize: vertical;
}

.newsletter-email-addendum .newsletter-details-summary {
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-strong) 90%, var(--bg) 10%);
}

.newsletter-editor-step {
    margin: 0;
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.newsletter-send-flow {
    display: grid;
    gap: 16px;
}

.newsletter-send-step {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 95%, var(--bg) 5%);
}

.newsletter-advanced-flow {
    display: grid;
    gap: 16px;
}

@media (max-width: 720px) {
    .wildseo-app-header {
        min-height: 52px;
        padding: 4px 10px;
    }

    .wildseo-app-header-logo {
        height: 30px;
        max-width: 112px;
    }

    .wildseo-app-header-actions {
        gap: 7px;
    }

    .wildseo-header-menu-button span {
        display: none;
    }

    .wildseo-header-menu-button {
        width: 44px;
        padding: 0;
    }

    .newsletter-workflow-header {
        padding: 16px;
    }

    .newsletter-stepper-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .newsletter-stepper-list::before {
        top: 20px;
        bottom: 20px;
        left: 20px;
        right: auto;
        width: 3px;
        height: auto;
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--primary) 82%, var(--primary-hover) 18%),
            color-mix(in srgb, var(--primary-hover) 76%, var(--primary) 24%)
        );
    }

    .newsletter-stepper-link {
        grid-template-columns: 40px minmax(0, 1fr);
        justify-items: start;
        align-items: center;
        gap: 12px;
        padding: 0;
    }

    .newsletter-stepper-label {
        max-width: none;
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }

    .newsletter-overview-lead-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .newsletter-focus-examples ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .newsletter-focus-examples li {
        min-height: 0;
    }

    .newsletter-create-ideas-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .newsletter-create-ideas-button {
        width: 100%;
    }

    .newsletter-details-summary,
    .newsletter-editor-section,
    .newsletter-send-step,
    .newsletter-soft-card,
    .newsletter-log-card {
        padding: 16px;
    }

    .newsletter-hero-actions,
    .newsletter-inline-actions,
    .newsletter-editor-section .form-actions,
    .newsletter-send-step .form-actions,
    .newsletter-advanced-flow .form-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .newsletter-hero-actions .button,
    .newsletter-inline-actions .button,
    .newsletter-editor-section .form-actions .button,
    .newsletter-send-step .form-actions .button,
    .newsletter-advanced-flow .form-actions .button {
        width: 100%;
    }

    .newsletter-hero-actions form,
    .newsletter-inline-actions form,
    .newsletter-editor-section .form-actions form,
    .newsletter-send-step .form-actions form,
    .newsletter-advanced-flow .form-actions form {
        width: 100%;
    }

    .newsletter-hero-actions form .button,
    .newsletter-inline-actions form .button,
    .newsletter-editor-section .form-actions form .button,
    .newsletter-send-step .form-actions form .button,
    .newsletter-advanced-flow .form-actions form .button {
        width: 100%;
    }

    .newsletter-card-topline {
        justify-content: flex-start;
    }

    .newsletter-select-chip {
        width: 100%;
        justify-content: center;
    }

    .newsletter-control-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .newsletter-control-input {
        min-width: 0;
        width: 100%;
    }
}

.dashboard-stat-value {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
}

.dashboard-widget-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.dashboard-widget-header > div {
    display: grid;
    gap: 1.2rem;
}

.dashboard-widget-header > div > h2 {
    margin: 0;
}

.dashboard-widget-header > div > p.muted {
    margin: 0;
}

.dashboard-widget-header-link {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: 18px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.dashboard-widget-header-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform: scale(0.985);
    border-radius: inherit;
}

.dashboard-widget-header-link:hover::before,
.dashboard-widget-header-link:focus-visible::before {
    opacity: 1;
    transform: scale(1);
}

.dashboard-widget-header-link .dashboard-widget-header {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    padding: 0.35rem 0.45rem;
    border-radius: inherit;
}

.dashboard-backup-panel {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    background: color-mix(in srgb, var(--bg-strong) 95%, var(--secondary) 5%);
}

.dashboard-backup-stack {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.dashboard-backup-summary {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
}

.dashboard-backup-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-weight: 700;
    line-height: 1;
    transition: transform 0.2s ease, background 0.2s ease;
}

.dashboard-backup-panel[open] .dashboard-backup-summary-icon {
    transform: rotate(45deg);
}

.dashboard-backup-panel summary {
    list-style: none;
}

.dashboard-backup-panel summary::-webkit-details-marker {
    display: none;
}

.dashboard-backup-content {
    display: grid;
    gap: 1rem;
    padding-top: 0.35rem;
}

.dashboard-backup-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.dashboard-backup-surface {
    display: grid;
    gap: 0.95rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg) 90%, var(--secondary) 10%);
}

.dashboard-backup-note {
    margin: 0;
}

.dashboard-backup-user-picker {
    display: grid;
    gap: 0.75rem;
    max-width: 32rem;
}

.dashboard-backup-user-picker .field {
    margin: 0;
}

.dashboard-backup-user-selected {
    margin: 0;
}

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

.dashboard-backup-action-card {
    display: grid;
    gap: 0.9rem;
    align-content: space-between;
    margin: 0;
    padding: 1rem;
}

.dashboard-backup-action-copy {
    display: grid;
    gap: 0.25rem;
}

.dashboard-playground-sync-flash {
    margin-top: 0.2rem;
}

.dashboard-playground-sync-status {
    display: grid;
    gap: 0.3rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(96, 170, 255, 0.22);
    background: rgba(96, 170, 255, 0.08);
}

.dashboard-playground-sync-status--success {
    border-color: rgba(100, 202, 137, 0.26);
    background: rgba(100, 202, 137, 0.08);
}

.dashboard-playground-sync-status--error {
    border-color: rgba(242, 107, 124, 0.28);
    background: rgba(242, 107, 124, 0.09);
}

.dashboard-playground-sync-progress {
    margin-top: 0.65rem;
}

[data-playground-sync-form].is-submitting .dashboard-playground-sync-progress {
    display: block;
}

.dashboard-backup-restore-list {
    display: grid;
    gap: 0.85rem;
}

.dashboard-backup-restore-item {
    display: grid;
    gap: 1rem;
    margin: 0;
}

.settings-backups-stack {
    display: grid;
    gap: 1.5rem;
}

.settings-backups-section {
    display: grid;
    gap: 0.9rem;
}

.settings-backups-section-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: end;
    justify-content: space-between;
}

.settings-backups-section-header h2 {
    margin: 0;
}

.settings-backups-section-header .muted {
    margin: 0.2rem 0 0;
}

.settings-backups-inline-action {
    margin: 0;
}

.settings-backups-month-stack {
    display: grid;
    gap: 0.9rem;
}

.settings-backups-month {
    display: grid;
    gap: 0.75rem;
}

.settings-backups-month-summary {
    width: min(100%, 24rem);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    list-style: none;
    font-weight: 700;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 68%, transparent);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent), 0 0 16px color-mix(in srgb, var(--primary) 18%, transparent);
}

.settings-backups-month-summary::-webkit-details-marker {
    display: none;
}

.settings-backups-month-summary-main {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.settings-backups-month-summary-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.settings-backups-month-summary-arrow svg {
    width: 1rem;
    height: 1rem;
}

.settings-backups-month[open] .settings-backups-month-summary-arrow {
    transform: rotate(180deg);
}

.settings-backups-month-summary .pill {
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}

.settings-backups-month-list {
    padding-top: 0.15rem;
}

.dashboard-backup-restore-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
    justify-content: space-between;
}

.dashboard-backup-restore-actions .field {
    min-width: min(16rem, 100%);
    margin: 0;
}

@media (max-width: 720px) {
    .dashboard-backup-restore-actions {
        justify-content: stretch;
    }

    .settings-backups-section-header {
        align-items: stretch;
    }

    .settings-backups-inline-action .button {
        width: 100%;
        justify-content: center;
    }

    .dashboard-backup-restore-actions .button,
    .dashboard-backup-action-card .button {
        width: 100%;
        justify-content: center;
    }
}

.dashboard-widget-actions {
    display: grid;
    gap: 0.75rem;
    justify-items: end;
}

.dashboard-widget-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 1rem;
}

.dashboard-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.dashboard-list {
    display: grid;
    gap: 0.75rem;
}

.dashboard-list-item {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 88%, var(--secondary));
    padding: 1rem;
    display: grid;
    gap: 0.35rem;
}

.dashboard-list-title {
    font-weight: 700;
}

.dashboard-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: var(--muted);
    font-size: 0.92rem;
}

.dashboard-progress {
    margin: 1rem 0 1.25rem;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--secondary);
    border: 1px solid var(--border);
}

.dashboard-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #d1a76a);
}

.website-build-run-panel {
    gap: 1rem;
}

.website-build-run-badge {
    align-self: flex-start;
    white-space: nowrap;
    text-decoration: none;
}

.website-build-run-badge--progress {
    border-color: color-mix(in srgb, var(--primary) 38%, transparent);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: color-mix(in srgb, var(--primary) 76%, white);
}

.website-build-run-badge--success {
    border-color: color-mix(in srgb, var(--primary) 38%, transparent);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: color-mix(in srgb, var(--primary) 76%, white);
}

.website-build-run-badge--error {
    border-color: rgba(242, 107, 124, 0.32);
    background: rgba(242, 107, 124, 0.1);
    color: color-mix(in srgb, #d94b64 78%, white);
}

.website-build-run-badge--link {
    cursor: pointer;
}

.website-build-run-badge--link:hover,
.website-build-run-badge--link:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 18%, transparent);
    outline: none;
}

.website-build-run-progress {
    margin-top: 0.35rem;
}

.website-build-run-meta {
    margin-top: 0.35rem;
}

.website-publish-stamp {
    margin: -0.1rem 0 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    padding: 0.65rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--primary) 70%, #9ed8ff);
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 10%, var(--panel));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent),
        0 0 20px color-mix(in srgb, var(--primary) 20%, transparent);
    color: color-mix(in srgb, var(--primary) 72%, white);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
}

.website-review-accordion {
    overflow: hidden;
}

.website-review-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    cursor: pointer;
    list-style: none;
}

.website-review-summary::-webkit-details-marker {
    display: none;
}

.website-review-summary-main {
    display: grid;
    gap: 0.25rem;
}

.website-review-summary-main h2,
.website-review-summary-main p,
.website-review-summary-main h3 {
    margin: 0;
}

.website-review-summary-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
}

.website-review-summary-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    transition: transform 0.2s ease;
}

.website-review-summary-arrow svg {
    width: 1rem;
    height: 1rem;
}

.website-review-accordion[open] > .website-review-summary .website-review-summary-arrow {
    transform: rotate(180deg);
}

.website-review-body {
    padding: 0 1.1rem 1.1rem;
}

.website-review-accordion-nested {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--secondary) 78%, var(--panel));
}

.website-review-summary-nested {
    padding: 0.9rem 1rem;
}

.website-review-group-title {
    font-size: 1.02rem;
    font-weight: 700;
}

.website-publish-target-card {
    display: grid;
    gap: 1.1rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, var(--secondary)), var(--panel));
}

.website-change-panel {
    display: grid;
    gap: 0.85rem;
}

.website-publish-target-header h2 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.3;
}

.website-publish-target-header .muted {
    margin: 0.45rem 0 0;
}

.website-cms-area .dashboard-widget-header > div > p.muted,
.website-cms-area .website-home-card-copy p,
.website-cms-area .website-publish-target-header .muted,
.website-cms-area .website-review-summary-main p.muted {
    display: none;
}

.website-cms-area .website-home-card-copy {
    gap: 0.35rem;
}

.website-publish-target-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.9rem;
}

.website-publish-target-item {
    display: grid;
    gap: 0.35rem;
    padding: 1rem 1.05rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--secondary) 72%, var(--panel));
}

.website-publish-target-item span {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.website-publish-target-item strong {
    font-size: 0.98rem;
    line-height: 1.45;
    word-break: break-word;
}

.website-publish-target-link {
    color: var(--primary);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.45;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em;
    word-break: break-word;
}

.website-publish-target-link:hover,
.website-publish-target-link:focus-visible {
    color: color-mix(in srgb, var(--primary) 82%, white);
}

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

.launchpad-step-stack {
    display: grid;
    gap: 1rem;
}

.launchpad-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.launchpad-action-card {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0;
    background: color-mix(in srgb, var(--bg-strong) 90%, var(--secondary));
}

.launchpad-action-button {
    width: fit-content;
    justify-self: start;
}

.dashboard-step-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 90%, var(--secondary));
    padding: 1rem;
    display: grid;
    gap: 0.65rem;
}

.dashboard-step-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
}

.launchpad-step-number {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #ffffff;
    color: #2b2c30;
    font-size: 2rem;
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.launchpad-step-card {
    gap: 0.9rem;
}

.launchpad-step-heading {
    display: grid;
    gap: 0.25rem;
    flex: 1 1 auto;
}

.launchpad-goal-form {
    margin-bottom: 33px;
    display: grid;
    gap: 1rem;
}

.dashboard-scope-line-strong {
    margin-bottom: 33px;
}

.dashboard-scope-accordion {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.dashboard-scope-accordion > .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;
}

.dashboard-scope-accordion > summary {
    width: fit-content;
    list-style: none;
}

.dashboard-scope-accordion > summary::-webkit-details-marker {
    display: none;
}

.dashboard-intro {
    margin-top: 1rem;
    margin-bottom: 0;
}

.pill-is-ghost {
    background: transparent;
}

.dashboard-step-header .pill.is-complete {
    background: var(--primary);
    color: var(--primary-contrast);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

.dashboard-step-header .pill.is-pending {
    background: var(--secondary);
    color: var(--secondary-text);
}

.calendar-source-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.calendar-source-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.56rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-strong) 96%, var(--secondary) 4%);
    color: color-mix(in srgb, var(--text) 78%, var(--muted));
    cursor: pointer;
    width: 100%;
    text-align: center;
    font-weight: 500;
    min-height: 2.7rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.calendar-source-card span {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 400;
    line-height: 1.2;
}

.calendar-source-card.is-active {
    background: var(--primary);
    color: var(--primary-contrast);
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 24%, transparent);
}

.calendar-source-card.is-hidden {
    background: color-mix(in srgb, var(--bg-strong) 95%, var(--secondary) 5%);
    color: var(--text);
    border-color: var(--border);
    opacity: 1;
}

.ribbon-source-card.is-hidden {
    background: color-mix(in srgb, var(--bg-strong) 95%, var(--secondary) 5%);
    color: var(--text);
    border-color: var(--border);
    opacity: 1;
}

.calendar-source-card.is-neutral,
.ribbon-source-card.is-neutral {
    background: color-mix(in srgb, var(--bg-strong) 95%, var(--secondary) 5%);
    color: color-mix(in srgb, var(--text) 72%, var(--muted));
    border-color: var(--border);
    opacity: 1;
}

.calendar-source-card:hover,
.calendar-source-card:focus-visible {
    background: color-mix(in srgb, var(--bg-strong) 90%, var(--primary) 10%);
    border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
}

.calendar-quick-filter-grid {
    margin-top: 0.85rem;
    margin-bottom: 0;
}

[data-theme="dark"] .launchpad-step-number {
    background: #ffffff;
    color: #2b2c30;
}

[data-theme="dark"] .app-main .panel {
    background: #2b2c30;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .app-main .dashboard-list-item,
[data-theme="dark"] .app-main .dashboard-step-card {
    background: rgba(0, 0, 0, 0.14);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .app-main .timeline-chip {
    background: #2b2c30;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .ribbon-event {
    background: #2b2c30;
    border-color: rgba(255, 255, 255, 0.08);
    opacity: 1;
}

[data-theme="dark"] .ribbon-event:hover,
[data-theme="dark"] .ribbon-event:focus-visible {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

[data-theme="dark"] .calendar-event:hover,
[data-theme="dark"] .calendar-event:focus-within {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
}

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

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 0.95rem 0.75rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data-table th:last-child,
.data-table td:last-child {
    width: auto;
    min-width: 15rem;
    white-space: nowrap;
}

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

.metric {
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin: 0.25rem 0 0;
}

.flash {
    margin-bottom: 1rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--bg-strong);
}

.flash-success {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-contrast);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 28%, transparent);
}

.flash-info,
.team-permission-hint {
    border-color: var(--primary);
    background: var(--primary);
}

.team-permission-hint {
    margin-top: 0.75rem;
    margin-bottom: 0;
    color: var(--primary-contrast);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--primary) 28%, transparent);
}

.team-permission-hint-link {
    color: var(--primary-contrast);
    font-weight: 800;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.16em;
    margin-left: 0.3rem;
}

.team-permission-hint-link:hover,
.team-permission-hint-link:focus-visible {
    color: var(--primary-contrast);
    opacity: 0.92;
}

.timeline-chip-link {
    color: var(--primary-hover);
    font-weight: 800;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.14em;
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

.timeline-chip-link:hover,
.timeline-chip-link:focus-visible {
    color: var(--primary);
    filter: brightness(0.97);
}

.flash-error,
.alert-error {
    border-color: color-mix(in srgb, var(--alert) 35%, var(--border));
    background: color-mix(in srgb, var(--alert) 10%, var(--bg-strong));
}

.dashboard-shell .auth-main {
    width: min(960px, calc(100vw - 2rem));
}

.dashboard-card {
    width: 100%;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-strong) 92%, transparent);
    box-shadow: var(--panel-shadow);
}

.dashboard-heading {
    display: grid;
    gap: 0.65rem;
    max-width: 680px;
}

.dashboard-heading h1 {
    margin: 0;
    font-family: var(--font-headline);
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1;
}

.dashboard-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.dashboard-grid article {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--secondary) 68%, transparent);
}

.dashboard-grid span {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.dashboard-grid strong {
    overflow-wrap: anywhere;
}

.dashboard-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.dashboard-actions form {
    margin: 0;
}

.customer-filter-grid,
.customer-form,
.module-filter-grid,
.module-form {
    display: grid;
    gap: 1rem;
}

.customer-filter-grid,
.module-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.customer-form .form-grid,
.module-form .form-grid {
    grid-template-columns: 1fr;
}

.customer-form .field-span-2,
.module-form .field-span-2 {
    grid-column: span 1;
}

.customer-filter-grid .form-actions,
.dashboard-scope-form .form-actions,
.module-filter-grid .form-actions {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0.35rem;
}

.calendar-filter-panel .form-actions {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}

.calendar-filter-panel .form-actions .button {
    min-height: 2.75rem;
}

.calendar-filter-panel .form-actions {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}

.calendar-filter-panel .form-actions .button {
    min-height: 2.75rem;
}

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

.field-span-2 {
    grid-column: span 2;
}

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

.form-actions,
.inline-actions,
.card-actions,
.calendar-header,
.calendar-nav {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.widgets-filter-top .field:nth-child(2) {
    margin-top: 0.45rem;
}

.widgets-filter-top .form-actions {
    margin-top: 0.45rem;
}

.view-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.view-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.view-sort-row {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}

.view-sort-form {
    margin-left: 0;
}

.view-sort-field {
    margin: 0;
    min-width: 220px;
    width: min(100%, 444px);
    max-width: 444px;
}

.view-sort-field span {
    display: block;
    margin-bottom: 0.35rem;
}

.view-sort-field select {
    width: 100%;
}

.app-main > .panel.stack-md:has(.filter-state-bar) {
    border-color: rgba(96, 170, 255, 0.78);
    box-shadow:
        0 0 0 1px rgba(96, 170, 255, 0.28),
        0 0 0 6px rgba(96, 170, 255, 0.14),
        var(--panel-shadow);
}

.filter-state-bar,
.filter-state-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-state-bar {
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0.75rem;
    padding-top: 0.25rem;
    border-top: 0;
}

.filter-state-actions {
    margin-left: auto;
    align-self: flex-start;
}

.filter-state-toggle {
    font-weight: 400;
}

.filter-state-toggle:hover,
.filter-state-toggle:focus-visible,
.filter-state-toggle.is-open {
    background: var(--primary);
    color: var(--primary-contrast);
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}

.view-tab {
    padding: 0.7rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--secondary);
    color: var(--secondary-text);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.view-tab.is-active,
.page-link.is-active {
    background: var(--primary);
    color: var(--primary-contrast);
}

.view-tab:hover,
.view-tab:focus-visible,
.page-link:hover,
.page-link:focus-visible,
.sidebar-nav-link:hover,
.sidebar-nav-link:focus-visible,
.sidebar-group-summary:hover,
.sidebar-group-summary:focus-visible,
.profile-edit-button:hover,
.profile-edit-button:focus-visible,
.language-option:hover,
.language-option:focus-visible,
.sidebar-account-display:hover,
.sidebar-account-display:focus-visible,
.icon-button:hover,
.icon-button:focus-visible,
.link-button:hover,
.link-button:focus-visible,
.accordion-summary:hover,
.accordion-summary:focus-visible {
    filter: brightness(0.94);
}

.view-tab::before {
    content: "";
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    opacity: 0.95;
}

.view-tab[href*="view=card"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.6'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.6'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.6'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.6'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.6'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.6'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.6'/%3E%3C/svg%3E");
}

.view-tab[href*="view=accordion"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='4' y='5' width='16' height='5' rx='1.5'/%3E%3Crect x='4' y='14' width='16' height='5' rx='1.5'/%3E%3Cpath d='M8 7.5h0.01'/%3E%3Cpath d='M8 16.5h0.01'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='4' y='5' width='16' height='5' rx='1.5'/%3E%3Crect x='4' y='14' width='16' height='5' rx='1.5'/%3E%3Cpath d='M8 7.5h0.01'/%3E%3Cpath d='M8 16.5h0.01'/%3E%3C/svg%3E");
}

.view-tab[href*="view=table"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='4' y='5' width='16' height='14' rx='1.6'/%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='M4 15h16'/%3E%3Cpath d='M9 5v14'/%3E%3Cpath d='M15 5v14'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='4' y='5' width='16' height='14' rx='1.6'/%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='M4 15h16'/%3E%3Cpath d='M9 5v14'/%3E%3Cpath d='M15 5v14'/%3E%3C/svg%3E");
}

.view-tab[href*="view=calendar"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M4 10h16'/%3E%3Ccircle cx='9' cy='14.5' r='1'/%3E%3Ccircle cx='15' cy='14.5' r='1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M4 10h16'/%3E%3Ccircle cx='9' cy='14.5' r='1'/%3E%3Ccircle cx='15' cy='14.5' r='1'/%3E%3C/svg%3E");
}

.view-tab[href*="view=ribbon"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 18V6h16v12'/%3E%3Cpath d='M7 10l3 3 4-5 3 4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 18V6h16v12'/%3E%3Cpath d='M7 10l3 3 4-5 3 4'/%3E%3C/svg%3E");
}

.customer-card-grid,
.module-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.record-status-section {
    display: grid;
    gap: 1rem;
}

.record-status-section-heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.record-status-section-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 58%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--primary);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent),
        0 0 16px color-mix(in srgb, var(--primary) 24%, transparent);
}

.record-status-section-badge h2 {
    margin: 0;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: inherit;
}

.record-status-section-label,
.record-status-section-name {
    color: inherit;
    text-shadow: 0 0 10px color-mix(in srgb, var(--primary) 24%, transparent);
}

.record-status-section-label {
    font-weight: 800;
}

.record-status-section-name {
    font-weight: 700;
}

.record-status-section-count {
    font-size: 0.95em;
    font-weight: 700;
    color: inherit;
}

.record-status-card-grid {
    justify-content: start;
    grid-template-columns: repeat(auto-fill, minmax(280px, 320px));
}

.customer-card,
.accordion-item,
.ribbon-row {
    overflow: hidden;
}

.customer-card .stack-sm,
.customer-card .accordion-body,
.customer-card .dashboard-list-meta,
.customer-card .business-row-details,
.customer-card .timeline-inline {
    gap: 0.25rem;
}

.customer-card .stack-sm > *,
.customer-card .accordion-body > *,
.customer-card .dashboard-list-meta > *,
.customer-card .business-row-details > * {
    margin: 0;
}

.team-card .stack-sm {
    gap: 0.25rem;
}

.team-card .stack-sm > * {
    margin: 0;
}

.card-actions {
    margin-top: 0.85rem;
}

.permission-mode-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.permission-mode-tabs .view-tab {
    appearance: none;
    border: 1px solid var(--border);
    cursor: pointer;
}

.permission-mode-tabs .view-tab.is-active {
    background: var(--primary);
    color: var(--primary-contrast);
}

.permission-mode-panel {
    display: grid;
    gap: 0.85rem;
}

.dashboard-list-meta {
    gap: 0.35rem;
}

.dashboard-list-meta > * {
    margin: 0;
}

.card-head,
.accordion-summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.accordion-summary {
    cursor: pointer;
    list-style: none;
}

.accordion-summary::-webkit-details-marker {
    display: none;
}

.accordion-body {
    margin-top: 1rem;
    display: grid;
    gap: 0.35rem;
}

.accordion-body > p {
    margin: 0;
    line-height: 1.45;
}

.accordion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.customer-hero-meta {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.customer-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.customer-hero-metrics .pill {
    min-height: 2.5rem;
}

.customer-hero-actions {
    display: flex;
    align-items: center;
}

.znetwork-hero-meta {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.widget-category-filter-actions {
    margin-top: 0.75rem;
}

.timeline-inline,
.ribbon-track,
.calendar-events,
.permission-chip-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.checkbox-field {
    display: inline-flex;
    gap: 0.65rem;
    align-items: center;
    width: min(100%, 444px);
    max-width: 444px;
}

.checkbox-field input {
    width: auto;
}

.permission-choice-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-strong) 90%, var(--secondary));
}

.permission-choice-card:hover,
.permission-choice-card:focus-within {
    filter: brightness(0.96);
}

.permission-choice-card input {
    margin-top: 0.2rem;
}

.permission-choice-copy {
    display: grid;
    gap: 0.2rem;
}

.permission-choice-title {
    font-weight: 700;
}

.permission-choice-description {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.35;
}

.permission-fieldset {
    display: grid;
    gap: 1rem;
}

.permission-group-stack {
    display: grid;
    gap: 1rem;
}

.permission-option-group {
    display: grid;
    gap: 0.7rem;
}

.permission-option-group-head h3 {
    margin: 0;
    font-size: 0.95rem;
}

.lookup-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
}

.lookup-field {
    margin: 0;
    width: min(100%, 444px);
    max-width: 444px;
}

.lookup-field input {
    width: 100%;
}

.lookup-hint {
    margin: 0.25rem 0 0.75rem;
}

.lookup-add-button {
    align-self: end;
}

.customer-activity-editor {
    display: grid;
    gap: 0.9rem;
}

.customer-activity-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.customer-activity-editor-head p {
    margin: 0.3rem 0 0;
}

.customer-activity-editor-list {
    display: grid;
    gap: 0.85rem;
}

.customer-activity-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
    gap: 0.8rem;
    align-items: end;
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--bg-accent);
}

.customer-activity-remove {
    align-self: end;
}

@media (max-width: 900px) {
    .customer-activity-row {
        grid-template-columns: 1fr;
    }

    .customer-activity-editor-head {
        flex-direction: column;
    }
}

.timezone-picker {
    display: grid;
    gap: 0.55rem;
    width: min(100%, 444px);
    max-width: 444px;
}

.timezone-picker-select {
    width: 100%;
    min-height: 11.5rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    padding: 0.65rem 0.75rem;
}

.timezone-picker-select option {
    padding: 0.35rem 0.45rem;
}

.timezone-picker-hint {
    display: block;
    margin-top: 0.35rem;
}

body.modal-open {
    overflow: hidden;
}

body.calendar-quick-add-open {
    overflow: hidden;
}

.embedded-modal-body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(96, 170, 255, 0.12), transparent 28%),
        radial-gradient(circle at bottom right, rgba(96, 170, 255, 0.1), transparent 34%),
        var(--bg);
    color: var(--text);
}

.embedded-form-shell {
    min-height: 100vh;
    padding: 0;
    background: transparent;
}

.embedded-form-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.embedded-form-head h1 {
    margin: 0;
    font-size: 1.15rem;
}

.embedded-form-shell .form-grid {
    grid-template-columns: 1fr;
}

.embedded-form-shell .field-span-2,
.embedded-form-shell .field-span-3 {
    grid-column: auto;
}

.embedded-form-shell .panel,
.embedded-form-panel {
    overflow: visible;
    background: var(--bg-strong);
    border-radius: 22px;
    border: 1px solid var(--border);
    box-shadow: var(--panel-shadow);
}

.ribbon-row-clickable {
    cursor: pointer;
}

.team-permission-stack {
    display: grid;
    gap: 1.25rem;
}

.team-table-name-cell {
    display: block;
}

.team-table-name {
    font-weight: 700;
    line-height: 1.35;
}

.team-table-permission-row {
    margin-top: 0.45rem;
}

.team-accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.team-accordion-summary-main {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.team-accordion-summary-name {
    font-weight: 700;
    line-height: 1.3;
}

.team-accordion-summary-business {
    line-height: 1.3;
}

.team-accordion-summary-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
}

.team-accordion-summary-status {
    color: var(--muted);
    font-size: 0.92rem;
}

@media (max-width: 720px) {
    .team-accordion-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .team-accordion-summary-meta {
        justify-content: flex-start;
    }
}

.permission-section-heading {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 0.35rem;
}

.permission-section-heading h3 {
    margin: 0;
}

.team-manual-permissions-summary h3 {
    margin: 0;
    font-size: inherit;
    font-weight: 700;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
}

.hours-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
}

.hours-table,
.exception-stack {
    display: grid;
    gap: 1rem;
}

.hours-row {
    display: grid;
    grid-template-columns: minmax(80px, 110px) minmax(140px, 180px) repeat(2, minmax(140px, 1fr));
    gap: 0.75rem;
    align-items: center;
}

.hours-day {
    font-weight: 700;
}

.exception-editor {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 82%, transparent);
}

.exception-editor-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.exception-editor-title {
    font-weight: 700;
}

.business-exceptions-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.75rem;
}

.exception-remove-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding-inline: 0.85rem;
}

.exception-remove-button svg {
    width: 0.95rem;
    height: 0.95rem;
}

.exception-row {
    display: grid;
    gap: 0.25rem;
}

.timeline-chip,
.calendar-event,
.ribbon-event {
    padding: 0.55rem 0.7rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--secondary);
}

.calendar-event {
    position: relative;
    overflow: hidden;
    background-clip: padding-box;
    padding: 0.46rem 0.62rem 0.5rem 0.78rem;
    border-radius: 10px;
    border-color: color-mix(in srgb, var(--calendar-event-accent, var(--primary)) 14%, var(--border));
    background: var(--calendar-event-surface, color-mix(in srgb, var(--bg-strong) 98%, var(--secondary) 2%));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--calendar-event-accent, var(--primary)) 6%, transparent),
        0 1px 2px rgba(15, 23, 42, 0.03);
    color: var(--calendar-event-text, var(--text));
}

.calendar-event::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 0.18rem;
    border-radius: 999px;
    background: var(--calendar-event-accent, var(--primary));
    opacity: 0.98;
}

[data-theme="dark"] .app-main .calendar-event,
[data-theme="dark"] .app-main .timeline-chip {
    background: var(--calendar-event-surface, #2b2c30);
    border-color: color-mix(in srgb, var(--calendar-event-accent, rgba(255, 255, 255, 0.2)) 18%, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .app-main .ribbon-event {
    background: #2b2c30;
    border-color: rgba(255, 255, 255, 0.08);
}

.calendar-page {
    --calendar-color-shared-appointments: #2f9e44;
    --calendar-color-shared-follow-ups: #dc8a3c;
    --calendar-color-shared-rentals: #d14343;
    --calendar-color-rental-shop-pickup: #2f6df6;
    --calendar-color-rental-delivery: #d14343;
    --calendar-color-rental-offsite-pickup: #2f9e44;
    --calendar-color-jobs-in-shop-installation: #2f6df6;
    --calendar-color-jobs-in-shop-consultation: #d14343;
    --calendar-color-jobs-outcall-installation: #d9a81e;
    --calendar-color-jobs-outcall-consultation: #2f9e44;
}

.calendar-event--scheduled_install,
.calendar-event--in_store_installation,
.calendar-event--in_store_consultation,
.calendar-event--outcall_installation,
.calendar-event--outcall_consultation,
.calendar-event--demo_in_store,
.calendar-event--home_consultation,
.calendar-event--last_contacted,
.calendar-event--contact_note {
    --calendar-event-accent: var(--calendar-color-shared-appointments);
    --calendar-event-surface: color-mix(in srgb, var(--calendar-color-shared-appointments) 11%, var(--bg-strong) 89%);
    --calendar-event-hover-surface: var(--calendar-color-shared-appointments);
}

.calendar-event--follow_up,
.calendar-event--schedule_follow_up {
    --calendar-event-accent: var(--calendar-color-shared-follow-ups);
    --calendar-event-surface: color-mix(in srgb, var(--calendar-color-shared-follow-ups) 11%, var(--bg-strong) 89%);
    --calendar-event-hover-surface: var(--calendar-color-shared-follow-ups);
}

.calendar-event-source-rental_contracts {
    --calendar-event-accent: var(--calendar-color-shared-rentals);
    --calendar-event-surface: color-mix(in srgb, var(--calendar-color-shared-rentals) 11%, var(--bg-strong) 89%);
    --calendar-event-hover-surface: var(--calendar-color-shared-rentals);
}

[data-theme="dark"] .app-main .calendar-event--scheduled_install,
[data-theme="dark"] .app-main .calendar-event--in_store_installation,
[data-theme="dark"] .app-main .calendar-event--in_store_consultation,
[data-theme="dark"] .app-main .calendar-event--outcall_installation,
[data-theme="dark"] .app-main .calendar-event--outcall_consultation,
[data-theme="dark"] .app-main .calendar-event--demo_in_store,
[data-theme="dark"] .app-main .calendar-event--home_consultation,
[data-theme="dark"] .app-main .calendar-event--last_contacted,
[data-theme="dark"] .app-main .calendar-event--contact_note {
    --calendar-event-surface: color-mix(in srgb, var(--calendar-color-shared-appointments) 12%, #2b2c30 88%);
    --calendar-event-hover-surface: var(--calendar-color-shared-appointments);
}

[data-theme="dark"] .app-main .calendar-event--follow_up,
[data-theme="dark"] .app-main .calendar-event--schedule_follow_up {
    --calendar-event-surface: color-mix(in srgb, var(--calendar-color-shared-follow-ups) 12%, #2b2c30 88%);
    --calendar-event-hover-surface: var(--calendar-color-shared-follow-ups);
}

[data-theme="dark"] .app-main .calendar-event-source-rental_contracts {
    --calendar-event-surface: color-mix(in srgb, var(--calendar-color-shared-rentals) 12%, #2b2c30 88%);
    --calendar-event-hover-surface: var(--calendar-color-shared-rentals);
}

.calendar-event-variant-rental-shop-pickup {
    --calendar-variant-base: var(--calendar-color-rental-shop-pickup);
    --calendar-event-accent: var(--calendar-variant-base);
    --calendar-event-surface: color-mix(in srgb, var(--calendar-variant-base) 11%, var(--bg-strong) 89%);
    --calendar-event-hover-surface: var(--calendar-variant-base);
}

.calendar-event-variant-rental-delivery {
    --calendar-variant-base: var(--calendar-color-rental-delivery);
    --calendar-event-accent: var(--calendar-variant-base);
    --calendar-event-surface: color-mix(in srgb, var(--calendar-variant-base) 11%, var(--bg-strong) 89%);
    --calendar-event-hover-surface: var(--calendar-variant-base);
}

.calendar-event-variant-rental-offsite-pickup {
    --calendar-variant-base: var(--calendar-color-rental-offsite-pickup);
    --calendar-event-accent: var(--calendar-variant-base);
    --calendar-event-surface: color-mix(in srgb, var(--calendar-variant-base) 11%, var(--bg-strong) 89%);
    --calendar-event-hover-surface: var(--calendar-variant-base);
}

.calendar-event-variant-jobs-in-shop-installation {
    --calendar-variant-base: var(--calendar-color-jobs-in-shop-installation);
    --calendar-event-accent: var(--calendar-variant-base);
    --calendar-event-surface: color-mix(in srgb, var(--calendar-variant-base) 11%, var(--bg-strong) 89%);
    --calendar-event-hover-surface: var(--calendar-variant-base);
}

.calendar-event-variant-jobs-in-shop-consultation {
    --calendar-variant-base: var(--calendar-color-jobs-in-shop-consultation);
    --calendar-event-accent: var(--calendar-variant-base);
    --calendar-event-surface: color-mix(in srgb, var(--calendar-variant-base) 11%, var(--bg-strong) 89%);
    --calendar-event-hover-surface: var(--calendar-variant-base);
}

.calendar-event-variant-jobs-outcall-installation {
    --calendar-variant-base: var(--calendar-color-jobs-outcall-installation);
    --calendar-event-accent: var(--calendar-variant-base);
    --calendar-event-surface: color-mix(in srgb, var(--calendar-variant-base) 12%, var(--bg-strong) 88%);
    --calendar-event-hover-surface: var(--calendar-variant-base);
}

.calendar-event-variant-jobs-outcall-consultation {
    --calendar-variant-base: var(--calendar-color-jobs-outcall-consultation);
    --calendar-event-accent: var(--calendar-variant-base);
    --calendar-event-surface: color-mix(in srgb, var(--calendar-variant-base) 11%, var(--bg-strong) 89%);
    --calendar-event-hover-surface: var(--calendar-variant-base);
}

.calendar-event-variant-jobs-demo-in-store {
    --calendar-event-accent: color-mix(in srgb, var(--muted) 56%, var(--border));
    --calendar-event-surface: color-mix(in srgb, var(--bg-strong) 98%, var(--secondary) 2%);
    --calendar-event-hover-surface: color-mix(in srgb, var(--bg-strong) 94%, var(--secondary) 6%);
}

[data-theme="dark"] .app-main .calendar-event-variant-rental-shop-pickup {
    --calendar-event-surface: color-mix(in srgb, var(--calendar-color-rental-shop-pickup) 12%, #2b2c30 88%);
}

[data-theme="dark"] .app-main .calendar-event-variant-rental-delivery {
    --calendar-event-surface: color-mix(in srgb, var(--calendar-color-rental-delivery) 12%, #2b2c30 88%);
}

[data-theme="dark"] .app-main .calendar-event-variant-rental-offsite-pickup {
    --calendar-event-surface: color-mix(in srgb, var(--calendar-color-rental-offsite-pickup) 12%, #2b2c30 88%);
}

[data-theme="dark"] .app-main .calendar-event-variant-jobs-in-shop-installation {
    --calendar-event-surface: color-mix(in srgb, var(--calendar-color-jobs-in-shop-installation) 12%, #2b2c30 88%);
}

[data-theme="dark"] .app-main .calendar-event-variant-jobs-in-shop-consultation {
    --calendar-event-surface: color-mix(in srgb, var(--calendar-color-jobs-in-shop-consultation) 12%, #2b2c30 88%);
}

[data-theme="dark"] .app-main .calendar-event-variant-jobs-outcall-installation {
    --calendar-event-surface: color-mix(in srgb, var(--calendar-color-jobs-outcall-installation) 12%, #2b2c30 88%);
}

[data-theme="dark"] .app-main .calendar-event-variant-jobs-outcall-consultation {
    --calendar-event-surface: color-mix(in srgb, var(--calendar-color-jobs-outcall-consultation) 12%, #2b2c30 88%);
}

[data-theme="dark"] .app-main .calendar-event-variant-jobs-demo-in-store {
    --calendar-event-surface: color-mix(in srgb, var(--bg-strong) 12%, #2b2c30 88%);
}

[data-filter-state-panel][hidden] {
    display: none !important;
}

.calendar-event-link {
    display: grid;
    gap: 0.22rem;
    justify-items: start;
    width: 100%;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
    text-align: left;
    box-sizing: border-box;
    min-width: 0;
    padding: 0;
    margin-inline: 0;
    cursor: pointer;
}

.calendar-event-link:hover,
.calendar-event-link:focus-visible {
    background: color-mix(in srgb, var(--calendar-event-accent, var(--primary)) 90%, #000 10%);
    border-color: color-mix(in srgb, var(--calendar-event-accent, var(--primary)) 72%, #ffffff 28%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--calendar-event-accent, var(--primary)) 18%, transparent),
        0 3px 10px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
    filter: saturate(1.02);
    color: #fff;
}

.calendar-event-title {
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    width: 100%;
}

.calendar-event-time {
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    width: 100%;
}

.calendar-event-jobs-reason {
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.28;
    color: color-mix(in srgb, var(--calendar-event-accent, var(--primary)) 68%, var(--muted));
    text-align: left;
    width: 100%;
}

.calendar-event-kind {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--calendar-event-accent, var(--primary)) 72%, var(--muted));
    text-align: left;
}

.calendar-event-action {
    flex: 0 0 auto;
    align-self: start;
    justify-self: start;
    justify-content: flex-start;
    text-align: left;
    margin-inline: 0;
    width: fit-content;
    border-radius: 999px;
    border: 0;
    background: color-mix(in srgb, var(--calendar-event-accent, var(--primary)) 12%, transparent);
    color: color-mix(in srgb, var(--calendar-event-accent, var(--primary)) 78%, var(--text));
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.15;
    padding: 0.2rem 0.48rem;
}

.calendar-event-source {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.69rem;
    font-weight: 500;
    line-height: 1.15;
    text-align: left;
}

.calendar-event-rental-meta {
    display: grid;
    gap: 0.14rem;
    width: 100%;
    font-size: 0.66rem;
    line-height: 1.3;
    color: var(--muted);
    text-align: left;
}

.calendar-event-rental-meta span {
    display: block;
}

.calendar-event-jobs-meta {
    display: grid;
    gap: 0.14rem;
    width: 100%;
    font-size: 0.66rem;
    line-height: 1.3;
    color: var(--muted);
    text-align: left;
}

.calendar-event-jobs-meta span {
    display: block;
}

.calendar-event-link:hover .calendar-event-kind,
.calendar-event-link:hover .calendar-event-title,
.calendar-event-link:hover .calendar-event-time,
.calendar-event-link:hover .calendar-event-jobs-reason,
.calendar-event-link:hover .calendar-event-rental-meta,
.calendar-event-link:hover .calendar-event-jobs-meta,
.calendar-event-link:hover .calendar-event-source,
.calendar-event-link:focus-visible .calendar-event-kind,
.calendar-event-link:focus-visible .calendar-event-title,
.calendar-event-link:focus-visible .calendar-event-time,
.calendar-event-link:focus-visible .calendar-event-jobs-reason,
.calendar-event-link:focus-visible .calendar-event-rental-meta,
.calendar-event-link:focus-visible .calendar-event-jobs-meta,
.calendar-event-link:focus-visible .calendar-event-source {
    color: #fff;
}

.calendar-event-link:hover .calendar-event-action,
.calendar-event-link:focus-visible .calendar-event-action {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.calendar-cell .calendar-event-link,
.calendar-day .calendar-event-link {
    justify-items: start;
    text-align: left;
}

.calendar-cell .calendar-event-action,
.calendar-day .calendar-event-action {
    justify-self: start;
    align-self: start;
    width: fit-content;
}

.calendar-events {
    display: grid;
    gap: 0.45rem;
    align-items: start;
    justify-items: stretch;
    width: 100%;
    box-sizing: border-box;
    padding-inline: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.calendar-cell:has(.calendar-rental-spans .calendar-rental-span) .calendar-events {
    padding-top: calc(var(--calendar-rental-span-count, 0) * 0.8rem + 0.15rem);
}

.calendar-rental-spans {
    position: absolute;
    inset: 1.9rem 0.45rem 0.45rem;
    display: grid;
    gap: 0.25rem;
    align-content: start;
    z-index: 0;
    pointer-events: none;
}

.calendar-rental-span {
    pointer-events: auto;
    display: block;
    width: 100%;
    min-height: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--calendar-rental-span-color, var(--primary)) 52%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--calendar-rental-span-color, var(--primary)) 52%, transparent),
        0 0 10px color-mix(in srgb, var(--calendar-rental-span-color, var(--primary)) 35%, transparent);
    opacity: 1;
    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}

.calendar-rental-span.calendar-event-variant-rental-shop-pickup {
    --calendar-rental-span-color: var(--calendar-color-rental-shop-pickup);
}

.calendar-rental-span.calendar-event-variant-rental-delivery {
    --calendar-rental-span-color: var(--calendar-color-rental-delivery);
}

.calendar-rental-span.calendar-event-variant-rental-offsite-pickup {
    --calendar-rental-span-color: var(--calendar-color-rental-offsite-pickup);
}

.calendar-rental-span.calendar-event-link {
    background: color-mix(in srgb, var(--calendar-rental-span-color, var(--primary)) 52%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--calendar-rental-span-color, var(--primary)) 52%, transparent),
        0 0 10px color-mix(in srgb, var(--calendar-rental-span-color, var(--primary)) 35%, transparent);
    color: transparent;
    justify-items: stretch;
    gap: 0;
    overflow: hidden;
}

.calendar-rental-span.calendar-event-link:hover,
.calendar-rental-span.calendar-event-link:focus-visible {
    background: color-mix(in srgb, var(--calendar-rental-span-color, var(--primary)) 64%, transparent);
    border-color: transparent;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--calendar-rental-span-color, var(--primary)) 64%, transparent),
        0 0 12px color-mix(in srgb, var(--calendar-rental-span-color, var(--primary)) 46%, transparent);
}

.calendar-rental-span:hover,
.calendar-rental-span:focus-visible {
    transform: translateY(-1px);
    filter: brightness(0.96);
    opacity: 1;
}

.calendar-rental-span--start {
    border-radius: 999px 0 0 999px;
}

.calendar-rental-span--end {
    border-radius: 0 999px 999px 0;
}

.calendar-rental-span--single {
    border-radius: 999px;
}

[data-theme="dark"] .calendar-rental-span {
    opacity: 1;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--calendar-rental-span-color, var(--primary)) 60%, transparent),
        0 0 12px color-mix(in srgb, var(--calendar-rental-span-color, var(--primary)) 42%, transparent);
}

[data-theme="dark"] .app-main .calendar-rental-span.calendar-event-source-rental_contracts,
[data-theme="dark"] .app-main .calendar-rental-span.calendar-event-link.calendar-event-source-rental_contracts {
    background: color-mix(in srgb, var(--calendar-rental-span-color, var(--calendar-color-shared-rentals)) 52%, transparent);
    border-color: transparent;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--calendar-rental-span-color, var(--calendar-color-shared-rentals)) 60%, transparent),
        0 0 12px color-mix(in srgb, var(--calendar-rental-span-color, var(--calendar-color-shared-rentals)) 42%, transparent);
}

[data-theme="dark"] .app-main .calendar-rental-span.calendar-event-link.calendar-event-source-rental_contracts:hover,
[data-theme="dark"] .app-main .calendar-rental-span.calendar-event-link.calendar-event-source-rental_contracts:focus-visible {
    background: color-mix(in srgb, var(--calendar-rental-span-color, var(--calendar-color-shared-rentals)) 64%, transparent);
    border-color: transparent;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--calendar-rental-span-color, var(--calendar-color-shared-rentals)) 64%, transparent),
        0 0 12px color-mix(in srgb, var(--calendar-rental-span-color, var(--calendar-color-shared-rentals)) 46%, transparent);
}

.ribbon-row {
    display: grid;
    gap: 1rem;
    overflow: hidden;
}

.ribbon-row.is-open-target,
.ribbon-event.is-open-target {
    box-shadow: 0 0 0 1px rgba(96, 170, 255, 0.32), 0 0 0 6px rgba(96, 170, 255, 0.14), var(--panel-shadow);
}

.ribbon-meta h2,
.customer-card h2 {
    margin: 0;
}

.ribbon-track {
    position: relative;
    overflow-x: auto;
    padding: 1rem 0 0.65rem;
    flex-wrap: nowrap;
    width: max-content;
    gap: 1.25rem;
    isolation: isolate;
}

.ribbon-track::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--primary) 96%, #ffffff 4%) 12%, color-mix(in srgb, var(--primary) 92%, #ffffff 8%) 88%, transparent 100%);
    box-shadow:
        0 0 10px rgba(96, 170, 255, 0.9),
        0 0 24px rgba(96, 170, 255, 0.45);
    pointer-events: none;
    z-index: 0;
}

[data-theme="dark"] .ribbon-track::before {
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--primary) 96%, #ffffff 4%) 12%, color-mix(in srgb, var(--primary) 92%, #ffffff 8%) 88%, transparent 100%);
    box-shadow:
        0 0 10px rgba(96, 170, 255, 0.95),
        0 0 26px rgba(96, 170, 255, 0.5);
}

.ribbon-event {
    min-width: 180px;
    display: grid;
    gap: 0.35rem;
    position: relative;
    z-index: 2;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
    background-clip: padding-box;
}

.ribbon-event::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    z-index: 1;
    pointer-events: none;
}

.ribbon-event > * {
    position: relative;
    z-index: 2;
}

.ribbon-event-link {
    text-decoration: none;
    color: inherit;
}

.ribbon-created {
    background: var(--secondary);
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
}

.ribbon-contacted,
.ribbon-last_contacted {
    background: var(--secondary);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}

.ribbon-meeting,
.ribbon-scheduled_install,
.ribbon-in_store_installation,
.ribbon-in_store_consultation,
.ribbon-outcall_installation,
.ribbon-outcall_consultation,
.ribbon-demo_in_store,
.ribbon-home_consultation {
    background: var(--secondary);
    border-color: color-mix(in srgb, #d1a76a 24%, var(--border));
}

.ribbon-follow_up,
.ribbon-schedule_follow_up {
    background: var(--secondary);
    border-color: color-mix(in srgb, #7a9e48 24%, var(--border));
}

.ribbon-source-card:hover,
.ribbon-source-card:focus-visible {
    background: var(--primary);
    color: var(--primary-contrast);
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
}

.ribbon-event:hover,
.ribbon-event:focus-visible {
    background: color-mix(in srgb, var(--primary) 18%, var(--secondary) 82%);
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.ribbon-track .ribbon-event {
    background: var(--secondary);
    border: 1px solid var(--border);
    box-shadow: none;
}

[data-theme="dark"] .ribbon-event:hover,
[data-theme="dark"] .ribbon-event:focus-visible {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

[data-theme="dark"] .ribbon-created {
    background: #2b2c30;
    border-color: rgba(96, 170, 255, 0.2);
}

[data-theme="dark"] .ribbon-contacted,
[data-theme="dark"] .ribbon-last_contacted {
    background: #2b2c30;
    border-color: rgba(96, 170, 255, 0.24);
}

[data-theme="dark"] .ribbon-meeting,
[data-theme="dark"] .ribbon-scheduled_install,
[data-theme="dark"] .ribbon-in_store_installation,
[data-theme="dark"] .ribbon-in_store_consultation,
[data-theme="dark"] .ribbon-outcall_installation,
[data-theme="dark"] .ribbon-outcall_consultation,
[data-theme="dark"] .ribbon-demo_in_store,
[data-theme="dark"] .ribbon-home_consultation {
    background: #2b2c30;
    border-color: rgba(209, 167, 106, 0.24);
}

[data-theme="dark"] .ribbon-follow_up,
[data-theme="dark"] .ribbon-schedule_follow_up {
    background: #2b2c30;
    border-color: rgba(122, 158, 72, 0.24);
}

.ribbon-row.is-source-hidden,
.ribbon-event.is-source-hidden {
    display: none !important;
}

.calendar-header {
    justify-content: space-between;
    margin-bottom: 1.15rem;
}

.calendar-nav {
    justify-content: flex-end;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    align-items: center;
    margin: -0.2rem 0 1rem;
    padding: 0.1rem 0 0;
}

.calendar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    line-height: 1.2;
    color: var(--muted);
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-strong) 88%, var(--secondary));
}

.calendar-legend-swatch {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    background: var(--calendar-legend-color, var(--primary));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, rgba(255, 255, 255, 0.56) 24%, transparent),
        0 0 0 1px color-mix(in srgb, var(--calendar-legend-color, var(--primary)) 28%, transparent);
    flex: 0 0 auto;
}

.calendar-legend-swatch-input {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid color-mix(in srgb, var(--calendar-legend-color, var(--primary)) 24%, var(--border));
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.42), transparent 34%), var(--calendar-legend-color, var(--primary));
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
}

.calendar-legend-swatch-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.calendar-legend-swatch-input::-webkit-color-swatch {
    border: 0;
    border-radius: 999px;
}

.calendar-legend-swatch-input::-moz-color-swatch {
    border: 0;
    border-radius: 999px;
}

.calendar-legend-swatch-input:hover,
.calendar-legend-swatch-input:focus-visible {
    transform: translateY(-1px) scale(1.03);
    border-color: color-mix(in srgb, var(--calendar-legend-color, var(--primary)) 48%, var(--border));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, rgba(255, 255, 255, 0.58) 36%, transparent),
        0 0 0 1px color-mix(in srgb, var(--calendar-legend-color, var(--primary)) 34%, transparent),
        0 0 0 4px color-mix(in srgb, var(--calendar-legend-color, var(--primary)) 14%, transparent),
        0 10px 18px -12px color-mix(in srgb, var(--calendar-legend-color, var(--primary)) 34%, transparent);
    filter: saturate(1.08);
}

.calendar-legend-swatch-input:focus-visible {
    outline: none;
}

.calendar-legend-swatch-input.is-pending {
    cursor: progress;
    opacity: 0.72;
}

.calendar-legend-label {
    color: color-mix(in srgb, var(--text) 78%, var(--muted));
}

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

.calendar-day-name,
.calendar-cell {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-strong) 97%, var(--secondary) 3%);
    padding: 0.95rem;
}

.calendar-day-name {
    text-align: center;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    background: transparent;
    border-style: dashed;
}

.calendar-cell {
    min-height: 162px;
    display: grid;
    align-content: start;
    gap: 0.48rem;
    justify-items: stretch;
    padding: 0.52rem 0.52rem 0.62rem;
    overflow: visible;
    position: relative;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.calendar-cell.is-muted {
    opacity: 0.66;
}

.calendar-cell:hover,
.calendar-cell:focus-within {
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    transform: translateY(-1px);
}

.calendar-day-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.blog-calendar-panel .calendar-day-head > div {
    min-width: 0;
}

.blog-calendar-add-link {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
}

.blog-calendar-panel .calendar-events {
    min-height: 0;
}

.blog-calendar-toolbar {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.blog-calendar-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.blog-calendar-filter-pill {
    border: 1px solid var(--border);
    background: var(--bg-strong);
    color: var(--text);
    cursor: pointer;
}

.blog-calendar-filter-pill.is-active {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-strong) 90%);
}

.blog-calendar-filter-pill--reset {
    background: color-mix(in srgb, var(--secondary) 90%, var(--bg-strong) 10%);
}

.blog-calendar-legend-swatch--scheduled {
    --calendar-legend-color: #2563eb;
}

.blog-calendar-legend-swatch--approved {
    --calendar-legend-color: #16a34a;
}

.blog-calendar-legend-swatch--in_review {
    --calendar-legend-color: #7c3aed;
}

.blog-calendar-legend-swatch--needs_edits {
    --calendar-legend-color: #d97706;
}

.blog-calendar-legend-swatch--draft_generated {
    --calendar-legend-color: #475569;
}

.blog-calendar-legend-swatch--published {
    --calendar-legend-color: #0f766e;
}

.calendar-event--blog_post {
    --calendar-event-accent: var(--primary);
    --calendar-event-surface: color-mix(in srgb, var(--primary) 10%, var(--bg-strong) 90%);
    --calendar-event-hover-surface: var(--primary);
}

.calendar-event--blog-workflow-scheduled {
    --calendar-event-accent: #2563eb;
    --calendar-event-surface: color-mix(in srgb, #2563eb 12%, var(--bg-strong) 88%);
    --calendar-event-hover-surface: #2563eb;
}

.calendar-event--blog-workflow-approved {
    --calendar-event-accent: #16a34a;
    --calendar-event-surface: color-mix(in srgb, #16a34a 12%, var(--bg-strong) 88%);
    --calendar-event-hover-surface: #16a34a;
}

.calendar-event--blog-workflow-in_review {
    --calendar-event-accent: #7c3aed;
    --calendar-event-surface: color-mix(in srgb, #7c3aed 12%, var(--bg-strong) 88%);
    --calendar-event-hover-surface: #7c3aed;
}

.calendar-event--blog-workflow-needs_edits {
    --calendar-event-accent: #d97706;
    --calendar-event-surface: color-mix(in srgb, #d97706 12%, var(--bg-strong) 88%);
    --calendar-event-hover-surface: #d97706;
}

.calendar-event--blog-workflow-draft_generated {
    --calendar-event-accent: #475569;
    --calendar-event-surface: color-mix(in srgb, #475569 12%, var(--bg-strong) 88%);
    --calendar-event-hover-surface: #475569;
}

.calendar-event--blog-workflow-published {
    --calendar-event-accent: #0f766e;
    --calendar-event-surface: color-mix(in srgb, #0f766e 12%, var(--bg-strong) 88%);
    --calendar-event-hover-surface: #0f766e;
}

.calendar-event--blog_post.is-filter-hidden {
    display: none;
}

.blog-calendar-detail-popover[hidden] {
    display: none !important;
}

.blog-calendar-detail-popover {
    position: fixed;
    z-index: 160;
    width: min(360px, calc(100vw - 1.5rem));
}

.blog-calendar-detail-popover-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 97%, var(--secondary) 3%);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18);
    padding: 1rem;
    display: grid;
    gap: 0.85rem;
}

.blog-calendar-detail-popover-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.blog-calendar-detail-popover-head h3 {
    margin: 0.2rem 0 0;
    font-size: 1rem;
    line-height: 1.3;
}

.blog-calendar-detail-popover-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.blog-calendar-detail-popover-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.blog-calendar-detail-popover-grid strong {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.74rem;
}

.blog-calendar-detail-popover-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.blog-calendar-detail-popover-actions .button {
    flex: 1 1 10rem;
}

.blog-calendar-dropzone {
    transition: background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.blog-calendar-dropzone.is-drop-target {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface) 92%);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
}

.calendar-event--blog_post.is-draggable {
    cursor: grab;
}

.calendar-event--blog_post.is-dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.blog-calendar-panel.is-saving {
    pointer-events: none;
}

.blog-strategy-panel {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.blog-next-action-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 26px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 18%, transparent), transparent 36%),
        linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, var(--secondary)), var(--panel));
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
}

.blog-next-action-copy {
    display: grid;
    gap: 10px;
    max-width: 720px;
}

.blog-next-action-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.blog-next-action-head h2 {
    margin: 0;
}

.blog-next-action-stage {
    background: color-mix(in srgb, var(--primary) 12%, var(--panel));
    color: var(--primary);
}

.blog-next-action-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.blog-next-action-form {
    display: inline-flex;
}

.blog-ideas-hero-actions {
    align-items: stretch;
}

.blog-ideas-hero-form {
    display: inline-flex;
    gap: 10px;
    align-items: center;
}

.blog-hero-menu {
    display: grid;
    gap: 0.9rem;
}

.blog-hero-primary-actions {
    align-items: stretch;
}

.blog-hero-action-form {
    display: inline-flex;
}

.blog-hero-action-form .button {
    width: 100%;
}

.blog-hero-overflow {
    display: grid;
    gap: 0;
}

.blog-hero-overflow-toggle {
    width: auto;
}

.blog-hero-overflow.is-open .blog-hero-overflow-toggle {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

.blog-hero-overflow-menu {
    display: grid;
    gap: 0.55rem;
    width: min(22rem, 100%);
    max-width: 100%;
    justify-self: end;
    max-height: 0;
    margin-top: 0;
    padding: 0 0.8rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel) 97%, var(--secondary) 3%);
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.25rem);
    transition:
        max-height 220ms ease,
        margin-top 180ms ease,
        padding 180ms ease,
        opacity 160ms ease,
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.blog-hero-overflow.is-open .blog-hero-overflow-menu {
    max-height: 28rem;
    margin-top: 0.7rem;
    padding: 0.8rem;
    border-color: color-mix(in srgb, var(--primary) 12%, var(--border));
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.blog-hero-overflow-menu > .blog-hero-action-form,
.blog-hero-overflow-menu > .button,
.blog-hero-overflow-menu > a,
.blog-hero-overflow-menu > form {
    width: 100%;
}

.blog-hero-overflow-menu .button {
    width: 100%;
    justify-content: flex-start;
}

.blog-hero-status-picker {
    display: grid;
    gap: 0.55rem;
}

.blog-hero-status-picker-label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.blog-hero-status-picker select {
    min-width: 100%;
}

.blog-hero-nav {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: center;
}

.blog-hero-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.35rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-strong) 95%, var(--secondary) 5%);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-hero-nav-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 8%, var(--border));
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.blog-hero-nav-link--active {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    background: color-mix(in srgb, var(--primary) 12%, var(--panel));
    color: var(--primary);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.blog-hero-nav-link--active .blog-hero-nav-step {
    background: var(--primary);
    color: #fff;
}

.blog-hero-nav-link:hover {
    border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
    transform: translateY(-1px);
}

.compact-hero-menu {
    display: grid;
    gap: 0.9rem;
}

.compact-hero-primary-actions {
    align-items: stretch;
}

.compact-hero-action-form {
    display: inline-flex;
}

.compact-hero-action-form .button {
    width: 100%;
}

.compact-hero-overflow {
    position: relative;
}

.compact-hero-overflow summary {
    list-style: none;
}

.compact-hero-overflow summary::-webkit-details-marker {
    display: none;
}

.compact-hero-overflow[open] summary {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

.compact-hero-overflow-menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 30;
    display: grid;
    gap: 0.55rem;
    min-width: min(20rem, calc(100vw - 2rem));
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel) 97%, var(--secondary) 3%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}

.compact-hero-nav {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: center;
}

.compact-hero-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-strong) 95%, var(--secondary) 5%);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.compact-hero-nav-link--active {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    background: color-mix(in srgb, var(--primary) 12%, var(--panel));
    color: var(--primary);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.compact-hero-nav-link:hover {
    border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
    transform: translateY(-1px);
}

.blog-editor-title {
    max-width: 14ch;
}

.website-cms-form .field {
    gap: 0.45rem;
}

.website-cms-form .field > span,
.website-cms-form .field > strong {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: color-mix(in srgb, var(--text) 88%, var(--text-muted));
}

.website-cms-form .field input,
.website-cms-form .field select,
.website-cms-form .field textarea:not(.code-textarea) {
    min-height: 3.15rem;
    padding: 0.92rem 1rem;
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--border) 88%, var(--primary) 12%);
    background: color-mix(in srgb, var(--bg-strong) 98%, var(--secondary) 2%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.55;
    letter-spacing: 0;
}

.website-cms-form .field input:focus,
.website-cms-form .field select:focus,
.website-cms-form .field textarea:not(.code-textarea):focus {
    outline: none;
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.website-cms-form .field textarea:not(.code-textarea) {
    min-height: 8rem;
}

.website-cms-form .field textarea:not(.code-textarea)::placeholder,
.website-cms-form .field input::placeholder {
    color: color-mix(in srgb, var(--text-muted) 82%, transparent);
}

.website-hosted-publish-panel {
    display: grid;
    gap: 1.15rem;
}

.website-hosted-publish-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.website-hosted-publish-grid > .field {
    min-width: 0;
}

.website-hosted-publish-toggle .checkbox-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.85rem;
    width: 100%;
    max-width: none;
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--border) 84%, var(--primary) 16%);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 96%, var(--secondary) 4%);
}

.website-hosted-publish-toggle .checkbox-field input {
    margin-top: 0.2rem;
}

.website-hosted-publish-field input,
.website-hosted-publish-field small,
.website-hosted-publish-field .field-error,
.website-hosted-publish-stats .stat-card strong,
.website-hosted-publish-stats .stat-card small {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.website-hosted-publish-stats {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.website-hosted-publish-stats .stat-card {
    min-width: 0;
}

.website-hosted-publish-stats .stat-card strong {
    display: block;
    line-height: 1.35;
}

.website-hosted-publish-stats .stat-card span,
.website-hosted-publish-stats .stat-card small {
    line-height: 1.45;
}

.blog-post-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.blog-post-form .field,
.blog-post-form .field-span-2 {
    width: 100%;
    max-width: none;
}

.blog-post-form > .field-span-2 {
    grid-column: 1 / -1;
}

.blog-post-form .field {
    gap: 0.45rem;
}

.blog-post-form .field > span {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: color-mix(in srgb, var(--text) 88%, var(--text-muted));
}

.blog-post-form .field input,
.blog-post-form .field select,
.blog-post-form .field textarea {
    min-height: 3.15rem;
    padding: 0.92rem 1rem;
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--border) 88%, var(--primary) 12%);
    background: color-mix(in srgb, var(--bg-strong) 98%, var(--secondary) 2%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.55;
    letter-spacing: 0;
}

.blog-post-form .field input:focus,
.blog-post-form .field select:focus,
.blog-post-form .field textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.blog-post-form .field textarea {
    min-height: 8rem;
}

.blog-post-form .field textarea[name="body"] {
    min-height: 22rem;
}

.blog-post-form .field textarea::placeholder,
.blog-post-form .field input::placeholder {
    color: color-mix(in srgb, var(--text-muted) 82%, transparent);
}

.blog-attachment-panel {
    padding: 1.2rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 1.4rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 98%, var(--secondary) 2%), var(--panel));
}

.blog-attachment-stack {
    display: grid;
    gap: 1rem;
}

.blog-attachment-highlight {
    display: grid;
    gap: 0.45rem;
    padding: 1rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--primary) 7%, var(--bg-strong));
}

.blog-attachment-highlight-copy {
    display: grid;
    gap: 0.35rem;
}

.blog-attachment-highlight-copy strong,
.blog-attachment-highlight-copy p {
    margin: 0;
}

.blog-attachment-summary {
    display: grid;
    gap: 0.65rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--panel) 98%, var(--secondary) 2%);
}

.blog-attachment-summary-copy {
    display: grid;
    gap: 0.25rem;
}

.blog-attachment-summary-copy strong,
.blog-attachment-summary-copy p {
    margin: 0;
}

.blog-attachment-summary-copy p {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.blog-attachment-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.blog-attachment-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.34rem 0.72rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-strong) 96%, var(--secondary) 4%);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}

.blog-attachment-chip--muted {
    color: var(--text-muted);
}

.blog-context-preview {
    display: grid;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--bg-strong) 98%, var(--secondary) 2%);
}

.blog-context-preview-copy {
    display: grid;
    gap: 0.22rem;
}

.blog-context-preview-copy strong,
.blog-context-preview-copy p {
    margin: 0;
}

.blog-context-preview-copy p,
.blog-context-preview-item p,
.blog-context-preview-empty,
.blog-context-preview-more {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.blog-context-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
}

.blog-context-preview-card {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
    border-radius: 0.95rem;
    background: color-mix(in srgb, var(--panel) 98%, var(--secondary) 2%);
}

.blog-context-preview-card h3,
.blog-context-preview-item strong,
.blog-context-preview-item p {
    margin: 0;
}

.blog-context-preview-card h3 {
    font-size: 0.9rem;
}

.blog-context-preview-list {
    display: grid;
    gap: 0.55rem;
}

.blog-context-preview-item {
    display: grid;
    gap: 0.14rem;
}

.blog-attached-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
}

.blog-attached-product-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--bg-strong) 98%, var(--secondary) 2%);
}

.blog-attached-product-media {
    width: 72px;
    height: 72px;
    border-radius: 0.9rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--secondary) 14%, var(--bg-strong));
}

.blog-attached-product-media img,
.blog-product-checkbox-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-attached-product-copy {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.blog-attached-product-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.blog-attached-product-copy strong {
    font-size: 0.96rem;
}

.blog-attached-product-copy .muted {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
}

.blog-attached-product-note {
    color: var(--primary);
}

.blog-attachment-category-list {
    display: grid;
    gap: 0.85rem;
}

.blog-attachment-quick-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.45rem;
}

.blog-attachment-quick-action {
    white-space: nowrap;
    min-height: 40px;
}

.blog-attachment-selection-pill {
    align-self: center;
    white-space: nowrap;
    min-height: 40px;
}

.blog-company-context-card {
    align-items: center;
    min-height: 0;
    padding: 0.85rem 1rem;
}

.blog-company-context-card .blog-checkbox {
    margin-top: 0;
}

.blog-company-context-card strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.blog-company-context-card > span:last-child {
    min-width: 0;
}

.blog-attachment-category {
    padding: 0;
    overflow: hidden;
}

.blog-attachment-group {
    border-color: color-mix(in srgb, var(--primary) 10%, var(--border));
    background: color-mix(in srgb, var(--panel) 99%, var(--secondary) 1%);
}

.blog-attachment-category-summary {
    padding: 0.82rem 0.95rem;
}

.blog-attachment-group-title {
    display: grid;
    gap: 0.14rem;
}

.blog-attachment-group-title strong,
.blog-attachment-group-title small {
    margin: 0;
}

.blog-attachment-group-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.blog-product-checkbox-grid {
    padding: 0 1rem 1rem;
}

.blog-product-checkbox-card {
    align-items: center;
}

.blog-product-checkbox-image {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 0.8rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--secondary) 14%, var(--bg-strong));
}

.blog-product-checkbox-card span:last-child {
    display: grid;
    gap: 0.22rem;
}

.blog-product-checkbox-card strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.blog-product-checkbox-card small {
    display: block;
    line-height: 1.45;
}

.blog-editor-accordion {
    padding: 0;
    overflow: hidden;
}

.blog-editor-accordion-summary {
    padding: 1.05rem 1.25rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
}

.blog-editor-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    padding: 0 1.25rem 1.25rem;
}

.blog-editor-details-grid > .field-span-2 {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .blog-next-action-panel {
        flex-direction: column;
        align-items: flex-start;
    }

    .blog-next-action-actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .blog-hero-primary-actions {
        width: 100%;
    }

    .blog-hero-overflow-menu {
        justify-self: stretch;
        width: 100%;
    }

    .blog-editor-details-grid {
        grid-template-columns: 1fr;
    }

    .blog-editor-details-grid > .field-span-2 {
        grid-column: auto;
    }
}

.blog-strategy-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
}

.blog-strategy-form > .field-span-2 {
    grid-column: 1 / -1;
}

.blog-strategy-brief-hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.1rem;
    padding: 1.35rem 1.45rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 26px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, var(--secondary) 4%), var(--panel));
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.blog-strategy-brief-copy {
    display: grid;
    gap: 0.45rem;
    max-width: 680px;
}

.blog-strategy-brief-copy h2,
.blog-strategy-brief-copy .muted {
    margin: 0;
}

.blog-strategy-brief-copy h2 {
    font-size: clamp(1.55rem, 2.2vw, 2rem);
    line-height: 1.06;
}

.blog-strategy-brief-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

.blog-strategy-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.blog-strategy-stat {
    display: grid;
    gap: 0.4rem;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 9%, var(--border));
    border-radius: 20px;
    background: var(--panel);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.blog-strategy-stat span {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.blog-strategy-stat strong {
    font-size: 1.5rem;
    line-height: 1;
    font-family: var(--font-headline);
}

.blog-strategy-card {
    display: grid;
    gap: 1.1rem;
    padding: 1.35rem;
    border: 1px solid color-mix(in srgb, var(--primary) 9%, var(--border));
    border-radius: 24px;
    background: var(--panel);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.blog-strategy-card--core {
    border-color: color-mix(in srgb, var(--primary) 14%, var(--border));
}

.blog-strategy-card--focus {
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
}

.blog-strategy-card-alert {
    background: linear-gradient(180deg, color-mix(in srgb, #f59e0b 6%, var(--panel)), var(--panel));
    border-color: color-mix(in srgb, #f59e0b 28%, var(--border));
}

.blog-strategy-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 7%, var(--border));
}

.blog-strategy-card-header > div {
    display: grid;
    gap: 0.35rem;
}

.blog-strategy-section-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 10%, var(--panel));
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.blog-strategy-card-header h2 {
    margin: 0;
    font-size: 1.16rem;
    line-height: 1.2;
}

.blog-strategy-card-header .muted {
    margin: 0;
    max-width: 64ch;
}

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

.blog-strategy-form .field,
.blog-strategy-form .field-span-2 {
    width: 100%;
    max-width: none;
}

.blog-strategy-form .field {
    gap: 0.45rem;
}

.blog-strategy-form .field > span {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: color-mix(in srgb, var(--text) 88%, var(--text-muted));
}

.blog-strategy-form .field input,
.blog-strategy-form .field select,
.blog-strategy-form .field textarea {
    min-height: 3.3rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--border) 88%, var(--primary) 12%);
    background: color-mix(in srgb, var(--bg-strong) 98%, var(--secondary) 2%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.55;
    letter-spacing: 0;
    color: var(--text);
}

.blog-strategy-form .field input:focus,
.blog-strategy-form .field select:focus,
.blog-strategy-form .field textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.blog-strategy-form .field textarea.blog-strategy-textarea {
    min-height: 9.5rem;
    line-height: 1.62;
    resize: vertical;
}

.blog-strategy-form .field textarea.blog-strategy-textarea-lg {
    min-height: 13.5rem;
}

.blog-strategy-form .field textarea::placeholder,
.blog-strategy-form .field input::placeholder {
    color: color-mix(in srgb, var(--text-muted) 82%, transparent);
}

.blog-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
}

.blog-checkbox {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 0.92rem;
    height: 0.92rem;
    min-width: 0.92rem;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid color-mix(in srgb, var(--primary) 26%, var(--border));
    border-radius: 0.28rem;
    background: color-mix(in srgb, var(--panel) 96%, var(--bg-strong));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.blog-checkbox::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: 0.24rem;
    height: 0.5rem;
    border-right: 1.9px solid #fff;
    border-bottom: 1.9px solid #fff;
    transform: translate(-50%, -56%) rotate(45deg) scale(0.82);
    transform-origin: center;
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.blog-checkbox:hover {
    border-color: color-mix(in srgb, var(--primary) 46%, var(--border));
    background: color-mix(in srgb, var(--primary) 4%, var(--panel));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--primary) 7%, transparent),
        0 1px 4px rgba(96, 170, 255, 0.1);
    transform: translateY(-0.5px);
}

.blog-checkbox:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 52%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
    outline: none;
}

.blog-checkbox:checked {
    border-color: color-mix(in srgb, var(--primary) 80%, var(--border));
    background: linear-gradient(180deg, var(--primary), var(--primary-hover));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--primary) 10%, transparent),
        0 2px 6px rgba(96, 170, 255, 0.16);
}

.blog-checkbox:checked::after {
    opacity: 1;
    transform: translate(-50%, -56%) rotate(45deg) scale(1);
}

.blog-checkbox--table {
    width: 0.88rem;
    height: 0.88rem;
    min-width: 0.88rem;
    border-radius: 0.28rem;
}

.blog-review-batch-select-all .blog-checkbox {
    margin-top: 0.05rem;
}

.blog-checkbox-card {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.85rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--bg-strong) 97%, var(--secondary) 3%);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.blog-checkbox-card:has(.blog-checkbox:checked) {
    border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-strong));
    box-shadow: 0 8px 18px rgba(96, 170, 255, 0.1);
}

.blog-checkbox-card strong {
    display: inline-block;
    margin-bottom: 0.2rem;
}

.blog-placement-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.blog-checkbox--radio {
    border-radius: 999px;
}

.blog-checkbox--radio::after {
    width: 0.38rem;
    height: 0.38rem;
    border: 0;
    border-radius: 999px;
    background: #fff;
    transform: translate(-50%, -50%) scale(0.72);
    top: 50%;
}

.blog-checkbox--radio:checked::after {
    transform: translate(-50%, -50%) scale(1);
}

.blog-placement-card {
    min-height: 100%;
}

.blog-strategy-chip-field {
    display: grid;
    gap: 0.65rem;
    padding-top: 0.25rem;
}

.blog-strategy-chip-field > span {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: color-mix(in srgb, var(--text) 88%, var(--text-muted));
}

.blog-strategy-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.blog-strategy-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.4rem 0.76rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 6%, var(--panel));
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.2;
}

.blog-strategy-chip--link {
    background: color-mix(in srgb, var(--secondary) 14%, var(--panel));
}

.blog-strategy-chip--alert {
    background: color-mix(in srgb, #f59e0b 14%, var(--panel));
    border-color: color-mix(in srgb, #f59e0b 28%, var(--border));
}

.blog-idea-priority-cell {
    display: grid;
    gap: 0.45rem;
}

.blog-idea-priority-pill--high {
    background: color-mix(in srgb, #16a34a 16%, var(--panel));
    color: #166534;
}

.blog-idea-priority-pill--medium {
    background: color-mix(in srgb, #f59e0b 16%, var(--panel));
    color: #92400e;
}

.blog-idea-priority-pill--low {
    background: color-mix(in srgb, #64748b 16%, var(--panel));
    color: #475569;
}

.blog-idea-score-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    min-width: 280px;
}

.blog-idea-score-item {
    display: grid;
    gap: 0.2rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-strong) 94%, var(--secondary) 6%);
}

.blog-idea-score-item span {
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.blog-idea-score-item strong {
    font-size: 0.95rem;
    line-height: 1.2;
}

.blog-bulk-actions-select,
.blog-bulk-actions-input,
.blog-review-batch-controls select,
.blog-review-batch-controls input[type="datetime-local"] {
    min-height: 2.7rem;
    padding: 0.75rem 2.75rem 0.75rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-strong) 96%, var(--secondary) 4%);
    color: var(--text);
    font: inherit;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

.blog-bulk-actions-select,
.blog-review-batch-controls select {
    min-width: 11rem;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position:
        calc(100% - 1.15rem) calc(50% - 0.12rem),
        calc(100% - 0.8rem) calc(50% - 0.12rem);
    background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
    background-repeat: no-repeat;
    cursor: pointer;
}

.blog-bulk-actions-select:hover,
.blog-bulk-actions-select:focus-visible,
.blog-bulk-actions-input:hover,
.blog-bulk-actions-input:focus-visible,
.blog-review-batch-controls select:hover,
.blog-review-batch-controls select:focus-visible,
.blog-review-batch-controls input[type="datetime-local"]:hover,
.blog-review-batch-controls input[type="datetime-local"]:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
    box-shadow: 0 14px 28px rgba(96, 170, 255, 0.14);
    outline: none;
}

[data-theme="dark"] .blog-idea-priority-pill--high {
    color: #86efac;
}

[data-theme="dark"] .blog-idea-priority-pill--medium {
    color: #fcd34d;
}

[data-theme="dark"] .blog-idea-priority-pill--low {
    color: #cbd5e1;
}

.blog-workflow-funnel-panel {
    background: var(--panel);
    border: 1px solid color-mix(in srgb, var(--primary) 8%, var(--border));
}

.blog-workflow-funnel {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, auto));
    gap: 0.9rem;
    align-items: center;
}

.blog-workflow-funnel-stage {
    display: grid;
    gap: 0.35rem;
    min-width: 120px;
    padding: 0.95rem 1rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 96%, var(--secondary) 4%);
    text-align: center;
}

.blog-workflow-funnel-stage--filled {
    border-color: color-mix(in srgb, var(--primary) 14%, var(--border));
}

.blog-workflow-funnel-stage--active {
    border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
    background: color-mix(in srgb, var(--primary) 8%, var(--panel));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 8%, transparent);
}

.blog-workflow-funnel-count {
    font-family: var(--font-headline);
    font-size: 1.55rem;
    line-height: 1;
}

.blog-workflow-funnel-label {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.blog-workflow-funnel-arrow {
    position: relative;
    width: 28px;
    height: 2px;
    background: color-mix(in srgb, var(--primary) 26%, var(--border));
}

.blog-workflow-funnel-arrow::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid color-mix(in srgb, var(--primary) 26%, var(--border));
    border-right: 2px solid color-mix(in srgb, var(--primary) 26%, var(--border));
    transform: translateY(-50%) rotate(45deg);
}

.blog-readiness-panel {
    display: grid;
    gap: 1rem;
    padding: 1.35rem;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
    border-radius: 24px;
    background: var(--panel);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.blog-readiness-panel--ready {
    border-color: color-mix(in srgb, #16a34a 28%, var(--border));
}

.blog-readiness-panel--needs-work {
    border-color: color-mix(in srgb, #f59e0b 28%, var(--border));
}

.blog-readiness-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.blog-readiness-copy {
    display: grid;
    gap: 0.45rem;
}

.blog-readiness-copy h2,
.blog-readiness-copy p {
    margin: 0;
}

.blog-readiness-pill--ready {
    background: color-mix(in srgb, #16a34a 16%, var(--panel));
    color: #166534;
}

.blog-readiness-pill--needs-work {
    background: color-mix(in srgb, #f59e0b 16%, var(--panel));
    color: #92400e;
}

.blog-readiness-score {
    display: grid;
    gap: 0.2rem;
    min-width: 110px;
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 96%, var(--secondary) 4%);
    text-align: center;
}

.blog-readiness-score strong {
    font-family: var(--font-headline);
    font-size: 1.7rem;
    line-height: 1;
}

.blog-readiness-score span,
.blog-readiness-stat span {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.blog-readiness-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.blog-readiness-stat {
    display: grid;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 95%, var(--secondary) 5%);
}

.blog-readiness-stat strong {
    font-size: 1rem;
    line-height: 1.2;
}

.blog-readiness-checks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.8rem;
}

.blog-readiness-check {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 96%, var(--secondary) 4%);
}

.blog-readiness-check strong {
    min-width: 0;
    line-height: 1.35;
}

.blog-readiness-check-copy {
    min-width: 0;
}

.blog-readiness-check-actions,
.blog-review-checklist-actions {
    display: grid;
    justify-items: end;
    gap: 0.55rem;
}

.blog-readiness-check .pill,
.blog-review-checklist-pill {
    white-space: nowrap;
}

.blog-readiness-check-pill--passed {
    background: color-mix(in srgb, #16a34a 16%, var(--panel));
    color: #166534;
}

.blog-readiness-check-pill--needs-work {
    background: color-mix(in srgb, #f59e0b 16%, var(--panel));
    color: #92400e;
}

.blog-review-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(300px, 0.85fr);
    gap: 1.3rem;
    align-items: start;
}

.blog-review-preview,
.blog-review-sidebar {
    display: grid;
    gap: 1rem;
}

.blog-review-preview-card,
.blog-review-sidebar-card {
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 24px;
    background: var(--panel);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.blog-review-preview-media {
    aspect-ratio: 16 / 8.4;
    background: color-mix(in srgb, var(--primary) 6%, var(--bg-strong));
}

.blog-review-preview-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-review-preview-body,
.blog-review-sidebar-card {
    padding: 1.35rem;
}

.blog-review-preview-body {
    display: grid;
    gap: 1rem;
}

.blog-review-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.blog-review-preview-body h2 {
    margin: 0;
    font-size: clamp(1.6rem, 1.9vw, 2.2rem);
    line-height: 1.08;
}

.blog-review-preview-excerpt {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.blog-review-preview-content {
    display: grid;
    gap: 1rem;
    font-size: 1rem;
    line-height: 1.78;
    color: var(--text);
}

.blog-review-preview-content > :first-child {
    margin-top: 0;
}

.blog-review-preview-content > :last-child {
    margin-bottom: 0;
}

.blog-review-preview-content h1,
.blog-review-preview-content h2,
.blog-review-preview-content h3,
.blog-review-preview-content h4 {
    margin: 1.35rem 0 0.55rem;
    font-family: var(--font-headline);
    line-height: 1.12;
}

.blog-review-preview-content p,
.blog-review-preview-content ul,
.blog-review-preview-content ol,
.blog-review-preview-content blockquote {
    margin: 0;
}

.blog-review-preview-content a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

.blog-review-preview-content a:hover,
.blog-review-preview-content a:focus-visible {
    color: var(--primary-hover);
}

.blog-review-preview-content ul,
.blog-review-preview-content ol {
    padding-left: 1.25rem;
}

.blog-review-preview-content blockquote {
    padding: 0.95rem 1rem;
    border-left: 4px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    border-radius: 0 16px 16px 0;
    background: color-mix(in srgb, var(--primary) 6%, var(--bg-strong));
    color: var(--text-muted);
}

.blog-review-sidebar-card {
    display: grid;
    gap: 1rem;
}

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

.blog-review-metric {
    display: grid;
    gap: 0.28rem;
    padding: 0.9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 95%, var(--secondary) 5%);
}

.blog-review-metric strong {
    font-size: 1rem;
    line-height: 1.25;
}

.blog-review-metric span {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.blog-review-alerts,
.blog-review-checklist,
.blog-review-versions {
    display: grid;
    gap: 0.75rem;
}

.blog-review-checklist-item,
.blog-review-version-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 96%, var(--secondary) 4%);
}

.blog-review-checklist-item strong,
.blog-review-version-item strong {
    display: block;
    line-height: 1.35;
}

.blog-review-checklist-copy {
    min-width: 0;
}

.blog-inline-fix-button {
    min-height: 0;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.1;
    white-space: nowrap;
}

.blog-review-checklist-pill--passed {
    background: color-mix(in srgb, #16a34a 16%, var(--panel));
    color: #166534;
}

.blog-review-checklist-pill--needs-work {
    background: color-mix(in srgb, #f59e0b 16%, var(--panel));
    color: #92400e;
}

.blog-inline-ai-panel {
    display: grid;
    gap: 1rem;
    padding: 1.35rem;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
    border-radius: 24px;
    background: var(--panel);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

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

.blog-inline-ai-card {
    display: grid;
    gap: 0.9rem;
    align-content: start;
    padding: 1.05rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
    border-radius: 20px;
    background: color-mix(in srgb, var(--bg-strong) 96%, var(--secondary) 4%);
}

.blog-inline-ai-card--wide {
    grid-column: 1 / -1;
}

.blog-inline-ai-card-copy {
    display: grid;
    gap: 0.35rem;
}

.blog-inline-ai-card-copy h3,
.blog-inline-ai-card-copy p {
    margin: 0;
}

.blog-inline-ai-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.blog-inline-ai-stack {
    display: grid;
    gap: 0.9rem;
}

.blog-ai-change-review {
    display: grid;
    gap: 1rem;
}

.blog-ai-change-accordion {
    padding: 0;
    overflow: hidden;
}

.blog-ai-change-review-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 1.25rem 1.25rem;
}

.blog-ai-change-card {
    display: grid;
    gap: 1rem;
    padding: 1.1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 22px;
    background: var(--panel);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.blog-ai-change-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.blog-ai-change-card-head h3,
.blog-ai-change-card-head p {
    margin: 0;
}

.blog-ai-change-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

.blog-ai-change-pane {
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 96%, var(--secondary) 4%);
}

.blog-ai-change-pane--after {
    border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-strong));
}

.blog-ai-change-label {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.blog-ai-change-pane p {
    margin: 0;
    line-height: 1.6;
}

.blog-ai-change-image {
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 16 / 10;
    background: color-mix(in srgb, var(--primary) 6%, var(--bg-strong));
}

.blog-ai-change-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-ai-change-actions {
    display: flex;
    justify-content: flex-end;
}

.blog-review-batch-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 20px;
    background: color-mix(in srgb, var(--bg-strong) 96%, var(--secondary) 4%);
}

.blog-review-batch-copy {
    display: grid;
    gap: 0.3rem;
}

.blog-review-batch-copy h3,
.blog-review-batch-copy p {
    margin: 0;
}

.blog-review-batch-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
}

.blog-review-batch-select-all {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--primary) 10%, var(--border));
    border-radius: 16px;
    background: color-mix(in srgb, var(--panel) 96%, var(--secondary) 4%);
    font-weight: 600;
}

.blog-review-filter-panel {
    display: grid;
    gap: 1rem;
}

.blog-review-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.blog-review-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
}

.blog-review-filter-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    min-height: 1.6rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 10%, var(--panel));
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
}

.blog-review-filter-chip--active {
    background: color-mix(in srgb, var(--primary) 12%, var(--panel));
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

.blog-strategy-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 58px;
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--primary) 5%, var(--bg-strong));
    color: var(--text);
    font-weight: 600;
}

.blog-strategy-toggle input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--primary);
}

.blog-strategy-submitbar {
    position: sticky;
    bottom: 0.75rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 22px;
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.blog-strategy-submitbar-copy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

[data-theme="dark"] .blog-strategy-stat,
[data-theme="dark"] .blog-strategy-card {
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .blog-review-preview-card,
[data-theme="dark"] .blog-review-sidebar-card {
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .blog-readiness-panel {
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .blog-readiness-pill--ready,
[data-theme="dark"] .blog-readiness-check-pill--passed {
    color: #86efac;
}

[data-theme="dark"] .blog-readiness-pill--needs-work,
[data-theme="dark"] .blog-readiness-check-pill--needs-work {
    color: #fcd34d;
}

[data-theme="dark"] .blog-checkbox {
    background: color-mix(in srgb, var(--bg-strong) 97%, rgba(96, 170, 255, 0.02));
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .blog-checkbox:hover {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--primary) 12%, transparent),
        0 1px 4px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .blog-checkbox:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

[data-theme="dark"] .blog-checkbox-card {
    background: color-mix(in srgb, var(--bg-strong) 95%, rgba(96, 170, 255, 0.03));
    border-color: color-mix(in srgb, var(--primary) 12%, var(--border));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] .blog-checkbox-card:has(.blog-checkbox:checked) {
    background: color-mix(in srgb, var(--primary) 14%, var(--bg-strong));
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

[data-theme="dark"] .blog-review-checklist-pill--passed {
    color: #86efac;
}

[data-theme="dark"] .blog-review-checklist-pill--needs-work {
    color: #fcd34d;
}

[data-theme="dark"] .blog-inline-ai-panel {
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .blog-ai-change-card {
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .blog-review-batch-bar {
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] .blog-bulk-actions-select,
[data-theme="dark"] .blog-bulk-actions-input,
[data-theme="dark"] .blog-review-batch-controls select,
[data-theme="dark"] .blog-review-batch-controls input[type="datetime-local"] {
    background-color: color-mix(in srgb, var(--bg-strong) 94%, rgba(96, 170, 255, 0.06));
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .blog-strategy-form .field input,
[data-theme="dark"] .blog-strategy-form .field select,
[data-theme="dark"] .blog-strategy-form .field textarea {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .blog-strategy-submitbar {
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.22);
}

@media (max-width: 900px) {
    .blog-post-form {
        grid-template-columns: 1fr;
    }

    .blog-readiness-head {
        flex-direction: column;
    }

    .blog-readiness-meta {
        grid-template-columns: 1fr 1fr;
    }

    .blog-strategy-brief-hero {
        flex-direction: column;
    }

    .blog-strategy-brief-meta {
        justify-content: flex-start;
    }

    .blog-strategy-submitbar {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-strategy-submitbar .form-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .blog-idea-score-grid {
        grid-template-columns: 1fr 1fr;
        min-width: 0;
    }

    .blog-workflow-funnel {
        grid-template-columns: 1fr;
    }

    .blog-review-workspace {
        grid-template-columns: 1fr;
    }

    .blog-inline-ai-grid {
        grid-template-columns: 1fr;
    }

    .blog-ai-change-compare {
        grid-template-columns: 1fr;
    }

    .blog-review-batch-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .blog-review-batch-controls {
        justify-content: flex-start;
    }

    .blog-workflow-funnel-arrow {
        width: 2px;
        height: 18px;
        margin: 0 auto;
    }

    .blog-workflow-funnel-arrow::after {
        right: 50%;
        top: auto;
        bottom: -1px;
        transform: translateX(50%) rotate(135deg);
    }

    .blog-strategy-summary,
    .blog-strategy-card-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .blog-hero-primary-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .blog-hero-primary-actions > .button,
    .blog-hero-primary-actions > form {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .blog-hero-primary-actions .button,
    .blog-hero-overflow-toggle {
        width: 100%;
        justify-content: center;
    }

    .blog-hero-overflow-menu {
        min-width: 0;
        width: 100%;
        justify-self: stretch;
    }

    .blog-hero-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.2rem;
    }

    .blog-hero-nav-link {
        white-space: nowrap;
    }

    .blog-editor-title {
        max-width: 100%;
        font-size: clamp(2.25rem, 9vw, 3rem);
        line-height: 0.98;
    }

    .blog-strategy-submitbar {
        position: static;
        padding: 0.9rem 1rem;
        border-radius: 18px;
        backdrop-filter: none;
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
    }

    .blog-strategy-submitbar-copy {
        display: none;
    }

    .blog-strategy-submitbar .form-actions {
        width: 100%;
    }

    .blog-strategy-submitbar .form-actions .button {
        flex: 1 1 0;
        justify-content: center;
    }

    .blog-readiness-meta,
    .blog-readiness-checks {
        grid-template-columns: 1fr;
    }

    .blog-readiness-check {
        grid-template-columns: 1fr;
    }

    .blog-readiness-check-actions,
    .blog-review-checklist-actions {
        width: 100%;
        justify-items: flex-start;
    }

    .blog-idea-score-grid {
        grid-template-columns: 1fr;
    }

    .blog-review-metrics {
        grid-template-columns: 1fr;
    }

    .blog-review-checklist-item,
    .blog-review-version-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .blog-strategy-summary,
    .blog-strategy-card-grid {
        grid-template-columns: 1fr;
    }

    .blog-strategy-card-header {
        flex-direction: column;
    }
}

.calendar-day-number {
    font-weight: 700;
    font-size: 0.92rem;
    justify-self: start;
    color: color-mix(in srgb, var(--text) 82%, var(--muted));
}

.calendar-day-weekday {
    justify-self: end;
    font-size: 0.68rem;
    line-height: 1.1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--muted) 82%, var(--text));
    white-space: nowrap;
    padding-top: 0.08rem;
}

.calendar-day-quick-add {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 6;
    display: grid;
    justify-items: end;
}

.calendar-day-quick-add-trigger {
    width: 2rem;
    height: 2rem;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-strong) 86%, var(--primary) 14%);
    color: var(--primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
    pointer-events: none;
}

.calendar-day-quick-add-trigger svg {
    width: 0.95rem;
    height: 0.95rem;
}

.calendar-cell:hover .calendar-day-quick-add-trigger,
.calendar-cell:focus-within .calendar-day-quick-add-trigger,
.calendar-day-quick-add.is-open .calendar-day-quick-add-trigger {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.calendar-day-quick-add.is-open .calendar-day-quick-add-trigger,
.calendar-day-quick-add-trigger:hover,
.calendar-day-quick-add-trigger:focus-visible {
    background: color-mix(in srgb, var(--primary) 16%, var(--bg-strong) 84%);
    border-color: color-mix(in srgb, var(--primary) 52%, var(--border));
}

.calendar-day-quick-add-menu {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 248px;
    width: min(680px, calc(100vw - 2rem));
    max-width: min(680px, calc(100vw - 2rem));
    max-height: min(95vh, calc(100vh - 1rem));
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-strong) 98%, var(--secondary) 2%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    display: grid;
    gap: 0.7rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    scrollbar-gutter: stable;
    z-index: 130;
}

.calendar-day-quick-add-menu.is-primary-view {
    width: min(960px, calc(100vw - 2rem));
    max-width: min(960px, calc(100vw - 2rem));
    padding: 1.2rem;
    gap: 1rem;
}

.calendar-day-quick-add-menu[hidden],
.calendar-day-quick-add-backdrop[hidden] {
    display: none !important;
}

.calendar-day-quick-add-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 125;
}

.calendar-day-quick-add-group {
    display: grid;
    gap: 0.45rem;
}

.calendar-day-quick-add-primary {
    display: grid;
    gap: 1rem;
}

.calendar-day-quick-add-primary .calendar-day-quick-add-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.calendar-day-quick-add-primary .calendar-day-quick-add-links a,
.calendar-day-quick-add-primary .calendar-day-quick-add-links button {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    min-height: 5.25rem;
    padding: 1.05rem 1.1rem;
    font-size: 1rem;
    line-height: 1.3;
    border-radius: 16px;
}

.calendar-day-quick-add-primary[hidden],
.calendar-day-quick-add-step[hidden] {
    display: none !important;
}

.calendar-day-quick-add-step {
    display: grid;
    gap: 0.7rem;
    min-height: 0;
}

.calendar-day-quick-add-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}

.calendar-day-quick-add-form-column {
    display: grid;
    gap: 0.7rem;
    align-content: start;
}

.calendar-day-quick-add-new-customer {
    justify-self: start;
}

.calendar-day-quick-add-staff-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.calendar-day-quick-add-staff-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 1.95rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--secondary) 88%);
    color: var(--text);
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
}

.calendar-day-quick-add-staff-pill strong {
    font-size: 0.86rem;
    line-height: 1;
}

.calendar-day-quick-add-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.calendar-day-quick-add-back {
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    padding: 0;
}

.calendar-day-quick-add-step-title {
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    text-align: right;
}

.calendar-day-quick-add-group h4 {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
}

.calendar-day-quick-add-menu.is-primary-view .calendar-day-quick-add-group h4 {
    font-size: 0.98rem;
}

.calendar-day-quick-add-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.calendar-day-quick-add-links a,
.calendar-day-quick-add-links button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--secondary);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.calendar-day-quick-add-links a:hover,
.calendar-day-quick-add-links a:focus-visible,
.calendar-day-quick-add-links button:hover,
.calendar-day-quick-add-links button:focus-visible {
    background: color-mix(in srgb, var(--primary) 14%, var(--secondary) 86%);
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
    transform: translateY(-1px);
}

.calendar-day-quick-add-links a.is-disabled,
.calendar-day-quick-add-links a[aria-disabled="true"],
.calendar-day-quick-add-links button.is-disabled,
.calendar-day-quick-add-links button[aria-disabled="true"] {
    opacity: 0.48;
    pointer-events: none;
}

.calendar-day-quick-add-customer {
    display: grid;
    gap: 0.35rem;
}

.calendar-day-quick-add-customer-spaced {
    margin-top: 0.4rem;
}

.calendar-day-quick-add-customer[hidden] {
    display: none !important;
}

.calendar-day-quick-add-customer span {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--muted);
}

.calendar-day-quick-add-customer input,
.calendar-day-quick-add-customer textarea,
.calendar-day-quick-add-customer select {
    width: 100%;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-strong) 88%, var(--secondary) 12%);
    color: var(--text);
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.calendar-day-quick-add-customer textarea {
    min-height: 6.5rem;
    resize: vertical;
    line-height: 1.45;
}

.calendar-day-quick-add-customer input:focus,
.calendar-day-quick-add-customer textarea:focus,
.calendar-day-quick-add-customer select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.calendar-day-quick-add-feedback {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--muted);
}

.calendar-day-quick-add-feedback.is-error {
    color: var(--danger);
}

.calendar-day-quick-add-feedback.is-success {
    color: var(--success);
}

.calendar-day-quick-add-calendar {
    display: grid;
    gap: 0.55rem;
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-strong) 97%, var(--secondary) 3%);
}

.calendar-day-quick-add-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.calendar-day-quick-add-month-nav {
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-strong);
    color: var(--text);
    cursor: pointer;
}

.calendar-day-quick-add-month-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text);
}

.calendar-day-quick-add-weekdays,
.calendar-day-quick-add-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.28rem;
}

.calendar-day-quick-add-weekdays span {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--muted);
}

.calendar-day-quick-add-day {
    width: 100%;
    min-height: 0;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.38rem 0.45rem;
    box-shadow: inset 0 0 0 1px transparent;
    aspect-ratio: 1 / 1;
}

.calendar-day-quick-add-day-shell {
    display: grid;
    gap: 0.26rem;
    min-height: 0;
    align-content: start;
}

.calendar-day-quick-add-day-shell.has-summary {
    min-height: 4.4rem;
}

.calendar-day-quick-add-day-number {
    line-height: 1;
}

.calendar-day-quick-add-day.is-muted {
    opacity: 0.34;
}

.calendar-day-quick-add-day.is-selected {
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-strong) 92%);
    color: var(--text);
    border-color: color-mix(in srgb, var(--primary) 75%, #ffffff 25%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary) 72%, #ffffff 28%),
        0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

.calendar-day-quick-add-day:hover,
.calendar-day-quick-add-day:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-strong) 90%);
}

.calendar-day-quick-add-day.is-selected:hover,
.calendar-day-quick-add-day.is-selected:focus-visible {
    background: color-mix(in srgb, var(--primary) 13%, var(--bg-strong) 87%);
}

.calendar-day-quick-add-day-count {
    justify-self: center;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 0.45rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 28%, transparent);
}

.calendar-day-quick-add-day-count:hover,
.calendar-day-quick-add-day-count:focus-visible {
    background: color-mix(in srgb, var(--primary) 82%, #000 18%);
}

.calendar-day-quick-add-jobs-summary-modal[hidden] {
    display: none;
}

.calendar-day-quick-add-jobs-summary-modal {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 6;
}

.calendar-day-quick-add-jobs-summary-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 13, 28, 0.42);
}

.calendar-day-quick-add-jobs-summary-card {
    position: relative;
    z-index: 1;
    width: min(28rem, calc(100% - 1rem));
    max-height: min(30rem, calc(100vh - 8rem));
    overflow: auto;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 16px;
    background: var(--bg-strong);
    box-shadow: 0 22px 48px rgba(7, 13, 28, 0.28);
}

.calendar-day-quick-add-jobs-summary-headings {
    display: grid;
    gap: 0.2rem;
}

.calendar-day-quick-add-jobs-summary-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
}

.calendar-day-quick-add-jobs-summary-list {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.85rem;
}

.calendar-day-quick-add-jobs-summary-item {
    padding: 0.75rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg) 76%, var(--bg-strong) 24%);
}

.calendar-day-quick-add-jobs-summary-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.calendar-day-quick-add-jobs-summary-item-time {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary);
}

.calendar-day-quick-add-jobs-summary-item-title {
    margin-top: 0.18rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
}

.calendar-day-quick-add-jobs-summary-item-label,
.calendar-day-quick-add-jobs-summary-item-meta,
.calendar-day-quick-add-jobs-summary-empty {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.calendar-day-quick-add-jobs-summary-view {
    flex-shrink: 0;
    min-height: 2rem;
    padding-inline: 0.8rem;
}

.calendar-day-quick-add-save {
    width: 100%;
    justify-self: stretch;
    justify-content: center;
}

.rental-return-modal {
    max-width: min(32rem, calc(100vw - 2rem));
}

.rental-return-modal-copy {
    margin: 0.35rem 0 0;
}

.rental-return-modal-actions {
    justify-content: flex-end;
}

@media (max-width: 780px) {
    .calendar-day-quick-add-menu {
        max-width: min(420px, calc(100vw - 1rem));
        max-height: calc(100dvh - 1rem);
    }

    .calendar-day-quick-add-menu.is-primary-view {
        width: min(420px, calc(100vw - 1rem));
        max-width: min(420px, calc(100vw - 1rem));
        padding: 0.95rem;
        max-height: calc(100dvh - 1rem);
    }

    .calendar-day-quick-add-primary .calendar-day-quick-add-links {
        grid-template-columns: minmax(0, 1fr);
    }

    .calendar-day-quick-add-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .calendar-day-quick-add-jobs-summary-card {
        width: calc(100% - 0.5rem);
        max-height: min(34rem, calc(100vh - 5rem));
    }
}

.calendar-event-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 1.2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.calendar-event-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.calendar-event-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
}

.calendar-event-modal-card {
    position: relative;
    z-index: 1;
    width: min(720px, calc(100vw - 1.5rem));
    max-height: min(88vh, 920px);
    border-radius: 20px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-strong) 98%, var(--secondary) 2%);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.16);
    padding: 1.25rem 1.25rem 1.05rem;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.22s ease;
}

.calendar-event-modal.is-open .calendar-event-modal-card {
    transform: translateY(0) scale(1);
}

.calendar-event-modal-top-actions {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.calendar-event-modal-return-button {
    min-height: 2.4rem;
    padding-inline: 0.95rem;
    border-radius: 999px;
}

.calendar-event-modal-close {
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    border-radius: 999px;
    background: #000;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.calendar-event-modal-close svg {
    width: 1rem;
    height: 1rem;
}

.calendar-event-modal-body {
    display: grid;
    gap: 0.95rem;
    min-height: 0;
    overflow: auto;
    padding-right: 0.2rem;
}

.calendar-event-modal-mobile-action-row {
    display: none;
}

.calendar-event-modal-type {
    font-size: 1.03rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
}

.calendar-event-modal-type.is-type-action,
.calendar-event-modal-type.is-source-rental-contracts {
    color: var(--calendar-color-shared-appointments);
}

.calendar-event-modal-type.is-type-follow-up {
    color: var(--calendar-color-shared-follow-ups);
}

.calendar-event-modal-type.is-source-rental-contracts {
    color: var(--calendar-color-shared-rentals);
}

.calendar-event-modal-type.is-variant-rental-shop-pickup {
    color: var(--calendar-color-rental-shop-pickup);
}

.calendar-event-modal-type.is-variant-jobs-in-shop-installation {
    color: var(--calendar-color-jobs-in-shop-installation);
}

.calendar-event-modal-type.is-variant-rental-delivery {
    color: var(--calendar-color-rental-delivery);
}

.calendar-event-modal-type.is-variant-jobs-in-shop-consultation {
    color: var(--calendar-color-jobs-in-shop-consultation);
}

.calendar-event-modal-type.is-variant-rental-offsite-pickup {
    color: var(--calendar-color-rental-offsite-pickup);
}

.calendar-event-modal-type.is-variant-jobs-outcall-consultation {
    color: var(--calendar-color-jobs-outcall-consultation);
}

.calendar-event-modal-type.is-variant-jobs-outcall-installation {
    color: var(--calendar-color-jobs-outcall-installation);
}

.calendar-event-modal-type.is-variant-jobs-demo-in-store {
    color: var(--muted);
}

.calendar-event-modal-meta {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    flex-wrap: wrap;
}

.calendar-event-modal-date,
.calendar-event-modal-source-meta {
    color: var(--muted);
    font-size: 0.92rem;
}

.calendar-event-modal-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.8rem;
}

.calendar-event-modal-detail-card {
    display: grid;
    gap: 0.28rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--secondary) 82%, transparent);
}

.calendar-event-modal-detail-card--link {
    text-decoration: none;
    position: relative;
    cursor: pointer;
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 28%),
        color-mix(in srgb, var(--secondary) 80%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent),
        0 10px 24px rgba(37, 99, 235, 0.12),
        0 0 0 4px rgba(59, 130, 246, 0.07);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.rental-contract-inventory-link {
    margin-top: 0.85rem;
    justify-items: start;
    text-align: left;
}

.rental-contract-inventory-link .calendar-event-modal-detail-head {
    width: 100%;
}

.rental-contract-inventory-link .calendar-event-modal-detail-link-label {
    margin-left: auto;
    flex: 0 0 auto;
}

.calendar-event-modal-detail-card--link:hover,
.calendar-event-modal-detail-card--link:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
        0 14px 28px rgba(37, 99, 235, 0.18),
        0 0 0 4px rgba(59, 130, 246, 0.11);
}

.calendar-event-modal-detail-card.is-editable {
    position: relative;
    gap: 0.5rem;
    cursor: pointer;
    overflow: visible;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.calendar-event-modal-detail-card.is-editable:hover,
.calendar-event-modal-detail-card.is-editable:focus-within {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
    background: color-mix(in srgb, var(--secondary) 76%, var(--bg-strong) 24%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.calendar-event-modal-detail-card.is-editable.is-editing {
    cursor: default;
    z-index: 12;
}

.calendar-event-modal-detail-card.is-pending {
    opacity: 0.7;
}

.calendar-event-modal-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.calendar-event-modal-detail-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.calendar-event-modal-detail-value {
    font-size: 0.96rem;
    line-height: 1.35;
    color: var(--text);
}

.calendar-event-modal-detail-link-label {
    justify-self: end;
    align-self: start;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--primary) 82%, var(--text));
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
}

.calendar-event-modal-detail-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.calendar-event-modal-detail-tool {
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-strong) 92%, var(--secondary) 8%);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.calendar-event-modal-detail-tool svg {
    width: 0.82rem;
    height: 0.82rem;
}

.calendar-event-modal-detail-tool:hover,
.calendar-event-modal-detail-tool:focus-visible {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--bg-strong) 70%, var(--secondary) 30%);
    border-color: color-mix(in srgb, var(--text) 18%, var(--border));
    color: var(--text);
}

.calendar-event-modal-detail-editor {
    display: grid;
    gap: 0.55rem;
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    top: calc(100% - 0.35rem);
    z-index: 20;
    padding: 0.85rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    background: color-mix(in srgb, var(--bg-strong) 94%, var(--secondary) 6%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(16px);
}

.calendar-event-modal-inline-editor {
    position: absolute;
    z-index: 40;
    width: min(360px, calc(100% - 2rem));
}

.calendar-event-modal-inline-editor[hidden] {
    display: none;
}

.calendar-event-modal-inline-editor-body {
    display: grid;
    gap: 0.55rem;
    padding: 0.85rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    background: color-mix(in srgb, var(--bg-strong) 94%, var(--secondary) 6%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(16px);
}

.calendar-event-modal-inline-editor.is-pending {
    opacity: 0.72;
}

.calendar-event-modal-inline-editor::before {
    content: "";
    position: absolute;
    top: -0.45rem;
    left: 1.25rem;
    width: 0.9rem;
    height: 0.9rem;
    transform: rotate(45deg);
    border-left: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    border-top: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    background: color-mix(in srgb, var(--bg-strong) 94%, var(--secondary) 6%);
}

.calendar-event-modal-detail-editor input,
.calendar-event-modal-detail-editor textarea,
.calendar-event-modal-detail-editor select {
    width: 100%;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--border) 88%, var(--text) 12%);
    background: color-mix(in srgb, var(--bg-strong) 86%, var(--secondary) 14%);
    color: var(--text);
    padding: 0.82rem 0.95rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.calendar-event-modal-detail-editor textarea {
    min-height: 6.5rem;
    resize: vertical;
}

.calendar-event-modal-detail-editor input:focus,
.calendar-event-modal-detail-editor textarea:focus,
.calendar-event-modal-detail-editor select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}

.calendar-event-modal-detail-editor-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.calendar-event-modal-detail-save,
.calendar-event-modal-detail-cancel {
    border-radius: 999px;
    border: 1px solid var(--border);
    padding: 0.5rem 0.92rem;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.calendar-event-modal-detail-save {
    background: color-mix(in srgb, var(--primary) 14%, var(--bg-strong));
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    color: var(--primary);
}

.calendar-event-modal-detail-cancel {
    background: color-mix(in srgb, var(--bg-strong) 90%, var(--secondary) 10%);
    color: var(--text);
}

.calendar-event-modal-detail-save:hover,
.calendar-event-modal-detail-save:focus-visible,
.calendar-event-modal-detail-cancel:hover,
.calendar-event-modal-detail-cancel:focus-visible {
    transform: translateY(-1px);
}

.calendar-event-modal-detail-save:hover,
.calendar-event-modal-detail-save:focus-visible {
    background: color-mix(in srgb, var(--primary) 22%, var(--bg-strong));
    border-color: color-mix(in srgb, var(--primary) 52%, var(--border));
}

.calendar-event-modal-detail-cancel:hover,
.calendar-event-modal-detail-cancel:focus-visible {
    background: color-mix(in srgb, var(--bg-strong) 72%, var(--secondary) 28%);
    border-color: color-mix(in srgb, var(--text) 16%, var(--border));
}

.calendar-event-modal-detail-feedback {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
}

.calendar-event-modal-detail-feedback.is-error {
    color: #dc8a3c;
}

.calendar-event-modal-detail-feedback.is-success {
    color: var(--primary);
}

.calendar-event-modal-notes {
    display: grid;
    gap: 0.45rem;
    padding: 1rem 1.05rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-accent);
}

.calendar-event-modal-notes h4 {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.calendar-event-modal-notes p {
    margin: 0;
    line-height: 1.6;
}

.calendar-event-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: 1.15rem;
    width: 100%;
}

.calendar-event-modal-view {
    margin-left: auto;
}

.calendar-event-modal-delete-button {
    justify-self: flex-start;
}

.wizard-delivery-calc-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-block: 0.6rem 0.9rem;
}

.wizard-delivery-feedback {
    margin: 0;
}

.wizard-delivery-feedback.is-error {
    color: #dc8a3c;
}

.wizard-delivery-feedback.is-success {
    color: var(--primary);
}

.wizard-delivery-feedback.is-warning {
    color: #d9a81e;
}

.wizard-delivery-feedback-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.14em;
    font-weight: 600;
}

@media (max-width: 720px) {
    .calendar-event-modal {
        padding: 0.75rem;
    }

    .calendar-event-modal-card {
        width: min(100%, calc(100vw - 1rem));
        max-height: calc(100vh - 1rem);
        padding: 1rem 1rem 0.95rem;
    }

    .calendar-event-modal-details {
        grid-template-columns: 1fr;
    }

    .calendar-event-modal-top-actions {
        left: 1rem;
        right: 1rem;
        justify-content: space-between;
    }

    .calendar-event-modal-return-button {
        min-width: 0;
        padding-inline: 0.85rem;
        font-size: 0.9rem;
    }
}

.wizard-customer-modal {
    position: fixed;
    inset: 0;
    z-index: 135;
    display: grid;
    place-items: center;
    padding: 1.4rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.wizard-customer-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.wizard-customer-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 10, 18, 0.7);
}

.wizard-customer-modal-card {
    position: relative;
    z-index: 1;
    width: min(1100px, 80vw);
    height: min(88vh, 980px);
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transform: translateY(8px) scale(0.985);
    transition: transform 0.2s ease;
}

.wizard-customer-modal.is-open .wizard-customer-modal-card {
    transform: translateY(0) scale(1);
}

.wizard-customer-modal-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    border-radius: 26px;
}

@media (max-width: 900px) {
    .wizard-customer-modal {
        padding: 0.8rem;
    }

    .wizard-customer-modal-card {
        width: min(100%, 100vw);
        height: min(92vh, 100%);
    }
}

.calendar-timeline-panel {
    display: grid;
    gap: 1rem;
}

.calendar-timeline-list {
    display: grid;
    gap: 0.75rem;
}

.calendar-timeline-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    border-radius: 14px;
    box-shadow: none;
    transform: translateY(0);
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, filter 0.16s ease;
}

.calendar-timeline-row.calendar-event-source-rental_contracts,
.calendar-timeline-row[class*="calendar-event-variant-rental-"] {
    background: var(--calendar-event-surface, color-mix(in srgb, var(--bg-strong) 88%, var(--secondary)));
    border-color: color-mix(in srgb, var(--calendar-event-accent, var(--border)) 24%, var(--border));
}

.calendar-timeline-row:hover,
.calendar-timeline-row:focus-visible {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    filter: none;
}

.calendar-timeline-main {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.calendar-timeline-view {
    align-self: center;
    justify-self: end;
    white-space: nowrap;
}

.zscan-result-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.zscan-preview-panel {
    display: grid;
    gap: 0.75rem;
}

.zscan-preview-image {
    width: 100%;
    max-width: 320px;
    border-radius: 16px;
    border: 1px solid var(--border);
    object-fit: cover;
    box-shadow: var(--panel-shadow);
}

.zscan-raw-output {
    margin: 0;
    padding: 1rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 14px;
    background: color-mix(in srgb, var(--secondary) 72%, var(--bg-strong) 28%);
    border: 1px solid var(--border);
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"] {
    color-scheme: dark;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) saturate(100%) invert(1);
    opacity: 1;
}

.dashboard-list-item[data-calendar-event-card] {
    cursor: pointer;
}

.dashboard-list-item[data-calendar-event-card]:hover,
.dashboard-list-item[data-calendar-event-card]:focus-visible {
    background: color-mix(in srgb, var(--primary) 18%, var(--secondary) 82%);
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.calendar-timeline-row.dashboard-list-item[data-calendar-event-card]:hover,
.calendar-timeline-row.dashboard-list-item[data-calendar-event-card]:focus-visible {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.calendar-timeline-row.calendar-event--scheduled_install:hover,
.calendar-timeline-row.calendar-event--scheduled_install:focus-visible,
.calendar-timeline-row.calendar-event--in_store_installation:hover,
.calendar-timeline-row.calendar-event--in_store_installation:focus-visible,
.calendar-timeline-row.calendar-event--in_store_consultation:hover,
.calendar-timeline-row.calendar-event--in_store_consultation:focus-visible,
.calendar-timeline-row.calendar-event--outcall_installation:hover,
.calendar-timeline-row.calendar-event--outcall_installation:focus-visible,
.calendar-timeline-row.calendar-event--outcall_consultation:hover,
.calendar-timeline-row.calendar-event--outcall_consultation:focus-visible,
.calendar-timeline-row.calendar-event--demo_in_store:hover,
.calendar-timeline-row.calendar-event--demo_in_store:focus-visible,
.calendar-timeline-row.calendar-event--home_consultation:hover,
.calendar-timeline-row.calendar-event--home_consultation:focus-visible,
.calendar-timeline-row.calendar-event--last_contacted:hover,
.calendar-timeline-row.calendar-event--last_contacted:focus-visible,
.calendar-timeline-row.calendar-event--contact_note:hover,
.calendar-timeline-row.calendar-event--contact_note:focus-visible {
    background: color-mix(in srgb, var(--calendar-color-shared-appointments) 88%, #000 12%);
    border-color: color-mix(in srgb, var(--calendar-color-shared-appointments) 72%, #ffffff 28%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--calendar-color-shared-appointments) 56%, transparent), 0 0 14px color-mix(in srgb, var(--calendar-color-shared-appointments) 34%, transparent);
    color: #fff;
}

.calendar-timeline-row.calendar-event--follow_up:hover,
.calendar-timeline-row.calendar-event--follow_up:focus-visible,
.calendar-timeline-row.calendar-event--schedule_follow_up:hover,
.calendar-timeline-row.calendar-event--schedule_follow_up:focus-visible {
    background: color-mix(in srgb, var(--calendar-color-shared-follow-ups) 88%, #000 12%);
    border-color: color-mix(in srgb, var(--calendar-color-shared-follow-ups) 72%, #ffffff 28%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--calendar-color-shared-follow-ups) 56%, transparent), 0 0 14px color-mix(in srgb, var(--calendar-color-shared-follow-ups) 34%, transparent);
    color: #fff;
}

.calendar-timeline-row.calendar-event-source-rental_contracts:hover,
.calendar-timeline-row.calendar-event-source-rental_contracts:focus-visible {
    background: color-mix(in srgb, var(--calendar-color-shared-rentals) 88%, #000 12%);
    border-color: color-mix(in srgb, var(--calendar-color-shared-rentals) 72%, #ffffff 28%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--calendar-color-shared-rentals) 56%, transparent), 0 0 14px color-mix(in srgb, var(--calendar-color-shared-rentals) 34%, transparent);
    color: #fff;
}

.calendar-timeline-row.calendar-event--scheduled_install:hover .calendar-event-kind,
.calendar-timeline-row.calendar-event--scheduled_install:hover .calendar-event-title,
.calendar-timeline-row.calendar-event--scheduled_install:hover .calendar-event-source,
.calendar-timeline-row.calendar-event--scheduled_install:focus-visible .calendar-event-kind,
.calendar-timeline-row.calendar-event--scheduled_install:focus-visible .calendar-event-title,
.calendar-timeline-row.calendar-event--scheduled_install:focus-visible .calendar-event-source,
.calendar-timeline-row.calendar-event--in_store_installation:hover .calendar-event-kind,
.calendar-timeline-row.calendar-event--in_store_installation:hover .calendar-event-title,
.calendar-timeline-row.calendar-event--in_store_installation:hover .calendar-event-source,
.calendar-timeline-row.calendar-event--in_store_installation:focus-visible .calendar-event-kind,
.calendar-timeline-row.calendar-event--in_store_installation:focus-visible .calendar-event-title,
.calendar-timeline-row.calendar-event--in_store_installation:focus-visible .calendar-event-source,
.calendar-timeline-row.calendar-event--in_store_consultation:hover .calendar-event-kind,
.calendar-timeline-row.calendar-event--in_store_consultation:hover .calendar-event-title,
.calendar-timeline-row.calendar-event--in_store_consultation:hover .calendar-event-source,
.calendar-timeline-row.calendar-event--in_store_consultation:focus-visible .calendar-event-kind,
.calendar-timeline-row.calendar-event--in_store_consultation:focus-visible .calendar-event-title,
.calendar-timeline-row.calendar-event--in_store_consultation:focus-visible .calendar-event-source,
.calendar-timeline-row.calendar-event--outcall_installation:hover .calendar-event-kind,
.calendar-timeline-row.calendar-event--outcall_installation:hover .calendar-event-title,
.calendar-timeline-row.calendar-event--outcall_installation:hover .calendar-event-source,
.calendar-timeline-row.calendar-event--outcall_installation:focus-visible .calendar-event-kind,
.calendar-timeline-row.calendar-event--outcall_installation:focus-visible .calendar-event-title,
.calendar-timeline-row.calendar-event--outcall_installation:focus-visible .calendar-event-source,
.calendar-timeline-row.calendar-event--outcall_consultation:hover .calendar-event-kind,
.calendar-timeline-row.calendar-event--outcall_consultation:hover .calendar-event-title,
.calendar-timeline-row.calendar-event--outcall_consultation:hover .calendar-event-source,
.calendar-timeline-row.calendar-event--outcall_consultation:focus-visible .calendar-event-kind,
.calendar-timeline-row.calendar-event--outcall_consultation:focus-visible .calendar-event-title,
.calendar-timeline-row.calendar-event--outcall_consultation:focus-visible .calendar-event-source,
.calendar-timeline-row.calendar-event--demo_in_store:hover .calendar-event-kind,
.calendar-timeline-row.calendar-event--demo_in_store:hover .calendar-event-title,
.calendar-timeline-row.calendar-event--demo_in_store:hover .calendar-event-source,
.calendar-timeline-row.calendar-event--demo_in_store:focus-visible .calendar-event-kind,
.calendar-timeline-row.calendar-event--demo_in_store:focus-visible .calendar-event-title,
.calendar-timeline-row.calendar-event--demo_in_store:focus-visible .calendar-event-source,
.calendar-timeline-row.calendar-event--home_consultation:hover .calendar-event-kind,
.calendar-timeline-row.calendar-event--home_consultation:hover .calendar-event-title,
.calendar-timeline-row.calendar-event--home_consultation:hover .calendar-event-source,
.calendar-timeline-row.calendar-event--home_consultation:focus-visible .calendar-event-kind,
.calendar-timeline-row.calendar-event--home_consultation:focus-visible .calendar-event-title,
.calendar-timeline-row.calendar-event--home_consultation:focus-visible .calendar-event-source,
.calendar-timeline-row.calendar-event--last_contacted:hover .calendar-event-kind,
.calendar-timeline-row.calendar-event--last_contacted:hover .calendar-event-title,
.calendar-timeline-row.calendar-event--last_contacted:hover .calendar-event-source,
.calendar-timeline-row.calendar-event--last_contacted:focus-visible .calendar-event-kind,
.calendar-timeline-row.calendar-event--last_contacted:focus-visible .calendar-event-title,
.calendar-timeline-row.calendar-event--last_contacted:focus-visible .calendar-event-source,
.calendar-timeline-row.calendar-event--contact_note:hover .calendar-event-kind,
.calendar-timeline-row.calendar-event--contact_note:hover .calendar-event-title,
.calendar-timeline-row.calendar-event--contact_note:hover .calendar-event-source,
.calendar-timeline-row.calendar-event--contact_note:focus-visible .calendar-event-kind,
.calendar-timeline-row.calendar-event--contact_note:focus-visible .calendar-event-title,
.calendar-timeline-row.calendar-event--contact_note:focus-visible .calendar-event-source,
.calendar-timeline-row.calendar-event--follow_up:hover .calendar-event-kind,
.calendar-timeline-row.calendar-event--follow_up:hover .calendar-event-title,
.calendar-timeline-row.calendar-event--follow_up:hover .calendar-event-source,
.calendar-timeline-row.calendar-event--follow_up:focus-visible .calendar-event-kind,
.calendar-timeline-row.calendar-event--follow_up:focus-visible .calendar-event-title,
.calendar-timeline-row.calendar-event--follow_up:focus-visible .calendar-event-source,
.calendar-timeline-row.calendar-event--schedule_follow_up:hover .calendar-event-kind,
.calendar-timeline-row.calendar-event--schedule_follow_up:hover .calendar-event-title,
.calendar-timeline-row.calendar-event--schedule_follow_up:hover .calendar-event-source,
.calendar-timeline-row.calendar-event--schedule_follow_up:focus-visible .calendar-event-kind,
.calendar-timeline-row.calendar-event--schedule_follow_up:focus-visible .calendar-event-title,
.calendar-timeline-row.calendar-event--schedule_follow_up:focus-visible .calendar-event-source,
.calendar-timeline-row.calendar-event-source-rental_contracts:hover .calendar-event-kind,
.calendar-timeline-row.calendar-event-source-rental_contracts:hover .calendar-event-title,
.calendar-timeline-row.calendar-event-source-rental_contracts:hover .calendar-event-source,
.calendar-timeline-row.calendar-event-source-rental_contracts:focus-visible .calendar-event-kind,
.calendar-timeline-row.calendar-event-source-rental_contracts:focus-visible .calendar-event-title,
.calendar-timeline-row.calendar-event-source-rental_contracts:focus-visible .calendar-event-source {
    color: #fff;
}

.calendar-timeline-row[class*="calendar-event-variant-"]:hover .calendar-event-kind,
.calendar-timeline-row[class*="calendar-event-variant-"]:hover .calendar-event-title,
.calendar-timeline-row[class*="calendar-event-variant-"]:hover .calendar-event-source,
.calendar-timeline-row[class*="calendar-event-variant-"]:focus-visible .calendar-event-kind,
.calendar-timeline-row[class*="calendar-event-variant-"]:focus-visible .calendar-event-title,
.calendar-timeline-row[class*="calendar-event-variant-"]:focus-visible .calendar-event-source {
    color: #fff;
}

.calendar-timeline-row.calendar-event-variant-rental-shop-pickup:hover,
.calendar-timeline-row.calendar-event-variant-rental-shop-pickup:focus-visible {
    background: color-mix(in srgb, var(--calendar-color-rental-shop-pickup) 88%, #000 12%);
    border-color: color-mix(in srgb, var(--calendar-color-rental-shop-pickup) 72%, #ffffff 28%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--calendar-color-rental-shop-pickup) 56%, transparent), 0 0 14px color-mix(in srgb, var(--calendar-color-rental-shop-pickup) 34%, transparent);
    color: #fff;
}

.calendar-timeline-row.calendar-event-variant-rental-delivery:hover,
.calendar-timeline-row.calendar-event-variant-rental-delivery:focus-visible {
    background: color-mix(in srgb, var(--calendar-color-rental-delivery) 88%, #000 12%);
    border-color: color-mix(in srgb, var(--calendar-color-rental-delivery) 72%, #ffffff 28%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--calendar-color-rental-delivery) 56%, transparent), 0 0 14px color-mix(in srgb, var(--calendar-color-rental-delivery) 34%, transparent);
    color: #fff;
}

.calendar-timeline-row.calendar-event-variant-rental-offsite-pickup:hover,
.calendar-timeline-row.calendar-event-variant-rental-offsite-pickup:focus-visible {
    background: color-mix(in srgb, var(--calendar-color-rental-offsite-pickup) 88%, #000 12%);
    border-color: color-mix(in srgb, var(--calendar-color-rental-offsite-pickup) 72%, #ffffff 28%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--calendar-color-rental-offsite-pickup) 56%, transparent), 0 0 14px color-mix(in srgb, var(--calendar-color-rental-offsite-pickup) 34%, transparent);
    color: #fff;
}

.calendar-timeline-row.calendar-event-variant-jobs-outcall-installation:hover,
.calendar-timeline-row.calendar-event-variant-jobs-outcall-installation:focus-visible {
    background: color-mix(in srgb, var(--calendar-color-jobs-outcall-installation) 88%, #000 12%);
    border-color: color-mix(in srgb, var(--calendar-color-jobs-outcall-installation) 72%, #ffffff 28%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--calendar-color-jobs-outcall-installation) 56%, transparent), 0 0 14px color-mix(in srgb, var(--calendar-color-jobs-outcall-installation) 34%, transparent);
    color: #fff;
}

.calendar-timeline-row.calendar-event-variant-jobs-outcall-consultation:hover,
.calendar-timeline-row.calendar-event-variant-jobs-outcall-consultation:focus-visible {
    background: color-mix(in srgb, var(--calendar-color-jobs-outcall-consultation) 88%, #000 12%);
    border-color: color-mix(in srgb, var(--calendar-color-jobs-outcall-consultation) 72%, #ffffff 28%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--calendar-color-jobs-outcall-consultation) 56%, transparent), 0 0 14px color-mix(in srgb, var(--calendar-color-jobs-outcall-consultation) 34%, transparent);
    color: #fff;
}

.calendar-timeline-row.calendar-event-variant-jobs-in-shop-installation:hover,
.calendar-timeline-row.calendar-event-variant-jobs-in-shop-installation:focus-visible {
    background: color-mix(in srgb, var(--calendar-color-jobs-in-shop-installation) 88%, #000 12%);
    border-color: color-mix(in srgb, var(--calendar-color-jobs-in-shop-installation) 72%, #ffffff 28%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--calendar-color-jobs-in-shop-installation) 56%, transparent), 0 0 14px color-mix(in srgb, var(--calendar-color-jobs-in-shop-installation) 34%, transparent);
    color: #fff;
}

.calendar-timeline-row.calendar-event-variant-jobs-in-shop-consultation:hover,
.calendar-timeline-row.calendar-event-variant-jobs-in-shop-consultation:focus-visible {
    background: color-mix(in srgb, var(--calendar-color-jobs-in-shop-consultation) 88%, #000 12%);
    border-color: color-mix(in srgb, var(--calendar-color-jobs-in-shop-consultation) 72%, #ffffff 28%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--calendar-color-jobs-in-shop-consultation) 56%, transparent), 0 0 14px color-mix(in srgb, var(--calendar-color-jobs-in-shop-consultation) 34%, transparent);
    color: #fff;
}

.calendar-timeline-row.calendar-event-variant-jobs-demo-in-store:hover,
.calendar-timeline-row.calendar-event-variant-jobs-demo-in-store:focus-visible {
    background: color-mix(in srgb, var(--secondary) 92%, #000 8%);
    border-color: color-mix(in srgb, var(--border) 72%, #ffffff 28%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 44%, transparent), 0 0 14px color-mix(in srgb, var(--border) 22%, transparent);
}

.business-row-list {
    display: grid;
    gap: 1rem;
}

.business-row {
    border: 1px solid var(--border);
    border-radius: 20px;
    background: color-mix(in srgb, var(--bg-strong) 90%, var(--secondary));
    overflow: hidden;
}

.business-row-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.1rem;
}

.business-row-summary::-webkit-details-marker {
    display: none;
}

.business-row-summary-text {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.business-row-toggle {
    white-space: nowrap;
    flex: 0 0 auto;
}

.business-row-toggle svg {
    transition: transform 0.25s ease;
}

.business-row[open] .business-row-toggle svg {
    transform: rotate(180deg);
}

.business-row-body {
    border-top: 1px solid var(--border);
    padding: 1rem 1.1rem 1.15rem;
    display: grid;
    gap: 1rem;
}

.business-location-card .stack-sm {
    gap: 0.35rem;
}

.business-location-card .stack-sm > p {
    margin: 0;
}

.business-row-details {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.calendar-event {
    padding: 0.5rem 0.65rem 0.55rem 0.8rem;
    transition:
        background-color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease,
        filter 0.22s ease;
}

.calendar-event:hover,
.calendar-event:focus-within {
    background: var(--calendar-event-hover-surface, color-mix(in srgb, var(--calendar-event-accent, var(--primary)) 16%, var(--bg-strong) 84%));
    border-color: color-mix(in srgb, var(--calendar-event-accent, var(--primary)) 32%, var(--border));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--calendar-event-accent, var(--primary)) 14%, transparent),
        0 3px 10px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
    filter: saturate(1.02);
}

.calendar-event.calendar-event--scheduled_install:hover,
.calendar-event.calendar-event--scheduled_install:focus-within,
.calendar-event.calendar-event--in_store_installation:hover,
.calendar-event.calendar-event--in_store_installation:focus-within,
.calendar-event.calendar-event--in_store_consultation:hover,
.calendar-event.calendar-event--in_store_consultation:focus-within,
.calendar-event.calendar-event--outcall_installation:hover,
.calendar-event.calendar-event--outcall_installation:focus-within,
.calendar-event.calendar-event--outcall_consultation:hover,
.calendar-event.calendar-event--outcall_consultation:focus-within,
.calendar-event.calendar-event--demo_in_store:hover,
.calendar-event.calendar-event--demo_in_store:focus-within,
.calendar-event.calendar-event--home_consultation:hover,
.calendar-event.calendar-event--home_consultation:focus-within,
.calendar-event.calendar-event--last_contacted:hover,
.calendar-event.calendar-event--last_contacted:focus-within,
.calendar-event.calendar-event--contact_note:hover,
.calendar-event.calendar-event--contact_note:focus-within {
    background: var(--calendar-color-shared-appointments);
    border-color: color-mix(in srgb, var(--calendar-color-shared-appointments) 72%, #ffffff 28%);
}

.calendar-event.calendar-event--follow_up:hover,
.calendar-event.calendar-event--follow_up:focus-within,
.calendar-event.calendar-event--schedule_follow_up:hover,
.calendar-event.calendar-event--schedule_follow_up:focus-within {
    background: var(--calendar-color-shared-follow-ups);
    border-color: color-mix(in srgb, var(--calendar-color-shared-follow-ups) 72%, #ffffff 28%);
}

.calendar-event.calendar-event-source-rental_contracts:hover,
.calendar-event.calendar-event-source-rental_contracts:focus-within {
    background: var(--calendar-color-shared-rentals);
    border-color: color-mix(in srgb, var(--calendar-color-shared-rentals) 72%, #ffffff 28%);
}

.calendar-event.calendar-event-variant-rental-shop-pickup:hover,
.calendar-event.calendar-event-variant-rental-shop-pickup:focus-within {
    background: var(--calendar-color-rental-shop-pickup);
    border-color: color-mix(in srgb, var(--calendar-color-rental-shop-pickup) 72%, #ffffff 28%);
}

.calendar-event.calendar-event-variant-rental-delivery:hover,
.calendar-event.calendar-event-variant-rental-delivery:focus-within {
    background: var(--calendar-color-rental-delivery);
    border-color: color-mix(in srgb, var(--calendar-color-rental-delivery) 72%, #ffffff 28%);
}

.calendar-event.calendar-event-variant-rental-offsite-pickup:hover,
.calendar-event.calendar-event-variant-rental-offsite-pickup:focus-within {
    background: var(--calendar-color-rental-offsite-pickup);
    border-color: color-mix(in srgb, var(--calendar-color-rental-offsite-pickup) 72%, #ffffff 28%);
}

.calendar-event.calendar-event-variant-jobs-in-shop-installation:hover,
.calendar-event.calendar-event-variant-jobs-in-shop-installation:focus-within {
    background: var(--calendar-color-jobs-in-shop-installation);
    border-color: color-mix(in srgb, var(--calendar-color-jobs-in-shop-installation) 72%, #ffffff 28%);
}

.calendar-event.calendar-event-variant-jobs-in-shop-consultation:hover,
.calendar-event.calendar-event-variant-jobs-in-shop-consultation:focus-within {
    background: var(--calendar-color-jobs-in-shop-consultation);
    border-color: color-mix(in srgb, var(--calendar-color-jobs-in-shop-consultation) 72%, #ffffff 28%);
}

.calendar-event.calendar-event-variant-jobs-outcall-installation:hover,
.calendar-event.calendar-event-variant-jobs-outcall-installation:focus-within {
    background: var(--calendar-color-jobs-outcall-installation);
    border-color: color-mix(in srgb, var(--calendar-color-jobs-outcall-installation) 72%, #ffffff 28%);
}

.calendar-event.calendar-event-variant-jobs-outcall-consultation:hover,
.calendar-event.calendar-event-variant-jobs-outcall-consultation:focus-within {
    background: var(--calendar-color-jobs-outcall-consultation);
    border-color: color-mix(in srgb, var(--calendar-color-jobs-outcall-consultation) 72%, #ffffff 28%);
}

.calendar-event.is-source-hidden,
.ribbon-event.is-source-hidden {
    display: none !important;
}

legend {
    display: inline-flex;
    align-items: center;
    border: 0;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    background: color-mix(in srgb, var(--primary) 18%, var(--secondary) 82%);
    color: var(--on-primary);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.pagination {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}

.page-link {
    padding: 0.7rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--secondary);
}

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

.link-button-like {
    color: var(--primary);
    text-decoration: none;
    font: inherit;
}

.inline-actions > a {
    color: var(--primary);
    text-decoration: none;
}

.error-text {
    color: var(--alert);
}

.image-uploader,
.multi-image-uploader {
    display: grid;
    gap: 0.85rem;
    position: relative;
}

.image-uploader .image-uploader-input,
.multi-image-uploader .image-uploader-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    min-width: 1px;
    max-width: 1px;
    height: 1px;
    min-height: 1px;
    max-height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.image-uploader-surface {
    position: relative;
    border: 1px dashed color-mix(in srgb, var(--primary) 30%, var(--border));
    border-radius: 24px;
    background: color-mix(in srgb, var(--bg-strong) 84%, var(--secondary));
    overflow: hidden;
    min-height: 210px;
    cursor: pointer;
}

[data-theme="dark"] .image-uploader-surface {
    background: rgba(0, 0, 0, 0.14);
    border-color: rgba(255, 255, 255, 0.12);
}

.image-uploader-preview {
    min-height: 210px;
    display: grid;
    place-items: center;
    padding: 1rem;
    justify-items: center;
    align-content: center;
}

.image-uploader-preview.is-empty {
    align-content: center;
    justify-items: center;
}

.image-uploader-preview img,
.image-uploader-image {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 22rem);
    max-height: 14rem;
    object-fit: contain;
    margin: 0 auto;
}

.image-uploader-preview.has-image {
    padding: 0.9rem;
}

.image-uploader-preview.has-image img,
.image-uploader-preview.has-image .image-uploader-image {
    max-width: min(100%, 22rem);
    max-height: 14rem;
}

.image-uploader-placeholder {
    width: 100%;
    min-height: 210px;
    display: grid;
    place-items: center;
    gap: 0.45rem;
    text-align: center;
    color: var(--muted);
    padding: 2rem;
    align-content: center;
    justify-items: center;
}

.image-uploader-placeholder strong {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.image-uploader-placeholder span {
    font-size: 0.95rem;
    max-width: 26rem;
}

.image-uploader-placeholder-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.image-uploader-placeholder-icon svg {
    width: 30px;
    height: 30px;
}

.image-uploader-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.image-uploader-button {
    min-height: 2.75rem;
}

.image-uploader-camera-button {
    min-width: 8.5rem;
}

.image-uploader-caption,
.image-uploader-help {
    font-size: 0.92rem;
}

.image-uploader.is-dragover .image-uploader-surface {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
    transform: translateY(-1px);
}

.record-image {
    display: block;
    margin: 0 0 0.85rem;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--secondary);
}

.record-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.image-uploader-camera-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.image-uploader-camera-modal[hidden] {
    display: none;
}

.image-uploader-camera-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(10px);
}

.image-uploader-camera-card {
    position: relative;
    z-index: 1;
    width: min(42rem, 100%);
    border-radius: 28px;
    border: 1px solid var(--border);
    background: var(--bg-strong);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
    padding: 1.1rem;
    display: grid;
    gap: 1rem;
}

[data-theme="dark"] .image-uploader-camera-card {
    background: color-mix(in srgb, var(--bg-strong) 82%, #000);
}

.image-uploader-camera-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--secondary);
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.image-uploader-camera-close svg {
    width: 1rem;
    height: 1rem;
}

.image-uploader-camera-head {
    display: grid;
    gap: 0.35rem;
    padding-right: 3rem;
}

.image-uploader-camera-head h3 {
    margin: 0;
}

.image-uploader-camera-view {
    border-radius: 22px;
    overflow: hidden;
    background: #000;
    min-height: 16rem;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
}

.image-uploader-camera-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}

.image-uploader-camera-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.image-uploader-camera-error {
    border-radius: 16px;
    padding: 0.8rem 0.95rem;
    background: color-mix(in srgb, var(--alert) 14%, transparent);
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--alert) 36%, transparent);
}

.multi-image-uploader {
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.multi-image-uploader-surface {
    display: grid;
    gap: 0.9rem;
    justify-items: center;
    padding: 1rem;
    border: 1px dashed color-mix(in srgb, var(--primary) 34%, var(--border));
    border-radius: 20px;
    background: color-mix(in srgb, var(--bg-strong) 92%, var(--primary) 8%);
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, transform 180ms ease;
}

[data-theme="dark"] .multi-image-uploader-surface {
    background: color-mix(in srgb, var(--panel) 90%, var(--primary) 10%);
}

.multi-image-uploader-placeholder {
    display: grid;
    gap: 0.45rem;
    justify-items: center;
    text-align: center;
    color: var(--muted);
}

.multi-image-uploader-placeholder strong {
    color: var(--text);
    font-size: 1rem;
}

.multi-image-uploader-placeholder-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.multi-image-uploader-placeholder-icon svg {
    width: 100%;
    height: 100%;
}

.multi-image-uploader-trigger {
    width: auto;
}

.multi-image-uploader-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    column-gap: 1.15rem;
    row-gap: 0.95rem;
    align-items: start;
    grid-auto-flow: row;
    padding-right: 0.2rem;
}

.multi-image-uploader-card {
    position: relative;
    overflow: hidden;
    min-height: 124px;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
    background: color-mix(in srgb, var(--secondary) 88%, var(--bg));
    box-shadow: var(--panel-shadow);
}

.multi-image-uploader-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.multi-image-uploader-remove {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
}

.multi-image-uploader-remove svg {
    width: 0.95rem;
    height: 0.95rem;
}

.multi-image-uploader-help,
.multi-image-uploader-empty {
    margin: 0;
}

@media (max-width: 720px) {
    .multi-image-uploader-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.9rem;
        row-gap: 0.8rem;
    }

    .multi-image-uploader-card {
        min-height: 112px;
    }
}

.multi-image-uploader-error {
    display: block;
}

.multi-image-uploader.is-dragover .multi-image-uploader-surface {
    border-color: var(--primary);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent),
        0 0 18px color-mix(in srgb, var(--primary) 20%, transparent);
    transform: translateY(-1px);
}

.zaccelerator-hero {
    gap: 1rem;
}

.zaccelerator-hero-meta {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.zaccelerator-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.25rem;
    align-items: start;
}

.zaccelerator-main {
    display: grid;
    gap: 1rem;
}

.zaccelerator-module {
    display: grid;
    gap: 1rem;
    margin: 0;
}

.zaccelerator-video-frame {
    position: relative;
    min-height: 18rem;
    border-radius: 28px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
}

.zaccelerator-video-play {
    width: 5.25rem;
    height: 5.25rem;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
}

.zaccelerator-video-play svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

.zaccelerator-video-label {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: grid;
    gap: 0.15rem;
    color: rgba(255, 255, 255, 0.88);
}

.zaccelerator-module-body {
    display: grid;
    gap: 1rem;
}

.zaccelerator-module-head {
    align-items: flex-start;
}

.zaccelerator-links {
    display: grid;
    gap: 0.7rem;
}

.zaccelerator-links-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.zaccelerator-link {
    border-radius: 999px;
}

.zaccelerator-steps {
    display: grid;
    gap: 0.65rem;
}

.zaccelerator-step {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--text);
}

.zaccelerator-step-dot {
    width: 0.7rem;
    height: 0.7rem;
    margin-top: 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 70%, white);
    flex: none;
}

.zaccelerator-quiz {
    display: grid;
    gap: 0.9rem;
    background: #000;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
}

.zaccelerator-quiz h3 {
    margin: 0;
}

.zaccelerator-quiz .field span,
.zaccelerator-quiz .eyebrow,
.zaccelerator-quiz .muted {
    color: rgba(255, 255, 255, 0.82);
}

.zaccelerator-quiz .field select,
.zaccelerator-quiz .field input,
.zaccelerator-quiz .field textarea {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.16);
}

.zaccelerator-feedback {
    min-height: 1.25rem;
}

.zaccelerator-feedback.is-success {
    color: color-mix(in srgb, var(--primary) 76%, white);
}

.zaccelerator-nav-panel {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 1rem;
}

.zaccelerator-nav-list {
    display: grid;
    gap: 0.75rem;
}

.zaccelerator-nav-item {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--secondary);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.zaccelerator-nav-item:hover {
    border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.zaccelerator-nav-item.is-active {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.12);
}

.zaccelerator-nav-item.is-complete .zaccelerator-nav-number {
    background: var(--primary);
    color: #fff;
}

.zaccelerator-nav-number {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--secondary));
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--primary);
    flex: none;
}

.zaccelerator-nav-copy {
    display: grid;
    gap: 0.18rem;
}

.zaccelerator-nav-copy strong {
    font-size: 0.98rem;
}

.zaccelerator-nav-copy span {
    color: var(--muted);
    font-size: 0.88rem;
}

.zaccelerator-nav-item .pill {
    justify-self: end;
}

.zaccelerator-course .field textarea {
    min-height: 7rem;
}

[data-theme="dark"] .zaccelerator-video-play {
    background: rgba(255, 255, 255, 0.08);
}

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

    .zaccelerator-nav-panel {
        position: static;
    }
}

.rental-contract-wizard {
    display: grid;
    gap: 1rem;
}

.rental-contract-wizard [data-wizard-step][hidden] {
    display: none !important;
}

.rental-contract-wizard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.rental-contract-wizard-main {
    display: grid;
    gap: 1rem;
}

.wizard-edit-footer {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.wizard-edit-footer.is-edit {
    justify-content: space-between;
}

.wizard-actions-left {
    margin: 0;
}

.wizard-delete-form {
    margin-left: auto;
}

.wizard-step {
    display: grid;
    gap: 1rem;
}

.wizard-step-head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.wizard-step-head .eyebrow {
    min-width: 2rem;
    text-align: center;
    padding-top: 0.12rem;
}

.wizard-step-head h2 {
    margin: 0;
}

.wizard-step-head .muted {
    margin: 0.2rem 0 0;
}

.wizard-step-toolbar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.wizard-step-toolbar--inventory {
    align-items: flex-start;
}

.wizard-step-toolbar .field-input {
    flex: 1 1 18rem;
    min-width: 0;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-strong);
    color: var(--text);
    padding: 0.85rem 1rem;
}

[data-theme="dark"] .wizard-step-toolbar .field-input {
    background: #1f2024;
}

.wizard-option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.8rem;
}

.wizard-option-grid--inventory {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.wizard-option {
    display: grid;
    gap: 0.2rem;
    text-align: left;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--secondary);
    color: var(--text);
    cursor: pointer;
    box-shadow: none;
}

.wizard-option strong {
    font-size: 0.98rem;
}

.wizard-option span {
    color: var(--muted);
    font-size: 0.88rem;
}

.wizard-option:hover,
.wizard-option:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.wizard-option.is-selected {
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    background: color-mix(in srgb, var(--primary) 12%, var(--secondary));
}

.wizard-selected {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.wizard-selected .pill {
    display: inline-flex;
}

.wizard-inventory-card {
    display: grid;
    gap: 0.7rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--secondary);
    box-shadow: none;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.wizard-inventory-card.is-selected {
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--secondary));
}

.wizard-inventory-card:hover,
.wizard-inventory-card:focus-within {
    border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}

.wizard-inventory-card-select {
    appearance: none;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    padding: 0;
    display: grid;
    gap: 0.25rem;
    cursor: pointer;
}

.wizard-inventory-card-select strong {
    font-size: 1rem;
    line-height: 1.25;
}

.wizard-inventory-card-select span {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.35;
}

.wizard-inventory-card-summary {
    display: block;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.4;
}

.wizard-inventory-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wizard-inventory-card-see-all {
    flex: 0 0 auto;
}

.wizard-inventory-card-selected-badge {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 14%, var(--bg-strong));
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 700;
}

.wizard-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wizard-calendar-label {
    font-weight: 700;
    color: var(--text);
}

.wizard-calendar-note {
    color: var(--muted);
    font-size: 0.92rem;
}

.wizard-inventory-modal {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.wizard-inventory-modal[hidden] {
    display: none;
}

.wizard-inventory-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(8px);
}

.wizard-inventory-modal-card {
    position: relative;
    z-index: 1;
    width: min(52rem, 100%);
    max-height: min(86vh, 48rem);
    overflow: auto;
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-strong) 96%, var(--secondary) 4%);
    box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.18),
        0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent);
}

.rental-contract-inventory-detail-panel {
    position: relative;
}

.wizard-inventory-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.rental-contract-inventory-detail-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "summary close";
    align-items: start;
    column-gap: 1rem;
    row-gap: 0;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    padding-right: 3rem;
}

.rental-contract-inventory-detail-summary {
    grid-area: summary;
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 0.42rem;
    padding-bottom: 1rem;
}

.rental-contract-inventory-detail-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    flex: 0 0 auto;
}

.wizard-inventory-modal-head h3 {
    margin: 0.15rem 0 0;
    font-size: 1.15rem;
}

.wizard-inventory-modal-head .muted {
    margin: 0.2rem 0 0;
}

.wizard-step-head .muted:empty,
.wizard-inventory-modal-head .muted:empty {
    display: none;
}

.wizard-inventory-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem;
}

.rental-contract-inventory-detail-panel .wizard-inventory-modal-grid {
    margin-top: 1.25rem;
}

.wizard-inventory-modal-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.7rem;
}

.rental-contracts-inventory-modal-actions,
.rental-contracts-inventory-detail-actions {
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
}

.rental-contract-inventory-grid .wizard-inventory-card {
    cursor: pointer;
}

.rental-contract-inventory-modal-panel[hidden] {
    display: none;
}

.rental-contract-inventory-grid {
    min-height: 8rem;
}

.rental-contract-inventory-status {
    margin: 0;
}

.wizard-inventory-detail-row {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem 0.9rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-strong);
}

.wizard-inventory-detail-row strong {
    font-size: 0.86rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wizard-inventory-detail-row span {
    color: var(--text);
    word-break: break-word;
}

.wizard-calendar {
    display: grid;
    gap: 0.7rem;
}

.wizard-calendar-weekdays,
.wizard-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
}

.wizard-calendar-weekday {
    text-align: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.wizard-calendar-day {
    position: relative;
    min-height: 5.2rem;
    padding: 0.7rem 0.65rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-strong);
    color: var(--text);
    display: grid;
    gap: 0.35rem;
    align-content: start;
    text-align: left;
}

.wizard-calendar-day.is-unavailable {
    opacity: 0.95;
    filter: none;
}

.wizard-calendar-day.is-past {
    opacity: 1;
    background: color-mix(in srgb, #2f3540 88%, var(--secondary) 12%);
    border-color: color-mix(in srgb, #1f2937 82%, var(--border));
    color: #f8fafc;
    filter: grayscale(1);
}

[data-theme="dark"] .wizard-calendar-day.is-past {
    background: color-mix(in srgb, #000 92%, var(--secondary) 8%);
    border-color: color-mix(in srgb, #000 90%, var(--border));
    color: #f4f4f5;
}

.wizard-calendar-day.is-available {
    border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
    color: var(--primary);
}

.wizard-calendar-day.is-selected-start,
.wizard-calendar-day.is-selected-end {
    background: color-mix(in srgb, var(--primary) 14%, var(--bg-strong));
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
}

.wizard-calendar-day.is-past.is-selected-start,
.wizard-calendar-day.is-past.is-selected-end {
    border-color: color-mix(in srgb, var(--primary) 72%, #93c5fd 28%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--primary) 54%, #dbeafe 46%),
        0 0 0 1px color-mix(in srgb, var(--primary) 42%, transparent),
        0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent),
        0 0 14px color-mix(in srgb, var(--primary) 22%, transparent);
}

.wizard-calendar-day.is-in-range {
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-strong));
}

.wizard-calendar-day.is-past.is-in-range {
    background: color-mix(in srgb, #111827 82%, var(--primary) 18%);
    border-color: color-mix(in srgb, var(--primary) 68%, #93c5fd 32%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--primary) 52%, #dbeafe 48%),
        0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent),
        0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent),
        0 0 12px color-mix(in srgb, var(--primary) 18%, transparent);
}

[data-theme="dark"] .wizard-calendar-day.is-past.is-in-range {
    background: color-mix(in srgb, #000 86%, var(--primary) 14%);
    border-color: color-mix(in srgb, var(--primary) 72%, #93c5fd 28%);
}

.wizard-calendar-day.is-available .wizard-day-number,
.wizard-calendar-day.is-available .wizard-day-units {
    color: var(--primary);
}

.wizard-calendar-day.is-unavailable .wizard-day-number,
.wizard-calendar-day.is-unavailable .wizard-day-units {
    color: #111111;
}

[data-theme="dark"] .wizard-calendar-day.is-unavailable .wizard-day-number,
[data-theme="dark"] .wizard-calendar-day.is-unavailable .wizard-day-units {
    color: #edf2f7;
}

.wizard-calendar-rental-spans {
    z-index: 3;
}

.wizard-calendar-day-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    width: 100%;
    height: 100%;
    padding: 0.7rem 0.65rem;
    text-align: inherit;
    cursor: pointer;
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    align-content: start;
    gap: 0.35rem;
}

.wizard-calendar-day-button:disabled {
    cursor: not-allowed;
}

.wizard-day-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 700;
}

.wizard-day-units {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
}

.wizard-range-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.75rem;
}

.wizard-range-summary .eyebrow {
    display: block;
    margin-bottom: 0.15rem;
}

.wizard-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.wizard-manual-costs {
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 88%, var(--primary) 4%);
    overflow: hidden;
}

.wizard-manual-costs-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.95rem 1.05rem;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
    user-select: none;
}

.wizard-manual-costs-summary::-webkit-details-marker {
    display: none;
}

.wizard-manual-costs-summary::after {
    content: '+';
    font-size: 1.1rem;
    line-height: 1;
    color: color-mix(in srgb, var(--primary) 78%, var(--text));
}

.wizard-manual-costs[open] .wizard-manual-costs-summary::after {
    content: '\2212';
}

.wizard-manual-costs .wizard-pricing-grid {
    padding: 0.8rem 1.05rem 1.05rem;
    border-top: 1px solid var(--border);
}

.wizard-photo-sections {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.wizard-photo-return-row {
    display: grid;
    gap: 1rem;
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
}

.wizard-photo-return-row .field {
    min-width: 0;
    width: 100%;
    max-width: none;
}

.wizard-step-subsection-head h3 {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.2;
    color: var(--text);
}

.wizard-photo-block {
    display: block;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-strong) 92%, var(--primary) 6%);
    overflow: hidden;
}

.wizard-photo-block-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    cursor: pointer;
    user-select: none;
}

.wizard-photo-block-summary::-webkit-details-marker {
    display: none;
}

.wizard-photo-block-title {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.2;
    color: var(--text);
    font-weight: 700;
}

.wizard-photo-block-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: var(--primary);
    transition: transform 180ms ease;
}

.wizard-photo-block-arrow svg {
    width: 100%;
    height: 100%;
}

.wizard-photo-block[open] .wizard-photo-block-arrow {
    transform: rotate(180deg);
}

.wizard-photo-sections {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    margin-top: 0.35rem;
}

.wizard-photo-block-body {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--border);
}

.wizard-photo-block-body .multi-image-uploader {
    margin-top: 0.95rem;
}

.wizard-photo-section-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 1rem 1.05rem;
    cursor: pointer;
    user-select: none;
}

.wizard-photo-section-summary::-webkit-details-marker {
    display: none;
}

.wizard-photo-section-title {
    color: var(--text);
    font-weight: 700;
    font-size: 1.08rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.wizard-photo-section-summary-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--primary);
}

.wizard-photo-section-icon,
.wizard-photo-section-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
}

.wizard-photo-section-icon svg,
.wizard-photo-section-arrow svg {
    width: 100%;
    height: 100%;
}

.wizard-photo-section-arrow {
    transition: transform 180ms ease;
}

.wizard-photo-section[open] .wizard-photo-section-arrow {
    transform: rotate(180deg);
}

.wizard-photo-section-body {
    padding: 0 1.05rem 1.05rem;
    border-top: 1px solid var(--border);
}

.wizard-edit-footer {
    grid-column: 1 / -1;
    margin-top: 0.4rem;
}

.wizard-pricing-cost-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.2rem;
    margin-top: 1rem;
    padding: 1rem 1.05rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    background: color-mix(in srgb, var(--primary) 5%, var(--bg-strong));
    font-size: 0.97rem;
}

.wizard-pricing-cost-summary span {
    color: var(--muted);
    white-space: nowrap;
}

.wizard-pricing-cost-summary [data-wizard-summary-tax] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.wizard-pricing-tax-note {
    color: var(--muted);
    font-size: 0.9em;
    font-style: italic;
}

.wizard-pricing-cost-summary .is-total {
    margin-left: auto;
    font-weight: 800;
    color: var(--text);
}

.wizard-pricing-recommendation {
    display: grid;
    gap: 0.9rem;
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
    background: color-mix(in srgb, var(--primary) 7%, var(--bg-strong));
}

.wizard-pricing-recommendation-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.wizard-pricing-recommendation-head h3 {
    margin: 0;
    font-size: 1rem;
}

.wizard-pricing-recommendation-head .muted {
    margin: 0.25rem 0 0;
}

.wizard-pricing-scenarios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.8rem;
}

.wizard-pricing-scenario {
    display: grid;
    gap: 0.45rem;
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-strong);
}

.wizard-pricing-scenario.is-recommended {
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent), 0 0 14px color-mix(in srgb, var(--primary) 14%, transparent);
}

.wizard-pricing-scenario.is-unavailable {
    opacity: 0.72;
}

.wizard-pricing-scenario-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.wizard-pricing-scenario-total {
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
}

.wizard-pricing-scenario-summary {
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.45;
}

.wizard-pricing-grid .field {
    margin-bottom: 0;
}

.wizard-pricing-grid .field input,
.wizard-pricing-grid .field select {
    min-width: 0;
}

.wizard-pricing-grid-break {
    grid-column: 1 / -1;
    height: 0;
}

@media (max-width: 760px) {
    .wizard-pricing-cost-summary .is-total {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 980px) {
    .wizard-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wizard-photo-sections {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .hero-meta {
        width: 100%;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .hero-meta > .button,
    .hero-meta > .customer-hero-actions,
    .hero-meta > .ai-analysis-shell {
        flex: 0 0 auto;
    }

    .hero-meta > .button,
    .hero-meta > .customer-hero-actions {
        order: 0;
    }

    .hero-meta > .ai-analysis-shell {
        order: 1;
    }

    .hero-meta > .pill {
        order: 2;
        flex: 0 0 auto;
    }

    .customer-page-hero .hero-meta,
    .customer-page-hero .customer-hero-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .customer-page-hero .hero-meta {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }

    .customer-page-hero .hero-meta > .button,
    .customer-page-hero .hero-meta > .customer-hero-actions,
    .customer-page-hero .hero-meta > .ai-analysis-shell {
        width: auto;
        flex: 0 0 auto;
    }

    .customer-page-hero .hero-meta > .customer-hero-actions {
        order: 0;
        margin-top: 0;
    }

    .customer-page-hero .hero-meta > .hero-filter-toggle {
        order: 1;
        display: inline-flex;
    }

    .customer-page-hero .hero-meta > .ai-analysis-shell {
        order: 2;
    }

    .customer-mobile-filter-toggle {
        display: none;
    }

    .customer-hero-title-line {
        width: 100%;
    }

    .customer-hero-title-line h1 {
        flex: 1 1 auto;
        min-width: 0;
    }

    .znetwork-hero-meta {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .znetwork-hero-meta .pill,
    .znetwork-hero-meta .button.button-primary,
    .znetwork-hero-meta .ai-analysis-shell {
        flex: 0 0 auto;
    }

    .znetwork-hero-meta .button.button-primary,
    .znetwork-hero-meta .ai-analysis-shell {
        margin-top: 0.15rem;
    }

    .product-categories-mobile-filter-toggle {
        display: inline-flex;
    }

    .product-categories-mobile-add-button {
        display: inline-flex;
    }

    .rental-assets-mobile-filter-toggle {
        display: inline-flex;
    }

    .hero-panel .hero-panel-title > .hero-filter-toggle {
        display: none;
    }

    .hero-panel .hero-panel-title {
        width: 100%;
    }

    .hero-panel .hero-panel-title h1 {
        flex: 1 1 auto;
        min-width: 0;
    }

    .hero-panel .hero-meta {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }

    .hero-panel .hero-meta > .button,
    .hero-panel .hero-meta > .customer-hero-actions,
    .hero-panel .hero-meta > .ai-analysis-shell,
    .hero-panel .hero-meta > .pill {
        width: auto;
        flex: 0 0 auto;
    }

    .product-categories-page .hero-meta {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }

    .product-categories-page .hero-meta > .pill,
    .product-categories-page .hero-meta > .button,
    .product-categories-page .hero-meta > .ai-analysis-shell {
        width: auto;
        flex: 0 0 auto;
    }

    .product-categories-page .hero-meta > .product-categories-mobile-add-button {
        order: 0;
    }

    .product-categories-page .hero-meta > .product-categories-mobile-filter-toggle {
        order: 1;
    }

    .product-categories-page .hero-meta > .ai-analysis-shell {
        order: 2;
    }

    .product-categories-page .hero-meta > .pill {
        order: 3;
    }

    .product-categories-page .hero-meta > .button.button-primary:not(.product-categories-mobile-add-button) {
        display: none;
    }

    .rental-assets-mobile-filter-toggle {
        display: inline-flex;
    }

    .rental-contracts-mobile-filter-toggle {
        display: inline-flex;
    }

    .rental-assets-page .hero-meta > .button.button-primary {
        order: 0;
    }

    .rental-assets-page .hero-meta > .rental-assets-mobile-filter-toggle {
        order: 1;
    }

    .rental-assets-page .hero-meta > .ai-analysis-shell {
        order: 2;
    }

    .rental-assets-page .hero-meta > .pill {
        order: 3;
    }

    .rental-contracts-page .hero-meta {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }

    .rental-contracts-page .hero-meta > .pill,
    .rental-contracts-page .hero-meta > .button,
    .rental-contracts-page .hero-meta > .ai-analysis-shell {
        width: auto;
        flex: 0 0 auto;
    }

    .rental-contracts-page .hero-meta > .button.button-primary {
        order: 0;
    }

    .rental-contracts-page .hero-meta > .rental-contracts-mobile-filter-toggle {
        order: 1;
    }

    .rental-contracts-page .hero-meta > .ai-analysis-shell {
        order: 2;
    }

    .rental-contracts-page .hero-meta > .pill {
        order: 3;
    }

    .znetwork-contacts-mobile-filter-toggle {
        display: inline-flex;
    }

    .znetwork-contacts-page .hero-meta {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }

    .znetwork-contacts-page .hero-meta > .pill,
    .znetwork-contacts-page .hero-meta > .button,
    .znetwork-contacts-page .hero-meta > .ai-analysis-shell {
        width: auto;
        flex: 0 0 auto;
    }

    .znetwork-contacts-page .hero-meta > .button.button-primary {
        order: 0;
    }

    .znetwork-contacts-page .hero-meta > .znetwork-contacts-mobile-filter-toggle {
        order: 1;
    }

    .znetwork-contacts-page .hero-meta > .ai-analysis-shell {
        order: 2;
    }

    .znetwork-contacts-page .hero-meta > .pill {
        order: 3;
    }

    .znetwork-companies-mobile-filter-toggle {
        display: inline-flex;
    }

    .znetwork-companies-page .hero-meta {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
    }

    .znetwork-companies-page .hero-meta > .pill,
    .znetwork-companies-page .hero-meta > .button,
    .znetwork-companies-page .hero-meta > .ai-analysis-shell {
        width: auto;
        flex: 0 0 auto;
    }

    .znetwork-companies-page .hero-meta > .button.button-primary {
        order: 0;
    }

    .znetwork-companies-page .hero-meta > .znetwork-companies-mobile-filter-toggle {
        order: 1;
    }

    .znetwork-companies-page .hero-meta > .ai-analysis-shell {
        order: 2;
    }

    .znetwork-companies-page .hero-meta > .pill {
        order: 3;
    }

    .hero-panel .hero-panel-title > .hero-filter-toggle {
        display: none;
    }

    .hero-panel .hero-panel-title {
        width: 100%;
    }

    .hero-panel .hero-panel-title h1 {
        flex: 1 1 auto;
        min-width: 0;
    }

    .znetwork-contacts-accordion-view .accordion-summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.35rem 0.65rem;
        align-items: start;
    }

    .znetwork-contacts-accordion-view .accordion-summary > span {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .znetwork-contacts-accordion-view .accordion-summary > span:first-child {
        grid-column: 1 / -1;
    }

    .znetwork-contacts-accordion-view .accordion-summary > span:nth-child(2),
    .znetwork-contacts-accordion-view .accordion-summary > .pill {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .znetwork-contacts-accordion-view .accordion-image-row {
        flex-direction: column;
    }

    .znetwork-contacts-accordion-view .accordion-image-row .record-image--accordion {
        width: 64px;
        max-width: 64px;
    }

    .znetwork-contacts-accordion-view .accordion-image-row .record-image--accordion img {
        width: 64px;
        height: 64px;
    }

    .znetwork-contacts-accordion-view .accordion-image-copy {
        width: 100%;
    }

    .accordion-summary,
    .team-accordion-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }

    .accordion-summary > span {
        width: 100%;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .accordion-item .accordion-body {
        gap: 0.75rem;
    }

    .accordion-item .accordion-image-row {
        flex-direction: column;
    }

    .accordion-item .accordion-image-row .record-image--accordion {
        width: 64px;
        max-width: 64px;
    }

    .accordion-item .accordion-image-row .record-image--accordion img {
        width: 64px;
        height: 64px;
    }

    .accordion-item .accordion-image-copy,
    .team-accordion-summary-main,
    .team-accordion-summary-meta {
        width: 100%;
        min-width: 0;
    }

    .accordion-item .timeline-inline,
    .accordion-item .card-actions,
    .accordion-actions {
        width: 100%;
    }

    .team-permission-stack {
        min-width: 0;
    }

    .team-manual-permissions-grid {
        grid-template-columns: 1fr;
    }

    .team-manual-permissions-grid .permission-choice-card {
        grid-template-columns: 1fr;
        gap: 0.45rem;
        width: 100%;
        min-width: 0;
    }

    .team-manual-permissions-grid .permission-choice-card input {
        margin-top: 0;
    }

    .team-manual-permissions-grid .permission-choice-copy {
        min-width: 0;
    }

    .team-manual-permissions-grid .permission-choice-title,
    .team-manual-permissions-grid .permission-choice-description {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .calendar-timeline-panel,
    .ribbon-row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .calendar-timeline-list,
    .ribbon-track {
        min-width: max-content;
        width: max-content;
        padding-bottom: 0.9rem;
    }

    .calendar-timeline-row {
        min-width: 640px;
    }

    .calendar-timeline-main {
        min-width: 0;
    }

    .calendar-timeline-view {
        min-width: 7.5rem;
    }

    .rental-contract-wizard-hero .hero-meta {
        justify-content: flex-start;
    }

    .calendar-event-modal-mobile-action-row {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        gap: 0.5rem;
        margin-top: -0.15rem;
    }

    .calendar-event-modal-mobile-action-row .button {
        width: fit-content;
    }

    .dashboard-section-filters,
    .calendar-quick-filter-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .dashboard-section-filter {
        min-width: 0;
        width: 100%;
        padding: 0.8rem 0.75rem;
    }

    .wizard-pricing-grid {
        grid-template-columns: 1fr;
    }

    .multi-image-uploader-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wizard-calendar-weekdays,
    .wizard-calendar-week {
        gap: 0.35rem;
    }

    .wizard-calendar-weekday {
        font-size: 0.61rem;
        letter-spacing: 0.04em;
    }

    .wizard-calendar-toolbar {
        gap: 0.45rem;
    }

    .wizard-calendar-toolbar > [data-wizard-month-nav] {
        flex: 1 1 calc(50% - 0.23rem);
        min-width: 0;
    }

    .wizard-calendar-toolbar > [data-wizard-month-nav="prev"] {
        order: 0;
    }

    .wizard-calendar-toolbar > [data-wizard-month-nav="next"] {
        order: 1;
    }

    .wizard-calendar-label {
        order: 2;
        flex: 0 0 100%;
        width: 100%;
        text-align: center;
    }

    .wizard-calendar-day {
        min-height: 4.35rem;
        padding: 0.5rem 0.42rem;
        border-radius: 14px;
    }

    .wizard-calendar-day-button {
        padding: 0.5rem 0.42rem;
        gap: 0.2rem;
    }

    .wizard-day-number {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.08rem;
    }

    .wizard-day-number > span:first-child {
        font-size: 0.95rem;
        line-height: 1;
    }

    .wizard-day-units {
        max-width: 100%;
        font-size: 0.62rem;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .wizard-option-grid--inventory {
        grid-template-columns: 1fr;
    }

    .wizard-inventory-modal {
        padding: 0.6rem;
    }

    .wizard-inventory-modal-card {
        width: 100%;
        max-height: 90vh;
        padding: 0.85rem;
        border-radius: 18px;
    }

    .wizard-inventory-modal-grid {
        grid-template-columns: 1fr;
    }

    .wizard-inventory-modal-actions {
        justify-content: stretch;
    }

    .wizard-inventory-modal-actions .button {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .calendar-day-quick-add-menu {
        width: min(420px, calc(100vw - 1rem));
        max-width: min(420px, calc(100vw - 1rem));
        max-height: calc(100dvh - 1rem);
    }

    .calendar-day-quick-add-menu.is-primary-view {
        width: min(420px, calc(100vw - 1rem));
        max-width: min(420px, calc(100vw - 1rem));
        max-height: calc(100dvh - 1rem);
    }

    .calendar-day-quick-add-primary,
    .calendar-day-quick-add-step {
        min-width: 0;
    }

    .calendar-day-quick-add-form-grid,
    .calendar-day-quick-add-form-column,
    .calendar-day-quick-add-calendar,
    .calendar-day-quick-add-jobs-summary-card {
        min-width: 0;
    }

    .calendar-timeline-panel {
        overflow-x: hidden;
    }

    .calendar-event,
    .calendar-rental-span,
    .calendar-timeline-row {
        font-size: 1.15em;
    }

    .calendar-timeline-list {
        min-width: 0;
        width: 100%;
    }

    .calendar-timeline-row {
        min-width: 0;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 0.65rem;
        align-items: flex-start;
    }

    .calendar-timeline-main {
        width: 100%;
        min-width: 0;
    }

    .calendar-timeline-view {
        justify-self: start;
        min-width: 0;
        width: fit-content;
        white-space: normal;
    }

    .calendar-timeline-row .dashboard-list-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.18rem;
    }

    .calendar-timeline-row .dashboard-list-meta > * {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .quick-filter-shell-content,
    .dashboard-section-filters,
    .calendar-quick-filter-grid,
    .calendar-source-grid,
    .ribbon-source-grid {
        min-width: 0;
        width: 100%;
    }

    .dashboard-section-filter,
    .calendar-source-card {
        min-width: 0;
        width: 100%;
        white-space: normal;
    }

    .dashboard-section-filter-label,
    .calendar-source-card span {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

.wizard-actions {
    margin-top: 0.2rem;
}

.calendar-timeline-panel {
    margin-top: 1rem;
}

.wizard-step.is-active {
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.06);
}

.wizard-status {
    margin-top: 0.25rem;
    color: var(--muted);
}

.wizard-status.is-error {
    color: var(--alert);
}

.wizard-status.is-success {
    color: color-mix(in srgb, var(--primary) 72%, white);
}

@media (min-width: 1100px) {
    .rental-contract-wizard-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .wizard-edit-footer,
    .wizard-edit-footer.is-edit {
        justify-content: flex-start;
    }

    .wizard-delete-form {
        margin-left: 0;
    }
}

.record-image--card {
    aspect-ratio: 1 / 1;
    max-height: 16rem;
    display: grid;
    place-items: center;
    padding: 0.75rem;
}

.record-image--card img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: 0 auto;
}

.record-image--accordion {
    width: 72px;
    max-width: 72px;
    margin-bottom: 0;
}

.record-image--accordion img {
    aspect-ratio: 1 / 1;
    width: 72px;
    height: 72px;
}

.accordion-image-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.accordion-image-row .accordion-image-copy {
    display: grid;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
}

.accordion-image-copy > * {
    margin: 0;
}

.accordion-body p {
    margin: 0;
}

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

.settings-form .form-grid {
    grid-template-columns: 1fr;
}

.settings-form .field-span-2 {
    grid-column: span 1;
}

.settings-picture-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.settings-picture-preview {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--secondary);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.settings-picture-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-picture-fallback {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--secondary-text);
}

.settings-password-fieldset {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    background: rgba(0, 0, 0, 0.14);
    padding: 1.25rem;
    display: grid;
    gap: 1rem;
}

.settings-password-fieldset legend {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--secondary);
    color: var(--secondary-text);
    font-weight: 700;
}

.button-back {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.button-back::before {
    content: "";
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14 6l-6 6 6 6'/%3E%3Cpath d='M20 12H9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14 6l-6 6 6 6'/%3E%3Cpath d='M20 12H9'/%3E%3C/svg%3E");
}

.empty-state {
    margin-bottom: 1.5rem;
    text-align: center;
}

.empty-state-inner {
    display: grid;
    gap: 0.75rem;
    justify-items: center;
    padding: 0.5rem 0;
}

@media (max-width: 720px) {
    .hero-panel,
    .dashboard-widget-header,
    .dashboard-step-header,
    .dashboard-title-row,
    .auth-chrome {
        flex-direction: column;
        align-items: stretch;
    }

    .auth-chrome {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 1rem 1rem 0;
    }

    .auth-chrome .site-brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    .auth-chrome .language-switcher {
        flex: 0 0 auto;
        margin: 0;
    }

    .main-content {
        width: min(100% - 1rem, 1120px);
        padding-top: 1rem;
    }

    .app-main {
        padding: 5.25rem 1rem 1.25rem;
    }

    .auth-card {
        margin-top: 2rem;
        padding: 1.5rem;
    }

    .auth-login-card {
        margin-left: 0;
        width: 100%;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 30;
        transform: translateX(-104%);
        transition: transform 0.35s ease;
        box-shadow: 30px 0 70px rgba(0, 0, 0, 0.35);
    }

    [data-theme="light"] .sidebar {
        box-shadow: none;
    }

    .app-shell-body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 180;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
        z-index: 170;
    }

    .sidebar {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        height: var(--mobile-viewport-height, 100dvh);
        min-height: var(--mobile-viewport-height, 100dvh);
        max-height: var(--mobile-viewport-height, 100dvh);
        overscroll-behavior-y: contain;
        overscroll-behavior-x: none;
        touch-action: pan-y;
    }

    .app-shell-body.sidebar-open,
    .app-shell-body.sidebar-open .app-shell {
        height: var(--mobile-viewport-height, 100dvh);
        min-height: var(--mobile-viewport-height, 100dvh);
        max-height: var(--mobile-viewport-height, 100dvh);
        overflow: hidden;
    }

    .sidebar {
        overscroll-behavior: contain;
        touch-action: pan-y;
        -webkit-transform: translateZ(0);
        transform: translateX(-104%) translateZ(0);
        will-change: transform;
        z-index: 175;
    }

    .app-shell-body.sidebar-open .sidebar {
        transform: translateX(0) translateZ(0);
    }

    .sidebar > * {
        min-width: 0;
    }

    .app-shell-body.sidebar-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .field-span-2 {
        grid-column: span 1;
    }

    .calendar-title-row .dashboard-title-edit-wrap,
    .calendar-title-row .calendar-title-actions {
        width: 100%;
    }

    .calendar-title-actions {
        margin-left: 0;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.15rem;
    }

    .calendar-title-actions > * {
        flex: 0 0 auto;
    }

    .topbar-actions {
        width: 100%;
    }

    .calendar-grid {
        grid-template-columns: 1fr;
    }

    .hours-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .language-switcher-menu {
        right: auto;
        left: 0;
    }

    .dashboard-widget-board {
        grid-template-columns: 1fr;
    }

    .dashboard-widget-size-full,
    .dashboard-widget-size-half,
    .dashboard-widget-size-third {
        grid-column: auto;
    }

    .dashboard-divider-widget {
        grid-column: auto;
    }

    .dashboard-widget-tray {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        height: 33vh;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 1rem;
        border-radius: 22px 22px 0 0;
        border: 1px solid var(--border);
        background: color-mix(in srgb, var(--bg-strong) 90%, var(--secondary));
        box-shadow: var(--panel-shadow);
        resize: vertical;
        overflow: hidden;
        transform: translateY(120%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.35s ease, opacity 0.35s ease;
        border-left: 0;
        border-right: 0;
    }

.dashboard-modify-toolbar {
    width: 100%;
}
}

.location-context-shell {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    position: relative;
    z-index: 8;
}

.website-scope-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.website-scope-banner-copy {
    display: grid;
    gap: 0.35rem;
}

.website-scope-banner-copy h2 {
    margin: 0;
    font-size: 1.1rem;
}

.website-scope-banner-actions {
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.website-scope-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.website-scope-choice-card {
    min-height: 0;
}

.website-scope-choice-card span {
    display: block;
    overflow-wrap: anywhere;
}

.location-context-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.location-context-active-bubble {
    display: inline-flex;
    align-items: center;
    min-height: 3.05rem;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--primary) 88%, #ffffff 12%);
    background: transparent;
    color: var(--primary);
    font-weight: 700;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent),
        0 0 14px color-mix(in srgb, var(--primary) 18%, transparent);
    white-space: nowrap;
}

.location-context-details {
    position: relative;
}

.location-context-details[open] .location-context-toggle {
    background: var(--primary);
    color: var(--primary-contrast);
    border-color: color-mix(in srgb, var(--primary) 72%, var(--border));
}

.location-context-details > summary {
    list-style: none;
}

.location-context-details > summary::-webkit-details-marker {
    display: none;
}

.location-context-toggle {
    width: 3.05rem;
    min-width: 3.05rem;
    height: 3.05rem;
    padding: 0;
    border-radius: 18px;
}

.location-context-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
}

.location-context-toggle-icon svg {
    width: 100%;
    height: 100%;
}

.location-context-popover {
    position: absolute;
    top: calc(100% + 0.7rem);
    right: 0;
    min-width: min(24rem, calc(100vw - 2rem));
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    z-index: 25;
}

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

.location-context-form {
    display: grid;
    gap: 0.9rem;
}

.location-context-hint {
    margin: 0;
}

.location-context-actions {
    justify-content: flex-end;
    margin-top: 0.1rem;
}

.dashboard-title-row > .location-context-shell {
    flex: 0 0 auto;
    margin-left: auto;
}

.dashboard-title-row > .calendar-title-actions + .location-context-shell {
    margin-left: 0;
}

.dashboard-title-row > .ai-analysis-shell,
.hero-meta > .ai-analysis-shell {
    flex: 0 0 auto;
    margin-left: 0;
}

.hero-meta > .location-context-shell {
    margin-left: 0;
}

.quiz-builder-form {
    gap: 1.5rem;
}

.quiz-builder-basics {
    overflow: hidden;
}

.quiz-builder-settings {
    overflow: hidden;
}

.quiz-builder-inline-link {
    color: var(--primary);
    font-weight: 600;
}

.quiz-builder-steps-header,
.quiz-builder-options-header,
.quiz-builder-option-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.quiz-builder-steps-accordion > .quiz-builder-settings-body {
    padding-left: 18px;
    padding-right: 0;
}

.quiz-builder-steps-shell {
    position: relative;
    margin: 55px 0 0;
    width: 100%;
    box-sizing: border-box;
    padding: 1.65rem 1.1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 48%, rgba(255, 255, 255, 0.08));
    border-radius: 24px;
    background: color-mix(in srgb, var(--primary) 8%, var(--panel));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent), 0 0 26px color-mix(in srgb, var(--primary) 20%, transparent);
    overflow: visible;
    --quiz-builder-active-tab-left: 0px;
    --quiz-builder-active-tab-width: 0px;
}

.quiz-builder-steps-shell::before {
    content: none;
}

.quiz-builder-editor-tabs {
    position: absolute;
    top: 0;
    left: calc(0.75rem + 22px);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    z-index: 4;
    transform: translateY(calc(-100% - 1px));
}

.quiz-builder-editor-tab {
    border: 1px solid color-mix(in srgb, rgba(255, 255, 255, 0.18) 100%, transparent);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: color-mix(in srgb, rgba(255, 255, 255, 0.02) 100%, var(--panel));
    color: color-mix(in srgb, var(--muted) 82%, #fff 18%);
    padding: 0.82rem 1.15rem 0.74rem;
    font: inherit;
    font-weight: 600;
    position: relative;
    top: 0;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.quiz-builder-editor-tab.is-active {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
    box-shadow: none;
    z-index: 6;
}

.quiz-builder-editor-tab.is-active::before {
    content: "";
    position: absolute;
    inset: -1px -1px 0 -1px;
    border: 1px solid color-mix(in srgb, var(--primary) 42%, rgba(255, 255, 255, 0.08));
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 18px color-mix(in srgb, var(--primary) 18%, transparent);
    pointer-events: none;
    z-index: 1;
}

.quiz-builder-editor-panel {
    display: none;
}

.quiz-builder-editor-panel.is-active {
    display: block;
    width: 100%;
    min-width: 0;
}

.quiz-builder-editor-panel[data-quiz-builder-panel="visual"].is-active {
    padding-top: 0.35rem;
    margin-top: 0;
}

.quiz-builder-script-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.15rem;
}

.quiz-builder-script-title {
    margin: 0;
}

.quiz-builder-steps-header {
    margin: 1.5rem 0 1rem;
    padding: 0.1rem 0.85rem 0.35rem 1.35rem;
}

.quiz-builder-step,
.quiz-builder-option,
.quiz-builder-options {
    display: grid;
    gap: 0.9rem;
}

.quiz-builder-step {
    margin-top: 44px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 38%, rgba(255, 255, 255, 0.08));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent), 0 0 22px color-mix(in srgb, var(--primary) 14%, transparent);
}

.quiz-builder-key-field,
.quiz-builder-option-key-field {
    margin-top: 1rem;
}

.quiz-builder-step h3,
.quiz-builder-options h4 {
    margin: 0;
}

.quiz-builder-step-summary-main {
    min-width: 0;
}

.quiz-builder-step-heading-row {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.quiz-builder-step-summary,
.quiz-builder-settings-summary,
.quiz-builder-option-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    cursor: pointer;
    list-style: none;
}

.quiz-builder-settings-summary h2 {
    margin: 0;
}

.quiz-builder-step-summary::-webkit-details-marker,
.quiz-builder-settings-summary::-webkit-details-marker,
.quiz-builder-option-summary::-webkit-details-marker {
    display: none;
}

.quiz-builder-step-summary-title {
    margin-top: 0.4rem;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.4;
}

.quiz-builder-step-body {
    padding: 0 1.1rem 1.1rem;
}

.quiz-builder-settings-body {
    padding: 0 1.1rem 1.1rem;
}

.quiz-builder-step-actions,
.quiz-builder-option-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: nowrap;
    align-items: center;
    flex: 0 0 auto;
}

.quiz-builder-help-text {
    display: block;
    margin: 0.2rem 0 0.5rem;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.4;
}

.quiz-builder-step-type-summary-select {
    min-width: 11.5rem;
    min-height: 2.6rem;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--secondary);
    color: var(--text);
    font: inherit;
}

.quiz-builder-color-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 3rem;
    padding: 0.58rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 16px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--secondary) 96%, #fff) 0%, color-mix(in srgb, var(--secondary) 88%, var(--bg)) 100%);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.quiz-builder-color-control input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.quiz-builder-color-swatch {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, rgba(0, 0, 0, 0.16) 100%, transparent);
    flex: 0 0 auto;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        0 6px 14px -10px rgba(0, 0, 0, 0.5);
}

.quiz-builder-color-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88rem;
    color: color-mix(in srgb, var(--text) 92%, var(--muted));
}

.quiz-builder-color-icon {
    margin-left: auto;
    opacity: 0.72;
}

.quiz-builder-color-control:hover,
.quiz-builder-color-control:focus-within {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    box-shadow:
        0 1px 0 color-mix(in srgb, #fff 22%, transparent),
        0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent),
        0 14px 24px -18px color-mix(in srgb, var(--primary) 28%, transparent);
}

.quiz-builder-image-preview-shell {
    margin: 0.55rem 0 0.35rem;
}

.quiz-builder-image-preview {
    display: none;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--border);
}

.quiz-builder-image-preview.is-visible {
    display: block;
}

.quiz-builder-option {
    margin-top: 0.85rem;
    overflow: hidden;
}

.quiz-builder-options {
    margin-top: 1.3rem;
}

.quiz-builder-options h4 {
    margin-left: 0.2rem;
}

.quiz-builder-options-header {
    margin-right: 0.25rem;
}

.quiz-builder-option-body {
    padding: 0 1.1rem 1.1rem;
}

.quiz-builder-section-actions {
    margin-top: 1rem;
}

.quiz-builder-accordion-arrow {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid currentColor;
    color: var(--muted);
    flex: 0 0 auto;
    transition: transform 180ms ease;
}

.quiz-builder-option-bobble {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 38%, rgba(255, 255, 255, 0.08));
    background: color-mix(in srgb, var(--primary) 12%, var(--panel));
    color: var(--text);
    font-weight: 600;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 10%, transparent);
}

.team-invite-toggle-bobble {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.45rem;
    padding: 0.52rem 0.9rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 55%, rgba(255, 255, 255, 0.08));
    background: transparent;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent), 0 0 18px color-mix(in srgb, var(--primary) 16%, transparent);
}

.team-invite-toggle-bobble span {
    color: var(--primary);
    font-weight: 700;
}

.quiz-builder-settings[open] .quiz-builder-accordion-arrow,
.quiz-builder-step[open] .quiz-builder-accordion-arrow,
.quiz-builder-option[open] .quiz-builder-accordion-arrow {
    transform: rotate(180deg);
}

.quiz-preview-shell {
    display: grid;
    gap: 1.5rem;
    padding: 1.35rem;
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--quiz-preview-highlight) 28%, transparent), transparent 28%),
        linear-gradient(145deg, rgba(12, 18, 28, 0.98), rgba(28, 34, 43, 0.96));
    color: #fff;
    box-shadow: 0 28px 70px rgba(9, 12, 17, 0.28);
}

.quiz-preview-shell-embedded {
    margin-top: 0;
    border-radius: 18px;
    box-shadow: none;
    width: 100%;
    min-width: 0;
    padding: 0;
    background: transparent;
}

.quiz-preview-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.quiz-preview-logo {
    max-width: 180px;
    max-height: 56px;
    object-fit: contain;
}

.quiz-preview-topbar-html a,
.quiz-preview-topbar-html button,
.quiz-preview-topbar-html .quiz-template-link {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.quiz-preview-stack {
    display: grid;
    gap: 1rem;
}

.quiz-preview-stack.is-saving {
    opacity: 0.7;
    pointer-events: none;
}

.quiz-preview-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    min-height: 280px;
    background: rgba(8, 12, 18, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.quiz-preview-background,
.quiz-preview-overlay {
    position: absolute;
    inset: 0;
}

.quiz-preview-background {
    background-size: cover;
    background-position: center;
    opacity: 0.42;
}

.quiz-preview-overlay {
    background: linear-gradient(180deg, rgba(11, 15, 21, 0.18), rgba(11, 15, 21, 0.78));
}

.quiz-preview-content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
    padding: 1.35rem;
    font-family: var(--quiz-preview-font-body);
}

.quiz-preview-stepmeta {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.quiz-preview-step-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.quiz-preview-step-topline,
.quiz-preview-option-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.quiz-preview-step-topline {
    margin-bottom: 1rem;
}

.quiz-preview-content h2 {
    margin: 0;
    font-family: var(--quiz-preview-font-heading);
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    font-weight: 400;
    line-height: 1.1;
}

.quiz-preview-inline-question {
    outline: none;
    border-radius: 12px;
    transition: background 160ms ease, box-shadow 160ms ease;
}

.quiz-preview-inline-category {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 0.32rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.84rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    outline: none;
    transition: background 160ms ease, box-shadow 160ms ease;
}

.quiz-preview-helper {
    margin: 0;
    max-width: 56rem;
    color: rgba(255, 255, 255, 0.86);
}

.quiz-preview-input,
.quiz-preview-option,
.quiz-preview-alert {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
}

.quiz-preview-input {
    padding: 1rem 1.1rem;
    color: rgba(255, 255, 255, 0.72);
}

.quiz-preview-options {
    display: grid;
    gap: 0.8rem;
}

.quiz-preview-option {
    display: grid;
    gap: 0.55rem;
    padding: 1rem 1.1rem;
}

.quiz-preview-option-head {
    margin-bottom: 0.25rem;
}

.quiz-preview-option-kicker {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quiz-preview-inline-answer {
    font-size: 1.08rem;
    font-weight: 600;
    color: #fff;
    outline: none;
    border-radius: 12px;
    transition: background 160ms ease, box-shadow 160ms ease;
}

.quiz-preview-inline-route-row {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.quiz-preview-inline-route-label {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quiz-preview-routes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.quiz-preview-route {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--quiz-preview-highlight) 70%, rgba(255, 255, 255, 0.06));
    font-size: 0.82rem;
}

.quiz-preview-type-select,
.quiz-preview-route-select {
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 14px;
    background: rgba(12, 18, 32, 0.62);
    color: #fff;
}

.quiz-preview-type-select,
.quiz-preview-route-select {
    min-height: 2.8rem;
    padding: 0.75rem 0.95rem;
}

.quiz-preview-type-select {
    min-width: 11.5rem;
    min-height: 2rem;
    height: 2rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.84rem;
}

.quiz-preview-route-select {
    min-width: 12rem;
}

.quiz-preview-slider-values {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.quiz-preview-slider-value-field {
    display: grid;
    gap: 0.35rem;
    min-width: 9rem;
}

.quiz-preview-slider-value-field span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quiz-preview-slider-value-field input {
    min-height: 2.8rem;
    padding: 0.75rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 14px;
    background: rgba(12, 18, 32, 0.62);
    color: #fff;
}

.quiz-preview-inline-number {
    min-height: 2.8rem;
    padding: 0.75rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 14px;
    background: rgba(12, 18, 32, 0.62);
    color: #fff;
    outline: none;
    transition: background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.quiz-preview-slider-input {
    width: 100%;
    accent-color: var(--quiz-preview-progress);
}

.quiz-preview-inline-category:hover,
.quiz-preview-inline-question:hover,
.quiz-preview-inline-answer:hover,
.quiz-preview-inline-number:hover,
.quiz-preview-inline-category:focus,
.quiz-preview-inline-question:focus,
.quiz-preview-inline-answer:focus,
.quiz-preview-inline-number:focus {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.quiz-preview-mini-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.quiz-preview-mini-button {
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(12, 18, 32, 0.72);
    color: #fff;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.quiz-preview-mini-button:hover,
.quiz-preview-mini-button:focus-visible {
    background: var(--quiz-preview-highlight);
    border-color: color-mix(in srgb, var(--quiz-preview-highlight) 78%, #fff 22%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--quiz-preview-highlight) 40%, transparent), 0 0 18px color-mix(in srgb, var(--quiz-preview-highlight) 35%, transparent);
    outline: none;
    transform: translateY(-1px);
}

.quiz-preview-mini-button.is-danger {
    color: #ffd2d7;
}

.quiz-preview-slider {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
}

.quiz-preview-slider-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.quiz-preview-slider-thumb {
    position: absolute;
    top: 50%;
    left: 28%;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--quiz-preview-progress);
    transform: translate(-50%, -50%);
}

.quiz-preview-alert {
    padding: 0.8rem 1rem;
    background: color-mix(in srgb, var(--quiz-preview-highlight) 82%, rgba(255, 255, 255, 0.08));
}

.location-delivery-pricing {
    gap: 0.9rem;
}

.location-delivery-pricing-tabs {
    margin-top: 0.35rem;
}

.location-delivery-pricing-panel {
    display: grid;
    gap: 0.9rem;
}

.location-delivery-pricing-panel.is-hidden {
    display: none;
}

.location-delivery-range-list {
    display: grid;
    gap: 0.8rem;
}

.location-delivery-range-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0.8rem;
    align-items: end;
}

.location-delivery-range-action {
    justify-content: end;
}

.website-section-stack {
    display: grid;
    gap: 1rem;
}

.website-inline-section-manager {
    display: grid;
    gap: 1rem;
    padding: 1.15rem;
    border: 1px solid var(--color-border-soft);
    border-radius: 1rem;
    background: var(--color-surface-subtle);
}

.website-inline-section-manager-copy {
    display: grid;
    gap: 0.45rem;
}

.website-inline-section-manager-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
}

.website-seo-preview-card {
    display: grid;
    gap: 0.5rem;
    padding: 1.15rem;
    border: 1px solid var(--color-border-soft);
    border-radius: 1rem;
    background: var(--color-surface-subtle);
}

.website-seo-preview-title {
    color: var(--color-primary);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}

.website-seo-preview-url {
    color: var(--color-success-strong, #2b8a57);
    font-size: 0.92rem;
    word-break: break-word;
}

.website-seo-preview-description {
    margin: 0;
    color: var(--color-text-muted);
}

.website-section-card {
    display: grid;
    gap: 1rem;
    margin: 0;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.website-section-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-soft);
}

.website-section-card-header .table-actions {
    justify-content: flex-end;
}

.website-section-pill {
    width: fit-content;
}

.website-section-card [data-section-drag-handle] {
    cursor: grab;
}

.website-section-card.is-dragging {
    opacity: 0.72;
    transform: scale(0.995);
}

.website-section-card.is-drop-target {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.website-section-grid {
    gap: 1rem;
}

.website-section-subhead {
    padding-top: 0.2rem;
    border-top: 1px dashed var(--color-border-soft);
}

.website-repeatable {
    display: grid;
    gap: 0.9rem;
}

.website-repeatable-item {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border-soft);
    border-radius: 0.95rem;
    background: var(--color-surface-raised);
}

.website-repeatable-item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed var(--color-border-soft);
}

.website-repeatable-item-title {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
}

.website-repeatable-footer {
    display: flex;
    justify-content: flex-start;
}

.website-page-editor-form .checkbox-field {
    align-items: flex-start;
}

.website-nav-menu-stack {
    display: grid;
    gap: 1rem;
}

.website-nav-item-card {
    display: grid;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--color-border-soft);
    border-radius: 1rem;
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-sm);
}

.website-nav-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--color-border-soft);
}

.website-nav-item-header .table-actions {
    justify-content: flex-end;
}

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

.website-nav-empty {
    padding: 1rem 1.1rem;
    border: 1px dashed var(--color-border-soft);
    border-radius: 1rem;
    color: var(--color-text-muted);
    background: var(--color-surface-subtle);
}

.website-nav-page-field.is-hidden,
.website-nav-custom-field.is-hidden {
    display: none;
}

@media (max-width: 720px) {
    .location-context-shell {
        width: 100%;
        margin-left: 0;
    }

    .location-context-toolbar {
        width: 100%;
        justify-content: flex-start;
    }

    .location-context-popover {
        right: auto;
        left: 0;
        min-width: min(22rem, calc(100vw - 2rem));
    }

    .quiz-preview-topbar,
    .quiz-builder-options-header,
    .quiz-builder-option-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .location-delivery-range-row {
        grid-template-columns: 1fr;
    }

    .location-delivery-range-action {
        justify-content: flex-start;
    }

    .website-section-card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .website-section-card-header .table-actions {
        justify-content: flex-start;
    }

    .website-inline-section-manager-controls,
    .website-repeatable-item-actions {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .website-repeatable-item-actions {
        display: grid;
    }

    .website-nav-item-header {
        flex-direction: column;
        align-items: stretch;
    }

    .website-nav-item-header .table-actions {
        justify-content: flex-start;
    }

    .website-nav-item-grid {
        grid-template-columns: 1fr;
    }
}

/* WildSEO launch login polish */
.auth-login-card {
    width: min(560px, calc(100% - 1rem));
    padding: clamp(1.45rem, 3vw, 2.35rem);
    border-radius: 8px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-strong) 88%, transparent), color-mix(in srgb, var(--bg-strong) 72%, transparent)),
        color-mix(in srgb, var(--bg-strong) 84%, transparent);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
    backdrop-filter: blur(18px);
}

.auth-login-brand {
    display: block;
    margin-bottom: 1.15rem;
}

.auth-login-brand .eyebrow {
    margin-bottom: 0.35rem;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 950;
    letter-spacing: 0;
}

.auth-login-brand h1 {
    margin: 0;
    font-size: clamp(2.1rem, 5vw, 3.15rem);
    line-height: 0.98;
}

.auth-login-card .auth-copy {
    margin-bottom: 1.35rem;
}

.auth-login-card .auth-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.72;
}

.auth-login-card .field {
    gap: 0.48rem;
}

.auth-login-card .field span {
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 800;
}

.auth-login-card input {
    min-height: 3.15rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg) 68%, transparent);
}

.auth-login-card input::placeholder {
    color: color-mix(in srgb, var(--muted) 72%, transparent);
}

.auth-login-card .button-login {
    min-height: 3.15rem;
    margin-top: 0.25rem;
    border-radius: 8px;
    font-weight: 900;
}

@media (max-width: 560px) {
    .auth-shell .site-brand {
        left: 1rem;
        top: 1rem;
    }

    .auth-shell .site-brand-logo {
        width: clamp(170px, 58vw, 260px);
        height: clamp(170px, 58vw, 260px);
    }

    .auth-shell:not(.home-shell):not(.dealerinfo-shell) .auth-chrome-actions {
        top: 0.85rem;
        right: 0.85rem;
    }
}

/* WildSEO billing */
.billing-shell .auth-stage {
    padding-top: clamp(6.4rem, 10vw, 8.2rem);
}

.billing-page {
    width: min(1080px, calc(100vw - 2rem));
    margin: 0 auto clamp(3rem, 7vw, 5rem);
}

.billing-hero {
    max-width: 760px;
    margin-bottom: 1.35rem;
}

.billing-hero h1 {
    margin: 0.18rem 0 0.55rem;
    font-size: clamp(2.5rem, 6vw, 4.7rem);
    line-height: 0.95;
}

.billing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 1rem;
    align-items: start;
}

.billing-plan-panel,
.billing-mode-panel {
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
    border-radius: 8px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-strong) 93%, transparent), color-mix(in srgb, var(--bg-strong) 78%, transparent)),
        var(--bg-strong);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px);
}

.billing-plan-panel {
    padding: clamp(1.3rem, 3vw, 2.2rem);
}

.billing-mode-panel {
    display: grid;
    gap: 1rem;
    padding: clamp(1.15rem, 2vw, 1.55rem);
}

.billing-plan-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.55rem;
}

.billing-plan-kicker {
    display: block;
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 950;
    text-transform: uppercase;
}

.billing-plan-top h2,
.billing-mode-panel h2 {
    margin: 0.2rem 0 0;
    font-size: clamp(1.45rem, 3vw, 2.2rem);
    line-height: 1;
}

.billing-price {
    display: inline-flex;
    align-items: center;
    min-height: 2.65rem;
    padding: 0 1rem;
    border-radius: 999px;
    color: var(--bg);
    background: var(--primary);
    font-size: 1rem;
    white-space: nowrap;
}

.billing-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.15rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
}

.billing-status-row span,
.billing-mode-form label {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.billing-status-row strong {
    text-align: right;
}

.billing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.billing-actions form {
    display: inline-flex;
}

.billing-mode-form {
    display: grid;
    gap: 0.7rem;
}

.billing-mode-form select {
    min-height: 3rem;
    width: 100%;
    border-radius: 8px;
}

.billing-flash {
    margin-bottom: 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-strong));
    color: var(--text);
    font-weight: 800;
}

.billing-flash--error {
    border-color: color-mix(in srgb, #ef4444 45%, var(--border));
    background: color-mix(in srgb, #ef4444 10%, var(--bg-strong));
}

.billing-flash--warning {
    border-color: color-mix(in srgb, #f59e0b 45%, var(--border));
    background: color-mix(in srgb, #f59e0b 10%, var(--bg-strong));
}

@media (max-width: 840px) {
    .billing-grid,
    .billing-plan-top {
        grid-template-columns: 1fr;
    }

    .billing-plan-top {
        display: grid;
    }

    .billing-price {
        justify-self: start;
    }
}