/* Панель керування посилками - оформлення.
   Токени й типографіка збігаються з наявним застосунком: жовтий InPost, Unbounded/Onest/JetBrains Mono. */

:root{
  color-scheme:light;
  --bg:#ffffff; --bg2:#f5f5f2; --bg3:#eaeae6;
  --ink:#0b0b0b; --ink2:#5e5e59; --ink3:#98988f;
  --line:#e6e6e1; --line2:#d2d2cc; --paper:#ffffff;
  --bad:#c8321e; --bad-bg:#fbeae7;
  --warn:#a97400; --warn-bg:#fbf3e0;
  --good:#1f7a4d; --good-bg:#e6f4ec;
  --info:#20558f; --info-bg:#e8f0f9;
  --calm:#5b4b8a; --calm-bg:#efeaf8;
  --brand:#FFC400; --brand-ink:#1c1c1c; --brand-soft:#fff6d6;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 10px 30px -16px rgba(0,0,0,.25);
  --shadow-lg:0 4px 12px rgba(0,0,0,.08),0 24px 60px -24px rgba(0,0,0,.35);
  --display:'Unbounded',ui-sans-serif,system-ui,sans-serif;
  --body:'Onest',-apple-system,BlinkMacSystemFont,ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.72,.16,1);
  --r:18px; --r-sm:11px; --r-xs:8px;
  --side:248px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0a0a0a; --bg2:#151514; --bg3:#20201f;
    --ink:#f6f6f2; --ink2:#a8a8a1; --ink3:#70706a;
    --line:#242423; --line2:#373735; --paper:#121211;
    --bad:#f2694f; --bad-bg:#2b1410;
    --warn:#dda135; --warn-bg:#2a2010;
    --good:#54c98c; --good-bg:#0e2418;
    --info:#6aa8e8; --info-bg:#0d1c2c;
    --calm:#a394d8; --calm-bg:#1b1630;
    --brand:#FFC400; --brand-ink:#1c1c1c; --brand-soft:#332a08;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px -16px rgba(0,0,0,.7);
    --shadow-lg:0 4px 12px rgba(0,0,0,.6),0 24px 60px -24px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a0a0a; --bg2:#151514; --bg3:#20201f;
  --ink:#f6f6f2; --ink2:#a8a8a1; --ink3:#70706a;
  --line:#242423; --line2:#373735; --paper:#121211;
  --bad:#f2694f; --bad-bg:#2b1410;
  --warn:#dda135; --warn-bg:#2a2010;
  --good:#54c98c; --good-bg:#0e2418;
  --info:#6aa8e8; --info-bg:#0d1c2c;
  --calm:#a394d8; --calm-bg:#1b1630;
  --brand:#FFC400; --brand-ink:#1c1c1c; --brand-soft:#332a08;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px -16px rgba(0,0,0,.7);
  --shadow-lg:0 4px 12px rgba(0,0,0,.6),0 24px 60px -24px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--brand);color:var(--brand-ink)}
.mono{font-family:var(--mono);font-variant-ligatures:none}
.muted{color:var(--ink2)}
.dim{color:var(--ink3)}
.nowrap{white-space:nowrap}
.right{text-align:right}
.grow{flex:1}
.hidden{display:none!important}

/* ============================ Каркас ============================ */
.shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}

.side{
  background:var(--bg2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.side-top{padding:18px 16px 12px;display:flex;align-items:center;gap:10px}
.logo{width:34px;height:34px;display:grid;place-items:center;flex:none}
.logo img{width:34px;height:34px;display:block}
/* Логотип у двох варіантах: темно-синій на світлому фоні, світлий на темному (тема системи або обрана вручну) */
.only-dark{display:none!important}
:root[data-theme="dark"] .only-dark{display:block!important}
:root[data-theme="dark"] .only-light{display:none!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .only-dark{display:block!important}
  :root:not([data-theme="light"]) .only-light{display:none!important}
}
.side-title{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:-.2px;line-height:1.15}
.side-sub{font-size:10.5px;color:var(--ink3);letter-spacing:.3px;text-transform:uppercase;font-weight:600}

.nav{padding:6px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.nav-group{margin-top:12px;padding:6px 8px 4px;font-size:10.5px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink3)}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);
  border:0;background:transparent;cursor:pointer;text-align:left;width:100%;
  font-size:13.5px;font-weight:500;color:var(--ink2);transition:background .14s var(--ease),color .14s var(--ease);
}
.nav-item:hover{background:var(--bg3);color:var(--ink)}
.nav-item.on{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.nav-item .ic{width:17px;height:17px;flex:none;opacity:.85}
.nav-item .cnt{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink3);font-family:var(--mono)}
.nav-item.on .cnt{color:var(--ink2)}
.nav-item .dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--bad)}

.side-foot{padding:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.lang-row{display:flex;gap:3px}
.lang-btn{
  flex:1;padding:5px 0;border-radius:var(--r-xs);border:1px solid var(--line);background:var(--paper);
  cursor:pointer;font-size:11px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.3px;
}
.lang-btn.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.side-user{display:flex;align-items:center;gap:8px;font-size:12px;padding:2px}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--bg3);display:grid;place-items:center;
  font-weight:700;font-size:11px;flex:none}

/* ============================ Головна область ============================ */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  padding:12px 22px;display:flex;align-items:center;gap:12px;
}
.page-title{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.3px;margin:0;flex:none}
.search{position:relative;flex:1;max-width:520px}
.search input{
  width:100%;padding:8px 32px 8px 34px;border-radius:99px;border:1px solid var(--line);
  background:var(--bg2);outline:0;font-size:13px;transition:border-color .14s,background .14s;
}
.search input:focus{border-color:var(--brand);background:var(--paper)}
.search .si{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;opacity:.45;pointer-events:none}
.search .sx{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;
  cursor:pointer;padding:4px;border-radius:50%;color:var(--ink3);line-height:0}
