/*
 * Crypto App admin: design system.
 * Poppins (400–700) + Geist Mono, served from /admin/fonts: the dashboard's CSP allows same-origin fonts only.
 * Graphite surfaces, one blue accent, green/red kept for money moving up or down.
 * Dark by default, light when the system asks for it or the admin picks it (html[data-theme]).
 */
@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/admin/fonts/Poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/admin/fonts/Poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/admin/fonts/Poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/admin/fonts/Poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/admin/fonts/Poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/admin/fonts/Poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/admin/fonts/Poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/admin/fonts/Poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist Mono';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/admin/fonts/GeistMono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist Mono';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/admin/fonts/GeistMono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root {
  --font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* Tones as "r, g, b" so they work inside rgba(). */
  --blue-rgb: 96, 142, 255;
  --green-rgb: 38, 194, 129;
  --amber-rgb: 232, 170, 64;
  --red-rgb: 239, 90, 98;
  --violet-rgb: 150, 128, 250;
  --cyan-rgb: 56, 186, 214;
  --orange-rgb: 236, 128, 60;
  --grey-rgb: 142, 148, 160;
  --accent-rgb: 88, 132, 255;
  --up-rgb: var(--green-rgb);
  --down-rgb: var(--red-rgb);

  /* Surfaces: graphite, a hair cool. */
  --bg: #0b0c0e;
  --sidebar: #0b0c0e;
  --panel: #111316;
  --panel-2: #16181c;
  --panel-3: #1d2025;
  --field: #0e1013;
  --seg-active: #22252b;
  --nav-active: #181a1f;
  --nav-active-ring: inset 0 0 0 1px var(--line);
  --line: #1e2126;
  --line-strong: #2a2e35;
  --field-line: #2a2e35;
  --hover: rgba(255, 255, 255, 0.03);
  --hover-strong: rgba(255, 255, 255, 0.06);

  /* Text */
  --text: #cfd3da;
  --text-strong: #f2f4f7;
  --muted: #8a909b;
  --faint: #5f6570;
  --sidebar-text: #a4aab4;

  /* Brand + status */
  --accent: rgb(var(--accent-rgb));
  --accent-hover: #7098ff;
  --accent-soft: rgba(var(--accent-rgb), 0.12);
  --accent-line: rgba(var(--accent-rgb), 0.4);
  --on-accent: #ffffff;
  --up: rgb(var(--up-rgb));
  --up-soft: rgba(var(--up-rgb), 0.12);
  --down: rgb(var(--down-rgb));
  --down-soft: rgba(var(--down-rgb), 0.12);
  --warn: rgb(var(--amber-rgb));

  /* Shape + depth: crisp corners, hairlines over shadows. */
  --radius: 10px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --shadow: none;
  --shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --ring: 0 0 0 3px rgba(var(--accent-rgb), 0.28);
  --topbar-bg: rgba(11, 12, 14, 0.82);
  --picker-invert: invert(0.75);
  --scrollbar: #2a2e35;
  --backdrop: rgba(4, 5, 7, 0.64);
  --glow: rgba(var(--accent-rgb), 0.14);

  color-scheme: dark;
}

/* Light theme: tokens only. Applied when the admin picks it, or when the system prefers light and no choice was made. */
:root[data-theme='light'] {
  --blue-rgb: 37, 99, 235;
  --green-rgb: 5, 142, 88;
  --amber-rgb: 181, 116, 4;
  --red-rgb: 214, 48, 62;
  --violet-rgb: 110, 76, 226;
  --cyan-rgb: 8, 132, 164;
  --orange-rgb: 214, 98, 16;
  --grey-rgb: 100, 106, 118;
  --accent-rgb: 37, 88, 230;
  --bg: #f5f6f8;
  --sidebar: #fbfbfc;
  --panel: #ffffff;
  --panel-2: #f7f8fa;
  --panel-3: #eef0f3;
  --field: #ffffff;
  --seg-active: #ffffff;
  --nav-active: #ffffff;
  --nav-active-ring: 0 0 0 1px var(--line), 0 1px 2px rgba(16, 24, 40, 0.05);
  --line: #e5e7eb;
  --line-strong: #d4d8de;
  --field-line: #d4d8de;
  --hover: rgba(16, 24, 40, 0.03);
  --hover-strong: rgba(16, 24, 40, 0.055);
  --text: #2b3038;
  --text-strong: #0d1117;
  --muted: #5d6470;
  --faint: #8b919c;
  --sidebar-text: #454b55;
  --accent-hover: #1d4ed8;
  --on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 20px 48px -12px rgba(16, 24, 40, 0.2), 0 0 0 1px rgba(16, 24, 40, 0.06);
  --topbar-bg: rgba(245, 246, 248, 0.85);
  --picker-invert: none;
  --scrollbar: #cfd4db;
  --backdrop: rgba(16, 24, 40, 0.36);
  --glow: rgba(var(--accent-rgb), 0.1);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --blue-rgb: 37, 99, 235;
    --green-rgb: 5, 142, 88;
    --amber-rgb: 181, 116, 4;
    --red-rgb: 214, 48, 62;
    --violet-rgb: 110, 76, 226;
    --cyan-rgb: 8, 132, 164;
    --orange-rgb: 214, 98, 16;
    --grey-rgb: 100, 106, 118;
    --accent-rgb: 37, 88, 230;
    --bg: #f5f6f8;
    --sidebar: #fbfbfc;
    --panel: #ffffff;
    --panel-2: #f7f8fa;
    --panel-3: #eef0f3;
    --field: #ffffff;
    --seg-active: #ffffff;
    --nav-active: #ffffff;
    --nav-active-ring: 0 0 0 1px var(--line), 0 1px 2px rgba(16, 24, 40, 0.05);
    --line: #e5e7eb;
    --line-strong: #d4d8de;
    --field-line: #d4d8de;
    --hover: rgba(16, 24, 40, 0.03);
    --hover-strong: rgba(16, 24, 40, 0.055);
    --text: #2b3038;
    --text-strong: #0d1117;
    --muted: #5d6470;
    --faint: #8b919c;
    --sidebar-text: #454b55;
    --accent-hover: #1d4ed8;
    --on-accent: #ffffff;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-lg: 0 20px 48px -12px rgba(16, 24, 40, 0.2), 0 0 0 1px rgba(16, 24, 40, 0.06);
    --topbar-bg: rgba(245, 246, 248, 0.85);
    --picker-invert: none;
    --scrollbar: #cfd4db;
    --backdrop: rgba(16, 24, 40, 0.36);
    --glow: rgba(var(--accent-rgb), 0.1);
    color-scheme: light;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 13.5px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(var(--accent-rgb), 0.28);
}

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

h1,
h2,
h3,
h4 {
  color: var(--text-strong);
  letter-spacing: -0.015em;
  font-weight: 600;
}

h1 {
  font-size: 20px;
  margin: 0 0 20px;
}

h2 {
  font-size: 15px;
  margin: 0 0 14px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.7);
  outline-offset: 2px;
}

.num {
  font-variant-numeric: tabular-nums;
}

.ico {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-ico {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tile-ico {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--on-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

kbd,
.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--panel-2);
  color: var(--muted);
  font: 500 11px/1 var(--font-mono);
}

/* ---------- Layout ---------- */

.shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: var(--app-h, 100vh);
  transition: grid-template-columns 0.2s ease;
}

.shell.collapsed {
  grid-template-columns: 60px minmax(0, 1fr);
}

/* Sidebar: flat, quiet small-caps groups, the current page marked by a thin accent rule. */
.sidebar {
  position: sticky;
  top: 0;
  height: var(--app-h, 100vh);
  display: flex;
  flex-direction: column;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  color: var(--sidebar-text);
}

.sb-brand {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 18px;
  border-bottom: 1px solid var(--line);
}

.sb-logo {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--text-strong);
}

.sb-logo .tile-ico {
  width: 15px;
  height: 15px;
  stroke: var(--bg);
  stroke-width: 2.2;
}

.sb-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  white-space: nowrap;
}

.sb-tag {
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.sb-toggle {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sb-toggle .ico {
  width: 16px;
  height: 16px;
}

.sb-toggle:hover {
  background: var(--hover-strong);
  color: var(--text-strong);
}

/* Phone-only pieces (see the 760px block): the drawer backdrop, the top-bar menu button and the close icon. */
.sb-backdrop,
.topbar .tb-menu,
.sb-toggle .sbt-close {
  display: none;
}

.sb-nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  scrollbar-width: none;
}

.nav-group {
  margin: 18px 10px 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.nav-link .ico {
  flex: none;
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}

.nav-link:hover {
  background: var(--hover);
  color: var(--text-strong);
  text-decoration: none;
}

.nav-link.active {
  background: var(--nav-active);
  color: var(--text-strong);
  box-shadow: var(--nav-active-ring);
}

.nav-link.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}

.nav-link.active .ico {
  color: var(--text-strong);
}

.nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-badge {
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  background: var(--panel-3);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.nav-badge[hidden] {
  display: none;
}

.sb-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 12px 14px;
  border-top: 1px solid var(--line);
}

.avatar {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-strong);
  background: var(--panel-3);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.sb-user {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.sb-user strong {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-user span {
  font-size: 11.5px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-logout {
  width: 30px;
  height: 30px;
}

.sb-logout:hover {
  color: var(--down);
  background: var(--down-soft);
}

/* Collapsed: icons only; group labels become thin dividers. */
.shell.collapsed .sb-name,
.shell.collapsed .nav-label,
.shell.collapsed .sb-user,
.shell.collapsed .sb-logout,
.shell.collapsed .nav-badge {
  display: none;
}

.shell.collapsed .sb-brand {
  flex-direction: column;
  justify-content: center;
  height: auto;
  padding: 14px 0 10px;
  gap: 10px;
}

.shell.collapsed .sb-nav {
  padding: 10px 10px 16px;
}

.shell.collapsed .nav-link {
  justify-content: center;
  padding: 0;
}

.shell.collapsed .nav-group {
  height: 1px;
  margin: 10px 6px;
  overflow: hidden;
  font-size: 0;
  background: var(--line);
}

.shell.collapsed .sb-foot {
  justify-content: center;
  padding: 12px 0;
}

/* Top bar: breadcrumb on the left, search and tools on the right. */
.content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  background: var(--topbar-bg);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}

.tb-crumbs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  white-space: nowrap;
}

.tb-crumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
}

.tb-crumbs li + li::before {
  content: '/';
  color: var(--faint);
}

.tb-crumbs .crumb-link {
  color: var(--muted);
}

.tb-crumbs .crumb-link:hover {
  color: var(--text-strong);
  text-decoration: none;
}

.tb-crumbs li:last-child {
  color: var(--text-strong);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-search {
  position: relative;
  width: min(300px, 30vw);
  margin-right: 4px;
}

.tb-search .ico {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}

.tb-search input[type='search'] {
  height: 34px;
  padding: 0 40px 0 32px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 13px;
}

.tb-search input[type='search']:hover {
  border-color: var(--line-strong);
}

.tb-search .kbd {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.tb-search:focus-within .kbd {
  display: none;
}

.icon-btn {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.icon-btn .ico {
  width: 17px;
  height: 17px;
}

.icon-btn:hover {
  background: var(--hover-strong);
  color: var(--text-strong);
  text-decoration: none;
}

.bell-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--down);
  box-shadow: 0 0 0 2px var(--bg);
}

.bell-dot[hidden] {
  display: none;
}

/* Theme toggle shows the icon of the theme you'd switch to. */
.theme-btn .ico-sun {
  display: none;
}

:root[data-theme='light'] .theme-btn .ico-sun {
  display: block;
}

:root[data-theme='light'] .theme-btn .ico-moon {
  display: none;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-btn .ico-sun {
    display: block;
  }

  :root:not([data-theme]) .theme-btn .ico-moon {
    display: none;
  }
}

.tb-sep {
  width: 1px;
  height: 20px;
  margin: 0 6px;
  background: var(--line-strong);
}

/* Kept for pages that still render a sign-out button of their own. */
.logout-btn {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.logout-btn .ico {
  width: 16px;
  height: 16px;
}

.logout-btn:hover {
  color: var(--down);
  border-color: rgba(var(--down-rgb), 0.4);
  background: var(--down-soft);
}

/* Demo data switch: label and a small track that lights up when on. */
.demo-btn {
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.demo-btn .ico {
  width: 15px;
  height: 15px;
}

.demo-btn:hover {
  color: var(--text-strong);
  background: var(--hover-strong);
}

.demo-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.demo-btn-track {
  position: relative;
  width: 24px;
  height: 14px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background 0.2s;
}

.demo-btn-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s;
}

.demo-btn.on {
  color: var(--warn);
  border-color: rgba(var(--amber-rgb), 0.35);
  background: rgba(var(--amber-rgb), 0.08);
}

.demo-btn.on .demo-btn-track {
  background: var(--warn);
}

.demo-btn.on .demo-btn-track::after {
  transform: translateX(10px);
}

/* A slim notice under the top bar while demo data is on. */
.demo-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 28px;
  border-bottom: 1px solid rgba(var(--amber-rgb), 0.22);
  background: rgba(var(--amber-rgb), 0.07);
}

.demo-banner-ico {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--warn);
}

.demo-banner-ico .ico {
  width: 15px;
  height: 15px;
}

.demo-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  font-size: 12.5px;
}

.demo-banner-text strong {
  color: var(--warn);
  font-weight: 600;
}

.demo-banner-text span {
  color: var(--muted);
}

.demo-banner .btn {
  flex: none;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

/* Page title under the top bar; lines up with the page below it. */
.page-header {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 26px 32px 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.page-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.022em;
  color: var(--text-strong);
}

.page-header p {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

.ph-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.ph-actions:empty {
  display: none;
}

.main {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 22px 32px 56px;
  min-width: 0;
  animation: page-in 0.25s ease-out;
}

/* Refreshing the same page (a filter or tab changed): no entrance animation, and the old
   content dims only if loading takes more than a moment. */
.main.no-enter {
  animation: none;
}

.main.refreshing {
  opacity: 0.6;
  transition: opacity 0.2s ease 0.15s;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}

.loading {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  padding: 40px 0;
}

.spinner-lg {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.page-head h1 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.018em;
}

.page-head:has(> h1:only-child),
.page-head:empty {
  display: none;
}

.panel > h2 {
  font-size: 14px;
  margin-bottom: 4px;
}

.panel > h2 + .muted {
  margin-top: 0;
}

.panel,
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

.card {
  margin-top: 16px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.card-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.small {
  font-size: 12.5px;
}

.pos {
  color: var(--up);
}

.neg {
  color: var(--down);
}

/* KPI cards: flat surface, label, figure, and a small tinted icon in the card's tone. */
.kpi-grid {
  display: grid;
  gap: 12px;
}

.kpi-grid + .kpi-grid {
  margin-top: 12px;
}

.kpi-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpi-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kpi {
  --tone: var(--blue-rgb);
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 112px;
  padding: 16px 16px 14px 18px;
  border-radius: var(--radius);
  color: var(--text);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: border-color 0.15s, background 0.15s;
  overflow: hidden;
}

a.kpi:hover {
  text-decoration: none;
  border-color: var(--line-strong);
  background: var(--panel-2);
}

.kpi.blue {
  --tone: var(--blue-rgb);
}

.kpi.green {
  --tone: var(--green-rgb);
}

.kpi.amber {
  --tone: var(--amber-rgb);
}

.kpi.red {
  --tone: var(--red-rgb);
}

.kpi.violet {
  --tone: var(--violet-rgb);
}

.kpi.cyan {
  --tone: var(--cyan-rgb);
}

.kpi-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kpi-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

.kpi-value {
  margin: 8px 0 8px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.kpi-trend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.kpi-trend.up {
  color: var(--up);
}

.kpi-trend.down {
  color: var(--down);
}

.trend-ico {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kpi-icon {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: rgb(var(--tone));
  background: rgba(var(--tone), 0.1);
}

.kpi-icon .ico {
  width: 16px;
  height: 16px;
  stroke-width: 1.9;
}

/* Sparkline along the bottom of a KPI card. */
.kpi-spark {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 100px;
  height: 30px;
  pointer-events: none;
}

.kpi-spark .spark-line {
  fill: none;
  stroke: rgb(var(--tone));
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.kpi-spark .spark-area {
  fill: rgba(var(--tone), 0.08);
}

/* ---------- Dashboard ---------- */

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 11px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
}

.live-pill.ok .pulse {
  color: var(--up);
}

.live-pill.bad {
  color: var(--down);
  background: var(--down-soft);
  border-color: rgba(var(--down-rgb), 0.35);
}

.live-pill .live-sub {
  color: var(--faint);
  font-weight: 400;
}

.pulse {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.5);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Headline figures: four cards, a trend line along the bottom of each. */
.dx-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dx-kpi {
  --tone: var(--accent-rgb);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 150px;
  padding: 16px 18px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  color: inherit;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}

a.dx-kpi:hover {
  text-decoration: none;
  border-color: var(--line-strong);
}

a.dx-kpi:hover .dx-kpi-go {
  opacity: 1;
  transform: none;
}

.dx-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

.dx-kpi-go {
  width: 14px;
  height: 14px;
  color: var(--faint);
  opacity: 0;
  transform: translate(-2px, 2px);
  transition: opacity 0.15s, transform 0.15s;
}

.dx-kpi-value {
  margin-top: 10px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dx-kpi-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.dx-kpi .kpi-spark {
  position: static;
  display: block;
  width: calc(100% + 36px);
  height: 40px;
  margin: auto -18px 0;
  padding-top: 10px;
}

.dx-kpi-spacer {
  margin-top: auto;
  height: 16px;
}

.trend-chip {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}

.trend-chip .trend-ico {
  width: 13px;
  height: 13px;
}

.trend-chip.up {
  color: var(--up);
}

.trend-chip.down {
  color: var(--down);
}

/* Two columns: chart and activity on the left, the work queue and snapshot on the right. */
.dx-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.dx-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.dx-col > .card {
  margin-top: 0;
}

.dx-card {
  padding: 0;
  overflow: hidden;
}

.dx-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}

.dx-card-head h2 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-strong);
}

.dx-card-head .muted {
  font-size: 12px;
}

.dx-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

.dx-link .ico {
  width: 14px;
  height: 14px;
}

.dx-link:hover {
  color: var(--text-strong);
  text-decoration: none;
}

/* Performance chart */
.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px 4px;
}

.chart-head h2 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

.chart-total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
}

.chart-total strong {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.028em;
  color: var(--text-strong);
}

.chart-total span {
  font-size: 12.5px;
  color: var(--muted);
}

.chart-box {
  position: relative;
}

.chart-card .chart-box {
  padding: 4px 12px 10px 6px;
}

.bar-chart {
  display: block;
  width: 100%;
  height: auto;
}

.bar-chart .bar-rect {
  fill: rgba(var(--accent-rgb), 0.3);
  transition: fill 0.15s;
}

.bar-chart .bar.today .bar-rect,
.bar-chart .bar:hover .bar-rect {
  fill: var(--accent);
}

.bar-chart .grid-line {
  stroke: var(--line);
}

.bar-chart .grid-line.base {
  stroke: var(--line-strong);
}

.bar-chart .axis {
  fill: var(--faint);
  font-size: 11px;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.bar-chart .bar-value {
  fill: var(--text-strong);
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.15s;
}

.bar-chart .bar.today .bar-value,
.bar-chart .bar:hover .bar-value {
  opacity: 1;
}

.bar-chart:hover .bar.today:not(:hover) .bar-value {
  opacity: 0;
}

.bar-chart:hover .bar.today:not(:hover) .bar-rect {
  fill: rgba(var(--accent-rgb), 0.3);
}

.bar-chart .bar-hit {
  fill: transparent;
}

.bar-chart .bar:hover .bar-hit {
  fill: var(--hover);
}

.chart-empty {
  position: absolute;
  inset: 0 0 30px 64px;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--faint);
  pointer-events: none;
}

/* Segmented tabs used above charts */
.dx-card .mini-seg {
  margin-top: 2px;
}

/* Needs attention: a work queue */
.head-count {
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-strong);
  background: var(--panel-3);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.todo-list {
  display: flex;
  flex-direction: column;
}

.todo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  color: inherit;
  transition: background 0.15s;
}

.todo-row + .todo-row {
  border-top: 1px solid var(--line);
}

.todo-row:hover {
  background: var(--hover);
  text-decoration: none;
}

.todo-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.todo-text strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
}

.todo-text span {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todo-count {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}

.todo-row.done .todo-count {
  color: var(--faint);
}

.todo-chev {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--faint);
}

/* Warnings from the server (payment setup, demo mode) under the queue. */
.dx-alerts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 18px 16px;
}

.dx-alert {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--amber-rgb), 0.25);
  background: rgba(var(--amber-rgb), 0.06);
  color: inherit;
  font-size: 12.5px;
  line-height: 1.45;
}

.dx-alert.critical {
  border-color: rgba(var(--red-rgb), 0.3);
  background: rgba(var(--red-rgb), 0.06);
}

a.dx-alert:hover {
  text-decoration: none;
  border-color: rgba(var(--amber-rgb), 0.45);
}

.dx-alert .ico {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--warn);
}

.dx-alert.critical .ico {
  color: var(--down);
}

.dx-alert strong {
  display: block;
  color: var(--text-strong);
  font-weight: 500;
}

.dx-alert span {
  color: var(--muted);
}

/* Exchange snapshot */
.snap-list {
  margin: 0;
  padding: 4px 18px 8px;
}

.snap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.snap-row:first-child {
  border-top: 0;
}

.snap-row dt {
  color: var(--muted);
}

.snap-row dd {
  margin: 0;
  font-weight: 500;
  color: var(--text-strong);
  white-space: nowrap;
}

.snap-val {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Recent activity: a compact table */
.dx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13px;
}

.dx-table th {
  height: 34px;
  padding: 0 18px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

.dx-table td {
  height: 46px;
  padding: 0 18px;
  border-top: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dx-table tr:last-child td {
  border-bottom: 0;
}

.dx-table .r {
  text-align: right;
}

.dx-table tbody tr {
  transition: background 0.12s;
}

.dx-table tbody tr.link {
  cursor: pointer;
}

.dx-table tbody tr.link:hover {
  background: var(--hover);
}

.dx-table .col-event {
  width: 40%;
}

.dx-table .col-amt {
  width: 18%;
}

.dx-table .col-time {
  width: 14%;
}

.dx-event {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dx-event-link {
  min-width: 0;
  display: flex;
  color: inherit;
}

.dx-event-link:hover {
  text-decoration: none;
}

.dx-event strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--text-strong);
}

.dx-dot {
  --tone: var(--grey-rgb);
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgb(var(--tone));
}

.dx-dot.blue {
  --tone: var(--blue-rgb);
}

.dx-dot.green {
  --tone: var(--green-rgb);
}

.dx-dot.amber {
  --tone: var(--amber-rgb);
}

.dx-dot.violet {
  --tone: var(--violet-rgb);
}

.dx-dot.red {
  --tone: var(--red-rgb);
}

.dx-dot.cyan {
  --tone: var(--cyan-rgb);
}

.dx-who {
  color: var(--muted);
}

.dx-table time {
  color: var(--faint);
  font-size: 12.5px;
}

/* Used by other pages: activity list rows and tone icons. */
.activity {
  list-style: none;
  margin: 0 -8px;
  padding: 0;
}

.activity li + li {
  border-top: 1px solid var(--line);
}

.act-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  color: inherit;
}

a.act-row:hover {
  background: var(--hover);
  text-decoration: none;
}

.act-icon {
  --tone: var(--blue-rgb);
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: rgb(var(--tone));
  background: rgba(var(--tone), 0.1);
}

.act-icon .ico {
  width: 15px;
  height: 15px;
}

.act-icon.blue {
  --tone: var(--blue-rgb);
}

.act-icon.green {
  --tone: var(--green-rgb);
}

.act-icon.amber {
  --tone: var(--amber-rgb);
}

.act-icon.violet {
  --tone: var(--violet-rgb);
}

.act-icon.red {
  --tone: var(--red-rgb);
}

.act-icon.cyan {
  --tone: var(--cyan-rgb);
}

.act-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.act-text strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
}

.act-text span {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.act-row time {
  flex: none;
  font-size: 12px;
  color: var(--faint);
}

.dx-empty {
  margin: 0;
  padding: 28px 18px;
  text-align: center;
  color: var(--faint);
}

@media (max-width: 1280px) {
  .dx-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dx-col.side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (max-width: 1200px) {
  .kpi-grid.four,
  .dx-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .dx-col.side {
    display: flex;
    align-items: stretch;
  }

  .dx-table .col-who,
  .dx-table td.who {
    display: none;
  }

  .dx-table .col-event {
    width: auto;
  }

  .dx-table .col-amt {
    width: 30%;
  }

  .dx-table .col-time {
    width: 28%;
  }

  .dx-table th,
  .dx-table td {
    padding: 0 12px;
  }
}

@media (max-width: 480px) {
  .dx-kpis {
    grid-template-columns: minmax(0, 1fr);
  }
}

.grid {
  display: grid;
  gap: 16px;
}

.cards {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  margin-bottom: 16px;
}

.two {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.split {
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  align-items: start;
}

.stat .label {
  color: var(--muted);
  font-size: 13px;
}

.stat .value {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin-top: 4px;
}

.stat .hint {
  color: var(--faint);
  font-size: 12px;
}

/* ---------- Controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text-strong);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, filter 0.15s;
}

.btn:hover:not(:disabled) {
  background: var(--panel-3);
  text-decoration: none;
}

.btn:active:not(:disabled) {
  transform: translateY(0.5px);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn .ico {
  width: 16px;
  height: 16px;
}

.btn.primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn.primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.btn.primary:focus-visible {
  box-shadow: var(--ring);
}

.btn.danger {
  color: var(--down);
}

.btn.danger:hover:not(:disabled) {
  background: var(--down-soft);
  border-color: rgba(var(--down-rgb), 0.4);
}

.btn.small {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 12.5px;
}

.btn.link {
  min-height: 0;
  border: 0;
  background: none;
  color: var(--muted);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn.link:hover:not(:disabled) {
  background: none;
  color: var(--text-strong);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.field label {
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
}

.field .help {
  color: var(--faint);
  font-size: 12px;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='url'],
input[type='number'],
input[type='tel'],
input[type='datetime-local'],
input[type='date'],
select,
textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--text-strong);
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

input::placeholder,
textarea::placeholder {
  color: var(--faint);
}

input:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--line-strong);
  filter: brightness(1.04);
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
  cursor: pointer;
}

select option {
  background: var(--panel);
  color: var(--text-strong);
}

textarea {
  min-height: 96px;
  line-height: 1.55;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

input[type='checkbox'],
input[type='radio'],
input[type='range'] {
  accent-color: var(--accent);
}

input[type='search']::-webkit-search-cancel-button {
  filter: grayscale(1) opacity(0.6);
  cursor: pointer;
}

.select {
  width: auto;
  min-height: 34px;
  height: 34px;
  padding: 0 32px 0 12px;
  border-radius: var(--radius-sm);
  background-color: var(--panel-2);
  border: 1px solid var(--line-strong);
  font-size: 13px;
}

.check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}

.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.toolbar input {
  max-width: 320px;
}

.toolbar select {
  width: auto;
}

.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- Tables & lists ---------- */

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  font-weight: 600;
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 12px 10px;
}

td {
  padding: 12px 12px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}

tbody tr {
  transition: background 0.12s;
}

tbody tr:hover td {
  background: var(--hover);
}

tr.clickable {
  cursor: pointer;
}

.badge {
  --tone: var(--grey-rgb);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  text-transform: capitalize;
  color: rgb(var(--tone));
  background: rgba(var(--tone), 0.12);
  box-shadow: 0 0 0 1px rgba(var(--tone), 0.2) inset;
}

.badge.active,
.badge.published {
  --tone: var(--green-rgb);
}

.badge.blocked {
  --tone: var(--red-rgb);
}

.badge.draft,
.badge.all {
  --tone: var(--grey-rgb);
}

.badge.user {
  --tone: var(--accent-rgb);
}

.list-item {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

.list-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.list-item .title {
  font-weight: 600;
  color: var(--text-strong);
}

.list-item .meta {
  color: var(--faint);
  font-size: 12px;
  margin: 2px 0 6px;
}

.list-item .body {
  white-space: pre-wrap;
  color: var(--muted);
}

.muted {
  color: var(--muted);
}

.empty {
  color: var(--faint);
  text-align: center;
  padding: 32px 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
}

.kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 12px;
  margin: 0 0 18px;
}

.kv dt {
  color: var(--muted);
}

.kv dd {
  margin: 0;
  word-break: break-all;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  color: var(--muted);
}

.fund {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.fund-body {
  flex: 1;
  min-width: 0;
}

.fund .row-actions {
  margin-top: 10px;
}

.shot img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  display: block;
}

.two-even {
  grid-template-columns: 1fr 1fr;
}

.demo-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px 4px;
  margin-bottom: 20px;
  transition: border-color 0.15s, background 0.15s;
}

.demo-box.on {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.demo-box .check {
  margin-bottom: 6px;
}

/* ---------- Charts ---------- */

.chart {
  width: 100%;
  height: 200px;
  display: block;
}

.chart .bar {
  fill: var(--accent);
}

.chart .bar:hover {
  fill: var(--accent-hover);
}

.chart .axis {
  fill: var(--faint);
  font-size: 11px;
}

.chart .grid-line {
  stroke: var(--line);
}

.meter {
  display: grid;
  grid-template-columns: 110px 1fr 40px;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.meter .track {
  height: 6px;
  background: var(--panel-3);
  border-radius: 999px;
  overflow: hidden;
}

.meter .fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

/* ---------- Login ---------- */

.auth {
  position: relative;
  min-height: var(--app-h, 100vh);
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
}

.auth-main {
  position: relative;
  min-height: var(--app-h, 100vh);
  display: grid;
  place-items: center;
  padding: 40px 20px;
}

.auth-box {
  width: 100%;
  max-width: 420px;
  text-align: center;
  animation: pop-in 0.3s ease-out;
}

.auth-tile {
  width: 44px;
  height: 44px;
  margin: 0 auto 20px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--text-strong);
  box-shadow: none;
}

/* Same mark as the sidebar: the page colour on a solid tile. */
.auth-tile .tile-ico {
  width: 22px;
  height: 22px;
  stroke: var(--bg);
  stroke-width: 2.1;
}

.auth-title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-strong);
}

