/* Souppe Studio -- visual portfolio builder.
   Brand-aligned with souppe.ai (single source of truth: souppe.ai/css/styles.css).
   The :root block mirrors the canonical Souppe design tokens; the studio's
   existing rules reference legacy aliases (--blue / --navy / --ink / ...), so
   those are remapped onto the brand tokens here -- recoloring the whole app to
   brand without rewriting every rule. */

/* Self-hosted brand fonts (no Google Fonts), fetched from souppe.ai. If the
   cross-origin fetch is blocked the system-ui fallback in the font stacks
   applies (graceful degradation); same-origin once the studio is hosted on a
   souppe.ai subdomain. */
@font-face {
  font-family: 'Manrope';
  src: url('https://souppe.ai/assets/fonts/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('https://souppe.ai/assets/fonts/Mulish-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 900;
  font-display: swap;
}

:root {
  /* ---- Canonical Souppe brand tokens (souppe.ai/css/styles.css :root) ---- */
  --color-bg: #FFFFFF;
  --color-bg-tinted: #F6F8FD;
  --color-bg-dark: #000A1E;
  --color-bg-dark-light: #0A1A3A;
  --color-text: #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted: #94A3B8;
  --color-blue: #0644EE;
  --color-teal: #03F6D1;
  --color-mid-blue: #5982F3;
  --color-cyan: #0DCEE3;
  --color-mint: #01FFCD;
  --gradient-primary: linear-gradient(135deg, var(--color-blue), var(--color-teal));
  --gradient-glow: linear-gradient(135deg, #0381F6, #03F6D1);
  --card-border: #E2E8F0;
  --card-border-hover: #CBD5E1;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 6px 24px rgba(0, 0, 0, 0.04);
  --card-shadow-hover: 0 12px 40px rgba(6, 68, 238, 0.10), 0 4px 12px rgba(0, 0, 0, 0.04);
  --font-heading: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body: 'Mulish', system-ui, -apple-system, sans-serif;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Legacy studio aliases, remapped onto the brand ---- */
  --navy: var(--color-bg-dark);
  --navy-2: var(--color-bg-dark-light);
  --ink: var(--color-text);
  --muted: var(--color-text-secondary);
  --line: var(--card-border);
  --bg: var(--color-bg-tinted);
  --panel: var(--color-bg);
  --blue: var(--color-blue);
  --blue-soft: #E8EEFF;
  --pink: #f0607f;
  --teal: var(--color-teal);
  --green: #059669;
  --amber: #8B5A00;
  --red: #DC2626;
  --shadow: var(--card-shadow);
  --radius: var(--radius-md);
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
/* Headings / prominent labels use the brand display face. */
.rail-logo, .panel-title, .modal-title, .metric .value, .stat-mini .value,
.score-hero .big, .radar-comp, .sugg-ticker, .regime-row .rg .v {
  font-family: var(--font-heading);
}

.shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.app {
  display: grid;
  grid-template-columns: 220px 1fr;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.app.rail-collapsed { grid-template-columns: 64px 1fr; }

/* ---- Left rail ---- */
.rail {
  background: linear-gradient(180deg, var(--navy), var(--navy-2));
  color: #cdd7ea;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 6px;
  overflow-y: auto;
}
.rail-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 20px; color: #fff; margin-bottom: 8px;
}
/* The Souppe 4-circle emblem (souppe.ai/assets/symbol.svg), white on the dark rail. */
.rail-logo .dot { width: 34px; height: 30px; flex: none; border-radius: 0;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 57'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M29 36C29 45.9411 37.0589 54 47 54C56.9411 54 65 45.9411 65 36C65 26.0589 56.9411 18 47 18C37.0589 18 29 26.0589 29 36ZM6 48C6 52.9706 10.0294 57 15 57C19.9706 57 24 52.9706 24 48C24 43.0294 19.9706 39 15 39C10.0294 39 6 43.0294 6 48ZM36 14C32.134 14 29 10.866 29 7C29 3.13401 32.134 0 36 0C39.866 0 43 3.13401 43 7C43 10.866 39.866 14 36 14ZM0 20C0 27.1797 5.8203 33 13 33C20.1797 33 26 27.1797 26 20C26 12.8203 20.1797 7 13 7C5.8203 7 0 12.8203 0 20Z' fill='%23FFFFFF'/%3E%3C/svg%3E"); }
.rail-top { display: flex; align-items: center; justify-content: space-between; }
.rail-collapse { cursor: pointer; color: #9fb0d4; font-size: 18px; padding: 2px 7px; border-radius: 8px; }
.rail-collapse:hover { background: rgba(255,255,255,.08); color: #fff; }
.ri-icon { width: 24px; text-align: center; flex: none; font-size: 15px; }
.ri-label { min-width: 0; overflow: hidden; }
.app.rail-collapsed .ri-label,
.app.rail-collapsed .rail-section,
.app.rail-collapsed .rail-mini { display: none; }
.app.rail-collapsed .rail { padding: 18px 8px; }
.app.rail-collapsed .rail-item { justify-content: center; gap: 0; padding: 9px 0; }
.app.rail-collapsed .rail-logo { justify-content: center; }
.app.rail-collapsed .rail-top { flex-direction: column-reverse; gap: 10px; }
.rail-section { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: #7e8db0; margin: 14px 6px 4px; }
.rail-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 10px; cursor: pointer; font-size: 14px; color: #cdd7ea;
  border: 1px solid transparent;
}
.rail-item:hover { background: rgba(255,255,255,.06); }
.rail-item.active { background: rgba(47,109,246,.22); color: #fff; border-color: rgba(124,162,255,.4); }
.rail-portfolio { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.rail-portfolio .meta { font-size: 11px; color: #7e8db0; }
.rail-spacer { flex: 1; }
.rail-mini { font-size: 11px; color: #7e8db0; }
.rail-del { color:#8a96b5; cursor:pointer; font-size:13px; }
.rail-del:hover { color:#ff9ba3; }

/* ---- Main grid ---- */
.main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) minmax(200px, 290px);
  grid-template-columns: 1.25fr 1fr 340px;
  grid-template-areas:
    "topbar topbar topbar"
    "explorer portfolio suggestion"
    "explorer stats stats";
  gap: 14px;
  padding: 14px;
  min-width: 0;
  overflow: hidden;
}
.topbar { grid-area: topbar; }
.zone-explorer { grid-area: explorer; }
.zone-portfolio { grid-area: portfolio; }
.zone-suggestion { grid-area: suggestion; }
.zone-stats { grid-area: stats; }

.panel {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 50px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none;
}
.panel-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.panel-sub { font-size: 12px; color: var(--muted); }
.panel-body { padding: 12px 14px; overflow: auto; min-height: 0; flex: 1; }

/* ---- Top bar ---- */
.topbar {
  display: flex; align-items: center; gap: 12px;
}
.search {
  flex: 1; position: relative;
}
.search input {
  width: 100%; padding: 11px 14px 11px 38px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; font-size: 14px; outline: none;
  box-shadow: var(--shadow);
}
.search input:focus { border-color: var(--blue); }
.search .icon { position: absolute; left: 13px; top: 11px; color: var(--muted); }
.search-results {
  position: absolute; top: 46px; left: 0; right: 0; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  max-height: 320px; overflow: auto; z-index: 40;
}
.search-result { padding: 9px 14px; cursor: pointer; display:flex; justify-content:space-between; gap:10px; }
.search-result:hover { background: var(--blue-soft); }
.search-result .tk { font-weight: 600; }
.search-result .sec { font-size: 11px; color: var(--muted); }

.btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 10px 14px; border-radius: 11px; font-size: 13px; font-weight: 600;
  cursor: pointer; box-shadow: var(--shadow); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn { font-family: var(--font-heading); border-radius: var(--radius-sm); transition: all var(--transition-base); }
.btn:hover { border-color: var(--card-border-hover); }
.btn:disabled { opacity: .55; cursor: default; }
/* Primary = the canonical Souppe gradient, hover swaps teal->blue (souppe.ai .btn--primary). */
.btn-primary {
  background: var(--gradient-primary); border-color: transparent; color: #fff;
  position: relative; overflow: hidden; z-index: 0;
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--color-teal), var(--color-blue));
  opacity: 0; transition: opacity var(--transition-base); z-index: -1;
}
.btn-primary:hover { border-color: transparent; }
.btn-primary:hover::before { opacity: 1; }
.btn-success { background: var(--green); border-color: var(--green); color: #fff; }
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-secondary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-ghost { background: transparent; box-shadow: none; border-color: transparent; color: var(--muted); }
.spinner {
  width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.5);
  border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite;
}
.btn-ghost .spinner, .btn .spinner { border-color: rgba(6,68,238,.3); border-top-color: var(--blue); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Souppe brand processing animation (the 4-circle emblem, alive) ----
   Pure CSS, mirrors souppe.ai accredited.php / the §4 spec: the group rotates
   6s, each circle pulses 2s and cycles the rainbow 4s, staggered per circle. */
.studio-spinner { position: relative; width: 72px; height: 64px; margin: 0 auto;
  animation: studio-spin 6s linear infinite; }
.studio-spinner__circle { position: absolute; border-radius: 50%;
  animation: studio-pulse 2s ease-in-out infinite, studio-rainbow 4s linear infinite; }
.studio-spinner__circle--lg     { width: 28px; height: 28px; top: 14px; right: 0;   animation-delay: 0s, 0s; }
.studio-spinner__circle--md     { width: 20px; height: 20px; top: 4px;  left: 0;    animation-delay: .5s, -1s; }
.studio-spinner__circle--sm-mid { width: 14px; height: 14px; bottom: 0; left: 4px;  animation-delay: 1s, -2s; }
.studio-spinner__circle--sm     { width: 10px; height: 10px; top: 0;    left: 22px; animation-delay: 1.5s, -3s; }
@keyframes studio-spin   { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes studio-pulse  { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes studio-rainbow {
  0%   { background: #ff6b6b; } 14%  { background: #ffa36b; } 28%  { background: #ffd96b; }
  42%  { background: #6bffa3; } 57%  { background: #6bd4ff; } 71%  { background: #a36bff; }
  85%  { background: #ff6bdb; } 100% { background: #ff6b6b; }
}
.studio-loading__text { font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: var(--color-text); margin-top: 18px; }
.studio-loading__sub  { font-size: 14px; color: var(--color-text-muted); margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .studio-spinner, .studio-spinner__circle { animation-duration: 0s, 6s; }
}

/* ---- Bubble canvas ---- */
.bubble-canvas { position: relative; width: 100%; height: 100%; min-height: 280px; overflow: hidden; }
.bubble {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; font-weight: 600; cursor: grab; user-select: none;
  padding: 6px; line-height: 1.05; box-shadow: 0 4px 12px rgba(18,38,73,.18);
  border: 2px solid rgba(255,255,255,.35); transition: filter .12s, transform .12s;
  will-change: transform;
}
.bubble:hover { filter: brightness(1.06); }
.bubble:active { cursor: grabbing; }
.bubble.group { box-shadow: 0 6px 18px rgba(18,38,73,.22); }
.bubble .blabel { overflow: hidden; max-height: 100%; }
.bubble .bmeta { font-size: 10px; font-weight: 500; opacity: .85; margin-top: 2px; }
.bubble-tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--navy); color: #fff; padding: 6px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 500; box-shadow: 0 6px 20px rgba(14,31,58,.28);
  white-space: nowrap; max-width: 340px; transform: translate(-50%, -100%);
}
.breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.breadcrumb .crumb { color: var(--blue); cursor: pointer; font-weight: 600; }
.breadcrumb .crumb:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--muted); }
.explorer-crumbs { padding: 9px 16px 0; }
.legend-types { display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--muted); padding: 9px 16px 12px; }
.legend-types .sw { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:middle; }

/* ---- Portfolio area ---- */
.dropzone { position: relative; height: 100%; min-height: 240px; }
.dropzone.dragover { outline: 3px dashed var(--blue); outline-offset: -8px; background: var(--blue-soft); border-radius: 12px; }
.empty-hint { color: var(--muted); font-size: 13px; text-align: center; margin-top: 40px; padding: 0 30px; }
.pf-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); margin-bottom: 8px; cursor: grab; background: #fff;
}
.pf-item:hover { border-color: #c9d3e6; }
.pf-chip { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.pf-name { flex: 1; min-width: 0; }
.pf-name .t { font-weight: 600; font-size: 13px; }
.pf-name .s { font-size: 11px; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.pf-weight { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--blue); }
.pf-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.pf-x { color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; }
.pf-x:hover { color: var(--red); }
.pf-bar { height: 5px; border-radius: 3px; background: var(--blue); opacity:.5; margin-top:6px; }

/* ---- Suggestion pane ---- */
.sugg-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-align: center;
  cursor: grab; background: linear-gradient(180deg,#fff,#fbfdff);
}
.sugg-bubble {
  width: 96px; height: 96px; border-radius: 50%; margin: 6px auto 12px;
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700;
  background: radial-gradient(circle at 32% 30%, #ff9fb2, var(--pink)); font-size: 15px;
}
.sugg-name { font-size: 13px; color: var(--ink); min-height: 34px; }
.sugg-benefit { display:inline-block; margin-top:8px; font-size: 11px; font-weight:700; padding: 3px 9px;
  border-radius: 999px; background: var(--blue-soft); color: var(--blue); }
.sugg-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.sugg-nav .arrow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center; cursor:pointer; background:#fff; }
.sugg-nav .arrow:hover { border-color: var(--blue); color: var(--blue); }
.sugg-regime { display:flex; justify-content:space-around; font-size:11px; color:var(--muted); margin-top:10px; }
.sugg-regime b { display:block; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- Stats panel ---- */
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(120px,1fr)) 1.2fr 1.2fr 1.2fr; gap: 14px; align-items: start; }
.metric { background: #fbfdff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.metric .label { font-size: 11px; color: var(--muted); }
.metric .value { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; }
.metric .value.pos { color: var(--green); }
.metric .value.neg { color: var(--red); }
.metric .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.donut-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; }
.donut-title { font-size: 11px; color: var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.donut-legend { display:flex; flex-direction:column; gap:2px; font-size:11px; max-height:96px; overflow:auto; width:100%; }
.donut-legend .row { display:flex; align-items:center; gap:6px; }
.donut-legend .sw { width:9px; height:9px; border-radius:2px; flex:none; }
.donut-legend .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.donut-legend .pc { color: var(--muted); font-variant-numeric: tabular-nums; }

.score-hero { display:flex; align-items:center; gap:14px; }
.score-ring { width: 74px; height: 74px; flex:none; }
.score-hero .big { font-size: 26px; font-weight: 800; }
.subscores { display:grid; grid-template-columns: repeat(2,1fr); gap:6px 14px; margin-top:8px; }
.subscore { display:flex; justify-content:space-between; font-size:12px; }
.subscore .nm { color: var(--muted); }
.subscore .vl { font-weight:700; font-variant-numeric: tabular-nums; }
.regime-row { display:flex; justify-content:space-around; text-align:center; }
.regime-row .rg .v { font-size:18px; font-weight:800; font-variant-numeric: tabular-nums; }
.regime-row .rg .l { font-size:11px; color:var(--muted); }
.deep-status { font-size:12px; color: var(--muted); display:flex; align-items:center; gap:8px; }

/* ---- Modal ---- */
.modal-back { position: fixed; inset: 0; background: rgba(14,31,58,.45); display:flex;
  align-items:center; justify-content:center; z-index: 100; }
.modal { background:#fff; border-radius: 16px; width: min(560px, 92vw); max-height: 86vh; overflow:auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line); }
.modal-title { font-weight:800; font-size:16px; }
.modal-body { padding: 16px 18px; }
.modal-foot { padding: 14px 18px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; align-items:center; }
.field { margin-bottom: 14px; }
.field label { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; font-weight:600; }
.field input, .field select { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:10px; font-size:14px; }
.scheme-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:8px; }
.scheme-opt { border:1px solid var(--line); border-radius:10px; padding:10px; cursor:pointer; font-size:13px; }
.scheme-opt:hover { border-color: var(--blue); }
.scheme-opt.active { border-color: var(--blue); background: var(--blue-soft); }
.scheme-opt .tag { font-size:10px; color:var(--muted); }
.manual-row { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.manual-row .nm { flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.manual-row input { width:90px; }
.status-msg { font-size:12px; margin-right:auto; }
.status-msg.pending { color: var(--muted); }
.status-msg.success { color: var(--green); }
.status-msg.failure { color: var(--red); }
.export-rows { max-height: 300px; overflow:auto; border:1px solid var(--line); border-radius:10px; }
.export-rows table { width:100%; border-collapse: collapse; font-size:12px; }
.export-rows th, .export-rows td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); }
.export-rows td.w { text-align:right; font-variant-numeric: tabular-nums; }

.toast-wrap { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 200;
  display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { background: var(--ink); color:#fff; padding:10px 16px; border-radius:10px; font-size:13px; box-shadow: var(--shadow); }
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }

.loading-screen { display:flex; height:100vh; align-items:center; justify-content:center; flex-direction:column; gap:14px; color:var(--muted); }
.warn-line { font-size: 11px; color: var(--amber); padding: 4px 14px; }
.muted { color: var(--muted); }

/* ---- Suggestion card (simplified) ---- */
.sugg-ticker { font-weight: 800; font-size: 16px; margin-top: 2px; }
.sugg-hint { font-size: 11px; color: var(--muted); margin-top: 12px; }

/* ---- Compact stats bar (radar + metrics + mini donuts) ---- */
.stats-body { padding: 10px 14px; overflow: hidden; }
.stats-row { display: flex; gap: 16px; align-items: flex-start; height: 100%; overflow: hidden; flex-wrap: nowrap; }
.stats-block { flex: none; }
.radar-block { text-align: center; width: 188px; }
.radar-comp { font-size: 12px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.radar-placeholder { height: 188px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; text-align: center; padding: 0 14px; gap: 8px; }
.stat-mini-grid { display: grid; grid-template-columns: repeat(2, 108px); gap: 8px; align-content: start; }
.stat-mini { background: #fbfdff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.stat-mini .label { font-size: 10px; color: var(--muted); }
.stat-mini .value { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat-mini .value.pos { color: var(--green); }
.stat-mini .value.neg { color: var(--red); }
.stat-mini .sub { font-size: 10px; color: var(--muted); margin-top: 1px; }
.mini-donuts { display: flex; gap: 12px; }
.mini-donuts .donut-wrap { width: 84px; }

/* ---- Portfolio (spheres) ---- */
.portfolio-body { display: flex; flex-direction: column; padding: 0; }
.portfolio-body .dropzone { flex: 1 1 auto; min-height: 240px; }

/* ---- Search sections ---- */
.search-section { padding: 7px 14px 2px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); }

/* ---- Set Weights: custom highlight + constituent preview ---- */
.scheme-opt.custom { border-color: var(--green); background: #eafaf2; }
.scheme-opt.custom.active { border-color: var(--green); background: #d6f5e6; box-shadow: 0 0 0 2px rgba(31,175,107,.18); }
.scheme-opt.custom .tag { color: var(--green); }
.preview-head { margin-top: 16px; font-size: 12px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 8px; }
.weight-preview { margin-top: 8px; max-height: 220px; overflow: auto; border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 10px; }
.wp-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.wp-name { flex: 1 1 auto; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-bar-wrap { flex: 0 0 90px; height: 7px; background: #eef2f8; border-radius: 4px; overflow: hidden; }
.wp-bar { display: block; height: 100%; background: var(--blue); border-radius: 4px; }
.wp-val { flex: 0 0 50px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px;
  font-weight: 700; color: var(--blue); }

/* ---- Footer / status bar ---- */
#statusbar {
  flex: none; display: flex; align-items: center; gap: 10px;
  background: var(--navy); color: #cdd9e5; font-size: 12px;
  padding: 6px 18px; border-top: 1px solid rgba(255,255,255,.06);
}
#status-text { flex: 0 0 auto; max-width: 46%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#status-text.error { color: #ffb4ab; }
#status-text.ok { color: #9be7c4; }
.status-sep { color: #5b6b86; flex: none; }
.toolbar-hint { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #9fb0d4; }
.status-progress { flex: 2 1 auto; display: flex; align-items: center; gap: 8px; min-width: 120px; }
.status-progress-label { flex: none; color: #cdd9e5; }
.status-progress-track { flex: 1 1 auto; min-width: 60px; height: 8px; border-radius: 5px;
  overflow: hidden; background: rgba(255,255,255,.16); }
.status-progress-bar { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--blue); transition: width .3s ease; }
.status-progress-track.indeterminate .status-progress-bar { width: 35%; animation: df-prog-indef 1.1s ease-in-out infinite; }
@keyframes df-prog-indef { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }
.status-progress-detail { flex: none; font-variant-numeric: tabular-nums; color: #9fb0d4; }