/* ============================================================================
   W3D Terminal skin.
   Everything here is scoped under html[data-skin='terminal'] — the classic
   skin is untouched. The skin works in three layers:
     1. Token overrides: the existing custom properties (--bg, --bg-card,
        --text-dim, --green…) get the terminal palette, so every classic
        component picks up the look for free. Terminal-only tokens use the
        redesign's names (--card, --muted, --pos…) so styles ported from the
        mock (uploads/redesign) read the same.
     2. Component restyles for the shell: sidebar (built by skin-layout.js),
        hero/KPI summary, segmented controls, tables, modals, toasts.
     3. The positions-as-rows view (positions.js renders rows instead of
        cards under this skin).
   Fonts are self-hosted in /vendor/fonts (CSP: font-src 'self').
   Space Grotesk has NO cyrillic — RU text falls back to the system sans.
   ========================================================================= */

/* --- Fonts (subset woff2, downloaded from Google Fonts; OFL licensed) --- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('vendor/fonts/space-grotesk-var-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/ibm-plex-mono-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/ibm-plex-mono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('vendor/fonts/ibm-plex-mono-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('vendor/fonts/ibm-plex-mono-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('vendor/fonts/ibm-plex-mono-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('vendor/fonts/ibm-plex-mono-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- Tokens: dark (default) --- */
:root[data-skin='terminal'] {
  /* Remap the app's existing tokens → the whole classic component set
     inherits the terminal palette (charts.js reads these off :root too). */
  --bg: #0b0d12;
  --bg-card: #0f1219;
  --bg-track: #191d27;
  --border: #1b202b;
  --text: #e7ebf2;
  --text-dim: #8b93a3;
  --green: #3ecf8e;
  --red: #ef5b5b;
  --yellow: #e8b339;
  --accent: #5b8def;
  --chart-grid: rgba(255, 255, 255, 0.05);
  --surface-2: #11151d;
  --bg-elevated: #11141b;
  --radius-sm: 7px;
  --radius: 9px;
  --radius-lg: 14px;

  /* Terminal-only tokens (names match the redesign mock). */
  --bg2: #0c0f15;
  --card: #0f1219;
  --card2: #11141b;
  --input: #12151d;
  --subcard: #11151d;
  --hover: #141821;
  --rowline: #151922;
  --tip: #161b25;
  --hover2: #171c26;
  --track: #191d27;
  --border2: #232a38;
  --border3: #2a3140;
  --cross: #3a4356;
  --text2: #aeb6c4;
  --muted: #8b93a3;
  --muted2: #7b8494;
  --muted3: #5b6272;
  --muted4: #4e5666;
  --pos: #3ecf8e;
  --neg: #ef5b5b;
  --amber: #e8b339;
  --blue: #5b8def;
  --purple: #a78bfa;
  --orange: #f97316;
  --chip-pos: #c6f7e2;
  --chip-neg: #f7c9c9;
  --chip-blue: #c9dbf7;
  --chip-purple: #d9c9f7;
  --chip-amber: #f7ecc9;
  --scrim: rgba(5, 7, 10, 0.72);
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* --- Tokens: light --- */
:root[data-skin='terminal'][data-theme='light'] {
  --bg: #eef0f4;
  --bg-card: #ffffff;
  --bg-track: #e3e7ee;
  --border: #dfe3ea;
  --text: #171c26;
  --text-dim: #5b6575;
  --green: #0e9e63;
  --red: #d03e3e;
  --yellow: #a1731a;
  --accent: #3a63d0;
  --chart-grid: rgba(23, 28, 38, 0.07);
  --surface-2: #f6f7fa;
  --bg-elevated: #f8f9fb;

  --bg2: #f8f9fb;
  --card: #ffffff;
  --card2: #ffffff;
  --input: #f1f3f7;
  --subcard: #f6f7fa;
  --hover: #eaedf2;
  --rowline: #e8ebf0;
  --tip: #ffffff;
  --hover2: #eef1f5;
  --track: #e3e7ee;
  --border2: #cdd4de;
  --border3: #c0c8d3;
  --cross: #a9b2c1;
  --text2: #3d4657;
  --muted: #5b6575;
  --muted2: #6d7789;
  --muted3: #8b93a3;
  --muted4: #9aa2ae;
  --pos: #0e9e63;
  --neg: #d03e3e;
  --amber: #a1731a;
  --blue: #3a63d0;
  --purple: #7a52e0;
  --orange: #e05e0a;
  --chip-pos: #0d7a4e;
  --chip-neg: #b03535;
  --chip-blue: #2f57b8;
  --chip-purple: #6d48c9;
  --chip-amber: #8a6d00;
  --scrim: rgba(30, 36, 48, 0.42);
  --shadow-lg: 0 24px 70px rgba(23, 28, 38, 0.22);
  --shadow-md: 0 12px 36px rgba(23, 28, 38, 0.18);
  --shadow-sm: 0 10px 26px rgba(23, 28, 38, 0.16);
  color-scheme: light;
}

/* --- Animations (shared with the mock) --- */
@keyframes t-fadeUp {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes t-scaleIn {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes t-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes t-markerPulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(232, 179, 57, 0.22);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(232, 179, 57, 0.03);
  }
}
@keyframes t-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes t-toastUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Base typography --- */
[data-skin='terminal'] body {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
[data-skin='terminal'] ::selection {
  background: rgba(62, 207, 142, 0.25);
}
[data-skin='terminal'] a {
  color: var(--blue);
}
[data-skin='terminal'] a:hover {
  color: var(--pos);
}
/* Numbers / addresses / hashes in mono with tabular figures. */
[data-skin='terminal'] .num,
[data-skin='terminal'] .stat-value,
[data-skin='terminal'] .summary-item .value,
[data-skin='terminal'] .range-bar-labels,
[data-skin='terminal'] .range-bar-marker-label,
[data-skin='terminal'] .session-address,
[data-skin='terminal'] .app-version,
[data-skin='terminal'] .last-updated,
[data-skin='terminal'] .pill,
[data-skin='terminal'] .tx-table td,
[data-skin='terminal'] .risk-table td:not(:first-child),
[data-skin='terminal'] .rkpi-value,
[data-skin='terminal'] .delta-value,
[data-skin='terminal'] .mon-stat .value {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Layout: sidebar (skin-layout.js builds #skin-sidebar and wraps the rest of
   the page into #skin-main).
   ========================================================================= */
[data-skin='terminal'] body {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

#skin-sidebar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 22px 16px;
  border-right: 1px solid var(--border);
  background: var(--bg2);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 20;
}
#skin-main {
  min-width: 0;
  padding-bottom: 48px;
}
/* The phone bottom tab bar + More sheet exist in the DOM on every viewport
   (skin-layout.js builds them once) but are PHONE-ONLY UI: hidden by default,
   or on desktop they'd render as stray body-grid items below the layout. */
#skin-tabbar,
#skin-tabsheet {
  display: none;
}

.sb-logo {
  display: flex;
  align-items: center;
  /* Same 8px left inset as .sb-label — the mark's left edge lines up with
     the "Portfolio" text below it (viewBox is cropped to the drawing). */
  padding: 4px 8px 20px;
}
/* The mark spans the full sidebar width (the SVG's viewBox keeps the aspect
   ratio, so it just scales up from the mock's fixed 156px). */
.sb-logo svg {
  width: 100%;
  height: auto;
}
.sb-label {
  font-size: 10.5px;
  color: var(--muted4);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 0 8px 8px;
}
.sb-bottom {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sb-bottom .app-version {
  font-size: 10.5px;
  color: var(--muted3);
  padding: 0 8px;
  text-decoration: none;
}

/* Tabs become vertical nav links. */
[data-skin='terminal'] .tabs {
  display: contents; /* the group was moved into the sidebar; the leftover nav wrapper disappears */
}
#skin-sidebar .tab-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: visible;
  flex: 0 0 auto;
}
#skin-sidebar .tab-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  transition: 0.12s;
}
#skin-sidebar .tab-btn:hover {
  background: var(--rowline);
  color: var(--text);
  transform: translateX(2px);
}
#skin-sidebar .tab-btn.active {
  background: linear-gradient(90deg, rgba(91, 141, 239, 0.16), rgba(62, 207, 142, 0.06));
  color: var(--text);
}
/* Иконки навигации — маски из инлайновых SVG в цвет текста (currentColor через
   background-color + mask), поэтому активное и приглушённое состояние
   наследуются сами. Раньше здесь стояли абстрактные глифы (◆ ◇ ◷ ◈ ⬡), по
   которым нельзя было угадать раздел, а у новых вкладок иконки не было вовсе.
   ::before, а не вставленный <span>: applyStaticI18n переписывает textContent
   при загрузке языка и стёр бы вложенный узел. */
#skin-sidebar .tab-btn::before,
.tb-item::before,
.ts-item::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: none;
  opacity: 0.9;
  background-color: currentColor;
  -webkit-mask: center / 16px 16px no-repeat;
  mask: center / 16px 16px no-repeat;
  /* Дефолт для вкладки без своей иконки — точка, а не пустое место. */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='3' fill='%23000'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='3' fill='%23000'/></svg>");
}
#skin-sidebar .tab-btn[data-tab='portfolio']::before,
.tb-item[data-tab='portfolio']::before,
.ts-item[data-tab='portfolio']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='7' width='19' height='13.5' rx='2.5'/><path d='M8.5 7V5.5A2 2 0 0 1 10.5 3.5h3A2 2 0 0 1 15.5 5.5V7'/><path d='M2.5 12.5h19'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='7' width='19' height='13.5' rx='2.5'/><path d='M8.5 7V5.5A2 2 0 0 1 10.5 3.5h3A2 2 0 0 1 15.5 5.5V7'/><path d='M2.5 12.5h19'/></svg>");
}
#skin-sidebar .tab-btn[data-tab='open']::before,
.tb-item[data-tab='open']::before,
.ts-item[data-tab='open']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.8 2.6 7.4 12 12l9.4-4.6z'/><path d='M2.6 12.4 12 17l9.4-4.6'/><path d='M2.6 17 12 21.6l9.4-4.6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.8 2.6 7.4 12 12l9.4-4.6z'/><path d='M2.6 12.4 12 17l9.4-4.6'/><path d='M2.6 17 12 21.6l9.4-4.6'/></svg>");
}
#skin-sidebar .tab-btn[data-tab='actions']::before,
.tb-item[data-tab='actions']::before,
.ts-item[data-tab='actions']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M13.5 2.5 4.5 13.8h6.2l-1.2 7.7 9.3-11.6h-6.4z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M13.5 2.5 4.5 13.8h6.2l-1.2 7.7 9.3-11.6h-6.4z'/></svg>");
}
#skin-sidebar .tab-btn[data-tab='closed']::before,
.tb-item[data-tab='closed']::before,
.ts-item[data-tab='closed']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.6' y='4' width='18.8' height='4.6' rx='1.4'/><path d='M4.4 8.6V19a1.6 1.6 0 0 0 1.6 1.6h12a1.6 1.6 0 0 0 1.6-1.6V8.6'/><path d='M9.8 12.6h4.4'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.6' y='4' width='18.8' height='4.6' rx='1.4'/><path d='M4.4 8.6V19a1.6 1.6 0 0 0 1.6 1.6h12a1.6 1.6 0 0 0 1.6-1.6V8.6'/><path d='M9.8 12.6h4.4'/></svg>");
}
#skin-sidebar .tab-btn[data-tab='analytics']::before,
.tb-item[data-tab='analytics']::before,
.ts-item[data-tab='analytics']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20.5V11'/><path d='M9.4 20.5V4.5'/><path d='M14.7 20.5v-6.5'/><path d='M20 20.5V8'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20.5V11'/><path d='M9.4 20.5V4.5'/><path d='M14.7 20.5v-6.5'/><path d='M20 20.5V8'/></svg>");
}
#skin-sidebar .tab-btn[data-tab='forecast']::before,
.tb-item[data-tab='forecast']::before,
.ts-item[data-tab='forecast']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17.5 9 11l4 3.6 8-8.6'/><path d='M15.6 5.5H21v5.4'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17.5 9 11l4 3.6 8-8.6'/><path d='M15.6 5.5H21v5.4'/></svg>");
}
#skin-sidebar .tab-btn[data-tab='risk']::before,
.tb-item[data-tab='risk']::before,
.ts-item[data-tab='risk']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.4 22 20.2H2z'/><path d='M12 9.6v4.6'/><path d='M12 17.6h.01'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.4 22 20.2H2z'/><path d='M12 9.6v4.6'/><path d='M12 17.6h.01'/></svg>");
}
#skin-sidebar .tab-btn[data-tab='wallets']::before,
.tb-item[data-tab='wallets']::before,
.ts-item[data-tab='wallets']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7.5A2.5 2.5 0 0 1 5.5 5H18a2 2 0 0 1 2 2v1'/><rect x='3' y='7.5' width='18' height='12' rx='2.4'/><path d='M16.4 13.5h.01'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7.5A2.5 2.5 0 0 1 5.5 5H18a2 2 0 0 1 2 2v1'/><rect x='3' y='7.5' width='18' height='12' rx='2.4'/><path d='M16.4 13.5h.01'/></svg>");
}
#skin-sidebar .tab-btn[data-tab='notifications']::before,
.tb-item[data-tab='notifications']::before,
.ts-item[data-tab='notifications']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M18 9.4a6 6 0 1 0-12 0c0 5.2-2 6.6-2 6.6h16s-2-1.4-2-6.6z'/><path d='M13.7 20a2 2 0 0 1-3.4 0'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M18 9.4a6 6 0 1 0-12 0c0 5.2-2 6.6-2 6.6h16s-2-1.4-2-6.6z'/><path d='M13.7 20a2 2 0 0 1-3.4 0'/></svg>");
}
#skin-sidebar .tab-btn[data-tab='swap']::before,
.tb-item[data-tab='swap']::before,
.ts-item[data-tab='swap']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5h14'/><path d='M14 5l3.5 3.5L14 12'/><path d='M20.5 15.5h-14'/><path d='M10 12 6.5 15.5 10 19'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5h14'/><path d='M14 5l3.5 3.5L14 12'/><path d='M20.5 15.5h-14'/><path d='M10 12 6.5 15.5 10 19'/></svg>");
}
#skin-sidebar .tab-btn[data-tab='scanner']::before,
.tb-item[data-tab='scanner']::before,
.ts-item[data-tab='scanner']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='4'/><path d='M12 12 18.4 5.6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='4'/><path d='M12 12 18.4 5.6'/></svg>");
}
#skin-sidebar .tab-btn[data-tab='monitoring']::before,
.tb-item[data-tab='monitoring']::before,
.ts-item[data-tab='monitoring']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2.6 12.5h4.6l2.2-5.6 3.6 11 2.2-5.4h6.2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2.6 12.5h4.6l2.2-5.6 3.6 11 2.2-5.4h6.2'/></svg>");
}
#skin-sidebar .tab-btn[data-tab='dr4upn1r']::before,
.tb-item[data-tab='dr4upn1r']::before,
.ts-item[data-tab='dr4upn1r']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.6 20.4 7.3v9.4L12 21.4 3.6 16.7V7.3z'/><circle cx='12' cy='12' r='2.4'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.6 20.4 7.3v9.4L12 21.4 3.6 16.7V7.3z'/><circle cx='12' cy='12' r='2.4'/></svg>");
}
#skin-sidebar .tab-btn[data-tab='docs']::before,
.tb-item[data-tab='docs']::before,
.ts-item[data-tab='docs']::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5.2h6a3 3 0 0 1 3 3v11a2.4 2.4 0 0 0-2.4-2.4H3z'/><path d='M21 5.2h-6a3 3 0 0 0-3 3v11a2.4 2.4 0 0 1 2.4-2.4H21z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5.2h6a3 3 0 0 1 3 3v11a2.4 2.4 0 0 0-2.4-2.4H3z'/><path d='M21 5.2h-6a3 3 0 0 0-3 3v11a2.4 2.4 0 0 1 2.4-2.4H21z'/></svg>");
}

