.mobile-menu-toggle {
  display: none;
}

.mobile-table-hint {
  display: none;
}

@media (max-width: 820px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .layout {
    display: block !important;
  }

  .sidebar {
    position: sticky !important;
    inset: auto !important;
    top: 0 !important;
    z-index: 1000;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    padding: 10px 14px !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border, var(--line, #e7e5f0));
    box-shadow: 0 4px 16px rgba(43, 39, 56, .08);
  }

  .sidebar .brand {
    display: flex !important;
    width: 100%;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center;
    justify-content: space-between;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 8px 11px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--border, var(--line, rgba(255, 255, 255, .3)));
    border-radius: 10px;
    background: var(--field, rgba(255, 255, 255, .1));
    color: inherit;
    font: 700 13px Inter, ui-sans-serif, system-ui, sans-serif;
    cursor: pointer;
  }

  .mobile-menu-toggle:focus-visible {
    outline: 3px solid #cfc3ff;
    outline-offset: 2px;
  }

  .mobile-menu-icon {
    width: 18px;
    font-size: 18px;
    line-height: 1;
  }

  .sidebar .navlabel {
    display: none !important;
  }

  .sidebar:not(.mobile-menu-open) > a,
  .sidebar:not(.mobile-menu-open) > .sidebar-account {
    display: none !important;
  }

  .sidebar.mobile-menu-open > a {
    display: flex !important;
    min-height: 44px;
    margin: 3px 0 !important;
    align-items: center;
  }

  .sidebar-account {
    margin-top: 8px !important;
    padding: 14px 12px 4px !important;
    border-top: 1px solid var(--border, var(--line, rgba(255, 255, 255, .2))) !important;
  }

  .sidebar-account > a,
  .sidebar-account > button {
    min-height: 44px;
  }

  .sidebar-account > a {
    display: flex;
    align-items: center;
  }

  .content {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }

  .wrap {
    width: 100%;
    max-width: 100%;
    padding: 20px 14px 64px !important;
  }

  .wrap > h1 {
    display: flex !important;
    margin: 4px 2px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 22px;
    line-height: 1.25;
  }

  .wrap > h1 small {
    display: block;
    font-size: 13px;
    line-height: 1.45;
  }

  h2 {
    line-height: 1.35;
  }

  .card {
    max-width: 100%;
    padding: 18px 16px !important;
    overflow: hidden;
    border-radius: 16px !important;
  }

  label {
    line-height: 1.4;
  }

  .hint,
  .muted {
    color: #706a7d !important;
    font-size: 13px !important;
    line-height: 1.5;
  }

  .mobile-table-hint {
    display: block;
    margin: -4px 0 14px;
    color: #706a7d;
    font-size: 13px;
    line-height: 1.45;
  }

  select,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    min-height: 44px;
    font-size: 16px !important;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 20px !important;
    min-width: 20px;
    height: 20px;
    margin: 0;
  }

  button,
  .qbtn,
  .modebtn {
    min-height: 44px;
  }

  .toprow {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
    align-items: stretch !important;
  }

  .toprow > div {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .toprow > button {
    width: 100%;
  }

  .card table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  details > summary {
    min-height: 44px;
    line-height: 1.4;
  }

  .page-warmup .grid,
  .page-automation .grid,
  .page-monitor .grid {
    grid-template-columns: 1fr !important;
  }

  .page-warmup label > .hint,
  .page-automation label > .hint,
  .page-monitor label > .hint,
  .page-analysis label > .hint {
    display: block;
    margin-top: 3px;
  }

  .pickhead {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px;
    flex-wrap: wrap;
  }

  .pickhead .actions {
    display: flex;
    width: 100%;
    gap: 8px;
  }

  .pickhead .actions a {
    display: inline-flex;
    min-height: 44px;
    margin: 0 !important;
    padding: 8px 10px;
    flex: 1;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--field, #f4f3f9);
  }

  .picker {
    max-height: 280px !important;
  }

  .opt {
    min-height: 48px;
    padding: 12px !important;
    align-items: flex-start !important;
  }

  .opt > span:not(.meta) {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
  }

  .opt .meta {
    max-width: 92px;
    margin-left: auto !important;
    flex: 0 0 auto;
    text-align: right;
    line-height: 1.35;
  }

  #templates .opt .s {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .page-warmup button.primary,
  .page-automation button.primary {
    min-height: 48px;
  }

  .page-warmup .row,
  .page-automation .row {
    align-items: flex-start;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
  }

  .page-monitor .grid > div:empty {
    display: none;
  }

  .page-monitor .grid > div:has(> #reportEnabled) {
    min-height: 44px;
    margin-top: 12px !important;
  }

  .page-monitor .row2 {
    display: grid !important;
    min-height: 44px;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start !important;
    gap: 4px 10px !important;
  }

  .page-monitor .row2 .hint {
    grid-column: 2;
  }

  .page-monitor #selAll,
  .page-monitor #selNone {
    display: inline-flex;
    min-height: 44px;
    margin: 4px 4px 0 0 !important;
    padding: 8px 10px;
    align-items: center;
  }

  .page-monitor .btns {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .page-monitor .btns button {
    width: 100%;
  }

  .page-monitor .res {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .page-segments .card > div:has(> h2) {
    align-items: flex-start !important;
  }

  .page-segments .card > div:has(> h2) > div {
    width: 100%;
  }

  .page-segments .modebtn {
    flex: 1;
  }

  .page-segments div:has(> #metaDate) {
    display: grid !important;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-segments #metaDate {
    grid-column: 1 / -1;
  }

  .page-segments .bars .b {
    grid-template-columns: minmax(0, 1.3fr) minmax(70px, 1fr) auto !important;
    gap: 8px !important;
  }

  .page-segments .bars .track {
    background: #ebe8f3 !important;
  }

  .page-segments th {
    color: #706a7d !important;
  }

  .page-segments .bars .b .name {
    overflow: visible !important;
    white-space: normal !important;
    line-height: 1.35;
  }

  .page-segments #growthTable,
  .page-segments #perf,
  .page-segments #metaTable {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .page-hourly .hourly-filters {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 14px !important;
  }

  .page-hourly .date-shortcuts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
  }

  .page-hourly #date {
    grid-column: 1 / -1;
  }

  .page-hourly .qbtn {
    display: inline-flex;
    padding: 8px 6px !important;
    align-items: center;
    justify-content: center;
  }

  .page-hourly .kpis {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
  }

  .page-hourly .kpi {
    min-width: 0 !important;
    padding: 12px !important;
  }

  .page-analysis .toprow + .hint {
    margin: 0 0 16px !important;
  }

  .page-analysis .alert-head {
    align-items: flex-start !important;
  }

  .page-analysis .alert-fields,
  .page-analysis .report-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
    align-items: end !important;
  }

  .page-analysis .alert-fields > div,
  .page-analysis .report-fields > div {
    min-width: 0;
  }

  .page-analysis .report-fields > .chk,
  .page-analysis #rpNow {
    grid-column: 1 / -1;
  }

  .page-analysis .chk {
    min-height: 44px;
    margin: 0 !important;
  }

  .page-analysis .alert-fields button,
  .page-analysis .report-fields button {
    width: 100%;
  }

  .page-analysis .ahead {
    display: grid !important;
    gap: 8px !important;
  }

  .page-analysis .agg {
    line-height: 1.5;
  }

  .page-analysis #list .card table {
    margin-top: 12px;
  }

  .page-link-audit .controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px !important;
    align-items: end !important;
  }

  .page-link-audit .controls > div {
    min-width: 0;
  }

  .page-link-audit .controls button {
    width: 100%;
  }

  .page-link-audit .controls .status {
    grid-column: 1 / -1;
  }

  .page-link-audit .codes-tbl {
    display: table !important;
    min-width: 560px;
  }

  .page-link-audit .save-codes-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .page-link-audit #saveCodes {
    width: 100%;
  }

  .page-admin .checks {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .page-admin .checks label,
  .page-admin .actions label,
  .page-admin #create > label:has(input[type="checkbox"]) {
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f7f5fb;
  }

  .page-admin .actions {
    flex-direction: column;
    align-items: stretch !important;
  }

  .page-admin .actions button {
    width: 100%;
    min-height: 44px;
  }

  .page-admin .user {
    padding: 22px 0;
  }
}

@media (max-width: 420px) {
  .page-analysis .alert-fields,
  .page-analysis .report-fields {
    grid-template-columns: 1fr;
  }

  .page-analysis .report-fields > .chk,
  .page-analysis #rpNow {
    grid-column: auto;
  }
}