/*
 * Shared parts for every dashboard page (loads after shell.css).
 * Same rules as the overview: one radius (--d-r-sm 10px, cards --d-r),
 * one button (.btn), one chip (.tag), filled tabs (.seg), calm greys,
 * teal only for the one main action, gains and the current item.
 */

/* ── Page transition: the main area blurs in, the sidebar stays put ── */
/* The sidebar never reloads (js/router.js swaps only <main>); the content blurs out, then in */
@keyframes acg-page-out { to { opacity: 0; filter: blur(6px); } }
@keyframes acg-page-in { from { opacity: 0; filter: blur(10px); translate: 0 6px; } }
.pg { animation: acg-page-in .42s cubic-bezier(.16, 1, .3, 1) backwards; }
.pg.is-leaving { animation: acg-page-out .16s ease both; pointer-events: none; }

/* In-page swaps (tabs, filters) use the same blur-in */
.is-swapping { animation: acg-page-in .36s cubic-bezier(.16, 1, .3, 1) backwards; }
@media (prefers-reduced-motion: reduce) {
  .pg, .pg.is-leaving, .is-swapping { animation: none; }
}

/* Anything given the hidden attribute stays hidden, whatever its layout */
:is(.note, .fld, .pager, .empty, .card, .tt, .ph__act, .row2, .row3, .quick, .kv, .opts, .opt, .sec, .stack, .grid2, .grid3, .split, .kpis, .tag, .btn)[hidden] { display: none; }


:root[data-theme="light"] .btn--muted:not(:is(.card, .mdl, .drw, .note) .btn--muted) { background: var(--d-panel); box-shadow: 0 1px 2px rgba(13, 13, 13, .04); }
:root[data-theme="light"] .btn--muted:not(:is(.card, .mdl, .drw, .note) .btn--muted):hover { background: var(--acg-white); color: var(--d-text); }

/* While a page boots the sidebar shows its final state at once (no group / ring / hover transitions) */
.is-booting .acg-sb, .is-booting .acg-sb *, .is-booting .tb * { transition: none !important; animation: none !important; }

/* ── Page header: title + subtitle, actions on the right ── */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--acg-space-4); flex-wrap: wrap; margin-bottom: var(--acg-space-2); }
.ph__txt { min-width: 0; }
.ph h1 { margin: 0; font-size: var(--acg-size-h3); font-weight: var(--acg-weight-regular); line-height: 1.15; letter-spacing: var(--acg-tracking-tight); }
.ph p { margin: var(--acg-space-1) 0 0; color: var(--d-muted); font-size: var(--acg-size-sm); }
.ph__act { display: flex; align-items: center; gap: var(--acg-space-2); flex-wrap: wrap; }

/* ── Section title inside a card ── */
.sec { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--acg-space-3); margin-bottom: var(--acg-space-4); }
.sec h2 { display: flex; align-items: center; gap: var(--acg-space-2); margin: 0; font-size: var(--acg-size-sm); font-weight: var(--acg-weight-medium); }
.sec h2 .ic { color: var(--d-text-2); }
.sec p { margin: 2px 0 0; color: var(--d-muted); font-size: var(--acg-size-xs); }
.pad { padding: var(--acg-space-5); }
.stack { display: flex; flex-direction: column; gap: var(--acg-space-4); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--acg-space-4); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--acg-space-4); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--acg-space-4); align-items: start; }

/* ── Stat cards (small, like the Alpha inner pages) ── */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--acg-space-4); }
.kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 6px; padding: var(--acg-space-5); }
.kpi__label { display: flex; align-items: center; gap: var(--acg-space-2); color: var(--d-muted); font-size: var(--acg-size-xs); }
.kpi__label .ic { color: var(--d-text-2); }
.kpi__label .tag { margin-left: auto; }
.kpi__value { 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; }
.kpi__sub { color: var(--d-muted); font-size: var(--acg-size-xs); }

/* ── Key / value list ── */
.kv { display: grid; grid-template-columns: repeat(var(--kv-cols, 3), minmax(0, 1fr)); gap: var(--acg-space-5) var(--acg-space-4); margin: 0; }
.kv div { min-width: 0; }
.kv dt { color: var(--d-muted); font-size: var(--acg-size-xs); }
.kv dd { display: flex; align-items: center; gap: var(--acg-space-2); margin: 4px 0 0; overflow: hidden; font-size: var(--acg-size-sm); text-overflow: ellipsis; white-space: nowrap; }
.kv--rows { --kv-cols: 1; gap: 0; }
.kv--rows div { display: flex; align-items: center; justify-content: space-between; gap: var(--acg-space-3); padding: 12px 0; border-bottom: 1px solid var(--d-line); }
.kv--rows div:last-child { border-bottom: 0; }
.kv--rows dd { margin: 0; }

/* ── Chips: status variants on the shared .tag ── */
.tag--ok { background: color-mix(in srgb, var(--d-up) 14%, transparent); color: var(--d-up); }
.tag--warn { background: color-mix(in srgb, var(--d-warn) 16%, transparent); color: var(--d-warn); }
.tag--bad { background: color-mix(in srgb, var(--d-down) 14%, transparent); color: var(--d-down); }
.tag .dot { margin: 0 6px 0 0; }

