/* CHES.MONEY look: near-black surfaces, white type, the logo's coin gold as the one accent. */
:root {
  --bg: #0e0e0f; --panel: #18181a; --panel-2: #202023; --text: #f3f3f1; --muted: #9b9b98; --line: #2b2b2f;
  --gold: #f5c518; --gold-2: #e0a90b; --on-gold: #111; --good: #3ccf7a; --bad: #ff5d5d; --warn: #ffb547;
  --radius: 14px; --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --brand: "Montserrat", var(--font);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f4f2; --panel: #fff; --panel-2: #f0f0ee; --text: #121212; --muted: #6d6d6a; --line: #e4e4e0;
    --gold: #e9b200; --gold-2: #c99600; --good: #14a352; --bad: #d93636; --warn: #c27a00; color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f4f4f2; --panel: #fff; --panel-2: #f0f0ee; --text: #121212; --muted: #6d6d6a; --line: #e4e4e0;
  --gold: #e9b200; --gold-2: #c99600; --good: #14a352; --bad: #d93636; --warn: #c27a00; color-scheme: light;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }  /* space for the scrollbar is always reserved, so short and long pages line up */
body { margin: 0; font: 14px/1.5 var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--gold); text-decoration: none; }
code { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 12.5px; background: var(--panel-2);
       padding: 1px 6px; border-radius: 6px; }

/* --- top bar --- */
header.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent);
             backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
header.top .inner { display: flex; align-items: center; gap: 12px; max-width: 1440px; margin: 0 auto; padding: 10px 14px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); flex-shrink: 0; }
.brand img { height: 30px; }
.brand b { font: 700 15px/1 var(--brand); letter-spacing: .22em; }
.brand small { display: block; font-size: 10px; letter-spacing: .3em; color: var(--muted); margin-top: 3px; }
nav.menu { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; justify-content: space-between; }
nav.menu a { padding: 7px 6px; font-size: 13px; border-radius: 999px; color: var(--muted); white-space: nowrap; font-weight: 600; }
nav.menu a:hover { color: var(--text); }
nav.menu a.on { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.top-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rate-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums; cursor: default; }
button.rate-badge { cursor: pointer; color: var(--text); font-family: inherit; line-height: inherit; }
button.rate-badge:hover { background: var(--panel-2); border-color: var(--gold); }
.rate-badge .rb-grp { display: inline-flex; gap: 4px; }
.rate-badge .plat { gap: 0; }
.rate-badge .plat svg { width: 14px; height: 14px; }
.rate-badge .rb-sep { width: 1px; height: 15px; background: var(--line); }

main { padding: 22px 20px 48px; max-width: 1440px; margin: 0 auto; }
h1 { font: 700 24px/1.2 var(--font); margin: 0 0 18px; letter-spacing: -.01em; }
h2 { font-size: 15px; margin: 0 0 12px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { margin: 0; }
.head-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line);
             border-radius: 999px; color: var(--text); font-weight: 600; font-size: 13px; text-decoration: none; }
.head-link:hover { border-color: var(--gold); }

/* --- surfaces --- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; overflow-x: auto; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 18px; }
.grid.tiles7 { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }  /* dashboard: 7 tiles in one row at 1150 px */
.stat small { display: block; font-size: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat span { color: var(--muted); font-size: 12px; font-weight: 600; }
i.money { font-style: normal; }  /* dollars; the euros are in its tooltip */
small.hint.act-yes { color: var(--good); }  /* «активирован» under the platform */
.stat b { display: block; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; letter-spacing: -.01em; }
.stat.accent { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 18%, var(--panel)), var(--panel)); border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); }

/* --- tables --- */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: center; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
td.num, th.num { text-align: center; }
td.wrap { white-space: normal; }

/* --- controls --- */
input, select, textarea, button { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 11px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
textarea { width: 100%; min-height: 120px; font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 12.5px; }
button { cursor: pointer; background: var(--gold); color: var(--on-gold); border: 0; font-weight: 700;
         user-select: none; -webkit-user-select: none; }  /* a double click must not select the label */
.badge, summary, label.row, th { user-select: none; -webkit-user-select: none; }
button:hover { background: var(--gold-2); }
button:disabled { opacity: .45; cursor: default; }
button.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 600; }
button.ghost:hover { border-color: var(--muted); }
button.danger { background: var(--bad); color: #fff; }
button.icon { padding: 6px 10px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: 10px 18px; align-items: center; max-width: 760px; }
.form-grid label { color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); }
small.hint { display: block; color: var(--muted); font-size: 12px; }

