/*
 * LunaXDigital Axis UI
 * Shared product language for admin, client, hub and authentication surfaces.
 */

:root {
    --axis-bg: #f4f5f7;
    --axis-surface: #ffffff;
    --axis-surface-2: #eef0f3;
    --axis-surface-3: #e6e9ee;
    --axis-line: #d6dae2;
    --axis-line-strong: #bcc3ce;
    --axis-ink: #15171b;
    --axis-muted: #66707f;
    --axis-faint: #8b94a2;
    --axis-admin: #5a55e7;
    --axis-admin-strong: #4540c9;
    --axis-client: #7647ed;
    --axis-client-strong: #6035d8;
    --axis-success: #078b68;
    --axis-warning: #b76a08;
    --axis-danger: #cf4259;
    --axis-info: #2d6fc7;
    --axis-sidebar: #17191e;
    --axis-sidebar-raised: #22252c;
    --axis-sidebar-line: #30343d;
    --axis-sidebar-ink: #f4f5f7;
    --axis-sidebar-muted: #9ca4b2;
    --axis-radius: 4px;
    --axis-shadow: 0 16px 38px -32px rgba(20, 24, 33, .42);
    --axis-shadow-strong: 0 26px 60px -38px rgba(20, 24, 33, .48);
}

html[data-theme="dark"] {
    --axis-bg: #101216;
    --axis-surface: #171a20;
    --axis-surface-2: #1e2229;
    --axis-surface-3: #282d36;
    --axis-line: #30353f;
    --axis-line-strong: #424955;
    --axis-ink: #f2f4f7;
    --axis-muted: #a7afbb;
    --axis-faint: #77808d;
    --axis-admin: #8b86ff;
    --axis-admin-strong: #746ff0;
    --axis-client: #a78bfa;
    --axis-client-strong: #8b5cf6;
    --axis-success: #35bd91;
    --axis-warning: #e1a347;
    --axis-danger: #ef7284;
    --axis-info: #6ca0e6;
    --axis-sidebar: #0c0e12;
    --axis-sidebar-raised: #171a20;
    --axis-sidebar-line: #262a32;
    --axis-sidebar-ink: #f5f6f8;
    --axis-sidebar-muted: #959daa;
    --axis-shadow: 0 18px 42px -30px rgba(0, 0, 0, .72);
    --axis-shadow-strong: 0 30px 70px -38px rgba(0, 0, 0, .84);
}

html,
body,
button,
input,
select,
textarea {
    letter-spacing: 0 !important;
}

body.surface-admin,
body.surface-client {
    --bg-main: var(--axis-bg);
    --bg-card: var(--axis-surface);
    --bg-subtle: var(--axis-surface-2);
    --border-color: var(--axis-line);
    --border-strong: var(--axis-line-strong);
    --text-main: var(--axis-ink);
    --text-muted: var(--axis-muted);
    --text-faint: var(--axis-faint);
    --success: var(--axis-success);
    --warning: var(--axis-warning);
    --danger: var(--axis-danger);
    --info: var(--axis-info);
    --radius: var(--axis-radius);
    --radius-sm: 3px;
    --shadow-sm: none;
    --shadow-md: var(--axis-shadow);
    --shadow-lg: var(--axis-shadow-strong);
    min-height: 100dvh;
    background: var(--axis-bg) !important;
    background-image: none !important;
    color: var(--axis-ink);
    font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}

body.surface-admin {
    --axis-accent: var(--axis-admin);
    --axis-accent-strong: var(--axis-admin-strong);
}

body.surface-client {
    --axis-accent: var(--axis-client);
    --axis-accent-strong: var(--axis-client-strong);
}

body.surface-admin,
body.surface-client {
    --primary: var(--axis-accent);
    --primary-hover: var(--axis-accent-strong);
    --primary-2: var(--axis-accent);
    --primary-soft: color-mix(in srgb, var(--axis-accent) 10%, transparent);
    --primary-glow: color-mix(in srgb, var(--axis-accent) 28%, transparent);
    --grad: var(--axis-accent);
}

.surface-admin .lxd-aurora,
.surface-client .px-spot,
.surface-client .px-grid {
    display: none !important;
}

