/* =========================================================================
   ОБЕРТ / Design System — ШАР КОМПОНЕНТІВ
   Жодного «магічного» числа: усе через токени з theme.css.
   Порядок: база -> типографіка -> оболонка -> елементи форм -> компоненти.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-text); font-size:var(--fs-md); line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent-text);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-8) 0}
::selection{background:var(--accent-2-soft);color:var(--text)}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-xs);
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- типографіка ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:var(--tr-tight);
  line-height:var(--lh-tight);margin:0}
h1{font-size:clamp(var(--fs-4xl),6vw,var(--fs-6xl))}
h2{font-size:clamp(var(--fs-2xl),4vw,var(--fs-4xl))}
h3{font-size:var(--fs-xl);line-height:var(--lh-snug)}
h4{font-size:var(--fs-lg);line-height:var(--lh-snug);font-weight:600}
p{margin:0}
.lead{font-size:clamp(var(--fs-lg),2.2vw,var(--fs-xl));line-height:var(--lh-snug);color:var(--text-2)}
.muted{color:var(--text-2)}
.dim{color:var(--text-3)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.measure{max-width:66ch}

/* Ярличок секції — сигнатурний елемент системи: латунна волосінь + розрядка */
.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-3);
  font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--accent-2);margin:0 0 var(--sp-4)}
.eyebrow::before{content:"";width:var(--sp-8);height:2px;background:var(--accent-2-line);
  flex:0 0 auto;border-radius:var(--r-full)}

/* ---------- сітка сторінки ---------- */
.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--page-narrow);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sp-20)}
.section-sm{padding-block:var(--sp-12)}
.stack-2>*+*{margin-top:var(--sp-2)}
.stack-3>*+*{margin-top:var(--sp-3)}
.stack-4>*+*{margin-top:var(--sp-4)}
.stack-6>*+*{margin-top:var(--sp-6)}
.stack-8>*+*{margin-top:var(--sp-8)}
.row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.grid{display:grid;gap:var(--sp-6)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.spacer{flex:1 1 auto}

/* ---------- оболонка: шапка ---------- */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
.topbar .inner{display:flex;align-items:center;gap:var(--sp-6);
  min-height:64px;max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.brand{display:inline-flex;align-items:center;gap:var(--sp-3);text-decoration:none;color:var(--text);
  font-family:var(--font-display);font-weight:700;letter-spacing:var(--tr-tight);font-size:var(--fs-lg)}
.brand:hover{color:var(--text)}
.brand .mark{width:32px;height:32px;flex:0 0 auto}
.nav{display:flex;align-items:center;gap:var(--sp-1)}
.nav a{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);color:var(--text-2);
  text-decoration:none;font-size:var(--fs-xs);font-weight:600;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-text)}
/* На вузькому екрані меню не ховається, а стає прокруткою другим рядком:
   інакше з телефона між екранами не перейти взагалі. */
@media (max-width:860px){
  .topbar .inner{flex-wrap:wrap;row-gap:var(--sp-2);padding-bottom:var(--sp-2);gap:var(--sp-3)}
  .nav.collapse{order:9;width:100%;overflow-x:auto;overscroll-behavior-x:contain;
    padding-bottom:2px;margin-inline:calc(var(--sp-1) * -1)}
  .nav.collapse a{white-space:nowrap;flex:0 0 auto}
}

/* перемикач теми */
.theme-toggle{display:inline-flex;align-items:center;gap:var(--sp-2);
  height:36px;padding-inline:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-full);
  background:var(--surface);color:var(--text-2);cursor:pointer;font-size:var(--fs-2xs);font-weight:600;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.theme-toggle:hover{border-color:var(--line-strong);color:var(--text)}
.theme-toggle svg{width:16px;height:16px}

/* ---------- плашка чесності ---------- */
.synthetic{background:var(--accent-2-soft);border-bottom:1px solid var(--accent-2-line);
  color:var(--text);font-size:var(--fs-2xs);line-height:var(--lh-snug)}
.synthetic .inner{max-width:var(--page);margin-inline:auto;padding:var(--sp-2) var(--gutter);
  display:flex;gap:var(--sp-3);align-items:flex-start}
.synthetic b{font-weight:700}
.synthetic svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--accent-2)}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:44px;padding:0 var(--sp-5);border-radius:var(--r-sm);border:1px solid transparent;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tr-flat);cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),
             color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--sh-1)}