.auth-sub {
  margin: 0 0 28px;
  font-size: 14px;
  color: var(--muted);
}

.auth-card {
  text-align: left;
  padding: 28px 28px 24px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 7px;
  color: var(--text);
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrap input {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--field-line);
  background: var(--field);
  color: var(--text-strong);
  font-size: 14.5px;
  outline: none;
}

.input-wrap input:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.input-action {
  position: absolute;
  right: 5px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}

.input-action .ico {
  width: 18px;
  height: 18px;
}

.input-action:hover {
  color: var(--text-strong);
  background: var(--hover-strong);
}

.input-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.caps {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--warn);
}

.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 13px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.45;
  background: var(--down-soft);
  color: var(--down);
  border: 1px solid rgba(var(--down-rgb), 0.3);
}

.auth-alert[hidden] {
  display: none;
}

.auth-alert .ico {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
}

.auth-submit {
  height: 44px;
  margin-top: 4px;
  border: 0;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--on-accent);
  cursor: pointer;
  background: var(--accent);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
}

.auth-submit:hover {
  background: var(--accent-hover);
}

.auth-submit:active {
  transform: translateY(1px);
}

.auth-submit:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.auth-submit:disabled {
  cursor: default;
  opacity: 0.8;
}

.auth-submit .label-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.auth-submit .label-wrap .btn-ico,
.auth-submit .label-wrap .spinner {
  position: absolute;
  right: 100%;
  top: 50%;
  margin-right: 9px;
  transform: translateY(-50%);
}

.auth-submit .btn-ico {
  width: 16px;
  height: 16px;
}

.auth-submit.busy .label-wrap .spinner {
  transform: translateY(-50%);
  animation: spin-centered 0.7s linear infinite;
}

@keyframes spin-centered {
  from {
    transform: translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

.auth-submit .spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(29, 14, 2, 0.3);
  border-top-color: var(--on-accent);
  animation: spin 0.7s linear infinite;
}

.auth-submit.busy .spinner {
  display: inline-block;
}

.auth-submit.busy .btn-ico {
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.auth-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12.5px;
  color: var(--faint);
}

.auth-foot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 3px var(--up-soft);
}

.auth-theme {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
}

@media (max-width: 480px) {
  .auth-card {
    padding: 22px 18px 20px;
  }
}

.error {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--down-soft);
  color: var(--down);
  border: 1px solid rgba(var(--down-rgb), 0.3);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  margin-bottom: 14px;
}

/* ---------- Toasts ---------- */

#toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 100;
}

.toast {
  --tone: var(--green-rgb);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 380px;
  padding: 11px 16px 11px 14px;
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  color: var(--text-strong);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.toast::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--tone));
  box-shadow: 0 0 0 4px rgba(var(--tone), 0.18);
}

.toast.bad {
  --tone: var(--red-rgb);
  border-color: rgba(var(--down-rgb), 0.35);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

/* ---------- Small screens ---------- */

@media (max-width: 860px) {
  .main {
    padding: 18px 16px 40px;
  }

  .page-header {
    padding: 20px 16px 0;
  }

  .two,
  .split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .shell,
  .shell.collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sidebar becomes a drawer that slides in from the left. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: 272px;
    max-width: 86vw;
    height: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s linear 0.25s;
  }

  .shell.nav-open .sidebar {
    transform: none;
    visibility: visible;
    box-shadow: var(--shadow-lg);
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s;
  }

  .sb-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }

  .shell.nav-open .sb-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Always the full menu on phones, even if it was collapsed on a big screen. */
  .shell.collapsed .sb-name,
  .shell.collapsed .sb-user {
    display: flex;
  }

  .shell.collapsed .nav-label {
    display: block;
  }

  .shell.collapsed .nav-badge,
  .shell.collapsed .sb-logout {
    display: grid;
  }

  .shell.collapsed .sb-brand {
    flex-direction: row;
    justify-content: flex-start;
    height: 56px;
    padding: 0 10px 0 18px;
  }

  .shell.collapsed .nav-link {
    justify-content: flex-start;
    padding: 0 10px;
  }

  .shell.collapsed .nav-group {
    height: auto;
    margin: 18px 10px 6px;
    font-size: 10.5px;
    background: none;
  }

  .shell.collapsed .sb-foot {
    justify-content: flex-start;
    padding: 12px 10px 12px 14px;
  }

  .sb-toggle .sbt-menu {
    display: none;
  }

  .sb-toggle .sbt-close {
    display: block;
  }

  .topbar .tb-menu {
    display: grid;
    order: -2;
    margin-left: -6px;
  }

  .topbar .tb-crumbs {
    flex: 1 1 calc(100% - 48px);
    order: -1;
  }

  .kpi-grid.four,
  .kpi-grid.three {
    grid-template-columns: 1fr;
  }

  .topbar {
    position: static;
    flex-wrap: wrap;
    height: auto;
    padding: 10px 16px;
  }

  /* A basis wider than what's left beside the breadcrumb, so the search wraps to the second row with the tools. */
  .tb-search {
    flex: 1 1 160px;
    width: auto;
    min-width: 0;
  }

  .tb-sep {
    display: none;
  }

  .tb-search .kbd {
    display: none;
  }

  .logout-btn span {
    display: none;
  }

  .demo-btn-label {
    display: none;
  }

  .demo-banner {
    padding: 8px 16px;
    align-items: flex-start;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header h1 {
    font-size: 19px;
  }
}


@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Access control ---------- */

/* Segmented tabs: a recessed track with the current tab raised out of it. */
.tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.tab .ico {
  width: 16px;
  height: 16px;
}

.tab:hover {
  color: var(--text-strong);
  text-decoration: none;
}

.tab.active {
  background: var(--seg-active);
  color: var(--text-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--line-strong);
}

.tab.active .ico {
  color: var(--accent);
}

.tab-count {
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 28px 0 16px;
}

.section-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-strong);
}

.section-head p {
  margin: 4px 0 0;
}

.add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-weight: 600;
}

.add-btn .ico {
  width: 17px;
  height: 17px;
}

.mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.mini-stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mini-stat span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.mini-stat strong {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  line-height: 1.2;
}

.mini-stat strong.pos {
  color: var(--up);
}

.mini-stat strong.neg {
  color: var(--down);
}

.mini-stat strong.accent {
  color: var(--accent);
}

.table-card {
  padding: 6px 6px 4px;
}

.table-card th {
  padding: 13px 16px 11px;
}

.table-card td {
  padding: 13px 16px;
}

.table-card tbody tr:hover td {
  background: var(--hover);
}

th.right,
td.right {
  text-align: right;
}

th.center,
td.center {
  text-align: center;
}

.nowrap {
  white-space: nowrap;
}

.mono {
  font-family: var(--font-mono);
}

.who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.who > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.who strong {
  color: var(--text-strong);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.who span {
  color: var(--muted);
  font-size: 13px;
}

.who .you {
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
}

.init-avatar {
  --tone: var(--grey-rgb);
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13.5px;
  font-weight: 600;
  color: rgb(var(--tone));
  background: rgba(var(--tone), 0.14);
  box-shadow: 0 0 0 1px rgba(var(--tone), 0.28) inset;
}

td .by {
  display: block;
  font-size: 12px;
  color: var(--faint);
}

.role-badge,
.status-badge,
.log-action {
  --tone: var(--grey-rgb);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  color: rgb(var(--tone));
  background: rgba(var(--tone), 0.12);
  box-shadow: 0 0 0 1px rgba(var(--tone), 0.22) inset;
}

.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.role-badge.red,
.log-action.red,
.init-avatar.red {
  --tone: var(--red-rgb);
}

.role-badge.orange,
.init-avatar.orange {
  --tone: var(--accent-rgb);
}

.role-badge.amber,
.log-action.amber,
.init-avatar.amber {
  --tone: var(--amber-rgb);
}

.role-badge.green,
.log-action.green,
.init-avatar.green {
  --tone: var(--green-rgb);
}

.role-badge.cyan,
.init-avatar.cyan {
  --tone: var(--cyan-rgb);
}

.role-badge.blue,
.init-avatar.blue {
  --tone: var(--blue-rgb);
}

.role-badge.violet,
.init-avatar.violet {
  --tone: var(--violet-rgb);
}

.status-badge.active {
  --tone: var(--green-rgb);
}

.status-badge.deactivated {
  --tone: var(--red-rgb);
}

.status-badge.pending {
  --tone: var(--amber-rgb);
}

.status-badge.neutral {
  --tone: var(--grey-rgb);
}

.row-icons {
  display: inline-flex;
  gap: 6px;
}

.icon-action {
  width: 32px;
  height: 32px;
  display: inline-grid;
  vertical-align: middle;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.icon-action:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.icon-action.green:hover {
  color: var(--up);
  background: var(--up-soft);
  border-color: rgba(var(--up-rgb), 0.4);
}

.icon-action .ico {
  width: 16px;
  height: 16px;
}

.icon-action:hover {
  color: var(--text-strong);
  border-color: var(--line-strong);
  background: var(--panel-3);
}

.icon-action.green {
  color: var(--up);
}

.icon-action.red,
.icon-action.danger:hover {
  color: var(--down);
}

.icon-action.danger:hover {
  background: var(--down-soft);
  border-color: rgba(var(--red-rgb), 0.35);
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.role-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.role-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.role-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.matrix th {
  white-space: normal;
  line-height: 1.35;
  vertical-align: bottom;
  min-width: 84px;
}

.matrix th:first-child,
.matrix td:first-child {
  white-space: nowrap;
  min-width: 150px;
}

.perm {
  display: inline-block;
  min-width: 64px;
  padding: 3px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
}

.perm.manage {
  color: var(--up);
  background: var(--up-soft);
}

.perm.view {
  color: rgb(var(--blue-rgb));
  background: rgba(var(--blue-rgb), 0.13);
}

.perm.none {
  color: var(--faint);
}

.approval-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.approval {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) auto 1fr auto;
  align-items: center;
  gap: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
}

.empty-card,
.no-access {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
}

.empty-card > .ico,
.no-access > .ico {
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: var(--radius-md);
  color: var(--accent);
  background: var(--accent-soft);
}

.empty-card h3,
.no-access h2 {
  margin: 14px 0 4px;
  color: var(--text-strong);
  font-size: 17px;
}

.empty-card p,
.no-access p {
  margin: 0;
}

.log-search {
  position: relative;
  width: 320px;
  max-width: 100%;
}

.log-search .ico {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--faint);
}

.log-search input {
  padding-left: 36px;
}

/* Dialogs */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--backdrop);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 0.15s ease-out;
}

.modal {
  width: 460px;
  max-width: 100%;
  max-height: calc(var(--app-h, 100vh) - 32px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 22px 24px;
  animation: pop-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.modal-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-strong);
}

.modal-head p {
  margin: 4px 0 0;
  font-size: 13px;
}

.modal-x {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin: -4px -6px 0 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}

.modal-x:hover {
  color: var(--text-strong);
  background: var(--hover-strong);
}

.modal .auth-alert {
  margin-bottom: 14px;
}

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 8px -24px -22px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 0 0 16px 16px;
  position: sticky;
  bottom: -22px;
}

.modal-foot .btn {
  padding: 7px 16px;
}

.btn.danger-fill {
  background: var(--down);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}

.btn.danger-fill:hover:not(:disabled) {
  background: var(--down);
  filter: brightness(1.08);
}

.inline-field {
  display: flex;
  gap: 8px;
}

.inline-field .btn {
  flex: none;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

@media (max-width: 1000px) {
  .mini-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .approval {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Activity log details */

.modal.wide {
  width: 620px;
}

.modal-foot .foot-left {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.modal-foot .foot-left .ico {
  width: 15px;
  height: 15px;
}

.faint {
  color: var(--faint);
}

.log-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.log-action.big {
  font-size: 14px;
  padding: 5px 14px;
}

.log-actor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-2);
}

.actor-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.log-kv {
  margin: 16px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.kv-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
}

.kv-row:first-child {
  border-top: 0;
}

.log-kv dt {
  color: var(--muted);
}

.log-kv dd {
  margin: 0;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.log-kv dd.muted {
  color: var(--muted);
}

.log-kv dd.small {
  font-size: 12px;
  line-height: 1.5;
}

.log-nearby {
  margin-top: 18px;
}

.log-nearby h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nearby-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nearby-item:hover {
  background: var(--panel-2);
}

.nearby-action {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nearby-item .dot {
  --tone: var(--grey-rgb);
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--tone));
}

.nearby-item .dot.red {
  --tone: var(--red-rgb);
}

.nearby-item .dot.amber {
  --tone: var(--amber-rgb);
}

.nearby-item .dot.green {
  --tone: var(--green-rgb);
}

@media (max-width: 600px) {
  .kv-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ---------- Notifications: push + banners ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.preview-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 16px 2px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.preview-note .ico {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
}

.label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.counter {
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.counter.warn {
  color: var(--warn);
}

.link-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.link-url[hidden] {
  display: none;
}

.audience-panel {
  margin-top: 12px;
}

.audience-panel[hidden] {
  display: none;
}

.segment-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.segment {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.segment input {
  accent-color: var(--accent);
  margin: 0;
}

.segment.on {
  border-color: rgba(var(--accent-rgb), 0.6);
  background: var(--accent-soft);
}

.seg-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.seg-text strong {
  color: var(--text-strong);
  font-size: 13.5px;
  font-weight: 600;
}

.seg-text span {
  color: var(--muted);
  font-size: 12px;
}

.seg-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--panel-3);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12.5px;
}

.user-picker {
  position: relative;
}

.search-wrap {
  position: relative;
}

.search-wrap > .ico {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}

.search-wrap input {
  padding-left: 36px;
}

.suggest {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  max-height: 290px;
  overflow-y: auto;
}

.suggest[hidden] {
  display: none;
}

.suggest-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.suggest-item:hover,
.suggest-item:first-child:focus-visible {
  background: var(--hover);
}

.suggest-item .init-avatar {
  width: 30px;
  height: 30px;
  font-size: 12.5px;
}

.suggest-item > span:last-child {
  display: flex;
  flex-direction: column;
}

.suggest-item em {
  font-style: normal;
  font-size: 12px;
  color: var(--faint);
}

.suggest-empty {
  padding: 12px;
  text-align: center;
  color: var(--faint);
}

.chips-in {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chips-in[hidden] {
  display: none;
}

.chip-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  font-size: 13px;
}

.chip-user button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: var(--hover-strong);
  color: inherit;
  cursor: pointer;
  line-height: 1;
}

.chip-user button:hover {
  background: rgba(var(--accent-rgb), 0.25);
}

.reach {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: rgba(var(--green-rgb), 0.08);
  border: 1px solid rgba(var(--green-rgb), 0.22);
  color: var(--text);
  font-size: 13.5px;
}

.reach strong {
  color: var(--text-strong);
}

.reach .ico {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--up);
}

.reach.empty {
  background: rgba(var(--amber-rgb), 0.08);
  border-color: rgba(var(--amber-rgb), 0.25);
}

.reach.empty .ico {
  color: var(--warn);
}

.schedule-panel {
  margin-top: 14px;
}

.schedule-panel[hidden] {
  display: none;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-btn {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.chip-btn:hover {
  color: var(--text-strong);
  border-color: var(--line-strong);
}

/* Phone mockups */

.phone {
  position: relative;
  width: 300px;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 9 / 19.5;
  border-radius: 48px;
  padding: 11px;
  background: linear-gradient(145deg, #4a4f58 0%, #2a2d33 22%, #1b1d21 60%, #34373e 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.14),
    inset 0 0 0 5px #0b0c0e,
    0 1px 0 rgba(255, 255, 255, 0.06),
    0 34px 70px -28px rgba(0, 0, 0, 0.85),
    0 12px 24px -12px rgba(0, 0, 0, 0.5);
}

.ph-notch {
  position: absolute;
  z-index: 4;
  top: 21px;
  left: 50%;
  width: 84px;
  height: 26px;
  margin-left: -42px;
  border-radius: 999px;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.ph-screen {
  position: relative;
  height: 100%;
  border-radius: 37px;
  overflow: hidden;
  background: #121317;
  color: #fff;
  font-family: var(--font-sans);
}

.ph-lock {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 11px 16px;
  background:
    radial-gradient(120% 70% at 100% 100%, rgba(255, 109, 0, 0.55) 0%, transparent 60%),
    radial-gradient(90% 55% at 0% 0%, rgba(96, 72, 190, 0.55) 0%, transparent 65%),
    radial-gradient(70% 45% at 15% 85%, rgba(18, 104, 150, 0.35) 0%, transparent 70%),
    linear-gradient(180deg, #161a2e 0%, #10121c 55%, #1b120e 100%);
}

.ph-lock[hidden],
.ph-app[hidden] {
  display: none;
}

.lock-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px 0 22px;
  color: #fff;
}

.lock-date {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
}

.lock-time {
  margin-top: 2px;
  font-size: 70px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.82) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pn-card {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: 20px;
  padding: 11px 12px 12px;
  background: rgba(58, 60, 72, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 10px 26px -12px rgba(0, 0, 0, 0.6);
  color: #fff;
  animation: pop-in 0.25s ease-out;
}

.pn-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.app-ico {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
}

.app-ico .ico {
  width: 12px;
  height: 12px;
}

.pn-app {
  flex: 1;
  font-weight: 600;
}

.pn-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.pn-body {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.36;
  color: rgba(255, 255, 255, 0.9);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.placeholder {
  opacity: 0.45;
}

.ph-app {
  position: relative;
  height: 100%;
  background: #17181c;
  color: #fff;
}

.ib-head {
  position: relative;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  padding: 6px 0 12px;
}

.ib-back {
  position: absolute;
  left: 14px;
  top: 6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.ib-item {
  display: flex;
  gap: 10px;
  margin: 0 10px 8px;
  padding: 12px;
  border: 1px solid #26282e;
  border-radius: 14px;
  background: #1d1e23;
}

.ib-item.new {
  border-color: rgba(255, 109, 0, 0.35);
  background: linear-gradient(0deg, rgba(255, 109, 0, 0.06), rgba(255, 109, 0, 0.06)), #1d1e23;
  animation: pop-in 0.25s ease-out;
}

.ib-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ib-row strong {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ib-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff6d00;
}

.ib-tag {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  color: #ff8a33;
  background: rgba(255, 109, 0, 0.15);
  padding: 1px 6px;
  border-radius: 4px;
}

.ib-tag[hidden] {
  display: none;
}

.ib-item p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #b0b4bd;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ib-when {
  display: block;
  margin-top: 7px;
  font-size: 10.5px;
  color: #6f7380;
}

.ib-item.ghost {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ghost-line {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #2a2d35;
}

.ghost-line.w90 { width: 90%; }
.ghost-line.w60 { width: 60%; }
.ghost-line.w45 { width: 45%; }
.ghost-line.w30 { width: 30%; }
.ghost-line.w20 { width: 20%; }

.mini-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.mini-seg button {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
}

.mini-seg button:hover {
  color: var(--text-strong);
}

.mini-seg button.on {
  background: var(--seg-active);
  color: var(--text-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 0 0 1px var(--line-strong);
}

/* Review dialog */

.review {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 20px;
  align-items: start;
}

.review-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.review .phone {
  zoom: 0.76;
}

.review .ph-screen {
  border-radius: 25px;
}

.review .ph-lock {
  padding-top: 44px;
}

.review .lock-time {
  font-size: 44px;
}

.review .log-kv {
  margin: 0;
}

.review .kv-row {
  grid-template-columns: 110px 1fr;
}

/* History */

.history {
  margin-top: 22px;
}

.history-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px 10px;
}

.history-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}

.history-head p {
  margin: 3px 0 0;
  font-size: 13px;
}

.history-tools {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.history-tools .search-wrap {
  width: 240px;
}

.filter-chips {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.fchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: 7px;
  cursor: pointer;
}

.fchip span {
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.fchip:hover {
  color: var(--text-strong);
}

.fchip.on {
  background: var(--seg-active);
  color: var(--text-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 0 0 1px var(--line-strong);
}

.fchip.on span {
  color: var(--accent);
}

.msg-cell {
  max-width: 380px;
}

.msg-cell strong {
  display: block;
  color: var(--text-strong);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-cell span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

td .by.warn {
  color: var(--warn);
}

.aud-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aud-badge .ico {
  flex: none;
  width: 14px;
  height: 14px;
}

.status-badge.c-sent,
.status-badge.b-live {
  --tone: var(--green-rgb);
}

.status-badge.c-scheduled,
.status-badge.b-scheduled {
  --tone: var(--blue-rgb);
}

.status-badge.c-sending {
  --tone: var(--amber-rgb);
}

.status-badge.c-cancelled,
.status-badge.b-off,
.status-badge.b-ended {
  --tone: var(--grey-rgb);
}

.status-badge.c-failed {
  --tone: var(--red-rgb);
}

.history .empty {
  padding: 36px 0;
}

.table-wrap[hidden],
.empty[hidden] {
  display: none;
}

/* Switch */

.switch {
  position: relative;
  flex: none;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.switch .slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background 0.2s;
  pointer-events: none;
}

.switch .slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s;
}

.switch input:checked + .slider {
  background: var(--up);
}

.switch input:checked + .slider::after {
  transform: translateX(20px);
}

.switch input:focus-visible + .slider {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Banners */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 34px 20px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-2);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.dropzone[hidden] {
  display: none;
}

.dropzone:hover,
.dropzone.over {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.05);
}

.dz-ico {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  color: var(--accent);
  background: var(--accent-soft);
}

.dz-ico .ico {
  width: 22px;
  height: 22px;
}

.dropzone strong {
  color: var(--text-strong);
  font-weight: 600;
}

.dropzone u {
  color: var(--accent);
  text-underline-offset: 3px;
}

.dropzone span {
  color: var(--muted);
  font-size: 13px;
}

.dropzone .dz-tip {
  color: var(--faint);
  font-size: 12px;
}

.cropper[hidden] {
  display: none;
}

.crop-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
}

.crop-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  cursor: grab;
  touch-action: none;
}

.crop-canvas.grabbing {
  cursor: grabbing;
}

/* Rule-of-thirds guides */
.crop-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.22) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.22) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgba(255, 255, 255, 0.22) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.22) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
    linear-gradient(180deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.22) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.22) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgba(255, 255, 255, 0.22) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.22) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
  opacity: 0;
  transition: opacity 0.2s;
}

.crop-frame:hover::after {
  opacity: 1;
}

.crop-size {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.crop-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.zoom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 180px;
  color: var(--faint);
}

.zoom .ico {
  width: 16px;
  height: 16px;
}

.zoom input {
  flex: 1;
  accent-color: var(--accent);
}

.quality {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
}

.quality .ico {
  width: 15px;
  height: 15px;
}

.quality.ok {
  color: var(--up);
}

.quality.warn {
  color: var(--warn);
}

.crop-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--faint);
}

.crop-hint .ico {
  width: 14px;
  height: 14px;
}

.crop-hint .muted {
  margin-left: auto;
}

.existing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.existing-frame {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
}

.existing-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

.existing .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.existing .btn .ico {
  width: 15px;
  height: 15px;
}

/* Home screen mockup */

.hp {
  display: flex;
  flex-direction: column;
  background: #1a1b20;
  color: #fff;
  font-size: 11px;
}

.hp-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 12px 10px;
}

.hp-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2b2e36;
}

.hp-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 28px;
  padding: 0 9px;
  border: 1px solid #2d2f36;
  border-radius: 7px;
  background: #202127;
  color: #8e929c;
  font-size: 11.5px;
}

.hp-bell .ico {
  width: 17px;
  height: 17px;
  color: #c8ccd4;
}

.hp-account {
  margin: 2px 12px 0;
  padding: 11px 11px 10px;
  border: 1px solid #2b2d34;
  border-radius: 10px;
  background: #1f2026;
}

.hp-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hp-col + .hp-col {
  padding-left: 10px;
  border-left: 1px solid #3a3d45;
}

.hp-col span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #a4a8b1;
  font-size: 10px;
  white-space: nowrap;
}

.hp-col strong {
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.hp-col em {
  font-style: normal;
  color: #8e929c;
  font-size: 10px;
}

.hp-banner {
  margin: 12px 12px 0;
  aspect-ratio: 3 / 1;
  border-radius: 9px;
  overflow: hidden;
  outline: 2px dashed rgba(255, 109, 0, 0.75);
  outline-offset: 2px;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 109, 0, 0.05) 0 8px, transparent 8px 16px),
    #202127;
}

.hp-banner.filled {
  outline: 2px solid rgba(255, 109, 0, 0.9);
  box-shadow: 0 0 0 6px rgba(255, 109, 0, 0.14);
}

.hp-banner canvas,
.hp-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  color: #e0925a;
  font-size: 10.5px;
  font-weight: 500;
}

.hp-empty .ico {
  width: 18px;
  height: 18px;
}

.hp-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  height: 5px;
  margin-top: 7px;
}

.hp-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3a3d45;
}

.hp-dots span.on {
  width: 13px;
  border-radius: 3px;
  background: #ff6d00;
}

.hp-tickers {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-left: 12px;
  overflow: hidden;
}

.hp-ticker {
  position: relative;
  flex: none;
  width: 118px;
  height: 58px;
  padding: 7px 8px 0;
  border: 1px solid #2b2d34;
  border-radius: 8px;
  background: #1f2026;
  overflow: hidden;
}

.hp-t-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hp-t-row strong {
  font-size: 10.5px;
  font-weight: 600;
}

.hp-t-row .neg {
  color: #f0616a;
  font-size: 9.5px;
}

.hp-t-price {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.hp-spark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
}

.hp-list {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 2px 12px 0;
}

.hp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
}

.hp-row .ghost-line {
  height: 7px;
}

/* Banner list */

.banners-card {
  margin-top: 22px;
}

.banner-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.banner-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}

.banner-row.dim .thumb {
  opacity: 0.55;
  filter: grayscale(0.4);
}

.banner-row .order {
  flex: none;
  width: 22px;
  text-align: center;
  font-weight: 700;
  color: var(--faint);
}

.banner-row .thumb {
  flex: none;
  width: 192px;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #000;
}

.b-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.b-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.b-title strong {
  color: var(--text-strong);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.b-info .muted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.b-info .ico {
  width: 13px;
  height: 13px;
}

.b-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.b-actions .sep {
  width: 1px;
  height: 24px;
  margin: 0 6px;
  background: var(--line);
}

.icon-action:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.empty-card.slim {
  padding: 30px 20px;
}

/* ---------- Notifications page (push + banners): compact layout ---------- */

/* Tab bar with the page's figures on the right */
.eng-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.eng-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.eng-kpis {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  overflow: hidden;
}

.eng-kpi {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 14px;
  white-space: nowrap;
}

.eng-kpi + .eng-kpi {
  border-left: 1px solid var(--line);
}

.eng-kpi strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-strong);
}

.eng-kpi strong.pos {
  color: var(--up);
}

.eng-kpi strong.accent {
  color: var(--accent);
}

.eng-kpi span {
  font-size: 12px;
  color: var(--muted);
}

.eng-master {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 6px 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.eng-master strong {
  color: var(--text-strong);
  font-weight: 600;
}

.eng-master-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 3px var(--up-soft);
}

.eng-master.off .eng-master-dot {
  background: var(--faint);
  box-shadow: none;
}

/* Smaller switches inside dense rows */
.eng-master .switch,
.eng-active .switch,
.b-actions .switch {
  width: 34px;
  height: 20px;
}

.eng-master .switch .slider::after,
.eng-active .switch .slider::after,
.b-actions .switch .slider::after {
  width: 14px;
  height: 14px;
}

.eng-master .switch input:checked + .slider::after,
.eng-active .switch input:checked + .slider::after,
.b-actions .switch input:checked + .slider::after {
  transform: translateX(14px);
}

/* Composer: form on the left, phone preview on the right, one card */
.eng-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  margin-top: 14px;
  padding: 0;
}

.eng-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px;
}

.eng-head {
  display: flex;
  align-items: baseline;
  gap: 4px 10px;
  flex-wrap: wrap;
}

.eng-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}

.eng-head .muted {
  font-size: 12.5px;
}

.efield {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.efield-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.efield-label label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}

.efield-label .hint {
  font-size: 11.5px;
  color: var(--faint);
}

.eng-form textarea {
  min-height: 60px;
  resize: vertical;
}

.eng-row {
  display: grid;
  gap: 12px;
  align-items: start;
}

.eng-row.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Link picker grows; the two segmented controls keep their size and wrap below when narrow. */
.eng-row.three {
  display: flex;
  flex-wrap: wrap;
}

.eng-row.three > .efield:first-child {
  flex: 1 1 220px;
}

.eng-row.sched {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
}

/* Segmented control */
.eseg {
  display: inline-flex;
  gap: 2px;
  min-height: 38px;
  padding: 3px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--field);
}

.eseg-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.eseg-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.eseg-opt .ico {
  width: 15px;
  height: 15px;
}

.eseg-opt:hover {
  color: var(--text-strong);
}

.eseg-opt.on {
  background: var(--seg-active);
  color: var(--text-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 0 0 1px var(--line-strong);
}

.eseg-opt.on .ico {
  color: var(--accent);
}

.eseg-opt:has(input:focus-visible) {
  outline: 2px solid rgba(var(--accent-rgb), 0.7);
  outline-offset: 1px;
}

/* Audience and schedule panels open under the controls */
.eng-form .audience-panel {
  margin-top: 0;
}

.eng-form .segment {
  padding: 8px 12px;
}

.eng-form .schedule-panel {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
}

.eng-form .schedule-panel[hidden] {
  display: none;
}

.sched-at {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sched-at input {
  width: 220px;
}

.sched-at .help {
  font-size: 12px;
  color: var(--faint);
}

.eng-form > .auth-alert {
  margin: 0;
}

/* Footer: reach (or a note) on the left, actions on the right */
.eng-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.eng-foot .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.eng-foot .btn .ico {
  width: 16px;
  height: 16px;
}

.eng-foot .reach,
.eng-foot .reach.empty {
  margin: 0 auto 0 0;
  padding: 0;
  gap: 7px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
}

.eng-foot .reach .ico {
  width: 15px;
  height: 15px;
}

.eng-foot-note {
  margin-right: auto;
  font-size: 12px;
}

/* Preview pane */
.eng-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 14px;
  border-left: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--panel-2);
}

