@media (max-width: 767px) {
    .css-ujflofkfj{
        width: 100%;
    }
    .qe-mobile-premium-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 999px;
    color: #93c5fd;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    background: rgba(30, 64, 175, 0.08);
}
.css-ujflofkfj section{
    padding: 10px !important;
}
#resultsSection{
    padding: 0px !important;
}
.qe-mobile-premium-locked::after{
    display: none !important;
}

    .popular-strategy-btn{
        min-width: 120px !important;
    }
  /* =========================================================
   STRATEGY LEGS BUILDER
   MOBILE CARD SYSTEM
   ---------------------------------------------------------
   IMPORTANT:
   Desktop is NOT modified.
   ========================================================= */

  .legs-mobile-container {
    display: none;
  }

  /* =========================================================
   MOBILE ONLY
   ========================================================= */

  @media (max-width: 767px) {
    .strategy-legs-section {

        padding: 14px !important;

        border-radius: 16px !important;

    }

    .strategy-legs-section
    > div:first-child {

        gap: 10px !important;

    }


    .strategy-legs-section
    > div:first-child
    > div:last-child {

        width: 100%;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 7px;

    }


    .strategy-legs-section
    > div:first-child
    > div:last-child button {

        width: 100%;

        justify-content: center;

        padding-left: 8px !important;

        padding-right: 8px !important;

    }
    
    /* -----------------------------------------------------
       Prevent horizontal overflow inside strategy builder
       ----------------------------------------------------- */

    .css-ifkflmnfjk {
      overflow-x: hidden;
    }

    .css-ifkflmnfjk .css-yhlmfk {
      overflow-x: hidden;
    }

    /* -----------------------------------------------------
       Desktop table completely hidden
       ----------------------------------------------------- */

    #legsDesktopWrapper {
      display: none !important;
    }

    /* -----------------------------------------------------
       Mobile cards visible
       ----------------------------------------------------- */

    .legs-mobile-container {
      display: flex;

      flex-direction: column;

      gap: 10px;

      width: 100%;

      min-width: 0;
    }

    /* =====================================================
       LEG CARD
       ===================================================== */

    .leg-mobile-card {
      width: 100%;

      min-width: 0;

      background: linear-gradient(
        145deg,
        rgba(19, 28, 46, 0.98),
        rgba(11, 15, 25, 0.98)
      );

      border: 1px solid #1e293b;

      border-radius: 14px;

      padding: 12px;

      box-sizing: border-box;

      overflow: hidden;

      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    }

    /* =====================================================
       LEG HEADER
       ===================================================== */

    .leg-mobile-header {
      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 8px;

      min-width: 0;

      margin-bottom: 12px;

      padding-bottom: 10px;

      border-bottom: 1px solid rgba(30, 41, 59, 0.75);
    }

    .leg-mobile-header-left {
      display: flex;

      align-items: center;

      gap: 7px;

      min-width: 0;
    }

    .leg-mobile-badge {
      display: inline-flex;

      align-items: center;

      justify-content: center;

      min-width: 30px;

      /* height: 25px; */

      padding: 0 7px;

      border-radius: 7px;

      /* background: rgba(59, 130, 246, 0.12); */

      /* border: 1px solid rgba(59, 130, 246, 0.3); */

      color: #60a5fa;

      font-size: 11px;

      font-weight: 800;

      letter-spacing: 0.03em;
    }

    .leg-mobile-header-label {
      color: #94a3b8;

      font-size: 10px;

      font-weight: 600;

      text-transform: uppercase;

      letter-spacing: 0.06em;
    }

    /* =====================================================
       ACTION / OPTION SEGMENTED CONTROLS
       ===================================================== */

    .leg-mobile-toggle {
      display: inline-flex;

      align-items: center;

      gap: 2px;

      padding: 2px;

      border-radius: 8px;

      background: #0f172a;

      border: 1px solid #1e293b;
    }

    .leg-mobile-toggle button {
      height: 25px;

      min-width: 40px;

      padding: 0 8px;

      border: 0;

      border-radius: 6px;

      background: transparent;

      color: #64748b;

      font-size: 9px;

      font-weight: 700;

      cursor: pointer;

      transition: background 0.15s ease, color 0.15s ease;
    }

    .leg-mobile-toggle button.active {
      background: #2563eb;

      color: #ffffff;

      box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25);
    }

    .leg-mobile-toggle button.buy.active {
      background: #059669;
    }

    .leg-mobile-toggle button.sell.active {
      background: #ea580c;
    }

    .leg-mobile-toggle.option-toggle button.active {
      background: #334155;

      color: #ffffff;
    }

    /* =====================================================
       HEADER ACTION BUTTONS
       ===================================================== */

    .leg-mobile-actions {
      display: flex;

      align-items: center;

      gap: 2px;

      flex-shrink: 0;
    }

    .leg-mobile-icon-btn {
      width: 28px;

      height: 28px;

      display: inline-flex;

      align-items: center;

      justify-content: center;

      border: 1px solid transparent;

      border-radius: 7px;

      background: transparent;

      color: #64748b;

      cursor: pointer;

      transition: all 0.15s ease;
    }

    .leg-mobile-icon-btn:hover {
      background: #1e293b;

      color: #60a5fa;
    }

    .leg-mobile-icon-btn.delete:hover {
      color: #f87171;

      background: rgba(239, 68, 68, 0.08);
    }

    /* =====================================================
       FIELD LABEL
       ===================================================== */

    .leg-mobile-field {
      min-width: 0;
    }

    .leg-mobile-label {
      display: block;

      margin-bottom: 5px;

      color: #64748b;

      font-size: 9px;

      font-weight: 700;

      text-transform: uppercase;

      letter-spacing: 0.055em;
    }

    /* =====================================================
       STANDARD INPUT / SELECT
       ===================================================== */

    .leg-mobile-input {
      width: 100%;

      min-width: 0;

      height: 36px;

      box-sizing: border-box;

      background: #0f172a;

      border: 1px solid #1e293b;

      border-radius: 9px;

      padding: 0 10px;

      color: #e2e8f0;

      font-size: 11px;

      outline: none;

      transition: border-color 0.15s ease, background 0.15s ease;
    }

    .leg-mobile-input:focus {
      border-color: #3b82f6;

      background: #111c30;
    }

    /* =====================================================
       CONTRACT
       ===================================================== */

    .leg-mobile-contract {
      margin-bottom: 10px;
    }

    /* =====================================================
       STRIKE CONFIG
       ===================================================== */

    .leg-mobile-strike-grid {
      display: grid;

      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);

      gap: 8px;
    }

    /* =====================================================
       LOTS / TP / SL / TRAILING SL
       ===================================================== */

    .leg-mobile-risk-grid {
      display: grid;

      grid-template-columns: repeat(2, minmax(0, 1fr));

      gap: 8px;

      margin-top: 10px;
    }

    .leg-mobile-risk-control {
      display: grid;

      grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

      gap: 5px;

    }

    .leg-mobile-risk-control.single {
      display: block;
    }

    /* =====================================================
       ADJUSTMENT BUTTON
       ===================================================== */

    .leg-mobile-adjustment {
      width: 100%;

      min-width: 0;

      height: 38px;

      margin-top: 10px;

      display: flex;

      align-items: center;

      justify-content: center;

      gap: 7px;

      padding: 0 10px;

      border-radius: 9px;

      background: rgba(59, 130, 246, 0.08);

      border: 1px solid rgba(59, 130, 246, 0.25);

      color: #60a5fa;

      font-size: 10px;

      font-weight: 700;

      cursor: pointer;

      transition: all 0.15s ease;
    }

    .leg-mobile-adjustment:hover {
      background: rgba(59, 130, 246, 0.14);

      border-color: rgba(59, 130, 246, 0.4);
    }

    .leg-mobile-adjustment span {
      min-width: 0;

      overflow: hidden;

      text-overflow: ellipsis;

      white-space: nowrap;
    }

    /* =====================================================
       CARD SPACING
       ===================================================== */

    .leg-mobile-section {
      margin-top: 10px;
    }

    /* =====================================================
       VERY SMALL PHONES
       ===================================================== */

    @media (max-width: 360px) {
      .leg-mobile-card {
        padding: 10px;

        border-radius: 12px;
      }

      .leg-mobile-toggle button {
        min-width: 36px;

        padding: 0 6px;
      }

      .leg-mobile-risk-control {
        grid-template-columns:
          minmax(0, 0.85fr)
          minmax(0, 1.15fr);
      }
    }
  }

  /* ============================================================
   OPIFY BACKTESTER
   MOBILE / TABLET RESPONSIVE UI
   ------------------------------------------------------------
   IMPORTANT:
   - Scoped ONLY to .css-ifkflmnfjk
   - No calculation logic
   - No strategy logic
   - No existing IDs changed
   - No event handlers changed
   ============================================================ */

  /* ============================================================
   1. RESPONSIVE ROOT
   ============================================================ */
  /* Desktop navigation disappears */

  .backtest-desktop-tabs {
    display: none !important;
  }

  .css-odkdnnR {
    display: none;
  }

  /* Mobile navigation becomes active */

  .mobile-result-tabs {
    display: flex !important;
  }

  .css-ifkflmnfjk {
    --bt-mobile-gap: 12px;
    --bt-mobile-radius: 16px;
    --bt-touch-size: 44px;

    width: 100%;
    max-width: 100%;
    min-height: 100dvh;

    overflow-x: hidden;

    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    overscroll-behavior-x: none;
    height: 100dvh;
  }

  /*
 * Everything inside the backtester should calculate its width
 * from the available viewport instead of creating horizontal
 * overflow.
 */
  .css-ifkflmnfjk,
  .css-ifkflmnfjk *,
  .css-ifkflmnfjk *::before,
  .css-ifkflmnfjk *::after {
    box-sizing: border-box;
  }

  /* Prevent accidental horizontal overflow */
  .css-ifkflmnfjk img,
  .css-ifkflmnfjk video,
  .css-ifkflmnfjk canvas,
  .css-ifkflmnfjk svg {
    max-width: 100%;
  }

  /* ============================================================
   2. MAIN APP SHELL
   ============================================================ */

  .css-ifkflmnfjk .css-yhlmfk {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;

    overflow-x: hidden;
  }

  /* Main content */
  .css-ifkflmnfjk .css-thrlmrjki {
    width: 100%;
    max-width: 1280px;
    min-width: 0;

    margin-left: auto;
    margin-right: auto;
  }

  /* ============================================================
   3. TOUCH / TAP BEHAVIOUR
   ============================================================ */

  .css-ifkflmnfjk button,
  .css-ifkflmnfjk select,
  .css-ifkflmnfjk input,
  .css-ifkflmnfjk textarea,
  .css-ifkflmnfjk [role="button"] {
    touch-action: manipulation;
  }

  /* Native-feeling tap */
  .css-ifkflmnfjk button {
    -webkit-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;

    cursor: pointer;
  }

  /* Don't allow ugly tap flash */
  .css-ifkflmnfjk button,
  .css-ifkflmnfjk input,
  .css-ifkflmnfjk select {
    -webkit-tap-highlight-color: transparent;
  }

  /* ============================================================
   4. HEADER
   ============================================================ */

  .css-ifkflmnfjk .css-kffjffhf {
    width: 100%;
    min-width: 0;

    position: sticky;
    top: 0;

    z-index: 50;

    padding-left: 24px;
    padding-right: 24px;
  }

  /* Header action group */
  .css-ifkflmnfjk .css-kffjffhf > div:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* ============================================================
   5. FORM CONTROLS
   ============================================================ */

  .css-ifkflmnfjk input,
  .css-ifkflmnfjk select,
  .css-ifkflmnfjk textarea {
    min-width: 0;
    max-width: 100%;

    font-size: 14px;
  }

  /*
 * Prevent iOS Safari from zooming into inputs.
 *
 * We still visually scale the controls through their container,
 * while keeping actual input font-size at 16px.
 */
  .css-ifkflmnfjk input,
  .css-ifkflmnfjk select,
  .css-ifkflmnfjk textarea {
    line-height: 1.25;
  }

  /* Better native controls */
  .css-ifkflmnfjk input,
  .css-ifkflmnfjk select {
    min-height: 42px;
  }

  /* ============================================================
   6. BUTTON TOUCH TARGET
   ============================================================ */

  .css-ifkflmnfjk button {
    min-height: 40px;
  }

  /* Don't force icon-only tiny controls to become huge */
  .css-ifkflmnfjk button:has(i:only-child) {
    min-width: 40px;
  }

  /* ============================================================
   7. SECTIONS
   ============================================================ */

  .css-ifkflmnfjk main > section {
    min-width: 0;
  }

  /* Prevent long text from expanding cards */
  .css-ifkflmnfjk section,
  .css-ifkflmnfjk article,
  .css-ifkflmnfjk .rounded-xl,
  .css-ifkflmnfjk .rounded-2xl {
    min-width: 0;
  }

  /* ============================================================
   8. TABLE / DATA CONTAINERS
   ============================================================ */

  .css-ifkflmnfjk table {
    max-width: 100%;
  }

  /*
 * Tables should scroll inside their own container instead
 * of causing the entire page to scroll horizontally.
 */
  .css-ifkflmnfjk .overflow-x-auto {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;

    scrollbar-width: none;
  }
}
/* ============================================================
   9. MOBILE BREAKPOINT
   ============================================================ */
