:root{
  /* Palette provided by user: warm orange and deep maroons */
  --p1: #F5AD18; /* bright orange */
  --p2: #9E1C60; /* magenta */
  --p3: #811844; /* deep magenta */
  --p4: #561530; /* deep maroon */
  --bg-base: #fff8f2;
  --grid-opacity: 0.06;
  --surface: rgba(255,255,255,0.96);
  --muted: #8b7b86;
  --card-glow: 0 10px 28px rgba(89,21,48,0.06);
  --barcode-height: 200px; /* default fixed barcode height */
  --export-width: 520px;
  --export-height: 200px;
}
*{box-sizing:border-box}
html,body{height:100%}
/* page background: subtle stars + grid overlay for a modern techy feel */
html,body{height:100%}
body{
  margin:0;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;
  color:#0b1220;
  /* structured premium background: base color + soft vignette + radial color accents + faint hatch */
  background-color: var(--bg-base);
  /* other gradient layers removed — grid will be applied via a fixed pseudo-element behind the app */
  background-image: none;
  background-attachment: fixed;
  min-height:100vh;
}

/* main grid placed behind content so it doesn't appear over panels */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url('grid.svg');
  background-repeat: repeat;
  background-size: 120px 120px;
  opacity: var(--grid-opacity);
  z-index: 0;
}

/* main tiled grid overlay placed via pseudo-element so it sits as the site backdrop
   and is visually independent of other gradient layers */
/* grid is applied directly on the body (tiled grid.svg) */

.app{
  min-height:100vh;
  display:flex;
  gap:22px;
  padding:34px;
  align-items:center;
  justify-content:center;
}

/* glassmorphism + decorative grid overlays on the main app wrapper */
.app{
  position:relative;
  border-radius:20px;
  padding:42px;
  background: transparent; /* let the page background show through around the cards */
  box-shadow: none;
  overflow:visible;
  z-index: 1; /* place app above body::before */
}
.app::before, .app::after{
  content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;mix-blend-mode:overlay;opacity:0.9;
}
.app::before{
  /* dot pattern overlay */
  background-image: radial-gradient(circle, rgba(86,21,48,0.06) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity:0.14;
}
.app::after{
  /* tilted diagonal lines for depth */
  background-image: repeating-linear-gradient(135deg, rgba(86,21,48,0.025) 0 2px, transparent 2px 20px);
  opacity:0.06;
}

/* headings use a cleaner display font */
.input-panel h1{ font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight:700; color: var(--p4)}

/* body rules already defined earlier (font set to JetBrains Mono) */
.panel{
  background: #ffffff;
  border-radius:14px;
  padding:22px;
  box-shadow: 0 18px 46px rgba(11,15,30,0.12), 0 2px 8px rgba(89,21,48,0.03) inset;
  border: 1px solid rgba(11,15,30,0.04);
  position: relative;
  z-index: 2;
}
.app{
  min-height:100vh;
  display:flex;
  gap:20px;
  padding:28px;
  align-items:center;
  justify-content:center;
}
.panel{
  padding:22px;
}

.input-panel{
  width:420px;
  max-width:92vw;
}
.input-panel h1{margin:0 0 10px 0;font-size:1.6rem;color:var(--bg-mid);letter-spacing:0.2px}
.input-panel label{display:block;margin-bottom:8px;color:var(--muted);font-size:0.95rem}
.input-panel input{
  width:100%;padding:14px 16px;border-radius:14px;border:1px solid rgba(12,18,30,0.06);font-size:1rem;margin-bottom:18px;background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,252,0.98));
  box-shadow:0 10px 30px rgba(16,24,40,0.04) inset;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace;
}
/* controller styles */
.controller{display:flex;flex-direction:column;gap:8px;margin-top:12px;margin-bottom:14px}
.ctrl-row{display:flex;gap:8px;align-items:center}
.controller label{font-size:0.85rem;color:var(--p4);margin-right:6px;min-width:44px}
.controller input[type=range]{width:160px}
.controller span{min-width:36px;text-align:center;font-family:'JetBrains Mono',monospace}

