/* ═══════════════════════════════════════════════════════
   БІЗНЕС ПАРТНЕР — Особистий кабінет
   Editorial Luxury · Navy + Amber · Playfair / Plus Jakarta
   (використовує токени та кнопки з main.css)
═══════════════════════════════════════════════════════ */

/* ── База ── */
body.kb { background: var(--ow); color: var(--n950); }

/* ═══════════════════════════════════════════
   АВТОРИЗАЦІЯ — центрована картка над navy-фото
═══════════════════════════════════════════ */
.auth {
  position: relative; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 3.25rem 1.25rem 1.75rem; overflow-x: hidden;
  background: var(--n950);
}
.auth__photo {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(150deg, oklch(15% 0.045 258 / 0.94) 0%, oklch(15% 0.045 258 / 0.80) 55%, oklch(18% 0.055 258 / 0.72) 100%),
    url('../img/biznes-centr.jpg');
  background-size: cover; background-position: center 42%;
}
.auth__photo::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 12%, oklch(70% 0.185 50 / 0.20) 0%, transparent 62%);
}
.auth__grid {
  position: absolute; inset: 0; z-index: 1;
  background-image: linear-gradient(oklch(100% 0 0 / 0.028) 1px, transparent 1px),
    linear-gradient(90deg, oklch(100% 0 0 / 0.028) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
.auth__back {
  position: absolute; top: 1.75rem; left: 1.75rem; z-index: 5;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; font-weight: 600; color: oklch(72% 0.032 258);
  transition: color 0.2s;
}
.auth__back:hover { color: var(--w); }
.auth__back svg { width: 16px; height: 16px; }

.auth__wrap { position: relative; z-index: 3; width: 100%; max-width: 452px; }

/* Бренд над карткою */
.auth__brand { text-align: center; margin-bottom: 1.25rem; }
.auth__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 3.4vw, 1.9375rem); font-weight: 400; line-height: 1.14;
  letter-spacing: -0.028em; color: var(--w); margin-bottom: 0.4375rem;
}
.auth__title em { font-style: italic; color: var(--a400); }
.auth__sub { font-size: 0.875rem; color: oklch(72% 0.033 258); line-height: 1.55; max-width: 360px; margin: 0 auto; }

/* Картка (double-bezel light) */
.auth__card { padding: 5px; }
.auth__card .card-core { padding: 1.5rem 1.5rem 1.5rem; }

/* Сегментований перемикач (pill) */
.seg {
  display: flex; gap: 4px; padding: 5px;
  background: var(--cr2); border: 1px solid var(--bd); border-radius: var(--r-pill);
  margin-bottom: 1.25rem;
}
.seg__btn {
  flex: 1; text-align: center; font-size: 0.875rem; font-weight: 600;
  color: var(--n500); padding: 0.625rem; border-radius: var(--r-pill);
  transition: color 0.22s var(--eo), background 0.22s var(--eo), box-shadow 0.22s;
}
.seg__btn.active { color: var(--n950); background: var(--w); box-shadow: var(--shadow-sm); }

/* Форми */
.aform { display: none; }
.aform.active { display: block; animation: afade 0.4s var(--ee); }
@keyframes afade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.aform__h { font-family: 'Playfair Display', serif; font-size: 1.375rem; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 0.25rem; }
.aform__p { font-size: 0.8125rem; color: var(--n500); margin-bottom: 1.25rem; }

/* Поля */
.field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.875rem; }
.field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
.field label { font-size: 0.75rem; font-weight: 600; color: var(--n800); }
.field label .req { color: var(--a600); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 0.9375rem; color: var(--n950);
  background: var(--cr); border: 1px solid var(--bd2); border-radius: var(--r-sm);
  padding: 0.75rem 0.875rem; width: 100%;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--a500); background: var(--w);
  box-shadow: 0 0 0 3px oklch(70% 0.185 50 / 0.14);
}
.field input::placeholder, .field textarea::placeholder { color: var(--n400); }
.field.err input, .field.err select, .field.err textarea { border-color: oklch(58% 0.20 25); background: oklch(97% 0.02 25); }
.field__err { font-size: 0.75rem; font-weight: 600; color: oklch(55% 0.20 25); display: none; }
.field.err .field__err { display: block; }

/* Допоміжний рядок */
.aextra { display: flex; align-items: center; justify-content: space-between; margin: 0.25rem 0 1.125rem; font-size: 0.8125rem; }
.acheck { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--n600); cursor: pointer; }
.acheck input { width: 16px; height: 16px; accent-color: var(--a600); }
.alink { color: var(--a700); font-weight: 600; }
.alink:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--a400); }
.consent { display: flex; align-items: flex-start; gap: 0.5625rem; font-size: 0.75rem; line-height: 1.5; color: var(--n600); margin-bottom: 1.375rem; cursor: pointer; }
.consent input { width: 17px; height: 17px; margin-top: 1px; flex-shrink: 0; accent-color: var(--a600); }
.consent.err { color: oklch(55% 0.20 25); }
.consent a { color: var(--a700); text-decoration: underline; text-underline-offset: 2px; }
.afoot { text-align: center; margin-top: 1.375rem; font-size: 0.8125rem; color: var(--n500); }

