/* KolamFlow V2 visual foundation.
   Presentation-only layer loaded after legacy CSS. Business markup, forms,
   routes, handlers, and server-side flows remain untouched. */

:root {
    --kf-page-bg: #EAF8F8;
    --kf-page-bg-strong: #DDF4F4;
    --kf-page: var(--kf-page-bg);
    --kf-surface: #FFFFFF;
    --kf-surface-soft: #F8FBFC;
    --kf-surface-hover: #F2FAFA;
    --kf-border: #DCEBED;
    --kf-border-strong: #C8DFE2;
    --kf-border-soft: #E7F0F1;
    --kf-text: #10212B;
    --kf-text-primary: #10212B;
    --kf-text-secondary: #62747E;
    --kf-text-muted: #91A1A9;
    --kf-primary: #0EA5A8;
    --kf-primary-hover: #0B8E91;
    --kf-primary-dark: #087F82;
    --kf-deep-teal: #0B4F56;
    --kf-blue: #3B82F6;
    --kf-green: #22C55E;
    --kf-yellow: #F4B740;
    --kf-red: #EF4444;
    --kf-success: #22C55E;
    --kf-warning: #F4B740;
    --kf-danger: #EF4444;
    --kf-info: #3B82F6;
    --kf-radius-sm: 8px;
    --kf-radius-md: 12px;
    --kf-radius-lg: 12px;
    --kf-shadow-sm: 0 4px 18px rgba(16, 33, 43, .05);
    --kf-shadow-md: 0 16px 36px rgba(16, 33, 43, .08);
    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --blue: var(--kf-primary);
    --blue-dark: var(--kf-primary-dark);
    --green: var(--kf-green);
    --orange: var(--kf-yellow);
    --red: var(--kf-red);
    --gray: var(--kf-text-secondary);
    --gray-dark: var(--kf-text);
    --border: var(--kf-border);
    --bg-card: var(--kf-surface);
    --bg-secondary: var(--kf-page);
    --text-primary: var(--kf-text-primary);
    --text-secondary: var(--kf-text-secondary);
    --accent-color: var(--kf-primary);
    --glass-bg: rgba(255, 255, 255, .86);
    --glass-strong: rgba(255, 255, 255, .96);
    --glass-border: rgba(220, 235, 237, .9);
    --shadow-sm: var(--kf-shadow-sm);
    --shadow-md: var(--kf-shadow-md);
    --radius-sm: var(--kf-radius-sm);
    --radius-md: var(--kf-radius-md);
    --radius-lg: var(--kf-radius-lg);
}

html {
    background: var(--kf-page) !important;
    color-scheme: light;
}

body {
    background: var(--kf-page) !important;
    color: var(--kf-text) !important;
    font-family: var(--font) !important;
    letter-spacing: 0;
}

body.kf-dashboard-page {
    background: var(--kf-page) !important;
}

body.kf-dashboard-page::before {
    background: #FFFFFF !important;
}

body::before {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--kf-border) !important;
    color: var(--kf-text) !important;
    box-shadow: none !important;
}

.shell,
.timbang-shell,
.crm-shell,
.settings-shell,
.super-shell {
    color: var(--kf-text);
}

.panel,
.role-layout,
.page-hero,
.leader-panel,
.ticket,
.event-card,
.metric-card,
.status-card,
.stat-card,
.grid-menu a,
.dashboard-brief div,
.component-empty-state,
.public-context-card,
.registration-step-card,
.floor-booking-picker,
.floor-plan-mini-form,
.floor-map-section,
.notification-panel,
.event-context-bar,
.compact-card {
    background: var(--kf-surface) !important;
    border: 1px solid var(--kf-border) !important;
    border-radius: var(--kf-radius-md) !important;
    box-shadow: var(--kf-shadow-sm) !important;
    color: var(--kf-text) !important;
}

.kf-card {
    background: var(--kf-surface) !important;
    border: 1px solid var(--kf-border) !important;
    border-radius: var(--kf-radius-md) !important;
    box-shadow: var(--kf-shadow-sm) !important;
    color: var(--kf-text) !important;
}

.role-layout,
.page-hero {
    padding: clamp(18px, 3vw, 28px) !important;
}

h1,
h2,
h3,
.page-hero h1,
.panel h1,
.leader-panel h1 {
    color: var(--kf-text-primary) !important;
    letter-spacing: 0 !important;
}

