/* ============================================
   DASH Pro - Mobile CSS Patches
   Only layout fixes, NO HTML changes
   ============================================ */

/* === MOBILE: Hide desktop header, keep only mobile nav === */
@media (max-width: 768px) {
  .app-header {
    display: none !important;
  }
  
  /* === STAT BAR: Force horizontal one-row === */
  .stat-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    background: var(--bg-elevated, #1a1b2e) !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-subtle, rgba(255,255,255,.06)) !important;
    overflow: hidden !important;
  }
  .stat-bar .stat-item {
    flex: 1 !important;
    text-align: center !important;
    padding: 12px 4px !important;
    border-right: 1px solid var(--border-subtle, rgba(255,255,255,.06)) !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  .stat-bar .stat-item:last-child {
    border-right: none !important;
  }
  .stat-bar .stat-label {
    font-size: 0.6rem !important;
    color: var(--text-tertiary, #5a6478) !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
  }
  .stat-bar .stat-value {
    font-size: 1rem !important;
    font-weight: 700 !important;
  }
  .stat-bar .stat-change {
    font-size: 0.55rem !important;
    margin-top: 1px !important;
  }
  
  /* === Ensure mobile nav is at bottom === */
  .mobile-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 6px 0 !important;
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
    background: var(--bg-elevated, #1a1b2e) !important;
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,.06)) !important;
  }
  .mobile-nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 4px 6px !important;
    color: var(--text-secondary, #8892a4) !important;
    text-decoration: none !important;
    font-size: 0.55rem !important;
    min-width: 40px !important;
  }
  .mobile-nav a svg {
    width: 20px !important;
    height: 20px !important;
  }
  .mobile-nav a.active {
    color: var(--accent, #00d4aa) !important;
  }
  
  /* === More menu === */
  .mobile-more-menu {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
  }
  .mobile-more-menu.show {
    display: block !important;
  }
  .mobile-more-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.6) !important;
  }
  .mobile-more-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--bg-elevated, #1a1b2e) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    animation: navSlideUp .3s ease !important;
  }
  @keyframes navSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .mobile-more-content a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 16px 8px !important;
    border-radius: 12px !important;
    color: var(--text-secondary, #8892a4) !important;
    font-size: 0.7rem !important;
    text-decoration: none !important;
  }
  .mobile-more-content a:active {
    background: var(--bg-hover, rgba(255,255,255,.05)) !important;
  }
  
  /* === App container padding for mobile nav === */
  .app-container {
    padding: 12px !important;
    padding-bottom: 80px !important;
  }
  
  /* === Compact cards === */
  .card {
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }
  .card-header {
    padding: 12px 14px !important;
  }
  .card-body {
    padding: 12px 14px !important;
  }
  
  /* === Signal prices horizontal === */
  .signal-prices {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
  }
  .signal-price-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  
  /* === Joint page compact === */
  .joint-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .dimension-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .advice-section {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  /* === Hedge input horizontal === */
  .hedge-input-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .hedge-input-row > .form-group {
    flex: 1 1 100px !important;
    max-width: none !important;
  }
  
  /* === PnL compact === */
  .pnl-layout {
    grid-template-columns: 1fr !important;
  }
  .stat-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .form-inline {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .trade-item {
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  
  /* === Strategy tabs === */
  .mobile-tab-pills {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .mobile-tab-pills::-webkit-scrollbar {
    display: none !important;
  }
}

/* === TABLET === */
@media (min-width: 769px) and (max-width: 1024px) {
  .joint-layout {
    grid-template-columns: 1fr 280px !important;
  }
  .stat-cards {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ============================================
   JOINT PAGE MOBILE FIXES
   ============================================ */

@media (max-width: 768px) {
  /* === Radar chart smaller === */
  .joint-radar {
    min-height: 200px !important;
    max-height: 250px !important;
  }
  .joint-radar canvas {
    max-height: 220px !important;
  }
  
  /* === Advice section - 2 columns side by side === */
  .advice-section {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .advice-item {
    padding: 12px 8px !important;
    min-width: 0 !important;
  }
  .advice-item .advice-label {
    font-size: 0.6rem !important;
    margin-bottom: 4px !important;
  }
  .advice-item .advice-value {
    font-size: 1.1rem !important;
  }
  .advice-item .advice-sub {
    font-size: 0.65rem !important;
  }
  
  /* === Dimension grid - 2 columns === */
  .dimension-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .dimension-item {
    padding: 10px 12px !important;
  }
  .dimension-item .dim-score {
    font-size: 1.1rem !important;
  }
  
  /* === Action row compact === */
  .action-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 16px !important;
  }
  .action-badge {
    font-size: 1rem !important;
    padding: 6px 16px !important;
  }
  
  /* === Layout single column === */
  .joint-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ============================================
   JOINT PAGE - RADAR & ADVICE SIDE BY SIDE
   ============================================ */

@media (max-width: 768px) {
  /* === Main layout: Radar + Advice side by side === */
  .joint-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  
  /* === Radar card (left, ~50%) === */
  .joint-radar {
    min-height: auto !important;
    max-height: none !important;
    padding: 12px !important;
  }
  .joint-radar h3 {
    font-size: 0.8rem !important;
    margin-bottom: 8px !important;
  }
  .joint-radar canvas {
    max-height: 160px !important;
  }
  
  /* === Advice card (right, ~50%) === */
  .joint-advice {
    padding: 12px !important;
  }
  .joint-advice h3 {
    font-size: 0.8rem !important;
    margin-bottom: 8px !important;
  }
  
  /* === Advice section compact === */
  .advice-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .advice-item {
    padding: 8px !important;
    text-align: center !important;
  }
  .advice-item .advice-label {
    font-size: 0.55rem !important;
    margin-bottom: 2px !important;
  }
  .advice-item .advice-value {
    font-size: 0.95rem !important;
  }
  .advice-item .advice-sub {
    font-size: 0.6rem !important;
  }
  
  /* === Action badge prominent === */
  .action-row {
    padding: 10px !important;
    margin-top: 8px !important;
    justify-content: center !important;
  }
  .action-badge {
    font-size: 1.1rem !important;
    padding: 8px 20px !important;
  }
  
  /* === Dimension grid below - 2 columns === */
  .dimension-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .dimension-item {
    padding: 10px !important;
  }
  .dimension-item .dim-score {
    font-size: 1rem !important;
  }
}

/* ============================================
   JOINT PAGE MOBILE - FIRST SCREEN LAYOUT
   Left: Radar chart (compact)
   Right: Trade advice (entry/stop/target/RR/score)
   Below: Dimension details
   ============================================ */
@media (max-width: 768px) {
  /* === Reorder: joint-layout becomes side-by-side === */
  .joint-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  /* === Radar card (left half) - compact === */
  .joint-layout > .card:first-child {
    order: 1;
  }
  .joint-layout > .card:first-child .card-header {
    padding: 10px 12px !important;
  }
  .joint-layout > .card:first-child .card-header .card-title {
    font-size: 0.78rem !important;
  }
  .joint-radar {
    min-height: auto !important;
    padding: 0 !important;
  }
  .joint-radar canvas {
    max-height: 150px !important;
  }

  /* === Dimensions card (right half) - becomes advice panel === */
  .joint-layout > .card:last-child {
    order: 2;
  }
  .joint-layout > .card:last-child .card-header {
    padding: 10px 12px !important;
  }
  .joint-layout > .card:last-child .card-header .card-title {
    font-size: 0.78rem !important;
  }
  .joint-layout > .card:last-child .card-body {
    padding: 10px 12px !important;
  }

  /* === Advice card - make it look like part of the right panel === */
  #adviceCard {
    margin-bottom: 10px !important;
    border-radius: 12px !important;
  }
  #adviceCard .card-header {
    padding: 10px 12px !important;
  }
  #adviceCard .card-header .card-title {
    font-size: 0.78rem !important;
  }
  #adviceCard .card-body {
    padding: 0 12px 12px !important;
  }

  /* === Advice items: 2x2 grid compact === */
  .advice-section {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }
  .advice-item {
    padding: 8px 6px !important;
    border-radius: 8px !important;
  }
  .advice-item .advice-label {
    font-size: 0.55rem !important;
    margin-bottom: 2px !important;
  }
  .advice-item .advice-value {
    font-size: 0.9rem !important;
  }
  .advice-item .advice-sub {
    font-size: 0.5rem !important;
    margin-top: 1px !important;
  }

  /* === Action row: compact horizontal === */
  .action-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    flex-wrap: wrap !important;
  }
  .action-label {
    font-size: 0.72rem !important;
  }
  .action-badge {
    font-size: 0.85rem !important;
    padding: 4px 14px !important;
  }

  /* === Reason card compact === */
  #reasonCard {
    margin-bottom: 10px !important;
  }
  #reasonCard .card-header {
    padding: 10px 12px !important;
  }
  #reasonCard .card-header .card-title {
    font-size: 0.78rem !important;
  }
  .reason-box {
    font-size: 0.75rem !important;
    padding: 10px 12px !important;
    line-height: 1.5 !important;
    min-height: auto !important;
  }

  /* === Dimension grid: 2 columns below === */
  .dimension-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .dimension-item {
    padding: 8px 10px !important;
  }
  .dimension-item .dim-header {
    margin-bottom: 4px !important;
  }
  .dimension-item .dim-name {
    font-size: 0.7rem !important;
  }
  .dimension-item .dim-weight {
    font-size: 0.6rem !important;
  }
  .dimension-item .dim-score {
    font-size: 1rem !important;
    margin-bottom: 2px !important;
  }
}