/* ── Forms: filled fields, no borders ── */
.form { display: flex; flex-direction: column; gap: var(--acg-space-4); }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld > label, .fld__label { color: var(--d-text-2); font-size: var(--acg-size-xs); }
.fld__hint { color: var(--d-muted); font-size: var(--acg-size-xs); }
.fld__err { color: var(--d-down); font-size: var(--acg-size-xs); }
.fld__err:empty { display: none; }
.inp, .sel, .txa { width: 100%; height: var(--acg-control-h); padding: 0 12px; border: 0; border-radius: var(--d-r-sm); background: var(--d-well); color: var(--d-text); font: inherit; font-size: var(--acg-size-sm); outline: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--acg-duration) var(--acg-ease), background-color var(--acg-duration) var(--acg-ease); }
.inp::placeholder, .txa::placeholder { color: var(--d-muted); }
.inp:hover, .sel:hover, .txa:hover { background: color-mix(in srgb, var(--d-text) 4%, var(--d-well)); }
.inp:focus, .sel:focus, .txa:focus { box-shadow: inset 0 0 0 1px var(--d-accent-line); }
:is(.inp, .sel, .txa)[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--d-down); }
.inp:disabled, .inp[readonly] { color: var(--d-text-2); cursor: default; }
.txa { height: auto; min-height: 92px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.sel { appearance: none; padding-right: 34px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.sel option { background: var(--d-panel); color: var(--d-text); }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--acg-space-4); }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--acg-space-4); }
.form__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--acg-space-2); padding-top: var(--acg-space-2); }

/* Amount: $ prefix, big number, quick amounts */
.amt { position: relative; }
.amt .inp { height: 52px; padding-left: 30px; font-size: var(--acg-size-h4); font-variant-numeric: tabular-nums; letter-spacing: var(--acg-tracking-snug); }
.amt::before { content: "$"; position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--d-muted); font-size: var(--acg-size-md); pointer-events: none; }
.quick { display: flex; flex-wrap: wrap; gap: var(--acg-space-2); }
.quick button { height: 28px; padding: 0 10px; border: 0; border-radius: calc(var(--d-r-sm) - 2px); background: var(--d-ctl); color: var(--d-text-2); font-size: var(--acg-size-xs); cursor: pointer; transition: background-color var(--acg-duration) var(--acg-ease), color var(--acg-duration) var(--acg-ease); }
.quick button:hover { background: var(--d-ctl-2); color: var(--d-text); }

/* Option cards (method / platform / account type pickers) */
.opts { display: grid; grid-template-columns: repeat(var(--opts, 3), minmax(0, 1fr)); gap: var(--acg-space-2); }
.opt { position: relative; display: flex; align-items: flex-start; gap: var(--acg-space-3); padding: 12px; border-radius: var(--d-r-sm); background: var(--d-well); cursor: pointer; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--acg-duration) var(--acg-ease), background-color var(--acg-duration) var(--acg-ease); }
.opt:hover { background: color-mix(in srgb, var(--d-text) 4%, var(--d-well)); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:has(input:checked) { background: color-mix(in srgb, var(--d-text) 7%, var(--d-well)); }
.opt:has(input:focus-visible) { outline: 2px solid var(--d-brand-solid); outline-offset: 2px; }
.opt:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.opt__ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: calc(var(--d-r-sm) - 2px); background: var(--d-ctl); color: var(--d-text-2); }
.opt__ic img { width: 18px; height: 18px; object-fit: contain; }
.opt__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt__txt b { font-size: var(--acg-size-xs); font-weight: var(--acg-weight-medium); }
.opt__txt small { color: var(--d-muted); font-size: var(--acg-size-xs); line-height: 1.4; }
.opt__check { margin-left: auto; width: 16px; height: 16px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--d-muted); }
.opt:has(input:checked) .opt__check { box-shadow: inset 0 0 0 5px var(--d-text); }

/* Switch */
.sw { position: relative; display: inline-flex; flex: none; width: 34px; height: 20px; cursor: pointer; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--d-ctl-2); transition: background-color .2s ease; pointer-events: none; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--acg-white); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: translate .2s cubic-bezier(.16, 1, .3, 1); }
.sw input:checked + i { background: var(--d-accent-hover); }
.sw input:checked + i::after { translate: 14px 0; }
.sw input:focus-visible + i { outline: 2px solid var(--d-brand-solid); outline-offset: 2px; }
.sw input:disabled + i { opacity: .5; }

/* Checkbox line */
.chk { display: flex; align-items: flex-start; gap: var(--acg-space-2); color: var(--d-text-2); font-size: var(--acg-size-xs); line-height: 1.5; cursor: pointer; }
.chk input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--d-accent-hover); }

/* Summary box (deposit / withdraw totals) */
.sum-box { padding: var(--acg-space-4); border-radius: var(--d-r-sm); background: var(--d-well); }
.sum-box .kv--rows div { padding: 8px 0; }
.sum-box .kv--rows .is-total { margin-top: 4px; padding-top: 12px; box-shadow: inset 0 1px 0 var(--d-line); border-bottom: 0; }
.sum-box .kv--rows .is-total dd { font-size: var(--acg-size-md); font-weight: var(--acg-weight-medium); }

