/* ═══════════════════════════════════════════════════════════════ WhatAScam.org — main.css v9.0 Clean • Single file • No duplicates • Mobile-first ═══════════════════════════════════════════════════════════════ */ /* ── Google Fonts preload ────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap'); /* ── CSS Variables — Default (Dark Red) ─────────────────────── */ :root { /* Accent */ --red:#e63946; --red-dark:#b5212c; --red-glow:rgba(230,57,70,.2); --orange:#f4a261; --yellow:#fbbf24; --green:#22c55e; --blue:#3b82f6; --purple:#a855f7; /* Backgrounds */ --bg:#09090f; --bg2:#0d0d17; --bg3:#121220; /* Surface */ --surface:#161626; --surface2:#1e1e32; --surface3:#262640; /* Border */ --border:rgba(255,255,255,.06); --border2:rgba(255,255,255,.12); --border3:rgba(255,255,255,.2); /* Text */ --text:#f1f1f8; --text2:#9898b8; --text3:#5a5a78; /* Shadow */ --shadow:0 4px 24px rgba(0,0,0,.45); --shadow2:0 8px 40px rgba(0,0,0,.6); /* Fonts */ --fb:'Inter',system-ui,sans-serif; --fh:'Inter',system-ui,sans-serif; --fm:'JetBrains Mono','Fira Code',monospace; /* Nav */ --nav-h:62px; /* Radius */ --r:10px; --r2:14px; --r3:20px; /* Text-on-accent — the color used for text/icons sitting directly on a solid var(--red) background (buttons, badges, active pills). White was hardcoded everywhere this was used, but several themes' accent colors are too light/bright for white text to read well on — as low as 1.74:1 contrast (forest) and 2.15:1 (amber), both far under WCAG AA's 4.5:1 minimum. This near-black passes 4.5:1+ in every single theme, including a small improvement in the default theme itself (was 4.17:1, now 4.74:1). Each theme still shows its own accent color everywhere else — this only affects text sitting on top of it. */ --on-red:#0a0a0f; } /* ── Themes ─────────────────────────────────────────────────── */ /* Each rule also matches html.theme-x (not just body.theme-x): the browser's main page scrollbar reads scrollbar-color off the element specifically, and CSS custom properties only cascade DOWN the tree (parent → child) — body can't push a value up to its own parent. Without the html.theme-x selector here, only ever saw the :root default (dark-red) no matter what theme was active on , so the window scrollbar never changed while everything else did. */ body.theme-light, html.theme-light { --red:#e63946; --red-dark:#b5212c; --red-glow:rgba(230,57,70,.15); --bg:#f4f5fb; --bg2:#ffffff; --bg3:#eaebf4; --surface:#ffffff; --surface2:#f0f1f9; --surface3:#e4e5f0; --border:rgba(0,0,0,.07); --border2:rgba(0,0,0,.12); --border3:rgba(0,0,0,.2); --text:#12121e; --text2:#4a4a6a; --text3:#8888a8; --shadow:0 2px 12px rgba(0,0,0,.09); } body.theme-dark-blue, html.theme-dark-blue { --red:#3b82f6; --red-dark:#2563eb; --red-glow:rgba(59,130,246,.2); --bg:#02030f; --bg2:#050818; --bg3:#080d22; --surface:#0c1235; --surface2:#101847; --surface3:#141f5c; } body.theme-dark-green, html.theme-dark-green { --red:#22c55e; --red-dark:#16a34a; --red-glow:rgba(34,197,94,.2); --bg:#020e05; --bg2:#051408; --bg3:#081a0c; --surface:#0b2e12; --surface2:#0f3d18; --surface3:#134d1f; } body.theme-dark-purple, html.theme-dark-purple { --red:#a855f7; --red-dark:#9333ea; --red-glow:rgba(168,85,247,.2); --bg:#050210; --bg2:#09051c; --bg3:#0d0828; --surface:#180b40; --surface2:#200f54; --surface3:#281368; } body.theme-cyber-orange, html.theme-cyber-orange { --red:#f97316; --red-dark:#ea580c; --red-glow:rgba(249,115,22,.2); --bg:#060200; --bg2:#0d0500; --bg3:#140800; --surface:#231100; --surface2:#301700; --surface3:#3e1e00; } body.theme-ocean-blue, html.theme-ocean-blue { --red:#0ea5e9; --red-dark:#0284c7; --red-glow:rgba(14,165,233,.2); --bg:#010810; --bg2:#030d1c; --bg3:#051228; --surface:#071e3e; --surface2:#0b2852; --surface3:#0e3268; } body.theme-sunset, html.theme-sunset { --red:#f43f5e; --red-dark:#e11d48; --red-glow:rgba(244,63,94,.2); --bg:#140508; --bg2:#200a10; --bg3:#2c0e18; --surface:#3e1220; --surface2:#521829; --surface3:#661e32; } body.theme-forest, html.theme-forest { --red:#4ade80; --red-dark:#22c55e; --red-glow:rgba(74,222,128,.2); --bg:#040e06; --bg2:#081508; --bg3:#0c1c0e; --surface:#0f2e14; --surface2:#143d1a; --surface3:#194d21; } body.theme-midnight, html.theme-midnight { --red:#ef4444; --red-dark:#dc2626; --red-glow:rgba(239,68,68,.2); --bg:#000000; --bg2:#080808; --bg3:#101010; --surface:#181818; --surface2:#202020; --surface3:#2a2a2a; } body.theme-neon-pink, html.theme-neon-pink { --red:#ec4899; --red-dark:#db2777; --red-glow:rgba(236,72,153,.2); --bg:#060010; --bg2:#0c0020; --bg3:#120030; --surface:#1e0040; --surface2:#280054; --surface3:#320068; } body.theme-amber, html.theme-amber { --red:#f59e0b; --red-dark:#d97706; --red-glow:rgba(245,158,11,.2); --bg:#0a0500; --bg2:#140a00; --bg3:#1e0f00; --surface:#2c1a00; --surface2:#3a2200; --surface3:#482b00; } body.theme-teal, html.theme-teal { --red:#14b8a6; --red-dark:#0d9488; --red-glow:rgba(20,184,166,.2); --bg:#001214; --bg2:#001c20; --bg3:#00252a; --surface:#003038; --surface2:#003e48; --surface3:#004c5a; } /* ── Reset ───────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%;width:100%;max-width:100vw} /* Themed thin scrollbars — applies to the page itself and any internal scrollable element (admin tables, mobile nav, theme panel, modals). Firefox uses scrollbar-width/scrollbar-color; everything else uses the WebKit pseudo-elements. Colors follow the site's accent (--red) rather than being pure black/white so it always matches the rest of the UI. */ *{scrollbar-width:thin;scrollbar-color:var(--red) var(--bg3)} ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:var(--bg3)} ::-webkit-scrollbar-thumb{background:var(--red);border-radius:8px} ::-webkit-scrollbar-thumb:hover{background:var(--red-dark)} ::-webkit-scrollbar-corner{background:var(--bg3)} body{ font-family:var(--fb); background:var(--bg); color:var(--text); font-size:16px; line-height:1.6; min-height:100vh; overflow-x:hidden; width:100%; max-width:100vw; -webkit-font-smoothing:antialiased; transition:background .2s,color .2s; } a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block} button,input,select,textarea{font-family:var(--fb);font-size:inherit} h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;letter-spacing:-.02em} .container{max-width:1200px;margin:0 auto;padding:0 16px} @media(min-width:768px){.container{padding:0 24px}} /* Content-width tiers — replaces what used to be a different one-off inline "style=max-width:...px" on every single narrow page (420, 480, 600, 700, 800, 860, 900 — 19 pages, 7 different numbers, none of them related to each other), which is why pages that are doing basically the same job (e.g. every plain auth form, or every static policy page) still ended up visibly different widths from one another. These five tiers are chosen from what genuinely differs in content, not arbitrarily: short single-purpose action forms, richer single-column forms, multi-field forms with paired rows, long-form reading content, and the widest reference/document-style pages. */ .container-xs{max-width:440px} .container-sm{max-width:560px} .container-md{max-width:720px} .container-lg{max-width:820px} .container-xl{max-width:900px} /* ═══════════════════════════════════════════════════════════════ THEME PANEL — fully fixed, NEVER in document flow • Hidden state: fully off-screen, pointer-events disabled • Toggle button: floats independently so it is always reachable • Z-index BELOW navbar so navbar buttons never get covered ═══════════════════════════════════════════════════════════════ */ .theme-panel{ position:fixed; top:50%; right:0; z-index:900; transform:translate(100%,-50%); transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .2s, visibility .2s, box-shadow .2s; background:var(--surface); border:1px solid var(--border2); border-right:none; border-radius:12px 0 0 12px; box-shadow:none; padding:10px 8px; display:flex; flex-direction:column; align-items:center; gap:6px; max-height:calc(100vh - 80px); overflow-y:auto; overflow-x:hidden; scrollbar-width:none; width:52px; visibility:hidden; opacity:0; pointer-events:none; will-change:transform; } .theme-panel::-webkit-scrollbar{display:none} .theme-panel.open{ transform:translate(0,-50%); box-shadow:-8px 0 40px rgba(0,0,0,.6); visibility:visible; opacity:1; pointer-events:auto; } /* Floating toggle button — always visible at right edge, NOT inside the panel, so it can never be hidden or covered by the panel's transform. */ .theme-toggle-btn{ position:fixed; top:50%; right:0; z-index:901; transform:translateY(-50%); width:36px;height:36px;border-radius:50% 0 0 50%; background:var(--surface); border:1.5px solid var(--border2); border-right:none; display:flex;align-items:center;justify-content:center; cursor:pointer;color:var(--text2); transition:background .2s, color .2s, border-color .2s; box-shadow:-2px 0 10px rgba(0,0,0,.4); } .theme-toggle-btn:hover{background:var(--red);border-color:var(--red);color:var(--on-red)} /* ── Language picker (Google Translate, branding hidden) ────────── */ .lang-toggle-btn{ position:fixed;top:calc(50% - 50px);right:0;z-index:901; transform:translateY(-50%); width:36px;height:36px;border-radius:50% 0 0 50%; background:var(--surface);border:1.5px solid var(--border2);border-right:none; display:flex;align-items:center;justify-content:center; cursor:pointer;color:var(--text2);font-size:1rem; transition:background .2s,color .2s,border-color .2s; box-shadow:-2px 0 10px rgba(0,0,0,.4); } .lang-toggle-btn:hover{background:var(--red);border-color:var(--red);color:var(--on-red)} .lang-picker-select{ position:fixed;top:calc(50% - 50px);right:44px;z-index:900; transform:translateY(-50%) scale(.95); opacity:0;pointer-events:none;visibility:hidden; background:var(--surface);color:var(--text);border:1.5px solid var(--border2); border-radius:8px;padding:8px 10px;font-size:.82rem;max-width:150px; box-shadow:-2px 0 10px rgba(0,0,0,.4); transition:opacity .15s,transform .15s; } .lang-picker.open .lang-picker-select{ opacity:1;pointer-events:auto;visibility:visible;transform:translateY(-50%) scale(1); } @media(max-width:600px){ .lang-toggle-btn,.lang-picker-select{top:calc(50% - 100px)} } /* Google's own UI — hidden throughout; we drive translation via our own button+dropdown above instead. */ .goog-te-banner-frame,.goog-te-balloon-frame,#goog-gt-tt,.goog-tooltip,.goog-tooltip:hover{ display:none!important;visibility:hidden!important;height:0!important;width:0!important; } body{top:0!important;position:static!important} html{top:0!important} .goog-text-highlight{background:none!important;box-shadow:none!important} #google_translate_element{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden} .goog-te-gadget{height:0;overflow:hidden;font-size:0!important} .goog-logo-link,.goog-te-gadget span{display:none!important} .theme-toggle-btn.active{background:var(--red);border-color:var(--red);color:var(--on-red)} .theme-dot{ width:28px;height:28px;border-radius:50%; cursor:pointer;border:2.5px solid transparent; transition:all .2s;flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.4); } .theme-dot:hover{transform:scale(1.22);border-color:rgba(255,255,255,.7)} .theme-dot.active{ border-color:#fff!important; transform:scale(1.2); box-shadow:0 0 0 3px var(--bg),0 0 0 5px rgba(255,255,255,.4); } /* Mobile: match desktop — vertically centered on the right edge, panel slides out from behind the toggle. */ @media(max-width:600px){ .theme-panel{ top:50%;bottom:auto;right:8px; transform:translate(calc(100% + 12px),-50%); flex-direction:row;flex-wrap:wrap; justify-content:center; max-height:140px; width:auto; max-width:calc(100vw - 24px); border-radius:14px; padding:8px 10px; } .theme-panel.open{ transform:translate(0,-50%); } .theme-toggle-btn{ top:50%;bottom:auto; right:8px; transform:translateY(-50%); border-radius:50%; border:1.5px solid var(--border2); } } /* Admin pages: on desktop, panel stays at vertical center. On mobile/tablet it parks below the admin topbar. */ @media(min-width:601px){ body.admin-body .theme-panel, .admin-layout .theme-panel{ top:50%; transform:translate(100%,-50%); } body.admin-body .theme-panel.open, .admin-layout .theme-panel.open{ transform:translate(0,-50%); } body.admin-body .theme-toggle-btn, .admin-layout .theme-toggle-btn{ top:50%; transform:translateY(-50%); } } @media(max-width:600px){ body.admin-body .theme-panel, .admin-layout .theme-panel{ top:50%;bottom:auto;right:8px; transform:translate(calc(100% + 12px),-50%); flex-direction:row;flex-wrap:wrap; justify-content:center; max-height:140px; width:auto; max-width:calc(100vw - 24px); border-radius:14px; padding:8px 10px; } body.admin-body .theme-panel.open, .admin-layout .theme-panel.open{ transform:translate(0,-50%); } body.admin-body .theme-toggle-btn, .admin-layout .theme-toggle-btn{ top:50%;bottom:auto; right:8px; transform:translateY(-50%); border-radius:50%; border:1.5px solid var(--border2); } } /* ═══════════════════════════════════════════════════════════════ NAVBAR ═══════════════════════════════════════════════════════════════ */ .navbar{ position:sticky;top:0;z-index:1000; height:var(--nav-h); background:rgba(9,9,15,.95); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom:1px solid var(--border); overflow:visible; } body.theme-light .navbar{ background:rgba(255,255,255,.96); box-shadow:0 1px 0 var(--border),0 4px 20px rgba(0,0,0,.06); } .nav-inner{ max-width:1200px;margin:0 auto;padding:0 16px; display:flex;align-items:center;height:var(--nav-h); gap:6px;overflow:visible; } @media(min-width:768px){.nav-inner{padding:0 24px;gap:8px}} .nav-logo{ font-weight:900;font-size:1.05rem; display:flex;align-items:center;flex-shrink:0; white-space:nowrap;letter-spacing:-.03em;gap:0; } .nav-logo .r{color:var(--red)} .nav-links{display:none;align-items:center;justify-content:center;gap:1px;flex:1;overflow:visible} @media(min-width:960px){.nav-links{display:flex}} .nav-links a{ color:var(--text2);font-size:.78rem;font-weight:500; padding:5px 8px;border-radius:7px;transition:all .2s; white-space:nowrap; } .nav-links a:hover,.nav-links a.active{color:var(--text);background:var(--surface2)} .nav-right{display:flex;align-items:center;gap:5px;margin-left:auto;flex-shrink:0} .btn-login{ color:var(--text2);font-size:.78rem;padding:6px 10px; border:1px solid var(--border);border-radius:7px; background:none;cursor:pointer;transition:all .2s;white-space:nowrap; } .btn-login:hover{border-color:var(--border2);color:var(--text)} @media(max-width:959px){.nav-right>.btn-login,.nav-right>a[href*="login"],.nav-right>a[href*="register"]{display:none!important}} @media(max-width:959px){ /* The logged-in user's name/dropdown is already fully reachable via the hamburger menu (My Dashboard / Settings / Logout) — on mobile it just ate the width the hamburger button needed, silently clipping the hamburger off-screen (invisible, since body has overflow-x:hidden) for any logged-in member. Breakpoint matches #mobileNavBtn's own show/hide breakpoint below so there's no gap where both a full-width control AND the hamburger try to occupy the same row. */ .nav-right>.nav-dropdown{display:none!important} /* This span was already split out in the markup specifically to allow collapsing to icon-only on mobile — completing that. */ .btn-report .report-label{display:none} } .btn-report{ background:var(--red);color:var(--on-red);padding:7px 12px; border-radius:8px;font-weight:700;font-size:.76rem; display:inline-flex;align-items:center;gap:4px; flex-shrink:0;white-space:nowrap;transition:background .2s; animation:pulse-ac 3s infinite; } .btn-report:hover{background:var(--red-dark)} @keyframes pulse-ac{0%,100%{box-shadow:0 0 0 0 var(--red-glow)}70%{box-shadow:0 0 0 8px transparent}} @media(max-width:400px){.rpl{display:none}} /* Mobile nav button */ #mobileNavBtn{ display:flex;align-items:center;justify-content:center; width:44px;height:44px;padding:0; background:var(--surface);border:1.5px solid var(--border2); border-radius:8px;color:var(--text);font-size:1.2rem; cursor:pointer;flex-shrink:0; -webkit-tap-highlight-color:transparent; touch-action:manipulation; position:relative;z-index:1002; transition:background .2s,border-color .2s; } #mobileNavBtn:hover{background:var(--surface2);border-color:var(--border3)} #mobileNavBtn.active{background:var(--red);border-color:var(--red);color:var(--on-red)} @media(min-width:960px){#mobileNavBtn{display:none!important}} /* Mobile nav drawer */ #mobileNav{ display:none; position:fixed; top:var(--nav-h);left:0;right:0; z-index:1001; background:var(--bg2); border-bottom:1px solid var(--border2); max-height:calc(100vh - var(--nav-h)); overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:0 16px 50px rgba(0,0,0,.6); } #mobileNav.open{ display:block; animation:navDown .22s ease; } @keyframes navDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} #mobileNav a{ display:flex;align-items:center;gap:10px; padding:14px 20px;color:var(--text2);font-size:.9rem; border-bottom:1px solid var(--border);transition:all .18s; min-height:52px; } #mobileNav a:hover{color:var(--red);background:var(--bg3);padding-left:26px} #mobileNav a:last-child{border-bottom:none} .mobile-nav-search{padding:12px 16px;border-bottom:1px solid var(--border)} .mobile-nav-search form{ display:flex;align-items:center; background:var(--bg3);border:1px solid var(--border2); border-radius:8px;padding:7px 12px;gap:8px; } .mobile-nav-search input{ background:none;border:none;outline:none; color:var(--text);font-size:.88rem;flex:1;min-width:0; } .mobile-nav-search input::placeholder{color:var(--text3)} .mobile-nav-search button{ background:var(--red);color:var(--on-red);border:none; padding:5px 12px;border-radius:6px;font-size:.8rem; cursor:pointer;flex-shrink:0; } .mob-cat-toggle{ display:flex;align-items:center;justify-content:space-between; padding:14px 20px;color:var(--text2);font-size:.9rem; border-bottom:1px solid var(--border); cursor:pointer;user-select:none;min-height:52px; transition:all .18s;background:var(--bg2); } .mob-cat-toggle:hover,.mob-cat-toggle.open{color:var(--red);background:var(--bg3)} .mob-cat-arrow{transition:transform .25s;font-size:.8rem} .mob-cat-toggle.open .mob-cat-arrow{transform:rotate(180deg)} .mob-cat-list{display:none;background:var(--bg3);border-bottom:1px solid var(--border)} .mob-cat-list.open{display:block} .mob-cat-link{ display:flex!important;align-items:center;gap:8px; padding:11px 20px 11px 30px!important; border-bottom:1px solid var(--border)!important; font-size:.85rem!important;color:var(--text2)!important;min-height:46px; } .mob-cat-link:hover{color:var(--red)!important;background:var(--surface)!important} /* Desktop dropdowns */ .nav-dropdown{position:relative;height:100%;display:flex;align-items:center} .nav-drop-btn{cursor:pointer;display:flex;align-items:center;gap:3px} .nav-drop-menu{ display:none; position:absolute;top:calc(100% + 8px);left:0; background:var(--surface);border:1px solid var(--border2); border-radius:12px;min-width:200px;padding:6px; z-index:1001;box-shadow:var(--shadow2); max-height:360px;overflow-y:auto; animation:fadeUp .16s ease; } @keyframes fadeUp{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}} .nav-drop-menu.force-open{display:block} .nav-drop-menu a{ display:flex;align-items:center;gap:8px; padding:9px 12px;border-radius:8px;color:var(--text2); font-size:.84rem;transition:all .15s; } .nav-drop-menu a:hover{background:var(--bg3);color:var(--text)} .nav-megadrop{position:relative;height:100%;display:flex;align-items:center} .nav-mega-panel{ display:none; position:fixed;left:50%;transform:translateX(-50%); top:var(--nav-h);width:100%;max-width:1200px; background:var(--surface);border:1px solid var(--border2);border-top:none; box-shadow:0 24px 60px rgba(0,0,0,.5);z-index:1001; border-radius:0 0 16px 16px; } .nav-mega-panel.force-open{display:block} @media(max-width:959px){.nav-mega-panel{display:none!important}} .nav-mega-inner{ max-width:1200px;margin:0 auto;padding:22px;gap:18px; display:grid;grid-template-columns:repeat(5,1fr); } @media(max-width:1100px){.nav-mega-inner{grid-template-columns:repeat(3,1fr)}} .nav-mega-col-title{ font-size:.65rem;font-weight:700;text-transform:uppercase; letter-spacing:.08em;color:var(--text3); margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--border); } .nav-mega-cat{ display:flex;align-items:center;gap:7px; font-size:.83rem;font-weight:600;color:var(--text); padding:6px 8px;border-radius:7px;transition:all .15s; } .nav-mega-cat:hover{color:var(--red);background:var(--bg3)} .nav-mega-icon{font-size:.9rem;flex-shrink:0} .nav-mega-label{flex:1;min-width:0} .nav-cat-count{ font-size:.63rem;color:var(--text3);background:var(--bg3); padding:1px 6px;border-radius:10px;flex-shrink:0; } .nav-mega-subs{display:flex;flex-direction:column;padding-left:20px;margin-top:2px} .nav-mega-subs a{font-size:.73rem;color:var(--text3);padding:3px 7px;border-radius:4px;transition:color .15s} .nav-mega-subs a:hover{color:var(--text2);background:var(--bg3)} .nav-mega-footer{ max-width:1200px;margin:0 auto;padding:12px 22px 18px; border-top:1px solid var(--border); display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px; } .nav-mega-viewall{font-size:.82rem;color:var(--text2);font-weight:600} .nav-mega-viewall:hover{color:var(--text)} .nav-mega-cta{ font-size:.82rem;font-weight:700;color:#fff; background:var(--red);padding:9px 18px;border-radius:8px;transition:background .2s; } .nav-mega-cta:hover{background:var(--red-dark)} .nav-badge{margin-left:auto;background:var(--red);color:var(--on-red);font-size:.6rem;font-weight:800;padding:1px 5px;border-radius:10px;flex-shrink:0} /* Ticker */ .ticker{ background:linear-gradient(90deg,rgba(230,57,70,.07),rgba(230,57,70,.03),rgba(230,57,70,.07)); border-bottom:1px solid rgba(230,57,70,.18);padding:7px 0;overflow:hidden; } .ticker-inner{ max-width:1200px;margin:0 auto;padding:0 16px; display:flex;align-items:center;gap:12px;flex-wrap:wrap; } .ticker-label{font-weight:700;font-size:.68rem;color:var(--red);text-transform:uppercase;letter-spacing:.1em;flex-shrink:0} .ticker a{font-size:.77rem;color:var(--orange);transition:color .2s} .ticker a:hover{color:var(--red)} .ticker-sep{color:var(--text3)} @media(max-width:480px){.ticker-label{display:none}} /* Global search bar */ .global-search-bar{ position:sticky;top:var(--nav-h);z-index:990; background:var(--bg2);border-bottom:1px solid var(--border); padding:10px 0;width:100%; } body.theme-light .global-search-bar{background:rgba(244,245,251,.97);backdrop-filter:blur(12px)} .global-search-inner{max-width:720px;margin:0 auto;padding:0 16px} .global-search-box{ display:flex;align-items:center;gap:8px; background:var(--surface);border:1.5px solid var(--border2);border-radius:100px; padding:6px 6px 6px 16px;transition:border-color .2s,box-shadow .2s; } .global-search-box:focus-within{border-color:var(--red);box-shadow:0 0 0 4px var(--red-glow)} .global-search-box input{flex:1;min-width:0;width:0;background:none;border:none;outline:none;color:var(--text);font-size:.9rem} .global-search-box input::placeholder{color:var(--text3)} .global-search-box button{ background:var(--red);color:var(--on-red);border:none; padding:8px 18px;border-radius:100px;font-weight:700; font-size:.82rem;cursor:pointer;flex-shrink:0;white-space:nowrap; transition:background .2s; } .global-search-box button:hover{background:var(--red-dark)} /* ═══════════════════════════════════════════════════════════════ HERO — Full redesign ═══════════════════════════════════════════════════════════════ */ .hero{ position:relative; padding:64px 16px 52px; text-align:center; overflow:hidden; background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(230,57,70,.12) 0%, transparent 70%), var(--bg); } @media(min-width:768px){.hero{padding:88px 24px 68px}} /* Grid lines */ .hero::before{ content:''; position:absolute;inset:0; background-image: linear-gradient(var(--border) 1px,transparent 1px), linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:50px 50px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%); pointer-events:none; } .hero-inner{position:relative;z-index:1;max-width:800px;margin:0 auto;display:flex;flex-direction:column;align-items:center} .hero-badge{ display:inline-flex;align-items:center;gap:6px; background:rgba(230,57,70,.1);border:1px solid rgba(230,57,70,.3); color:var(--orange);padding:5px 16px;border-radius:100px; font-size:.72rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;margin-bottom:18px; } .hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.4s infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}} .hero-title{ font-size:clamp(2rem,6vw,4rem); font-weight:900;line-height:1.05; margin-bottom:16px;letter-spacing:-.03em; color:var(--text); } .hero-title .hl{ color:var(--red); text-shadow:0 0 60px rgba(230,57,70,.4); } .hero-sub{ font-size:clamp(.9rem,2vw,1.05rem); color:var(--text2);max-width:560px; margin:0 auto 28px;line-height:1.65; } /* Hero search */ .hero-search-wrap{width:100%;max-width:640px;margin:0 auto 28px} .search-box{ display:flex;align-items:center; background:var(--surface); border:1.5px solid var(--border2); border-radius:14px;padding:6px 6px 6px 16px;gap:8px; transition:border-color .2s,box-shadow .2s; margin-bottom:12px; box-shadow:0 4px 24px rgba(0,0,0,.3); } .search-box:focus-within{border-color:var(--red);box-shadow:0 0 0 4px var(--red-glow),0 4px 24px rgba(0,0,0,.3)} .search-box input{flex:1;min-width:0;width:0;background:none;border:none;outline:none;color:var(--text);font-size:.95rem;padding:5px 0} .search-box input::placeholder{color:var(--text3)} .search-box button{ background:var(--red);color:var(--on-red);border:none; padding:11px 22px;border-radius:10px; font-weight:700;font-size:.88rem;cursor:pointer; flex-shrink:0;white-space:nowrap;transition:background .2s; } .search-box button:hover{background:var(--red-dark)} @media(max-width:420px){ .search-box{flex-wrap:wrap} .search-box input{width:100%;flex:none;min-width:100%} .search-box button{width:100%} } .search-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center} .search-tags span{color:var(--text3);font-size:.77rem;flex-shrink:0} .search-tags a{ color:var(--text2);font-size:.73rem;padding:4px 12px; border:1px solid var(--border);border-radius:100px; transition:all .2s;background:var(--bg3); } .search-tags a:hover{border-color:var(--red);color:var(--red);background:rgba(230,57,70,.06)} /* Stats strip */ .hero-stats{ display:grid;grid-template-columns:repeat(7,1fr);gap:10px; margin-top:28px;padding-top:20px;border-top:1px solid var(--border); width:100%;max-width:960px; } .stat-item{ padding:14px 10px;text-align:center; background:var(--surface);border:1px solid var(--border);border-radius:12px; transition:transform .15s ease,border-color .15s ease; } .stat-item:hover{transform:translateY(-2px);border-color:var(--accent)} .stat-num{display:block;font-size:1.5rem;font-weight:800;color:var(--red);line-height:1;font-variant-numeric:tabular-nums} .stat-label{display:block;font-size:.63rem;color:var(--text3);margin-top:5px;text-transform:uppercase;letter-spacing:.05em;line-height:1.3} @media(max-width:900px){ .hero-stats{grid-template-columns:repeat(4,1fr)} } @media(max-width:600px){ .hero-stats{grid-template-columns:repeat(2,1fr)} .stat-item:last-child{grid-column:1/-1} .stat-num{font-size:1.35rem} } /* ═══════════════════════════════════════════════════════════════ SECTIONS ═══════════════════════════════════════════════════════════════ */ .section{padding:52px 0} @media(min-width:768px){.section{padding:68px 0}} .section-dark{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .section-hdr{text-align:center;margin-bottom:36px} .section-hdr h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin-bottom:8px} .section-hdr p{color:var(--text2);font-size:.9rem;max-width:520px;margin:0 auto} .section-hdr-flex{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;flex-wrap:wrap;gap:12px} .section-hdr-flex h2{font-size:clamp(1.3rem,3vw,1.8rem);font-weight:800;margin-bottom:4px} .section-hdr-flex p{color:var(--text2);font-size:.86rem} @media(max-width:560px){.section-hdr-flex{flex-direction:column;align-items:flex-start}} /* Report cards */ .reports-grid{display:grid;grid-template-columns:1fr;gap:14px;min-width:0} @media(min-width:560px){.reports-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:880px){.reports-grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:1100px){.reports-grid{grid-template-columns:repeat(4,1fr)}} .report-grid{display:grid;grid-template-columns:1fr;gap:16px;min-width:0} @media(min-width:580px){.report-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:900px){.report-grid{grid-template-columns:repeat(3,1fr)}} .report-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r2); padding:16px;transition:all .22s;position:relative; display:flex;flex-direction:column;gap:10px; overflow:hidden;word-wrap:break-word;overflow-wrap:break-word;min-width:0; } .report-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--red);opacity:0;transition:opacity .22s} .report-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow);background:var(--surface2)} .report-card:hover::before{opacity:1} .report-card-title{font-size:.92rem;font-weight:700;line-height:1.35} .report-card-title a{color:var(--text);transition:color .2s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .report-card-title a:hover{color:var(--red)} .report-card-desc{color:var(--text2);font-size:.8rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .report-card-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:10px;border-top:1px solid var(--border);font-size:.72rem;color:var(--text3)} .report-card-meta span{display:flex;align-items:center;gap:3px;flex-shrink:0} .report-card-featured{position:absolute;top:10px;right:10px;background:linear-gradient(135deg,#f39c12,#f97316);color:#fff;font-size:.6rem;font-weight:800;padding:2px 8px;border-radius:100px;text-transform:uppercase} /* Category grid */ .cat-grid{display:grid;grid-template-columns:1fr;gap:10px;min-width:0} @media(min-width:480px){.cat-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:760px){.cat-grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:1000px){.cat-grid{grid-template-columns:repeat(4,1fr)}} .cat-card{ display:flex;align-items:center;gap:10px; background:var(--surface);border:1px solid var(--border); border-radius:var(--r);padding:14px; transition:all .22s;overflow:hidden;min-height:68px; border-left:3px solid var(--cc,var(--red)); } .cat-card:hover{border-color:var(--border2);border-left-color:var(--cc,var(--red));transform:translateX(3px);box-shadow:var(--shadow);background:var(--surface2)} .cat-name{font-weight:700;font-size:.84rem;line-height:1.3;word-break:break-word;color:var(--text)} .cat-count{color:var(--text3);font-size:.7rem;margin-top:2px} .cat-icon{font-size:1.3rem;flex-shrink:0;width:30px;text-align:center} /* Quick action grid */ .quick-actions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px} @media(max-width:480px){.quick-actions-grid{grid-template-columns:repeat(2,1fr);gap:8px}} .quick-action-card{ background:var(--surface);border:1px solid var(--border);border-radius:12px; padding:16px 12px;text-align:center;transition:all .22s; border-top:3px solid var(--cc,var(--red));display:block; } .quick-action-card:hover{border-color:var(--border2);border-top-color:var(--cc,var(--red));transform:translateY(-3px);box-shadow:var(--shadow);background:var(--surface2)} .quick-action-icon{font-size:1.6rem;margin-bottom:7px} .quick-action-label{font-size:.78rem;font-weight:600;color:var(--text2)} /* Scammer cards */ .scammer-grid{display:grid;grid-template-columns:1fr;gap:16px;min-width:0} @media(min-width:580px){.scammer-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:900px){.scammer-grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:1200px){.scammer-grid{grid-template-columns:repeat(4,1fr)}} .scammer-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r2); overflow:hidden;transition:all .22s;display:flex;flex-direction:column; } .scammer-card:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:var(--shadow2)} .scammer-card-head{padding:16px;border-bottom:1px solid var(--border);background:var(--bg3);display:flex;gap:12px;align-items:flex-start} .scammer-card-logo{width:46px;height:46px;border-radius:10px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;border:1px solid var(--border)} .scammer-card-title{font-weight:800;font-size:.95rem;line-height:1.3} .scammer-card-title a{color:var(--text);transition:color .2s} .scammer-card-title a:hover{color:var(--red)} .scammer-card-body{padding:14px 16px;flex:1} .scammer-card-footer{padding:10px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap} .scammer-meta-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px} .scammer-meta-item{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;color:var(--text3);background:var(--bg3);padding:3px 8px;border-radius:20px;border:1px solid var(--border);white-space:nowrap} .risk-meter{height:7px;border-radius:100px;background:var(--bg3);overflow:hidden;margin-top:10px} .risk-meter-fill{height:100%;border-radius:100px;transition:width .5s} .risk-crit{background:var(--red);animation:pulse-ac 1.5s infinite} .risk-high{background:var(--orange)} .risk-med{background:var(--yellow)} .risk-low{background:var(--green)} .scammer-detail-layout{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;min-width:0} @media(min-width:900px){.scammer-detail-layout{grid-template-columns:1fr 300px;min-width:0}} /* Top losses */ .top-losses-item{ display:flex;align-items:center;gap:16px; background:var(--surface);border:1px solid var(--border); border-radius:10px;padding:14px 16px;transition:all .2s;flex-wrap:wrap; } .top-losses-item:hover{border-color:var(--border2);background:var(--surface2);transform:translateX(4px)} .top-losses-rank{font-size:1.3rem;min-width:28px;text-align:center;flex-shrink:0} .top-losses-title{flex:1;font-weight:600;font-size:.86rem;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Tips grid */ .tips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:18px} @media(max-width:480px){.tips-grid{grid-template-columns:1fr}} .tip-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px} .tip-icon{font-size:1.4rem;margin-bottom:8px} .tip-title{font-weight:700;font-size:.88rem;margin-bottom:4px;color:var(--text)} .tip-desc{color:var(--text3);font-size:.78rem;line-height:1.5} /* CTA section */ .cta-section{ background:linear-gradient(135deg,rgba(230,57,70,.1),rgba(230,57,70,.04)); border-top:1px solid rgba(230,57,70,.25);border-bottom:1px solid rgba(230,57,70,.25); padding:56px 0;text-align:center; } .cta-section h2{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:900;margin-bottom:12px} .cta-section p{color:var(--text2);max-width:500px;margin:0 auto 24px;font-size:.92rem} .cta-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* Revoke CTA */ .revoke-cta{ display:flex;align-items:center;gap:16px;flex-wrap:wrap; background:linear-gradient(135deg,rgba(230,57,70,.1),rgba(230,57,70,.04)); border:2px solid rgba(230,57,70,.35);border-radius:14px;padding:20px;margin:18px 0; } .revoke-cta a{ background:var(--red);color:var(--on-red);padding:11px 22px;border-radius:9px; font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;gap:7px; flex-shrink:0;transition:background .2s; } .revoke-cta a:hover{background:var(--red-dark)} @media(max-width:600px){ .revoke-cta{flex-direction:column;align-items:stretch;text-align:center} .revoke-cta>div{min-width:100%!important} .revoke-cta a{justify-content:center} } /* ═══════════════════════════════════════════════════════════════ BADGES & BUTTONS ═══════════════════════════════════════════════════════════════ */ .tbadge,.rbadge,.sbadge{ display:inline-flex;align-items:center;gap:3px; font-size:.65rem;font-weight:700;padding:3px 8px; border-radius:100px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;flex-shrink:0; } .threat-low {background:rgba(251,191,36,.1);color:#ca9a00;border:1px solid rgba(251,191,36,.25)} .threat-med {background:rgba(244,162,97,.1);color:#d97706;border:1px solid rgba(244,162,97,.25)} .threat-high {background:rgba(230,57,70,.1);color:var(--red);border:1px solid rgba(230,57,70,.25)} .threat-crit {background:rgba(230,57,70,.18);color:#ff5e6b;border:1px solid rgba(230,57,70,.45);animation:pulse-ac 1.5s infinite} .type-scam {background:rgba(230,57,70,.08);color:var(--red);border:1px solid rgba(230,57,70,.18)} .type-missing{background:rgba(59,130,246,.08);color:#3b82f6;border:1px solid rgba(59,130,246,.18)} .type-drug {background:rgba(168,85,247,.08);color:var(--purple);border:1px solid rgba(168,85,247,.18)} .s-pending {background:rgba(251,191,36,.08);color:#ca9a00;border:1px solid rgba(251,191,36,.18)} .s-approved {background:rgba(34,197,94,.08);color:#16a34a;border:1px solid rgba(34,197,94,.18)} .s-featured {background:rgba(249,115,22,.1);color:#ea580c;border:1px solid rgba(249,115,22,.25)} .s-rejected {background:rgba(230,57,70,.08);color:var(--red);border:1px solid rgba(230,57,70,.18)} .btn{ display:inline-flex;align-items:center;gap:5px;justify-content:center; padding:9px 18px;border-radius:8px;font-weight:600;font-size:.84rem; cursor:pointer;transition:all .2s;border:none;font-family:var(--fb); text-decoration:none;white-space:nowrap; } .btn-primary{background:var(--red);color:var(--on-red)} .btn-primary:hover{background:var(--red-dark);transform:translateY(-1px)} .btn-secondary{background:var(--surface3);color:var(--text);border:1px solid var(--border2)} .btn-secondary:hover{border-color:var(--red);color:var(--red)} .btn-outline{background:transparent;color:var(--text2);border:1px solid var(--border2)} .btn-outline:hover{border-color:var(--red);color:var(--red)} .btn-success{background:#22c55e;color:#fff} .btn-danger{background:var(--red);color:var(--on-red)} .btn-sm{padding:5px 11px;font-size:.74rem} .btn-lg{padding:12px 28px;font-size:.96rem} .btn-cta{ background:linear-gradient(135deg,var(--red),var(--red-dark)); color:#fff;padding:13px 28px;border-radius:10px;font-weight:800;font-size:.96rem; box-shadow:0 4px 24px var(--red-glow);transition:all .2s; display:inline-flex;align-items:center;gap:6px; } .btn-cta:hover{transform:scale(1.03);box-shadow:0 6px 32px var(--red-glow)} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important} @media(max-width:600px){ /* Primary "save this form" submit buttons (Save Settings, Save Changes, Create & Email User, Send Alert Now, etc.) were bare inline-flex buttons with no responsive treatment of their own — unlike .form-submit, they just sat small and left-aligned at the bottom of an otherwise full-width form on mobile. .btn-sm buttons (Add/Search/ Filter/Apply next to a filter bar or input) are deliberately excluded so they stay compact. */ button[type="submit"].btn-primary:not(.btn-sm), a.btn-primary:not(.btn-sm){ width:100%; } } /* ═══════════════════════════════════════════════════════════════ FORMS ═══════════════════════════════════════════════════════════════ */ .form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:20px;margin-bottom:18px;overflow:hidden} @media(min-width:768px){.form-card{padding:28px}} .form-card h2{font-size:1.1rem;font-weight:800;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--border)} .fg{display:flex;flex-direction:column;gap:5px;margin-bottom:14px} .fg label{font-size:.75rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em} .fg label .req{color:var(--red)} .fg input,.fg select,.fg textarea{ background:var(--bg3);border:1px solid var(--border2);border-radius:8px; padding:9px 13px;color:var(--text);font-size:.9rem; transition:border-color .2s;width:100%;outline:none; } .fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-glow)} .fg textarea{resize:vertical;min-height:90px} .fg .hint{font-size:.71rem;color:var(--text3)} .fg select option{background:var(--bg3);color:var(--text)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px} @media(max-width:600px){ .form-row,.form-row-3{grid-template-columns:1fr;gap:0} /* iOS Safari auto-zooms the whole page in when a focused input's font-size is under 16px — every form field on the site (register, login, report, contact, settings...) was at .9rem (~14.4px), so tapping into any field on an iPhone triggered an unwanted zoom. 16px is the documented threshold, so this is the minimum that avoids it while keeping the same look on everything larger. */ .fg input,.fg select,.fg textarea{font-size:16px} .global-search-box input,.search-box input,.filters-bar select,.filters-bar input{font-size:16px} } .form-submit{ width:100%;background:var(--red);color:var(--on-red);border:none; padding:13px;border-radius:10px;font-family:var(--fb); font-weight:800;font-size:.96rem;cursor:pointer;transition:all .2s; } .form-submit:hover{background:var(--red-dark)} .cb-row{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 12px;border:1px solid var(--border);border-radius:8px;transition:all .2s} .cb-row input[type=checkbox]{accent-color:var(--red);width:15px;height:15px} .cb-row span{font-size:.84rem;color:var(--text2)} /* ═══════════════════════════════════════════════════════════════ ALERTS, PAGINATION, TABS, BREADCRUMB ═══════════════════════════════════════════════════════════════ */ .alert{padding:11px 16px;border-radius:8px;font-size:.86rem;margin-bottom:14px;display:flex;align-items:flex-start;gap:8px;word-wrap:break-word} .alert-success{background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.22);color:#16a34a} .alert-error {background:rgba(230,57,70,.07);border:1px solid rgba(230,57,70,.22);color:var(--red)} .alert-warning{background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.22);color:#b8870a} .alert-info {background:rgba(59,130,246,.07);border:1px solid rgba(59,130,246,.22);color:#2563eb} .breadcrumb{display:flex;align-items:center;gap:5px;font-size:.77rem;color:var(--text3);margin-bottom:14px;flex-wrap:wrap} .breadcrumb a{color:var(--text3);transition:color .2s} .breadcrumb a:hover{color:var(--red)} .pagination{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:36px;flex-wrap:wrap} .page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--border);color:var(--text2);font-size:.82rem;transition:all .2s} .page-btn:hover{border-color:var(--red);color:var(--red)} .page-btn.active{background:var(--red);border-color:var(--red);color:var(--on-red)} .page-btn.disabled{opacity:.3;pointer-events:none} .tab-nav{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto;scrollbar-width:none} .tab-nav::-webkit-scrollbar{display:none} .tab-btn{background:none;border:none;border-bottom:2px solid transparent;padding:9px 12px;color:var(--text2);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--fb);white-space:nowrap;flex-shrink:0} .tab-btn.active,.tab-btn:hover{color:var(--text);border-bottom-color:var(--red)} .tab-pane{display:none} .tab-pane.active{display:block} /* ═══════════════════════════════════════════════════════════════ PAGE HEADER, DETAIL ═══════════════════════════════════════════════════════════════ */ .page-hdr{padding:28px 0 22px;border-bottom:1px solid var(--border);background:var(--bg2)} .page-hdr h1{font-size:clamp(1.4rem,4vw,2.2rem);font-weight:800;margin-bottom:6px;word-break:break-word} .page-hdr p{color:var(--text2);font-size:.9rem;max-width:580px} .detail-layout{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;min-width:0} @media(min-width:900px){.detail-layout{grid-template-columns:1fr 300px;min-width:0}} .detail-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;margin-bottom:16px} .detail-box-hdr{padding:12px 18px;border-bottom:1px solid var(--border);font-weight:700;font-size:.88rem;display:flex;align-items:center;gap:7px;background:var(--bg3)} .detail-box-body{padding:16px 18px} .detail-row{display:flex;padding:7px 0;border-bottom:1px solid var(--border);gap:10px;flex-wrap:wrap} .detail-row:last-child{border-bottom:none} .detail-label{font-size:.72rem;font-weight:600;color:var(--text3);min-width:120px;flex-shrink:0;text-transform:uppercase;letter-spacing:.03em;padding-top:2px} .detail-val{font-size:.84rem;color:var(--text2);word-break:break-word;flex:1;min-width:0} .wallet-addr{font-family:var(--fm);font-size:.75rem;word-break:break-all;color:var(--orange);background:var(--bg);padding:8px 12px;border-radius:8px;border:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:8px;overflow-wrap:break-word} .addr-text{flex:1;min-width:0;word-break:break-all} .copy-btn{background:var(--surface2);border:none;color:var(--text2);padding:3px 8px;border-radius:5px;cursor:pointer;font-size:.68rem;flex-shrink:0;transition:all .2s;font-family:var(--fb)} .copy-btn:hover{background:var(--red);color:var(--on-red)} .info-chip{display:inline-flex;align-items:center;gap:4px;background:var(--bg3);border:1px solid var(--border);padding:5px 11px;border-radius:8px;font-size:.77rem;color:var(--text2);white-space:nowrap} .info-chip strong{color:var(--text)} .filters-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:20px} .filters-bar select,.filters-bar input{background:var(--bg3);border:1px solid var(--border2);border-radius:7px;padding:7px 11px;color:var(--text);font-size:.82rem;outline:none;transition:border-color .2s} .filters-bar select:focus,.filters-bar input:focus{border-color:var(--red)} @media(max-width:580px){.filters-bar{flex-direction:column}.filters-bar select,.filters-bar input{width:100%}} /* ═══════════════════════════════════════════════════════════════ ADMIN ═══════════════════════════════════════════════════════════════ */ .admin-layout{display:flex;min-height:100vh} .admin-sidebar{ width:220px;background:var(--bg2);border-right:1px solid var(--border); display:flex;flex-direction:column;flex-shrink:0; position:fixed;top:0;left:0;height:100vh;overflow-y:auto; z-index:200;transform:translateX(-100%);transition:transform .25s; scrollbar-width:thin;scrollbar-color:var(--border) transparent; } .admin-sidebar.open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.5)} @media(min-width:900px){.admin-sidebar{position:sticky;top:0;transform:none!important;box-shadow:none}} .admin-content{flex:1;min-width:0;padding:16px} @media(min-width:768px){.admin-content{padding:24px}} .admin-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:199} .admin-overlay.show{display:block} .admin-topbar{display:flex;align-items:center;gap:10px;background:var(--bg2);border-bottom:1px solid var(--border);padding:10px 16px;position:sticky;top:0;z-index:150} @media(min-width:900px){.admin-topbar{display:none}} .admin-topbar-logo{font-weight:800;font-size:.9rem;flex:1} .admin-topbar-logo span{color:var(--red)} .admin-mob-btn{background:none;border:1px solid var(--border);color:var(--text2);padding:6px 10px;border-radius:7px;cursor:pointer;font-size:.9rem;transition:all .2s;min-width:40px;min-height:36px;display:flex;align-items:center;justify-content:center} .admin-mob-btn:hover{border-color:var(--red);color:var(--text)} .admin-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px;flex-wrap:wrap} .admin-hdr h1{font-size:clamp(1.2rem,3vw,1.6rem);font-weight:800} .admin-hdr>div{flex-wrap:wrap} .sidebar-logo{padding:18px 16px;border-bottom:1px solid var(--border);font-weight:800;font-size:.93rem;flex-shrink:0} .sidebar-nav a{display:flex;align-items:center;gap:9px;padding:9px 16px;color:var(--text2);font-size:.81rem;transition:all .2s;border-left:3px solid transparent} .sidebar-nav a:hover,.sidebar-nav a.active{color:var(--text);background:var(--surface);border-left-color:var(--red)} .nav-section{border-bottom:1px solid var(--border)} .nav-section:last-child{border-bottom:none} .nav-group-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:11px 16px;font-size:.64rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;background:none;border:none;cursor:pointer;text-align:left;transition:color .2s} .nav-group-toggle:hover{color:var(--text2)} .nav-group-arrow{font-size:.68rem;transition:transform .2s;flex-shrink:0} .nav-section.open .nav-group-arrow{transform:rotate(180deg)} .nav-group-items{display:none;padding-bottom:4px} .nav-section.open .nav-group-items{display:block} .table-wrap,.admin-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .admin-table{width:100%;border-collapse:collapse;min-width:560px} .admin-table th{padding:9px 12px;text-align:left;font-size:.7rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--bg3)} .admin-table td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:.82rem;vertical-align:middle;word-wrap:break-word;max-width:280px} .admin-table tr:hover td{background:var(--bg3)} .admin-table td.actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:none} @media(max-width:600px){ .admin-table{min-width:480px} .admin-table th,.admin-table td{padding:8px 9px;font-size:.76rem} .admin-table td.actions .btn{padding:4px 9px;font-size:.7rem} } .stat-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px} @media(min-width:640px){.stat-cards{grid-template-columns:repeat(4,1fr);gap:14px}} .stat-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;position:relative;overflow:hidden;transition:all .2s} .stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border2)} .stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--cc,var(--red))} .stat-card .num{font-size:1.8rem;font-weight:800;line-height:1} .stat-card .lbl{color:var(--text3);font-size:.74rem;margin-top:5px} .stat-card .ico{font-size:1.8rem;position:absolute;right:14px;top:14px;opacity:.15} .dash-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px} @media(min-width:640px){.dash-stat-grid{grid-template-columns:repeat(4,1fr);gap:14px}} .dash-sc{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 14px;position:relative;overflow:hidden;transition:all .2s} .dash-sc:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border2)} .dash-sc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--cc,var(--red))} .dash-sc .num{font-size:1.7rem;font-weight:800;line-height:1} .dash-sc .lbl{color:var(--text3);font-size:.73rem;margin-top:5px} .dash-sc .ico{font-size:1.5rem;position:absolute;right:12px;top:13px;opacity:.14} @media(max-width:399px){.dash-sc .num{font-size:1.3rem}.dash-sc{padding:12px}} .dash-main-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;min-width:0} .dash-main-grid>div{min-width:0} @media(min-width:860px){.dash-main-grid{grid-template-columns:1fr 290px}} .dash-panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:16px;min-width:0} .dash-panel:last-child{margin-bottom:0} .dash-panel-hdr{padding:12px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:.87rem;display:flex;align-items:center;gap:7px;background:var(--bg3)} .dash-recent-table{width:100%;border-collapse:collapse} .dash-recent-table th{padding:9px 12px;text-align:left;font-size:.69rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--bg3)} .dash-recent-table td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:.81rem;vertical-align:middle;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dash-recent-table tr:last-child td{border-bottom:none} .dash-recent-table tr:hover td{background:var(--bg3)} /* ═══════════════════════════════════════════════════════════════ MISC ═══════════════════════════════════════════════════════════════ */ .tag{display:inline-block;background:var(--bg3);border:1px solid var(--border);padding:2px 9px;border-radius:100px;font-size:.7rem;color:var(--text3);margin:2px;white-space:nowrap} .empty-state{text-align:center;padding:52px 20px;color:var(--text3)} .empty-state .ico{font-size:3rem;margin-bottom:12px} .empty-state h3{font-size:1rem;font-weight:700;margin-bottom:6px;color:var(--text2)} .progress{background:var(--bg3);border-radius:100px;height:6px;overflow:hidden} .progress-bar{height:100%;background:var(--red);border-radius:100px;transition:width .5s} .spinner{width:20px;height:20px;border:2px solid var(--border2);border-top-color:var(--red);border-radius:50%;animation:spin .7s linear infinite;display:inline-block} @keyframes spin{to{transform:rotate(360deg)}} .notif-banner{position:fixed;top:74px;right:16px;z-index:9500;max-width:340px;width:calc(100vw - 32px);pointer-events:none} .notif-banner .notif-item{pointer-events:auto} .notif-item{background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:12px 14px;margin-bottom:7px;display:flex;gap:9px;align-items:flex-start;box-shadow:var(--shadow);animation:slideIn .3s ease} @keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}} .notif-item .close-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:1rem;margin-left:auto;flex-shrink:0;padding:0;line-height:1} .scroll-top{position:fixed;bottom:24px;right:24px;z-index:800;background:var(--red);color:var(--on-red);border:none;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1.1rem;box-shadow:0 4px 16px var(--red-glow);transition:all .2s;display:none;align-items:center;justify-content:center} .scroll-top.show{display:flex} .scroll-top:hover{transform:translateY(-3px)} @media(max-width:480px){.scroll-top{bottom:calc(20px + env(safe-area-inset-bottom,0px));right:14px}} code{background:var(--bg3);padding:2px 7px;border-radius:5px;font-family:var(--fm);font-size:.8rem;color:var(--orange);word-break:break-all;overflow-wrap:anywhere} .report-type-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px} @media(max-width:820px){.report-type-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:420px){.report-type-grid{grid-template-columns:repeat(2,1fr)}} .rtype-btn{background:var(--bg3);border:2px solid var(--border);border-radius:10px;padding:10px 6px;text-align:center;cursor:pointer;transition:all .15s;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center} .rtype-btn:hover{border-color:var(--border3)} .rtype-btn:hover,.rtype-btn.active{border-color:var(--red);background:rgba(230,57,70,.06)} .rtype-btn .ico{font-size:1.3rem;display:block;margin-bottom:4px;line-height:1} .rtype-btn .lbl{font-size:.68rem;font-weight:600;color:var(--text2);line-height:1.25} .rtype-btn.active .lbl{color:var(--red)} /* Step-numbered section headers + "optional" marker — used on long, multi-section forms (e.g. report.php) so a big form reads as a short, ordered checklist instead of one undifferentiated wall of fields. */ .form-card h2 .step-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--red);color:var(--on-red);font-size:.72rem;font-weight:800;margin-right:9px;flex-shrink:0;vertical-align:-1px} .form-card h2{display:flex;align-items:center} .form-card h2 .opt-pill{margin-left:auto;font-size:.65rem;font-weight:700;letter-spacing:.02em;color:var(--text3);background:var(--bg3);border:1px solid var(--border2);border-radius:20px;padding:3px 10px;text-transform:uppercase} /* Collapsible sub-sections (native

), styled to match .form-card — lets a big optional field group (e.g. crypto details on a report that has nothing to do with crypto) stay out of the way until someone actually wants it, instead of always taking up scroll space. */ .form-subsection{border:1px solid var(--border);border-radius:var(--r);margin-bottom:14px;overflow:hidden} .form-subsection>summary{list-style:none;cursor:pointer;padding:13px 16px;font-weight:700;font-size:.92rem;display:flex;align-items:center;gap:8px;background:var(--bg3);user-select:none} .form-subsection>summary::-webkit-details-marker{display:none} .form-subsection>summary::after{content:'▾';margin-left:auto;color:var(--text3);transition:transform .15s} .form-subsection[open]>summary::after{transform:rotate(180deg)} .form-subsection>summary:hover{background:var(--surface2)} .form-subsection>.form-subsection-body{padding:16px} /* Footer */ .footer{background:var(--bg2);border-top:1px solid var(--border);padding:48px 0 24px;margin-top:auto} .footer-grid{display:grid;grid-template-columns:1fr;gap:28px;margin-bottom:32px;min-width:0} @media(min-width:500px){.footer-grid{grid-template-columns:1fr 1fr;min-width:0}} @media(min-width:900px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}} .footer-brand p{color:var(--text3);font-size:.81rem;line-height:1.7;margin-top:10px} .footer-col h4{font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--text3);margin-bottom:12px} .footer-col a{display:block;color:var(--text3);font-size:.81rem;padding:3px 0;transition:color .2s} .footer-col a:hover{color:var(--red)} .footer-bottom{border-top:1px solid var(--border);padding-top:18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:.74rem;color:var(--text3)} .footer-bottom a{color:var(--text3);transition:color .2s} .footer-bottom a:hover{color:var(--red)} /* Light theme */ body.theme-light #mobileNav{background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.1)} body.theme-light .form-card{box-shadow:0 2px 12px rgba(0,0,0,.06)} body.theme-light .hero{background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(230,57,70,.08) 0%,transparent 70%),var(--bg)} /* Mobile admin */ @media(max-width:768px){.admin-layout{display:block}} @media(max-width:600px){ .form-row,.form-row-3{grid-template-columns:1fr!important;gap:0} .admin-hdr{flex-direction:column;align-items:flex-start} } @media(max-width:479px){ .report-card,.form-card,.detail-box{border-radius:10px;padding:14px} .container{padding:0 12px} } @media print{ .navbar,.theme-panel,#mobileNav,.footer,.scroll-top,.notif-banner,.btn-report{display:none!important} body{background:#fff;color:#000} } /* ── Blog & News module ──────────────────────────────────────── */ .content-card-img{width:100%;height:160px;object-fit:cover;border-radius:10px 10px 0 0;display:block;margin:-1px -1px 12px} .content-hero-img{width:100%;max-height:420px;object-fit:cover;border-radius:10px;margin-bottom:18px} .post-body{color:var(--text2);font-size:.96rem;line-height:1.8;word-wrap:break-word} .post-body p{margin-bottom:14px} .post-body img{max-width:100%;border-radius:10px;margin:10px 0} .post-body a{color:var(--red)} .comment-item{padding:14px 0;border-bottom:1px solid var(--border)} .comment-item:last-child{border-bottom:none} .comment-head{display:flex;justify-content:space-between;margin-bottom:6px;gap:10px} .comment-head strong{font-size:.88rem} .comment-head span{font-size:.76rem;color:var(--text3);white-space:nowrap} .comment-item p{color:var(--text2);font-size:.88rem;line-height:1.6} .star-rate-widget{display:flex;gap:4px} .star-rate-widget .star-btn{ background:none;border:none;cursor:pointer;font-size:1.9rem;line-height:1; color:var(--border2,#333);transition:color .15s,transform .1s;padding:2px; } .star-rate-widget .star-btn.active{color:#f4a261} .star-rate-widget .star-btn:hover{transform:scale(1.15);color:#f4a261} .share-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .share-btn{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:50%;background:var(--bg2);border:1px solid var(--border); cursor:pointer;transition:transform .15s,box-shadow .15s;padding:0; } .share-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)} .share-btn img{border-radius:50%;display:block} .share-btns-labeled .share-btn{width:auto;height:auto;border-radius:20px;padding:7px 14px 7px 8px;gap:7px;display:inline-flex;align-items:center;font-size:.82rem;font-weight:600;color:var(--text)} .share-btns-labeled .share-btn img{width:20px;height:20px} /* ── Blog/News: magazine-style card grid ─────────────────────── */ .content-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px} .content-card{ background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden; display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s; } .content-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.16);border-color:var(--red)} .content-card-media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--bg3)} .content-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s} .content-card:hover .content-card-media img{transform:scale(1.06)} .content-card-media .no-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.4rem;opacity:.35} .content-card-badges{position:absolute;top:10px;left:10px;display:flex;gap:6px} .content-card-badge{background:rgba(0,0,0,.65);color:#fff;font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:20px;backdrop-filter:blur(4px)} .content-card-badge.featured{background:linear-gradient(135deg,#f4a261,#e76f51)} .content-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1} .content-card-tag{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px} .content-card-title{font-size:1.05rem;font-weight:800;line-height:1.35;margin-bottom:8px} .content-card-title a{color:var(--text)} .content-card-title a:hover{color:var(--red)} .content-card-desc{color:var(--text2);font-size:.86rem;line-height:1.55;margin-bottom:14px;flex:1; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .content-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--border);font-size:.74rem;color:var(--text3)} .content-card-foot .stats{display:flex;gap:10px;align-items:center} /* ── Blog/News: hero banner (Today's Topic / featured article) ── */ .content-hero{ display:grid;grid-template-columns:1.1fr 1fr;gap:0;border-radius:16px;overflow:hidden; background:var(--bg2);border:2px solid var(--red);margin-bottom:28px; } .content-hero-media{position:relative;min-height:260px;background:var(--bg3)} .content-hero-media img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0} .content-hero-text{padding:28px 30px;display:flex;flex-direction:column;justify-content:center} .content-hero-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px} .content-hero-text h2{font-size:1.5rem;line-height:1.3;margin-bottom:10px} .content-hero-text h2 a{color:var(--text)} .content-hero-text h2 a:hover{color:var(--red)} .content-hero-text p{color:var(--text2);font-size:.92rem;line-height:1.6;margin-bottom:16px} @media(max-width:720px){.content-hero{grid-template-columns:1fr}.content-hero-media{min-height:200px}} /* ── Blog/News: filter pill bar ──────────────────────────────── */ .content-filterbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:22px} .content-filterbar input[type=text]{flex:1;min-width:180px;background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:9px 16px;color:var(--text);font-size:.86rem} .content-filterbar .btn{border-radius:24px} /* ── Push notification opt-in prompt ─────────────────────────── */ .push-prompt{ position:fixed;bottom:20px;left:20px;right:20px;max-width:380px; background:var(--surface);border:1px solid var(--border2);border-radius:14px; padding:16px;box-shadow:0 12px 32px rgba(0,0,0,.35);z-index:1500; display:flex;gap:12px;align-items:flex-start; animation:fadeUp .3s ease; } .push-prompt .ico{font-size:1.6rem;flex-shrink:0} .push-prompt .body{flex:1;min-width:0} .push-prompt .title{font-weight:700;font-size:.9rem;margin-bottom:3px} .push-prompt .desc{color:var(--text2);font-size:.8rem;line-height:1.4;margin-bottom:10px} .push-prompt .actions{display:flex;gap:8px} .push-prompt .actions button{ font-size:.8rem;font-weight:600;padding:7px 14px;border-radius:8px;cursor:pointer; } .push-prompt .btn-enable{background:var(--red);color:#fff;border:none} .push-prompt .btn-enable:hover{background:var(--red-dark)} .push-prompt .btn-dismiss{background:none;border:1px solid var(--border2);color:var(--text2)} .push-prompt .btn-dismiss:hover{color:var(--text)} .push-prompt .close-x{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--text3);cursor:pointer;font-size:.9rem;padding:2px} @media(max-width:479px){.push-prompt{left:12px;right:12px;bottom:12px;max-width:none}} /* ── Blog/News: article detail page ──────────────────────────── */ .content-article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px;color:var(--text3);font-size:.85rem;margin-top:10px} .content-article-meta .author{display:flex;align-items:center;gap:8px;color:var(--text2);font-weight:600} .content-article-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--red),#f4a261);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.8rem;flex-shrink:0} @media(max-width:479px){ .star-rate-widget .star-btn{font-size:1.6rem} }