/* ─────────────────────────────────────────────────────────────
   Духовное попечение — Liquid Glass, ecclesial edition
   Пергамент + сияние (бордо/золото/slate), серифные заголовки,
   отточенное стекло. Без внешних шрифтов (надёжность в РФ).
   ───────────────────────────────────────────────────────────── */
:root{
  --ink:#2b2622; --ink-strong:#1c1814; --ink-soft:#5b5249; --muted:#6f665b;
  --line:rgba(60,45,35,.10); --line-soft:rgba(60,45,35,.06);
  --glass:rgba(255,253,250,.72); --glass-strong:rgba(255,253,250,.85);
  --glass-bar:rgba(252,249,244,.66);
  --accent:#883a46; --accent-deep:#6f2c38; --accent-soft:rgba(136,58,70,.12);
  --gold:#b08948; --gold-soft:rgba(176,137,72,.16);
  --ok:#3f7d5a; --warn:#9a6b00; --danger:#b04250;
  --radius:22px; --radius-sm:14px;
  --shadow:0 1px 2px rgba(40,28,20,.05), 0 14px 38px rgba(40,28,20,.09);
  --shadow-lg:0 2px 8px rgba(40,28,20,.07), 0 26px 60px rgba(40,28,20,.14);
  --hl:inset 0 1px 0 rgba(255,255,255,.7);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink); font-size:16px; line-height:1.55; -webkit-text-size-adjust:100%;
  min-height:100vh; background:#f2ede4;
}
/* градиент — отдельным fixed-слоем: background-attachment:fixed не работает на iOS
   и вызывает полный repaint на скролле в Android */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 820px at 6% -10%, rgba(136,58,70,.14), transparent 55%),
    radial-gradient(1040px 760px at 102% -4%, rgba(176,137,72,.13), transparent 52%),
    radial-gradient(940px 900px at 50% 116%, rgba(70,84,120,.10), transparent 55%),
    linear-gradient(168deg, #f7f3ec 0%, #f0ebe1 52%, #f3eee7 100%);
}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-deep); text-decoration:underline; text-underline-offset:2px}

/* видимый фокус для тача/клавиатуры */
.btn:focus-visible, a:focus-visible,
.chips label:has(input:focus-visible), .dedup-member .opt:has(input:focus-visible){
  outline:3px solid var(--accent); outline-offset:2px; border-radius:8px;
}

/* fallback: старые Android WebView / Chrome <76 без backdrop-filter — стекло станет почти непрозрачным */
@supports not (backdrop-filter: blur(1px)){
  :root{--glass:rgba(255,253,250,.96); --glass-strong:#fffdfa; --glass-bar:rgba(252,249,244,.97)}
  .dedup-member{background:rgba(255,255,255,.92)}
}

/* ───── top bar ───── */
header.topbar{
  position:sticky; top:0; z-index:30; background:var(--glass-bar);
  -webkit-backdrop-filter:blur(26px) saturate(180%); backdrop-filter:blur(26px) saturate(180%);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 8px 30px rgba(40,28,20,.06);
}
.topbar .inner{max-width:1060px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:12px 20px; flex-wrap:wrap}
.brand{
  font-weight:700; font-size:17px; color:var(--accent-deep);
  white-space:nowrap; display:flex; align-items:center; gap:8px; letter-spacing:.01em;
}
.brand .cross{color:var(--gold); font-size:19px; transform:translateY(-1px)}
nav.menu{display:flex; gap:4px; flex:1; flex-wrap:nowrap}
nav.menu a{
  padding:7px 12px; min-height:42px; border-radius:12px; color:var(--ink); font-weight:500; font-size:14px;
  display:flex; align-items:center; gap:5px; border:1px solid transparent; transition:.16s ease;
  white-space:nowrap;
}
/* узкий экран: меню отдельной строкой, пункты ровной сеткой БЕЗ скролла */
@media(max-width:920px){
  nav.menu{order:3; flex-basis:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:5px}
  nav.menu a{justify-content:center; padding:8px 6px; white-space:nowrap}
  .who{margin-left:auto}
}
nav.menu a:hover{background:rgba(255,255,255,.6); text-decoration:none; border-color:var(--line-soft)}
nav.menu a.active{
  background:var(--accent-soft); color:var(--accent-deep); border-color:rgba(136,58,70,.20);
  box-shadow:var(--hl); font-weight:600;
}
.who{font-size:13px; color:var(--muted); white-space:nowrap}
.who a{color:var(--muted)}

main{max-width:1060px; margin:0 auto; padding:26px 20px 80px}
/* единый вертикальный ритм: каждый блок страницы отстоит от предыдущего одинаково */
main > * + *{margin-top:14px}

/* ───── typography: один шрифт (системный гротеск), иерархия весом/размером ───── */
h1{font-weight:700; font-size:24px; line-height:1.2; margin:0;
   color:var(--ink-strong); letter-spacing:-.012em}
h2{font-weight:700; font-size:18px; margin:0; color:var(--ink-strong)}
.card h2{margin:20px 0 12px}      /* подзаголовок внутри карточки (напр. «Содержимое» в форме) */
.card h2:first-child{margin-top:0}
.muted{color:var(--muted)}
.small{font-size:13px}

/* ───── cards ───── */
.card{
  background:var(--glass);
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow), var(--hl); padding:24px;
}
.grid{display:grid; gap:16px}
@media(min-width:720px){ .grid.cols2{grid-template-columns:1fr 1fr} .grid.cols4{grid-template-columns:repeat(4,1fr)} }