.eng-preview-head {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.eng-preview-head .mini-seg button {
  padding: 3px 8px;
  font-size: 12px;
}

/* The phones keep their full-size layout and are drawn at 72%. */
.eng-preview .phone {
  zoom: 0.72;
  margin: 0;
}

/* Both mockups are cut shorter: nothing important sits in their lower part. */
.eng-preview .phone {
  aspect-ratio: 9 / 14;
}

.eng-preview .phone.home {
  aspect-ratio: 9 / 13;
}

.eng-preview .preview-note {
  margin: 0;
  font-size: 11.5px;
  text-align: center;
}

/* Banner image: a slim dropzone, a smaller cropper and thumbnail */
.eng-form .dropzone {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 14px;
  padding: 14px 16px;
  text-align: left;
}

.eng-form .dropzone[hidden] {
  display: none;
}

.eng-form .dz-ico {
  grid-row: span 3;
  width: 40px;
  height: 40px;
  margin: 0;
}

.eng-form .cropper,
.eng-form .existing {
  max-width: 560px;
}

.eng-form .existing {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.eng-form .existing-frame {
  width: 300px;
  flex: none;
}

.eng-active {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--field);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* History + banner list */
.history,
.banners-card {
  margin-top: 14px;
}

.history-head {
  align-items: center;
  padding: 12px 16px 8px;
}

.history td {
  padding: 8px 12px;
}

.history .msg-cell span {
  font-size: 12.5px;
}

.history .icon-action,
.b-actions .icon-action {
  width: 28px;
  height: 28px;
}

.banners-card {
  padding: 0 0 4px;
}

.banners-card .history-head {
  justify-content: flex-start;
  gap: 10px;
}

.banners-card .banner-rows {
  gap: 0;
}

.banners-card .banner-row {
  gap: 14px;
  padding: 8px 16px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

.banners-card .banner-row:hover {
  background: var(--hover);
}

.banners-card .banner-row .thumb {
  width: 108px;
  border-radius: 6px;
}

.banners-card .b-info {
  gap: 3px;
}

.b-meta {
  display: flex;
  gap: 4px 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}

.b-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.b-meta .ico {
  width: 13px;
  height: 13px;
}

.banners-card .b-actions .sep {
  height: 18px;
  margin: 0 4px;
}

.banners-card .empty-card {
  margin: 0 16px 12px;
}

@media (max-width: 1000px) {
  .eng-composer {
    grid-template-columns: minmax(0, 1fr);
  }

  .eng-preview {
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
  }
}

@media (max-width: 760px) {
  .eng-side,
  .eng-kpis,
  .eng-master {
    width: 100%;
  }

  /* Figures as a grid of cells with hairline gaps */
  .eng-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
  }

  .eng-side .eng-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .eng-kpi {
    background: var(--panel);
    padding: 8px 12px;
  }

  .eng-kpi + .eng-kpi {
    border-left: 0;
  }

  .eng-master strong {
    margin-right: auto;
  }

  .eng-master > span:nth-child(2) {
    flex: 1;
  }

  .eng-form {
    padding: 14px;
  }

  .eng-row.two,
  .eng-row.sched {
    grid-template-columns: minmax(0, 1fr);
  }

  .eng-row.three > .efield {
    flex: 1 1 100%;
  }

  .eseg {
    display: flex;
  }

  .eseg-opt {
    flex: 1;
    padding: 0 8px;
  }

  .eng-foot {
    flex-wrap: wrap;
  }

  .eng-foot .reach {
    width: 100%;
  }

  .eng-foot-note {
    display: none;
  }

  .eng-foot .btn:last-child {
    margin-left: auto;
  }

  .sched-at input {
    width: 100%;
  }

  .eng-form .existing {
    flex-direction: column;
    align-items: flex-start;
  }

  .eng-form .existing-frame {
    width: 100%;
  }

  .banners-card .banner-row {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
  }

  .banners-card .banner-row .thumb {
    width: 96px;
  }

  .banners-card .b-info {
    flex: 1 1 150px;
  }

  .banners-card .b-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* Full banner names on phones; the badge wraps under a long one. */
  .banners-card .b-title {
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .banners-card .b-title strong {
    white-space: normal;
  }

  .history-tools .filter-chips {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .history-tools,
  .history-tools .search-wrap {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .segment-list {
    grid-template-columns: 1fr;
  }

  .review {
    grid-template-columns: 1fr;
  }

  .banner-row {
    flex-wrap: wrap;
  }

  .banner-row .thumb {
    width: 100%;
  }
}

input[type='datetime-local']::-webkit-calendar-picker-indicator {
  filter: var(--picker-invert);
  cursor: pointer;
}

/* ---------- User management ---------- */

.users-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.users-toolbar .grow {
  flex: 1;
  min-width: 260px;
}

.users-toolbar select {
  width: auto;
  min-width: 140px;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.tool-btn .ico {
  width: 16px;
  height: 16px;
}

.ukpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.ukpi {
  --tone: var(--blue-rgb);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.ukpi:hover {
  border-color: rgba(var(--tone), 0.4);
  transform: translateY(-1px);
}

.ukpi:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.ukpi.on {
  border-color: rgba(var(--tone), 0.7);
  box-shadow: 0 0 0 3px rgba(var(--tone), 0.14);
}

.ukpi.blue { --tone: var(--blue-rgb); }
.ukpi.green { --tone: var(--green-rgb); }
.ukpi.violet { --tone: var(--violet-rgb); }
.ukpi.amber { --tone: var(--amber-rgb); }
.ukpi.cyan { --tone: var(--cyan-rgb); }
.ukpi.orange { --tone: var(--accent-rgb); }
.ukpi.red { --tone: var(--red-rgb); }

.ukpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ukpi-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.ukpi-ico {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: rgb(var(--tone));
  background: rgba(var(--tone), 0.12);
  box-shadow: 0 0 0 1px rgba(var(--tone), 0.2) inset;
}

.ukpi-ico .ico {
  width: 16px;
  height: 16px;
}

.ukpi strong {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  color: var(--text-strong);
}

.ukpi-sub {
  font-size: 12.5px;
  color: var(--faint);
}

.ukpi-sub.pos {
  color: var(--up);
}

.ukpi-sub.neg {
  color: var(--down);
}

.live-dot {
  position: relative;
  width: 10px;
  height: 10px;
  margin: 10px;
  border-radius: 50%;
  background: var(--up);
}

.live-dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--up);
  opacity: 0;
  animation: live-ping 1.8s ease-out infinite;
}

@keyframes live-ping {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.users-card {
  margin-top: 18px;
}

/* ---------- Positions page ---------- */

/* Header: title on the left, freshness + Live + Refresh on the right */
.data-card .pay-head {
  align-items: center;
  padding-bottom: 14px;
}

.data-card .pay-head > div:first-child {
  min-width: 0;
  flex: 1 1 280px;
}

/* Tabs on the left, the figures for that tab on the right */
.pos-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 0 14px 12px;
}

.pos-sync {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.pos-bar .pos-figures {
  margin-left: auto;
}

/* When the figures can't sit beside the tabs, they take the full row with equal cells. */
@media (min-width: 761px) {
  .pos-bar {
    container-type: inline-size;
  }

  @container (max-width: 680px) {
    .pos-bar .pos-figures.cols-3 {
      width: 100%;
      margin-left: 0;
    }

    .pos-bar .pos-figures.cols-3 .eng-kpi {
      flex: 1 1 0;
    }
  }

  @container (max-width: 900px) {
    .pos-bar .pos-figures.cols-4 {
      width: 100%;
      margin-left: 0;
    }

    .pos-bar .pos-figures.cols-4 .eng-kpi {
      flex: 1 1 0;
    }
  }
}

.pos-updated {
  margin-right: 4px;
  color: var(--faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pos-sync .btn.small {
  min-height: 32px;
}

.pos-refresh {
  width: 32px;
  height: 32px;
}

.pos-refresh .ico {
  width: 15px;
  height: 15px;
}

/* Filters: sized by the room the card has, not the window, so they never strand a control on its own line.
   Wide: one row. Medium: quick filters + search, then the dropdowns sharing a row. Narrow: one group per row. */
.pos-filters {
  gap: 10px;
  padding-top: 2px;
}

.pos-filters .pos-results {
  flex: none;
}

.pos-filters .pay-search {
  flex: 1 1 220px;
  min-width: 200px;
}

.pos-filters input[type='search'] {
  text-overflow: ellipsis;
}

@media (min-width: 761px) {
  .pos-filters {
    container-type: inline-size;
    flex-wrap: nowrap;
  }

  .pos-filters .fsheet {
    display: flex;
    flex: none;
    gap: 10px;
    min-width: 0;
  }

  .pos-filters .fsheet select {
    max-width: 220px;
  }

  /* Medium: the dropdowns move to their own row and share it evenly. */
  @container (max-width: 1040px) {
    .pos-filters .fsheet {
      flex: 1 1 100%;
    }

    .pos-filters .fsheet > *,
    .pos-filters .fs-panel > *,
    .pos-filters .fs-body > *,
    .pos-filters .fsheet select {
      flex: 1 1 0;
      min-width: 0;
      max-width: none;
    }

    .pos-filters .fs-body .date-btn {
      width: 100%;
    }

    .pos-filters .fs-body .date-btn .chev {
      margin-left: auto;
    }
  }

  /* Narrow: quick filters, search and dropdowns each get a full row. */
  @container (max-width: 640px) {
    .pos-filters .pos-results,
    .pos-filters .pay-search {
      flex: 1 1 100%;
    }

    .pos-filters .pos-results .seg-btn {
      flex: 1;
      justify-content: center;
    }
  }
}

/* The closed tab adds a date range, so it needs more room for a single row. */
@container (max-width: 1260px) {
  .pos-filters.has-date .fsheet {
    flex: 1 1 100%;
  }

  .pos-filters.has-date .fs-body > *,
  .pos-filters.has-date .fsheet select {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  .pos-filters.has-date .fs-body .date-btn {
    width: 100%;
  }

  .pos-filters.has-date .fs-body .date-btn .chev {
    margin-left: auto;
  }
}

@media (max-width: 760px) {
  /* Figures: equal cells, value over label */
  .pos-figures.eng-kpis {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pos-figures.cols-4.eng-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pos-figures .eng-kpi {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 9px 12px;
    white-space: normal;
  }

  .pos-figures .eng-kpi span {
    font-size: 11.5px;
    line-height: 1.3;
  }

  .pos-filters .pos-results .seg-btn {
    flex: 1 0 auto;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .data-card .pay-head {
    align-items: flex-start;
  }

  .data-card .pay-head > div:first-child {
    flex-basis: 200px;
  }

  .pos-bar .seg {
    flex: 1 1 0;
    min-width: 0;
  }

  .pos-bar .seg-btn {
    flex: 1;
    justify-content: center;
  }

  /* Open tab: freshness on the left, the buttons on the right, on their own row.
     Closed tab: just Refresh, beside the tabs. */
  .pos-sync:has(.pos-updated) {
    width: 100%;
    margin-left: 0;
  }

  .pos-updated {
    margin-right: auto;
  }
}

/* Live / Paused: a pulsing dot while prices refresh. */
.live-toggle {
  gap: 2px;
  padding-left: 4px;
}

.live-toggle .live-dot {
  width: 7px;
  height: 7px;
  margin: 8px;
  background: var(--faint);
}

.live-toggle .live-dot::after {
  display: none;
}

.live-toggle.on {
  color: var(--up);
  border-color: rgba(var(--up-rgb), 0.4);
  background: var(--up-soft);
}

.live-toggle.on .live-dot {
  background: var(--up);
}

.live-toggle.on .live-dot::after {
  display: block;
  inset: -4px;
  border-width: 1.5px;
}

/* ----- Positions card: header and toolbar on the table's type scale -----
   13px base, regular weight for values, medium only for what's selected or named.
   Every control in the toolbar is 34px tall. */
.data-card .pay-head h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.data-card .pay-head p {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}

.data-card .pos-updated {
  font-size: 12px;
}

.data-card .live-toggle {
  min-height: 32px;
  padding-right: 12px;
  font-size: 12.5px;
  font-weight: 500;
}

.data-card .live-toggle:not(.on) {
  color: var(--text);
}

/* Tabs and quick filters */
.data-card .seg {
  padding: 3px;
  border-radius: var(--radius-sm);
}

.data-card .seg-btn {
  min-height: 26px;
  padding: 3px 10px;
  gap: 6px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.data-card .seg-btn:hover {
  color: var(--text);
}

.data-card .seg-btn.on {
  font-weight: 500;
  color: var(--text-strong);
}

.data-card .seg-btn .ico {
  width: 14px;
  height: 14px;
}

.data-card .seg-num {
  min-width: 16px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 16px;
  color: var(--muted);
}

.data-card .seg-btn.on .seg-num {
  color: var(--text);
}

/* Figures beside the tabs */
.data-card .pos-figures .eng-kpi {
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
}

.data-card .pos-figures .eng-kpi strong {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.data-card .pos-figures .eng-kpi span {
  font-size: 12px;
}

/* Neutral figures in body text colour, like the table's values; red/green keep their tone. */
.data-card .pos-figures .eng-kpi strong:not(.neg):not(.pos) {
  color: var(--text);
}

/* Search, dropdowns, date range */
.data-card .pay-search {
  min-height: 34px;
  padding: 0 11px;
}

.data-card .pay-search .ico {
  width: 15px;
  height: 15px;
}

.data-card .pay-search input {
  min-height: 32px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-strong);
}

.data-card .pay-filters select {
  min-height: 34px;
  padding: 6px 30px 6px 11px;
  font-size: 13px;
  color: var(--text);
  background-position: right 10px center;
}

.data-card .pay-filters .date-btn {
  height: 34px;
  font-size: 13px;
  color: var(--text);
}

.data-card .filters-btn {
  min-height: 34px;
  font-size: 13px;
  color: var(--text);
}

/* ----- Data tables (Positions, Users): .pt-table -----
   One main value per cell (13px, regular) over a quiet detail line (12px, muted). Light text on a dark
   panel reads heavier than it is, so only names, symbols and PnL go above regular weight.
   Colour is kept for meaning: profit/loss, and how close a position is to liquidation. */
.table-card .pt-table {
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
}

.table-card .pt-table th {
  padding: 11px 12px 10px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--faint);
  white-space: nowrap;
  background: var(--panel-2);
}

.table-card .pt-table td {
  padding: 11px 12px;
  background: var(--panel);
  vertical-align: middle;
}

.table-card .pt-table th:first-child,
.table-card .pt-table td:first-child {
  padding-left: 16px;
}

.table-card .pt-table th:last-child,
.table-card .pt-table td:last-child {
  padding-right: 12px;
}

/* Opaque hover so pinned columns never show the cells scrolling under them. */
.table-card .pt-table tbody tr:hover td {
  background: linear-gradient(var(--hover), var(--hover)), var(--panel);
}

.pt-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  line-height: 1.35;
}

.pt-stack.right {
  align-items: flex-end;
}

.pt-val {
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

.pt-val.pt-pnl {
  font-weight: 500;
}

.pt-val.pos,
.pt-sub.pos {
  color: var(--up);
}

.pt-val.neg,
.pt-sub.neg {
  color: var(--down);
}

.pt-sub {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pt-sub.pos,
.pt-sub.neg {
  opacity: 0.85;
}

.pt-sub.muted {
  color: var(--muted);
}

.pt-key {
  color: var(--faint);
}

/* Distance to liquidation: amber when it's getting close, red when it's very close. */
.pt-sub.risk-mid {
  color: var(--warn);
}

.pt-sub.risk-high {
  color: var(--down);
}

/* User */
.pt-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 200px;
}

.pt-who .init-avatar {
  width: 30px;
  height: 30px;
  font-size: 12px;
  font-weight: 500;
}

.pt-who-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.35;
}

.pt-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
  text-decoration: none;
}

.pt-name:hover {
  color: var(--accent);
  text-decoration: none;
}

.pt-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
}

.pt-ellipsis {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pt-chip {
  flex: none;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.04em;
  color: var(--text);
  background: var(--panel-3);
  box-shadow: 0 0 0 1px var(--line-strong) inset;
}

.pt-chip.blocked {
  color: var(--down);
  background: var(--down-soft);
  box-shadow: none;
}

/* Contract */
.pt-contract {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pt-sym {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
  letter-spacing: 0.01em;
}

.pt-side,
.pt-tag {
  --tone: var(--grey-rgb);
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  color: rgb(var(--tone));
  background: rgba(var(--tone), 0.12);
}

.pt-side.long,
.pt-tag.tp {
  --tone: var(--up-rgb);
}

.pt-side.short,
.pt-tag.liquidation {
  --tone: var(--down-rgb);
}

.pt-tag.sl {
  --tone: var(--amber-rgb);
}

.pt-tag {
  align-self: flex-start;
}

/* TP / SL: a coloured label when set, the price in plain text */
.pt-tpsl {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: baseline;
  gap: 3px 8px;
  line-height: 1.35;
}

.pt-tpsl i {
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--faint);
}

.pt-tpsl i.tp {
  color: var(--up);
}

.pt-tpsl i.sl {
  color: var(--down);
}

.pt-tpsl span {
  font-size: 12.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.pt-tpsl span.none {
  color: var(--faint);
}

/* Row actions: quiet icons, clear on hover */
.pt-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.pt-act {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.pt-act .ico {
  width: 15px;
  height: 15px;
}

tr:hover .pt-act {
  color: var(--muted);
}

.pt-act:hover,
tr:hover .pt-act:hover {
  color: var(--text-strong);
  background: var(--hover-strong);
}

.pt-act.danger:hover,
tr:hover .pt-act.danger:hover {
  color: var(--down);
  background: var(--down-soft);
}

.pt-act:focus-visible {
  outline: none;
  color: var(--text-strong);
  box-shadow: var(--ring);
}

/* Empty values ("No deposits", "Never", "—") */
.pt-val.none,
.pt-none {
  color: var(--faint);
}

.pt-tag.green {
  --tone: var(--up-rgb);
}

.pt-tag.red {
  --tone: var(--down-rgb);
}

.pt-table td > .pt-tag {
  display: inline-block;
}

/* A chip that filters by its value (partner code) */
.pt-chip-btn {
  padding: 0 7px;
  border: 0;
  font-family: inherit;
  font-size: 11px;
  line-height: 20px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.pt-chip-btn:hover {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-line) inset;
}

.pt-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pt-online::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(var(--up-rgb), 0.18);
}

.pt-act.ok:hover,
tr:hover .pt-act.ok:hover {
  color: var(--up);
  background: var(--up-soft);
}

/* Value + link line (wallet → ledger, positions → view) */
.pt-table .cell-link {
  gap: 3px;
  line-height: 1.35;
}

.pt-table .link-sub {
  font-size: 12px;
  font-weight: 400;
}

.pt-table .link-sub .ico {
  width: 12px;
  height: 12px;
}

.pt-table tr.clickable {
  cursor: pointer;
}

.pt-table tr.clickable:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.6);
  outline-offset: -2px;
}

.pt-who .avatar-wrap .init-avatar {
  width: 30px;
  height: 30px;
}

.pt-who .online-dot {
  width: 9px;
  height: 9px;
}

/* Users table: the user cell carries name, email, ID, joined and status, so it gets the room. */
.users-table .pt-who {
  max-width: 320px;
}

.users-table .pt-user {
  min-width: 250px;
}

.pt-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pt-name-row .pt-tag {
  flex: none;
  padding: 1px 7px;
  font-size: 11px;
}

/* Row actions: visible at rest, not only on hover. */
.users-table .pt-actions {
  gap: 6px;
}

.users-table .pt-act {
  width: 30px;
  height: 30px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.users-table tr:hover .pt-act {
  color: var(--text);
  border-color: var(--line-strong);
}

.users-table .pt-act.danger:hover,
.users-table tr:hover .pt-act.danger:hover {
  border-color: rgba(var(--red-rgb), 0.45);
}

/* Leaderboards: the header toggles them; collapsed, only the header shows. */
.leaders .lb-head-row {
  cursor: pointer;
  user-select: none;
}

/* Users card header on the same scale as the table */
.users-card .history-head h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.users-card .history-head p {
  margin-top: 2px;
  font-size: 12.5px;
}

.users-card .sort-label {
  font-size: 12.5px;
}

.users-card .sort-label select {
  min-height: 34px;
  padding: 6px 30px 6px 11px;
  font-size: 13px;
  color: var(--text);
}

.users-card .history-head .btn.small {
  min-height: 34px;
  font-size: 12.5px;
  color: var(--text);
}

/* Pinned columns: actions always (so they're never cut off), the user on narrow screens. */
.pt-table .pt-actions-cell {
  position: sticky;
  right: 0;
  z-index: 1;
}

.pt-wrap.more-right .pt-actions-cell {
  box-shadow: -10px 0 12px -10px rgba(0, 0, 0, 0.45), inset 1px 0 0 var(--line);
}

@media (max-width: 1100px) {
  .pt-table .pt-user {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  .pt-wrap.more-left .pt-user {
    box-shadow: 10px 0 12px -10px rgba(0, 0, 0, 0.45), inset -1px 0 0 var(--line);
  }

  .pt-who {
    max-width: 170px;
  }
}

@media (max-width: 560px) {
  /* Phones: only the user stays pinned, so the figures get the room. */
  .pt-table .pt-actions-cell {
    position: static;
  }

  .pt-wrap.more-right .pt-actions-cell {
    box-shadow: none;
  }

  .pt-who {
    max-width: 128px;
  }

  .pt-who .init-avatar,
  .pt-who .avatar-wrap {
    display: none;
  }

  .table-card .pt-table th,
  .table-card .pt-table td {
    padding-left: 11px;
    padding-right: 11px;
  }
}

/* TP and SL on two short lines. */
.tpsl {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  line-height: 1.3;
}

.tpsl span {
  display: flex;
  gap: 6px;
}

.tpsl em {
  width: 16px;
  color: var(--faint);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.tpsl b {
  font-family: var(--font-mono);
  font-weight: 500;
}

.closed-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.positions-admin-table .cell-stack > .closed-line {
  overflow: visible;
  color: var(--text);
}

.pos-close .pf-list {
  margin-bottom: 12px;
}

/* ---------- Leaderboards (User Management) ---------- */

.leaders {
  margin-top: 18px;
}

.leaders .card-head {
  margin-bottom: 14px;
}

.leaders .card-head p {
  margin: 3px 0 0;
}

.leaders .card-head:has(+ .leaders-grid[hidden]) {
  margin-bottom: 0;
}

.lb-toggle .ico {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
  transition: transform 0.2s;
}

.lb-toggle.closed .ico {
  transform: none;
}

/* Leaderboards: two boards a row, top 5 each, quiet rows. */
.leaders-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.leaders-grid[hidden] {
  display: none;
}

.leader-board {
  --tone: var(--blue-rgb);
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-2);
  overflow: hidden;
}

.leader-board.green {
  --tone: var(--green-rgb);
}

.leader-board.red {
  --tone: var(--red-rgb);
}

.leader-board.amber {
  --tone: var(--amber-rgb);
}

.lb-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.lb-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: rgb(var(--tone));
  background: rgba(var(--tone), 0.12);
}

.lb-ico .ico {
  width: 15px;
  height: 15px;
}

.lb-head > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lb-head strong {
  color: var(--text-strong);
  font-size: 13.5px;
  font-weight: 600;
}

.lb-head span {
  color: var(--muted);
  font-size: 12px;
}

.lb-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lb-list li + li {
  border-top: 1px solid var(--line);
}

.lb-list li[hidden] {
  display: none;
}

.leader-row {
  display: grid;
  grid-template-columns: 22px 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s;
}

.leader-row:hover {
  background: var(--hover);
  text-decoration: none;
}

.leader-row:focus-visible {
  outline: none;
  box-shadow: inset var(--ring);
}

.leader-row .init-avatar {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

/* Rank: 1–3 get a soft gold, silver and bronze; the rest a plain number. */
.lb-rank {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--faint);
  font: 600 11.5px/1 var(--font-mono);
}

.lb-rank.r1 {
  color: #f5c451;
  background: rgba(245, 196, 81, 0.14);
}

.lb-rank.r2 {
  color: #c9ccd6;
  background: rgba(201, 204, 214, 0.12);
}

.lb-rank.r3 {
  color: #d99a62;
  background: rgba(217, 154, 98, 0.14);
}

.lb-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lb-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lb-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 600;
}

.lb-tag {
  flex: none;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--muted);
  font: 600 10.5px/1.4 var(--font-mono);
  letter-spacing: 0.02em;
}

.lb-tag.red {
  border-color: rgba(var(--red-rgb), 0.4);
  color: var(--down);
  font-family: inherit;
}

.lb-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--faint);
  font-size: 12px;
}

.lb-value {
  color: var(--text-strong);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

.leader-board.green .lb-value {
  color: var(--up);
}

.leader-board.red .lb-value {
  color: var(--down);
}

.lb-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  padding: 10px 16px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.lb-more:hover {
  color: var(--text-strong);
  background: var(--hover);
}

.lb-more .ico {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}

.lb-more.open .ico {
  transform: rotate(180deg);
}

.lb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  padding: 34px 12px;
  color: var(--faint);
  font-size: 12.5px;
  text-align: center;
}

.lb-empty .ico {
  width: 20px;
  height: 20px;
  opacity: 0.6;
}

@media (max-width: 760px) {
  .leaders-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .leaders .card-head {
    align-items: flex-start;
  }
}

.users-card .history-head .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.users-card .history-head .btn .ico {
  width: 14px;
  height: 14px;
}

.users-table td > span {
  display: block;
}

.users-table .strong {
  color: var(--text-strong);
  font-weight: 600;
}

.users-table td .by.pos {
  color: var(--up);
}

.avatar-wrap {
  position: relative;
  flex: none;
  display: inline-block;
}

.online-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 2px var(--panel);
}

.init-avatar.orange {
  --tone: var(--accent-rgb);
}

.users-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.page-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.page-btn:hover:not(:disabled) {
  color: var(--text-strong);
  background: var(--panel-3);
}

.page-btn.on {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 600;
}

.page-btn:disabled:not(.on) {
  opacity: 0.35;
  cursor: default;
}

.page-btns .gap {
  color: var(--faint);
  padding: 0 4px;
}

@media (max-width: 1200px) {
  .ukpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.users-table td > span.status-badge {
  display: inline-flex;
}

a.tool-btn:not(.primary) {
  color: var(--text);
}

/* Date range picker (User Management) */

.date-picker {
  position: relative;
}

.date-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.date-btn:hover,
.date-btn.open {
  border-color: var(--line-strong);
}

.date-btn.open {
  box-shadow: var(--ring);
  border-color: var(--accent);
}

.date-btn.set {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.date-btn .ico {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.date-btn.set > .ico:first-child {
  color: var(--accent);
}

.date-btn em {
  font-style: normal;
  color: var(--muted);
}

.date-btn .chev {
  width: 14px;
  height: 14px;
  transition: transform 0.15s;
}

.date-btn.open .chev {
  transform: rotate(180deg);
}

.date-pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  grid-template-columns: 250px 290px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop-in 0.15s ease-out;
}

.date-pop[hidden] {
  display: none;
}

.date-presets {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-right: 1px solid var(--line);
}

.preset {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.preset span {
  font-size: 11.5px;
  color: var(--faint);
}

.preset:hover {
  background: var(--hover);
}

.preset.on {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.date-custom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
}

.pop-title {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.mini-seg.full {
  display: flex;
}

.mini-seg.full button {
  flex: 1;
}

.date-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.date-inputs label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.date-inputs input {
  padding: 7px 8px;
}

input[type='date'] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

input[type='date']::-webkit-calendar-picker-indicator {
  filter: var(--picker-invert);
  cursor: pointer;
}

.date-err {
  font-size: 12px;
  color: var(--down);
}

.date-err[hidden] {
  display: none;
}

.pop-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--faint);
}

.ukpi-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ukpi-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 999px;
  color: rgb(var(--tone));
  background: rgba(var(--tone), 0.12);
}

.sort-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

select.compact {
  width: auto;
  min-height: 34px;
  padding: 6px 32px 6px 12px;
  font-size: 13.5px;
}

.preset span {
  white-space: nowrap;
}

/* Partner code, ledger and positions (User Management) */

.partner-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.partner-chip {
  padding: 3px 9px;
  border-radius: 7px;
  border: 1px solid rgba(var(--blue-rgb), 0.35);
  background: rgba(var(--blue-rgb), 0.12);
  color: rgb(var(--blue-rgb));
  font: 600 12.5px/1.4 var(--font-mono);
  letter-spacing: 0.02em;
  cursor: pointer;
}

.partner-chip:hover {
  background: rgba(var(--blue-rgb), 0.22);
}

.mini-edit {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}

.mini-edit .ico {
  width: 13px;
  height: 13px;
}

tr:hover .mini-edit,
.mini-edit:focus-visible {
  opacity: 1;
}

.mini-edit:hover {
  background: var(--panel-2);
  color: var(--text-strong);
}

.upper {
  text-transform: uppercase;
}

.cell-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 4px 8px;
  margin: -4px -8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cell-link:hover {
  background: rgba(var(--accent-rgb), 0.08);
}

.link-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
}

.link-sub .ico {
  width: 13px;
  height: 13px;
}

.cell-link:hover .link-sub {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Extra-wide dialog */

.modal.xl {
  width: 1040px;
}

.ledger {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ledger .reach {
  margin-top: 0;
}

.ledger-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.lt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-2);
}

.lt span {
  font-size: 12px;
  color: var(--muted);
}

.lt strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
  white-space: nowrap;
}

.lt.pos strong {
  color: var(--up);
}

.lt.neg strong {
  color: var(--down);
}

.lt.accent {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: var(--accent-soft);
}

.ledger-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ledger-scroll {
  max-height: calc(var(--app-h, 100vh) - 430px);
  min-height: 160px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.ledger-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-2);
  padding: 10px 14px;
}

.ledger-table td {
  padding: 10px 14px;
}

.ledger-table td > .by {
  display: block;
}

.ledger-table td.pos {
  color: var(--up);
}

.ledger-table td.neg {
  color: var(--down);
}

.ledger-table .sym {
  color: var(--text-strong);
  font-weight: 600;
}

.strong-cell {
  color: var(--text-strong);
  font-weight: 600;
}

.ledger-table tr.opening td {
  background: var(--hover);
}

.ledger .empty {
  padding: 26px 0;
}

.pos-sym {
  display: flex;
  align-items: center;
  gap: 8px;
}

.side-badge {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
}

.side-badge.long {
  color: var(--up);
  background: var(--up-soft);
}

.side-badge.short {
  color: var(--down);
  background: var(--down-soft);
}

.lev {
  font-size: 12px;
  color: var(--muted);
}

.warn-text {
  color: var(--warn);
}

.orders-note {
  margin: 0;
}

@media (max-width: 1100px) {
  .ledger-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- User page ---------- */

.up-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.up-id {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.back-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--sidebar-text);
}

.back-btn:hover {
  color: var(--text-strong);
  border-color: var(--line-strong);
}

.back-btn .ico {
  width: 18px;
  height: 18px;
}

.avatar-wrap.big .init-avatar {
  width: 52px;
  height: 52px;
  font-size: 20px;
}

.avatar-wrap.big .online-dot {
  width: 13px;
  height: 13px;
}

.up-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.up-name h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong);
}