/* --- badges & platforms --- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
         background: color-mix(in srgb, currentColor 12%, transparent); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-online, .s-bought, .s-running { color: var(--good); }
.s-error, .s-captcha, .s-needs_login, .s-discarded { color: var(--bad); }
.s-logging_in { color: var(--warn); }
.badge.busy::before { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.6); } }
.s-offline, .s-to_assign, .s-assigned, .s-stopped { color: var(--muted); }
.plat { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.plat svg { width: 16px; height: 16px; fill: currentColor; }
.plat.ps { color: #4a8cff; } .plat.xbox { color: #3ccf4e; } .plat.pc { color: #ff7a29; } .plat.console { color: var(--muted); }
.l-warn td, .l-warn { color: var(--warn); } .l-error td, .l-error { color: var(--bad); }
.banner { padding: 8px 16px; background: var(--warn); color: #000; text-align: center; font-weight: 700; }

/* --- accounts table: filters, bulk bar, tick boxes --- */
details.card > summary { cursor: pointer; list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: "▸ "; color: var(--muted); }
details.card[open] > summary::before { content: "▾ "; }
details.card > summary.row { display: flex; }
details.card > summary .add-btn { padding: 7px 14px; }
details.card[open] > summary .add-btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
details.card[open] > summary .add-btn::after { content: " — свернуть"; color: var(--muted); font-weight: 600; }
.filters { margin-bottom: 12px; }
.filters input[type="search"] { min-width: 220px; }
/* A drop-down with ticks (status filter): the summary looks like the selects around it. */
.msel { position: relative; }
.msel summary { list-style: none; cursor: pointer; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 30px 8px 11px; white-space: nowrap; position: relative; user-select: none; }
.msel summary::-webkit-details-marker { display: none; }
.msel summary::after { content: "▾"; position: absolute; right: 11px; color: var(--muted); }
.msel[open] summary, .msel.on summary { border-color: var(--gold); }
.msel-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.msel-list label { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; white-space: nowrap; cursor: pointer; }
.msel-list label:hover { background: var(--panel-2); }
.msel-acts { gap: 6px; padding: 6px 4px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
.msel-acts button { padding: 4px 10px; font-size: .9em; }
/* Inside a card (it scrolls sideways) a list hanging out would give the card a scrollbar: float it over the page,
   placed under its button by base.html (placeMsel) before it is drawn. */
.card .msel-list { position: fixed; }
/* Lists of plain <select>s, drawn by base.html in the same style (one choice: the current one is gold). */
.csel-list { position: fixed; z-index: 60; max-height: min(360px, 70vh); overflow-y: auto; }
.csel-list button { display: block; width: 100%; text-align: left; background: transparent; color: var(--text); font-weight: 400;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.csel-list button:hover { background: var(--panel-2); }
.csel-list button.on { color: var(--gold); font-weight: 600; }
.csel-list button:disabled { color: var(--muted); cursor: default; background: transparent; }
select.csel-open { border-color: var(--gold); }
/* The select's own arrow, the same ▾ as the tick drop-downs (their summary::after). */
select:not([multiple]) { appearance: none; -webkit-appearance: none; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%239b9b98'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }
.bulk { padding: 10px 12px; margin-bottom: 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--panel-2); font-variant-numeric: tabular-nums; }
.bulk > b.muted { min-width: 96px; }  /* "Отмечено: 12" must not change the row's wrapping as the number changes */
.bulk button, .bulk .ghost { padding-left: 9px; padding-right: 9px; }  /* nine controls must fit one 1150 px row */
.bulk select { min-width: 0; width: 118px; max-width: 118px; }
.bulk[data-count="0"] button { opacity: .5; }
.bulk[data-count="0"] button:hover { opacity: 1; }
.bulk .danger-text { color: var(--bad); }
table.accounts th, table.accounts td { padding: 7px 5px; }
/* The column names stay under the site header while the list scrolls (with 400 accounts nobody knew which column was
   which). A sticky cell needs no scrolling box around it, so the card stops scrolling sideways where the table fits. */
@media (min-width: 1100px) {
  .card.acc-card { overflow: visible; }
  /* the filters stick under the site header, the column names right under the filters */
  .acc-card .filters { position: sticky; top: var(--hdr-h, 58px); z-index: 5; background: var(--panel); padding: 8px 0; margin-top: -8px; }
  table.accounts thead tr:first-child th { position: sticky; top: calc(var(--hdr-h, 58px) + var(--flt-h, 0px)); z-index: 4;
    background: var(--panel); box-shadow: inset 0 -1px 0 var(--line); }
}
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; vertical-align: middle; }
table.accounts select, table.accounts input:not([type="checkbox"]) { padding: 5px 7px; border-radius: 8px; }
table.accounts input.num { text-align: right; width: 44px; }
table.accounts select.proxy { max-width: 110px; }
table.accounts td.email { max-width: 165px; overflow: hidden; text-overflow: ellipsis; }
table.accounts td.email small.hint { overflow: hidden; text-overflow: ellipsis; }
table.accounts button.act { display: inline-flex; align-items: center; gap: 4px; padding: 6px 7px; font-size: 14px; line-height: 1; }
table.accounts button.act .lbl { font-size: 12px; }
table.accounts button.act.login { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
table.accounts button.act.login:hover { background: color-mix(in srgb, var(--good) 14%, transparent); }
table.accounts button.act.del { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
table.accounts button.act.del:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); }
button.reveal { display: inline-flex; align-items: center; gap: 6px; min-width: 112px; justify-content: center; }
button.reveal .eye-off, button.reveal .lbl-hide { display: none; }
button.reveal.open .eye, button.reveal.open .lbl-reveal { display: none; }
button.reveal.open .eye-off, button.reveal.open .lbl-hide { display: inline; }
table.accounts tr.edit td { background: var(--panel-2); padding: 10px 12px; }
table.accounts tr.edit label { display: inline-flex; flex-direction: column; gap: 3px; color: var(--muted); font-size: 12px; font-weight: 600; }
table.accounts tr.edit label input { color: var(--text); font-size: 14px; font-weight: 400; }
table.accounts tr.work td { background: color-mix(in srgb, var(--good) 9%, transparent); }
table.accounts tr.work:hover td { background: color-mix(in srgb, var(--good) 15%, transparent); }
table.accounts tr.work td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.legend { font-size: 12px; margin-left: 10px; padding: 1px 8px; border-radius: 6px; }
.legend.work { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.legend.off { opacity: .6; }
table.accounts tr.off td { opacity: .6; }
table.accounts tr.off td:first-child, table.accounts tr.off td:last-child { opacity: 1; }
@media (max-width: 1250px) { table.accounts .opt { display: none; } table.accounts td.email { max-width: 150px; } }

/* --- import preview: cross out rows --- */
.skipbox { cursor: pointer; display: inline-flex; user-select: none; -webkit-user-select: none; }
.skipbox span { pointer-events: auto; }
.skipbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.skipbox span { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-weight: 700; }
.skipbox:hover span { color: var(--bad); border-color: var(--bad); }
.skipbox input:checked + span { background: var(--bad); color: #fff; border-color: var(--bad); }
table.preview tr.skipped td:not(:last-child) { opacity: .4; text-decoration: line-through; }
/* Long verdicts ("обновлю: TOTP, прокси", "неверный логин или пароль") wrap instead of pushing the ✕ off the card. */
table.preview .badge { white-space: normal; line-height: 1.3; max-width: 190px; }

/* --- login --- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-box { width: 100%; max-width: 380px; text-align: center; }
.login-box img { width: 150px; }
.login-box .word { font: 800 22px/1 var(--brand); letter-spacing: .28em; margin: 14px 0 4px; }
.login-box form { display: grid; gap: 10px; margin-top: 24px; text-align: left; }

@media (max-width: 720px) {
  header.top .inner { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  nav.menu { order: 3; flex-basis: 100%; }
  .brand small { display: none; }
  main { padding: 16px 16px 40px; }
  .form-grid { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 12px; }
  .stat b { font-size: 20px; }
}

/* --- coloured ghost buttons (bulk bar) --- */
:root { --blue: #4a8cff; }
button.ghost[class*="tone-"] { font-weight: 700; }
button.ghost.tone-good { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
button.ghost.tone-good:hover { background: color-mix(in srgb, var(--good) 14%, transparent); }
button.ghost.tone-bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
button.ghost.tone-bad:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); }
button.ghost.tone-gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); }
button.ghost.tone-gold:hover { background: color-mix(in srgb, var(--gold) 14%, transparent); }
button.ghost.tone-blue { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); }
button.ghost.tone-blue:hover { background: color-mix(in srgb, var(--blue) 14%, transparent); }

