/*
PRATHAV SHARED UI POLISH
UI PHASE 7
================================= */
:root {
  --pc-bg: #050505;
  --pc-surface: #0b1510;
  --pc-card: #101c16;
  --pc-primary: #00e676;
  --pc-primary-soft: rgba(0, 230, 118, 0.14);
  --pc-text: #ffffff;
  --pc-muted: #9ca3af;
  --pc-danger: #ff4d4d;
  --pc-warning: #f5c542;
  --pc-border: rgba(255, 255, 255, 0.08);
  --pc-radius-card: 8px;
  --pc-radius-control: 8px;
  --pc-space-xs: 4px;
  --pc-space-sm: 8px;
  --pc-space-md: 12px;
  --pc-space-lg: 16px;
  --pc-space-card: 20px;
  --pc-space-xl: 24px;
  --pc-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pc-app-card,
.pc-insight-card {
  border-radius: var(--pc-radius-card);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.26);
  color: var(--pc-text);
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-sm);
  min-width: 0;
  overflow: hidden;
  padding: var(--pc-space-card);
}

.pc-app-card {
  background: var(--pc-card);
  border: 1px solid var(--pc-border);
}

.pc-insight-card {
  background: var(--pc-primary-soft);
  border: 1px solid rgba(0, 230, 118, 0.28);
  line-height: 1.55;
}

.pc-app-card__title {
  color: var(--pc-muted);
  font-family: var(--pc-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 var(--pc-space-sm);
}

.pc-app-card__value {
  color: var(--pc-text);
  font-family: var(--pc-font);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  overflow-wrap: anywhere;
}

.pc-app-card__meta {
  color: var(--pc-muted);
  font-family: var(--pc-font);
  font-size: 13px;
  line-height: 1.5;
  margin-top: var(--pc-space-sm);
  overflow-wrap: anywhere;
}

.pc-data-row {
  align-items: center;
  border-bottom: 1px solid var(--pc-border);
  display: flex;
  gap: var(--pc-space-md);
  justify-content: space-between;
  min-width: 0;
  padding: 10px 0;
}

.pc-data-row__label {
  color: var(--pc-muted);
  font-family: var(--pc-font);
  font-size: 13px;
  line-height: 1.4;
}

.pc-data-row__value {
  color: var(--pc-text);
  font-family: var(--pc-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: right;
}

.pc-app-button,
.pc-nav-item {
  border-radius: var(--pc-radius-control);
  font-family: var(--pc-font);
  font-weight: 700;
  white-space: nowrap;
}

.pc-app-button {
  align-items: center;
  background: var(--pc-primary);
  border: 0;
  color: #041008;
  display: inline-flex;
  min-height: 40px;
  padding: 0 var(--pc-space-lg);
}

.pc-dashboard-summary-card {
  background: linear-gradient(180deg, rgba(0, 230, 118, 0.12), rgba(16, 28, 22, 0.98));
}

.pc-asset-card {
  min-height: 116px;
}

.pc-asset-summary-card {
  min-height: 124px;
}

.pc-asset-summary-card .pc-app-card__value,
.pc-asset-card .pc-app-card__value {
  color: var(--pc-primary);
}

.pc-transaction-card,
.pc-simulation-card {
  margin: 0 0 var(--pc-space-md);
}

.pc-empty-state-card {
  border-style: dashed;
  color: var(--pc-muted);
}

.pc-insight-card--score,
.pc-insight-card--profile {
  background: var(--pc-card);
  border-color: var(--pc-border);
}

.pc-insight-card--warning,
.pc-insight-card--high,
.pc-insight-card--urgent {
  background: rgba(245, 197, 66, 0.12);
  border-color: rgba(245, 197, 66, 0.34);
}

.pc-insight-card--danger {
  background: rgba(255, 77, 77, 0.12);
  border-color: rgba(255, 77, 77, 0.34);
}

.pc-insight-card--elite,
.pc-insight-card--premium {
  background: linear-gradient(180deg, rgba(0, 230, 118, 0.16), rgba(16, 28, 22, 0.96));
  border-color: rgba(0, 230, 118, 0.36);
}

.pc-nav-bar {
  align-items: center;
  background: rgba(11, 21, 16, 0.96);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-card);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-space-sm);
  justify-content: center;
  padding: var(--pc-space-sm);
}

.pc-nav-item {
  background: transparent;
  border: 1px solid transparent;
  color: var(--pc-muted);
  cursor: pointer;
  font-size: 13px;
  min-height: 36px;
  padding: 0 var(--pc-space-md);
}

.pc-nav-item--active {
  background: var(--pc-primary-soft);
  border-color: rgba(0, 230, 118, 0.32);
  color: var(--pc-primary);
}

.pc-legal-footer {
  align-items: center;
  border-top: 1px solid var(--pc-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-space-md);
  justify-content: center;
  margin: var(--pc-space-xl) auto 0;
  max-width: 1100px;
  padding: var(--pc-space-lg);
}