/* PWA mobile shell (mock 'W3D Mobile PWA'): hidden on desktop, the ≤900px
   media block swaps it in for the sidebar strip. */
#skin-mobilehead,
#skin-ptr,
.pr-swipe-actions {
  display: none;
}

/* Bottom action sheet (sheet.js) — the mock's confirm surface. */
#action-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
}
#action-sheet .as-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim, rgba(5, 7, 10, 0.72));
  animation: t-fadeIn 0.2s ease both;
}
#action-sheet .as-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 560px;
  margin: 0 auto;
  background: var(--card2, var(--card));
  border: 1px solid var(--border2);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-lg, 0 24px 80px rgba(0, 0, 0, 0.55));
  animation: t-sheetUp 0.3s cubic-bezier(0.3, 1.1, 0.4, 1) both;
}
@keyframes t-sheetUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
#action-sheet .as-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border3);
  margin: 0 auto 14px;
}
#action-sheet .as-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 3px;
}
#action-sheet .as-sub {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 14px;
}
#action-sheet .as-rows {
  background: var(--subcard);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px 14px;
  margin-bottom: 12px;
}
#action-sheet .as-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 12px;
}
#action-sheet .as-row + .as-row {
  border-top: 1px solid var(--rowline);
}
#action-sheet .as-k {
  color: var(--muted);
}
#action-sheet .as-v {
  font-weight: 600;
  text-align: right;
}
#action-sheet .as-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}
#action-sheet .as-input input {
  width: 90px;
  background: var(--input);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  padding: 7px 10px;
  text-align: right;
}
#action-sheet .as-warn {
  margin: 0 0 12px;
  font-size: 11px;
  color: var(--amber);
  line-height: 1.5;
}
#action-sheet .as-cta {
  width: 100%;
  border: 0;
  background: var(--pos);
  color: var(--bg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 15px;
  border-radius: 14px;
  cursor: pointer;
}
#action-sheet .as-cta-danger {
  background: var(--neg);
  color: #fff;
}
#action-sheet .as-cancel {
  width: 100%;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 12px;
  border-radius: 14px;
  cursor: pointer;
}

/* Admin-only entries get the brand-green accent (as in the mock). */
#skin-sidebar #dr4-tab,
#skin-sidebar #tab-monitoring {
  color: var(--pos);
}
#skin-sidebar #dr4-tab.active,
#skin-sidebar #tab-monitoring.active {
  background: linear-gradient(90deg, rgba(62, 207, 142, 0.16), rgba(91, 141, 239, 0.05));
  color: var(--text);
}
#skin-sidebar .tab-btn[hidden] {
  display: none;
}

/* Profile card at the sidebar bottom, menu opens upward. */
#skin-sidebar .profile {
  position: relative;
  width: 100%;
}
#skin-sidebar .profile-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 6px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
}
#skin-sidebar .profile-btn:hover {
  background: var(--rowline);
}
#skin-sidebar .profile-btn::before {
  content: '0x';
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pos);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--bg);
  flex: none;
}
#skin-sidebar .session-address {
  font-size: 12px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Mock's trailing glyph is "⋯", not a caret. The span text stays in the DOM
   (classic uses it) — swap it via a pseudo-element. */
#skin-sidebar .profile-caret {
  color: var(--muted3);
  font-size: 0;
}
#skin-sidebar .profile-caret::before {
  content: '⋯';
  font-size: 11px;
}
#skin-sidebar .profile-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  top: auto;
  background: var(--input);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--shadow-md);
  z-index: 40;
}
/* Тот же гард, что у .tab-btn[hidden]: ID-селектор ниже перебивает UA-[hidden],
   и админ-пункты меню иначе видны не-админам. */
#skin-sidebar .profile-menu-item[hidden] {
  display: none;
}
#skin-sidebar .profile-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
#skin-sidebar .profile-menu-item:hover {
  background: var(--rowline);
}
/* Menu-item icons live in ::before keyed by data-action — applyStaticI18n()
   rewrites the buttons' textContent, which would wipe an inline icon span
   (same pitfall as the sidebar tab icons). */
#skin-sidebar .profile-menu-item::before {
  width: 14px;
  flex: none;
  text-align: center;
  opacity: 0.9;
}
#skin-sidebar .profile-menu-item[data-action='settings']::before {
  content: '⚙';
}
#skin-sidebar .profile-menu-item[data-action='passkey']::before {
  content: '⛶';
}
#skin-sidebar .profile-menu-item[data-action='pair']::before {
  content: '⧉';
}
/* Installation-wide settings (admin) — distinct from the personal ⚙. */
#skin-sidebar .profile-menu-item[data-action='platform']::before {
  content: '⌂';
}
#skin-sidebar .profile-menu-item[data-action='access']::before {
  content: '⛊';
}
#skin-sidebar .profile-menu-item[data-action='logout']::before {
  content: '⏻';
}
/* Disconnect: red, separated from the rest by the mock's divider line. */
#skin-sidebar .profile-menu-item[data-action='logout'] {
  color: var(--neg);
  border-top: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  margin-top: 5px;
  padding-top: 9px;
}

/* ============================================================================
   Top bar + hero + KPI strip (restyled header). Mock layout: ONE bottom-aligned
   row — hero (label + big number) left, controls (net filter / theme / refresh)
   right — with the 5-card KPI strip as a second full-width row. #summary holds
   both hero and KPIs, so it becomes display:contents and the pieces are placed
   on the header grid directly.
   ========================================================================= */
[data-skin='terminal'] header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* По центру, а не по нижнему краю: под главной цифрой появилась строка
     разбивки капитала (LP · кошельки · с учётом Aave), и прижатые к низу
     контролы уехали на 17px ниже неё. Центр колонки совпадает с центром
     цифры с точностью до пары пикселей. */
  align-items: center;
  gap: 20px 24px;
  border-bottom: 0;
  padding: 26px 34px 0;
}
[data-skin='terminal'] header .logo {
  display: none; /* the brand lives in the sidebar under this skin */
}
[data-skin='terminal'] .header-actions {
  grid-column: 2;
  grid-row: 1;
  gap: 10px;
}
[data-skin='terminal'] #refresh-btn {
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 9px;
}
[data-skin='terminal'] #refresh-btn::before {
  content: '↻ ';
}
[data-skin='terminal'] .network-filter {
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}
[data-skin='terminal'] .net-filter-btn {
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 13px;
  border-radius: 7px;
  color: var(--muted);
}
[data-skin='terminal'] .net-filter-btn.active {
  background: var(--pos);
  color: var(--bg);
}

/* Summary → hero (big total + PnL chip + realized history) and the 5-card KPI
   strip (renderTerminalSummary in positions.js builds this DOM). The wrapper
   dissolves so hero and KPIs sit on the header grid. */
[data-skin='terminal'] .summary {
  display: contents;
}
.summary-hero {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  animation: t-fadeUp 0.32s ease both;
}
.summary-hero .hero-label {
  font-size: 12px;
  color: var(--muted2);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.summary-hero .hero-row {
  display: flex;
  /* Центр, а не базовая линия: бейджи PnL — это блоки с вертикальным паддингом,
     и на базовой линии они «садятся» ниже оптического центра крупной цифры
     (замер: центр числа 68px, центр бейджа 77px). */
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.summary-hero .hero-value {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.summary-hero .hero-pnl {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  padding: 4px 10px;
  border-radius: 8px;
}
.summary-hero .hero-pnl.positive {
  background: rgba(62, 207, 142, 0.1);
}
.summary-hero .hero-pnl.negative {
  background: rgba(239, 91, 91, 0.1);
}
.summary-hero .hero-hist {
  font-size: 12px;
  color: var(--muted2);
}
.kpis {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.kpi-card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  animation: t-fadeUp 0.32s ease both;
}
.kpi-card:nth-child(2) {
  animation-delay: 0.05s;
}
.kpi-card:nth-child(3) {
  animation-delay: 0.1s;
}
.kpi-card:nth-child(4) {
  animation-delay: 0.15s;
}
.kpi-card:nth-child(5) {
  animation-delay: 0.2s;
}
.kpi-label {
  font-size: 11px;
  color: var(--muted2);
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}
.kpi-value {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.kpi-value.accent {
  color: var(--blue);
}
.kpi-sub {
  font-size: 10.5px;
  color: var(--muted3);
  margin-top: 4px;
}

/* KPI hover breakdowns: every hero KPI card opens a cell-wide popover on
   hover (click = touch toggle). While open the card raises its z-index —
   the animated position rows below have their own composited layers and
   painted over an un-raised popover. */
.kpi-card.kpi-hover {
  position: relative;
  cursor: pointer;
}
.kpi-card.kpi-hover:hover {
  border-color: var(--border2);
}
.kpi-card.kpi-pop-open {
  z-index: 60;
}
.kpi-caret {
  font-size: 9px;
  color: var(--muted3);
  margin-left: 2px;
}
.kpi-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0; /* cell-wide, per the design */
  background: var(--tip);
  border: 1px solid var(--border3);
  border-radius: 10px;
  padding: 10px 13px;
  box-shadow: var(--shadow-sm);
  z-index: 30;
  animation: t-fadeIn 0.12s ease both;
  cursor: default;
}
/* Invisible bridge over the 8px gap so moving the pointer from the card into
   the popover doesn't fire the card's mouseleave. */
.kpi-pop::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 0;
  right: 0;
  height: 9px;
}
.kpi-pop-list {
  max-height: 240px;
  overflow-y: auto;
}
.kpi-pop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 0;
}
.kpi-pop-lbl {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kpi-pop-lbl .num {
  color: var(--muted3);
  font-size: 10px;
}
.kpi-pop-row b {
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.kpi-pop-row b.dim {
  color: var(--muted3);
  font-weight: 400;
}
.kpi-pop-row b.amber {
  color: var(--amber);
}
.kpi-pop-vals {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.kpi-pop-x {
  color: var(--muted4);
  font-size: 10px;
}
/* Column-aligned popover table (In range: pair | width | TIR | age). ONE grid
   container with display:contents rows — per-row grids would size their auto
   columns independently and nothing would line up. */
.kpi-pop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  column-gap: 10px;
  row-gap: 3px;
  align-items: baseline;
}
.kpi-pop-grid-row,
.kpi-pop-ghead {
  display: contents;
}
/* Label muted, values INHERIT (no hard color on <b> — the .positive/.warning
   status classes set by the TIR patch must win; a same-specificity color rule
   in this later-loaded file silently overrode them). */
.kpi-pop-grid {
  color: var(--muted);
}
.kpi-pop-grid-row .kpi-pop-lbl {
  font-size: 11px;
}
.kpi-pop-grid-row b {
  font-size: 11.5px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.kpi-pop-grid-row b.dim {
  color: var(--muted3);
  font-weight: 400;
}
/* Приглушённая величина в цвете колонки (нормировка на $1k) — раньше она жила
   в скобках рядом с суммой и гасилась .kpi-pop-dim. */
.kpi-pop-grid-row b.soft {
  opacity: 0.6;
  font-weight: 400;
}
.kpi-pop-grid-row b.amber {
  color: var(--amber);
}
.kpi-pop-ghead span {
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted3);
  text-align: right;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--rowline);
  margin-bottom: 2px;
}
.kpi-pop-ghead span:first-child {
  text-align: left;
}
/* Пять колонок (комиссии: пара | доступные | 24ч | на $1k | APR 24ч) не влезают
   в ширину плашки KPI — этот поповер шире её и растёт вправо. */
.kpi-pop.kpi-pop-wide {
  right: auto;
  width: max-content;
  min-width: 100%;
  max-width: min(470px, 94vw);
}
.kpi-pop-cols5 {
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  column-gap: 9px;
}
/* Пять колонок помещаются и на 390px (замерено), но у аномально длинных сумм
   запаса нет — тогда таблица скроллится внутри себя, а не ломает раскладку. */
.kpi-pop-list {
  overflow-x: auto;
}
/* Итоговая строка таблицы (стоит первой, под шапкой): выделена весом и
   подчёркиванием — как и шапка, линия рисуется на ЯЧЕЙКАХ, потому что сама
   строка это display:contents и границ не имеет. */
.kpi-pop-total > * {
  border-bottom: 1px solid var(--rowline);
  padding-bottom: 4px;
  margin-bottom: 3px;
}
.kpi-pop-total b {
  font-weight: 700;
}
.kpi-pop-total .kpi-pop-lbl {
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted2);
}
.kpi-pop-sep {
  border-top: 1px solid var(--rowline);
  margin: 6px 0;
}
.kpi-pop-hint {
  border-top: 1px solid var(--rowline);
  margin-top: 8px;
  padding-top: 7px;
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--muted3);
}
.kpi-pop-hint:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

/* The hero label already says "updated N min ago" — hide the classic line. */
[data-skin='terminal'] .last-updated {
  display: none;
}
[data-skin='terminal'] #skin-theme-btn {
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 13px;
  border-radius: 9px;
  cursor: pointer;
}

/* Section header: "Open positions · 8 positions · $181,790" + needs-attention. */
.view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  /* Нижний отступ обязателен: без него первый блок раздела (бейджи портфеля,
     карточки прогноза) прижимался к заголовку вплотную. */
  margin: 24px 34px 14px;
}
.view-head[hidden] {
  display: none;
}
.vh-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.vh-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.vh-meta {
  font-size: 12px;
  color: var(--muted2);
}
.vh-attn {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--amber);
}
.vh-attn[hidden] {
  display: none;
}
.vh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}
.vh-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Loupe: reveals the search/sort/group toolbar hidden below the header. */
.vh-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: inherit;
  font-size: 15px;
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  transition: 0.12s;
}
.vh-search:hover {
  color: var(--text);
  border-color: var(--border3);
}
.vh-search.active {
  color: var(--text);
  border-color: var(--pos);
}
/* A search query is filtering the list — visible even while collapsed. */
.vh-search.has-query::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pos);
  border: 2px solid var(--bg);
}
.vh-search[hidden] {
  display: none;
}

