/* Admin workbench and compact emerald administration shell. */

.ops-app {
  --o-text: rgb(var(--color-dark-50));
  --o-text-2: rgb(var(--color-dark-200));
  --o-muted: rgb(var(--color-dark-400));
  --o-line: rgba(var(--color-dark-600), 0.38);
  --o-line-strong: rgba(var(--color-dark-500), 0.6);
  --o-card: rgba(var(--color-dark-900), 0.66);
  --o-raised: rgb(var(--color-dark-900));
  --o-sunken: rgba(var(--color-dark-950), 0.5);
  --o-hover: rgba(var(--color-dark-700), 0.35);
  --o-accent: rgb(var(--color-accent-500));
  --o-accent-soft: rgba(var(--color-accent-500), 0.14);
  --o-accent-text: rgb(var(--color-accent-300));
  --o-ring: 0 0 0 3px rgba(var(--color-accent-500), 0.28);
  --o-ok: #4ade80; --o-ok-bg: rgba(34, 197, 94, 0.13);
  --o-warn: #fbbf24; --o-warn-bg: rgba(251, 191, 36, 0.13);
  --o-bad: #fb7185; --o-bad-bg: rgba(244, 63, 94, 0.12);
  --o-radius: 14px;
  --o-radius-sm: 10px;
  color: var(--o-text);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.light .ops-app {
  --o-line: rgba(var(--color-dark-400), 0.28);
  --o-line-strong: rgba(var(--color-dark-400), 0.5);
  --o-card: #fff;
  --o-raised: #fff;
  --o-sunken: rgba(var(--color-dark-900), 0.55);
  --o-hover: rgba(var(--color-accent-500), 0.06);
  --o-accent-soft: rgba(var(--color-accent-500), 0.1);
  --o-accent-text: rgb(var(--color-accent-700));
  --o-ok: #15803d; --o-warn: #a16207; --o-bad: #be123c;
}
.ops-app button, .ops-app input, .ops-app select, .ops-app textarea { font: inherit; }
.ops-app :focus-visible { outline: none; box-shadow: var(--o-ring); }
.ops-app h2 { margin: 0; font: 700 clamp(22px, 2.2vw, 28px)/1.2 Outfit, Manrope, sans-serif; letter-spacing: -0.3px; }
.ops-app h3 { margin: 0 0 14px; font: 600 17px/1.3 Outfit, Manrope, sans-serif; }
.ops-muted { color: var(--o-muted); font-size: 14px; }
.ops-dim { color: var(--o-muted); }
.ops-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Layout */
.ops-app:not(.ops-app--admin) { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 24px; align-items: start; }
.ops-main { min-width: 0; }
.ops-groups { position: sticky; top: 104px; }

/* Section header */
.ops-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.ops-head p { margin: 4px 0 0; }
.ops-head-text { flex: 1; min-width: 200px; }
.ops-head-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ops-head-actions .icon { width: 17px; height: 17px; }
.ops-head-icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--o-accent-soft); color: var(--o-accent-text);
  border: 1px solid rgba(var(--color-accent-500), 0.25);
}
.ops-head-icon .icon { width: 22px; height: 22px; }
.ops-back {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--o-radius-sm);
  border: 1px solid var(--o-line); background: var(--o-card); color: var(--o-text-2);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.ops-back:hover { border-color: var(--o-line-strong); color: var(--o-text); }
.ops-back .icon { width: 20px; height: 20px; }

/* Side navigation (non-admin workbench) */
.ops-groups .ops-search { margin-bottom: 10px; }
.ops-nav { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 180px); overflow: auto; scrollbar-width: thin; padding-right: 4px; }
.ops-nav .ops-button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px;
  padding: 0 10px; border: 0; border-radius: var(--o-radius-sm);
  background: transparent; color: var(--o-text-2); font-size: 14px; font-weight: 500; text-align: left;
}
.ops-nav .ops-button .icon { width: 18px; height: 18px; color: var(--o-muted); flex-shrink: 0; }
.ops-nav .ops-button > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-nav .ops-button:hover { background: var(--o-hover); color: var(--o-text); }
.ops-nav .ops-button.active { background: var(--o-accent-soft); color: var(--o-text); font-weight: 600; box-shadow: inset 2px 0 0 var(--o-accent); }
.ops-nav .ops-button.active .icon { color: var(--o-accent-text); }
.ops-count { min-width: 24px; padding: 1px 7px; border-radius: 99px; background: var(--o-hover); color: var(--o-muted); font-size: 11px; font-weight: 600; text-align: center; }

/* Cards */
.ops-card { border: 1px solid var(--o-line); border-radius: var(--o-radius); background: var(--o-card); padding: 22px; margin-bottom: 18px; }
.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 18px; }
.ops-button.ops-section-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; min-height: 104px; padding: 18px; border-radius: var(--o-radius); text-align: left; }
.ops-button.ops-section-card .icon { width: 22px; height: 22px; margin-bottom: 6px; color: var(--o-accent-text); }
.ops-section-card strong { font-size: 15px; }
.ops-section-card .ops-muted { font-size: 12.5px; font-weight: 500; }
.ops-button.ops-section-card:hover { background: var(--o-card); border-color: rgba(var(--color-accent-500), 0.55); }
.ops-section-card[hidden] { display: none; }
.ops-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ops-stat { padding: 14px 16px; border: 1px solid var(--o-line); border-radius: 12px; background: var(--o-sunken); }
.ops-stat small { display: block; color: var(--o-muted); font-size: 12.5px; }
.ops-stat strong { display: block; margin-top: 6px; font: 700 24px/1.1 Outfit, Manrope, sans-serif; }
.ops-subcard { margin-top: 18px; }
.ops-subcard h5 { margin: 18px 0 10px; font-size: 14px; }

/* Buttons */
.ops-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--o-line); border-radius: var(--o-radius-sm);
  background: var(--o-card); color: var(--o-text);
  font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.ops-button:hover { border-color: var(--o-line-strong); background: var(--o-hover); }
