body { min-height: 100vh; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: 26px; font-weight: 800; font-stretch: 85%; margin: 0; }
h2 { font-size: 20px; margin: 0 0 14px; }
h3 { font-size: 16px; margin: 0 0 10px; }
.muted { color: var(--mist); }
.small { font-size: 13px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1; }
.card { background: var(--deck); border-radius: var(--r-md); padding: 18px; }
.stack { display: grid; gap: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
code, .mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; background: var(--deck-2); color: var(--mist); }
.pill.on { background: color-mix(in srgb, var(--go) 22%, transparent); color: #7be0a9; }
.pill.warn { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.pill.bad { background: color-mix(in srgb, var(--signal) 22%, transparent); color: #ff8a8d; }

/* --- logowanie */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login form { width: min(100%, 360px); display: grid; gap: 14px; }

/* --- lista wydarzeń */
.events { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.events li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 18px; background: var(--deck); border-radius: var(--r-md); }
.events a.name { color: var(--paper); font-weight: 700; font-size: 17px; text-decoration: none; }
.events a.name:hover { color: var(--accent); }
.events .meta { color: var(--mist); font-size: 13px; margin-top: 2px; }
.code-tag { font-weight: 800; letter-spacing: .1em; color: var(--accent); }

/* --- panel wydarzenia */
.ev-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--deck-2); background: var(--stage); position: sticky; top: 0; z-index: 20; }
.ev-top h1 { font-size: 20px; }
.ev-top .stats { color: var(--mist); font-size: 14px; }
.layout { display: grid; grid-template-columns: 190px minmax(0, 1fr) 360px; min-height: calc(100vh - 62px); }
.nav { border-right: 1px solid var(--deck-2); padding: 14px 10px; display: grid; align-content: start; gap: 2px; position: sticky; top: 62px; height: calc(100vh - 62px); }
.nav button { text-align: left; padding: 10px 14px; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--mist); font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.nav button:hover { color: var(--paper); background: var(--deck); }
.nav button[aria-current="true"] { background: var(--deck-2); color: var(--paper); box-shadow: inset 3px 0 0 var(--accent); }
.nav .badge { background: var(--accent); color: var(--on-accent); border-radius: 99px; font-size: 12px; padding: 0 7px; min-width: 20px; text-align: center; }
.content { padding: 20px 24px 60px; min-width: 0; }
.side { border-left: 1px solid var(--deck-2); padding: 14px; position: sticky; top: 62px; height: calc(100vh - 62px); overflow: auto; display: grid; align-content: start; gap: 12px; }
.preview { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: #000; border: 1px solid var(--rail); }
.preview iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; border: 0; transform-origin: 0 0; pointer-events: none; }
.screen-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.btn[aria-pressed="true"], .screen-btns button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* --- pytania */
.filters { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.filters button { border: 1px solid var(--rail); background: transparent; border-radius: 99px; padding: 6px 14px; color: var(--mist); cursor: pointer; font-weight: 600; font-size: 14px; }
.filters button[aria-pressed="true"] { background: var(--paper); color: var(--stage); border-color: var(--paper); }
.qitems { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qitem { padding: 14px 16px; background: var(--deck); border-radius: var(--r-md); display: grid; gap: 10px; }
.qitem.on-screen { box-shadow: inset 0 0 0 2px var(--accent); }
.qitem p { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.qitem .meta { color: var(--mist); font-size: 13px; }
.qitem .meta b { color: var(--paper); }
.qitem .row { gap: 6px; }

/* --- ankiety */
.polls { display: grid; gap: 10px; }
.poll-item { padding: 16px; background: var(--deck); border-radius: var(--r-md); display: grid; gap: 10px; }
.poll-item.open { box-shadow: inset 0 0 0 2px var(--go); }
.mini-bars { display: grid; gap: 4px; }
.mini-bar { display: grid; grid-template-columns: minmax(80px, 30%) 1fr 48px; gap: 8px; align-items: center; font-size: 13px; }
.mini-bar .tr { height: 8px; background: var(--stage); border-radius: 4px; overflow: hidden; }
.mini-bar .tr i { display: block; height: 100%; background: var(--accent); }
.words { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.words span { background: var(--stage); padding: 2px 8px; border-radius: 4px; }

/* --- quizy i edytor */
.qz-list { display: grid; gap: 8px; }
.qz { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 14px 16px; background: var(--deck); border-radius: var(--r-md); }
.qz.playing { box-shadow: inset 0 0 0 2px var(--accent); }
.editor { display: grid; gap: 12px; }
.ed-item { background: var(--deck); border-radius: var(--r-md); padding: 14px; display: grid; gap: 10px; border-left: 3px solid var(--rail); }
.ed-item .ed-head { display: flex; align-items: center; gap: 8px; }
.ed-item .ed-head b { color: var(--accent); }
.ans-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; }
.ans-row .sh { text-align: center; font-size: 18px; }
.ans-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mist); white-space: nowrap; }
.pts-row { display: grid; grid-template-columns: 1fr 90px 36px; gap: 8px; }
.input.sm { min-height: 36px; padding: 6px 10px; }
.sticky-save { position: sticky; bottom: 0; background: var(--stage); padding: 12px 0; border-top: 1px solid var(--deck-2); }

/* --- prowadzenie gry */
.host { display: grid; gap: 14px; }
.phase { font-size: 13px; text-transform: none; }
.hostbar { display: flex; gap: 8px; flex-wrap: wrap; }
.hostbar .btn { min-height: 52px; font-size: 16px; }
.answers-host { display: grid; gap: 6px; }
.ah { display: grid; grid-template-columns: 36px 1fr 60px 96px; gap: 10px; align-items: center; padding: 8px 10px; background: var(--deck); border-radius: var(--r-sm); }
.ah.rev { opacity: .55; }
.ah .n { font-weight: 800; color: var(--accent); text-align: center; }
.teams-host { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.team-box { background: var(--deck); border-radius: var(--r-md); padding: 14px; display: grid; gap: 10px; }
.team-box.ctl { box-shadow: inset 0 0 0 2px var(--accent); }
.team-box .score { font-size: 34px; font-weight: 800; }
.xs { color: var(--signal); font-weight: 800; font-size: 20px; letter-spacing: 4px; min-height: 1.3em; }
.final-grid { display: grid; gap: 8px; }
.final-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--deck); padding: 10px; border-radius: var(--r-sm); }
.final-row .q { grid-column: 1 / -1; font-weight: 700; }
.final-cell { display: grid; grid-template-columns: 1fr 70px auto; gap: 6px; }
.players { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 360px; overflow: auto; }
.players li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 10px; background: var(--deck); border-radius: var(--r-sm); font-size: 14px; }
.players li.done { box-shadow: inset 3px 0 0 var(--go); }
.queue-host { font-size: 28px; font-weight: 800; color: var(--accent); }
.kbd { font-family: ui-monospace, Menlo, monospace; font-size: 12px; padding: 1px 6px; border: 1px solid var(--rail); border-radius: 4px; color: var(--mist); }

.links { display: grid; gap: 8px; }
.link-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.link-row input { font-size: 13px; }
dialog { background: var(--deck); color: var(--paper); border: 1px solid var(--rail); border-radius: var(--r-md); padding: 20px; width: min(92vw, 560px); }
dialog::backdrop { background: rgba(5,8,20,.7); }

@media (max-width: 1200px) { .layout { grid-template-columns: 170px minmax(0, 1fr); } .side { display: none; } }
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .nav { position: static; height: auto; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--deck-2); padding: 8px; }
  .nav button { white-space: nowrap; }
  .content { padding: 16px; }
  .grid2, .teams-host, .final-row { grid-template-columns: 1fr; }
}
.lic-box { padding: 12px 14px; border-radius: var(--r-sm); background: var(--stage); display: grid; gap: 4px; border-left: 3px solid var(--rail); }
.lic-box.on { border-left-color: var(--go); }
.lic-box.warn { border-left-color: var(--accent); }
.lic-box.bad { border-left-color: var(--signal); }