/* Sidebar nav badges + two-line profile. */
/* Count badge pinned to the button's right edge (absolute, so every tab's
   digits sit on the same vertical line no matter how long the label is —
   flex margin-left:auto drifted when a long RU label wrapped). */
#skin-sidebar .tab-btn {
  position: relative;
  padding-right: 44px;
}
#skin-sidebar .tab-badge {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10.5px;
  background: var(--border);
  color: var(--muted);
  padding: 1px 7px;
  border-radius: 20px;
}
/* Admin-only nav entries + profile actions: green, like the ADMIN chip (dr4upn1r
   and Monitoring tabs, Platform settings / Access management). Hover and active
   keep the accent — only the background changes. */
#skin-sidebar .tab-btn.admin-item,
#skin-sidebar .tab-btn.admin-item:hover,
#skin-sidebar .tab-btn.admin-item.active,
#skin-sidebar .profile-menu-item.admin-item,
#skin-sidebar .profile-menu-item.admin-item:hover {
  color: var(--pos);
}
#skin-sidebar .tab-btn.admin-item .tab-badge {
  color: var(--pos);
  background: rgba(62, 207, 142, 0.14);
}

#skin-sidebar .profile-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}
#skin-sidebar .profile-status {
  font-size: 10.5px;
  color: var(--pos);
  display: flex;
  align-items: center;
  gap: 4px;
}
@keyframes t-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
#skin-sidebar .profile-dot {
  font-size: 9px;
  animation: t-blink 2.4s ease-in-out infinite;
}
#skin-sidebar .profile-admin {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--pos);
  background: rgba(62, 207, 142, 0.14);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}
#skin-sidebar .profile-admin[hidden] {
  display: none;
}
/* Ролевые варианты бейджа: operator — янтарный, pro — синий (admin — зелёный по умолчанию). */
#skin-sidebar .profile-admin[data-role='operator'],
.ts-adminchip[data-role='operator'] {
  color: var(--amber);
  background: rgba(255, 179, 71, 0.14);
}
#skin-sidebar .profile-admin[data-role='pro'],
.ts-adminchip[data-role='pro'] {
  color: var(--blue);
  background: rgba(90, 169, 255, 0.14);
}

/* Content is fluid: full viewport width minus the sidebar, with the mock's
   34px gutters (the mock's 1220px cap made wide screens mostly empty).
   Dialog widths (settings 640px / position overlay 880px) stay capped. */
[data-skin='terminal'] .positions,
[data-skin='terminal'] .closed-positions {
  padding: 20px 34px 24px;
}
[data-skin='terminal'] .positions-toolbar {
  /* Нижний отступ нужен, когда тулбар раскрыт: под ним сразу идут бейджи
     портфеля, и без зазора строка поиска ложилась прямо на них. В свёрнутом
     состоянии он обнуляется вместе с высотой — иначе остался бы пустой провал. */
  margin: 16px 34px 12px;
  /* Collapsible behind the header loupe (skin-layout.js toggles .tb-collapsed). */
  overflow: hidden;
  max-height: 132px; /* fits the wrapped two-row layout on narrow screens */
  transition:
    max-height 0.28s ease,
    opacity 0.22s ease,
    transform 0.28s ease,
    margin-top 0.28s ease,
    margin-bottom 0.28s ease;
}
[data-skin='terminal'] .positions-toolbar.tb-collapsed {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none;
}
[data-skin='terminal'] .tab-panel:not(.positions):not(.closed-positions) {
  padding-left: 34px;
  padding-right: 34px;
}

/* ============================================================================
   Controls: inputs / selects / generic buttons.
   ========================================================================= */
[data-skin='terminal'] .pos-search,
[data-skin='terminal'] .pos-sort,
[data-skin='terminal'] input[type='text'],
[data-skin='terminal'] input[type='number'],
[data-skin='terminal'] input[type='password'],
[data-skin='terminal'] input[type='search'],
[data-skin='terminal'] input[type='time'],
[data-skin='terminal'] select {
  background: var(--input);
  border: 1px solid var(--border2);
  color: var(--text);
  border-radius: 8px;
  outline: none;
}
[data-skin='terminal'] input:focus,
[data-skin='terminal'] select:focus {
  border-color: var(--pos);
}
[data-skin='terminal'] input[type='range'] {
  accent-color: var(--pos);
}
/* Positions toolbar (search + sort + group) — mono, roomier padding, custom caret so the
   sort dropdown matches the terminal look instead of the native OS control. */
[data-skin='terminal'] .pos-search,
[data-skin='terminal'] .pos-sort {
  padding: 9px 12px;
  font-size: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  height: 36px;
}
[data-skin='terminal'] .pos-search::placeholder {
  color: var(--muted);
}
[data-skin='terminal'] .pos-sort {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239aa3ad' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
[data-skin='terminal'] .pos-sort option {
  background: var(--card);
  color: var(--text);
}
[data-skin='terminal'] .pos-group-toggle {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--muted);
  padding: 0 4px;
}
[data-skin='terminal'] button {
  font-family: inherit;
}
[data-skin='terminal'] button:active {
  transform: translateY(1px);
}
[data-skin='terminal'] .action-btn {
  border: 0;
  background: var(--pos);
  color: var(--bg);
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 8px;
  cursor: pointer;
}
[data-skin='terminal'] .action-btn-danger {
  background: transparent;
  border: 1px solid var(--border3);
  color: var(--neg);
  font-weight: 500;
}

/* ============================================================================
   Badges / chips.
   ========================================================================= */
[data-skin='terminal'] .network-badge,
[data-skin='terminal'] .fee-tier,
[data-skin='terminal'] .status-badge,
[data-skin='terminal'] .earnings-badge,
[data-skin='terminal'] .chain-tag {
  border-radius: 5px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 10.5px;
  padding: 1px 7px;
}
/* Mock's network coding: Solana green, Avalanche red, Arbitrum blue. */
[data-skin='terminal'] .network-badge.solana {
  background: rgba(62, 207, 142, 0.14);
  color: var(--chip-pos);
}
[data-skin='terminal'] .network-badge.avalanche {
  background: rgba(239, 91, 91, 0.14);
  color: var(--chip-neg);
}
[data-skin='terminal'] .network-badge.arbitrum {
  background: rgba(91, 141, 239, 0.14);
  color: var(--chip-blue);
}

[data-skin='terminal'] .network-badge.robinhood {
  background: rgba(0, 200, 5, 0.12);
  color: #00c805;
}
[data-skin='terminal'] .status-badge.in-range {
  background: rgba(62, 207, 142, 0.12);
  color: var(--pos);
}
[data-skin='terminal'] .status-badge.out-of-range {
  background: rgba(232, 179, 57, 0.12);
  color: var(--amber);
}
[data-skin='terminal'] .fee-tier {
  background: var(--input);
  color: var(--muted3);
  font-family: 'IBM Plex Mono', monospace;
}

/* ============================================================================
   Cards (position cards keep their structure in Phase 0 contexts: closed grid,
   modal clone) — rounder, flatter, mock palette.
   ========================================================================= */
[data-skin='terminal'] .position-card {
  border-radius: 16px;
  background: var(--card);
  animation: t-fadeUp 0.3s ease both;
}
[data-skin='terminal'] .position-card:hover {
  border-color: var(--border3);
}
[data-skin='terminal'] .position-card.needs-attention {
  border-color: rgba(232, 179, 57, 0.45);
  box-shadow: inset 3px 0 0 0 var(--amber);
}
[data-skin='terminal'] .pair-label {
  font-size: 15px;
  font-weight: 600;
}
[data-skin='terminal'] .stat label {
  text-transform: none;
  letter-spacing: 0.2px;
  font-size: 10.5px;
  color: var(--muted2);
}
[data-skin='terminal'] .stat-value {
  font-size: 13px;
}

/* Range bar → thin 6px track with a round marker (mock). */
[data-skin='terminal'] .range-bar-track {
  height: 6px;
  border-radius: 6px;
  background: var(--track);
}
[data-skin='terminal'] .range-bar-track::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(91, 141, 239, 0.3), rgba(62, 207, 142, 0.3));
  opacity: 0.5;
}
[data-skin='terminal'] .range-bar-track.out-of-range::before {
  background: linear-gradient(90deg, rgba(232, 179, 57, 0.25), rgba(232, 179, 57, 0.05));
}
[data-skin='terminal'] .range-bar-track,
[data-skin='terminal'] .range-bar-track.out-of-range {
  background: var(--track);
}
[data-skin='terminal'] .range-bar-marker {
  top: -3px;
  bottom: auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pos);
  border: 2px solid var(--card);
  transform: translateX(-50%);
  box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.18);
}
[data-skin='terminal'] .range-bar-marker.out-of-range {
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(232, 179, 57, 0.18);
  animation: t-markerPulse 1.8s ease-in-out infinite;
}

/* ============================================================================
   Tables (risk / transactions / scanner / notifications…) → mock's .rtable.
   ========================================================================= */
[data-skin='terminal'] .risk-table,
[data-skin='terminal'] .tx-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
}
[data-skin='terminal'] .risk-table th,
[data-skin='terminal'] .tx-table th {
  font-size: 10.5px;
  color: var(--muted3);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
[data-skin='terminal'] .risk-table td,
[data-skin='terminal'] .tx-table td {
  font-size: 12.5px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rowline);
}
[data-skin='terminal'] .risk-table tr:last-child td,
[data-skin='terminal'] .tx-table tr:last-child td {
  border-bottom: 0;
}

/* ============================================================================
   Modals (position overlay + settings) → scrim blur, big radius, scaleIn.
   ========================================================================= */
