:root{
  --bg:#f5f7ff;--panel:#ffffff;--card:#ffffff;--text:#111827;--muted:#667085;--brand:#246bfe;--brand2:#7b35ff;--accent:#ff7a18;--green:#10b981;--red:#ef4444;--border:#e6eaf4;--shadow:0 18px 45px rgba(17,24,39,.10);--shadow-strong:0 28px 70px rgba(17,24,39,.16);--radius:24px;--header-h:74px
}
:root[data-theme="dark"]{--bg:#0b1020;--panel:#111827;--card:#151d31;--text:#f8fafc;--muted:#a7b0c3;--border:rgba(255,255,255,.10);--shadow:0 18px 45px rgba(0,0,0,.30);--shadow-strong:0 28px 70px rgba(0,0,0,.42)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 20% 0%,rgba(36,107,254,.16),transparent 30%),linear-gradient(180deg,var(--bg) 0%,#fff 120%);font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;color:var(--text);line-height:1.65;min-height:100vh}html[dir="rtl"] body{letter-spacing:0}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,input,textarea,select{font:inherit}.container{width:min(1280px,94vw);margin-inline:auto}.site-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.88);backdrop-filter:blur(20px);border-bottom:1px solid rgba(229,234,245,.90);box-shadow:0 10px 30px rgba(17,24,39,.05)}:root[data-theme="dark"] .site-header{background:rgba(15,23,42,.88);border-bottom-color:rgba(255,255,255,.08)}.header-main{width:min(1280px,94vw);margin:auto;display:grid;grid-template-columns:auto minmax(260px,1fr) auto;gap:16px;align-items:center;padding:12px 0}.brand{display:flex;align-items:center;gap:10px;font-weight:950;font-size:clamp(1.15rem,2vw,1.65rem);letter-spacing:-.04em;white-space:nowrap}.brand-logo{height:46px;width:auto;object-fit:contain}.brand-mark{width:44px;height:44px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 14px 26px rgba(36,107,254,.26)}.top-search,.hero-search{display:flex;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:0 12px 26px rgba(17,24,39,.06)}.top-search input,.hero-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);padding:12px 16px}.top-search button,.hero-search button,.btn,.admin-form button,.grid-form button{border:0;border-radius:14px;margin:4px;padding:10px 16px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:900;cursor:pointer;box-shadow:0 13px 26px rgba(36,107,254,.22);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}.top-search button:hover,.hero-search button:hover,.btn:hover,.admin-form button:hover,.grid-form button:hover{transform:translateY(-1px);filter:saturate(1.08)}.btn.secondary{background:#eef3ff;color:var(--brand);box-shadow:none}:root[data-theme="dark"] .btn.secondary{background:rgba(255,255,255,.08);color:#dbe7ff}.header-actions{display:flex;align-items:center;gap:8px}.lang-switch,.theme-toggle,.menu-toggle{height:40px;min-width:40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:14px;background:var(--panel);color:var(--text);font-weight:900;box-shadow:0 10px 22px rgba(17,24,39,.05)}.theme-toggle,.menu-toggle{cursor:pointer}.menu-toggle{display:none}.header-category-piano{width:min(1280px,94vw);margin:0 auto 10px;display:flex;align-items:stretch;gap:6px;overflow-x:auto;scrollbar-width:thin;padding:0 0 4px;direction:inherit}.piano-key{position:relative;flex:0 0 auto;min-width:96px;max-width:132px;min-height:58px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:7px;padding:8px 10px;border:1px solid rgba(209,216,232,.9);border-bottom:4px solid rgba(17,24,39,.18);border-radius:13px 13px 18px 18px;background:linear-gradient(180deg,#fff,#eff4ff);box-shadow:0 9px 0 rgba(17,24,39,.05),0 14px 24px rgba(17,24,39,.07);transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}.piano-key:nth-child(even){background:linear-gradient(180deg,#fefefe,#f7f0ff)}.piano-key:hover,.piano-key:focus-visible{transform:translateY(7px);box-shadow:inset 0 4px 12px rgba(17,24,39,.10),0 3px 0 rgba(17,24,39,.08);filter:saturate(1.06)}.piano-key .cat-icon{grid-row:1/3;width:36px;height:36px;margin:0;border-radius:12px;font-size:1.25rem;background:linear-gradient(135deg,rgba(36,107,254,.12),rgba(123,53,255,.12))}.piano-key .cat-icon.image img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.piano-key .cat-name{font-size:.82rem;font-weight:950;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.piano-key small{font-size:.68rem;color:var(--muted);font-weight:800}.mini-new{position:absolute;top:-6px;inset-inline-end:6px;background:var(--red);color:#fff;font-size:.62rem;border-radius:999px;padding:1px 6px;font-weight:950}.header-ad-728{width:min(1280px,94vw);margin:0 auto}.header-ad-728 .ad-slot{margin:0 0 10px}.ad-slot{margin:24px 0}.ad-placeholder{display:grid;place-items:center;min-height:90px;border:1px dashed #b7c3dc;border-radius:20px;background:rgba(255,255,255,.55);color:var(--muted);text-align:center}.home-intro{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);align-items:center;gap:22px;margin:24px 0;padding:34px;border-radius:34px;overflow:hidden;background:linear-gradient(135deg,#0f5bff 0%,#7435ff 62%,#ff7a18 155%);color:#fff;box-shadow:var(--shadow-strong)}.home-intro:before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 20% 25%,rgba(255,255,255,.35),transparent 17%),radial-gradient(circle at 85% 70%,rgba(255,255,255,.18),transparent 20%);pointer-events:none}.home-intro>*{position:relative}.hero-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22);font-weight:950;font-size:.78rem}.home-intro h1{margin:0 0 10px;font-size:clamp(2rem,5vw,4.65rem);line-height:1.02;letter-spacing:-.06em}.home-intro p{margin:0;max-width:760px;color:rgba(255,255,255,.88);font-size:1.05rem}.hero-search{background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.38)}.hero-search input{color:#111827}.section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:20px 0}.section-head h1,.section-head h2{margin:0;font-size:clamp(1.35rem,2.5vw,2.05rem);line-height:1.15;letter-spacing:-.035em}.section-head a{color:var(--brand);font-weight:900}.home-section{margin:34px 0}.home-categories-strip{margin:26px 0}.category-mini-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px}.category-mini-row a{display:flex;align-items:center;gap:10px;min-height:72px;padding:12px;border:1px solid var(--border);border-radius:20px;background:rgba(255,255,255,.75);box-shadow:0 12px 26px rgba(17,24,39,.05);transition:.16s ease}.category-mini-row a:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.category-mini-row .cat-icon{width:42px;height:42px;margin:0;border-radius:15px;font-size:1.35rem;flex:0 0 auto}.category-mini-row span{font-weight:950}.category-mini-row small{margin-inline-start:auto;color:var(--muted);font-weight:900}.cat-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:20px;background:linear-gradient(135deg,#edf4ff,#f5edff);font-size:2rem;margin-bottom:12px}.cat-icon.image{overflow:hidden}.cat-icon.image img{width:100%;height:100%;object-fit:cover}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px;align-items:start;margin:18px 0 34px}.game-grid.compact{grid-template-columns:repeat(auto-fill,minmax(198px,1fr))}.game-card.pro-game-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid rgba(222,228,241,.95);border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,251,255,.92));box-shadow:0 15px 34px rgba(17,24,39,.075);text-align:center;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:visible}.game-card.pro-game-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-strong);border-color:rgba(36,107,254,.28)}.game-card .thumb-wrap.game-preview-zone{position:relative;width:100%;aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:#0b1020;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.game-card .thumb-link,.game-card .thumb-link img,.game-card .thumb-wrap img,.game-card .no-thumb{width:100%;height:100%;display:block}.game-card .thumb-link img,.game-card .thumb-wrap img,.game-card .no-thumb{object-fit:cover}.no-thumb{display:grid!important;place-items:center;background:linear-gradient(135deg,#eaf1ff,#f7ecff);font-size:3rem;color:var(--brand)}.game-card .badge.new{position:absolute;top:10px;inset-inline-start:10px;z-index:6;background:var(--red);color:#fff;box-shadow:0 10px 18px rgba(239,68,68,.25)}.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 8px;font-size:.75rem;font-weight:950}.hover-preview{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;z-index:5;border-radius:22px;pointer-events:auto}.game-card.preview-active .thumb-link{pointer-events:none}.game-card.preview-active{outline:3px solid rgba(36,107,254,.16)}.play-card-btn{display:inline-flex;align-items:center;justify-content:center;align-self:center;min-width:132px;margin-top:-2px;padding:10px 18px;border-radius:16px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff!important;font-weight:950;box-shadow:0 15px 28px rgba(36,107,254,.25);transition:.16s ease}.play-card-btn:hover{transform:translateY(-2px);filter:saturate(1.08)}.card-body{display:flex;flex-direction:column;gap:5px;padding:0 3px 2px}.card-rating-line{display:flex;justify-content:center;align-items:center;min-height:24px}.rating-stars{letter-spacing:1.5px;color:#ffc400;text-shadow:0 2px 9px rgba(255,196,0,.20)}.rating-num{margin-inline-start:5px;color:var(--muted);font-size:.78rem;font-weight:900}.card-body h3{margin:0;font-size:1rem;line-height:1.35;font-weight:950}.game-card-category{font-size:.82rem;color:var(--brand);font-weight:900}.card-body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;color:var(--muted);font-size:.84rem;line-height:1.48}.game-card-views{color:#7b8799;font-size:.78rem;font-weight:850}.category-hero,.seo-text,.content-page,.content,.empty,.rating-box,.internal-links,.admin-card,.install-card{margin:24px 0;padding:24px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.86);box-shadow:0 14px 32px rgba(17,24,39,.07)}:root[data-theme="dark"] .category-hero,:root[data-theme="dark"] .seo-text,:root[data-theme="dark"] .content-page,:root[data-theme="dark"] .content,:root[data-theme="dark"] .empty,:root[data-theme="dark"] .admin-card,:root[data-theme="dark"] .install-card{background:rgba(17,24,39,.88)}.category-title-line{display:flex;align-items:center;gap:16px}.category-hero h1,.content-page h1,.seo-text h2{margin-top:0}.breadcrumb{margin:18px 0;color:var(--muted);font-weight:800}.breadcrumb a{color:var(--brand)}.pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:24px 0}.pagination a{min-width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:13px;background:var(--panel);color:var(--muted);font-weight:900}.pagination a.active,.pagination a:hover{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-color:transparent}.game-page{padding-bottom:14px}.game-top{display:grid;grid-template-columns:minmax(180px,230px) 1fr;gap:24px;align-items:center;margin:24px 0;padding:22px;border:1px solid var(--border);border-radius:32px;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(237,244,255,.74));box-shadow:var(--shadow)}.game-cover-card{display:flex;flex-direction:column;align-items:center;gap:11px}.game-cover{width:210px;max-width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:24px;box-shadow:0 18px 34px rgba(17,24,39,.12)}.game-title-area h1{margin:0 0 8px;font-size:clamp(1.9rem,4vw,3.8rem);line-height:1.05;letter-spacing:-.055em}.game-title-area p{margin:0 0 10px;color:var(--muted);font-size:1rem}.big-rating{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0;color:var(--muted);font-weight:850}.inline-rate{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:3px;margin:5px 0 8px;direction:ltr}.stars button{border:0;background:transparent;color:#c4cad8;font-size:1.6rem;line-height:1;cursor:pointer;padding:0 1px;box-shadow:none}.stars button:hover,.stars button:hover~button{color:#ffc400}.rating-message{min-height:22px;color:var(--green);font-weight:900}.share-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.share-buttons a,.share-buttons button{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border);border-radius:13px;background:var(--panel);color:var(--text);font-weight:950;box-shadow:0 9px 18px rgba(17,24,39,.06);cursor:pointer}.player-shell{position:relative;max-width:1040px;margin:20px auto;display:flex;justify-content:center;align-items:center;aspect-ratio:var(--game-ratio,16/9);border-radius:30px;overflow:hidden;background:#060913;box-shadow:var(--shadow-strong);border:1px solid rgba(255,255,255,.08)}.player-shell iframe{display:block;width:100%;height:100%;border:0;background:#000}.pre-game-ad{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:22px;text-align:center;background:radial-gradient(circle at 50% 0%,rgba(36,107,254,.34),transparent 34%),linear-gradient(135deg,#080d19,#101a33);color:#fff}.pre-game-ad.large-pre-ad{position:relative;width:100%;height:100%;min-height:420px}.pre-ad-box{width:min(320px,90%);min-height:250px;display:flex;align-items:center;justify-content:center;border-radius:24px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}.pre-ad-box:empty{display:none}.pre-progress{width:min(420px,90%);height:13px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}.pre-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#ffd25e,var(--brand));transition:width .1s linear}.pre-countdown-text{font-weight:950;color:#fff}.pre-game-ad [data-start-game]:disabled{opacity:.48;cursor:not-allowed}.pre-game-ad.ready [data-start-game]{opacity:1;cursor:pointer}.game-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:12px 0 24px}.game-actions span{font-weight:900;color:var(--muted)}body.game-focus-mode .site-header,body.game-focus-mode .breadcrumb,body.game-focus-mode .game-top,body.game-focus-mode .game-actions .secondary,body.game-focus-mode .game-description-last,body.game-focus-mode .game-suggestions-zone,body.game-focus-mode .site-footer{display:none!important}body.game-focus-mode .container{width:100vw;max-width:none}body.game-focus-mode .player-shell{width:100vw;max-width:none;height:100vh;aspect-ratio:auto;border-radius:0;margin:0}.report-dialog{border:0;border-radius:26px;box-shadow:var(--shadow-strong);width:min(540px,94vw);background:var(--panel);color:var(--text)}.report-dialog::backdrop{background:rgba(4,8,20,.62)}.mini-games-strip{margin:28px 0}.mini-head h2{font-size:1.22rem}.mini-games-grid{display:grid;grid-template-columns:repeat(10,minmax(62px,1fr));gap:10px}.mini-game-tile{display:block;aspect-ratio:1/1;border-radius:17px;overflow:hidden;background:#eef2ff;box-shadow:0 10px 22px rgba(17,24,39,.08);transition:.16s ease}.mini-game-tile:hover{transform:translateY(-4px)}.mini-game-tile img,.mini-game-tile .no-thumb{width:100%;height:100%;object-fit:cover}.site-footer{margin-top:60px;padding:38px max(3vw,18px);background:#0f172a;color:#d5deec}.footer-inner{width:min(1280px,94vw);margin:auto;display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:start}.footer-inner p{color:#a9b5c7}.footer-links{display:flex;gap:10px;flex-wrap:wrap}.footer-links a{padding:7px 10px;border-radius:12px;background:rgba(255,255,255,.06)}.socials{display:flex;gap:8px}.socials a{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08)}.copyright{text-align:center;color:#96a4b8;margin:24px 0 0}.admin-body{background:#f3f6ff}.admin-layout{width:min(1420px,96vw);margin:22px auto;display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px}.admin-menu{position:sticky;top:18px;align-self:start;max-height:calc(100vh - 36px);overflow:auto;padding:16px;border:1px solid var(--border);border-radius:24px;background:var(--panel);box-shadow:var(--shadow)}.admin-brand{font-weight:950;font-size:1.15rem;margin-bottom:12px}.admin-nav-group{margin:12px 0}.admin-nav-group strong{display:block;margin:8px 0;color:var(--muted);font-size:.8rem}.admin-menu a,.admin-theme-toggle{display:block;width:100%;text-align:inherit;padding:10px 12px;margin:4px 0;border:0;border-radius:13px;background:transparent;color:var(--text);font-weight:850;cursor:pointer}.admin-menu a:hover,.admin-menu a.active,.admin-theme-toggle:hover{background:#eef3ff;color:var(--brand)}.admin-breadcrumb{margin-bottom:12px;color:var(--muted);font-weight:850}.admin-card h1,.admin-card h2{margin-top:0}.admin-form,.grid-form,.settings-form{display:grid;gap:14px}.admin-form label,.grid-form label{display:grid;gap:6px;font-weight:850}.admin-form input,.admin-form textarea,.admin-form select,.grid-form input,.grid-form textarea,.grid-form select,.admin-search input{width:100%;border:1px solid var(--border);border-radius:14px;padding:10px 12px;background:var(--panel);color:var(--text);outline:none}.two,.three{display:grid;gap:14px}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-search{display:flex;gap:8px;margin:12px 0}.table-wrap,.admin-table-wrap{overflow:auto}.admin-table{width:100%;border-collapse:separate;border-spacing:0;min-width:820px}.admin-table th,.admin-table td{padding:11px 12px;border-bottom:1px solid var(--border);text-align:inherit;vertical-align:top}.admin-table th{position:sticky;top:0;background:#f7f9ff;font-size:.86rem;color:#475467;z-index:1}.admin-table tr:hover td{background:rgba(36,107,254,.035)}.thumb-small{width:58px;height:58px;object-fit:cover;border-radius:13px}.admin-help,.muted{color:var(--muted)}.alert{padding:12px 14px;border-radius:15px;font-weight:900;margin:12px 0}.alert.success,.success{background:#ecfdf3;color:#067647}.alert.error,.error{background:#fef3f2;color:#b42318}.status-open{color:#b42318;font-weight:950}.status-reviewing{color:#b54708;font-weight:950}.status-resolved{color:#067647;font-weight:950}.status-ignored{color:#667085;font-weight:950}.pill{display:inline-flex;padding:4px 9px;border-radius:999px;background:#eef3ff;color:var(--brand);font-weight:900}.asset-grid,.export-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.asset-preview{max-width:220px;border-radius:16px;border:1px solid var(--border)}.merge-pair,.merge-table{border:1px solid var(--border);border-radius:18px;padding:12px;margin:10px 0;background:#fff}.install-card{width:min(620px,94vw);margin:60px auto}.checkbox,.merge-check{display:inline-flex!important;align-items:center;gap:7px}.checkbox input,.merge-check input{width:auto}.upload-field,.server-field{display:grid;gap:6px}.tabs-note{color:var(--muted);font-size:.9rem}.inline-delete{display:inline;margin-inline-start:8px}.inline-delete button{border:0;background:transparent;color:var(--red);font-weight:950;cursor:pointer;padding:0;box-shadow:none}.inline-delete button:hover{text-decoration:underline}.advanced{border:1px solid var(--border);border-radius:18px;padding:14px}.wxr-options{display:grid;gap:10px}.check{font-weight:900}.reason{color:var(--muted)}
@media(max-width:1050px){.game-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.mini-games-grid{grid-template-columns:repeat(5,minmax(58px,1fr))}.admin-layout{grid-template-columns:1fr}.admin-menu{position:relative;top:auto;max-height:none}.footer-inner{grid-template-columns:1fr}.game-top{grid-template-columns:1fr;text-align:center}.game-cover{margin:auto}.inline-rate{justify-content:center}.share-buttons{justify-content:center}}
@media(max-width:820px){.header-main{grid-template-columns:1fr auto;gap:10px}.brand{min-width:0}.top-search{grid-column:1/-1;order:3}.menu-toggle{display:grid}.header-category-piano{display:none;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.header-category-piano.open{display:grid}.piano-key{max-width:none;min-width:0}.home-intro{grid-template-columns:1fr;padding:26px}.game-grid{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:14px}.game-card.pro-game-card{padding:9px;border-radius:21px}.game-card .thumb-wrap.game-preview-zone{border-radius:18px}.hover-preview{display:none}.category-mini-row{grid-template-columns:repeat(2,minmax(0,1fr))}.pre-game-ad.large-pre-ad{min-height:360px}.two,.three{grid-template-columns:1fr}.admin-search{display:grid}.site-footer{margin-top:36px}}
@media(max-width:520px){.container{width:min(100% - 22px,1280px)}.home-intro h1{font-size:2.1rem}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.play-card-btn{min-width:112px;padding:9px 12px}.card-body h3{font-size:.92rem}.card-body p{display:none}.category-mini-row{grid-template-columns:1fr}.game-actions .btn{width:100%;justify-content:center}.mini-games-grid{grid-template-columns:repeat(4,minmax(54px,1fr))}.header-actions{gap:6px}.lang-switch,.theme-toggle,.menu-toggle{height:38px;min-width:38px}.brand-mark{width:40px;height:40px}.pre-ad-box{min-height:180px}.admin-table{min-width:720px}}

/* GAMEEG v17 - Dark content-first arcade redesign */
:root,
:root[data-theme="dark"]{
  --bg:#0b1020;
  --panel:#111827;
  --card:#151d31;
  --card2:#1b2540;
  --text:#f8fafc;
  --muted:#a7b0c3;
  --brand:#5d7cff;
  --brand2:#8b5cf6;
  --accent:#ffb020;
  --green:#22c55e;
  --red:#fb3f5d;
  --border:rgba(255,255,255,.105);
  --shadow:0 18px 38px rgba(0,0,0,.30);
  --shadow-strong:0 28px 70px rgba(0,0,0,.46);
}
html[data-theme="dark"] body,
body{
  background:
    radial-gradient(circle at 18% -10%,rgba(93,124,255,.20),transparent 30%),
    radial-gradient(circle at 82% 0%,rgba(139,92,246,.16),transparent 28%),
    linear-gradient(180deg,#070b16 0%,#0b1020 36%,#0a0f1d 100%);
  color:var(--text);
}
html[data-theme="dark"] .site-header,
.site-header{
  background:rgba(8,13,27,.88);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 36px rgba(0,0,0,.30);
}
.arcade-header.header-main{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 0;
  min-height:62px;
}
.arcade-header .brand{
  flex:0 0 auto;
  font-size:1.22rem;
  color:#fff;
  letter-spacing:-.03em;
}
.arcade-header .brand-mark{
  width:38px;
  height:38px;
  border-radius:13px;
  box-shadow:0 12px 26px rgba(93,124,255,.28);
}
.header-category-tabs{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  overflow-x:auto;
  padding:4px 2px;
  scrollbar-width:thin;
}
.category-tab{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  color:#dbe7ff;
  font-size:.84rem;
  font-weight:900;
  white-space:nowrap;
  box-shadow:none;
  transition:transform .14s ease,background .14s ease,border-color .14s ease,color .14s ease;
}
.category-tab:hover,
.category-tab:focus-visible{
  transform:translateY(-1px);
  background:linear-gradient(135deg,rgba(93,124,255,.28),rgba(139,92,246,.22));
  border-color:rgba(141,166,255,.36);
  color:#fff;
}
.category-tab .cat-icon{
  width:22px;
  height:22px;
  min-width:22px;
  margin:0;
  border-radius:8px;
  font-size:.92rem;
  background:rgba(255,255,255,.08);
}
.category-tab .cat-icon.image img{
  border-radius:8px;
}
.compact-search.top-search{
  flex:0 1 250px;
  min-width:190px;
  max-width:290px;
  height:40px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.11);
  box-shadow:none;
}
.compact-search.top-search input{
  padding:8px 12px;
  color:#fff;
  font-size:.9rem;
}
.compact-search.top-search input::placeholder{color:#8390aa}
.compact-search.top-search button{
  width:34px;
  height:34px;
  min-width:34px;
  padding:0;
  margin:3px;
  border-radius:50%;
  display:grid;
  place-items:center;
  box-shadow:none;
}
.header-actions{flex:0 0 auto}
.lang-switch,.theme-toggle,.menu-toggle{
  height:38px;
  min-width:38px;
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.10);
  color:#e6ecff;
  box-shadow:none;
}
.header-category-piano,.home-categories-strip,.home-intro{display:none!important}
.header-ad-728 .ad-slot{margin:4px auto 10px}
.ad-slot{
  border-radius:18px;
  overflow:hidden;
}
.ad-slot.wide,.ad-slot.header-728,.ad-home-top{
  text-align:center;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.075);
}
.arcade-container.container{
  width:min(1380px,96vw);
}
.arcade-first-section{margin-top:16px}
.home-section{margin:24px 0 34px}
.section-head{
  margin:16px 0 13px;
  padding:0 2px;
}
.section-head h1,.section-head h2{
  color:#fff;
  font-size:clamp(1.25rem,2.1vw,1.85rem);
}
.section-head p{
  margin:0;
  color:#8f9bb5;
  font-size:.95rem;
  max-width:720px;
}
.section-head a{color:#9bb1ff}
.game-grid,
.game-grid.compact,
.game-grid.dense-grid{
  grid-template-columns:repeat(auto-fill,minmax(152px,1fr));
  gap:14px;
  margin:14px 0 28px;
}
.game-card.pro-game-card{
  padding:8px;
  gap:7px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.082),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 14px 30px rgba(0,0,0,.24);
  text-align:inherit;
}
.game-card.pro-game-card:hover{
  transform:translateY(-5px);
  border-color:rgba(139,165,255,.36);
  box-shadow:0 22px 48px rgba(0,0,0,.36);
}
.game-card .thumb-wrap.game-preview-zone{
  border-radius:15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055);
}
.hover-preview{border-radius:15px}
.play-card-btn{
  min-width:0;
  width:100%;
  margin:0;
  padding:7px 9px;
  border-radius:12px;
  font-size:.82rem;
  box-shadow:0 10px 18px rgba(93,124,255,.20);
}
.card-body{gap:3px;padding:0 2px 2px;text-align:center}
.card-rating-line{min-height:18px;font-size:.78rem}
.card-body h3{
  margin:0;
  font-size:.92rem;
  line-height:1.28;
  min-height:auto;
  color:#fff;
}
.card-body p{display:none!important}
.game-card-category{
  display:inline-flex;
  align-self:center;
  justify-content:center;
  max-width:100%;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(93,124,255,.13);
  color:#c7d3ff;
  font-size:.72rem;
  font-weight:900;
}
.game-card-views{font-size:.72rem;color:#8793ae}
.badge.new{background:linear-gradient(135deg,#fb3f5d,#ff8a00)}
.no-thumb{background:linear-gradient(135deg,#111827,#1d2b4c);color:#aebcff}
.pagination a{
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.09);
  color:#dbe7ff;
}
.pagination a.active,
.pagination a:hover{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;
}
.category-hero,.content-page,.seo-text,.game-top,.content,.report-dialog,.install-card,.admin-card,.merge-pair,.merge-table{
  background:linear-gradient(180deg,rgba(255,255,255,.078),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.09);
  color:var(--text);
  box-shadow:0 18px 42px rgba(0,0,0,.25);
}
.category-hero h1,.content-page h1,.seo-text h2,.game-title-area h1{color:#fff}
.category-hero p,.content-page div,.seo-text p,.game-title-area p{color:#a7b0c3}
.game-cover{box-shadow:0 18px 34px rgba(0,0,0,.35)}
.player-shell{
  background:#030712;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 28px 70px rgba(0,0,0,.48);
}
.pre-game-ad{
  background:
    radial-gradient(circle at 50% 0%,rgba(93,124,255,.32),transparent 34%),
    radial-gradient(circle at 18% 90%,rgba(255,176,32,.14),transparent 28%),
    linear-gradient(135deg,#070b16,#101a33);
}
.pre-ad-box{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.11);
}
.share-buttons a,.share-buttons button,.btn.secondary{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.10);
  color:#e6ecff;
}
.site-footer{background:#050814;border-top:1px solid rgba(255,255,255,.08)}
.footer-links a,.socials a{background:rgba(255,255,255,.07)}
.admin-body{background:#070b16;color:var(--text)}
.admin-layout{width:min(1480px,96vw)}
.admin-menu{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.045));
  border-color:rgba(255,255,255,.09);
}
.admin-menu a,.admin-theme-toggle{color:#dbe7ff}
.admin-menu a:hover,.admin-menu a.active,.admin-theme-toggle:hover{background:rgba(93,124,255,.18);color:#fff}
.admin-table th{background:#101a33;color:#dbe7ff}
.admin-table tr:hover td{background:rgba(93,124,255,.07)}
.admin-form input,.admin-form textarea,.admin-form select,.grid-form input,.grid-form textarea,.grid-form select,.admin-search input{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
  color:#fff;
}
.admin-form input::placeholder,.admin-form textarea::placeholder,.grid-form input::placeholder{color:#7f8aa3}
.table-wrap,.admin-table-wrap{border-color:rgba(255,255,255,.08)}
.alert.success,.success{background:rgba(34,197,94,.13);color:#8ff0ae}
.alert.error,.error{background:rgba(251,63,93,.13);color:#ff9faf}
.pill{background:rgba(93,124,255,.16);color:#c7d3ff}
@media(max-width:1100px){
  .arcade-header.header-main{display:grid;grid-template-columns:auto 1fr auto;gap:8px}
  .header-category-tabs{grid-column:1/-1;order:4;width:100%;padding-bottom:6px}
  .compact-search.top-search{max-width:none;min-width:0;flex:1 1 auto}
}
@media(max-width:820px){
  .arcade-header.header-main{grid-template-columns:1fr auto;gap:8px}
  .compact-search.top-search{grid-column:1/-1;order:3;max-width:none;width:100%}
  .header-category-tabs{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible}
  .header-category-tabs.open{display:grid}
  .category-tab{justify-content:center;min-height:40px}
  .game-grid,.game-grid.compact,.game-grid.dense-grid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:12px}
}
@media(max-width:520px){
  .arcade-container.container{width:min(100% - 18px,1380px)}
  .game-grid,.game-grid.compact,.game-grid.dense-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .game-card.pro-game-card{padding:7px;border-radius:16px}
  .card-body h3{font-size:.86rem}
  .play-card-btn{font-size:.78rem;padding:6px 8px}
}

/* v17.1 — compact premium header category tabs */
.arcade-header.header-main{
  gap:8px;
  min-height:58px;
  padding:8px 0;
}
.header-category-tabs{
  gap:6px;
  padding:2px 2px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
}
.header-category-tabs::-webkit-scrollbar{display:none;width:0;height:0}
.category-tab{
  min-height:32px;
  padding:5px 9px;
  gap:5px;
  border-radius:13px;
  font-size:.77rem;
  line-height:1;
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.085);
  color:#d9e2ff;
}
.category-tab .cat-icon{
  width:18px;
  height:18px;
  min-width:18px;
  border-radius:6px;
  font-size:.74rem;
  background:rgba(124,136,255,.14);
}
.category-tab:hover,.category-tab:focus-visible{
  transform:translateY(-1px);
  background:rgba(100,116,255,.20);
  border-color:rgba(148,163,255,.28);
}
.compact-search.top-search{
  flex-basis:210px;
  min-width:155px;
  max-width:230px;
  height:36px;
}
.compact-search.top-search input{padding:7px 11px;font-size:.82rem}
.compact-search.top-search button{padding:7px 11px;margin:3px;border-radius:12px}
.header-actions .lang-switch,.header-actions .theme-toggle,.header-actions .menu-toggle{
  height:36px;
  min-width:36px;
  border-radius:12px;
}
@media(min-width:1101px){
  .header-category-tabs{max-width:none}
  .arcade-header .brand{max-width:180px}
}
@media(max-width:1100px){
  .header-category-tabs{
    mask-image:none;
    -webkit-mask-image:none;
  }
}

/* v17.2 — more room for categories: remove tab icons + toggle search drawer */
.arcade-header.header-main{
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
}
.header-actions{
  gap:6px;
}
.header-actions .lang-switch,
.header-actions .theme-toggle,
.header-actions .menu-toggle,
.header-actions .search-toggle{
  height:36px;
  min-width:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:#e8efff;
  font-weight:900;
  box-shadow:none;
  cursor:pointer;
}
.header-actions .search-toggle:hover,
.header-actions .search-toggle[aria-expanded="true"]{
  background:rgba(100,116,255,.20);
  border-color:rgba(148,163,255,.30);
}
.header-category-tabs{
  gap:8px;
  padding-inline:2px;
}
.category-tab{
  padding:6px 12px;
  min-height:34px;
  border-radius:999px;
  white-space:nowrap;
}
.category-tab span{
  display:block;
  font-size:.85rem;
  font-weight:900;
}
.category-tab .cat-icon{display:none!important}

.header-search-drawer[hidden]{display:none!important}
.header-search-drawer{
  width:min(1280px,94vw);
  margin:0 auto 10px;
}
.header-search-drawer-inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(10,17,36,.92);
  box-shadow:0 14px 32px rgba(0,0,0,.20);
}
.header-search-drawer-inner strong{
  color:#dce6ff;
  font-size:.9rem;
  white-space:nowrap;
}
.drawer-search.compact-search.top-search{
  flex:1 1 auto;
  min-width:0;
  max-width:none;
  width:100%;
  height:40px;
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.08);
  box-shadow:none;
}
.drawer-search.compact-search.top-search input{
  color:#f5f8ff;
}
.drawer-search.compact-search.top-search input::placeholder{color:#97a5c6}
.drawer-search.compact-search.top-search button{
  min-width:40px;
}

@media(max-width:820px){
  .arcade-header.header-main{
    grid-template-columns:1fr auto;
    gap:8px;
  }
  .header-actions{
    grid-column:2;
    grid-row:1;
  }
  .header-category-tabs{
    display:none;
    grid-column:1/-1;
    order:3;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    overflow:visible;
    padding-bottom:6px;
  }
  .header-category-tabs.open{display:grid}
  .category-tab{
    justify-content:center;
    min-height:40px;
    text-align:center;
  }
  .header-search-drawer{
    width:min(100% - 18px,1280px);
  }
  .header-search-drawer-inner{
    display:grid;
    gap:8px;
  }
  .header-search-drawer-inner strong{
    font-size:.85rem;
  }
}

/* v17.3 — remove dark toggle, hide desktop menu button, and make search a small floating overlay */
.site-header{
  overflow:visible;
}
.header-actions .theme-toggle{display:none!important}
.header-actions .menu-toggle{display:none}
.arcade-header.header-main{
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
}
.header-actions{
  align-items:center;
}
.header-search-drawer{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  width:min(560px, calc(100vw - 32px));
  margin:0;
  z-index:120;
  pointer-events:none;
}
.header-search-drawer[hidden]{display:none!important}
.header-search-drawer:not([hidden]){pointer-events:auto}
.header-search-drawer-inner{
  padding:10px;
  border-radius:18px;
  background:rgba(6,12,28,.98);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 22px 46px rgba(0,0,0,.35);
}
.drawer-search.compact-search.top-search{
  height:46px;
  width:100%;
  min-width:0;
  max-width:none;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
}
.drawer-search.compact-search.top-search input{
  padding:10px 14px;
  font-size:.95rem;
}
.drawer-search.compact-search.top-search button{
  margin:4px;
  min-width:44px;
  height:38px;
  border-radius:12px;
}
.header-ad-728{position:relative;z-index:1}

@media(min-width:821px){
  .header-category-tabs{overflow-x:auto;overflow-y:hidden}
}
@media(max-width:820px){
  .header-actions .menu-toggle{display:grid}
  .header-search-drawer{
    width:min(calc(100vw - 18px), 520px);
    top:calc(100% + 6px);
  }
  .header-search-drawer-inner{
    padding:8px;
  }
  .drawer-search.compact-search.top-search{
    height:42px;
  }
  .drawer-search.compact-search.top-search input{
    padding:9px 12px;
    font-size:.9rem;
  }
}


/* v17.4 — align search overlay under the magnifier + prevent category edge clipping */
.arcade-header.header-main{
  overflow:visible;
}
.header-actions{
  position:relative;
  overflow:visible;
}
.header-category-tabs{
  mask-image:none!important;
  -webkit-mask-image:none!important;
  padding-inline:10px!important;
  scroll-padding-inline:14px;
}
.category-tab{
  flex:0 0 auto;
}
.header-search-drawer{
  position:absolute!important;
  top:calc(100% + 10px)!important;
  inset-inline-start:0!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  width:min(380px, calc(100vw - 26px))!important;
  margin:0!important;
  z-index:300!important;
}
html[dir="rtl"] .header-search-drawer{
  inset-inline-start:0!important;
}
.header-search-drawer-inner{
  padding:8px!important;
  border-radius:16px!important;
}
.drawer-search.compact-search.top-search{
  height:42px!important;
  border-radius:14px!important;
}
.drawer-search.compact-search.top-search input{
  padding:8px 12px!important;
  font-size:.9rem!important;
}
.drawer-search.compact-search.top-search button{
  width:38px!important;
  min-width:38px!important;
  height:34px!important;
  padding:0!important;
}
@media(max-width:820px){
  .header-search-drawer{
    inset-inline-start:auto!important;
    inset-inline-end:0!important;
    width:min(340px, calc(100vw - 18px))!important;
  }
  .header-category-tabs{
    padding-inline:0!important;
  }
}


/* v17.5 — fixed search overlay with viewport clamping, no side-push */
html, body{
  overflow-x:hidden;
}
.header-search-drawer{
  position:fixed!important;
  top:var(--search-top, 74px)!important;
  left:var(--search-left, 12px)!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
  transform:none!important;
  width:min(330px, calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  margin:0!important;
  z-index:9999!important;
  pointer-events:none;
}
.header-search-drawer:not([hidden]){
  pointer-events:auto;
}
.header-search-drawer-inner{
  padding:7px!important;
  border-radius:16px!important;
  background:rgba(5,10,24,.98)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 24px 55px rgba(0,0,0,.45)!important;
}
.drawer-search.compact-search.top-search{
  height:40px!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  border-radius:14px!important;
}
.drawer-search.compact-search.top-search input{
  padding:8px 11px!important;
  font-size:.88rem!important;
}
.drawer-search.compact-search.top-search button{
  width:38px!important;
  min-width:38px!important;
  height:32px!important;
  margin:4px!important;
  padding:0!important;
}


/* v17.6 — simple anchored search dropdown under the magnifier */
html, body{
  overflow-x:hidden!important;
}
.site-header,
.arcade-header.header-main,
.header-actions{
  overflow:visible!important;
}
.header-actions{
  position:relative!important;
}
.header-search-drawer{
  position:absolute!important;
  top:calc(100% + 8px)!important;
  inset-inline-end:0!important;
  inset-inline-start:auto!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  width:280px!important;
  max-width:calc(100vw - 20px)!important;
  margin:0!important;
  z-index:9999!important;
  pointer-events:none;
}
.header-search-drawer:not([hidden]){
  pointer-events:auto;
}
.header-search-drawer-inner{
  padding:7px!important;
  border-radius:16px!important;
  background:rgba(5,10,24,.98)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 22px 50px rgba(0,0,0,.46)!important;
}
.drawer-search.compact-search.top-search{
  height:40px!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  border-radius:14px!important;
  box-shadow:none!important;
}
.drawer-search.compact-search.top-search input{
  padding:8px 11px!important;
  font-size:.88rem!important;
}
.drawer-search.compact-search.top-search button{
  width:36px!important;
  min-width:36px!important;
  height:32px!important;
  margin:4px!important;
  padding:0!important;
  border-radius:11px!important;
}
@media(max-width:520px){
  .header-search-drawer{
    width:260px!important;
  }
}


/* v17.7 — correct search placement: open from the magnifier toward page content */
html, body{
  overflow-x:hidden!important;
}
.header-search-drawer{
  position:fixed!important;
  top:var(--search-top, 72px)!important;
  left:var(--search-left, 12px)!important;
  right:auto!important;
  inset-inline-start:auto!important;
  inset-inline-end:auto!important;
  transform:none!important;
  width:min(300px, calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  margin:0!important;
  z-index:99999!important;
  pointer-events:none;
}
.header-search-drawer:not([hidden]){
  pointer-events:auto;
}
.header-search-drawer-inner{
  padding:7px!important;
  border-radius:16px!important;
  background:rgba(5,10,24,.98)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 22px 50px rgba(0,0,0,.46)!important;
}
.drawer-search.compact-search.top-search{
  height:40px!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  border-radius:14px!important;
  box-shadow:none!important;
}
.drawer-search.compact-search.top-search input{
  padding:8px 11px!important;
  font-size:.88rem!important;
}
.drawer-search.compact-search.top-search button{
  width:36px!important;
  min-width:36px!important;
  height:32px!important;
  margin:4px!important;
  padding:0!important;
  border-radius:11px!important;
}


/* v17.8 — FINAL search fix: inline expandable search, no overlay/dropdown at all */
html, body{
  overflow-x:hidden!important;
}
.site-header,
.arcade-header.header-main,
.header-actions{
  overflow:visible!important;
}
.header-search-drawer{
  display:none!important;
}
.header-actions{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
.header-inline-search{
  display:flex;
  align-items:center;
  width:44px;
  height:40px;
  min-width:44px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
  transition:width .18s ease, background .18s ease, border-color .18s ease;
}
.header-inline-search.open,
.header-inline-search:focus-within{
  width:260px;
  background:rgba(5,10,24,.72);
  border-color:rgba(126,145,255,.34);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.header-inline-search input{
  width:0;
  min-width:0;
  flex:1 1 auto;
  opacity:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:#eef4ff;
  font-size:.88rem;
  transition:opacity .16s ease, padding .16s ease;
}
.header-inline-search.open input,
.header-inline-search:focus-within input{
  width:auto;
  opacity:1;
  padding:0 12px;
}
.header-inline-search input::placeholder{
  color:#94a3c7;
}
.header-inline-search .search-toggle{
  flex:0 0 40px;
  width:40px;
  height:36px;
  min-width:40px;
  margin:2px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:12px;
  background:rgba(100,116,255,.22);
  color:#eef4ff;
  font-weight:950;
  cursor:pointer;
}
.header-inline-search.open .search-toggle,
.header-inline-search:focus-within .search-toggle{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
}
@media(max-width:980px){
  .header-inline-search.open,
  .header-inline-search:focus-within{
    width:220px;
  }
}
@media(max-width:700px){
  .header-inline-search.open,
  .header-inline-search:focus-within{
    position:absolute;
    inset-inline-start:10px;
    top:calc(100% + 8px);
    width:min(300px, calc(100vw - 20px));
    z-index:9999;
    background:rgba(5,10,24,.98);
    box-shadow:0 18px 44px rgba(0,0,0,.42);
  }
}