/* =====================================================
   HOMEPAGE PERSONALIZED v2
   Reference: DM Mono + DM Sans editorial minimal
   ===================================================== */

/* ── Variables ──────────────────────────────────────── */
:root {
  --hp-orange: #f7931a;
  --hp-blue: #60aff0;
  --hp-green: #4ade80;
  --hp-red: #f87171;
  --hp-bg: #0d0f12;
  --hp-surface: rgba(255,255,255,0.03);
  --hp-border: rgba(255,255,255,0.07);
  --hp-text: #e8e8ec;
  --hp-muted: rgba(255,255,255,0.28);
}

/* ── Keyframes ──────────────────────────────────────── */

/* ── Card Shell (matches .card from template.css) ───── */
.hp-card {
  background-color: #202023;
  padding: 0;
  text-align: left;
  justify-content: flex-start;
  align-items: stretch;
}

/* ── Inner Dashboard (matches .equity-dashboard padding) */
.hp-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 45px 0px 50px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════
   HERO — Portfolio Card + Weather Card side by side
   ══════════════════════════════════════════════════════ */
.hp-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* ── Portfolio / Greeting Card ──────────────────────── */
.hp-greet-card {
  grid-column: span 3;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: 14px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
}

.hp-greet-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.hp-greet-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 30px;
  font-weight: 300;
  color: rgb(255 255 255 / 80%);
  letter-spacing: -0.01em;
}

.hp-greet-name b {
  font-weight: 600;
  color: #fff;
}

.hp-greet-date {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.16);
  text-transform: uppercase;
  min-height: 36px;
}

.hp-gs-icon { display: none; }

.hp-get-started-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.hp-get-started-btn:hover {
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
}


/* ── Portfolio Value Block ──────────────────────────── */
.hp-port-value-block {
  padding: 20px 0 18px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.hp-port-lbl {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.18);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hp-port-lbl--demo {
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
}
.hp-demo-lbl-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.hp-demo-lbl-box:hover {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.04);
}
.hp-demo-lbl-box .fa-lock {
  color: rgb(201 201 201 / 85%);
  font-size: 14px;
  flex-shrink: 0;
}
.hp-demo-lbl-box span {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: rgb(201 201 201 / 85%);
  line-height: 1.6;
}

.hp-port-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 75px;
  font-weight: 300;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 12px;
}

.hp-port-val .cents {
  font-size: 60px;
  color: rgba(255,255,255,0.3);
}

/* Empty state val */
.hp-port-val.hp-empty-val {
  font-size: 18px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0;
  font-weight: 400;
}

.hp-port-val.hp-loading-val {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.15);
  text-transform: uppercase;
  font-weight: 400;
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-port-change-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 28px;
}

.hp-port-change-amt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 30px;
}

.hp-port-change-amt.pos { color: var(--hp-green); }
.hp-port-change-amt.neg { color: var(--hp-red); }

.hp-port-change-sep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.1);
}

.hp-port-change-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 25px;
  color: rgba(255,255,255,0.2);
}

.hp-port-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  border-radius: 4px;
  padding: 2px 7px;
  text-transform: uppercase;
  margin-left: 10px;
}

.hp-port-badge.pos {
  color: rgba(74,222,128,0.65);
  background: rgba(74,222,128,0.07);
  border: 1px solid rgba(74,222,128,0.13);
}

.hp-port-badge.neg {
  color: rgba(248,113,113,0.65);
  background: rgba(248,113,113,0.07);
  border: 1px solid rgba(248,113,113,0.13);
}

/* ── Stats Strip ────────────────────────────────────── */
.hp-port-stats {
  display: flex;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 0;
}

.hp-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-right: 24px;
}

.hp-stat + .hp-stat {
  padding-left: 24px;
  border-left: 1px solid rgba(255,255,255,0.05);
}

.hp-stat-lbl {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 5px 12px;
  margin-bottom: 5px;
  align-self: center;
}

.hp-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 30px;
  font-weight: 400;
}

.hp-stat-val.pos { color: var(--hp-green); }
.hp-stat-val.neg { color: var(--hp-red); }
.hp-stat-val.neu { color: rgba(255,255,255,0.15); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; }



/* ══════════════════════════════════════════════════════
   WEATHER CARD
   ══════════════════════════════════════════════════════ */
.hp-weather-card {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-top: 1px solid var(--hp-border);
  border-radius: 14px;
  padding: 24px 18px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* ── Weather top row — matches .hp-greet-top height for alignment ── */
.hp-weather-card .hp-w-top-row {
  display: flex;
  align-items: center;
  min-height: 40px;  /* matches greeting name line-height (30px font) */
  margin-bottom: 10px;
  justify-content: center;
}

/* ── Homepage Weather Card — mirrors weather page current-card ── */
.hp-weather-card .hp-w-location-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 5px 12px;
  border-radius: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  width: fit-content;
}

.hp-weather-card .hp-w-location-badge svg {
  width: 11px;
  height: 11px;
  opacity: 0.5;
}

.hp-weather-card .hp-w-day-name {
  font-size: 24px;
  color: #fff;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.hp-weather-card .hp-w-date {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
  text-align: center;
}

.hp-weather-card .hp-w-temp-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  line-height: 1;
  margin-bottom: 2px;
}

.hp-weather-card .hp-w-temp-val {
  font-size: 80px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

.hp-weather-card .hp-w-temp-deg {
  font-size: 30px;
  color: rgba(255,255,255,0.5);
  margin-top: 6px;
}

.hp-weather-card .hp-w-range {
  font-size: 20px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 10px;
  text-align: center;
}

.hp-weather-card .hp-w-divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 8px 0;
}

.hp-weather-card .hp-w-icon-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
}

.hp-weather-card .hp-w-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-weather-card .hp-w-icon-wrap i {
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4));
}

.hp-weather-card .hp-w-condition {
  font-size: 20px;
  color: #fff;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;
}

/* Weather animation layer inside homepage card */
.hp-weather-card .weather-anim-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hp-weather-card .weather-anim-layer .w-drop {
  position: absolute;
  width: 1.5px;
  height: 14px;
  border-radius: 2px;
  animation: weatherRainDrop 1.2s linear infinite;
}

.hp-weather-card .weather-anim-layer .w-flake {
  position: absolute;
  border-radius: 50%;
  background: rgba(220,240,255,0.6);
  animation: weatherSnowFall 3s linear infinite;
}

.hp-weather-card .weather-anim-layer .w-lightning {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  animation: weatherLightning 4s ease infinite;
}