.content{padding:20px 22px 60px;max-width:1500px;width:100%}

/* ============================ Кнопки ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:0 14px;min-height:36px;border-radius:var(--r-sm);
  border:1px solid var(--line2);background:var(--paper);color:var(--ink);
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:transform .1s var(--ease),background .14s,border-color .14s,opacity .14s;
}
.btn:hover{background:var(--bg2)}
.btn:active{transform:scale(.975)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:15px;height:15px;flex:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.primary:hover{filter:brightness(.95)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 32%,transparent)}
.btn.danger:hover{background:var(--bad-bg)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--bg2)}
.btn.sm{min-height:29px;padding:0 10px;font-size:12px;border-radius:var(--r-xs)}
.btn.icon{padding:0;width:36px}
.btn.icon.sm{width:29px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ============================ Картки ============================ */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card+.card{margin-top:14px}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-hd h2{font-family:var(--display);font-size:14px;font-weight:600;margin:0;letter-spacing:-.2px;
  display:flex;align-items:center;gap:7px}
.card-hd h2 svg{width:15px;height:15px;flex:none}
.card-hd .sub{font-size:12px;color:var(--ink3)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin-bottom:14px}
.kpi{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;
  cursor:pointer;text-align:left;transition:border-color .14s,transform .1s var(--ease);
}
.kpi:hover{border-color:var(--line2);transform:translateY(-1px)}
.kpi .n{font-family:var(--display);font-size:25px;font-weight:600;letter-spacing:-1px;line-height:1.1}
.kpi .l{font-size:11.5px;color:var(--ink2);margin-top:3px;font-weight:500}
.kpi.warn .n{color:var(--warn)}
.kpi.bad .n{color:var(--bad)}
.kpi.good .n{color:var(--good)}
.kpi.brand .n{color:var(--ink)}
/* Активна плитка = застосований фільтр у «Посилках» */
.kpi.on{border-color:color-mix(in srgb,var(--brand) 70%,transparent);background:var(--brand-soft);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 55%,transparent)}
.kpi:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Компактний ряд плиток над списком посилок */
.kpis.compact{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px}
.kpis.compact .kpi{padding:9px 12px;border-radius:var(--r-sm)}
.kpis.compact .kpi .n{font-size:20px}
.kpis.compact .kpi .l{font-size:11px}
@media(hover:none){.kpi:hover{transform:none}}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1080px){.grid2,.grid3{grid-template-columns:1fr}}

/* ============================ Статуси ============================ */
.st{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:11px;font-weight:700;white-space:nowrap;border:1px solid transparent;line-height:1.5;
}
.st::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st-neutral{background:var(--bg3);color:var(--ink2)}
.st-info{background:var(--info-bg);color:var(--info)}
.st-brand{background:var(--brand-soft);color:var(--warn)}
.st-good{background:var(--good-bg);color:var(--good)}
.st-bad{background:var(--bad-bg);color:var(--bad)}
.st-calm{background:var(--calm-bg);color:var(--calm)}

.carrier{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:var(--r-xs);border:1px solid var(--line);background:var(--bg2);
  text-transform:uppercase;letter-spacing:.3px;
}
.carrier.inpost{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 40%,transparent);color:var(--warn)}
.carrier.dhl{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 28%,transparent);color:var(--bad)}
.carrier.dpd{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 22%,transparent);color:var(--bad)}

.tag{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;
  font-size:10.5px;font-weight:700;background:var(--bg3);color:var(--ink2);border:1px solid var(--line);
}
.tag.amber{background:var(--brand-soft);color:var(--warn);border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.tag.green{background:var(--good-bg);color:var(--good)}
.tag.red{background:var(--bad-bg);color:var(--bad)}
.tag.blue{background:var(--info-bg);color:var(--info)}
.tag.purple{background:var(--calm-bg);color:var(--calm)}

/* ============================ Таблиця ============================ */
.tablewrap{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden}
.tablescroll{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{
  text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--ink3);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
  background:var(--bg2);position:sticky;top:0;z-index:2;
}
table.t th.sortable{cursor:pointer;user-select:none}
table.t th.sortable:hover{color:var(--ink)}
table.t th .arr{opacity:.5;font-size:9px;margin-left:2px}
table.t td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tbody tr{transition:background .1s}
table.t tbody tr:hover{background:var(--bg2)}
table.t tbody tr.sel{background:var(--brand-soft)}
table.t tbody tr:last-child td{border-bottom:0}
.tn{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink);
  background:transparent;border:0;cursor:pointer;padding:0;text-align:left;text-decoration:underline;
  text-decoration-color:var(--line2);text-underline-offset:3px}
.tn:hover{text-decoration-color:var(--brand)}
.ck{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
.cellsub{font-size:11px;color:var(--ink3);margin-top:1px}

/* ============================ Фільтри ============================ */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.fchip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:12px;font-weight:600;color:var(--ink2);
  transition:border-color .14s,background .14s;
}
.fchip:hover{border-color:var(--line2)}
.fchip.on{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 50%,transparent);color:var(--warn)}
.fchip .x{opacity:.6;font-size:13px;line-height:1}
.fsel{
  padding:5px 26px 5px 10px;border-radius:99px;border:1px solid var(--line);background:var(--paper);
  font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer;outline:0;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:13px;
}
.fsel.on{background-color:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 50%,transparent);color:var(--warn)}
.fdate{padding:5px 9px;border-radius:99px;border:1px solid var(--line);background:var(--paper);font-size:12px;outline:0}

