:root{
  --bg: #f7f9fc;
  --bg-raised: #eef2f7;
  --bg-soft: #eef2f7;
  --bg-card: #ffffff;
  --card: #ffffff;
  --ink: #101828;
  --ink-dim: #475467;
  --ink-faint: #98a2b3;
  --text: #101828;
  --muted: #475467;
  --accent: #1F5CFF;
  --accent-deep: #1749c9;
  --accent-dim: rgba(31,92,255,0.12);
  --accent-bg: rgba(31,92,255,0.10);
  --line: rgba(16,24,40,0.08);
  --line-strong: rgba(16,24,40,0.14);
  --good: #15803d;
  --good-bg: rgba(21,128,61,0.10);
  --bad: #b91c1c;
  --bad-bg: rgba(185,28,28,0.08);
  --warn: #b45309;
  --warn-bg: rgba(180,83,9,0.10);
  --radius: 22px;
  --shadow: 0 18px 40px -28px rgba(16,24,40,0.35);
  --shadow-sm: 0 10px 24px -16px rgba(16,24,40,0.18);
  --page-gutter: 28px;
  --font-display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
}
@media (max-width: 720px){
  :root{ --page-gutter: 24px; }
}

*{ box-sizing: border-box; }
html, body{ margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); overflow-x: clip; }
body{ font-family: var(--font-body); line-height: 1.5; }
a{ color: inherit; }

/* ---------- Shell layout ---------- */
.shell{ display: flex; min-height: 100vh; }

.sidebar{
  width: 232px;
  flex-shrink: 0;
  background: var(--bg-raised);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.1rem;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.3rem 1.6rem;
}
.brand-mark{
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  box-shadow: 0 6px 14px -8px rgba(16,24,40,0.45);
}
.brand-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.side-nav{ display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.side-nav a{
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--ink-dim);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.side-nav a:hover{ background: rgba(16,24,40,0.04); color: var(--ink); }
.side-nav a.active{ background: var(--accent-dim); color: var(--accent-deep); font-weight: 600; }
.side-nav a.soon::after{
  content: "скоро";
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.15rem 0.4rem;
}

.logout{
  font-size: 0.86rem;
  color: var(--ink-faint);
  text-decoration: none;
  padding: 0.65rem 0.75rem;
}
.logout:hover{ color: var(--ink-dim); }

.content{
  flex: 1;
  min-width: 0;
  padding: clamp(1.4rem, 3vw, 2.6rem);
}

/* ---------- Page header ---------- */
.page-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}
.page-head h1{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
}
.page-head p{
  margin: 0.3rem 0 0;
  color: var(--ink-dim);
  font-size: 0.92rem;
}