/* ============================================================
   OPIFY BACKTESTER
   MOBILE NATIVE BOTTOM-SHEET
   ============================================================ */

@media (max-width: 767px) {
  .css-ifkflmnfjk .trade-logs-table-wrapper {
    width: 100% !important;
    max-width: 100% !important;

    overflow: auto !important;

    -webkit-overflow-scrolling: touch;

    border: 0 !important;
  }

  .css-ifkflmnfjk .logs {
    width: 100% !important;
    max-width: 100% !important;

    padding: 12px !important;

    border-radius: 16px !important;

    overflow: hidden !important;
  }

  /* ========================================================
       TRADE LOG HEADER
       ======================================================== */

  .css-ifkflmnfjk .logs > h3 {
    display: flex !important;

    align-items: flex-start !important;

    justify-content: space-between !important;

    gap: 10px !important;

    margin-bottom: 12px !important;

    line-height: 1.35 !important;
  }

  .css-ifkflmnfjk .logs > h3 > span:first-child {
    display: flex;

    align-items: flex-start;

    gap: 5px;

    min-width: 0;

    font-size: 12px !important;

    line-height: 1.4 !important;
  }

  .css-ifkflmnfjk .logs > h3 > span:last-child {
    flex: 1;

    min-width: 0;

    text-align: right;

    font-size: 10px !important;

    line-height: 1.35 !important;

    color: #64748b !important;
  }

  /* ============================================================
   OPIFY BACKTESTER
   MOBILE TRADE LOG
   CARD + EXPANDABLE BREAKDOWN
   ============================================================ */

  @media (max-width: 767px) {
    /* ========================================================
       TRADE LOG WRAPPER
       ======================================================== */

    .css-ifkflmnfjk .trade-logs-table-wrapper {
      width: 100% !important;
      max-width: 100% !important;

      overflow: auto !important;

      border: 0 !important;
    }

    .css-ifkflmnfjk .logs {
      width: 100% !important;
      max-width: 100% !important;

      padding: 10px !important;

      overflow: visible !important;
    }

    /* ========================================================
       TRADE LOG HEADER
       ======================================================== */

    .css-ifkflmnfjk .logs > h3 {
      display: flex !important;

      align-items: flex-start !important;

      justify-content: space-between !important;

      gap: 10px !important;

      margin-bottom: 10px !important;

      min-width: 0 !important;
    }

    .css-ifkflmnfjk .logs > h3 > span:first-child {
      flex: 0 0 auto;

      min-width: 0;

      font-size: 12px !important;

      line-height: 1.4 !important;
    }

    .css-ifkflmnfjk .logs > h3 > span:last-child {
      flex: 1 1 auto;

      min-width: 0;

      max-width: 58%;

      text-align: right;

      font-size: 9px !important;

      line-height: 1.35 !important;

      color: #64748b !important;
    }

    /* ========================================================
       IMPORTANT
       
       Mobile version is NO LONGER treated as a real table.
       
       This prevents:
       - card collapsing
       - breakdown overlap
       - table width recalculation
       - narrow vertical strips
       ======================================================== */

    .css-ifkflmnfjk .trade-logs-table {
      display: block !important;

      width: 100% !important;

      min-width: 0 !important;

      max-width: 100% !important;

      table-layout: auto !important;

      border: 0 !important;

      border-spacing: 0 !important;

      border-collapse: separate !important;
    }

    .css-ifkflmnfjk .trade-logs-table thead {
      display: none !important;
    }

    .css-ifkflmnfjk .trade-logs-table tbody {
      display: flex !important;

      flex-direction: column !important;

      align-items: stretch !important;

      width: 100% !important;

      min-width: 0 !important;

      gap: 8px !important;

      margin: 0 !important;

      padding: 0 !important;
    }

    /* ========================================================
       MAIN TRADE CARD
       ======================================================== */

    .css-ifkflmnfjk .trade-logs-table tbody > tr:not(.trade-breakdown-row) {
      position: relative !important;

      display: grid !important;

      flex: 0 0 auto !important;

      width: 100% !important;

      min-width: 0 !important;

      max-width: 100% !important;

      height: auto !important;

      min-height: 108px !important;

      margin: 0 !important;

      padding: 10px !important;

      grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        36px !important;

      grid-template-rows:
        auto
        auto
        auto !important;

      grid-template-areas:
        "date expiry action"
        "entry exit pnl"
        "entryReason exitReason pnl" !important;

      column-gap: 8px !important;

      row-gap: 2px !important;

      border: 1px solid #1e293b !important;

      border-radius: 13px !important;

      background: rgba(15, 23, 42, 0.72) !important;

      overflow: hidden !important;

      box-sizing: border-box !important;

      transform: none !important;
    }

    /* ========================================================
       TRADE CARD CELLS
       ======================================================== */

    .css-ifkflmnfjk
      .trade-logs-table
      tbody
      > tr:not(.trade-breakdown-row)
      > td {
      display: flex !important;

      gap: 3px;

      align-items: center !important;

      width: auto !important;

      min-width: 0 !important;

      max-width: 100% !important;

      min-height: 26px !important;

      margin: 0 !important;

      padding: 2px 0 !important;

      border: 0 !important;

      overflow: hidden !important;

      /* white-space: nowrap !important; */

      text-overflow: ellipsis !important;

      font-size: 10px !important;

      line-height: 1.25 !important;

      box-sizing: border-box !important;
    }

    /* ========================================================
       DATE
       ======================================================== */

    .css-ifkflmnfjk
      .trade-logs-table
      tbody
      > tr:not(.trade-breakdown-row)
      > td:nth-child(1) {
      grid-area: date;

      color: #cbd5e1 !important;

      font-weight: 500 !important;
    }

    /* ========================================================
       EXPIRY
       ======================================================== */

    .css-ifkflmnfjk
      .trade-logs-table
      tbody
      > tr:not(.trade-breakdown-row)
      > td:nth-child(2) {
      grid-area: expiry;

      color: #cbd5e1 !important;

      font-weight: 500 !important;
    }

    /* ========================================================
       ENTRY TIME
       ======================================================== */

    .css-ifkflmnfjk
      .trade-logs-table
      tbody
      > tr:not(.trade-breakdown-row)
      > td:nth-child(3) {
      grid-area: entry;

      color: #cbd5e1 !important;
    }

    /* ========================================================
       EXIT TIME
       ======================================================== */

    .css-ifkflmnfjk
      .trade-logs-table
      tbody
      > tr:not(.trade-breakdown-row)
      > td:nth-child(4) {
      grid-area: exit;

      color: #cbd5e1 !important;
    }

    /* ========================================================
       ENTRY REASON
       ======================================================== */

    .css-ifkflmnfjk
      .trade-logs-table
      tbody
      > tr:not(.trade-breakdown-row)
      > td:nth-child(5) {
      grid-area: entryReason;

      color: #94a3b8 !important;
    }

    /* ========================================================
       EXIT REASON
       ======================================================== */

    .css-ifkflmnfjk
      .trade-logs-table
      tbody
      > tr:not(.trade-breakdown-row)
      > td:nth-child(6) {
      grid-area: exitReason;

      color: #94a3b8 !important;
    }

    /* ========================================================
       P&L
       ======================================================== */

    .css-ifkflmnfjk
      .trade-logs-table
      tbody
      > tr:not(.trade-breakdown-row)
      > td:nth-child(7) {
      grid-area: pnl;

      align-items: flex-end !important;

      justify-content: flex-end !important;

      text-align: right !important;

      font-size: 11px !important;

      font-weight: 700 !important;

      white-space: nowrap !important;
    }

    /* ========================================================
       BREAKDOWN ACTION
       ======================================================== */

    .css-ifkflmnfjk
      .trade-logs-table
      tbody
      > tr:not(.trade-breakdown-row)
      > td:nth-child(8) {
      grid-area: action;

      display: flex !important;

      align-items: flex-start !important;

      justify-content: flex-end !important;

      padding: 0 !important;
    }

    /* ========================================================
       BREAKDOWN BUTTON
       ======================================================== */

    .css-ifkflmnfjk .trade-breakdown-btn {
      width: 32px !important;

      height: 32px !important;

      min-width: 32px !important;

      min-height: 32px !important;

      padding: 0 !important;

      display: flex !important;

      align-items: center !important;

      justify-content: center !important;

      flex: 0 0 32px !important;

      border-radius: 9px !important;

      touch-action: manipulation !important;

      transition: transform 140ms ease, background-color 160ms ease,
        border-color 160ms ease !important;

      display: none !important;
    }

    .css-ifkflmnfjk .trade-breakdown-btn:active {
      transform: scale(0.93) !important;
    }

    /* ========================================================
       MOBILE LABELS
       ======================================================== */

    .css-ifkflmnfjk
      .trade-logs-table
      tbody
      > tr:not(.trade-breakdown-row)
      > td::before {
      flex: 0 0 auto !important;

      margin-right: 4px !important;

      font-size: 7px !important;

      line-height: 1 !important;

      font-weight: 600 !important;

      letter-spacing: 0.06em !important;

      text-transform: uppercase !important;

      color: #475569 !important;
    }

    .css-ifkflmnfjk
      .trade-logs-table
      tbody
      > tr:not(.trade-breakdown-row)
      > td:nth-child(1)::before {
      content: "DATE";
    }

    .css-ifkflmnfjk
      .trade-logs-table
      tbody
      > tr:not(.trade-breakdown-row)
      > td:nth-child(2)::before {
      content: "EXPIRY";
    }

    .css-ifkflmnfjk
      .trade-logs-table
      tbody
      > tr:not(.trade-breakdown-row)
      > td:nth-child(3)::before {
      content: "ENTRY";
    }

    .css-ifkflmnfjk
      .trade-logs-table
      tbody
      > tr:not(.trade-breakdown-row)
      > td:nth-child(4)::before {
      content: "EXIT";
    }

    .css-ifkflmnfjk
      .trade-logs-table
      tbody
      > tr:not(.trade-breakdown-row)
      > td:nth-child(5)::before {
      content: "ENTRY Reason";
    }

    .css-ifkflmnfjk
      .trade-logs-table
      tbody
      > tr:not(.trade-breakdown-row)
      > td:nth-child(6)::before {
      content: "EXIT Reason";
    }

    /* ========================================================
       ========================================================
       BREAKDOWN ROW
       ========================================================
       
       This is the most important part.
       
       It is a NORMAL BLOCK inside the flex tbody.
       It therefore pushes the next trade down naturally.
       ======================================================== */

    .css-ifkflmnfjk .trade-logs-table tbody > tr.trade-breakdown-row {
      display: block !important;

      flex: 0 0 auto !important;

      position: relative !important;

      width: 100% !important;

      min-width: 0 !important;

      max-width: 100% !important;

      height: auto !important;

      min-height: 0 !important;

      margin: 0 !important;

      padding: 0 !important;

      border: 0 !important;

      background: transparent !important;

      overflow: visible !important;

      box-sizing: border-box !important;
    }

    /* Hidden breakdown */

    .css-ifkflmnfjk .trade-logs-table tbody > tr.trade-breakdown-row.hidden {
      display: none !important;
    }

    /* ========================================================
       BREAKDOWN TD
       ======================================================== */

    .css-ifkflmnfjk .trade-breakdown-row > td {
      display: block !important;

      width: 100% !important;

      min-width: 0 !important;

      max-width: 100% !important;

      height: auto !important;

      margin: 0 !important;

      padding: 0 !important;

      border: 0 !important;

      box-sizing: border-box !important;
    }

    /* ========================================================
       BREAKDOWN CONTAINER
       ======================================================== */

    .css-ifkflmnfjk .trade-breakdown-row .css-ujflfkmnW {
      display: block !important;

      width: 100% !important;

      min-width: 0 !important;

      max-width: 100% !important;

      height: auto !important;

      margin: 0 !important;

      padding: 10px !important;

      border: 1px solid #1e293b !important;

      border-radius: 11px !important;

      background: rgba(2, 6, 23, 0.72) !important;

      overflow: hidden !important;

      box-sizing: border-box !important;
    }

    /* ========================================================
       BREAKDOWN TITLE
       ======================================================== */

    .css-ifkflmnfjk .trade-breakdown-row .css-ujflfkmnW > div:first-child {
      width: 100% !important;

      min-width: 0 !important;

      margin: 0 0 8px 0 !important;

      padding: 0 !important;
    }

    .css-ifkflmnfjk .trade-breakdown-row .css-ujflfkmnW .text-\[10px\] {
      font-size: 9px !important;

      letter-spacing: 0.08em !important;

      line-height: 1.2 !important;
    }

    /* ========================================================
       BREAKDOWN INNER TABLE
       ======================================================== */

    .css-ifkflmnfjk .trade-breakdown-row .overflow-x-auto {
      display: block !important;

      width: 100% !important;

      max-width: 100% !important;

      min-width: 0 !important;

      overflow-x: auto !important;

      overflow-y: hidden !important;

      -webkit-overflow-scrolling: touch !important;

      overscroll-behavior-x: contain !important;

      touch-action: pan-x !important;

      scrollbar-width: none !important;
    }

    .css-ifkflmnfjk .trade-breakdown-row .overflow-x-auto::-webkit-scrollbar {
      display: none !important;
    }

    /* ========================================================
       INNER LEG TABLE
       ======================================================== */

    .css-ifkflmnfjk .trade-breakdown-row .overflow-x-auto > table {
      display: table !important;

      width: max-content !important;

      min-width: 620px !important;

      max-width: none !important;

      table-layout: auto !important;

      border-collapse: collapse !important;
    }

    .css-ifkflmnfjk .trade-breakdown-row table th,
    .css-ifkflmnfjk .trade-breakdown-row table td {
      white-space: nowrap !important;

      font-size: 9px !important;

      line-height: 1.2 !important;

      padding: 6px 7px !important;
    }

    /* ========================================================
       EMPTY STATE
       ======================================================== */

    .css-ifkflmnfjk
      #tradeLogBody
      > tr:not(.trade-breakdown-row):has(td[colspan]) {
      display: block !important;

      width: 100% !important;

      height: auto !important;

      min-height: 80px !important;

      padding: 24px 10px !important;

      text-align: center !important;

      box-sizing: border-box !important;
    }

    .css-ifkflmnfjk
      #tradeLogBody
      > tr:not(.trade-breakdown-row):has(td[colspan])
      > td {
      display: block !important;

      width: 100% !important;

      padding: 0 !important;

      text-align: center !important;
    }
  }

  /* ========================================================
       EMPTY STATE
       ======================================================== */

  .css-ifkflmnfjk
    #tradeLogBody
    > tr:not(.trade-breakdown-row):has(td[colspan]) {
    display: block !important;

    padding: 24px 12px !important;

    text-align: center !important;
  }
  .css-oflfkpofkd .css-olkopffvbf {
    opacity: 0.9;
  }
  .css-ufklfmnfj.active {
    display: none;
  }
  .css-fbnhflpfkoee {
    gap: 25px;
  }
  .css-bmefflpfkoee {
    min-width: 320px;
    box-shadow: 0px 0px 6px 1px rgb(190 232 255 / 25%);
  }
  .css-bikflpofhnmjf {
    background: #f7f7f7;
    color: black;
    box-shadow: 0px 0px 11px 5px rgb(86 189 211 / 20%);
    width: 65px;
    height: 65px;
  }
  .css-fufjfloofnm {
    display: none;
  }

  .css-ifkflobv.neutral,
  .css-ifkflobv.up,
  .css-ifkflobv.down {
    margin-top: 5px;
    padding-top: 20px;
  }

  .css-ikflpofhnmjf {
    position: fixed;
    bottom: 22px;
    right: 14px;
    display: flex;
    z-index: 1000;
  }

  .css-fbmflpfkoee {
    opacity: 0.85;
  }

  .topbar .company_detail .name {
    margin-left: -8px;
    margin-top: -6px;
    color: white;
  }
  .css-olfkfmjfr {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .css-ufjfloyfnm {
    margin-top: 10px;
    margin-bottom: 3px;
  }
  .css-ikflfmkf {
    opacity: 0.7;
  }
  .css-ufjflofofnm {
    font-size: 17px;
  }
  .css-pflfoRTYGR {
    color: #ffffff;
  }
  .css-ufjlofpfkkff {
    position: fixed;
    bottom: 40px;
    right: 12px;
    display: flex;
    z-index: 1000;
    box-shadow: 0px 0px 4px 1px rgb(251 248 248 / 25%);
    border-radius: 50%;
  }
  .css-uidlnndd {
    padding: 5px !important;
  }
  .css-yhlkofikk {
    padding: 10px !important;
  }
  .css-yhlkofikk .flex.items-center.justify-between.mb-6 {
    flex-direction: column;
    align-items: start;
    gap: 15px;
    margin-bottom: 10px;
  }
  #backtestSummaryTab .border.border-cardBorder.rounded-2xl.p-5 {
    padding: 10px;
  }
  .backdrop-blur-sm {
    padding: 0 !important;
    align-items: end !important;
  }
  .backdrop-blur-sm .bg-cardBg.border.border-cardBorder {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 14px 10px;
  }
  #shareReportModalCard {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  #shareReportModalCard .p-5.space-y-3 {
    padding: 14px 10px;
  }
  .flex.items-center.justify-between.bg-slate-950.border .gap-1 {
    height: 20px;
    margin: 0;
  }
  .p-4 {
    padding: 14px 10px;
  }
  .css-yfjflkoif {
    flex-direction: column;
    align-items: start !important;
    gap: 10px;
  }
  .css-uidlnndd {
    padding: 5px 0;
  }
  .css-yfjflkoif .flex.bg-slate-950 {
    width: 100%;
  }
  .calendar-toolbar {
    flex-wrap: nowrap !important;
  }
  .calendar-grid,
  .calendar-weekdays {
    min-width: 100%;
  }
  .calendar-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .calendar-weekdays {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .calendar-value {
    margin-top: 3px;
    font-size: 12px;
  }
  .css-olfmkflf {
    display: none;
  }
  .calendar-day.weekend {
    display: none;
  }
  .css-ufjfklopdd {
    margin-top: 55px;
  }
  .css-vnifklpfyhmn {
    min-width: 100%;
    max-width: 100%;
    padding: 0 5px;
  }
  .calendar-date {
    opacity: 0.6;
  }
  .css-ifkflmnfjk.active {
    width: 100% !important;
    height: 100% !important;
    transform: translateX(0%);
  }
  .css-ifkflmnfjk.active .css-yhlmfk {
    height: 100% !important;
  }
  .css-bifklpfyhmn {
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    text-shadow: 1px 2px 4px #ff98007d;
  }
  .css-yhfcflmfkf {
    width: 100%;
  }

  .css-ifkflobv.active {
    padding: 5px 0;
  }
  .css-ujflmfnf {
    justify-content: start;
  }

  /* ========================================================
       MODAL OVERLAY
       ======================================================== */

  .css-ifkflmnfjk {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    max-width: none !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 99999 !important;

    display: flex !important;

    align-items: flex-end !important;
    justify-content: center !important;

    overflow: hidden !important;

    background: rgba(2, 6, 23, 0.72);

    /*
         * Prevent the page behind the modal from scrolling.
         */
    overscroll-behavior: none;

    /*
         * Smooth bottom-sheet rendering.
         */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);

    /*
         * Safe area.
         */
    padding-left: env(safe-area-inset-left) !important;

    padding-right: env(safe-area-inset-right) !important;

    padding-bottom: 0 !important;

    transform: translateX(-100%);

    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  #payoffModal.hidden .bg-cardBg {
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform: translateY(100%);
  }

  #payoffModal.flex .bg-cardBg {
    transform: translateY(0%);
  }

  .topbar {
    background: #131e33;
    border: 1px solid #8080801c;
  }

  /* ========================================================
       ACTUAL BOTTOM SHEET
       ======================================================== */

  .css-ifkflmnfjk > .css-yhlmfk {
    position: relative !important;

    width: 100% !important;

    max-width: 100% !important;

    height: min(94dvh, 100dvh) !important;

    min-height: 0 !important;

    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    border-radius: 0 !important;

    /*
         * Bottom-sheet animation.
         */
    transform: translateY(0);

    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;

    /*
         * Native app feel.
         */
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);

    /*
         * Safe area.
         */
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* ========================================================
       TOP HEADER
       ======================================================== */

  .css-ifkflmnfjk .css-kffjffhf {
    position: relative !important;

    top: auto !important;

    flex: 0 0 auto;

    width: 100% !important;

    min-height: 58px;

    padding: 8px 12px !important;

    border-radius: 0 !important;

    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);

    z-index: 10;
  }

  /*
     * Bottom-sheet drag indicator.
     *
     * This is visual only.
     *


    /* ========================================================
       HEADER BUTTONS
       ======================================================== */

  .css-ifkflmnfjk .css-kffjffhf > div:last-child {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 0px;

    min-width: 0;
  }

  .css-ifkflmnfjk .css-kffjffhf button {
    min-height: 42px;

    touch-action: manipulation;
  }

  /* Back button */

  .css-ifkflmnfjk .css-kffjffhf > div:first-child button {
    width: 42px;
    height: 42px;

    padding: 0 !important;

    display: flex;

    align-items: center;
    justify-content: center;
  }

  /* Theme button */

  .css-ifkflmnfjk #strategyThemeToggle {
    width: 42px !important;
    min-width: 42px !important;

    height: 42px !important;

    padding: 0 !important;
  }

  /* Save */

  .css-ifkflmnfjk .css-kffjffhf button {
    white-space: nowrap;
  }

  /* Run */

  .css-ifkflmnfjk #backtestBtn {
    min-height: 42px;

    padding: 0 13px !important;

    white-space: nowrap;
  }

  /* ========================================================
       SCROLLABLE CONTENT
       ======================================================== */

  .css-ifkflmnfjk .css-thrlmrjki {
    flex: 1 1 auto;

    width: 100% !important;

    max-width: none !important;

    min-width: 0 !important;

    height: auto !important;

    min-height: 0 !important;

    margin: 3px !important;

    padding: 0 !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    /*
         * Native momentum scrolling.
         */
    -webkit-overflow-scrolling: touch;

    /*
         * Vertical scrolling belongs to the sheet.
         */
    touch-action: pan-y;

    overscroll-behavior-y: contain;

    scrollbar-width: none;
  }

  .css-ifkflmnfjk .css-thrlmrjki::-webkit-scrollbar {
    display: none;
  }

  /* ========================================================
       SECTIONS
       ======================================================== */

  .css-ifkflmnfjk .css-thrlmrjki > section {
    width: calc(100% - 8px) !important;

    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 0 12px 0 !important;

    padding: 8px !important;

    border-radius: 10px !important;

    overflow: hidden;

    padding-bottom: 10px !important;
  }

  .css-ifkflmnfjk .css-thrlmrjki > section:last-child {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ========================================================
       CONFIGURATION GRID
       ======================================================== */

  .css-ifkflmnfjk .grid {
    min-width: 0;

    width: 100%;
  }

  /*
     * Strategy name / position / underlying
     */
  .css-ifkflmnfjk .grid.grid-cols-1.md\:grid-cols-12 {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) !important;

    gap: 12px !important;
  }

  /*
     * Date / SL / TP / capital
     */
  .css-ifkflmnfjk .grid.grid-cols-1.md\:grid-cols-4 {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) !important;

    gap: 12px !important;
  }

  /*
     * Entry / Exit
     */
  .css-ifkflmnfjk .grid.grid-cols-1.md\:grid-cols-2 {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) !important;

    gap: 12px !important;
  }

  /* ========================================================
       INPUTS
       ======================================================== */

  .css-ifkflmnfjk input,
  .css-ifkflmnfjk select,
  .css-ifkflmnfjk textarea {
    min-width: 0 !important;

    max-width: 100% !important;

    font-size: 14px !important;

    line-height: 1.25;

    min-height: 42px;
  }

  /*
     * Important:
     *
     * iOS zoom prevention.
     */
  .css-ifkflmnfjk input[type="date"],
  .css-ifkflmnfjk input[type="time"],
  .css-ifkflmnfjk input[type="number"],
  .css-ifkflmnfjk input[type="text"],
  .css-ifkflmnfjk select {
    border: 1px solid #80808033 !important;
    font-size: 14px !important;
  }

  /* ========================================================
       DATE RANGE
       ======================================================== */

  .css-ifkflmnfjk #startDate,
  .css-ifkflmnfjk #endDate {
    min-width: 0 !important;

    width: 100% !important;
    padding: 0 12px;
    border-radius: 8px;
  }

  /*
     * Date range wrapper can scroll horizontally if necessary.
     */
  .css-ifkflmnfjk #startDate + span {
    flex: 0 0 auto;

    white-space: nowrap;
  }

  /* ========================================================
       DATE PRESETS
       ======================================================== */

  .css-ifkflmnfjk button[onclick*="setBacktestDuration"] {
    min-height: 36px;

    padding: 0 11px !important;

    flex: 0 0 auto;

    white-space: nowrap;

    font-size: 11px !important;
  }

  /*
     * Make the preset row horizontally scrollable
     * instead of squeezing the buttons.
     */
  .css-ifkflmnfjk button[onclick*="setBacktestDuration"] {
    touch-action: manipulation;
  }

  /* ========================================================
       ENTRY / EXIT RULE CARDS
       ======================================================== */

  .css-ifkflmnfjk #entryRuleContainerContent,
  .css-ifkflmnfjk #exitRuleContainerContent {
    grid-template-columns: minmax(0, 1fr) !important;

    gap: 10px !important;
  }

  /*
     * Rule header.
     */
  .css-ifkflmnfjk #entryRuleContainerContent ~ * {
    min-width: 0;
  }

  /* ========================================================
       RULE TYPE BUTTON GROUPS
       ======================================================== */

  .css-ifkflmnfjk #entryFixedBtn,
  .css-ifkflmnfjk #entryRangeBtn,
  .css-ifkflmnfjk #entryTechnicalBtn,
  .css-ifkflmnfjk #exitSameBtn,
  .css-ifkflmnfjk #exitBtstBtn,
  .css-ifkflmnfjk #exitTechnicalBtn {
    min-height: 36px;

    white-space: nowrap;

    flex: 0 0 auto;

    padding: 0 12px !important;

    width: calc(100% / 3);
  }

  /* ============================================================
   MOBILE BACKTEST RESULT TABS
   NATIVE APP BOTTOM NAVIGATION
   ============================================================ */

  @media (max-width: 767px) {
    /* --------------------------------------------------------
       RESULT CARD
       -------------------------------------------------------- */

    .css-ifkflmnfjk .css-yhlkofikk {
      position: relative !important;

      width: 100% !important;
      max-width: 100% !important;

      min-width: 0 !important;

      padding: 20px 14px calc(78px + env(safe-area-inset-bottom)) 14px !important;

      margin: 0 !important;

      border-radius: 16px !important;

      overflow: visible !important;
    }

    /* --------------------------------------------------------
       RESULT HEADER
       -------------------------------------------------------- */

    .css-ifkflmnfjk .css-yhlkofikk > .flex.items-center.justify-between.mb-6 {
      width: 100% !important;

      margin-bottom: 12px !important;

      gap: 10px !important;
    }

    .css-ifkflmnfjk
      .css-yhlkofikk
      > .flex.items-center.justify-between.mb-6
      > div:first-child {
      min-width: 0 !important;
    }

    .css-ifkflmnfjk
      .css-yhlkofikk
      > .flex.items-center.justify-between.mb-6
      h2 {
      font-size: 15px !important;

      line-height: 1.3 !important;
    }

    .css-ifkflmnfjk .css-yhlkofikk > .flex.items-center.justify-between.mb-6 p {
      font-size: 9px !important;

      line-height: 1.4 !important;
    }

    /* --------------------------------------------------------
       OVERVIEW METRICS
       -------------------------------------------------------- */

    .css-ifkflmnfjk .mobile-overview-metrics {
      display: none !important;

      width: 100% !important;

      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

      gap: 6px !important;

      margin-bottom: 8px !important;
    }

    /*
       Overview selected
    */

    .css-ifkflmnfjk
      .css-yhlkofikk[data-mobile-active-tab="overview"]
      .mobile-overview-metrics {
      display: grid !important;
    }

    /* Metric card */

    .css-ifkflmnfjk .mobile-overview-metrics > div {
      min-width: 0 !important;

      min-height: 75px !important;

      padding: 9px 7px !important;

      border-radius: 11px !important;

      /* display: flex !important; */

      flex-direction: column !important;

      justify-content: center !important;

      overflow: hidden !important;
    }

    .css-plfofkmggt {
      display: none !important;
    }

    #adjustmentModal .flex.items-center.justify-between.mb-2,
    #adjustmentModal .block.text-xs.font-medium.text-slate-400.mb-2 {
      padding: 0 10px;
    }

    .css-ifkflmnfjk .mobile-overview-metrics > div p {
      margin-bottom: 3px !important;

      font-size: 10px !important;

      line-height: 1.2 !important;

      white-space: nowrap !important;

      overflow: hidden !important;

      text-overflow: ellipsis !important;
    }

    .css-ifkflmnfjk .mobile-overview-metrics > div h3 {
      margin: 0 !important;

      font-size: 17px !important;

      line-height: 1.2 !important;

      white-space: nowrap !important;

      overflow: hidden !important;

      text-overflow: ellipsis !important;

      margin-bottom: 8px !important;

      margin-top: 5px !important;
    }

    /* Metric labels */

    .css-ifkflmnfjk .mobile-overview-metrics > div span {
      width: fit-content !important;

      max-width: 100% !important;

      margin-top: 2px !important;

      font-size: 7px !important;

      line-height: 1.2 !important;
    }

    /* --------------------------------------------------------
       LOAD MORE
       -------------------------------------------------------- */

    .css-ifkflmnfjk .mobile-overview-more {
      display: none !important;

      margin: 4px 0 10px !important;
    }

    .css-ifkflmnfjk
      .css-yhlkofikk[data-mobile-active-tab="overview"]
      .mobile-overview-more {
      display: flex !important;

      justify-content: center !important;
    }

    .css-ifkflmnfjk .mobile-overview-more button {
      min-height: 38px !important;

      padding: 0 14px !important;

      font-size: 10px !important;

      border-radius: 9px !important;
    }

    /* --------------------------------------------------------
       DESKTOP SUMMARY PANEL IS NOT THE MOBILE OVERVIEW
       -------------------------------------------------------- */

    .css-ifkflmnfjk #backtestSummaryTab {
      display: none !important;
    }

    /* --------------------------------------------------------
       ALL RESULT PANELS
       -------------------------------------------------------- */

    .css-ifkflmnfjk .css-yhlkofikk [data-mobile-panel] {
      display: none !important;

      width: 100% !important;

      min-width: 0 !important;

      max-width: 100% !important;

      margin: 0 !important;
    }

    /* Chart */

    .css-ifkflmnfjk
      .css-yhlkofikk[data-mobile-active-tab="chart"]
      [data-mobile-panel="chart"] {
      display: block !important;

      animation: mobileResultPanelIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Trade logs */

    .css-ifkflmnfjk
      .css-yhlkofikk[data-mobile-active-tab="logs"]
      [data-mobile-panel="logs"] {
      display: block !important;

      animation: mobileResultPanelIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Calendar */

    .css-ifkflmnfjk
      .css-yhlkofikk[data-mobile-active-tab="calendar"]
      [data-mobile-panel="calendar"] {
      display: block !important;

      animation: mobileResultPanelIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* --------------------------------------------------------
       CHART
       -------------------------------------------------------- */

    .css-ifkflmnfjk [data-mobile-panel="chart"] {
      padding: 10px !important;

      border: 1px solid rgba(51, 65, 85, 0.8) !important;

      border-radius: 14px !important;

      background: rgba(15, 23, 42, 0.55) !important;

      box-sizing: border-box !important;
    }

    .css-ujflkmjfW.chart {
      padding: 0 !important;
    }

    .css-ifkflmnfjk .backtest-chart-toolbar {
      display: grid !important;

      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

      gap: 6px !important;

      width: 100% !important;

      margin-bottom: 9px !important;
    }

    .css-ifkflmnfjk .backtest-chart-toolbar .chart-select {
      width: 100% !important;

      min-width: 0 !important;

      height: 40px !important;

      min-height: 40px !important;

      padding: 0 8px !important;

      font-size: 9px !important;

      border-radius: 9px !important;

      box-sizing: border-box !important;
    }

    .css-ifkflmnfjk .equity-chart-wrapper {
      position: relative !important;

      width: 100% !important;

      height: 300px !important;

      min-height: 300px !important;

      overflow: hidden !important;

      border-radius: 10px !important;

      padding: 0;
    }

    .css-ifkflmnfjk #equityCurveChart {
      display: block !important;

      width: 100% !important;

      height: 100% !important;

      max-width: 100% !important;
    }

    /* --------------------------------------------------------
       TRADE LOGS
       -------------------------------------------------------- */

    .css-ifkflmnfjk [data-mobile-panel="logs"] {
      overflow: visible !important;

      padding: 10px !important;

      border-radius: 14px !important;
    }

    .css-ifkflmnfjk [data-mobile-panel="logs"] > h3 {
      margin-bottom: 10px !important;
    }

    /* --------------------------------------------------------
       CALENDAR
       -------------------------------------------------------- */

    .css-ifkflmnfjk [data-mobile-panel="calendar"] {
      padding: 10px !important;

      border-radius: 14px !important;

      overflow: hidden !important;
    }

    /* --------------------------------------------------------
       MOBILE TAB FOOTER
       -------------------------------------------------------- */

    .css-ifkflmnfjk .mobile-result-tabs {
      position: fixed !important;

      left: 50% !important;

      bottom: 0 !important;

      transform: translateX(-50%) !important;

      width: min(100vw, 480px) !important;

      max-width: 100vw !important;

      height: auto !important;

      min-height: 48px !important;

      margin: 0 !important;

      padding: 5px 5px calc(4px + env(safe-area-inset-bottom)) 7px !important;

      display: flex !important;

      align-items: center !important;

      justify-content: stretch !important;

      gap: 4px !important;

      flex-wrap: nowrap !important;

      overflow: hidden !important;

      border: 1px solid rgba(51, 65, 85, 0.9) !important;

      border-bottom: 0 !important;

      border-radius: 12px 12px 0 0 !important;

      background: rgba(7, 13, 25, 0.96) !important;

      box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.35) !important;

      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);

      z-index: 10 !important;

      opacity: 0;

      visibility: hidden;

      pointer-events: none;

      transition: opacity 180ms ease,
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1), visibility 180ms ease !important;
    }

    /*
       Footer becomes visible only while the results
       section is actually visible.
    */

    .css-ifkflmnfjk .css-yhlkofikk.mobile-tabs-visible .mobile-result-tabs {
      opacity: 1 !important;

      visibility: visible !important;

      pointer-events: auto !important;

      transform: translateX(-50%) translateY(0) !important;
    }

    /* --------------------------------------------------------
       TAB BUTTONS
       -------------------------------------------------------- */

    .css-ifkflmnfjk .mobile-result-tabs button {
      flex: 1 1 0 !important;

      width: auto !important;

      min-width: 0 !important;

      min-height: 42px !important;

      height: 42px !important;

      padding: 0 4px !important;

      margin: 0 !important;

      display: flex !important;

      align-items: center !important;

      justify-content: center !important;

      border-radius: 10px !important;

      font-size: 12px !important;

      font-weight: 500 !important;

      white-space: nowrap !important;

      overflow: hidden !important;

      text-overflow: ellipsis !important;

      touch-action: manipulation !important;

      -webkit-tap-highlight-color: transparent !important;
    }

    .css-ifkflmnfjk .mobile-result-tabs button:active {
      transform: scale(0.95) !important;
    }

    /* Active */

    .css-ifkflmnfjk .mobile-result-tabs button.mobile-tab-active {
      background: #2563eb !important;

      color: #ffffff !important;

      font-weight: 700 !important;

      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.22) !important;
    }

    /* --------------------------------------------------------
       SWIPE AREA
       -------------------------------------------------------- */

    .css-ifkflmnfjk .css-yhlkofikk {
      touch-action: pan-y !important;

      -webkit-user-select: none !important;

      user-select: none !important;
    }

    .css-ifkflmnfjk .css-yhlkofikk input,
    .css-ifkflmnfjk .css-yhlkofikk select,
    .css-ifkflmnfjk .css-yhlkofikk textarea,
    .css-ifkflmnfjk .css-yhlkofikk button {
      -webkit-user-select: auto !important;

      user-select: auto !important;
    }

    /* --------------------------------------------------------
       SMALL PHONE
       -------------------------------------------------------- */

    @media (max-width: 390px) {
      .css-ifkflmnfjk .mobile-overview-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      .css-ifkflmnfjk .mobile-overview-metrics > div {
        min-height: 74px !important;
      }

      .css-ifkflmnfjk .mobile-overview-metrics > div h3 {
        font-size: 13px !important;
      }

      .css-ifkflmnfjk .backtest-chart-toolbar {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }

      .css-ifkflmnfjk .backtest-chart-toolbar .chart-select {
        padding-left: 6px !important;

        padding-right: 6px !important;

        font-size: 8px !important;
      }

      .css-ifkflmnfjk .equity-chart-wrapper {
        height: 270px !important;

        min-height: 270px !important;
      }

      .css-ifkflmnfjk .mobile-result-tabs button {
        font-size: 9px !important;
      }
    }
  }

  /* ============================================================
   RESULT TAB ANIMATION
   ============================================================ */

  @keyframes mobileResultPanelIn {
    from {
      opacity: 0;

      transform: translateX(10px);
    }

    to {
      opacity: 1;

      transform: translateX(0);
    }
  }

  /* ============================================================
   REDUCE MOTION
   ============================================================ */

  @media (prefers-reduced-motion: reduce) {
    .css-ifkflmnfjk .mobile-result-tabs {
      transition: none !important;
    }

    .css-ifkflmnfjk [data-mobile-panel] {
      animation: none !important;
    }
  }

  /* ========================================================
       METRIC GRID
       ======================================================== */

  .css-ifkflmnfjk #resultsSection .grid.grid-cols-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 6px !important;
  }

  body:has(.css-plfofkmgg.active) .css-plfofkmggt {
    display: block;
  }

  /* ========================================================
       BUTTON TAP FEEDBACK
       ======================================================== */

  .css-ifkflmnfjk button {
    -webkit-tap-highlight-color: transparent;

    transition: transform 120ms ease, background-color 160ms ease,
      border-color 160ms ease, opacity 160ms ease;
  }

  .css-ifkflmnfjk button:active {
    transform: scale(0.97);
  }

  .css-ifkflmnfjk #backtestBtn:active {
    transform: none;
  }

  /* ========================================================
       SAFE AREA
       ======================================================== */

  .css-ifkflmnfjk .css-thrlmrjki {
    padding-bottom: max(32px, env(safe-area-inset-bottom)) !important;
    padding: 5px !important;
  }
}

