/*
 * Luna Motion UI
 * Expressive purple product language shared by authentication, admin and client surfaces.
 */

:root {
    --luna-purple: #7647ed;
    --luna-purple-2: #a855f7;
    --luna-purple-3: #c084fc;
    --luna-deep: #4c1d95;
    --luna-ink: #17131f;
    --luna-muted: #6f687d;
    --luna-page: #f7f5fb;
    --luna-panel: rgba(255, 255, 255, .88);
    --luna-panel-solid: #ffffff;
    --luna-panel-soft: #f2eef9;
    --luna-border: rgba(82, 60, 116, .14);
    --luna-border-strong: rgba(118, 71, 237, .32);
    --luna-shadow: 0 18px 50px -28px rgba(55, 33, 86, .38);
    --luna-shadow-hover: 0 26px 62px -30px rgba(93, 49, 170, .48);
    --luna-radius: 18px;
    --luna-radius-sm: 13px;
}

html[data-theme="dark"] {
    --luna-ink: #f7f3ff;
    --luna-muted: #aaa1ba;
    --luna-page: #0d0914;
    --luna-panel: rgba(24, 18, 34, .88);
    --luna-panel-solid: #181222;
    --luna-panel-soft: #21182f;
    --luna-border: rgba(225, 212, 245, .11);
    --luna-border-strong: rgba(168, 85, 247, .42);
    --luna-shadow: 0 22px 54px -30px rgba(0, 0, 0, .76);
    --luna-shadow-hover: 0 30px 70px -34px rgba(99, 48, 177, .72);
}

body.surface-admin,
body.surface-client {
    --axis-admin: var(--luna-purple);
    --axis-admin-strong: #6035d8;
    --axis-client: var(--luna-purple);
    --axis-client-strong: #6035d8;
    --axis-accent: var(--luna-purple);
    --axis-accent-strong: #6035d8;
    --axis-bg: var(--luna-page);
    --axis-surface: var(--luna-panel-solid);
    --axis-surface-2: var(--luna-panel-soft);
    --axis-line: var(--luna-border);
    --axis-line-strong: var(--luna-border-strong);
    --axis-ink: var(--luna-ink);
    --axis-muted: var(--luna-muted);
    --primary: var(--luna-purple);
    --primary-hover: #6035d8;
    --primary-soft: color-mix(in srgb, var(--luna-purple) 11%, transparent);
    --primary-glow: color-mix(in srgb, var(--luna-purple) 30%, transparent);
    --bg-main: var(--luna-page);
    --bg-card: var(--luna-panel-solid);
    --bg-subtle: var(--luna-panel-soft);
    --border-color: var(--luna-border);
    --text-main: var(--luna-ink);
    --text-muted: var(--luna-muted);
    --radius: var(--luna-radius);
    min-height: 100dvh;
    background-color: var(--luna-page) !important;
    background-image:
        radial-gradient(circle at 12% 8%, rgba(168, 85, 247, .12), transparent 28%),
        radial-gradient(circle at 86% 82%, rgba(118, 71, 237, .10), transparent 32%) !important;
    background-attachment: fixed !important;
}

body.surface-admin::before,
body.surface-client::before {
    content: "";
    position: fixed;
    inset: -16%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 28% 34%, rgba(168, 85, 247, .10), transparent 22%),
        radial-gradient(circle at 70% 58%, rgba(118, 71, 237, .09), transparent 26%);
    filter: blur(12px);
    animation: lunaAmbient 19s ease-in-out infinite alternate;
}

body.surface-admin::after,
body.surface-client::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .32;
    background-image:
        linear-gradient(rgba(118, 71, 237, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(118, 71, 237, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, #000, transparent 82%);
    animation: lunaGrid 28s linear infinite;
}

html[data-theme="dark"] body.surface-admin::after,
html[data-theme="dark"] body.surface-client::after {
    opacity: .18;
}

@keyframes lunaAmbient {
    0% { transform: translate3d(-2%, -2%, 0) scale(1); }
    55% { transform: translate3d(4%, 2%, 0) scale(1.08); }
    100% { transform: translate3d(-1%, 5%, 0) scale(.98); }
}

@keyframes lunaGrid {
    from { background-position: 0 0, 0 0; }
    to { background-position: 56px 56px, 56px 56px; }
}

.surface-admin .sidebar,
.surface-client .sidebar,
.surface-admin .main-content,
.surface-client .main-content,
.surface-admin .mobile-topbar,
.surface-client .mobile-topbar {
    position: relative;
    z-index: 1;
}

/* Wider shell and branded navigation */
.surface-admin .sidebar,
.surface-client .sidebar {
    width: 278px !important;
    flex-basis: 278px !important;
    padding: 18px 14px !important;
    background:
        var(--bg);
    border-right: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 18px 0 50px -38px rgba(22, 10, 40, .92) !important;
}

.surface-admin .main-content,
.surface-client .main-content {
    width: calc(100% - 278px) !important;
    padding: 28px clamp(24px, 3vw, 48px) 46px !important;
    background: transparent !important;
}

.surface-admin .cc-brand,
.surface-client .luna-sidebar-brand {
    min-height: 76px !important;
    margin-bottom: 10px !important;
    padding: 10px 9px 18px !important;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
}

.surface-admin .admin-brand-logo,
.surface-client .luna-sidebar-brand img {
    width: auto !important;
    height: 42px !important;
    max-width: 190px !important;
    object-fit: contain;
    object-position: left center;
}

.surface-client .luna-sidebar-brand .luna-brand-dark {
    display: none;
}

.surface-client .client-identity {
    margin: 0 0 10px !important;
    padding: 12px 10px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

.surface-client .client-identity > div:first-child {
    border-radius: var(--r)!important;
    box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .7);
}

.surface-admin .sidebar-section-title,
.surface-client .sidebar-section-title {
    margin-top: 8px !important;
    padding: 13px 11px 7px !important;
    color: #766b87 !important;
    font-size: 9px !important;
    letter-spacing: .08em !important;
}

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

.surface-admin .sidebar-link,
.surface-client .sidebar-link {
    min-height: 44px !important;
    padding: 0 12px !important;
    gap: 11px !important;
    color: #b9afc9 !important;
    border: 1px solid transparent !important;
    border-radius: var(--r)!important;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease !important;
}

.surface-admin .sidebar-link:hover,
.surface-client .sidebar-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .065) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    transform: translateX(3px) !important;
}