/* --- tabs inside a strip --- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tabs .tab { background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 8px 14px; font-weight: 700; margin-bottom: -1px; }
.tabs .tab:hover { color: var(--text); background: transparent; }
.tabs .tab.on { color: var(--text); border-bottom-color: var(--gold); }
a.ghost.icon.act { display: inline-flex; align-items: center; gap: 4px; padding: 6px 7px; font-size: 14px; line-height: 1;
  color: var(--text); border: 1px solid var(--line); border-radius: 10px; background: transparent; font-weight: 600; }
a.ghost.icon.act:hover { border-color: var(--muted); }
a.ghost.icon.act .lbl { font-size: 12px; }

/* bulk bar: compact enough for one line at ~1100 px */
.bulk { gap: 6px; }
.bulk button { padding: 6px 9px; }
.bulk select { max-width: 112px; padding: 6px 8px; }
.bulk input.group-new { padding: 6px 8px; width: 110px; }

/* bulk bar: every control the same height, shape and weight */
.bulk button, .bulk select, .bulk input.group-new { height: 32px; padding: 0 12px; border-radius: 8px; font-weight: 600;
  font-size: 13px; line-height: 30px; border: 1px solid var(--line); background: transparent; color: var(--text); box-sizing: border-box; }
.bulk select { min-width: 0; width: 118px; max-width: 118px; padding-right: 24px; }
.bulk input.group-new { width: 120px; line-height: normal; }
.bulk button.ghost:hover, .bulk select:hover { border-color: var(--muted); }
.bulk .danger-text { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.bulk .danger-text:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); }