/* Application shell */
.surface-admin .sidebar,
.surface-client .sidebar {
    width: 252px !important;
    flex: 0 0 252px !important;
    height: 100dvh;
    padding: 14px 12px max(14px, env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
    position: sticky;
    top: 0;
    overflow-y: auto;
    background: var(--axis-sidebar) !important;
    border: 0 !important;
    border-right: 1px solid var(--axis-sidebar-line) !important;
    box-shadow: none !important;
}

html[data-theme="light"] body.surface-admin .sidebar,
html[data-theme="dark"] body.surface-admin .sidebar,
html[data-theme="light"] body.surface-client .sidebar,
html[data-theme="dark"] body.surface-client .sidebar {
    background: var(--axis-sidebar) !important;
    background-image: none !important;
    border-right-color: var(--axis-sidebar-line) !important;
}

.surface-admin .main-content,
.surface-client .main-content {
    width: calc(100% - 252px) !important;
    min-width: 0;
    min-height: 100dvh;
    margin-left: 0 !important;
    padding: 24px 32px 36px !important;
    overflow-x: clip;
    background: var(--axis-bg) !important;
}

.surface-admin .sidebar-close,
.surface-client .sidebar-close {
    color: var(--axis-sidebar-ink) !important;
    background: var(--axis-sidebar-raised) !important;
    border-color: var(--axis-sidebar-line) !important;
}

.surface-admin .cc-brand {
    min-height: 66px !important;
    margin: 0 0 4px !important;
    padding: 8px 8px 15px !important;
    justify-content: flex-start !important;
    border-bottom: 1px solid var(--axis-sidebar-line) !important;
}

.surface-admin .cc-brand::after {
    display: none !important;
}

.surface-admin .admin-brand-logo {
    height: 36px !important;
    max-width: 164px !important;
}

.surface-admin .admin-brand-on-light {
    display: none !important;
}

.surface-admin .admin-brand-on-dark {
    display: block !important;
}

.surface-client .client-identity {
    min-height: 66px;
    margin: 0 0 4px !important;
    padding: 7px 6px 15px !important;
    border-bottom-color: var(--axis-sidebar-line) !important;
}

.surface-client .client-identity > div:first-child {
    width: 40px !important;
    height: 40px !important;
    border-color: var(--axis-sidebar-line) !important;
    background: #fff !important;
}

.surface-client .client-identity > div:nth-child(2) > div:first-child {
    color: var(--axis-sidebar-ink) !important;
    font-size: 13px !important;
}

.surface-client .client-identity > div:nth-child(2) > div:not(:first-child) {
    color: var(--axis-sidebar-muted) !important;
}

.surface-admin .sidebar-section-title,
.surface-client .sidebar-section-title {
    min-height: 28px;
    padding: 10px 10px 4px !important;
    color: #6f7784 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
}

.surface-admin .sidebar-section-title::after,
.surface-client .sidebar-section-title::after {
    background: var(--axis-sidebar-line) !important;
}

.surface-admin .sidebar-menu,
.surface-client .sidebar-menu {
    gap: 2px !important;
}

.surface-admin .sidebar-link,
.surface-client .sidebar-link {
    min-height: 39px !important;
    padding: 8px 10px !important;
    gap: 10px !important;
    border: 1px solid transparent;
    border-radius: var(--rc)!important;
    color: var(--axis-sidebar-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
}

.surface-admin .sidebar-link i,
.surface-client .sidebar-link i {
    width: 20px !important;
    color: #747d8c !important;
    font-size: 13px !important;
}

.surface-admin .sidebar-link:hover,
.surface-client .sidebar-link:hover {
    color: var(--axis-sidebar-ink) !important;
    background: var(--axis-sidebar-raised) !important;
    border-color: var(--axis-sidebar-line) !important;
}

.surface-admin .sidebar-link.active,
.surface-client .sidebar-link.active {
    color: #fff !important;
    background: var(--axis-accent) !important;
    border-color: color-mix(in srgb, var(--axis-accent) 78%, #fff) !important;
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, .78) !important;
}

html[data-theme="light"] body.surface-admin .sidebar-link.active,
html[data-theme="dark"] body.surface-admin .sidebar-link.active,
html[data-theme="light"] body.surface-client .sidebar-link.active,
html[data-theme="dark"] body.surface-client .sidebar-link.active {
    color: #fff !important;
    background: var(--axis-accent) !important;
    background-image: none !important;
    border-color: color-mix(in srgb, var(--axis-accent) 78%, #fff) !important;
    border-radius: var(--rc)!important;
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, .78) !important;
}

.surface-admin .sidebar-link:hover i,
.surface-client .sidebar-link:hover i,
.surface-admin .sidebar-link.active i,
.surface-client .sidebar-link.active i {
    color: currentColor !important;
}

.surface-admin .cc-nav-glyph,
.surface-client .cc-nav-glyph {
    width: 22px !important;
    height: 22px !important;
    padding: 2px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    stroke: currentColor !important;
}

.surface-admin .cc-catdot {
    width: 7px !important;
    height: 7px !important;
    border-radius: var(--rc)!important;
}

.surface-admin .sidebar-account,
.surface-client .sidebar > div:last-child {
    border-top-color: var(--axis-sidebar-line) !important;
}

.surface-admin .sidebar-account-link {
    border-color: transparent !important;
}

.surface-admin .sidebar-account-link:hover {
    background: var(--axis-sidebar-raised) !important;
    border-color: var(--axis-sidebar-line) !important;
}

.surface-admin .sidebar-account-link > div:nth-child(2) > div:first-child {
    color: var(--axis-sidebar-ink) !important;
}

.surface-admin .sidebar-account-link > div:nth-child(2) > div:last-child {
    color: var(--axis-sidebar-muted) !important;
}

.surface-admin .theme-toggle,
.surface-client .theme-toggle {
    color: var(--axis-sidebar-ink) !important;
    background: var(--axis-sidebar-raised) !important;
    border-color: var(--axis-sidebar-line) !important;
}

.surface-client .portal-tools {
    border-color: var(--axis-sidebar-line) !important;
}

.surface-client .portal-tools .language-picker-trigger {
    color: var(--axis-sidebar-ink) !important;
    background: var(--axis-sidebar-raised) !important;
    border-color: var(--axis-sidebar-line) !important;
}

.surface-client .portal-tools .language-picker-menu {
    background: var(--axis-sidebar-raised) !important;
    border-color: var(--axis-sidebar-line) !important;
}

.surface-client .portal-tools .language-picker-menu a {
    color: var(--axis-sidebar-muted) !important;
}

.surface-client .portal-tools .language-picker-menu a:hover,
.surface-client .portal-tools .language-picker-menu a.active {
    color: var(--axis-sidebar-ink) !important;
    background: color-mix(in srgb, var(--axis-accent) 18%, transparent) !important;
}

/* Workspace rail */









/* Headers and type */
.surface-admin .page-header,
.surface-client .page-header,
.surface-admin .overview-head,
.surface-client .overview-head {
    min-height: 0 !important;
    margin: 0 0 20px !important;
    padding: 0 0 17px !important;
    align-items: flex-end !important;
    border-bottom: 1px solid var(--axis-line);
}

.surface-admin .page-title,
.surface-client .page-title,
.surface-admin .page-hero-title,
.surface-client .page-hero-title,
.surface-admin .overview-title h1,
.surface-client .overview-title h1 {
    color: var(--axis-ink) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

.surface-admin h2,
.surface-client h2 {
    color: var(--axis-ink);
    font-size: 18px !important;
    letter-spacing: 0 !important;
}

.surface-admin h3,
.surface-client h3 {
    color: var(--axis-ink);
    font-size: 14px !important;
    letter-spacing: 0 !important;
}

.surface-admin .subtitle,
.surface-client .subtitle,
.surface-admin .page-hero-text,
.surface-client .page-hero-text {
    max-width: 760px;
    color: var(--axis-muted) !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
}

.surface-admin .page-kicker,
.surface-client .page-kicker,
.surface-admin .page-hero-eyebrow,
.surface-client .page-hero-eyebrow,
.surface-admin .client-page-kicker,
.surface-client .client-page-kicker {
    color: var(--axis-accent) !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
}

.surface-admin .page-hero,
.surface-client .page-hero {
    min-height: 0 !important;
    margin: 0 0 20px !important;
    padding: 0 0 17px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--axis-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.surface-admin .page-hero-icon,
.surface-client .page-hero-icon,
.surface-admin .client-page-icon,
.surface-client .client-page-icon {
    width: 38px !important;
    height: 38px !important;
    color: var(--axis-accent) !important;
    background: color-mix(in srgb, var(--axis-accent) 9%, var(--axis-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--axis-accent) 22%, var(--axis-line)) !important;
    border-radius: var(--rc)!important;
    box-shadow: none !important;
}

/* Panels and repeated items */
.surface-admin .premium-card,
.surface-client .premium-card,
.surface-admin .overview-panel,
.surface-client .overview-panel,
.surface-admin .table-wrap,
.surface-client .table-wrap,
.surface-admin .stat-card,
.surface-client .stat-card,
.surface-admin .kpi-card,
.surface-client .kpi-card,
.surface-admin .cmd-attention,
.surface-client .cmd-attention {
    color: var(--axis-ink);
    background: var(--axis-surface) !important;
    border: 1px solid var(--axis-line) !important;
    border-radius: var(--axis-radius) !important;
    box-shadow: none !important;
}

.surface-admin .premium-card,
.surface-client .premium-card {
    padding: 18px !important;
}

.surface-admin .premium-card:hover,
.surface-client .premium-card:hover,
.surface-admin .stat-card:hover,
.surface-client .stat-card:hover {
    transform: none !important;
    border-color: var(--axis-line-strong) !important;
    box-shadow: var(--axis-shadow) !important;
}

.surface-admin .premium-card > [style*="position:absolute"][style*="border-radius:50%"],
.surface-client .premium-card > [style*="position:absolute"][style*="border-radius:50%"] {
    display: none !important;
}

.surface-admin .stats-grid,
.surface-client .stats-grid,
.surface-admin .kpi-grid,
.surface-client .kpi-grid {
    gap: 10px !important;
}

.surface-admin .stat-card,
.surface-client .stat-card,
.surface-admin .kpi-card,
.surface-client .kpi-card {
    min-height: 112px;
    padding: 16px !important;
    overflow: hidden;
}

.surface-admin .stat-card::before,
.surface-client .stat-card::before {
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    width: 3px !important;
    height: 100% !important;
    background: var(--axis-accent) !important;
}

.surface-admin .stat-card .icon,
.surface-client .stat-card .icon,
.surface-admin .kpi-icon,
.surface-client .kpi-icon,
.surface-admin .metric-icon,
.surface-client .metric-icon {
    width: 32px !important;
    height: 32px !important;
    color: var(--axis-accent) !important;
    background: color-mix(in srgb, var(--axis-accent) 9%, var(--axis-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--axis-accent) 20%, var(--axis-line)) !important;
    border-radius: var(--rc)!important;
    box-shadow: none !important;
}

.surface-admin .stat-card .value,
.surface-client .stat-card .value,
.surface-admin .kpi-value,
.surface-client .kpi-value {
    color: var(--axis-ink) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

.surface-admin .stat-card .label,
.surface-client .stat-card .label,
.surface-admin .kpi-label,
.surface-client .kpi-label {
    color: var(--axis-muted) !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
}

.surface-admin .panel-head,
.surface-client .panel-head {
    min-height: 52px;
    padding: 13px 16px !important;
    background: var(--axis-surface) !important;
    border-bottom-color: var(--axis-line) !important;
}

.surface-admin .panel-title,
.surface-client .panel-title {
    color: var(--axis-ink) !important;
    font-size: 13px !important;
}

.surface-admin .panel-title i,
.surface-client .panel-title i {
    color: var(--axis-accent) !important;
}

/* Buttons */
.surface-admin :is(.btn-primary, .btn-secondary, .btn-line, .btn-ghost, .btn-danger),
.surface-client :is(.btn-primary, .btn-secondary, .btn-line, .btn-ghost, .btn-danger) {
    min-height: 38px !important;
    padding: 0 13px !important;
    gap: 8px !important;
    border-radius: var(--rc)!important;
    box-shadow: none !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    transform: none !important;
}

.surface-admin .btn-primary,
.surface-client .btn-primary {
    color: #fff !important;
    background: var(--axis-accent) !important;
    border: 1px solid var(--axis-accent) !important;
}

.surface-admin .btn-primary:hover,
.surface-client .btn-primary:hover {
    background: var(--axis-accent-strong) !important;
    border-color: var(--axis-accent-strong) !important;
}

.surface-admin :is(.btn-secondary, .btn-line, .btn-ghost),
.surface-client :is(.btn-secondary, .btn-line, .btn-ghost) {
    color: var(--axis-ink) !important;
    background: var(--axis-surface) !important;
    border: 1px solid var(--axis-line) !important;
}

.surface-admin :is(.btn-secondary, .btn-line, .btn-ghost):hover,
.surface-client :is(.btn-secondary, .btn-line, .btn-ghost):hover {
    color: var(--axis-accent) !important;
    background: var(--axis-surface-2) !important;
    border-color: var(--axis-accent) !important;
}

.surface-admin .btn-danger,
.surface-client .btn-danger {
    color: #fff !important;
    background: var(--axis-danger) !important;
    border: 1px solid var(--axis-danger) !important;
}

.surface-admin :is(.btn-primary, .btn-secondary, .btn-line, .btn-ghost, .btn-danger) > i,
.surface-client :is(.btn-primary, .btn-secondary, .btn-line, .btn-ghost, .btn-danger) > i {
    width: auto !important;
    height: auto !important;
    color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
}

/* Forms */
.surface-admin .main-content :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.surface-client .main-content :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    color: var(--axis-ink) !important;
    background: var(--axis-surface) !important;
    border: 1px solid var(--axis-line) !important;
    border-radius: var(--rc)!important;
    box-shadow: none !important;
    font-size: 12.5px !important;
}

.surface-admin .main-content :is(input, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.surface-client .main-content :is(input, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    min-height: 40px;
}

.surface-admin .main-content :is(input, select, textarea):focus,
.surface-client .main-content :is(input, select, textarea):focus {
    outline: none !important;
    border-color: var(--axis-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--axis-accent) 12%, transparent) !important;
}

.surface-admin .main-content label,
.surface-client .main-content label {
    color: var(--axis-muted);
    font-size: 11px;
    font-weight: 750;
}

/* Tables */
.surface-admin .table-wrap,
.surface-client .table-wrap,
.surface-admin .premium-card > div[style*="overflow-x"],
.surface-client .premium-card > div[style*="overflow-x"] {
    overflow-x: auto;
    border-color: var(--axis-line) !important;
}

.surface-admin :is(.table, .premium-card table),
.surface-client :is(.table, .premium-card table) {
    color: var(--axis-ink) !important;
    background: var(--axis-surface) !important;
}

.surface-admin :is(.table, .premium-card table) thead th,
.surface-client :is(.table, .premium-card table) thead th {
    height: 42px;
    padding: 10px 14px !important;
    color: var(--axis-muted) !important;
    background: var(--axis-surface-2) !important;
    border-bottom: 1px solid var(--axis-line) !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

.surface-admin :is(.table, .premium-card table) tbody td,
.surface-client :is(.table, .premium-card table) tbody td {
    padding: 12px 14px !important;
    color: var(--axis-ink);
    border-bottom: 1px solid var(--axis-line) !important;
    font-size: 12.5px !important;
}

.surface-admin :is(.table, .premium-card table) tbody tr:hover,
.surface-client :is(.table, .premium-card table) tbody tr:hover {
    background: color-mix(in srgb, var(--axis-accent) 6%, var(--axis-surface)) !important;
}

/* Status and guidance */
.surface-admin .chip,
.surface-client .chip,
.surface-admin [class*="status-"],
.surface-client [class*="status-"],
.surface-admin .status,
.surface-client .status {
    border-radius: var(--rc)!important;
    box-shadow: none !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

.surface-admin .client-guide-strip,
.surface-client .client-guide-strip {
    margin: 0 0 18px !important;
    padding: 14px 16px !important;
    gap: 12px !important;
    color: var(--axis-ink) !important;
    background: var(--axis-surface) !important;
    border: 1px solid var(--axis-line) !important;
    border-left: 3px solid var(--axis-accent) !important;
    border-radius: var(--rc)!important;
    box-shadow: none !important;
}

.surface-admin .client-guide-icon,
.surface-client .client-guide-icon {
    width: 32px !important;
    height: 32px !important;
    color: var(--axis-accent) !important;
    background: color-mix(in srgb, var(--axis-accent) 9%, var(--axis-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--axis-accent) 20%, var(--axis-line)) !important;
    border-radius: var(--rc)!important;
}

.surface-admin .client-guide-copy strong,
.surface-client .client-guide-copy strong {
    color: var(--axis-ink) !important;
    font-size: 12.5px !important;
}

.surface-admin .client-guide-copy span,
.surface-client .client-guide-copy span {
    color: var(--axis-muted) !important;
    font-size: 11.5px !important;
}

.surface-admin .alert,
.surface-client .alert,
.surface-admin [class*="-alert"],
.surface-client [class*="-alert"] {
    border-radius: var(--rc)!important;
    box-shadow: none !important;
}

.surface-admin .empty-state,
.surface-client .empty-state {
    min-height: 190px;
    padding: 34px 20px !important;
    color: var(--axis-muted) !important;
    background: transparent !important;
    border: 1px dashed var(--axis-line-strong) !important;
    border-radius: var(--rc)!important;
}

.surface-admin .empty-state > i,
.surface-client .empty-state > i {
    color: var(--axis-accent) !important;
}

/* Pending actions dialog */
.surface-admin #reminders-overlay,
.surface-client #reminders-overlay {
    padding: 18px !important;
    background: rgba(7, 9, 13, .72) !important;
    backdrop-filter: blur(8px) !important;
}

.surface-admin #reminders-modal,
.surface-client #reminders-modal {
    width: min(600px, 100%) !important;
    max-width: 600px !important;
    max-height: min(82dvh, 760px) !important;
    color: var(--axis-ink) !important;
    background: var(--axis-surface) !important;
    border: 1px solid var(--axis-line) !important;
    border-radius: var(--rc)!important;
    box-shadow: 0 34px 90px -34px rgba(0, 0, 0, .78) !important;
}

.surface-admin #reminders-modal .reminders-head,
.surface-client #reminders-modal .reminders-head {
    padding: 20px 22px !important;
    color: var(--axis-ink) !important;
    background: var(--axis-surface) !important;
    border-top: 3px solid var(--axis-accent);
    border-bottom: 1px solid var(--axis-line);
}

.surface-admin #reminders-modal .reminders-head button,
.surface-client #reminders-modal .reminders-head button {
    width: 36px !important;
    height: 36px !important;
    color: var(--axis-ink) !important;
    background: var(--axis-surface-2) !important;
    border: 1px solid var(--axis-line) !important;
    border-radius: var(--rc)!important;
}

.surface-admin #reminders-modal .reminders-list,
.surface-client #reminders-modal .reminders-list {
    padding: 16px 18px !important;
}

.surface-admin #reminders-modal .reminders-item,
.surface-client #reminders-modal .reminders-item {
    padding: 13px 14px !important;
    color: var(--axis-ink) !important;
    background: var(--axis-surface-2) !important;
    border: 1px solid var(--axis-line) !important;
    border-left: 3px solid var(--reminder-tone, var(--axis-accent)) !important;
    border-radius: var(--rc)!important;
}

