/*
  MARKOUT / SPATIAL LEDGER
  Visual-only Apple Vision Pro inspired layer for the frozen journal app.
  Calm black space, restrained violet glass and one warm passport signal.
*/

:root{
  --space-0:#050506;
  --space-1:#08080a;
  --space-2:#0d0c10;
  --glass-1:rgba(28,27,32,.66);
  --glass-2:rgba(36,34,41,.58);
  --glass-3:rgba(48,45,54,.42);
  --glass-hover:rgba(55,51,62,.54);
  --rim:rgba(255,255,255,.115);
  --rim-hi:rgba(255,255,255,.19);
  --divider:rgba(255,255,255,.065);

  --text:#f5f5f7;
  --muted:#aaa7b0;
  --dim:#74717b;
  --violet:#9b78ff;
  --violet-2:#b697ff;
  --violet-soft:rgba(155,120,255,.13);
  --tiffany:#b697ff;
  --gold:#d5b879;
  --warm:#ff9147;
  --warm-soft:rgba(255,145,71,.16);
  --up:#58c9a3;
  --down:#ef7185;

  --side-min:78px;
  --side:252px;
  --r:30px;

  /* Спільні вертикальні межі оболонки. Бічна панель і контент беруть
     відступи звідси, тому верх панелі завжди на одній лінії з плитками,
     а низ - на одній лінії з таблицею, з якого б виду не складалась
     сторінка і якої б висоти не був екран. */
  --shell-top:24px;
  --shell-bot:70px;
  /* наскільки контент відсувається, коли панель закріплена розгорнутою */
  --side-gap:24px;
}