html body.surface-admin .sidebar-link.active,
html body.surface-client .sidebar-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--luna-purple), var(--luna-purple-2)) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    border-radius: var(--r)!important;
    box-shadow: 0 14px 30px -16px rgba(118, 71, 237, .9) !important;
    transform: none !important;
}

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

.surface-client .portal-tools,
.surface-admin .portal-tools {
    padding: 11px 0 0 !important;
    gap: 8px !important;
}

/* Floating branded workspace bar */












/* Page headings become a clear first-viewport surface */
.surface-admin :is(.page-header, .page-hero, .overview-head),
.surface-client :is(.page-header, .page-hero, .overview-head, .client-overview-head) {
    margin-bottom: 22px !important;
    padding: 20px 22px !important;
    gap: 15px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(168, 85, 247, .12), transparent 36%),
        var(--luna-panel) !important;
    border: 1px solid var(--luna-border) !important;
    border-radius: var(--r)!important;
    box-shadow: var(--luna-shadow) !important;
    backdrop-filter: blur(14px);
}

.surface-admin :is(.page-header, .page-hero, .overview-head)::before,
.surface-client :is(.page-header, .page-hero, .overview-head)::before {
    display: none !important;
}

.surface-admin :is(.page-title, .page-hero-title, .overview-title h1),
.surface-client :is(.page-title, .page-hero-title, .client-overview-head h1) {
    color: var(--luna-ink) !important;
    font-size: clamp(23px, 2.2vw, 32px) !important;
    line-height: 1.12 !important;
}

.surface-admin :is(.subtitle, .page-hero-subtitle),
.surface-client :is(.subtitle, .page-hero-subtitle, .client-overview-head p) {
    color: var(--luna-muted) !important;
    font-size: 12.5px !important;
}

.surface-admin :is(.page-hero-icon, .client-page-icon),
.surface-client :is(.page-hero-icon, .client-page-icon, .client-overview-header-icon) {
    width: 46px !important;
    height: 46px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--luna-purple), var(--luna-purple-2)) !important;
    border: 0 !important;
    border-radius: var(--r)!important;
    box-shadow: 0 14px 28px -16px rgba(118, 71, 237, .9) !important;
}

/* Rounded panels, cards and richer hover behavior */
.surface-admin :is(
    .premium-card, .overview-panel, .table-wrap, .stat-card, .kpi-card, .cmd-attention,
    .order-metric, .op-item, .cmd-card, .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, .presentation-card
),
.surface-client :is(
    .premium-card, .overview-panel, .table-wrap, .stat-card, .kpi-card, .cmd-attention,
    .order-metric, .op-item, .cmd-card, .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, .presentation-card, .client-work-panel, .client-access-panel
) {
    color: var(--luna-ink) !important;
    background: var(--luna-panel) !important;
    border: 1px solid var(--luna-border) !important;
    border-radius: var(--luna-radius) !important;
    box-shadow: var(--luna-shadow) !important;
    backdrop-filter: blur(12px);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease !important;
}

.surface-admin :is(
    .premium-card, .stat-card, .kpi-card, .order-metric, .op-item, .cmd-card,
    .pp-card, .ag-card, .em-card, .ms-card, .ik-card, .presentation-card
):hover,
.surface-client :is(
    .premium-card, .stat-card, .kpi-card, .order-metric, .op-item, .cmd-card,
    .pp-card, .ag-card, .em-card, .ms-card, .ik-card, .presentation-card
):hover {
    transform: translateY(-4px) !important;
    background: var(--luna-panel-solid) !important;
    border-color: var(--luna-border-strong) !important;
    box-shadow: var(--luna-shadow-hover) !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: 18px !important;
    right: 18px !important;
    top: 0 !important;
    width: auto !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--luna-purple), var(--luna-purple-2), transparent) !important;
    border-radius: 0 0 var(--rc) var(--rc)!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
),
.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: 112px !important;
    padding: 18px !important;
    background: var(--luna-panel) !important;
    border: 1px solid var(--luna-border) !important;
    border-radius: var(--r)!important;
    box-shadow: var(--luna-shadow) !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 {
    display: none !important;
}

