* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, sans-serif; background: #f5f4f0; color: #1a1a1a; }
header { display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .7rem 1.2rem; background: #fff; border-bottom: 2px solid #1a1a1a; flex-wrap: wrap; }
h1 { font-size: 1.15rem; margin: 0; }
h2 { font-size: .95rem; margin: 0 0 .5rem; }
.sub { margin: 0; font-size: .75rem; color: #666; }
main { display: grid; grid-template-columns: 1fr 20rem; gap: 1rem; padding: 1rem 1.2rem; }
@media (max-width: 900px) { main { grid-template-columns: 1fr; } }
#sheetpanel, #logpanel { background: #fff; border: 1px solid #ccc; padding: 1rem; }
#sheettabs { margin-bottom: .8rem; }
#sheettabs button { margin-right: .4rem; }
#sheettabs button.on { font-weight: 700; border-color: #1a1a1a; }
#sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .35rem .9rem; }
.field { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.field span { flex: 0 0 9rem; color: #444; text-transform: capitalize; }
.field.text input { flex: 1; border: none; border-bottom: 1px solid #999; background: transparent; padding: .15rem 0; }
.field.text input:focus { outline: none; border-bottom-color: #1a1a1a; }
button { font: inherit; padding: .3rem .7rem; background: #fff; border: 1px solid #999; cursor: pointer; }
button:hover { border-color: #1a1a1a; }
.dicebar { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.dicebar input { width: 6rem; padding: .3rem; border: 1px solid #999; }
#rolllog { list-style: none; margin: 0; padding: 0; font-size: .8rem; max-height: 24rem; overflow-y: auto; }
#rolllog li { padding: .3rem 0; border-bottom: 1px solid #eee; }
#rolllog li.crit { font-weight: 700; }
#rolllog li.doom { font-weight: 700; color: #8b0000; }
.exports { font-size: .8rem; margin-top: 1rem; }
#refbox { margin-top: 1.2rem; border-top: 2px solid #1a1a1a; padding-top: .8rem; }
#refbox input { width: 100%; margin-bottom: .4rem; padding: .3rem; border: 1px solid #999; }
#invitelink { font-size: .75rem; word-break: break-all; color: #06510f; }