:root { color-scheme:dark; --background:#100d18; --surface:#1b1526; --text:#f3edf9; --border:#3a2c4a; --button:#a75bea; --accent:#dcacfa; --size:14px; --font:Inter; }
* { box-sizing:border-box }
body { margin:0; background:var(--background); color:var(--text); font:var(--size)/1.55 var(--font),system-ui,sans-serif }
h1,h2,h3,p { margin:0 }
a { color:var(--accent) }
button,input,select,textarea { font:inherit; color:inherit; border:1px solid var(--border); border-radius:7px; background:var(--background); min-width:0 }
input,select,textarea { padding:.55rem .7rem; width:100% }
textarea { resize:vertical; min-height:5rem }
button { padding:.6rem .85rem; cursor:pointer; background:var(--surface) }
button.primary { background:var(--button); color:var(--background); border-color:transparent; font-weight:750 }
button:hover, nav a:hover { border-color:var(--accent) }
button:disabled { opacity:.45; cursor:default }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px }
.shell { display:grid; grid-template-columns:234px minmax(0,1fr); min-height:100vh }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:2rem 1.25rem; border-right:1px solid var(--border); background:color-mix(in srgb,var(--surface),var(--background) 45%) }
.brand { display:flex; align-items:center; gap:.85rem; text-decoration:none; font-family:Georgia,serif; font-size:1.35rem; letter-spacing:.14em; color:var(--text); line-height:1.2 }
.brand small { display:block; font:650 .58rem/2 system-ui; letter-spacing:.25em; color:var(--accent) }
.sigil { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--border); border-radius:11px; color:var(--accent); font-size:1.4rem }
nav { display:grid; gap:.35rem; margin-top:2.8rem }
nav a { display:flex; gap:.65rem; padding:.65rem .7rem; color:var(--text); text-decoration:none; border:1px solid transparent; border-radius:7px }
nav a span { color:var(--accent); width:1.2rem; text-align:center }
nav a[aria-current] { background:var(--surface); border-color:var(--border); color:var(--accent) }
.sidebar-bottom { margin-top:auto; display:grid; gap:.65rem }
[hidden] { display:none !important }
#online { margin:1rem 0 }
#table-members { max-height:26vh; overflow:auto }
#message:not(:empty) { margin-bottom:1rem }
main { width:100%; max-width:1360px; padding:2.1rem clamp(1rem,4vw,4.5rem) 4rem; margin:0 auto }
.screen-title { margin-bottom:1.2rem }
h1 { font:normal clamp(2rem,4vw,3.6rem)/1.12 Georgia,serif; letter-spacing:-.035em; overflow-wrap:anywhere }
h2 { font:normal 1.45rem/1.2 Georgia,serif }
h3 { font-size:1rem }
small,.muted { color:color-mix(in srgb,var(--text),var(--background) 25%) }
.kicker { color:var(--accent); font-size:.71rem; text-transform:uppercase; letter-spacing:.18em; font-weight:750 }
.hero { min-height:245px; position:relative; overflow:hidden; display:grid; align-content:end; gap:.35rem; padding:clamp(1rem,4vw,2rem); border:1px solid var(--border); border-radius:14px; margin-bottom:1rem; background:linear-gradient(115deg,var(--surface),var(--background)); isolation:isolate }
.hero.bufao::before { content:''; position:absolute; z-index:-1; inset:0 0 0 36%; background:linear-gradient(90deg,var(--surface),transparent 65%),linear-gradient(0deg,var(--surface),transparent 70%),url(assets/bufao.jpg) center 42%/cover; opacity:.82 }
.panel { display:grid; gap:1rem; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.1rem; margin-bottom:1rem }
.fields,.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr)); gap:.65rem }
label { display:grid; gap:.25rem; font-size:.9em }
.stat { border:1px solid var(--border); border-radius:9px; padding:.65rem; display:grid; gap:.3rem; min-width:0 }
.stat strong { font-size:1.35rem; color:var(--accent); line-height:1.1 }
.row { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem }
.row.spread { justify-content:space-between }
.card { border:1px solid var(--border); border-radius:9px; padding:.75rem; display:grid; gap:.5rem; overflow-wrap:anywhere }
.card p,.source-body { white-space:pre-wrap }
summary { cursor:pointer }
details[open] > summary { margin-bottom:.65rem }
.badge { color:var(--accent); font-size:.83em }
.stack { display:grid; gap:.7rem }
.columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; align-items:start }
.library-list { max-height:65vh; overflow:auto }
.library-list button { width:100%; text-align:left }
.library-list button[aria-pressed=true] { border-color:var(--accent); color:var(--accent) }
dialog { width:min(34rem,calc(100% - 2rem)); color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.25rem }
dialog::backdrop { background:#0009 }
input[type=checkbox] { width:auto }
input[type=color] { min-height:2.5rem }
#status { position:fixed; right:1rem; bottom:1rem; z-index:3; padding:.6rem 1rem; border:1px solid var(--border); background:var(--surface); border-radius:8px }
#status:empty { display:none }
@media(max-width:800px) { .shell { display:block } .sidebar { position:static; height:auto; padding:1rem; gap:1rem } nav { display:flex; flex-wrap:wrap; margin:0 } .sidebar-bottom { display:flex; flex-wrap:wrap; align-items:center } .sidebar-bottom select { width:auto } .hero { min-height:185px } }
@media(max-width:570px) { .columns { grid-template-columns:1fr } }

.lobby-body {
  --background:#181920; --surface:#22232c; --text:#f3f1f8; --border:#363743;
  --button:#7b68e9; --accent:#b7a8ff;
  background:#23242d; font-family:Inter,system-ui,sans-serif;
}
.lobby-body .primary { color:#fff; background:#6855d7 }
.lobby-body .primary:hover { background:#7764e6 }
.lobby-body h1,.lobby-body h2 { font-family:Inter,system-ui,sans-serif; font-weight:760 }
.lobby-body h2 { font-size:1.2rem }
.lobby-brand { display:inline-flex; align-items:center; gap:.8rem; color:white; text-decoration:none; font-weight:800; letter-spacing:.15em }
.lobby-brand span,.server-home,.empty-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:#6855d7; color:white; font-size:1.35rem }
.auth-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:100dvh }
.auth-art { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; padding:clamp(1.6rem,5vw,4rem);
  background:linear-gradient(180deg,#181326b8 3%,#21163149 42%,#171321f5 100%),url(assets/bufao.jpg) center 34%/cover #241a38; }
.auth-caption p:last-child { color:white; font:750 clamp(2.6rem,5.7vw,5.8rem)/.99 Inter,system-ui; letter-spacing:-.065em; margin-top:.8rem }
.auth-main { display:grid; place-items:center; max-width:none; padding:clamp(1.3rem,5vw,4rem); background:#20212a }
.auth-content { width:min(100%,410px) }
.auth-content h1 { font-size:clamp(2rem,4vw,3.05rem); margin-bottom:.55rem }
.auth-content form { margin:1.75rem 0 1rem; gap:1.05rem }
.auth-content label { font-weight:650; gap:.45rem }
.auth-content input { min-height:45px }
.auth-content .primary { min-height:44px; margin-top:.25rem }
.auth-switch { color:#c0bfcc }
.text-button { border:0; background:none; color:var(--accent); padding:.15rem .25rem; font-weight:700 }
.auth-mobile-brand { display:none }
.invite-note { background:#322951; color:#e5dbff; padding:.7rem .85rem; margin-top:1rem; border-radius:8px }
.lobby-layout { display:grid; grid-template-columns:70px 226px minmax(0,1fr); min-height:100dvh }
.server-rail { background:#15151c; display:flex; align-items:center; flex-direction:column; gap:12px; padding:12px 8px; position:sticky; top:0; height:100dvh; overflow:auto }
.server-home,.rail-table { text-decoration:none }
.rail-table,.rail-add { display:grid; place-items:center; min-width:42px; height:42px; padding:0; border-radius:15px; color:white; font-weight:800; transition:border-radius .15s,background-color .15s }
.rail-add { border:1px solid #3a3a49; background:#292a34; color:#9fe1bc; font-size:1.5rem }
.rail-table:hover,.rail-add:hover { border-radius:9px }
#quick-tables { display:grid; gap:10px }
.rail-divider { width:30px; height:2px; background:#34343f; border-radius:3px }
.lobby-sidebar { position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; background:#1d1e26 }
.workspace-title,.lobby-top { min-height:58px; display:flex; align-items:center; padding:0 1.1rem; border-bottom:1px solid #353541; font-weight:750 }
.workspace-title { justify-content:space-between }
.workspace-menu { display:grid; gap:.35rem; padding:.8rem }
.workspace-menu a,.workspace-menu button { display:flex; align-items:center; gap:.7rem; padding:.65rem .7rem; text-align:left; text-decoration:none; color:#dedce9; border-radius:7px; border:0; background:transparent }
.workspace-menu .workspace-current,.workspace-menu button:hover { background:#30303e; color:white }
.workspace-menu span,.lobby-top span { color:var(--accent) }
.account-bar { display:flex; align-items:center; gap:.55rem; margin-top:auto; padding:.75rem .65rem; background:#181921 }
.account-avatar { display:grid; place-items:center; flex:0 0 32px; height:32px; border-radius:50%; background:#3b3566; color:#eee9ff; font-size:.75rem; font-weight:800 }
.account-bar strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.account-bar button { margin-left:auto; font-size:.8rem; padding:.3rem .48rem }
.lobby-main { width:100%; max-width:none; min-width:0; margin:0; padding:0 }
.lobby-top { gap:.65rem; background:#24252e }
.lobby-content { max-width:1220px; margin:0 auto; padding:clamp(1rem,3.2vw,3rem) }
.lobby-banner { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; min-height:190px; border:1px solid #504575; border-radius:14px; padding:clamp(1rem,3vw,2rem);
  background:radial-gradient(ellipse at 84% 15%,#7558c070,transparent 52%),linear-gradient(120deg,#29223e,#372c56); }
.lobby-banner h1 { margin:.3rem 0; font-size:clamp(2rem,4vw,3.3rem) }
.lobby-banner p:last-child { color:#e1d8f5 }
.lobby-banner button { white-space:nowrap }
.table-heading { display:flex; justify-content:space-between; align-items:center; gap:.7rem; margin:1.75rem 0 .9rem }
#table-count { color:var(--accent); font-size:.78rem; margin-left:.35rem }
.table-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(245px,100%),1fr)); gap:1rem }
.table-card { border:1px solid #393945; border-radius:12px; min-width:0; overflow:hidden; background:#2a2b36 }
.table-cover { height:63px; position:relative }
.shade-0 { background:linear-gradient(120deg,#4d3b96,#7155bd) }
.shade-1 { background:linear-gradient(120deg,#2d5365,#3d7e86) }
.shade-2 { background:linear-gradient(120deg,#73405b,#9a5355) }
.shade-3 { background:linear-gradient(120deg,#585263,#7c6550) }
.table-avatar { position:absolute; left:14px; bottom:-17px; display:grid; place-items:center; width:43px; height:43px; background:#22232c; border:3px solid #2a2b36; border-radius:13px; color:#f1ebff; font-weight:800 }
.table-card-inner { padding:1.4rem .9rem .9rem; display:grid; gap:.4rem }
.table-role { color:#c6b9ff; font-size:.7rem; font-weight:750; text-transform:uppercase; letter-spacing:.1em }
.table-card h3 { font-size:1.05rem; overflow-wrap:anywhere }
.table-actions { justify-content:space-between; margin-top:.55rem }
.table-open { font-weight:750; text-decoration:none }
.table-open:hover { text-decoration:underline }
.table-actions button { padding:.35rem .55rem }
.empty-tables { grid-column:1/-1; display:grid; justify-items:center; gap:.55rem; padding:2rem 1rem; text-align:center; border:1px dashed #494958; border-radius:12px; background:#262731 }
.empty-mark { background:#363049; color:#c5b6ff }
.empty-tables button { margin-top:.35rem }
.lobby-message:not(:empty) { position:fixed; z-index:5; bottom:1rem; right:1rem; max-width:min(25rem,calc(100% - 2rem)); background:#332331; color:#ffe5f0; padding:.75rem 1rem; border:1px solid #67465a; border-radius:8px }
.form-error { color:#ffc6d8 }
.form-error:empty,.lobby-message:empty { display:none }
.dialog-actions { justify-content:flex-end }
.lobby-body dialog { box-shadow:0 24px 80px #0008 }

/* Mesa e ficha usam as cores escolhidas no editor. */
.shell .sidebar { padding-top:1.3rem; overflow:auto; background:color-mix(in srgb,var(--surface),var(--background) 55%) }
.shell .sidebar nav { margin-top:1.45rem }
.shell .sidebar nav a[aria-current] { box-shadow:inset 3px 0 var(--accent) }
.shell #online { order:-1; border-bottom:1px solid var(--border); padding-bottom:.85rem; margin:0 0 1.05rem }
.shell #table-members a { text-decoration:none; color:var(--text); overflow-wrap:anywhere; padding:.25rem .45rem; border-radius:6px; background:var(--surface) }
.shell #table-title { overflow-wrap:anywhere }
.shell .sidebar-bottom { padding-top:.7rem; border-top:1px solid var(--border) }
@media(max-width:840px) {
  .lobby-layout { grid-template-columns:58px 176px minmax(0,1fr) }
  .lobby-banner { align-items:flex-start; flex-direction:column; justify-content:center }
}
@media(max-width:640px) {
  .auth-layout { grid-template-columns:1fr }
  .auth-art { display:none }
  .auth-mobile-brand { display:inline-flex; margin-bottom:1.8rem }
  .lobby-layout { display:block }
  .server-rail { display:none }
  .lobby-sidebar { position:static; height:auto; display:grid; grid-template-columns:minmax(0,1fr) auto }
  .workspace-title { border-bottom:0 }
  .workspace-title span,.workspace-menu,.lobby-top { display:none }
  .account-bar { margin:0; max-width:48vw }
  .lobby-banner { min-height:155px }
  .shell #online { order:0; margin:0 }
  .shell .sidebar nav { margin-top:0 }
}