/* ── Notes / banners ── */
.note { display: flex; align-items: center; gap: var(--acg-space-3); padding: 12px 14px; border-radius: var(--d-r); background: var(--d-panel); font-size: var(--acg-size-xs); }
.note__ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: calc(var(--d-r-sm) - 2px); background: var(--d-ctl); color: var(--d-text-2); font-weight: var(--acg-weight-medium); }
.note--warn .note__ic { background: color-mix(in srgb, var(--d-warn) 16%, transparent); color: var(--d-warn); }
.note--ok .note__ic { background: color-mix(in srgb, var(--d-up) 14%, transparent); color: var(--d-up); }
.note__txt { flex: 1; min-width: 0; line-height: 1.45; }
.note__txt b { display: block; font-size: var(--acg-size-sm); font-weight: var(--acg-weight-medium); }
.note__txt span { color: var(--d-muted); }
.note .btn { height: 32px; font-size: var(--acg-size-xs); }
.note--inline { background: var(--d-well); border-radius: var(--d-r-sm); }

/* ── Progress bar ── */
.bar { height: 6px; border-radius: 999px; background: var(--d-ctl); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--d-accent-hover); transition: width .8s cubic-bezier(.16, 1, .3, 1); }

/* ── Table toolbar + pager (tables use the shared .t) ── */
.tt { display: flex; align-items: center; justify-content: space-between; gap: var(--acg-space-3); flex-wrap: wrap; margin-bottom: var(--acg-space-3); }
.tt__left, .tt__right { display: flex; align-items: center; gap: var(--acg-space-2); flex-wrap: wrap; }
.search { position: relative; width: 240px; }
.search .inp { height: 32px; padding-left: 32px; font-size: var(--acg-size-xs); }
.search::before { content: ""; position: absolute; left: 11px; top: 50%; width: 14px; height: 14px; translate: 0 -50%; background: var(--d-muted); -webkit-mask: url("../../images/icons/table-search.svg") center / contain no-repeat; mask: url("../../images/icons/table-search.svg") center / contain no-repeat; pointer-events: none; }
.btn--sm { height: 32px; padding: 0 12px; font-size: var(--acg-size-xs); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--acg-space-3); padding-top: var(--acg-space-3); color: var(--d-muted); font-size: var(--acg-size-xs); }
.pager__btns { display: flex; gap: var(--acg-space-1); }
.pager__btns button { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; 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; }
.pager__btns button:hover:not(:disabled) { background: var(--d-ctl-2); color: var(--d-text); }
.pager__btns button[aria-current="page"] { background: var(--d-accent); color: var(--d-accent-ink); }
.pager__btns button:disabled { opacity: .4; cursor: default; }
.t .sym { font-weight: var(--acg-weight-medium); }
.t td.muted { color: var(--d-muted); }
.t .mono { font-variant-numeric: tabular-nums; }
.t--click tbody tr { cursor: pointer; }
.t__empty td { height: 120px; color: var(--d-muted); text-align: center; white-space: normal; }

/* ── Empty state ── */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--acg-space-2); padding: var(--acg-space-8) var(--acg-space-5); text-align: center; }
.empty__ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--acg-space-2); border-radius: var(--d-r-sm); background: var(--d-ctl); color: var(--d-text-2); }
.empty b { font-size: var(--acg-size-sm); font-weight: var(--acg-weight-medium); }
.empty p { max-width: 340px; margin: 0; color: var(--d-muted); font-size: var(--acg-size-xs); line-height: 1.5; }
.empty .btn { margin-top: var(--acg-space-3); }

/* ── Drawer (right) and modal (centre) ── */
.ovl { position: fixed; inset: 0; z-index: 80; display: flex; background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); opacity: 1; transition: opacity .25s ease, display .3s allow-discrete, overlay .3s allow-discrete; }
.ovl[hidden] { display: none; opacity: 0; }
@starting-style { .ovl:not([hidden]) { opacity: 0; } }
.drw { margin-left: auto; display: flex; flex-direction: column; width: min(440px, 100%); height: 100%; background: var(--d-panel); box-shadow: -24px 0 60px rgba(0, 0, 0, .35); translate: 0 0; transition: translate .38s cubic-bezier(.16, 1, .3, 1); }
.ovl[hidden] .drw { translate: 100% 0; }
@starting-style { .ovl:not([hidden]) .drw { translate: 100% 0; } }
.mdl { margin: auto; display: flex; flex-direction: column; width: min(460px, calc(100% - 32px)); max-height: calc(100% - 32px); border-radius: var(--d-r); background: var(--d-panel); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .25s ease; }
.ovl[hidden] .mdl { transform: translateY(8px) scale(.97); opacity: 0; }
@starting-style { .ovl:not([hidden]) .mdl { transform: translateY(8px) scale(.97); opacity: 0; } }
:root[data-theme="light"] .ovl { background: rgba(10, 20, 20, .32); }
.ovl__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--acg-space-4); padding: var(--acg-space-6) var(--acg-space-6) var(--acg-space-5); }
.ovl__head h2 { margin: 0; font-size: var(--acg-size-md); font-weight: var(--acg-weight-medium); line-height: 1.3; }
.ovl__head p { margin: 6px 0 0; color: var(--d-muted); font-size: var(--acg-size-xs); line-height: 1.5; }
.ovl__x { display: grid; place-items: center; width: 32px; height: 32px; flex: none; margin: -6px -8px 0 0; border: 0; border-radius: var(--d-r-sm); background: transparent; color: var(--d-muted); cursor: pointer; transition: background-color var(--acg-duration) var(--acg-ease), color var(--acg-duration) var(--acg-ease); }
.ovl__x:hover { background: var(--d-ctl-2); color: var(--d-text); }
.ovl__x::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ovl__body { flex: 1; overflow-y: auto; padding: 0 var(--acg-space-6) var(--acg-space-6); overscroll-behavior: contain; }
/* Footer: secondary on the left of the main action, both their natural size, right-aligned */
.ovl__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--acg-space-2); padding: 0 var(--acg-space-6) var(--acg-space-6); }
.drw .ovl__foot { padding-top: var(--acg-space-4); box-shadow: inset 0 1px 0 var(--d-line); }
.ovl__foot .btn { flex: none; }
@media (prefers-reduced-motion: reduce) { .ovl, .drw, .mdl { transition: none; } }

