/* ============================================================ THEME — Dark (default) + Light Font size and ticker speed controlled via PHP-injected CSS custom properties on element. ============================================================ */ :root, [data-theme="dark"] { --gold: #F5C842; --gold-dark: #D4A017; --gold-glow: rgba(245,200,66,0.18); --navy: #080F1A; --navy-mid: #0E1928; --navy-light: #162438; --navy-border: #1E3250; --teal: #1BBFA0; --purple: #7C5CFC; --coral: #FF6B4A; --text-primary: #EDF2F8; --text-secondary: #7A9AB8; --text-muted: #4A6480; --white: #ffffff; --bg-page: #080F1A; --bg-card: #0E1928; --bg-input: #162438; --border: #1E3250; --shadow: 0 4px 24px rgba(0,0,0,0.4); --wa-green: #25D366; --danger: #FF6B4A; --success: #1BBFA0; --ticker-speed: 28s; --base-font: 15px; } [data-theme="light"] { --navy: #F0F4FA; --navy-mid: #FFFFFF; --navy-light: #F5F8FD; --navy-border: #D8E3EF; --text-primary: #0D1B2A; --text-secondary: #4A6480; --text-muted: #8AA0B8; --white: #0D1B2A; --bg-page: #F0F4FA; --bg-card: #FFFFFF; --bg-input: #F5F8FD; --border: #D8E3EF; --shadow: 0 4px 24px rgba(0,0,0,0.08); --gold: #C9960F; --gold-dark: #A37800; --teal: #0D9E85; --coral: #E05030; --purple: #6040E0; } * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { background:var(--bg-page); color:var(--text-primary); font-family:'DM Sans',-apple-system,sans-serif; font-size:var(--base-font,15px); line-height:1.7; transition:background .25s,color .25s; } h1,h2,h3,h4,h5 { font-family:'Sora',sans-serif; } a { color:var(--gold); text-decoration:none; } ::-webkit-scrollbar { width:6px; } ::-webkit-scrollbar-track { background:var(--bg-page); } ::-webkit-scrollbar-thumb { background:var(--border); border-radius:99px; } /* ===== LAYOUT ===== */ .app-shell { display:flex; min-height:100vh; } .sidebar { width:250px; background:var(--bg-card); border-right:1px solid var(--border); display:flex; flex-direction:column; position:fixed; top:0; left:0; height:100vh; z-index:100; transition:transform .25s,background .25s; } .sidebar-logo { padding:22px 24px; font-family:'Sora',sans-serif; font-weight:800; font-size:16px; color:var(--gold); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; } .sidebar-logo span.sub { color:var(--text-muted); font-weight:400; font-size:11px; display:block; } .sidebar-nav { flex:1; padding:18px 12px; overflow-y:auto; } .sidebar-nav a { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; color:var(--text-secondary); font-size:13.5px; font-weight:500; margin-bottom:4px; transition:all .15s; border:1px solid transparent; } .sidebar-nav a:hover { background:rgba(128,128,128,0.06); color:var(--text-primary); } .sidebar-nav a.active { background:rgba(245,200,66,0.1); color:var(--gold); border-color:rgba(245,200,66,0.2); } [data-theme="light"] .sidebar-nav a.active { background:rgba(201,150,15,0.08); } .nav-icon { font-size:16px; width:20px; text-align:center; } .sidebar-section-title { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); padding:16px 14px 8px; } .sidebar-foot { padding:16px; border-top:1px solid var(--border); } .sidebar-user { display:flex; align-items:center; gap:10px; } .avatar-circle { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); display:flex; align-items:center; justify-content:center; font-weight:800; color:#080F1A; font-size:15px; flex-shrink:0; } .sidebar-user-info { flex:1; overflow:hidden; } .sidebar-user-info .name { font-size:13px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sidebar-user-info .role { font-size:11px; color:var(--text-muted); } .logout-link { color:var(--coral); font-size:12px; margin-top:10px; display:block; } .main-content { flex:1; margin-left:250px; min-height:100vh; display:flex; flex-direction:column; } .topbar { height:64px; background:var(--bg-card); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 28px; position:sticky; top:0; z-index:50; gap:16px; transition:background .25s; } .topbar h1 { font-size:18px; font-weight:800; color:var(--text-primary); } .topbar-right { display:flex; align-items:center; gap:8px; } .menu-toggle { display:none; background:transparent; border:1px solid var(--border); color:var(--text-primary); border-radius:8px; padding:8px 12px; cursor:pointer; font-size:16px; } .page-body { padding:28px; flex:1; background:var(--bg-page); } /* ===== THEME + LANG SWITCHERS ===== */ .theme-toggle,.lang-toggle { background:var(--bg-input); border:1px solid var(--border); border-radius:999px; padding:6px 14px; cursor:pointer; font-size:12px; font-weight:700; color:var(--text-secondary); display:inline-flex; align-items:center; gap:5px; transition:all .2s; white-space:nowrap; } .theme-toggle:hover,.lang-toggle:hover { border-color:var(--gold); color:var(--gold); } /* ===== CARDS ===== */ .card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:1.6rem; transition:background .25s,border-color .25s; } .card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; } .card-head h3 { font-size:15px; font-weight:700; color:var(--text-primary); } .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:24px; } .stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:1.5rem; position:relative; overflow:hidden; transition:background .25s; } .stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; } .stat-card.c-gold::before { background:linear-gradient(90deg,var(--gold),var(--gold-dark)); } .stat-card.c-teal::before { background:linear-gradient(90deg,var(--teal),#0DCDB2); } .stat-card.c-purple::before { background:linear-gradient(90deg,var(--purple),#9B7EFD); } .stat-card.c-coral::before { background:linear-gradient(90deg,var(--coral),#FF8F76); } .stat-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; } .stat-value { font-family:'Sora',sans-serif; font-size:1.9rem; font-weight:800; color:var(--text-primary); line-height:1; } .stat-sub { font-size:12px; color:var(--text-secondary); margin-top:6px; } /* ===== FORMS ===== */ label { display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:8px; } input,select,textarea { width:100%; background:var(--bg-input); border:1px solid var(--border); border-radius:10px; color:var(--text-primary); font-size:14px; padding:11px 14px; font-family:'DM Sans',sans-serif; transition:border-color .2s,background .25s; } input:focus,select:focus,textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,200,66,0.1); } input:disabled,select:disabled { opacity:.6; cursor:not-allowed; } .form-group { margin-bottom:18px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; } select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B7490' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; } /* ===== BUTTONS ===== */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:13.5px; padding:11px 22px; border-radius:999px; border:none; cursor:pointer; transition:all .2s; text-decoration:none; font-family:'Sora',sans-serif; white-space:nowrap; } .btn-primary { background:var(--gold); color:#080F1A; } .btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(245,200,66,0.3); } .btn-outline { background:transparent; color:var(--text-primary); border:1px solid var(--border); } .btn-outline:hover { border-color:var(--text-muted); background:rgba(128,128,128,0.05); } .btn-teal { background:var(--teal); color:#080F1A; } .btn-teal:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(27,191,160,0.3); } .btn-danger { background:rgba(255,107,74,0.1); color:var(--coral); border:1px solid rgba(255,107,74,0.25); } .btn-danger:hover { background:rgba(255,107,74,0.2); } .btn-sm { padding:7px 16px; font-size:12px; } .btn-block { width:100%; } .btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; } /* ===== TABLES ===== */ .table-wrap { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; overflow:auto; } table { width:100%; border-collapse:collapse; min-width:600px; } thead { background:var(--bg-input); } thead th { padding:13px 18px; text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); white-space:nowrap; } tbody tr { border-top:1px solid var(--border); transition:background .15s; } tbody tr:hover { background:rgba(128,128,128,0.03); } tbody td { padding:14px 18px; font-size:13.5px; color:var(--text-primary); white-space:nowrap; } /* ===== BADGES ===== */ .badge { display:inline-block; font-size:11px; font-weight:700; padding:4px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; } .badge-success { background:rgba(27,191,160,0.12); color:var(--teal); } .badge-warning { background:rgba(245,200,66,0.12); color:var(--gold); } .badge-danger { background:rgba(255,107,74,0.12); color:var(--coral); } .badge-info { background:rgba(124,92,252,0.12); color:#9B7EFD; } .badge-muted { background:rgba(128,128,128,0.1); color:var(--text-secondary); } [data-theme="light"] .badge-warning { color:#9A6800; } /* ===== ALERTS ===== */ .alert { padding:14px 18px; border-radius:10px; font-size:13.5px; margin-bottom:18px; border:1px solid; } .alert-success { background:rgba(27,191,160,0.07); border-color:rgba(27,191,160,0.25); color:var(--teal); } .alert-error { background:rgba(255,107,74,0.07); border-color:rgba(255,107,74,0.25); color:var(--coral); } .alert-info { background:rgba(245,200,66,0.06); border-color:rgba(245,200,66,0.2); color:var(--gold); } /* ===== AUTH ===== */ .auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; overflow:hidden; background:var(--bg-page); } .auth-bg { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 900px 500px at 50% -60px,rgba(245,200,66,0.08) 0%,transparent 70%),radial-gradient(ellipse 400px 300px at 20% 80%,rgba(27,191,160,0.05) 0%,transparent 70%); } .auth-card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:2.6rem; max-width:440px; width:100%; position:relative; z-index:2; } .auth-logo { text-align:center; margin-bottom:26px; } .auth-logo .icon { font-size:34px; } .auth-logo h1 { font-size:19px; font-weight:800; color:var(--gold); margin-top:8px; } .auth-logo p { font-size:12.5px; color:var(--text-secondary); margin-top:4px; } .auth-foot { text-align:center; margin-top:20px; font-size:13px; color:var(--text-secondary); } .auth-topbar { position:fixed; top:16px; right:20px; display:flex; gap:8px; z-index:100; } /* ===== PROGRESS BAR ===== */ .progress-bar { width:100%; height:8px; background:var(--bg-input); border-radius:999px; overflow:hidden; margin-top:8px; } .progress-fill { height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-dark)); border-radius:999px; transition:width .4s; } /* ===== TICKER (speed from CSS variable) ===== */ .ticker-wrap { background:rgba(245,200,66,0.07); border-bottom:1px solid rgba(245,200,66,0.2); overflow:hidden; padding:8px 0; white-space:nowrap; } .ticker-track { display:inline-block; padding-left:100%; animation:ticker var(--ticker-speed,28s) linear infinite; font-size:12.5px; color:var(--gold); font-weight:600; } @keyframes ticker { 0%{transform:translateX(0);} 100%{transform:translateX(-100%);} } /* ===== UTILS ===== */ .text-muted { color:var(--text-muted); } .text-secondary { color:var(--text-secondary); } .text-teal { color:var(--teal); } .text-gold { color:var(--gold); } .text-coral { color:var(--coral); } .mb-0 { margin-bottom:0 !important; } .mt-1 { margin-top:8px; } .flex { display:flex; } .flex-between { display:flex; align-items:center; justify-content:space-between; } .gap-2 { gap:10px; } .copy-input-group { display:flex; gap:8px; } .copy-input-group input { flex:1; } /* ===== MODAL ===== */ .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); display:none; align-items:center; justify-content:center; z-index:1000; padding:20px; } .modal-overlay.show { display:flex; } .modal-box { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:1.8rem; max-width:480px; width:100%; max-height:90vh; overflow-y:auto; } .modal-box h3 { font-size:16px; font-weight:700; color:var(--text-primary); margin-bottom:16px; } /* ===== POPUP (partner) ===== */ .announce-popup { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:2000; padding:20px; } .announce-box { background:var(--bg-card); border:1px solid rgba(245,200,66,0.3); border-radius:16px; padding:2rem; max-width:440px; width:100%; text-align:center; position:relative; } .announce-box .close-x { position:absolute; top:12px; right:14px; background:transparent; border:none; color:var(--text-muted); font-size:20px; cursor:pointer; line-height:1; } .announce-box .icon { font-size:38px; margin-bottom:14px; } .announce-box h3 { font-size:17px; font-weight:800; color:var(--gold); margin-bottom:10px; } .announce-box p { font-size:13.5px; color:var(--text-secondary); line-height:1.8; } /* ===== HOMEPAGE ===== */ .lp-header { position:sticky; top:0; z-index:200; background:var(--bg-card); border-bottom:1px solid var(--border); transition:background .25s; } .lp-nav { max-width:1200px; margin:0 auto; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; } .lp-logo { font-family:'Sora',sans-serif; font-weight:800; font-size:18px; color:var(--gold); display:flex; align-items:center; gap:8px; } .lp-nav-links { display:flex; align-items:center; gap:26px; } .lp-nav-links a { color:var(--text-secondary); font-weight:600; font-size:14px; } .lp-nav-links a:hover { color:var(--text-primary); } .lp-nav-cta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .hero { max-width:1200px; margin:0 auto; padding:80px 28px 60px; text-align:center; } .hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(245,200,66,0.1); border:1px solid rgba(245,200,66,0.25); color:var(--gold); font-size:13px; font-weight:700; padding:8px 20px; border-radius:999px; margin-bottom:24px; } .hero h1 { font-size:clamp(1.8rem,6vw,3.6rem); font-weight:900; line-height:1.15; margin-bottom:20px; color:var(--text-primary); } .hero p.lead { font-size:17px; color:var(--text-secondary); max-width:640px; margin:0 auto 32px; line-height:1.9; } .hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .hero-stats { display:flex; justify-content:center; gap:50px; margin-top:50px; flex-wrap:wrap; } .hero-stat { text-align:center; } .hero-stat .num { font-family:'Sora',sans-serif; font-size:2rem; font-weight:800; color:var(--gold); } .hero-stat .lbl { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-top:4px; } .section { max-width:1200px; margin:0 auto; padding:70px 28px; } .section-alt { background:var(--bg-card); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .section-head { text-align:center; max-width:640px; margin:0 auto 50px; } .section-tag { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); margin-bottom:12px; } .section-head h2 { font-size:clamp(1.4rem,4vw,2.4rem); font-weight:800; margin-bottom:14px; color:var(--text-primary); } .section-head p { color:var(--text-secondary); font-size:15px; line-height:1.8; } .commission-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .commission-card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:2rem; transition:transform .2s,border-color .2s; } .commission-card:hover { transform:translateY(-4px); border-color:rgba(245,200,66,0.3); } .commission-card .cm-icon { font-size:32px; margin-bottom:16px; } .commission-card h3 { font-size:16px; font-weight:700; margin-bottom:10px; color:var(--text-primary); } .commission-card .rate { font-family:'Sora',sans-serif; font-size:2.2rem; font-weight:800; color:var(--gold); margin:12px 0; } .commission-card .rate span { font-size:14px; color:var(--text-muted); font-weight:600; } .commission-card .cm-badge { display:inline-block; font-size:10px; font-weight:700; padding:3px 10px; border-radius:999px; background:rgba(245,200,66,0.12); color:var(--gold); margin-bottom:10px; } .commission-card p { font-size:13.5px; color:var(--text-secondary); line-height:1.8; } .tiers-scroll { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; } .tier-card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:1.6rem; text-align:center; transition:transform .2s; } .tier-card:hover { transform:translateY(-4px); } .tier-card .ticon { font-size:36px; margin-bottom:10px; } .tier-card h4 { font-size:15px; font-weight:800; margin-bottom:6px; } .tier-card .tmin { font-size:11px; color:var(--text-muted); margin-bottom:14px; } .tier-card .trates { font-size:12px; color:var(--text-secondary); display:flex; flex-direction:column; gap:4px; padding-top:12px; border-top:1px solid var(--border); } .tier-card .trates strong { color:var(--text-primary); } .plans-tabs { display:flex; justify-content:center; gap:10px; margin-bottom:36px; flex-wrap:wrap; } .plan-tab { padding:10px 22px; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--text-secondary); font-weight:700; font-size:13px; cursor:pointer; transition:all .2s; font-family:'Sora',sans-serif; } .plan-tab.active { background:var(--gold); color:#080F1A; border-color:var(--gold); } .plan-category { display:none; } .plan-category.active { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .plan-card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:1.6rem; position:relative; } .plan-card .tag { position:absolute; top:14px; right:14px; font-size:10px; font-weight:700; background:rgba(245,200,66,0.12); color:var(--gold); padding:4px 10px; border-radius:999px; text-transform:uppercase; } .plan-card h4 { font-size:15px; font-weight:700; margin-bottom:10px; color:var(--text-primary); } .plan-card .price { font-family:'Sora',sans-serif; font-size:1.6rem; font-weight:800; color:var(--text-primary); } .plan-card .price span { font-size:12px; color:var(--text-muted); font-weight:500; } .plan-card .commission-tag { margin-top:14px; font-size:12px; color:var(--teal); font-weight:700; } .howit-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .howit-card { text-align:center; } .howit-num { width:52px; height:52px; border-radius:50%; background:rgba(245,200,66,0.1); border:1px solid rgba(245,200,66,0.25); color:var(--gold); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; margin:0 auto 16px; } .howit-card h4 { font-size:14.5px; font-weight:700; margin-bottom:8px; color:var(--text-primary); } .howit-card p { font-size:13px; color:var(--text-secondary); line-height:1.8; } .testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .testimonial-card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:1.5rem; } .testimonial-card .earn { font-family:'Sora',sans-serif; font-size:1.4rem; font-weight:800; color:var(--gold); margin:10px 0 6px; } .proof-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .proof-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.2rem; text-align:center; } .proof-card .proof-amt { font-family:'Sora',sans-serif; font-size:1.3rem; font-weight:800; color:var(--teal); } .faq-item { border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:10px; } .faq-q { padding:16px 20px; cursor:pointer; font-weight:700; display:flex; justify-content:space-between; align-items:center; background:var(--bg-card); transition:background .2s; font-size:14.5px; } .faq-q:hover { background:var(--bg-input); } .faq-a { padding:0 20px; max-height:0; overflow:hidden; transition:max-height .35s ease,padding .35s; color:var(--text-secondary); font-size:13.5px; line-height:1.9; } .faq-a.open { max-height:400px; padding:16px 20px; } .faq-arrow { transition:transform .3s; font-size:12px; } .faq-arrow.open { transform:rotate(180deg); } .cta-banner { background:linear-gradient(135deg,rgba(245,200,66,0.08),rgba(27,191,160,0.05)); border:1px solid rgba(245,200,66,0.2); border-radius:16px; padding:3rem 2rem; text-align:center; } .cta-banner h2 { font-size:clamp(1.4rem,4vw,2rem); font-weight:800; margin-bottom:14px; color:var(--text-primary); } .cta-banner p { color:var(--text-secondary); margin-bottom:24px; } .lp-footer { border-top:1px solid var(--border); background:var(--bg-card); padding:40px 28px; text-align:center; color:var(--text-muted); font-size:13px; transition:background .25s; } .lp-footer a { color:var(--text-secondary); } .wa-float { position:fixed; bottom:24px; right:24px; width:56px; height:56px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 8px 24px rgba(37,211,102,0.35); z-index:300; } /* Homepage popup banner */ .home-notice-banner { padding:16px 24px; margin:0; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:14px; justify-content:space-between; flex-wrap:wrap; } .home-notice-banner p { font-size:14px; flex:1; } .home-notice-banner .close-notice { background:transparent; border:none; color:var(--text-muted); cursor:pointer; font-size:18px; padding:0 4px; } .home-popup-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:2000; padding:20px; } .home-popup-box { background:var(--bg-card); border:1px solid rgba(245,200,66,0.35); border-radius:16px; padding:2rem; max-width:440px; width:100%; text-align:center; position:relative; animation:popIn .3s ease; } @keyframes popIn { from{transform:scale(0.9);opacity:0} to{transform:scale(1);opacity:1} } .home-popup-box .close-x { position:absolute; top:12px; right:14px; background:transparent; border:none; color:var(--text-muted); font-size:22px; cursor:pointer; line-height:1; } .home-popup-box .icon { font-size:40px; margin-bottom:14px; } .home-popup-box h3 { font-size:18px; font-weight:800; color:var(--gold); margin-bottom:10px; } .home-popup-box p { font-size:14px; color:var(--text-secondary); line-height:1.8; } /* ===== LIGHT MODE FIXES ===== */ [data-theme="light"] thead { background:#EDF2F8; } [data-theme="light"] .stat-value { color:#0D1B2A; } [data-theme="light"] .topbar { box-shadow:0 1px 8px rgba(0,0,0,0.07); } /* ===== RESPONSIVE / MOBILE ===== */ @media (max-width:980px) { .sidebar { transform:translateX(-100%); } .sidebar.open { transform:translateX(0); box-shadow:4px 0 40px rgba(0,0,0,0.4); } .main-content { margin-left:0; } .menu-toggle { display:inline-flex; align-items:center; } .stats-grid { grid-template-columns:1fr 1fr !important; gap:12px; } .form-row { grid-template-columns:1fr; gap:0; } .commission-grid,.tiers-scroll { grid-template-columns:1fr 1fr; } .plan-category.active,.howit-grid { grid-template-columns:1fr 1fr; } .lp-nav-links { display:none; } .testimonial-grid { grid-template-columns:1fr 1fr; } .proof-grid { grid-template-columns:1fr 1fr; } } @media (max-width:768px) { .btn { min-height:44px; padding:10px 18px; font-size:13px; } .btn-sm { min-height:36px; padding:8px 14px; font-size:12px; } .btn-block { width:100%; } .topbar { height:auto; min-height:56px; padding:8px 14px; flex-wrap:wrap; gap:6px; } .topbar h1 { font-size:15px; } .topbar-right { gap:5px; } .theme-toggle,.lang-toggle { padding:5px 10px; font-size:11px; } input,select,textarea { font-size:16px !important; } /* prevents iOS zoom */ .table-wrap { border-radius:10px; } tbody td { padding:10px 12px; font-size:12.5px; } thead th { padding:10px 12px; } .card { padding:1rem; border-radius:12px; } .card-head h3 { font-size:14px; } .auth-card { padding:1.5rem; } .auth-topbar { top:10px; right:12px; gap:6px; } .page-body { padding:12px; } .modal-box { padding:1.2rem; } .copy-input-group { flex-direction:column; } .copy-input-group input,.copy-input-group .btn { width:100%; } .flex-between { flex-wrap:wrap; gap:8px; } .flex.gap-2 { flex-wrap:wrap; } .hero { padding:40px 16px 30px; } .hero h1 { font-size:1.7rem; } .hero p.lead { font-size:14px; } .hero-stats { gap:20px; } .hero-stat .num { font-size:1.5rem; } .hero-cta { flex-direction:column; align-items:center; } .hero-cta .btn { width:100%; max-width:300px; } .section { padding:40px 16px; } .section-head h2 { font-size:1.4rem; } .commission-grid { grid-template-columns:1fr !important; } .tiers-scroll { grid-template-columns:1fr 1fr !important; } .plan-category.active { grid-template-columns:1fr 1fr !important; } .plans-tabs { gap:6px; } .plan-tab { padding:8px 14px; font-size:12px; } .howit-grid { grid-template-columns:1fr 1fr !important; } .testimonial-grid { grid-template-columns:1fr !important; } .proof-grid { grid-template-columns:1fr 1fr !important; } .ticker-wrap { font-size:11.5px; } .lp-nav { padding:12px 16px; } .lp-nav-cta .btn-outline { display:none; } .lp-logo { font-size:15px; } .cta-banner { padding:2rem 1.2rem; } .home-notice-banner { padding:12px 16px; } } @media (max-width:420px) { .stats-grid { grid-template-columns:1fr !important; } .tiers-scroll { grid-template-columns:1fr !important; } .plan-category.active { grid-template-columns:1fr !important; } .howit-grid { grid-template-columns:1fr !important; } .proof-grid { grid-template-columns:1fr !important; } .lp-nav-cta .btn { display:none; } .lp-nav-cta .lang-toggle,.lp-nav-cta .theme-toggle { display:inline-flex; } }