/* Layout, sizes and colours follow the PSD mockups (1035px content column).
   One file, no inline styles except data-driven values such as a server colour. */
/* The "+" glyph of WiGuru is drawn as "±", so that one character comes from the fallback font. */
@font-face { font-family: "WiGuru"; src: url(/media/css/fonts/WiGuru1.ttf) format("truetype"); font-display: swap; unicode-range: U+0-2A, U+2C-10FFFF; }
@font-face { font-family: "Trebuc"; src: url(/media/css/fonts/Trebuc.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "OpenSans"; src: url(/media/css/fonts/OSSemi.ttf) format("truetype"); font-display: swap; }

:root {
  --ink: #29303a;
  --ink-2: #3e454e;
  --ink-3: #565d67;
  --text: #fff;
  --muted: #b9c0c8;
  --gold: #fdb801;
  --gold-2: #c97f24;
  --ok: #3fae49;
  --bad: #e5484d;
  --info: #3f8fd2;
  --warn: #f5a623;
  --page: #f1f7fb;
  --field: #f1f1f1;
  --radius: 6px;
  --head: "WiGuru", Impact, "Arial Narrow", sans-serif;
  --body: "Trebuc", "Trebuchet MS", Arial, sans-serif;
  --shadow: 0 6px 22px rgb(0 0 0 / .35);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--ink); font: 14px/1.5 var(--body);
  background: var(--page) url(/media/img/bg.png) center top / 100% auto repeat-y; }
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button, input, select, textarea { font: inherit; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -.12em; }

.wrap { width: 100%; max-width: 1067px; margin: 0 auto; padding: 0 16px; }
.main { flex: 1; padding-top: 66px; padding-bottom: 28px; }
.stage-bar { background: var(--gold); color: var(--ink); text-align: center; font-size: 13px; padding: 3px 16px; }

/* --- header ------------------------------------------------------------------ */
.top-row { display: flex; align-items: center; gap: 40px; padding-top: 28px; padding-bottom: 28px; }
.logo { flex: none; width: 279px; height: 57px; background: url(/media/img/logo.png) left center / contain no-repeat; }
.top-search { display: flex; flex: 1; max-width: 418px; height: 33px; border: 1px solid #cfcfcf; background: #f6f6f6; }
.top-search input { flex: 1; min-width: 0; border: 0; outline: none; color: var(--ink); padding: 0 8px 0 32px; background: url(/media/img/search.png) 10px center no-repeat; }
.top-search button { border: 0; background: var(--gold); padding: 0 11px; font: 19px var(--head); text-transform: uppercase; color: #fff; cursor: pointer; }
.top-search button:hover { background: #ffc733; }
.mini { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; white-space: nowrap; }
.mini-ava { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--gold); font-size: 30px; text-decoration: none; }
.mini-ava:hover { color: #ffd257; }
.mini-body { display: grid; gap: 1px; min-width: 0; }
.mini-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; font: 20px/25px var(--head); text-transform: uppercase; color: var(--ink); text-decoration: none; }
.mini-name:hover { color: var(--gold-2); }
.mini-sub { font-size: 13px; line-height: 18px; color: var(--ink-3); text-decoration: none; }
.mini-sub b { color: var(--gold-2); font-weight: 600; }
.mini-sub:hover { text-decoration: underline; }
.mini-exit { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); font-size: 21px; cursor: pointer; }
.mini-exit:hover { background: var(--ink); color: var(--gold); }
.burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; margin-left: auto; border: 0; border-radius: var(--radius); background: var(--ink); cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--text); }