.up-sub {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13.5px;
}

.dot-sep {
  margin: 0 7px;
  color: var(--faint);
}

.up-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn.soft-amber {
  color: var(--warn);
  border-color: rgba(var(--amber-rgb), 0.35);
  background: rgba(var(--amber-rgb), 0.12);
}

.btn.soft-amber:hover:not(:disabled) {
  background: rgba(var(--amber-rgb), 0.2);
}

.btn.soft-red {
  color: var(--down);
  border-color: rgba(var(--red-rgb), 0.4);
  background: rgba(var(--red-rgb), 0.13);
}

.btn.soft-red:hover {
  background: rgba(var(--red-rgb), 0.22);
}

.btn.soft-green {
  color: var(--up);
  border-color: rgba(var(--green-rgb), 0.4);
  background: var(--up-soft);
}

.block-banner {
  margin-bottom: 16px;
  align-items: center;
}

.block-banner .ico {
  width: 16px;
  height: 16px;
  flex: none;
}

.tabs + div > .card:first-child,
.tabs + div > .ledger-tiles:first-child,
.tabs + section,
.tabs + div > section:first-child {
  margin-top: 18px;
}

.profile-card .card-head .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 28px;
}

.pf-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.pf-label {
  font-size: 12.5px;
  color: var(--muted);
}

.pf-value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.pf-value .faint {
  font-weight: 400;
}

.pf-sub {
  flex-basis: 100%;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--faint);
}

.pf-divider {
  height: 1px;
  margin: 26px 0 22px;
  background: var(--line);
}

.mini-edit.show {
  opacity: 1;
}

.wl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chip-mini {
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sidebar-text);
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.notes-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.notes-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong);
}

.note-compose {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 14px;
}

.note-compose textarea {
  min-height: 46px;
}

.note-compose .btn {
  flex: none;
  padding: 10px 16px;
}

.notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-2);
}

.init-avatar.small {
  width: 30px;
  height: 30px;
  font-size: 12.5px;
}

.note-body {
  flex: 1;
  min-width: 0;
}

.note-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.note-meta strong {
  color: var(--text-strong);
  font-weight: 600;
  font-size: 13.5px;
}

.note-body p {
  margin: 4px 0 0;
  white-space: pre-wrap;
  color: var(--text);
  line-height: 1.5;
}

.notes-empty {
  margin: 0;
}

.up-tiles {
  margin-top: 18px;
}

.lt em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--faint);
}

.lt.warn strong {
  color: var(--warn);
}

.card.sect {
  margin-top: 18px;
}

.sect .card-head {
  flex-wrap: wrap;
}

.sub-h {
  margin: 18px 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
}

.ledger-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ledger-framed {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  max-height: 560px;
  overflow: auto;
}

.liq-row td {
  background: rgba(var(--red-rgb), 0.05);
}

.load-more {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.load-more .btn[hidden] {
  display: none;
}

.bank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.bank-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-2);
}

.bank-card.primary {
  border-color: rgba(var(--green-rgb), 0.35);
}

.bank-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.bank-top strong {
  color: var(--text-strong);
}

.timeline {
  display: flex;
  flex-direction: column;
}

.tl-day {
  position: sticky;
  top: 0;
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.tl-day:first-child {
  margin-top: 0;
}

.tl-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 4px 10px 0;
}

.tl-item::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 44px;
  bottom: -10px;
  width: 1px;
  background: var(--line);
}

.tl-item:last-child::before,
.tl-item:has(+ .tl-day)::before {
  display: none;
}

.tl-ico {
  --tone: var(--grey-rgb);
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: rgb(var(--tone));
  background: rgba(var(--tone), 0.13);
  border: 1px solid rgba(var(--tone), 0.25);
}

.tl-ico .ico {
  width: 16px;
  height: 16px;
}

.tl-ico.green { --tone: var(--green-rgb); }
.tl-ico.red { --tone: var(--red-rgb); }
.tl-ico.amber { --tone: var(--amber-rgb); }
.tl-ico.blue { --tone: var(--blue-rgb); }
.tl-ico.violet { --tone: var(--violet-rgb); }
.tl-ico.cyan { --tone: var(--cyan-rgb); }

.tl-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 1px;
}

.tl-body strong {
  color: var(--text-strong);
  font-weight: 600;
}

.tl-body span {
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.tl-time {
  flex: none;
  font-size: 12.5px;
  color: var(--faint);
  padding-top: 2px;
}

@media (max-width: 1100px) {
  .pf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Terms & Support ---------- */

.grid.split.terms-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
  align-items: start;
}

@media (max-width: 1100px) {
  .grid.split.terms-grid {
    grid-template-columns: 1fr;
  }
}

.terms-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.terms-input {
  min-height: 520px;
  font: 400 13.5px/1.65 var(--font-mono);
  tab-size: 2;
}

.terms-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
}

.terms-status {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}

.terms-status.clean {
  color: var(--up);
  background: var(--up-soft);
}

.terms-status.dirty {
  color: var(--accent);
  background: var(--accent-soft);
}

.terms-preview {
  max-height: 460px;
  overflow: auto;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-2);
  font-size: 13.5px;
  line-height: 1.65;
}

.terms-preview h3 {
  font-size: 16px;
  margin: 18px 0 8px;
}

.terms-preview h4 {
  font-size: 14px;
  margin: 16px 0 6px;
}

.terms-preview h3:first-child,
.terms-preview h4:first-child {
  margin-top: 0;
}

.terms-preview p {
  margin: 0 0 10px;
  color: var(--sidebar-text);
}

.terms-preview p.bullet {
  display: flex;
  gap: 10px;
  padding-left: 6px;
}

.terms-preview p.bullet > span:first-child {
  color: var(--accent);
  flex: none;
}

/* ---------- Support page ---------- */
/* One form, not full width: intro, a card per chat app, then a save bar. */
.support-panel {
  max-width: 820px;
  padding: 0;
  overflow: hidden;
}

.support-panel form {
  display: flex;
  flex-direction: column;
}

.support-intro {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 24px 18px;
}

.support-intro > div {
  flex: 1;
  min-width: 0;
}

.support-intro h2 {
  font-size: 16px;
  margin: 1px 0 4px;
}

.support-intro .muted {
  margin: 0;
  max-width: 560px;
  font-size: 13px;
  line-height: 1.6;
}

.support-intro-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

.support-count {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.support-count .dot,
.support-state .dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.support-count .dot {
  background: var(--faint);
}

.support-count.has-live {
  color: var(--up);
  border-color: rgba(var(--up-rgb), 0.35);
  background: var(--up-soft);
}

.support-count.has-live .dot {
  background: var(--up);
  box-shadow: 0 0 0 3px rgba(var(--up-rgb), 0.2);
}

/* Chat cards */
.support-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 24px 22px;
}

.support-channel {
  --brand-rgb: var(--grey-rgb);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.support-channel.whatsapp {
  --brand-rgb: 37, 211, 102;
}

.support-channel.telegram {
  --brand-rgb: 42, 171, 238;
}

.support-channel.is-live {
  border-color: rgba(var(--up-rgb), 0.32);
  box-shadow: 0 0 0 3px rgba(var(--up-rgb), 0.05);
}

.support-channel.is-warn {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.06);
}

.support-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px 14px;
  padding: 16px 18px;
}

.support-logo {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: rgb(var(--brand-rgb));
  background: rgba(var(--brand-rgb), 0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), 0.28);
  transition: filter 0.2s, opacity 0.2s;
}

.support-channel.is-off .support-logo {
  filter: grayscale(1);
  opacity: 0.7;
}

.support-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.support-title strong {
  color: var(--text-strong);
  font-size: 14.5px;
  font-weight: 600;
}

.support-title span {
  overflow: hidden;
  color: var(--faint);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.support-state.live {
  color: var(--up);
  background: var(--up-soft);
  border-color: rgba(var(--up-rgb), 0.3);
}

.support-state.live .dot {
  box-shadow: 0 0 0 3px rgba(var(--up-rgb), 0.2);
}

.support-state.warn {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.support-state.off {
  color: var(--muted);
  background: var(--hover-strong);
  border-color: var(--line-strong);
}

/* Card body: the contact field and its live link preview */
.support-body {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.support-channel .field {
  margin-bottom: 12px;
}

.support-channel .field .help {
  line-height: 1.55;
}

.support-input {
  position: relative;
}

.support-input > .ico {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
  transition: color 0.15s;
}

.support-input:focus-within > .ico {
  color: var(--accent);
}

.support-input input {
  min-height: 42px;
  padding-left: 38px;
  font-family: var(--font-mono);
  font-size: 13.5px;
}

.support-input input::placeholder {
  font-family: var(--font-sans);
}

.support-preview {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
}

.support-preview > .ico {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.support-preview.error {
  border-style: solid;
  border-color: rgba(var(--down-rgb), 0.35);
  background: var(--down-soft);
  color: var(--down);
}

.support-preview .bad {
  color: var(--down);
}

.support-preview.ok {
  flex-direction: column;
  gap: 8px;
  border-style: solid;
  border-color: rgba(var(--up-rgb), 0.28);
  background: rgba(var(--up-rgb), 0.06);
}

.support-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.support-link-row > .ico {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--up);
}

.support-opens {
  color: var(--muted);
  font-weight: 500;
}

.support-link-row a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  border-bottom: 1px solid var(--line-strong);
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-decoration: none;
  word-break: break-all;
  transition: color 0.15s, border-color 0.15s;
}

.support-link-row a:hover {
  color: var(--up);
  border-color: currentColor;
}

.support-link-row a .ico {
  flex: none;
  width: 13px;
  height: 13px;
}

.support-kind {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 11.5px;
  font-weight: 600;
}

.support-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--up-rgb), 0.18);
  color: var(--muted);
  font-size: 12px;
}

.support-note .ico {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--warn);
}

/* Save bar */
.support-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}

.support-foot-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
}

.support-foot-note .ico {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--faint);
}

.support-foot .btn {
  min-height: 40px;
  padding: 8px 18px;
}

@media (max-width: 600px) {
  .support-intro {
    flex-wrap: wrap;
    padding: 18px 16px 16px;
  }

  .support-intro > div {
    flex-basis: calc(100% - 54px);
  }

  .support-count {
    margin-left: 54px;
  }

  .support-list {
    padding: 0 16px 18px;
  }

  .support-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 14px;
  }

  .support-head .support-state {
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: start;
  }

  .support-title span {
    white-space: normal;
  }

  .support-body {
    padding: 14px;
  }

  .support-foot {
    padding: 14px 16px;
  }

  .support-foot .btn {
    width: 100%;
  }
}

/* ---------- Pay In / Payout ---------- */

.kpi-grid.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1400px) {
  .kpi-grid.five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pay-card {
  margin-top: 18px;
}

.pay-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 14px 14px;
  border-bottom: 1px solid var(--line);
}

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-2);
}

.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.seg-btn:hover {
  color: var(--text-strong);
  text-decoration: none;
}

.seg-btn.on {
  color: var(--text-strong);
  background: var(--seg-active);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 0 0 1px var(--line-strong);
}

.seg-count {
  font-size: 11.5px;
  color: var(--faint);
}

.pay-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 240px;
  padding: 0 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--field);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pay-search:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.pay-search .ico {
  width: 16px;
  height: 16px;
  color: var(--faint);
}

.pay-search input {
  min-height: 36px;
  border: 0;
  background: transparent;
  padding: 8px 0;
}

.pay-search input:focus,
.pay-search input:hover {
  outline: none;
  box-shadow: none;
  filter: none;
}

.pay-table td {
  vertical-align: middle;
}

.pay-amount {
  font-size: 16px;
  font-weight: 700;
}

.pf-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 215px;
}

.pf-list.compact {
  margin-top: 8px;
  min-width: 210px;
}

.pf-head {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 2px;
}

.pf {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.pf-label {
  color: var(--faint);
}

.pf-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.pf-value.mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

.copy-btn {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}

.copy-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.copy-btn .ico {
  width: 13px;
  height: 13px;
}

.pay-proof {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.pay-shot {
  flex: none;
  width: 46px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel-2);
}

.pay-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pay-shot.none {
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--faint);
  text-align: center;
}

.by.pay-note {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Every detail value at one size, whatever the table styles around it. */
.pay-table .pf-value {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.pay-table .pf-value.mono {
  font-size: 12.5px;
  font-weight: 400;
}

.pay-table td,
.pay-table th {
  padding-left: 11px;
  padding-right: 11px;
}

.pf-list.compact .pf {
  grid-template-columns: 58px minmax(0, 1fr) 24px;
}

.icon-action:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pay-modal-bank {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.settings-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
}

.settings-link:hover {
  border-color: var(--accent);
}

.settings-link span {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.settings-link small {
  color: var(--muted);
}

.settings-link .flip {
  transform: rotate(180deg);
}

.pay-table .row-icons {
  gap: 4px;
}

.pay-table .icon-action {
  width: 31px;
  height: 31px;
}

/* Row actions: [approve reject delete] | [ledger positions]; the row itself opens the details. */
.pay-table .row-icons {
  align-items: center;
}

.pay-table .row-icons .icon-action {
  width: 29px;
  height: 29px;
}

.pay-table .row-icons .icon-action .ico {
  width: 15px;
  height: 15px;
}

/* Keep room for the actions: long emails and bank names end in "…" (the row opens the full details). */
.pay-table .who {
  max-width: 200px;
}

.pay-table .who > div {
  min-width: 0;
}

.pay-table .who > div > .strong,
.pay-table .who > div > span:not(.status-badge) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pay-table .pay-method,
.pay-table td > .cell-stack {
  max-width: 190px;
}

.row-icons-group {
  display: inline-flex;
  gap: 4px;
}

.row-icons-sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--line-strong);
}

.icon-action.blue:hover {
  color: rgb(var(--blue-rgb));
  background: rgba(var(--blue-rgb), 0.12);
  border-color: rgba(var(--blue-rgb), 0.4);
}

.icon-action.violet:hover {
  color: rgb(var(--violet-rgb));
  background: rgba(var(--violet-rgb), 0.12);
  border-color: rgba(var(--violet-rgb), 0.4);
}

.icon-action.red:hover {
  background: var(--down-soft);
  border-color: rgba(var(--down-rgb), 0.4);
}

/* ---------- Accounts ---------- */

.accounts-table td {
  vertical-align: middle;
}

.accounts-table .who > div {
  display: flex;
  flex-direction: column;
}

.broker-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.broker-cell > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.broker-cell strong {
  font-size: 13px;
}

.settle-due {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--down);
  background: var(--down-soft);
}

tr.owes-row td:first-child {
  box-shadow: inset 3px 0 0 var(--down);
}

.num.pos,
strong.pos {
  color: var(--up);
}

.num.neg,
strong.neg {
  color: var(--down);
}

.due-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.due-toggle.on {
  color: var(--down);
  border-color: rgba(var(--red-rgb), 0.45);
  background: var(--down-soft);
}

.settle-help {
  margin: 12px 4px 0;
}

/* Filter rows on Deposits / Withdrawals / Accounts */
.pay-filters select {
  width: auto;
  max-width: 260px;
}

.pay-filters .pay-search {
  flex: 1 1 280px;
}

/* The date popover opens leftwards from a button near the right edge. */
.pay-filters .date-pop {
  left: auto;
  right: 0;
}

/* Five cards per row: keep each amount on one line. */
.kpi-grid.five .kpi-value {
  font-size: 21px;
  white-space: nowrap;
}

.kpi-grid.five .kpi-text {
  flex: 1;
}

.accounts-table .num {
  white-space: nowrap;
}

/* Accounts: export and rows per page */
.export-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  color: var(--up);
  border-color: rgba(var(--green-rgb), 0.4);
}

.export-btn:hover {
  background: var(--up-soft);
}

.export-btn .ico {
  width: 15px;
  height: 15px;
}

.pager-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.rows-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.rows-label select {
  width: auto;
  min-height: 32px;
  padding: 4px 30px 4px 10px;
  background-position: right 8px center;
  font-size: 13px;
}

/* ---------- Deposits / Withdrawals ---------- */

.stat-strip.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stat-strip.five .stat-value {
  font-size: 24px;
}

.pay-card {
  margin-top: 16px;
}

.pay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 14px 16px;
}

.pay-head h2 {
  margin: 0;
  font-size: 15px;
}

.pay-head p {
  margin: 3px 0 0;
  font-size: 13px;
}

.seg-btn .ico {
  width: 15px;
  height: 15px;
}

.seg-num {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--panel-3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.seg-btn.on .seg-num {
  color: var(--text-strong);
}

.icon-btn.bordered {
  border-color: var(--line-strong);
  background: var(--panel);
}

.pay-table th {
  padding-top: 12px;
  padding-bottom: 10px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

.pay-table tbody tr:first-child td {
  border-top: 0;
}

.pay-table tr.clickable:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.6);
  outline-offset: -2px;
}

.cell-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.4;
}

.cell-stack > strong {
  font-weight: 500;
  color: var(--text-strong);
}

.cell-stack > span {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-stack > span.mono {
  font-size: 12px;
}

.cell-stack .status-badge {
  align-self: flex-start;
}

.req-id {
  font-size: 13px;
}

.pay-amount {
  font-size: 14.5px;
  font-weight: 600;
}

.pay-table .who .strong {
  color: var(--text-strong);
  font-weight: 500;
}

.pay-table .who .strong:hover {
  color: var(--accent);
}

.pay-table .who span {
  font-size: 12.5px;
}

.pay-method {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mini-shot {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  display: grid;
  place-items: center;
  color: var(--faint);
}

.mini-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-shot .ico {
  width: 16px;
  height: 16px;
}

.mini-shot:hover {
  border-color: var(--accent);
}

.icon-action.ghost {
  border-color: transparent;
  background: transparent;
}

.icon-action.ghost:hover {
  background: var(--hover-strong);
}

.pay-card .users-pager {
  padding: 12px 14px 10px;
}

/* ---------- Side panel ---------- */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  background: var(--backdrop);
  animation: fade-in 0.15s ease-out;
}

.drawer {
  width: 440px;
  max-width: 100%;
  height: var(--app-h, 100vh);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  animation: drawer-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes drawer-in {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--line);
}

.drawer-head h2 {
  margin: 0;
  font-size: 16px;
}

.drawer-head p {
  margin: 2px 0 0;
  font-size: 12.5px;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
}

.drawer-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}

.drawer-foot .grow {
  flex: 1;
}

.dr-hero {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dr-hero strong {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.dr-meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.dr-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.dr-section h3 {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.dr-section .who {
  margin-bottom: 12px;
}

.dr-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.dr-links .btn .ico {
  width: 14px;
  height: 14px;
}

.dr-section .who .strong {
  color: var(--text-strong);
  font-weight: 500;
}

.drawer .pf-list {
  gap: 6px;
  min-width: 0;
}

.drawer .pf {
  grid-template-columns: 96px minmax(0, 1fr) 26px;
  font-size: 13px;
}

.drawer .pf-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
}

.drawer .pf-value.mono {
  font-size: 12.5px;
}

.dr-shot {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
}

.dr-shot img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
}

.dr-shot.none {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  font-size: 13px;
  color: var(--faint);
}

.dr-shot.none .ico {
  width: 18px;
  height: 18px;
}

.dr-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dr-timeline li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 14px 20px;
  font-size: 13px;
}

.dr-timeline li:last-child {
  padding-bottom: 0;
}

.dr-timeline li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--faint);
}

.dr-timeline li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 16px;
  bottom: 2px;
  width: 1px;
  background: var(--line-strong);
}

.dr-timeline li.approved::before {
  background: var(--up);
}

.dr-timeline li.rejected::before {
  background: var(--down);
}

.dr-timeline li.waiting::before {
  background: var(--warn);
}

.dr-timeline strong {
  font-weight: 500;
  color: var(--text-strong);
}

.dr-timeline span {
  color: var(--muted);
  text-align: right;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .stat-strip.five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-strip.five .stat-cell:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .stat-strip.five {
    grid-template-columns: minmax(0, 1fr);
  }

  .drawer-foot {
    flex-wrap: wrap;
  }
}

/* ---------- User details ---------- */

.up-head {
  align-items: center;
  margin-bottom: 18px;
}

.up-id {
  gap: 14px;
}

.back-btn {
  width: 34px;
  height: 34px;
  flex: none;
  border-color: var(--line-strong);
  color: var(--muted);
}

.avatar-wrap.big .init-avatar {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.up-title {
  min-width: 0;
}

.up-name {
  gap: 8px;
}

.up-name h1 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.up-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 13px;
}

.up-sub .dot-sep {
  margin: 0 8px;
}

.up-sub .mono {
  font-size: 12.5px;
}

.up-sub .partner-chip {
  padding: 0 7px;
  font-size: 11.5px;
  line-height: 20px;
}

.btn.icon-only {
  width: 36px;
  padding: 0;
}

.ico-more {
  stroke-width: 3.2;
}

/* "⋯" action menu */
.menu-wrap {
  position: relative;
}

.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 200px;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  animation: pop-in 0.12s ease-out;
}

.menu[hidden] {
  display: none;
}

.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.menu-item .ico {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.menu-item:hover:not(:disabled),
.menu-item:focus-visible {
  outline: none;
  background: var(--hover-strong);
  color: var(--text-strong);
}

.menu-item.danger,
.menu-item.danger .ico {
  color: var(--down);
}

.menu-item.danger:hover:not(:disabled) {
  background: var(--down-soft);
  color: var(--down);
}

.menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.menu-item.danger {
  margin-top: 4px;
  position: relative;
}

.menu-item.danger::before {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  top: -3px;
  height: 1px;
  background: var(--line);
}

/* Underlined page tabs */
.tabs.underline {
  width: 100%;
  gap: 4px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.tabs.underline .tab {
  position: relative;
  padding: 10px 12px 12px;
  border-radius: 0;
}

.tabs.underline .tab.active {
  background: none;
  box-shadow: none;
}

.tabs.underline .tab.active::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.tabs.underline .tab:hover:not(.active) {
  color: var(--text-strong);
}

/* Profile tab: detail sections on the left, wallet + notes on the right */
.up-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
  margin-top: 20px;
}

.up-main,
.up-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.up-grid .card {
  margin-top: 0;
}

.dl-card .card-head {
  margin-bottom: 4px;
}

.dl {
  margin: 0;
}

.dl-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.dl-row:first-child {
  border-top: 0;
}

.dl-row dt {
  font-size: 13px;
  color: var(--muted);
}

.dl-row dd {
  margin: 0;
  min-width: 0;
}

.dl-val {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.dl-val .faint {
  font-weight: 400;
}

.dl-sub {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}

.wallet-card .card-head {
  margin-bottom: 10px;
}

.wallet-balance {
  display: block;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  line-height: 1.2;
}

.wallet-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.wallet-stats dt {
  font-size: 12.5px;
  color: var(--muted);
}

.wallet-stats dd {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-strong);
}

.notes-card .note-compose {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.notes-card .note-compose textarea {
  min-height: 72px;
}

.notes-card .note-compose .btn {
  align-self: flex-end;
  padding: 4px 12px;
}

.notes-card .notes {
  gap: 8px;
}

.notes-card .note {
  padding: 10px 12px;
}

.notes-card .note-body p {
  font-size: 13px;
}

.notes-card .notes-empty {
  margin: 4px 0 0;
  font-size: 13px;
}

@media (max-width: 1100px) {
  .up-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .dl-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ---------- Wallet & Ledger / Activity (user page), ledger dialog ---------- */

/* Number tiles as one flat strip; hairlines between cells, no gaps. */
.ledger-tiles {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  overflow: hidden;
}

.up-tiles {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.lt,
.lt.accent {
  gap: 4px;
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
  background: var(--panel);
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}

.lt span {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

.lt strong {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.lt em {
  font-size: 12px;
}

.card-sub {
  margin: 3px 0 0;
}

/* The pending-withdrawal notice also carries .empty (amber tone); keep it a compact banner. */
.reach.empty {
  margin: 0;
  padding: 11px 14px;
  text-align: left;
}

/* Ledger totals on one line (Wallet tab) */
.ledger-sum {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ledger-sum > div {
  flex: 1 1 150px;
  padding: 12px 16px;
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}

.ledger-sum dt {
  font-size: 12.5px;
  color: var(--muted);
}

.ledger-sum dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}

.ledger-sum dd.pos {
  color: var(--up);
}

.ledger-sum dd.neg {
  color: var(--down);
}

.ledger {
  gap: 16px;
}

.ledger-framed,
.ledger-scroll,
.table-wrap.framed {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.ledger-table th {
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
}

.ledger-table tbody tr:first-child td {
  border-top: 0;
}

.ledger-table td {
  padding: 11px 14px;
}

.table-wrap.framed .ledger-table td .cell-stack > strong {
  font-weight: 500;
}

.card.sect .card-head {
  align-items: flex-start;
}

/* Saved bank accounts */
.bank-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.bank-card {
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
}

.bank-card.primary {
  border-color: rgba(var(--up-rgb), 0.35);
}

.bank-top {
  margin: 0;
  gap: 10px;
  justify-content: flex-start;
}

.bank-top strong {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.bank-ico {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--panel-3);
  color: var(--muted);
}

.bank-ico .ico {
  width: 16px;
  height: 16px;
}

.bank-card .pf-list {
  min-width: 0;
  gap: 4px;
}

.bank-card .pf {
  grid-template-columns: 92px minmax(0, 1fr) 24px;
  font-size: 13px;
}

.bank-card .pf-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
}

.bank-added {
  font-size: 12px;
  color: var(--faint);
}

/* Activity feed */
.activity-filters {
  margin: 0 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.activity-card .timeline {
  max-height: 720px;
  overflow-y: auto;
  margin: 0 -22px -20px;
  padding: 0 22px 16px;
}

.tl-day {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 -22px;
  padding: 14px 22px 8px;
  background: var(--panel);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.tl-day:first-child {
  margin-top: 0;
}

.tl-item {
  gap: 12px;
  margin: 0 -10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}

.tl-item:hover {
  background: var(--hover);
}

.tl-item::before {
  left: 25px;
  top: 42px;
}

.tl-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  box-shadow: none;
  border: 0;
}

.tl-ico .ico {
  width: 15px;
  height: 15px;
}

.tl-body strong {
  font-size: 13.5px;
  font-weight: 500;
}

.tl-body span {
  font-size: 12.5px;
}

.tl-time {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Payment settings ---------- */

.set-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.set-form,
.set-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.set-side {
  position: sticky;
  top: 84px;
}

.set-grid .card {
  margin-top: 0;
}

.set-card .card-head {
  margin-bottom: 8px;
}

/* Settings row: what it is on the left, the input on the right */
.set-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.set-row:first-of-type {
  border-top: 0;
}

.set-desc h3 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-strong);
}

.set-desc p {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.set-body {
  min-width: 0;
}

.set-body .field {
  margin-bottom: 0;
}

.set-body .field label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

.set-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

input.upper {
  text-transform: uppercase;
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ₹ prefix inside an input */
.affix {
  position: relative;
}

.affix-pre {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  font-size: 14px;
  pointer-events: none;
}

.affix input {
  padding-left: 28px;
}

/* Mode */
.mode-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-2);
  transition: background 0.15s, border-color 0.15s;
}

.mode-ico {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--panel-3);
  color: var(--muted);
}

.mode-ico .ico {
  width: 18px;
  height: 18px;
}

.mode-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mode-text strong {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-strong);
}

.mode-text span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Grid so the text can drop under the switch on narrow screens. */
.mode-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'ico title sw'
    'ico desc sw';
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
}

.mode-row .mode-text {
  display: contents;
}

.mode-row .mode-ico {
  grid-area: ico;
}

.mode-row .mode-text strong {
  grid-area: title;
  align-self: end;
}

.mode-row .mode-text span {
  grid-area: desc;
  align-self: start;
}

.mode-row .switch {
  grid-area: sw;
}

@media (max-width: 700px) {
  .mode-row {
    grid-template-areas:
      'ico title sw'
      'desc desc desc';
    row-gap: 10px;
    padding: 14px;
  }

  .mode-row .mode-text strong {
    align-self: center;
  }

  .mode-row .mode-ico {
    width: 32px;
    height: 32px;
  }
}

.demo-on .mode-row {
  border-color: rgba(var(--amber-rgb), 0.4);
  background: rgba(var(--amber-rgb), 0.08);
}

.demo-on .mode-ico {
  color: var(--warn);
  background: rgba(var(--amber-rgb), 0.16);
}

.demo-on .switch input:checked + .slider {
  background: var(--warn);
}

/* Sticky save bar at the bottom of the form */
.save-bar {
  position: sticky;
  bottom: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  animation: pop-in 0.18s ease-out;
}

.save-bar[hidden] {
  display: none;
}

.save-bar > span {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-strong);
}

.save-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.read-only-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.read-only-note .ico {
  width: 15px;
  height: 15px;
}

/* Demo mode: the row is the whole card */
.set-card.mode-card {
  padding: 0;
  border: 0;
  background: none;
}

.mode-card .mode-row {
  border-radius: var(--radius);
  background: var(--panel);
  padding: 16px 18px;
}

.card-head h2.with-count {
  display: flex;
  align-items: center;
  gap: 8px;
}

.with-count .head-count[hidden] {
  display: none;
}

/* Payee accounts: pick the active one */
.payee-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payee {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px 14px 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.payee:hover {
  border-color: var(--line-strong);
}

.payee.on {
  border-color: var(--accent-line);
  background: rgba(var(--accent-rgb), 0.06);
  box-shadow: 0 0 0 1px var(--accent-line) inset;
}

.payee-radio {
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.payee-radio input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.payee-dot {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--field);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.payee-radio input:checked + .payee-dot {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3.5px var(--field);
}

.payee-radio input:focus-visible + .payee-dot {
  box-shadow: inset 0 0 0 3.5px var(--field), var(--ring);
}

.payee-radio input:disabled {
  cursor: default;
}

.payee-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.payee-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.payee-top strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
}

.payee-top .badge {
  padding: 0 8px;
  font-size: 11px;
  text-transform: none;
}

.payee-name {
  font-size: 12.5px;
  color: var(--muted);
}

.payee-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 8px;
}

.payee-line {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text);
}

.payee-line .ico {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--faint);
}