.pc-legal-footer a,
.pc-legal-page a {
  color: var(--pc-primary);
  font-weight: 700;
  text-decoration: none;
}

.pc-legal-page {
  background: var(--pc-bg);
  color: var(--pc-text);
  font-family: var(--pc-font);
  min-height: 100vh;
  padding: var(--pc-space-xl);
}

.pc-legal-card {
  margin: 0 auto;
  max-width: 860px;
}

.pc-legal-card h1,
.pc-legal-card h2 {
  color: var(--pc-text);
  line-height: 1.25;
}

.pc-legal-card p {
  color: var(--pc-muted);
  line-height: 1.65;
}

.dashboard-section,
.strategy-box,
.card {
  min-width: 0;
}

.grid {
  align-items: stretch;
  display: grid;
  gap: var(--pc-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

@media (max-width: 900px) {
  .pc-app-card,
  .pc-insight-card {
    padding: var(--pc-space-lg);
  }

  .pc-app-card__value {
    font-size: 24px;
  }

  .pc-nav-bar {
    justify-content: flex-start;
    overflow-x: auto;
  }
}

@media (max-width: 560px) {
  .pc-app-card__value {
    font-size: 22px;
  }

  .pc-data-row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--pc-space-xs);
  }

  .pc-data-row__value {
    text-align: left;
  }

  .grid {
    grid-template-columns: 1fr;
  }
}

/*
FILE ROLE: UI
CURRENT LAYER: WEB
TARGET LAYER: WEB
ACTION: FREEZE
STATUS: FREEZE (DO NOT MODIFY UNTIL PHASE 3)

DEPENDENCIES:
- Uses DOM? NO
- Uses localStorage? NO
- Uses API? NO

NOTES:
Main web CSS and responsive/PWA styling; freeze until unified UI system phase.
*/

    style>
/* ===============================
🧠 FORM FOCUS SYSTEM (GLOBAL)
=============================== */
input:focus,
select:focus {
  outline: none;
  border: 1px solid var(--brand-green);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

/* ===============================
🔘 PRIMARY ACTION BUTTON
=============================== */
#set-strategy-btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
}

/* ===============================
🎯 MODE TOGGLE SYSTEM (GOAL / RISK)
=============================== */
.goal-system,
.risk-system {
  background-color: var(--brand-green) !important;
  color: white !important;
  border: none;
}

.goal-custom,
.risk-custom {
  background-color: #374151 !important;
  color: white !important;
  border: none;
}

/* ===============================
âž• MODAL ACTION BUTTON
=============================== */
#modal-add-btn {
  background: var(--brand-green);
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

/* ===============================
🖱️ GLOBAL BUTTON HOVER SYSTEM
=============================== */
button:hover {
  background: var(--brand-green);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* ===============================
💸 QUICK CASH INPUT SYSTEM
=============================== */
.quick-cash {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.cash-quick {
  background: #020617;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}

.cash-quick:hover {
  background: var(--brand-green);
}

/* ===============================
🧭 SCREEN CONTROLLER SYSTEM
=============================== */
.screen {
  display: none;
}

.screen.active {
  display: block;
}

/* ===============================
🪟 MODAL UI SYSTEM
=============================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: var(--card-bg);
  border-radius: 16px;
  width: 460px;
  max-width: 92%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 26px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
}

.modal-header {
  display: grid;
  grid-template-columns: 36px 1fr auto 36px;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

#modal-icon {
  font-size: 20px;
}

#modal-title {
  text-align: center;
  font-size: 18px;
  letter-spacing: 1px;
}

.modal-close {
  background: #ef4444;
  color: white;
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: #dc2626;
}

/* ===============================
📊 MARKET STATUS BAR
=============================== */
.market-bar {
  display: flex;
  justify-content: center;
  gap: 28px;
  background: #020617;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 25px;
  font-size: 14px;
}

.m-pos {
  color: var(--brand-green);
  font-weight: 600;
}

.m-neg {
  color: #ef4444;
  font-weight: 600;
}

/* ===============================
🧭 NAVIGATION SYSTEM
=============================== */
h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  margin-bottom: 18px;
}

.nav {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
  background: #020617;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.nav button.active {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #ffffff;
  border: 1px solid #22c55e;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.45);
}

/* ===============================
📊 DATA DISPLAY SYSTEM (ROW UI)
=============================== */
.data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 10px;

  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.08);

  transition: all 0.2s ease;
}

.data-row:hover {
  transform: translateX(3px);
  background: rgba(34,197,94,0.06);
  border: 1.5px solid rgba(34,197,94,0.4);
  box-shadow: 0 0 10px rgba(34,197,94,0.15);
}

.data-name {
  font-size: 14px;
  color: var(--text-soft);
}

.data-name span,
.data-row span {
  font-size: 17px;
}

.data-value {
  color: var(--brand-green);
  font-weight: 600;
  font-size: 15px;
}