/* custom range styling: use palette color for filled track and thumb */
.controller input[type=range]{
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: linear-gradient(90deg, var(--p1) 50%, rgba(200,200,200,0.35) 50%);
  border-radius: 999px;
  outline: none;
}
.controller input[type=range]::-webkit-slider-runnable-track{ height:8px; border-radius:999px; }
.controller input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--p2); border:2px solid white; box-shadow:0 4px 10px rgba(0,0,0,0.12); margin-top:-4px }
.controller input[type=range]::-moz-range-track{ height:8px; border-radius:999px; background:transparent }
.controller input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--p2); border:2px solid white; box-shadow:0 4px 10px rgba(0,0,0,0.12) }
.controller input[type=range][disabled]{ opacity:0.6 }

/* add spacing between controller area and main control buttons */
.controls{margin-top:10px}
.controls{display:flex;gap:12px;align-items:center}
.icon-btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid rgba(12,18,30,0.06);background:linear-gradient(180deg,#fff,#fbfdff);color:var(--bg-mid);cursor:pointer}
.icon-btn svg{opacity:0.9}
.file-btn{padding:10px 14px;border-radius:12px;border:0;background:linear-gradient(90deg,var(--p2),var(--p1));color:white;cursor:pointer;font-weight:700}
.file-btn[disabled]{opacity:0.45;cursor:not-allowed}
.file-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(124,58,237,0.12)}
.icon-btn:hover{transform:translateY(-1px)}
.btn-label{font-weight:600}
.hint{color:var(--muted);font-size:0.88rem;margin-top:12px}
/* show hint in mono for a consistent code-like feel */
.hint{font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace}

/* hidden state: animated collapse so preview panel can be revealed smoothly */
.hidden{
  max-height:0 !important;
  opacity:0 !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
  pointer-events:none !important;
}

.preview-panel{width:560px;max-width:92vw;display:flex;align-items:center;justify-content:center;min-height:360px}
.preview{width:100%;display:flex;align-items:center;justify-content:center}
.preview svg{width:100%;max-width:520px;height:var(--barcode-height);display:block}

/* preview card uses a subtle grid background so the barcode sits on a textured surface */
.preview-panel{
  padding:18px;border-radius:16px;background:#ffffff;
  border:1px solid rgba(11,15,30,0.04);
  box-shadow:0 20px 48px rgba(11,15,30,0.12);
  transition: max-height 420ms cubic-bezier(.2,.9,.2,1), opacity 240ms ease, transform 300ms ease;
  max-height: 900px;
  opacity: 1;
  transform: translateY(8px) scale(0.995);
}
.preview-panel::before{
  content:"";
  position:absolute;pointer-events:none;inset:0;border-radius:16px;
  /* subtle dots pattern inside preview */
  background-image: radial-gradient(circle, rgba(86,21,48,0.045) 1px, transparent 1px);
  background-size: 12px 12px;
  opacity:0.25;
}

/* previously used panel glow removed (we'll add a more controlled border animation on .app and body) */

/* animated moving border around the entire viewport */
/* celebratory bursts: periodic multi-color radial bursts across the viewport */
body::after{
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* three radial burst layers using the palette; positions will animate so bursts come from all around */
  background-image:
    radial-gradient(circle, rgba(245,173,24,0.95) 0%, rgba(245,173,24,0.6) 12%, transparent 30%),
    radial-gradient(circle, rgba(158,28,96,0.95) 0%, rgba(158,28,96,0.5) 12%, transparent 30%),
    radial-gradient(circle, rgba(129,24,68,0.95) 0%, rgba(129,24,68,0.45) 12%, transparent 30%);
  background-repeat: no-repeat;
  /* initial very small sizes (they expand during keyframes) */
  background-size: 0px 0px, 0px 0px, 0px 0px;
  background-position: 50% 50%, 50% 50%, 50% 50%;
  opacity: 0.0;
  filter: blur(6px);
  /* animation only runs when page/body has .celebrate class */
}