/* ───── forms ───── */
label{display:block; font-weight:600; font-size:13px; margin:0 0 7px; color:var(--ink-soft); letter-spacing:.01em}
.field{margin-bottom:16px; position:relative}
input[type=text],input[type=date],input[type=password],input[type=search],select,textarea{
  width:100%; padding:13px 15px; font-size:16px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:var(--ink); font-family:inherit; transition:.16s ease;
}
input::placeholder,textarea::placeholder{color:#7d7366}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent); background:rgba(255,255,255,.92);
  box-shadow:0 0 0 4px var(--accent-soft);
}
textarea{min-height:58px; resize:vertical; line-height:1.5}
.hint{font-size:13px; color:var(--muted); margin-top:6px}
/* touch-зона ~44px БЕЗ влияния на вёрстку: невидимый ::after поверх ссылки
   (padding на inline-block раздувал высоту строк — откатил) */
td a.small,.hint a,.who a{position:relative; font-size:14px}
td a.small::after,.hint a::after,.who a::after{content:""; position:absolute; inset:-13px -10px}

/* type chips */
.chips{display:flex; gap:10px; flex-wrap:wrap}
.chips label{
  flex:1; min-width:98px; text-align:center; border:1px solid var(--line); border-radius:13px;
  padding:12px 8px; cursor:pointer; font-weight:600; margin:0; transition:.16s ease;
  background:rgba(255,255,255,.55); color:var(--ink-soft);
}
.chips label:hover{background:rgba(255,255,255,.78)}
.chips label:has(input:checked){
  background:var(--accent-soft); border-color:rgba(136,58,70,.32); color:var(--accent-deep);
  box-shadow:var(--hl);
}
.chips input{position:absolute; opacity:0; pointer-events:none}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  background:linear-gradient(180deg,#92404d 0%, #7d2f3b 100%); color:#fff;
  border:1px solid rgba(90,30,40,.5); border-radius:14px;
  padding:13px 22px; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit;
  box-shadow:0 8px 20px rgba(136,58,70,.26), inset 0 1px 0 rgba(255,255,255,.22); transition:.16s ease;
}
.btn:hover{filter:brightness(1.06); transform:translateY(-1px); color:#fff; text-decoration:none; box-shadow:0 12px 26px rgba(136,58,70,.32), inset 0 1px 0 rgba(255,255,255,.25)}
.btn:active{transform:translateY(0)}
.btn.secondary{
  background:rgba(255,255,255,.7); color:var(--ink); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--shadow), var(--hl);
}
.btn.secondary:hover{background:rgba(255,255,255,.92); color:var(--ink); filter:none}
.btn.danger{
  background:rgba(176,66,80,.10); color:var(--danger); border:1px solid rgba(176,66,80,.35);
  box-shadow:var(--shadow), var(--hl);
}
.btn.danger:hover{background:rgba(176,66,80,.18); color:#8a2f3a; filter:none}
.btn.block{width:100%}
.btn-row{display:flex; gap:11px; flex-wrap:wrap; align-items:center}
.card > .btn-row{margin-top:18px}  /* кнопки в конце карточки/формы не липнут к содержимому */
/* на узком экране кнопки не «лесенкой», а ровной сеткой одинаковой ширины */
@media(max-width:600px){
  .btn-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .btn-row .btn{width:100%; margin-left:0 !important}
}

/* autocomplete */
.ac-box{position:relative}
.ac-list{
  position:absolute; z-index:40; left:0; right:0; top:100%; margin-top:7px; background:var(--glass-strong);
  -webkit-backdrop-filter:blur(28px) saturate(180%); backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg), var(--hl); max-height:300px; overflow:auto; display:none;
}
.ac-list.open{display:block}
.ac-item{padding:12px 15px; cursor:pointer; border-bottom:1px solid var(--line-soft)}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.sel{background:var(--accent-soft)}
.ac-item .nm{font-weight:600}
.ac-item .sub{font-size:12px; color:var(--muted)}

