:root {
    --kn-dark-purple: #321162;
    --kn-purple: #682C91;
    --kn-magenta: #BB1B8D;
    --kn-white: #FFFFFF;
    --kn-bg: #FFFFFF;
    --kn-text: #180B2E;
    --kn-muted: #6E6478;
    --kn-border: rgba(104, 44, 145, 0.16);
    --kn-primary-soft: rgba(104, 44, 145, 0.1);
    --kn-magenta-soft: rgba(187, 27, 141, 0.1);
    --primary: var(--kn-purple);
    --primary-d: var(--kn-dark-purple);
    --primary-l: var(--kn-primary-soft);
    --secondary: var(--kn-magenta);
    --sec-l: var(--kn-magenta-soft);
    --bg: var(--kn-bg);
    --card: var(--kn-white);
    --text: var(--kn-text);
    --muted: var(--kn-muted);
    --border: var(--kn-border);
    --card-border: var(--kn-border);
}

body,
.role-shell,
.agent-shell,
.command-shell {
    background-color: var(--kn-bg);
}

body::before,
.public-shell::before,
.role-shell::before,
.agent-shell::before,
.command-shell::before {
    display: none !important;
    content: none !important;
}

.brand-logo,
.kn-brand-logo {
    display: block;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.brand-logo.sidebar-logo {
    height: 86px;
    margin: 0 auto;
}
.brand-logo.public-logo {
    height: 86px;
    margin: 0 auto;
}
.brand-logo.auth-logo {
    height: 112px;
    width: auto !important;
    max-width: min(260px, 100%) !important;
    margin: 0 auto;
    filter: drop-shadow(0 16px 30px rgba(50, 17, 98, 0.18));
}

.auth-brand-card {
    width: auto !important;
    max-width: 100% !important;
    background: rgba(255, 255, 255, 0.94) !important;
}

.auth-brand-card img.brand-logo.auth-logo {
    display: block !important;
    width: auto !important;
    height: 112px !important;
    max-width: 260px !important;
    object-fit: contain !important;
}

.auth-panel-logo {
    display: flex;
    justify-content: center;
    margin: 0 0 1.25rem;
}

.auth-panel-logo img.brand-logo.auth-logo {
    display: block !important;
    width: auto !important;
    height: 92px !important;
    max-width: 240px !important;
    object-fit: contain !important;
}

.public-sidebar .brand-lockup {
    justify-content: center;
    padding: 18px 16px 14px;
}

.brand-mark,
.metric-icon,
.form-section-icon,
.wizard-step-icon,
.action-confirm-icon,
.quick-action-icon,
.service-card .service-icon,
.stat-icon-box,
.auth-card-icon {
    background: linear-gradient(135deg, rgba(104, 44, 145, 0.12), rgba(187, 27, 141, 0.12));
    color: var(--kn-purple);
}

.bg-teal-50,
.dark .bg-teal-950\/70 {
    background-color: rgba(104, 44, 145, 0.1) !important;
}

.from-teal-500,
.from-teal-600 {
    --tw-gradient-from: var(--kn-purple) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(104, 44, 145, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-blue-600,
.to-blue-700,
.to-teal-500 {
    --tw-gradient-to: var(--kn-magenta) var(--tw-gradient-to-position) !important;
}

.text-primary,
.text-teal-500,
.text-teal-600,
.text-blue-600,
.eyebrow,
.topbar-location svg,
.panel-head a,
.complaint-timeline a,
.attachment-list a,
.upload-zone-icon,
.category-card i,
.category-card svg,
.media-input,
.panel-icon {
    color: var(--kn-purple) !important;
}

.sidebar-link:hover,
.public-nav a:hover,
.nav-auth-button:hover,
.profile-dropdown a:hover,
.profile-dropdown button:hover,
.wizard-step:hover,
.wizard-step.active,
.action-menu__panel a:hover,
.action-menu__panel button:hover {
    background: var(--kn-primary-soft) !important;
    color: var(--kn-purple) !important;
}

.sidebar-link.active,
.public-nav a.active,
.primary-action,
.primary-button,
.submit-btn,
.auth-submit-btn,
.login-link,
.bulk-toolbar button,
.btn-primary,
.mobile-bottom-nav .nav-sos,
.progress-track span,
.register-progress span,
.toggle-switch input:checked ~ .toggle-track {
    background: linear-gradient(135deg, var(--kn-dark-purple), var(--kn-purple) 52%, var(--kn-magenta)) !important;
    color: var(--kn-white) !important;
    border-color: transparent !important;
    box-shadow: 0 16px 34px rgba(104, 44, 145, 0.24) !important;
}

.primary-button:hover,
.btn-primary:hover,
.auth-submit-btn:hover,
.submit-btn:hover {
    filter: saturate(1.08) brightness(1.03);
}

.crud-search:focus-within,
.search-input:focus,
.topbar-search input:focus,
.role-form input:focus,
.role-form textarea:focus,
.role-form select:focus,
.crud-form-shell input:focus:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.crud-form-shell select:focus,
.crud-form-shell textarea:focus,
.field-input-wrap input:focus,
.field-input-wrap select:focus,
.input-control:focus,
.select-control:focus {
    border-color: rgba(187, 27, 141, 0.52) !important;
    box-shadow: 0 0 0 4px rgba(187, 27, 141, 0.1) !important;
}

.public-sidebar,
aside[class*="border-r"],
.public-topbar,
header[class*="sticky"],
.surface-panel,
.chart-tile,
.quick-action,
.kanban-column,
.complaint-card,
.survey-card,
.dashboard-panel,
.auth-dialog,
.auth-panel,
.auth-card,
.role-form,
.role-record,
.role-table-wrap,
.role-module-table,
.hero-progress,
.agent-card,
.kpi-card,
.category-card,
.survey-row,
.agent-dialog,
.glass-panel,
.map-panel {
    border-color: var(--kn-border) !important;
}

.public-sidebar,
aside[class*="bg-white"],
.public-topbar,
header[class*="bg-white"],
.surface-panel,
.chart-tile,
.quick-action,
.kanban-column,
.complaint-card,
.survey-card,
.dashboard-panel,
.auth-panel,
.auth-card,
.role-record,
.role-module-table,
.hero-progress,
.agent-card,
.kpi-card,
.category-card,
.survey-row {
    background-color: rgba(255, 255, 255, 0.92) !important;
}

.metric-card {
    border-color: rgba(104, 44, 145, 0.12) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.9)),
        linear-gradient(135deg, rgba(104, 44, 145, 0.1), rgba(187, 27, 141, 0.1)) !important;
}

.metric-card::before {
    background-image: linear-gradient(135deg, rgba(50, 17, 98, 0.12), rgba(187, 27, 141, 0.12)) !important;
    clip-path: polygon(0 35%, 16% 20%, 34% 42%, 52% 24%, 70% 44%, 100% 22%, 100% 100%, 0 100%);
}

.metric-icon.teal,
.metric-icon.blue,
.metric-icon.violet,
.metric-icon.pink,
.feed-icon.teal,
.feed-icon.blue,
.feed-icon.violet,
.form-section-icon.blue,
.form-section-icon.violet,
.role-chip.teal,
.role-chip.blue,
.role-chip.violet,
.qa-teal,
.qa-blue,
.qa-purple,
.badge-teal {
    background: var(--kn-primary-soft) !important;
    color: var(--kn-purple) !important;
}

.metric-icon.pink,
.feed-icon.pink,
.qa-rose {
    background: var(--kn-magenta-soft) !important;
    color: var(--kn-magenta) !important;
}

.indicator.teal span,
.topbar-badge,
.nav-danger-dot,
.role-filter-dot,
.dot.teal,
.dot.blue,
.dot.violet {
    background: var(--kn-magenta) !important;
}

.hero-overlay,
.auth-showcase {
    background-image:
        linear-gradient(135deg, rgba(50, 17, 98, 0.92), rgba(104, 44, 145, 0.76), rgba(187, 27, 141, 0.52)),
        var(--auth-bg-image, none) !important;
}

.auth-tabs button.active,
.tab-strip button.active,
.mobile-bottom-nav a.active,
.bottom-nav button.active,
.bottom-nav button:focus {
    color: var(--kn-purple) !important;
}

.sidebar-app-card,
.bulk-toolbar,
.crud-detail-grid article,
.complaint-info-grid div,
.module-hero,
.role-empty,
.empty-state {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,248,252,0.92)),
        linear-gradient(135deg, rgba(104,44,145,0.05), rgba(187,27,141,0.05)) !important;
}

