/* ============================================================
   MYPS3 форум — modern dark imageboard theme
   ============================================================ */
:root{
  --bg:#0e1113; --bg2:#12161a; --card:#171b21; --card2:#1c2128;
  --line:#262c34; --line2:#313945;
  --fg:#e7edf2; --fg2:#c3cdd7; --mut:#8b97a3;
  --acc:#4ea1ff; --acc-d:#2b7fe0; --acc-ink:#04121f;
  --green:#5fd08a; --quote:#7fb2ff; --red:#ff6b6b; --name:#8e9dae;
  --radius:14px; --radius-sm:9px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
  padding:64px 0 80px; word-wrap:break-word;
}
a{color:var(--acc); text-decoration:none}
a:hover{color:#7cbcff; text-decoration:underline}
img{max-width:100%; height:auto}
hr{display:none}
.desktop-style,.mobile-style{display:none}

/* ---------- top bar (the top .boardlist becomes a sticky bar) ---------- */
.boardlist:not(.bottom){
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 18px; background:rgba(14,17,19,.88);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); font-size:13.5px; color:var(--mut);
}
.boardlist:not(.bottom) .sub{color:var(--mut)}
.boardlist a{color:var(--fg2); padding:3px 8px; border-radius:7px; text-decoration:none}
.boardlist a:hover{background:var(--card2); color:#fff; text-decoration:none}
#brand{font-weight:800; font-size:20px; letter-spacing:1px; padding:0!important; margin-right:8px;
  background:linear-gradient(90deg,#4ea1ff,#8e6bff);
  -webkit-background-clip:text; background-clip:text; color:transparent!important}
#brand:hover{background:linear-gradient(90deg,#4ea1ff,#8e6bff); text-decoration:none}
#brand span{margin-left:5px; font-size:12px; color:var(--mut); font-weight:600;
  -webkit-text-fill-color:var(--mut)}
.boardlist.bottom{max-width:960px; margin:22px auto 0; padding:10px 16px; text-align:center;
  color:var(--mut); border-top:1px solid var(--line); font-size:13px}
.board_image{display:none}

