:root{
  --bg: #0e0d0b;
  --bg-2: #17140f;
  --bg-3: #1e1a13;
  --case: #1c1a16;
  --case-edge: #2a251c;
  --led: #39c5ff;
  --ink: #efe8da;
  --ink-soft: #a89d89;
  --rule: rgba(233,226,210,0.12);
  --good: #7fbf8f;
  --bad: #e2725b;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--bg);
  color: var(--ink);
  font-family: "Space Grotesk", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height:100vh;
  background-image: radial-gradient(ellipse 900px 500px at 50% -10%, rgba(57,197,255,0.06), transparent 60%);
}

.app{ max-width: 980px; margin: 0 auto; padding: 40px 24px 90px; }

nav.top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 30px; flex-wrap:wrap; gap:14px; }
nav.top h1{ font-size: 22px; margin:0; font-weight:700; }
.tabs{ display:flex; background: var(--bg-2); border:1px solid var(--rule); border-radius:999px; padding:3px; gap:2px; }
.tabs button{ font-family:"Space Grotesk"; font-size:13.5px; font-weight:500; border:none; background:transparent; color:var(--ink-soft); padding:8px 18px; border-radius:999px; cursor:pointer; transition: all .15s; }
.tabs button.active{ background: var(--led); color:#04121a; }

section{ display:none; }
section.active{ display:block; }

.config-section-sub{ font-size:12.5px; color: var(--ink-soft); max-width: 62ch; line-height:1.6; }
.config-section-title{ font-size:14px; font-weight:600; margin: 0 0 14px; }

/* ---- device chrome ---- */
.device-stage{ display:flex; flex-direction:column; align-items:center; }
.device{
  position:relative;
  background: linear-gradient(180deg, var(--case), var(--case-edge));
  border-radius: 14px;
  padding: 20px 20px 24px;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.55), 0 2px 0 rgba(255,255,255,0.03) inset, 0 0 0 1px rgba(0,0,0,0.4);
  width: 100%;
}
.device.mini{ max-width: 560px; }
.device.widescreen{ max-width: 860px; }
.screw{ position:absolute; width:7px; height:7px; border-radius:50%; background: radial-gradient(circle at 35% 35%, #4a4238, #14120e); box-shadow: 0 1px 1px rgba(0,0,0,0.6); }
.screw.tl{ top:9px; left:9px; } .screw.tr{ top:9px; right:9px; } .screw.bl{ bottom:9px; left:9px; } .screw.br{ bottom:9px; right:9px; }

.matrix{
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.03), transparent 60%), #050403;
  border-radius: 6px; padding: 18px 18px 14px; position:relative; overflow:hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5) inset, 0 10px 22px -14px rgba(0,0,0,0.7) inset;
  min-height: 150px;
}
.matrix::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.62) 0.55px, transparent 0.9px);
  background-size: 4px 4px; pointer-events:none; opacity:0.9; z-index:2;
}
.matrix::after{ content:""; position:absolute; inset:0; background: linear-gradient(rgba(0,0,0,0) 60%, rgba(0,0,0,0.35)); pointer-events:none; z-index:3; }

