:root{
  --bg:#08090f;
  --card:#10121c;
  --card-hover:#141728;
  --muted:#7b8ea3;
  --accent:#ff6b6b;
  --accent-glow:rgba(255,107,107,.15);
  --ok:#4dffb8;
  --ok-dim:rgba(77,255,184,.12);
  --warn:#ffd042;
  --warn-border:#e0b400;
  --warn-text:#261a00;
  --line:#1a1e2e;
  --line-light:#252a3a;
  --text:#edf0f7;
  --input:#0d0f1a;
  --input-focus:#161a2c;
  --radius:12px;
  --radius-sm:8px;
}
*{box-sizing:border-box}
html,body{
  margin:0;height:100%;
  overflow-y:auto;
  background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.wrap{margin:0 auto;padding:24px 24px 48px}

/* ---- Header ---- */
header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:28px;flex-wrap:wrap;gap:12px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
header h1{
  margin:0;font-size:24px;font-weight:700;
  letter-spacing:-.3px;
}
header h1 .title-text{
  background:linear-gradient(135deg,var(--text) 40%,var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.header-buttons{display:flex;gap:8px;flex-wrap:wrap}

/* ---- Buttons ---- */
.btn{
  appearance:none;border:1px solid var(--line-light);
  background:var(--card);color:var(--text);
  padding:9px 16px;border-radius:var(--radius-sm);
  cursor:pointer;font-size:13px;font-weight:500;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  transition:all .15s ease;
  letter-spacing:.2px;
}
.btn:hover{background:var(--card-hover);border-color:#333a52;text-decoration:none}
.btn:active{transform:scale(.97)}
a.btn{text-decoration:none}
a.btn:hover{text-decoration:none}
.btn.danger{background:#ff6b6b;border-color:#ff5252;color:#fff;font-weight:600}
.btn.danger:hover{background:#ff8888;border-color:#ff8888}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#ff5252;border-color:#ff5252}
.btn.ok{background:var(--ok);color:#00150d;border-color:#00d39a;font-weight:600}
.btn.ok:hover{background:#5cffc5;border-color:#5cffc5}
.btn.warn{background:var(--warn);color:var(--warn-text);border-color:var(--warn-border);font-weight:600}
.btn.warn:hover{background:#ffe066}
.btn.info{background:#4a90d9;border-color:#3a7bc8;color:#fff;font-weight:600}
.btn.info:hover{background:#5da0e8;border-color:#5da0e8}
.btn.ghost{background:transparent;color:var(--muted);border-color:var(--line-light)}
.btn.ghost:hover{color:var(--text);background:rgba(255,255,255,.06);border-color:#444}
.btn.email{background:#8b5cf6;border-color:#7c3aed;color:#fff;font-weight:600}
.btn.email:hover{background:#a78bfa;border-color:#a78bfa}
.btn.logo{background:#14b8a6;border-color:#0d9488;color:#fff;font-weight:600}
.btn.logo:hover{background:#2dd4bf;border-color:#2dd4bf}
.btn.led{background:#f59e0b;border-color:#d97706;color:#1a1a1a;font-weight:600}
.btn.led:hover{background:#fbbf24;border-color:#fbbf24}
.btn-sep{width:1px;height:24px;background:var(--line-light);margin:0 4px;flex-shrink:0}
.btn.sm{padding:5px 10px;font-size:11px;line-height:1;border-radius:6px}

/* ---- Layout ---- */
.layout{display:grid;gap:20px;grid-template-columns:1fr}
.sidebar{display:none}  /* preview moved inline */
.main{display:contents}  /* flatten so cards flow directly */
.grid{display:grid;gap:16px;grid-template-columns:1fr}
/* Row: Preview + Overlay/Camera + Attract */
.hw-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:start}
.col-stack{display:flex;flex-direction:column;gap:16px}
@media(max-width:1200px){.hw-row{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.hw-row{grid-template-columns:1fr}}

/* Overlay controls compact grid */
.overlay-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin-bottom:4px;
}

/* ---- Cards ---- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  transition:border-color .2s ease;
}
.card:hover{border-color:var(--line-light)}
.card h2{
  margin:0 0 12px;font-size:15px;font-weight:600;
  color:var(--muted);text-transform:uppercase;letter-spacing:.8px;
}
.card--compact{padding:14px}
.card--compact .row{margin:6px 0}
.card--compact h2{margin-bottom:8px}

/* ---- Rows ---- */
.row{display:flex;gap:10px;align-items:center;margin:10px 0}
.row-wrap{flex-wrap:wrap}
.row-between{justify-content:space-between}

/* ---- LED ---- */
.led-inline{gap:8px;align-items:center;cursor:pointer}
.led-inline input[type="checkbox"]{transform:scale(1.1)}
.led-tests{gap:6px;flex-wrap:wrap}
.led-tests .btn{white-space:nowrap}

/* ---- Form controls ---- */
label{font-size:14px;opacity:.95}
.hint{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;display:block}
input[type="text"],select{
  width:100%;padding:9px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--input);color:var(--text);
  font-size:13px;
  transition:border-color .15s ease, background .15s ease;
}
input[type="text"]:focus,select:focus{
  outline:none;
  border-color:#3a4570;
  background:var(--input-focus);
}
input[type="checkbox"]{transform:scale(1.2)}

/* Colour picker */
input[type="color"]{
  width:100%;height:38px;padding:0;border:1px solid var(--line);cursor:pointer;
  background:var(--input);border-radius:var(--radius-sm);outline:none;
}

/* ---- Preview ---- */
.previewCard{overflow:hidden}
.previewCard h2{margin-bottom:14px}
.previewCard .preview{
  position:relative;border-radius:var(--radius-sm);overflow:hidden;
  background:#05070f;border:1px solid var(--line);
  aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);width:100%;margin-inline:auto;
}
video{width:100%;height:100%;object-fit:cover;display:block}

/* Live overlay on setup preview */
.pv-frame{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:fill;pointer-events:none;z-index:1;
  display:none;
}
.pv-frame[src]{display:block}
.pv-logo{
  position:absolute;pointer-events:none;z-index:2;
  max-width:30%;max-height:30%;object-fit:contain;
}
.pv-overlay{
  position:absolute;left:50%;
  transform:translateX(-50%);
  white-space:nowrap;text-align:center;pointer-events:none;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
  z-index:3;
}


/* ---- Frame preview (hidden, kept for JS compat) ---- */
.frame-preview{display:none}

/* ---- Modal ---- */
.modal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.65);backdrop-filter:saturate(120%) blur(6px);z-index:9999;
}
.modal.hidden{display:none}
.modal.modal--clear{background:rgba(0,0,0,.35);backdrop-filter:none}
.modal-card{
  width:min(480px,92vw);
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:24px;box-shadow:0 16px 48px rgba(0,0,0,.5);
}
.modal-card h3{margin:0 0 6px;font-size:18px;font-weight:600}
.modal-sub{margin:0 0 18px;color:var(--muted);font-size:14px}
.modal-card--wide{width:min(600px,92vw)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}

/* ---- Frame lightbox ---- */
.lightbox{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.8);backdrop-filter:blur(8px);z-index:10000;
  cursor:pointer;
  animation:lbFadeIn .2s ease;
}
.lightbox.hidden{display:none}
@keyframes lbFadeIn{from{opacity:0}to{opacity:1}}
.lightbox-content{
  width:min(90vw,960px);
  aspect-ratio:16/9;
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:#05070f;
  border:1px solid var(--line-light);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
}
.lightbox-content img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  pointer-events:none;
}
.lightbox-content .fp-text{
  position:absolute;
  left:50%;transform:translateX(-50%);
  text-align:center;white-space:pre;
  pointer-events:none;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
  line-height:1.2;
}
.lightbox-content .no-frame{
  color:var(--muted);font-size:13px;
  text-transform:uppercase;letter-spacing:.3px;
}

/* ---- Event grid ---- */
.event-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:10px;
}
@media(max-width:1000px){.event-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.event-grid{grid-template-columns:1fr}}
input[type="date"],
input[type="datetime-local"]{
  width:100%;padding:9px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--input);color:var(--text);
  font-size:13px;
  transition:border-color .15s ease, background .15s ease;
  color-scheme:dark;
}
input[type="date"]:focus,
input[type="datetime-local"]:focus{
  outline:none;
  border-color:#3a4570;
  background:var(--input-focus);
}

/* ---- Attract screen config ---- */
.attract-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}
.attract-grid-col{display:flex;flex-direction:column;gap:10px}
@media(max-width:1000px){.attract-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.attract-grid{grid-template-columns:1fr}}
.attract-img-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.attract-pick{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);
  border:2px solid var(--line);
  border-radius:8px;
  cursor:pointer;
  transition:border-color .15s,background .15s,transform .1s;
  padding:4px;
}
.attract-pick:hover{border-color:var(--accent);background:rgba(255,255,255,.06);transform:scale(1.08)}
.attract-pick.selected{border-color:var(--accent);background:rgba(77,255,184,.12);box-shadow:0 0 0 1px var(--accent)}
.attract-img-preview{
  margin-top:8px;
  max-width:120px;max-height:120px;
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.attract-img-preview img{
  width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:var(--radius-sm);
}
.logo-preview{
  margin-top:8px;max-width:200px;
  border-radius:var(--radius-sm);overflow:visible;
}
.logo-preview img{
  max-width:100%;max-height:120px;height:auto;display:block;object-fit:contain;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:repeating-conic-gradient(#222 0% 25%, #333 0% 50%) 50% / 12px 12px;
}
.logo-settings{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
input[type="number"]{
  width:100%;padding:9px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--input);color:var(--text);
  font-size:13px;
  transition:border-color .15s ease, background .15s ease;
}
input[type="number"]:focus{
  outline:none;
  border-color:#3a4570;
  background:var(--input-focus);
}

/* ---- Scrollbar (webkit) ---- */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--line-light)}

/* ---- Email Template ---- */
.email-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;
}
.email-grid textarea{
  width:100%;resize:vertical;min-height:48px;
  background:var(--input);color:var(--text);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:8px 10px;font:inherit;font-size:13px;
}
.email-grid textarea:focus{outline:none;border-color:#3a4570;background:var(--input-focus)}
.email-grid code{font-size:11px;background:rgba(77,255,184,.1);padding:1px 5px;border-radius:4px}
.email-preview-wrap{margin-top:16px;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#f8f8f8}
.email-preview-box{background:#fff;color:#333;padding:24px;font-family:sans-serif;font-size:14px;max-height:300px;overflow-y:auto;margin:8px;border-radius:var(--radius-sm)}
.email-preview-box h2{color:#333;font-size:18px;margin:0 0 12px}
.email-preview-box p{margin:0 0 10px;line-height:1.6}
.email-preview-box table{border-collapse:collapse;margin:16px 0}
.email-preview-box td{padding:8px 16px}
.email-preview-box a{color:#4a90d9}

/* ---- Settings modal ---- */
.settings-section{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.settings-section h4{font-size:14px;font-weight:600;margin:0 0 10px;color:var(--ok)}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.settings-status{padding:10px 14px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;margin-bottom:12px;border:1px solid transparent}
.settings-status.ok{background:rgba(77,255,184,.15);color:var(--ok);border-color:rgba(77,255,184,.3)}
.settings-status.err{background:rgba(255,107,107,.15);color:var(--accent);border-color:rgba(255,107,107,.3)}
@keyframes settingsPulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}
@media(max-width:600px){.settings-grid{grid-template-columns:1fr}}

/* Token insert bar */
.token-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.token-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:6px 10px;border-radius:6px;cursor:pointer;
  border:1px solid rgba(74,108,255,.25);background:rgba(74,108,255,.08);
  transition:all .15s;font-family:inherit;
}
.token-btn:hover{background:rgba(74,108,255,.18);border-color:rgba(74,108,255,.5)}
.token-btn:active{transform:scale(.96)}
.token-btn .token-name{font-size:12px;font-weight:600;color:var(--ok,#4a6cff);font-family:monospace}
.token-btn .token-desc{font-size:9px;color:var(--muted,#888);line-height:1.2}