/* ============================ Форми ============================ */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field>label{font-size:11.5px;font-weight:700;color:var(--ink2);letter-spacing:.2px}
.field .hint{font-size:11px;color:var(--ink3);line-height:1.4}
.field .hint a{color:var(--info);text-underline-offset:2px}
.in{
  width:100%;padding:9px 11px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--bg2);outline:0;font-size:13.5px;transition:border-color .14s,background .14s;
}
.in:focus{border-color:var(--brand);background:var(--paper)}
.in:disabled{opacity:.55}
textarea.in{resize:vertical;min-height:70px;font-family:inherit}
select.in{cursor:pointer;appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:620px){.fgrid{grid-template-columns:1fr}}
.field.err .in{border-color:var(--bad)}
.field .errmsg{font-size:11px;color:var(--bad);font-weight:600}
.fieldset{border:1px solid var(--line);border-radius:var(--r-sm);padding:13px;margin-bottom:12px}
.fieldset>legend{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink3);padding:0 6px}
.switch{display:flex;align-items:center;gap:9px;cursor:pointer;padding:5px 0}
.switch input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}

/* Вибір кількох посилок для відправника / отримувача */
.pick-list{max-height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-xs)}
.pick-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line);cursor:pointer;flex-wrap:wrap}
.pick-row:last-child{border-bottom:0}
.pick-row:hover{background:var(--bg2)}
.pick-row[hidden]{display:none}
.pick-row input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;flex:none}
.pick-tn{font-size:12.5px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.pick-other{font-size:11px;color:var(--ink3);margin-left:auto}
/* Випадаючий список із кнопкою «+» (відправник / отримувач / оплата) */
.ref-sel{display:flex;gap:6px;align-items:center}
.ref-sel .in{flex:1;min-width:0}

/* ============================ Модальні вікна ============================ */
.scrim{
  position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fade .18s var(--ease);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);
  width:100%;max-width:560px;max-height:min(88vh,860px);display:flex;flex-direction:column;
  animation:pop .22s var(--ease);
}
.modal.wide{max-width:860px}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal-hd{padding:16px 20px 13px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex:none}
.modal-hd h3{font-family:var(--display);font-size:15px;font-weight:600;margin:0;letter-spacing:-.2px;flex:1}
.modal-bd{padding:18px 20px;overflow-y:auto;flex:1}
.modal-ft{padding:13px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex:none;flex-wrap:wrap}
.modal-ft .grow{flex:1}

/* ============================ Деталі посилки ============================ */
.detail-hd{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.detail-num{font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:-.5px;word-break:break-all}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:13px;align-items:baseline}
.kv dt{color:var(--ink3);font-size:11.5px;font-weight:600;white-space:nowrap}
.kv dd{margin:0;min-width:0;word-break:break-word}
.kv dd .set{border:0;background:transparent;color:var(--info);cursor:pointer;padding:0;font-size:12px;
  font-weight:600;text-decoration:underline;text-underline-offset:2px}

.timeline{position:relative;padding-left:20px}
.timeline::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl{position:relative;padding:0 0 15px}
.tl:last-child{padding-bottom:0}
.tl::before{content:'';position:absolute;left:-19px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--bg3);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line)}
.tl.first::before{background:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.tl-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-time{font-family:var(--mono);font-size:11px;color:var(--ink3)}
.tl-desc{font-size:12.5px;color:var(--ink2);margin-top:2px}
.tl-raw{font-family:var(--mono);font-size:10.5px;color:var(--ink3);margin-top:3px}

.pickup-code{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:17px;font-weight:600;
  letter-spacing:2px;background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);
  border-radius:var(--r-sm);padding:7px 13px;
}
.att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px}
.att{
  position:relative;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg2);aspect-ratio:1;display:grid;place-items:center;cursor:pointer;
}
.att img{width:100%;height:100%;object-fit:cover}
.att .pdf{font-size:11px;font-weight:700;color:var(--ink2);text-align:center;padding:8px;word-break:break-word}
.att .del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;
  background:rgba(0,0,0,.62);color:#fff;cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .14s}
.att:hover .del{opacity:1}
.att .mv{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;border:0;
  background:rgba(0,0,0,.62);color:#fff;cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .14s}
.att .mv svg,.att .del svg{width:13px;height:13px}
.att:hover .mv{opacity:1}
.att.new{border-style:dashed;border-color:var(--brand)}
/* На сенсорних екранах наведення немає - кнопки на плитках показуємо завжди */
@media(hover:none){.att .del,.att .mv{opacity:1}}
.dropzone.sm{padding:11px;font-size:12px}
.pk-media-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin:4px 0 7px}
/* 👁 біля номера в списку - швидкий перегляд коду отримання */
.tn-wrap{display:inline-flex;align-items:center;gap:4px}
.pk-eye{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid transparent;
  background:var(--brand-soft);color:var(--warn);cursor:pointer;vertical-align:middle;flex:none;margin-left:4px;padding:0}
.pk-eye:hover{border-color:color-mix(in srgb,var(--brand) 60%,transparent)}
.pk-eye svg{width:14px;height:14px}
/* Вікно швидкого перегляду */
.qv-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;font-size:12.5px}
.qv-code{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);
  border-radius:var(--r-sm);padding:12px 14px;margin-bottom:12px}