/* ============================================
   JOINT MOBILE: Advice first, then Radar + Dimensions
   ============================================ */
@media (max-width: 768px) {
  /* === Reorder: Advice on top === */
  #mainContent {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Advice card - FIRST */
  #adviceCard {
    order: 1 !important;
    margin-bottom: 10px !important;
  }

  /* Radar card - SECOND */
  .joint-layout {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  /* Reason card - LAST */
  #reasonCard {
    order: 3 !important;
  }

  /* === Advice card compact === */
  #adviceCard .card-header {
    padding: 10px 12px !important;
  }
  #adviceCard .card-header .card-title {
    font-size: 0.8rem !important;
  }
  #adviceCard .card-body {
    padding: 0 12px 10px !important;
  }

  /* Advice items 2x2 */
  .advice-section {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }
  .advice-item {
    padding: 8px 6px !important;
  }
  .advice-item .advice-label {
    font-size: 0.55rem !important;
    margin-bottom: 2px !important;
  }
  .advice-item .advice-value {
    font-size: 0.9rem !important;
  }
  .advice-item .advice-sub {
    font-size: 0.5rem !important;
  }

  /* Action row compact */
  .action-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    flex-wrap: wrap !important;
  }
  .action-badge {
    font-size: 0.85rem !important;
    padding: 4px 14px !important;
  }

  /* === Radar card compact === */
  .joint-layout > .card:first-child .card-header {
    padding: 10px 12px !important;
  }
  .joint-layout > .card:first-child .card-header .card-title {
    font-size: 0.8rem !important;
  }
  .joint-radar {
    min-height: auto !important;
  }
  .joint-radar canvas {
    max-height: 200px !important;
  }

  /* === Dimensions card === */
  .joint-layout > .card:last-child .card-header {
    padding: 10px 12px !important;
  }
  .joint-layout > .card:last-child .card-header .card-title {
    font-size: 0.8rem !important;
  }
  .dimension-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .dimension-item {
    padding: 8px 10px !important;
  }
  .dimension-item .dim-score {
    font-size: 1rem !important;
  }

  /* === Reason compact === */
  .reason-box {
    font-size: 0.75rem !important;
    padding: 10px 12px !important;
    line-height: 1.5 !important;
    min-height: auto !important;
  }
}