/* ---- panel content, modeled on the reference photo ---- */
.panel-body{ position:relative; font-family:"VT323", monospace; }
.row-main{ display:flex; gap:14px; align-items:flex-start; }
.logo-tile{
  flex: 0 0 62px; width:62px; height:62px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-family:"Space Grotesk", sans-serif; font-weight:700; font-size:18px; color:#fff;
  letter-spacing:0.02em; overflow:hidden; position:relative;
  /* sits above .matrix::before/::after (z-index 2/3) -- the logo PNG is already a
     baked-in 32x32 LED-dot render, so it must not get the panel's own dot-overlay
     + darkening gradient stacked on top of it a second time. */
  z-index:4;
}
.logo-tile svg{ width:60%; height:60%; opacity:0.9; }
.logo-tile .logo-img{
  width:100%; height:100%; object-fit:contain; display:block;
  /* the source PNG is pre-pixelated at 320x320 (32 cells x 10px); scale it down
     without smoothing so the LED dots stay crisp and don't blur/blend together */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.logo-tile .logo-fallback{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.logo-tile .logo-fallback svg{ width:60%; height:60%; opacity:0.9; }
.info-lines{ flex:1; min-width:0; line-height:1.12; padding-top:2px; }
.info-lines .l1{ font-size:32px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.info-lines .l2{ font-size:26px; opacity:0.92; }
.info-lines .l3{ font-size:24px; opacity:0.8; }
.row-metrics{ margin-top: 10px; font-size: 22px; line-height:1.35; }
.row-metrics div{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.panel-empty{ font-size:20px; opacity:0.55; text-align:center; padding:34px 0 22px; }

/* ---- status line ---- */
.status-line{ display:flex; align-items:center; gap:8px; justify-content:center; margin-top: 14px; font-family:"IBM Plex Mono", monospace; font-size: 11.5px; color: var(--ink-soft); }
.dot{ width:7px; height:7px; border-radius:50%; background: var(--ink-soft); }
.dot.live{ background: var(--good); box-shadow: 0 0 6px var(--good); }
.dot.demo{ background: var(--led); box-shadow: 0 0 6px var(--led); }
.dot.err{ background: var(--bad); box-shadow: 0 0 6px var(--bad); }

/* ---- configure form ---- */
.config-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 26px; }
@media (max-width: 760px){ .config-grid{ grid-template-columns: 1fr; } }
.field-group{ margin-bottom: 22px; }
.field-group label.title{ display:block; font-size: 12.5px; font-weight:600; margin-bottom: 8px; color: var(--ink); }
.field-group .hint{ font-size: 11.5px; color: var(--ink-soft); margin-top:6px; line-height:1.5; }
.fallback-row{ display:flex; gap:8px; }
.fallback-row input{ min-width:0; }
.field-group input[type="text"], .field-group input[type="url"]{
  width:100%; font-family:"IBM Plex Mono", monospace; font-size:13px;
  padding: 9px 12px; border-radius:8px; border:1px solid var(--rule);
  background: var(--bg-2); color: var(--ink);
}
.swatches{ display:flex; gap:8px; }
.swatch{ width:34px; height:34px; border-radius:8px; cursor:pointer; border:2px solid transparent; }
.swatch.selected{ border-color: var(--ink); }
.seg{ display:flex; background: var(--bg-2); border:1px solid var(--rule); border-radius:8px; padding:3px; }
.seg button{ flex:1; font-family:"Space Grotesk"; font-size:12.5px; font-weight:500; border:none; background:transparent; color: var(--ink-soft); padding:8px 10px; border-radius:6px; cursor:pointer; }
.seg button.active{ background: var(--bg-3); color: var(--ink); }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-family:"IBM Plex Mono", monospace; font-size:11.5px; padding:6px 12px; border-radius:999px; border:1px solid var(--rule); color: var(--ink-soft); cursor:pointer; user-select:none; transition: all .15s; }
.chip.on{ color: var(--led); border-color: var(--led); background: rgba(57,197,255,0.1); }
.slider-row{ display:flex; align-items:center; gap:12px; }
.slider-row input[type="range"]{ flex:1; }
.slider-row .val{ font-family:"IBM Plex Mono", monospace; font-size:12.5px; color: var(--ink-soft); width:52px; text-align:right; }

.btn{ font-family:"Space Grotesk"; font-size:13.5px; font-weight:500; border:1px solid var(--rule); background: transparent; color: var(--ink); padding:10px 18px; border-radius:8px; cursor:pointer; }
.btn:hover{ border-color: var(--led); color: var(--led); }
.btn.primary{ background: var(--led); color:#04121a; border-color:var(--led); }
.btn.primary:hover{ opacity:0.9; color:#04121a; }
.btn-row{ display:flex; gap:10px; margin-top: 8px; flex-wrap:wrap; }
.note{ font-size: 12px; color: var(--ink-soft); line-height:1.6; margin-top:14px; border-left: 2px solid var(--rule); padding-left: 12px; }

/* ---- fullscreen display page ---- */
section#tabDisplay.active{
  display:flex; align-items:center; justify-content:center;
  position:fixed; inset:0; z-index:100;
  background: var(--bg);
  background-image: radial-gradient(ellipse 1200px 700px at 50% -10%, rgba(57,197,255,0.06), transparent 60%);
  padding: 4vh 4vw;
}
.display-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; gap: 2.4vh; }
.display-wrap .device{ width: 100%; }
.device.fullscreen{ max-width: min(94vw, 1900px); }
.device.fullscreen.widescreen{ max-width: min(96vw, 2200px); }

/* scale the panel typography with viewport size instead of a fixed px size */
.device.fullscreen .matrix{ padding: 4vw 4vw 3vw; min-height: 44vh; }
.device.fullscreen .row-main{ gap: 2.4vw; }
.device.fullscreen .logo-tile{
  flex-basis: clamp(62px, 9vw, 170px); width: clamp(62px, 9vw, 170px); height: clamp(62px, 9vw, 170px);
  border-radius: clamp(10px, 1.2vw, 22px); font-size: clamp(18px, 2.6vw, 48px);
}
.device.fullscreen .info-lines .l1{ font-size: clamp(30px, 5.4vw, 108px); }
.device.fullscreen .info-lines .l2{ font-size: clamp(24px, 4.2vw, 84px); }
.device.fullscreen .info-lines .l3{ font-size: clamp(22px, 3.6vw, 72px); }
.device.fullscreen .row-metrics{ font-size: clamp(18px, 2.9vw, 56px); margin-top: 2vh; }
.device.fullscreen .row-metrics div{ margin-bottom: 0.3em; }
.device.fullscreen .panel-empty{ font-size: clamp(20px, 3vw, 44px); padding: 8vh 0; }
#tabDisplay.active .status-line{ font-size: clamp(11.5px, 1vw, 18px); }

.exit-fullscreen{
  position:absolute; top:22px; right:26px; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--rule); background: var(--bg-2); color: var(--ink-soft);
  font-size:20px; line-height:1; cursor:pointer; opacity:0.3; transition: opacity .15s, color .15s, border-color .15s;
  z-index:101;
}
.exit-fullscreen:hover{ opacity:1; color: var(--led); border-color: var(--led); }

/* ---- standalone display page (display.html) -- just the panel, fullscreen ---- */
html.standalone, body.standalone{ height:100%; }
body.standalone{
  display:flex; align-items:center; justify-content:center;
  width:100vw; height:100vh; overflow:hidden;
  padding: 3vh 3vw;
  background: var(--bg);
  background-image: radial-gradient(ellipse 1200px 700px at 50% -10%, rgba(57,197,255,0.06), transparent 60%);
}
body.standalone .matrix{
  width:100%; max-width: min(94vw, 1900px);
  display:flex; flex-direction:column; justify-content:center;
  padding: 4vw 4vw 3vw; min-height: 44vh;
}
body.standalone.widescreen .matrix{ max-width: min(96vw, 2200px); }
body.standalone .row-main{ gap: 2.4vw; }
body.standalone .logo-tile{
  flex-basis: clamp(62px, 9vw, 170px); width: clamp(62px, 9vw, 170px); height: clamp(62px, 9vw, 170px);
  border-radius: clamp(10px, 1.2vw, 22px); font-size: clamp(18px, 2.6vw, 48px);
}
body.standalone .info-lines .l1{ font-size: clamp(30px, 5.4vw, 108px); }
body.standalone .info-lines .l2{ font-size: clamp(24px, 4.2vw, 84px); }
body.standalone .info-lines .l3{ font-size: clamp(22px, 3.6vw, 72px); }
body.standalone .row-metrics{ font-size: clamp(18px, 2.9vw, 56px); margin-top: 2vh; }
body.standalone .row-metrics div{ margin-bottom: 0.3em; }
body.standalone .panel-empty{ font-size: clamp(20px, 3vw, 44px); padding: 8vh 0; }