/* ─────────────────────────────────────────────
   IT-BG.org · New design — Session 5A
   Design tokens + shell (header/nav/footer)
   + backward-compatible content styles
   ───────────────────────────────────────────── */

/* ── 1. Design tokens ── */
:root {
  --ink:         oklch(0.18 0.012 250);
  --ink-2:       oklch(0.36 0.012 250);
  --ink-3:       oklch(0.55 0.010 250);
  --line:        oklch(0.91 0.006 250);
  --line-2:      oklch(0.95 0.006 250);
  --bg:          oklch(0.99 0.003 250);
  --bg-2:        oklch(0.97 0.005 250);
  --brand:       oklch(0.55 0.18 250);
  --brand-soft:  oklch(0.96 0.03 250);
  --brand-ink:   oklch(0.38 0.18 250);
  --sans:        'Manrope', ui-sans-serif, system-ui, sans-serif;
  --mono:        'JetBrains Mono', ui-monospace, monospace;
  --radius:      10px;
  --container:   1200px;
}

/* ── 2. Reset + base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--brand-ink);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13px;
}
a:hover { text-decoration: underline; color: var(--ink); }
table { border-collapse: collapse; }
img   { max-width: 100%; height: auto; display: block; }
input, button, select, textarea { font-family: var(--sans); }
button { -webkit-appearance: none; appearance: none; }

/* ── 3. Topbar ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.topbar-main {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Logo */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
  color: var(--ink);
}
.site-logo:hover { text-decoration: none; color: var(--ink); }
.logo-text {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.logo-text em { font-style: normal; color: var(--brand); }

/* Search */
.topbar-search {
  flex: 1;
  position: relative;
  min-width: 0;
}
.topbar-search input {
  width: 100%;
  height: 40px;
  padding: 0 80px 0 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
}
.topbar-search input:focus { border-color: var(--brand); background: var(--bg); }
.topbar-search input::placeholder { color: var(--ink-3); }
.search-icon {
  position: absolute;
  left: 12px;
  top: 12px;
  pointer-events: none;
  color: var(--ink-3);
}
.topbar-search button {
  position: absolute;
  right: 6px;
  top: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.topbar-search button:hover { background: var(--brand); color: white; border-color: var(--brand); }

/* Auth area */
.topbar-auth {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.auth-user { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.auth-user strong { color: var(--ink); }

.login-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.login-form .tf {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-2);
  font-size: 13px;
  color: var(--ink);
  outline: none;
  width: 130px;
}
.login-form .tf:focus { border-color: var(--brand); background: var(--bg); }
.login-form .tf::placeholder { color: var(--ink-3); font-size: 11.5px; }

/* Buttons */
.btn-ghost {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg);
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-ghost:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }

.btn-solid {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 14px;
  border: none; border-radius: 7px;
  background: var(--ink);
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: white;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-solid:hover { background: var(--brand); color: white; text-decoration: none; }

/* ── 4. Nav row ── */
.topbar-nav {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--line-2);
  min-height: 44px;
}
.site-nav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex-shrink: 0;
}
.site-nav a {
  display: inline-flex; align-items: center;
  padding: 0 14px; height: 44px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.site-nav a:hover { color: var(--ink); text-decoration: none; }
.site-nav a.paged,
.site-nav a.active { color: var(--ink); border-bottom-color: var(--brand); }

/* Subnav bar — section sub-links, outside sticky header, aligned to container */
.subnav-bar {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  /* padding-inline mirrors the container: (viewport - container) / 2 + inner-padding */
  padding: 0 max(24px, calc((100% - var(--container)) / 2 + 24px));
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 13px;
}
/* Remove .subnav-links from layout — its <a> children become direct flex items */
.subnav-bar .subnav-links { display: contents; }
.subnav-links a {
  color: var(--ink-2); font-weight: 600; font-size: 13px;
  text-decoration: none; padding: 4px 12px; border-radius: 4px;
}
.subnav-links a:hover { color: var(--ink); background: var(--line); }
/* Pipe separators */
.subnav-links a ~ a { margin-left: 2px; }
.subnav-bar .sep { color: var(--ink-3); padding: 0 2px; }

/* Compact search in nav row — desktop hidden, shown on mobile only */
.nav-search {
  display: none; /* shown via responsive.css on mobile */
  align-items: center;
  border: 1px solid var(--line); border-radius: 7px;
  overflow: hidden; background: var(--bg-2); flex-shrink: 0;
}
.nav-search input {
  height: 30px; padding: 0 10px; border: none;
  background: transparent; font-size: 13px; color: var(--ink); outline: none; width: 170px;
}
.nav-search input::placeholder { color: var(--ink-3); }
.nav-search button {
  height: 30px; width: 32px; border: none; background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-3);
}
.nav-search button:hover { color: var(--brand-ink); }

/* ── 5. Partner bar ── */
.partner-bar {
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 5px 24px; text-align: center; font-size: 12px; color: var(--ink-3);
}
.partner-bar a { color: var(--ink-3); font-size: 12px; text-decoration: none; padding: 0 8px; }
.partner-bar a:hover { color: var(--ink); text-decoration: underline; }
.partner-bar span { color: var(--line); }

/* ── 6. Main content wrapper ── */
.site-main {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 24px 40px;
  background: var(--bg);
}
.site-main::after { content: ''; display: table; clear: both; }

/* ── 7. Two-column layout ── */
.left-page { float: left; width: calc(100% - 330px); padding-right: 20px; }
.side-right { float: right; width: 310px; }

/* ── 8. Section headers (replaces lgcenter.jpg) ── */
.last, .cl, .frmgore, .frmgore2 {
  background: var(--brand);
  color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 700;
  padding: 6px 10px; border-radius: 6px 6px 0 0; text-shadow: none;
  width: auto;
}
.last h1, .last h2, .gnl, .cnl {
  font-family: var(--sans); font-size: 14px; font-weight: 700; color: #fff;
  margin: 0; padding: 0; text-shadow: none;
}
.lgleft, .lgright { display: none; }
.left  { width: 4px; background: transparent; }
.right { width: 4px; background: transparent; }
.down  { height: 2px; background: var(--line); display: block; }
.rdown { height: 2px; background: var(--line); display: block; }

/* ── 9. News list ── */
.news { margin: 0; padding: 0; }
.news a {
  display: flex; align-items: center;
  width: 100%; min-height: 38px; padding: 6px 8px;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg); color: var(--ink); text-decoration: none; cursor: pointer;
  transition: background .1s;
}
.news a:hover { background: var(--brand-soft); text-decoration: none; color: var(--ink); }
.news .t1 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink-3);
  display: block; width: 90px; flex-shrink: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.news .t2 {
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink);
  display: block; flex: 1; line-height: 1.35; padding: 0 8px; overflow: hidden;
}
.news .t3, .news .t4, .news .t5, .news .t6, .news .t7 {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  display: block; width: 30px; text-align: right; flex-shrink: 0;
}
.news a:hover .t1 { color: var(--brand-ink); }
.news a:hover .t2 { color: var(--ink); }

