/* ============================================================
   FundBasket — calm, trustworthy design tokens (navy + blue)
   ============================================================ */
:root {
  --bg: #f6f5fc;
  --surface: #ffffff;
  --surface-2: #efedf9;
  --card: #ffffff;
  --raised: #ffffff;
  --field: #faf9fe;
  --basket-bg: #ebe8f8;
  --chrome: #e9e6f7;
  --hover: rgba(60, 40, 140, 0.06);
  --border: #dedaef;
  --border-strong: #c9c3e4;
  --text: #16132b;
  --muted: #5a5578;
  --faint: #8a85a8;
  --accent: #5b44d8;
  --accent-strong: #4530b4;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --green: #0c8a5c;
  --green-soft: color-mix(in srgb, var(--green) 12%, transparent);
  --amber: #c27a0c;
  --amber-soft: color-mix(in srgb, var(--amber) 14%, transparent);
  --red: #cc3a4b;
  --red-soft: color-mix(in srgb, var(--red) 12%, transparent);
  --tip-bg: #ffffff;
  --tip-fg: #16132b;
  --scrim: rgba(22, 14, 55, 0.4);
  --shadow-sm: 0 1px 2px rgba(30, 20, 80, 0.05);
  --shadow: 0 1px 2px rgba(30, 20, 80, 0.05), 0 8px 24px -10px rgba(30, 20, 80, 0.16);
  --shadow-lg: 0 2px 6px rgba(30, 20, 80, 0.05), 0 30px 70px -20px rgba(30, 20, 80, 0.28);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --sidebar: 348px;
  color-scheme: light;
}

/* Dark theme */
[data-theme="dark"] {
  --bg: #0d0b19;
  --surface: #141126;
  --surface-2: #1e1a35;
  --card: #171430;
  --raised: #211c3c;
  --field: #0f0d1e;
  --basket-bg: #1a1633;
  --chrome: #131028;
  --hover: rgba(190, 170, 255, 0.09);
  --border: #2b2647;
  --border-strong: #3d3664;
  --text: #efecfb;
  --muted: #aaa5c8;
  --faint: #8079a0;
  --accent: #8c79ff;
  --accent-strong: #ab9dff;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --green: #34c48b;
  --green-soft: color-mix(in srgb, var(--green) 16%, transparent);
  --amber: #f0a93a;
  --amber-soft: color-mix(in srgb, var(--amber) 16%, transparent);
  --red: #f4707e;
  --red-soft: color-mix(in srgb, var(--red) 16%, transparent);
  --tip-bg: #282244;
  --tip-fg: #efecfb;
  --scrim: rgba(6, 3, 18, 0.62);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 30px 80px -20px rgba(0, 0, 0, 0.75);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --bg: #0d0b19;
    --surface: #141126;
    --surface-2: #1e1a35;
    --card: #171430;
    --raised: #211c3c;
    --field: #0f0d1e;
    --basket-bg: #1a1633;
    --chrome: #131028;
    --hover: rgba(190, 170, 255, 0.09);
    --border: #2b2647;
    --border-strong: #3d3664;
    --text: #efecfb;
    --muted: #aaa5c8;
    --faint: #8079a0;
    --accent: #8c79ff;
    --accent-strong: #ab9dff;
    --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
    --green: #34c48b;
    --green-soft: color-mix(in srgb, var(--green) 16%, transparent);
    --amber: #f0a93a;
    --amber-soft: color-mix(in srgb, var(--amber) 16%, transparent);
    --red: #f4707e;
    --red-soft: color-mix(in srgb, var(--red) 16%, transparent);
    --tip-bg: #282244;
    --tip-fg: #efecfb;
    --scrim: rgba(6, 3, 18, 0.62);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 30px 80px -20px rgba(0, 0, 0, 0.75);
    color-scheme: dark;
  }
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 78% -18%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%),
    var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 7px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 13px;
  color: var(--bg); background: var(--text); box-shadow: var(--shadow-lg);
  text-decoration: none; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* Scrollbars */
.side-scroll, .view, .add-results, .dialog-body { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.side-scroll::-webkit-scrollbar, .view::-webkit-scrollbar, .add-results::-webkit-scrollbar { width: 8px; }
.side-scroll::-webkit-scrollbar-thumb, .view::-webkit-scrollbar-thumb, .add-results::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box;
}

/* ============================================================
   App shell
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  gap: 10px;
  height: 100dvh;
  padding: 8px;
  max-width: 1680px;
  margin: 0 auto;
}
.pane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.sidebar { display: flex; flex-direction: column; overflow: hidden; }
.main { display: flex; flex-direction: column; overflow: hidden; }

/* ---------- Sidebar ---------- */
.side-top {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 10px 16px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; flex: 1; min-width: 0;
}
.brand-mark {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 12px; color: #fff;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 65%, transparent);
}
/* The tile colour lives in the SVG so the mark's own background can never show
   through while the basket is drawn in. */
.brand-mark svg .fb-tile { fill: var(--accent); }
.brand-name { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
/* The sidebar logo plays the same basket animation as the login screen, at 38px. */
.brand-mark svg { width: 100%; height: 100%; display: block; border-radius: inherit; }
/* The two corner badges stay rigid: only the wordmark may shrink on narrow sidebars. */
.brand > .qlooq-badge, .brand > .dev-badge { margin-left: 0; }
.brand > .brand-mark + .brand-name { margin-right: auto; }
.side-top { gap: 6px; }

.side-scroll { flex: 1; overflow-y: auto; padding: 4px 10px 12px; }
.side-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 6px 8px; margin-top: 2px;
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--faint);
}
.baskets { display: flex; flex-direction: column; gap: 7px; }

.basket {
  background: var(--basket-bg);
  border: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
  border-radius: 13px;
  padding: 4px;
  min-width: 0;
}
.baskets.animate .basket { animation: list-in 0.3s var(--ease) both; }
.basket-head { display: flex; align-items: center; gap: 2px; }
.basket-toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 6px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--text); text-align: left;
  transition: background 0.2s;
}
.basket-toggle:hover { background: var(--hover); }
.basket-toggle .caret {
  font-size: 11px; color: var(--faint); flex: none;
  transition: transform 0.25s var(--ease);
}
.basket.collapsed .caret { transform: rotate(-90deg); }
.basket-toggle .fi:not(.caret) { color: var(--accent); font-size: 13px; flex: none; }
.basket-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.basket-count {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  display: inline-grid; place-items: center;
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.basket-count:empty { display: none; }
.basket-tools { display: flex; gap: 1px; opacity: 0; transition: opacity 0.15s; }
.basket:hover .basket-tools, .basket:focus-within .basket-tools { opacity: 1; }
@media (hover: none) { .basket-tools { opacity: 1; } }
.basket-tools .icon-btn { width: 26px; height: 26px; border-radius: 8px; }
.basket-tools .icon-btn .fi { font-size: 12px; }

/* Basket P&L in the header, and the real/simulated switch under it. */
.basket-pnl {
  flex: none; font: 600 10.5px var(--mono); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--faint);
}
.basket-pnl.up { color: var(--green); }
.basket-pnl.down { color: var(--red); }
.basket-pnl.na { color: var(--faint); }

/* Real baskets stay on the neutral surface; simulated ones get a violet shell,
   icon and P&L pill so a what-if can never be mistaken for real money. The
   real/simulated choice itself lives in the basket dialog. */
.basket {
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.basket[data-mode="simulated"] {
  --sim: #8b5cf6;
  background: color-mix(in srgb, var(--sim) 8%, var(--basket-bg));
  border-color: color-mix(in srgb, var(--sim) 30%, var(--border));
}
.basket[data-mode="simulated"] .basket-toggle .fi:not(.caret) { color: var(--sim); }
.basket[data-mode="simulated"] .basket-pnl.up { color: color-mix(in srgb, var(--sim) 75%, var(--green)); }
.basket-sim-tag {
  flex: none; padding: 1px 5px; border-radius: 5px;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--sim); background: color-mix(in srgb, var(--sim) 15%, transparent);
}

/* Basket dialog: the Real / Simulated picker. */
.type-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.type-toggle button {
  display: grid; justify-items: start; gap: 2px;
  padding: 10px 12px; border-radius: 12px; text-align: left;
  border: 1px solid var(--border); background: var(--field);
  color: var(--muted);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.22s var(--ease), color 0.2s;
}
.type-toggle button .fi { font-size: 14px; color: var(--faint); transition: color 0.2s; }
.type-toggle button b { font-size: 13px; font-weight: 600; color: var(--text); }
.type-toggle button small { font-size: 11px; color: var(--faint); }
.type-toggle button:hover { border-color: var(--border-strong); }
.type-toggle button[aria-checked="true"][data-basket-type="real"] {
  border-color: color-mix(in srgb, var(--green) 55%, var(--border));
  background: color-mix(in srgb, var(--green) 9%, var(--card));
  box-shadow: 0 0 0 3px var(--green-soft);
}
.type-toggle button[aria-checked="true"][data-basket-type="real"] .fi { color: var(--green); }
.type-toggle button[aria-checked="true"][data-basket-type="simulated"] {
  border-color: color-mix(in srgb, #8b5cf6 55%, var(--border));
  background: color-mix(in srgb, #8b5cf6 10%, var(--card));
  box-shadow: 0 0 0 3px color-mix(in srgb, #8b5cf6 16%, transparent);
}
.type-toggle button[aria-checked="true"][data-basket-type="simulated"] .fi { color: #8b5cf6; }

.fund-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 2px 0 2px; min-width: 0; }
.basket.collapsed .fund-list { display: none; }
.fund-item {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 33px; padding: 0 8px 0 10px;
  border-radius: 8px; text-align: left;
  font-size: 12.8px; color: var(--muted);
  min-width: 0;
  transition: background 0.16s, color 0.16s;
}
.fund-item:hover { background: var(--hover); color: var(--text); }
.fund-item.active { background: var(--accent-soft); color: var(--text); font-weight: 550; }
.fund-item.active::before {
  content: ""; position: absolute; left: -4px; top: 50%; width: 3px; height: 16px;
  margin-top: -8px; border-radius: 99px; background: var(--accent);
}
.fund-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--fc, var(--accent)); }
.fund-item .fund-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fund-item .fund-ret {
  flex: none; font: 500 10.5px var(--mono); letter-spacing: -0.02em;
  color: var(--faint);
}
.fund-item .fund-ret.up { color: var(--green); }
.fund-item .fund-ret.down { color: var(--red); }
.fund-item .fund-ret.na { color: var(--faint); }
.fund-item.loading .fund-ret { opacity: 0.5; }

/* Bottom of the sidebar: tools + account, one tinted strip matching the brand strip. */
.side-bottom {
  flex: none; position: relative; z-index: 2; margin-top: 8px; padding: 6px 6px 8px;
  background: var(--chrome); border: 1px solid var(--border); border-radius: 12px;
}
/* About sits right next to the wordmark, before the QLOOQ and developer badges. */
.about-btn { align-self: center; margin-left: 2px; }

.side-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 2px 2px 4px;
}
.user-chip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; }
.user-avatar {
  flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em;
  background-size: cover; background-position: center;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-meta { min-width: 0; display: grid; line-height: 1.25; }
.user-meta b, .user-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta b { font-weight: 550; font-size: 13px; color: var(--text); }
.user-meta span { color: var(--faint); font-size: 11.5px; }
/* Demo mode gets its own tint so it never reads as a real Google account. */
.user-chip[data-mode="demo"] .user-avatar { background: var(--amber-soft); color: var(--amber); }

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  height: 58px; flex: none; padding: 0 16px 0 20px;
}
.status {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 11px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid transparent;
  font-size: 12.5px; color: var(--muted); min-width: 0;
}
.status .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--green); box-shadow: 0 0 0 3px var(--green-soft);
}
.status[data-state="loading"] .dot { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); animation: dot-pulse 1.1s var(--ease) infinite; }
.status[data-state="stale"] .dot { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.status[data-state="error"] .dot { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.status-label { color: var(--text); font-weight: 550; white-space: nowrap; }
.status-sep { color: var(--faint); }
.status-date { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Status chip and buttons on the right share one soft, rounded tray. */
/* One tray, one row height: every child sits on the same 28px line so the
   icons and chips read as a single centred group. */
.top-actions {
  display: flex; align-items: center; gap: 4px; margin-left: auto; min-width: 0;
  height: 36px; padding: 3px; background: var(--chrome); border: 1px solid var(--border);
  border-radius: 13px; box-shadow: var(--shadow-sm);
}
.top-actions > .status,
.top-actions > .sync { height: 28px; align-self: center; }
.top-actions > .icon-btn { width: 30px; height: 28px; border-radius: 8px; }
.top-actions > .icon-btn .fi { font-size: 14px; }
.top-actions .status { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.top-actions .status[data-state="error"] { background: color-mix(in srgb, var(--red) 9%, var(--card)); }

/* ============================================================
   Buttons & fields
   ============================================================ */
.icon-btn {
  width: 34px; height: 34px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: 10px; color: var(--muted);
  border: 1px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.2s, transform 0.16s var(--spring);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn.sm { width: 28px; height: 28px; border-radius: 8px; }
.icon-btn .fi { font-size: 15px; }
.icon-btn.sm .fi { font-size: 12.5px; }
.menu-btn { display: none; }
.icon-btn.danger:hover { background: var(--red-soft); color: var(--red); }

/* ---------- Drive sync pill ---------- */
.sync {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px;
  border-radius: 99px; font-size: 12.5px; color: var(--muted); white-space: nowrap;
  transition: background 0.2s, color 0.2s, box-shadow 0.25s, transform 0.25s var(--spring);
}
.sync:hover { background: var(--hover); color: var(--text); }
.sync:active { transform: scale(0.97); }
.sync-icon { font-size: 14px; color: var(--faint); transition: color 0.3s; }
.sync-drive { display: none; width: 15px; height: 14px; flex: none; }

/* Saved: quiet, green tick. */
.sync[data-state="on"] .sync-icon { color: var(--green); }
/* Working: amber, spinning. */
.sync[data-state="busy"] .sync-icon { color: var(--accent); animation: spin 1s linear infinite; }
/* Needs you: a real button with the Drive logo and a pulsing dot. */
.sync[data-state="error"] {
  padding: 0 12px 0 10px; font-weight: 500; color: var(--text); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-sm);
}
.sync[data-state="error"] .sync-icon { color: var(--red); }
.sync[data-state="error"]::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 2px var(--surface);
  animation: net-ping 2s var(--ease) infinite;
}
.sync[data-state="auth"], .sync[data-state="connecting"] {
  padding: 0 12px 0 10px; font-weight: 500; color: var(--text); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-sm);
}
.sync[data-state="auth"]:hover, .sync[data-state="connecting"]:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, var(--border)), var(--shadow);
}
.sync[data-state="auth"] .sync-drive, .sync[data-state="connecting"] .sync-drive { display: block; }
.sync[data-state="auth"] .sync-icon { display: none; }
.sync[data-state="connecting"] .sync-icon { order: 2; font-size: 12px; color: var(--accent); animation: spin 1s linear infinite; }
.sync[data-state="auth"]::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 2px var(--surface);
  animation: net-ping 2s var(--ease) infinite;
}
@keyframes net-ping { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(2.8); opacity: 0; } }

.btn-primary, .btn-secondary, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.16s var(--spring), opacity 0.2s;
}
.btn-primary { color: var(--bg); background: var(--text); }
.btn-primary:hover { opacity: 0.88; }
.btn-secondary { color: var(--text); background: var(--card); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-danger { color: #fff; background: var(--red); }
.btn-danger:hover { opacity: 0.9; }
.btn-primary:active, .btn-secondary:active, .btn-danger:active { transform: scale(0.97); }
.btn-primary .fi, .btn-secondary .fi { font-size: 13px; }

.field { display: grid; gap: 6px; }
.field > span {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--faint);
}
.field input, .field select {
  width: 100%; height: 38px; padding: 0 11px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--field); color: var(--text);
  font-size: 13.5px; outline: none;
  transition: border-color 0.2s, box-shadow 0.22s, background 0.2s;
}
.field input::placeholder { color: var(--faint); }
.field input:focus, .field select:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--card);
}

/* ---------- Themed select (js/select.js) ---------- */
/* The native <select> is hidden; this button stands in for it and opens the
   scrollable .ts-popup listbox, both painted with the app's own tokens. */
.ts-btn {
  width: 100%; height: 38px; padding: 0 10px 0 11px; border-radius: 10px;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: var(--field); color: var(--text);
  font-size: 13.5px; text-align: left;
  transition: border-color 0.2s, box-shadow 0.22s, background 0.2s;
}
.ts-btn:hover { border-color: var(--border-strong); }
.ts-btn:focus-visible, .ts-btn.open {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--card);
}
.ts-btn.is-empty { color: var(--faint); }
.ts-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ts-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-caret { flex: none; font-size: 11px; color: var(--faint); transition: transform 0.22s var(--ease); }
.ts-btn.open .ts-caret { transform: rotate(180deg); }

/* Filters use the compact variant. */
.filter .ts-btn { height: 32px; border-radius: 9px; font-size: 12px; padding: 0 8px; }

/* The list itself: scrolls past seven rows and never grows taller than the
   space it has. It lives inside the open dialog (a modal's top layer would
   otherwise paint over anything on <body>). */
