:root { color-scheme: dark; }
* { margin:0; box-sizing:border-box; }
body { min-height:100vh; color:#e6ebf5; font-family: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background: linear-gradient(rgba(8,11,20,.85), rgba(8,11,20,.94)), url('/static/img/background_texture.jpg') center/cover fixed, #080b14; }
header { display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.6rem 1.5rem; border-bottom:1px solid #2a3a5a55; background:#070a12cc; position:sticky; top:0; z-index:10; backdrop-filter:blur(5px); }
.brand img { height:90px; display:block; }
nav { font-size:.95rem; color:#9fb0cc; }
a { color:#5fb0ff; text-decoration:none; } a:hover { text-decoration:underline; }
main { max-width:960px; margin:0 auto; padding:2rem 1.5rem; }
h2 { margin-bottom:1rem; }
.hero { text-align:center; padding:3.4rem 1.5rem; border-radius:16px; border:1px solid #2a3a5a66;
  background: linear-gradient(rgba(6,9,18,.45), rgba(6,9,18,.88)), url('/static/img/hero_background.jpg') center/cover; }
.hero .crest { width:min(240px,58%); height:auto; filter:drop-shadow(0 8px 30px #1a3a66aa); }
.hero .tag { color:#aebbd2; letter-spacing:.05em; margin-top:.6rem; }
.status { margin-top:1rem; color:#cfe3ff; letter-spacing:.06em; }
.dot { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; background:#4ade80;
  box-shadow:0 0 .5rem #4ade80; vertical-align:middle; margin-right:.4rem; }
table { width:100%; border-collapse:collapse; }
td,th { text-align:left; padding:.5rem .6rem; border-bottom:1px solid #ffffff10; vertical-align:top; }
img.av { border-radius:50%; vertical-align:middle; }
.toon { color:#7fd0ff; font-size:.9rem; }
.muted { color:#5f6b82; }
.rolechip { display:inline-block; font-size:.72rem; padding:.08rem .42rem; margin:.1rem .15rem .1rem 0;
  border:1px solid #ffffff2e; border-radius:.5rem; color:#cdd; }
.rolechip.bot { color:#9bb0ff; border-color:#5865f288; }
.acct { max-width:600px; }
.toonrow { display:flex; gap:.6rem; align-items:center; margin-bottom:.7rem; flex-wrap:wrap; }
.acct input[type=text] { flex:1; min-width:150px; background:#0e1322; border:1px solid #2a3a5a;
  color:#e6ebf5; padding:.5rem .6rem; border-radius:.4rem; font-size:.95rem; }
.toonrow label { color:#9fb0cc; font-size:.88rem; white-space:nowrap; }
button { background:#1f6feb; color:#fff; border:0; padding:.55rem 1.3rem; border-radius:.5rem;
  cursor:pointer; font-weight:600; font-size:.95rem; }
button:hover { background:#2a7fff; }
.hint { color:#778; font-size:.85rem; margin-top:.9rem; }
.saved { color:#4ade80; font-size:.9rem; margin-left:.6rem; }
.rolelist { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.45rem .9rem; margin:1rem 0 1.4rem; }
.rolecheck { display:flex; align-items:center; gap:.55rem; padding:.35rem .55rem; border:1px solid #ffffff14;
  border-radius:.5rem; background:#0e132255; cursor:pointer; }
.rolecheck:hover { border-color:#2a3a5a; }
.dotc { display:inline-block; width:.8rem; height:.8rem; border-radius:50%; background:#5a6680; flex:none; }
.proh { margin:1.5rem 0 .6rem; border-bottom:1px solid #ffffff12; padding-bottom:.3rem; }
.cgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.6rem; }
.ccard { display:flex; gap:.6rem; align-items:center; padding:.55rem .65rem; border:1px solid #ffffff14;
  border-radius:.6rem; background:#0e132255; }
.ccard .av { flex:none; }
.cinfo .cname { font-weight:600; }
.cinfo .chandle { font-size:.78rem; }
.toonrow select { flex:1; min-width:150px; background:#0e1322; border:1px solid #2a3a5a; color:#e6ebf5;
  padding:.5rem .6rem; border-radius:.4rem; font-size:.95rem; }
details.post { margin:.4rem 0 1.2rem; }
details.post summary { cursor:pointer; color:#5fb0ff; padding:.3rem 0; }
.linkbtn { background:none; border:0; color:#5fb0ff; cursor:pointer; padding:0; font:inherit; font-size:.85rem; }
.linkbtn:hover { text-decoration:underline; }
.badge-open { color:#4ade80; }
.badge-claim { color:#ffcf3f; }
.pickup { font-size:.82rem; padding:.3rem .7rem; background:#1f7a3a; border:0; border-radius:.4rem; color:#fff; cursor:pointer; font-weight:600; }
.pickup:hover { background:#249447; }
.acct textarea { width:100%; background:#0e1322; border:1px solid #2a3a5a; color:#e6ebf5;
  padding:.55rem .65rem; border-radius:.4rem; font:inherit; font-size:.95rem; resize:vertical; margin-bottom:.6rem; }
.msg { padding:.6rem .7rem; border:1px solid #ffffff12; border-radius:.5rem; margin-bottom:.55rem; background:#0e132233; }
.msg.unread { border-color:#1f6feb88; background:#1f6feb14; }
.msgmeta { font-size:.85rem; margin-bottom:.25rem; }
.msgbody { color:#cdd; }
.boards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.7rem; }
.boardcard { display:block; padding:1rem 1.1rem; border:1px solid #2a3a5a55; border-radius:.7rem; background:#0e132255; color:inherit; }
.boardcard:hover { border-color:#2a3a5a; text-decoration:none; }
.boardcard .bname { font-weight:700; color:#cfe3ff; margin-bottom:.2rem; }
.adminbar { margin:.2rem 0 1rem; font-size:.85rem; }
.linkbtn.danger { color:#f87171; }
.newswrap { margin-top:2rem; }
.news { padding:.9rem 1rem; border:1px solid #2a3a5a55; border-radius:.6rem; background:#0e132255; margin-bottom:.7rem; }
.news h3 { margin-bottom:.15rem; color:#cfe3ff; }
.newsbody { color:#cdd; margin-top:.4rem; }
.postimg { display:block; max-width:100%; height:auto; border-radius:.5rem; margin:.5rem 0; border:1px solid #2a3a5a55; }
.citylist { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:.9rem; }
.citycard { padding:1rem 1.1rem; border:1px solid #2a3a5a55; border-radius:.7rem; background:#0e132255; }
.citycard h3 { color:#cfe3ff; margin-bottom:.5rem; }
.citymeta { display:flex; flex-direction:column; gap:.25rem; font-size:.92rem; }
.citydesc { margin-top:.6rem; color:#cdd; }
.cityjoin { margin-top:.8rem; padding-top:.7rem; border-top:1px solid #ffffff14; font-size:.85rem; }
.joinbtn { display:inline-block; padding:.35rem .75rem; border:1px solid #2a7fff66; border-radius:.5rem; color:#7fb8ff; margin-left:.3rem; }
.joinbtn:hover { background:#1f6feb22; text-decoration:none; }