/* ── 10. Video cards ── */
.video-item { float: left; width: 33.333%; padding: 0 6px; text-align: center; }
.clipname {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  text-align: center; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line); border-top: none;
  padding: 4px 6px 6px; min-height: 36px; word-break: break-word;
  border-radius: 0 0 6px 6px; width: 100%;
  display: block;
}
.clipviews {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-align: center; color: var(--brand-ink);
  background: var(--brand-soft); border: 1px solid var(--line); border-bottom: none;
  padding: 3px 6px; border-radius: 6px 6px 0 0; width: 100%; display: block;
}
.videowrapper { width: 100%; position: relative; height: auto; }
.afterglow    { border-radius: 8px; overflow: hidden; }

/* ── 11. Table content styles ── */
.gore {
  font-family: var(--sans); font-size: 12px; color: var(--ink-3);
  text-align: center; border-bottom: 2px solid var(--brand); padding: 4px 6px;
}
.wdesc { font-family: var(--sans); font-size: 11px; color: var(--ink-3); text-align: center; }

.otherlink { margin: 0; padding: 0; }
.otherlink a {
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--brand-ink);
  display: block; min-height: 22px; line-height: 22px; padding: 2px 8px;
  text-decoration: none; border-radius: 4px; transition: background .1s;
}
.otherlink a:hover { background: var(--brand-soft); color: var(--ink); text-decoration: none; }

.novinite { margin: 0; padding: 0; list-style: none; }
.novinite a {
  display: block; padding: 5px 8px; font-weight: 600;
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--line-2);
}
.novinite a:hover { background: var(--brand-soft); color: var(--ink); text-decoration: none; }