.ts-popup {
  position: fixed; z-index: 2; overflow-y: auto; overscroll-behavior: contain;
  padding: 5px; border-radius: 12px;
  background: var(--raised); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
/* Inside a dialog the list is anchored to the dialog box, not the viewport. */
dialog[open] { position: relative; }
dialog[open] > .ts-popup { position: absolute; }
/* No entry animation: a dropdown must be visible the moment it is placed. An
   animation here would leave the list at its 0 % keyframe on a page that never
   advances its animation clock. The dialog/panel animations cover the polish. */
/* While a dropdown is open its dialog must stop clipping, or the list would be
   cut off at the dialog's rounded edge. */
.dialog.select-open { overflow: visible; }
.ts-popup::-webkit-scrollbar { width: 8px; }
.ts-popup::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 99px;
  border: 2px solid transparent; background-clip: padding-box;
}
.ts-option {
  position: relative;
  display: flex; align-items: center; width: 100%; min-height: 34px;
  padding: 7px 26px 7px 9px; border-radius: 8px;
  font-size: 13px; color: var(--text); text-align: left;
  transition: background 0.12s, color 0.12s;
}
.ts-option:hover, .ts-option.active { background: var(--surface-2); }
.ts-option.on { color: var(--accent-strong); font-weight: 600; }
/* The tick gets its own lane on the right so a long label never overlaps it. */
.ts-option.on::after {
  content: "✓"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--accent);
}
.ts-option.off { color: var(--faint); cursor: not-allowed; }
/* A long list scrolls; the scrollbar is styled with the app's own tokens. */
.ts-popup.scrollable { padding-right: 3px; }

/* ---------- Date picker ---------- */
/* The calendar button is drawn by the browser, so restyle it to match the theme. */
.field input[type="date"] { padding-right: 8px; }
.field input[type="date"]::-webkit-calendar-picker-indicator {
  width: 22px; height: 22px; padding: 3px; margin-right: -2px;
  border-radius: 7px; cursor: pointer; opacity: 0.55;
  background-color: transparent;
  transition: background 0.18s, opacity 0.18s;
}
.field input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1; background-color: var(--accent-soft);
}
[data-theme="dark"] .field input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="system"] .field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
}
@media (prefers-color-scheme: light) {
  [data-theme="system"] .field input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }
}

/* ============================================================
   View & fund page
   ============================================================ */
.view { flex: 1; overflow-y: auto; padding: 24px 28px 120px; }
.view-inner { max-width: 1040px; margin: 0 auto; animation: rise 0.35s var(--ease) both; }
.view > .view-inner > * { animation: rise 0.4s var(--ease) both; }
.view > .view-inner > *:nth-child(2) { animation-delay: 0.03s; }
.view > .view-inner > *:nth-child(3) { animation-delay: 0.06s; }
.view > .view-inner > *:nth-child(4) { animation-delay: 0.09s; }

.crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.basket-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 27px; padding: 0 9px 0 8px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--card);
  font-size: 12px; font-weight: 550; color: var(--muted);
  transition: background 0.18s, color 0.18s, border-color 0.2s;
}
.basket-chip:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.basket-chip .fi { font-size: 11.5px; color: var(--accent); }
.basket-chip .caret { font-size: 10px; color: var(--faint); }

.fund-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.fund-avatar {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center;
  border-radius: 14px; font-size: 14px; font-weight: 650; letter-spacing: -0.02em;
  color: var(--fc, var(--accent));
  background: color-mix(in srgb, var(--fc, var(--accent)) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--fc, var(--accent)) 24%, var(--border));
}
/* Raw fund colours are too dark for text on the dark surface. */
[data-theme="dark"] .fund-avatar { color: color-mix(in srgb, var(--fc, var(--accent)) 60%, #fff); }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .fund-avatar { color: color-mix(in srgb, var(--fc, var(--accent)) 60%, #fff); }
}
.fund-title { min-width: 0; flex: 1; }
.fund-title h1 {
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.22; font-weight: 650;
  letter-spacing: -0.025em; margin-bottom: 5px;
}
.fund-meta { font-size: 13px; color: var(--muted); }
.fund-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 21px; padding: 0 7px; border-radius: 6px;
  font-size: 10.5px; font-weight: 550; letter-spacing: 0.01em;
  color: var(--muted); background: var(--surface-2); border: 1px solid transparent;
}
.tag.plan { color: var(--accent-strong); background: var(--accent-soft); }
.tag.plan .fi { font-size: 10px; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat {
  position: relative; overflow: hidden;
  padding: 13px 14px 12px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.stat-label { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 550; color: var(--muted); }
.stat-label .fi { font-size: 11px; color: var(--faint); }
.stat-val {
  margin-top: 4px; font: 600 23px/1.15 var(--font); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat-val.up { color: var(--green); }
.stat-val.down { color: var(--red); }
.stat-sub { margin-top: 2px; font-size: 11px; color: var(--faint); }

/* ---------- Cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-sm);
}
.card-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px 0;
}
.card-head h2 { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.card-head p { margin-top: 2px; font-size: 11.5px; color: var(--faint); }

/* ---------- Chart ---------- */
.chart-card { padding-bottom: 12px; margin-bottom: 14px; }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 18px 6px; }
.chart-head h2 { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.chart-head p { margin-top: 2px; font-size: 11.5px; color: var(--faint); }
.ranges {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  background: var(--surface-2); border-radius: 9px;
}
.ranges button {
  height: 26px; padding: 0 9px; border-radius: 7px;
  font: 600 10.5px var(--mono); letter-spacing: 0.01em; color: var(--muted);
  transition: background 0.18s, color 0.18s, box-shadow 0.2s;
}
.ranges button:hover { color: var(--text); }
.ranges button[aria-pressed="true"] {
  background: var(--card); color: var(--text);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--border);
}
.chart-wrap { position: relative; height: 300px; margin: 2px 8px 0; touch-action: pan-y; }
.chart-wrap svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-grid line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; opacity: 0.7; }
.chart-axis text { fill: var(--faint); font: 500 10px var(--mono); }
.chart-line {
  fill: none; stroke: var(--chart-color, var(--accent)); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.chart-area { fill: url(#chart-fill); }
.chart-fill stop:first-child { stop-color: var(--chart-color, var(--accent)); stop-opacity: 0.2; }
.chart-fill stop:last-child { stop-color: var(--chart-color, var(--accent)); stop-opacity: 0; }
.chart-dot { fill: var(--chart-color, var(--accent)); stroke: var(--card); stroke-width: 2; }
.chart-dot-halo { fill: var(--chart-color, var(--accent)); opacity: 0.16; }
.chart-cross { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; }
.chart-hover-dot { opacity: 0; }
.chart-tip {
  position: absolute; z-index: 3; pointer-events: none;
  padding: 7px 10px; border-radius: 9px;
  background: var(--tip-bg); color: var(--tip-fg);
  font-size: 11.5px; line-height: 1.35; white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0; transform: translate(-50%, -110%);
  transition: opacity 0.14s;
}
.chart-tip b { display: block; font: 600 12.5px var(--mono); }
.chart-tip span { display: block; opacity: 0.72; }
.chart-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 4px 18px 4px; font-size: 11px; color: var(--faint);
}
.chart-foot .spacer { flex: 1; }
.chart-foot b { color: var(--muted); font-weight: 550; }
.chart-foot b.up { color: var(--green); }
.chart-foot b.down { color: var(--red); }
.chart-note { font-size: 11px; color: var(--faint); }

/* ---------- Details + notes ---------- */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; }
.details { padding: 16px 18px 14px; }
.details h2 { font-size: 14.5px; font-weight: 600; margin-bottom: 10px; }
.dl { display: grid; gap: 0; }
.dl-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  font-size: 12.5px;
}
.dl-row:first-child { border-top: 0; padding-top: 0; }
.dl-row dt { color: var(--faint); flex: none; }
.dl-row dd { margin: 0; text-align: right; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.dl-row dd.mono { font: 500 11.5px var(--mono); }
.details-link {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  font-size: 12px; color: var(--accent-strong); text-decoration: none;
}
.details-link:hover { text-decoration: underline; }
.details-link .fi { font-size: 11px; }

.notes-card { padding: 16px 18px 14px; display: flex; flex-direction: column; }
.notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.notes-head h2 { font-size: 14.5px; font-weight: 600; }
.notes-status { font-size: 10.5px; color: var(--faint); }
.notes-card textarea {
  flex: 1; min-height: 132px; resize: vertical;
  width: 100%; padding: 11px 12px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--field); color: var(--text);
  font-size: 13px; line-height: 1.6; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.notes-card textarea::placeholder { color: var(--faint); }
.notes-card textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--card);
}

/* ---------- Basket overview ---------- */
.basket-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.basket-avatar {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  border-radius: 15px; color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}
.basket-avatar .fi { font-size: 21px; }
.basket-hero h1 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 650; letter-spacing: -0.025em; }
.basket-hero p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.basket-hero .btn-secondary { margin-left: auto; }

.fund-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fund-card {
  position: relative; text-align: left;
  padding: 15px 16px 14px; border-radius: 15px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s var(--spring), box-shadow 0.25s, border-color 0.2s;
  animation: rise 0.4s var(--ease) both;
}
.fund-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.fund-card:active { transform: scale(0.995); }
.fund-card .fc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fund-card .fc-name { font-size: 13.8px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.fund-card .fc-house { font-size: 11px; color: var(--faint); margin-bottom: 10px; }
.fund-card .fc-bottom { display: flex; align-items: flex-end; gap: 10px; }
.fund-card .fc-nav { font: 600 17px/1.2 var(--mono); letter-spacing: -0.02em; }
.fund-card .fc-nav small { display: block; font: 400 10px var(--font); color: var(--faint); letter-spacing: 0; margin-top: 2px; }
.fund-card .fc-spark { margin-left: auto; width: 92px; height: 34px; flex: none; }
.fund-card .fc-spark path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fund-card .fc-ret {
  display: inline-flex; align-items: center; gap: 3px;
  height: 22px; padding: 0 7px; border-radius: 6px;
  font: 600 11px var(--mono);
}
.fund-card .fc-ret.up { color: var(--green); background: var(--green-soft); }
.fund-card .fc-ret.down { color: var(--red); background: var(--red-soft); }
.fund-card .fc-ret.na { color: var(--faint); background: var(--surface-2); }
.fund-card .fc-ret .fi { font-size: 9px; }

/* ---------- Welcome & empty ---------- */
.welcome { max-width: 760px; margin: 3vh auto 0; text-align: center; animation: rise 0.45s var(--ease) both; }
.welcome-art {
  width: 118px; height: 118px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: 34px;
  color: var(--accent);
  background:
    radial-gradient(60% 60% at 30% 25%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--accent) 45%, transparent);
}
.welcome-art .fi { font-size: 46px; }
.welcome h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 650; letter-spacing: -0.035em; line-height: 1.1; }
.welcome > p {
  max-width: 520px; margin: 12px auto 0;
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
}
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 26px 0 22px; text-align: left; }
.step {
  padding: 15px 14px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.step-icon {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  color: var(--accent); background: var(--accent-soft);
}
.step-icon .fi { font-size: 15px; }
.step-num { font: 600 11px var(--mono); color: var(--faint); }
.step b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.step span { font-size: 12px; line-height: 1.45; color: var(--muted); }

.empty {
  max-width: 460px; margin: 5vh auto 0; text-align: center;
  animation: rise 0.4s var(--ease) both;
}
.empty-art {
  width: 96px; height: 96px; margin: 0 auto 14px;
  display: grid; place-items: center; border-radius: 28px;
  color: var(--accent); background: var(--accent-soft);
}
.empty-art .fi { font-size: 38px; }
.empty h2 { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
.empty p { margin: 7px auto 0; max-width: 360px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.empty .btn-primary { margin-top: 16px; }

/* Skeleton */
.skeleton {
  position: relative; overflow: hidden; color: transparent !important;
  background: var(--surface-2); border-radius: 7px;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card) 65%, transparent), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.25s infinite;
}
.skeleton-line { height: 12px; width: 100%; }

.load-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--faint); }
.spinner {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}

/* ============================================================
   Add funds (modal window)
   ============================================================ */
.add-fab {
  position: fixed; right: 26px; bottom: 24px; z-index: 50;
  display: inline-flex; align-items: center; gap: 7px;
  height: 48px; padding: 0 18px; border-radius: 99px;
  font-size: 13.5px; font-weight: 600; color: var(--bg);
  background: var(--text); border: 1px solid transparent;
  box-shadow: var(--shadow-lg);
  transition: transform 0.2s var(--spring), opacity 0.2s, box-shadow 0.25s;
}
.add-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg), 0 0 0 4px var(--accent-soft); }
.add-fab:active { transform: scale(0.96); }
.add-fab .fi { font-size: 14px; }
.add-fab[aria-expanded="true"] { background: var(--accent); color: #fff; }

/* Size rules live with the rest of the dialog styles (below), so they beat the
   base .dialog width instead of being overridden by it. */
.add-dialog[open] { display: flex; flex-direction: column; }
.add-dialog .add-head { flex: none; }
.add-head .dialog-x { margin-left: auto; }

/* Search + filters sit in one sticky toolbar above the scrolling results. */
.add-toolbar {
  flex: none; display: grid; gap: 10px;
  padding: 0 18px 12px;
}
.search-field {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; height: 42px;
  border-radius: 11px; border: 1px solid var(--border);
  background: var(--field);
  transition: border-color 0.2s, box-shadow 0.22s, background 0.2s;
}
.search-field:focus-within {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--card);
}
.search-field > .fi { font-size: 13px; color: var(--faint); flex: none; }
.search-field input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none;
  font-size: 14px;
}
.search-field input::placeholder { color: var(--faint); }
.search-field .spinner { width: 14px; height: 14px; }

.add-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.filter { display: grid; gap: 4px; flex: 1 1 160px; min-width: 0; }
.filter > span {
  font-size: 9.5px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint);
}
.filter select {
  width: 100%; height: 32px; padding: 0 8px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--field); color: var(--text);
  font-size: 12px; outline: none; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.filter select:focus { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft); }
.filter.only-basket { flex: 1 1 150px; }
.filter-reset {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px;
  border-radius: 9px; font-size: 12px; font-weight: 600; color: var(--red);
  background: var(--red-soft);
}
.filter-reset:hover { background: color-mix(in srgb, var(--red) 20%, transparent); }
.filter-reset .fi { font-size: 11px; }