[data-skin='terminal'] .position-modal,
[data-skin='terminal'] .settings-modal,
[data-skin='terminal'] .login-overlay {
  background: var(--scrim);
  backdrop-filter: blur(6px);
  animation: t-fadeIn 0.18s ease both;
}
[data-skin='terminal'] .modal-content .position-card,
[data-skin='terminal'] .settings-card,
[data-skin='terminal'] .login-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  animation: t-scaleIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
[data-skin='terminal'] .modal-close {
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
[data-skin='terminal'] .wallet-btn {
  background: var(--input);
  border: 1px solid var(--border2);
  color: var(--text);
  border-radius: 9px;
  font-weight: 500;
}
[data-skin='terminal'] .wallet-btn:hover {
  border-color: var(--pos);
}

/* ============================================================================
   Toasts → bottom-center pill (mock).
   ========================================================================= */
[data-skin='terminal'] .toasts {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: 24px;
  align-items: center;
}
[data-skin='terminal'] .toast {
  background: var(--input);
  color: var(--pos);
  border: 1px solid rgba(62, 207, 142, 0.4);
  font-size: 12.5px;
  font-weight: 500;
  padding: 10px 20px;
  box-shadow: var(--shadow-sm);
  animation: t-toastUp 0.25s ease both;
}
[data-skin='terminal'] .toast-error {
  color: var(--neg);
  border-color: rgba(239, 91, 91, 0.4);
}

/* ============================================================================
   Positions as rows (Phase 1; positions.js adds .pos-rows to the container
   and renders #position-row-template clones + a .pos-head).
   ========================================================================= */
[data-skin='terminal'] .positions.pos-rows:not([hidden]),
[data-skin='terminal'] .closed-positions.pos-rows:not([hidden]) {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  margin: 20px 34px 24px;
  animation: t-fadeUp 0.28s ease both;
}
/* Grouped mode keeps the outer frame per group instead. */
[data-skin='terminal'] .positions.pos-rows.grouped:not([hidden]),
[data-skin='terminal'] .closed-positions.pos-rows.grouped:not([hidden]) {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
[data-skin='terminal'] .pos-rows .pos-group-grid {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
}
/* Collapse a network group on header click. The rule above (display:block) has the same
   specificity as the classic `.pos-group.collapsed .pos-group-grid` and wins by order, so
   restate the collapse here with higher specificity to actually hide the grid. */
[data-skin='terminal'] .pos-rows .pos-group.collapsed .pos-group-grid {
  display: none;
}

.pos-head,
.pos-row {
  display: grid;
  grid-template-columns: 1.9fr 2fr 0.9fr 0.75fr 0.6fr 0.9fr 0.75fr 28px;
  gap: 14px;
  align-items: center;
  padding: 12px 20px;
}
.pos-head .ph-sort {
  cursor: pointer;
  user-select: none;
}
.pos-head .ph-sort[aria-sort]::after {
  content: ' ▲';
  font-size: 0.75em;
  opacity: 0.65;
}
.pos-head .ph-sort[aria-sort='descending']::after {
  content: ' ▼';
}
.pos-head {
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--muted3);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.pos-head .r,
.pos-row .r {
  text-align: right;
}
.pos-row-wrap {
  border-bottom: 1px solid var(--rowline);
  animation: t-fadeUp 0.3s ease both;
}
.pos-row-wrap:last-child {
  border-bottom: 0;
}
.pos-row {
  padding: 15px 20px;
  cursor: pointer;
  transition: 0.12s;
}
.pos-row:hover,
.pos-row.expanded {
  background: var(--hover);
}

/* Pair cell */
.pos-row .pr-pair {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.pos-row .token-icon {
  width: 26px;
  height: 26px;
  border: 2px solid var(--card);
}
.pos-row .token-mono {
  font-size: 9px;
}
.pos-row .pair-label {
  font-size: 14px;
  font-weight: 600;
}
/* Имя пары + бейджи состояния (⇄ N, «ребаланс прерван») одной строкой: в
   meta-строке ниже они распирали ячейку и ломали сетку колонок. */
.pos-row .pr-pair-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
}
.pos-row .pr-pair-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
}

/* Range cell */
.pos-row .pr-range {
  min-width: 0;
}
.pos-row .pr-range-labels {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 10.5px;
  color: var(--muted3);
  margin-bottom: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pos-row .pr-status {
  white-space: nowrap;
  color: var(--pos);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pos-row .pr-status.out {
  color: var(--amber);
}
.pos-row .range-bar {
  margin: 0;
  padding: 0;
}
.pos-row .range-bar-marker-label {
  display: none; /* the "now …" line below carries the price in this layout */
}
.pos-row .range-bar-labels {
  display: none;
}
.pos-row .pr-now {
  font-size: 10px;
  color: var(--muted2);
  margin-top: 5px;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.pos-row .pr-value {
  font-size: 14px;
  font-weight: 600;
}
.pos-row .pr-fees {
  font-size: 12.5px;
  color: var(--amber);
  font-weight: 700;
}
.pos-row .pr-age {
  font-size: 12.5px;
  color: var(--muted2);
  white-space: nowrap;
}
.pos-row .pr-pnl-pill {
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 7px;
}
.pos-row .pr-pnl-pill.positive {
  background: rgba(62, 207, 142, 0.1);
}
.pos-row .pr-pnl-pill.negative {
  background: rgba(239, 91, 91, 0.1);
}
.pos-row .pr-apr {
  font-size: 13px;
}
.pos-row .pr-value,
.pos-row .pr-fees,
.pos-row .pr-age,
.pos-row .pr-pnl-pill,
.pos-row .pr-apr {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.pos-row .card-gear {
  position: static;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted3);
  cursor: pointer;
  font-size: 13px;
}
.pos-row .card-gear:hover {
  background: var(--rowline);
  color: var(--text);
}

/* Expanded detail */
.pos-row-expand {
  padding: 4px 20px 18px;
  background: var(--subcard);
  animation: t-fadeUp 0.22s ease both;
}
.pos-row-expand[hidden] {
  display: none;
}
/* Метрики / графики. Ширина колонки графиков ФИКСИРОВАНА (--pre-charts-w) и не
   зависит от числа кнопок: раньше её задавала строка действий (max-content), и
   у позиции с двумя кнопками спарклайны заметно сжимались, а у позиции с
   четырьмя — растягивались. Метрики забирают весь остаток (1fr). */
.pre-grid {
  display: grid;
  /* Ряд действий по-русски длиннее английского («Закрыть позицию» вместо
     «Close»), и при 520px четвёртая кнопка переносилась на вторую строку.
     Ограничение по vw не даёт колонке съесть метрики на узких экранах —
     ширина по-прежнему зависит только от вьюпорта, а не от числа кнопок. */
  --pre-charts-w: min(580px, 48vw);
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--pre-charts-w));
  /* Межколоночный отступ 22px, межстрочный маленький: вторая строка — это
     кнопки под графиками, им не нужен воздух колонок. */
  gap: 8px 22px;
  align-items: start;
}
/* Метрики: 4 колонки, когда места хватает, иначе 3 — жёсткий repeat(4) при узкой
   левой колонке (у позиции с четырьмя кнопками правая колонка шире) заставлял
   самое длинное значение переноситься на две строки.
   span 2: метрики занимают ОБА ряда грида — иначе высокий блок метрик растягивал
   первый ряд, и между графиками (прижаты к верху) и кнопками (второй ряд)
   появлялся зазор высотой в «лишние» строки метрик. */
.pre-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 18px;
  /* Оба ряда: второй ряд правой колонки — кнопки, и без span 2 высокий блок
     метрик растягивал бы первый ряд, оставляя зазор между графиками и ими. */
  grid-row: span 2;
}
.pre-fact label {
  display: block;
  font-size: 10.5px;
  color: var(--muted2);
  margin-bottom: 4px;
}
.pre-fact .pre-val {
  font-size: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
/* Явная точка открытия оверлея над мини-графиками */
.pre-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.pre-hint {
  font-size: 10.5px;
  color: var(--muted3);
}
.pre-open {
  font-size: 11.5px;
  padding: 5px 12px;
  white-space: nowrap;
}
.pre-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  /* Ширину задаёт колонка грида (--pre-charts-w), а не содержимое строки
     действий: min-width: 0 не даёт спарклайнам распирать колонку. */
  min-width: 0;
}
.pre-chart {
  cursor: zoom-in;
  border-radius: 8px;
  padding: 4px 5px;
  margin: -4px -5px;
  animation: t-fadeUp 0.28s ease both;
}
.pre-chart:hover {
  background: var(--hover2);
}
.pre-chart-head {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 10px;
  color: var(--muted2);
  margin-bottom: 4px;
}
.pre-chart-head .pre-last {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.pre-chart svg {
  width: 100%;
  height: 34px;
  display: block;
}
/* Действия — во второй колонке ПОД графиками и по их левому краю. Ширину
   колонки они больше НЕ задают (её держит --pre-charts-w у .pre-grid), поэтому
   спарклайны одинаковы у позиции с двумя кнопками и с четырьмя; не влезающие
   кнопки переносятся на следующую строку. */
.pre-actions {
  grid-column: 2;
  min-width: 0;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  /* Обнуляем отступ классической .card-actions (14px): здесь расстояние до
     графиков задаёт row-gap грида, иначе кнопки уезжают вниз. */
  margin-top: 0;
}
.pre-actions > * {
  flex: 0 0 auto;
}
/* Компактнее классических кнопок: запас на длинные подписи и на сумму в
   «Сбор комиссий · $N», которая растёт вместе с накопленными комиссиями. */
.pre-actions .action-btn {
  padding-left: 11px;
  padding-right: 11px;
}
.pre-empty {
  font-size: 11px;
  color: var(--muted3);
  padding: 8px 0;
}

/* Empty state inside the rows frame. */
[data-skin='terminal'] .pos-rows .empty-state {
  padding: 40px 20px;
}

/* Row entrance stagger (mock's animDelay). */
.pos-row-wrap:nth-child(2) {
  animation-delay: 0.04s;
}
.pos-row-wrap:nth-child(3) {
  animation-delay: 0.08s;
}
.pos-row-wrap:nth-child(4) {
  animation-delay: 0.12s;
}
.pos-row-wrap:nth-child(5) {
  animation-delay: 0.16s;
}
.pos-row-wrap:nth-child(6) {
  animation-delay: 0.2s;
}
.pos-row-wrap:nth-child(7) {
  animation-delay: 0.24s;
}
.pos-row-wrap:nth-child(8) {
  animation-delay: 0.28s;
}
.pos-row-wrap:nth-child(n + 9) {
  animation-delay: 0.32s;
}

/* ============================================================================
   Chips (scanner / actions / closed summary rows) — the mock's outline pills.
   ========================================================================= */
[data-skin='terminal'] .chip {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: transparent;
  padding: 4px 11px;
  border-radius: 20px;
  white-space: nowrap;
}
[data-skin='terminal'] .chip b {
  font-weight: 600;
}
[data-skin='terminal'] .chip.chip-pass {
  color: var(--pos);
  border-color: rgba(62, 207, 142, 0.35);
}
[data-skin='terminal'] .chip.chip-watch {
  color: var(--amber);
  border-color: rgba(232, 179, 57, 0.35);
}
[data-skin='terminal'] .chip.chip-idle {
  color: var(--amber);
  border-color: rgba(232, 179, 57, 0.35);
}
[data-skin='terminal'] .chip.chip-pos-b {
  border-color: rgba(62, 207, 142, 0.35);
}
[data-skin='terminal'] .chip.chip-neg-b {
  border-color: rgba(239, 91, 91, 0.35);
}
[data-skin='terminal'] .chip.chip-amber-b {
  border-color: rgba(232, 179, 57, 0.35);
}
[data-skin='terminal'] .chip.chip-btn {
  cursor: pointer;
}
[data-skin='terminal'] .btn {
  border: 1px solid var(--border2);
  background: var(--input);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

/* ============================================================================
   Actions (terminal cards: sev tag + network chip + pair, impact box, CTA).
   ========================================================================= */
[data-skin='terminal'] .ac-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
[data-skin='terminal'] .ac-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: none; /* classic caps the list at 900px — terminal is fluid */
}
.ac-term {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  animation: t-fadeUp 0.3s ease both;
}
/* No left severity edge under the terminal skin (the classic .ac-card carries
   a 3px colored border-left; .ac-card.ac-act etc. outrank a bare .ac-term, so
   the reset needs the full three-class selector). Severity reads from the tag
   and the tinted background instead. */
[data-skin='terminal'] .ac-card.ac-term,
[data-skin='terminal'] .ac-card.ac-term.ac-act,
[data-skin='terminal'] .ac-card.ac-term.ac-watch,
[data-skin='terminal'] .ac-card.ac-term.ac-info {
  border-left: 1px solid var(--border);
}
.ac-term.ac-act {
  background: rgba(239, 91, 91, 0.07);
}
.ac-term.ac-watch {
  background: rgba(91, 141, 239, 0.06);
}
.ac-term.ac-info {
  background: rgba(139, 147, 163, 0.06);
}
.ac-term.ac-dismissed {
  opacity: 0.5;
}
.ac-term .ac-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ac-term .ac-sev {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 5px;
}
.ac-term .ac-sev-act {
  color: var(--neg);
  background: rgba(239, 91, 91, 0.12);
}
.ac-term .ac-sev-watch {
  color: var(--blue);
  background: rgba(91, 141, 239, 0.12);
}
.ac-term .ac-sev-info {
  color: var(--muted);
  background: rgba(139, 147, 163, 0.12);
}
.ac-term .ac-pair {
  font-size: 10.5px;
  color: var(--muted3);
}
.ac-term .ac-hide {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--muted3);
  cursor: pointer;
  font-size: 12px;
}
.ac-term .ac-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}
.ac-term .ac-reason {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
}
.ac-term .ac-impact {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--subcard);
  border: 1px solid var(--rowline);
  border-radius: 10px;
  padding: 8px 12px;
}
.ac-term .ac-impact-label {
  font-size: 10.5px;
  color: var(--muted2);
}
.ac-term .ac-effect {
  margin-left: auto;
  font-size: 16px;
  font-weight: 600;
}
.ac-term.ac-act .ac-effect {
  color: var(--neg);
}
.ac-term.ac-watch .ac-effect {
  color: var(--blue);
}
.ac-term.ac-info .ac-effect {
  color: var(--muted);
}
.ac-term .ac-btns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.ac-term .ac-snooze {
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 8px;
  cursor: pointer;
}
.ac-term .ac-rerange-hint {
  font-size: 11px;
  color: var(--muted2);
}

/* ============================================================================
   Closed positions: summary chips + one table with the Lifetime-PnL sparkline.
   ========================================================================= */
[data-skin='terminal'] .closed-positions.closed-terminal:not([hidden]) {
  display: block;
}
.closed-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.closed-terminal .table-wrap {
  overflow-x: auto;
}
[data-skin='terminal'] .closed-table th {
  white-space: normal;
  padding: 9px 10px;
  max-width: 110px;
}
[data-skin='terminal'] .closed-table td {
  padding: 12px 10px;
}
.closed-table .ct-pair {
  font-weight: 600;
}
.closed-table .ct-spark svg {
  width: 110px;
  height: 26px;
  display: block;
}
.closed-table .ct-row {
  cursor: pointer;
}
[data-skin='terminal'] .closed-table .ct-row:hover td {
  background: var(--hover);
}
.closed-table .ct-date {
  color: var(--muted);
  white-space: nowrap;
}
.closed-hint {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--muted3);
}

/* ============================================================================
   Scanner / Notifications restyles (structure already matches the mock).
   ========================================================================= */
[data-skin='terminal'] .scan-verdict {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
}
[data-skin='terminal'] .scan-verdict.scan-pass {
  color: var(--pos);
  background: rgba(62, 207, 142, 0.12);
}
[data-skin='terminal'] .scan-verdict.scan-watch {
  color: var(--amber);
  background: rgba(232, 179, 57, 0.12);
}
[data-skin='terminal'] .scan-verdict.scan-skip {
  color: var(--muted);
  background: rgba(139, 147, 163, 0.1);
}
[data-skin='terminal'] .scan-pair {
  font-weight: 600;
}
[data-skin='terminal'] .scan-lvr-pos {
  color: var(--pos);
}
[data-skin='terminal'] .scan-lvr-neg {
  color: var(--neg);
}
[data-skin='terminal'] .scan-rw {
  color: var(--muted2);
}
[data-skin='terminal'] .scan-rw-flip {
  color: var(--pos);
}
[data-skin='terminal'] .scan-row-skip {
  opacity: 0.55;
}
[data-skin='terminal'] .scan-net {
  font-size: 10px;
  color: var(--muted3);
}
[data-skin='terminal'] .scan-proto {
  font-size: 10px;
  color: var(--muted3);
  border-color: var(--border);
}
/* Переключатели фильтра протоколов: терминальные токены, компактнее классики. */
[data-skin='terminal'] .scan-proto-btn {
  font-size: 11px;
  color: var(--text);
  border-color: var(--border3);
  background: var(--input);
  padding: 3px 10px;
}
[data-skin='terminal'] .scan-proto-btn b {
  color: var(--muted3);
}
[data-skin='terminal'] .scan-proto-btn.off {
  opacity: 0.42;
  color: var(--muted3);
  border-style: dashed;
}
[data-skin='terminal'] .scan-proto-btn:hover {
  border-color: var(--muted3);
}
[data-skin='terminal'] .scan-proto-all {
  font-size: 11px;
  color: var(--muted);
  border-color: var(--border3);
  background: var(--input);
}

[data-skin='terminal'] .scan-hint {
  color: var(--muted3);
  font-size: 11px;
  line-height: 1.5;
}
[data-skin='terminal'] .scan-running {
  color: var(--amber);
}
/* Notifications: naked chips + table (no outer card), mock-style pills. */
[data-skin='terminal'] #notifications-panel > .risk-section {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 16px 0 0;
}
[data-skin='terminal'] .notify-chip {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: transparent;
  padding: 4px 11px;
  border-radius: 20px;
}
[data-skin='terminal'] .notify-chip.positive {
  color: var(--pos);
  border-color: rgba(62, 207, 142, 0.3);
  background: transparent;
}
[data-skin='terminal'] .notify-chip.negative {
  color: var(--neg);
  border-color: rgba(239, 91, 91, 0.3);
  background: transparent;
}
[data-skin='terminal'] .notify-filter-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
}
[data-skin='terminal'] .notify-filter-btn.active {
  background: var(--border);
  color: var(--text);
  border-color: var(--border3);
}
/* Type/outcome badges stay on one line (they wrapped inside narrow cells). */
[data-skin='terminal'] .tx-badge,
[data-skin='terminal'] .check-status {
  white-space: nowrap;
}
/* Watch-a-wallet form: the primary Add button is brand-green in the mock. */
[data-skin='terminal'] .watch-form button[type='submit'] {
  border: 0;
  background: var(--pos);
  color: var(--bg);
  font-weight: 600;
  border-radius: 9px;
  padding: 9px 18px;
  cursor: pointer;
}

/* ============================================================================
   Risk: exposure/Aave cards, side-by-side simulators, HF-vs-price SVG.
   ========================================================================= */
