:root {
  --bg-color: #0f1116;
  --card-bg: #1a1d24;
  --text-color: #e4e6eb;
  --muted: #9ba0aa;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --radius: 10px;
}
*{box-sizing:border-box}
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  margin:0; background:var(--bg-color); color:var(--text-color); line-height:1.6;
}
h1,h2,h3,h4,h5 { color: var(--text-color); margin-top:0.6em; }
a { color: var(--accent); text-decoration:none; }
a:hover { color: var(--accent-hover); }
.text-center{text-align:center}
.wrap{max-width:1100px;margin:0 auto;padding:1rem}
header {padding:1.25rem 0; margin-bottom:1rem; background:var(--card-bg); box-shadow:0 1px 4px rgba(0,0,0,0.5); border-radius:var(--radius)}
nav.tab-nav {margin:1rem 0; text-align:center}
.tab-nav__list {list-style:none; display:flex; flex-wrap:wrap; justify-content:center; padding:0; margin:0}
.tab-nav__list li {margin:0.25rem}
.tab-nav__list a {display:block; padding:0.5rem 1rem; border-radius:var(--radius); background:var(--card-bg); color:var(--text-color); font-weight:500}
.tab-nav__list li.active a, .tab-nav__list a:hover {background:var(--accent); color:#fff}
.tab-content {margin-top:1rem}
.tab-content__item {background:var(--card-bg); padding:1rem; border-radius:var(--radius); box-shadow:0 1px 4px rgba(0,0,0,0.4); margin-bottom:1rem}
.btn {display:inline-block; padding:0.6rem 1rem; border-radius:var(--radius); border:2px solid var(--accent); color:var(--accent); background:transparent; font-weight:600; text-align:center}
.btn:hover {background:var(--accent); color:#fff}
.btn--stroke.u-fullwidth {width:100%; text-align:center}
ul {margin:0.5rem 0 0.5rem 1.25rem}
footer {text-align:center; padding:2rem 1rem; color:var(--muted)}
input,textarea{width:100%;padding:0.5rem;margin-top:0.25rem;background:#11141a;color:var(--text-color);border:1px solid #2c3038;border-radius:var(--radius)}
img{max-width:100%;height:auto;border-radius:6px;margin-top:0.5rem}