:root {
  --navy: #0f1133;
  --panel: #17214b;
  --panel-2: #11183b;
  --blue: #3282c6;
  --blue-bright: #5fb4ee;
  --blue-soft: #7cc0f5;
  --text: #eaeefb;
  --muted: #a9b6de;
  --muted-2: #8fa0d4;
  --muted-3: #6b76a8;
  --line: rgba(124, 192, 245, 0.18);
  --danger: #ff8a8a;
  --warning: #ffc96b;
  --success: #73d7ad;
  --radius: 14px;
  --font-body: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Poppins", var(--font-body);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--navy); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(95,180,238,.42); outline-offset: 2px; }
a { color: var(--blue-soft); text-underline-offset: 2px; }
[hidden] { display: none !important; }

.pill { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 6px 10px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .07em; white-space: nowrap; }
.pill-blue { margin-left: auto; background: var(--blue-bright); color: var(--navy); }
.pill-warning { background: rgba(255,201,107,.16); color: var(--warning); border: 1px solid rgba(255,201,107,.35); }
.pill-muted { background: rgba(124,192,245,.12); color: var(--muted-2); }
.eyebrow { font-family: var(--font-display); font-size: 11px; line-height: 1.3; font-weight: 700; letter-spacing: .14em; color: var(--blue-bright); }
.eyebrow.muted { color: var(--muted-3); font-size: 16px; }
.dev-banner { padding: 8px 14px; background: rgba(255,201,107,.12); border-bottom: 1px solid rgba(255,201,107,.28); color: var(--warning); font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: .08em; text-align: center; }

/* Formular public */
.form-page { min-height: 100vh; }
.form-shell { width: 100%; max-width: 460px; min-height: 100vh; margin: 0 auto; padding-bottom: 44px; background: var(--navy); }
.brand-bar { display: flex; align-items: center; gap: 12px; padding: 17px 20px 15px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand-mark { width: 46px; height: 46px; object-fit: contain; }
.brand-bar > div { display: flex; flex-direction: column; gap: 3px; }
.brand-bar strong { font-family: var(--font-display); font-size: 15px; letter-spacing: .12em; line-height: 1; }
.brand-bar div span { color: var(--muted-2); font-size: 12px; }
.progress-bars { display: flex; gap: 6px; padding: 14px 20px 0; }
.progress-bars span { height: 3px; flex: 1; border-radius: 99px; background: rgba(50,130,198,.32); }
.progress-bars span.active { background: var(--blue-bright); }
.form-step { display: none; padding: 22px 20px 0; flex-direction: column; gap: 24px; }
.form-step.active { display: flex; }
.form-step h1 { margin: -12px 0 -10px; font-family: var(--font-display); font-size: 27px; line-height: 1.18; letter-spacing: -.02em; }
.form-step .lead { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.54; }
.closure-notice { display: flex; flex-direction: column; gap: 5px; border: 1px solid rgba(255,201,107,.38); border-radius: 14px; padding: 14px 15px; background: rgba(255,201,107,.11); }
.closure-notice strong { color: var(--warning); font-family: var(--font-display); font-size: 14px; }
.closure-notice p { margin: 0; color: #d7d6c8; font-size: 13px; line-height: 1.5; }
.form-block { display: flex; flex-direction: column; gap: 12px; }
.form-block.compact { gap: 10px; }
.form-block h2, .minor-card h2 { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 1.35; }
.form-block > p, .minor-card > p { margin: 0; color: var(--muted-2); font-size: 13.5px; line-height: 1.5; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-card { position: relative; display: flex; min-height: 73px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); cursor: pointer; text-align: left; transition: border-color .18s, background .18s, transform .18s; }
.choice-card:hover { border-color: rgba(95,180,238,.55); transform: translateY(-1px); }
.choice-card.selected { border: 2px solid var(--blue-bright); background: linear-gradient(rgba(95,180,238,.12), rgba(95,180,238,.12)), var(--panel); padding: 12px 13px; }
.choice-card strong { font-family: var(--font-display); font-size: 15px; }
.choice-card span { color: var(--muted-2); font-size: 12.5px; }
.status-card { display: flex; flex-direction: column; gap: 12px; padding: 15px; border-radius: var(--radius); background: var(--panel); }
.status-title { display: flex; align-items: center; gap: 10px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue-bright); box-shadow: 0 0 0 5px rgba(95,180,238,.09); flex: 0 0 auto; }
.status-title strong { font-family: var(--font-display); font-size: 15px; }
.status-card > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.status-metrics { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); padding-top: 12px; }
.status-metrics > div { display: flex; flex-direction: column; gap: 3px; }
.status-metrics > div + div { border-left: 1px solid var(--line); padding-left: 12px; }
.status-metrics span { color: var(--muted-3); font-size: 10px; letter-spacing: .09em; }
.status-metrics strong { font-family: var(--font-display); font-size: 16px; }
.primary-button, .secondary-button, .ghost-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 13px; padding: 13px 18px; font-family: var(--font-display); font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; transition: background .18s, border-color .18s, opacity .18s, transform .18s; }
.primary-button { border: 0; background: var(--blue); color: #fff; }
.primary-button:hover:not(:disabled) { background: #4a96d6; transform: translateY(-1px); }
.primary-button:disabled { cursor: not-allowed; opacity: .45; }
.secondary-button { border: 1px solid rgba(124,192,245,.32); background: transparent; color: var(--muted); }
.secondary-button:hover { border-color: var(--blue-bright); color: #fff; }
.ghost-button { min-height: 38px; border: 1px solid var(--line); padding: 8px 12px; background: rgba(124,192,245,.06); color: var(--muted); font-family: var(--font-body); font-size: 12.5px; }
.ghost-button:hover { border-color: rgba(124,192,245,.45); color: #fff; }
.full { width: 100%; }
.center { text-align: center; }
.button-row { display: flex; gap: 10px; }
.button-row .primary-button { flex: 1; }
.form-error { min-height: 18px; margin: -12px 0 0; color: var(--danger); font-size: 13px; font-weight: 600; text-align: center; }
.summary-strip { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 12px; background: var(--panel); }
.summary-strip strong { color: var(--blue-bright); font-family: var(--font-display); font-size: 12.5px; }
.summary-strip > span { width: 1px; height: 16px; background: var(--line); }
.summary-strip em { color: var(--muted); font-size: 12px; font-style: normal; }
.summary-strip button { margin-left: auto; border: 0; padding: 0; background: none; color: var(--blue-soft); font-size: 12px; text-decoration: underline; cursor: pointer; }
.field-stack { display: flex; flex-direction: column; gap: 13px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { color: var(--muted); font-size: 13px; font-weight: 600; }
.field input, .field select { width: 100%; min-height: 49px; border: 1px solid rgba(124,192,245,.22); border-radius: 12px; padding: 12px 13px; background: var(--panel); color: var(--text); font-size: 15.5px; }
.field input::placeholder { color: var(--muted-3); }
.field input:focus, .field select:focus { border-color: var(--blue-bright); outline: none; box-shadow: 0 0 0 3px rgba(95,180,238,.12); }
.field small { color: var(--muted-3); font-size: 11.5px; line-height: 1.4; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.segmented { display: flex; gap: 8px; }
.segmented button { flex: 1; min-height: 43px; border: 1px solid var(--line); border-radius: 11px; padding: 8px 7px; background: var(--panel); color: var(--text); font-size: 13px; cursor: pointer; }
.segmented button.selected { border: 2px solid var(--blue-bright); padding: 7px 6px; background: linear-gradient(rgba(95,180,238,.12), rgba(95,180,238,.12)), var(--panel); }
.minor-card { display: flex; flex-direction: column; gap: 11px; padding: 14px; border-radius: var(--radius); background: var(--panel); }
.minor-options button { background: var(--navy); }
.inline-notice { border-top: 1px solid var(--line); padding-top: 11px; color: var(--muted); font-size: 12px; line-height: 1.48; }
.consent-all-button { width: 100%; min-height: 68px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; border: 1px solid rgba(95,180,238,.65); border-radius: 14px; padding: 13px 15px; background: var(--blue); color: #fff; text-align: left; cursor: pointer; box-shadow: 0 10px 28px rgba(50,130,198,.16); }
.consent-all-button:hover { background: #4a96d6; }
.consent-all-button.selected { border-color: var(--success); background: rgba(47,132,108,.9); }
.consent-all-button > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.consent-all-button strong { font-family: var(--font-display); font-size: 16px; }
.consent-all-button small { color: rgba(255,255,255,.78); font-size: 10px; line-height: 1.4; }
.consent-all-icon { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 9px; background: rgba(255,255,255,.12); font-size: 18px; font-weight: 900; }
.consent-stack { display: flex; flex-direction: column; gap: 6px; }
.consent-card { position: relative; display: grid; grid-template-columns: 19px 1fr; gap: 9px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); cursor: pointer; }
.consent-card.optional { background: rgba(23,33,75,.7); }
.consent-card input { position: absolute; opacity: 0; pointer-events: none; }
.custom-check { position: relative; width: 19px; height: 19px; margin-top: 1px; border: 1.5px solid rgba(124,192,245,.48); border-radius: 5px; }
.consent-card input:checked + .custom-check { border-color: var(--blue-bright); background: var(--blue-bright); }
.consent-card input:checked + .custom-check::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--navy); font-weight: 900; font-size: 12px; }
.consent-card input:focus-visible + .custom-check { outline: 3px solid rgba(95,180,238,.42); outline-offset: 2px; }
.consent-card > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.consent-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.consent-heading strong { font-family: var(--font-display); font-size: 12px; }
.consent-heading em { padding: 2px 5px; border-radius: 4px; background: rgba(124,192,245,.13); color: var(--muted-2); font-size: 7.5px; font-weight: 700; letter-spacing: .07em; font-style: normal; }
.consent-card.optional .consent-heading em { background: rgba(115,215,173,.12); color: var(--success); }
.consent-card small { color: #9aa8d5; font-size: 10px; line-height: 1.4; }
.privacy-box { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.privacy-box strong { font-family: var(--font-display); font-size: 12.5px; }
.privacy-box p { margin: 0; color: #8592c2; font-size: 10.5px; line-height: 1.62; }
.confirmation { align-items: center; padding-top: 30px; text-align: center; }
.success-icon { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 30px; }
.confirmation h1 { margin: 0 0 8px; }
.confirmation-card { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 16px; background: var(--panel); }
.confirmation-card > span { color: var(--muted-2); font-size: 10px; letter-spacing: .13em; }
.confirmation-card > strong { color: var(--blue-bright); font-family: var(--font-display); font-size: 34px; letter-spacing: .08em; }
.confirmation-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 12px; color: var(--muted); font-size: 13px; }
.confirmation-row strong { color: var(--text); font-family: var(--font-display); font-size: 15px; text-align: right; }
.team-progress { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.team-progress p, .group-note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.team-seats { display: flex; justify-content: center; gap: 9px; }
.team-seats span { width: 38px; height: 10px; border-radius: 99px; background: rgba(124,192,245,.16); }
.team-seats span.filled { background: var(--blue-bright); }
.partner-section { display: flex; flex-direction: column; gap: 12px; margin: 34px 20px 0; border-top: 1px solid rgba(124,192,245,.14); padding-top: 18px; }
.partner-section h2 { margin: 0; color: var(--muted-2); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-align: center; }
.partner-logo-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.partner-logo-card { display: grid; min-width: 0; min-height: 64px; place-items: center; overflow: hidden; border-radius: 10px; padding: 8px; background: #f7f8fc; }
.partner-logo-card img { display: block; width: 100%; height: 46px; object-fit: contain; }
.partner-logo-card--vertical img { height: 51px; }
.partner-logo-card--wordmark { color: #5b2c83; }
.wizz-wordmark { font-family: var(--font-display); font-size: 15px; font-style: normal; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.wizz-wordmark strong { color: #c5007a; }
.wizz-wordmark em { color: #5b2c83; font-style: normal; }
.module-footer { display: flex; flex-direction: column; gap: 5px; margin: 33px 20px 0; border-top: 1px solid rgba(124,192,245,.14); padding-top: 17px; text-align: center; }
.partner-section + .module-footer { margin-top: 22px; }
.module-footer strong { color: var(--muted-2); font-family: var(--font-display); font-size: 10px; letter-spacing: .1em; }
.module-footer span { color: var(--muted-3); font-size: 10.5px; line-height: 1.5; }

/* Login și panou staff */
.staff-login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 390px); display: flex; flex-direction: column; gap: 22px; border: 1px solid var(--line); border-radius: 20px; padding: 28px; background: var(--panel); box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.login-card > img { width: 64px; height: 64px; }
.login-card h1 { margin: 4px 0 3px; font-family: var(--font-display); font-size: 28px; }
.login-card p { margin: 0; color: var(--muted); font-size: 13px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-error { padding: 11px 12px; border-radius: 10px; background: rgba(255,138,138,.1); color: var(--danger); font-size: 13px; }
.staff-page { min-height: 100vh; }
.staff-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 18px; min-height: 76px; border-bottom: 1px solid var(--line); padding: 12px 24px; background: rgba(23,33,75,.96); backdrop-filter: blur(14px); }
.staff-brand { display: flex; align-items: center; gap: 12px; }
.staff-brand img { width: 48px; height: 48px; }
.staff-brand > div { display: flex; flex-direction: column; gap: 2px; }
.staff-brand strong { font-family: var(--font-display); font-size: 14px; letter-spacing: .11em; }
.staff-brand span { color: var(--muted-2); font-size: 12px; }
.staff-clock { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; margin-left: auto; }
.staff-clock span { color: var(--muted-3); font-size: 9px; letter-spacing: .1em; }
.staff-clock strong { font-family: var(--font-display); font-size: 23px; }
.logout-link { color: var(--muted-2); font-size: 12px; }
.staff-layout { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(330px,.8fr); gap: 18px; max-width: 1420px; margin: 0 auto; padding: 22px; }
.planning-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--line); border-radius: 17px; padding: 16px 20px; background: var(--panel); }
.planning-bar h1 { margin: 4px 0 2px; font-family: var(--font-display); font-size: 21px; }
.planning-bar p { margin: 0; color: var(--muted-2); font-size: 12px; }
.planning-controls { width: min(100%, 390px); display: flex; flex-direction: column; gap: 8px; }
.planning-select { width: min(100%, 330px); display: flex; flex-direction: column; gap: 5px; }
.planning-controls .planning-select { width: 100%; }
.planning-select span { color: var(--muted-3); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.planning-select select { min-height: 44px; border: 1px solid rgba(124,192,245,.3); border-radius: 11px; padding: 9px 12px; background: var(--navy); color: var(--text); }
.registration-control-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.registration-status { color: var(--success); font-size: 11px; font-weight: 700; }
.registration-status.closed { color: var(--danger); }
.registration-toggle { min-height: 38px; border: 1px solid rgba(255,138,138,.4); border-radius: 10px; padding: 8px 12px; background: rgba(255,138,138,.1); color: var(--danger); font-size: 12px; font-weight: 700; cursor: pointer; }
.registration-toggle.reopen { border-color: rgba(115,215,173,.4); background: rgba(115,215,173,.1); color: var(--success); }
.registration-toggle:disabled { cursor: not-allowed; opacity: .5; }
.queue-panel { min-width: 0; border-radius: 18px; padding: 20px; background: var(--panel-2); }
.panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-heading h1 { margin: 5px 0 0; font-family: var(--font-display); font-size: 25px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.queue-list { display: flex; flex-direction: column; gap: 9px; }
.queue-item { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 78px; border: 1px solid var(--line); border-radius: 13px; padding: 11px 12px; background: var(--panel); cursor: pointer; transition: border-color .18s, background .18s; }
.queue-item:hover { border-color: rgba(95,180,238,.45); }
.queue-item.selected { border: 2px solid var(--blue-bright); padding: 10px 11px; background: linear-gradient(rgba(95,180,238,.08), rgba(95,180,238,.08)), var(--panel); }
.queue-position { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: rgba(95,180,238,.12); color: var(--blue-bright); font-family: var(--font-display); font-weight: 700; }
.queue-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.queue-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.queue-title-row strong { font-family: var(--font-display); font-size: 14px; }
.tag { display: inline-flex; border-radius: 5px; padding: 3px 6px; background: rgba(124,192,245,.11); color: var(--muted-2); font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.tag.ready { background: rgba(115,215,173,.12); color: var(--success); }
.tag.minor { background: rgba(255,201,107,.11); color: var(--warning); }
.queue-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; color: var(--muted-2); font-size: 11px; }
.queue-meta a { color: var(--muted); }
.queue-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.queue-code { font-family: var(--font-display); font-size: 12px; color: var(--blue-bright); }
.queue-wait { color: var(--muted-3); font-size: 10px; }
.cancel-entry { border: 0; padding: 2px 0; background: none; color: var(--danger); font-size: 10px; cursor: pointer; opacity: .8; }
.staff-sidebar { display: flex; flex-direction: column; gap: 14px; }
.staff-card { display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line); border-radius: 17px; padding: 17px; background: var(--panel); }
.staff-card h2 { margin: 0; font-family: var(--font-display); font-size: 15px; }
.assignment-card h2 { margin: 4px 0 4px; font-family: var(--font-display); font-size: 18px; }
.assignment-card p { margin: 0; color: var(--muted-2); font-size: 12px; line-height: 1.45; }
.team-seats.large span { width: 50px; height: 13px; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.slot-list { display: flex; flex-direction: column; gap: 8px; }
.slot-item { display: flex; flex-direction: column; gap: 8px; border-radius: 11px; padding: 11px; background: var(--navy); }
.slot-top { display: flex; align-items: center; gap: 8px; }
.slot-top strong { font-family: var(--font-display); font-size: 14px; }
.slot-status { margin-left: auto; color: var(--muted-3); font-size: 10px; text-transform: uppercase; }
.slot-status.playing { color: var(--success); }
.slot-names { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.slot-actions { display: flex; gap: 6px; }
.slot-actions button { flex: 1; min-height: 31px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; background: rgba(124,192,245,.05); color: var(--muted); font-size: 10.5px; cursor: pointer; }
.slot-actions button.primary-mini { border-color: rgba(95,180,238,.5); background: rgba(50,130,198,.22); color: #fff; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats-grid > div { display: flex; flex-direction: column; gap: 2px; border-radius: 10px; padding: 11px; background: var(--navy); }
.stats-grid strong { color: var(--blue-bright); font-family: var(--font-display); font-size: 20px; }
.stats-grid span { color: var(--muted-3); font-size: 10px; }
.stats-card > p { margin: -5px 0 0; color: var(--muted-2); font-size: 11px; }
.compact-card { gap: 9px; }
.compact-card ul { display: flex; flex-direction: column; gap: 7px; margin: 0; padding-left: 17px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.empty-state { border: 1px dashed var(--line); border-radius: 12px; padding: 32px 18px; color: var(--muted-3); text-align: center; font-size: 13px; }
.empty-state.small { padding: 18px 12px; font-size: 11px; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: min(360px, calc(100vw - 40px)); border: 1px solid var(--line); border-radius: 12px; padding: 12px 15px; background: #243267; color: #fff; box-shadow: 0 12px 40px rgba(0,0,0,.3); font-size: 12.5px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: rgba(255,138,138,.4); background: #4e2744; }

/* Ecran teren 16:9 */
.screen-page { min-width: 1024px; min-height: 100vh; overflow: hidden; }
.screen-shell { width: 100vw; height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: var(--navy); }
.screen-header { display: flex; align-items: center; gap: 22px; min-height: 104px; padding: 18px 3vw; background: var(--panel); }
.screen-header .staff-brand img { width: 62px; height: 62px; }
.screen-header .staff-brand strong { font-size: clamp(18px,1.4vw,27px); }
.screen-header .staff-brand span { font-size: clamp(14px,1.05vw,20px); }
.screen-clock { margin-left: auto; font-family: var(--font-display); font-size: clamp(30px,2.6vw,48px); }
.screen-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,27vw); }
.screen-content { min-height: 0; display: flex; flex-direction: column; gap: 3.2vh; padding: 4vh 3vw; }
.now-card { display: flex; flex-direction: column; gap: 2.1vh; border-radius: 24px; padding: 3.1vh 2.2vw; background: var(--panel); }
.now-heading { display: flex; align-items: center; gap: 15px; }
.now-heading .live-dot { width: 13px; height: 13px; }
.now-heading strong { color: var(--blue-bright); font-family: var(--font-display); font-size: clamp(15px,1.35vw,24px); letter-spacing: .14em; }
.now-heading em { margin-left: auto; font-family: var(--font-display); font-size: clamp(24px,2.3vw,42px); font-weight: 700; font-style: normal; }
.now-players { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4vh 2vw; min-height: 90px; align-content: center; }
.now-player { display: flex; align-items: center; gap: 14px; min-width: 0; }
.now-player span { display: grid; width: clamp(34px,2.4vw,46px); height: clamp(34px,2.4vw,46px); place-items: center; flex: 0 0 auto; border-radius: 10px; background: var(--blue-bright); color: var(--navy); font-family: var(--font-display); font-size: clamp(16px,1.2vw,22px); font-weight: 700; }
.now-player strong { overflow: hidden; color: var(--text); font-family: var(--font-display); font-size: clamp(20px,1.8vw,34px); white-space: nowrap; text-overflow: ellipsis; }
.screen-empty { grid-column: 1 / -1; align-self: center; color: var(--muted-2); font-size: clamp(18px,1.45vw,26px); }
.screen-progress { height: 10px; border-radius: 99px; background: rgba(124,192,245,.16); overflow: hidden; }
.screen-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue); transition: width 1s linear; }
.now-card > p { margin: 0; color: var(--muted-2); font-size: clamp(14px,1.15vw,21px); }
.upcoming-block { min-height: 0; display: flex; flex: 1; flex-direction: column; gap: 1.4vh; }
.screen-slots { display: flex; min-height: 0; flex-direction: column; gap: 1.1vh; }
.screen-slot { display: grid; grid-template-columns: minmax(150px,12vw) minmax(0,1fr) auto; align-items: center; gap: 1.4vw; min-height: 8.5vh; border-radius: 17px; padding: 1.4vh 1.7vw; background: var(--panel); }
.screen-slot > strong { font-family: var(--font-display); font-size: clamp(19px,1.75vw,32px); }
.screen-slot > span { min-width: 0; overflow: hidden; color: #c6d0ee; font-size: clamp(16px,1.35vw,25px); text-overflow: ellipsis; white-space: nowrap; }
.screen-slot > em { border-radius: 8px; padding: 7px 11px; background: rgba(124,192,245,.12); color: var(--muted-2); font-size: clamp(10px,.9vw,16px); font-style: normal; }
.screen-cta { display: flex; flex-direction: column; align-items: center; gap: 2.3vh; padding: 4vh 2.3vw 3vh; background: var(--panel); text-align: center; }
.screen-cta h1 { margin: 0; font-family: var(--font-display); font-size: clamp(35px,3.15vw,58px); line-height: 1.1; }
.qr-frame { width: min(43vh,19vw); aspect-ratio: 1; border-radius: 19px; padding: 14px; background: #fff; }
.qr-frame img { width: 100%; height: 100%; object-fit: contain; image-rendering: crisp-edges; }
.screen-cta > p { margin: 0; color: var(--muted); font-size: clamp(15px,1.25vw,23px); line-height: 1.45; }
.queue-on-screen { display: flex; align-items: baseline; gap: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.2vh 0; }
.queue-on-screen span { color: var(--muted-3); font-size: clamp(10px,.8vw,14px); letter-spacing: .1em; }
.queue-on-screen strong { color: var(--blue-bright); font-family: var(--font-display); font-size: clamp(17px,1.35vw,25px); }
.screen-partners { display: flex; flex-direction: column; gap: 7px; margin-top: auto; }
.screen-partners span { color: var(--muted-3); font-family: var(--font-display); font-size: clamp(10px,.85vw,15px); font-weight: 700; letter-spacing: .14em; }
.screen-partners p { margin: 0; color: var(--muted-2); font-size: clamp(11px,.9vw,17px); line-height: 1.55; }

@media (max-width: 900px) {
  .staff-layout { grid-template-columns: 1fr; }
  .staff-sidebar { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .staff-sidebar .assignment-card { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .staff-header { padding: 10px 14px; gap: 10px; }
  .staff-brand span { display: none; }
  .staff-clock span { display: none; }
  .logout-link { font-size: 0; }
  .logout-link::after { content: "Ieșire"; font-size: 11px; }
  .staff-layout { padding: 12px; }
  .planning-bar { align-items: stretch; flex-direction: column; gap: 13px; padding: 14px; }
  .planning-controls { width: 100%; }
  .planning-select { width: 100%; }
  .queue-panel { padding: 14px; }
  .panel-heading { align-items: flex-start; flex-direction: column; }
  .toolbar { justify-content: flex-start; }
  .queue-item { grid-template-columns: 35px minmax(0,1fr); }
  .queue-position { width: 33px; height: 33px; }
  .queue-side { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .staff-sidebar { display: flex; }
}

@media (max-width: 360px) {
  .partner-logo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 461px) {
  .form-page { background: radial-gradient(circle at 50% -20%, #253369 0, var(--navy) 52%); }
  .form-shell { box-shadow: 0 0 80px rgba(0,0,0,.14); }
}