:root {
    --bg-main: #0d0f0e;
    --bg-soft: #151918;
    --bg-raised: #1b211f;
    --surface: rgba(245, 247, 242, 0.055);
    --surface-strong: rgba(245, 247, 242, 0.09);
    --line: rgba(238, 243, 235, 0.12);
    --line-strong: rgba(238, 243, 235, 0.2);
    --text-main: #f3f5ee;
    --text-soft: #bac4bb;
    --text-faint: rgba(243, 245, 238, 0.56);
    --accent: #0f766e;
    --accent-soft: #5eead4;
    --accent-contrast: #06231f;
    --warning: #f2c766;
    --danger: #f87171;
    --success: #86efac;
    --shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.22);
    --shadow-tight: 0 10px 24px rgba(0, 0, 0, 0.18);
}

html {
    background: var(--bg-main);
}

body,
body.app-shell {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text-main);
    background:
        linear-gradient(180deg, #111513 0%, #0d0f0e 48%, #090b0a 100%) !important;
    letter-spacing: 0;
}

::selection {
    background: rgba(94, 234, 212, 0.28);
    color: var(--text-main);
}

body::-webkit-scrollbar,
.app-shell ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body::-webkit-scrollbar-track,
.app-shell ::-webkit-scrollbar-track {
    background: #0a0c0b;
}

body::-webkit-scrollbar-thumb,
.app-shell ::-webkit-scrollbar-thumb {
    background: #2f3a36;
    border: 2px solid #0a0c0b;
    border-radius: 999px;
}

body::-webkit-scrollbar-thumb:hover,
.app-shell ::-webkit-scrollbar-thumb:hover {
    background: #43534d;
}

.brand-display,
.display-title,
.hero-title,
.section-title,
.plan-title,
.sa-brand {
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    letter-spacing: 0 !important;
}

.hero-wordmark {
    display: none !important;
}

.display-title,
.hero-title,
.section-title {
    font-weight: 800 !important;
    line-height: 0.98 !important;
    overflow-wrap: break-word;
}

.editorial-eyebrow,
.eyebrow-copy,
.mobile-menu-label {
    color: var(--accent-soft) !important;
    letter-spacing: 0.12em !important;
}

.hero-shell,
.panel-shell,
.table-shell,
.modal-shell,
.soft-note,
.section-shell,
.plan-shell,
.form-shell,
.cta-shell,
.soft-panel,
.auth-shell,
.auth-panel,
.glass,
.sa-glass,
.header-menu,
.sa-menu,
.mobile-menu-shell,
.sa-mobile-shell {
    border-color: var(--line) !important;
    background: rgba(245, 247, 242, 0.05) !important;
    box-shadow: var(--shadow-soft) !important;
}

.soft-stat,
.soft-panel,
.metric-chip,
.info-chip {
    border-color: var(--line) !important;
    background: rgba(245, 247, 242, 0.035) !important;
    box-shadow: none !important;
}

.hero-shell,
.section-shell,
.plan-shell,
.form-shell,
.cta-shell,
.auth-shell,
.panel-shell,
.table-shell,
.modal-shell {
    border-radius: clamp(20px, 2vw, 28px) !important;
}

.hero-shell::after,
.table-shell::after,
.modal-shell::after,
.section-shell::after,
.plan-shell::after,
.form-shell::after,
.cta-shell::after,
.auth-panel::after,
.ambient-ring {
    display: none !important;
}

.hero-shell::before,
.panel-shell::before,
.table-shell::before,
.soft-stat::before,
.modal-shell::before,
.soft-note::before,
.section-shell::before,
.plan-shell::before,
.form-shell::before,
.cta-shell::before,
.auth-shell::before,
.auth-panel::before {
    display: none !important;
}

.header-shell::before,
.sa-header-shell::before {
    background: linear-gradient(90deg, rgba(94, 234, 212, 0.08), transparent 34%, rgba(242, 199, 102, 0.045)) !important;
}

