/* FiveTech Support Forums - prosilver-derived palette + dark/light themes */
* { box-sizing: border-box; }
:root {
  --c01:#1e90ff; --c02:#fff; --c03:#eee; --c04:#ddd; --c05:#ccc;
  --c06:#bbb; --c07:#aaa; --c08:#a5a5a5; --c09:#d31141; --c10:#ead4d9;
  --c11:#000; --c12:#333; --c13:#444; --c14:#fff; --c15:#fff;
  --bg:        var(--c02);
  --fg:        var(--c11);
  --fg-muted:  var(--c12);
  --row-alt:   #f9f9f9;
  --border:    var(--c04);
  --header-bg: linear-gradient(180deg,#12a3eb 0%,#00608f 100%);
  --header-fg: #fff;
  --link:      #105289;
  --link-hover:#d31141;
  --pre-bg:    #fafafa;
  --quote-bg:  #f4f4f4;
}
html[data-theme="dark"] {
  --c02:#222; --c03:#333; --c04:#444; --c05:#555;
  --c06:#666; --c07:#6b6b6b; --c08:#7a7a7a; --c10:#6a1b2e;
  --c11:#fff; --c12:#ccc; --c13:#ddd; --c14:#000;
  --bg:#0e1620;
  --fg:#c8d4e0;
  --fg-muted:#9cb8d8;
  --row-alt:#192536;
  --border:#1f3047;
  --header-bg:linear-gradient(180deg,#1a4a78 0%,#0a2742 100%);
  --pre-bg:#0e1620;
  --quote-bg:#1a2638;
  --link:#5cb0ff;
  --link-hover:#ff7a8c;
}
body {
  margin:0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px;
  background: var(--bg); color: var(--fg);
}
a { color: var(--link); text-decoration:none; }
a:hover { color: var(--link-hover); text-decoration:underline; }
img { max-width:100%; height:auto; }
.wrap { max-width:1100px; margin:0 auto; padding:8px; }
.header {
  position:relative;
  background: var(--header-bg); color: var(--header-fg);
  padding:14px 20px; border-radius:6px 6px 0 0;
  display:flex; align-items:center; gap:18px;
}
.header .logo img { display:block; max-height:60px; width:auto; }
.header .header-text { flex:1; }
.header h1 { margin:0; font-size:22px; font-weight:bold; letter-spacing:0.3px; }
.header .sub { font-size:11px; opacity:0.9; margin-top:3px; }
.theme-toggle { background:rgba(255,255,255,0.15); color:#fff;
  border:1px solid rgba(255,255,255,0.4); border-radius:4px;
  padding:4px 10px; cursor:pointer; font-size:14px; }
.theme-toggle:hover { background:rgba(255,255,255,0.3); }
.navbar {
  background: var(--bg); border:1px solid var(--border); border-top:none;
  padding:6px 12px; font-size:11px;
}
.navbar a { margin-right:14px; font-weight:bold; }
.crumbs { padding:8px 0; font-size:11px; color: var(--fg-muted); }
.crumbs a::after { content:" »"; color: var(--c06); }
.cat {
  background: var(--header-bg); color:#fff;
  padding:6px 10px; font-weight:bold; font-size:12px;
  border:1px solid var(--border); border-radius:4px 4px 0 0;
  margin-top:14px; position:relative;
}
.cat .newbtn { position:absolute; right:8px; top:4px; background: var(--c02);
  color: var(--link); padding:2px 8px; border-radius:3px; font-size:11px;
  text-decoration:none; font-weight:normal; }
table.forumlist { width:100%; border-collapse:collapse; background: var(--c02);
  border:1px solid var(--border); }
table.forumlist th { background: var(--c03); padding:5px 8px; text-align:left;
  border-bottom:1px solid var(--border); font-size:11px; color: var(--fg-muted); }
table.forumlist td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.forumlist tr:nth-child(even) td { background: var(--row-alt); }
.forum-icon { width:24px; height:24px; background: var(--c01); border-radius:50%;
  display:inline-block; vertical-align:middle; box-shadow:inset 0 -2px 4px rgba(0,0,0,0.2); }
.forum-title { font-weight:bold; font-size:12px; }
.forum-desc { color: var(--fg-muted); font-size:11px; margin-top:2px; }
.num { text-align:center; width:80px; font-weight:bold; color: var(--fg-muted); }
.lastpost { width:240px; font-size:11px; }
.pagination { padding:8px 0; font-size:11px; }
.pagination a, .pagination strong { padding:2px 6px; border:1px solid var(--border);
  margin-right:3px; background: var(--c02); border-radius:3px; }
.pagination strong { background: var(--c01); color:#fff; border-color: var(--c01); }

/* posts */
.post { background: var(--c02); border:1px solid var(--border); margin:8px 0;
  display:grid; grid-template-columns:180px 1fr; }
.poster { background: var(--c03); padding:12px; border-right:1px solid var(--border);
  font-size:11px; color: var(--fg); }
.poster .name { font-weight:bold; font-size:13px; }
.poster .rank { color: var(--fg-muted); font-style:italic; margin:4px 0; }
.poster .joined, .poster .location { color: var(--fg-muted); margin-top:4px; }
.body { padding:12px 16px; color: var(--fg); }
.body .meta { border-bottom:1px solid var(--border); padding-bottom:6px; margin-bottom:10px;
  font-size:11px; color: var(--fg-muted); }
.body .subject { font-weight:bold; color: var(--link); font-size:12px; }
.body .content { font-size:13px; line-height:1.55; color: var(--fg); word-wrap:break-word; }
.body .content p { margin:0 0 10px 0; }
.body .content code { background: var(--c03); border:1px solid var(--border);
  padding:1px 4px; font-family:Consolas, monospace; font-size:11px; }
.body .content pre { background: var(--pre-bg); border:1px solid var(--border);
  padding:8px; overflow-x:auto; font-family:Consolas, monospace; font-size:11px;
  white-space:pre-wrap; }
.body .content img { max-width:100%; }
.signature { border-top:1px solid var(--border); margin-top:14px; padding-top:8px;
  font-size:11px; color: var(--fg-muted); }

/* avatars */
img.avatar-img { width:90px; height:90px; object-fit:cover; border:1px solid var(--border);
  margin:6px 0; display:block; }
.poster .avatar { width:80px; height:80px; background: var(--c01); border:1px solid var(--border);
  margin:6px 0; }

/* smileys */
img.smiley { vertical-align:middle; max-height:18px; width:auto; display:inline; }

/* code box (BBCode [code]) */
.codebox { background: var(--c02); border:1px solid var(--border); margin:6px 0; }
.codebox .codehead { background: var(--c03); border-bottom:1px solid var(--border);
  padding:3px 8px; font-size:10px; color: var(--fg-muted); }
.codebox .codehead span { font-weight:bold; }
.codebox .codehead a { margin-left:10px; cursor:pointer; }
.codebox pre { margin:0; padding:8px 10px; max-height:400px; overflow:auto;
  background: var(--pre-bg); font-family:Consolas, monospace; font-size:11px;
  white-space:pre-wrap; word-break:break-word; color: var(--fg); }

/* quote */
blockquote { background: var(--quote-bg); border-left:3px solid var(--c01);
  padding:6px 10px; margin:6px 0; }
blockquote cite { display:block; font-style:italic; color: var(--fg-muted); font-size:10px; }

/* horizontal rule from markdown --- (was rendering as faux strikethrough) */
.body .content hr { border:0; border-top:1px solid var(--border);
  margin:14px 0; height:0; background:transparent; }

/* mermaid */
pre.mermaid { background: var(--c02); border:1px solid var(--border); padding:10px;
  text-align:center; white-space:normal; }

.attach { background:#fffbe6; padding:1px 4px; border:1px solid #f0d000; color:#000; }

/* giscus */
.giscus-wrap { background: var(--c02); border:1px solid var(--border); margin-top:14px;
  padding:12px; }
.giscus-wrap h3 { margin:0 0 10px 0; color: var(--fg-muted); font-size:13px;
  border-bottom:1px solid var(--border); padding-bottom:6px; }

/* footer */
.footer { background: var(--c03); border:1px solid var(--border); border-top:none;
  padding:10px; font-size:10px; color: var(--fg-muted); text-align:center;
  border-radius:0 0 6px 6px; }

/* user profile (head of user-{id}.html) */
.userprofile { background: var(--c02); border:1px solid var(--border); margin:8px 0;
  border-top:none; padding:12px 16px; }
.userprofile-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.userprofile-meta .name { font-weight:bold; font-size:14px; }
.userprofile-meta .rank, .userprofile-meta .joined {
  color: var(--fg-muted); font-size:11px; }
.userprofile-meta img.avatar-img { margin:0; }
.userprofile-meta .avatar { margin:0; }

/* memberlist */
.memberlist { width:100%; border-collapse:collapse; background: var(--c02);
  border:1px solid var(--border); margin-top:8px; }
.memberlist th { background: var(--c03); padding:5px 8px; text-align:left;
  border-bottom:1px solid var(--border); font-size:11px; color: var(--fg-muted); }
.memberlist td { padding:6px 10px; border-bottom:1px solid var(--border); }
.memberlist tr:nth-child(even) td { background: var(--row-alt); }
.memberlist img.avatar-img { width:40px; height:40px; }

@media (max-width:700px) {
  .header { flex-direction:column; align-items:flex-start; }
  .post { grid-template-columns:1fr; }
  .poster { border-right:none; border-bottom:1px solid var(--border); }
  .num, .lastpost { display:none; }
}