/* ============================================================ FaucetKF — Design System (Dark + Light) Palette: Violet/Purple + Cyan accent, soft-dark bg Theme switch: Accent badalni ho to sirf --primary wali 3-4 lines badlo ============================================================ */ :root, [data-theme="dark"]{ /* soft dark — dark black nahi, halka charcoal-navy */ --bg-main:#12131c; --bg-main-2:#171927; --bg-navbar:#14161f; --bg-card:#1a1d2b; --bg-card-2:#1e2132; --border:#2a2e44; --border-light:#373c58; --text-primary:#f1f2f8; --text-secondary:#a9aec4; --text-muted:#7c8199; /* PRIMARY — violet */ --primary:#8b7cff; --primary-2:#7c6cff; --primary-3:#a99bff; --primary-deep:#5b4bf0; --primary-bg:rgba(139,124,255,.13); --primary-bg-strong:rgba(139,124,255,.22); /* secondary accents */ --cyan:#22d3ee; --cyan-bg:rgba(34,211,238,.15); --amber:#fbbf24; --amber-bg:rgba(251,191,36,.17); --pink:#f472b6; --pink-bg:rgba(244,114,182,.17); --blue:#4d9cff; --blue-bg:rgba(77,156,255,.18); --gold:#ffd75e; --green:#34d399; --green-bg:rgba(52,211,153,.15); --red:#fb7185; --red-bg:rgba(251,113,133,.15); --shadow-soft:0 4px 16px rgba(0,0,0,.20); /* helpers */ --nav-link:#c9cdda; --divider:rgba(255,255,255,.07); --hero-text:#a5aac2; --reward-dim:rgba(139,124,255,.55); --decor:rgba(130,140,190,.13); --social-bg:rgba(255,255,255,.08); --social-color:#e6e8f2; --earner-stat:#cdd2e4; --crown:rgba(255,255,255,.08); --logo-hole:#14161f; } [data-theme="light"]{ --bg-main:#f5f6fa; --bg-main-2:#ffffff; --bg-navbar:#ffffff; --bg-card:#ffffff; --bg-card-2:#f7f8fc; --border:#e2e4ef; --border-light:#d0d3e4; --text-primary:#191b29; --text-secondary:#565b73; --text-muted:#7b8098; --primary:#6a5cff; --primary-2:#5b4bf0; --primary-3:#5b4bf0; --primary-deep:#4a3ad8; --primary-bg:rgba(106,92,255,.09); --primary-bg-strong:rgba(106,92,255,.16); --cyan:#0891b2; --cyan-bg:rgba(8,145,178,.10); --amber:#d99a00; --amber-bg:rgba(217,154,0,.13); --pink:#d94c8a; --pink-bg:rgba(217,76,138,.11); --blue:#357fd8; --blue-bg:rgba(53,127,216,.11); --gold:#d6a900; --green:#059669; --green-bg:rgba(5,150,105,.10); --red:#e11d48; --red-bg:rgba(225,29,72,.10); --shadow-soft:0 4px 14px rgba(40,40,90,.07); --nav-link:#3c415a; --divider:rgba(30,35,80,.09); --hero-text:#565b73; --reward-dim:rgba(106,92,255,.55); --decor:rgba(106,92,255,.12); --social-bg:rgba(106,92,255,.10); --social-color:#3c415a; --earner-stat:#e6e3fb; --crown:rgba(255,255,255,.18); --logo-hole:#ffffff; } /* ============ BODY ============ */ *{box-sizing:border-box} html,body{overflow-x:hidden} body{ margin:0; background:radial-gradient(circle at 50% -20%,rgba(139,124,255,.04),transparent 40%),var(--bg-main); color:var(--text-primary); font-family:"Inter","Segoe UI",Arial,sans-serif; font-size:14px;line-height:1.5;min-height:100vh; } a{text-decoration:none} body,.site-header,.stat-card,.action-card,.recent-card,.top-earners,.site-footer,.mobile-nav,.icon-button,.account-button,.card-box,.modal-content,.form-control,.form-select{ transition:background-color .2s ease,border-color .2s ease,color .2s ease; } .container.main-container, .site-header .container, .site-footer .container{max-width:1088px} .main-container{padding-top:23px;padding-bottom:22px} /* ============ HEADER (63px) ============ */ .site-header{background:var(--bg-navbar);border-bottom:1px solid var(--border)} .header-inner{height:63px;display:flex;align-items:center;gap:18px} .brand{display:inline-flex;align-items:center;gap:10px;flex:1} .brand-logo{flex-shrink:0} .logo-hole{fill:var(--logo-hole)} .brand-name{font-size:24px;font-weight:700;letter-spacing:-.3px;color:var(--text-primary);line-height:1} .main-nav{display:flex;align-items:center;gap:28px} .main-nav a{position:relative;height:63px;display:inline-flex;align-items:center;font-size:13.5px;font-weight:500;color:var(--nav-link)} .main-nav a:hover{color:var(--primary-3)} .main-nav a.active{color:var(--primary-3);font-weight:600} .main-nav a.active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:10px;width:40px;height:2px;border-radius:2px;background:var(--primary-2)} .header-account{display:flex;align-items:center;gap:10px;flex:1;justify-content:flex-end} .user-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#8b7cff,#5b4bf0); color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0} .username{font-size:13px;color:var(--text-secondary);white-space:nowrap} .account-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;min-width:98px; padding:0 15px;border:1px solid var(--primary-2);border-radius:9px;background:transparent;color:var(--primary-3); font-size:13px;font-weight:600} .account-button:hover{background:var(--primary-bg);color:var(--primary-3)} .account-button i{font-size:15px} .icon-button{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--border-light);border-radius:8px;background:transparent;color:var(--text-primary);font-size:15px} .icon-button:hover{border-color:var(--primary-2);color:var(--primary-3)} .menu-toggle{display:none} .mobile-nav{background:var(--bg-navbar);border-bottom:1px solid var(--border);padding:4px 15px 12px} .mobile-nav a{display:block;padding:11px 4px;font-size:14px;font-weight:600;color:var(--nav-link);border-bottom:1px solid var(--divider)} .mobile-nav a:last-child{border-bottom:0} .mobile-nav a.active{color:var(--primary-3)} /* ============ HERO ============ */ .hero-section{ position:relative;min-height:275px;border-radius:14px;overflow:hidden; border:1px solid rgba(139,124,255,.25);display:flex;align-items:center; background: radial-gradient(circle at 82% 50%,rgba(139,124,255,.20),transparent 34%), radial-gradient(circle at 15% 110%,rgba(34,211,238,.08),transparent 40%), linear-gradient(135deg,#1d1b30,#161828 55%,#231c40); } [data-theme="light"] .hero-section{ border-color:rgba(106,92,255,.30); background: radial-gradient(circle at 82% 50%,rgba(106,92,255,.13),transparent 34%), radial-gradient(circle at 15% 110%,rgba(8,145,178,.06),transparent 40%), linear-gradient(135deg,#f0effb,#f8f8fd 55%,#e8e5fb); } .hero-content{width:57%;padding:30px 10px 28px 41px;position:relative;z-index:2} .hero-badge{display:inline-flex;align-items:center;gap:7px;height:27px;padding:6px 11px;border-radius:999px; background:var(--primary-bg-strong);color:var(--primary-3);font-size:12px;font-weight:600} .hero-badge i{font-size:12px} .hero-content h1{margin:14px 0 8px;font-size:40px;font-weight:700;line-height:1.12;max-width:520px;color:var(--text-primary)} .hero-content h1 span{color:var(--primary-3)} .hero-content p{margin:0;max-width:510px;font-size:15px;line-height:1.55;color:var(--hero-text)} .hero-actions{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap} .hero-illustration{width:43%;height:100%;position:relative;z-index:1;display:flex;align-items:center;justify-content:center} .hero-art{width:100%;max-width:470px;height:auto;display:block} .hero-shadow{opacity:.35} [data-theme="light"] .hero-shadow{opacity:.12} /* ============ BUTTONS ============ */ .btn-brand{height:42px;padding:0 20px;border-radius:11px;border:0;background:linear-gradient(135deg,#8b7cff,#6a5cff); color:#fff;font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.2s ease} .btn-brand:hover{filter:brightness(1.1);color:#fff;transform:translateY(-1px)} .btn-outline-brand{height:42px;padding:0 20px;border-radius:11px;border:1px solid var(--primary-2);background:transparent; color:var(--primary-3);font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.2s ease} .btn-outline-brand:hover{background:var(--primary-bg);color:var(--primary-3)} .btn-action{height:34px;padding:0 14px;border-radius:9px;font-size:12px;font-weight:600; display:inline-flex;align-items:center;gap:7px;transition:.2s ease} .btn-action-dark{background:rgba(18,10,60,.42);border:0;color:#fff} .btn-action-dark:hover{background:rgba(18,10,60,.6);color:#fff} .btn-action-outline{background:transparent;border:1px solid var(--primary-2);color:var(--primary-3)} .btn-action-outline:hover{background:var(--primary-bg);color:var(--primary-3)} /* --- Extra button variants (tables/forms ke liye) --- */ .btn-sm-brand{height:30px;padding:0 12px;border-radius:8px;border:0;background:linear-gradient(135deg,#8b7cff,#6a5cff); color:#fff;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:5px;transition:.2s ease} .btn-sm-brand:hover{filter:brightness(1.1);color:#fff} .btn-sm-outline{height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--primary-2);background:transparent; color:var(--primary-3);font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:5px;transition:.2s ease} .btn-sm-outline:hover{background:var(--primary-bg);color:var(--primary-3)} .btn-soft{height:30px;padding:0 12px;border-radius:8px;border:0;font-size:11.5px;font-weight:600; display:inline-flex;align-items:center;gap:5px;transition:.2s ease} .btn-soft:hover{filter:brightness(1.12)} .btn-soft-success{background:var(--green-bg);color:var(--green)} .btn-soft-danger{background:var(--red-bg);color:var(--red)} .btn-soft-warning{background:var(--amber-bg);color:var(--amber)} .btn-soft-blue{background:var(--blue-bg);color:var(--blue)} .btn-soft-violet{background:var(--primary-bg-strong);color:var(--primary-3)} /* ============ STAT CARDS ============ */ .stats-row{margin-top:20px} .stat-card{height:100%;min-height:128px;padding:15px 22px;border-radius:14px;border:1px solid var(--border); background:var(--bg-card);box-shadow:var(--shadow-soft);transition:transform .2s ease,border-color .2s ease,background-color .2s ease} .stat-card:hover{transform:translateY(-2px);border-color:var(--border-light)} .stat-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center; font-size:22px;margin-bottom:9px} .icon-blue{background:var(--blue-bg);color:var(--blue)} .icon-violet{background:var(--primary-bg-strong);color:var(--primary-3)} .icon-amber{background:var(--amber-bg);color:var(--amber)} .icon-pink{background:var(--pink-bg);color:var(--pink)} .icon-cyan{background:var(--cyan-bg);color:var(--cyan)} .icon-green{background:var(--green-bg);color:var(--green)} .icon-red{background:var(--red-bg);color:var(--red)} .stat-num{font-size:26px;font-weight:700;line-height:1;color:var(--text-primary)} .stat-label{font-size:13px;color:var(--text-secondary);margin-top:9px} /* ============ GENERIC CARD BOX (forms/settings/tables wrapper) ============ */ .card-box{background:var(--bg-card);border:1px solid var(--border);border-radius:14px; box-shadow:var(--shadow-soft);overflow:hidden;margin-bottom:18px} .card-box-header{padding:15px 20px;border-bottom:1px solid var(--divider);display:flex;align-items:center;gap:9px; font-size:14px;font-weight:700;color:var(--text-primary);flex-wrap:wrap} .card-box-header i{color:var(--primary-3);font-size:16px} .card-box-header .header-tools{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .card-box-body{padding:20px} /* ============ ACTION CARDS ============ */ .action-section{margin-top:20px} .action-card{position:relative;overflow:hidden;border-radius:14px;min-height:173px;height:100%;padding:18px 23px} .action-card>*{position:relative;z-index:1} .action-icon{width:43px;height:43px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:23px} .action-card h3{font-size:19px;font-weight:700;margin:18px 0 6px} .action-card p{font-size:12.5px;margin-bottom:14px} .faucet-card{border:1px solid rgba(139,124,255,.35); background:linear-gradient(135deg,#8a6cff 0%,#7455f2 55%,#6244e8 100%)} .faucet-card::before{content:"";position:absolute;right:-70px;top:-80px;width:230px;height:230px;border-radius:50%; background:rgba(255,255,255,.08);z-index:0} .faucet-card::after{content:"";position:absolute;left:55%;bottom:-140px;width:280px;height:280px;border-radius:50%; background:rgba(30,15,90,.22);z-index:0} .faucet-card .action-icon{background:rgba(255,255,255,.18);color:#fff} .faucet-card h3{color:#fff} .faucet-card p{color:rgba(255,255,255,.92)} .shortlinks-card{background:var(--bg-card-2);border:1px solid var(--border)} .shortlinks-card .action-icon{background:var(--amber-bg);color:var(--amber);font-size:24px} .shortlinks-card h3{color:var(--text-primary)} .shortlinks-card p{color:var(--text-secondary)} .decorative-link-icon{position:absolute;right:18px;bottom:10px;font-size:100px;line-height:1;color:var(--decor); z-index:0 !important;pointer-events:none} /* ============ RECENT ACTIVITY ============ */ .recent-section{margin-top:18px} .recent-card{height:100%;min-height:254px;border:1px solid var(--border);border-radius:14px; background:var(--bg-card);overflow:hidden;box-shadow:var(--shadow-soft); transition:transform .2s ease,border-color .2s ease,background-color .2s ease} .recent-card:hover{transform:translateY(-2px)} .recent-header{height:44px;padding:0 20px;display:flex;align-items:center;justify-content:space-between; border-bottom:1px solid var(--divider)} .recent-title{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--text-primary)} .recent-title i{font-size:16px} .i-violet{color:var(--primary-3)} .i-amber{color:var(--amber)} .live-badge{font-size:10px;font-weight:700;padding:4px 9px;border-radius:999px} .live-violet{background:#8b7cff;color:#17123a} .live-amber{background:#fbbf24;color:#332800} .recent-item{min-height:41px;padding:6px 20px;display:flex;align-items:center;gap:11px} .recent-item + .recent-item{border-top:1px solid var(--divider)} .recent-avatar{width:31px;height:31px;border-radius:50%;background:linear-gradient(135deg,#8b7cff,#5b4bf0); color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0} .r-name{font-size:12.5px;font-weight:500;color:var(--text-primary);line-height:1.25} .r-time{font-size:10.5px;color:var(--text-muted);line-height:1.2} .r-reward{margin-left:auto;font-size:12.5px;font-weight:600;white-space:nowrap} .reward-violet{color:var(--primary-3)} .reward-dim{color:var(--reward-dim)} .reward-amber{color:var(--amber)} .reward-cyan{color:var(--cyan)} /* ============ TOP EARNERS ============ */ .top-earners-section{margin-top:14px} .top-earners{position:relative;min-height:76px;border:1px solid rgba(139,124,255,.30);border-radius:13px;overflow:hidden; background:linear-gradient(135deg,rgba(60,40,150,.45),rgba(120,90,255,.30))} .te-crown{position:absolute;right:56px;top:-8px;font-size:44px;color:var(--crown);z-index:0;pointer-events:none} .te-header{position:relative;z-index:1;height:34px;padding:0 20px;display:flex;align-items:center;gap:8px; font-size:13.5px;font-weight:700;color:#fff} .te-header i{color:var(--gold);font-size:15px} .te-row{position:relative;z-index:1;min-height:41px;padding:5px 18px;display:flex;align-items:center;gap:11px;flex-wrap:wrap} .rank-circle{width:29px;height:29px;border-radius:50%;background:#8b7cff;color:#17123a;font-size:12px;font-weight:700; display:flex;align-items:center;justify-content:center;flex-shrink:0} .earner-name{font-size:13px;font-weight:600;color:#fff} .earner-stats{margin-left:auto;display:flex;gap:28px;font-size:12px;color:var(--earner-stat)} [data-theme="light"] .top-earners{background:linear-gradient(135deg,rgba(106,92,255,.85),rgba(90,70,230,.65)); border-color:rgba(106,92,255,.4)} [data-theme="light"] .te-header, [data-theme="light"] .earner-name{color:#fff} [data-theme="light"] .rank-circle{background:#fff;color:#4a3ad8} /* ============ FOOTER ============ */ .site-footer{position:relative;overflow:hidden;border-top:1px solid var(--border);background:var(--bg-navbar);margin-top:22px} .site-footer::before{content:"";position:absolute;left:40px;bottom:-70px;width:180px;height:180px;transform:rotate(45deg); border-radius:24px;background:linear-gradient(135deg,rgba(139,124,255,.12),rgba(139,124,255,.02));pointer-events:none} .site-footer::after{content:"";position:absolute;right:-40px;bottom:-90px;width:220px;height:220px;transform:rotate(45deg); border-radius:28px;background:linear-gradient(135deg,rgba(34,211,238,.09),transparent 60%);pointer-events:none} .footer-inner{position:relative;z-index:1;padding-top:22px} .f-brand{display:inline-flex;align-items:center;gap:9px} .f-brand-name{font-size:18px;font-weight:700;color:var(--text-primary)} .f-desc{margin:12px 0 0;max-width:330px;font-size:12px;line-height:1.55;color:var(--text-secondary)} .f-head{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:13px} .f-links{list-style:none;margin:0;padding:0} .f-links li{margin-bottom:8px} .f-links a{font-size:12.5px;color:var(--primary-3);display:inline-flex;align-items:center;gap:6px} .f-links a i{font-size:11px} .f-links a:hover{color:var(--primary)} .f-links a.muted{color:var(--text-secondary)} .f-links a.muted:hover{color:var(--text-primary)} .f-links a.danger{color:#ff5c8a} .f-links a.danger:hover{color:#ff87a8} .footer-bottom{margin-top:18px;padding:12px 0;border-top:1px solid var(--divider);display:flex;align-items:center} .f-side{width:86px} .f-copy{flex:1;text-align:center;font-size:11.5px;color:var(--text-secondary)} .f-social{display:flex;gap:8px} .f-social a{width:28px;height:28px;border-radius:50%;background:var(--social-bg);color:var(--social-color); display:inline-flex;align-items:center;justify-content:center;font-size:14px} .f-social a:hover{color:var(--primary-3)} /* ============ FORMS (inputs, select, textarea) ============ */ .form-label,.col-form-label{font-size:12.5px;font-weight:600;color:var(--text-secondary);margin-bottom:6px} .form-text{font-size:11px;color:var(--text-muted)} .form-control,.form-select{ background:var(--bg-card-2); border:1px solid var(--border); color:var(--text-primary); border-radius:10px; font-size:13.5px; padding:9px 14px; font-family:inherit; } .form-control:focus,.form-select:focus{ background:var(--bg-card-2); border-color:var(--primary-2); color:var(--text-primary); box-shadow:0 0 0 3px var(--primary-bg); outline:0; } .form-control::placeholder{color:var(--text-muted);opacity:1} .form-control:disabled,.form-select:disabled{background:var(--bg-main-2);opacity:.6} .form-select{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b7cff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right 0.9rem center; background-size:16px 12px; padding-right:2.6rem; } .form-select option{background:var(--bg-card);color:var(--text-primary)} .input-group-text{background:var(--bg-card-2);border:1px solid var(--border);color:var(--text-secondary);font-size:13px} textarea.form-control{min-height:80px} .form-check-input{ background-color:var(--bg-card-2); border:1px solid var(--border-light); width:1.05em;height:1.05em; } .form-check-input:checked{background-color:var(--primary-2);border-color:var(--primary-2)} .form-check-input:focus{box-shadow:0 0 0 3px var(--primary-bg);border-color:var(--primary-2)} .form-check-label{font-size:13px;color:var(--text-secondary)} .form-switch .form-check-input{width:2.2em;height:1.15em} /* ============ TABLES ============ */ .table{--bs-table-bg:transparent;--bs-table-color:var(--text-primary);margin:0;border-color:var(--divider)} .table thead th{ background:var(--bg-card-2); color:var(--text-muted); font-size:11px;font-weight:700; text-transform:uppercase;letter-spacing:.5px; border-bottom:1px solid var(--border); padding:11px 16px;white-space:nowrap; } .table tbody td{padding:12px 16px;font-size:13px;color:var(--text-primary);vertical-align:middle;border-color:var(--divider)} .table tbody tr{transition:background-color .15s ease} .table tbody tr:hover td{background:var(--primary-bg)} .table-responsive{border-radius:0 0 14px 14px} /* ============ BADGES / STATUS TAGS ============ */ .badge-soft{font-size:10.5px;font-weight:700;padding:4px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:4px} .badge-success{background:var(--green-bg);color:var(--green)} .badge-danger{background:var(--red-bg);color:var(--red)} .badge-warning{background:var(--amber-bg);color:var(--amber)} .badge-info{background:var(--blue-bg);color:var(--blue)} .badge-violet{background:var(--primary-bg-strong);color:var(--primary-3)} .badge-cyan{background:var(--cyan-bg);color:var(--cyan)} /* ============ ALERTS (messages) ============ */ .alert{border-radius:12px;font-size:13px;font-weight:500;border:1px solid;padding:12px 16px; display:flex;align-items:center;gap:9px;margin-bottom:16px} .alert i{font-size:15px;flex-shrink:0} .alert-success{background:var(--green-bg);border-color:rgba(52,211,153,.3);color:var(--green)} .alert-danger{background:var(--red-bg);border-color:rgba(251,113,133,.3);color:var(--red)} .alert-warning{background:var(--amber-bg);border-color:rgba(251,191,36,.3);color:var(--amber)} .alert-info{background:var(--blue-bg);border-color:rgba(77,156,255,.3);color:var(--blue)} /* ============ MODALS ============ */ .modal-content{ background:var(--bg-card); border:1px solid var(--border); border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.45); color:var(--text-primary); } .modal-header{border-bottom:1px solid var(--divider);padding:16px 20px} .modal-title{font-size:15px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:8px} .modal-title i{color:var(--primary-3)} .modal-body{padding:20px;font-size:13.5px;color:var(--text-primary)} .modal-footer{border-top:1px solid var(--divider);padding:14px 20px;gap:8px} .modal-backdrop.show{opacity:.6} .btn-close{filter:invert(1) grayscale(100%) brightness(200%)} [data-theme="light"] .btn-close{filter:none} .modal .form-control,.modal .form-select{margin-bottom:0} /* ============ PAGINATION ============ */ .pagination{margin:0;gap:4px} .pagination .page-link{ background:var(--bg-card); border:1px solid var(--border); color:var(--text-secondary); border-radius:9px !important; font-size:12.5px;font-weight:600; padding:6px 12px;min-width:34px; text-align:center;transition:.2s ease; } .pagination .page-link:hover{background:var(--primary-bg);color:var(--primary-3);border-color:var(--primary-2)} .pagination .page-item.active .page-link{background:var(--primary-2);border-color:var(--primary-2);color:#fff} .pagination .page-item.disabled .page-link{background:var(--bg-card-2);color:var(--text-muted);border-color:var(--border)} /* ============ NAV TABS ============ */ .nav-tabs{border-bottom:1px solid var(--border);gap:6px} .nav-tabs .nav-link{ border:0;border-bottom:2px solid transparent; color:var(--text-secondary);font-size:13px;font-weight:600; padding:9px 14px;border-radius:0;background:transparent; } .nav-tabs .nav-link:hover{color:var(--primary-3)} .nav-tabs .nav-link.active{color:var(--primary-3);border-bottom-color:var(--primary-2);background:transparent} /* ============ MISC HELPERS ============ */ .text-muted-2{color:var(--text-muted)} .text-sec{color:var(--text-secondary)} .mono{font-family:"JetBrains Mono","Courier New",monospace;font-size:12px} .divider-v{width:1px;background:var(--divider)} .section-gap{margin-top:20px} .empty-state{padding:40px 20px;text-align:center;color:var(--text-muted);font-size:13px} .empty-state i{font-size:34px;display:block;margin-bottom:10px;opacity:.5} /* ============ illustration float ============ */ .floaty{animation:floaty 5.5s ease-in-out infinite} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @media (prefers-reduced-motion:reduce){.floaty{animation:none}} /* ============ TABLET ============ */ @media (max-width:991.98px){ .main-nav{display:none} .menu-toggle{display:inline-flex} .hero-content h1{font-size:34px} } @media (min-width:768px) and (max-width:991.98px){ .hero-section{min-height:250px} .hero-content{width:55%;padding:28px 10px 26px 30px} .hero-illustration{width:45%} } /* ============ MOBILE ============ */ @media (max-width:767.98px){ .hero-section{flex-direction:column;align-items:stretch;min-height:0} .hero-content{width:100%;padding:24px 20px 6px} .hero-content h1{font-size:31px} .hero-content p{font-size:13.5px} .hero-illustration{width:100%;height:190px;padding:10px 20px 20px} .main-container{padding-top:18px} } @media (max-width:575.98px){ .username{display:none} .f-side{display:none} .earner-stats{margin-left:40px;gap:18px} } @media (max-width:419.98px){ .theme-toggle{display:none} .account-button{min-width:0;padding:0 10px} .header-account{gap:6px} .header-inner{gap:10px} } /* ============ ACCORDION (FAQ) ============ */ .accordion{--bs-accordion-bg:transparent} .accordion-item{ background:var(--bg-card)!important; border:1px solid var(--border)!important; border-radius:12px!important; overflow:hidden;margin-bottom:10px; box-shadow:var(--shadow-soft); } .accordion-button{ background:var(--bg-card)!important; color:var(--text-primary)!important; font-size:13.5px;font-weight:600; padding:14px 18px; box-shadow:none!important; } .accordion-button:hover{color:var(--primary-3)!important} .accordion-button:not(.collapsed){color:var(--primary-3)!important} .accordion-button::after{ filter:invert(48%) sepia(85%) saturate(1000%) hue-rotate(225deg) brightness(1.1); } [data-theme="light"] .accordion-button::after{filter:invert(30%) sepia(80%) saturate(2000%) hue-rotate(235deg)} .accordion-button i{color:var(--primary-3)} .accordion-body{ background:var(--bg-card-2); color:var(--text-secondary); font-size:13px;padding:14px 18px; border-top:1px solid var(--divider); } .terms-content h1,.terms-content h2,.terms-content h3,.terms-content h4{ color:var(--text-primary); font-weight:700; margin:22px 0 10px; } .terms-content h1:first-child,.terms-content h2:first-child,.terms-content h3:first-child{margin-top:0} .terms-content p{margin:0 0 12px} .terms-content a{color:var(--primary-3)} .terms-content ul,.terms-content ol{margin:0 0 12px;padding-left:22px} .terms-content li{margin-bottom:6px} .terms-content strong{color:var(--text-primary)} .terms-content img{max-width:100%;border-radius:10px} .terms-content blockquote{ border-left:3px solid var(--primary-2); margin:12px 0;padding:8px 16px; background:var(--primary-bg); border-radius:0 10px 10px 0; color:var(--text-secondary); }