.nav-wrap { position: relative; z-index: 5; }
.nav { display: flex; align-items: stretch; height: 56px; background: var(--ink); border-radius: var(--radius); font: 25px/56px var(--head); text-transform: uppercase; }
.nav > a { position: relative; padding: 0 17px; color: var(--text); text-decoration: none; border-right: 1px solid #454c55; white-space: nowrap; }
.nav > a:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.nav > a:hover { color: var(--gold); }
/* active tab: gold pentagon that hangs out of the bar */
.nav > a.on { border-right-color: transparent; color: #fff; z-index: 1; }
.nav > a.on::before { content: ""; position: absolute; z-index: -1; inset: -7px 0 -41px; border-radius: 6px 6px 0 0;
  background: linear-gradient(#fdb801, var(--gold-2)); clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%); }
.nav > a.on:hover { color: #fff; }

.nav-user { display: none; }

/* --- headings ----------------------------------------------------------------- */
.title { font: 36px/1.15 var(--head); text-transform: uppercase; text-align: center; color: var(--ink); margin: 0 0 18px; overflow-wrap: anywhere; }
.title-line { border-bottom: 1px solid #c8cfd6; padding-bottom: 18px; margin-bottom: 30px; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin: 26px 0 3px; font: 25px/1.1 var(--head); text-transform: uppercase; color: var(--ink); }
.sec-head small { font: 12px var(--body); text-transform: none; }
.sec-head:first-child { margin-top: 0; }
.subhead { font: 22px var(--head); text-transform: uppercase; color: var(--ink); margin: 20px 0 6px; }
.note { color: var(--muted); font-size: 13px; }
.main > .note, .cab-main > .note, .sec-note { color: #5c6570; font-size: 13px; }
.round-time { background: var(--ink-2); color: #fff; padding: 8px 12px; font: 18px/1.2 var(--head); text-transform: uppercase; }
.round-time b { color: var(--gold); font-weight: 400; }
.empty { text-align: center; padding: 16px; color: var(--muted); margin: 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- premium cards ------------------------------------------------------------- */
.premium { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 14px; margin-bottom: 36px; }
.pcard { position: relative; display: flex; flex-direction: column; background: var(--ink); border-radius: 6px; color: #fff; text-decoration: none; text-align: center; text-transform: uppercase; font: 15px/1.2 var(--head); box-shadow: 0 12px 10px -9px rgb(0 0 0 / .4); transition: transform .15s; }
.pcard:hover { transform: translateY(-3px); }
.pcard-name { padding: 8px 8px 7px; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-map { position: relative; margin: 0 16px; aspect-ratio: 1; border: 2px solid #dfe4e8; border-radius: 6px; overflow: hidden; background: var(--ink-2); }
.pcard-map img.m { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcard-map img.f { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.pcard-players { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0; background: rgb(0 0 0 / .55); font-size: 14px; }
.pcard-mapname { padding: 6px 8px 5px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-addr { padding: 5px 4px; margin-bottom: 11px; background: var(--gold); color: var(--ink); font-size: 19px; }
.pcard.free .pcard-map { display: flex; align-items: center; justify-content: center; border-style: dashed; border-color: var(--ink-3); background: var(--ink-2); }
.pcard-plus { color: var(--gold); font: 700 72px/1 Arial, sans-serif; margin-top: -24px; }
.pcard.free:hover .pcard-map { border-color: var(--gold); }
.pcard.free .pcard-players { background: none; color: var(--muted); }

/* --- server list --------------------------------------------------------------- */
.servers { background: var(--ink); color: #fff; font: 18px/1.2 var(--head); text-transform: uppercase; }
.servers-head, .srv { display: grid; grid-template-columns: 60px minmax(0, 1fr) 170px 80px 170px 96px; gap: 8px; align-items: center; padding: 0 12px 0 6px; text-align: center; }
.servers-head { height: 33px; color: var(--gold); }
.servers-head span:nth-child(2), .srv-name { text-align: left; }
.srv { min-height: 39px; }
.srv:nth-of-type(odd) { background: var(--ink-2); }
.srv:hover { background: #4b535e; }
.srv.tinted { background: var(--tint); }
.srv-flag { line-height: 0; }
.flag { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.flag.small { width: 17px; height: 17px; }
.srv-name { color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-name:hover { color: var(--gold); }
.srv-addr, .srv-map { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-votes { display: flex; align-items: center; gap: 4px; justify-content: center; }
.vip { display: block; width: 56px; height: 26px; }
.vote { border: 0; background: none; cursor: pointer; font-size: 13px; padding: 4px; line-height: 1; font-family: Arial, sans-serif; }
.vote.up { color: #46c253; }
.vote.down { color: #ff5252; }
.vote:hover { transform: scale(1.25); }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 2px; width: max-content; max-width: 100%; margin: 30px auto 0; padding: 4px 6px; border: 1px solid #cfd3d8; border-radius: 6px; background: #e5e5e5; }
.pager a, .pager span { min-width: 26px; padding: 3px 5px; text-align: center; color: #434343; text-decoration: none; font: 17px/1.4 "OpenSans", var(--body); }
.pager a:hover { color: var(--ink); background: #d6d8db; }
.pager .on { background: var(--ink); color: #fff; }
.pager .gap { color: #8a8f95; }
.pager .step { width: 77px; background: var(--gold); color: var(--ink); font: 19px/24px var(--head); text-transform: uppercase; margin: 0 10px; }
.pager .step:hover { background: #ffc733; }

/* --- blocks -------------------------------------------------------------------- */
.panel { background: var(--ink-2); color: var(--text); padding: 16px 18px; margin-bottom: 14px; }
.panel.dark { background: var(--ink); }
.panel h3 { color: var(--gold); margin-bottom: 8px; font: 20px var(--head); text-transform: uppercase; }
.panel p { margin: 0 0 8px; }
.panel p:last-child { margin-bottom: 0; }
.panel a:not(.btn) { color: var(--gold); }
.panel b { color: var(--gold); font-weight: 400; }
.panel .subhead { color: var(--gold); margin-top: 0; }
.panel.center { text-align: center; }
.panel.narrow { max-width: 460px; margin-left: auto; margin-right: auto; }

.block { margin-bottom: 26px; }
.block-title { background: var(--ink); color: #fff; font: 21px/1.3 var(--body); padding: 6px 12px; }
.block-body { background: var(--ink-2); color: #fff; padding: 14px 16px; overflow-wrap: anywhere; }
.prose p, .prose ul, .prose ol { margin: 0 0 10px; }
.prose > :last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3 { font: 19px var(--body); text-transform: uppercase; margin: 14px 0 8px; }
.prose h1:first-child, .prose h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 20px; }
.prose a { color: var(--gold); }
.prose table { width: 100%; border-collapse: collapse; }
.prose td, .prose th { border: 1px solid var(--ink-3); padding: 5px; text-align: center; overflow-wrap: anywhere; }
.prose img { height: auto; }
.prose button { border: 0; background: var(--gold); color: var(--ink); padding: 6px 12px; border-radius: var(--radius); cursor: pointer; }
.seo { margin-top: 30px; background: var(--ink); color: #fff; padding: 14px; font-size: 12px; line-height: 19px; text-transform: uppercase; letter-spacing: .02em; }

/* --- tables --------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; background: var(--ink); margin-bottom: 14px; }
.table { width: 100%; border-collapse: collapse; color: #fff; font-size: 13px; }
.table th { color: #fff; font: 15px var(--body); text-align: left; padding: 7px 12px; white-space: nowrap; }
.table td { padding: 7px 12px; vertical-align: middle; overflow-wrap: anywhere; }
.table tbody tr:nth-child(odd) { background: var(--ink-2); }
.table tr.current td { box-shadow: inset 0 0 0 1px var(--gold); }
.table tr.tinted, .table tbody tr.tinted:nth-child(odd) { background: var(--tint); }
.table a:not(.btn) { color: var(--gold); text-decoration: none; }
.table a:not(.btn):hover { text-decoration: underline; }
.table.display { font: 18px/1.2 var(--head); text-transform: uppercase; }
.table.display th { color: var(--gold); font: 18px var(--head); text-transform: uppercase; }
.table.display td { padding: 10px 8px; }
.table.display a:not(.btn) { color: #fff; }
.table.display a:not(.btn):hover { color: var(--gold); }
.table .actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.table .ico { width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: none; color: #fff; cursor: pointer; font-size: 16px; }
.table .ico:hover { background: var(--ink); color: var(--gold); }
.table .ico.danger:hover { color: var(--bad); }
.bar { position: relative; display: block; min-width: 110px; height: 19px; background: #c7c9cc; border-radius: 3px; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(135deg, #fdb801 0 3px, #eda800 3px 6px); }
.bar em { position: relative; display: block; text-align: center; font: 15px/19px var(--head); color: var(--ink); }
.chip { border: 1px solid var(--ink-3); background: var(--ink); color: #fff; border-radius: 4px; padding: 2px 8px; margin-right: 4px; cursor: pointer; font: 15px var(--head); }
.chip:hover { border-color: var(--gold); color: var(--gold); }
.badge { display: inline-block; padding: 0 8px; border-radius: 9px; background: var(--ink-3); color: #fff; font: 12px/18px var(--body); }
.badge.ok { background: var(--ok); }
.badge.bad { background: var(--bad); }
.badge.dark { background: var(--ink); }

/* --- buttons --------------------------------------------------------------------- */
.btn { position: relative; display: inline-block; padding: 9px 24px; border: 0; border-radius: 6px; background: var(--gold); color: #fff; text-shadow: 0 1px 1px rgb(0 0 0 / .25); font-size: 15px; text-align: center; text-decoration: none; cursor: pointer; }
.btn:hover { background: #ffc733; }
.btn:disabled { cursor: wait; }
.btn.busy { color: transparent; text-shadow: none; }
.btn.busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border: 2px solid rgb(255 255 255 / .4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.big { padding: 15px 48px; font-size: 20px; }
.btn.ghost { background: var(--ink); text-shadow: none; }
.btn.ghost:hover { color: var(--gold); }
.btn.danger:hover { background: var(--bad); color: #fff; }
.btn.small { padding: 5px 13px; font-size: 13px; }
.linklike { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; text-decoration: underline; }
.accent { color: var(--gold); }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 28px; height: 28px; margin: 18px auto; border: 3px solid var(--ink-3); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; }

/* --- forms: dark fields inside grey panels ---------------------------------------- */
.form label { display: block; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.field, .form input:not([type=radio], [type=checkbox]), .form select, .form textarea, .modal input:not([type=radio], [type=checkbox]), .modal textarea {
  display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid transparent; background: var(--ink); color: #fff; outline: none; font-size: 14px; }
select { appearance: none; padding-right: 34px !important; }
.form select, select.field, .perpage select { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill='%233e454e'/%3E%3Cpath d='M6 9l5 5 5-5' fill='none' stroke='%23b9c0c8' stroke-width='2'/%3E%3C/svg%3E") right 6px center / 22px no-repeat; }
.field:focus, .form input:focus, .form select:focus, .form textarea:focus, .modal input:focus, .modal textarea:focus { border-color: var(--gold); }
.form ::placeholder, .modal ::placeholder { color: #c9ced4; }
.form .check, .check { display: flex; align-items: center; gap: 7px; color: var(--text); cursor: pointer; }
input[type=checkbox], .opts input[type=radio] { appearance: none; width: 13px; height: 13px; margin: 0; background: #fff; cursor: pointer; flex: none; }
input[type=checkbox]:checked, .opts input[type=radio]:checked { background: var(--gold); box-shadow: inset 0 0 0 2px #fff; }
.form.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 44px; align-items: center; padding: 18px 18px 18px 46px; }
.form.grid label { margin: 0; }
.form.grid .btn { grid-column: 3; grid-row: 1 / 4; }
.form.grid textarea { grid-column: 1 / 3; }
select:disabled { opacity: 1; color: #fff; cursor: default; }
.form.inline { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.form.inline label { margin: 0; }
.narrow-left { max-width: 460px; }

/* search block */
.finder { display: grid; gap: 12px; margin-bottom: 14px; padding: 16px 18px; background: var(--ink-2); color: #fff; border-left: 4px solid var(--gold); }
.finder-main { display: flex; }
.finder-main input { flex: 1; min-width: 0; height: 46px; padding: 0 12px 0 38px; border: 1px solid transparent; border-radius: 6px 0 0 6px; outline: none; background: var(--ink) url(/media/img/search.png) 13px center no-repeat; color: #fff; font-size: 16px; }
.finder-main input:focus { border-color: var(--gold); }
.finder-main input::placeholder { color: var(--muted); }
.finder-main .btn { flex: none; width: auto; padding: 0 30px; border-radius: 0 6px 6px 0; font-size: 18px; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: 5px 12px; border: 1px solid var(--ink-3); border-radius: var(--radius); background: var(--ink); font-size: 13px; }
.seg label:hover span { border-color: var(--gold); }
.seg input:checked + span { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.seg.small { flex-wrap: nowrap; margin-top: 4px; }
.seg.small label { flex: 1; text-align: center; }
.seg.small span { padding: 8px 6px; }
.finder-more summary { cursor: pointer; font: 18px/1.2 var(--head); text-transform: uppercase; }
.finder-more summary:hover { color: var(--gold); }
.finder-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 12px; margin-top: 10px; }
.finder-grid label, .finder-field { color: var(--muted); font-size: 13px; }
.finder-grid .seg label { color: #fff; }
.finder-range { display: flex; gap: 4px; }
.finder-range .field { min-width: 0; text-align: center; }
.finder-maps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; color: var(--muted); font-size: 13px; }
.finder-maps a { color: var(--gold); text-decoration: none; }
.finder-maps a:hover { text-decoration: underline; }
.search-results { transition: opacity .15s; }
.search-results.loading { opacity: .5; }
.found { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; color: var(--ink); }
.found b { margin-right: 6px; font: 22px/1.2 var(--head); text-transform: uppercase; font-weight: 400; }
.found-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px 2px 10px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 13px; text-decoration: none; overflow-wrap: anywhere; }
.found-chip:hover { background: var(--ink-2); color: var(--gold); }
.found-reset { color: var(--ink-3); font-size: 13px; }
.finder-empty b { display: block; margin-bottom: 4px; color: #fff; font: 22px/1.2 var(--head); text-transform: uppercase; font-weight: 400; }
.finder-empty a { color: var(--gold); }
.perpage { display: flex; align-items: center; background: var(--ink); font-size: 13px; color: #fff; }
.perpage span { padding: 0 8px; border-right: 1px solid var(--ink-3); line-height: 30px; }
.perpage select { width: 62px; padding: 6px 28px 6px 10px; border: 0; color: #fff; font-size: 13px; background-size: 16px; }

/* auth */
.auth { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 46px; }
.auth-card { width: 340px; max-width: 100%; padding: 28px 26px 8px; background: var(--ink); border-radius: 6px; text-align: center; }
.auth-card h2 { font: 20px var(--head); text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.auth-card input:not([type=checkbox]) { display: block; width: 100%; height: 35px; margin-bottom: 14px; padding: 0 10px; border: 1px solid transparent; border-radius: 3px; background: var(--field); color: var(--ink); outline: none; }
.auth-card input:focus { border-color: var(--gold); }
.auth-card .check { font-size: 11px; color: #b9c0c8; text-decoration: underline; margin-bottom: 12px; }
.auth-card .check.agree { align-items: flex-start; line-height: 15px; text-align: left; text-decoration: none; }
.auth-card .check.agree a { color: var(--gold); text-decoration: underline; }
.auth-card .check.agree input { flex: none; margin-top: 1px; }
.auth-card .btn { min-width: 118px; padding: 7px 14px; font-size: 14px; }
.auth-card .links { margin: 8px 0; font-size: 11px; line-height: 14px; color: #b9c0c8; }
.auth-card .links a { display: block; }

.methods, .periods { margin-bottom: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.methods legend, .periods legend, .form legend { padding: 0; margin-bottom: 8px; color: var(--gold); grid-column: 1 / -1; }
.method input, .period input, .swatch input { position: absolute; opacity: 0; }
.method, .period { position: relative; margin: 0 !important; cursor: pointer; }
.method-body, .period span { display: flex; align-items: center; gap: 10px; height: 100%; padding: 10px; background: var(--ink); border: 1px solid transparent; color: var(--text); font-size: 14px; }
.period span { display: block; }
.method-body b, .period b { display: block; font-weight: 700; color: #fff; }
.method-body small { color: var(--muted); }
.method-body img { flex: none; border-radius: 6px; object-fit: contain; }
.method:hover .method-body, .period:hover span { border-color: var(--ink-3); }
.method input:checked + .method-body, .period input:checked + span { border-color: var(--gold); }
.method input:focus-visible + .method-body, .period input:focus-visible + span, .swatch input:focus-visible + span { outline: 2px solid var(--gold); }
.colors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.swatch { position: relative; margin: 0 !important; cursor: pointer; }
.swatch span { display: block; width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; }
.swatch input:checked + span { border-color: #fff; box-shadow: 0 0 0 2px var(--gold); }

/* --- cabinet ------------------------------------------------------------------------ */
.cab-top { text-align: center; margin-bottom: 8px; }
.cab-top .title { margin-bottom: 4px; }
.cab-top p { margin: 0 0 8px; font-size: 14px; letter-spacing: .03em; }
.pill { display: inline-block; padding: 1px 7px; border-radius: 5px; background: var(--gold); color: var(--ink); }
.cabinet { display: grid; grid-template-columns: 185px minmax(0, 1fr); gap: 17px; align-items: start; }
.side-box { background: var(--ink-2); color: #fff; }
.side-box summary { list-style: none; height: 51px; background: var(--ink); font: 19px/51px var(--body); text-transform: uppercase; letter-spacing: .05em; text-align: center; cursor: default; }
.side-box summary::-webkit-details-marker { display: none; }
.side-box nav { padding: 8px 12px 10px; }
.side-box nav a { display: flex; align-items: center; gap: 6px; padding: 3px 0; color: #fff; text-decoration: none; font-size: 14px; letter-spacing: .02em; }
.side-box nav a .icon { font-size: 15px; }
.side-box nav a:hover, .side-box nav a.on { color: var(--gold); }
.cab-title { background: var(--ink); color: #fff; font: 15px/1.3 var(--body); padding: 7px 14px; overflow-wrap: anywhere; }
.cab-title small { display: block; color: var(--muted); font-size: 12px; }
.cab-title + .panel, .cab-title + .table-wrap { margin-top: 0; }
.table-foot { background: var(--ink-2); padding: 10px; text-align: center; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 10px; margin-bottom: 14px; }
.card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 10px; padding: 10px; background: var(--ink-2); color: #fff; text-decoration: none; min-height: 72px; }
.card:hover { background: var(--ink); }
.card img { grid-row: span 2; width: 60px; height: 50px; object-fit: cover; border-radius: 8px; }
.card b, .card small { grid-column: 2; }
.card b:first-child, .card b:first-child + small { grid-column: 1 / -1; }
.card small { color: var(--muted); }

/* services: list of my servers */
.svc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.svc-stats div { padding: 10px 14px; background: var(--ink); color: var(--muted); font-size: 12px; }
.svc-stats b { display: block; color: var(--gold); font: 30px/1.1 var(--head); }
.svc-stats b.small { font-size: 24px; line-height: 33px; }
.svc-list { display: grid; gap: 8px; }
.svc-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; background: var(--ink-2); color: #fff; text-decoration: none; border-left: 3px solid transparent; transition: background .12s, border-color .12s; }
a.svc-row:hover { background: var(--ink); border-left-color: var(--gold); }
.svc-row.off { opacity: .65; }
.svc-map { position: relative; flex: none; width: 76px; height: 62px; }
.svc-map > img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.svc-map .flag { position: absolute; right: 3px; top: 3px; }
.svc-info { flex: 1; display: grid; gap: 3px; min-width: 0; }
.svc-name { font: 19px/1.15 var(--head); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-meta { color: var(--muted); font-size: 12px; }
.dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--ink-3); }
.dot.on { background: #46c253; }
.svc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip-svc { padding: 0 7px; border-radius: 4px; background: var(--ink); color: var(--muted); font-size: 12px; line-height: 19px; }
a.svc-row:hover .chip-svc { background: var(--ink-2); }
.chip-svc b { color: var(--gold); font-weight: 400; }
.chip-svc.warn { background: var(--warn); color: var(--ink); }
.chip-svc.warn b { color: var(--ink); font-weight: 700; }
.chip-none { color: var(--muted); font-size: 12px; line-height: 19px; }
.svc-cta { flex: none; padding: 6px 12px; border: 1px solid var(--gold); border-radius: var(--radius); color: var(--gold); font-size: 13px; white-space: nowrap; }
.svc-cta.first { background: var(--gold); color: var(--ink); }
.svc-empty { padding: 34px 20px; background: var(--ink-2); color: #fff; text-align: center; }
.svc-empty h2 { font: 24px var(--head); text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.svc-empty p { margin: 0 0 14px; color: var(--muted); }

/* services of one server */
.srv-head { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; background: var(--ink); color: #fff; border-left: 4px solid var(--gold); }
.srv-head > div { flex: 1; min-width: 0; }
.srv-head h1 { font: 24px/1.1 var(--head); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.srv-open { flex: none; color: var(--gold); font-size: 13px; }
.svc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 10px; }
.svc-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; background: var(--ink-2); color: #fff; border-top: 3px solid var(--ink-3); }
.svc-card.on { background: var(--ink); border-top-color: var(--ok); }
.svc-card.ending { border-top-color: var(--warn); }
.svc-card.closed img { filter: grayscale(1); opacity: .6; }
.svc-card.closed h3, .svc-card.closed .svc-from { color: var(--muted); }
.svc-card p { margin: 0; }
.svc-card .btn { margin-top: auto; align-self: flex-start; }
.svc-card-top { display: flex; gap: 10px; align-items: center; }
.svc-card-top img { flex: none; width: 58px; height: 48px; object-fit: cover; border-radius: 8px; }
.svc-card h3 { font: 21px/1.1 var(--head); text-transform: uppercase; }
.svc-left { color: var(--gold); font-size: 14px; }
.svc-from { color: var(--gold); font-size: 15px; font-weight: 700; }
.svc-until, .svc-text { color: var(--muted); font-size: 13px; }
.svc-text { flex: 1; }
.svc-warn { display: flex; align-items: center; gap: 5px; color: var(--warn); font-size: 13px; }
.svc-closed { margin-top: auto; color: var(--muted); font-size: 13px; font-style: italic; }

/* service purchase */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.back-link { display: inline-block; margin-bottom: 8px; color: #5c6570; font-size: 13px; text-decoration: none; }
.back-link:hover { color: var(--ink); }
.buy-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--ink); color: #fff; border-left: 4px solid var(--gold); margin-bottom: 14px; }
.buy-head img { flex: none; width: 72px; height: 60px; object-fit: cover; border-radius: 8px; }
.buy-head h1 { font: 26px/1.1 var(--head); text-transform: uppercase; }
.buy-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.buy-head > div:nth-child(2) { flex: 1; min-width: 0; }
.buy-state { flex: none; text-align: right; }
.buy-state small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.buy { display: grid; grid-template-columns: minmax(0, 1fr) 256px; gap: 14px; align-items: start; }
.buy-steps { display: grid; gap: 14px; min-width: 0; }
.buy-step { padding: 14px 16px 16px; background: var(--ink-2); color: #fff; }
.buy-step h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 20px/1.2 var(--head); text-transform: uppercase; }
.buy-step h2 i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--ink); font: 700 13px var(--body); }
.buy-step .methods, .buy-step .colors { margin-bottom: 0; }
.buy-step .methods { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.plan { position: relative; cursor: pointer; }
.plan input { position: absolute; opacity: 0; }
.plan-body { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 14px 8px 12px; border: 2px solid transparent; border-radius: var(--radius); background: var(--ink); text-align: center; transition: border-color .12s, transform .12s; }
.plan:hover .plan-body { border-color: var(--ink-3); transform: translateY(-1px); }
.plan input:checked + .plan-body { border-color: var(--gold); }
.plan input:focus-visible + .plan-body { outline: 2px solid var(--gold); outline-offset: 2px; }
.plan-body b { font: 19px/1.1 var(--head); text-transform: uppercase; color: #fff; }
.plan-body strong { margin-top: 8px; color: var(--gold); font: 700 19px/1 var(--body); }
.plan-body s { margin-top: 3px; color: var(--muted); font-size: 12px; }
.plan-body small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.plan-save { position: absolute; top: -7px; right: -5px; padding: 1px 6px; border-radius: 9px; background: var(--ok); color: #fff; font: 700 11px/16px var(--body); }
.summary { position: sticky; top: 14px; padding: 14px 16px 16px; background: var(--ink); color: #fff; }
.summary h2 { margin-bottom: 10px; font: 22px/1.2 var(--head); text-transform: uppercase; color: var(--gold); }
.summary dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; margin: 0 0 12px; font-size: 13px; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 10px; margin-bottom: 12px; border-top: 1px solid var(--ink-3); }
.summary-total b { color: var(--gold); font: 30px/1 var(--head); }
.summary-total s { color: var(--muted); font-size: 12px; }
.summary .btn { display: block; width: 100%; padding: 12px; }
.summary .btn:disabled { background: var(--ink-3); color: var(--muted); text-shadow: none; cursor: not-allowed; }
.summary .btn.busy:disabled { cursor: wait; }
.summary .alert { padding: 8px 10px; background: var(--ink-2); font-size: 13px; }
.summary .alert a { color: var(--gold); }
.summary .note { margin: 8px 0 0; font-size: 12px; text-align: center; }
.buy-manage { margin-top: 6px; }

.logs-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.logs-bar .field { width: 210px; margin: 0; }

/* --- server page ----------------------------------------------------------------------- */
.server-page { display: grid; grid-template-columns: 348px minmax(0, 1fr); gap: 20px; align-items: start; }
.server-card { background: var(--ink-2); color: #fff; margin-bottom: 14px; }
.map { display: block; width: 100%; height: auto; }
.lines { list-style: none; margin: 0; padding: 8px 10px; }
.lines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 6px; background: var(--ink); margin-bottom: 6px; font-size: 13px; }
.lines li:last-child { margin-bottom: 0; }
.lines li span:last-child { text-align: right; overflow-wrap: anywhere; }
.svc-title { font-size: 19px; padding: 10px 14px 2px; }
.svc-lines { display: grid; gap: 6px; list-style: none; margin: 0; padding: 8px 10px 10px; }
.svc-line { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: var(--ink); }
.svc-line img { flex: none; width: 40px; height: 40px; object-fit: contain; }
.svc-line > span { display: grid; gap: 1px; min-width: 0; }
.svc-line b { font-size: 14px; font-weight: 700; }
.svc-line small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.svc-line small.svc-gift, .svc-gift { color: var(--gold); }
.svc-move { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 6px 8px; border: 1px dashed var(--ink-3); border-radius: var(--radius); background: none; color: var(--muted); font: 13px var(--body); cursor: pointer; transition: color .12s, border-color .12s; }
.svc-move:hover { border-color: var(--gold); color: var(--gold); }
.move-dialog { width: min(560px, calc(100vw - 32px)); }
.move-what { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--ink-2); }
.move-what img { flex: none; width: 44px; height: 44px; object-fit: contain; }
.move-what b, .move-item-text b { display: block; overflow: hidden; color: #fff; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.move-what small, .move-item-text small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.move-what > div, .move-item-text { min-width: 0; }
.modal p.move-label { margin: 14px 0 6px; color: var(--muted); font-size: 13px; }
.move-list { display: grid; gap: 6px; max-height: min(290px, 42dvh); overflow-y: auto; padding-right: 2px; }
.modal .move-item { position: relative; margin: 0; color: inherit; cursor: pointer; }
.move-item input { position: absolute; opacity: 0; }
.move-item-body { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border: 1px solid var(--ink-3); border-radius: var(--radius); background: var(--ink); transition: background .12s, border-color .12s; }
.move-item-body > img { flex: none; width: 56px; height: 42px; border-radius: 4px; object-fit: cover; }
.move-item:hover .move-item-body { background: var(--ink-2); }
.move-item input:checked + .move-item-body { border-color: var(--gold); background: var(--ink-2); box-shadow: inset 3px 0 0 var(--gold); }
.move-item input:focus-visible + .move-item-body { outline: 2px solid var(--gold); outline-offset: 1px; }
.move-item-text .move-merge { color: var(--gold); }
.move-cost { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ink-3); color: var(--muted); font-size: 13px; }
.move-cost b { color: var(--gold); font: 22px var(--head); }
.move-cost b small { color: var(--muted); font: 12px var(--body); }
.move-cost b.free { color: var(--ok); }
.svc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: 1px; }
.svc { margin: 0; padding: 4px 14px; font-size: 13px; }
.svc:last-child { padding-bottom: 12px; }
.claim-open.btn { display: block; width: 100%; margin-bottom: 14px; border: 1px solid var(--gold); color: var(--gold); text-align: center; text-decoration: none; }
.claim-open.btn:hover { background: var(--gold); color: var(--ink); }
.claim-open.buy-open { background: var(--gold); color: var(--ink); }
.claim-open.buy-open:hover { background: transparent; color: var(--gold); }
.claim-open + .claim-open { margin-top: -6px; }
.guest-page { max-width: 1035px; margin: 0 auto; }
.don-links { display: grid; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0; }
.don-links li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--ink-2); color: #fff; }
.don-links li.off { opacity: .7; }
.don-links small { overflow-wrap: anywhere; }
.don-links .btn { flex: none; }
.don-servers { list-style: none; margin: 8px 0 0; padding: 0; }
.srv-domain { display: block; opacity: .75; }
.don-msg { color: var(--text); overflow-wrap: anywhere; }
.claim-code { display: block; width: 100%; padding: 10px; border: 1px dashed var(--gold); border-radius: var(--radius); background: var(--ink-2); color: var(--gold); font: 700 18px/1.2 monospace; letter-spacing: .04em; cursor: pointer; }
.claim-code:hover { background: var(--ink-3); }
.modal p { margin: 0 0 10px; }
.info-title { font: 19px/1.2 var(--body); margin-bottom: 8px; }
.info-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-bottom: 20px; }
.info-cols ul { list-style: none; margin: 0; padding: 0; }
.info-cols li { padding: 3px 4px; border-top: 1px solid var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.info-cols li:last-child { border-bottom: 1px solid var(--ink); }
.players { background: var(--ink); color: #fff; padding-bottom: 8px; }
.players-head, .player { display: grid; grid-template-columns: 34px minmax(0, 1fr) 56px 96px; gap: 8px; align-items: center; padding: 3px 14px; font-size: 15px; }
.player:nth-child(even) { background: var(--ink-2); }
.bot { color: var(--gold); font-size: 16px; }
.players-head { padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
.players-head span:nth-child(n+3), .player span:nth-child(n+3) { text-align: right; }
.player.extra { display: none; }
.players.open .player.extra { display: grid; }
.players-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 28px); margin: 10px 14px 6px; padding: 9px 12px; border: 1px solid var(--gold); border-radius: var(--radius); background: none; color: var(--gold); font-size: 14px; cursor: pointer; transition: background .12s, color .12s; }
.players-toggle::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .12s; }
.players-toggle[aria-expanded=true]::after { margin-top: 3px; transform: rotate(-135deg); }
.players-toggle:hover { background: var(--gold); color: var(--ink); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.stat { background: var(--ink); color: #fff; padding: 16px; text-align: center; }
.stat b { display: block; color: var(--gold); font: 34px/1.1 var(--head); }
.stat p { margin: 8px 0 0; }
.stat-grid { margin-bottom: 20px; }
.stat-vote { display: flex; justify-content: center; gap: 6px; }
.btn.vote-yes { background: var(--ok); }
.btn.vote-no { background: var(--bad); }
.btn.vote-yes:hover, .btn.vote-no:hover { filter: brightness(1.12); }

.chart { min-height: 520px; background: var(--ink); color: #fff; padding: 18px; margin-bottom: 14px; }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin-bottom: 14px; }
.chart-head h2 { font: 24px/1.2 var(--head); text-transform: uppercase; color: var(--gold); }
.chart-fresh, .chart-note { margin: 0; color: var(--muted); font-size: 13px; }
.chart-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.chart-tile { display: flex; flex-direction: column; min-width: 0; padding: 10px 12px; background: var(--ink-2); border-radius: var(--radius); }
.chart-tile span { color: var(--muted); font-size: 13px; }
.chart-tile b { font: 32px/1.15 var(--head); }
.chart-tile small { color: var(--muted); font-size: 12px; }
.chart-plot { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; height: 240px; border-bottom: 1px solid var(--ink-3); }
.chart-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; height: 100%; font-size: 13px; }
.chart-col:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.chart-col b { font-weight: 400; margin-bottom: 4px; }
.chart-col i { display: block; width: 100%; max-width: 56px; border-radius: 4px 4px 0 0; background: var(--gold); transition: background .1s; }
.chart-col:not(.now):hover i { background: #ffc733; }
.chart-col.now i { box-shadow: inset 0 0 0 1px var(--gold); background: repeating-linear-gradient(135deg, rgb(253 184 1 / .6) 0 3px, rgb(253 184 1 / .3) 3px 6px); }
.chart-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 6px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.3; text-align: center; }
.chart-days span { min-width: 0; }
.chart-days b { display: block; font-weight: 400; color: #fff; }
.emp-sales { margin: 18px 0 12px; }
.emp-sales caption { padding: 8px 10px; background: var(--ink); color: var(--gold); font: 20px var(--head); text-transform: uppercase; text-align: left; }
.emp-sales thead th { background: var(--ink); color: var(--muted); font-size: 13px; font-weight: 400; }
.emp-sales tbody th { font-weight: 400; text-align: left; }
.emp-sales td:nth-child(2) { font-family: Consolas, Menlo, monospace; }
.prose .copyhashes { margin: 0 14px 6px 0; }
.prose .copyhashes:hover { background: #ffc733; }
#copyhash { margin-top: 10px; padding: 10px 12px; background: var(--ink); font: 13px/1.5 Consolas, Menlo, monospace; }
#copyhash p { margin: 0; }

/* --- footer ------------------------------------------------------------------------------ */
.foot { position: relative; background: #28313a url(/assets/img/foot-tex.png) center bottom no-repeat; color: #fff; padding: 15px 0 12px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; align-items: end; }
.foot-links { grid-column: 1 / -1; justify-self: start; display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 5px 11px; background: var(--ink-2); font: 18px/22px var(--head); text-transform: uppercase; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--gold); }
.foot-logo { display: block; width: 194px; height: 40px; background: url(/media/img/f-logo.png) left center / contain no-repeat; }
.foot-right { text-align: right; font: 17px/19px var(--head); text-transform: uppercase; }
.foot-btns { display: flex; justify-content: flex-end; gap: 28px; margin-top: 12px; }
.foot-btns a { min-width: 96px; padding: 7px 12px; border-radius: 6px; background: var(--gold); color: var(--ink); text-align: center; text-decoration: none; font: 16px/20px var(--head); }
.foot-btns a:hover { background: #ffc733; }

/* --- modal ---------------------------------------------------------------------------------- */
.modal { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border: 0; border-top: 3px solid var(--gold); border-radius: var(--radius); background: var(--ink); color: #fff; padding: 18px; box-shadow: var(--shadow); }
.modal.wide { width: min(780px, calc(100vw - 32px)); }
.modal::backdrop { background: rgb(20 25 32 / .65); }
.modal[open] { animation: pop .16s ease-out; }
.modal h3 { color: var(--gold); font: 22px var(--head); text-transform: uppercase; margin: 0 26px 12px 0; overflow-wrap: anywhere; }
.modal label { display: block; margin-bottom: 10px; color: var(--muted); }
.modal input:not([type=radio], [type=checkbox]), .modal textarea { background: var(--ink-2); }
.modal-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 0; border-radius: 4px; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.modal-x:hover { color: #fff; background: var(--ink-2); }
.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.g-recaptcha { max-width: 100%; overflow: hidden; margin-bottom: 8px; }
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } }

/* --- notifications: alerts inside the page, toasts over it, tooltips on hover ------------------ */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin: 0 0 12px; border-left: 4px solid var(--c, var(--gold)); background: var(--ink); color: #fff; font-size: 14px; }
.alert .icon { color: var(--c, var(--gold)); font-size: 18px; margin-top: 1px; }
.alert b { color: var(--gold); font-weight: 400; }
.alert.ok { --c: var(--ok); }
.alert.err { --c: var(--bad); }
.alert.info { --c: var(--info); }
.alert.warn { --c: var(--warn); }

#toasts { position: fixed; z-index: 1000; inset: 16px 16px auto auto; margin: 0; padding: 0; border: 0; background: none; overflow: visible; height: auto; width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { position: relative; display: flex; gap: 10px; padding: 12px 34px 14px 12px; overflow: hidden; border-left: 4px solid var(--c); border-radius: var(--radius); background: var(--ink); color: #fff; box-shadow: var(--shadow); pointer-events: auto; animation: slide .2s ease-out; }
.toast .icon { flex: none; color: var(--c); font-size: 20px; }
.toast-title { display: block; font: 17px/1.2 var(--head); text-transform: uppercase; color: var(--c); }
.toast-x { position: absolute; top: 6px; right: 6px; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.toast-x:hover { color: #fff; }
.toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--c); transform-origin: left; animation: timer var(--ttl, 5s) linear forwards; }
.toast:hover::after { animation-play-state: paused; }
.toast.ok { --c: var(--ok); }
.toast.err { --c: var(--bad); }
.toast.info { --c: var(--info); }
.toast.warn { --c: var(--warn); }
.toast.out { opacity: 0; transform: translateX(16px); transition: .18s; }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
@keyframes timer { to { transform: scaleX(0); } }

#tip { position: fixed; z-index: 1100; inset: auto; margin: 0; border: 0; overflow: visible; max-width: 280px; padding: 5px 9px; border-radius: 4px; background: #14181e; color: #fff; font: 12px/1.35 var(--body); text-transform: none; pointer-events: none; opacity: 0; transition: opacity .1s; overflow-wrap: anywhere; box-shadow: 0 3px 10px rgb(0 0 0 / .4); }
#tip.show { opacity: 1; }
#tip::after { content: ""; position: absolute; left: var(--arrow, 50%); margin-left: -5px; border: 5px solid transparent; }
#tip[data-side=top]::after { top: 100%; border-top-color: #14181e; }
#tip[data-side=bottom]::after { bottom: 100%; border-bottom-color: #14181e; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; } }

/* --- tablet ------------------------------------------------------------------------------------ */
@media (max-width: 1060px) {
  .top-row { gap: 24px; }
  .nav { font-size: 20px; }
  .nav > a { padding: 0 11px; }
}
@media (max-width: 900px) {
  .main { padding-top: 52px; }
  .premium { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .servers-head, .srv { grid-template-columns: 44px minmax(0, 1fr) 160px 70px 92px; }
  .servers-head span:nth-child(5), .srv-map { display: none; }
  .server-page { grid-template-columns: minmax(0, 1fr); }
  .server-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .finder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form.grid { padding: 16px; gap: 8px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form.grid .btn { grid-column: 1 / -1; grid-row: auto; }
  .form.grid textarea { grid-column: 1 / -1; }
}

/* --- phone: lists become cards, menus collapse ---------------------------------------------------- */
@media (max-width: 720px) {
  body { font-size: 15px; background-size: 260% auto; }
  .main { padding-top: 20px; }
  .top-row { flex-wrap: wrap; gap: 10px; padding-top: 12px; padding-bottom: 10px; }
  .mini { display: none; }
  .logo { width: 180px; height: 38px; }
  .top-search { order: 3; flex: 1 0 100%; max-width: none; height: 40px; }
  .top-search input { font-size: 16px; }
  .burger { display: flex; }
  .nav { display: none; flex-direction: column; height: auto; font-size: 22px; line-height: 1; margin-bottom: 10px; }
  .nav.open { display: flex; }
  .nav > a { padding: 13px 14px; border-right: 0; border-top: 1px solid #454c55; }
  .nav > a:first-child { border-top: 0; }
  .nav > a.on { color: var(--gold); }
  .nav > a.on::before { display: none; }
  .nav-user { display: grid; padding: 6px; border-top: 1px solid #454c55; font: 16px/1.4 var(--body); text-transform: none; }
  .nav-user a, .nav-user button { display: block; width: 100%; padding: 9px 8px; border: 0; background: none; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; }
  .nav-user b { color: var(--gold); font-weight: 400; }
  .title { font-size: 27px; }
  .sec-head { font-size: 22px; }
  .premium { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .pcard-name { font-size: 17px; }
  .pcard-map { margin: 0 10px; }
  .pcard-addr { font-size: 16px; }

  .servers-head { display: none; }
  .servers { background: none; }
  .srv { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "flag name name" "addr addr players" "map map votes"; gap: 3px 8px; padding: 10px 12px; margin-bottom: 6px; border-radius: var(--radius); background: var(--ink); text-align: left; }
  .srv:nth-of-type(odd) { background: var(--ink); }
  .srv.tinted, .srv.tinted:nth-of-type(odd) { background: var(--tint); }
  .srv-flag { grid-area: flag; }
  .srv-name { grid-area: name; }
  .srv-addr { grid-area: addr; color: var(--muted); font-size: 16px; }
  .srv-players { grid-area: players; text-align: right; }
  .srv-map { display: block; grid-area: map; color: var(--muted); font-size: 16px; }
  .srv.tinted .srv-addr, .srv.tinted .srv-map { color: inherit; }
  .srv-votes { grid-area: votes; justify-content: flex-end; }
  .vote { font-size: 16px; padding: 6px 8px; }

  .table-wrap { overflow: visible; background: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tr, .table tbody tr:nth-child(odd) { background: var(--ink); border-radius: var(--radius); margin-bottom: 6px; padding: 6px 12px; }
  .table tr.tinted, .table tbody tr.tinted:nth-child(odd) { background: var(--tint); }
  .table td, .table.display td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; text-align: right; }
  .table.display { font-size: 16px; }
  .table td[data-label]::before { content: attr(data-label); flex: none; color: var(--muted); text-align: left; font: 13px var(--body); text-transform: none; }
  .table td.empty { display: block; text-align: center; }
  .table .actions { justify-content: flex-start; padding-top: 8px; }
  .bar { flex: 1; max-width: 160px; }

  .cabinet { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .side-box summary { cursor: pointer; }
  .side-box summary::after { content: " ▾"; color: var(--gold); }
  .side-box:not([open]) summary::after { content: " ▸"; }
  .form input:not([type=radio], [type=checkbox]), .form select, .form textarea, .modal input:not([type=radio], [type=checkbox]), .modal textarea, .field { font-size: 16px; }
  .form.grid { grid-template-columns: minmax(0, 1fr); }
  .info-cols, .server-side { grid-template-columns: minmax(0, 1fr); }
  .finder { padding: 12px; }
  .finder-main .btn { padding: 0 16px; }
  .finder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg span { padding: 6px 10px; }
  .btn { width: 100%; }
  .btn.small { width: auto; }
  .methods, .periods, .buy-step .methods { grid-template-columns: minmax(0, 1fr); }
  .srv-head { flex-wrap: wrap; gap: 8px 12px; }
  .srv-head > div { flex: 1 1 55%; }
  .srv-head h1 { font-size: 20px; }
  .srv-open { flex-basis: 100%; }
  .svc-stats { gap: 6px; }
  .svc-stats div { padding: 8px 10px; font-size: 11px; }
  .svc-stats b { font-size: 24px; }
  .svc-stats b.small { font-size: 17px; line-height: 26px; }
  .svc-row { flex-wrap: wrap; gap: 10px; }
  .svc-info { flex: 1 1 60%; }
  .svc-cta { width: 100%; text-align: center; }
  .buy { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buy-head { flex-wrap: wrap; }
  .buy-state { flex-basis: 100%; text-align: left; }
  .buy-state small { display: inline; margin-left: 6px; }
  .players-head, .player { grid-template-columns: 28px minmax(0, 1fr) 36px 84px; gap: 6px; padding-left: 10px; padding-right: 10px; }
  .players-head span, .player span:last-child { white-space: nowrap; }
  .chart { min-height: 620px; padding: 14px; }
  .chart-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .chart-tile b { font-size: 28px; }
  .chart-plot, .chart-days { gap: 3px; }
  .chart-plot { height: 200px; }
  .chart-col { font-size: 11px; }
  .chart-days { font-size: 10px; }
  .emp-sales, .emp-sales caption, .emp-sales tbody, .emp-sales tr, .emp-sales tbody th, .emp-sales td { display: block; }
  .emp-sales thead, .emp-sales td:empty { display: none; }
  .emp-sales tr { padding: 8px 10px; border: 1px solid var(--ink-3); border-top: 0; }
  .emp-sales tbody th, .emp-sales td { padding: 0; border: 0; text-align: left; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-right { text-align: left; }
  .foot-btns { justify-content: flex-start; gap: 10px; }
  .pager { gap: 2px; }
  .pager .step { width: auto; margin: 0 4px; padding: 3px 8px; }
  #toasts { inset: auto 16px 12px auto; }
  .logs-bar .field { width: 100%; }
}

/* --- page transitions and live blocks ------------------------------------------ */
#loadbar { position: fixed; z-index: 50; inset: 0 auto auto 0; width: 100%; height: 3px; background: var(--gold); transform-origin: left; transform: scaleX(0); opacity: 0; pointer-events: none; }
#loadbar.on { opacity: 1; animation: load 8s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes load { from { transform: scaleX(.08); } to { transform: scaleX(.92); } }
main:focus { outline: none; }
.enter { animation: enter .18s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
.flash { animation: flash 1.4s ease-out; }
@keyframes flash { from { filter: brightness(1.5); } }

/* --- VIP queue ---------------------------------------------------------------- */
.page-hero { display: flex; align-items: center; gap: 20px; padding: 16px 18px; background: linear-gradient(110deg, var(--ink) 55%, #4a3f22); color: #fff; border-left: 4px solid var(--gold); }
.page-hero-text { flex: 1; min-width: 0; }
.page-hero h1 { font: 30px/1.1 var(--head); text-transform: uppercase; color: var(--gold); }
.page-hero p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.hero-stats { flex: none; display: flex; margin: 0; }
.hero-stats div { min-width: 92px; padding: 2px 14px; border-left: 1px solid rgb(255 255 255 / .14); }
.hero-stats dt { color: var(--muted); font-size: 12px; white-space: nowrap; }
.hero-stats dd { margin: 2px 0 0; color: #fff; font: 30px/1.1 var(--head); white-space: nowrap; }
.hero-stats small { margin-left: 4px; color: var(--muted); font: 13px var(--body); }
.how-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 0 14px; padding: 0; list-style: none; background: var(--ink-3); }
.how-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; background: var(--ink-2); color: var(--muted); font-size: 12px; line-height: 1.35; }
.how-list .icon { margin-top: 2px; color: var(--gold); font-size: 20px; }
.how-list b { display: block; color: #fff; font: 17px/1.2 var(--head); text-transform: uppercase; }
.quick-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.quick-picks button { padding: 6px 11px; border: 1px solid var(--ink-3); border-radius: var(--radius); background: var(--ink); color: #fff; font-size: 13px; cursor: pointer; }
.quick-picks button:hover { border-color: var(--gold); }
.quick-picks button.on { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.quick-picks button.now { margin-left: auto; border-color: var(--gold); color: var(--gold); }
.quick-picks button.now.on { color: var(--ink); }
.q-hint { min-height: 20px; margin: 10px 0 0; color: var(--gold); font-size: 13px; }
.q-list, .q-won { margin: 0 0 14px; padding: 0; list-style: none; }
.q-list { display: grid; gap: 4px; }
.q-row { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; background: var(--ink-2); color: #fff; border-left: 3px solid transparent; }
.q-row.mine { background: var(--ink); border-left-color: var(--gold); }
.q-rank { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink-3); font: 17px/1 var(--head); }
.q-row:nth-child(-n+3) .q-rank { background: var(--gold); color: var(--ink); }
.q-server { flex: 1; display: grid; gap: 1px; min-width: 0; }
.q-server a, .q-server b { color: #fff; font: 700 14px/1.3 var(--body); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-server a:hover { color: var(--gold); }
.q-server small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.q-server em { color: var(--gold); font-style: normal; }
.q-sum { flex: none; color: var(--gold); font: 700 16px/1 var(--body); white-space: nowrap; }
.q-won { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 6px; }
.q-won li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--ink-2); color: #fff; }
.q-won .icon { color: var(--ok); font-size: 20px; }
.empty-box { margin-bottom: 14px; padding: 18px; background: var(--ink-2); color: var(--muted); text-align: center; }
.q-list .empty-box { margin-bottom: 0; }
.q-won .q-none { grid-column: 1 / -1; justify-content: center; color: var(--muted); }
/* --- account pages -------------------------------------------------------------- */
.page-hero a { color: var(--gold); }
.seg a { display: block; padding: 5px 12px; border: 1px solid var(--ink-3); border-radius: var(--radius); background: var(--ink); color: #fff; font-size: 13px; text-decoration: none; }
.seg a:hover { border-color: var(--gold); }
.seg a.on { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.seg-links { margin-bottom: 10px; }
.inv-list { display: grid; gap: 4px; margin: 0 0 14px; padding: 0; list-style: none; }
.inv-row { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 12px; background: var(--ink-2); color: #fff; border-left: 3px solid transparent; }
.inv-row > .icon { font-size: 20px; color: var(--ink-3); }
.inv-row.paid > .icon { color: var(--ok); }
.inv-row.wait { border-left-color: var(--gold); }
.inv-row.wait > .icon { color: var(--gold); }
.inv-row .q-server b { white-space: normal; font-weight: 400; overflow-wrap: anywhere; }
.disc-next { display: grid; gap: 8px; margin-bottom: 14px; padding: 14px 16px; background: var(--ink-2); color: #fff; }
.disc-next p { margin: 0; }
.disc-next p b { color: var(--gold); font-weight: 400; }
.disc-next .bar { max-width: none; }
.disc-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.disc-levels li { display: grid; gap: 2px; padding: 10px 12px; background: var(--ink-2); color: var(--muted); font-size: 12px; border-top: 3px solid var(--ink-3); }
.disc-levels b { color: #fff; font: 28px/1.1 var(--head); }
.disc-levels .done { border-top-color: var(--ok); }
.disc-levels .now { background: var(--ink); border-top-color: var(--gold); }
.disc-levels .now b, .disc-levels em { color: var(--gold); font-style: normal; }
.set-profile { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0 0 14px; padding: 12px 16px; background: var(--ink-2); color: #fff; }
.set-profile dt { color: var(--muted); font-size: 12px; }
.set-profile dd { margin: 0; overflow-wrap: anywhere; }
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.set-grid .panel { display: flex; flex-direction: column; margin-bottom: 0; }
.set-grid .btn { align-self: flex-start; margin-top: auto; }
.channels { display: grid; gap: 8px; margin-bottom: 14px; }
.channel { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--ink-2); color: #fff; }
.channel > .icon { font-size: 26px; color: var(--gold); }
.channel-body { flex: 1; min-width: 0; }
.channel h3 { font: 20px/1.2 var(--head); text-transform: uppercase; }
.channel p { margin: 2px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.link-btn { padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--bad); }
.switch { position: relative; flex: none; width: 46px; height: 26px; padding: 0; border: 0; border-radius: 13px; background: var(--ink-3); cursor: pointer; transition: background .15s; }
.switch i { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch.on { background: var(--ok); }
.switch.on i { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 720px) {
  .inv-row { flex-wrap: wrap; gap: 6px 10px; padding-right: 10px; }
  .inv-row .q-server { flex-basis: calc(100% - 32px); }
  .inv-row .q-sum { margin-left: 30px; }
  .inv-row .badge, .inv-row form { margin-left: auto; }
  .set-grid { grid-template-columns: minmax(0, 1fr); }
  .set-grid .btn { align-self: stretch; }
  .channel { flex-wrap: wrap; }
  .channel .btn { width: 100%; }
}

/* --- text pages ----------------------------------------------------------------- */
.doc-body { margin-bottom: 14px; padding: 18px 22px; background: var(--ink-2); color: #fff; line-height: 1.6; overflow-wrap: anywhere; }
.doc-body.plain { padding: 0; background: none; }
.doc-body h2 { margin: 24px 0 8px; color: var(--gold); font: 24px/1.2 var(--head); text-transform: uppercase; }
.doc-body h3 { margin: 18px 0 8px; font: 20px/1.2 var(--head); text-transform: uppercase; }
.doc-body > :first-child { margin-top: 0; }
.doc-body hr { margin: 18px 0; border: 0; border-top: 1px solid var(--ink-3); }
.doc-body .marker { color: var(--gold); }
.doc-body ol { display: grid; gap: 8px; padding: 0; list-style: none; counter-reset: item; }
.doc-body ol > li { position: relative; min-height: 26px; padding-left: 36px; counter-increment: item; }
.doc-body ol > li::before { content: counter(item); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--gold); font: 15px/26px var(--head); text-align: center; }
.doc-body ul { padding-left: 20px; }
.doc-body ul li::marker { color: var(--gold); }
.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.contact-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--ink); color: #fff; }
.contact-card > .icon { font-size: 26px; color: var(--gold); }
.doc .page-hero { margin-bottom: 12px; }
.faq-filter { margin-bottom: 12px; }
.faq-filter input { width: 100%; height: 44px; padding: 0 12px 0 38px; border: 1px solid #cfcfcf; border-radius: var(--radius); outline: none; background: #fff url(/media/img/search.png) 13px center no-repeat; color: var(--ink); font-size: 15px; }
.faq-filter input:focus { border-color: var(--gold); }
.faq-filter input::placeholder { color: var(--ink-3); }
.empty-box a { color: var(--gold); }
.faq-item { margin-bottom: 6px; background: var(--ink); color: #fff; border-left: 4px solid var(--ink-3); box-shadow: 0 1px 3px rgb(0 0 0 / .18); }
.faq-item:hover, .faq-item[open] { border-left-color: var(--gold); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; font: 18px/1.25 var(--head); text-transform: uppercase; letter-spacing: .02em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--ink); font: 700 18px/24px var(--body); text-align: center; }
.faq-item[open] summary::after { content: "–"; }
.faq-item > div { padding: 12px 16px 14px; border-top: 1px solid var(--ink-3); background: var(--ink-2); color: #fff; font-size: 14px; line-height: 1.6; }
.faq-item p { margin: 0 0 8px; }
.faq-item p:last-child { margin-bottom: 0; }
.faq-item strong { color: var(--gold); font-weight: 400; }
.faq-prices { display: grid; gap: 8px; }
.faq-prices > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.faq-prices b { font-weight: 700; }
.faq-prices span { display: flex; flex-wrap: wrap; gap: 4px; }
.faq-prices i { padding: 2px 8px; border-radius: 5px; background: var(--ink); color: var(--gold); font-style: normal; font-size: 13px; white-space: nowrap; }
.doc-body ul.faq-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; margin: 8px 0; padding: 0; list-style: none; }
.faq-levels li { padding: 5px 8px; background: var(--ink); color: var(--muted); font-size: 12px; }
.faq-levels b { display: block; color: var(--gold); font: 20px/1.1 var(--head); }
@media (max-width: 720px) {
  .faq-prices > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .doc-body { padding: 14px; }
  .doc-body.plain { padding: 0; }
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
}

/* --- favorites ---------------------------------------------------------------- */
.fav-tasks { display: grid; gap: 8px; margin-bottom: 14px; }
.fav-task { display: grid; gap: 8px; padding: 12px 14px; background: var(--ink-2); color: #fff; border-left: 3px solid var(--ok); }
.fav-task.paused { border-left-color: var(--ink-3); }
.fav-task.paused .bar i { filter: grayscale(1); }
.fav-task .bar { max-width: none; }
.fav-head { display: flex; align-items: center; gap: 10px; }
.fav-meta { margin: 0; color: var(--muted); font-size: 12px; }
.fav-meta b { color: #fff; font-weight: 400; }
.fav-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fav-done { margin-bottom: 14px; background: var(--ink-2); color: #fff; }
.fav-done summary { padding: 9px 14px; cursor: pointer; font: 18px/1.2 var(--head); text-transform: uppercase; }
.fav-done summary:hover { color: var(--gold); }
.fav-done ul { margin: 0; padding: 0; list-style: none; }
.fav-done li { display: flex; align-items: center; gap: 12px; padding: 7px 14px; border-top: 1px solid var(--ink-3); }
.fav-count { flex: none; color: var(--muted); font-size: 12px; }
@media (max-width: 900px) {
  .page-hero { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-stats div { flex: 1; min-width: 0; }
  .hero-stats div:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 720px) {
  .how-list { grid-template-columns: minmax(0, 1fr); }
  .page-hero h1 { font-size: 26px; }
  .hero-stats dd { font-size: 24px; }
  .hero-stats dt { font-size: 11px; white-space: normal; }
  .hero-stats div { padding: 0 8px; }
  .quick-picks button { flex: 1 1 auto; }
  .quick-picks button.now { flex-basis: 100%; margin-left: 0; }
  .q-row { gap: 8px; padding-right: 10px; }
  .q-row.mine { flex-wrap: wrap; }
  .q-row.mine .q-server { flex-basis: calc(100% - 38px); }
  .q-row.mine .q-sum { margin-left: 38px; }
  .q-row form { margin-left: auto; }
}