/* ===============================
✏️ DATA INPUT SYSTEM
=============================== */
.data-input {
  display: flex;
  align-items: center;
  gap: 6px;
}

.data-input input {
  width: 60px;
  padding: 5px;
  text-align: right;
  border-radius: 6px;
  border: 1px solid #444;
  background: #111;
  color: #fff;
}

.data-input span {
  color: #aaa;
  font-size: 13px;
}

/* ===============================
🔤 TEXT OVERRIDE (ROW LABELS)
=============================== */
.row span {
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 600;
}

/* ===============================
🔢 NUMBER INPUT CLEANUP
=============================== */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* ===============================
💸 CASH ACTION BUTTONS
=============================== */
.btn-deposit {
  background: var(--brand-green);
}

.btn-deposit:hover {
  background: #168a52;
}

.btn-withdraw {
  background: #dc3545;
}

.btn-withdraw:hover {
  background: #b02a37;
}

/* ===============================
🎨 GLOBAL THEME SYSTEM
=============================== */
:root {
  --brand-blue: #1f4e79;
  --brand-green: #22c55e;
  --brand-gold: #facc15;

  --app-bg: linear-gradient(135deg, #020617, #0f172a, #1e293b);
  --card-bg: #111827;

  --text-main: #e5e7eb;
  --text-soft: #9ca3af;
}

/* ===============================
🌍 GLOBAL APP LAYOUT
=============================== */
body {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  background: var(--app-bg);
  color: var(--text-main);
  margin: 0;
  padding: 2px;
  line-height: 1.5;
}

/* ===============================
🏷️ BRAND HEADER SYSTEM
=============================== */
.brand-header {
  text-align: center;
  margin-bottom: 30px;
}

.earth-logo {
  width: min(360px, 90vw);
  aspect-ratio: 1;
  margin: 0 auto 8px;
  position: relative;
}

.earth-gif {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.earth-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
  pointer-events: none;
}

.brand-title {
  font-size: 50px;
  font-weight: 900;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 1px;
}

.tagline-main {
  font-family: 'Poppins', sans-serif;
  font-size: 45px;
  font-weight: 900;
  margin-top: 9px;
}

.tagline-sub {
  font-family: 'Open Sans', sans-serif;
  font-size: 22px;
  color: #5fef8ae2;
  letter-spacing: 1px;
  margin-top: 9px;
}

/* ===============================
📊 DASHBOARD CONTAINER
=============================== */
.dashboard-section {
  background: #020617;
  padding: 20px;
  margin-bottom: 5px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 2px solid var(--brand-green);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.7),
    0 0 24px rgba(0, 255, 150, 0.08);
}

.dashboard-section::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(0, 255, 150, 0.08),
    transparent 40%
  );
  pointer-events: none;
}

.dashboard-section:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 10px 40px rgba(0, 255, 150, 0.15),
    0 14px 34px rgba(0,0,0,0.72);
}

#total-val {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--brand-green);
  margin-bottom: 8px;
}

/* ===============================
🧩 GRID SYSTEM
=============================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

/* ===============================
🧱 DASHBOARD CARD SYSTEM (IMPORTANT)
=============================== */
.dashboard-card {
  background: #020617;
  padding: 20px;
  border-radius: 16px;
  min-width: 150px;

  border: 2px solid var(--brand-green);
  box-shadow: 0 0 15px rgba(34,197,94,0.25);

  text-align: center;
  font-weight: 600;
  cursor: pointer;

  transition: all 0.25s ease;
}

.dashboard-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow:
    0 0 25px rgba(34,197,94,0.4),
    0 15px 50px rgba(0,0,0,0.7);

  border-color: #4ade80;
}

.dashboard-card:active {
  transform: scale(0.96);
  box-shadow: 0 0 10px rgba(34,197,94,0.3);
}

.dashboard-card div {
  font-size: 22px;
  font-weight: 700;
  margin-top: 8px;
  color: var(--brand-green);
}



/* ===============================
🔥 STRATEGY UI PREMIUM CLEAN FINAL
=============================== */

/* MAIN */
.strategy-main-box {
  padding: 20px;
  background: #020617;
  border: 2px solid rgba(34,197,94,0.6);
  border-radius: 20px;
  box-shadow: 0 0 25px rgba(34,197,94,0.15);
}

/* GRID */
.strategy-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.strategy-left,
.strategy-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===============================
📦 MAIN BOX
=============================== */
.strategy-box {
  background: linear-gradient(145deg, #02120a, #020617);
  border: 2px solid rgba(34,197,94,0.55);
  border-radius: 16px;
  padding: 18px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  transition: 0.3s ease;
  box-shadow: 0 0 10px rgba(34,197,94,0.15);
}

.strategy-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 25px rgba(34,197,94,0.35);
  border-color: #22c55e;
}
/* ===============================
✨ INNER FIELD GLOW
=============================== */

.strategy-box input,
.strategy-box select,
.strategy-box .form-row div,
.crypto-half {
  box-shadow: 0 0 4px rgba(34,197,94,0.15);
  transition: 0.2s ease;
}

