:root {
    --bg:#0a0a0c; --panel:#131317; --border:#26262d; --silver:#c9cdd6;
    --brass:#b98d3e; --blue:#3b6bd6; --text:#e7e7ea; --muted:#9a9aa4; --green:#3fae5e; --red:#c04949;
  }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--bg); color:var(--text); font-family:'Inter',-apple-system,sans-serif; }
  a { color: var(--blue); }
  header { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:16px 4vw; border-bottom:1px solid var(--border); background:rgba(10,10,12,0.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  @media (max-width:760px) {
    header { flex-wrap:wrap; row-gap:10px; }
    nav { width:100%; display:flex; flex-wrap:wrap; justify-content:center; }
  }
  .wordmark { display:inline-flex; align-items:center; gap:9px; font-family:'Cinzel',serif; font-weight:700; letter-spacing:.08em; color:var(--silver); text-decoration:none; font-size:1.2rem; }
  .wordmark span { color: var(--brass); }
  .wholesale-tag { font-family:'Inter',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.13em; color:#171208; background:var(--brass); border-radius:4px; padding:4px 10px; margin-left:8px; text-transform:uppercase; vertical-align:middle; }
  .brand-banner { text-align:center; }
  .brand-banner-frame { position:relative; width:100%; }
  .brand-banner img { width:100%; height:auto; display:block; }
  /* The starburst "logo light": a soft breathing glow positioned at the
     star's actual location in bs-banner-opt.jpg (~49.6% across, ~78.3%
     down, measured from the source image so it lines up at any rendered
     width). mix-blend-mode:screen keeps pure-black overlay pixels a total
     no-op against the art beneath (screen(x,0)=x). */
  /* Shape-matched flare pulse: a soft ambient halo plus a small round core
     and thin horizontal/vertical/diagonal spikes laid directly over the
     artwork's own asterisk rays (measured from the source image). Kept
     dim enough (peak opacity well under 1, screen-blended) that the
     original rays remain visible through the glow rather than being
     washed out to solid white. */
  .bs-star-glow {
    position: absolute;
    left: 49.6%;
    top: 78.3%;
    width: 46%;
    height: 46%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: screen;
  }
  .bs-star-halo {
    position: absolute;
    left: 50%; top: 50%;
    width: 70%; height: 70%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(150,205,255,0.32) 0%, rgba(150,205,255,0.14) 35%, rgba(150,205,255,0) 68%);
    animation: bs-flare-pulse 4s infinite;
  }
  .bs-star-core {
    position: absolute;
    left: 50%; top: 50%;
    width: 15%; height: 15%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(235,248,255,0.65) 0%, rgba(150,205,255,0.35) 40%, rgba(150,205,255,0) 78%);
    animation: bs-flare-pulse 4s infinite;
  }
  .bs-star-spike {
    position: absolute;
    left: 50%; top: 50%;
    pointer-events: none;
    transform-origin: center;
  }
  .bs-star-spike.h {
    width: 100%; height: 3%;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, transparent 0%, rgba(150,205,255,.45) 32%, rgba(220,240,255,.68) 50%, rgba(150,205,255,.45) 68%, transparent 100%);
    animation: bs-flare-pulse-h 4s infinite;
  }
  .bs-star-spike.v {
    width: 3%; height: 100%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, transparent 0%, rgba(150,205,255,.45) 32%, rgba(220,240,255,.68) 50%, rgba(150,205,255,.45) 68%, transparent 100%);
    animation: bs-flare-pulse-v 4s infinite;
  }
  .bs-star-spike.d1 {
    width: 58%; height: 1.4%;
    background: linear-gradient(90deg, transparent 0%, rgba(150,205,255,.3) 34%, rgba(220,240,255,.5) 50%, rgba(150,205,255,.3) 66%, transparent 100%);
    animation: bs-flare-pulse-d1 4s infinite;
  }
  .bs-star-spike.d2 {
    width: 58%; height: 1.4%;
    background: linear-gradient(90deg, transparent 0%, rgba(150,205,255,.3) 34%, rgba(220,240,255,.5) 50%, rgba(150,205,255,.3) 66%, transparent 100%);
    animation: bs-flare-pulse-d2 4s infinite;
  }
  /* Shared pulse envelope: a quick brightening flash, then a SLOW decay
     back down to a near-invisible floor (opacity 0.1) - at that floor
     almost none of this overlay shows, leaving just the artwork's own
     original starlight and its base glow, exactly as it looks with no
     overlay at all. Every layer below (halo/core/spikes) uses this same
     timing envelope, only differing in which transform axis it scales, so
     they all flash and fade together. */
  @keyframes bs-flare-pulse {
    0%   { transform: translate(-50%, -50%) scale(0.85); opacity: 0.1; animation-timing-function: cubic-bezier(.3,0,.6,1); }
    12%  { transform: translate(-50%, -50%) scale(1.18); opacity: 1;   animation-timing-function: cubic-bezier(.22,1,.36,1); }
    100% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.1; }
  }
  @keyframes bs-flare-pulse-h {
    0%   { transform: translate(-50%, -50%) scaleX(0.82); opacity: 0.1; animation-timing-function: cubic-bezier(.3,0,.6,1); }
    12%  { transform: translate(-50%, -50%) scaleX(1.2);  opacity: 1;   animation-timing-function: cubic-bezier(.22,1,.36,1); }
    100% { transform: translate(-50%, -50%) scaleX(0.82); opacity: 0.1; }
  }
  @keyframes bs-flare-pulse-v {
    0%   { transform: translate(-50%, -50%) scaleY(0.82); opacity: 0.1; animation-timing-function: cubic-bezier(.3,0,.6,1); }
    12%  { transform: translate(-50%, -50%) scaleY(1.2);  opacity: 1;   animation-timing-function: cubic-bezier(.22,1,.36,1); }
    100% { transform: translate(-50%, -50%) scaleY(0.82); opacity: 0.1; }
  }
  @keyframes bs-flare-pulse-d1 {
    0%   { transform: translate(-50%, -50%) rotate(45deg) scaleX(0.85); opacity: 0.1; animation-timing-function: cubic-bezier(.3,0,.6,1); }
    12%  { transform: translate(-50%, -50%) rotate(45deg) scaleX(1.18); opacity: 1;   animation-timing-function: cubic-bezier(.22,1,.36,1); }
    100% { transform: translate(-50%, -50%) rotate(45deg) scaleX(0.85); opacity: 0.1; }
  }
  @keyframes bs-flare-pulse-d2 {
    0%   { transform: translate(-50%, -50%) rotate(-45deg) scaleX(0.85); opacity: 0.1; animation-timing-function: cubic-bezier(.3,0,.6,1); }
    12%  { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.18); opacity: 1;   animation-timing-function: cubic-bezier(.22,1,.36,1); }
    100% { transform: translate(-50%, -50%) rotate(-45deg) scaleX(0.85); opacity: 0.1; }
  }
  /* Lights that light up the actual "1"s and "0"s in the artwork's binary
     text, one digit after the next, giving the illusion of light traveling
     without any element actually moving. Character positions were measured
     directly from the source image (column-peak detection on the digit
     glyphs), so each light sits exactly on one digit and is smaller than
     it. Uses only the starburst's own pale blue-white color. Each digit is
     a separate, fixed dot that blinks briefly; staggering the delay by one
     row's step size means the previous digit is already dark by the time
     the next one lights, so exactly one is lit at a time per row. */
  .bs-digit-led {
    position: absolute;
    width: 0.5%;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    transform: translate(-50%, -50%);
    background: #9fd0ff;
    box-shadow: 0 0 1.5px #cfe9ff, 0 0 3px rgba(120,190,255,.85);
    opacity: 0;
    animation-name: bs-digit-blink;
    animation-timing-function: steps(1, jump-end);
    animation-iteration-count: infinite;
  }
  @keyframes bs-digit-blink {
    0%    { opacity: 1; }
    1.0%  { opacity: 0; }
    100%  { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .bs-star-halo, .bs-star-core, .bs-star-spike { animation: none !important; }
    .bs-digit-led { animation: none !important; }
    .beam-fade { animation: none !important; }
  }
  .beam-fade { width:260px; height:42px; margin:0 auto -42px; background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(148,205,255,.55), rgba(148,205,255,.22) 40%, rgba(10,10,12,0) 85%); pointer-events:none; position:relative; z-index:1; animation: bs-flare-pulse-opacity 4s infinite; }
  @keyframes bs-flare-pulse-opacity {
    0%   { opacity: 0.75; animation-timing-function: cubic-bezier(.3,0,.6,1); }
    12%  { opacity: 1;    animation-timing-function: cubic-bezier(.22,1,.36,1); }
    100% { opacity: 0.75; }
  }
  .brand-banner .banner-word { font-family:'Cinzel',serif; font-weight:700; font-size:clamp(1.3rem, 3.2vw, 1.9rem); letter-spacing:.18em; color:#fff; margin:16px 0 6px; }
  .brand-banner .banner-word span { color:var(--brass); }
  .brand-banner .banner-tag { font-family:'Inter',sans-serif; font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-bottom:30px; }
  main { max-width: 980px; margin: 0 auto; padding: 4vw; }
  .card { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:24px; margin-bottom:22px; }
  h1 { font-family:'Cinzel',serif; font-size:1.5rem; margin:0 0 4px; color:#fff; }
  h2 { font-size:1.1rem; color:#fff; margin:0 0 16px; }
  label { display:block; font-size:.82rem; color:var(--muted); margin-bottom:6px; }
  input { width:100%; background:#0d0d10; border:1px solid var(--border); border-radius:6px; color:var(--text); padding:10px 12px; font-size:.95rem; }
  button { background:var(--brass); color:#171208; border:none; border-radius:6px; padding:10px 18px; font-weight:600; cursor:pointer; }
  button.secondary { background:transparent; border:1px solid var(--border); color:var(--text); }
  .row { display:flex; gap:14px; }
  .row > div { flex:1; }
  table { width:100%; border-collapse: collapse; font-size:.92rem; }
  th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--border); }
  th { color:var(--muted); font-weight:500; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; }
  .stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:22px; }
  .stat { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:18px; }
  .stat .n { font-family:'Cinzel',serif; font-size:1.6rem; color:#fff; }
  .stat .l { color:var(--muted); font-size:.82rem; }
  .pill { padding: 3px 10px; border-radius: 999px; font-size:.78rem; }
  .pill.on { background:rgba(63,174,94,.15); color:var(--green); }
  .pill.off { background:rgba(154,154,164,.15); color:var(--muted); }
  #app-shell { display:none; }
  #login-shell { max-width: 380px; margin: 10vh auto; }
  .error { color:var(--red); font-size:.88rem; min-height: 1.2em; }
  .hint { color:var(--muted); font-size:.8rem; }
  input[type="checkbox"] { width:auto; }
  .qr-box { background:#fff; padding:12px; border-radius:8px; display:inline-block; margin:10px 0; }
  .qr-box img { display:block; width:180px; height:180px; }
  .secret-code { font-family:monospace; background:#0d0d10; border:1px solid var(--border); border-radius:6px; padding:8px 10px; font-size:.85rem; word-break:break-all; margin-bottom:10px; }
  .method-block { border:1px solid var(--border); border-radius:8px; padding:16px; margin-bottom:14px; }
  .method-block h3 { margin:0 0 8px; font-size:.95rem; color:#fff; }
  .method-block.done { border-color:var(--green); }