.surface-admin #reminders-modal .reminders-item-icon,
.surface-client #reminders-modal .reminders-item-icon {
    width: 38px !important;
    height: 38px !important;
    color: var(--reminder-tone, var(--axis-accent)) !important;
    background: var(--axis-surface) !important;
    border: 1px solid var(--axis-line) !important;
    border-radius: var(--rc)!important;
    font-size: 19px !important;
}

.surface-admin #reminders-modal .reminders-item-title,
.surface-client #reminders-modal .reminders-item-title {
    color: var(--axis-ink) !important;
    font-size: 12.5px !important;
}

.surface-admin #reminders-modal .reminders-item-text,
.surface-client #reminders-modal .reminders-item-text {
    color: var(--axis-muted) !important;
    font-size: 11.5px !important;
}

/* Eylem düğmesi HER ZAMAN marka moru olur. Önceden --reminder-tone kullanıyordu
   ve "ödeme bekliyor" gibi turuncu tonlu satırlarda turuncu bir düğme çıkıyordu;
   panelin hiçbir yerinde turuncu düğme yok. Ton yalnızca sol şeritte ve ikonda
   kalır — satırları göz taramasında ayırt etmeye yarıyor. */
.surface-admin #reminders-modal .reminders-item-cta,
.surface-client #reminders-modal .reminders-item-cta {
    min-height: 34px;
    padding: 0 11px !important;
    display: inline-flex;
    align-items: center;
    color: #fff !important;
    background: var(--axis-accent) !important;
    border-radius: var(--rc)!important;
    font-size: 10.5px !important;
}