.btn-primary:hover{background:var(--accent-hover);color:var(--on-accent);box-shadow:var(--sh-2)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--surface-2);color:var(--text);border-color:var(--text-3)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:var(--danger-hover);color:#fff}
.btn-sm{min-height:34px;padding:0 var(--sp-3);font-size:var(--fs-2xs);border-radius:var(--r-xs)}
.btn-lg{min-height:52px;padding:0 var(--sp-8);font-size:var(--fs-md)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn-block{width:100%}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--text-2);cursor:pointer;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.icon-btn:hover{border-color:var(--line-strong);color:var(--text)}
.icon-btn svg{width:18px;height:18px}

/* ---------- поля ---------- */
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.label{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.02em;color:var(--text-2)}
.label .req{color:var(--danger)}
.input,.select,.textarea{
  width:100%;min-height:44px;padding:var(--sp-2) var(--sp-3);
  background:var(--surface);color:var(--text);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font-size:var(--fs-sm);transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.textarea{min-height:104px;resize:vertical;padding:var(--sp-3)}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--text-3)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.select{appearance:none;padding-right:var(--sp-8);
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.hint{font-size:var(--fs-2xs);color:var(--text-3)}
.field.invalid .input,.field.invalid .select,.field.invalid .textarea{border-color:var(--danger)}
.field.invalid .input:focus{box-shadow:0 0 0 3px var(--danger-soft)}
.err{display:none;font-size:var(--fs-2xs);color:var(--danger);font-weight:600}
.field.invalid .err{display:block}
.switch{display:inline-flex;align-items:center;gap:var(--sp-3);cursor:pointer;font-size:var(--fs-xs)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:44px;height:24px;border-radius:var(--r-full);background:var(--line-strong);
  position:relative;transition:background var(--dur-2) var(--ease);flex:0 0 auto}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;
  border-radius:var(--r-full);background:var(--surface);box-shadow:var(--sh-1);
  transition:transform var(--dur-2) var(--ease)}
.switch input:checked+.track{background:var(--accent)}
.switch input:checked+.track::after{transform:translateX(20px)}
.switch input:focus-visible+.track{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- бейджі, чіпи, теги ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);
  padding:var(--sp-1) var(--sp-2);border-radius:var(--r-xs);
  font-size:var(--fs-3xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--surface-2);color:var(--text-2);white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:var(--r-full);background:currentColor}
.badge-ok{background:var(--ok-soft);color:var(--accent-text)}
.badge-warn{background:var(--warn-soft);color:var(--accent-2)}
.badge-danger{background:var(--danger-soft);color:var(--danger)}
.badge-info{background:var(--info-soft);color:var(--info)}
.badge-neutral{background:var(--surface-2);color:var(--text-3)}
.tag{display:inline-flex;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-xs);
  border:1px solid var(--line);background:var(--surface);
  font-family:var(--font-mono);font-size:var(--fs-3xs);color:var(--text-3)}
.chip{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:36px;
  padding:0 var(--sp-3);border-radius:var(--r-full);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--text-2);font-size:var(--fs-2xs);font-weight:600;cursor:pointer;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.chip:hover{border-color:var(--text-3);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip .n{font-family:var(--font-mono);opacity:.75}

/* ---------- картки ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1)}
.card-pad{padding:var(--sp-6)}
.card-hover{transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--sh-3);border-color:var(--line-strong)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--line)}
.card-body{padding:var(--sp-6)}
.card-foot{padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--line);background:var(--surface-2);
  border-radius:0 0 var(--r-lg) var(--r-lg)}

.stat{padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.stat .k{font-size:var(--fs-2xs);color:var(--text-3);font-weight:600}
.stat .v{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:700;
  letter-spacing:var(--tr-tight);margin-top:var(--sp-1);line-height:1.1}
.stat .d{font-size:var(--fs-2xs);margin-top:var(--sp-1);color:var(--text-3)}
.stat .d.up{color:var(--ok)} .stat .d.down{color:var(--danger)}

/* ---------- таблиця ---------- */
.table-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  /* contain:paint утримує ширину таблиці всередині контейнера: без нього Chrome
     віддає перевитрату ширини кореню сторінки, і вся сторінка їде вбік на телефоні */
  contain:paint}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-xs);min-width:720px}
table.tbl th{text-align:left;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-3xs);
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:700;
  border-bottom:1px solid var(--line-strong);white-space:nowrap;background:var(--surface)}
table.tbl td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tbody tr{transition:background var(--dur-1) var(--ease)}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.tbl tr[data-sel="1"]{background:var(--accent-soft)}
.sortable{cursor:pointer;user-select:none}
.sortable:hover{color:var(--text)}
.sortable .arr{opacity:.4;font-size:9px}
.sortable[aria-sort="ascending"] .arr,.sortable[aria-sort="descending"] .arr{opacity:1;color:var(--accent-2)}