.surface-admin :is(.stat-card, .kpi-card)::before,
.surface-client :is(.stat-card, .kpi-card)::before {
    left: 18px !important;
    right: 18px !important;
    top: 0 !important;
    width: auto !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--luna-purple), var(--luna-purple-2), transparent) !important;
    border-radius: 0 0 var(--rc) var(--rc)!important;
    animation: none !important;
}

.surface-admin :is(.stat-card .icon, .kpi-icon, .metric-icon, .cmd-ic),
.surface-client :is(.stat-card .icon, .kpi-icon, .metric-icon, .cmd-ic) {
    width: 44px !important;
    height: 44px !important;
    color: var(--luna-purple) !important;
    background: linear-gradient(145deg, rgba(118, 71, 237, .14), rgba(168, 85, 247, .07)) !important;
    border: 1px solid rgba(118, 71, 237, .18) !important;
    border-radius: var(--r)!important;
    box-shadow: none !important;
}

.surface-admin :is(.pp-stat, .ag-stat, .em-stat, .ms-stat, .inv-stat, .idx-stat, .ik-stat, .rk-stat) .ic,
.surface-client :is(.pp-stat, .ag-stat, .em-stat, .ms-stat, .inv-stat, .idx-stat, .ik-stat, .rk-stat) .ic,
.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: 48px !important;
    height: 48px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--luna-purple), var(--luna-purple-2)) !important;
    border: 0 !important;
    border-radius: var(--r)!important;
    box-shadow: 0 14px 28px -16px rgba(118, 71, 237, .8) !important;
}

/* Buttons, fields, chips and tables */
.surface-admin :is(.btn-primary, .btn-secondary, .btn-line, .btn-ghost, .btn-danger, .pp-btn, .ag-btn, .em-btn, .ms-btn, .tm-btn),
.surface-client :is(.btn-primary, .btn-secondary, .btn-line, .btn-ghost, .btn-danger, .pp-btn, .ag-btn, .em-btn, .ms-btn, .tm-btn) {
    min-height: 42px !important;
    padding: 0 15px !important;
    border-radius: var(--r)!important;
    font-size: 11.5px !important;
    box-shadow: none !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

.surface-admin :is(.btn-primary, .pp-btn.primary, .ag-btn.primary, .em-btn.primary, .ms-btn.primary, .tm-btn.primary),
.surface-client :is(.btn-primary, .pp-btn.primary, .ag-btn.primary, .em-btn.primary, .ms-btn.primary, .tm-btn.primary) {
    color: #fff !important;
    background: linear-gradient(135deg, var(--luna-purple), var(--luna-purple-2)) !important;
    border: 1px solid rgba(105, 55, 211, .55) !important;
    box-shadow: 0 14px 30px -18px rgba(118, 71, 237, .85) !important;
}

.surface-admin :is(.btn-primary, .btn-secondary, .btn-line, .btn-ghost, .pp-btn, .ag-btn, .em-btn, .ms-btn, .tm-btn):hover,
.surface-client :is(.btn-primary, .btn-secondary, .btn-line, .btn-ghost, .pp-btn, .ag-btn, .em-btn, .ms-btn, .tm-btn):hover {
    transform: translateY(-2px) !important;
    border-color: var(--luna-border-strong) !important;
    box-shadow: 0 15px 30px -20px rgba(91, 46, 169, .65) !important;
}

.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"]) {
    min-height: 44px;
    color: var(--luna-ink) !important;
    background: color-mix(in srgb, var(--luna-panel-solid) 88%, var(--luna-panel-soft)) !important;
    border: 1px solid var(--luna-border) !important;
    border-radius: var(--rc)!important;
}

.surface-admin .main-content :is(input, select, textarea):focus,
.surface-client .main-content :is(input, select, textarea):focus {
    border-color: var(--luna-purple) !important;
    box-shadow: 0 0 0 4px rgba(118, 71, 237, .12) !important;
}

.surface-admin :is(.chip, .status, [class*="status-"], .pp-badge, .ag-badge, .ms-badge, .tm-badge),
.surface-client :is(.chip, .status, [class*="status-"], .pp-badge, .ag-badge, .ms-badge, .tm-badge) {
    border-radius: 999px !important;
    padding: 5px 10px !important;
}

.surface-admin :is(.table-wrap, .premium-card:has(> table)),
.surface-client :is(.table-wrap, .premium-card:has(> table)) {
    overflow: hidden;
    border-radius: var(--r)!important;
}

.surface-admin :is(.table, .premium-card table) thead th,
.surface-client :is(.table, .premium-card table) thead th {
    height: 48px !important;
    color: var(--luna-muted) !important;
    background: var(--luna-panel-soft) !important;
}