.surface-admin #reminders-modal .reminders-footer,
.surface-client #reminders-modal .reminders-footer {
    padding: 13px 18px !important;
    color: var(--axis-muted) !important;
    background: var(--axis-surface-2) !important;
    border-top: 1px solid var(--axis-line) !important;
}

.surface-admin #reminders-modal .reminders-footer button,
.surface-client #reminders-modal .reminders-footer button {
    min-height: 36px;
    color: var(--axis-ink) !important;
    background: var(--axis-surface) !important;
    border: 1px solid var(--axis-line) !important;
    border-radius: var(--rc)!important;
}

/* Common custom page families */
.surface-admin .order-metrics,
.surface-client .order-metrics,
.surface-admin .ops-strip,
.surface-client .ops-strip {
    gap: 8px !important;
}

.surface-admin .order-metric,
.surface-client .order-metric,
.surface-admin .op-item,
.surface-client .op-item,
.surface-admin .cmd-card,
.surface-client .cmd-card {
    color: var(--axis-ink) !important;
    background: var(--axis-surface) !important;
    border: 1px solid var(--axis-line) !important;
    border-radius: var(--rc)!important;
    box-shadow: none !important;
    transform: none !important;
}

.surface-admin .order-metric:hover,
.surface-client .order-metric:hover,
.surface-admin .op-item:hover,
.surface-client .op-item:hover,
.surface-admin .cmd-card:hover,
.surface-client .cmd-card:hover {
    background: var(--axis-surface-2) !important;
    border-color: var(--axis-accent) !important;
}