.ops-button:disabled { opacity: .45; cursor: wait; }
.ops-button .icon { width: 17px; height: 17px; }
.ops-primary { border-color: transparent; background: var(--o-accent); color: #fff; }
.ops-primary:hover { border-color: transparent; background: rgb(var(--color-accent-600)); }
.ops-danger { border-color: transparent; background: #e11d48; color: #fff; }
.ops-danger:hover { border-color: transparent; background: #be123c; }
.ops-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 4px; }
.ops-toolbar .ops-primary, .ops-toolbar .ops-danger { min-height: 44px; padding: 0 22px; }
.ops-toolbar--quiet { margin-top: 14px; }
.ops-toolbar--quiet:empty { display: none; }

/* Operation chips (HTTP method dot) */
.ops-actions { display: grid; gap: 12px; margin-bottom: 6px; }
.ops-actions-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ops-actions-title, .ops-form-section, .ops-menu-title {
  color: var(--o-muted); font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
}
.ops-form-section { margin: 20px 0 10px; }
.ops-op { gap: 8px; min-height: 34px; padding: 0 12px; font-size: 13px; }
.ops-op i, .ops-menu-item i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--m, #34d399); }
.ops-op.active { border-color: var(--o-accent); background: var(--o-accent-soft); }
.ops-m-get { --m: #60a5fa; }
.ops-m-post { --m: #34d399; }
.ops-m-put, .ops-m-patch { --m: #fbbf24; }
.ops-m-delete { --m: #fb7185; }

/* Forms */
.ops-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.ops-full, .ops-object { grid-column: 1 / -1; }
.ops-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--o-text-2); }
.ops-field small, .ops-json-hint { color: var(--o-muted); font-size: 12px; font-weight: 400; line-height: 1.45; }
.ops-json-hint { white-space: pre-wrap; }
.ops-field input, .ops-field textarea, .ops-field select, .ops-search, .ops-select {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--o-line); border-radius: var(--o-radius-sm);
  background: var(--o-sunken); color: var(--o-text);
  font-size: 14px; font-weight: 500; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ops-field input:hover, .ops-field textarea:hover, .ops-field select:hover, .ops-search:hover { border-color: var(--o-line-strong); }
.ops-field input:focus, .ops-field textarea:focus, .ops-field select:focus, .ops-search:focus { border-color: var(--o-accent); box-shadow: var(--o-ring); }
.ops-field textarea { min-height: 116px; padding: 10px 12px; resize: vertical; font: 13px/1.5 "IBM Plex Mono", ui-monospace, monospace; }
.ops-field input[type=checkbox] { width: 18px; height: 18px; min-height: 0; accent-color: var(--o-accent); }
.ops-object { border: 1px solid var(--o-line); border-radius: 12px; padding: 14px 16px 16px; }
.ops-object legend { padding: 0 6px; font-size: 13px; font-weight: 600; }
.ops-dirty { border-color: rgb(var(--color-accent-400)) !important; }
.ops-check { display: flex; align-items: center; gap: 8px; color: var(--o-muted); font-size: 13px; font-weight: 500; }
.ops-confirm { margin-top: 16px; padding: 14px; border: 1px solid rgba(244, 63, 94, .35); border-radius: 12px; background: var(--o-bad-bg); font-size: 14px; font-weight: 500; }
.ops-confirm label { display: flex; gap: 10px; align-items: flex-start; }
.ops-confirm input { width: 18px; height: 18px; margin-top: 2px; accent-color: #f43f5e; }
.ops-form-title { margin: 20px 0 4px; font: 600 17px/1.3 Outfit, Manrope, sans-serif; }

/* Search */
.ops-search { margin-bottom: 12px; }
.ops-searchbox {
  display: flex; align-items: center; gap: 8px; flex: 1; max-width: 420px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--o-line); border-radius: var(--o-radius-sm); background: var(--o-sunken); color: var(--o-muted);
  transition: border-color .15s, box-shadow .15s;
}
.ops-searchbox:focus-within { border-color: var(--o-accent); box-shadow: var(--o-ring); }
.ops-searchbox .icon { width: 17px; height: 17px; }
.ops-app .ops-searchbox .ops-search { flex: 1; min-height: 38px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }

/* View tabs */
.ops-views { display: flex; gap: 4px; overflow-x: auto; margin: 0 0 14px; padding: 4px; border: 1px solid var(--o-line); border-radius: 12px; background: var(--o-card); scrollbar-width: none; }
.ops-views[hidden] { display: none; }
.ops-tab {
  flex-shrink: 0; min-height: 36px; padding: 0 14px; border: 0; border-radius: 8px;
  background: transparent; color: var(--o-muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.ops-tab:hover { color: var(--o-text); background: var(--o-hover); }
.ops-tab.active { background: var(--o-accent-soft); color: var(--o-accent-text); }

/* List card + filters */
.ops-list { padding: 0; overflow: hidden; }
.ops-list .ops-filters { padding: 0 20px; }
.ops-list .ops-filters:empty { display: none; }
.ops-list .ops-list-result { padding: 18px 20px 20px; }
.ops-filters-box { margin-top: 16px; border: 1px solid var(--o-line); border-radius: 12px; }
.ops-filters-box[hidden] { display: none; }
.ops-filters-box summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--o-text-2); font-size: 14px; font-weight: 600; list-style: none; cursor: pointer; }
.ops-filters-box summary::-webkit-details-marker { display: none; }
.ops-filters-box summary .icon { width: 17px; height: 17px; color: var(--o-accent-text); }
.ops-filters-box[open] summary { border-bottom: 1px solid var(--o-line); }
.ops-filters-box form { padding: 14px; }
.ops-filters-box .ops-toolbar { margin-top: 12px; }
.ops-filters-box .ops-toolbar .ops-primary { min-height: 40px; padding: 0 18px; }

/* Results */
.ops-result-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.ops-result-head h3 { margin: 0; flex: 1; }
.ops-result-head .ops-search { max-width: 300px; min-height: 40px; margin: 0; }
.ops-result dl, .ops-kv { display: grid; grid-template-columns: minmax(150px, .9fr) 2fr; margin: 4px 0 0; font-size: 14px; }
.ops-result dt, .ops-result dd, .ops-kv dt, .ops-kv dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--o-line); }
.ops-result dt, .ops-kv dt { color: var(--o-muted); padding-right: 12px; }
.ops-result dd, .ops-kv dd { overflow-wrap: anywhere; }
.ops-result pre {
  max-height: 500px; overflow: auto; margin: 0; padding: 14px;
  border: 1px solid var(--o-line); border-radius: 12px; background: var(--o-sunken);
  font: 12.5px/1.55 "IBM Plex Mono", ui-monospace, monospace; white-space: pre-wrap; word-break: break-word;
}
.ops-record { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border: 1px solid rgba(var(--color-accent-500), .35); border-radius: 12px; background: var(--o-accent-soft); }
.ops-record strong { flex: 1; }
.ops-technical { margin-top: 16px; color: var(--o-muted); font-size: 13px; }
.ops-technical summary { cursor: pointer; }
.ops-technical code { overflow-wrap: anywhere; }
.ops-pager { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 16px; font-size: 13px; color: var(--o-muted); }
.ops-empty { padding: 40px 10px; text-align: center; color: var(--o-muted); }

/* Tables */
.ops-table-wrap { overflow: auto; margin: 14px -22px -4px; border-top: 1px solid var(--o-line); }
.ops-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ops-table th {
  position: sticky; top: 0; z-index: 1; padding: 10px 14px; border-bottom: 1px solid var(--o-line);
  background: var(--o-raised); color: var(--o-muted);
  font-size: 11px; font-weight: 700; letter-spacing: .7px; text-align: left; text-transform: uppercase; white-space: nowrap;
}
.ops-table td { max-width: 260px; padding: 12px 14px; border-bottom: 1px solid var(--o-line); vertical-align: middle; }
.ops-table th:first-child, .ops-table td:first-child { padding-left: 22px; }
.ops-table th:last-child, .ops-table td:last-child { padding-right: 22px; text-align: right; }
.ops-table tbody tr { cursor: default; transition: background-color .12s; }
.ops-table tbody tr:hover { background: var(--o-hover); }
.ops-table tbody tr.is-clickable { cursor: pointer; }
.ops-table tbody tr:last-child td { border-bottom: 0; }
.ops-list .ops-table-wrap { margin: 14px -20px -20px; }
.ops-list .ops-table th:first-child, .ops-list .ops-table td:first-child { padding-left: 20px; }
.ops-list .ops-table th:last-child, .ops-list .ops-table td:last-child { padding-right: 20px; }
.ops-subcard .ops-table-wrap, .ops-drawer .ops-table-wrap { margin: 10px 0 0; border: 1px solid var(--o-line); border-radius: 12px; }
.ops-drawer .ops-table th:first-child, .ops-drawer .ops-table td:first-child { padding-left: 12px; }
.ops-drawer .ops-table th:last-child, .ops-drawer .ops-table td:last-child { padding-right: 12px; text-align: left; }
.ops-cell { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-open {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--o-line); background: transparent; color: var(--o-muted); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.ops-open .icon { width: 16px; height: 16px; }
tr:hover .ops-open { color: var(--o-text); border-color: var(--o-line-strong); }
.ops-mono { font: 12.5px "IBM Plex Mono", ui-monospace, monospace; color: var(--o-text-2); }
.ops-money { font-weight: 700; white-space: nowrap; }

/* Status */
.ops-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: var(--o-hover); color: var(--o-text-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ops-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ops-pill--ok { background: var(--o-ok-bg); color: var(--o-ok); }
.ops-pill--warn { background: var(--o-warn-bg); color: var(--o-warn); }
.ops-pill--bad { background: var(--o-bad-bg); color: var(--o-bad); }
.ops-pill--info { background: var(--o-accent-soft); color: var(--o-accent-text); }
.ops-alert { padding: 12px 14px; border: 1px solid rgba(244, 63, 94, .35); border-radius: 12px; background: var(--o-bad-bg); color: #fda4af; font-size: 14px; white-space: pre-wrap; }
.ops-success { border-color: rgba(34, 197, 94, .3); background: var(--o-ok-bg); color: #86efac; }
.light .ops-alert { color: #be123c; }
.light .ops-success { color: #15803d; }

/* "More actions" menu */
.ops-menu-wrap { position: relative; }
.ops-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; padding: 6px;
  border: 1px solid var(--o-line); border-radius: 12px; background: var(--o-raised);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}
.light .ops-menu { box-shadow: 0 18px 48px rgba(20, 60, 40, .14); }
.ops-menu-title { padding: 10px 10px 6px; }
.ops-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--o-text); font-size: 14px; text-align: left; cursor: pointer; }
.ops-menu-item:hover { background: var(--o-hover); }
.ops-menu-item span { flex: 1; }
.ops-menu-item small { color: var(--o-muted); font-size: 11px; }

/* Loading */
.ops-loading { display: flex; justify-content: center; gap: 6px; padding: 44px 0; }
.ops-loading span { width: 8px; height: 8px; border-radius: 50%; background: var(--o-accent); animation: ops-bounce 1s infinite ease-in-out; }
.ops-loading span:nth-child(2) { animation-delay: .15s; }
.ops-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes ops-bounce { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* Record drawer — opaque backdrop instead of backdrop-filter; motion is transform/opacity only */
body.ops-drawer-open { overflow: hidden; }
.ops-drawer { position: fixed; inset: 0; z-index: 80; }
.ops-drawer[hidden] { display: none; }
.ops-drawer-backdrop { position: absolute; inset: 0; background: rgba(2, 16, 9, .7); animation: ops-fade .18s ease-out; }
.light .ops-drawer-backdrop { background: rgba(14, 37, 23, .35); }
.ops-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
  width: min(620px, 100vw); border-left: 1px solid var(--o-line);
  background: rgb(var(--color-dark-950)); box-shadow: -24px 0 64px rgba(0, 0, 0, .4);
  animation: ops-slide .22s cubic-bezier(.2, .8, .2, 1);
}
.light .ops-drawer-panel { background: #f7fbf8; box-shadow: -24px 0 64px rgba(20, 60, 40, .12); }
@keyframes ops-slide { from { transform: translateX(32px); opacity: 0; } }
@keyframes ops-fade { from { opacity: 0; } }
.ops-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--o-line); }
.ops-drawer-head h3 { margin: 2px 0 0; font: 700 20px/1.25 Outfit, Manrope, sans-serif; overflow-wrap: anywhere; }
.ops-drawer-kicker { color: var(--o-accent-text); font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; }
.ops-drawer-body { flex: 1; overflow-y: auto; padding: 6px 22px 30px; }
.ops-drawer-body .ops-fields { grid-template-columns: 1fr; }
.ops-drawer-bar {
  position: sticky; top: -6px; z-index: 5; display: flex; align-items: center; gap: 8px;
  margin: 0 -22px; padding: 12px 22px; border-bottom: 1px solid var(--o-line); background: rgb(var(--color-dark-950));
}
.light .ops-drawer-bar { background: #f7fbf8; }
.ops-drawer-tabs { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ops-drawer-tabs .ops-tab { min-height: 34px; padding: 0 12px; font-size: 13px; }
.ops-drawer-bar .ops-menu-wrap > .ops-button { min-height: 36px; }
.ops-record-actions { display: grid; gap: 10px; margin: 16px 0 6px; padding: 14px; border: 1px solid var(--o-line); border-radius: 12px; background: var(--o-card); }
.ops-record-actions .ops-actions-title { margin-top: 2px; }

@media (max-width: 1100px) {
  .ops-app:not(.ops-app--admin) { grid-template-columns: minmax(0, 1fr); }
  .ops-groups { position: static; }
  .ops-groups .ops-nav { flex-direction: row; max-height: none; overflow: auto; }
  .ops-groups .ops-nav .ops-button { width: auto; flex-shrink: 0; }
}
@media (max-width: 700px) {
  .ops-card { padding: 16px; }
  .ops-fields, .ops-result dl, .ops-kv { grid-template-columns: 1fr; }
  .ops-result dt, .ops-kv dt { padding-bottom: 0; border: 0; }
  .ops-head-icon { display: none; }
  .ops-head-actions { width: 100%; }
  .ops-head-actions > .ops-button, .ops-menu-wrap { flex: 1; }
  .ops-head-actions .ops-button { padding: 0 10px; font-size: 13px; white-space: nowrap; }
  .ops-menu-wrap > .ops-button { width: 100%; }
  .ops-menu { left: 0; right: auto; }
  .ops-toolbar .ops-primary, .ops-toolbar .ops-danger { width: 100%; }
  .ops-table-wrap { margin: 12px -16px -4px; }
  .ops-table th:first-child, .ops-table td:first-child { padding-left: 16px; }
  .ops-table th:last-child, .ops-table td:last-child { padding-right: 16px; }
  .ops-list .ops-filters { padding: 0 16px; }
  .ops-list .ops-list-result { padding: 16px; }
  .ops-list .ops-table-wrap { margin: 12px -16px -16px; }
  .ops-drawer-head { padding: 14px 16px; }
  .ops-drawer-body { padding: 4px 16px 26px; }
  .ops-drawer-bar { margin: 0 -16px; padding: 10px 16px; }
}

/* KPI tiles and search shared by the stats pages */
.ka { display: grid; gap: 20px; }
.ka a { color: inherit; text-decoration: none; }
.au-clear kbd { padding: 2px 6px; border: 1px solid var(--o-line); border-radius: 5px; color: var(--o-muted); font: 500 11px/1.4 "IBM Plex Mono", monospace; }

.ka-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ka-kpi {
  position: relative; display: flex; flex-direction: column; padding: 16px 18px;
  border: 1px solid var(--o-line); border-radius: var(--o-radius); background: var(--o-card);
  transition: border-color .15s;
}
.ka-kpi:hover { border-color: var(--o-line-strong); }
.ka-kpi-top { display: flex; align-items: center; gap: 8px; }
.ka-kpi-icon { display: grid; color: var(--o-muted); }
.ka-kpi-icon .icon { width: 16px; height: 16px; }
.ka-kpi-label { color: var(--o-muted); font-size: 13px; font-weight: 500; }
.ka-kpi strong { margin-top: 12px; font: 700 28px/1.1 Outfit, Manrope, sans-serif; letter-spacing: -0.4px; }
.ka-kpi small { margin-top: 6px; color: var(--o-muted); font-size: 12.5px; }

/* ---------- Admin users (/admin/users, original-admin-users.js) ---------- */
.au-icon-btn { width: 40px; padding: 0; flex: none; }
.au-toolbar { margin-bottom: 12px; }
.au-controls { display: grid; gap: 10px; }
.au-search-row { display: flex; align-items: center; gap: 8px; }
.ops-searchbox.au-search { max-width: none; }
.au-clear { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--o-muted); cursor: pointer; }
.au-clear .icon { width: 15px; height: 15px; }
.au-pop { position: relative; display: flex; }
.au-pop > summary.ops-button { display: flex; }
.au-pop > summary, .au-group > summary { list-style: none; }
.au-pop > summary::-webkit-details-marker, .au-group > summary::-webkit-details-marker { display: none; }
.au-pop[open] > summary { border-color: var(--o-accent); }
.au-filter-btn.is-active { border-color: rgba(var(--color-accent-500), .5); background: var(--o-accent-soft); color: var(--o-accent-text); }
.au-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--o-accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.au-menu--sort { width: auto; min-width: 15rem; }
.au-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; padding: 4px 6px 8px 10px; border-bottom: 1px solid var(--o-line); font-size: 13px; font-weight: 600; }
.au-xs { min-height: 28px; padding: 0 10px; font-size: 12px; }
.au-group-sum { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.au-group-sum:hover { background: var(--o-hover); }
.au-group-label { flex: 1; color: var(--o-text-2); font-size: 14px; }
.au-group-value { max-width: 55%; overflow: hidden; color: var(--o-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.au-group-value.is-set { color: var(--o-accent-text); font-weight: 600; }
.au-group-sum .icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--o-muted); }
.au-group[open] .au-group-sum .icon { transform: rotate(180deg); }
.au-options { max-height: 18rem; overflow-y: auto; margin: 2px 0 6px 10px; padding-left: 6px; border-left: 1px solid var(--o-line); }
.ops-menu-item.is-selected { background: var(--o-accent-soft); color: var(--o-accent-text); font-weight: 600; }
.ops-menu-item .icon { width: 15px; height: 15px; flex-shrink: 0; }
.ops-views.au-views { margin: 0; }
.au-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.au-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--o-line); border-radius: 99px; background: var(--o-card); color: var(--o-text-2); font-size: 12.5px; cursor: pointer; }
.au-chip:hover { border-color: var(--o-line-strong); color: var(--o-text); }
.au-chip .icon { width: 12px; height: 12px; }
.au-shown { margin: 0 0 10px; color: var(--o-muted); font-size: 13px; }

.au-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 4px 0 18px; }
.au-kpi-sub { color: var(--o-accent-text); }

/* No overflow:hidden here (unlike other .ops-card lists): a row's quick-actions
   dropdown must be able to escape the card bounds, e.g. for the last row. Corners
   are rounded on the edge rows instead of clipped by the container. */
.ops-card.au-table { padding: 0; margin: 0; }
.au-row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) 128px 118px 40px; align-items: center; gap: 16px;
  min-height: 64px; padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--o-line);
  transition: background-color .12s;
}
.au-row:last-child { border-bottom: 0; border-radius: 0 0 var(--o-radius) var(--o-radius); }
.au-row:hover { background: var(--o-hover); }
.au-row--head { min-height: 0; padding-block: 10px; border-radius: var(--o-radius) var(--o-radius) 0 0; background: var(--o-raised); color: var(--o-muted); font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.au-right { text-align: right; }
.au-user { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; border-radius: 8px; }
.au-user:hover .au-name { color: var(--o-accent-text); }
.au-avatar {
  position: relative; display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--o-accent-soft); color: var(--o-accent-text); font-size: 14px; font-weight: 700;
}
.au-avatar.is-muted { background: var(--o-hover); color: var(--o-muted); }
.au-avatar--1 { background: rgba(52, 211, 153, .16); color: #34d399; }
.au-avatar--2 { background: rgba(96, 165, 250, .16); color: #60a5fa; }
.au-avatar--3 { background: rgba(45, 212, 191, .16); color: #2dd4bf; }
.au-avatar--4 { background: rgba(251, 191, 36, .16); color: #fbbf24; }
.au-avatar--5 { background: rgba(244, 114, 182, .16); color: #f472b6; }
.au-online { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border: 2px solid var(--o-raised); border-radius: 50%; background: #22c55e; }
.au-user-text { flex: 1; min-width: 0; }
.au-name { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; transition: color .12s; }
.au-name--wrap { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
.au-meta { overflow: hidden; margin-top: 2px; color: var(--o-muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.au-tg { font: 12px "IBM Plex Mono", ui-monospace, monospace; }
.au-sub { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.au-sub-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.au-tariff { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.au-more { flex-shrink: 0; padding: 1px 7px; border-radius: 99px; background: var(--o-hover); color: var(--o-muted); font-size: 11px; font-weight: 600; }
.au-pill { flex-shrink: 0; font-size: 11.5px; }
.au-caption { flex-shrink: 0; color: var(--o-muted); font-size: 12px; white-space: nowrap; }
.au-traffic { display: flex; align-items: center; gap: 10px; min-width: 0; }
.au-bar { flex: none; width: 120px; height: 4px; overflow: hidden; border-radius: 99px; background: var(--o-hover); }
.au-traffic.is-fluid .au-bar { flex: 1; min-width: 48px; width: auto; }
.au-bar-fill { height: 100%; border-radius: inherit; background: var(--o-accent); }
.au-bar-fill.is-warn { background: #f59e0b; }
.au-bar-fill.is-bad { background: #f43f5e; }
.au-traffic-text { flex-shrink: 0; color: var(--o-muted); font-size: 12px; white-space: nowrap; }
.au-activity { color: var(--o-text-2); font-size: 13.5px; white-space: nowrap; }
.au-activity.is-never { color: var(--o-muted); }
.au-finance { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.au-balance { font-size: 14px; font-weight: 600; text-align: right; white-space: nowrap; }
.au-spent { color: var(--o-muted); font-size: 11.5px; white-space: nowrap; }
.au-row-menu { justify-self: end; }
.au-row-menu > button { width: 34px; height: 34px; padding: 0; opacity: .7; }
.au-row:hover .au-row-menu > button, .au-row-menu[data-open] > button { opacity: 1; }
/* Beats the generic narrow-screen ".ops-menu{left:0;right:auto}" rule (meant for a
   full-width toggle elsewhere): this wrap is a small button pinned to the right edge
   of its row/card, so its dropdown must stay right-anchored at every width too. */
.au-row-menu .ops-menu { left: auto; right: 0; }
.au-cards { display: none; }
.ops-card.au-card { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px; }
.au-card:active { background: var(--o-hover); }
.au-card .au-user { padding-right: 32px; }
.au-card .au-row-menu { position: absolute; top: 10px; right: 10px; }
.au-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.au-sentinel { height: 8px; }
.au-load-more { display: flex; margin: 14px auto 0; }
.au-load-more[hidden], .au-error:empty { display: none; }
.au-error { margin: 12px 0 0; color: var(--o-bad); font-size: 13.5px; }

@media (max-width: 1279px) {
  .ka-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .au-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .au-caption { display: none; }
  .au-caption.au-caption--show { display: inline; }
}
@media (max-width: 767px) {
  .au-table { display: none; }
  .au-cards { display: grid; gap: 8px; }
  .au-toolbar { position: sticky; top: 64px; z-index: 20; margin: 0 -16px 10px; padding: 8px 16px 10px; border-bottom: 1px solid var(--o-line); background: rgb(var(--color-dark-950)); }
  .au-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
}
@media (max-width: 700px) {
  .au-hide-sm { display: none; }
  .ka-kpi strong { font-size: 24px; }
  .au .au-head-actions { width: auto; }
}

/* ---------- Admin user profile (/admin/users/:id, admin-user.js) ---------- */
.ou-avatar { width: 48px; height: 48px; font-size: 19px; }
.ou-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ou-head .ops-head-actions .ops-button { min-height: 38px; }
.ou-head .ops-head-actions .icon { width: 16px; height: 16px; }
.ou-danger-text { color: var(--o-bad); }
.ou-danger-text:hover { border-color: rgba(244, 63, 94, .5); }
.ops-button.is-armed { border-color: transparent; background: #e11d48; color: #fff; }
.ou-message { display: grid; gap: 4px; }
.ou-message[hidden] { display: none; }
.ou-kpis { margin-bottom: 18px; }
.ka-kpi strong.ou-kpi-small { font-size: 20px; }
.ou-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.ou-col { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; min-width: 0; }
.ops-card.ou-card { margin: 0; padding: 18px; }
.ou-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ops-app .ou-card-head h3 { flex: 1; margin: 0; font: 600 15px/1.3 Manrope, sans-serif; }
.ou-empty { margin: 0 0 12px; }
.ou-link { color: var(--o-accent-text); font-size: 13px; text-decoration: none; }
.ou-link:hover { text-decoration: underline; }

.ou-sub { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; padding: 14px; margin-bottom: 12px; border: 1px solid var(--o-line); border-radius: 12px; background: var(--o-sunken); }
.ou-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ou-sub-head strong { font-size: 15px; }
.ou-sub .ops-kv { font-size: 13.5px; }
.ou-sub .ops-kv dt, .ou-sub .ops-kv dd { padding: 7px 0; }
.ou-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.ou-mini { display: flex; align-items: stretch; gap: 0; }
.ou-mini input, .ou-mini select {
  min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--o-line); border-right: 0; border-radius: 8px 0 0 8px;
  background: var(--o-card); color: var(--o-text); font-size: 13.5px; outline: none;
}
.ou-mini input[type=number] { width: 72px; }
.ou-mini select { max-width: 170px; }
.ou-mini input:focus, .ou-mini select:focus { border-color: var(--o-accent); }
.ou-mini > .ops-button { min-height: 36px; padding: 0 12px; border-radius: 0 8px 8px 0; font-size: 13px; white-space: nowrap; }
.ou-mini--wide { flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ou-mini--wide input, .ou-mini--wide select, .ou-mini--wide > .ops-button { border: 1px solid var(--o-line); border-radius: 8px; }
.ou-mini--wide > .ops-primary { border-color: transparent; }
.ou-sub-foot { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.ou-sub-foot .ops-button { min-height: 34px; padding: 0 12px; font-size: 13px; }
.ou-sub-foot .icon { width: 15px; height: 15px; }
.ou-create > summary { list-style: none; display: inline-flex; min-height: 36px; font-size: 13.5px; }
.ou-create > summary::-webkit-details-marker { display: none; }
.ou-create > summary .icon { width: 15px; height: 15px; }

.ou-list { margin: 0; padding: 0; list-style: none; }
.ou-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--o-line); }
.ou-list li:last-child { border-bottom: 0; }
.ou-list li > div { display: grid; gap: 2px; min-width: 0; }
.ou-list strong { overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ou-list small { font-size: 12px; }
.ou-plus { color: var(--o-ok); }
.ou-minus { color: var(--o-text-2); }

.ou-balance { display: grid; gap: 12px; }
.ou-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--o-line); border-radius: 10px; background: var(--o-sunken); }
.ou-seg label { position: relative; }
.ou-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ou-seg span { display: grid; place-items: center; min-height: 32px; border-radius: 7px; color: var(--o-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ou-seg input:checked + span { background: var(--o-card); color: var(--o-text); box-shadow: 0 0 0 1px var(--o-line); }
.ou-seg input:focus-visible + span { box-shadow: var(--o-ring); }

/* Tabs (reuses .ops-views/.ops-tab from the users list) + per-tab body */
.ou-tabs { margin: 18px 0 16px; }
.ou-tab-body { display: grid; gap: 18px; }
.ou-row-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ou-row-form .ops-field { flex: 1; min-width: 140px; margin: 0; }
.ou-row-form input, .ou-row-form select { min-height: 36px; }
.ou-link-btn { border: 0; background: transparent; padding: 0; color: var(--o-accent-text); font-size: 13px; font-weight: 600; cursor: pointer; }
.ou-link-btn:hover { text-decoration: underline; }
.ou-link-btn:disabled { opacity: .5; cursor: wait; text-decoration: none; }

/* Activity feed */
.ou-feed { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ou-feed li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--o-line); }
.ou-feed li:last-child { border-bottom: 0; }
.ou-feed-icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; margin-top: 1px; border-radius: 9px; background: var(--o-hover); color: var(--o-muted); }
.ou-feed-icon .icon { width: 16px; height: 16px; }
.ou-feed-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ou-feed-title { font-size: 14px; font-weight: 500; }
.ou-feed-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--o-muted); font-size: 12px; }
.ou-feed-amount { flex-shrink: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; }

/* Referral list rows (reuses .au-avatar) */
.ou-ref-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--o-line); }
.ou-ref-row:last-child { border-bottom: 0; }
.ou-ref-row > a { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.ou-ref-row > a:hover .ou-list strong, .ou-ref-row > a:hover strong { color: var(--o-accent-text); }
.ou-ref-row strong { display: block; overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ou-ref-row small { display: block; overflow: hidden; color: var(--o-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1100px) {
  .ou-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .ou-head .ops-head-actions { width: 100%; }
  .ou-head .ops-head-actions > .ops-button { flex: 1 1 auto; }
  .ou-avatar { display: none; }
}

/* Admin palette defaults (admin-v2.css redefines them) and section tokens. */
.am-shell { --am-bg: #081410; --am-side: #0d1d16; --am-surface: #10221b; --am-sunken: #0b1913; --am-hover: #193128; --am-selected: #153c2c; --am-line: #2a4035; --am-text: #e8f3ec; --am-text-2: #c3d6cb; --am-muted: #a0b6aa; --am-accent: #6ee7b7; --am-shadow: 0 1px 0 rgba(255,255,255,.025); min-height: 100dvh; color: var(--am-text); background: var(--am-bg); }
html.light .am-shell, html[data-theme="light"] .am-shell { --am-bg: #f1f6f3; --am-side: #fff; --am-surface: #fff; --am-sunken: #f5f9f6; --am-hover: #edf5ef; --am-selected: #e1f2e7; --am-line: #d9e5dd; --am-text: #152e1e; --am-text-2: #3a5643; --am-muted: #5d7565; --am-accent: #047857; --am-shadow: 0 2px 8px rgba(20,60,40,.025); }
.am-main { max-width: 1520px; margin: 0 auto; padding: 24px 28px; }
.am-main .ops-app { --o-radius: 12px; --o-radius-sm: 8px; --o-card: var(--am-surface); --o-raised: var(--am-surface); --o-sunken: var(--am-sunken); --o-hover: var(--am-hover); --o-line: var(--am-line); --o-line-strong: var(--am-muted); --o-text: var(--am-text); --o-text-2: var(--am-text-2); --o-muted: var(--am-muted); --o-accent-text: var(--am-accent); }
.am-main .ops-app h2 { font-size: 24px; letter-spacing: -.5px; line-height: 1.25; }
.am-main .ops-head { margin-bottom: 20px; }
.am-main .ops-head-icon { width: 36px; height: 36px; border-radius: 8px; }
.am-main .ops-button { min-height: 36px; border-radius: 8px; font-size: 12.5px; }
.am-main .ops-card { border-radius: var(--o-radius); background: var(--am-surface); box-shadow: var(--am-shadow); }
.am-main .ops-table th { padding-top: 12px; padding-bottom: 12px; font-size: 11px; text-transform: none; }
.am-main .ops-table td { padding-top: 12px; padding-bottom: 12px; font-size: 13px; line-height: 1.45; }
.am-main .ops-table-wrap { border-radius: 8px; }
.am-main .ops-back { width: 32px; height: 32px; border-radius: 7px; }
.am-main .ka-kpis { gap: 12px; margin-bottom: 20px; }
.am-main .ka-kpi { padding: 16px; min-height: 120px; border: 1px solid var(--am-line); border-radius: var(--o-radius); box-shadow: var(--am-shadow); background: var(--am-surface); }
.am-main .ka-kpi-top { justify-content: space-between; }
.am-main .ka-kpi-icon { place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--am-accent); background: var(--am-selected); }
.am-main .ka-kpi strong { font-size: 28px; letter-spacing: -.8px; }
.am-main .ka-kpi small { font-size: 11.5px; color: var(--am-muted); line-height: 1.5; }
.am-main .ka-kpi-label { font-size: 12px; }
.am-main .au-kpis { gap: 10px; }
.am-main .au-kpis .ka-kpi { padding: 14px; min-height: 115px; }
.am-main .au-kpis .ka-kpi strong { font-size: 24px; }
.am-main .au-avatar { width: 34px; height: 34px; border-radius: 8px; background: var(--am-selected); color: var(--am-accent); }
.am-main .au-toolbar { padding: 12px; border: 1px solid var(--am-line); border-radius: var(--o-radius); background: var(--am-surface); }
.am-main .au-name { font-size: 13px; }
.am-main .au-table td { padding-top: 12px; padding-bottom: 12px; }
.am-main .au-tabs, .am-main .au-view-tabs { gap: 4px; }
.am-shell :focus-visible { outline: 2px solid var(--am-accent); outline-offset: 3px; }
@media (max-width: 1199px) { .am-main .ka-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } .am-main .au-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 999px) { .am-main { padding: 22px 18px; } }
@media (max-width: 639px) { .am-main { padding: 18px 12px; } .am-main .ka-kpis, .am-main .au-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } .am-main .ka-kpi { padding: 13px; min-height: 115px; } .am-main .ka-kpi strong { font-size: 24px; } .am-main .ka-kpi small { font-size: 10px; } .am-main .ops-head { gap: 10px; } .am-main .ops-head-text { min-width: 150px; } .am-main .ops-head-actions { width: 100%; } .am-main .ops-head-actions .ops-menu-wrap { margin-left: auto; } }

.am-main .ops-drawer-panel { width: min(680px,100vw); }
.am-main .ops-drawer-body .ops-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ops-advanced { border: 1px solid var(--o-line); border-radius: 8px; padding: 12px; }
.ops-advanced > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--o-muted); font-size: 12px; }
.ops-advanced[open] > .ops-fields { margin-top: 16px; }
.ops-advanced > summary::before { content: '+'; color: var(--o-accent-text); }
.ops-advanced[open] > summary::before { content: '−'; }
.am-main .ops-drawer-backdrop { background: rgba(2,16,9,.65); }
html.light .am-main .ops-drawer-backdrop { background: rgba(14,37,23,.3); }
@media (max-width: 639px) { .am-main .ops-drawer-body .ops-fields { grid-template-columns: 1fr; } }

/* Support conversation: messages scroll while reply controls remain visible. */
.ou-advanced-actions { position: relative; }
.ou-advanced-actions summary { list-style: none; cursor: pointer; }
.ou-advanced-actions > a { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; white-space: nowrap; background: var(--o-raised); }
.am-main .ops-drawer-ticket .ops-drawer-panel { width: min(820px,100vw); }
.ops-drawer-ticket .ops-drawer-body { display: flex; min-height: 0; overflow: hidden; padding: 0; }
.ops-drawer-ticket .ops-drawer-record, .ops-drawer-ticket .ops-drawer-form { display: none; }
.ops-drawer-ticket .ops-drawer-result { display: flex; flex: 1; min-width: 0; min-height: 0; margin: 0; }
.at-ticket { display: flex; flex-direction: column; width: 100%; min-height: 0; color: var(--o-text); }
.at-info { flex-shrink: 0; padding: 16px 22px 10px; border-bottom: 1px solid var(--o-line); background: var(--o-card); }
.at-customer { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 14px; }
.at-avatar { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 11px; color: var(--o-accent-text); background: rgba(var(--color-accent-500),.12); font-weight: 700; }
.at-customer > div { min-width: 0; flex: 1; }
.at-customer strong, .at-customer a { font-size: 14px; font-weight: 700; color: var(--o-text); }
.at-customer a:hover { color: var(--o-accent-text); }
.at-customer small { display: block; margin-top: 3px; color: var(--o-muted); font-size: 11px; overflow-wrap: anywhere; }
.at-ticket-number { color: var(--o-muted); font: 12px 'IBM Plex Mono',monospace; }
.at-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; }
.at-controls label { flex: 1; min-width: 120px; color: var(--o-muted); font-size: 11px; }
.at-controls select { display: block; width: 100%; min-height: 38px; margin-top: 5px; padding: 6px 10px; border: 1px solid var(--o-line); border-radius: 9px; color: var(--o-text); background: var(--o-card); font: 12px Manrope,sans-serif; }
.at-controls .ops-button { min-height: 38px; padding: 7px 12px; font-size: 12px; }
.at-refresh { font-size: 20px !important; min-width: 38px; }
.at-dates { margin: 10px 0 0; color: var(--o-muted); font-size: 10px; }
.at-thread { flex: 1; min-height: 80px; overflow: auto; overscroll-behavior: contain; padding: 20px 22px; scrollbar-width: thin; background: var(--o-sunken); }
.at-message { width: fit-content; max-width: 87%; margin-bottom: 18px; }
.at-message--admin { margin-left: auto; }
.at-message header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; color: var(--o-muted); font-size: 11px; }
.at-message header strong { font-size: 12px; font-weight: 600; }
.at-message--admin header { justify-content: end; }
.at-bubble { padding: 12px 15px; border: 1px solid var(--o-line); border-radius: 4px 14px 14px; background: var(--o-card); }
.at-message--admin .at-bubble { border-color: rgba(var(--color-accent-400),.3); border-radius: 14px 4px 14px 14px; background: var(--o-accent-soft); }
.at-bubble p { margin: 0; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.at-photo { display: block; margin-top: 8px; }
.at-photo img, .at-video { display: block; max-width: 100%; max-height: 220px; border-radius: 8px; }
.at-video { margin-top: 8px; }
.at-file { display: block; padding: 9px 0 0; color: var(--o-accent-text); font-size: 12px; overflow-wrap: anywhere; }
.at-error { flex-shrink: 0; margin: 10px 22px 0; padding: 10px 12px; border: 1px solid rgba(244,63,94,.3); border-radius: 9px; background: rgba(244,63,94,.08); color: #fb7185; font-size: 12px; }
.light .at-error { color: #be123c; }
.at-empty { color: var(--o-muted); font-size: 13px; text-align: center; }
.at-composer-host { flex-shrink: 0; border-top: 1px solid var(--o-line); background: var(--o-card); }
.at-composer { padding: 14px 22px 16px; }
.at-composer > label { display: block; margin-bottom: 7px; color: var(--o-text); font-size: 12px; font-weight: 700; }
.at-composer textarea { width: 100%; min-height: 76px; max-height: 160px; resize: vertical; padding: 10px 12px; border: 1px solid var(--o-line); border-radius: 10px; color: var(--o-text); background: var(--o-sunken); font: 13px/1.5 Manrope,sans-serif; }
.at-composer textarea:focus, .at-controls select:focus { outline: 2px solid rgba(var(--color-accent-400),.6); outline-offset: 2px; }
.at-compose-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.at-compose-actions small { flex: 1; color: var(--o-muted); font-size: 10px; }
.at-compose-actions .ops-button { min-height: 36px; padding: 8px 12px; font-size: 12px; }
.at-attach { position: relative; overflow: hidden; cursor: pointer; }
.at-attach input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.at-attach:focus-within { outline: 2px solid rgba(var(--color-accent-400),.6); outline-offset: 2px; }
.at-attachments { display: flex; flex-wrap: wrap; gap: 6px; }
.at-attachment { display: inline-flex; gap: 6px; align-items: center; max-width: 100%; margin-top: 7px; padding: 4px 8px; border: 1px solid var(--o-line); border-radius: 7px; font-size: 11px; }
.at-attachment > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-attachment button { border: 0; background: transparent; color: var(--o-muted); cursor: pointer; font-size: 17px; }
.at-reply-state { margin: 5px 0 0; color: var(--o-muted); font-size: 11px; }
.at-reply-state:empty { display: none; }
.at-notice { margin: 0; padding: 16px 22px; font-size: 12px; color: var(--o-muted); }
@media(max-width: 639px) {
  .at-info { padding: 12px 14px 8px; }
  .at-thread { padding: 16px 14px; }
  .at-composer { padding: 12px 14px; }
  .at-controls label { flex-basis: 40%; }
  .at-controls select, .at-controls .ops-button, .at-compose-actions .ops-button { min-height: 44px; }
  .at-compose-actions small { display: none; }
  .at-compose-actions > button { margin-left: auto; }
  .at-message { max-width: 93%; }
  .at-error { margin: 8px 14px 0; }
}

body.am-menu-open { overflow: hidden; }

/* Shared finishing details for the compact shell, lists and profile. */
.am-main .ops-muted { font-size: 12px; line-height: 1.5; }
.am-main .ops-primary { background: #047857; color: #fff; border-color: transparent; }
.am-main .ops-primary:hover { background: #065f46; border-color: transparent; }
.am-main .ops-table th, .am-main .au-row--head { background: var(--am-sunken); color: var(--am-text-2); }
.am-main .ops-table tbody tr:focus-within, .am-main .au-row:focus-within { background: var(--am-hover); }
.am-main .ka-kpi[href]:hover { border-color: var(--am-accent); }
.am-main .ops-views { background: var(--am-sunken); }
.am-main .ops-tab.active { color: var(--am-accent); background: var(--am-surface); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.am-main .ops-filters-box summary:hover { background: var(--am-hover); border-radius: 10px; }
.am-main .ops-filters-box[open] summary:hover { border-radius: 10px 10px 0 0; }
.am-main .ou-grid, .am-main .ou-col { gap: 16px; }
.am-main .ou-avatar { width: 44px; height: 44px; font-size: 18px; }
.am-main .au-avatar.is-muted { background: var(--am-sunken); color: var(--am-muted); }
.am-main .ou-advanced-actions > a { box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.am-main .at-dates { font-size: 11px; }

@media (max-width: 767px) {
  .am-main .au-toolbar { top: 64px; margin: 0 0 12px; padding: 12px; }
  .am-main .au-pop { position: static; }
  .am-main .au-pop > .ops-menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: max(12px,var(--safe-bottom)); width: auto; max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 639px) {
  .am-main .ops-button, .am-main .ops-tab { min-height: 44px; }
  .am-main .ops-back { width: 44px; height: 44px; }
  .am-main .ops-field input, .am-main .ops-field select, .am-main .ops-search, .am-main .at-composer textarea { font-size: 16px; }
  .am-main .ops-result-head .ops-search { max-width: none; flex-basis: 100%; }
  .am-main .ops-pager { flex-wrap: wrap; }
  .am-main .ops-drawer-bar .ops-menu { left: auto; right: 0; }
  .am-main .ou-card, .am-main .ou-sub { min-width: 0; max-width: 100%; }
  .am-main .ou-sub-head > div { min-width: 0; overflow-wrap: anywhere; }
  .am-main .ou-mini { width: 100%; min-width: 0; }
  .am-main .ou-mini input, .am-main .ou-mini select { min-width: 0; max-width: 100%; min-height: 44px; flex: 1; font-size: 16px; }
  .am-main .ou-mini > .ops-button { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .am-shell *, .am-shell *::before, .am-shell *::after { animation: none !important; transition: none !important; }
}

/* Form widgets: switches, row editors, record pickers */
.ops-label { font-size: 13px; font-weight: 600; color: var(--o-text-2); }
.ops-field--switch { justify-content: center; }
.ops-switch { position: relative; display: flex; align-items: center; gap: 12px; min-height: 42px; cursor: pointer; color: var(--o-text-2); font-size: 13px; font-weight: 600; }
.ops-field .ops-switch input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; opacity: 0; }
.ops-switch-track { position: relative; flex: 0 0 40px; height: 24px; border: 1px solid var(--o-line-strong); border-radius: 999px; background: var(--o-sunken); transition: background-color .15s, border-color .15s; }
.ops-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--o-muted); transition: transform .15s, background-color .15s; }
.ops-switch input:checked + .ops-switch-track { border-color: var(--o-accent); background: var(--o-accent); }
.ops-switch input:checked + .ops-switch-track::after { transform: translateX(16px); background: #fff; }
.ops-switch input:focus-visible + .ops-switch-track { box-shadow: var(--o-ring); }
.ops-switch input:disabled + .ops-switch-track { opacity: .5; }
.ops-rows { display: grid; gap: 8px; }
.ops-row { display: grid; grid-template-columns: repeat(var(--ops-cols, 2), minmax(0, 1fr)) 36px; gap: 8px; align-items: center; }
.ops-row-head { color: var(--o-muted); font-size: 11.5px; font-weight: 600; }
.ops-rows [data-rows] { display: grid; gap: 8px; }
.ops-rows [data-rows]:empty::before { content: 'Пока пусто — добавьте строку.'; color: var(--o-muted); font-size: 12.5px; font-weight: 400; }
.ops-rows [data-rows]:empty + .ops-row-add { margin-top: 0; }
.ops-row input[type=checkbox] { justify-self: start; }
.ops-row-remove { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--o-line); border-radius: 9px; background: transparent; color: var(--o-muted); cursor: pointer; }
.ops-row-remove:hover { border-color: rgba(244, 63, 94, .45); color: var(--o-bad); }
.ops-row-remove .icon { width: 15px; height: 15px; }
.ops-row-add { justify-self: start; min-height: 34px; padding: 0 12px; font-size: 13px; }
.ops-row-add .icon { width: 15px; height: 15px; }
.ops-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.ops-pick { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--o-line); border-radius: 999px; background: var(--o-sunken); color: var(--o-text-2); font-size: 13px; font-weight: 500; cursor: pointer; }
.ops-pick:has(input:checked) { border-color: var(--o-accent); background: var(--o-accent-soft); color: var(--o-accent-text); }
.ops-field .ops-pick input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--o-accent); }
.ops-picks-tools { display: inline-flex; gap: 12px; align-items: center; margin-left: 4px; }
.ops-link { padding: 0; border: 0; background: none; color: var(--o-accent-text); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ops-link:hover { text-decoration: underline; }
.ops-form-lead { margin: 2px 0 12px; font-size: 12.5px; }
.ops-drawer .ops-form-actions { position: sticky; bottom: -30px; z-index: 4; margin: 18px -22px 0; padding: 14px 22px 18px; border-top: 1px solid var(--o-line); background: rgb(var(--color-dark-950)); }
.light .ops-drawer .ops-form-actions { background: #f7fbf8; }

/* Sortable tables, record actions, states */
.ops-sort { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.ops-sort:hover, .ops-sort.is-active { color: var(--o-text); }
.ops-sort-mark { opacity: .45; font-size: 12px; }
.ops-sort.is-active .ops-sort-mark { opacity: 1; color: var(--o-accent-text); }
.ops-table th:last-child .ops-sort { flex-direction: row-reverse; }
.ops-search-empty { margin: 14px 0 0; text-align: center; }
.ops-drawer-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ops-drawer-actions .ops-button { min-height: 36px; }
.ops-drawer-actions .ops-button .icon { width: 16px; height: 16px; }
.ops-menu-item.is-danger { color: var(--o-bad); }
.ops-alert--row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ops-alert--row > span { flex: 1 1 240px; }
.ops-alert--row .ops-button { min-height: 34px; font-size: 13px; }
.ops-info { border-color: var(--o-line-strong); background: var(--o-sunken); color: var(--o-text-2); }
.light .ops-info { color: var(--o-text-2); }
@media (max-width: 639px) {
  .ops-row { grid-template-columns: repeat(var(--ops-cols, 2), minmax(0, 1fr)) 44px; }
  .ops-row-remove { width: 44px; height: 44px; }
  .ops-drawer-actions { margin-left: auto; }
}
.ops-fields[hidden] { display: none; }
.ops-field textarea.ops-prose { font: 14px/1.55 inherit; font-family: inherit; }

@media (max-width: 700px) { .ops-drawer .ops-form-actions { bottom: -26px; margin: 18px -16px 0; padding: 12px 16px 16px; } }
@media (max-width: 700px) {
  .ops-list .ops-table td:first-child, .ops-list .ops-table th:first-child { position: sticky; left: 0; z-index: 2; background: var(--o-raised); box-shadow: 1px 0 0 var(--o-line); }
  .ops-list .ops-table th:first-child { z-index: 3; }
}

/* Admin dialogs: #modal lives outside the shell, so it gets the shell palette itself. */
dialog#modal.am-modal { --am-bg: #081410; --am-surface: #10221b; --am-sunken: #0b1913; --am-hover: #193128; --am-line: #2a4035; --am-text: #e8f3ec; --am-text-2: #c3d6cb; --am-muted: #a0b6aa; --am-accent: #6ee7b7; width: min(520px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border: 1px solid var(--am-line); border-radius: 16px; background: var(--am-surface); color: var(--am-text); box-shadow: 0 24px 64px rgba(0, 0, 0, .45); }
html.light dialog#modal.am-modal, html[data-theme="light"] dialog#modal.am-modal { --am-bg: #f1f6f3; --am-surface: #fff; --am-sunken: #f5f9f6; --am-hover: #edf5ef; --am-line: #d9e5dd; --am-text: #152e1e; --am-text-2: #3a5643; --am-muted: #5d7565; --am-accent: #047857; box-shadow: 0 24px 64px rgba(20, 60, 40, .18); }
dialog#modal.am-modal:has(.am-dialog--wide) { width: min(720px, calc(100% - 24px)); }
.am-dialog { --o-radius: 12px; --o-radius-sm: 8px; --o-card: var(--am-surface); --o-raised: var(--am-surface); --o-sunken: var(--am-sunken); --o-hover: var(--am-hover); --o-line: var(--am-line); --o-line-strong: var(--am-muted); --o-text: var(--am-text); --o-text-2: var(--am-text-2); --o-muted: var(--am-muted); --o-accent-text: var(--am-accent); }
.am-dialog-form { display: grid; gap: 14px; padding: 20px 22px 18px; }
.am-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ops-app .am-dialog-head h2 { font-size: 19px; line-height: 1.3; letter-spacing: -.2px; }
.am-dialog-close { display: inline-grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; margin: -6px -8px 0 0; border: 0; border-radius: 8px; background: transparent; color: var(--o-muted); cursor: pointer; }
.am-dialog-close:hover { background: var(--o-hover); color: var(--o-text); }
.am-dialog-close .icon { width: 18px; height: 18px; }
.am-dialog-lead { margin: -6px 0 0; color: var(--o-muted); font-size: 14px; line-height: 1.5; }
.am-dialog-body { display: grid; gap: 12px; }
.am-dialog-body:empty { display: none; }
.am-dialog-body .ops-field textarea { font: 14px/1.55 Manrope, system-ui, sans-serif; }
.am-dialog-error { margin: 0; }
.am-dialog-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.am-dialog-foot .ops-button { min-height: 40px; padding: 0 18px; }
@media (max-width: 639px) {
  dialog#modal.am-modal { width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  .am-dialog-foot { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Busy buttons */
.ops-button.is-busy, .ou-link-btn.is-busy, .ops-open.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.ops-button.is-busy::after, .ou-link-btn.is-busy::after, .ops-open.is-busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border: 2px solid var(--o-muted); border-right-color: transparent; border-radius: 50%; animation: am-spin .7s linear infinite; }
@keyframes am-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ops-button.is-busy::after, .ou-link-btn.is-busy::after, .ops-open.is-busy::after { animation-duration: 2s; } }

/* Copy buttons and identifiers */
.am-copy { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 2px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--o-muted); vertical-align: middle; cursor: pointer; }
.am-copy:hover { background: var(--o-hover); color: var(--o-text); }
.am-copy .icon { width: 14px; height: 14px; }
.ou-ids { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.ou-ids > span { display: inline-flex; align-items: center; gap: 4px; }
.ou-sep { color: var(--o-line-strong); }

/* User card */
.ou-notes { display: grid; gap: 8px; margin: -6px 0 16px; }
.ou-notes .ops-alert { display: flex; align-items: center; gap: 10px; margin: 0; white-space: normal; }
.ou-notes .ops-alert .icon { width: 17px; height: 17px; flex-shrink: 0; }
.ops-alert--warn { border-color: rgba(251, 191, 36, .35); background: var(--o-warn-bg); color: var(--o-warn); }
.ou-more .ops-menu { left: auto; right: 0; min-width: 250px; }
.ou-more .ops-menu-item { text-decoration: none; }
.ou-sub-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ou-sub-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ou-switch { min-height: 0; gap: 8px; font-weight: 500; }
.ou-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.ou-purchases { display: grid; gap: 6px; }
.ou-purchases-title { color: var(--o-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.ou-purchases ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ou-purchases li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.ou-manage { border-top: 1px solid var(--o-line); padding-top: 10px; }
.ou-manage > summary { display: inline-flex; align-items: center; gap: 8px; color: var(--o-accent-text); font-size: 13.5px; font-weight: 600; cursor: pointer; list-style: none; }
.ou-manage > summary::-webkit-details-marker { display: none; }
.ou-manage > summary .icon { width: 16px; height: 16px; }
.ou-manage[open] > summary { margin-bottom: 12px; }
.ou-manage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 12px; }
.ou-action { display: grid; gap: 6px; min-width: 0; }
.ou-action-label { color: var(--o-text-2); font-size: 12.5px; font-weight: 600; }
.ou-action-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ou-action-row input, .ou-action-row select, .ou-create-form select, .ou-create-form input:not([type=checkbox]), .ou-head-select, .ou-row-form input, .ou-row-form select { min-width: 0; min-height: 36px; padding: 0 10px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-sunken); color: var(--o-text); font-size: 13.5px; }
.ou-action-row input[type=number] { width: 90px; flex: 0 0 90px; }
.ou-action-row input[type=datetime-local], .ou-action-row select { flex: 1 1 150px; }
.ou-action-row input:focus, .ou-action-row select:focus, .ou-create-form select:focus, .ou-create-form input:focus, .ou-head-select:focus, .ou-row-form input:focus, .ou-row-form select:focus { border-color: var(--o-accent); outline: none; box-shadow: var(--o-ring); }
.ou-action-row .ops-button { min-height: 36px; padding: 0 12px; font-size: 13px; }
.ou-create { margin-top: 4px; }
.ou-create-form { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto auto; align-items: end; gap: 10px; margin-top: 12px; padding: 14px; border: 1px dashed var(--o-line-strong); border-radius: 12px; }
.ou-create-form .ops-check { min-height: 36px; }
.ou-head-select { max-width: 220px; min-height: 30px; font-size: 12.5px; }
.ou-hwid { overflow: hidden; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px !important; text-overflow: ellipsis; white-space: nowrap; }
.ou-list li .ou-inline { flex-shrink: 0; }
.ou-url { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.ou-url a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ou-sync { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid var(--o-line); border-radius: 12px; background: var(--o-sunken); }
.ou-sync.has-diff { border-color: rgba(251, 191, 36, .4); }
.ou-sync-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.ou-diff { display: grid; gap: 4px; margin: 0; padding-left: 18px; color: var(--o-text-2); font-size: 13px; }
.ou-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.ou-chips .au-chip { cursor: pointer; }
.ou-note { margin: 8px 0 0; font-size: 12.5px; }
.ou-center { align-items: center; }
.ou-subhead { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; padding-top: 14px; border-top: 1px solid var(--o-line); }
.ops-app .ou-subhead h4 { flex: 1; margin: 0; font-size: 14px; font-weight: 600; }
.ou-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.ou-tx { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--o-line); }
.ou-tx:last-child { border-bottom: 0; }
.ou-tx-text { display: grid; gap: 2px; min-width: 0; }
.ou-tx-text strong { overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ou-tx-text small { font-size: 12px; }
.ou-tx .ops-money { flex-shrink: 0; font-weight: 600; white-space: nowrap; }
.ou-feed-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--o-line); }
.ou-feed-item:last-child { border-bottom: 0; }
.ou-gift-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ops-app .ou-mini-title { margin: 12px 0 2px; color: var(--o-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.ou-choice { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.ou-choice-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--o-line); border-radius: 10px; cursor: pointer; }
.ou-choice-item:has(input:checked) { border-color: var(--o-accent); background: var(--o-accent-soft); }
.ou-choice-item input { margin-top: 3px; accent-color: var(--o-accent); }
.ou-choice-item span { display: grid; gap: 2px; }
.ou-choice-item strong { font-size: 14px; }
.ou-choice-item small { color: var(--o-muted); font-size: 12.5px; line-height: 1.4; }
.ou-restrict { display: grid; gap: 10px; }
.ou-restrict .ops-toolbar { margin: 4px 0 0; }
.ou-card .ops-kv dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .ou-manage-grid { grid-template-columns: minmax(0, 1fr); }
  .ou-create-form { grid-template-columns: minmax(0, 1fr) 100px; }
  .ou-create-form .ops-check, .ou-create-form .ops-button { grid-column: span 1; }
  .ou-head .ops-head-actions .ou-more { flex: 0 0 auto; }
}
.au-center { justify-content: center; }
.ops-app [hidden], .am-dialog [hidden] { display: none !important; }
.ou-choice-item input[type=radio] { flex: 0 0 16px; width: 16px; height: 16px; min-height: 0; margin: 2px 0 0; padding: 0; }
.ou-choice-item > span { flex: 1; min-width: 0; text-align: left; }

/* Support inbox: list + conversation */
.at-inbox .ops-head { margin-bottom: 14px; }
.at-tabs { margin-bottom: 14px; }
.at-tabs .ops-tab { display: inline-flex; align-items: center; gap: 7px; }
.at-count-hot { background: var(--o-warn-bg) !important; color: var(--o-warn) !important; }
.at-layout { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
.ops-card.at-list-pane, .ops-card.at-chat-pane { margin: 0; padding: 0; overflow: hidden; }
.at-list-tools { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--o-line); }
.at-filter { flex: 1; min-width: 0; }
.at-filter input { width: 100%; }
.at-priority { flex: 0 0 auto; max-width: 160px; min-height: 40px; }
.at-list { max-height: calc(100dvh - 300px); min-height: 200px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.at-row { display: grid; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--o-line); color: inherit; text-decoration: none; box-shadow: inset 3px 0 0 transparent; }
.at-row:hover { background: var(--o-hover); }
.at-row.is-active { background: var(--o-accent-soft); box-shadow: inset 3px 0 0 var(--o-accent); }
.at-row-top, .at-row-bottom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.at-row-title { flex: 1; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.at-row time { flex-shrink: 0; color: var(--o-muted); font-size: 11.5px; }
.at-row-user { overflow: hidden; color: var(--o-text-2); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.at-row-preview { flex: 1; min-width: 0; overflow: hidden; color: var(--o-muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.at-row .ops-pill { flex-shrink: 0; }
.at-prio { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--o-line-strong); }
.at-prio--urgent { background: var(--o-bad); box-shadow: 0 0 0 3px var(--o-bad-bg); }
.at-prio--high { background: var(--o-warn); }
.at-prio--low { background: transparent; border: 1px solid var(--o-line-strong); }
.at-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--o-line); color: var(--o-muted); font-size: 12.5px; }
.at-pager:empty { display: none; }
.at-pager .ops-button { min-height: 32px; padding: 0 10px; }
.at-chat-pane { position: sticky; top: 16px; display: flex; flex-direction: column; height: calc(100dvh - 120px); min-height: 420px; }
.at-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--o-line); }
.ops-app .at-chat-head h3 { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.at-chat-back { display: none; width: 34px; height: 34px; }
.at-chat-pane [data-chat-body] { display: flex; flex: 1; min-height: 0; }
.at-chat-pane .at-ticket { flex: 1; min-height: 0; }
.at-placeholder { display: grid; place-items: center; align-content: center; gap: 10px; flex: 1; padding: 40px; color: var(--o-muted); text-align: center; }
.at-placeholder .icon { width: 36px; height: 36px; opacity: .5; }
.at-placeholder p { margin: 0; max-width: 260px; font-size: 14px; }
.at-empty { padding: 40px 16px; }
@media (max-width: 999px) {
  .at-layout { grid-template-columns: minmax(0, 1fr); }
  .at-list { max-height: none; }
  .at-inbox.has-ticket .at-list-pane, .at-inbox.has-ticket .at-tabs, .at-inbox.has-ticket .at-inbox-head { display: none; }
  .at-inbox:not(.has-ticket) .at-chat-pane { display: none; }
  .at-chat-pane { position: static; height: calc(100dvh - 110px); }
  .at-chat-back { display: inline-grid; }
}
@media (min-width: 1000px) { .at-chat-pane { height: max(480px, calc(100dvh - 240px)); } .at-list { max-height: max(360px, calc(100dvh - 360px)); } }
.ou-card-head .ops-count { flex-shrink: 0; white-space: nowrap; }
.ou-card-head .ou-head-select { flex: 0 1 220px; min-width: 0; }
@media (max-width: 700px) { .ou .ops-kv { grid-template-columns: minmax(104px, .8fr) minmax(0, 1.4fr); } .ou .ops-kv dt, .ou .ops-kv dd { padding: 8px 0; } }
.light .ops-alert--warn { color: #92400e; }

/* Tariffs: list */
.tf-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.tf-toolbar .ops-views { margin: 0; }
.tf-search { flex: 0 1 280px; min-width: 200px; }
.tf-search input { width: 100%; }
.tf-filter .ops-tab { display: inline-flex; align-items: center; gap: 7px; }
.tf-order-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid rgba(var(--color-accent-500), .35); border-radius: 12px; background: var(--o-accent-soft); font-size: 13.5px; }
.tf-order-bar > span { display: inline-flex; align-items: center; gap: 8px; }
.tf-order-bar .icon { width: 16px; height: 16px; }
.tf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.ops-card.tf-card { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 18px; }
.tf-card.is-off { opacity: .72; }
.tf-card.is-highlighted { border-color: rgba(251, 191, 36, .45); }
.tf-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tf-card-title { min-width: 0; }
.ops-app .tf-card-title h3 { margin: 0 0 2px; overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.tf-card-title .ops-dim { font-size: 12px; }
.tf-card-menu .ops-menu { left: auto; right: 0; min-width: 260px; }
.tf-move { display: flex; gap: 6px; }
.tf-move .ops-button { font-size: 16px; }
.tf-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-badges:empty { display: none; }
.tf-desc { display: -webkit-box; margin: 0; overflow: hidden; color: var(--o-text-2); font-size: 13.5px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tf-price { font-size: 14px; }
.tf-price strong { font: 700 20px/1.2 Outfit, Manrope, sans-serif; }
.tf-periods { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-period { display: grid; gap: 1px; min-width: 76px; padding: 7px 10px; border: 1px solid var(--o-line); border-radius: 10px; background: var(--o-sunken); }
.tf-period small { color: var(--o-muted); font-size: 11.5px; }
.tf-period strong { font-size: 14px; }
.tf-period.is-best { border-color: rgba(251, 191, 36, .55); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .25); }
.tf-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--o-line); }
.tf-facts div { min-width: 0; }
.tf-facts dt { color: var(--o-muted); font-size: 11.5px; }
.tf-facts dd { margin: 2px 0 0; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tf-warn { color: var(--o-warn) !important; }
.tf-alert { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--o-warn); font-size: 12.5px; }
.tf-alert .icon { width: 15px; height: 15px; flex-shrink: 0; }
.tf-note { margin: 0; color: var(--o-muted); font-size: 12.5px; }
.tf-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.tf-card-foot .ops-dim { font-size: 12px; }
.tf-empty { display: grid; place-items: center; gap: 10px; padding: 40px; grid-column: 1 / -1; }
.tf-empty .icon { width: 32px; height: 32px; opacity: .5; }
.tf-empty p { margin: 0; }
.tf-more-actions { margin: 18px 0 0; text-align: center; font-size: 13px; }
.tf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Tariffs: editor */
.tf-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; align-items: start; }
.tf-nav { position: sticky; top: 16px; display: grid; gap: 2px; }
.tf-nav a { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; color: var(--o-text-2); font-size: 13.5px; text-decoration: none; }
.tf-nav a:hover { background: var(--o-hover); color: var(--o-text); }
.tf-nav-err { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--o-bad); color: #fff; font-size: 11px; font-weight: 700; }
.tf-form { min-width: 0; }
.tf-fieldset { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ops-card.tf-section { margin: 0; scroll-margin-top: 16px; }
.ops-app .tf-section > h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.tf-lead { margin: -6px 0 12px; }
.tf-type { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.tf-switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-top: 16px; }
.tf-switch { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--o-line); border-radius: 10px; cursor: pointer; }
.tf-switch:has(input:checked) { border-color: rgba(var(--color-accent-500), .45); }
.tf-switch .ops-switch { flex-shrink: 0; min-height: 24px; }
.tf-switch-text { display: grid; gap: 2px; }
.tf-switch-text strong { font-size: 14px; }
.tf-switch-text small { color: var(--o-muted); font-size: 12.5px; line-height: 1.4; }
.tf-sub { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--o-line); }
.tf-sub > .tf-switch { border: 0; padding: 0; }
.tf-dep[hidden] { display: none !important; }
.tf-rows { display: grid; gap: 8px; }
.tf-prow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tf-prow input[type=number] { width: 110px; min-height: 38px; padding: 0 10px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-sunken); color: var(--o-text); font-size: 14px; }
.tf-prow input:focus, .tf-servers input[type=number]:focus { border-color: var(--o-accent); outline: none; box-shadow: var(--o-ring); }
.tf-unit { color: var(--o-muted); font-size: 13px; margin-left: -4px; }
.tf-permonth { min-width: 110px; color: var(--o-muted); font-size: 12.5px; }
.tf-best { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; min-height: 34px; border: 1px solid var(--o-line); border-radius: 999px; color: var(--o-muted); font-size: 12.5px; cursor: pointer; }
.tf-best:has(input:checked) { border-color: rgba(251, 191, 36, .55); color: var(--o-warn); }
.tf-best input { margin: 0; accent-color: #f59e0b; }
.tf-prow .ops-row-remove { margin-left: auto; }
.tf-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; }
.tf-add .au-chip { cursor: pointer; }
.tf-clear-best { margin-top: 10px; }
.tf-add-btn { margin: 10px 0 4px; }
.tf-servers-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 10px; font-size: 13px; }
.tf-servers-tools .ops-link { padding: 0; border: 0; background: none; color: var(--o-accent-text); font-weight: 600; cursor: pointer; }
.tf-servers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.tf-server { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--o-line); border-radius: 10px; cursor: pointer; }
.tf-server:has(input[type=checkbox]:checked) { border-color: rgba(var(--color-accent-500), .5); background: var(--o-accent-soft); }
.tf-server input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--o-accent); }
.tf-server-name { flex: 1; min-width: 0; overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.tf-flag { margin-right: 6px; padding: 1px 5px; border-radius: 4px; background: var(--o-hover); color: var(--o-muted); font: 600 10.5px/1.4 "IBM Plex Mono", monospace; }
.tf-servers input[type=number] { width: 72px; min-height: 30px; padding: 0 8px; border: 1px solid var(--o-line); border-radius: 7px; background: var(--o-sunken); color: var(--o-text); font-size: 13px; }
.tf-servers input[type=number]:disabled { opacity: .35; }
.tf-mt { margin-top: 16px; }
.tf-groups { margin-bottom: 4px; }
.tf-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; padding: 12px 16px; border: 1px solid var(--o-line); border-radius: 12px; background: var(--o-raised); box-shadow: 0 -8px 24px rgba(0, 0, 0, .18); }
.tf-savebar .ops-button { min-height: 40px; padding: 0 18px; }
.tf-dirty { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--o-warn); font-size: 13px; }
.tf-dirty .icon { width: 15px; height: 15px; }
.tf-editor .is-invalid { border-color: var(--o-bad) !important; box-shadow: 0 0 0 3px var(--o-bad-bg) !important; }
.tf-editor .ops-field > span { color: var(--o-text-2); }
@media (max-width: 999px) {
  .tf-layout { grid-template-columns: minmax(0, 1fr); }
  .tf-nav { position: sticky; top: 0; z-index: 6; display: flex; gap: 4px; margin: 0 -12px; padding: 8px 12px; overflow-x: auto; background: var(--am-bg, var(--o-raised)); scrollbar-width: none; }
  .tf-nav a { flex-shrink: 0; padding: 6px 12px; border: 1px solid var(--o-line); border-radius: 999px; font-size: 12.5px; }
  .ops-card.tf-section { scroll-margin-top: 64px; }
}
@media (max-width: 639px) {
  .tf-type, .tf-switches { grid-template-columns: minmax(0, 1fr); }
  .tf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-prow input[type=number] { width: 84px; }
  .tf-permonth { min-width: 0; order: 9; width: 100%; }
  .tf-search { flex: 1 1 100%; }
  .tf-savebar { margin: 16px -12px 0; border-radius: 0; border-width: 1px 0 0; }
}
.tf-clear-best { display: inline-flex; width: auto; }
.tf-clear-best input, .tf-best input { flex: 0 0 auto; width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; }
.tf-type input[type=radio] { flex: 0 0 16px; width: 16px; height: 16px; min-height: 0; margin: 2px 0 0; }

/* Charts (admin-charts.js) */
.ac-columns { position: relative; margin: 4px 0 0; padding-left: 52px; }
.ac-grid { position: absolute; inset: 0 0 22px 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.ac-grid span { position: relative; margin-left: 52px; border-top: 1px solid var(--o-line); }
.ac-grid small { position: absolute; left: -52px; top: -8px; width: 46px; color: var(--o-muted); font-size: 10.5px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-plot { position: relative; display: grid; grid-template-columns: repeat(var(--ac-n), minmax(0, 1fr)); gap: 2px; height: calc(var(--ac-h, 180px) + 22px); align-items: end; }
.ac-col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; padding-bottom: 22px; }
.ac-hit { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: default; }
.ac-hit:hover, .ac-hit:focus-visible { background: var(--o-hover); outline: none; }
.ac-bar { display: block; width: 100%; max-width: 24px; border-radius: 4px 4px 0 0; background: var(--o-accent); transition: filter .12s; }
.ac-bar.is-zero { height: 0 !important; }
.ac-hit:hover .ac-bar, .ac-hit:focus-visible .ac-bar { filter: brightness(1.2); }
.ac-x { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: var(--o-muted); font-size: 10.5px; white-space: nowrap; }
.ac-empty { display: grid; place-items: center; min-height: 120px; padding: 20px; border: 1px dashed var(--o-line); border-radius: 10px; color: var(--o-muted); font-size: 13px; text-align: center; }
.ac-tip { position: absolute; z-index: 1000; display: grid; gap: 2px; max-width: 260px; padding: 8px 10px; border: 1px solid var(--am-line, rgba(127,127,127,.3)); border-radius: 8px; background: var(--am-surface, #10221b); color: var(--am-text, #e8f3ec); box-shadow: 0 8px 24px rgba(0,0,0,.3); font: 12px/1.4 Manrope, sans-serif; pointer-events: none; }
.ac-tip[hidden] { display: none; } /* display:grid above would otherwise override the hidden attribute */
.ac-tip strong { font-size: 13.5px; }
.ac-tip .ac-tip-line { color: var(--am-muted, #a0b6aa); }
html.light .ac-tip, html[data-theme="light"] .ac-tip { --am-surface: #fff; --am-text: #152e1e; --am-muted: #5d7565; --am-line: #d9e5dd; box-shadow: 0 8px 24px rgba(20,60,40,.15); }
.ac-bars { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ac-bars-row { display: grid; gap: 4px; width: 100%; padding: 6px 8px; margin: 0 -8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; }
button.ac-bars-row { cursor: pointer; }
button.ac-bars-row:hover, button.ac-bars-row.is-active { background: var(--o-hover); }
button.ac-bars-row.is-active { box-shadow: inset 3px 0 0 var(--o-accent); }
.ac-bars-label { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.ac-bars-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-bars-label strong { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ac-track { display: block; height: 8px; border-radius: 4px; background: var(--o-sunken); overflow: hidden; }
.ac-track > span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--o-accent); }
.ac-bars small { color: var(--o-muted); font-size: 11.5px; }
.ac-table { margin-top: 10px; font-size: 13px; }
.ac-table summary { color: var(--o-accent-text); font-weight: 600; cursor: pointer; }
.ac-table .ops-table-wrap { max-height: 280px; overflow: auto; margin-top: 8px; }

/* Shared filters row of the stats pages */
.pm-filters { display: grid; gap: 10px; margin-bottom: 16px; }
.pm-filters .ops-views { margin: 0; overflow-x: auto; scrollbar-width: none; }
.pm-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--o-text-2); }
.pm-range input { min-height: 36px; margin-left: 4px; padding: 0 8px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-sunken); color: var(--o-text); color-scheme: dark; }
html.light .pm-range input { color-scheme: light; }
.pm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pm-search { flex: 1 1 320px; min-width: 0; }
.pm-search input { width: 100%; }
.pm-method { max-width: 240px; min-height: 40px; }
.pm-kpis, .tr-kpis, .sl-kpis { margin-bottom: 16px; }

/* Payments */
.pm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.ops-card.pm-list-card, .ops-card.pm-side, .ops-card.tr-card { margin: 0; padding: 0; overflow: hidden; }
.pm-list-card .pm-status { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--o-line); border-radius: 0; background: transparent; border-width: 0 0 1px; }
.pm-status .ops-tab { display: inline-flex; align-items: center; gap: 7px; }
.ops-card.pm-side { padding: 16px; position: sticky; top: 16px; }
.ops-app .pm-side h3 { margin: 0 0 4px; font-size: 15px; }
.pm-side-note { margin: 0 0 12px; font-size: 12.5px; }
.pm-table td { vertical-align: middle; }
.pm-table td small { display: block; font-size: 11.5px; }
.pm-amount { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-reason { margin-top: 4px; color: var(--o-bad); max-width: 220px; }
.pm-ident { white-space: nowrap; }
.pm-actions { text-align: right; white-space: nowrap; }
.pm-check { min-height: 32px !important; padding: 0 10px !important; font-size: 12.5px !important; }
.pm-empty { display: grid; place-items: center; gap: 10px; padding: 40px 16px; }
.pm-empty .icon { width: 30px; height: 30px; opacity: .5; }
.pm-empty p { margin: 0; }
.pm-pager { padding: 10px 14px; border-top: 1px solid var(--o-line); color: var(--o-muted); font-size: 12.5px; }
.pm-pager:empty { display: none; }
.pm-dialog-actions { margin-top: 12px; }
@media (max-width: 1100px) { .pm-layout { grid-template-columns: minmax(0, 1fr); } .ops-card.pm-side { position: static; order: -1; } }
@media (max-width: 700px) {
  .pm-table thead { display: none; }
  .pm-table, .pm-table tbody, .pm-table tr, .pm-table td { display: block; width: 100%; }
  .pm-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--o-line); }
  .pm-table td { padding: 0 !important; border: 0 !important; }
  .pm-table td[data-label="Дата"] { grid-column: 1; }
  .pm-table td.pm-amount { grid-column: 2; grid-row: 1; text-align: right; font-size: 15px; }
  .pm-table td[data-label="Статус"] { grid-column: 2; text-align: right; }
  .pm-table td[data-label="Пользователь"], .pm-table td[data-label="Способ"] { grid-column: 1; font-size: 13px; }
  .pm-table td.pm-ident { grid-column: 1; font-size: 12px; }
  .pm-table td.pm-actions { grid-column: 2; grid-row: 3 / span 2; align-self: end; }
  .pm-table td:empty { display: none; }
}

/* Traffic */
.tr-pops { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-pop > summary.ops-button { display: inline-flex; gap: 6px; min-height: 40px; }
.tr-pop > summary .icon { width: 14px; height: 14px; }
.tr-pop > summary.is-active { border-color: var(--o-accent); color: var(--o-accent-text); }
.tr-menu { min-width: 240px; max-height: 320px; overflow-y: auto; padding: 6px; }
.tr-opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 13.5px; cursor: pointer; }
.tr-opt:hover { background: var(--o-hover); }
.tr-opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--o-accent); }
.tr-menu .ops-button { margin: 6px 8px 4px; }
.tr-threshold { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 1px solid var(--o-line); border-radius: 8px; color: var(--o-muted); font-size: 12.5px; }
.tr-threshold input { width: 56px; min-height: 28px; padding: 0 6px; border: 1px solid var(--o-line); border-radius: 6px; background: var(--o-sunken); color: var(--o-text); }
.tr-wrap { max-height: calc(100dvh - 200px); overflow: auto; }
.tr-table { min-width: 980px; }
.tr-table th { position: sticky; top: 0; z-index: 2; background: var(--o-raised); white-space: nowrap; }
.tr-table td { vertical-align: middle; }
.tr-rank { width: 36px; color: var(--o-muted); font-size: 12px; text-align: right; }
.tr-user-col { position: sticky; left: 0; z-index: 1; background: var(--o-raised); min-width: 200px; max-width: 240px; box-shadow: 1px 0 0 var(--o-line); }
.tr-table th.tr-user-col { z-index: 3; }
.tr-user { display: grid; gap: 1px; color: inherit; text-decoration: none; min-width: 0; }
.tr-user strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.tr-user small { overflow: hidden; color: var(--o-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.tr-user:hover strong { color: var(--o-accent-text); }
.tr-tariff { display: block; margin-bottom: 3px; font-size: 13px; }
.tr-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-num small { display: block; }
.tr-total-col { min-width: 180px; }
.tr-total { display: grid; gap: 4px; }
.tr-total strong { font-size: 14px; }
.tr-track { display: block; height: 6px; border-radius: 3px; background: var(--o-sunken); overflow: hidden; }
.tr-track > span { display: block; height: 100%; border-radius: 0 3px 3px 0; background: var(--o-accent); }
.tr-total small { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; }
.tr-total small .icon { width: 13px; height: 13px; }
.tr-node-col { color: var(--o-text-2); font-size: 13px; }
.tr-table tr.is-hot td { background: rgba(251, 191, 36, .07); }
.tr-table tr.is-hot td.tr-user-col { background: linear-gradient(rgba(251, 191, 36, .07), rgba(251, 191, 36, .07)), var(--o-raised); }
.tr-hot-text { color: var(--o-warn); font-weight: 600; }

/* Sales stats */
.sl-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .sl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sl-kpis small b { color: var(--o-text); }
.sl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.sl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-wide { grid-column: span 2; }
.sl-stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.ops-card.sl-panel { margin: 0; padding: 18px; min-width: 0; }
.sl-panel-head { margin-bottom: 12px; }
.ops-app .sl-panel-head h3 { margin: 0 0 2px; font-size: 16px; }
.sl-panel-head p { margin: 0; font-size: 13px; }
.sl-caption { margin: 6px 0 0; color: var(--o-muted); font-size: 12px; }
.ops-app .sl-subtitle { margin: 16px 0 8px; color: var(--o-text-2); font-size: 13px; font-weight: 600; }
.sl-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 0 0 12px; }
.sl-mini div { padding: 10px 12px; border: 1px solid var(--o-line); border-radius: 10px; background: var(--o-sunken); }
.sl-mini dt { color: var(--o-muted); font-size: 11.5px; }
.sl-mini dd { margin: 3px 0 0; font-size: 14px; font-weight: 700; }
.sl-change { margin: -4px 0 12px; font-size: 13px; font-weight: 600; }
.sl-change--ok { color: var(--o-ok); }
.sl-change--bad { color: var(--o-bad); }
.sl-change--flat { color: var(--o-muted); }
.sl-gates { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sl-gates li { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) 54px; align-items: center; gap: 4px 10px; font-size: 13px; }
.sl-gates small { grid-column: 2 / 4; color: var(--o-muted); font-size: 11.5px; margin-top: -4px; }
.sl-gate-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-gate-bar { height: 8px; border-radius: 4px; background: var(--o-sunken); overflow: hidden; }
.sl-gate-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.sl-gate--ok { background: var(--o-ok); }
.sl-gate--warn { background: var(--o-warn); }
.sl-gate--bad { background: var(--o-bad); }
.sl-gates strong { text-align: right; font-variant-numeric: tabular-nums; }
.sl-panel .ops-alert--warn { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; white-space: normal; font-size: 13px; }
.sl-panel .ops-alert--warn .icon { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 1100px) { .sl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sl-wide { grid-column: span 2; } .sl-stack { grid-column: span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .sl-grid, .sl-grid--2 { grid-template-columns: minmax(0, 1fr); } .sl-wide, .sl-stack { grid-column: auto; } .sl-stack { grid-template-columns: minmax(0, 1fr); } .ac-columns { padding-left: 44px; } .ac-grid span { margin-left: 44px; } .ac-grid small { left: -44px; width: 40px; } }
@media (min-width: 701px) {
  .pm-table th, .pm-table td { padding: 10px 12px; }
  .pm-table th:first-child, .pm-table td:first-child { padding-left: 16px; }
  .pm-table th:last-child, .pm-table td:last-child { padding-right: 16px; }
  .pm-table td[data-label="Дата"], .pm-table td[data-label="Способ"] { white-space: nowrap; }
}
.pm-list-card .pm-status { border: 0; border-bottom: 1px solid var(--o-line); }
@media (max-width: 700px) {
  .ac-x[data-minor] { display: none; }
  .pm-table tr { padding: 12px 16px !important; box-sizing: border-box; }
  .pm-table td.pm-actions { grid-column: 1 / -1; grid-row: auto; justify-self: start; text-align: left; margin-top: 4px; }
  .ops-card.pm-side { order: 0; }
}
@media (max-width: 1100px) { .ops-card.pm-side { order: 0; } }
.pm-list-card .ops-table-wrap, .tr-card .ops-table-wrap { margin: 0 !important; border-top: 0; border-radius: 0; }
.ac-table .ops-table-wrap { margin: 8px 0 0 !important; border: 1px solid var(--o-line); border-radius: 8px; }
.tr-table th:first-child, .tr-table td:first-child { padding-left: 14px; }
@media (min-width: 701px) { .pm-check-text { display: none; } .pm-check { width: 34px; padding: 0 !important; } .pm-table td.pm-actions { width: 50px; } .pm-ident .au-tg { font-size: 12px; } }
.sl-grid > .sl-wide { align-self: start; }

/* Promo codes */
.ops-card.pc-card { margin: 0; padding: 0; overflow: hidden; }
.pc-card .ops-table-wrap { margin: 0 !important; border-top: 0; }
.pc-code { font: 600 14px/1.3 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .5px; }
.pc-table td small { display: block; font-size: 11.5px; }
.pc-uses { display: grid; gap: 4px; min-width: 110px; font-size: 13px; }
.pc-dates { white-space: nowrap; font-size: 13px; }
.pc-switch { display: inline-flex; vertical-align: middle; margin-right: 6px; }
.pc-actions { justify-content: flex-end; flex-wrap: nowrap; gap: 4px; }
.pc-actions .au-icon-btn { width: 34px; min-height: 34px !important; padding: 0 !important; }
.pc-code-row { display: flex; align-items: center; gap: 6px; }
.pc-code-row input { flex: 1; min-width: 0; }
.pc-code-input { font-family: "IBM Plex Mono", ui-monospace, monospace !important; text-transform: uppercase; letter-spacing: .5px; }
.pc-preview { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--o-accent-soft); color: var(--o-text); font-size: 13.5px; }
.am-dialog [data-show][hidden] { display: none !important; }

/* Promo groups */
.pg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ops-card.pg-recalc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 14px 18px; }
.pg-recalc p { margin: 2px 0 0; font-size: 13px; }
.pg-recalc .icon { width: 14px; height: 14px; vertical-align: -2px; }

/* Payment methods */
.pmc-list { display: grid; gap: 10px; }
.ops-card.pmc-row { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 18px; }
.pmc-row.is-off .pmc-main { opacity: .7; }
.pmc-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.pmc-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pmc-title strong { font-size: 15px; }
.pmc-title .ops-dim { font-size: 12px; }
.pmc-desc, .pmc-meta, .pmc-aud { margin: 0; color: var(--o-muted); font-size: 12.5px; }
.pmc-aud { display: flex; align-items: center; gap: 6px; color: var(--o-text-2); }
.pmc-aud .icon { width: 14px; height: 14px; }
.pmc-show { margin-top: 14px; }
@media (max-width: 639px) { .ops-card.pmc-row { flex-wrap: wrap; } .pmc-row > .ops-button { width: 100%; } }

/* Promo offers */
.po > .ops-views { margin-bottom: 16px; }
.po-send { display: grid; gap: 16px; }
.po-send > .ops-card { margin: 0; }
.ops-app .po-send h3 { margin-bottom: 12px; font-size: 16px; }
.po-templates, .po-segments { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.po-template small { display: block; }
.po-segment.is-empty { opacity: .45; }
.po-mode { margin-bottom: 12px; max-width: 420px; }
.po-msg { margin: 0; color: var(--o-muted); font-size: 12.5px; line-height: 1.45; }

/* Coupons */
.cp-links { width: 100%; min-height: 180px; padding: 10px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-sunken); color: var(--o-text); font: 12px/1.6 "IBM Plex Mono", ui-monospace, monospace; resize: vertical; }

/* Landings */
.ld-url { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; }
.ld-prefix { font-family: "IBM Plex Mono", monospace; }
.ld-tariffs, .ld-methods { display: grid; gap: 8px; }
.ld-tariff, .ld-method { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--o-line); border-radius: 10px; }
.ld-tariff.is-on, .ld-method.is-on { border-color: rgba(var(--color-accent-500), .45); background: var(--o-accent-soft); }
.ld-tariff:not(.is-on) .ld-periods, .ld-tariff:not(.is-on) .ld-override, .ld-method:not(.is-on) > input { display: none; }
.ld-periods { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-override { display: inline-flex; align-items: center; gap: 8px; color: var(--o-muted); font-size: 12.5px; }
.ld-override input, .ld-method > input, .ld-feature input { min-height: 34px; padding: 0 10px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-sunken); color: var(--o-text); font-size: 13.5px; }
.ld-override input { width: 90px; }
.ld-feature { display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1.6fr) 36px; gap: 8px; align-items: center; }
.ld-feature input:first-child { text-align: center; }
@media (max-width: 639px) { .ld-feature { grid-template-columns: 52px minmax(0, 1fr) 36px; } .ld-feature input[name=f_desc] { grid-column: 1 / -1; grid-row: 2; } }

