/* ============================================================
   Личный кабинет — Dark Navy Immersive (эталон)
   Единый язык с формой регистрации. Роскошная типографика:
   Фирменный Euclid Circular A (display Light + текст) + Space Mono.
   Классы .wcard-* / структурные сохранены (account.js не менялся).
   Светлые опции — .pal-light / .pal-brand (переключатель).
   ============================================================ */
/* Фирменный шрифт Babiators — Euclid Circular A (Swiss Typefaces) */
/* WebXL-subset — с кириллицей (WebS был только латиница) */
@font-face{font-family:"Euclid Circular A";src:url("../assets/fonts/EuclidCircularA-Light-WebXL.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Euclid Circular A";src:url("../assets/fonts/EuclidCircularA-Regular-WebXL.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Euclid Circular A";src:url("../assets/fonts/EuclidCircularA-Medium-WebXL.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Euclid Circular A";src:url("../assets/fonts/EuclidCircularA-Semibold-WebXL.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Euclid Circular A";src:url("../assets/fonts/EuclidCircularA-Bold-WebXL.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* — тёмная navy-база (глубокая) — */
  --pg-bg:#0E1526;          /* глубокий фон */
  --pg-bg-2:#131C31;
  --pg-paper:#0E1526;
  --pg-paper-2:#151E36;     /* архивная поверхность */
  --pg-card:#18223E;        /* карточка (светлее фона для контраста) */
  --pg-card-hi:rgba(255,255,255,.045); /* верхний highlight */

  --pg-ink:#F3F1EA;         /* основной текст (тёплый белый) */
  --pg-ink-2:#B9C0D6;       /* вторичный */
  --pg-ink-3:#828CA9;       /* мета / третичный */

  --pg-line:rgba(255,255,255,.09);
  --pg-line-2:rgba(255,255,255,.14);

  --pg-accent:#7AA5F5;      /* мягкий синий на тёмном */
  --pg-accent-ink:#9DBCF8;
  --pg-warm:#FF7A4D;        /* тёплый CTA */
  --pg-warm-2:#FF9165;
  --pg-warm-ink:#fff;       /* текст на тёплой кнопке (по решению дизайна — белый) */

  --pg-ok:#43D9A3; --pg-ok-bg:rgba(67,217,163,.13);
  --pg-wait:#F2BC55; --pg-wait-bg:rgba(242,188,85,.13);
  --pg-info:#7AA5F5; --pg-info-bg:rgba(122,165,245,.13);
  --pg-bad:#FF7B7B; --pg-bad-bg:rgba(255,123,123,.13);
  --pg-mut:#8B95B4; --pg-mut-bg:rgba(139,149,180,.12);

  --pg-r:14px; --pg-r-lg:20px; --pg-r-pill:999px;
  --pg-shadow:0 1px 2px rgba(0,0,0,.35), 0 18px 44px -16px rgba(0,0,0,.6);
  --pg-shadow-hover:0 2px 6px rgba(0,0,0,.4), 0 30px 60px -20px rgba(0,0,0,.7);

  --pg-ease:cubic-bezier(.16,1,.3,1);

  /* Фирменный Euclid Circular A: display (заголовки) и текст — один гарнитур, играем весами */
  --pg-serif:"Euclid Circular A","Plus Jakarta Sans",system-ui,sans-serif;
  --pg-sans:"Euclid Circular A","Plus Jakarta Sans",system-ui,sans-serif;
  --pg-mono:"Space Mono","SFMono-Regular",monospace;

  --pg-maxw:1080px;
  --pg-gutter:clamp(16px,4vw,40px);

  --pg-topbar-bg:rgba(14,21,38,.78);
}

body{
  overflow-x:clip; /* защита от горизонтального скролла (длинные имена товаров распирали карточку на мобиле) */
  background:var(--pg-bg) !important;
  color:var(--pg-ink);
  font-family:var(--pg-sans);
  font-feature-settings:"cv05" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;margin:0;
}
.container{max-width:var(--pg-maxw);margin:0 auto;padding-inline:var(--pg-gutter);width:100%}
::selection{background:rgba(122,165,245,.28)}

/* деликатная глубина фона — один мягкий холодный ореол сверху */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(1300px 760px at 50% -30%, rgba(96,132,214,.12), transparent 60%)}
body>*{position:relative;z-index:1}

/* ===== TOPBAR ===== */
.topbar{border-bottom:1px solid var(--pg-line);background:var(--pg-topbar-bg);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  position:sticky;top:0;z-index:40;padding:0}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:70px;
  max-width:var(--pg-maxw);margin:0 auto;padding-inline:var(--pg-gutter)}
.topbar-logo img{height:30px;display:block;filter:brightness(0) invert(1)}
.topbar-right{display:flex;align-items:center;gap:12px}
.topbar-avatar{width:34px;height:34px;border-radius:var(--pg-r-pill);
  background:linear-gradient(135deg,var(--pg-accent),#5B7FD4);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:14px;text-transform:uppercase;flex:0 0 auto}
.topbar-email{font-size:14px;color:var(--pg-ink-2);font-weight:500;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-logout{font:inherit;font-size:14px;font-weight:600;color:var(--pg-ink-2);background:none;
  border:1px solid var(--pg-line-2);padding:8px 16px;border-radius:var(--pg-r-pill);cursor:pointer;transition:.2s var(--pg-ease);
  display:inline-flex;align-items:center;min-height:44px} /* touch-target ≥44px */
.topbar-logout:hover{border-color:var(--pg-ink);color:var(--pg-ink);transform:translateY(-1px)}

/* ===== HERO ===== */
.hero{padding:60px 0 32px;overflow:hidden}
.hero-decor{display:none}
.hero-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  max-width:var(--pg-maxw);margin:0 auto;padding-inline:var(--pg-gutter)}
.hero-title{font-family:var(--pg-serif);font-weight:600;
  font-size:clamp(44px,7.5vw,80px);line-height:.98;letter-spacing:-.03em;color:var(--pg-ink);margin:0 0 12px}
.hero-sub{font-size:clamp(15px,1.6vw,18px);color:var(--pg-ink-2);margin:0;max-width:46ch;line-height:1.55}
.hero .btn-primary{align-self:flex-end}
/* editorial-сводка */
/* без max-width/margin/padding-inline — родительский .container уже центрирует; дубль давал сдвиг статов +40px */
.hero-stats{display:flex;gap:0;margin-top:30px;padding-top:24px;border-top:1px solid var(--pg-line)}
.hero-stat{display:flex;flex-direction:column;gap:4px;padding-right:40px;margin-right:40px;position:relative}
.hero-stat:not(:last-child)::after{content:"";position:absolute;right:0;top:6px;bottom:6px;width:1px;background:var(--pg-line)}
.hero-stat-num{font-family:var(--pg-serif);font-weight:500;font-size:38px;line-height:1;color:var(--pg-ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hero-stat-num em{font-style:italic;color:var(--pg-warm)}
.hero-stat-num.is-zero em{color:var(--pg-ink-3);font-style:normal} /* 0 замен — нейтрально, не тревожный оранжевый */
.hero-stat-label{font-size:11.5px;color:var(--pg-ink-3);letter-spacing:.09em;text-transform:uppercase;font-weight:600}
@media (max-width:680px){.hero-stats{flex-wrap:wrap;gap:18px 0}.hero-stat{padding-right:26px;margin-right:26px}.hero-stat-num{font-size:30px}}

/* ===== BUTTONS ===== */
a.btn-primary,button.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--pg-sans);font-size:15px;font-weight:700;
  padding:13px 22px;min-height:44px;border-radius:var(--pg-r-pill);border:none;cursor:pointer;text-decoration:none;
  background:var(--pg-warm);color:var(--pg-warm-ink);box-shadow:0 6px 16px rgba(255,122,77,.24);transition:.22s var(--pg-ease)}
/* :not(:disabled) поднимает специфичность (0-3-1) выше .btn-primary:hover:not(:disabled) из components.css (0-3-0),
   иначе тот красил кнопку в тёмный на hover — кнопка «исчезала» */
a.btn-primary:hover:not(:disabled),button.btn-primary:hover:not(:disabled){background:var(--pg-warm-2);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(255,122,77,.32)}
/* «Ответить на запрос» и пр. — .btn-warning из светлой темы невидим в тёмном ЛК; переопределяем */
a.btn-warning,button.btn-warning{background:#E8A13A;color:#141C33;border:none;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px; /* touch-target ≥44px */
  box-shadow:0 6px 16px rgba(232,161,58,.24)}
/* :not(:disabled) поднимает специфичность (0-3-1) выше customer-babiators.css .btn-warning:hover:not(:disabled) (0-3-0),
   который красил фон в var(--bab-yellow) — переменной нет в тёмной теме ЛК → transparent → тёмный текст на тёмной карточке */
a.btn-warning:hover:not(:disabled),button.btn-warning:hover:not(:disabled){background:#F0AE4C;transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(232,161,58,.32)}
/* press-feedback главным кнопкам */
a.btn-primary:active:not(:disabled),button.btn-primary:active:not(:disabled),
a.btn-warning:active,button.btn-warning:active{transform:scale(.98)}
/* Клавиатурный фокус — брендовый, единый по ЛК */
a:focus-visible,button:focus-visible,.pill-tab:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--pg-accent);outline-offset:2px;border-radius:var(--pg-r-pill)}
/* focus-visible CTA: перебиваем components.css (тёмный outline был невидим на тёмном фоне) */
a.btn-primary:focus-visible,button.btn-primary:focus-visible{outline:2px solid var(--pg-accent);outline-offset:3px}
.btn-accent{font:inherit;font-weight:700;font-size:14px;padding:11px 18px;border-radius:var(--pg-r-pill);border:none;
  cursor:pointer;background:var(--pg-accent);color:#12193a;transition:.2s var(--pg-ease)}
.btn-accent:hover{background:var(--pg-accent-ink);transform:translateY(-1px)}
.btn-ghost{font:inherit;font-weight:600;font-size:14px;padding:11px 16px;border-radius:var(--pg-r-pill);
  background:none;border:1px solid var(--pg-line-2);color:var(--pg-ink-2);cursor:pointer;transition:.2s var(--pg-ease)}
.btn-ghost:hover{border-color:var(--pg-ink);color:var(--pg-ink)}

/* ===== TABS ===== */
.tabs-bar{position:sticky;top:70px;z-index:30;background:var(--pg-topbar-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--pg-line)}
.tabs-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px;flex-wrap:wrap;
  max-width:var(--pg-maxw);margin:0 auto;padding-inline:var(--pg-gutter)}
.pill-tabs{display:flex;gap:2px;background:rgba(255,255,255,.04);padding:4px;border-radius:var(--pg-r-pill);
  border:1px solid var(--pg-line);overflow-x:auto;scrollbar-width:none}
.pill-tabs::-webkit-scrollbar{display:none}
.pill-tab{font:inherit;font-size:13.5px;font-weight:600;color:var(--pg-ink-3);background:none;border:none;
  padding:9px 16px;border-radius:var(--pg-r-pill);cursor:pointer;white-space:nowrap;transition:.2s var(--pg-ease);
  display:inline-flex;align-items:center;min-height:44px} /* touch-target ≥44px (WCAG 2.5.5) */
.pill-tab:hover{color:var(--pg-ink)}
.pill-tab--active,.pill-tab[aria-selected="true"]{background:rgba(255,255,255,.10);color:var(--pg-ink)}
.tabs-updated{font-size:12px;color:var(--pg-ink-3);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ===== CARDS GRID ===== */
.main{padding:34px 0 72px;min-height:50vh}
/* Крупные карточки в колонку — обычно 1–3 гарантии, просторно на десктопе */
/* карточки на всю ширину контейнера — выровнены с hero/табами (был max-width:860 + центрирование → уже и сдвинуты) */
.cards{display:grid;grid-template-columns:1fr;gap:18px}
/* Режим 1 гарантии (91% покупателей): единственная карточка — фокус. Поднимаем к заголовку, фото крупнее */
.mode-single .hero{padding:44px 0 16px} /* меньше пустоты между шапкой и единственной карточкой (было 60/32) */
/* обёртка hero-stats держала ~48px пустоты даже пустая; в режиме 1 гарантии статы не показываются (нужно ≥3) — схлопываем */
.mode-single .hero>.container:last-child{display:none}
.mode-single .main{padding-top:12px}
.mode-single .wcard-product-img{width:140px;height:140px}
@media(max-width:560px){.mode-single .wcard-product-img{width:96px;height:96px}}
/* Одна доминантная CTA: «Заменить» (в карточке) — акцент, «Зарегистрировать очки» в шапке → второстепенная (ghost) */
.mode-single .hero .btn-primary{background:none;color:var(--pg-ink-2);border:1px solid var(--pg-line-2);box-shadow:none}
.mode-single .hero .btn-primary:hover:not(:disabled){background:rgba(255,255,255,.06);color:var(--pg-ink);border-color:var(--pg-ink);box-shadow:none}
body.pal-light.mode-single .hero .btn-primary:hover:not(:disabled),body.pal-brand.mode-single .hero .btn-primary:hover:not(:disabled){background:rgba(0,0,0,.04)}
.cards[hidden]{display:none}

/* ===== WCARD ===== */
.wcard{position:relative;background:var(--pg-card);border:1px solid var(--pg-line);border-radius:var(--pg-r-lg);
  box-shadow:var(--pg-shadow);
  transition:transform .3s var(--pg-ease),box-shadow .3s var(--pg-ease),border-color .3s var(--pg-ease);
  display:flex;flex-direction:column;animation:pg-rise .55s var(--pg-ease) both}
/* зоны карточки: инфо + статус/действие */
.wcard-main{padding:26px 28px;display:flex;flex-direction:column;gap:16px;min-width:0}
.wcard-side{padding:18px 26px 24px;display:flex;flex-direction:column;gap:16px}
.wcard-side:empty{display:none}
@media(min-width:720px){
  .wcard{display:grid;grid-template-columns:1fr minmax(230px,300px)}
  .wcard-main{padding:28px 30px 28px 34px;justify-content:flex-start}
  .wcard-side{padding:28px 30px;border-left:1px solid var(--pg-line);justify-content:center}
  .wcard:has(.wcard-side:empty){grid-template-columns:1fr}
  /* правая зона уже отделена разделителем — нейтральная подсказка без своей рамки/фона (не «карточка в карточке») */
  .wcard-side .wcard-hint{background:none;border:none;padding:0}
}
.wcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 var(--pg-card-hi)}
@media (hover:hover){.wcard:hover{transform:translateY(-3px);box-shadow:var(--pg-shadow-hover);border-color:var(--pg-line-2)}}
.wcard::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;border-radius:0 3px 3px 0;background:var(--pg-line-2)}
.wcard--active::before{background:var(--pg-ok);box-shadow:0 0 14px -2px var(--pg-ok)}
.wcard--pending::before,.wcard--info::before,.wcard--info_requested::before{background:var(--pg-wait);box-shadow:0 0 14px -2px var(--pg-wait)}
.wcard--in_replacement::before{background:var(--pg-info);box-shadow:0 0 14px -2px var(--pg-info)}
.wcard--used::before{background:var(--pg-mut)}
.wcard--expired::before,.wcard--rejected::before{background:var(--pg-bad);box-shadow:0 0 14px -2px var(--pg-bad)}
.wcard--used,.wcard--expired{background:var(--pg-paper-2);box-shadow:none}
.wcard--used .wcard-title,.wcard--expired .wcard-title{color:var(--pg-ink-2)}
@media (hover:hover){.wcard--used:hover,.wcard--expired:hover{transform:none;box-shadow:none;border-color:var(--pg-line)}
  .wcard:hover::before{top:16px;bottom:16px}}

.wcard-product-row{display:flex;gap:18px;align-items:stretch}
/* крупное фото очков: contain (очки целиком) на светлом фоне, не обрезаем.
   Тянется по высоте текстовой колонки рядом (align-self:stretch), min-height — чтобы
   не схлопывалось при коротком тексте */
.wcard-product-img{width:140px;height:auto;min-height:132px;align-self:stretch;border-radius:18px;object-fit:contain;padding:9px;
  background:linear-gradient(160deg,#fff,#EEF1F7);flex:0 0 auto;box-shadow:inset 0 0 0 1px var(--pg-line)}
/* Плейсхолдер-силуэт (нет фото товара) — приглушённый, чтобы не спорить с реальными фото */
.wcard-product-img--placeholder{opacity:.34;padding:22px;filter:saturate(.2)}
.wcard-product-info{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:0}
/* Статус — рядом с фото, над названием */
.wcard-product-info>.wcard-badge{margin-bottom:12px}
@media(max-width:560px){.wcard-product-img{width:92px;height:92px;border-radius:14px}.wcard-product-row{gap:13px}
  .wcard-product-info>.wcard-badge{margin-bottom:9px}}
.wcard-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.wcard-header-left{min-width:0}
.wcard-title{font-family:var(--pg-serif);font-weight:600;font-size:clamp(18px,4.2vw,21px);line-height:1.2;letter-spacing:-.015em;color:var(--pg-ink);text-wrap:balance;overflow-wrap:break-word;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wcard-specs{font-size:13.5px;color:var(--pg-ink-2);line-height:1.4;margin-top:5px;overflow-wrap:break-word}
.wcard-sku{font-family:var(--pg-mono);font-size:11px;color:var(--pg-ink-3);margin-top:6px;letter-spacing:.04em}
/* Мобайл: заголовку 3 строки, чтобы длинная модель влезала целиком (после базового правила — иначе перебьётся каскадом) */
@media(max-width:560px){.wcard-title{font-size:17px;-webkit-line-clamp:3}}

/* ===== BADGE ===== */
/* Статус — первым элементом карточки, прижат влево-вверх (над фото и названием) */
.wcard-badge{align-self:flex-start;flex:0 0 auto;font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:5px 11px;border-radius:var(--pg-r-pill);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid transparent}
.wcard-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.wcard-badge--active{color:var(--pg-ok);background:var(--pg-ok-bg)}
.wcard-badge--pending,.wcard-badge--info,.wcard-badge--info_requested{color:var(--pg-wait);background:var(--pg-wait-bg)}
.wcard-badge--in_replacement{color:var(--pg-info);background:var(--pg-info-bg)}
.wcard-badge--used{color:var(--pg-mut);background:var(--pg-mut-bg)}
.wcard-badge--expired,.wcard-badge--rejected{color:var(--pg-bad);background:var(--pg-bad-bg)}

/* ===== META ===== */
.wcard-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px}
.wcard-meta-item{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--pg-ink-2);font-variant-numeric:tabular-nums}
.wcard-meta-item strong{color:var(--pg-ink);font-weight:600}
.wcard-meta-icon{width:15px;height:15px;color:var(--pg-ink-3);flex:0 0 auto}
.wcard-child{font-size:13.5px;color:var(--pg-ink-2)}
.wcard-child strong{color:var(--pg-ink);font-weight:600}
.wcard-expires{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--pg-ok);font-variant-numeric:tabular-nums}
.wcard-expires svg{width:16px;height:16px}
.wcard-hint{font-size:13.5px;color:var(--pg-ink-2);line-height:1.5;padding:12px 14px;background:rgba(255,255,255,.03);
  border-radius:12px;border:1px solid var(--pg-line)}
.wcard-info{padding:13px 15px;border-radius:12px;font-size:13.5px;line-height:1.5}
.wcard-info--rejection{background:var(--pg-bad-bg);color:var(--pg-bad)}
.wcard-info--clarification{background:var(--pg-wait-bg);color:var(--pg-wait)}
.wcard-info-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;opacity:.85}
/* Длинный текст оператора не должен раздувать карточку: 4 строки, полный текст — в модалке ответа */
.wcard-info-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* щит слева + текст рядом (была вертикаль: щит одиноко вверху, текст внизу, пустота между) */
.wcard-guarantee{display:flex;flex-direction:row;align-items:center;gap:10px;padding:12px 14px;background:var(--pg-ok-bg);border-radius:14px;font-size:13.5px;line-height:1.3;color:var(--pg-ok)}
.wcard-guarantee-ic{flex:0 0 auto}

/* ===== STEPS ===== */
.wcard-steps{display:flex;gap:6px;padding:4px 0}
.wcard-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.wcard-step:not(:last-child)::after{content:"";position:absolute;top:11px;left:calc(50% + 14px);right:calc(-50% + 14px);height:2px;background:var(--pg-line-2);border-radius:2px}
.wcard-step--done:not(:last-child)::after{background:var(--pg-ok)}
.wcard-step-dot{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.05);color:transparent;
  display:grid;place-items:center;border:2px solid var(--pg-line-2);z-index:1;transition:.3s var(--pg-ease)}
.wcard-step-dot svg{width:12px;height:12px}
.wcard-step--done .wcard-step-dot{background:var(--pg-ok);border-color:var(--pg-ok);color:#0d2a20}
.wcard-step--current .wcard-step-dot{background:var(--pg-card);border-color:var(--pg-ok);color:var(--pg-ok);box-shadow:0 0 0 4px var(--pg-ok-bg),0 0 16px -2px var(--pg-ok)}
.wcard-step-label{font-size:11px;color:var(--pg-ink-3);text-align:center;line-height:1.3;letter-spacing:.01em}
.wcard-step--done .wcard-step-label,.wcard-step--current .wcard-step-label{color:var(--pg-ink-2);font-weight:600}

/* ===== CLAIM ===== */
/* без линии сверху — блок и так отделён отступом (линия читалась как «зачем это тут») */
.wcard-claim{padding-top:4px;display:flex;flex-direction:column;gap:12px}
.wcard-claim-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wcard-claim-title{font-weight:700;font-size:14px;color:var(--pg-ink)}
.wcard-claim-desc{font-size:13px;color:var(--pg-ink-2);line-height:1.5}
.wcard-claim-note{font-size:12.5px;color:var(--pg-ink-3)}
.wcard-claim-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* Трек-номер + ссылка отслеживания (после отгрузки) */
/* Номер и есть ссылка — в одну строку, а не двумя элементами друг под другом */
.wcard-track{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;padding:11px 13px;background:rgba(255,255,255,.03);border:1px solid var(--pg-line);border-radius:12px}
.wcard-track-label{font-size:12.5px;color:var(--pg-ink-2)}
.wcard-track-num{font-size:13.5px;color:var(--pg-ink);font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;user-select:all}
.wcard-track-link{font-size:13.5px;font-weight:600;color:var(--pg-info);letter-spacing:.02em;font-variant-numeric:tabular-nums;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.25)}
.wcard-track-link:hover{color:var(--pg-accent-ink);text-decoration-color:currentColor}
.wcard-track-link:focus-visible{outline:2px solid var(--pg-info);outline-offset:3px;border-radius:4px}

/* Валидность гарантии — нейтральная инфо-строка (не дублирует «активный» бейдж) */
/* Блок «до когда можно заменить» — понятная иерархия: главная строка + приглушённый остаток дней */
.wcard-validity{display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums;
  padding-left:14px;position:relative}
.wcard-validity::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:2px;
  background:var(--pg-good,#1F9D6B);opacity:.55}
.wcard-validity-main{font-size:14px;font-weight:600;color:var(--pg-ink)}
.wcard-validity-sub{font-size:12.5px;color:var(--pg-ink-3)}

/* Единое действие карточки: свой класс, не пересекается с .btn-* (нет войны специфичности/hover-багов).
   Полная ширина панели → одинаковая ширина у «Заменить»/«Ответить»/«Подать заново» */
.wcard-actions{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.wcard-cta{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:48px;
  font-family:var(--pg-sans);font-size:15px;font-weight:700;text-decoration:none;
  padding:13px 22px;border-radius:var(--pg-r-pill);border:none;cursor:pointer;transition:.2s var(--pg-ease)}
.wcard-cta--primary{background:var(--pg-warm);color:var(--pg-warm-ink);box-shadow:0 6px 16px rgba(255,122,77,.24)}
/* color в :hover обязателен — иначе base.css a:hover{color} (0-1-1) перекрасит текст ссылки-CTA */
.wcard-cta--primary:hover{background:var(--pg-warm-2);color:var(--pg-warm-ink);transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,122,77,.32)}
.wcard-cta--warning{background:#E8A13A;color:#141C33;box-shadow:0 6px 16px rgba(232,161,58,.24)}
.wcard-cta--warning:hover{background:#F0AE4C;color:#141C33;transform:translateY(-2px);box-shadow:0 10px 24px rgba(232,161,58,.32)}
.wcard-cta:active{transform:scale(.98)}
.wcard-cta:focus-visible{outline:2px solid var(--pg-accent);outline-offset:3px}
.wcard-cta-note{font-size:12px;color:var(--pg-ink-3);text-align:center;line-height:1.4}
/* Второстепенная ссылка на историю переписки */
.wcard-thread-link{font:inherit;font-size:13.5px;font-weight:600;color:var(--pg-ink-2);background:none;
  border:1px solid var(--pg-line-2);border-radius:var(--pg-r-pill);padding:10px 16px;min-height:44px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:.2s var(--pg-ease)}
.wcard-thread-link:hover{color:var(--pg-ink);border-color:var(--pg-ink)}

/* ===== STATES ===== */
.state-loading[hidden],.state-error[hidden],.state-empty[hidden]{display:none}
.skeleton-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px}
.skeleton-card{background:var(--pg-card);border:1px solid var(--pg-line);border-radius:var(--pg-r-lg);padding:24px;display:flex;flex-direction:column;gap:14px}
.skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.12) 37%,rgba(255,255,255,.05) 63%);background-size:400% 100%;animation:pg-shimmer 1.4s ease infinite}
.skeleton-line--title{height:20px;width:60%}
.skeleton-line--short{width:40%}
.empty-card{max-width:440px;margin:40px auto;text-align:center;background:var(--pg-card);border:1px solid var(--pg-line);border-radius:var(--pg-r-lg);padding:48px 32px;box-shadow:var(--pg-shadow)}
.empty-icon{margin-bottom:20px;display:flex;justify-content:center}
.empty-card h2{font-family:var(--pg-serif);font-weight:600;font-size:28px;color:var(--pg-ink);margin:0 0 10px;letter-spacing:-.015em}
.empty-card p{font-size:15px;color:var(--pg-ink-2);line-height:1.55;margin:0 0 24px}
/* Компактный empty-state при пустом фильтре списка */
.empty-card--filter{max-width:380px;margin:28px auto;padding:32px 28px}
.empty-card-icon{display:flex;justify-content:center;color:var(--pg-ink-3);margin-bottom:14px}
.empty-card-text{font-size:15px;color:var(--pg-ink-2);margin:0 0 18px}
.empty-card-btn{padding:9px 20px;border-radius:999px;border:1px solid var(--pg-line-2);background:transparent;color:var(--pg-ink);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s ease}
.empty-card-btn:hover{background:rgba(255,255,255,.06)}