.payee-line .mono {
  overflow-wrap: anywhere;
}

.payee-line .faint {
  color: var(--faint);
}

.payee-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.payee-actions .btn {
  margin-right: 6px;
}

.payee-actions .icon-btn {
  width: 30px;
  height: 30px;
}

.payee-actions .icon-btn .ico {
  width: 15px;
  height: 15px;
}

.payee-actions .icon-btn.danger:hover {
  color: var(--down);
  background: var(--down-soft);
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

@media (max-width: 560px) {
  .payee {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .payee-actions {
    grid-column: 2;
  }
}

/* "What users see": a replica of the app's Add Funds sheet (always dark, like the app) */
.pv-phone {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: #18191e;
  border: 1px solid #2b2c31;
  color: #e1e1e5;
  font-size: 12.5px;
}

.pv-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.pv-close {
  color: #8e9299;
  font-size: 18px;
  line-height: 1;
}

.pv-lede {
  margin: -6px 0 0;
  color: #8e9299;
  font-size: 11.5px;
}

.pv-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(120, 150, 255, 0.1);
  color: #aebcff;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: left;
}

.pv-note.warn {
  background: rgba(248, 210, 60, 0.12);
  color: #f8d23c;
}

.pv-note .ico {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 1px;
}

.pv-note[hidden],
.pv-main[hidden],
.pv-test[hidden] {
  display: none;
}

.pv-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pv-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #2b2c31;
}

.pv-tab {
  margin-bottom: -1px;
  padding: 8px 0 9px;
  border: 0;
  background: none;
  color: #8e9299;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color 0.15s, box-shadow 0.15s;
}

.pv-tab:hover {
  color: #e1e1e5;
}

.pv-tab.on {
  color: #fc8833;
  box-shadow: inset 0 -2px 0 #fc8833;
}

.pv-tab:focus-visible {
  outline: 2px solid #fc8833;
  outline-offset: -2px;
  border-radius: 4px;
}

.pv-main:not(.show-qr) .pv-qr-tab,
.pv-main.show-qr .pv-card {
  display: none;
}

.pv-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: #21242b;
  border: 1px solid #303137;
}

.pv-card-title {
  padding: 9px 12px;
  color: #8e9299;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.pv-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-top: 1px solid #2b2c31;
}

.pv-row > span:first-child {
  color: #8e9299;
  flex: none;
}

.pv-row > :last-child {
  color: #e8e8e8;
  text-align: right;
  overflow-wrap: anywhere;
}

.pv-qr-tab {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pv-chip {
  flex: 1 0 auto;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #303137;
  background: #21242b;
  color: #e1e1e5;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.pv-chip:hover {
  border-color: #4a4b52;
}

.pv-chip.on {
  border-color: #fc8833;
  color: #fc8833;
  background: rgba(252, 136, 51, 0.1);
}

.pv-amount-wrap .affix-pre {
  color: #8e9299;
  font-size: 13px;
}

.pv-amount-wrap input.pv-amount {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-color: #303137;
  background: #21242b;
  color: #fff;
  font-size: 13px;
}

.pv-amount-wrap input.pv-amount:hover:not(:focus) {
  border-color: #4a4b52;
}

.pv-amount-wrap input.pv-amount:focus {
  border-color: #fc8833;
  box-shadow: 0 0 0 3px rgba(252, 136, 51, 0.25);
}

.pv-qr-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.pv-qr-frame {
  width: 100%;
  max-width: 236px;
  margin: 2px 0 8px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
}

.pv-qr-code {
  display: block;
  width: 100%;
  height: auto;
}

.pv-scan {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.pv-pay {
  color: #8e9299;
  font-size: 11.5px;
}

.pv-pay b {
  color: #fff;
  font-weight: 600;
}

.pv-upi {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #21242b;
  border: 1px solid #303137;
}

.pv-upi > span:first-child {
  color: #8e9299;
  flex: none;
}

.pv-upi .mono {
  color: #e8e8e8;
  text-align: right;
  overflow-wrap: anywhere;
}

.pv-min {
  margin: 0;
  color: #8e9299;
  font-size: 11.5px;
}

.pv-btn {
  padding: 10px;
  border-radius: 10px;
  background: #fc8833;
  color: #3a1602;
  font-weight: 600;
  text-align: center;
}

/* Under the replica: the raw UPI link, to check or copy */
.pv-test {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.pv-test p {
  display: flex;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.pv-test p .ico {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}

.pv-link-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 3px 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--field);
}

.pv-link {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text);
}

.pv-link-row .icon-btn {
  width: 28px;
  height: 28px;
}

.pv-link-row .icon-btn .ico {
  width: 14px;
  height: 14px;
}

@media (max-width: 1100px) {
  .set-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .set-side {
    position: static;
  }
}

@media (max-width: 700px) {
  .set-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .set-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Narrow screens (last, so they win over the section rules above) ---------- */

@media (max-width: 1000px) {
  .kpi-grid.five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .kpi-grid.five,
  .stat-strip,
  .ukpis,
  .mini-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Filter sheet (phones) ---------- */

/* Big screens: the wrappers vanish and the controls sit in the toolbar as before. */
.fsheet,
.fs-panel,
.fs-body {
  display: contents;
}

.fs-backdrop,
.fs-head,
.fs-foot,
.fs-only,
.btn.filters-btn {
  display: none;
}

.filters-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
}

.filters-btn .ico {
  width: 16px;
  height: 16px;
}

@media (max-width: 760px) {
  .btn.filters-btn {
    display: inline-flex;
    flex: none;
  }

  /* Toolbars: search + Filters (+ the page's main action) on one line */
  .users-toolbar,
  .pay-filters {
    flex-wrap: nowrap;
  }

  .pay-filters {
    flex-wrap: wrap;
  }

  .users-toolbar .grow,
  .pay-filters .pay-search {
    min-width: 0;
    flex: 1 1 0;
  }

  .pay-filters .seg {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .users-toolbar .tool-btn.primary {
    flex: none;
    width: 38px;
    padding: 0;
  }

  .users-toolbar .tool-btn.primary .btn-label {
    display: none;
  }

  /* The sheet itself */
  .fsheet {
    display: block;
  }

  .fs-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: var(--backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }

  .fsheet.open .fs-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .fs-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 71;
    max-height: 85vh;
    border: 1px solid var(--line-strong);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: var(--panel);
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s linear 0.25s;
  }

  .fsheet.open .fs-panel {
    transform: none;
    visibility: visible;
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s;
  }

  /* Grab handle */
  .fs-panel::before {
    content: '';
    align-self: center;
    width: 36px;
    height: 4px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--line-strong);
  }

  .fs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    color: var(--text-strong);
  }

  .fs-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 18px;
    overflow-y: auto;
  }

  .fs-body > *,
  .fs-body select,
  .fs-body .date-picker,
  .fs-body .date-btn {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .fs-body .btn,
  .fs-body .icon-btn {
    width: 100%;
    min-height: 40px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .fs-body .date-btn {
    justify-content: flex-start;
  }

  .fs-body .date-btn .chev {
    margin-left: auto;
  }

  /* The date range popover opens inline inside the sheet */
  .fs-body .date-pop,
  .pay-filters .fs-body .date-pop {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 8px;
    box-shadow: none;
  }

  .fs-body .date-presets {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .fs-body .sort-label {
    justify-content: space-between;
  }

  .fs-body .sort-label select {
    width: auto;
    flex: 1;
  }

  .fs-body .due-toggle {
    justify-content: flex-start;
    min-height: 40px;
  }

  .fs-body .export-btn {
    margin-left: 0;
  }

  .fs-only {
    display: inline;
  }

  .fs-foot {
    display: flex;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
  }

  .fs-foot .btn {
    flex: 1;
    min-height: 42px;
  }
}

/* ---------- Pills, tabs and chips never break their text ---------- */
/* A label like "Off — hidden in the app" stays on one line; the row around it wraps or scrolls instead. */
.badge,
.status-badge,
.role-badge,
.log-action,
.support-state,
.support-kind,
.terms-status,
.ukpi-chip,
.chip,
.chip-mini,
.chip-btn,
.chip-user,
.partner-chip,
.aud-badge,
.settle-due,
.side-badge,
.perm,
.who .you,
.tab,
.seg-btn,
.fchip,
.mini-seg button,
.preset,
.due-toggle,
.trend-chip,
.live-pill,
.tab-count,
.seg-num,
.seg-count,
.nav-badge,
.head-count,
.filters-count {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Rows of chips/tabs: scroll sideways when they don't fit. */
.filter-chips,
.mini-seg {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-chips::-webkit-scrollbar,
.mini-seg::-webkit-scrollbar,
.tabs::-webkit-scrollbar,
.seg::-webkit-scrollbar {
  display: none;
}

.ledger-bar {
  row-gap: 10px;
}

.ledger-bar .filter-chips {
  flex: 0 1 auto;
  min-width: 0;
}

@media (max-width: 600px) {
  .ledger-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lt span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .chart-head .mini-seg {
    width: 100%;
  }
}

/* Screen-reader-only text inside a scrolling table must not stretch the page on phones:
   keep absolutely positioned bits inside the scroll area. */
.table-wrap {
  position: relative;
}

/* ---------- Partners (admin) ---------- */

.form-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

.link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 16px;
  padding: 10px 12px;
  border: 1px dashed var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--muted);
  font-size: 12.5px;
}

.link-box .ico {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--accent);
}

.link-preview {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: var(--text-strong);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cred-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cred-card .pf-list {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.cred-copy {
  align-self: flex-start;
}

.cred-card p {
  margin: 0;
}

.ref-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.ref-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 230px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: 12px var(--font-mono);
  cursor: pointer;
}

.ref-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-link .ico {
  flex: none;
  width: 13px;
  height: 13px;
}

.ref-link:hover {
  color: var(--accent);
}

.partners-table tr.is-off td {
  opacity: 0.6;
}

.partners-table tr.is-off td:last-child {
  opacity: 1;
}

.partners-table td > .by {
  display: block;
}

@media (max-width: 600px) {
  .form-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* An empty-state card switched off with the hidden attribute stays hidden. */
.empty-card[hidden] {
  display: none;
}

/* A number box with a unit inside it on the right (e.g. "30 %"). */
.suffix-field {
  position: relative;
}

.suffix-field input {
  padding-right: 34px;
}

.suffix-field span {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 13.5px;
  pointer-events: none;
}


/* ---------- Rules, Security, Support, role permissions and payment rows (ported 30 Sep) ---------- */

.hp-eye {
  width: 15px !important;
  height: 15px !important;
  color: #a4a8b1;
  stroke-width: 1.7;
}

.pn-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.spp-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

/* Letter actions (Pay In / Payout rows): each letter has its own tone.
   A approve = green, R reject = red, D delete = amber, L ledger = blue, P positions = violet. */
.icon-action.letter span {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.icon-action.letter {
  --tone: var(--grey-rgb);
  color: rgb(var(--tone));
  background: rgba(var(--tone), 0.1);
  border-color: rgba(var(--tone), 0.32);
}

.icon-action.letter:hover:not(:disabled) {
  color: rgb(var(--tone));
  background: rgba(var(--tone), 0.2);
  border-color: rgba(var(--tone), 0.6);
}

.icon-action.letter.green {
  --tone: var(--green-rgb);
}

.icon-action.letter.red {
  --tone: var(--red-rgb);
}

.icon-action.letter.danger {
  --tone: var(--amber-rgb);
}

.icon-action.letter.blue {
  --tone: var(--blue-rgb);
}

.icon-action.letter.violet {
  --tone: var(--violet-rgb);
}

/* Not available for this row (e.g. already decided): keep the tone, faded. */
.icon-action.letter:disabled {
  background: transparent;
  border-color: var(--line);
}

/* Editable matrix (super admins): a small —/View/Manage switch per cell */
.perm-pick {
  display: inline-flex;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.perm-pick.custom {
  border-color: var(--accent-line);
}

.perm-pick.changed {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.pp-opt {
  min-width: 18px;
  padding: 3px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--faint);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.pp-opt:hover:not(.on) {
  color: var(--text);
  background: var(--hover-strong);
}

.pp-opt:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.pp-opt.on.none {
  color: var(--text);
  background: var(--panel-3);
}

.pp-opt.on.view {
  color: rgb(var(--blue-rgb));
  background: rgba(var(--blue-rgb), 0.16);
}

.pp-opt.on.manage {
  color: var(--up);
  background: var(--up-soft);
}

.role-top .role-custom + .muted {
  margin-left: auto;
}

.role-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.role-col-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
}

.role-col-note .ico {
  width: 11px;
  height: 11px;
}

.role-reset {
  padding: 1px 8px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.role-custom {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}

.perm-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 12px 2px 0;
}

.perm-note .ico {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
}

/* Side buttons: power on the right; action button and two volume buttons on the left. */
.phone::before, .phone::after, .ph-side, .ph-side::after {
  content: '';
  position: absolute;
  width: 3px;
  background: linear-gradient(270deg, #2a2d33, #50555e);
}

.ph-side {
  left: -3px;
  top: 25.5%;
  height: 8.5%;
  border-radius: 2px 0 0 2px;
}

.ph-side::after {
  left: 0;
  top: calc(100% + 12px);
  height: 100%;
  border-radius: inherit;
}

/* Status bar */
.ph-status {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 4px 20px 0 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
}

.st-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.st-ico {
  width: 14px;
  height: 10px;
}

.st-bat {
  width: 22px;
  height: 11px;
}

.ph-home {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 8px;
  width: 112px;
  height: 4.5px;
  margin-left: -56px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
}

.ph-home.dark {
  background: rgba(255, 255, 255, 0.55);
}

.lock-pad {
  display: grid;
  place-items: center;
  margin: 2px auto 0;
  color: rgba(255, 255, 255, 0.9);
}

.lock-pad .ico {
  width: 15px;
  height: 15px;
}

/* Notification (frosted, like iOS) with two older ones stacked underneath. */
.pn-stack {
  position: relative;
  padding-bottom: 14px;
}

.pn-under {
  position: absolute;
  left: 50%;
  height: 30px;
  border-radius: 18px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.pn-under.one {
  z-index: 1;
  bottom: 7px;
  width: 92%;
  margin-left: -46%;
  background: rgba(58, 60, 72, 0.42);
}

.pn-under.two {
  z-index: 0;
  bottom: 0;
  width: 84%;
  margin-left: -42%;
  background: rgba(58, 60, 72, 0.26);
}

.pn-text {
  flex: 1;
  min-width: 0;
}

.pn-when {
  flex: none;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
}

.lock-foot {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding: 0 26px 18px;
}

.lock-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 22, 30, 0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}

.lock-btn .ico {
  width: 20px;
  height: 20px;
  stroke: #fff;
}

.ib-chips {
  display: flex;
  gap: 6px;
  padding: 0 12px 4px;
  overflow: hidden;
  white-space: nowrap;
}

.ib-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid #2b2d34;
  background: #1f2025;
  font-size: 11.5px;
  font-weight: 500;
  color: #b0b3bb;
}

.ib-chip em {
  font-style: normal;
  font-size: 10.5px;
  color: #7d818c;
}

.ib-chip.on {
  border-color: rgba(255, 109, 0, 0.55);
  background: rgba(255, 109, 0, 0.14);
  color: #ff8a33;
}

.ib-chip.on em {
  color: #ff8a33;
}

.ib-section {
  display: block;
  padding: 12px 16px 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f7380;
}

.ib-item.old {
  opacity: 0.72;
}

.ib-tile {
  --t: 150, 154, 170;
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: rgb(var(--t));
  background: rgba(var(--t), 0.15);
}

.ib-tile.primary {
  --t: 255, 122, 26;
}

.ib-tile.up {
  --t: 48, 184, 144;
}

.ib-tile .ico {
  width: 17px;
  height: 17px;
  stroke-width: 1.9;
}

.ib-main {
  flex: 1;
  min-width: 0;
}

.hp-icon-btn {
  position: relative;
  flex: none;
  width: 21px;
  height: 21px;
  color: #c8cbd2;
}

.hp-icon-btn .ico {
  stroke-width: 1.7;
}

.hp-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  padding: 0 3.5px;
  border-radius: 999px;
  background: #ff6d00;
  color: #fff;
  font-size: 7.5px;
  font-weight: 700;
  line-height: 11px;
}

.hp-fire {
  font-size: 10px;
}

.hp-chev {
  color: #ff7a1a;
  font-size: 13px;
  line-height: 1;
}

.hp-acc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hp-acc-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #a4a8b1;
  font-size: 11.5px;
}

.hp-add {
  padding: 4px 9px;
  border-radius: 5px;
  background: #ff6d00;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
}

.hp-acc-value {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.hp-acc-value strong {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}

.hp-acc-value em {
  font-style: normal;
  color: #8e929c;
  font-size: 11px;
}

.hp-acc-inner {
  display: flex;
  margin-top: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  background: #292b32;
}

.hp-spark-line {
  fill: none;
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}

.hp-spark.up .hp-spark-line {
  stroke: #2fc48d;
}

.hp-spark.up .hp-spark-area {
  fill: rgba(47, 196, 141, 0.28);
}

.hp-spark.down .hp-spark-line {
  stroke: #f0616a;
}

.hp-spark.down .hp-spark-area {
  fill: rgba(240, 97, 106, 0.28);
}

/* Price Change Distribution */
.hp-dist {
  margin: 12px 12px 0;
}

.hp-dist-title {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px dashed #5a5d66;
  color: #b7bac2;
  font-size: 10.5px;
}

.hp-dist-bar {
  display: flex;
  gap: 2px;
  height: 5px;
  margin-top: 8px;
}

.hp-dist-bar span {
  border-radius: 3px;
}

.hp-dist-bar .dec {
  flex: 45;
  background: #e8565e;
}

.hp-dist-bar .flat {
  flex: 1.5;
  background: #555861;
}

.hp-dist-bar .adv {
  flex: 55;
  background: #13b07c;
}

.hp-dist-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  color: #8e929c;
  font-size: 9.5px;
}

/* Market tabs and list */
.hp-mtabs {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  padding: 0 12px;
  border-bottom: 1px solid #2b2d34;
  white-space: nowrap;
  overflow: hidden;
}

.hp-mtabs span {
  padding-bottom: 6px;
  color: #8e929c;
  font-size: 11.5px;
}

.hp-mtabs span.on {
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 #ff6d00;
}

.hp-row-l, .hp-row-r {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.hp-row-l {
  flex: 1;
}

.hp-row-r {
  align-items: flex-end;
}

.hp-chg {
  flex: none;
  width: 52px;
  padding: 4px 0;
  border-radius: 4px;
  background: #13b07c;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 600;
  text-align: center;
}

/* Bottom navigation */
.hp-nav {
  display: flex;
  justify-content: space-around;
  padding: 7px 4px 22px;
  border-top: 1px solid #2b2d34;
  background: #1d1e23;
}

.hp-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #8e929c;
  font-size: 9px;
}

.hp-tab .ico {
  width: 18px;
  height: 18px;
  stroke-width: 1.7;
}

.hp-tab.on {
  color: #ff7a1a;
}

/* ---------- Support page ---------- */
/* Settings on the left (a summary, then a card per chat app), a live phone preview on the right. */
.sp-grid {
  --wa: 37, 211, 102;
  --tg: 34, 158, 217;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
  max-width: 1160px;
}

.sp-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.sp-form > .card, .sp-side .card {
  margin-top: 0;
}

/* Summary */
.sp-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
}

.sp-hero-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

.sp-hero-ico .ico {
  width: 22px;
  height: 22px;
}

.sp-hero-text {
  flex: 1;
  min-width: 0;
}

.sp-hero-text h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-strong);
}

.sp-hero-text p {
  margin: 4px 0 0;
  max-width: 560px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.sp-summary {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-2);
}

.sp-summary-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  min-width: 50px;
  height: 46px;
  padding: 11px 8px 0;
  border-radius: 10px;
  background: var(--panel-3);
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.sp-summary-num strong {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-strong);
}

.sp-summary.has-live .sp-summary-num {
  background: var(--up-soft);
  color: var(--up);
}

.sp-summary.has-live .sp-summary-num strong {
  color: var(--up);
}

.sp-summary-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sp-summary-text strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
}

.sp-summary-text span {
  font-size: 12px;
  color: var(--muted);
}

/* Chat cards */
.sp-card {
  --brand: var(--grey-rgb);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sp-card.whatsapp {
  --brand: var(--wa);
}

.sp-card.telegram {
  --brand: var(--tg);
}

.sp-card.is-live {
  border-color: rgba(var(--brand), 0.45);
  box-shadow: var(--shadow), 0 0 0 3px rgba(var(--brand), 0.07);
}

.sp-card.is-warn {
  border-color: rgba(var(--amber-rgb), 0.5);
}

.sp-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(var(--brand), 0.08), transparent 60%), var(--panel);
}

.sp-card.is-off .sp-card-head {
  background: var(--panel);
}

.sp-brand {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #fff;
  background: rgb(var(--brand));
  box-shadow: 0 6px 16px -6px rgba(var(--brand), 0.65);
  transition: filter 0.2s, opacity 0.2s;
}

.sp-brand .ico {
  width: 22px;
  height: 22px;
  stroke-width: 1.9;
}

.sp-card.is-off .sp-brand {
  filter: grayscale(1);
  opacity: 0.55;
  box-shadow: none;
}

.sp-card-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sp-card-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}

.sp-card-title span {
  font-size: 12.5px;
  color: var(--muted);
}

.sp-status {
  --tone: var(--grey-rgb);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: rgb(var(--tone));
  background: rgba(var(--tone), 0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.25);
}

.sp-status.live {
  --tone: var(--green-rgb);
}

.sp-status.warn {
  --tone: var(--amber-rgb);
}

.sp-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.sp-status.live .dot {
  box-shadow: 0 0 0 3px rgba(var(--tone), 0.25);
  animation: sp-pulse 2s ease-in-out infinite;
}

.sp-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
}

.sp-card.is-off .sp-card-body {
  opacity: 0.75;
}

.sp-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sp-label-row label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.sp-kind {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  color: rgb(var(--brand));
  background: rgba(var(--brand), 0.12);
}

.sp-kind[hidden] {
  display: none;
}

.sp-input {
  position: relative;
}

.sp-input > .ico {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  color: var(--faint);
  pointer-events: none;
}

.sp-input input {
  min-height: 44px;
  padding-left: 40px;
  font-family: var(--font-mono);
  font-size: 14px;
}

.sp-input input:focus {
  border-color: rgba(var(--brand), 0.7);
  box-shadow: 0 0 0 3px rgba(var(--brand), 0.18);
  outline: none;
}

.sp-input.invalid input {
  border-color: rgba(var(--red-rgb), 0.7);
}

.sp-input.invalid > .ico {
  color: var(--down);
}

.sp-help {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* The chat link the app opens */
.sp-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
}

.sp-link > .ico {
  flex: none;
  width: 16px;
  height: 16px;
}

.sp-link.empty {
  border: 1px dashed var(--line-strong);
  color: var(--muted);
}

.sp-link.error {
  border: 1px solid rgba(var(--red-rgb), 0.35);
  background: var(--down-soft);
  color: var(--down);
}

.sp-link.ok {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel-2);
  overflow: hidden;
}

.sp-link-main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.sp-link-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: rgb(var(--brand));
  background: rgba(var(--brand), 0.13);
}

.sp-link-ico .ico {
  width: 16px;
  height: 16px;
}

.sp-link-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sp-link-text span {
  font-size: 12px;
  color: var(--muted);
}

.sp-link-text a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-strong);
  text-decoration: none;
}

.sp-link-text a:hover {
  color: rgb(var(--brand));
  text-decoration: underline;
}

.sp-link-actions {
  flex: none;
  display: flex;
  gap: 6px;
}

.sp-link-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sp-link-actions .ico {
  width: 14px;
  height: 14px;
}

.sp-link-note {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: rgba(var(--amber-rgb), 0.08);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}

.sp-link-note .ico {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--warn);
}

/* Right column: phone preview */
.sp-side {
  position: sticky;
  top: 84px;
  min-width: 0;
}

.sp-preview-card {
  padding: 18px 18px 16px;
}

.sp-preview-card .card-head {
  margin-bottom: 14px;
}

.sp-phone {
  zoom: 0.8;
}

/* The app's Log In screen (always dark, like the app) */
.spp {
  display: flex;
  flex-direction: column;
  background: #1a1b20;
  color: #fff;
  padding-bottom: 20px;
}

.spp-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 16px 0;
}

.spp-name {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.05;
}

.spp-link {
  color: #ff7a1a;
  font-size: 12.5px;
  font-weight: 600;
}

.spp-title {
  margin: 22px 16px 14px;
  font-size: 19px;
  font-weight: 600;
}

.spp-field {
  margin: 0 16px 10px;
  padding: 12px;
  border: 1px solid #2c2e35;
  border-radius: 7px;
  background: #20212a;
  color: #6f7380;
  font-size: 12px;
}

.spp-btn {
  margin: 4px 16px 0;
  padding: 11px;
  border-radius: 7px;
  background: #ff6d00;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

.spp-forgot {
  margin: 14px 16px 0;
  color: #8e929c;
  font-size: 11.5px;
}

.spp-support {
  margin: 18px 10px 0;
  padding: 12px 8px 10px;
  border-radius: 12px;
  outline: 2px dashed rgba(255, 109, 0, 0.6);
  outline-offset: -2px;
  background: rgba(255, 109, 0, 0.05);
}

.spp-help {
  display: block;
  padding: 0 6px 9px;
  color: #a4a8b1;
  font-size: 11px;
}

.spp-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.spp-buttons.single {
  grid-template-columns: 1fr;
}

.spp-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 6px;
  border: 1px solid #30323a;
  border-radius: 7px;
  background: #1f2026;
  font-size: 12px;
  font-weight: 600;
  animation: pop-in 0.2s ease-out;
}

.spp-ico {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
}

.spp-ico.whatsapp {
  background: #25d366;
}

.spp-ico.telegram {
  background: #229ed9;
}

.spp-ico .ico {
  width: 11px;
  height: 11px;
  stroke-width: 2.2;
}

.spp-none {
  grid-column: 1 / -1;
  padding: 10px;
  border: 1px dashed #3a3d45;
  border-radius: 7px;
  color: #8e929c;
  font-size: 11px;
  text-align: center;
}

/* First WhatsApp message */
.spp-msg {
  margin-top: 16px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.spp-msg-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.spp-msg-label .ico {
  width: 14px;
  height: 14px;
  color: rgb(var(--wa));
}

.spp-bubble {
  position: relative;
  margin-left: auto;
  max-width: 92%;
  padding: 8px 10px 16px;
  border-radius: 10px 10px 2px 10px;
  background: #005c4b;
  color: #e9edef;
  font-size: 12.5px;
  line-height: 1.45;
}

.spp-bubble[hidden] {
  display: none;
}

.spp-msg-off {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.spp-msg-off[hidden] {
  display: none;
}

.spp-bubble-time {
  position: absolute;
  right: 8px;
  bottom: 3px;
  font-size: 10px;
  color: rgba(233, 237, 239, 0.65);
}

.sp-where {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--muted);
}

.sp-where li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.sp-where .ico {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--up);
}

@media (max-width: 1100px) {
  .sp-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sp-side {
    position: static;
  }
}

@media (max-width: 700px) {
  .sp-hero {
    flex-wrap: wrap;
  }
  .sp-summary {
    width: 100%;
  }
  .sp-card-head {
    flex-wrap: wrap;
  }
  .sp-card-title {
    flex-basis: calc(100% - 56px);
  }
  .sp-status {
    margin-left: 56px;
  }
  .sp-link-main {
    flex-wrap: wrap;
  }
  .sp-link-actions {
    width: 100%;
  }
  .sp-link-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ---------- Pills, tabs and chips never break their text ---------- */
/* A label like "Off — hidden in the app" stays on one line; the row around it wraps or scrolls instead. */
.badge, .status-badge, .role-badge, .log-action, .sp-status, .sp-kind, .terms-status, .ukpi-chip, .chip, .chip-mini, .chip-btn, .chip-user, .partner-chip, .aud-badge, .settle-due, .side-badge, .perm, .who .you, .tab, .seg-btn, .fchip, .mini-seg button, .preset, .due-toggle, .trend-chip, .live-pill, .tab-count, .seg-num, .seg-count, .nav-badge, .head-count, .filters-count {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- Rules page: accordion of rule sections ---------- */
.rules-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1080px;
}

.rules-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.rules-head p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.rules-head .ico {
  width: 15px;
  height: 15px;
  flex: none;
}

.card.rule-sec {
  margin-top: 0;
  padding: 0;
}

.rule-sec > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius);
  user-select: none;
}

.rule-sec > summary::-webkit-details-marker {
  display: none;
}

.rule-sec > summary:hover {
  background: var(--hover);
}

.rule-sec > summary:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.rule-sec[open] > summary {
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}

.rule-sum {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rule-sum strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}

.rule-sum-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-width: 0;
}

.rule-sum-text {
  font-size: 12.5px;
  color: var(--muted);
  text-align: right;
}

.rule-sec[open] .rule-chev {
  transform: rotate(180deg);
}

.rule-body {
  padding: 4px 20px 18px;
}