/* Bulk actions */
.bk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.bk-layout > .ops-card, .bk-side > .ops-card { margin: 0; }
.bk-side { position: sticky; top: 16px; display: grid; gap: 16px; }
.ops-app .bk h3 { margin-bottom: 12px; font-size: 16px; }
.bk-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.bk-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.bk-users { max-height: 520px; overflow-y: auto; border: 1px solid var(--o-line); border-radius: 10px; }
.bk-list { margin: 0; padding: 0; list-style: none; }
.bk-list li + li { border-top: 1px solid var(--o-line); }
.bk-list label { display: flex; align-items: center; gap: 12px; padding: 9px 12px; cursor: pointer; }
.bk-list label:hover { background: var(--o-hover); }
.bk-list input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--o-accent); }
.bk-user { display: grid; gap: 1px; min-width: 0; }
.bk-user strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.bk-user small { overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.bk-selected .au-chips { max-height: 160px; overflow-y: auto; margin-bottom: 8px; }
.bk-form { display: grid; gap: 12px; }
.bk-form [data-field][hidden] { display: none !important; }
.bk-run { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-run .ops-button { min-height: 42px; }
.ops-card.bk-results { margin-top: 16px; }
.bk-res-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.bk-progress { height: 8px; margin: 4px 0 14px; border-radius: 4px; background: var(--o-sunken); overflow: hidden; }
.bk-progress > span { display: block; height: 100%; background: var(--o-accent); transition: width .2s; }
@media (max-width: 1100px) { .bk-layout { grid-template-columns: minmax(0, 1fr); } .bk-side { position: static; } .bk-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .bk-filters { grid-template-columns: minmax(0, 1fr); } }

/* Safe areas in the admin shell (see --safe-top in theme.css). */

.am-main { padding-bottom: calc(24px + var(--safe-bottom)); }
dialog#modal.am-modal { max-height: calc(100dvh - 32px - var(--safe-top)); }
@media (max-width: 999px) {
  .tf-nav { top: calc(64px + var(--safe-top)); }
  .au-toolbar { top: calc(64px + var(--safe-top)); }
}
@media (max-width: 639px) {
  .tf-nav { top: calc(58px + var(--safe-top)); }
  .au-toolbar { top: calc(58px + var(--safe-top)); }
  dialog#modal.am-modal { max-height: calc(92dvh - var(--safe-top)); }
  .am-dialog-form { padding-bottom: calc(18px + var(--safe-bottom)); }
}

/* Rich editor (admin-editor.js) */
.re { border: 1px solid var(--o-line); border-radius: 10px; overflow: hidden; background: var(--o-sunken); margin-top: 6px; }
.re.is-uploading { opacity: .6; pointer-events: none; }
.re-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--o-line); background: var(--o-card); position: sticky; top: 0; z-index: 2; }
.re-btn { min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--o-text-2); font: 600 13px/1 Manrope, sans-serif; cursor: pointer; }
.re-btn:hover:not(:disabled) { background: var(--o-hover); color: var(--o-text); }
.re-btn:disabled { opacity: .35; cursor: default; }
.re-btn[aria-pressed="true"] { background: var(--o-accent-soft); color: var(--o-accent-text); }
.re-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--o-line); }
.re-spacer { flex: 1; }
.re-area { padding: 14px 16px; color: var(--o-text); font-size: 15px; line-height: 1.65; outline: none; overflow-wrap: anywhere; }
.re-area:empty::before { content: attr(data-placeholder); color: var(--o-muted); }
.re-area h2 { margin: 18px 0 8px; font-size: 22px; } .re-area h3 { margin: 14px 0 6px; font-size: 18px; }
.re-area p { margin: 0 0 10px; } .re-area ul, .re-area ol { margin: 0 0 10px; padding-left: 22px; }
.re-area blockquote { margin: 0 0 10px; padding: 6px 12px; border-left: 3px solid var(--o-accent); color: var(--o-text-2); }
.re-area a { color: var(--o-accent-text); } .re-area img { max-width: 100%; border-radius: 8px; }
.re-source { display: block; width: 100%; padding: 12px; border: 0; background: var(--o-sunken); color: var(--o-text); font: 12.5px/1.55 "IBM Plex Mono", monospace; resize: vertical; outline: none; }