[data-skin='terminal'] .risk-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin: 16px 0 0;
  animation: t-fadeUp 0.28s ease both;
}
[data-skin='terminal'] .risk-section h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 14px;
}
[data-skin='terminal'] .risk-section .risk-table {
  border-radius: 12px;
}
[data-skin='terminal'] .aave-wallet {
  font-size: 11px;
  color: var(--muted3);
  font-weight: 400;
}
[data-skin='terminal'] .aave-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
[data-skin='terminal'] .aave-stat label {
  font-size: 10.5px;
  color: var(--muted2);
  text-transform: none;
  letter-spacing: 0.2px;
}
[data-skin='terminal'] .aave-stat .value {
  font-size: 16px;
  font-weight: 600;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* --- Risk: Aave-книги строками (та же семантика, что открытые позиции) --- */
.rk-list {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
  animation: t-fadeUp 0.3s ease both;
}
.rk-head,
.rk-row {
  display: grid;
  grid-template-columns: 1.4fr 1.9fr 0.85fr 0.85fr 0.85fr 0.55fr 0.8fr 28px;
  gap: 14px;
  align-items: center;
  padding: 12px 20px;
}
.rk-head {
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--muted3);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.rk-head .r,
.rk-row .r {
  text-align: right;
}
.rk-row-wrap {
  border-bottom: 1px solid var(--rowline);
}
.rk-row-wrap:last-child {
  border-bottom: 0;
}
.rk-row {
  padding: 15px 20px;
  cursor: pointer;
  transition: 0.12s;
}
.rk-row:hover,
.rk-row.expanded {
  background: var(--hover);
}
.rk-pair {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.rk-pair .token-icon {
  width: 26px;
  height: 26px;
  border: 2px solid var(--card);
}
.rk-pair-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.rk-pair-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
}
.rk-wallet {
  font-size: 10.5px;
  color: var(--muted3);
}
.rk-cell {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  white-space: nowrap;
}
/* HF-шкала — аналог range-бара: подписи над треком, трек с зонами liq/warn/ok. */
.rk-hf {
  min-width: 0;
}
.rk-hf-labels {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 10.5px;
  color: var(--muted3);
  margin-bottom: 6px;
  white-space: nowrap;
}
.rk-hf-val {
  font-weight: 600;
}
.rk-hfbar {
  position: relative;
  display: flex;
  height: 6px;
  border-radius: 6px;
  overflow: visible;
  background: var(--track);
}
.rk-z {
  height: 100%;
}
.rk-z-liq {
  background: rgba(239, 91, 91, 0.35);
  border-radius: 6px 0 0 6px;
}
.rk-z-warn {
  background: rgba(232, 179, 57, 0.35);
}
.rk-z-ok {
  background: rgba(62, 207, 142, 0.22);
}
/* «Спокойная» зона 2.0–2.5: HF с таким запасом — консервативная книга. */
.rk-z-calm {
  background: rgba(91, 141, 239, 0.22);
  border-radius: 0 6px 6px 0;
}
.rk-hfbar-marker {
  position: absolute;
  top: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pos);
  border: 2px solid var(--card);
  transform: translateX(-50%);
  box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.18);
}
.rk-hfbar-marker.warning {
  background: var(--amber);
  box-shadow: 0 0 0 3px rgba(232, 179, 57, 0.2);
}
.rk-hfbar-marker.negative {
  background: var(--neg);
  box-shadow: 0 0 0 3px rgba(239, 91, 91, 0.22);
}
/* Маркер в синей «избыточной» зоне — синий, как сама зона. */
.rk-hfbar-marker.calm {
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.22);
}
.rk-hf-val.calm,
.rk-expand .pre-val.calm {
  color: var(--blue);
}
.rk-nodebt {
  font-size: 11px;
  color: var(--muted3);
}
.rk-row .card-gear {
  position: static;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted3);
  cursor: pointer;
  font-size: 13px;
}
.rk-row .card-gear:hover {
  background: var(--rowline);
  color: var(--text);
}
/* Раскрытие: метрики + спарклайны из общего pre-грида, ниже — симуляторы и
   таблица резервов во всю ширину. */
.rk-expand {
  padding: 4px 20px 18px;
  background: var(--subcard);
  animation: t-fadeUp 0.22s ease both;
}
.rk-expand[hidden] {
  display: none;
}
.rk-expand .sim-grid {
  margin: 14px 0 0;
}
.rk-expand .rk-reserves {
  margin-top: 14px;
}
/* Легенда совмещённого графика «залог и долг» + чип запаса до ликвидации. */
.rko-legend {
  display: inline-flex;
  gap: 12px;
  margin-left: 12px;
  font-size: 10.5px;
  color: var(--muted3);
  vertical-align: middle;
}
.rko-legend i {
  display: inline-block;
  width: 12px;
  height: 3px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}
.rko-legend .rko-dash {
  background: repeating-linear-gradient(90deg, var(--amber) 0 4px, transparent 4px 7px);
}
.rko-headroom {
  font-size: 11px;
  color: var(--muted2);
  margin-left: 8px;
}
/* Подписи порогов warn/liq в оверлее книги — справа: слева живут грид-лейблы. */
.ov-chart .rko-ref {
  left: auto;
  right: 8px;
}
/* Подзаголовок в шапке оверлея книги («Aave v3 · Avalanche · 0x…»). */
.ov-pair .ov-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted3);
  margin-left: 8px;
}
/* Узкие экраны: строка складывается в карточку — пара + HF-шкала, числовые
   колонки уходят (все есть в раскрытии). */
@media (max-width: 900px) {
  .rk-head {
    display: none;
  }
  .rk-head,
  .rk-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 28px;
  }
  .rk-row .rk-cell {
    display: none;
  }
}

/* Simulators: repay (left) + HF-vs-price (right), sub-card chrome. */
.sim-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 14px;
  margin-bottom: 18px;
  align-items: start;
}
[data-skin='terminal'] .repay-sim,
.hfp-sim {
  background: var(--subcard);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0;
}
[data-skin='terminal'] .hf-sim-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
[data-skin='terminal'] .hf-sim-head label {
  font-size: 11.5px;
  color: var(--muted2);
}
[data-skin='terminal'] .hf-sim-tag {
  font-size: 12px;
}
[data-skin='terminal'] .repay-sim input[type='range'],
.hfp-sim input[type='range'] {
  width: 100%;
}
[data-skin='terminal'] .hf-sim-out {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 6px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.hfp-chart {
  position: relative;
}
.hfp-chart svg {
  width: 100%;
  height: 84px;
  display: block;
}
.hfp-lvl {
  position: absolute;
  right: 2px;
  font-size: 9px;
  pointer-events: none;
}
.hfp-warn {
  color: var(--amber);
}
.hfp-liq {
  color: var(--neg);
}
.hfp-sim .hfp-range {
  margin-top: 6px;
}
.hfp-axis {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: var(--muted3);
}
.hfp-note.negative {
  font-weight: 700;
}

/* ============================================================================
   Settings modals + login (mock chrome: 18px radius, ✕, uppercase sections).
   ========================================================================= */
[data-skin='terminal'] .settings-content {
  max-width: 640px;
}
[data-skin='terminal'] .settings-card {
  position: relative;
  border-radius: 18px;
  border-color: var(--border2);
  padding: 20px 22px;
}
[data-skin='terminal'] .settings-card h2 {
  font-size: 15px;
  font-weight: 600;
  padding-right: 40px; /* room for the ✕ */
}
[data-skin='terminal'] .settings-card .modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  cursor: pointer;
}
[data-skin='terminal'] .set-section {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted2);
  border-bottom: 0;
  padding-bottom: 0;
}
[data-skin='terminal'] .set-field {
  color: var(--muted);
  font-size: 11.5px;
}
[data-skin='terminal'] .set-field input,
[data-skin='terminal'] .set-field select {
  background: var(--input);
  border-color: var(--border2);
  font-size: 12.5px;
}
[data-skin='terminal'] .set-field input[type='text'],
[data-skin='terminal'] .set-field input[type='password'],
[data-skin='terminal'] .set-field input[type='number'],
[data-skin='terminal'] .set-time select {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
}
/* Global-settings group tabs → the mock's segmented control. */
[data-skin='terminal'] .set-tabs {
  display: inline-flex;
  gap: 0;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  margin: 12px 0 18px;
  border-bottom: 1px solid var(--border);
}
[data-skin='terminal'] .set-tab-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  /* 6 вкладок платформенных настроек обязаны влезать в одну строку с запасом
     на другие метрики шрифта (кириллица в фолбэке) — паддинг компактнее. */
  padding: 6px 10px;
  border-radius: 7px;
  white-space: nowrap;
  transition: 0.12s;
}
[data-skin='terminal'] .set-tab-btn.active {
  background: var(--border);
  color: var(--text);
}
[data-skin='terminal'] .set-actions {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
[data-skin='terminal'] .set-actions button {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted);
  border-radius: 9px;
  font-weight: 500;
  font-size: 12.5px;
  padding: 9px 18px;
}
[data-skin='terminal'] .set-actions button.primary {
  background: var(--pos);
  color: var(--bg);
  border: 0;
  font-weight: 600;
  padding: 9px 20px;
}
[data-skin='terminal'] .set-actions button.danger {
  background: var(--neg);
  color: var(--bg);
  border: 0;
  font-weight: 600;
  padding: 9px 20px;
}
[data-skin='terminal'] .close-confirm-text {
  color: var(--text);
  font-size: 13px;
}
.login-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
[data-skin='terminal'] .login-card h2 {
  font-size: 17px;
}

/* ============================================================================
   Position overlay (bespoke SVG chart) — .ov-* lives only under the terminal
   skin (overlay.js is invoked from terminal-only paths).
   ========================================================================= */
[data-skin='terminal'] .modal-content {
  max-width: 880px;
  width: 100%;
}
.ov-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  animation: t-scaleIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  max-height: 92vh;
  overflow-y: auto;
}
.ov-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
}
.ov-title {
  flex: 1;
  min-width: 160px;
}
.ov-pair {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
}
.ov-pair .token-icon {
  width: 28px;
  height: 28px;
  border-color: var(--card);
}
.ov-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
}
.ov-meta-sub {
  font-size: 10.5px;
  color: var(--muted3);
  white-space: nowrap;
}
.ov-seg {
  display: flex;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 2px;
}
.ov-seg button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
}
.ov-seg button.active {
  background: var(--border);
  color: var(--text);
}
.ov-head .modal-close {
  position: static;
}
.ov-body {
  padding: 20px 22px;
}
/* Контекстные под-режимы (fees lifetime/unclaimed, market ex/pool/track) — своя
   строка над графиком, чтобы не переполнять шапку (там остаются periods + tabs). */
/* Контекстные контролы графика. Панель прижата вправо margin-left:auto — это
   держит её у правого края И когда строка переносится (при wrap одиночный
   элемент новой строки прижимается влево: justify-content на перенос не
   действует, и панель уезжала под селектор графиков). Внутри панели тем же
   приёмом крайним справа держится окно графика: режим комиссий, источник
   свечей и симулятор появляются и исчезают СЛЕВА от него, не сдвигая. */
.ov-subctl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
/* Строка управления графиком держится В ОДНУ строку: перенос уводил окно
   графика из правого края под селектор. Компактнее только здесь (общий .ov-seg
   используется и в шапке оверлея), а селектор графиков при нехватке места
   ужимается первым — он длиннее всех и переживает это лучше: контекстные
   контролы и окно графика остаются целыми. */
.ov-chartbar .ov-seg button {
  padding: 5px 9px;
  white-space: nowrap;
}
.ov-chartbar .ov-chartsel {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ov-chartbar .ov-chartsel::-webkit-scrollbar {
  display: none;
}
.ov-chartbar .ov-subctl {
  flex: 0 0 auto;
}
/* Длинные окна (180д/365д) свёрнуты в покое и раскрываются при наведении.
   Сегмент выведен из потока (absolute, прижат вправо), поэтому раскрытие
   НАЕЗЖАЕТ на контекстные контролы слева — строка остаётся одной при любом
   их наборе. Место в потоке держит копия-распорка `.ov-periods-ghost`
   (скрыта, всегда в свёрнутом виде): её ширина = ширина свёрнутого сегмента,
   без вычислений в JS и без зависимости от языка подписей. */
.ov-periods-slot {
  position: relative;
  flex: 0 0 auto;
  display: flex;
}
.ov-periods-ghost {
  visibility: hidden;
  pointer-events: none;
}
/* Распорка меняет состав МГНОВЕННО: пока она анимировалась вместе с сегментом,
   уходящая и приходящая кнопки полсекунды существовали одновременно, ширина
   слота плавала — и строка на миг дёргалась/переносилась в момент выбора. */
.ov-periods-ghost button {
  transition: none !important;
}
.ov-periods-slot .ov-periods {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: var(--card);
  transition: box-shadow 0.42s ease;
}
.ov-periods-slot:hover .ov-periods,
.ov-periods-slot:has(button:focus-visible) .ov-periods {
  box-shadow: -16px 0 26px -6px rgba(0, 0, 0, 0.55), 0 8px 22px -10px rgba(0, 0, 0, 0.6);
}
/* Одинаковая ширина кнопок — свёрнутый вид (всегда три окна) не дёргается при
   смене выбора: «7д» и «365д» занимают одно и то же место. */
.ov-periods-slot .ov-seg button {
  min-width: 46px;
  padding-left: 9px;
  padding-right: 9px;
  text-align: center;
}
/* Свёрнутые окна: JS (syncPeriods) помечает те, что не влезают в тройку.
   Анимируем max-width/padding/opacity — display не транзишенится, а кнопка при
   этом остаётся в разметке (ширина 0). */
.ov-periods-slot .ov-seg button {
  max-width: 74px;
  overflow: hidden;
  /* Мягкое раскрытие. Длительности одинаковы в обе стороны и без задержек —
     сворачивание должно идти ровно тем же темпом, что раскрытие. */
  transition: max-width 0.5s cubic-bezier(0.22, 0.8, 0.2, 1), padding 0.5s cubic-bezier(0.22, 0.8, 0.2, 1),
    opacity 0.42s ease;
}
.ov-periods-slot .ov-seg button.p-collapsed {
  max-width: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
}
.ov-periods-slot:hover .ov-periods button.p-collapsed,
.ov-periods-slot:has(button:focus-visible) .ov-periods button.p-collapsed {
  max-width: 74px;
  min-width: 46px;
  padding-left: 9px;
  padding-right: 9px;
  opacity: 1;
}
/* Без ховера (тач) раскрывать нечем — показываем все окна сразу; распорка
   раскрывается вместе с сегментом, поэтому слот честно резервирует место. */
@media (hover: none) {
  .ov-periods-slot .ov-seg button.p-collapsed {
    max-width: 74px;
    min-width: 46px;
    padding-left: 9px;
    padding-right: 9px;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ov-periods-slot .ov-seg button {
    transition: none;
  }
}
.ov-subctl .ov-periods {
  margin-left: auto;
}
/* Симулятор диапазона живёт здесь же, в разделе цены/свечей — рядом с
   переключателями периодов, а не отдельным блоком под действиями. */
.ov-simbtn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
}
.ov-simbtn:hover {
  color: var(--text);
  border-color: var(--accent, var(--green));
}
/* Постоянная сводка (KPI-полоса) */
.ov-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
}
.ov-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 84px;
}
.ov-kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted3);
}
.ov-kpi-val {
  font-size: 15px;
  font-weight: 600;
}
.ov-kpi-val.positive { color: var(--pos); }
.ov-kpi-val.negative { color: var(--neg); }
.ov-kpi-val.warning { color: var(--amber); }
.ov-kpi-val.amber { color: var(--amber); }
.ov-kpi-sub {
  font-size: 10.5px;
  color: var(--muted3);
}
/* Панель действий (persistent) */
/* Кнопки идут сразу под блоком графика: собственный отступ панели обнулён, как и
   margin классической .card-actions (её класс навешивает общий actionsBlock) —
   расстояние задаёт только нижний padding .ov-body. Было 43px, стало ~20px. */