.add-results {
  flex: 1; min-height: 180px; overflow-y: auto; padding: 0 10px 6px;
  border-top: 1px solid var(--border);
}
.add-result {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; padding: 9px 10px; border-radius: 10px; text-align: left;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.add-result:hover, .add-result:focus-visible { background: var(--surface-2); }
.add-result .ar-check {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  border-radius: 6px; border: 1.5px solid var(--border-strong); background: var(--card);
  display: grid; place-items: center; color: transparent;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.add-result .ar-check .fi { font-size: 10px; }
.add-result.picked { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.add-result.picked .ar-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.add-result .ar-main { min-width: 0; flex: 1; }
.add-result .ar-name { display: block; font-size: 13px; font-weight: 550; line-height: 1.35; color: var(--text); }
.add-result.added { opacity: 0.55; }
.add-result.added .ar-check { background: var(--green-soft); border-color: var(--green); color: var(--green); }

/* Category / sub-category / plan / option line under each scheme name. */
.ar-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.ar-chip {
  display: inline-flex; align-items: center; height: 17px; padding: 0 6px;
  border-radius: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--muted); background: var(--surface-2);
}
.ar-chip.group-equity { color: #0d7a52; background: color-mix(in srgb, var(--green) 14%, transparent); }
.ar-chip.group-debt { color: #1d6ba8; background: color-mix(in srgb, #2b8de0 14%, transparent); }
.ar-chip.group-hybrid { color: #a05b00; background: color-mix(in srgb, var(--amber) 16%, transparent); }
.ar-chip.group-other { color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent); }
.ar-chip.plan { color: var(--accent-strong); background: var(--accent-soft); }
.ar-chip.added { color: var(--green); background: var(--green-soft); }
[data-theme="dark"] .ar-chip.group-equity { color: #58d9a0; }
[data-theme="dark"] .ar-chip.group-debt { color: #7cc4ff; }
[data-theme="dark"] .ar-chip.group-hybrid { color: #ffc46b; }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .ar-chip.group-equity { color: #58d9a0; }
  [data-theme="system"] .ar-chip.group-debt { color: #7cc4ff; }
  [data-theme="system"] .ar-chip.group-hybrid { color: #ffc46b; }
}

/* Pagination row under a long catalogue list. */
.add-more { display: flex; justify-content: center; padding: 10px 0 14px; }
.add-more .link-btn { font-size: 12px; color: var(--accent-strong); }
.add-more .link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

.add-empty {
  display: grid; justify-items: center; gap: 4px;
  padding: 40px 20px; text-align: center; color: var(--faint);
}
.add-empty .fi { font-size: 22px; opacity: 0.5; }
.add-empty p { font-size: 13px; font-weight: 550; color: var(--muted); }
.add-empty span { font-size: 11.5px; }

.add-hint {
  flex: none; padding: 8px 18px; font-size: 11px; color: var(--faint);
  border-top: 1px solid var(--border);
}
.add-group-label {
  padding: 12px 10px 4px; font-size: 10px; font-weight: 650;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
}

/* Footer: what is selected, plus the one button that commits them all. */
.add-dialog .add-foot {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; background: color-mix(in srgb, var(--surface-2) 45%, var(--raised));
}
.add-picked { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); }
.add-picked:empty { display: none; }
.add-picked b { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.add-dialog .add-foot .btn-primary { height: 36px; }

/* ============================================================
   Dialogs, toasts, theme menu
   ============================================================ */
.dialog {
  width: min(430px, calc(100% - 32px));
  padding: 0; border: 1px solid var(--border); border-radius: 18px;
  background: var(--raised); color: var(--text);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.dialog[open] { animation: dialog-in 0.3s var(--spring) both; }
/* The add window is full width — the viewport minus a small gutter. */
.dialog.add-dialog {
  width: min(1680px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: min(88dvh, 900px);
  max-height: calc(100dvh - 32px);
}
.dialog[open]::backdrop { background: var(--scrim); backdrop-filter: blur(3px); animation: backdrop-in 0.25s var(--ease) both; }
.dialog.closing { animation: dialog-out 0.19s var(--ease) both; }
.dialog.closing::backdrop { animation: backdrop-out 0.19s var(--ease) both; }
.dialog-form { display: flex; flex-direction: column; max-height: min(84dvh, 720px); }
.dialog-head { display: flex; align-items: flex-start; gap: 11px; padding: 18px 16px 12px 18px; }
.dialog-badge {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 11px; color: var(--accent); background: var(--accent-soft);
}
.dialog-badge .fi { font-size: 16px; }
.dialog-badge.danger { color: var(--red); background: var(--red-soft); }
.dialog-head h2 { font-size: 16px; font-weight: 650; letter-spacing: -0.015em; }
.dialog-head p { margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.dialog-x { margin-left: auto; }
.dialog-body { padding: 4px 18px 18px; display: grid; gap: 15px; overflow-y: auto; }
.dialog-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 45%, var(--raised));
}
.dialog-foot .btn-primary, .dialog-foot .btn-secondary, .dialog-foot .btn-danger { height: 36px; }

/* ---------- Confirmation window ---------- */
.confirm-body { padding-top: 0; gap: 0; }
.confirm-dialog .dialog-head { padding-bottom: 10px; }
.confirm-list {
  list-style: none; margin: 0; padding: 10px 12px; display: grid; gap: 0;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
}
.confirm-list li {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0; font-size: 12.5px; color: var(--muted);
}
.confirm-list li + li { border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent); }
.confirm-list .fi { font-size: 12.5px; color: var(--faint); flex: none; }
.confirm-list li span { flex: 1; min-width: 0; }
.confirm-list li b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.confirm-note {
  margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--red);
}
.confirm-dialog .dialog-badge.danger { background: var(--red-soft); color: var(--red); }

.icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.icon-opt {
  height: 36px; display: grid; place-items: center; border-radius: 9px;
  color: var(--muted); border: 1px solid var(--border); background: var(--field);
  transition: background 0.16s, color 0.16s, border-color 0.18s, box-shadow 0.2s;
}
.icon-opt .fi { font-size: 14px; }
.icon-opt:hover { color: var(--text); border-color: var(--border-strong); }
.icon-opt[aria-checked="true"] {
  color: var(--accent); background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.about-body { gap: 12px; }
.about-body p { font-size: 13px; line-height: 1.6; color: var(--muted); }
.about-body a { color: var(--accent-strong); }
.about-list { display: grid; gap: 9px; margin: 2px 0; padding: 0; list-style: none; }
.about-list li { display: flex; gap: 9px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.about-list .fi { color: var(--accent); font-size: 13px; margin-top: 2px; }
.about-note {
  padding: 10px 12px; border-radius: 10px; font-size: 11.5px !important;
  background: var(--surface-2); color: var(--faint) !important;
}

.link-btn { padding: 4px 0; font-size: 12px; font-weight: 550; color: var(--muted); text-align: left; }
.link-btn:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.link-btn.danger { color: var(--red); }
.dialog-badge.accent { color: var(--accent); background: var(--accent-soft); }

.welcome-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}

.theme-menu {
  position: fixed; z-index: 90; width: 150px; padding: 5px;
  background: var(--raised); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  animation: panel-in 0.18s var(--ease) both;
}
.theme-menu.closing { animation: panel-out 0.19s var(--ease) both; pointer-events: none; }
.theme-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  height: 34px; padding: 0 9px; border-radius: 8px;
  font-size: 12.5px; color: var(--muted); text-align: left;
}
.theme-menu button:hover { background: var(--surface-2); color: var(--text); }
.theme-menu button .fi { font-size: 13px; width: 15px; text-align: center; }
.theme-menu button[aria-checked="true"] { color: var(--text); font-weight: 550; }
.theme-menu button[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--accent); font-size: 11px; }

/* ---------- Toasts ---------- */
/* Raised cards in the current theme; the tone sets the icon and accent colour.
   They sit centred at the bottom so they never cover the add-fund button. */
.toasts {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 100;
  display: grid; gap: 8px; justify-items: center; pointer-events: none;
  width: calc(100% - 32px);
}
.toast {
  --tone: var(--accent);
  position: relative; overflow: hidden; pointer-events: auto;
  display: flex; align-items: center; gap: 12px; max-width: min(460px, 100%);
  padding: 8px 8px 8px 10px; border-radius: 14px;
  background: var(--raised); color: var(--text); font-size: 13px;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  animation: toast-in 0.34s var(--spring) both;
}
.toast.out { animation: toast-out 0.22s var(--ease) both; }
.toast[data-tone="danger"] { --tone: var(--red); }
.toast[data-tone="success"] { --tone: var(--green); }
.toast[data-tone="warning"] { --tone: var(--amber); }
.toast:not(:has(.toast-action)) { padding-right: 16px; }
.toast-icon {
  flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone);
}
.toast-icon .fi { font-size: 13px; }
.toast-text { flex: 1; min-width: 0; line-height: 1.4; }
.toast-action {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 9px;
  font-weight: 600; font-size: 12.5px; color: var(--accent);
  background: var(--accent-soft); transition: background 0.2s, transform 0.2s var(--spring);
}
.toast-action .fi { font-size: 12px; }
.toast-action:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.toast-action:active { transform: scale(0.96); }
/* Thin bar showing the time left before the toast closes. */
.toast-timer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: left;
  background: color-mix(in srgb, var(--tone) 55%, transparent);
}

.scrim {
  position: fixed; inset: 0; z-index: 70;
  background: var(--scrim); backdrop-filter: blur(2px);
  animation: fade-in 0.2s var(--ease);
}

/* ============================================================
   Tooltips — one bubble for every [data-tip]
   ============================================================ */
.tip {
  position: fixed; z-index: 95; left: 0; top: 0;
  width: max-content; max-width: min(268px, calc(100vw - 16px));
  padding: 5px 9px; border-radius: 8px;
  background: var(--tip-bg); color: var(--tip-fg);
  font-size: 12px; font-weight: 500; line-height: 1.4;
  text-wrap: balance; overflow-wrap: break-word;
  box-shadow: var(--shadow); pointer-events: none;
  opacity: 0; transform: translateY(4px) scale(0.96); transform-origin: 50% 100%;
  transition: opacity 0.14s var(--ease), transform 0.22s var(--ease);
}
.tip[data-side="bottom"] { transform: translateY(-4px) scale(0.96); transform-origin: 50% 0; }
.tip.show { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  :root { --sidebar: 292px; }
  .view { padding: 22px 20px 110px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 8px auto 8px 8px; z-index: 80;
    width: min(322px, calc(100vw - 44px));
    transform: translateX(calc(-100% - 14px));
    transition: transform 0.3s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .app.drawer-open .sidebar { transform: none; }
  .menu-btn { display: inline-grid; }
  .topbar { padding-left: 12px; }
  .view { padding: 18px 15px 108px; }
  .fund-head { gap: 11px; }
  .fund-avatar { width: 42px; height: 42px; border-radius: 12px; }
  .fund-grid { grid-template-columns: minmax(0, 1fr); }
  .basket-hero { flex-wrap: wrap; }
  .basket-hero .btn-secondary { margin-left: 0; width: 100%; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .chart-wrap { height: 240px; }
  .chart-head { padding: 14px 14px 4px; }
  .card-head { padding: 14px 14px 0; }
  .chart-foot { padding: 4px 14px; gap: 8px; }
  .add-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); height: 46px; padding: 0 15px; }
  .dialog.add-dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); height: auto; max-height: 88dvh; }
  .add-dialog .add-head { padding: 14px 14px 8px; }
  .add-toolbar { padding: 0 14px 10px; }
  .filter { flex: 1 1 calc(50% - 4px); }
  .filter.only-basket { flex: 1 1 100%; }
  .add-hint { padding: 8px 14px; }
  .add-dialog .add-foot { padding: 10px 14px; }
  .toasts { bottom: calc(78px + env(safe-area-inset-bottom)); width: calc(100% - 24px); }
  .toast { max-width: 100%; }
  .drawer-open .add-fab { opacity: 0; pointer-events: none; }
}

@media (max-width: 560px) {
  .status-date, .status-sep { display: none; }
  .stats { gap: 8px; }
  .stat { padding: 11px 12px 10px; }
  .stat-val { font-size: 20px; }
  .fund-title h1 { font-size: 19px; }
  .fund-tags { display: none; }
  .basket-hero h1 { font-size: 22px; }
  .ranges { width: 100%; justify-content: space-between; }
  .ranges button { flex: 1; padding: 0 4px; }
  .fund-card .fc-spark { width: 74px; }
  .welcome { margin-top: 1vh; }
  .welcome-art { width: 96px; height: 96px; border-radius: 28px; }
  .welcome-art .fi { font-size: 38px; }
}

@media (pointer: coarse) {
  .icon-btn { width: 38px; height: 38px; }
  .icon-btn.sm { width: 32px; height: 32px; }
  .fund-item { height: 38px; }
  .basket-toggle { height: 38px; }
  .ranges button { height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   Login
   ============================================================ */
.screen { transition: opacity 0.45s var(--ease), transform 0.55s var(--ease); }
.screen.entering, .screen.leaving { opacity: 0; transform: scale(0.985); }

/* Controls that only make sense inside the app stay hidden on the login screen. */
body.at-login .add-fab,
body.at-login .toasts { display: none; }

.login { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 16px; }
.login-theme { position: absolute; top: 14px; right: 14px; z-index: 1; width: 34px; height: 34px; border-radius: 10px; }
.orbs span {
  position: absolute; width: 48vmax; height: 48vmax; border-radius: 50%;
  filter: blur(70px); opacity: 0.5; animation: drift 22s var(--ease) infinite alternate;
}
.orbs span:nth-child(1) { background: radial-gradient(circle, var(--accent-soft), transparent 65%); top: -18vmax; left: -10vmax; }
.orbs span:nth-child(2) { background: radial-gradient(circle, color-mix(in srgb, var(--green) 16%, transparent), transparent 65%); bottom: -22vmax; right: -12vmax; animation-delay: -7s; }
.orbs span:nth-child(3) { background: radial-gradient(circle, color-mix(in srgb, #8b5cf6 12%, transparent), color-mix(in srgb, #06b6d4 5%, transparent) 40%, transparent 65%); /* QLOOQ's violet → cyan */ top: 30%; left: 45%; width: 30vmax; height: 30vmax; animation-delay: -14s; }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4vmax, 3vmax) scale(1.08); }
  100% { transform: translate(-3vmax, 5vmax) scale(0.96); }
}

.login-card {
  position: relative; width: min(380px, 100%);
  padding: 22px 32px 22px; text-align: center;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg);
}
.login-card > * { animation: rise 0.7s var(--ease) both; }
.login-card > :nth-child(2) { animation-delay: 0.05s; }
.login-card > :nth-child(3) { animation-delay: 0.1s; }
.login-card > :nth-child(4) { animation-delay: 0.16s; }
.login-card > :nth-child(n + 5) { animation-delay: 0.22s; }
.login-logo {
  display: block; width: 76px; height: 76px; margin: 14px auto 16px; color: var(--accent);
  filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--accent) 38%, transparent));
}
.login-logo svg { width: 100%; height: 100%; display: block; }

.login h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.032em; }
.tagline { margin: 6px 0 26px; color: var(--muted); }

.btn-google {
  position: relative; width: 100%; height: 46px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--surface); font-weight: 500; box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--spring), box-shadow 0.25s var(--ease), border-color 0.2s;
}
.btn-google:hover:not(:disabled) { box-shadow: var(--shadow); border-color: var(--faint); transform: translateY(-1px); }
.btn-google:active:not(:disabled) { transform: scale(0.98); }
.btn-google:disabled { opacity: 0.55; }
.g-icon { width: 18px; height: 18px; }
.btn-spinner {
  position: absolute; right: 16px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  opacity: 0; animation: spin 0.8s linear infinite; transition: opacity 0.2s;
}
.btn-google.busy .btn-spinner { opacity: 1; }

.login-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.login-note:not(:empty) { margin-top: 12px; }
.login-note.error { color: var(--red); }

/* The demo route is a quiet link, not a second primary button. */
.login .link-btn { display: block; margin: 14px auto 0; padding: 4px 6px; border-radius: 6px; font-size: 13px; color: var(--muted); }
.login .link-btn:hover { color: var(--text); text-decoration: none; }

.login-points { list-style: none; margin: 22px 0 14px; padding: 16px 0 0; border-top: 1px solid var(--border); display: grid; gap: 8px; text-align: left; }
.login-points li { display: flex; gap: 9px; align-items: center; font-size: 12.5px; color: var(--muted); }
.login-points .fi { color: var(--green); font-size: 14px; }

/* The FundBasket mark: the basket sits still while coins drop in one by one, the
   handle rocks a little, and then everything fades and the loop starts over.
   Static with reduced motion. */
.fb-mark .fb-coin { transform-box: fill-box; transform-origin: center; }
.fb-mark .fb-basket, .fb-mark .fb-handle { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fb-mark .fb-coin { animation: fb-coin 4.6s cubic-bezier(0.34, 1.4, 0.64, 1) calc(var(--i) * 0.19s + 0.5s) infinite both; }
  .fb-mark .fb-basket { animation: fb-draw 4.6s cubic-bezier(0.22, 1, 0.36, 1) infinite both; }
  .fb-mark .fb-handle { animation: fb-draw 4.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s infinite both, fb-rock 4.6s var(--ease) infinite; }
}
/* The basket draws itself in, holds, then breathes out and back in — no hard
   cut, so the loop reads as a settle rather than a restart. */
@keyframes fb-draw {
  0% { stroke-dashoffset: 1; opacity: 1; }
  14% { stroke-dashoffset: 0; opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 1; }
  86% { stroke-dashoffset: 0; opacity: 0.18; }
  100% { stroke-dashoffset: 1; opacity: 1; }
}
@keyframes fb-coin {
  0% { transform: translateY(-4px) scale(0.5); opacity: 0; }
  9% { transform: translateY(0) scale(1); opacity: 1; }
  70% { transform: translateY(0) scale(1); opacity: 1; }
  86% { transform: translateY(1px) scale(0.9); opacity: 0; }
  100% { transform: translateY(-4px) scale(0.5); opacity: 0; }
}
@keyframes fb-rock {
  0%, 22%, 70%, 100% { transform: none; }
  8% { transform: rotate(-3.5deg); }
  15% { transform: rotate(2.5deg); }
}

/* ---- QLOOQ (qlooq.cfd — the family of apps FundBasket belongs to) ----
   Its brand: an indigo → violet → cyan tile with the "oo" mark, and the "QLOOQ .cfd" wordmark. */
:root { --qlooq-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%); --qlooq: #8b5cf6; }
.qlooq-mark {
  flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: var(--qlooq-grad); box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--qlooq) 70%, transparent);
}
.qlooq-mark svg { width: 64%; height: 64%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.qlooq-mark.sm { width: 16px; height: 16px; border-radius: 5px; box-shadow: none; }
.qlooq-mark.sm svg { stroke-width: 3; }
.qlooq-word { font-weight: 650; letter-spacing: -0.02em; }
.qlooq-tld {
  font: 600 10.5px/1 var(--mono); padding: 3px 5px; border-radius: 6px;
  color: var(--qlooq); background: color-mix(in srgb, var(--qlooq) 12%, transparent);
}
/* Login: brand chip in the top-left corner (the theme button sits top-right). */
.qlooq-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 5px; border-radius: 11px;
  color: var(--text); text-decoration: none; font-size: 13.5px;
  background: color-mix(in srgb, var(--surface) 75%, transparent); backdrop-filter: blur(12px);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--spring), box-shadow 0.25s, border-color 0.25s;
}
.qlooq-chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--qlooq) 40%, var(--border)); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--qlooq) 60%, transparent); }
.login-qlooq { position: absolute; top: 14px; left: 14px; z-index: 1; animation: rise 0.7s var(--ease) 0.3s both; }
.login-foot {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px;
  margin: 0; font-size: 12px; color: var(--faint);
}
.login-foot a { color: var(--muted); text-decoration: none; border-radius: 4px; transition: color 0.2s; }
.login-foot a:hover { color: var(--text); }
.login-foot-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.login-foot-brand:hover { color: var(--qlooq) !important; }
/* Sidebar: the QLOOQ tile mirrors the developer badge at the other end of the brand strip. */
.qlooq-badge {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; text-decoration: none;
  background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border);
  transition: box-shadow 0.25s, transform 0.25s var(--spring);
}
.qlooq-badge .qlooq-mark { width: 20px; height: 20px; border-radius: 6px; box-shadow: none; filter: saturate(0.75); transition: filter 0.25s; }
.qlooq-badge:hover { transform: translateY(-1px) scale(1.06); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--qlooq) 70%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--qlooq) 35%, var(--border)); }
.qlooq-badge:hover .qlooq-mark { filter: none; }
.qlooq-badge:active { transform: scale(0.94); }
.qlooq-badge:focus-visible { outline: 2px solid var(--qlooq); outline-offset: 2px; }