/* ---------- Cards / panels ---------- */
.panel{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.4rem clamp(1rem, 3vw, 1.6rem);
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow-sm);
}
.panel h2{
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

/* ---------- Forms ---------- */
.field{ display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.field label{ font-size: 0.82rem; color: var(--ink-dim); }
.field input, .field select, .field textarea{
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 0.7rem 0.85rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.field input[type="file"]{
  border-style: dashed;
  color: var(--ink-dim);
  font-size: 0.85rem;
  padding: 0.55rem 0.7rem;
}
.field input[type="file"]::file-selector-button{
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  padding: 0.4rem 0.8rem;
  margin-right: 0.7rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.82rem;
}
.field input[type="file"]::file-selector-button:hover{ border-color: var(--accent); }
/* ---------- Автокомплит выбора пользователя ---------- */
.autocomplete-field{ position: relative; }
.autocomplete-field .autocomplete-input{ padding-right: 2.2rem; cursor: pointer; }
.autocomplete-field::after{
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 0.95rem;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg);
  pointer-events: none;
}
.autocomplete-dropdown{
  display: block;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 16px 32px -12px rgba(16,24,40,0.28);
  padding: 0.35rem;
}
.autocomplete-dropdown[hidden]{ display: none; }
.autocomplete-item{
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
}
.autocomplete-item:hover, .autocomplete-item.active{ background: var(--bg-raised); }
.autocomplete-empty{ padding: 0.55rem 0.7rem; font-size: 0.85rem; color: var(--ink-dim); }

.form-row{ display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.form-row .field{ flex: 1; min-width: 200px; margin-bottom: 0; }
.checkbox-field{ justify-content: center; }
.checkbox-field label{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}
.checkbox-field input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.btn{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn.primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: #ffffff;
  box-shadow: 0 10px 20px -12px rgba(31,92,255,0.55);
}
.btn.primary:hover{ transform: translateY(-1px); }
.btn.ghost{
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn.ghost:hover{ border-color: var(--accent); transform: translateY(-1px); }
.btn.small{ padding: 0.4rem 0.85rem; font-size: 0.78rem; }
.btn.danger{ border-color: rgba(185,28,28,0.35); color: var(--bad); }
.btn.danger:hover{ border-color: var(--bad); background: rgba(185,28,28,0.08); }

/* ---------- Alerts ---------- */
.alert{
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
  border: 1px solid;
}
.alert.error{ background: var(--bad-bg); border-color: rgba(185,28,28,0.35); color: var(--bad); }
.alert.success{ background: var(--good-bg); border-color: rgba(21,128,61,0.35); color: var(--good); }

.suspicious-banner-title{ font-weight: 700; margin-bottom: 0.6rem; }
.suspicious-list{ display: flex; flex-direction: column; gap: 0.5rem; }
.suspicious-item{
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap;
  background: #ffffff; border-radius: 10px; padding: 0.5rem 0.8rem; border: 1px solid rgba(185,28,28,0.25);
}
.suspicious-item-main{ display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.88rem; color: var(--ink); }
.suspicious-item-main code{ font-family: monospace; font-weight: 700; }
.suspicious-item-app{ color: var(--ink-dim); }
.suspicious-item-count{ background: var(--bad); color: #ffffff; font-size: 0.76rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }
.suspicious-item-user{ color: var(--ink-dim); font-size: 0.85rem; }
.suspicious-item-actions{ display: flex; align-items: center; gap: 0.5rem; }
.suspicious-ack-form{ margin: 0; }
.btn.ghost.small.ok{ border-color: var(--good); color: var(--good); }
.btn.ghost.small.ok:hover{ background: var(--good-bg); }

.credential-box{
  background: var(--bg-raised);
  border: 1px dashed var(--accent);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  font-size: 0.92rem;
}
.credential-box .row{ display: flex; gap: 0.6rem; align-items: center; margin-top: 0.4rem; flex-wrap: wrap; }
.credential-box code{
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  background: rgba(47,111,237,0.10);
  color: var(--accent-deep);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  word-break: break-all;
}
.credential-box .warn{
  color: var(--ink-faint);
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

/* ---------- Copy-to-clipboard button ---------- */
.copy-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0;
}
.copy-btn:hover{ border-color: var(--accent); color: var(--accent-deep); }
.copy-btn:active{ transform: scale(0.94); }
.copy-btn .icon-check{ display: none; }
.copy-btn.copied{ border-color: var(--good); color: var(--good); }
.copy-btn.copied .icon-copy{ display: none; }
.copy-btn.copied .icon-check{ display: block; }

.code-row{ display: flex; align-items: center; gap: 0.5rem; white-space: normal; }
.code-row code{ white-space: nowrap; }

/* ---------- Table ---------- */
.table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
table{ width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td{ text-align: left; padding: 0.65rem 0.7rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th{ color: var(--ink-faint); font-weight: 500; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; }
tbody tr:hover{ background: rgba(16,24,40,0.03); }
.actions-cell{ display: flex; gap: 0.5rem; justify-content: flex-end; }
.app-icon{
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
}
.app-icon-empty{
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: block;
  border: 1px dashed var(--line-strong);
  background: var(--bg-raised);
}
tr.edit-row td{
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line-strong);
  padding: 1rem clamp(0.6rem, 2vw, 1rem);
  white-space: normal;
}
tr.edit-row textarea{
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  resize: vertical;
}
table input[type="checkbox"]{ width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.col-check{ width: 40px; text-align: center; }

.bulk-bar{
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
}
.bulk-bar[hidden]{ display: none; }
.bulk-bar span{ font-size: 0.86rem; color: var(--ink-dim); }

.pill{
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
}
.pill.active{ color: var(--good); border-color: rgba(21,128,61,0.35); }
.pill.blocked{ color: var(--bad); border-color: rgba(185,28,28,0.35); }
.pill.unused{ color: var(--warn); border-color: rgba(180,83,9,0.35); }
.pill.muted{ color: var(--ink-faint); border-color: rgba(152,162,179,0.35); }
.pill.pending{ color: var(--accent); border-color: rgba(47,111,237,0.35); }

.empty{ color: var(--ink-faint); font-size: 0.9rem; padding: 1.2rem 0; text-align: center; }
.empty-inline{ color: var(--ink-faint); }

/* ---------- Stat tiles ---------- */
.stat-tiles{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}
.stat-tile{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow: var(--shadow-sm);
}
.stat-label{ font-size: 0.78rem; color: var(--ink-dim); }
.stat-value{ font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; }
.stat-value.good{ color: var(--good); }
.stat-value.bad{ color: var(--bad); }
.stat-icon{ color: var(--ink-faint); margin-bottom: 0.1rem; }
.stat-icon.good{ color: var(--good); }
.stat-icon.bad{ color: var(--bad); }

/* ---------- License status breakdown ---------- */
.status-breakdown{ display: flex; flex-direction: column; gap: 0.7rem; }
.status-breakdown-bar{
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-raised);
}
.status-breakdown-bar .seg{ height: 100%; }
.status-breakdown-bar .seg-unused{ background: var(--ink-faint); }
.status-breakdown-bar .seg-active{ background: var(--good); }
.status-breakdown-bar .seg-revoked{ background: var(--bad); }
.status-breakdown-bar .seg-empty{ background: var(--line-strong); }
.status-breakdown-legend{ display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: 0.84rem; color: var(--ink-dim); }
.status-breakdown-legend strong{ color: var(--ink); font-family: var(--font-display); }
.dot{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem; }
.dot-unused{ background: var(--ink-faint); }
.dot-active{ background: var(--good); }
.dot-revoked{ background: var(--bad); }

/* ---------- Top buyers ---------- */
.top-buyers-list{ display: flex; flex-direction: column; gap: 0.9rem; }
.top-buyer-row{ display: flex; align-items: center; gap: 0.8rem; }
.top-buyer-rank{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-deep);
  background: var(--accent-dim);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.top-buyer-info{ flex: 1; min-width: 0; }
.top-buyer-line{ display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.top-buyer-email{ font-weight: 600; color: var(--ink); }
.top-buyer-app{ font-size: 0.8rem; color: var(--ink-dim); background: var(--bg-raised); padding: 0.1rem 0.5rem; border-radius: 999px; }
.top-buyer-count{ margin-left: auto; font-size: 0.82rem; color: var(--ink-dim); }
.top-buyer-bar-wrap{ width: 100%; height: 7px; border-radius: 999px; background: var(--bg-raised); overflow: hidden; }
.top-buyer-bar{ display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); border-radius: 999px; }

/* ---------- Bar chart ---------- */
.chart-subtitle{ margin: -0.4rem 0 1rem; color: var(--ink-dim); font-size: 0.86rem; }
.chart-wrap{ width: 100%; }
.bar-chart{ width: 100%; height: auto; display: block; }
.chart-baseline{ stroke: var(--line-strong); stroke-width: 1; }
.bar-fill{ fill: var(--accent); pointer-events: none; transition: fill 0.15s; }
.bar-hit{ fill: transparent; cursor: pointer; }
.bar-hit:hover + .bar-fill,
.bar-hit:focus + .bar-fill{ fill: var(--accent-deep); }
.bar-hit:focus{ outline: none; }
.chart-axis-labels{
  display: flex;
  justify-content: space-between;
  color: var(--ink-faint);
  font-size: 0.76rem;
  margin-top: 0.3rem;
}
.chart-tooltip{
  position: fixed;
  z-index: 50;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  color: var(--ink-dim);
  pointer-events: none;
  white-space: nowrap;
}
.chart-tooltip strong{ color: var(--accent-deep); font-family: var(--font-display); }

.ua-cell{ max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Таблица ключей: компактная раскладка без прокрутки в сторону ---------- */
.table-toolbar{
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.table-search{
  flex: 1;
  min-width: 200px;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.88rem;
}
.table-search:focus{ outline: none; border-color: var(--accent); }
.table-sort{
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.86rem;
}

.pagination-bar{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.pagination-bar[hidden]{ display: none; }
.pagination-bar span{ font-size: 0.86rem; color: var(--ink-dim); white-space: nowrap; }
.pagination-bar .btn[disabled]{ opacity: 0.45; cursor: not-allowed; }
.pagination-bar .btn[disabled]:hover{ border-color: var(--line-strong); }

.keys-table-wrap{ overflow: visible; }
.users-table-wrap{ overflow: visible; }
table.keys-table{ table-layout: fixed; }
table.keys-table th, table.keys-table td{ white-space: normal; word-break: break-word; vertical-align: top; }
table.keys-table .col-check{ width: 3%; }
table.keys-table .col-key{ width: 20%; }
table.keys-table .col-userapp{ width: 18%; }
table.keys-table .col-status{ width: 11%; }
table.keys-table .col-device{ width: 14%; }
table.keys-table .col-dates{ width: 12%; }
table.keys-table .col-notes{ width: 14%; overflow-wrap: break-word; }
table.keys-table .col-actions{ width: 8%; }
table.keys-table td.col-key{ white-space: nowrap; }
table.keys-table td.col-key code{ white-space: nowrap; }
table.keys-table .code-row{ flex-wrap: wrap; }

/* ---------- Заметка: инлайн-редактирование ---------- */
.notes-view{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
}
.notes-text{ flex: 1; min-width: 0; }
.notes-edit-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0;
}
.notes-edit-toggle:hover{ border-color: var(--line-strong); background: var(--bg-raised); color: var(--ink-dim); }
.notes-edit-form{ margin-top: 0.4rem; }
.notes-edit-form input[type="text"],
.notes-edit-form input[type="number"]{
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.82rem;
}
.notes-edit-form input[type="text"]:focus,
.notes-edit-form input[type="number"]:focus{ outline: none; border-color: var(--accent); }
.notes-price-input{ width: 110px; text-align: right; }
.notes-edit-actions{ display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.notes-edit-actions .btn{
  white-space: nowrap;
  padding: 0.35rem 0.6rem;
  font-size: 0.72rem;
  flex: 0 0 auto;
}

.history-link{
  display: inline-block;
  margin-top: 0.3rem;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--accent-deep);
  font-family: var(--font-body);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
}
.history-link:hover{ color: var(--accent); }

/* ---------- Модальное окно ---------- */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(16,24,40,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}
.modal-overlay[hidden]{ display: none; }
.modal-panel{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(16,24,40,0.4);
  width: min(520px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.modal-header h3{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}
.modal-close{
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-faint);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0;
}
.modal-close:hover{ background: var(--bg-raised); color: var(--ink); }
.modal-body{ padding: 0.6rem 1.2rem 1.2rem; overflow-y: auto; }
.confirm-panel{ width: min(420px, 100%); padding: 1.4rem 1.4rem 1.3rem; }
.confirm-panel h3{
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}
.confirm-panel p{
  margin: 0 0 1.4rem;
  color: var(--ink-dim);
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-line;
}
.confirm-actions{ display: flex; justify-content: flex-end; gap: 0.6rem; }
.btn.danger.solid{ background: var(--bad); border-color: var(--bad); color: #ffffff; }
.btn.danger.solid:hover{ background: #941616; border-color: #941616; }
.history-item{
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.history-item:last-child{ border-bottom: none; }
.history-row1{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.history-date{ font-size: 0.82rem; color: var(--ink-dim); white-space: nowrap; }
.history-ip{ font-size: 0.8rem; color: var(--ink-faint); }
.history-device{ font-size: 0.8rem; color: var(--ink-faint); margin-left: 0.6rem; }
.history-summary{
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.75rem 0.9rem; border-radius: 12px; margin-bottom: 0.75rem;
  border: 1px solid var(--line); background: var(--bg-soft);
}
.history-summary.warn{ border-color: var(--bad); background: var(--bad-bg); }
.history-summary.ok{ padding: 0.5rem 0.9rem; }
.history-summary-title{ font-weight: 700; font-size: 0.88rem; }
.history-summary.warn .history-summary-title{ color: var(--bad); }
.history-summary-list{ display: flex; flex-wrap: wrap; gap: 0.4rem; }
.history-device-chip{
  display: inline-flex; align-items: center; font-family: monospace; font-size: 0.76rem; line-height: 1.3;
  padding: 0.25rem 0.6rem; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--line-strong); color: var(--ink); word-break: break-all;
}
.history-summary.warn .history-device-chip{ background: #ffffff; border-color: rgba(185,28,28,0.35); }
.history-block-form{ margin-top: 0.2rem; }

/* ---------- Таблица пользователей: без горизонтальной прокрутки ---------- */
table.users-table{ table-layout: fixed; }
table.users-table th, table.users-table td{ white-space: normal; word-break: break-word; overflow-wrap: break-word; vertical-align: top; }
table.users-table thead th{ white-space: nowrap; word-break: normal; }
table.users-table .col-check{ width: 4%; }
table.users-table .col-email{ width: 19%; }
table.users-table .col-status{ width: 9%; }
table.users-table .col-apps{ width: 10%; }
table.users-table .col-source{ width: 11%; }
table.users-table .col-notes{ width: 18%; }
table.users-table .col-created{ width: 9%; }
table.users-table .col-lastlogin{ width: 12%; }
table.users-table .col-actions{ width: 8%; }

.cell-primary{ color: var(--ink); }
.cell-secondary{ color: var(--ink-faint); font-size: 0.82rem; margin-top: 0.15rem; }

.icon-action-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0;
}
.icon-action-btn:hover{ border-color: var(--accent); color: var(--accent-deep); }
.icon-action-btn:active{ transform: scale(0.94); }
.icon-action-btn.danger{ border-color: rgba(185,28,28,0.35); color: var(--bad); }
.icon-action-btn.danger:hover{ border-color: var(--bad); background: rgba(185,28,28,0.08); }

/* ---------- Статус: обычный цветной текст (без бейджа) ---------- */
.status-text{ font-weight: 700; font-size: 0.84rem; white-space: nowrap; }
.status-text.active{ color: var(--good); }
.status-text.blocked{ color: var(--bad); }
.status-text.unused{ color: var(--warn); }

/* ---------- Меню действий «⋮» ---------- */
.row-menu{ position: relative; display: inline-block; }
.menu-trigger{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0;
}
.menu-trigger:hover, .menu-trigger[aria-expanded="true"]{
  border-color: var(--line-strong);
  background: var(--bg-raised);
  color: var(--ink);
}
.menu-dropdown{
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 16px 32px -12px rgba(16,24,40,0.28);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.menu-dropdown[hidden]{ display: none; }
.menu-dropdown form{ display: block; }
/* Автоматически открывается вверх, если снизу не хватает места на экране */
.menu-dropdown.drop-up{ top: auto; bottom: calc(100% + 4px); }
.menu-item{
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.menu-item:hover{ background: var(--bg-raised); }
.menu-item.danger{ color: var(--bad); }
.menu-item.danger:hover{ background: rgba(185,28,28,0.08); }

/* ---------- Приложения пользователя: випадающий список ---------- */
.apps-trigger{
  width: auto;
  min-width: 30px;
  padding: 0 0.55rem;
  gap: 0.3rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
}
.apps-dropdown{ min-width: 220px; max-width: 320px; right: auto; left: 0; max-height: 320px; overflow-y: auto; }
.apps-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.apps-list-item{ display: flex; flex-direction: column; }
.apps-list-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.apps-list-toggle:hover{ background: var(--bg-raised); }
.apps-list-toggle[aria-expanded="true"] .apps-list-chevron{ transform: rotate(180deg); }
.apps-list-name{ overflow-wrap: break-word; }
.apps-list-right{ display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.apps-list-count{
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-faint);
  background: var(--bg-raised);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}
.apps-list-chevron{ color: var(--ink-faint); flex-shrink: 0; transition: transform .15s ease; }

.apps-keys{
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem 0.5rem 0.9rem;
}
.apps-keys[hidden]{ display: none; }
.app-key-row{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  background: var(--bg-raised);
}
.app-key-code code{
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.76rem;
  color: var(--ink);
  word-break: break-all;
}
.app-key-meta{ display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.app-key-device{ font-size: 0.76rem; color: var(--ink-faint); }
.app-key-actions{ display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.app-key-action-btn{
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.28rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-dim);
  cursor: pointer;
  white-space: nowrap;
}
.app-key-action-btn:hover{ border-color: var(--accent); color: var(--accent-deep); }
.app-key-action-btn.danger{ border-color: rgba(185,28,28,0.35); color: var(--bad); }
.app-key-action-btn.danger:hover{ border-color: var(--bad); background: rgba(185,28,28,0.08); }

/* ---------- Личный кабинет ---------- */
.cabinet-shell{
  min-height: 100vh;
  background:
    radial-gradient(1100px 560px at 100% -12%, rgba(31,92,255,0.07), transparent 60%),
    var(--bg);
}
.cabinet-header{
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 14px var(--page-gutter);
  border-bottom: 1px solid var(--line);
  background: rgba(247,249,252,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cabinet-header-right{ display: flex; align-items: center; gap: 0.9rem; }
.cabinet-user{ display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.cabinet-avatar{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
}
.cabinet-email{
  font-size: 0.86rem;
  color: var(--ink-dim);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logout-btn{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.logout-btn:hover{ border-color: var(--line-strong); background: var(--bg-card); color: var(--bad); }

.cabinet-content{ padding: 28px var(--page-gutter) 40px; max-width: 1180px; margin: 0 auto; box-sizing: border-box; }

/* Единый premium-разделитель Wonder Labs */
.wl-divider,
hr.wl-divider{
  display: block;
  width: 100%;
  height: 1px;
  margin: 32px 0;
  border: 0;
  padding: 0;
  opacity: 0.75;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16,24,40,0.10) 12%,
    rgba(31,92,255,0.12) 50%,
    rgba(16,24,40,0.10) 88%,
    transparent 100%
  );
}
.wl-soft-divider{
  display: block;
  width: 100%;
  height: 1px;
  margin: 32px 0;
  border: 0;
  opacity: 0.75;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16,24,40,0.10) 12%,
    rgba(31,92,255,0.12) 50%,
    rgba(16,24,40,0.10) 88%,
    transparent 100%
  );
}
.wl-divider--tight{ margin: 20px 0; }
.wl-divider--section{ margin: 32px 0; }
.cabinet-count{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--ink-dim);
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  white-space: nowrap;
}

.cabinet-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  padding: 3.6rem 1.5rem;
  background: var(--bg-card);
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
}
.cabinet-empty-icon{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raised);
  color: var(--ink-faint);
}
.cabinet-empty p{ margin: 0; color: var(--ink-dim); font-size: 0.92rem; line-height: 1.55; max-width: 320px; }

.cabinet-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.1rem;
}
.app-card{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.3rem 1.3rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.app-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -26px rgba(16,24,40,0.3);
}

.app-card-top{ display: flex; align-items: flex-start; gap: 0.9rem; }
.app-card-icon{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  flex-shrink: 0;
  box-shadow: 0 8px 18px -10px rgba(16,24,40,0.3);
}
.app-card-icon-empty{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  border: 1.5px dashed var(--line-strong);
  box-shadow: none;
}
.app-card-heading{ display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; padding-top: 0.15rem; }
.app-card-heading h3{ margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.3; word-break: break-word; }

.status-chip{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.74rem;
  padding: 0.28rem 0.65rem 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  background: var(--bg-raised);
}
.status-dot{ width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-chip.status-active{ color: var(--good); border-color: rgba(21,128,61,0.3); background: var(--good-bg); }
.status-chip.status-blocked{ color: var(--bad); border-color: rgba(185,28,28,0.3); background: var(--bad-bg); }
.status-chip.status-unused{ color: var(--warn); border-color: rgba(180,83,9,0.3); background: var(--warn-bg); }

.app-card-body{ display: flex; flex-direction: column; gap: 0; }

.app-card-desc-wrap{ display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.app-card-desc{
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.86rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.app-card-desc.expanded{ -webkit-line-clamp: unset; overflow: visible; }
.desc-toggle{
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-deep);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.desc-toggle:hover{ text-decoration: underline; }

.app-card-meta{ margin: 0; color: var(--ink-faint); font-size: 0.8rem; }

.app-card-key{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.app-card-key-label{ font-size: 0.72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.key-value-row{ display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.key-value{
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink);
  word-break: break-all;
}
.key-value.revealed{ color: var(--accent-deep); }
.key-actions{ display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; }
.key-icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0;
  transition: border-color .15s ease, color .15s ease;
}
.key-icon-btn:hover{ border-color: var(--accent); color: var(--accent-deep); }
.key-copy-btn{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.key-copy-btn:hover{ border-color: var(--accent); color: var(--accent-deep); transform: translateY(-1px); }
.key-copy-btn.copied{ border-color: var(--good); color: var(--good); background: var(--good-bg); transform: none; }

.app-card-stores{ display: flex; flex-wrap: wrap; gap: 0.6rem; }
.store-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
}
.store-badge svg{ flex-shrink: 0; }
.store-badge:hover{ transform: translateY(-1px); opacity: 0.9; }
.store-badge:active{ transform: translateY(0); }
.store-badge.ios{ background: #0a0a0a; }
.store-badge.android{ background: #0f9d58; }

/* Внутренние разделители карточки приложения */
.app-card{
  gap: 0;
}
.app-card-top{
  padding-bottom: 16px;
  margin-bottom: 16px;
  position: relative;
}
.app-card-top::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  opacity: 0.75;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16,24,40,0.10) 12%,
    rgba(31,92,255,0.12) 50%,
    rgba(16,24,40,0.10) 88%,
    transparent 100%
  );
}
.app-card-body{ gap: 0; }
.app-card-body > .app-card-desc-wrap{
  padding-bottom: 16px;
  margin-bottom: 16px;
  position: relative;
}
.app-card-body > .app-card-desc-wrap::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  opacity: 0.75;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16,24,40,0.10) 12%,
    rgba(31,92,255,0.12) 50%,
    rgba(16,24,40,0.10) 88%,
    transparent 100%
  );
}
.app-card-key{
  margin-bottom: 0;
}
.app-card-body > .app-card-key + .app-card-meta{
  margin-top: 10px;
}
.app-card-body > .app-card-meta,
.app-card-body > .app-card-stores{
  margin-top: 12px;
}
.app-card-instructions,
.app-card-review{
  margin-top: 16px;
  padding-top: 16px;
  position: relative;
  border-top: 0;
}
.app-card-instructions::before,
.app-card-review::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  opacity: 0.75;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16,24,40,0.10) 12%,
    rgba(31,92,255,0.12) 50%,
    rgba(16,24,40,0.10) 88%,
    transparent 100%
  );
}
.app-card-instructions summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
.app-card-instructions summary::-webkit-details-marker{ display: none; }
.app-card-instructions .chevron{ color: var(--ink-faint); flex-shrink: 0; transition: transform .2s ease; }
.app-card-instructions[open] .chevron{ transform: rotate(180deg); }
.app-card-instructions p{ margin: 0.6rem 0 0; color: var(--ink-dim); font-size: 0.86rem; line-height: 1.55; overflow-wrap: anywhere; }
.app-card-instructions p a{ color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.app-card-instructions p a:hover{ color: var(--accent); }

/* ---------- Встроенное видео (YouTube) в инструкции для клиента ---------- */
.yt-embed{
  display: block;
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  margin: 0.6rem 0;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-sm);
}
.yt-embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Login page ---------- */
.login-shell{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-gutter);
  background: var(--bg);
}
.login-card{
  width: min(400px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  box-shadow: var(--shadow);
}
.login-card .brand{ justify-content: center; padding-bottom: 1.4rem; }
.login-card .brand-mark{ width: 44px; height: 44px; border-radius: 12px; }
.login-card h1{
  margin: 0 0 1.4rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
}
.login-card a{ color: var(--accent-deep); font-weight: 600; text-decoration: none; }
.login-card a:hover{ text-decoration: underline; }

@media (max-width: 720px){
  .shell{ flex-direction: column; }
  .sidebar{
    position: static;
    height: auto;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
  }
  .brand{ padding: 0; margin-right: 0; }
  .side-nav{ flex-direction: row; flex-wrap: wrap; gap: 0.4rem; }
  .side-nav a{ padding: 0.5rem 0.7rem; font-size: 0.86rem; }
  .logout{ align-self: flex-end; padding: 0.3rem 0.75rem; }

  .form-row{ flex-direction: column; align-items: stretch; }
  .form-row .btn{ width: 100%; justify-content: center; }
  .form-row .field{ min-width: 0; width: 100%; }
  .field label{ overflow-wrap: anywhere; }
  .code-row{ flex-wrap: wrap; }
  .code-row code{ white-space: normal; word-break: break-all; overflow-wrap: anywhere; }
  tr.edit-row td{ overflow-x: hidden; }
  .credential-box .row{ align-items: flex-start; }
  .copy-btn{ width: 34px; height: 34px; }

  .cabinet-header{ padding: 11px var(--page-gutter); }
  .cabinet-content{ padding: 22px var(--page-gutter) 32px; }
  .cabinet-email{ max-width: 130px; }
  .logout-btn span{ display: none; }
  .logout-btn{ padding: 0.55rem; }
  .app-card-top{ gap: 0.7rem; }
  .app-card-icon{ width: 60px; height: 60px; border-radius: 16px; }
  .store-badge{ flex: 1 1 100%; }
  .key-value-row{ width: 100%; }
  .key-actions{ margin-left: auto; }

  .content{ padding: 1rem; }
  .panel{ padding: 1.1rem 1rem; }
  .page-head h1{ font-size: 1.28rem; }
  .stat-tiles{ grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; }
  .stat-value{ font-size: 1.35rem; }

  .table-toolbar{ flex-direction: column; align-items: stretch; }
  .table-toolbar > *{ width: 100%; }
  .pagination-bar{ flex-wrap: wrap; row-gap: 0.5rem; }

  table input[type="checkbox"]{ width: 20px; height: 20px; }

  /* ---------- Таблицы на мобильном: карточки вместо строк ---------- */
  .table-wrap table thead{ display: block; }
  .table-wrap table thead tr{ display: flex; align-items: center; gap: 0.5rem; padding: 0 0 0.7rem; }
  .table-wrap table thead th{ display: none; border: none; padding: 0; }
  .table-wrap table thead th.col-check{ display: flex; align-items: center; width: auto; }
  .table-wrap table thead th.col-check::after{
    content: "Выбрать все";
    margin-left: 0.5rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink-dim);
  }

  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td{ display: block; width: 100%; }
  .table-wrap tr[hidden]{ display: none; }

  .table-wrap tbody tr:not(.edit-row){
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.9rem 2.8rem 0.7rem 1rem;
    margin-bottom: 0.8rem;
    box-shadow: var(--shadow-sm);
  }
  .table-wrap tbody tr:not(.edit-row):hover{ background: var(--bg-card); }

  /* На десктопе у таблиц users/keys заданы проценты ширины колонок (table-layout:fixed) —
     на мобильном таблица уже не table, эти проценты нужно сбросить, иначе карточки схлопываются.
     !important — потому что desktop-правила вида ".col-email{width:23%}" специфичнее по классам. */
  table.users-table td, table.users-table th,
  table.keys-table td, table.keys-table th{ width: auto !important; }

  .table-wrap tbody tr:not(.edit-row) td{
    display: grid;
    grid-template-columns: minmax(84px, 40%) 1fr;
    align-items: start;
    gap: 0.4rem 0.7rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--line);
    white-space: normal;
  }
  .table-wrap tbody tr:not(.edit-row) td:last-child{ border-bottom: none; }
  .table-wrap tbody tr:not(.edit-row) td::before{
    content: attr(data-label);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
    padding-top: 0.15rem;
  }

  .table-wrap tbody tr:not(.edit-row) td.col-check{
    position: absolute;
    top: 0.8rem;
    right: 0.9rem;
    width: auto;
    display: block;
    padding: 0;
    border-bottom: none;
  }
  .table-wrap tbody tr:not(.edit-row) td.col-check::before{ content: none; }

  .table-wrap tbody tr:not(.edit-row) td.col-key{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
  .table-wrap tbody tr:not(.edit-row) td.col-key::before{ padding-top: 0; }
  .table-wrap tbody tr:not(.edit-row) td.col-key .code-row{ width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap tbody tr:not(.edit-row) td.col-key code{ white-space: nowrap; word-break: normal; }

  .table-wrap tbody tr:not(.edit-row) td.col-icon{
    display: block;
    border-bottom: none;
    padding-bottom: 0.6rem;
  }
  .table-wrap tbody tr:not(.edit-row) td.col-icon::before{ content: none; }

  .table-wrap tbody tr:not(.edit-row) td.col-actions{
    display: block;
    border-bottom: none;
    padding-top: 0.6rem;
    text-align: right;
  }
  .table-wrap tbody tr:not(.edit-row) td.col-actions::before{ content: none; }
  .table-wrap tbody tr:not(.edit-row) td.col-actions .actions-cell{ justify-content: flex-end; flex-wrap: wrap; }
  .table-wrap tbody tr:not(.edit-row) td.col-actions .row-menu{ display: inline-block; }

  .table-wrap tbody tr:not(.edit-row) code{ white-space: normal; word-break: break-all; }
  .table-wrap tbody tr:not(.edit-row) .ua-cell{ max-width: none; white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
}

/* ---------- Сортируемые заголовки таблиц ---------- */
.sortable-th{ cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-th:hover{ color: var(--accent); }
.sortable-th .sort-arrow{ display: inline-block; margin-left: 4px; font-size: 0.75em; opacity: 0.35; }
.sortable-th.sort-active{ color: var(--accent); }
.sortable-th.sort-active .sort-arrow{ opacity: 1; }

/* Раздел "Товары" в личном кабинете */
.shop-section{ margin-top: 2.75rem; }
.page-head.shop-page-head h2{ margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; }
.shop-card{ gap: 0.9rem; }
.shop-card-heading{ display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.shop-card-name{ font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); overflow-wrap: anywhere; }
.shop-card-icon-empty{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ink-dim);
  flex-shrink: 0;
}
.shop-card-desc{ color: var(--ink-dim); font-size: 0.88rem; line-height: 1.5; margin: 0; flex-grow: 1; }
.shop-card-footer{ margin-top: auto; padding-top: 0.3rem; }
.shop-card-hint{ color: var(--ink-faint); font-size: 0.82rem; }
.shop-card-form{ display: flex; flex-direction: column; gap: 8px; }
.shop-card-form .btn{ width: 100%; justify-content: center; }

/* Предпросмотр скидки на карточке товара (сигнап-скидка / купон) */
.pill.discount{ color: var(--good); border-color: rgba(21,128,61,0.35); }
.price-pill{ display: inline-flex; align-items: center; gap: 6px; }
.price-old{ color: var(--ink-faint); text-decoration: line-through; font-weight: 400; }
.shop-card-discount-note{ color: var(--good); font-size: 0.78rem; }

/* Переключатель вкладок */
.tabs{
  display: flex;
  gap: 1.4rem;
  margin: 0 0 28px;
  padding: 0;
  border-bottom: none;
  position: relative;
}
.tabs::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  opacity: 0.75;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16,24,40,0.10) 8%,
    rgba(31,92,255,0.12) 50%,
    rgba(16,24,40,0.10) 92%,
    transparent 100%
  );
  pointer-events: none;
}
.tab-btn{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-dim);
  background: transparent;
  border: none;
  padding: 0.75rem 0.1rem;
  margin-bottom: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color .18s ease, border-color .18s ease;
}
.tab-btn:hover{ color: var(--ink); }
.tab-btn.active{ color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel[hidden]{ display: none; }
.tab-panel > .page-head{ margin-bottom: 22px; }


/* --- Account: stats, promo, history, settings --- */
.account-stats{
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
  margin: 0;
  padding: 18px 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.stat-item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 22px;
  position: relative;
}
.stat-item:not(:last-child)::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background: rgba(16,24,40,0.10);
}
.stat-label{font-size:13px;color:var(--muted);line-height:1.2}
.stat-value{font-size:20px;font-weight:700;color:var(--text);line-height:1.15}
.pill.new{background:#fff3cd;color:#8a6716}
.shop-coupon-input{width:100%;box-sizing:border-box;margin-bottom:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:14px;color:var(--text)}
.order-history-list{
  display:flex;
  flex-direction:column;
  gap:0;
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
}
.order-history-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:16px 2px;
  background:transparent;
  border:0;
  border-radius:0;
  position:relative;
}
.order-history-row + .order-history-row::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  opacity:0.75;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16,24,40,0.10) 12%,
    rgba(31,92,255,0.12) 50%,
    rgba(16,24,40,0.10) 88%,
    transparent 100%
  );
}
.order-history-main{display:flex;flex-direction:column;gap:2px}
.order-history-app{font-weight:600}
.order-history-label{font-size:12px;color:var(--muted)}
.order-history-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.order-history-amount{font-weight:600}
.order-history-coupon{font-size:12px;color:var(--muted)}
.order-history-date{font-size:12px;color:var(--muted)}
.settings-password-form{display:flex;flex-direction:column;gap:14px;max-width:360px;padding-top:4px}
.settings-password-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.settings-password-form input{padding:9px 11px;border:1px solid var(--line);border-radius:14px;font-family:inherit;font-size:14px;color:var(--text);background:var(--bg)}
.settings-block + .settings-block{ margin-top: 8px; }
@media (max-width: 720px){
  .account-stats{
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0;
    padding: 10px 14px;
  }
  .stat-item{
    padding: 12px 4px;
  }
  .stat-item:not(:last-child)::after{
    right: auto;
    left: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: 100%;
    height: 1px;
    opacity: 0.75;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(16,24,40,0.10) 12%,
      rgba(31,92,255,0.12) 50%,
      rgba(16,24,40,0.10) 88%,
      transparent 100%
    );
  }
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;gap:1rem;margin-bottom:22px;}
  .tab-btn{white-space:nowrap;flex:0 0 auto;font-size:0.85rem;padding:0.65rem 0.05rem;}
  .order-history-row{flex-direction:column;align-items:flex-start;padding:14px 0}
  .wl-divider, hr.wl-divider{ margin: 24px 0; }
}

.field input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.file-label{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:8px;font-family:inherit;font-size:14px;color:var(--text);cursor:pointer;background:#fff;width:fit-content}
.file-label:hover{background:#f7f7f8}
.file-name{display:block;margin-top:6px;font-size:13px;color:var(--muted)}

.wrap-cell{white-space:normal;max-width:280px}

/* Подсказки под полями форм (вкл. вкладка «Скидки» в admin/orders.php) */
.field-hint{ font-size: 0.76rem; color: var(--ink-faint); line-height: 1.4; }

/* ===== Вкладка «Купоны» в admin/orders.php (cp-*) ===== */
.cp-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cp-head h2{ margin: 0 0 0.25rem; }
.cp-sub{ margin: 0; color: var(--ink-dim); font-size: 0.9rem; }
.cp-head-actions{ display: flex; gap: 0.5rem; flex-wrap: wrap; }

.cp-stats{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.1rem; }
.cp-stat{ display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 1rem; background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color 0.15s ease, transform 0.15s ease; }
.cp-stat:hover{ border-color: var(--accent); transform: translateY(-1px); }
.cp-stat-label{ font-size: 0.74rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.cp-stat-value{ font-family: var(--font-display); font-size: 1.9rem; line-height: 1.1; color: var(--ink); }
.cp-stat-good .cp-stat-value{ color: var(--good); }
.cp-stat-accent .cp-stat-value{ color: var(--accent); }
.cp-stat-note{ font-size: 0.78rem; color: var(--ink-dim); }

.cp-chips{ display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.9rem; }
.cp-chip{ display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.38rem 0.8rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-card); color: var(--ink-dim); font-size: 0.86rem; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.cp-chip:hover{ border-color: var(--accent); color: var(--ink); }
.cp-chip.is-active{ background: var(--accent); border-color: var(--accent); color: #fff; }
.cp-chip-n{ min-width: 1.4rem; padding: 0 0.4rem; border-radius: 999px; background: var(--bg-raised); color: var(--ink-dim); font-size: 0.74rem; line-height: 1.35rem; text-align: center; font-variant-numeric: tabular-nums; }
.cp-chip.is-active .cp-chip-n{ background: rgba(255, 255, 255, 0.22); color: #fff; }

.cp-filters{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; }
.cp-search{ flex: 1 1 220px; min-width: 180px; }
.cp-search input, .cp-select{ width: 100%; box-sizing: border-box; padding: 0.5rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-card); color: var(--ink); font: inherit; font-size: 0.88rem; }
.cp-select{ width: auto; max-width: 100%; }
.cp-search input:focus, .cp-select:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.cp-sr{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.cp-toolbar{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 0.7rem; font-size: 0.86rem; color: var(--ink-dim); }
.cp-toolbar b{ color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-range-note{ color: var(--ink-faint); margin-left: 0.3rem; }
.cp-sortbox{ display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; }
.cp-per{ display: inline-flex; align-items: center; gap: 0.35rem; }
.cp-per-label{ color: var(--ink-faint); }
.cp-per-btn{ min-width: 2.4rem; padding: 0.3rem 0.6rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-card); color: var(--ink-dim); text-align: center; text-decoration: none; font-variant-numeric: tabular-nums; }
.cp-per-btn:hover{ border-color: var(--accent); color: var(--ink); }
.cp-per-btn.is-active{ background: var(--accent); border-color: var(--accent); color: #fff; }

.cp-bulk{ position: sticky; bottom: 0.9rem; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin: 0 0 0.8rem; padding: 0.6rem 0.85rem; border: 1px solid var(--accent); border-radius: 12px; background: var(--bg-card); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.cp-bulk[hidden]{ display: none; }
.cp-bulk-count{ font-size: 0.9rem; color: var(--ink); }
.cp-bulk-btns{ display: flex; flex-wrap: wrap; gap: 0.4rem; }

.cp-table th{ padding-top: 0.55rem; padding-bottom: 0.55rem; }
.cp-col-check{ width: 2rem; padding-right: 0; }
.cp-col-check input, .cp-check{ width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--accent); }
.cp-sort{ display: inline-flex; align-items: center; gap: 0.3rem; color: inherit; text-decoration: none; }
.cp-sort:hover{ color: var(--ink); }
.cp-sort.is-active{ color: var(--accent-deep); }
.cp-sort-ico{ font-size: 0.7rem; opacity: 0.55; }
.cp-sort.is-active .cp-sort-ico{ opacity: 1; }
.cp-row.is-selected td{ background: var(--accent-dim); }
.cp-row:hover td{ background: var(--bg-raised); }
.cp-row.is-selected:hover td{ background: var(--accent-dim); }

.cp-code{ display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.5rem; border: 1px dashed var(--line-strong); border-radius: 6px; background: var(--bg-raised); color: var(--ink); cursor: pointer; font: inherit; }
.cp-code code{ font-size: 0.86rem; letter-spacing: 0.04em; }
.cp-code:hover{ border-color: var(--accent); }
.cp-copy-ico{ font-size: 0.8rem; color: var(--ink-faint); }
.cp-code.is-copied{ border-color: var(--good); background: var(--good-bg); }
.cp-code.is-copied .cp-copy-ico{ color: var(--good); }

.cp-pill{ display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.76rem; font-weight: 500; line-height: 1.35; white-space: nowrap; background: var(--bg-raised); color: var(--ink-dim); }
.cp-pill-good{ background: var(--good-bg); color: var(--good); }
.cp-pill-bad{ background: var(--bad-bg); color: var(--bad); }
.cp-pill-warn{ background: var(--warn-bg); color: var(--warn); }
.cp-pill-info{ background: var(--accent-dim); color: var(--accent-deep); }
.cp-pill-gift{ background: var(--accent-dim); color: var(--accent-deep); }
.cp-pct{ margin-left: 0.35rem; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }

.cp-used{ display: flex; flex-direction: column; gap: 0.15rem; }
.cp-used-count{ font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.cp-used-count.is-used{ color: var(--good); font-weight: 600; }
.cp-who{ display: block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; color: var(--ink-dim); }
.cp-who-na{ color: var(--ink-faint); }
.cp-who-more{ font-size: 0.74rem; color: var(--ink-faint); }
.cp-comment{ max-width: 220px; white-space: normal; word-break: break-word; }
.cp-created{ color: var(--ink-dim); }
.cp-st-3 .cp-code code, .cp-st-4 .cp-code code{ text-decoration: line-through; color: var(--ink-faint); }

.cp-empty{ padding: 1.6rem 1rem; text-align: center; color: var(--ink-dim); border: 1px dashed var(--line-strong); border-radius: 12px; }
.cp-empty p{ margin: 0 0 0.8rem; }

.cp-pager{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem; margin-top: 1rem; }
.cp-page{ min-width: 2.2rem; padding: 0.38rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-card); color: var(--ink-dim); font-size: 0.86rem; text-align: center; text-decoration: none; font-variant-numeric: tabular-nums; }
a.cp-page:hover{ border-color: var(--accent); color: var(--ink); }
.cp-page.is-active{ background: var(--accent); border-color: var(--accent); color: #fff; }
.cp-page.is-disabled{ opacity: 0.45; }
.cp-page-gap{ color: var(--ink-faint); padding: 0 0.15rem; }

.cp-toast{ position: fixed; left: 50%; bottom: 1.4rem; z-index: 200; transform: translate(-50%, 20px); padding: 0.55rem 1rem; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 0.86rem; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.cp-toast.is-on{ opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px){
  .cp-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-sortbox{ margin-left: 0; }
}
@media (max-width: 720px){
  .cp-table thead{ display: none; }
  .cp-row{ position: relative; }
  .cp-row .cp-col-check{ position: absolute; top: 0.7rem; right: 0.8rem; width: auto; padding: 0; border: 0; }
  .cp-who{ max-width: none; white-space: normal; }
  .cp-comment, .cp-table td.cp-comment{ max-width: none; min-width: 0; flex: 1 1 auto; text-align: left; }
  .cp-sortbox{ display: flex; width: 100%; margin-left: 0; }
  .cp-sortbox .cp-select{ flex: 1 1 auto; min-width: 0; width: 100%; }
}
@media (max-width: 560px){
  .cp-stats{ gap: 0.5rem; }
  .cp-stat{ padding: 0.7rem 0.8rem; }
  .cp-stat-value{ font-size: 1.5rem; }
  .cp-filters .cp-select, .cp-filters .btn{ flex: 1 1 100%; width: 100%; }
  .cp-toolbar{ flex-direction: column; align-items: flex-start; }
  .cp-bulk{ bottom: 0.5rem; }
  .cp-bulk-btns .btn{ flex: 1 1 auto; justify-content: center; }
}

.cp-table th, .cp-table td{ padding-left: 0.5rem; padding-right: 0.5rem; }
.cp-comment{ max-width: 170px; }
.cp-who{ max-width: 190px; }
.cp-table .actions-cell{ flex-direction: column; align-items: stretch; gap: 0.3rem; }
.cp-table .actions-cell form{ margin: 0; }
.cp-table .actions-cell .btn{ width: 100%; justify-content: center; }
.cp-table .actions-cell .btn{ padding: 0.3rem 0.65rem; font-size: 0.8rem; }

/* Бейджи-счётчики в меню */
.nav-badge{ display: inline-block; min-width: 1.25rem; margin-left: 0.4rem; padding: 0 0.4rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.72rem; line-height: 1.25rem; text-align: center; vertical-align: middle; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn.primary:hover, .btn.ghost:hover{ transform: none; }
}