/* The original navigation stays visible as a bottom bar on touch screens. */
#mobile-menu-open, #mobile-menu-close, .marketplace-navigation-heading,
.nav-mobile-label, .nav-icon { display: none; }
#workspace-sidebar .nav-label { font: inherit; opacity: 1; }
html[data-theme] .eneba-stock-grid { align-items: start; }
#mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: var(--overlay, rgba(14, 24, 28, .56));
  backdrop-filter: blur(3px);
}

@media (max-width: 1180px) {
  html[data-theme] .app-shell { display: block; min-width: 0; }
  html[data-theme] .app-shell > main {
    min-width: 0;
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding: 0 clamp(16px, 3vw, 32px) calc(96px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
  #workspace-sidebar.sidebar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 810;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    padding: 6px max(4px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    overflow: visible;
    transform: none;
    visibility: visible;
    border-top: 1px solid var(--ui-border, #dce2ea);
    border-right: 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .08);
  }
  body.mobile-marketplaces-open { overflow: hidden; }
  #workspace-sidebar :is(.brand, .mode-badge, .sidebar-footer) { display: none; }
  #workspace-sidebar nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; overflow: visible; margin: 0; }
  #workspace-sidebar nav > .nav-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 62px;
    width: 100%;
    min-width: 0;
    padding: 7px 2px;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 10px;
    line-height: 1.2;
  }
  #workspace-sidebar nav > .nav-item .nav-label { display: none; }
  #workspace-sidebar .nav-mobile-label { display: block; font-size: 10px; font-weight: 600; opacity: 1; white-space: nowrap; }
  #workspace-sidebar .nav-icon { display: block; width: 21px; height: 21px; flex-shrink: 0; }
  #workspace-sidebar .nav-submenu {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    max-height: min(60dvh, 480px);
    margin: 0;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ui-surface, #fff);
    color: var(--ui-text, #182335);
    border: 1px solid var(--ui-border, #dce2ea);
    border-radius: 18px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .24);
  }
  body.mobile-marketplaces-open #workspace-sidebar .nav-submenu { display: block; }
  #workspace-sidebar .marketplace-navigation-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  #workspace-sidebar .nav-submenu .nav-item {
    display: flex;
    min-height: 48px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  html[data-theme] #workspace-sidebar .nav-submenu .nav-item { color: var(--ui-text, #182335); background: transparent; }
  html[data-theme] #workspace-sidebar .nav-submenu .nav-item:hover { color: var(--ui-text, #182335); background: var(--ui-surface-alt, #edf4f1); }
  html[data-theme] #workspace-sidebar .nav-submenu .nav-item.active { color: var(--ui-accent-contrast, #fff); background: var(--ui-accent, var(--green)); }
  html[data-theme] #workspace-sidebar .nav-submenu .nav-item:focus-visible { outline: 2px solid var(--ui-accent, var(--green)); outline-offset: -2px; }
  #workspace-sidebar :is(#kinguin-account-menu, #eneba-account-menu) { display: block; width: 100%; }
  #mobile-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 auto;
  }
  #mobile-menu-close { margin: 0; }
  html[data-theme] .topbar { min-height: 76px; height: auto; flex-wrap: wrap; gap: 12px; padding: 12px 0; }
  html[data-theme] .topbar #connection-state { flex: 1 1 150px; min-width: 0; overflow-wrap: anywhere; }
  html[data-theme] .topbar .toolbar { min-width: 0; margin-left: auto; justify-content: flex-end; }
  html[data-theme] .topbar #operator-name { max-width: 240px; overflow-wrap: anywhere; }
  html[data-theme] .toolbar, html[data-theme] .section-heading, html[data-theme] .detail-heading { flex-wrap: wrap; }
  html[data-theme] .toolbar > *, html[data-theme] .section, html[data-theme] .panel, fieldset, html[data-theme] .form-grid > *, html[data-theme] .detail-grid > * { min-width: 0; }
  html[data-theme] .section-heading { gap: 14px; }
  html[data-theme] .section-heading > .button { max-width: none; }
  html[data-theme] .button, html[data-theme] .text-button, html[data-theme] .nav-item { white-space: normal; overflow-wrap: anywhere; }
  html[data-theme] .app-shell button, html[data-theme] .ui-modal button { min-height: 44px; }
  html[data-theme] .app-shell input:not([type="checkbox"]):not([type="radio"]),
  html[data-theme] .app-shell select, html[data-theme] .app-shell textarea,
  html[data-theme] .login-card input,
  html[data-theme] .ui-modal input:not([type="checkbox"]):not([type="radio"]),
  html[data-theme] .ui-modal select, html[data-theme] .ui-modal textarea { min-height: 44px; font-size: 16px; }
  html[data-theme] .checkbox-label, html[data-theme] .scope-grid label { min-height: 44px; }
  html[data-theme] .stats, html[data-theme] .inventory-summary, html[data-theme] .eneba-stock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] .two-column, html[data-theme] .form-grid, html[data-theme] .detail-grid, html[data-theme] .scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] .ui-modal .form-grid, html[data-theme] .ui-modal .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] .table-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  html[data-theme] .ui-modal { padding: 24px 16px; overflow: hidden; }
  html[data-theme] .ui-modal .modal-surface { min-width: 0; max-height: calc(var(--ui-visible-height) - 48px); overflow: auto; overscroll-behavior: contain; }
  html[data-theme] .ui-modal .modal-close {
    position: sticky;
    display: block;
    top: 0;
    right: auto;
    margin: 0 0 -44px auto;
    min-width: 44px;
    min-height: 44px;
    z-index: 6;
    background: var(--ui-surface, #fff);
    border: 1px solid var(--ui-border, #dce2ea);
    border-radius: 10px;
  }
  html[data-theme] .picker-control, html[data-theme] .binding-save-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  html[data-theme] .picker-control .inventory-select { flex: 1 1 200px; min-width: 0; }
  html[data-theme] .binding-save-bar .help { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
  html[data-theme] .binding-search-label, html[data-theme] .permanent-inventory-id, html[data-theme] .callback-url, html[data-theme] .help { overflow-wrap: anywhere; }
  html[data-theme] .binding-inventory-list table { min-width: 680px; }
  html[data-theme] .key-search-match-heading, html[data-theme] .key-search-key-row { min-width: 0; }
  html[data-theme] .key-search-inventory, html[data-theme] .key-search-key-row > * { min-width: 0; overflow-wrap: anywhere; }
  html[data-theme] .key-search-match-heading { flex-wrap: wrap; }
  html[data-theme] .pagination { flex-wrap: wrap; gap: 10px; }
  html[data-theme] .pagination > span { min-width: 0; overflow-wrap: anywhere; }
  html[data-theme] .login-screen { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 32px; padding: 40px 28px; }
  html[data-theme] .login-screen input { min-height: 44px; font-size: 16px; }
  html[data-theme] .login-screen button, html[data-theme] .appearance-dialog button { min-height: 44px; }

  /* Keep every field and action in view instead of requiring a sideways table swipe. */
  html[data-theme] .table-card table.responsive-table {
    display: block;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
  }
  html[data-theme] .table-card table.responsive-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html[data-theme] .table-card table.responsive-table tbody { display: grid; gap: 12px; }
  html[data-theme] .table-card table.responsive-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--ui-border, #dce2ea);
    border-radius: 14px;
    background: var(--ui-surface, #fff);
  }
  html[data-theme] .table-card table.responsive-table tbody td {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    max-width: none;
    width: auto;
    padding: 10px 12px;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    align-items: flex-start;
  }
  html[data-theme] .table-card table.responsive-table tbody td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ui-muted, #64748b);
  }
  html[data-theme] .table-card table.responsive-table tbody td:first-child,
  html[data-theme] .table-card table.responsive-table tbody td[data-label="Действия"] { grid-column: 1 / -1; }
  html[data-theme] .table-card table.responsive-table tbody td > * { max-width: 100%; min-width: 0; }
  html[data-theme] .table-card table.responsive-table :is(.table-actions, .toolbar) { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
  html[data-theme] #order-list table.responsive-table .table-actions { flex-direction: row; align-items: center; }
  html[data-theme] .table-card table.responsive-table .table-actions > .text-button { padding: 10px 12px; border: 1px solid var(--ui-border, #dce2ea); border-radius: 8px; }
  html[data-theme] .table-card table.responsive-table button { max-width: 100%; text-align: left; }
  html[data-theme] .table-card table.responsive-table code { white-space: normal; overflow-wrap: anywhere; }
  html[data-theme] #inventory-details #inventory-key-list table.responsive-table tbody td { white-space: normal; }
  html[data-theme] #inventory-details #inventory-key-list .inventory-key-value { max-width: none; }
  html[data-theme] .table-card:has(> table.responsive-table) { padding: 12px; }
  html[data-theme] #inventory-list table.responsive-table,
  html[data-theme] #inventory-key-list table.responsive-table,
  html[data-theme] #marketplace-offer-list table.responsive-table,
  html[data-theme] #order-list table.responsive-table,
  html[data-theme] #kinguin-binding-inventories table.responsive-table { min-width: 0; }
  html[data-theme] #inventory-list table.responsive-table tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-theme] #inventory-list table.responsive-table tbody td:first-child { font-size: 15px; font-weight: 600; }
  html[data-theme] #inventory-key-list table.responsive-table td[data-label="Выбор"] { flex-direction: row; align-items: center; }
  html[data-theme] #inventory-key-list table.responsive-table input[type="checkbox"] { width: 22px; height: 22px; margin: 0; }
  html[data-theme] #inventory-key-list .inventory-key-select { display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; cursor: pointer; }

  /* One scroll area keeps search, bulk actions, records and pagination reachable. */
  html[data-theme] #inventory-dialog { align-items: flex-start; overflow: hidden; }
  html[data-theme] #inventory-details {
    display: block;
    height: auto;
    min-height: 0;
    max-height: calc(var(--ui-visible-height) - 48px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 22px;
  }
  html[data-theme] #inventory-details .inventory-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] #inventory-details .inventory-tab-panel,
  html[data-theme] #inventory-details #inventory-keys-panel { display: block; overflow: visible; }
  html[data-theme] #inventory-details #inventory-key-list { max-height: none; min-height: 0; overflow: visible; }
  html[data-theme] #inventory-details .modal-close {
    position: sticky;
    display: block;
    top: 0;
    right: auto;
    margin: 0 0 -44px auto;
    min-width: 44px;
    min-height: 44px;
    z-index: 6;
    background: var(--ui-surface, #fff);
    border: 1px solid var(--ui-border, #dce2ea);
    border-radius: 10px;
  }
  html[data-theme] #inventory-details .detail-heading { padding-right: 52px; }
  html[data-theme] #inventory-details .detail-heading > div:first-child { min-width: 0; }
  html[data-theme] #inventory-details-title { overflow-wrap: anywhere; }
  html[data-theme] #inventory-details .dialog-tabs { flex-wrap: wrap; }
  html[data-theme] #inventory-details .inventory-metric { min-width: 0; }
  html[data-theme] .eneba-stock-card { min-width: 0; overflow-wrap: anywhere; }
  html[data-theme] .eneba-stock-card :is(h3, code, .eneba-stock-meta) { overflow-wrap: anywhere; }
  html[data-theme] .callback-url, html[data-theme] pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
}

@media (max-width: 900px) {
  html[data-theme] .two-column, html[data-theme] .flow { grid-template-columns: minmax(0, 1fr); }
  html[data-theme] .login-screen { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  html[data-theme] .login-intro { max-width: 650px; }
  html[data-theme] .login-intro h1 { font-size: clamp(36px, 6vw, 54px); }
  html[data-theme] .login-platforms { margin-top: 20px; }
}

@media (max-width: 760px) {
  html[data-theme] .eneba-stock-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  html[data-theme] .app-shell > main { padding: 0 max(14px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  html[data-theme] .topbar { min-height: 68px; gap: 8px; padding: 10px 0; }
  html[data-theme] .topbar .toolbar { flex: 1 1 100%; width: 100%; margin-left: 0; gap: 8px; justify-content: flex-start; }
  html[data-theme] .topbar .toolbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
  html[data-theme] .topbar #operator-name { grid-column: span 2; max-width: none; }
  html[data-theme] .topbar .toolbar button { width: 100%; }
  html[data-theme] .topbar .button { padding: 10px 12px; }
  html[data-theme] .intro { padding: 24px 0; }
  html[data-theme] .intro h1 { font-size: clamp(24px, 7vw, 30px); }
  html[data-theme] .intro p, html[data-theme] .section-heading p { font-size: 13px; }
  html[data-theme] .section-heading { align-items: flex-start; margin: 22px 0 16px; }
  html[data-theme] .panel { padding: 18px 16px; }
  html[data-theme] .stat { min-width: 0; padding: 16px 14px; }
  html[data-theme] .stat strong { font-size: 28px; overflow-wrap: anywhere; }
  html[data-theme] .form-grid, html[data-theme] .detail-grid, html[data-theme] .scope-grid, html[data-theme] .eneba-stock-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-theme] .ui-modal .form-grid, html[data-theme] .ui-modal .detail-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-theme] .catalog-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  html[data-theme] .catalog-toolbar label { width: 100%; }
  html[data-theme] .catalog-toolbar .help { white-space: normal; }
  html[data-theme] .table-actions { flex-wrap: wrap; gap: 8px; }
  html[data-theme] .table-card table.responsive-table tbody tr { grid-template-columns: minmax(0, 1fr); }
  html[data-theme] #inventory-list table.responsive-table tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] #inventory-key-list table.responsive-table tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] #inventory-key-list table.responsive-table td[data-label="Ключ"] { grid-column: 1 / -1; }
  html[data-theme] .table-card table.responsive-table tbody td { padding: 8px 10px; }
  html[data-theme] .table-card table.responsive-table tbody td > .button { width: 100%; }
  html[data-theme] .table-card table.responsive-table .table-actions > button { flex: 1 1 140px; }
  html[data-theme] .ui-modal { padding: 0; align-items: stretch; }
  /* Compact desktop dialogs become full-width sheets on a phone as well. */
  html[data-theme] .ui-modal .modal-surface,
  #create-inventory-dialog .modal-surface,
  #password-dialog .modal-surface,
  #integration-create-dialog .modal-surface,
  #kinguin-credentials-dialog .modal-surface,
  #eneba-credentials-dialog .modal-surface,
  #api-token-dialog .modal-surface,
  #api-client-create-dialog .modal-surface,
  #rename-inventory-dialog .modal-surface {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: var(--ui-visible-height);
    max-height: var(--ui-visible-height);
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  html[data-theme] .ui-modal .modal-close {
    top: max(12px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    min-width: 44px;
    min-height: 44px;
    padding: 4px 10px;
  }
  html[data-theme] .ui-modal .modal-surface > h2 { padding-right: 30px; }
  html[data-theme] .ui-modal .detail-heading { padding-right: 32px; }
  html[data-theme] #inventory-details {
    height: var(--ui-visible-height);
    min-height: var(--ui-visible-height);
    max-height: var(--ui-visible-height);
    padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }
  html[data-theme] #inventory-details .inventory-search-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
  html[data-theme] #inventory-details .key-selection-bar > label { min-width: 0; flex-basis: 100%; }
  html[data-theme] #inventory-details .detail-heading .toolbar { width: 100%; }
  html[data-theme] #inventory-details .inventory-metric { padding: 10px; }
  html[data-theme] .dialog-tabs { gap: 5px; }
  html[data-theme] .dialog-tabs button { min-height: 44px; }
  html[data-theme] .binding-current-card { padding: 16px; }
  html[data-theme] .binding-save-bar { flex-direction: column; align-items: stretch; }
  html[data-theme] .binding-save-bar .help { flex-basis: auto; }
  html[data-theme] .binding-save-bar > .button { width: 100%; }
  html[data-theme] .key-search-form { grid-template-columns: minmax(0, 1fr); }
  html[data-theme] .key-search-match { padding: 16px; }
  html[data-theme] .key-search-match-heading { flex-direction: column; align-items: flex-start; gap: 4px; }
  html[data-theme] .picker-control { align-items: stretch; }
  html[data-theme] .picker-control .inventory-select { flex-basis: 100%; width: 100%; }
  html[data-theme] .picker-control > .button { width: 100%; }
  html[data-theme] .login-screen { min-height: var(--ui-visible-height); padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
  html[data-theme] .login-card { padding: 24px 20px; }
  html[data-theme] .login-intro { padding-top: 40px; }
  html[data-theme] .login-intro h1 { font-size: clamp(32px, 9vw, 40px); }
  html[data-theme] .login-appearance { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
  html[data-theme] .appearance-dialog {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: var(--ui-visible-height);
    max-height: var(--ui-visible-height);
    margin: 0;
    border-radius: 0;
    padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
}

@media (prefers-reduced-motion: reduce) {
  #workspace-sidebar.sidebar { transition: none; }
}

/* Compact operator records: keep values and 44px actions, remove empty card space. */
@media (max-width: 1180px) {
  html[data-theme] :is(#inventory-list, #marketplace-offer-list, #order-list, #recent-orders, #inventory-key-list, #inventory-offers, #inventory-offer-picker-list, #kinguin-binding-inventories).table-card { padding: 8px; }
  html[data-theme] :is(#inventory-list, #marketplace-offer-list, #order-list, #recent-orders, #inventory-key-list, #inventory-offers, #inventory-offer-picker-list, #kinguin-binding-inventories) table.responsive-table tbody { gap: 8px; }
  html[data-theme] :is(#inventory-list, #marketplace-offer-list, #order-list, #recent-orders, #inventory-key-list, #inventory-offers, #inventory-offer-picker-list, #kinguin-binding-inventories) table.responsive-table tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    padding: 4px;
  }
  html[data-theme] :is(#inventory-list, #marketplace-offer-list, #order-list, #recent-orders, #inventory-key-list, #inventory-offers, #inventory-offer-picker-list, #kinguin-binding-inventories) table.responsive-table tbody td,
  html[data-theme] #inventory-details #inventory-key-list table.responsive-table tbody td {
    gap: 2px;
    padding: 5px 8px;
    line-height: 1.4;
    align-self: start;
  }
  html[data-theme] :is(#inventory-list, #marketplace-offer-list, #order-list, #recent-orders, #inventory-key-list, #inventory-offers, #inventory-offer-picker-list, #kinguin-binding-inventories) table.responsive-table .order-cell { gap: 3px; max-width: none; }
  html[data-theme] :is(#inventory-list, #marketplace-offer-list, #order-list, #recent-orders, #inventory-key-list, #inventory-offers, #inventory-offer-picker-list, #kinguin-binding-inventories) table.responsive-table .order-cell small { line-height: 1.4; }
  html[data-theme] :is(#order-list, #recent-orders) table.responsive-table td[data-label^="Оффер"],
  html[data-theme] #marketplace-offer-list table.responsive-table td[data-label="Инвентарь"],
  html[data-theme] #inventory-offers table.responsive-table td[data-label="Аккаунт"] { grid-column: 1 / -1; }
  html[data-theme] :is(#inventory-list, #marketplace-offer-list, #order-list, #recent-orders, #inventory-key-list, #inventory-offers, #inventory-offer-picker-list, #kinguin-binding-inventories) table.responsive-table td[data-label="Действия"] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
  }
  html[data-theme] :is(#inventory-list, #marketplace-offer-list, #order-list, #recent-orders, #inventory-key-list, #inventory-offers, #inventory-offer-picker-list, #kinguin-binding-inventories) table.responsive-table td[data-label="Действия"]::before { flex: 0 0 auto; }
  html[data-theme] :is(#inventory-list, #marketplace-offer-list, #order-list, #recent-orders, #inventory-key-list, #inventory-offers, #inventory-offer-picker-list, #kinguin-binding-inventories) table.responsive-table .table-actions { width: auto; flex: 1 1 180px; gap: 6px; }
  html[data-theme] :is(#inventory-list, #marketplace-offer-list, #order-list, #recent-orders, #inventory-key-list, #inventory-offers, #inventory-offer-picker-list, #kinguin-binding-inventories) table.responsive-table .table-actions > button { flex: 0 1 auto; padding: 8px 10px; }
  html[data-theme] :is(#inventory-list, #marketplace-offer-list, #order-list, #recent-orders, #inventory-key-list, #inventory-offers, #inventory-offer-picker-list, #kinguin-binding-inventories) table.responsive-table td[data-label="Действия"] > button { width: auto; flex: 0 1 auto; }
  html[data-theme] :is(#inventory-list, #kinguin-binding-inventories) table.responsive-table tbody td:not(:first-child):not([data-label="Действия"]) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 6px;
  }
  html[data-theme] :is(#inventory-list, #kinguin-binding-inventories) table.responsive-table tbody td:not(:first-child):not([data-label="Действия"])::before { flex: 0 1 auto; }
  html[data-theme] #inventory-list table.responsive-table tbody td:first-child { font-size: 14px; }
  html[data-theme] #marketplace-offer-list { margin-top: 12px; }

  /* Selection shares the key header; it must not consume a whole card row. */
  html[data-theme] #inventory-key-list table.responsive-table tbody tr { grid-template-columns: 44px minmax(0, 1fr) 44px minmax(0, 1fr); }
  html[data-theme] #inventory-details #inventory-key-list table.responsive-table td[data-label="Выбор"] { grid-column: 1; flex-direction: column; gap: 0; padding: 0; align-items: center; }
  html[data-theme] #inventory-details #inventory-key-list table.responsive-table td[data-label="Выбор"]::before { line-height: 14px; }
  html[data-theme] #inventory-details #inventory-key-list table.responsive-table td[data-label="Ключ"] { grid-column: 2 / -1; }
  html[data-theme] #inventory-details #inventory-key-list table.responsive-table td:is([data-label="Состояние"], [data-label="Продан, МСК"]) { grid-column: 1 / span 2; }
  html[data-theme] #inventory-details #inventory-key-list table.responsive-table td:is([data-label="Загружен, МСК"], [data-label="Площадка продажи"]) { grid-column: 3 / span 2; }
  html[data-theme] #inventory-key-list .inventory-priority { display: block; line-height: 1.4; }
  html[data-theme] #inventory-key-list .inventory-key-reference { line-height: 1.4; }
  html[data-theme] #inventory-details .inventory-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  html[data-theme] #inventory-details .inventory-metric { flex-direction: column; gap: 3px; padding: 8px 6px; align-items: flex-start; }
  html[data-theme] #inventory-details .inventory-metric strong { font-size: 22px; line-height: 1.2; }
  html[data-theme] #inventory-details .inventory-metric span { overflow-wrap: anywhere; line-height: 1.3; }

  /* Eneba uses cards already: avoid stretched rows and paragraph margins. */
  html[data-theme] .eneba-stock-grid { align-items: start; gap: 10px; }
  html[data-theme] .eneba-stock-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 14px; align-content: start; }
  html[data-theme] .eneba-stock-card > * { grid-column: 1 / -1; min-width: 0; }
  html[data-theme] .eneba-stock-card h4 { font-size: 16px; line-height: 1.35; }
  html[data-theme] .eneba-stock-card p { margin: 0; }
  html[data-theme] .eneba-stock-card .eneba-stock-price { grid-column: 1; align-self: center; font-size: 22px; }
  html[data-theme] .eneba-stock-card > .text-button { grid-column: 2; padding: 6px; }
  html[data-theme] .eneba-stock-card .eneba-stock-metrics { padding-top: 8px; }
  html[data-theme] .eneba-stock-card .button { margin-top: 0; }
}

@media (min-width: 768px) and (max-width: 1180px) {
  html[data-theme] :is(#inventory-list, #kinguin-binding-inventories, #marketplace-offer-list, #inventory-offers) table.responsive-table tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The offer window appears before any network read. Cached facts are a preview;
   the explicit read state and placeholders stay compact on every theme. */
html[data-theme] :is(#kinguin-offer-dialog, #eneba-offer-dialog, #k4g-offer-dialog) :is(.detail-heading, h2) { padding-right: 56px; }
html[data-theme] :is(#kinguin-offer-dialog, #eneba-offer-dialog, #k4g-offer-dialog) .offer-read-state { padding: 10px 12px; margin: 10px 0; border: 1px solid var(--ui-border, #dce2ea); border-radius: 10px; }
html[data-theme] .offer-read-state .help { margin: 0 0 8px; overflow-wrap: anywhere; }
html[data-theme] .offer-read-skeleton { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html[data-theme] .offer-read-skeleton span { height: 12px; border-radius: 6px; background: var(--ui-border, #dce2ea); opacity: .55; }
html[data-theme] #eneba-offer-dialog .eneba-inline-binding { margin: 16px 0 10px; gap: 8px; }
html[data-theme] #eneba-offer-dialog .eneba-inline-binding h3 { margin: 0; }
html[data-theme] #eneba-offer-dialog #eneba-binding-inventories { max-height: 240px; overflow: auto; }
html[data-theme] #eneba-offer-dialog .eneba-inline-binding .pagination { margin-top: 0; }

@media (max-width: 640px) {
  html[data-theme] #inventory-list table.responsive-table tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tablet key facts share one row; the full key header keeps its 44px selection. */
@media (min-width: 768px) and (max-width: 1180px) {
  html[data-theme] #inventory-key-list table.responsive-table tbody tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html[data-theme] #inventory-details #inventory-key-list table.responsive-table td[data-label="Выбор"] {
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    z-index: 1;
  }
  html[data-theme] #inventory-details #inventory-key-list table.responsive-table td[data-label="Ключ"] {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-left: 56px;
  }
  html[data-theme] #inventory-details #inventory-key-list table.responsive-table td[data-label="Состояние"] { grid-column: 1; grid-row: 2; }
  html[data-theme] #inventory-details #inventory-key-list table.responsive-table td[data-label="Загружен, МСК"] { grid-column: 2; grid-row: 2; }
  html[data-theme] #inventory-details #inventory-key-list table.responsive-table td[data-label="Продан, МСК"] { grid-column: 3; grid-row: 2; }
  html[data-theme] #inventory-details #inventory-key-list table.responsive-table td[data-label="Площадка продажи"] { grid-column: 4; grid-row: 2; }
  html[data-theme] #inventory-details #inventory-key-list table.responsive-table td[data-label="Действия"] { grid-column: 1 / -1; grid-row: 3; }
}

/* Offer catalogues use the same dense record layout on all four platforms.
   At tablet width, generic stacked cards previously gave inventory/actions
   separate full-width rows and hid most of the catalogue below empty space. */
html[data-theme] main:has(> :is(#offers, #eneba, #k4g, #g2a).active-section) > :is(.intro, .demo-note) { display: none; }
html[data-theme] :is(#offers, #eneba, #k4g, #g2a).active-section > .section-heading { margin: 14px 0 10px; }
html[data-theme] :is(#offers, #eneba, #k4g, #g2a).active-section > .section-heading p { display: none; }
html[data-theme] #offers.active-section > .toolbar { margin-top: 12px; }
html[data-theme] #kinguin-account-title { font-size: 15px; }
html[data-theme] #offers > .panel > .form-grid { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
html[data-theme] #offers > .panel > .form-grid > label { flex: 1 1 240px; }
html[data-theme] #offers > .panel > .form-grid > button { flex: 0 0 auto; }
html[data-theme] :is(#offers, #eneba, #k4g, #g2a).active-section > .panel > .section-heading { margin: 0 0 10px; }
html[data-theme] :is(#offers, #eneba, #k4g, #g2a).active-section > .panel > .section-heading h3 { margin-bottom: 4px; }
html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) {
  display: block;
  min-height: 0;
  margin-top: 10px;
}
html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table { min-width: 0; table-layout: fixed; }
html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) :is(th, td) { padding: 6px 8px; vertical-align: middle; }
html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) th { white-space: normal; line-height: 1.35; }
html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) .order-cell { gap: 2px; max-width: none; line-height: 1.3; }
html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) .order-cell strong { font-size: 12px; line-height: 1.35; }
html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) .order-cell small { font-size: 9px; line-height: 1.3; }
html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td:first-child strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td:first-child small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) button { min-height: 44px; min-width: 44px; padding: 4px 2px; font-size: 12px; line-height: 1.35; white-space: normal; }
html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) .inventory-binding-link { max-width: 100%; }
html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) :is(th, td):first-child { width: 27%; }
html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) :is(th, td):nth-child(4) { width: 14%; }
html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) :is(th, td):nth-child(6) { width: 20%; }
html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) :is(th, td):last-child { width: 10%; }
html[data-theme] .offer-catalog-note { margin: 8px; }

@media (max-width: 1180px) {
  html[data-theme] :is(#offers, #eneba, #k4g, #g2a).active-section > .panel { padding: 14px; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list).table-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
  }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table { width: 100%; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody { gap: 0; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody tr {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    gap: 2px 8px;
    align-items: center;
    padding: 8px 2px;
    border: 0;
    border-top: 1px solid var(--ui-border, #dce2ea);
    border-radius: 0;
    background: transparent;
  }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td:nth-child(n) {
    width: auto;
    padding: 0;
    gap: 2px;
    align-self: center;
    line-height: 1.3;
    font-size: 12px;
  }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td::before { font-size: 10px; line-height: 1.2; font-weight: 500; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td:first-child { grid-column: 1 / span 2; grid-row: 1; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td:first-child::before { display: none; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td:first-child strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13px;
  }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td:first-child small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td:nth-child(2) { grid-column: 1; grid-row: 2; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td:nth-child(3) { grid-column: 2; grid-row: 2; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td[data-label="Статус"] { grid-column: 3; grid-row: 1; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td[data-label="Статус"]::before { display: none; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td[data-label="Остатки"] { grid-column: 3; grid-row: 2; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td[data-label="Инвентарь"] { grid-column: 1; grid-row: 3; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list) table.responsive-table tbody td[data-label="Бесплатные изменения"] { grid-column: 2; grid-row: 3; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td[data-label="Действия"] { grid-column: 3; grid-row: 3; align-items: flex-end; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td:is([data-label="Инвентарь"], [data-label="Действия"])::before { display: none; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td > button { width: auto; max-width: 100%; flex: none; }

  /* G2A has one base price, so its six fields keep the same three-row record
     without borrowing the seven-column price/status positions. */
  html[data-theme] #g2a-offer-list table.responsive-table tbody td[data-label="Базовая цена"] { grid-column: 1 / span 2; grid-row: 2; }
  html[data-theme] #g2a-offer-list table.responsive-table tbody td[data-label="Статус"] { grid-column: 3; grid-row: 1; }
  html[data-theme] #g2a-offer-list table.responsive-table tbody td[data-label="Остатки"] { grid-column: 3; grid-row: 2; }
  html[data-theme] #g2a-offer-list table.responsive-table tbody td[data-label="Инвентарь"] { grid-column: 1 / span 2; grid-row: 3; }
  html[data-theme] #g2a-offer-list table.responsive-table tbody td[data-label="Действия"] { grid-column: 3; grid-row: 3; align-items: flex-end; }
  html[data-theme] #g2a-offer-list table.responsive-table tbody td:is([data-label="Статус"], [data-label="Инвентарь"], [data-label="Действия"])::before { display: none; }
  html[data-theme] #g2a-offer-list table.responsive-table tbody td[data-label="Остатки"]::before { display: block; }
}

@media (max-width: 640px) {
  html[data-theme] main:has(> :is(#offers, #eneba, #k4g, #g2a).active-section) #operator-name { display: none; }
  html[data-theme] main:has(> :is(#offers, #eneba, #k4g, #g2a).active-section) .topbar .appearance-trigger { width: 44px; min-width: 44px; padding: 8px; font-size: 0; gap: 0; }
  html[data-theme] main:has(> :is(#offers, #eneba, #k4g, #g2a).active-section) .topbar .appearance-trigger svg { width: 22px; height: 22px; }
  html[data-theme] :is(#offers, #eneba, #k4g, #g2a).active-section > .section-heading { margin: 12px 0 8px; }
  html[data-theme] #offers.active-section > .toolbar { gap: 6px; }
  html[data-theme] #offers.active-section > .toolbar button { flex: 1 1 140px; padding: 8px; font-size: 11px; }
  html[data-theme] #offers > .panel > .form-grid > label { flex-basis: 100%; }
  html[data-theme] :is(#offers, #eneba, #k4g, #g2a).active-section > .panel > .section-heading { align-items: stretch; flex-direction: column; gap: 8px; }
  html[data-theme] :is(#offers, #eneba, #k4g, #g2a).active-section > .panel > .section-heading p { display: none; }
}

/* Narrow tablets keep the same compact records as phones. Only wider tablets
   have room for all prices, stock, inventory and an unbroken action label. */
@media (min-width: 1024px) and (max-width: 1180px) {
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table { display: table; border-collapse: collapse; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table thead {
    display: table-header-group;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody { display: table-row-group; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody tr { display: table-row; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td { display: table-cell; padding: 6px; border-top: 1px solid var(--ui-border, #dce2ea); }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td::before { display: none; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td:first-child { width: 27%; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td:nth-child(4) { width: 14%; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td:nth-child(6) { width: 20%; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td:last-child { width: 10%; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td:first-child strong { font-size: 12px; }
}

/* G2A's real table has six columns at wide tablet and desktop widths. Apply
   these widths after the shared seven-column defaults and tablet reset. */
@media (min-width: 1024px) {
  html[data-theme] #g2a-offer-list table.responsive-table :is(th, td):nth-child(1) { width: 34%; }
  html[data-theme] #g2a-offer-list table.responsive-table :is(th, td):nth-child(2) { width: 10%; }
  html[data-theme] #g2a-offer-list table.responsive-table :is(th, td):nth-child(3) { width: 10%; }
  html[data-theme] #g2a-offer-list table.responsive-table :is(th, td):nth-child(4) { width: 16%; }
  html[data-theme] #g2a-offer-list table.responsive-table :is(th, td):nth-child(5) { width: auto; }
  html[data-theme] #g2a-offer-list table.responsive-table :is(th, td):nth-child(6) { width: 104px; }
  html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table :is(th, td):last-child { width: 104px; }
}

/* Action labels are one word and must stay readable in both records and tables.
   Reserve their actual width instead of a percentage of a narrow content area. */
html[data-theme] :is(#marketplace-offer-list, #eneba-stock-list, #k4g-offer-list, #g2a-offer-list) table.responsive-table tbody td[data-label="Действия"] > button {
  min-width: 76px;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
/* A laptop's sidebar leaves less room than the order table's minimum width.
   Keep its action column visible while the other facts can scroll beneath it. */
@media (min-width: 1181px) {
  html[data-theme] #order-list table.responsive-table :is(th, td):last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    width: 120px;
    min-width: 120px;
    background: var(--ui-surface, #fff);
    box-shadow: -1px 0 0 var(--ui-border, #dce2ea);
  }
  html[data-theme] #order-list table.responsive-table th:last-child { background: var(--ui-surface-alt, #f0edf9); }
  html[data-theme] #order-list table.responsive-table td:last-child { vertical-align: middle; }
  html[data-theme] #order-list table.responsive-table td:last-child .text-button {
    min-width: 76px;
    min-height: 44px;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* One close control stays reachable in every long modal, on every viewport.
   Keep it outside short headings so their bottom edge cannot unstick it. */
html[data-theme] .ui-modal .modal-surface > .modal-close {
  position: sticky;
  display: block;
  top: 0;
  right: auto;
  margin: 0 0 -44px auto;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 4px 10px;
  flex-shrink: 0;
  z-index: 8;
  background: var(--ui-surface, #fff);
  color: var(--ui-muted, #64726d);
  border: 1px solid var(--ui-border, #dce2ea);
  border-radius: 10px;
  line-height: 1;
}
html[data-theme] .ui-modal .modal-surface > :is(h2, .detail-heading) {
  padding-right: 56px;
}
html[data-theme] .appearance-dialog > .appearance-heading {
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--ui-surface, #fff);
  padding-bottom: 12px;
}
html[data-theme] .appearance-dialog .appearance-close {
  position: static;
  margin: 0;
  background: var(--ui-surface, #fff);
  border: 1px solid var(--ui-border, #dce2ea);
  border-radius: 10px;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  html[data-theme] .ui-modal .modal-surface > .modal-close,
  html[data-theme] .appearance-dialog > .appearance-heading {
    top: max(12px, env(safe-area-inset-top));
  }
}

/* Keep daily catalog work clear of onboarding and account configuration. */
html[data-theme] #overview > .intro { margin: 18px 0; padding: 0; }
html[data-theme] #overview > .intro h1 { margin: 0; font-size: 28px; line-height: 1.25; }
html[data-theme] :is(.overview-guide, .secondary-tools) { margin: 14px 0; border: 1px solid var(--ui-border, #dce2ea); border-radius: 12px; background: var(--ui-surface, #fff); }
html[data-theme] :is(.overview-guide, .secondary-tools) > summary { padding: 12px 16px; cursor: pointer; color: var(--ui-text, #25213e); font-weight: 600; }
html[data-theme] .overview-guide > .flow { margin: 0; padding: 0 16px 16px; }
html[data-theme] .secondary-tools > :not(summary) { margin-left: 16px; margin-right: 16px; }
html[data-theme] #eneba-account-tools-dialog .modal-surface > .panel { margin: 16px 0 0; box-shadow: none; }
html[data-theme] #eneba-account-tools-dialog .modal-surface > .toolbar { margin: 16px 0; }
html[data-theme] #security .appearance-panel { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 16px; min-height:0; margin:14px 0; }

/* Shared geometry across themes and devices. Colours stay with each theme. */
html[data-theme] {
  --ui-control-height: 44px;
  --ui-panel-padding: 24px;
  --ui-field-gap: 8px;
  --ui-form-gap: 16px;
}
html[data-theme] :is(.app-shell, .ui-modal, .login-card) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html[data-theme] :is(.app-shell, .ui-modal, .login-card) select {
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  padding: 10px 12px;
  line-height: 22px;
}
html[data-theme] :is(.app-shell, .ui-modal, .login-card) textarea {
  min-height: 96px;
  padding: 10px 12px;
  line-height: 22px;
}
html[data-theme] .button { min-height: var(--ui-control-height); padding: 10px 16px; line-height: 20px; }
html[data-theme] :is(.stack, .form-grid) { gap: var(--ui-form-gap); }
html[data-theme] label { gap: var(--ui-field-gap); line-height: 1.4; }
html[data-theme] :is(.section-heading, .detail-heading) { gap: var(--ui-form-gap); }
html[data-theme] :is(#overview, #inventories, #offers, #eneba, #k4g, #orders, #integrations, #security) > .panel {
  padding: var(--ui-panel-padding);
}
html[data-theme] .ui-modal .modal-surface,
html[data-theme] #inventory-details,
html[data-theme] #http-diagnostics-dialog .modal-surface,
html[data-theme] .appearance-dialog {
  padding: max(var(--ui-panel-padding), env(safe-area-inset-top)) max(var(--ui-panel-padding), env(safe-area-inset-right)) max(var(--ui-panel-padding), env(safe-area-inset-bottom)) max(var(--ui-panel-padding), env(safe-area-inset-left));
}
html[data-theme] .login-card { padding: var(--ui-panel-padding); }
html[data-theme] .ui-modal .modal-surface > :is(h2, .detail-heading) { margin-bottom: var(--ui-form-gap); }
html[data-theme] .ui-modal .modal-surface > h2 { line-height: 1.3; }
html[data-theme] :is(.binding-save-bar, .picker-control, .inventory-search-toolbar, .key-selection-bar, .pagination) { gap: var(--ui-field-gap); }
html[data-theme] .ui-modal .detail-grid { gap: var(--ui-form-gap); }
html[data-theme] .ui-modal .detail-field dt { margin-bottom: var(--ui-field-gap); }
/* Offer facts stay compact even where general dialogs use a single column. */
html[data-theme] .ui-modal .offer-card .offer-card-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-field-gap) var(--ui-form-gap);
}
html[data-theme] .ui-modal .offer-card > :is(.offer-card-section, .offer-card-tools) {
  margin-block-start: var(--ui-form-gap);
}
html[data-theme] .ui-modal .offer-card .offer-pricing-form {
  display: grid;
  gap: var(--ui-form-gap);
}
html[data-theme] .ui-modal .offer-card .offer-pricing-feedback { margin: 0; }
html[data-theme] :is(#inventories, #offers, #eneba, #k4g, #orders, #integrations, #security).active-section > .section-heading {
  margin: var(--ui-form-gap) 0;
  align-items: center;
}
html[data-theme] :is(#inventories, #offers, #eneba, #k4g, #orders, #integrations, #security) > .section-heading h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}
html[data-theme] :is(#inventories, #offers, #eneba, #k4g, #orders, #integrations, #security) > .section-heading > .toolbar { margin: 0; }
html[data-theme] :is(#inventories, #offers, #eneba, #k4g, #orders, #integrations, #security) > .catalog-toolbar { margin: 0 0 var(--ui-form-gap); }
html[data-theme] .ui-modal .modal-surface:focus,
html[data-theme] #app-shell:focus,
html[data-theme] #login-screen:focus { outline: none; }

@media (max-width: 640px) {
  html[data-theme] { --ui-panel-padding: 16px; }
  /* The same compact toolbar on every page; no broken button captions. */
  html[data-theme] .topbar .toolbar .appearance-trigger { width: 44px; min-width: 44px; height: 44px; padding: 8px; font-size: 0; gap: 0; }
  html[data-theme] .topbar .appearance-trigger svg { width: 22px; height: 22px; }
  html[data-theme] .topbar #operator-name { font-size: 12px; }
  html[data-theme] .topbar .toolbar button { padding: 8px; font-size: 11px; white-space: nowrap; overflow-wrap: normal; }
  html[data-theme] .topbar .toolbar .appearance-trigger { font-size: 0; }
  html[data-theme] #inventory-details .inventory-metric span {
    font-size: 10px;
    line-height: 1.35;
    overflow-wrap: normal;
    word-break: normal;
  }
  html[data-theme] #inventory-details .dialog-tabs { gap: 4px; }
  html[data-theme] #inventory-details .dialog-tabs button { padding: 8px 10px; }
  html[data-theme] #inventory-list table.responsive-table tbody td:not(:first-child):not([data-label="Действия"])::before { font-size: 10px; overflow-wrap: normal; word-break: normal; }
}
@media (max-width: 767px) {
  html[data-theme] .ui-modal .offer-card .offer-card-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px), (max-width: 1180px) and (max-height: 640px) {
  html[data-theme] .login-screen {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    align-items: stretch;
    gap: var(--ui-form-gap);
    padding: max(68px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  }
  html[data-theme] .login-intro { padding: 0; border: 0; width: 100%; max-width: 440px; justify-self: center; }
  html[data-theme] .login-intro :is(h1, p, .login-platforms),
  html[data-theme] .login-card > .brand-icon { display: none; }
  html[data-theme] .login-card { width: 100%; max-width: 440px; justify-self: center; }
  html[data-theme] .login-card h2 { font-size: 22px; line-height: 1.3; margin: 0 0 var(--ui-field-gap); }
  html[data-theme] .login-card > p { margin: 0 0 var(--ui-form-gap); }
  html[data-theme] .login-card .stack { margin: 0 0 var(--ui-form-gap); }
  html[data-theme] .login-card .help { margin: 0; line-height: 1.5; }
}

/* On phones the sheet owns one scroll body; its header and actions stay outside it.
   A bounded nested list hid its continuation in Safari and squeezed wrapped rows. */
@media (max-width: 640px), (max-width: 1180px) and (max-height: 600px) {
  html[data-theme] .ui-modal:has(.inventory-binding-surface) { padding: 0; align-items: stretch; }
  html[data-theme] .ui-modal .inventory-binding-surface {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: var(--ui-visible-height);
    min-height: 0;
    max-height: 100vh;
    max-height: var(--ui-visible-height);
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }
  html[data-theme] .inventory-binding-surface > h2 { flex: 0 0 auto; }
  html[data-theme] .inventory-binding-surface .inventory-binding-body {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    padding-bottom: 8px;
  }
  html[data-theme] .inventory-binding-surface .inventory-choice-list {
    max-height: none;
    overflow: visible;
    padding-inline: 0;
  }
  html[data-theme] .inventory-binding-surface .inventory-choice-row { height: auto; flex: 0 0 auto; }
  html[data-theme] .inventory-binding-surface .inventory-choice-row:not(:has(.inventory-choice-check:not(:empty))) { grid-template-columns: minmax(0, 1fr); }
  html[data-theme] .inventory-binding-surface .inventory-choice-stats { grid-column: 1 / -1; grid-row: 2; }
  html[data-theme] .inventory-binding-surface .inventory-choice-check { grid-row: 1; }
  html[data-theme] .inventory-binding-surface .inventory-choice-check:empty { display: none; }
  html[data-theme] .inventory-binding-surface .binding-save-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 0 0 auto;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    background: var(--ui-surface, #fff);
  }
  html[data-theme] .inventory-binding-surface .binding-save-bar .help {
    grid-column: 1 / -1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Override the older K4G account-layout rule at its ID specificity as well. */
  html[data-theme] #k4g-binding-dialog .binding-save-bar { display: grid; }
  html[data-theme] :is(#kinguin-binding-dialog, #k4g-binding-dialog, #offer-inventory-binding-dialog) .binding-save-bar > .button {
    min-width: 0;
    width: 100%;
    white-space: normal;
    padding-inline: 10px;
    line-height: 1.3;
  }
}

/* The on-screen keyboard can overlay even 100dvh. Use its actual visible area;
   browsers without VisualViewport and pinch zoom keep the CSS viewport fallback. */
:root {
  --ui-visible-height: 100vh;
  --ui-visible-width: 100%;
  --ui-visible-top: 0px;
  --ui-visible-left: 0px;
}
@supports (height: 100dvh) {
  :root { --ui-visible-height: 100dvh; }
}
html[data-theme] .ui-modal {
  top: var(--ui-visible-top);
  left: var(--ui-visible-left);
  right: auto;
  bottom: auto;
  width: var(--ui-visible-width);
  height: var(--ui-visible-height);
}
/* Provider and diagnostics ID rules must not retain a layout-viewport cap. */
html[data-theme] :is(#account-setup-dialog, #http-diagnostics-dialog) .modal-surface {
  max-height: calc(var(--ui-visible-height) - 48px);
}
/* The appearance picker is a native dialog, outside the shared modal layer. */
html[data-theme] .appearance-dialog {
  position: fixed;
  top: calc(var(--ui-visible-top) + 24px);
  left: var(--ui-visible-left);
  right: calc(100% - var(--ui-visible-left) - var(--ui-visible-width));
  bottom: auto;
  margin: 0 auto;
  width: min(1000px, calc(var(--ui-visible-width) - 48px));
  max-height: calc(var(--ui-visible-height) - 48px);
}
@media (max-width: 640px) {
  html[data-theme] .ui-modal:has(.offer-card) { padding: 0; align-items: stretch; }
  html[data-theme] :is(#account-setup-dialog, #http-diagnostics-dialog) .modal-surface {
    max-height: var(--ui-visible-height);
  }
  html[data-theme] .appearance-dialog {
    top: var(--ui-visible-top);
    right: auto;
    margin: 0;
    width: var(--ui-visible-width);
    height: var(--ui-visible-height);
    max-height: var(--ui-visible-height);
  }
}
/* One inset focus indicator cannot be clipped by a narrow scroll body.
   Keyboard indicators on buttons and links retain their existing outline. */
html[data-theme] :is(.app-shell, .ui-modal, .login-card, .appearance-dialog) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):is(:focus, :focus-visible) {
  border-color: var(--ui-focus, var(--ui-accent));
  outline: 2px solid var(--ui-focus, var(--ui-accent));
  outline-offset: -2px;
  box-shadow: none;
}
html[data-theme] :is(.app-shell, .ui-modal, .login-card, .appearance-dialog) input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

.search-input-shell { position: relative; display: block; width: 100%; min-width: 0; }
html[data-theme] .search-input-shell > input[type="search"] { display: block; width: 100%; padding-inline-end: 44px; }
.search-input-shell > input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
html[data-theme] button.search-input-clear {
  position: absolute; inset-inline-end: 2px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; min-width: 0; min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--ui-muted, #666);
  box-shadow: none; cursor: pointer;
}
html[data-theme] button.search-input-clear:hover { color: var(--ui-text, #222); background: var(--ui-accent-soft, #8881); }
.search-input-clear svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; pointer-events: none; }

/* A search width must never become a 260px vertical flex basis on a phone. */
html[data-theme] .list-toolbar,
html[data-theme] #offers > .panel > .form-grid.list-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}
html[data-theme] :is(.catalog-toolbar.list-toolbar, .form-grid.list-toolbar) > label,
html[data-theme] #offers > .panel > .form-grid.list-toolbar > label {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
}
html[data-theme] .list-toolbar > .toolbar { margin: 0; min-width: 0; }
html[data-theme] #inventories .list-toolbar { grid-template-columns: minmax(0, 1fr); }
html[data-theme] .list-toolbar > :is(.list-filters, .help) {
  grid-column: 1 / -1;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
}
@media (max-width: 640px) {
  html[data-theme] .list-toolbar,
  html[data-theme] #offers > .panel > .form-grid.list-toolbar { grid-template-columns: minmax(0, 1fr); }
  html[data-theme] :is(.catalog-toolbar.list-toolbar, .form-grid.list-toolbar) > label,
  html[data-theme] #offers > .panel > .form-grid.list-toolbar > label { flex-basis: auto; }
  html[data-theme] .list-toolbar > .toolbar { width: 100%; gap: 8px; }
  html[data-theme] .list-toolbar > .toolbar > .button { flex: 1 1 auto; }
  html[data-theme] .list-toolbar > .button { width: 100%; }
  /* All four actions retain their labels and touch targets in one row. */
  html[data-theme] .topbar .toolbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }
  html[data-theme] .topbar .toolbar #operator-name { display: none; }
  html[data-theme] .topbar .toolbar button { min-width: 44px; padding-inline: 4px; }
  html[data-theme] .topbar .toolbar .appearance-trigger { min-width: 44px; }
}

/* Inventory totals keep their own layout, including when an older workspace
   stylesheet is unavailable. Four equal counters occupy one row at every width. */
html[data-theme] #inventory-details #inventory-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 8px 0;
}
html[data-theme] #inventory-details #inventory-summary > .inventory-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
}
html[data-theme] #inventory-details #inventory-summary > .inventory-metric strong {
  min-width: 0;
  max-width: 100%;
  font-size: 24px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
html[data-theme] #inventory-details #inventory-summary > .inventory-metric span {
  min-width: 0;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  html[data-theme] #inventory-details #inventory-summary { gap: 6px; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .9fr); }
  html[data-theme] #inventory-details #inventory-summary > .inventory-metric { padding: 8px 2px; }
  html[data-theme] #inventory-details #inventory-summary > .inventory-metric strong { font-size: clamp(14px, 4vw, 22px); }
  html[data-theme] #inventory-details #inventory-summary > .inventory-metric span { font-size: clamp(9px, 2.3vw, 10px); overflow-wrap: normal; }
}

/* Every marketplace uses the same search/filter/status/table rhythm. */
html[data-theme] #g2a-offer-list .g2a-offer-meta { display:flex; align-items:center; flex-wrap:wrap; gap:3px 6px; min-width:0; }
html[data-theme] #g2a-offer-list .g2a-offer-meta .g2a-offer-id { flex:1 1 0; font-size:9px; line-height:1.35; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-theme] #g2a-offer-list .g2a-offer-type { display:inline-flex; align-items:center; flex-shrink:0; margin:0; padding:1px 6px; border:1px solid transparent; border-radius:5px; font-size:10px; font-weight:600; line-height:1.4; white-space:nowrap; letter-spacing:0; text-transform:none; }
html[data-theme] #g2a-offer-list .g2a-offer-type-dropshipping { color:#5b35a8; background:#eee7ff; border-color:#e0d5fa; }
html[data-theme] #g2a-offer-list .g2a-offer-type-game { color:#2458a6; background:#e8f0ff; border-color:#d5e2fa; }
html[data-theme] #g2a-offer-list .g2a-offer-type-promo { color:#805400; background:#fff3d6; border-color:#efdfb6; }
html[data-theme] #g2a-offer-list .g2a-offer-type-other { color:#4d5260; background:#edf0f4; border-color:#dce0e7; }
html[data-theme] :is(#offers,#eneba,#k4g,#g2a).section.offer-catalog-section > .section-heading { margin:16px 0; }
html[data-theme] :is(#offers,#eneba,#k4g,#g2a).section.offer-catalog-section > .panel { display:flex; flex-direction:column; gap:16px; min-width:0; margin:0; padding:24px; }
html[data-theme] :is(#offers,#eneba,#k4g,#g2a).section.offer-catalog-section > .panel > .catalog-toolbar { margin:0; gap:12px; }
html[data-theme] :is(#offers,#eneba,#k4g,#g2a).section.offer-catalog-section > .panel > :is(.offer-catalog-note,.offer-sync-progress,.table-card,.pagination) { margin:0; min-width:0; }
html[data-theme] :is(#offers,#eneba,#k4g,#g2a).section.offer-catalog-section > .panel > :is(.offer-catalog-note,.offer-sync-progress):empty { display:none; }
html[data-theme] :is(#offers,#eneba,#k4g,#g2a).section.offer-catalog-section .offer-catalog-note { font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
html[data-theme] :is(#offers,#eneba,#k4g,#g2a).section.offer-catalog-section .list-filters { margin:0; gap:12px; }

html[data-theme] :is(#offers,#eneba,#k4g,#g2a).section.offer-catalog-section > .section-heading h2 { margin:0; font-size:20px; line-height:1.3; }
@media(max-width:640px) {
  html[data-theme] :is(#offers,#eneba,#k4g,#g2a).section.offer-catalog-section > .panel { padding:16px; }
}