:root{
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);

    --bg: #ffffff;
    --fg: #111827;

    /* деловой стиль */
    --primary: #0f172a;     /* slate-900 */
    --primary-2: #111827;   /* gray-900 */
    --ring: rgba(15, 23, 42, .10);

    /* маркетплейсы */
    --wb: #7c3aed;   /* violet-600 */
    --ozon: #2563eb; /* blue-600 */

    color-scheme: light;
  }

  @media (prefers-color-scheme: dark){
    :root { color-scheme: light; }
    body { background-color: #ffffff; color: var(--fg); }
  }

  html, body { height: 100%; }
  body{
    margin:0; padding:0;
    background: var(--bg);
    min-height: 100vh;
    position: relative;
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
  }

  body::before{
    content:'';
    position:fixed; inset:0;
    background-image:
      linear-gradient(to right, rgba(200,200,200,.45) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(200,200,200,.45) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position:center;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
    pointer-events:none;
    z-index:-1;
  }

  .glass{
    background: rgba(255,255,255,.75);
    backdrop-filter: saturate(1.2) blur(12px);
    -webkit-backdrop-filter: saturate(1.2) blur(12px);
    box-shadow: 0 8px 30px rgba(0,0,0,.06);
  }
  .card{
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 12px 30px rgba(0,0,0,.05);
  }

  .page{
    padding-top: var(--safe-area-top);
    padding-bottom: calc(84px + var(--safe-area-bottom));
  }
  /* Страница загрузки: фиксированная высота, без скролла всей страницы */
  #page-upload {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
  }
  /* При переключении вкладки страница загрузки должна скрываться (id перебивает .hidden) */
  #page-upload.hidden,
  #page-history.hidden,
  #page-edit.hidden,
  #page-profile.hidden {
    display: none !important;
  }
  #page-upload main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Запас снизу, чтобы последняя карточка не скрывалась за кнопкой «Выгрузить» */
    padding-bottom: calc(180px + var(--safe-area-bottom));
  }
  /* Панель с кнопкой «Выгрузить»: белая подложка до низа экрана */
  #uploadBar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.06);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
    padding: 12px 16px calc(64px + var(--safe-area-bottom));
  }
  #uploadBar.hidden {
    display: none;
  }

  .btn{ transition: transform .04s ease, background .2s ease, opacity .2s ease, box-shadow .2s ease; }
  .btn:active{ transform: translateY(1px) scale(0.995); }

  #warehouseFiltersCard select,
  #warehouseFiltersCard input {
    touch-action: manipulation;
  }

  .toast{
    position: fixed;
    top: calc(12px + var(--safe-area-top));
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(8px);
    z-index: 120;
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s, transform .25s, visibility .25s;
    max-width: min(92vw, 380px);
    width: max-content;
    border-radius: 12px;
    background: rgba(0,0,0,.82);
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.20);
    pointer-events: none;
  }
  .toast.show{ visibility: visible; opacity:1; transform: translateX(-50%) translateY(0); }
  #toastText{ display:inline-block; padding: 10px 12px; line-height:1.25; white-space: pre-line; word-break: break-word; font-size: .875rem; }

  .spinner{
    width:40px;height:40px;
    border: 4px solid rgba(255,255,255,.3);
    border-top: 4px solid #ffffff;
    border-radius:50%;
    animation: spin 1s linear infinite;
  }
  @keyframes spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
  @keyframes fadeOut {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.95); }
  }
  .card-removing {
    animation: fadeOut 0.3s ease-out forwards;
  }

  .chip{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.5rem .75rem;
    border-radius: 9999px;
    border: 1px solid rgba(0,0,0,.15);
    background: rgba(255,255,255,.85);
    user-select:none;
    transition: all .2s ease;
  }
  .chip input{ display:none; }
  .chip .dot{
    width:10px;height:10px;border-radius:9999px;
    background: rgba(0,0,0,.2);
    transition: background .2s ease;
  }
  .chip.active{
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(124,58,237,.1);
  }
  .chip.active .dot{ background: var(--primary); }
  
  .chip.active#chip-wb{
    background: rgba(124,58,237,.15);
    border-color: var(--wb);
    color: #5b21b6;
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(124,58,237,.15);
  }
  .chip.active#chip-wb .dot{
    background: var(--wb);
  }
  
  .chip.active#chip-ozon{
    background: rgba(37,99,235,.15);
    border-color: var(--ozon);
    color: #1e40af;
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
  }
  .chip.active#chip-ozon .dot{
    background: var(--ozon);
  }
  
  .chip:not(.active){
    opacity: 0.6;
  }

  .badge-wb{
    background: rgba(124,58,237,.12);
    color: #5b21b6;
    border: 1px solid rgba(124,58,237,.25);
  }
  .badge-ozon{
    background: rgba(37,99,235,.12);
    color: #1e40af;
    border: 1px solid rgba(37,99,235,.25);
  }

  .photo-slot{
    position: relative;
    cursor:pointer;
  }
  .photo-slot:hover{ background: rgba(249,250,251,1); }
  .photo-slot.photo-filled{
    position: relative;
  }
  .photo-slot.photo-filled img{
    width:100%; height:100%;
    object-fit: cover;
  }
  .photo-remove{
    z-index: 2;
  }
  .photo-drag{
    z-index: 2;
    touch-action: none;
  }
  .photo-drag:active{
    cursor: grabbing;
  }
  .sortable-ghost{ opacity:.5; border:2px dashed rgba(0,0,0,.45); }
  .drag-handle{ touch-action: none; }

  .modal{ position: fixed; inset: 0; z-index: 80; display:none; }
  #warehouseSyncConfirmModal.modal{ z-index: 130; }
  .modal.show{ display:block; }
  .modal .backdrop{ 
    position:absolute; inset:0; background: rgba(0,0,0,.45);
    animation: fadeIn 0.2s ease-out;
  }
  .modal .backdrop.closing {
    animation: fadeOut 0.2s ease-in forwards;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  @keyframes slideUp {
    from { 
      transform: translateY(100%);
      opacity: 0;
    }
    to { 
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slideDown {
    from { 
      transform: translateY(0);
      opacity: 1;
    }
    to { 
      transform: translateY(100%);
      opacity: 0;
    }
  }
  .sheet.closing {
    animation: slideDown 0.2s ease-in forwards;
  }
  .sheet{
    position:absolute; inset:auto 0 0 0;
    background:#fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,.12);
    animation: slideUp 0.3s ease-out;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .sheet-header{
    position: relative;
    display:flex; align-items:center; gap:10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background:#fff !important;
    z-index:10;
    flex-shrink: 0;
    min-height: 56px;
  }
  .sheet-body{ 
    padding:12px 16px 16px; 
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  
  /* Специальные стили для модального окна истории карточки */
  #historyCardModal .sheet {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  #historyCardModal .sheet-header {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    z-index: 100 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 56px;
    will-change: transform;
  }
  
  #historyCardModal .sheet-body {
    position: relative;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  
  /* Предотвращаем скрытие header при прокрутке */
  #historyCardModal .sheet-body::-webkit-scrollbar {
    width: 0;
    background: transparent;
  }

  /* Специальные стили для модального окна товара WB */
  #editWbProductModal {
    z-index: 90 !important; /* Выше чем editWbModal (z-index: 80) */
  }
  
  #editWbProductModal .sheet {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  #editWbProductModal .sheet-header {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    z-index: 100 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 56px;
    will-change: transform;
  }
  
  #editWbProductModal .sheet-body {
    position: relative;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  
  /* Предотвращаем скрытие header при прокрутке */
  #editWbProductModal .sheet-body::-webkit-scrollbar {
    width: 0;
    background: transparent;
  }

  #editOzonProductModal {
    z-index: 90 !important;
  }
  #editOzonProductModal .sheet {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #editOzonProductModal .sheet-header {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    z-index: 100 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 56px;
    will-change: transform;
  }
  #editOzonProductModal .sheet-body {
    position: relative;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
  #editOzonProductModal .sheet-body::-webkit-scrollbar {
    width: 0;
    background: transparent;
  }

  .copy-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 12px;
    border:1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    background:#fafafa;
  }
  .copy-row .val{
    max-width: 70%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color:#111;
  }
  
  /* Полноэкранное модальное окно редактирования WB */
  #editWbModal .sheet {
    position: absolute;
    inset: 0;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    animation: fadeIn 0.2s ease-out;
  }
  
  #editWbModal .sheet.closing {
    animation: fadeOut 0.2s ease-in forwards;
  }
  
  #editOzonModal .sheet {
    position: absolute;
    inset: 0;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    animation: fadeIn 0.2s ease-out;
  }
  #editOzonModal .sheet.closing {
    animation: fadeOut 0.2s ease-in forwards;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .45; }
  }
  .animate-pulse { animation: pulse 1.6s ease-in-out infinite; }

  .opacity-0  { opacity: 0; }
  .opacity-100 { opacity: 1; transition: opacity .3s ease; }

  #allPhotosModal .sheet {
    position: absolute;
    inset: 0;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    animation: fadeIn 0.2s ease-out;
  }
  #allPhotosModal .sheet.closing {
    animation: fadeOut 0.2s ease-in forwards;
  }

  #photoViewerModal {
    z-index: 310;
    display: none;
  }
  #photoViewerModal.show {
    display: flex;
  }
  #photoViewerModal > div:not(.backdrop) {
    position: relative;
    z-index: 311;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #000;
  }

  .product-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .product-card:hover {
    background: #f9fafb;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
  }
  
  .product-card img {
    width: 60px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
  }
  
  .pagination-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 8px;
    background: #fff;
    color: #111;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .pagination-btn:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: rgba(0,0,0,.25);
  }
  
  .pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .pagination-btn.active {
    background: #111827;
    color: #fff;
    border-color: #111827;
  }
  
  /* Скелетоны для загрузки */
  .skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
  }
  
  @keyframes skeleton-loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
  
  .skeleton-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    background: #fff;
  }
  
  .skeleton-image {
    width: 60px;
    height: 80px;
    border-radius: 8px;
    flex-shrink: 0;
  }
  
  .skeleton-text {
    height: 16px;
    border-radius: 4px;
    flex: 1;
  }
  
  .skeleton-text-small {
    height: 14px;
    border-radius: 4px;
    width: 60%;
    margin-top: 8px;
  }