/* "Developed by" monogram in the brand strip → omkarpathak.com */
.dev-badge {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; text-decoration: none; color: var(--muted);
  background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border);
  transition: color 0.2s, box-shadow 0.25s, transform 0.25s var(--spring);
}
.dev-mark { font-size: 13px; line-height: 1; display: grid; }
.dev-badge:hover {
  color: #fff; transform: translateY(-1px) scale(1.06);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ec4899));
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.dev-badge:active { transform: scale(0.94); }
.dev-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 560px) {
  .login-card { padding: 18px 20px 18px; }
  .login-logo { width: 64px; height: 64px; }
  .login-qlooq span.qlooq-word, .login-qlooq span.qlooq-tld { display: none; }
  .login-qlooq { padding: 0 5px; }
}

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes list-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes panel-out { to { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(6px) scale(0.98); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ============================================================
   Holdings, purchases and daily P&L
   ============================================================ */
.stat-val.money { font-size: 20.5px; letter-spacing: -0.02em; }

.holdings { padding: 16px 18px 14px; margin-bottom: 14px; }
.holdings-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.holdings-head h2 { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.holdings-sub { margin-top: 3px; font-size: 11.5px; color: var(--faint); }
.holdings-sub b { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }

.lots { display: grid; }
.lot-row {
  display: grid;
  grid-template-columns: 96px 74px repeat(3, minmax(0, 1fr)) minmax(0, 1fr) 30px;
  align-items: center; gap: 8px;
  padding: 8px 6px; border-radius: 9px;
  font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lot-row + .lot-row { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.lot-row:not(.lot-head):hover { background: var(--surface-2); }
.lot-row > span:nth-child(n+2) { text-align: right; }
.lot-head {
  padding: 0 6px 6px; border: 0; font-size: 10px; font-weight: 650;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint);
}
.lot-date { color: var(--text); }
.lot-pnl.up { color: var(--green); font-weight: 600; }
.lot-pnl.down { color: var(--red); font-weight: 600; }
.lot-del { opacity: 0; transition: opacity 0.15s; }
.lot-row:hover .lot-del, .lot-row:focus-within .lot-del { opacity: 1; }
@media (hover: none) { .lot-del { opacity: 1; } }

.holding-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  font-size: 11.5px; color: var(--faint);
}
.holding-foot b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.holding-foot .up { color: var(--green); }
.holding-foot .down { color: var(--red); }
.holding-foot .spacer { flex: 1; }

.hold-empty { max-width: 54ch; padding: 2px 0 6px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* ---------- Daily P&L card ---------- */
.pnl-card { padding-bottom: 12px; margin-bottom: 14px; }
.pnl-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 27px; padding: 0 11px; border-radius: 99px;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--surface-2); color: var(--muted); white-space: nowrap;
}
.pnl-badge.up { color: var(--green); background: var(--green-soft); }
.pnl-badge.down { color: var(--red); background: var(--red-soft); }
/* The soft red badge background needs a lighter red in dark mode to stay legible. */
[data-theme="dark"] .pnl-badge.down { color: #ff8b98; }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .pnl-badge.down { color: #ff8b98; }
}
.pnl-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pnl-toggle button { height: 26px; padding: 0 11px; font-size: 11.5px; }
.pnl-table-wrap {
  max-height: 248px; overflow: auto;
  margin: 4px 18px 2px;
  border: 1px solid var(--border); border-radius: 11px;
}
.pnl-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.pnl-table th {
  position: sticky; top: 0; z-index: 1;
  padding: 7px 10px; text-align: right;
  background: var(--surface-2); color: var(--faint);
  font-size: 9.5px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase;
}
.pnl-table td {
  padding: 7px 10px; text-align: right; color: var(--muted);
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.pnl-table th:first-child, .pnl-table td:first-child { text-align: left; }
.pnl-table td:first-child { color: var(--text); }
.pnl-table tbody tr:hover { background: var(--surface-2); }
.pnl-table td.up { color: var(--green); font-weight: 600; }
.pnl-table td.down { color: var(--red); font-weight: 600; }
.pnl-empty { padding: 20px 18px; font-size: 12px; color: var(--faint); }
.chart-wrap.bars { height: 172px; }
.bars-zero { stroke: var(--border-strong); stroke-width: 1; }
.bars-guide { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.bar { fill: var(--green); opacity: 0.82; transition: opacity 0.12s; }
.bar.down { fill: var(--red); }
.bar.on { opacity: 1; }
.chart-tip b.up { color: #74e0a6; }
.chart-tip b.down { color: #ff9aa8; }
/* Dark theme flips the tooltip to a light surface, so gains/losses need darker tones. */
[data-theme="dark"] .chart-tip b.up { color: #0a6b45; }
[data-theme="dark"] .chart-tip b.down { color: #a81c33; }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .chart-tip b.up { color: #0a6b45; }
  [data-theme="system"] .chart-tip b.down { color: #a81c33; }
}

/* ---------- Fund card P&L line ---------- */
.fc-pnl {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 3px; font-size: 11.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.fc-pnl b { font-weight: 600; }
.fc-pnl b.up { color: var(--green); }
.fc-pnl b.down { color: var(--red); }

/* ---------- Purchase dialog ---------- */
.seg {
  display: inline-flex; gap: 2px; padding: 3px; justify-self: start;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2);
}
.seg button {
  height: 28px; padding: 0 13px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  transition: background 0.18s, color 0.18s;
}
.seg button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }
.seg button .fi { font-size: 12px; margin-right: 4px; }
.seg.wide { display: grid; grid-template-columns: 1fr 1fr; justify-self: stretch; }
.seg.wide button { display: inline-flex; align-items: center; justify-content: center; }
/* Redeem is the money-out side: amber when picked, never the same as Buy. */
.seg.wide #ledger-kind [data-kind="sell"][aria-pressed="true"] { color: var(--red); box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--red) 35%, var(--border)); }
.entered {
  margin: -4px 0 0; padding: 8px 11px; border-radius: 10px;
  background: var(--surface-2); font-size: 12px; color: var(--muted);
}
.entered:empty { display: none; }
.entered b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.holdings-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.danger-ghost { color: var(--red); }
.danger-ghost:hover { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.lot-kind {
  display: inline-flex; align-items: center; justify-content: center; width: fit-content;
  height: 18px; padding: 0 6px; border-radius: 5px;
  font-size: 10px; font-weight: 650; letter-spacing: 0.02em;
}
.lot-kind.buy { color: var(--green); background: var(--green-soft); }
.lot-kind.sell { color: var(--red); background: var(--red-soft); }
.lot-row.is-sell { background: color-mix(in srgb, var(--red) 4%, transparent); }
.lot-pnl.na { color: var(--faint); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.purchase-calc { font-size: 12.5px; color: var(--muted); }
.purchase-calc b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.field-hint { margin-top: -6px; font-size: 11.5px; color: var(--faint); }

/* ---------- Responsive: holdings, lots, P&L table ---------- */
@media (max-width: 860px) {
  .lot-head { display: none; }
  .lot-row {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px; padding: 10px 11px;
    background: var(--surface-2); border-radius: 10px;
    margin-bottom: 6px; border-top: 0 !important;
  }
  .lot-row > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; text-align: left; }
  .lot-row > span::before {
    content: attr(data-label);
    font-size: 10px; font-weight: 650; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--faint);
  }
  .lot-date { grid-column: 1 / -1; padding-right: 30px; }
  .lot-del { position: absolute; top: 6px; right: 4px; opacity: 1; }
  .holding-foot { gap: 4px 12px; }
}

@media (max-width: 560px) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .holdings { padding: 14px 14px 12px; }
  .chart-wrap.bars { height: 148px; }
  .pnl-table-wrap { margin: 4px 14px 2px; }
  .pnl-table { font-size: 11.5px; }
  .pnl-table th, .pnl-table td { padding: 7px 8px; }
}

/* ---------- XIRR chip in the basket hero + coloured return rows in details ---------- */
.hero-sub b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-sub b.up { color: var(--green); }
.hero-sub b.down { color: var(--red); }
.dl-row dd.up { color: var(--green); }
.dl-row dd.down { color: var(--red); }


/* ============================================================
   Polish pass — motion, centred sections, notifications, tooltips
   ============================================================ */
:root { --dur-in: 0.36s; --dur-out: 0.24s; }

/* ---------- Windows & banners: soft open / close ---------- */
.dialog[open] { animation: dialog-in var(--dur-in) var(--ease-soft) both; }
.dialog.closing { animation: dialog-out var(--dur-out) var(--ease-soft) both; }
.dialog[open]::backdrop { animation: backdrop-in 0.32s var(--ease-soft) both; }
.dialog.closing::backdrop { animation: backdrop-out var(--dur-out) var(--ease-soft) both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(14px) scale(0.965); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes dialog-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(0.975); filter: blur(2px); } }
.theme-menu { animation: panel-in 0.26s var(--ease-soft) both; transform-origin: top right; }
.theme-menu.closing { animation: panel-out var(--dur-out) var(--ease-soft) both; }
.scrim { animation: fade-in 0.28s var(--ease-soft) both; }
.scrim.out { animation: fade-out 0.26s var(--ease-soft) both; pointer-events: none; }
.sidebar { transition-duration: 0.38s; transition-timing-function: var(--ease-soft); }

/* Banners that appear and disappear with [hidden] ease in instead of popping. */
.confirm-note:not([hidden]), .confirm-list:not([hidden]), #ledger-held:not([hidden]),
.filter-reset:not([hidden]), #add-clear-picks:not([hidden]), .login-note:not(:empty),
.purchase-calc, .add-hint, .field-hint, .entered {
  animation: banner-in 0.34s var(--ease-soft) both;
}
.status, .sync { transition: background 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft), color 0.3s; }
.status-label, .status-date, #drive-label { animation: banner-in 0.3s var(--ease-soft) both; }
@keyframes banner-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.view-inner, .welcome { animation-duration: 0.5s; animation-timing-function: var(--ease-soft); }

/* ---------- Sections centred horizontally ---------- */
.basket-hero, .fund-head { justify-content: center; text-align: center; flex-wrap: wrap; }
.basket-hero .btn-secondary { margin-left: 0; }
.fund-title { flex: 0 1 auto; }
.fund-tags, .crumbs, .welcome-actions { justify-content: center; }
.stat { text-align: center; }
.stat-label { justify-content: center; }
.fund-card .fc-top, .fund-card .fc-bottom, .fc-pnl { justify-content: center; }
.fund-card { text-align: center; }
.fund-card .fc-spark { margin-left: 0; }
.step { text-align: center; }
.step-top { justify-content: center; gap: 10px; }
.chart-head, .holdings-head, .notes-head { justify-content: center; text-align: center; }
.chart-foot, .holding-foot, .pnl-tools, .ranges { justify-content: center; }
.chart-foot .spacer, .holding-foot .spacer { display: none; }
.dialog-foot { justify-content: center; }
.login-points { justify-items: center; text-align: center; }
.login-points li { justify-content: center; }
.login-foot, .about-list li { justify-content: center; }
.details h2, .details > h2 { text-align: center; }
.empty, .empty-art { margin-inline: auto; }
.top-actions { justify-content: center; }

/* ---------- Notifications ---------- */
.toasts { gap: 0; bottom: 26px; }
.toast {
  margin-top: 8px; max-height: 120px;
  padding: 9px 8px 9px 11px; gap: 11px; border-radius: 15px;
  background: color-mix(in srgb, var(--raised) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-color: color-mix(in srgb, var(--tone) 22%, var(--border));
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--tone) 6%, transparent);
  animation: toast-in 0.5s var(--ease-soft) both;
  transition: transform 0.3s var(--ease-soft), border-color 0.3s;
}
.toast:hover { transform: translateY(-1px); }
.toast.out { animation: toast-out 0.32s var(--ease-soft) both; pointer-events: none; }
.toast:not(:has(.toast-action)) { padding-right: 8px; }
.toast-icon { width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--tone) 15%, transparent); }
.toast-text { font-weight: 500; }
.toast-close {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
  color: var(--faint); transition: background 0.2s, color 0.2s, transform 0.2s var(--ease-soft);
}
.toast-close .fi { font-size: 14px; }
.toast-close:hover { background: var(--hover); color: var(--text); }
.toast-close:active { transform: scale(0.9); }
.toast-timer { height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 70%, transparent), color-mix(in srgb, var(--tone) 25%, transparent)); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(18px) scale(0.95); max-height: 0; margin-top: 0; filter: blur(4px); }
  60% { max-height: 120px; margin-top: 8px; }
  to { opacity: 1; transform: none; max-height: 120px; margin-top: 8px; filter: none; }
}
@keyframes toast-out {
  from { opacity: 1; transform: none; max-height: 120px; margin-top: 8px; }
  55% { opacity: 0; transform: translateY(8px) scale(0.97); max-height: 120px; margin-top: 8px; }
  to { opacity: 0; transform: translateY(8px) scale(0.97); max-height: 0; margin-top: 0; padding-block: 0; border-width: 0; }
}

/* ---------- Tooltips: themed card with an arrow ---------- */
.tip {
  padding: 7px 11px; border-radius: 10px; font-size: 12px; font-weight: 500; line-height: 1.45;
  background: var(--tip-bg); color: var(--tip-fg);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  transition: opacity 0.18s var(--ease-soft), transform 0.28s var(--ease-soft);
  transform: translateY(5px) scale(0.97);
  transform-origin: var(--arrow-x, 50%) 100%;
  --arrow-x: 50%;
}
.tip[data-side="bottom"] { transform: translateY(-5px) scale(0.97); transform-origin: var(--arrow-x, 50%) 0; }
.tip.show { transform: none; }
.tip::after {
  content: ""; position: absolute; left: var(--arrow-x); width: 9px; height: 9px;
  background: var(--tip-bg); border: 1px solid var(--border-strong);
  transform: translateX(-50%) rotate(45deg);
}
.tip[data-side="top"]::after { bottom: -5px; border-top: 0; border-left: 0; }
.tip[data-side="bottom"]::after { top: -5px; border-bottom: 0; border-right: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; }
}


/* ============================================================
   Polish pass 2 — section surfaces, theme cross-fade, header alignment
   ============================================================ */

/* ---------- Theme switch: everything cross-fades together ---------- */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after {
  transition: background-color 0.55s var(--ease-soft), color 0.55s var(--ease-soft),
    border-color 0.55s var(--ease-soft), box-shadow 0.55s var(--ease-soft),
    fill 0.55s var(--ease-soft), stroke 0.55s var(--ease-soft), opacity 0.3s var(--ease-soft) !important;
}

/* ---------- Top bars share one centre line ---------- */
.side-top { height: 58px; padding: 0 14px 0 16px; align-items: center; }
.side-top > * { align-self: center; }
.brand { align-items: center; height: 38px; }
.about-btn, .qlooq-badge, .dev-badge { margin: 0; }
.topbar { height: 58px; align-items: center; }
.top-actions { align-self: center; margin-left: auto; }

/* ---------- Section surfaces ---------- */
.view {
  background:
    radial-gradient(900px 380px at 12% -8%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    radial-gradient(700px 340px at 100% 0%, color-mix(in srgb, var(--green) 5%, transparent), transparent 70%);
}
.basket-hero, .fund-head {
  padding: 18px 20px; border-radius: 20px; margin-bottom: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--fc, var(--accent)) 12%, var(--card)), var(--card) 72%);
  border: 1px solid color-mix(in srgb, var(--fc, var(--accent)) 20%, var(--border));
  box-shadow: var(--shadow-sm);
}
.crumbs { margin-bottom: 12px; }

.stat { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--card)), var(--card) 75%); }
.stat:nth-child(2) { background: linear-gradient(160deg, color-mix(in srgb, #7a5cf0 9%, var(--card)), var(--card) 75%); }
.stat:nth-child(3) { background: linear-gradient(160deg, color-mix(in srgb, var(--green) 9%, var(--card)), var(--card) 75%); }
.stat:nth-child(4) { background: linear-gradient(160deg, color-mix(in srgb, var(--amber) 9%, var(--card)), var(--card) 75%); }
.stat:hover { border-color: var(--border-strong); }

.chart-card { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--card)), var(--card) 55%); }
.pnl-card { background: linear-gradient(180deg, color-mix(in srgb, var(--green) 6%, var(--card)), var(--card) 55%); }
.holdings { background: linear-gradient(180deg, color-mix(in srgb, #7a5cf0 6%, var(--card)), var(--card) 50%); }
.details { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, var(--card)), var(--card)); }
.notes-card { background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 7%, var(--card)), var(--card) 60%); }
.chart-foot, .holding-foot {
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 0 0 16px 16px;
}
.fund-card { background: linear-gradient(160deg, color-mix(in srgb, var(--fc, var(--accent)) 8%, var(--card)), var(--card) 70%); }
.step { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, var(--card)), var(--card) 75%); }
.empty { padding: 28px 22px; border-radius: 20px; border: 1px dashed var(--border-strong);
  background: color-mix(in srgb, var(--accent) 4%, var(--card)); }

