/* Shared phone and small-tablet refinements. Loaded last on every page. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { max-width: 100%; overflow-x: hidden; }
body:has(dialog[open]) { overflow: hidden; }
button, a, input, select, textarea { touch-action: manipulation; }

@media (max-width: 700px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
  button, [role="button"] { min-height: 44px; }
  dialog {
    width: calc(100% - 16px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 16px) !important;
    margin: auto !important;
    border-radius: 14px !important;
  }

  /* Public site and account/payment flow. */
  .site-header { gap: 8px; }
  .site-header .logo { min-width: 0; }
  .site-header .logo span { flex: 0 0 38px; width: 38px; height: 38px; }
  .site-header .logo b { font-size: 16px; }
  .site-header .logo small { display: none; }
  .header-actions { gap: 6px; }
  .dashboard-button { min-height: 42px; white-space: nowrap; }
  .account-menu { position: fixed; top: 62px; right: 10px; left: 10px; width: auto; max-height: calc(100dvh - 78px); overflow-y: auto; }
  .hero { width: 100%; }
  .hero h1 { font-size: clamp(37px, 11vw, 45px); overflow-wrap: anywhere; }
  .terminal-card { width: 100%; min-width: 0; }
  .terminal-head, .terminal-foot { gap: 10px; padding: 12px; }
  .market-bar, .trade-plan, .signal-row { margin-right: 10px; margin-left: 10px; }
  .signal-row { gap: 8px; padding: 12px 10px; }
  .signal-name { min-width: 0; }
  .signal-name b, .signal-name small { overflow-wrap: anywhere; }
  .section-heading h2, .benefits-copy h2, .account-section h2 { font-size: clamp(29px, 9vw, 38px); }
  .plan-card { padding: 27px 21px; }
  .account-panel button { width: 100%; }
  .account-panel button + button { margin: 8px 0 0; }

  .auth-dialog { padding: 23px 17px !important; }
  .auth-intro { padding-right: 34px; }
  .auth-tabs { margin-top: 20px; }
  .auth-form label, .form-grid label { font-size: 13px !important; }
  .field-note, .password-note, .auth-switch { font-size: 12px !important; }
  .dialog-close { top: 9px; right: 9px; width: 42px; height: 42px; }
  .dialog-heading { padding: 25px 18px 15px; }
  .dialog-heading h2 { padding-right: 28px; font-size: 24px; }
  .checkout-plan, .checkout-user, .method-tabs, .payment-details { margin-right: 14px; margin-left: 14px; }
  .checkout-plan { align-items: flex-start; gap: 10px; }
  .checkout-plan strong { flex: 0 0 auto; }
  .checkout-user { align-items: flex-start; }
  .checkout-user > div { min-width: 0; }
  .checkout-user b, .checkout-user p { overflow-wrap: anywhere; }
  .payment-details:has(.upi-copy) { align-items: stretch; flex-direction: column; }
  .upi-qr { width: min(210px, 100%); height: auto; aspect-ratio: 1; margin: 0 auto; }
  .payment-details .upi-copy > div { align-items: flex-start; flex-direction: column; gap: 10px; }
  .payment-details b, .payment-details dd { overflow-wrap: anywhere; word-break: break-word; }
  .payment-details dl > div { grid-template-columns: 1fr; gap: 2px; padding: 7px 0; }
  #payment-form { padding: 0 14px 22px; }
  .proof-upload { min-height: 112px; justify-content: center; }
  .payment-confirm { font-size: 13px; line-height: 1.5; }
  .checkout-success { padding: 42px 20px; }
  .welcome-card { padding: 26px 17px; }
  .welcome-card h2 { font-size: 27px; }
  .welcome-actions button { width: 100%; }

  /* Customer dashboard. */
  body > aside {
    position: sticky;
    top: 0;
    z-index: 20;
    display: block;
    width: 100%;
    padding: 8px 8px 0;
    overflow: hidden;
    background: rgba(8, 19, 29, .97);
    backdrop-filter: blur(12px);
  }
  body > aside .brand { display: none; }
  body > aside nav {
    display: flex;
    gap: 5px;
    width: 100%;
    margin: 0;
    padding: 0 0 8px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  body > aside nav::-webkit-scrollbar { display: none; }
  body > aside nav button {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 105px;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid transparent;
    text-align: center;
    scroll-snap-align: start;
  }
  body > aside nav button span { display: inline !important; font-size: 12px !important; white-space: nowrap; }
  body > aside nav button.active { border-color: #285069; }
  body > aside .subscription-link, body > aside .system { display: none !important; }
  body > main { width: 100%; padding: 16px 12px 30px; overflow: hidden; }
  body > main > header { align-items: stretch; flex-direction: column; gap: 10px; margin-bottom: 18px; }
  body > main > header h1 { font-size: 26px; line-height: 1.2; }
  body > main > header .live { align-self: flex-start; max-width: 100%; }
  body > main > header .live span { overflow-wrap: anywhere; }
  .data-mode-banner, .toolbar, .universe-head, .strategy-head, .broker-policy { align-items: stretch !important; flex-direction: column !important; }
  .toolbar { gap: 14px; padding: 14px; }
  .toolbar button, #scan-now, #refresh { width: 100%; margin: 0; }
  .signal-grid, .broker-grid, .risk-layout, .fib-rules, .universe-options { grid-template-columns: minmax(0, 1fr) !important; }
  .panel, .broker-card, .risk-layout > div, #strategy-form, #universe-form { border-radius: 14px; }
  .signal-card { padding: 15px 13px; }
  .rank-row { gap: 9px; }
  .identity { min-width: 0; }
  .identity > div { min-width: 0; }
  .identity h3, .identity p, .reason { overflow-wrap: anywhere; }
  .score { flex: 0 0 auto; }
  .metrics { grid-template-columns: 1fr 1fr !important; }
  .metric { min-width: 0; }
  .broker-card { padding: 16px; }
  .broker-head { gap: 10px; }
  .broker-name { min-width: 0; }
  .broker-actions, .dialog-actions, .strategy-actions, .symbol-add { flex-direction: column; width: 100%; }
  .broker-actions button, .dialog-actions button, .strategy-actions button, .symbol-add button { width: 100%; }
  .risk-layout label { grid-template-columns: 1fr; gap: 7px; }
  .fib-inputs { grid-template-columns: 1fr 1fr !important; }
  .fib-inputs label:first-child { grid-column: 1 / -1; }
  .range-arrow { display: none; }
  .watchlist-title, .universe-footer, .strategy-footer, .trade-record-head { align-items: stretch !important; flex-direction: column !important; gap: 12px; }
  .universe-footer button { width: 100%; }
  .broker-introduction { padding: 17px 14px; }
  .broker-intro-head button { width: 100%; white-space: normal; }
  .broker-api-links a { min-height: 0; }
  dialog form { padding: 23px 16px; }
  #credential-fields input, .risk-layout input, .risk-layout select { width: 100%; }

  /* Admin dashboard. */
  .admin-gate { min-height: 100dvh; padding: 12px; }
  .gate-card { padding: 28px 19px; }
  .admin-app > aside {
    position: sticky;
    top: 0;
    z-index: 20;
    display: block;
    padding: 8px;
    overflow: hidden;
    background: rgba(9, 22, 37, .97);
    backdrop-filter: blur(12px);
  }
  .admin-app > aside .brand, .admin-app > aside .admin-security { display: none; }
  .admin-app nav { display: flex; gap: 5px; width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .admin-app nav::-webkit-scrollbar { display: none; }
  .admin-app nav button {
    flex: 0 0 auto;
    justify-content: center;
    width: auto;
    min-width: 92px;
    min-height: 46px;
    padding: 8px 10px;
    font-size: 12px !important;
    white-space: nowrap;
  }
  .admin-app nav button > span { font-size: 15px !important; }
  .admin-app nav i { display: inline-flex; margin-left: 2px; }
  .admin-app > main { width: 100%; padding: 16px 12px 28px; overflow: hidden; }
  .admin-app header { align-items: stretch; flex-direction: column; gap: 12px; }
  .admin-app header > div:last-child { flex-wrap: wrap; }
  .admin-app header button { flex: 1; min-width: 105px; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-grid article { min-width: 0; padding: 15px 13px; }
  .panel-head { align-items: stretch; flex-direction: column; gap: 10px; }
  .panel-head select, .panel-head button { width: 100%; }
  .renewal-item, .mini-payment { grid-template-columns: 1fr; }
  .renewal-actions, .table-actions, .payment-actions { align-items: stretch; flex-direction: column; }
  .renewal-actions a, .renewal-actions button, .table-actions button, .payment-actions button { min-height: 42px; text-align: center; }
  .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 760px; }
  .payment-card { grid-template-columns: 1fr; gap: 13px; }
  .settings-form, .qr-panel { padding: 17px 14px; }
  .settings-form > button { width: 100%; }
  #followup-form { padding: 0 17px 22px; }
  #followup-form > button { width: 100%; margin-left: 0; }
}

@media (max-width: 420px) {
  .site-header .logo div { display: none; }
  .site-header .sign-in-button.signed-in { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .site-header .dashboard-button { padding-right: 9px; padding-left: 9px; font-size: 12px; }
  .metric-grid { grid-template-columns: 1fr; }
  .market-bar, .trade-plan { grid-template-columns: 1fr 1fr; }
  .welcome-actions { grid-template-columns: 1fr; }
}