.hp-weather-card .weather-anim-layer .w-fog {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 50%;
  background: radial-gradient(ellipse at center, rgba(180,190,200,0.4) 0%, rgba(180,190,200,0.12) 40%, transparent 70%);
  filter: blur(18px);
  border-radius: 50%;
  opacity: 0.5;
  animation: weatherFogDrift 14s ease-in-out infinite;
}
.hp-weather-card .weather-anim-layer .w-mist {
  position: absolute;
  background: radial-gradient(ellipse at center, rgba(180,190,200,0.4), transparent);
  filter: blur(10px);
  border-radius: 50%;
  opacity: 0.45;
  animation: weatherMistFloat 10s ease-in-out infinite;
}

.hp-weather-card .weather-anim-layer .w-star {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 3px rgba(255,255,255,0.4);
  animation: weatherTwinkle 3s ease-in-out infinite;
}

@keyframes weatherTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 0.9; transform: scale(1.2); }
}

.hp-weather-card .weather-anim-layer .w-sunglow {
  position: absolute;
  top: -30%;
  left: -10%;
  width: 80%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 30%, rgba(255,220,120,0.35) 0%, rgba(255,180,60,0.12) 40%, transparent 70%);
  filter: blur(20px);
  animation: weatherSunglow 6s ease-in-out infinite;
}

@keyframes weatherSunglow {
  0%, 100% { opacity: 0.6; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ══════════════════════════════════════════════════════
   MAIN CHART SECTION
   ══════════════════════════════════════════════════════ */
/* ── Market Charts Grid (4 cards) ──────────────────── */
.hp-charts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.hp-chart-card {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: 14px;
  padding: 14px 16px 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.hp-chart-card:hover {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.hp-cc-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.hp-cc-label {
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  font-weight: 500;
}

.hp-cc-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  color: var(--hp-text);
  text-align: right;
  min-height: 20px;
}

.hp-cc-price .hp-cc-change {
  display: block;
  font-size: 15px;
  margin-top: 1px;
}

.hp-cc-price .hp-cc-change.pos { color: var(--hp-green); }
.hp-cc-price .hp-cc-change.neg { color: var(--hp-red); }

.hp-cc-chart {
  position: relative;
  margin: 0 -16px;
  height: 100px;
}

.hp-cc-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.15);
  text-transform: uppercase;
}

.hp-cc-chart svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ══════════════════════════════════════════════════════
   HOLDINGS SECTION
   ══════════════════════════════════════════════════════ */
.hp-section-lbl {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.15);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hp-holdings-section {

}

.hp-holdings-row {
  display: flex;
  gap: 10px;
}

.hp-h-card {
  flex: 1;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: 12px;
  padding: 14px 16px 12px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.hp-h-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.2s;
}

.hp-h-card:hover::after { opacity: 1; }

.hp-h-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.hp-h-ticker {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.hp-h-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  color: var(--hp-muted);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-h-value {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  color: var(--hp-text);
  margin-bottom: 4px;
}

.hp-h-change {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
}

.hp-h-change.pos { color: var(--hp-green); }
.hp-h-change.neg { color: var(--hp-red); }

.hp-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px;
  margin-top: 6px;
}

.hp-spark-bar {
  width: 3px;
  border-radius: 1px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   MODULE GRID — 8-column navigation tiles
   ══════════════════════════════════════════════════════ */
.hp-modules-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hp-module-grid {
  display: grid;
  /* TEMP 2026-06-12: horizontal scroller — exactly 9 tiles fill the row, the
     rest (Bitcoin, Crypto at the end) sit off-screen until scrolled to.
     Restore: grid-template-columns: repeat(9, 1fr); and drop the scroll props. */
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 8 * 10px) / 9);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  gap: 10px;
  flex: 1;
  /* overflow-x:auto clips vertically too — give the hover lift (translateY(-4px))
     and the ::before glow bar headroom INSIDE the scroll box, offset by negative
     margins so the layout doesn't move. */
  padding-top: 7px;
  margin-top: -7px;
  padding-bottom: 5px;
  margin-bottom: -5px;
}
.hp-module-grid::-webkit-scrollbar { display: none; }
.hp-module-grid .hp-m-tile { scroll-snap-align: start; }

.hp-m-tile {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: 14px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  text-decoration: none;
  min-height: 0;
  color: inherit;
  position: relative;
  overflow: hidden;
}

.hp-m-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--tc, #f7931a), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hp-m-tile:hover {
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.hp-m-tile:hover::before {
  opacity: 1;
}

.hp-m-icon-wrap {
  width: 90px;
  height: 90px;
  border-radius: 18px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
  margin-bottom: 10px;
  transition: all 0.2s;
  color: var(--tc);
}

.hp-m-tile:hover .hp-m-icon-wrap {
  background: color-mix(in srgb, var(--tc) 18%, transparent);
  border-color: color-mix(in srgb, var(--tc) 35%, transparent);
}

.hp-m-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}

/* Limited badge for free-tier accessible tiles — matches .premium-lock-icon position */
.hp-m-limited-tag {
  position: absolute;
  top: 4px;
  right: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #9ca3af;
  background: rgba(0,0,0,0.6);
  border-radius: 10px;
  padding: 3px 7px;
  white-space: nowrap;
  z-index: 2;
}

/* Disabled tile */
.hp-m-tile.disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   USER HUB — Sidebar + Content Layout
   ══════════════════════════════════════════════════════ */
#user-hub {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #0d0f12;
}
#user-hub > .card {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
#user-hub.active,
.page.active#user-hub {
  display: flex;
}

/* ── Sidebar ───────────────────────────────────────── */
.uh-sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 70px 0 70px 20px;
  padding: 16px 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

.uh-sidebar-top { display: flex; flex-direction: column; }

.uh-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
}

.uh-nav-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}

.uh-nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.6);
}

.uh-nav-item.active {
  display: flex !important;
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.uh-nav-item i {
  width: 18px;
  text-align: center;
  font-size: 13px;
}

/* ── User Profile (sidebar bottom) ─────────────────── */
.uh-sidebar-bottom { padding: 0 12px; }

.uh-user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: background 0.15s;
}

.uh-user-profile:hover { background: rgba(255,255,255,0.03); }

.uh-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.uh-user-name {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Content Area ──────────────────────────────────── */
.uh-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 70px 0 70px 0;
  padding: 0px 20px 0;
  box-sizing: border-box;
}

.uh-panel { display: none; }
.uh-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Override template.css .card p (32px yellow) for all hub panels */
.uh-panel p {
  font-size: 13px !important;
  color: rgba(255,255,255,0.4) !important;
  margin: 0;
}

/* ── Portfolio Loading ─────────────────────────────── */
.portfolio-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex: 1;
  gap: 20px;
}

.portfolio-loading .portfolio-loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.1) !important;
  border-top: 4px solid #6b7282 !important;
  border-radius: 50%;
  animation: pf-spin 1s linear infinite;
}

@keyframes pf-spin { to { transform: rotate(360deg); } }

