/* classic_blue */
body {
  font-family: var(--font);
  font-size: var(--font-size-md);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 420px at 88% -8%, var(--classic-blue-glow), transparent 65%),
    radial-gradient(760px 380px at 0% 0%, var(--classic-blue-glow2), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}
a:hover { text-decoration: underline; }
code, pre, kbd { font-family: var(--mono); }
::selection { background: var(--classic-blue-ring); }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* Header: dark glass with a glowing edge */
.topbar {
  background: color-mix(in srgb, var(--topbar-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 0;
  color: #e6eeff;
  position: sticky;
}
.topbar::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--classic-blue-grad-a), var(--classic-blue-grad-b), transparent);
  box-shadow: 0 0 14px 1px var(--classic-blue-ring);
}
.topbar a, .topbar .icon-btn { color: #e6eeff; }
.topbar a:hover { text-decoration: none; }
.topbar .icon-btn {
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.topbar .icon-btn:hover { background: rgba(91, 155, 255, .22); border-color: rgba(125, 180, 255, .5); box-shadow: 0 0 12px rgba(59, 130, 246, .4); }
.topbar nav a { font-size: var(--font-size-sm); font-weight: 600; border-radius: 8px; }
.topbar nav a:hover, .topbar nav a.active { background: rgba(255, 255, 255, .1); }
.topbar .search-form {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.topbar .search-form:focus-within { border-color: var(--classic-blue-accent); box-shadow: 0 0 0 3px rgba(34, 211, 238, .2); background: rgba(255, 255, 255, .1); }
.topbar .search-form input[type="search"],
.topbar .search-form input[type="search"]:focus { background: transparent; border: 0; box-shadow: none; color: #fff; }
.topbar .search-form input::placeholder { color: rgba(220, 232, 255, .6); }
.topbar .search-form .icon { color: rgba(220, 232, 255, .7); }

/* Cards: thin border, soft depth, accent edge on the title */
.card, .list-card { overflow: hidden; border-color: var(--line); transition: border-color .2s, box-shadow .2s; }
.card:hover, .list-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.card-head,
.list-head {
  margin: 0;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-bottom: 1px solid var(--line-soft);
  border-inline-start: 3px solid var(--classic-blue-grad-a);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.card-head a, .list-head a { color: var(--brand); text-transform: none; letter-spacing: 0; }
.card-head .muted, .list-head .muted { color: var(--text-muted); }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.tab { padding: 6px 14px; color: var(--text-muted); font-weight: 600; letter-spacing: 0; text-transform: none; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.tab:hover { background: var(--brand-soft); color: var(--brand); text-decoration: none; }
.tab.active, .tab[aria-current] {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--classic-blue-ring);
  box-shadow: 0 0 14px -2px var(--classic-blue-ring);
}

/* Left menu */
.side-link { font-weight: 550; border: 1px solid transparent; }
.side-link:hover { background: var(--brand-soft); color: var(--brand); text-decoration: none; }
.side-link.active { background: var(--brand-soft); color: var(--brand); font-weight: 650; border-color: var(--classic-blue-ring); box-shadow: 0 0 16px -4px var(--classic-blue-ring); }
.side-link small { font-family: var(--mono); }

/* Topic list */
.topic-rows .topic-row { background: var(--panel); border-bottom: 1px solid var(--row-line); align-items: center; transition: background .12s, box-shadow .12s; }
.topic-rows .topic-row:last-child { border-bottom: 0; }
.topic-rows .topic-row:nth-child(even) { background: var(--classic-blue-stripe); }
.topic-rows .topic-row:hover { background: var(--classic-blue-hover); box-shadow: inset 3px 0 0 var(--classic-blue-grad-a); }
.topic-row .avatar { inline-size: 38px; block-size: 38px; border-radius: 50%; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--line); }
.topic-row .topic-title, .topic-row h3 { font-size: var(--font-size-md); font-weight: 650; color: var(--text); }
.topic-row .topic-title:hover { color: var(--brand); text-decoration: none; }
.topic-row .meta, .topic-row small { font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); }

/* Labels and badges */
.flag { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; border: 1px solid var(--classic-blue-ring); }
.flag-danger, .flag-success, .flag-warning, .flag-muted, .flag-pending { border-color: transparent; }
.tag-badge, .cat-badge { font-family: var(--mono); font-size: 11.5px; border-radius: 6px; }

/* Topic page */
.post { border-bottom: 1px solid var(--row-line); }
.post .avatar { inline-size: 56px; block-size: 56px; border-radius: 50%; box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--classic-blue-grad-a), 0 0 18px -2px var(--classic-blue-ring); }
.post-content { line-height: 1.75; }
.post-content a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.post-content blockquote {
  margin-block: 10px;
  padding: 8px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--classic-blue-grad-b);
  border-radius: 8px;
}
.post-content pre { background: #08101f; color: #d6e4ff; border: 1px solid #1b2a47; border-radius: 10px; }
.post-content :not(pre) > code { background: var(--brand-soft); color: var(--brand); border-radius: 5px; padding: 1px 6px; font-size: .9em; }
.post-content img { border-radius: 10px; }

/* Forms */
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--classic-blue-ring); outline: none; }

/* Buttons */
.btn { transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; }
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--classic-blue-grad-a), var(--classic-blue-grad-b));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px -4px var(--classic-blue-ring);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--classic-blue-grad-a), var(--classic-blue-grad-b)); color: #fff; border-color: transparent; filter: brightness(1.1); box-shadow: 0 6px 22px -4px var(--classic-blue-ring); }

/* Tables (admin) */
table.admin { border-radius: var(--radius); overflow: hidden; }
table.admin th { background: var(--panel-2); color: var(--text-muted); font-weight: 650; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
table.admin tr:hover td { background: var(--classic-blue-hover); }
.admin-cards .card-body b, .stat b { font-family: var(--mono); }

/* Footer */
.footer {
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  border-block-start: 1px solid var(--line);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11.5px;
}

/* Menus and popups that open from the dark header keep normal text colours.
   Without this, the header's light link colour leaks into the white menu panel in light mode. */
.topbar :is(.dropdown, .dropdown-menu, .menu, .user-menu, .usermenu, .account-menu, .profile-menu, .me-menu, .popover, .popup, .flyout, [role="menu"], [popover], dialog, details > div, details > ul) {
  color: var(--text);
}
.topbar :is(.dropdown, .dropdown-menu, .menu, .user-menu, .usermenu, .account-menu, .profile-menu, .me-menu, .popover, .popup, .flyout, [role="menu"], [popover], dialog, details > div, details > ul) :is(a, strong, b):not(.btn):not(.flag):not(.tag-badge) {
  color: var(--text);
}
.topbar :is(.dropdown, .dropdown-menu, .menu, .user-menu, .usermenu, .account-menu, .profile-menu, .me-menu, .popover, .popup, .flyout, [role="menu"], [popover], dialog, details > div, details > ul) a:not(.btn):hover {
  color: var(--brand);
}

/* Avatars stay round when a flex row is taller than the avatar (for example the profile menu) */
.avatar { flex: none; align-self: flex-start; aspect-ratio: 1 / 1; }
img.avatar, .avatar img { object-fit: cover; }

/* Avatar with a shop frame: keep the holder square even when its row is taller (profile menu) */
*:has(> .pshop-frame) { align-self: flex-start !important; flex: none !important; block-size: auto !important; height: auto !important; aspect-ratio: 1 / 1 !important; }
.pshop-frame { inset-block: 0 auto; inset-inline: 0; block-size: auto; aspect-ratio: 1 / 1; }