/* theme: Квитанция | «Бумажная» тема: кассовые чеки, чернильные рамки, жёсткие тени и кобальтовая печать защиты сделки. Светлая и тёмная. | modes: light dark */

/* RootMarket — тема «Квитанция».
   Направление: рабочий прайс-лист на бумаге. Тёплая бумага, чёрные чернила, моноширинные цены.
   Запоминающаяся деталь: лоты — отрывные талоны с вырезами и пунктирной линией отрыва,
   статус заказа — штамп в двойной рамке, карточка цены — квитанция с жёсткой тенью.
   Кобальт — защита сделки и основное действие, охра — удержание/ожидание, кирпичный — споры/блокировки. */

:root {
  --bg: #EDE9DF;
  --paper: #FBFAF6;
  --panel: #FBFAF6;
  --card: #FFFFFF;
  --card-hi: #F3F0E7;
  --ink: #17181B;
  --ink-2: #2B2C30;
  --line: #CBC4B3;
  --line-hi: #9C9585;
  --text: #17181B;
  --muted: #55534C;
  --dim: #69665D;
  --accent: #2147D1;
  --accent-hi: #1636A8;
  --accent-dim: #DCE4FB;
  --accent-line: #9DB1EE;
  --amber: #8A5200;
  --amber-dim: #F7E6BF;
  --amber-line: #D8B35C;
  --red: #B3261E;
  --red-dim: #F7DBD6;
  --red-line: #E0A39C;
  --r: 3px;
  --r-lg: 4px;
  --sh: 2px 2px 0 var(--ink);
  --sh-lg: 4px 4px 0 var(--ink);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: radial-gradient(rgba(23, 24, 27, .09) 1px, transparent 1.2px);
  background-size: 22px 22px;
  overflow-wrap: break-word;
}
body > main { flex: 1 0 auto; }
::selection { background: var(--accent); color: #fff; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-hi); }
main a:not(.btn):not(.lot-card):not(.offer):not(.pill-tab):not(.dir-head):not(.stat):not(.fam-chip):not(.userchip):not(.tab):not(.logo):hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
h1 { font-size: 30px; }
h2 { font-size: 21px; }
h3 { font-size: 16px; }
p { margin: 0 0 10px; text-wrap: pretty; }
dl, dd, dt { margin: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topbar :focus-visible, .footer :focus-visible { outline-color: #fff; }

/* --- каркас --- */

.shell { max-width: 1320px; margin: 0 auto; padding: 0 24px; }

.topbar {
  background: var(--ink);
  color: #F2EFE6;
  border-bottom: 3px solid var(--accent);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar a:hover { color: #fff; }
.topbar-inner { display: flex; align-items: center; gap: 24px; min-height: 62px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -0.03em; color: #fff; min-height: 44px; }
.logo-mark {
  width: 30px; height: 30px; border-radius: var(--r);
  background: var(--accent); color: #fff;
  display: grid; place-items: center; flex: none;
  box-shadow: 2px 2px 0 #fff;
  transform: rotate(-4deg);
}
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 40px; padding: 0 13px; border-radius: var(--r);
  color: var(--muted); font-size: 14px; font-weight: 600;
  transition-property: background-color, color; transition-duration: .14s;
}
.nav a:hover { background: var(--card-hi); color: var(--ink); }
.nav a.on { background: var(--ink); color: #fff; }
.topbar .nav a { color: #C9C5B8; }
.topbar .nav a:hover { background: #2B2C30; color: #fff; }
.topbar .nav a.on { background: #F2EFE6; color: var(--ink); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.userchip {
  display: flex; align-items: center; gap: 9px; min-height: 40px;
  background: #24262B; border: 1px solid #4A4C52; color: #F2EFE6;
  border-radius: var(--r); padding: 3px 12px 3px 4px; font-size: 13px; font-weight: 600;
  transition-property: background-color, border-color; transition-duration: .14s;
}
a.userchip:hover { background: #2F3238; border-color: #8A8C92; color: #fff; }
.userchip .badge { background: transparent; border-color: #5B5D63; color: #D6D2C5; }
.userchip .badge-green { background: var(--accent); border-color: var(--accent); color: #fff; }
.topbar .btn { box-shadow: none; border-color: #F2EFE6; }
.topbar .btn-primary { background: var(--accent); border-color: #9DB1EE; color: #fff; }
.topbar .btn-primary:hover { background: #3A5FE6; color: #fff; }
.topbar .btn:not(.btn-primary) { background: transparent; color: #F2EFE6; }
.topbar .btn:not(.btn-primary):hover { background: #F2EFE6; color: var(--ink); }

.avatar {
  width: 26px; height: 26px; border-radius: var(--r); flex: none;
  background: var(--accent-dim); color: var(--accent-hi);
  display: grid; place-items: center; font-weight: 800; font-size: 12px;
  border: 1px solid var(--ink);
}

.escrow-strip {
  background: var(--accent-dim);
  border-bottom: 1px solid var(--ink);
  font-size: 13px; color: #14298A; font-weight: 500;
}
.escrow-strip .shell { display: flex; align-items: flex-start; gap: 10px; padding: 9px 24px; }
.escrow-strip svg { flex: none; margin-top: 3px; }

main { padding: 28px 0 64px; }

.layout { display: grid; grid-template-columns: 268px 1fr; gap: 26px; align-items: start; }
.layout-aside { display: grid; grid-template-columns: 1fr 340px; gap: 26px; align-items: start; }
.layout > *, .layout-aside > *, .settings-grid > * { min-width: 0; }

@media (max-width: 1040px) {
  .layout, .layout-aside { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .shell { padding: 0 16px; }
  .escrow-strip .shell { padding: 9px 16px; }
  .topbar { position: static; }
  .topbar-inner { flex-wrap: wrap; padding: 8px 0 10px; gap: 6px 12px; }
  /* Меню переносится на вторую строку целиком: ни одна ссылка не уезжает
     за край экрана, «Админка» и «Кошелёк» видны без горизонтальной прокрутки. */
  .topbar .nav {
    order: 3; width: 100%;
    flex-wrap: wrap; gap: 4px;
    border-top: 1px solid #36383D; padding-top: 6px; margin-top: 2px;
  }
  .nav a { white-space: nowrap; }
  .topbar-right { margin-left: auto; min-width: 0; }
  .userchip { max-width: 100%; min-width: 0; }
  .userchip > span:not(.avatar):not(.badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12ch; }
  h1 { font-size: 25px; }
  main { padding-top: 20px; }
}

/* --- блоки --- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-top: 3px solid var(--ink);
  border-radius: var(--r-lg);
  padding: 18px;
}
.panel + .panel { margin-top: 18px; }
.panel-title {
  font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700; margin-bottom: 14px;
}

.row > .avatar + div { flex: 1 1 0; min-width: 120px; }
.stack { display: grid; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.amber { color: var(--amber); font-weight: 600; }

/* --- кнопки --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: var(--r); border: 1.5px solid var(--ink);
  background: var(--card); color: var(--ink);
  font: inherit; font-weight: 700; font-size: 14px; line-height: 1.2;
  cursor: pointer; text-align: center;
  box-shadow: var(--sh);
  transition-property: transform, box-shadow, background-color, color, border-color;
  transition-duration: .12s; transition-timing-function: var(--ease);
}
.btn:hover { background: var(--card-hi); color: var(--ink); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--accent); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--accent-hi); color: #fff; }
.btn-danger { background: var(--red-dim); border-color: var(--red); color: #8F1D16; box-shadow: 2px 2px 0 var(--red); }
.btn-danger:hover { background: #F2C9C2; color: #7A1712; box-shadow: 3px 3px 0 var(--red); }
.btn-danger:active { box-shadow: 0 0 0 var(--red); }
.btn-sm { min-height: 40px; padding: 0 13px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[disabled]:hover, .btn[disabled]:active {
  opacity: 1; cursor: not-allowed; transform: none; box-shadow: none;
  background: repeating-linear-gradient(135deg, #E6E2D6 0 6px, #EDE9DF 6px 12px);
  border-color: var(--line-hi); color: var(--dim);
}
label.btn { margin-bottom: 0; }

/* --- формы --- */

label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--line-hi); border-radius: var(--r);
  font: inherit; font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(23, 24, 27, .05);
  transition-property: border-color, box-shadow, background-color; transition-duration: .12s;
}
input::placeholder, textarea::placeholder { color: #7A776D; opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
select:not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2317181B' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.field { margin-bottom: 14px; }
.field-hint { font-size: 12px; color: var(--dim); margin-top: 5px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; margin-bottom: 0; }
.check input { width: 20px; height: 20px; min-height: 0; flex: none; accent-color: var(--accent); cursor: pointer; margin: 0; }
.check span { font-size: 14px; color: var(--ink); font-weight: 500; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }
input:disabled { opacity: .6; cursor: not-allowed; background: var(--card-hi); }
select:disabled { opacity: .6; cursor: not-allowed; background-color: var(--card-hi); }

/* --- оповещения --- */

.alert {
  border-radius: var(--r); padding: 12px 14px;
  font-size: 14px; margin-bottom: 18px; border: 1px solid transparent; border-left-width: 5px;
}
.alert-ok { background: var(--accent-dim); border-color: var(--accent-line); border-left-color: var(--accent); color: #14298A; }
.alert-err { background: var(--red-dim); border-color: var(--red-line); border-left-color: var(--red); color: #7A1712; }
.alert-warn { background: var(--amber-dim); border-color: var(--amber-line); border-left-color: #C98A00; color: #5C3600; }
.alert ul { margin: 6px 0 0; padding-left: 20px; }

/* --- бейджи --- */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; min-height: 22px; border-radius: 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  background: #E6E1D4; color: #403E38; border: 1px solid #BDB5A2;
}
.badge-green { background: var(--accent-dim); color: var(--accent-hi); border-color: var(--accent-line); }
.badge-amber { background: var(--amber-dim); color: #6B4000; border-color: var(--amber-line); }
.badge-red { background: var(--red-dim); color: #8F1D16; border-color: var(--red-line); }
.badge-product { background: #fff; color: var(--ink); border-color: var(--ink); padding-left: 3px; gap: 5px; }

/* --- каталог --- */

.cat-list { display: grid; gap: 2px; }
.cat-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px;
  padding: 0 11px; border-radius: var(--r);
  font-size: 14px; color: var(--muted); cursor: pointer;
}
.cat-item:hover { background: var(--card-hi); color: var(--ink); }
.cat-item.on { background: var(--ink); color: #fff; font-weight: 700; }
.cat-count { font-size: 12px; color: var(--dim); font-family: var(--mono); }
.cat-item.on .cat-count { color: #C9C5B8; }
.cat-item.empty-item { color: var(--dim); }

.lot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }

/* лот — отрывной талон: вырезы по бокам и пунктир над ценой */
.lot-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  background: var(--card); border: 1px solid var(--line-hi);
  border-radius: var(--r); padding: 16px;
  transition-property: transform, box-shadow, border-color; transition-duration: .14s; transition-timing-function: var(--ease);
}
.lot-card::before, .lot-card::after {
  content: ""; position: absolute; bottom: 49px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line-hi); pointer-events: none;
  transition-property: border-color; transition-duration: .14s;
}
.lot-card::before { left: -8px; clip-path: inset(0 0 0 50%); }
.lot-card::after { right: -8px; clip-path: inset(0 50% 0 0); }
.lot-card:hover { border-color: var(--ink); transform: translate(-2px, -2px); box-shadow: var(--sh-lg); color: var(--ink); }
.lot-card:hover::before, .lot-card:hover::after { border-color: var(--ink); }
.lot-card:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.lot-title { font-size: 15.5px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; text-wrap: balance; }
.lot-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.lot-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 12px; border-top: 2px dashed var(--line-hi);
}
.lot-price { font-family: var(--mono); font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.04em; white-space: nowrap; }
.lot-foot .tiny { line-height: 28px; }

.empty {
  border: 2px dashed var(--line-hi); border-radius: var(--r-lg);
  padding: 44px 24px; text-align: center; color: var(--muted);
  background: repeating-linear-gradient(135deg, rgba(23, 24, 27, .035) 0 8px, transparent 8px 16px);
}
.empty strong { color: var(--ink); font-size: 16px; }

/* --- таблицы --- */

.table-wrap { position: relative; overflow-x: auto; margin: 0 -18px -18px; padding: 0 18px 18px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; padding: 9px 12px; font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  border-bottom: 2px solid var(--ink); white-space: nowrap;
}
td { padding: 12px; border-bottom: 1px dashed var(--line-hi); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(33, 71, 209, .05); }
td.nowrap { font-variant-numeric: tabular-nums; }
td form { display: inline-flex; gap: 6px; align-items: center; margin: 0; flex-wrap: wrap; }
td select, td input[type="text"] { min-height: 40px; padding: 6px 9px; font-size: 13px; width: auto; }
td select:not([multiple]):not([size]) { padding-right: 30px; }

/* --- карточка лота --- */

.price-card {
  background: var(--card); border: 2px solid var(--ink);
  border-radius: var(--r-lg); padding: 20px;
  box-shadow: 5px 5px 0 var(--ink);
}
.price-big { font-family: var(--mono); font-size: 34px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.1; }
.guard {
  background: var(--accent-dim);
  border: 1px solid var(--accent-line); border-left: 5px solid var(--accent);
  border-radius: var(--r); padding: 14px;
}
.guard-title { color: var(--accent-hi); font-weight: 800; font-size: 14px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; font-family: var(--mono); }
.guard ul { margin: 0; padding-left: 18px; font-size: 13px; color: #1B2F8F; }
.guard li { margin-bottom: 4px; }

.steps { display: grid; gap: 14px; counter-reset: s; }
.step { display: flex; gap: 13px; }
.step-num {
  flex: none; width: 28px; height: 28px; border-radius: var(--r);
  background: var(--ink); color: #fff;
  display: grid; place-items: center; font-family: var(--mono); font-size: 13px; font-weight: 700;
}
.spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; font-size: 14px; }
.spec dt { padding-right: 20px; }
.spec dt, .spec dd { padding-block: 7px; border-bottom: 1px dotted var(--line-hi); }
.spec dt:nth-last-of-type(1), .spec dd:last-child { border-bottom: 0; }
.spec dt { color: var(--muted); }
.spec dd { text-align: right; font-weight: 600; overflow-wrap: anywhere; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.stat {
  background: var(--card); border: 1px solid var(--line-hi); border-top: 3px solid var(--ink);
  border-radius: var(--r-lg); padding: 14px 15px;
  transition-property: transform, box-shadow; transition-duration: .14s;
}
.stat-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.stat-value { font-family: var(--mono); font-size: 23px; font-weight: 700; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.stat-green { color: var(--accent-hi); }
.stat-amber { color: var(--amber); }
.stat-red { color: var(--red); }
a.stat:hover { transform: translate(-1px, -1px); box-shadow: var(--sh); color: var(--ink); }

/* --- узкие страницы --- */

.narrow { max-width: 420px; margin: 40px auto; }
.narrow-wide { max-width: 760px; margin: 0 auto; }
.narrow .panel { box-shadow: 5px 5px 0 var(--ink); }

.footer {
  background: var(--ink); color: #B9B5A8;
  padding: 20px 0; font-size: 12.5px; font-family: var(--mono);
}
.footer .dim { color: #A29E91; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- счётчики в навигации --- */
.pill {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 2px; background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 11px; font-weight: 700; margin-left: 4px;
}
.pill-red { background: var(--red); color: #fff; }
.subnav {
  display: flex; flex-wrap: wrap;
  margin-bottom: 20px; background: var(--paper); border: 1px solid var(--line-hi);
  border-radius: var(--r-lg); padding: 4px;
}

/* --- полоса состояния заказа: штамп --- */
.statebar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--card); border: 4px double var(--ink); color: var(--ink);
  border-radius: var(--r); padding: 14px 18px; margin-bottom: 18px;
}
.statebar strong { margin-right: 6px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.statebar-amber { background: var(--amber-dim); border-color: #9A6200; color: #4F2F00; }
.statebar-red { background: var(--red-dim); border-color: var(--red); color: #7A1712; }
.statebar-green { background: var(--accent-dim); border-color: var(--accent); color: #14298A; }
.statebar .muted { color: inherit; opacity: .85; }
.statebar form { margin: 0; }

/* --- чат --- */
.chat-stream {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 560px; overflow-y: auto; padding: 4px 4px 14px;
}
.msg { display: flex; }
.msg-mine { justify-content: flex-end; }
.msg-bubble {
  max-width: 78%; background: #fff; border: 1.5px solid var(--ink);
  border-radius: var(--r) var(--r) var(--r) 0; padding: 8px 12px; font-size: 14px;
  box-shadow: 2px 2px 0 var(--line-hi); overflow-wrap: anywhere;
}
.msg-mine .msg-bubble {
  background: var(--accent-dim); border-color: var(--ink);
  border-radius: var(--r) var(--r) 0 var(--r); box-shadow: 2px 2px 0 var(--accent);
}
.msg-time { text-align: right; margin-top: 3px; font-family: var(--mono); }
.msg-system {
  align-self: center; text-align: center; max-width: 92%;
  font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 5px 12px;
  border-top: 1px dashed var(--line-hi); border-bottom: 1px dashed var(--line-hi);
}
.msg-blocked {
  max-width: 78%; background: var(--red-dim); border: 1.5px dashed var(--red);
  border-radius: var(--r); padding: 10px 12px; color: #7A1712; overflow-wrap: anywhere;
}
.msg-blocked .muted, .msg-blocked .dim { color: #7A1712; }
.msg-cred {
  background: var(--ink); color: #F2EFE6; border: 1.5px solid var(--ink);
  border-radius: var(--r); padding: 12px 14px; display: grid; gap: 8px;
  box-shadow: 3px 3px 0 var(--accent);
}
.msg-cred .dim, .msg-cred .tiny, .msg-cred .small { color: #BDB9AC; }
.msg-cred strong { color: #fff; }
.cred-value { font-size: 15px; letter-spacing: .06em; color: #BFD0FF; overflow-wrap: anywhere; }
.cred-hidden { color: #8F8C82; letter-spacing: .16em; }
.cred-reveal {
  background: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--r);
  padding: 14px; margin: 0 0 12px; white-space: pre-wrap; word-break: break-all;
  font-size: 15px; color: #BFD0FF; box-shadow: 3px 3px 0 var(--accent);
}
.msg-cred .btn { box-shadow: none; }
.composer { display: flex; gap: 10px; align-items: flex-end; border-top: 2px dashed var(--line-hi); padding-top: 14px; }
.composer textarea { min-height: 48px; height: 48px; flex: 1; min-width: 0; }

.evidence { border-top: 1px dashed var(--line-hi); padding-top: 10px; margin-top: 10px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.timeline li { border-left: 2px solid var(--ink); padding-left: 10px; display: grid; gap: 1px; overflow-wrap: anywhere; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details.panel > summary { display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
details.panel > summary.panel-title { margin-bottom: 0; }
details.panel > summary::after { content: "+"; font-family: var(--mono); font-size: 18px; line-height: 1; }
details.panel[open] > summary::after { content: "\2212"; }
details.panel[open] > summary { margin-bottom: 4px; }

/* --- профиль и настройки --- */
.avatar-img { object-fit: cover; display: inline-block; background: var(--card-hi); }
.profile-head {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line-hi); border-top: 3px solid var(--ink);
  border-radius: var(--r-lg); padding: 22px; margin-bottom: 18px;
}
.profile-head .avatar { border-width: 2px; box-shadow: 3px 3px 0 var(--ink); font-size: 36px; }
.profile-head h1 { font-size: 32px; overflow-wrap: anywhere; }
.profile-id { flex: 1; min-width: 200px; }
.profile-actions { margin-left: auto; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.settings-grid .panel + .panel { margin-top: 0; }
@media (max-width: 860px) { .settings-grid { grid-template-columns: 1fr; } .profile-actions { margin-left: 0; } }
#avatar-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Атрибут hidden должен скрывать элемент, даже если у класса задан display. */
[hidden] { display: none !important; }

/* --- игры/программы и вкладки подкатегорий --- */
details.kind + details.kind { margin-top: 14px; }
details.kind > summary { cursor: pointer; display: flex; justify-content: space-between; user-select: none; min-height: 40px; align-items: center; }
details.kind > summary::after { content: "\25BE"; color: var(--dim); transition-property: transform; transition-duration: .15s; }
details.kind:not([open]) > summary::after { transform: rotate(-90deg); }
.tabs {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px;
  border-bottom: 2px solid var(--ink); scrollbar-width: thin;
}
.tab {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 40px;
  padding: 0 13px; border-radius: var(--r) var(--r) 0 0;
  color: var(--muted); font-size: 14px; font-weight: 600;
  border-bottom: 3px solid transparent; margin-bottom: -6px;
}
.tab:hover { color: var(--ink); background: var(--card-hi); }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); background: var(--card); }
.tab-empty { color: var(--dim); }
.tab-n { font-size: 12px; color: var(--dim); font-family: var(--mono); }
.tab.on .tab-n { color: var(--accent-hi); }

/* --- форма лота по шагам --- */
fieldset.form-step { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
fieldset.form-step legend {
  display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 12px;
  font-weight: 800; font-size: 16px; letter-spacing: -0.015em;
}
select.product-select { min-height: 200px; padding: 6px; }
select.product-select optgroup { color: var(--muted); font-weight: 700; font-style: normal; }
select.product-select option { color: var(--ink); padding: 7px 8px; border-radius: 2px; }
select.product-select option:checked { background: var(--accent-dim); color: var(--accent-hi); }

/* --- админка: игры и программы --- */
details.prod { border-top: 1px dashed var(--line-hi); padding: 8px 0; }
details.prod:first-of-type { border-top: 0; }
details.prod > summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; cursor: pointer; list-style: none; min-height: 44px; }
details.prod > summary::-webkit-details-marker { display: none; }
details.prod > summary:hover .prod-title { color: var(--accent-hi); }
.prod-title { font-weight: 700; min-width: 160px; }
.prod-off .prod-title { color: var(--dim); text-decoration: line-through; }
.prod-form { margin-top: 12px; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 12px; }

/* --- главная: каталог игр --- */
.hero { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 3px solid var(--ink); }
.hero::before {
  content: "Прейскурант / эскроу"; display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-hi); font-weight: 700;
}
.hero h1 { font-size: 44px; letter-spacing: -0.04em; line-height: 1; }
.hero-search { display: flex; gap: 10px; max-width: 640px; }
.hero-search input { flex: 1; min-width: 0; }
.dir-filter { max-width: 640px; margin-top: 10px; min-height: 40px; font-size: 13px; }
.dir-group + .dir-group { margin-top: 28px; }
.dir-title {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink);
  margin-bottom: 12px; font-weight: 700;
}
.dir-title::after { content: ""; flex: 1; border-top: 2px dashed var(--line-hi); }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.dir-card {
  background: var(--card); border: 1px solid var(--line-hi); border-radius: var(--r-lg);
  padding: 14px; display: grid; gap: 8px; align-content: start; min-width: 0;
  transition-property: box-shadow, transform, border-color; transition-duration: .14s;
}
.dir-card:hover { border-color: var(--ink); box-shadow: var(--sh); }
.dir-head { display: flex; align-items: center; gap: 11px; min-height: 44px; }
.dir-head > span:last-child { display: grid; min-width: 0; }
.dir-name { font-weight: 800; font-size: 15.5px; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.dir-head:hover .dir-name { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }
.dir-links { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 13px; border-top: 1px dashed var(--line-hi); padding-top: 4px; }
.dir-links a { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; color: var(--accent-hi); font-weight: 600; }
.dir-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.dir-links a.dim { color: var(--dim); font-weight: 500; }
.dir-n { color: var(--dim); font-size: 11px; font-family: var(--mono); }

.pbadge {
  flex: none; display: inline-grid; place-items: center; border-radius: 4px;
  font-weight: 800; letter-spacing: -.03em; color: hsl(var(--h) 80% 94%);
  background: hsl(var(--h) 42% 30%);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

/* --- страница игры --- */
.family { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 18px; }
.fam-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--accent-hi); font-weight: 700; font-size: 14px; }
.fam-chip.on { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
.fam-chip:not(.on) .pbadge { filter: saturate(.55) brightness(.9); }
.fam-chip:hover { color: var(--ink); }
.phead {
  display: flex; gap: 24px; align-items: center; margin-bottom: 18px;
  padding-bottom: 18px; border-bottom: 3px solid var(--ink);
}
.phead-text { flex: 1; min-width: 0; }
.phead h1 { font-size: 40px; line-height: 1.05; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.phead-desc { max-width: 720px; margin: 10px 0 18px; font-size: 14.5px; }
.phead-art { flex: none; }
.phead-art .pbadge { box-shadow: inset 0 0 0 2px var(--ink), 6px 6px 0 var(--ink); }
@media (max-width: 900px) { .phead-art { display: none; } .phead h1 { font-size: 28px; } .hero h1 { font-size: 34px; } }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: var(--r); background: var(--card); border: 1.5px solid var(--ink);
  color: var(--ink); font-weight: 700; font-size: 14px;
  box-shadow: var(--sh);
  transition-property: transform, box-shadow, background-color, color; transition-duration: .12s; transition-timing-function: var(--ease);
}
.pill-tab:hover { background: var(--card-hi); color: var(--ink); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.pill-tab:active { transform: translate(2px, 2px); box-shadow: none; }
.pill-tab.on { background: var(--ink); color: #fff; }
.pill-tab.zero { color: var(--dim); border-style: dashed; border-color: var(--line-hi); box-shadow: none; background: transparent; }
.pill-tab.zero:hover { color: var(--ink); border-color: var(--ink); box-shadow: none; transform: none; }
.pill-n { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--accent-hi); }
.pill-tab.on .pill-n { color: #BFD0FF; }
.pill-tab.zero .pill-n { color: var(--dim); }

.filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  background: var(--paper); border: 1px solid var(--line-hi); border-radius: var(--r-lg);
  padding: 10px 12px; margin-bottom: 14px;
}
.filterbar input[type=search] { flex: 1; min-width: 180px; min-height: 40px; }
.filterbar input[type=number] { width: 140px; min-height: 40px; }
.filterbar .check { min-height: 40px; }
.filterbar-sell { margin-left: auto; }
@media (max-width: 560px) { .filterbar input[type=number] { flex: 1; width: auto; } .filterbar-sell { margin-left: 0; } }

.offers { background: var(--card); border: 1px solid var(--ink); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); }
.offer {
  display: grid; grid-template-columns: minmax(0, 1fr) 200px 100px 130px; gap: 16px;
  align-items: center; padding: 12px 16px; border-top: 1px dashed var(--line-hi); min-height: 56px;
  box-shadow: inset 0 0 0 0 var(--accent);
  transition-property: background-color, box-shadow; transition-duration: .12s;
}
.offer:first-child { border-top: 0; }
a.offer:hover { background: #EEF2FD; color: var(--ink); box-shadow: inset 4px 0 0 0 var(--accent); }
a.offer:active { background: var(--accent-dim); }
.offer-head {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700;
  padding-block: 10px; min-height: 0; background: var(--card-hi); border-bottom: 2px solid var(--ink); border-top: 0;
}
.offer-title { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.offer-seller { display: flex; align-items: center; gap: 9px; min-width: 0; }
.offer-seller > span:last-child { display: grid; line-height: 1.25; min-width: 0; }
.offer-price { font-family: var(--mono); font-weight: 700; font-size: 18px; letter-spacing: -0.04em; white-space: nowrap; }
.ta-r { text-align: right; }
.m-only { display: none; }
@media (max-width: 760px) {
  .offer { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; }
  .offer-head { display: none; }
  .offer-title { grid-column: 1 / -1; }
  .offer-price { grid-row: 2; grid-column: 2; font-size: 19px; }
  .offer-seller { grid-row: 2; grid-column: 1; }
  .offer > [role=cell]:nth-child(3) { grid-row: 3; grid-column: 1 / -1; }
  .m-only { display: inline; }
}

/* --- админка: разделы игры --- */
.prod-body { padding: 8px 0 4px; }
.sec-list { display: grid; gap: 6px; }
.sec-row { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--line-hi); }
.sec-edit { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex: 1; min-width: 0; }
.sec-edit input[type=text] { flex: 1; min-width: 150px; min-height: 40px; padding: 6px 9px; font-size: 13px; }
.sec-edit select { width: auto; min-height: 40px; padding: 6px 30px 6px 8px; font-size: 13px; }
.sec-count { min-width: 50px; }
.sec-desc { flex-basis: 100%; }
.sec-desc summary { cursor: pointer; color: var(--dim); min-height: 32px; display: flex; align-items: center; }
.sec-desc summary:hover { color: var(--ink); }
.sec-actions { display: flex; gap: 4px; align-items: center; }
.prod-meta { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-hi); }

/* --- иконки игр --- */
.pbadge-img { overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--ink); box-sizing: border-box; }
.pbadge-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pbadge-img img.cover { object-fit: cover; }
.fam-chip:not(.on) .pbadge-img { filter: saturate(.6) brightness(.9); }
.icon-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 6px 0 14px; margin-bottom: 8px; border-bottom: 1px dashed var(--line-hi); }
details.prod > summary .pbadge { margin-right: -2px; }
.badge-product .pbadge { box-shadow: none; border-radius: 2px; }
.badge-product .pbadge-img { box-shadow: none; }
.avatar.avatar-img { border: 1px solid var(--ink); }

/* --- реакция на предпочтения --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .btn:hover, .btn:active, .lot-card:hover, .lot-card:active, .pill-tab:hover, .pill-tab:active, a.stat:hover { transform: none; }
}

/* --- переключатель светлой и тёмной --- */

.mode-toggle {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; flex: none; padding: 0;
  border: 1px solid #5B5D63; border-radius: var(--r);
  background: transparent; color: #F2EFE6; cursor: pointer;
  transition-property: background-color, border-color, color; transition-duration: .14s;
}
.mode-toggle:hover { background: #2B2C30; border-color: #F2EFE6; color: #fff; }
.mode-toggle svg { grid-area: 1 / 1; }
.mode-toggle .icon-sun { display: none; }
:root[data-mode="dark"] .mode-toggle .icon-sun { display: block; }
:root[data-mode="dark"] .mode-toggle .icon-moon { display: none; }

/* --- тёмный режим ---------------------------------------------------------
   Тот же дизайн, перевёрнутый: не чёрные чернила по бумаге, а светлые
   линии по тёмной доске. Рамки, двойные штампы, пунктиры и отрывные
   талоны остаются, тени становятся чёрными — на тёмном фоне глубину даёт
   темнота, а не чернила. */

:root[data-mode="dark"] {
  --bg: #121318;
  --paper: #1A1C22;
  --panel: #1A1C22;
  --card: #1E2027;
  --card-hi: #272A32;
  --ink: #E7E2D4;           /* светлые «чернила»: рамки, штампы, акцентный текст */
  --ink-2: #CFCABB;
  --line: #363942;
  --line-hi: #565A65;
  --text: #E9E5DA;
  --muted: #A9A597;
  --dim: #8B8779;
  --accent: #6D8CFF;
  --accent-hi: #A3B8FF;
  --accent-dim: #1D2640;
  --accent-line: #41538C;
  --amber: #E3A74E;
  --amber-dim: #2E2413;
  --amber-line: #6E5524;
  --red: #F08A80;
  --red-dim: #341A19;
  --red-line: #7B3B36;
  --sh: 2px 2px 0 #000;
  --sh-lg: 4px 4px 0 #000;
  color-scheme: dark;
}

:root[data-mode="dark"] body {
  background-image: radial-gradient(rgba(231, 226, 212, .06) 1px, transparent 1.2px);
}
:root[data-mode="dark"] ::selection { background: var(--accent); color: #0D0E12; }

/* шапка и подвал: ещё темнее полотна, чтобы каркас читался */
:root[data-mode="dark"] .topbar { background: #0B0C10; border-bottom-color: var(--accent); }
:root[data-mode="dark"] .footer { background: #0B0C10; color: #8B8779; }
:root[data-mode="dark"] .footer .dim { color: #8E8A7C; }
/* «погашенная» кнопка: та же штриховка, только по тёмной бумаге */
:root[data-mode="dark"] .btn[disabled],
:root[data-mode="dark"] .btn[disabled]:hover,
:root[data-mode="dark"] .btn[disabled]:active {
  background: repeating-linear-gradient(135deg, #24262D 0 6px, #1B1D23 6px 12px);
  border-color: var(--line-hi); color: var(--dim);
}
:root[data-mode="dark"] .logo-mark { box-shadow: 2px 2px 0 rgba(231, 226, 212, .55); }
:root[data-mode="dark"] .escrow-strip { color: #BCCBFF; border-bottom-color: var(--accent-line); }

/* вывернутые плашки: светлая заливка — тёмный текст */
:root[data-mode="dark"] .nav a.on,
:root[data-mode="dark"] .cat-item.on,
:root[data-mode="dark"] .pill-tab.on,
:root[data-mode="dark"] .step-num { background: var(--ink); color: var(--bg); }
:root[data-mode="dark"] .cat-item.on .cat-count { color: #4A4C52; }
:root[data-mode="dark"] .pill-tab.on .pill-n { color: #2E3A63; }
:root[data-mode="dark"] .topbar .nav a.on { background: #E7E2D4; color: #0B0C10; }
:root[data-mode="dark"] .topbar .btn:not(.btn-primary):hover { background: #E7E2D4; color: #0B0C10; }
:root[data-mode="dark"] .topbar .btn-primary { border-color: #8EA4F5; }

/* поля ввода и бейджи */
:root[data-mode="dark"] input, :root[data-mode="dark"] select, :root[data-mode="dark"] textarea {
  background: #15171C; color: var(--text);
}
:root[data-mode="dark"] input::placeholder, :root[data-mode="dark"] textarea::placeholder { color: var(--dim); }
:root[data-mode="dark"] .badge { background: #272A32; color: #CBC7B9; border-color: #4C505A; }
:root[data-mode="dark"] .badge-amber { color: #F0CE93; }
:root[data-mode="dark"] .badge-red { color: #F5B9B2; }
:root[data-mode="dark"] .badge-product { background: var(--card); }

/* сообщения и статусы */
:root[data-mode="dark"] .alert-ok { color: #C4D1FF; }
:root[data-mode="dark"] .alert-err { color: #F5B9B2; }
:root[data-mode="dark"] .alert-warn { color: #F2D29B; border-left-color: var(--amber); }
:root[data-mode="dark"] .statebar-amber { border-color: var(--amber); color: #F2D29B; }
:root[data-mode="dark"] .statebar-red { color: #F5B9B2; }
:root[data-mode="dark"] .statebar-green { color: #C4D1FF; }
:root[data-mode="dark"] .guard ul { color: #C3CFF7; }

/* чат */
:root[data-mode="dark"] .msg-bubble { background: var(--card); box-shadow: 2px 2px 0 #000; }
:root[data-mode="dark"] .msg-mine .msg-bubble { background: var(--accent-dim); box-shadow: 2px 2px 0 var(--accent); }
:root[data-mode="dark"] .msg-blocked, :root[data-mode="dark"] .msg-blocked .muted,
:root[data-mode="dark"] .msg-blocked .dim { color: #F5B9B2; }
:root[data-mode="dark"] .msg-cred, :root[data-mode="dark"] .cred-reveal {
  background: #0B0C10; border-color: var(--ink); color: var(--text);
}
:root[data-mode="dark"] .msg-cred strong { color: #fff; }

/* таблицы и пустые состояния */
:root[data-mode="dark"] tbody tr:hover { background: rgba(109, 140, 255, .10); }
:root[data-mode="dark"] .empty {
  background: repeating-linear-gradient(135deg, rgba(231, 226, 212, .045) 0 8px, transparent 8px 16px);
}

/* жёсткие тени: в темноте глубину даёт чёрный, а не чернила */
:root[data-mode="dark"] .btn:hover,
:root[data-mode="dark"] .pill-tab:hover { box-shadow: 3px 3px 0 #000; }
:root[data-mode="dark"] .lot-card:active { box-shadow: 1px 1px 0 #000; }
:root[data-mode="dark"] .price-card,
:root[data-mode="dark"] .narrow .panel { box-shadow: 5px 5px 0 #000; }
:root[data-mode="dark"] .profile-head .avatar { box-shadow: 3px 3px 0 #000; }
:root[data-mode="dark"] .phead-art .pbadge { box-shadow: inset 0 0 0 2px var(--ink), 6px 6px 0 #000; }
:root[data-mode="dark"] a.offer:hover { background: var(--card-hi); }
:root[data-mode="dark"] .btn-danger { color: #F5B9B2; }
:root[data-mode="dark"] .btn-danger:hover { background: #4A1F1C; color: #FBD3CE; }
:root[data-mode="dark"] .pill, :root[data-mode="dark"] .pill-red { color: #0D0E12; }
/* на светлом кобальте тёмный текст читается лучше белого */
:root[data-mode="dark"] .btn-primary,
:root[data-mode="dark"] .btn-primary:hover,
:root[data-mode="dark"] .topbar .btn-primary,
:root[data-mode="dark"] .topbar .btn-primary:hover { color: #0D1020; }
:root[data-mode="dark"] .badge.badge-green { background: var(--accent-dim); color: var(--accent-hi); border-color: var(--accent-line); }
:root[data-mode="dark"] .badge.badge-amber { background: var(--amber-dim); color: #F0CE93; border-color: var(--amber-line); }
:root[data-mode="dark"] .badge.badge-red { background: var(--red-dim); color: #F5B9B2; border-color: var(--red-line); }
:root[data-mode="dark"] .userchip .badge { background: transparent; border-color: #5B5D63; color: #D6D2C5; }
:root[data-mode="dark"] .userchip .badge-green { background: var(--accent); border-color: var(--accent); color: #0D1020; }

/* ссылки в подвале: соглашение, конфиденциальность, поддержка */
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-links a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-hi); }
.footer-links a:hover { color: #fff; text-decoration-color: currentColor; }
:root[data-mode="dark"] .footer-links a:hover { color: var(--ink); }
/* правовые страницы: ссылки внутри документа должны быть заметны */
.legal .panel + .panel { margin-top: 14px; }
.legal .panel h2 { font-size: 17px; margin-bottom: 10px; letter-spacing: -0.015em; }
.legal p { margin-bottom: 8px; }
.legal ul { margin: 0 0 8px; padding-left: 20px; }
.legal li { margin-bottom: 4px; }
.legal a { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }

/* --- плашки у ника: в этой теме они печатные, со скосом углов --------------
   Цвет приходит из настроек владельца в --c, подпись в --fg посчитана
   по яркости фона. */

.ubadge {
  display: inline-flex; align-items: center; min-height: 20px;
  padding: 1px 8px; border-radius: 2px; margin-left: 6px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  background: var(--c, var(--card-hi)); color: var(--fg, var(--text));
  border: 1px solid color-mix(in srgb, var(--c) 70%, #000 30%);
  vertical-align: 2px;
}
.ubadge-soft {
  background: color-mix(in srgb, var(--c) 16%, var(--card));
  color: color-mix(in srgb, var(--c) 75%, var(--ink));
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
}
.ubadge-glow { box-shadow: 2px 2px 0 color-mix(in srgb, var(--c) 55%, transparent); }
.ubadge-shine { position: relative; overflow: hidden; }
.ubadge-shine::after {
  content: ""; position: absolute; inset: 0 -60%;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .6) 50%, transparent 62%);
  transform: translateX(-70%);
  animation: ubadge-shine 2.6s ease-in-out infinite;
}
@keyframes ubadge-shine { 0%, 62% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }
.ubadge-pulse { animation: ubadge-pulse 2.2s ease-in-out infinite; }
@keyframes ubadge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); }
  55% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .ubadge-shine::after, .ubadge-pulse { animation: none; }
  .ubadge-shine::after { opacity: 0; }
}

.badge-settings { display: grid; gap: 12px; }
.badge-row {
  display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 8px 14px;
  align-items: center; padding: 12px;
  background: var(--card); border: 1px solid var(--line-hi); border-left: 3px solid var(--ink);
  border-radius: var(--r);
}
.badge-preview { display: flex; align-items: center; min-height: 40px; }
.badge-preview .ubadge { margin-left: 0; font-size: 11.5px; min-height: 24px; }
.badge-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.badge-controls input[type=color] { width: 52px; min-height: 40px; padding: 3px; cursor: pointer; }
.badge-controls select { width: auto; min-width: 150px; min-height: 40px; }
.badge-note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 560px) {
  .badge-row { grid-template-columns: 1fr; }
  .badge-controls { justify-content: flex-start; }
}

.badge-cell { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.badge-cell .ubadge { margin-left: 0; }
.badge-grant { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.badge-grant form { margin: 0; }
.msg-from { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-bottom: 2px; }
.msg-from .ubadge { margin-left: 4px; }

/* --- меры к аккаунту -------------------------------------------------------- */

.banhead { border-left: 5px solid var(--red); padding-left: 16px; margin-bottom: 20px; }
.banhead h1 { color: var(--red); }
.shot {
  display: block; max-width: 100%; height: auto; margin-top: 10px;
  border: 1px solid var(--ink); border-radius: var(--r); background: var(--card);
  box-shadow: var(--sh);
}
.modbox { margin-bottom: 22px; }
.modform { margin-top: 10px; }
.modform > summary { display: inline-flex; cursor: pointer; }
.modform > summary::marker, .modform > summary::-webkit-details-marker { display: none; content: ""; }
.modform > summary::after { content: ""; }
.modform[open] > summary { margin-bottom: 12px; }
.modform form { border-top: 1px dashed var(--line-hi); padding-top: 12px; }
.limit-list { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }

/* Заморозка: синий лёд, при наведении плашку потряхивает. */
.frostbadge {
  display: inline-flex; align-items: center; gap: 5px; min-height: 22px;
  padding: 1px 9px; border-radius: 2px; margin-left: 6px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; vertical-align: 2px;
  background: linear-gradient(180deg, #DCEEFF 0%, #A9D6FF 100%);
  color: #0B3A61; border: 1px solid #0B3A61;
  box-shadow: 2px 2px 0 rgba(11, 58, 97, .35);
}
.frostbadge:hover .frost-emoji { animation: frost-shake .4s linear infinite; }
.frost-emoji { display: inline-block; font-size: 13px; line-height: 1; }
@keyframes frost-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-1.5px, 1px) rotate(-7deg); }
  50% { transform: translate(1.5px, -1px) rotate(6deg); }
  75% { transform: translate(-1px, -1.5px) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) { .frostbadge:hover .frost-emoji { animation: none; } }
:root[data-mode="dark"] .frostbadge {
  background: linear-gradient(180deg, #27486B 0%, #1A3350 100%);
  color: #CFE8FF; border-color: #6FB4EE;
  box-shadow: 2px 2px 0 #000;
}

/* --- сообщения: список слева, переписка справа ----------------------------- */

.chatpage {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  height: calc(100vh - 240px);
  min-height: 460px;
}
.chatlist {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--paper); border: 1px solid var(--line-hi); border-top: 3px solid var(--ink);
  border-radius: var(--r-lg); padding: 12px;
}
.chatsearch { margin-bottom: 10px; }
.chatsearch input { min-height: 40px; }
.chattabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.chattab {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px;
  border-radius: var(--r); font-size: 13px; font-weight: 700; color: var(--muted);
  transition-property: background-color, color; transition-duration: .14s;
}
.chattab:hover { background: var(--card-hi); color: var(--ink); }
.chattab.on { background: var(--ink); color: var(--card); }
.chatitems { flex: 1; overflow-y: auto; margin: 0 -6px; padding: 0 6px; display: grid; gap: 2px; align-content: start; }
.chatitem {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px;
  padding: 10px; border-radius: var(--r); border-left: 3px solid transparent;
  border-bottom: 1px dashed var(--line);
  transition-property: background-color, border-color; transition-duration: .14s;
}
.chatitem:hover { background: var(--card-hi); color: var(--ink); }
.chatitem.on { background: var(--card); border-left-color: var(--accent); color: var(--ink); }
.chatitem.unread .chatitem-preview { color: var(--ink); font-weight: 600; }
.chatitem-ava { display: flex; align-items: flex-start; }
.chatitem-body { display: grid; gap: 2px; min-width: 0; }
.chatitem-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chatitem-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatitem-sub, .chatitem-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chatitem-preview { color: var(--muted); }
.chatitem-marks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.chatempty { padding: 24px 10px; text-align: center; }
.chatsupport { margin-top: 10px; }
.support-ava { background: var(--accent-dim); color: var(--accent-hi); font-family: var(--mono); font-size: 11px; }

.chatview {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--paper); border: 1px solid var(--line-hi); border-top: 3px solid var(--ink);
  border-radius: var(--r-lg); padding: 14px 16px;
}
.chathead {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 2px dashed var(--line-hi); flex-wrap: wrap;
}
.chathead-main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.chathead-back { display: none; font-size: 20px; line-height: 1; padding: 4px 8px; }
.chathead-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chathead-side form { margin: 0; }
.chat-amount { font-family: var(--mono); font-weight: 700; font-size: 18px; letter-spacing: -0.04em; white-space: nowrap; }
.chatnote {
  margin: 10px 0 0; padding: 8px 12px; border-radius: var(--r);
  background: var(--amber-dim); border: 1px solid var(--amber-line); color: #5C3600; font-size: 13px;
}
:root[data-mode="dark"] .chatnote { color: #F2D29B; }
.chatview .chat-stream { flex: 1; max-height: none; padding: 14px 2px; }
.chat-stream-empty { display: grid; place-items: center; }
.chatintro { text-align: center; max-width: 420px; display: grid; gap: 8px; justify-items: center; }
.chatintro .avatar { width: 46px; height: 46px; font-size: 15px; }
.chatview .composer { margin-top: 0; }
.chatfoot { margin: 8px 0 0; }

@media (max-width: 900px) {
  .chatpage { grid-template-columns: 1fr; height: auto; }
  .chatpage .chatview { display: none; }
  .chatpage-open .chatlist { display: none; }
  .chatpage-open .chatview { display: flex; min-height: 70vh; }
  .chathead-back { display: inline-block; }
  .chatitems { max-height: none; overflow: visible; }
}

/* --- отзывы, избранное, жалобы, риск, приглашения ---------------------------- */

.red { color: var(--red); }
.green { color: var(--accent); }

.stars { display: inline-flex; gap: 1px; font-size: 15px; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.stars-sm { font-size: 12px; }
.star { color: var(--line); }
.star.on { color: var(--amber); }
.rating-inline { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-weight: 700; font-family: var(--mono); font-size: 12.5px; }
.rating-inline .star { font-size: 12px; }

.review-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.review { min-width: 0; }
.review { padding: 14px 0; border-top: 1px dashed var(--line-hi); }
.review:first-child { border-top: 0; padding-top: 0; }
.review-list .review { background: var(--paper); border: 1px solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: 14px 16px; }
.review-hidden { opacity: .62; border-style: dashed !important; box-shadow: none !important; }
.review-head { display: flex; align-items: center; gap: 10px; }
.review-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.review-who .tiny { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-body { margin: 8px 0 0; white-space: pre-wrap; }
.review-photo { display: block; margin-top: 10px; max-width: 220px; max-height: 160px; border: 1px solid var(--ink); border-radius: var(--r); object-fit: cover; }
.review-reply { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--accent-dim); }
.review-answer { margin-top: 10px; }
.review-answer summary { list-style: none; display: inline-flex; }
.review-answer summary::-webkit-details-marker { display: none; }
.review-answer form { margin-top: 8px; display: grid; gap: 8px; }
.review-mod { margin-top: 10px; }

.starpick { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.starpick legend { padding: 0; margin-bottom: 4px; }
.starrow { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.starpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.starpick label { font-size: 30px; line-height: 1; color: var(--line-hi); cursor: pointer; padding: 2px; margin: 0; }
.starpick input:checked ~ label, .starpick label:hover, .starpick label:hover ~ label { color: var(--amber); }
.starpick input:focus-visible + label { outline: 2px solid var(--accent); }

.rating-big { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rating-num { font-family: var(--mono); font-size: 40px; font-weight: 700; line-height: 1; }
.rating-bars { display: grid; gap: 6px; }
.rating-bar { display: grid; grid-template-columns: 32px 1fr 28px; align-items: center; gap: 8px; }
.rating-track { height: 8px; background: var(--card-hi); border: 1px solid var(--line); overflow: hidden; }
.rating-track span { display: block; height: 100%; background: var(--amber); }

.favbtn { gap: 8px; }
.favbtn.on { color: var(--red); border-color: var(--red); }
.favtabs { margin-bottom: 16px; }
.favlist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.favitem { display: flex; gap: 16px; align-items: center; justify-content: space-between;
           background: var(--paper); border: 1px solid var(--ink); border-radius: var(--r); box-shadow: var(--sh); padding: 14px 16px; }
.favitem-gone { opacity: .72; box-shadow: none; border-style: dashed; }
.favitem-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.favitem-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; text-align: right; }

.iconlink { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
            border: 1px solid #5B5D63; border-radius: var(--r); color: #F2EFE6; }
.iconlink:hover, .iconlink.on { background: #2B2C30; border-color: #F2EFE6; color: #FF9A8F; }
.iconlink-pill { position: absolute; top: -7px; right: -7px; min-width: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; text-align: center; }

.savesearch { margin: 0 0 16px; }
.range2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filterbar select { width: auto; flex: none; min-height: 38px; }
.order-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.order-actions form { margin: 0; }

.riskbox { border-style: double; border-width: 3px; }
.riskfactors { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.riskfactors li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted var(--line); padding-bottom: 3px; }
.reflink { display: flex; gap: 8px; }
.reflink input { flex: 1; min-width: 0; }
.blrow { padding: 10px 0; border-top: 1px dashed var(--line-hi); }
.blrow:first-child { border-top: 0; padding-top: 0; }
.profile-actions form { margin: 0; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }

:root[data-mode="dark"] .review-reply { background: #1D2233; }
:root[data-mode="dark"] .review-list .review,
:root[data-mode="dark"] .favitem { border-color: var(--line-hi); }
:root[data-mode="dark"] .favbtn.on { color: var(--red); }

@media (max-width: 720px) {
  .favitem { flex-direction: column; align-items: stretch; }
  .favitem-side { flex-direction: row; align-items: center; justify-content: space-between; }
  .reflink { flex-direction: column; }
  .order-actions { justify-content: flex-start; }
}
/* счётчик на активной вкладке: фон перевёрнут, приглушённый цвет не читался */
.chattab.on .dim { color: inherit; }
:root[data-mode="dark"] .review-reply .dim { color: #ACA89A; }

/* --- Telegram и 2FA --- */
.tgcard { display: flex; align-items: center; gap: 14px; }
.tgcard-text { display: flex; flex-direction: column; min-width: 0; }
.tgcard-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgcode-big { font-size: 34px; font-weight: 700; letter-spacing: .12em; padding: 14px 18px; display: inline-block;
              border: 1px dashed var(--ink); border-radius: var(--r); background: var(--card); user-select: all; }
.code-input { font-size: 22px; letter-spacing: .3em; max-width: 220px; text-align: center; }
.tgconfirm { border-left: 3px solid var(--amber); padding-left: 14px; }
.tgcode label { display: block; margin-bottom: 6px; }
:root[data-mode="dark"] .tgcode-big { border-color: var(--line-hi); }