.page-hero h1,
.panel h1,
.leader-panel h1 {
    font-size: clamp(28px, 3vw, 32px) !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
}

h2,
.panel h2,
.registration-step-head h2 {
    font-size: clamp(18px, 2vw, 20px) !important;
    font-weight: 600 !important;
}

p,
.hint,
small,
em,
.breadcrumb-row,
.page-hero .hint,
.panel p {
    color: var(--kf-text-secondary) !important;
}

.eyebrow,
legend,
label,
.nav-group-label,
.compact-table th,
table th {
    color: var(--kf-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

input,
select,
textarea {
    background: #FFFFFF !important;
    border: 1px solid var(--kf-border-strong) !important;
    border-radius: var(--kf-radius-sm) !important;
    color: var(--kf-text) !important;
    box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--kf-text-muted) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--kf-primary) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 168, .10) !important;
    outline: none !important;
}

button,
.form button,
.secondary-btn,
.photo-link,
.copy-btn,
.page-actions a,
.event-context-bar a,
.event-context-bar button,
.grid-menu a,
input[type="submit"] {
    min-height: 40px;
    border-radius: var(--kf-radius-sm) !important;
    font-family: var(--font) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, opacity .16s ease;
}

button,
.form button,
input[type="submit"] {
    background: var(--kf-primary) !important;
    border: 1px solid var(--kf-primary) !important;
    color: #FFFFFF !important;
}

button:hover,
.form button:hover,
input[type="submit"]:hover {
    background: var(--kf-primary-hover) !important;
    border-color: var(--kf-primary-hover) !important;
    transform: translateY(-1px);
}

.secondary-btn,
.photo-link,
.page-actions a,
.event-context-bar a,
.copy-btn {
    background: #FFFFFF !important;
    border: 1px solid var(--kf-border-strong) !important;
    color: #334B55 !important;
}

.secondary-btn:hover,
.photo-link:hover,
.page-actions a:hover,
.event-context-bar a:hover,
.copy-btn:hover {
    background: var(--kf-surface-hover) !important;
    border-color: #BDE5E6 !important;
    color: var(--kf-primary-dark) !important;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.disabled {
    cursor: not-allowed !important;
    opacity: .58 !important;
}

.app-nav.admin-nav,
.app-nav.super-nav {
    background: #FFFFFF !important;
    border-right: 1px solid var(--kf-border) !important;
    box-shadow: none !important;
}

.sidebar-brand {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--kf-border) !important;
    color: var(--kf-text) !important;
}

.sidebar-brand-logo {
    background: #E1F6F6 !important;
    border: 1px solid #BDE5E6 !important;
    color: var(--kf-primary) !important;
}

.sidebar-brand-text {
    color: var(--kf-text) !important;
}

.sidebar-language-switcher,
.language-switcher {
    background: var(--kf-surface-soft) !important;
    border: 1px solid var(--kf-border) !important;
}

.language-switcher a {
    color: #52636D !important;
    background: transparent !important;
}

.language-switcher a.active {
    color: var(--kf-primary-dark) !important;
    background: #E1F6F6 !important;
}

.app-nav.admin-nav .sidebar-scroll,
.app-nav.super-nav .sidebar-scroll {
    gap: 4px !important;
}

.app-nav.admin-nav .sidebar-scroll > a,
.app-nav.super-nav .sidebar-scroll > a {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--kf-radius-sm) !important;
    color: #52636D !important;
    box-shadow: none !important;
    min-height: 40px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

.app-nav.admin-nav .sidebar-scroll > a:hover,
.app-nav.super-nav .sidebar-scroll > a:hover {
    background: #F2FAFA !important;
    color: var(--kf-text) !important;
}

.app-nav.admin-nav .sidebar-scroll > a.active,
.app-nav.admin-nav .sidebar-scroll > a[aria-current="page"],
.app-nav.super-nav .sidebar-scroll > a.active,
.app-nav.super-nav .sidebar-scroll > a[aria-current="page"] {
    background: #E1F6F6 !important;
    border-color: #BDE5E6 !important;
    color: var(--kf-primary-dark) !important;
}

.app-nav.admin-nav .sidebar-scroll > a.active::before,
.app-nav.admin-nav .sidebar-scroll > a[aria-current="page"]::before,
.app-nav.super-nav .sidebar-scroll > a.active::before,
.app-nav.super-nav .sidebar-scroll > a[aria-current="page"]::before {
    color: var(--kf-primary) !important;
}

