:root { --bg:#15171c; --panel:#1e2128; --panel2:#262a33; --ink:#e6e8ee; --muted:#9aa1b1; --accent:#c8a24a; --user:#2b3340; --gm:#23272f; --err:#e06c75; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.error { color:var(--err); min-height:1.2em; }
a { color:var(--accent); }
#topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 18px; background:var(--panel); border-bottom:1px solid #000; }
.brand { font-weight:600; letter-spacing:.3px; }
.view { padding:18px; max-width:1100px; margin:0 auto; }
.card { background:var(--panel); border:1px solid #0008; border-radius:10px; padding:16px; margin-bottom:16px; }
input,select,textarea,button { font:inherit; }
input,select,textarea { width:100%; margin:6px 0; padding:9px 11px; background:var(--panel2); color:var(--ink); border:1px solid #0006; border-radius:7px; }
button { cursor:pointer; padding:9px 14px; background:var(--accent); color:#1a1a1a; border:none; border-radius:7px; font-weight:600; }
button.ghost { background:transparent; color:var(--muted); border:1px solid #0006; }
.auth-card { max-width:360px; margin:8vh auto; }
.lobby-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.list { list-style:none; padding:0; margin:0 0 8px; }
.list li { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:var(--panel2); border-radius:7px; margin-bottom:6px; }
details summary { cursor:pointer; color:var(--accent); margin-top:8px; }
.play-grid { display:grid; grid-template-columns:300px 1fr; gap:14px; height:calc(100vh - 90px); }
#sidebar { overflow:auto; }
#sidebar h3 { margin:.4em 0; } #sidebar h4 { margin:1em 0 .3em; color:var(--muted); font-size:.85em; text-transform:uppercase; letter-spacing:.5px; }
#char-panel div { display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid #0004; }
.tool-log { font:12px/1.4 ui-monospace,Consolas,monospace; color:var(--muted); }
.tool-log .roll { color:var(--accent); }
#chat-wrap { display:flex; flex-direction:column; min-height:0; }
.chat { flex:1; overflow:auto; padding:6px; display:flex; flex-direction:column; gap:12px; }
.msg { max-width:78%; padding:10px 14px; border-radius:12px; white-space:pre-wrap; }
.msg.user { align-self:flex-end; background:var(--user); }
.msg.gm { align-self:flex-start; background:var(--gm); border:1px solid #0006; }
.msg.sys { align-self:center; color:var(--muted); font-style:italic; font-size:.9em; }
#chat-form { display:flex; gap:8px; padding:8px 0; }
#chat-form textarea { flex:1; resize:none; }
#chat-form button { align-self:stretch; }
.upload-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.upload-row input[type=file] { flex:1 1 240px; }
.upload-row input[type=text] { flex:1 1 180px; }
.upload-row button { flex:0 0 auto; }
#mod-list li { flex-direction:column; align-items:stretch; gap:6px; }
.mod-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.mod-stage { font-size:12px; color:var(--muted); }
.progress { height:6px; background:#0006; border-radius:4px; overflow:hidden; }
.progress > div { height:100%; background:var(--accent); transition:width .4s; }
.status-ready { color:#7ec77e; font-weight:600; }
.status-failed { color:var(--err); font-weight:600; }
.spinner { display:inline-block; width:11px; height:11px; border:2px solid #0006; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-1px; margin-right:5px; }
@keyframes spin { to { transform:rotate(360deg); } }
#mod-list li.processing { box-shadow: inset 3px 0 0 var(--accent); }
.progress.indeterminate > div { width:35% !important; animation:indet 1.2s ease-in-out infinite; }
@keyframes indet { 0%{margin-left:-35%} 100%{margin-left:100%} }
button:disabled { opacity:.6; cursor:default; }
.import-details { margin-top:6px; border-top:1px solid #0005; padding-top:8px; }
.import-row { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.import-row label { color:var(--muted); font-size:13px; }
.import-row code, .import-details code { background:#0005; padding:1px 5px; border-radius:4px; font-size:12px; }
.mod-actions button.make-ov { background:#3a5a8a; color:#fff; }
.mod-actions button.share-toggle { background:#0006; color:var(--muted); }
.mod-actions button.share-toggle.is-shared { background:#2e6b3e; color:#fff; }
.mod-actions button { padding:4px 9px; font-size:12px; margin-left:5px; }
.mod-actions button.danger { background:var(--err); color:#fff; }
@media (max-width:760px){ .lobby-grid,.play-grid{ grid-template-columns:1fr; height:auto; } }