@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700&display=swap');
@font-face{font-family:Din;src:local('DIN Pro'),local('DINPro Light');font-weight:300}@font-face{font-family:Din;src:local('DIN Pro Bold'),local('DINPro Bold');font-weight:700}:root{font-family:Din,Arial,sans-serif;color:#fff;background:#05193a}*{box-sizing:border-box}body{margin:0;background:#05193a;min-height:100vh}.shell{min-height:100vh;background:radial-gradient(circle at 90% 0,#14376e 0,#05193a 48%);padding:32px}.brand{font-size:28px;font-weight:700;letter-spacing:1px}.brand i{color:#8dc63f;font-style:normal}.login{max-width:430px;margin:12vh auto;background:#08244d;border:1px solid #315888;padding:42px;border-radius:14px;box-shadow:0 24px 80px #0006}.login h1{margin:14px 0 8px;font-size:32px}.muted{color:#c3d3e8}.field{display:grid;gap:7px;margin:18px 0}input,select{border:1px solid #6684aa;border-radius:6px;padding:12px;background:#fff;color:#12233f;font:inherit;width:100%}button,.link{border:0;border-radius:6px;background:#8dc63f;color:#05193a;font:700 15px Din,Arial;padding:11px 16px;cursor:pointer;text-decoration:none;display:inline-block}button.secondary{background:transparent;color:#fff;border:1px solid #6684aa}button.publish{background:#fff}.error{color:#ffb3b3;min-height:22px}.top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #315888;padding-bottom:20px}.top p{margin:5px 0 0}.top button{margin-left:12px}.event-card{margin-top:32px;max-width:600px;padding:25px;border:1px solid #315888;background:#08244d;border-radius:10px;cursor:pointer}.event-card:hover{border-color:#8dc63f}.event-card h2{margin:0 0 8px}.director{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}.panel{background:#08244d;border:1px solid #315888;border-radius:10px;padding:20px;min-width:0}.panel h2{margin-top:0}.display-list{max-height:600px;overflow-y:auto;border-bottom:1px solid #315888}.display-row{border-top:1px solid #315888;min-height:60px;padding:8px 0;display:flex;align-items:center;justify-content:space-between;gap:10px}.display-summary{display:grid;gap:3px;min-width:0}.display-row strong{font-size:16px}.meta{font-size:13px;color:#c3d3e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.actions{display:flex;gap:5px;flex-wrap:nowrap}.actions button,.actions a{padding:7px 8px;font-size:12px;white-space:nowrap}.preview{display:flex;flex-direction:column;justify-content:center;min-height:500px;background:linear-gradient(135deg,#081c3b,#123769);border-radius:6px;padding:32px}.preview .badge{color:#8dc63f;font-weight:700;letter-spacing:2px}.preview h1{font-size:clamp(36px,5vw,74px);margin:18px 0}.preview .mockrow{border-top:1px solid #8dc63f;padding:16px 0;font-size:20px}.url{font-size:13px;overflow-wrap:anywhere;color:#c3d3e8}.add{border-top:1px solid #315888;margin-top:18px;padding-top:18px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.full{grid-column:1/-1}@media(max-width:900px){.director{grid-template-columns:1fr}.shell{padding:18px}.preview{min-height:360px}.display-row{align-items:flex-start;flex-direction:column}.actions{flex-wrap:wrap}}
#app > main:not(.output-canvas) > section > div:first-child > strong:last-child {
  display: none;
}

/* Public display: keep the content card complete and reserve a separate footer. */
#app > main:not(.output-canvas) > section {
  min-height: 0 !important;
  margin-bottom: 16px;
}

#app > main:not(.output-canvas) > footer {
  height: 62px;
  margin-top: 0 !important;
  padding-top: 0 !important;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#app > main:not(.output-canvas) > footer img {
  max-width: 150px !important;
  max-height: 45px !important;
}

#app > main:not(.output-canvas) > footer strong {
  font-size: 20px !important;
}

/* Two columns leave enough room for a participant name on one line. */
#app > main:not(.output-canvas) > section > div:nth-child(2) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.display-row {
  border-left: 3px solid transparent;
  padding-left: 8px;
  transition: border-color .15s, background .15s;
}

.display-row.is-previewing {
  border-left-color: #8dc63f;
  background: #12355f;
}

.display-row.is-hidden {
  background: #8a4d08;
  border-color: #d98318;
}

.display-row.is-live {
  background: #1f6b37;
  border-color: #8dc63f;
}

.actions .animate-preview,
.actions .make-transparent,
.actions .play-display {
  min-width: 34px;
  height: 36px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
}

.actions .play-display {
  background: #8dc63f;
  color: #05193a;
}

html.output-transparent,
html.output-transparent body,
html.output-transparent #app,
html.output-custom-template,
html.output-custom-template body,
html.output-custom-template #app {
  background: transparent !important;
}

