/* ═══════════════════════════════════════════════════════════════ NossoCine XUI Panel – Main Stylesheet (v2 – 2026-03-04) ═══════════════════════════════════════════════════════════════ */ /* ── Local Bootstrap Icons font (avoids CSP/CDN issues) ──── */ @font-face { font-display: block; font-family: "bootstrap-icons"; src: url("../fonts/bootstrap-icons.woff2") format("woff2"), url("../fonts/bootstrap-icons.woff") format("woff"); } :root { /* Brand */ --primary: #f5a623; --primary-rgb: 245, 166, 35; --primary-hover: #e69510; --accent: #6366f1; --accent-rgb: 99, 102, 241; /* Backgrounds */ --bg-body: #080a10; --bg-card: #111520; --bg-card-hover: #161b2a; --bg-sidebar: #0c0f18; --bg-topbar: #0e1220; --bg-input: #0c1018; /* Borders */ --border: #1c2236; --border-light: #252d42; /* Text */ --text-primary: #e8ecf4; --text-secondary:#9aa3b8; --text-muted: #5e677a; --text-heading: #f0f2f8; /* Status */ --success: #22c55e; --danger: #ef4444; --warning: #f59e0b; --info: #3b82f6; /* Layout */ --sidebar-w: 260px; --radius: 14px; --radius-sm: 10px; --radius-lg: 20px; } /* ═══════════════════════════════════════════════════════════════ LIGHT THEME (activated via data-theme="light" on ) ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg-body: #f0f2f5; --bg-card: #ffffff; --bg-card-hover: #f5f6f8; --bg-sidebar: #ffffff; --bg-topbar: #ffffff; --bg-input: #ffffff; --border: #dce1e8; --border-light: #c8cfd8; --text-primary: #1a1d26; --text-secondary:#5a6170; --text-muted: #8c95a6; --text-heading: #111318; --primary: #e09000; --primary-rgb: 224, 144, 0; --primary-hover: #c67e00; } /* ── Light: body Bootstrap overrides ───────────────────────── */ [data-theme="light"] body { --bs-body-color: #1a1d26; --bs-body-color-rgb: 26, 29, 38; --bs-secondary-color: #5a6170; --bs-secondary-color-rgb: 90, 97, 112; --bs-tertiary-color: #8c95a6; --bs-tertiary-color-rgb: 140, 149, 166; } /* ── Light: Scrollbar ─────────────────────────────────────── */ [data-theme="light"] ::-webkit-scrollbar-track { background: #e8eaee; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #b0b8c4; border-radius: 10px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #8c95a6; } /* ── Light: Sidebar ───────────────────────────────────────── */ [data-theme="light"] .sidebar { background: var(--bg-sidebar); border-right-color: var(--border); box-shadow: 1px 0 8px rgba(0,0,0,.04); } [data-theme="light"] .sidebar .nav-link { color: #4a5060; } [data-theme="light"] .sidebar .nav-link:hover { background: rgba(224,144,0,.06); color: #1a1d26; } [data-theme="light"] .sidebar .nav-link.active { background: rgba(224,144,0,.10); color: #c67e00; } [data-theme="light"] .sidebar hr { border-color: #dce1e8; } /* ── Light: Topbar ────────────────────────────────────────── */ [data-theme="light"] .topbar { background: var(--bg-topbar); border-bottom-color: var(--border); box-shadow: 0 1px 4px rgba(0,0,0,.04); } /* ── Light: Stat cards – use softer bg instead of dark gradients */ [data-theme="light"] .stat-card { box-shadow: 0 2px 8px rgba(0,0,0,.06); } [data-theme="light"] .stat-card--blue { background: linear-gradient(135deg, #e0ecff, #d0dbf8); border-color: #b8c8ee; } [data-theme="light"] .stat-card--purple { background: linear-gradient(135deg, #ede0ff, #ddd0f8); border-color: #c8b8ee; } [data-theme="light"] .stat-card--green { background: linear-gradient(135deg, #d4f5e0, #c0e8d4); border-color: #a8dab5; } [data-theme="light"] .stat-card--yellow { background: linear-gradient(135deg, #fff3d6, #ffe8b8); border-color: #f0d48a; } [data-theme="light"] .stat-label { color: rgba(0,0,0,.5); } [data-theme="light"] .stat-value { color: #1a1d26; } [data-theme="light"] .stat-icon { color: rgba(0,0,0,.2); } [data-theme="light"] .stat-link { color: rgba(0,0,0,.4); } /* ── Light: Panel cards ───────────────────────────────────── */ [data-theme="light"] .panel-card { box-shadow: 0 1px 6px rgba(0,0,0,.05); } [data-theme="light"] .panel-card-header { background: #f8f9fb; } /* ── Light: Tables ────────────────────────────────────────── */ [data-theme="light"] .table { --bs-table-hover-bg: rgba(0,0,0,.025); } [data-theme="light"] .table > thead > tr > th { background: #f4f5f7 !important; color: #5a6170 !important; border-bottom-color: var(--border) !important; } [data-theme="light"] .table > tbody > tr > td { border-color: #eef0f4; } [data-theme="light"] .table-light, [data-theme="light"] .table-light > th, [data-theme="light"] .table-light > td { --bs-table-bg: #f4f5f7 !important; --bs-table-color: #5a6170 !important; color: #5a6170 !important; background: #f4f5f7 !important; } [data-theme="light"] .table-warning, [data-theme="light"] .table-warning > th, [data-theme="light"] .table-warning > td { --bs-table-bg: #fff8eb !important; --bs-table-color: #8a6200 !important; color: #8a6200 !important; background: #fff8eb !important; } /* ── Light: Forms ─────────────────────────────────────────── */ [data-theme="light"] .form-control, [data-theme="light"] .form-select { background: #fff; border-color: #c8cfd8; color: #1a1d26; } [data-theme="light"] .form-control:focus, [data-theme="light"] .form-select:focus { background: #fff; border-color: var(--primary); color: #1a1d26; } [data-theme="light"] .form-control::placeholder { color: #a0a8b6; } [data-theme="light"] .form-control:disabled, [data-theme="light"] .form-control[readonly] { background: #f0f2f5; color: #5a6170; } [data-theme="light"] .input-group-text { background: #f4f5f7; border-color: #c8cfd8; color: #5a6170; } /* ── Light: Buttons ───────────────────────────────────────── */ [data-theme="light"] .btn-outline-secondary { border-color: #c8cfd8; color: #5a6170; } [data-theme="light"] .btn-outline-secondary:hover { background: #f0f2f5; border-color: #a0a8b6; color: #1a1d26; } [data-theme="light"] .btn-secondary { background: #e8eaef; border-color: #c8cfd8; color: #4a5060; } [data-theme="light"] .btn-secondary:hover { background: #dcdfe5; color: #1a1d26; } /* ── Light: Badges ────────────────────────────────────────── */ [data-theme="light"] .badge.bg-success { background: rgba(22,163,74,.12) !important; color: #15803d !important; } [data-theme="light"] .badge.bg-danger { background: rgba(220,38,38,.10) !important; color: #b91c1c !important; } [data-theme="light"] .badge.bg-warning { background: rgba(224,144,0,.12) !important; color: #92600a !important; } [data-theme="light"] .badge.bg-info { background: rgba(37,99,235,.10) !important; color: #1d4ed8 !important; } [data-theme="light"] .badge.bg-secondary { background: #e8eaef !important; color: #5a6170 !important; } [data-theme="light"] .badge.bg-primary { background: rgba(79,70,229,.10) !important; color: #4338ca !important; } /* ── Light: Modals ────────────────────────────────────────── */ [data-theme="light"] .modal-content { background: #fff !important; border-color: #dce1e8; color: #1a1d26; } [data-theme="light"] .modal-content .modal-header { border-bottom-color: #e8eaee; color: #111318; } [data-theme="light"] .modal-content .modal-footer { border-top-color: #e8eaee; } [data-theme="light"] .modal-content .btn-close { filter: none; } /* ── Light: Alerts ────────────────────────────────────────── */ [data-theme="light"] .alert-warning { background: #fff8eb !important; border-color: #f0d48a !important; color: #7a5500 !important; } [data-theme="light"] .alert-danger { background: #fef2f2 !important; border-color: #fca5a5 !important; color: #991b1b !important; } [data-theme="light"] .alert-success { background: #f0fdf4 !important; border-color: #86efac !important; color: #166534 !important; } [data-theme="light"] .alert-info { background: #eff6ff !important; border-color: #93c5fd !important; color: #1e40af !important; } [data-theme="light"] .alert-dark { background: #f4f5f7 !important; border-color: #dce1e8 !important; color: #4a5060 !important; } [data-theme="light"] .alert .btn-close { filter: none; } /* ── Light: Bootstrap component overrides ─────────────────── */ [data-theme="light"] .card { background: #fff; color: #1a1d26; border-color: #dce1e8; } [data-theme="light"] .card-header { background: #f8f9fb; border-color: #e8eaee; color: #111318; } [data-theme="light"] .card-body { color: #1a1d26; } [data-theme="light"] .card-footer { background: #f8f9fb; border-color: #e8eaee; } [data-theme="light"] .list-group-item { background: #fff; color: #1a1d26; border-color: #e8eaee; } [data-theme="light"] .dropdown-menu { background: #fff; border-color: #dce1e8; box-shadow: 0 4px 12px rgba(0,0,0,.1); } [data-theme="light"] .dropdown-item { color: #1a1d26; } [data-theme="light"] .dropdown-item:hover { background: #f0f2f5; color: #1a1d26; } [data-theme="light"] .dropdown-divider { border-color: #e8eaee; } [data-theme="light"] .page-link { background: #fff; color: #1a1d26; border-color: #dce1e8; } [data-theme="light"] .page-link:hover { background: #f0f2f5; color: var(--primary); } [data-theme="light"] .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; } [data-theme="light"] .nav-tabs { border-color: #dce1e8; } [data-theme="light"] .nav-tabs .nav-link { color: #5a6170; } [data-theme="light"] .nav-tabs .nav-link.active { background: #fff; color: #1a1d26; border-color: #dce1e8 #dce1e8 #fff; } [data-theme="light"] .nav-tabs .nav-link:hover { border-color: #dce1e8; color: #1a1d26; } [data-theme="light"] .toast { background: #fff; color: #1a1d26; border-color: #dce1e8; } [data-theme="light"] .popover { background: #fff; color: #1a1d26; border-color: #dce1e8; } [data-theme="light"] .tooltip-inner { background: #1a1d26; color: #fff; } [data-theme="light"] .accordion-item { background: #fff; border-color: #dce1e8; } [data-theme="light"] .accordion-button { background: #fff; color: #1a1d26; } [data-theme="light"] .accordion-button:not(.collapsed) { background: #f8f9fb; color: var(--primary); } [data-theme="light"] .accordion-button::after { filter: none; } [data-theme="light"] .accordion-body { background: #fff; color: #4a5060; } [data-theme="light"] .offcanvas { background: #fff; color: #1a1d26; } [data-theme="light"] .progress { background: #e8eaee; } [data-theme="light"] mark, [data-theme="light"] .mark { background: rgba(224,144,0,.15); color: #1a1d26; } /* ── Light: Text overrides ────────────────────────────────── */ [data-theme="light"] .text-dark { color: #1a1d26 !important; } [data-theme="light"] .text-muted { color: #8c95a6 !important; } [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6, [data-theme="light"] .h1, [data-theme="light"] .h2, [data-theme="light"] .h3, [data-theme="light"] .h4, [data-theme="light"] .h5, [data-theme="light"] .h6 { color: #111318; } [data-theme="light"] p { color: #1a1d26; } [data-theme="light"] label, [data-theme="light"] .form-label { color: #4a5060; } [data-theme="light"] .form-check-label { color: #1a1d26; } [data-theme="light"] .form-text { color: #8c95a6 !important; } [data-theme="light"] code { color: #b45309; background: rgba(224,144,0,.08); } /* ── Light: Auth pages ────────────────────────────────────── */ [data-theme="light"] .auth-wrapper { background: #f0f2f5; } [data-theme="light"] .auth-right { background: linear-gradient(135deg, rgba(224,144,0,.08) 0%, rgba(99,102,241,.06) 50%, rgba(34,197,94,.04) 100%), #f8f9fb; } [data-theme="light"] .input-icon input { background: #fff; border-color: #c8cfd8; color: #1a1d26; } [data-theme="light"] .input-icon input::placeholder { color: #a0a8b6; } [data-theme="light"] .role-tab { background: #fff; border-color: #c8cfd8; color: #5a6170; } [data-theme="light"] .role-tab:hover { background: #f0f2f5; color: #1a1d26; } /* ── Light: Credentials page ──────────────────────────────── */ [data-theme="light"] .cred-box { background: #f8f9fb; border-color: #dce1e8; } [data-theme="light"] .cred-value { background: #fff; border-color: #dce1e8; } [data-theme="light"] .cred-value code { color: #b45309; background: none; } [data-theme="light"] .cred-copy:hover { background: #f0f2f5; color: #1a1d26; } /* ── Light: XuiOne banner ─────────────────────────────────── */ [data-theme="light"] .xuione-banner { background: rgba(224,144,0,.06); border-color: rgba(224,144,0,.15); } /* ── Light: Landing dark backgrounds → white ──────────────── */ [data-theme="light"] .faq-section { background: #f8f9fb; } [data-theme="light"] .contact-section { background: linear-gradient(135deg, #f0f2f5, #e8eaee); } [data-theme="light"] .cta-card { background: #fff; border-color: #dce1e8; } [data-theme="light"] .plan-features li { border-bottom-color: #eef0f4; } [data-theme="light"] .plan-card { background: #fff; border-color: #dce1e8; } [data-theme="light"] .plan-tabs { background: #fff; border-color: #dce1e8; } [data-theme="light"] .plan-tab:hover { background: #f0f2f5; } [data-theme="light"] .promo-feat { background: #f0f2f5; border-color: #dce1e8; color: #4a5060; } [data-theme="light"] .auto-cred-notice { background: rgba(99,102,241,.06); border-color: rgba(99,102,241,.15); } /* ═══════════════════════════════════════════════════════════════ END LIGHT THEME ═══════════════════════════════════════════════════════════════ */ /* ── Reset & Base ──────────────────────────────────────────── */ * { box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: var(--bg-body); color: var(--text-primary); margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Override Bootstrap 5.3 dark-invisible defaults */ --bs-body-color: var(--text-primary); --bs-body-color-rgb: 232, 236, 244; --bs-secondary-color: var(--text-secondary); --bs-secondary-color-rgb: 154, 163, 184; --bs-tertiary-color: var(--text-muted); --bs-tertiary-color-rgb: 94, 103, 122; } /* Force Bootstrap .text-muted to be visible on dark background */ .text-muted { color: var(--text-secondary) !important; } a { color: var(--primary); } a:hover { color: var(--primary-hover); } /* ── Scrollbar ─────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-body); } ::-webkit-scrollbar-thumb { background: #2a3048; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #3a4060; } /* ══════════════════════════════════════════════════════════════ LANDING PAGE ══════════════════════════════════════════════════════════════ */ /* Navbar */ #mainNav { background: rgba(8, 10, 16, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,.05); padding: 14px 0; transition: all .3s ease; } #mainNav.scrolled { background: rgba(8, 10, 16, 0.98); box-shadow: 0 4px 30px rgba(0,0,0,.3); } .navbar-brand { letter-spacing: -.5px; font-weight: 700; } .navbar-dark .nav-link { color: var(--text-secondary) !important; font-weight: 500; font-size: .92rem; transition: color .2s; } .navbar-dark .nav-link:hover { color: #fff !important; } /* Hero */ .hero-section { min-height: 100vh; background: radial-gradient(ellipse at 60% 20%, rgba(var(--primary-rgb), .12) 0%, transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(var(--accent-rgb), .08) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(34, 197, 94, .05) 0%, transparent 45%), linear-gradient(180deg, #050710 0%, var(--bg-body) 100%); padding-top: 100px; } .hero-badge { animation: fadeInDown .8s ease; } .hero-section h1 { text-shadow: 0 2px 40px rgba(var(--primary-rgb), .2); color: var(--text-heading); } .hero-subtitle { color: var(--text-secondary); font-size: 1.15rem; line-height: 1.7; } /* Device icons row */ .device-icon { color: var(--text-secondary); transition: color .2s, transform .2s; } .device-icon:hover { color: var(--primary); transform: translateY(-2px); } /* Stats bar */ .stats-bar { background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .stat-item { padding: 10px 0; } .stat-number { font-size: 2.4rem; font-weight: 800; background: linear-gradient(135deg, var(--primary), #ffcc00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-desc { color: var(--text-secondary); font-size: .88rem; } /* Section shared */ .section-dark { background: var(--bg-body); } .section-darker { background: var(--bg-card); } .section-tag { display: inline-block; background: rgba(var(--primary-rgb), .1); color: var(--primary); border: 1px solid rgba(var(--primary-rgb), .2); padding: 5px 16px; border-radius: 20px; font-size: .8rem; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; } .section-title { color: var(--text-heading); font-weight: 800; } .section-subtitle { color: var(--text-secondary); font-size: 1.05rem; } /* ── Feature cards ─────────────────────────────────────────── */ .feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; transition: all .3s ease; } .feature-card:hover { transform: translateY(-6px); border-color: rgba(var(--primary-rgb), .3); box-shadow: 0 12px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(var(--primary-rgb), .1); background: var(--bg-card-hover); } .feature-icon { width: 56px; height: 56px; background: linear-gradient(135deg, rgba(var(--primary-rgb), .15), rgba(var(--primary-rgb), .05)); border: 1px solid rgba(var(--primary-rgb), .15); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 6px; } /* Icon inside feature-icon should be white for contrast */ .feature-icon i { color: #fff !important; filter: drop-shadow(0 1px 4px rgba(var(--primary-rgb), .5)); } .feature-card h5 { color: var(--text-heading); font-weight: 700; } .feature-card p { color: var(--text-secondary); font-size: .92rem; line-height: 1.6; } /* ── Plan cards ────────────────────────────────────────────── */ .plans-section { background: linear-gradient(180deg, var(--bg-body) 0%, #0a0e1a 100%); } /* Grid layout for plans */ .plans-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: start; max-width: 1200px; margin: 0 auto; justify-content: center; } .plan-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 28px; position: relative; display: flex; flex-direction: column; transition: all .3s ease; } .plan-card:hover { transform: translateY(-8px); box-shadow: 0 4px 30px rgba(0,0,0,.45); } .plan-card--featured { border-color: var(--primary); background: linear-gradient(180deg, rgba(var(--primary-rgb), .06) 0%, var(--bg-card) 50%); } .plan-card--featured::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; background: linear-gradient(135deg, rgba(var(--primary-rgb), .25), rgba(var(--accent-rgb), .15)); filter: blur(30px); } .plan-card--featured:hover { box-shadow: 0 0 0 1px var(--primary), 0 24px 70px rgba(var(--primary-rgb), .18); } .plan-has-badge { padding-top: 48px; } .plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-size: .75rem; font-weight: 700; padding: 6px 22px; border-radius: 50px; white-space: nowrap; text-transform: uppercase; letter-spacing: .3px; box-shadow: 0 4px 15px rgba(var(--primary-rgb), .35); } .plan-badge--teste { background: linear-gradient(135deg, #06d6a0, #059669); box-shadow: 0 4px 15px rgba(6, 214, 160, .35); } .plan-badge--discount { background: linear-gradient(135deg, #ef4444, #f59e0b); box-shadow: 0 4px 15px rgba(239, 68, 68, .35); animation: discountPulse 2s ease-in-out infinite; } @keyframes discountPulse { 0%,100% { box-shadow: 0 4px 15px rgba(239,68,68,.35); } 50% { box-shadow: 0 4px 25px rgba(239,68,68,.55); } } /* Plan name */ .plan-name { font-size: 1.2rem; font-weight: 700; margin-bottom: 16px; color: var(--text-secondary); } .plan-card--featured .plan-name { color: var(--text-heading); } /* Price display — split into currency / amount / cents / period */ .plan-price { margin-bottom: 28px; } .plan-price .plan-currency { font-size: 1.1rem; font-weight: 600; vertical-align: top; position: relative; top: 8px; color: var(--text-secondary); } .plan-price .plan-amount { font-size: 3.2rem; font-weight: 800; letter-spacing: -1px; line-height: 1; margin: 0 2px; color: var(--text-heading); } .plan-price .plan-cents { font-size: 1.1rem; font-weight: 700; vertical-align: top; position: relative; top: 8px; color: var(--text-heading); } .plan-price .plan-period { font-size: .9rem; color: var(--text-muted); font-weight: 400; display: block; margin-top: 2px; } .plan-old-price { display: block; font-size: .95rem; color: var(--text-muted); text-decoration: line-through; margin-bottom: 4px; opacity: .7; } /* Featured card: gradient price */ .plan-card--featured .plan-amount { background: linear-gradient(135deg, var(--primary), #06d6a0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Feature list */ .plan-features { list-style: none; padding: 0; margin-bottom: 28px; flex-grow: 1; } .plan-features li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: .9rem; color: var(--text-secondary); border-bottom: 1px solid rgba(255,255,255,.03); } .plan-features li:last-child { border-bottom: none; } .plan-features .check { color: var(--success); font-weight: 700; flex-shrink: 0; } /* Plan buttons */ .plan-card .btn { margin-top: auto; } .btn-plan { width: 100%; padding: 12px; font-weight: 700; font-size: .9rem; letter-spacing: .5px; border-radius: var(--radius-sm); background: linear-gradient(135deg, #06d6a0, #059669); color: #000; border: none; transition: all .25s ease; } .btn-plan:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(6,214,160,.35); color: #000; } .btn-plan--featured { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; box-shadow: 0 4px 18px rgba(var(--primary-rgb), .3); } .btn-plan--featured:hover { box-shadow: 0 8px 30px rgba(var(--primary-rgb), .45); color: #fff; } /* Plan tab switcher */ .plan-tabs { display: flex; justify-content: center; gap: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 60px; padding: 5px; width: fit-content; margin-left: auto; margin-right: auto; } .plan-tab { background: transparent; border: none; color: var(--text-secondary); padding: 12px 32px; border-radius: 60px; font-weight: 600; font-size: .9rem; cursor: pointer; transition: all .25s ease; } .plan-tab:hover { color: var(--text-primary); background: rgba(255,255,255,.04); } .plan-tab.active { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; box-shadow: 0 4px 18px rgba(var(--primary-rgb), .35); } /* Reseller card specifics */ .reseller-card { text-align: center; } .reseller-credits-num { font-size: 2.8rem; font-weight: 800; background: linear-gradient(135deg, var(--primary), #ffd700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .reseller-credits-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); } .reseller-per { font-size: .85rem; color: var(--text-secondary); background: rgba(var(--primary-rgb), .06); border-radius: 8px; padding: 4px 14px; display: inline-block; } /* ── Steps (How it works) ─────────────────────────────────── */ .howto-section { background: var(--bg-body); } .step-circle { width: 64px; height: 64px; background: linear-gradient(135deg, var(--primary), #e08b00); color: #000; font-weight: 800; font-size: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 8px 24px rgba(var(--primary-rgb), .25); } /* ── FAQ ──────────────────────────────────────────────────── */ .faq-section { background: var(--bg-card); } .accordion-item { background: transparent !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; overflow: hidden; } .accordion-button { background: rgba(255,255,255,.02) !important; color: var(--text-primary) !important; border: none !important; font-weight: 600; font-size: .95rem; padding: 18px 22px; } .accordion-button:not(.collapsed) { color: var(--primary) !important; background: rgba(var(--primary-rgb), .05) !important; box-shadow: none !important; } .accordion-button::after { filter: invert(1) brightness(0.7); } .accordion-button:not(.collapsed)::after { filter: invert(1) brightness(1); } .accordion-button:focus { box-shadow: none !important; } .accordion-body { background: transparent; color: var(--text-secondary); padding: 16px 22px 20px; font-size: .92rem; line-height: 1.6; } /* ── Contact CTA ──────────────────────────────────────────── */ .contact-section { background: linear-gradient(135deg, #0a0e1a, #12101e); } .cta-card { max-width: 620px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 24px; padding: 60px 44px; backdrop-filter: blur(10px); } .cta-card h2 { color: var(--text-heading); } .cta-card p { color: var(--text-secondary); } /* ── Footer ───────────────────────────────────────────────── */ .footer { background: var(--bg-card); border-top: 1px solid var(--border); } .footer a { color: var(--text-muted); text-decoration: none; transition: color .2s; } .footer a:hover { color: var(--primary); } /* ══════════════════════════════════════════════════════════════ PANEL LAYOUT (Admin / Reseller / Customer) ══════════════════════════════════════════════════════════════ */ /* Sidebar */ .sidebar { width: var(--sidebar-w); min-height: 100vh; background: var(--bg-sidebar); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0; padding-top: 8px; } .sidebar .nav-link { color: var(--text-secondary); border-radius: var(--radius-sm); padding: 10px 14px; font-size: .9rem; font-weight: 500; transition: all .2s ease; margin-bottom: 2px; display: flex; align-items: center; } .sidebar .nav-link i { font-size: 1.1rem; width: 22px; text-align: center; flex-shrink: 0; } .sidebar .nav-link:hover { background: rgba(var(--primary-rgb), .08); color: var(--text-primary); } .sidebar .nav-link.active { background: rgba(var(--primary-rgb), .12); color: var(--primary); font-weight: 600; box-shadow: inset 3px 0 0 var(--primary); } .sidebar-footer { padding-top: 12px; } .sidebar hr { border-color: var(--border); opacity: .4; } /* Topbar */ .topbar { background: var(--bg-topbar); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .topbar h5 { color: var(--text-heading); } /* Main content */ .main-content { min-height: 100vh; overflow-x: hidden; background: var(--bg-body); } /* ── Stat Cards ────────────────────────────────────────────── */ .stat-card { border-radius: var(--radius); padding: 22px 24px 16px; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; } .stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,.2); } .stat-card::after { content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; border-radius: 50%; opacity: .06; background: #fff; } .stat-card--blue { background: linear-gradient(135deg, #0f1f4a, #1a2d6e); border: 1px solid #1e3a6a; } .stat-card--purple { background: linear-gradient(135deg, #1f1045, #2d1a6e); border: 1px solid #3a1e6a; } .stat-card--green { background: linear-gradient(135deg, #0a2a1f, #14403a); border: 1px solid #1a4a35; } .stat-card--yellow { background: linear-gradient(135deg, #2a1e00, #3e3000); border: 1px solid #5a4200; } .stat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.55); margin-bottom: 6px; } .stat-value { font-size: 2rem; font-weight: 800; color: #fff; margin: 0; line-height: 1.1; } .stat-icon { font-size: 2.2rem; opacity: .3; color: #fff; } .stat-link { font-size: .78rem; color: rgba(255,255,255,.5); text-decoration: none; margin-top: 10px; display: inline-block; transition: color .2s; } .stat-link:hover { color: var(--primary); } /* ── Panel cards ───────────────────────────────────────────── */ .panel-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .panel-card-header { padding: 16px 22px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: .92rem; color: var(--text-heading); display: flex; align-items: center; background: rgba(255,255,255,.015); } .panel-card-header i { color: var(--primary); font-size: 1rem; } .panel-card-body { padding: 22px; } /* ── Tables ────────────────────────────────────────────────── */ .table { color: var(--text-primary); --bs-table-color: var(--text-primary); --bs-table-bg: transparent; --bs-table-hover-bg: rgba(255,255,255,.025); --bs-table-border-color: var(--border); margin-bottom: 0; } .table > thead > tr > th { background: rgba(255,255,255,.03) !important; color: var(--text-muted) !important; font-size: .76rem; text-transform: uppercase; letter-spacing: .7px; font-weight: 600; border-bottom: 1px solid var(--border) !important; padding: 12px 16px; white-space: nowrap; } .table > tbody > tr > td { padding: 12px 16px; vertical-align: middle; border-color: rgba(255,255,255,.03); color: var(--text-primary); } .table > tbody > tr:hover > td { background: rgba(var(--primary-rgb), .02); } .table-danger, .table-danger > td, .table-danger > th { --bs-table-bg: rgba(239, 68, 68, .06) !important; --bs-table-hover-bg: rgba(239, 68, 68, .1) !important; } /* ── Forms ─────────────────────────────────────────────────── */ .form-control, .form-select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-sm); padding: 10px 14px; font-size: .9rem; transition: border-color .2s, box-shadow .2s; } .form-control:focus, .form-select:focus { background: var(--bg-input); border-color: var(--primary); color: var(--text-primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); } .form-control::placeholder { color: var(--text-muted); } .form-control:disabled, .form-control[readonly] { background: rgba(255,255,255,.02); color: var(--text-secondary); opacity: .8; } .form-label { font-size: .85rem; color: var(--text-secondary); font-weight: 500; margin-bottom: 6px; } .form-text { color: var(--text-muted); font-size: .8rem; } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } .input-group-text { background: var(--bg-input); border-color: var(--border); color: var(--text-muted); } /* ── Buttons ───────────────────────────────────────────────── */ .btn { font-weight: 600; border-radius: var(--radius-sm); font-size: .9rem; transition: all .2s ease; } .btn-warning { background: linear-gradient(135deg, var(--primary), #e09000); border-color: var(--primary); color: #000; font-weight: 700; } .btn-warning:hover { background: linear-gradient(135deg, #e09000, #cc7d00); border-color: #e09000; color: #000; transform: translateY(-1px); box-shadow: 0 4px 15px rgba(var(--primary-rgb), .25); } .btn-outline-secondary { border-color: var(--border-light); color: var(--text-secondary); } .btn-outline-secondary:hover { background: rgba(255,255,255,.06); border-color: var(--text-secondary); color: var(--text-primary); } .btn-outline-warning { border-color: rgba(var(--primary-rgb), .4); color: var(--primary); } .btn-outline-warning:hover { background: rgba(var(--primary-rgb), .1); border-color: var(--primary); color: var(--primary); } .btn-outline-primary { border-color: rgba(59, 130, 246, .4); color: #60a5fa; } .btn-outline-primary:hover { background: rgba(59, 130, 246, .08); border-color: #3b82f6; color: #93bbfc; } .btn-outline-danger { border-color: rgba(239, 68, 68, .4); color: #f87171; } .btn-outline-danger:hover { background: rgba(239, 68, 68, .08); border-color: #ef4444; color: #fca5a5; } .btn-outline-success { border-color: rgba(34, 197, 94, .4); color: #4ade80; } .btn-outline-success:hover { background: rgba(34, 197, 94, .08); border-color: #22c55e; color: #86efac; } .btn-outline-info { border-color: rgba(59, 130, 246, .4); color: #60a5fa; } .btn-outline-info:hover { background: rgba(59, 130, 246, .08); border-color: #3b82f6; color: #93bbfc; } .btn-outline-light { border-color: rgba(255,255,255,.2); color: var(--text-primary); } .btn-outline-light:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); color: #fff; } .btn-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); border-color: #3b82f6; } .btn-primary:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); border-color: #2563eb; transform: translateY(-1px); box-shadow: 0 4px 15px rgba(59,130,246,.25); } .btn-success { background: linear-gradient(135deg, #22c55e, #16a34a); border-color: #22c55e; } .btn-success:hover { background: linear-gradient(135deg, #16a34a, #15803d); border-color: #16a34a; transform: translateY(-1px); box-shadow: 0 4px 15px rgba(34,197,94,.25); } .btn-secondary { background: rgba(255,255,255,.08); border-color: var(--border-light); color: var(--text-secondary); } .btn-secondary:hover { background: rgba(255,255,255,.12); border-color: var(--border-light); color: var(--text-primary); } .btn-xs { padding: 3px 10px; font-size: .75rem; } /* ── Badges ────────────────────────────────────────────────── */ .badge { font-weight: 600; font-size: .74rem; letter-spacing: .3px; padding: 5px 10px; border-radius: 6px; } .badge.bg-success { background: rgba(34,197,94,.15) !important; color: #4ade80 !important; } .badge.bg-danger { background: rgba(239,68,68,.15) !important; color: #f87171 !important; } .badge.bg-warning { background: rgba(245,166,35,.15) !important; color: var(--primary) !important; } .badge.bg-info { background: rgba(59,130,246,.15) !important; color: #60a5fa !important; } .badge.bg-secondary { background: rgba(255,255,255,.08) !important; color: var(--text-secondary) !important; } .badge.bg-primary { background: rgba(99,102,241,.15) !important; color: #a5b4fc !important; } /* Override text-dark on badges to maintain visibility in dark theme */ .badge.text-dark { color: inherit !important; } /* ── User avatar ───────────────────────────────────────────── */ .user-avatar { width: 56px; height: 56px; border-radius: var(--radius); background: linear-gradient(135deg, var(--primary), #e08b00); color: #000; font-size: 1.4rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(var(--primary-rgb), .2); } /* ══════════════════════════════════════════════════════════════ AUTH PAGE (two-column layout) ══════════════════════════════════════════════════════════════ */ .auth-wrapper { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; background: var(--bg-body); } /* Left column – form */ .auth-left { display: flex; flex-direction: column; justify-content: center; padding: 40px 60px; overflow-y: auto; } .auth-brand { margin-bottom: 32px; } .auth-card { width: 100%; max-width: 460px; } .auth-card h1 { font-size: 1.8rem; font-weight: 800; color: var(--text-heading); margin-bottom: 4px; } .auth-subtitle { color: var(--text-secondary); font-size: .95rem; margin-bottom: 16px; } .auth-card .form-label, .auth-form label { color: var(--text-secondary); font-size: .85rem; font-weight: 600; margin-bottom: 6px; display: block; } /* Role switcher */ .role-switcher { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; } .role-tab { display: flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-input); border: 1.5px solid var(--border); text-decoration: none; transition: all .2s ease; } .role-tab:hover { color: var(--text-primary); border-color: var(--border-light); background: var(--bg-card-hover); } .role-tab.active { color: var(--primary); border-color: var(--primary); background: rgba(var(--primary-rgb), .08); } /* Input with icon */ .input-icon { position: relative; } .input-icon i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1rem; pointer-events: none; } .input-icon input { width: 100%; padding: 12px 16px 12px 42px; background: var(--bg-input); border: 1.5px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: .95rem; transition: border-color .2s, box-shadow .2s; } .input-icon input::placeholder { color: var(--text-muted); } .input-icon input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); } /* Form row (2-col) */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Form hint text */ .form-hint { display: block; font-size: .78rem; margin-top: 4px; min-height: 1.2em; } /* Auto-gen notice */ .auto-cred-notice { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .2); border-radius: var(--radius-sm); font-size: .85rem; color: var(--text-secondary); } .auto-cred-notice strong { color: var(--primary); } .auto-cred-icon { font-size: 1.2rem; flex-shrink: 0; color: var(--accent); } /* Terms checkbox */ .terms-check input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; } /* Auth divider */ .auth-divider { display: flex; align-items: center; gap: 16px; margin: 20px 0; color: var(--text-muted); font-size: .85rem; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* Alt links */ .auth-alt { text-align: center; } .auth-alt p { font-size: .9rem; color: var(--text-secondary); margin-bottom: 10px; } .auth-alt-buttons { display: flex; gap: 12px; justify-content: center; } .auth-footer { margin-top: 36px; } .auth-footer a { font-size: .9rem; color: var(--text-secondary); transition: color .2s; } .auth-footer a:hover { color: var(--text-primary); } /* Right column – promo visual */ .auth-right { position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(var(--primary-rgb), .15) 0%, rgba(var(--accent-rgb), .1) 50%, rgba(34, 197, 94, .08) 100%), var(--bg-card); overflow: hidden; } .auth-visual { position: relative; text-align: center; padding: 40px; z-index: 1; } .auth-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 420px; height: 420px; background: radial-gradient(circle, rgba(var(--primary-rgb), .2) 0%, transparent 70%); border-radius: 50%; filter: blur(50px); } .auth-promo h2 { font-size: 2.2rem; font-weight: 800; color: var(--text-heading); line-height: 1.2; } .gradient-text { background: linear-gradient(135deg, var(--primary), #ffcc00, var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .auth-promo p { color: var(--text-secondary); margin: 12px 0 24px; font-size: .95rem; } .auth-promo-features { display: flex; flex-direction: column; gap: 10px; align-items: center; } .promo-feat { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 50px; font-size: .85rem; font-weight: 500; color: var(--text-secondary); } /* Credentials page */ .cred-success-icon { font-size: 3rem; margin-bottom: 16px; } .cred-box { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .cred-warning { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.25); border-radius: var(--radius-sm); font-size: .85rem; color: var(--warning); } .cred-warning-icon { font-size: 1.2rem; flex-shrink: 0; } .cred-field { margin-bottom: 14px; } .cred-field label { display: block; font-size: .78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } .cred-value { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-sm); } .cred-value code { font-family: 'Fira Code', 'Courier New', monospace; font-size: 1.05rem; font-weight: 600; color: var(--primary); flex: 1; letter-spacing: .5px; word-break: break-all; background: none; padding: 0; } .cred-copy { background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--text-secondary); padding: 4px 8px; border-radius: 6px; transition: all .2s; } .cred-copy:hover { background: rgba(255,255,255,.08); color: var(--text-primary); } .cred-tip { text-align: center; font-size: .82rem; color: var(--text-secondary); } /* ── Alerts ────────────────────────────────────────────────── */ .alert { border-radius: var(--radius-sm); font-size: .9rem; border: none; } .alert-warning { background: rgba(245,166,35,.1); color: var(--primary); border-left: 3px solid var(--primary); } .alert-danger { background: rgba(239,68,68,.08); color: #fca5a5; border-left: 3px solid #ef4444; } .alert-success { background: rgba(34,197,94,.08); color: #86efac; border-left: 3px solid #22c55e; } .alert-info { background: rgba(59,130,246,.08); color: #93bbfc; border-left: 3px solid #3b82f6; } .alert-dark { background: rgba(255,255,255,.03); color: var(--text-secondary); border: 1px solid var(--border); } .alert .btn-close { filter: invert(1) brightness(0.6); } /* ── Modals (dark) ─────────────────────────────────────────── */ .modal-content { background: var(--bg-card) !important; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); } .modal-content .modal-header { border-bottom-color: var(--border); color: var(--text-heading); } .modal-content .modal-footer { border-top-color: var(--border); } .modal-content .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* table-light / table-warning inside dark theme */ .table-light, .table-light > th, .table-light > td { --bs-table-bg: rgba(255,255,255,.04) !important; --bs-table-color: var(--text-muted) !important; color: var(--text-muted) !important; background: rgba(255,255,255,.04) !important; } .table-warning, .table-warning > th, .table-warning > td { --bs-table-bg: rgba(245,166,35,.08) !important; --bs-table-color: var(--primary) !important; color: var(--primary) !important; background: rgba(245,166,35,.08) !important; } .table-bordered { --bs-table-border-color: var(--border); } /* Alert dark overrides */ .alert-warning { background: rgba(245,166,35,.1) !important; border-color: rgba(245,166,35,.25) !important; color: var(--text-primary) !important; } .alert-info { background: rgba(59,130,246,.08) !important; border-color: rgba(59,130,246,.2) !important; color: var(--text-primary) !important; } .alert-success { background: rgba(34,197,94,.08) !important; border-color: rgba(34,197,94,.2) !important; color: var(--text-primary) !important; } .alert-danger { background: rgba(239,68,68,.08) !important; border-color: rgba(239,68,68,.2) !important; color: var(--text-primary) !important; } /* ── Global dark-theme text overrides ──────────────────────── */ /* Kill ALL remaining black text from Bootstrap */ .text-dark { color: var(--text-primary) !important; } .fw-semibold, .fw-bold, strong, b { color: inherit; } .list-group-item { background: var(--bg-card); color: var(--text-primary); border-color: var(--border); } .card { background: var(--bg-card); color: var(--text-primary); border-color: var(--border); } .card-header { background: rgba(255,255,255,.03); border-color: var(--border); color: var(--text-heading); } .card-body { color: var(--text-primary); } .card-footer { background: rgba(255,255,255,.02); border-color: var(--border); } .dropdown-menu { background: var(--bg-card); border-color: var(--border); } .dropdown-item { color: var(--text-primary); } .dropdown-item:hover { background: var(--bg-card-hover); color: var(--text-primary); } .dropdown-divider { border-color: var(--border); } .breadcrumb-item, .breadcrumb-item a { color: var(--text-secondary); } .breadcrumb-item.active { color: var(--text-primary); } .page-link { background: var(--bg-card); color: var(--text-primary); border-color: var(--border); } .page-link:hover { background: var(--bg-card-hover); color: var(--primary); } .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #000; } .nav-tabs { border-color: var(--border); } .nav-tabs .nav-link { color: var(--text-secondary); } .nav-tabs .nav-link.active { background: var(--bg-card); color: var(--text-primary); border-color: var(--border) var(--border) var(--bg-card); } .nav-tabs .nav-link:hover { border-color: var(--border); color: var(--text-primary); } .toast { background: var(--bg-card); color: var(--text-primary); border-color: var(--border); } .popover { background: var(--bg-card); color: var(--text-primary); border-color: var(--border); } .tooltip-inner { background: var(--bg-card); color: var(--text-primary); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--text-heading); } p { color: var(--text-primary); } label, .form-label { color: var(--text-primary); } .form-check-label { color: var(--text-primary); } .form-text { color: var(--text-secondary) !important; } .input-group-text { background: var(--bg-input); border-color: var(--border); color: var(--text-secondary); } .accordion-item { background: var(--bg-card); border-color: var(--border); } .accordion-button { background: var(--bg-card); color: var(--text-primary); } .accordion-button:not(.collapsed) { background: var(--bg-card-hover); color: var(--primary); } .accordion-body { background: var(--bg-card); color: var(--text-primary); } .offcanvas { background: var(--bg-card); color: var(--text-primary); } .progress { background: rgba(255,255,255,.06); } mark, .mark { background: rgba(var(--primary-rgb),.2); color: var(--text-primary); } /* ── Code blocks ───────────────────────────────────────────── */ code { color: var(--primary); font-size: .85em; background: rgba(var(--primary-rgb), .06); padding: 2px 6px; border-radius: 4px; } /* ── XuiOne offline banner ─────────────────────────────────── */ .xuione-banner { background: rgba(var(--primary-rgb), .08); border: 1px solid rgba(var(--primary-rgb), .2); border-radius: var(--radius-sm); color: var(--text-primary); padding: 14px 20px; } .xuione-banner i { color: var(--primary); } .xuione-banner strong { color: var(--primary); } /* ── Animations ────────────────────────────────────────────── */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 1200px) { .plans-row { grid-template-columns: repeat(2, 1fr); max-width: 600px; } } @media (max-width: 991px) { .sidebar { position: fixed; left: -260px; z-index: 999; transition: left .3s ease; box-shadow: none; } .sidebar.open { left: 0; box-shadow: 10px 0 40px rgba(0,0,0,.5); } .main-content { margin-left: 0 !important; } .hero-section { padding-top: 80px; } .cta-card { padding: 40px 24px; } .plans-row { grid-template-columns: repeat(2, 1fr); max-width: 600px; } /* Auth: stack to single column, hide promo */ .auth-wrapper { grid-template-columns: 1fr; } .auth-right { display: none; } .auth-left { padding: 40px 24px; align-items: center; } } @media (max-width: 767px) { .stat-number { font-size: 1.8rem; } .plan-price .plan-amount { font-size: 2.4rem; } .plan-card { padding: 30px 20px; } } @media (max-width: 480px) { .plans-row { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .form-row { grid-template-columns: 1fr; } }