/* OpenBBS: light/dark theme and responsive layouts. */
:root { color-scheme: light; --bg:#f5f7fb; --surface:#fff; --surface-soft:#f1f5f9; --text:#172033; --muted:#64748b; --line:#dbe3ef; --brand:#2563eb; --brand-hover:#1d4ed8; --danger:#c2410c; --shadow:0 10px 30px rgba(15,23,42,.08); }
:root[data-theme="dark"] { color-scheme: dark; --bg:#101827; --surface:#182236; --surface-soft:#22304a; --text:#edf2f7; --muted:#a7b5ca; --line:#34435e; --brand:#60a5fa; --brand-hover:#93c5fd; --danger:#fdba74; --shadow:0 10px 30px rgba(0,0,0,.22); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.65; }
button,input,textarea { font:inherit; } button { cursor:pointer; } a { color:inherit; }
.site-header { min-height:68px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--surface); border-bottom:1px solid var(--line); }
.brand { color:var(--brand); font-size:1.35rem; font-weight:800; text-decoration:none; letter-spacing:-.04em; }.header-actions { display:flex; align-items:center; gap:10px; }
.container { width:min(100% - 32px, 960px); margin:0 auto; padding:44px 0 64px; }.hero { margin-bottom:28px; }.hero h1 { max-width:650px; margin:4px 0 8px; font-size:clamp(1.9rem,5vw,3rem); line-height:1.25; letter-spacing:-.05em; }.hero p { margin:0; color:var(--muted); }
.eyebrow { margin:0; color:var(--brand); font-size:.75rem; font-weight:800; letter-spacing:.12em; }.panel { margin:20px 0; padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }.section-heading { display:flex; justify-content:space-between; align-items:start; gap:16px; margin:0 0 14px; }.section-heading h2,.panel h2 { margin:0; font-size:1.15rem; }.muted { margin:3px 0 0; color:var(--muted); font-size:.92rem; }
.search-form { display:flex; gap:10px; }.search-form input { flex:1; }.stack-form { display:grid; gap:9px; }.stack-form label { font-size:.9rem; font-weight:700; }.stack-form textarea { resize:vertical; min-height:110px; }
.optional { color:var(--muted); font-size:.82rem; font-weight:500; }
input,textarea { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:9px; outline:none; color:var(--text); background:var(--bg); } input:focus,textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent); }
.color-input { width:56px; height:38px; padding:3px; cursor:pointer; }
.button { min-height:42px; padding:9px 15px; border:1px solid transparent; border-radius:9px; font-weight:700; text-align:center; text-decoration:none; transition:.15s ease; }.button:disabled { cursor:not-allowed; opacity:.55; }.button-primary { color:#fff; background:var(--brand); }.button-primary:hover:not(:disabled) { background:var(--brand-hover); }.button-ghost { color:var(--text); background:transparent; border-color:var(--line); }.button-danger { color:#fff; background:#dc2626; }.button-danger:hover:not(:disabled) { background:#b91c1c; }.button-google { width:100%; color:var(--text); background:var(--surface); border-color:var(--line); }.button-google span { color:#4285f4; font-size:1.2em; font-weight:900; margin-right:8px; }.icon-button,.text-button { border:0; color:var(--muted); background:transparent; }.icon-button { width:40px; height:40px; font-size:1.25rem; }.text-button { padding:5px; color:var(--brand); font-weight:700; }.thread-list,.reply-list { display:grid; gap:12px; }.thread-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; transition:transform .15s,border-color .15s; }.thread-card:hover { transform:translateY(-2px); border-color:var(--brand); }.thread-card-link { display:block; padding:18px; text-decoration:none; }.thread-title { margin:0; font-size:1.1rem; }.thread-preview { margin:6px 0; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.thread-meta { display:flex; flex-wrap:wrap; gap:5px 14px; color:var(--muted); font-size:.82rem; }.thread-meta span:not(:last-child)::after { content:""; } .empty-state { padding:32px 16px; border:1px dashed var(--line); border-radius:12px; text-align:center; color:var(--muted); }
.thread-detail h1 { margin:0 0 8px; font-size:clamp(1.4rem,4vw,2rem); line-height:1.35; }.post-body { overflow-wrap:anywhere; white-space:pre-wrap; }.post-body a { color:var(--brand); text-decoration:underline; text-underline-offset:2px; }.reply { padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }.reply-meta { display:flex; gap:10px; color:var(--muted); font-size:.83rem; }.back-link { display:inline-block; margin-bottom:18px; color:var(--brand); font-weight:700; text-decoration:none; }.auth-page { min-height:100vh; }.auth-main { display:grid; min-height:calc(100vh - 68px); place-items:center; padding:32px 16px; }.auth-card { width:min(100%,440px); padding:32px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }.auth-card h1 { margin:5px 0 10px; font-size:1.75rem; }.auth-card .button { margin-top:22px; }.form-status { min-height:1.5em; color:var(--danger); }.toast { position:fixed; z-index:10; right:16px; bottom:16px; max-width:min(420px,calc(100% - 32px)); padding:12px 16px; border-radius:10px; color:#fff; background:#172033; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s; }.toast.is-visible { opacity:1; transform:none; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.post-images { display:grid; min-width:0; gap:12px; margin-top:14px; }.post-image { display:block; width:auto; max-width:100%; height:auto; max-height:min(720px,70vh); border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); cursor:zoom-in; object-fit:contain; }.image-dialog { width:auto; max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); padding:38px 12px 12px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }.image-dialog::backdrop { background:rgba(0,0,0,.72); }.image-dialog img { display:block; max-width:calc(100vw - 48px); max-height:calc(100vh - 72px); object-fit:contain; }.image-dialog-close { position:absolute; top:6px; right:8px; width:30px; height:30px; border:0; border-radius:50%; color:#fff; background:#334155; font-size:1.4rem; line-height:1; }
.admin-actions { display:flex; justify-content:flex-end; margin:0 0 18px; }.reply-delete { justify-self:end; min-height:auto; padding:5px 9px; font-size:.8rem; }
@media (max-width:560px) { .site-header { padding:0 16px; }.container { width:min(100% - 24px,960px); padding-top:28px; }.panel { padding:18px; }.search-form { flex-direction:column; }.search-form .button { width:100%; }.login-link,.logout-button { padding:7px 10px; }.thread-meta { gap:4px 10px; } }