.stranici {
  padding: 3px 7px; background: var(--bg); border: 1px solid var(--line);
  margin-left: -1px; text-decoration: none; font-size: 13px; color: var(--ink-2);
  display: inline-block; border-radius: 4px;
}
.stranici:hover { background: var(--bg-2); text-decoration: none; }
.stranica {
  font-family: var(--sans); font-size: 13px; color: var(--ink-2);
  padding: 3px 7px; background: var(--brand-soft);
  border: 1px solid var(--brand); border-radius: 4px; display: inline-block;
}

/* ── 12. Comments ── */
.commentup {
  font-family: var(--sans); font-size: 13px; font-weight: 700; color: #fff;
  text-align: center; background: var(--brand); padding: 6px 12px;
  border-radius: 6px 6px 0 0; width: 100%; display: block;
}
.commentbody {
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line); border-top: none;
  padding: 10px 12px; line-height: 1.5; border-radius: 0 0 6px 6px; min-height: 60px;
}

/* ── 13. Forms ── */
.login, .button {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-2); font-size: 13px; color: var(--ink);
}
.submit, .button[type=submit] {
  background: var(--brand); color: white; border-color: var(--brand);
  font-weight: 600; cursor: pointer;
}
.submit:hover, .button[type=submit]:hover { opacity: .88; }
textarea {
  border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; color: var(--ink); background: var(--bg-2);
  padding: 8px 10px; resize: vertical; width: 100%;
}

/* ── 14. Status messages ── */
#error   { padding: 14px; background: #fff1f0; border: 2px solid #ffbbbb; border-radius: 8px; margin-bottom: 14px; font-weight: 600; color: #c80505; }
#alert   { padding: 14px; background: #fffbe4; border: 2px solid #f7db82; border-radius: 8px; margin-bottom: 14px; font-weight: 600; color: #a07000; }
#success { padding: 14px; background: #f0fff4; border: 2px solid #7cbb38; border-radius: 8px; margin-bottom: 14px; font-weight: 600; color: #2d7a00; }
#info    { padding: 10px; background: #e8f4ff; border: 2px solid #005487; border-radius: 8px; margin-bottom: 8px; font-weight: 600; color: #005487; }

/* ── 15. Top clips widget ── */
.topclip {
  width: 100%; display: flex; align-items: center;
  border-bottom: 1px solid var(--line-2); padding: 10px 0; gap: 8px;
}
.topclip .position { width: 22px; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-3); flex-shrink: 0; }
.topclip .image    { width: 80px; flex-shrink: 0; }
.topclip .image img { border-radius: 5px; width: 80px; height: 56px; object-fit: cover; display: block; }
.topclip .title    { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.3; overflow: hidden; }
.topclip .title a  { font-size: 12px; color: var(--ink); }
.topclip .views    { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); text-align: right; flex-shrink: 0; }

/* ── 16. Link styles ── */
a.as {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px;
  font-family: var(--sans); font-size: 12px; color: var(--ink-2);
  text-decoration: none; border-bottom: 1px solid var(--line-2);
}
a.as:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
a.as img   { display: inline; width: 16px; height: 16px; }

a.zaglawie {
  display: block; font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--brand-ink); text-align: center;
  padding: 4px 0; border-bottom: 1px solid var(--line-2); text-decoration: none;
}
a.zaglawie:hover { background: var(--brand-soft); color: var(--ink); text-decoration: none; }

/* ── 17. User assistant popup ── */
#userBoxDiv {
  position: fixed; top: 110px; right: 24px; z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); border-radius: 10px;
  overflow: hidden; background: var(--bg); border: 1px solid var(--line);
  min-width: 180px;
}