/* ---------- Add-fund window: slow, soft close ---------- */
.dialog.add-dialog[open] { animation: add-in 0.42s var(--ease-soft) both; will-change: transform, opacity; }
.dialog.add-dialog.closing { animation: add-out 0.32s var(--ease-soft) both; pointer-events: none; }
.dialog.add-dialog.closing::backdrop { animation: backdrop-out 0.32s var(--ease-soft) both; }
.dialog.add-dialog.closing > * { opacity: 0; transition: opacity 0.2s var(--ease-soft); }
@keyframes add-in { from { opacity: 0; transform: translateY(22px) scale(0.975); } to { opacity: 1; transform: none; } }
@keyframes add-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(18px) scale(0.975); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   Polish pass 3 — section headers distinct from their content
   ============================================================ */
/* Title band: left-aligned title + caption, controls on the right, divider below. */
.chart-head, .holdings-head {
  display: flex; align-items: center; justify-content: space-between; text-align: left;
  gap: 12px 16px; flex-wrap: wrap; padding: 14px 18px; margin: 0;
  background: color-mix(in srgb, var(--surface-2) 62%, var(--card));
  border-bottom: 1px solid var(--border); border-radius: 16px 16px 0 0;
}
.chart-head > div:first-child, .holdings-head > div:first-child { text-align: left; min-width: 0; }
.chart-head h2, .holdings-head h2, .details h2, .notes-head h2 {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 650; letter-spacing: -0.01em; color: var(--text);
}
.chart-head h2::before, .holdings-head h2::before, .details h2::before, .notes-head h2::before {
  content: ""; flex: none; width: 3px; height: 15px; border-radius: 3px; background: var(--accent);
}
.chart-head p, .holdings-head .holdings-sub { margin: 3px 0 0 12px; font-size: 11.5px; color: var(--muted); text-align: left; }
.chart-head .ranges, .holdings-actions, .pnl-tools { justify-content: flex-end; margin-left: auto; }

/* Content sits below the band with its own breathing room. */
.chart-card .chart-wrap, .pnl-card .chart-wrap, .pnl-card .pnl-table-wrap, .pnl-card .pnl-empty { margin-top: 12px; }
.holdings .lots, .holdings .hold-empty { margin: 4px 18px 0; }
.holdings .hold-empty { padding: 14px 0 6px; }
.chart-foot, .holding-foot { justify-content: flex-start; text-align: left; margin-top: 10px; }
.chart-foot .spacer, .holding-foot .spacer { display: block; }

/* Details and notes: header band spans the card, then the content. */
.details, .notes-card { padding: 0 0 14px; overflow: hidden; }
.details h2, .notes-head {
  margin: 0 0 12px; padding: 14px 18px; text-align: left;
  background: color-mix(in srgb, var(--surface-2) 62%, var(--card));
  border-bottom: 1px solid var(--border);
}
.notes-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.details .dl, .details .details-link { margin-left: 18px; margin-right: 18px; }
.details .dl { margin-bottom: 0; }
.notes-card > textarea, .notes-card > .notes-hint { margin: 0 18px; width: calc(100% - 36px); }
.notes-card > *:not(.notes-head):not(textarea) { margin-left: 18px; margin-right: 18px; }

/* Stat tiles and cards: caption on top, value beneath, both left-aligned. */
.stat, .fund-card, .step { text-align: left; }
.stat-label { justify-content: flex-start; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; font-weight: 650; }
.stat-val { margin-top: 8px; }
.stat-sub { margin-top: 4px; }
.fund-card .fc-top, .fund-card .fc-bottom, .fc-pnl { justify-content: flex-start; }
.fund-card .fc-bottom { justify-content: space-between; }
.fund-card .fc-spark { margin-left: auto; }
.step-top { justify-content: space-between; }

/* One colour for every fund: the theme accent. */
.fund-dot { background: var(--accent); }
.holdings, .chart-card, .pnl-card { padding: 0 0 14px; }
.chart-foot, .holding-foot { margin-left: 18px; margin-right: 18px; }

/* ============================================================
   Fund page — ledger, pager, remove button, spacing
   ============================================================ */
.view { padding-bottom: 56px; }
@media (max-width: 860px) { .view { padding-bottom: 84px; } }

/* Breadcrumb row: basket on the left, remove-fund on the right. */
.crumbs { justify-content: space-between; gap: 10px; }
.crumb-remove { height: 30px; padding: 0 12px; font-size: 12px; margin-left: auto; }
.crumb-remove .fi { font-size: 12px; }

/* Ledger: every column (and its title) shares one centre line (desktop). */
@media (min-width: 861px) {
  .lot-row { grid-template-columns: 110px 92px repeat(4, minmax(0, 1fr)) 34px; justify-items: stretch; }
  .lot-row > span, .lot-row > span:nth-child(n+2) { text-align: center; }
  .lot-head > span { text-align: center; }
  .lot-row > .lot-kind, .lot-row > span > .lot-del { justify-self: center; }
  .lot-row > .lot-kind { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 70px; }
}

/* Rows-per-page dropdown + pager */
.lot-pager {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
  margin: 12px 18px 0; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 12px; color: var(--muted);
}
.lot-size { display: inline-flex; align-items: center; gap: 8px; }
.lot-size select {
  height: 30px; min-width: 64px; padding: 0 10px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--field); color: var(--text); font-size: 12px; font-weight: 550;
}
.lot-size .ts-btn { height: 30px; min-width: 66px; font-size: 12px; }
.lot-range { font-variant-numeric: tabular-nums; color: var(--faint); }
.pager { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.pager-btn {
  min-width: 30px; height: 30px; padding: 0 8px; display: inline-grid; place-items: center;
  border-radius: 9px; font-size: 12px; font-weight: 600; color: var(--muted);
  border: 1px solid transparent; font-variant-numeric: tabular-nums;
  transition: background 0.2s var(--ease-soft), color 0.2s, border-color 0.2s, transform 0.2s var(--ease-soft);
}
.pager-btn:hover:not(:disabled):not([aria-current]) { background: var(--hover); color: var(--text); }
.pager-btn:active:not(:disabled) { transform: scale(0.94); }
.pager-btn[aria-current="page"] { background: var(--accent); color: #fff; box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--accent) 70%, transparent); }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-btn .fi { font-size: 15px; }
.pager-gap { padding: 0 4px; color: var(--faint); }
@media (max-width: 560px) { .pager { margin-left: 0; width: 100%; justify-content: center; } }

/* Daily P&L line view */
.chart-zero { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.chart-tip b.up { color: #74e0a6; }
.chart-tip b.down { color: #ff8b98; }

/* The P&L table pages instead of scrolling. */
.pnl-table-wrap { max-height: none; overflow-x: auto; margin-top: 12px; }
.pnl-card .lot-pager { margin-top: 12px; }


/* Daily P&L table: ten rows in view, the rest scroll; sortable headers; first/prev/next/last pager. */
.pnl-table-wrap { max-height: 424px; overflow: auto; overscroll-behavior: contain; }
.pnl-table thead th { position: sticky; top: 0; z-index: 1; background: color-mix(in srgb, var(--surface-2) 80%, var(--card)); padding: 0; }
.th-sort {
  width: 100%; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
  padding: 9px 10px; font: inherit; font-size: 11px; font-weight: 650; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
  transition: color 0.2s var(--ease-soft), background 0.2s;
}
.pnl-table th:first-child .th-sort { justify-content: flex-start; }
.th-sort .fi { font-size: 12px; opacity: 0.55; transition: opacity 0.2s, transform 0.25s var(--ease-soft); }
.th-sort:hover { color: var(--text); background: var(--hover); }
.th-sort:hover .fi { opacity: 1; }
.th-sort.on { color: var(--accent-strong); }
.th-sort.on .fi { opacity: 1; color: var(--accent); }
.pager-status { padding: 0 8px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.pnl-table-wrap { max-height: 366px; }
@media (max-width: 860px) { .pnl-table-wrap { max-height: 336px; } }


/* Purchase / redemption markers on the Daily P&L charts */
.chart-mark { stroke: var(--card); stroke-width: 1.5; stroke-linejoin: round; }
.chart-mark.buy { fill: var(--accent); }
.chart-mark.sell { fill: var(--amber); }
.chart-mark-line { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.8; }
.tip-flow { font-weight: 600; opacity: 1 !important; }
.tip-flow.buy { color: var(--accent-strong); }
.tip-flow.sell { color: var(--amber); }
.flow-key { display: inline-flex; align-items: center; gap: 6px; }
.flow-dot { width: 0; height: 0; display: inline-block; border-left: 4px solid transparent; border-right: 4px solid transparent; margin-left: 4px; }
.flow-dot.buy { border-bottom: 7px solid var(--accent); }
.flow-dot.sell { border-top: 7px solid var(--amber); }
/* Chart tooltips follow the themed tooltip colours (light card in light mode, deep card in dark). */
.chart-tip { border: 1px solid var(--border-strong); }
.chart-tip b.up { color: var(--green) !important; }
.chart-tip b.down { color: var(--red) !important; }

/* ============================================================
   Fund header & performance strip
   ============================================================ */
/* No avatar: the title block centres on its own. */
.fund-head { justify-content: center; }
.fund-head .fund-title { flex: 0 1 auto; text-align: center; }
.fund-head .fund-meta { justify-content: center; }

/* Fund track record shown quietly beside the money tiles once purchases exist. */
.perf-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  margin: -2px 0 14px; padding: 8px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  border: 1px dashed color-mix(in srgb, var(--border-strong) 70%, transparent);
  font-size: 11.5px; color: var(--faint);
}
.perf-title { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-weight: 600; color: var(--muted); }
.perf-title .fi { font-size: 12px; color: var(--faint); }
.perf-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.perf-chip small { font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--faint); }
.perf-chip b { font: 600 12px var(--mono); color: var(--muted); }
.perf-chip b.up { color: var(--green); }
.perf-chip b.down { color: var(--red); }

/* Purchases & redemptions with nothing recorded yet */
.holdings .hold-empty {
  display: flex; align-items: flex-start; gap: 14px; max-width: none;
  margin: 16px 18px 2px; padding: 16px 18px; border-radius: 14px;
  border: 1px dashed var(--border-strong); background: color-mix(in srgb, var(--accent) 4%, var(--card));
  text-align: left;
}
.hold-empty-icon {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 11px; color: var(--accent); background: var(--accent-soft);
}
.hold-empty-icon .fi { font-size: 16px; }
.hold-empty b { display: block; font-size: 13.5px; font-weight: 650; color: var(--text); margin-bottom: 3px; }
.hold-empty p { font-size: 12.5px; line-height: 1.55; color: var(--muted); max-width: 62ch; }

/* ============================================================
   Sidebar & top bar — centred logo, dividers, active basket, themed bar
   ============================================================ */
/* Logo centred, with a divider before the baskets. */
.side-top { justify-content: center; height: 62px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.brand { flex: 0 1 auto; justify-content: center; }
.side-scroll { padding-top: 6px; }
.side-label {
  margin: 0 0 8px; padding: 8px 6px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.baskets { gap: 9px; }
.fund-list { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); margin-top: 4px; padding-top: 4px; }
.basket:not(.collapsed) .fund-list:empty { display: none; }
.side-bottom { margin-top: 0; border-radius: 0 0 17px 17px; border-width: 1px 0 0; background: var(--chrome); padding: 8px 10px 10px; }

/* The basket you are in stands out. */
.basket.active {
  position: relative;
  background: color-mix(in srgb, var(--accent) 9%, var(--basket-bg));
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow-sm);
}
.basket.active::before {
  content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.basket.active .basket-toggle { color: var(--accent-strong); }
.basket.active .basket-toggle[aria-current="page"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.basket.active[data-mode="simulated"] { border-color: color-mix(in srgb, var(--sim) 60%, var(--border)); background: color-mix(in srgb, var(--sim) 12%, var(--basket-bg)); }
.basket.active[data-mode="simulated"]::before { background: var(--sim); }
[data-theme="dark"] .basket.active .basket-toggle { color: var(--text); }

/* Content top bar: a themed header strip with its own divider. */
.topbar {
  gap: 12px; height: 62px; padding: 0 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--chrome)), var(--chrome));
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 6%, transparent);
}
.top-badges, .top-actions {
  display: flex; align-items: center; gap: 4px; height: 38px; padding: 3px;
  background: var(--card); border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-sm);
}
.top-badges { margin-right: auto; }
.top-badges > * { align-self: center; }
.top-badges .about-btn { width: 30px; height: 30px; border-radius: 9px; }
.top-badges .qlooq-badge, .top-badges .dev-badge { width: 30px; height: 30px; border-radius: 9px; box-shadow: none; }
.top-badges .qlooq-badge .qlooq-mark { width: 22px; height: 22px; }
.top-badges > * + * { position: relative; }
.top-badges > * + *::before {
  content: ""; position: absolute; left: -3px; top: 7px; bottom: 7px; width: 1px; background: var(--border);
}
.top-actions { margin-left: 0; }
.top-actions .status { background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.menu-btn { margin-right: 2px; }
@media (max-width: 560px) { .top-badges .qlooq-badge { display: none; } }

/* Empty-ledger note: even line breaks, no orphaned words. */
.hold-empty p { max-width: 70ch; text-wrap: pretty; }
.hold-empty b { text-wrap: balance; }

/* ============================================================
   Basket page — hero, funds section, per-fund delete
   ============================================================ */
.basket-hero { justify-content: flex-start; text-align: left; gap: 16px; padding: 20px 24px; flex-wrap: nowrap; }
.basket-avatar { width: 56px; height: 56px; border-radius: 17px; }
.basket-avatar .fi { font-size: 24px; }
.basket-hero-text { min-width: 0; display: grid; gap: 2px; }
.hero-eyebrow { font-size: 10.5px; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-strong); }
.basket-hero h1 { overflow-wrap: anywhere; }
.basket-hero .hero-sub { margin-top: 2px; font-size: 13px; color: var(--muted); }
.basket-hero .hero-sub b { font-weight: 650; }
.basket-hero .hero-sub b.up { color: var(--green); }
.basket-hero .hero-sub b.down { color: var(--red); }

/* Funds section: a titled card, "Add fund" on the right of the title. */
.funds-card { margin-bottom: 14px; padding-bottom: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--card)), var(--card) 40%); }
.funds-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 16px; text-align: left;
  background: color-mix(in srgb, var(--surface-2) 62%, var(--card));
  border-bottom: 1px solid var(--border); border-radius: 16px 16px 0 0;
}
.funds-head h2 { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }
.funds-head h2::before { content: ""; flex: none; width: 3px; height: 15px; border-radius: 3px; background: var(--accent); }
.funds-head p { margin: 3px 0 0 12px; font-size: 11.5px; color: var(--muted); }
.funds-card .fund-grid { padding: 0 18px; }

.fund-card-wrap { position: relative; min-width: 0; }
.fund-card-wrap .fund-card { width: 100%; height: 100%; }
.fund-card-del { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; opacity: 0; transition: opacity 0.2s var(--ease-soft), background 0.2s; z-index: 1; }
.fund-card-wrap:hover .fund-card-del, .fund-card-del:focus-visible { opacity: 1; }
@media (hover: none) { .fund-card-del { opacity: 1; } }

/* Sidebar: each fund carries its own delete button. */
.fund-row { position: relative; min-width: 0; }
.fund-row .fund-item { padding-right: 34px; }
.fund-del { position: absolute; right: 3px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 8px; opacity: 0; transition: opacity 0.15s; }
.fund-del .fi { font-size: 12px; }
.fund-row:hover .fund-del, .fund-row:focus-within .fund-del { opacity: 1; }
.fund-row:hover .fund-ret, .fund-row:focus-within .fund-ret { opacity: 0; }
@media (hover: none) { .fund-del { opacity: 1; } .fund-row .fund-ret { opacity: 0; } }
@media (max-width: 560px) { .basket-hero { padding: 16px; } .funds-card .fund-grid { padding: 0 12px; } }
/* The delete button has its own gutter, so the return figure stays visible. */
.fund-row:hover .fund-ret, .fund-row:focus-within .fund-ret { opacity: 1; }
@media (hover: none) { .fund-row .fund-ret { opacity: 1; } }


/* ============================================================
   Basket button, no divider under the title, loading states
   ============================================================ */
.side-label { border-bottom: 0; margin-bottom: 4px; padding-bottom: 8px; }
.add-basket-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px;
  border-radius: 99px; font-size: 11.5px; font-weight: 650; letter-spacing: 0; text-transform: none;
  color: var(--accent-strong); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition: background 0.2s var(--ease-soft), transform 0.2s var(--ease-soft), box-shadow 0.2s;
}
.add-basket-btn .fi { font-size: 12px; }
.add-basket-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
.add-basket-btn:active { transform: scale(0.96); }
[data-theme="dark"] .add-basket-btn { color: var(--text); }