.surface-admin :is(.table, .premium-card table) tbody td,
.surface-client :is(.table, .premium-card table) tbody td {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.surface-admin :is(.table, .premium-card table) tbody tr,
.surface-client :is(.table, .premium-card table) tbody tr {
    transition: background .16s ease, transform .16s ease;
}

.surface-admin :is(.table, .premium-card table) tbody tr:hover,
.surface-client :is(.table, .premium-card table) tbody tr:hover {
    background: rgba(118, 71, 237, .07) !important;
}

.surface-admin .client-guide-strip,
.surface-client .client-guide-strip {
    padding: 16px 18px !important;
    background: linear-gradient(135deg, rgba(118, 71, 237, .10), rgba(168, 85, 247, .04)) !important;
    border: 1px solid rgba(118, 71, 237, .20) !important;
    border-radius: var(--r)!important;
}

.surface-admin .client-guide-icon,
.surface-client .client-guide-icon {
    border-radius: var(--r)!important;
}

/* Admin dashboard */
.surface-admin .kpi-grid {
    gap: 16px !important;
}

.surface-admin .kpi-card {
    min-height: 142px !important;
    padding: 20px !important;
    border-radius: var(--r)!important;
}

.surface-admin .kpi-value {
    margin-top: 20px !important;
    font-size: 25px !important;
}

.surface-admin .cmd-attention {
    padding: 21px !important;
}

.surface-admin .cmd-grid {
    gap: 13px !important;
}

.surface-admin .cmd-card {
    min-height: 84px;
    padding: 15px !important;
    border-radius: var(--r)!important;
}

.surface-admin .overview-layout,
.surface-admin .recent-grid {
    gap: 20px !important;
}

/* Client overview gets independent tiles instead of connected square bands */
.surface-client .client-overview {
    gap: 20px !important;
}

.surface-client .client-overview-head {
    min-height: 116px;
}

.surface-client .client-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    background: transparent !important;
    border: 0 !important;
}

.surface-client .client-summary > a,
.surface-client .client-summary > span {
    min-height: 108px !important;
    padding: 17px !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    color: var(--luna-ink) !important;
    background: var(--luna-panel) !important;
    border: 1px solid var(--luna-border) !important;
    border-radius: var(--r)!important;
    box-shadow: var(--luna-shadow) !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.surface-client .client-summary > a:hover {
    transform: translateY(-4px);
    border-color: var(--luna-border-strong) !important;
    box-shadow: var(--luna-shadow-hover) !important;
}

.surface-client .client-summary strong {
    font-size: 22px !important;
}

.surface-client .client-support-band {
    padding: 16px 18px !important;
    background: linear-gradient(135deg, rgba(118, 71, 237, .13), rgba(168, 85, 247, .05)) !important;
    border: 1px solid rgba(118, 71, 237, .22) !important;
    border-radius: var(--r)!important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

.surface-client .client-support-band:hover {
    transform: translateY(-3px);
    box-shadow: var(--luna-shadow-hover);
}

.surface-client .client-support-icon {
    border-radius: var(--r)!important;
    background: linear-gradient(135deg, var(--luna-purple), var(--luna-purple-2)) !important;
}

.surface-client .client-overview-layout {
    grid-template-columns: minmax(0, 1.65fr) minmax(310px, .75fr) !important;
    gap: 20px !important;
}

.surface-client .client-section-head {
    padding: 17px 19px !important;
}

.surface-client .client-project-list {
    padding: 6px 18px 12px !important;
}

.surface-client .client-project-row {
    margin: 8px 0;
    padding: 0 10px;
    border: 1px solid transparent !important;
    border-radius: var(--r);
    transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}

.surface-client .client-project-row:hover {
    background: rgba(118, 71, 237, .07);
    border-color: rgba(118, 71, 237, .16) !important;
    transform: translateX(3px);
}

.surface-client .client-module-list {
    padding: 8px !important;
}

.surface-client .client-module-list > a {
    margin-bottom: 5px;
    padding: 12px !important;
    border: 1px solid transparent !important;
    border-radius: var(--r)!important;
    transition: transform .18s ease, background .18s ease, border-color .18s ease !important;
}

.surface-client .client-module-list > a:hover {
    background: rgba(118, 71, 237, .08) !important;
    border-color: rgba(118, 71, 237, .17) !important;
    transform: translateX(3px);
}

.surface-client .client-module-list > a > i:first-child {
    color: #fff !important;
    background: linear-gradient(135deg, var(--luna-purple), var(--luna-purple-2)) !important;
    border-radius: var(--r)!important;
}

.surface-client .client-seo-strip {
    border-radius: var(--r)!important;
    box-shadow: var(--luna-shadow) !important;
}

/* Settings */
.surface-client .settings-grid {
    max-width: none !important;
    gap: 18px !important;
}

.surface-client .security-card {
    border-left: 1px solid var(--luna-border) !important;
    border-top: 3px solid var(--luna-purple) !important;
}

.surface-client .security-card-head {
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
}

.surface-client .security-card-icon {
    width: 46px !important;
    height: 46px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--luna-purple), var(--luna-purple-2)) !important;
    border: 0 !important;
    border-radius: var(--r)!important;
}

/* Modals and reminders */
.surface-admin #reminders-modal,
.surface-client #reminders-modal {
    border-radius: var(--r)!important;
    box-shadow: 0 40px 110px -35px rgba(0, 0, 0, .82) !important;
}

.surface-admin #reminders-modal .reminders-head,
.surface-client #reminders-modal .reminders-head {
    border-top: 0 !important;
    background: linear-gradient(145deg, rgba(118, 71, 237, .12), transparent) !important;
}

.surface-admin #reminders-modal .reminders-item,
.surface-client #reminders-modal .reminders-item {
    border-radius: var(--r)!important;
}

