:root { --page:#ffffee; --ink:#1f1f1f; --panel:#f0e0d6; --panel-2:#d6daf0; --line:#b7a99b; --link:#0000ee; --accent:#800000; --quote:#789922; --code:#e9e4dc; }
[data-theme='dark'] { --page:#1f2024; --ink:#ddd8cc; --panel:#302b28; --panel-2:#293142; --line:#605850; --link:#9ab7ff; --accent:#ff9b9b; --quote:#a5c86b; --code:#15171b; }
[data-theme='futaba'] { --page:#ffffee; --ink:#800000; --panel:#f0e0d6; --panel-2:#d6daf0; --line:#b7a99b; --link:#0000ee; --accent:#800000; --quote:#789922; --code:#e9e4dc; }
[data-theme='yotsuba-b'] { --page:#eef2ff; --ink:#000000; --panel:#d6daf0; --panel-2:#b9c4ec; --line:#b7c5e2; --link:#34345c; --accent:#11039f; --quote:#789922; --code:#d0d8f0; }
[data-theme='nord'] { --page:#2e3440; --ink:#eceff4; --panel:#3b4252; --panel-2:#434c5e; --line:#4c566a; --link:#88c0d0; --accent:#bf616a; --quote:#a3be8c; --code:#242933; }
[data-theme='gruvbox'] { --page:#282828; --ink:#ebdbb2; --panel:#3c3836; --panel-2:#504945; --line:#665c54; --link:#83a598; --accent:#fb4934; --quote:#b8bb26; --code:#1d2021; }
[data-theme='solarized-dark'] { --page:#002b36; --ink:#839496; --panel:#073642; --panel-2:#586e75; --line:#073642; --link:#268bd2; --accent:#cb4b16; --quote:#859900; --code:#001e26; }
[data-theme='cyberpunk'] { --page:#0d0f18; --ink:#00ffcc; --panel:#16192b; --panel-2:#212642; --line:#2d355c; --link:#ff007f; --accent:#ffe600; --quote:#00ff66; --code:#05060a; }
[data-theme='monochrome'] { --page:#121212; --ink:#ffffff; --panel:#1e1e1e; --panel-2:#2a2a2a; --line:#444444; --link:#cccccc; --accent:#ffffff; --quote:#888888; --code:#000000; }
[data-theme='photon'] { --page:#eeeff2; --ink:#333333; --panel:#d6daf0; --panel-2:#c6cbe0; --line:#b0b6cf; --link:#ff6600; --accent:#dd0000; --quote:#558800; --code:#e2e4eb; }
.theme-select { font-size:12px; padding:2px 4px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; }
.custom-css-modal { background:var(--panel); border:2px solid var(--line); color:var(--ink); padding:16px; max-width:600px; width:90%; border-radius:4px; box-shadow:0 4px 12px rgba(0,0,0,0.3); }
.custom-css-modal::backdrop { background:rgba(0,0,0,0.5); }
.custom-css-textarea { width:100%; height:200px; font-family:monospace; font-size:12px; margin-top:8px; margin-bottom:12px; background:var(--page); color:var(--ink); border:1px solid var(--line); padding:6px; resize:vertical; }
* { box-sizing:border-box; }
body { margin:0; background:var(--page); color:var(--ink); font:14px/1.36 Verdana, Arial, sans-serif; }
a { color:var(--link); } a:hover { color:var(--accent); }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:7px 12px; background:var(--panel-2); border-bottom:1px solid var(--line); }
.logo { color:var(--accent); font:bold 20px Georgia, serif; text-decoration:none; } .site-header nav { display:flex; gap:.7rem; }
main { max-width:1120px; margin:0 auto; padding:14px 10px 28px; } .site-footer { border-top:1px solid var(--line); padding:12px; text-align:center; color:var(--accent); font-size:12px; }
h1,h2,h3 { margin:.25rem 0 .55rem; font-family:Georgia, serif; } h1 { color:var(--accent); font-size:23px; } h2 { font-size:17px; } h3 { font-size:15px; }
.intro,.board-heading { text-align:center; margin:10px 0 15px; } .board-heading p { margin:.3rem; } .board-nav { font-size:13px; }
.board-list { max-width:680px; margin:1rem auto; padding:12px 25px; background:var(--panel); border:1px solid var(--line); } .board-list li { margin:.45rem 0; }
.post-form,.login-form,.admin-form { background:var(--panel-2); border:1px solid var(--line); padding:10px; margin:13px 0; }.bbcode-toolbar { display:flex; gap:4px; margin-bottom:4px; flex-wrap:wrap; }.bbcode-toolbar button { font-size:11px; padding:2px 6px; font-weight:bold; cursor:pointer; background:var(--panel); border:1px solid var(--line); color:var(--ink); }.bbcode-toolbar button:hover { border-color:var(--accent); }.qr-window { position:fixed; bottom:20px; right:20px; width:340px; z-index:100; background:var(--panel-2); border:2px solid var(--line); box-shadow:0 4px 12px rgba(0,0,0,0.3); padding:8px; display:none; }.qr-header { display:flex; justify-content:space-between; align-items:center; font-weight:bold; font-size:12px; margin-bottom:6px; background:var(--panel); padding:3px 6px; border:1px solid var(--line); }.qr-close { cursor:pointer; background:none; border:none; color:var(--accent); font-weight:bold; font-size:14px; } label { display:block; margin:5px 0; font-weight:bold; } input,textarea,button { font:inherit; color:var(--ink); background:var(--page); border:1px solid var(--line); padding:4px; } input,textarea { width:100%; max-width:620px; } textarea { resize:vertical; } button { cursor:pointer; background:var(--panel); } button:hover { border-color:var(--accent); } .form-row { display:flex; gap:8px; flex-wrap:wrap; } .form-row label { flex:1 1 180px; } .form-help { color:var(--accent); font-size:12px; margin:.5rem 0 0; }.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.pagination { text-align:center; margin:12px 0; } .thread-list { border-top:1px solid var(--line); }.thread-preview { padding:9px 4px; border-bottom:1px solid var(--line); }.thread-preview header { font-weight:bold; }.subject { margin-left:.4rem; color:var(--accent); }.preview-body { max-height:5.4em; overflow:hidden; margin:7px 0; }.thread-preview footer { color:var(--accent); font-size:12px; }.badge { margin-left:.35rem; padding:1px 4px; border:1px solid var(--line); font-size:11px; color:var(--accent); }.catalog { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; border:0; }.catalog .thread-preview { background:var(--panel); border:1px solid var(--line); }
.thread { margin:14px 0; }.post { display:table; max-width:100%; margin:7px 0; background:var(--panel); border:1px solid var(--line); }.post.op { background:transparent; border:0; }.post-header { padding:3px 6px; color:var(--accent); font-size:12px; }.poster-name { color:#117743; font-weight:bold; }.tripcode { color:var(--accent); }.op-mark { color:var(--accent); font-weight:bold; }.post-header time { margin-left:.45rem; }.post-number { margin-left:.45rem; }.quote-button { margin-left:.4rem; padding:0 3px; font-size:11px; }.post-body { padding:4px 8px 9px; overflow-wrap:anywhere; }.post-body blockquote { margin:.5rem 0; padding-left:.6rem; border-left:3px solid var(--quote); color:var(--quote); }.post-body pre { max-width:100%; overflow:auto; padding:7px; background:var(--code); }.post-backlinks { font-size:11px; color:var(--accent); margin-top:4px; padding:2px 8px; border-top:1px dashed var(--line); }.backlink-label { font-weight:bold; }.spoiler { color:var(--ink); background:var(--ink); cursor:pointer; }.spoiler:hover,.spoiler:focus { color:inherit; background:transparent; }.quote-link { color:var(--quote); }.mod-inline { display:inline; margin:0 3px 4px; }.mod-inline input { width:auto; max-width:180px; }.notice,.message-box { background:var(--panel); border:1px solid var(--line); padding:10px; }.message-box { max-width:600px; margin:40px auto; text-align:center; }.ban h1 { color:var(--accent); }.empty { color:var(--accent); text-align:center; }.admin-section { border-top:1px solid var(--line); padding:10px 0; }.admin-form { max-width:760px; }.admin-form input[type='checkbox'] { width:auto; }.audit-log { padding-left:22px; font-size:12px; }
@media (max-width:600px) { body { font-size:13px; } main { padding:9px 5px 18px; }.site-header { padding:6px; }.post { width:100%; }.post-form { padding:8px; }.post-body { padding:5px; }.catalog { grid-template-columns:1fr; } }