.surface-admin .cmd-attention,
.surface-client .cmd-attention {
    padding: 16px !important;
}

.surface-admin .cmd-head > i,
.surface-client .cmd-head > i,
.surface-admin .overview-date i,
.surface-client .overview-date i {
    color: var(--axis-accent) !important;
}

.surface-admin .cmd-ic,
.surface-client .cmd-ic {
    width: 36px !important;
    height: 36px !important;
    color: var(--axis-accent) !important;
    background: color-mix(in srgb, var(--axis-accent) 9%, var(--axis-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--axis-accent) 20%, var(--axis-line)) !important;
    border-radius: var(--rc)!important;
}

.surface-admin .rate-pill,
.surface-client .rate-pill,
.surface-admin .secondary-link,
.surface-client .secondary-link {
    color: var(--axis-ink) !important;
    background: var(--axis-surface-2) !important;
    border-color: var(--axis-line) !important;
    border-radius: var(--rc)!important;
}

/* KALDIRILDI (30.07.2026) — satır içi stil METNİNE göre eşleşen iki kural vardı:
 *     [style*="background:#7c3aed"] { background: var(--axis-accent) !important }
 *     [style*="color:#7c3aed"]      { color:      var(--axis-accent) !important }
 *
 * Yaptıkları tek iş #7c3aed'i neredeyse aynı olan --axis-accent'e (#6f43e7)
 * çevirmekti. Buna karşılık:
 *   · Satır içinde hem zemin hem yazı moru olan kutularda ikisi de aynı renge
 *     düşüyor, yazı görünmez oluyordu (müşteri portalındaki proforma bandı).
 *   · Eşleşme metin tabanlı olduğu için hangi elemanı vurdukları öngörülemiyor;
 *     tarayıcı denetçisinde kuralı bulmak neredeyse imkânsızdı.
 *   · Bir elemanın rengini düzeltmek için blade'deki hex'i değiştirmek yetmiyordu.
 *
 * Yeni yaklaşım: marka rengi gerekiyorsa blade'de var(--primary) ya da .chip-*
 * gibi sınıflar kullanılır; satır içi hex bırakılırsa olduğu gibi basılır.
 */

/* Legacy page families normalized to the Axis component language */
.surface-admin :is(
    .pp-stat, .ag-stat, .em-stat, .ms-stat, .inv-stat, .idx-stat,
    .ik-stat, .rk-stat, .mm-stat, .sp-stat, .tk-stat, .order-stat
),
.surface-client :is(
    .pp-stat, .ag-stat, .em-stat, .ms-stat, .inv-stat, .idx-stat,
    .ik-stat, .rk-stat, .mm-stat, .sp-stat, .tk-stat, .order-stat
) {
    min-height: 98px !important;
    padding: 15px 16px !important;
    color: var(--axis-ink) !important;
    background: var(--axis-surface) !important;
    border: 1px solid var(--axis-line) !important;
    border-radius: var(--rc)!important;
    box-shadow: none !important;
    transform: none !important;
}

.surface-admin :is(
    .pp-stat, .ag-stat, .em-stat, .ms-stat, .inv-stat, .idx-stat,
    .ik-stat, .rk-stat, .mm-stat, .sp-stat, .tk-stat, .order-stat
)::after,
.surface-client :is(
    .pp-stat, .ag-stat, .em-stat, .ms-stat, .inv-stat, .idx-stat,
    .ik-stat, .rk-stat, .mm-stat, .sp-stat, .tk-stat, .order-stat
)::after {
    display: none !important;
}

.surface-admin :is(
    .pp-stat, .ag-stat, .em-stat, .ms-stat, .inv-stat, .idx-stat,
    .ik-stat, .rk-stat, .mm-stat, .sp-stat, .tk-stat, .order-stat
)::before,
.surface-client :is(
    .pp-stat, .ag-stat, .em-stat, .ms-stat, .inv-stat, .idx-stat,
    .ik-stat, .rk-stat, .mm-stat, .sp-stat, .tk-stat, .order-stat
)::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    width: 3px !important;
    height: 100% !important;
    background: var(--axis-accent) !important;
    animation: none !important;
}

.surface-admin :is(
    .pp-stat, .ag-stat, .em-stat, .ms-stat, .inv-stat, .idx-stat,
    .ik-stat, .rk-stat, .mm-stat, .sp-stat, .tk-stat, .order-stat
) .ic,
.surface-client :is(
    .pp-stat, .ag-stat, .em-stat, .ms-stat, .inv-stat, .idx-stat,
    .ik-stat, .rk-stat, .mm-stat, .sp-stat, .tk-stat, .order-stat
) .ic {
    width: 38px !important;
    height: 38px !important;
    color: var(--axis-accent) !important;
    background: color-mix(in srgb, var(--axis-accent) 9%, var(--axis-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--axis-accent) 20%, var(--axis-line)) !important;
    border-radius: var(--rc)!important;
    box-shadow: none !important;
}

.surface-admin :is(
    .pp-card, .ag-card, .em-card, .ms-card, .idx-table-card, .ik-card,
    .sc-card, .sig-card, .svc-card, .sys-card, .tk-card, .tm-card, .vs-card
),
.surface-client :is(
    .pp-card, .ag-card, .em-card, .ms-card, .idx-table-card, .ik-card,
    .sc-card, .sig-card, .svc-card, .sys-card, .tk-card, .tm-card, .vs-card
) {
    color: var(--axis-ink) !important;
    background: var(--axis-surface) !important;
    border: 1px solid var(--axis-line) !important;
    border-radius: var(--rc)!important;
    box-shadow: none !important;
    transform: none !important;
}