.qv-code .mono{font-size:26px;font-weight:700;letter-spacing:3px;word-break:break-all}
.qv-media{margin-top:10px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
/* У швидкому перегляді QR має читатися сканером - показуємо цілим, без обрізання */
.qv-media .att{aspect-ratio:auto;min-height:200px;background:#fff}
.qv-media .att img{object-fit:contain;max-height:320px}
/* Фото / QR у картці приховані, поки не натиснуто «Показати» (як і код) */
.att-grid.pk-hidden .att img{filter:blur(14px) grayscale(1);opacity:.55}
.pk-media-l{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dropzone{
  border:2px dashed var(--line2);border-radius:var(--r-sm);padding:18px;text-align:center;
  font-size:12.5px;color:var(--ink3);cursor:pointer;transition:border-color .14s,background .14s;
}
.dropzone:hover,.dropzone.over{border-color:var(--brand);background:var(--brand-soft);color:var(--warn)}

/* ============================ Дрібне ============================ */
.empty{text-align:center;padding:44px 20px;color:var(--ink3)}
.empty .big{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.empty svg{width:40px;height:40px;opacity:.25;margin-bottom:12px}

.bulkbar{
  position:sticky;bottom:14px;z-index:40;margin-top:14px;
  background:var(--ink);color:var(--bg);border-radius:99px;padding:8px 8px 8px 18px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;box-shadow:var(--shadow-lg);
  animation:pop .2s var(--ease);
}
.bulkbar .n{font-weight:700;font-size:13px}
.bulkbar .btn{background:transparent;border-color:color-mix(in srgb,var(--bg) 30%,transparent);color:var(--bg)}
.bulkbar .btn:hover{background:color-mix(in srgb,var(--bg) 16%,transparent)}

.toasts{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:400px}
.toast{
  background:var(--ink);color:var(--bg);padding:11px 15px;border-radius:var(--r-sm);
  font-size:13px;font-weight:500;box-shadow:var(--shadow-lg);animation:slide .22s var(--ease);
  display:flex;align-items:flex-start;gap:9px;
}
@keyframes slide{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.toast.bad{background:var(--bad);color:#fff}
.toast.good{background:var(--good);color:#fff}
.toast svg{width:16px;height:16px;flex:none;margin-top:1px}

.banner{
  display:flex;gap:11px;align-items:flex-start;padding:12px 15px;border-radius:var(--r-sm);
  font-size:13px;margin-bottom:14px;border:1px solid transparent;line-height:1.5;
}
.banner svg{width:17px;height:17px;flex:none;margin-top:1px}
.banner.warn{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.banner.bad{background:var(--bad-bg);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 25%,transparent)}
.banner.info{background:var(--info-bg);color:var(--info);border-color:color-mix(in srgb,var(--info) 22%,transparent)}
.banner.good{background:var(--good-bg);color:var(--good);border-color:color-mix(in srgb,var(--good) 25%,transparent)}
.banner b{font-weight:700}
.banner .act{margin-left:auto;flex:none}

.spinner{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:44px;color:var(--ink3);font-size:13px}

.list-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:0}
.list-row .t{font-weight:600;font-size:13.5px}
.list-row .s{font-size:11.5px;color:var(--ink3);margin-top:1px}
.list-row .acts{margin-left:auto;display:flex;gap:5px;opacity:0;transition:opacity .14s}
.lr-main{flex:1;min-width:0}
.list-row:hover .acts{opacity:1}

.dot-ok{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none}
.dot-off{width:8px;height:8px;border-radius:50%;background:var(--ink3);flex:none}
.dot-err{width:8px;height:8px;border-radius:50%;background:var(--bad);flex:none}

.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px 0;font-size:12.5px;color:var(--ink2)}

.mobile-only{display:none}
@media(max-width:620px){
  /* На вузькому екрані чіпи переносимо під текст, інакше рядок стискає назву в стовпчик */
  .list-row{flex-wrap:wrap;gap:7px 9px}
  .lr-main{flex:1 1 100%}
  .list-row .s{white-space:normal}
  .list-row .acts{opacity:1;margin-left:0}
  .kpi .n{font-size:22px}
}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:var(--side);z-index:90;transform:translateX(-100%);
    transition:transform .24s var(--ease);height:100dvh}
  .side.open{transform:none;box-shadow:var(--shadow-lg)}
  .mobile-only{display:inline-flex}
  .content{padding:14px 14px 70px}
  .topbar{padding:10px 14px}
  .page-title{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  /* Над списком посилок 5 плиток прокручуються в один ряд, а не займають три рядки */
  .kpis.compact{display:flex;overflow-x:auto;gap:8px;margin:0 -14px 12px;padding:0 14px 2px;scrollbar-width:none}
  .kpis.compact::-webkit-scrollbar{display:none}
  .kpis.compact .kpi{flex:0 0 128px}
}
@media print{.side,.topbar,.bulkbar,.btn{display:none!important}}

/* ---- Команда: оболонка (назва фірми, перемикач фірм, блок людини, смуги-нагадування) ---- */
.side-titles{min-width:0}
.side-titles .side-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-switch{padding:0 14px 10px}
.org-switch .in{width:100%}
.user-block{display:flex;align-items:center;gap:8px;min-width:0;cursor:pointer;border-radius:var(--r-xs);padding:3px 4px;margin:-3px -4px}
.user-block:hover,.user-block:focus-visible{background:var(--bg3);outline:none}
.user-names{min-width:0;line-height:1.25}
.user-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-role{font-size:11px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notices{padding:0 22px;max-width:1500px;width:100%}
.notices:empty{display:none}
.notices .notice{margin:14px 0 0}
@media(max-width:900px){.notices{padding:0 14px}}

/* ==== core-ui ==== */
/* ============================ core-ui: права, відповідальний, журнал ============================ */

/* Відповідальний у списку посилок: повне ім'я на широкому екрані, ініціали в кружечку на телефоні
   (повне ім'я - у підказці title), щоб колонка не розсувала таблицю */
.as-name{display:inline-flex;align-items:center;max-width:170px;min-width:0}
.as-full{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-ini{display:none;width:26px;height:26px;border-radius:50%;background:var(--bg3);color:var(--ink2);
  font-size:10.5px;font-weight:700;letter-spacing:.2px;align-items:center;justify-content:center;flex:none}
@media(max-width:900px){
  .as-full{display:none}
  .as-ini{display:inline-flex}
}

/* Приховане без права (код отримання, фото / QR, нотатка): спокійна примітка, не помилка */
.pk-lock{font-size:12px;line-height:1.45;color:var(--ink3);margin-top:3px}

/* ---- Журнал дій ---- */
/* «Мої дії»: на широкому екрані назва вже є в шапці сторінки, на телефоні шапку сховано - показуємо тут */
.au-head{margin:0 0 12px}
.au-head h2{display:none;font-family:var(--display);font-size:16px;margin:0 0 4px}
@media(max-width:900px){.au-head h2{display:block}}
.au-date{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink2)}
.au-date .fdate{font-size:12px}
.au-t td{font-size:12.5px}
.au-when{font-size:12px;color:var(--ink3);white-space:nowrap}
.au-who{white-space:nowrap}
.au-obj{font-size:12px;color:var(--ink2)}
.au-det{font-size:12px;color:var(--ink2);max-width:360px;word-break:break-word}
.au-route{font-size:11px;word-break:break-all}
.au-what .tag{margin-left:4px;vertical-align:1px}
/* Спроба без дозволу - нейтральна позначка зліва, без тривожного кольору */
.au-t tr.au-denied td:first-child{box-shadow:inset 3px 0 0 var(--line2)}

/* На телефоні рядок журналу - картка: дія й час угорі, далі хто, об'єкт і подробиці */
@media(max-width:620px){
  .au-t thead{display:none}
  .au-t,.au-t tbody{display:block;width:100%}
  .au-t tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:11px 13px;border-bottom:1px solid var(--line)}
  .au-t tbody tr:last-child{border-bottom:0}
  .au-t td{display:block;padding:0;border:0;min-width:0}
  .au-t td.au-what{grid-column:1;grid-row:1;font-weight:600;font-size:13px}
  .au-t td.au-when{grid-column:2;grid-row:1;text-align:right;font-size:11.5px}
  .au-t td.au-who,.au-t td.au-obj,.au-t td.au-det{grid-column:1 / -1;white-space:normal;max-width:none}
  .au-t td:empty{display:none}
  .au-t td[colspan]{grid-column:1 / -1}
  .au-t tr.au-denied td:first-child{box-shadow:none}
  .au-t tr.au-denied{box-shadow:inset 3px 0 0 var(--line2)}
  .au-filters .fsel{max-width:100%}
  .au-date{flex:1 1 140px}
  .au-date .fdate{flex:1;min-width:0;font-size:16px}
}

/* ==== team ==== */
/* ============================ Команда (#/team) ============================ */
.team{max-width:1180px}
.team-p{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--ink2)}
.team-small{font-size:12px}
.team-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin-bottom:12px}
.team-count{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:-.2px}
.team-seats{font-size:12px;color:var(--ink3);margin-top:2px}
.team-seats.full{color:var(--warn);font-weight:600}
.team-empty{margin-bottom:14px}
.team-empty .empty{padding:26px 12px 18px}
.team-big{min-height:46px;padding:0 22px;font-size:14px}

/* Людина: аватар з ініціалом, ім'я, логін */
.team-person{display:flex;align-items:center;gap:10px;min-width:0}
.team-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-weight:700;font-size:12.5px;background:var(--bg3);color:var(--ink2)}
.team-av.owner{background:var(--brand);color:var(--brand-ink)}
.team-av.admin{background:var(--calm-bg);color:var(--calm)}
.team-av.manager{background:var(--info-bg);color:var(--info)}
.team-av.operator{background:var(--good-bg);color:var(--good)}
.team-names{min-width:0}
.team-name{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-you{color:var(--ink3);font-weight:500}
.team-login{font-family:var(--mono);font-size:11.5px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Стан входу: кольорова крапка + текст (не лише колір - читається і без нього) */
.team-st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;line-height:1.35}
.team-st::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.team-st.good{color:var(--good)}
.team-st.warn{color:var(--warn)}
.team-st.bad{color:var(--bad)}
.team-st.off{color:var(--ink3)}
.team-inline{margin-left:6px;min-height:26px;padding:0 9px;font-size:11.5px}
.team-more{font-size:18px;line-height:1;letter-spacing:1px}
table.team-t td{vertical-align:middle}
.team-off>td,.team-mcard.team-off>*{opacity:.62}
.team-off>td:last-child,.team-mcard.team-off>.team-mtop{opacity:1}

/* Телефон: картки замість таблиці на 7 колонок */
.team-cards{display:none}
@media(max-width:760px){
  .team-tablewrap{display:none}
  .team-cards{display:flex;flex-direction:column;gap:10px}
}
.team-mcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
  display:flex;flex-direction:column;gap:7px}
.team-mtop{display:flex;align-items:center;gap:8px}
.team-mtop .team-person{flex:1}
.team-mtop .team-more{width:40px;min-height:40px}
.team-mchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.team-mchips .cellsub{margin:0}
.team-mline{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.team-mcard>.cellsub{margin-top:-3px}

/* Ролі простими словами */
.team-roles{margin-top:16px}
.team-roles>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:13px;font-weight:600}
.team-roles>summary::-webkit-details-marker{display:none}
.team-roles>summary svg{width:15px;height:15px;color:var(--ink3)}
.team-roles>summary::after{content:'▾';margin-left:auto;color:var(--ink3);font-size:12px;transition:transform .15s}
.team-roles:not([open])>summary::after{transform:rotate(-90deg)}
.team-roles dl{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;margin:14px 0 0;align-items:baseline}
.team-roles dt{white-space:nowrap}
.team-roles dd{margin:0;font-size:13px;color:var(--ink2);line-height:1.5}
.team-owner .hint{font-size:12px;color:var(--ink3)}

/* Меню «⋯» рядка - список кнопок у вікні (зручно і пальцем на телефоні) */
.team-menu-hd{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.team-menu{display:flex;flex-direction:column;gap:7px}
.team-menu .btn{justify-content:flex-start;text-align:left;white-space:normal;min-height:44px;padding:8px 14px;line-height:1.3}

/* Вікно «Новий працівник»: шаблони, потім форма */
.team-tpls{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media(max-width:620px){.team-tpls{grid-template-columns:1fr}}
.team-tpl{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;cursor:pointer;
  padding:12px 14px;min-height:48px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);
  transition:border-color .14s,background .14s}
.team-tpl:hover,.team-tpl:focus-visible{border-color:var(--brand);background:var(--brand-soft);outline:none}
.team-tpl.alt{border-style:dashed}
.team-tpl-t{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.team-tpl-t b{font-size:13.5px}
.team-tpl-d{font-size:12px;color:var(--ink2);line-height:1.45}
.team-tplbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 6px 6px 12px;
  margin-bottom:14px;border-radius:var(--r-sm);background:var(--bg2);font-size:12.5px;font-weight:600}
.team-radio{align-items:flex-start;padding:6px 0}
.team-radio input{margin-top:2px;flex:none}
.team-radio .hint,.team-tg .hint{display:block;font-size:11.5px;color:var(--ink3);font-weight:400;line-height:1.4;margin-top:2px}
.team-radio .tag{vertical-align:1px}
.team-manual{border:1px solid var(--line);border-radius:var(--r-sm);padding:0 13px;margin-bottom:12px}
.team-manual>summary{cursor:pointer;padding:11px 0;font-size:12.5px;font-weight:700;color:var(--ink2);list-style:none}
.team-manual>summary::-webkit-details-marker{display:none}
.team-manual>summary::before{content:'▸';display:inline-block;width:14px;color:var(--ink3);transition:transform .15s}
.team-manual[open]>summary::before{transform:rotate(90deg)}
.team-manual>div{padding-bottom:6px}
.team-tg{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line);cursor:pointer;font-size:13px}
.team-tg input{width:17px;height:17px;accent-color:var(--brand);margin-top:1px;flex:none;cursor:pointer}
.team-tg.off{cursor:not-allowed;opacity:.6}
.team-tg .tag{vertical-align:1px}
.team-sum{background:var(--bg2);border-radius:var(--r-sm);padding:12px 13px;margin-bottom:12px;font-size:12.5px}
.team-sum-hd{font-weight:700;font-size:13px;margin-bottom:4px}
.team-sum-scope{color:var(--ink2);margin-bottom:8px}
.team-sum-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink3)}
.team-chips{display:flex;flex-wrap:wrap;gap:5px;margin:5px 0 9px}
.team-chips:last-child{margin-bottom:0}