.portfolio-loading p {
  color: rgba(255,255,255,0.3) !important;
  font-size: 12px !important;
  font-family: 'DM Mono', monospace !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0;
  margin: 0;
}

.portfolio-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

/* ── Portfolio Tab Bar ─────────────────────────────── */
.pf-tab-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.pf-tab {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px 18px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: all 0.15s;
}

.pf-tab:hover { color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); }

.pf-tab.active {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}

.pf-tab-right {
  margin-left: auto;
}

.pf-tab-content {
  display: none;
}

.pf-tab-content.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

/* ── Total Worth Header ────────────────────────────── */
.pf-worth-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
}

.pf-worth-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pf-eye-toggle {
  font-size: 16px;
  color: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: color 0.2s;
}
.pf-eye-toggle:hover {
  color: rgba(255,255,255,0.6);
}

.pf-period-tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.pf-period-tab {
  background: none;
  border: none;
  padding: 5px 10px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.pf-period-tab:hover { color: rgba(255,255,255,0.6); }

.pf-period-tab.active {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.pf-worth-date {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  margin-bottom: 4px;
  text-align: left;
}

.pf-worth-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  text-align: left;
}

.pf-worth-change {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  text-align: left;
}

.pf-worth-change .pos { color: var(--hp-green); }
.pf-worth-change .neg { color: var(--hp-red); }
.pf-worth-change .zero { color: rgba(255,255,255,0.4); }
.pf-worth-change .pf-period-label { color: #fff; }

.pf-add-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px 18px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.pf-add-btn:hover {
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
}

/* ── Charts Row ────────────────────────────────────── */
.pf-charts-row {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
@media (min-width: 1401px) {
  .pf-charts-row { grid-template-columns: 3fr 2fr; }
}
@media (min-width: 2400px) {
  .pf-charts-row { grid-template-columns: 2fr 1fr; }
}

.pf-chart-main {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pf-chart-main .pf-worth-header,
.pf-chart-main .pf-worth-date,
.pf-chart-main .pf-worth-value,
.pf-chart-main .pf-worth-change {
  padding-left: 20px;
  padding-right: 20px;
}

.pf-chart-main .pf-worth-header {
  padding-top: 16px;
}

.pf-chart-main #pf-networth-chart {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.pf-distribution-card {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.pf-distribution-card #pf-allocation-chart {
  flex: 1;
}

.pf-treemap {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.pf-treemap-block {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px;
  border: none;
}
.pf-treemap-val {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 2400px) {
  .pf-treemap-val { font-size: 18px; }
}
@media (min-width: 3400px) {
  .pf-treemap-val { font-size: 22px; }
}
.pf-treemap-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CSS conic-gradient donut — replaces the Plotly pie, which flickered as black
   boxes inside Android WebView. Static gradient + mask = no SVG, no repaint loop. */
.pf-donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 6px;
}
.pf-donut-chart {
  position: relative;
  aspect-ratio: 1 / 1;
  height: min(100%, 200px);
  flex: 0 0 auto;
}
.pf-donut-canvas {
  display: block;
  margin: 0 auto;
}

/* ── AI Assistant voice panel ── */
.ai-asst-panel { padding: 4px 2px; }
.ai-asst-title { font-size: 18px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 10px; }
.ai-asst-title i { color: #f97316; }
.ai-asst-sub { font-size: 13px; color: rgba(255,255,255,0.5); margin: 6px 0 18px; line-height: 1.45; }
.ai-voice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; }
@media (max-width: 700px) { .ai-voice-grid { grid-template-columns: 1fr; } }
.ai-voice-card {
  display: flex; align-items: center; gap: 12px;
  height: 64px; padding: 0 12px 0 14px; box-sizing: border-box;
  border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.ai-voice-card:hover { background: rgba(255,255,255,0.05); }
.ai-voice-card.active { background: rgba(96,165,250,0.10); border-color: rgba(96,165,250,0.5); }
.ai-voice-icon {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.ai-voice-icon.f { background: rgba(236,72,153,0.15); color: #f472b6; }
.ai-voice-icon.m { background: rgba(59,130,246,0.15); color: #60a5fa; }
.ai-voice-info { flex: 1; min-width: 0; text-align: left; }
.ai-voice-name { font-size: 15px; font-weight: 600; color: #fff; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-voice-meta { font-size: 11.5px; color: rgba(255,255,255,0.5); margin-top: 3px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-voice-preview {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; padding: 0;
  background: rgba(255,255,255,0.06); border: none; color: rgba(255,255,255,0.7);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 11px; transition: background .15s, color .15s;
}
.ai-voice-preview:hover { background: rgba(96,165,250,0.25); color: #fff; }
.ai-voice-preview.playing { background: #60a5fa; color: #fff; animation: aiPulse 1s ease-in-out infinite; }
@keyframes aiPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
/* Selection (highlight, tinted play button, check badge) is rendered inline in
   renderAIAssistantPanel so it survives a stale CSS cache. */
.pf-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pf-donut-total {
  font-family: 'DM Mono', monospace;
  font-size: 17px;
  font-weight: 600;
  color: #e8eaed;
  white-space: nowrap;
}
.pf-donut-sub {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-top: 2px;
}
.pf-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.pf-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
}
.pf-donut-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.pf-donut-name { overflow: hidden; text-overflow: ellipsis; }
.pf-donut-pct { color: rgba(255,255,255,0.45); margin-left: auto; padding-left: 6px; }
.pf-values-hidden .pf-donut-total { filter: blur(6px); -webkit-filter: blur(6px); user-select: none; }
@media (min-width: 2400px) {
  .pf-donut-total { font-size: 22px; }
  .pf-donut-legend-item { font-size: 13px; }
  .pf-donut-chart { height: min(100%, 240px); }
}

.pf-dist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.pf-dist-header .pf-section-label {
  display: inline;
  margin-bottom: 0;
}
.pf-dist-toggle {
  display: flex;
  gap: 4px;
}
.pf-dist-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  width: 28px;
  height: 28px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.25);
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
}
.pf-dist-btn:hover {
  color: rgba(255,255,255,0.5);
  border-color: rgba(255,255,255,0.15);
}
.pf-dist-btn.active {
  display: flex !important;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}

.pf-section-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  display: block;
  margin-bottom: 14px;
}

.portfolio-chart-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── My Movers ─────────────────────────────────────── */
.pf-movers-section { flex-shrink: 0; }

.pf-movers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.pf-movers-header .pf-section-label {
  display: inline;
  margin-bottom: 0;
  text-align: left;
}
.pf-movers-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pf-movers-dropdown {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='rgba(255,255,255,0.3)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 22px;
}
.pf-movers-dropdown:hover {
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
}
.pf-movers-dropdown:focus {
  border-color: rgba(255,255,255,0.2);
}
.pf-movers-dropdown option {
  background: #1a1a1a;
  color: #fff;
}
.pf-movers-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
}
.pf-movers-arrow:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.15);
}

.pf-movers-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.pf-movers-scroll::-webkit-scrollbar { height: 4px; }
.pf-movers-scroll::-webkit-scrollbar-track { background: transparent; }
.pf-movers-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.pf-mover-card {
  min-width: 220px;
  max-width: 240px;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: 14px;
  padding: 16px 18px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s;
}
@media (min-width: 2400px) {
  .pf-movers-scroll { overflow: hidden; }
  .pf-mover-card {
    min-width: 0;
    max-width: none;
    flex: 1 1 0;
  }
}
.pf-mover-card:hover { background: rgba(255,255,255,0.05); }

/* Top row: logo + name/ticker + rank */
.pf-mover-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.pf-mover-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.pf-mover-info {
  flex: 1;
  min-width: 0;
}
.pf-mover-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  text-align: left;
}
.pf-mover-symbol {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
  text-align: left;
}
.pf-mover-rank {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: rgba(255,255,255,0.2);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}

/* Bottom: price + change + sparkline */
.pf-mover-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.pf-mover-price-section {
  flex: 1;
  min-width: 0;
}
.pf-mover-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  text-align: left;
}
.pf-mover-changes {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pf-mover-change-abs {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
}
.pf-mover-change-abs.pos { color: var(--hp-green); }
.pf-mover-change-abs.neg { color: var(--hp-red); }
.pf-mover-change-pct {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
}
.pf-mover-change-pct.pos {
  color: var(--hp-green);
  background: rgba(52,211,153,0.12);
}
.pf-mover-change-pct.neg {
  color: var(--hp-red);
  background: rgba(248,113,113,0.12);
}
.pf-mover-spark {
  width: 70px;
  height: 36px;
  flex-shrink: 0;
}
.pf-mover-spark canvas {
  width: 100%;
  height: 100%;
}

/* ── Holdings Table ────────────────────────────────── */
#pf-holdings-table {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: 14px;
  padding: 20px;
  text-align: left;
  flex: 1;
  overflow-y: auto;
}