/* News */
.nw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--chip) 16%, transparent); color: var(--o-text); font-size: 12px; font-weight: 600; }
.nw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chip); }
.nw-list { display: grid; gap: 10px; }
.ops-card.nw-item { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 16px; align-items: center; margin: 0; padding: 14px; }
.nw-item.is-draft { border-style: dashed; }
.nw-cover { display: grid; place-items: center; width: 112px; height: 76px; overflow: hidden; border-radius: 10px; background: var(--o-sunken); color: var(--o-muted); }
.nw-cover img { width: 100%; height: 100%; object-fit: cover; }
.nw-main { min-width: 0; display: grid; gap: 4px; }
.nw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.ops-app .nw-main h3 { margin: 0; font-size: 16px; } .nw-main h3 a { color: inherit; text-decoration: none; } .nw-main h3 a:hover { color: var(--o-accent-text); }
.nw-excerpt { margin: 0; color: var(--o-text-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw-foot { margin: 0; font-size: 12px; }
.nw-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.nw-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.nw-col { display: grid; gap: 16px; min-width: 0; }
.nw-col > .ops-card { margin: 0; }
.nw-side { position: sticky; top: 16px; }
.ops-app .nw-side h3 { margin: 0 0 10px; font-size: 15px; }
.nw-title-input { font-size: 18px !important; font-weight: 700; }
.nw-cover-edit { display: grid; place-items: center; min-height: 120px; overflow: hidden; border: 1px dashed var(--o-line-strong); border-radius: 10px; }
.nw-cover-edit img { width: 100%; max-height: 200px; object-fit: cover; }
.nw-dict .ou-list li > div:first-child { display: flex; align-items: center; gap: 10px; }
.nw-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nw-swatch { width: 28px; height: 28px; border: 2px solid transparent; border-radius: 50%; background: var(--chip); cursor: pointer; }
.nw-swatch.is-on { border-color: var(--o-text); }
.nw-colors input[type=color] { width: 36px; height: 30px; padding: 0; border: 0; background: none; }
@media (max-width: 999px) { .nw-grid { grid-template-columns: minmax(0, 1fr); } .nw-side { position: static; } }
@media (max-width: 639px) { .ops-card.nw-item { grid-template-columns: 72px minmax(0, 1fr); } .nw-cover { width: 72px; height: 56px; } .nw-actions { grid-column: 1 / -1; justify-content: flex-start; } }

/* Campaigns */
.cm-bonus { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cm-link a { word-break: break-all; white-space: normal !important; }
.cm-reg-head h3 { margin: 0; font-size: 15px; }
@media (max-width: 639px) { .cm-bonus { grid-template-columns: 1fr 1fr; } }

/* Broadcasts */
.bc > .ops-views { margin-bottom: 16px; }
.bc-list { display: grid; gap: 10px; }
.ops-card.bc-item { margin: 0; padding: 14px 16px; }
.bc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.bc-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.bc-text { margin: 8px 0; color: var(--o-text-2); font-size: 13.5px; }
.bc-item .bk-progress { margin: 0 0 8px; height: 6px; }
.bc-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; }
.bc-actions { display: inline-flex; gap: 12px; margin-left: auto; }
.bc-channel { max-width: 520px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bc-group + .bc-group { margin-top: 12px; }
.bc-group .po-segments { margin-top: 6px; }
.bc-count { margin: 12px 0 0; font-weight: 600; }
.bc-found { max-height: 240px; overflow-y: auto; margin: 8px 0; border: 1px solid var(--o-line); border-radius: 10px; }
.bc-found:empty { display: none; }
.bk-empty { padding: 10px 12px; }
.bc-media { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.bc-btn-row input { flex: 1 1 160px; min-height: 36px; padding: 0 10px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-sunken); color: var(--o-text); }
.bc-preview { max-width: 420px; padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: var(--o-sunken); border: 1px solid var(--o-line); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.bc-preview a { color: var(--o-accent-text); }
.bc-media-badge { margin-bottom: 8px; padding: 18px; border-radius: 8px; background: var(--o-hover); color: var(--o-muted); text-align: center; font-size: 13px; }
.bc-preview-buttons { display: grid; gap: 4px; margin-top: 10px; }
.bc-preview-buttons:empty { display: none; }
.bc-preview-buttons span { padding: 8px; border-radius: 8px; background: var(--o-hover); color: var(--o-accent-text); font-size: 13px; text-align: center; }
.bc-email-frame { width: 100%; height: 60vh; border: 1px solid var(--o-line); border-radius: 8px; background: #fff; }
@media (max-width: 639px) { .bc-channel { grid-template-columns: 1fr; } }

/* Pinned & reminders */
.ops-card.pn-active { margin: 0 0 16px; }
.pn-active h3 { display: flex; align-items: center; gap: 8px; }
.pn-archive-title { margin: 8px 0 12px; font-size: 15px; }
.pn-small { max-width: none; font-size: 13px; }
.rm-preview { max-width: none; font-size: 13.5px; }
.rm-preview p { margin: 4px 0 0; color: var(--o-text-2); white-space: pre-wrap; }
.rm-btn { display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: 8px; background: var(--o-accent-soft); color: var(--o-accent-text); font-size: 12.5px; font-weight: 600; }

/* Partners, reward levels, withdrawals, referral network, channels */
.ops-count.pt-hot { background: var(--o-warn-bg); color: var(--o-warn); }
.pt-tabs { margin: 0 0 14px; }
.pt-apps .tf-card { gap: 10px; }
.pt-desc { margin: 0; color: var(--o-text-2); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.pt-comment { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12.5px; }
.pt-comment .icon { flex: none; width: 16px; height: 16px; }
.pt-locked { display: block; margin-top: 4px; color: var(--o-warn) !important; font-size: 12px; }
.pt-settings .tf-section + .tf-section { margin-top: 14px; }
.pt-rate { display: grid; gap: 2px; margin: 0 0 12px; }
.pt-rate strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.pt-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ops-card.pt-danger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; border-color: color-mix(in srgb, var(--o-bad) 35%, var(--o-line)); }
.pt-danger h3 { margin: 0 0 4px; font-size: 15px; }
.pt-danger p { margin: 0; max-width: 560px; }
.pt-pick { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.ops-pick.pt-pick-row { justify-content: flex-start; min-height: 0; padding: 10px 12px; border-radius: 10px; }
.pt-pick-row span { display: grid; gap: 2px; text-align: left; }
.rl-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rl-choice--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rl-option { position: relative; display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--o-line); border-radius: 12px; background: var(--o-sunken); cursor: pointer; }
.rl-option.is-on, .rl-option:has(input:checked) { border-color: var(--o-accent); background: var(--o-accent-soft); }
.rl-option:has(input:disabled) { cursor: not-allowed; opacity: .7; }
.rl-option input { flex: none; width: 16px; height: 16px; min-height: 0; margin: 3px 0 0; padding: 0; accent-color: var(--o-accent); }
.rl-option > span { display: grid; flex: 1; gap: 3px; min-width: 0; }
.rl-option small { color: var(--o-muted); font-size: 12.5px; line-height: 1.4; }
.rl-depth { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 14px; }
.rl-depth .ops-field { flex: 0 1 320px; }
.rl-levels { margin-top: 18px; }
.rl-levels-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rl-levels-head h3 { margin: 0 0 2px; font-size: 16px; }
.rl-levels-head p { margin: 0; }
.rl-facts { grid-template-columns: minmax(0, 1fr); }
.rl-tiers { display: grid; gap: 8px; }
.rl-tiers:empty { display: none; }
.rl-tier { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rl-tier input { width: 90px; min-height: 36px; padding: 0 10px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-sunken); color: var(--o-text); }
.rl-add-tier { justify-self: start; margin: 8px 0 4px; }
.rl-legacy-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.rl-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 520px; }
.rl-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rl-side { display: grid; gap: 10px; align-content: start; margin: 0; padding: 12px 14px 14px; border: 1px solid var(--o-line); border-radius: 12px; }
.rl-side legend { padding: 0 6px; font-weight: 600; font-size: 13.5px; }
.rl-notes { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.wd-row { cursor: pointer; }
.wd-row:hover td, .wd-row:focus-visible td { background: var(--o-hover); }
.wd-row:focus-visible { outline: none; }
.wd-req { max-width: 240px; color: var(--o-text-2); overflow-wrap: anywhere; }
.wd-detail { display: grid; gap: 14px; }
.wd-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wd-requisites { display: flex; align-items: flex-start; gap: 8px; }
.wd-requisites pre { flex: 1; margin: 0; padding: 10px 12px; border: 1px solid var(--o-line); border-radius: 10px; background: var(--o-sunken); color: var(--o-text); font: 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.wd-risk { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--o-line); border-radius: 12px; background: var(--o-sunken); }
.wd-risk header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; }
.wd-meter { height: 8px; border-radius: 999px; background: var(--o-hover); overflow: hidden; }
.wd-meter span { display: block; height: 100%; border-radius: inherit; background: var(--o-ok); }
.wd-risk--medium .wd-meter span { background: var(--o-warn); }
.wd-risk--high .wd-meter span, .wd-risk--critical .wd-meter span { background: var(--o-bad); }
.wd-risk--high, .wd-risk--critical { border-color: color-mix(in srgb, var(--o-bad) 40%, var(--o-line)); }
.wd-flags { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; }
.wd-more summary { cursor: pointer; color: var(--o-accent-text); font-size: 13px; }
.wd-more .tf-facts { margin-top: 10px; grid-template-columns: minmax(0, 1fr); }
.wd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rn-tree-card { padding: 14px; }
.rn-lead { margin: 0 0 12px; }
.rn-tree, .rn-kids { list-style: none; margin: 0; padding: 0; }
.rn-kids { margin-left: 14px; padding-left: 12px; border-left: 1px dashed var(--o-line-strong); }
.rn-node + .rn-node { margin-top: 6px; }
.rn-kids > .rn-node:first-child { margin-top: 6px; }
.rn-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--o-line); border-radius: 10px; background: var(--o-card); }
.rn-node.is-focus > .rn-row { border-color: var(--o-accent); box-shadow: 0 0 0 3px var(--o-ring); }
.rn-twist { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: var(--o-sunken); color: var(--o-muted); cursor: pointer; }
.rn-twist .icon { width: 16px; height: 16px; transition: transform .15s; }
.rn-twist.is-open .icon { transform: rotate(90deg); }
.rn-twist:hover { background: var(--o-hover); color: var(--o-text); }
.rn-leaf { background: transparent; cursor: default; }
.rn-leaf::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--o-line-strong); }
.rn-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.rn-main small { flex-basis: 100%; }
.rn-name { padding: 0; border: 0; background: none; color: var(--o-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.rn-name:hover { color: var(--o-accent-text); text-decoration: underline; }
.rn-camp { display: inline-flex; align-items: center; gap: 4px; color: var(--o-muted); font-size: 12px; }
.rn-camp .icon { width: 14px; height: 14px; }
.rn-stats { display: flex; gap: 16px; margin: 0; }
.rn-stats div { display: grid; justify-items: end; gap: 1px; }
.rn-stats dt { color: var(--o-muted); font-size: 11px; white-space: nowrap; }
.rn-stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rn-stats dd small { color: var(--o-muted); font-weight: 500; }
.rn-more { width: 100%; margin-top: 12px; }
.rn-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rn-result { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid var(--o-line); border-radius: 10px; background: var(--o-card); color: var(--o-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.rn-result:hover { border-color: var(--o-accent); background: var(--o-hover); }
.rn-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0 14px; }
.rn-leaders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ch-global { margin-bottom: 16px; }
.ch-global h3 { display: flex; align-items: center; gap: 8px; }
.ch-list { display: grid; gap: 10px; }
.ops-card.ch-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; }
.ch-card.is-off { opacity: .65; }
.ch-order { display: grid; gap: 4px; }
.ch-order .au-icon-btn { width: 30px; height: 30px; min-height: 30px; }
.ch-main h3 { margin: 0 0 2px; font-size: 15px; }
.ch-main p { margin: 0 0 8px; overflow-wrap: anywhere; }
.ch-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 999px) { .rn-leaders { grid-template-columns: minmax(0, 1fr); } .wd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .rl-choice, .rl-choice--3, .rl-sides { grid-template-columns: minmax(0, 1fr); }
  .rn-row { grid-template-columns: 32px minmax(0, 1fr); }
  .rn-stats { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; gap: 6px 14px; }
  .rn-stats div { justify-items: start; }
  .rn-kids { margin-left: 6px; padding-left: 8px; }
  .ops-card.ch-card { grid-template-columns: auto minmax(0, 1fr); }
  .ch-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .wd-facts, .rn-facts { grid-template-columns: minmax(0, 1fr); }
}
.ops-alert.pt-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; white-space: normal; }
.pt-note > .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.pt-inline-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; } .pt-inline-note > .icon { flex: none; width: 18px; height: 18px; }