html{overflow-x:hidden;background:var(--space-0)}
body{
  min-width:0;
  color:var(--text);
  background:
    radial-gradient(900px 650px at 86% -12%,rgba(142,105,233,.10),transparent 68%),
    radial-gradient(760px 640px at 12% 108%,rgba(96,70,158,.075),transparent 72%),
    linear-gradient(180deg,#070708,#050506 72%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  font-size:13.5px;
  line-height:1.55;
  letter-spacing:0;
  isolation:isolate;
}
body::before,
body::after{
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:-1;
  border-radius:50%;
  filter:blur(90px);
}
body::before{
  width:420px;
  height:420px;
  right:-160px;
  top:18%;
  background:rgba(143,103,232,.065);
}
body::after{
  width:560px;
  height:240px;
  left:22%;
  bottom:-170px;
  background:rgba(115,86,180,.055);
}
::selection{color:#fff;background:rgba(155,120,255,.38)}
a{color:#c4acff}
:focus-visible{outline:2px solid rgba(182,151,255,.72);outline-offset:3px}

/* Floating Vision rail. It grows over the canvas; content never shifts. */
.side{
  left:14px;
  top:14px;
  bottom:14px;
  width:var(--side-min);
  padding:14px 11px 12px;
  gap:12px;
  overflow:hidden;
  border:1px solid var(--rim);
  border-radius:30px;
  background:
    radial-gradient(150% 65% at 50% -5%,rgba(255,255,255,.075),transparent 48%),
    rgba(21,20,24,.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.105),
    0 28px 70px rgba(0,0,0,.42);
  backdrop-filter:blur(30px) saturate(145%);
  -webkit-backdrop-filter:blur(30px) saturate(145%);
  transition:
    width .38s cubic-bezier(.22,.8,.2,1),
    background-color .28s ease,
    box-shadow .28s ease;
  scrollbar-width:none;
}
.side:hover,
.side:has(:focus-visible),
.side.pin{
  width:var(--side);
  background:
    radial-gradient(150% 65% at 50% -5%,rgba(255,255,255,.09),transparent 48%),
    rgba(25,23,29,.80);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 32px 88px rgba(0,0,0,.52),
    18px 0 54px -42px rgba(155,120,255,.42);
}
.side::-webkit-scrollbar,
.side nav::-webkit-scrollbar{display:none}

.side .wordmark,
.side .who,
.side .navlab,
.side .sidefoot,
.side .nv span,
.side .phead,
.side .pstats,
.side .pfoot,
.side .sbtn .sl,
.side .sbtn .sv{
  opacity:0;
  max-width:0;
  overflow:hidden;
  white-space:nowrap;
  transform:translateX(-5px);
  pointer-events:none;
  transition:
    opacity .18s ease,
    max-width .36s cubic-bezier(.22,.8,.2,1),
    transform .26s ease;
}
.side:hover .wordmark,
.side:hover .who,
.side:hover .navlab,
.side:hover .sidefoot,
.side:hover .nv span,
.side:hover .phead,
.side:hover .pstats,
.side:hover .pfoot,
.side:hover .sbtn .sl,
.side:hover .sbtn .sv,
.side:has(:focus-visible) .wordmark,
.side:has(:focus-visible) .who,
.side:has(:focus-visible) .navlab,
.side:has(:focus-visible) .sidefoot,
.side:has(:focus-visible) .nv span,
.side:has(:focus-visible) .phead,
.side:has(:focus-visible) .pstats,
.side:has(:focus-visible) .pfoot,
.side:has(:focus-visible) .sbtn .sl,
.side:has(:focus-visible) .sbtn .sv,
.side.pin .wordmark,
.side.pin .who,
.side.pin .navlab,
.side.pin .sidefoot,
.side.pin .nv span,
.side.pin .phead,
.side.pin .pstats,
.side.pin .pfoot,
.side.pin .sbtn .sl,
.side.pin .sbtn .sv{
  opacity:1;
  max-width:190px;
  overflow:visible;
  transform:none;
  pointer-events:auto;
}
.side:hover .who,
.side:has(:focus-visible) .who,
.side.pin .who{height:auto;margin-top:5px}
.side:hover .navlab,
.side:has(:focus-visible) .navlab,
.side:hover .sidefoot,
.side:has(:focus-visible) .sidefoot,
.side.pin .navlab,
.side.pin .sidefoot{height:auto}

.mark{
  position:relative;
  flex:none;
  min-height:50px;
  padding:0 0 11px;
  border-bottom:1px solid transparent;
  transition:border-color .24s ease;
}
.side:hover .mark,
.side:has(:focus-visible) .mark,
.side.pin .mark{border-bottom-color:var(--divider)}
.logo,
.side:not(:hover):not(:has(:focus-visible)):not(.pin) .logo{
  min-height:44px;
  justify-content:flex-start;
  gap:10px;
  padding-left:7px;
}
.logo svg{width:42px;height:42px;flex:none}
.wordmark{
  color:#f6f4f8;
  font-size:14px;
  letter-spacing:.065em;
}
.wordmark span{
  color:#b697ff;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  animation:none;
}
.who{
  display:block;
  margin:2px 0 0 59px!important;
  padding:0;
  color:#82798b;
  font-size:7px;
  letter-spacing:.22em;
  text-align:left;
}
.plm{filter:drop-shadow(0 4px 10px rgba(0,0,0,.36))}
.plm-shell{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.14)}
.plm-ring circle{stroke:rgba(242,238,248,.34)}
.plm-trap{fill:rgba(155,120,255,.10)}
.plm-corridor{stroke:#9b78ff}
.plm-point{fill:#b697ff;filter:drop-shadow(0 0 2px rgba(182,151,255,.9))}

/* The Precision Lock reads through rotating rings and the travelling point.
   Keep the temporary route invisible so no line escapes the logo. */
.plm-corridor{display:none!important}

nav,
.side:not(:hover):not(:has(:focus-visible)):not(.pin) nav{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
}
.navlab,
.side:not(:hover):not(:has(:focus-visible)):not(.pin) .navlab{
  height:0;
  padding:0 12px;
  color:#716b78;
  font-size:7.5px;
  font-weight:650;
  letter-spacing:.14em;
}
.side:hover .navlab,
.side:has(:focus-visible) .navlab,
.side.pin .navlab{height:auto;padding:12px 12px 5px}
.nv{
  position:relative;
  flex:none;
  width:100%;
  min-height:46px;
  gap:13px;
  padding:10px 16px;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:15px;
  color:#9b97a1;
  font-size:12px;
  background:transparent;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease;
}
.nv svg{width:18px;height:18px;flex:none;color:#8b8691;opacity:1}
.nv:hover{
  color:#e9e7ec;
  border-color:rgba(255,255,255,.055);
  background:rgba(255,255,255,.042);
  transform:none;
}
.nv.on{
  color:#fff;
  border-color:rgba(202,185,255,.14);
  background:
    radial-gradient(100% 130% at 15% -10%,rgba(255,255,255,.09),transparent 48%),
    rgba(155,120,255,.115);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 26px rgba(0,0,0,.18);
}
.nv.on svg{color:#c5adff}
.side:not(:hover):not(:has(:focus-visible)):not(.pin) .nv{
  width:54px;
  padding:10px 17px;
  border-radius:18px;
}
.side:not(:hover):not(:has(:focus-visible)):not(.pin) .nv.on{
  background:
    radial-gradient(110% 100% at 40% 0,rgba(255,255,255,.10),transparent 55%),
    rgba(155,120,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 12px 28px -20px rgba(155,120,255,.7);
}
.sidefoot{margin-top:auto;color:#77717c;font-size:10px;line-height:1.6}
.sidebtm{flex:none;gap:6px;align-items:stretch}

/* Trader passport: warm, rare identity signal inside the violet OS. */
.pcard{
  position:relative;
  flex:none;
  width:100%;
  height:152px;
  padding:11px 11px 0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:
    radial-gradient(110% 95% at 16% -12%,rgba(255,255,255,.10),transparent 48%),
    rgba(27,25,29,.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 0 34px -18px rgba(255,145,71,.96),
    0 16px 38px -28px rgba(255,145,71,.56);
  transform:none;
  transition:
    width .38s cubic-bezier(.22,.8,.2,1),
    height .38s cubic-bezier(.22,.8,.2,1),
    padding .38s cubic-bezier(.22,.8,.2,1),
    border-radius .38s cubic-bezier(.22,.8,.2,1),
    box-shadow .24s ease,
    border-color .24s ease;
}
.pcard::after{
  content:"";
  position:absolute;
  left:17px;
  right:17px;
  bottom:-1px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--warm),transparent);
  opacity:.68;
  filter:blur(.2px);
}
.pcard:hover{
  transform:none;
  border-color:rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 44px -16px rgba(255,145,71,.92),
    0 18px 42px -26px rgba(255,145,71,.48);
}
.pctop{gap:10px;justify-content:flex-start}
.pav{
  width:42px;
  height:42px;
  flex:none;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.phead{display:block;min-width:0}
.pstats{display:flex;max-height:60px;margin:11px 0 9px}
.pfoot{
  display:flex;
  max-height:40px;
  margin:0 -11px;
  padding:9px 11px;
  border-top:1px solid var(--divider);
}
.pglyph{display:none}
.pnick{font-family:var(--ui);font-size:12px;font-weight:700;color:#f4f2f5}
.pid{color:#817b85}
.pst b{font-size:12px}
.pst i{color:#716b75}
.parr{color:var(--warm)}
.side:not(:hover):not(:has(:focus-visible)):not(.pin) .pcard{
  width:54px;
  height:54px;
  padding:5px;
  border-radius:19px;
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 30px -13px rgba(255,145,71,.95),
    0 12px 30px -22px rgba(255,145,71,.68);
}
.side:not(:hover):not(:has(:focus-visible)):not(.pin) .pav{width:42px;height:42px;border-radius:50%}
.side:not(:hover):not(:has(:focus-visible)):not(.pin) .pctop{gap:0;justify-content:flex-start}
.side:not(:hover):not(:has(:focus-visible)):not(.pin) .pstats{max-height:0;margin:0}
.side:not(:hover):not(:has(:focus-visible)):not(.pin) .pfoot{max-height:0;padding:0;border-color:transparent}

main{
  margin-left:104px;
  min-width:0;
  min-height:100%;
  padding:28px clamp(22px,2.6vw,48px) 78px;
  transition:none;
}
#view{min-width:0}

/* KPI lenses: equal rhythm, no oversized gaming tile. */
.topbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:12px;
  margin:0 0 26px;
}
.topbar .strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:10px;
  margin:0;
  padding:0;
  overflow:visible;
  border:0;
  background:none;
}
.kpi,
.topbar .kpi,
.kpi.card.pad{
  position:relative;
  min-width:0;
  padding:13px 15px;
  overflow:hidden;
  border:1px solid var(--rim);
  border-radius:22px;
  background:
    radial-gradient(120% 85% at 16% -12%,rgba(255,255,255,.09),transparent 47%),
    rgba(29,28,33,.57);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.095),0 18px 42px rgba(0,0,0,.24);
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.topbar .kpi:first-child,
.topbar .kpi:nth-child(3n),
.topbar .kpi:nth-child(3n+2){border-radius:22px}
.topbar .kpi::after,
.row>.kpi::after,
.newshead>.kpi::after{
  content:"";
  position:absolute;
  top:-1px;
  left:16%;
  width:44%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.36),transparent);
  opacity:.7;
}
.kpi:hover{
  transform:none;
  border-color:var(--rim-hi);
  background-color:rgba(38,36,43,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 20px 46px rgba(0,0,0,.27);
}
.kpi .k{
  gap:6px;
  color:#85818a;
  font-size:8.5px;
  font-weight:650;
  letter-spacing:.09em;
}
.kpi .k::before{width:4px;height:4px;border-radius:50%;box-shadow:none!important}
.kpi .v,
.topbar .kpi .v,
.topbar .kpi:first-child .v{
  margin-top:7px;
  color:#f1eff3;
  font-size:19px;
  font-weight:680;
  letter-spacing:-.035em;
}
.kpi .v .u{color:#7f7984;font-size:9px;letter-spacing:.04em}
.topctl{
  align-self:start;
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px;
  border:1px solid var(--rim);
  border-radius:999px;
  background:
    radial-gradient(90% 70% at 40% -20%,rgba(255,255,255,.11),transparent 58%),
    rgba(28,27,32,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 44px rgba(0,0,0,.27);
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
}

/* Quiet liquid-glass controls. */
.btn,
.icobtn,
.sbtn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:39px;
  border:1px solid rgba(255,255,255,.125);
  border-radius:999px;
  color:#eceaf0;
  background:
    radial-gradient(90% 75% at 50% -20%,rgba(255,255,255,.16),transparent 60%),
    rgba(255,255,255,.052);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 10px 28px rgba(0,0,0,.24);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease;
}
.btn{padding:8px 16px}
.btn:hover,
.icobtn:hover,
.sbtn:hover{
  color:#fff;
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.20);
  background-color:rgba(255,255,255,.075);
  filter:none;
}
.btn.primary{
  color:#fff;
  border-color:rgba(200,183,255,.22);
  background:
    radial-gradient(90% 75% at 50% -20%,rgba(255,255,255,.22),transparent 58%),
    rgba(142,105,236,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 32px rgba(49,31,91,.27);
}
.btn.ghost{background:rgba(255,255,255,.025)}
.btn.danger{color:var(--down)}
.btn.seg.on{
  color:#fff;
  border-color:rgba(200,183,255,.21);
  background:
    radial-gradient(100% 80% at 50% -20%,rgba(255,255,255,.15),transparent 58%),
    rgba(155,120,255,.18);
}
.icobtn{width:39px;height:39px;padding:0}
.icobtn.sm{width:31px;height:31px;min-height:31px}
.icobtn.on{color:#c7b2ff;background-color:rgba(155,120,255,.10)}
.sbtn{width:100%;height:auto;justify-content:flex-start;padding:8px 12px}
.side:not(:hover):not(:has(:focus-visible)):not(.pin) .sbtn{
  width:54px;
  height:44px;
  padding:0;
  justify-content:center;
}
.sbtn .sv{margin-left:auto;padding:0;border:0;color:#b697ff;background:none}
.icobtn.uav,
.icobtn.uav:hover{
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  transform:none;
  overflow:hidden;
}
.icobtn.uav img{
  width:37px;
  height:37px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  object-fit:cover;
}
.uin{border-radius:50%;background:#9b78ff;color:#fff}

.inp,
select.inp{
  min-height:40px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  color:var(--text);
  background:rgba(255,255,255,.038);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.inp:focus{
  outline:none;
  border-color:rgba(182,151,255,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 4px rgba(155,120,255,.085);
}

/* Spatial windows. */
.row{gap:16px}
.section{margin-top:24px}
.card,
.plancard,
.pod,
.sigpanel{
  position:relative;
  overflow:hidden;
  border:1px solid var(--rim);
  border-radius:30px;
  background:
    radial-gradient(110% 80% at 16% -10%,rgba(255,255,255,.075),transparent 48%),
    rgba(24,23,27,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.095),0 28px 68px rgba(0,0,0,.31);
  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
}
.row>.card:nth-child(even),
.planrow>.plancard:nth-child(even),
.podium>.pod:nth-child(even){border-radius:30px}
.card{padding:24px 26px}
.card::before,
.plancard::before,
.pod::before,
.sigpanel::before{display:none}
.card h3{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 17px;
  color:#9a959f;
  opacity:1;
  font-size:9px;
  font-weight:650;
  letter-spacing:.11em;
}
.card h3::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg,var(--divider),transparent);
}
.pgtitle{font-family:var(--ui);font-size:clamp(26px,2vw,34px);font-weight:700;letter-spacing:-.038em;line-height:1.08}
.pgsub{color:#a49faa;font-size:13.5px}
.scope{
  max-width:860px;
  margin:0 0 22px;
  padding:13px 16px;
  border:1px solid rgba(255,255,255,.075);
  border-left:2px solid rgba(182,151,255,.62);
  border-radius:8px 18px 18px 8px;
  color:#9a95a0;
  background:rgba(255,255,255,.022);
  font-size:11.5px;
}
.mtitle{font-family:var(--ui);font-size:17px;font-weight:700;letter-spacing:-.02em}
.empty{color:#7a7580}
.hint{color:#827d87}

/* Tables: the quiet, opaque reading layer. */
.tablebox{
  max-width:100%;
  max-height:calc(100vh - 220px);
  overflow:auto;
  border:1px solid var(--rim);
  border-radius:25px;
  background:rgba(15,14,17,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  scrollbar-color:#3e3848 transparent;
}
.tablebox::-webkit-scrollbar{width:9px;height:9px}
.tablebox::-webkit-scrollbar-thumb{background:#3e3848;border:2px solid #100f12;border-radius:9px}
table{font-size:13px;line-height:1.48}
thead th{
  top:0;
  padding:13px 14px;
  color:#96929d;
  background:rgba(27,26,30,.98);
  border-bottom:1px solid var(--divider);
  font-family:var(--ui);
  font-size:9px;
  font-weight:650;
  letter-spacing:.09em;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
tbody td{
  padding:12px 14px;
  color:#c4c1c9;
  border-bottom:1px solid rgba(255,255,255,.038);
}
tbody td.l,
tbody td.num{color:#dedbe1}
tbody tr:not(.grp):hover td{color:#f4f2f6;background:rgba(155,120,255,.045)}
.fundcard tbody tr:hover td{background:rgba(155,120,255,.05)}
tbody tr:not(.grp):hover td:first-child{border-radius:10px 0 0 10px}
tbody tr:not(.grp):hover td:last-child{border-radius:0 10px 10px 0}
tr.grp td{
  padding:27px 14px 10px;
  background:#100f12;
  border-bottom:1px solid var(--divider);
}
tr.grp:first-child td{padding-top:13px}
tr.grp .rom{
  color:#b697ff;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  font-family:var(--ui);
  font-size:14px;
  font-weight:750;
}
tr.grp .caret{color:#a889f8}
tr.grp .mn{color:#dedbe1}
.fact{border-color:rgba(182,151,255,.28)}
.stars{color:#c5adff}

.tier{
  color:#c8b7ef!important;
  border:1px solid rgba(190,169,255,.20)!important;
  background:rgba(155,120,255,.07)!important;
}
.tier.plan{padding:5px 10px;border-radius:999px}
.pill{padding:3px 9px;background:rgba(255,255,255,.045);color:#aaa5af}
.pill.take{color:#73d2b2;background:rgba(88,201,163,.10)}
.pill.stop{color:#f18394;background:rgba(239,113,133,.10)}
.pill.proc{color:#bca6ee;background:rgba(155,120,255,.09)}
.pill.exit{color:#aaa5af}

/* Calendar, charts and internal panes. */
.calwrap{gap:16px}
.cal{gap:7px}
.cal .dow{color:#77717c;font-size:9px}
.day,
.wk,
.sigcard,
.myrow,
.pubrow{
  position:relative;
  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;
  background:rgba(255,255,255,.026);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.day{min-height:82px;padding:9px 10px}
.day:nth-child(3n){border-radius:18px}
.day.win,.wk.win{border-color:rgba(88,201,163,.20);background:rgba(88,201,163,.045);box-shadow:none}
.day.loss,.wk.loss{border-color:rgba(239,113,133,.20);background:rgba(239,113,133,.042);box-shadow:none}
.wk{padding:12px 14px}
.day .d,.day .n,.wkrow .k{color:#77717c}
.hbt{height:6px;background:#25212c}
.hbf.p{background:linear-gradient(90deg,#8f6af0,#c3a6ff);box-shadow:0 0 14px -7px rgba(155,120,255,.65)}
.hbf.n{background:linear-gradient(90deg,#a84458,var(--down));box-shadow:none}
.ribbon i{border-radius:2px}
.ribbon i.w{background:linear-gradient(180deg,#a07cf7,#58c9a3)}
.ribbon i.l{background:linear-gradient(180deg,var(--down),rgba(239,113,133,.36))}
.legend{color:#8c8791}

/* News, leaderboard, signals and plans. */
.newshead,.newstitle{margin-bottom:20px}
.newswrap{min-width:0;gap:18px;overflow:hidden}
.newslist,.newsside{min-width:0;overflow:hidden}
.newslist{padding:4px 0}
.newsday{
  color:#b697ff;
  background:none;
  -webkit-text-fill-color:currentColor;
  font-family:var(--ui);
}
.newsrow{min-height:48px;border-left-width:2px}
.newsrow:hover{background:rgba(155,120,255,.028)}
.newsrow.on{background:rgba(155,120,255,.065)}
.ncur{border-color:rgba(255,255,255,.10);background:#17151a}
.newsdayhead{color:#88828d}
.tlline{height:1px;background:#2d2834}
.tld.on{outline-color:#aa87ff}
.aicard,.newsside .aicard{background:rgba(24,23,27,.78)}
.volbar{background:#27222f}
.volbar div{background:linear-gradient(90deg,#8f69ef,#c7acff)}
.aitags span{color:#c8c1d0;border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.035)}
.aigrid.three{border-color:var(--divider)}
.aigrid.three>div{border-color:var(--divider)}
.aidet div,.cfeed .crow{border-color:var(--divider)}
.hotbar,.lockbar{
  border:1px solid rgba(190,169,255,.13);
  border-radius:18px;
  background:linear-gradient(90deg,rgba(155,120,255,.06),rgba(255,255,255,.018));
  color:#a39ea8;
}
.hotdot{box-shadow:none}
.hotline{height:2px;background:#27222f}
.hotline div{background:linear-gradient(90deg,#8f69ef,#c7acff)}
.podium{gap:12px;margin-top:10px}
.pod{padding:18px 12px;background:rgba(24,23,27,.76);border-color:var(--rim);box-shadow:none}
.pod.p1{border-color:rgba(190,169,255,.24);box-shadow:0 24px 44px -38px rgba(155,120,255,.72);transform:translateY(-4px)}
.pod.p2,.pod.p3{border-color:var(--rim)}
.pod.p1 .place{color:#b697ff}
tr.lead td{background:rgba(155,120,255,.03)}
.myrow,.pubrow{border-color:rgba(190,169,255,.17);background:rgba(255,255,255,.02)}
.sigwrap{gap:18px}
.sigpanel{background:rgba(24,23,27,.78);border-color:var(--rim)}
.sigcard{border-color:rgba(190,169,255,.20);background:rgba(155,120,255,.055);box-shadow:none}
.sigrow b.gold{color:#d5b879}
.plancard{gap:11px;padding:23px;background:rgba(24,23,27,.78);border-color:var(--rim);box-shadow:none}
.plancard.cur{border-color:rgba(190,169,255,.27);box-shadow:0 30px 60px -48px rgba(155,120,255,.85)}
.planhead .tier{font-size:10px}
.planprice{font-size:31px;color:#f5f2f7}
.planper,.plantag,.planfeats{color:#9c97a1}
.passwrap{filter:drop-shadow(0 32px 54px rgba(0,0,0,.72))}
.passwrap:hover{transform:none;filter:drop-shadow(0 36px 60px rgba(0,0,0,.78)) drop-shadow(0 0 42px rgba(255,145,71,.12))}

/* Dialogs, menus and avatar gallery. */
.mask{background:rgba(0,0,0,.58);backdrop-filter:blur(18px) saturate(110%);-webkit-backdrop-filter:blur(18px) saturate(110%)}
.modal,
.umenu,
.toast{
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(120% 80% at 20% -10%,rgba(255,255,255,.11),transparent 46%),
    rgba(29,27,33,.86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 38px 90px rgba(0,0,0,.50);
  backdrop-filter:blur(34px) saturate(145%);
  -webkit-backdrop-filter:blur(34px) saturate(145%);
}
.modal{border-radius:30px;padding:28px}
.modal h2{font-family:var(--ui);font-size:21px;letter-spacing:-.03em}
.umenu{border-radius:24px}
.umenu .umi:hover{background:rgba(155,120,255,.055)}
.avgrid{gap:9px}
.avq{padding:3px;border:1px solid transparent;border-radius:50%;box-shadow:none}
.avq:hover{transform:translateY(-1px);border-color:rgba(190,169,255,.26);box-shadow:none}
.avq.on{border-color:#b697ff;box-shadow:0 0 0 2px rgba(155,120,255,.085)}
.avq img{border-radius:50%}

/* Semantic colours stay data-only. */
.up{color:var(--up)!important}
.down{color:var(--down)!important}
.neutral{color:var(--muted)!important}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .side,.topctl,.btn,.icobtn,.sbtn,.modal,.umenu,.toast{background-color:#17151a}
}

@media(min-width:1081px){
  .topbar .strip{grid-template-columns:repeat(9,minmax(0,1fr))}
}

@media(max-width:1400px){
  .topbar{grid-template-columns:1fr}
  .topctl{justify-self:end}
  .topbar .strip{width:100%}
}

@media(max-width:1080px) and (min-width:901px){
  main{padding-left:20px;padding-right:20px}
  .topbar .strip{grid-template-columns:repeat(3,minmax(112px,1fr))}
  .planrow{gap:12px}
}

@media(max-width:900px){
  :root{--side-min:0px;--side:0px}
  body{font-size:13px;background-attachment:scroll}
  body::before{width:300px;height:300px;right:-190px;top:28%;filter:blur(72px)}
  body::after{display:none}
  .side,
.side:hover,
.side:has(:focus-visible),
.side.pin{
    position:fixed;
    left:10px;
    right:10px;
    top:auto;
    bottom:max(10px,env(safe-area-inset-bottom));
    z-index:70;
    width:auto;
    height:68px;
    min-height:68px;
    margin:0;
    padding:8px 10px;
    flex-direction:row;
    align-items:center;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    border-radius:25px;
    background:
      radial-gradient(100% 110% at 30% -20%,rgba(255,255,255,.12),transparent 56%),
      rgba(29,27,33,.82);
    backdrop-filter:blur(24px) saturate(150%);
    -webkit-backdrop-filter:blur(24px) saturate(150%);
  }
  .mark{flex:none;min-height:0;padding:0 8px 0 0;border:0;border-right:1px solid var(--divider)}
  .logo,.side:not(:hover):not(:has(:focus-visible)):not(.pin) .logo{min-height:0;padding:0;gap:0}
  .logo svg{width:40px;height:40px}
  .wordmark,.who,.side .who,.side .sidefoot{display:none!important}
  .side .pcard{display:none}
  .side nav,.side:not(:hover):not(:has(:focus-visible)):not(.pin) nav{
    flex:1;
    flex-direction:row;
    gap:5px;
    overflow-x:auto;
    overflow-y:hidden;
  }
  .side .navlab{display:none}
  .nv,.side:not(:hover):not(:has(:focus-visible)):not(.pin) .nv{
    width:46px;
    min-width:46px;
    min-height:46px;
    padding:0;
    justify-content:center;
    border-radius:17px;
  }
  .nv span,.side .nv span{display:none!important}
  .nv:hover{transform:none}
  .nv.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px -18px rgba(155,120,255,.85)}
  .sidebtm{display:none}
  main{margin-left:0;padding:20px 14px 104px}
  #view{min-width:0;overflow-x:hidden}
  .topbar{gap:10px;margin-bottom:22px}
  .topbar .strip{
    display:flex;
    flex-wrap:nowrap;
    width:100%;
    gap:8px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:0 1px 6px;
  }
  .topbar .kpi{min-width:146px;scroll-snap-align:start}
  .topctl{justify-self:stretch;justify-content:flex-end;overflow-x:auto}
  .card{padding:19px 17px;border-radius:24px}
  .row{gap:14px}
  .section{margin-top:20px}
  .tablebox{max-height:none;border-radius:22px}
  thead th,tbody td{padding-left:12px;padding-right:12px}
  .cal{gap:5px}
  .day{min-height:66px;padding:7px;border-radius:15px}
  .planrow{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:7px}
  .plancard{min-width:min(82vw,330px);scroll-snap-align:start;border-radius:24px}
  .sigwrap{height:auto;min-height:0;flex-direction:column}
  .sigpanel{width:auto;border-radius:24px}
  .newstitle{flex-direction:column;align-items:stretch;gap:14px}
  .newstools{width:100%;min-width:0;flex-wrap:wrap;justify-content:flex-start;gap:8px}
  .newsside{gap:12px}
  .row>.card[style*="width:392px"],
  .row>.card[style*="width:300px"],
  .row>.card[style*="min-width:262px"]{width:100%!important;min-width:0!important}
  .modal{padding:22px 18px;border-radius:25px}
}

@media(max-width:620px){
  .topbar .kpi .v{font-size:18px}
  .pgtitle{font-size:24px}
  .newsrow{gap:10px;padding-left:10px;padding-right:10px}
  .nval{display:none}
  .newsside{flex-direction:column}
  .avgrid{grid-template-columns:repeat(5,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .plm *{animation:none!important}
  .side,.btn,.icobtn,.sbtn,.nv,.kpi,.pcard{transition:none!important}
}

/* Statistical widgets: a quiet violet canopy, with one rare warm signal. */
#strip > .kpi{
  position:relative;
  min-width:0;
  padding:14px 15px 14px 17px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.115);
  border-radius:20px;
  background:
    radial-gradient(86% 58% at 50% -10%,rgba(155,120,255,.20),transparent 70%),
    linear-gradient(180deg,rgba(27,25,33,.94),rgba(10,9,12,.93));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.105),
    0 18px 42px -30px rgba(0,0,0,.96);
  backdrop-filter:blur(20px) saturate(128%);
  -webkit-backdrop-filter:blur(20px) saturate(128%);
}
#strip > .kpi::after{
  content:"";
  position:absolute;
  top:0;
  left:22%;
  width:56%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(182,151,255,.74),transparent);
  box-shadow:0 0 16px 4px rgba(155,120,255,.13);
  opacity:1;
  pointer-events:none;
}
#strip > .kpi:first-child::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:2px;
  height:30px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,rgba(255,184,105,.34),#ff9a48 48%,rgba(255,126,39,.40));
  box-shadow:0 0 12px rgba(255,145,71,.34);
  transform:translateY(-50%);
  pointer-events:none;
}
#strip > .kpi .k::before{display:none}
#strip > .kpi .k{color:#8d8994;letter-spacing:.10em}
#strip > .kpi .v{margin-top:7px;font-size:19px;line-height:1.08;white-space:nowrap}
#strip > .kpi:first-child .v{
  font-size:clamp(24px,1.8vw,29px);
  font-weight:720;
  letter-spacing:-.045em;
}
#strip > .kpi:hover{
  transform:none;
  border-color:rgba(255,255,255,.19);
  background:
    radial-gradient(86% 58% at 50% -10%,rgba(155,120,255,.25),transparent 70%),
    linear-gradient(180deg,rgba(31,28,39,.96),rgba(11,10,14,.95));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 20px 46px -30px rgba(87,55,163,.42);
}

@media(max-width:900px){
  #strip > .kpi{
    min-width:146px;
    padding:12px 13px 12px 16px;
    border-radius:18px;
  }
  #strip > .kpi:first-child .v{font-size:22px}
  #strip > .kpi:first-child::before{height:26px}
}

@media(min-width:1081px) and (max-width:1400px){
  #strip > .kpi{padding-left:10px;padding-right:10px}
  #strip > .kpi .k{font-size:7.6px;letter-spacing:.075em}
  #strip > .kpi .v{font-size:17px}
  #strip > .kpi:first-child .v{font-size:24px}
}

/* ========================================================================
   MARKOUT / BLACK ORBIT — final visual pass
   Pure black canvas, restrained spectral light, compact data-first windows.
   This block intentionally overrides the experimental layers above without
   touching the frozen application logic or data semantics.
   ======================================================================== */

:root{
  --space-0:#000;
  --space-1:#030304;
  --space-2:#070708;
  --glass-1:rgba(12,12,14,.90);
  --glass-2:rgba(17,16,20,.88);
  --glass-3:rgba(25,23,29,.72);
  --rim:rgba(255,255,255,.105);
  --rim-hi:rgba(255,255,255,.18);
  --divider:rgba(255,255,255,.065);
  --text:#f7f7f8;
  --muted:#aaa8b0;
  --dim:#706d77;
  --violet:#8d62ff;
  --violet-2:#c184ff;
  --blue:#397dff;
  --cyan:#47d3e7;
  --warm:#ff7a28;
  --warm-2:#ffad57;
  --up:#53d4aa;
  --down:#ff667f;
  --side-min:72px;
  --side:244px;
  --r:22px;
}

html{background:#000}
body{
  color:var(--text);
  background:#000;
  background-attachment:scroll;
}

body::before,
body::after{
  inset:0;
  width:auto;
  height:auto;
  border-radius:0;
  filter:none;
  contain:paint;
  z-index:0;
}
body::before{
  /* v11.15: приглушена фонова абстракція (замість кіл на воді) - на всіх сторінках */
  background:url("markout-abstract-bg.webp?v=1") no-repeat 54% 40% / max(112vw,1500px) auto;
  opacity:.2;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),#000 52%,rgba(0,0,0,.16) 97%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),#000 52%,rgba(0,0,0,.16) 97%);
}
body::after{
  background:
    radial-gradient(46% 34% at 78% 8%,rgba(121,66,255,.105),transparent 74%),
    radial-gradient(30% 22% at 12% 54%,rgba(29,90,255,.065),transparent 76%),
    radial-gradient(18% 16% at 97% 37%,rgba(255,112,29,.042),transparent 76%);
  opacity:1;
}
body > main{position:relative;z-index:1}

/* Full-height rail: quiet when closed,
compact and complete when opened. */
.side,
.side:hover,
.side:has(:focus-visible),
.side.pin{
  top:var(--shell-top);
  bottom:var(--shell-bot);
  padding:10px 9px;
  gap:8px;
  border-radius:25px;
  border-color:rgba(255,255,255,.11);
  background:
    radial-gradient(130% 42% at 50% -8%,rgba(121,86,191,.105),transparent 57%),
    rgba(13,12,15,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.095),
    0 24px 68px rgba(0,0,0,.56);
  backdrop-filter:blur(16px) saturate(124%);
  -webkit-backdrop-filter:blur(16px) saturate(124%);
  transition:width .29s cubic-bezier(.22,.8,.2,1);
}
.side{left:12px;width:var(--side-min)}
.side:hover,
.side:has(:focus-visible),
.side.pin{width:var(--side)}
.mark{min-height:43px;padding:0 0 6px}
.logo,
.side:not(:hover):not(:has(:focus-visible)):not(.pin) .logo{min-height:37px;padding-left:7px;gap:9px}
.logo svg{width:36px;height:36px}
.wordmark{font-size:12.5px;letter-spacing:.075em}
.who{margin:0 0 0 52px!important;font-size:6.5px;letter-spacing:.19em}
.side:hover .who,
.side:has(:focus-visible) .who,
.side.pin .who{margin-top:1px!important}

nav,
.side:not(:hover):not(:has(:focus-visible)):not(.pin) nav{gap:0;overflow-y:hidden}
.navlab,
.side:not(:hover):not(:has(:focus-visible)):not(.pin) .navlab{padding:0 10px;font-size:6.8px}
.side:hover .navlab,
.side:has(:focus-visible) .navlab,
.side.pin .navlab{padding:6px 10px 3px}
.nv{
  min-height:35px;
  gap:10px;
  padding:6px 12px;
  border-radius:13px;
  font-size:11.5px;
}
.nv svg{width:16px;height:16px}
.side:not(:hover):not(:has(:focus-visible)):not(.pin) .nv{
  width:50px;
  min-height:40px;
  padding:7px 16px;
  border-radius:16px;
}
.nv.on{
  border-color:rgba(147,109,255,.17);
  background:
    radial-gradient(105% 120% at 18% -25%,rgba(255,255,255,.105),transparent 48%),
    rgba(111,71,211,.14);
}
.sidefoot{font-size:8.7px;line-height:1.32}
.sidefoot div[style]{margin-top:4px!important}
.sidebtm{gap:5px}
.sbtn{min-height:34px;padding:6px 10px}
.side:not(:hover):not(:has(:focus-visible)):not(.pin) .sbtn{width:50px;height:40px}

/* Passport card: the one intentionally warm, assertive object in the rail. */
#pcard > .pcard{
  height:126px;
  padding:9px 10px 0;
  border-color:rgba(255,163,90,.27);
  border-radius:20px;
  background:
    radial-gradient(100% 65% at 46% -18%,rgba(255,152,73,.105),transparent 62%),
    linear-gradient(180deg,rgba(18,17,20,.98),rgba(9,9,11,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,211,171,.20),
    inset 0 -1px 0 rgba(255,123,39,.12),
    0 0 0 1px rgba(255,117,31,.055),
    0 0 30px -7px rgba(255,112,30,.31),
    0 18px 38px -27px rgba(255,98,18,.88);
}
#pcard > .pcard::before{
  content:"";
  position:absolute;
  z-index:0;
  top:-1px;
  left:16%;
  width:68%;
  height:30px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 0,rgba(255,171,100,.25),transparent 70%);
  pointer-events:none;
}
#pcard > .pcard::after{
  left:12px;
  right:12px;
  height:1px;
  opacity:1;
  filter:none;
  background:linear-gradient(90deg,transparent,#ff6b1b 22%,#ffb15f 50%,#ff6b1b 78%,transparent);
  box-shadow:0 0 15px rgba(255,105,24,.42);
}
#pcard > .pcard:hover{
  border-color:rgba(255,174,100,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,222,191,.24),
    inset 0 -1px 0 rgba(255,123,39,.16),
    0 0 0 1px rgba(255,117,31,.07),
    0 0 38px -5px rgba(255,112,30,.42),
    0 20px 42px -26px rgba(255,98,18,.94);
}
#pcard .pav{width:38px;height:38px;border-color:rgba(255,178,113,.34)}
#pcard .pctop{gap:9px}
#pcard .pnick{font-size:11.5px}
#pcard .pid{font-size:8px}
#pcard .pstats{max-height:52px;margin:7px 0 6px}
#pcard .pst b{font-size:11px}
#pcard .pst i{font-size:6.5px}
#pcard .pfoot{max-height:34px;margin:0 -10px;padding:6px 10px;font-size:9px}
.side:not(:hover):not(:has(:focus-visible)):not(.pin) #pcard > .pcard{
  width:50px;
  height:50px;
  padding:5px;
  border-radius:17px;
}
.side:not(:hover):not(:has(:focus-visible)):not(.pin) #pcard .pav{width:38px;height:38px}

main{
  margin-left:96px;
  padding:var(--shell-top) clamp(18px,2.15vw,38px) var(--shell-bot);
  transition:margin-left .29s cubic-bezier(.22,.8,.2,1);
}

/* Compact data widgets — luminous cap, crisp hierarchy, no expensive blur. */
.topbar{
  align-items:start;
  gap:12px;
  margin-bottom:20px;
}
.topbar .strip{gap:8px}
.kpi,
.topbar .kpi,
.kpi.card.pad,
#strip > .kpi{
  min-height:92px;
  padding:17px 12px 12px 14px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:19px;
  background:
    linear-gradient(180deg,rgba(89,53,150,.14),transparent 34%),
    linear-gradient(180deg,#131116,#070708 70%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 17px 38px -30px rgba(0,0,0,.98);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:border-color .16s ease,background-color .16s ease;
}
#strip > .kpi::after{
  top:-1px;
  left:7%;
  width:86%;
  height:34px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 0,rgba(188,140,255,.34),rgba(100,59,175,.11) 42%,transparent 72%);
  box-shadow:none;
  opacity:1;
}
#strip > .kpi:nth-child(3n)::after{
  background:radial-gradient(ellipse at 50% 0,rgba(68,122,255,.30),rgba(54,92,184,.09) 44%,transparent 72%);
}
#strip > .kpi:first-child::before{
  left:0;
  top:17px;
  width:2px;
  height:38px;
  transform:none;
  background:linear-gradient(180deg,rgba(255,184,105,.25),#ff7a28 48%,rgba(255,106,25,.25));
  box-shadow:0 0 12px rgba(255,113,33,.52);
}
#strip > .kpi .k{
  position:relative;
  z-index:1;
  color:#8d8993;
  font-size:7.7px;
  line-height:1.25;
  letter-spacing:.105em;
}
#strip > .kpi .v,
#strip > .kpi:first-child .v{
  position:relative;
  z-index:1;
  margin-top:9px;
  color:#fbfafc;
  font-size:clamp(18px,1.28vw,24px);
  font-weight:660;
  letter-spacing:-.047em;
}
#strip > .kpi:first-child .v{font-size:clamp(25px,1.65vw,31px)}
#strip > .kpi .v .u{color:#77727d;font-size:8px}
#strip > .kpi:hover{
  transform:none;
  border-color:rgba(255,255,255,.18);
  background:
    linear-gradient(180deg,rgba(102,59,177,.18),transparent 36%),
    linear-gradient(180deg,#151219,#080809 70%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 17px 38px -30px rgba(0,0,0,.98);
}

/* A single Vision-style control capsule, not a row of separate rings. */
#topctl.topctl{
  gap:1px;
  padding:4px;
  min-height:46px;
  border-color:rgba(255,255,255,.13);
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),transparent 46%),
    rgba(13,13,15,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 38px -28px rgba(0,0,0,.95);
  backdrop-filter:blur(14px) saturate(122%);
  -webkit-backdrop-filter:blur(14px) saturate(122%);
}
#topctl > .tier.plan{
  min-height:36px;
  padding:7px 13px!important;
  border:0!important;
  border-radius:17px!important;
  color:#e4d7ff!important;
  background:linear-gradient(180deg,rgba(159,113,255,.26),rgba(98,62,180,.14))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 8px 20px -15px rgba(143,91,255,.9)!important;
}
#topctl > .icobtn:not(.uav){
  width:38px;
  height:38px;
  min-height:38px;
  padding:0;
  border:0;
  border-radius:15px;
  color:#aaa7b0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
#topctl > .icobtn:not(.uav):hover{
  color:#fff;
  background:rgba(255,255,255,.075);
  transform:none;
}
#topctl > .icobtn.uav{width:38px;height:38px;margin-left:2px}
#topctl > .icobtn.uav img,
#topctl > .icobtn.uav .uin{width:38px;height:38px;border-color:rgba(183,145,255,.36)}

/* Calm, thin reading windows. Bright values sit on opaque black surfaces. */
.btn,.icobtn,.sbtn{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.row{gap:12px}
.section{margin-top:18px}
.card,
.plancard,
.pod,
.sigpanel{
  border-color:rgba(255,255,255,.095);
  border-radius:21px;
  background:rgba(9,9,11,.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 22px 54px -42px rgba(0,0,0,.98);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.row>.card:nth-child(even),
.planrow>.plancard:nth-child(even),
.podium>.pod:nth-child(even){border-radius:21px}
#view .card{padding:17px 19px}
#view .card::before,
#view .plancard::before,
#view .pod::before,
#view .sigpanel::before{
  content:"";
  display:block;
  position:absolute;
  top:-1px;
  left:12%;
  width:30%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(157,112,255,.55),transparent);
  box-shadow:0 0 14px 2px rgba(119,73,226,.12);
  pointer-events:none;
}
#view .row > .card:nth-child(3n+2)::before{
  background:linear-gradient(90deg,transparent,rgba(57,125,255,.48),transparent);
}
.card h3{margin-bottom:12px;font-size:8px}
.pgtitle{font-size:clamp(25px,1.85vw,32px)}
.pgsub{color:#a7a4ad}

/* Data tables regain the space previously consumed by thick nesting. */
#view .card:has(> .tablebox),
#view .card.section:has(> .tablebox){padding:11px 12px 12px}
#view .card:has(> .tablebox) > h3,
#view .card.section:has(> .tablebox) > h3{margin:2px 6px 9px}
.tablebox{
  max-height:calc(100vh - 190px);
  border-color:rgba(255,255,255,.08);
  border-radius:14px;
  background:#060607;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
table{font-size:12.5px}
thead th{
  padding:10px 12px;
  color:#92909a;
  background:#111113;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
tbody td{padding:10px 12px}
tr.grp td{padding:20px 12px 8px;background:#080809}
tr.grp:first-child td{padding-top:10px}

/* Subscription and demo labels behave like luminous system states. */
.tier{
  display:inline-flex!important;
  align-items:center;
  gap:5px;
  padding:3px 8px!important;
  border-radius:999px!important;
  font-size:8px!important;
  line-height:1.2;
  letter-spacing:.11em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.tier::before{font-size:7px;line-height:1;filter:drop-shadow(0 0 4px currentColor)}
.tier.basic{
  color:#62e3ea!important;
  border-color:rgba(55,210,222,.30)!important;
  background:rgba(11,112,122,.20)!important;
}
.tier.basic::before{content:"✓"}
.tier.pro{
  color:#7eb5ff!important;
  border-color:rgba(70,135,255,.32)!important;
  background:rgba(35,82,177,.20)!important;
}
.tier.pro::before{content:"◆"}
.tier.ultra{
  color:#d09cff!important;
  border-color:rgba(181,104,255,.34)!important;
  background:rgba(104,48,175,.22)!important;
}
.tier.ultra::before{content:"⚡"}
.tier.demo{
  color:#ff9cbc!important;
  border-color:rgba(255,90,148,.29)!important;
  background:rgba(142,39,82,.20)!important;
}
.tier.demo::before{content:"◌"}

/* Trader passport modal: assertive identity, truthful locked public module. */
.mask{z-index:120;background:rgba(0,0,0,.74);backdrop-filter:blur(10px) saturate(105%);-webkit-backdrop-filter:blur(10px) saturate(105%)}
.modal{
  border-color:rgba(255,255,255,.12);
  background:rgba(11,10,13,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 40px 90px rgba(0,0,0,.68);
  backdrop-filter:blur(18px) saturate(122%);
  -webkit-backdrop-filter:blur(18px) saturate(122%);
}
.umenu,.toast{backdrop-filter:blur(12px) saturate(118%);-webkit-backdrop-filter:blur(12px) saturate(118%)}
.modal:has(#pwrap){max-width:1020px!important;border-radius:24px;padding:22px}
.modal:has(#pwrap) > h2{
  margin-bottom:14px;
  color:#fff;
  font-size:19px;
  font-weight:720;
  letter-spacing:-.025em;
}
#pwrap{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,128,48,.22);
  border-radius:22px;
  background:#040405;
  box-shadow:0 0 38px -21px rgba(255,107,24,.72),0 24px 48px -36px rgba(0,0,0,.95);
}
#pwrap svg{display:block;border-radius:21px;filter:saturate(.92) contrast(1.06)}
#pwrap::before{
  content:"MARKOUT\A PNL PASSPORT\A PUBLIC LINK LOCKED";
  position:absolute;
  z-index:3;
  top:7%;
  right:4.3%;
  width:27%;
  min-height:25%;
  box-sizing:border-box;
  padding:15px 92px 14px 15px;
  white-space:pre-line;
  color:#fff;
  border:1px solid rgba(255,136,58,.40);
  border-radius:16px;
  background:
    repeating-conic-gradient(from 0deg,rgba(255,148,78,.8) 0 25%,transparent 0 50%) right 14px top 14px/58px 58px no-repeat,
    linear-gradient(180deg,rgba(255,118,31,.08),transparent 48%),
    rgba(4,4,5,.96);
  box-shadow:inset 0 1px 0 rgba(255,219,189,.14),0 0 24px -8px rgba(255,106,24,.48);
  font:700 8px/1.7 "JetBrains Mono",monospace;
  letter-spacing:.11em;
  pointer-events:none;
}
#pwrap::after{
  content:"CONNECT EXCHANGE API TO VERIFY";
  position:absolute;
  z-index:4;
  top:26.5%;
  right:5.8%;
  color:#ff9a54;
  font:600 6.5px/1 "JetBrains Mono",monospace;
  letter-spacing:.07em;
  pointer-events:none;
}
.passwrap,.passwrap:hover{filter:none;transform:none;box-shadow:0 24px 48px -36px rgba(0,0,0,.86)}

/* High-information widgets keep their colours; the canvas around them stays black. */
.day,.wk,.sigcard,.myrow,.pubrow{background:rgba(13,13,15,.94);border-color:rgba(255,255,255,.075)}
.aicard,.newsside .aicard,.sigpanel,.plancard,.pod{background:rgba(9,9,11,.95)}
.plancard{padding:19px;border-radius:20px}
.plancard.cur{border-color:rgba(176,113,255,.31);box-shadow:0 22px 42px -33px rgba(128,70,238,.54)}
.pod{border-radius:18px}
.scope,.hotbar,.lockbar{background:rgba(8,8,10,.91)}

/* Fit the complete expanded rail even on shorter laptop displays. */
@media(min-width:901px) and (max-height:820px){
  .side,
.side:hover,
.side:has(:focus-visible),
.side.pin{top:var(--shell-top);bottom:var(--shell-bot);padding:7px 8px;gap:5px}
  .side:hover,
.side:has(:focus-visible),
.side.pin{width:238px}
  .mark{min-height:36px;padding-bottom:3px}
  .logo,.side:not(:hover):not(:has(:focus-visible)):not(.pin) .logo{min-height:32px}
  .logo svg{width:32px;height:32px}
  .wordmark{font-size:11.5px}
  .who{display:none!important}
  #pcard > .pcard{height:103px;padding-top:7px}
  #pcard .pav{width:34px;height:34px}
  #pcard .pstats{margin:4px 0 3px}
  #pcard .pfoot{padding-top:4px;padding-bottom:4px}
  .side:hover .navlab,
.side:has(:focus-visible) .navlab,
.side.pin .navlab{padding:3px 9px 1px}
  .nv{min-height:28px;padding:3px 11px;font-size:10.5px}
  .nv svg{width:14px;height:14px}
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) .nv{min-height:34px}
  .sidefoot{font-size:7.5px;line-height:1.15}
  .sidefoot div[style]{margin-top:2px!important}
  .sbtn{min-height:28px;padding:3px 9px;font-size:9.5px}
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) .sbtn{height:34px}
}

@media(min-width:1180px){
  .topbar{grid-template-columns:minmax(0,1fr) auto}
  .topbar .strip{grid-template-columns:repeat(9,minmax(0,1fr))}
  .topctl{justify-self:end}
}

@media(max-width:1179px) and (min-width:901px){
  .topbar{grid-template-columns:1fr}
  .topbar .strip{grid-template-columns:repeat(3,minmax(112px,1fr))}
  .topctl{justify-self:end}
}

@media(max-width:900px){
  body::before{
    background-position:72% 5%;
    background-size:auto 46vh;
    opacity:.24;
    -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.65) 58%,transparent 100%);
    mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.65) 58%,transparent 100%);
  }
  body::after{background:radial-gradient(65% 28% at 80% 6%,rgba(115,66,240,.08),transparent 76%)}
  .side,
.side:hover,
.side:has(:focus-visible),
.side.pin{
    left:10px;
    right:10px;
    top:auto;
    bottom:max(10px,env(safe-area-inset-bottom));
    width:auto;
    height:64px;
    min-height:64px;
    padding:7px 9px;
    gap:7px;
    border-radius:24px;
    background:rgba(17,16,20,.94);
    backdrop-filter:blur(12px) saturate(118%);
    -webkit-backdrop-filter:blur(12px) saturate(118%);
    transition:none;
  }
  .mark{min-height:0;padding:0 7px 0 0}
  .logo,.side:not(:hover):not(:has(:focus-visible)):not(.pin) .logo{min-height:0;padding:0}
  .logo svg{width:38px;height:38px}
  .nv,.side:not(:hover):not(:has(:focus-visible)):not(.pin) .nv{width:43px;min-width:43px;min-height:43px;padding:0;border-radius:16px}
  main{margin-left:0;padding:17px 12px 94px}
  .topbar{gap:9px;margin-bottom:17px}
  .topbar .strip{gap:7px;padding-bottom:5px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  #strip > .kpi{min-width:140px;min-height:86px;padding:15px 12px;border-radius:18px}
  #strip > .kpi .v{font-size:19px}
  #strip > .kpi:first-child .v{font-size:24px}
  #topctl.topctl{justify-self:stretch;justify-content:flex-end;overflow-x:visible}
  .card,.plancard,.pod,.sigpanel,#strip > .kpi,.btn,.icobtn,.sbtn,thead th{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  #view .card{padding:15px 14px;border-radius:19px}
  #view .card:has(> .tablebox),#view .card.section:has(> .tablebox){padding:8px}
  .row{gap:10px}
  .section{margin-top:15px}
  .tablebox{max-height:none;border-radius:12px}
  thead th,tbody td{padding-left:10px;padding-right:10px}
  .modal:has(#pwrap){padding:14px;border-radius:20px}
  #pwrap{border-radius:16px;overflow-x:auto}
  #pwrap svg{min-width:720px;border-radius:15px}
  #pwrap::before{display:none}
  #pwrap::after{display:none}
}

@media(max-width:620px){
  #topctl > .tier.plan{padding-left:10px!important;padding-right:10px!important}
  #topctl > .icobtn:not(.uav){width:35px;height:35px;min-height:35px}
  #topctl > .icobtn.uav,#topctl > .icobtn.uav img,#topctl > .icobtn.uav .uin{width:36px;height:36px}
  .pgtitle{font-size:23px}
  .tier{font-size:7.5px!important}
}

@media(prefers-reduced-motion:reduce){
  body::before,body::after{background-attachment:scroll}
  .side{transition:none!important}
}

/* ========================================================================== */
/* Final alignment and identity pass                                           */
/* ========================================================================== */

@property --passport-ring-sweep{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}

/* The compact passport owns the warm square. The circular avatar ring is
   deliberately drawn only while the rail opens. */
#pcard{
  --passport-avatar-size:38px;
  --passport-ring-size:calc(var(--passport-avatar-size) + 4px);
}
#pcard .pav{
  width:var(--passport-avatar-size);
  height:var(--passport-avatar-size);
  border-color:transparent;
  box-shadow:none;
}
#pcard .pctop{
  position:relative;
  z-index:1;
}
#pcard .pctop::before{
  content:"";
  position:absolute;
  z-index:2;
  left:-2px;
  top:50%;
  width:var(--passport-ring-size);
  height:var(--passport-ring-size);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transform:translateY(-50%);
  --passport-ring-sweep:0deg;
  background:conic-gradient(
    from -90deg,
    #d89cff 0deg var(--passport-ring-sweep),
    transparent var(--passport-ring-sweep) 360deg
  );
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));
  filter:drop-shadow(0 0 5px rgba(198,119,255,.62));
}
.side:hover #pcard .pctop::before,
.side:has(:focus-visible) #pcard .pctop::before,
.side.pin #pcard .pctop::before{
  opacity:1;
  animation:passport-avatar-ring .68s cubic-bezier(.22,.8,.2,1) .12s forwards;
}
@keyframes passport-avatar-ring{
  from{--passport-ring-sweep:0deg}
  to{--passport-ring-sweep:360deg}
}
.side:not(:hover):not(:has(:focus-visible)):not(.pin) #pcard > .pcard::before,
.side:not(:hover):not(:has(:focus-visible)):not(.pin) #pcard > .pcard::after{opacity:0}

/* One coherent logo grid: icon, wordmark and descriptor share the same axis. */
@media(min-width:901px){
  .side:hover .logo,
.side:has(:focus-visible) .logo,
.side.pin .logo{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;
    column-gap:10px;
    min-height:40px;
    padding:0 7px 0 4px;
  }
  .side:hover .logo svg,
.side:has(:focus-visible) .logo svg,
.side.pin .logo svg{
    width:38px;
    height:38px;
    transform:translateY(7px);
  }
  .side:hover .wordmark,
.side:has(:focus-visible) .wordmark,
.side.pin .wordmark{
    align-self:center;
    line-height:1;
  }
  .side:hover .who,
.side:has(:focus-visible) .who,
.side.pin .who{
    margin:0 0 0 52px!important;
    line-height:1;
    letter-spacing:.20em;
  }
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) .logo{
    justify-content:center;
    padding-left:0;
    gap:0;
  }

  /* Group labels become confident way-finding; plan pills stay restrained. */
  .side #nav > .navlab{
    color:var(--warm);
    font-size:9px;
    font-weight:750;
    letter-spacing:.16em;
  }
  .side #nav > .navlab > .tier{
    margin-left:6px;
    color:#c8b7ef!important;
    border-color:rgba(190,169,255,.24)!important;
    background:rgba(155,120,255,.085)!important;
    font-size:7.5px!important;
    font-weight:600;
    letter-spacing:.13em;
  }

  /* The closed rail keeps readable, equally weighted navigation glyphs. */
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) .nv svg{
    width:20px;
    height:20px;
    stroke-width:1.8;
  }

  /* Shorter KPI lenses, each with the same warm leading locator. */
  #strip > .kpi{
    min-height:72px;
    padding:11px 10px 9px 15px;
    border-radius:17px;
  }
  #strip > .kpi::before,
  #strip > .kpi:first-child::before{
    content:"";
    position:absolute;
    left:0;
    top:13px;
    width:2px;
    height:32px;
    border-radius:0 3px 3px 0;
    transform:none;
    background:linear-gradient(180deg,rgba(255,184,105,.24),#ff7a28 50%,rgba(255,106,25,.22));
    box-shadow:0 0 10px rgba(255,113,33,.46);
    pointer-events:none;
  }
  #strip > .kpi::after{height:24px}
  #strip > .kpi .k{font-size:7.4px}
  #strip > .kpi .v,
  #strip > .kpi:first-child .v{
    margin-top:5px;
    font-size:clamp(17px,1.15vw,22px);
  }
  #strip > .kpi:first-child .v{font-size:clamp(22px,1.45vw,27px)}

  /* Data windows use their pixels for data, not nested framing. */
  #view .card:has(> .tablebox),
  #view .card.section:has(> .tablebox){padding:6px}
  #view .card:has(> .tablebox) > h3,
  #view .card.section:has(> .tablebox) > h3{margin:5px 8px 8px}
}

/* v16: the performance passport owns its complete visual composition. */
#pwrap{
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(184,149,255,.20)!important;
  border-radius:24px!important;
  background:#020309!important;
  box-shadow:0 30px 70px -42px rgba(118,73,255,.62)!important;
}
#pwrap::before,
#pwrap::after{content:none!important;display:none!important}
#pwrap svg{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  border-radius:23px!important;
  filter:none!important;
}
#pwrap svg > path{opacity:1!important}

@media(max-width:900px){
  #pwrap{overflow-x:hidden!important}
  #pwrap svg{min-width:0!important}
}

/* v15: one animated hairline around the expanded passport avatar. */
#pcard{
  --passport-ring-size:var(--passport-avatar-size);
}
#pcard .pav{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
#pcard .pctop::before{
  left:0;
  width:var(--passport-avatar-size);
  height:var(--passport-avatar-size);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 calc(100% - .65px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 1px),#000 calc(100% - .65px));
  filter:drop-shadow(0 0 3px rgba(198,119,255,.48));
}

/* The label already contains its bolt in the HTML; never synthesize another. */
#topctl > .tier.plan::before{
  content:none!important;
  display:none!important;
}
#topctl > .tier.plan{
  white-space:nowrap;
  line-height:1;
}

/* Premium trader passport stage. The SVG remains the source of truth; the
   screen adds branded chrome and a truthful locked public-QR module. */
#pwrap svg > path{opacity:0}
@media(min-width:901px){
  #pwrap{
    padding-top:40px;
    border-color:rgba(255,255,255,.11);
    background:
      linear-gradient(90deg,rgba(255,116,36,.055),transparent 32%,rgba(139,109,255,.05)),
      #030304;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      0 0 0 1px rgba(255,122,40,.035),
      0 28px 56px -40px rgba(0,0,0,.98);
  }
  #pwrap svg{
    border-radius:0 0 21px 21px;
    filter:saturate(.88) contrast(1.08);
  }
  #pwrap::before{
    content:"MARKOUT  /  VERIFIED PERFORMANCE PASSPORT";
    top:0;
    left:18px;
    right:auto;
    width:auto;
    min-height:40px;
    padding:0;
    display:flex;
    align-items:center;
    white-space:nowrap;
    color:#f8f5fb;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    font:750 8px/1 "JetBrains Mono",monospace;
    letter-spacing:.14em;
  }
  #pwrap::after{
    content:"PUBLIC QR · LOCKED";
    top:60px;
    right:20px;
    width:88px;
    height:88px;
    box-sizing:border-box;
    padding:0 5px 8px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    white-space:nowrap;
    color:#ff9b57;
    border:1px solid rgba(255,138,66,.42);
    border-radius:14px;
    background:
      linear-gradient(#ff8d40 0 0) 12px 12px/20px 4px no-repeat,
      linear-gradient(#ff8d40 0 0) 12px 12px/4px 20px no-repeat,
      linear-gradient(#ff8d40 0 0) 28px 12px/4px 20px no-repeat,
      linear-gradient(#ff8d40 0 0) 12px 28px/20px 4px no-repeat,
      linear-gradient(#ad7bff 0 0) 56px 12px/20px 4px no-repeat,
      linear-gradient(#ad7bff 0 0) 72px 12px/4px 20px no-repeat,
      linear-gradient(#ad7bff 0 0) 56px 28px/20px 4px no-repeat,
      repeating-conic-gradient(from 45deg,rgba(235,224,255,.72) 0 25%,transparent 0 50%) 50% 37%/8px 8px,
      rgba(4,4,5,.97);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 0 22px -9px rgba(255,110,29,.68);
    font:650 6px/1 "JetBrains Mono",monospace;
    letter-spacing:.07em;
  }
}

/* v18: account settings own profile editing; the passport stays a clean,
   shareable performance artifact without account controls or a portrait. */
.modal-kicker{
  margin-bottom:7px;
  color:#a986e5;
  font:650 8px/1.2 "JetBrains Mono",monospace;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.modal-x{
  flex:0 0 auto;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  color:#d8d5df;
  background:rgba(255,255,255,.045);
  font:300 25px/34px var(--ui);
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.modal-x:hover{
  transform:rotate(4deg);
  border-color:rgba(192,146,255,.42);
  background:rgba(156,102,255,.10);
}

.passport-modal.modal{
  display:block!important;
  width:min(1020px,100%)!important;
  max-width:min(1020px,calc(100vw - 32px))!important;
  max-height:none!important;
  padding:22px!important;
}
.passport-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:15px;
}
.passport-head h2{margin:0!important}
.passport-note{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:15px;
  padding:13px 15px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.025);
}
.passport-note-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:34px;
  height:34px;
  border:1px solid rgba(170,116,255,.34);
  border-radius:50%;
  color:#c593ff;
  background:rgba(138,82,255,.08);
  font-size:17px;
}
.passport-note div{display:flex;flex-direction:column;gap:3px;min-width:0}
.passport-note b{color:#f4f2f7;font-size:12.5px;font-weight:650}
.passport-note span:not(.passport-note-icon){color:#85828c;font-size:11px;line-height:1.45}
.passport-modal .passport-foot{margin-top:15px!important;padding-top:0!important;border-top:0!important}

.account-modal.modal{
  width:min(1080px,100%);
  max-width:min(1080px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  overflow:auto;
  padding:0;
  border-color:rgba(255,255,255,.13);
  border-radius:30px;
  background:
    radial-gradient(520px 260px at 6% -8%,rgba(147,94,255,.15),transparent 66%),
    radial-gradient(360px 220px at 100% 0,rgba(75,94,255,.09),transparent 70%),
    rgba(9,9,11,.965);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 46px 110px rgba(0,0,0,.76);
}
.account-modal::-webkit-scrollbar,.avatar-scroll::-webkit-scrollbar{width:8px}
.account-modal::-webkit-scrollbar-track,.avatar-scroll::-webkit-scrollbar-track{background:transparent}
.account-modal::-webkit-scrollbar-thumb,.avatar-scroll::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  border-radius:99px;
  background:rgba(156,112,225,.58);
  background-clip:padding-box;
}
.account-head{
  position:sticky;
  z-index:8;
  top:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:24px 26px 19px;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:rgba(9,9,11,.88);
  backdrop-filter:blur(24px) saturate(125%);
  -webkit-backdrop-filter:blur(24px) saturate(125%);
}
.account-head h2{margin:0 0 5px!important;color:#faf9fc;font-size:23px!important;letter-spacing:-.045em!important}
.account-head p{margin:0;color:#85828d;font-size:11.5px}
.account-body{
  display:grid;
  grid-template-columns:238px minmax(0,1fr);
  gap:20px;
  padding:22px 26px 20px;
}
.account-profile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0;
  padding:23px 18px 20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.095);
  border-radius:24px;
  background:
    radial-gradient(180px 86px at 50% 0,rgba(195,154,255,.22),transparent 76%),
    linear-gradient(180deg,rgba(255,255,255,.054),rgba(255,255,255,.018));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 22px 48px -38px rgba(106,55,205,.74);
}
.account-profile::before{
  content:"";
  position:absolute;
  top:0;
  left:24px;
  right:24px;
  height:1px;
  background:linear-gradient(90deg,transparent,#cfafff,transparent);
  box-shadow:0 0 18px 3px rgba(180,129,255,.45);
}
.account-avatar{
  display:grid;
  place-items:center;
  width:132px;
  height:132px;
  overflow:hidden;
  border:1px solid rgba(216,185,255,.48);
  border-radius:50%;
  background:#060608;
  box-shadow:0 0 0 5px rgba(181,127,255,.06),0 0 34px -10px rgba(173,105,255,.82);
}
.account-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.account-avatar span{
  color:#0a0910;
  font:650 28px/1 var(--display);
  background:linear-gradient(135deg,#b688ff,#5ee3d2);
  width:100%;height:100%;display:grid;place-items:center;
}
.account-profile-name{
  max-width:100%;
  margin-top:15px;
  overflow:hidden;
  color:#faf9fc;
  font:650 18px/1.2 var(--display);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.account-plan{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:8px 0 18px;
  padding:6px 11px;
  border:1px solid rgba(170,116,255,.35);
  border-radius:999px;
  color:#d7b5ff;
  background:rgba(137,75,255,.09);
  font:650 9px/1 var(--mono);
  letter-spacing:.13em;
}
.account-profile .btn{width:100%;min-height:40px;margin-top:8px;justify-content:center}
.account-avatar-toggle{
  border-color:rgba(180,132,255,.34)!important;
  background:linear-gradient(180deg,rgba(139,86,230,.20),rgba(84,51,145,.10))!important;
}
.account-upload{cursor:pointer}
.account-remove{
  margin-top:11px;
  padding:3px 6px;
  border:0;
  color:#7e7a84;
  background:none;
  font:500 10.5px/1.2 var(--ui);
  cursor:pointer;
}
.account-remove:hover{color:#ff7f91}
.account-main{display:flex;flex-direction:column;gap:13px;min-width:0}
.settings-section{
  padding:17px 18px 18px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:20px;
  background:rgba(255,255,255,.018);
}
.settings-title{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.settings-title>span{
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  border:1px solid rgba(176,129,255,.24);
  border-radius:10px;
  color:#b88bfa;
  background:rgba(145,91,232,.07);
  font:650 8px/1 var(--mono);
}
.settings-title>div{display:flex;flex-direction:column;gap:2px}
.settings-title b{color:#f1eff5;font-size:12.5px;font-weight:650}
.settings-title small{color:#77747d;font-size:9.5px}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.settings-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.account-modal label.f{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  color:#88848e;
  font-size:9.5px;
  letter-spacing:.045em;
}
.account-modal .inp,
.account-modal select.inp{
  width:100%;
  min-width:0;
  height:42px;
  box-sizing:border-box;
  padding:10px 12px;
  border-color:rgba(255,255,255,.095);
  border-radius:12px;
  color:#f4f2f7!important;
  background:rgba(0,0,0,.31)!important;
  font-size:11.5px;
}
.account-modal .inp::placeholder{color:#57545c}
.account-modal .flux-select{width:100%!important;height:42px!important;margin:0!important}
.account-modal .flux-select-trigger{min-height:42px;border-radius:12px}
.account-modal .flux-select-menu{z-index:30}
.avatar-section{
  margin:0 26px 20px;
  overflow:hidden;
  border:1px solid rgba(174,125,255,.20);
  border-radius:23px;
  background:
    radial-gradient(520px 130px at 50% 0,rgba(142,84,255,.10),transparent 76%),
    rgba(2,2,4,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
.avatar-section[hidden]{display:none!important}
.avatar-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 17px 12px;
  border-bottom:1px solid rgba(255,255,255,.065);
}
.avatar-section-head>div{display:flex;flex-direction:column;gap:3px}
.avatar-section-head b{color:#f2eff7;font-size:12.5px}
.avatar-section-head span{color:#77737f;font-size:10px}
.avatar-done{
  padding:7px 12px;
  border:1px solid rgba(176,126,255,.29);
  border-radius:999px;
  color:#cda7ff;
  background:rgba(139,82,244,.08);
  font:600 10px/1 var(--ui);
  cursor:pointer;
}
.avatar-scroll{max-height:374px;overflow:auto;padding:15px 16px 17px}
.account-avatar-grid.avgrid{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:15px;
  margin:0;
}
.account-avatar-grid .avq{
  position:relative;
  padding:5px 5px 23px;
  overflow:visible;
  border:1px solid rgba(255,255,255,.075);
  border-radius:19px;
  background:rgba(255,255,255,.025);
  line-height:1;
}
.account-avatar-grid .avq::before{
  content:"";
  position:absolute;
  inset:5px 5px 23px;
  z-index:2;
  border:1px solid transparent;
  border-radius:50%;
  pointer-events:none;
}
.account-avatar-grid .avq img{border-radius:50%;background:#050507}
.account-avatar-grid .avq>span{
  position:absolute;
  right:0;
  bottom:6px;
  left:0;
  color:#5f5c66;
  font:600 8px/1 var(--mono);
  text-align:center;
}
.account-avatar-grid .avq:hover{
  transform:translateY(-2px);
  border-color:rgba(184,139,255,.25);
  background:rgba(139,82,244,.055);
}
.account-avatar-grid .avq.on{
  border-color:rgba(190,144,255,.58);
  background:rgba(139,82,244,.10);
  box-shadow:0 0 0 1px rgba(176,117,255,.12),0 0 28px -12px rgba(163,93,255,.9);
}
.account-avatar-grid .avq.on::before{border-color:#cb9dff;box-shadow:0 0 14px -4px rgba(189,124,255,.9)}
.account-avatar-grid .avq.on>span{color:#caa1ff}
.account-status{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0 26px;
}
.status-tile{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:rgba(255,255,255,.018);
}
.status-tile>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.status-tile b{color:#dedbe4;font-size:10.5px;font-weight:600}
.status-tile small{color:#6d6973;font-size:8.8px;line-height:1.45}
.status-dot{flex:0 0 auto;width:7px;height:7px;margin-top:3px;border-radius:50%}
.status-dot.ok{background:#51d8b4;box-shadow:0 0 9px rgba(81,216,180,.72)}
.status-dot.wait{background:#ff9a4d;box-shadow:0 0 9px rgba(255,132,49,.67)}
.status-dot.lock{background:#8b5bd7;box-shadow:0 0 9px rgba(139,91,215,.68)}
.account-modal .account-foot{
  margin:20px 26px 0!important;
  padding:17px 0 22px;
  border-top:1px solid rgba(255,255,255,.075);
}

@media(max-width:780px){
  .mask{padding:10px}
  .account-modal.modal,.passport-modal.modal{max-width:100%!important;border-radius:24px}
  .account-head{padding:20px 18px 16px}
  .account-head h2{font-size:20px!important}
  .account-body{grid-template-columns:1fr;padding:17px 18px;gap:14px}
  .account-profile{padding:18px;display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto auto auto;column-gap:16px;text-align:left}
  .account-avatar{grid-row:1/5;width:96px;height:96px}
  .account-profile-name{margin-top:1px;align-self:end}
  .account-plan{justify-self:start;margin:6px 0 5px}
  .account-profile .btn{margin-top:5px;min-height:36px}
  .account-remove{justify-self:start;margin:7px 0 0}
  .settings-grid,.settings-grid-three{grid-template-columns:1fr}
  .avatar-section{margin:0 18px 17px}
  .avatar-scroll{max-height:410px;padding:13px}
  .account-avatar-grid.avgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .account-status{grid-template-columns:1fr;margin:0 18px}
  .account-modal .account-foot{margin:17px 18px 0!important;padding-bottom:18px}
  .passport-modal.modal{padding:15px!important}
  .passport-note{align-items:flex-start}
}

@media(max-width:460px){
  .account-profile{grid-template-columns:82px 1fr;column-gap:13px}
  .account-avatar{width:82px;height:82px}
  .avatar-section-head{align-items:flex-start}
  .avatar-section-head span{max-width:220px;line-height:1.35}
}

/* v14: fully themed select menus.
   Native macOS/Chromium menus paint their hover row outside CSS, so the
   native select remains the data source while this accessible UI owns every
   visible state. */
.flux-select{
  position:relative;
  z-index:30;
  display:inline-block;
  flex:0 0 auto;
  vertical-align:middle;
  color:#f7f3fb;
  font-family:inherit;
}
.flux-select.is-open{z-index:1200}
.flux-select>.flux-native-select{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:1px!important;
  min-width:1px!important;
  height:1px!important;
  min-height:1px!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  pointer-events:none!important;
  clip-path:inset(50%)!important;
}
.flux-select-trigger{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  height:100%;
  min-height:40px;
  margin:0;
  padding:0 15px;
  border:1px solid rgba(154,111,222,.50);
  border-radius:18px;
  color:#f8f4fb;
  background:
    radial-gradient(100% 78% at 50% -25%,rgba(190,139,255,.10),transparent 64%),
    #0e0913;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 5px rgba(111,67,172,.10);
  font:inherit;
  font-size:inherit;
  line-height:1;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.flux-select-trigger:hover,
.flux-select-trigger:focus-visible,
.flux-select.is-open .flux-select-trigger{
  outline:none;
  border-color:rgba(189,141,255,.74);
  background:
    radial-gradient(110% 86% at 50% -20%,rgba(190,139,255,.17),transparent 62%),
    #100a16;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 0 0 5px rgba(116,69,181,.14),
    0 15px 32px -23px rgba(142,82,222,.72);
}
.flux-select-trigger::after{
  content:"";
  flex:0 0 8px;
  width:8px;
  height:8px;
  margin:-4px 1px 0 0;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .18s ease,margin .18s ease;
}
.flux-select.is-open .flux-select-trigger::after{
  margin:4px 1px 0 0;
  transform:rotate(225deg);
}
.flux-select-label{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.flux-select-menu{
  position:absolute;
  left:0;
  top:calc(100% + 5px);
  z-index:3;
  display:block;
  width:max-content;
  min-width:100%;
  max-width:min(520px,calc(100vw - 24px));
  max-height:min(430px,56vh);
  overflow-x:hidden;
  overflow-y:auto;
  padding:5px;
  border:1px solid rgba(168,123,235,.48);
  border-radius:15px;
  color:#f8f4fb;
  background:
    linear-gradient(180deg,rgba(91,52,139,.13),transparent 64px),
    #110b18;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 55px -18px rgba(0,0,0,.94),
    0 0 30px -18px rgba(153,93,234,.82);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-5px) scale(.992);
  transform-origin:50% 0;
  transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s;
  backdrop-filter:blur(26px) saturate(135%);
  -webkit-backdrop-filter:blur(26px) saturate(135%);
}
.flux-select.opens-up .flux-select-menu{
  top:auto;
  bottom:calc(100% + 5px);
  transform-origin:50% 100%;
}
.flux-select.is-open .flux-select-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  transition-delay:0s;
}
.flux-select-option{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-height:41px;
  margin:0;
  padding:7px 34px 7px 14px;
  border:0;
  border-radius:10px;
  color:#f3eef7;
  background:transparent;
  font:inherit;
  font-size:inherit;
  line-height:1.25;
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:color .08s ease,background .08s ease,box-shadow .08s ease;
}
.flux-select-option:hover,
.flux-select-option:focus-visible,
.flux-select-option.is-highlighted{
  outline:none;
  color:#fff;
  background:linear-gradient(90deg,#57308a 0%,#7d49c4 55%,#8c55d6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 8px 19px -12px rgba(151,91,231,.9);
}
.flux-select-option.is-selected::after{
  content:"";
  position:absolute;
  right:15px;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#d5b7ff;
  box-shadow:0 0 8px rgba(198,149,255,.9);
  transform:translateY(-50%);
}
.flux-select-option:disabled{
  opacity:.38;
  cursor:not-allowed;
}
.flux-select-menu::-webkit-scrollbar{width:8px}
.flux-select-menu::-webkit-scrollbar-track{background:transparent}
.flux-select-menu::-webkit-scrollbar-thumb{
  border:2px solid #110b18;
  border-radius:99px;
  background:#7143ae;
}
.flux-select.is-disabled{opacity:.48}
.flux-select.is-disabled .flux-select-trigger{cursor:not-allowed}

label.f>.flux-select{
  width:100%!important;
  margin:0!important;
}

@media(max-width:700px){
  .flux-select-menu{
    max-width:calc(100vw - 20px);
    max-height:46vh;
  }
}

@media(prefers-reduced-motion:reduce){
  .flux-select-trigger,
  .flux-select-trigger::after,
  .flux-select-menu,
  .flux-select-option{transition:none!important}
}

@media(min-width:1180px){
  .modal:has(> #pwrap){
    max-width:min(1180px,calc(100vw - 40px))!important;
    max-height:calc(100vh - 32px);
    overflow:auto;
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(280px,.72fr);
    grid-template-areas:
      "title title"
      "preview identity"
      "preview avatarlabel"
      "preview avatars"
      "preview privacy"
      "actions actions";
    gap:12px 18px;
  }
  .modal:has(> #pwrap) > h2{grid-area:title;margin:0 0 2px}
  .modal:has(> #pwrap) > #pwrap{grid-area:preview;align-self:start}
  .modal:has(> #pwrap) > #pwrap + .grid{
    grid-area:identity;
    margin:0!important;
    padding:14px;
    border:1px solid rgba(255,255,255,.085);
    border-radius:18px;
    background:#080809;
  }
  .modal:has(> #pwrap) > #pwrap + .grid + .hint{grid-area:avatarlabel;margin:1px 2px 0!important}
  .modal:has(> #pwrap) > .avgrid{
    grid-area:avatars;
    grid-template-columns:repeat(6,minmax(0,1fr));
    max-height:180px;
    margin:0;
    overflow-y:auto;
    padding:7px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:16px;
    background:#060607;
  }
  .modal:has(> #pwrap) > .avgrid + .hint{grid-area:privacy;margin:0 2px!important}
  .modal:has(> #pwrap) > .foot{
    grid-area:actions;
    margin-top:2px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .modal:has(> #pwrap) .pubrow{
    border-left:2px solid var(--warm);
    background:rgba(255,122,40,.045);
  }
  .modal:has(> #pwrap) .avq{border-radius:50%}
  .modal:has(> #pwrap) .avq.on{
    border-color:#c991ff;
    box-shadow:0 0 0 2px rgba(178,111,255,.16),0 0 16px -5px rgba(178,111,255,.72);
  }
}

@media(min-width:901px) and (max-height:820px){
  #pcard{--passport-avatar-size:34px}
}

@media(prefers-reduced-motion:reduce){
  .side:hover #pcard .pctop::before,
.side:has(:focus-visible) #pcard .pctop::before,
.side.pin #pcard .pctop::before{
    --passport-ring-sweep:360deg;
    animation:none;
  }
}

/* v10: production labels + themed native dropdowns */
.tier.demo{display:none!important}
.plancard .planhead .tier.demo{display:inline-flex!important}
.newshead>.kpi:nth-child(4)>.v{font-size:0!important}
.newshead>.kpi:nth-child(4)>.v>.k{font-size:10px!important}

select{
  color-scheme:dark;
  accent-color:#a875ff;
  color:#f7f5fb!important;
  background-color:#100b17!important;
}
select option,
select optgroup{
  color:#f7f5fb!important;
  background-color:#171020!important;
}
select option:checked{
  color:#fff!important;
  background-color:#6840a8!important;
}
select option:hover,
select option:focus{
  color:#fff!important;
  background-color:#35204f!important;
}

/* v12: one coherent compact rail + correctly inset KPI locator */
.who{
  color:var(--warm)!important;
  text-shadow:0 0 14px rgba(255,122,40,.18);
}

@media(min-width:901px){
  /* Every closed-rail destination is a framed liquid-glass control, matching
     the theme and language controls at the foot of the rail. */
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) #nav{
    align-items:center;
    gap:3px;
  }
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) .nv{
    width:50px;
    min-width:50px;
    height:40px;
    min-height:40px;
    padding:0;
    justify-content:center;
    border:1px solid rgba(255,255,255,.11);
    border-radius:16px;
    color:#aaa5b0;
    background:
      radial-gradient(90% 72% at 50% -18%,rgba(255,255,255,.12),transparent 60%),
      linear-gradient(180deg,rgba(27,25,31,.90),rgba(12,11,14,.96));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.11),
      inset 0 -1px 0 rgba(0,0,0,.24),
      0 9px 22px -17px rgba(0,0,0,.96);
  }
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) .nv:hover{
    color:#f5f2f8;
    border-color:rgba(255,255,255,.19);
    background:
      radial-gradient(95% 78% at 50% -18%,rgba(255,255,255,.17),transparent 60%),
      linear-gradient(180deg,rgba(35,32,41,.94),rgba(15,13,18,.98));
  }
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) .nv.on{
    color:#d6c6ff;
    border-color:rgba(178,143,255,.26);
    background:
      radial-gradient(105% 88% at 50% -22%,rgba(213,187,255,.22),transparent 61%),
      linear-gradient(180deg,rgba(72,50,111,.72),rgba(30,22,43,.96));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.17),
      inset 0 -1px 0 rgba(51,31,84,.34),
      0 0 0 1px rgba(145,101,255,.055),
      0 11px 27px -16px rgba(132,83,255,.70);
  }
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) .nv svg{
    width:20px;
    height:20px;
  }

  /* The compact passport owns only the warm rounded-square shell. The avatar
     stays circular as an image crop, but has no circular outline while shut. */
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) #pcard .pav{
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
  }
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) #pcard .pctop::before{
    opacity:0!important;
    visibility:hidden!important;
    animation:none!important;
  }
  .side:hover #pcard .pctop::before,
.side:has(:focus-visible) #pcard .pctop::before,
.side.pin #pcard .pctop::before{
    visibility:visible;
    animation-delay:.31s;
  }

  /* The warm locator sits inside every KPI, never clipped by the card rim. */
  #strip > .kpi{
    padding-left:24px;
  }
  #strip > .kpi::before,
  #strip > .kpi:first-child::before{
    left:10px;
    top:13px;
    bottom:13px;
    width:2px;
    height:auto;
    border-radius:99px;
  }
}

/* v13: shared KPI baselines, exact icon centring, themed native choices */
select{
  color-scheme:dark;
  accent-color:#7c4bc0;
}
select option:checked{
  color:#fff!important;
  background:#7445b5 linear-gradient(0deg,#7445b5,#7445b5)!important;
}
select option:hover,
select option:focus,
select option:active{
  color:#fff!important;
  background:#35204f linear-gradient(0deg,#35204f,#35204f)!important;
}

@media(min-width:901px){
  /* Hidden labels must not leave a flex-gap behind: the glyph is centred on
     the control's own geometry, not the expanded navigation row. */
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) .nv{
    gap:0!important;
  }

  /* Every metric uses the same two-row grid. Long labels, numbers and USD
     therefore share exact horizontal baselines and a common right edge. */
  #strip > .kpi{
    display:grid;
    grid-template-rows:10px 22px;
    align-content:center;
    row-gap:5px;
  }
  #strip > .kpi .k{
    width:100%;
    height:10px;
    overflow:visible;
    white-space:nowrap;
    justify-content:flex-end;
    text-align:right;
    font-size:7.4px!important;
    line-height:10px;
  }
  #strip > .kpi .v,
  #strip > .kpi:first-child .v{
    display:flex;
    align-items:baseline;
    justify-content:flex-end;
    width:100%;
    height:22px;
    margin-top:0;
    white-space:nowrap;
    text-align:right;
    font-size:19px!important;
    line-height:22px;
  }
  #strip > .kpi .v .u{
    flex:0 0 auto;
    margin-left:4px;
    font-size:8px;
    line-height:1;
  }
}

/* v16 final passport reset: the composition and all visible paths live in
   the SVG so the preview and downloaded PNG stay identical. */
#pwrap{
  padding:0!important;
  min-width:0!important;
  overflow:hidden!important;
  border:1px solid rgba(184,149,255,.20)!important;
  border-radius:24px!important;
  background:#020309!important;
  box-shadow:0 30px 70px -42px rgba(118,73,255,.62)!important;
}
#pwrap::before,
#pwrap::after{
  content:none!important;
  display:none!important;
}
#pwrap svg{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  border-radius:23px!important;
  filter:none!important;
}
#pwrap svg > path{opacity:1!important}

@media(max-width:900px){
  #pwrap,
  #pwrap svg{min-width:0!important}
}

/* v17: one frame language for the complete collapsed rail. The logo and
   passport use exactly the same 50x40 liquid-glass shell as the two controls
   at the bottom; their old nested shells stay invisible while collapsed. */
@media(min-width:901px){
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) .mark,
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) #pcard{
    box-sizing:border-box;
    width:50px;
    min-width:50px;
    align-self:center;
  }

  .side:not(:hover):not(:has(:focus-visible)):not(.pin) .mark{
    min-height:40px;
    padding:0;
  }

  .side:not(:hover):not(:has(:focus-visible)):not(.pin) .logo,
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) #pcard > .pcard{
    box-sizing:border-box;
    width:50px;
    min-width:50px;
    height:40px;
    min-height:40px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.125);
    border-radius:11px;
    background:
      radial-gradient(90% 75% at 50% -20%,rgba(255,255,255,.16),transparent 60%),
      rgba(255,255,255,.052);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.13),
      inset 0 -1px 0 rgba(0,0,0,.12),
      0 10px 28px rgba(0,0,0,.24);
  }

  .side:not(:hover):not(:has(:focus-visible)):not(.pin) .logo{
    min-height:40px;
    gap:0;
  }
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) .logo .plm{
    width:30px;
    height:30px;
    filter:none;
  }
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) .logo .plm-shell{
    fill:transparent;
    stroke:transparent;
  }

  .side:not(:hover):not(:has(:focus-visible)):not(.pin) #pcard .pctop{
    width:100%;
    height:100%;
    justify-content:center;
  }
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) #pcard .pav{
    width:30px;
    height:30px;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
  }
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) #pcard > .pcard::before,
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) #pcard > .pcard::after,
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) #pcard .pctop::before{
    content:none!important;
    display:none!important;
  }
}


/* ------------------------------------------------------------------ */
/* v10.4 (10.08.2026): шрифт цифр - IBM Plex Mono (локально, без CDN)   */
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-cyrillic-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-cyrillic-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-cyrillic-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0400-04FF}
:root{--mono:'IBM Plex Mono','JetBrains Mono','SF Mono',Menlo,ui-monospace,monospace}
td.num,th.num{font-variant-numeric:tabular-nums}
/* єдиний стиль суфікса USD і роздільника по всіх вкладках */
.u{margin-left:5px;font-size:9px;font-weight:600;letter-spacing:.05em;color:inherit;opacity:.62}
.kpi .v .u,
#strip > .kpi .v .u{color:inherit;opacity:.62}
.dli b .u,.sxi b .u,.dvv .u,.dxi b .u{color:inherit;opacity:.62}
.xdot{margin:0 7px;color:#8d8994;font-weight:400}
.dxi b{color:#fbfafc}
.dxi b .down,.sxi b .down{color:var(--down)}
.dxi b .up,.sxi b .up{color:var(--up)}

/* ------------------------------------------------------------------ */
/* v10.3 (10.08.2026): Dashboard — компактна строка, крива, діаграми     */

/* верхня строка: все в один рядок, плитки по вмісту */
#strip{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  gap:clamp(4px,.32vw,8px);
  scrollbar-width:none;
}
#strip::-webkit-scrollbar{display:none}
#strip > .kpi{
  flex:0 0 auto;
  min-width:max-content;
  min-height:62px;
  padding:10px clamp(12px,.8vw,18px) 9px clamp(14px,1vw,24px);
  border-radius:16px;
}
@media(min-width:901px){
  #strip > .kpi .k{font-size:clamp(6.2px,.3vw,7.4px)!important}
  #strip > .kpi .v,
  #strip > .kpi:first-child .v{font-size:clamp(12.5px,.75vw,19px)!important}
  #strip > .kpi .v .u{font-size:clamp(6.5px,.32vw,8px)}
  #strip > .kpi::before,
  #strip > .kpi:first-child::before{left:clamp(6px,.4vw,10px)}
}
/* вузькі екрани: заголовок плитки переноситься, ширину диктує значення - все влазить без скролу */
@media(min-width:901px) and (max-width:1640px){
  #strip > .kpi{grid-template-rows:auto 22px;row-gap:4px;min-width:min-content;flex:1 1 0}
  #strip > .kpi .k{
    height:auto;
    white-space:normal;
    line-height:1.25;
    justify-content:flex-end;
    text-align:right;
  }
}
@media(min-width:901px) and (max-width:1400px){
  #strip{gap:3px}
  #strip > .kpi{padding:9px 8px 8px 11px}
  #strip > .kpi .v,
  #strip > .kpi:first-child .v{font-size:11.5px!important}
}
#strip > .kpi::after{height:26px}

/* семантична полоска-локатор: помаранчева нейтральна, зелена прибуток, червона збиток; на ховері сяє */
.newshead .kpi,
.row > .kpi{padding-left:20px}
.kpi::before,
#strip > .kpi::before,
#strip > .kpi:first-child::before{
  content:"";
  position:absolute;
  left:10px;
  top:13px;
  bottom:13px;
  width:2px;
  height:auto;
  border-radius:99px;
  transform:none;
  background:linear-gradient(180deg,rgba(255,184,105,.28),#ff7a28 48%,rgba(255,106,25,.28));
  box-shadow:0 0 12px rgba(255,113,33,.45);
  transition:box-shadow .18s ease,filter .18s ease;
  pointer-events:none;
}
.kpi:has(.v.up)::before,
#strip > .kpi:has(.v.up)::before{
  background:linear-gradient(180deg,rgba(120,255,201,.30),#0ED47D 48%,rgba(14,212,125,.30));
  box-shadow:0 0 12px rgba(14,212,125,.48);
}
.kpi:has(.v.down)::before,
#strip > .kpi:has(.v.down)::before{
  background:linear-gradient(180deg,rgba(255,128,148,.30),#FF2E55 48%,rgba(255,46,85,.30));
  box-shadow:0 0 12px rgba(255,46,85,.48);
}
.kpi:hover::before,
#strip > .kpi:hover::before{
  box-shadow:0 0 20px 3px rgba(255,113,33,.8);
  filter:brightness(1.3);
}
.kpi:hover:has(.v.up)::before,
#strip > .kpi:hover:has(.v.up)::before{box-shadow:0 0 20px 3px rgba(14,212,125,.85)}
.kpi:hover:has(.v.down)::before,
#strip > .kpi:hover:has(.v.down)::before{box-shadow:0 0 20px 3px rgba(255,46,85,.85)}

/* цифри: один розмір, один колір; жодних випадкових сірих */
#strip > .kpi .v .plan{
  margin-left:8px;
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
  letter-spacing:inherit;
  cursor:pointer;
  border-bottom:1px dashed rgba(255,255,255,.34);
  padding-bottom:1px;
}
#strip > .kpi .v .plan:hover{border-bottom-color:#cfc9d6}
#strip > .kpi .v .sub{
  margin-left:8px;
  font-size:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  opacity:1;
}