.landing-header,
.glass,
.sa-glass,
footer {
    background: rgba(12, 15, 14, 0.82) !important;
    border-color: var(--line) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.brand-mark,
.sa-mark {
    background: linear-gradient(135deg, #0f766e 0%, #2dd4bf 100%) !important;
    box-shadow: 0 18px 38px rgba(45, 212, 191, 0.18) !important;
}

.header-link,
.header-button,
.header-menu a,
.header-menu button,
.sa-link,
.sa-button,
.sa-menu a,
.sa-menu button,
.mobile-menu-link,
.sa-mobile-link {
    color: var(--text-soft) !important;
}

.header-link:hover,
.header-button:hover,
.header-menu a:hover,
.header-menu button:hover,
.sa-link:hover,
.sa-link.is-active,
.sa-button:hover,
.sa-menu a:hover,
.sa-menu button:hover,
.mobile-menu-link:hover,
.sa-mobile-link:hover {
    color: var(--text-main) !important;
    background: rgba(245, 247, 242, 0.07) !important;
    border-color: rgba(94, 234, 212, 0.28) !important;
}

.action-button,
.amber-button,
.header-pill.is-primary,
.sa-pill.is-primary,
button[type="submit"].bg-blue-600,
button[type="submit"].bg-green-600,
.bg-blue-600,
.bg-indigo-600,
.bg-green-600 {
    border: 1px solid rgba(94, 234, 212, 0.38) !important;
    background: linear-gradient(135deg, #0f766e 0%, #2dd4bf 100%) !important;
    color: #04211d !important;
    box-shadow: 0 12px 26px rgba(45, 212, 191, 0.14) !important;
}

.action-button:hover,
.amber-button:hover,
.header-pill.is-primary:hover,
.sa-pill.is-primary:hover,
.bg-blue-600:hover,
.bg-indigo-600:hover,
.bg-green-600:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.ghost-button,
.header-button,
.header-pill,
.sa-button,
.sa-pill,
.mobile-cta,
.language-pill {
    border-color: var(--line) !important;
    background: rgba(245, 247, 242, 0.045) !important;
    color: var(--text-main) !important;
}

.ghost-button:hover,
.header-pill:hover,
.sa-pill:hover,
.mobile-cta:hover,
.language-pill:hover,
.language-pill.is-active {
    border-color: rgba(94, 234, 212, 0.3) !important;
    background: rgba(94, 234, 212, 0.1) !important;
    color: var(--text-main) !important;
}

.accent-chip,
.accent-pill,
.metric-chip,
.info-chip {
    border-color: rgba(94, 234, 212, 0.26) !important;
    background: rgba(15, 118, 110, 0.13) !important;
    color: #d8fffa !important;
}

.stat-icon,
.soft-panel i,
.text-blue-600,
.text-indigo-600,
.text-green-600,
.text-emerald-600,
.text-purple-600,
.text-violet-600,
.text-red-600 {
    color: var(--accent-soft) !important;
}

.surface-input,
.field-input,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
select,
textarea {
    width: 100%;
    border: 1px solid var(--line) !important;
    background: rgba(8, 11, 10, 0.64) !important;
    color: var(--text-main) !important;
    border-radius: 14px !important;
    outline: none;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

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

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):focus,
select:focus,
textarea:focus,
.field-input:focus,
.surface-input:focus {
    border-color: rgba(94, 234, 212, 0.52) !important;
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.12) !important;
}

input[type="file"] {
    border: 1px solid var(--line) !important;
    background: rgba(8, 11, 10, 0.52) !important;
    color: var(--text-soft) !important;
    border-radius: 14px !important;
}

select option {
    background: #101412;
    color: var(--text-main);
}

.bg-white,
.bg-gray-50,
.bg-gray-100,
.bg-slate-50,
.bg-slate-100,
.bg-blue-50,
.bg-green-50,
.bg-emerald-50,
.bg-yellow-50,
.bg-purple-50,
.bg-indigo-50,
.bg-violet-50,
.bg-rose-50 {
    background-color: rgba(245, 247, 242, 0.06) !important;
}

.bg-blue-100,
.bg-green-100,
.bg-emerald-100,
.bg-yellow-100,
.bg-purple-100,
.bg-indigo-100,
.bg-violet-100,
.bg-gray-100 {
    background-color: rgba(245, 247, 242, 0.08) !important;
}

.bg-red-100 {
    background-color: rgba(248, 113, 113, 0.12) !important;
}

.text-gray-900,
.text-gray-800,
.text-slate-900,
.text-slate-800,
.text-blue-800,
.text-green-800,
.text-yellow-800,
.text-purple-800,
.text-indigo-800,
.text-violet-800,
.text-emerald-800 {
    color: var(--text-main) !important;
}

.text-gray-700,
.text-gray-600,
.text-slate-700,
.text-slate-600,
.text-blue-700,
.text-green-700,
.text-yellow-700,
.text-blue-600,
.text-green-600,
.text-yellow-600,
.text-purple-600,
.text-indigo-600,
.text-violet-600,
label {
    color: var(--text-soft) !important;
}

.text-gray-500,
.text-gray-400,
.text-slate-500,
.text-slate-400 {
    color: var(--text-faint) !important;
}

.border-gray-100,
.border-gray-200,
.border-gray-300,
.border-slate-200,
.border-slate-300,
.divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--line) !important;
}