/* Slim progress bar across the top while anything is loading. */
.progress {
  position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 120; overflow: hidden;
  opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease-soft);
}
.progress.on { opacity: 1; }
.progress span {
  position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, transparent, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
  animation: progress-run 1.2s var(--ease-soft) infinite;
}
@keyframes progress-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* Skeletons: shared shimmer for anything that is still on its way. */
.skeleton { position: relative; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 8px; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 9%, transparent), transparent);
  animation: shimmer 1.3s var(--ease-soft) infinite;
}
.skel-rows { display: grid; gap: 8px; padding: 6px 18px 12px; }
.skel-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); }
.skel-row .skeleton:first-child { width: 20px; height: 20px; border-radius: 6px; flex: none; }
.skel-lines { flex: 1; display: grid; gap: 7px; }
.skel-lines .skeleton { height: 10px; }
.skel-lines .skeleton:last-child { width: 38%; height: 8px; }
.skel-inline { display: inline-block; vertical-align: middle; height: 20px; width: 96px; }
.stat-val .skel-inline { margin-top: 2px; }
.view-inner.is-loading .fund-card .fc-spark { opacity: 0.35; }

/* ============================================================
   Login card — trust points and footer
   ============================================================ */
.login-points {
  list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 0;
  justify-items: stretch; text-align: left; overflow: hidden;
  border: 1px solid var(--border); border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 3%, var(--card));
}
.login-points li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; justify-content: start;
  gap: 12px; padding: 11px 14px; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-align: left;
}
.login-points li + li { border-top: 1px solid var(--border); }
.login-points li .fi {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
  font-size: 14px; color: var(--green); background: var(--green-soft);
}
/* A full-width rule above the footer, edge to edge of the card. */
.login-foot {
  justify-content: center; margin: 18px -32px 0; padding: 14px 32px 0;
  border-top: 1px solid var(--border);
}
@media (max-width: 560px) { .login-foot { margin-inline: -20px; padding-inline: 20px; } }

/* ============================================================
   Welcome screen — even paragraphs
   ============================================================ */
.welcome h1 { text-wrap: balance; }
.welcome > p {
  max-width: 54ch; margin-inline: auto; line-height: 1.65;
  text-wrap: balance; /* even lines, no single orphaned word like "Drive." */
}
.steps { align-items: stretch; }
.step { display: flex; flex-direction: column; }
.step b { text-wrap: balance; }
.step span:last-child { text-wrap: pretty; max-width: 30ch; }

/* ============================================================
   Full-page glass loader (replaces the old top progress line)
   ============================================================ */
.progress { display: none !important; }
.loader {
  position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 20px;
  background:
    radial-gradient(60vmax 40vmax at 20% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(50vmax 38vmax at 85% 90%, color-mix(in srgb, #7a5cf0 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--bg) 58%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.35); backdrop-filter: blur(22px) saturate(1.35);
  opacity: 0; visibility: hidden; pointer-events: none;
  /* leaves quickly; the 0.15s delay on the way in means short loads never flash it */
  transition: opacity 0.4s var(--ease-soft), visibility 0s linear 0.4s;
}
.loader.on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.45s var(--ease-soft) 0.15s, visibility 0s linear 0.15s;
}
.loader-card {
  display: grid; justify-items: center; gap: 6px; width: min(300px, 100%);
  padding: 28px 28px 24px; text-align: center; border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: var(--shadow-lg), inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(10px) scale(0.97); transition: transform 0.5s var(--ease-soft);
}
.loader.on .loader-card { transform: none; transition-delay: 0.15s; }
.loader-mark {
  width: 64px; height: 64px; margin-bottom: 8px; border-radius: 19px; display: grid; place-items: center;
  box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.loader-mark svg { width: 100%; height: 100%; display: block; border-radius: inherit; }
.loader-mark svg .fb-tile { fill: var(--accent); }
.loader-card b { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; color: var(--text); }
.loader-card p { font-size: 12.5px; color: var(--muted); min-height: 1.4em; }
.loader-bar { width: 100%; height: 4px; margin-top: 14px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); }
.loader-bar span {
  display: block; width: 42%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
  animation: loader-run 1.3s var(--ease-soft) infinite;
}
@keyframes loader-run { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }

/* ============================================================
   About dialog
   ============================================================ */
.about-body { gap: 14px; padding-bottom: 16px; }
.about-body > p:first-child { font-size: 13.5px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.about-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 3%, var(--card));
}
.about-list li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; justify-content: start;
  gap: 12px; padding: 11px 14px; font-size: 12.8px; line-height: 1.5; color: var(--muted); text-align: left;
}
.about-list li + li { border-top: 1px solid var(--border); }
.about-list li .fi {
  width: 32px; height: 32px; margin: 0; display: grid; place-items: center; border-radius: 10px;
  font-size: 14px; color: var(--accent); background: var(--accent-soft);
}
.about-list li span { text-wrap: pretty; }
.about-note {
  margin: 0; padding: 11px 14px; border-radius: 12px; font-size: 11.8px !important; line-height: 1.55;
  color: var(--muted) !important; text-wrap: pretty;
  background: color-mix(in srgb, var(--amber) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--amber) 22%, var(--border));
}
.about-dialog .dialog-foot { justify-content: center; }

/* ============================================================
   Icons sit on the same centre line as their labels
   ============================================================ */
.fi { display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle; }
.fi::before { display: block; line-height: 1; }
.btn-primary, .btn-secondary, .btn-danger, .add-fab, .add-basket-btn, .sync, .status, .filter-reset, .toast-action, .crumb-remove {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.btn-primary, .btn-secondary, .btn-danger, .add-fab, .add-basket-btn, .sync, .filter-reset { gap: 8px; }
.add-fab .fi, .btn-primary .fi, .btn-secondary .fi, .add-basket-btn .fi, .sync .fi, .sync svg { flex: none; }
.top-badges > *, .top-actions > * { display: inline-flex; align-items: center; justify-content: center; align-self: center; }
.top-badges .icon-btn .fi, .top-actions .icon-btn .fi, .top-badges .dev-mark { margin: 0; width: 100%; height: 100%; }
.top-badges .qlooq-badge .qlooq-mark { margin: 0; }
.status { gap: 7px; }
.status .dot, .status-label, .status-sep, .status-date { align-self: center; line-height: 1; }
.sync-icon { margin: 0; }

/* ---------- Tooltips live in the top layer (popover) so modals never cover them ---------- */
.tip[popover] {
  inset: auto; margin: 0; overflow: visible; max-height: none;
  border: 1px solid var(--border-strong);
}
/* ---------- Version badge after the logo ---------- */
.brand-ver {
  flex: none; align-self: center; padding: 2px 7px; border-radius: 99px;
  font: 600 10px/1.4 var(--mono); letter-spacing: 0.04em; white-space: nowrap;
  color: var(--accent-strong); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
[data-theme="dark"] .brand-ver { color: var(--text); }

/* ============================================================
   Top bar pills follow the theme instead of plain white
   ============================================================ */
.top-badges, .top-actions {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--chrome)), color-mix(in srgb, var(--accent) 7%, var(--chrome)));
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset, var(--shadow-sm);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.top-actions .status {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, var(--border));
}
.top-actions .status[data-state="error"] { background: color-mix(in srgb, var(--red) 12%, var(--surface)); }
.top-badges .qlooq-badge, .top-badges .dev-badge, .top-badges .about-btn { background: transparent; }
.top-badges .qlooq-badge:hover, .top-badges .dev-badge:hover, .top-badges .about-btn:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.top-badges > * + *::before { background: color-mix(in srgb, var(--accent) 22%, var(--border)); }
.top-actions .sync:hover, .top-actions .icon-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* ============================================================
   Plain content top bar; logo strip matches the account strip
   ============================================================ */
.topbar { background: none; border-bottom: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.side-top { background: var(--chrome); border-bottom: 1px solid var(--border); }

/* The page tint runs under the top bar too, so the bar dissolves into the content. */
.main {
  background:
    radial-gradient(900px 380px at 12% -4%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(700px 340px at 100% 0%, color-mix(in srgb, var(--green) 5%, transparent), transparent 70%),
    var(--surface);
}
.view { background: none; }
.topbar { background: transparent; }

/* ============================================================
   Add funds — current NAV on each row
   ============================================================ */
.add-result .ar-nav { flex: none; align-self: center; display: grid; justify-items: end; gap: 1px; min-width: 74px; text-align: right; }
.add-result .ar-nav b { font: 600 13px/1.2 var(--mono); letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.add-result .ar-nav small { font-size: 10px; color: var(--faint); letter-spacing: 0.01em; }
.add-result .ar-nav b.skeleton { display: block; width: 58px; height: 13px; }
.add-result .ar-nav .ar-nav-na { color: var(--faint); font-weight: 500; }
.add-result.added .ar-nav { opacity: 0.7; }

/* ============================================================
   Basket growth chart, green vs red days
   ============================================================ */
.growth-card { margin-bottom: 14px; padding-bottom: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--card)), var(--card) 55%); }
.growth-card .chart-wrap { margin-top: 12px; }
.growth-area { fill: url(#growth-fill); }
.growth-invested { fill: none; stroke: var(--amber); stroke-width: 1.8; stroke-dasharray: 5 4; stroke-linejoin: round; opacity: 0.95; }
.growth-card .chart-line { stroke-width: 2.4; }
.growth-card .chart-fill stop:first-child { stop-color: var(--accent); stop-opacity: 0.22; }
.growth-card .chart-fill stop:last-child { stop-color: var(--accent); stop-opacity: 0; }
.growth-key { display: inline-block; width: 14px; height: 0; margin-right: 6px; border-top: 2.4px solid var(--accent); border-radius: 2px; vertical-align: middle; }
.growth-key.invested { border-top: 2px dashed var(--amber); }
.flow-key b { color: var(--text); font-weight: 600; margin-left: 2px; }

.day-split { display: grid; gap: 8px; margin: 12px 18px 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 55%, var(--card)); }
.day-split-nums { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 12.5px; color: var(--muted); }
.day-stat { display: inline-flex; align-items: center; gap: 6px; }
.day-stat b { font: 650 13.5px var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.day-stat.up b { color: var(--green); }
.day-stat.down b { color: var(--red); }
.day-stat em { font-style: normal; font-size: 11.5px; color: var(--faint); }
.day-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.day-dot.up { background: var(--green); }
.day-dot.down { background: var(--red); }
.day-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); }
.day-bar span { display: block; height: 100%; transition: width 0.5s var(--ease-soft); }
.day-bar .up { background: var(--green); }
.day-bar .down { background: var(--red); }
.day-bar .flat { background: color-mix(in srgb, var(--text) 22%, transparent); }

/* ============================================================
   NAV refresh button (inside the status pill)
   ============================================================ */
.nav-refresh { width: 28px; height: 28px; border-radius: 8px; color: var(--muted); flex: none; }
.nav-refresh .fi { font-size: 14px; transition: transform 0.5s var(--ease-soft); }
.nav-refresh:hover { color: var(--accent-strong); }
.nav-refresh:hover .fi { transform: rotate(90deg); }
.nav-refresh.spinning { color: var(--accent); pointer-events: none; }
.nav-refresh.spinning .fi { animation: spin 0.9s linear infinite; }

/* ============================================================
   Basket growth — on/off checkboxes and the profit band
   ============================================================ */
.growth-card .chart-foot { gap: 8px 10px; }
.growth-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 8px;
  border-radius: 99px; cursor: pointer; font-size: 11.5px; color: var(--muted); user-select: none;
  border: 1px solid var(--border); background: var(--card);
  transition: background 0.2s var(--ease-soft), border-color 0.2s, color 0.2s, opacity 0.2s;
}
.growth-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.growth-toggle b { color: var(--text); font-weight: 600; }
.growth-toggle b.up { color: var(--green); }
.growth-toggle b.down { color: var(--red); }
.gt-box {
  width: 16px; height: 16px; flex: none; display: grid; place-items: center; border-radius: 5px;
  border: 1.5px solid var(--border-strong); background: var(--card); color: transparent;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.gt-box .fi { font-size: 9px; }
.growth-toggle.on { color: var(--text); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.growth-toggle.on .gt-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.growth-toggle:not(.on) { opacity: 0.7; }
.growth-toggle:not(.on) b { color: var(--faint); }
.growth-toggle:hover { border-color: var(--border-strong); }
.growth-toggle:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.growth-key.profit { width: 14px; height: 9px; border: 0; border-radius: 3px; background: linear-gradient(90deg, var(--green), var(--red)); opacity: 0.85; }
.growth-gain { fill: color-mix(in srgb, var(--green) 24%, transparent); stroke: none; }
.growth-loss { fill: color-mix(in srgb, var(--red) 26%, transparent); stroke: none; }

/* Profit on its own scale: the gain line itself, filled from the zero baseline. */
.growth-profit-line { fill: none; stroke: var(--green); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Growth chart: appearing and switching ---------- */
.growth-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: growth-draw 1.2s var(--ease-soft) 0.05s forwards; }
@keyframes growth-draw { to { stroke-dashoffset: 0; } }
.growth-fade { animation: growth-fade 0.9s var(--ease-soft) 0.25s both; }
@keyframes growth-fade { from { opacity: 0; } to { opacity: 1; } }
.growth-card .chart-wrap svg g { transition: none; }
.growth-toggle, .gt-box, .growth-toggle b { transition: background 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft), color 0.3s var(--ease-soft), opacity 0.3s var(--ease-soft), transform 0.2s var(--ease-soft); }
.growth-toggle:active { transform: scale(0.97); }
.gt-box .fi { transform: scale(0.4); opacity: 0; transition: transform 0.25s var(--spring), opacity 0.2s; }
.growth-toggle.on .gt-box .fi { transform: none; opacity: 1; }

/* ============================================================
   Motion everywhere: charts appearing, charts changing, buttons switching
   ============================================================ */

/* ---------- Charts ---------- */
.chart-wrap { position: relative; }
/* The previous drawing fades away over the new one (range buttons, Bars / Line switch). */
.chart-ghost { position: absolute; inset: 0; z-index: 2; pointer-events: none; animation: ghost-out 0.42s var(--ease-soft) forwards; }
.chart-ghost svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes ghost-out { to { opacity: 0; transform: translateY(-3px) scale(0.997); } }

/* Daily P&L bars grow out of the zero line, one after another. */
.bar-grow { transform-box: fill-box; animation: bar-grow 0.75s var(--ease-soft) both; }
.bar-grow.up { transform-origin: 50% 100%; }
.bar-grow.down { transform-origin: 50% 0%; }
@keyframes bar-grow { from { transform: scaleY(0); opacity: 0; } }

/* The latest-value dot pops in once the line has reached it. */
.growth-pop { transform-box: fill-box; transform-origin: center; animation: growth-pop 0.5s var(--spring) 1s both; }
@keyframes growth-pop { from { transform: scale(0); opacity: 0; } }

/* Sparklines on the fund cards draw themselves. */
.spark-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: growth-draw 1.1s var(--ease-soft) 0.3s forwards; }

/* Whatever a view switch puts in the Daily P&L / growth card slides in softly. */
.pnl-card #pnl-body > *, .day-split { animation: rise 0.45s var(--ease-soft) both; }

/* ---------- Buttons ---------- */
button { transition: background-color 0.22s var(--ease-soft), color 0.22s var(--ease-soft), border-color 0.22s var(--ease-soft),
  box-shadow 0.25s var(--ease-soft), transform 0.2s var(--ease-soft), opacity 0.2s var(--ease-soft); }
.btn-primary:active:not(:disabled), .btn-secondary:active:not(:disabled), .btn-danger:active:not(:disabled),
.icon-btn:active:not(:disabled), .seg button:active, .ranges button:active, .pager-btn:active:not(:disabled),
.add-basket-btn:active, .sync:active, .link-btn:active, .theme-menu button:active { transform: scale(0.96); }
.btn-primary:hover:not(:disabled), .btn-secondary:hover:not(:disabled) { transform: translateY(-1px); }
.btn-primary:disabled, .btn-secondary:disabled { transition: opacity 0.25s var(--ease-soft); }

/* Segmented controls and range buttons: the chosen one pops into place. */
.seg button[aria-pressed="true"], .ranges button[aria-pressed="true"], .type-toggle [aria-checked="true"], .icon-opt[aria-checked="true"], .pager-btn[aria-current="page"] {
  animation: seg-pop 0.36s var(--ease-soft) backwards;
}
@keyframes seg-pop { from { transform: scale(0.88); opacity: 0.55; box-shadow: none; } }
.seg button, .ranges button { transition: background-color 0.28s var(--ease-soft), color 0.28s var(--ease-soft), box-shadow 0.28s var(--ease-soft), transform 0.2s var(--ease-soft); }

/* ============================================================
   Basket page: Daily P&L by fund (same table style as Daily P&L)
   ============================================================ */
.fund-pnl-card { margin-bottom: 14px; padding-bottom: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--green) 5%, var(--card)), var(--card) 55%); }
.fund-pnl-wrap { overflow-x: auto; }
.fund-pnl-table { min-width: 100%; width: max-content; }
.fund-pnl-table th:first-child, .fund-pnl-table td:first-child { position: sticky; left: 0; z-index: 2; background: var(--card); text-align: left; white-space: nowrap; }
.fund-pnl-table thead th:first-child { z-index: 3; background: color-mix(in srgb, var(--surface-2) 80%, var(--card)); }
.fund-pnl-table .th-label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fund-pnl-table td { white-space: nowrap; font-weight: 600; }
.fund-pnl-table td .up { color: var(--green); }
.fund-pnl-table td .down { color: var(--red); }
.fund-pnl-table .cell-na { color: var(--faint); font-weight: 400; }
.fund-pnl-table td:first-child { color: var(--text); font-weight: 500; }
.fund-pnl-table .col-total { background: color-mix(in srgb, var(--accent) 6%, transparent); border-left: 1px solid var(--border); }
.fund-pnl-table thead th:last-child { background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }

/* ============================================================
   Growth by fund: plain lines
   ============================================================ */
.lines-path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lines-path.dashed { stroke-width: 2.2; stroke-dasharray: 6 5; }
.lines-path.dashed.growth-draw { stroke-dasharray: 1; }
.lines-end { stroke: var(--card); stroke-width: 1.5; }
.lines-tip { min-width: 150px; text-align: left; }
.lines-tip > b { display: block; font: 600 12px var(--mono); margin-bottom: 4px; opacity: 0.85; }
.lines-tip-row { display: flex !important; align-items: center; gap: 7px; padding: 1.5px 0; white-space: nowrap; opacity: 1 !important; }
.lines-tip-row i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.lines-tip-row em { font: 600 12px var(--mono); font-style: normal; margin-left: auto; padding-left: 14px; }
.lines-foot { gap: 8px 8px; }
.lines-toggle .lt-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-swatch { width: 16px; height: 0; border-top: 3px solid var(--lc); border-radius: 3px; flex: none; }
.line-swatch.dashed { border-top-style: dashed; border-top-width: 2.5px; }
.lines-card .chart-wrap { height: 300px; }

/* Purchase / redemption marks on the Growth by fund lines */
.lines-mark { stroke: var(--card); stroke-width: 1.2; stroke-linejoin: round; fill: var(--lc); }
.lines-mark.sell { fill: var(--card); stroke: var(--lc); stroke-width: 1.8; }
.lines-tip-event { display: block !important; margin: 0 0 3px 15px; font-size: 11px; font-weight: 600; opacity: 1 !important; }
.lines-tip-event.buy { color: var(--accent-strong); }
.lines-tip-event.sell { color: var(--amber); }
.lines-mark { opacity: 0.8; stroke-width: 1; }
.lines-mark.sell { opacity: 1; stroke-width: 1.8; }


/* ============================================================
   Add funds: NAV label instead of the rupee sign
   ============================================================ */
.add-result .ar-nav .nav-tag { margin-right: 5px; font: 600 9.5px var(--font); letter-spacing: 0.08em; color: var(--faint); vertical-align: 1px; }

/* ============================================================
   Multi-select dropdowns (the Add funds filters): a checkbox list
   ============================================================ */
.ts-popup.multi { padding: 0 6px 6px; }
.ts-search-wrap {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px;
  margin: 0 -6px 4px; padding: 8px 12px; background: var(--raised); border-bottom: 1px solid var(--border);
}
.ts-search-wrap .fi { font-size: 12px; color: var(--faint); }
.ts-search {
  flex: 1; min-width: 0; height: 26px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12.5px;
}
.ts-search::placeholder { color: var(--faint); }
.ts-popup.multi { padding-top: 6px; }
.ts-popup.multi:has(.ts-search-wrap) { padding-top: 0; }
.ts-option.multi { display: flex; align-items: center; gap: 10px; }
.ts-option.multi::after { content: none !important; }
.ts-check {
  width: 16px; height: 16px; flex: none; display: grid; place-items: center; border-radius: 5px;
  border: 1.5px solid var(--border-strong); background: var(--card); color: transparent;
  transition: background 0.18s var(--ease-soft), border-color 0.18s var(--ease-soft), color 0.18s;
}
.ts-check .fi { font-size: 9px; transform: scale(0.4); opacity: 0; transition: transform 0.25s var(--spring), opacity 0.2s; }
.ts-option.multi.on .ts-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.ts-option.multi.on .ts-check .fi { transform: none; opacity: 1; }
.ts-option.multi.on { color: var(--text); font-weight: 600; }
.ts-option.multi.all { color: var(--muted); font-weight: 500; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 8px 8px 0 0; margin-bottom: 3px; }
.ts-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-none { padding: 14px 10px; font-size: 12px; color: var(--faint); text-align: center; }
/* More than one choice: the button shows a count, tinted so it reads as "filtering". */
.ts-btn.has-many, .ts-btn.ts-multi:not(.is-empty) { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--field)); }
.ts-btn.has-many .ts-label { font-weight: 600; color: var(--accent-strong); }
[data-theme="dark"] .ts-btn.has-many .ts-label { color: var(--text); }

/* ============================================================
   Google Drive pill: the logo shows while saving and when saved
   ============================================================ */
.sync[data-state="on"] .sync-drive, .sync[data-state="busy"] .sync-drive { display: block; }
.sync[data-state="on"] .sync-icon, .sync[data-state="busy"] .sync-icon { display: none; }
.sync-check {
  position: absolute; left: 19px; bottom: 1px; width: 12px; height: 12px; border-radius: 50%;
  display: none; place-items: center; background: var(--green); color: #fff;
  box-shadow: 0 0 0 2px var(--chrome, var(--surface)); transform: scale(0); opacity: 0;
}
.sync-check .fi { font-size: 7px; }
.sync[data-state="on"] .sync-check { display: grid; }

/* Saving: the logo bobs gently while the upload runs. */
.sync[data-state="busy"] .sync-drive { animation: drive-bob 0.9s var(--ease-soft) infinite; filter: saturate(0.9); }
@keyframes drive-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.08); } }

/* Saved: a hop, a green ring, and a tick that pops in and fades. */
.sync.saved-pop { color: var(--green); }
.sync.saved-pop .sync-drive { animation: drive-saved 0.75s var(--spring); }
@keyframes drive-saved { 0% { transform: scale(1); } 35% { transform: scale(1.4) rotate(-9deg); } 70% { transform: scale(0.94) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
.sync.saved-pop .sync-check { animation: check-pop 2.4s var(--ease-soft) both; }
@keyframes check-pop {
  0% { transform: scale(0); opacity: 0; }
  14% { transform: scale(1.35); opacity: 1; }
  24% { transform: scale(1); opacity: 1; }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.7); opacity: 0; }
}
.sync.saved-pop[data-state="on"]::after {
  content: ""; position: absolute; left: 10px; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--green); pointer-events: none; opacity: 0;
  animation: save-ring 0.9s var(--ease-soft) both;
}
@keyframes save-ring { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }

/* ============================================================
   Totals under the Purchases & redemptions table
   ============================================================ */
.hold-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 0;
  margin: 14px 18px 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 45%, var(--card));
}
.hs-item {
  display: grid; align-content: start; gap: 3px; padding: 12px 14px; min-width: 0; text-align: left;
  border-left: 1px solid var(--border);
}
.hs-item:first-child { border-left: 0; }
.hs-label { font-size: 10.5px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.hs-value { font: 650 16px/1.2 var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); overflow-wrap: anywhere; }
.hs-value.up { color: var(--green); }
.hs-value.down { color: var(--red); }
.hs-sub { font-size: 11px; color: var(--faint); }
/* When the strip wraps onto a second row, keep the dividers tidy. */
@media (max-width: 700px) {
  .hold-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-item:nth-child(odd) { border-left: 0; }
  .hs-item:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
@media (max-width: 700px) { .hs-item:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; } }


/* ============================================================
   Daily P&L: the view switch lives next to the title
   ============================================================ */
.pnl-titlebar { min-width: 0; flex: 1 1 auto; }
.pnl-titleline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.pnl-titleline .pnl-toggle { flex: none; margin: 0; }
.pnl-card .chart-head > .pnl-tools { margin-left: auto; justify-content: flex-end; }
/* ============================================================
   Polish pass 4 — overall look and feel
   Calmer light surfaces, a branded primary action, quieter
   scrollbars, steadier numbers and a little depth in dark mode.
   ============================================================ */

/* Light theme: same indigo accent, less lavender wash on the surfaces. */
[data-theme="light"] {
  --bg: #f4f4f9;
  --surface-2: #f0eff6;
  --field: #fafafd;
  --basket-bg: #f4f3f9;
  --chrome: #efeef6;
  --hover: rgba(45, 35, 110, 0.05);
  --border: #e3e1ee;
  --border-strong: #cfcbe1;
  --muted: #565274;
}
@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --bg: #f4f4f9;
    --surface-2: #f0eff6;
    --field: #fafafd;
    --basket-bg: #f4f3f9;
    --chrome: #efeef6;
    --hover: rgba(45, 35, 110, 0.05);
    --border: #e3e1ee;
    --border-strong: #cfcbe1;
    --muted: #565274;
  }
}
:root { --brand-grad: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #b04ee8)); }

/* Primary actions wear the brand instead of plain black / white. */
.btn-primary {
  color: #fff; background: var(--brand-grad);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 16px -8px color-mix(in srgb, var(--accent) 75%, transparent);
}
.btn-primary:hover:not(:disabled) { opacity: 1; filter: brightness(1.07); }
.btn-primary:disabled { filter: saturate(0.4); box-shadow: none; }

.add-fab {
  color: #fff; background: var(--brand-grad);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 12px 30px -10px color-mix(in srgb, var(--accent) 80%, transparent), var(--shadow);
}
.add-fab:hover {
  filter: brightness(1.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 16px 36px -10px color-mix(in srgb, var(--accent) 90%, transparent), 0 0 0 4px var(--accent-soft);
}
.add-fab .fi { transition: transform 0.35s var(--spring); }
.add-fab:hover .fi, .add-fab[aria-expanded="true"] .fi { transform: rotate(90deg); }

/* Scrollbars: a faint thumb that firms up when you are over the area. */
.side-scroll, .view, .add-results, .dialog-body, .ts-popup, .fund-pnl-wrap, .pnl-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 12%, transparent) transparent;
}
.side-scroll:hover, .view:hover, .add-results:hover, .dialog-body:hover, .ts-popup:hover, .fund-pnl-wrap:hover, .pnl-table-wrap:hover {
  scrollbar-color: color-mix(in srgb, var(--text) 26%, transparent) transparent;
}

/* Depth: a hairline top highlight on dark surfaces so cards read as raised. */
[data-theme="dark"] :is(.card, .stat, .fund-card, .basket-hero, .fund-head, .hold-summary) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-sm);
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"] :is(.card, .stat, .fund-card, .basket-hero, .fund-head, .hold-summary) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-sm);
  }
}
.fund-card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow); }

/* Stat tiles respond to the pointer like the fund cards do. */
.stat { transition: transform 0.22s var(--ease-soft), border-color 0.2s, box-shadow 0.25s; }
.stat:hover { transform: translateY(-1px); }

/* Sidebar baskets: quiet edges, a clear hover, softer list rows. */
.basket { border-color: color-mix(in srgb, var(--border) 55%, transparent); }
.basket:not(.active):hover { border-color: var(--border-strong); }
.fund-item { transition: background-color 0.18s var(--ease-soft), color 0.18s var(--ease-soft); }

/* Numbers line up in every table and ledger. */
.pnl-table, .fund-pnl-table, .lot-row, .hold-summary, .fund-card .fc-nav, .basket-pnl, .fund-ret {
  font-variant-numeric: tabular-nums;
}
.lot-row, .pnl-table tbody tr, .fund-pnl-table tbody tr { transition: background-color 0.15s var(--ease-soft); }

/* Text: headings break evenly, paragraphs avoid lonely last words. */
h1, h2, h3 { text-wrap: balance; }
p, .stat-sub, .holdings-sub { text-wrap: pretty; }

/* Focus: a soft halo with the outline, so keyboard focus is easy to spot. */
:focus-visible { outline-color: color-mix(in srgb, var(--accent) 85%, transparent); box-shadow: 0 0 0 4px var(--accent-soft); }
/* Phones: the top bar keeps only icons, so nothing overlaps. The live-NAV
   chip shrinks to its status dot; its words stay readable to screen readers. */
@media (max-width: 560px) {
  .topbar { gap: 8px; }
  .top-actions { gap: 4px; margin-left: auto; }
  .top-actions .status { width: 30px; height: 30px; padding: 0; justify-content: center; flex: none; }
  .top-actions .status .status-label, #drive-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .top-actions .sync { padding: 0 9px; }
}
/* ============================================================
   Design refresh — modern, calm, easy on the eyes
   Geist type, neutral graphite / cool-grey surfaces with a soft
   iris accent, flatter cards, and slower ease-out motion.
   This layer sits last so it wins over the earlier passes.
   ============================================================ */