/* ===== FOOTER ===== */
.account-footer{border-top:1px solid var(--pg-line);padding:30px 0;margin-top:44px}
.account-footer p{font-size:13.5px;color:var(--pg-ink-3);text-align:center;margin:0}
.account-footer a{color:var(--pg-ink-2);font-weight:600;text-decoration:none}
.account-footer a:hover{color:var(--pg-warm)}

/* ===== MOTION ===== */
@keyframes pg-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pg-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@keyframes pg-pulse{0%,100%{box-shadow:0 0 0 0 currentColor}50%{box-shadow:0 0 11px 1px currentColor}}
.wcard-badge--in_replacement::before{animation:pg-pulse 1.9s ease-in-out infinite}
.cards .wcard:nth-child(1){animation-delay:.02s}.cards .wcard:nth-child(2){animation-delay:.08s}
.cards .wcard:nth-child(3){animation-delay:.14s}.cards .wcard:nth-child(4){animation-delay:.20s}
.cards .wcard:nth-child(5){animation-delay:.26s}.cards .wcard:nth-child(n+6){animation-delay:.30s}

/* ===== RESPONSIVE ===== */
@media (max-width:680px){
  .hero{padding:38px 0 24px}
  .hero-inner{flex-direction:column;align-items:flex-start;gap:18px}
  .hero .btn-primary{align-self:stretch;justify-content:center}
  .cards,.skeleton-cards{grid-template-columns:1fr}
  .topbar-email{display:none}
  .wcard-side .btn-primary,.wcard-side .btn-warning{align-self:stretch;justify-content:center}
}
@media (max-width:400px){.wcard{padding:20px 20px 20px 24px}.wcard-step-label{font-size:10px}}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion:reduce){
  .wcard,.skeleton-line,.wcard-badge--in_replacement::before{animation:none !important}
  .wcard{opacity:1;transform:none}
  a.btn-primary:hover,button.btn-primary:hover,.wcard:hover,.topbar-logout:hover{transform:none}
}