/* ============================================
   HEDGE PAGE MOBILE - Input row horizontal
   ============================================ */
@media (max-width: 768px) {
  /* === Input panel compact === */
  .hedge-input-panel {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }
  .hedge-input-panel h3 {
    font-size: 0.9rem !important;
    margin-bottom: 12px !important;
  }

  /* === Input row: force horizontal, scroll if needed === */
  .hedge-input-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .hedge-input-row::-webkit-scrollbar {
    display: none !important;
  }
  .hedge-input-row > .form-group {
    flex: 0 0 auto !important;
    min-width: 80px !important;
    max-width: none !important;
  }
  .hedge-input-row > .form-group label {
    font-size: 0.6rem !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
  }
  .hedge-input-row > .form-group input,
  .hedge-input-row > .form-group select {
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
    width: 100% !important;
  }
  /* Coin select - fixed width */
  .hedge-input-row > .form-group:first-child {
    width: 80px !important;
  }
  /* Position input */
  .hedge-input-row > .form-group:nth-child(2) {
    width: 90px !important;
  }
  /* Direction select */
  .hedge-input-row > .form-group:nth-child(3) {
    width: 70px !important;
  }
  /* Leverage input */
  .hedge-input-row > .form-group:nth-child(4) {
    width: 60px !important;
  }
  /* Risk input */
  .hedge-input-row > .form-group:nth-child(5) {
    width: 70px !important;
  }
  /* Analyze button */
  .hedge-input-row .btn-analyze {
    height: 38px !important;
    padding: 0 16px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* === Results section compact === */
  .hedge-section {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
  .hedge-section h3 {
    font-size: 0.9rem !important;
    margin-bottom: 12px !important;
  }

  /* Market grid & plan grid - 2 columns */
  .market-grid, .plan-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .metric {
    padding: 10px 12px !important;
  }
  .metric .label {
    font-size: 0.6rem !important;
  }
  .metric .value {
    font-size: 1rem !important;
  }
  .plan-item {
    padding: 14px 10px !important;
  }
  .plan-value {
    font-size: 1.2rem !important;
  }
  .plan-label {
    font-size: 0.65rem !important;
  }

  /* Tier table compact */
  .tier-table {
    font-size: 0.75rem !important;
  }
  .tier-table th, .tier-table td {
    padding: 8px 10px !important;
  }
  .tier-badge {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.7rem !important;
  }

  /* Reasoning compact */
  .reasoning {
    padding: 10px 14px !important;
    font-size: 0.78rem !important;
    margin-top: 12px !important;
  }

  /* Note compact */
  .note {
    padding: 10px 14px !important;
    font-size: 0.75rem !important;
    margin-top: 12px !important;
  }
}

/* ============================================
   HEDGE PAGE MOBILE - 2-row input + iconless tabs
   ============================================ */
@media (max-width: 768px) {
  /* === Input panel - 2 rows layout === */
  .hedge-input-panel {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }
  .hedge-input-panel h3 {
    font-size: 0.9rem !important;
    margin-bottom: 12px !important;
  }

  /* Input row - 2 rows, 3+3 layout */
  .hedge-input-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .hedge-input-row > .form-group {
    flex: none !important;
    min-width: auto !important;
    max-width: none !important;
    width: 100% !important;
  }
  .hedge-input-row > .form-group label {
    font-size: 0.65rem !important;
    margin-bottom: 4px !important;
    color: var(--text-tertiary) !important;
  }
  .hedge-input-row > .form-group input,
  .hedge-input-row > .form-group select {
    padding: 10px !important;
    font-size: 0.85rem !important;
    width: 100% !important;
    height: 42px !important;
  }
  /* Analyze button - full width on second row */
  .hedge-input-row .btn-analyze {
    grid-column: span 3 !important;
    height: 44px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
  }

  /* === Bottom tabs - iconless, 4-char grid === */
  .hedge-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .hedge-tabs .tab-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 4px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 10px !important;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
    min-height: 48px !important;
  }
  .hedge-tabs .tab-btn.active {
    background: var(--accent) !important;
    color: #000 !important;
    border-color: var(--accent) !important;
  }
  /* Hide icons in tabs */
  .hedge-tabs .tab-btn svg,
  .hedge-tabs .tab-btn i,
  .hedge-tabs .tab-btn .icon {
    display: none !important;
  }
  /* Ensure 4-char text fits */
  .hedge-tabs .tab-btn span,
  .hedge-tabs .tab-btn {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* === Results section compact === */
  .hedge-section {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
  .hedge-section h3 {
    font-size: 0.9rem !important;
    margin-bottom: 12px !important;
  }

  /* Market grid & plan grid - 2 columns */
  .market-grid, .plan-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .metric {
    padding: 10px 12px !important;
  }
  .metric .label {
    font-size: 0.6rem !important;
  }
  .metric .value {
    font-size: 1rem !important;
  }
  .plan-item {
    padding: 14px 10px !important;
  }
  .plan-value {
    font-size: 1.2rem !important;
  }

  /* Tier table compact */
  .tier-table {
    font-size: 0.75rem !important;
  }
  .tier-table th, .tier-table td {
    padding: 8px 10px !important;
  }

  /* Reasoning & note compact */
  .reasoning, .note {
    padding: 10px 14px !important;
    font-size: 0.78rem !important;
  }
}

/* ============================================
   HEDGE PAGE MOBILE - Fixed input layout
   ============================================ */
@media (max-width: 768px) {
  /* === Input panel === */
  .hedge-input-panel {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }
  .hedge-input-panel h3 {
    font-size: 0.9rem !important;
    margin-bottom: 12px !important;
  }

  /* Input row - proper 2-row grid */
  .hedge-input-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 12px 10px !important;
  }
  
  /* All form groups fill their cell */
  .hedge-input-row > .form-group {
    flex: none !important;
    min-width: auto !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* Labels */
  .hedge-input-row > .form-group label {
    font-size: 0.65rem !important;
    margin-bottom: 6px !important;
    color: var(--text-tertiary) !important;
    display: block !important;
  }
  
  /* Inputs and selects - full width */
  .hedge-input-row > .form-group input,
  .hedge-input-row > .form-group select {
    width: 100% !important;
    padding: 12px 10px !important;
    font-size: 0.9rem !important;
    height: 46px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-subtle) !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  
  /* Select arrow indicator */
  .hedge-input-row > .form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238892a4' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 30px !important;
  }
  
  /* Direction select text horizontal */
  .hedge-input-row > .form-group select option {
    font-size: 0.9rem !important;
    padding: 8px !important;
  }
  
  /* Analyze button - row 2, span all 3 columns */
  .hedge-input-row .btn-analyze {
    grid-column: 1 / span 3 !important;
    grid-row: 2 !important;
    height: 48px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
    width: 100% !important;
  }

  /* === Bottom tabs - iconless, 4-char grid === */
  .tab-bar.hedge-tabs,
  .hedge-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
  }
  
  .hedge-tabs .tab-btn,
  .tab-bar.hedge-tabs .tab-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 4px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 10px !important;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
    min-height: 52px !important;
    width: 100% !important;
    line-height: 1.2 !important;
  }
  
  .hedge-tabs .tab-btn.active,
  .tab-bar.hedge-tabs .tab-btn.active {
    background: var(--accent) !important;
    color: #000 !important;
    border-color: var(--accent) !important;
  }
  
  /* Hide ALL icons in tabs */
  .hedge-tabs .tab-btn svg,
  .hedge-tabs .tab-btn i,
  .hedge-tabs .tab-btn .icon,
  .hedge-tabs .tab-btn img,
  .tab-bar.hedge-tabs .tab-btn svg,
  .tab-bar.hedge-tabs .tab-btn i {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Tab text only */
  .hedge-tabs .tab-btn span,
  .tab-bar.hedge-tabs .tab-btn span {
    display: block !important;
    white-space: nowrap !important;
  }

  /* === Results sections === */
  .hedge-section {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
  .hedge-section h3 {
    font-size: 0.9rem !important;
    margin-bottom: 12px !important;
  }

  .market-grid, .plan-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .metric {
    padding: 10px 12px !important;
  }
  .metric .label {
    font-size: 0.6rem !important;
  }
  .metric .value {
    font-size: 1rem !important;
  }

  .tier-table {
    font-size: 0.75rem !important;
  }
  .tier-table th, .tier-table td {
    padding: 8px 10px !important;
  }

  .reasoning, .note {
    padding: 10px 14px !important;
    font-size: 0.78rem !important;
  }
}

/* ============================================
   HEDGE PAGE MOBILE
   Row1: 币种|持仓量|风险偏好 (3 cols)
   Row2: 方向|杠杆|风险预算|分析 (4 cols)
   Tabs: no icons, 4-char grid
   ============================================ */
@media (max-width: 768px) {
  /* === Input panel === */
  .hedge-input-panel {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }
  .hedge-input-panel h3 {
    font-size: 0.9rem !important;
    margin-bottom: 12px !important;
  }

  /* === Row 1: 币种 | 持仓量 | 风险偏好 === */
  .hedge-input-row:first-of-type {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  /* === Row 2: 方向 | 杠杆 | 风险预算 | 分析按钮 === */
  .hedge-input-row:nth-of-type(2) {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr auto !important;
    gap: 10px !important;
    margin-top: 12px !important;
    align-items: end !important;
  }

  /* === All form groups fill their cell === */
  .hedge-input-row > .form-group {
    flex: none !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .hedge-input-row > .form-group label,
  .hedge-input-row > .form-group .form-label {
    font-size: 0.65rem !important;
    margin-bottom: 6px !important;
    color: var(--text-tertiary) !important;
    display: block !important;
  }

  /* === Inputs & selects - full width of their cell === */
  .hedge-input-row > .form-group input,
  .hedge-input-row > .form-group select {
    width: 100% !important;
    padding: 12px 10px !important;
    font-size: 0.9rem !important;
    height: 46px !important;
    border-radius: 8px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* === Direction tabs - horizontal, fill width === */
  .direction-tabs {
    display: flex !important;
    gap: 4px !important;
    width: 100% !important;
  }
  .direction-tabs .tab-btn {
    flex: 1 !important;
    padding: 12px 4px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  /* === Analyze button - in row 2, auto width === */
  .hedge-input-row .btn-analyze {
    height: 46px !important;
    padding: 0 16px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    align-self: end !important;
  }

  /* === Bottom tabs - NO icons, 4-char grid === */
  .tab-bar[style*="flex"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    margin-bottom: 16px !important;
  }
  .tab-bar[style*="flex"] .tab-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 4px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 10px !important;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
    min-height: 52px !important;
    width: 100% !important;
    cursor: pointer !important;
  }
  .tab-bar[style*="flex"] .tab-btn.active {
    background: var(--accent) !important;
    color: #000 !important;
    border-color: var(--accent) !important;
  }

  /* === Results sections === */
  .hedge-section {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
  .hedge-section h3 {
    font-size: 0.9rem !important;
    margin-bottom: 12px !important;
  }
  .market-grid, .plan-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .metric {
    padding: 10px 12px !important;
  }
  .metric .label {
    font-size: 0.6rem !important;
  }
  .metric .value {
    font-size: 1rem !important;
  }
  .tier-table {
    font-size: 0.75rem !important;
  }
  .tier-table th, .tier-table td {
    padding: 8px 10px !important;
  }
  .reasoning, .note {
    padding: 10px 14px !important;
    font-size: 0.78rem !important;
  }
}

/* ============================================
   HEDGE PAGE MOBILE - 3 ROW LAYOUT
   Row1: 币种|持仓量|风险偏好
   Row2: 方向|杠杆|风险预算
   Row3: [开始分析] button
   ============================================ */
@media (max-width: 768px) {
  /* === Input panel === */
  .hedge-input-panel {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }

  /* === All rows: 3 columns === */
  .hedge-input-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }
  .hedge-input-row:last-of-type {
    margin-bottom: 0 !important;
  }

  /* === Form groups fill cell === */
  .hedge-input-row > .form-group {
    flex: none !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .hedge-input-row > .form-group label,
  .hedge-input-row > .form-group .form-label {
    font-size: 0.65rem !important;
    margin-bottom: 6px !important;
    color: var(--text-tertiary) !important;
    display: block !important;
    white-space: nowrap !important;
  }

  /* === Inputs & selects === */
  .hedge-input-row > .form-group input,
  .hedge-input-row > .form-group select {
    width: 100% !important;
    padding: 12px 8px !important;
    font-size: 0.85rem !important;
    height: 44px !important;
    border-radius: 8px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* === Direction tabs - fill width === */
  .direction-tabs {
    display: flex !important;
    gap: 4px !important;
    width: 100% !important;
  }
  .direction-tabs .tab-btn {
    flex: 1 !important;
    padding: 10px 2px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  /* === Analyze button - Row 3, full width === */
  .hedge-input-row .btn-analyze,
  #analyzeBtn {
    grid-column: 1 / span 3 !important;
    width: 100% !important;
    height: 48px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
  }

  /* === Bottom tabs - 3 columns, no icons === */
  .tab-bar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    margin-bottom: 16px !important;
  }
  .tab-bar .tab-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 4px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
    min-height: 52px !important;
    width: 100% !important;
  }
  .tab-bar .tab-btn.active {
    background: var(--accent) !important;
    color: #000 !important;
    border-color: var(--accent) !important;
  }

  /* === Results sections === */
  .hedge-section {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
  .market-grid, .plan-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .metric {
    padding: 10px 12px !important;
  }
  .tier-table {
    font-size: 0.75rem !important;
  }
  .tier-table th, .tier-table td {
    padding: 8px 10px !important;
  }
}

/* HEDGE MOBILE */
@media (max-width: 768px) {
  .hedge-input-panel { padding: 16px !important; }
  .hedge-input-row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
  .direction-tabs .tab-btn { flex: 1 !important; padding: 10px 2px !important; font-size: 0.75rem !important; }
  .tab-bar { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .tab-bar .tab-btn { padding: 14px 4px !important; font-size: 0.85rem !important; }
}