/* ---------- порожньо / завантаження / помилка ---------- */
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3);
  padding:var(--sp-16) var(--sp-6)}
.state svg.art{width:112px;height:112px;color:var(--line-strong)}
.state h3{font-size:var(--fs-lg)}
.state p{max-width:44ch;color:var(--text-2);font-size:var(--fs-xs)}
.state.error svg.art{color:var(--danger)}

.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--line) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--r-xs)}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.sk-line{height:12px;margin-bottom:var(--sp-2)}
.sk-line.w-40{width:40%} .sk-line.w-60{width:60%} .sk-line.w-80{width:80%}
.sk-block{height:120px;border-radius:var(--r-md)}

.notice{display:flex;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--surface-2);font-size:var(--fs-xs)}
.notice svg{width:20px;height:20px;flex:0 0 auto}
.notice-danger{background:var(--danger-soft);border-color:var(--danger);color:var(--text)}
.notice-danger svg{color:var(--danger)}
.notice-warn{background:var(--warn-soft);border-color:var(--accent-2-line)}
.notice-warn svg{color:var(--accent-2)}
.notice-ok{background:var(--ok-soft);border-color:var(--accent)}
.notice-ok svg{color:var(--accent)}

/* ---------- модалка ---------- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--sp-4)}
.modal .veil{position:absolute;inset:0;background:var(--overlay);animation:fade var(--dur-2) var(--ease)}
.modal .panel{position:relative;width:min(520px,100%);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-4);
  animation:pop var(--dur-3) var(--ease);max-height:88vh;overflow:auto}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- тост ---------- */
.toast-zone{position:fixed;left:50%;bottom:var(--sp-6);transform:translateX(-50%);z-index:90;
  display:flex;flex-direction:column;gap:var(--sp-2);width:min(420px,calc(100% - var(--sp-8)))}
.toast{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);background:var(--surface-inv);color:var(--text-inv);
  box-shadow:var(--sh-3);font-size:var(--fs-xs);animation:pop var(--dur-3) var(--ease)}
.toast svg{width:18px;height:18px;color:var(--pine-300);flex:0 0 auto}

/* ---------- вкладки ---------- */
.tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-xs);font-weight:700;color:var(--text-3);
  cursor:pointer;white-space:nowrap;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent-2-line)}

/* ---------- бічна панель кабінету/адмінки ---------- */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:calc(100vh - 64px)}
.side{border-right:1px solid var(--line);background:var(--surface);padding:var(--sp-6) var(--sp-4)}
.side .group{font-size:var(--fs-3xs);text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-3);font-weight:700;margin:var(--sp-6) var(--sp-3) var(--sp-2)}
.side .group:first-child{margin-top:0}
.side a{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-sm);color:var(--text-2);text-decoration:none;font-size:var(--fs-xs);font-weight:600;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.side a:hover{background:var(--surface-2);color:var(--text)}
.side a[aria-current="page"]{background:var(--accent-soft);color:var(--accent-text)}
.side a svg{width:18px;height:18px;flex:0 0 auto}
.main{padding:var(--sp-8) var(--sp-6);min-width:0}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{border-right:0;border-bottom:1px solid var(--line);padding:var(--sp-3) var(--sp-4);
    display:flex;gap:var(--sp-1);overflow-x:auto}
  .side .group{display:none}
  .side a{white-space:nowrap}
  .main{padding:var(--sp-6) var(--sp-4)}
}

/* ---------- підвал ---------- */
.foot{border-top:1px solid var(--line);background:var(--surface);padding-block:var(--sp-10);margin-top:var(--sp-16)}
.foot .cols{display:grid;gap:var(--sp-8);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.foot h4{font-family:var(--font-text);font-size:var(--fs-2xs);text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-3);margin-bottom:var(--sp-3)}
.foot a{display:block;color:var(--text-2);text-decoration:none;font-size:var(--fs-xs);padding-block:var(--sp-1)}
.foot a:hover{color:var(--accent-text)}
.foot .bottom{margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--line);
  font-size:var(--fs-2xs);color:var(--text-3)}

/* ---------- утиліти ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hide{display:none !important}
@media (max-width:700px){ .hide-sm{display:none !important} }
.skip{position:absolute;left:var(--sp-4);top:-64px;z-index:100;background:var(--accent);
  color:var(--on-accent);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);
  transition:top var(--dur-2) var(--ease);text-decoration:none;font-weight:700}
.skip:focus{top:var(--sp-4);color:var(--on-accent)}