.app-nav .signout-link:hover {
    background: #FEF2F2 !important;
    border-color: #FECACA !important;
    color: #B91C1C !important;
}

.sidebar-toggle {
    background: #FFFFFF !important;
    border: 1px solid var(--kf-border) !important;
    color: var(--kf-text-secondary) !important;
}

.shell-top-actions {
    color: var(--kf-text) !important;
}

.shell-notify,
.shell-profile-pill {
    background: #FFFFFF !important;
    border: 1px solid var(--kf-border) !important;
    color: var(--kf-text) !important;
    box-shadow: none !important;
}

.shell-profile-avatar {
    background: linear-gradient(135deg, rgba(14, 165, 168, .18), rgba(34, 197, 94, .12)) !important;
    color: #FFFFFF !important;
}

.notify-badge {
    background: var(--kf-primary) !important;
    color: #FFFFFF !important;
}

.event-context-bar {
    background: #FFFFFF !important;
    backdrop-filter: none;
}

.event-state.open,
.status-active,
.status-open,
.status-ready,
.status-success,
.status-paid,
.status-approved,
.tone-success {
    background: #ECFDF3 !important;
    border-color: #BBF7D0 !important;
    color: #15803D !important;
}

.status-pending,
.status-warning,
.status-warn,
.status-reserved,
.tone-warning {
    background: #FFF9E8 !important;
    border-color: #F4D36A !important;
    color: #7C5B00 !important;
}

.status-booked,
.status-info,
.tone-info {
    background: #EFF6FF !important;
    border-color: #BFDBFE !important;
    color: #1D4ED8 !important;
}

.status-inactive,
.status-disabled,
.status-neutral {
    background: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
    color: #52636D !important;
}

.status-error,
.status-danger,
.status-unavailable,
.status-suspended,
.status-locked,
.event-state.locked,
.tone-danger {
    background: #FEF2F2 !important;
    border-color: #FECACA !important;
    color: #B91C1C !important;
}

.status-badge {
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
}

.table-wrap,
.compact-table,
table {
    color: var(--kf-text) !important;
}

.table-wrap {
    background: var(--kf-surface) !important;
    border: 1px solid var(--kf-border) !important;
    border-radius: var(--kf-radius-md) !important;
    overflow: auto;
}

table {
    border-color: var(--kf-border-soft) !important;
    background: #FFFFFF !important;
}

table thead,
.compact-table thead {
    background: #F5FAFA !important;
}

table th,
table td,
.compact-table th,
.compact-table td {
    border-color: var(--kf-border-soft) !important;
}

table td,
.compact-table td {
    color: var(--kf-text-secondary) !important;
}

table tbody tr:hover,
.compact-table tbody tr:hover {
    background: #F2FAFA !important;
}

.alert,
.global-flash,
.impersonation-banner {
    background: #FFF9E8 !important;
    border: 1px solid #F4D36A !important;
    color: #7C5B00 !important;
}

@media (max-width: 920px) {
    .app-nav.admin-nav,
    .app-nav.super-nav,
    .app-nav.public-nav {
        background: #FFFFFF !important;
        border-top: 1px solid var(--kf-border) !important;
        border-right: 0 !important;
    }

    .app-nav.admin-nav .sidebar-scroll > a,
    .app-nav.super-nav .sidebar-scroll > a,
    .app-nav.public-nav .sidebar-scroll > a {
        color: #52636D !important;
    }

    .app-nav.admin-nav .sidebar-scroll > a.active,
    .app-nav.super-nav .sidebar-scroll > a.active,
    .app-nav.public-nav .sidebar-scroll > a.active {
        color: var(--kf-primary-dark) !important;
    }
}