/* Hub */
body.surface-hub {
    --axis-admin: var(--luna-purple);
    --axis-admin-strong: #6035d8;
    --axis-bg: var(--luna-page);
    --axis-surface: var(--luna-panel-solid);
    --axis-surface-2: var(--luna-panel-soft);
    --axis-line: var(--luna-border);
    --axis-ink: var(--luna-ink);
    --axis-muted: var(--luna-muted);
    background:
        radial-gradient(circle at 18% 8%, rgba(168, 85, 247, .13), transparent 28%),
        radial-gradient(circle at 82% 70%, rgba(118, 71, 237, .10), transparent 30%),
        var(--luna-page) !important;
}

.surface-hub .hub-topbar-in {
    border-radius: var(--r)!important;
}

.surface-hub .hub-wordmark {
    width: 142px;
    height: 38px;
    display: grid;
    align-items: center;
}

.surface-hub .hub-wordmark img {
    grid-area: 1 / 1;
    width: 132px !important;
    height: auto !important;
    max-height: 36px;
    object-fit: contain;
    object-position: left center;
}

.surface-hub .hub-wordmark-dark {
    display: none;
}

html[data-theme="dark"] .surface-hub .hub-wordmark-light {
    display: none;
}

html[data-theme="dark"] .surface-hub .hub-wordmark-dark {
    display: block;
}

.surface-hub .hx-kpi,
.surface-hub .hx-card {
    border-radius: var(--r)!important;
    box-shadow: var(--luna-shadow) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.surface-hub .hx-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--luna-shadow-hover) !important;
}

/* Authentication */
body.surface-auth {
    --axis-accent: var(--luna-purple);
    --axis-accent-strong: #6035d8;
    --accent: var(--luna-purple);
    --accent-strong: #6035d8;
    --accent-soft: rgba(118, 71, 237, .12);
    grid-template-columns: minmax(0, 55%) minmax(470px, 45%) !important;
    background:
        radial-gradient(circle at 22% 18%, rgba(168, 85, 247, .17), transparent 28%),
        #0b0711 !important;
}

.surface-auth .story {
    padding: clamp(34px, 4.5vw, 72px) !important;
    background:
        radial-gradient(circle at 74% 18%, rgba(168, 85, 247, .24), transparent 26%),
        radial-gradient(circle at 18% 80%, rgba(118, 71, 237, .19), transparent 30%),
        linear-gradient(145deg, #171020, #0d0913 72%) !important;
    border-right: 1px solid rgba(255, 255, 255, .08) !important;
}

.surface-auth .story::before {
    opacity: .46 !important;
    background-size: 62px 62px !important;
    animation: lunaGrid 25s linear infinite !important;
}

.surface-auth .story::after {
    width: 42% !important;
    height: 3px !important;
    top: 0 !important;
    bottom: auto !important;
    background: linear-gradient(90deg, var(--luna-purple), var(--luna-purple-2), transparent) !important;
    animation: lunaAuthRail 5s ease-in-out infinite alternate !important;
}

@keyframes lunaAuthRail {
    from { transform: translateX(-12%); opacity: .55; }
    to { transform: translateX(145%); opacity: 1; }
}

.surface-auth .story-canvas {
    opacity: .72 !important;
}

.surface-auth .story-canvas .akis {
    stroke: rgba(192, 132, 252, .42) !important;
}

.surface-auth .story-canvas .dugum {
    fill: var(--luna-purple-3) !important;
}

.surface-auth .brand-lockup {
    min-height: 58px !important;
}

.surface-auth .brand-wordmark img {
    height: 54px !important;
    max-width: min(245px, 48vw) !important;
}

.surface-auth .brand-divider {
    height: 38px !important;
    background: rgba(255, 255, 255, .15) !important;
}

.surface-auth .brand-surface {
    color: rgba(255, 255, 255, .62) !important;
    font-size: 10.5px !important;
}

.surface-auth .story-kicker {
    color: var(--luna-purple-3) !important;
}

.surface-auth .story-title {
    max-width: 820px !important;
    color: #fff !important;
    text-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

.surface-auth .story-description,
.surface-auth .route-step span,
.surface-auth .story-footer {
    color: rgba(235, 226, 247, .65) !important;
}

.surface-auth .route-step {
    padding: 17px !important;
    background: rgba(255, 255, 255, .045) !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(12px);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.surface-auth .route-step::before {
    left: 17px !important;
    top: 0 !important;
    width: 42px !important;
    height: 2px !important;
    background: linear-gradient(90deg, var(--luna-purple), var(--luna-purple-2)) !important;
}

.surface-auth .route-step:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, .075) !important;
    border-color: rgba(192, 132, 252, .28) !important;
}

.surface-auth .route-step strong {
    color: #fff !important;
}

.surface-auth .access-panel {
    padding: 86px clamp(30px, 4vw, 72px) 42px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(168, 85, 247, .12), transparent 34%),
        var(--luna-page) !important;
}

.surface-auth .access-panel::before {
    display: none !important;
}

.surface-auth .access-inner {
    max-width: 520px !important;
}

