/* Neon theme – simplified from previous patch */
:root {
  --text: #3c3c3c;
  --accent: #FFEF07;
  --bg: #000000;
  --white: #FFFFFF;
  --muted: #1a1a1a;
  --error: #ff4757;
  --success: #2ed573;
}
* { box-sizing: border-box; margin:0; padding:0; }
body.neon-body { font-family: 'Montserrat', Arial, sans-serif; background: var(--bg); color: var(--white); min-height: 100vh; }
.global-bg {
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(255,239,7,0.08), transparent 40%),
    radial-gradient(900px 600px at 110% 10%, rgba(255,255,255,0.06), transparent 50%),
    radial-gradient(800px 600px at 50% 120%, rgba(255,239,7,0.12), transparent 40%),
    linear-gradient(135deg, #0b0b0b, #111);
  animation: bgMove 24s ease-in-out infinite alternate;
}
@keyframes bgMove {0%{transform:translate3d(0,0,0) scale(1);}100%{transform:translate3d(0,-20px,0) scale(1.02);}}
.container{max-width:1100px;margin:2rem auto;padding:0 1rem;}
.center{min-height:calc(100vh - 80px);display:grid;place-items:center;padding:2rem 1rem;}
.app-header,.app-footer{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:rgba(26,26,26,.6);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.08);}
.app-footer{border-top:1px solid rgba(255,255,255,.08);margin-top:2rem;justify-content:center;}
/*
 * Logo container: only sets size and margin. We avoid applying any glow or color here –
 * instead, the glow and animations are attached directly to the image so that the
 * effects follow the logo's alpha shape (using drop-shadow). A flex layout centers
 * the image within the container.
 */
/*
 * The logo container defines only the size and spacing. A slightly larger size (32px) improves
 * visibility of tall logo images (e.g. bottles). The glow and animations remain on the image itself.
 */
.logo-pulse,
.logo-spin {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* no background or box-shadow here – the glow is applied to the image via filter */
}

/* Logo image: fill its container and scale proportionally. The drop-shadow filter creates
 * a glowing effect that follows the shape of the PNG (the transparent parts are ignored).
 */
.logo-pulse .logo-img,
.logo-spin .logo-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    /* Inherit no border-radius so that the image shape is preserved */
}

/* Animations and glow applied directly to the image */
.logo-pulse .logo-img {
    animation: pulse 2.4s infinite ease-in-out;
    /* Slightly larger shadow radii to suit the bigger container */
    filter: drop-shadow(0 0 16px var(--accent)) drop-shadow(0 0 32px rgba(255, 239, 7, .6));
}
.logo-spin .logo-img {
    animation: spin 3.2s linear infinite;
    /* Slightly larger shadow radii to suit the bigger container */
    filter: drop-shadow(0 0 16px var(--accent)) drop-shadow(0 0 32px rgba(255, 239, 7, .6));
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.15); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.card{background:rgba(26,26,26,.6);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:1.2rem 1.2rem 1.4rem;margin-bottom:1rem;}
.card.neon{border-color:rgba(255,239,7,.5);box-shadow:0 0 24px rgba(255,239,7,.1) inset;}
.rise{animation:rise .6s ease;}@keyframes rise{from{transform:translateY(10px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.grid{display:grid;gap:1rem;}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;}
@media (max-width:860px){.grid-3{grid-template-columns:1fr;}}
.form{display:grid;gap:1rem;}
.form label{display:grid;gap:.4rem;font-weight:600;color:var(--white);}  
.form input,.form select{padding:.8rem 1rem;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--white);outline:none;transition:border .2s ease, transform .08s ease;}
.form input:focus,.form select:focus{border-color:var(--accent);transform:translateY(-1px);}
button,.btn-primary,.btn-outline,.btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;padding:.7rem 1.1rem;border-radius:999px;font-weight:800;letter-spacing:.3px;transition:transform .15s ease, filter .15s ease;}
.btn-primary{background:var(--accent);color:var(--bg);box-shadow:0 6px 16px rgba(255,239,7,.2);} 
.btn-outline{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.4);}
.btn-danger{background:#ff3860;color:#fff;}
button:hover,.btn-primary:hover,.btn-outline:hover,.btn-danger:hover{transform:translateY(-1px);filter:brightness(1.05);}
.alert{border-radius:14px;padding:.8rem 1rem;margin-bottom:1rem;}
.alert.error{background:rgba(255,56,96,.13);border:1px solid rgba(255,56,96,.4);}
.alert.success{background:rgba(46,213,115,.12);border:1px solid rgba(46,213,115,.4);}
.table{width:100%;display:grid;gap:8px;}
.thead,.trow{display:grid;grid-template-columns:60px 1fr 1fr 1.2fr 120px 90px 1.4fr;gap:8px;align-items:center;}
.thead{font-weight:800;color:var(--accent);}
.trow{background:rgba(255,255,255,.04);padding:.6rem;border-radius:12px;}
a{color:var(--accent);text-decoration:none;position:relative;}
a::after{content:'';position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--accent);transition:width .25s ease;}
a:hover::after{width:100%;}