/* ============================================================
   Useit — спільні токени й компоненти.
   Підключається з кожної сторінки інструмента.
   Правити дизайн сайту тільки тут, не в окремих сторінках.
   ============================================================ */

:root{
  --paper:#E9EDE6;
  --card:#FFFFFF;
  --ink:#12201A;
  --muted:#5A6B5F;
  --line:#CDD6C8;
  --accent:#16624C;
  --accent-soft:#DCE9E2;
  --alert:#9C3B22;
  --alert-soft:#F6E7E1;
  --slip:#12201A;
  --slip-ink:#F2F6F0;
  --slip-muted:#9FB3A5;
  --slip-line:#2C3A31;
  --radius:4px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#101511;
    --card:#171D18;
    --ink:#E7EDE6;
    --muted:#9BAA9F;
    --line:#2A332B;
    --accent:#63C2A1;
    --accent-soft:#1C2E26;
    --alert:#D98466;
    --alert-soft:#2E211C;
    --slip:#06231B;
    --slip-ink:#EAF4EE;
    --slip-muted:#8FAE9C;
    --slip-line:#194034;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Commissioner","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.55;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
a{color:var(--accent)}
h1,h2,h3{margin:0; font-weight:600; line-height:1.2}
h1{font-size:clamp(26px,4.4vw,38px); letter-spacing:-.015em; max-width:17ch}
h2{font-size:clamp(20px,2.6vw,25px); letter-spacing:-.01em}
h3{font-size:17px}
p{margin:.7em 0; max-width:68ch}

.wrap{max-width:1060px; margin:0 auto; padding:0 20px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }

/* ---------- шапка ---------- */
.masthead{border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex; align-items:baseline; gap:12px; padding-top:16px; padding-bottom:16px; flex-wrap:wrap}
.mark{font-family:"Unbounded",sans-serif; font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--ink); text-decoration:none}
.mark-sub{color:var(--muted); font-size:14px}
.badge{margin-left:auto; border:1px solid var(--line); border-radius:999px; padding:2px 11px; font-size:14px; color:var(--muted)}

.intro{padding:34px 0 26px}
.intro p{color:var(--muted); font-size:16px}

/* ---------- блоки ---------- */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px}

.field{margin-bottom:22px}
.field:last-child{margin-bottom:0}
.field > label,.legend{display:block; font-weight:600; font-size:15px; margin-bottom:8px}
.hint{color:var(--muted); font-size:14px; margin:6px 0 0}
fieldset{border:0; margin:0 0 22px; padding:0}
fieldset:last-of-type{margin-bottom:0}

/* перемикач */
.seg{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.seg input{position:absolute; opacity:0; width:1px; height:1px}
.seg label{padding:11px 6px; text-align:center; cursor:pointer; font-size:15px; border-left:1px solid var(--line); background:transparent}
.seg label:first-of-type{border-left:0}
.seg input:checked + label{background:var(--accent); color:#fff; font-weight:600}
.seg input:focus-visible + label{outline:2px solid var(--accent); outline-offset:-4px}
.seg small{display:block; font-size:12px; opacity:.72; font-weight:400}

/* поле суми */
.money{display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius); background:var(--card)}
.money input{
  flex:1; min-width:0; border:0; background:transparent; color:var(--ink);
  font:600 26px/1.2 "Commissioner",sans-serif; padding:13px 0 13px 14px; font-feature-settings:"tnum" 1;
}
.money input:focus{outline:0}
.money:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.money .cur{padding:0 14px; color:var(--muted); font-size:15px}

.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.tabs input{position:absolute; opacity:0; width:1px; height:1px}
.tabs label{border:1px solid var(--line); border-radius:999px; padding:5px 14px; font-size:14px; cursor:pointer}
.tabs input:checked + label{border-color:var(--accent); color:var(--accent); font-weight:600}
.tabs input:focus-visible + label{outline:2px solid var(--accent); outline-offset:2px}

.check{display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--line)}
.check input{margin:3px 0 0; width:18px; height:18px; accent-color:var(--accent); flex:none}
.check span{font-size:15px}
.check em{display:block; font-style:normal; color:var(--muted); font-size:13.5px; line-height:1.4}

/* ---------- темна картка результату ---------- */
.slip{background:var(--slip); color:var(--slip-ink); border-radius:var(--radius); padding:24px 22px}
.slip h2{font-size:14px; font-weight:500; color:var(--slip-muted)}
.slip .big{font-family:"Unbounded",sans-serif; font-weight:700; font-size:clamp(32px,7vw,44px); letter-spacing:-.03em; margin:6px 0 2px; line-height:1}
.slip .sub{color:var(--slip-muted); font-size:14px; margin:0 0 20px}
.lines{list-style:none; margin:0; padding:0; border-top:1px solid var(--slip-line)}
.lines li{display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--slip-line); font-size:15px}
.lines b{font-weight:600; white-space:nowrap}
.lines .zero{color:var(--slip-muted)}
.lines small{display:block; color:var(--slip-muted); font-size:12.5px; font-weight:400}
.after{display:flex; justify-content:space-between; gap:14px; font-size:15px; padding:14px 0 0}
.after span:last-child{font-weight:600}
.slip-note{color:var(--slip-muted); font-size:13px; margin:14px 0 0}
.slip .btn{
  margin-top:16px; width:100%; background:transparent; color:var(--slip-ink);
  border:1px solid var(--slip-line); border-radius:var(--radius); padding:10px;
  font:500 15px "Commissioner",sans-serif; cursor:pointer;
}
.slip .btn:hover{border-color:var(--slip-muted)}

/* ---------- секції й текст ---------- */
section{padding:34px 0; border-top:1px solid var(--line)}
section > h2{margin-bottom:14px}
article{max-width:72ch}
article h3{margin:22px 0 4px}

table{width:100%; border-collapse:collapse; font-size:15px; margin-top:14px}
th,td{text-align:left; padding:10px 12px 10px 0; border-bottom:1px solid var(--line); vertical-align:top}
th{font-weight:600; color:var(--muted); font-size:13.5px}
td.num,th.num{text-align:right; padding-right:0; white-space:nowrap}

details{border-bottom:1px solid var(--line); padding:14px 0}
details summary{cursor:pointer; font-weight:600; font-size:16.5px; list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+"; display:inline-block; width:22px; color:var(--accent); font-weight:400}
details[open] summary::before{content:"–"}
details p{margin:10px 0 0 22px; font-size:15.5px}

.disclaimer{
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--alert);
  border-radius:var(--radius); padding:16px 18px; font-size:14.5px; color:var(--muted);
}
.disclaimer p{max-width:none; margin:0}

/* ---------- рекламні блоки ----------
   Порожній блок не займає місця, тому макет не ламається до схвалення AdSense. */
.ad{margin:24px 0}
.ad:empty{display:none}

/* ---------- підвал ---------- */
footer{border-top:1px solid var(--line); padding:26px 0 44px; font-size:14px; color:var(--muted)}
footer a{color:var(--muted)}
footer nav{margin-bottom:10px; display:flex; gap:18px; flex-wrap:wrap}
footer nav a{color:var(--accent); text-decoration:none}
footer nav a:hover{text-decoration:underline}