/* Final aqua foundation cascade for legacy high-specificity UI rules. */
@media (min-width: 921px) {
    html body:has(.app-nav.admin-nav):not(.super-admin-page),
    html body:has(.app-nav.admin-nav):not(:has(.super-shell)),
    html body:has(.app-nav.super-nav),
    html body.super-admin-page {
        background: var(--kf-page) !important;
        color: var(--kf-text) !important;
    }

    html body:has(.app-nav.admin-nav)::before,
    html body:has(.app-nav.super-nav)::before {
        background: #FFFFFF !important;
        border-bottom: 1px solid var(--kf-border) !important;
        box-shadow: none !important;
    }

    html body:has(.app-nav.admin-nav) .app-nav.admin-nav,
    html body:has(.app-nav.super-nav) .app-nav.super-nav {
        background: #FFFFFF !important;
        border-right: 1px solid var(--kf-border) !important;
        box-shadow: none !important;
    }

    html body:has(.app-nav.admin-nav) .sidebar-brand,
    html body:has(.app-nav.super-nav) .sidebar-brand {
        background: #FFFFFF !important;
        border-bottom: 1px solid var(--kf-border) !important;
        color: var(--kf-text) !important;
    }

    html body:has(.app-nav.admin-nav) .sidebar-brand-logo,
    html body:has(.app-nav.super-nav) .sidebar-brand-logo {
        background: #E1F6F6 !important;
        border: 1px solid #BDE5E6 !important;
        border-radius: 8px !important;
        color: var(--kf-primary) !important;
    }

    html body:has(.app-nav.admin-nav) .sidebar-brand-text,
    html body:has(.app-nav.super-nav) .sidebar-brand-text {
        color: var(--kf-text) !important;
    }

    html body:has(.app-nav.admin-nav) .nav-group-label,
    html body:has(.app-nav.super-nav) .nav-group-label {
        color: var(--kf-text-muted) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
    }

    html body:has(.app-nav.admin-nav) .app-nav.admin-nav .sidebar-scroll > a,
    html body:has(.app-nav.super-nav) .app-nav.super-nav .sidebar-scroll > a {
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 8px !important;
        color: #52636D !important;
        box-shadow: none !important;
    }

    html body:has(.app-nav.admin-nav) .app-nav.admin-nav .sidebar-scroll > a:hover,
    html body:has(.app-nav.super-nav) .app-nav.super-nav .sidebar-scroll > a:hover {
        background: #F2FAFA !important;
        color: var(--kf-text) !important;
    }

    html body:has(.app-nav.admin-nav) .app-nav.admin-nav .sidebar-scroll > a.active,
    html body:has(.app-nav.admin-nav) .app-nav.admin-nav .sidebar-scroll > a[aria-current="page"],
    html body:has(.app-nav.admin-nav):not(.super-admin-page) .app-nav.admin-nav .sidebar-scroll > a[data-nav-item].active,
    html body:has(.app-nav.admin-nav):not(.super-admin-page) .app-nav.admin-nav .sidebar-scroll > a[data-nav-item][aria-current="page"],
    html body:has(.app-nav.super-nav) .app-nav.super-nav .sidebar-scroll > a.active,
    html body:has(.app-nav.super-nav) .app-nav.super-nav .sidebar-scroll > a[aria-current="page"] {
        background: #E1F6F6 !important;
        border-color: #BDE5E6 !important;
        color: var(--kf-primary-dark) !important;
        box-shadow: none !important;
    }

    html body:has(.app-nav.admin-nav) .sidebar-language-switcher,
    html body:has(.app-nav.super-nav) .sidebar-language-switcher {
        background: var(--kf-surface-soft) !important;
        border: 1px solid var(--kf-border) !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }

    html body:has(.app-nav.admin-nav) .sidebar-language-switcher a,
    html body:has(.app-nav.super-nav) .sidebar-language-switcher a {
        border-radius: 7px !important;
        background: transparent !important;
        color: #52636D !important;
    }

    html body:has(.app-nav.admin-nav) .sidebar-language-switcher a.active,
    html body:has(.app-nav.admin-nav) .sidebar-language-switcher a.is-selected,
    html body:has(.app-nav.admin-nav) .sidebar-language-switcher a[aria-current="true"],
    html body:has(.app-nav.super-nav) .sidebar-language-switcher a.active,
    html body:has(.app-nav.super-nav) .sidebar-language-switcher a.is-selected,
    html body:has(.app-nav.super-nav) .sidebar-language-switcher a[aria-current="true"] {
        background: #E1F6F6 !important;
        color: var(--kf-primary-dark) !important;
        box-shadow: none !important;
    }

    html body:has(.app-nav.admin-nav):not(.super-admin-page) .sidebar-scroll {
        scrollbar-color: rgba(98, 116, 126, .32) transparent;
        scrollbar-width: thin;
    }

    html body:has(.app-nav.admin-nav):not(.super-admin-page) .sidebar-scroll::-webkit-scrollbar {
        display: initial !important;
        width: 8px;
    }

    html body:has(.app-nav.admin-nav):not(:has(.super-shell)) .app-nav.admin-nav .sidebar-scroll::-webkit-scrollbar {
        display: initial !important;
        width: 8px !important;
    }

    html body:has(.app-nav.admin-nav):not(.super-admin-page) .sidebar-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    html body:has(.app-nav.admin-nav):not(.super-admin-page) .sidebar-scroll::-webkit-scrollbar-thumb {
        background: rgba(98, 116, 126, .28);
        border: 2px solid #FFFFFF;
        border-radius: 999px;
    }

    html body:has(.app-nav.admin-nav) .event-context-bar,
    html body:has(.app-nav.super-nav) .event-context-bar {
        background: #FFFFFF !important;
        border: 1px solid var(--kf-border) !important;
        border-radius: 12px !important;
        box-shadow: var(--kf-shadow-sm) !important;
        color: var(--kf-text) !important;
    }

    html body:has(.app-nav.admin-nav) .event-context-bar strong,
    html body:has(.app-nav.super-nav) .event-context-bar strong {
        color: var(--kf-text) !important;
    }

    html body:has(.app-nav.admin-nav) .event-context-bar span,
    html body:has(.app-nav.admin-nav) .event-context-bar em,
    html body:has(.app-nav.super-nav) .event-context-bar span,
    html body:has(.app-nav.super-nav) .event-context-bar em {
        color: var(--kf-text-secondary) !important;
    }

    html body:has(.app-nav.admin-nav):not(:has(.super-shell)) button:not(.sidebar-toggle):not(.shell-notify):not(.crm-qr-modal-close),
    html body:has(.app-nav.admin-nav):not(:has(.super-shell)) a.primary-action,
    html body:has(.app-nav.admin-nav):not(:has(.super-shell)) .primary-action,
    html body:has(.app-nav.admin-nav):not(:has(.super-shell)) .secondary-btn,
    html body:has(.app-nav.admin-nav):not(:has(.super-shell)) .mini-btn {
        border-radius: 8px !important;
        box-shadow: none !important;
        letter-spacing: 0 !important;
    }

    html body:has(.app-nav.admin-nav):not(:has(.super-shell)) button:not(.sidebar-toggle):not(.shell-notify):not(.crm-qr-modal-close),
    html body:has(.app-nav.admin-nav):not(:has(.super-shell)) a.primary-action,
    html body:has(.app-nav.admin-nav):not(:has(.super-shell)) .primary-action {
        background: var(--kf-primary) !important;
        border-color: var(--kf-primary) !important;
        color: #FFFFFF !important;
    }

    html body:has(.app-nav.admin-nav):not(:has(.super-shell)) .secondary-btn,
    html body:has(.app-nav.admin-nav):not(:has(.super-shell)) .mini-btn {
        background: #FFFFFF !important;
        border-color: var(--kf-border-strong) !important;
        color: #334B55 !important;
    }
}