.pf-holdings-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.pf-holdings-header {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pf-holdings-header th {
  padding: 12px 12px;
  text-align: left;
  font-weight: 400;
}

.pf-holdings-header th:last-child { text-align: right; }

.pf-holding-row {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
  cursor: pointer;
}

.pf-holding-row:hover { background: rgba(255,255,255,0.02); }

.pf-holding-row td {
  padding: 16px 12px;
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  color: var(--hp-text);
  vertical-align: middle;
}

.pf-holding-row td:last-child { text-align: right; }

.pf-holding-symbol {
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.04em;
}

.pf-holding-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--hp-muted);
  margin-top: 2px;
}

.pf-pl-pos { color: var(--hp-green); font-size: 12px; }
.pf-pl-neg { color: var(--hp-red); font-size: 12px; }
.pf-pl-neutral { color: rgba(255,255,255,0.35); font-size: 12px; }

.pf-holding-spark-cell {
  padding: 10px 12px !important;
}
.pf-holding-spark-cell canvas {
  display: block;
}

.pf-holding-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.pf-holding-actions button {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 6px 11px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: all 0.15s;
}

.pf-holding-actions button:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.pf-holding-actions button.delete-btn:hover {
  background: rgba(248,113,113,0.1);
  border-color: rgba(248,113,113,0.15);
  color: var(--hp-red);
}

/* ── Lot badge (shown on grouped main rows) ─────────────────── */
.pf-lot-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
}

/* ── Chevron toggle on group row ─────────────────────────────── */
.pf-chevron {
  transition: transform 0.2s ease;
  font-size: 10px;
  color: rgba(255,255,255,0.25);
}
.pf-holding-group.expanded .pf-chevron {
  transform: rotate(180deg);
}
.pf-group-toggle-btn {
  padding: 5px 8px !important;
}

/* ── Sub-rows (individual lots, hidden by default) ───────────── */
.pf-holding-subrow td {
  padding: 10px 12px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,0.025);
  background: rgba(0,0,0,0.15);
}
.pf-holding-subrow td:last-child { text-align: right; }
.pf-holding-subrow:last-child td { border-bottom: 1px solid rgba(255,255,255,0.04); }
.pf-holding-subrow .pf-holding-actions button {
  opacity: 0.7;
}
.pf-holding-subrow .pf-holding-actions button:hover {
  opacity: 1;
}