.rule-body > .read-only-note {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.rule-window {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.day-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.day-chip {
  min-width: 48px;
  padding: 7px 10px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.day-chip:hover:not(:disabled) {
  border-color: var(--line-strong);
  color: var(--text);
}

.day-chip[aria-pressed='true'] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

.day-chip:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.day-chip:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.rule-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rule-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
}

.rule-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rule-times[hidden] {
  display: none;
}

.affix-post-wrap {
  position: relative;
  max-width: 200px;
}

.affix-post-wrap input {
  padding-right: 30px;
}

.affix-post {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  font-size: 14px;
  pointer-events: none;
}

.rule-contracts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 0 4px;
  border-top: 1px solid var(--line);
}

.rule-table {
  width: 100%;
}

.rule-table td, .rule-table th {
  vertical-align: middle;
}

.rule-lev input {
  max-width: 120px;
  min-height: 34px;
  padding: 6px 10px;
}

.rule-sec .save-bar {
  margin-top: 8px;
}

@media (max-width: 760px) {
  .rule-sec > summary {
    flex-wrap: wrap;
    padding: 14px 16px;
  }
  .rule-sum-right {
    order: 3;
    width: calc(100% - 44px);
    justify-content: space-between;
    margin-left: 44px;
  }
  .rule-sum-text {
    text-align: left;
  }
  .rule-body {
    padding: 4px 16px 16px;
  }
}

/* Rules page: platform fees */
.fee-example {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-2);
}

.fee-ex-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.fee-ex-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text);
}

.fee-ex-row .num {
  color: var(--muted);
  white-space: nowrap;
}

.fee-ex-row strong {
  color: var(--text-strong);
  font-weight: 600;
}

.fee-infos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0 4px;
  border-top: 1px solid var(--line);
}

.fee-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.fee-info strong {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-strong);
}

.fee-info p {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.fee-info-val {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--panel-2);
  box-shadow: 0 0 0 1px var(--line-strong) inset;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}

@media (max-width: 700px) {
  .fee-ex-row {
    flex-direction: column;
    gap: 2px;
  }
  .fee-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Pay In / Payout: request number, date and time, then how long ago */
.req-when .req-date {
  color: var(--text);
  font-size: 12.5px;
}

.req-when .req-ago {
  color: var(--faint);
  font-size: 11.5px;
}

/* ---------- Security page ---------- */
.sec-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sec-page > .kpi-grid, .sec-page > .tabs {
  margin: 0;
}

.sec-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sec-stack > .card {
  margin-top: 0;
}

.sec-lockdown {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--red-rgb), 0.45);
  border-radius: var(--radius-md);
  background: rgba(var(--red-rgb), 0.1);
  color: var(--text);
}

.sec-lockdown > .ico {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--down);
}

.sec-lockdown > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sec-lockdown strong {
  color: var(--down);
}

.sec-lockdown span {
  font-size: 12.5px;
  color: var(--muted);
}

.sec-table td, .sec-table th {
  vertical-align: middle;
}

.sec-table tr.sec-current td {
  background: rgba(var(--accent-rgb), 0.05);
}

.sec-table .empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
}

.sec-ips {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sec-ips textarea {
  min-height: 96px;
  resize: vertical;
}

.sec-myip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--muted);
}

.sec-myip strong {
  color: var(--text-strong);
}

.sec-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
}

.sec-note .ico {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
}

.sec-lock-card.on {
  border-color: rgba(var(--red-rgb), 0.45);
  background: linear-gradient(0deg, rgba(var(--red-rgb), 0.06), rgba(var(--red-rgb), 0.06)), var(--panel);
}

.sec-lock-card.on .mode-ico {
  color: var(--down);
  background: var(--down-soft);
}

@keyframes sp-pulse {
  50% {
    box-shadow: 0 0 0 5px rgba(var(--tone), 0);
  }
}

/* ---------- User Management: toolbar and figures, on the tables' type scale ----------
   34px controls with 13px text; figures in medium weight, not bold; icons and period chips kept quiet. */

.users-toolbar {
  gap: 10px;
}

.users-toolbar input[type='search'] {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 13px;
  text-overflow: ellipsis;
}

.users-toolbar .search-wrap > .ico {
  width: 15px;
  height: 15px;
}

.users-toolbar select {
  min-width: 0;
  min-height: 34px;
  padding: 6px 30px 6px 11px;
  font-size: 13px;
  color: var(--text);
}

.users-toolbar .date-btn {
  height: 34px;
  padding: 0 11px;
  font-size: 13px;
}

.users-toolbar .date-btn .ico {
  flex: none;
}

.users-toolbar .tool-btn {
  min-height: 34px;
  padding: 6px 12px;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
}

.users-toolbar .tool-btn:not(.primary) {
  color: var(--text);
}

.users-toolbar .tool-btn .ico {
  width: 15px;
  height: 15px;
}

/* Wide: one row. Narrower: search + Add User on top, the filters sharing the row below. */
@media (min-width: 761px) {
  .users-toolbar {
    container-type: inline-size;
    flex-wrap: wrap;
  }

  .users-toolbar .grow {
    flex: 1 1 220px;
    min-width: 200px;
  }

  .users-toolbar .fsheet {
    display: flex;
    flex: none;
    gap: 10px;
    min-width: 0;
  }

  .users-toolbar .tool-btn.primary {
    flex: none;
  }

  @container (max-width: 1080px) {
    .users-toolbar .grow {
      order: 0;
    }

    .users-toolbar .tool-btn.primary {
      order: 1;
    }

    .users-toolbar .fsheet {
      order: 2;
      flex: 1 1 100%;
    }

    .users-toolbar .fs-body > * {
      flex: 1 1 0;
      min-width: 0;
    }

    .users-toolbar .fs-body > .tool-btn {
      flex: none;
    }

    .users-toolbar .fs-body > .date-picker {
      min-width: 128px;
    }

    .users-toolbar .fsheet {
      gap: 8px;
    }

    .users-toolbar .fs-body select {
      padding-right: 26px;
      background-position: right 8px center;
    }

    .users-toolbar .fs-body .date-btn {
      width: 100%;
    }

    .users-toolbar .fs-body .date-btn .chev {
      margin-left: auto;
    }
  }
}

@media (max-width: 760px) {
  .users-toolbar .tool-btn.primary {
    width: 34px;
  }

  .users-toolbar .filters-btn {
    min-height: 34px;
    font-size: 13px;
    color: var(--text);
  }
}

/* Figure tiles */
.ukpis {
  gap: 12px;
  margin-top: 16px;
}

