:root{--bg:#0f1115;--yta:#181b22;--kant:#2a2f3a;--text:#e6e8ee;--dim:#8a91a0;--acc:#5aa9ff;--ok:#4cc38a;--fel:#ff6b6b}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,Segoe UI,sans-serif;height:100vh;height:100dvh;display:flex;flex-direction:column}
header{display:flex;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--kant)}
header #kostnad{margin-left:auto;color:var(--dim)}
#mock{background:#a36b00;color:#fff;border-radius:4px;padding:0 6px;font-size:12px}
main{flex:1;display:flex;min-height:0}
aside{width:320px;border-right:1px solid var(--kant);overflow:auto;padding:12px}
#drop{display:block;border:2px dashed var(--kant);border-radius:10px;padding:22px 10px;text-align:center;color:var(--dim);cursor:pointer}
#drop.over{border-color:var(--acc);color:var(--text)}
#drop input{display:none}
.fil{background:var(--yta);border:1px solid var(--kant);border-radius:8px;margin-top:10px;padding:8px;cursor:pointer}
.fil.vald{border-color:var(--acc)}
.fil img,.fil video,.media img,.media video{max-width:100%;max-height:220px;border-radius:6px;display:block}
.fil audio,.media audio{width:100%}
.fil small,.media small{color:var(--dim);display:block}
#chatt{flex:1;display:flex;flex-direction:column;min-width:0}
#logg{flex:1;overflow:auto;padding:16px}
.msg{max-width:760px;margin:0 0 12px;white-space:pre-wrap}
.msg.du{margin-left:auto;background:#1f2a3a;padding:8px 12px;border-radius:10px;width:fit-content}
.sys{color:var(--dim)}
.verktyg{color:var(--dim);font-size:14px;margin:4px 0}
.verktyg.ok{color:var(--ok)}.verktyg.fel{color:var(--fel)}
.media{background:var(--yta);border:1px solid var(--kant);border-radius:8px;padding:8px;margin:6px 0 12px;max-width:360px}
a{color:var(--acc)}
#skriv{display:flex;gap:8px;padding:12px;border-top:1px solid var(--kant)}
textarea{flex:1;background:var(--yta);color:var(--text);border:1px solid var(--kant);border-radius:8px;padding:8px;font:inherit;resize:vertical}
button{background:var(--acc);color:#04121f;border:0;border-radius:8px;padding:0 16px;font-weight:600;cursor:pointer}
button:disabled{opacity:.5}
body.login{align-items:center;justify-content:center}
.login form{display:flex;flex-direction:column;gap:10px;width:260px}
.login input{background:var(--yta);color:var(--text);border:1px solid var(--kant);border-radius:8px;padding:10px}
.login button{padding:10px}.fel{color:var(--fel)}
#spela{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}
.knapp{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:6px 8px;background:var(--yta);color:var(--text);border:1px solid var(--kant);border-radius:8px;font:inherit;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
.knapp input{display:none}
.knapp:active{border-color:var(--acc)}
.knapp.spelar{background:var(--fel);border-color:var(--fel);color:#fff}
@media (max-width:760px){main{flex-direction:column}aside{width:auto;max-height:45vh;border-right:0;border-bottom:1px solid var(--kant)}
  #drop{padding:12px 10px}#drop small{display:none}
  .knapp{min-height:56px;font-size:16px}
  textarea{font-size:16px}#skriv button{min-height:48px}}