/* Client workspace: comfortable reading and thumb-sized controls on phones. */
@media (max-width: 767px) {
  .layout-container {
    --el-font-size-base: 14px;
    --el-component-size: 44px;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .layout-container .content-wrapper {
    padding: 16px 14px calc(90px + env(safe-area-inset-bottom, 0px));
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) {
    font-size: 14px;
    line-height: 1.6;
    min-width: 0;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.page-header, .header-card) {
    padding: 18px 16px;
    margin-bottom: 14px;
    gap: 14px;
    border-radius: 16px;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) .page-header :is(h1, h2) {
    font-size: 22px;
    line-height: 1.35;
    margin: 0;
    overflow-wrap: anywhere;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.subtitle, .page-subtitle, .header-subtitle) {
    font-size: 13px;
    line-height: 1.65;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.header-actions, .action-buttons, .card-actions, .card-footer-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) .page-header .header-actions {
    width: 100%;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) .page-header .header-actions > .el-button {
    flex: 1 1 auto;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.el-button, .create-btn, .add-account-btn, .header-btn, .purchase-btn, .buy-btn, .recharge-btn, .refresh-btn, .icon-btn, .action-btn, .copy-btn) {
    min-height: 44px;
    min-width: 44px;
    height: auto;
    padding: 11px 14px;
    font-size: 14px;
    line-height: 20px;
    touch-action: manipulation;
    white-space: normal;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) .el-button + .el-button {
    margin-left: 0;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) .el-button.is-link {
    padding: 10px 8px;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.filter-bar, .filter-card, .search-bar, .search-card) {
    padding: 14px;
    margin-bottom: 14px;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.filter-item, .filter-group) {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 100%;
    gap: 8px;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.filter-bar, .filter-card, .search-bar, .search-card) > :is(.el-input, .el-select, .el-date-editor) {
    flex: 1 1 100%;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
  }
  .layout-container :is(.el-input__wrapper, .el-select__wrapper) {
    min-height: 44px;
  }
  .layout-container :is(.el-input__inner, .el-select__input, .el-textarea__inner, .el-range-input) {
    font-size: 16px !important;
    line-height: 1.5;
  }
  .layout-container .el-textarea__inner {
    padding: 12px;
  }
  .layout-container .el-input-number {
    width: 100%;
    max-width: 220px;
    line-height: 42px;
  }
  .layout-container :is(.el-input-number__increase, .el-input-number__decrease) {
    min-width: 40px;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.tasks-grid, .accounts-grid) {
    gap: 12px;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.task-card, .account-card, .order-card, .log-card) {
    padding: 16px;
    border-radius: 15px;
    min-width: 0;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.task-card, .account-card, .package-card):hover {
    transform: none;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.task-name, .account-name, .nickname, .card-name, .friend-name, .package-name) {
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.card-meta, .meta-item, .card-content, .task-description, .account-info, .log-content) {
    font-size: 13px;
    line-height: 1.65;
    min-width: 0;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.order-no, .meta-value, .card-time, .task-message, .message-content) {
    overflow-wrap: anywhere;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.stats-cards, .stats-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) .stat-card {
    min-width: 0;
    padding: 15px 13px;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.stat-label, .stat-title, .stat-text) {
    font-size: 13px;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) .stat-value {
    font-size: 25px;
    line-height: 1.25;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.el-tabs__item, .tab-btn) {
    min-height: 44px;
    font-size: 14px;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.pagination-wrapper, .pagination-container) {
    padding: 16px 0;
    margin-top: 10px;
  }
  .layout-container .el-pagination {
    --el-pagination-button-width: 40px;
    --el-pagination-button-height: 44px;
    font-size: 14px;
    max-width: 100%;
    row-gap: 10px;
  }
  .layout-container .el-pagination :is(button, .el-pager li) {
    min-width: 40px;
    height: 44px;
    line-height: 44px;
  }
  .layout-container .el-pagination__jump {
    margin-left: 0;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) .el-table {
    font-size: 14px;
  }
  .layout-container .packages-page .page-header {
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }
  .layout-container .packages-page .user-balance {
    padding: 12px 14px;
    width: 100%;
    gap: 10px;
    border-radius: 12px;
    box-shadow: none;
  }
  .layout-container .packages-page .user-balance .recharge-btn {
    margin-left: auto;
  }
  .layout-container .packages-page .current-package-info {
    flex: none;
    min-width: 0;
    width: 100%;
    gap: 12px;
    align-items: flex-start;
  }
  .layout-container .packages-page .current-package-card {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px;
    gap: 14px;
    margin-bottom: 16px;
  }
  .layout-container .packages-page .current-package-card > .refresh-btn {
    align-self: flex-end;
    width: auto;
  }
  .layout-container .packages-page .check-badge {
    display: none;
  }
  .layout-container .packages-page .package-details {
    min-width: 0;
  }
  .layout-container .packages-page .details-title-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .layout-container .packages-page .package-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 14px;
  }
  .layout-container .packages-page .package-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 8px;
    min-width: 0;
    border-radius: 10px;
  }
  .layout-container .packages-page .package-stats .stat-label {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
  }
  .layout-container .packages-page .package-stats .stat-value {
    font-size: 15px;
    overflow-wrap: anywhere;
  }
  .layout-container .packages-page .package-stats .stat-label .el-icon {
    display: none;
  }
  .layout-container .packages-page .packages-grid {
    gap: 12px;
  }
  .layout-container .packages-page .package-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 18px 16px;
    text-align: left;
    align-items: center;
  }
  .layout-container .packages-page .package-card .package-name-row {
    margin: 0;
    min-width: 0;
  }
  .layout-container .packages-page .package-card .package-name {
    font-size: 18px;
    letter-spacing: 0;
  }
  .layout-container .packages-page .package-card .package-price {
    margin: 0;
    padding: 0;
    text-align: right;
    border: 0;
  }
  .layout-container .packages-page .package-card .price-value {
    font-size: 28px;
    line-height: 1.3;
  }
  .layout-container .packages-page .package-card :is(.price-symbol, .price-unit) {
    font-size: 12px;
  }
  .layout-container .packages-page .package-card .package-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    grid-column: 1 / -1;
  }
  .layout-container .packages-page .package-card .feature-item {
    gap: 6px;
    font-size: 13px;
    padding: 0;
    min-width: 0;
    line-height: 1.6;
  }
  .layout-container .packages-page .package-card .feature-icon {
    width: 21px;
    height: 21px;
    font-size: 13px;
    flex: none;
  }
  .layout-container .packages-page .package-card .package-description {
    grid-column: 1 / -1;
    min-height: 0;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--guard-line);
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
    color: #64786d;
  }
  .layout-container .packages-page .package-card .purchase-btn {
    grid-column: 1 / -1;
    margin: 0;
    width: 100%;
    min-height: 46px;
  }

  .layout-container .redeem-page {
    min-height: 0;
    padding: 0;
    background: transparent !important;
    --primary: #167b74;
    --primary-hover: #11635e;
    --primary-light: #edf3ed;
  }
  .layout-container .redeem-page > :is(.status-bar, .back-btn, .decor),
  .layout-container .redeem-page .float-cards {
    display: none;
  }
  .layout-container .redeem-page .hero {
    padding: 20px 16px;
    margin-bottom: 14px;
    text-align: left;
    border: 1px solid var(--guard-line);
    border-radius: 16px;
    background: white;
  }
  .layout-container .redeem-page .hero-badge {
    font-size: 12px;
    color: #167b74;
    background: #edf3ed;
    border-color: #d9e5db;
    margin-bottom: 10px;
  }
  .layout-container .redeem-page .hero-title {
    font-size: 25px;
    line-height: 1.4;
    margin: 8px 0;
    color: #152d32;
  }
  .layout-container .redeem-page .hero-title .hl {
    color: #167b74;
  }
  .layout-container .redeem-page .hero-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
  }
  .layout-container .redeem-page .main {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .layout-container .redeem-page :is(.left-col, .right-col) {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .layout-container .redeem-page .card {
    border-radius: 16px;
    padding: 18px 16px;
    border: 1px solid var(--guard-line);
    box-shadow: none;
  }
  .layout-container .redeem-page .input-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .layout-container .redeem-page .input-title {
    font-size: 16px;
  }
  .layout-container .redeem-page .input-hint {
    font-size: 12px;
  }
  .layout-container .redeem-page .input-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .layout-container .redeem-page :is(.n-input, .n-button) {
    min-height: 46px;
    width: 100%;
    font-size: 15px;
    border-radius: 10px;
  }
  .layout-container .redeem-page .n-input__input-el {
    font-size: 16px;
    min-height: 46px;
  }
  .layout-container .redeem-page .features {
    display: none;
  }
  .layout-container .redeem-page :is(.guide-head, .step-body h4) {
    font-size: 15px;
  }
  .layout-container .redeem-page :is(.step-body p, .tips-item) {
    font-size: 13px;
    line-height: 1.7;
  }
  .layout-container .redeem-page .step {
    padding-bottom: 12px;
  }
  .layout-container .redeem-page :is(code, .pi-value, .detail-row) {
    overflow-wrap: anywhere;
    font-size: 14px;
  }

  /* Teleported controls still belong to the visible client workspace. */
  body:has(.layout-container) .el-overlay-dialog {
    padding: max(12px, env(safe-area-inset-top, 0px)) 0 max(12px, env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y: contain;
  }
  body:has(.layout-container) .el-dialog {
    width: calc(100% - 24px) !important;
    max-width: 560px;
    margin: 0 auto !important;
    padding: 18px !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
  }
  body:has(.layout-container) .el-dialog__header {
    flex: none;
    padding: 3px 36px 16px 0;
    margin-right: 0;
  }
  body:has(.layout-container) .el-dialog__title {
    font-size: 19px;
    line-height: 1.5;
  }
  body:has(.layout-container) .el-dialog__headerbtn {
    width: 44px;
    height: 44px;
    right: 6px;
    top: 6px;
    font-size: 21px;
  }
  body:has(.layout-container) .el-dialog__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 2px 6px;
    font-size: 14px;
    line-height: 1.65;
    scrollbar-width: thin;
  }
  body:has(.layout-container) .el-dialog__footer {
    flex: none;
    padding: 16px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  body:has(.layout-container) .el-dialog__footer > :is(span, .dialog-footer, .dialog-actions) {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  body:has(.layout-container) :is(.el-dialog__footer, .dialog-footer) .el-button {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    height: auto;
    margin-left: 0;
    font-size: 15px;
    padding: 12px;
  }
  body:has(.layout-container) .el-dialog .el-form-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 19px;
  }
  body:has(.layout-container) .el-dialog .el-form-item__label {
    width: 100% !important;
    height: auto;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 6px;
    padding: 0;
    font-size: 14px;
    line-height: 1.6;
  }
  body:has(.layout-container) .el-dialog .el-form-item__content {
    width: 100%;
    min-width: 0;
    margin-left: 0 !important;
    line-height: 1.6;
  }
  body:has(.layout-container) .el-dialog .el-row > .el-col {
    max-width: 100%;
    flex-basis: 100%;
  }
  body:has(.layout-container) :is(.el-dialog, .el-drawer) :is(.el-input__wrapper, .el-select__wrapper) {
    min-height: 46px;
  }
  body:has(.layout-container) :is(.el-dialog, .el-drawer, .el-message-box) :is(.el-input__inner, .el-select__input, .el-textarea__inner, .el-range-input) {
    font-size: 16px !important;
  }
  body:has(.layout-container) .el-dialog :is(.el-select, .el-input-number, .el-date-editor) {
    width: 100% !important;
    max-width: 100%;
  }
  body:has(.layout-container) .el-dialog :is(.el-radio-group, .pay-method-group, .el-checkbox-group) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  body:has(.layout-container) .el-dialog :is(.el-radio, .el-checkbox, .el-radio-button__inner) {
    min-height: 44px;
    margin-right: 0;
    font-size: 14px;
    white-space: normal;
  }
  body:has(.layout-container) .el-dialog :is(.el-radio__label, .el-checkbox__label) {
    white-space: normal;
    line-height: 1.6;
  }
  body:has(.layout-container) .el-select-dropdown__item {
    min-height: 44px;
    height: auto;
    line-height: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
  }
  body:has(.layout-container) .el-popper {
    max-width: calc(100vw - 20px);
  }
  body:has(.layout-container) .el-date-range-picker {
    width: calc(100vw - 24px);
    max-width: 400px;
    max-height: 70dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body:has(.layout-container) .el-date-range-picker .el-picker-panel__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  body:has(.layout-container) .el-date-range-picker__content {
    width: 100%;
    float: none;
    padding: 12px;
  }
  body:has(.layout-container) .el-date-range-picker .el-picker-panel__body-wrapper {
    margin-left: 0;
  }
  body:has(.layout-container) .el-date-range-picker .el-picker-panel__sidebar {
    position: static;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-right: 0;
    border-bottom: 1px solid var(--guard-line);
  }
  body:has(.layout-container) .el-message-box {
    width: calc(100% - 28px);
    max-width: 420px;
    padding: 20px;
  }
  body:has(.layout-container) .el-message-box__btns .el-button {
    min-height: 44px;
    font-size: 14px;
  }
  body:has(.layout-container) :is(.el-message, .el-notification) {
    max-width: calc(100vw - 24px);
    font-size: 14px;
  }
}

@media (max-width: 359px) {
  .layout-container .content-wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }
  .layout-container .content-wrapper > :not(.sg-dashboard) :is(.page-header, .header-card, .task-card, .account-card, .order-card, .log-card) {
    padding: 14px;
  }
}

@media (max-width: 767px) {
  body:has(.layout-container) .qrcode-dialog :is(.login-nav-select, .login-proxy-input) {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 6px 10px;
    align-items: center;
    text-align: left;
  }
  body:has(.layout-container) .qrcode-dialog .nav-label {
    min-width: 0;
    width: auto;
    white-space: nowrap;
  }
  body:has(.layout-container) .qrcode-dialog :is(.login-nav-select, .login-proxy-input) .el-select {
    min-width: 0;
    width: 100% !important;
  }
  body:has(.layout-container) .qrcode-dialog .nav-tip {
    grid-column: 2;
    width: auto;
    font-size: 12px;
    line-height: 1.5;
  }
}

@media (hover: none) {
  .layout-container .content-wrapper :is(.task-card, .account-card, .package-card):hover {
    transform: none;
  }
}