/* ============================================================
   СВЕТЛЫЕ ОПЦИИ (переключатель): .pal-light / .pal-brand
   ============================================================ */
body.pal-light,body.pal-brand{
  --pg-bg:#F6F3EB;--pg-paper:#F6F3EB;--pg-paper-2:#FBF9F3;--pg-card:#FFFFFF;--pg-card-hi:transparent;
  --pg-ink:#1A1714;--pg-ink-2:#5E574F;--pg-ink-3:#938B7F;
  --pg-line:#E7E1D3;--pg-line-2:#EFEADD;
  --pg-accent:#003DA5;--pg-accent-ink:#0A2A63;--pg-warm:#E1552B;--pg-warm-2:#C6421C;--pg-warm-ink:#fff;
  --pg-ok:#1F7A5C;--pg-ok-bg:#E7F3EE;--pg-wait:#B4791A;--pg-wait-bg:#FBF1DC;
  --pg-info:#2E61AE;--pg-info-bg:#E9F0FB;--pg-bad:#B23A3A;--pg-bad-bg:#F8EAEA;--pg-mut:#7C756A;--pg-mut-bg:#F0ECE1;
  --pg-shadow:0 1px 2px rgba(26,23,20,.04),0 12px 32px -12px rgba(26,23,20,.1);
  --pg-shadow-hover:0 2px 4px rgba(26,23,20,.05),0 22px 48px -16px rgba(26,23,20,.16);
  --pg-topbar-bg:rgba(246,243,235,.84);
}
body.pal-brand{--pg-bg:#F0EFDD;--pg-paper:#F0EFDD;--pg-line:#E3E0D0;--pg-accent:#003DA5;--pg-warm:#FF6A39;
  --pg-ok:#00918F;--pg-ok-bg:#DDF2F0;--pg-bad:#E13E4A;--pg-bad-bg:#FCE7E9;--pg-topbar-bg:rgba(240,239,221,.86)}
body.pal-light .topbar-logo img,body.pal-brand .topbar-logo img{filter:none}
body.pal-light::before,body.pal-brand::before{background:radial-gradient(1200px 600px at 80% -10%,rgba(0,61,165,.05),transparent 60%),radial-gradient(900px 500px at -5% 110%,rgba(225,85,43,.04),transparent 55%)}
body.pal-light .wcard::after,body.pal-brand .wcard::after{box-shadow:none}
body.pal-light .wcard--active::before,body.pal-brand .wcard--active::before,
body.pal-light .wcard--in_replacement::before,body.pal-brand .wcard--in_replacement::before,
body.pal-light .wcard--pending::before,body.pal-brand .wcard--pending::before,
body.pal-light .wcard--expired::before,body.pal-brand .wcard--expired::before,
body.pal-light .wcard-badge::before,body.pal-brand .wcard-badge::before{box-shadow:none}

/* ============================================================
   Inline-баннер (замена нативным alert/confirm) — тёмная тема ЛК
   ============================================================ */
.payment-banner{
  display:flex;align-items:flex-start;gap:14px;
  margin:0 0 18px;padding:16px 18px;
  background:var(--pg-card);border:1px solid var(--pg-line-2);
  border-left:4px solid var(--pg-accent);border-radius:14px;
  color:var(--pg-ink);font-size:15px;line-height:1.45;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  animation:banner-in .28s cubic-bezier(.16,1,.3,1);
}
.payment-banner>div:first-child{flex:1 1 auto}
.payment-banner strong{color:var(--pg-ink)}
.payment-banner--success{border-left-color:#39C07E}
.payment-banner--fail{border-left-color:#F0562A}
.payment-banner--warn{border-left-color:var(--pg-warm,#FF7A4D)}
@keyframes banner-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.payment-banner{animation:none}}

.payment-banner-close{
  flex:0 0 auto;background:none;border:none;cursor:pointer;
  color:var(--pg-ink-3);padding:2px;border-radius:6px;line-height:0;
}
.payment-banner-close:hover{color:var(--pg-ink)}

.banner-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.banner-btn{
  padding:9px 18px;border-radius:999px;border:1px solid var(--pg-line-2);
  background:transparent;color:var(--pg-ink);font-size:14px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:background .15s ease,border-color .15s ease;
}
.banner-btn:hover{background:rgba(255,255,255,.06)}
.banner-btn--primary{background:#FF6B35;border-color:#FF6B35;color:#fff}
.banner-btn--primary:hover{background:#F0562A}

/* ============================================================
   Переписка с оператором — модалка-чат (тёмная тема ЛК)
   ============================================================ */
.chat-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.chat-backdrop{position:absolute;inset:0;background:rgba(6,10,20,.72);backdrop-filter:blur(2px)}
.chat-box{position:relative;display:flex;flex-direction:column;width:min(620px,96vw);max-height:min(760px,90vh);
  background:var(--pg-card);border:1px solid var(--pg-line-2);border-radius:var(--pg-r-lg);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.75);overflow:hidden}
.chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:18px 20px;border-bottom:1px solid var(--pg-line);flex:none}
.chat-head-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.chat-title{font-family:var(--pg-serif);font-weight:600;font-size:19px;color:var(--pg-ink)}
.chat-sub{font-size:13px;color:var(--pg-ink-3);overflow:hidden;text-overflow:ellipsis}
.chat-close{background:none;border:none;color:var(--pg-ink-3);font-size:28px;line-height:1;cursor:pointer;padding:0 4px;flex:none}
.chat-close:hover{color:var(--pg-ink)}

.chat-thread{flex:1;min-height:120px;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.chat-msg{max-width:82%;display:flex;flex-direction:column;gap:5px}
.chat-msg--operator{align-self:flex-start}
.chat-msg--customer{align-self:flex-end;align-items:flex-end}
.chat-bubble{padding:12px 15px;border-radius:16px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-msg--operator .chat-bubble{background:var(--pg-wait-bg);color:var(--pg-wait);border-bottom-left-radius:5px}
.chat-msg--customer .chat-bubble{background:rgba(255,255,255,.07);color:var(--pg-ink);border-bottom-right-radius:5px}
.chat-meta{font-size:11.5px;color:var(--pg-ink-3);font-variant-numeric:tabular-nums}
.chat-file{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--pg-info);text-decoration:none}
.chat-file:hover{color:var(--pg-accent-ink)}
.chat-empty{margin:auto;color:var(--pg-ink-3);font-size:14px;text-align:center}

.chat-form{flex:none;padding:16px 20px 18px;border-top:1px solid var(--pg-line);display:flex;flex-direction:column;gap:10px}
.chat-input{width:100%;resize:vertical;min-height:64px;font:inherit;font-size:15px;color:var(--pg-ink);
  background:rgba(255,255,255,.04);border:1px solid var(--pg-line-2);border-radius:12px;padding:12px 14px}
.chat-input::placeholder{color:var(--pg-ink-3)}
.chat-input:focus{outline:none;border-color:var(--pg-accent);box-shadow:0 0 0 3px rgba(122,165,245,.18)}
.chat-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chat-attach{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--pg-ink-2);
  cursor:pointer;padding:8px 12px;border:1px dashed var(--pg-line-2);border-radius:var(--pg-r-pill);min-height:44px}
.chat-attach:hover{color:var(--pg-ink);border-color:var(--pg-ink)}
.chat-send{font:inherit;font-size:15px;font-weight:700;min-height:44px;padding:11px 24px;border:none;cursor:pointer;
  border-radius:var(--pg-r-pill);background:var(--pg-warm);color:var(--pg-warm-ink);transition:.2s var(--pg-ease)}
.chat-send:hover:not(:disabled){background:var(--pg-warm-2);color:var(--pg-warm-ink)}
.chat-send:disabled{opacity:.5;cursor:not-allowed}
.chat-error{font-size:13.5px;font-weight:600;color:var(--pg-bad)}
.chat-note{font-size:13px;color:var(--pg-ink-3);text-align:center}
@media(max-width:560px){.chat-modal{padding:0}.chat-box{width:100vw;max-height:100vh;height:100vh;border-radius:0;border:none}
  .chat-msg{max-width:92%}}

/* Мини-спиннер в кнопке (aria-busy) */
.btn-spinner{
  display:inline-block;width:15px;height:15px;margin-right:8px;vertical-align:-2px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:btn-spin .7s linear infinite;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn-spinner{animation-duration:1.4s}}