/* Settings */
.st-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; }
.ops-card.st-nav { position: sticky; top: calc(var(--safe-top, 0px) + 76px); max-height: calc(100vh - var(--safe-top, 0px) - 96px); overflow-y: auto; padding: 12px; }
.st-search { margin-bottom: 10px; }
.st-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.st-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--o-text-2); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.st-item > span:nth-child(1):not(.st-mark), .st-item > span:nth-child(2) { flex: 1; min-width: 0; }
.st-item .ops-dim, .st-item .ops-count { flex: none; font-size: 12px; }
.st-item:hover { background: var(--o-hover); color: var(--o-text); }
.st-item.is-active { background: var(--o-accent-soft); color: var(--o-accent-text); font-weight: 600; }
.st-mark { flex: none; width: 20px; text-align: center; }
.st-group { margin-top: 6px; }
.st-group summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--o-text); font-weight: 600; font-size: 13.5px; cursor: pointer; list-style: none; }
.st-group summary::-webkit-details-marker { display: none; }
.st-group summary .ops-dim { margin-left: auto; font-weight: 500; font-size: 12px; }
.st-group summary:hover { background: var(--o-hover); }
.st-group .st-tree { padding-left: 18px; }
.st-main { min-width: 0; display: grid; gap: 14px; }
.st-head { display: flex; align-items: center; gap: 12px; }
.st-head h2 { margin: 0; font-size: 19px; }
.st-head p { margin: 2px 0 0; }
.st-back { display: none; }
.ops-card.st-block { padding: 0; overflow: hidden; }
.st-block-head { padding: 14px 18px; border-bottom: 1px solid var(--o-line); }
.st-block-head h3 { margin: 0; font-size: 15px; }
.st-block-head p { margin: 4px 0 0; font-size: 13px; }
.st-block > .tf-switches, .st-block > .st-inline { padding: 14px 18px; }
.st-empty { padding: 14px 18px; margin: 0; }
.st-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); gap: 10px 20px; align-items: start; padding: 14px 18px; border-top: 1px solid var(--o-line); }
.st-block-head + .st-row { border-top: 0; }
.st-row.is-dirty { background: color-mix(in srgb, var(--o-accent) 7%, transparent); box-shadow: inset 3px 0 0 var(--o-accent); }
.st-row.is-error { box-shadow: inset 3px 0 0 var(--o-bad); }
.st-title { display: flex; align-items: center; gap: 6px; }
.st-title label { font-weight: 600; font-size: 14px; cursor: pointer; }
.st-fav { padding: 0 4px; border: 0; background: none; color: var(--o-line-strong); font-size: 15px; line-height: 1; cursor: pointer; }
.st-fav:hover { color: var(--o-warn); }
.st-fav.is-on { color: var(--o-warn); }
.st-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.st-meta code { color: var(--o-muted); font-size: 11.5px; overflow-wrap: anywhere; }
.st-meta .ops-pill { font-size: 11px; padding: 1px 7px; }
.st-meta .ops-pill .icon { width: 12px; height: 12px; }
.st-desc { margin: 6px 0 0; color: var(--o-text-2); font-size: 13px; line-height: 1.45; }
.st-warn { display: flex; gap: 6px; margin: 6px 0 0; color: var(--o-warn); font-size: 12.5px; }
.st-warn .icon { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.st-control { display: grid; gap: 4px; justify-items: stretch; }
.st-control input:not([type=checkbox]), .st-control select, .st-control textarea { width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-sunken); color: var(--o-text); font: inherit; font-size: 13.5px; }
.st-control textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.st-control :disabled { opacity: .65; cursor: not-allowed; }
.st-switch { justify-self: end; }
.st-default { color: var(--o-muted); font-size: 12px; }
.st-error { color: var(--o-bad); font-size: 12px; }
.st-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.st-inline input { flex: 1 1 220px; min-height: 40px; padding: 0 12px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-sunken); color: var(--o-text); font: inherit; }
.st-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.st-ov h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.st-ov-items { display: flex; flex-wrap: wrap; gap: 6px; }
.st-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--o-line); border-radius: 999px; background: var(--o-sunken); color: var(--o-text-2); font: inherit; font-size: 13px; cursor: pointer; }
.st-chip span { color: var(--o-muted); font-size: 11.5px; }
.st-chip:hover { border-color: var(--o-accent); color: var(--o-accent-text); }
.st-savebar { position: sticky; bottom: calc(var(--safe-bottom, 0px) + 8px); }
@media (max-width: 900px) {
  .st-layout { grid-template-columns: minmax(0, 1fr); }
  .ops-card.st-nav { position: static; max-height: none; }
  .st[data-view=list] .st-main { display: none; }
  .st[data-view=section] .st-nav { display: none; }
  .st-back { display: inline-grid; }
  .st-row { grid-template-columns: minmax(0, 1fr); }
  .st-switch { justify-self: start; }
  .st-overview { grid-template-columns: minmax(0, 1fr); }
}