/* Готове запрошення / тимчасовий пароль */
.team-msg{font-size:13px;line-height:1.5;min-height:120px}
.team-url{font-size:12px}
.team-kv{margin:0 0 14px}
.team-temp-box{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.team-temp{flex:1;font-size:19px;font-weight:600;letter-spacing:1px;text-align:center;padding:12px 10px;
  background:var(--bg2);border:1px dashed var(--line2);border-radius:var(--r-sm);user-select:all;overflow-wrap:anywhere}
.team-ul{margin:0 0 14px;padding-left:18px;font-size:13px;line-height:1.55;color:var(--ink2)}
.team-ul li+li{margin-top:4px}

/* iOS збільшує сторінку при фокусі на полі з шрифтом < 16px - у вікнах команди на телефоні це заважає */
@media(max-width:620px){
  .team-form .in,.modal .team-access .in{font-size:16px}
  .team-head .btn-row{width:100%}
  .team-head .btn.primary{flex:1}
}

/* ==== profile ==== */
/* ---- Мій профіль, двоетапний вхід, обов'язкові кроки після входу (app-profile.js) ---- */
.pf dl.kv,.pf-setup dl.kv{margin:0}
.pf-id{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pf-avatar{width:48px;height:48px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;
  font-family:var(--display);font-weight:600;font-size:19px;flex:none}
.pf-name{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.2px;overflow-wrap:anywhere}
.pf-inline{display:flex;gap:8px}
.pf-inline .in{flex:1;min-width:0}
/* Підказки поза .field (у app.css .hint стилізовано лише всередині поля) */
.pf .hint,.pf-setup .hint,.pf-codes-screen .hint,.pf-gate .hint,.pf-nudge .hint,.pf-sheet .hint{font-size:12px;color:var(--ink3);line-height:1.45}
.pf .field .hint,.pf-gate .field .hint,.modal .pf-pw+.hint{font-size:11.5px}

/* «Що я можу» */
.pf-perm-grp+.pf-perm-grp{margin-top:14px}
.pf-perm-grp h3{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.45px;color:var(--ink3);margin:0 0 7px}
/* Два стовпці там, де є місце: у власника понад 30 дозволів - список удвічі коротший */
.pf-perms{list-style:none;margin:0;padding:0;display:grid;gap:6px 18px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.pf-perms li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45}
.pf-perms li svg{width:14px;height:14px;color:var(--good);flex:none;margin-top:2px}

/* Пароль з «оком» і живою перевіркою */
.pf-pw{position:relative}
.pf-pw .in{padding-right:44px}
.pf-eye{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:36px;height:34px;border:0;background:transparent;
  border-radius:var(--r-xs);color:var(--ink3);cursor:pointer;display:grid;place-items:center;padding:0}
.pf-eye:hover{color:var(--ink);background:var(--bg3)}
.pf-eye.on{color:var(--ink)}
.pf-eye:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.pf-eye svg{width:17px;height:17px}
.pf-rules{list-style:none;margin:-4px 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--ink3)}
.pf-rules li{display:flex;align-items:center;gap:5px}
.pf-rules li svg{width:13px;height:13px;opacity:.3;transition:opacity .14s}
.pf-rules li.ok{color:var(--good);font-weight:600}
.pf-rules li.ok svg{opacity:1}

/* Налаштування 2FA */
.pf-h{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.3px;margin:0 0 8px;line-height:1.25}
.pf-lead{font-size:13.5px;line-height:1.55;margin:0 0 14px;color:var(--ink2)}
.pf-steps{list-style:none;counter-reset:pfs;margin:0;padding:0;display:grid;gap:18px}
.pf-steps>li{counter-increment:pfs;position:relative;padding-left:36px;min-width:0}
.pf-steps>li::before{content:counter(pfs);position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:50%;
  background:var(--brand);color:var(--brand-ink);font-weight:700;font-size:12px;display:grid;place-items:center}
.pf-step-t{font-size:13.5px;line-height:1.5;margin-bottom:9px}
/* QR завжди на білому (і в темній темі), інакше сканер телефону його не прочитає */
.pf-qr{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:4px;width:216px;max-width:100%;line-height:0}
.pf-qr svg{width:100%;height:auto;display:block}
.pf-open{width:100%;min-height:44px;margin:0 0 12px;text-decoration:none}
.pf-manual{margin-top:12px}
.pf-manual summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--info);padding:3px 0}
.pf-manual dl.kv{margin-top:10px}
.pf-key{font-size:15px;letter-spacing:1px;word-spacing:5px;overflow-wrap:anywhere;user-select:all;margin-right:4px}
.pf-code-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.in.pf-code{font-family:var(--mono);font-size:22px;letter-spacing:6px;text-align:center;width:190px;max-width:100%;padding:8px 10px;font-variant-numeric:tabular-nums}
.in.pf-code::placeholder{color:var(--ink3);opacity:.45}