/* A 100 ms duration matches the 100 ms stagger, so each participant finishes
   fading in before the next participant begins. */
.screen-row {
  animation-duration: 100ms !important;
}

.preview-name {
  font-size: 14px;
  font-weight: 400;
  color: #8dc63f;
  margin-left: 8px;
}

.login-logo {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin: 0 auto 22px;
}

.login h1 {
  text-align: center;
}

/* Lovable layout, integrated with the existing TIME2WIN palette and real logo. */
.lovable-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
  background: #05193a;
}

.lovable-stage {
  min-height: 100vh;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: radial-gradient(circle at 20% 35%, #12355f 0, #08244d 35%, #05193a 78%);
}

.stage-logo {
  width: 128px;
  height: 48px;
  object-fit: contain;
  object-position: left center;
}

.stage-kicker,
.lovable-stage small {
  margin: 0;
  color: #8dc63f;
  letter-spacing: .22em;
  font-size: 12px;
  font-weight: 700;
}

.lovable-stage h1 {
  margin: 14px 0 20px;
  font: 700 clamp(54px, 6vw, 92px)/.88 Din, Arial, sans-serif;
  letter-spacing: .025em;
}

.lovable-stage h1 span {
  color: #8dc63f;
}

.stage-copy {
  max-width: 470px;
  color: #c3d3e8;
  font-size: 18px;
  line-height: 1.5;
}

.lovable-auth {
  display: grid;
  place-items: center;
  padding: 32px;
  background: #05193a;
}

.lovable-auth .login {
  width: min(100%, 420px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.lovable-auth .login-logo {
  display: none;
}

.lovable-auth h2 {
  margin: 0;
  font-size: 38px;
  text-transform: uppercase;
}

.lovable-auth button {
  width: 100%;
  margin-top: 8px;
}
.lovable-auth .register-note { margin:18px 0 0; color:#c3d3e8; font-size:13px; text-align:center; }
.lovable-auth .register-note a { color:#a6db58; font-weight:700; text-underline-offset:3px; }
.lovable-auth .register-note a:focus-visible { outline:2px solid #a6db58; outline-offset:4px; border-radius:2px; }
.lovable-auth .account-distinction { margin:8px 0 20px; padding:10px 12px; border-left:3px solid #a6db58; background:#102d59; color:#dce8f8; font-size:13px; line-height:1.4; }

.brand {
  width: 168px;
  height: 38px;
  background: url('/assets/time2win-logo-button-white-domain.svg') left center / contain no-repeat;
  font-size: 0;
}

.brand i {
  display: none;
}

.top {
  padding-bottom: 24px;
}

.panel,
.event-card {
  box-shadow: 0 18px 45px -26px #000e;
}

@media (max-width: 850px) {
  .lovable-login {
    grid-template-columns: 1fr;
  }

  .lovable-stage {
    min-height: 300px;
    padding: 28px;
  }

  .lovable-stage small {
    display: none;
  }

  .lovable-stage h1 {
    font-size: 54px;
  }
}

/* Event overview and display control panel follow the Lovable composition. */
.lovable-app.shell {
  width: min(1600px, 100%);
  margin: 0 auto;
  padding: 26px 32px 42px;
  background: transparent;
}

.lovable-app .top {
  min-height: 72px;
  border-bottom-color: #315888;
}

.page-toolbar {
  margin-top: 34px;
  padding-bottom: 22px;
  border-bottom: 1px solid #315888;
}

.page-toolbar h1 {
  margin: 0;
  font-size: 38px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.lovable-app .event-card {
  max-width: none;
  margin: 0;
  min-height: 165px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 18px 45px -26px #000e;
  transition: transform .16s ease, border-color .16s ease;
}

.lovable-app .event-card:hover {
  transform: translateY(-2px);
  border-color: #8dc63f;
}

.lovable-director {
  grid-template-columns: minmax(330px, 420px) minmax(0, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.lovable-director .panel {
  border-radius: 8px;
  background: linear-gradient(145deg, #08244d, #071b3a);
  box-shadow: 0 18px 45px -26px #000e;
}

.display-control-panel {
  display: flex;
  min-height: 640px;
  flex-direction: column;
}

.display-control-panel > h2,
.preview-panel > h2 {
  font-size: 21px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lovable-display-list {
  max-height: none;
  flex: 1;
  margin-top: 14px;
  border-top: 1px solid #315888;
}

.lovable-display-list .display-row {
  min-height: 74px;
  padding: 10px;
  border: 1px solid #315888;
  border-radius: 6px;
  margin: 8px 0;
  background: #08244d;
}

.lovable-display-list .display-row.is-previewing {
  border-color: #8dc63f;
  background: #12355f;
  box-shadow: 0 0 0 1px #8dc63f55;
}

.lovable-display-list .display-row.is-hidden {
  background: #8a4d08;
  border-color: #d98318;
}

.lovable-display-list .display-row.is-live {
  background: #1f6b37;
  border-color: #8dc63f;
}

.lovable-display-list .actions {
  gap: 6px;
}

.preview-panel {
  min-width: 0;
}

.preview-panel #preview {
  overflow: hidden;
  border: 1px solid #315888;
  border-radius: 6px;
  background: #05193a;
  box-shadow: 0 18px 45px -26px #000e;
}

.preview-panel .preview-viewport {
  border-radius: 0;
}

.add-button {
  margin-top: 14px;
  width: 100%;
}

@media (max-width: 900px) {
  .lovable-app.shell {
    padding: 18px;
  }

  .lovable-director {
    grid-template-columns: 1fr;
  }

  .display-control-panel {
    min-height: 0;
  }
}

/* Direct integration of the two Lovable reference pages. */
.lovable-page {
  min-height: 100vh;
  color: #f7f9ff;
  background: #05193a;
}

.lovable-header {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 max(24px, calc((100vw - 1500px) / 2));
  border-bottom: 1px solid #315888;
  background: #04162f;
}
.lovable-header button {
  transition:transform 140ms ease,background-color 140ms ease,border-color 140ms ease,box-shadow 140ms ease,color 140ms ease;
}
.lovable-header button:hover {
  transform:translateY(-1px);
  border-color:#9bc9ff;
  background:#244b7d;
  color:#fff;
  box-shadow:0 5px 16px #0005,0 0 0 1px #5fa9ff55;
}
.lovable-header button:active { transform:translateY(0); box-shadow:0 2px 7px #0005; }
.lovable-header button:focus-visible { outline:3px solid #8dc63f; outline-offset:3px; }
.lovable-header .new-display:hover { border-color:#b6ef68; background:#a2dc51; color:#071b3a; }
.route-loading {
  position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; gap:12px;
  color:#fff; background:#03132dcc; backdrop-filter:blur(3px); opacity:0; transition:opacity 120ms ease;
}
.route-loading.is-visible { opacity:1; }
.route-spinner { width:24px; height:24px; border:3px solid #ffffff44; border-top-color:#8dc63f; border-radius:50%; animation:route-spin .7s linear infinite; }
@keyframes route-spin { to { transform:rotate(360deg); } }

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

.brand-lockup img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.brand-lockup span {
  display: grid;
  gap: 3px;
}

.brand-lockup strong {
  font-size: 18px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.brand-lockup small,
.back-link,
.section-label {
  color: #c3d3e8;
  font-size: 12px;
}

.lovable-main {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: 42px 32px 56px;
}

.lovable-main h1 {
  margin: 0;
  font-size: 40px;
  text-transform: uppercase;
}

.page-intro,
.event-config-head p {
  margin: 6px 0 0;
  color: #c3d3e8;
}

.lovable-page .event-grid {
  margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}

.lovable-event-card {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid #315888;
  border-radius: 8px;
  background: linear-gradient(145deg, var(--event-color), #071b3a 72%);
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease;
}

.lovable-event-card:hover {
  transform: translateY(-2px);
  border-color: #8dc63f;
}

.event-card-head,
.event-card-bottom,
.event-config-head,
.section-label,
.row-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.event-logo-slot {
  display: grid;
  width: 64px;
  height: 48px;
  place-items: center;
}

.event-logo-slot img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.event-status,
.display-state {
  padding: 4px 9px;
  border-radius: 99px;
  color: #05193a;
  background: #8dc63f;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.lovable-event-card h2 {
  margin: 20px 0 14px;
  font-size: 23px;
  line-height: 1.05;
  text-transform: uppercase;
}

.lovable-event-card dl {
  display: grid;
  gap: 7px;
  margin: 0;
  color: #c3d3e8;
  font-size: 14px;
}

.lovable-event-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.lovable-event-card dd {
  margin: 0;
  color: #fff;
  text-align: right;
}

.event-card-bottom {
  margin-top: auto;
  padding-top: 18px;
  color: #8dc63f;
  font-size: 14px;
  font-weight: 700;
}

.event-edit {
  padding: 4px 8px;
  color: #fff;
  border: 1px solid #6684aa;
  border-radius: 5px;
  background: transparent;
}

.event-config-head {
  margin-bottom: 30px;
}

.new-display {
  color: #05193a;
  background: #8dc63f;
}

.lovable-page .lovable-director {
  display: grid;
  grid-template-columns: minmax(330px, 420px) minmax(0, 1fr);
  gap: 26px;
  margin: 0;
}

.display-control-panel,
.preview-panel {
  padding: 0;
  background: transparent;
}

.section-label {
  padding-bottom: 10px;
  border-bottom: 1px solid #315888;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.section-label a {
  color: #8dc63f;
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
}

.section-label .edit-template-quick {
  padding: 6px 9px;
  border: 1px solid #8dc63f;
  border-radius: 5px;
  font-weight: 700;
}

.section-label .edit-template-quick:hover {
  color: #05193a;
  background: #8dc63f;
}

.lovable-display-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.lovable-display-row {
  overflow: hidden;
  border: 1px solid #315888;
  border-radius: 7px;
  background: #08244d;
}

.lovable-display-row.is-previewing {
  background:#163665;
  box-shadow:0 0 18px #00b9ff55,inset 0 0 22px #00b9ff14;
}
.lovable-display-row.is-live { border-left: 4px solid #8dc63f; }
.lovable-display-row.is-hidden { border-left: 4px solid #f28c28; }
.lovable-display-row.is-hidden .display-state { background: #f28c28; }

.display-select {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: #fff;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.display-icon { color: #c3d3e8; font-size: 18px; }
.display-summary { display: grid; gap: 3px; min-width: 0; }
.display-summary strong { font-size: 16px; text-transform: uppercase; }
.display-summary .meta { overflow: hidden; color: #c3d3e8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.row-actions {
  justify-content: flex-start;
  padding: 0 12px 12px 40px;
}

.row-actions button,
.row-actions .link {
  padding: 5px 8px;
  color: #c3d3e8;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-size: 12px;
  text-decoration: none;
}

.row-actions .play-display { color: #05193a; background: #8dc63f; }
.row-actions .make-transparent { color: #f7c37b; }

.preview-panel #preview {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #315888;
  border-radius: 7px;
  background: #04162f;
}

.empty-displays,
.empty-preview {
  display: grid;
  min-height: 160px;
  place-items: center;
  color: #c3d3e8;
  border: 1px dashed #315888;
  border-radius: 7px;
  text-align: center;
}

@media (max-width: 900px) {
  .lovable-header { padding: 0 18px; }
  .lovable-main { padding: 28px 18px; }
  .lovable-page .lovable-director { grid-template-columns: 1fr; }
  .event-config-head { align-items: flex-start; flex-direction: column; }
}

/* Exact spatial treatment of the Lovable /events and /events/:id references. */

/* Login screen: direct translation of the supplied Lovable reference. */
.lovable-login {
  grid-template-columns: 50% 50%;
  background: #1a2b53;
  font-family: "Barlow", Arial, sans-serif;
}

.lovable-stage {
  position: relative;
  display: block;
  min-height: 100vh;
  padding: 0 0 0 24px;
  background: #1b2d56;
}

.lovable-stage .stage-content {
  position: absolute;
  top: 47%;
  left: 24px;
  transform: translateY(-50%);
}

.lovable-stage .stage-kicker {
  margin: 0;
  color: #94c947;
  font: 700 10px/1 "Barlow Condensed", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.lovable-stage h1 {
  margin: 23px 0 20px;
  color: #fff;
  font: 700 clamp(42px, 3.55vw, 56px)/.88 "Barlow Condensed", Arial, sans-serif;
  letter-spacing: 0;
}

.lovable-stage .stage-copy {
  max-width: 390px;
  margin: 0;
  color: #c2d3eb;
  font: 500 13px/1.55 "Barlow", Arial, sans-serif;
}

.lovable-stage small {
  position: absolute;
  bottom: 10px;
  left: 24px;
  color: #b8c9e3;
  font: 500 9px/1 "Barlow Condensed", Arial, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.lovable-auth {
  position: relative;
  display: block;
  min-height: 100vh;
  padding: 0;
  background: #101d3b;
}

.lovable-auth .login {
  position: absolute;
  top: 31%;
  left: min(13.5vw, 312px);
  width: 310px;
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: "Barlow", Arial, sans-serif;
}

.lovable-auth .login-product {
  margin: 0 0 13px;
  color: #94c947;
  font: 700 10px/1 "Barlow Condensed", Arial, sans-serif;
  text-transform: uppercase;
}

.lovable-auth h2 {
  margin: 0 0 14px;
  color: #fff;
  font: 700 28px/1 "Barlow Condensed", Arial, sans-serif;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.lovable-auth .muted {
  margin: 0 0 30px;
  color: #c2d3eb;
  font: 500 12px/1.35 "Barlow", Arial, sans-serif;
}

.lovable-auth .field {
  gap: 6px;
  margin: 0 0 14px;
  color: #fff;
  font: 600 12px/1 "Barlow", Arial, sans-serif;
}

.lovable-auth input {
  height: 30px;
  padding: 6px 10px;
  border: 1px solid #315789;
  border-radius: 5px;
  background: #102d59;
  color: #fff;
  font: 500 12px/1 "Barlow", Arial, sans-serif;
}

.lovable-auth input:focus {
  outline: 1px solid #94c947;
  border-color: #94c947;
}

.lovable-auth input:-webkit-autofill,
.lovable-auth input:-webkit-autofill:hover,
.lovable-auth input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #102d59 inset;
  box-shadow: 0 0 0 1000px #102d59 inset;
}

.lovable-auth button {
  width: 100%;
  height: 30px;
  margin-top: 0;
  padding: 0 12px;
  border-radius: 4px;
  background: #94c947;
  color: #142446;
  font: 600 12px/1 "Barlow", Arial, sans-serif;
}

.lovable-auth .error {
  min-height: 0;
  margin: -5px 0 10px;
  font: 500 11px/1.3 "Barlow", Arial, sans-serif;
}

.lovable-auth .login-note {
  margin: 24px 0 0;
  color: #c2d3eb;
  font: 500 9px/1.35 "Barlow", Arial, sans-serif;
}

@media (max-width: 850px) {
  .lovable-login { grid-template-columns: 1fr; }
  .lovable-stage { min-height: 310px; }
  .lovable-stage .stage-content { top: 50%; }
  .lovable-auth { min-height: 500px; padding: 70px 28px; }
  .lovable-auth .login { position: static; width: min(100%, 310px); margin: 0 auto; }
}
.lovable-page { background: #062448; }

.lovable-header {
  height: 69px;
  padding-right: 24px;
  padding-left: max(24px, calc((100vw - 1080px) / 2));
  background: #112f5a;
}

.brand-lockup { gap: 10px; }
.brand-lockup img {
  width: 112px;
  height: 36px;
  padding: 4px;
  border: 1px solid #315888;
  border-radius: 5px;
}
.brand-lockup strong { font-size: 16px; }
.brand-lockup small { font-size: 11px; }

.lovable-main {
  width: min(1080px, 100%);
  padding: 42px 0 64px;
}

.lovable-main h1 {
  font-size: 29px;
  line-height: 1;
}
.page-intro,
.event-config-head p { font-size: 14px; }

.lovable-page .event-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 34px;
}

.lovable-event-card {
  min-height: 222px;
  padding: 20px;
  border-radius: 7px;
  background: #102f5c;
  box-shadow: 0 14px 30px -23px #000e;
}

.event-card-head {
  min-height: 40px;
  justify-content: space-between;
}
.event-logo-slot { display:grid; width:76px; height:40px; padding:3px 6px; border:1px solid #315888; border-radius:4px; background:#061b3a99; }
.event-status { padding: 4px 10px; font-size: 11px; }
.lovable-event-card h2 { margin: 0 0 18px; font-size: 20px; }
.lovable-event-card dl { gap: 8px; font-size: 13px; }
.event-card-bottom { padding-top: 20px; font-size: 13px; }

.event-config-head { margin-bottom: 31px; }
.back-link { display:block; width:max-content; margin-bottom:13px; color:#fff; font-weight:700; text-transform:uppercase; text-decoration:none; }
.back-link:hover { color:#8dc63f; }
.back-link:focus-visible { outline:2px solid #8dc63f; outline-offset:4px; }
.event-config-head h1 { font-size: 29px; }
.new-display { padding: 9px 14px; font-size: 14px; }

.lovable-page .lovable-director {
  grid-template-columns: 416px minmax(0, 1fr);
  gap: 24px;
}

.section-label {
  padding-bottom: 8px;
  border-bottom: 0;
  font-size: 11px;
  letter-spacing: .04em;
}

.lovable-display-list { gap: 8px; margin-top: 7px; }
.lovable-display-row {
  border-radius: 6px;
  background: #112f5a;
}
.lovable-display-row.is-live { border-left: 1px solid #8dc63f; }
.lovable-display-row.is-hidden { border-left: 1px solid #315888; }

.display-select { padding: 11px 12px 5px; }
.display-icon { font-size: 15px; }
.display-summary strong { font-size: 14px; }
.display-summary .meta { font-size: 11px; }
.display-state { padding: 4px 9px; font-size: 10px; }

.row-actions { gap: 7px; padding: 1px 12px 11px 48px; }
.row-actions button,
.row-actions .link { padding: 4px 5px; font-size: 11px; }
.row-actions .animate-preview { display: none; }

.preview-panel #preview { margin-top: 7px; border-radius: 7px; }
.preview-panel .preview-viewport { background: #112f5a; }

@media (max-width: 900px) {
  .lovable-main { padding: 28px 18px; }
  .lovable-page .event-grid { grid-template-columns: 1fr; }
  .lovable-page .lovable-director { grid-template-columns: 1fr; }
}

/* The event control room is operated on 16:9 screens: reserve the full canvas
   for the display preview instead of constraining it to the overview width. */
.lovable-main.event-config-main {
  width: 100%;
  max-width: none;
  padding-right: clamp(24px, 3vw, 56px);
  padding-left: clamp(24px, 3vw, 56px);
}

.event-config-main .lovable-director {
  grid-template-columns: minmax(360px, 416px) minmax(0, 1fr);
}

@media (max-width: 900px) {
  .lovable-main.event-config-main { padding: 28px 18px; }
}

/* Compact 16:9 control-room canvas: options occupy 40%, preview 60%. */
.lovable-page:has(.event-config-main) {
  height: 100dvh;
  overflow: hidden;
}

.lovable-main.event-config-main {
  height: calc(100dvh - 69px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  padding-top: clamp(18px, 2.1vh, 28px);
  padding-bottom: clamp(18px, 2.1vh, 28px);
}

.event-config-main .event-config-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(16px, 1.5vw, 28px);
  align-items: start;
  margin-bottom: clamp(14px, 1.8vh, 22px);
}

.event-config-main .event-config-summary,
.event-config-main .event-config-title-line {
  min-width: 0;
}

.event-config-main .event-config-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.event-config-main .event-config-title-line h1 {
  min-width: 0;
  margin-right: auto;
}

.event-config-main .event-config-title-line .new-display {
  flex: 0 0 auto;
}

.event-config-main .event-config-head > .race-status {
  align-self: start;
}

.event-config-main .event-config-head > .race-status > .section-label {
  min-height: 17px;
  padding: 0 0 5px;
}

.event-config-main .lovable-director {
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(16px, 1.5vw, 28px);
  align-items: start;
}

.event-config-main .display-control-panel,
.event-config-main .preview-panel {
  min-width: 0;
}

.event-config-main .preview-panel #preview {
  width: 100%;
  margin-top: 7px;
  aspect-ratio: 16 / 9;
}

.event-config-main .preview-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.event-config-main .preview-viewport iframe {
  width: 1920px;
  height: 1080px;
  border: 0;
  transform-origin: top left;
}

.event-config-main .output-status {
  margin-right: auto;
  padding: 3px 7px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.event-config-main .output-status.is-live {
  color: #0c2a1b;
  background: #8dc63f;
}

.event-config-main .output-status.is-empty {
  color: #4b2600;
  background: #f28c28;
}

.event-config-main .display-control-panel {
  display: flex;
  flex-direction: column;
}

.event-config-main .lovable-display-list {
  min-height: 0;
  height: clamp(400px, 34vw, 620px);
  max-height: calc(100dvh - 160px);
  display: grid;
  grid-template-rows: repeat(10, minmax(0, 1fr));
  gap: 3px;
  margin-top: 7px;
}

.event-config-main .lovable-display-row {
  min-height: 0;
  border-radius: 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.event-config-main .display-select {
  grid-column: 1;
  grid-row: 1;
  gap: 7px;
  padding: 5px 10px 2px;
}

.event-config-main .display-icon { display:inline-flex; flex:0 0 auto; }
.event-config-main .display-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.event-config-main .display-summary { display: flex; align-items: baseline; gap: 10px; }
.event-config-main .display-summary strong { flex: 0 0 auto; font-size: 18px; }
.event-config-main .display-summary .meta { min-width: 0; font-size: 15px; }
.event-config-main .display-state { padding: 3px 7px; font-size: 10px; }

.event-config-main .row-actions {
  grid-column: 2;
  grid-row: 1;
  flex-wrap: nowrap;
  gap: 7px;
  padding: 0 10px;
}

.event-config-main .row-actions button,
.event-config-main .row-actions .link {
  padding: 4px 9px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
}

.event-config-main .row-actions .edit {
  color: #fff;
  background: #315888;
}

.event-config-main .row-actions .make-transparent {
  color: #4b2600;
  background: #f28c28;
}

.event-config-main .row-actions .play-display {
  color: #0c2a1b;
  background: #8dc63f;
}

.event-config-main .row-actions .link {
  color: #e5f2ff;
  background: #17689f;
}

#app .result-list-grid {
  grid-template-columns: 1fr !important;
  gap: 3px !important;
  margin-top: 12px !important;
}



@media (max-width: 900px) {
  .lovable-page:has(.event-config-main) { height: auto; overflow: visible; }
  .lovable-main.event-config-main { height: auto; }
  .event-config-main .event-config-head { display:flex; }
  .event-config-main .event-config-head > .race-status { width:100%; }
  .event-config-main .event-config-summary { width:100%; }
  .event-config-main .event-config-title-line { flex-wrap:wrap; }
  .event-config-main .lovable-director { grid-template-columns: 1fr; }
  .event-config-main .lovable-display-list { height: auto; grid-template-rows: none; }
}
.template-list { display:grid; gap:12px; margin-top:28px; }
.template-list article { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px; border:1px solid #315888; border-radius:10px; background:#08244d; }
.template-list article div { display:flex; gap:10px; align-items:center; }
.template-list article div:first-child { flex-direction:column; align-items:flex-start; }
.template-list article span { color:#9eb6d6; font-size:14px; }
.template-page { height:100dvh; min-height:0; overflow:hidden; }
.template-editor { box-sizing:border-box; height:calc(100dvh - 69px); min-height:0; display:grid; grid-template-columns:300px minmax(0,1fr); gap:12px; padding:12px; overflow:hidden; }
.template-editor > aside { min-height:0; overflow:auto; padding:14px; border:1px solid #315888; border-radius:10px; background:#071b3a; scrollbar-width:thin; }
.template-editor > section { min-width:0; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 350px; grid-template-rows:auto minmax(0,1fr); gap:8px 12px; align-items:start; overflow:hidden; }
.template-editor textarea { min-height:70px; resize:vertical; }
.template-published { display:flex; align-items:center; gap:8px; margin:14px 0; }
.template-published input,.template-events input { width:auto; }
.placeholder-palette { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
.placeholder-palette button { min-height:38px; padding:7px; font-size:12px; }
.template-events { display:grid; gap:7px; max-height:180px; overflow:auto; margin-bottom:15px; }
.template-events label { display:flex; align-items:center; gap:7px; font-size:13px; }
.template-save-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.template-save-actions button { min-width:0; padding-right:8px; padding-left:8px; }
.template-save-status { min-height:18px; margin:7px 0 0; color:#8dc63f; font-size:12px; font-weight:700; }
.animation-library { margin-top:28px; padding:20px; border:1px solid #315888; border-radius:8px; background:#08244d; }
.animation-library h2 { margin:0 0 4px; }
.animation-library p { margin:0; color:#c3d3e8; }
.animation-library form { display:grid; grid-template-columns:minmax(180px,1fr) minmax(220px,1fr) auto; gap:12px; align-items:end; margin:16px 0; }
.animation-library form .field { margin:0; }
.animation-list { display:grid; gap:8px; margin-top:16px; }
.animation-list article { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid #315888; border-radius:6px; }
.animation-list article div { display:grid; gap:3px; }
.animation-list article span { color:#c3d3e8; font-size:12px; }
@media(max-width:800px){.animation-library form{grid-template-columns:1fr}.animation-list article{align-items:flex-start;flex-direction:column}}
.template-stage-wrap { grid-column:1; grid-row:2; width:min(100%,calc((100dvh - 131px) * 16 / 9)); max-height:calc(100dvh - 131px); aspect-ratio:16/9; justify-self:center; align-self:start; background-color:#e1e4e8; background-image:conic-gradient(#f7f8fa 25%,#e1e4e8 0 50%,#f7f8fa 0 75%,#e1e4e8 0); background-size:24px 24px; border:1px solid #6684aa; }
.template-stage { position:relative; isolation:isolate; width:100%; height:100%; overflow:hidden; container-type:size; }
.template-stage .placed { position:absolute; box-sizing:border-box; cursor:move; user-select:none; }
.template-body-box { border:2px dashed #00b9ff; background:transparent; display:grid; place-items:center; color:#00b9ff; font-size:11px; }
.template-body-box { z-index:1; }
.template-body-box > span { display:none; }
.template-stage.show-placeholder-names .template-body-box { background:#00b9ff18; }
.template-stage.show-placeholder-names .template-body-box > span { display:block; }
.template-stage .template-animation-element { padding:0 !important; border:0; background:transparent !important; }
.template-stage .template-animation-element.selected { overflow:visible; }
.template-stage .template-animation-viewport { position:absolute; inset:0; overflow:hidden; pointer-events:none; background:transparent; }
.template-stage .template-animation-viewport iframe { position:absolute; top:0; left:0; display:block; width:1920px; height:1080px; max-width:none; border:0; background:transparent; color-scheme:normal; transform-origin:top left; pointer-events:none; }
.template-example-content { display:contents; }
.template-placeholder-content { display:none; position:absolute; inset:0; align-items:center; justify-content:center; padding:8px; color:#ffd500; background:#071b3acc; font-family:Arial,sans-serif; font-size:clamp(11px,1.8cqh,24px); font-weight:700; line-height:1.1; text-align:center; text-transform:none; white-space:normal; pointer-events:none; }
.template-stage.show-placeholder-names .template-example-content { visibility:hidden; }
.template-stage.show-placeholder-names .template-placeholder-content { display:flex; }
.template-preview-toggle { grid-column:1/-1; grid-row:1; display:flex; align-items:center; justify-content:flex-end; gap:9px; min-height:30px; margin:0; color:#c3d3e8; font-size:12px; font-weight:700; }
.template-preview-toggle input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.template-preview-toggle i { position:relative; width:42px; height:22px; border:1px solid #6684aa; border-radius:999px; background:#071b3a; cursor:pointer; }
.template-preview-toggle i::after { content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .15s ease,background .15s ease; }
.template-preview-toggle input:checked + i { border-color:#8dc63f; }
.template-preview-toggle input:checked + i::after { transform:translateX(20px); background:#8dc63f; }
.template-preview-toggle input:focus-visible + i { outline:2px solid #8dc63f; outline-offset:2px; }
.template-element { display:flex; align-items:center; overflow:hidden; white-space:nowrap; border:1px dashed #ffd500; background:#071b3a66; line-height:1; }
.template-element-text { width:100%; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.template-element-logo { width:100%; height:100%; object-fit:contain; pointer-events:none; }
.template-event-image-element { padding:0 !important; background:transparent !important; }
.template-element-event-image { width:100%; height:100%; object-fit:fill; pointer-events:none; }
.template-element-missing { padding:8px; color:#9eb6d6; font-size:12px; text-align:center; white-space:normal; }
.event-image-fields { display:grid; gap:12px; margin:2px 0 20px; }
.event-image-field { padding:14px; border:1px solid #315888; border-radius:7px; background:#09264d; }
.event-image-field-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.event-image-field-head strong { font-size:13px; }
.editor-dialog .event-image-field-head button { padding:6px 9px; color:#ffb3b3; border-color:#81465b; }
.editor-dialog .event-image-field-head button:hover { color:#fff; background:#6a3045; border-color:#bb6475; }
.event-image-preview { display:grid; min-height:82px; place-items:center; margin-bottom:12px; padding:8px; border:1px dashed #45678f; border-radius:5px; background:#04142c; color:#90a9cb; font-size:12px; text-align:center; }
.event-image-preview.has-image { border-style:solid; }
.event-image-preview img { display:block; max-width:100%; max-height:92px; object-fit:contain; }
.event-image-field .field { margin:0; }
.template-stage .locked { cursor:not-allowed; border-style:solid; }
.template-stage .selected { outline:3px solid #ff2c93; outline-offset:2px; }
.resize-handle { position:absolute; z-index:100; display:block; width:12px; height:12px; border:2px solid #fff; border-radius:50%; background:#ff2c93; box-shadow:0 1px 4px #000; }
.resize-nw { left:-7px;top:-7px;cursor:nwse-resize }.resize-n { left:calc(50% - 6px);top:-7px;cursor:ns-resize }.resize-ne { right:-7px;top:-7px;cursor:nesw-resize }
.resize-e { right:-7px;top:calc(50% - 6px);cursor:ew-resize }.resize-se { right:-7px;bottom:-7px;cursor:nwse-resize }.resize-s { left:calc(50% - 6px);bottom:-7px;cursor:ns-resize }
.resize-sw { left:-7px;bottom:-7px;cursor:nesw-resize }.resize-w { left:-7px;top:calc(50% - 6px);cursor:ew-resize }
#template-properties { grid-column:2; grid-row:2; box-sizing:border-box; height:100%; min-height:0; margin:0; padding:14px; overflow:auto; scrollbar-width:thin; border:1px solid #315888; border-radius:8px; background:#071b3a; }
#template-properties h3 { margin-top:0; }
.template-props { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.template-props label { font-size:12px; color:#9eb6d6; }
.template-props input,.template-props select { margin-top:4px; }
.template-props .wide { grid-column:span 2; }
.template-props .check-field,.template-props .color-with-clear span { display:flex; align-items:center; gap:7px; }
.template-props .check-field input,.template-props .color-with-clear span input { width:auto; margin:0; }
.color-with-clear { display:flex; flex-direction:column; gap:7px; }
.template-element-actions { display:flex; gap:8px; }
.template-help { margin:12px 0 0; color:#9eb6d6; font-size:12px; }
@media(max-width:1100px){.template-editor{grid-template-columns:250px minmax(0,1fr)}.template-editor>section{grid-template-columns:minmax(0,1fr) 290px}}
@media(max-width:800px){.template-page{height:auto;overflow:auto}.template-editor{height:auto;grid-template-columns:1fr;overflow:visible}.template-editor>aside{overflow:visible}.template-editor>section{grid-template-columns:1fr;grid-template-rows:auto auto auto;overflow:visible}.template-preview-toggle{grid-column:1;grid-row:1}.template-stage-wrap{grid-column:1;grid-row:2;width:100%;max-height:none}#template-properties{grid-column:1;grid-row:3;height:auto;max-height:none}.template-props{grid-template-columns:1fr 1fr}}