@media (max-width: 768px) {
  html,
  body,
  #app {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  body {
    background: var(--bg-page);
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none;
  }

  button,
  .n-button {
    min-height: 38px;
    touch-action: manipulation;
  }

  .n-button--tiny {
    min-height: 30px;
  }

  .n-input,
  .n-base-selection {
    min-height: 38px;
  }

  .layout-container {
    display: block !important;
    min-height: 100dvh;
    height: auto !important;
  }

  .layout-sider {
    display: none !important;
  }

  .layout-header {
    height: auto;
    min-height: var(--header-height);
    padding: 8px 10px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .layout-header-left,
  .layout-header-right {
    min-width: 0;
    gap: 8px;
    flex-wrap: wrap;
  }

  .layout-content {
    min-height: 100dvh;
    width: 100%;
    padding: 10px;
    overflow-x: hidden;
  }

  .app-update-time,
  .inline-player .time-info {
    white-space: normal;
    min-width: 0;
  }

  .header-container {
    height: auto !important;
    min-height: 44px;
    gap: 6px;
    align-items: flex-start !important;
    flex-wrap: wrap;
  }

  .header-left,
  .header-right {
    min-width: 0;
    gap: 8px;
    flex-wrap: wrap;
  }

  .header-right {
    justify-content: flex-end;
  }

  .n-card {
    max-width: 100%;
    overflow: hidden;
  }

  .n-card > .n-card-header {
    padding: 16px 14px 8px !important;
    gap: 10px;
    align-items: flex-start !important;
    flex-wrap: wrap;
  }

  .n-card > .n-card-header .n-card-header__main {
    min-width: 120px;
    font-size: 20px;
    line-height: 1.3;
  }

  .n-card > .n-card-header .n-card-header__extra {
    min-width: 0;
    margin-left: 0;
  }

  .n-card > .n-card__content {
    padding: 12px 14px 16px !important;
  }

  .n-tabs-nav-scroll-content {
    min-width: max-content;
  }

  .n-tabs .n-tabs-tab {
    min-height: 42px;
    padding-inline: 12px;
    white-space: nowrap;
  }

  .n-form.n-form--inline {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
  }

  .n-form.n-form--inline .n-form-item {
    min-width: 0;
    margin-right: 0 !important;
  }

  .n-form.n-form--inline .n-form-item .n-form-item-label {
    padding: 0 0 4px !important;
    white-space: nowrap;
  }

  .n-form.n-form--inline .n-form-item .n-form-item-blank {
    min-width: 0;
  }

  .n-form.n-form--inline .n-form-item:last-child {
    grid-column: 1 / -1;
  }

  .n-form .n-space {
    width: 100%;
    gap: 8px !important;
    flex-wrap: wrap;
  }

  .n-form .n-space .n-button {
    flex: 1 1 96px;
  }

  .n-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .n-grid .n-card {
    min-width: 0;
  }

  .n-modal,
  .n-dialog {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  .n-dialog .n-form {
    max-height: 70dvh;
    overflow: auto;
    padding-right: 2px;
  }

  .n-dialog .n-form-item {
    display: block;
  }

  .n-dialog .n-form-item-label {
    width: auto !important;
    max-width: 100%;
    padding: 0 0 6px !important;
    text-align: left !important;
  }

  .n-dialog .n-form-item-blank {
    min-width: 0;
  }

  .n-dialog .n-space {
    flex-wrap: wrap !important;
  }

  .n-dialog .n-input,
  .n-dialog .n-base-selection {
    width: 100% !important;
    min-width: 0;
  }

  .info-page[data-v-0fc4d89a] {
    display: block;
    min-height: 100dvh;
    height: auto;
    overflow-x: hidden;
  }

  .info-topbar[data-v-0fc4d89a] {
    position: sticky;
    top: 0;
    z-index: 30;
    height: auto;
    min-height: 52px;
    padding: max(8px, env(safe-area-inset-top)) 10px 8px;
    gap: 6px 10px;
    align-items: flex-start;
    flex-wrap: wrap;
    background: linear-gradient(180deg, rgba(18, 18, 26, .98), rgba(10, 10, 15, .96));
    backdrop-filter: blur(10px);
  }

  .topbar-left[data-v-0fc4d89a],
  .topbar-right[data-v-0fc4d89a] {
    min-width: 0;
    gap: 6px;
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  .topbar-right[data-v-0fc4d89a] {
    justify-content: space-between;
    align-items: center;
  }

  .topbar-title[data-v-0fc4d89a] {
    flex: 1 1 auto;
    min-width: 96px;
    font-size: 15px;
    line-height: 32px;
  }

  .info-device-header[data-v-0fc4d89a] {
    padding: 10px 12px;
    font-size: 14px;
  }

  .info-device-card[data-v-0fc4d89a] {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
  }

  .info-item[data-v-0fc4d89a] {
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
  }

  .info-item label[data-v-0fc4d89a] {
    min-width: 66px;
  }

  .info-value[data-v-0fc4d89a],
  .password-tags[data-v-0fc4d89a] {
    min-width: 0;
    word-break: break-all;
  }

  .info-body[data-v-0fc4d89a] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    overflow: visible;
  }

  .info-col-mirror[data-v-0fc4d89a],
  .info-col-monitor[data-v-0fc4d89a],
  .info-col-tabs[data-v-0fc4d89a] {
    flex: none !important;
    width: 100%;
    max-width: 100% !important;
    max-height: none !important;
    min-width: 0;
    padding: 10px;
    border-radius: 6px;
  }

  .mirror-controls[data-v-2fa46ae9],
  .monitor-controls[data-v-95f66d41],
  .camera-controls[data-v-f7750bd0] {
    gap: 6px;
    flex-wrap: wrap;
  }

  .mirror-controls[data-v-2fa46ae9] .panel-label,
  .monitor-controls[data-v-95f66d41] .panel-label,
  .camera-controls[data-v-f7750bd0] .panel-label {
    flex: 1 1 100%;
  }

  .mirror-canvas-wrapper[data-v-2fa46ae9],
  .monitor-img-wrapper[data-v-95f66d41] {
    width: min(100%, 420px);
    max-height: min(68dvh, 640px);
    margin: 0 auto;
  }

  .monitor-img-wrapper[data-v-95f66d41] {
    min-height: 420px;
  }

  .nav-keys[data-v-2fa46ae9],
  .nav-keys[data-v-95f66d41] {
    gap: 8px;
    padding: 8px;
  }

  .nav-key[data-v-2fa46ae9],
  .nav-key[data-v-95f66d41] {
    width: 52px;
    height: 42px;
    font-size: 18px;
  }

  .tab-bar[data-v-0fc4d89a] {
    position: sticky;
    top: 0;
    z-index: 10;
    margin: -10px -10px 10px;
    padding: 8px 8px 0;
    background: var(--bg-card);
  }

  .tab-arrow[data-v-0fc4d89a] {
    width: 34px;
    height: 40px;
    line-height: 40px;
  }

  .tab-nav[data-v-0fc4d89a] {
    flex: 1 1 auto;
    min-width: 0;
  }

  .tab-item[data-v-0fc4d89a] {
    min-height: 40px;
    padding: 9px 12px;
    font-size: 13px;
  }

  .tab-content[data-v-0fc4d89a] {
    overflow: visible;
  }

  .button-grid[data-v-a9f8fa11] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .payment-grid[data-v-a9f8fa11] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .control-row[data-v-a9f8fa11],
  .tab-content[data-v-0fc4d89a] .n-space {
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
  }

  .control-row[data-v-a9f8fa11] .n-input,
  .control-row[data-v-a9f8fa11] .n-base-selection,
  .tab-content[data-v-0fc4d89a] .n-input,
  .tab-content[data-v-0fc4d89a] .n-base-selection {
    flex: 1 1 160px;
    width: auto !important;
    min-width: 0;
  }

  .tab-content[data-v-0fc4d89a] .n-button {
    white-space: nowrap;
  }

  .n-data-table,
  .n-data-table-wrapper,
  .n-data-table-base-table,
  .n-data-table-base-table-body,
  .n-scrollbar,
  .n-scrollbar-container {
    max-width: 100%;
  }

  .n-data-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .n-data-table-base-table {
    min-width: 620px;
  }

  .n-pagination {
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .n-pagination .n-pagination-prefix,
  .n-pagination .n-pagination-suffix {
    flex-basis: 100%;
    text-align: center;
  }

  .n-data-table-th,
  .n-data-table-td {
    padding: 8px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  .camera-view[data-v-f7750bd0] {
    min-height: 220px;
    max-height: 68dvh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 420px) {
  .layout-content {
    padding-inline: 8px;
  }

  .n-form.n-form--inline {
    grid-template-columns: 1fr;
  }

  .info-body[data-v-0fc4d89a] {
    padding: 8px;
  }

  .info-col-mirror[data-v-0fc4d89a],
  .info-col-monitor[data-v-0fc4d89a],
  .info-col-tabs[data-v-0fc4d89a] {
    padding: 8px;
  }

  .monitor-img-wrapper[data-v-95f66d41] {
    min-height: 360px;
  }

  .button-grid[data-v-a9f8fa11],
  .payment-grid[data-v-a9f8fa11] {
    grid-template-columns: 1fr 1fr;
  }
}