/* Резервні коди */
.pf-codes{list-style:none;margin:14px 0;padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm);font-family:var(--mono);font-size:14.5px;
  font-variant-ligatures:none}
.pf-codes li{white-space:nowrap}
.pf-codes li span{display:inline-block;min-width:26px;color:var(--ink3);font-size:12px}
.pf-saved{margin:14px 0 2px;font-weight:600;align-items:flex-start;line-height:1.4}
.pf-saved input{margin-top:1px;flex:none}
.pf-end{justify-content:flex-end;margin-top:10px}
.pf-sheet{max-width:600px}

/* Сеанси */
.pf-sess .acts{opacity:1}
.pf-sess .t{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pf-dev{width:34px;height:34px;border-radius:50%;background:var(--bg2);border:1px solid var(--line);display:grid;place-items:center;flex:none;color:var(--ink2)}
.pf-dev svg{width:17px;height:17px}
.pf-only{font-size:12.5px;padding:10px 0 2px}
#pfSessions .hint{margin-bottom:4px}

/* Перехід «налаштувати 2FA» з банера / нагадування - блок коротко підсвічується */
.pf-flash{animation:pfFlash 2.4s var(--ease)}
@keyframes pfFlash{0%,45%{box-shadow:0 0 0 3px var(--brand)}100%{box-shadow:0 0 0 0 transparent}}
#pfMfa{scroll-margin-top:76px}

/* Обов'язковий крок після входу: на весь екран, над меню (z 90), але під вікнами (z 100) */
.pf-gate{position:fixed;inset:0;z-index:95;background:var(--bg2);overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;justify-content:center;padding:28px 16px 40px}
.pf-gate-in{width:100%;max-width:520px;margin:auto 0}
.pf-gate-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.pf-gate-brand .side-sub{text-transform:none;letter-spacing:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-gate-card{padding:22px;box-shadow:var(--shadow)}
.pf-gate-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;font-size:12.5px;color:var(--ink3)}
.pf-gate-foot span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-wide{width:100%;min-height:44px;font-size:14px}

/* Щоденне нагадування */
.pf-nudge{text-align:center;padding:4px 2px}
.pf-big{width:58px;height:58px;border-radius:50%;background:var(--brand-soft);color:var(--warn);display:grid;place-items:center;margin:0 auto 10px}
.pf-big svg{width:28px;height:28px}
.pf-nudge-date{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.5px;margin:2px 0 12px}
.pf-nudge .pf-lead{margin-bottom:10px}
.pf-nudge .pf-lead b{color:var(--ink)}
.pf-nudge .banner{margin:12px 0 0}

/* Друк резервних кодів: лише тимчасовий аркуш, решта сторінки прихована */
.pf-print{display:none}
@media print{
  html.pf-printing body>*:not(.pf-print){display:none!important}
  html.pf-printing body{background:#fff}
  html.pf-printing .pf-print{display:block!important;color:#000;background:#fff;font-family:var(--body);padding:12mm 14mm}
  .pf-print h1{font-size:16pt;margin:0 0 10pt}
  .pf-print p{font-size:11pt;line-height:1.5;margin:0 0 10pt}
  .pf-print ol{font-family:var(--mono);font-size:14pt;line-height:2;columns:2;column-gap:14mm;margin:8pt 0 0;padding-left:8mm}
}

/* Телефон: поля ≥ 16px, щоб iOS Safari не збільшував сторінку при фокусі; коди в один стовпчик */
@media(max-width:620px){
  .pf .in,.pf-gate .in,.pf-sheet .in,.pf-pw .in{font-size:16px}
  .in.pf-code{font-size:22px;width:100%}
  .pf-code-row .btn{width:100%;min-height:42px}
  .pf-codes{grid-template-columns:1fr;font-size:15px}
  .pf-gate{padding:16px 12px 32px}
  .pf-gate-in{margin:4px 0 auto}
  .pf-gate-card{padding:16px}
  .pf-steps>li{padding-left:32px}
  .pf-qr{width:200px}
  .pf-sess .lr-main{flex:1 1 calc(100% - 50px)}
  .pf-sess .acts{margin-left:43px}
}

/* ==== org ==== */
/* ---- Фірма (власник): назва, безпека, тариф, підтримка, вивантаження, небезпечна зона ---- */
.org-p{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--ink2)}
.org-sub{margin-top:4px;font-size:12px;opacity:.9}
.org-hint{margin:0 0 12px;font-size:11.5px;color:var(--ink3);line-height:1.45}
.org-roles{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 12px}
.org-role{border-bottom:1px solid var(--line);padding:8px 0;flex-wrap:wrap}
.org-role:last-child{border-bottom:0}
.org-role-note{margin-left:auto;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.org-role-note svg{width:13px;height:13px}
.org-role-note.warn{color:var(--warn)}
.org-role-note.good{color:var(--good)}
.org-inline-num{display:flex;align-items:center;gap:10px}
.org-inline-num .in{max-width:140px}
.org-inline{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.org-inline .field{margin-bottom:0;flex:1 1 180px;max-width:260px}
.org-inline+.hint{margin-top:8px;font-size:11.5px;color:var(--ink3)}
/* Смужки використання тарифу */
.org-use{margin-bottom:12px}
.org-use-hd{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin-bottom:5px;flex-wrap:wrap}
.org-use-hd>span:first-child{color:var(--ink2);font-weight:600}
.org-bar{height:8px;border-radius:99px;background:var(--bg3);overflow:hidden}
.org-bar>i{display:block;height:100%;border-radius:inherit;background:var(--brand);transition:width .3s var(--ease)}
.org-use.warn .org-bar>i{background:var(--warn)}
.org-use.bad .org-bar>i{background:var(--bad)}
.org-use.bad .org-use-hd .mono{color:var(--bad);font-weight:700}
.org-contact{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2);padding-top:10px;border-top:1px solid var(--line)}
.org-contact svg{width:15px;height:15px;flex:none;opacity:.7}
/* Небезпечна зона */
.org-danger{border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.org-danger .card-hd h2{color:var(--bad)}
.org-dz-row{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.card-hd+.org-dz-row{border-top:0;padding-top:0}
.org-dz-row .btn{flex:none}
.org-dz-t{font-weight:700;font-size:13.5px;margin-bottom:3px}
.org-dz-s{font-size:12.5px;color:var(--ink2);line-height:1.5;margin-top:3px}
.org-conf-name{font-weight:700;font-size:14px;padding:8px 11px;border-radius:var(--r-sm);background:var(--bg2);
  border:1px dashed var(--line2);user-select:all;overflow-wrap:anywhere}
@media(max-width:620px){
  .org-dz-row{flex-direction:column;align-items:stretch}
  .org-inline .field{max-width:none}
  .org-inline .btn{width:100%}
}

/* ---- Платформа: вкладки, плитки, таблиці фірм / тарифів / журналу (на телефоні - картки) ---- */
.plat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.plat-head .plat-tabs{margin-bottom:0}
.plat-kpi-static{cursor:default}
.plat-kpi-static:hover{border-color:var(--line);transform:none}
.plat-search{max-width:280px;padding:6px 11px;border-radius:99px;font-size:12.5px}
.plat-org-name{font-weight:700;font-size:13.5px;overflow-wrap:anywhere}
.plat-acts{white-space:nowrap;text-align:right}
.plat-acts .btn+.btn{margin-left:4px}
.plat-detail{max-width:320px;overflow-wrap:anywhere}
.plat-count{font-size:12px}
.plat-kv{margin-bottom:16px}
.plat-menu{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.plat-menu .btn{justify-content:flex-start}
.plat-msg{font-size:13px;line-height:1.5;min-height:120px}
.plat-plans .in{padding:6px 9px;font-size:13px;min-width:90px}
.plat-plans .plat-num{max-width:120px;text-align:right}
.plat-empty td{padding:0}
/* Картки замість широкої таблиці: підпис колонки береться з data-label */
@media(max-width:760px){
  table.plat-t thead{display:none}
  table.plat-t,table.plat-t tbody,table.plat-t tr,table.plat-t td{display:block;width:100%}
  table.plat-t tbody tr{padding:10px 14px;border-bottom:1px solid var(--line)}
  table.plat-t tbody tr:last-child{border-bottom:0}
  table.plat-t td{border:0;padding:4px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:right}
  table.plat-t td[data-label]::before{content:attr(data-label);font-size:11px;font-weight:700;color:var(--ink3);
    text-transform:uppercase;letter-spacing:.3px;text-align:left;flex:none}
  table.plat-t td.plat-main{display:block;text-align:left;padding-bottom:6px}
  table.plat-t td.plat-acts{justify-content:flex-end;padding-top:8px}
  table.plat-t .plat-cell{text-align:right;min-width:0}
  table.plat-t td.nowrap{white-space:normal}
  .plat-detail{max-width:none}
  .plat-search{max-width:none;flex:1 1 100%}
  .plat-plans .in,.plat-plans .plat-num{max-width:170px;min-width:0}
  .plat-head>.btn{width:100%}
}

/* ==== auth ==== */
/* auth: публічні сторінки (login.html, invite.html) оформлені локальним <style> у самих HTML
   поверх /app.css - до app.css нічого додавати не потрібно. Використано наявні токени й класи:
   --bg2 --bg3 --ink --ink2 --ink3 --line --line2 --brand --info --bad --bad-bg --good --good-bg --warn-bg
   --r-sm --r-xs --mono --display, .card .field .in .hint .btn(.primary) .banner(.warn) .lang-btn .loading .spinner,
   @keyframes spin. */