/* Grace access */
.gr-issues ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.gr-issues li { display: flex; gap: 8px; font-size: 13.5px; }
.gr-issues li .icon { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.gr-issue--error { color: var(--o-bad); }
.gr-issue--warning { color: var(--o-warn); }
.ops-card.gr-issues.is-error { border-color: color-mix(in srgb, var(--o-bad) 40%, var(--o-line)); }
.gr-issues h3 { margin: 0; font-size: 15px; }
.gr-health { margin: 14px 0; }
.gr-form { display: grid; gap: 14px; }
.gr-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gr-restart { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--o-accent-text) !important; font-size: 12px; }
.gr-restart .icon { width: 13px; height: 13px; }
.gr-squad select, .gr-squad input, .gr-form select { width: 100%; min-height: 40px; margin-top: 6px; padding: 0 10px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-sunken); color: var(--o-text); font: inherit; font-size: 13.5px; }
.gr-always { align-items: center; }
.gr-more summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; cursor: pointer; list-style: none; }
.gr-more summary::-webkit-details-marker { display: none; }
.gr-more summary h3 { margin: 0; }
.gr-more summary::after { content: "▾"; margin-left: auto; color: var(--o-muted); }
.gr-more[open] summary::after { content: "▴"; }
.gr-sub { margin: 18px 0 4px; font-size: 14px; }
.gr-errors { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.gr-errors li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.gr-errors code { flex-basis: 100%; padding: 6px 8px; border-radius: 6px; background: var(--o-sunken); color: var(--o-bad); font-size: 12px; overflow-wrap: anywhere; }
.gr-sess-tabs { margin: 0 16px 10px; }
.gr-err { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Apps */
.ap-status-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ap-status-row h3 { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ap-status-row p { margin: 0; }
.ops-card.ap-status.is-off { border-color: color-mix(in srgb, var(--o-bad) 40%, var(--o-line)); }
.ap-configs { display: grid; gap: 8px; }
.ap-config { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--o-line); border-radius: 10px; }
.ap-config > div { display: grid; gap: 2px; min-width: 0; }
.ap-config.is-on { border-color: var(--o-accent); background: var(--o-accent-soft); }
.ap-off { margin-top: 12px; }
.ap-preview-head h3 { margin: 0 0 4px; }
.ap-platforms { margin: 12px 0; }
.ap-apps { display: grid; gap: 8px; }
.ap-app { border: 1px solid var(--o-line); border-radius: 10px; background: var(--o-sunken); }
.ap-app summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; }
.ap-app summary .ops-dim { margin-left: auto; font-size: 12px; }
.ap-steps { margin: 0; padding: 0 14px 12px 34px; display: grid; gap: 10px; }
.ap-steps p { margin: 4px 0 0; color: var(--o-text-2); font-size: 13px; line-height: 1.45; }
.ap-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ap-btn { display: inline-grid; padding: 6px 10px; border-radius: 8px; background: var(--o-accent-soft); color: var(--o-accent-text); font-size: 12.5px; font-weight: 600; }
.ap-btn small { color: var(--o-muted); font-weight: 400; font-size: 11px; }
.ap-edit-note { display: flex; gap: 8px; margin: 12px 0 0; }
.ap-edit-note .icon { flex: none; width: 17px; height: 17px; }

/* Servers */
.sv-list { display: grid; gap: 10px; }
.ops-card.sv-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; }
.sv-card:not(:has(.ch-order)) { grid-template-columns: minmax(0, 1fr) auto; }
.sv-card.is-off .sv-main { opacity: .6; }
.sv-main h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 15px; }
.sv-flag { font-size: 18px; }
.sv-main p { margin: 0 0 8px; }
.sv-usage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; font-size: 12.5px; color: var(--o-text-2); }
.sv-usage .tr-track { flex: 1 1 120px; max-width: 220px; }
.sv-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.sv-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.sv-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-facts dd { overflow-wrap: anywhere; }