/* Снизу нужен воздух: следом идёт свёрнутая панель «Инсайты» со своей верхней
   чертой, и без отступа кнопки действий ложились прямо на неё. */
.ov-actions { padding: 0 22px 18px; }
.ov-actions .card-actions { margin-top: 0; }
.ov-actions:empty { display: none; }
/* Панель выбора графика + контекстные под-режимы в одну строку */
.ov-chartbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Одна строка: окно графика обязано оставаться крайним справа, а при
     переносе оно уезжало под селектор графиков. Не влезающий селектор
     ужимается собственным скроллом (см. .ov-chartbar .ov-chartsel). */
  flex-wrap: nowrap;
  margin-bottom: 14px;
}
.ov-navbasis:empty { display: none; }
/* Сворачиваемые панели (инсайты / транзакции) */
.ov-collapse-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  /* scrollIntoView(block:start) уводит панель под липкую .ov-head — компенсируем */
  scroll-margin-top: 68px;
  padding: 15px 22px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
}
.ov-collapse-head:hover { color: var(--text); }
.ov-collapse-caret { color: var(--muted3); font-size: 10px; }
/* Accordion: тело раскрывается/сворачивается одинаково плавно (max-height ведёт JS) */
.ov-collapse-body { transition: max-height 0.28s ease, opacity 0.22s ease; }
.ov-tx-count { margin-left: auto; color: var(--muted3); font-weight: 400; }
.ov-insights-body { padding: 4px 22px 8px; }
.ov-txs .ov-tx-table.ov-collapse-body { padding: 0 22px 20px; }
.ov-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ov-chart-title {
  font-size: 13px;
  font-weight: 600;
}
.ov-chart-period {
  font-size: 12px;
  color: var(--muted2);
  margin-left: 8px;
}
.ov-legend {
  display: flex;
  gap: 14px;
  font-size: 10.5px;
}
.ov-chart {
  position: relative;
  cursor: crosshair;
}
.ov-chart svg {
  width: 100%;
  height: 280px;
  display: block;
}
.ov-grid-label,
.ov-band-label {
  position: absolute;
  font-size: 10px;
  pointer-events: none;
}
.ov-grid-label {
  left: 6px;
  color: var(--muted3);
}
.ov-band-label {
  right: 6px;
  color: var(--blue);
}
.ov-tip,
.ov-mktip,
.ov-seltip {
  position: absolute;
  top: 12px;
  background: var(--tip);
  border: 1px solid var(--border3);
  border-radius: 10px;
  padding: 10px 13px;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
  min-width: 170px;
  z-index: 2;
  animation: t-fadeIn 0.12s ease both;
}
.ov-tip[hidden],
.ov-mktip[hidden],
.ov-seltip[hidden] {
  display: none;
}
/* Range selection: the summary card sits above the crosshair tips. */
.ov-seltip {
  z-index: 3;
  border-color: rgba(91, 141, 239, 0.45);
}
.ov-seltip-hint {
  margin-top: 6px;
  font-size: 9.5px;
  color: var(--muted3);
}
/* Dragging a span must not select page text or fight vertical scrolling. */
.ov-chart {
  user-select: none;
}
.ov-chart svg {
  touch-action: pan-y;
}
.ov-tip-date {
  font-size: 10.5px;
  color: var(--muted2);
  margin-bottom: 7px;
}
.ov-tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 11px;
}
.ov-tip-row .num {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.ov-tip-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.ov-tip-label {
  color: var(--muted);
  white-space: nowrap;
}
.ov-mktip {
  min-width: 180px;
  z-index: 3;
}
.ov-mktip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 11.5px;
}
.ov-mktip-head .num {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--muted2);
}
.ov-mktip-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ov-mktip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 3px;
  font-size: 11px;
}
.ov-mktip-row > span:first-child {
  color: var(--muted);
  flex: 1;
}
.ov-mark {
  cursor: pointer;
}
.ov-range-row {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--muted3);
  margin-top: 6px;
}
.ov-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}
/* Консенсус аналитиков — под токены терминала (subcard + border, как ov-stat) */
[data-skin='terminal'] .analyst-block {
  background: var(--subcard);
  border: 1px solid var(--border);
  border-radius: 10px;
}
[data-skin='terminal'] .an-rating {
  border-radius: 5px;
}
.ov-stat {
  background: var(--subcard);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  min-width: 0;
}
.ov-stat-label {
  font-size: 10px;
  color: var(--muted2);
  margin-bottom: 4px;
}
.ov-stat-value {
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
}
.ov-extras {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ov-extras:empty {
  display: none;
}
.ov-txs {
  padding: 0;
}
.ov-txs h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
}
.ov-txs-table {
  background: var(--subcard);
}
.ov-tx-chip {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 5px;
  background: rgba(167, 139, 250, 0.14);
  color: var(--chip-purple);
}
.ov-tx-chip.tx-chip-blue {
  background: rgba(91, 141, 239, 0.14);
  color: var(--chip-blue);
}
.ov-tx-chip.tx-chip-amber {
  background: rgba(232, 179, 57, 0.14);
  color: var(--chip-amber);
}
/* Своп ре-рейнджа — отдельный цвет: это не ввод и не вывод капитала, а
   перекладывание ног внутри одного вложения. */
.ov-tx-chip.tx-chip-purple {
  background: rgba(155, 122, 232, 0.14);
  color: var(--purple);
}
.ov-tx-chip.tx-chip-neg {
  background: rgba(239, 91, 91, 0.14);
  color: var(--chip-neg);
}
/* Line draw-in (mock's `drawin`). A left-to-right clip reveal instead of the
   mock's stroke-dash trick: with preserveAspectRatio="none" + non-scaling
   strokes the browser mis-measures the normalized dash length, and the line
   stopped short of its end. clip-path is exact regardless of scaling.
   `both` keeps the line hidden during the start delay (no flash). */
.drawin {
  animation: t-draw 0.9s ease 0.1s both;
}
@keyframes t-draw {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* ============================================================================
   Analytics: bespoke SVG charts + allocation bars (terminal).
   ========================================================================= */
[data-skin='terminal'] .portfolio-chart {
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
  margin: 16px 0 0;
  animation: t-fadeUp 0.28s ease both;
}
[data-skin='terminal'] .portfolio-deltas {
  margin: 16px 0 0;
  flex-wrap: wrap; /* the classic single row clipped card labels at 1032px */
}
[data-skin='terminal'] .delta-card {
  flex: 1 1 140px;
}
[data-skin='terminal'] .delta-card {
  background: var(--card2);
  border-radius: 14px;
  padding: 12px 14px;
}
[data-skin='terminal'] .pchart-range,
[data-skin='terminal'] .pchart-metrics {
  background: var(--input);
  border-radius: 9px;
}
[data-skin='terminal'] .pchart-range-btn.active,
[data-skin='terminal'] .pchart-metric-btn.active {
  background: var(--border);
}
[data-skin='terminal'] .pchart-export {
  background: var(--input);
  border-color: var(--border);
}
.an-chart {
  position: relative;
  cursor: crosshair;
}
.an-chart[hidden] {
  display: none;
}
.an-chart svg {
  width: 100%;
  height: 175px;
  display: block;
}
.an-dates {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted3);
  margin-top: 4px;
}
.an-legend {
  display: flex;
  gap: 10px;
  font-size: 10.5px;
  margin-left: auto;
}
.an-legend span {
  cursor: default;
}
.an-line {
  transition: opacity 0.15s ease;
}
/* Allocation bars (by pair) + network list. */
@keyframes t-growBar {
  from {
    transform: scaleX(0);
  }
}
.alloc-bars .ab-row {
  margin-bottom: 10px;
}
.alloc-bars .ab-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  margin-bottom: 4px;
}
.alloc-bars .ab-head span:first-child {
  font-weight: 500;
}
.alloc-bars .ab-head .num {
  color: var(--muted);
}
.alloc-bars .ab-track {
  height: 7px;
  border-radius: 6px;
  background: var(--track);
  overflow: hidden;
}
.alloc-bars .ab-fill {
  height: 100%;
  border-radius: 6px;
  transform-origin: left;
  animation: t-growBar 0.5s ease both;
}
.alloc-nets .an-net-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
  font-size: 12.5px;
}
.alloc-nets .an-net-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.alloc-nets .an-net-label {
  flex: 1;
}
.alloc-nets .an-net-val {
  color: var(--muted);
}
.alloc-nets .an-net-pct {
  color: var(--muted3);
  font-size: 11px;
  width: 42px;
  text-align: right;
}

/* ============================================================================
   Monitoring / dr4 light polish (tokens do most of the work).
   ========================================================================= */
[data-skin='terminal'] .mon-stat {
  background: var(--card2);
  border-radius: 14px;
  padding: 14px 16px;
}
[data-skin='terminal'] .mon-stat label {
  text-transform: none;
  letter-spacing: 0.2px;
  color: var(--muted2);
}
[data-skin='terminal'] .mon-stat .value {
  font-weight: 600;
}
[data-skin='terminal'] .dr4-card,
[data-skin='terminal'] .dr4-basket {
  border-radius: 16px;
}

/* ============================================================================
   dr4upn1r page (terminal) — the mock's layout: chips header, basket card,
   sleeves table, corr + weights side by side (dr4upn1r.js TERMINAL branch).
   ========================================================================= */
[data-skin='terminal'] .dr4-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  /* The dr4 view hides the section head (runes live here) — take over its
     24px top rhythm so the row doesn't stick to the topbar. */
  margin-top: 24px;
  margin-bottom: 14px;
}
[data-skin='terminal'] .dr4-runes {
  opacity: 0.7;
  flex: none;
}
[data-skin='terminal'] .dr4-chip {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
[data-skin='terminal'] .dr4-chip.chip-phase {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--pos);
  background: rgba(62, 207, 142, 0.14);
  border: 0;
}
[data-skin='terminal'] .dr4-chip.chip-guard.normal,
[data-skin='terminal'] .dr4-chip.chip-pass {
  color: var(--pos);
  border-color: rgba(62, 207, 142, 0.35);
}
[data-skin='terminal'] .dr4-chip.chip-guard.caution,
[data-skin='terminal'] .dr4-chip.chip-gate {
  color: var(--amber);
  border-color: rgba(232, 179, 57, 0.35);
}
[data-skin='terminal'] .dr4-chip.chip-guard.halt {
  color: var(--neg);
  border-color: rgba(239, 91, 91, 0.35);
}
/* Periods join the chips row as the mock's segmented control, pushed right. */
[data-skin='terminal'] .dr4-chips .dr4-periods {
  margin-left: auto;
  display: flex;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 2px;
}
[data-skin='terminal'] .dr4-period-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
}
[data-skin='terminal'] .dr4-period-btn.active {
  background: var(--border);
  color: var(--text);
}
/* Basket: the mock's green-tinted frame. */
[data-skin='terminal'] .dr4-basket {
  border-color: rgba(62, 207, 142, 0.25);
}
/* Sleeves table: BEST/BALLAST tags, best-row tint, out-of-range dot. */
[data-skin='terminal'] .dr4-sleeves {
  margin: 16px 0;
}
[data-skin='terminal'] .dr4-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 5px;
  white-space: nowrap;
}
[data-skin='terminal'] .dr4-tag-best {
  color: var(--pos);
  background: rgba(62, 207, 142, 0.12);
}
[data-skin='terminal'] .dr4-tag-ballast {
  color: var(--muted);
  background: rgba(139, 147, 163, 0.12);
}
[data-skin='terminal'] .dr4-row-best {
  background: rgba(62, 207, 142, 0.03);
}
[data-skin='terminal'] .dr4-oor {
  color: var(--amber);
  font-size: 9px;
}
[data-skin='terminal'] .dr4-amber {
  color: var(--amber);
}
/* Correlation matrix + proposed weights side by side (mock). */
[data-skin='terminal'] .dr4-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin: 16px 0;
}
[data-skin='terminal'] .dr4-duo .risk-section {
  margin: 0;
}
/* Weight bars (mock: label · bar · % · rationale). */
[data-skin='terminal'] .dr4-w-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
[data-skin='terminal'] .dr4-w-label {
  width: 88px;
  flex: none;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-skin='terminal'] .dr4-w-track {
  flex: 1;
  height: 8px;
  border-radius: 6px;
  background: var(--track);
  overflow: hidden;
}
[data-skin='terminal'] .dr4-w-fill {
  height: 100%;
  border-radius: 6px;
  transform-origin: left;
  animation: t-growBar 0.5s ease both;
}
[data-skin='terminal'] .dr4-w-pct {
  width: 46px;
  flex: none;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
}
[data-skin='terminal'] .dr4-w-rat {
  width: 130px;
  flex: none;
  font-size: 10px;
  color: var(--muted3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* --- Legacy dr4 pieces (frontier / intents / corr / squads / compare) get the
   terminal look: rtable-style tables, mono chips, mock metric grid. --- */
[data-skin='terminal'] .dr4-frontier h3,
[data-skin='terminal'] .dr4-corr h3,
[data-skin='terminal'] .dr4-alloc h3,
[data-skin='terminal'] .dr4-intents h3,
[data-skin='terminal'] .dr4-compare h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
}
[data-skin='terminal'] .dr4-frontier-table,
[data-skin='terminal'] .dr4-intents-table {
  margin-top: 0;
}
[data-skin='terminal'] .dr4-frontier-table th,
[data-skin='terminal'] .dr4-intents-table th {
  font-size: 10.5px;
  color: var(--muted3);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
[data-skin='terminal'] .dr4-frontier-table td,
[data-skin='terminal'] .dr4-intents-table td {
  font-size: 12.5px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--rowline);
}
[data-skin='terminal'] .dr4-frontier-table tr:last-child td,
[data-skin='terminal'] .dr4-intents-table tr:last-child td {
  border-bottom: 0;
}
/* Correlation matrix → the mock's rounded colored cells (no table borders). */
[data-skin='terminal'] .dr4-corr-table {
  border-collapse: separate;
  border-spacing: 4px;
  margin: 0 -4px;
}
[data-skin='terminal'] .dr4-corr-table th,
[data-skin='terminal'] .dr4-corr-table td {
  border: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  padding: 7px 4px;
  border-radius: 6px;
}
[data-skin='terminal'] .dr4-corr-table th {
  color: var(--muted3);
  font-weight: 500;
  background: transparent;
}
[data-skin='terminal'] .dr4-corr-table td {
  font-weight: 600;
}
[data-skin='terminal'] .dr4-corr-hi {
  background: rgba(239, 91, 91, 0.16);
  color: var(--chip-neg);
}
[data-skin='terminal'] .dr4-corr-mid {
  background: rgba(232, 179, 57, 0.14);
  color: var(--chip-amber);
}
[data-skin='terminal'] .dr4-corr-lo {
  background: rgba(62, 207, 142, 0.12);
  color: var(--chip-pos);
}
[data-skin='terminal'] .dr4-corr-neg {
  background: rgba(62, 207, 142, 0.2);
  color: var(--chip-pos);
}
[data-skin='terminal'] .dr4-corr-diag {
  background: var(--track);
  color: var(--muted3);
  font-weight: 400;
}
/* Guard / intent-status chips → mono terminal chips. */
[data-skin='terminal'] .dr4-guard,
[data-skin='terminal'] .dr4-status {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 5px;
}
/* Width-variant chips in the frontier. */
[data-skin='terminal'] .dr4-fr-chip {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--muted);
  cursor: default;
}
[data-skin='terminal'] .dr4-fr-chip.best {
  border-color: rgba(62, 207, 142, 0.35);
  background: rgba(62, 207, 142, 0.1);
  color: var(--pos);
}
[data-skin='terminal'] button.dr4-fr-chip {
  cursor: pointer;
}
/* Metric grid (basket + Squads) per the mock. */
[data-skin='terminal'] .dr4-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 12px;
}
[data-skin='terminal'] .dr4-metric label {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0.2px;
  color: var(--muted2);
  margin-bottom: 4px;
}
[data-skin='terminal'] .dr4-metric span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
}
[data-skin='terminal'] .dr4-head .dr4-label {
  font-size: 14px;
  font-weight: 600;
}
[data-skin='terminal'] .dr4-head .dr4-class {
  font-size: 11px;
  color: var(--muted2);
}
/* Intent Approve/Reject → terminal outline buttons. */
[data-skin='terminal'] .dr4-act {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 7px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--pos);
  cursor: pointer;
}
[data-skin='terminal'] .dr4-act.reject {
  color: var(--neg);
  border-color: rgba(239, 91, 91, 0.4);
}
/* Compare chart: legend row above the shared SVG chart. */
[data-skin='terminal'] .dr4-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 10.5px;
  margin-bottom: 8px;
}
[data-skin='terminal'] .dr4-svg {
  min-height: 170px;
}