.surface-auth .access-console {
    padding: clamp(28px, 3.2vw, 42px) !important;
    color: var(--luna-ink) !important;
    background: var(--luna-panel) !important;
    border: 1px solid var(--luna-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 32px 90px -40px rgba(57, 28, 104, .56) !important;
    backdrop-filter: blur(18px);
}

.surface-auth .access-kicker {
    margin-bottom: 24px !important;
    padding-bottom: 15px !important;
    border-bottom-color: var(--luna-border) !important;
}

.surface-auth .access-kicker span i {
    background: var(--luna-purple-2) !important;
    box-shadow: 0 0 0 4px rgba(168, 85, 247, .12) !important;
}

.surface-auth .panel-head h2 {
    color: var(--luna-ink) !important;
    font-size: clamp(28px, 2.5vw, 36px) !important;
}

.surface-auth .input input,
.surface-auth .cap input,
.surface-auth .cap-refresh,
.surface-auth .theme-btn,
.surface-auth .language-picker-trigger,
.surface-auth .language-switch {
    background: color-mix(in srgb, var(--luna-panel-solid) 88%, var(--luna-panel-soft)) !important;
    border-color: var(--luna-border) !important;
    border-radius: 13px !important;
}

.surface-auth .input input {
    height: 58px !important;
}

.surface-auth .input .eye {
    border-radius: 10px !important;
}

.surface-auth .btn {
    min-height: 58px !important;
    background: linear-gradient(135deg, var(--luna-purple), var(--luna-purple-2)) !important;
    border: 1px solid rgba(105, 55, 211, .6) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 34px -18px rgba(118, 71, 237, .85) !important;
}

.surface-auth .btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 22px 40px -18px rgba(118, 71, 237, .92) !important;
}

.surface-auth .auth-tools {
    top: 22px !important;
    right: 24px !important;
}

/* Team chat */
.surface-admin .tcf-wrap {
    --tc-p: var(--luna-purple) !important;
    --tc-p2: var(--luna-purple-2) !important;
    grid-template-columns: 350px minmax(0, 1fr) !important;
    height: calc(100dvh - 32px) !important;
    margin: 16px !important;
    overflow: hidden !important;
    background: var(--luna-panel) !important;
    border: 1px solid var(--luna-border) !important;
    border-radius: var(--r)!important;
    box-shadow: var(--luna-shadow-hover) !important;
    backdrop-filter: blur(18px);
}

.surface-admin:has(.tcf-wrap) .sidebar {
    border-radius: 0 var(--r) var(--r) 0!important;
}

.surface-admin:has(.tcf-wrap) .main-content {
    padding: 0 !important;
    background: transparent !important;
}


.surface-admin .tcf-side {
    background: color-mix(in srgb, var(--luna-panel-soft) 88%, transparent) !important;
    border-right-color: var(--luna-border) !important;
}

.surface-admin .tcf-side-head {
    padding: 22px 20px 15px !important;
    background: transparent !important;
}

.surface-admin .tcf-side-title {
    font-size: 19px !important;
}

.surface-admin .tcf-search {
    position: relative;
    display: block;
    margin-top: 15px;
}

.surface-admin .tcf-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--luna-muted);
    font-size: 12px;
}

.surface-admin .tcf-search input {
    width: 100%;
    height: 42px;
    padding: 0 13px 0 38px;
    color: var(--luna-ink);
    background: var(--luna-panel-solid);
    border: 1px solid var(--luna-border);
    border-radius: var(--r);
    outline: 0;
}

.surface-admin .tcf-search input:focus {
    border-color: var(--luna-purple);
    box-shadow: 0 0 0 4px rgba(118, 71, 237, .10);
}

.surface-admin .tcf-peers {
    padding: 10px !important;
}

.surface-admin .tcf-person {
    min-height: 66px;
    margin-bottom: 5px;
    padding: 10px !important;
    border: 1px solid transparent;
    border-radius: var(--r)!important;
    transition: transform .18s ease, background .18s ease, border-color .18s ease !important;
}

.surface-admin .tcf-person:hover {
    background: var(--luna-panel-solid) !important;
    border-color: var(--luna-border) !important;
    transform: translateX(3px);
}

.surface-admin .tcf-person.active {
    background: linear-gradient(135deg, rgba(118, 71, 237, .13), rgba(168, 85, 247, .06)) !important;
    border-color: rgba(118, 71, 237, .22) !important;
    box-shadow: none !important;
}

.surface-admin .tcf-av {
    border-radius: var(--r)!important;
    box-shadow: 0 10px 24px -16px rgba(55, 24, 105, .68);
}

.surface-admin .tcf-dot {
    border-color: var(--luna-panel-solid) !important;
}

.surface-admin .tcf-thread-head {
    min-height: 76px;
    padding: 13px 20px !important;
    background: color-mix(in srgb, var(--luna-panel-solid) 88%, transparent) !important;
    border-bottom-color: var(--luna-border) !important;
    backdrop-filter: blur(14px);
}

.surface-admin .tcf-thread-context {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    color: var(--luna-purple);
    background: rgba(118, 71, 237, .08);
    border: 1px solid rgba(118, 71, 237, .16);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
}

.surface-admin .tcf-back {
    display: none;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    color: var(--luna-ink);
    background: var(--luna-panel-soft);
    border: 1px solid var(--luna-border);
    border-radius: var(--r);
}

.surface-admin .tcf-messages {
    padding: 26px clamp(18px, 3vw, 40px) 14px !important;
    gap: 5px !important;
    background:
        radial-gradient(circle at 90% 10%, rgba(168, 85, 247, .08), transparent 26%),
        radial-gradient(circle at 10% 90%, rgba(118, 71, 237, .06), transparent 30%),
        var(--luna-page) !important;
}

