/* KLAK Mobile Batch C — Premium compact header. Oct 24 2026.
   Styling only; preserve production React, signer, trading, fees and desktop header.
   The existing clickable Profile avatar is promoted, not replaced. */
@media (max-width: 767px) {
  .v3-trading-shell .v3-header.v3-trading-header {
    --km-c-cell: minmax(0, 1fr);
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 41px repeat(6, var(--km-c-cell)) !important;
    grid-template-rows: 43px 39px !important;
    gap: 0 !important;
    height: 89px !important;
    min-height: 89px !important;
    padding: 3px 10px 4px !important;
    align-items: center !important;
    justify-content: stretch !important;
  }
  .v3-trading-shell .v3-trading-header > .v3-wordmark {
    grid-row: 1 !important;
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    width: 37px !important;
    min-width: 37px !important;
    height: 40px !important;
  }
  .v3-trading-shell .v3-trading-header > .v3-header-actions {
    display: contents !important;
  }
  /* Primary row: brand, deposit, account assets, profile. */
  .v3-trading-shell .v3-trading-header .v3-header-actions > .klak-header-deposit {
    grid-row: 1 !important;
    grid-column: 3 / span 3 !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    min-width: 80px !important;
    max-width: 100% !important;
    height: 35px !important;
    font-size: 11px !important;
    gap: 5px !important;
    padding: 0 11px !important;
    border-radius: 9px !important;
  }
  .v3-trading-shell .v3-trading-header .v3-header-actions > .v3-assets {
    grid-row: 1 !important;
    grid-column: 6 !important;
    justify-self: center !important;
    align-self: center !important;
  }
  .v3-trading-shell .v3-trading-header .v3-header-actions > .v3-account:not(.v3-assets) {
    grid-row: 1 !important;
    grid-column: 7 !important;
    justify-self: end !important;
    align-self: center !important;
    position: relative;
    z-index: 2;
  }
  .v3-trading-shell .v3-trading-header .v3-header-actions > .v3-account:not(.v3-assets) > .v3-account-trigger {
    border: 1px solid rgba(247, 152, 42, .32) !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, rgba(255, 158, 47, .10), rgba(255, 158, 47, .018)) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
  /* Disconnected: keep the Connect wallet button visible instead. */
  .v3-trading-shell .v3-trading-header .v3-header-actions > .v3-connect {
    grid-row: 1 !important;
    grid-column: 3 / 8 !important;
    justify-self: end !important;
    align-self: center !important;
    min-height: 36px !important;
    max-width: 100% !important;
    font-size: 12px !important;
  }
  /* Secondary row: search, notifications, privacy/language/display utilities. */
  .v3-trading-shell .v3-trading-header .v3-header-actions > .klak-market-search-entry {
    grid-row: 2 !important;
    grid-column: 1 / 2 !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
  }
  .v3-trading-shell .v3-trading-header .v3-header-actions > .klak-notice-root {
    grid-row: 2 !important;
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
  }
  .v3-trading-shell .v3-trading-header .v3-header-actions > .klak-header-utilities {
    grid-row: 2 !important;
    grid-column: 3 / 8 !important;
    display: flex !important;
    justify-self: end !important;
    justify-content: space-evenly !important;
    align-self: center !important;
    width: min(100%, 172px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    border: 0 !important;
  }
  /* Bounded touch targets and an unobtrusive separation line between rows. */
  .v3-trading-shell .v3-trading-header::after {
    content: '';
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    grid-column: 1 / 8;
    grid-row: 2;
    align-self: start;
  }
  .v3-trading-shell .v3-trading-header .v3-header-actions :is(.klak-market-search-trigger,.klak-header-icon,.klak-notice-trigger,.v3-assets>.v3-account-trigger) {
    min-height: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    width: 36px !important;
  }
  .v3-trading-shell .v3-trading-header .v3-header-actions :is(button,a):focus-visible {
    outline: 2px solid #ffab52 !important;
    outline-offset: 2px !important;
  }
  /* Popovers must remain anchored to live controls, above the trading chart. */
  .v3-trading-shell .v3-trading-header .v3-header-actions :is(.klak-header-utility,.v3-assets,.klak-notice-root,.klak-market-search-entry) {
    position: relative;
  }
}
@media (max-width: 350px) {
  .v3-trading-shell .v3-header.v3-trading-header {padding-inline: 7px !important;grid-template-columns: 38px repeat(6,minmax(0,1fr)) !important;}
  .v3-trading-shell .v3-trading-header .v3-header-actions > .klak-header-deposit {min-width: 70px !important;padding-inline: 7px !important;}
  .v3-trading-shell .v3-trading-header .v3-header-actions > .klak-header-utilities {gap: 0 !important;}
}
@media (max-width: 767px) {
  html[data-klak-theme="light"] .v3-trading-shell .v3-trading-header .v3-header-actions > .v3-account:not(.v3-assets) > .v3-account-trigger {
    border-color: rgba(187, 105, 18, .36) !important;
    background: #fff2e5 !important;
  }
  html[data-klak-theme="light"] .v3-trading-shell .v3-trading-header::after {
    background: linear-gradient(90deg, transparent, rgba(32,47,64,.14), transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .v3-trading-shell .v3-trading-header .v3-header-actions :is(button,a) { transition: none !important; }
}
