:root{ --brand-50:#fff1f5; --brand-100:#ffe4ea; --brand-200:#ffccd6; --brand-300:#ffa3b5; --brand-400:#ff6b88; --brand-500:#ff4d73; --brand-600:#e43e64; --brand-700:#c23154; --brand-800:#8f2440; --brand-900:#5f162a; --accent:#5ac8fa; --bg:#0f1115; --panel:#141823; --text:#e6e8ee; --muted:#9aa3b2; --border:#242a36; --radius:16px; --shadow-sm:0 1px 2px rgba(0,0,0,.2); --shadow-md:0 8px 24px rgba(0,0,0,.25); --shadow-lg:0 24px 60px rgba(0,0,0,.35); } [data-theme="light"]{ --bg:#f7f8fb; --panel:#ffffff; --text:#0b0f17; --muted:#5b6574; --border:#e6e8ef; --shadow-sm:0 1px 2px rgba(9,10,20,.06); --shadow-md:0 8px 24px rgba(9,10,20,.08); --shadow-lg:0 24px 60px rgba(9,10,20,.12); } html[data-theme="light"] { background:#fafafa; } html[data-theme="dark"] { background:#0b0b0f; } .no-theme-transitions *, .no-theme-transitions *::before, .no-theme-transitions *::after { transition: none !important; } *{box-sizing:border-box} html,body{height:100%} body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background: radial-gradient(1200px 800px at 10% -10%, rgba(255,107,136,.12), transparent 60%), radial-gradient(800px 600px at 90% 10%, rgba(90,200,250,.08), transparent 60%), var(--bg); color:var(--text);line-height:1.6} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font:inherit} .container{width:100%;max-width:none;padding:0 16px;margin:0 auto} .header{position:sticky;top:0;z-index:60;backdrop-filter:saturate(1.3) blur(10px); background:color-mix(in oklab,var(--panel) 85%,transparent);border-bottom:1px solid var(--border)} .nav{display:flex;align-items:center;gap:16px;height:64px} .brand{display:flex;align-items:center;gap:10px;font-weight:700} .brand .logo{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.15),var(--shadow-sm)} .nav a{padding:8px 12px;border-radius:10px;color:var(--muted);position:relative} .nav a.active,.nav a:hover{color:var(--text);background:rgba(255,255,255,.04)} .nav .spacer{flex:1} .btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;border:1px solid var(--border); background:var(--panel);color:var(--text);box-shadow:var(--shadow-sm);cursor:pointer} .btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)} .btn-primary{background:linear-gradient(180deg,var(--brand-400),var(--brand-600));border:none;color:#fff} .btn-primary:hover{filter:brightness(1.05)} .btn-ghost{background:transparent;border-color:var(--border)} .menu { position: relative; } .menu > .menu-trigger { display:inline-flex; align-items:center; gap:8px; } .menu .caret{font-size:12px; opacity:.8} .menu .submenu { position:absolute; top:calc(100% + 8px); left:0; min-width:220px; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); padding:8px; display:none; z-index:65; } .menu:hover .submenu { display:block; } .submenu a{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; color:var(--text);} .submenu a:hover{background:rgba(255,255,255,.04)} .lang-dropdown{ position:relative; } .lang-dropdown .lang-btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--border); } .lang-dropdown .list{ position:absolute; right:0; top:calc(100% + 8px); min-width:220px; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); padding:8px; display:none; z-index:65; } .lang-dropdown.open .list{ display:block; } .lang-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; } .lang-item:hover{ background:rgba(255,255,255,.04); } .lang-flag{ width:18px; text-align:center; } .lang-label{ flex:1; } .lang-code{ color:var(--muted); font-size:12px; } .hamburger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--panel)} @media (max-width:980px){ .nav>nav{display:none} .lang-dropdown{display:none} .hamburger{display:inline-flex;align-items:center;justify-content:center} } .mobile-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:70} .mobile-drawer{position:fixed;top:0;left:0;height:100vh;width:86vw;max-width:380px;background:var(--panel); border-right:1px solid var(--border);transform:translateX(-100%);transition:transform .25s ease; padding:16px;display:flex;flex-direction:column;gap:12px;z-index:75} .mobile-drawer.open{transform:translateX(0)} .mobile-drawer nav a{display:block;padding:10px 12px;border-radius:10px;color:var(--text);border:1px solid var(--border);margin-bottom:8px} .accordion{border:1px solid var(--border); border-radius:10px; overflow:hidden;} .accordion .acc-head{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:rgba(255,255,255,.03); cursor:pointer;} .accordion .acc-body{display:none; padding:8px;} .accordion.open .acc-body{display:block} .muted{color:var(--muted)} .row{display:flex;gap:12px;align-items:center} .col{display:grid;gap:12px} .mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-28{margin-top:28px}.mt-32{margin-top:32px}.mt-56{margin-top:56px} .section-title{font-size:24px;margin:30px 0 14px} .chip{padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.04);color:var(--muted);border:1px solid var(--border);font-size:12px} .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;padding:64px 0;align-items:center} .hero .title{font-size:clamp(28px,4vw,48px);line-height:1.05;letter-spacing:-.02em;margin:0 0 16px} .hero .lead{font-size:clamp(16px,2.2vw,20px);color:var(--muted);margin-bottom:24px} .hero .card{border:1px solid var(--border);background:color-mix(in oklab,var(--panel) 85%,transparent); border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-md)} .search{display:flex;gap:12px;background:var(--panel);padding:12px;border-radius:14px;border:1px solid var(--border); box-shadow:var(--shadow-sm);align-items:center;flex-wrap:wrap} .input{flex:1;display:flex;align-items:center;gap:10px;background:#0f1320;padding:10px 12px;border-radius:10px;border:1px solid var(--border)} [data-theme="light"] .input{background:#f2f4f8} .input input,.input select{background:transparent;border:0;outline:0;color:var(--text);width:100%} .input select{color:var(--muted)} .grid{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)} .hero{grid-template-columns:1fr}} @media (max-width:740px){.grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:480px){.grid{grid-template-columns:1fr}} .card{background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-sm)} .user-card{background:var(--panel);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column} .user-card .media{position:relative;aspect-ratio:4/3;background:#111722;overflow:hidden} .user-card .media img{width:100%;height:100%;object-fit:cover} .user-card .badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.45);color:#fff;padding:6px 10px;font-size:12px;border-radius:12px; backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.15)} .user-card .body{padding:14px;display:grid;gap:8px} .meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px} .meta .dot{width:8px;height:8px;border-radius:999px;background:#1cd760;box-shadow:0 0 0 3px rgba(28,215,96,.2)} .article-card,.post-card{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:16px;background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm)} .article-card .thumb,.post-card .thumb{width:100%;aspect-ratio:4/3;border-radius:12px;background:#111722} .content{max-width:780px} .content h1{font-size:36px;margin-bottom:8px} .content p{margin:12px 0} .content blockquote{border-left:3px solid var(--brand-400);margin:12px 0;padding:8px 12px;color:var(--muted);background:rgba(255,255,255,.03);border-radius:8px} .footer{border-top:1px solid var(--border);margin-top:56px;padding:28px 0;color:var(--muted)} dialog::backdrop{background:rgba(0,0,0,.55)} dialog.modal{border:1px solid var(--border);padding:0;border-radius:16px;background:var(--panel);color:var(--text);box-shadow:var(--shadow-lg);max-width:520px;width:calc(100% - 32px)} .modal .modal-head{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .modal .modal-body{padding:18px} .toast{position:fixed;right:16px;bottom:16px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-md);opacity:0;transform:translateY(10px);transition:.25s ease} .toast.show{opacity:1;transform:translateY(0)} .pagination{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:16px;flex-wrap:wrap} .pagination .page-btn{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--panel);cursor:pointer} .pagination .page-btn[disabled]{opacity:.5;cursor:not-allowed} .pagination .current{padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--border)} .lang-item{ position:relative; } .lang-item.active{ background:rgba(255,255,255,.06); } .lang-code{ margin-left:auto; color:var(--muted); font-size:12px; } .lang-dropdown .list{ z-index: 200; } .lang-btn{ cursor:pointer; } .mobile-lang{ margin-top:8px; } .mobile-lang .list{ display:block; padding:8px; border:1px solid var(--border); border-radius:12px; background:var(--panel); } .mobile-lang .lang-item{ padding:10px 12px; border-radius:10px; } .mobile-lang .lang-item + .lang-item{ margin-top:6px; } .input select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 34px; } .select-wrap { position: relative; } .select-wrap:after { content: "▾"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity:.7; } .flag-icon { width:18px; height:auto; border-radius:2px; display:inline-block; box-shadow:0 0 0 1px rgba(0,0,0,.08); } .lang-flag { width:auto; } .lang-item{ display:flex; align-items:center; gap:10px; } .lang-item .lang-flag-img{ width:18px; height:auto; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.08); } .lang-btn .lang-flag-img{ width:18px; height:auto; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.08); } :root{ --violet-400:#a55bff; --violet-600:#7c3aed; --magenta-500:#ff66c4; } body{background: radial-gradient(1100px 700px at 12% -10%, rgba(165,91,255,.10), transparent 60%), radial-gradient(900px 600px at 88% 0%, rgba(255,102,196,.08), transparent 60%), #0c0b15;} .header{background: color-mix(in oklab, var(--panel) 90%, transparent);} :root{ --bg:#0c0b15; --panel:#151226; --text:#e9e6f7; --muted:#a19db6; --border:#2a243a; --brand-400:var(--violet-400); --brand-600:var(--violet-600); } [data-theme="light"]{ --brand-400:#ff6b88; --brand-600:#ff4d73; } .hamburger{color:#fff; border-color:#3a2f54; background:linear-gradient(180deg, rgba(165,91,255,.22), rgba(124,58,237,.20)); box-shadow:0 2px 8px rgba(124,58,237,.25), inset 0 0 0 1px rgba(255,255,255,.05)} .hamburger:hover{box-shadow:0 4px 16px rgba(124,58,237,.35), inset 0 0 0 1px rgba(255,255,255,.08); transform:translateY(-1px)} .lang-topbar{display:flex; gap:10px; overflow:auto; padding:8px 4px 4px 4px; margin:6px 0 10px 0} .lang-topbar .flag-btn{display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.03); cursor:pointer; white-space:nowrap} .lang-topbar .flag-btn.active{background:rgba(165,91,255,.18); border-color:#3a2f54} .lang-topbar img{width:18px; height:auto; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.08)} .mobile-drawer nav a, .mobile-drawer .accordion{ margin-bottom:10px; } .mobile-drawer .section-gap{ height:6px; } .lang-topbtn{display:flex;align-items:center;gap:8px;padding:8px 10px; border-radius:12px;background:rgba(255,255,255,.03);cursor:pointer;user-select:none} .lang-topbtn img{width:18px;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)} .lang-topbtn .caret{margin-left:auto;opacity:.8} .lang-popover{position:relative} .lang-popover .panel{ position:absolute;left:0;top:calc(100% + 8px);width:100%;max-height:45vh;overflow:auto; background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;display:none;z-index:90 } .lang-popover.open .panel{display:block} .lang-popover .lang-item{padding:10px 12px;border-radius:10px} .lang-popover .lang-item.active{background:rgba(255,255,255,.06)} [data-theme="light"]{ --bg:#f7f8fb; --panel:#ffffff; --text:#0b0f17; --muted:#5b6574; --border:#e6e8ef; --shadow-sm:0 1px 2px rgba(9,10,20,.06); --shadow-md:0 8px 24px rgba(9,10,20,.08); --shadow-lg:0 24px 60px rgba(9,10,20,.12); --brand-400:#ff6b88; --brand-600:#ff4d73; } :root{ --bg:#391965; --panel:#45207f; --text:#f1ecff; --muted:#c7bfe6; --border:#5b319d; --brand-400:#ff834f; --brand-600:#e46c3c; } [data-theme="light"]{ --bg:#f7f8fb; --panel:#ffffff; --text:#0b0f17; --muted:#5b6574; --border:#e6e8ef; --shadow-sm:0 1px 2px rgba(9,10,20,.06); --shadow-md:0 8px 24px rgba(9,10,20,.08); --shadow-lg:0 24px 60px rgba(9,10,20,.12); --brand-400:#ff6b88; --brand-600:#ff4d73; } body{background: radial-gradient(1200px 800px at 12% -10%, rgba(255,131,79,.10), transparent 60%), radial-gradient(900px 600px at 88% 0%, rgba(228,108,60,.10), transparent 60%), var(--bg);} .hamburger{color:#fff;border-color:color-mix(in oklab,var(--border),#000 10%); background:linear-gradient(180deg, rgba(228,108,60,.25), rgba(228,108,60,.18)); box-shadow:0 2px 8px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06)} .hamburger:hover{box-shadow:0 4px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.1); transform:translateY(-1px)} .drawer-scroll{flex:1; overflow:auto; padding-right:4px} .lang-popover{position:relative} .lang-popover .panel{ position:absolute;left:0;top:calc(100% + 8px);width:100%;max-height:45vh;overflow:auto; background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;display:none;z-index:90 } .lang-popover.open .panel{display:block} .lang-popover .lang-item{padding:10px 12px;border-radius:10px} .lang-popover .lang-item.active{background:rgba(255,255,255,.08)} .full-bleed{position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw; padding-left:16px; padding-right:16px} .hero-wide{overflow:hidden; padding:72px 0; border-radius:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background: radial-gradient(1200px 800px at 10% -10%, color-mix(in oklab, var(--brand-400) 28%, transparent), transparent 60%), radial-gradient(900px 600px at 95% 5%, color-mix(in oklab, var(--brand-600) 18%, transparent), transparent 60%), color-mix(in oklab, var(--panel) 88%, transparent); } .hero-wide .inner{max-width:1200px; margin:0 auto; display:grid; gap:18px} .hero-wide .kicker{display:inline-flex; gap:8px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.04)} .hero-wide .title{font-size:clamp(32px,5vw,60px); line-height:1.02; letter-spacing:-.02em; margin:8px 0 6px} .hero-wide .lead{font-size:clamp(16px,2.2vw,20px); color:var(--muted)} .hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px} .profiles-wide{padding:28px 0 12px} .profiles-head{max-width:1200px; margin:0 auto 12px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px} .profiles-head .title{font-size:24px; margin:0} .profiles-grid{display:grid; gap:18px; max-width:1200px; margin:0 auto} @media (min-width:1440px){ .profiles-grid{grid-template-columns:repeat(5, minmax(0,1fr));}} @media (min-width:980px) and (max-width:1439px){ .profiles-grid{grid-template-columns:repeat(4, minmax(0,1fr));}} @media (min-width:640px) and (max-width:979px){ .profiles-grid{grid-template-columns:repeat(3, minmax(0,1fr));}} @media (max-width:639px){ .profiles-grid{grid-template-columns:repeat(2, minmax(0,1fr));}} .feature-cards{max-width:1200px; margin:28px auto 0; display:grid; gap:18px; grid-template-columns:repeat(3,1fr)} @media (max-width:980px){ .feature-cards{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .feature-cards{grid-template-columns:1fr} } .feature-card{padding:18px; display:grid; gap:10px} .feature-card .head{display:flex; align-items:center; gap:10px} .feature-card .icon{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(180deg, var(--brand-400), var(--brand-600)); color:#fff} .spark{height:44px; width:100%} body{overflow-x:hidden} .full-bleed{max-width:100vw} .profiles-grid{gap:22px} @media (min-width:1100px){ .profiles-grid{grid-template-columns:repeat(4,minmax(0,1fr));}} @media (min-width:800px) and (max-width:1099px){ .profiles-grid{grid-template-columns:repeat(3,minmax(0,1fr));}} @media (max-width:799px){ .profiles-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} .user-card .media{aspect-ratio:16/11} .to-top{position:fixed; right:16px; bottom:16px; z-index:90; display:none} .to-top.show{display:inline-flex} .to-top .btn{border-radius:999px; padding:10px 14px} @media (max-width:420px){ .container{padding:0 12px} .header .row{gap:8px; flex-wrap:wrap} .btn, .btn.btn-primary{padding:8px 12px} .brand span:last-child{display:none} } @media (max-width: 640px){ .to-top{ bottom: 88px; } } .to-top.raised{ bottom: 128px; } .auth-pop{ position: relative; } .auth-pop .auth-panel{ position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; background: var(--panel); border:1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; display:none; z-index: 120; } .auth-pop.open .auth-panel{ display:block; } .auth-panel a{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; } .auth-panel a:hover{ background: rgba(255,255,255,.06); } .auth-btn{ display:none; } @media (max-width: 480px){ .header .auth-inline{ display:none; } .auth-btn{ display:inline-flex; } .header .row{ gap:8px; flex-wrap:nowrap; } } @media (max-width: 420px){ .brand span:last-child { display: inline !important; } .brand { gap: 8px; } } @media (max-width: 360px){ .brand { font-size: 15px; } } .admin-nav{background:#fff;border-bottom:1px solid #e0e0e0;margin:0;padding:6px 12px;font-size:14px} .admin-nav ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none} .admin-nav a{display:block;padding:6px 10px;border-radius:6px;color:#444;text-decoration:none} .admin-nav a:hover{background:#f0f0f0} .admin-nav a.active{background:#333;color:#fff;font-weight:600} .tabs-pills{gap:10px} .pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:9999px;background:color-mix(in oklab,var(--panel) 92%,transparent);color:var(--text);font-size:14px;line-height:1;box-shadow:var(--shadow-sm);transition:.15s ease} .pill:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)} .pill--active{background:color-mix(in oklab,var(--text) 12%,var(--panel));color:var(--text);border-color:color-mix(in oklab,var(--text) 18%,var(--border))} .filters-card{border:1px solid var(--border);background:color-mix(in oklab,var(--panel) 92%,transparent);border-radius:18px;box-shadow:var(--shadow-sm);margin-bottom:16px} .filters-card .card-body{padding:14px} @media (min-width:768px){.filters-card .card-body{padding:18px}} .form-label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px} .form-control{width:100%;height:42px;padding:8px 12px;border-radius:12px;background:var(--panel);color:var(--text);border:1px solid var(--border);outline:0} .form-control:focus{border-color:color-mix(in oklab,var(--text) 25%,var(--border))} .check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text)} .check input[type=checkbox]{transform:scale(1.05)} .filters-actions{display:flex;gap:8px;margin-top:10px;justify-content:flex-start} @media (min-width:768px){.filters-actions{justify-content:flex-end;margin-top:12px}} .btn-primary,.btn-outline{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;cursor:pointer;transition:.15s ease;text-decoration:none} .btn-primary{background:color-mix(in oklab,var(--text) 12%,var(--panel));color:var(--text);border:1px solid color-mix(in oklab,var(--text) 18%,var(--border))} .btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);background:color-mix(in oklab,var(--text) 16%,var(--panel));border-color:color-mix(in oklab,var(--text) 24%,var(--border))} .btn-outline{background:var(--panel);border:1px solid var(--border);color:var(--text)} .btn-outline:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)} .btn-primary.sm,.btn-outline.sm{padding:8px 12px;border-radius:10px;font-size:13px} .users-grid{align-items:stretch} .user-card-v2{background:var(--panel);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .12s ease,box-shadow .12s ease} .user-card-v2:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .user-card-v2 .card-media{position:relative;background:#111722;aspect-ratio:4/4.3;overflow:hidden} .user-card-v2 .media-link{display:block;width:100%;height:100%} .user-card-v2 .img-cover{width:100%;height:100%;object-fit:cover;display:block} .user-card-v2 .badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap} .user-card-v2 .badge{background:rgba(0,0,0,.45);color:#fff;padding:6px 10px;font-size:12px;border-radius:12px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.15)} .user-card-v2 .badge-online{background:rgba(28,215,96,.28);color:#073b1a;border-color:rgba(28,215,96,.45)} .user-card-v2 .badge-verified{background:rgba(90,200,250,.28);color:#0a3241;border-color:rgba(90,200,250,.45)} .user-card-v2 .card-body{padding:8px 10px 10px;display:block} .user-card-v2 .title-row{display:flex;align-items:center;gap:8px} .user-card-v2 .name{font-weight:700;font-size:15px;color:var(--text)} .user-card-v2 .age{margin-left:6px;color:var(--muted);font-weight:500} .user-card-v2 .gender{opacity:.9} .user-card-v2 .meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px} .user-card-v2 .bio{font-size:13px;color:color-mix(in oklab,var(--text) 88%,#000);margin:0 0 6px} .user-card-v2 .bio-spacer{display:none} .user-card-v2 .actions{margin-top:8px;display:flex;gap:8px} .clamp-3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pagination{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:18px;flex-wrap:wrap} .pagination .page-btn{padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel);cursor:pointer;text-decoration:none;color:var(--text);transition:.12s ease;box-shadow:var(--shadow-sm)} .pagination .page-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)} .pagination .current{background:color-mix(in oklab,var(--text) 12%,var(--panel));color:var(--text);border-color:color-mix(in oklab,var(--text) 18%,var(--border))} .similar-section { margin-top: 32px; } .similar-title { font-size: 20px; margin: 0 0 12px; } .similar-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } @media (max-width: 1024px) { .similar-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 640px) { .similar-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } .similar-card { display: block; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; } .similar-card-photo img { width: 100%; height: 180px; object-fit: cover; display: block; } .similar-card-body { padding: 8px 10px; } .similar-card-name { font-weight: 600; } .similar-card-age { color: #999; font-weight: 500; margin-left: 6px; } .similar-card-meta { color: #666; font-size: 12px; margin-top: 4px; display:flex; gap:8px; } #filters-panel[data-collapsed=true]{display:none} @media (min-width:768px){ #filters-panel{display:block!important} .filters-toggle{display:none!important} } .page-head{margin-bottom:8px} .page-title{font-weight:700;font-size:26px;line-height:1.15;margin:0} @media(min-width:768px){.page-title{font-size:32px}} #filters-panel[data-collapsed=true]{display:none} @media(min-width:768px){ #filters-panel{display:block!important} .filters-toggle{display:none!important} } .user-card-v2 .card-media{ aspect-ratio: 4 / 4.3 } @media (min-width:1024px){ .user-card-v2 .card-media{ aspect-ratio: 4 / 3.2 } } @media (max-width:767px){ .user-card-v2 .card-media{ aspect-ratio: 4 / 3; max-height: 60svh; } .user-card-v2 .name{ font-size:14px } .user-card-v2 .meta{ font-size:12px } .user-card-v2 .card-body{ padding:8px 10px 8px } .user-card-v2 .actions .btn-primary.sm, .user-card-v2 .actions .btn-outline.sm{ padding:7px 10px; font-size:12.5px } } <!-- ИЗОЛИРОВАННЫЕ СТИЛИ (контейнер 1320px как ты просил) --> .rlp-wrap{max-width:1320px;margin:0 auto;padding:24px 16px;} .rlp-grid{display:grid;gap:24px;} @media(min-width:900px){.rlp-grid{grid-template-columns:5fr 7fr;}} .rlp-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04);} .rlp-p20{padding:20px;} .rlp-h1{font-size:24px;line-height:1.2;margin:0 12px 0 0;color:#0f172a;font-weight:600;display:inline;} .rlp-badges{display:inline-flex;gap:8px;flex-wrap:wrap;vertical-align:middle} .rlp-chip{display:inline-flex;align-items:center;border:1px solid #e5e7eb;background:#f8fafc;color:#334155;border-radius:999px;font-size:13px;padding:6px 10px} .rlp-chip--ok{border-color:#a7f3d0;background:#ecfdf5;color:#065f46} .rlp-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .rlp-actions{display:flex;gap:8px;flex-wrap:wrap} .rlp-btn{display:inline-flex;align-items:center;gap:6px;border-radius:10px;padding:8px 14px;text-decoration:none;cursor:pointer;border:1px solid transparent;font-size:14px} .rlp-btn--amber{background:#f59e0b;color:#fff} .rlp-btn--disabled{border-color:#e5e7eb;background:#fff;color:#475569;cursor:default} .rlp-btn--ghost{border-color:#c7d2fe;background:#eef2ff;color:#3730a3} .rlp-btn--outline{border-color:#e5e7eb;background:#fff;color:#374151} .rlp-online{display:flex;align-items:center;gap:8px;margin-top:6px} .rlp-dot{width:8px;height:8px;border-radius:50%} .rlp-dot--on{background:#10b981} .rlp-dot--off{background:#94a3b8} .rlp-aspect{position:relative;width:100%;padding-top:75%;overflow:hidden;border-radius:16px} .rlp-aspect img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:zoom-in} .rlp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .rlp-thumb{display:block;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden} .rlp-thumb img{width:100%;height:84px;object-fit:cover;display:block;cursor:pointer} .rlp-section .rlp-title{font-weight:600;color:#0f172a;margin-bottom:8px} .rlp-kv{border-top:1px solid #f1f5f9;padding:10px 0;display:flex;gap:16px} .rlp-kv:first-child{border-top:0} .rlp-kv .l{width:40%;color:#64748b} .rlp-kv .r{flex:1;color:#0f172a} .rlp-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center} .rlp-lightbox.is-open{display:flex} .rlp-lb-stage{position:relative;max-width:95vw;max-height:92vh} .rlp-lb-img{max-width:95vw;max-height:92vh;display:block;margin:0 auto;border-radius:8px;box-shadow:0 1px 6px rgba(0,0,0,.5)} .rlp-lb-close{position:absolute;top:-44px;right:0;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px);border-radius:999px;padding:8px 12px;cursor:pointer;font-size:14px} @media (max-width:600px){.rlp-lb-close{top:-52px}} .rlp-lb-prev,.rlp-lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px);border-radius:10px;padding:10px 14px;cursor:pointer;font-size:16px} .rlp-lb-prev{left:-64px} .rlp-lb-next{right:-64px} @media (max-width:900px){.rlp-lb-prev{left:-48px}.rlp-lb-next{right:-48px}} .rlp-lb-counter{position:absolute;bottom:-36px;left:0;color:#e5e7eb;font-size:13px} .rlp-lb-dim{position:fixed;inset:0} .matches-wrap { max-width: 980px; margin: 18px auto; padding: 0 16px; } .matches-head { display:flex; align-items:center; justify-content:space-between; gap:12px; } .matches-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:12px; margin-top:12px; } .match-card { border:1px solid #e5e7eb; border-radius:14px; background:#fff; padding:12px; display:flex; gap:12px; align-items:center; box-shadow: 0 6px 16px rgba(17,24,39,.06); } .match-card:hover { transform: translateY(-1px); transition: transform .1s ease; } .m-avatar { flex: 0 0 auto; width:56px; height:56px; border-radius:50%; overflow:hidden; border:1px solid #eee; display:flex; align-items:center; justify-content:center; background:#f3f4f6; position:relative; } .m-avatar img { width:100%; height:100%; object-fit:cover; display:block; } .m-initial { font-weight:800; font-size:22px; color:#3730a3; } .m-body { min-width:0; flex:1; } .m-name { font-weight:700; line-height:1.15; } .m-last { color:#6b7280; font-size:13px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .m-actions { display:flex; align-items:center; gap:8px; margin-left:auto; } .btn { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; font-weight:700; text-decoration:none; color:#111827; } .btn:hover { border-color:#6d4aff; color:#4b2fe0; } .btn-primary { background:#6d4aff; color:#fff; border-color:transparent; box-shadow: 0 6px 16px rgba(109,74,255,.28); } .btn-primary:hover { background:#5c39f3; } .badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; } .badge-red { background:#e11d48; color:#fff; } .list-tools { display:flex; gap:8px; align-items:center; margin-top:12px; } .muted { color:#6b7280; font-size:13px; } @media (prefers-color-scheme: dark) { .match-card { background:#11131a; border-color:#1f2430; box-shadow: 0 10px 24px rgba(0,0,0,.35); } .m-last { color:#9aa1af; } .btn { background:#11131a; border-color:#1f2430; color:#ebedf1; } .matches-wrap { color:#ebedf1; } body { background:#0b0d12; } } .r-card img{transition:transform .25s ease} .r-card:hover img{transform:scale(1.02)} .r-badge{backdrop-filter:saturate(180%) blur(6px)} .hero-wide .inner{max-width:80rem;margin:0 auto} #home-profiles{--hp-max:1320px;--hp-gap:16px;--hp-br:16px;--hp-ring:rgba(0,0,0,.06);--hp-shadow:0 2px 10px rgba(0,0,0,.06)} #home-profiles .hp-wrap{max-width:var(--hp-max);margin:0 auto;padding:40px 16px} #home-profiles .hp-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px} #home-profiles .hp-h1{font:600 22px/1.2 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0} #home-profiles .hp-seeall{padding:8px 14px;border:1px solid var(--hp-ring);border-radius:12px;text-decoration:none;color:#111;background:#fff} #home-profiles .hp-seeall:hover{background:#f8f8f8} #home-profiles .hp-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 18px} #home-profiles .hp-tabs{display:flex;flex-wrap:wrap;gap:8px} #home-profiles .hp-tab{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid var(--hp-ring);border-radius:12px;text-decoration:none;color:#111;background:#fff} #home-profiles .hp-tab:hover{background:#f8f8f8} #home-profiles .hp-tab.is-active{background:#111;color:#fff;border-color:#111} #home-profiles .hp-filters{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px} #home-profiles .hp-select{appearance:none;padding:8px 12px;border:1px solid var(--hp-ring);border-radius:12px;background:#fff;color:#111} #home-profiles .hp-button{padding:8px 12px;border:1px solid var(--hp-ring);border-radius:12px;background:#fff;color:#111;cursor:pointer} #home-profiles .hp-button:hover{background:#f4f4f4} #home-profiles .hp-button-ghost{background:transparent} #home-profiles .hp-empty{color:#666;padding:12px 0} #home-profiles .hp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hp-gap)} @media (min-width:640px){#home-profiles .hp-grid{grid-template-columns:repeat(3,1fr)}} @media (min-width:1024px){#home-profiles .hp-grid{grid-template-columns:repeat(4,1fr)}} @media (min-width:1280px){#home-profiles .hp-grid{grid-template-columns:repeat(5,1fr)}} #home-profiles .hp-card{display:block;border-radius:20px;overflow:hidden;background:#fff;box-shadow:var(--hp-shadow);border:1px solid var(--hp-ring);text-decoration:none;color:#111;transition:transform .18s ease, box-shadow .18s ease} #home-profiles .hp-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.10)} #home-profiles .hp-thumb{position:relative;aspect-ratio:4/5;background:#f2f2f2;overflow:hidden} #home-profiles .hp-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease} #home-profiles .hp-card:hover .hp-thumb img{transform:scale(1.02)} #home-profiles .hp-badge{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;font:500 12px/1 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:rgba(255,255,255,.92);box-shadow:0 2px 6px rgba(0,0,0,.12);backdrop-filter:saturate(180%) blur(6px)} #home-profiles .hp-badge-online{top:8px;left:8px} #home-profiles .hp-badge-online i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 2px #fff} #home-profiles .hp-badge-flag{bottom:8px;right:8px} #home-profiles .hp-meta{padding:12px} #home-profiles .hp-name{display:flex;align-items:center;gap:6px;font:600 15px/1.25 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #home-profiles .hp-place{margin-top:2px;color:#666;font:400 13px/1.3 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #home-profiles .hp-seeall-bottom{display:flex;justify-content:center;margin-top:18px} @media (min-width:1536px){ #home-profiles{--hp-max:1440px;} } :root, html[data-theme="dark"], body[data-theme="dark"], .theme-dark{ --bg:#391965; --panel:#45207f; --text:#f1ecff; --muted:#c7bfe6; --border:#5b319d; --btn-1:#e46c3c; --btn-2:#ff8a4a; --btn-text:#ffffff; --btn-ring:color-mix(in oklab, var(--btn-2), #fff 25%); --link:#ffe4ea; --link-hover:#ffffff; } html[data-theme="light"], body[data-theme="light"], .theme-light{ --bg:#f7f8fb; --panel:#ffffff; --text:#0b0f17; --muted:#5b6574; --border:#e6e8ef; --btn-1:#ff4d73; --btn-2:#ff6b88; --btn-text:#ffffff; --btn-ring:color-mix(in oklab, var(--btn-2), #000 20%); --link:#8f2440; --link-hover:#5f162a; } html, body{min-height:100%} body{ background: radial-gradient(1200px 800px at 12% -10%, color-mix(in oklab, var(--btn-2) 20%, transparent), transparent 60%), radial-gradient(900px 600px at 88% 0%, color-mix(in oklab, var(--btn-1) 18%, transparent), transparent 60%), var(--bg) !important; color:var(--text); } .header, header.site-header{ background: color-mix(in oklab, var(--panel) 92%, transparent) !important; border-bottom:1px solid var(--border) !important; } .nav a{color:var(--muted)} html[data-theme="dark"] .nav a:hover, .nav a.active{color:#fff} html[data-theme="light"] .nav a:hover, html[data-theme="light"] .nav a.active{color:#111} a{color:var(--link)} a:hover{color:var(--link-hover)} .card,.user-card,.filters-card,.article-card,.post-card, .form-control,.input,.panel,.box{ background:color-mix(in oklab, var(--panel) 92%, transparent); border:1px solid var(--border); color:var(--text); } .input input::placeholder, .form-control::placeholder{color:color-mix(in oklab, var(--text) 55%, #000)} .btn,.button,.cta{ background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:10px 16px; font-weight:600; line-height:1.2; transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; } .btn:hover,.button:hover,.cta:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.18); } .btn-primary,.button.primary,.cta.primary{ background:linear-gradient(180deg, var(--btn-2), var(--btn-1)) !important; color:var(--btn-text) !important; border:none !important; text-shadow:0 1px 0 rgba(0,0,0,.15); box-shadow: 0 10px 24px color-mix(in oklab, var(--btn-1) 35%, transparent), inset 0 0 0 1px rgba(255,255,255,.06); } .btn-primary:hover,.button.primary:hover,.cta.primary:hover{filter:brightness(1.06)} .btn-primary:active,.button.primary:active,.cta.primary:active{transform:translateY(0); filter:brightness(0.98)} .btn-primary:focus-visible,.button.primary:focus-visible,.cta.primary:focus-visible{ outline:2px solid var(--btn-ring); outline-offset:2px; } .btn-primary[disabled],.button.primary[disabled],.cta.primary[disabled]{opacity:.6; cursor:not-allowed} .btn-outline,.button.outline,.btn-secondary{ background:transparent; color:var(--btn-text); border-color:color-mix(in oklab, var(--btn-text) 35%, var(--border)); } html[data-theme="light"] .btn-outline, html[data-theme="light"] .button.outline, html[data-theme="light"] .btn-secondary{ color:#0b0f17; border-color:var(--border); background:#fff; } .chip,.pill{ color:var(--text); border:1px solid color-mix(in oklab, var(--text) 18%, var(--border)); background:color-mix(in oklab, var(--panel) 80%, transparent); } .pill--active{background:color-mix(in oklab, var(--text) 12%, var(--panel))} .user-card .media img, #home-profiles .hp-thumb img{transition:transform .25s ease} .user-card:hover .media img, #home-profiles .hp-card:hover .hp-thumb img{transform:scale(1.02)} .btn-primary:hover, .btn-primary:focus, .btn-outline:hover, .btn-outline:focus, .nav a:hover, .submenu a:hover{ color:#fff !important; } html[data-theme="light"] .btn-outline:hover, html[data-theme="light"] .btn-outline:focus, html[data-theme="light"] .nav a:hover, html[data-theme="light"] .submenu a:hover{ color:#111 !important; } html[data-theme="dark"] body, html[data-theme="dark"] .page, html[data-theme="dark"] .site, html[data-theme="dark"] .site-wrap, html[data-theme="dark"] .layout, html[data-theme="dark"] .main, html[data-theme="dark"] .content, html[data-theme="dark"] .section, html[data-theme="dark"] .strip, html[data-theme="dark"] .container, html[data-theme="dark"] .home-hero, html[data-theme="dark"] #home-profiles, html[data-theme="dark"] #content { background: transparent !important; } html[data-theme="dark"] .bg-dark, html[data-theme="dark"] .section--dark, html[data-theme="dark"] .block--dark, html[data-theme="dark"] .panel--dark { background: transparent !important; } html[data-theme="dark"] footer { background: color-mix(in oklab, var(--panel) 92%, transparent) !important; border-top: 1px solid var(--border) !important; } html[data-theme="dark"] .bg-black, html[data-theme="dark"] .bg-000, html[data-theme="dark"] [style*="background:#000"], html[data-theme="dark"] [style*="background-color:#000"], html[data-theme="dark"] [style*="background:#0b0b0f"], html[data-theme="dark"] [style*="background-color:#0b0b0f"] { background: transparent !important; } .card,.user-card,.filters-card,.article-card,.post-card, .form-control,.input,.panel,.box{ background: color-mix(in oklab, var(--panel) 92%, transparent); border: 1px solid var(--border); color: var(--text); } html[data-theme="dark"] main, html[data-theme="dark"] main .section, html[data-theme="dark"] main .strip, html[data-theme="dark"] main .content, html[data-theme="dark"] main .container, html[data-theme="dark"] main .row, html[data-theme="dark"] main .wrapper { background: transparent !important; } html[data-theme="dark"] .hero, html[data-theme="dark"] .home-hero, html[data-theme="dark"] .landing-hero, html[data-theme="dark"] .masthead, html[data-theme="dark"] [class*="hero-"], html[data-theme="dark"] [class*="-hero"], html[data-theme="dark"] [id*="hero"] { background: transparent !important; } html[data-theme="dark"] .hero::before, html[data-theme="dark"] .hero::after, html[data-theme="dark"] .home-hero::before, html[data-theme="dark"] .home-hero::after, html[data-theme="dark"] .landing-hero::before, html[data-theme="dark"] .landing-hero::after, html[data-theme="dark"] .masthead::before, html[data-theme="dark"] .masthead::after, html[data-theme="dark"] [class*="hero-"]::before, html[data-theme="dark"] [class*="hero-"]::after, html[data-theme="dark"] [class*="-hero"]::before, html[data-theme="dark"] [class*="-hero"]::after, html[data-theme="dark"] main .section::before, html[data-theme="dark"] main .section::after { background: transparent !important; box-shadow: none !important; opacity: 0 !important; } html[data-theme="dark"] main [style*="background:#000"], html[data-theme="dark"] main [style*="background-color:#000"], html[data-theme="dark"] main [style*="background:#0b0b0f"], html[data-theme="dark"] main [style*="background-color:#0b0b0f"], html[data-theme="dark"] .hero [style*="background:#000"], html[data-theme="dark"] .hero [style*="background-color:#000"]{ background: transparent !important; } html[data-theme="dark"] main .bg-dark, html[data-theme="dark"] main .bg-black, html[data-theme="dark"] main .section--dark, html[data-theme="dark"] main .block--dark { background: transparent !important; } html[data-theme="dark"] main .card, html[data-theme="dark"] main .panel, html[data-theme="dark"] main .user-card, html[data-theme="dark"] main .box { background: color-mix(in oklab, var(--panel) 92%, transparent) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } html[data-theme="dark"] main, html[data-theme="dark"] main .page, html[data-theme="dark"] main .page-wrap, html[data-theme="dark"] main .page-content, html[data-theme="dark"] main .section, html[data-theme="dark"] main .section-wrap, html[data-theme="dark"] main .strip, html[data-theme="dark"] main .container, html[data-theme="dark"] main .row, html[data-theme="dark"] main .wrapper, html[data-theme="dark"] .region-hero, html[data-theme="dark"] .page-hero, html[data-theme="dark"] .page-title-wrap, html[data-theme="dark"] .filters, html[data-theme="dark"] .filters-wrap, html[data-theme="dark"] .filters-bar, html[data-theme="dark"] .search-filters, html[data-theme="dark"] .search-header, html[data-theme="dark"] .results, html[data-theme="dark"] .results-wrap, html[data-theme="dark"] .grid, html[data-theme="dark"] .grid-wrap, html[data-theme="dark"] .cards, html[data-theme="dark"] .cards-wrap, html[data-theme="dark"] .listing, html[data-theme="dark"] .listing-grid, html[data-theme="dark"] .catalog, html[data-theme="dark"] .catalog-grid, html[data-theme="dark"] #profilesGrid { background: transparent !important; box-shadow: none !important; } html[data-theme="dark"] .region-hero::before, html[data-theme="dark"] .region-hero::after, html[data-theme="dark"] .filters::before, html[data-theme="dark"] .filters::after, html[data-theme="dark"] .results::before, html[data-theme="dark"] .results::after, html[data-theme="dark"] .grid::before, html[data-theme="dark"] .grid::after, html[data-theme="dark"] main .section::before, html[data-theme="dark"] main .section::after { background: transparent !important; opacity: 0 !important; box-shadow: none !important; } html[data-theme="dark"] .bg-dark, html[data-theme="dark"] .bg-black, html[data-theme="dark"] .section--dark, html[data-theme="dark"] .block--dark, html[data-theme="dark"] .panel--dark { background: transparent !important; } html[data-theme="dark"] [style*="background:#000"], html[data-theme="dark"] [style*="background-color:#000"], html[data-theme="dark"] [style*="background:#0b0b0f"], html[data-theme="dark"] [style*="background-color:#0b0b0f"] { background: transparent !important; } html[data-theme="dark"] .filters-card, html[data-theme="dark"] .card, html[data-theme="dark"] .user-card, html[data-theme="dark"] .panel, html[data-theme="dark"] .box { background: color-mix(in oklab, var(--panel) 92%, transparent) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } html[data-theme="dark"], body[data-theme="dark"], .theme-dark { background-color: #391965 !important; background-image: radial-gradient(1200px 800px at 12% -10%, rgba(255,138,74,0.15), transparent 60%), radial-gradient(900px 600px at 88% 0%, rgba(228,108,60,0.12), transparent 60%); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; color: var(--text); min-height: 100vh; } html[data-theme="dark"] main, html[data-theme="dark"] section, html[data-theme="dark"] .section, html[data-theme="dark"] .container, html[data-theme="dark"] .page, html[data-theme="dark"] .content, html[data-theme="dark"] .strip, html[data-theme="dark"] .wrapper, html[data-theme="dark"] #content { background: none !important; box-shadow: none !important; } html[data-theme="dark"] .hero, html[data-theme="dark"] .home-hero, html[data-theme="dark"] .landing-hero, html[data-theme="dark"] .filters, html[data-theme="dark"] .filters-bar, html[data-theme="dark"] .filters-wrap, html[data-theme="dark"] .results, html[data-theme="dark"] .grid, html[data-theme="dark"] #profilesGrid { background: color-mix(in oklab, var(--panel) 94%, var(--bg) 6%) !important; border-color: var(--border); } html[data-theme="dark"] .card, html[data-theme="dark"] .user-card, html[data-theme="dark"] .filters-card, html[data-theme="dark"] .panel, html[data-theme="dark"] .box { background: color-mix(in oklab, var(--panel) 96%, transparent) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } main { min-height: 100vh; } html[data-theme="dark"], body[data-theme="dark"], .theme-dark { --bg: #391965; --panel: #45207f; --text: #f6f3ff; --muted: #d3caee; --border: #5b319d; --heading: #ffffff; --btn-1: #e46c3c; --btn-2: #ff8a4a; --btn-text: #ffffff; --btn-ring: color-mix(in oklab, var(--btn-2), #fff 25%); --link: #ffd7e2; --link-hover: #fff; background: radial-gradient(1200px 800px at 10% -10%, rgba(255,138,74,.15), transparent 60%), radial-gradient(900px 600px at 88% 0%, rgba(228,108,60,.12), transparent 60%), var(--bg) !important; color: var(--text); } html[data-theme="light"], body[data-theme="light"], .theme-light { --bg: #f7f8fb; --panel: #ffffff; --text: #0b0f17; --muted: #5b6574; --border: #e6e8ef; --heading: #000000; --btn-1: #ff4d73; --btn-2: #ff6b88; --btn-text: #ffffff; --btn-ring: color-mix(in oklab, var(--btn-2), #000 20%); --link: #8f2440; --link-hover: #5f162a; } h1, h2, h3, h4, h5, h6 { color: var(--heading); letter-spacing: -0.02em; font-weight: 700; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { text-shadow: 0 1px 2px rgba(0,0,0,.35); } .section-title, .page-title { color: var(--heading); } .muted, .meta, .form-label, small, .hint { color: var(--muted) !important; } .btn-primary, .button.primary, .cta.primary { background: linear-gradient(180deg, var(--btn-2), var(--btn-1)) !important; color: var(--btn-text) !important; border: none !important; box-shadow: 0 8px 20px color-mix(in oklab, var(--btn-1) 40%, transparent); text-shadow: 0 1px 1px rgba(0,0,0,.2); transition: transform .15s ease, filter .15s ease; } .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); } .btn-primary:active { transform: translateY(0); filter: brightness(0.96); } .btn-outline, .button.outline, .btn-secondary { background: transparent; border: 1px solid color-mix(in oklab, var(--btn-text) 35%, var(--border)); color: var(--btn-text); transition: transform .15s ease, box-shadow .15s ease; } [data-theme="light"] .btn-outline, [data-theme="light"] .btn-secondary { color: #0b0f17; border-color: var(--border); } .btn-outline:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.25); } .hero, .hero-wide, main, section { background: none !important; color: var(--text); } .hero .title, .hero-wide .title { color: var(--heading); text-shadow: 0 1px 2px rgba(0,0,0,.25); } .card, .user-card, .panel, .filters-card, .box { background: color-mix(in oklab, var(--panel) 94%, transparent) !important; border: 1px solid var(--border); color: var(--text); box-shadow: 0 6px 18px rgba(0,0,0,.12); } a { color: var(--link); transition: color .15s ease; } a:hover { color: var(--link-hover); text-decoration: underline; } [data-theme="dark"] footer { background: color-mix(in oklab, var(--panel) 90%, transparent) !important; border-top: 1px solid var(--border); color: var(--muted); text-shadow: 0 1px 1px rgba(0,0,0,.4); } .input, .form-control { background: color-mix(in oklab, var(--panel) 90%, transparent); border: 1px solid var(--border); color: var(--text); } .chip, .pill { background: color-mix(in oklab, var(--panel) 92%, transparent); border: 1px solid color-mix(in oklab, var(--text) 18%, var(--border)); color: var(--text); } .articles-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 20px; } .article-card { background: var(--panel); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; } .article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .article-card-thumb { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #111; } .article-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .article-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; } .article-card-title { font-size: 17px; font-weight: 600; } .article-card-meta { font-size: 12px; opacity: .7; } #langPopover .panel .lang-item { padding: 6px 10px !important; line-height: 1.2 !important; gap: 8px !important; } #langPopover .panel { padding: 6px 0 !important; } #langPopover .panel .lang-item img.lang-flag-img { width: 18px !important; height: 18px !important; border-radius: 3px !important; }