.surface-admin :is(
    .pp-card, .ag-card, .em-card, .ms-card, .idx-table-card, .ik-card,
    .sc-card, .sig-card, .svc-card, .sys-card, .tk-card, .tm-card, .vs-card
)::before,
.surface-client :is(
    .pp-card, .ag-card, .em-card, .ms-card, .idx-table-card, .ik-card,
    .sc-card, .sig-card, .svc-card, .sys-card, .tk-card, .tm-card, .vs-card
)::before {
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    width: 3px !important;
    height: 100% !important;
    background: var(--axis-accent) !important;
    opacity: 1 !important;
}

.surface-admin :is(
    .pp-card, .ag-card, .em-card, .ms-card, .idx-table-card, .ik-card,
    .sc-card, .sig-card, .svc-card, .sys-card, .tk-card, .tm-card, .vs-card
):hover,
.surface-client :is(
    .pp-card, .ag-card, .em-card, .ms-card, .idx-table-card, .ik-card,
    .sc-card, .sig-card, .svc-card, .sys-card, .tk-card, .tm-card, .vs-card
):hover {
    background: var(--axis-surface-2) !important;
    border-color: var(--axis-accent) !important;
    box-shadow: var(--axis-shadow) !important;
    transform: none !important;
}

.surface-admin :is(.pp-orb, .ag-orb, .em-orb, .ms-orb, .idx-orb, .ik-orb, .tm-orb, .vg-orb),
.surface-client :is(.pp-orb, .ag-orb, .em-orb, .ms-orb, .idx-orb, .ik-orb, .tm-orb, .vg-orb) {
    width: 42px !important;
    height: 42px !important;
    color: var(--axis-accent) !important;
    background: color-mix(in srgb, var(--axis-accent) 9%, var(--axis-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--axis-accent) 20%, var(--axis-line)) !important;
    border-radius: var(--rc)!important;
    box-shadow: none !important;
}

.surface-admin :is(.pp-orb, .ag-orb, .em-orb, .ms-orb, .idx-orb, .ik-orb, .tm-orb, .vg-orb)::before,
.surface-client :is(.pp-orb, .ag-orb, .em-orb, .ms-orb, .idx-orb, .ik-orb, .tm-orb, .vg-orb)::before {
    display: none !important;
}

.surface-admin :is(.pp-pill, .ag-pill, .em-pill, .ms-pill),
.surface-client :is(.pp-pill, .ag-pill, .em-pill, .ms-pill) {
    min-height: 56px;
    padding: 10px 11px !important;
    color: var(--axis-ink) !important;
    background: var(--axis-surface-2) !important;
    border: 1px solid var(--axis-line) !important;
    border-radius: var(--rc)!important;
    box-shadow: none !important;
}

.surface-admin :is(.pp-pill, .ag-pill, .em-pill, .ms-pill) .pi,
.surface-client :is(.pp-pill, .ag-pill, .em-pill, .ms-pill) .pi {
    width: 30px !important;
    height: 30px !important;
    color: var(--axis-accent) !important;
    background: color-mix(in srgb, var(--axis-accent) 9%, var(--axis-surface)) !important;
    border-radius: var(--rc)!important;
}

.surface-admin :is(.pp-badge, .ag-badge, .ms-badge, .tm-badge),
.surface-client :is(.pp-badge, .ag-badge, .ms-badge, .tm-badge) {
    padding: 5px 8px !important;
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent) !important;
    border-radius: var(--rc)!important;
    box-shadow: none !important;
    font-size: 9.5px !important;
    letter-spacing: 0 !important;
}

.surface-admin :is(.pp-btn, .ag-btn, .em-btn, .ms-btn, .tm-btn),
.surface-client :is(.pp-btn, .ag-btn, .em-btn, .ms-btn, .tm-btn) {
    min-height: 36px !important;
    padding: 0 11px !important;
    color: var(--axis-ink) !important;
    background: var(--axis-surface) !important;
    border: 1px solid var(--axis-line) !important;
    border-radius: var(--rc)!important;
    box-shadow: none !important;
    transform: none !important;
}

.surface-admin :is(.pp-btn, .ag-btn, .em-btn, .ms-btn, .tm-btn).primary,
.surface-client :is(.pp-btn, .ag-btn, .em-btn, .ms-btn, .tm-btn).primary {
    color: #fff !important;
    background: var(--axis-accent) !important;
    border-color: var(--axis-accent) !important;
}

.surface-admin :is(.pp-btn, .ag-btn, .em-btn, .ms-btn, .tm-btn):hover,
.surface-client :is(.pp-btn, .ag-btn, .em-btn, .ms-btn, .tm-btn):hover {
    color: var(--axis-accent) !important;
    background: var(--axis-surface-2) !important;
    border-color: var(--axis-accent) !important;
}

.surface-admin .premium-card [style*="width:52px"][style*="background:linear-gradient"],
.surface-client .premium-card [style*="width:52px"][style*="background:linear-gradient"] {
    color: var(--axis-accent) !important;
    background: color-mix(in srgb, var(--axis-accent) 9%, var(--axis-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--axis-accent) 20%, var(--axis-line)) !important;
    box-shadow: none !important;
}

.surface-admin [style*="width:74px"][style*="background:linear-gradient"],
.surface-client [style*="width:74px"][style*="background:linear-gradient"],
.surface-admin .tcf-empty-orb,
.surface-client .tcf-empty-orb {
    color: var(--axis-accent) !important;
    background: color-mix(in srgb, var(--axis-accent) 9%, var(--axis-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--axis-accent) 20%, var(--axis-line)) !important;
    border-radius: var(--rc)!important;
    box-shadow: none !important;
}

/* Account and security settings */
.surface-client .settings-grid {
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.surface-client .security-card {
    padding: 18px !important;
    display: flex;
    flex-direction: column;
    border-left: 3px solid var(--axis-accent) !important;
}

.surface-client .security-card.is-enabled {
    border-left-color: var(--axis-success) !important;
}

.surface-client .security-card-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--axis-line);
}

.surface-client .security-card-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--axis-accent);
    background: color-mix(in srgb, var(--axis-accent) 9%, var(--axis-surface));
    border: 1px solid color-mix(in srgb, var(--axis-accent) 20%, var(--axis-line));
    border-radius: var(--rc);
}

.surface-client .security-card.is-enabled .security-card-icon {
    color: var(--axis-success);
    background: color-mix(in srgb, var(--axis-success) 9%, var(--axis-surface));
    border-color: color-mix(in srgb, var(--axis-success) 22%, var(--axis-line));
}