/* ── Lot label inside sub-row ────────────────────────────────── */
.pf-holding-sublot {
  padding-left: 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  font-family: 'DM Sans', sans-serif;
  border-left: 2px solid rgba(255,255,255,0.07);
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════
   PROFILE PANEL
   ══════════════════════════════════════════════════════ */
.prof-panel {
  display: flex;
  flex-direction: column;
  padding: 32px 24px 40px;
  max-width: 600px;
  margin: 0 auto;
  gap: 20px;
}

/* — Header: avatar + name/email row — */
.prof-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.prof-avatar-container {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.prof-avatar {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
}
.prof-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.prof-avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  width: 56px;
  height: 56px;
}
.prof-avatar-container:hover .prof-avatar-overlay {
  opacity: 1;
}
.prof-avatar-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(248,113,113,0.9);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 8px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s;
  padding: 0;
}
.prof-avatar-container:hover .prof-avatar-remove {
  opacity: 1;
}
.prof-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.prof-greeting {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prof-email {
  font-family: 'DM Mono', monospace;
  font-size: 13px !important;
  color: rgba(255,255,255,0.25) !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prof-member {
  font-family: 'DM Mono', monospace;
  font-size: 12px !important;
  color: rgba(255,255,255,0.15) !important;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

/* — Section cards — */
.prof-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 20px 24px 24px;
  text-align: left;
}
.prof-card-title {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.prof-card-title i {
  font-size: 12px;
  color: rgba(255,255,255,0.2);
}
.prof-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) {
  .prof-row { grid-template-columns: 1fr; }
}
.prof-field {
  display: flex;
  flex-direction: column;
}
.prof-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.prof-hint {
  font-family: 'DM Mono', monospace;
  font-size: 12px !important;
  /* One line per description; on a very narrow column it truncates instead of wrapping. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255,255,255,0.15) !important;
  line-height: 1.5;
  margin-bottom: 10px;
}
.prof-input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  color: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.prof-input:focus {
  border-color: rgba(255,255,255,0.25);
}
.prof-input::placeholder {
  color: rgba(255,255,255,0.12);
}
.prof-select {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  color: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(255,255,255,0.3)' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.prof-select:focus {
  border-color: rgba(255,255,255,0.25);
}
.prof-select option {
  background: #1a1c21;
  color: #fff;
}

/* Location autocomplete */
.prof-loc-wrap {
  position: relative;
}
.prof-loc-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #1a1c21;
  border: 1px solid rgba(255,255,255,0.1);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 50;
}
.prof-loc-item {
  padding: 10px 14px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background 0.15s;
}
.prof-loc-item:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

/* — Save button — */
.prof-save-btn {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 13px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
}
.prof-save-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* ══════════════════════════════════════════════════════
   FEEDBACK PANEL — reuses the prof-* card/input/button
   ══════════════════════════════════════════════════════ */
.fb-intro { text-align: left; }
.fb-title {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}
.fb-lede {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.45);
  margin: 0;
}
.fb-form { display: flex; flex-direction: column; gap: 18px; }
.fb-form .prof-card-title { margin-bottom: 2px; }
.fb-moods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
/* Colour is only the secondary cue: every face carries its word. */
.fb-mood {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: rgba(255,255,255,0.4);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
}
.fb-mood:hover { border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.7); }
.fb-mood:active { transform: scale(0.97); }
.fb-mood:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: 2px; }
.fb-mood.is-good.is-on { color: #4ade80; border-color: rgba(74,222,128,0.6); background: rgba(74,222,128,0.08); }
.fb-mood.is-okay.is-on { color: #fff; border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.06); }
.fb-mood.is-bad.is-on  { color: #f87171; border-color: rgba(248,113,113,0.6); background: rgba(248,113,113,0.08); }
.fb-field .prof-hint { margin-bottom: 8px; }
.fb-optional { text-transform: none; letter-spacing: 0; color: rgba(255,255,255,0.2); }
.fb-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
  font-family: inherit;
  font-size: 13px;
}
.fb-sender { margin: -4px 0 0; }
.fb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.fb-msg:empty { display: none; }
.fb-msg { font-size: 12px; line-height: 1.5; }
.fb-msg.is-bad { color: #f87171; }
.fb-send:disabled { opacity: 0.35; cursor: not-allowed; }
.fb-send:disabled:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
.fb-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 36px 24px;
}
.fb-thanks-face { color: #4ade80; }
.fb-thanks-face svg { width: 48px; height: 48px; }
.fb-thanks .prof-save-btn { margin-top: 14px; max-width: 240px; }


/* ══════════════════════════════════════════════════════
   AUTH PAGE — Login / Register
   ══════════════════════════════════════════════════════ */
#auth-page {
  box-sizing: border-box;
  background: #0d0f12;
  overflow-y: auto;
}
#auth-page.active,
.page.active#auth-page {
  display: flex;
}
#auth-page > .card {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-container {
  width: 100%;
  max-width: 420px;
  padding: 20px;
}

.auth-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 36px 32px;
}

.auth-logo {
  font-family: 'DM Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  text-align: center;
  margin-bottom: 32px;
}

.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}

.auth-tab {
  flex: 1;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 11px 0;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.15s;
  text-align: center;
}

.auth-tab:hover {
  color: rgba(255,255,255,0.5);
  border-color: rgba(255,255,255,0.15);
}

.auth-tab.active {
  background: #fff;
  color: #0d0f12;
  border-color: #fff;
}

.auth-form { display: none; }
.auth-form.active { display: block; }

.auth-field {
  margin-bottom: 18px;
}

.auth-field label {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.auth-field input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 13px 16px;
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.auth-field input:focus {
  border-color: rgba(255,255,255,0.25);
}

.auth-field input::placeholder {
  color: rgba(255,255,255,0.12);
}

.auth-submit {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 13px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
  margin-top: 6px;
}

.auth-submit:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}

.auth-error {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: var(--hp-red);
  text-align: center;
  margin-bottom: 14px;
  display: none;
}

.auth-error.visible { display: block; }

.auth-skip {
  text-align: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.auth-skip a {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.25);
  text-decoration: none;
  transition: color 0.15s;
}

.auth-skip a:hover { color: rgba(255,255,255,0.5); }

.auth-forgot {
  text-align: center;
  margin-top: 12px;
  position: relative;
  z-index: 2;
}

.auth-forgot a {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.25);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}

.auth-forgot a:hover { color: rgba(255,255,255,0.5); }

#auth-page .auth-description,
p.auth-description {
  font-family: 'DM Mono', monospace;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.35) !important;
  line-height: 1.7;
  text-align: center;
  margin: 0 0 20px;
}

.auth-success {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: var(--hp-green, #22c55e);
  text-align: center;
  margin-bottom: 14px;
  display: none;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════
   USER HUB — Settings Panel
   ══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   USER HUB — Account Panel
   ══════════════════════════════════════════════════════ */
#uh-account-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  width: 100%;
}
.acct-card {
  width: 100%;
  max-width: 380px;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: 14px;
  padding: 36px 32px;
  text-align: center;
}

/* ── Branding ── */
.acct-brand {
  margin-bottom: 36px;
}
.acct-logo {
  font-family: 'DM Mono', monospace;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: #fff;
  margin-bottom: 10px;
}
.acct-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,0.2);
  font-weight: 400;
  line-height: 1.5;
}

/* ── Error / Success ── */
.acct-auth-error {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: #f87171;
  margin-bottom: 16px;
  display: none;
  text-align: left;
}
.acct-success {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: var(--hp-green, #22c55e);
  text-align: center;
  line-height: 1.6;
  display: none;
  background: rgba(248,113,113,0.04);
  border: 1px solid rgba(248,113,113,0.1);
  border-radius: 10px;
  padding: 10px 14px;
}

/* ── Forms ── */
.acct-auth-form { display: none; }
.acct-auth-form.active { display: block; }
.acct-field {
  margin-bottom: 16px;
  text-align: left;
}
.acct-field label {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.25);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.acct-field input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 13px 16px;
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  color: #fff;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.acct-field input::placeholder { color: rgba(255,255,255,0.1); }
.acct-field input:focus {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
}
.acct-submit {
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #0d0f12;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 6px;
}
.acct-submit:hover { opacity: 0.85; }
.acct-submit:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Switch link ── */
.acct-switch {
  margin-top: 28px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
}
.acct-switch-text {
  color: rgba(255,255,255,0.2);
}
.acct-switch-link {
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  text-decoration: none;
  margin-left: 4px;
  transition: color 0.15s;
}
.acct-switch-link:hover { color: #fff; }

/* ── Guest link ── */
.acct-guest-link {
  margin-top: 16px;
}
.acct-guest-link a {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.1);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
}
.acct-guest-link a:hover { color: rgba(255,255,255,0.3); }

/* ── Logged-in: profile ── */
.acct-profile-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.acct-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 20px; color: rgba(255,255,255,0.45);
  flex-shrink: 0;
}
.acct-info { text-align: center; }
.acct-name {
  font-family: 'DM Mono', monospace;
  font-size: 16px; color: #fff;
}
.acct-email {
  font-family: 'DM Mono', monospace;
  font-size: 13px; color: rgba(255,255,255,0.2);
  margin-top: 4px;
}
.acct-divider {
  height: 1px;
  background: rgba(255,255,255,0.05);
  margin: 20px 0;
}
.acct-actions {
  display: flex; flex-direction: column; gap: 2px;
}
.acct-btn {
  display: flex; align-items: center; gap: 12px;
  background: none; border: none;
  padding: 10px 12px; border-radius: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 13px; color: rgba(255,255,255,0.4);
  cursor: pointer; transition: all 0.15s;
}
.acct-btn:hover { background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.75); }
.acct-btn i { width: 16px; text-align: center; font-size: 12px; }
.acct-btn-danger { color: rgba(248,113,113,0.5); }
.acct-btn-danger:hover { background: rgba(248,113,113,0.04); color: #f87171; }
.acct-pw-form { padding: 14px 12px 4px; }
.acct-pw-form .upgrade-device-msg { text-align: left; margin: 0 0 10px; }
.acct-pw-form .upgrade-device-msg:empty { display: none; }

/* ══════════════════════════════════════════════════════
   PORTFOLIO MODAL
   ══════════════════════════════════════════════════════ */
.portfolio-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.75);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-out;
}