.ukpi {
  gap: 6px;
  padding: 14px 16px 15px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.ukpi:hover {
  transform: none;
  border-color: var(--line-strong);
}

.ukpi.on {
  border-color: var(--accent-line);
  background: rgba(var(--accent-rgb), 0.04);
  box-shadow: 0 0 0 1px var(--accent-line) inset;
}

.ukpi-top {
  min-width: 0;
  min-height: 18px;
}

.ukpi-label {
  min-width: 0;
  flex-wrap: nowrap;
  gap: 7px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
}

.ukpi-chip {
  padding: 0 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 17px;
  color: var(--muted);
  background: var(--panel-3);
}

/* The tone shows only in the icon, and only faintly until the tile is hovered or selected. */
.ukpi-ico {
  width: 18px;
  height: 18px;
  flex: none;
  background: none;
  box-shadow: none;
  color: rgba(var(--tone), 0.7);
  transition: color 0.15s;
}

.ukpi:hover .ukpi-ico,
.ukpi.on .ukpi-ico {
  color: rgb(var(--tone));
}

.ukpi-ico .ico {
  width: 16px;
  height: 16px;
}

.ukpi .live-dot {
  width: 7px;
  height: 7px;
  margin: 0 5px;
}

.ukpi strong {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ukpi-sub {
  font-size: 12px;
  line-height: 1.4;
}

/* Phones: two figures per row, so the list starts sooner. */
@media (max-width: 560px) {
  .ukpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ukpi {
    gap: 4px;
    padding: 11px 12px 12px;
  }

  .ukpi-top {
    align-items: flex-start;
  }

  .ukpi-label {
    flex-wrap: wrap;
    row-gap: 4px;
    white-space: normal;
    font-size: 12px;
  }

  .ukpi strong {
    font-size: 19px;
  }

  .ukpi-sub {
    font-size: 11.5px;
  }
}

/* ---------- Figure tiles: one style on every page ----------
   The User Management tile everywhere: 12.5px label, 22px medium value, 12px note,
   a faint tone icon without a box, a quiet border hover. Covers .kpi (Trading, Positions,
   Deposits/Withdrawals, Accounts, Partners, Security), .dx-kpi (Dashboard) and .mini-stat (Access). */

.kpi-grid {
  gap: 12px;
}

.kpi {
  align-items: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 14px 16px 15px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

a.kpi:hover {
  border-color: var(--line-strong);
  background: var(--panel);
}

.kpi-text {
  gap: 6px;
}

.kpi-label {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-value,
.kpi-grid.five .kpi-value {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.kpi-trend {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.kpi-trend.flat {
  color: var(--faint);
}

.kpi-icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: none;
  color: rgba(var(--tone), 0.7);
  transition: color 0.15s;
}

a.kpi:hover .kpi-icon {
  color: rgb(var(--tone));
}

.kpi-icon .ico {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
}

/* Sparkline sits under the icon, clear of the note text. */
.kpi-spark {
  right: 16px;
  bottom: 14px;
  width: 84px;
  height: 26px;
  opacity: 0.85;
}

/* Dashboard headline tiles: same type, keeping their full-width trend line. */
.dx-kpis {
  gap: 12px;
}

.dx-kpi {
  min-height: 0;
  padding: 14px 16px 0;
  transition: border-color 0.15s;
}

.dx-kpi-head {
  font-size: 12.5px;
  font-weight: 400;
}

.dx-kpi-value {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.dx-kpi-foot {
  margin-top: 6px;
  gap: 6px;
  font-size: 12px;
  color: var(--faint);
}

.dx-kpi .kpi-spark {
  width: calc(100% + 32px);
  height: 36px;
  margin: auto -16px 0;
  padding-top: 10px;
  opacity: 1;
}

.dx-kpi-spacer {
  height: 15px;
}

/* Access Control tiles */
.mini-stats {
  gap: 12px;
}

.mini-stat {
  gap: 6px;
  padding: 14px 16px 15px;
}

.mini-stat span {
  font-size: 12.5px;
  font-weight: 400;
}

.mini-stat strong {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

@media (max-width: 560px) {
  .kpi,
  .mini-stat {
    padding: 11px 12px 12px;
  }

  .dx-kpi {
    padding: 11px 12px 0;
  }

  .dx-kpi .kpi-spark {
    width: calc(100% + 24px);
    margin: auto -12px 0;
  }

  .kpi-value,
  .kpi-grid.five .kpi-value,
  .dx-kpi-value,
  .mini-stat strong {
    font-size: 19px;
  }

  .kpi-trend,
  .dx-kpi-foot {
    font-size: 11.5px;
  }
}

/* Phones: two tiles per row on every page, like User Management; an odd last tile takes the full row. */
@media (max-width: 560px) {
  .kpi-grid.three,
  .kpi-grid.four,
  .kpi-grid.five,
  .dx-kpis,
  .mini-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .kpi-grid > :last-child:nth-child(odd),
  .dx-kpis > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .kpi {
    gap: 6px;
  }

  .kpi-label,
  .dx-kpi-head {
    font-size: 12px;
  }

  .kpi-icon {
    width: 16px;
    height: 16px;
  }

  .kpi-icon .ico {
    width: 14px;
    height: 14px;
  }

  .kpi-value,
  .kpi-grid.five .kpi-value {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Tile notes: always one line, ending in "…" if they don't fit (the full note is on hover).
   The icon floats in the corner so the value and note get the tile's full width. */
.kpi {
  display: block;
}

.kpi-text {
  width: 100%;
}

.kpi-label {
  padding-right: 26px;
}

.kpi-icon {
  position: absolute;
  top: 14px;
  right: 16px;
}

.kpi-trend,
.ukpi-sub {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dx-kpi-foot {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.dx-kpi-foot > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dx-kpi-foot .trend-chip {
  flex: none;
}

@media (max-width: 560px) {
  .kpi-icon {
    top: 11px;
    right: 12px;
  }

  .kpi-label {
    padding-right: 22px;
  }
}

/* ---------- Accounts: header, filters and table on the shared scale ----------
   Same 34px/13px controls as User Management, the Positions-style switch, and the .pt-table look. */

.accounts-card .history-head {
  align-items: center;
  padding: 14px 14px 12px;
}

.accounts-card .history-head h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.accounts-card .history-head p {
  margin-top: 2px;
  font-size: 12.5px;
}

/* Users / Brokers switch */
.accounts-card .seg {
  padding: 3px;
  border-radius: var(--radius-sm);
}

.accounts-card .seg-btn {
  min-height: 26px;
  padding: 3px 10px;
  gap: 6px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.accounts-card .seg-btn:hover {
  color: var(--text);
}

.accounts-card .seg-btn.on {
  font-weight: 500;
  color: var(--text-strong);
}

.accounts-card .seg-btn .ico {
  width: 14px;
  height: 14px;
}

/* Filters */
.acc-filters {
  gap: 8px;
  padding: 0 14px 14px;
}

.acc-filters .pay-search {
  min-height: 34px;
  padding: 0 11px;
}

.acc-filters .pay-search .ico {
  width: 15px;
  height: 15px;
}

.acc-filters .pay-search input {
  min-height: 32px;
  padding: 6px 0;
  font-size: 13px;
  text-overflow: ellipsis;
}

.acc-filters select {
  min-height: 34px;
  padding: 6px 28px 6px 11px;
  font-size: 13px;
  color: var(--text);
  background-position: right 9px center;
}

.acc-filters .date-btn {
  height: 34px;
  padding: 0 11px;
  font-size: 13px;
}

.acc-filters .date-btn .ico {
  flex: none;
}

.acc-filters .due-toggle {
  min-height: 34px;
  padding: 0 11px;
  border-color: var(--field-line);
  font-size: 13px;
  color: var(--text);
}

.acc-filters .due-toggle input {
  margin: 0;
}

.acc-filters .due-toggle.on {
  color: var(--down);
  border-color: rgba(var(--red-rgb), 0.45);
}

.acc-filters .btn.small {
  min-height: 34px;
  padding: 6px 12px;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.acc-filters .btn.small .ico {
  width: 15px;
  height: 15px;
}

/* Export: a neutral button like User Management's */
.acc-filters .export-btn {
  border-color: var(--line-strong);
  background: var(--panel-2);
  color: var(--text);
}

.acc-filters .export-btn:hover {
  background: var(--panel-3);
  color: var(--text-strong);
}

/* Sort field + direction joined into one control */
.sort-group {
  display: inline-flex;
  align-items: stretch;
  flex: none;
}

.sort-group select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.sort-dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--field-line);
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sort-dir:hover {
  background: var(--panel-2);
  color: var(--text-strong);
}

.sort-dir .ico {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.sort-dir:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* Wide: one row. Narrower: search + Export on top, the filters below. Phones keep the Filters sheet. */
@media (min-width: 761px) {
  .acc-filters {
    container-type: inline-size;
    flex-wrap: wrap;
    border-bottom: 0;
  }

  .acc-filters .pay-search {
    flex: 1 1 220px;
    min-width: 200px;
  }

  .acc-filters .fs-body > * {
    flex: none;
    margin-left: 0;
  }

  .acc-filters .fs-body > .export-btn {
    margin-left: auto;
  }

  @container (max-width: 1180px) {
    .acc-filters .pay-search {
      order: 0;
      flex: 1 1 calc(100% - 150px);
    }

    .acc-filters .fs-body > * {
      order: 2;
    }

    .acc-filters .fs-body > .export-btn {
      order: 1;
    }

    .acc-filters .fs-body > select {
      max-width: 240px;
    }
  }

  /* Brokers view: the date range on the left, Refresh and Export on the right. */
  .acc-filters.brokers .fs-body > * {
    order: 0;
  }

  .acc-filters.brokers .fs-body > .date-picker {
    margin-right: auto;
  }

  .acc-filters.brokers .fs-body > .export-btn {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .acc-filters .filters-btn {
    min-height: 34px;
    font-size: 13px;
    color: var(--text);
  }

  .fs-body .sort-group {
    width: 100%;
  }

  .fs-body .sort-group select {
    flex: 1;
  }
}

/* Table cells */
.accounts-table .pt-who {
  max-width: 156px;
}

/* Nine columns: slightly tighter cells so they fit at 1440px. */
.table-card .accounts-table.pt-table th,
.table-card .accounts-table.pt-table td {
  padding-left: 10px;
  padding-right: 10px;
}

.table-card .accounts-table.pt-table th:first-child,
.table-card .accounts-table.pt-table td:first-child {
  padding-left: 14px;
}

.pt-id {
  flex: none;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.accounts-table .broker-cell {
  gap: 6px;
}

.accounts-table .broker-cell .pt-chip {
  align-self: flex-start;
}

.pt-tag.pt-owed {
  font-size: 12px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.accounts-table .link-sub {
  gap: 2px;
  font-size: 12.5px;
  font-weight: 400;
}

.accounts-table .link-sub .ico {
  width: 13px;
  height: 13px;
}

/* An account that owes: a thin red edge, as before */
.table-card .pt-table tr.owes-row td:first-child {
  box-shadow: inset 2px 0 0 var(--down);
}

.accounts-card .settle-help {
  margin: 12px 14px 4px;
  font-size: 12px;
  color: var(--faint);
}

@media (max-width: 560px) {
  .accounts-table .pt-who {
    max-width: 128px;
  }

  /* Pager: the count and rows-per-page above, the page buttons below, all inside the screen. */
  .users-pager {
    flex-wrap: wrap;
    gap: 10px;
  }

  .pager-left {
    flex-wrap: wrap;
    gap: 8px 14px;
  }
}

/* ---------- Partners: header, search and table on the shared scale ---------- */

.partners-card .pay-head {
  padding: 14px 14px 12px;
}

.partners-card .pay-head h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.partners-card .pay-head p {
  margin-top: 2px;
  font-size: 12.5px;
}

.partners-card .pay-head .btn {
  min-height: 34px;
  padding: 6px 12px;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
}

.partners-card .pay-head .btn .ico {
  width: 15px;
  height: 15px;
}

.partners-card .pay-filters {
  gap: 8px;
  padding: 0 14px 14px;
  border-bottom: 0;
}

.partners-card .pay-search {
  min-height: 34px;
  padding: 0 11px;
}

.partners-card .pay-search .ico {
  width: 15px;
  height: 15px;
}

.partners-card .pay-search input {
  min-height: 32px;
  padding: 6px 0;
  font-size: 13px;
}

/* Code chip over the copyable link */
.partners-table .ref-link {
  gap: 5px;
  max-width: 210px;
  color: var(--muted);
  font: 12px var(--font-sans);
  transition: color 0.15s;
}

.partners-table .ref-link .ico {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

.partners-table .ref-link:hover {
  color: var(--accent);
}

.partners-table .ref-link:hover .ico {
  opacity: 1;
}

.partners-table .pt-stack > .pt-chip {
  align-self: flex-start;
}

.partners-table .pt-who {
  max-width: 180px;
}

/* Eight columns and six actions: slightly tighter cells so they fit at 1440px. */
.table-card .partners-table.pt-table th,
.table-card .partners-table.pt-table td {
  padding-left: 10px;
  padding-right: 10px;
}

.table-card .partners-table.pt-table th:first-child,
.table-card .partners-table.pt-table td:first-child {
  padding-left: 14px;
}

/* A value that opens something (the users count) */
.pt-val.pt-link {
  text-decoration: none;
}

.pt-val.pt-link:hover {
  color: var(--accent);
  text-decoration: none;
}

/* Disabled partner: dim what's in the cells, not the cells (the pinned columns stay solid). */
.partners-table tr.is-off td {
  opacity: 1;
}

.partners-table tr.is-off td:not(.pt-actions-cell) > * {
  opacity: 0.55;
}

@media (max-width: 560px) {
  .partners-table .pt-who {
    max-width: 128px;
  }
}

/* The title and description give way so "Add partner" stays on the right. */
.partners-card .pay-head {
  flex-wrap: nowrap;
  align-items: flex-start;
}

.partners-card .pay-head > div:first-child {
  flex: 1 1 0;
  min-width: 0;
}

.partners-card .pay-head > .btn {
  flex: none;
}

/* Six actions are too wide to pin on smaller screens: they scroll with the row; the partner stays pinned. */
@media (max-width: 1100px) {
  .partners-table.pt-table .pt-actions-cell {
    position: static;
  }

  .pt-wrap.more-right .partners-table .pt-actions-cell {
    box-shadow: none;
  }
}

@media (max-width: 560px) {
  .partners-card .pay-head > .btn {
    width: 34px;
    padding: 0;
    justify-content: center;
    font-size: 0;
    gap: 0;
  }
}

/* ---------- Deposits / Withdrawals table: same header and toolbar as Positions (.data-card), .pt-table rows ---------- */

.pt-tag.amber {
  --tone: var(--amber-rgb);
}

/* "#5109  9 min ago" on one line, the date and time below */
.pt-req {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pt-req .pt-key {
  font-size: 12px;
}

a.pt-chip-btn {
  display: inline-block;
  text-decoration: none;
}

/* Approve is the job on this page: faintly green while it can be used. */
.pt-act.approve:not(:disabled) {
  color: rgba(var(--up-rgb), 0.85);
}

.pt-act:disabled,
.pt-act:disabled:hover,
tr:hover .pt-act:disabled {
  opacity: 0.28;
  color: var(--faint);
  background: none;
  cursor: not-allowed;
}

.pt-actions-sep {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--line-strong);
}

.funds-table .pay-method {
  gap: 10px;
}

.funds-table .mini-shot {
  width: 30px;
  height: 30px;
  border-radius: 6px;
}

.funds-table .pt-who {
  max-width: 200px;
}

/* Status tabs, search, then the date range and Refresh together. */
.funds-filters .pos-refresh {
  width: 34px;
  height: 34px;
}

@media (min-width: 761px) {
  @container (max-width: 1040px) {
    .pos-filters.funds-filters .fsheet {
      flex: none;
    }

    .pos-filters.funds-filters .fs-body > *,
    .pos-filters.funds-filters .fsheet > * {
      flex: none;
    }
  }

  @container (max-width: 640px) {
    .pos-filters.funds-filters .fsheet {
      flex: 1 1 100%;
    }
  }
}

@media (max-width: 560px) {
  .funds-table .pt-who {
    max-width: 128px;
  }
}

/* Here the user is the second column, so it scrolls with the row; the actions stay pinned. */
.funds-table.pt-table .pt-user {
  position: static;
}

.pt-wrap.more-left .funds-table .pt-user {
  box-shadow: none;
}

/* Letter actions (L = ledger, P = positions): the same quiet look as the icon actions. */
.pt-act.letter {
  font: 600 12.5px/1 var(--font-sans);
  letter-spacing: 0.02em;
}

/* ---------- User details (.up-page): the shared scale ----------
   13px base, regular weight for values, medium only for names and key figures; small flat tags;
   34px buttons; tiles like the figure tiles; tables like .pt-table. */

/* Header */
.up-page .up-head {
  margin-bottom: 16px;
}

.up-page .up-name {
  gap: 8px;
}

.up-page .up-name h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.up-page .avatar-wrap.big .init-avatar {
  width: 44px;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
}

.up-page .up-sub {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--muted);
}

.up-page .up-sub .mono {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.up-page .up-sub .dot-sep {
  margin: 0 7px;
  color: var(--faint);
}

.up-page .up-actions .btn {
  min-height: 34px;
  padding: 6px 12px;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.up-page .up-actions .btn .ico {
  width: 15px;
  height: 15px;
}

.up-page .up-actions .btn.icon-only {
  width: 34px;
  padding: 0;
}

/* Status, funded, transaction-type and closing tags: small and flat, like .pt-tag */
.up-page .status-badge,
.up-page .role-badge,
.up-page .log-action {
  padding: 0 6px;
  gap: 5px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  box-shadow: none;
}

.up-page .status-badge::before {
  width: 5px;
  height: 5px;
}

/* Partner code: the neutral chip used in the tables */
.up-page .partner-chip,
.up-page .up-sub .partner-chip {
  padding: 0 6px;
  border: 0;
  border-radius: 4px;
  font: 500 11px/18px var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--text);
  background: var(--panel-3);
  box-shadow: 0 0 0 1px var(--line-strong) inset;
  text-decoration: none;
}

.up-page .partner-chip:hover {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-line) inset;
}

/* Tabs */
.up-page .tabs.underline .tab {
  padding: 9px 12px 11px;
  gap: 7px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.up-page .tabs.underline .tab.active {
  font-weight: 500;
  color: var(--text-strong);
}

.up-page .tabs.underline .tab .ico {
  width: 14px;
  height: 14px;
}

/* Cards */
.up-page .card-head h2 {
  font-size: 14px;
  font-weight: 600;
}

.up-page .card-head .btn.small {
  min-height: 30px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}

.up-page .card-head .muted.small {
  font-size: 12px;
}

/* Label · value rows */
.up-page .dl-row {
  grid-template-columns: 190px minmax(0, 1fr);
  padding: 11px 0;
}

.up-page .dl-row dt {
  font-size: 12.5px;
  color: var(--muted);
}

.up-page .dl-val {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-strong);
}

.up-page .dl-val .mono {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.up-page .dl-sub {
  font-size: 12px;
  color: var(--faint);
}

.up-page .chip-mini {
  font-size: 11px;
  font-weight: 500;
}

/* Wallet */
.up-page .wallet-balance {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.up-page .wallet-card .muted.small {
  font-size: 12px;
}

.up-page .wallet-stats dt {
  font-size: 12px;
}

.up-page .wallet-stats dd {
  font-size: 13px;
  font-weight: 400;
}

/* Notes */
.up-page .note-compose textarea {
  font-size: 13px;
}

.up-page .note-compose .btn {
  min-height: 30px;
  font-size: 12.5px;
  font-weight: 500;
}

.up-page .note-meta strong {
  font-size: 13px;
  font-weight: 500;
}

.up-page .note-body p {
  font-size: 13px;
}

/* Trades / Wallet tiles: the figure-tile type */
.up-page .lt span {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
}

.up-page .lt strong {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.up-page .lt em {
  font-size: 12px;
  color: var(--faint);
}

/* Tables (trade history, fund requests, open positions/orders): the .pt-table type */
.up-page .ledger-table th,
.up-page .card.sect table th {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--faint);
}

.up-page .ledger-table td,
.up-page .card.sect table td {
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.up-page .ledger-table .sym,
.up-page .card.sect table .sym {
  font-size: 13px;
  font-weight: 500;
}

.up-page .strong-cell,
.up-page .card.sect table strong,
.up-page .card.sect .cell-stack > strong {
  font-weight: 500;
  color: var(--text-strong);
}

.up-page .card.sect .cell-stack > span,
.up-page .card.sect td .by {
  font-size: 12px;
  color: var(--muted);
}

.up-page .side-badge {
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
}

.up-page .card.sect .icon-action {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--faint);
}

.up-page .card.sect .icon-action .ico {
  width: 15px;
  height: 15px;
}

.up-page .card.sect .icon-action.green {
  color: rgba(var(--up-rgb), 0.85);
}

.up-page .card.sect .icon-action:hover {
  background: var(--hover-strong);
  color: var(--text-strong);
}

.up-page .card.sect .icon-action.green:hover {
  color: var(--up);
  background: var(--up-soft);
}

.up-page .card.sect .icon-action.red:hover {
  color: var(--down);
  background: var(--down-soft);
}

.up-page .history-tools select {
  min-height: 34px;
  font-size: 13px;
  color: var(--text);
}

/* Bank accounts */
.up-page .bank-top strong {
  font-size: 13.5px;
  font-weight: 500;
}

/* Activity */
.up-page .fchip {
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 400;
}

.up-page .fchip.on {
  font-weight: 500;
}

.up-page .tl-day {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--faint);
}

.up-page .tl-ico {
  width: 30px;
  height: 30px;
  background: rgba(var(--tone), 0.1);
  border: 0;
}

.up-page .tl-ico .ico {
  width: 15px;
  height: 15px;
}

.up-page .tl-item::before {
  left: 15px;
  top: 40px;
}

.up-page .tl-body strong {
  font-size: 13px;
  font-weight: 500;
}

.up-page .tl-body span {
  font-size: 12px;
}

.up-page .tl-time {
  font-size: 12px;
  color: var(--faint);
}

@media (max-width: 560px) {
  .up-page .dl-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Values in body text colour (bright white reads heavy on the dark panel), like the tables. */
.up-page .dl-val {
  color: var(--text);
}

/* Ledger totals strip (Wallet & Ledger tab) */
.up-page .ledger-sum dt {
  font-size: 12px;
  font-weight: 400;
}

.up-page .ledger-sum dd,
.up-page .ledger-sum .num {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ---------- User details: compact profile ----------
   Details as a grid of label-over-value cells (2–3 per row) instead of one full-width row each;
   tighter cards, gaps and note box. */

.up-page .up-grid {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  margin-top: 14px;
}

.up-page .up-main,
.up-page .up-side {
  gap: 12px;
}

.up-page .up-grid .card {
  padding: 14px 16px 16px;
}

.up-page .dl-card .card-head,
.up-page .wallet-card .card-head,
.up-page .notes-card .card-head {
  min-height: 28px;
  margin-bottom: 10px;
}

.up-page .dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px 20px;
}

.up-page .dl-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
}

.up-page .dl-row dt {
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}

.up-page .dl-val {
  gap: 4px 6px;
  line-height: 1.4;
}

.up-page .dl-sub {
  margin-top: 0;
  font-size: 11.5px;
  line-height: 1.3;
}

/* Long values (the watchlist chips) take the whole row. */
.up-page .dl-row:has(.wl-chips) {
  grid-column: 1 / -1;
}

/* Wallet */
.up-page .wallet-card .wallet-balance {
  font-size: 20px;
}

.up-page .wallet-stats {
  margin-top: 12px;
  padding-top: 10px;
  gap: 10px;
}

/* Notes: a short box with the button beside it */
.up-page .notes-card .note-compose {
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 12px;
}

.up-page .notes-card .note-compose textarea {
  flex: 1;
  min-height: 36px;
  height: 36px;
  padding: 7px 10px;
  resize: vertical;
}

.up-page .notes-card .note-compose textarea:focus {
  height: 64px;
}

.up-page .notes-card .note-compose .btn {
  align-self: flex-start;
  min-height: 36px;
  padding: 0 12px;
}

.up-page .notes-card .notes {
  gap: 6px;
}

.up-page .notes-card .note {
  padding: 8px 10px;
}

.up-page .notes-card .note-meta {
  gap: 8px;
}

.up-page .notes-card .note-body p {
  margin-top: 2px;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .up-page .up-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .up-page .dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
  }

  .up-page .dl-row {
    grid-template-columns: none;
  }
}

.up-page .dl-val {
  flex-wrap: nowrap;
  min-width: 0;
}

.up-page .dl-val:has(.wl-chips) {
  flex-wrap: wrap;
}

.dl-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.up-page .dl-row dd {
  min-width: 0;
  max-width: 100%;
}

/* ---------- User details: Trades tab (and the shared open-positions table) ---------- */

/* Green/red cells keep their colour over the plain text colour. */
.up-page .card.sect table td.pos,
.up-page .card.sect table td .pos {
  color: var(--up);
}

.up-page .card.sect table td.neg,
.up-page .card.sect table td .neg {
  color: var(--down);
}

.up-page .card.sect table td .pt-none {
  color: var(--faint);
}

/* Compact strip, cards and rows */
.up-page .up-tiles .lt {
  gap: 3px;
  padding: 12px 16px 13px;
}

.up-page .up-tiles .lt strong {
  font-size: 17px;
}

.up-page .card.sect {
  padding: 14px 16px 16px;
}

.up-page .card.sect .card-head {
  min-height: 30px;
  margin-bottom: 10px;
}

.up-page .card.sect .card-head .muted.small {
  font-size: 12px;
  color: var(--muted);
}

.up-page .card.sect table th {
  padding: 9px 12px;
}

.up-page .card.sect table td {
  padding: 9px 12px;
  vertical-align: middle;
}

.up-page .card.sect table th:first-child,
.up-page .card.sect table td:first-child {
  padding-left: 14px;
}

/* Fee: "Taker  −$2.95" on one line */
.pt-liq {
  margin-right: 8px;
  font-size: 11.5px;
}

.ledger-table .pt-contract .pt-key {
  font-size: 12px;
}

.up-page .load-more {
  margin-top: 10px;
}

/* Liquidation rows: a thin red edge instead of a tinted row */
.up-page .ledger-table tr.liq-row td:first-child {
  box-shadow: inset 2px 0 0 var(--down);
}

/* ---------- User details: Wallet & Ledger tab (and the shared ledger) ---------- */

.pt-tag.violet {
  --tone: var(--violet-rgb);
}

.pt-tag.cyan {
  --tone: var(--cyan-rgb);
}

/* Tile notes on one line */
.up-page .lt em {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Ledger rows: "ADAUSDT · Trade #90004", and "−$1.78  −₹151.21" on one line */
.ledger-table .pt-detail {
  white-space: nowrap;
}

.ledger-table .pt-detail .pt-sub {
  font-size: 12.5px;
}

.pt-usd {
  margin-right: 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.ledger-table .pt-pnl {
  font-weight: 500;
}

/* Totals strip, filter bar and CSV: tighter */
.up-page .ledger-sum > div {
  padding: 9px 14px;
}

.up-page .ledger-sum dd,
.up-page .ledger-sum .num {
  margin-top: 1px;
  font-size: 13.5px;
}

.up-page .ledger-bar {
  margin: 12px 0 10px;
  gap: 10px;
}

.up-page .ledger-bar .muted.small {
  font-size: 12px;
}

.up-page .ledger-bar .btn.small {
  min-height: 32px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}

.up-page .ledger-bar .btn.small .ico {
  width: 14px;
  height: 14px;
}

.up-page .fchip span {
  font-size: 11px;
}

/* ---------- User details: Activity tab ----------
   One line per event: small icon, title, then the detail in grey, time on the right.
   The day bands and scroll area line up with the card's 16px padding. */

.up-page .activity-card .timeline {
  max-height: 640px;
  margin: 0 -16px -16px;
  padding: 0 16px 12px;
}

.up-page .activity-filters {
  margin-bottom: 4px;
}

.up-page .tl-day {
  margin: 0 -16px;
  padding: 12px 16px 6px;
}

/* Rows keep their height inside the scrolling list (they don't shrink to fit it). */
.up-page .timeline > * {
  flex-shrink: 0;
}

/* The hover band reaches 8px past the text on each side; the icons line up with the card's text. */
.up-page .tl-item {
  align-items: center;
  gap: 10px;
  min-height: 36px;
  margin: 0 -8px;
  padding: 5px 8px;
}

.up-page .tl-ico {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.up-page .tl-ico .ico {
  width: 13px;
  height: 13px;
}

/* The line joining one event's icon to the next */
.up-page .tl-item::before {
  left: 20px;
  top: 31px;
  bottom: -5px;
}

.up-page .tl-body {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  padding-top: 0;
  overflow: hidden;
}

.up-page .tl-body strong {
  flex: none;
  white-space: nowrap;
}

.up-page .tl-body span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  font-size: 12.5px;
}

.up-page .tl-time {
  padding-top: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Phones: the detail goes under the title again. */
@media (max-width: 560px) {
  .up-page .tl-item {
    align-items: flex-start;
  }

  .up-page .tl-body {
    flex-direction: column;
    gap: 1px;
  }

  .up-page .tl-body span {
    white-space: normal;
  }

  .up-page .tl-item::before {
    top: 33px;
  }
}

/* ---------- Ledger and Positions pop-ups (.modal .ledger): the user page's compact scale ---------- */

.modal.xl .modal-head h2 {
  font-size: 15px;
}

.modal.xl .modal-head p {
  margin-top: 3px;
  font-size: 12.5px;
}

.modal.xl .modal-foot .btn {
  min-height: 34px;
  padding: 6px 14px;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
}

.modal.xl .modal-foot .btn:not(.primary) {
  color: var(--text);
}

.modal.xl .modal-foot .btn .ico {
  width: 15px;
  height: 15px;
}

/* Figure strip */
.modal .ledger .ledger-tiles .lt {
  gap: 3px;
  padding: 11px 16px 12px;
}

.modal .ledger .lt span {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.modal .ledger .lt strong {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* "₹10,000 in withdrawals waiting…" */
.modal .ledger .reach {
  margin-top: 10px;
  padding: 8px 12px;
  gap: 8px;
  font-size: 12.5px;
}

.modal .ledger .reach strong {
  font-weight: 500;
}

.modal .ledger .reach .ico {
  width: 14px;
  height: 14px;
}

/* Filters and count */
.modal .ledger .ledger-bar {
  margin: 12px 0 10px;
}

.modal .ledger .ledger-bar .muted.small {
  font-size: 12px;
}

.modal .ledger .fchip {
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 400;
}

.modal .ledger .fchip.on {
  font-weight: 500;
}

.modal .ledger .fchip span {
  font-size: 11px;
}

/* Table */
.modal .ledger .ledger-table th {
  padding: 9px 12px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--faint);
}

.modal .ledger .ledger-table td {
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  vertical-align: middle;
}

.modal .ledger .ledger-table th:first-child,
.modal .ledger .ledger-table td:first-child {
  padding-left: 14px;
}

.modal .ledger .ledger-table td.pos,
.modal .ledger .ledger-table td .pos {
  color: var(--up);
}

.modal .ledger .ledger-table td.neg,
.modal .ledger .ledger-table td .neg {
  color: var(--down);
}

.modal .ledger .sub-h {
  margin: 16px 0 8px;
  font-size: 13px;
  font-weight: 600;
}

/* ---------- Payment Settings (.pay-settings): the shared compact scale ----------
   The "What users see" replica keeps the app's own look; only the settings side changes. */

.pay-settings {
  gap: 12px;
}

.pay-settings .set-form,
.pay-settings .set-side {
  gap: 12px;
}

.pay-settings .card {
  padding: 14px 16px 16px;
}

.pay-settings .card-head {
  margin-bottom: 10px;
}

.pay-settings .card-head h2 {
  font-size: 14px;
  font-weight: 600;
}

.pay-settings .card-sub {
  margin-top: 2px;
  font-size: 12.5px;
}

.pay-settings .card-head .btn.small {
  min-height: 32px;
  padding: 5px 11px;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}

.pay-settings .card-head .btn.small .ico {
  width: 14px;
  height: 14px;
}

/* Demo mode */
.pay-settings .mode-card {
  padding: 0;
}

.pay-settings .mode-card .mode-row {
  padding: 12px 16px;
  column-gap: 12px;
}

.pay-settings .mode-ico {
  width: 30px;
  height: 30px;
}

.pay-settings .mode-ico .ico {
  width: 15px;
  height: 15px;
}

.pay-settings .mode-text strong {
  font-size: 13px;
  font-weight: 500;
}

.pay-settings .mode-text span {
  font-size: 12px;
  line-height: 1.45;
}

/* Payee accounts */
.pay-settings .payee-list {
  gap: 8px;
}

.pay-settings .payee {
  gap: 12px;
  padding: 11px 12px 11px 14px;
}

.pay-settings .payee-top strong {
  font-size: 13px;
  font-weight: 500;
}

.pay-settings .payee-top .badge {
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 18px;
  box-shadow: none;
}

.pay-settings .payee-name {
  font-size: 12px;
}

.pay-settings .payee-lines {
  gap: 4px 16px;
  margin-top: 6px;
}

.pay-settings .payee-line {
  font-size: 12.5px;
}

.pay-settings .payee-line .mono {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.pay-settings .payee-line .ico {
  width: 13px;
  height: 13px;
}

.pay-settings .payee-actions .btn.small {
  min-height: 28px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.pay-settings .payee-actions .icon-btn {
  width: 28px;
  height: 28px;
}

.pay-settings .payee-actions .icon-btn .ico {
  width: 14px;
  height: 14px;
}

/* Limits */
.pay-settings .set-row {
  gap: 20px;
  padding: 12px 0 0;
}

.pay-settings .set-desc h3 {
  font-size: 13px;
  font-weight: 500;
}

.pay-settings .set-desc p {
  font-size: 12px;
}

.pay-settings .set-body .field label {
  font-size: 12px;
  font-weight: 400;
}

.pay-settings .set-body input {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 13px;
}

.pay-settings .save-bar > span {
  font-size: 13px;
}

.pay-settings .save-bar .btn {
  min-height: 34px;
  font-size: 13px;
}

/* Side: preview card and test link */
.pay-settings .pv-qr-frame {
  max-width: 200px;
}

.pay-settings .pv-test p {
  font-size: 12px;
}

/* ---------- Payee accounts: compact rows with a switch each ----------
   One bordered list; the active row gets a faint tint and a blue edge. */

.pay-settings .payee-list {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pay-settings .payee {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 14px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  box-shadow: none;
  cursor: default;
  transition: background 0.15s;
}

.pay-settings .payee:first-child {
  border-top: 0;
}

.pay-settings .payee:hover {
  border-color: var(--line);
  background: linear-gradient(var(--hover), var(--hover)), var(--panel);
}

.pay-settings .payee.on {
  border-color: var(--line);
  background: rgba(var(--accent-rgb), 0.05);
  box-shadow: inset 2px 0 0 var(--accent);
}

.pay-settings .payee .switch {
  flex: none;
}

.pay-settings .payee-main {
  gap: 2px;
}

.pay-settings .payee-top {
  gap: 8px;
}

.pay-settings .payee-top strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
}

.pay-settings .payee:not(.on) .payee-top strong {
  color: var(--text);
}

.payee-details {
  display: flex;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.payee-details > span:not(.payee-sep) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.payee-details > span:last-child {
  flex-shrink: 1;
}

.payee-sep {
  flex: none;
  margin: 0 6px;
  color: var(--faint);
}

.pay-settings .payee-actions {
  gap: 2px;
}

@media (max-width: 560px) {
  .payee-details {
    flex-wrap: wrap;
    white-space: normal;
  }

  /* Phones: switch, text and the edit/remove icons stay on one row, aligned to the title. */
  .pay-settings .payee {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
  }

  .pay-settings .payee .switch {
    margin-top: 1px;
  }

  .pay-settings .payee-actions {
    grid-column: auto;
    margin-top: -4px;
  }
}

/* ---------- Payment Settings preview: compact, in the admin's colours ----------
   Panels, lines and text use the admin tokens (so it follows light/dark); the app's orange
   marks only what's selected and the main button, so it still reads as the app's screen. */

.pay-settings {
  --app-accent: #fc8833;
  --app-accent-rgb: 252, 136, 51;
}

.pay-settings .pv-phone {
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--text);
  font-size: 12px;
}

.pay-settings .pv-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}

.pay-settings .pv-close {
  font-size: 16px;
  color: var(--faint);
}

.pay-settings .pv-lede {
  margin-top: -7px;
  font-size: 11.5px;
  color: var(--muted);
}

.pay-settings .pv-main {
  gap: 10px;
}

.pay-settings .pv-tabs {
  border-bottom-color: var(--line);
}

.pay-settings .pv-tab {
  padding: 6px 0 7px;
  font-size: 12.5px;
  color: var(--muted);
}

.pay-settings .pv-tab:hover {
  color: var(--text);
}

.pay-settings .pv-tab.on {
  color: var(--app-accent);
  box-shadow: inset 0 -2px 0 var(--app-accent);
}

.pay-settings .pv-qr-tab {
  gap: 8px;
}

.pay-settings .pv-chips {
  gap: 5px;
}

.pay-settings .pv-chip {
  padding: 4px 6px;
  border-radius: 6px;
  border-color: var(--line-strong);
  background: var(--panel);
  color: var(--text);
  font-size: 11.5px;
}

.pay-settings .pv-chip:hover {
  border-color: var(--faint);
}

.pay-settings .pv-chip.on {
  border-color: var(--app-accent);
  color: var(--app-accent);
  background: rgba(var(--app-accent-rgb), 0.1);
}

.pay-settings .pv-amount-wrap .affix-pre {
  left: 10px;
  font-size: 12px;
  color: var(--faint);
}

.pay-settings .pv-amount-wrap input.pv-amount {
  min-height: 30px;
  padding: 4px 10px 4px 24px;
  border-color: var(--line-strong);
  background: var(--panel);
  color: var(--text-strong);
  font-size: 12.5px;
}

.pay-settings .pv-amount-wrap input.pv-amount:hover:not(:focus) {
  border-color: var(--faint);
}

.pay-settings .pv-amount-wrap input.pv-amount:focus {
  border-color: var(--app-accent);
  box-shadow: 0 0 0 3px rgba(var(--app-accent-rgb), 0.22);
}

.pay-settings .pv-qr-pane {
  gap: 2px;
}

.pay-settings .pv-qr-frame {
  max-width: 172px;
  margin: 2px 0 6px;
  padding: 8px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--line);
}

.pay-settings .pv-scan {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-strong);
}

.pay-settings .pv-pay {
  font-size: 11.5px;
  color: var(--muted);
}

.pay-settings .pv-pay b {
  font-weight: 500;
  color: var(--text-strong);
}

.pay-settings .pv-upi,
.pay-settings .pv-card {
  border-color: var(--line);
  background: var(--panel);
}

.pay-settings .pv-upi {
  margin-top: 6px;
  padding: 7px 10px;
  font-size: 12px;
}

.pay-settings .pv-upi > span:first-child,
.pay-settings .pv-row > span:first-child {
  color: var(--muted);
}

.pay-settings .pv-upi .mono,
.pay-settings .pv-row .mono {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}

.pay-settings .pv-card-title {
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 500;
  color: var(--faint);
}

.pay-settings .pv-row {
  padding: 7px 10px;
  border-top-color: var(--line);
  font-size: 12px;
}

.pay-settings .pv-row > :last-child {
  color: var(--text-strong);
}

.pay-settings .pv-note {
  padding: 6px 9px;
  font-size: 11px;
}

.pay-settings .pv-min {
  font-size: 11px;
  color: var(--muted);
}

.pay-settings .pv-btn {
  padding: 8px;
  border-radius: 8px;
  background: var(--app-accent);
  color: #3a1602;
  font-size: 12.5px;
  font-weight: 500;
}

/* Under the replica */
.pay-settings .pv-test {
  gap: 6px;
  margin-top: 10px;
}

.pay-settings .pv-test p {
  font-size: 11.5px;
  line-height: 1.45;
}

.pay-settings .pv-test p .ico {
  width: 13px;
  height: 13px;
  margin-top: 1px;
}

.pay-settings .pv-link-row {
  padding: 2px 2px 2px 9px;
}

.pay-settings .pv-link {
  font-size: 11px;
}

.pay-settings .pv-link-row .icon-btn {
  width: 26px;
  height: 26px;
}

/* ---------- Notifications (.notif-page): the shared compact scale ----------
   Push and Banners: 34px controls and 13px text, a smaller phone preview (so the composer
   has no empty gap), and history rows like the other tables. */

/* Header: switch + figures */
.notif-page .seg {
  padding: 3px;
  border-radius: var(--radius-sm);
}

.notif-page .seg-btn {
  min-height: 28px;
  padding: 3px 11px;
  gap: 6px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.notif-page .seg-btn:hover {
  color: var(--text);
}

.notif-page .seg-btn.on {
  font-weight: 500;
  color: var(--text-strong);
}

.notif-page .seg-btn .ico {
  width: 14px;
  height: 14px;
}

.notif-page .eng-kpi {
  gap: 6px;
  padding: 7px 12px;
}

.notif-page .eng-kpi strong {
  font-size: 13.5px;
  font-weight: 500;
}

.notif-page .eng-kpi strong:not(.pos):not(.accent) {
  color: var(--text);
}

/* Composer */
.notif-page .eng-composer {
  margin-top: 12px;
}

/* Two columns only where there's room; below 1000px the preview goes under the form, as before. */
@media (min-width: 1001px) {
  .notif-page .eng-composer {
    grid-template-columns: minmax(0, 1fr) 232px;
  }
}

.notif-page .eng-form {
  gap: 10px;
  padding: 14px 16px;
}

.notif-page .eng-head h2 {
  font-size: 14px;
}

.notif-page .eng-head .muted {
  font-size: 12px;
}

.notif-page .efield {
  gap: 4px;
}

.notif-page .efield-label label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.notif-page .efield-label .hint {
  font-size: 11px;
}

.notif-page .eng-form input[type='text'],
.notif-page .eng-form input[type='search'],
.notif-page .eng-form input[type='datetime-local'],
.notif-page .eng-form input[type='url'],
.notif-page .eng-form select {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 13px;
}

.notif-page .eng-form textarea {
  min-height: 52px;
  padding: 7px 12px;
  font-size: 13px;
}

.notif-page .eng-row {
  gap: 10px;
}

.notif-page .eseg {
  min-height: 34px;
}

.notif-page .eseg-opt {
  padding: 0 10px;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 400;
}

.notif-page .eseg-opt.on {
  font-weight: 500;
}

.notif-page .eseg-opt .ico {
  width: 14px;
  height: 14px;
}

.notif-page .eng-foot {
  padding-top: 10px;
}

.notif-page .eng-foot .btn {
  min-height: 34px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
}

.notif-page .eng-foot .btn:not(.primary) {
  color: var(--text);
}

.notif-page .eng-foot .btn .ico {
  width: 15px;
  height: 15px;
}

.notif-page .eng-foot .reach {
  font-size: 12px;
}

/* Preview: a smaller phone */
.notif-page .eng-preview {
  gap: 8px;
  padding: 10px 12px 12px;
}

.notif-page .eng-preview-head {
  min-height: 28px;
  font-size: 12px;
  font-weight: 500;
}

/* Drawn at 55% and cut a little shorter, so the preview is no taller than the form. */
.notif-page .eng-preview .phone {
  zoom: 0.55;
  aspect-ratio: 9 / 13;
}

.notif-page .eng-preview .phone.home {
  aspect-ratio: 9 / 12.5;
}

.notif-page .eng-preview .preview-note {
  font-size: 11px;
  line-height: 1.45;
}

/* History */
.notif-page .history .history-head {
  align-items: center;
  padding: 12px 14px 10px;
}

.notif-page .history .history-head h2 {
  font-size: 14px;
}

.notif-page .history-tools {
  gap: 8px;
}

.notif-page .history-tools .fchip {
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 400;
}

.notif-page .history-tools .fchip.on {
  font-weight: 500;
}

.notif-page .history-tools .fchip span {
  font-size: 11px;
}

.notif-page .history-tools input[type='search'] {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 13px;
}

.notif-page .history-table th {
  padding: 9px 12px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--faint);
}

.notif-page .history-table td {
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.notif-page .history-table th:first-child,
.notif-page .history-table td:first-child {
  padding-left: 14px;
}

.notif-page .msg-cell strong {
  font-size: 13px;
  font-weight: 500;
}

.notif-page .msg-cell span {
  margin-top: 2px;
  font-size: 12px;
}

.notif-page .history-table td > span.by,
.notif-page .history-table td .by {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

.notif-page .aud-badge {
  padding: 0 7px 0 6px;
  gap: 5px;
  border: 0;
  border-radius: 4px;
  font-size: 11.5px;
  line-height: 20px;
  color: var(--text);
  background: var(--panel-3);
  box-shadow: 0 0 0 1px var(--line-strong) inset;
}

.notif-page .aud-badge .ico {
  width: 12px;
  height: 12px;
}

.notif-page .status-badge {
  padding: 0 6px;
  gap: 5px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 18px;
  box-shadow: none;
}

.notif-page .status-badge::before {
  width: 5px;
  height: 5px;
}

@media (max-width: 560px) {
  .notif-page .eng-kpi strong {
    font-size: 13px;
  }
}

/* History: the message column gives way so all six columns fit. */
.notif-page .msg-cell {
  max-width: 300px;
}

.notif-page .aud-badge {
  max-width: 190px;
}

/* Banners list */
.notif-page .banners-card .history-head {
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 14px 10px;
}

.notif-page .banners-card .history-head h2 {
  font-size: 14px;
}

.notif-page .banners-card .history-head .muted {
  font-size: 12px;
}

.notif-page .banner-row {
  gap: 12px;
  padding: 9px 14px;
}

.notif-page .banner-row .order {
  font-size: 12px;
  font-weight: 500;
  color: var(--faint);
}

.notif-page .banner-row .thumb {
  width: 88px;
  border-radius: 5px;
}

.notif-page .b-title {
  gap: 8px;
}

.notif-page .b-title strong {
  font-size: 13px;
  font-weight: 500;
}

.notif-page .b-meta {
  font-size: 12px;
}

.notif-page .b-info .ico {
  width: 12px;
  height: 12px;
}

.notif-page .b-actions {
  gap: 2px;
}

.notif-page .b-actions .sep {
  margin: 0 6px;
}

/* ---------- Push history on the shared table and filter ----------
   Header, status filter, search and rows exactly like Positions / Deposits. */

.pt-tag.blue {
  --tone: var(--blue-rgb);
}

.push-history .pay-head {
  padding: 14px 14px 12px;
}

.push-history .pay-head h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.push-history .pay-head p {
  margin-top: 2px;
  font-size: 12.5px;
}

.push-history .seg {
  padding: 3px;
  border-radius: var(--radius-sm);
}

.push-history .seg-btn {
  min-height: 26px;
  padding: 3px 10px;
  gap: 6px;
  border: 0;
  border-radius: 5px;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
}

.push-history .seg-btn:hover {
  color: var(--text);
}

.push-history .seg-btn.on {
  font-weight: 500;
  color: var(--text-strong);
  background: var(--seg-active);
}

.push-history .seg-num {
  min-width: 16px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 16px;
}

.push-history .pay-search {
  min-height: 34px;
  padding: 0 11px;
}

.push-history .pay-search .ico {
  width: 15px;
  height: 15px;
}

.push-history .pay-search input {
  min-height: 32px;
  padding: 6px 0;
  font-size: 13px;
  text-overflow: ellipsis;
}

/* Message: title over the first line of the text */
.pt-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 300px;
  line-height: 1.35;
}

.pt-msg .pt-sub {
  display: block;
}

/* Audience chip with its icon */
.pt-chip.pt-aud {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 190px;
  padding: 0 7px 0 6px;
  font-size: 11.5px;
  line-height: 20px;
  letter-spacing: 0;
}

.pt-chip.pt-aud span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.pt-chip.pt-aud .ico {
  flex: none;
  width: 12px;
  height: 12px;
  color: var(--muted);
}

/* The history rows open the details: whole row is the target. */
.push-history .pt-table tbody tr {
  cursor: pointer;
}

@media (max-width: 560px) {
  .pt-msg {
    max-width: 150px;
  }
}

/* Mid-size screens: message and audience give way first, so Reach stays in view. */
@media (max-width: 1400px) {
  .pt-msg {
    max-width: 210px;
  }

  .pt-chip.pt-aud {
    max-width: 140px;
  }
}

/* Time fields: the same box as every other input (they were left to the browser's default). */
input[type='time'] {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--text-strong);
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input[type='time']:hover:not(:focus):not(:disabled) {
  border-color: var(--line-strong);
}

input[type='time']:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

input[type='time']::-webkit-calendar-picker-indicator {
  filter: var(--picker-invert);
  cursor: pointer;
}

/* ---------- Rules (.rules-page): the shared compact scale ----------
   Tighter sections and rows, 34px controls, quiet day toggles and presets. */

.rules-page {
  gap: 12px;
}

.rules-page .rules-head p {
  font-size: 12.5px;
}

.rules-page .rules-head .btn.small {
  min-height: 32px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}

/* Section header */
.rules-page .rule-sec > summary {
  gap: 10px;
  padding: 12px 16px;
}

.rules-page .rule-sec .act-icon {
  width: 28px;
  height: 28px;
}

.rules-page .rule-sec .act-icon .ico {
  width: 14px;
  height: 14px;
}

.rules-page .rule-sum strong {
  font-size: 14px;
}

.rules-page .rule-sum > span {
  font-size: 12px;
}

.rules-page .rule-sum-text {
  font-size: 12px;
}

.rules-page .rule-sum-right .status-badge {
  padding: 0 6px;
  gap: 5px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 18px;
  box-shadow: none;
}

.rules-page .rule-sum-right .status-badge::before {
  width: 5px;
  height: 5px;
}

.rules-page .rule-body {
  padding: 0 16px 14px;
}

/* Rows */
.rules-page .set-row {
  grid-template-columns: minmax(180px, 0.75fr) minmax(0, 1.25fr);
  gap: 20px;
  padding: 12px 0;
}

.rules-page .set-desc h3 {
  font-size: 13px;
  font-weight: 500;
}

.rules-page .set-desc p {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
}

.rules-page .set-body .field label {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.rules-page .set-body .field .help {
  font-size: 11.5px;
  color: var(--faint);
}

.rules-page .rule-inline {
  gap: 9px;
  font-size: 13px;
}

.rules-page .rule-window,
.rules-page .rule-stack {
  gap: 10px;
}

.rules-page input[type='text'],
.rules-page input[type='number'],
.rules-page input[type='time'],
.rules-page select {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 13px;
}

.rules-page .affix-post {
  font-size: 13px;
}

/* Days: quiet toggles; a selected day is filled and bright, with a check */
.rules-page .day-chips {
  gap: 4px;
}

.rules-page .day-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 46px;
  min-height: 30px;
  padding: 0 9px;
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 400;
}

.rules-page .day-chip[aria-pressed='true'] {
  border-color: var(--line-strong);
  background: var(--seg-active);
  color: var(--text-strong);
  font-weight: 500;
}

.rules-page .day-chip[aria-pressed='true']::before {
  content: '';
  width: 5px;
  height: 8px;
  margin: -2px 1px 0 0;
  border: solid var(--up);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* Presets: small text buttons under the days */
.rules-page .rule-presets {
  gap: 4px;
  margin-top: -2px;
}

.rules-page .rule-presets .btn.small {
  min-height: 26px;
  padding: 2px 9px;
  border-color: transparent;
  background: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}

.rules-page .rule-presets .btn.small:hover:not(:disabled) {
  background: var(--accent-soft);
}

/* Save bar inside a section */
.rules-page .rule-sec .save-bar {
  margin-top: 4px;
  padding: 8px 8px 8px 14px;
}

.rules-page .rule-sec .save-bar > span {
  font-size: 13px;
}

.rules-page .rule-sec .save-bar .btn {
  min-height: 32px;
  font-size: 13px;
}

/* Contract limits and fee tables */
.rules-page .rule-contracts {
  gap: 10px;
  padding: 14px 0 2px;
}

.rules-page .rule-table th {
  padding: 8px 12px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: var(--faint);
}

.rules-page .rule-table td {
  padding: 7px 12px;
  font-size: 13px;
  color: var(--text);
}

.rules-page .rule-table td strong {
  font-weight: 500;
}

.rules-page .fee-example,
.rules-page .fee-info {
  padding: 10px 12px;
}

.rules-page .fee-ex-title,
.rules-page .fee-info strong {
  font-size: 12.5px;
  font-weight: 500;
}

.rules-page .fee-ex-row,
.rules-page .fee-info p {
  font-size: 12.5px;
}

.rules-page .fee-ex-row strong,
.rules-page .fee-info-val {
  font-weight: 500;
}

@media (max-width: 760px) {
  .rules-page .set-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

/* ---------- Terms & Conditions (.terms-page): the shared compact scale ---------- */

.terms-page {
  gap: 12px;
}

.terms-page .panel {
  padding: 14px 16px 16px;
}

.terms-page .terms-head {
  align-items: flex-start;
  margin-bottom: 8px;
}

.terms-page .terms-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.terms-page .terms-head .muted {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

/* Published / unsaved: a small flat tag, like the tables */
.terms-page .terms-status {
  flex: none;
  margin: 0;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
}

.terms-page .terms-status:empty {
  display: none;
}

.terms-page .terms-intro {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
}

/* Toolbar: one group of small tools, then a hint */
.terms-page .terms-tools {
  gap: 10px;
  margin: 0 0 8px;
}

.terms-toolbar {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.terms-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.terms-tool:hover:not(:disabled) {
  background: var(--seg-active);
  color: var(--text-strong);
}

.terms-tool:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.terms-tool:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.terms-glyph {
  min-width: 16px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--faint);
}

.terms-tool:hover .terms-glyph {
  color: var(--accent);
}

.terms-hint {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--faint);
}

/* Editor */
.terms-page .terms-input {
  min-height: 440px;
  padding: 10px 12px;
  font: 400 13px/1.6 var(--font-mono);
  color: var(--text);
}

.terms-page .field {
  margin-bottom: 10px;
}

.terms-page .field .help {
  font-size: 11.5px;
  color: var(--faint);
}

.terms-page .row-actions .btn {
  min-height: 34px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
}

.terms-page .row-actions .btn:not(.primary) {
  color: var(--text);
}

/* Preview */
.terms-page .terms-preview {
  max-height: 520px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.6;
}

.terms-page .terms-preview h3 {
  margin: 14px 0 6px;
  font-size: 15px;
  font-weight: 600;
}

.terms-page .terms-preview h4 {
  margin: 12px 0 4px;
  font-size: 13px;
  font-weight: 600;
}

.terms-page .terms-preview p {
  margin: 0 0 8px;
}

@media (max-width: 760px) {
  .terms-hint {
    display: none;
  }
}

/* Phones: symbols only (names stay as tooltips and for screen readers), spread across the width. */
@media (max-width: 560px) {
  .terms-page .terms-tools,
  .terms-toolbar {
    width: 100%;
  }

  .terms-label {
    display: none;
  }

  .terms-glyph {
    font-size: 12px;
    color: var(--muted);
  }
}

/* ---------- Terms: visual editor ---------- */

.terms-rich {
  min-height: 440px;
  max-height: 640px;
  overflow-y: auto;
  padding: 12px 16px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.terms-rich:hover:not(:focus) {
  border-color: var(--line-strong);
}

.terms-rich:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.terms-rich[contenteditable='false'] {
  opacity: 0.75;
}

.terms-rich[hidden],
.terms-page .terms-input[hidden],
.terms-toolbar[hidden],
.terms-hint[hidden] {
  display: none;
}

.terms-rich > :first-child {
  margin-top: 0;
}

.terms-rich h2 {
  margin: 18px 0 6px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.terms-rich h3 {
  margin: 14px 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
}

.terms-rich p {
  margin: 0 0 8px;
}

.terms-rich ul,
.terms-rich ol {
  margin: 0 0 8px;
  padding-left: 22px;
}

.terms-rich li {
  margin: 2px 0;
}

.terms-rich li::marker {
  color: var(--accent);
}

.terms-rich strong,
.terms-rich b {
  font-weight: 600;
  color: var(--text-strong);
}

/* Placeholder when empty */
.terms-rich:has(> p:only-child > br:only-child)::before {
  content: attr(data-placeholder);
  position: absolute;
  color: var(--faint);
  pointer-events: none;
}

.terms-rich {
  position: relative;
}

/* Toolbar: active formats light up; thin separators between groups */
.terms-tool.on {
  background: var(--seg-active);
  color: var(--text-strong);
  box-shadow: 0 0 0 1px var(--line-strong);
}

.terms-tool.on .terms-glyph {
  color: var(--accent);
}

.terms-tool[data-k='bold'] .terms-glyph {
  font-weight: 800;
}

.terms-sep {
  align-self: center;
  width: 1px;
  height: 16px;
  margin: 0 3px;
  background: var(--line-strong);
}

/* Visual / Markdown */
.terms-page .terms-modes {
  margin-left: auto;
  padding: 3px;
  border-radius: var(--radius-sm);
}

.terms-page .terms-modes .seg-btn {
  min-height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
}

.terms-page .terms-modes .seg-btn.on {
  font-weight: 500;
  color: var(--text-strong);
  background: var(--seg-active);
}

.terms-page .terms-tools {
  flex-wrap: wrap;
}

.terms-page .terms-hint {
  margin-left: 0;
}

.terms-page .field .help.neg {
  color: var(--down);
}

/* Symbols only (names are in the tooltips and for screen readers), so the whole toolbar fits. */
.terms-page .terms-label {
  display: none;
}

.terms-page .terms-tool {
  justify-content: center;
  min-width: 30px;
  padding: 0 7px;
}

.terms-page .terms-glyph {
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
}

.terms-page .terms-tool[data-k='undo'] .terms-glyph,
.terms-page .terms-tool[data-k='redo'] .terms-glyph {
  font-size: 14px;
  font-weight: 400;
}

@media (max-width: 560px) {
  .terms-toolbar {
    flex-wrap: wrap;
  }

  .terms-sep {
    display: none;
  }

  .terms-page .terms-modes {
    margin-left: 0;
  }
}

/* ---------- Support (.sp-grid): compact, on the shared scale ---------- */

.sp-grid {
  gap: 12px;
}

/* Two columns only where there's room; below 1100px the preview goes under the form, as before. */
@media (min-width: 1101px) {
  .sp-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

.sp-grid .sp-form,
.sp-grid .sp-side {
  gap: 12px;
}

/* WhatsApp / Telegram cards */
.sp-grid .sp-card-head {
  gap: 12px;
  padding: 11px 16px;
}

.sp-grid .sp-brand {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  box-shadow: none;
}

.sp-grid .sp-brand .ico {
  width: 17px;
  height: 17px;
}

.sp-grid .sp-card-title h3 {
  font-size: 14px;
}

.sp-grid .sp-card-title span,
.sp-grid .sp-card-title p {
  font-size: 12px;
}

/* "Live in the app" / "Off · hidden in the app": a small flat tag */
.sp-grid .sp-status {
  padding: 0 7px;
  gap: 5px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 20px;
  box-shadow: none;
}

.sp-grid .sp-status .dot {
  width: 5px;
  height: 5px;
}

.sp-grid .sp-card-body {
  gap: 6px;
  padding: 12px 16px 14px;
}

.sp-grid .sp-label-row label {
  font-size: 12px;
  color: var(--muted);
}

.sp-grid .sp-kind {
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 18px;
}

.sp-grid .sp-input input {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 34px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.sp-grid .sp-input > .ico {
  left: 11px;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
}

.sp-grid .sp-help {
  font-size: 11.5px;
  color: var(--faint);
}

/* "Users are taken to …" */
.sp-grid .sp-link {
  gap: 10px;
  margin-top: 2px;
  padding: 8px 10px;
}

/* A working link: the padding is on its inner row, not the box */
.sp-grid .sp-link.ok {
  padding: 0;
}

.sp-grid .sp-link-main {
  gap: 10px;
  padding: 8px 8px 8px 10px;
}

.sp-grid .sp-link-ico {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

.sp-grid .sp-link-ico .ico {
  width: 13px;
  height: 13px;
}

.sp-grid .sp-link-text span {
  font-size: 11.5px;
}

.sp-grid .sp-link-text a {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text);
}

.sp-grid .sp-link-actions {
  gap: 4px;
}

.sp-grid .sp-link-actions .btn {
  min-height: 28px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.sp-grid .sp-link-actions .ico {
  width: 13px;
  height: 13px;
}

.sp-grid .sp-link-note {
  padding: 8px 12px;
  font-size: 11.5px;
}

/* Save bar */
.sp-grid .save-bar > span {
  font-size: 13px;
}

.sp-grid .save-bar .btn {
  min-height: 34px;
  font-size: 13px;
}

/* Preview: a smaller phone */
.sp-grid .sp-preview-card {
  padding: 14px 16px;
}

.sp-grid .sp-preview-card .card-head {
  margin-bottom: 10px;
}

.sp-grid .sp-preview-card .card-head h2 {
  font-size: 14px;
}

.sp-grid .sp-preview-card .card-sub {
  font-size: 12px;
}

.sp-grid .sp-phone {
  zoom: 0.66;
}

.sp-grid .spp-chat {
  margin-top: 10px;
}

.sp-grid .sp-where {
  gap: 5px;
  margin-top: 10px;
  font-size: 12px;
}

.sp-grid .sp-where .ico {
  width: 13px;
  height: 13px;
}

/* First WhatsApp message: label + switch, the text box, help and counter */
.sp-msg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.sp-msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sp-msg-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sp-msg-title label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.sp-msg-title span {
  font-size: 11.5px;
  color: var(--faint);
}

.sp-msg-field textarea {
  min-height: 52px;
  padding: 7px 11px;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

.sp-msg-field.is-off textarea {
  opacity: 0.5;
}

.sp-msg-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sp-msg-foot .counter {
  flex: none;
  font-size: 11px;
  color: var(--faint);
}

/* Segmented controls built from <button>s look the same as the link ones (no browser button chrome). */
button.seg-btn {
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

button.seg-btn.on {
  background: var(--seg-active);
}

.pt-tag.grey {
  --tone: var(--grey-rgb);
}

/* ---------- Security (.sec-page): the shared switch, tables and settings rows ---------- */

.sec-page {
  gap: 12px;
}

.sec-page .sec-tabs {
  align-self: flex-start;
  padding: 3px;
  border-radius: var(--radius-sm);
}

.sec-page .seg-btn {
  min-height: 28px;
  padding: 3px 11px;
  gap: 6px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.sec-page .seg-btn:hover {
  color: var(--text);
}

.sec-page .seg-btn.on {
  font-weight: 500;
  color: var(--text-strong);
}

.sec-page .seg-btn .ico {
  width: 14px;
  height: 14px;
}

.sec-page .seg-num,
.sec-page .tab-count {
  min-width: 16px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 16px;
}

.sec-stack {
  gap: 12px;
}

/* Section header: title, short line, the section's main action */
.sec-page .section-head {
  align-items: center;
  margin: 0;
  padding: 14px 14px 12px;
}

.sec-page .section-head h2 {
  font-size: 14px;
  font-weight: 600;
}

.sec-page .section-head p {
  margin-top: 2px;
  font-size: 12.5px;
}

.sec-page .section-head .btn {
  min-height: 32px;
  padding: 5px 12px;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
}

.sec-page .section-head .btn .ico {
  width: 14px;
  height: 14px;
}

.sec-page .sec-filters {
  padding: 0 14px 12px;
  border-bottom: 0;
}

/* This browser's own session: a faint tint */
.table-card .pt-table tr.sec-current td {
  background: linear-gradient(rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.05)), var(--panel);
}

.sec-page .pt-who-text .pt-contract {
  gap: 6px;
}

/* Policies: the Rules page's compact rows */
.sec-page .set-card {
  padding: 14px 16px 16px;
}

.sec-page .set-card .card-head {
  margin-bottom: 8px;
}

.sec-page .set-card .card-head h2 {
  font-size: 14px;
}

.sec-page .set-card .card-sub {
  margin-top: 2px;
  font-size: 12.5px;
}

.sec-page .set-row {
  gap: 20px;
  padding: 12px 0;
}

.sec-page .set-desc h3 {
  font-size: 13px;
  font-weight: 500;
}

.sec-page .set-desc p {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
}

.sec-page .set-body input,
.sec-page .set-body select {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 13px;
}

.sec-page .affix-post {
  font-size: 12.5px;
}

.sec-page .mode-row {
  padding: 11px 14px;
  column-gap: 12px;
}

.sec-page .mode-ico {
  width: 30px;
  height: 30px;
}

.sec-page .mode-ico .ico {
  width: 15px;
  height: 15px;
}

.sec-page .mode-text strong {
  font-size: 13px;
  font-weight: 500;
}

.sec-page .mode-text span {
  font-size: 12px;
}

.sec-page .sec-ips textarea {
  font-size: 13px;
}

.sec-page .save-bar > span,
.sec-page .save-bar .btn {
  font-size: 13px;
}

.sec-page .save-bar .btn {
  min-height: 34px;
}

.sec-page .set-form {
  gap: 12px;
}

.sec-page .set-form > .card {
  margin-top: 0;
}

/* Phones: the tab switch scrolls sideways inside its own strip. */
.sec-page .sec-tabs {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.sec-page .sec-tabs::-webkit-scrollbar {
  display: none;
}

.sec-page .sec-tabs .seg-btn {
  flex: none;
}

/* ---------- Access Control (.access-page): the shared switch, tables, tags and settings ---------- */

.access-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.access-page > * {
  margin-top: 0;
}

.access-page .access-tabs {
  align-self: flex-start;
  max-width: 100%;
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--radius-sm);
}

.access-page .access-tabs::-webkit-scrollbar {
  display: none;
}

.access-page .access-tabs .seg-btn {
  flex: none;
  min-height: 28px;
  padding: 3px 11px;
  gap: 6px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.access-page .access-tabs .seg-btn:hover {
  color: var(--text);
}

.access-page .access-tabs .seg-btn.on {
  font-weight: 500;
  color: var(--text-strong);
}

.access-page .access-tabs .seg-btn .ico {
  width: 14px;
  height: 14px;
}

.access-page .tab-count {
  min-width: 16px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 16px;
}

/* Section headers ("Admin Users Management", "Roles & Permissions", …) */
.access-page .section-head {
  align-items: center;
  margin: 0 0 12px;
}

.access-page .section-head h2 {
  font-size: 15px;
  font-weight: 600;
}

.access-page .section-head p {
  margin-top: 2px;
  font-size: 12.5px;
}

.access-page .section-head .btn {
  min-height: 34px;
  padding: 6px 12px;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
}

.access-page .section-head .btn:not(.primary) {
  color: var(--text);
}

.access-page .section-head .btn .ico {
  width: 15px;
  height: 15px;
}

.access-page .mini-stats {
  margin-bottom: 12px;
}

/* Role, status and log-action badges: small and flat, like .pt-tag */
.access-page .role-badge,
.access-page .status-badge,
.access-page .log-action {
  padding: 0 6px;
  gap: 5px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  box-shadow: none;
}

.access-page .status-badge::before {
  width: 5px;
  height: 5px;
}

/* Roles: compact cards and permission matrix */
.access-page .role-grid {
  gap: 10px;
  margin-bottom: 12px;
}

.access-page .role-card {
  gap: 6px;
  padding: 12px 14px;
}

.access-page .role-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.access-page .role-top .muted.small {
  font-size: 11.5px;
}

.access-page .matrix th {
  padding: 9px 12px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.access-page .matrix td {
  padding: 8px 12px;
  font-size: 13px;
}

.access-page .matrix td strong {
  font-weight: 500;
}

.access-page .perm {
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 18px;
}

.access-page .perm-pick {
  padding: 2px;
  gap: 1px;
  border-radius: 6px;
}

.access-page .pp-opt {
  min-height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 11.5px;
}

.access-page .perm-note {
  margin: 10px 0 0;
  font-size: 12px;
}

/* Approvals */
.access-page .approval-list {
  gap: 8px;
}

.access-page .approval {
  gap: 12px;
  padding: 10px 14px;
}

.access-page .approval .btn {
  min-height: 32px;
  font-size: 12.5px;
}

/* Activity logs: header, search and rows like the other tables */
.access-logs .pay-head {
  padding: 14px 14px 12px;
}

.access-logs .pay-head h2 {
  font-size: 14px;
  font-weight: 600;
}

.access-logs .pay-head p {
  margin-top: 2px;
  font-size: 12.5px;
}

.access-logs .pay-filters {
  padding: 0 14px 12px;
  border-bottom: 0;
}

.access-logs .pay-search {
  flex: 1 1 auto;
  min-height: 34px;
  padding: 0 11px;
}

.access-logs .pay-search .ico {
  width: 15px;
  height: 15px;
}

.access-logs .pay-search input {
  min-height: 32px;
  padding: 6px 0;
  font-size: 13px;
}

/* Long targets, details and emails end in "…" (full text on hover). */
.pt-cell-clip {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.logs-table .pt-sub.pt-cell-clip {
  max-width: 260px;
}

/* Permission matrix: one-line role headings, slimmer pickers and cells, the Area column pinned. */
.access-page .matrix th,
.access-page .matrix td {
  padding-left: 6px;
  padding-right: 6px;
}

.access-page .matrix th:first-child,
.access-page .matrix td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  padding-left: 14px;
  padding-right: 10px;
  background: var(--panel);
  box-shadow: inset -1px 0 0 var(--line);
}

.access-page .matrix th:first-child {
  background: var(--panel-2);
}

.access-page .matrix tbody tr:hover td:first-child {
  background: linear-gradient(var(--hover), var(--hover)), var(--panel);
}

.access-page .matrix th {
  vertical-align: bottom;
  white-space: nowrap;
}

.access-page .role-col {
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.access-page .role-col-note {
  gap: 3px;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
}

.access-page .role-col-note .ico {
  width: 10px;
  height: 10px;
}

.access-page .perm-pick {
  padding: 2px;
}

.access-page .pp-opt {
  min-height: 22px;
  padding: 0 4px;
  font-size: 11px;
}

/* Long role names (Compliance Officer, Read-Only Auditor) take two lines at most. */
.access-page .role-col > span:first-child {
  max-width: 100px;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

/* Two bars a day: each series has a colour (t-accent / t-up / t-down), plus a small legend */
.bar-chart .bar-rect.t-up {
  fill: rgba(var(--up-rgb), 0.3);
}

.bar-chart .bar-rect.t-down {
  fill: rgba(var(--down-rgb), 0.3);
}

.bar-chart .bar.today .bar-rect.t-up,
.bar-chart .bar:hover .bar-rect.t-up {
  fill: var(--up);
}

.bar-chart .bar.today .bar-rect.t-down,
.bar-chart .bar:hover .bar-rect.t-down {
  fill: var(--down);
}

.bar-chart:hover .bar.today:not(:hover) .bar-rect.t-up {
  fill: rgba(var(--up-rgb), 0.3);
}

.bar-chart:hover .bar.today:not(:hover) .bar-rect.t-down {
  fill: rgba(var(--down-rgb), 0.3);
}

.chart-total strong.pos {
  color: var(--up);
}

.chart-total strong.neg {
  color: var(--down);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 2px 0 6px;
  padding: 0 18px;
  font-size: 12px;
  color: var(--muted);
}

.chart-legend[hidden] {
  display: none;
}

.chart-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-legend .lg i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
}

.chart-legend .lg.t-up i {
  background: var(--up);
}

.chart-legend .lg.t-down i {
  background: var(--down);
}

.chart-legend em {
  font-style: normal;
  color: var(--faint);
}

/* A pair's label: each number in its bar's colour */
.bar-chart .bar-value .tv.t-up {
  fill: var(--up);
}

.bar-chart .bar-value .tv.t-down {
  fill: var(--down);
}

.bar-chart .bar-value .tv.t-accent {
  fill: var(--accent);
}

.bar-chart .bar-value .tv-sep {
  fill: var(--faint);
}

/* Chart options scroll sideways when they don't fit (phones), instead of being cut off. */
.chart-head .mini-seg {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.chart-head .mini-seg::-webkit-scrollbar {
  display: none;
}

.chart-head .mini-seg button {
  flex: none;
  white-space: nowrap;
}

/* Dashboard: Positions to watch */
.watch-card .dx-card-head {
  flex-wrap: wrap;
  row-gap: 8px;
}

.watch-card .mini-seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.watch-card .mini-seg .seg-num {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.watch-card .mini-seg button.on .seg-num {
  color: var(--text-strong);
}

.watch-table td {
  height: 54px;
}

.watch-table .col-pos {
  width: 26%;
}

.watch-table .col-pnl,
.watch-table .col-liq {
  width: 19%;
}

.watch-table .pt-who,
.watch-table .pt-stack {
  min-width: 0;
}

.watch-table .pt-sub {
  overflow: hidden;
  text-overflow: ellipsis;
}

.watch-table .pt-val.risk-mid {
  color: var(--warn);
}

.watch-table .pt-val.risk-high {
  color: var(--down);
}

.watch-foot {
  display: flex;
  justify-content: flex-end;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
}

/* Phones: one figure column — distance on "Near liquidation", PnL on the others. */
@media (max-width: 640px) {
  .watch-card[data-tab='risk'] .col-pnl,
  .watch-card:not([data-tab='risk']) .col-liq {
    display: none;
  }

  .watch-table .col-pos {
    width: 40%;
  }

  .watch-table .col-pnl,
  .watch-table .col-liq {
    width: 27%;
  }

  .watch-table th,
  .watch-table td {
    padding: 0 10px;
  }

  .watch-table .pt-who .init-avatar {
    display: none;
  }

  .watch-card .mini-seg {
    width: 100%;
  }
}

/* Rules → Platform fees: USDT / INR rate */
.fx-setting {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.fx-seg .seg-btn .ico {
  width: 14px;
  height: 14px;
}

.fx-fixed {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.fx-fixed[hidden] {
  display: none;
}

.fx-fixed .field {
  margin: 0;
}

.fx-fixed .affix {
  width: 160px;
}

.fx-fixed .btn {
  margin-bottom: 22px;
}

.fx-note {
  display: grid;
  gap: 4px;
  font-size: 12.5px;
  color: var(--muted);
}

.fx-market {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.fx-market strong {
  font-weight: 500;
  color: var(--text);
}

.fx-dot {
  width: 6px;
  height: 6px;
  margin-right: 3px;
  border-radius: 50%;
  background: var(--faint);
}

.fx-dot.ok {
  background: var(--up);
}

.fx-gap.warn {
  color: var(--warn);
}

.fx-since {
  color: var(--faint);
}

.snap-link {
  color: inherit;
}

.snap-link:hover {
  color: var(--accent);
  text-decoration: none;
}

/* Withdrawals → Partners: the wallet in the details panel, two figures a row */
.pp-tiles.ledger-tiles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- Partner performance ---------- */

.pp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 12px;
}

.pp-who {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.pp-who .init-avatar {
  width: 44px;
  height: 44px;
  font-size: 16px;
}

.pp-who-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pp-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pp-name-row h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

.pp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 12.5px;
  color: var(--muted);
}

.pp-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.pp-actions .ref-link {
  max-width: 260px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.pp-actions .ref-link:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

.pp-kpis {
  margin-bottom: 12px;
}

.pp-chart {
  margin-bottom: 12px;
}

.pp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.pp-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 16px 18px 4px;
  list-style: none;
}

.pp-step-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 13px;
}

.pp-step-top strong {
  font-weight: 600;
  color: var(--text-strong);
}

.pp-step-top em {
  margin-left: 8px;
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}

.pp-step-top .num {
  font-weight: 600;
  color: var(--text-strong);
}

.pp-track {
  height: 8px;
  border-radius: 999px;
  background: var(--panel-3);
  overflow: hidden;
}

.pp-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.95), rgba(var(--accent-rgb), 0.6));
}

.pp-steps li:nth-child(2) .pp-bar {
  background: linear-gradient(90deg, rgba(var(--green-rgb), 0.95), rgba(var(--green-rgb), 0.6));
}

.pp-steps li:nth-child(3) .pp-bar {
  background: linear-gradient(90deg, rgba(var(--violet-rgb), 0.95), rgba(var(--violet-rgb), 0.6));
}

.pp-steps li:nth-child(4) .pp-bar {
  background: linear-gradient(90deg, rgba(var(--amber-rgb), 0.95), rgba(var(--amber-rgb), 0.6));
}

.pp-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 16px 0 0;
  border-top: 1px solid var(--line);
  background: var(--line);
}

.pp-stats div {
  padding: 12px 18px;
  background: var(--panel);
}

.pp-stats dt {
  font-size: 11.5px;
  color: var(--muted);
}

.pp-stats dd {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
}

/* Columns size to their content; only the user column gives way. */
.pp-table {
  table-layout: auto;
}

.pp-table td,
.pp-table th {
  padding: 0 14px;
  white-space: nowrap;
}

.pp-table td:first-child,
.pp-table th:first-child {
  padding-left: 18px;
  width: 100%;
  max-width: 0;
}

.pp-table .pt-who {
  max-width: 100%;
}

.pp-table td.pos {
  color: var(--up);
}

.pp-table td.neg {
  color: var(--down);
}

@media (max-width: 1100px) {
  .pp-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .pp-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- User → Brokerage & Leverage / Settings ---------- */
.uo-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.uo-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.uo-status-text {
  font-size: 13px;
  color: var(--text);
}

.uo-status-meta {
  font-size: 12px;
  color: var(--faint);
}

.uo-status .btn {
  margin-left: auto;
}

.uo-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

/* The leverage table scrolls sideways on narrow screens instead of widening the page. */
.uo-card-body .table-wrap {
  overflow-x: auto;
}

.uo-card {
  padding: 0;
  overflow: visible;
}

.uo-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.uo-card-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
}

.uo-card-head p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.uo-card-body {
  padding: 0 18px 4px;
}

.uo-card-body .rule-contracts {
  padding: 14px 0 12px;
}

.uo-stack {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.uo-hours[hidden],
.uo-note[hidden] {
  display: none;
}

.uo-hours {
  display: grid;
  gap: 12px;
  width: 100%;
}

.uo-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.uo-note .ico {
  width: 14px;
  height: 14px;
  color: var(--faint);
}

.uo-table .affix-post-wrap {
  max-width: 120px;
}

.uo-table input {
  height: 32px;
}

.uo-own {
  color: var(--accent);
}

.fee-ex-row em {
  font-style: normal;
  font-size: 12px;
  color: var(--faint);
}

.fee-ex-row em.pos {
  color: var(--up);
}

.fee-ex-row em.neg {
  color: var(--down);
}

.uo-page .save-bar {
  position: sticky;
  bottom: 12px;
}

/* Minimum holding time: seconds, a readable echo and quick picks */
.hold-input {
  display: grid;
  gap: 8px;
}

.hold-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hold-row .affix-post-wrap {
  width: 160px;
}

.hold-echo {
  font-size: 12.5px;
  color: var(--muted);
}

.hold-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Partner pop-up: brokerage for their users */
.pf-fees {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-2);
}

.pf-fees-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf-fees-head strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
}

.pf-fees-head span {
  font-size: 12.5px;
  color: var(--muted);
}

.pf-seg {
  width: 100%;
}

.pf-seg .seg-btn {
  flex: 1;
  justify-content: center;
}

.pf-custom[hidden] {
  display: none;
}

.pf-fees .field {
  margin: 0;
}

.pf-summary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.pf-summary .ico {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--accent);
}

.pf-summary strong {
  font-weight: 500;
  color: var(--text-strong);
}

/* Partners table: the offer their link gives */
.pt-offer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--up);
  white-space: nowrap;
}

.pt-offer .ico {
  width: 12px;
  height: 12px;
}

/* User → Brokerage: where their rates come from */
.uo-partner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

.uo-partner .ico {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--accent);
}

/* Wide suffix ("trades"): room for it, and no number arrows over it */
.pf-fees .suffix-field input {
  padding-right: 64px;
  -moz-appearance: textfield;
}

.pf-fees .suffix-field input::-webkit-inner-spin-button,
.pf-fees .suffix-field input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Rules: promotion toggles (switch + one value) and auto square-off */
.promo-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.promo-val {
  width: 150px;
  transition: opacity 0.15s;
}

.promo-val.off {
  opacity: 0.45;
}

.sq-when {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.sq-when input[type='time'] {
  width: 140px;
}

.sq-run {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn.danger-outline {
  color: var(--down);
  border-color: rgba(var(--down-rgb), 0.4);
}

.btn.danger-outline:hover:not(:disabled) {
  background: rgba(var(--down-rgb), 0.1);
}

/* Rules: the "No limit" switch under the position limit. */
.pos-nolimit {
  margin-top: 10px;
}

/* ---------- Partner trading settings (settingsEditor, /admin/partners/:id/settings) ---------- */

.pt-tag.ps-system {
  --tone: var(--violet-rgb);
}

.pt-tag.ps-inherit {
  --tone: var(--amber-rgb);
}

.ps-default-row td {
  background: var(--panel-2);
}

.pt-val.pt-earned {
  color: var(--up);
}

.rule-partner-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  font-size: 13px;
  color: var(--muted);
}

.rule-partner-note .ico {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
}

.rule-partner-note a {
  color: var(--accent);
}

.ps-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.ps-head,
.ps-blocks {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  min-width: 0;
}

.ps-head-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ps-head-top h2 {
  margin: 0;
  font-size: 17px;
}

.ps-head-top p {
  margin: 2px 0 0;
}

.ps-code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  min-width: 0;
}

.ps-code-value {
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--text-strong);
}

.ps-code .ref-link {
  min-width: 0;
  max-width: 100%;
}

.ps-code .ref-link span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-share {
  max-width: 320px;
}

.ps-switches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 4px 0 10px;
}

.ps-switch,
.ps-seg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  cursor: pointer;
  min-width: 0;
}

.ps-switch > span:last-child,
.ps-seg > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ps-switch strong,
.ps-seg strong {
  font-size: 13.5px;
  color: var(--text-strong);
  font-weight: 600;
}

.ps-switch em,
.ps-seg em {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}

.ps-section-head h3 {
  margin: 0;
  font-size: 15px;
  color: var(--text-strong);
}

.ps-section-head p {
  margin: 3px 0 0;
}

.partner-form .ps-section-head {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.ps-section-sub {
  margin: 10px 0 6px;
  font-size: 13px;
}

.ps-segments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 12px;
  margin-top: 12px;
  min-width: 0;
}

.ps-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 3px solid rgba(var(--up-rgb), 0.7);
  border-radius: var(--radius);
  background: var(--panel-2);
  min-width: 0;
}

.ps-block.sell {
  border-top-color: rgba(var(--down-rgb), 0.7);
}

.ps-block-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.ps-block-head > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ps-block-head strong {
  color: var(--text-strong);
}

.ps-copy {
  max-width: 100%;
}

.ps-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 10px;
}

.ps-fields .field:first-child {
  grid-column: 1 / -1;
}

.ps-fields .field {
  min-width: 0;
}

.ps-fields .help {
  font-size: 11.5px;
}

.ps-brokerage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.ps-brokerage .affix-post-wrap,
.ps-fields .affix-post-wrap,
.ps-fields .affix {
  min-width: 0;
}

.ps-fields input.num {
  width: 100%;
  min-width: 0;
}

.ps-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.ps-dirty[hidden] {
  display: none;
}

.ps-dirty {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.modal.xl .ps-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

@media (max-width: 600px) {
  .ps-head,
  .ps-blocks {
    padding: 14px;
  }

  .ps-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .ps-share {
    max-width: none;
  }

  .ps-actions .btn {
    flex: 1 1 auto;
  }
}

/* Dialogs never wider than the screen: one column as wide as the backdrop, so a wide dialog's own width can't stretch it. */
.modal-backdrop {
  grid-template-columns: minmax(0, 1fr);
}

.modal {
  max-width: 100%;
}