/* dropdown menus: the <option> list must have its own colours, otherwise transparent selects give
   near-white text on the browser's white popup */
select { background-color: var(--panel-2); }
select option { background: var(--panel); color: var(--text); }
.bulk select { background-color: var(--panel-2); }

/* file inputs look like our ghost buttons instead of the browser's default */
input[type="file"] { padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 13px; }
input[type="file"]::file-selector-button { font: inherit; font-weight: 600; color: var(--text); background: transparent;
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; margin-right: 10px; cursor: pointer; }
input[type="file"]::file-selector-button:hover { border-color: var(--muted); }
/* row action buttons on every page (accounts, proxies, keys) */
button.act { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; font-size: 14px; line-height: 1; }
button.act .lbl { font-size: 13px; }
button.act.login { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
button.act.login:hover { background: color-mix(in srgb, var(--good) 14%, transparent); }
button.act.del { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
button.act.del:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); }
.plat-select, table select[name="folder_id"] { max-width: 118px; }
table.accounts tr.edit td { white-space: normal; }
td.email { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }

/* cards page */
td.clip { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
td.nowrap, .nowrap { white-space: nowrap; }
table.cards td.wrap { white-space: normal; line-height: 1.35; }
table.cards small.hint { white-space: normal; }

/* page tabs (Журнал: Карточки / События) */
.page-tabs { margin: -6px 0 16px; }
.page-tabs .tab { text-decoration: none; display: inline-block; }

/* dashboard blocks */
.dash-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.dash-grid .card { margin-bottom: 0; }
.chart-card { grid-column: 1 / -1; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 6px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar-col .bar { width: 100%; min-height: 2px; background: linear-gradient(180deg, var(--gold), var(--gold-2)); border-radius: 6px 6px 2px 2px; opacity: .9; }
.bar-col:hover .bar { opacity: 1; }
.bar-col small { color: var(--muted); font-size: 11px; margin-top: 4px; }
.funnel { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.funnel > div, .funnel > div > a { display: flex; flex-direction: column; min-width: 92px; color: inherit; text-decoration: none; }
.funnel span { font-size: 12px; font-weight: 600; }
.funnel b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.funnel b.good { color: var(--good); } .funnel b.bad { color: var(--bad); }
.funnel b.gold { color: var(--gold); }
.funnel a:hover b { color: var(--gold); }
.dash-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-grid .card { overflow-x: hidden; min-width: 0; }
@media (max-width: 1000px) { .dash-3, .dash-2 { grid-template-columns: 1fr; } }

/* One-off notices ("saved", "refreshing…") pop up in the top-right corner and fade out by themselves,
   so the page never jumps. Error notices stay a little longer. */
.rown { display: inline-block; min-width: 17px; margin-right: 3px; text-align: right; font-size: .7em; color: var(--muted);
        font-variant-numeric: tabular-nums; vertical-align: middle; }
.status-strip { gap: 6px; margin: -4px 0 12px; }
.status-strip:empty { display: none; }
.chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-weight: 600;
        font-size: .88em; cursor: pointer; }
.chip b { color: var(--text); margin-left: 2px; }
.chip:hover, .chip.on { border-color: currentColor; }
.chip.on { background: color-mix(in srgb, currentColor 14%, var(--panel-2)); }
a.chip { text-decoration: none; color: var(--muted); display: inline-block; }
a.chip.on { color: var(--gold); }
table.stats td.bar-cell { width: 22%; min-width: 120px; padding-left: 4px; }
table.stats .bar { display: block; height: 10px; border-radius: 5px; background: var(--gold); min-width: 0; }
table.stats tr.muted td { opacity: .55; }
/* A calm one-line notice (not an alarm): amber dot, muted details, explanation in the tooltip. */
.sale-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px; margin-bottom: 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 10px; background: var(--panel);
  font-size: .9em; cursor: help; }
.sale-alert b { font-weight: 700; }
.sa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.flash { position: fixed; top: 84px; right: 24px; z-index: 50; max-width: 440px; padding: 10px 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45); animation: flash-in .25s ease-out; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .flash { left: 16px; right: 16px; max-width: none; } }