.role-shell,
.agent-shell,
.command-shell {
    background: #FFFFFF !important;
    background-image: none !important;
}

.command-shell {
    color: var(--kn-white);
}

.command-shell .primary-button {
    background: linear-gradient(135deg, var(--kn-purple), var(--kn-magenta)) !important;
}

.dark .metric-card,
.dark .surface-panel,
.dark .chart-tile,
.dark .quick-action,
.dark .kanban-column,
.dark .complaint-card,
.dark .survey-card,
.dark .role-record,
.dark .role-form {
    background: rgba(24, 11, 46, 0.82) !important;
    border-color: rgba(248, 248, 252, 0.1) !important;
}

@media (max-width: 768px) {
    .brand-logo.sidebar-logo,
    .brand-logo.public-logo {
        height: 72px;
    }

    .public-topbar {
        min-height: 64px;
    }
}

html,
body,
body.bg-slate-50,
.public-shell,
.public-shell main,
main.min-w-0,
.public-content,
.role-shell,
.role-shell main,
.role-shell section,
.agent-shell,
.command-shell,
.command-grid,
.bottom-grid,
body > main,
main > section,
section.public-content,
section[class*="px-4"][class*="py-6"],
section[class*="sm:px-6"],
section[class*="lg:px-8"] {
    background: #FFFFFF !important;
    background-image: none !important;
}

.public-content,
.role-shell section,
section[class*="px-4"][class*="py-6"] {
    min-height: calc(100vh - var(--topbar-h));
}

.public-content::before,
.public-content::after,
.module-heading::before,
.module-heading::after,
.super-module-heading::before,
.super-module-heading::after,
.complaint-portal-grid::before,
.complaint-portal-grid::after,
.role-shell::before,
.role-shell::after,
.agent-shell::before,
.agent-shell::after,
.command-shell::before,
.command-shell::after,
main::before,
main::after,
section::before,
section::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

.module-heading,
.super-module-heading,
.complaint-summary-grid,
.complaint-portal-grid,
.module-grid,
.home-content-grid,
.public-home-v3,
.role-report-grid {
    background: transparent !important;
    background-image: none !important;
}