.strategy-box input:hover,
.strategy-box select:hover,
.strategy-box .form-row div:hover,
.crypto-half:hover {
  box-shadow: 0 0 10px rgba(34,197,94,0.35);
  border-color: #22c55e;
}

/* ===============================
🧠 HEADINGS CENTER
=============================== */
.strategy-box h3 {
  color: #facc15;
  font-size: 18px;
  text-align: center;
  margin-bottom: 8px;
}

/* ===============================
🤖 AI CARDS GLASSMORPHISM
=============================== */
.strategy-box.ai-card {
  backdrop-filter: blur(12px);
  background: rgba(2, 6, 23, 0.85);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-top: 3px solid #22c55e;
  border-radius: 20px;
  padding: 20px;
  box-shadow:
    0 -8px 25px rgba(34, 197, 94, 0.25),
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(34, 197, 94, 0.2);
  transition: all 0.4s ease;
}

.strategy-box.ai-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 -12px 35px rgba(34, 197, 94, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(34, 197, 94, 0.3);
  border-color: rgba(34, 197, 94, 0.6);
}

/* ===============================
🔥 PREMIUM CARDS ENHANCED
=============================== */
.strategy-box.premium {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(4, 28, 20, 0.9), rgba(2, 6, 23, 0.9));
  border: 2px solid rgba(250, 204, 21, 0.5);
  border-top: 3px solid #facc15;
  box-shadow:
    0 -12px 30px rgba(250, 204, 21, 0.3),
    0 0 20px rgba(250, 204, 21, 0.2),
    inset 0 1px 0 rgba(250, 204, 21, 0.2);
}

/* ===============================
🔥 PREMIUM AI CARDS (OVERRIDE)
=============================== */
.strategy-box.premium.ai-card {
  backdrop-filter: blur(12px);
  background: linear-gradient(135deg, rgba(4, 28, 20, 0.9), rgba(2, 6, 23, 0.9));
  border: 2px solid rgba(250, 204, 21, 0.5);
  border-top: 3px solid #facc15;
  box-shadow:
    0 -12px 30px rgba(250, 204, 21, 0.3),
    0 0 20px rgba(250, 204, 21, 0.2),
    inset 0 1px 0 rgba(250, 204, 21, 0.2);
}

.strategy-box.premium.ai-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 -16px 40px rgba(250, 204, 21, 0.4),
    0 12px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(250, 204, 21, 0.3);
  border-color: rgba(250, 204, 21, 0.8);
}

.strategy-box.premium::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(250, 204, 21, 0.12) 0%,
    rgba(250, 204, 21, 0.04) 50%,
    transparent 100%
  );
  animation: premiumGlow 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes premiumGlow {
  0%, 100% { transform: translate(-10%, -10%) rotate(0deg); }
  50% { transform: translate(10%, 10%) rotate(180deg); }
}

/* ===============================
🔒 LOCKED CARDS OVERLAY
=============================== */
.strategy-box.locked {
  position: relative;
}

.strategy-box.locked::after {
  content: "🔒";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: #facc15;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.6);
}

.strategy-box.locked:hover::after {
  transform: scale(1.1);
}

/* ===============================
📊 FORM ROW
=============================== */
.form-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px;
  align-items: center;
}

.form-row label {
  color: #f2e861;
  font-size: 13px;
}

/* ===============================
🟩 INPUTS SAME SIZE + RIGHT ALIGN
=============================== */
.strategy-box input,
.strategy-box select {
  height: 34px;
  width: 260px;
  padding: 4px 10px;           /* 🔥 thoda better spacing */
  font-size: 13px;

  border-radius: 8px;
  background: #010409;
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.4);

  transition: 0.2s ease;

  justify-self: end;           /* 🔥 box right */
  text-align: right;           /* 🔥 TEXT RIGHT (MAIN FIX) */
}

/* 🔥 FOCUS GLOW */
.strategy-box input:focus,
.strategy-box select:focus {
  border: 1px solid #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.5);
}

/* 🔥 HOVER GLOW */
.strategy-box input:hover,
.strategy-box select:hover {
  box-shadow: 0 0 10px rgba(34,197,94,0.3);
}
/* ===============================
📊 ACTIVE VALUE BOX
=============================== */
.strategy-box .form-row div {
  height: 34px;
  width: 260px;              /* 🔥 ADD THIS (same as input) */

  display: flex;
  align-items: center;
  justify-content: flex-end;

  justify-self: end;

  padding: 6px 10px;
  border-radius: 8px;

  background: #010409;
  color: #22c55e;

  border: 1px solid rgba(34,197,94,0.4);
  font-weight: 500;
  font-size: 13px;
}
/* ===============================
🎯 TARGET BUTTONS
=============================== */
.target-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.target-btn {
  padding: 7px;
  border-radius: 8px;
  border: 1px solid rgba(34,197,94,0.5);
  background: #020617;
  color: #22c55e;
  cursor: pointer;
  transition: 0.2s;
}