/* Portfolio chart: HODL overlay corner tag; benchmark summary line (mock). */
.an-chart .hodl-tag {
  position: absolute;
  right: 6px;
  top: 2px;
  font-size: 10.5px;
  color: var(--muted);
  pointer-events: none;
}
.bench-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 10.5px;
  color: var(--muted3);
  margin-top: 2px;
}

/* ============================================================================
   Remaining legacy pieces on the other tabs.
   ========================================================================= */
/* Scanner: Add pool / watchlist buttons → the mock's solid green action button. */
[data-skin='terminal'] .scanner-panel .btn,
[data-skin='terminal'] .scanner-panel button.primary {
  background: var(--pos);
  color: var(--bg);
  border: 0;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 13px;
  cursor: pointer;
}
[data-skin='terminal'] .scanner-panel .btn:disabled {
  opacity: 0.5;
}
/* Notifications: the sent-message overlay body as a mono terminal block. */
[data-skin='terminal'] .notify-msg-body {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  background: var(--input);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 12px;
}

/* ============================================================================
   Admin page (Monitoring tab, terminal skin) — the mock's Admin layout over
   real data (monitoring.js renderTerminalAdmin).
   ========================================================================= */
[data-skin='terminal'] .adm-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
[data-skin='terminal'] .adm-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
[data-skin='terminal'] .adm-kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  animation: t-fadeUp 0.32s ease both;
}
[data-skin='terminal'] .adm-kpi label {
  display: block;
  font-size: 11px;
  color: var(--muted2);
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}
[data-skin='terminal'] .adm-kpi .value {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
[data-skin='terminal'] .adm-kpi .sub {
  font-size: 10.5px;
  color: var(--muted3);
  margin-top: 4px;
}
[data-skin='terminal'] .adm-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  animation: t-fadeUp 0.28s ease both;
}
[data-skin='terminal'] .adm-card h2 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
}
[data-skin='terminal'] .adm-table-card {
  padding: 0;
  overflow-x: auto;
}
[data-skin='terminal'] .adm-card-head {
  font-size: 13px;
  font-weight: 600;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
/* Tables inside admin cards: the card is the frame, the table goes edge to edge. */
[data-skin='terminal'] .adm-table-card .risk-table {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
}
[data-skin='terminal'] .risk-table .r {
  text-align: right;
}
[data-skin='terminal'] .adm-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
[data-skin='terminal'] .adm-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
[data-skin='terminal'] .adm-grid3 .risk-section {
  margin: 0; /* the grid provides the spacing */
}
[data-skin='terminal'] .adm-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
[data-skin='terminal'] .adm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rowline);
}
[data-skin='terminal'] .adm-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
[data-skin='terminal'] .adm-fill {
  flex: 1;
  min-width: 0;
}
[data-skin='terminal'] .adm-strong {
  font-size: 12.5px;
  font-weight: 600;
}
[data-skin='terminal'] .adm-muted {
  font-size: 11px;
  color: var(--muted3);
}
[data-skin='terminal'] .adm-chain {
  width: 86px;
  flex: none;
}
[data-skin='terminal'] .adm-topic {
  width: 110px;
  flex: none;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-note {
  margin: 0 0 12px;
  font-size: 10.5px;
  color: var(--muted3);
  line-height: 1.45;
}
[data-skin='terminal'] .adm-note-sub {
  font-size: 10.5px;
  color: var(--muted3);
  margin-top: 2px;
}
/* Status chips (OK / ERROR / STALE / PAUSED / DEGRADED). */
[data-skin='terminal'] .adm-chip {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
}
[data-skin='terminal'] .adm-ok {
  color: var(--pos);
  background: rgba(62, 207, 142, 0.12);
}
[data-skin='terminal'] .adm-error {
  color: var(--neg);
  background: rgba(239, 91, 91, 0.12);
}
[data-skin='terminal'] .adm-stale {
  color: var(--amber);
  background: rgba(232, 179, 57, 0.12);
}
[data-skin='terminal'] .adm-paused,
[data-skin='terminal'] .adm-pending {
  color: var(--muted);
  background: rgba(139, 147, 163, 0.12);
}
[data-skin='terminal'] .adm-btn {
  font-family: inherit;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
[data-skin='terminal'] .adm-btn:hover {
  color: var(--text);
  border-color: var(--border3);
}
[data-skin='terminal'] .adm-danger {
  border-color: rgba(239, 91, 91, 0.3);
}
[data-skin='terminal'] .adm-danger h2 {
  color: var(--neg);
}
[data-skin='terminal'] .adm-btn-danger {
  border-color: rgba(239, 91, 91, 0.4);
  color: var(--neg);
  font-weight: 600;
  padding: 6px 13px;
}
[data-skin='terminal'] .adm-btn-danger:hover {
  color: var(--neg);
  border-color: rgba(239, 91, 91, 0.7);
}
[data-skin='terminal'] .adm-errors ul {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 11.5px;
  color: var(--neg);
  line-height: 1.6;
}

/* ============================================================================
   Responsive.
   ========================================================================= */
@media (max-width: 900px) {
  [data-skin='terminal'] body {
    grid-template-columns: 1fr;
  }
  /* The PWA mock has no sidebar at all: a compact header (mark + screen
     title/meta + theme + bell) replaces the old horizontal strip. */
  #skin-sidebar {
    display: none;
  }
  #skin-mobilehead {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 25;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  }
  .mh-mark {
    flex-shrink: 0;
  }
  .mh-text {
    flex: 1;
    min-width: 0;
  }
  .mh-title {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mh-meta {
    font-size: 10.5px;
    color: var(--muted2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mh-btn {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid var(--border2);
    background: var(--input);
    color: var(--text);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mh-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    background: var(--neg);
    color: #fff;
    font-size: 9.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }
  .mh-badge[hidden] {
    display: none;
  }
  /* Pull-to-refresh indicator row (skin-layout.js drives the height). */
  #skin-ptr {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0;
    overflow: hidden;
    color: var(--muted2);
    font-size: 12px;
  }
  #skin-ptr .ptr-spin {
    animation: t-spin 0.9s linear infinite;
  }
  /* The header owns the title on phones — hide the in-content duplicate but
     keep the attention chip + the search loupe. */
  .view-head .vh-left {
    display: none;
  }
  /* Desktop leftovers that duplicate the PWA shell: the in-content theme
     toggle (the header has one), the Refresh button (pull-to-refresh clicks
     it programmatically — display:none keeps that working) and the snapshot
     status chip (admin detail, lives on the Admin screen). */
  [data-skin='terminal'] #skin-theme-btn,
  [data-skin='terminal'] #refresh-btn,
  [data-skin='terminal'] #update-status,
  [data-skin='terminal'] #health {
    display: none;
  }
  /* --- PWA-3: scanner / notifications / wallets as the mock's card lists.
     The tables stay in the DOM for desktop; phones swap them out. --- */
  #scanner-panel .table-wrap,
  #notifications-panel .notify-table,
  #watch-table {
    display: none;
  }
  .scan-cards,
  .notify-cards,
  #wallet-cards {
    display: block;
  }
  .scan-card,
  .notify-card,
  .wallet-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 13px 14px;
    margin-bottom: 9px;
  }
  .scan-card .scc-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .scan-card .scan-pair {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .scan-card .scan-verdict {
    margin-left: auto;
  }
  .scan-card .scan-watch {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
  }
  .scan-card .scc-sub {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 7px;
  }
  .scan-card .scc-sub b {
    font-weight: 600;
  }
  .scan-card .scc-apr {
    margin-left: auto;
    color: var(--muted3);
  }
  .notify-card {
    display: flex;
    gap: 10px;
  }
  .notify-card .nc-dot {
    font-size: 9px;
    line-height: 1.6;
    flex-shrink: 0;
  }
  .notify-card .nc-main {
    flex: 1;
    min-width: 0;
  }
  .notify-card .nc-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .notify-card .nc-title {
    flex: 1;
    font-size: 12.5px;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .notify-card .nc-time {
    flex-shrink: 0;
    font-size: 9.5px;
    color: var(--muted3);
  }
  .notify-card .nc-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wallet-card .wc-top {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }
  .wallet-card .wc-addr {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
  }
  .wallet-card .wc-chain {
    flex-shrink: 0;
    font-size: 10px;
  }
  .wallet-card .wc-chain.sol {
    color: var(--pos);
  }
  .wallet-card .wc-chain.evm {
    color: var(--neg);
  }
  .wallet-card .wc-sub {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 7px;
  }
  .wallet-card .wc-value {
    color: var(--text2, var(--text));
    font-weight: 600;
  }
  .wallet-card .wc-remove {
    margin-left: auto;
    color: var(--neg);
  }
  /* The watch form stacks full-width like the mock's "Watch a wallet" card. */
  [data-skin='terminal'] .watch-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  [data-skin='terminal'] .watch-form select,
  [data-skin='terminal'] .watch-form input {
    width: 100%;
  }
  [data-skin='terminal'] .watch-form button {
    width: 100%;
    border: 0;
    background: var(--pos);
    color: var(--bg);
    font-weight: 600;
    padding: 12px;
    border-radius: 11px;
  }
  /* Analytics: the metric segment scrolls like the mock's chip rows. */
  [data-skin='terminal'] .pchart-metrics {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  [data-skin='terminal'] .pchart-metric-btn {
    flex-shrink: 0;
  }
  /* The portfolio hero/KPI block belongs to the Positions screen only (mock);
     other screens start with their own content. */
  [data-skin='terminal'] body:not([data-active-tab='open']) header {
    display: none;
  }
  .sb-logo {
    padding: 0;
  }
  .sb-logo svg {
    width: 96px;
    height: 26px;
  }
  .sb-label {
    display: none;
  }
  #skin-sidebar .tab-group {
    flex-direction: row;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #skin-sidebar .tab-btn {
    white-space: nowrap;
  }
  #skin-sidebar .tab-btn:hover {
    transform: none;
  }
  .sb-bottom {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
    flex-direction: row;
    align-items: center;
  }
  .sb-bottom .app-version {
    display: none;
  }
  #skin-sidebar .session-address {
    max-width: 90px;
  }
  #skin-sidebar .profile-menu {
    bottom: auto;
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    min-width: 200px;
  }
  [data-skin='terminal'] header {
    padding: 16px 14px 0;
    grid-template-columns: 1fr; /* hero, then controls, then KPIs */
    align-items: start;
    gap: 12px;
  }
  [data-skin='terminal'] .header-actions {
    grid-column: 1;
    grid-row: 2;
    margin-left: 0;
    flex-wrap: wrap;
    min-width: 0; /* grid item: allow the 1fr track to shrink below content so the
                     scrollable chips row doesn't force the header wider than the viewport */
  }
  .summary-hero .hero-value {
    font-size: 28px;
  }
  .kpis {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: repeat(2, 1fr);
  }
  .view-head {
    margin: 16px 14px 0;
  }
  [data-skin='terminal'] .ac-cards {
    grid-template-columns: 1fr;
  }
  .sim-grid {
    grid-template-columns: 1fr;
  }
  .ov-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .ov-head {
    padding: 14px;
  }
  .ov-body,
  .ov-actions,
  .ov-txs {
    padding-left: 14px;
    padding-right: 14px;
  }
  [data-skin='terminal'] .positions,
  [data-skin='terminal'] .closed-positions,
  [data-skin='terminal'] .positions.pos-rows:not([hidden]),
  [data-skin='terminal'] .closed-positions.pos-rows:not([hidden]) {
    margin-left: 14px;
    margin-right: 14px;
    padding-left: 0;
    padding-right: 0;
  }
  [data-skin='terminal'] .positions:not(.pos-rows),
  [data-skin='terminal'] .closed-positions:not(.pos-rows) {
    padding: 16px 14px;
    margin-left: 0;
    margin-right: 0;
  }
  [data-skin='terminal'] .positions-toolbar {
    margin: 12px 14px 0;
  }
  [data-skin='terminal'] .tab-panel:not(.positions):not(.closed-positions) {
    padding-left: 14px;
    padding-right: 14px;
  }
  /* Rows: keep Pair | Value | PnL; hide the rest on narrow screens. */
  /* --- Positions as the PWA mock's phone cards: token pair + fee on the
     left, value + PnL chip on the right, a full-width range bar, and a
     labeled Fees/Age/APR footer. The desktop column grid (and its header)
     doesn't fit a phone. --- */
  .pos-head {
    display: none;
  }
  [data-skin='terminal'] .positions.pos-rows:not([hidden]),
  [data-skin='terminal'] .closed-positions.pos-rows:not([hidden]) {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .pos-row-wrap {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .pos-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    /* The pair block spans two rows on the left; value and the PnL chip get
       their own rows on the right (a margin hack overlapped them). */
    grid-template-areas:
      'pair  pair  value'
      'pair  pair  pnl'
      'range range range'
      'fees  age   apr';
    row-gap: 4px;
    column-gap: 12px;
    padding: 13px 14px;
    border-bottom: 0;
  }
  .pos-row .pr-range {
    margin-top: 8px;
  }
  .pos-row .pr-fees,
  .pos-row .pr-age,
  .pos-row .pr-apr {
    margin-top: 6px;
  }
  .pos-row .pr-pair {
    grid-area: pair;
  }
  .pos-row .pr-value {
    grid-area: value;
    text-align: right;
  }
  .pos-row .pr-pnl {
    /* The PnL chip rides under the value, top-right like the mock. */
    grid-area: pnl;
    align-self: start;
    justify-self: end;
  }
  .pos-row .pr-range {
    grid-area: range;
    display: block;
    max-width: none;
  }
  .pos-row .pr-fees,
  .pos-row .pr-age,
  .pos-row .pr-apr {
    display: block;
    font-size: 10.5px;
    text-align: left;
    white-space: nowrap;
  }
  .pos-row .pr-fees::before,
  .pos-row .pr-age::before,
  .pos-row .pr-apr::before {
    content: attr(data-l) ' ';
    color: var(--muted);
    font-weight: 400;
  }
  .pos-row .pr-apr {
    text-align: right;
  }
  .pos-row .card-gear {
    display: none; /* settings live on the opened position card */
  }
  /* Swipe-left actions behind the row (mock): Collect green, Close red. */
  .pos-row-wrap {
    position: relative;
  }
  .pr-swipe-actions {
    display: flex;
    position: absolute;
    inset: 0;
    justify-content: flex-end;
    gap: 1px;
    border-radius: 16px;
    overflow: hidden;
  }
  .prs-btn {
    width: 66px;
    border: 0;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
  }
  .prs-btn span {
    font-size: 15px;
    line-height: 1;
  }
  .prs-collect {
    background: rgba(62, 207, 142, 0.15);
    color: var(--pos);
  }
  .prs-close {
    background: rgba(239, 91, 91, 0.15);
    color: var(--neg);
  }
  .pos-row {
    position: relative;
    z-index: 1;
    background: var(--card);
    touch-action: pan-y;
  }
  /* Position overlay = the mock's detail push-screen: full-page, the close
     button becomes the ‹ back at the head's left. */
  [data-skin='terminal'] .position-modal {
    padding: 0;
  }
  [data-skin='terminal'] .position-modal .ov-card {
    max-width: none;
    width: 100%;
    min-height: 100%;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    animation: t-pushIn 0.25s ease both;
  }
  [data-skin='terminal'] .ov-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg2);
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
  }
  [data-skin='terminal'] .ov-head .modal-close {
    order: -1;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border2);
    background: var(--input);
    color: var(--text);
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  [data-skin='terminal'] .ov-head .modal-close::before {
    content: '‹';
    font-size: 19px;
    line-height: 1;
  }
  /* Detail head as a grid: back + pair on top, then the period and tab
     segments full-width (they overlapped the meta line when flex-wrapped). */
  [data-skin='terminal'] .position-modal .ov-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    row-gap: 10px;
  }
  [data-skin='terminal'] .ov-head .modal-close {
    grid-column: 1;
    grid-row: 1;
  }
  [data-skin='terminal'] .ov-head .ov-title {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  [data-skin='terminal'] .ov-head .ov-periods {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
  }
  [data-skin='terminal'] .ov-head .ov-tabs {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
  }
  [data-skin='terminal'] .ov-head .ov-periods button,
  [data-skin='terminal'] .ov-head .ov-tabs button {
    flex: 1;
  }
  /* Network filter = the mock's horizontal chips row. Own full-width row inside
     the wrapping .header-actions; min-width:0 lets the flex item shrink below its
     content so overflow-x actually scrolls (else many chips push header wide). */
  [data-skin='terminal'] .network-filter {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
  }
  [data-skin='terminal'] .net-filter-btn {
    flex-shrink: 0;
    border: 1px solid var(--border2);
    background: var(--input);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
    padding: 9px 15px;
    border-radius: 11px;
    white-space: nowrap;
  }
  [data-skin='terminal'] .net-filter-btn.active {
    border-color: rgba(62, 207, 142, 0.45);
    background: rgba(62, 207, 142, 0.12);
    color: var(--pos);
  }
  /* Summary: the mock's single compact card — KPI boxes become a borderless
     3-per-row stat strip under the hero. */
  [data-skin='terminal'] .kpis {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 14px;
    border-top: 1px solid var(--rowline);
    padding-top: 12px;
  }
  [data-skin='terminal'] .kpi-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 4px 0;
  }
  /* Toast = the mock's centered pill above the tab bar. */
  [data-skin='terminal'] .toasts {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    align-items: center;
  }
  [data-skin='terminal'] .toast {
    border-radius: 999px;
    white-space: nowrap;
  }
  @keyframes t-pushIn {
    from {
      opacity: 0;
      transform: translateX(26px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .pre-grid {
    grid-template-columns: 1fr;
  }
  /* Одна колонка — кнопки возвращаются в неё (иначе grid-column: 2 создал бы
     неявную вторую колонку). */
  .pre-actions {
    grid-column: 1;
  }
  .pre-facts {
    grid-template-columns: repeat(2, 1fr);
    /* В одной колонке span 2 не нужен: порядок метрики → графики → кнопки. */
    grid-row: auto;
  }
  /* Admin page: stack the card grids on narrow screens. */
  [data-skin='terminal'] .adm-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  [data-skin='terminal'] .adm-grid2,
  [data-skin='terminal'] .adm-grid3 {
    grid-template-columns: 1fr;
  }
  /* dr4: corr/weights stack; rationale column is the first to go. */
  [data-skin='terminal'] .dr4-duo {
    grid-template-columns: 1fr;
  }
  [data-skin='terminal'] .dr4-w-rat {
    display: none;
  }

  /* --- Phone navigation: bottom tab bar + "More" sheet (skin-layout.js).
     The top strip keeps only the logo + profile; the horizontal tab
     scroller was unusable with a thumb. --- */
  #skin-sidebar .tab-group {
    display: none;
  }
  #skin-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .tb-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: 0;
    background: transparent;
    color: var(--muted2);
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 500;
    padding: 4px 2px 2px;
    border-radius: 8px;
    cursor: pointer;
  }
  .tb-item::before {
    content: '';
    font-size: 17px;
    line-height: 1.15;
  }
  .tb-more::before {
    content: '⋯';
  }
  .tb-item.active {
    color: var(--text);
  }
  .tb-item.active::before {
    color: var(--pos);
  }
  .tb-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tb-item {
    min-height: 48px;
  }
  .tb-label {
    font-weight: 600;
    letter-spacing: 0.3px;
  }
  .tb-badge {
    position: absolute;
    top: 1px;
    left: calc(50% + 6px);
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pos);
    color: var(--bg);
    font-size: 9px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 8px;
  }
  .tb-badge[hidden] {
    display: none;
  }
  /* "More" sheet */
  #skin-tabsheet {
    display: block; /* overrides the desktop default-hide */
    position: fixed;
    inset: 0;
    z-index: 40;
  }
  #skin-tabsheet[hidden] {
    display: none;
  }
  .ts-scrim {
    position: absolute;
    inset: 0;
    background: var(--scrim);
    animation: t-fadeIn 0.15s ease both;
  }
  .ts-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 78vh;
    overflow-y: auto;
    background: var(--card2, var(--card));
    border-top: 1px solid var(--border2);
    border-radius: 22px 22px 0 0;
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--shadow-lg, 0 24px 80px rgba(0, 0, 0, 0.55));
    animation: t-fadeUp 0.2s ease both;
  }
  .ts-profile {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--subcard);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 13px 14px;
  }
  .ts-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--pos);
    color: var(--bg);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ts-ptext {
    flex: 1;
    min-width: 0;
  }
  .ts-addr {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ts-pstatus {
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 1px;
  }
  .ts-pstatus .profile-dot {
    color: var(--pos);
    font-size: 8px;
  }
  .ts-adminchip {
    font-size: 9.5px;
    color: var(--pos);
    background: rgba(62, 207, 142, 0.14);
    padding: 3px 8px;
    border-radius: 6px;
  }
  .ts-rows {
    background: var(--subcard);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .ts-chev {
    color: var(--muted4);
    font-size: 14px;
  }
  .ts-item[data-action='settings']::before {
    content: '⚙';
  }
  .ts-item[data-action='passkey']::before {
    content: '⛶';
  }
  .ts-item[data-action='pair']::before {
    content: '⧉';
  }
  .ts-item[data-action='platform']::before {
    content: '⌂';
  }
  .ts-item[data-action='access']::before {
    content: '⛊';
  }
  .ts-item[data-action='logout']::before {
    content: '⏻';
  }
  .ts-item[data-action='logout'] {
    color: var(--neg);
  }
  /* Same green marking for admin rows in the mobile "More" sheet. */
  .ts-item.admin-item {
    color: var(--pos);
  }
  .ts-item.admin-item .tab-badge {
    color: var(--pos);
    background: rgba(62, 207, 142, 0.14);
  }
  .ts-app {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted);
    padding: 2px 6px 0;
  }
  .ts-app .ts-ver {
    color: var(--pos);
  }
  .ts-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    border: 0;
    border-bottom: 1px solid var(--rowline);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    padding: 0 15px;
    text-align: left;
    cursor: pointer;
  }
  .ts-item:last-child {
    border-bottom: 0;
  }
  .ts-item::before {
    content: '';
    width: 18px;
    text-align: center;
    font-size: 14px;
    color: var(--muted);
  }
  .ts-item.active {
    background: var(--rowline);
  }
  .ts-item.active::before {
    color: var(--pos);
  }
  .ts-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ts-item .tab-badge {
    font-size: 10.5px;
    background: var(--border);
    color: var(--muted);
    padding: 1px 7px;
    border-radius: 20px;
  }
  /* Toasts float above the bar, not under it. */
  [data-skin='terminal'] .toasts {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  /* --- Phone hardening (PWA): the PAGE never scrolls sideways — any card or
     table wider than the viewport scrolls inside itself instead. --- */
  [data-skin='terminal'] #skin-main {
    overflow-x: hidden;
  }
  [data-skin='terminal'] .risk-section,
  [data-skin='terminal'] .adm-card,
  [data-skin='terminal'] .table-wrap,
  [data-skin='terminal'] .ov-txs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Tables keep their natural column widths and scroll within the card,
     instead of crushing 10+ columns into 390px. */
  [data-skin='terminal'] .risk-section table,
  [data-skin='terminal'] .adm-card table,
  [data-skin='terminal'] .table-wrap table,
  [data-skin='terminal'] .ov-txs table {
    width: max-content;
    min-width: 100%;
  }
  [data-skin='terminal'] .adm-row {
    flex-wrap: wrap;
  }
  [data-skin='terminal'] .set-tabs {
    flex-wrap: wrap;
  }
  /* (The position overlay is a full-page push-screen — rule above.) */
  /* iOS standalone (black-translucent status bar): keep the top bar below the
     notch and the content above the home indicator. env() is 0 in a normal tab. */
  #skin-sidebar {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
    padding-right: calc(14px + env(safe-area-inset-right, 0px));
  }
  [data-skin='terminal'] #skin-main {
    /* Clears the fixed bottom tab bar (~62px) plus the home indicator. */
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-skin='terminal'] *,
  .pos-row-wrap,
  .pre-chart {
    animation: none !important;
    transition: none !important;
  }
}