/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 390px) {
  .css-ifkflmnfjk > .css-yhlmfk {
    height: 96dvh !important;

    border-radius: 0 !important;
  }

  .css-ifkflmnfjk .css-thrlmrjki {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .css-ifkflmnfjk .css-kffjffhf {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .css-ifkflmnfjk .css-kffjffhf button {
    min-height: 40px;
  }

  /*
     * Save button becomes icon-only on very narrow screens.
     */
  .css-ifkflmnfjk .css-kffjffhf > div:last-child button:nth-child(2) {
    width: 40px;

    min-width: 40px;

    padding: 0 !important;

    font-size: 0;
  }

  .css-ifkflmnfjk .css-kffjffhf > div:last-child button:nth-child(2) i {
    font-size: 14px;
  }

  .css-ifkflmnfjk #backtestBtn {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ============================================================
   10. VERY SMALL PHONES
   ============================================================ */

@media (max-width: 390px) {
  .css-ifkflmnfjk .css-thrlmrjki {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .css-ifkflmnfjk main > section {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .css-ifkflmnfjk .css-kffjffhf {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  /*
     * Hide text from Save button on very narrow screens.
     * Icon remains visible.
     */
  .css-ifkflmnfjk .css-kffjffhf button:nth-child(2) {
    font-size: 0;
    width: 42px;
    min-width: 42px;
    padding: 0 !important;
  }

  .css-ifkflmnfjk .css-kffjffhf button:nth-child(2) i {
    font-size: 14px;
  }

  .css-ifkflmnfjk #backtestBtn {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .css-ifkflmnfjk #backtestBtn .css-yhflmnfj {
    font-size: 11px;
  }

  /* Two metric columns */
  .css-ifkflmnfjk #resultsSection .grid.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   11. TABLET
   ============================================================ */

@media (min-width: 768px) and (max-width: 1024px) {
  .css-ifkflmnfjk .css-thrlmrjki {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .css-ifkflmnfjk main > section {
    padding: 18px !important;
  }

  .css-ifkflmnfjk .css-kffjffhf {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================================
   12. REDUCE MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .css-ifkflmnfjk *,
  .css-ifkflmnfjk *::before,
  .css-ifkflmnfjk *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   OPIFY
   MOBILE ADJUSTMENT MODAL
   FINAL NATIVE BOTTOM SHEET
   ============================================================ */

@media (max-width: 767px) {
  /* ========================================================
       MODAL OVERLAY
       ======================================================== */

  #adjustmentModal {
    position: fixed !important;

    inset: 0 !important;

    z-index: 999999 !important;

    width: 100vw !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    display: none;

    align-items: flex-end !important;
    justify-content: center !important;

    background: rgba(2, 6, 23, 0.76) !important;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    overflow: hidden !important;

    overscroll-behavior: none;

    box-sizing: border-box !important;
  }

  #adjustmentModal.flex {
    display: flex !important;
  }

  /* ========================================================
       BOTTOM SHEET

       IMPORTANT:
       DO NOT USE FIXED HEIGHT HERE.
       The sheet grows with its content.
       ======================================================== */

  #adjustmentModal > div {
    position: relative !important;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: 94dvh !important;

    margin: 0 !important;

    padding: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 0 !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior-y: contain !important;

    scrollbar-width: none !important;

    border: 1px solid rgba(51, 65, 85, 0.85) !important;

    border-bottom: 0 !important;

    border-radius: 20px 20px 0 0 !important;

    background: #0b1220 !important;

    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.45) !important;

    box-sizing: border-box !important;

    animation: adjustmentSheetIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  #adjustmentModal > div::-webkit-scrollbar {
    display: none !important;
  }

  /* ========================================================
       DRAG HANDLE
       ======================================================== */

  #adjustmentModal > div::before {
    content: "";

    position: absolute;

    top: 7px;

    left: 50%;

    width: 38px;

    height: 4px;

    transform: translateX(-50%);

    border-radius: 999px;

    background: #334155;

    z-index: 100;
  }

  /* ========================================================
       HEADER
       ======================================================== */

  #adjustmentModal > div > .flex.items-center.justify-between {
    position: sticky !important;

    top: 0 !important;

    z-index: 50 !important;

    flex: 0 0 auto !important;

    width: 100% !important;

    min-height: 60px !important;

    margin: 0 !important;

    padding: 18px 14px 11px 14px !important;

    background: rgba(15, 23, 42, 0.98) !important;

    border-bottom: 1px solid rgba(51, 65, 85, 0.65) !important;

    box-sizing: border-box !important;
  }

  #adjustmentModal > div > .flex.items-center.justify-between h3 {
    margin: 0 !important;

    min-width: 0 !important;

    font-size: 14px !important;

    line-height: 1.3 !important;

    font-weight: 700 !important;

    color: #f8fafc !important;
  }

  #adjustmentModal > div > .flex.items-center.justify-between h3 i {
    font-size: 11px !important;

    color: #60a5fa !important;
  }

  /* CLOSE BUTTON */

  #adjustmentModal > div > .flex.items-center.justify-between > button {
    width: 38px !important;

    height: 38px !important;

    min-width: 38px !important;

    min-height: 38px !important;

    padding: 0 !important;

    margin: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 10px !important;

    touch-action: manipulation !important;

    background: transparent !important;

    color: #94a3b8 !important;
  }

  #adjustmentModal > div > .flex.items-center.justify-between > button:active {
    transform: scale(0.92) !important;

    background: rgba(51, 65, 85, 0.4) !important;
  }

  /* ========================================================
       GENERAL CONTENT
       ======================================================== */

  #adjustmentModal > div > div:not(.flex.items-center.justify-between) {
    width: 100% !important;

    min-width: 0 !important;

    max-width: 100% !important;

    box-sizing: border-box !important;
  }

  /* ========================================================
       TRIGGER SECTION
       ======================================================== */

  #adjustmentModal .grid.grid-cols-1.md\:grid-cols-2 {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;

    width: 100% !important;

    padding: 5px;
  }

  #adjustmentModal .grid.grid-cols-1.md\:grid-cols-2 > div {
    min-width: 0 !important;

    padding: 10px !important;

    border-radius: 12px !important;

    background: rgba(2, 6, 23, 0.55) !important;
  }

  #adjustmentModal .grid.grid-cols-1.md\:grid-cols-2 label {
    display: block !important;

    margin-bottom: 5px !important;

    font-size: 9px !important;

    line-height: 1.2 !important;

    color: #64748b !important;
  }

  /* ========================================================
       ALL FORM CONTROLS
       ======================================================== */

  #adjustmentModal input,
  #adjustmentModal select {
    width: 100% !important;

    min-width: 0 !important;

    height: 44px !important;

    min-height: 44px !important;

    padding: 0 11px !important;

    border-radius: 10px !important;

    font-size: 12px !important;

    line-height: 1 !important;

    color: #f8fafc !important;

    background: #0f172a !important;

    border: 1px solid #263449 !important;

    outline: none !important;

    box-sizing: border-box !important;

    touch-action: manipulation !important;
  }

  #adjustmentModal input {
    min-width: 150px !important;
  }

  #adjustmentModal input:focus,
  #adjustmentModal select:focus {
    border-color: rgba(59, 130, 246, 0.8) !important;

    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
  }

  /* ========================================================
       DYNAMIC NEW LEG AREA
       ======================================================== */

  #adjustmentModal #modalDynamicFields {
    width: 100% !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 10px !important;

    padding: 2px 0 !important;
  }

  /* ========================================================
       NEW LEG CARD
       ======================================================== */

  #adjustmentModal .modal-new-leg {
    width: 100% !important;

    min-width: 0 !important;

    padding: 12px !important;

    border-radius: 14px !important;

    background: rgba(2, 6, 23, 0.65) !important;

    border: 1px solid #263449 !important;

    box-sizing: border-box !important;
  }

  /* New leg header */

  #adjustmentModal .modal-new-leg > .flex.items-center.justify-between {
    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    min-height: 28px !important;

    margin-bottom: 10px !important;
  }

  /* ========================================================
       NEW LEG 5 COLUMN DESKTOP GRID
       → MOBILE 2 COLUMN
       ======================================================== */

  #adjustmentModal .modal-new-leg .grid.grid-cols-5 {
    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;

    width: 100% !important;
  }

  #adjustmentModal .modal-new-leg .grid.grid-cols-5 > div {
    min-width: 0 !important;
  }

  /* Lots full width */

  #adjustmentModal .modal-new-leg .grid.grid-cols-5 > div:nth-child(5) {
    grid-column: 1 / -1 !important;
  }

  /* ========================================================
       TP / SL / TLSL
       ======================================================== */

  #adjustmentModal .modal-new-leg .grid.grid-cols-3 {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 7px !important;

    width: 100% !important;
  }

  #adjustmentModal .modal-new-leg .grid.grid-cols-3 > div {
    min-width: 0 !important;
  }

  /* ========================================================
       UNDERLYING MOVE
       ======================================================== */

  #adjustmentModal .border-t.border-cardBorder {
    margin-top: 4px !important;

    padding-top: 14px !important;

    border-color: rgba(51, 65, 85, 0.65) !important;
  }

  #adjustmentModal .border-t.border-cardBorder .bg-slate-950\/60 {
    width: calc(100% - 10px) !important;

    min-width: 0 !important;

    padding: 11px !important;

    border-radius: 13px !important;

    background: rgba(2, 6, 23, 0.58) !important;

    margin: 5px;
  }

  /* Underlying controls stack */

  #adjustmentModal .border-t.border-cardBorder .grid.grid-cols-3 {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) !important;

    gap: 10px !important;

    width: 100% !important;
  }

  #adjustmentModal .border-t.border-cardBorder .grid.grid-cols-3 > div {
    min-width: 0 !important;
  }

  /* Move input pair */

  #adjustmentModal #modalUnderlyingMoveType {
    width: 76px !important;

    min-width: 76px !important;

    flex: 0 0 76px !important;
  }

  #adjustmentModal #modalUnderlyingMoveValue {
    min-width: 0 !important;

    flex: 1 1 auto !important;
  }

  /* ========================================================
       FOOTER
       ======================================================== */

  #adjustmentModal > div > .flex.items-center.justify-between.pt-4 {
    position: sticky !important;

    bottom: 0 !important;

    z-index: 60 !important;

    flex: 0 0 auto !important;

    width: 100% !important;

    min-height: 64px !important;

    margin: 0 !important;

    padding: 10px 12px max(10px, env(safe-area-inset-bottom)) 12px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 8px !important;

    background: rgba(11, 18, 32, 0.98) !important;

    border-top: 1px solid rgba(51, 65, 85, 0.65) !important;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    box-sizing: border-box !important;
  }

  #adjustmentModal .pt-4 > .flex.items-center.gap-2 {
    display: flex !important;

    align-items: center !important;

    gap: 7px !important;
  }

  /* Footer buttons */

  #adjustmentModal .pt-4 button {
    height: 42px !important;

    min-height: 42px !important;

    padding: 0 14px !important;

    border-radius: 10px !important;

    font-size: 11px !important;

    white-space: nowrap !important;

    touch-action: manipulation !important;
  }

  #adjustmentModal .pt-4 button:active {
    transform: scale(0.96) !important;
  }

  #adjustmentModal button[onclick*="saveAdjustmentModal"] {
    min-width: 105px !important;

    font-weight: 700 !important;
  }

  /* ========================================================
       SMALL PHONE
       ======================================================== */

  @media (max-width: 390px) {
    #adjustmentModal > div {
      max-height: 96dvh !important;

      border-radius: 18px 18px 0 0 !important;
    }

    #adjustmentModal .grid.grid-cols-1.md\:grid-cols-2 {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    #adjustmentModal .modal-new-leg .grid.grid-cols-3 {
      gap: 6px !important;
    }

    #adjustmentModal .pt-4 button {
      padding-left: 11px !important;

      padding-right: 11px !important;
    }
  }
}

/* ============================================================
   SHEET OPEN ANIMATION
   ============================================================ */

@keyframes adjustmentSheetIn {
  from {
    transform: translateY(100%);

    opacity: 0.8;
  }

  to {
    transform: translateY(0);

    opacity: 1;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  #adjustmentModal > div {
    animation: none !important;
  }
}