/* CYBERZVER home: shared navy surfaces and restrained blue accents. */
body:has(#rowModsServers){--cz-home-bg:#071522;--cz-home-panel:#0d2031;--cz-home-border:#294357;--cz-home-text:#cee7f4;--cz-home-muted:#91afc4;--cz-home-accent:#63b4ee;background:var(--cz-home-bg)}
body:has(#rowModsServers) .global-container{background:linear-gradient(180deg,#091b2b 0,#071522 650px,#071522 100%)}
body:has(#rowModsServers) .navbar .store_nav_cta{color:#b5d9ef!important;font-size:15px;text-shadow:none!important}
body:has(#rowModsServers) .navbar_usermenu>button,body:has(#rowModsServers) .navbar_usermenu>a{border-radius:12px}
body:has(#rowModsServers) .spb{border-color:var(--cz-home-border);border-radius:18px;background:var(--cz-home-panel)}
body:has(#rowModsServers) .spb__lead{color:var(--cz-home-muted);font-size:14px;line-height:1.5}
body:has(#rowModsServers) .spb__reward{border-radius:9px;border-color:#2b4960;background:#142d41}
body:has(#rowModsServers) .spb__cta{border-radius:10px;background:#2b638d;border:1px solid #4686b2;color:#e4f3ff;box-shadow:none}
@media (hover: hover) and (pointer: fine){
body:has(#rowModsServers) .spb__cta:hover{background:#357aa9;border-color:#79bee9;transform:translateY(-1px)}}
body:has(#rowModsServers) .spb__note{color:#91afc4;font-size:12px}
#rowModsServers .modes-header{margin-top:32px;margin-bottom:18px;gap:12px}
#rowModsServers .modes-header__title{color:#cee7f4;font-size:20px;letter-spacing:-.02em}
#rowModsServers .modes-header__icon{color:#84acc5;fill:currentColor;width:22px;height:22px}
#rowModsServers .modes-live{padding:7px 11px;border:1px solid #294357;border-radius:9px;background:#0d2031;color:#91afc4;gap:7px;font-size:11px}
#rowModsServers .modes-live b{color:#cee7f4;font-variant-numeric:tabular-nums}
#rowModsServers .mods__wrapper{gap:16px}
#rowModsServers .mods__card{border-radius:18px;border-color:#294357;box-shadow:none}
@media (prefers-reduced-motion: no-preference){
#rowModsServers .mods__card{transition:border-color .2s, box-shadow .2s}}
#rowModsServers .mods__card:focus-within{border-color:#5794be;box-shadow:0 8px 24px #020a1333}
@media (hover: hover) and (pointer: fine){
#rowModsServers .mods__card:hover{border-color:#5794be;box-shadow:0 8px 24px #020a1333}}
#rowModsServers .mods__head{padding:20px 20px 32px}
#rowModsServers .mods__name{font-size:21px;letter-spacing:-.02em;color:#d5edf9}
#rowModsServers .mods__online{width:max-content;padding:4px 7px;border-radius:6px;background:#0818279c;color:var(--cz-home-muted);font-size:11px}
#rowModsServers .mods__online.is-online{color:var(--green)}
#rowModsServers .mods__choose{border-radius:10px;background:#264e6b;border-color:#3b6b8d;min-height:38px}
@media (hover: hover) and (pointer: fine){
#rowModsServers .mods__choose:hover{background:#326a92}}
#rowModsServers .purchases-header{margin-top:34px}
#rowModsServers .purchases__card{border:1px solid #294357;border-radius:12px;background:var(--cz-home-panel);flex-basis:max(240px,calc((100% - 60px)/6));padding:9px;gap:5px;box-shadow:none}
#rowModsServers .purchases__head{gap:7px}
#rowModsServers .purchases__nick{color:#d1e9f5;font-size:13px;font-weight:700}
#rowModsServers .purchases__avatar{inline-size:24px;block-size:24px;border-radius:7px;border:1px solid #365168}
#rowModsServers .purchases__kind{border-radius:6px;font-size:9px;letter-spacing:.04em;padding:3px 6px}
#rowModsServers .purchases__item{color:var(--cz-home-muted);font-size:12px;line-height:1.5;margin-block:0;min-block-size:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rowModsServers .purchases__item b{color:#c9e4f3}
#rowModsServers .purchases__foot{margin-block:0;padding:5px 0 0;gap:6px;border-top:1px solid #263e51;border-radius:0;background:transparent;color:var(--cz-home-muted)}
#rowModsServers .purchases__date{font-size:11px;color:#91afc4}
#rowModsServers .purchases__price{color:#c8e7fa;font-weight:700}
#rowModsServers .purchases__nav{inline-size:32px;block-size:32px;border:1px solid #35556c;border-radius:9px;background:#122b3e;color:#cfe8f6;box-shadow:0 3px 12px #0003}
#rowModsServers .purchases__nav svg{inline-size:20px;block-size:20px}
#rowModsServers .statistics_grid{margin-top:26px;padding:0;border:1px solid #294357;border-radius:16px;background:#0d2031;gap:0;overflow:hidden}
#rowModsServers .statistics_container{padding:22px 16px;gap:10px;min-width:0;border-right:1px solid #294357;justify-content:center}
#rowModsServers .statistics_container:last-child{border-right:0}
#rowModsServers .statistics_icon{width:23px;flex-shrink:0;opacity:.85}
#rowModsServers .statistics_name{font-size:11px;color:#91afc4;line-height:1.4}
#rowModsServers .statistics_number{font-size:25px;line-height:1.4;letter-spacing:-.025em;color:#cee7f4;font-variant-numeric:tabular-nums}
body:has(#rowModsServers) .footer_global{max-width:1180px;margin:42px auto 0;color:#91afc4}
body:has(#rowModsServers) .footer_global a{color:#91afc4}
@media (hover: hover) and (pointer: fine){
body:has(#rowModsServers) .footer_global a:hover{color:#cfeaff}}
@media(max-width:1000px){#rowModsServers .statistics_container{padding:18px 10px;gap:7px}#rowModsServers .statistics_number{font-size:21px}body:has(#rowModsServers) .footer_global{margin-left:24px;margin-right:24px}}
@media(max-width:600px){#rowModsServers .modes-header{margin-top:24px;margin-bottom:14px}#rowModsServers .modes-header__title{font-size:16px}#rowModsServers .modes-live{font-size:10px;padding:6px 8px}#rowModsServers .mods__head{padding:18px}#rowModsServers .mods__wrapper{gap:12px}#rowModsServers .statistics_grid{grid-template-columns:repeat(2,minmax(0,1fr))}#rowModsServers .statistics_container{justify-content:flex-start;border-right:0;border-bottom:1px solid #294357;padding:16px}#rowModsServers .statistics_container:nth-child(odd){border-right:1px solid #294357}#rowModsServers .statistics_container:last-child{grid-column:1/-1;border:0;justify-content:center}body:has(#rowModsServers) .spb__lead{font-size:12px}body:has(#rowModsServers) .footer_global{margin:30px 12px 0}}
@media(prefers-reduced-motion:reduce){#rowModsServers .mods__card,body:has(#rowModsServers) .spb__cta{transition:none;transform:none}}
body:has(#rowModsServers) .footer-top{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
body:has(#rowModsServers) .footer_links{grid-column:1/-1;width:100%}
body:has(#rowModsServers) .footer_links ul{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 20px;margin:0;padding:0}
body:has(#rowModsServers) .footer-top .left_footer{grid-column:1;justify-self:start;margin:0}
body:has(#rowModsServers) .footer-top .social_buttons{grid-column:2;justify-self:end;display:flex;gap:14px;margin:0}
@media(max-width:600px){body:has(#rowModsServers) .footer_links ul{justify-content:flex-start;gap:12px 18px}body:has(#rowModsServers) .footer_links a{font-size:11px}}
body:has(#rowModsServers) .footer_global{width:calc(100% - 48px)}
body:has(#rowModsServers) .footer-top{grid-template-columns:minmax(0,1fr) auto}
body:has(#rowModsServers) .footer_links{min-width:0;margin:0}
@media(max-width:600px){body:has(#rowModsServers) .footer_global{width:calc(100% - 24px);padding-left:12px;padding-right:12px}body:has(#rowModsServers) .footer-top{grid-template-columns:minmax(0,1fr);gap:20px}body:has(#rowModsServers) .footer-top .social_buttons{grid-column:1;justify-self:start}body:has(#rowModsServers) .footer_links ul{justify-content:flex-start}}
/* Server selection: clear hierarchy, separate name and live metrics. */
#modInfoBlock{height:auto;min-height:270px;max-width:1180px;margin:0 auto 20px;padding:22px 28px 28px;border:1px solid #294357;border-radius:18px;text-align:left;overflow:hidden}
#modInfoBlock:before{background:linear-gradient(100deg,#0d2031f5,#0d2031c9);border-radius:18px}
#modInfoBlock .servers_filter{gap:16px;padding:0;flex-wrap:wrap}
#modInfoBlock .filter_chips{gap:7px;flex-wrap:wrap}
#modInfoBlock .filter{border:1px solid #355269;border-radius:9px;background:#142b3ed9;color:#a8c8dd;font-size:12px;padding:9px 13px;box-shadow:none}
#modInfoBlock .filter.active{background:#285a7f!important;color:#e2f2ff!important;border-color:#5796c0}
#modInfoBlock .mods__back{font-size:12px;color:#a8c8dd;margin-right:10px}
#modInfoBlock .mod{align-items:flex-start;margin-top:25px}
#modInfoBlock .modTitle{font-size:32px;font-style:normal;line-height:1.3;color:#cee7f4;margin:0 0 12px}
#modInfoBlock .modDesc{font-size:14px;line-height:1.65;color:#a5bfd1;width:100%;max-width:680px}
#modInfoBlock .mod-buttons{margin-top:22px!important;gap:10px!important;flex-wrap:wrap;justify-content:flex-start!important}
#modInfoBlock .mod-button{border:1px solid #35566f;border-radius:10px;background:#162f43;color:#b8d9ee;padding:11px 17px;font-size:13px}
#modInfoBlock .mod-button--primary{background:#296494;color:#e6f5ff;border-color:#4387b7}
#rowServers{max-width:1208px;margin-left:auto;margin-right:auto}
#rowServers [id=monLoaded]{gap:14px;align-items:stretch;padding-top:0}
#rowServers .servers__card-block{width:calc(50% - 7px);height:auto;min-height:145px;max-height:none;border:1px solid #294357;border-radius:16px;background:#0d2031;align-items:stretch}
@media (prefers-reduced-motion: no-preference){
#rowServers .servers__card-block{transition:border-color .2s}}
@media (hover: hover) and (pointer: fine){
#rowServers .servers__card-block:hover{border-color:#5794be}}
#rowServers .servers__card-image-map{opacity:.18;border-radius:0}
#rowServers .servers__card-info{min-width:0;padding:20px;display:flex;flex-direction:column;align-items:stretch;gap:14px}
#rowServers .monitoring-server-info{position:static;min-width:0}
#rowServers .servers__card-header{font-size:13px;line-height:1.6;max-width:none;overflow-wrap:anywhere;color:#d0e9f6}
#rowServers .monitoring-server-info-local{font-size:11px;color:#92afc4}
#rowServers .servers__card-body{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;min-width:0}
#rowServers .servers__card-map{font-size:12px;color:#9cbacf;overflow-wrap:anywhere}
#rowServers .servers__card-online{flex-shrink:0;border:1px solid #345948;border-radius:7px;background:#18372e;color:#a7d8bb;padding:4px 9px}
#rowServers .servers__card-buttons{padding:18px 16px 18px 0;gap:10px;align-content:center;flex-shrink:0;height:auto}
#rowServers .servers__card-buttons button,#rowServers .servers__card-buttons a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #35566f;border-radius:9px;background:#18364d}
#rowServers .servers__card-buttons svg{fill:#aad7f2;width:16px;height:16px}
#rowServers .servers__card-buttons .connect-btn{background:#285f87;border-color:#4988b3}
@media(max-width:650px){#modInfoBlock{padding:18px;min-height:0}#modInfoBlock .modTitle{font-size:24px}#modInfoBlock .modDesc{font-size:13px}#modInfoBlock .filter{padding:8px 10px;font-size:11px}#rowServers .servers__card-block{width:100%}#rowServers .servers__card-info{padding:16px}#rowServers .servers__card-header{font-size:12px}#modInfoBlock .servers_filter2-data{margin-left:0}}
#modInfoBlock{width:100%;box-sizing:border-box}

/* One art direction for every mode cover: restrained blue image on the right. */
#modInfoBlock{isolation:isolate;background-color:#0d2031;background-image:none}
#modInfoBlock:before{inset:0 0 0 35%;border-radius:0;background-image:var(--mode-cover);background-position:center;background-size:cover;filter:grayscale(1) contrast(1.08);opacity:.32;mix-blend-mode:luminosity;z-index:-2}
#modInfoBlock:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d2031 0%,#0d2031 30%,#0d2031ed 48%,#0d203170 75%,#0d203138 100%);z-index:-1;pointer-events:none}
#modInfoBlock .modDesc{max-width:620px}
#modInfoBlock #rowModFilter{position:relative;z-index:2}
@media(max-width:650px){#modInfoBlock:before{left:15%;opacity:.2}#modInfoBlock:after{background:linear-gradient(90deg,#0d2031f5,#0d2031bd)}#modInfoBlock .modDesc{max-width:100%}}

/* Mode navigation: generous two-line tiles with live green counts. */
#modInfoBlock .servers_filter { flex-direction: row; align-items: stretch; gap: 12px; }
#modInfoBlock .filter_chips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(130px,1fr); flex: 1 1 100%; min-inline-size: 0; inline-size: 100%; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding-block: 2px 6px; scrollbar-width: thin; scrollbar-color: var(--cz-home-border) transparent; }
#modInfoBlock .filter.mode-tab { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; inline-size: 100%; min-inline-size: 0; min-block-size: 76px; padding: 12px 10px; border-radius: 13px; scroll-snap-align: start; background: var(--cz-home-panel); border-color: var(--cz-home-border); color: var(--cz-home-text); }
#modInfoBlock .mode-tab__online { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--green); font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.2; }
#modInfoBlock .mode-tab__online svg { inline-size: 18px; block-size: 18px; fill: currentColor; }
#modInfoBlock .mode-tab__label { color: inherit; font-family: var(--font-family-1); font-size: 13px; font-weight: 700; line-height: 1.3; }
#modInfoBlock .filter.mode-tab.active { background: color-mix(in oklch,var(--cz-home-accent) 24%,var(--cz-home-panel))!important; border-color: var(--cz-home-accent); }
#modInfoBlock .servers_filter2-data { display: flex; min-inline-size: 0; margin: 0; }
#modInfoBlock .servers_filter2-data > .filter { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; min-block-size: 38px; padding: 8px 12px; border-radius: 10px; background: color-mix(in oklch,var(--cz-home-panel) 90%,transparent); color: var(--cz-home-muted); border-color: var(--cz-home-border); }
#modInfoBlock .servers_filter2-data > .filter.active { background: color-mix(in oklch,var(--cz-home-accent) 16%,var(--cz-home-panel))!important; }
#modInfoBlock .mode-tab--all .mode-tab__online { order: 1; font-size: 13px; }
#modInfoBlock .mode-tab--all .mode-tab__online svg { inline-size: 15px; block-size: 15px; }
#modInfoBlock .mode-tab--all .servers__staff-total { order: 2; }
#modInfoBlock .mod { margin-block-start: 22px; gap: 14px; }
#modInfoBlock .mod-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; inline-size: 100%; }
#modInfoBlock .mod-heading .modTitle { margin: 0; }
#modInfoBlock .mod-buttons { margin-block-start: 4px!important; }
#modInfoBlock #rowModFilter { inline-size: 100%; }
#modInfoBlock #rowModFilter > .col-md-12 { padding-inline: 0; }
#modInfoBlock .mode-tab--all .mode-tab__label { font-family: inherit; font-size: 12px; font-weight: 600; }
#modInfoBlock .servers__staff-total { margin: 0; padding: 0; border: 0; font-size: 10px; }
#modInfoBlock .mod-buttons { gap: 12px!important; }
#modInfoBlock .mod-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-block-size: 52px; padding: 13px 22px; border-radius: 13px; font-size: 15px; font-weight: 650; }
#modInfoBlock .mod-button svg { inline-size: 20px; block-size: 20px; flex: none; }
#modInfoBlock :is(.filter,.mod-button):focus-visible { outline: 2px solid var(--cz-home-accent); outline-offset: 3px; }
#modInfoBlock :is(.filter,.mod-button):active { filter: brightness(.9); }
@media (hover: hover) and (pointer: fine) {
#modInfoBlock .filter.mode-tab:hover { background: color-mix(in oklch,var(--cz-home-accent) 14%,var(--cz-home-panel)); border-color: var(--cz-home-accent); }
#modInfoBlock .mod-button:hover { border-color: var(--cz-home-accent); }
}