/* Scanner table (terminal): generic .risk-table cells are roomy (12/14px) — with 14+
   columns that's ~400px of pure padding and the table blows past the window. Compact
   the scan-table specifically; the wrap scrolls as the desktop fallback (the phone
   media block swaps the table for cards). */
/* Имя пула — ссылка, но колонка идентификации: цвет обычного текста, «ссылочность»
   проявляется на ховере (иначе весь столбец красится в синий скиновым правилом
   `[data-skin='terminal'] a`, которое перебивает .scan-pool-link по специфичности). */
[data-skin='terminal'] .pair-link { color: inherit; }
[data-skin='terminal'] .pair-link:hover { color: var(--accent); text-decoration: underline; }
/* Выбор ноги пополнения в zap-модалке: в терминале нужен явный контур, иначе
   сегменты сливаются с фоном карточки. */
[data-skin='terminal'] .zap-pay { border: 1px solid var(--border); background: transparent; }
[data-skin='terminal'] .zap-pay-btn.active { background: var(--border); color: var(--text); }
[data-skin='terminal'] .scan-pool-link { color: var(--text); }
[data-skin='terminal'] .scan-pool-link:hover { color: var(--accent); text-decoration: underline; }
[data-skin='terminal'] .scan-table th { padding: 8px 7px; letter-spacing: 0.4px; font-size: 10px; }
[data-skin='terminal'] .scan-table td { padding: 7px 7px; font-size: 11.5px; }
[data-skin='terminal'] .scanner-panel .table-wrap { overflow-x: auto; }

[data-skin='terminal'] .ov-dates {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--muted);
  padding: 2px 2px 0;
}

/* Сети KPI-оверлея — отдельная строка на всю ширину, без переносов (скролл). */
[data-skin='terminal'] .kpi-ov-nets { margin-bottom: 10px; overflow-x: auto; }
[data-skin='terminal'] .kpi-ov-nets .kpi-nets { flex-wrap: nowrap; width: max-content; }
[data-skin='terminal'] .kpi-ov .ov-body { padding-bottom: 14px; }

/* Фильтр кошельков в терминальном скине: тумблер и индикатор на своих токенах. */
html[data-skin='terminal'] .wallet-switch span { background: var(--chip-bg, var(--border)); }
html[data-skin='terminal'] .wallet-switch input:checked + span { background: var(--pos, var(--green)); }
html[data-skin='terminal'] .wallet-switch span::after { background: var(--card, var(--bg-card)); }
html[data-skin='terminal'] .wallet-filter-note {
  border-color: var(--amber, #f0ad4e); color: var(--amber, #f0ad4e);
  font-family: var(--mono, inherit); letter-spacing: 0.02em;
}

/* Прогноз: ряд ставок шире пятиколоночной сетки позиций — раскладываем по
   ширине, а не по фиксированному числу колонок. */
[data-skin='terminal'] .fc-kpis {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-column: auto;
  grid-row: auto;
  margin-bottom: 14px;
}