/* Every table is centred: cells, the button rows inside them and the inputs. Sortable headers show the arrow. */
td > .row, th > .row { justify-content: center; }
td input:not([type=checkbox]), td select { text-align: center; }
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--text); }
th[data-sort] .arr { display: inline-block; width: .7em; opacity: .35; font-size: 9px; margin-left: 1px; }
th[data-sort].on .arr { opacity: 1; color: var(--gold); }

/* Secrets in edit forms are plain text inputs drawn as dots: Chrome then never offers to save them as passwords. */
input.secret { -webkit-text-security: disc; }
input.secret.shown { -webkit-text-security: none; }

/* "online" that EA has not confirmed for over an hour: probably dead, shown muted with a question mark. */
.s-stale { color: var(--muted); }

/* "Итого" row under the accounts header: quiet, but the numbers stand out. */
table.accounts tr.totals td { background: var(--panel-2); font-size: 13px; border-bottom: 1px solid var(--line); }
table.accounts tr.totals b { color: var(--gold); }

/* Settings: the Save button breathes while there are unsaved changes. */
#save-btn.pulse { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 60%, transparent); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Start / stop next to the sale badge in the header: same look as the row action buttons. */
#engine-ctl button.act { padding: 4px 7px; font-size: 13px; line-height: 1; }
#engine-ctl button.act.login { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
#engine-ctl button.act.del { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }

/* The edit row spans every column: its wide form must not reshape the columns when it opens. `contain`
   keeps the form's content out of the table's width calculation (the form wraps inside the row instead). */