.surface-admin .tcf-msg {
    max-width: min(70%, 680px) !important;
    padding: 11px 14px !important;
    border-radius: var(--r)!important;
}

.surface-admin .tcf-msg.them {
    background: var(--luna-panel-solid) !important;
    border-color: var(--luna-border) !important;
    border-bottom-left-radius: 6px !important;
    box-shadow: 0 10px 26px -22px rgba(45, 23, 78, .6) !important;
}

.surface-admin .tcf-msg.me {
    background: linear-gradient(135deg, var(--luna-purple), var(--luna-purple-2)) !important;
    border-bottom-right-radius: 6px !important;
    box-shadow: 0 14px 28px -18px rgba(118, 71, 237, .9) !important;
}

.surface-admin .tcf-file {
    border-radius: var(--r)!important;
}

.surface-admin .tcf-filechip {
    background: rgba(118, 71, 237, .08) !important;
    border-top-color: var(--luna-border) !important;
}

.surface-admin .tcf-composer {
    padding: 14px 18px !important;
    background: color-mix(in srgb, var(--luna-panel-solid) 90%, transparent) !important;
    border-top-color: var(--luna-border) !important;
    backdrop-filter: blur(14px);
}

.surface-admin .tcf-attach,
.surface-admin .tcf-send {
    width: 46px !important;
    height: 46px !important;
    border-radius: var(--r)!important;
}

.surface-admin .tcf-attach {
    background: var(--luna-panel-soft) !important;
    border: 1px solid var(--luna-border) !important;
}

.surface-admin .tcf-attach:hover {
    color: var(--luna-purple) !important;
    background: rgba(118, 71, 237, .09) !important;
    border-color: rgba(118, 71, 237, .20) !important;
}

.surface-admin #tcf-input {
    min-height: 46px !important;
    padding: 12px 16px !important;
    color: var(--luna-ink) !important;
    background: var(--luna-panel-soft) !important;
    border: 1px solid var(--luna-border) !important;
    border-radius: var(--r)!important;
}

.surface-admin .tcf-send {
    background: linear-gradient(135deg, var(--luna-purple), var(--luna-purple-2)) !important;
    box-shadow: 0 14px 28px -17px rgba(118, 71, 237, .9) !important;
}

.surface-admin .tcf-empty-orb {
    width: 84px !important;
    height: 84px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--luna-purple), var(--luna-purple-2)) !important;
    border: 0 !important;
    border-radius: var(--r)!important;
    box-shadow: 0 22px 46px -24px rgba(118, 71, 237, .88) !important;
    animation: lunaFloat 4.5s ease-in-out infinite;
}

@keyframes lunaFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

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

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

    .surface-client .client-overview-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 900px) {
    .surface-admin .sidebar,
    .surface-client .sidebar {
        width: min(310px, 88vw) !important;
        left: -330px !important;
        border-radius: 0 var(--r) var(--r) 0!important;
    }

    .surface-admin .main-content,
    .surface-client .main-content {
        width: 100% !important;
        padding: 18px 16px 30px !important;
    }

    .surface-admin .mobile-topbar,
    .surface-client .mobile-topbar {
        min-height: 64px !important;
        padding: 10px 12px !important;
        background: color-mix(in srgb, var(--luna-panel-solid) 88%, transparent) !important;
        border-bottom: 1px solid var(--luna-border) !important;
        backdrop-filter: blur(18px);
    }

    .surface-admin .mobile-topbar :is(.menu-btn, .icon-button, .notif-bell),
    .surface-client .mobile-topbar :is(.menu-btn, .icon-button, .notif-bell) {
        border-radius: var(--r)!important;
    }

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

    .surface-client .client-overview-layout {
        grid-template-columns: 1fr !important;
    }

    .surface-admin .tcf-wrap {
        grid-template-columns: 1fr !important;
        height: calc(100dvh - 76px) !important;
        margin: 8px !important;
        border-radius: var(--r)!important;
    }

    .surface-admin .tcf-side {
        display: var(--side-disp, flex) !important;
    }

    .surface-admin .tcf-main {
        display: var(--main-disp, none) !important;
    }

    .surface-admin .tcf-back {
        display: inline-flex;
    }

    .surface-admin .tcf-thread-context {
        display: none;
    }

    body.surface-auth {
        display: block !important;
        background: var(--luna-page) !important;
    }

    .surface-auth .story {
        min-height: 300px !important;
        padding: 28px 24px !important;
        display: grid !important;
    }

    .surface-auth .brand-lockup {
        display: flex !important;
    }

    .surface-auth .story-main {
        padding: 34px 0 18px !important;
    }

    .surface-auth .story-title {
        max-width: 620px !important;
        font-size: clamp(36px, 9vw, 54px) !important;
    }

    .surface-auth .story-description {
        max-width: 600px !important;
    }

    .surface-auth .route-map,
    .surface-auth .story-footer {
        display: none !important;
    }

    .surface-auth .access-panel {
        min-height: auto !important;
        padding: 22px 16px 38px !important;
        align-items: flex-start !important;
    }

    .surface-auth .access-inner {
        max-width: 620px !important;
        margin-top: -54px !important;
        position: relative;
        z-index: 2;
    }

    .surface-auth .mobile-brand,
    .surface-auth .mobile-route {
        display: none !important;
    }

    .surface-auth .access-console {
        padding: 27px !important;
        border-radius: 20px !important;
    }
}