.target-btn:hover,
.target-btn.active {
  background: #22c55e;
  color: #000;
  box-shadow: 0 0 10px rgba(34,197,94,0.5);
}


/* ===============================
🎯 BUTTONS
=============================== */
#update-strategy-btn {
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: 0.2s;
}

#update-strategy-btn:hover {
  box-shadow: 0 0 15px rgba(34,197,94,0.6);
}

#optimize-btn {
  margin-top: 8px;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  font-weight: 600;
  border: none;
  cursor: pointer;
}

#optimize-btn:hover {
  box-shadow: 0 0 15px rgba(96,165,250,0.6);
}

/* ===============================
📈 GOAL PROGRESS
=============================== */
.goal-hero {
  font-size: 26px;
  font-weight: 700;
  color: #22c55e;
  text-align: center;
}

.goal-progress-bar {
  height: 8px;
  background: #1f2937;
  border-radius: 10px;
  overflow: hidden;
}

#goal-progress-fill {
  height: 100%;
  width: 0%;
  background: #22c55e;
  transition: width 0.4s ease;
}

.goal-meta {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #facc15;
}
#allocationChart {
  width: 260px;
  height: 260px;
  margin: 0 auto;
  display: block;
}
/* ===============================
🚀 CRYPTO BOOST INLINE (FIXED)
=============================== */
.crypto-row-inline {
  display: flex;
  justify-content: flex-end;   /* 🔥 right align */
  gap: 10px;
}

.crypto-half {
  width: 125px;               /* 🔥 half of 260 */
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(34,197,94,0.4);
  border-radius: 8px;
  background: #010409;
}

.crypto-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #22c55e;
  font-size: 13px;
}

.crypto-inline input {
  width: 16px;
  height: 16px;
}

.crypto-half select {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: #22c55e;
  padding: 0 8px;
}

.crypto-half select:disabled {
  opacity: 0.5;
}

/* ===============================
💡 HINT
=============================== */
.crypto-hint {
  font-size: 12px;
  color: #94a3b8;
}








/* ===============================
🧠 AI POPUP
=============================== */
.ai-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.ai-popup.hidden {
  display: none;
}

.ai-popup-content {
  width: 90%;
  max-width: 400px;
  background: #020617;
  border-radius: 16px;
  padding: 20px;
  position: relative;

  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}

.ai-popup-close {
  position: absolute;
  right: 12px;
  top: 10px;
  cursor: pointer;
  font-size: 20px;
}


/* ===============================
⚡ PRATHAV ELITE — PREMIUM PANEL
=============================== */

#prathav-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

/* 🌌 OVERLAY */
.prathav-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

/* 💎 MAIN BOX (🔥 UPDATED) */
.prathav-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 420px;
  max-width: 95%;
  max-height: 90vh;
  overflow-y: auto;

  padding: 24px;
  border-radius: 12px;

  background: #020617;

  border: 1px solid rgba(34, 197, 94, 0.35);

  box-shadow:
    0 0 25px rgba(34, 197, 94, 0.15),
    inset 0 0 10px rgba(34, 197, 94, 0.08);

  color: #e2e8f0;
}
/* ===============================
🔥 GRID LAYOUT (PREMIUM PANEL)
=============================== */

.prathav-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;

  width: 720px;
  max-width: 95%;
  max-height: 90vh;
  overflow-y: auto;
}

/* FULL WIDTH BLOCK */
.prathav-full {
  grid-column: span 2;
}

/* CARD SYSTEM */
.prathav-card {
  background: #020617;
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 10px;
  padding: 12px;

  box-shadow: 0 0 10px rgba(34,197,94,0.1);
}

/* 🧠 HEADER */
.prathav-box h2 {
  font-size: 22px;
  font-weight: 600;
  color: #22c55e;
  margin-bottom: 10px;
}

/* 📊 SECTIONS */
.prathav-box h3 {
  font-size: 14px;
  margin-top: 14px;
  margin-bottom: 6px;
  color: #94a3b8;
}

.prathav-box p {
  font-size: 13px;
  margin: 4px 0;
  color: #e2e8f0;
}

.prathav-box ul {
  padding-left: 16px;
}

/* 🔥 DIVIDER */
.prathav-box hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(34,197,94,0.5),
    transparent
  );
  margin: 14px 0;
}

/* 🧾 PLAN CARDS (🔥 IMPROVED) */
.prathav-plan-card {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(34,197,94,0.25);

  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;

  transition: 0.2s;
}

.prathav-plan-card:hover {
  border-color: #22c55e;
  box-shadow: 0 0 10px rgba(34,197,94,0.2);
}

/* 🟢 STATUS COLORS */
.text-success {
  color: #22c55e;
}

.text-warning {
  color: #f59e0b;
}

.text-danger {
  color: #ef4444;
}