/* панель керування праворуч - вдвічі нижча за плитки, по верхній лінії */
.topbar{align-items:start}
#topctl.topctl{
  align-self:flex-end;
  height:42px;
  min-height:42px;
  border-radius:15px;
  padding:6px 14px;
  gap:12px;
  margin-left:min(340px,13vw);
}
#topctl > .tier.plan{
  min-height:29px;
  padding:6px 14px!important;
  border-radius:10px!important;
  margin-left:4px;
}
#topctl > .icobtn:not(.uav){
  width:28px;
  height:28px;
  min-height:28px;
  border-radius:10px;
}
#topctl .icobtn svg{width:14px;height:14px}
#topctl > .icobtn.uav{width:29px;height:29px;margin-left:0}
#topctl > .icobtn.uav img,
#topctl > .icobtn.uav .uin{width:29px;height:29px}

/* крива PNL */
#view .curvecard,
.curvecard{padding:14px 20px 22px;overflow:visible}
.curvehead{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.curvehead h3{margin:0}
.curvehead .curveval{
  margin-left:8px;
  font-family:var(--mono);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.02em;
}
svg.pnlcurve{display:block;width:100%;height:112px;border-radius:8px}
.curvewrap{position:relative;flex:1;min-width:0}
.curvebody{display:flex;align-items:stretch;gap:10px}
.curveY{position:relative;width:62px;flex:none}
.curveY span{
  position:absolute;
  right:0;
  transform:translateY(-50%);
  font-family:var(--mono);
  font-size:9.5px;
  color:#8d8994;
  white-space:nowrap;
}
.curvax.curvax3{height:32px;margin-top:8px;margin-right:72px}
.curvax.curvax3 > span{display:flex;flex-direction:column;align-items:center;gap:2px}
.curvax.curvax3 .axv{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:0;color:#c9c6cf}
.curvax.curvax3 .axv.up{color:var(--up)}
.curvax.curvax3 .axv.down{color:var(--down)}
.curvax.curvax3 .axl{font-style:normal;font-size:9px;color:#8d8994;letter-spacing:.04em}
.curvax3 span{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.04em;
  color:#8d8994;
  white-space:nowrap;
}
.curvediff{margin-left:10px;font-family:var(--mono);font-size:11.5px;font-weight:600}
.curvediff .dlab{margin-left:6px;font-style:normal;font-family:var(--ui);font-size:10px;font-weight:600;color:#8d8994}
.curvediff.up{color:var(--up)}
.curvediff.down{color:var(--down)}
.rgroup{display:flex;gap:2px;margin-left:auto;padding:3px;border-radius:11px;background:rgba(255,255,255,.045)}
.rgb{
  padding:4px 11px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#8d8994;
  font-family:var(--ui);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:color .15s ease,background-color .15s ease;
}
.rgb:hover{color:#cfc9d6}
.rgb.on{color:#fbfafc;background:rgba(255,255,255,.10)}
.curveempty{padding:22px 4px 20px;color:#8d8994;font-size:12px;line-height:1.7}
.hdiag{color:#FFC857;font-size:11px}
.curvax3 span{font-size:9px}
@media(max-width:1800px){.curvax3 span{font-size:8.5px}}
.curvehead .curveval.cvneg{color:#FF2E55}
.curvehead .curveval.cvpos{color:#0ED47D}
.curvax{position:relative;height:15px;margin-top:6px}
.curvax span{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.06em;
  color:#8d8994;
  white-space:nowrap;
}
.curvax2{height:31px;margin-top:8px}
.curvax2 span{display:flex;flex-direction:column;align-items:center;gap:2px}
.curvax2 .axv{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:0}
.curvax2 .axv.up{color:var(--up)}
.curvax2 .axv.down{color:var(--down)}
.curvax2 .axl{font-style:normal;font-size:9.5px;color:#8d8994;letter-spacing:.05em}
/* Варіант 2: бари від нульової осі, підписи активів зліва */
.chartsrow .card.grow{display:flex;flex-direction:column}
.dv2{display:grid;grid-template-columns:128px 1fr 1fr auto;grid-auto-rows:minmax(0,1fr);gap:5px 10px;align-items:center;margin-top:4px;flex:1;min-height:0}
.dvsym{font-family:var(--mono);font-size:11px;color:#c9c6cf;text-align:left}
.dvl,.dvr{position:relative;height:9px;background:rgba(255,255,255,.045)}
.dvl{border-radius:5px 0 0 5px}
.dvr{border-radius:0 5px 5px 0;border-left:1px solid rgba(255,255,255,.35)}
.dvl i{position:absolute;right:0;top:0;bottom:0;border-radius:5px 0 0 5px;background:linear-gradient(270deg,#FF2E55,rgba(255,46,85,.45))}
.dvr i{position:absolute;left:0;top:0;bottom:0;border-radius:0 5px 5px 0;background:linear-gradient(90deg,rgba(14,212,125,.45),#0ED47D)}
.dvv{font-family:var(--mono);font-size:11.5px;font-weight:600;text-align:right;white-space:nowrap}
/* невисокі екрани: стискаємо вертикаль, щоб все вмістилось без вилазів */
@media(max-height:1150px){
  :root{--shell-bot:14px}
  #view .curvecard{padding:10px 16px 18px}
  .chartsrow .card{padding:12px 16px}
  .card.section{margin-bottom:12px}
  .row.section{margin-bottom:12px}
  .dv2{gap:2px 8px}
  .dvl,.dvr{height:7px}
  .dvsym{font-size:10px}
  .dvv{font-size:10.5px}
  .scen{gap:5px}
  .sxi{font-size:11.5px}
  .sxi b{font-size:12.5px}
  .dext{margin-top:10px;padding-top:9px;gap:6px}
  .dxi{font-size:11px}
  .curvax2{height:27px;margin-top:5px}
  .fundcard tbody td{padding:7px 0;font-size:12px}
  .fundcard .fgrp{margin:15px 0 4px}
  .fundcard h3{margin-bottom:6px}
  .fwarn{margin-top:8px;font-size:10.5px}
  .posbox{scrollbar-width:thin}
  .postable th,.postable td{padding:7px 6px}
}
/* дуже низькі екрани: максимально ущільнюємо, щоб дашборд лишався в одному екрані */
@media(max-height:1100px){
  :root{--shell-top:14px;--shell-bot:10px}
  .card.section,.row.section{margin-bottom:9px}
  #view .curvecard{padding:8px 14px 16px}
  .curvax2{height:24px;margin-top:4px}
  .chartsrow .card{padding:9px 14px}
  .chartsrow .card h3{margin-bottom:6px}
  .dv2{gap:1px 8px}
  .dvl,.dvr{height:6px}
  .dvsym{font-size:9.5px}
  .dvv{font-size:10px}
  .scen{gap:4px}
  .sbar{height:6px}
  .dext{margin-top:8px;padding-top:7px;gap:5px}
  .dxi{font-size:10.5px}
  .postable th,.postable td{padding:6px 6px}
  .postable td{font-size:10.5px}
  .fundcard tbody td{padding:6px 0;font-size:11px}
}
@media(max-height:920px){
  #strip > .kpi{min-height:52px;padding-top:7px;padding-bottom:6px}
  #topctl.topctl{height:26px;min-height:26px}
  #topctl > .icobtn:not(.uav),#topctl > .icobtn.uav{width:21px;height:21px;min-height:21px}
  #topctl .icobtn svg{width:12px;height:12px}
  #topctl > .tier.plan{min-height:21px;padding:3px 8px!important}
  .topbar{margin-bottom:10px}
  .chartsrow .card{padding:8px 12px}
  .dv2{gap:0 8px}
  .dvl,.dvr{height:5px}
  .dvsym{font-size:9px}
  .dvv{font-size:9.5px}
  .chartsrow .card h3{margin-bottom:4px}
  .scen{gap:3px}
  .sbar{height:5px}
  .sxi{font-size:10.5px}
  .sxi b{font-size:11.5px}
  .dext{margin-top:6px;padding-top:6px;gap:4px}
  .dxi{font-size:10px}
  .curvax2{height:22px;margin-top:3px}
  .card.section,.row.section{margin-bottom:7px}
}

/* діаграми */
.chartsrow{align-items:stretch}
.chartsrow .card h3{margin-bottom:10px}
.obars{display:flex;flex-direction:column;gap:2px}
.obar{display:grid;grid-template-columns:118px 1fr 96px;gap:14px;align-items:center;padding:4px 0}
.obar .os{font-family:var(--mono);font-size:11px;color:#c9c6cf;letter-spacing:.02em}
.obar .track{position:relative;height:8px;border-radius:4px;background:rgba(255,255,255,.05);overflow:hidden}
.obar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#8d8994}
.obar .fill.down{background:linear-gradient(90deg,rgba(255,46,85,.40),#FF2E55)}
.obar .fill.up{background:linear-gradient(90deg,rgba(14,212,125,.40),#0ED47D)}
.obar b{font-family:var(--mono);font-size:12px;font-weight:600;text-align:right}
.obar:hover .track{background:rgba(255,255,255,.10)}
.scencard{min-width:380px}
.scen{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.sxi{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12.5px;color:#c9c6cf}
.sxi b{font-family:var(--mono);font-weight:600;font-size:14px;color:#fbfafc;white-space:nowrap}
.sxi b.warn{color:#FFC857}
.sxi .sxp{margin-left:7px;font-size:11px;opacity:.85}
.sbar{position:relative;height:7px;border-radius:4px;background:rgba(255,255,255,.05);overflow:hidden}
.sbar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.sbar i.down{background:linear-gradient(90deg,rgba(255,46,85,.4),#FF2E55)}
.sbar i.up{background:linear-gradient(90deg,rgba(14,212,125,.4),#0ED47D)}
.donutcard{min-width:360px}
.donutwrap{display:flex;align-items:center;gap:26px;margin-top:2px}
.donut .dctit{fill:#8d8994;font-size:9px;letter-spacing:.14em;font-family:var(--ui);font-weight:650}
.donut .dcval{fill:#fbfafc;font-size:15px;font-weight:700;font-family:var(--mono)}
.dleg{display:flex;flex-direction:column;gap:10px;min-width:0;flex:1}
.dli{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:10px;align-items:baseline;font-size:12px;color:#c9c6cf}
.dli .dot{width:9px;height:9px;border-radius:50%;align-self:center}
.dli b{font-family:var(--mono);font-weight:600;color:#fbfafc;text-align:right;white-space:nowrap}
.dext{margin-top:16px;border-top:1px solid rgba(255,255,255,.07);padding-top:13px;display:flex;flex-direction:column;gap:9px}
.dxi{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px}
.dxi span{color:#8d8994}
.dxi b{font-family:var(--mono);font-weight:600;color:#fbfafc;white-space:nowrap}
.dli .dpc{color:#8d8994;font-size:11px;text-align:right;min-width:34px}

/* сортування таблиці відкритих позицій */
.posbox{max-height:486px;overflow:auto;scrollbar-width:thin}
/* редаговані клітинки Тейк/Стоп у таблиці позицій */
.cellinp{
  width:100%;
  max-width:100%;
  padding:2px 6px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:#fbfafc;
  font-family:var(--mono);
  font-size:inherit;
  text-align:right;
  outline:none;
  transition:border-color .15s ease,background-color .15s ease;
}
.cellinp::placeholder{color:#6f6a75}
.cellinp:hover{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.cellinp:focus{border-color:rgba(155,120,255,.55);background:rgba(155,120,255,.08)}
.cellinp.saving{opacity:.55}
/* BTC-тренд */
.btcbtn{
  padding:5px 11px;
  border:1px solid rgba(78,143,255,.35);
  border-radius:9px;
  background:transparent;
  color:#9d95a8;
  font-family:var(--ui);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:color .15s ease,background-color .15s ease,border-color .15s ease;
}
.btcbtn:hover{color:#cfdcf6;border-color:rgba(78,143,255,.6)}
.btcbtn.on{color:#A9C8FF;background:rgba(78,143,255,.16);border-color:rgba(78,143,255,.7)}
.btcleg{font-family:var(--mono);font-size:11px;color:#4E8FFF}
.sparsehint{
  padding:4px 10px;
  border-radius:8px;
  background:rgba(255,200,87,.12);
  color:#FFC857;
  font-size:10.5px;
  font-weight:600;
  cursor:help;
}
.btcleg b{font-weight:600}
.btcleg.dim{opacity:.6}
/* дашборд в один екран: нижній ряд тягнеться, таблиця гортається всередині */
#view.dashfit{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overflow-x:hidden}
body:has(#view.dashfit){--shell-bot:18px}
#view.dashfit > .row.section:last-child{flex:1 1 auto;min-height:280px;margin-bottom:0}
#view.dashfit > .row.section:last-child > .card{min-height:0;display:flex;flex-direction:column}
#view.dashfit .posbox{flex:1;min-height:0;max-height:none}
#view.dashfit .fundcard{overflow-y:auto;overflow-x:hidden}
/* канон: будь-яка панель з даними гортається ВСЕРЕДИНІ себе, а не тягне сторінку */
#view.dashfit > .row.section > .card{min-height:0;overflow:hidden}
#view.dashfit .chartsrow > .card{overflow-y:auto;overflow-x:hidden}
.tablebox,.fundcard,.chartsrow > .card{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.tablebox::-webkit-scrollbar,.fundcard::-webkit-scrollbar,.chartsrow > .card::-webkit-scrollbar{width:8px;height:8px}
.tablebox::-webkit-scrollbar-thumb,.fundcard::-webkit-scrollbar-thumb,.chartsrow > .card::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16);border-radius:6px;border:2px solid transparent;background-clip:content-box}
.tablebox::-webkit-scrollbar-track,.fundcard::-webkit-scrollbar-track,.chartsrow > .card::-webkit-scrollbar-track{background:transparent}
/* рівні колонки: однакова ширина під усі, окрім пари/дати/сетапу */
.postable{table-layout:fixed;width:100%}
.postable th,.postable td{padding:9px 10px;overflow:hidden;text-overflow:ellipsis}
.postable td{font-size:12px;text-align:right}
.postable th{text-align:right!important}
.postable th:nth-child(1),.postable td:nth-child(1){text-align:left!important}
.postable th:nth-child(1),.postable td:nth-child(1){width:7.5%}
.postable th:nth-child(2),.postable td:nth-child(2){width:8%}
.postable th:nth-child(3),.postable td:nth-child(3){width:7.5%}
.postable th:nth-child(5),.postable td:nth-child(5){width:6%}
.postable th:nth-child(14),.postable td:nth-child(14){width:6.5%}
.postable th:nth-child(17),.postable td:nth-child(17){width:8%}
.postable th:nth-child(18),.postable td:nth-child(18){width:6%}
.postable td:nth-child(14){font-weight:600}
@media(max-width:1900px){
  .postable th,.postable td{padding:8px 7px}
  .postable td{font-size:11px}
}
.fundcard table{width:100%}
/* усі суми в Капіталі - білі (його вимога, тричі): перебиваємо сірий tbody td з obsidian-flux */
.fundcard tbody td,
.fundcard tbody td.l,
.fundcard tbody td.num{color:#fbfafc}
/* Капітал: назви і суми - по лівому краю, рівною колонкою */
.fundcard tbody tr{display:grid;grid-template-columns:1fr auto;align-items:baseline}
.fundcard tbody td{padding:9px 0}
.fundcard table{border-collapse:collapse}
.fundcard tbody td{border-bottom:1px solid rgba(255,255,255,.05)}
.fundcard tbody tr:last-child td{border-bottom:0}
.fundcard table{margin:0}
.fundcard tbody td.num{border-left:0}
.fundcard tbody td.l{text-align:left;padding-left:2px}
.fundcard tbody td.num{text-align:left;min-width:118px;padding-left:14px}
.fundcard .fgrp{padding-left:2px}
.fwarn{padding-left:2px}
.fundcard tbody tr:hover td{color:#fff}
.fgrp{
  margin:22px 0 5px;
  font-size:9px;
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8d8994;
}
.fundcard .fgrp:first-of-type{margin-top:6px}
.fwarn{margin-top:20px;font-size:11px;color:#FFC857;cursor:help}
.fwarn .u{color:inherit}
th.sortable{cursor:pointer;user-select:none;transition:color .15s ease}
th.sortable:hover{color:#cfc9d6}
th.sortable .sarr{margin-left:6px;color:#B99EFF;font-size:10px}

@media(max-width:900px){
  svg.pnlcurve{height:78px}
  .chartsrow{flex-direction:column}
  .donutcard{min-width:0}
}


/* ── MARKOUT v11.4 ────────────────────────────────────────────────── */
/* сума над віссю - того самого кегля, що й підпис періоду */
.curvax.curvax3 .axv,
.curvax.curvax2 .axv{font-size:9px}
@media(max-width:1800px){.curvax.curvax3 .axv,.curvax.curvax2 .axv{font-size:8.5px}}
@media(max-width:1800px){.curvax.curvax3 .axl,.curvax.curvax2 .axl{font-size:8.5px}}


/* ── MARKOUT v11.8: перехрестя під курсором ───────────────────────────── */
.chair{position:absolute;left:0;top:0;bottom:0;width:0;border-left:1px dashed rgba(255,255,255,.30);
  pointer-events:none;opacity:0;transition:opacity .12s ease;will-change:transform}
.chdot{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;will-change:transform;
  background:#0ED47D;box-shadow:0 0 0 2px rgba(7,7,8,.92),0 0 9px rgba(14,212,125,.55);
  pointer-events:none;opacity:0;transition:opacity .12s ease}
.chdot.dn{background:#FF2E55;box-shadow:0 0 0 2px rgba(7,7,8,.92),0 0 9px rgba(255,46,85,.55)}
.chdot.btc{background:#4E8FFF;box-shadow:0 0 0 2px rgba(7,7,8,.92),0 0 9px rgba(78,143,255,.55)}
.ctip{position:absolute;left:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .12s ease;
  will-change:transform;background:rgba(16,16,21,.97);border:1px solid rgba(255,255,255,.09);
  border-radius:10px;padding:9px 13px 10px;box-shadow:0 12px 34px rgba(0,0,0,.6);
  white-space:nowrap;min-width:210px}
.ctip.low{top:10px}
.ctip.high{bottom:10px}
.curvewrap.hov .chair,.curvewrap.hov .chdot,.curvewrap.hov .ctip{opacity:1}
.ctip .ctd{font-size:10px;color:#a9a5b1;letter-spacing:.02em;
  margin-bottom:7px;font-family:var(--mono)}
.ctip .ctr{display:flex;align-items:center;gap:9px;font-size:10.5px;line-height:1.85}
.ctip .ctr .cm{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.ctip .ctr .cl{color:#a9a5b1}
.ctip .ctr .cv{margin-left:auto;font-family:var(--mono);font-weight:600;color:#fbfafc;
  font-variant-numeric:tabular-nums}
.ctip .ctr .cv.dn{color:#FF2E55}
.ctip .ctr .cv.up{color:#0ED47D}
.ctip .ctr .cv .cu{font-style:normal;color:inherit;opacity:.62;margin-left:4px;font-size:9px}


/* ── MARKOUT v11.9: вісь без сум (значення живуть у панелі під курсором) ── */
.curvax.curvax3{height:16px;margin-top:9px}
.curvax.curvax3 > span{display:block;text-align:center}
.curvax.curvax3 .axv{display:none}
.curvax.curvax3 .axl{font-size:9.5px;color:#8d8994;letter-spacing:.04em}
@media(max-width:1800px){.curvax.curvax3 .axl{font-size:9px}}
@media(max-width:1500px){.curvax.curvax3 .axl{font-size:8.5px}}
.ctip .ctr .cv{white-space:nowrap}


/* ── MARKOUT v11.10 ───────────────────────────────────────────────────── */

/* Розділювач тисяч - елемент .tsp (див. num() в app.js). У моношрифті символ
   пробілу займає повну клітинку, тому шириною керуємо тут, і окремо по контекстах. */
.tsp{display:inline-block;width:.27em}
#strip > .kpi .v .tsp,
.topbar .kpi .v .tsp{width:.40em}

/* «Вільний капітал»: рядки щільніше, відступ перед новим розділом більший */
.fundcard tbody td{padding:6px 0}
.fgrp{margin:26px 0 4px}
.fundcard .fgrp:first-of-type{margin-top:4px}
@media(max-height:1150px){
  .fundcard tbody td{padding:5px 0}
  .fundcard .fgrp{margin:21px 0 3px}
}
@media(max-height:1000px){
  .fundcard tbody td{padding:4px 0}
  .fundcard .fgrp{margin:17px 0 3px}
}

/* Незахищена маржа: кількість позицій попереду суми */
.sxi b .sxp{margin-right:10px;margin-left:0}


/* ── MARKOUT v11.11 ───────────────────────────────────────────────────── */
/* «Вільний капітал»: ОДНАКОВИЙ відступ перед кожним розділом.
   Раніше перший заголовок ловив старе правило first-of-type{margin-top:4px}
   і прилипав до рядка над собою - звідси різні відступи. */
.fundcard .fgrp,
.fundcard .fgrp:first-of-type{margin:22px 0 5px}
@media(max-height:1150px){
  .fundcard .fgrp,
  .fundcard .fgrp:first-of-type{margin:18px 0 4px}
}
@media(max-height:1000px){
  .fundcard .fgrp,
  .fundcard .fgrp:first-of-type{margin:15px 0 3px}
}


/* ── MARKOUT v11.13: однаковий відступ від заголовка до першого рядка ──── */
/* було: під «Вільний капітал» 12px, під заголовками розділів 5px */
.fundcard h3{margin-bottom:8px}
.fundcard .fgrp,
.fundcard .fgrp:first-of-type{margin-bottom:8px}
@media(max-height:1150px){
  .fundcard h3{margin-bottom:7px}
  .fundcard .fgrp,
  .fundcard .fgrp:first-of-type{margin-bottom:7px}
}
@media(max-height:1000px){
  .fundcard h3{margin-bottom:6px}
  .fundcard .fgrp,
  .fundcard .fgrp:first-of-type{margin-bottom:6px}
}

/* ------------------------------------------------------------------ */
/* v11.15 (10.08.2026): паспорт-картка - читабельність і чесний стаж.  */
/* Значення метрик ніколи не переносяться; аватар у згорнутій рейці    */
/* центрується, бо приховані сусіди більше не беруть участі в розкладці */
#pcard .pnick{font-size:14px;line-height:1.15}
#pcard .pid{
  font-size:9.5px;
  line-height:1.4;
  margin-top:2px;
  color:#8f8a99;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
#pcard .pctop{gap:11px}
#pcard .pstats{max-height:64px;margin:10px 0 8px;align-items:flex-start}
#pcard .pst b{
  font-size:16px;
  font-weight:600;
  line-height:1.15;
  white-space:nowrap;
}
#pcard .pst b .tsp{
  display:inline-block;
  width:.3em;
  margin:0;
}
#pcard .pst > i{
  font-size:8.5px;
  letter-spacing:.09em;
  margin-top:3px;
  color:#7d7787;
  text-transform:uppercase;
  white-space:nowrap;
}
#pcard .pfoot{font-size:10px}
#pcard > .pcard{height:240px}
@media(min-width:901px) and (max-height:820px){
  #pcard > .pcard{height:214px;padding-top:7px}
  #pcard .pnick{font-size:13px}
  #pcard .pid{font-size:9px;margin-top:2px}
  #pcard .pstats{margin:7px 0 6px}
  #pcard .pst b{font-size:14px}
  #pcard .pfoot{padding-top:4px;padding-bottom:4px}
}
@media(min-width:901px){
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) #pcard .pctop{gap:0}
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) #pcard .pstats,
  .side:not(:hover):not(:has(:focus-visible)):not(.pin) #pcard .pfoot{
    flex:0 0 0px;
    width:0;
    min-width:0;
    margin:0;
    padding:0;
    border:0;
  }
}

/* другий ряд метрик картки: угоди + серія перемог */
#pcard .pstats{margin:10px 0 6px}
#pcard .pstats.pstats2{margin:0 0 8px}
#pcard .pst-r{text-align:right}

/* паспорт: перемикач періоду, вибір місяця, варіативне меню місячної картки */
.pperiod{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
  margin-right:14px;
}
.pseg{
  display:inline-flex;
  padding:3px;
  gap:3px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(10,9,14,.72);
}
.pseg button{
  border:0;
  background:transparent;
  color:#8f8a99;
  font:600 10.5px var(--ui);
  letter-spacing:.04em;
  padding:6px 12px;
  border-radius:9px;
  cursor:pointer;
  transition:color .16s ease,background .16s ease;
}
.pseg button:hover{color:#d9d4e2}
.pseg button.on{
  color:#16121c;
  background:linear-gradient(180deg,#ffc79b,#ff9550);
  box-shadow:0 6px 16px -9px rgba(255,140,55,.9);
}
.pseg button[disabled]{opacity:.35;cursor:default}
.psel{
  height:30px;
  padding:0 10px;
  font-size:11px;
  border-radius:10px;
}
.pmenu{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:12px 2px 0;
}
.pmenu .pmt{
  flex:none;
  color:#7d7787;
  font:600 9.5px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-right:4px;
}
.pmenu .pmi{
  border:1px solid rgba(255,255,255,.11);
  background:rgba(16,14,20,.74);
  color:#8f8a99;
  font:600 9px var(--mono);
  letter-spacing:.08em;
  padding:5px 9px;
  border-radius:99px;
  cursor:pointer;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.pmenu .pmi:hover{color:#e6e1ee;border-color:rgba(255,255,255,.22)}
.pmenu .pmi.on{
  color:#ffd9b8;
  border-color:rgba(255,163,90,.5);
  background:rgba(64,36,16,.5);
  box-shadow:inset 0 1px 0 rgba(255,211,171,.14);
}

/* v11.17: витягнута візитка - PNL-герой + сітка 2х2 */
#pcard .pstats.phero{margin:12px 0 2px}
#pcard .phero .pst b{font-size:24px;letter-spacing:-.01em}
#pcard .phero .pst b .tsp{width:.27em}
#pcard .phero .pst > i{margin-top:4px}
#pcard .pstats.pgrid{margin:8px 0 0}
#pcard .pstats.pgrid.pstats2{margin:8px 0 10px}
@media(min-width:901px) and (max-height:820px){
  #pcard .pstats.phero{margin:9px 0 1px}
  #pcard .phero .pst b{font-size:21px}
  #pcard .pstats.pgrid{margin:6px 0 0}
  #pcard .pstats.pgrid.pstats2{margin:6px 0 8px}
}

/* v11.19: повітря у візитці - симетричні поля, футер з нижнім полем */
#pcard > .pcard{padding:12px 14px 0;height:254px}
#pcard .pfoot{max-height:46px;margin:0 -14px;padding:9px 14px 12px}
@media(min-width:901px) and (max-height:820px){
  #pcard > .pcard{height:228px;padding:10px 13px 0}
  #pcard .pfoot{padding:7px 13px 9px}
}

/* v11.19b: рівний вертикальний ритм сірого блоку під ніком */
#pcard .pid{line-height:1.6;margin-top:1px}

/* v11.21: герой візитки - колір «Мох» (Apple), як у паспорті */
#pcard .phero .pst b.up{color:#00A05B}

/* v11.32: сірий рядок під ніком - інтерфейсним шрифтом, без мономʼязних прогалин */
#pcard .pid{font-family:var(--ui);letter-spacing:.005em}

/* ==========================================================================
   Закріплена бічна панель
   Панель лишається розгорнутою (клас .pin додається у всі правила
   розгорнутого стану вище), а контент від'їжджає рівно на її ширину, щоб
   нічого не налазило. Стан живе в налаштуваннях на сервері, тому
   переживає перезавантаження.
   ========================================================================== */
@media(min-width:1081px){
  body.side-pinned main{margin-left:calc(var(--side) + var(--side-gap))}
  body.side-pinned .topbar .strip{scroll-padding-left:0}
}
/* кнопка закріплення поводиться як решта нижніх кнопок, лише з активним станом */
.sbtn.pinbtn.on{
  border-color:rgba(182,151,255,.42);
  background:rgba(150,116,255,.14);
  color:#efe9fb;
}
.sbtn.pinbtn.on svg{color:#c4a6ff}
.sbtn.pinbtn.on .sv{color:#c4a6ff}
/* на вузьких екранах панель не розсувна - ховаємо перемикач */
@media(max-width:1080px){
  .sbtn.pinbtn{display:none}
  body.side-pinned main{margin-left:0}
}

/* Trader ID під аватаром у налаштуваннях: рядок для читання, не поле вводу */
.account-uid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  margin-top:9px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  background:rgba(255,255,255,.025);
  cursor:default;
}
.account-uid span{
  color:#8d8994;
  font-family:var(--mono);
  font-size:8px;
  font-weight:600;
  letter-spacing:.16em;
}
.account-uid b{
  color:#d9d5e0;
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:.09em;
}

/* ============================================================
   Особистий кабінет: ліве меню, Безпека, Підписка, Сповіщення, API.
   Палітра журналу: мох #009051, перець #941100, фіолет #8B6DFF,
   волосінь #3A3A46. Яскравого зеленого/червоного тут немає.
   ============================================================ */

.acct-nav{display:flex;flex-direction:column;gap:4px;margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.07)}
.acct-nv{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:9px 11px;border:1px solid transparent;border-radius:11px;background:none;
  color:#B9BCC7;text-align:left;cursor:pointer;transition:background-color .16s ease,border-color .16s ease}
.acct-nv b{font:600 12.5px/1.25 var(--ui);color:#E7E4F0}
.acct-nv i{font:400 10px/1.3 var(--ui);color:#7E7A84;font-style:normal}
.acct-nv:hover{background:rgba(255,255,255,.045)}
.acct-nv.on{border-color:rgba(139,109,255,.42);background:rgba(139,109,255,.12)}
.acct-nv.on b{color:#fff}
.acct-nv.on i{color:#A9A2C4}

/* ---------------------------------------------------- рівень безпеки */
.secscore{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:center;
  padding:15px 17px;border:1px solid rgba(255,255,255,.08);border-radius:16px;
  background:rgba(255,255,255,.022);margin-bottom:13px}
.secscore-num{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.secscore-num b{font:600 38px/1 var(--mono);color:#E9EBF4;letter-spacing:-1px}
.secscore-num i{font:400 11px/1 var(--mono);color:#6E7285;font-style:normal;margin-top:3px}
.secscore-num span{margin-top:7px;padding:3px 9px;border-radius:999px;font:600 9.5px/1 var(--mono);
  letter-spacing:.12em;text-transform:uppercase}
.secscore.ok .secscore-num span{color:#8FCFAE;background:rgba(0,144,81,.18)}
.secscore.mid .secscore-num span{color:#D8B45E;background:rgba(216,180,94,.14)}
.secscore.low .secscore-num span{color:#C98A84;background:rgba(148,17,0,.20)}
.secscore-bars{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.secbar{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.03)}
.secbar span{font:500 11px/1.2 var(--ui);color:#8B8F9E}
.secbar em{font:600 11px/1 var(--mono);color:#5E6272;font-style:normal}
.secbar.on{background:rgba(0,144,81,.12)}
.secbar.on span{color:#C9CEDA}
.secbar.on em{color:#009051}

.secrow{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:11px}
.secrow .hint{margin:0;flex:1 1 240px;min-width:200px}
.secbig{font:600 20px/1 var(--mono);color:#E9EBF4}
.secstate{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;margin-top:9px;
  border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(255,255,255,.02)}
.secstate b{display:block;font:600 12.5px/1.3 var(--ui);color:#E7E4F0}
.secstate small{display:block;margin-top:3px;font:400 11px/1.45 var(--ui);color:#8B8F9E}
.secstate.on{border-color:rgba(0,144,81,.32);background:rgba(0,144,81,.07)}
.secstate code{padding:1px 5px;border-radius:5px;background:rgba(255,255,255,.07);
  font:500 10.5px/1.4 var(--mono);color:#C9BCFF}

.secsteps{display:flex;flex-direction:column;gap:10px;margin-top:9px}
.secstep{display:flex;gap:11px;align-items:flex-start}
.secstep>b{flex:0 0 22px;height:22px;border-radius:999px;display:grid;place-items:center;
  background:rgba(139,109,255,.16);color:#C9BCFF;font:600 11px/1 var(--mono)}
.secstep>div{flex:1;min-width:0;font:400 11.5px/1.5 var(--ui);color:#B9BCC7}
.seckey{display:flex;gap:9px;align-items:center;margin:7px 0}
.seckey code{flex:1;min-width:0;padding:9px 11px;border-radius:10px;overflow-x:auto;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  font:600 13px/1.3 var(--mono);color:#E9EBF4;letter-spacing:.09em;white-space:nowrap}
code.brk{display:inline-block;max-width:100%;overflow-wrap:anywhere;word-break:break-all;
  padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.05);
  font:400 10px/1.45 var(--mono);color:#9C94B8}
.inp-code{max-width:132px;text-align:center;font:600 17px/1 var(--mono);letter-spacing:.32em}
.inp-promo{max-width:230px;font:600 13px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}

.reccodes{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;padding:4px 18px 12px}
.reccodes code{padding:9px 11px;border-radius:9px;text-align:center;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  font:600 13px/1 var(--mono);color:#E9EBF4;letter-spacing:.1em}

/* ---------------------------------------------------- таблиці розділів */
.stbl{width:100%;border-collapse:collapse;margin-top:9px}
.stbl th{padding:7px 9px;border-bottom:1px solid rgba(255,255,255,.09);
  font:600 9.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:#6E7285;text-align:left}
.stbl td{padding:8px 9px;border-bottom:1px solid rgba(255,255,255,.045);
  font:400 11.5px/1.35 var(--ui);color:#C0C3CE;vertical-align:middle}
.stbl td.mono{font-family:var(--mono);font-size:11px;color:#9DA1B0}
.stbl td.muted{color:#7E8291}
.stbl tr:last-child td{border-bottom:0}
.pill.bad{color:#C98A84;border-color:rgba(148,17,0,.4);background:rgba(148,17,0,.14)}

/* ------------------------------------------------------- перемикачі */
.sw{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;margin-top:8px;
  border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(255,255,255,.02);
  cursor:pointer}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw>span{flex:0 0 34px;height:19px;margin-top:1px;border-radius:999px;position:relative;
  background:rgba(255,255,255,.11);transition:background-color .18s ease}
.sw>span::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:999px;background:#9AA0B2;transition:transform .18s ease,background-color .18s ease}
.sw input:checked + span{background:rgba(0,144,81,.42)}
.sw input:checked + span::after{transform:translateX(15px);background:#DCEFE4}
.sw>div{flex:1;min-width:0}
.sw b{display:block;font:600 12.5px/1.3 var(--ui);color:#E7E4F0}
.sw small{display:block;margin-top:2px;font:400 11px/1.45 var(--ui);color:#8B8F9E}

/* --------------------------------------------------- майданчики і плани */
.rdonly{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;margin-bottom:13px;
  border:1px solid rgba(0,144,81,.30);border-radius:14px;background:rgba(0,144,81,.07)}
.rdonly b{display:block;font:600 12.5px/1.3 var(--ui);color:#E7E4F0}
.rdonly small{display:block;margin-top:3px;font:400 11px/1.5 var(--ui);color:#96A79E}

.vengrid,.plangrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));
  gap:8px;margin-top:9px}
.venq,.planq{display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  padding:11px 12px;border:1px solid rgba(255,255,255,.10);border-radius:13px;
  background:rgba(255,255,255,.028);cursor:pointer;text-align:left;
  transition:border-color .16s ease,background-color .16s ease,transform .16s ease}
.venq:hover,.planq:hover{transform:translateY(-1px);border-color:rgba(139,109,255,.42);
  background:rgba(139,109,255,.10)}
.venq b,.planq b{font:600 13px/1.2 var(--ui);color:#E9E4F6}
.venq i,.planq i{font:500 9.5px/1 var(--mono);color:#8B6DFF;font-style:normal;
  letter-spacing:.08em;text-transform:uppercase}
.venq em{font:400 10.5px/1.3 var(--ui);color:#7E8291;font-style:normal}
.planq.on{border-color:rgba(139,109,255,.6);background:rgba(139,109,255,.16)}
.planq.on b{color:#fff}

.promoout{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:10px;min-height:18px}
.promoout .good{font:600 12px/1 var(--mono);color:#009051;letter-spacing:.05em}
.promoout .bad{font:600 12px/1 var(--mono);color:#941100;letter-spacing:.05em}
.promoout .hint{margin:0}
.promoprice{display:flex;gap:9px;align-items:baseline}
.promoprice s{font:400 12px/1 var(--mono);color:#6E7285}
.promoprice b{font:600 17px/1 var(--mono);color:#E9EBF4}
.promoprice i{font:400 10.5px/1 var(--ui);color:#8B8F9E;font-style:normal}

@media (max-width:900px){
  .secscore{grid-template-columns:1fr}
  .secscore-bars{grid-template-columns:1fr}
  .reccodes{grid-template-columns:1fr}
  .acct-nav{flex-direction:row;overflow-x:auto;gap:6px}
  .acct-nv{flex:0 0 auto}
  .acct-nv i{display:none}
}

/* канон палітри: червоний тільки «перець», яскравого немає навіть на кнопках */
.account-modal .btn.danger,.mask .btn.danger{color:#C98A84;border-color:rgba(148,17,0,.42)}
.account-modal .btn.danger:hover,.mask .btn.danger:hover{color:#E0A9A2;border-color:rgba(148,17,0,.62);
  background-color:rgba(148,17,0,.14)}

/* ============================================================
   Психологія / Trader Health. Яскравий зелений #7AEDBB тут —
   свідомий виняток із палітри, підтверджений власником (§11.1).
   ============================================================ */
.hlhead{margin-bottom:14px}
.hlhead h2{margin:0;font:600 21px/1.15 var(--ui);color:#F2F0F8}
.hlhead p{margin:5px 0 0;font:400 12px/1.5 var(--ui);color:#8B8F9E;max-width:640px}

.hlwrap{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:22px;align-items:center}
.hlblob{position:relative;aspect-ratio:1;width:100%;max-width:320px;margin:0 auto}
.hlblob canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hlnum{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;pointer-events:none;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.hlnum b{font:600 54px/1 var(--mono);color:#F4F6FB;letter-spacing:-2px}
.hlnum i{margin-top:6px;font:500 10.5px/1 var(--mono);color:#C7CBDA;font-style:normal;
  letter-spacing:.14em;text-transform:uppercase}

.hlparts{display:grid;gap:9px;min-width:0}
.hlpart{display:grid;grid-template-columns:1fr 132px 42px;grid-template-areas:"l bar v" "i i i";
  gap:4px 12px;align-items:center;padding:9px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.022)}
.hlpart.off{opacity:.5}
.hlpl{grid-area:l;display:flex;gap:9px;align-items:baseline;min-width:0}
.hlpl b{font:600 12.5px/1.2 var(--ui);color:#E7E4F0}
.hlpl span{font:500 9.5px/1 var(--mono);color:#6E7285;letter-spacing:.08em;text-transform:uppercase}
.hlbar{grid-area:bar;height:6px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.hlbar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#009051,#4BE0A8);transition:width .5s ease}
.hlpart.off .hlbar i{background:#3A3A46}
.hlpv{grid-area:v;text-align:right;font:600 15px/1 var(--mono);color:#E9EBF4}
.hlpart.off .hlpv{color:#5E6272}
.hlpi{grid-area:i;font:400 10.5px/1.4 var(--ui);color:#7E8291}

.moodpill{display:inline-block;padding:2px 8px;border-radius:999px;
  font:500 10.5px/1.5 var(--ui);color:#C9CEDA;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09)}
.moodpill[data-g="Ресурсний"]{color:#8FCFAE;border-color:rgba(0,144,81,.36);background:rgba(0,144,81,.12)}
.moodpill[data-g="Збудження"]{color:#D8B45E;border-color:rgba(216,180,94,.32);background:rgba(216,180,94,.10)}
.moodpill[data-g="Виснаження"]{color:#9AA0B2;border-color:rgba(255,255,255,.12)}
.moodpill[data-g="Тривога"]{color:#C98A84;border-color:rgba(148,17,0,.36);background:rgba(148,17,0,.12)}
.lockmark{margin-left:6px;padding:1px 6px;border-radius:999px;font:600 8.5px/1.5 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;color:#8B8F9E;background:rgba(255,255,255,.06)}
.stbl tr.dim td{color:#6E7285}

@media (max-width:1000px){.hlwrap{grid-template-columns:1fr}}
/* число всередині блоба має читатись поверх яскравої кромки */
.hlnum::before{content:"";position:absolute;width:62%;height:62%;border-radius:50%;
  background:radial-gradient(circle,rgba(3,4,10,.72),rgba(3,4,10,0) 70%)}
.hlnum b,.hlnum i{position:relative}