/* Android WebView glitches on backdrop-filter — flickering black rectangles
   across the page when a GPU surface behind it (the donut chart) repaints.
   The blur is purely cosmetic, so disable backdrop-filter entirely on Android. */
.is-android *,
.is-android *::before,
.is-android *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* backdrop-filter ONLY while the modal is open. A full-viewport backdrop-filter
   layer left composited while hidden makes Android WebView flicker black
   rectangles across the page whenever a GPU surface behind it (e.g. the donut
   canvas/chart) repaints. */
.portfolio-modal-overlay.active {
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.portfolio-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(20px);
  background: #111;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  width: 480px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px 32px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
  z-index: 10001;
  opacity: 0;
  transition: all 0.25s ease-out;
}

.portfolio-modal-overlay.active .portfolio-modal {
  transform: translate(-50%, -50%) translateY(0);
  opacity: 1;
}

.pm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.pm-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.pm-close {
  background: none;
  border: none;
  font-size: 18px;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
}

.pm-close:hover {
  color: #fff;
}

/* Asset type pills */
.pm-type-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.pm-type-pill {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.15s;
}

.pm-type-pill:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
}

.pm-type-pill.active {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}

/* Form fields */
.pm-field {
  margin-bottom: 16px;
  text-align: left;
}

.pm-label {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: left;
}

.pm-input,
.pm-select {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
  text-align: left;
}

.pm-input:focus,
.pm-select:focus {
  border-color: rgba(255,255,255,0.25);
}

.pm-input::placeholder {
  color: rgba(255,255,255,0.15);
}

/* Symbol search dropdown */
.pm-symbol-search-wrap {
  position: relative;
}

.pm-symbol-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #1a1c22;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  display: none;
  margin-top: 4px;
}

.pm-symbol-results.visible {
  display: block;
}

.pm-symbol-item {
  padding: 10px 16px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--hp-text);
  cursor: pointer;
  transition: background 0.1s;
  display: flex;
  justify-content: space-between;
}

.pm-symbol-item:hover {
  background: rgba(255,255,255,0.06);
}

.pm-symbol-item .pm-sym-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: var(--hp-muted);
}