/* 💎 SCORE */
.prathav-score p {
  font-size: 20px;
  font-weight: 700;
  color: #22c55e;
}

/* âš¡ OPTIMIZATION */
.prathav-optimization p {
  color: #a78bfa;
}

/* 📊 ALLOCATION */
.prathav-allocation li {
  margin: 4px 0;
}

/* 🔘 BUTTONS */
.prathav-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.prathav-actions button {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
  transition: all 0.2s ease;
}

/* ✅ APPLY */
#prathav-apply-btn {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #022c22;

  box-shadow: 0 0 12px rgba(34,197,94,0.4);
}

#prathav-apply-btn:hover {
  transform: scale(1.05);
}

/* ❌ CLOSE */
#prathav-close-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;

  box-shadow: 0 0 10px rgba(239,68,68,0.3);
}

#prathav-close-btn:hover {
  transform: scale(1.05);
}

/* 🧊 SCROLL */
.prathav-box::-webkit-scrollbar {
  width: 5px;
}

.prathav-box::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 10px;
}
#allocationChart {
  width: 100% !important;
  height: 300px !important;
  display: block;
}


/* ===============================
 🧠 AI CARD INTERACTION + LOCK SYSTEM 
 =============================== */
/* GRID FIX */
.ai-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 16px;
}

/* CARD HEIGHT CONSISTENCY */
.ai-card {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* EMPTY CARD (balance grid) */
.empty-card {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* HEADER */
.ai-card-header {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 13px;
  color: #e2e8f0;
}

/* BODY */
.ai-card-body {
  font-size: 13px;
  color: #cbd5f5;
  line-height: 1.5;
}

/* PREMIUM TUNING (less aggressive) */
.ai-card.premium {
  background: linear-gradient(180deg, #052e1f, #031a12);
  border: 1px solid rgba(34,197,94,0.25);
}

/* HOVER CONTROL */
.ai-card:hover {
  transform: translateY(-3px);
}

/* MOBILE */
@media (max-width: 768px) {
  .ai-grid-2 {
    grid-template-columns: 1fr;
  }
}
.strategy-box.locked {
  position: relative;
  overflow: hidden;
}
/* ===============================
🔥 PREMIUM GLASS EFFECT
=============================== */

.strategy-box.premium {
  position: relative;
  overflow: hidden;

  background: linear-gradient(180deg, #041c14, #020617);
  border: 1px solid rgba(34, 197, 94, 0.25);

  box-shadow:
    0 0 12px rgba(34, 197, 94, 0.15),
    inset 0 0 8px rgba(34, 197, 94, 0.08);

  transition: all 0.3s ease;
}

/* 🟢 SOFT GLOW ON HOVER */
.strategy-box.premium:hover {
  box-shadow:
    0 0 20px rgba(34, 197, 94, 0.25),
    inset 0 0 12px rgba(34, 197, 94, 0.12);
}

/* 🌊 STRONGER LIQUID LIGHT */
.strategy-box.premium::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;

  background: radial-gradient(
    circle,
    rgba(16, 185, 129, 0.22),   /* darker green */
    rgba(0, 0, 0, 0.25),        /* depth added */
    transparent 300%
  );

  animation: liquidMove 5s ease-in-out infinite;
  pointer-events: none;
  opacity: 10; /* थोड़ा strong */
}
@keyframes liquidMove {
  0% {
    transform: translate(-10%, -10%) rotate(0deg);
  }
  50% {
    transform: translate(10%, 10%) rotate(180deg);
  }
  100% {
    transform: translate(-10%, -10%) rotate(360deg);
  }
}

@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    width: 100%;
    padding-bottom: 96px;
  }

  #app {
    width: 100%;
    overflow-x: hidden;
  }

  .screen {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding-bottom: 110px;
  }

  .dashboard-section,
  .strategy-box,
  .strategy-main-box {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    margin: 8px auto;
    box-sizing: border-box;
  }

  .strategy-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .strategy-left,
  .strategy-right {
    width: 100%;
    max-width: 100%;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  input,
  select,
  button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px;
  }

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

  .chart-panel,
  #allocationChart {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }

  .nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 6px;
    max-height: 92px;
    overflow-y: auto;
    background: rgba(2, 6, 23, 0.96);
    border-top: 1px solid rgba(34, 197, 94, 0.45);
  }

  .nav button {
    min-height: 34px;
    padding: 6px 4px;
    font-size: 12px;
    border-radius: 8px;
  }

  .modal {
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    margin: 10px auto 110px;
    border-radius: 18px;
  }

  .modal-header {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 8px;
  }

  #modal-title {
    font-size: 20px;
  }

  #modal-add-btn {
    width: auto;
    min-width: 90px;
    padding: 8px 10px;
  }

  .modal-close {
    width: 44px;
    height: 44px;
  }

  .brand-title {
    font-size: 28px;
    line-height: 1.15;
    text-align: center;
  }

  .tagline-main {
    font-size: 18px;
  }

  .tagline-sub {
    font-size: 14px;
  }

  .earth-logo,
  .earth-gif,
  .earth-overlay {
    max-width: 120px;
    max-height: 120px;
  }

  .modal-overlay {
    align-items: flex-start;
    overflow-y: auto;
  }

  canvas {
    max-width: 100%;
    height: auto;
  }
}

