/* Responsive shell: tablet */
@media (min-width: 621px) and (max-width: 1000px) {
  aside .brand > div { display: none; }
  aside nav a, aside nav a.active { justify-content: center; font-size: 0; }
  .dashboard { max-width: 100%; }
}

.telegram-auth { margin-top: 14px; }
.telegram-auth .panel-title p { margin: 2px 0; }
.telegram-auth form { max-width: 520px; }
.privacy-note { color: #738399; font-size: 12px; }
button:disabled { cursor: not-allowed; opacity: .45; }

/* Mobile working surface */
@media (max-width: 620px) {
  :root { font-size: 15px; }
  html { background: var(--bg); overflow-x: hidden; }
  body { min-width: 0; overflow-x: hidden; padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  body[data-tab="settings"], body[data-tab="costs"] { padding-bottom: calc(138px + env(safe-area-inset-bottom)); }

  aside { position: fixed; inset: auto 0 0; z-index: 50; display: flex; width: 100%; height: calc(68px + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom); border: 0; border-top: 1px solid #2b3545; background: rgba(8,11,18,.96); box-shadow: 0 -12px 36px #0009; backdrop-filter: blur(18px); }
  aside .brand, aside .mode { display: none; }
  aside nav { display: flex; flex: 1 1 auto; gap: 2px; min-width: 0; padding: 5px 6px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
  aside nav::-webkit-scrollbar { display: none; }
  aside nav a, aside nav a:not(.active) { display: flex; flex: 0 0 66px; min-width: 66px; min-height: 56px; padding: 6px 4px; border-radius: 11px; flex-direction: column; justify-content: center; gap: 2px; color: #8391a5; font-size: 10px; line-height: 1.1; scroll-snap-align: center; }
  aside nav a span { width: auto; font-size: 20px; line-height: 1; }
  aside nav a.active { background: linear-gradient(180deg,#17312a,#11211e); box-shadow: inset 0 2px var(--green); color: #dffcef; }
  aside > form { display: none; }
  aside nav .nav-mobile-logout { display: block !important; flex: 0 0 66px; min-width: 66px; min-height: 56px; margin: 0; scroll-snap-align: center; }
  aside nav .nav-mobile-logout .ghost { width: 100%; height: 100%; min-height: 56px; margin: 0; padding: 6px 4px; border: 0; border-radius: 11px; color: #9a7f88; font-size: 10px; line-height: 1.1; }
  aside nav .nav-mobile-logout .ghost:hover { background: #2b171c; color: #ff9dad; }

  .dashboard { width: 100%; max-width: none; margin: 0; padding: max(16px,env(safe-area-inset-top)) 12px 24px; }
  .dashboard > header { align-items: center; gap: 12px; margin-bottom: 18px; }
  .dashboard > header > div { min-width: 0; }
  .dashboard > header h1 { overflow-wrap: anywhere; font-size: clamp(20px,6vw,25px); line-height: 1.12; letter-spacing: -.45px; }
  .dashboard > header .eyebrow { margin-bottom: 2px; font-size: 9px; letter-spacing: 1.15px; }
  .dashboard > header form { flex: 0 0 auto; }
  .dashboard > header .primary { min-width: 48px; padding-inline: 12px; font-size: 0; }
  .dashboard > header .primary::after { content: "▶"; font-size: 15px; }

  h2 { font-size: 16px; }
  h3 { margin-top: 19px; font-size: 14px; }
  p { line-height: 1.55; }
  .grid, .grid.two, .feed-grid, .integration-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .panel, .stats article { min-width: 0; padding: 15px; border-radius: 13px; }
  .panel, .panel p, .privacy-note, .danger-zone, .integration-head > div { min-width: 0; overflow-wrap: anywhere; }
  .panel-title { align-items: flex-start; gap: 10px; margin-bottom: 13px; flex-wrap: wrap; }
  .panel-title > div { min-width: 0; }
  .panel-title > span { width: 100%; line-height: 1.4; }
  .panel-title form { max-width: 100%; }
  .sticky { position: static; }

  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-bottom: 12px; }
  .stats article { min-height: 116px; }
  .stats small { font-size: 12px; line-height: 1.3; }
  .stats strong { margin: 6px 0; font-size: clamp(21px,7vw,27px); line-height: 1.12; overflow-wrap: anywhere; }
  .stats em { font-size: 12px; line-height: 1.35; }

  button, .primary, .secondary, .ghost, .danger-link, .chip { min-height: 44px; }
  input, select, textarea { min-height: 46px; padding: 11px 12px; font-size: 16px; }
  textarea { min-height: 118px; }
  form label { margin: 14px 0; color: #aeb9c8; font-size: 14px; }
  form label > small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.45; }
  .form-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .form-grid .wide { grid-column: auto; }
  .toggles { align-items: stretch; flex-direction: column; gap: 2px; }
  .toggles label, .switch, .danger-zone label { min-height: 44px; margin: 2px 0; }
  .save-fixed { right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); box-shadow: 0 12px 32px #000c,0 0 0 1px #123b2d; }

  dialog { width: 100vw; max-width: none; height: min(92dvh,860px); max-height: 92dvh; margin: auto 0 0; border-width: 1px 0 0; border-radius: 20px 20px 0 0; overscroll-behavior: contain; }
  .modal-form { padding: 18px 15px calc(22px + env(safe-area-inset-bottom)); }
  .modal-head { position: sticky; top: -18px; z-index: 2; margin: -18px -15px 10px; padding: 14px 15px; background: rgba(16,23,33,.97); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
  .modal-head button { min-width: 44px; }
  .modal-form > button:last-child { width: 100%; }

  .signal { grid-template-columns: 32px minmax(0,1fr); align-items: start; gap: 10px; }
  .signal > div { min-width: 0; }
  .signal p { font-size: 14px; line-height: 1.45; }
  .signal-score { grid-column: 2; text-align: left; }
  .safety { align-items: flex-start; padding: 13px; }
  .safety > div, .integration-head > div { min-width: 0; }
  .integration-head p { white-space: normal; }
  .safety p { font-size: 13px; }
  .order-row { grid-template-columns: minmax(0,1fr) auto; align-items: center; font-size: 13px; }
  .order-row mark, .order-row form { grid-column: 2; }
  .empty { padding: 24px 10px; font-size: 14px; }
  .chips { gap: 7px; }
  .chip { max-width: 100%; overflow-wrap: anywhere; text-align: left; }

  .message summary { grid-template-columns: 32px minmax(0,1fr) auto; gap: 9px; padding: 14px 0; }
  .message summary > div { min-width: 0; }
  .message summary p { margin-top: 4px; font-size: 14px; line-height: 1.48; }
  .message summary small { font-size: 11px; line-height: 1.4; }
  .analysis { margin: 0 0 14px; padding: 13px; border-radius: 11px; }
  .analysis-head { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 13px; }
  .analysis-head > div { min-width: 0; }
  .analysis-head strong { overflow-wrap: anywhere; }
  .analysis-head label, .style-title label { font-size: 11px; }
  .composite-copy { grid-column: 1 / -1; text-align: left; }
  .composite-copy small { font-size: 11px; }
  .metric-bars.smart-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 10px; }
  .metric > div { font-size: 12px; }
  .metric > i { height: 8px; }
  .style-insight { padding: 12px; }
  .style-title { align-items: flex-start; flex-direction: column; gap: 4px; }
  .style-title > span { font-size: 11px; }
  .style-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .style-stats span { font-size: 11px; }
  .style-stats b { font-size: 13px; }
  .style-insight > small, .analysis .market-evidence, .analysis-actions small { font-size: 12px; line-height: 1.5; }
  .signal-explanation { grid-template-columns: minmax(0,1fr); }
  .signal-explanation strong { font-size: 12px; }
  .signal-explanation li { font-size: 13px; line-height: 1.45; }
  .purchase-decision { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
  .purchase-decision code { display: block; margin: 4px 0 0; font-size: 10px; white-space: normal; }
  .analysis-actions { align-items: stretch; flex-direction: column; }
  .analysis-actions form, .analysis-actions button, .feed-tools, .feed-tools form, .feed-tools button { width: 100%; }
  .feed-tools { align-items: stretch; gap: 8px; }
  .feed-tools > span { font-size: 12px; line-height: 1.45; }
  .purchase-config { padding: 14px; }
  .purchase-config output { font-size: 15px; }

  .table-wrap { max-width: 100%; overflow: visible; }
  .mobile-card-table { display: block; width: 100%; white-space: normal; }
  .mobile-card-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .mobile-card-table tbody { display: grid; gap: 10px; }
  .mobile-card-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px 14px; padding: 13px; border: 1px solid #222d3c; border-radius: 11px; background: #0c121b; }
  .mobile-card-table td { display: block; min-width: 0; padding: 0; border: 0; color: #d0d8e3; font-size: 14px; overflow-wrap: anywhere; }
  .mobile-card-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: #687990; font-size: 10px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
  .mobile-card-table td:first-child, .mobile-card-table td:last-child:has(form) { grid-column: 1 / -1; }
  .mobile-card-table td small { margin-top: 2px; font-size: 12px; line-height: 1.4; }
  .mobile-card-table td code { display: block; max-width: 100%; font-size: 11px; overflow-wrap: anywhere; white-space: normal; }
  .mobile-card-table td form { display: inline-block; margin-right: 6px; }
  .mobile-card-table td button { min-height: 40px; }
  .mobile-card-table[data-sortable] thead { position: static; width: auto; height: auto; margin: 0 0 10px; clip: auto; overflow-x: auto; white-space: nowrap; }
  .mobile-card-table[data-sortable] thead tr { display: flex; gap: 6px; padding: 0; border: 0; background: transparent; }
  .mobile-card-table[data-sortable] th { flex: 0 0 auto; padding: 8px 10px; border: 1px solid #293649; border-radius: 999px; background: #111925; font-size: 10px; }
  .mobile-card-table[data-sortable] th[aria-sort] { border-color: #27795e; color: var(--green); }

  .auth { min-height: 100dvh; padding: max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom)); }
  .auth-card { width: 100%; padding: 24px 18px; border-radius: 17px; }
  .auth-card .brand { display: flex; margin-bottom: 25px; }
  .auth-card .primary { min-height: 48px; }
}

@media (max-width: 360px) {
  .stats { grid-template-columns: minmax(0,1fr); }
  .stats article { min-height: 0; }
  .mobile-card-table:not([data-sortable]) tr { grid-template-columns: minmax(0,1fr); }
  .mobile-card-table:not([data-sortable]) td { grid-column: 1 !important; }
}

@media (max-width: 620px) and (orientation: landscape) and (max-height: 460px) {
  aside { height: calc(58px + env(safe-area-inset-bottom)); }
  aside nav a, aside nav a:not(.active) { min-height: 46px; }
  aside nav .nav-mobile-logout, aside nav .nav-mobile-logout .ghost { min-height: 46px; }
  aside nav a span { font-size: 17px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .save-fixed { bottom: calc(66px + env(safe-area-inset-bottom)); }
}