:root, [data-theme="light"] {
  --bg: #eceef2;
  --surface: #f8f9fb;
  --surface-2: #f0f2f5;
  --card: #ffffff;
  --raised: #ffffff;
  --field: #ffffff;
  --basket-bg: #ffffff;
  --chrome: #f8f9fb;
  --hover: rgba(17, 24, 39, 0.045);
  --border: #e3e6eb;
  --border-strong: #d0d5dd;
  --text: #12141a;
  --muted: #535a68;
  --faint: #8a909c;
  --accent: #5b5bd6;
  --accent-strong: #4646bd;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --green: #158a5a;
  --green-soft: color-mix(in srgb, var(--green) 11%, transparent);
  --amber: #b9740b;
  --amber-soft: color-mix(in srgb, var(--amber) 12%, transparent);
  --red: #d33c45;
  --red-soft: color-mix(in srgb, var(--red) 10%, transparent);
  --tip-bg: #ffffff;
  --tip-fg: #12141a;
  --scrim: rgba(15, 18, 26, 0.36);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 20px -8px rgba(16, 24, 40, 0.12);
  --shadow-lg: 0 2px 6px rgba(16, 24, 40, 0.05), 0 28px 64px -20px rgba(16, 24, 40, 0.24);
  --ease: cubic-bezier(0.22, 0.9, 0.24, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.3, 1.35, 0.6, 1);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --brand-grad: linear-gradient(135deg, #6262e0, #7b5cf0);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0a0b0d;
  --surface: #101114;
  --surface-2: #181a1f;
  --card: #14161a;
  --raised: #1c1e24;
  --field: #0e1013;
  --basket-bg: #15171b;
  --chrome: #101114;
  --hover: rgba(255, 255, 255, 0.05);
  --border: #23262c;
  --border-strong: #32363e;
  --text: #ecedef;
  --muted: #a3a8b2;
  --faint: #6f747e;
  --accent: #8484f4;
  --accent-strong: #a9abff;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --green: #3fcf8e;
  --green-soft: color-mix(in srgb, var(--green) 14%, transparent);
  --amber: #efb14e;
  --amber-soft: color-mix(in srgb, var(--amber) 14%, transparent);
  --red: #f4727a;
  --red-soft: color-mix(in srgb, var(--red) 14%, transparent);
  --tip-bg: #22252b;
  --tip-fg: #ecedef;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -10px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  --brand-grad: linear-gradient(135deg, #6c6cf0, #8a68f5);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --bg: #0a0b0d;
    --surface: #101114;
    --surface-2: #181a1f;
    --card: #14161a;
    --raised: #1c1e24;
    --field: #0e1013;
    --basket-bg: #15171b;
    --chrome: #101114;
    --hover: rgba(255, 255, 255, 0.05);
    --border: #23262c;
    --border-strong: #32363e;
    --text: #ecedef;
    --muted: #a3a8b2;
    --faint: #6f747e;
    --accent: #8484f4;
    --accent-strong: #a9abff;
    --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
    --green: #3fcf8e;
    --green-soft: color-mix(in srgb, var(--green) 14%, transparent);
    --amber: #efb14e;
    --amber-soft: color-mix(in srgb, var(--amber) 14%, transparent);
    --red: #f4727a;
    --red-soft: color-mix(in srgb, var(--red) 14%, transparent);
    --tip-bg: #22252b;
    --tip-fg: #ecedef;
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px -10px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 30px 80px -20px rgba(0, 0, 0, 0.7);
    --brand-grad: linear-gradient(135deg, #6c6cf0, #8a68f5);
    color-scheme: dark;
  }
}

/* ---------- Type ---------- */
body {
  font: 400 14.5px/1.55 var(--font);
  letter-spacing: -0.006em;
  background: var(--bg);
}
h1 { letter-spacing: -0.03em; font-weight: 650; }
h2, h3 { letter-spacing: -0.015em; font-weight: 600; }
.stat-val, .stat-val.money { font-family: var(--font); font-weight: 600; letter-spacing: -0.025em; }

/* ---------- Shell: two calm panes on a quiet backdrop ---------- */
.app { gap: 8px; padding: 8px; }
.pane { border-radius: 16px; border-color: var(--border); box-shadow: var(--shadow-sm); }
.main {
  background:
    radial-gradient(1100px 460px at 50% -14%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
    var(--surface);
}
.side-top, .side-bottom { background: var(--surface); }
.side-label { border-bottom-color: var(--border); }

/* ---------- Surfaces: flat cards, one quiet tint on the hero ---------- */
.card, .stat, .stat:nth-child(2), .stat:nth-child(3), .stat:nth-child(4),
.chart-card, .pnl-card, .holdings, .details, .notes-card, .fund-card, .step,
.funds-card, .growth-card, .fund-pnl-card {
  background: var(--card);
}
.card, .stat, .fund-card, .step, .hold-summary { border-color: var(--border); }
.basket-hero, .fund-head {
  background:
    radial-gradient(600px 220px at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    var(--card);
  border-color: var(--border);
}
.chart-foot, .holding-foot { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }

/* Stat tiles: a thin coloured rule on the left says what each one is. */
.stat::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 0 2px 2px 0;
  background: var(--accent); opacity: 0.55;
}
.stats .stat:nth-child(2)::before { background: #8a68f5; }
.stats .stat:nth-child(3)::before { background: var(--green); }
.stats .stat:nth-child(4)::before { background: var(--amber); }

/* ---------- Sidebar ---------- */
.basket { background: var(--basket-bg); border-color: var(--border); box-shadow: var(--shadow-sm); }
.basket.active {
  background: color-mix(in srgb, var(--accent) 6%, var(--basket-bg));
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
}
.fund-item.active { background: var(--accent-soft); }

/* ---------- Controls ---------- */
.btn-secondary { background: var(--card); border-color: var(--border); box-shadow: var(--shadow-sm); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); }
.seg { background: var(--surface-2); border-color: var(--border); }
.seg button[aria-pressed="true"] { background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--border); }
.ranges button[aria-pressed="true"] { color: var(--text); }
.tag.plan { color: var(--accent-strong); }

/* ---------- Motion: slower, softer, ease-out everywhere ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view-inner { animation: rise 0.55s var(--ease-soft) both; }
.view > .view-inner > * { animation: rise 0.6s var(--ease-soft) both; }
.view > .view-inner > *:nth-child(2) { animation-delay: 0.04s; }
.view > .view-inner > *:nth-child(3) { animation-delay: 0.08s; }
.view > .view-inner > *:nth-child(4) { animation-delay: 0.12s; }
.view > .view-inner > *:nth-child(5) { animation-delay: 0.16s; }
.view > .view-inner > *:nth-child(6) { animation-delay: 0.2s; }
.view > .view-inner > *:nth-child(n+7) { animation-delay: 0.24s; }
.card, .stat, .fund-card, .basket, .btn-secondary, .btn-primary, .icon-btn, .fund-item, .seg button, .ranges button {
  transition-timing-function: var(--ease-soft);
}
.card { transition: border-color 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft); }
.card:hover { border-color: color-mix(in srgb, var(--border-strong) 70%, var(--border)); }
.fund-card:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; }
}
/* Summary strip numbers match the stat tiles above them. */
.hs-value { font-family: var(--font); font-weight: 600; letter-spacing: -0.02em; }
/* ============================================================
   Theme switch — one snapshot, revealed in a circle from the
   theme button (or a soft cross-fade when there is no button)
   ============================================================ */
.theme-reveal::view-transition-old(root),
.theme-reveal::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-reveal::view-transition-old(root) { z-index: 1; }
.theme-reveal::view-transition-new(root) { z-index: 2; }
.theme-fade::view-transition-old(root),
.theme-fade::view-transition-new(root) { animation-duration: 0.5s; animation-timing-function: var(--ease-soft); }
/* Pointer events pass through while the reveal plays. */
::view-transition { pointer-events: none; }
/* ============================================================
   Flat & calm — new mark, no gradients, richer dark theme
   ============================================================ */

/* ---------- Dark theme: cool slate with clear depth steps ---------- */
[data-theme="dark"] {
  --bg: #0b0c10;
  --surface: #111318;
  --surface-2: #1a1d24;
  --card: #161920;
  --raised: #1e222a;
  --field: #0f1115;
  --basket-bg: #161920;
  --chrome: #111318;
  --hover: rgba(200, 210, 255, 0.05);
  --border: #252932;
  --border-strong: #353a46;
  --text: #e8eaef;
  --muted: #a0a6b3;
  --faint: #6d7381;
  --accent: #8e90f7;
  --accent-strong: #b4b6ff;
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --green: #45cc90;
  --green-soft: color-mix(in srgb, var(--green) 13%, transparent);
  --amber: #e9b456;
  --amber-soft: color-mix(in srgb, var(--amber) 13%, transparent);
  --red: #f27e87;
  --red-soft: color-mix(in srgb, var(--red) 13%, transparent);
  --tip-bg: #232731;
  --tip-fg: #e8eaef;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -10px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --bg: #0b0c10;
    --surface: #111318;
    --surface-2: #1a1d24;
    --card: #161920;
    --raised: #1e222a;
    --field: #0f1115;
    --basket-bg: #161920;
    --chrome: #111318;
    --hover: rgba(200, 210, 255, 0.05);
    --border: #252932;
    --border-strong: #353a46;
    --text: #e8eaef;
    --muted: #a0a6b3;
    --faint: #6d7381;
    --accent: #8e90f7;
    --accent-strong: #b4b6ff;
    --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
    --green: #45cc90;
    --green-soft: color-mix(in srgb, var(--green) 13%, transparent);
    --amber: #e9b456;
    --amber-soft: color-mix(in srgb, var(--amber) 13%, transparent);
    --red: #f27e87;
    --red-soft: color-mix(in srgb, var(--red) 13%, transparent);
    --tip-bg: #232731;
    --tip-fg: #e8eaef;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -10px rgba(0, 0, 0, 0.5);
  }
}
/* Solid fill for buttons and the logo tile: deep enough for white text in both themes. */
:root, [data-theme="light"] { --accent-solid: #5b5bd6; }
[data-theme="dark"] { --accent-solid: #6466ec; }
@media (prefers-color-scheme: dark) { [data-theme="system"] { --accent-solid: #6466ec; } }

/* ---------- The mark: a basket holding three rising bars ---------- */
.fb-mark .fb-tile { fill: var(--accent-solid); }
.fb-mark .fb-weave { stroke: var(--accent-solid); }
.fb-mark .fb-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.brand-mark, .loader-mark { box-shadow: none; }
.login-logo { filter: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Sidebar: the bars rise when the app opens, then breathe — each dips and
     springs back in turn, with a long rest so it never pulls focus. */
  .brand-mark .fb-bar {
    animation:
      fb-rise 0.7s var(--ease-soft) calc(0.15s + var(--i) * 0.09s) both,
      fb-breathe 4.8s var(--ease-soft) calc(1.6s + var(--i) * 0.14s) infinite;
  }  /* Loader and sign-in: the bars keep rising and settling, gently. */
  .loader-mark .fb-bar, .login-logo .fb-bar { animation: fb-grow 2.8s var(--ease-soft) calc(var(--i) * 0.14s) infinite both; }
}
@keyframes fb-rise { from { transform: scaleY(0.2); opacity: 0; } }
@keyframes fb-grow {
  0% { transform: scaleY(0.2); opacity: 0; }
  22%, 72% { transform: none; opacity: 1; }
  92%, 100% { transform: scaleY(0.2); opacity: 0; }
}

/* ---------- No gradients: flat, quiet surfaces ---------- */
body, .main, .view, .login { background: var(--bg); }
.main { background: var(--surface); }
.view { background: none; }
.basket-hero, .fund-head { background: var(--card); }
.orbs { display: none; }
.welcome-art { background: var(--accent-soft); }
.top-badges, .top-actions {
  background: var(--card); border-color: var(--border); box-shadow: var(--shadow-sm);
}
.top-actions .status { background: var(--surface-2); }

.btn-primary, .add-fab, .add-fab[aria-expanded="true"] {
  background: var(--accent-solid); color: #fff; border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled), .add-fab:hover {
  filter: none; background: color-mix(in srgb, var(--accent-solid) 88%, #fff);
}
.add-fab { box-shadow: var(--shadow); }
.add-fab:hover { box-shadow: var(--shadow), 0 0 0 4px var(--accent-soft); }

.qlooq-mark { background: var(--qlooq); box-shadow: none; }
.qlooq-badge:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qlooq) 35%, var(--border)); }
.dev-badge:hover { background: var(--accent-solid); }

.toast-timer { background: color-mix(in srgb, var(--tone, var(--accent)) 55%, transparent); }
.loader { background: color-mix(in srgb, var(--bg) 72%, transparent); }
.loader-card { background: var(--card); border-color: var(--border); box-shadow: var(--shadow-lg); }
.loader-bar span { background: var(--accent-solid); }

/* Chart fills: a faint, even wash instead of a strong fade. */
.chart-fill stop:first-child, .growth-card .chart-fill stop:first-child { stop-opacity: 0.12; }
.chart-fill stop:last-child, .growth-card .chart-fill stop:last-child { stop-opacity: 0.02; }
/* Filled accent controls carrying white text use the deeper solid accent. */
.add-result.picked .ar-check, .growth-toggle.on .gt-box, .ts-option.multi.on .ts-check {
  background: var(--accent-solid); border-color: var(--accent-solid);
}
.pager-btn[aria-current="page"] { background: var(--accent-solid); box-shadow: none; }.brand-mark svg .fb-tile, .loader-mark svg .fb-tile, .login-logo svg .fb-tile { fill: var(--accent-solid); }
/* Profit / loss areas: a lighter, even wash so the line leads. */
.growth-gain { fill: color-mix(in srgb, var(--green) 14%, transparent); }
.growth-loss { fill: color-mix(in srgb, var(--red) 15%, transparent); }.growth-key.profit { background: linear-gradient(90deg, var(--green) 50%, var(--red) 50%); opacity: 0.8; }@keyframes fb-breathe {
  0%, 52%, 100% { transform: none; opacity: 1; }
  64% { transform: scaleY(0.35); opacity: 0.55; }
  80% { transform: scaleY(1.06); opacity: 1; }
  88% { transform: none; }
}
/* ============================================================
   Loading screen, sign-in and sync — the VerLogs model
   ============================================================ */

/* ---------- Loading screen: the animated mark, a message, steps and a progress line ---------- */
.boot {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center; padding: 20px;
  background: var(--bg); color: var(--muted); font-size: 13.5px;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot.done .boot-card { transform: scale(1.04); filter: blur(2px); }
.boot.overlay {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* Only shows if loading takes a moment, so fast reloads don't flicker. */
.boot-card {
  display: grid; justify-items: center; gap: 6px;
  animation: rise 0.6s var(--ease) 0.25s both;
  transition: transform 0.45s var(--ease), filter 0.45s var(--ease);
}
.boot-art { display: block; width: 76px; height: 76px; margin-bottom: 12px; border-radius: 22px; }
.boot-art svg { width: 100%; height: 100%; display: block; }
.boot-art svg .fb-tile { fill: var(--accent-solid); }
@media (prefers-reduced-motion: no-preference) {
  .boot-art .fb-bar { animation: fb-grow 2.8s var(--ease-soft) calc(var(--i) * 0.14s) infinite both; }
  .boot-art { animation: boot-float 2.8s var(--ease-soft) infinite; }
}
@keyframes boot-float { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
.boot-line { display: flex; align-items: baseline; margin: 0; min-height: 1.5em; font-size: 15px; font-weight: 550; color: var(--text); }
#boot-msg { display: inline-block; }
.boot-dots { display: inline-flex; gap: 3px; margin-left: 3px; }
.boot-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.25; animation: boot-dot 1.2s var(--ease) infinite; }
.boot-dots i:nth-child(2) { animation-delay: 0.15s; }
.boot-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes boot-dot { 0%, 60%, 100% { opacity: 0.25; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.boot-bar { position: relative; width: 160px; height: 3px; margin-top: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.boot-bar span {
  position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit; background: var(--accent-solid);
  animation: boot-run 1.4s var(--ease) infinite;
}
@keyframes boot-run { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* Step checklist: every step stays readable — upcoming, current and finished. */
.boot-steps {
  list-style: none; margin: 14px 0 4px; padding: 14px 16px; display: grid; gap: 10px;
  min-width: 300px; max-width: min(380px, calc(100vw - 48px));
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
  animation: rise 0.45s var(--ease) both;
}
.boot-steps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.4; color: var(--faint); transition: color 0.35s var(--ease); }
.step-label { min-width: 0; overflow-wrap: anywhere; }
.step-mark {
  position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--border-strong); color: transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--spring);
}
.step-mark .fi { font-size: 10px; line-height: 1; display: grid; }
.boot-steps li[data-state="active"] { color: var(--text); font-weight: 550; }
.boot-steps li[data-state="active"] .step-mark { border-color: color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
.boot-steps li[data-state="done"] { color: var(--muted); }
.boot-steps li[data-state="done"] .step-mark { background: var(--green); border-color: var(--green); color: #fff; animation: step-pop 0.4s var(--spring); }
@keyframes step-pop { from { transform: scale(0.6); } }

/* ---------- Screens cross-fade and settle from a slight zoom ---------- */
.screen { transition: opacity 0.45s var(--ease), transform 0.55s var(--ease); }
.screen.entering, .screen.leaving { opacity: 0; transform: scale(0.985); }

/* ---------- Sign-in, as in VerLogs: soft drifting light behind a frosted card ---------- */
.login .orbs { display: block; }
.login-card {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg);
}
.login-logo { filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--accent) 34%, transparent)); }
.login .qlooq-mark { background: var(--qlooq-grad); }

/* ---------- Online / offline chip ---------- */
.net {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; flex: none;
  border-radius: 99px; font-size: 12px; font-weight: 500; color: var(--muted);
  background: var(--surface-2); cursor: default; user-select: none;
  transition: color 0.3s, box-shadow 0.3s, background 0.3s;
}
.net-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--green); transition: background 0.3s; }
.net-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: net-ping 2.4s var(--ease) infinite; }
.net[data-state="offline"] { color: var(--red); background: color-mix(in srgb, var(--red) 11%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 30%, transparent); }
.net[data-state="offline"] .net-dot { background: var(--red); }
.net[data-state="offline"] .net-dot::after { animation-duration: 1.2s; }

/* ---------- Drive pill: the extra states ---------- */
.sync[data-state="pending"] .sync-icon { color: var(--faint); }
.sync[data-state="offline"] { color: var(--red); background: color-mix(in srgb, var(--red) 11%, transparent); }
.sync[data-state="offline"] .sync-icon { color: var(--red); }
.sync[data-state="offline"]:hover { background: color-mix(in srgb, var(--red) 17%, transparent) !important; color: var(--red) !important; }

@media (max-width: 560px) {
  .top-actions .net { width: 30px; height: 30px; padding: 0; justify-content: center; }
  #net-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 420px) {
  .boot-steps { min-width: 0; width: calc(100vw - 48px); }
}/* Medium widths: the Online chip shrinks to its dot so the NAV date keeps its room. */
@media (max-width: 1100px) {
  .top-actions .net { width: 28px; padding: 0; justify-content: center; }
  #net-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* ============================================================
   Add fund button: only once the app is on screen
   ============================================================ */
.add-fab {
  transition: opacity 0.4s var(--ease-soft), transform 0.5s var(--spring), visibility 0s, box-shadow 0.25s, background 0.2s;
}
body:not(.in-app) .add-fab {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(18px) scale(0.92);
  transition: opacity 0.2s var(--ease-soft), transform 0.2s var(--ease-soft), visibility 0s linear 0.2s;
}

/* ============================================================
   Weekly P&L card and per-purchase gain
   ============================================================ */
.week-card { margin-bottom: 14px; padding-bottom: 14px; }
.week-card .chart-wrap { margin-top: 12px; }
.week-table { margin-top: 14px; }
.lot-gain { display: grid; justify-items: end; gap: 1px; line-height: 1.25; }
.lot-gain b { font-weight: 600; font-variant-numeric: tabular-nums; }
.lot-gain small { font-size: 10.5px; font-weight: 500; color: var(--faint); white-space: nowrap; }

/* ============================================================
   Add funds on phones: filters fold away, the list gets the screen
   ============================================================ */
.filters-toggle { display: none; }
@media (max-width: 860px) {
  .dialog.add-dialog { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
  .add-dialog #add-sub { display: none; }
  .add-dialog .add-head { padding: 12px 14px 8px; }
  .add-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .add-toolbar .search-field { height: 40px; }
  .filters-toggle {
    display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
    border-radius: 11px; border: 1px solid var(--border); background: var(--field);
    font-size: 13px; font-weight: 600; color: var(--muted);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .filters-toggle .fi { font-size: 12px; }
  .filters-toggle.has-filters, .add-dialog.filters-open .filters-toggle {
    color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft);
  }
  .filters-count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: inline-grid; place-items: center;
    font-size: 10.5px; font-weight: 700; color: #fff; background: var(--accent-solid);
  }
  .add-filters { grid-column: 1 / -1; }
  /* Folded: only "Add to" stays, on one compact row. */
  .add-dialog:not(.filters-open) .add-filters > .filter:not(.only-basket),
  .add-dialog:not(.filters-open) .add-filters > .filter-reset { display: none; }
  .add-dialog:not(.filters-open) .filter.only-basket { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; }
  .add-dialog:not(.filters-open) .filter.only-basket > span { flex: none; }
  .add-dialog:not(.filters-open) .filter.only-basket > :last-child { flex: 1; min-width: 0; }
  .add-dialog.filters-open .add-filters { animation: banner-in 0.3s var(--ease-soft) both; }
  .add-results { min-height: 0; }
  .add-result { padding-top: 10px; padding-bottom: 10px; }
}/* While the Add funds window is open its launcher steps aside (it would show through the footer). */
.add-fab[aria-expanded="true"] { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.9); }
/* Purchases & redemptions: sortable column headers, centred like the cells below them. */
.lot-head > span[role="columnheader"] { display: flex; justify-content: center; }
.lot-head .th-sort { width: auto; justify-content: center; padding: 6px 8px; border-radius: 8px; font-size: 10px; letter-spacing: 0.07em; }
/* Weekly P&L table view sits where the bars were. */
.week-card > .week-table { margin-top: 12px; padding: 0 2px; }