/* Блок-кнопка */
.btn--block { width: 100%; justify-content: center; }

@media (max-width: 420px) {
  .auth { padding: 5rem 1rem 2.5rem; }
  .auth__card .card-core { padding: 1.5rem 1.25rem; }
  .field__row { grid-template-columns: 1fr; gap: 0; }
}

/* ═══════════════════════════════════════════
   ДАШБОРД
═══════════════════════════════════════════ */
.kb-top {
  position: sticky; top: 0; z-index: 50;
  background: oklch(100% 0 0 / 0.85); backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--bd);
}
.kb-top__in {
  max-width: 1180px; margin: 0 auto; padding: 0.875rem 2.25rem;
  display: flex; align-items: center; gap: 1.25rem;
}
.kb-top .logo__name { color: var(--n950); }
.kb-top .logo__sub { color: var(--n400); }

.kb-user { margin-left: auto; display: flex; align-items: center; gap: 0.875rem; }
.kb-ava {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px;
  background: var(--n900); color: var(--a400);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.01em;
  position: relative; box-shadow: var(--shadow-sm);
}
.kb-ava::after { content: ''; position: absolute; top: -4px; right: -4px; width: 13px; height: 13px; background: var(--a500); border-radius: 50%; border: 2px solid var(--w); }
.kb-user__info { text-align: right; line-height: 1.25; }
.kb-user__name { font-size: 0.8125rem; font-weight: 700; color: var(--n950); }
.kb-user__role { font-size: 0.6875rem; font-weight: 600; color: var(--a600); text-transform: uppercase; letter-spacing: 0.06em; }
.kb-logout {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--n600);
  border: 1px solid var(--bd2); border-radius: var(--r-pill);
  padding: 0.5rem 0.9375rem; background: var(--w); transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.kb-logout:hover { border-color: oklch(70% 0.15 25); color: oklch(52% 0.20 25); background: oklch(98% 0.012 25); }
.kb-logout svg { width: 15px; height: 15px; }

/* Контент */
.kb-content { max-width: 1180px; margin: 0 auto; padding: 2.5rem 2.25rem 4.5rem; }
.kb-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.5rem; align-items: start; }

/* Віджет = double-bezel */
.kb-w { padding: 6px; margin-bottom: 1.5rem; }
.kb-w:last-child { margin-bottom: 0; }
.kb-w .card-core { padding: 0; overflow: hidden; }
.kb-w__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.375rem 1.625rem 1.125rem; border-bottom: 1px solid var(--bd); }
.kb-w__head h3 { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 400; letter-spacing: -0.02em; }
.kb-w__act { font-size: 0.8125rem; font-weight: 600; color: var(--a700); display: inline-flex; align-items: center; gap: 0.3125rem; transition: gap 0.2s; }
.kb-w__act:hover { gap: 0.5rem; }
.kb-w__body { padding: 1.5rem 1.625rem; }

/* Dropzone */
.drop {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.625rem;
  border: 1.5px dashed var(--bd3); border-radius: var(--r-lg); padding: 2.25rem 1.25rem;
  background: var(--cr); cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.drop:hover { border-color: var(--a500); background: oklch(97% 0.040 65 / 0.5); }
.drop__ic { width: 54px; height: 54px; border-radius: 15px; background: var(--w); border: 1px solid var(--bd); color: var(--a600); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-xs); }
.drop__ic svg { width: 24px; height: 24px; }
.drop__t { font-size: 0.9375rem; font-weight: 600; color: var(--n900); }
.drop__t b { color: var(--a700); }
.drop__s { font-size: 0.75rem; color: var(--n400); }
.drop input { display: none; }
.drop__file { font-size: 0.8125rem; font-weight: 600; color: var(--a700); min-height: 18px; margin-top: 2px; }

/* Таблиця */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--n400); padding: 0.875rem 1.625rem; border-bottom: 1px solid var(--bd); white-space: nowrap; }
.tbl td { font-size: 0.875rem; padding: 1rem 1.625rem; border-bottom: 1px solid var(--bd); white-space: nowrap; color: var(--n800); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background 0.15s; }
.tbl tbody tr:hover { background: var(--cr); }
.tbl .num { font-weight: 600; color: var(--n950); font-variant-numeric: tabular-nums; }