/* ── 18. Footer ── */
.site-footer {
  background: var(--bg); border-top: 1px solid var(--line); padding: 24px;
}
.site-footer-inner { max-width: var(--container); margin: 0 auto; text-align: center; }
.footer-copy { font-size: 13px; color: var(--ink-3); line-height: 1.8; }
.footer-copy a { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.footer-copy a:hover { color: var(--ink); }

/* ── 19. Misc / legacy ── */
.w602         { width: 100%; display: block; }
#ddheader     { display: none; }
.code .quote  { font-family: var(--mono); font-size: 12px; color: #006600; background: #fafafa; border: 1px solid #d1d7dc; padding: 2px 6px; border-radius: 4px; }
.news-details img { max-width: 100%; height: auto; }
.warn         { color: #c00; font-weight: bold; }
#site         { border: 2px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 8px; font-weight: 600; color: var(--ink); }
.toplast      { list-style: none; margin: 0; padding: 0; }
a.llogin      { font-size: 12px; color: var(--brand-ink); font-weight: 600; }
a.llogin:hover { color: var(--ink); }
.forumlink a  { font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; }
.cat          { float: left; padding: 4px 6px; }
.cat a        { display: block; text-align: center; font-weight: 700; color: var(--brand-ink); padding: 4px 12px; border: 1px solid var(--line); border-radius: 6px; }
.cat a:hover, .cat .tt { background: var(--brand); color: white; border-color: var(--brand); }
.spole, .spole2, .sitetable, .header, .menu { all: unset; display: block; }

/* ── 20. Homepage + page layouts — Session 5B / 5C ── */

/* Section block wrapper */
.section-block {
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}

/* Section headers — flat coloured bar */
.section-head {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  color: #fff; background: var(--brand);
  padding: 8px 14px; letter-spacing: .01em;
}
/* Preserve .last and .cl as aliases */
.section-block .last,
.section-block .cl {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  color: #fff; background: var(--brand);
  padding: 8px 14px; letter-spacing: .01em; display: block;
  /* undo old table-cell margin */
  margin: 0;
}

/* "See more" footer link */
.section-more {
  text-align: right;
  padding: 6px 12px;
  border-top: 1px solid var(--line-2);
  background: var(--bg-2);
}
.section-more a {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--brand-ink); text-decoration: none;
}
.section-more a:hover { color: var(--ink); }

/* Video row — clears the floated .video-item cards */
.video-row { padding: 10px 6px 4px; overflow: hidden; }
.video-item { float: left; width: 33.333%; padding: 0 6px 8px; text-align: center; }
.video-item img { width: 100%; height: auto; max-width: 120px; border-radius: 6px 6px 0 0; display: block; margin: 0 auto; }

/* Site link list */
.link-list { padding: 6px 0 2px; }
.link-list-head {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  color: var(--ink-3); padding: 4px 12px; border-bottom: 1px solid var(--line-2);
}
.link-list-item {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--brand-ink); display: block;
  padding: 4px 12px; border-bottom: 1px solid var(--line-2);
  text-decoration: none; transition: background .1s;
}
.link-list-item:hover { background: var(--brand-soft); color: var(--ink); text-decoration: none; }
.link-list-item:last-child { border-bottom: none; }

/* Sidebar blocks */
.sidebar-block {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.sidebar-block .section-head,
.sidebar-block .cl {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  color: #fff; background: var(--brand);
  padding: 8px 14px; letter-spacing: .01em; display: block; margin: 0;
}

/* Top clips in sidebar */
.top-clips { padding: 8px 6px 4px; text-align: center; }
.top-clip-item { display: inline-block; vertical-align: top; padding: 4px; }
.top-clip-item img { border-radius: 6px; display: block; margin: 0 auto; max-width: 100%; }

/* Weather / currency widget tables */
.widget-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--sans); font-size: 12px;
}
.widget-table th,
.widget-table td { padding: 4px 6px; text-align: center; border-bottom: 1px solid var(--line-2); }
.widget-table thead th {
  font-weight: 700; color: var(--ink-2);
  border-bottom: 2px solid var(--brand); background: var(--bg-2);
}
.widget-table tbody tr:last-child td { border-bottom: none; }
.widget-table tbody tr:hover td { background: var(--brand-soft); }

/* ── 21. News / clips detail pages — Session 5C ── */

/* Section body (generic padded content area) */
.section-body { padding: 12px 16px; }

/* News detail article body */
.news-details {
  padding: 14px 16px;
  font-family: var(--sans); font-size: 14px; line-height: 1.65; color: var(--ink);
}
.news-details img { max-width: 100%; height: auto; }
.news-details h1, .news-details h2, .news-details h3 { margin-top: 1em; margin-bottom: .5em; }

/* Section head h1/h2 inside brand bar */
.section-head h1, .section-head h2 {
  margin: 0; padding: 0;
  font-size: inherit; font-weight: inherit; color: inherit; display: inline;
}

/* News list excerpt */
.news-article { }
.news-excerpt {
  padding: 12px 16px;
  font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--ink-2);
}
.news-meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 16px;
  border-top: 1px solid var(--line-2); background: var(--bg-2);
  font-family: var(--sans); font-size: 12px; color: var(--ink-3);
}
.news-readmore {
  margin-left: auto; font-weight: 700;
  color: var(--brand-ink); text-decoration: none; font-size: 12px;
}
.news-readmore:hover { color: var(--ink); }

