/* Базові змінні та глобальні стилі */
:root {
  --color-bkg: rgb(15,22,48);
  --color-secondary: rgba(213,221,237,0.6);
  --color-tertiary: rgba(233,230,243,0.8);
  --color-banner: rgba(213,221,237,0.8);
}
*{box-sizing:border-box;}
html{font-size:1em;margin:2rem auto;padding:1rem;}
body{font-family:system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;line-height:1.5;color:var(--color-secondary);background:var(--color-bkg);margin:0;}

/* Типографіка */
h1,h2,h3,h4,h5,h6{font-weight:400;color:var(--color-banner);margin:0 0 1em;}
h1{font-size:2.25rem;}h2{font-size:1.5rem;}h3{font-size:1.125rem;}
h4{font-size:1rem;}h5{font-size:0.875rem;}h6{font-size:0.75rem;}
p{margin:1rem 0;text-align:justify;}

/* Таблиці */
table{width:100%;border-collapse:collapse;margin-top:10px;}
table tr:hover td{color:var(--color-tertiary);}
table caption{text-align:left;padding-bottom:0.625em;}
table th,td{padding:0.2rem 0.5rem;}
table thead{border-top:1px dotted currentColor;border-bottom:1px dotted currentColor;}
table .no-border{border:none;background:none;text-align:left;}

/* Посилання та іконки */
a{text-decoration:none;padding:3px 2px 4px;transition:0.2s;color:var(--color-tertiary);border-radius:3px;display:inline-flex;align-items:center;gap:4px;line-height:1;}
a:hover{background:var(--color-banner);color:var(--color-bkg);}
.icon{display:inline-block;width:1.4em;height:1.6em;}
.icon-up{display:inline-block;width:1.3em;height:1.2em;}

/* Відступи */
.mar10-r{margin:0 10px 0 0;} .mar10-l{margin:0 0 0 10px;}
.mar10-t{margin:10px 0 0;} .mar10-b{margin:0 0 10px;}
.mar20-r{margin-right:20px!important;} .mar20-l{margin-left:20px!important;}
.mar20-tb{margin:20px 0;}
.t90{font-size:0.9em;} .t80{font-size:0.8em;} .t-center{text-align:center;}

/* Хедер */
.header{display:flex;align-items:baseline;justify-content:space-between;}
hr{border:none;border-top:1px dotted currentColor;margin:20px 0;}
.wrapper{padding:5px;max-width: 45em;margin:0 auto;}
.columns{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;}
.column{flex:1;border:1px dotted var(--color-tertiary);border-radius:5px;padding:20px;}

/* Рядки */
.flex { display:flex; justify-content:space-between; align-items:stretch; }
.no-wrap {white-space: nowrap;}
.dotted{display:flex;align-items:center;min-width:0;}
.dotted:after{border-bottom:1px dashed currentColor;content:'';flex:1;margin-left:0.5em;opacity:0.3;min-width:6px;}
.rowresize{display:grid;grid-template-columns:1em minmax(0,1fr) 4.1em 5em;gap:0 10px;align-items:center;padding:3px;border-bottom:1px solid rgba(255,255,255,0.03);}
.rowresize>.t90,.rowresize>.t80{display:flex;align-items:center;}

/* Адаптивність */
@media(max-width:768px){html{font-size:1em;}}
@media(max-width:568px){
  .columns{flex-direction:column;}
  .rowresize{grid-template-columns:1fr 4.1em 5em;}
  .rowresize>:first-child{display:none;}
  .column{width:100%;flex:none;}
}
@media(max-width:480px){
  html{font-size:1.0625em;} /* трохи більший шрифт */
  .rowresize{grid-template-columns:1fr 5em;}
  .header,.rowresize>:nth-child(3){display:none;}
}
@media(max-width:320px){
  .rowresize{grid-template-columns:1fr;font-size:0.8em;}
  .rowresize>:nth-child(4){display:none;}
}
@media(min-width:768px) and (max-width:1024px){
  img{max-width:100%;height:auto;}
}

/* Друк документу */
@media print{
  body{color:#000;background:#fff;}
  h1,h2,h3{color:#000;}
  ul,img{page-break-inside:avoid;}
  .hide-print{display:none!important;}
}

/* Стиль графіка */
.generate-chart{display:flex;align-items:flex-end;gap:1px;height:50px;overflow:hidden;}
.bar{flex:0 0 3px;text-align:center;}
.bar-rect{width:100%;background:rgba(107,114,128,0.6);transition:height 0.3s ease,background-color 0.2s ease;}
.bar-rect:hover{background:var(--color-tertiary);}
.dot{margin-top:6px;width:3px;height:3px;border-radius:50%;margin:auto;}
.chart-dates,.chart-dates span{font-size:0.8em!important;line-height:1.2;display:flex;justify-content:space-between;margin-top:4px;}

/* Стиль кнопки UP */
#toTopBtn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(107,114,128,0.6);border:1px solid var(--color-tertiary);position:fixed;bottom:5%;right:4%;z-index:999;cursor:pointer;opacity:0.5;transition:0.3s ease-in-out;display:none;}
#toTopBtn svg{width:24px;height:24px;fill:var(--color-tertiary);}
#toTopBtn:hover{opacity:0.9;}