/* Thin overlay on Tabler. No custom atmosphere / cursor glow. */
:root, [data-bs-theme="dark"] {
  --text: var(--tblr-body-color, #fcfdfe);
  --muted: var(--tblr-secondary, #6b7280);
  --line: var(--tblr-border-color, #2c3c56);
  --line-strong: var(--tblr-border-color-translucent, #2c3c56);
  --accent: var(--tblr-primary, #066fd1);
  --accent-2: var(--tblr-primary, #066fd1);
  --ok: var(--tblr-success, #2fb344);
  --danger: var(--tblr-danger, #d63939);
  --font: var(--tblr-font-sans-serif, Inter, system-ui, sans-serif);
  --mono: var(--tblr-font-monospace, ui-monospace, monospace);
}
.step { display: none; }
.step.active { display: block; }
.sess-line { font-size: 0.75rem; color: var(--tblr-secondary); }
.sess-err { font-size: 0.75rem; color: var(--tblr-danger); }
.sess-name { font-weight: 600; }
.sess-go { font-size: 0.75rem; margin-top: 2px; }

button.action {
  background: var(--tblr-primary, #066fd1);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 8px 12px;
  font-weight: 500;
  cursor: pointer;
  font: inherit;
}
button.ghost {
  background: transparent;
  color: var(--tblr-secondary, #6b7280);
  border: 1px solid var(--tblr-border-color, #2c3c56);
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  font: inherit;
}
button.danger {
  background: transparent;
  color: var(--tblr-danger, #d63939);
  border: 1px solid var(--tblr-danger, #d63939);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
}
.qr {
  display: flex;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}
.qr svg { width: 180px; height: 180px; }
.alert:empty { display: none; padding: 0; border: 0; }
code.otpauth { font-size: 0.75rem; word-break: break-all; }

/* Messenger — Tabler tokens */
body.page-account {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--tblr-bg-surface, #1d273b);
  color: var(--tblr-body-color, #fcfdfe);
}
body.page-account .layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  flex: 1;
  min-height: 0;
}
body.page-account nav#tabs {
  border-right: 1px solid var(--tblr-border-color, #2c3c56);
  padding: 12px;
  background: var(--tblr-bg-surface-secondary, #1b2434);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.page-account nav#tabs button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}
body.page-account nav#tabs button.active,
body.page-account nav#tabs button:hover {
  background: rgba(32, 107, 196, 0.15);
  border-color: rgba(32, 107, 196, 0.25);
}
body.page-account nav#tabs .count { float: right; opacity: 0.65; font-size: 0.75rem; }
body.page-account nav#tabs .dim { opacity: 0.7; font-size: 0.82rem; }
body.page-account nav#tabs .nav-gap { height: 10px; }
body.page-account main#view {
  padding: 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--tblr-bg-surface, #1d273b);
}
body.page-account main#view > .pad { padding: 16px 18px 32px; overflow: auto; }

.chat-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--tblr-border-color, #2c3c56); }
.chat-item:hover, .chat-item.active { background: rgba(32, 107, 196, 0.12); }
.split { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; flex: 1; min-height: 0; }
.pane { overflow: hidden; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--tblr-border-color, #2c3c56); }
.pane.thread { border-right: 0; }
.pane-h { padding: 12px 14px; border-bottom: 1px solid var(--tblr-border-color, #2c3c56); font-weight: 600; min-height: 52px; display: flex; align-items: center; gap: 10px; }
.pane-b { flex: 1; overflow: auto; }
.thread-log { padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.bubble-row { display: flex; }
.bubble-row.out { justify-content: flex-end; }
.bubble { max-width: min(78%, 520px); padding: 8px 12px 6px; border-radius: 14px; font-size: 0.92rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.bubble.in { background: #243049; border-bottom-left-radius: 4px; }
.bubble.out { background: #1a3d5c; border-bottom-right-radius: 4px; }
.bubble .stamp { margin-top: 4px; font-size: 0.7rem; opacity: 0.65; text-align: right; }
.composer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--tblr-border-color, #2c3c56); }
.composer input { flex: 1; margin: 0; }
.person, .sess { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--tblr-border-color, #2c3c56); }
.sess { grid-template-columns: 1fr auto; }
.sess .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(32, 107, 196, 0.2); color: #9ec6ea;
  display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 600;
}
.empty { opacity: 0.65; padding: 48px 20px; text-align: center; }
.unread { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--tblr-primary, #206bc4); color: #fff; font-size: 0.7rem; font-weight: 700; text-align: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.block-h { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.65; margin: 18px 0 8px; }
.back-chat { display: none; background: transparent; border: 0; color: var(--tblr-primary, #206bc4); cursor: pointer; font: inherit; }
.rpc-in, .rpc-ta { width: 100%; margin: 8px 0; }
.rpc-ta { min-height: 100px; font-family: var(--tblr-font-monospace, monospace); }
pre { background: #0c1117; border-radius: 8px; padding: 12px; overflow: auto; max-height: 70vh; white-space: pre-wrap; word-break: break-word; }

@media (max-width: 860px) {
  body.page-account .layout { grid-template-columns: 1fr; }
  body.page-account nav#tabs { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--tblr-border-color, #2c3c56); }
  body.page-account nav#tabs button { width: auto; }
  .split { grid-template-columns: 1fr; }
  .split.chat-open .pane.list { display: none; }
  .split:not(.chat-open) .pane.thread { display: none; }
  .back-chat { display: inline; }
}

html.role-pending body { visibility: hidden; }

/* Developer first page — sidebar SPA */
body.page-dev {
  margin: 0;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 240px 1fr;
  background: var(--tblr-bg-surface, #1d273b);
  color: var(--tblr-body-color, #fcfdfe);
}
/* Static sidebar shell: views of different heights show/hide the window
   scrollbar, which used to shift the whole grid horizontally on every tab
   switch. Reserve the scrollbar gutter for the dev shell only and pin the
   sidebar to the viewport so nav geometry never moves. */
html:has(body.page-dev) {
  height: 100%;
  overflow: hidden;
}
body.page-dev .dev-side {
  background: #141a26;
  border-right: 1px solid var(--tblr-border-color, #2c3c56);
  padding: 22px 16px 16px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
@media (min-width: 861px) {
  /* Fixed sidebar leaves the grid, so place the pane in column 2 explicitly.
     Column 1 stays the 240px spacer the sidebar paints over. */
  body.page-dev .dev-main {
    grid-column: 2;
    grid-row: 1;
  }
  body.page-dev .dev-side {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 240px;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
body.page-dev .dev-brand {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  margin: 0 4px 22px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
body.page-dev .dev-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.page-dev .dev-nav button {
  width: 100%;
  text-align: left;
  background: #1e2838;
  color: #fff;
  border: 1px solid #263044;
  border-radius: 6px;
  padding: 11px 14px;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
}
body.page-dev .dev-nav button:hover {
  background: #253044;
}
body.page-dev .dev-nav button.active {
  background: #206bc4;
  border-color: #206bc4;
  color: #fff;
}
body.page-dev .dev-side-foot {
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.78rem;
  color: var(--tblr-secondary, #6b7280);
}
body.page-dev .dev-side-foot button {
  display: block;
  margin-top: 8px;
  width: 100%;
}
body.page-dev .dev-main {
  min-width: 0;
  min-height: 0;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  background: #1a2233;
  display: flex;
  flex-direction: column;
}
body.page-dev .dev-main > #stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
body.page-dev .dev-main.is-home {
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-dev .role-hero {
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 650;
  letter-spacing: -0.03em;
}
body.page-dev .dev-pad {
  padding: 28px 32px 40px;
  max-width: 1100px;
}
body.page-dev .dev-title {
  font-size: 1.35rem;
  font-weight: 650;
  margin: 0 0 6px;
}
body.page-dev .dev-sub {
  color: var(--tblr-secondary, #6b7280);
  margin-bottom: 20px;
}
body.page-dev .soon {
  opacity: 0.7;
  padding: 48px 8px;
}
body.page-dev .dev-pad.wide {
  max-width: none;
  padding: 20px 22px 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
}
.users-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.users-head h2 { flex: 1; margin: 0; font-size: 1.25rem; font-weight: 650; min-width: 160px; }
.users-head .pager { display: flex; gap: 6px; flex-shrink: 0; }
.users-head input {
  width: min(280px, 100%);
  flex: 0 0 min(280px, 100%);
  background: #121826;
  border: 1px solid #2c3c56;
  color: inherit;
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
}
.users-list { max-width: 720px; flex: 1 1 auto; }
.users-split { width: 100%; }
.users-split.has-flyout {
  display: grid;
  grid-template-columns: minmax(260px, 720px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  min-height: calc(100vh - 140px);
}
.users-split.has-flyout .users-list {
  max-width: none;
  min-width: 0;
}
.card-row {
  max-width: 720px;
  margin-bottom: 12px;
}
.card-row .user-card {
  margin-bottom: 0;
  min-width: 0;
}
.card-row.is-open .user-card {
  border-color: #3d5478;
}
.card-row.is-focus {
  overflow: visible;
  position: relative;
  z-index: 4;
}
.card-row.is-focus .user-card,
.user-card.is-focus {
  overflow: visible;
  border-color: #7ee8ff !important;
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  box-shadow:
    0 0 0 2px #7ee8ff,
    0 0 0 8px rgba(56, 220, 255, 0.38),
    0 0 40px 10px rgba(80, 210, 255, 0.72);
  animation: mgr-card-glow 0.9s ease-in-out 3;
}
.card-row.is-focus-out .user-card,
.user-card.is-focus-out {
  animation: none;
  outline-color: transparent;
  box-shadow: none;
  border-color: #2c3c56;
  transition: box-shadow 0.5s ease, outline-color 0.5s ease, border-color 0.5s ease;
}
@keyframes mgr-card-glow {
  0%, 100% {
    box-shadow:
      0 0 0 2px #7ee8ff,
      0 0 0 8px rgba(56, 220, 255, 0.38),
      0 0 40px 10px rgba(80, 210, 255, 0.72);
  }
  50% {
    box-shadow:
      0 0 0 3px #ffffff,
      0 0 0 11px rgba(126, 232, 255, 0.55),
      0 0 52px 14px rgba(90, 230, 255, 0.95);
  }
}
.card-flyout {
  min-width: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  min-height: calc(100vh - 140px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  z-index: 8;
  pointer-events: auto;
  transform-origin: left center;
  position: sticky;
  top: 8px;
  align-self: stretch;
}
.card-flyout.is-in {
  animation: card-fly-in 0.26s ease;
}
@keyframes card-fly-in {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
.card-flyout .user-detail {
  margin: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 980px) {
  .users-split.has-flyout {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .card-flyout {
    position: static;
    min-height: 0;
    max-height: min(70vh, 560px);
    height: auto;
  }
  .card-flyout .user-detail { min-height: 0; height: auto; }
}
.user-card {
  background: #1e2838;
  border: 1px solid #2c3c56;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.user-card-h {
  text-align: center;
  font-weight: 650;
  font-size: 0.92rem;
  padding: 8px 12px;
  border-bottom: 1px solid #2c3c56;
  background: #182030;
}
.user-card-b {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  padding: 12px 14px;
}
.user-card .who { font-weight: 600; }
.user-card .meta { font-size: 0.82rem; color: var(--tblr-secondary, #8b9bb4); line-height: 1.45; margin-top: 4px; }
.user-card .tariff { font-size: 0.75rem; color: var(--tblr-secondary, #8b9bb4); margin-top: 10px; }
.user-card .acts { display: flex; flex-direction: column; gap: 6px; justify-content: flex-start; }
.acc-card .user-card-b { align-items: stretch; }
.acc-card .acts { justify-content: space-between; min-height: 128px; align-items: flex-end; }
.acc-assignee {
  grid-column: 1 / -1;
  justify-self: end;
  align-self: end;
  text-align: right;
  font-size: 0.78rem;
  line-height: 1.3;
  color: #8b9bb4;
  max-width: 100%;
  overflow-wrap: anywhere;
  margin: 0;
}
.user-detail > .acc-assignee {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px 0 2px;
}
.acc-card .btn-assign {
  white-space: normal;
  line-height: 1.2;
  max-width: 11.5rem;
  text-align: center;
}
.acc-link {
  background: none;
  border: 0;
  color: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  display: block;
}
.acc-link:hover { color: #c5d4ea; }
button.itphone-acc-link {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  color: #7eb6ff;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.acc-idbar button.itphone-acc-link { color: #9ec1ff; }
button.itphone-acc-link:hover { color: #d6e6ff; }
.notif-badge {
  background: #206bc4;
  color: #fff;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.notif-badge .n {
  background: #fff;
  color: #206bc4;
  border-radius: 4px;
  padding: 0 5px;
  min-width: 1.2em;
  text-align: center;
}
.acc-idbar {
  background: #0d1117;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  margin: 0 0 10px;
  font-size: 0.9rem;
  word-break: break-all;
}
.num-card .acts { min-height: 110px; }
.num-reg {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #d7e6ff;
  background: #243044;
  border: 1px solid #3a4d6a;
  vertical-align: middle;
  white-space: nowrap;
}
.num-marks { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; overflow: visible; }
.num-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.num-msg-card {
  background: #1e2838;
  border: 1px solid #2c3c56;
  border-radius: 10px;
  margin-bottom: 8px;
  padding: 8px 12px;
  line-height: 1.35;
}
.num-msg-card .msg-id { font-weight: 650; margin-bottom: 6px; line-height: 1.35; }
.num-msg-card .bot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-top: 6px;
}
.num-msg-card .preview {
  color: #8b9bb4;
  font-size: 0.95rem;
  line-height: 1.55;
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.num-msg-card .when { color: #8b9bb4; font-size: 0.82rem; white-space: nowrap; }
.sess-fold { max-height: 280px; overflow: auto; padding-right: 4px; }
.sess-mini {
  border: 1px solid #2c3c56;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #1e2838;
}
.sess-mini .h { font-size: 0.78rem; color: #8b9bb4; }
.sess-mini .fp { font-weight: 700; margin: 6px 0; word-break: break-all; }
.btn-del {
  background: #206bc4;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
}
.btn-signin, .btn-open, .btn-show, .btn-numbers, .btn-go, .btn-card, .btn-mark {
  border: 0;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
}
.btn-signin { background: #2fb344; }
.btn-open { background: #206bc4; }
.btn-numbers { background: #d63939; }
.btn-go { background: #4b5568; padding: 4px 10px; }
.btn-show { background: #4b5568; padding: 4px 10px; }
.user-modal {
  position: relative;
  inset: auto;
  z-index: auto;
  display: block;
  padding: 0;
  pointer-events: none;
}
.user-modal-back {
  display: none;
  pointer-events: none;
}
.user-modal-win {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: none;
  overflow: visible;
  pointer-events: auto;
}
.user-modal-x {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: 0;
  color: #c5d0e0;
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}
.user-detail {
  background: #243049;
  border: 1px solid #2c3c56;
  border-radius: 18px;
  padding: 22px 22px 14px;
  overflow: hidden;
  min-width: 0;
}
.user-detail .kv { margin: 0 0 8px; font-size: 0.95rem; }
.user-detail .kv span { color: var(--tblr-secondary, #8b9bb4); }
.fold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #2c3c56;
  font-size: 0.92rem;
  flex: 0 0 auto;
  min-width: 0;
}
.fold-body { padding: 0 0 10px; font-size: 0.85rem; color: var(--tblr-secondary, #8b9bb4); min-width: 0; }
.fold-body a { color: #9ec6ea; }
.fold-clip {
  padding: 0;
  margin: 0 0 8px;
  max-height: min(38vh, 340px);
  overflow: hidden;
  border-radius: 12px;
  background: #1a2333;
  border: 1px solid #2c3c56;
  min-width: 0;
}
.fold-scroll {
  box-sizing: border-box;
  max-height: min(38vh, 340px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: #3d5478 transparent;
}
.fold-scroll::-webkit-scrollbar { width: 8px; }
.fold-scroll::-webkit-scrollbar-thumb {
  background: #3d5478;
  border-radius: 8px;
}
.fold-scroll .mgr-num-mini,
.fold-scroll .fold-mgr-row {
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
}
.fold-mgr-row {
  display: block;
  padding: 8px 10px;
  border: 1px solid #2c3c56;
  border-radius: 10px;
  background: #1e2838;
  color: #d7e2f0;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  line-height: 1.35;
}
.fold-mgr-row:hover,
.fold-mgr-row:focus-visible {
  border-color: #5b8fd4;
  background: #243044;
  color: #fff;
  outline: none;
}
.fold-scroll .msg-card { margin-bottom: 0; }
.acc-fold-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.fold-scroll .acc-fold-grid { margin: 0; }
.fold-scroll .acc-mini { margin: 0; }
.acc-mini {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: #1e2838;
  border: 1px solid #2c3c56;
  border-radius: 10px;
  padding: 8px 10px;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.acc-mini:hover {
  border-color: #4a6794;
  background: #24344c;
  color: inherit;
}
.acc-mini-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.acc-mini-mail {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #d6e4f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-mini-acts {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.acc-mini-btn {
  border: 0;
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  flex: 0 0 auto;
}
.acc-mini-btn-nums { background: #d63939; }
.acc-mini-btn-msgs { background: #14b8a6; }
.acc-mini-btn-marks { background: #e67e22; }
.acc-mini-btn-revoke { background: #d63939; }
.acc-mini-revoke {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.mark-del-pop .modal-head .user-modal-x.acc-revoke-x {
  color: #d63939;
  font-weight: 800;
}
.mark-del-pop .modal-head .user-modal-x.acc-revoke-x:hover { color: #ff8a8a; }
.acc-mini-btn:hover { filter: brightness(1.12); }
.acc-mini-dev {
  font-size: 0.72rem;
  color: #8b9bb4;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-mini-off {
  flex: 0 0 auto;
  font-size: 0.68rem;
  color: #e6a0a0;
  border: 1px solid #5a3a3a;
  border-radius: 999px;
  padding: 1px 6px;
}
@media (max-width: 600px) {
  .acc-mini-top { flex-wrap: wrap; row-gap: 4px; }
  .acc-mini-acts { margin-left: auto; }
}
.proxy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.proxy-card {
  background: #1e2838;
  border: 1px solid #2c3c56;
  border-radius: 14px;
  padding: 14px 16px 12px;
}
.proxy-card .phost { font-weight: 600; word-break: break-all; }
.proxy-card .phost .proxy-name {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  padding: 2px 6px;
  margin: -2px -6px 0;
  border-radius: 6px;
}
.proxy-card .phost .proxy-name:hover,
.proxy-card .phost .proxy-name:focus {
  border-color: #2c3c56;
  background: #171f2c;
  outline: none;
}
.proxy-card .pmeta { font-size: 0.8rem; color: #8b9bb4; margin-top: 4px; line-height: 1.4; }
.proxy-card .pcount { font-size: 1.35rem; font-weight: 700; margin: 10px 0 2px; }
.proxy-card .pacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.msg-card {
  background: #1e2838;
  border: 1px solid #2c3c56;
  border-radius: 10px;
  margin-bottom: 8px;
  padding: 8px 12px;
  line-height: 1.35;
}
.msg-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-height: 34px;
}
.msg-card-top .msg-id {
  font-weight: 650;
  font-size: 0.95rem;
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
}
.msg-marks { display: flex; gap: 4px; flex-wrap: wrap; overflow: visible; }
.btn-mark { background: #e67e22; padding: 4px 8px; min-width: 42px; }
.btn-mark.on { box-shadow: 0 0 0 2px #fff inset; filter: brightness(1.15); }
.mark-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 1px 2px 1px 0;
}
.mark-pill .btn-mark { padding-right: 12px; }
.mark-pill-x {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 2;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d63939;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.mark-pill:hover .mark-pill-x,
.mark-pill:focus-within .mark-pill-x {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: none), (pointer: coarse) {
  .mark-pill-x {
    opacity: 1;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
  }
}
.mark-del-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.mark-del-pop {
  max-width: 440px;
  width: 100%;
}
.mark-del-who {
  margin-top: 10px;
  font-size: 0.84rem;
  color: #8b9bb4;
  line-height: 1.45;
}
.btn-card { background: #6b7280; }
.msg-add {
  background: #4b5568;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 4px 8px;
  font: inherit;
  font-size: 0.82rem;
}
/* ============ TASK #6: per-owner marker dropdown (.mark-*) ============ */
.mark-add { display: inline-flex; position: relative; align-items: center; }
.mark-add.empty { padding: 0; opacity: 1; text-align: start; }
.mark-add.open { z-index: 70; }
.mark-add.cap .mark-add-btn { opacity: 0.55; cursor: not-allowed; }
.mark-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 60;
  min-width: 190px;
  max-height: 260px;
  overflow-y: auto;
  background: #171f2c;
  border: 1px solid #2c3c56;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.mark-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #e6edf7;
  font: inherit;
  font-size: 0.84rem;
  padding: 6px 8px;
  cursor: pointer;
}
.mark-menu-item:hover { background: #223050; }
.mark-menu-item .mark-menu-check { width: 12px; flex: 0 0 12px; color: #4ade80; }
.mark-menu-item.on { color: #94a3b8; cursor: default; }
.mark-menu-cap { color: #f59e0b; font-size: 0.78rem; padding: 6px 8px 2px; }
.mark-menu-new {
  margin-top: 4px;
  background: transparent;
  border: 0;
  border-top: 1px solid #2c3c56;
  border-radius: 0 0 6px 6px;
  color: #14b8a6;
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  padding: 8px;
  cursor: pointer;
}
.mark-menu-new:hover { filter: brightness(1.2); }
.mark-menu-newform { display: flex; gap: 6px; padding: 6px 4px 4px; }
.mark-menu-newform input {
  flex: 1;
  min-width: 0;
  background: #0d1117;
  border: 1px solid #2c3c56;
  border-radius: 6px;
  color: #e6edf7;
  font: inherit;
  font-size: 0.82rem;
  padding: 4px 8px;
}
.mark-menu-newform input:focus { outline: none; border-color: #14b8a6; }
.mark-menu-newsave {
  background: #14b8a6;
  border: 0;
  border-radius: 6px;
  color: #06281f;
  font: inherit;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
}
.mark-menu-msg { color: #f87171; font-size: 0.76rem; padding: 0 8px 4px; }
.msg-card-bot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
  color: #8b9bb4;
  font-size: 0.95rem;
  line-height: 1.55;
}
.msg-card-bot .preview {
  min-width: 0;
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.55;
  min-height: calc(1.55em * 2);
}
.msg-card-bot > div:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1.55;
  padding-top: 1px;
}
.msg-card.is-fresh {
  animation: msg-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.65), 0 10px 28px rgba(20, 184, 166, 0.2);
}
.num-msg-card.is-unread,
.msg-card.is-unread {
  border-color: #6aabff;
  box-shadow: 0 0 0 1px rgba(106, 171, 255, 0.95), 0 0 18px 2px rgba(32, 107, 196, 0.62);
}
@keyframes msg-card-in {
  0% { opacity: 0; transform: translateY(-18px) scale(0.98); }
  100% { opacity: 1; transform: none; }
}
.msg-card-hist {
  margin-top: 10px;
  max-height: 148px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px;
  background: #151c28;
  border: 1px solid #263044;
  border-radius: 8px;
  scrollbar-gutter: stable;
}
.msg-hist-empty {
  color: #8b9bb4;
  font-size: 0.82rem;
  padding: 8px 2px;
}
.msg-hist-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 2px;
  border-bottom: 1px solid #223044;
}
.msg-hist-row:last-child { border-bottom: 0; }
.msg-from, .msg-hist-from {
  color: #7dd3c7;
  font-weight: 650;
  white-space: nowrap;
}
.msg-hist-from {
  flex: 0 0 auto;
  min-width: 7.5rem;
  font-size: 0.82rem;
}
.msg-hist-text {
  min-width: 0;
  color: #d5deea;
  font-size: 0.84rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-hist-when {
  flex: 0 0 auto;
  color: #8b9bb4;
  font-size: 0.75rem;
  white-space: nowrap;
}
/* ============ Messages page (wireframe screens 1/2) — .msg-* only ============ */
/* Teal «All Messages» on chat cards (was «Open»); grey «Open» is .btn-card */
.msg-btn-open {
  background: #14b8a6;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  flex: 0 0 auto;
}
.msg-btn-open:hover { filter: brightness(1.12); }
.msg-btn-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #3a4c66;
  border-radius: 6px;
  background: #263348;
  color: #d5deea;
  cursor: pointer;
  flex: 0 0 22px;
  transition: transform 0.15s ease, background 0.15s ease;
}
.msg-btn-chev svg { display: block; }
.msg-btn-chev:hover { background: #2e3d54; color: #fff; border-color: #5a7194; }
.msg-btn-chev.on {
  background: #1e3a54;
  transform: rotate(180deg);
}
/* Wireframe: teal All Messages, grey Open (number card) stays visible */
.msg-chats-list .btn-open, .msg-msgs-list .btn-open, .acc-msgs-list .btn-open { background: #14b8a6; }
.msg-card-top .msg-btn-open,
.msg-card-top .btn-card,
.msg-card-top .msg-add {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 4px 10px;
  line-height: 1.35;
  font-size: 0.82rem;
}
/* Task 32: message stacks share the user-card column (left, max 720px).
   Direct child of .dev-pad.wide — not the assign overlay (.acc-assign-win). */
.dev-pad.wide > .users-list {
  max-width: 720px;
  width: 100%;
  align-self: flex-start;
}
.msg-msgs-list,
.msg-chats-list,
.acc-msgs-list { max-width: 720px; }
/* Task 34: number flyout beside a message stack — cards stay 720px, left. */
.users-split.has-flyout > .users-list.msg-chats-list,
.users-split.has-flyout > .users-list.msg-msgs-list,
.users-split.has-flyout > .users-list.acc-msgs-list {
  max-width: 720px;
  width: 100%;
  justify-self: start;
}
@media (max-width: 980px) {
  .users-head { flex-wrap: wrap; }
  .users-head input { width: 100%; flex-basis: 100%; }
}
@media (max-width: 860px) {
  body.page-dev {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: 100vh;
    overflow: hidden;
  }
  body.page-dev .dev-side { min-height: 0; max-height: 42vh; overflow-y: auto; }
  body.page-dev .dev-nav { flex-direction: row; flex-wrap: wrap; }
  body.page-dev .dev-nav button { width: auto; }
  body.page-dev .dev-main { min-height: 0; height: auto; }
}

/* Finance page */
.finance-pill {
  display: inline-block;
  background: #111827;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 650;
  padding: 8px 18px;
  border-radius: 999px;
  margin: 4px 0 12px;
}
.finance-card {
  background: #1e2838;
  border: 1px solid #2c3c56;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.finance-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.finance-kpi {
  background: #121826;
  border: 1px solid #2c3c56;
  border-radius: 10px;
  padding: 12px 14px;
}
.finance-kpi .kpi-label { font-size: 0.78rem; color: #8b9bb4; }
.finance-kpi .kpi-value { font-size: 1.3rem; font-weight: 700; margin-top: 4px; }
.finance-kpi .kpi-sub { font-size: 0.72rem; color: #8b9bb4; margin-top: 4px; }
.finance-kpi .kpi-sub.up { color: #2fb344; }
.finance-kpi .kpi-sub.down { color: #2fb344; }
.finance-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
}
.finance-chart {
  background: #121826;
  border: 1px solid #2c3c56;
  border-radius: 10px;
  padding: 12px;
  min-width: 0;
}
.finance-chart .chart-title {
  font-size: 0.88rem;
  font-weight: 650;
  text-align: center;
  margin-bottom: 8px;
}
.finance-chart svg {
  width: 100%;
  height: auto;
  display: block;
}
.finance-chart .axis-text { font-size: 9px; fill: #8b9bb4; }
.finance-chart .lg { font-size: 9.5px; fill: #c5d0e0; }
.finance-table-wrap { overflow-x: auto; }
.finance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.finance-table th {
  text-align: left;
  color: #8b9bb4;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-bottom: 1px solid #2c3c56;
}
.finance-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #22304a;
}
.finance-table tr:last-child td { border-bottom: 0; }
.finance-table td.strong { font-weight: 650; }
.finance-table td.num { font-weight: 650; }
.finance-sub-card {
  background: #121826;
  border: 1px solid #2c3c56;
  border-radius: 10px;
  padding: 12px 14px;
  max-width: 560px;
}
.finance-sub-card .sub-title { font-size: 0.92rem; font-weight: 650; margin-bottom: 10px; }
.finance-sub-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid #22304a;
  font-size: 0.88rem;
}
.finance-sub-row:first-of-type { border-top: 0; }
.finance-sub-row .name { color: #c5d0e0; }
.finance-sub-row .val { font-weight: 700; white-space: nowrap; }
.finance-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.finance-plan {
  background: #121826;
  border: 1px solid #2c3c56;
  border-radius: 10px;
  padding: 14px;
}
.finance-plan .plan-name { font-size: 1.02rem; font-weight: 700; }
.finance-plan .plan-price { font-size: 1.45rem; font-weight: 700; margin: 6px 0 10px; }
.finance-plan .plan-price span { font-size: 0.82rem; font-weight: 500; color: #8b9bb4; }
.finance-plan .plan-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid #22304a;
  font-size: 0.86rem;
}
.finance-plan .plan-row .k { color: #8b9bb4; }
.finance-plan .plan-row .v { font-weight: 650; }
.finance-user-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 14px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8b9bb4;
}
.finance-user {
  background: #121826;
  border: 1px solid #2c3c56;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  max-width: 900px;
}
.finance-user-h {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 12px 14px;
  cursor: pointer;
}
.finance-user-h .u-login { font-weight: 650; }
.finance-user-h .u-mail { color: #8b9bb4; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; }
.finance-user-h .u-tariff {
  flex-shrink: 0;
  background: #206bc4;
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
}
.finance-user-b {
  padding: 6px 14px 12px;
  border-top: 1px solid #22304a;
  max-width: 560px;
}
.finance-user-b .kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #22304a;
  font-size: 0.88rem;
}
.finance-user-b .kv:last-child { border-bottom: 0; }
.finance-user-b .kv span { color: #8b9bb4; white-space: nowrap; }
.finance-user-b .kv b {
  font-weight: 650;
  text-align: right;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finance-user-b .kv b.token { overflow: visible; text-overflow: clip; white-space: normal; }
.finance-wallet-gauge {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.finance-wallet-gauge svg { flex-shrink: 0; }
.finance-wallet-gauge svg text { font-family: inherit; }
.finance-wallet-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
}
.finance-wallet-legend .legend-title { font-size: 1.05rem; font-weight: 700; }
.finance-wallet-legend .legend-row { color: #8b9bb4; }
.finance-wallet-legend .legend-row b { color: inherit; }
.finance-wallet-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}
.finance-wallet-form input {
  background: #0d1117;
  border: 1px solid #2c3c56;
  color: inherit;
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  width: 180px;
}
.finance-wallet-form input::placeholder { color: #5b6b85; }
.finance-wallet-form button { background: #206bc4; padding: 8px 16px; }
.finance-wallet-form .w-msg { font-size: 0.82rem; color: #8b9bb4; margin-left: 4px; }
.finance-wallet-form .w-msg.ok { color: #2fb344; }
.finance-wallet-form .w-msg.err { color: #e6a0a0; }
.finance-demo-tag {
  float: right;
  font-size: 0.7rem;
  color: #8b9bb4;
  background: #0d1117;
  border: 1px solid #2c3c56;
  border-radius: 999px;
  padding: 2px 10px;
  margin-top: 4px;
}
.finance-soon {
  background: #121826;
  border: 1px dashed #2c3c56;
  border-radius: 10px;
  padding: 10px 14px;
  color: #8b9bb4;
  font-size: 0.88rem;
  margin-bottom: 14px;
  max-width: 560px;
}
@media (max-width: 860px) {
  .finance-user-h .u-mail { display: none; }
  .finance-wallet-form input { width: 120px; }
}

/* ==== Home screen (Главный Пользователь) — .home-/.hero-/.tile-/.bg3d- prefixes only ==== */
body.page-dev .dev-main.is-home {
  display: block;
  position: relative;
  overflow: hidden;
}
body.page-dev .dev-main.is-home > #stage {
  display: block;
  min-height: 0;
  height: 100%;
  flex: none;
}
.bg3d-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(32, 107, 196, 0.16), transparent 62%),
    radial-gradient(820px 460px at 8% 110%, rgba(47, 179, 68, 0.07), transparent 60%),
    #1a2233;
}
.bg3d-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.55;
}
.home-wrap {
  position: relative;
  z-index: 1;
  padding: 34px 38px 42px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1180px;
}
.hero-card {
  background: linear-gradient(135deg, rgba(30, 40, 56, 0.92), rgba(26, 34, 51, 0.78));
  border: 1px solid #2c3c56;
  border-radius: 16px;
  padding: 26px 30px;
  box-shadow: 0 18px 44px rgba(8, 12, 20, 0.35);
}
.hero-kicker {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8b9bb4;
}
.hero-kicker b, .hero-kicker .home-clock {
  color: #c5d0e0;
  font-weight: 600;
}
.hero-role {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 8px 0 6px;
}
.hero-role-badge {
  display: inline-block;
  background: linear-gradient(135deg, #206bc4, #4c9aff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 2px;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-role-badge { background: none; color: #4c9aff; }
}
.hero-sub {
  color: #8b9bb4;
  font-size: 0.95rem;
}
@media (max-width: 860px) {
  .home-wrap { padding: 22px 18px 30px; gap: 16px; }
  .hero-card { padding: 20px 20px; }
}

/* ==== Менеджеры page — .mgr- prefixes only ==== */
.mgr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.mgr-title {
  margin: 0;
  background: #111827;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 650;
  padding: 8px 18px;
  border-radius: 999px;
  display: inline-block;
}
.mgr-create-toggle {
  background: #14b8a6;
  color: #04211f;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.mgr-create-toggle:hover { filter: brightness(1.08); }
.mgr-create {
  background: #1e2838;
  border: 1px solid #2c3c56;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  max-width: 720px;
}
.mgr-create-title {
  font-size: 0.95rem;
  font-weight: 650;
  margin-bottom: 12px;
}
.mgr-create-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mgr-create-row input {
  flex: 1 1 160px;
  min-width: 150px;
  background: #0d1117;
  border: 1px solid #2c3c56;
  color: inherit;
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
}
.mgr-create-row input::placeholder { color: #5b6b85; }
.mgr-create-btn {
  background: #206bc4;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 9px 18px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.mgr-create-btn:hover { filter: brightness(1.1); }
.mgr-create-msg {
  font-size: 0.85rem;
  margin-top: 8px;
  min-height: 1em;
  word-break: break-word;
}
.mgr-create-msg:empty { display: none; }
.sess-add {
  background: #1e2838;
  border: 1px solid #2c3c56;
  border-radius: 12px;
  padding: 16px 18px 14px;
  margin: 0 0 18px;
  max-width: 920px;
}
.sess-add-title {
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0 0 12px;
}
.sess-add-owner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 0.82rem;
  color: #8b9bb4;
  max-width: 360px;
}
.sess-add-owner select {
  background: #0d1117;
  color: inherit;
  border: 1px solid #2c3c56;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
}
.mgr-create-msg.ok { color: #2fb344; }
.mgr-create-msg.err { color: #e6a0a0; }
.mgr-card .acts {
  justify-content: flex-start;
  min-width: 96px;
}
.mgr-detail .fold-body .msg-card { margin-bottom: 8px; }
.mgr-num-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid #2c3c56;
  border-radius: 10px;
  padding: 8px 10px;
  margin: 0;
  background: #1e2838;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}
.mgr-num-mini .mgr-num-phone {
  font-weight: 650;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mgr-num-mini .btn-open { flex: 0 0 auto; }
.mgr-num-acts {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.mgr-num-acts .acc-mini-btn {
  max-width: 100%;
}
.fold-btns { display: inline-flex; gap: 6px; align-items: center; flex-shrink: 0; }
/* Task 40: Уведомления stays in the Сообщения action cluster, in front of Показать. */
.mgr-detail .fold-msg-row {
  position: relative;
  z-index: 4;
  overflow: visible;
}
.mgr-detail .fold-msg-row > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mgr-detail .fold-msg-row .fold-btns {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
}
.mgr-detail .fold-msg-row .notif-badge {
  position: static;
  z-index: 6;
  display: inline-flex;
  visibility: visible;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: none;
  overflow: visible;
  opacity: 1;
}
@media (max-width: 640px) {
  .mgr-create-row input { flex-basis: 100%; }
}

/* ==== Accounts flow (wireframes screens 1-5) — new/derived .acc-* styles only ==== */
/* Notifications badge on account cards is a real button (screen 1) */
button.acc-notif-btn {
  border: 0;
  cursor: pointer;
  font: inherit;
}
button.acc-notif-btn:hover { filter: brightness(1.15); }
/* Detail window header «<email> | <+phone>» (screen 2) */
.acc-detail-head {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding-right: 36px;
}
/* Screen-4 / screen-3 window titles «Все Сообщения …» */
.acc-win-title {
  font-size: 1.05rem;
  margin: 0;
  word-break: break-word;
}
/* Account message windows use the same 720px column as .users-list (task 32). */

/* ============ Numbers: Assign flow (screens 2/3) — .num-* only ============ */
/* Vertical manager picker under the Assign button */
.num-assign-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 0;
}
.num-assign-item {
  background: #182030;
  border: 1px solid #2c3c56;
  color: #dbe6f4;
  border-radius: 8px;
  padding: 9px 14px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
}
.num-assign-item:hover { background: #1e2838; border-color: #3d5178; color: #fff; }
/* Confirmation popup above the manager list */
.num-confirm {
  background: #101828;
  border: 1px solid #2c3c56;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 12px 0 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.num-confirm-text { font-size: 0.92rem; line-height: 1.45; color: #e7eef8; }
.num-confirm-msg { margin-top: 8px; font-size: 0.86rem; font-weight: 600; }
.num-confirm-msg.ok { color: #2fb344; }
.num-confirm-msg.err { color: #e6a0a0; }
.num-confirm-acts { display: flex; gap: 8px; margin-top: 12px; }
/* Red «Assign» button (cards + detail) */
.btn-assign {
  border: 0;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: #d63939;
}
.btn-assign:hover { filter: brightness(1.1); }
/* Notifications badge is clickable now */
button.notif-badge {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
}
button.notif-badge:hover { filter: brightness(1.15); }
/* Numbers list window: rows are buttons into the number messages window */
.acc-num-row {
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border: 1px solid #2c3c56;
  background: #1e2838;
}
.acc-num-row:hover { border-color: #3d5580; }
/* Screen 5: stack of session mini-cards (also inside the detail fold) */
.acc-sess-list { max-height: 280px; overflow: auto; padding-right: 4px; }
.acc-sess-list .sess-mini { display: block; }

/* ==== Derived hooks (audit follow-up): selectors emitted by dev.html renderers
   that had no rule — additive only, existing classes untouched. ==== */
.num-assign-row { justify-content: flex-start; }
.msg-chat-card { border-color: #324158; }
.finance-charts-col { display: grid; gap: 14px; min-width: 0; }
.finance-user-h .u-arrow { flex-shrink: 0; color: #8b9bb4; font-size: 0.8rem; }

/* ==== Manager «Forward Number» (green) — .btn-forward / .mgr-* ============ */
.btn-forward {
  border: 0;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: #2fb344;
}
.btn-forward:hover { filter: brightness(1.1); }
.btn-forward:disabled { opacity: 0.6; cursor: default; }
/* Picker note: current manager self-excluded from forward targets */
.num-assign-note {
  font-size: 0.78rem;
  color: #8ba1c0;
  padding: 2px 4px 0;
}
/* Manager detail hint under the green button */
.mgr-forward-msg {
  margin-top: 8px;
  font-size: 0.8rem;
  color: #8ba1c0;
}

/* ==== TASK #8: modal close-button reserved header row + mobile adaptation ====
   Desktop: identical geometry except the close button now owns its own row —
   offset counteracts Tabler reboot button margins so the × stays visually at
   its previous position; line-height 1 keeps the hit-box tight.
   Mobile (≤600px, consistent with the ≤860px sidebar breakpoint): modals become
   near-fullscreen sheets with sticky close row and no horizontal overflow. */
.user-detail:has(.user-modal-x) { padding-top: 4px; }
.user-modal-x {
  position: sticky;
  top: 0;
  z-index: 5;
  display: block;
  float: right;
  clear: right;
  margin: 14px 0 0;
  margin-right: -4px;
  padding: 4px 8px;
  font: inherit;
}
.user-detail > :first-child:not(.user-modal-x) { margin-top: 0; }
.user-modal-back { z-index: 0; }
.user-modal-win { z-index: 1; }

@media (max-width: 600px) {
  .card-flyout { max-height: min(70dvh, 520px); min-height: 0; }
  .user-detail { border-radius: 14px; padding: 4px 16px 16px; }
  .user-modal-x {
    position: sticky;
    top: 0;
    z-index: 5;
    display: block;
    float: right;
    clear: right;
    margin: 10px 0 0;
    margin-right: -4px;
    padding: 4px 8px;
    background: rgba(36, 48, 73, 0.92);
  }
  .user-detail > :first-child:not(.user-modal-x) { margin-top: 0; }
  .user-detail .kv { margin-bottom: 6px; overflow-wrap: anywhere; }
  .acc-idbar { overflow-wrap: anywhere; }
  .acc-detail-head { padding-right: 32px; }
  .fold { flex-wrap: wrap; row-gap: 8px; }
  .fold > span { min-width: 0; max-width: 100%; }
  .fold .btn-go,
  .fold .btn-show { max-width: 100%; }
  .fold-btns { flex-wrap: wrap; row-gap: 6px; max-width: 100%; }
  .fold-btns .btn-go,
  .fold-btns .btn-show { max-width: 100%; }
  .mgr-num-mini { word-break: break-word; }
  .num-assign-list { max-height: 50vh; overflow-y: auto; }
  .mark-menu { max-width: calc(100vw - 32px); }
  .num-confirm-acts { flex-wrap: wrap; }
  .user-detail pre,
  .user-detail .fold-body { overflow-wrap: anywhere; }
}
/* ==== END TASK #8 ==== */

/* ==== TASK #9: .modal-head close row (matches dev.html modal markup) ====
   Sticky right-aligned row that owns the × button; button itself is normal
   flow inside the row (overrides the legacy float/sticky .user-modal-x). */
.modal-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  margin: 0 -6px;
  background: #243049;
}
.modal-head .user-modal-x {
  position: static;
  float: none;
  clear: none;
  margin: 6px 0 0;
  display: block;
  background: transparent;
  border: 0;
  color: #c5d0e0;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.modal-head .user-modal-x:hover { color: #f08c8c; }

/* ==== TASK #10: «Сессии» view — session table with per-session proxy assign ====
   Wide table under the standard users-head pager row; wrap column so long
   labels don't stretch the grid. */
.sess-table-wrap .table { margin-bottom: 0; }
.sess-table-wrap td { vertical-align: middle; }
.sess-table-wrap td.sess-proxy { min-width: 220px; }
.sess-table-wrap td.sess-proxy .form-select { min-width: 200px; }

/* ==== super_admin «Просмотр как» switcher (.imp-*) ====
   Sidebar popup: role groups with user buttons; .imp-active marks an
   active impersonation session on the trigger button. */
.imp-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 12px;
  right: 12px;
  z-index: 30;
  background: #1e2838;
  border: 1px solid #2c3c56;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(8, 12, 20, 0.5);
  padding: 12px;
  max-height: 70vh;
  overflow-y: auto;
}
.imp-menu-head {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8b9bb4;
  margin-bottom: 10px;
}
.imp-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.imp-group {
  background: #243049;
  border: 1px solid #2c3c56;
  border-radius: 10px;
  padding: 8px;
}
.imp-group-role {
  font-size: 0.72rem;
  color: #8b9bb4;
  margin: 0 2px 6px;
}
.imp-user {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.85rem;
  color: #c5d0e0;
  background: #1a2233;
  border: 1px solid #2c3c56;
  border-radius: 8px;
  padding: 6px 8px;
  margin-top: 6px;
  cursor: pointer;
}
.imp-user:hover { border-color: #206bc4; color: #fff; }
.imp-empty { font-size: 0.78rem; color: #5b6b85; padding: 2px; }
.imp-return {
  margin-top: 8px;
  width: 100%;
  border-color: #206bc4;
  color: #9ec1ff;
}
.imp-return:hover {
  border-color: #3d7fd6;
  color: #fff;
}
#btn-impersonate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#btn-impersonate.imp-active {
  border-color: #206bc4;
  color: #6ea8ff;
}
.dev-side-foot { position: relative; }

/* Bottom numbered pager + page-size filter. Sticky to the section
   scroll container (.dev-main) so the control stays at the foot. */
.page-bar {
  position: sticky;
  bottom: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 16px;
  margin-top: auto;
  padding: 10px 8px 14px;
  background: linear-gradient(180deg, rgba(26, 34, 51, 0) 0%, #1a2233 10px, #1a2233 100%);
  border-top: 1px solid #263044;
}
.page-size {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8b9bb4;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}
.page-size select {
  background: #1e2838;
  color: #fff;
  border: 1px solid #2c3c56;
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.page-nav {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  max-width: none;
}
.page-nav-n,
.page-nav-arr {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: #1e2838;
  color: #c5d4ea;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 34px;
}
.page-nav-n:hover,
.page-nav-arr:hover { background: #263348; color: #fff; }
.page-nav-n.on {
  background: #206bc4;
  color: #fff;
}
.page-nav-n.on:hover { background: #1b5cad; }
.page-nav-arr:disabled,
.page-nav-n:disabled {
  opacity: 0.4;
  cursor: default;
  background: #1e2838;
}
.page-nav-gap {
  min-width: 22px;
  text-align: center;
  color: #8b9bb4;
  font-weight: 700;
  letter-spacing: 1px;
}
@media (max-width: 600px) {
  .page-bar {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .page-nav, .page-size { grid-column: 1; }
  .page-size { justify-self: end; width: 100%; justify-content: flex-end; }
  .page-nav { gap: 4px; }
  .page-nav-n, .page-nav-arr { min-width: 30px; height: 30px; line-height: 30px; padding: 0 7px; font-size: 0.8rem; }
}

/* ==== Task 18: account → assign numbers to manager ======================== */
.acc-assign-who { max-width: 960px; margin: 0 0 10px; }
.acc-assign-msg { margin: 0 0 10px; max-width: 960px; }
.acc-assign-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
  max-width: 960px;
}
.acc-assign-toolbar .btn-open,
.acc-assign-toolbar .btn-signin { padding: 8px 14px; }
.acc-assign-count {
  color: #8b9bb4;
  font-size: 0.85rem;
}
.acc-assign-list.fold-clip {
  max-width: 960px;
  max-height: min(62vh, 640px);
}
.acc-assign-list .fold-scroll {
  max-height: min(62vh, 640px);
  gap: 6px;
}
.acc-assign-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  text-align: left;
  color: #dbe6f4;
  font: inherit;
  cursor: pointer;
  border: 1px solid #2c3c56;
  background: #1e2838;
  border-radius: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
}
.acc-assign-row:hover { border-color: #3d5580; }
.acc-assign-row input {
  accent-color: #206bc4;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
}
.card-flyout .num-assign-item { width: 100%; }
.card-flyout .acc-assign-mgrs {
  margin-top: 8px;
}
.user-card > .acc-assign-mgrs {
  margin: 0 12px 12px;
}

/* ==== Task 28: manager card → assign account numbers ===================== */
.mgr-card .btn-assign {
  white-space: normal;
  line-height: 1.2;
  max-width: 11.5rem;
  text-align: center;
}
.mgr-card .acts { min-width: 118px; }
.card-flyout .mgr-detail .acc-assign-mgrs.fold-clip,
.card-flyout .mgr-detail .acc-assign-mgrs .fold-scroll {
  max-height: min(36vh, 280px);
}
.acc-assign-win .modal-head {
  background: transparent;
  max-width: none;
  margin: 0 0 4px;
}
.acc-assign-win .modal-head .user-modal-x {
  color: #d63939;
  font-size: 1.35rem;
}
.acc-assign-win .modal-head .user-modal-x:hover { color: #f08c8c; }
.card-flyout .fold-clip {
  min-height: 52px;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .acc-assign-list.fold-clip,
  .acc-assign-list .fold-scroll { max-height: min(50vh, 480px); }
}

/* Task 29: centered assign overlay + page dim (covers sidebar via .dev-main stacking) */
body.page-dev.has-acc-assign .dev-main {
  z-index: 90;
  overflow: hidden;
}
body.page-dev.has-acc-assign .dev-side {
  z-index: 1;
}
.acc-assign-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
  background: rgba(4, 8, 16, 0.72);
  pointer-events: auto;
}
.acc-assign-win {
  width: min(960px, 100%);
  max-height: min(88vh, 920px);
  overflow: auto;
  overscroll-behavior: contain;
  background: #243049;
  border: 1px solid #2c3c56;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  padding: 8px 22px 22px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.acc-assign-win .users-head,
.acc-assign-win .acc-assign-who,
.acc-assign-win .acc-assign-msg,
.acc-assign-win .acc-assign-toolbar,
.acc-assign-win .acc-assign-list {
  max-width: none;
}

/* ==== Task 26: number-row Сообщения / Маркеры + read-only marks overlay ==== */
.num-marks-pop-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.num-marks-pop {
  width: 100%;
  max-width: 380px;
  max-height: min(70vh, 480px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #1e2838;
  border: 1px solid #2c3c56;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}
.num-marks-pop-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid #2c3c56;
  font-weight: 650;
  min-width: 0;
  flex: 0 0 auto;
}
.num-marks-pop-h span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.num-marks-pop-h .user-modal-x {
  position: static;
  float: none;
  clear: none;
  margin: 0;
  padding: 2px 8px;
  color: #d63939;
  font-size: 1.35rem;
  line-height: 1;
  flex: 0 0 auto;
}
.num-marks-pop-h .user-modal-x:hover { color: #f08c8c; }
.num-marks-pop-list {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #3d5478 transparent;
}
.num-marks-pop-row {
  background: #243049;
  border: 1px solid #2c3c56;
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 0;
}
.num-marks-pop-lab {
  font-weight: 650;
  color: #f4e6d4;
  overflow: hidden;
  text-overflow: ellipsis;
}
.num-marks-pop-who {
  margin-top: 3px;
  font-size: 0.78rem;
  color: #8b9bb4;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.num-marks-pop-list .empty {
  margin: 8px 4px;
  color: #8b9bb4;
  font-size: 0.85rem;
}

/* ==== Task 30: owner Settings «Мои маркеры» + create overlay ==== */
.my-markers { margin-top: 16px; }
.my-markers-panel {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 420px;
}
.my-markers-list {
  width: 100%;
  max-height: 280px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
  scrollbar-color: #3d5478 transparent;
}
.my-marker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1a2233;
  border: 1px solid #2c3c56;
  border-radius: 8px;
  padding: 7px 10px;
  color: #e7eef8;
  min-width: 0;
}
.my-marker-swatch {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
}
.my-marker-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-marker-act {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid #3d5478;
  color: #dbe6f4;
  border-radius: 6px;
  font: inherit;
  font-size: 0.75rem;
  padding: 3px 8px;
  cursor: pointer;
}
.my-marker-act:hover { border-color: #14b8a6; color: #fff; }
.my-marker-act.danger { border-color: #d63939; color: #f0b4b4; }
.my-marker-act.danger:hover { color: #fff; background: #d63939; }
.my-marker-colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.my-marker-chip {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
}
.my-marker-chip.on { border-color: #fff; }
.my-marker-colors input[type="color"] {
  width: 28px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.mark-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.mark-menu-pill {
  display: inline-block;
  border-radius: 6px;
  padding: 2px 8px;
  font-weight: 650;
  line-height: 1.3;
}
.num-marks-pop-lab { display: flex; align-items: center; min-width: 0; }

/* Task 43: eye hover lists marks; catalog menu is lifted out of the fold scroll. */
.mgr-num-phone { display: flex; align-items: center; gap: 8px; }
.num-eye {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #3d5478;
  border-radius: 6px;
  background: #1a2333;
  color: #9ec6ea;
  cursor: pointer;
}
.num-eye:hover { color: #fff; border-color: #7eb6ea; background: #243044; }
.num-eye-pop {
  position: fixed;
  z-index: 280;
  min-width: 148px;
  max-width: 280px;
  max-height: min(240px, 40vh);
  overflow: auto;
  background: #171f2c;
  border: 1px solid #2c3c56;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 6px;
}
.num-eye-empty {
  color: #8b9bb4;
  font-size: 0.82rem;
  padding: 4px 6px;
}
.num-eye-row { padding: 3px 2px; }
.mark-menu.is-lifted {
  position: fixed;
  z-index: 280;
  right: auto;
  margin: 0;
}
.my-markers-empty {
  color: #8b9bb4;
  font-size: 0.88rem;
  padding: 4px 2px;
}
body.page-dev.has-my-marker .dev-main {
  z-index: 90;
  overflow: hidden;
}
body.page-dev.has-my-marker .dev-side { z-index: 1; }
.my-marker-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
  background: rgba(4, 8, 16, 0.72);
  pointer-events: auto;
}
.my-marker-win {
  width: min(420px, 100%);
  background: #243049;
  border: 1px solid #2c3c56;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  padding: 8px 22px 22px;
  box-sizing: border-box;
}
.my-marker-win .modal-head { background: #243049; }
.my-marker-win .modal-head .user-modal-x {
  color: #d63939;
  font-size: 1.35rem;
}
.my-marker-win .modal-head .user-modal-x:hover { color: #f08c8c; }
.my-marker-title {
  font-weight: 650;
  margin: 0 0 12px;
  color: #e7eef8;
}
.my-marker-win .form-label { color: #8b9bb4; margin-bottom: 6px; }
.my-marker-win .form-control {
  background: #1a2233;
  border: 1px solid #2c3c56;
  color: #e7eef8;
}
.my-marker-win .form-control:focus {
  background: #1a2233;
  color: #e7eef8;
  border-color: #14b8a6;
  box-shadow: none;
}
.my-marker-msg {
  margin-top: 8px;
  color: #e6a0a0;
  font-size: 0.86rem;
  font-weight: 600;
}
.my-marker-acts { margin-top: 14px; }

/* ==== Task 33: static chrome — sidebar fixed, head + page-bar outside the list scroll ====
   Desktop list views (.dev-pad.wide > .users-head): .dev-main does not scroll.
   The head (Back/Next, title, Card/Add/Enter) and the page-bar stay in the
   shell; only the card column / table scrolls. Message stacks stay max-width
   720px and left-aligned. Assign overlay (.acc-assign-win) is not a child of
   .dev-pad.wide, so these rules do not touch it. */
@media (min-width: 861px) {
  body.page-dev .dev-main:has(> #stage > .dev-pad.wide > .users-head) {
    overflow: hidden;
    scrollbar-gutter: auto;
  }
  body.page-dev .dev-main:has(> #stage > .dev-pad.wide > .users-head) > #stage {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: visible;
  }
  body.page-dev .dev-pad.wide:has(> .users-head) {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    padding-top: 0;
  }
  body.page-dev .dev-pad.wide:has(> .users-head) > * {
    flex: 0 0 auto;
  }
  body.page-dev .dev-pad.wide:has(> .users-head) > .users-head {
    position: relative;
    z-index: 16;
    margin: 0 -22px 0;
    padding: 14px 22px 14px;
    background: #1a2233;
  }
  body.page-dev .dev-pad.wide:has(> .users-head) > :first-child:not(.users-head) {
    margin-top: 16px;
  }
  body.page-dev .dev-pad.wide:has(> .users-head) > .page-bar {
    position: relative;
    bottom: auto;
    z-index: 6;
  }
  body.page-dev .dev-pad.wide:has(> .users-head) > .users-list,
  body.page-dev .dev-pad.wide:has(> .users-head) > .users-split,
  body.page-dev .dev-pad.wide:has(> .users-head) > .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
    align-self: stretch;
    width: auto;
    max-width: none;
    margin-left: -22px;
    margin-right: -22px;
    padding-left: 22px;
    padding-right: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Task 32 width lives on the cards once the list itself is the full-pane scroller. */
  body.page-dev .dev-pad.wide:has(> .users-head) > .users-list > .msg-card,
  body.page-dev .dev-pad.wide:has(> .users-head) > .users-list > .num-msg-card,
  body.page-dev .dev-pad.wide:has(> .users-head) > .users-list > .empty,
  body.page-dev .dev-pad.wide:has(> .users-head) > .users-split .users-list > .msg-card,
  body.page-dev .dev-pad.wide:has(> .users-head) > .users-split .users-list > .num-msg-card,
  body.page-dev .dev-pad.wide:has(> .users-head) > .users-split .users-list > .empty {
    max-width: 720px;
    width: 100%;
    box-sizing: border-box;
  }
  body.page-dev .dev-pad.wide:has(> .users-head) > .users-split.has-flyout {
    min-height: 0;
    container-type: size;
    align-items: start;
  }
  body.page-dev .dev-pad.wide:has(> .users-head) > .users-split.has-flyout > .card-flyout {
    position: sticky;
    top: 0;
    align-self: start;
    min-height: 0;
    height: 100cqh;
    max-height: 100cqh;
  }
}
/* Narrow pane: main still scrolls, so pin the same head to that scroller. */
body.page-dev .dev-pad.wide > .users-head {
  position: sticky;
  top: 0;
  z-index: 16;
  background: #1a2233;
}
@media (min-width: 861px) {
  body.page-dev .dev-pad.wide:has(> .users-head) > .users-head {
    position: relative;
  }
}