/* BBcode blockquotes */
blockquote.bbquote {
  margin: 10px 0; padding: 8px 14px;
  border-left: 3px solid var(--brand); background: var(--bg-2);
  border-radius: 0 6px 6px 0; font-size: 13px; color: var(--ink-2);
}
blockquote.bbquote cite {
  display: block; font-weight: 700; color: var(--brand-ink); margin-bottom: 4px; font-style: normal;
}
pre.code.bbcode {
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 10px 14px; border-radius: 6px;
  font-family: var(--mono); font-size: 12px; overflow-x: auto; white-space: pre-wrap;
}

/* Comment section */
.comments-area { padding: 12px 16px; }

/* Comment form */
.comment-form { margin-bottom: 14px; }
.cf-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.cf-textarea {
  flex: 1; min-height: 80px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--sans); font-size: 13px; color: var(--ink); resize: vertical;
}
.cf-captcha { flex-shrink: 0; border-radius: 4px; }
.cf-row--submit { align-items: center; }
.cf-code-label { font-family: var(--sans); font-size: 12px; color: var(--ink-2); }
.cf-code-input { width: 80px; }

/* Individual comment */
.comment-item { margin-bottom: 10px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }

/* Tags area */
.tags-body { padding: 10px 14px; font-size: 13px; line-height: 1.8; }

/* Fav block */
.fav-block .fav-center { text-align: center; padding: 10px; }

/* Video player wrapper */
.video-player-wrap { padding: 12px; text-align: center; background: #000; }
.video-player-wrap .videowrapper { background: #000; }

/* AdSense inline break between sections */
.adsense-inline { margin: 12px 0; text-align: center; }

/* ── Modern video card grid ── */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 12px 14px;
}
.vcard {
  display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line);
  transition: box-shadow .15s, transform .15s;
  text-decoration: none;
}
.vcard:hover { box-shadow: 0 4px 20px rgba(0,0,0,.10); transform: translateY(-2px); }
.vcard-thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 9; overflow: hidden; background: #111;
}
.vcard-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .2s;
}
.vcard:hover .vcard-thumb img { opacity: .88; }
.vcard-views {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,.72); color: #fff;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  padding: 2px 7px; border-radius: 4px; pointer-events: none;
}
.vcard-title {
  padding: 8px 10px 10px;
  font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; flex: 1;
}
/* Homepage compact video row (3 cards, used on index) */
.video-row .vcard-title { font-size: 12px; -webkit-line-clamp: 2; }

/* ─────────────────────────────────────────────
   22. Session 5D — inner pages
   ───────────────────────────────────────────── */

