/* imemandate — shared design system Glass + depth + gradient "premium SaaS" look. Pure CSS (no 3D libraries, no heavy JS) so the dashboard's fast, DB-only load stays fast — the depth here is layered shadows, blur, and gradients, not extra network weight. */ :root { /* Dark theme — matches the login page's palette so the whole app reads as one product instead of a light dashboard bolted onto a dark login. */ --bg: #08080f; --surface: #14141f; --surface-2: #1a1a28; --glass: rgba(255, 255, 255, 0.035); --glass-strong: rgba(255, 255, 255, 0.05); --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(167, 139, 250, 0.35); --text: #f4f4fa; --text-muted: rgba(255, 255, 255, 0.58); --text-faint: rgba(255, 255, 255, 0.4); --primary: #4f46e5; --primary-2: #7c3aed; --primary-dark: #4338ca; --primary-light: rgba(99, 102, 241, 0.18); --primary-contrast: #ffffff; --gradient-primary: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%); --gradient-mesh: radial-gradient(circle at 8% 8%, rgba(99, 102, 241, 0.28), transparent 38%), radial-gradient(circle at 92% 18%, rgba(236, 72, 153, 0.2), transparent 40%), radial-gradient(circle at 25% 92%, rgba(56, 189, 248, 0.22), transparent 42%), radial-gradient(circle at 88% 90%, rgba(124, 58, 237, 0.22), transparent 42%); --success: #22c55e; --success-light: rgba(34, 197, 94, 0.16); --success-glow: rgba(34, 197, 94, 0.3); --danger: #f87171; --danger-light: rgba(248, 113, 113, 0.16); --danger-glow: rgba(248, 113, 113, 0.28); --warning: #fbbf24; --warning-light: rgba(251, 191, 36, 0.16); --warning-glow: rgba(251, 191, 36, 0.28); --info: #38bdf8; --info-light: rgba(56, 189, 248, 0.16); --info-glow: rgba(56, 189, 248, 0.28); --neutral: #9296b5; --neutral-light: rgba(255, 255, 255, 0.06); --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05); --shadow-glow-primary: 0 12px 28px -8px rgba(79, 70, 229, 0.5); --ease: cubic-bezier(.22, 1, .36, 1); } /* Light theme — opt-in via data-theme="light" on , toggled by the sun/moon button in the topbar and remembered in localStorage. Dark stays the default look (matches the login page); light is the alternate. */ [data-theme="light"] { --bg: #eef0fb; --surface: #ffffff; --surface-2: #f8fafc; --glass: rgba(255, 255, 255, 0.72); --glass-strong: rgba(255, 255, 255, 0.88); --border: rgba(148, 138, 255, 0.16); --border-strong: rgba(79, 70, 229, 0.22); --text: #171932; --text-muted: #6b7089; --text-faint: #9a9fb8; --primary-light: #eef2ff; --gradient-mesh: radial-gradient(circle at 8% 8%, rgba(99, 102, 241, 0.16), transparent 38%), radial-gradient(circle at 92% 18%, rgba(236, 72, 153, 0.12), transparent 40%), radial-gradient(circle at 25% 92%, rgba(56, 189, 248, 0.14), transparent 42%), radial-gradient(circle at 88% 90%, rgba(124, 58, 237, 0.12), transparent 42%); --success: #16a34a; --success-light: #ecfdf3; --success-glow: rgba(22, 163, 74, 0.25); --danger: #dc2626; --danger-light: #fef2f2; --danger-glow: rgba(220, 38, 38, 0.22); --warning: #d97706; --warning-light: #fffbeb; --warning-glow: rgba(217, 119, 6, 0.22); --info: #0284c7; --info-light: #f0f9ff; --info-glow: rgba(2, 132, 199, 0.22); --neutral: #6b7280; --neutral-light: #f3f4f6; --shadow-xs: 0 1px 2px rgba(23, 25, 50, 0.05); --shadow-sm: 0 2px 8px rgba(23, 25, 50, 0.06); --shadow: 0 8px 24px rgba(23, 25, 50, 0.08), 0 2px 6px rgba(23, 25, 50, 0.04); --shadow-lg: 0 20px 48px rgba(23, 25, 50, 0.16), 0 6px 16px rgba(23, 25, 50, 0.08); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; overflow-x: hidden; } body { background: var(--bg); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-feature-settings: 'ss01' on, 'cv01' on; position: relative; min-height: 100vh; } /* Soft animated gradient-mesh backdrop behind every page */ body::before { content: ''; position: fixed; inset: 0; background: var(--gradient-mesh); z-index: 0; pointer-events: none; } .app-topbar, .page-shell { position: relative; z-index: 1; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.25); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.4); background-clip: padding-box; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes floatOrb { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-16px, 18px) scale(1.06); } } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Topbar (glass) ---------- */ .app-topbar { background: var(--glass-strong); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--border); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: sticky; top: 0; z-index: 1030; box-shadow: var(--shadow-xs); } .app-topbar-actions { display: flex; gap: 8px; flex-shrink: 0; } .app-topbar-actions .btn { white-space: nowrap; } @media (max-width: 640px) { .app-topbar { padding: 12px 16px; justify-content: flex-start; } .app-topbar-actions { width: 100%; order: 3; } .app-topbar-actions .btn { flex: 1 1 0; text-align: center; padding: 9px 10px; font-size: 13px; } } .app-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; color: var(--text); text-decoration: none; min-width: 0; } @media (max-width: 640px) { .app-brand { font-size: 15.5px; } } .app-brand .mark { width: 36px; height: 36px; border-radius: 11px; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 700; flex-shrink: 0; box-shadow: var(--shadow-glow-primary); transition: transform .3s var(--ease); } .app-brand:hover .mark { transform: rotate(-6deg) scale(1.05); } .app-brand small { display: block; font-weight: 500; font-size: 11.5px; color: var(--text-faint); } /* ---------- Buttons ---------- */ .btn { border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; padding: 9px 18px; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); border: 1px solid transparent; } .btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 9px; } .btn:active { transform: translateY(1px) scale(.98); } .btn-primary { background: var(--gradient-primary); border: none; box-shadow: var(--shadow-glow-primary); } .btn-primary:hover, .btn-primary:focus { background: var(--gradient-primary); filter: brightness(1.08); box-shadow: 0 16px 32px -8px rgba(79, 70, 229, 0.55); transform: translateY(-1px); } .btn-outline-primary { color: #a5b4fc; border-color: var(--border-strong); background: rgba(255, 255, 255, 0.03); } .btn-outline-primary:hover { background: var(--gradient-primary); color: #fff; border-color: transparent; box-shadow: var(--shadow-glow-primary); transform: translateY(-1px); } .btn-success { background: linear-gradient(135deg, #22c55e, #16a34a); border: none; box-shadow: 0 12px 24px -8px var(--success-glow); } .btn-success:hover { filter: brightness(1.08); transform: translateY(-1px); } .btn-outline-light.btn-ghost { color: var(--text-muted); border-color: var(--border); background: rgba(255, 255, 255, 0.04); } .btn-outline-light.btn-ghost:hover { background: rgba(255, 255, 255, 0.09); color: var(--text); box-shadow: var(--shadow-sm); transform: translateY(-1px); } /* ---------- Surfaces / cards ---------- */ .surface { background: var(--glass); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .card { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); } .card-body { color: var(--text); } /* ---------- KPI stat tiles ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .stat-grid { grid-template-columns: 1fr; } } .stat-tile { background: var(--glass-strong); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 16px; position: relative; overflow: hidden; transition: transform .32s var(--ease), box-shadow .32s var(--ease); animation: fadeInUp .5s var(--ease) both; } .stat-tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,0) 40%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .stat-tile:hover { transform: translateY(-5px) scale(1.015); box-shadow: var(--shadow-lg); } .stat-tile .icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; box-shadow: var(--shadow-sm); } .stat-tile .label { font-size: 12px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .stat-tile .value { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.25; letter-spacing: -.01em; } .stat-tile.tone-primary .icon { background: linear-gradient(135deg, rgba(99,102,241,.28), rgba(124,58,237,.16)); color: #a5b4fc; box-shadow: 0 8px 18px -6px rgba(79,70,229,.4); } .stat-tile.tone-success .icon { background: linear-gradient(135deg, rgba(34,197,94,.28), rgba(16,185,129,.16)); color: var(--success); box-shadow: 0 8px 18px -6px var(--success-glow); } .stat-tile.tone-warning .icon { background: linear-gradient(135deg, rgba(251,191,36,.28), rgba(245,158,11,.16)); color: var(--warning); box-shadow: 0 8px 18px -6px var(--warning-glow); } .stat-tile.tone-info .icon { background: linear-gradient(135deg, rgba(56,189,248,.28), rgba(14,165,233,.16)); color: var(--info); box-shadow: 0 8px 18px -6px var(--info-glow); } /* ---------- Toolbar ---------- */ .toolbar { background: var(--glass); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm); } .form-control, .form-select { width: 100%; display: block; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); font-size: 14px; background: rgba(255, 255, 255, 0.03); color: var(--text); transition: box-shadow .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .form-control::placeholder { color: var(--text-faint); } .form-control:focus, .form-select:focus { background: rgba(255, 255, 255, 0.05); border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); outline: none; color: var(--text); } .form-select option { background: var(--surface); color: var(--text); } .input-group-text { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border: 1px solid var(--border-strong); border-right: none; background: var(--surface-2); color: var(--text-muted); } /* ---------- Data table ---------- */ .data-card { background: var(--glass-strong); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; animation: fadeInUp .5s var(--ease) both; animation-delay: .08s; } table.modern-table { margin-bottom: 0; border-collapse: separate; border-spacing: 0; } table.modern-table thead th { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); color: var(--text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; border-bottom: 1px solid var(--border); padding: 13px 16px; white-space: nowrap; } table.modern-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; color: var(--text); } table.modern-table tbody tr:last-child td { border-bottom: none; } table.modern-table tbody tr { transition: background .15s var(--ease), box-shadow .15s var(--ease); } table.modern-table tbody tr:hover { background: linear-gradient(90deg, rgba(99,102,241,.12), rgba(124,58,237,.07)); box-shadow: inset 3px 0 0 var(--primary); } .cell-customer { display: flex; align-items: center; gap: 11px; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gradient-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; box-shadow: 0 6px 14px -4px rgba(79, 70, 229, 0.5); } .cell-customer .name { font-weight: 650; color: var(--text); } .cell-customer .phone { font-size: 12.5px; color: var(--text-faint); } /* Currency values get their own weight/alignment so they read as the headline figure in the row, not just another line of gray table text. */ .col-amount { text-align: right; } .amount-value { font-weight: 750; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .amount-value .currency { color: var(--text-faint); font-weight: 600; margin-right: 1px; } .amount-placeholder { color: var(--text-faint); font-weight: 600; } .text-loading { color: var(--text-faint); font-size: 13px; } .text-loading::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 6px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; } /* ---------- Status pills ---------- */ .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4.5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: capitalize; box-shadow: var(--shadow-xs); } .status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px currentColor22; } .status-pill.active, .status-pill.paid { background: var(--success-light); color: var(--success); } .status-pill.authenticated { background: var(--primary-light); color: var(--primary); } .status-pill.created, .status-pill.issued { background: var(--info-light); color: var(--info); } .status-pill.completed { background: var(--info-light); color: var(--info); } .status-pill.pending, .status-pill.halted, .status-pill.draft, .status-pill.partially_paid { background: var(--warning-light); color: var(--warning); } .status-pill.paused { background: var(--warning-light); color: var(--warning); } .status-pill.expired, .status-pill.cancelled, .status-pill.error, .status-pill.deleted { background: var(--danger-light); color: var(--danger); } /* ---------- Bootstrap component overrides for dark theme ---------- The E-Mandate bank list and Payment History use raw Bootstrap modals/tabs/pagination/tables (not the custom .modern-table system), and Bootstrap's own CSS assumes a light page by default. Without these, those popups would render as light-on-white islands inside an otherwise dark app. Colored accents (bank-code badges, success/primary table headers) are left as Bootstrap styles them — they read as intentional color accents, the same way status pills do. */ .modal-content { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .modal-header { border-bottom-color: var(--border); } .modal-header:not(.bg-primary) .btn-close { filter: invert(1) grayscale(1) brightness(1.8); } .modal-body.bg-light { background: #0e0e18 !important; } .modal-footer { border-top-color: var(--border); } .nav-pills .nav-link { color: var(--text-muted); } .nav-pills .nav-link:hover { color: var(--text); } .nav-pills .nav-link.active { background: var(--gradient-primary); color: #fff; } .table { color: var(--text); border-color: var(--border); } .table > :not(caption) > * > * { background-color: transparent; color: var(--text); border-bottom-color: var(--border); box-shadow: none; } .table-bordered, .table-bordered > :not(caption) > * > * { border-color: var(--border); } .table-hover > tbody > tr:hover > * { background-color: rgba(255, 255, 255, 0.05); color: var(--text); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.02); } .table-responsive { scrollbar-color: rgba(99,102,241,.4) transparent; } .pagination .page-link { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); } .pagination .page-link:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); } .pagination .page-item.active .page-link { background: var(--gradient-primary); border-color: transparent; color: #fff; } /* Bootstrap's .text-muted ships with !important and a mid-gray tuned for light backgrounds — needs its own !important to actually override it. */ .text-muted { color: var(--text-muted) !important; } /* ---------- Flatpickr (date picker) dark theme ---------- Ships as a stark white popup by default; the Create EMI page's date field would otherwise pop open a light-mode calendar in an otherwise dark app. */ .flatpickr-calendar { background: var(--surface); box-shadow: var(--shadow-lg); border: 1px solid var(--border); } .flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--surface); } .flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { border-top-color: var(--surface); } .flatpickr-months .flatpickr-month { background: var(--surface); color: var(--text); fill: var(--text); } .flatpickr-current-month { color: var(--text); } .flatpickr-current-month input.cur-year { color: var(--text); background: transparent; } .flatpickr-monthDropdown-months { background: var(--surface); color: var(--text); } .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: var(--surface); color: var(--text); } .flatpickr-prev-month, .flatpickr-next-month { fill: var(--text-muted); color: var(--text-muted); } .flatpickr-prev-month:hover, .flatpickr-next-month:hover { fill: var(--primary); color: var(--primary); } .flatpickr-prev-month svg, .flatpickr-next-month svg { fill: inherit; } .flatpickr-weekdays { background: var(--surface); } span.flatpickr-weekday { background: var(--surface); color: var(--text-muted); } .flatpickr-day { color: var(--text); } .flatpickr-day.today { border-color: var(--primary); } .flatpickr-day:hover, .flatpickr-day:focus { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.08); color: var(--text); } .flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--gradient-primary); border-color: transparent; color: #fff; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-faint); } .flatpickr-day.flatpickr-disabled { opacity: 0.35; } .numInputWrapper span.arrowUp:after { border-bottom-color: var(--text-muted); } .numInputWrapper span.arrowDown:after { border-top-color: var(--text-muted); } .numInputWrapper:hover { background: transparent; } /* ---------- Empty state ---------- */ .empty-state { text-align: center; padding: 70px 20px; color: var(--text-muted); } .empty-state .icon { font-size: 42px; margin-bottom: 12px; filter: drop-shadow(0 6px 14px rgba(79,70,229,.25)); } /* ---------- Page shell used by form pages ---------- */ .page-shell { max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; } /* ---------- Light mode overrides ---------- Everything above adapts automatically via tokens. These are the handful of rules that hardcode a value tuned specifically for the dark palette (gradients can't be expressed as a single custom property) and need an explicit light-mode counterpart. */ [data-theme="light"] .btn-outline-primary { color: var(--primary); background: #fff; } [data-theme="light"] .btn-outline-primary:hover { color: #fff; } [data-theme="light"] .btn-outline-light.btn-ghost { background: rgba(255, 255, 255, 0.6); } [data-theme="light"] .btn-outline-light.btn-ghost:hover { background: #fff; } [data-theme="light"] .stat-tile.tone-primary .icon { background: linear-gradient(135deg, #eef2ff, #e0e7ff); color: var(--primary); box-shadow: 0 8px 18px -6px rgba(79,70,229,.35); } [data-theme="light"] .stat-tile.tone-success .icon { background: linear-gradient(135deg, #ecfdf3, #d1fae5); } [data-theme="light"] .stat-tile.tone-warning .icon { background: linear-gradient(135deg, #fffbeb, #fef3c7); } [data-theme="light"] .stat-tile.tone-info .icon { background: linear-gradient(135deg, #f0f9ff, #e0f2fe); } [data-theme="light"] .form-control, [data-theme="light"] .form-select { background: #fff; } [data-theme="light"] .form-control:focus, [data-theme="light"] .form-select:focus { background: #fff; } [data-theme="light"] table.modern-table thead th { background: linear-gradient(180deg, rgba(238, 240, 253, .9), rgba(238, 240, 253, .5)); } [data-theme="light"] table.modern-table tbody tr:hover { background: linear-gradient(90deg, rgba(99,102,241,.05), rgba(124,58,237,.03)); } [data-theme="light"] .card, [data-theme="light"] .modal-content { background: #fff; } [data-theme="light"] .modal-header:not(.bg-primary) .btn-close { filter: none; } [data-theme="light"] .modal-body.bg-light { background: #f8f9fa !important; } [data-theme="light"] .flatpickr-day:hover, [data-theme="light"] .flatpickr-day:focus { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.05); } /* ---------- Theme toggle ---------- */ .theme-toggle { width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--glass); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); } .theme-toggle:hover { background: var(--glass-strong); color: var(--text); transform: translateY(-1px); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } /* ---------- Auth (login) — dark split hero ---------- */ .auth-shell { min-height: 100vh; position: relative; overflow: hidden; background: #08080f; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; perspective: 1400px; } @media (max-width: 980px) { .auth-shell { grid-template-columns: 1fr; text-align: center; padding-top: 60px; } } .auth-glow { position: absolute; top: -20%; right: -10%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; background: radial-gradient(circle, rgba(124, 58, 237, .35), rgba(79, 70, 229, .16) 45%, transparent 70%); filter: blur(10px); pointer-events: none; z-index: 0; } .auth-glow.two { top: auto; right: auto; bottom: -25%; left: -10%; background: radial-gradient(circle, rgba(236, 72, 153, .18), transparent 65%); width: 45vw; height: 45vw; } /* Faint 3D perspective grid floor for depth. Its rotateX() transform inflates the element's actual layout box far beyond what's visible (verified: ~1600px wide at a 512px viewport) — a known cross-browser gotcha where an ancestor's overflow:hidden doesn't reliably clip a 3D-transformed descendant on real mobile browsers. That was the real cause of text getting cut off on narrow screens: this box was blowing out the layout, not the text itself. Isolating the transform inside its own plain (non-3D) overflow:hidden wrapper guarantees the clip actually holds everywhere. */ .auth-floor-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .auth-grid-floor { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 55%; background-image: linear-gradient(rgba(129, 140, 248, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(129, 140, 248, .18) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(600px) rotateX(72deg); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.8), transparent 85%); mask-image: linear-gradient(to top, rgba(0,0,0,.8), transparent 85%); } .auth-left, .auth-right { position: relative; z-index: 1; min-width: 0; } .auth-left { padding: 40px 20px 40px 72px; } @media (max-width: 980px) { .auth-left { padding: 0 24px 32px; max-width: 100%; overflow-wrap: break-word; } } .auth-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: #c7cbe8; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(10px); margin-bottom: 26px; animation: fadeInUp .5s var(--ease) both; } .auth-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 10px 2px rgba(167,139,250,.8); } .auth-headline { font-size: clamp(38px, 5vw, 58px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 20px; background: linear-gradient(120deg, #a5b4fc 0%, #c4b5fd 35%, #f0abfc 70%, #fbcfe8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: fadeInUp .6s var(--ease) both; animation-delay: .05s; } .auth-sub { color: #9296b5; font-size: 16px; line-height: 1.6; max-width: 440px; margin: 0 0 28px; animation: fadeInUp .6s var(--ease) both; animation-delay: .1s; } @media (max-width: 980px) { .auth-sub { max-width: 100%; } } .auth-ring { width: 90px; height: 46px; border: 1.5px solid rgba(167, 139, 250, .45); border-radius: 50%; transform: rotate(-8deg); animation: fadeInUp .6s var(--ease) both; animation-delay: .15s; } @media (max-width: 980px) { .auth-ring { display: none; } } .auth-right { display: flex; align-items: center; justify-content: center; padding: 40px 32px 60px; } .auth-card { width: 100%; max-width: 420px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 28px; backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); box-shadow: 0 30px 70px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); padding: 44px 38px; color: #fff; position: relative; z-index: 1; transform-style: preserve-3d; transition: transform .12s var(--ease); animation: fadeInUp .6s var(--ease) both; animation-delay: .1s; } .auth-card .corner { position: absolute; width: 34px; height: 34px; border: 1.5px solid rgba(167, 139, 250, .4); pointer-events: none; } .auth-card .corner.tl { top: -10px; right: 34px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; transform: rotate(0deg); } .auth-card .corner.br { bottom: -10px; left: 34px; border-left: none; border-top: none; border-radius: 0 0 6px 0; } .auth-icon { width: 60px; height: 60px; border-radius: 18px; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 22px; box-shadow: 0 16px 32px -10px rgba(124, 58, 237, .65); transform: translateZ(30px); } .auth-icon svg { width: 26px; height: 26px; } .auth-card h1 { font-size: 25px; font-weight: 800; margin-bottom: 6px; transform: translateZ(20px); } .auth-card > p { font-size: 14px; color: rgba(255,255,255,.55); margin-bottom: 30px; transform: translateZ(20px); } .auth-card form { transform: translateZ(16px); } .auth-field { margin-bottom: 18px; } .auth-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 8px; } .auth-input-wrap { position: relative; } .auth-input-wrap svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: rgba(255,255,255,.4); pointer-events: none; } .auth-card .form-control { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: #fff; padding: 13px 15px 13px 42px; border-radius: 13px; font-size: 14.5px; } .auth-input-wrap.has-toggle .form-control { padding-right: 44px; } .auth-toggle-password { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: none; border-radius: 9px; background: transparent; color: rgba(255,255,255,.45); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .auth-toggle-password:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); } .auth-toggle-password:focus-visible { outline: 2px solid rgba(167,139,250,.7); outline-offset: 2px; } .auth-toggle-password svg { position: static; transform: none; width: 18px; height: 18px; color: inherit; pointer-events: none; } .auth-toggle-password .icon-eye-off { display: none; } .auth-toggle-password.is-visible .icon-eye { display: none; } .auth-toggle-password.is-visible .icon-eye-off { display: block; } .auth-card .form-control::placeholder { color: rgba(255,255,255,.32); } .auth-card .form-control:focus { background: rgba(255,255,255,.07); border-color: rgba(167, 139, 250, .6); box-shadow: 0 0 0 4px rgba(124, 58, 237, .18); color: #fff; } .auth-submit { width: 100%; padding: 15px; margin-top: 10px; background: var(--gradient-primary); border: none; border-radius: 14px; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 18px 36px -12px rgba(124, 58, 237, .6); transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease); cursor: pointer; } .auth-submit svg { width: 17px; height: 17px; transition: transform .2s var(--ease); } .auth-submit:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 22px 44px -12px rgba(124, 58, 237, .75); } .auth-submit:hover svg { transform: translateX(4px); } .auth-submit:active { transform: translateY(0); } .auth-card .error { margin-top: 18px; padding: 11px 14px; font-size: 13px; background: rgba(220, 38, 38, .16); border: 1px solid rgba(248, 113, 113, .3); border-radius: var(--radius-sm); color: #fca5a5; transform: translateZ(16px); }