@media (max-width: 620px) {
    .surface-admin .main-content,
    .surface-client .main-content {
        padding: 14px 11px 26px !important;
    }

    .surface-admin :is(.page-header, .page-hero, .overview-head),
    .surface-client :is(.page-header, .page-hero, .overview-head, .client-overview-head) {
        padding: 17px !important;
        border-radius: var(--r)!important;
    }

    .surface-admin :is(.page-title, .page-hero-title, .overview-title h1),
    .surface-client :is(.page-title, .page-hero-title, .client-overview-head h1) {
        font-size: 22px !important;
    }

    .surface-client .client-summary {
        gap: 10px !important;
    }

    .surface-client .client-summary > a,
    .surface-client .client-summary > span {
        min-height: 102px !important;
        padding: 14px !important;
        border-radius: var(--r)!important;
    }

    .surface-client .client-summary strong {
        font-size: 18px !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .surface-admin .premium-card,
    .surface-client .premium-card {
        border-radius: var(--r)!important;
    }

    .surface-auth .story {
        min-height: 270px !important;
        padding: 23px 18px !important;
    }

    .surface-auth .brand-wordmark img {
        height: 43px !important;
        max-width: 190px !important;
    }

    .surface-auth .brand-surface {
        max-width: 100px !important;
        font-size: 9px !important;
    }

    .surface-auth .story-title {
        font-size: 34px !important;
    }

    .surface-auth .story-description {
        font-size: 13px !important;
    }

    .surface-auth .access-panel {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .surface-auth .access-console {
        padding: 23px 18px !important;
        border-radius: 18px !important;
    }

    .surface-auth .panel-head h2 {
        font-size: 26px !important;
    }

    .surface-admin .tcf-wrap {
        margin: 5px !important;
        border-radius: var(--r)!important;
    }

    .surface-admin .tcf-msg {
        max-width: 86% !important;
    }

    .surface-admin .tcf-composer {
        gap: 7px !important;
        padding: 10px !important;
    }

    .surface-admin .tcf-attach {
        width: 42px !important;
        height: 42px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.surface-admin::before,
    body.surface-client::before,
    body.surface-admin::after,
    body.surface-client::after,
    .surface-auth .story::before,
    .surface-auth .story::after,
    .surface-admin .tcf-empty-orb {
        animation: none !important;
    }
}

/* Authentication typography and spacing tuned for a calmer, denser console. */
@media (min-width: 901px) {
    body.surface-auth {
        grid-template-columns: minmax(0, 57%) minmax(430px, 43%) !important;
    }

    .surface-auth .story {
        padding: clamp(30px, 3vw, 52px) !important;
    }

    .surface-auth .story-main {
        padding: 24px 0 !important;
    }

    .surface-auth .story-title {
        max-width: 680px !important;
        margin-bottom: 13px !important;
        font-size: clamp(36px, 3.05vw, 49px) !important;
        line-height: 1.06 !important;
    }

    .surface-auth .story-description {
        max-width: 570px !important;
        font-size: 12.5px !important;
        line-height: 1.6 !important;
    }

    .surface-auth .route-map {
        margin-top: 25px !important;
        gap: 12px !important;
    }

    .surface-auth .route-step {
        padding: 14px !important;
    }

    .surface-auth .route-step strong {
        font-size: 11.5px !important;
    }

    .surface-auth .route-step span {
        font-size: 10px !important;
    }

    .surface-auth .access-panel {
        padding: 58px clamp(28px, 3.6vw, 62px) 34px !important;
    }

    .surface-auth .access-inner {
        max-width: 490px !important;
    }

    .surface-auth .access-console {
        padding: 28px 30px 25px !important;
        border-radius: 20px !important;
    }

    .surface-auth .access-kicker {
        margin-bottom: 19px !important;
        padding-bottom: 12px !important;
    }

    .surface-auth .panel-head {
        margin-bottom: 20px !important;
    }

    .surface-auth .panel-head h2 {
        font-size: clamp(25px, 2vw, 30px) !important;
    }

    .surface-auth .panel-head p {
        font-size: 12px !important;
    }

    .surface-auth .input input {
        height: 52px !important;
    }

    .surface-auth .btn {
        min-height: 52px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 620px) {
    .surface-auth .story {
        min-height: 238px !important;
        padding: 20px 17px !important;
    }

    .surface-auth .story-main {
        padding: 21px 0 12px !important;
    }

    .surface-auth .story-title {
        font-size: 29px !important;
    }

    .surface-auth .story-description {
        font-size: 11.5px !important;
    }

    .surface-auth .access-inner {
        margin-top: -38px !important;
    }

    .surface-auth .access-console {
        padding: 20px 17px !important;
    }

    .surface-auth .panel-head {
        margin-bottom: 17px !important;
    }

    .surface-auth .panel-head h2 {
        font-size: 23px !important;
    }

    .surface-auth .panel-head p {
        font-size: 11.5px !important;
    }

    .surface-auth .input input,
    .surface-auth .btn {
        min-height: 49px !important;
        height: 49px !important;
    }
}