/* ── Message boxes ── */
.msg-error, .msg-success, .msg-info {
  padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; font-size: 13px;
}
.msg-error   { background: #fff0f0; border: 1px solid #f5c2c2; color: #b00; }
.msg-success { background: #f0fff4; border: 1px solid #a3e0b0; color: #155724; }
.msg-info    { background: var(--brand-soft); border: 1px solid var(--line); color: var(--ink-2); }
.error-msg   { color: #b00; font-size: 13px; }

/* ── Shared section body text ── */
.section-body { padding: 14px 16px; }
.section-body p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.section-body ul, .section-body ol { padding-left: 20px; margin: 0 0 10px; }
.section-body li { font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.error-list, .itbg-list { padding-left: 20px; margin: 8px 0; }

/* ── Buttons ── */
.btn-primary {
  display: inline-block; padding: 8px 20px;
  background: var(--brand); color: #fff; border: none;
  border-radius: 6px; font-family: var(--sans); font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; line-height: 1.4;
  transition: opacity .15s;
}
.btn-primary:hover { opacity: .85; }

/* ── Admin links ── */
.admin-links { padding: 6px 0; display: flex; gap: 8px; }
.admin-links img { border: 0; vertical-align: middle; }

/* ── Comment helpers ── */
.comments-note  { font-size: 12px; color: var(--ink-3); margin: 6px 0; }
.comments-empty { font-size: 13px; color: var(--ink-3); padding: 10px 0; }
.com-toggle     { font-size: 12px; font-weight: 700; color: var(--brand-ink); }

/* ── Games player ── */
.game-player-wrap { padding: 14px; text-align: center; }
.game-desc {
  margin-top: 12px; padding: 10px 14px;
  background: var(--bg-2); border-radius: 6px;
  font-size: 13px; color: var(--ink-2); text-align: left;
}

/* ── Game category filter ── */
.game-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.game-cat-link {
  display: inline-block; padding: 4px 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 20px; font-size: 12px; color: var(--ink-2);
  text-decoration: none; transition: background .15s, color .15s;
}
.game-cat-link:hover, .game-cat-link.active {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

/* ── Fun page ── */
.fun-head-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.fun-tabs { display: flex; gap: 4px; }
.fun-tab {
  padding: 3px 12px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg-2); font-size: 12px; color: var(--ink-2); cursor: pointer;
  font-family: var(--sans); transition: background .15s;
}
.fun-tab.active, .fun-tab:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.fun-carousel-wrap { padding: 10px 12px; }
.fun-nav { display: flex; align-items: center; gap: 8px; }
.fun-slides { flex: 1; overflow: hidden; }
.fun-slide { display: flex; flex-wrap: wrap; }
.fun-arrow {
  flex-shrink: 0; width: 32px; height: 32px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 50%;
  font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-2); font-family: var(--sans);
  transition: background .15s;
}
.fun-arrow:hover { background: var(--brand-soft); }
.fun-panel { width: 100%; }

/* ── Top clips list ── */
.top-clips-list { display: flex; flex-direction: column; gap: 8px; }
.top-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--line-2);
}
.top-list-item:last-child { border-bottom: 0; }
.top-pos {
  flex-shrink: 0; width: 28px; text-align: center;
  font-size: 18px; font-weight: 800; color: var(--ink-3);
}
.top-thumb { flex-shrink: 0; }
.top-thumb img { border-radius: 4px; display: block; }
.top-info { flex: 1; min-width: 0; }
.top-title {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-title:hover { color: var(--brand); }
.top-views { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* ── Site / hosting items ── */
.site-item { padding: 12px 0; }
.site-item-head { margin-bottom: 4px; }
.site-item-name { font-size: 14px; font-weight: 700; color: var(--brand-ink); text-decoration: none; }
.site-item-name:hover { color: var(--ink); }
.site-item-logo { margin: 6px 0; }
.site-item-logo img { border: 0; }
.site-item-desc { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.site-divider { border: 0; border-top: 1px solid var(--line-2); margin: 4px 0; }

/* ── Forms (contact, addsite, sendsms, translation, etc.) ── */
.site-form { max-width: 500px; }
.sf-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.sf-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
/* Higher specificity so it overrides .sf-row's column direction */
.sf-row.sf-captcha-row { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
.sf-captcha-row .captcha-img, .sf-captcha-row img { display: inline-block; flex-shrink: 0; }
.form-input, .form-textarea, .form-select {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  background: var(--bg); transition: border-color .15s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none; border-color: var(--brand);
}
.form-input-sm { width: 90px; }
.form-textarea { resize: vertical; }
.form-file { font-size: 13px; color: var(--ink-2); }
.form-select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }

/* ── Online translation ── */
.translation-form { max-width: 700px; }
.tf-layout { display: flex; gap: 14px; align-items: flex-start; }
.tf-text-col { flex: 1; }
.tf-controls-col { flex-shrink: 0; width: 180px; }
.tf-textarea { min-height: 160px; }
.translation-result {
  margin: 14px 0; padding: 12px 14px;
  background: var(--brand-soft); border: 1px solid var(--line);
  border-radius: 6px; font-size: 13px; color: var(--ink); line-height: 1.7;
}

/* ── Sidebar news list ── */
.sidebar-news-list { margin: 0; padding: 8px 14px 8px 28px; }
.sidebar-news-list li { font-size: 12px; padding: 2px 0; }
.sidebar-news-list a { color: var(--ink-2); text-decoration: none; }
.sidebar-news-list a:hover { color: var(--brand-ink); }

/* ── Banners page ── */
.banner-block { text-align: center; }
.banner-code {
  display: block; width: 100%; max-width: 500px; margin: 10px auto 0;
  padding: 8px; font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg-2); color: var(--ink-2); resize: none;
}

/* ── Sitemap ── */
.sitemap-body { font-size: 13px; color: var(--ink-2); }
.sitemap-list, .sitemap-list ul { padding-left: 20px; margin: 6px 0; list-style: disc; }
.sitemap-list a { color: var(--brand-ink); text-decoration: none; }
.sitemap-list a:hover { color: var(--ink); }

/* ── Search results ── */
.search-results { list-style: none; padding: 0; margin: 0; }
.search-results li { padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.search-results li:last-child { border-bottom: 0; }
.search-results a { color: var(--brand-ink); text-decoration: none; font-weight: 600; }
.search-results a:hover { color: var(--ink); }
.search-results strong { color: var(--ink); }

/* ── Session 5D final pages ─────────────────────────────────────── */

/* Admin subnav in section-head */
.admin-subnav { margin-left: auto; font-size: 12px; font-weight: 400; }
.admin-subnav a { color: var(--bg); opacity: 0.85; text-decoration: none; }
.admin-subnav a:hover { opacity: 1; text-decoration: underline; }

/* Head search form (web-sites) */
.head-search-form { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.head-search-input { width: 160px !important; padding: 4px 8px !important; font-size: 12px !important; }
.btn-sm { padding: 4px 10px !important; font-size: 12px !important; }

/* Site item meta + actions */
.site-item-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.site-item-url  { font-style: italic; }
.site-item-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.site-item-actions a { opacity: 0.7; transition: opacity .15s; }
.site-item-actions a:hover { opacity: 1; }

/* Website checker results table */
.checker-table { width: 100%; max-width: 560px; }
.checker-table th { text-align: right; padding-right: 14px; width: 160px; white-space: nowrap; }

/* Whois output */
.whois-output {
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
  line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  max-height: 320px; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 10px 12px;
}

/* Stats date divider in advlinks stats */
.stats-date {
  background: var(--brand-soft); color: var(--brand-ink);
  font-weight: 700; text-align: center; padding: 4px;
}

/* ── Personal assistant popup ── */
.assistant-popup {
  position: fixed; top: 60px; right: 14px; z-index: 9999;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 4px 20px rgba(0,0,0,.12);
  min-width: 180px; overflow: hidden;
}
.assistant-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--brand); color: #fff;
  font-size: 13px; font-weight: 600;
}
.assistant-close {
  color: #fff; opacity: .75; text-decoration: none;
  font-size: 14px; line-height: 1;
}
.assistant-close:hover { opacity: 1; }
.assistant-links { display: flex; flex-direction: column; padding: 6px 0; }
.assistant-links a {
  padding: 7px 14px; font-size: 13px; color: var(--ink-2);
  text-decoration: none; transition: background .12s;
}
.assistant-links a:hover { background: var(--brand-soft); color: var(--brand-ink); }

/* ── Weather widget ── */
.weather-widget-block { background: linear-gradient(180deg, oklch(0.98 0.02 250) 0%, var(--bg) 100%); }
.ww-header {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); padding: 10px 14px 6px;
}
.weather-list { display: flex; flex-direction: column; padding: 0 10px 10px; gap: 2px; }
.wrow {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px; border-bottom: 1px solid var(--line);
}
.wrow:last-child { border-bottom: none; }
.wrow-icon { flex-shrink: 0; width: 28px; text-align: center; }
.wrow-icon img { display: block; width: 24px; height: 18px; object-fit: contain; }
.wrow-body { flex: 1; min-width: 0; }
.wrow-city {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wrow-temps { display: flex; align-items: baseline; gap: 8px; margin-top: 1px; }
.wrow-temp { font-size: 15px; font-weight: 700; color: var(--ink); }
.wrow-feel { font-size: 11px; color: var(--ink-3); }

/* ── Currency widget ── */
.currency-widget-block {}
.cw-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 6px;
}
.cw-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.cw-meta { font-size: 11px; color: var(--ink-3); font-family: var(--mono); }
.cw-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px; border-bottom: 1px solid var(--line);
}
.cw-row:last-child { border-bottom: none; }
.cw-left { display: flex; align-items: center; gap: 7px; }
.cw-flag { font-size: 16px; line-height: 1; }
.cw-code { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.cw-right { display: flex; align-items: center; gap: 6px; }
.cw-rate { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink); }
.cw-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--brand-soft); color: var(--brand); padding: 1px 5px; border-radius: 3px;
}
.cw-delta { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.cw-up   { color: oklch(0.50 0.15 145); }
.cw-down { color: oklch(0.52 0.18 25);  }
.cw-flat { color: var(--ink-3); }