/* ======================================================
MOBILE FINTECH REDESIGN SYSTEM
====================================================== */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  :root {
    --mobile-bg: #0b1220;
    --mobile-bg-soft: #0f172a;
    --mobile-card: #172133;
    --mobile-card-deep: #111827;
    --mobile-text: #f8fafc;
    --mobile-muted: #94a3b8;
    --mobile-green: #22c55e;
    --mobile-teal: #2dd4bf;
    --mobile-red: #ef4444;
    --mobile-gold: #facc15;
    --mobile-border: rgba(148, 163, 184, 0.18);
  }

  * {
    box-sizing: border-box;
  }

  body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0 0 118px;
    background:
      radial-gradient(circle at 50% 0%, rgba(45, 212, 191, 0.12), transparent 34%),
      var(--mobile-bg);
    color: var(--mobile-text);
    font-family: "Open Sans", system-ui, sans-serif;
  }

  #app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .screen {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding: 0 0 122px;
  }

  .brand-header {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    column-gap: 12px;
    width: 100%;
    padding: 18px 18px 14px;
    margin: 0;
    text-align: left;
    background: #08101f;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }

  .earth-logo {
    grid-row: span 3;
    width: 56px;
    height: 56px;
    max-width: 56px;
    max-height: 56px;
  }

  .earth-gif,
  .earth-overlay {
    max-width: 56px;
    max-height: 56px;
  }

  .brand-title {
    font-size: 26px;
    line-height: 1.08;
    letter-spacing: 4px;
    text-align: left;
    color: var(--mobile-teal);
    margin: 0;
  }

  .tagline-main,
  .tagline-sub {
    font-size: 12px;
    color: var(--mobile-muted);
    margin: 2px 0 0;
  }

  .market-bar {
    justify-content: flex-start;
    gap: 26px;
    width: 100%;
    padding: 12px 18px 14px;
    margin: 0;
    overflow-x: auto;
    white-space: nowrap;
    background: #0a1020;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    scrollbar-width: none;
  }

  .market-bar::-webkit-scrollbar {
    display: none;
  }

  .market-bar div {
    flex: 0 0 auto;
    color: var(--mobile-muted);
    font-size: 12px;
  }

  .m-pos {
    color: var(--mobile-green);
  }

  .m-neg {
    color: var(--mobile-red);
  }

  .dashboard-section,
  .strategy-main-box,
  .strategy-box {
    width: calc(100% - 36px);
    max-width: calc(100% - 36px);
    margin: 14px auto;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, var(--mobile-card), var(--mobile-card-deep));
    border: 1px solid var(--mobile-border);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
    overflow: hidden;
  }

  .dashboard-section::before {
    opacity: 0.45;
  }

  .dashboard-section:hover,
  .strategy-box:hover,
  .dashboard-card:hover,
  .ai-card:hover {
    transform: none;
  }

  .dashboard-section h3,
  .strategy-box h3,
  .strategy-main-box h3 {
    margin: 0 0 14px;
    color: var(--mobile-muted);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 5px;
    text-transform: uppercase;
  }

  #sc-dash > .dashboard-section:first-child {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 34px 18px 24px;
    border: 0;
    border-radius: 0;
    background:
      linear-gradient(180deg, rgba(13, 148, 136, 0.1), rgba(15, 23, 42, 0.1)),
      #0a1020;
    box-shadow: none;
  }

  #sc-dash > .dashboard-section:first-child h3 {
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--mobile-muted);
    letter-spacing: 7px;
  }

  #total-val {
    font-size: 52px;
    line-height: 1;
    color: #d7fbff;
    font-weight: 900;
    letter-spacing: 0;
  }

  #total-invested,
  #total-pnl {
    margin-top: 10px;
    color: var(--mobile-muted);
    font-size: 15px;
  }

  #total-pnl {
    color: var(--mobile-red);
    font-weight: 800;
  }

  #sc-dash > .dashboard-section:nth-of-type(2) h3::before {
    content: "PORTFOLIO BREAKDOWN";
  }

  #sc-dash > .dashboard-section:nth-of-type(2) h3 {
    font-size: 0;
  }

  #sc-dash > .dashboard-section:nth-of-type(2) h3::before {
    font-size: 13px;
    letter-spacing: 5px;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 6px;
  }

  .card {
    min-height: 132px;
    padding: 20px 16px;
    border-radius: 20px;
    background: #172133;
    border: 1px solid var(--mobile-border);
    color: var(--mobile-muted);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  .card-stocks {
    border-top: 4px solid #3b82f6;
  }

  .card-mf {
    border-top: 4px solid var(--mobile-green);
  }

  .card-crypto {
    border-top: 4px solid #f59e0b;
  }

  .card-gold {
    border-top: 4px solid var(--mobile-gold);
  }

  .card-cash {
    border-top: 4px solid var(--mobile-teal);
  }

  .card div {
    margin-top: 8px;
    color: var(--mobile-text);
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0;
  }

  .data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }

  .data-row:last-child {
    border-bottom: 0;
  }

  .data-name {
    color: var(--mobile-muted);
    font-size: 14px;
  }

  .data-value {
    color: var(--mobile-text);
    font-size: 16px;
    font-weight: 800;
    text-align: right;
  }

  #health-score,
  #health-diversification,
  #health-risk,
  #health-warnings,
  #investment-guidance,
  #advanced-risk-summary,
  #tax-summary,
  #portfolio-analytics,
  #portfolio-timeline {
    color: var(--mobile-text);
    font-size: 14px;
    line-height: 1.55;
  }

  .health-bar {
    height: 7px;
    background: rgba(148, 163, 184, 0.14);
    border-radius: 999px;
    overflow: hidden;
  }

  #health-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mobile-teal), #60a5fa);
  }

  .strategy-main-box {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .strategy-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    gap: 14px;
  }

  .strategy-left,
  .strategy-right,
  .strategy-box.full-width {
    width: 100%;
    max-width: 100%;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }

  .form-row label {
    color: var(--mobile-muted);
    font-size: 13px;
    letter-spacing: 1px;
  }

  input,
  select,
  textarea,
  button {
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    border-radius: 14px;
    font-size: 16px;
  }

  input,
  select,
  textarea {
    background: #0b1220;
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text);
    padding: 12px 14px;
  }

  button {
    border: 1px solid rgba(34, 197, 94, 0.45);
    background: linear-gradient(135deg, var(--mobile-green), var(--mobile-teal));
    color: #04111d;
    font-weight: 800;
  }

  .target-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .target-grid button {
    min-height: 42px;
    font-size: 13px;
  }

  .chart-panel {
    display: grid;
    place-items: center;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }

  #allocationChart,
  canvas {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .strategy-box.ai-card {
    min-height: 128px;
    border: 1px solid rgba(45, 212, 191, 0.25);
    background: linear-gradient(180deg, rgba(23, 33, 51, 0.96), rgba(17, 24, 39, 0.96));
  }

  .strategy-box.premium.ai-card {
    border: 1px solid rgba(250, 204, 21, 0.34);
    background: linear-gradient(180deg, rgba(40, 34, 15, 0.92), rgba(17, 24, 39, 0.98));
    box-shadow: 0 0 24px rgba(250, 204, 21, 0.08);
  }

  .ai-card h3 {
    color: var(--mobile-text);
    letter-spacing: 1px;
    text-transform: none;
  }

  .modal-overlay {
    align-items: flex-end;
    overflow-y: auto;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(8px);
  }

  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    margin: 0;
    border-radius: 26px 26px 0 0;
    overflow-y: auto;
    background: #111827;
    border: 1px solid var(--mobile-border);
    padding-bottom: 24px;
  }

  .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 14px;
    background: rgba(17, 24, 39, 0.96);
    border-bottom: 1px solid var(--mobile-border);
  }

  #modal-title {
    color: var(--mobile-text);
    font-size: 18px;
    text-align: left;
  }

  #modal-add-btn {
    width: auto;
    min-width: 92px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 12px;
  }

  .modal-close {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 50%;
    background: var(--mobile-red);
    color: #fff;
  }

  #modal-content {
    padding: 14px;
  }

  #modal-content input,
  #modal-content select,
  #modal-content button {
    width: 100%;
    margin-top: 8px;
  }

  .nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 9999;
    display: grid;
    grid-template-columns: repeat(5, minmax(62px, 1fr));
    gap: 4px;
    max-height: 96px;
    margin: 0;
    padding: 10px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    background: rgba(8, 16, 31, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-top: 1px solid rgba(45, 212, 191, 0.28);
    border-radius: 24px;
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.46), 0 0 24px rgba(34, 197, 94, 0.1);
    backdrop-filter: blur(16px);
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav button {
    min-width: 62px;
    min-height: 56px;
    padding: 4px 2px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--mobile-muted);
    font-size: 11px;
    line-height: 1.1;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .nav button::before {
    content: "•";
    font-size: 22px;
    line-height: 1;
  }

  .nav button[data-nav="dash"]::before {
    content: "⌂";
  }

  .nav button[data-nav="stocks"]::before {
    content: "↗";
  }

  .nav button[data-nav="mf"]::before {
    content: "â–£";
  }

  .nav button[data-nav="crypto"]::before {
    content: "â‚¿";
  }

  .nav button[data-nav="analysis"]::before {
    content: "⌕";
  }

  .nav button.active {
    background: rgba(34, 197, 94, 0.12);
    color: var(--mobile-green);
    border: 1px solid rgba(34, 197, 94, 0.22);
  }
}