table.accounts tr.edit td > form { contain: inline-size; display: flex; flex-wrap: wrap; }
/* …and inside it the fields share the full width in one line; the hint text drops to a line of its own. */
table.accounts tr.edit td > form { gap: 8px 12px; align-items: flex-end; }
table.accounts tr.edit td > form > label { flex: 1 1 120px; min-width: 0; }
table.accounts tr.edit td > form > label > input, table.accounts tr.edit td > form > label > select,
table.accounts tr.edit td > form > label > .row { width: 100%; box-sizing: border-box; }
table.accounts tr.edit td > form > label.group-pick .group-select { flex: 1 1 auto; min-width: 0; }
table.accounts tr.edit td > form > span.muted { flex-basis: 100%; }

/* An expired EA session is routine (they last ~80 min): a calm yellow "перезаход", not a red alarm. */
.s-relogin { color: var(--warn); }
.s-new { color: #6ea8ff; }  /* imported, never signed in yet */

/* Key folders fold like drawers: the summary is the folder's title line. */
details.folder > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
details.folder > summary h2 { display: inline; margin: 0; text-align: left; }
details.folder > summary .fold-hint { margin-left: auto; }
details.folder > summary .fold-hint::after { content: "развернуть"; font-size: .85em; }
details.folder[open] > summary .fold-hint::after { content: "свернуть"; }
details.folder:not([open]) { padding-top: 12px; padding-bottom: 12px; }
button.act.gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
button.act.gold:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }
details.folder > summary .fold-acts { margin-left: 12px; }

/* Accounts: rows sit in blocks by group under a header row that folds the block. */
/* Same side padding as the account rows: the group row must not widen any column (the table fits 1150 px). */
table.accounts tr.ghead td { background: var(--panel-2); text-align: left; padding: 8px 5px; cursor: pointer; border-top: 1px solid var(--line); }
table.accounts tr.ghead td:first-child { padding-left: 12px; }
table.accounts tr.ghead td.gh-on { white-space: normal; line-height: 1.25; font-size: .85em; max-width: 72px; }
/* Long status words («вход не удался», «в очереди») wrap inside the badge instead of widening the column. */
table.accounts td[data-live$=".status"] .badge { white-space: normal; line-height: 1.2; max-width: 82px; }
table.accounts tr.ghead td.num { text-align: right; }
table.accounts tr.ghead .gh-arrow::before { content: "▾ "; color: var(--muted); }
table.accounts tr.ghead.folded .gh-arrow::before { content: "▸ "; }
table.accounts tr.ghead .gh-hint { float: right; font-size: .85em; }
table.accounts tr.ghead .gh-hint::after { content: "свернуть"; }
table.accounts tr.ghead.folded .gh-hint::after { content: "развернуть"; }
/* The group header stays to unfold it. collapse (not display:none) keeps the folded rows in the column widths,
   so the columns don't jump when a group folds or unfolds. */
table.accounts tr.folded:not(.ghead) { visibility: collapse; }
/* Compact selects (tables, action bar) set their own padding: keep room for the ▾ arrow. */
table select:not([multiple]), .bulk select { padding-right: 24px !important; background-position: right 9px center; }
.bulk select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%239b9b98'/%3E%3C/svg%3E");
  background-repeat: no-repeat; }
/* TOTP generator in the header (and «🔢 код» in an account's edit form). */
.totp-pop { position: relative; }
.totp-pop > summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px;
  font-weight: 600; line-height: 1.4; }
.totp-pop > summary::-webkit-details-marker { display: none; }
.totp-pop > summary:hover, .totp-pop[open] > summary { border-color: var(--gold); }
.totp-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.totp-panel .totp-out { margin-top: 10px; min-height: 1.4em; }
.totp-panel button { white-space: nowrap; }
.totp-code { color: var(--gold); font-size: 1.6em; letter-spacing: .06em; font-variant-numeric: tabular-nums; cursor: pointer; }
.totp-out .totp-code { font-size: 1.25em; }
.totp-panel .totp-out .totp-code { font-size: 1.6em; }
/* TOTP-ключ field: room for the field plus the 🔢/🔐 icons on one line; the code shows on the full-width line below. */
table.accounts tr.edit td > form > label.totp-field { flex: 1 1 260px; }
table.accounts tr.edit td > form > label.totp-field > .row { width: 100%; }
table.accounts tr.edit td > form > label.totp-field input { flex: 1 1 auto; min-width: 0; }
table.accounts tr.edit td > form > span.totp-out:empty { display: none; }