/* ---------- board header ---------- */
header{max-width:960px; margin:22px auto 6px; padding:0 16px; text-align:center}
header h1{margin:0; font-size:30px; font-weight:800; letter-spacing:.5px; color:#fff}
header .subtitle{color:var(--mut); font-size:13.5px; margin-top:4px}

/* ---------- layout width ---------- */
.thread, form[name="post"], .banner, .pages, #post-moderation-fields,
.blotter, .theme-catalog, div[style*="text-align"]{max-width:960px}
form[name="post"], .thread, .pages{margin-left:auto; margin-right:auto}
.thread, .pages{padding:0 16px}

/* ---------- post form as a card ---------- */
form[name="post"]{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 14px; margin:16px auto 24px; max-width:640px;
}
form[name="post"] table{width:100%; border-collapse:collapse}
form[name="post"] th,form[name="post"] td{
  border:0; padding:6px 4px; text-align:left; vertical-align:top; background:none}
form[name="post"] th{color:var(--mut); font-weight:600; font-size:13px; width:96px; white-space:nowrap}
form[name="post"] input[type="text"],
form[name="post"] input[type="password"],
form[name="post"] textarea,
form[name="post"] select{
  width:100%; max-width:100%; background:var(--bg2); color:var(--fg);
  border:1px solid var(--line2); border-radius:var(--radius-sm);
  padding:9px 11px; font:inherit; outline:none; transition:border-color .15s}
form[name="post"] textarea{min-height:96px; resize:vertical}
form[name="post"] input:focus,form[name="post"] textarea:focus,form[name="post"] select:focus{
  border-color:var(--acc)}
form[name="post"] input[type="submit"]{
  width:auto; cursor:pointer; background:linear-gradient(90deg,var(--acc),var(--acc-d));
  color:var(--acc-ink); font-weight:700; border:0; border-radius:999px;
  padding:9px 22px; margin-left:8px; transition:filter .15s}
form[name="post"] input[type="submit"]:hover{filter:brightness(1.08)}
form[name="post"] input[type="file"]{color:var(--mut); font-size:13px; width:auto}
.captcha_text,input.captcha_text{max-width:200px!important}
#captcha,tr.captcha td img,.captcha_html img{border-radius:var(--radius-sm); margin-top:6px}

/* ---------- threads & posts ---------- */
.thread{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; margin:0 auto 16px; overflow:hidden}
.post{margin:0}
.post.op{display:block}
.intro{color:var(--mut); font-size:13px; margin:0 0 6px; line-height:1.9}
.intro label{display:inline}
.intro .subject{color:var(--acc); font-weight:700; font-size:15px; margin-right:4px}
.intro .name{color:var(--green); font-weight:600}
.intro .trip{color:#57b98a}
.intro .time,.intro time{color:var(--mut)}
.intro a.post_no{color:var(--mut); margin:0 1px; text-decoration:none}
.intro a.post_no:hover{color:var(--acc)}
.intro input.delete{margin-right:4px; accent-color:var(--acc)}
.intro a{color:var(--fg2)}
.post_anchor{scroll-margin-top:72px}

/* body text */
.body{margin:8px 4px 4px 0; color:var(--fg); font-size:15px; line-height:1.6;
  white-space:normal; overflow-wrap:break-word}
.body br{line-height:1.6}
.body a{color:var(--quote)}
.quote{color:var(--green)}
.body .quote{color:var(--green)}
.spoiler,span.spoiler{background:#000; color:#000; border-radius:3px; padding:0 2px}
.spoiler:hover{color:#fff}
.body .aa,.body pre{background:var(--bg2); border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; overflow-x:auto}

/* references / backlinks */
a.post-link,a.mentioned-,.mentioned a,.body a.quotelink{color:var(--quote)}
.deadlink{color:#c96; text-decoration:line-through}
.mentioned{font-size:12px; color:var(--mut)}

/* ---------- files / images ---------- */
.files{float:left; margin:2px 16px 8px 0; display:flex; gap:10px; flex-wrap:wrap}
.file{margin:0; text-align:left}
.fileinfo{display:block; color:var(--mut); font-size:12px; margin-bottom:4px}
.fileinfo a{color:var(--acc)}
.post-image,img.post-image{
  border-radius:10px; border:1px solid var(--line2); display:block; background:var(--bg2)}
.post-image:hover{border-color:var(--acc)}
.multifile{display:inline-block}
.post.reply .files{margin:2px 14px 6px 0}

/* replies as stacked cards */
.post.reply{
  display:block; float:none!important; clear:both;
  background:var(--card2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px 12px; margin:10px 0 0; overflow:hidden}
.post.reply:target,.post.reply.highlighted{border-color:var(--acc);
  box-shadow:0 0 0 2px rgba(78,161,255,.25)}
br.clear{clear:both}

.omitted{display:block; clear:both; color:var(--mut); font-size:13px; margin-top:8px}

/* post controls (report/delete links per post) */
.post_controls,.postControls{font-size:12px}

/* ---------- pagination ---------- */
.pages{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 14px; margin:18px auto; text-align:center; color:var(--mut); font-size:14px}
.pages a{display:inline-block; padding:4px 10px; margin:2px; border-radius:8px;
  background:var(--card2); border:1px solid var(--line2); color:var(--fg2)}
.pages a:hover{border-color:var(--acc); color:#fff; text-decoration:none}
.pages a.selected{background:var(--acc); color:var(--acc-ink); font-weight:700}

/* ---------- catalog ---------- */
.theme-catalog .catalog{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px; max-width:1100px; margin:16px auto; padding:0 16px}
.theme-catalog .mix{background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:8px; overflow:hidden}
.theme-catalog .mix:hover{border-color:var(--acc)}
.theme-catalog .replies{color:var(--fg2); font-size:12.5px}

/* ---------- misc / mod / footer ---------- */
.banner{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  text-align:center; padding:8px; margin:12px auto; color:var(--mut); font-size:13px}
.blotter{color:var(--red); text-align:center; font-size:13px; margin:8px 0}
.unimportant,small{color:var(--mut); font-size:12px}
footer{max-width:960px; margin:30px auto 0; padding:16px; text-align:center;
  color:var(--mut); font-size:12.5px; border-top:1px solid var(--line)}
footer a{color:var(--acc)}
.top_notice{max-width:960px;margin:8px auto;color:var(--mut);text-align:center}

/* moderation login/table (mod.php) */
table.modlog,form.login table{margin:16px auto}
form.login input[type=text],form.login input[type=password]{
  background:var(--bg2);color:var(--fg);border:1px solid var(--line2);border-radius:8px;padding:8px}

/* ---------- mobile ---------- */
@media (max-width:640px){
  body{padding-top:56px; font-size:15px}
  #topbar{padding:8px 12px; gap:8px}
  #brand{font-size:18px}
  #topbar .boardlist{font-size:13px; width:100%; flex-basis:100%; order:3;
    overflow-x:auto; white-space:nowrap; padding-top:2px}
  header h1{font-size:23px}
  .thread{padding:12px; border-radius:12px}
  form[name="post"]{padding:8px 10px}
  form[name="post"] th{width:auto; display:block; padding-bottom:0}
  form[name="post"] td{display:block; padding-top:2px}
  form[name="post"] input[type="submit"]{margin:8px 0 0; width:100%}
  .files{float:none; margin:0 0 8px}
  .post.reply .files{float:none}
  .post-image{max-width:100%}
}