/* tables */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius)}
table{width:100%; border-collapse:collapse; font-size:15px}
th,td{text-align:left; padding:13px 15px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; white-space:nowrap}
/* длинное содержимое не распирает таблицу на телефоне */
td.small{max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* адреса — полностью, с переносом; ФИО уже (отчество переносится) — адресу больше места */
td.addr{white-space:normal; overflow:visible; text-overflow:clip; max-width:420px; min-width:220px; line-height:1.4}
/* ФИО столбиком: width:1% сжимает колонку до самого длинного слова — ФИО ложится в 3 строки */
td.fio{white-space:normal; width:1%; min-width:80px; line-height:1.3}
th.ctr{text-align:center}
td.typ{text-align:center; vertical-align:middle}

/* карточка заключённого: развёрнутая история без сокращений */
.ship-item{padding:16px 18px}
.ship-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ship-where{margin-top:5px}
.ship-body{margin-top:9px; display:flex; flex-direction:column; gap:6px}
.ship-row{display:grid; grid-template-columns:148px 1fr; gap:4px 14px; font-size:14px}
.ship-row .lbl{color:var(--ink-soft); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding-top:2px}
.ship-row .val{white-space:pre-line; line-height:1.45}
@media(max-width:540px){ .ship-row{grid-template-columns:1fr} .ship-row .lbl{padding-top:0} }
.show-sm{display:none}
@media(max-width:540px){
  td.small{max-width:150px}
  td.addr{max-width:none; min-width:140px}
  .hide-sm{display:none}
  .show-sm{display:inline}
  th,td{padding:9px 8px}          /* плотнее на телефоне — таблицы без горизонтального скролла */
  td{white-space:normal}           /* любые ячейки переносятся */
}
tbody tr{transition:.12s}
tbody tr:hover{background:rgba(255,255,255,.5)}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

/* badges */
.badge{
  display:inline-block; padding:3px 11px; border-radius:999px; font-size:13px; font-weight:600;
  background:rgba(133,123,111,.14); color:#665d52; border:1px solid rgba(133,123,111,.20);
}
.badge.posylka{background:rgba(63,125,90,.15); color:#2f6b4a; border-color:rgba(63,125,90,.26)}
.badge.pismo{background:rgba(60,90,130,.15); color:#36567e; border-color:rgba(60,90,130,.26)}
.badge.banderol{background:var(--gold-soft); color:#7a5d1d; border-color:rgba(176,137,72,.30)}
.badge.return{background:rgba(176,66,80,.16); color:#9a3543; border-color:rgba(176,66,80,.30)}
.badge.tier-same{background:rgba(63,125,90,.15); color:#2f6b4a; border-color:rgba(63,125,90,.28)}
.badge.tier-diff{background:rgba(133,123,111,.14); color:#6f665b; border-color:rgba(133,123,111,.24)}

/* filters */
.filters{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.filters .field{margin:0; min-width:142px}
.filters .field.grow{flex:1}

/* KPI tiles */
.kpi{display:flex; gap:16px; flex-wrap:wrap}
.kpi .box{
  flex:1; min-width:134px; background:var(--glass);
  -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;
  box-shadow:var(--shadow), var(--hl);
}
.kpi .box .n{font-size:28px; font-weight:700; color:var(--accent-deep); letter-spacing:-.02em; line-height:1.05; font-variant-numeric:tabular-nums}
.kpi .box .l{font-size:13px; color:var(--muted); margin-top:4px}

/* flash */
.flash{
  padding:14px 17px; border-radius:15px; margin-bottom:18px; font-weight:500;
  -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%);
  box-shadow:var(--hl);
}
.flash.ok{background:rgba(63,125,90,.16); color:#2f5a3b; border:1px solid rgba(63,125,90,.30)}
.flash.err{background:rgba(176,66,80,.16); color:#8a2f3a; border:1px solid rgba(176,66,80,.32)}

/* login */
.login-wrap{max-width:400px; margin:13vh auto 0}
.login-wrap .brand{justify-content:center; font-size:21px; margin-bottom:8px}
.login-sub{text-align:center; color:var(--muted); font-size:13px; margin:0 0 22px}

.pagination{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.dl{display:grid; grid-template-columns:auto 1fr; gap:7px 20px; font-size:14px}
.dl dt{color:var(--muted)}
.dl dd{margin:0}
.section-head{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}

/* ───── dedup review ───── */
.dedup-members{display:flex; flex-direction:column; gap:11px}
.dedup-member{
  display:flex; gap:16px; padding:14px 16px; border-radius:16px;
  border:1px solid var(--line); background:rgba(255,255,255,.5); transition:.16s ease;
}
.dedup-member.is-canon{
  border-color:rgba(136,58,70,.34); background:var(--accent-soft);
  box-shadow:inset 3px 0 0 var(--accent), var(--hl);
}
.dedup-member .pick{display:flex; flex-direction:column; gap:2px; min-width:104px}
.dedup-member .opt{display:flex; align-items:center; gap:8px; min-height:40px; font-size:14px; font-weight:600; color:var(--ink-soft); margin:0; cursor:pointer}
.dedup-member .opt input{width:22px; height:22px; margin:0; accent-color:var(--accent)}
.dedup-member .minfo{flex:1; min-width:0}
.dedup-member .nm{font-weight:700; font-size:16px; color:var(--ink-strong); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.dedup-member .nm .open{font-size:12px; font-weight:500}
.fchips{display:flex; flex-wrap:wrap; gap:7px; margin-top:8px}
.fchips .f{font-size:13px; color:var(--ink-soft); background:rgba(133,123,111,.10); border:1px solid transparent; padding:3px 10px; border-radius:9px}
.fchips .f b{color:var(--ink-strong); font-weight:600}
.faddr,.fnote{font-size:13px; color:var(--muted); margin-top:7px}
.faddr b,.fnote b{color:var(--ink)}
/* подсветка различий — золотом (внимание, не тревога) */
.diff,.fchips .f.diff{
  background:var(--gold-soft) !important; border:1px solid rgba(176,137,72,.42) !important;
  color:#7a5512 !important; border-radius:9px;
}
.faddr.diff,.fnote.diff{padding:3px 10px}
.nm.diff{padding:2px 10px; display:inline-flex}

/* ───── форма отправления: голос, возврат, файлы ───── */
.voice-wrap{position:relative}
.voice-wrap textarea{padding-right:52px}
.voice-btn{
  position:absolute; right:8px; top:8px; width:38px; height:38px; border-radius:11px;
  border:1px solid var(--line); background:rgba(255,255,255,.7); cursor:pointer; font-size:17px;
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.voice-btn:hover{background:rgba(255,255,255,.95)}
.voice-btn.rec{background:rgba(176,66,80,.18); border-color:var(--danger); animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(176,66,80,.15)}}
.return-toggle{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:12px; padding:9px 14px; cursor:pointer; margin:0;
  background:rgba(255,255,255,.55);
}
.return-toggle:has(input:checked){background:rgba(176,66,80,.14); border-color:rgba(176,66,80,.4); color:#9a3543}
.return-toggle input{width:18px; height:18px; margin:0; accent-color:var(--danger)}
input[type=file]{
  width:100%; padding:11px 13px; font-size:14px; border:1px dashed var(--line); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.45); color:var(--ink-soft);
}
.theme-toggle{
  border:1px solid var(--line); background:transparent; border-radius:9px; cursor:pointer;
  font-size:14px; padding:3px 7px; margin-left:6px; vertical-align:middle;
}

/* ───── тёмная тема (день/ночь) ───── */
html[data-theme=dark]{color-scheme:dark}
html[data-theme=dark] body{background:#1d1916; color:var(--ink)}
html[data-theme=dark]{
  --ink:#e6dfd4; --ink-strong:#f5efe5; --ink-soft:#c6bcae; --muted:#a2978a;
  --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.06);
  --glass:rgba(44,38,33,.66); --glass-strong:rgba(50,43,37,.88); --glass-bar:rgba(34,29,25,.66);
  --accent:#cf7e8c; --accent-deep:#dd97a3; --accent-soft:rgba(207,126,140,.16);
  --gold:#cfa55e; --gold-soft:rgba(207,165,94,.18);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 38px rgba(0,0,0,.35);
  --shadow-lg:0 2px 8px rgba(0,0,0,.35), 0 26px 60px rgba(0,0,0,.5);
  --hl:inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme=dark] body::before{
  background:
    radial-gradient(1200px 820px at 6% -10%, rgba(155,66,82,.16), transparent 55%),
    radial-gradient(1040px 760px at 102% -4%, rgba(176,137,72,.10), transparent 52%),
    radial-gradient(940px 900px at 50% 116%, rgba(70,84,120,.12), transparent 55%),
    linear-gradient(168deg,#262019 0%, #1d1916 52%, #211c1a 100%);
}
html[data-theme=dark] input[type=text],html[data-theme=dark] input[type=date],
html[data-theme=dark] input[type=password],html[data-theme=dark] input[type=search],
html[data-theme=dark] select,html[data-theme=dark] textarea{
  background:rgba(255,255,255,.07); color:var(--ink); border-color:var(--line);
}
html[data-theme=dark] input:focus,html[data-theme=dark] select:focus,html[data-theme=dark] textarea:focus{
  background:rgba(255,255,255,.12);
}
html[data-theme=dark] input::placeholder,html[data-theme=dark] textarea::placeholder{color:#8c8276}
html[data-theme=dark] nav.menu a:hover{background:rgba(255,255,255,.07)}
html[data-theme=dark] tbody tr:hover{background:rgba(255,255,255,.05)}
html[data-theme=dark] .chips label{background:rgba(255,255,255,.06)}
html[data-theme=dark] .chips label:hover{background:rgba(255,255,255,.10)}
html[data-theme=dark] .btn.secondary{background:rgba(255,255,255,.08); color:var(--ink)}
html[data-theme=dark] .btn.secondary:hover{background:rgba(255,255,255,.14); color:var(--ink)}
html[data-theme=dark] .dedup-member{background:rgba(255,255,255,.05)}
html[data-theme=dark] .voice-btn{background:rgba(255,255,255,.08)}
html[data-theme=dark] .voice-btn:hover{background:rgba(255,255,255,.14)}
html[data-theme=dark] .return-toggle{background:rgba(255,255,255,.06)}
html[data-theme=dark] input[type=file]{background:rgba(255,255,255,.05)}
html[data-theme=dark] .fchips .f{background:rgba(255,255,255,.07); color:var(--ink-soft)}
html[data-theme=dark] .fchips .f b{color:var(--ink-strong)}
html[data-theme=dark] .badge{background:rgba(255,255,255,.09); color:#cfc5b8; border-color:rgba(255,255,255,.12)}
html[data-theme=dark] .badge.posylka{background:rgba(96,176,128,.18); color:#8fd1a8; border-color:rgba(96,176,128,.3)}
html[data-theme=dark] .badge.pismo{background:rgba(110,150,200,.18); color:#a3c3e8; border-color:rgba(110,150,200,.3)}
html[data-theme=dark] .badge.banderol{background:rgba(207,165,94,.18); color:#dec083; border-color:rgba(207,165,94,.32)}
html[data-theme=dark] .badge.return{background:rgba(220,110,122,.18); color:#eda4ae; border-color:rgba(220,110,122,.32)}
html[data-theme=dark] .badge.tier-same{background:rgba(96,176,128,.18); color:#8fd1a8; border-color:rgba(96,176,128,.3)}
html[data-theme=dark] .badge.tier-diff{background:rgba(255,255,255,.09); color:#cfc5b8}
html[data-theme=dark] .flash.ok{background:rgba(96,176,128,.16); color:#9fd8b4; border-color:rgba(96,176,128,.3)}
html[data-theme=dark] .flash.err{background:rgba(220,110,122,.16); color:#eda4ae; border-color:rgba(220,110,122,.32)}
html[data-theme=dark] .diff,html[data-theme=dark] .fchips .f.diff{
  background:rgba(207,165,94,.16) !important; border-color:rgba(207,165,94,.4) !important; color:#dec083 !important;
}