/* VulNyx main stylesheet - Rajdhani + Inter + Fira Code - generated from build.py COMMON_STYLE + PALETTES_CSS */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/rajdhani-500.woff2') format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/rajdhani-600.woff2') format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/rajdhani-700.woff2') format('woff2')}
@font-face{font-family:'Fira Code';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/fira-code-400.woff2') format('woff2')}
@font-face{font-family:'Fira Code';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/fira-code-600.woff2') format('woff2')}

:root{
  --brand-blue:#3FA8F4;--brand-red:#ED1C24;--brand-white:#FFFFFF;--brand-ink:#222226;
  --bg:#12141a;--bg2:#191c25;--surface:#202431;--card:#272c3b;--line:#41485f;--line2:#59627d;
  --text:#f4f3fb;--text2:#c5c7d6;--soft:#959aae;--accent:#ff79c6;--accent2:#8be9fd;--accent3:#f8f8f2;
  --shadow:rgba(0,0,0,.26);--glow:rgba(255,121,198,.12);--topbar:rgba(20,23,31,.96);--footerbar:rgba(20,23,31,.96);
  --panel-contour-border:color-mix(in srgb,var(--line) 56%, transparent);
  --panel-contour-shadow:inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent), 0 16px 40px color-mix(in srgb, var(--shadow) 44%, transparent)
}
[data-theme="light"]{
  --bg:#f6f3fb;--bg2:#efeaf8;--surface:#ffffff;--card:#fbf8ff;--line:#ddd7ea;--line2:#cec7de;
  --text:#292537;--text2:#68617b;--soft:#8f87a4;--glow:rgba(255,121,198,.08);--topbar:rgba(246,243,251,.96);--footerbar:rgba(246,243,251,.96)
}

[data-palette="emerald"]{--accent:#00e5a0;--accent2:#48c6ff;--accent3:#ffc86e}
[data-palette="noirgold"]{--accent:#c79a3d;--accent2:#5f79a7;--accent3:#e8d2a2}
[data-palette="crimson"]{--accent:var(--brand-red);--accent2:var(--brand-blue);--accent3:var(--brand-white)}
[data-palette="obsidian"]{--accent:#ff5a6f;--accent2:#8bb8ff;--accent3:#edf3ff}
[data-palette="cobalt"]{--accent:#3eb8ff;--accent2:#6d7dff;--accent3:#d8f3ff}
[data-palette="toxic"]{--accent:#7dff7a;--accent2:#5dd6c0;--accent3:#e9fff0}
[data-palette="draculasoft"]{--accent:#ff79c6;--accent2:#8be9fd;--accent3:#f8f8f2}
[data-palette="monokaiexec"]{--accent:#f92672;--accent2:#66d9ef;--accent3:#f8f8f2}
[data-palette="githubdimmed"]{--accent:#6cb6ff;--accent2:#f69d50;--accent3:#adbac7}
[data-palette="onedarkpro"]{--accent:#61afef;--accent2:#c678dd;--accent3:#e5c07b}
[data-palette="onemonokai"]{--accent:#78dce8;--accent2:#ff6188;--accent3:#ffd866}
[data-palette="seti"]{--accent:#55b5db;--accent2:#a074c4;--accent3:#e6cd69}
[data-palette="atomslate"]{--accent:#7ec7ff;--accent2:#98c379;--accent3:#e5c07b}
[data-theme="dark"][data-palette="emerald"]{--bg:#0c1314;--bg2:#121b1d;--surface:#182527;--card:#1d2d30;--line:#345156;--line2:#42666c;--text:#ecfffb;--text2:#a9c9c2;--soft:#7d9b95;--glow:rgba(0,229,160,.14);--topbar:rgba(12,19,20,.86)}
[data-theme="light"][data-palette="emerald"]{--bg:#eef8f4;--bg2:#e7f5f1;--surface:#ffffff;--card:#f5fcf8;--line:#d2e7de;--line2:#c1ddd4;--text:#19342f;--text2:#4a6861;--soft:#6f8b83;--glow:rgba(0,229,160,.08);--topbar:rgba(238,248,244,.94)}
[data-theme="dark"][data-palette="noirgold"]{--bg:#16120e;--bg2:#201a15;--surface:#28211b;--card:#302821;--line:#54453a;--line2:#6a5848;--text:#fff5e7;--text2:#cfbea7;--soft:#a39078;--glow:rgba(199,154,61,.13);--topbar:rgba(22,18,14,.88)}
[data-theme="light"][data-palette="noirgold"]{--bg:#f8f2e8;--bg2:#f2eadb;--surface:#fffdfa;--card:#fcf7ef;--line:#e4d7c3;--line2:#d8c8af;--text:#2d251b;--text2:#665747;--soft:#8d7c69;--glow:rgba(199,154,61,.08);--topbar:rgba(248,242,232,.95)}
[data-theme="dark"][data-palette="crimson"]{--bg:#0a111c;--bg2:#111a29;--surface:#162334;--card:#1c2b40;--line:#324860;--line2:#42607d;--text:#eef6ff;--text2:#aabbd2;--soft:#8295af;--glow:rgba(34,212,255,.14);--topbar:rgba(10,17,28,.86)}
[data-theme="light"][data-palette="crimson"]{--bg:#eef5ff;--bg2:#e6efff;--surface:#ffffff;--card:#f5f9ff;--line:#d4def2;--line2:#c5d2eb;--text:#182840;--text2:#506685;--soft:#7a90af;--glow:rgba(34,212,255,.08);--topbar:rgba(238,245,255,.95)}
[data-theme="dark"][data-palette="obsidian"]{--bg:#1a1c20;--bg2:#232730;--surface:#2a2f39;--card:#313746;--line:#4f586d;--line2:#626d83;--text:#f3f6fb;--text2:#bbc4d3;--soft:#9099ab;--glow:rgba(139,184,255,.12);--topbar:rgba(26,28,32,.88)}
[data-theme="light"][data-palette="obsidian"]{--bg:#f1f3f7;--bg2:#eaedf3;--surface:#ffffff;--card:#f7f9fc;--line:#d8dee7;--line2:#c9d1dd;--text:#1d2632;--text2:#546273;--soft:#7f8a9b;--glow:rgba(139,184,255,.08);--topbar:rgba(241,243,247,.95)}
[data-theme="dark"][data-palette="cobalt"]{--bg:#0e1623;--bg2:#152033;--surface:#1b2940;--card:#22314b;--line:#3c5478;--line2:#4d6994;--text:#eff7ff;--text2:#b2c2db;--soft:#879ab8;--glow:rgba(62,184,255,.14);--topbar:rgba(14,22,35,.88)}
[data-theme="light"][data-palette="cobalt"]{--bg:#eff5fb;--bg2:#e7eef8;--surface:#ffffff;--card:#f4f8fd;--line:#d4dfec;--line2:#c5d4e6;--text:#18263b;--text2:#4d6581;--soft:#768da9;--glow:rgba(62,184,255,.08);--topbar:rgba(239,245,251,.95)}
[data-theme="dark"][data-palette="toxic"]{--bg:#0f1510;--bg2:#151d16;--surface:#1b261d;--card:#223024;--line:#3b5140;--line2:#4b664f;--text:#efffea;--text2:#b6ceb0;--soft:#8ca386;--glow:rgba(125,255,122,.12);--topbar:rgba(15,21,16,.88)}
[data-theme="light"][data-palette="toxic"]{--bg:#f3f8ef;--bg2:#ebf3e6;--surface:#ffffff;--card:#f7fbf4;--line:#d7e4d1;--line2:#c9dac0;--text:#213024;--text2:#586a59;--soft:#7f907e;--glow:rgba(125,255,122,.08);--topbar:rgba(243,248,239,.95)}
[data-theme="dark"][data-palette="draculasoft"]{--bg:#2b2d38;--bg2:#343746;--surface:#3b4050;--card:#43495c;--line:#646d87;--line2:#7c85a3;--text:#f8f8f2;--text2:#d1d3df;--soft:#a8adc0;--glow:rgba(255,121,198,.12);--topbar:rgba(49,52,65,.9)}
[data-theme="light"][data-palette="draculasoft"]{--bg:#f6f3fb;--bg2:#efeaf8;--surface:#ffffff;--card:#fbf8ff;--line:#ddd7ea;--line2:#cec7de;--text:#292537;--text2:#68617b;--soft:#8f87a4;--glow:rgba(255,121,198,.08);--topbar:rgba(246,243,251,.95)}
[data-theme="dark"][data-palette="monokaiexec"]{--bg:#262820;--bg2:#2f3128;--surface:#37392f;--card:#404237;--line:#636659;--line2:#787b6d;--text:#f8f8f2;--text2:#cbcdbd;--soft:#a0a390;--glow:rgba(249,38,114,.12);--topbar:rgba(38,40,32,.88)}
[data-theme="light"][data-palette="monokaiexec"]{--bg:#f7f6ef;--bg2:#f0efe5;--surface:#ffffff;--card:#fbfaf3;--line:#dfdecf;--line2:#d0cfbe;--text:#2d2f27;--text2:#666956;--soft:#8d9078;--glow:rgba(249,38,114,.08);--topbar:rgba(247,246,239,.95)}
[data-theme="dark"][data-palette="githubdimmed"]{--bg:#22272e;--bg2:#2a313c;--surface:#2d333b;--card:#343b43;--line:#4b5563;--line2:#636e7b;--text:#cdd9e5;--text2:#9da7b3;--soft:#768390;--glow:rgba(108,182,255,.13);--topbar:rgba(34,39,46,.88)}
[data-theme="light"][data-palette="githubdimmed"]{--bg:#f6f8fa;--bg2:#eef2f6;--surface:#ffffff;--card:#f7faff;--line:#d0d7de;--line2:#c0c8d1;--text:#24292f;--text2:#57606a;--soft:#6e7781;--glow:rgba(108,182,255,.08);--topbar:rgba(246,248,250,.95)}
[data-theme="dark"][data-palette="onedarkpro"]{--bg:#21252b;--bg2:#262b33;--surface:#2c313c;--card:#323844;--line:#4b5263;--line2:#616a7d;--text:#abb2bf;--text2:#8f98a8;--soft:#6f7787;--glow:rgba(97,175,239,.14);--topbar:rgba(33,37,43,.88)}
[data-theme="light"][data-palette="onedarkpro"]{--bg:#f4f6fb;--bg2:#eceff6;--surface:#ffffff;--card:#f7f9fd;--line:#d6dbe6;--line2:#c6cedd;--text:#2b313b;--text2:#5d6676;--soft:#80889a;--glow:rgba(97,175,239,.08);--topbar:rgba(244,246,251,.95)}
[data-theme="dark"][data-palette="onemonokai"]{--bg:#272822;--bg2:#2f3029;--surface:#363831;--card:#3d4038;--line:#5c6055;--line2:#74786b;--text:#f8f8f2;--text2:#c9c8ba;--soft:#9a9988;--glow:rgba(120,220,232,.12);--topbar:rgba(39,40,34,.88)}
[data-theme="light"][data-palette="onemonokai"]{--bg:#f8f7f2;--bg2:#f1f0e9;--surface:#ffffff;--card:#fbfaf5;--line:#dfddd0;--line2:#d1cdbf;--text:#2e2f28;--text2:#666758;--soft:#8d8d7d;--glow:rgba(120,220,232,.08);--topbar:rgba(248,247,242,.95)}
[data-theme="dark"][data-palette="seti"]{--bg:#151718;--bg2:#1d2022;--surface:#23272a;--card:#2a2f33;--line:#454d56;--line2:#5b6672;--text:#d6d6d6;--text2:#a8b0b8;--soft:#7f8a93;--glow:rgba(85,181,219,.13);--topbar:rgba(21,23,24,.88)}
[data-theme="light"][data-palette="seti"]{--bg:#f4f6f8;--bg2:#eceff3;--surface:#ffffff;--card:#f8fafc;--line:#d5dbe2;--line2:#c7d0da;--text:#27313a;--text2:#5c6975;--soft:#7f8b97;--glow:rgba(85,181,219,.08);--topbar:rgba(244,246,248,.95)}
[data-theme="dark"][data-palette="atomslate"]{--bg:#23262e;--bg2:#2a2f38;--surface:#303641;--card:#373e4a;--line:#525b69;--line2:#697483;--text:#d7dae0;--text2:#a8b0bc;--soft:#808998;--glow:rgba(126,199,255,.13);--topbar:rgba(35,38,46,.88)}
[data-theme="light"][data-palette="atomslate"]{--bg:#f3f6fa;--bg2:#ebeff5;--surface:#ffffff;--card:#f7f9fd;--line:#d5dce6;--line2:#c7d1de;--text:#28313d;--text2:#5f6b7b;--soft:#8390a1;--glow:rgba(126,199,255,.08);--topbar:rgba(243,246,250,.95)}

:root{--space-1:8px;--space-2:16px;--space-3:24px;--motion-fast:160ms;--motion-mid:220ms;--ease-premium:cubic-bezier(.22,.61,.36,1);--row-py:11px;--row-px:10px;--cell-fs:12px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);scrollbar-gutter:stable}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;overflow-x:auto;position:relative;font-size:14px}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(circle at 10% -10%,var(--glow),transparent 40%),radial-gradient(circle at 90% 0,rgba(72,198,255,.08),transparent 36%),linear-gradient(180deg,var(--bg2),var(--bg));pointer-events:none;z-index:-2}
[data-theme="light"] body::before{background:linear-gradient(180deg,var(--bg),var(--bg2))}
body.modal-open{overflow:hidden}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--line2) 82%, transparent) transparent}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,color-mix(in srgb,var(--line2) 80%, transparent),color-mix(in srgb,var(--accent2) 22%, transparent));border-radius:999px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-button{width:0;height:0;display:none}
a{color:inherit} img{display:block;max-width:100%} button,input,select{font:inherit}
.shell{max-width:1520px;width:calc(100% - 24px);margin:0 auto;padding:74px 0 60px}
.topbar,.toolbar,.catalog,.page-card,.dialog,.submit-panel{border:1px solid color-mix(in srgb,var(--brand-blue) 30%, transparent);background:linear-gradient(135deg,color-mix(in srgb,#1f2031 85%,var(--brand-blue) 15%),color-mix(in srgb,#131a28 80%,var(--brand-blue) 20%));box-shadow:0 12px 28px var(--shadow)}
.topbar{position:fixed;top:0;left:0;right:0;z-index:80;border-radius:0;padding:12px max(12px,calc((100vw - 1520px)/2 + 12px));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;background:color-mix(in srgb,var(--topbar) 96%, transparent);backdrop-filter:blur(16px);border-left:none;border-right:none;border-top:none;overflow:visible}
.brand{display:flex;align-items:center;gap:14px}.brand-home{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:12px;border:none;background:transparent;box-shadow:none;transition:transform var(--motion-fast) var(--ease-premium),filter var(--motion-mid) var(--ease-premium)}.brand-home::before{content:"";position:absolute;inset:-5px -9px;z-index:-1;border-radius:14px;background:radial-gradient(62% 76% at 50% 50%,color-mix(in srgb,var(--accent2) 58%,transparent),color-mix(in srgb,var(--accent) 28%,transparent) 62%,transparent 100%);filter:blur(7px) saturate(1.08);opacity:.86;transition:opacity var(--motion-fast) var(--ease-premium),transform var(--motion-fast) var(--ease-premium)}.brand-home:hover::before,.brand-home:focus-visible::before{opacity:1;transform:scale(1.03)}.brand-home:hover,.brand-home:focus-visible{transform:translateY(-1px)}.brand img{width:auto;height:34px;object-fit:contain;filter:drop-shadow(0 0 1px color-mix(in srgb,var(--accent3) 38%,transparent)) drop-shadow(0 7px 20px color-mix(in srgb,var(--accent2) 42%,transparent)) drop-shadow(0 0 26px color-mix(in srgb,var(--accent) 30%,transparent));transition:filter var(--motion-mid) var(--ease-premium),opacity var(--motion-fast) var(--ease-premium)}.brand h1{display:none}.brand p{margin:0;color:var(--text2);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.top-nav{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.top-nav-link{position:relative;overflow:hidden;height:36px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:108px;padding:0 10px;border-radius:10px;border:1px solid color-mix(in srgb,#3D9CDF 32%,var(--line));background:color-mix(in srgb,var(--card) 82%, transparent);color:var(--text2);text-decoration:none;font:700 11px 'Fira Code',monospace;letter-spacing:.05em;text-transform:uppercase;transition:transform var(--motion-fast) var(--ease-premium),border-color var(--motion-fast) var(--ease-premium),box-shadow var(--motion-mid) var(--ease-premium),background var(--motion-fast) var(--ease-premium),color var(--motion-fast) var(--ease-premium)}
.top-nav-link::before{content:"";position:absolute;inset:-28% -18%;background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--brand-blue) 22%,transparent),transparent 58%);opacity:0;transition:opacity .22s ease;pointer-events:none}
.top-nav-link::after{content:"";position:absolute;top:0;left:-135%;width:95%;height:100%;background:linear-gradient(100deg,transparent,color-mix(in srgb,#fff 14%,transparent),transparent);transform:skewX(-18deg);opacity:.52;pointer-events:none}
.top-nav-link:hover,.top-nav-link:focus-visible{transform:translateY(-1px);border-color:color-mix(in srgb,var(--brand-blue) 56%, var(--line));background:linear-gradient(135deg,color-mix(in srgb,#1f2031 85%,var(--brand-blue) 15%),color-mix(in srgb,#131a28 80%,var(--brand-blue) 20%));color:var(--text)}
.top-nav-link:hover::before,.top-nav-link:focus-visible::before{opacity:1}
.top-nav-link:hover::after,.top-nav-link:focus-visible::after{animation:statSheen .72s ease}
.topbar .brand{justify-self:start}
.topbar .top-nav{justify-self:center}
.topbar .top-actions{justify-self:end}
[data-theme="light"] .brand-home::before{background:radial-gradient(62% 76% at 50% 50%,color-mix(in srgb,var(--accent2) 36%,transparent),color-mix(in srgb,var(--accent) 18%,transparent) 60%,transparent 100%);filter:blur(7px) saturate(1.02)}
[data-theme="light"] .brand img{filter:drop-shadow(0 1px 0 rgba(255,255,255,.45)) drop-shadow(0 6px 16px color-mix(in srgb,var(--accent2) 30%,transparent)) contrast(1.04) saturate(1.04)}
.top-actions{display:flex;align-items:center;justify-content:flex-end;justify-self:end;gap:6px;flex-wrap:nowrap;min-width:0}
.mobile-nav{display:none;width:100%;overflow-x:auto;scrollbar-width:none}.mobile-nav::-webkit-scrollbar{display:none}
.topbar.nav-open .mobile-nav{display:flex!important;flex-direction:row;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;grid-column:1/-1;width:100%;padding:8px 4px 6px;margin-top:4px;border-top:1px solid color-mix(in srgb,var(--line) 56%,transparent);animation:mnavIn .18s ease}
@keyframes mnavIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes mnavOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}
.topbar.nav-closing .mobile-nav{animation:mnavOut .16s ease forwards!important}
.mobile-nav a{display:inline-flex;align-items:center;padding:7px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--line) 72%,transparent);background:color-mix(in srgb,var(--card) 82%,transparent);text-decoration:none;font:700 11px 'Fira Code',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--text2);white-space:nowrap;transition:all .15s ease}
.mobile-nav a:hover,.mobile-nav a:focus-visible{border-color:color-mix(in srgb,var(--accent) 56%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 12%,transparent),color-mix(in srgb,var(--surface) 86%,transparent));color:var(--text);transform:translateY(-1px)}
.control-links{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.social-link{width:34px;height:34px;border:1px solid color-mix(in srgb,#3D9CDF 32%,var(--line));background:color-mix(in srgb,var(--card) 88%, transparent);color:var(--text2);border-radius:12px;display:flex;align-items:center;justify-content:center;transition:all .22s ease;opacity:.9}
.social-link svg,.social-link img{width:16px;height:16px;object-fit:contain}
.nav-link,.ghost-btn,.primary-btn,.row-btn,.row-link,.icon-btn,.theme-trigger,.writeup-link,.multi-trigger,.multi-option{border:1px solid color-mix(in srgb,var(--line) 76%, transparent);background:color-mix(in srgb,var(--card) 88%, transparent);color:var(--text);border-radius:12px;text-decoration:none}
.nav-link,.ghost-btn,.primary-btn,.row-btn,.row-link,.theme-trigger,.writeup-link,.multi-trigger,.multi-option{padding:8px 12px}
.nav-link{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.nav-link.active{border-color:color-mix(in srgb,var(--accent) 55%, var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%, transparent),color-mix(in srgb,var(--accent2) 12%, transparent))}
.icon-btn,.theme-trigger{width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center}
.menu-trigger{display:none}
.topbar.nav-open .menu-trigger{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),color-mix(in srgb,var(--accent2) 8%,var(--card)))}
.icon-btn svg,.theme-trigger svg,.submit-link svg{width:18px;height:18px}
.theme-trigger{font:700 15px 'Fira Code',monospace;border-color:color-mix(in srgb,#3D9CDF 32%,var(--line))}
.theme-trigger[data-tip]{position:relative;overflow:visible}
.theme-trigger[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%) translateY(-4px);padding:7px 11px;border-radius:10px;border:1px solid color-mix(in srgb,var(--brand-blue) 30%, var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 97%, transparent),color-mix(in srgb,var(--brand-blue) 8%, transparent),color-mix(in srgb,var(--brand-red) 8%, transparent));font:700 10px 'Fira Code',monospace;color:var(--text);white-space:nowrap;z-index:24;box-shadow:0 14px 30px var(--shadow),0 0 0 1px color-mix(in srgb,var(--brand-red) 10%, transparent);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.theme-trigger[data-tip]::before{content:"";position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%) translateY(-4px) rotate(45deg);width:8px;height:8px;background:color-mix(in srgb,var(--surface) 97%, transparent);border-left:1px solid color-mix(in srgb,var(--brand-blue) 24%, var(--line));border-top:1px solid color-mix(in srgb,var(--brand-blue) 24%, var(--line));z-index:23;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.primary-btn,#swalDownload{background:linear-gradient(135deg,color-mix(in srgb,#3D9CDF 84%,#111),color-mix(in srgb,#3D9CDF 60%,var(--accent2) 18%));border-color:color-mix(in srgb,#3D9CDF 56%,var(--line));box-shadow:0 8px 22px color-mix(in srgb,#3D9CDF 22%,transparent);color:#fff;cursor:pointer}
.ghost-btn{cursor:pointer}
.ghost-btn--blue{border-color:color-mix(in srgb,#3D9CDF 50%,var(--line))!important;background:color-mix(in srgb,#3D9CDF 10%,transparent)!important;color:#fff!important;cursor:pointer}
.ghost-btn--blue:hover{border-color:color-mix(in srgb,#3D9CDF 70%,var(--line))!important;background:color-mix(in srgb,#3D9CDF 18%,transparent)!important;transform:translateY(-1px)}
/* View button in table — subtle blue accent (primary-ish CTA per row) */
.row-btn.js-open{border-color:color-mix(in srgb,#3D9CDF 32%,var(--line))!important}
.row-btn.js-open:hover{border-color:#3D9CDF!important;background:color-mix(in srgb,#3D9CDF 12%,transparent)!important;color:#fff!important;box-shadow:none!important}
/* Active filter triggers — show blue state when filter has a value */
.multi-trigger.is-selected{border-color:color-mix(in srgb,#3D9CDF 55%,var(--line))!important;background:color-mix(in srgb,#3D9CDF 10%,transparent)!important;color:var(--text)!important}
.form-btns .primary-btn,.form-btns .ghost-btn,.submit-actions .primary-btn{min-width:140px;height:40px;padding:0 16px!important;font-weight:600;font-size:13.5px}
.row-btn{background:linear-gradient(135deg,color-mix(in srgb,#1f2031 85%,var(--brand-blue) 15%),color-mix(in srgb,#131a28 80%,var(--brand-blue) 20%));border:1px solid color-mix(in srgb,var(--brand-blue) 30%,transparent);color:#edf3ff;transition:all 0.2s cubic-bezier(0.4,0.0,0.2,1)}
.row-btn,.primary-btn,.row-link,.writeup-link{position:relative;overflow:hidden;transition:transform var(--motion-fast) var(--ease-premium),border-color var(--motion-fast) var(--ease-premium),box-shadow var(--motion-mid) var(--ease-premium),background var(--motion-fast) var(--ease-premium)}
.primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.social-link:hover,.nav-link:hover,.ghost-btn:hover,.primary-btn:hover,.row-btn:hover,.row-link:hover,.icon-btn:hover,.theme-trigger:hover,.writeup-link:hover,.multi-trigger:hover,.multi-option:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 60%, var(--line));box-shadow:0 8px 22px color-mix(in srgb,var(--accent2) 18%, transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 14%, transparent),color-mix(in srgb,var(--surface) 84%, transparent));color:var(--text)}
.primary-btn svg{width:16px;height:16px}
.row-link:hover,.writeup-link:hover{outline:1px solid color-mix(in srgb,var(--accent2) 42%, transparent);outline-offset:1px}
.primary-btn:hover,#swalDownload:hover{border-color:color-mix(in srgb,#3D9CDF 72%,var(--line));box-shadow:0 10px 30px color-mix(in srgb,#3D9CDF 28%,transparent);background:linear-gradient(135deg,color-mix(in srgb,#3D9CDF 88%,#111),color-mix(in srgb,#3D9CDF 66%,var(--accent2) 16%))}
.row-btn:hover{background:linear-gradient(135deg,color-mix(in srgb,#1f2031 85%,#13d3ff 15%),color-mix(in srgb,#131a28 80%,#8ef0ff 20%));border-color:color-mix(in srgb,#13d3ff 40%,transparent);box-shadow:0 4px 16px color-mix(in srgb,#13d3ff 15%,transparent);color:#edf3ff;transform:translateY(-1px)}
.row-btn:active{transform:translateY(0);box-shadow:0 2px 8px color-mix(in srgb,#13d3ff 10%,transparent)}
.primary-btn[disabled],.primary-btn.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none;filter:saturate(.7)}
:is(button,[role="button"],.nav-link,.ghost-btn,.primary-btn,.row-btn,.row-link,.icon-btn,.theme-trigger,.writeup-link,.multi-trigger,.multi-option,.social-link,.lang-trigger,.swal2-title,.submit-writeup,.table-thead th,.lb-rank-num,.mk-pager-info,.lb-page-btn,.lb-page-ellipsis,.lb-sort-btn,.lb-period-trigger,.lb-score-info-btn){-webkit-user-select:none;user-select:none;caret-color:transparent}
:is(button,a,input:not(.vff-input):not(.submit-input),select,textarea,.icon-btn,.theme-trigger,.quick-link,.row-btn,.ghost-btn,.nav-link,.writeup-link):not(.vff-submit):focus-visible{outline:2px solid color-mix(in srgb,var(--accent2) 74%, transparent);outline-offset:2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent2) 18%, transparent)}
/* Wizard inputs + triggers: NO halo anywhere */
.submit-input:focus,.submit-input:focus-visible,.submit-input:hover,.multi-trigger:focus,.multi-trigger:focus-visible,.multi-trigger:hover{outline:0!important;box-shadow:none!important;transform:none!important}
.top-actions [data-tip],.multi-wrap [data-tip]{position:relative}
.top-actions [data-tip]:hover::after,.top-actions [data-tip]:focus-visible::after,.multi-wrap [data-tip]:hover::after,.multi-wrap [data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);padding:6px 9px;border-radius:9px;border:1px solid color-mix(in srgb,var(--accent) 32%, var(--line));background:color-mix(in srgb,var(--surface) 97%, transparent);font:600 10px 'Fira Code',monospace;color:var(--text2);white-space:nowrap;z-index:20;box-shadow:0 14px 28px var(--shadow),0 0 0 1px color-mix(in srgb,var(--accent2) 12%, transparent)}
.top-actions [data-tip]:hover::before,.top-actions [data-tip]:focus-visible::before,.multi-wrap [data-tip]:hover::before,.multi-wrap [data-tip]:focus-visible::before{content:"";position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:color-mix(in srgb,var(--surface) 97%, transparent);border-left:1px solid color-mix(in srgb,var(--accent) 24%, var(--line));border-top:1px solid color-mix(in srgb,var(--accent) 24%, var(--line));z-index:19}
.theme-trigger[data-tip]:hover::after,.theme-trigger[data-tip]:focus-visible::after,.theme-trigger[data-tip][data-tip-show="true"]::after{opacity:1;transform:translateX(-50%) translateY(0)}
.theme-trigger[data-tip]:hover::before,.theme-trigger[data-tip]:focus-visible::before,.theme-trigger[data-tip][data-tip-show="true"]::before{opacity:1;transform:translateX(-50%) translateY(0) rotate(45deg)}
.multi-wrap{position:relative}
.multi-panel{position:absolute;right:0;top:calc(100% + 6px);display:none;min-width:150px;padding:6px;border-radius:14px;border:1px solid color-mix(in srgb,var(--line) 76%, transparent);background:color-mix(in srgb,var(--surface) 98%, transparent);box-shadow:0 12px 28px var(--shadow)}
.multi-panel.open{display:grid;gap:6px;max-height:240px;overflow:auto}
.hero-strip{display:grid;grid-template-columns:1.32fr .68fr;gap:var(--space-2);align-items:stretch;margin-bottom:var(--space-2);position:relative;z-index:9;min-height:86px}
.hero-copy{display:grid;align-content:center;min-height:55px}
.hero-copy h2{margin:0;font:700 26px 'Rajdhani',sans-serif;line-height:1;min-height:26px}.hero-copy p{margin:8px 0 0;max-width:none;color:var(--text2);line-height:1.5;min-height:22px}
.stat-strip{min-height:72px}
.rules-hero p{max-width:none}
.rules-header{display:grid;grid-template-columns:1fr auto;align-items:start;gap:16px;margin-bottom:14px;padding-top:12px}
.rules-hero{min-width:0}
.rules-close,.rules-hero-close{position:relative;top:auto;right:auto;justify-self:end;align-self:start;width:30px;height:30px;border-radius:50%!important;border:1px solid color-mix(in srgb,var(--line) 50%,transparent)!important;background:color-mix(in srgb,var(--surface) 88%,transparent)!important;backdrop-filter:blur(8px);color:color-mix(in srgb,var(--text) 60%,transparent)!important;font-size:16px;padding:0!important;display:flex;align-items:center;justify-content:center;transition:color .16s,border-color .16s,background .16s,transform .16s}
.rules-close:hover,.rules-hero-close:hover{color:var(--text)!important;border-color:color-mix(in srgb,var(--accent2) 60%,var(--line))!important;background:color-mix(in srgb,var(--accent2) 12%,var(--surface))!important;transform:rotate(90deg)!important}
.lb-top{display:grid;gap:12px;margin-top:10px}
.lb-period{display:inline-flex;align-items:center;gap:0;border:1px solid color-mix(in srgb,var(--line) 65%,transparent);border-radius:11px;overflow:hidden;background:color-mix(in srgb,var(--card) 60%,transparent);padding:3px}
.lb-period-lbl{font:600 10px 'Fira Code',monospace;color:var(--soft);text-transform:uppercase;letter-spacing:.06em;margin-right:6px;white-space:nowrap;flex-shrink:0}
.lb-period-btn{padding:5px 13px;border-radius:8px;border:none;background:transparent;color:var(--text2);font:700 10px 'Fira Code',monospace;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:all .18s ease;white-space:nowrap}
.lb-period-btn.active{background:color-mix(in srgb,var(--accent) 16%,var(--surface));color:var(--accent);box-shadow:0 1px 6px color-mix(in srgb,var(--accent) 14%,transparent)}
.lb-period-btn:not(.active):hover{background:color-mix(in srgb,var(--card) 80%,transparent);color:var(--text)}
.lb-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lb-stat{border:1px solid color-mix(in srgb,var(--line) 72%,transparent);border-radius:12px;padding:10px 12px;background:linear-gradient(160deg,color-mix(in srgb,var(--card) 88%,transparent),color-mix(in srgb,var(--surface) 86%,transparent));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:border-color .18s ease,box-shadow .18s ease}
.lb-stat:hover{border-color:color-mix(in srgb,var(--accent2) 40%,transparent);box-shadow:0 6px 18px color-mix(in srgb,var(--shadow) 28%,transparent)}
.lb-stat b{display:block;font:700 20px/1 'Fira Code',monospace;color:var(--text);text-align:center}
.lb-stat span{display:block;margin-top:5px;font:600 10px 'Fira Code',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--text2);text-align:center}
.lb-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lb-controls .submit-input{flex:1;min-width:160px}
.lb-sort-row{display:flex;align-items:center;gap:5px;flex-shrink:0}
.lb-sort-lbl{font:600 10px 'Fira Code',monospace;color:var(--soft);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.lb-sort-btn{padding:5px 11px;border-radius:8px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:color-mix(in srgb,var(--card) 82%,transparent);color:var(--text2);font:700 10px 'Fira Code',monospace;letter-spacing:.04em;cursor:pointer;transition:all .16s ease;white-space:nowrap}
.lb-sort-btn.active{border-color:color-mix(in srgb,var(--accent2) 56%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 14%,transparent),color-mix(in srgb,var(--accent) 8%,transparent));color:var(--text)}
.lb-sort-btn:not(.active):hover{border-color:color-mix(in srgb,var(--accent2) 36%,transparent);color:var(--text)}
.lb-podium-wrap{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin:0 0 20px;min-height:280px}
.lb-podium-slot{display:flex;flex-direction:column;align-items:center;width:200px;position:relative;animation:lb-rise .48s var(--ease-premium) backwards}
.lb-podium-slot.rank1{z-index:2;animation-delay:.05s}
.lb-podium-slot.rank2{z-index:1;animation-delay:.18s}
.lb-podium-slot.rank3{z-index:1;animation-delay:.28s}
@keyframes lb-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.lb-pcrown{font-size:26px;line-height:1;margin-bottom:8px;filter:drop-shadow(0 0 10px color-mix(in srgb,#ffd166 70%,transparent));animation:lb-float 3s ease-in-out infinite}
.lb-pmedal{font-size:20px;line-height:1;margin-bottom:8px}
@keyframes lb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.lb-pcard{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid color-mix(in srgb,var(--line2) 70%,transparent);border-radius:18px;padding:16px 14px 14px;width:100%;transition:transform .2s ease,box-shadow .2s ease}
.lb-pcard::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% -5%,color-mix(in srgb,currentColor 18%,transparent),transparent 58%);pointer-events:none}
.lb-pcard::after{content:"";position:absolute;top:0;left:-130%;width:90%;height:100%;background:linear-gradient(100deg,transparent,color-mix(in srgb,#fff 10%,transparent),transparent);transform:skewX(-18deg);opacity:0;pointer-events:none}
@media (hover:hover){.lb-pcard:hover{transform:translateY(-3px)}.lb-pcard:hover::after{animation:statSheen .7s ease}}
.lb-podium-slot.rank1 .lb-pcard{background:linear-gradient(160deg,color-mix(in srgb,#ffd166 10%,var(--surface)),color-mix(in srgb,var(--card) 92%,transparent));border-color:color-mix(in srgb,#ffd166 34%,var(--line));box-shadow:0 0 28px color-mix(in srgb,#ffd166 9%,transparent),0 10px 24px color-mix(in srgb,var(--shadow) 40%,transparent),inset 0 1px 0 color-mix(in srgb,#ffd166 14%,transparent);color:#e6bb58}
.lb-podium-slot.rank2 .lb-pcard{background:linear-gradient(160deg,color-mix(in srgb,#8ecae6 7%,var(--surface)),color-mix(in srgb,var(--card) 90%,transparent));border-color:color-mix(in srgb,#8ecae6 28%,var(--line));box-shadow:0 0 14px color-mix(in srgb,#8ecae6 7%,transparent),0 8px 18px color-mix(in srgb,var(--shadow) 32%,transparent);color:#7fb8d4}
.lb-podium-slot.rank3 .lb-pcard{background:linear-gradient(160deg,color-mix(in srgb,#f4a261 7%,var(--surface)),color-mix(in srgb,var(--card) 90%,transparent));border-color:color-mix(in srgb,#f4a261 28%,var(--line));box-shadow:0 0 14px color-mix(in srgb,#f4a261 7%,transparent),0 8px 18px color-mix(in srgb,var(--shadow) 32%,transparent);color:#d9905a}
.lb-pavatar{width:52px;height:52px;border-radius:999px;display:flex;align-items:center;justify-content:center;font:700 16px 'Fira Code',monospace;color:var(--text);border:2px solid color-mix(in srgb,currentColor 52%,transparent);background:color-mix(in srgb,currentColor 14%,var(--surface));box-shadow:0 0 18px color-mix(in srgb,currentColor 22%,transparent);margin-bottom:10px;position:relative;z-index:1}
.lb-podium-slot.rank2 .lb-pavatar,.lb-podium-slot.rank3 .lb-pavatar{width:42px;height:42px;font-size:13px}
.lb-pname{font:700 14px/1.2 'Rajdhani',sans-serif;color:var(--text);margin-bottom:6px;position:relative;z-index:1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-podium-slot.rank2 .lb-pname,.lb-podium-slot.rank3 .lb-pname{font-size:12px}
.lb-ppts{font:700 12px 'Fira Code',monospace;color:currentColor;margin-bottom:3px;position:relative;z-index:1}
.lb-pmeta{font:500 10px 'Fira Code',monospace;color:var(--text2);position:relative;z-index:1}
.lb-platform{width:100%;border-radius:12px 12px 0 0;display:flex;align-items:center;justify-content:center;font:700 20px/1 'Fira Code',monospace;margin-top:10px}
.lb-podium-slot.rank1 .lb-platform{height:80px;background:linear-gradient(180deg,color-mix(in srgb,#ffd166 14%,var(--card)),color-mix(in srgb,#ffd166 5%,var(--surface)));border:1px solid color-mix(in srgb,#ffd166 24%,var(--line));border-bottom:none;color:#e6bb58;box-shadow:0 -4px 14px color-mix(in srgb,#ffd166 7%,transparent)}
.lb-podium-slot.rank2 .lb-platform{height:55px;background:linear-gradient(180deg,color-mix(in srgb,#8ecae6 11%,var(--card)),color-mix(in srgb,#8ecae6 4%,var(--surface)));border:1px solid color-mix(in srgb,#8ecae6 20%,var(--line));border-bottom:none;color:#7fb8d4}
.lb-podium-slot.rank3 .lb-platform{height:38px;background:linear-gradient(180deg,color-mix(in srgb,#f4a261 11%,var(--card)),color-mix(in srgb,#f4a261 4%,var(--surface)));border:1px solid color-mix(in srgb,#f4a261 20%,var(--line));border-bottom:none;color:#d9905a}
.lb-rank-num{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:8px;font:700 12px 'Fira Code',monospace;color:var(--text2);background:color-mix(in srgb,var(--card) 80%,transparent);border:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.lb-rank-num.r1{background:color-mix(in srgb,#ffd166 16%,transparent);color:#ffd166;border-color:color-mix(in srgb,#ffd166 38%,transparent)}
.lb-rank-num.r2{background:color-mix(in srgb,#8ecae6 14%,transparent);color:#8ecae6;border-color:color-mix(in srgb,#8ecae6 34%,transparent)}
.lb-rank-num.r3{background:color-mix(in srgb,#f4a261 14%,transparent);color:#f4a261;border-color:color-mix(in srgb,#f4a261 34%,transparent)}
.lb-pts-bar-wrap{height:3px;border-radius:999px;background:color-mix(in srgb,var(--line) 40%,transparent);margin-top:5px;width:100%;min-width:48px}
.lb-pts-bar{height:100%;border-radius:999px;background:color-mix(in srgb,var(--accent2) 50%,transparent);transition:width .4s var(--ease-premium)}
.lb-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;font:700 9px 'Fira Code',monospace;letter-spacing:.04em;margin-left:5px;vertical-align:middle}
.lb-pts-legend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.lb-legend-item{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--line) 60%,transparent);background:color-mix(in srgb,var(--surface) 80%,transparent);font-size:11px}
.lb-legend-icon{font-size:13px;line-height:1}
.lb-legend-label{color:var(--soft);font-family:'Inter',sans-serif;font-weight:500}
.lb-legend-pts{color:var(--accent);font:700 11px 'Fira Code',monospace;margin-left:2px}
.opt-count{color:var(--soft);font:500 10px 'Fira Code',monospace;margin-left:3px}
.lb-badge-top{background:color-mix(in srgb,#ffd166 12%,transparent);color:#ffd166;border:1px solid color-mix(in srgb,#ffd166 28%,transparent)}
.lb-badge-root{background:color-mix(in srgb,#ff6f7f 12%,transparent);color:#ff6f7f;border:1px solid color-mix(in srgb,#ff6f7f 28%,transparent)}
.lb-badge-user{background:color-mix(in srgb,#6fe271 12%,transparent);color:#6fe271;border:1px solid color-mix(in srgb,#6fe271 28%,transparent)}
.lb-empty-pod{text-align:center;padding:40px;color:var(--soft);font:600 13px 'Fira Code',monospace;border:1px dashed color-mix(in srgb,var(--line) 50%,transparent);border-radius:16px;margin:20px 0;align-self:center;width:100%}
@media (max-width:980px){.lb-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.lb-podium-wrap{gap:8px;min-height:230px}.lb-podium-slot{width:calc(33.33vw - 24px);max-width:190px}.lb-podium-slot.rank1 .lb-platform{height:64px}.lb-podium-slot.rank2 .lb-platform{height:44px}.lb-podium-slot.rank3 .lb-platform{height:30px}.lb-controls{flex-direction:column;align-items:stretch}.lb-sort-row{flex-wrap:wrap}}
@media (max-width:600px){.lb-podium-wrap{gap:5px}.lb-pname{font-size:11px}.lb-ppts,.lb-pmeta{font-size:9px}.lb-pavatar{width:36px!important;height:36px!important;font-size:12px!important}}
/* ── lb v2: hero bar ─────────────────────────────────────────── */
.lb-hero-bar{display:flex;align-items:center;justify-content:center;gap:20px;padding:10px 18px;margin-top:-10px;margin-bottom:18px;border-radius:16px;border:1px solid color-mix(in srgb,var(--accent2) 28%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 10%,var(--surface)),color-mix(in srgb,var(--card) 92%,transparent));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent),0 4px 20px color-mix(in srgb,var(--shadow) 36%,transparent)}
.lb-hero-stats{display:flex;align-items:center;gap:0;justify-content:center}
.lb-hero-stat{display:flex;flex-direction:column;align-items:center;padding:0 16px}
.lb-hero-stat b{display:block;font:700 20px/1 'Fira Code',monospace;color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums;animation:lb-rise .42s var(--ease-premium) backwards}
.lb-hero-stat:nth-child(1) b{animation-delay:.04s;color:var(--accent2)}
.lb-hero-stat:nth-child(3) b{animation-delay:.08s}
.lb-hero-stat:nth-child(5) b{animation-delay:.12s}
.lb-hero-stat:nth-child(7) b{animation-delay:.16s}
.lb-hero-stat:nth-child(9) b{animation-delay:.20s;color:color-mix(in srgb,#ffd166 85%,var(--text))}
.lb-hero-stat span{display:block;margin-top:3px;font:600 9px 'Fira Code',monospace;text-transform:uppercase;letter-spacing:.09em;color:var(--soft);white-space:nowrap}
.lb-hero-sep{width:1px;height:26px;background:color-mix(in srgb,var(--line) 55%,transparent);flex-shrink:0}
/* ── lb v2: period dropdown ──────────────────────────────────── */
.lb-period-wrap{position:relative;flex-shrink:0}
.lb-period-trigger{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:90px;padding:5px 10px;border-radius:8px;border:1px solid color-mix(in srgb,var(--brand-blue) 40%,transparent);background:linear-gradient(135deg,color-mix(in srgb,#1f2031 85%,var(--brand-blue) 15%),color-mix(in srgb,#131a28 80%,var(--brand-blue) 20%));color:#edf3ff;font:700 10px 'Fira Code',monospace;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:all .18s ease;white-space:nowrap}
.lb-period-trigger:hover,.lb-period-trigger.open{border-color:color-mix(in srgb,var(--brand-blue) 60%,transparent);box-shadow:0 4px 14px color-mix(in srgb,var(--brand-blue) 14%,transparent);transform:translateY(-1px)}
.lb-period-trigger.open .lb-period-chevron{transform:rotate(180deg)}
.lb-period-chevron{transition:transform .2s ease;flex-shrink:0;opacity:.6}
.lb-period-dropdown{position:absolute;top:calc(100% + 8px);right:0;z-index:200;width:218px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 98%,#000),color-mix(in srgb,var(--card) 94%,#000));border:1px solid color-mix(in srgb,var(--accent2) 28%,var(--line));border-radius:14px;padding:8px;box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb,var(--accent2) 6%,transparent);animation:lb-drop-in .18s var(--ease-premium)}
@keyframes lb-drop-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.lb-yp-quick{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:2px}
.lb-yp-qbtn{padding:7px 4px;border-radius:8px;border:1px solid color-mix(in srgb,var(--line) 40%,transparent);background:transparent;color:var(--text2);font:600 10px 'Fira Code',monospace;cursor:pointer;transition:all .14s ease;text-align:center;white-space:nowrap}
.lb-yp-qbtn:hover{background:color-mix(in srgb,var(--card) 80%,transparent);color:var(--text)}
.lb-yp-qbtn.active{background:linear-gradient(90deg,color-mix(in srgb,var(--brand-blue) 18%,transparent),color-mix(in srgb,var(--brand-blue) 10%,transparent));border-color:color-mix(in srgb,var(--brand-blue) 50%,transparent);color:var(--brand-blue)}
.lb-yp-divider{height:1px;background:color-mix(in srgb,var(--line) 40%,transparent);margin:8px 2px 4px}
.lb-yp-nav{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 6px;gap:4px}
.lb-yp-arrow{width:26px;height:26px;border-radius:7px;border:1px solid color-mix(in srgb,var(--line) 40%,transparent);background:transparent;color:var(--text2);font:700 16px/1 sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .14s ease;flex-shrink:0}
.lb-yp-arrow:hover:not(:disabled){background:color-mix(in srgb,var(--card) 80%,transparent);color:var(--text);border-color:color-mix(in srgb,var(--brand-blue) 40%,transparent)}
.lb-yp-arrow:disabled{opacity:.25;cursor:default}
.lb-yp-range{font:700 11px 'Fira Code',monospace;color:var(--text);text-align:center;flex:1;letter-spacing:.02em}
.lb-yp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:0 2px 2px}
.lb-yp-yr{padding:8px 2px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--text2);font:600 11px 'Fira Code',monospace;cursor:pointer;transition:all .14s ease;text-align:center}
.lb-yp-yr:hover:not(:disabled){background:color-mix(in srgb,var(--card) 80%,transparent);color:var(--text);border-color:color-mix(in srgb,var(--line) 40%,transparent)}
.lb-yp-yr.active{background:linear-gradient(135deg,color-mix(in srgb,var(--brand-blue) 22%,transparent),color-mix(in srgb,var(--brand-blue) 12%,transparent));border-color:color-mix(in srgb,var(--brand-blue) 55%,transparent);color:var(--brand-blue);font-weight:700}
.lb-yp-yr.dim{opacity:.28}
.lb-yp-yr:disabled{cursor:default}
/* ── lb v2: controls & unified buttons ───────────────────────── */
.rules-header:has(#leaderboardTitle){position:relative}
.rules-header:has(#leaderboardTitle) .rules-close{position:absolute;right:0;top:50%;transform:translateY(-50%)}
/* Preserve vertical centering on hover (override global ghost-btn:hover translateY(-1px) + .rules-close:hover rotate(90deg)) */
.rules-header:has(#leaderboardTitle) .rules-close:hover{transform:translateY(-50%) rotate(90deg)!important}
#leaderboardTitle{font:700 28px/1 'Rajdhani',sans-serif;text-align:left;display:block}
.lb-controls{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;margin-bottom:12px;position:relative;z-index:20;padding-left:10px;padding-right:10px}
.lb-sort-btn,.lb-score-info-btn{width:90px;display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:8px;border:1px solid color-mix(in srgb,var(--brand-blue) 40%,transparent);background:linear-gradient(135deg,color-mix(in srgb,#1f2031 85%,var(--brand-blue) 15%),color-mix(in srgb,#131a28 80%,var(--brand-blue) 20%));color:#edf3ff;font:700 10px 'Fira Code',monospace;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:all .16s ease;white-space:nowrap;gap:4px}
.lb-sort-btn:hover,.lb-score-info-btn:hover{border-color:color-mix(in srgb,var(--brand-blue) 60%,transparent);box-shadow:0 4px 14px color-mix(in srgb,var(--brand-blue) 14%,transparent);transform:translateY(-1px)}
.lb-sort-btn.active{border-color:var(--brand-blue);background:linear-gradient(135deg,color-mix(in srgb,var(--brand-blue) 22%,#0d1929),color-mix(in srgb,var(--brand-blue) 14%,#0d1929));color:var(--brand-blue);box-shadow:0 0 0 1px color-mix(in srgb,var(--brand-blue) 28%,transparent)}
/* ── lb v2: score tooltip ────────────────────────────────────── */
.lb-score-info-btn{position:relative}
.lb-tip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(5px);background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,#000),color-mix(in srgb,var(--card) 90%,#000));border:1px solid color-mix(in srgb,var(--accent2) 35%,transparent);border-radius:8px;padding:6px 12px;font:500 10px 'Fira Code',monospace;text-transform:none;letter-spacing:.03em;color:color-mix(in srgb,var(--text) 85%,transparent);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;box-shadow:0 6px 20px rgba(0,0,0,.45);z-index:300}
.lb-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:color-mix(in srgb,var(--accent2) 35%,transparent)}
.lb-score-info-btn:hover .lb-tip{opacity:1;transform:translateX(-50%) translateY(0)}
/* ── lb v2: search ───────────────────────────────────────────── */
.lb-search{flex:1;min-width:120px;height:25px;padding:0 10px;border-radius:8px;border:1px solid color-mix(in srgb,var(--brand-blue) 30%,transparent);background:linear-gradient(135deg,color-mix(in srgb,#1f2031 85%,var(--brand-blue) 15%),color-mix(in srgb,#131a28 80%,var(--brand-blue) 20%));color:#edf3ff;font:400 11px 'Fira Code',monospace;outline:none;transition:border-color .18s ease;box-shadow:none}
.lb-search:focus{border-color:color-mix(in srgb,var(--brand-blue) 56%,var(--line));box-shadow:none!important;outline:none!important}
.lb-search:focus-visible{box-shadow:none!important;outline:none!important}
.lb-search::placeholder{color:color-mix(in srgb,#edf3ff 40%,transparent)}
/* ── lb v2: paginator ────────────────────────────────────────── */
.lb-paginator{display:flex;align-items:center;justify-content:center;gap:4px;padding:14px 10px 4px;flex-wrap:wrap;border:1px solid color-mix(in srgb,var(--brand-blue) 30%,transparent);border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 34%,transparent),color-mix(in srgb,var(--surface) 24%,transparent))}
.lb-page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border-radius:10px;border:1px solid color-mix(in srgb,var(--brand-blue) 28%,var(--line));background:color-mix(in srgb,var(--card) 84%,transparent);color:var(--text2);font:700 11px 'Fira Code',monospace;cursor:pointer;transition:transform var(--motion-fast) var(--ease-premium),border-color var(--motion-fast) var(--ease-premium),box-shadow var(--motion-mid) var(--ease-premium),background var(--motion-fast) var(--ease-premium),color var(--motion-fast) var(--ease-premium);user-select:none}
.lb-page-btn:not(:disabled):hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--brand-blue) 58%,var(--line));box-shadow:0 8px 22px color-mix(in srgb,var(--brand-blue) 16%,transparent);color:var(--text);background:linear-gradient(135deg,color-mix(in srgb,var(--brand-blue) 14%,transparent),color-mix(in srgb,var(--surface) 84%,transparent))}
.lb-page-btn.active{border-color:color-mix(in srgb,var(--brand-blue) 62%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--brand-blue) 18%,transparent),color-mix(in srgb,var(--surface) 86%,transparent));color:#edf3ff;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 5%,transparent);cursor:default}
.lb-page-btn:disabled{opacity:.3;cursor:not-allowed}
.lb-page-nav{font-size:18px;padding:0 10px;line-height:1}
.lb-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:32px;color:var(--soft);font:600 13px 'Fira Code',monospace;user-select:none}
/* ── lb v2: sortable headers ─────────────────────────────────── */
th[data-sortcol]{cursor:pointer;user-select:none;transition:color .14s ease;white-space:nowrap}
th[data-sortcol]:hover{color:var(--text2)}
th[data-sortcol].sort-active{color:var(--accent2)}
.sort-ind{font-size:8px;margin-left:3px;opacity:.8;display:inline-block;min-width:8px}
/* ── lb v2: champion row ─────────────────────────────────────── */
body.leaderboard-page .lb-table tbody tr:not(.lb-row-champion):nth-child(even){background:linear-gradient(90deg,color-mix(in srgb,var(--brand-blue) 3%,transparent),color-mix(in srgb,var(--surface) 14%,transparent))}
.lb-row-champion{background:linear-gradient(90deg,color-mix(in srgb,#ffd166 8%,transparent),color-mix(in srgb,var(--surface) 90%,transparent))}
.lb-table tbody tr:not(.lb-row-champion):hover{background:linear-gradient(90deg,color-mix(in srgb,var(--brand-blue) 6%,color-mix(in srgb,#fff 4%,transparent)),color-mix(in srgb,var(--surface) 92%,transparent) 56%,color-mix(in srgb,var(--surface) 88%,transparent))}
.lb-row-champion:hover{background:linear-gradient(90deg,color-mix(in srgb,#ffd166 13%,transparent),color-mix(in srgb,var(--accent2) 5%,transparent))!important}
.lb-row-anim{animation:lb-row-fadein .22s ease-out both}
@keyframes lb-row-fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.lb-pts-bar-wrap{height:6px}
.lb-bar-champion{background:linear-gradient(90deg,color-mix(in srgb,#ffd166 60%,transparent),color-mix(in srgb,#ffe799 80%,transparent),color-mix(in srgb,#ffd166 60%,transparent))!important;background-size:200% 100%!important;animation:lb-bar-shine 2.4s ease infinite}
@keyframes lb-bar-shine{0%{background-position:200% center}100%{background-position:-200% center}}
/* ── lb v2: score modal ──────────────────────────────────────── */
.swal-score-popup{background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 96%,#000) 0%,color-mix(in srgb,var(--card) 93%,#000) 50%,color-mix(in srgb,var(--surface) 95%,#000) 100%)!important;border:1px solid color-mix(in srgb,var(--accent2) 20%,transparent)!important;border-radius:22px!important;padding:0!important;overflow:hidden!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent2) 6%,transparent),0 40px 100px rgba(0,0,0,.7)!important;font-family:'Inter',system-ui,sans-serif!important}
.swal-custom-close{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;margin-left:auto;border-radius:50%;border:1px solid color-mix(in srgb,var(--line) 90%,transparent);background:transparent;color:var(--soft);cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease}
.swal-custom-close svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.swal-custom-close:hover{border-color:color-mix(in srgb,var(--accent2) 55%,transparent);color:var(--text);background:color-mix(in srgb,var(--accent2) 8%,transparent)}
.swal-custom-close:hover svg{transform:rotate(90deg)}
.swal-top-bar{height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),#6fe271,#ffd166);background-size:300% 100%;animation:swal-bar-slide 4s linear infinite}
@keyframes swal-bar-slide{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.swal-score-header{display:flex;align-items:center;gap:16px;padding:22px 24px 0;text-align:left}
.swal-score-trophy{font-size:44px;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 16px rgba(255,209,102,.6)) drop-shadow(0 0 36px rgba(255,209,102,.3))}
.swal-score-title{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.02em;line-height:1.1}
.swal-score-tagline{font-size:12px;color:var(--soft);margin-top:5px;line-height:1.4}
.swal-score-tagline em{color:var(--accent2);font-style:normal;font-weight:600}
.swal-score-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:20px 28px 0}
.swal-score-card{border-radius:14px;padding:18px 12px;text-align:center;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;align-items:center}
.swal-score-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.swal-score-card.blood-user{border-color:rgba(255,111,127,.25);background:linear-gradient(160deg,rgba(255,111,127,.1),rgba(255,111,127,.03))}
.swal-score-card.blood-root{border-color:rgba(237,28,36,.25);background:linear-gradient(160deg,rgba(237,28,36,.1),rgba(237,28,36,.03))}
.swal-score-card.vm-submit{border-color:color-mix(in srgb,var(--accent2) 25%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--accent2) 10%,transparent),color-mix(in srgb,var(--accent2) 3%,transparent))}
.swal-score-card.writeup{border-color:rgba(111,226,113,.25);background:linear-gradient(160deg,rgba(111,226,113,.1),rgba(111,226,113,.03))}
.swal-score-icon{font-size:24px;margin-bottom:10px;line-height:1}
.swal-score-name{font-size:12px;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.2}
.swal-score-desc{font-size:10px;color:var(--soft);margin-bottom:12px;line-height:1.4;flex:1}
.swal-score-pts{font-family:'Fira Code',monospace;font-size:26px;font-weight:700;color:var(--accent2);letter-spacing:-.02em}
.swal-score-card.blood-user .swal-score-pts{color:#ff6f7f}
.swal-score-card.blood-root .swal-score-pts{color:#ff4e57}
.swal-score-card.writeup .swal-score-pts{color:#6fe271}
.swal-score-pts span{font-size:11px;font-weight:400;opacity:.6;margin-left:1px}
.swal-score-combo{display:flex;align-items:center;gap:10px;margin:16px 28px 0;padding:12px 16px;border-radius:10px;background:linear-gradient(90deg,rgba(255,209,102,.07),rgba(255,209,102,.03));border:1px solid rgba(255,209,102,.18);flex-wrap:wrap}
.swal-combo-label{font-size:11px;font-weight:700;color:#ffd166;letter-spacing:.02em}
.swal-combo-calc{font:500 11px 'Fira Code',monospace;color:var(--soft);margin-left:auto}
.swal-combo-result{font:700 14px 'Fira Code',monospace;color:#ffd166}
.swal-score-note{font-size:11px;color:var(--soft);padding:14px 16px;margin:14px 28px 28px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);text-align:left;line-height:1.6}
/* ── lb v2: responsive ───────────────────────────────────────── */
@media (max-width:980px){.lb-hero-stats{flex-wrap:wrap;gap:8px}.lb-hero-sep{display:none}.lb-hero-stat{padding:0 12px}.swal-score-grid{grid-template-columns:repeat(2,1fr)}.lb-controls{flex-wrap:wrap}}
@media (max-width:600px){.lb-search{order:10;width:100%;flex-basis:100%}.swal-score-grid{grid-template-columns:1fr 1fr}}
.stat-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;justify-content:stretch}
.stat-card{position:relative;overflow:hidden;display:grid;place-items:center;text-align:center;border:1px solid color-mix(in srgb,currentColor 60%,transparent);border-radius:14px;padding:6px;background:var(--card);min-height:62px;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 9%,transparent),0 4px 16px color-mix(in srgb,currentColor 14%,transparent)}
.stat-card span{display:block;font:600 9px 'Fira Code',monospace;text-transform:uppercase;letter-spacing:.07em;text-align:center;overflow-wrap:break-word;word-break:break-word;min-width:0;line-height:1.3;padding:0 2px}
.stat-card strong{display:block;margin-top:1px;font:700 18px/1 'Fira Code',monospace;text-align:center;min-width:0;overflow-wrap:break-word}
.stat-strip .stat-card{opacity:0;transform:translateY(8px) scale(.985)}
.stat-strip.is-ready .stat-card{opacity:1;transform:translateY(0) scale(1);transition:transform .2s var(--ease-premium),opacity .36s ease,box-shadow var(--motion-mid) var(--ease-premium),border-color var(--motion-fast) var(--ease-premium),background var(--motion-fast) var(--ease-premium)}
.stat-strip.stat-strip--quiet .stat-card,
.stat-strip.stat-strip--quiet.is-ready .stat-card{opacity:1;transform:none;transition:none}
.stat-strip.is-ready .stat-card:nth-child(1){transition-delay:.03s}
.stat-strip.is-ready .stat-card:nth-child(2){transition-delay:.07s}
.stat-strip.is-ready .stat-card:nth-child(3){transition-delay:.11s}
.stat-strip.is-ready .stat-card:nth-child(4){transition-delay:.15s}
.stat-strip.is-ready .stat-card:nth-child(5){transition-delay:.19s}
.stat-strip.is-ready .stat-card:nth-child(6){transition-delay:.23s}
.stat-card,.toolbar,.page-card,.submit-panel,.dialog,.meta-box,.writeup-item,.writeup-card,.rules-section,.submit-field,.form-field{transition:transform var(--motion-fast) var(--ease-premium),box-shadow var(--motion-mid) var(--ease-premium),border-color var(--motion-fast) var(--ease-premium),background var(--motion-fast) var(--ease-premium)}
@media (hover:hover){.page-card:hover,.submit-panel:hover{transform:translateY(-2px);box-shadow:0 16px 34px color-mix(in srgb,var(--shadow) 68%, transparent)}}
.stat-card::before{content:"";position:absolute;inset:-30% -20%;background:radial-gradient(circle at 30% 20%,color-mix(in srgb,currentColor 18%,transparent),transparent 55%);opacity:0;transition:opacity .24s ease;pointer-events:none}
.stat-card::after{content:"";position:absolute;top:0;left:-135%;width:95%;height:100%;background:linear-gradient(100deg,transparent,color-mix(in srgb,#fff 14%,transparent),transparent);transform:skewX(-18deg);opacity:.55;pointer-events:none}
@media (hover:hover){.stat-card:hover::before{opacity:1}.stat-card:hover::after{animation:statSheen .72s ease}}
@media (hover:hover){.stat-card:hover{background:linear-gradient(145deg,color-mix(in srgb,currentColor 62%,#000),color-mix(in srgb,currentColor 44%,#000));border-color:currentColor;box-shadow:0 10px 24px color-mix(in srgb,currentColor 32%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 16%,transparent);transform:translateY(-2px)}}
@keyframes statSheen{from{left:-135%}to{left:145%}}
.stat-machines{color:#38bdf8;background:linear-gradient(145deg,color-mix(in srgb,#38bdf8 28%,#000),color-mix(in srgb,#38bdf8 16%,#000))}
.stat-writeups{color:#f472b6;background:linear-gradient(145deg,color-mix(in srgb,#f472b6 28%,#000),color-mix(in srgb,#f472b6 16%,#000))}
.stat-creators{color:#c084fc;background:linear-gradient(145deg,color-mix(in srgb,#c084fc 28%,#000),color-mix(in srgb,#c084fc 16%,#000))}
.stat-linux{color:#4ade80;background:linear-gradient(145deg,color-mix(in srgb,#4ade80 28%,#000),color-mix(in srgb,#4ade80 16%,#000))}
.stat-windows{color:#ff6b6b;background:linear-gradient(145deg,color-mix(in srgb,#ff6b6b 28%,#000),color-mix(in srgb,#ff6b6b 16%,#000))}
.stat-recent{color:#fbbf24;background:linear-gradient(145deg,color-mix(in srgb,#fbbf24 28%,#000),color-mix(in srgb,#fbbf24 16%,#000))}

.toolbar,.table-panel,.page-card,.submit-panel{margin-top:var(--space-2);border-radius:18px;padding:var(--space-2)}
.catalog-layout,.table-panel{container-type:inline-size}
/* Reserve vertical space before async data hydrates — kills CLS shift */
.catalog-layout{min-height:640px}
.table-wrap{min-height:400px}
.toolbar{display:grid;gap:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%, transparent),color-mix(in srgb,var(--card) 82%, transparent));position:relative;z-index:8}
.filters-grid{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:10px;align-items:end}
.field{min-width:0}
.field label,.field .field-label{display:block;margin-bottom:6px;color:var(--soft);font:600 10px 'Fira Code',monospace;letter-spacing:.1em;text-transform:uppercase}
.field input,.field select,.multi-trigger{width:100%;height:40px;padding:0 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--line) 78%, transparent);background:color-mix(in srgb,var(--card) 88%, transparent);color:var(--text);outline:none;box-shadow:none;appearance:none;-webkit-appearance:none}
.field select,.field input,.multi-trigger{font-weight:500}
.field select{padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%);background-position:calc(100% - 18px) 17px,calc(100% - 13px) 17px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select option{background:var(--surface);color:var(--text)}
.field input::placeholder{font-size:11px;color:var(--soft)}
.field input:focus,.field select:focus,.multi-trigger:focus-visible{border-color:#3D9CDF;box-shadow:none}
.multi-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;text-align:left}
.multi-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.multi-caret{color:var(--soft);font-size:11px}
.multi-panel{left:0;right:0;top:calc(100% + 6px)}
.multi-panel{padding:6px;max-height:250px;overflow:auto;scrollbar-gutter:stable;z-index:14}
.panel-search{width:100%;padding:3px 9px;border:1px solid color-mix(in srgb,var(--line) 46%,transparent);border-radius:6px;background:color-mix(in srgb,var(--card) 60%,transparent);color:var(--text);font:500 11px 'Inter',sans-serif;outline:none;position:sticky;top:0;z-index:1}
.panel-search:focus,.panel-search:focus-visible{border-color:color-mix(in srgb,var(--accent) 32%,var(--line));outline:none;box-shadow:none}
.panel-search::placeholder{color:var(--text2);opacity:.6}
.multi-option{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 10px;border:none;border-radius:10px;background:transparent;font-size:12px;text-align:left;color:var(--text)}
.multi-option.active{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%, transparent),color-mix(in srgb,var(--accent2) 10%, transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%, transparent)}
.multi-check{opacity:.62;font-weight:700}
.multi-option.active .multi-check{opacity:1;color:var(--accent)}
.toolbar-actions{display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:36px;padding-top:2px;border-top:1px solid color-mix(in srgb,var(--line) 48%, transparent)}
.filter-summary{min-width:0;color:var(--text2);font-size:12px;line-height:1.5}
.filter-summary strong{color:var(--text);font-weight:600}
/* Oculta el bloque "active filters / clear all / quick filter" — filtros se aplican
   silenciosamente y el tamaño de la tabla no cambia */
.toolbar-actions, .filter-summary, #clearFilters, .toolbar-quick { display: none !important }
.table-panel{position:relative;border:1px solid color-mix(in srgb,var(--line) 82%, transparent);border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%, transparent),color-mix(in srgb,var(--card) 92%, transparent));box-shadow:0 24px 48px color-mix(in srgb,#000 35%, transparent);padding:10px;min-height:480px}
.table-wrap{display:block;max-width:100%;overflow-x:scroll;overflow-y:hidden;position:relative;scrollbar-width:auto;scrollbar-gutter:stable both-edges;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.table-wrap::after{content:"";position:sticky;right:0;top:0;float:right;width:24px;height:100%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 92%, transparent));pointer-events:none;z-index:4}
.table-wrap::-webkit-scrollbar{height:4px}
.table-wrap::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--line2) 60%, transparent);border-radius:999px}
.table-wrap::-webkit-scrollbar-track{background:transparent}
.table-wrap::-webkit-scrollbar-button{width:0;height:0;display:none}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:var(--row-py) var(--row-px);text-align:left;white-space:nowrap;border-bottom:1px solid color-mix(in srgb,var(--line) 40%, transparent);font-size:var(--cell-fs)}
th{position:sticky;top:0;z-index:3;background:color-mix(in srgb,var(--surface) 97%, transparent);color:var(--soft);font:600 10px 'Fira Code',monospace;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 1px 0 color-mix(in srgb,var(--line) 42%, transparent);user-select:none;cursor:default}
.table-thead.is-scrolled th{box-shadow:0 10px 16px color-mix(in srgb,#000 14%, transparent),0 1px 0 color-mix(in srgb,var(--line) 42%, transparent)}
.table-wrap.is-scrolled-x::after{opacity:1}
#headId,#headDiff,#headName,#headCreator{cursor:pointer;user-select:none}
#headPlatform,td:nth-child(7){min-width:110px}
#headPlatform{white-space:nowrap}
thead th:first-child{border-top-left-radius:12px}
thead th:last-child{border-top-right-radius:12px}
body.index-page .catalog-layout thead th,
body.leaderboard-page .lb-table thead th{
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand-blue) 5%,var(--surface)),color-mix(in srgb,var(--surface) 97%,transparent));
  border-top:1px solid color-mix(in srgb,var(--brand-blue) 22%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--brand-blue) 20%,var(--line));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 3%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--brand-blue) 7%,transparent);
  color:color-mix(in srgb,var(--text2) 92%,var(--text));
  transition:background var(--motion-fast) var(--ease-premium),border-color var(--motion-fast) var(--ease-premium),box-shadow var(--motion-mid) var(--ease-premium),color var(--motion-fast) var(--ease-premium)
}
body.index-page .catalog-layout thead th:first-child,
body.leaderboard-page .lb-table thead th:first-child{border-left:1px solid color-mix(in srgb,var(--brand-blue) 18%,transparent)}
body.index-page .catalog-layout thead th:last-child,
body.leaderboard-page .lb-table thead th:last-child{border-right:1px solid color-mix(in srgb,var(--brand-blue) 18%,transparent)}
body.index-page .catalog-layout #headId,
body.index-page .catalog-layout #headDiff,
body.index-page .catalog-layout #headName,
body.index-page .catalog-layout #headCreator,
body.leaderboard-page .lb-table th[data-sortcol]{
  transition:background var(--motion-fast) var(--ease-premium),border-color var(--motion-fast) var(--ease-premium),box-shadow var(--motion-mid) var(--ease-premium),color var(--motion-fast) var(--ease-premium)
}
body.index-page .catalog-layout #headId:hover,
body.index-page .catalog-layout #headDiff:hover,
body.index-page .catalog-layout #headName:hover,
body.index-page .catalog-layout #headCreator:hover,
body.leaderboard-page .lb-table th[data-sortcol]:hover{
  color:var(--text);
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand-blue) 8%,transparent),color-mix(in srgb,var(--surface) 88%,transparent));
  border-top-color:color-mix(in srgb,var(--brand-blue) 30%,transparent);
  border-bottom-color:color-mix(in srgb,var(--brand-blue) 32%,var(--line));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 4%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--brand-blue) 14%,transparent)
}
body.leaderboard-page .lb-table th[data-sortcol].sort-active{
  color:#edf3ff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand-blue) 10%,transparent),color-mix(in srgb,var(--surface) 89%,transparent));
  border-top-color:color-mix(in srgb,var(--brand-blue) 34%,transparent);
  border-bottom-color:color-mix(in srgb,var(--brand-blue) 38%,var(--line));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 4%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--brand-blue) 18%,transparent)
}
body.index-page .catalog-layout table,
body.index-page .catalog-layout thead th,
body.index-page .catalog-layout tbody td,
body.leaderboard-page .lb-table,
body.leaderboard-page .lb-table thead th,
body.leaderboard-page .lb-table tbody td{
  -webkit-user-select:none;
  user-select:none;
  caret-color:transparent
}
body.index-page .catalog-layout tbody td,
body.leaderboard-page .lb-table tbody td{cursor:default}
tbody tr{transition:background .18s ease,border-color .18s ease,opacity .16s ease,transform .16s ease}
tbody tr:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--accent2) 8%, transparent),color-mix(in srgb,var(--surface) 86%, transparent))}
/* row reveal scroll animation */
#rows tr.row-reveal{opacity:0;transform:translateY(4px)}
#rows tr.row-reveal.row-visible{opacity:1;transform:translateY(0)}
.table-center{text-align:center}
.lb-table th,.lb-table td{text-align:center;vertical-align:middle}
.os-cell,.compat-cell{display:flex;align-items:center;justify-content:center;gap:10px}
.meta-box .compat-cell{justify-content:flex-start;gap:6px}
.os-icon,.compat-icon{width:18px;height:18px;object-fit:contain;flex-shrink:0}
.mch-info-val .compat-icon{width:16px;height:16px}
.name-wrap strong{display:block;font-size:15px;line-height:1.2}
.name-wrap span{display:block;margin-top:6px;color:var(--text2);font-size:11px;line-height:1.5;max-width:72ch}
.name-pill{display:inline-flex;align-items:center;min-height:28px;padding:6px 10px;border-radius:10px;border:1px solid color-mix(in srgb,var(--line2) 54%, transparent);font-weight:700}
.name-pill.easy{background:linear-gradient(90deg,color-mix(in srgb,#9fef00 16%,transparent),transparent)}
.name-pill.low{background:linear-gradient(90deg,color-mix(in srgb,#58a6ff 16%,transparent),transparent)}
.name-pill.medium{background:linear-gradient(90deg,color-mix(in srgb,#ffaf00 16%,transparent),transparent)}
.name-pill.hard{background:linear-gradient(90deg,color-mix(in srgb,#C53030 22%,transparent),transparent)}
.difficulty{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:11px;border:1px solid color-mix(in srgb,var(--line) 76%, transparent);background:color-mix(in srgb,var(--card) 82%, transparent)}
.difficulty.easy{color:#9fef00;border-color:color-mix(in srgb,#9fef00 48%,transparent);background:color-mix(in srgb,#9fef00 9%,var(--card));box-shadow:0 0 10px color-mix(in srgb,#9fef00 18%,transparent)}
.difficulty.low{color:#58a6ff;border-color:color-mix(in srgb,#58a6ff 48%,transparent);background:color-mix(in srgb,#58a6ff 9%,var(--card));box-shadow:0 0 10px color-mix(in srgb,#58a6ff 18%,transparent)}
.difficulty.medium{color:#ffaf00;border-color:color-mix(in srgb,#ffaf00 48%,transparent);background:color-mix(in srgb,#ffaf00 9%,var(--card));box-shadow:0 0 10px color-mix(in srgb,#ffaf00 18%,transparent)}
.difficulty.hard{color:#FF8B8B;border-color:color-mix(in srgb,#C53030 58%,transparent);background:color-mix(in srgb,#C53030 12%,var(--card));box-shadow:0 0 12px color-mix(in srgb,#FF8B8B 18%,transparent)}
.creator-text,.first-blood-text{display:inline-block;max-width:100%;font:600 12px 'Inter',sans-serif;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.id-pill{display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:6px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--brand-blue) 30%,transparent);background:linear-gradient(135deg,color-mix(in srgb,#1f2031 85%,var(--brand-blue) 15%),color-mix(in srgb,#131a28 80%,var(--brand-blue) 20%));color:#edf3ff;font:700 10px 'Fira Code',monospace;transition:all 0.2s cubic-bezier(0.4,0.0,0.2,1);cursor:default}
.id-pill:hover{background:linear-gradient(135deg,color-mix(in srgb,#1f2031 85%,var(--brand-blue) 15%),color-mix(in srgb,#131a28 80%,var(--brand-blue) 20%));border-color:color-mix(in srgb,var(--brand-blue) 30%,transparent);color:#edf3ff;transform:translateY(-1px)}
.first-pill{display:inline-flex;align-items:center;justify-content:center;max-width:150px;padding:7px 10px;border-radius:999px;font:700 12px 'Fira Code',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.first-user{border:1px solid color-mix(in srgb,var(--accent) 52%,var(--line));background:color-mix(in srgb,var(--accent) 14%, transparent)}
.first-root{border:1px solid color-mix(in srgb,var(--v5-red) 56%,var(--line));background:color-mix(in srgb,var(--v5-red) 14%, transparent)}
.row-btn{text-align:center;justify-content:center;display:inline-flex;align-items:center;min-width:68px;padding:5px 12px;cursor:pointer}
.row-btn.js-open:hover{background:linear-gradient(135deg,color-mix(in srgb,#1f2031 85%,var(--brand-blue) 15%),color-mix(in srgb,#131a28 80%,var(--brand-blue) 20%));border-color:color-mix(in srgb,var(--brand-blue) 40%,transparent);color:#edf3ff;transform:translateY(-1px)}
.empty{text-align:center;padding:18px;border:1px dashed color-mix(in srgb,var(--line) 76%, transparent);border-radius:18px;color:var(--text2)}
.swal2-container.vn-swal-container{background:rgba(7,10,15,.72)!important;backdrop-filter:blur(10px) saturate(.85)!important;-webkit-backdrop-filter:blur(10px) saturate(.85)!important}
[data-theme="light"] .swal2-container.vn-swal-container{background:rgba(0,0,0,.54)!important;backdrop-filter:blur(10px) saturate(.85)!important;-webkit-backdrop-filter:blur(10px) saturate(.85)!important}
.swal2-popup.vn-swal-popup{background:color-mix(in srgb,var(--surface) 97%,transparent)!important;color:var(--text)!important;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))!important;border-radius:22px!important;box-shadow:0 28px 64px var(--shadow),0 0 0 1px color-mix(in srgb,var(--accent2) 10%,transparent)!important;font-family:'Inter',sans-serif!important;padding:20px!important;width:min(860px,calc(100vw - 32px))!important;max-width:min(860px,calc(100vw - 32px))!important;overflow-x:hidden!important}
.swal2-popup.vn-swal-popup .swal2-title{font:700 30px/1.08 'Rajdhani',sans-serif!important;color:var(--text)!important;margin:0!important;padding:0 44px 10px 0!important;text-align:left!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;caret-color:transparent;cursor:default}
.swal2-popup.vn-swal-popup .swal2-html-container{margin:0!important;padding:0!important;color:var(--text)!important;text-align:left!important;font-size:14px!important;overflow-x:hidden!important}
.swal2-popup.vn-swal-popup .swal2-close{color:color-mix(in srgb,var(--text) 60%,transparent)!important;font-size:16px!important;top:12px!important;right:12px!important;border:1px solid color-mix(in srgb,var(--line) 50%,transparent)!important;background:color-mix(in srgb,var(--surface) 88%,transparent)!important;backdrop-filter:blur(8px)!important;border-radius:50%!important;width:30px!important;height:30px!important;transition:color .16s,border-color .16s,background .16s,transform .16s!important;line-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;z-index:10!important;-webkit-user-select:none;user-select:none;caret-color:transparent}
.swal2-popup.vn-swal-popup .swal2-close:hover{color:var(--text)!important;border-color:color-mix(in srgb,var(--accent2) 60%,var(--line))!important;background:color-mix(in srgb,var(--accent2) 12%,var(--surface))!important;transform:rotate(90deg)!important}
.modal-card-hero{display:flex;margin:-20px -20px 0;min-height:180px;background:var(--bg);border-radius:20px 20px 0 0;overflow:hidden;flex-shrink:0}
.mch-left{flex:0 0 50%;display:flex;align-items:center;justify-content:center;padding:22px 14px 14px;border-right:1px solid color-mix(in srgb,var(--line) 20%,transparent);background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--accent) 9%,var(--bg)),var(--bg));overflow:hidden}
.mch-img{display:block;max-height:150px;max-width:100%;height:auto;width:auto;object-fit:contain;object-position:center center;filter:drop-shadow(0 6px 24px color-mix(in srgb,var(--accent) 32%,transparent));transition:transform .22s ease}
.mch-img:hover{transform:scale(1.04)}
.mch-right{flex:1;display:flex;flex-direction:column;justify-content:center;padding:18px 20px 12px 16px;overflow:hidden;min-width:0}
.mch-info-grid{display:flex;flex-direction:column;justify-content:space-between;gap:2px;flex:1 1 auto;min-height:144px;margin-top:10px}
.mch-info-row{display:flex;align-items:center;gap:10px;min-height:26px;padding:3px 6px;border-radius:6px;font-size:12px;line-height:1;overflow:hidden;transition:background .14s ease}
.mch-info-row:last-child{border-bottom:none}
.mch-info-lbl{color:var(--soft);width:68px;flex-shrink:0;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.mch-info-val{color:var(--text);font-weight:500;display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.mch-info-val .difficulty{font-size:10px!important;padding:1px 6px!important;height:auto;line-height:1.4}
.mch-info-val .compat-icon{width:15px;height:15px;opacity:.9}
.pts-root-badge{color:#fbbf24;font-weight:500;font-size:inherit;line-height:inherit}.pts-user-badge{color:var(--text2);font-size:inherit;line-height:inherit}.pts-sep{color:var(--soft);margin:0 2px}
.pts-root-badge.low,.pts-user-badge.low{color:#58a6ff}
.pts-root-badge.easy,.pts-user-badge.easy{color:#9fef00}
.pts-root-badge.medium,.pts-user-badge.medium{color:#ffaf00}
.pts-root-badge.hard,.pts-user-badge.hard{color:#FF8B8B}
/* Machine ID Card */
.card-trigger{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer;color:#2B8FFF;transition:color .18s ease,filter .18s ease;filter:drop-shadow(0 0 3px color-mix(in srgb,#2B8FFF 35%,transparent))}
.card-trigger:hover{color:#5AAFFF;filter:drop-shadow(0 0 6px color-mix(in srgb,#5AAFFF 50%,transparent))}
.card-trigger svg{display:block;stroke-width:1.5}
.vm-card{display:flex;flex-direction:column;max-width:100%;margin:0 auto;border-radius:18px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));background:linear-gradient(160deg,var(--surface),color-mix(in srgb,var(--card) 96%,var(--bg)));box-shadow:0 24px 60px color-mix(in srgb,#000 45%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 4%,transparent);overflow:hidden;font-family:'Inter',sans-serif}
.vm-card-bar{height:38px;background:color-mix(in srgb,var(--bg) 70%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 24%,transparent)}
.vm-card-bar:last-child{border-bottom:none;border-top:1px solid color-mix(in srgb,var(--line) 24%,transparent)}
.vm-card-name{font:700 42px/1.05 'Rajdhani',sans-serif;color:var(--text);margin:0;text-align:center;padding:18px 36px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vm-card-separator{--sep-color:var(--accent2);position:relative;height:1px;margin:12px 60px 0;background:radial-gradient(ellipse at center,var(--sep-color),transparent 70%)}.vm-card-separator::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30%;height:3px;border-radius:999px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--sep-color) 50%,transparent),transparent 80%);filter:blur(2px)}
.vm-card-main{display:flex;align-items:stretch;padding:20px 56px 28px;gap:0}
.vm-card-left{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:260px;padding-right:32px;border-right:1px solid color-mix(in srgb,var(--line) 24%,transparent)}
.vm-card-cube{display:block;width:220px;max-height:200px;object-fit:contain;filter:drop-shadow(0 10px 30px color-mix(in srgb,var(--accent) 24%,transparent))}
.vm-card-right{flex:1;min-width:0;display:flex;flex-direction:column;padding-left:32px;justify-content:flex-start;gap:7px}
.vm-card-row{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;box-sizing:border-box;border-radius:10px;background:color-mix(in srgb,var(--bg) 60%,transparent);border:1px solid color-mix(in srgb,var(--line) 28%,transparent);font-size:14px;color:var(--text)}
.vm-card-row--points{flex-wrap:nowrap;row-gap:4px;column-gap:6px}
.vm-card .difficulty{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 10px;font-size:inherit;line-height:1;font-weight:600}
.vm-card-row img{width:20px;height:20px;object-fit:contain}
.vm-card-lbl{color:var(--soft);font-weight:400;margin-right:2px;white-space:nowrap}
.vm-card-row strong{font-weight:600}
.vm-card-points-root,.vm-card-points-user{display:inline;white-space:nowrap;font:inherit}
.vm-card-points-root.low,.vm-card-points-user.low{color:#58a6ff}
.vm-card-points-root.easy,.vm-card-points-user.easy{color:#9fef00}
.vm-card-points-root.medium,.vm-card-points-user.medium{color:#ffaf00}
.vm-card-points-root.hard,.vm-card-points-user.hard{color:#FF8B8B}
.vm-card-diff-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
@media(max-width:520px){.vm-card-bar{height:28px}.vm-card-name{font-size:28px;padding:18px 18px 0}.vm-card-main{flex-direction:column;padding:16px 18px 18px}.vm-card-left{width:100%;padding:0 0 16px;border-right:none;border-bottom:1px solid color-mix(in srgb,var(--line) 24%,transparent)}.vm-card-cube{width:120px}.vm-card-right{padding:16px 0 0;gap:6px}.vm-card-row{min-height:36px;font-size:12px;padding:7px 10px}.vm-card-row--points{flex-wrap:nowrap;column-gap:5px}.vm-card .difficulty{height:20px;font-size:inherit;padding:0 8px}}
@media(max-width:640px){.modal-card-hero{flex-direction:column;min-height:0}.mch-left{width:100%;height:92px;border-right:none;border-bottom:1px solid color-mix(in srgb,var(--line) 20%,transparent);padding:10px;flex:none}.mch-img{max-height:88px}.mch-right{flex:none;width:100%;padding:10px 14px 12px;justify-content:flex-start}.mch-info-row{padding:3px 0;font-size:11px}.mch-info-lbl{width:46px;font-size:9px}.dialog-action-bar{flex-wrap:wrap;gap:8px}.dialog-btn-row{width:100%;justify-content:center}}
@media(min-width:641px) and (max-width:780px){.mch-left{flex:0 0 44%}.mch-info-row{font-size:11.5px;min-height:24px;padding:2px 5px}.mch-info-lbl{width:62px;font-size:9px}}
.vn-swal-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px;padding-right:44px}
.vn-swal-title{margin:0 0 5px;font:700 26px 'Rajdhani',sans-serif;line-height:1;color:var(--text)}.vn-swal-summary{margin:0;color:var(--text2);font-size:12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.swal2-popup.vn-swal-popup.vn-swal-popup--card{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;width:min(680px,calc(100vw - 32px))!important;max-width:min(680px,calc(100vw - 32px))!important;overflow:visible!important}
.swal2-popup.vn-swal-popup.vn-swal-popup--card .swal2-title{display:none!important}
.swal2-popup.vn-swal-popup.vn-swal-popup--card .swal2-close{display:none!important}
.swal2-popup.vn-swal-popup.vn-swal-popup--card .swal2-html-container{margin:0!important;padding:0!important;overflow:visible!important}
.swal2-popup.vn-swal-popup.vn-swal-popup--sm{width:min(440px,calc(100vw - 32px))!important;max-width:min(440px,calc(100vw - 32px))!important;padding:32px 28px 24px!important;text-align:center!important}
.swal2-popup.vn-swal-popup.vn-swal-popup--sm .swal2-icon{margin:0 auto 16px!important}
.swal2-popup.vn-swal-popup.vn-swal-popup--sm .swal2-title{font-family:'Rajdhani',sans-serif!important;font-size:30px!important;font-weight:700!important;color:var(--text)!important;margin:0 0 8px!important;padding:0!important;text-align:center!important}
.swal2-popup.vn-swal-popup.vn-swal-popup--sm .swal2-html-container{text-align:center!important;font-size:13.5px!important;color:var(--text2)!important}
.swal2-popup.vn-swal-popup.vn-swal-popup--sm .swal2-actions{justify-content:center!important;margin-top:20px!important;gap:10px!important}
.swal2-popup.vn-swal-popup.vn-swal-popup--sm .swal2-confirm{background:linear-gradient(135deg,color-mix(in srgb,#3D9CDF 84%,#111),color-mix(in srgb,#3D9CDF 60%,var(--accent2) 18%))!important;border:1px solid color-mix(in srgb,#3D9CDF 56%,var(--line))!important;color:#fff!important;border-radius:10px!important;padding:10px 28px!important;font-family:'Inter',sans-serif!important;font-weight:600!important;font-size:14px!important;box-shadow:0 8px 22px color-mix(in srgb,#3D9CDF 22%,transparent)!important;transition:all 0.2s cubic-bezier(0.4,0.0,0.2,1)!important}
.swal2-popup.vn-swal-popup.vn-swal-popup--sm .swal2-confirm:hover{background:linear-gradient(135deg,color-mix(in srgb,#3D9CDF 88%,#111),color-mix(in srgb,#3D9CDF 66%,var(--accent2) 16%))!important;box-shadow:0 10px 30px color-mix(in srgb,#3D9CDF 28%,transparent)!important;transform:translateY(-1px)!important}
@keyframes vnPopIn{0%{opacity:0;transform:translateY(22px)}70%{opacity:1;transform:translateY(-3px)}100%{opacity:1;transform:translateY(0)}}
@keyframes vnSmPopIn{0%{opacity:0;transform:scale(.88) translateY(30px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes vnPopOut{0%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(.9) translateY(-10px)}}
.vn-pop-in{animation:vnPopIn .36s cubic-bezier(.22,.9,.36,1.06) both!important}
.vn-sm-pop-in{animation:vnSmPopIn .3s cubic-bezier(.34,1.28,.64,1) both!important}
.vn-pop-out{animation:vnPopOut .16s cubic-bezier(.55,0,1,.45) both!important}
.submit-input.input-error{border-color:#ef4444!important;box-shadow:none!important}
.submit-field-error{display:block;margin-top:5px;font-size:11px;color:#ef4444;font-weight:500;letter-spacing:.01em}
.form-control.input-error{border-color:#ef4444!important;box-shadow:none!important}
.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none;width:0;height:0;overflow:hidden}
@keyframes spin{to{transform:rotate(360deg)}}
.dialog-action-bar{display:grid;grid-template-columns:1.08fr .92fr;gap:14px;padding:10px 0 2px;align-items:end}
.dialog-plat-area{display:flex;align-items:center;gap:7px;flex:1;flex-wrap:wrap;min-width:0}
.dialog-plat-lbl{font:600 9px 'Fira Code',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);flex-shrink:0}
.dialog-plat-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px 4px 7px;border-radius:999px;border:1px solid color-mix(in srgb,var(--line) 48%,transparent);background:color-mix(in srgb,var(--card) 68%,transparent);font:600 10px 'Fira Code',monospace;color:var(--text2);transition:border-color .16s,color .16s}
.dialog-plat-chip img{width:14px;height:14px;object-fit:contain;flex-shrink:0}
.dialog-btn-row{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.dialog-dl-btn{background:linear-gradient(135deg,color-mix(in srgb,#3D9CDF 84%,#111),color-mix(in srgb,#3D9CDF 60%,var(--accent2) 18%))!important;color:#fff!important;border-color:color-mix(in srgb,#3D9CDF 56%,var(--line))!important;box-shadow:none!important;font-weight:700!important;letter-spacing:.02em}
.dialog-dl-btn:hover{opacity:.92!important;box-shadow:none!important;transform:translateY(-1px)!important;background:linear-gradient(135deg,color-mix(in srgb,#3D9CDF 88%,#111),color-mix(in srgb,#3D9CDF 66%,var(--accent2) 16%))!important}
.dialog-submit-btn{background:linear-gradient(135deg,color-mix(in srgb,#3D9CDF 84%,#111),color-mix(in srgb,#3D9CDF 60%,var(--accent2) 18%))!important;color:#fff!important;border-color:color-mix(in srgb,#3D9CDF 56%,var(--line))!important;box-shadow:none!important;font-weight:700!important;letter-spacing:.02em;cursor:pointer}
.dialog-submit-btn:hover{opacity:.92!important;box-shadow:none!important;transform:translateY(-1px)!important;background:linear-gradient(135deg,color-mix(in srgb,#3D9CDF 88%,#111),color-mix(in srgb,#3D9CDF 66%,var(--accent2) 16%))!important}
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--line) 76%, transparent);background:color-mix(in srgb,var(--card) 84%, transparent);font-size:12px}
.dialog-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:14px;align-items:stretch;margin-top:12px}
.dialog-grid>section{display:flex;flex-direction:column;min-height:0;height:213.8px}
.dialog-grid>section:last-child{overflow:hidden}
.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.meta-box--full{grid-column:1 / -1}
.meta-box,.writeup-item,.stack-item,.submit-field,.writeup-card{padding:12px 13px;border-radius:14px;border:1px solid color-mix(in srgb,var(--line) 76%, transparent);background:color-mix(in srgb,var(--card) 88%, transparent)}
.meta-box strong,.writeup-item strong,.stack-item strong{display:block;margin-bottom:6px;font-size:11px}
.meta-val,.footer-note{font-size:12px;color:var(--text2);line-height:1.55;overflow-wrap:anywhere;word-break:break-word}
.tag-list{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px;max-height:72px;overflow-y:auto}
.dialog-tags{margin-top:10px;max-height:64px}
.dialog-coming-soon{display:flex;align-items:center;gap:6px;font:500 11px 'Fira Code',monospace;color:var(--soft);letter-spacing:.04em;padding:0;min-height:32px;opacity:.85;align-self:end}
.tag{position:relative;padding:2px 8px;border-radius:999px;border:1px solid color-mix(in srgb,#D0930B 48%,transparent);background:color-mix(in srgb,#D0930B 10%,var(--card));color:#D0930B;font:500 9.5px 'Fira Code',monospace;letter-spacing:.03em;cursor:default;box-shadow:0 0 6px color-mix(in srgb,#D0930B 14%,transparent);transition:filter .15s}
.tag:hover{filter:brightness(1.25)}
.dialog-tags .tag{padding:4px 10px}
.tag[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;background:color-mix(in srgb,var(--surface) 98%,transparent);color:var(--text);border:1px solid color-mix(in srgb,var(--line) 80%,transparent);border-radius:8px;padding:5px 10px;font:500 10px 'Inter',sans-serif;letter-spacing:.01em;pointer-events:none;opacity:0;transition:opacity .15s;z-index:20;box-shadow:0 6px 18px color-mix(in srgb,var(--shadow) 30%,transparent)}
.tag[data-tip]:hover::after{opacity:1}
.writeup-card{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow:hidden;height:100%}
.writeup-card-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.writeup-card-head h4{margin:0;font:700 15px 'Rajdhani',sans-serif}
.writeup-list{display:flex;flex-direction:column;gap:4px;flex:1;min-height:0;overflow-y:auto;padding-right:4px;padding-bottom:4px;scrollbar-width:thin}
.writeup-list::-webkit-scrollbar{width:4px}
.writeup-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--line2) 52%, transparent);border-radius:999px}
.writeup-list::-webkit-scrollbar-track{background:transparent}
.wu-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;text-decoration:none;color:var(--text);font-size:12px;border:1px solid transparent}
.wu-row-icon{flex-shrink:0;width:18px;text-align:center;font-size:13px;opacity:.8}
.wu-row-icon svg{width:14px;height:14px;display:block}
.wu-row-icon--video{display:inline-flex;align-items:center;justify-content:center;color:#3D9CDF;opacity:1}
.wu-row-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--text)}
.wu-row-arrow{flex-shrink:0;font-size:13px;opacity:.45;margin-left:2px}
.wu-row:hover .wu-row-arrow{opacity:.85}
.wu-crown{color:#f5c518;margin-left:3px;font-size:11px}
.wu-lang{display:inline-flex;align-items:center;margin-left:5px;padding:1px 4px;border-radius:4px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font:700 9px 'Fira Code',monospace;letter-spacing:.05em;vertical-align:middle;flex-shrink:0}
.wu-date{flex-shrink:0;font:500 10px 'Fira Code',monospace;color:var(--soft);margin-right:4px;white-space:nowrap}
.wu-empty{display:flex;align-items:center;justify-content:center;flex:1;color:var(--soft);font-size:12px;font-style:italic;padding:20px 0}
.wu-row:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);border-color:color-mix(in srgb,var(--accent) 18%,transparent)}
.n-count{font-size:11px;color:var(--soft);margin-left:6px;font-family:'Fira Code',monospace}
.rules-warning{margin-top:14px;padding:12px 16px;border-radius:14px;border-left:3px solid var(--accent);border-top:1px solid color-mix(in srgb,var(--accent) 28%, var(--line));border-right:1px solid color-mix(in srgb,var(--line) 60%, transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 60%, transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%, transparent),color-mix(in srgb,var(--surface) 88%, transparent));color:var(--text2);line-height:1.62}
.rules-sections{display:grid;gap:14px;margin-top:14px}
.rules-section{padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--line) 76%, transparent);border-left:3px solid var(--accent2);background:linear-gradient(160deg,color-mix(in srgb,var(--card) 94%, transparent),color-mix(in srgb,var(--surface) 86%, transparent))}
.rules-section h3{margin:0 0 12px;font:700 18px 'Rajdhani',sans-serif;line-height:1.15;color:var(--text)}.rules-section h3::before{content:"▸ ";color:var(--accent);font-size:14px}
.rules-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.rules-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--line) 55%, transparent);background:color-mix(in srgb,var(--surface) 66%, transparent);line-height:1.65;color:var(--text2);overflow-wrap:anywhere;word-break:break-word;transition:border-color .18s ease,background .18s ease,border-left-color .18s ease}.rules-item:hover{border-color:color-mix(in srgb,var(--accent2) 42%, var(--line));border-left-color:var(--accent2);background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 9%, transparent),color-mix(in srgb,var(--surface) 80%, transparent))}
.rules-item::before{content:"›";flex:0 0 auto;color:var(--accent2);font-weight:700;font-size:16px;line-height:1.65;margin-top:0}
.rules-item strong{color:var(--text)}
.submit-shell{max-width:920px;margin:0 auto;padding:6px 0 10px}
.submit-panel{padding:20px;background:linear-gradient(150deg,color-mix(in srgb,var(--surface) 94%, transparent),color-mix(in srgb,var(--card) 86%, transparent));backdrop-filter:blur(12px) saturate(.98);box-shadow:0 24px 60px color-mix(in srgb,var(--shadow) 82%, transparent);border:1px solid color-mix(in srgb,var(--line2) 72%, transparent)}
.submit-panel-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--line) 44%, transparent)}
.submit-panel-header > div{flex:1;min-width:0}
.submit-panel h2{margin:0;font:700 28px 'Rajdhani',sans-serif;line-height:1}
.submit-panel p{margin:10px 0 0;color:var(--text2);line-height:1.55}
.submit-alert{display:block;width:100%;box-sizing:border-box;margin:0 0 16px;padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,#D0930B 62%,var(--line));background:color-mix(in srgb,#D0930B 10%,var(--surface));color:#D0930B}
.submit-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px}
.submit-step{display:flex;gap:10px;align-items:flex-start;padding:12px 13px;border-radius:14px;border:1px solid color-mix(in srgb,var(--brand-blue) 30%, transparent);background:color-mix(in srgb,var(--card) 82%, transparent)}
.submit-step-num{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;border-radius:10px;background:color-mix(in srgb,var(--accent2) 18%, transparent);color:var(--text);font:700 11px 'Fira Code',monospace;letter-spacing:.08em}
.submit-step strong{display:block;margin-bottom:4px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.submit-step p{margin:0!important;font-size:12px;color:var(--text2);line-height:1.45}
.submit-close{width:30px;height:30px;border-radius:50%!important;border:1px solid color-mix(in srgb,var(--line) 50%,transparent)!important;background:color-mix(in srgb,var(--surface) 88%,transparent)!important;backdrop-filter:blur(8px);color:color-mix(in srgb,var(--text) 60%,transparent)!important;font-size:16px;padding:0!important;display:flex;align-items:center;justify-content:center;transition:color .16s,border-color .16s,background .16s,transform .16s}
.submit-close:hover{color:var(--text)!important;border-color:color-mix(in srgb,var(--accent2) 60%,var(--line))!important;background:color-mix(in srgb,var(--accent2) 12%,var(--surface))!important;transform:rotate(90deg)!important}
.submit-fields{display:grid;gap:12px}
.submit-group{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--brand-blue) 30%, transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--card) 90%, transparent),color-mix(in srgb,var(--surface) 84%, transparent))}
.submit-group-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid color-mix(in srgb,var(--line) 44%, transparent)}
.submit-group-head h3{margin:0;font:700 18px 'Rajdhani',sans-serif;letter-spacing:.03em}
.submit-group-head p{margin:0!important;max-width:420px;font-size:12px;color:var(--text2);line-height:1.5;text-align:right}
.submit-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.submit-field strong{display:block;margin-bottom:6px;font-size:11px;color:var(--soft);text-transform:uppercase;letter-spacing:.08em}.submit-field{display:block;width:100%;box-sizing:border-box;transition:border-color .18s ease,box-shadow .18s ease}.submit-field:focus-within{border-color:color-mix(in srgb,var(--accent) 54%, var(--line));box-shadow:0 10px 24px color-mix(in srgb,var(--accent2) 14%, transparent)}
.submit-field--full{grid-column:1 / -1}
.submit-helper{margin:0 0 8px;font-size:11px;line-height:1.45;color:var(--text2)}
.submit-input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--line) 72%,transparent);background:color-mix(in srgb,var(--card) 82%,transparent);color:var(--text);transition:border-color .18s ease,background .18s ease;font-weight:500;outline:none;box-shadow:none}
.submit-input::placeholder{color:var(--soft);opacity:.7}
.submit-input:hover{border-color:color-mix(in srgb,#3D9CDF 36%,var(--line))}
.submit-input:focus{border-color:#3D9CDF;background:color-mix(in srgb,var(--card) 94%,transparent);box-shadow:none}

/* ═══ Submit Flag popup — terminal-hacker premium, dynamic variants ═══════ */
.vnyx-flag-form{
  --accent:#3D9CDF;
  --accent-soft:color-mix(in srgb,#3D9CDF 14%,transparent);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI','Inter',system-ui,sans-serif;
  text-align:left;color:var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

/* Hero — centered title on top, meta row below, faded divider */
.vff-hero{position:relative;display:flex;flex-direction:column;gap:12px;margin:0 0 24px;padding:0 0 20px}
.vff-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,#3D9CDF 18%,transparent) 18%,color-mix(in srgb,#3D9CDF 55%,transparent) 40%,#3D9CDF 50%,color-mix(in srgb,#3D9CDF 55%,transparent) 60%,color-mix(in srgb,#3D9CDF 18%,transparent) 82%,transparent 100%);pointer-events:none;filter:drop-shadow(0 0 6px color-mix(in srgb,#3D9CDF 38%,transparent))}
.vff-title{font:700 26px/1.05 'Rajdhani',sans-serif;margin:0;letter-spacing:.005em;color:var(--text);text-align:center}
.vff-meta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.vff-machine{display:inline-flex;align-items:center;gap:7px;font:500 13px/1.3 'JetBrains Mono','SF Mono',ui-monospace,monospace;color:var(--text2);letter-spacing:.02em;min-width:0;flex-shrink:0}
.vff-machine span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vff-vm-icon{width:14px;height:14px;flex-shrink:0;color:var(--accent);opacity:.95}
.vff-badge{display:inline-flex;align-items:center;gap:6px;padding:0;border:none;background:transparent;color:#f87171;font:700 11px/1 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;flex-shrink:0}

/* Body + fields */
.vff-body{display:flex;flex-direction:column;gap:18px;font-family:inherit}
.vff-field{display:flex;flex-direction:column;gap:8px}
.vff-label{font:600 11px/1 'Inter',sans-serif;letter-spacing:.02em;color:var(--text2);user-select:none;text-transform:none}
.vff-fixed-type{font:500 13px/1 inherit;color:var(--text2);padding:10px 13px;border-radius:9px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.vff-fixed-type strong{color:var(--text);font-weight:700}

/* ═══ Input — ZERO shadow/outline/focus-ring under any circumstance ═══ */
.vff-input{
  width:100%;box-sizing:border-box;
  padding:13px 15px;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--line) 55%,transparent);
  background:color-mix(in srgb,var(--card) 50%,transparent);
  color:var(--text);
  font:400 15px/1.4 inherit;
  letter-spacing:-.01em;
  transition:border-color .18s ease,background .18s ease;
  /* kill every possible outline/shadow */
  outline:0!important;outline-offset:0!important;
  box-shadow:none!important;-webkit-box-shadow:none!important;
  -webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.vff-input:hover,.vff-input:focus,.vff-input:focus-visible,.vff-input:active,.vff-input:-moz-focusring{
  outline:0!important;box-shadow:none!important;-webkit-box-shadow:none!important;
}
.vff-input::placeholder{color:var(--soft);opacity:.45;font-weight:400;letter-spacing:-.005em}
.vff-input::-webkit-input-placeholder{color:var(--soft);opacity:.45}
.vff-input::-moz-placeholder{color:var(--soft);opacity:.45}
.vff-input:hover{border-color:color-mix(in srgb,var(--line) 80%,transparent);background:color-mix(in srgb,var(--card) 62%,transparent)}
.vff-input:focus{border-color:var(--accent);background:color-mix(in srgb,var(--card) 70%,transparent)}
.vff-input.input-error{border-color:#ef4444!important}
.vff-input--mono{font-family:'JetBrains Mono','SF Mono','Fira Code',ui-monospace,SFMono-Regular,monospace;font-size:13.5px;letter-spacing:.03em;font-weight:500}

/* Autofill: no yellow background */
.vff-input:-webkit-autofill,.vff-input:-webkit-autofill:hover,.vff-input:-webkit-autofill:focus,.vff-input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--text)!important;
  -webkit-box-shadow:0 0 0 1000px color-mix(in srgb,var(--card) 70%,transparent) inset!important;
  box-shadow:0 0 0 1000px color-mix(in srgb,var(--card) 70%,transparent) inset!important;
  caret-color:var(--text)!important;
  transition:background-color 5000s ease-in-out 0s!important;
  font-family:inherit!important;
}

/* Hint */
.vff-hint{font:400 12px/1.45 inherit;color:var(--soft);opacity:.7;margin-top:2px;letter-spacing:-.005em}

/* Segmented control */
.vff-radio-group{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:3px;border-radius:10px;background:color-mix(in srgb,var(--card) 40%,transparent);border:1px solid color-mix(in srgb,var(--line) 45%,transparent)}
.vff-radio{display:flex;align-items:center;justify-content:center;padding:9px 10px;border-radius:7px;cursor:pointer;font:500 13px/1 inherit;color:var(--text2);user-select:none;transition:background .18s ease,color .18s ease,font-weight .18s ease;position:relative;letter-spacing:-.005em}
.vff-radio input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.vff-radio:hover{color:var(--text)}
.vff-radio:has(input:checked){background:var(--accent);color:#fff;font-weight:600}

/* Submit — solid, dynamic color per variant */
.vff-submit{
  width:100%;padding:14px 16px;margin-top:10px;
  border-radius:10px;border:none;
  background:var(--accent);color:#fff;
  font:600 14.5px/1 inherit;letter-spacing:-.005em;
  cursor:pointer;
  outline:0!important;box-shadow:none!important;
  transition:background .15s ease,transform .08s ease,filter .15s ease;
  -webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.vff-submit::before{content:"▸";font-weight:700;transition:transform .15s ease}
.vff-submit:hover{filter:brightness(1.08)}
.vff-submit:hover::before{transform:translateX(2px)}
.vff-submit:active{filter:brightness(.94);transform:scale(.99)}
.vff-submit:focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px!important}
.vff-submit:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.submit-footer{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:16px}
.submit-footer-copy{display:grid;gap:8px;flex:1;min-width:0}
.submit-footer-copy>.submit-status{margin-top:0}
.submit-footer>.footer-note{flex:1;min-width:0}
.submit-status{padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--line) 66%, transparent);background:color-mix(in srgb,var(--surface) 72%, transparent);font-size:12px;line-height:1.5;color:var(--text2);margin-top:12px}
.submit-status--loading{border-color:color-mix(in srgb,var(--accent2) 36%, var(--line));color:var(--text)}
.submit-status--success{border-color:color-mix(in srgb,#42d392 40%, var(--line));background:color-mix(in srgb,#42d392 10%, var(--surface));color:var(--text)}
.submit-status--error{border-color:color-mix(in srgb,#ff7a7a 44%, var(--line));background:color-mix(in srgb,#ff7a7a 10%, var(--surface));color:var(--text)}
.submit-actions{display:flex;align-items:center;gap:10px}
.submit-back-link{justify-content:center;min-width:146px;padding-inline:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 20%,var(--surface)),color-mix(in srgb,var(--accent) 12%,var(--card)));border-color:color-mix(in srgb,var(--accent2) 44%,var(--line));box-shadow:0 4px 16px color-mix(in srgb,var(--accent2) 14%,transparent)}
.submit-back-link:hover{border-color:color-mix(in srgb,var(--accent2) 72%,var(--line));box-shadow:0 8px 28px color-mix(in srgb,var(--accent2) 24%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 28%,var(--surface)),color-mix(in srgb,var(--accent) 18%,var(--card)))}
.submit-back-link svg{width:16px;height:16px;flex:0 0 16px}

/* ═══ Wizard (New VM Submission) — 3-step premium wizard with live preview ═══ */
.submit-shell:has(.wiz-panel){max-width:1060px}
.wiz-panel{padding:24px 26px 22px;border-radius:20px}
.wiz-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
.wiz-header > div{flex:1;min-width:0}
.wiz-header h2{margin:0;font:700 26px/1 'Rajdhani',sans-serif;letter-spacing:.005em}
.wiz-header p{margin:6px 0 0;color:var(--text2);font-size:13px;line-height:1.5}

/* Stepper — all tabs in blue palette (outlined inactive / solid active) */
.wiz-stepper{display:flex;align-items:center;gap:10px;margin:18px 0 10px;padding:0}
.wiz-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,#3D9CDF 8%,transparent);border:1px solid color-mix(in srgb,#3D9CDF 40%,var(--line));color:color-mix(in srgb,#3D9CDF 80%,var(--text));cursor:pointer;font:500 13px/1 'Inter',sans-serif;transition:background .2s ease,border-color .2s ease,color .2s ease;user-select:none}
.wiz-tab:hover:not(.is-active){border-color:#3D9CDF;background:color-mix(in srgb,#3D9CDF 14%,transparent);color:var(--text)}
.wiz-tab.is-active{background:#3D9CDF;border-color:#3D9CDF;color:#fff;font-weight:600}
.wiz-tab.is-complete{background:color-mix(in srgb,#3D9CDF 18%,transparent);border-color:#3D9CDF;color:var(--text);font-weight:500}
.wiz-tab.is-complete .wiz-tab-num::before{content:"✓";font-size:12px;color:#fff}
.wiz-tab.is-complete .wiz-tab-num > *{display:none}
.wiz-tab-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,#3D9CDF 30%,transparent);font:700 11px/1 'Fira Code',monospace;color:#3D9CDF}
.wiz-tab.is-active .wiz-tab-num{background:rgba(255,255,255,.25);color:#fff}
.wiz-tab.is-complete .wiz-tab-num{background:#3D9CDF;color:#fff}
.wiz-tab-lbl{font-family:inherit}
.wiz-tab-conn{flex:1;height:2px;background:color-mix(in srgb,#3D9CDF 30%,var(--line));border-radius:1px;min-width:18px}

/* Body: form + preview — fixed min-height so panel never jumps */
.wiz-body{display:grid;grid-template-columns:1fr 260px;gap:22px;margin-bottom:16px;min-height:340px}
.wiz-form{min-width:0;min-height:340px}
.wiz-step-panel{display:none;animation:wizFadeIn .26s cubic-bezier(.22,.9,.36,1.06) both}
.wiz-step-panel.is-active{display:block}
@keyframes wizFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.wiz-step-head{margin-bottom:14px}
.wiz-step-head h3{display:flex;align-items:center;gap:10px;margin:0;font:700 18px/1 'Rajdhani',sans-serif;letter-spacing:.005em}
.wiz-step-head p{margin:6px 0 0;color:var(--text2);font-size:12.5px;line-height:1.5}
.wiz-sensitive-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,#f59e0b 12%,transparent);border:1px solid color-mix(in srgb,#f59e0b 30%,transparent);color:#fbbf24;font:600 10px/1 'Inter',sans-serif;letter-spacing:.05em;text-transform:uppercase}
.wiz-sensitive-badge svg{width:11px;height:11px}

.wiz-step-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wiz-step-grid .submit-field{display:flex;flex-direction:column;gap:6px;margin:0}
.wiz-step-grid .submit-field strong{font:600 11px/1 'Inter',sans-serif;color:var(--text2);letter-spacing:.02em}
.wiz-step-grid .submit-field--full{grid-column:1 / -1}
.wiz-step-grid .submit-field--sensitive .submit-input{background:color-mix(in srgb,#f59e0b 4%,var(--card) 80%)}
.wiz-step-grid .submit-helper{display:none}
.wiz-opt{color:var(--soft);font-weight:400;font-size:10.5px;letter-spacing:0;text-transform:none;opacity:.65;margin-left:4px}
.wiz-mono{font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace;font-size:13px;letter-spacing:.02em}

/* Platforms row inside wizard — with icons */
.wiz-plats{display:flex;gap:10px;padding:2px 0}
.wiz-plat{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:9px;border:1px solid color-mix(in srgb,var(--line) 60%,transparent);background:color-mix(in srgb,var(--card) 60%,transparent);cursor:pointer;font:500 12.5px/1 'Inter',sans-serif;color:var(--text2);transition:border-color .18s ease,background .18s ease,color .18s ease}
.wiz-plat:has(input:checked){border-color:#3D9CDF;background:color-mix(in srgb,#3D9CDF 10%,transparent);color:var(--text)}
.wiz-plat.is-locked{cursor:default;opacity:.9}
.wiz-plats.input-error{outline:2px solid #ef4444!important;border-radius:9px}
.wiz-plat.is-locked:has(input:checked){border-color:color-mix(in srgb,#3D9CDF 55%,var(--line));background:color-mix(in srgb,#3D9CDF 8%,transparent)}
.wiz-plat input{accent-color:#3D9CDF;width:14px;height:14px;cursor:inherit;margin:0}
.wiz-plat-icon{width:18px;height:18px;object-fit:contain;flex-shrink:0;opacity:.95}
.wiz-plat-req{font-size:9.5px;color:var(--soft);letter-spacing:.06em;text-transform:uppercase;margin-left:4px;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--line) 24%,transparent);border:1px solid color-mix(in srgb,var(--line) 40%,transparent)}

/* Level / OS dropdown option icons */
.wiz-opt-iconwrap{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}
.wiz-opt-iconwrap svg{width:15px;height:15px;display:block}
.wiz-opt-iconwrap .wiz-opt-icon{width:14px;height:14px;object-fit:contain;display:block;opacity:.95}

/* Live preview sidebar — header mirrors .wiz-step-head structure exactly */
.wiz-preview{position:sticky;top:100px;align-self:start}
.wiz-preview-head{margin-bottom:14px}
.wiz-preview-title{margin:0;font:700 18px/1 'Rajdhani',sans-serif;letter-spacing:.005em;color:var(--text)}
.wiz-preview-sub{margin:6px 0 0;color:var(--text2);font-size:12.5px;line-height:1.5}
.wiz-preview-card{padding:14px;border-radius:14px;border:1px solid color-mix(in srgb,#3D9CDF 22%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,#3D9CDF 6%,var(--surface)),color-mix(in srgb,var(--card) 92%,transparent));display:flex;flex-direction:column;gap:9px}
.wiz-pc-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.wiz-pc-title{display:flex;align-items:center;gap:6px;min-width:0;flex:1;overflow:hidden}
.wiz-pc-os{display:inline-flex;align-items:center;flex-shrink:0}
.wiz-pc-os .opt-img{width:15px;height:15px}
.wiz-pc-sep{color:var(--text2);opacity:.4;font-weight:400;flex-shrink:0;font-size:13px}
.wiz-pc-dash{font-size:14px}
.wiz-pc-os:empty + .wiz-pc-dash{display:none}
.wiz-pc-name{font:700 16px/1.2 'Rajdhani',sans-serif;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wiz-pc-creator{font:500 12px/1 'Inter',sans-serif;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1}
.wiz-pc-muted{opacity:.5;font-style:italic}
.wiz-pc-name.wiz-pc-muted{font-weight:500;font-style:italic}
.wiz-pc-level{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font:600 10px/1 'Inter',sans-serif;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0;border:1px solid var(--line)}
.wiz-pc-level--easy{color:#10b981;border-color:color-mix(in srgb,#10b981 40%,var(--line));background:color-mix(in srgb,#10b981 10%,transparent)}
.wiz-pc-level--medium{color:#f59e0b;border-color:color-mix(in srgb,#f59e0b 40%,var(--line));background:color-mix(in srgb,#f59e0b 10%,transparent)}
.wiz-pc-level--hard{color:#ef4444;border-color:color-mix(in srgb,#ef4444 40%,var(--line));background:color-mix(in srgb,#ef4444 10%,transparent)}
.wiz-pc-level--low{color:#60a5fa;border-color:color-mix(in srgb,#60a5fa 40%,var(--line));background:color-mix(in srgb,#60a5fa 10%,transparent)}
.wiz-pc-plat{display:flex;flex-wrap:wrap;gap:4px}
.wiz-pc-plat-chip{font:600 9.5px/1 'Fira Code',monospace;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:5px;background:color-mix(in srgb,#3D9CDF 12%,transparent);color:#3D9CDF;border:1px solid color-mix(in srgb,#3D9CDF 28%,transparent)}
.wiz-pc-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.wiz-pc-tag{font:500 10.5px/1 'Fira Code',monospace;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,#D0930B 8%,transparent);color:#D0930B;border:1px solid color-mix(in srgb,#D0930B 22%,transparent)}

.wiz-draft{margin-top:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,#10b981 8%,transparent);border:1px solid color-mix(in srgb,#10b981 20%,transparent);color:#10b981;font:500 10.5px/1 'Inter',sans-serif;letter-spacing:.02em;transition:opacity .3s ease}
.wiz-draft svg{width:11px;height:11px}
.wiz-draft.is-flash{animation:wizDraftFlash .9s ease}
@keyframes wizDraftFlash{0%{transform:scale(1)}30%{transform:scale(1.06);background:color-mix(in srgb,#10b981 22%,transparent)}100%{transform:scale(1)}}

/* Footer with wizard nav — Back + Next/Send all in brand blue */
.wiz-footer{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--line) 26%,transparent)}
.wiz-nav-back,.wiz-nav-next,.wiz-nav-send{cursor:pointer;min-width:110px;height:40px;padding:0 18px;border-radius:10px;font:600 13px/1 'Inter',sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #3D9CDF;transition:background .15s ease,transform .08s ease,filter .15s ease}
.wiz-nav-back{background:color-mix(in srgb,#3D9CDF 16%,transparent);color:#fff}
.wiz-nav-back:hover{background:color-mix(in srgb,#3D9CDF 26%,transparent)}
.wiz-nav-back:active{transform:scale(.98)}
.wiz-nav-next,.wiz-nav-send{margin-left:auto;background:#3D9CDF;color:#fff}
.wiz-nav-next:hover,.wiz-nav-send:hover{filter:brightness(1.08)}
.wiz-nav-next:active,.wiz-nav-send:active{filter:brightness(.94);transform:scale(.98)}
.wiz-nav-back[disabled]{opacity:.35;cursor:not-allowed;pointer-events:none}
.wiz-nav-next svg,.wiz-nav-back svg,.wiz-nav-send svg{width:14px;height:14px;flex-shrink:0}
.wiz-hint{margin-top:10px;font-size:11.5px;color:var(--soft);text-align:center;line-height:1.5}
.wiz-hint a{color:#3D9CDF;text-decoration:underline;text-underline-offset:2px}

.submit-shell:has(.wiz-panel){display:flex;flex-direction:column;align-items:stretch}

/* Responsive */
@media (max-width:960px){
  .wiz-body{grid-template-columns:1fr;min-height:0}
  .wiz-form{min-height:0}
  .wiz-preview{position:static;order:-1;margin:0 0 4px}
  .wiz-step-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .wiz-stepper{flex-wrap:wrap;gap:6px}
  .wiz-tab{flex:1 1 auto;justify-content:center;padding:7px 10px}
  .wiz-tab-conn{display:none}
  .wiz-footer{flex-wrap:wrap}
}
.writeup-form-backdrop[hidden]{display:none}
.writeup-form-backdrop{position:fixed;inset:0;background:rgba(7,10,15,.08);backdrop-filter:blur(14px) saturate(.96);display:flex;align-items:center;justify-content:center;padding:36px 18px;z-index:1100;overflow-y:auto}
#langWrap .multi-panel{top:auto;bottom:calc(100% + 6px)}
.form-container{width:min(760px,100%);margin:auto 0;padding:20px;border-radius:20px;border:1px solid color-mix(in srgb,#bbb 32%,var(--line));background:linear-gradient(150deg,color-mix(in srgb,var(--surface) 94%, transparent),color-mix(in srgb,var(--card) 86%, transparent));backdrop-filter:blur(12px) saturate(.98);box-shadow:0 24px 60px color-mix(in srgb,var(--shadow) 82%, transparent)}
.form-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid color-mix(in srgb,var(--line) 44%, transparent)}
.submit-writeup{margin:0;font:700 24px/1.1 'Rajdhani',sans-serif}
.close-form{width:30px;height:30px;border-radius:50%;border:1px solid color-mix(in srgb,var(--line) 50%,transparent);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(8px);color:color-mix(in srgb,var(--text) 60%,transparent);font-size:16px;line-height:0;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:color .16s,border-color .16s,background .16s,transform .16s}
.close-form:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent2) 60%,var(--line));background:color-mix(in srgb,var(--accent2) 12%,var(--surface));transform:rotate(90deg)}
.form-text{margin:8px 0 0;color:var(--text2);line-height:1.55}
.form.submit-form{display:grid;gap:10px;margin-top:14px}
.form-field{padding:12px 13px;border-radius:14px;border:1px solid color-mix(in srgb,var(--brand-blue) 30%, transparent);background:color-mix(in srgb,var(--card) 88%, transparent)}
.form-label{display:block;margin-bottom:6px;font-size:11px;color:var(--soft);text-transform:uppercase;letter-spacing:.08em}
.form-control{width:100%;padding:10px 11px;border-radius:10px;border:1px solid color-mix(in srgb,var(--line) 72%, transparent);background:color-mix(in srgb,var(--surface) 80%, transparent);color:var(--text);transition:border-color .18s ease;box-shadow:none;outline:none}
.form-control:focus,.form-control:focus-visible,.form-control:hover{outline:0!important;border-color:#3D9CDF;box-shadow:none!important;transform:none!important}
.form-field .multi-trigger{height:auto;display:block;text-align:left;padding:10px 11px}
.form-checkbox{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.form-checkbox input{accent-color:var(--accent)}
.form-btns{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:4px}
.form-footer{display:flex;justify-content:flex-end}
.form-footer small{color:var(--text2);text-align:right;max-width:420px}
.form-footer a{color:var(--accent2);text-decoration:none}
#writeupReview{border-color:color-mix(in srgb,var(--brand-blue) 30%, transparent)}
#writeupSubmitBtn{border-color:color-mix(in srgb,#3D9CDF 74%,var(--line))}
#writeupSubmitBtn:hover{border-color:color-mix(in srgb,#3D9CDF 82%,var(--line))}
.quick-links{position:fixed;right:18px;bottom:82px;z-index:72;display:grid;gap:8px}
.quick-link{width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--line) 76%, transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--card) 96%,transparent),color-mix(in srgb,var(--surface) 88%,transparent));color:var(--text);border-radius:12px;text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;position:relative}
.quick-link svg{width:18px;height:18px}
.quick-link:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--brand-blue) 56%, var(--line));box-shadow:0 8px 22px color-mix(in srgb,var(--brand-blue) 16%, transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--brand-blue) 14%, transparent),color-mix(in srgb,var(--brand-red) 10%, transparent),color-mix(in srgb,var(--surface) 84%, transparent))}
.quick-link[data-tip]:hover::after,.quick-link[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);padding:6px 9px;border-radius:9px;border:1px solid color-mix(in srgb,var(--accent) 32%, var(--line));background:color-mix(in srgb,var(--surface) 97%, transparent);font:600 10px 'Fira Code',monospace;color:var(--text2);white-space:nowrap;z-index:20;box-shadow:0 14px 28px var(--shadow)}
.page-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 auto 14px;max-width:780px;padding:8px;border-radius:16px;border:1px solid color-mix(in srgb,var(--line) 72%, transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%, transparent),color-mix(in srgb,var(--card) 86%, transparent));box-shadow:0 16px 30px var(--shadow)}
.page-shortcuts .quick-link{width:100%;min-height:56px;border-radius:12px;position:relative;right:auto;bottom:auto;display:grid;justify-items:start;align-content:center;gap:3px;padding:10px 12px}
.page-shortcuts .quick-main{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:8px;width:100%;text-align:left;font:700 11px 'Fira Code',monospace;text-transform:uppercase;letter-spacing:.05em;color:var(--text)}
.page-shortcuts .quick-sub{font-size:10px;line-height:1.2;color:var(--text2)}
.page-shortcuts .quick-link svg{width:16px;height:16px}
.page-shortcuts .quick-link[data-tip]:hover::after,.page-shortcuts .quick-link[data-tip]:focus-visible::after{display:none}
.header-socials{display:flex;align-items:center;gap:5px;flex-wrap:nowrap}
.header-socials .social-link{width:36px;height:36px;border-radius:12px}
.footer-shell{position:fixed;left:0;right:0;bottom:0;z-index:70;border-top:1px solid color-mix(in srgb,var(--brand-blue) 30%, transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--topbar) 92%, transparent),color-mix(in srgb,var(--topbar) 98%, transparent));backdrop-filter:blur(16px);padding:10px max(12px,calc((100vw - 1520px)/2 + 12px))}
.footer-inner{max-width:1520px;width:100%;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:12px}.footer-mark{display:flex;align-items:center;gap:12px}.footer-mark img{width:26px;height:26px;object-fit:contain}.footer-mark p{margin:0;color:var(--text2);font-size:12px;letter-spacing:.06em;text-align:center}.footer-mark a{color:var(--accent2);text-decoration:none;border-bottom:1px dashed color-mix(in srgb,var(--accent2) 56%,transparent)}.footer-mark a:hover,.footer-mark a:focus-visible{color:var(--text);border-bottom-color:color-mix(in srgb,var(--text) 46%,transparent)}
@media (max-width:1120px){.filters-grid,.dialog-grid,.submit-group-grid{grid-template-columns:1fr 1fr}.stat-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.stat-card{min-height:56px;padding:5px 4px}.stat-card strong{font-size:15px}.stat-card span{font-size:8px;letter-spacing:.05em}.field:first-child{grid-column:1 / -1}}
@media (max-width:980px){.shell{padding-top:92px}.topbar{padding:8px 14px;grid-template-columns:1fr;gap:8px}.brand{justify-content:center}.top-nav{display:none}.top-actions{width:100%;justify-content:center;gap:10px;flex-wrap:wrap}.control-links{justify-content:center}.header-socials{display:none}}
@media (max-width:760px){body{overflow:hidden}.shell{position:relative;left:auto;transform:none;top:auto;bottom:auto;max-width:1520px;width:calc(100% - 12px);height:calc(100dvh - 58px);margin:0 auto;padding:106px 0 8px;overflow-y:auto;overflow-x:visible}.topbar{padding:8px 12px;grid-template-columns:1fr;gap:8px}.brand{gap:8px;min-width:0;justify-content:center}.brand img{height:20px}.brand p{display:none}.top-actions{width:100%;display:flex;justify-content:center;gap:6px;align-items:center;flex-wrap:wrap}.submit-link{justify-self:auto}.control-links{justify-content:center;gap:4px;flex-wrap:nowrap}.social-link{width:28px;height:28px;border-radius:9px}.social-link svg,.social-link img{width:13px;height:13px}.theme-trigger,.icon-btn{width:30px;height:30px;flex:0 0 auto}.lang-trigger{width:auto;min-width:30px;height:30px;padding:0 8px}.lang-code,.lang-caret{display:none}.lang-panel{top:calc(100% + 8px);bottom:auto;left:50%;right:auto;transform:translateX(-50%);min-width:108px}.top-actions [data-tip]:hover::after,.top-actions [data-tip]:focus-visible::after{left:50%;right:auto;top:calc(100% + 8px);bottom:auto;transform:translateX(-50%)}.top-actions [data-tip]:hover::before,.top-actions [data-tip]:focus-visible::before{left:50%;right:auto;top:calc(100% + 3px);bottom:auto;transform:translateX(-50%) rotate(45deg)}.hero-strip,.dialog-grid,.meta-grid,.filters-grid,.submit-flow,.submit-group-grid{grid-template-columns:1fr}.toolbar,.table-panel,.page-card,.submit-panel{padding:12px}.toolbar-actions{flex-direction:column;align-items:stretch;gap:8px}.toolbar-actions > *{width:100%}.footer-inner{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;width:calc(100% - 12px)}.stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.swal2-popup.vn-swal-popup{border-radius:18px!important;padding:14px!important;width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 72px);overflow-y:auto}.writeup-item{align-items:flex-start;flex-direction:column}.writeup-link{align-self:flex-start}.writeup-list{height:160px;padding-bottom:12px}.dialog-grid>section{height:auto}.field:first-child{grid-column:auto}.dialog-action-bar{grid-template-columns:1fr;gap:7px;padding:8px 0 10px}.dialog-plat-area{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}.dialog-btn-row .primary-btn{padding:7px 9px;font-size:10px;line-height:1;white-space:nowrap}.table-wrap{max-width:100%;overflow-x:scroll;overflow-y:hidden;padding-bottom:8px;scrollbar-width:auto;scrollbar-gutter:stable both-edges;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:auto}.table-wrap::-webkit-scrollbar{height:4px}.table-wrap::after{display:none}.blood-wrap{max-width:132px}.submit-footer{align-items:stretch;flex-direction:column}.submit-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}.quick-links{right:12px;bottom:84px;display:grid;gap:8px;transform:none}.form-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quick-link{width:36px;height:36px}.form-footer{justify-content:flex-end}.form-footer small{max-width:none}.submit-group-head{align-items:flex-start;flex-direction:column}.submit-group-head p{text-align:left;max-width:none}}
@media (prefers-reduced-motion:reduce){.stat-strip .stat-card,.stat-strip.is-ready .stat-card{opacity:1;transform:none;transition:none}}
/* V6 overrides: sidebar filters + V4/V5 blended accents */
:root{--v5-cyan:#13d3ff;--v5-green:#3ade7e;--v5-red:#ff6070;--v5-amber:#f3c96a;--tbl-scroll-v1:color-mix(in srgb,var(--line2) 72%,transparent);--tbl-scroll-v2:color-mix(in srgb,var(--accent2) 54%,transparent);--tbl-scroll-h1:color-mix(in srgb,var(--line2) 66%,transparent);--tbl-scroll-h2:color-mix(in srgb,var(--accent) 50%,transparent);--pane-outline:color-mix(in srgb,var(--accent2) 30%, var(--line))}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 12% -6%,color-mix(in srgb,var(--v5-cyan) 14%,transparent),transparent 35%),radial-gradient(circle at 88% 6%,color-mix(in srgb,var(--v5-green) 12%,transparent),transparent 38%)}
.catalog-layout{display:grid;grid-template-columns:258px minmax(0,1fr);gap:8px;align-items:start;--pane-top:58px;--pane-bottom:64px;--pane-height:calc(100dvh - var(--pane-top) - var(--pane-bottom))}
.catalog-layout .toolbar{margin-top:0;position:sticky;top:var(--pane-top);height:var(--pane-height);max-height:var(--pane-height);overflow:hidden;padding:10px;border:1px solid var(--pane-outline);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 95%,transparent),color-mix(in srgb,var(--card) 88%,transparent));box-shadow:0 16px 30px var(--shadow);display:grid;grid-template-rows:auto 1fr;gap:8px}
.catalog-layout .table-panel{margin-top:0;position:sticky;top:var(--pane-top);height:var(--pane-height);max-height:var(--pane-height);display:flex;flex-direction:column;overflow:hidden;padding:8px;border:1px solid var(--pane-outline);box-shadow:0 14px 28px color-mix(in srgb,var(--shadow) 66%, transparent)}
.catalog-layout .table-panel::after{content:"";position:absolute;bottom:0;right:0;width:9px;height:2px;background:color-mix(in srgb,var(--surface) 96%,transparent);pointer-events:none;z-index:8}
.catalog-layout .table-thead{flex:0 0 auto;overflow:hidden;scrollbar-gutter:stable}
.catalog-layout .table-thead table{table-layout:fixed;width:100%}
.catalog-layout .table-wrap{flex:1 1 auto;height:100%;max-height:100%;overflow:auto;min-height:0;scrollbar-gutter:stable}
.catalog-layout .table-wrap{scrollbar-width:thin;scrollbar-color:var(--tbl-scroll-v1) transparent}
.catalog-layout .table-wrap::-webkit-scrollbar{width:2px;height:2px}
.catalog-layout .table-wrap::-webkit-scrollbar-thumb{border-radius:999px}
.catalog-layout .table-wrap::-webkit-scrollbar-thumb:vertical{background:linear-gradient(180deg,var(--tbl-scroll-v1),var(--tbl-scroll-v2))}
.catalog-layout .table-wrap::-webkit-scrollbar-thumb:horizontal{background:linear-gradient(90deg,var(--tbl-scroll-h1),var(--tbl-scroll-h2))}
.catalog-layout .table-wrap::-webkit-scrollbar-track{background:transparent}
.catalog-layout .table-wrap::after{display:none}
.catalog-layout th,.catalog-layout td{vertical-align:middle}
.catalog-layout .name-wrap{max-width:160px;overflow:hidden;text-overflow:ellipsis}
.catalog-layout .creator-text{max-width:90px}
.catalog-layout .compat-cell{gap:5px}
.catalog-layout .filters-grid{grid-template-columns:1fr;gap:10px;padding-top:28px}
.catalog-layout .field:first-child{grid-column:auto}
.catalog-layout .field label,.catalog-layout .field .field-label{margin-bottom:3px;font-size:10px;line-height:1.2;letter-spacing:.06em;color:color-mix(in srgb,var(--text2) 88%,transparent)}
.catalog-layout #lblSearch:empty{display:none}
/* Alineación natural de labels con headers de tabla usando baseline rhythm */
.catalog-layout .field label {
  margin-bottom: 6px; /* Mantén el espaciado original pero ajusta baseline */
  line-height: 1.4; /* Mejora legibilidad y crea baseline consistente */
  padding-top: 2px; /* Ajuste fino para alineación visual con th */
}

/* Ajuste del input para mantener proporción visual */
.catalog-layout .field input,
.catalog-layout .field .multi-trigger {
  margin-top: 2px; /* Reemplaza el margin-top:8px por un espaciado más natural */
}

/* Search input: wrapper + custom clear button (X) */
.search-wrap { position: relative; display: block }
.search-wrap input[type="search"] { padding-right: 32px }
.search-wrap input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.search-clear {
  position: absolute;
  right: 8px;
  top: calc(50% + 1px); /* +1 compensa margin-top:2px del input */
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--text2);
  border-radius: 50%;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.search-clear:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent2) 50%, var(--line));
  background: color-mix(in srgb, var(--accent2) 12%, var(--surface));
  transform: translateY(-50%) rotate(90deg);
}
.search-clear[hidden] { display: none !important }

/* Asegurar que los th tengan baseline consistente para comparación */
.catalog-layout th {
  line-height: 1.4; /* Matching line-height para coherencia visual */
  padding-top: var(--row-py); /* Usar la variable CSS ya definida para consistencia */
}
.catalog-layout .toolbar-actions{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-height:0;min-width:0;overflow-y:auto}
.catalog-layout .filter-summary{min-height:22px;font-size:11px;line-height:1.4;margin-top:0;display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px;min-width:0;overflow:hidden;position:relative}
/* filter chips */
.filter-chips{display:flex;flex-wrap:wrap;gap:3px;min-width:0;overflow:hidden;padding-right:90px}
.filter-chip{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);color:var(--accent);font:600 10px 'Fira Code',monospace;white-space:nowrap;letter-spacing:.03em;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.filter-chip--key{background:transparent;border-color:transparent;color:var(--soft);padding-left:0;padding-right:3px;letter-spacing:.06em;text-transform:uppercase;margin-top:2px;width:100%}
.filter-chip--val{background:color-mix(in srgb,var(--accent2) 10%,transparent);border-color:color-mix(in srgb,var(--accent2) 26%,transparent);color:var(--accent2);cursor:pointer;gap:4px;transition:border-color .15s,background .15s}
.filter-chip--val:hover{background:color-mix(in srgb,var(--accent2) 20%,transparent);border-color:color-mix(in srgb,var(--accent2) 50%,transparent)}
.chip-x{opacity:.4;transition:opacity .15s;flex-shrink:0}
.filter-chip--val:hover .chip-x{opacity:1}
.n-count{font:700 10px 'Fira Code',monospace;color:var(--soft);white-space:nowrap;position:absolute;top:5px;right:0}
.filter-idle{font:500 11px 'Inter',sans-serif;color:var(--soft);font-style:italic}
/* writeup count badge in table */
.wu-count{display:inline-flex;align-items:center;justify-content:center;margin-left:5px;min-width:16px;height:15px;padding:0 4px;border-radius:5px;background:color-mix(in srgb,var(--accent2) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent2) 30%,transparent);color:var(--accent2);font:700 9px 'Fira Code',monospace;vertical-align:middle;cursor:default}
.catalog-layout #clearFilters{display:flex;width:100%;max-width:100%;min-width:0;height:32px;align-items:center;justify-content:center;justify-self:stretch;margin-top:4px;padding:0 10px;font:700 10px 'Fira Code',monospace;letter-spacing:.06em;text-transform:uppercase;border-radius:10px;border:1px solid color-mix(in srgb,var(--v5-cyan) 36%, var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--v5-cyan) 14%,transparent),color-mix(in srgb,var(--surface) 92%,transparent));box-shadow:0 8px 16px color-mix(in srgb,var(--v5-cyan) 12%,transparent);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .16s ease,visibility .16s ease,transform .16s ease,border-color .16s ease,box-shadow .2s ease}
.catalog-layout #clearFilters.is-visible{visibility:visible;opacity:1;pointer-events:auto}.catalog-layout #clearFilters:hover,.catalog-layout #clearFilters:focus-visible{transform:translateY(-1px);border-color:color-mix(in srgb,var(--v5-cyan) 58%, var(--line));box-shadow:0 12px 22px color-mix(in srgb,var(--v5-cyan) 20%,transparent)}
.catalog-layout .toolbar-quick{display:none}
.catalog-layout .toolbar-quick .quick-link{width:100%;min-height:auto;border-radius:8px;position:relative;right:auto;bottom:auto;display:block;padding:7px 4px;border:none;background:transparent;box-shadow:none}
.catalog-layout .toolbar-quick .quick-main{display:block;width:100%;text-align:left;font:700 11px 'Fira Code',monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--text2)}
.catalog-layout .toolbar-quick .quick-sub{display:none}
.catalog-layout .toolbar-quick .quick-link svg{display:none}
.catalog-layout .toolbar-quick .quick-link:hover,.catalog-layout .toolbar-quick .quick-link:focus-visible{transform:none;color:var(--text);background:linear-gradient(90deg,color-mix(in srgb,var(--v5-cyan) 12%,transparent),transparent)}
.catalog-layout .toolbar-quick .quick-link[data-tip]:hover::after,.catalog-layout .toolbar-quick .quick-link[data-tip]:focus-visible::after{display:none}
.catalog-layout #search{height:34px;padding:0 10px;font-size:13px;border-color:color-mix(in srgb,var(--v5-cyan) 24%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--bg2) 68%,transparent),color-mix(in srgb,var(--surface) 84%,transparent))}
.catalog-layout #search:hover{border-color:color-mix(in srgb,var(--v5-cyan) 52%,var(--line));box-shadow:0 8px 20px color-mix(in srgb,var(--v5-cyan) 16%,transparent)}
.catalog-layout #search:focus-visible{outline:1px solid color-mix(in srgb,var(--v5-cyan) 52%,transparent);outline-offset:1px;box-shadow:0 0 0 3px color-mix(in srgb,var(--v5-cyan) 14%,transparent)}
.catalog-layout .multi-trigger{height:34px;padding:0 10px;font-size:13px;border-color:color-mix(in srgb,var(--v5-cyan) 24%,var(--line))}
.catalog-layout .multi-trigger:hover,.catalog-layout .multi-trigger:focus-visible{border-color:color-mix(in srgb,var(--v5-cyan) 52%,var(--line));box-shadow:0 8px 20px color-mix(in srgb,var(--v5-cyan) 16%,transparent)}
.catalog-layout .multi-panel .multi-option.active{background:linear-gradient(135deg,color-mix(in srgb,var(--v5-cyan) 16%,transparent),color-mix(in srgb,var(--v5-green) 10%,transparent))}
.catalog-layout th{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 97%,transparent),color-mix(in srgb,var(--card) 88%,transparent))}
body.index-page .catalog-layout tbody tr:nth-child(even){background:linear-gradient(90deg,color-mix(in srgb,var(--brand-blue) 3%,transparent),color-mix(in srgb,var(--surface) 14%,transparent))}
body.index-page .catalog-layout tbody tr:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--brand-blue) 5%,color-mix(in srgb,#fff 3%,transparent)),color-mix(in srgb,var(--surface) 93%,transparent) 54%,color-mix(in srgb,var(--surface) 89%,transparent))}
@media (min-width:1121px){
  body.index-page{overflow:hidden}
  .shell.shell-index{height:100dvh;display:grid;grid-template-rows:min-content minmax(0,1fr);overflow:hidden}
  .shell.shell-index .hero-strip{margin-bottom:8px;overflow:hidden}
  .shell.shell-index .hero-copy{overflow:hidden}
  .shell.shell-index .catalog-layout{height:100%;min-height:0;align-items:stretch;--pane-top:0px;--pane-bottom:0px;--pane-height:100%}
  .shell.shell-index .catalog-layout .toolbar,.shell.shell-index .catalog-layout .table-panel{position:relative;top:auto;height:100%;max-height:none}
  .shell.shell-index .catalog-layout .toolbar{padding-top:0}
  .shell.shell-index .catalog-layout .toolbar .filters-grid{padding-top:28px}
  .shell.shell-index .catalog-layout .table-wrap{height:100%;overflow:auto;min-height:0}
}

/* ── Sidebar collapse tab (elegant vertical handle, centered on table edge) ── */
.sb-tab{display:none}
@media(min-width:1121px){
  .sb-pre-collapsed .catalog-layout,.sb-pre-collapsed .catalog-layout .toolbar{transition:none}
  .catalog-layout{transition:grid-template-columns .26s cubic-bezier(.4,0,.2,1),gap .26s cubic-bezier(.4,0,.2,1)}
  .catalog-layout .toolbar{min-width:0;transition:opacity .18s ease,padding .26s,border-color .2s}
  .sb-tab{display:flex;align-items:center;justify-content:center;position:absolute;left:-1px;top:calc(50% - 6px);transform:translateY(-50%);z-index:20;width:18px;height:59px;padding:0;border-radius:0 14px 14px 0;background:linear-gradient(135deg,color-mix(in srgb,var(--surface) 94%,transparent) 18%,color-mix(in srgb,var(--card) 82%,transparent) 55%,color-mix(in srgb,var(--accent2) 8%,var(--card)));border:1px solid color-mix(in srgb,var(--line2) 66%,transparent);border-left:none;color:color-mix(in srgb,var(--text2) 82%,transparent);cursor:pointer;backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);box-shadow:3px 0 14px color-mix(in srgb,#000 16%,transparent),inset 2px 0 0 color-mix(in srgb,var(--accent2) 28%,transparent),inset -1px 0 0 color-mix(in srgb,#fff 6%,transparent);transition:color .24s cubic-bezier(.4,0,.2,1),background .24s cubic-bezier(.4,0,.2,1),border-color .24s cubic-bezier(.4,0,.2,1),box-shadow .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1)}
  .sb-tab::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:2px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent2) 62%,transparent) 22%,color-mix(in srgb,var(--accent) 62%,transparent) 78%,transparent);border-radius:0 2px 2px 0;opacity:.75;transition:opacity .24s ease}
  .sb-tab svg{width:12px;height:12px;flex-shrink:0;transition:transform .32s cubic-bezier(.4,0,.2,1)}
  .sb-tab:hover{color:var(--accent);width:21px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--surface)) 18%,color-mix(in srgb,var(--card) 88%,transparent) 55%,color-mix(in srgb,var(--accent2) 14%,var(--card)));border-color:color-mix(in srgb,var(--accent) 48%,var(--line));box-shadow:4px 0 18px color-mix(in srgb,var(--accent) 26%,transparent),inset 2px 0 0 color-mix(in srgb,var(--accent) 62%,transparent),inset -1px 0 0 color-mix(in srgb,var(--accent) 14%,transparent)}
  .sb-tab:hover::before{opacity:1}
  .sb-tab:hover svg{transform:translateX(-1px)}
  .sb-tab:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 62%,transparent);outline-offset:2px}
  /* Collapsed: sidebar gone completely, table takes full width */
  .catalog-layout.sb-collapsed,.sb-pre-collapsed .catalog-layout{grid-template-columns:0 minmax(0,1fr);gap:0}
  .catalog-layout.sb-collapsed .toolbar,.sb-pre-collapsed .catalog-layout .toolbar{overflow:hidden;padding:0;border-color:transparent;opacity:0;pointer-events:none}
  .sb-tab[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);padding:6px 10px;border-radius:9px;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));background:color-mix(in srgb,var(--surface) 97%,transparent);font:600 10px 'Fira Code',monospace;color:var(--accent);white-space:nowrap;z-index:21;box-shadow:0 8px 20px var(--shadow)}
  .catalog-layout.sb-collapsed .sb-tab{left:0;color:var(--accent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--surface)) 18%,color-mix(in srgb,var(--card) 85%,transparent) 55%,color-mix(in srgb,var(--accent2) 12%,var(--card)));border-color:color-mix(in srgb,var(--accent) 32%,var(--line));box-shadow:3px 0 16px color-mix(in srgb,var(--accent) 16%,transparent),inset 2px 0 0 color-mix(in srgb,var(--accent) 44%,transparent)}
  .catalog-layout.sb-collapsed .sb-tab::before{opacity:1}
  .catalog-layout.sb-collapsed .sb-tab svg{transform:rotate(180deg)}
  .catalog-layout.sb-collapsed .sb-tab:hover svg{transform:rotate(180deg) translateX(-1px)}
}
@media (max-width:1120px){.topbar{padding:10px 12px;grid-template-columns:1fr auto;gap:10px}.top-nav{display:none}.menu-trigger{display:flex}.topbar .brand{justify-self:start;grid-row:1}.topbar .top-actions{justify-self:end;grid-row:1}.topbar.nav-open .mobile-nav{grid-row:2}}
@media (max-width:1120px){.catalog-layout{grid-template-columns:1fr}.catalog-layout .toolbar,.catalog-layout .table-panel{position:static;height:auto;max-height:none;overflow:visible}.catalog-layout .table-thead{overflow:hidden}.catalog-layout .table-wrap{height:auto;max-height:none;overflow-x:auto;overflow-y:hidden}}
@media (max-width:760px){.catalog-layout .toolbar{padding:12px}.catalog-layout .toolbar .filters-grid{padding-top:8px}.catalog-layout .toolbar-actions{grid-template-columns:1fr}.catalog-layout #clearFilters{height:34px}.catalog-layout .table-wrap::-webkit-scrollbar{width:4px;height:4px}.catalog-layout .toolbar-quick{grid-template-columns:1fr 1fr;gap:4px}.catalog-layout .toolbar-quick .quick-link{min-height:auto;padding:6px 3px;border-radius:8px}.catalog-layout .toolbar-quick .quick-main{font-size:10px}.catalog-layout .toolbar-quick .quick-sub{display:none}.page-shortcuts{grid-template-columns:1fr}}

/* Mobile refinements: centered text + responsive sidebar/table/stat cards */
@media (max-width:760px){
  .hero-copy h2,.hero-copy p{ text-align:center }
  .hero-copy p{ font-size:12px; line-height:1.45 }
  .stat-strip{ gap:8px }
  .stat-card{ min-height:52px; padding:5px }
  .stat-card span{ font-size:8px; letter-spacing:.06em }
  .stat-card strong{ font-size:15px }

  .catalog-layout{ gap:10px }
  .catalog-layout .toolbar,.catalog-layout .table-panel{ border-radius:14px }
  .catalog-layout .filters-grid{ gap:8px }
  .catalog-layout .field label,.catalog-layout .field .field-label{ font-size:9px }
  .catalog-layout #search,.catalog-layout .multi-trigger{ height:36px; font-size:12px }

  .catalog-layout .table-wrap{ overflow-x:auto; overflow-y:hidden; padding-bottom:2px; touch-action:auto; overscroll-behavior:auto; -webkit-overflow-scrolling:touch }
  .catalog-layout table{ min-width:0; width:max-content; table-layout:auto }
  .catalog-layout .table-thead table{ table-layout:auto }
  .catalog-layout thead{ display:table-header-group }
  .catalog-layout tbody{ display:table-row-group }
  .catalog-layout tbody tr{ display:table-row; background:transparent; border:none }
  .catalog-layout tbody td{ display:table-cell; border-bottom:1px solid color-mix(in srgb,var(--line) 40%, transparent); padding:var(--row-py) var(--row-px); white-space:nowrap; font-size:var(--cell-fs) }
  .catalog-layout tbody td::before{ content:none }
  .catalog-layout .name-pill,.catalog-layout .creator-text,.catalog-layout .first-blood-text,.catalog-layout .difficulty,.catalog-layout .id-pill{ font-size:inherit }
  .catalog-layout .compat-cell,.catalog-layout .os-cell{ justify-content:center }

  .footer-inner{ width:100%; padding:0 2px }
  .footer-mark{ justify-content:center; gap:8px; flex-wrap:wrap }
  .footer-mark p{ text-align:center; font-size:11px; line-height:1.35 }
}
@media (max-width:520px){
  .stat-strip{ grid-template-columns:1fr 1fr; gap:7px }
  .stat-card{ min-height:48px; padding:5px }
  .stat-card strong{ font-size:14px }
  .catalog-layout tbody td{ font-size:10px }
  .catalog-layout tbody td::before{ font-size:8px }
}
@container (max-width:980px){
  .filters-grid{grid-template-columns:1fr 1fr}
  .field:first-child{grid-column:1 / -1}
}
@container (max-width:760px){
  .filters-grid{grid-template-columns:1fr}
  .toolbar-actions{flex-direction:column;align-items:stretch;gap:8px}
  .toolbar-actions > *{width:100%}
}
/* Force V5 color system globally */
:root{--bg:#0e121c;--bg2:#131a28;--surface:rgba(23,32,49,.9);--card:rgba(20,28,45,.74);--line:rgba(129,154,202,.28);--line2:rgba(129,154,202,.42);--text:#edf3ff;--text2:#9cb1d8;--soft:#9cb1d8;--accent:#13d3ff;--accent2:#5a8bff;--accent3:#8ef0ff;--glow:rgba(19,211,255,.18);--topbar:rgba(23,32,49,.88)}
[data-theme="light"]{--bg:#edf3ff;--bg2:#e5ecfa;--surface:rgba(255,255,255,.92);--card:rgba(245,249,255,.95);--line:rgba(111,132,172,.3);--line2:rgba(111,132,172,.42);--text:#1b273d;--text2:#546788;--soft:#546788;--glow:rgba(19,211,255,.1);--topbar:rgba(255,255,255,.9)}
[data-theme="light"]{--pane-outline:color-mix(in srgb,var(--accent2) 38%, var(--line))}
[data-theme="light"] .topbar,[data-theme="light"] .toolbar,[data-theme="light"] .table-panel,[data-theme="light"] .page-card,[data-theme="light"] .submit-panel{border-color:color-mix(in srgb,var(--line2) 68%,transparent);box-shadow:0 12px 28px color-mix(in srgb,#4b648f 16%,transparent)}
[data-theme="light"] .nav-link,[data-theme="light"] .ghost-btn,[data-theme="light"] .primary-btn,[data-theme="light"] .row-btn,[data-theme="light"] .row-link,[data-theme="light"] .icon-btn,[data-theme="light"] .theme-trigger,[data-theme="light"] .writeup-link,[data-theme="light"] .multi-trigger,[data-theme="light"] .field input,[data-theme="light"] .field select{border-color:color-mix(in srgb,var(--line2) 62%,transparent);background:linear-gradient(180deg,color-mix(in srgb,#fff 95%,transparent),color-mix(in srgb,var(--card) 90%,transparent))}
[data-theme="light"] .social-link:hover,[data-theme="light"] .nav-link:hover,[data-theme="light"] .ghost-btn:hover,[data-theme="light"] .primary-btn:hover,[data-theme="light"] .row-btn:hover,[data-theme="light"] .row-link:hover,[data-theme="light"] .icon-btn:hover,[data-theme="light"] .theme-trigger:hover,[data-theme="light"] .writeup-link:hover,[data-theme="light"] .multi-trigger:hover,[data-theme="light"] .multi-option:hover{border-color:color-mix(in srgb,var(--accent2) 58%,var(--line));box-shadow:0 10px 24px color-mix(in srgb,var(--accent2) 14%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--accent2) 14%,transparent),color-mix(in srgb,#fff 94%,transparent))}
[data-theme="light"] th{background:linear-gradient(180deg,color-mix(in srgb,#fff 98%,transparent),color-mix(in srgb,var(--card) 90%,transparent));box-shadow:0 1px 0 color-mix(in srgb,var(--line2) 44%,transparent)}
[data-theme="light"] tbody td{border-bottom:1px solid color-mix(in srgb,var(--line2) 30%,transparent)}
[data-theme="light"] tbody tr:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--accent2) 10%,transparent),color-mix(in srgb,#fff 92%,transparent))}
[data-theme="light"] .catalog-layout #search:hover,[data-theme="light"] .catalog-layout .multi-trigger:hover,[data-theme="light"] .catalog-layout .multi-trigger:focus-visible{box-shadow:0 10px 24px color-mix(in srgb,var(--v5-cyan) 18%,transparent)}
[data-palette]{--accent:#13d3ff;--accent2:#5a8bff;--accent3:#8ef0ff}

/* ═══════════════════════════════════════════════════════════════════════════
   /machines layout — mockup style: body flex, horizontal toolbar, paginated
   table, footer outside shell. Overrides the catalog-layout grid (sidebar+table).
   ═══════════════════════════════════════════════════════════════════════════ */
body.index-page { display: flex !important; flex-direction: column !important; height: 100vh !important; height: 100dvh !important; margin: 0 !important; overflow: hidden !important }
body.index-page .footer-shell { position: static !important; flex: 0 0 auto !important; bottom: auto !important; z-index: auto !important }
body.index-page .shell.shell-index {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 94px 12px clamp(2px, 0.87dvh, 8px) !important;
  grid-template-rows: none !important;
}
body.index-page .shell.shell-index .hero-strip {
  flex: 0 0 auto !important;
  margin-bottom: 8px !important;    /* = gap interno del catalog-layout → espacio uniforme */
  min-height: 0 !important;         /* anula el min-height:86px base que creaba aire muerto abajo */
}

/* ═══ Stat-cards — compactas de verdad + paleta CTF-hacker ═══ */
/* Rompo el stretch del hero-strip para que las cards NO sean arrastradas a la altura del hero-copy */
body.index-page .shell.shell-index .hero-strip { align-items: center !important }
body.index-page .hero-copy h2 { font-size: 32px !important; line-height: 1 !important }
body.index-page .hero-copy p { font-size: 14px !important; margin-top: 4px !important; line-height: 1.4 !important }
body.index-page .hero-strip,
body.index-page .hero-copy,
body.index-page .stat-strip { min-width: 0 !important }
body.index-page .hero-copy h2,
body.index-page .hero-copy p {
  max-width: 100% !important;
  overflow-wrap: anywhere;
}

body.index-page .stat-strip { gap: 8px !important; align-self: stretch !important }
body.index-page .stat-card {
  min-height: 72px !important;
  height: 72px !important;          /* iguala aprox. la altura del hero-copy */
  padding: 8px 10px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  gap: 4px !important;
}
body.index-page .stat-card strong { font: 700 20px/1 'Fira Code', monospace !important; margin-top: 0 !important }
body.index-page .stat-card span { font-size: 9px !important; letter-spacing: .1em !important; line-height: 1.2 !important }

/* Paleta A (recomendada por experto UX): verde/violeta fijos + magenta/ámbar/teal/coral */
body.index-page .stat-machines { color: #2DA954 !important; background: linear-gradient(145deg, color-mix(in srgb, #2DA954 30%, #0a0e14), color-mix(in srgb, #2DA954 14%, #0a0e14)) !important; border-color: color-mix(in srgb, #2DA954 45%, transparent) !important }
body.index-page .stat-writeups { color: #7756F9 !important; background: linear-gradient(145deg, color-mix(in srgb, #7756F9 30%, #0a0e14), color-mix(in srgb, #7756F9 14%, #0a0e14)) !important; border-color: color-mix(in srgb, #7756F9 45%, transparent) !important }
body.index-page .stat-creators { color: #EC4899 !important; background: linear-gradient(145deg, color-mix(in srgb, #EC4899 30%, #0a0e14), color-mix(in srgb, #EC4899 14%, #0a0e14)) !important; border-color: color-mix(in srgb, #EC4899 45%, transparent) !important }
body.index-page .stat-linux    { color: #F59E0B !important; background: linear-gradient(145deg, color-mix(in srgb, #F59E0B 30%, #0a0e14), color-mix(in srgb, #F59E0B 14%, #0a0e14)) !important; border-color: color-mix(in srgb, #F59E0B 45%, transparent) !important }
body.index-page .stat-windows  { color: #06B6D4 !important; background: linear-gradient(145deg, color-mix(in srgb, #06B6D4 30%, #0a0e14), color-mix(in srgb, #06B6D4 14%, #0a0e14)) !important; border-color: color-mix(in srgb, #06B6D4 45%, transparent) !important }
body.index-page .stat-recent   { color: #EF4444 !important; background: linear-gradient(145deg, color-mix(in srgb, #EF4444 30%, #0a0e14), color-mix(in srgb, #EF4444 14%, #0a0e14)) !important; border-color: color-mix(in srgb, #EF4444 45%, transparent) !important }
body.index-page .catalog-layout {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 4px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  height: auto !important;
  align-items: stretch !important;
}
body.index-page .catalog-layout .toolbar {
  position: static !important;
  top: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 14px 16px !important;
  display: block !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-color: color-mix(in srgb, #bbb 32%, var(--line)) !important;
  box-shadow: none !important;
}
body.index-page .catalog-layout .toolbar .filters-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: end !important;     /* alinea cada .field por su BOTTOM */
  padding-top: 0 !important;
}
body.index-page .filters-grid .field {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;  /* input/button pegados al fondo */
  min-width: 0;
}
body.index-page .filters-grid .field label,
body.index-page .filters-grid .field .field-label {
  margin-bottom: 6px !important;
}
body.index-page .catalog-layout .mk-table-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  overflow: hidden !important;
}
body.index-page .catalog-layout .table-panel {
  position: static !important;
  top: auto !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  border-color: color-mix(in srgb, #bbb 32%, var(--line)) !important;
  box-shadow: none !important;
}
body.index-page .catalog-layout .machines-table-inner {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body.index-page .catalog-layout .table-thead,
body.index-page .catalog-layout .table-wrap {
  scrollbar-gutter: auto !important;
}
body.index-page .catalog-layout .table-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
/* Celdas de la tabla: contenido centrado horizontal y vertical */
body.index-page .catalog-layout tbody td,
body.index-page .catalog-layout thead th {
  text-align: center !important;
  vertical-align: middle !important;
}
body.index-page .catalog-layout tbody .first-blood-text {
  justify-content: center;
}
/* Hide decorative / filter-summary bits (applied in silent-filter mode) */
body.index-page .toolbar-quick,
body.index-page .toolbar-actions,
body.index-page .filter-summary,
body.index-page #clearFilters,
body.index-page .sb-tab { display: none !important }

/* Pager compacto: mismo color/borde que la tabla, con margen interno */
body.index-page #machinesPager {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px 10px 4px !important;
  border: 1px solid color-mix(in srgb, #bbb 32%, var(--line)) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--card) 92%, transparent)) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 44px !important;
}
body.index-page #machinesPager > * { align-self: center !important }
body.index-page #machinesPager .lb-page-btn { min-width: 32px !important; height: 32px !important; padding: 0 8px !important; font-size: 12px !important }
body.index-page #machinesPager .lb-page-nav { font-size: 18px !important; padding: 0 10px !important; line-height: 1 !important }
body.index-page #machinesPager .mk-pager-info { font-size: 12px !important }
body.index-page #machinesPager[hidden] { display: none !important }
/* Filas balanceadas: ni demasiado altas ni apretadas */
body.index-page .catalog-layout tbody td { padding: 7px 10px !important }
body.index-page .catalog-layout tbody .first-blood-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}
body.index-page .mk-pager-info {
  margin-right: auto;
  color: var(--soft);
  font: 500 11.5px 'Fira Code', monospace;
  letter-spacing: .04em;
}
body.index-page .mk-pager-info strong { color: var(--text); font-weight: 700 }

/* ═══ Labels externos ocultos — el nombre del filtro va ADENTRO del trigger ═══ */
body.index-page .filters-grid .field label,
body.index-page .filters-grid .multi-wrap .field-label { display: none !important }

/* ═══ Search field: con icono de lupa adentro (como el mockup) ═══ */
body.index-page .filters-grid .field:first-child { position: relative !important }
body.index-page .filters-grid .field:first-child::after {
  content: "";
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);           /* centrado vertical real, no dependiente de la altura */
  width: 14px; height: 14px;
  background-color: var(--soft);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  mask-size: contain; -webkit-mask-size: contain;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  pointer-events: none;
  opacity: .75;
  transition: background-color .18s ease;
}
body.index-page .filters-grid .field:first-child:focus-within::after { background-color: #3D9CDF; opacity: 1 }
body.index-page .filters-grid .field:first-child input {
  padding-left: 36px !important;
}

/* ═══ Filtros: inputs + triggers LIMPIOS (sin halos, sin glow, sin lift) ═══ */
body.index-page .filters-grid .field input,
body.index-page .filters-grid .field input:hover,
body.index-page .filters-grid .field input:focus,
body.index-page .filters-grid .field input:focus-visible,
body.index-page .filters-grid .multi-trigger,
body.index-page .filters-grid .multi-trigger:hover,
body.index-page .filters-grid .multi-trigger:focus,
body.index-page .filters-grid .multi-trigger:focus-visible {
  transform: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}
/* Hover: solo cambio de borde/fondo, sin glow ni gradient ni lift */
body.index-page .filters-grid .field input:hover,
body.index-page .filters-grid .multi-trigger:hover {
  border-color: color-mix(in srgb, #3D9CDF 45%, var(--line)) !important;
  background: color-mix(in srgb, var(--card) 94%, transparent) !important;
}
body.index-page .filters-grid .field input:focus,
body.index-page .filters-grid .multi-trigger:focus-visible {
  border-color: #3D9CDF !important;
  background: color-mix(in srgb, var(--card) 96%, transparent) !important;
}
body.index-page .filters-grid .multi-trigger.is-selected {
  border-color: color-mix(in srgb, #3D9CDF 60%, var(--line)) !important;
  background: color-mix(in srgb, #3D9CDF 10%, transparent) !important;
  color: var(--text) !important;
}

/* ═══ Dropdown panel — elegante tipo Linear ═══ */
body.index-page .multi-panel,
body.submit-page .multi-panel {
  padding: 0 !important;                 /* sin halo interior — opciones llegan al borde */
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, #3D9CDF 22%, var(--line)) !important;
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 14px 36px color-mix(in srgb, #000 50%, transparent), 0 0 0 1px color-mix(in srgb, #3D9CDF 8%, transparent) !important;
  overflow: hidden !important;           /* recorta las opciones a las esquinas del panel */
  /* ancho: left:0 + right:0 estiran al wrap padre — igual que el mockup */
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
/* Open: block para que los botones hijos ocupen el ancho completo (como el mockup) */
body.index-page .multi-panel.open,
body.submit-page .multi-panel.open {
  display: block !important;
  gap: 0 !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  scrollbar-gutter: auto !important;     /* NO reservar columna del scrollbar cuando no hace falta */
}
/* Override directo para vencer la regla base `.multi-panel{scrollbar-gutter:stable}` */
body.index-page .multi-panel,
body.submit-page .multi-panel {
  scrollbar-gutter: auto !important;
}
/* Scrollbar del panel: delgado y dentro del border-radius */
body.index-page .multi-panel::-webkit-scrollbar,
body.submit-page .multi-panel::-webkit-scrollbar {
  width: 4px !important;
}
body.index-page .multi-panel::-webkit-scrollbar-track,
body.submit-page .multi-panel::-webkit-scrollbar-track {
  background: transparent !important;
}
body.index-page .multi-panel::-webkit-scrollbar-thumb,
body.submit-page .multi-panel::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, #3D9CDF 40%, transparent) !important;
  border-radius: 999px !important;
}
body.index-page .multi-option,
body.submit-page .multi-option {
  padding: 8px 12px !important;
  border-radius: 8px !important;
  color: var(--text2) !important;
  font: 500 12.5px 'Inter', sans-serif !important;
  transition: background .14s ease, color .14s ease !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  border: none !important;
}
body.index-page .multi-option:hover,
body.submit-page .multi-option:hover {
  background: color-mix(in srgb, #3D9CDF 12%, transparent) !important;
  color: var(--text) !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
}
body.index-page .multi-option.active,
body.submit-page .multi-option.active {
  background: color-mix(in srgb, #3D9CDF 22%, transparent) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body.index-page .multi-check,
body.submit-page .multi-check { opacity: .9; color: var(--soft) !important }
body.index-page .multi-option.active .multi-check,
body.submit-page .multi-option.active .multi-check { color: #fff !important; opacity: 1 }
body.index-page .multi-panel::-webkit-scrollbar { width: 6px }
body.index-page .multi-panel::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, #3D9CDF 30%, transparent);
  border-radius: 3px;
}

/* ═══ RESPONSIVE — ajustes por ancho de viewport ═══ */
/* Tablet / pantalla mediana: filters-grid en 3 columnas, filas más compactas */
@media (max-width: 1200px) {
  body.index-page .catalog-layout .toolbar .filters-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  body.index-page .catalog-layout .toolbar .filters-grid .field:first-child { grid-column: 1 / -1 !important }
  body.index-page .catalog-layout tbody td { padding: 6px 8px !important }
  body.index-page .catalog-layout thead th { padding: 8px 8px !important }
}
/* Pantallas chicas: toolbar + filas más apretadas */
@media (max-width: 900px) {
  body.index-page .catalog-layout .toolbar .filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
  body.index-page .catalog-layout tbody td,
  body.index-page .catalog-layout thead th { font-size: 11px !important; padding: 5px 6px !important }
  body.index-page .catalog-layout .name-pill { font-size: 11px !important; padding: 3px 8px !important; min-height: 26px !important }
  /* Name-pill: no desborda — queda como una unidad compacta */
  body.index-page .catalog-layout .name-wrap { max-width: 130px !important }
  body.index-page .catalog-layout .name-pill { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; display: inline-block !important }
  /* Creator padding excesivo en chico */
  body.index-page .catalog-layout thead th.col-creator,
  body.index-page .catalog-layout tbody td.col-creator { padding-left: 10px !important }
}
/* Mobile: scroll horizontal limpio — tabla con min-width fijo, columnas no colapsan */
@media (max-width: 640px) {
  body.index-page .catalog-layout .toolbar .filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
  body.index-page .catalog-layout .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important }
  body.index-page .catalog-layout table { min-width: 560px !important }
  body.index-page .catalog-layout tbody td,
  body.index-page .catalog-layout thead th { font-size: 10.5px !important; padding: 4px 5px !important }
  body.index-page .catalog-layout .name-wrap { max-width: 110px !important }
  body.index-page .catalog-layout thead th.col-creator,
  body.index-page .catalog-layout tbody td.col-creator { padding-left: 8px !important }
  body.index-page .catalog-layout thead th.col-first-user,
  body.index-page .catalog-layout thead th.col-first-root { padding-left: 10px !important }
  body.index-page .catalog-layout tbody td.fb-cell { padding: 4px 6px 4px 28px !important }
  body.index-page .catalog-layout tbody td.fb-cell .fb-ico { left: 8px !important }
  body.index-page #machinesPager {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 8px !important;
    padding: 8px 10px !important;
  }
  body.index-page #machinesPager .mk-pager-info {
    width: 100% !important;
    margin-right: 0 !important;
    text-align: center !important;
  }
}
@media (max-width: 560px) {
  body.index-page .shell.shell-index { padding-left: 10px !important; padding-right: 10px !important }
  body.index-page .hero-strip { grid-template-columns: minmax(0, 1fr) !important }
  body.index-page .hero-copy { width: 100% !important }
  body.index-page .catalog-layout { gap: 10px !important }
  body.index-page .catalog-layout .toolbar { padding-left: 12px !important; padding-right: 12px !important }
  body.index-page .catalog-layout .toolbar .filters-grid { grid-template-columns: 1fr !important }
  body.index-page .catalog-layout .toolbar .filters-grid .field:first-child { grid-column: auto !important }
  body.index-page .catalog-layout .toolbar .filters-grid .field input,
  body.index-page .catalog-layout .toolbar .filters-grid .multi-trigger { width: 100% !important }
  body.index-page .catalog-layout table { min-width: 520px !important }
  body.index-page .catalog-layout .name-wrap { max-width: 120px !important }
  body.index-page .catalog-layout thead th.col-name,
  body.index-page .catalog-layout tbody td.col-name { padding-left: 14px !important }
  body.index-page .catalog-layout thead th.col-creator,
  body.index-page .catalog-layout tbody td.col-creator { padding-left: 6px !important }
  body.index-page .catalog-layout thead th.col-first-user,
  body.index-page .catalog-layout thead th.col-first-root { padding-left: 8px !important }
  body.index-page .catalog-layout tbody td.fb-cell { padding: 4px 6px 4px 24px !important }
  body.index-page .catalog-layout tbody td.fb-cell .fb-ico { left: 6px !important }
  body.index-page .mk-pager-info { font-size: 11px !important }
}
/* ── Mobile: stats en scroll horizontal compacto ── */
@media (max-width: 640px) {
  body.index-page .hero-strip { grid-template-columns: minmax(0, 1fr) !important }
  body.index-page .hero-strip .stat-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
    grid-template-columns: none !important;
  }
  body.index-page .hero-strip .stat-strip::-webkit-scrollbar { display: none !important }
  body.index-page .hero-strip { overflow: visible !important }
  body.index-page .hero-strip .stat-strip .stat-card {
    flex: 1 1 0 !important;
    min-width: 50px !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 4px 5px !important;
    border-radius: 10px !important;
  }
  body.index-page .hero-strip .stat-strip .stat-card strong { font-size: 13px !important }
  body.index-page .hero-strip .stat-strip .stat-card span { font-size: 6.5px !important; letter-spacing: .04em !important }

  /* ── Toolbar: search arriba, filtros como pills horizontales ── */
  body.index-page .catalog-layout .toolbar {
    padding: 6px 12px 6px !important;
  }
  body.index-page .catalog-layout .toolbar .filters-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 6px !important;
    align-items: flex-end !important;
  }
  body.index-page .catalog-layout .toolbar .filters-grid .field:first-child {
    flex: 0 0 100% !important;
  }
  body.index-page .catalog-layout .toolbar .filters-grid .field:not(:first-child) {
    flex: 1 1 calc((100% - 12px) / 3) !important;
    min-width: 0 !important;
  }
  body.index-page .catalog-layout .toolbar .filters-grid .field:not(:first-child) .field-label {
    display: none !important;
  }
  body.index-page .catalog-layout .toolbar .filters-grid .field:not(:first-child) .multi-trigger {
    height: 28px !important;
    font-size: 11px !important;
    padding: 0 8px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  body.index-page .catalog-layout .toolbar .filters-grid .field:not(:first-child) .multi-value {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* Dropdown: anclar al propio pill para que abra justo debajo del botón clickeado */
  body.index-page .catalog-layout .toolbar .filters-grid {
    position: static !important;
  }
  body.index-page .catalog-layout .toolbar .filters-grid .multi-wrap {
    position: relative !important;
  }
  body.index-page .catalog-layout .toolbar .filters-grid .multi-wrap .multi-panel {
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: auto !important;
    min-width: 160px !important;
    max-width: 90vw !important;
    width: auto !important;
  }
  body.index-page #machinesPager .lb-page-btn {
    min-width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 420px) {
  body.index-page .hero-copy h2 {
    font-size: 22px !important;
    line-height: 1.05 !important;
    text-wrap: balance;
  }
  body.index-page .hero-copy p {
    font-size: 12px !important;
    max-width: 32ch !important;
    margin-inline: auto !important;
  }
  body.index-page .catalog-layout table { min-width: 460px !important }
  body.index-page .catalog-layout tbody td,
  body.index-page .catalog-layout thead th { font-size: 10px !important }
  body.index-page .catalog-layout .name-wrap { max-width: 96px !important }
  body.index-page #machinesPager .lb-page-btn {
    min-width: 26px !important;
    height: 26px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }
}
@media (max-width: 390px) {
  body.index-page .shell.shell-index { padding-left: 8px !important; padding-right: 8px !important }
  body.index-page .hero-strip { gap: 10px !important }
  body.index-page .hero-copy h2 {
    font-size: 20px !important;
    line-height: 1.08 !important;
  }
  body.index-page .hero-copy p {
    font-size: 11px !important;
    line-height: 1.45 !important;
    max-width: 28ch !important;
  }
  body.index-page .stat-strip {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body.index-page .stat-card {
    min-height: 52px !important;
    height: auto !important;
    padding: 6px 8px !important;
  }
  body.index-page .stat-card strong { font-size: 15px !important }
  body.index-page .stat-card span { font-size: 8px !important }
  body.index-page .catalog-layout .toolbar {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body.index-page .catalog-layout table { min-width: 430px !important }
  body.index-page .catalog-layout tbody td,
  body.index-page .catalog-layout thead th { font-size: 9.5px !important; padding: 4px !important }
  body.index-page .catalog-layout .name-wrap { max-width: 88px !important }
  body.index-page .catalog-layout tbody td.fb-cell { padding: 4px 4px 4px 22px !important }
  body.index-page .catalog-layout tbody td.fb-cell .fb-ico { left: 5px !important }
  body.index-page #machinesPager { gap: 5px 6px !important; padding: 7px 8px !important }
  body.index-page .mk-pager-info { font-size: 10px !important }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM FILTERS — dropdown minimal, decoradores (dot/img), sin huecos
   ═══════════════════════════════════════════════════════════════════════════ */

/* Layout interno: label-izquierda flex:1, check-derecha flex:0.
   Sin `justify-content: space-between` para que no aparezca gap fantasma */
body.index-page .multi-panel .multi-option,
body.submit-page .multi-panel .multi-option {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: space-between !important;   /* label izq / check der */
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 12px !important;
  margin: 0 !important;                         /* sin margen — llenan el panel edge-to-edge */
  border-radius: 0 !important;                  /* esquinas las recorta el panel via overflow:hidden */
  line-height: 1.3 !important;
  transition: background-color .12s ease !important;
}
body.index-page .multi-panel .multi-option .opt-label,
body.submit-page .multi-panel .multi-option .opt-label {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; flex: 1 1 auto; overflow: hidden;
}
body.index-page .multi-panel .multi-option .multi-check,
body.submit-page .multi-panel .multi-option .multi-check {
  flex: 0 0 auto !important;
}
body.index-page .multi-panel .multi-option .opt-text,
body.submit-page .multi-panel .multi-option .opt-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.index-page .multi-panel .multi-option .opt-count,
body.submit-page .multi-panel .multi-option .opt-count {
  color: color-mix(in srgb, var(--text2) 60%, transparent);
  font-size: 10.5px;
  margin-left: 4px;
}

/* Dots Difficulty — limpios, sin glow pesado */
.opt-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.opt-dot--easy   { background: #9fef00 }
.opt-dot--low    { background: #58a6ff }
.opt-dot--medium { background: #ffaf00 }
.opt-dot--hard   { background: #E85555 }

/* Iconos reales de la plataforma — PNG/SVG en /img/ */
.opt-img {
  width: 16px; height: 16px;
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
  border-radius: 2px;
}

/* Panel: ya se setea arriba con min-width:max-content — sin overrides aquí */

/* Check "+/✓" — siempre visible para cerrar el borde derecho del botón */
body.index-page .multi-panel .multi-check,
body.submit-page .multi-panel .multi-check {
  width: 14px; height: 14px;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--text2) 55%, transparent) !important;
  opacity: .45;
  transition: opacity .12s ease, color .12s ease;
}
body.index-page .multi-panel .multi-option:hover .multi-check,
body.submit-page .multi-panel .multi-option:hover .multi-check { opacity: .8 }
body.index-page .multi-panel .multi-option.active .multi-check,
body.submit-page .multi-panel .multi-option.active .multi-check {
  opacity: 1 !important;
  color: var(--brand-blue, #3D9CDF) !important;
}

/* Hover/active — tint muy sutil, sin fondos saturados */
body.index-page .multi-panel .multi-option:hover,
body.submit-page .multi-panel .multi-option:hover {
  background: color-mix(in srgb, var(--text) 7%, transparent) !important;
}
body.index-page .multi-panel .multi-option.active,
body.submit-page .multi-panel .multi-option.active {
  background: color-mix(in srgb, var(--brand-blue, #3D9CDF) 12%, transparent) !important;
  color: var(--text) !important;
  font-weight: 600;
}

/* Search box dentro del panel — lupa SVG como background, centrada */
body.index-page .multi-panel .panel-search {
  margin: 5px 6px 8px !important;
  width: calc(100% - 12px) !important;
  height: 27px !important;
  padding: 0 10px 0 26px !important;
  font: 500 11.5px 'Inter', sans-serif !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b94a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 12px 12px;
  background-color: color-mix(in srgb, var(--card) 92%, transparent) !important;
  border-color: color-mix(in srgb, var(--line) 72%, transparent) !important;
  border-radius: 6px !important;
  line-height: 1 !important;
}
body.index-page .multi-panel .panel-search:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D9CDF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
  border-color: color-mix(in srgb, var(--brand-blue, #3D9CDF) 35%, var(--line));
}

/* Trigger — decorador (dot/img) dentro del .multi-value */
body.index-page .multi-trigger .multi-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
body.index-page .multi-trigger .multi-value .opt-dot { width: 8px; height: 8px }
body.index-page .multi-trigger .multi-value .opt-img { width: 14px; height: 14px }
body.index-page .multi-trigger.is-selected {
  border-color: color-mix(in srgb, var(--brand-blue, #3D9CDF) 45%, var(--line)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESOURCES — sin hover lift en page-card (contenido estático)
   ═══════════════════════════════════════════════════════════════════════════ */
body.resources-page .page-card:hover {
  transform: none !important;
  box-shadow: 0 12px 28px var(--shadow) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEADERBOARD — todo en una sola página (viewport 100dvh, body flex column)
   ═══════════════════════════════════════════════════════════════════════════ */
body.leaderboard-page {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;                  /* fallback */
  height: 100dvh !important;                 /* dynamic viewport — se adapta a bookmark bar / toolbars */
  margin: 0 !important;
  overflow: hidden !important;
}
/* Sin hover "lift" en el page-card del leaderboard — el hover global lo eleva 2px (línea 346) */
body.leaderboard-page .page-card:hover {
  transform: none !important;
  box-shadow: 0 12px 28px var(--shadow) !important;   /* mantiene sombra base, sin amplificación */
}
body.leaderboard-page .footer-shell {
  position: static !important;
  flex: 0 0 auto !important;
  bottom: auto !important;
  z-index: auto !important;
}
body.leaderboard-page .shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 66px 12px clamp(2px, 0.87dvh, 8px) !important;
}
body.leaderboard-page .page-card {
  margin-top: clamp(2px, 0.87dvh, 8px) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: clamp(2px, 0.65dvh, 6px) 16px clamp(4px, 1.09dvh, 10px) !important;
  overflow: hidden !important;
  border-color: var(--panel-contour-border) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--surface) 96%, transparent)) !important;
  box-shadow: var(--panel-contour-shadow) !important;
}
body.leaderboard-page .lb-table-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin-top: 2px !important;
  overflow: hidden !important;
}

/* Header del leaderboard — flex row, título IZQ + X DER, alineados por center vertical */
body.leaderboard-page .rules-header {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 2px !important;
  grid-template-columns: none !important;
  padding-top: 0 !important;
}
body.leaderboard-page .rules-hero {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  flex: 1 1 auto !important;
}
body.leaderboard-page .hero-copy h2 {
  font-size: 28px !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-align: left !important;
  letter-spacing: -0.01em !important;       /* ajuste óptico Rajdhani en tamaño grande */
}
body.leaderboard-page .rules-hero { text-align: left !important }

/* X close — FIX DEFINITIVO: gana al selector :has() que inyecta translateY(-50%) + rotate(90) */
/* X close del leaderboard — base centrada + rotate 90° en hover (como el resto de las X del sitio)
   + remarcado azul-brand en hover */
body.leaderboard-page .rules-header:has(#leaderboardTitle) .rules-close,
body.leaderboard-page .rules-header:has(#leaderboardTitle) .rules-close:focus,
body.leaderboard-page .rules-header:has(#leaderboardTitle) .rules-close:focus-visible,
body.leaderboard-page .rules-header:has(#leaderboardTitle) .rules-close:active {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;    /* base: centrado vertical */
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .22s ease, color .18s ease, border-color .18s ease, background-color .18s ease !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.leaderboard-page .rules-header:has(#leaderboardTitle) .rules-close svg {
  width: 12px; height: 12px;
}
/* Hover: gira 90° + resalta círculo con azul-brand de la página */
body.leaderboard-page .rules-header:has(#leaderboardTitle) .rules-close:hover {
  transform: translateY(-50%) rotate(90deg) !important;    /* mantiene centrado + rota */
  color: var(--text) !important;
  border-color: color-mix(in srgb, #3D9CDF 70%, var(--line)) !important;
  background: color-mix(in srgb, #3D9CDF 14%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, #3D9CDF 30%, transparent) !important;
}

/* Podium compacto — reducción con valores REALES (sin transform). Agente-designed, ~161px rank1 */
body.leaderboard-page .lb-podium-wrap {
  flex: 0 0 auto !important;
  gap: 12px !important;
  margin: -15px 0 clamp(4px, 1.3dvh, 12px) !important;
  min-height: 196px !important; /* reserva espacio antes del render JS → evita CLS en lb-table-area */
  align-items: flex-end !important;
}
body.leaderboard-page .lb-podium-wrap .lb-podium-slot { width: 215px !important }  /* +15 ancho */
body.leaderboard-page .lb-podium-wrap .lb-pcrown { font-size: 26px !important; margin-bottom: 4px !important }
body.leaderboard-page .lb-podium-wrap .lb-pmedal { font-size: 21px !important; margin-bottom: 4px !important }
body.leaderboard-page .lb-podium-wrap .lb-pcard {
  padding: 12px 14px 10px !important;        /* +1 cada lado */
  border-radius: 14px !important;
}
body.leaderboard-page .lb-podium-wrap .lb-pavatar {
  width: 40px !important; height: 40px !important;
  font: 700 13px 'Fira Code', monospace !important;
  margin-bottom: 4px !important;
  border-width: 1px !important;
}
body.leaderboard-page .lb-podium-wrap .lb-podium-slot.rank2 .lb-pavatar,
body.leaderboard-page .lb-podium-wrap .lb-podium-slot.rank3 .lb-pavatar {
  width: 32px !important; height: 32px !important;
  font-size: 11px !important;
}
body.leaderboard-page .lb-podium-wrap .lb-pname {
  font: 700 15px/1.2 'Rajdhani', sans-serif !important;  /* +1 */
  margin-bottom: 3px !important;
}
body.leaderboard-page .lb-podium-wrap .lb-podium-slot.rank2 .lb-pname,
body.leaderboard-page .lb-podium-wrap .lb-podium-slot.rank3 .lb-pname {
  font-size: 12px !important;
}
body.leaderboard-page .lb-podium-wrap .lb-ppts { font-size: 12px !important; margin-bottom: 2px !important }
body.leaderboard-page .lb-podium-wrap .lb-pmeta { font-size: 10px !important }
body.leaderboard-page .lb-podium-wrap .lb-platform {
  margin-top: 6px !important;
  font-size: 16px !important;
  border-radius: 10px 10px 0 0 !important;
}
/* Alturas platform: rank1 ancla al bottom (align-items:flex-end), crece HACIA ARRIBA */
body.leaderboard-page .lb-podium-wrap .lb-podium-slot.rank1 .lb-platform { height: 56px !important }
body.leaderboard-page .lb-podium-wrap .lb-podium-slot.rank2 .lb-platform { height: 36px !important }
body.leaderboard-page .lb-podium-wrap .lb-podium-slot.rank3 .lb-platform { height: 22px !important }

/* ═══ Controls como una "caja premium" (mismo lenguaje del hero-bar viejo) ═══ */
body.leaderboard-page .lb-controls {
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 10px 16px !important;
  margin: 2px 0 4px !important;
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, #bbb 32%, var(--line)) !important;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent2) 10%, var(--surface)),
    color-mix(in srgb, var(--card) 92%, transparent)) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--panel-contour-shadow) !important;
}

/* Search con icono de LUPA centrado a la izquierda (SVG como background-image) */
body.leaderboard-page .lb-search {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 120px !important;
  max-width: 240px !important;
  height: 30px !important;
  padding: 0 12px 0 30px !important;         /* padding-left 30px para que el texto no se superponga a la lupa */
  font-size: 12px !important;
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, #3D9CDF 42%, var(--line)) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b94a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: 10px center !important;   /* centrada verticalmente */
  background-size: 13px 13px !important;
  background-color: color-mix(in srgb, var(--card) 88%, transparent) !important;
  box-shadow: none !important;
}
body.leaderboard-page .lb-search:focus {
  border-color: color-mix(in srgb, #3D9CDF 66%, var(--line)) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D9CDF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") !important;
}

/* Stats inline dentro de la caja — columnas tipo hero-bar */
body.leaderboard-page .lb-ctrl-stats {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  overflow: hidden;
}
/* Reusa los estilos originales de hero-stat ya definidos en main.css (líneas 222-231):
   .lb-hero-stat { flex column, center, padding 0 16px }
   .lb-hero-stat b { font 700 20px Fira Code }
   .lb-hero-stat span { font 600 9px UPPERCASE }
   .lb-hero-sep { 1px x 26px } — aplican automáticamente porque el JS volvió a renderizarlos */
body.leaderboard-page .lb-hero-stat {
  padding: 0 12px !important;                /* un pelín más apretado al estar en una línea con más cosas */
}
body.leaderboard-page .lb-hero-stat b {
  font-size: 16px !important;                /* más chico que el original 20px para caber con search+period+score */
}
body.leaderboard-page .lb-hero-stat.lb-hero-stat--quiet b {
  animation: none !important;
}

/* Period + Score — trigger reducido, mismo tono acento */
body.leaderboard-page .lb-period-trigger {
  height: 30px !important;
  padding: 0 10px !important;
  border-color: color-mix(in srgb, #3D9CDF 42%, var(--line)) !important;
  background: color-mix(in srgb, var(--card) 88%, transparent) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
body.leaderboard-page .lb-score-info-btn {
  height: 30px !important;
  border-color: color-mix(in srgb, #3D9CDF 42%, var(--line)) !important;
  background: color-mix(in srgb, var(--card) 88%, transparent) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
body.leaderboard-page .lb-period-trigger:hover,
body.leaderboard-page .lb-period-trigger.open,
body.leaderboard-page .lb-score-info-btn:hover,
body.leaderboard-page .lb-sort-btn:hover {
  border-color: color-mix(in srgb, #3D9CDF 60%, var(--line)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, #3D9CDF 8%, transparent), color-mix(in srgb, var(--surface) 88%, transparent)) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, #3D9CDF 10%, transparent) !important;
}
body.leaderboard-page .lb-sort-btn,
body.leaderboard-page .lb-score-info-btn {
  border-color: color-mix(in srgb, #3D9CDF 42%, var(--line)) !important;
  background: color-mix(in srgb, var(--card) 88%, transparent) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
body.leaderboard-page .lb-sort-btn.active {
  border-color: color-mix(in srgb, #3D9CDF 66%, var(--line)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, #3D9CDF 10%, transparent), color-mix(in srgb, var(--surface) 90%, transparent)) !important;
  color: #cfeaff !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent) !important;
}

/* ── Tabla leaderboard: layout limpio ──────────────────────────────────────
   Principio: filas con altura FIJA cómoda. El panel toma solo lo que necesita
   (flex: 0 0 auto). computeLbPageSize() mide los siblings reales para saber
   cuántas filas caben sin cortar la última. page-card hace scroll de fallback. */
body.leaderboard-page .table-panel {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid color-mix(in srgb, #bbb 32%, var(--line)) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--card) 92%, transparent)) !important;
  box-shadow: none !important;
}
body.leaderboard-page .lb-spacer {
  display: none !important;
}
body.leaderboard-page .table-wrap::after,
body.leaderboard-page .table-wrap.is-scrolled-x::after {
  content: none !important;
  display: none !important;
}
body.leaderboard-page .lb-table th[data-sortcol="rank"] {
  width: 72px !important;
  min-width: 72px !important;
}
body.leaderboard-page .lb-table .sort-ind {
  margin-left: 4px !important;
}
body.leaderboard-page .lb-table thead th {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--brand-blue) 10%, transparent) !important;
}
body.leaderboard-page .lb-table thead th:first-child,
body.leaderboard-page .lb-table thead th:last-child {
  border-left: none !important;
  border-right: none !important;
}
body.leaderboard-page .table-wrap {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: block !important;
  border-radius: 0 !important;
  scrollbar-gutter: auto !important;
}
body.leaderboard-page .lb-table {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: table !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
body.leaderboard-page .lb-table thead { display: table-header-group !important }
body.leaderboard-page .lb-table tbody { display: table-row-group !important; min-height: 0 !important }
body.leaderboard-page .lb-table thead tr { height: 28px !important }
body.leaderboard-page .lb-table tbody tr { height: 38px !important }
body.leaderboard-page .lb-table td,
body.leaderboard-page .lb-table th {
  padding: 0 10px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.leaderboard-page .lb-table tbody tr:last-child td {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
body.leaderboard-page .lb-table th:first-child,
body.leaderboard-page .lb-table td:first-child {
  padding-left: 14px !important;
}
body.leaderboard-page .lb-table th:last-child,
body.leaderboard-page .lb-table td:last-child {
  padding-right: 14px !important;
}
body.leaderboard-page #leaderboardTitle,
body.leaderboard-page .lb-podium-wrap,
body.leaderboard-page .lb-pcard,
body.leaderboard-page .lb-pname,
body.leaderboard-page .lb-ppts,
body.leaderboard-page .lb-pmeta,
body.leaderboard-page .lb-platform,
body.leaderboard-page .lb-pavatar,
body.leaderboard-page .lb-ctrl-stats,
body.leaderboard-page .lb-hero-stat,
body.leaderboard-page .lb-hero-stat b,
body.leaderboard-page .lb-hero-stat span,
body.leaderboard-page .lb-hero-sep {
  -webkit-user-select: none !important;
  user-select: none !important;
  caret-color: transparent !important;
}
body.leaderboard-page #leaderboardTitle,
body.leaderboard-page .lb-pname,
body.leaderboard-page .lb-ppts,
body.leaderboard-page .lb-pmeta,
body.leaderboard-page .lb-platform,
body.leaderboard-page .lb-hero-stat b,
body.leaderboard-page .lb-hero-stat span {
  cursor: default !important;
}

/* === Tabla /machines/ — alineación de columnas (recomendación experto UI) ===
   LEFT: texto variable (Name, Creator, First User, First Root)
   CENTER: iconos, badges, botones (OS, Difficulty, Compat, ID, Action) — ya default
   Header sigue al contenido (escuela Linear/Stripe = coherencia visual) */
body.index-page .catalog-layout thead th.col-name,
body.index-page .catalog-layout tbody td.col-name {
  text-align: left !important;
  padding-left: 24px !important;             /* +12 — contenido y header de Name un poco más a la derecha */
}
body.index-page .catalog-layout thead th.col-creator,
body.index-page .catalog-layout tbody td.col-creator {
  text-align: left !important;
  padding-left: 68px !important;             /* +12px respecto a 56 — más aire entre Name y Creator */
}
/* First User / First Root: left con padding-left EXTRA (28px) para reservar espacio del icono 🩸 */
body.index-page .catalog-layout thead th.col-first-user,
body.index-page .catalog-layout thead th.col-first-root {
  text-align: left !important;
  padding-left: 28px !important;
}
body.index-page .catalog-layout tbody td.fb-cell {
  position: relative !important;
  text-align: left !important;
  padding: 7px 10px 7px 44px !important;     /* contenido de fila a X=44 (header sigue en X=28) */
}
body.index-page .catalog-layout tbody td.fb-cell .first-blood-text,
body.index-page .catalog-layout tbody td.fb-cell .fb-row {
  display: block !important;
  text-align: left !important;
  width: 100% !important;
}
body.index-page .catalog-layout tbody td.fb-cell .fb-ico {
  position: absolute !important;
  left: 26px !important;                      /* icono a X=26, texto empieza en X=44 (gap 4px) */
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-align: center !important;
  pointer-events: none !important;
}
body.index-page .catalog-layout tbody td.fb-cell .fb-name {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* Desktop table: compat icons slightly larger, blood icon more visible,
   creator + first text shifted up 1px for better optical alignment */
body.index-page .catalog-layout .os-cell .os-icon,
body.index-page .catalog-layout .compat-cell .compat-icon {
  width: 20px !important;
  height: 20px !important;
}


body.index-page .catalog-layout tbody td.fb-cell .fb-ico {
  font-size: 13px !important;
  width: 16px !important;
  filter: saturate(1.8) brightness(0.85) !important;
  text-shadow:
    0.4px  0.4px 0 rgba(0,0,0,0.7),
   -0.4px  0.4px 0 rgba(0,0,0,0.7),
    0.4px -0.4px 0 rgba(0,0,0,0.7),
   -0.4px -0.4px 0 rgba(0,0,0,0.7) !important;
}

body.index-page .catalog-layout .creator-text {
  vertical-align: middle !important;
}
/* Viewport muy bajo: oculto podium para liberar ~195px (fallback seguro) */
@media (max-height: 640px) {
  body.leaderboard-page .lb-podium-wrap { display: none !important }
}

/* Paginator con margin top Y bottom — compacto */
body.leaderboard-page .lb-paginator {
  flex: 0 0 auto !important;
  margin: 0 0 2px !important;
  padding: 6px 10px 4px !important;
  border-color: color-mix(in srgb, #bbb 32%, var(--line)) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--card) 92%, transparent)) !important;
}


/* Responsive — pantallas chicas */

/* Botones siempre fijos — search es el único que crece/encoge */
body.leaderboard-page .lb-period-wrap  { flex: 0 0 auto !important }
body.leaderboard-page .lb-score-info-btn { flex: 0 0 auto !important }

/* ≤900px: stats ocultas, search rellena el hueco sin sobrepasar los botones */
@media (max-width: 900px) {
  body.leaderboard-page .lb-ctrl-stats { display: none !important }
  body.leaderboard-page .lb-search {
    flex: 1 1 auto !important;
    max-width: calc(100% - 190px) !important; /* deja espacio para period + score + gaps */
  }
}

/* ≤560px: search fila propia, period+score comparten la segunda fila */
@media (max-width: 560px) {
  body.leaderboard-page .lb-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  body.leaderboard-page .lb-controls > * {
    min-width: 0 !important;
    width: 100% !important;
  }
  body.leaderboard-page .lb-search {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    order: 1 !important;
    height: 30px !important;
    width: 100% !important;
  }
  body.leaderboard-page .lb-period-wrap {
    flex: 1 1 auto !important;
    order: 2 !important;
    width: 100% !important;
  }
  body.leaderboard-page .lb-period-trigger {
    width: 100% !important;
    justify-content: center !important;
  }
  body.leaderboard-page .lb-score-info-btn {
    order: 3 !important;
    width: 100% !important;
    justify-content: center !important;
  }
  /* Mobile: podium oculto, paginador compacto visible */
  body.leaderboard-page .lb-podium-wrap { display: none !important }
  body.leaderboard-page .lb-spacer { display: none !important }
  body.leaderboard-page .lb-table-area { overflow-y: auto !important }
  body.leaderboard-page .table-panel { flex: 1 1 auto !important; overflow: hidden !important }
  body.leaderboard-page .table-wrap { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important }
  body.leaderboard-page .lb-table { min-width: 480px !important }
  body.leaderboard-page #lbPaginator { display: flex !important; padding: 4px 8px !important; gap: 3px !important }
  body.leaderboard-page #lbPaginator .lb-page-btn { min-width: 24px !important; height: 24px !important; font-size: 10px !important; padding: 0 5px !important }
}
@media (max-height: 780px) {
  body.leaderboard-page .lb-podium-wrap { transform: scale(0.8); transform-origin: top center; height: 170px !important }
  body.leaderboard-page .hero-copy h2 { font-size: 22px !important }
}
@media (max-height: 680px) {
  body.leaderboard-page .lb-podium-wrap { transform: scale(0.65); transform-origin: top center; height: 130px !important }
  body.leaderboard-page .hero-copy h2 { font-size: 19px !important }
  body.leaderboard-page .lb-hero-stat b { font-size: 13px !important }
  body.leaderboard-page .lb-controls { margin-bottom: 6px !important }
}
@media (max-height: 560px) {
  body.leaderboard-page .lb-podium-wrap { display: none !important }
  body.leaderboard-page .hero-copy h2 { font-size: 17px !important }
}

/* ═══ RESPONSIVE — rangos intermedios y mobile pequeño ═══════════════════ */

/* 640px–760px: tablets pequeñas — toolbar horizontal compacto */
@media (min-width:641px) and (max-width:760px){
  body.index-page .filters-grid{grid-template-columns:1fr 1fr !important}
  .stat-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 760px–900px: tablets — topbar 1fr auto, nav hamburger visible */
@media (min-width:761px) and (max-width:900px){
  .shell{padding-top:96px}
  body.index-page .filters-grid{grid-template-columns:1fr 1fr 1fr !important}
}

/* 900px–1120px: laptops chicas — sidebar fija colapsa, layout 1 col */
@media (min-width:901px) and (max-width:1120px){
  body.index-page .filters-grid{grid-template-columns:1fr 1fr 1fr !important}
  .stat-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ≤480px: mobile pequeño — refinamientos generales */
@media (max-width:480px){
  /* Topbar más compacto */
  .topbar{padding:6px 10px}
  .brand img{height:18px}
  /* Stat cards: 2 columnas apretadas */
  .stat-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .stat-card{min-height:46px;padding:4px}
  .stat-card strong{font-size:13px}
  .stat-card span{font-size:7px}
  /* Submit flow: 1 columna */
  .submit-flow{grid-template-columns:1fr}
  /* Submit group grid: 1 columna */
  .submit-group-grid{grid-template-columns:1fr}
  /* Leaderboard: tabla con scroll */
  .lb-table{min-width:460px}
  /* Pager: texto compacto */
  .lb-page-btn{min-width:28px;height:28px;font-size:10px}
  /* Footer compacto */
  .footer-inner{gap:6px}
  .footer-mark p{font-size:10px}
}

/* /machines final mobile overrides — deben quedar al final para ganar sobre los bloques genéricos */
@media (max-width: 760px) {
  body.index-page .catalog-layout .toolbar .filters-grid { grid-template-columns: 1fr !important }
  body.index-page .catalog-layout .toolbar .filters-grid .field:first-child { grid-column: auto !important }
}
@media (max-width: 480px) {
  body.index-page .stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  body.index-page .stat-card {
    min-height: 46px !important;
    padding: 4px !important;
  }
  body.index-page .stat-card strong { font-size: 13px !important }
  body.index-page .stat-card span { font-size: 7px !important }
}
@media (max-width: 390px) {
  body.index-page .hero-strip { grid-template-columns: minmax(0, 1fr) !important }
  body.index-page .hero-copy h2 {
    font-size: 20px !important;
    line-height: 1.08 !important;
  }
  body.index-page .hero-copy p {
    font-size: 11px !important;
    line-height: 1.45 !important;
    max-width: 28ch !important;
    margin-inline: auto !important;
  }
  body.index-page .stat-strip {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body.index-page .stat-card {
    min-height: 52px !important;
    height: auto !important;
    padding: 6px 8px !important;
  }
  body.index-page .stat-card strong { font-size: 15px !important }
  body.index-page .stat-card span { font-size: 8px !important }
  body.index-page .catalog-layout .toolbar {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body.index-page .catalog-layout .table-panel {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.index-page .catalog-layout table { min-width: 430px !important }
  body.index-page .catalog-layout tbody td,
  body.index-page .catalog-layout thead th {
    font-size: 9.5px !important;
    padding: 4px !important;
  }
  body.index-page .catalog-layout .name-wrap { max-width: 88px !important }
  body.index-page .catalog-layout tbody td.fb-cell { padding: 4px 4px 4px 22px !important }
  body.index-page .catalog-layout tbody td.fb-cell .fb-ico { left: 5px !important }
  body.index-page #machinesPager {
    gap: 5px 6px !important;
    padding: 7px 8px !important;
  }
  body.index-page .mk-pager-info { font-size: 10px !important }
}

/* Final mobile scroll overrides: keep vertical scroll on the document, not inside the shell */
@media (max-width: 760px) {
  /* Reservar alto del hero-copy antes de que cargue el JSON → evita layout shift */
  body.index-page .hero-copy {
    min-height: 72px !important;
  }

  body.index-page .catalog-layout {
    gap: 4px !important;
  }

  body.index-page {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.index-page .shell.shell-index {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-top: 78px !important;
    padding-bottom: 4px !important;
  }

  body.index-page .catalog-layout,
  body.index-page .catalog-layout .toolbar,
  body.index-page .catalog-layout .table-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.index-page .catalog-layout .toolbar,
  body.index-page .catalog-layout .table-panel {
    overflow: visible !important;
  }

  body.index-page .catalog-layout .table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
  }

  body.index-page .catalog-layout .table-panel {
    overflow: hidden !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  body.index-page .catalog-layout .mk-table-area {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.index-page .catalog-layout .table-thead {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  body.index-page .catalog-layout .table-thead table,
  body.index-page .catalog-layout .table-wrap table {
    width: 920px !important;
    min-width: 920px !important;
    max-width: none !important;
    table-layout: fixed !important;
  }

  body.index-page .catalog-layout .table-wrap {
    min-height: 0 !important;
    padding-bottom: 6px !important;
    scrollbar-gutter: auto !important;
    background: transparent !important;
  }

  body.index-page .catalog-layout .table-wrap::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 420px) {
  body.index-page .catalog-layout .table-thead table,
  body.index-page .catalog-layout .table-wrap table {
    width: 880px !important;
    min-width: 880px !important;
  }
}

/* Touch devices requesting desktop site still need document-level scroll.
   Width-based mobile media queries do not fire there, so mirror the safe layout. */
@media (hover: none) and (pointer: coarse) and (min-width: 761px) {
  body.index-page {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.index-page .shell.shell-index {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 4px !important;
  }

  body.index-page .catalog-layout,
  body.index-page .catalog-layout .toolbar,
  body.index-page .catalog-layout .table-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.index-page .catalog-layout .toolbar,
  body.index-page .catalog-layout .table-panel {
    overflow: visible !important;
  }

  body.index-page .catalog-layout .table-panel {
    overflow: hidden !important;
  }

  body.index-page .catalog-layout .table-wrap {
    max-width: 100% !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 6px !important;
    scrollbar-gutter: auto !important;
    background: transparent !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.index-page .catalog-layout .table-wrap::after {
    content: none !important;
    display: none !important;
  }

  body.leaderboard-page {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.leaderboard-page .shell {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 16px !important;
  }

  body.leaderboard-page .page-card,
  body.leaderboard-page .lb-table-area {
    overflow: visible !important;
  }

  body.leaderboard-page .table-panel {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.leaderboard-page .table-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 760px) {
  body.leaderboard-page {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.leaderboard-page .shell {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 16px !important;
  }

  body.leaderboard-page .page-card,
  body.leaderboard-page .lb-table-area {
    overflow: visible !important;
  }

  body.leaderboard-page .lb-search {
    font-size: 16px !important;
  }

  body.leaderboard-page .table-panel {
    padding: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.leaderboard-page .table-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.leaderboard-page .lb-table {
    min-width: 632px !important;
    width: 632px !important;
    max-width: none !important;
    table-layout: auto !important;
  }

  body.leaderboard-page .lb-table th:nth-child(2),
  body.leaderboard-page .lb-table td:nth-child(2) {
    min-width: 154px !important;
    width: 154px !important;
    max-width: 154px !important;
    text-align: left !important;
  }

  body.leaderboard-page .lb-table th:nth-child(1),
  body.leaderboard-page .lb-table td:nth-child(1) {
    min-width: 58px !important;
    width: 58px !important;
  }

  body.leaderboard-page .lb-table th:nth-child(3),
  body.leaderboard-page .lb-table td:nth-child(3) {
    min-width: 86px !important;
    width: 86px !important;
  }

  body.leaderboard-page .lb-table th:nth-child(4),
  body.leaderboard-page .lb-table td:nth-child(4),
  body.leaderboard-page .lb-table th:nth-child(7),
  body.leaderboard-page .lb-table td:nth-child(7),
  body.leaderboard-page .lb-table th:nth-child(8),
  body.leaderboard-page .lb-table td:nth-child(8) {
    min-width: 64px !important;
    width: 64px !important;
  }

  body.leaderboard-page .lb-table th:nth-child(5),
  body.leaderboard-page .lb-table td:nth-child(5),
  body.leaderboard-page .lb-table th:nth-child(6),
  body.leaderboard-page .lb-table td:nth-child(6) {
    min-width: 74px !important;
    width: 74px !important;
  }
}

@media (max-width: 520px) {
  .swal2-popup.vn-swal-popup {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 12px !important;
  }

  .swal2-popup.vn-swal-popup .swal2-title {
    font-size: 24px !important;
    line-height: 1.06 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding: 0 36px 10px 0 !important;
  }

  /* ── Modal hero: premium mobile redesign ── */
  .modal-card-hero {
    margin: -12px -12px 8px !important;
    border-radius: 16px 16px 14px 14px !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--line) 28%, transparent) !important;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--shadow) 36%, transparent) !important;
  }

  .mch-left {
    width: 100% !important;
    height: 172px !important;
    padding: 18px 16px !important;
    border-right: none !important;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 18%, transparent) !important;
    background:
      radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--accent) 32%, transparent) 0%, transparent 62%),
      radial-gradient(ellipse at 85% 90%, color-mix(in srgb, var(--accent2) 16%, transparent) 0%, transparent 48%),
      var(--bg) !important;
  }

  .mch-img {
    max-height: 138px !important;
    filter: drop-shadow(0 10px 32px color-mix(in srgb, var(--accent) 52%, transparent)) !important;
  }

  .mch-right {
    width: 100% !important;
    padding: 14px 14px 16px !important;
    justify-content: flex-start !important;
    background: color-mix(in srgb, var(--surface) 60%, var(--bg)) !important;
  }

  /* Info rows → 2-column mini-card grid */
  .mch-info-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-top: 4px !important;
    min-height: 0 !important;
  }

  .mch-info-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--surface) 55%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--line) 32%, transparent) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .mch-info-row:last-child {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .mch-info-lbl {
    width: auto !important;
    font-size: 8px !important;
    letter-spacing: .09em !important;
    color: var(--soft) !important;
  }

  .mch-info-val {
    font-size: 11px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
  }

  .mch-info-val .difficulty,
  .pts-root-badge,
  .pts-user-badge {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 760px) {
  body.index-page .catalog-layout .table-thead table,
  body.index-page .catalog-layout .table-wrap table {
    width: 978px !important;
    min-width: 978px !important;
  }

  body.index-page .catalog-layout .table-thead th:nth-child(4),
  body.index-page .catalog-layout .table-wrap td:nth-child(4) {
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
  }

  body.index-page .catalog-layout .name-wrap {
    display: block !important;
    width: 168px !important;
    max-width: 168px !important;
    min-width: 0 !important;
  }

  body.index-page .catalog-layout .name-pill {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 5px 12px !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 420px) {
  body.index-page .catalog-layout .table-thead table,
  body.index-page .catalog-layout .table-wrap table {
    width: 948px !important;
    min-width: 948px !important;
  }

  body.index-page .catalog-layout .table-thead th:nth-child(4),
  body.index-page .catalog-layout .table-wrap td:nth-child(4) {
    width: 168px !important;
    min-width: 168px !important;
    max-width: 168px !important;
  }

  body.index-page .catalog-layout .name-wrap {
    width: 156px !important;
    max-width: 156px !important;
  }
}

body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .vm-card,
body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .vm-card-bar,
body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .vm-card-left,
body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .vm-card-row,
body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .meta-box,
body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .writeup-card,
body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .wu-row-icon {
  border-color: color-mix(in srgb, #bbb 22%, var(--line)) !important;
}

body.index-page .swal2-popup.vn-swal-popup {
  border-color: color-mix(in srgb, #bbb 32%, var(--line)) !important;
  box-shadow: 0 28px 64px var(--shadow), 0 0 0 1px color-mix(in srgb, #bbb 10%, transparent) !important;
}

body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .dialog-btn-row .primary-btn,
body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .dialog-btn-row .dialog-dl-btn,
body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .dialog-btn-row .dialog-submit-btn {
  border-color: color-mix(in srgb, #bbb 42%, var(--line)) !important;
}

body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .dialog-btn-row .primary-btn:hover,
body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .dialog-btn-row .dialog-dl-btn:hover,
body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .dialog-btn-row .dialog-submit-btn:hover {
  border-color: color-mix(in srgb, #bbb 58%, var(--line)) !important;
}

body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .vm-card {
  border-color: color-mix(in srgb, #bbb 32%, var(--line)) !important;
  box-shadow: 0 24px 60px color-mix(in srgb, #000 45%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent) !important;
}

body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .mch-left {
  border-right-color: color-mix(in srgb, #bbb 20%, transparent) !important;
}

body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .vm-card-sep {
  color: var(--soft);
  margin: 0 2px;
}

body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .wu-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, #fff 6%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 4%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--card) 94%, transparent));
  color: #d6d6d6;
  opacity: 1;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 12%, transparent),
    0 6px 16px color-mix(in srgb, #000 18%, transparent);
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .wu-row-icon svg {
  width: 14px;
  height: 14px;
  stroke: none;
  fill: currentColor;
}

body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .wu-row-icon--video {
  color: #3D9CDF;
  background: none;
  font-size: 11px;
}

body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .wu-row-icon--text {
  color: #7eb8ff;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 5%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, #7eb8ff 10%, var(--surface)), color-mix(in srgb, #7eb8ff 4%, var(--card)));
  font-size: 11px;
}

body.index-page .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html .wu-row:hover .wu-row-icon {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, #fff 12%, var(--line));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 14%, transparent),
    0 10px 22px color-mix(in srgb, #000 24%, transparent);
}

/* Final hardening for /machines table:
   let the actual container width/height drive the table instead of mobile fixed widths. */
body.index-page .catalog-layout .mk-table-area,
body.index-page .catalog-layout .table-panel,
body.index-page .catalog-layout .machines-table-inner,
body.index-page .catalog-layout .table-thead,
body.index-page .catalog-layout .table-wrap {
  min-width: 0 !important;
}

body.index-page .catalog-layout .table-wrap {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body.index-page .catalog-layout .table-thead table,
body.index-page .catalog-layout .table-wrap table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

body.index-page .catalog-layout .name-wrap,
body.index-page .catalog-layout .creator-text,
body.index-page .catalog-layout .fb-name {
  min-width: 0 !important;
}

body.index-page .catalog-layout .name-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.index-page .catalog-layout .name-pill {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
}

@media (max-width: 1120px) {
  body.index-page {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.index-page .shell.shell-index {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.index-page .catalog-layout .mk-table-area {
    overflow: visible !important;
  }
}

@media (max-width: 760px) {
  body.index-page .catalog-layout .table-wrap {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  body.index-page .catalog-layout .table-thead table,
  body.index-page .catalog-layout .table-wrap table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  body.index-page .catalog-layout .table-thead th:nth-child(4),
  body.index-page .catalog-layout .table-wrap td:nth-child(4) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body.index-page .catalog-layout tbody td.fb-cell {
    padding-left: 32px !important;
  }

  body.index-page .catalog-layout tbody td.fb-cell .fb-ico {
    left: 14px !important;
  }

  body.index-page .catalog-layout thead th,
  body.index-page .catalog-layout tbody td {
    padding: 6px 4px !important;
    font-size: 10px !important;
  }

  body.index-page .catalog-layout thead th:nth-child(1),
  body.index-page .catalog-layout tbody td:nth-child(1) {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }

  body.index-page .catalog-layout thead th:nth-child(3),
  body.index-page .catalog-layout tbody td:nth-child(3) {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }

  body.index-page .catalog-layout thead th:nth-child(6),
  body.index-page .catalog-layout tbody td:nth-child(6) {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
  }

  body.index-page .catalog-layout thead th:nth-child(10),
  body.index-page .catalog-layout tbody td:nth-child(10) {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
  }

  body.index-page .catalog-layout .row-btn {
    min-width: 58px !important;
    padding: 4px 10px !important;
    font-size: 10px !important;
  }

  body.index-page .catalog-layout .id-pill {
    min-width: 40px !important;
    padding: 5px 6px !important;
    font-size: 9px !important;
  }

  body.index-page .catalog-layout .difficulty {
    min-width: 0 !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
  }

  body.index-page .catalog-layout .name-wrap {
    max-width: none !important;
  }

  body.index-page .catalog-layout .name-pill {
    padding: 4px 8px !important;
    min-height: 0 !important;
  }
}

@media (max-width: 420px) {
  body.index-page .catalog-layout thead th,
  body.index-page .catalog-layout tbody td {
    padding: 5px 3px !important;
    font-size: 9.5px !important;
  }

  body.index-page .catalog-layout thead th:nth-child(1),
  body.index-page .catalog-layout tbody td:nth-child(1) {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }

  body.index-page .catalog-layout thead th:nth-child(6),
  body.index-page .catalog-layout tbody td:nth-child(6) {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }

  body.index-page .catalog-layout thead th:nth-child(10),
  body.index-page .catalog-layout tbody td:nth-child(10) {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
  }

  body.index-page .catalog-layout .row-btn {
    min-width: 54px !important;
    padding: 4px 8px !important;
  }
}

@media (max-width: 760px) {
  body.index-page .catalog-layout .table-thead {
    display: none !important;
  }

  body.index-page .catalog-layout .table-wrap {
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  body.index-page .catalog-layout .table-wrap table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.index-page .catalog-layout .table-wrap tbody {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.index-page .catalog-layout .table-wrap tbody tr {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "id os"
      "name name"
      "creator difficulty"
      "action action" !important;
    align-items: center !important;
    gap: 8px 10px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid color-mix(in srgb, #bbb 26%, var(--line)) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--card) 92%, transparent)) !important;
    box-sizing: border-box !important;
  }

  body.index-page .catalog-layout .table-wrap tbody td {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  body.index-page .catalog-layout .table-wrap tbody td:nth-child(1) {
    grid-area: id !important;
    width: auto !important;
  }

  body.index-page .catalog-layout .table-wrap tbody td:nth-child(3) {
    grid-area: os !important;
    width: auto !important;
    justify-content: flex-start !important;
  }

  body.index-page .catalog-layout .table-wrap tbody td:nth-child(4) {
    grid-area: name !important;
  }

  body.index-page .catalog-layout .table-wrap tbody td:nth-child(5) {
    grid-area: creator !important;
  }

  body.index-page .catalog-layout .table-wrap tbody td:nth-child(6) {
    grid-area: difficulty !important;
    justify-content: flex-end !important;
  }

  body.index-page .catalog-layout .table-wrap tbody td:nth-child(10) {
    grid-area: action !important;
    width: 100% !important;
    justify-content: stretch !important;
    align-self: stretch !important;
  }

  body.index-page .catalog-layout .table-wrap .os-cell {
    justify-content: flex-start !important;
  }

  body.index-page .catalog-layout .table-wrap .name-wrap,
  body.index-page .catalog-layout .table-wrap .creator-text {
    max-width: 100% !important;
    width: 100% !important;
  }

  body.index-page .catalog-layout .table-wrap .name-pill {
    min-height: 32px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  body.index-page .catalog-layout .table-wrap .creator-text {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--text2) !important;
    font-size: 11px !important;
  }

  body.index-page .catalog-layout .table-wrap .difficulty {
    margin-left: auto !important;
    font-size: 10px !important;
  }

  body.index-page .catalog-layout .table-wrap .row-btn {
    width: 100% !important;
    min-width: 68px !important;
    min-height: 34px !important;
    padding: 6px 12px !important;
    font-size: 10px !important;
  }

  body.index-page .catalog-layout .table-wrap .id-pill {
    min-width: 42px !important;
    padding: 4px 8px !important;
  }
}

@media (max-width: 420px) {
  body.index-page .catalog-layout .table-wrap tbody tr {
    padding: 10px !important;
  }
}

/* Final mobile restore: keep a real table with all columns and only natural horizontal scroll. */
@media (max-width: 760px) {
  body.index-page .catalog-layout .table-thead {
    display: block !important;
    overflow: hidden !important;
  }

  body.index-page .catalog-layout .table-wrap {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.index-page .catalog-layout .table-thead table,
  body.index-page .catalog-layout .table-wrap table {
    display: table !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
  }

  body.index-page .catalog-layout .table-wrap tbody {
    display: table-row-group !important;
  }

  body.index-page .catalog-layout .table-wrap tbody tr {
    display: table-row !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.index-page .catalog-layout .table-wrap tbody td,
  body.index-page .catalog-layout .table-thead th {
    display: table-cell !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    padding: 7px 8px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 40%, transparent) !important;
    white-space: nowrap !important;
    overflow: visible !important;
    background: transparent !important;
    vertical-align: middle !important;
  }

  body.index-page .catalog-layout .table-wrap tbody td:nth-child(1),
  body.index-page .catalog-layout .table-thead th:nth-child(1) {
    min-width: 56px !important;
  }

  body.index-page .catalog-layout .table-wrap tbody td:nth-child(2),
  body.index-page .catalog-layout .table-thead th:nth-child(2) {
    min-width: 40px !important;
  }

  body.index-page .catalog-layout .table-wrap tbody td:nth-child(4),
  body.index-page .catalog-layout .table-thead th:nth-child(4) {
    min-width: 152px !important;
  }

  body.index-page .catalog-layout .table-wrap tbody td:nth-child(10),
  body.index-page .catalog-layout .table-thead th:nth-child(10) {
    min-width: 78px !important;
  }

  body.index-page .catalog-layout .name-wrap {
    display: block !important;
    width: 152px !important;
    min-width: 152px !important;
    max-width: 152px !important;
    overflow: hidden !important;
  }

  body.index-page .catalog-layout .name-pill {
    display: flex !important;
    width: 152px !important;
    min-width: 152px !important;
    max-width: 152px !important;
    min-height: 28px !important;
    padding: 4px 10px !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.index-page .catalog-layout .creator-text,
  body.index-page .catalog-layout .fb-name {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.index-page .catalog-layout .table-wrap tbody td.fb-cell {
    padding: 7px 8px 7px 28px !important;
  }

  body.index-page .catalog-layout .table-wrap tbody td.fb-cell .fb-ico {
    left: 10px !important;
  }

  body.index-page .catalog-layout .row-btn {
    width: auto !important;
    min-width: 66px !important;
    padding: 5px 10px !important;
  }
}

@media (max-width: 420px) {
  body.index-page .catalog-layout .table-wrap tbody td,
  body.index-page .catalog-layout .table-thead th {
    padding: 6px 7px !important;
    font-size: 9.5px !important;
  }

  body.index-page .catalog-layout .table-wrap tbody td:nth-child(4),
  body.index-page .catalog-layout .table-thead th:nth-child(4) {
    min-width: 136px !important;
  }

  body.index-page .catalog-layout .name-wrap,
  body.index-page .catalog-layout .name-pill {
    width: 136px !important;
    min-width: 136px !important;
    max-width: 136px !important;
  }

  body.index-page .catalog-layout .table-wrap tbody td:nth-child(10),
  body.index-page .catalog-layout .table-thead th:nth-child(10) {
    min-width: 72px !important;
  }
}

/* ── Mobile fixes: iOS scroll, dialog, filters ── */

/* View dialog: momentum scroll en iOS y altura segura */
@media (max-width: 760px) {
  .swal2-popup.vn-swal-popup {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    max-height: min(calc(100dvh - 80px), calc(100svh - 60px)) !important;
  }
}

/* Filter dropdown: z-index superior a cualquier elemento de la tabla */
@media (max-width: 640px) {
  body.index-page .catalog-layout .toolbar .filters-grid .multi-wrap .multi-panel.open {
    z-index: 50 !important;
  }
}

/* Leaderboard, rules, resources, credits, legal: ajustes mobile */
@media (max-width: 760px) {
  /* Pegar page-card al topbar: topbar mide ~46px, eliminar margin-top de la card */
  body.credits-page .shell,
  body.rules-page .shell,
  body.resources-page .shell {
    padding-top: 46px !important;
  }

  body.credits-page .page-card,
  body.rules-page .page-card,
  body.resources-page .page-card {
    margin-top: 0 !important;
  }

  /* rules-header padding-top innecesario en mobile */
  body.credits-page .rules-header,
  body.rules-page .rules-header,
  body.resources-page .rules-header {
    padding-top: 4px !important;
  }

  /* Title should be left-aligned in rules-header context, not centered */
  body.credits-page .rules-hero h2,
  body.rules-page .rules-hero h2,
  body.resources-page .rules-hero h2,
  body.legal-page .rules-hero h2,
  body.credits-page .rules-hero p,
  body.rules-page .rules-hero p,
  body.resources-page .rules-hero p,
  body.legal-page .rules-hero p {
    text-align: left !important;
  }

  body.legal-page .shell {
    padding-top: 46px !important;
  }

  body.legal-page .page-card {
    margin-top: 0 !important;
  }

  body.legal-page .rules-header {
    padding-top: 4px !important;
  }

  /* dialog-action-bar: columna única centrada, sin espacio gris lateral */
  .dialog-action-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 0 4px !important;
  }

  .dialog-action-bar .tag-list,
  .dialog-action-bar .dialog-tags {
    width: 100% !important;
    justify-content: center !important;
  }

  /* dialog-btn-row: centrar botones en mobile (override del base flex-end que viene después) */
  .dialog-btn-row {
    justify-content: center !important;
    width: 100% !important;
  }
}

/* ── meta-grid: 2 columnas premium en mobile ── */
@media (max-width: 760px) {
  .meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .meta-box {
    padding: 9px 11px !important;
    border-radius: 12px !important;
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(145deg,
      color-mix(in srgb, var(--card) 92%, transparent),
      color-mix(in srgb, var(--surface) 96%, transparent)) !important;
    border: 1px solid color-mix(in srgb, var(--line) 52%, transparent) !important;
  }

  .meta-box::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1.5px !important;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent2) 52%, transparent),
      transparent 68%) !important;
  }

  .meta-box strong {
    display: block !important;
    margin-bottom: 4px !important;
    font: 700 9px/1 'Fira Code', monospace !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: color-mix(in srgb, var(--accent2) 68%, var(--text2)) !important;
  }

  .meta-val {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
}

/* ── iOS: swal2 modal scroll fix ──
   iOS WebKit requires an explicit height (not just max-height) on a scroll
   container to activate touch scroll. The reliable pattern is:
   popup = fixed-height flex column, overflow:hidden (does NOT scroll)
   html-container = flex:1, overflow-y:scroll, explicit height via flex
   This guarantees iOS routes the touch gesture to the correct scroller. */
@media (max-width: 760px) {
  .swal2-popup.vn-swal-popup {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100svh - 56px) !important;
    max-height: calc(100svh - 56px) !important;
    overflow: hidden !important;
    padding: 14px !important;
    box-sizing: border-box !important;
  }

  /* Close button: force absolute so it doesn't become a flex item */
  .swal2-popup.vn-swal-popup .swal2-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
  }

  /* Title row: shrink to its natural height */
  .swal2-popup.vn-swal-popup .swal2-title {
    flex: 0 0 auto !important;
  }

  /* Content area: grows to fill remaining space, THIS is the scroller */
  .swal2-popup.vn-swal-popup .swal2-html-container.vn-swal-html {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* backdrop-filter + position:fixed: GPU compositing fix for iOS */
@supports (-webkit-touch-callout: none) {
  .swal2-container.vn-swal-container {
    pointer-events: all !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
  }
}