/* Success state inside a drawer / modal / card */
.done { display: flex; flex-direction: column; align-items: center; gap: var(--acg-space-2); padding: var(--acg-space-8) var(--acg-space-3); text-align: center; }
.done__ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--acg-space-2); border-radius: 50%; background: color-mix(in srgb, var(--d-up) 16%, transparent); color: var(--d-up); animation: done-pop .5s cubic-bezier(.16, 1, .3, 1); }
.done__ic::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: 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='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: 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='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes done-pop { from { transform: scale(.6); opacity: 0; } }
.done b { font-size: var(--acg-size-md); font-weight: var(--acg-weight-medium); }
.done p { max-width: 320px; margin: 0; color: var(--d-muted); font-size: var(--acg-size-xs); line-height: 1.5; }

/* ── Transaction cell, fresh rows ── */
.tx { display: flex; align-items: center; gap: 10px; }
.tx .fund__ic { width: 28px; height: 28px; }
.tx b { display: block; font-weight: var(--acg-weight-medium); }
.tx small { display: block; color: var(--d-muted); font-size: var(--acg-size-xs); }
.t td:has(.tx) { height: 52px; }
.t tr.is-fresh td { background: color-mix(in srgb, var(--d-up) 6%, transparent); }

/* ── Ticked list (good to know) ── */
.ticks { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 22px; color: var(--d-text-2); font-size: var(--acg-size-xs); line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; background: var(--d-up); -webkit-mask: 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='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: 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='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ── Page tabs (the shared .seg, a touch roomier) ── */
.seg--page { align-self: flex-start; }

/* ── Manage Funds ── */
.fm-act { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--acg-space-4); margin-bottom: var(--acg-space-4); }
.fm-tile { display: flex; align-items: center; gap: var(--acg-space-3); padding: var(--acg-space-4) var(--acg-space-5); color: var(--d-text); text-decoration: none; transition: background-color var(--acg-duration) var(--acg-ease); }
.fm-tile > span:nth-child(2) { flex: 1; min-width: 0; }
.fm-tile b { display: block; font-size: var(--acg-size-sm); font-weight: var(--acg-weight-medium); }
.fm-tile small { display: block; overflow: hidden; color: var(--d-muted); font-size: var(--acg-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.fm-tile:hover { background: color-mix(in srgb, var(--d-text) 3%, var(--d-panel)); }
.fm-tile:hover .qa__go { translate: 2px 0; background: var(--d-text); }
.split + .card, .split + section { margin-top: var(--acg-space-4); }
.pm { display: flex; flex-direction: column; margin: 0 0 var(--acg-space-4); padding: 0; list-style: none; }
.pm li { display: flex; align-items: center; gap: var(--acg-space-3); padding: 10px 0; border-bottom: 1px solid var(--d-line); }
.pm li:last-child { border-bottom: 0; }
.pm__brand { display: grid; place-items: center; width: 38px; height: 26px; flex: none; border-radius: calc(var(--d-r-sm) - 4px); background: var(--d-ctl); color: var(--d-text-2); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pm__brand--visa { background: #1a1f71; color: #fff; }
.pm__brand--mastercard { background: #2a2a2a; color: #f79e1b; }
.pm__txt { flex: 1; min-width: 0; }
.pm__txt b { display: block; font-size: var(--acg-size-xs); font-weight: var(--acg-weight-medium); }
.pm__txt small { display: block; color: var(--d-muted); font-size: var(--acg-size-xs); }
.pm__rm { padding: 0; border: 0; background: none; color: var(--d-muted); font-size: var(--acg-size-xs); cursor: pointer; }
.pm__rm:hover { color: var(--d-down); }
.pm__add { width: 100%; }
.xfer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: var(--acg-space-2); }
.xfer__swap { display: grid; place-items: center; width: 40px; height: 40px; margin-top: 22px; border: 0; border-radius: var(--d-r-sm); background: var(--d-ctl); color: var(--d-text-2); cursor: pointer; transition: rotate .3s cubic-bezier(.16, 1, .3, 1), background-color var(--acg-duration) var(--acg-ease); }
.xfer__swap:hover { background: var(--d-ctl-2); color: var(--d-text); rotate: 180deg; }
.cf-amt { margin: 0 0 var(--acg-space-4); font-size: var(--acg-size-h3); font-weight: var(--acg-weight-regular); letter-spacing: var(--acg-tracking-tight); font-variant-numeric: tabular-nums; }
.cf-note { margin: var(--acg-space-3) 0 0; color: var(--d-muted); font-size: var(--acg-size-xs); line-height: 1.5; }
.spin { width: 14px; height: 14px; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.btn:disabled { cursor: default; opacity: .8; }

.ovl__x:hover { background: var(--d-ctl); color: var(--d-text); }
.mdl:focus, .drw:focus { outline: none; }
/* A fixed choice (only one option) reads as information, not a picker */
.opt--fixed { cursor: default; }
.opt--fixed:hover { background: var(--d-well); }


/* ── Manage funds ── */
/* Hero on the website gradient (dark in both themes) */
.fh { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main act" "stats stats"; gap: var(--acg-space-6) var(--acg-space-5); padding: var(--acg-space-6); border-radius: var(--d-r); overflow: hidden; color: var(--acg-white); background: var(--d-hero); }
.fh__main { grid-area: main; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fh__label { display: flex; align-items: center; gap: var(--acg-space-2); color: var(--d-on-accent-text); font-size: var(--acg-size-xs); }
.fh__num { font-size: var(--acg-size-h2); font-weight: var(--acg-weight-regular); line-height: 1.05; letter-spacing: var(--acg-tracking-display); font-variant-numeric: tabular-nums; }
.fh__sub { color: var(--d-on-accent-muted); font-size: var(--acg-size-xs); }
.fh__act { grid-area: act; display: flex; align-items: flex-start; gap: var(--acg-space-2); }
.fh__stats { grid-area: stats; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding-top: var(--acg-space-5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.fh__stats div { display: flex; flex-direction: column; gap: 2px; padding-right: var(--acg-space-4); }
.fh__stats div + div { padding-left: var(--acg-space-5); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12); }
.fh__stats dt { color: var(--d-on-accent-muted); font-size: var(--acg-size-xs); }
.fh__stats dd { margin: 0; font-size: var(--acg-size-md); font-weight: var(--acg-weight-medium); font-variant-numeric: tabular-nums; }
.fh__stats small { color: var(--d-on-accent-muted); font-size: var(--acg-size-xs); }

/* Move money + side column */
.fm { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--acg-space-4); align-items: stretch; }
.fm > .stack > :last-child { flex: 1; }  /* both columns end on the same line */
.fm__head { flex-wrap: wrap; }
.fm__move { scroll-margin-top: var(--acg-space-6); }
/* From → To: two tiles; a native select sits invisibly on top, so it opens the system picker */
.route { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; gap: var(--acg-space-2); }
.rt { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border-radius: var(--d-r-sm); background: var(--d-well); cursor: pointer; transition: background-color var(--acg-duration) var(--acg-ease), box-shadow var(--acg-duration) var(--acg-ease); }
.rt:hover { background: color-mix(in srgb, var(--d-text) 4%, var(--d-well)); }
.rt:focus-within { background: color-mix(in srgb, var(--d-text) 6%, var(--d-well)); }
.rt:has(select:disabled) { cursor: default; }
.rt:has(select:disabled) .ic--chev { display: none; }
.rt__k { color: var(--d-muted); font-size: var(--acg-size-xs); }
.rt__body { display: flex; align-items: center; gap: var(--acg-space-3); min-width: 0; }
.rt__ic { display: grid; place-items: center; width: 38px; height: 28px; flex: none; color: var(--d-text-2); }
.rt__ic img { width: 26px; height: 26px; }
.rt__ic .ic { width: 18px; height: 18px; }
.rt__txt { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.rt__txt b { overflow: hidden; font-size: var(--acg-size-sm); font-weight: var(--acg-weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.rt__txt small { overflow: hidden; color: var(--d-muted); font-size: var(--acg-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.rt .ic--chev { color: var(--d-muted); }
.rt select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: inherit; font-size: 16px; }
.route__swap, .route__to { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--d-r-sm); color: var(--d-text-2); }
.route__to { background: transparent; }
.route__to .bi { display: block; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--bi) center / contain no-repeat; mask: var(--bi) center / contain no-repeat; }
.route__swap { background: var(--d-ctl); cursor: pointer; transition: rotate .3s cubic-bezier(.16, 1, .3, 1), background-color var(--acg-duration) var(--acg-ease); }
.route__swap:hover { background: var(--d-ctl-2); color: var(--d-text); rotate: 180deg; }
.fm__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--acg-space-4); flex-wrap: wrap; padding-top: var(--acg-space-4); box-shadow: inset 0 1px 0 var(--d-line); }
.fm__line { display: flex; flex-wrap: wrap; gap: 6px var(--acg-space-5); margin: 0; color: var(--d-muted); font-size: var(--acg-size-xs); }
.fm__line b { color: var(--d-text); font-weight: var(--acg-weight-medium); font-variant-numeric: tabular-nums; }

/* Where your money is */
.wb { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.wb li { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 10px; border-bottom: 1px solid var(--d-line); }
.wb li:last-child { border-bottom: 0; }
.wb__row { display: flex; align-items: center; gap: var(--acg-space-3); width: 100%; margin: -4px -6px 0; padding: 4px 6px; border: 0; border-radius: var(--d-r-sm); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; box-sizing: content-box; transition: background-color var(--acg-duration) var(--acg-ease); }
.wb__row:hover:not(:disabled) { background: var(--d-ctl); }
.wb__row:disabled { cursor: default; }
.wb li:has(.wb__row:disabled .tag) { opacity: .55; }
.wb__ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: calc(var(--d-r-sm) - 2px); background: var(--d-ctl); color: var(--d-text-2); }
.wb__ic img { width: 20px; height: 20px; }
.wb__txt { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.wb__txt b { display: flex; align-items: center; gap: 6px; font-size: var(--acg-size-xs); font-weight: var(--acg-weight-medium); }
.wb__txt small, .wb__v small { color: var(--d-muted); font-size: var(--acg-size-xs); }
.wb__v { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.wb__v b { font-size: var(--acg-size-xs); font-weight: var(--acg-weight-medium); }
.wb__bar { height: 4px; }
.wb__bar i { background: var(--d-text-2); opacity: .5; }
@media (max-width: 1240px) { .fm { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .fh { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "act" "stats"; padding: var(--acg-space-5); }
  .fh__num { font-size: var(--acg-size-h3); }
  .fh__act .btn { flex: 1; padding: 0 var(--acg-space-3); }
  .fh__stats div { padding-right: var(--acg-space-2); }
  .fh__stats div + div { padding-left: var(--acg-space-3); }
  .fh__stats dd { font-size: var(--acg-size-sm); }
  .fh__stats small { display: none; }
  .route { grid-template-columns: minmax(0, 1fr); }
  .route__swap, .route__to { margin: 0 auto; rotate: 90deg; }
  .fm__foot .btn { width: 100%; }
}


/* ── Our dropdown (js/shell.js picker): replaces the system menu for every select ── */
.pk-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important; opacity: 0; pointer-events: none; }
.rt select.pk-native { inset: auto; }
.pk-btn { display: flex; align-items: center; text-align: left; cursor: pointer; }
.pk-btn > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-btn.is-placeholder > span { color: var(--d-muted); }
.pk-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--d-accent-line); }
.pk-btn:disabled { cursor: default; opacity: .6; }
.rt[aria-expanded="true"] { background: color-mix(in srgb, var(--d-text) 6%, var(--d-well)); }
.rt[aria-expanded="true"] .ic--chev { rotate: 180deg; }
.rt .ic--chev { transition: rotate .2s ease; }
.rt:focus-visible { outline: 2px solid var(--d-brand-solid); outline-offset: 2px; }
.pk { position: fixed; z-index: 95; display: flex; flex-direction: column; gap: 2px; max-width: min(420px, calc(100vw - 16px)); padding: 6px; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--d-r); background: var(--d-panel); box-shadow: 0 18px 48px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--d-line); opacity: 0; transform: translateY(-4px) scale(.98); transition: opacity .14s ease, transform .18s cubic-bezier(.16, 1, .3, 1); }
.pk.is-open { opacity: 1; transform: none; }
:root[data-theme="light"] .pk { background: var(--acg-white); box-shadow: 0 18px 48px rgba(12, 12, 14, .16), inset 0 0 0 1px var(--d-line); }
.pk__group { padding: 8px 10px 4px; color: var(--d-muted); font-size: var(--acg-size-xs); }
.pk__opt { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: var(--d-r-sm); color: var(--d-text-2); font-size: var(--acg-size-sm); cursor: pointer; user-select: none; }
.pk__opt.is-active { background: var(--d-ctl); color: var(--d-text); }
.pk__opt[aria-selected="true"] { color: var(--d-text); }
.pk__opt.is-off { opacity: .45; cursor: default; }
.pk__ic { display: grid; place-items: center; width: 32px; height: 26px; flex: none; color: var(--d-text-2); }
.pk__ic img { width: 22px; height: 22px; }
.pk__ic .ic { width: 16px; height: 16px; }
.pk__ic .pm__brand { width: 34px; height: 22px; }
.pk__txt { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.pk__txt b { overflow: hidden; font-weight: var(--acg-weight-regular); text-overflow: ellipsis; white-space: nowrap; }
.pk__txt small { overflow: hidden; color: var(--d-muted); font-size: var(--acg-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.pk__check { width: 14px; height: 14px; flex: none; background: currentColor; opacity: 0; -webkit-mask: 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='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: 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='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pk__opt[aria-selected="true"] .pk__check { opacity: 1; color: var(--d-up); }
/* phone: a bottom sheet */
.pk.pk--sheet { left: 8px !important; right: 8px; bottom: 8px; top: auto; max-width: none; max-height: 60vh; border-radius: var(--d-r); transform: translateY(16px); }
.pk.pk--sheet.is-open { transform: none; }
.pk.pk--sheet .pk__opt { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .pk, .rt .ic--chev { transition: none; } }


/* Manage funds: Deposit / Withdraw / Transfer as their own tab row */
.ftabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--d-r); background: var(--d-panel); }
.ftabs button { position: relative; display: flex; align-items: center; gap: var(--acg-space-3); min-width: 0; padding: 12px 14px; border: 0; border-radius: var(--d-r-sm); background: transparent; color: var(--d-text-2); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--acg-duration) var(--acg-ease), color var(--acg-duration) var(--acg-ease); }
.ftabs button > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ftabs b { font-size: var(--acg-size-sm); font-weight: var(--acg-weight-medium); }
.ftabs small { overflow: hidden; color: var(--d-muted); font-size: var(--acg-size-xs); text-overflow: ellipsis; white-space: nowrap; }
.ftabs button:hover { background: color-mix(in srgb, var(--d-text) 4%, transparent); color: var(--d-text); }
.ftabs button[aria-selected="true"] { background: var(--d-ctl); color: var(--d-text); }
.ftabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--d-accent-hover); }
.ftabs button[aria-selected="true"] .fund__ic { background: var(--d-text); }
.ftabs button[aria-selected="true"] .fund__ic::after { background: var(--d-panel); }
.ftabs .fund__ic { transition: background-color var(--acg-duration) var(--acg-ease); }
@media (max-width: 640px) {
  .ftabs button { flex-direction: column; align-items: flex-start; gap: var(--acg-space-2); padding: 10px; }
  .ftabs small { display: none; }
}


/* dropdown: search for long lists, icons (e.g. flags) on the button */
.pk__search { position: sticky; top: -6px; z-index: 1; margin: -6px -6px 4px; padding: 6px; background: inherit; box-shadow: inset 0 -1px 0 var(--d-line); }
.pk__search input { width: 100%; height: 34px; padding: 0 10px 0 32px; border: 0; border-radius: var(--d-r-sm); background: var(--d-well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m20 20-4.3-4.3M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13Z' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 10px center / 15px no-repeat; color: var(--d-text); font: inherit; font-size: var(--acg-size-sm); outline: none; }
.pk__search input:focus { box-shadow: inset 0 0 0 1px var(--d-accent-line); }
.pk__opt[hidden], .pk__none[hidden] { display: none; }
.pk__none { padding: 10px; color: var(--d-muted); font-size: var(--acg-size-xs); }
.pk-btn__ic { display: grid; place-items: center; flex: none; margin-right: 10px; font-style: normal; }
.flag { font-size: 18px; line-height: 1; }
.pk__ic .flag { font-size: 20px; }

/* our checkbox (no browser default) */
.chk input[type="checkbox"] { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 18px; height: 18px; flex: none; margin: 1px 0 0; border-radius: 5px; background: var(--d-well); box-shadow: inset 0 0 0 1px var(--d-line); cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; }
.chk input[type="checkbox"]:hover { box-shadow: inset 0 0 0 1px var(--d-muted); }
.chk input[type="checkbox"]::after { content: ""; width: 11px; height: 11px; background: var(--d-panel); opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .2s cubic-bezier(.16, 1, .3, 1); -webkit-mask: 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='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: 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='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.chk input[type="checkbox"]:checked { background: var(--d-text); box-shadow: none; }
.chk input[type="checkbox"]:checked::after { opacity: 1; transform: none; }
.chk input[type="checkbox"]:focus-visible { outline: 2px solid var(--d-brand-solid); outline-offset: 2px; }


/* ── Welcome popup: the website gradient with the big ACG mark, then one line and two buttons ── */
.mdl.wel { width: min(480px, calc(100% - 32px)); overflow: hidden; }
.wel__art { position: relative; isolation: isolate; display: flex; align-items: flex-end; height: 168px; padding: var(--acg-space-6); background: var(--d-hero); overflow: hidden; }
/* (the ACG mark now comes from --d-hero) */
.wel__art img { height: 16px; width: auto; }
.wel__body { padding: var(--acg-space-6) var(--acg-space-6) var(--acg-space-5); }
.wel__body h2 { margin: 0; font-size: var(--acg-size-h4); font-weight: var(--acg-weight-regular); line-height: 1.2; letter-spacing: var(--acg-tracking-snug); }
.wel__foot .btn { flex: 1; justify-content: space-between; }
.wel__body p { margin: var(--acg-space-2) 0 0; color: var(--d-muted); font-size: var(--acg-size-sm); line-height: 1.6; }

/* ── Guided tour: a spotlight on one part of the page and a small card beside it ── */
.tour { position: fixed; inset: 0; z-index: 85; }
.tour__hole { position: fixed; border-radius: var(--d-r); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 200vmax rgba(0, 0, 0, .62); pointer-events: none; opacity: 0; transition: top .45s cubic-bezier(.16, 1, .3, 1), left .45s cubic-bezier(.16, 1, .3, 1), width .45s cubic-bezier(.16, 1, .3, 1), height .45s cubic-bezier(.16, 1, .3, 1), opacity .3s ease; }
.tour.is-in .tour__hole { opacity: 1; }
:root[data-theme="light"] .tour__hole { box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 200vmax rgba(10, 20, 20, .42); }
.tour__card { position: fixed; top: 0; left: 0; width: min(340px, calc(100vw - 24px)); padding: var(--acg-space-5); border-radius: var(--d-r); background: var(--d-panel); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); outline: none; opacity: 0; transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .25s ease; }
.tour.is-in .tour__card { opacity: 1; }
.tour__card.is-moving { opacity: .0 !important; }
.tour.is-leaving .tour__hole, .tour.is-leaving .tour__card { opacity: 0; }
.tour__top { display: flex; align-items: center; justify-content: space-between; gap: var(--acg-space-3); }
.tour__n { color: var(--d-muted); font-size: var(--acg-size-xs); font-variant-numeric: tabular-nums; }
.tour__skip { padding: 0; border: 0; background: none; color: var(--d-muted); font: inherit; font-size: var(--acg-size-xs); cursor: pointer; }
.tour__skip:hover { color: var(--d-text); }
.tour__card h3 { margin: var(--acg-space-3) 0 0; font-size: var(--acg-size-md); font-weight: var(--acg-weight-medium); line-height: 1.3; }
.tour__card p { margin: 6px 0 0; color: var(--d-text-2); font-size: var(--acg-size-sm); line-height: 1.55; }
.tour__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--acg-space-3); margin-top: var(--acg-space-5); }
.tour__bar { display: flex; gap: 4px; }
.tour__bar i { width: 14px; height: 3px; border-radius: 3px; background: var(--d-ctl-2); transition: background-color .3s ease, width .3s ease; }
.tour__bar i.is-done { background: var(--d-muted); }
.tour__bar i.is-now { width: 22px; background: var(--d-text); }
.tour__btns { display: flex; gap: var(--acg-space-2); }
.tour__btns [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tour__hole, .tour__card { transition: none; } }

/* ── Responsive ── */
@media (max-width: 1240px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sec { flex-wrap: wrap; }
  .sec .tt__right { max-width: 100%; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { flex: none; }
  .ovl__foot .btn { flex: 1; }
  .fm-act { grid-template-columns: minmax(0, 1fr); }
  .xfer { grid-template-columns: minmax(0, 1fr); }
  .xfer__swap { margin: 0 auto; rotate: 90deg; }
  .ph { align-items: flex-start; }
  .ph h1 { font-size: var(--acg-size-h4); }
  .kpis, .kpis--3, .grid2, .grid3, .row2, .row3 { grid-template-columns: minmax(0, 1fr); }
  .kv:not(.kv--rows) { --kv-cols: 2; }
  .opts { --opts: 1 !important; }
  .search { width: 100%; }
  .tt__left, .tt__right { width: 100%; }
  .pad { padding: var(--acg-space-4); }
}

/* Browser autofill: keep our field colours (Chrome paints autofilled fields light blue) */
.inp:-webkit-autofill, .inp:-webkit-autofill:hover, .inp:-webkit-autofill:focus, .inp:autofill {
  -webkit-text-fill-color: var(--d-text);
  caret-color: var(--d-text);
  -webkit-box-shadow: 0 0 0 1000px var(--d-well) inset;
  box-shadow: 0 0 0 1000px var(--d-well) inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
.inp:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--d-well) inset, inset 0 0 0 1px var(--d-accent-line); box-shadow: 0 0 0 1000px var(--d-well) inset, inset 0 0 0 1px var(--d-accent-line); }
.inp[aria-invalid="true"]:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--d-well) inset, inset 0 0 0 1px var(--d-down); box-shadow: 0 0 0 1000px var(--d-well) inset, inset 0 0 0 1px var(--d-down); }

/* ══ Icon colours (12 Nov 2026, "check all icons, some are more grey, some more white") ══════════
 * Three rules, no exceptions. Every icon file now draws at full strength (no built-in 50% fades).
 *   1. Content icons (figures, card titles, tiles, lists, tables, empty states): light grey, full strength
 *   2. Sidebar icons: the colour of their label (grey; white on hover; teal when current)
 *   3. Small helpers (copy, sort, chevrons, up-down): the label grey
 * Icons inside buttons take the button's text colour; icons on always-dark brand panels stay white. */
:root :is(.st__label, .kpi__label, .card__title, .sec h2, .rt__ic, .wb__ic, .empty__ic, .tx, .note__ic, .drop, .st-row, .pl-tile__top) :is(.ic, .mi) { color: var(--d-text-2); opacity: 1; }
:root .fund__ic { --hue: var(--d-text-2); }
:root .mi { opacity: 1; }
:root .acg-sb .acg-nv .acg-nv__ic { opacity: 1; }
:root :is(.ic--copy, .hx-sort, .acg-appl__chev, .acg-nv__ic--updown) { color: var(--d-muted); opacity: 1; }
:root .qa__go { background: var(--d-muted); }

/* ══ Phones and tablets, details (12 Nov 2026) — the layout itself is in shell.css ══════════════ */
@media (max-width: 960px) {
  /* the "More" drawer, sized for thumbs: 44px rows, 14px text, 16px icons */
  :root .acg-sb .acg-nv { height: 44px; font-size: 14px; }
  :root .acg-sb .acg-nv__ic { width: 16px; height: 16px; }
  :root .acg-sb__label { font-size: 11px; }
  :root .acg-sb :is(.acg-cur__txt, .acg-appl__title, .acg-me__txt) strong { font-size: 13px; }
  :root .acg-sb :is(.acg-cur__txt, .acg-appl__title, .acg-me__txt) small { font-size: 11px; }
  .scrim { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  /* giveaway: no empty space now the countdown is gone */
  :root .gw { min-height: 0; }
  :root .gw__cta { margin-top: var(--acg-space-3); }
}
@media (max-width: 640px) {
  /* figure cards two per row instead of one, so the page isn't four screens of single numbers */
  :root :is(.kpis, .kpis--3) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  :root .kpis--3 > :first-child { grid-column: 1 / -1; }
  :root .kpi { padding: 16px; }
  :root .kpi__value { font-size: 22px; }
}
/* small text-link buttons keep their look but get a finger-sized tap area on touch screens */
@media (max-width: 960px), (hover: none) {
  :root :is(.login, .ax-link, .pm__rm, .hx-sort) { position: relative; }
  :root :is(.login, .ax-link, .pm__rm, .hx-sort)::before { content: ""; position: absolute; inset: -10px -6px; }
}
@media (max-width: 640px) {
  :root .quick button { height: 36px; padding: 0 12px; }
}