:root{
  --bg-grad-a:#e6e9e9;
  --bg-grad-b:#d8dddd;
  --text:#545454;
  --text-strong:#222;
  --brand-dark:#253347;
  --card-border:#dce1e5;
  --btn-border:#e2e6ea;
  --header-h:72px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;
  height: 100%;
  display: flex;
  flex-direction: column;}
main {
  flex: 1 0 auto;
}
html{
  background:var(--bg-grad-a);
  background-image:linear-gradient(270deg,var(--bg-grad-a) 0%,var(--bg-grad-b) 100%);
  -webkit-font-smoothing:antialiased;
}
footer {
  flex-shrink: 0;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  color: #666;
  background: #f9f9f9;
  border-top: 1px solid #e1e1e1;
  margin-top:auto;
}
body{
  background:#fff;
  color:var(--text);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(16px,1.9vw,18px);
  line-height:1.5;
  margin:0 auto;
  min-height: max-content;    
  max-width:90%;
  padding:2em 2em 3em;
  box-shadow:0 0 2px rgba(0,0,0,.06);
}

h1,h2,h3{color:var(--text-strong);font-weight:600;line-height:1.3}
h1{font-size:clamp(24px,3.2vw,36px);margin:.6em 0 .3em}
h2{font-size:clamp(20px,2.6vw,28px);margin:1em 0 .5em}
h3{font-size:clamp(18px,2.2vw,22px);margin:.8em 0 .4em}

a{color:#0083e8;text-decoration:none}
a:hover{text-decoration:underline}

img{
  display:block;margin:.5em auto;border:1px solid rgba(0,0,0,.12);border-radius:3px;background:transparent;
  animation:colorize 2s cubic-bezier(0,0,.78,.36) 1;
}
@keyframes colorize{0%{filter:grayscale(100%)}100%{filter:grayscale(0%)}}

td{padding:10px}

.site-header{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);
  background:#f9fafb;box-shadow:0 1px 3px rgba(0,0,0,.08);z-index:1000;
}
.header-inner{
  max-width:1200px;width:100%;height:var(--header-h);
  margin:0 auto;padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.logo-block{display:flex;align-items:center;gap:12px;min-width:0;flex-shrink:1}
.logo{
  width:clamp(44px,4.6vw,56px);height:clamp(44px,4.6vw,56px);
  border-radius:50%;object-fit:cover;background:#fff;border:1px solid var(--card-border);box-shadow:0 0 2px rgba(0,0,0,.06);
}
.site-title{
  margin:0;font-weight:800;font-size:clamp(18px,2.4vw,26px);color:var(--brand-dark);
  line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lang-switcher{display:flex;gap:8px}
.lang-switcher button{
  background:#fff;border:1px solid var(--btn-border);border-radius:8px;
  padding:clamp(6px,1vw,8px) clamp(10px,1.7vw,14px);
  font-size:clamp(14px,1.2vw,15px);font-weight:600;color:#222;cursor:pointer;transition:.2s;
}
.lang-switcher button:hover{background:#f1f3f5}
.lang-switcher button.active{background:#253347;color:#fff;border-color:#253347}

.page-content{margin-top:calc(var(--header-h) + 10px);padding:0 16px}

table.bordered{
  width:100%;
  border-collapse:collapse;
  border:1px solid #d2d6da;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 1px 1px #ccc;
  background:#fff;
}
table.bordered thead th{
  background:#e9f1fa;
  font-weight:600;
  text-align:center;
  padding:10px;
  border:1px solid #d2d6da;
}
table.bordered td,table.bordered th{
  border:1px solid #d2d6da;
  padding:10px;
  text-align:left;
  vertical-align:top;
}
table.bordered tr:hover{background:#fbf8e9;transition:.1s ease-in-out}
table.bordered td[rowspan]{background:#f4f8fb}

.links-card{border-radius:10px}

.br-sm{display:none}
@media (max-width: 768px){
  html{background:#fff}
  body{
    max-width:100%;width:100%;margin:0;padding:0 0 28px;box-shadow:none;
    font-size:16.5px;
  }
  .page-content{margin-top:calc(var(--header-h) + 8px);padding:0}

@media (max-width: 768px) {
  .page-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-content h1,
  .page-content h2,
  .page-content h3,
  .page-content p,
  .page-content span {
    margin-left: 0;
    margin-right: 0;
  }

  .page-content div:not(:has(table)):not(.links-card):not(.table-container) {
    margin-left: 0;
    margin-right: 0;
  }
 
}

  .page-content > table[align="right"], .links-card{
    display:block;width:100% !important;max-width:100%;
    margin:10px 0 14px;border-left:0 !important;border-right:0 !important;border-radius:14px !important;
    overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)
  }
  .page-content > table[align="right"] tbody, .links-card tbody{display:block}
  .page-content > table[align="right"] tr:first-child, .links-card tr:first-child{
    display:flex;gap:0;border-bottom:1px solid #e6e6e6 !important
  }
  .page-content > table[align="right"] tr:first-child td, .links-card tr:first-child td{
    flex:1 1 33.33%;display:flex;align-items:center;justify-content:center;
    padding:12px 0;border:0 !important
  }
  .page-content > table[align="right"] tr:first-child td:not(:last-child),
  .links-card tr:first-child td:not(:last-child){
    border-right:1px solid #e6e6e6 !important;
  }
  .page-content > table[align="right"] tr:first-child img, .links-card tr:first-child img{
    width:56px !important;height:56px !important;margin:0;border:0
  }
  .page-content > table[align="right"] tr:nth-child(2), .links-card tr:nth-child(2){
    display:block;border-top:1px solid #e6e6e6 !important
  }
  .page-content > table[align="right"] tr:nth-child(2) td, .links-card tr:nth-child(2) td{
    display:block;padding:12px 16px;border:0 !important
  }
  .page-content > table[align="right"] tr:nth-child(2) img, .links-card tr:nth-child(2) img{
    height:72px !important;width:auto !important;margin:8px auto 6px;border:0
  }
  .page-content > table[align="right"] tr:nth-child(2) div, .links-card tr:nth-child(2) div{
    font-size:18px !important;text-align:center
  }

  .br-sm{display:inline}
table.bordered{
  width: calc(100% - 1px);
  margin: 5px 5px;
  border-radius: 6px;
}

  table.bordered thead th,
  table.bordered td{
    padding: 4px 6px;
    line-height: 1.16;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: manual;
  }

  table.bordered.cols-4 thead tr th:nth-child(1),
  table.bordered.cols-4 tbody tr td:nth-child(1){ width: 17%; }
  table.bordered.cols-4 thead tr th:nth-child(2),
  table.bordered.cols-4 tbody tr td:nth-child(2){ width: 41%; }
  table.bordered.cols-4 thead tr th:nth-child(3),
  table.bordered.cols-4 tbody tr td:nth-child(3){ width: 14%; }
  table.bordered.cols-4 thead tr th:nth-child(4),
  table.bordered.cols-4 tbody tr td:nth-child(4){ width: 28%; }

}

@media (max-width: 480px){
  table.bordered{
    font-size: 10.5px;
  }
  table.bordered thead th,
  table.bordered td{
    padding: 4px 5px;
  }
}