/* Dashboard V2: page-specific layout only. */
body.kf-dashboard-page .shell.kf-dashboard {
    width: min(calc(100vw - var(--sidebar-w) - 48px), 1220px) !important;
    padding-top: calc(var(--nav-h) + var(--safe-top) + 108px) !important;
}

.kf-dashboard {
    display: grid;
    gap: 18px;
}

body.kf-dashboard-page .event-context-bar {
    align-items: center;
    background: #FFFFFF !important;
    border: 1px solid var(--kf-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--kf-shadow-sm) !important;
}

body.kf-dashboard-page .event-context-bar strong {
    color: var(--kf-text) !important;
    font-weight: 700 !important;
}

body.kf-dashboard-page .event-context-bar span,
body.kf-dashboard-page .event-context-bar em {
    color: var(--kf-text-secondary) !important;
}

body.kf-dashboard-page .event-context-bar nav {
    gap: 8px !important;
}

body.kf-dashboard-page .event-context-bar a,
body.kf-dashboard-page .event-context-bar select,
body.kf-dashboard-page .event-context-bar button {
    min-height: 38px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body.kf-dashboard-page .event-context-bar a,
body.kf-dashboard-page .event-context-bar select {
    background: #FFFFFF !important;
    border: 1px solid var(--kf-border-strong) !important;
    color: #334B55 !important;
}

body.kf-dashboard-page .event-context-bar .event-lock-btn.finalize {
    background: var(--kf-primary) !important;
    border-color: var(--kf-primary) !important;
    color: #FFFFFF !important;
}

.kf-dash-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.kf-dash-title h1 {
    margin: 0;
    color: var(--kf-text-primary);
    font-size: clamp(28px, 3vw, 32px);
    line-height: 1.05;
    font-weight: 700;
}

.kf-dash-title p {
    margin: 6px 0 0;
    color: var(--kf-text-secondary);
    font-size: 15px;
}

.kf-action-primary,
.kf-link-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.kf-action-primary {
    padding: 10px 16px;
    border: 1px solid var(--kf-primary);
    background: var(--kf-primary);
    color: #FFFFFF !important;
}

.kf-action-primary:hover {
    background: var(--kf-primary-hover);
    border-color: var(--kf-primary-hover);
}

.kf-action-primary.full {
    width: 100%;
    margin-top: 14px;
}

.kf-link-btn {
    padding: 8px 12px;
    border: 1px solid var(--kf-border-strong);
    background: #FFFFFF;
    color: #334B55 !important;
}

.kf-dash-alert {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #F4D36A;
    border-radius: 12px;
    background: #FFF9E8;
    color: #7C5B00;
    font-size: 13px;
    box-shadow: var(--kf-shadow-sm);
}

.kf-dash-alert a {
    color: #7C5B00;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kf-dash-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.kf-dash-stat,
.kf-dash-card {
    border: 1px solid var(--kf-border);
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: var(--kf-shadow-sm);
}

.kf-dash-stat {
    min-height: 124px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 18px;
}

.kf-dash-stat-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #E1F6F6;
    color: var(--kf-primary);
    font-size: 12px;
    font-weight: 900;
}

.kf-tone-blue .kf-dash-stat-icon { background: #EFF6FF; color: var(--kf-blue); }
.kf-tone-green .kf-dash-stat-icon { background: #ECFDF3; color: var(--kf-green); }
.kf-tone-yellow .kf-dash-stat-icon { background: #FFF9E8; color: var(--kf-yellow); }

.kf-dash-stat span:not(.kf-dash-stat-icon) {
    display: block;
    color: var(--kf-text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.kf-dash-stat strong {
    display: block;
    margin-top: 4px;
    color: var(--kf-text-primary);
    font-size: 32px;
    line-height: 1.02;
    font-weight: 700;
}

.kf-dash-stat em {
    display: block;
    margin-top: 6px;
    color: var(--kf-text-muted);
    font-size: 12px;
    font-style: normal;
}

.kf-dash-grid-main,
.kf-dash-grid-lower,
.kf-dash-grid-setup {
    display: grid;
    gap: 18px;
    align-items: stretch;
}

.kf-dash-grid-main {
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .9fr);
}

.kf-dash-grid-lower {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .8fr);
}

.kf-dash-grid-setup {
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
}

.kf-dash-grid-setup > .kf-dash-card:only-child {
    grid-column: 1 / -1;
}

.kf-dash-side,
.kf-dash-quick,
.kf-dash-notices,
.kf-dash-setup {
    display: grid;
    gap: 12px;
}

.kf-dash-setup {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kf-dash-card {
    padding: 20px;
}

.kf-dash-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.kf-dash-card-head.compact {
    margin-bottom: 12px;
}

.kf-dash-card-head h2 {
    margin: 2px 0 0;
    color: var(--kf-text-primary);
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
}

.kf-dash-event-card {
    min-height: 0;
}

.kf-dash-event-meta,
.kf-dash-chip-row,
.kf-dash-actions,
.kf-dash-analytics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kf-dash-event-meta span,
.kf-dash-chip-row span,
.kf-dash-analytics span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border: 1px solid var(--kf-border-soft);
    border-radius: 8px;
    background: var(--kf-surface-soft);
    color: var(--kf-text-secondary);
    font-size: 13px;
    font-weight: 650;
}

.kf-dash-event-body {
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    margin: 22px 0;
}

.kf-dash-ring {
    width: 132px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #FFFFFF 0 56%, transparent 57%),
        conic-gradient(var(--kf-primary) var(--progress), #DDF4F4 0);
    box-shadow: inset 0 0 0 1px var(--kf-border-soft);
}

.kf-dash-ring strong,
.kf-dash-ring span {
    grid-area: 1 / 1;
}

.kf-dash-ring strong {
    margin-top: -12px;
    color: var(--kf-text-primary);
    font-size: 26px;
}

.kf-dash-ring span {
    margin-top: 30px;
    color: var(--kf-text-secondary);
    font-size: 12px;
}

.kf-dash-event-copy strong {
    display: block;
    color: var(--kf-text-primary);
    font-size: 19px;
    line-height: 1.25;
}

.kf-dash-event-copy p {
    margin: 6px 0 14px;
    color: var(--kf-text-secondary);
    font-size: 14px;
}

.kf-dash-actions a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 13px;
    border: 1px solid var(--kf-border);
    border-radius: 8px;
    background: #FFFFFF;
    color: #334B55;
    font-size: 13px;
    font-weight: 800;
    box-shadow: none;
}

.kf-dash-actions a.primary {
    background: var(--kf-primary);
    border-color: var(--kf-primary);
    color: #FFFFFF;
}

.kf-dash-actions a:hover {
    border-color: #BDE5E6;
    background: #F2FAFA;
    color: var(--kf-primary-dark);
}

.kf-dash-actions a.primary:hover {
    background: var(--kf-primary-hover);
    border-color: var(--kf-primary-hover);
    color: #FFFFFF;
}

.kf-dash-winner,
.kf-dash-empty {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--kf-border);
    border-radius: 10px;
    background: var(--kf-surface-soft);
}

.kf-dash-winner span,
.kf-dash-winner em,
.kf-dash-empty {
    color: var(--kf-text-secondary);
    font-size: 13px;
    font-style: normal;
}

.kf-dash-winner strong {
    color: var(--kf-text-primary);
    font-size: 22px;
    line-height: 1.15;
}

.kf-dash-table {
    border-radius: 10px !important;
    border-color: var(--kf-border) !important;
    box-shadow: none !important;
}

.kf-dash-table table {
    min-width: 680px;
}

.kf-dash-table td strong,
.kf-dash-analytics b {
    color: var(--kf-primary);
}

.kf-dash-quick a,
.kf-dash-notices div,
.kf-dash-setup a {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--kf-border-soft);
    border-radius: 10px;
    background: var(--kf-surface-soft);
    color: var(--kf-text-primary);
    text-decoration: none;
    min-width: 0;
}

.kf-dash-setup a > span {
    grid-row: 1 / span 2;
}

.kf-dash-setup a > strong,
.kf-dash-setup a > em {
    grid-column: 2;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
}

.kf-dash-quick a:hover,
.kf-dash-setup a:hover {
    border-color: #BDE5E6;
    background: #EAF8F8;
}

.kf-dash-quick a > span,
.kf-dash-setup a > span {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #E1F6F6;
    color: var(--kf-primary);
    font-size: 11px;
    font-weight: 900;
}

.kf-dash-quick strong,
.kf-dash-notices strong,
.kf-dash-setup strong {
    display: block;
    color: var(--kf-text-primary);
    font-size: 14px;
}

.kf-dash-quick em,
.kf-dash-notices p,
.kf-dash-setup em {
    display: block;
    margin-top: 3px;
    color: var(--kf-text-secondary);
    font-size: 12px;
    font-style: normal;
}

.kf-dash-notices div {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.kf-dash-notices a {
    align-self: center;
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--kf-primary);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.kf-dash-notices strong,
.kf-dash-notices p {
    grid-column: 1;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
}

.kf-dash-setup a.done > span {
    background: #ECFDF3;
    color: var(--kf-green);
}

.kf-dash-setup a.pending > span {
    background: #FFF9E8;
    color: var(--kf-yellow);
}

@media (max-width: 1100px) {
    .kf-dash-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kf-dash-grid-main,
    .kf-dash-grid-lower,
    .kf-dash-grid-setup {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .kf-dash-setup {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    body.kf-dashboard-page .shell.kf-dashboard {
        padding-top: calc(var(--nav-h) + var(--safe-top) + 92px) !important;
    }

    .kf-dash-title,
    .kf-dash-card-head,
    .kf-dash-event-body {
        grid-template-columns: 1fr;
        display: grid;
    }

    .kf-dash-stats {
        grid-template-columns: 1fr;
    }

    .kf-action-primary,
    .kf-link-btn {
        width: 100%;
    }

    .kf-dash-notices div {
        grid-template-columns: 1fr;
    }

    .kf-dash-notices a {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }
}