/* Remnawave */
.rw-tabs { margin: 0 0 14px; }
.rw-periods { grid-template-columns: minmax(0, 1fr); }
.rw-periods dd small { display: block; font-weight: 400; font-size: 11.5px; }
.rw-mem { display: block; margin-top: 6px; max-width: 200px; }
.rw-note { margin: 10px 0 0; font-size: 12.5px; }
.rw-tools { justify-content: space-between; }
.rw-nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ops-card.rw-node { display: grid; gap: 8px; align-content: start; }
.rw-node.is-off { opacity: .7; }
.rw-node-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rw-node-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.rw-addr { margin: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.rw-node-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rw-msg { margin: 0; font-size: 12.5px; }
.rw-node-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 8px; }
.rw-node-detail dd { overflow-wrap: anywhere; }
.rw-geo { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--o-line); }
.rw-geo-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.rw-geo-form select { flex: 1 1 200px; min-height: 40px; padding: 0 10px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-sunken); color: var(--o-text); font: inherit; }
.rw-geo-wait { display: flex; align-items: center; gap: 10px; color: var(--o-muted); font-size: 13px; }
.rw-geo-wait .ops-loading { display: inline-flex; padding: 0; }
.rw-geo-img { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 10px; background: #fff; }
.rw-json { max-height: 300px; overflow: auto; margin: 8px 0 0; padding: 10px; border-radius: 8px; background: var(--o-sunken); font-size: 11.5px; }
.rw-lead { margin: 0 0 12px; }
.rw-inbounds { display: flex; flex-wrap: wrap; gap: 4px; }
.rw-inb { padding: 3px 8px; border-radius: 6px; background: var(--o-sunken); color: var(--o-text-2); font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.rw-inb small { color: var(--o-muted); }
.rw-inb-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; max-height: 45vh; overflow-y: auto; }
.rw-inb-picks .ops-pick { justify-content: flex-start; min-height: 0; padding: 8px 10px; border-radius: 10px; }
.rw-inb-picks .ops-pick span { display: grid; gap: 1px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.rw-acts { grid-template-columns: minmax(0, 1fr); }
.rw-last { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; }
.rw-rec ul { margin: 8px 0; padding-left: 18px; }
.rw-rec h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.rw-rec--high { border-color: color-mix(in srgb, var(--o-bad) 40%, var(--o-line)) !important; }
.rw-sync { display: grid; gap: 8px; }
.rw-sync-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--o-line); border-radius: 10px; }
.rw-sync-row > div { display: grid; gap: 2px; flex: 1 1 260px; }
.rw-sync-row small { color: var(--o-muted); font-size: 12.5px; }
.rw-sync-row.is-risky { border-color: color-mix(in srgb, var(--o-warn) 35%, var(--o-line)); }
.ops-alert--ok { border-color: color-mix(in srgb, var(--o-ok) 35%, transparent); background: var(--o-ok-bg); color: var(--o-ok); }
.rw-sync-done { display: flex; gap: 8px; margin-top: 12px; white-space: normal; }
.rw-sync-done .icon { flex: none; width: 18px; height: 18px; }
.rw-days { margin-top: 8px; }
@media (max-width: 760px) {
  .gr-modes { grid-template-columns: minmax(0, 1fr); }
  .ops-card.sv-card { grid-template-columns: auto minmax(0, 1fr); }
  .sv-card:not(:has(.ch-order)) { grid-template-columns: minmax(0, 1fr); }
  .sv-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .sv-facts, .rw-node-detail { grid-template-columns: minmax(0, 1fr); }
  .rw-nodes { grid-template-columns: minmax(0, 1fr); }
}

