:root { --sms-page: #eef2f8; --sms-surface: #ffffff; --sms-soft: #f4f6fb; --sms-line: rgba(91, 103, 148, 0.18); --sms-ink: #192035; --sms-muted: #68718d; --sms-accent: #6574e7; --sms-accent-dark: #4e5dcc; --sms-accent-light: rgba(101, 116, 231, 0.11); --sms-aurora-cyan: #1dc9bd; --sms-aurora-blue: #5f7cf5; --sms-aurora-violet: #9b61e8; --sms-aurora-pink: #dc6fa3; } body { isolation: isolate; position: relative; background-attachment: fixed !important; } body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; } /* Original aurora backdrop: soft moving light fields plus a fine technical grid. */ body::before { inset: -12%; background: radial-gradient(circle at 8% 8%, rgba(29, 201, 189, 0.18), transparent 29%), radial-gradient(circle at 88% 2%, rgba(155, 97, 232, 0.19), transparent 32%), radial-gradient(circle at 62% 92%, rgba(220, 111, 163, 0.11), transparent 31%), radial-gradient(circle at 32% 58%, rgba(95, 124, 245, 0.10), transparent 34%); filter: blur(2px); transform: scale(1.04); animation: sms-aurora-drift 22s ease-in-out infinite alternate; } body::after { opacity: 0.25; background-image: linear-gradient(rgba(87, 101, 154, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(87, 101, 154, 0.11) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.88), transparent 82%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.88), transparent 82%); } @keyframes sms-aurora-drift { from { transform: scale(1.04) translate3d(-1.2%, -0.6%, 0); } to { transform: scale(1.09) translate3d(1.4%, 1%, 0); } } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } html:not(.dark) body { color: var(--sms-ink) !important; background: linear-gradient(145deg, rgba(246, 249, 255, 0.97), rgba(236, 241, 251, 0.94)), #eef2f8 !important; } /* * Sub2API paints an opaque full-screen wrapper above . Make that shell * transparent so the aurora layer is actually visible on every authenticated * page, and remove the older built-in mesh that muddies the new background. */ #app > .min-h-screen { background-color: transparent !important; background-image: none !important; } #app > .min-h-screen > .bg-mesh-gradient { background: transparent !important; } /* AuthLayout has a separate opaque, absolutely positioned gradient layer. */ #app [class~="absolute"][class~="inset-0"][class~="bg-gradient-to-br"] { background: transparent !important; } html:not(.dark) .sidebar { border-right-color: var(--sms-line) !important; background: linear-gradient(180deg, rgba(246, 248, 255, 0.86), rgba(239, 243, 252, 0.80)) !important; box-shadow: 12px 0 38px rgba(63, 72, 120, 0.07) !important; backdrop-filter: blur(24px) saturate(135%) !important; } html:not(.dark) .sidebar-header { border-bottom-color: var(--sms-line) !important; background: rgba(248, 250, 255, 0.72) !important; } .sidebar-logo { border: 1px solid rgba(255, 255, 255, 0.42) !important; border-radius: 10px !important; background: linear-gradient(135deg, var(--sms-aurora-cyan), var(--sms-aurora-blue) 48%, var(--sms-aurora-violet)) !important; box-shadow: 0 9px 24px rgba(95, 124, 245, 0.28), 0 0 24px rgba(29, 201, 189, 0.12) !important; } .sidebar-link { border-radius: 9px !important; } html:not(.dark) .sidebar-link:hover { color: #4758c9 !important; background: rgba(101, 116, 231, 0.08) !important; } html:not(.dark) .sidebar-link-active, html:not(.dark) .sidebar-link-active:hover { color: var(--sms-accent-dark) !important; border: 1px solid rgba(101, 116, 231, 0.14) !important; background: linear-gradient(105deg, rgba(29, 201, 189, 0.10), rgba(101, 116, 231, 0.15), rgba(155, 97, 232, 0.08)) !important; box-shadow: inset 2px 0 0 #5f7cf5, 0 8px 20px rgba(76, 91, 188, 0.07) !important; font-weight: 680 !important; } html:not(.dark) .glass { border-color: var(--sms-line) !important; background: rgba(255, 255, 255, 0.69) !important; backdrop-filter: blur(22px) saturate(140%) !important; } /* SMS-style content density and page surfaces */ body main { padding: 12px !important; } body main > .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 12px !important; } body main .grid.gap-6, body main .grid.gap-4 { gap: 12px !important; } body main .page-header { margin-bottom: 12px !important; } body main .page-title { color: var(--sms-ink) !important; font-size: 18px !important; line-height: 1.35 !important; letter-spacing: -0.025em !important; } html:not(.dark) .card, html:not(.dark) .glass-card, html:not(.dark) .card-glass, html:not(.dark) .stat-card, html:not(.dark) .table-container, html:not(.dark) .modal-content, html:not(.dark) .dialog-container, html:not(.dark) .dropdown { border-color: var(--sms-line) !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.72) !important; box-shadow: 0 18px 44px rgba(48, 57, 103, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.76) !important; backdrop-filter: blur(20px) saturate(135%) !important; } html:not(.dark) main .card { border: 1px solid var(--sms-line) !important; border-radius: 12px !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(247, 249, 255, 0.66)) !important; box-shadow: 0 18px 44px rgba(48, 57, 103, 0.07) !important; backdrop-filter: blur(20px) saturate(135%) !important; } html:not(.dark) main .card:hover { border-color: rgba(101, 116, 231, 0.28) !important; box-shadow: 0 20px 48px rgba(65, 76, 142, 0.10) !important; } /* List pages: filters, tables and pagination */ .table-page-layout { gap: 12px !important; height: calc(100vh - 64px - 24px) !important; } html:not(.dark) .table-page-layout > .layout-section-fixed { padding: 12px !important; border: 1px solid var(--sms-line) !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.71) !important; box-shadow: 0 18px 44px rgba(48, 57, 103, 0.06) !important; backdrop-filter: blur(20px) saturate(135%) !important; } html:not(.dark) .table-scroll-container { border: 1px solid var(--sms-line) !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.75) !important; box-shadow: 0 20px 48px rgba(48, 57, 103, 0.075) !important; backdrop-filter: blur(20px) saturate(135%) !important; } html:not(.dark) .table-scroll-container .table-header, html:not(.dark) .table-scroll-container thead, html:not(.dark) .table-header { background: linear-gradient(180deg, rgba(245, 248, 255, 0.94), rgba(238, 242, 251, 0.88)) !important; } html:not(.dark) .table-scroll-container th, html:not(.dark) .table-scroll-container td, html:not(.dark) .table-wrapper th, html:not(.dark) .table-wrapper td { border-color: #e7e5ec !important; } html:not(.dark) .table-scroll-container th, html:not(.dark) .table-wrapper th { color: #666572 !important; font-size: 12px !important; font-weight: 680 !important; letter-spacing: 0.01em !important; } html:not(.dark) .table-scroll-container tbody, html:not(.dark) .table-wrapper tbody { background: rgba(255, 255, 255, 0.57) !important; } html:not(.dark) .table-scroll-container tbody tr:hover, html:not(.dark) .table-wrapper tbody tr:hover { background: rgba(91, 75, 183, 0.045) !important; } html:not(.dark) main [class~="bg-gray-50"], html:not(.dark) main [class~="bg-gray-50/60"] { background-color: var(--sms-soft) !important; } html:not(.dark) main [class~="border-gray-200"] { border-color: var(--sms-line) !important; } body main [class~="rounded-2xl"] { border-radius: 10px !important; } body main [class~="rounded-xl"] { border-radius: 9px !important; } body main [class~="rounded-lg"] { border-radius: 8px !important; } html:not(.dark) input, html:not(.dark) select, html:not(.dark) textarea, html:not(.dark) .input { border-color: var(--sms-line) !important; border-radius: 8px !important; } html:not(.dark) input:focus, html:not(.dark) select:focus, html:not(.dark) textarea:focus, html:not(.dark) .input:focus { border-color: var(--sms-accent) !important; --tw-ring-color: rgba(91, 75, 183, 0.25) !important; } .btn-primary { color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.20) !important; border-radius: 9px !important; background: linear-gradient(112deg, var(--sms-aurora-cyan), var(--sms-aurora-blue) 46%, var(--sms-aurora-violet)) !important; box-shadow: 0 8px 24px rgba(95, 124, 245, 0.28), 0 0 20px rgba(29, 201, 189, 0.08) !important; } .btn-primary:hover { filter: brightness(1.08) saturate(1.08) !important; box-shadow: 0 11px 30px rgba(95, 124, 245, 0.35), 0 0 28px rgba(29, 201, 189, 0.12) !important; transform: translateY(-1px); } .btn-secondary { color: #555761 !important; border-color: var(--sms-line) !important; border-radius: 8px !important; background: #fff !important; box-shadow: 0 1px 1px rgba(24, 24, 30, 0.04) !important; } .btn-secondary:hover { color: #4f429e !important; border-color: rgba(91, 75, 183, 0.3) !important; background: rgba(91, 75, 183, 0.055) !important; } .btn-ghost:hover { color: #4f429e !important; background: rgba(91, 75, 183, 0.07) !important; } html:not(.dark) main input[type="checkbox"], html:not(.dark) main input[type="radio"] { accent-color: var(--sms-accent) !important; } [class~="text-primary-300"], [class~="text-primary-400"], [class~="text-primary-500"], [class~="text-primary-600"], [class~="text-primary-700"], [class~="text-primary-800"] { color: #5f6edc !important; } [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"] { border-color: rgba(91, 75, 183, 0.42) !important; } [class~="ring-primary-400"], [class~="ring-primary-500"], [class~="ring-primary-600"] { --tw-ring-color: rgba(91, 75, 183, 0.32) !important; } [class~="bg-primary-50"], [class~="bg-primary-100"], [class~="bg-primary-200"] { background-color: rgba(91, 75, 183, 0.11) !important; } [class~="bg-primary-400"], [class~="bg-primary-500"], [class~="bg-primary-600"], [class~="bg-primary-700"] { background-color: #6574e7 !important; } [class~="from-primary-400"], [class~="from-primary-500"], [class~="from-primary-600"] { --tw-gradient-from: #1dc9bd var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(29 201 189 / 0) var(--tw-gradient-to-position) !important; } [class~="to-primary-500"], [class~="to-primary-600"], [class~="to-primary-700"] { --tw-gradient-to: #9b61e8 var(--tw-gradient-to-position) !important; } [class~="hover:bg-primary-100"]:hover { background-color: rgba(91, 75, 183, 0.16) !important; } [class~="hover:bg-primary-600"]:hover, [class~="hover:bg-primary-700"]:hover { background-color: #493c96 !important; } [class~="hover:text-primary-600"]:hover, [class~="hover:text-primary-700"]:hover { color: #493c96 !important; } html.dark [class~="dark:text-primary-300"], html.dark [class~="dark:text-primary-400"] { color: #a99ee5 !important; } html.dark [class~="dark:bg-primary-900/20"], html.dark [class~="dark:bg-primary-900/30"] { background-color: rgba(109, 93, 204, 0.18) !important; } ::selection { color: #30256f !important; background: rgba(91, 75, 183, 0.2) !important; } /* Keep the same purple visual language when Sub2API is in dark mode. */ html.dark body { color: #edf2ff !important; background: linear-gradient(145deg, rgba(5, 10, 24, 0.99), rgba(10, 13, 31, 0.97)), #070b18 !important; } html.dark body::before { background: radial-gradient(circle at 7% 5%, rgba(29, 201, 189, 0.23), transparent 27%), radial-gradient(circle at 92% 4%, rgba(155, 97, 232, 0.27), transparent 31%), radial-gradient(circle at 72% 92%, rgba(220, 111, 163, 0.15), transparent 29%), radial-gradient(circle at 28% 66%, rgba(95, 124, 245, 0.17), transparent 33%); filter: blur(7px); } html.dark body::after { opacity: 0.32; background-image: linear-gradient(rgba(118, 135, 212, 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(118, 135, 212, 0.10) 1px, transparent 1px); } html.dark .sidebar { border-right-color: rgba(132, 148, 218, 0.16) !important; background: linear-gradient(180deg, rgba(13, 19, 40, 0.88), rgba(8, 13, 29, 0.82)) !important; box-shadow: 14px 0 42px rgba(0, 0, 0, 0.22) !important; backdrop-filter: blur(26px) saturate(135%) !important; } html.dark .sidebar-header, html.dark .glass { border-color: rgba(132, 148, 218, 0.16) !important; background: rgba(13, 19, 40, 0.72) !important; backdrop-filter: blur(24px) saturate(140%) !important; } html.dark .sidebar-link:hover { color: #b9c8ff !important; background: rgba(102, 121, 224, 0.10) !important; } html.dark .sidebar-link-active, html.dark .sidebar-link-active:hover { color: #dbe4ff !important; border: 1px solid rgba(96, 202, 205, 0.15) !important; background: linear-gradient(105deg, rgba(29, 201, 189, 0.13), rgba(95, 124, 245, 0.18), rgba(155, 97, 232, 0.12)) !important; box-shadow: inset 2px 0 0 #43d4ca, 0 8px 24px rgba(48, 65, 160, 0.12) !important; } html.dark main .card, html.dark .table-page-layout > .layout-section-fixed, html.dark .table-scroll-container, html.dark .modal-content, html.dark .dialog-container, html.dark .dropdown { border-color: rgba(138, 154, 224, 0.17) !important; border-radius: 12px !important; background: linear-gradient(145deg, rgba(18, 25, 50, 0.82), rgba(10, 16, 35, 0.76)) !important; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important; backdrop-filter: blur(22px) saturate(135%) !important; } html.dark .table-scroll-container .table-header, html.dark .table-scroll-container thead, html.dark .table-header { background: linear-gradient(180deg, rgba(27, 36, 67, 0.91), rgba(18, 25, 50, 0.86)) !important; } html.dark .table-scroll-container tbody, html.dark .table-wrapper tbody { background: rgba(13, 20, 42, 0.56) !important; } html.dark .table-scroll-container th, html.dark .table-scroll-container td, html.dark .table-wrapper th, html.dark .table-wrapper td { border-color: rgba(130, 146, 211, 0.13) !important; } html.dark .table-scroll-container tbody tr:hover, html.dark .table-wrapper tbody tr:hover { background: linear-gradient(90deg, rgba(29, 201, 189, 0.065), rgba(95, 124, 245, 0.10), rgba(155, 97, 232, 0.055)) !important; } html.dark .btn-secondary { color: #dbe3f8 !important; border-color: rgba(135, 151, 216, 0.22) !important; background: rgba(21, 29, 56, 0.78) !important; } html.dark .btn-secondary:hover { color: #d9fdfa !important; border-color: rgba(67, 212, 202, 0.38) !important; background: rgba(29, 201, 189, 0.09) !important; }