/* ══════════════════════════════════════════ THEME TOKENS — applied via data-theme on or ══════════════════════════════════════════ */ /* ── DARK (original) ── */ [data-theme="dark"], :root { /* fallback = dark */ --input-h: 46px; --accent: #00e5ff; --accent2: #7c3aed; --accent-glow: rgba(0,229,255,0.18); --bg-base: #050a12; --bg-card: #0c1220; --bg-card2: #111927; --border: rgba(255,255,255,0.07); --border-accent: rgba(0,229,255,0.25); --text-primary: #ffffff; --text-body: #e2eaf4; --text-muted-custom: #6b7fa3; --header-bg: rgba(36,37,39,0.85); /* result panels */ --result-found-bg: rgba(0,200,100,0.07); --result-found-border: rgba(0,200,100,0.25); --result-found-color: #4ade80; --result-nf-bg: rgba(0,229,255,0.06); --result-nf-border: rgba(0,229,255,0.2); --result-nf-color: var(--accent); --result-invalid-bg: rgba(239,68,68,0.07); --result-invalid-border: rgba(239,68,68,0.2); --result-invalid-color: #f87171; /* badges */ --badge-found-bg: rgba(74,222,128,0.12); --badge-found-border: rgba(74,222,128,0.25); --badge-found-color: #4ade80; --badge-nf-bg: rgba(0,229,255,0.08); --badge-nf-border: rgba(0,229,255,0.2); --badge-nf-color: var(--accent); /* notice */ --notice-bg: rgba(124,58,237,0.08); --notice-border: rgba(124,58,237,0.2); --notice-color: #a78bfa; /* op card */ --op-card-bg: #111927; --op-card-hover-bg: rgba(0,229,255,0.04); --op-card-active-shadow: 0 0 20px rgba(0,229,255,0.12), inset 0 0 20px rgba(0,229,255,0.03); /* grid background */ --grid-line: rgba(0,229,255,0.03); /* mobile nav */ --mobile-nav-bg: rgba(5,10,18,0.97); /* body glow */ --body-glow: rgba(124,58,237,0.12); --font-display: 'Syne', sans-serif; --font-body: 'DM Sans', sans-serif; --radius: 16px; --radius-sm: 10px; } /* ── LIGHT ── */ [data-theme="light"] { --input-h: 46px; --accent: #0097b2; --accent2: #6d28d9; --accent-glow: rgba(0,151,178,0.15); --bg-base: #f0f4f8; --bg-card: #ffffff; --bg-card2: #f5f8fc; --border: rgba(0,0,0,0.09); --border-accent: rgba(0,151,178,0.3); --text-primary: #0f1c2e; --text-body: #2d3d52; --text-muted-custom: #7a8fa8; --header-bg: rgba(240,244,248,0.92); /* result panels */ --result-found-bg: rgba(22,163,74,0.07); --result-found-border: rgba(22,163,74,0.25); --result-found-color: #15803d; --result-nf-bg: rgba(0,151,178,0.07); --result-nf-border: rgba(0,151,178,0.25); --result-nf-color: var(--accent); --result-invalid-bg: rgba(220,38,38,0.07); --result-invalid-border: rgba(220,38,38,0.2); --result-invalid-color: #dc2626; /* badges */ --badge-found-bg: rgba(22,163,74,0.1); --badge-found-border: rgba(22,163,74,0.3); --badge-found-color: #15803d; --badge-nf-bg: rgba(0,151,178,0.08); --badge-nf-border: rgba(0,151,178,0.25); --badge-nf-color: var(--accent); /* notice */ --notice-bg: rgba(109,40,217,0.07); --notice-border: rgba(109,40,217,0.2); --notice-color: #6d28d9; /* op card */ --op-card-bg: #edf2f7; --op-card-hover-bg: rgba(0,151,178,0.05); --op-card-active-shadow: 0 0 20px rgba(0,151,178,0.1), inset 0 0 20px rgba(0,151,178,0.03); /* grid background */ --grid-line: rgba(0,151,178,0.04); /* mobile nav */ --mobile-nav-bg: rgba(240,244,248,0.97); /* body glow */ --body-glow: rgba(109,40,217,0.07); } /* ══════════════════════════════════════════ BASE ══════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--bg-base); color: var(--text-body); min-height: 100vh; overflow-x: hidden; position: relative; transition: background 0.25s, color 0.25s; } /* animated background grid */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: 0; } body::after { content: ''; position: fixed; top: -20%; left: -10%; width: 60%; height: 60%; background: radial-gradient(ellipse, var(--body-glow) 0%, transparent 70%); pointer-events: none; z-index: 0; animation: bgPulse 8s ease-in-out infinite alternate; } @keyframes bgPulse { from { transform: translate(0, 0) scale(1); opacity: 0.6; } to { transform: translate(5%, 5%) scale(1.1); opacity: 1; } } /* ══════════════════════════════════════════ HEADER ══════════════════════════════════════════ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); transition: background 0.25s; } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 4vw, 40px); height: 64px; max-width: 1400px; margin: 0 auto; } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.3px; color: var(--text-primary); } .logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; box-shadow: 0 0 16px var(--accent-glow); } .logo span em { color: var(--accent); font-style: normal; } .header-nav { display: flex; align-items: center; gap: 6px; } .header-nav a { color: var(--text-muted-custom); text-decoration: none; font-size: 13.5px; font-weight: 400; padding: 6px 12px; border-radius: 8px; transition: all 0.2s; display: flex; align-items: center; gap: 5px; } .header-nav a:hover { color: var(--text-body); background: rgba(128,128,128,0.08); } .header-nav a.active { color: var(--accent); background: rgba(0,229,255,0.07); } .pill-live { display: flex; align-items: center; gap: 5px; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25); color: #34d399; font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 999px; } .dot-live { width: 6px; height: 6px; background: #34d399; border-radius: 50%; animation: pulse-dot 1.5s ease-in-out infinite; } @keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(0.7); } } .hamburger { display: none; background: none; border: none; color: var(--text-body); font-size: 22px; cursor: pointer; } /* ══════════════════════════════════════════ TOP AD BANNER ══════════════════════════════════════════ */ .ad-topbar { background: rgba(128,128,128,0.04); border-bottom: 1px solid var(--border); text-align: center; padding: 8px 16px; font-size: 12px; color: var(--text-muted-custom); } .ad-topbar a { color: var(--accent); text-decoration: none; font-weight: 500; } /* ══════════════════════════════════════════ HERO ══════════════════════════════════════════ */ .hero { position: relative; z-index: 1; padding: clamp(32px, 6vw, 64px) 0 0; text-align: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,229,255,0.07); border: 1px solid var(--border-accent); border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 500; color: var(--accent); margin-bottom: 20px; letter-spacing: 0.5px; text-transform: uppercase; } .hero h1 { font-family: var(--font-display); font-size: clamp(28px, 5vw, 52px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; color: var(--text-primary); margin-bottom: 14px; } .hero h1 .hl { background: linear-gradient(90deg, var(--accent), #818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero p { font-size: clamp(14px, 2vw, 16px); color: var(--text-muted-custom); max-width: 500px; margin: 0 auto 32px; line-height: 1.7; font-weight: 300; } /* ══════════════════════════════════════════ LAYOUT ══════════════════════════════════════════ */ .main-wrap { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 32px) 40px; } /* ══════════════════════════════════════════ CHECKER CARD ══════════════════════════════════════════ */ .checker-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; position: relative; transition: background 0.25s; } .checker-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent2), var(--accent), var(--accent2)); background-size: 200%; animation: borderFlow 3s linear infinite; } @keyframes borderFlow { from { background-position: 0% 50%; } to { background-position: 200% 50%; } } .checker-body { padding: clamp(16px, 3vw, 32px); } /* ══════════════════════════════════════════ OPERATOR GRID ══════════════════════════════════════════ */ .op-section-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted-custom); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .op-section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } .op-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 24px; } .op-card { cursor: pointer; border-radius: 12px; border: 1px solid var(--border); background: var(--op-card-bg); padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: all 0.2s ease; position: relative; overflow: hidden; } .op-card:hover { border-color: rgba(0,229,255,0.3); background: var(--op-card-hover-bg); transform: translateY(-2px); } .op-card.active { border-color: var(--accent); background: var(--op-card-hover-bg); box-shadow: var(--op-card-active-shadow); } .op-card.active::after { content: '\F26E'; font-family: 'Bootstrap-Icons'; position: absolute; top: 4px; right: 5px; font-size: 10px; color: var(--accent); line-height: 1; } .op-badge { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; padding: 4px; flex-shrink: 0; } .op-badge img { width: 100%; height: 100%; object-fit: contain; } .op-name { font-size: 9px; font-weight: 500; color: var(--text-muted-custom); text-align: center; line-height: 1.2; } .op-card.active .op-name { color: var(--accent); } /* ══════════════════════════════════════════ INPUT AREA ══════════════════════════════════════════ */ .input-section-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted-custom); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .input-section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } .input-group-custom { display: flex; gap: 10px; } .num-input-wrap { flex: 1; position: relative; } .num-input-wrap .prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--text-muted-custom); font-weight: 500; pointer-events: none; user-select: none; } .num-input-wrap input { width: 100%; background: var(--bg-card2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-body); font-family: var(--font-body); font-size: 15px; font-weight: 400; padding: 13px 14px 13px 46px; outline: none; transition: all 0.2s; letter-spacing: 0.3px; } .num-input-wrap input::placeholder { color: var(--text-muted-custom); opacity: 0.5; } .num-input-wrap input:focus { border-color: var(--accent); background: var(--op-card-hover-bg); box-shadow: 0 0 0 3px rgba(0,229,255,0.1); } .btn-check-now { background: linear-gradient(135deg, #0891b2, var(--accent)); border: none; border-radius: var(--radius-sm); height: var(--input-h); line-height: var(--input-h); color: #fff; font-family: var(--font-display); font-size: 14px; font-weight: 700; padding: 0 24px; cursor: pointer; white-space: nowrap; transition: all 0.2s; display: flex; align-items: center; gap: 7px; letter-spacing: 0.2px; box-shadow: 0 4px 20px var(--accent-glow); } .btn-check-now:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(0,229,255,0.35); } .btn-check-now:active { transform: scale(0.98); } .btn-check-now .spinner-border { width: 16px; height: 16px; border-width: 2px; display: none; } /* ══════════════════════════════════════════ RESULT PANEL ══════════════════════════════════════════ */ .result-panel { display: none; border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 10px; margin-top: 15px; animation: slideUp 0.3s ease; } @keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .result-panel.found { background: var(--result-found-bg); border: 1px solid var(--result-found-border); margin: 10px 0 0 0; } .result-panel.notfound { background: var(--result-nf-bg); border: 1px solid var(--result-nf-border); } .result-panel.invalid { background: var(--result-invalid-bg); border: 1px solid var(--result-invalid-border); margin: 10px 0 0 0; } .res-header { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 15px; font-weight: 600; margin-bottom: 12px; } .res-header .icon { font-size: 20px; } .found .res-header { color: var(--result-found-color); } .notfound .res-header { color: var(--result-nf-color); } .invalid .res-header { color: var(--result-invalid-color); } .res-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .res-detail-item { background: rgba(128,128,128,0.05); border-radius: 8px; padding: 10px 12px; } .res-detail-item .label { font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted-custom); margin-bottom: 4px; } .res-detail-item .val { font-size: 13px; font-weight: 500; color: var(--text-body); } /* ══════════════════════════════════════════ STATS ROW ══════════════════════════════════════════ */ .stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; } .stat-card { background: var(--bg-card2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; text-align: center; } .stat-num { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: 4px; } .stat-num span { color: var(--accent); } .stat-label { font-size: 11px; color: var(--text-muted-custom); font-weight: 400; } /* ══════════════════════════════════════════ SIDEBAR ══════════════════════════════════════════ */ .sidebar { display: flex; flex-direction: column; gap: 16px; } .side-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: background 0.25s; } .side-card-head { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted-custom); display: flex; align-items: center; gap: 6px; } .side-card-body { padding: 14px 16px; } .ad-placeholder { background: repeating-linear-gradient( -45deg, rgba(128,128,128,0.03), rgba(128,128,128,0.03) 4px, transparent 4px, transparent 12px ); border: 1px dashed rgba(128,128,128,0.2); border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-muted-custom); font-size: 11px; text-align: center; padding: 10px; } .ad-placeholder i { font-size: 20px; opacity: 0.4; } .ad-placeholder .ad-size { font-size: 10px; opacity: 0.5; font-family: monospace; } .info-list { list-style: none; } .info-list li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-muted-custom); line-height: 1.5; } .info-list li:last-child { border-bottom: none; } .info-list li i { color: var(--accent); margin-top: 1px; flex-shrink: 0; font-size: 14px; } /* ══════════════════════════════════════════ AD BANNER (inline) ══════════════════════════════════════════ */ .ad-inline { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 16px; } .ad-inline-inner { min-height: 90px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted-custom); font-size: 12px; } .ad-inline-inner i { font-size: 22px; opacity: 0.3; } .ad-label-strip { background: rgba(128,128,128,0.04); border-bottom: 1px solid var(--border); font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted-custom); opacity: 0.6; padding: 4px 14px; display: flex; align-items: center; justify-content: space-between; } /* ══════════════════════════════════════════ RECENT CHECKS TABLE ══════════════════════════════════════════ */ .recents-table { width: 100%; border-collapse: collapse; font-size: 13px; } .recents-table th { text-align: left; padding: 8px 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted-custom); border-bottom: 1px solid var(--border); } .recents-table td { padding: 10px 10px; border-bottom: 1px solid rgba(128,128,128,0.07); color: var(--text-muted-custom); font-size: 12px; } .recents-table tr:last-child td { border-bottom: none; } .badge-found { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--badge-found-bg); border: 1px solid var(--badge-found-border); color: var(--badge-found-color); } .badge-nf { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--badge-nf-bg); border: 1px solid var(--badge-nf-border); color: var(--badge-nf-color); } /* ══════════════════════════════════════════ NOTICE STRIP ══════════════════════════════════════════ */ .notice-strip { background: var(--notice-bg); border: 1px solid var(--notice-border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12.5px; color: var(--notice-color); display: flex; align-items: flex-start; gap: 8px; margin-bottom: 20px; } .notice-strip i { flex-shrink: 0; margin-top: 1px; } /* ══════════════════════════════════════════ FOOTER ══════════════════════════════════════════ */ footer { position: relative; z-index: 1; background: var(--bg-card); border-top: 1px solid var(--border); margin-top: 24px; overflow: hidden; transition: background 0.25s; } footer::before { content: ''; position: absolute; bottom: -60px; right: -60px; width: 300px; height: 300px; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); pointer-events: none; } .footer-top { max-width: 1200px; margin: 0 auto; padding: clamp(32px, 5vw, 56px) clamp(16px, 3vw, 32px) clamp(24px, 4vw, 40px); display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } .footer-brand .logo { margin-bottom: 12px; display: inline-flex; } .footer-brand p { font-size: 13px; color: var(--text-muted-custom); line-height: 1.8; max-width: 260px; margin-bottom: 18px; } .footer-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,229,255,0.06); border: 1px solid var(--border-accent); border-radius: 999px; padding: 5px 12px; font-size: 11px; color: var(--accent); margin-bottom: 16px; font-weight: 500; } .footer-social { display: flex; gap: 8px; flex-wrap: wrap; } .social-btn { width: 34px; height: 34px; border-radius: 9px; background: rgba(128,128,128,0.06); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted-custom); text-decoration: none; font-size: 15px; transition: all 0.2s; } .social-btn:hover { background: rgba(0,229,255,0.1); border-color: var(--border-accent); color: var(--accent); transform: translateY(-2px); } .footer-col h6 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-primary); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; } .footer-col h6 i { color: var(--accent); font-size: 13px; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col ul li { margin-bottom: 9px; } .footer-col ul li a { font-size: 13px; color: var(--text-muted-custom); text-decoration: none; transition: all 0.15s; display: flex; align-items: center; gap: 7px; padding: 2px 0; } .footer-col ul li a i { font-size: 13px; color: var(--accent); opacity: 0.45; transition: opacity 0.15s; width: 14px; flex-shrink: 0; } .footer-col ul li a:hover { color: var(--text-body); padding-left: 4px; } .footer-col ul li a:hover i { opacity: 1; } .footer-divider { max-width: 1200px; margin: 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--border), var(--accent-glow), var(--border), transparent); } .footer-bottom { max-width: 1200px; margin: 0 auto; padding: 16px clamp(16px, 3vw, 32px); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--text-muted-custom); } .footer-bottom a { color: var(--accent); text-decoration: none; } .footer-bottom-left { display: flex; align-items: center; gap: 6px; } .footer-bottom-left i { color: var(--accent); font-size: 13px; } .footer-bottom-right { display: flex; align-items: center; gap: 16px; } .footer-bottom-right a { color: var(--text-muted-custom); text-decoration: none; font-size: 11px; transition: color 0.15s; } .footer-bottom-right a:hover { color: var(--accent); } /* ══════════════════════════════════════════ MOBILE NAV DRAWER ══════════════════════════════════════════ */ .mobile-nav { display: none; position: fixed; top: 64px; left: 0; right: 0; background: var(--mobile-nav-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 12px 16px; z-index: 99; flex-direction: column; gap: 2px; } .mobile-nav.open { display: flex; } .mobile-nav a { color: var(--text-body); text-decoration: none; padding: 10px 14px; border-radius: 8px; display: flex; align-items: center; gap: 8px; font-size: 14px; } .mobile-nav a:hover { background: rgba(128,128,128,0.08); } /* ══════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════ */ @media (max-width: 991px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; } .footer-brand { grid-column: 1 / -1; text-align: center; display: flex; flex-direction: column; align-items: center; } .footer-brand p { max-width: 420px; } } @media (max-width: 768px) { .header-nav { display: none; } .hamburger { display: block; } .op-grid { grid-template-columns: repeat(4,1fr); } .stats-row { grid-template-columns: repeat(3,1fr); } .pill-live { display: none; } } @media (max-width: 575px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 24px 16px; padding: 28px 16px 20px; } .footer-brand { grid-column: 1 / -1; text-align: center; display: flex; flex-direction: column; align-items: center; } .footer-brand p { max-width: 100%; font-size: 12px; } .footer-col { text-align: center; } .footer-col h6 { justify-content: center; } .footer-col ul li a { justify-content: center; } .footer-col ul li a:hover { padding-left: 0; } .footer-bottom { flex-direction: column; text-align: center; padding: 14px 16px; gap: 6px; } .footer-bottom-right { gap: 12px; flex-wrap: wrap; justify-content: center; } } @media (max-width: 480px) { .op-grid { grid-template-columns: repeat(4,1fr); } .op-badge { width: 30px; height: 30px; font-size: 9px; } .input-group-custom { flex-direction: column; } .btn-check-now { justify-content: center; padding: 13px 20px; } .stats-row { grid-template-columns: repeat(3,1fr); } .res-details { grid-template-columns: 1fr 1fr; } } .theme-toggle-pill{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:var(--bg-card2); border:1px solid var(--border); color:var(--text-body); font-size:12px; font-weight:600; cursor:pointer; transition:all .2s ease; box-shadow:0 0 0 transparent; } .theme-toggle-pill:hover{ border-color:var(--accent); box-shadow:0 0 18px var(--accent-glow); transform:translateY(-1px); } .theme-toggle-pill i{ font-size:14px; } .captcha-action-row{ display:flex; gap:10px; align-items:center; margin-top:8px; } .captcha-box{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; } .captcha-img{ height: var(--input-h); width: auto; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; flex-shrink: 0; } .captcha-input{ width: 100%; background: var(--bg-card2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-body); font-family: var(--font-body); font-size: 15px; font-weight: 400; padding: 13px 14px; outline: none; transition: all 0.2s; letter-spacing: 0.3px; } /* focus like main input */ .captcha-input:focus{ border-color: var(--accent); background: var(--op-card-hover-bg); box-shadow: 0 0 0 3px rgba(0,229,255,0.1); } /* button stays aligned right automatically */ /* 📱 MOBILE */ @media (max-width:480px){ .captcha-action-row{ flex-direction:column; align-items:stretch; } .captcha-box{ width:100%; } } .accordion-button{ background:var(--bg-card2)!important; color:var(--text-primary)!important; border:none!important; box-shadow:none!important; font-weight:600; } .accordion-button:not(.collapsed){ background:var(--bg-card)!important; } .accordion-body{ background:var(--bg-card); color:#8fa3bf; border-top:1px solid var(--border); font-size:14px; line-height:1.7; }