/* Updates */
.up-status.has-update { border-color: color-mix(in srgb, var(--o-accent) 40%, var(--o-line)); }
.up-list { display: grid; gap: 10px; margin-top: 14px; }
.ops-card.up-release { padding: 0; }
.up-release summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; cursor: pointer; list-style: none; }
.up-release summary::-webkit-details-marker { display: none; }
.up-release summary > div { display: grid; gap: 2px; }
.up-release.is-new { border-color: color-mix(in srgb, var(--o-accent) 35%, var(--o-line)); }
.up-notes { padding: 0 18px 16px; border-top: 1px solid var(--o-line); font-size: 13.5px; line-height: 1.55; color: var(--o-text-2); overflow-wrap: anywhere; }
.up-notes h3, .up-notes h4, .up-notes h5 { margin: 14px 0 6px; color: var(--o-text); font-size: 14px; }
.up-notes ul, .up-notes ol { margin: 6px 0; padding-left: 20px; }
.up-notes code { padding: 1px 5px; border-radius: 4px; background: var(--o-sunken); font-size: 12px; }
.up-cabinet summary { display: grid; gap: 4px; cursor: pointer; list-style: none; }
.up-cabinet summary h3 { margin: 0; }

/* Info pages & legal */
.ip-langs, .lg-langs, .em-langs { margin-bottom: 4px; }
.ip-dot { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--o-accent); vertical-align: middle; }
.ip-type { grid-template-columns: 1fr 1fr; }
.ip-qas { display: grid; gap: 10px; margin: 8px 0; }
.ip-qa { padding: 10px; border: 1px solid var(--o-line); border-radius: 10px; background: var(--o-sunken); }
.ip-qa-head { display: flex; gap: 6px; margin-bottom: 8px; }
.ip-qa-head input { flex: 1; min-height: 38px; padding: 0 10px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-card); color: var(--o-text); font: inherit; font-weight: 600; }
.ip-add { width: 100%; }
.lg-docs { margin-bottom: 14px; }
.lg-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lg-top h3 { margin: 0 0 4px; }
.lg-top p { margin: 0; }
.lg-mode { min-width: 220px; }
.lg-mode select { min-height: 38px; }
.lg-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.lg-text { width: 100%; min-height: 360px; padding: 10px 12px; border: 1px solid var(--o-line); border-radius: 10px; background: var(--o-sunken); color: var(--o-text); font: 13.5px/1.55 inherit; resize: vertical; }
.lg-preview { max-height: 520px; overflow-y: auto; padding: 12px 14px; border: 1px solid var(--o-line); border-radius: 10px; background: var(--o-card); font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.lg-preview p { margin: 0 0 10px; }
.lg-preview ul, .lg-preview ol { margin: 0 0 10px; padding-left: 20px; }
.lg-preview h1, .lg-preview h2, .lg-preview h3, .lg-preview h4 { margin: 12px 0 6px; font-size: 15px; }
.lg-faq-head { margin: 16px 0 10px; }
.lg-snippet { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Email templates */
.em-group { margin-bottom: 18px; }
.em-group h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 15px; }
.em-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ops-card.em-item { display: grid; gap: 4px; align-content: start; color: inherit; text-decoration: none; }
.ops-card.em-item:hover { border-color: var(--o-accent); }
.em-item.is-off { opacity: .65; }
.em-enabled { margin-bottom: 14px; }
.em-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.em-code { width: 100%; min-height: 380px; padding: 10px 12px; border: 1px solid var(--o-line); border-radius: 10px; background: var(--o-sunken); color: var(--o-text); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.em-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; }
.em-var { padding: 3px 7px; border: 1px solid var(--o-line); border-radius: 6px; background: var(--o-sunken); color: var(--o-text-2); font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.em-var:hover { border-color: var(--o-accent); color: var(--o-accent-text); }
.em-var.is-required { border-color: color-mix(in srgb, var(--o-warn) 45%, var(--o-line)); color: var(--o-warn); }
.em-var.is-common { opacity: .75; }
.em-form [data-unknown] { margin-top: 10px; }
.em-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.em-actions .ou-inline { margin-left: auto; }
.ops-card.em-preview-card { position: sticky; top: calc(var(--safe-top, 0px) + 76px); padding: 0; overflow: hidden; }
.em-preview-card .sl-panel-head { padding: 12px 16px; }
.em-frame { display: block; width: 100%; height: 620px; border: 0; border-top: 1px solid var(--o-line); background: #fff; }
.em-note { margin: 0; padding: 8px 16px; font-size: 12px; }

/* BSCHEKER & DPI checker */
.rc-steps { margin: 0; padding-left: 20px; display: grid; gap: 14px; }
.rc-steps li { display: grid; gap: 4px; }
.rc-steps li > span { color: var(--o-muted); font-size: 13px; }
.rc-steps input:not([type=checkbox]) { max-width: 520px; min-height: 40px; padding: 0 12px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-sunken); color: var(--o-text); font: inherit; }
.rc-setup > .ops-button, .rc-setup > p { margin-top: 14px; }
.rc-tabs { margin: 14px 0; }
.rc-sum-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; }
.rc-sum-head h3 { margin: 0 0 4px; }
.rc-sum-head p { margin: 0; }
.rc-sum-head select { min-height: 36px; padding: 0 10px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-sunken); color: var(--o-text); font: inherit; }
.rc-matrix th small { display: block; color: var(--o-muted); font-weight: 400; font-size: 11px; }
.rc-matrix td:first-child small { display: block; }
.rc-cell { text-align: center; }
.rc-v { display: inline-block; min-width: 38px; padding: 3px 6px; border: 0; border-radius: 6px; background: var(--o-sunken); color: var(--o-muted); font: 600 11.5px inherit; cursor: pointer; }
span.rc-v { cursor: default; }
.rc-v--reachable { background: var(--o-ok-bg); color: var(--o-ok); }
.rc-v--blocked { background: var(--o-bad-bg); color: var(--o-bad); }
.rc-v--down { background: var(--o-warn-bg); color: var(--o-warn); }
.rc-v.is-unexpected { box-shadow: 0 0 0 2px var(--o-bad); }
.rc-launch { display: grid; gap: 14px; }
.rc-hosts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; max-height: 360px; overflow-y: auto; margin-top: 6px; }
.rc-hosts .is-off { opacity: .6; }
.rc-launch textarea, .rc-launch input:not([type=checkbox]):not([type=radio]), .rc-launch select { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-sunken); color: var(--o-text); font: inherit; }
.rc-quote h3 { margin: 0 0 8px; }
.dc-src { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.dc-sum { margin: 10px 0; }
.ops-card.dc-res { padding: 0; margin-top: 8px; }
.dc-res summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; }
.dc-res summary .ops-dim { flex: 1; font-size: 12.5px; }
.dc-res .ops-table-wrap { border-top: 1px solid var(--o-line); }
@media (max-width: 900px) {
  .em-layout, .lg-edit { grid-template-columns: minmax(0, 1fr); }
  .ops-card.em-preview-card { position: static; }
  .em-frame { height: 480px; }
  .lg-text { min-height: 260px; }
}
.ip-langs, .lg-langs, .em-langs, .lg-docs, .rc-tabs, .rw-tabs, .ap-platforms, .gr-sess-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ip-langs::-webkit-scrollbar, .lg-langs::-webkit-scrollbar, .em-langs::-webkit-scrollbar, .lg-docs::-webkit-scrollbar { display: none; }
.nw-main .ops-card.tf-section { min-width: 0; }

/* Roles, policies, audit, system errors */
.rb-dot { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: middle; }
.rb-matrix { display: grid; gap: 10px; }
.rb-super { padding: 10px 12px; border: 1px solid var(--o-line); border-radius: 10px; }
.rb-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; padding-right: 4px; }
.rb-matrix.is-all .rb-sections { opacity: .55; }
.rb-section { margin: 0; padding: 8px 10px 10px; border: 1px solid var(--o-line); border-radius: 10px; }
.rb-section legend { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-weight: 600; font-size: 13.5px; }
.rb-section legend label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rb-section legend .ops-dim { font: 400 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.rb-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.rb-actions .ops-pick { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.rb-count { margin: 0; padding: 12px 16px 0; }
.rb-found { display: grid; gap: 4px; margin-top: 6px; }
.rb-explain ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; color: var(--o-text-2); font-size: 13.5px; }
.rb-explain h3 { margin: 0; }
.rb .ch-main p { margin: 4px 0 0; }
.rb-time { display: flex; align-items: center; gap: 8px; }
.rb-time input { flex: 1; min-height: 40px; padding: 0 10px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-sunken); color: var(--o-text); font: inherit; }
.al-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.al-filters select, .al-filters input { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--o-line); border-radius: 8px; background: var(--o-sunken); color: var(--o-text); font: inherit; }
.al-search { grid-column: span 2; }
.al-val { overflow-wrap: anywhere; }
.se-top ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.se-top-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--o-text); font: inherit; text-align: left; cursor: pointer; }
.se-top-row:hover { background: var(--o-hover); }
.se-top-row > span:last-child { display: grid; gap: 2px; min-width: 0; }
.se-top-row small { overflow-wrap: anywhere; }
.se-top { margin-bottom: 14px; }
.se-list { display: grid; }
.se-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 16px; border: 0; border-top: 1px solid var(--o-line); background: none; color: var(--o-text); font: inherit; text-align: left; cursor: pointer; }
.se-row:first-child { border-top: 0; }
.se-row:hover { background: var(--o-hover); }
.se-when { color: var(--o-muted); font-size: 12.5px; }
.se-main { display: grid; gap: 2px; min-width: 0; }
.se-text { color: var(--o-text-2); font-size: 13px; overflow-wrap: anywhere; }
.se-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.se-tb { max-height: 360px; }
.se-tb-head { display: flex; align-items: center; gap: 8px; }
@media (max-width: 700px) {
  .al-search { grid-column: auto; }
  .se-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}