.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl,
.rounded-\[24px\],
.rounded-\[28px\],
.rounded-\[30px\],
.rounded-\[32px\],
.rounded-\[34px\],
.rounded-\[38px\],
.rounded-\[40px\],
.rounded-\[42px\] {
    border-radius: 16px !important;
}

.shadow,
.shadow-lg,
.shadow-xl {
    box-shadow: var(--shadow-tight) !important;
}

table {
    color: var(--text-main);
}

thead,
.data-table thead,
.table-shell thead {
    background: rgba(245, 247, 242, 0.055) !important;
}

tbody,
.bg-white.divide-y {
    background: transparent !important;
}

tbody tr,
.data-table tbody tr,
.table-shell tbody tr {
    border-color: var(--line) !important;
}

tbody tr:hover,
.data-table tbody tr:hover,
.table-shell tbody tr:hover {
    background: rgba(94, 234, 212, 0.055) !important;
}

.modal-overlay {
    background: rgba(4, 7, 6, 0.78) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.role-pill-admin {
    background: rgba(248, 113, 113, 0.14) !important;
    color: #fecaca !important;
}

.role-pill-user {
    background: rgba(94, 234, 212, 0.14) !important;
    color: #ccfbf1 !important;
}

.empty-state,
.muted-copy,
.section-copy,
.body-copy,
.hero-copy {
    color: var(--text-soft) !important;
}

.hero-shell *,
.section-shell *,
.plan-shell *,
.auth-shell * {
    min-width: 0;
}

.hero-title-display {
    font-size: clamp(3rem, 7.5vw, 5.4rem) !important;
}

.section-title-display {
    font-size: clamp(2.35rem, 7vw, 3.7rem) !important;
}

.plan-title-display {
    font-size: clamp(2rem, 5vw, 2.75rem) !important;
}

.hero-actions-mobile a,
.hero-meta > *,
.mobile-header-cta {
    white-space: normal;
    overflow-wrap: anywhere;
}

body.auth-page {
    background: linear-gradient(180deg, #101412 0%, #0d0f0e 52%, #090b0a 100%) !important;
}

.auth-page .auth-shell {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.auth-page .auth-shell::before,
.auth-page .auth-panel::before,
.auth-page .auth-panel::after {
    display: none !important;
}

.auth-page .auth-panel {
    border: 1px solid var(--line) !important;
    background: rgba(245, 247, 242, 0.045) !important;
    box-shadow: none !important;
    border-radius: 24px !important;
}

.auth-page .side-rail {
    padding-left: 0 !important;
}

.auth-page .side-stack > .mt-8.grid .soft-panel,
.auth-page .side-stack > .mt-8.grid .accent-chip {
    border-width: 1px 0 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.app-shell {
    background: linear-gradient(180deg, #101412 0%, #0d0f0e 54%, #090b0a 100%) !important;
}

.app-shell .page-wrap,
.app-shell .dashboard-wrap {
    max-width: 1180px !important;
}

.app-shell .hero-shell {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

.app-shell .hero-shell::before,
.app-shell .hero-shell::after {
    display: none !important;
}

.app-shell .hero-shell .brand-display,
.app-shell .brand-display.text-4xl,
.app-shell .brand-display.text-3xl {
    font-size: clamp(1.55rem, 2.4vw, 2rem) !important;
    line-height: 1.12 !important;
}

.app-shell .panel-shell,
.app-shell .table-shell,
.app-shell .soft-stat,
.app-shell .modal-shell,
.app-shell .soft-note {
    background: rgba(245, 247, 242, 0.04) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
}

.app-shell .panel-shell::before,
.app-shell .panel-shell::after,
.app-shell .table-shell::before,
.app-shell .table-shell::after,
.app-shell .soft-stat::before,
.app-shell .soft-stat::after,
.app-shell .modal-shell::before,
.app-shell .modal-shell::after,
.app-shell .soft-note::before,
.app-shell .soft-note::after {
    display: none !important;
}

.app-shell .soft-stat {
    padding: 1rem !important;
}

.app-shell .panel-shell,
.app-shell .table-shell {
    padding: clamp(1rem, 2vw, 1.35rem) !important;
}

.app-shell .soft-stat .text-3xl,
.app-shell .panel-shell .text-3xl,
.app-shell .table-shell .text-3xl,
.app-shell .mobile-report-card .text-3xl {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
}

.app-shell .brand-display.text-2xl,
.app-shell .modal-shell .brand-display {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
}

.app-shell .stat-icon {
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 12px !important;
}

.app-shell .shortcut-card {
    transition: border-color 160ms ease, background-color 160ms ease !important;
}

.app-shell .shortcut-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: rgba(94, 234, 212, 0.28) !important;
    background: rgba(94, 234, 212, 0.065) !important;
}

.app-shell .empty-state .text-4xl,
.app-shell .empty-state i,
.app-shell .fa-users.text-4xl,
.app-shell .fa-layer-group.text-4xl {
    font-size: 1.75rem !important;
}

.mobile-cta.is-danger,
.bg-red-600,
.hover\:bg-red-700:hover {
    border-color: rgba(248, 113, 113, 0.28) !important;
    background: rgba(127, 29, 29, 0.5) !important;
    color: #fecaca !important;
}

.border-red-400,
.border-red-400\/30 {
    border-color: rgba(248, 113, 113, 0.34) !important;
}

.border-emerald-400\/30,
.border-green-400,
.border-green-400\/30 {
    border-color: rgba(134, 239, 172, 0.32) !important;
}

.border-amber-300\/30,
.border-yellow-400 {
    border-color: rgba(242, 199, 102, 0.34) !important;
}

.text-red-700,
.text-red-100 {
    color: #fecaca !important;
}

.text-emerald-100,
.text-green-700 {
    color: #dcfce7 !important;
}

.text-amber-100,
.text-yellow-700 {
    color: #fef3c7 !important;
}

i.text-blue-600,
i.text-indigo-600,
i.text-green-600,
i.text-emerald-600,
i.text-purple-600,
i.text-violet-600,
i.text-red-600,
.stat-icon i {
    color: var(--accent-soft) !important;
}

.swal2-popup {
    background: #111513 !important;
    color: var(--text-main) !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
}

.swal2-title,
.swal2-html-container {
    color: var(--text-main) !important;
}

.swal2-icon.swal2-warning {
    border-color: var(--warning) !important;
    color: var(--warning) !important;
}

.swal-confirm-button,
.swal-cancel-button {
    border-radius: 8px !important;
    padding: 0.8rem 1.1rem !important;
    font-weight: 700 !important;
}

.swal-confirm-button {
    border: 1px solid rgba(94, 234, 212, 0.38) !important;
    background: linear-gradient(135deg, #0f766e 0%, #2dd4bf 100%) !important;
    color: #04211d !important;
}

.swal-cancel-button {
    border: 1px solid rgba(248, 113, 113, 0.26) !important;
    background: rgba(127, 29, 29, 0.42) !important;
    color: #fecaca !important;
}

@media (max-width: 767px) {
    .hero-shell,
    .section-shell,
    .plan-shell,
    .auth-shell,
    .panel-shell,
    .table-shell,
    .modal-shell {
        border-radius: 18px !important;
    }

    .hero-title-display,
    .display-title {
        font-size: 2rem !important;
        line-height: 1.12 !important;
    }

    .section-title-display,
    .section-title {
        font-size: 1.62rem !important;
        line-height: 1.14 !important;
    }

    .plan-title-display,
    .plan-title {
        font-size: 1.42rem !important;
        line-height: 1.18 !important;
    }

    h1.brand-display,
    h2.brand-display,
    h3.brand-display,
    .text-7xl,
    .text-6xl,
    .text-5xl,
    .text-4xl,
    [class*="text-[2."],
    [class*="text-[3."],
    [class*="text-[4."],
    [class*="text-[5."],
    [class*="text-[6."],
    [class*="text-[7."] {
        font-size: 1.75rem !important;
        line-height: 1.14 !important;
    }

    .text-3xl {
        font-size: 1.38rem !important;
        line-height: 1.18 !important;
    }

    .text-2xl {
        font-size: 1.18rem !important;
        line-height: 1.22 !important;
    }

    .editorial-eyebrow,
    .eyebrow-copy {
        font-size: 0.68rem !important;
        letter-spacing: 0.1em !important;
    }

    .hero-actions-mobile,
    .hero-actions-mobile > *,
    .hero-meta,
    .hero-meta > * {
        width: 100%;
        max-width: 100%;
    }
}