/* Badge */
.badge { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 700; border-radius: var(--r-pill); padding: 0.25rem 0.6875rem; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--ok { color: var(--ok); background: var(--ok-bg); }
.badge--wait { color: var(--a700); background: oklch(70% 0.185 50 / 0.12); }
.badge--muted { color: var(--n500); background: var(--cr2); }

/* Документи (чек-лист) */
.doclist { display: flex; flex-direction: column; }
.docrow { display: flex; align-items: center; gap: 0.875rem; padding: 0.9375rem 0; border-bottom: 1px solid var(--bd); }
.docrow:last-child { border-bottom: none; }
.docrow__ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; background: var(--cr2); color: var(--n600); display: flex; align-items: center; justify-content: center; }
.docrow__ic svg { width: 18px; height: 18px; }
.docrow__main { flex: 1; min-width: 0; }
.docrow__t { font-size: 0.875rem; font-weight: 600; color: var(--n900); }
.docrow__s { font-size: 0.75rem; color: var(--n400); margin-top: 1px; }
.doc-up { font-size: 0.75rem; font-weight: 600; color: var(--a700); border: 1px solid var(--bd2); border-radius: var(--r-pill); padding: 0.4375rem 0.875rem; background: var(--w); transition: border-color 0.2s, background 0.2s; }
.doc-up:hover { border-color: var(--a400); background: oklch(97% 0.040 65 / 0.6); }
.doc-ok { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.75rem; font-weight: 700; color: var(--ok); }
.doc-ok svg { width: 15px; height: 15px; }

/* Звернення */
.appeals { display: flex; flex-direction: column; }
.appeal { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1rem 0; border-bottom: 1px solid var(--bd); }
.appeal:last-child { border-bottom: none; }
.appeal__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; background: var(--ok); }
.appeal__dot.wait { background: var(--a500); }
.appeal__main { flex: 1; min-width: 0; }
.appeal__t { font-size: 0.875rem; font-weight: 600; color: var(--n900); line-height: 1.4; }
.appeal__s { font-size: 0.75rem; color: var(--n400); margin-top: 2px; }
.appeal__st { font-size: 0.6875rem; font-weight: 700; white-space: nowrap; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(16px); animation: kup 0.7s var(--ee) forwards; }
@keyframes kup { to { opacity: 1; transform: none; } }

/* ── Модалка ── */
.kmodal { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 1.25rem; }
.kmodal.open { display: flex; }
.kmodal__scrim { position: absolute; inset: 0; background: oklch(15% 0.045 258 / 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: mfade 0.28s var(--ee); }
@keyframes mfade { from { opacity: 0; } to { opacity: 1; } }
.kmodal__dialog { position: relative; z-index: 1; width: 100%; max-width: 480px; padding: 6px; animation: mpop 0.34s var(--ee); }
@keyframes mpop { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
.kmodal__dialog .card-core { padding: 0; max-height: 90vh; display: flex; flex-direction: column; }
.kmodal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.625rem 1.625rem 0.5rem; }
.kmodal__head h3 { font-family: 'Playfair Display', serif; font-size: 1.375rem; font-weight: 400; letter-spacing: -0.02em; }
.kmodal__head p { font-size: 0.8125rem; color: var(--a700); font-weight: 600; margin-top: 0.25rem; }
.kmodal__x { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--bd2); background: var(--w); color: var(--n500); display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, color 0.2s; }
.kmodal__x:hover { border-color: oklch(70% 0.15 25); color: oklch(52% 0.20 25); }
.kmodal__x svg { width: 16px; height: 16px; }
.kmodal__body { padding: 1.25rem 1.625rem; overflow-y: auto; }
.kmodal__body .field:last-child { margin-bottom: 0; }
.kmodal__foot { padding: 0.5rem 1.625rem 1.625rem; display: flex; gap: 0.75rem; }
.kmodal__foot .btn { flex: 1; }
.kmodal__note { font-size: 0.8125rem; line-height: 1.55; color: var(--n600); background: var(--cr); border: 1px solid var(--bd); border-left: 3px solid var(--a500); border-radius: var(--r-sm); padding: 0.875rem 1rem; margin-bottom: 1rem; }
.kmodal__ok { text-align: center; padding: 1rem 0 0.5rem; }
.kmodal__ok-ic { width: 64px; height: 64px; margin: 0 auto 1.125rem; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: flex; align-items: center; justify-content: center; }
.kmodal__ok-ic svg { width: 30px; height: 30px; }
.kmodal__ok h3 { font-family: 'Playfair Display', serif; font-size: 1.375rem; font-weight: 400; margin-bottom: 0.5rem; }
.kmodal__ok p { font-size: 0.9375rem; line-height: 1.6; color: var(--n600); }

/* ── Респонсив ── */
@media (max-width: 940px) {
  .kb-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kb-top__in { padding: 0.75rem 1.25rem; }
  .kb-user__info { display: none; }
  .kb-logout span { display: none; }
  .kb-logout { padding: 0.5rem; }
  .kb-content { padding: 1.75rem 1.25rem 3rem; }
  .kb-w__body { padding: 1.25rem; }
  .kb-w__head { padding: 1.125rem 1.25rem 1rem; }
  .tbl th, .tbl td { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .aform.active { animation: none; opacity: 1; transform: none; }
}