/* =====================================================================
   classic.css — "Frontend 2004", Thai gaming-webboard edition.
   White page, orange menu bar, bright-blue category bars, MS Sans Serif,
   tables everywhere. No gradients, no shadows, no rounded corners.
   ===================================================================== */

html { background: #fff; }
body {
  margin: 0; padding: 4px 0 16px;
  font-family: "MS Sans Serif", Tahoma, "Microsoft Sans Serif", Verdana, Arial, sans-serif;
  font-size: 12px; line-height: 1.4; color: #000; background: #fff;
}
a { color: #0000ff; text-decoration: underline; }
a:visited { color: #800080; }
a:hover { color: #ff7508; }
a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 2px dotted #000; outline-offset: 1px; }
img { border: 0; vertical-align: middle; }
img.ico { vertical-align: text-bottom; }
h1, h2, h3, h4 { margin: 0; font-size: 12px; font-weight: bold; }
h1 { font-size: 14px; }
hr { border: 0; border-top: 1px solid #999; height: 0; margin: 6px 0; }
p { margin: 0 0 8px; }
.dim { color: #777; }
.small { font-size: 11px; }
.tiny { font-size: 10px; }
.red { color: #ff0000; }
.green { color: #007700; }
.orange { color: #ff7508; }
.inline { display: inline; margin: 0; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.unread { color: #ff0000; }

/* ---------- classic form controls (Windows 2000/XP) ---------- */
input, select, textarea, button {
  font-family: "MS Sans Serif", Tahoma, Verdana, Arial, sans-serif; font-size: 12px; color: #000;
}
input[type=text], input[type=password], input[type=email], input[type=search], input[type=number], input[type=url], textarea, select {
  background: #fff; border: 2px inset #ddd; padding: 1px 3px; border-radius: 0;
}
select { padding: 1px; }
textarea { font-family: Tahoma, "Courier New", monospace; }
button, input[type=submit], input[type=button], input[type=reset], .btn {
  background: #ececec; color: #000; border: 2px outset #ddd; border-radius: 0; padding: 1px 8px; font-size: 11px; cursor: pointer;
  text-decoration: none; display: inline-block;
}
button:active, input[type=submit]:active, .btn:active { border-style: inset; }
button.linkbtn { background: none; border: 0; box-shadow: none; padding: 0; color: #0000ff; text-decoration: underline; font-size: 12px; cursor: pointer; }
button.linkbtn:hover { color: #ff7508; }
button.linkbtn.red { color: #ff0000; }
button.linkbtn.small { font-size: 11px; }
fieldset { border: 1px solid #bbb; padding: 6px 10px; margin: 0 0 8px; }
legend { font-weight: bold; padding: 0 4px; }
label { cursor: pointer; }
.field-error { color: #ff0000; font-size: 11px; }

/* ---------- page container ---------- */
#container { width: 765px; max-width: 100%; margin: 0 auto; background: #fff; box-sizing: border-box; }
.error-container { margin-top: 60px; }

/* ---------- header: logo left, banner right ---------- */
#header { background: #fff; }
#header td { padding: 4px 6px; }
.logo-link { text-decoration: none; }
.logo-text {
  font-family: "Arial Black", Impact, "Trebuchet MS", Arial, sans-serif; font-size: 26px; font-weight: 900; color: #ff7508;
  letter-spacing: 1px; text-transform: uppercase; text-shadow: 2px 2px 0 #7b5a9c;
}
.logo-img { max-height: 60px; }
.tagline { font-size: 11px; color: #555; }
.banner-slot {
  width: 468px; height: 60px; border: 1px solid #999; background: #fff; color: #777; font-size: 10px;
  display: inline-block; line-height: 60px; text-align: center; box-sizing: border-box;
}
.banner-slot a { color: #ff7508; }

/* ---------- orange menu bar ---------- */
#navbar { background: #ff7508; color: #fff; padding: 2px 10px; font-size: 12px; font-weight: bold; text-align: center; border-bottom: 1px solid #ff7508; }
#navbar a { color: #fff; text-decoration: none; padding: 0 5px; }
#navbar a:hover { color: #ffff00; text-decoration: underline; }
#navbar a.active { background: #fff; color: #ff7508; padding: 1px 6px; }
#navbar .sep { color: #fff; padding: 0 1px; }

/* ---------- tool row: search left, login right ---------- */
.toolrow { width: 100%; border-collapse: collapse; font-size: 11px; }
.toolrow td { padding: 4px 8px; vertical-align: top; }
.toolrow input[type=text], .toolrow input[type=password], .toolrow input[type=search] { width: 120px; }
.toolrow .userbox { font-size: 11px; white-space: nowrap; }
.toolrow .hint { color: #ff7508; font-size: 10px; }
.loginbox { white-space: nowrap; }
.loginbox label { font-weight: bold; }

/* ---------- content ---------- */
#content { padding: 4px 6px 12px; min-height: 300px; }
.breadcrumb { font-size: 11px; margin: 0 0 6px; color: #555; }
.breadcrumb .current { color: #000; font-weight: bold; }
.servertime-line { text-align: center; font-size: 12px; margin: 6px 0 4px; }
.servertime-line b a { color: #0000ff; }
.news-lines { text-align: center; line-height: 1.6; margin: 6px 0; }
.news-lines .announce-text { color: #000; }

.titlebar { background: #0000ff; color: #fff; font-weight: bold; padding: 2px 6px; font-size: 12px; margin-top: 6px; text-align: center; }
.titlebar a { color: #fff; }
.titlebar-right { float: right; font-weight: normal; font-size: 11px; }
.titlebar-right a { color: #ffff00; }
.subbar { background: #ffefce; border-bottom: 1px solid #ff7508; padding: 2px 6px; font-size: 11px; }
.box { border: 1px solid #999; border-top: 0; padding: 6px; background: #fff; }
.box-plain { border: 1px solid #999; padding: 6px; background: #fff; margin-top: 8px; }

.alert { border: 1px solid #999; padding: 4px 8px; margin: 6px 0; background: #ffffe1; font-size: 12px; }
.alert-ok { background: #e8ffe8; border-color: #4a4; }
.alert-warn { background: #fff3cd; border-color: #c90; }
.alert-error { background: #ffe8e8; border-color: #c00; }
.alert-info { background: #ffffe1; }

.announce { text-align: center; padding: 4px 8px; margin-top: 4px; }
.announce b { color: #ff0000; }

/* NEW! marker (yellow pill, red text) */
.newmark { display: inline-block; font-family: Arial, sans-serif; font-size: 8px; font-weight: bold; color: #ff0000; background: #ffff00; padding: 0 2px; line-height: 11px; vertical-align: middle; margin-left: 3px; letter-spacing: 0; }
.oldmark { color: #000; font-size: 11px; }

/* ---------- board grid (home / board index) ---------- */
table.boardgrid { width: 100%; border-collapse: collapse; }
table.boardgrid td { width: 33.3%; padding: 3px 6px; vertical-align: top; font-size: 12px; }
table.boardgrid .cnt { color: #000; }
table.boardgrid .board-desc { display: none; }
table.boardgrid a { color: #0000ff; }
table.boardgrid .sub { padding-left: 24px; }

/* ---------- data tables (topic lists) ---------- */
table.tbl { width: 100%; border-collapse: collapse; border: 0; background: #fff; }
table.tbl th { background: #ff7508; color: #ffff00; border: 0; padding: 2px 5px; font-size: 11px; text-align: center; white-space: nowrap; }
table.tbl th a { color: #ffff00; }
table.tbl td { border: 0; border-bottom: 1px solid #fff; padding: 2px 5px; vertical-align: top; }
table.tbl tr.alt td { background: #eeeeee; }
table.tbl tr.pinned td { background: #ffefce; }
table.tbl tr:hover td { background: #ffffcc; }
table.tbl td.num { text-align: center; white-space: nowrap; }
table.tbl td.c { text-align: center; }
table.tbl td.icon-cell { width: 20px; text-align: center; padding: 2px; }
table.tbl td.mark-cell { width: 36px; text-align: center; white-space: nowrap; }
table.tbl .last { font-size: 10px; white-space: nowrap; text-align: center; }
table.tbl .author a { color: #800080; font-weight: bold; text-decoration: none; }
table.tbl .cat-row td { background: #0000ff; color: #fff; font-weight: bold; text-align: center; }
table.tbl .cat-row a { color: #fff; }
table.tbl .cat-row a:hover { color: #ffff00; }
.board-desc { font-size: 11px; color: #555; }
.board-name { font-weight: bold; }
.topic-title a { color: #0000ff; }
.topic-title a:visited { color: #800080; }
.topic-cate { color: #ff7508; font-size: 11px; }
.topic-excerpt { font-size: 11px; color: #666; }
.topic-pages { font-size: 10px; color: #777; }
.topic-pages a { color: #0000ff; }
.badge { display: inline-block; font-size: 9px; font-weight: bold; padding: 0 3px; border: 1px solid; margin-right: 3px; vertical-align: middle; line-height: 12px; }
.badge-new { color: #ff0000; background: #ffff00; border-color: #ffff00; }
.badge-hot { color: #fff; background: #ff0000; border-color: #cc0000; }
.badge-pin { color: #000; background: #ffcc00; border-color: #cc9900; }
.badge-lock { color: #fff; background: #666; border-color: #333; }
.badge-solved { color: #fff; background: #009900; border-color: #006600; }
.post-topic-link { text-align: center; font-weight: bold; margin: 6px 0; }
.post-topic-link a { color: #0000ff; }

.pagination { font-size: 11px; }
.pagination a, .pagination b { margin: 0 1px; }
.pagination .cur { color: #ff0000; }
.pagination .dots { color: #999; }
.toolbar { margin: 6px 0; font-size: 11px; overflow: hidden; }
.toolbar .btn { margin-right: 4px; }
.jumpto { text-align: right; font-size: 11px; margin: 10px 0 4px; }
.jumpto b { margin-right: 4px; }

/* ---------- thread / post box ---------- */
table.post { width: 100%; border-collapse: collapse; border: 1px solid #ff7508; margin-top: 8px; background: #fff; }
table.post td { vertical-align: top; }
table.post .post-head { background: #ffefce; border-bottom: 1px solid #ff7508; padding: 2px 6px; font-size: 11px; }
table.post .post-head .num { float: right; font-weight: bold; color: #ff7508; }
table.post .post-head .num a { text-decoration: none; color: #ff7508; }
table.post .author { width: 150px; background: #eeeeee; border-right: 1px solid #ddd; padding: 6px; font-size: 11px; }
table.post .author .uname { font-weight: bold; font-size: 12px; }
table.post .author .uname a { text-decoration: none; color: #800080; }
table.post .author .rank { color: #006600; font-weight: bold; }
table.post .author .rank-mod { color: #0000ff; }
table.post .author .rank-admin { color: #ff0000; }
table.post .author .avatar { margin: 4px 0; }
table.post .author .avatar img { border: 1px solid #999; padding: 1px; background: #fff; }
table.post .author .meta { color: #555; line-height: 1.5; }
table.post .body { padding: 8px; font-size: 13px; word-wrap: break-word; overflow-wrap: anywhere; }
table.post .body.classic-body { font-size: 12px; }
table.post .post-foot { border-top: 1px solid #ddd; background: #fafafa; padding: 3px 6px; font-size: 10px; color: #777; }
table.post .post-foot .actions { float: right; }
table.post .post-foot .actions a, table.post .post-foot .actions button { margin-left: 6px; }
table.post .edited { font-size: 10px; color: #777; font-style: italic; margin-top: 8px; }
table.post .signature { border-top: 1px dashed #ccc; margin-top: 10px; padding-top: 4px; font-size: 11px; color: #666; }
table.post.hidden-post .body { color: #999; font-style: italic; }
table.post.best-answer { border: 2px solid #009900; }
table.post .best-mark { background: #e8ffe8; border-bottom: 1px solid #009900; padding: 2px 6px; font-size: 11px; color: #006600; font-weight: bold; }
.rep { color: #555; font-size: 10px; }
.rep .pos { color: #090; font-weight: bold; }
.rep .neg { color: #c00; font-weight: bold; }
.rep form { display: inline; }

/* ---------- BBCode output ---------- */
.post-content ul, .post-content ol { margin: 4px 0; padding-left: 24px; }
.bb-quote { border: 1px solid #999; background: #f0f0f0; margin: 6px 0; font-size: 12px; }
.bb-quote-head { background: #ffefce; border-bottom: 1px solid #999; padding: 2px 6px; font-weight: bold; font-size: 11px; }
.bb-quote-body { padding: 4px 8px; }
.bb-code { border: 1px solid #999; background: #f8f8f8; margin: 6px 0; font-size: 12px; }
.bb-code-head { background: #e8e8e8; border-bottom: 1px solid #999; padding: 2px 6px; font-weight: bold; font-size: 11px; }
.bb-code-body { padding: 4px 8px; font-family: "Courier New", Courier, monospace; white-space: pre-wrap; margin: 0; max-height: 400px; overflow: auto; }
.bb-img { max-width: 100%; height: auto; }
.bb-url { word-break: break-all; }
.smiley { vertical-align: middle; }

/* ---------- editor ---------- */
.editor-toolbar { margin-bottom: 3px; }
.editor-toolbar button { font-size: 10px; padding: 1px 5px; margin-right: 2px; min-width: 24px; }
.editor-toolbar select { font-size: 10px; }
.editor textarea { width: 100%; box-sizing: border-box; font-size: 12px; }
.smiley-bar { font-size: 11px; margin-top: 3px; }
.smiley-bar button { background: none; border: 0; box-shadow: none; padding: 1px; cursor: pointer; }
.form-table td { padding: 3px 6px; vertical-align: top; }
.form-table td.lbl { width: 140px; text-align: right; font-weight: bold; white-space: nowrap; }
.form-table .hint { font-size: 10px; color: #777; }

/* ---------- home portal ---------- */
.portal { width: 100%; border-collapse: separate; border-spacing: 0; }
.portal > tbody > tr > td { vertical-align: top; }
.portal td.main-col { width: auto; }
.portal td.side-col { width: 190px; min-width: 190px; padding-left: 8px; }
.sidebox { border: 1px solid #999; margin-top: 8px; font-size: 11px; }
.sidebox .sidebox-title { background: #0000ff; color: #fff; font-weight: bold; padding: 2px 6px; }
.sidebox .sidebox-body { padding: 5px 6px; }
.sidebox ul { margin: 0; padding-left: 14px; }
.sidebox li { margin: 1px 0; }
.online-names { word-break: break-word; }
.online-line { text-align: center; font-size: 11px; margin: 6px 0; }
.counter-table { border-top: 1px solid #ff7508; font-size: 11px; background: #fff; }
.counter-table td { padding: 3px 8px; }
#footer .copyright { text-align: center; padding: 8px; font-size: 10px; color: #555; }
.stats-line { font-size: 11px; color: #555; margin: 6px 0; text-align: center; }
.lcd { font-family: "Courier New", monospace; background: #000; color: #0f0; padding: 0 4px; letter-spacing: 1px; }

/* ---------- profile ---------- */
table.profile td.lbl { width: 160px; font-weight: bold; background: #eeeeee; }
.avatar-big img { border: 1px solid #999; padding: 2px; background: #fff; }

/* ---------- messages (mailbox) ---------- */
.mailnav { font-size: 11px; margin: 6px 0; }
.mailnav a.active { font-weight: bold; color: #000; text-decoration: none; }
tr.unread-row td { font-weight: bold; background: #fffbe6; }

/* ---------- tabs (search filters etc) ---------- */
.tabs { font-size: 11px; margin: 4px 0; }
.tabs a { border: 1px solid #999; border-bottom: 0; padding: 2px 8px; background: #eee; text-decoration: none; color: #333; }
.tabs a.active { background: #fff; font-weight: bold; }

/* ---------- classic mode (?classic=1): even older, grey 1999 look ---------- */
body.classic { font-size: 11px; background: #c0c0c0 url("/public/images/bg-classic.gif"); }
body.classic #container { width: 780px; border: 2px outset #ddd; background: #fff; }
body.classic #navbar { background: #000080; }
body.classic .titlebar { background: #000080; }
body.classic table.tbl th { background: #c0c0c0; color: #000; }
body.classic table.post .post-head { background: #c0c0c0; }
body.classic table.post .author { background: #e8e8e8; }
body.classic .logo-text { font-family: Impact, "Arial Black", sans-serif; color: #000080; text-shadow: none; letter-spacing: 0; }
body.classic table.post .body { font-size: 12px; }

/* ---------- responsive: keep the look, shrink the frame ---------- */
@media (max-width: 800px) {
  #container { width: 100%; }
  .banner-slot { display: none; }
}
@media (max-width: 700px) {
  .portal td.side-col { display: none; }
  table.post .author { width: 110px; }
  table.tbl .hide-m { display: none; }
  table.boardgrid td { display: block; width: auto; }
  #header td { display: block; text-align: left; padding: 6px 8px; }
  .toolrow td { display: block; }
  .toolrow .userbox, .loginbox { white-space: normal; }
  .titlebar-right { float: none; display: block; }
  .form-table td.lbl { width: auto; text-align: left; display: block; }
  .form-table td { display: block; }
}
@media (max-width: 480px) {
  table.post .author { width: 80px; padding: 4px; }
  table.post .body { padding: 6px; }
  #navbar { font-size: 10px; padding: 3px 4px; }
}

/* ---------- print ---------- */
@media print { #navbar, #footer, .toolbar, .editor, .toolrow { display: none; } }

/* ---------- market (ตลาด AI model) ---------- */
.marketbox { border: 2px solid #ff7508; margin-top: 8px; background: #fffaf0; font-size: 12px; }
.marketbox-head { background: #ff7508; color: #fff; font-weight: bold; padding: 3px 8px; }
.market-status { float: right; font-weight: normal; font-size: 11px; background: #fff; color: #ff7508; padding: 0 6px; }
.market-status.market-sold { color: #009900; }
.market-status.market-cancelled, .market-status.market-ended { color: #777; }
table.market-table { border-collapse: collapse; margin: 4px 0; }
table.market-table td { padding: 2px 8px; vertical-align: top; }
table.market-table td.lbl { font-weight: bold; white-space: nowrap; color: #555; }
.market-price { color: #ff0000; font-size: 16px; }
.market-bids { padding: 4px 8px; border-top: 1px dashed #ff7508; }
.market-bids ol { margin: 2px 0; padding-left: 24px; }
.market-bidform { padding: 6px 8px; border-top: 1px dashed #ff7508; background: #fff; }
.market-bidform input[type=number] { width: 110px; }
.market-note, .market-owner { padding: 4px 8px; border-top: 1px dashed #ff7508; }
.market-disclaimer { padding: 3px 8px; font-size: 10px; color: #777; border-top: 1px solid #ffd9b3; }
.market-tag { display: inline-block; font-size: 10px; font-weight: bold; padding: 0 4px; border: 1px solid; margin-right: 3px; vertical-align: middle; line-height: 13px; white-space: nowrap; }
.market-tag-sale { color: #fff; background: #ff7508; border-color: #cc5a00; }
.market-tag-auction { color: #fff; background: #0000ff; border-color: #000099; }
.market-tag-sold { color: #fff; background: #009900; border-color: #006600; }
.market-tag-closed { color: #fff; background: #777; border-color: #444; }