.surface-client .security-card-kicker {
    color: var(--axis-muted);
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
}

.surface-client .security-card h3 {
    margin: 3px 0 0;
    color: var(--axis-ink);
    font-size: 16px;
}

.surface-client .security-card-state {
    padding: 5px 8px;
    color: var(--axis-muted);
    background: var(--axis-surface-2);
    border: 1px solid var(--axis-line);
    border-radius: var(--rc);
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
}

.surface-client .security-card.is-enabled .security-card-state {
    color: var(--axis-success);
    border-color: color-mix(in srgb, var(--axis-success) 24%, var(--axis-line));
}

.surface-client .security-card > p {
    margin: 15px 0 18px;
    color: var(--axis-muted);
    font-size: 12px;
    line-height: 1.65;
}

.surface-client .security-card-action {
    margin-top: auto;
}

.surface-client .security-card-action button {
    width: 100%;
    justify-content: center;
}

/* Mobile application shell */
.surface-admin .mobile-topbar,
.surface-client .mobile-topbar {
    min-height: 58px;
    padding: 8px 12px !important;
    gap: 10px !important;
    background: color-mix(in srgb, var(--axis-surface) 96%, transparent) !important;
    border-bottom: 1px solid var(--axis-line) !important;
    box-shadow: none !important;
    backdrop-filter: blur(16px);
}

.surface-admin .mobile-topbar .menu-btn,
.surface-client .mobile-topbar .menu-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    padding: 0 !important;
    justify-content: center;
    color: var(--axis-ink) !important;
    background: var(--axis-surface-2) !important;
    border: 1px solid var(--axis-line) !important;
    border-radius: var(--rc)!important;
}

.surface-admin .mobile-topbar .menu-btn span,
.surface-client .mobile-topbar .menu-btn span {
    display: none;
}

.surface-admin .mobile-topbar .icon-button,
.surface-client .mobile-topbar .icon-button,
.surface-admin .mobile-topbar .notif-bell,
.surface-client .mobile-topbar .notif-bell {
    width: 40px !important;
    height: 40px !important;
    color: var(--axis-ink) !important;
    background: var(--axis-surface) !important;
    border: 1px solid var(--axis-line) !important;
    border-radius: var(--rc)!important;
}

.surface-client .mobile-brand {
    color: var(--axis-ink) !important;
    font-size: 12px !important;
}

.surface-client .mobile-brand-mark {
    color: var(--axis-client) !important;
    background: color-mix(in srgb, var(--axis-client) 10%, var(--axis-surface)) !important;
    border-color: color-mix(in srgb, var(--axis-client) 22%, var(--axis-line)) !important;
    border-radius: var(--rc)!important;
}

/* Hub */
body.surface-hub {
    --hub-bg: var(--axis-bg);
    --hub-surface: var(--axis-surface);
    --hub-raised: var(--axis-surface-2);
    --hub-line: var(--axis-line);
    --hub-ink: var(--axis-ink);
    --hub-muted: var(--axis-muted);
    --hub-accent: var(--axis-admin);
    min-height: 100dvh;
    background: var(--axis-bg) !important;
    background-image: none !important;
    color: var(--axis-ink);
}

.surface-hub .spot,
.surface-hub .ring,
.surface-hub .grid-tex {
    display: none !important;
}

.surface-hub .hub-topbar {
    min-height: 56px !important;
    background: color-mix(in srgb, var(--axis-surface) 96%, transparent) !important;
    border-bottom: 1px solid var(--axis-line) !important;
    backdrop-filter: blur(16px);
}

.surface-hub .hub-topbar-in {
    width: min(1240px, calc(100% - 40px)) !important;
    min-height: 56px !important;
}

.surface-hub .hub-iconbtn {
    width: 34px !important;
    height: 34px !important;
    color: var(--axis-ink) !important;
    background: var(--axis-surface) !important;
    border: 1px solid var(--axis-line) !important;
    border-radius: var(--rc)!important;
}

