/*
 * ACG dashboard home, laid out like the Alpha Group dashboards
 * (docs/ALPHA-TEMPLATE.md) in ACG colours.
 * Colours come from the --d-* roles in css/dashboard/tokens.css; type and
 * spacing from the shared --acg-* scale. The sidebar itself is styled by
 * app.css; this file only maps it onto the dashboard roles.
 */

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overscroll-behavior: none; }
body { background: var(--d-page); color: var(--d-text); font: var(--acg-weight-regular) var(--acg-size-sm)/var(--acg-leading-normal) var(--acg-font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid var(--d-brand-solid); outline-offset: 2px; }
[data-money] { transition: filter .2s; }
body.is-masked [data-money] { filter: blur(7px); }
.up { color: var(--d-up); }
.down { color: var(--d-down); }
.muted { color: var(--d-muted); }

/* Icons: Alpha dashboard SVGs used as masks, so they take currentColor */
.ic { display: inline-block; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic--trades { --i: url("../../images/icons/nav-trades.svg"); }
.ic--payout { --i: url("../../images/icons/nav-payout.svg"); }
.ic--wallet { --i: url("../../images/icons/topbar-wallet.svg"); }
.ic--bell { --i: url("../../images/icons/topbar-bell.svg"); width: 15px; height: 15px; }
.ic--table { --i: url("../../images/icons/d-table.svg"); width: 14px; height: 14px; }
.ic--chart { --i: url("../../images/icons/chart-profit.svg"); width: 12px; height: 12px; }
.ic--balance { --i: url("../../images/icons/stat-balance.svg"); width: 18px; height: 18px; }
.ic--equity { --i: url("../../images/icons/stat-payouts.svg"); width: 18px; height: 18px; }
.ic--month { --i: url("../../images/icons/stat-rule.svg"); width: 18px; height: 18px; }
.ic--copy { --i: url("../../images/icons/copy.svg"); width: 12px; height: 12px; }
.ic--chev { --i: url("../../images/icons/chevron-down.svg"); width: 10px; height: 10px; }

/* ── Shell ────────────────────────────────────────────────────── */
.sh { display: grid; grid-template-columns: var(--acg-sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.mn { min-width: 0; display: flex; flex-direction: column; }
.scrim[hidden] { display: none; }

/* Sidebar (app.css) on the dashboard roles, with teal kept for hover only */
.acg-sb {
  background: var(--d-panel);
  --acg-text: var(--d-text);
  --acg-text-secondary: var(--d-text-2);
  --acg-text-muted: var(--d-muted);
  --acg-border: var(--d-line);
  --acg-border-subtle: var(--d-line);
  --acg-ink-accent: var(--d-ink);
}
.acg-sb .acg-nv[aria-current="page"] { background: var(--d-ctl); }
.acg-sb .acg-nv__badge { background: var(--d-text); color: var(--d-page); }
.acg-sb .acg-appl__title small { color: var(--d-text-2); }
.acg-sb .acg-cur__trade { background: var(--d-ctl); }
.acg-sb .acg-cur__trade img { filter: invert(1); }
.acg-sb .acg-cur__trade:hover { background: var(--d-accent); }
.acg-sb .acg-cur__trade:hover img { filter: none; }
:root[data-theme="light"] .acg-sb .acg-cur__trade img { filter: none; }
:root[data-theme="light"] .acg-sb .acg-cur__trade:hover img { filter: invert(1); }

/* Account switcher options (painted by dashboard.js) */
.acg-cur__opt { display: flex; align-items: center; gap: var(--acg-space-3); width: 100%; padding: 8px 10px; border: 0; border-radius: var(--d-r-sm); background: transparent; text-align: left; cursor: pointer; font-size: var(--acg-size-xs); }
.acg-cur__opt:hover { background: var(--d-ctl-2); }
:root[data-theme="light"] .acg-cur__opt:hover { background: var(--d-ctl); }
.acg-cur__opt i { width: 6px; height: 6px; border-radius: var(--acg-radius-full); background: transparent; box-shadow: inset 0 0 0 1px var(--d-muted); }
.acg-cur__opt[aria-checked="true"] i { background: var(--d-brand-solid); box-shadow: none; }
.acg-cur__opt span { flex: 1; line-height: 1.3; }
.acg-cur__opt small { display: block; color: var(--d-muted); font-size: var(--acg-size-xs); }
.acg-cur__opt b { font-weight: var(--acg-weight-regular); color: var(--d-text-2); }

/* Menus: sidebar and account ⋯ (app.css markup), filters (.menu) */
.acg-sb .acg-menu, .ac__more .acg-menu { background: var(--d-panel); border: 0; box-shadow: 0 16px 44px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--d-line); }
.ac__more .acg-menu { --acg-text: var(--d-text); --acg-text-secondary: var(--d-text-2); --acg-surface-muted: var(--d-ctl); }
:root[data-theme="light"] .acg-sb .acg-menu { background: var(--acg-white); box-shadow: 0 16px 44px rgba(12, 12, 14, .16), 0 0 0 1px var(--d-line); }
:root[data-theme="light"] .ac__more .acg-menu { background: var(--acg-white); }
/* Menus: compact rows with icons, opening with a short fade-and-scale from their button (and closing the same way) */
.acg-menu { min-width: 216px; padding: 6px; border-radius: var(--d-r); transform-origin: top right;
  transition: opacity .16s ease, transform .2s cubic-bezier(.16, 1, .3, 1), display .2s allow-discrete, overlay .2s allow-discrete; }
.acg-menu[hidden] { opacity: 0; transform: translateY(-4px) scale(.97); }
@starting-style { .acg-menu:not([hidden]) { opacity: 0; transform: translateY(-4px) scale(.97); } }
.acg-cur__menu { transform-origin: top left; }
.acg-sb__me .acg-menu { transform-origin: bottom center; }
.acg-sb__me .acg-menu[hidden] { transform: translateY(4px) scale(.97); }
@starting-style { .acg-sb__me .acg-menu:not([hidden]) { opacity: 0; transform: translateY(4px) scale(.97); } }
.acg-menu .acg-menu__item { justify-content: flex-start; gap: 10px; height: 34px; padding: 0 10px; border-radius: var(--d-r-sm); color: var(--d-text-2); font-size: var(--acg-size-xs); font-weight: var(--acg-weight-regular); transition: background-color .12s ease, color .12s ease; }
.acg-menu .acg-menu__item:hover, .acg-menu .acg-menu__item:focus-visible { background: var(--d-ctl); color: var(--d-text); }
:root[data-theme="light"] .acg-menu .acg-menu__item:hover { background: var(--d-ctl); }
/* a <button> row (Sign out) drops the browser's grey box and border, so it matches the link rows */
.acg-menu button.acg-menu__item { border: 0; background: transparent; cursor: pointer; text-align: left; }
.acg-menu .acg-menu__item--danger { color: var(--d-down); }
.acg-menu .acg-menu__item--danger .mi { opacity: .9; }
.acg-menu .acg-menu__item--danger:hover, .acg-menu .acg-menu__item--danger:focus-visible { background: color-mix(in srgb, var(--d-down) 12%, transparent); color: var(--d-down); }
.acg-menu .acg-menu__item:focus-visible { outline: none; }
.acg-menu__label { padding: 6px 10px 4px; color: var(--d-muted); font-size: var(--acg-size-xs); white-space: nowrap; }
.acg-menu__sep { height: 1px; margin: 6px 4px; background: var(--d-line); }
.mi { flex: none; width: 15px; height: 15px; background: currentColor; opacity: .75; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.acg-menu__item:hover .mi { opacity: 1; }
.mi--dep { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v13m-6-6 6 6 6-6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mi--wd { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20V7m-6 6 6-6 6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mi--tr { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h14m-4-4 4 4-4 4M20 16H6m4-4-4 4 4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mi--lev { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 16a8 8 0 0 1 16 0M12 16l4-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mi--key { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 9.5a3.5 3.5 0 1 1-1 2.5L5 20M8 17l2 2M6 19l1.5 1.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mi--hist { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.6M4 4v4h4M12 8v4l3 2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mi--tour { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='m14.8 9.2-1.6 4-4 1.6 1.6-4 4-1.6Z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mi--user { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM5 20a7 7 0 0 1 14 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mi--out { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 16l4-4-4-4M14 12H4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.menu { position: absolute; z-index: 60; min-width: 200px; padding: 6px; border-radius: var(--d-r); background: var(--d-ctl); box-shadow: 0 16px 44px rgba(0, 0, 0, .42); }
:root[data-theme="light"] .menu { background: var(--acg-white); box-shadow: 0 16px 44px rgba(12, 12, 14, .16), 0 0 0 1px var(--d-line); }
.menu[hidden] { display: none; }
.menu__item { display: flex; align-items: center; justify-content: space-between; gap: var(--acg-space-3); width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: var(--d-r-sm); background: transparent; color: var(--d-text); font-size: var(--acg-size-xs); text-align: left; text-decoration: none; cursor: pointer; }
.menu__item:hover { background: var(--d-ctl-2); }
:root[data-theme="light"] .menu__item:hover { background: var(--d-ctl); }

/* Phone bar: opens the sidebar (no top bar on desktop) */
.tb { position: sticky; top: 0; z-index: 30; display: none; align-items: center; justify-content: space-between; gap: var(--acg-space-2); padding: var(--acg-space-3) var(--acg-space-4); background: var(--d-page); }
.tb__logo { height: 14px; width: auto; }
:root[data-theme="light"] .tb__logo { filter: invert(1); }
.tb__icon { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: var(--d-r); background: var(--d-panel); color: var(--d-text); cursor: pointer; }
.tb__icon:hover { background: var(--d-ctl); }
.tb__icon svg { width: 18px; height: 18px; }
.tb__dot { position: absolute; top: 9px; right: 10px; width: 6px; height: 6px; border-radius: var(--acg-radius-full); background: #ff7a45; }

/* ── Page ─────────────────────────────────────────────────────── */
.pg { display: flex; flex-direction: column; gap: var(--acg-space-4); width: 100%; max-width: calc(1360px + 2 * var(--acg-space-12)); margin-inline: auto; padding: var(--acg-space-12); } /* same space on top, sides and bottom; content caps at 1360px and centres on wide screens */
.card { position: relative; border-radius: var(--d-r); background: var(--d-panel); }
/* Website card edge: a faint hairline on the top-left, fading out (none in light) */
.card::before, .sum::before {
  content: ""; position: absolute; inset: 0; z-index: 3; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 25%, rgba(255, 255, 255, 0) 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
:root[data-theme="light"] .card::before, :root[data-theme="light"] .sum::before { background: none; }
:root[data-theme="light"] .card, :root[data-theme="light"] .sum { box-shadow: 0 1px 2px rgba(13, 13, 13, .04); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--acg-space-3); }
.card__title { display: flex; align-items: center; gap: var(--acg-space-2); margin: 0; font-size: var(--acg-size-xs); font-weight: var(--acg-weight-regular); }
.card__title .ic { color: var(--d-text-2); }

/* Controls */
.ctl { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--d-r-sm); background: var(--d-ctl); color: var(--d-text-2); font-size: var(--acg-size-xs); cursor: pointer; }
.ctl:hover { color: var(--d-text); }
.ctl .ic { opacity: .7; }
.ctl--btn { justify-content: center; height: 36px; padding: 0 var(--acg-space-3); border-radius: var(--d-r-sm); color: var(--d-text); font-size: var(--acg-size-xs); text-decoration: none; }
.ctl--btn:hover { background: var(--d-ctl-2); }
/* Buttons: the website's one design (components.css .acg-btn): 40px, 4px corners, arrow box */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--acg-space-3); height: var(--acg-control-h); padding: 0 var(--acg-space-4); border: 0; border-radius: var(--d-r-sm); font: var(--acg-weight-medium) var(--acg-size-sm)/1 var(--acg-font); letter-spacing: var(--acg-tracking-snug); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--acg-duration) var(--acg-ease), color var(--acg-duration) var(--acg-ease), translate var(--acg-duration) var(--acg-ease); }
.btn:active { translate: 0 1px; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--d-page), 0 0 0 4px var(--d-accent-hover); }
/* Main action (.btn--primary; .btn--light is the same button) */
.btn--primary, .btn--light { background: var(--d-btn); color: var(--d-btn-ink); }
.btn--primary:hover, .btn--light:hover { background: var(--d-btn-hover); }
.btn--primary .btn__icon, .btn--light .btn__icon { background: var(--d-btn-box); }
.btn--primary .btn__icon img, .btn--light .btn__icon img { filter: var(--d-btn-arrow); }
.btn--primary:disabled, .btn--light:disabled { opacity: .45; }
/* Dark brand panels keep the white button in both themes */
:is(.gw, .pf__hero, .sum__profile, .ins, .fh, .axh) { --d-btn: var(--acg-white); --d-btn-ink: var(--acg-text-inverse); --d-btn-hover: color-mix(in srgb, var(--acg-text-inverse) 7%, var(--acg-white)); --d-btn-box: color-mix(in srgb, var(--acg-text-inverse) 8%, var(--acg-white)); --d-btn-arrow: none; }
/* Glass: secondary action on a dark brand panel */
.btn--glass { background: var(--d-on-accent); color: var(--acg-white); }
.btn--glass:hover { background: var(--d-on-accent-hover); }
/* Brand: the ACG deep teal */
.btn--brand { background: var(--d-accent); color: var(--d-accent-ink); }
.btn--brand:hover { background: var(--d-accent-hover); }
.btn--brand .btn__icon { background: var(--d-btn-box); }
/* Secondary and destructive */
.btn--muted { background: var(--d-ctl); color: var(--d-text); }
.btn--muted:hover { background: var(--d-ctl-2); }
.btn--danger { background: var(--d-ctl); color: var(--d-down); }
.btn--danger:hover { background: color-mix(in srgb, var(--d-down) 14%, var(--d-ctl)); }
.btn:has(.btn__icon) { padding-right: 2px; }
.btn__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: calc(var(--d-r-sm) - 2px); background: var(--acg-white); overflow: hidden; }
.btn__icon img { width: 12px; height: auto; transition: translate var(--acg-duration) var(--acg-ease); }
.btn:hover .btn__icon img { translate: 3px 0; }
.btn--block { flex: 1; justify-content: space-between; }
/* Trade: quiet grey until you point at it, then ACG teal */
.btn--trade { background: var(--d-ctl); color: var(--d-text); font-size: var(--acg-size-xs); }
.btn--trade .btn__icon { background: var(--d-ctl-2); transition: background-color var(--acg-duration) var(--acg-ease); }
.btn__arrow { width: 12px; height: 13px; background: currentColor; -webkit-mask: url("../../images/icon-arrow-right.svg") center / contain no-repeat; mask: url("../../images/icon-arrow-right.svg") center / contain no-repeat; transition: translate var(--acg-duration) var(--acg-ease); }
.btn--trade:hover:not(:disabled) { background: var(--d-teal); color: var(--d-teal-ink); }
.btn--trade:hover:not(:disabled) .btn__icon { background: var(--d-btn-box); }
.btn--trade:hover:not(:disabled) .btn__arrow { translate: 3px 0; }
.btn--trade:disabled { color: var(--d-muted); cursor: not-allowed; }
.btn--trade:disabled:active { translate: none; }
.btn--trade:disabled .btn__arrow { opacity: .4; }
/* Disabled account: greyed out, no actions */
.ac.is-disabled { opacity: .5; }
.ac.is-disabled .ac__num { color: var(--d-text-2); }
.go { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--acg-space-3); border: 0; border-radius: var(--d-r-sm); background: var(--d-ctl); color: var(--d-text); font-size: var(--acg-size-xs); font-weight: var(--acg-weight-medium); cursor: pointer; }
.go:hover { background: var(--d-ctl-2); }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--d-r-sm); background: var(--d-well); }
.seg button { height: 26px; padding: 0 10px; border: 0; border-radius: calc(var(--d-r-sm) - 3px); background: transparent; color: var(--d-muted); font-size: var(--acg-size-xs); cursor: pointer; transition: color var(--acg-duration) var(--acg-ease); }
.seg button:hover { color: var(--d-text); }
.seg button[aria-selected="true"] { background: var(--d-accent); color: var(--d-accent-ink); }
.login { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--d-text); font: inherit; cursor: pointer; }
.login .ic { color: var(--d-muted); }
.login:hover .ic, .login.is-copied .ic { color: var(--d-text); }
/* Chips: one size everywhere (pills, Buy/Sell, Demo/Disabled) */
.tag, .st__pill, .ac__tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: calc(var(--d-r-sm) - 2px); background: var(--d-ctl); color: var(--d-text-2); font-size: var(--acg-size-xs); font-style: normal; font-weight: var(--acg-weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag--buy { background: color-mix(in srgb, var(--d-up) 14%, transparent); color: var(--d-up); }
.tag--sell { background: color-mix(in srgb, var(--d-down) 14%, transparent); color: var(--d-down); }
:root[data-theme="light"] .tag--buy, :root[data-theme="light"] .tag--sell { background: var(--d-ctl); } /* light: grey chip, coloured text */
.dot { display: inline-block; width: 6px; height: 6px; flex: none; margin-top: 5px; border-radius: var(--acg-radius-full); background: var(--d-up); }
.dot--warn { background: var(--d-warn); }

/* ── Summary: profile panel + three figures ───────────────────── */
.sum { position: relative; display: grid; grid-template-columns: minmax(0, 445fr) minmax(0, 695fr); min-height: 196px; border-radius: var(--d-r); background: var(--d-panel); overflow: hidden; }
/* The brand panel: website deep-teal gradient, same in both themes (white text) */
/* Profile: the website's CTA gradient (dark top-left, teal bottom-right, fine grain) */
.sum__profile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--acg-space-5); padding: var(--acg-space-5); background: var(--d-hero); color: var(--acg-white); overflow: hidden; }
.sum__logo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--d-on-accent); color: var(--acg-white); font-size: var(--acg-size-md); font-weight: var(--acg-weight-medium); }
.sum__foot { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--acg-space-3); flex-wrap: wrap; }
.sum__who strong { display: block; font-size: var(--acg-size-md); font-weight: var(--acg-weight-medium); }
.sum__who small { display: block; color: var(--d-on-accent-muted); font-size: var(--acg-size-xs); }
/* Wallet, bottom right of the profile panel */
.sum__wallet { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.sum__wallet small { color: var(--d-on-accent-muted); font-size: var(--acg-size-xs); }
.sum__wallet b { font-size: var(--acg-size-h4); font-weight: var(--acg-weight-regular); line-height: 1.2; letter-spacing: var(--acg-tracking-snug); font-variant-numeric: tabular-nums; }
.sum__wallet > span { display: inline-flex; align-items: center; gap: 6px; color: var(--d-on-accent-text); font-size: var(--acg-size-xs); }
.sum__wallet .dot { margin: 0; }
.sum__links { display: flex; gap: var(--acg-space-2); }
.sum__link { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--d-r-sm); background: var(--d-on-accent); color: var(--acg-white); font-size: var(--acg-size-xs); text-decoration: none; transition: background-color var(--acg-duration) var(--acg-ease); }
.sum__link:hover { background: var(--d-on-accent-hover); }
/* Deposit: the website's white button, so it stands out on the teal */
.sum__link--main { background: var(--acg-white); color: var(--acg-text-inverse); font-weight: var(--acg-weight-medium); }
.sum__link--main:hover { background: color-mix(in srgb, var(--acg-text-inverse) 8%, var(--acg-white)); }
.sum__stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
/* Quick actions: the old dashboard's four, as a 2×2 grid split by hairlines */
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.qa__item { display: flex; align-items: center; gap: var(--acg-space-3); min-width: 0; padding: var(--acg-space-4) var(--acg-space-5); color: var(--d-text); text-decoration: none; box-shadow: inset 1px 0 0 var(--d-line); transition: background-color var(--acg-duration) var(--acg-ease); }
.qa__item:nth-child(n+3) { box-shadow: inset 1px 0 0 var(--d-line), inset 0 1px 0 var(--d-line); }
.qa__item:hover { background: color-mix(in srgb, var(--d-ctl) 55%, transparent); }
.qa__item:hover .fund__ic::after { background: var(--d-text); }
.qa__txt { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.qa__txt b { overflow: hidden; font-size: var(--acg-size-sm); font-weight: var(--acg-weight-medium); white-space: nowrap; text-overflow: ellipsis; }
.qa__txt small { overflow: hidden; color: var(--d-muted); font-size: var(--acg-size-xs); white-space: nowrap; text-overflow: ellipsis; }
.qa__go { flex: none; width: 12px; height: 12px; background: var(--d-muted); -webkit-mask: url("../../images/icon-chevron-right.svg") center / contain no-repeat; mask: url("../../images/icon-chevron-right.svg") center / contain no-repeat; transition: translate var(--acg-duration) var(--acg-ease), background-color var(--acg-duration) var(--acg-ease); }
.qa__item:hover .qa__go { translate: 2px 0; background: var(--d-text); }
.st { display: flex; flex-direction: column; padding: var(--acg-space-5); box-shadow: inset 1px 0 0 var(--d-line); }
.st__label { display: flex; align-items: center; gap: var(--acg-space-2); color: var(--d-muted); font-size: var(--acg-size-xs); }
.st__pill { margin-left: auto; }
.st__pill--up { background: color-mix(in srgb, var(--d-up) 14%, transparent); color: var(--d-up); }
.st__pill--down { background: color-mix(in srgb, var(--d-down) 14%, transparent); color: var(--d-down); }
.st__label .ic { color: var(--d-text-2); }
.st__value { margin-top: auto; font-size: var(--acg-size-h2); font-weight: var(--acg-weight-regular); line-height: 1; letter-spacing: var(--acg-tracking-display); font-variant-numeric: tabular-nums; }
.st__value small { margin-left: 4px; color: var(--d-muted); font-size: var(--acg-size-md); letter-spacing: 0; }
.st__sub { margin-top: var(--acg-space-2); color: var(--d-muted); font-size: var(--acg-size-xs); }

/* ── Accounts: compact cards ──────────────────────────────────── */
.acs { display: flex; flex-direction: column; gap: var(--acg-space-3); }
.acs__head { display: flex; align-items: center; justify-content: space-between; gap: var(--acg-space-3); padding: 0 2px; }
.acs__tools { display: flex; align-items: center; gap: var(--acg-space-3); }
.acs__link { color: var(--d-muted); font-size: var(--acg-size-xs); text-decoration: none; white-space: nowrap; transition: color var(--acg-duration) var(--acg-ease); }
.acs__link:hover { color: var(--d-text); }
.filt { position: relative; }
/* View all accounts: the rest of the cards ease open under the first row and fade in, one after another */
.acs__more { display: grid; grid-template-rows: 0fr; margin-top: calc(var(--acg-space-3) * -1); transition: grid-template-rows .5s cubic-bezier(.22, 1, .36, 1); }
.acs__more.is-open { grid-template-rows: 1fr; }
.acs__more-in { min-height: 0; overflow: hidden; }
.acs__more-in > .acs__grid { padding-top: var(--acg-space-3); }
.acs__more .ac { opacity: 0; translate: 0 -6px; transition: opacity .25s ease, translate .25s ease; }
.acs__more.is-open .ac { opacity: 1; translate: 0 0; transition: opacity .4s ease, translate .5s cubic-bezier(.22, 1, .36, 1); }
.acs__more.is-open .ac:nth-child(2) { transition-delay: .05s; }
.acs__more.is-open .ac:nth-child(3) { transition-delay: .1s; }
.acs__more.is-open .ac:nth-child(n+4) { transition-delay: .15s; }
.acs__more.is-open .ac.is-disabled { opacity: .5; }
.acs__more:not(.is-open) .acs__more-in { visibility: hidden; transition: visibility 0s .5s; }
.acs__toggle { width: 100%; gap: var(--acg-space-2); background: var(--d-panel); font-size: var(--acg-size-xs); font-weight: var(--acg-weight-regular); color: var(--d-text-2); }
.acs__toggle:hover { background: color-mix(in srgb, var(--d-text) 5%, var(--d-panel)); color: var(--d-text); }
.acs__toggle[hidden] { display: none; }
.acs__toggle .ic { opacity: .7; transition: rotate .3s var(--acg-ease); }
.acs__toggle[aria-expanded="true"] .ic { rotate: 180deg; }
.acs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--acg-space-4); }
.ac { display: flex; flex-direction: column; gap: var(--acg-space-5); padding: var(--acg-space-5); transition: box-shadow var(--acg-duration) var(--acg-ease); }
.ac[data-acct-row] { cursor: pointer; }
.ac__top { display: flex; align-items: center; gap: var(--acg-space-3); }
.ac__top > img, .ac__ic { width: 32px; height: 32px; flex: none; border-radius: var(--d-r-sm); }
.ac__ic { display: grid; place-items: center; background: var(--d-ctl); color: var(--d-text-2); }
.ac__id { flex: 1; min-width: 0; line-height: 1.3; }
.ac__id strong { display: flex; align-items: center; gap: var(--acg-space-2); font-size: var(--acg-size-sm); font-weight: var(--acg-weight-medium); }
.ac__id small { display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--d-muted); font-size: var(--acg-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.ac__id small .dot { margin: 0; }
.ac__top .login { flex: none; color: var(--d-muted); font-size: var(--acg-size-xs); }
.ac__fig { display: flex; align-items: baseline; justify-content: space-between; gap: var(--acg-space-3); }
.ac__num { font-size: var(--acg-size-h4); letter-spacing: var(--acg-tracking-snug); font-variant-numeric: tabular-nums; }
.ac__chg { font-size: var(--acg-size-xs); font-weight: var(--acg-weight-medium); font-variant-numeric: tabular-nums; }
.ac__chg.muted { font-weight: var(--acg-weight-regular); }
.ac__act { position: relative; display: flex; align-items: center; gap: var(--acg-space-2); margin-top: auto; }
.ac__more { position: relative; }
.ac__more .acg-more { width: var(--acg-control-h); height: var(--acg-control-h); border-radius: var(--d-r-sm); background: var(--d-ctl); color: var(--d-text); box-shadow: none; }
.ac__more button.acg-menu__item { border: 0; background: transparent; font: inherit; cursor: pointer; text-align: left; white-space: nowrap; }
.ac--empty { justify-content: center; }
.ac--empty strong { font-weight: var(--acg-weight-medium); }
.ac--empty p { margin: 0; color: var(--d-muted); font-size: var(--acg-size-xs); }
.ac--empty .btn { align-self: flex-start; }

/* ── Performance chart + insights ─────────────────────────────── */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--acg-space-4); align-items: stretch; }
.ch { display: flex; flex-direction: column; padding: 12px 14px; min-height: 360px; }
.ch .card__head { flex-wrap: wrap; row-gap: var(--acg-space-2); }
.ch__left { display: flex; align-items: center; gap: var(--acg-space-4); }
.ch__fig { display: flex; align-items: baseline; gap: var(--acg-space-3); margin: var(--acg-space-4) 0 var(--acg-space-2); }
.ch__num { font-size: var(--acg-size-h3); font-weight: var(--acg-weight-regular); letter-spacing: var(--acg-tracking-tight); font-variant-numeric: tabular-nums; }
.ch__chg { font-size: var(--acg-size-xs); }
.ch__plot { position: relative; flex: 1; min-height: 220px; }
.ch__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ch__grid line { stroke: var(--d-line); }
.ch__grid .ch__zero { stroke: var(--d-muted); stroke-dasharray: 3 4; opacity: .5; } /* break-even line on the profit view */
.ch__axis { fill: var(--d-muted); font-size: var(--acg-size-xs); font-family: var(--acg-font); }
.ch__line { fill: none; stroke: var(--d-accent-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ch__area { fill: url(#ch-fill); }
.ch__cross { stroke: var(--d-text-2); stroke-dasharray: 2 3; opacity: .5; }
.ch__dot { fill: var(--d-accent-line); stroke: var(--d-panel); stroke-width: 2; }
.ch__tip { position: absolute; z-index: 2; translate: -50% -100%; margin-top: -12px; padding: 5px 9px; border-radius: var(--d-r-sm); background: var(--d-accent); color: var(--d-accent-ink); font-size: var(--acg-size-xs); white-space: nowrap; pointer-events: none; }

/* Insights: Alpha Group products from the website (Alpha Trader, My Alpha, Divento),
   on the dashboard's dark card with the website's teal glow. Stays dark in both themes. */
.ins { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; min-height: 360px; padding: var(--acg-space-6); border-radius: var(--d-r); overflow: hidden; color: var(--acg-white); background: var(--d-promo); }
/* $250K giveaway: the website's teal card, the ACG mark large and faint off the right edge */
.gw { gap: var(--acg-space-3); background: var(--d-giveaway); }
.gw > * { position: relative; }
.gw__mark { position: absolute; z-index: -1; right: -90px; top: 50%; width: auto; height: 120%; translate: 0 -50%; opacity: .08; pointer-events: none; }
.gw__tag { display: inline-flex; align-items: center; gap: var(--acg-space-2); padding: 5px var(--acg-space-3) 5px 5px; border-radius: var(--d-r-sm); background: rgba(0, 0, 0, .18); font-size: var(--acg-size-xs); font-weight: var(--acg-weight-medium); line-height: 1.35; white-space: nowrap; }
.gw__tag img { width: 20px; height: 20px; flex: none; border-radius: 50%; }
.gw h3 { max-width: 280px; margin: var(--acg-space-2) 0 0; font-size: var(--acg-size-h3); font-weight: var(--acg-weight-regular); line-height: 1.12; letter-spacing: var(--acg-tracking-tight); }
.gw__when { margin: 0; color: var(--d-on-accent-text); font-size: var(--acg-size-xs); }
.gw__when a { color: inherit; }
.gw__when a:hover { color: var(--acg-white); }
.gw__clock { display: flex; width: 100%; margin-top: auto; padding-top: var(--acg-space-4); }
.gw__clock span { display: flex; flex: 1; flex-direction: column; align-items: center; }
.gw__clock span + span { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2); }
.gw__clock b { font-size: var(--acg-size-h3); font-weight: var(--acg-weight-regular); line-height: 1; letter-spacing: var(--acg-tracking-snug); font-variant-numeric: tabular-nums; }
.gw__clock b.is-tick { animation: gw-tick .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes gw-tick { from { opacity: .4; } }
.gw__clock small { margin-top: 6px; color: var(--d-on-accent-muted); font-size: var(--acg-size-xs); }
.gw__cta { flex: none; align-self: stretch; margin-top: var(--acg-space-2); }
.gw__cta:disabled { cursor: default; opacity: .85; }

/* ── Recent trades + funding ──────────────────────────────────── */
.duo--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lst { padding: 14px; }
.lst__head { padding: 0 2px var(--acg-space-3); }
.tbl__wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.t { width: 100%; min-width: 420px; border-collapse: separate; border-spacing: 0; font-size: var(--acg-size-xs); font-variant-numeric: tabular-nums; }
.t th { height: 32px; padding: 0 12px; background: var(--d-well); color: var(--d-muted); font-size: var(--acg-size-xs); font-weight: var(--acg-weight-regular); text-align: left; white-space: nowrap; }
.t th:first-child { border-radius: var(--d-r-sm) 0 0 var(--d-r-sm); }
.t th:last-child { border-radius: 0 var(--d-r-sm) var(--d-r-sm) 0; }
.t td { height: 44px; padding: 0 12px; white-space: nowrap; border-bottom: 1px solid var(--d-line); }
.t tr:last-child td { border-bottom: 0; }
.t tbody tr { transition: background-color var(--acg-duration) var(--acg-ease); }
.t tbody tr:hover td { background: color-mix(in srgb, var(--d-ctl) 60%, transparent); }
.t .r { text-align: right; }
.t__empty td { height: 120px; color: var(--d-muted); text-align: center; }
.sym { font-weight: var(--acg-weight-medium); }
.fund { list-style: none; margin: 0; padding: 0; }
.fund li { display: flex; align-items: center; gap: var(--acg-space-3); padding: 10px 2px; border-bottom: 1px solid var(--d-line); font-size: var(--acg-size-xs); }
.fund li:last-child { border-bottom: 0; }
.fund li.is-pending { margin: 0 -8px; padding: 10px; border: 0; border-radius: var(--d-r-sm); background: var(--d-well); }
.fund__ic { position: relative; width: 30px; height: 30px; flex: none; border-radius: var(--d-r-sm); background: var(--d-ctl); }
.fund__ic::after { content: ""; position: absolute; inset: 8px; background: var(--d-text-2); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.fund__ic--dep { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v13m-6-6 6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fund__ic--wd { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20V7m-6 6 6-6 6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fund__ic--dl { --m: url("../../images/icons/nav-downloads.svg"); }
.fund__ic--tr { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h14m-4-4 4 4-4 4M20 16H6m4-4-4 4 4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fund__main { flex: 1; min-width: 0; line-height: 1.35; }
.fund__main b, .fund__end b { display: block; font-weight: var(--acg-weight-medium); font-variant-numeric: tabular-nums; }
.fund__main small { display: block; overflow: hidden; color: var(--d-muted); font-size: var(--acg-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.fund__end { text-align: right; line-height: 1.35; white-space: nowrap; }
.fund__end small { display: inline-flex; align-items: center; gap: 5px; color: var(--d-muted); font-size: var(--acg-size-xs); }
.fund__end .dot { margin: 0; }
.fund__empty { color: var(--d-muted); padding: var(--acg-space-6) 0 !important; border: 0 !important; }

/* Toast */
.acg-toast { position: fixed; left: 50%; bottom: var(--acg-space-6); z-index: 90; translate: -50% 0; max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: var(--d-r); background: var(--d-text); color: var(--d-page); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); font-size: var(--acg-size-xs); }
.acg-toast[hidden] { display: none; }
.acg-toast + .acg-toast { bottom: calc(var(--acg-space-6) + 52px); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .sum { grid-template-columns: minmax(0, 1fr); }
  .sum__profile { min-height: 160px; }
  .st:first-child { box-shadow: none; }
  .duo, .duo--even { grid-template-columns: minmax(0, 1fr); }
  .ins { min-height: 300px; }
  .acs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .sh { grid-template-columns: minmax(0, 1fr); }
  .scrim { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .5); }
  .tb { display: flex; }
  .pg { padding: var(--acg-space-2) var(--acg-space-4) var(--acg-space-6); }
}
@media (max-width: 640px) {
  .sum__stats { grid-template-columns: minmax(0, 1fr); }
  .qa__item { padding: var(--acg-space-4); box-shadow: inset 0 1px 0 var(--d-line); }
  .qa__item:nth-child(even) { box-shadow: inset 0 1px 0 var(--d-line), inset 1px 0 0 var(--d-line); }
  .qa__item:nth-child(n+3) { box-shadow: inset 0 1px 0 var(--d-line); }
  .qa__item:nth-child(4) { box-shadow: inset 0 1px 0 var(--d-line), inset 1px 0 0 var(--d-line); }
  .qa__go { display: none; }
  .qa__item { flex-direction: column; align-items: flex-start; gap: var(--acg-space-2); }
  .qa__txt { width: 100%; }
  .sum__foot { flex-direction: column; align-items: stretch; }
  .sum__wallet { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--acg-space-3); padding-top: var(--acg-space-3); box-shadow: inset 0 1px 0 var(--d-on-accent); text-align: left; }
  .sum__wallet > span { flex-basis: 100%; }
  .st { padding: var(--acg-space-4) var(--acg-space-5); box-shadow: inset 0 1px 0 var(--d-line) !important; }
  .st__value { margin-top: var(--acg-space-3); }
  .ch__left .card__title { display: none; }
  .acs__grid { grid-template-columns: minmax(0, 1fr); }
  .acs__link { display: none; }
  .t { min-width: 0; }
  .t--hide4 th:nth-child(4), .t--hide4 td:nth-child(4) { display: none; }  /* opt-in per table */
  .t th, .t td { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .acg-menu { transition: none; }
  .btn, .btn__icon img { transition: none; }
  .acs__more, .acs__more .ac, .acs__toggle .ic, .btn__arrow { transition: none !important; }
}

/* Inbox badge / bell dot hide at zero */
.acg-nv__badge[hidden], .tb__dot[hidden] { display: none; }

/* Button icons: the icon box says what the button does. They take the button's text colour. */
.btn__icon .bi { display: block; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--bi) center / contain no-repeat; mask: var(--bi) center / contain no-repeat; transition: translate var(--acg-duration) var(--acg-ease); }
.bi--arrow { --bi: url("../../images/icon-arrow-right.svg"); }
.bi--bell { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 16V11a6 6 0 1 1 12 0v5l1.5 2h-15L6 16ZM10 20.5a2 2 0 0 0 4 0' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.bi--down { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v11m-5-5 5 5 5-5M5 20h14' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.bi--out { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5H5v14h14v-4M13 4h7v7M20 4l-9 9' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.bi--check { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.bi--plus { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.btn:hover .bi--arrow { translate: 3px 0; }
.btn:hover .bi--down { translate: 0 2px; }
.btn:hover .bi--out { translate: 2px -2px; }
.btn:hover .bi--bell { animation: bi-ring .6s ease; }
@keyframes bi-ring { 25% { rotate: 14deg; } 50% { rotate: -10deg; } 75% { rotate: 6deg; } }
/* the icon box on a grey button */
.btn--muted .btn__icon, .btn--danger .btn__icon { background: var(--d-ctl-2); }
.btn--muted.btn--sm .btn__icon { width: 28px; height: 28px; }
/* "done" state (e.g. You’ll be notified): not faded like a disabled button */
.btn.is-done { opacity: 1; cursor: default; }
.btn.is-done:active { translate: none; }
@media (prefers-reduced-motion: reduce) { .btn__icon .bi { transition: none; animation: none !important; } }

/* the icon always takes the button's colour, whatever the surrounding layout styles spans as */
.btn .btn__icon { color: inherit; }

/* ── Sidebar: the nav scrolls, the bottom (application, inbox, settings, you) stays pinned ── */
.acg-sb { overflow: visible; }
.acg-sb__scroll { flex: 1; min-height: 0; margin: 0 calc(var(--acg-space-3) * -1); padding: 0 var(--acg-space-3) var(--acg-space-4); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.acg-sb__scroll::-webkit-scrollbar { display: none; }
.acg-sb__foot { position: relative; display: flex; flex-direction: column; gap: 2px; padding-top: var(--acg-space-2); background: var(--d-panel); }
.acg-sb__foot::before { content: ""; position: absolute; left: calc(var(--acg-space-3) * -1); right: calc(var(--acg-space-3) * -1); bottom: 100%; height: 48px; background: linear-gradient(to bottom, transparent, var(--d-panel) 85%); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.acg-sb.has-more .acg-sb__foot::before { opacity: 1; }
.acg-sb__foot .acg-appl { margin-top: 0; }
/* very short windows: let the whole sidebar scroll instead */
@media (max-height: 560px) {
  .acg-sb { overflow-y: auto; }
  .acg-sb__scroll { flex: none; overflow: visible; }
  .acg-sb__foot { margin-top: auto; }
  .acg-sb__foot::before { display: none; }
}

/* ── Colour pass (9 Nov 2026) ───────────────────────────────────
 * Same layout; the brand teal now shows as light, not as blocks:
 * a soft glow at the top of the page, the active nav item, icon tiles,
 * the chart line and the current account. Roles live in tokens.css (--d-hi*). */
.mn { background: var(--d-glow) no-repeat; }
/* Active nav: the Alpha template's brand tint, with a teal icon */
.acg-sb .acg-nv[aria-current="page"] { background: var(--d-nav-on); }
.acg-sb .acg-nv[aria-current="page"] .acg-nv__ic { color: var(--d-hi); }
/* Icon tiles: every icon is the one teal on a teal tint (team feedback 10 Nov 2026: "all icons the same colour")
   (quick actions, funding list, transactions, platforms, uploads) */
.fund__ic { --hue: var(--d-c-teal); background: color-mix(in srgb, var(--hue) var(--d-tint), transparent); transition: background-color var(--acg-duration) var(--acg-ease); }
.fund__ic::after, .qa__item:hover .fund__ic::after, .fm-tile:hover .fund__ic::after { background: var(--hue); }
.qa__item:hover .fund__ic, .fm-tile:hover .fund__ic { background: color-mix(in srgb, var(--hue) calc(var(--d-tint) * 2), transparent); }
/* Section and figure icons: the same teal */
:is(.st__label, .kpi__label, .card__title) .ic { color: var(--d-c-teal); }
/* Chart: bright teal line, teal wash under it, a soft halo on the hover dot */
.ch__line { stroke: var(--d-hi); stroke-width: 2; }
.ch__plot stop { stop-color: var(--d-hi); }
.ch__plot stop:first-child { stop-opacity: .26; }
.ch__dot { fill: var(--d-hi); stroke: var(--d-panel); filter: drop-shadow(0 0 6px var(--d-hi-ring)); }
/* Current account: teal edge and a faint teal light in its corner */

/* One teal: the avatar is a tint of the teal with teal initials (no second, darker teal) */
.acg-avatar { background: color-mix(in srgb, var(--d-teal) 16%, transparent); color: var(--d-teal); }

/* Account cards: no outline on the current card; "View more" opens the account's own page */
.ac__view { flex: none; font-size: var(--acg-size-xs); }
.ac.is-disabled .ac__view { pointer-events: auto; }

/* ── Alpha Group family look (10 Nov 2026, "not there yet"): the home summary follows Alpha Capital / Alpha Futures ──
 * Brand panel: the one teal as a solid card, the ACG mark in a black tile, name, two buttons.
 * Then three equal figures, and the quick actions as a row of buttons under the summary. */
.sum__profile--brand { background: var(--acg-noise), url("/images/acg-mark-ink-fade.svg") right -4% top 30% / auto 190% no-repeat, var(--d-teal); color: var(--d-teal-ink); }
.sum__profile--brand .sum__who small { color: color-mix(in srgb, var(--d-teal-ink) 68%, transparent); }
.sum__logo--brand { width: 56px; height: 56px; border-radius: 14px; background: #050506; }
.sum__logo--brand img { width: 26px; height: auto; }
.sum__profile--brand .sum__link { background: color-mix(in srgb, var(--d-teal-ink) 12%, transparent); color: var(--d-teal-ink); font-weight: var(--acg-weight-medium); }
.sum__profile--brand .sum__link:hover { background: color-mix(in srgb, var(--d-teal-ink) 20%, transparent); }
.sum__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st__value.up small, .st__value.down small { color: var(--d-muted); }

.qrow { display: flex; align-items: center; justify-content: space-between; gap: var(--acg-space-3); flex-wrap: wrap; }
.qrow__acts, .qrow__end { display: flex; align-items: center; gap: var(--acg-space-2); flex-wrap: wrap; }
.qrow__btn { display: inline-flex; align-items: center; gap: var(--acg-space-2); height: var(--acg-control-h); padding: 0 var(--acg-space-4) 0 6px; border-radius: var(--d-r-sm); background: var(--d-panel); color: var(--d-text); font-size: var(--acg-size-xs); font-weight: var(--acg-weight-medium); text-decoration: none; transition: background-color var(--acg-duration) var(--acg-ease); }
.qrow__btn:hover { background: var(--d-ctl); }
.qrow__btn .fund__ic { width: 28px; height: 28px; border-radius: calc(var(--d-r-sm) - 3px); }
.qrow__end .btn { font-size: var(--acg-size-xs); }
:root[data-theme="light"] .qrow__btn { box-shadow: 0 1px 2px rgba(12, 12, 14, .04); }
@media (max-width: 1100px) {
  .sum__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sum__stats { grid-template-columns: minmax(0, 1fr); }
  .qrow { display: block; }
  .qrow__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qrow__end { display: none; }
}
.sum__stats .st__label { min-height: 22px; }

/* ══ Colour + type pass (11 Nov 2026) — colour roles live in tokens.css ════════════════════
 * Sizes copied from alpha-capital-app.vercel.app, measured at 1280, 1440 and 1728px wide
 * (Alpha's sizes are fixed pixels; they don't grow with the window). */

/* Surfaces: flat, like Alpha (no hairline card edges, no grain) */
.card::before, .sum::before { display: none; }

/* ── Sidebar: 220px, 16px padding, 40px rows, 12px text, 14px icons, 10px group labels ── */
.acg-sb { padding: 16px; }
.acg-sb .acg-nv { height: 40px; gap: 10px; padding: 0 10px; border-radius: 10px; font-size: 12px; }
.acg-sb .acg-nv__ic { width: 14px; height: 14px; }
.acg-sb__label { padding: 16px 10px 6px; font-size: 10px; }
.acg-sb :is(.acg-nv__end, .acg-nv__badge) { font-size: 11px; }
.acg-sb :is(.acg-cur__txt, .acg-appl__title, .acg-me__txt) strong { font-size: 12px; }
.acg-sb :is(.acg-cur__txt, .acg-appl__title, .acg-me__txt) small { font-size: 10px; }

/* ── Page: 40px from the sidebar and the window edge, 20px between blocks, no width cap ── */
.pg { max-width: none; padding: 40px; gap: 20px; }

/* ── Summary: 220px tall, 15px corners; brand panel a third wide ── */
.sum { min-height: 220px; border-radius: 15px; grid-template-columns: minmax(0, 383fr) minmax(0, 757fr); }
.sum__profile { padding: 34px; }
.sum__logo--brand { width: 48px; height: 48px; border-radius: 12px; }
.sum__who strong { font-size: 18px; font-weight: var(--acg-weight-regular); letter-spacing: -0.015em; }
.sum__who small { font-size: 10px; }
.sum__link { height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13px; }
.sum__profile--brand { background: var(--d-brand-panel); color: #fff; }
.sum__profile--brand .sum__who small { color: rgba(255, 255, 255, .7); }
.sum__profile--brand .sum__link { background: rgba(255, 255, 255, .08); color: #fff; font-weight: var(--acg-weight-regular); }
.sum__profile--brand .sum__link:hover { background: rgba(255, 255, 255, .14); }
/* figures: 26px icon on its own line, 12px label, 38px light number with a 15px grey unit, 11.2px note */
.st { padding: 24px 24px 20px; }
.st__label { flex-wrap: wrap; row-gap: 10px; font-size: 12px; }
.st__label .ic { width: 26px; height: 26px; margin-right: 100%; color: var(--d-muted); }
.st__value { font-size: 38px; letter-spacing: -1.12px; }
.st__value small { margin-left: 5px; font-size: 15px; color: var(--d-muted); letter-spacing: 0; }
.st__sub { font-size: 11.2px; }

/* Figures: Inter Light, like Alpha (thin numbers read as "finance", heavy ones as "promo") */
:is(.st__value, .ch__num, .kpi__value, .fh__num, .hx-big__num, .ax-win__num, .acc-drw__fig span, .sum__wallet b, .gw h3, .ph h1, .wel__body h2, .axh__txt h2, .ib__read h2, .pl-at h3) { font-weight: var(--acg-weight-light); }
.ac__num { font-weight: var(--acg-weight-regular); }
:is(.ch__num, .kpi__value, .fh__num) small { color: var(--d-muted); }

/* Icons are grey; only the current nav item's icon is teal */
.kpi__label .ic { color: var(--d-muted); }
.card__title .ic { color: var(--d-text-2); }
.acg-avatar { background: var(--d-ctl-2); color: var(--d-text); }

/* ── Cards, tables, pills ── */
.card__title { font-size: 12.8px; }
.acs__head .card__title { font-size: 11px; }
.t th { font-size: 11.2px; }
.t td { font-size: 11px; }
.tag, .st__pill, .ac__tag { font-size: 10px; }

/* ── Chart: 38px light total, teal line ── */
.ch__num { font-size: 38px; letter-spacing: -1.12px; }
.seg { padding: 3px; border-radius: 8px; background: var(--d-ctl); }
.seg button { height: 30px; padding: 0 12px; border-radius: 6px; font-size: 13px; }

/* ── $250K giveaway: Alpha Capital's blue, no countdown ── */
.gw h3 { font-size: 28px; }
.gw__cta { margin-top: auto; }

/* ── Buttons ("I don't like the buttons"): plain like Alpha's, but bigger to read ("so hard to read"): 40px, 8px corners, 13px medium text, no icon boxes ──
 * Kinds: primary (teal, one per screen), grey (everything else), see-through white (on brand panels), danger. */
.btn { height: 40px; gap: 8px; padding: 0 16px; border-radius: 8px; font-size: 13px; font-weight: var(--acg-weight-medium); letter-spacing: 0; }
.btn--sm { height: 34px; padding: 0 14px; border-radius: 8px; font-size: 13px; }
.btn:has(.btn__icon) { padding-right: 14px; }
.btn .btn__icon, .btn.btn--muted.btn--sm .btn__icon { width: auto; height: auto; border-radius: 0; background: transparent !important; }
.btn__icon .bi { width: 13px; height: 13px; opacity: .85; }
.btn__arrow { width: 12px; height: 12px; opacity: .7; }
.btn--muted, .btn--trade { background: var(--d-ctl); color: var(--d-text-2); }
.btn--muted:hover, .btn--trade:hover:not(:disabled) { background: var(--d-ctl-2); color: var(--d-text); }
.btn--danger { background: var(--d-ctl); }
.ac__more .acg-more { width: 40px; height: 40px; border-radius: 8px; }
/* the row under the summary sits on the page like Alpha's top-bar pills: 40px, 12px corners, 13px text */
.qrow__btn, .qrow__end .btn { height: 40px; gap: 8px; padding: 0 16px 0 14px; border-radius: 12px; font-size: 13px; font-weight: var(--acg-weight-medium); }
.qrow__btn { background: var(--d-panel); color: var(--d-text-2); }
.qrow__btn:hover { background: var(--d-ctl); color: var(--d-text); }
.qrow__end .btn--muted { background: var(--d-panel); }
.qrow__end .btn--muted:hover { background: var(--d-ctl); }
.qrow__btn .fund__ic { width: 14px; height: 14px; border-radius: 0; background: none; }
.qrow__btn .fund__ic::after { inset: 0; background: currentColor; }

/* ══ Phones and tablets (12 Nov 2026, "make it fully mobile responsive, like Alpha Capital") ══════════
 * Below 960px there's no sidebar: a slim top bar (logo · inbox · avatar), a floating bottom bar with the five
 * main pages and "More" (which slides the sidebar in), and one column with 16px sides.
 * Measured on alpha-capital-app at 375px: bar 8px from the sides, ~18px from the bottom, 64–68px tall,
 * fully rounded, 44px round buttons with 20px icons, the current one on a soft light circle. */
.tabbar { display: none; }
.tb__end { display: flex; align-items: center; gap: 8px; }
@media (max-width: 960px) {
  /* top bar */
  .tb { height: 64px; padding: 0 16px; background: color-mix(in srgb, var(--d-page) 86%, transparent); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); }
  .tb__brand { display: flex; align-items: center; }
  .tb__logo { height: 16px; }
  .tb__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--d-ctl); color: var(--d-text-2); }
  .tb__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--d-ctl-2); color: var(--d-text); font-size: 13px; font-weight: var(--acg-weight-medium); text-decoration: none; }

  /* bottom bar */
  .tabbar { position: fixed; left: 50%; translate: -50% 0; width: min(420px, calc(100% - 16px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 33;
    display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 4px 10px; border-radius: 32px;
    background: color-mix(in srgb, var(--d-panel) 95%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .48), inset 0 0 0 1px var(--d-line); }
  .tabbar__it { display: grid; place-items: center; width: 48px; height: 48px; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--d-text-2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, color .15s ease; }
  .tabbar__it .acg-nv__ic { width: 20px; height: 20px; }
  .tabbar__it svg { width: 22px; height: 22px; }
  .tabbar__it[aria-current="page"] { background: rgba(255, 255, 255, .09); color: var(--d-teal-text); }
  .tabbar__it:active { background: rgba(255, 255, 255, .12); }
  .tabbar__it:focus-visible { outline: 2px solid var(--d-teal-text); outline-offset: -2px; }
  :root[data-theme="light"] .tabbar { box-shadow: 0 12px 40px rgba(12, 12, 14, .14), inset 0 0 0 1px var(--d-line); }
  :root[data-theme="light"] .tabbar__it[aria-current="page"] { background: rgba(12, 12, 14, .06); }

  /* the sidebar becomes the "More" drawer */
  .acg-sb { width: min(300px, 86vw); }

  /* page: one column, 16px sides, room for the bottom bar */
  .pg { padding: 8px 16px calc(104px + env(safe-area-inset-bottom, 0px)); gap: 16px; }

  /* summary: the profile panel on top, the figures under it */
  .sum { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sum__profile { min-height: 0; padding: 20px; gap: 20px; }
  .sum__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st { padding: 20px; }
  .st__value { font-size: 32px; }
}
@media (max-width: 640px) {
  .sum__stats { grid-template-columns: minmax(0, 1fr); }
  .sum__foot { flex-direction: column; align-items: stretch; }
  .sum__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sum__link { justify-content: center; height: 40px; }
  .qrow__btn { white-space: nowrap; }
  /* thumbs: nothing to tap under 36px */
  .seg button { height: 34px; }
  .btn--sm { height: 36px; }
}