/* Boshqaruv paneli (/admin) — portal bilan bir xil "Penguins" dizayn tokenlari (public/p.css) */
:root { --bg: #0b111c; --card: #111a28; --card2: #0d1522; --surface-2: #172235; --line: #1e2c44; --line-2: #2a3b57;
  --text: #e8eef7; --text-2: #a9b8ce; --muted: #93a4bd; --green: #3dd68c; --red: #ff6464; --warn: #f5c24b;
  --accent: #4fd1e8; --accent-ink: #06222a; --t: #f5a524; --ct: #6c8cff; --r: 14px;
  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; } a:hover { color: #8be6f2; }
code { font-family: var(--mono); font-size: .92em; }
h1, h2, h3 { margin: 0; font-weight: 700; font-family: var(--display); letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
/* .form tashqarisidagi maydonlar (filtrlar va h.k.) ham qorong'i bo'lsin; .form ichidagilar o'z uslubini oladi */
:where(select, input:not([type=checkbox], [type=radio], [type=range], [type=file]), textarea) { background: var(--card2); color: var(--text); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 8px; font: inherit; }
:where(select, input, textarea):focus { outline: none; border-color: var(--accent); }
:where(input[type=checkbox], input[type=radio]) { accent-color: var(--accent); }
main { max-width: 1240px; margin: 0 auto; padding: 24px 24px 48px; }
.ic { vertical-align: -3px; flex-shrink: 0; }
.muted { color: var(--muted); } .sm { font-size: 12px; } .mono { font-family: var(--mono); font-size: 12px; }
.err { color: var(--red); font-size: 13px; margin: 0; } .flash { color: var(--green); font-size: 13px; margin: 0; }
.status { font-size: 13px; } .status.ok { color: var(--green); }
.cnt { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--line); color: var(--muted); font-size: 12px; text-align: center; margin-left: 4px; font-weight: 500; }
.tag { font-size: 12px; background: var(--surface-2); color: var(--muted); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; vertical-align: middle; }
.dot.on { background: var(--green); box-shadow: 0 0 0 3px rgba(61,214,140,.18); } .dot.off { background: var(--red); }
.dot.sm { width: 7px; height: 7px; box-shadow: none; }

/* header: portal navigatsiyasi bilan bir xil (logo · bo'limlar · holat · til · foydalanuvchi) */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; padding: 12px 24px; min-height: 64px;
  border-bottom: 1px solid #1b2840; background: rgba(11,17,28,.88); backdrop-filter: blur(10px); }
.brand { font: 700 19px var(--display); color: var(--text); display: inline-flex; align-items: center; gap: 10px; }
.brand:hover { color: var(--text); }
.brand .badge { font: 600 11px Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: rgba(79,209,232,.12); padding: 3px 8px; border-radius: 999px; }
.anav { display: flex; gap: 4px 18px; flex-wrap: wrap; }
.anav a { color: var(--muted); padding: 6px 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.anav a:hover, .anav a.on { color: var(--text); }
.anav a.on { font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.chips { display: flex; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; background: var(--card); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; color: var(--text-2); }
.chip .short { display: none; }
.chip.warn { color: var(--warn); border-color: rgba(245,194,75,.4); }
.userbox { display: flex; gap: 8px; align-items: center; margin: 0; }
/* o'rta kenglikda: holat chiplari pastki qatorga, til va foydalanuvchi o'ngda qoladi */
@media (max-width: 1180px) { .top .anav { flex: 1 1 auto; } .top .chips { justify-content: flex-start; } }

/* tabs */
.tabs { display: flex; gap: 6px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.tabs a { padding: 8px 16px; color: var(--muted); border: 1px solid transparent; border-radius: 999px; font-weight: 600; }
.tabs a:hover { color: var(--text); background: var(--card); }
.tabs a.on { color: var(--text); background: var(--surface-2); border-color: var(--line-2); } .tabs .upd { margin-left: auto; }
/* ikkinchi daraja: guruh ichidagi sahifalar (Matchlar → Demolar, Sozlamalar → Skinlar ...) */
.tabs:has(+ .subtabs) { margin-bottom: 8px; }
.subtabs { display: flex; gap: 4px 18px; flex-wrap: wrap; margin: 0 0 20px; padding: 0 6px; border-bottom: 1px solid var(--line); }
.subtabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 2px; color: var(--muted); font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subtabs a:hover { color: var(--text); } .subtabs a.on { color: var(--text); border-bottom-color: var(--accent); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .35; cursor: not-allowed; border-style: dashed; }
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; } .btn.on { border-color: var(--accent); color: var(--accent); background: rgba(79,209,232,.08); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn.ghost:hover:not(:disabled) { color: var(--text); background: var(--surface-2); border-color: var(--line); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border: 0; padding: 11px 16px; font-size: 15px; font-weight: 700; justify-content: center; border-radius: 12px; }
.btn.primary:hover:not(:disabled) { background: #6fdcef; color: var(--accent-ink); }
.actions { display: flex; gap: 6px; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: border-color .15s, opacity .2s; }
.card:hover { border-color: var(--line-2); } .card.htmx-request { opacity: .5; pointer-events: none; }
.card .cover { position: absolute; inset: 0; border-radius: var(--r); z-index: 0; } /* butun kartochka — detail'ga havola */
.card > *:not(.cover) { position: relative; z-index: 1; pointer-events: none; }
.card .btn, .card a, .card .connect { pointer-events: auto; }
.card.empty { align-items: center; text-align: center; padding: 40px 20px; } .card.empty p { margin: 6px 0 0; }
.card-head { display: flex; align-items: center; gap: 10px; }
.titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.titles h2 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.connect { display: flex; align-items: center; gap: 8px; background: var(--card2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 6px 6px 12px; }
.connect code { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.bignum { line-height: 1; } .bignum b { font-size: 34px; font-weight: 800; }
.meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.meta li span { color: var(--muted); margin-right: 5px; }
.players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.players li { display: flex; align-items: center; gap: 10px; background: var(--card2); padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); }
.players img, .ava { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.ava { background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent); font-size: 13px; }
.pname { font-weight: 600; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .pname .steam { font-weight: 400; }
.dur { margin-left: auto; white-space: nowrap; font-size: 13px; color: var(--muted); }
.nobody { margin: 0; padding: 10px; text-align: center; border: 1px dashed var(--line); border-radius: 9px; font-size: 13px; color: var(--muted); opacity: .8; }
.card footer { display: flex; justify-content: flex-end; margin-top: auto; }

/* detail */
.crumb { margin: 0 0 12px; font-size: 14px; }
.dhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dtitle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dtitle h1 { font-size: 22px; }
.dtitle .addr { background: var(--card2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; font-size: 13px; }
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tile .k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.tile .v { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .s { font-size: 12px; color: var(--muted); min-height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#detail-top.htmx-request { opacity: .6; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-top: 16px; }
.panel h3 { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }
.panel header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .panel header h3 { margin: 0; }
.ranges { display: flex; gap: 6px; }
.chartbox { height: 260px; position: relative; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .col > .panel:first-child { margin-top: 16px; }
.tbl { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
td, th { padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; } tr:last-child td { border-bottom: 0; }

/* log */
.logpanel summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.logpanel summary::-webkit-details-marker { display: none; } .logpanel summary h3 { margin: 0; }
.logpanel summary h3::before { content: "▸"; color: var(--muted); font-size: 12px; } .logpanel[open] summary h3::before { content: "▾"; }
.logbar { display: flex; gap: 6px; margin: 12px 0 8px; }
.logs { background: #070c15; color: var(--text-2); font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 12px 14px; border-radius: 9px;
  max-height: 460px; overflow: auto; margin: 0; white-space: pre-wrap; word-break: break-all; border: 1px solid var(--line); }
#logs.filtered .logs span:not(.ev) { display: none; }
.logs .in { color: var(--green); } .logs .out { color: var(--warn); } .logs .bad { color: var(--red); }

/* login */
.login { max-width: 400px; margin: 12vh auto; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 36px 30px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.login .logo { display: flex; justify-content: center; } .login h1 { margin: 10px 0 2px; font-size: 26px; } .login p { margin: 0 0 22px; }
.login form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.login label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 13px; }
.login input { background: var(--card2); border: 1px solid var(--line-2); color: var(--text); border-radius: 10px; padding: 11px 12px; font: inherit; }
.login input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,209,232,.15); }
.errbox h1 { font-size: 22px; } .errbox p { margin: 8px 0 22px; overflow-wrap: anywhere; }
.errcode { display: inline-block; margin-top: 14px; color: var(--accent); font-size: 13px; letter-spacing: .1em; }
.errnav { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .errnav .btn.primary { padding: 9px 16px; font-size: 14px; }
.login .btn.steam { width: 100%; justify-content: center; margin-top: 18px; padding: 11px 16px; background: var(--text); color: var(--bg); border-color: var(--text); font-size: 15px; border-radius: 12px; }
.login .btn.steam:hover:not(:disabled) { background: #fff; color: var(--bg); border-color: #fff; }

@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .two { grid-template-columns: 1fr; } .col > .panel:first-child { margin-top: 16px; } }
@media (max-width: 600px) { main { padding: 16px 16px 32px; } .cards { grid-template-columns: 1fr; } .tiles { grid-template-columns: repeat(2, 1fr); }
  /* telefonda sarlavha yopishmaydi (ekranni egallamasin), bo'limlar bitta suriladigan qatorda */
  .top { position: static; padding: 10px 16px; gap: 8px 12px; min-height: 0; } .chips { flex: 0 1 auto; }
  .top .anav { order: 5; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 16px; margin: 0 -16px; padding: 0 16px; }
  .top .anav a { white-space: nowrap; } .top .langs { margin-left: auto; } .userbox .btn .muted { display: none; } .chips > .chip { display: none; } .net .chip { padding: 3px 8px; } .net .full { display: none; } .net .short { display: inline; } .tabs .upd { display: none; } .dtitle h1 { font-size: 19px; } .chartbox { height: 220px; } }

/* sozlamalar / foydalanuvchilar / banner */
.banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: rgba(245,194,75,.1); border: 1px solid rgba(245,194,75,.35); color: var(--warn); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; }
.tag.warn { background: rgba(245,194,75,.15); color: var(--warn); }
.btn.danger:hover:not(:disabled) { color: var(--red); border-color: var(--red); }
.form label, .login label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.form input, .form select, .form textarea { background: var(--card2); border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 9px 11px; font: inherit; width: 100%; }
.form textarea { font-family: ui-monospace, monospace; font-size: 13px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.form label.chk { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: 14px; } .form label.chk input { width: auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .keys { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.formbar { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.inline input { padding: 4px 8px; font-size: 13px; width: 140px; background: var(--card2); border: 1px solid var(--line); color: var(--text); border-radius: 7px; font: inherit; }
td.actions { display: flex; gap: 10px; align-items: center; }
@media (max-width: 820px) { .three { grid-template-columns: 1fr; } }

/* til tanlovi */
.langs { display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.langs a { color: var(--muted); padding: 6px 7px; border-radius: 8px; } .langs a.on { color: var(--text); background: var(--surface-2); } .langs a:hover { color: var(--accent); }
.langs.float { position: absolute; top: 14px; right: 20px; }
.panel h3.sub { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.form label[hidden] { display: none; } .form input.num { max-width: 120px; }
.rconbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .inline.grow { flex: 1; } .inline.grow input { flex: 1; width: auto; }
.rconbar select { background: var(--card2); border: 1px solid var(--line); color: var(--text); border-radius: 7px; padding: 4px 8px; font: inherit; font-size: 13px; }
.logs.rcon { max-height: 260px; margin-top: 8px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; } .form h4 { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
table.skins td { padding: 4px 6px; } table.skins select, table.skins input { width: 100%; padding: 5px 8px; font-size: 13px; } table.skins input[type=checkbox] { width: auto; } table.skins input.num { width: 80px; }
.form .rconbar select.grow { flex: 1; min-width: 200px; } .form .rconbar input { width: 220px; }
@media (max-width: 700px) { .grid3 { grid-template-columns: 1fr; } }
.cfgtabs { margin-top: 4px; } .cfgtabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; }
[hidden] { display: none !important; }
.form .picker { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .form .picker select { flex: 2; min-width: 220px; width: auto; } .form .picker input { flex: 1; min-width: 180px; width: auto; }
.lo-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; } .lo-head h3 { margin: 0; }
.cats { display: flex; gap: 4px; flex-wrap: wrap; } .cats button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.cats button.on { color: var(--text); border-color: var(--accent); }
.lo-body { display: grid; grid-template-columns: minmax(300px, 2fr) 3fr; gap: 16px; align-items: start; }
.lo-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.slot { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: var(--text); font: inherit; font-size: 12px; text-align: center; min-width: 0; }
.slot img { width: 100%; height: 76px; object-fit: contain; } .slot .noimg { height: 76px; display: grid; place-items: center; color: var(--muted); }
.slot b { font-size: 13px; } .slot span { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.slot.on, .skitem.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.lo-gallery { margin-top: 0; padding: 0; overflow: hidden; } .lo-gallery > p { padding: 16px; margin: 0; }
.dlg-head { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.dlg-head input { flex: 1; background: var(--card2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 7px 10px; font: inherit; }
.skopts { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; padding: 10px 12px; border-bottom: 1px solid var(--line); } .skopts label { margin: 0; } .skopts input[type=number] { width: 90px; } .skopts input[maxlength] { width: 160px; }
.skingrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 12px; max-height: 70vh; overflow: auto; }
.skitem { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; color: var(--text); font: inherit; font-size: 12px; text-align: center; }
.skitem:hover, .slot:hover { border-color: var(--accent); } .skitem img { width: 100%; height: 76px; object-fit: contain; } .skitem .noimg { height: 76px; display: grid; place-items: center; color: var(--muted); }
.lo-spawn { margin-top: 0; }
.formbar.sticky { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; margin-top: 12px; }
/* Galereya: bir qatordagi skinlar soni (avto / 2 / 3 / 4) — .dlg-head dagi kichik tanlagich */
.cols { display: flex; gap: 2px; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.cols button { background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 6px; cursor: pointer; }
.cols button:hover { color: var(--text); } .cols button.on { background: var(--card); color: var(--text); box-shadow: 0 0 0 1px var(--accent) inset; }
.skingrid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); } .skingrid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); } .skingrid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.skingrid[data-cols="2"] .skitem img, .skingrid[data-cols="2"] .skitem .noimg { height: 160px; }
.skingrid[data-cols="3"] .skitem img, .skingrid[data-cols="3"] .skitem .noimg { height: 115px; }
#lo-flash.ok { color: var(--green); } #lo-flash.bad { color: var(--red); }
@media (max-width: 820px) { .lo-body { grid-template-columns: 1fr; } .skingrid { max-height: 50vh; } }
[hidden] { display: none !important; }
.form .picker { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .form .picker select { flex: 2; min-width: 220px; width: auto; } .form .picker input { flex: 1; min-width: 180px; width: auto; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.center { text-align: center; margin: 4px 0 0; }
.teamtabs { display: flex; gap: 6px; } .teamtabs button { background: var(--card); border: 1px solid var(--line); color: var(--muted); border-radius: 9px; padding: 7px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.teamtabs button.on { color: var(--text); border-color: var(--accent); background: rgba(79,209,232,.08); }
.buygrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .buygrid .slot.on { background: rgba(61,214,140,.06); border-color: rgba(61,214,140,.5); }
.buygrid .slot:disabled { opacity: .45; cursor: default; } @keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .shake { animation: shake .2s 2; }
.tag.live { background: rgba(61,214,140,.12); color: var(--green); }
.banner { display: block; } .banner-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.changes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text); }
.applybox { margin-top: 8px; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; } .applybox:empty { display: none; }
.applybox .ok { color: var(--green); font-weight: 700; } .applybox .err { color: var(--red); font-weight: 700; }
.spin { width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } }
.rconbar.quick { margin-bottom: 10px; } .rcon-out { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .rcon-out .logs { max-height: 220px; }
.panel > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .panel > header h3 { margin: 0; }
.panel > footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; }
.presets { border-color: rgba(79,209,232,.35); } .preset-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.preset { display: inline-flex; align-items: center; gap: 6px; background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 4px 6px 4px 4px; }
.preset-save input { width: 220px; padding: 5px 9px; }
.form label > .tag { align-self: flex-start; margin: -2px 0 2px; }
.panel footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; }
.variants { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.variant { background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer; color: var(--text); font: inherit; text-align: left; min-width: 160px; }
.variant:hover { border-color: var(--accent); } .variant.on { border-color: var(--green); background: rgba(61,214,140,.07); }
/* match statistika */
b.ok, .rt.ok { color: var(--green); } b.bad, .rt.bad { color: var(--red); }
.wl { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; text-align: center; color: var(--bg); }
.wl.win { background: var(--green); } .wl.loss { background: var(--red); } .wl.draw { background: var(--muted); }
table.matches tr.win td:first-child { box-shadow: inset 3px 0 0 var(--green); } table.matches tr.loss td:first-child { box-shadow: inset 3px 0 0 var(--red); }
table.stats td, table.stats th { text-align: center; } table.stats td:first-child, table.stats th:first-child { text-align: left; }
table.stats tr.me td { background: rgba(79,209,232,.08); }
.matchhead { text-align: center; } .mh-score { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; }
.mh-team { font-size: 18px; font-weight: 600; } .mh-team.ok { color: var(--green); } .mh-num { font-size: 30px; font-weight: 800; }
.mh-meta { margin-top: 6px; } .mh-acts { margin-top: 10px; display: flex; justify-content: center; gap: 8px; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.statgrid div { background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; } .statgrid b { font-size: 16px; }
.filters { display: flex; gap: 6px; } .filters select { padding: 4px 8px; font-size: 13px; }
.avatar { width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; }
/* tez boshlash (CS:GO uslubi) */
.modetabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.modetabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.modetabs button:hover { color: var(--text); } .modetabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.qbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.qbar .variants { margin: 0; } .qbar .variant { padding: 6px 14px; }
.qbots { display: flex; gap: 10px; align-items: flex-end; } .qbots label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.qbots select, .qbots input { padding: 6px 8px; } .qbots input.num { width: 70px; }
.mapgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mapcard { position: relative; background: var(--card2); border: 2px solid var(--line); border-radius: 10px; padding: 0; overflow: hidden; cursor: pointer; aspect-ratio: 16/10; display: flex; align-items: flex-end; }
.mapcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .15s, transform .15s; }
.mapcard span { position: relative; width: 100%; padding: 16px 8px 6px; background: linear-gradient(transparent, rgba(0,0,0,.85)); color: #fff; font-size: 13px; font-weight: 600; text-align: center; }
.mapcard:hover img { opacity: 1; transform: scale(1.04); } .mapcard:hover { border-color: var(--accent); }
.mapcard.on { border-color: var(--green); } .mapcard.on img { opacity: 1; }
details.advanced { margin-top: 18px; } details.advanced > summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 10px 2px; list-style: none; }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary h3 { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; }
details.advanced > summary::before { content: '▸'; color: var(--muted); } details.advanced[open] > summary::before { content: '▾'; }
/* rejim qoidalari kategoriyalari + preset filtri */
.cvarcat { margin-bottom: 14px; } .cvarcat h5 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.presetbar { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.presetbar .q { padding: 5px 8px; font-size: 13px; min-width: 160px; }
.quick footer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.quick footer .chk { margin: 0; } .quick footer input.num { width: 64px; } .quick footer #q-sel { margin-left: auto; }
/* Rejim mosligi izohlari (modecheck): maydon yonida; err — saqlash bloklanadi */
.mhint { display: block; font-size: 12px; line-height: 1.35; margin-top: 3px; font-weight: 400; }
.mhint:empty { display: none; }
.mhint span { display: block; } .mhint .err { color: var(--red); } .mhint .warn { color: var(--warn); } .mhint .info { color: var(--muted); }
label:has(.mhint .err) input, label:has(.mhint .err) select, .qbots label:has(.mhint .err) input { border-color: var(--red); outline: 1px solid var(--red); }
.mchk-list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; } .mchk-list.err { color: var(--red); }
button.blocked { opacity: .55; cursor: not-allowed; }
/* Modlar */
.steps { margin: 4px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.6; } .steps b { color: var(--text); }
tr.off td { opacity: .55; } .warn-txt { color: var(--warn); } .cfglist { display: flex; flex-wrap: wrap; gap: 6px; }
.userservers { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } .userservers label { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; }
table.mods td:first-child { white-space: normal; min-width: 260px; } table.mods td { vertical-align: top; }
.two > * { min-width: 0; } .two.users { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
@media (max-width: 820px) { .two.users { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .top { flex-wrap: wrap; } .userbox { flex-wrap: wrap; gap: 6px; } .userbox .btn { padding: 4px 8px; } } /* admin tugmalari telefonda sig'magan edi */
@media (max-width: 820px) { /* modlar: telefonda har qator kartochka — nom to'liq kenglikda, versiya/joy/holat/amallar ostida */
  table.mods tr:first-child { display: none; } table.mods tr { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.mods td { border: 0; padding: 0; } table.mods td:first-child { flex-basis: 100%; min-width: 0; } }

.perm-tbl th, .perm-tbl td { text-align: center; } .perm-tbl th:first-child, .perm-tbl td:first-child { text-align: left; } .perm-tbl th { font-size: 12px; }
.permdesc { padding-left: 18px; margin: 10px 0 0; } .form .chk { display: flex; gap: 6px; align-items: flex-start; }

/* roles page */
.rhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 6px 0 16px; } .rhead h1 { font-size: 24px; } .rhead p { margin: 4px 0 0; }
.rcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.rcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.rcard header { display: flex; align-items: center; gap: 10px; } .rcard .rt { display: flex; flex-direction: column; flex: 1; min-width: 0; } .rcard .rt b { font-size: 15px; } .rcard .rt code { font-size: 12px; color: var(--muted); }
.ric { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(79,209,232,.12); color: var(--accent); flex-shrink: 0; }
.rdesc { margin: 0; min-height: 18px; } .rbadges { display: flex; gap: 6px; flex-wrap: wrap; } .tag.b1 { background: rgba(79,209,232,.14); color: var(--accent); } .tag.b2 { background: rgba(183,156,255,.14); color: #b79cff; }
.rmodal { width: min(920px, 96vw); max-height: 92vh; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card2); color: var(--text); }
.rmodal::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.rmodal form { display: flex; flex-direction: column; max-height: 92vh; }
.rmodal header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); } .rmodal header h3 { font-size: 16px; }
.rbody { overflow: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.rfields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.rfields label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); } .rfields i { color: var(--red); font-style: normal; }
.rfields input { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 14px; } .rfields input[readonly] { opacity: .6; }
.pgroup { border: 1px solid var(--line); border-radius: 10px; margin: 0; padding: 10px 12px; min-width: 0; } .pgroup .ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .pgroup .ph b { font-size: 13px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 14px; }
.pi { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; cursor: pointer; } .pi span { display: flex; flex-direction: column; } .pi code { font-size: 11px; color: var(--muted); } .pi input { margin-top: 3px; }
.rmodal footer { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); } .rmodal footer .grow { flex: 1; }
.rmodal .btn.primary { padding: 8px 16px; font-size: 14px; }
@media (max-width: 720px) { .rfields { grid-template-columns: 1fr; } }
.xbtn::before { content: "\2715"; }

/* restore hint */
.restore { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; background: var(--card2); font-size: 13px; }
.restore summary { cursor: pointer; font-weight: 600; } .restore ol { margin: 10px 0 6px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.restore .cmd { margin-top: 6px; } .restore .cmdrow { display: flex; gap: 8px; align-items: flex-start; }
.restore pre { flex: 1; min-width: 0; margin: 4px 0 0; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
.restore code { font-size: 12px; white-space: pre; } .restore .cmdrow .btn { margin-top: 4px; }
.warnline { color: var(--warn); margin: 6px 0 0; }
/* Sotib olish: CS:GO loadout g'ildiragi (chap, SVG bo'laklar + yorliqlar) + tanlangan slot variantlari (o'ng) */
.buy-body { display: grid; grid-template-columns: minmax(300px, 520px) 1fr; gap: 16px; align-items: start; }
.buy-body > .panel { margin-top: 0; }
.buy-wheel { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; }
.buy-wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bw-sec { fill: var(--card2); stroke: var(--bg); stroke-width: 1.2; cursor: pointer; transition: fill .15s; }
.bw-sec:hover { fill: var(--card); } .bw-sec.on { fill: rgba(79,209,232,.22); stroke: var(--accent); stroke-width: 1; }
.bw-hub { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
.bw-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 700; font-size: 4.2cqi; pointer-events: none; }
.bw-center.t { color: var(--t); } .bw-center.ct { color: var(--ct); }
.bw-lab { position: absolute; width: 27%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; text-align: center; }
.bw-lab b { font-size: 2.7cqi; color: var(--accent); line-height: 1.2; } .bw-lab span { font-size: 2.3cqi; color: var(--muted); }
.bw-lab img, .bw-lab .noimg { width: 100%; height: 15cqi; object-fit: contain; display: grid; place-items: center; color: var(--muted); }
.bw-lab.chg b { color: var(--warn); } .bw-lab.off, .bw-lab.lock { opacity: .45; } .bw-lab.off b { color: var(--muted); }
.bw-pair { display: flex; width: 100%; } .bw-pair img { width: 50%; }
@media (max-width: 820px) { .buy-body { grid-template-columns: 1fr; } .bw-lab { width: 30%; } }
.buy-opts > p { grid-column: 1 / -1; margin: 0; }
.bw-lab .bw-n { font-style: normal; font-size: 2.2cqi; color: var(--muted); }
/* bosh sahifa: "Diqqat talab qiladi" — faqat biror narsa bo'lsa chiqadi */
.attention { background: var(--card); border: 1px solid rgba(245,194,75,.35); border-radius: var(--r); padding: 14px 16px; margin-bottom: 20px; }
.attention h2 { font-size: 15px; display: flex; align-items: center; gap: 8px; color: var(--warn); margin-bottom: 10px; }
.attention ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.attention li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--card2); border-left: 3px solid var(--warn); font-size: 14px; }
.attention li.bad { border-left-color: var(--red); } .attention li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dot.warn { background: var(--warn); }
.rc-state { margin: 0; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
/* telefonda server tablari bitta suriladigan qatorda (faol tab app.js da ko'rinadigan joyga suriladi) */
@media (max-width: 600px) {
  .cfgtabs, .subtabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .cfgtabs a, .subtabs a { white-space: nowrap; flex: none; }
}