/* Custom date picker */
.pm-date-wrap {
  position: relative;
}
.pm-date-wrap .pm-input {
  cursor: pointer;
  padding-right: 40px;
}
.pm-date-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.35);
  font-size: 13px;
  cursor: pointer;
  pointer-events: auto;
}
.pm-calendar {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #1a1c22;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 14px;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.pm-calendar.visible { display: block; }
.pm-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.pm-cal-header button {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.pm-cal-header button:hover { background: rgba(255,255,255,0.08); color: #fff; }
.pm-cal-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}
.pm-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.pm-cal-weekdays span {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.25);
  text-align: center;
  text-transform: uppercase;
  padding: 4px 0;
}
.pm-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.pm-cal-day {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  text-align: center;
  padding: 7px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}
.pm-cal-day:hover { background: rgba(255,255,255,0.08); color: #fff; }
.pm-cal-day.today { color: #4ade80; font-weight: 600; }
.pm-cal-day.selected { background: rgba(255,255,255,0.12); color: #fff; font-weight: 600; }
.pm-cal-day.other-month { color: rgba(255,255,255,0.15); }
.pm-cal-day.empty { cursor: default; }
.pm-cal-day.empty:hover { background: none; }

/* Actions row */
.pm-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.pm-save-btn {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
}

.pm-save-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}

.pm-delete-btn {
  background: rgba(248,113,113,0.06);
  border: 1px solid rgba(248,113,113,0.12);
  border-radius: 8px;
  padding: 12px 20px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(248,113,113,0.7);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
}

.pm-delete-btn:hover {
  background: rgba(248,113,113,0.12);
  color: var(--hp-red);
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Full HD (1920x1080)
   ══════════════════════════════════════════════════════ */
@media (min-width: 1920px) {
  .hp-cc-chart {
    height: 150px;
  }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Small Desktop / Large Tablet (1400px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 1400px) {
  .hp-main {
    padding: 50px 0px 50px;
    gap: 10px;
  }

  .hp-greet-card {
    padding: 18px 22px;
  }

  .hp-greet-top {
    margin-bottom: 16px;
  }

  .hp-port-val {
    font-size: 60px;
  }

  .hp-port-val.hp-loading-val {
    min-height: 60px;
  }

  .hp-port-val .cents {
    font-size: 18px;
  }

  .hp-port-change-amt {
    font-size: 25px;
  }

  .hp-port-change-pct {
    font-size: 20px;
  }

  .hp-port-badge {
    font-size: 10px;
  }

  .hp-get-started-btn {
    font-size: 9px;
  }

  .hp-stat-val {
    font-size: 20px;
  }

  .hp-stat-lbl {
    font-size: 9px;
  }

  .hp-cc-chart {
    height: 70px;
  }

  .hp-weather-card {
    padding: 14px 14px 10px;
  }

  .hp-weather-card .hp-w-location-badge {
    font-size: 9px;
  }

  .hp-weather-card .hp-w-temp-val {
    font-size: 60px;
  }

  .hp-weather-card .hp-w-range {
    font-size: 15px;
  }

  .hp-weather-card .hp-w-condition {
    font-size: 17px;
  }

  .hp-weather-card .hp-w-icon i {
    font-size: 65px !important;
  }

  .hp-cc-label {
    font-size: 13px;
  }

  .hp-cc-price {
    font-size: 15px;
  }

  .hp-cc-price .hp-cc-change {
    font-size: 13px;
  }

  .hp-m-label {
    font-size: 13px;
  }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Mobile
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* User Hub responsive */
  #user-hub { flex-direction: column; }
  .uh-sidebar {
    width: 100%;
    min-width: unset;
    flex-direction: row;
    padding: 12px 8px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    justify-content: center;
  }
  .uh-sidebar-top { width: 100%; }
  .uh-sidebar-nav {
    flex-direction: row;
    justify-content: center;
    gap: 4px;
  }
  .uh-nav-item span { display: none; }
  .uh-nav-item { padding: 10px 14px; }
  .uh-sidebar-bottom { display: none; }
  .uh-content { padding: 20px 16px; margin: 0; }
  .pf-charts-row { grid-template-columns: 1fr; }
  .pf-worth-value { font-size: 32px; }
  .pf-worth-header { flex-direction: column; gap: 10px; }

  /* Auth responsive */
  .auth-container { padding: 16px; }
  .auth-card { padding: 28px 20px; }

  .hp-card {
    padding: 0;
  }

  .hp-main {
    padding: 10px;
    gap: 12px;
  }

  .hp-hero {
    /* minmax(0, 1fr), not 1fr: a bare 1fr is minmax(auto, 1fr), so the track cannot
       shrink below its widest child's min-content width. Something inside the greeting
       card measured 318px, which inflated the track and pushed both cards 20px past the
       298px hero. minmax(0, ...) lets the track win and the content wrap instead. */
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .hp-greet-card {
    padding: 18px 20px;
  }

  .hp-greet-name {
    font-size: 16px;
  }

  .hp-port-val {
    font-size: 32px;
  }

  .hp-port-val.hp-loading-val {
    min-height: 32px;
  }

  .hp-port-val .cents {
    font-size: 16px;
  }

  .hp-port-stats {
    flex-wrap: wrap;
    gap: 12px;
  }

  .hp-stat {
    flex: 0 0 calc(50% - 12px);
    padding-right: 0;
  }

  .hp-stat + .hp-stat {
    padding-left: 0;
    border-left: none;
  }

  .hp-stat:nth-child(2n+1) {
    padding-right: 12px;
  }

  .hp-stat:nth-child(2n) {
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,0.05);
  }

  .hp-weather-card {
    padding: 14px;
  }

  .hp-w-temp {
    font-size: 32px;
  }

  .hp-charts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .hp-chart-card {
    padding: 10px 12px 0;
  }

  .hp-cc-chart {
    margin: 0 -12px;
    height: 60px;
  }

  .hp-holdings-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .hp-h-card {
    flex: 0 0 140px;
  }

  .hp-module-grid {
    /* Wrap onto rows on small screens. The base rule is a horizontal scroller
       (grid-auto-flow: column + grid-auto-columns) sized so 9 tiles fill a WIDE row;
       left as-is on a 390px phone that works out to ~34px per tile. grid-auto-flow
       MUST be reset to row here — while it stays `column`, grid-template-columns is
       ignored entirely, which is why the previous override silently did nothing. */
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .portfolio-page-card {
    padding: 5px;
  }

  .portfolio-charts-row {
    grid-template-columns: 1fr;
  }

  .portfolio-total-value {
    font-size: 28px;
  }

  .portfolio-header {
    flex-direction: column;
    gap: 14px;
  }
  .hp-greet-card {
    /* The hero is grid-template-columns: 1fr here, but this card kept its desktop
       `grid-column: span 3`. Spanning 3 tracks in a 1-track grid CREATES two implicit
       columns, and the weather card (auto-placed) then got only track 1: 274px inside
       a 298px hero, i.e. narrower than the cards above and below it by exactly the two
       12px gaps. Collapsing the span to 1 makes both cards full hero width. */
    grid-column: span 1;
  }

  .hp-gs-label { display: none; }
  .hp-gs-icon  { display: block; }

  .hp-get-started-btn {
    /* Icon-only square — the full "MANAGE PORTFOLIO →" wrapped to two lines and
       squeezed "Good evening," beside it. */
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  /* Restore readable label sizes on phones.
     These were being shrunk to 9-10px by @media (max-width: 1400px), which is a
     LAPTOP-shrink breakpoint — but 1400px also matches every phone, and no mobile
     block ever overrode it, so the laptop values leaked all the way down to 390px.
     On a phone these cards are full-bleed and have more relative room, not less.
     12px is the floor: below that iOS Safari also starts auto-zooming form controls. */
  .hp-port-badge      { font-size: 12px; }
  .hp-stat-lbl        { font-size: 12px; letter-spacing: 0.08em; }
  .hp-cc-loading      { font-size: 12px; }
  .hp-weather-card .hp-w-location-badge { font-size: 12px; }
}

@media (max-width: 480px) {
  .hp-module-grid {
    /* 2 across at 390px. grid-auto-flow MUST be reset to row: while it stays
       `column`, grid-template-columns is ignored entirely, which is why an earlier
       repeat(2, 1fr) here silently did nothing and tiles rendered as ~22px slivers. */
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
    overflow-x: visible;
  }

  .hp-port-stats {
    /* Grid, not flex, for the 2x2. As flex this required the item basis to stay in sync
       with the container's 12px gap (50% overflows, calc(50% - 12px) fits) AND the items
       to be border-box with min-width:0 — miss any one and every stat wrapped onto its
       own line, which is what it was doing: four tall full-width rows. Grid derives the
       track width from the container minus the gaps, so none of that arithmetic exists. */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 10px;
  }

  .hp-stat {
    box-sizing: border-box;
    min-width: 0;
    flex: none;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
  }

  /* Sentiment tile hidden on phones: it was the 11th of 11 modules, so it sat alone
     on a half-empty final row. Hiding it leaves 10 tiles = 5 even rows of 2. */
  .hp-m-tile[href="#market-sentiment"] {
    display: none;
  }

  .hp-stat + .hp-stat {
    border-left: none;
    padding-left: 0;
  }
}

/* Eye icon privacy — hide mover prices, treemap values */
.pf-values-hidden .pf-mover-price,
.pf-values-hidden .pf-mover-change-abs,
.pf-values-hidden .pf-treemap-val {
  color: transparent !important;
}
.pf-values-hidden .pf-mover-price::before,
.pf-values-hidden .pf-mover-change-abs::before,
.pf-values-hidden .pf-treemap-val::before {
  content: '•••';
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.08em;
}

/* Eye icon privacy — also mask the Holdings table values (Qty, Price, Value, P/L).
   These cells contain mixed markup (P/L has a nested span), so blur is the robust mask. */
.pf-values-hidden .pf-holdings-table tbody td:nth-child(2),
.pf-values-hidden .pf-holdings-table tbody td:nth-child(3),
.pf-values-hidden .pf-holdings-table tbody td:nth-child(5),
.pf-values-hidden .pf-holdings-table tbody td:nth-child(6) {
  filter: blur(6px);
  -webkit-filter: blur(6px);
  user-select: none;
}

/* Hide the horizontal scrollbar on the portfolio movers card strip — the
   left/right nav arrows handle scrolling, so the bar should not be visible. */
#pf-movers-scroll {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
}
#pf-movers-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ══════════════════════════════════════════════════════
   TWO-TONE ICONS (Weather, Heatmap) — free replacement for the Font Awesome Pro
   duotone icons (fa-duotone fa-cloud-sun / fa-grid) dropped when we moved to FA Free.
   Weather = Phosphor Icons cloud-sun (MIT, phosphoricons.com), split into an orange
   sun + light blue cloud. Heatmap = our own 3x3 green/red grid. Sun + grid colours match the old
   --fa-primary/secondary-color in template.css; the cloud was changed from yellow to
   a light blue (#bae6fd) on 2026-10-25. Sized in em so they follow the
   container's font-size like the <i> icons they replace.
   ══════════════════════════════════════════════════════ */
.duo-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  background: center / contain no-repeat;
  vertical-align: middle;
}
.duo-icon.duo-weather { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23f7931a' d='M164,72a76.2,76.2,0,0,0-20.26,2.73,55.63,55.63,0,0,0-9.41-11.54l9.51-13.57a8,8,0,1,0-13.11-9.18L121.22,54A55.9,55.9,0,0,0,96,48c-.59,0-1.16,0-1.74,0L91.37,31.71a8,8,0,1,0-15.75,2.77L78.5,50.82A56.1,56.1,0,0,0,55.23,65.67L41.61,56.14a8,8,0,1,0-9.17,13.11L46,78.77A55.55,55.55,0,0,0,40,104c0,.57,0,1.15,0,1.72L23.71,108.6a8,8,0,0,0,1.38,15.88,8.24,8.24,0,0,0,1.39-.12l16.32-2.88a55.74,55.74,0,0,0,5.86,12.42A52,52,0,0,0,84,224h80a76,76,0,0,0,0-152ZM92.92,120.76a52.14,52.14,0,0,0-31,4.17,40,40,0,0,1,66.62-44.17A76.26,76.26,0,0,0,92.92,120.76Z'/%3E%3Ccircle cx='96' cy='104' r='44' fill='%23f7931a'/%3E%3Cpath fill='%23bae6fd' d='M164,72A76,76,0,0,1,164,224H84A52,52,0,1,1,92.92,120.76A76,76,0,0,1,164,72Z'/%3E%3C/svg%3E"); }
.duo-icon.duo-heatmap { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect x='16' y='16' width='64' height='64' rx='14' fill='%2334d399'/%3E%3Crect x='96' y='16' width='64' height='64' rx='14' fill='%23ef4444'/%3E%3Crect x='176' y='16' width='64' height='64' rx='14' fill='%2334d399'/%3E%3Crect x='16' y='96' width='64' height='64' rx='14' fill='%23ef4444'/%3E%3Crect x='96' y='96' width='64' height='64' rx='14' fill='%2334d399'/%3E%3Crect x='176' y='96' width='64' height='64' rx='14' fill='%23ef4444'/%3E%3Crect x='16' y='176' width='64' height='64' rx='14' fill='%2334d399'/%3E%3Crect x='96' y='176' width='64' height='64' rx='14' fill='%23ef4444'/%3E%3Crect x='176' y='176' width='64' height='64' rx='14' fill='%2334d399'/%3E%3C/svg%3E"); width: 1.1em; height: 1.1em; }
/* Earnings Hub = Phosphor calendar-dots (duotone, MIT): cyan outline + dots, teal top band,
   dark-teal body — same palette as the BMO/AMC session pills. */
.duo-icon.duo-earnings { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect x='40' y='40' width='176' height='176' rx='8' fill='%23273237'/%3E%3Cpath fill='%233f717f' d='M216,48V88H40V48a8,8,0,0,1,8-8H208A8,8,0,0,1,216,48Z'/%3E%3Cpath fill='%2365d0ea' d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z'/%3E%3C/svg%3E"); }
/* Fed Watch = Phosphor bank (duotone, MIT): light-blue columns over a dark-blue roof. */
.duo-icon.duo-fedwatch { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2323416b' d='M232,96H24L128,32Z'/%3E%3Cpath fill='%236ea8fe' d='M24,104H48v64H32a8,8,0,0,0,0,16H224a8,8,0,0,0,0-16H208V104h24a8,8,0,0,0,4.19-14.81l-104-64a8,8,0,0,0-8.38,0l-104,64A8,8,0,0,0,24,104Zm40,0H96v64H64Zm80,0v64H112V104Zm48,64H160V104h32ZM128,41.39,203.74,88H52.26ZM248,208a8,8,0,0,1-8,8H16a8,8,0,0,1,0-16H240A8,8,0,0,1,248,208Z'/%3E%3C/svg%3E"); }
/* Sentiment = Phosphor speedometer (duotone, MIT): lime needle + rim (#a3e635)
   over an olive dial face (#3f6212). */
.duo-icon.duo-sentiment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%233f6212' d='M232,152a103.93,103.93,0,0,1-5.9,34.63,8,8,0,0,1-7.57,5.37H37.46a8.05,8.05,0,0,1-7.57-5.41A104.06,104.06,0,0,1,24,151.19C24.44,94,71.73,47.49,129,48A104,104,0,0,1,232,152Z'/%3E%3Cpath fill='%23a3e635' d='M114.34,154.34l96-96a8,8,0,0,1,11.32,11.32l-96,96a8,8,0,0,1-11.32-11.32ZM128,88a63.9,63.9,0,0,1,20.44,3.33,8,8,0,1,0,5.11-15.16A80,80,0,0,0,48.49,160.88,8,8,0,0,0,56.43,168c.29,0,.59,0,.89-.05a8,8,0,0,0,7.07-8.83A64.92,64.92,0,0,1,64,152,64.07,64.07,0,0,1,128,88Zm99.74,13a8,8,0,0,0-14.24,7.3,96.27,96.27,0,0,1,5,75.71l-181.1-.07A96.24,96.24,0,0,1,128,56h.88a95,95,0,0,1,42.82,10.5A8,8,0,1,0,179,52.27,110.8,110.8,0,0,0,129,40h-1A112.05,112.05,0,0,0,22.35,189.25,16.07,16.07,0,0,0,37.46,200H218.53a16,16,0,0,0,15.11-10.71,112.35,112.35,0,0,0-5.9-88.3Z'/%3E%3C/svg%3E"); }