/* run the celebration burst only when explicitly triggered */
body.celebrate::after{
  opacity: 1;
  animation: celebrate-burst 1100ms ease-out 1;
}

/* respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  body.celebrate::after{ animation: none !important; opacity: 0 !important; }
}

@keyframes celebrate-burst{
  0%{
    background-size: 0px 0px, 0px 0px, 0px 0px;
    background-position: 10% 10%, 90% 90%, 50% 5%;
    opacity: 0;
  }
  12%{
    background-size: 120px 120px, 140px 140px, 100px 100px;
    background-position: 20% 20%, 80% 80%, 60% 10%;
    opacity: 0.9;
  }
  30%{
    background-size: 220px 220px, 260px 260px, 180px 180px;
    background-position: 30% 60%, 70% 40%, 40% 20%;
    opacity: 0.6;
  }
  50%{
    background-size: 420px 420px, 460px 460px, 360px 360px;
    background-position: 50% 30%, 30% 80%, 80% 20%;
    opacity: 0.35;
  }
  75%{
    background-size: 200px 200px, 240px 240px, 160px 160px;
    background-position: 70% 20%, 20% 70%, 90% 50%;
    opacity: 0.18;
  }
  100%{
    background-size: 0px 0px, 0px 0px, 0px 0px;
    background-position: 50% 50%, 50% 50%, 50% 50%;
    opacity: 0;
  }
}

/* revealed state: scale+fade entrance */
.preview-panel.revealed{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ensure preview-panel positioned relative for ::before */
.preview-panel{position:relative;overflow:hidden}

/* toast styles */
#toast-container{
  position:fixed;right:18px;bottom:20px;z-index:10000;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{
  pointer-events:auto;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:linear-gradient(90deg,var(--p4),var(--p2));color:white;box-shadow:0 8px 30px rgba(11,15,30,0.18);font-weight:600}
.toast.success{background:linear-gradient(90deg,var(--p3),var(--p2))}
.toast.error{background:linear-gradient(90deg,#333,rgba(0,0,0,0.8))}
.toast.fade-out{opacity:0;transform:translateY(8px) scale(0.98);transition:opacity 320ms, transform 320ms}

/* center-mode: while no barcode generated keep input centered and hide preview area fully */
.app.center-mode{
  align-items:center;
  justify-content:center;
}

/* GitHub link chip in the top-right */
.github-link{
  position:fixed;top:18px;right:18px;z-index:10001;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,var(--p2),var(--p3));color:white;text-decoration:none;font-weight:700;box-shadow:0 8px 30px rgba(11,15,30,0.18);transform:translateZ(0);
}
.github-link svg{opacity:0.95}
.github-link .github-label{font-family:'Poppins',sans-serif}
.github-link:hover{transform:translateY(-3px);box-shadow:0 12px 38px rgba(11,15,30,0.22)}

@media (max-width:600px){
  .github-link{top:12px;right:12px;padding:6px 10px;font-size:0.95rem}
}
.app.center-mode .preview-panel{display:none !important}

/* toast icon */
.toast .toast-icon{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center}

/* subtle resize */
.preview-panel .card-wrap{padding:18px;border-radius:12px;background:linear-gradient(180deg,#fff,#fbfdfe);box-shadow:0 6px 18px rgba(2,6,23,0.04)}

/* Responsive layout: on wide screens show input left + preview right; on small screens stack preview above input */
@media (min-width:900px){
  .app{flex-direction:row}
  .input-panel{order:1}
  .preview-panel{order:2}
}

@media (max-width:899px){
  .app{flex-direction:column-reverse;padding:16px}
  .input-panel{width:100%}
  .preview-panel{width:100%;min-height:200px}
  .preview svg{max-width:360px}
}