/* ===== FX Notes – Compat layer (safe to remove later) ===== */

/* 1) Base / type */
:root{
    --fx-bg: #f6f7fb;
    --fx-surface: #ffffff;
    --fx-text: #15161a;
    --fx-muted: #6b7180;
    --fx-radius: 16px;
    --fx-shadow: 0 8px 24px rgba(18, 21, 31, .06);
    --fx-gap: 24px;
    --fx-gap-lg: 28px;
  }
  html,body{ background:var(--fx-bg); color:var(--fx-text); font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji",sans-serif; }
  
  /* 2) Shell/layout */
  .fx-shell{ display:grid; grid-template-columns: 260px 1fr; min-height:100vh; }
  .fx-content{ background:var(--fx-bg); }
  .fx-container{ max-width: 1200px; margin: 0 auto; padding: var(--fx-gap-lg); }
  
  /* 3) Cards */
  .fx-card{
    background: var(--fx-surface);
    border-radius: var(--fx-radius);
    box-shadow: var(--fx-shadow);
    padding: 18px 20px;
  }
  .fx-card .fx-card-title{ font-weight:400; font-size:30px; }
  
  /* 4) Hero header on pages */
  .fx-hero{ display:flex; align-items:center; justify-content:space-between; padding:24px; }
  .fx-hero .fx-hero-stack .fx-h1{ font-size:28px; line-height:1.2; margin:0 0 6px; }
  .fx-hero .fx-sub{ color:var(--fx-muted); }
  
  /* 5) Grid on dashboard */
  .fx-grid{ 
    display:grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    gap: var(--fx-gap);
  }
  .fx-row-50{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--fx-gap); }
  
  /* Responsive */
  @media (max-width: 1200px){ .fx-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 900px){ 
    .fx-shell{ grid-template-columns: 80px 1fr; }
    .fx-grid, .fx-row-50{ grid-template-columns: 1fr; }
  }
  
  /* 6) KPIs (make the four tiles look like the design) */
  .fx-kpis{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--fx-gap); }
  .fx-kpi{
    background: var(--fx-surface);
    border-radius: var(--fx-radius);
    box-shadow: var(--fx-shadow);
    padding:16px 18px;
  }
  .fx-kpi-label{ color:var(--fx-muted); font-size:12px; margin-bottom:4px; }
  .fx-kpi-value{ font-size:22px; font-weight:700; }
  
  /* 7) Recent trades list (card rows) */
  .fx-rows-cards{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }
  .fx-rows-cards > li{
    background: var(--fx-surface);
    border-radius: 12px;
    box-shadow: var(--fx-shadow);
    padding:12px 14px;
  }
  
  /* 8) Calendar summary (mini KPIs) */
  .fx-calendar .fx-summary-kpi{ 
    background: var(--fx-surface);
    border-radius: 12px;
    box-shadow: var(--fx-shadow);
    padding:12px 14px; 
  }
  
  /* 9) Topbar quick polish */
  .fx-topbar{ 
    height:60px; display:flex; align-items:center; justify-content:space-between; 
    padding: 0 16px; background: var(--fx-surface);
    box-shadow: 0 1px 0 rgba(18,21,31,.06);
  }
  .fx-burger, .fx-icon-btn{ background:#fff; border:1px solid rgba(18,21,31,.08); border-radius:10px; height:36px; padding:0 10px; }
  .fx-brand{ display:flex; align-items:center; gap:8px; font-weight:700; }
  .fx-helpchip .chip{ background:linear-gradient(90deg,#a3a7ff,#f49fd4); -webkit-background-clip:text; background-clip:text; color:transparent; }