.surface-hub .wrap {
    width: min(1240px, calc(100% - 40px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 30px 0 42px !important;
}

.surface-hub .ops-h1 {
    margin-top: 12px !important;
    color: var(--axis-ink) !important;
    font-size: 38px !important;
    letter-spacing: 0 !important;
}

.surface-hub .ops-h1 em {
    color: var(--axis-admin) !important;
}

.surface-hub .hx-kpis {
    margin: 24px 0 28px !important;
    gap: 10px !important;
}

.surface-hub .hx-kpi,
.surface-hub .hx-card {
    color: var(--axis-ink) !important;
    background: var(--axis-surface) !important;
    border: 1px solid var(--axis-line) !important;
    border-radius: var(--rc)!important;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
}

.surface-hub .hx-kpi {
    padding: 15px 16px !important;
}

.surface-hub .hx-card {
    padding: 17px !important;
}

.surface-hub .hx-kpi::before,
.surface-hub .hx-card::before {
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    width: 3px !important;
    height: 100% !important;
    opacity: 1 !important;
    background: var(--axis-admin) !important;
    animation: none !important;
}

.surface-hub .hx-kpi:hover,
.surface-hub .hx-card:hover {
    border-color: var(--axis-admin) !important;
    box-shadow: var(--axis-shadow) !important;
}

.surface-hub .hx-kpi .ic,
.surface-hub .hx-ic {
    color: var(--axis-admin) !important;
    background: color-mix(in srgb, var(--axis-admin) 9%, var(--axis-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--axis-admin) 22%, var(--axis-line)) !important;
    border-radius: var(--rc)!important;
    box-shadow: none !important;
    transform: none !important;
}

.surface-hub .hx-ic img {
    filter: none !important;
}

.surface-hub .hx-mets div {
    background: var(--axis-surface-2) !important;
    border-color: var(--axis-line) !important;
    border-radius: var(--rc)!important;
}

.surface-hub .hx-go {
    color: var(--axis-muted) !important;
}

/* Authentication */
body.surface-auth {
    --axis-accent: var(--axis-admin);
    --accent: var(--axis-accent);
    --accent-strong: var(--axis-admin-strong);
    --accent-soft: color-mix(in srgb, var(--axis-accent) 11%, transparent);
    background: var(--axis-bg) !important;
}

body.surface-auth-client {
    --axis-accent: var(--axis-client);
    --accent: var(--axis-client);
    --accent-strong: var(--axis-client-strong);
}

.surface-auth .story {
    color: #f5f6f8 !important;
    background: #17191e !important;
    border-right: 1px solid #2d3139 !important;
}

.surface-auth .story::before {
    opacity: .32 !important;
    background-image:
        linear-gradient(#30343d 1px, transparent 1px),
        linear-gradient(90deg, #30343d 1px, transparent 1px) !important;
}

.surface-auth .story::after {
    background: var(--axis-accent) !important;
}

.surface-auth .story .brand-logo-light {
    display: block !important;
}

.surface-auth .story .brand-logo-dark {
    display: none !important;
}

.surface-auth .story .brand-divider,
.surface-auth .story-footer,
.surface-auth .route-map,
.surface-auth .route-step + .route-step {
    border-color: #30343d !important;
}

.surface-auth .story .brand-surface,
.surface-auth .story-kicker,
.surface-auth .story-description,
.surface-auth .route-step > span:last-child,
.surface-auth .story-footer {
    color: #9da5b2 !important;
}

.surface-auth .route-map {
    background: rgba(255, 255, 255, .025) !important;
}

.surface-auth .route-index {
    color: #fff !important;
    background: color-mix(in srgb, var(--axis-accent) 72%, #17191e) !important;
    border-color: color-mix(in srgb, var(--axis-accent) 80%, #fff) !important;
}

.surface-auth .access-panel {
    background: var(--axis-surface) !important;
}

.surface-auth .access-panel::before {
    background: var(--axis-accent) !important;
}

.surface-auth .access-console {
    padding: 30px 32px 27px !important;
    background: var(--axis-surface) !important;
    border: 1px solid var(--axis-line) !important;
    border-top: 1px solid var(--axis-line) !important;
    border-left: 3px solid var(--axis-accent) !important;
    border-radius: 4px !important;
    box-shadow: var(--axis-shadow-strong) !important;
}

.surface-auth .access-kicker {
    border-color: var(--axis-line) !important;
}

.surface-auth .panel-head h2 {
    color: var(--axis-ink) !important;
    font-size: 27px !important;
}

.surface-auth .panel-head p,
.surface-auth .foot,
.surface-auth .field label,
.surface-auth .check {
    color: var(--axis-muted) !important;
}

.surface-auth .input input,
.surface-auth .cap input,
.surface-auth .cap-refresh,
.surface-auth .theme-btn,
.surface-auth .language-picker-trigger {
    color: var(--axis-ink) !important;
    background: var(--axis-surface-2) !important;
    border-color: var(--axis-line) !important;
    border-radius: 3px !important;
}

.surface-auth .input input:focus,
.surface-auth .cap input:focus {
    background: var(--axis-surface) !important;
    border-color: var(--axis-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--axis-accent) 12%, transparent) !important;
}

.surface-auth .btn {
    color: #fff !important;
    background: var(--axis-accent) !important;
    border-color: var(--axis-accent-strong) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}

.surface-auth .btn:hover {
    background: var(--axis-accent-strong) !important;
    box-shadow: none !important;
}

.surface-auth .link,
.surface-auth .foot i,
.surface-auth .language-picker-trigger > i:first-child {
    color: var(--axis-accent) !important;
}

.surface-auth .language-picker-menu {
    background: var(--axis-surface) !important;
    border-color: var(--axis-line) !important;
    border-radius: 3px !important;
}

/* Responsive */
@media (max-width: 1200px) and (min-width: 901px) {
    .surface-admin .sidebar,
    .surface-client .sidebar {
        width: 220px !important;
        flex-basis: 220px !important;
    }

    .surface-admin .main-content,
    .surface-client .main-content {
        width: calc(100% - 220px) !important;
        padding: 22px 24px 32px !important;
    }

    }

@media (max-width: 900px) {
    body.surface-admin,
    body.surface-client {
        display: block;
    }

    .surface-admin .sidebar,
    .surface-client .sidebar {
        width: min(286px, 86vw) !important;
        height: 100dvh !important;
        padding: 14px 12px !important;
        position: fixed !important;
        left: -310px !important;
        top: 0 !important;
        z-index: 100;
        box-shadow: 24px 0 54px -32px rgba(0, 0, 0, .74) !important;
    }

    .surface-admin .sidebar.open,
    .surface-client .sidebar.open {
        left: 0 !important;
    }

    .surface-admin .main-content,
    .surface-client .main-content {
        width: 100% !important;
        min-height: calc(100dvh - 58px);
        padding: 18px 16px 28px !important;
    }

    
    .surface-admin .page-header,
    .surface-client .page-header,
    .surface-admin .overview-head,
    .surface-client .overview-head {
        align-items: flex-start !important;
    }

    .surface-admin .page-title,
    .surface-client .page-title,
    .surface-admin .page-hero-title,
    .surface-client .page-hero-title {
        font-size: 21px !important;
    }

    .surface-admin .page-header > :is(a, button, .btn-primary, .btn-secondary),
    .surface-client .page-header > :is(a, button, .btn-primary, .btn-secondary) {
        width: auto !important;
        max-width: 100%;
    }

    .surface-admin .stats-grid,
    .surface-client .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .surface-auth .access-console {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .surface-client .settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .surface-admin .main-content,
    .surface-client .main-content {
        padding: 15px 12px 24px !important;
    }

    .surface-admin .page-header,
    .surface-client .page-header,
    .surface-admin .page-hero,
    .surface-client .page-hero {
        margin-bottom: 16px !important;
        padding-bottom: 14px !important;
    }

    .surface-admin .stats-grid,
    .surface-client .stats-grid,
    .surface-admin .kpi-grid,
    .surface-client .kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .surface-admin .premium-card,
    .surface-client .premium-card {
        padding: 14px !important;
    }

    .surface-admin :is(.btn-primary, .btn-secondary, .btn-line, .btn-ghost, .btn-danger),
    .surface-client :is(.btn-primary, .btn-secondary, .btn-line, .btn-ghost, .btn-danger) {
        min-height: 40px !important;
    }

    .surface-hub .hub-topbar-in,
    .surface-hub .wrap {
        width: calc(100% - 24px) !important;
    }

    .surface-hub .wrap {
        padding-top: 22px !important;
    }

    .surface-hub .ops-h1 {
        font-size: 30px !important;
    }

    .surface-hub .hx-kpis {
        grid-template-columns: 1fr 1fr !important;
    }

    .surface-hub .hx-grid {
        grid-template-columns: 1fr !important;
    }

    .surface-admin #reminders-overlay,
    .surface-client #reminders-overlay {
        padding: 8px !important;
        align-items: flex-end !important;
    }

    .surface-admin #reminders-modal,
    .surface-client #reminders-modal {
        max-height: 92dvh !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .surface-admin *,
    .surface-client *,
    .surface-hub *,
    .surface-auth * {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}