:root{
  --nl-bg:#060913; --nl-panel:rgba(13,19,32,.74); --nl-gold:#c8a97e; --nl-gold-2:#f1dcc0; --nl-red:#c41e24;
  --nl-line:rgba(200,169,126,.16); --nl-line-strong:rgba(200,169,126,.32);
  --nl-ease:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth;background:#060913}
body{
  background:
    radial-gradient(circle at 15% 14%, rgba(200,169,126,.12), transparent 26rem),
    radial-gradient(circle at 85% 18%, rgba(196,30,36,.08), transparent 24rem),
    linear-gradient(180deg,#0b1120 0%,#060913 58%,#04070f 100%);
  overflow-x:hidden;
}
body.nl-ready::before{content:"";position:fixed;inset:-15%;z-index:-3;pointer-events:none;background:radial-gradient(circle at var(--nl-mx,50%) var(--nl-my,25%),rgba(200,169,126,.12),transparent 17rem);filter:blur(8px);animation:nlAura 10s ease-in-out infinite alternate}
.nl-stage{position:fixed;inset:0;z-index:-4;pointer-events:none;overflow:hidden}.nl-stage:before{content:"";position:absolute;left:-8%;right:-8%;bottom:-12vh;height:46vh;opacity:.18;background-image:linear-gradient(rgba(200,169,126,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(200,169,126,.12) 1px,transparent 1px);background-size:64px 64px;transform-origin:center bottom;transform:perspective(1200px) rotateX(78deg);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 72%,transparent)}
.nl-scrollbar{position:fixed;top:0;left:0;width:0;height:3px;z-index:999999;background:linear-gradient(90deg,var(--nl-gold),var(--nl-gold-2),var(--nl-red));box-shadow:0 0 18px rgba(200,169,126,.55);pointer-events:none}
[data-nl-reveal]{opacity:0;transform:translateY(22px) scale(.99);filter:blur(7px);transition:opacity .7s var(--nl-ease),transform .7s var(--nl-ease),filter .7s var(--nl-ease)}[data-nl-reveal].nl-visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.product-card,[data-slot="card"],.card,article,.panel,.stat-card,.login-card{position:relative;transform-style:preserve-3d;will-change:transform;backdrop-filter:blur(14px) saturate(1.04);border-color:var(--nl-line)!important;box-shadow:0 18px 48px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.025)}
.product-card:before,[data-slot="card"]:before,.card:before,article:before,.panel:before,.stat-card:before,.login-card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 28%,transparent 68%,rgba(200,169,126,.10)),radial-gradient(circle at var(--nl-sx,50%) var(--nl-sy,50%),rgba(200,169,126,.15),transparent 34%);opacity:.75}.product-card>* ,[data-slot="card"]>* ,.card>* ,article>* ,.panel>* ,.stat-card>* ,.login-card>*{position:relative;z-index:1}.product-card:hover,[data-slot="card"]:hover,.card:hover,article:hover,.panel:hover,.stat-card:hover,.login-card:hover{box-shadow:0 28px 75px rgba(0,0,0,.36),0 0 34px rgba(200,169,126,.13),0 0 0 1px rgba(200,169,126,.08)}
.nl-spotlight{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(200,169,126,.17),transparent 28%);opacity:0;transition:opacity .22s ease}.product-card:hover .nl-spotlight,.card:hover .nl-spotlight,article:hover .nl-spotlight,.panel:hover .nl-spotlight,.stat-card:hover .nl-spotlight,.login-card:hover .nl-spotlight{opacity:1}
[data-nl-depth="1"]{transform:translateZ(10px)}[data-nl-depth="2"]{transform:translateZ(18px)}[data-nl-depth="3"]{transform:translateZ(26px)}
img[src*="hero"],img[src*="product"],.hero-vial-img{will-change:transform,filter;animation:nlFloat 6.5s ease-in-out infinite;filter:drop-shadow(0 22px 42px rgba(0,0,0,.28))}.nl-hero-3d{position:relative;transform-style:preserve-3d;transition:transform .16s ease-out}.nl-hero-3d:before{content:"";position:absolute;inset:-6%;height:72%;border-radius:30px;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(200,169,126,.08),transparent 62%);filter:blur(12px);z-index:-1}
button,.btn,a[href]{transition:transform .2s var(--nl-ease),box-shadow .2s var(--nl-ease),border-color .2s ease;will-change:transform}button:hover,.btn:hover,a[href]:hover{box-shadow:0 12px 28px rgba(0,0,0,.22),0 0 22px rgba(200,169,126,.12)}button,.btn{position:relative;overflow:hidden}button:after,.btn:after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),rgba(255,255,255,.24),transparent 28%);opacity:0;transition:opacity .22s ease}button:hover:after,.btn:hover:after{opacity:1}.nl-ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.24);transform:translate(-50%,-50%) scale(0);animation:nlRipple .72s ease-out}
input,select,textarea{transition:border-color .2s ease,box-shadow .2s ease;background:rgba(8,13,24,.9)!important}input:focus,select:focus,textarea:focus{outline:none!important;border-color:rgba(200,169,126,.48)!important;box-shadow:0 0 0 4px rgba(200,169,126,.08),0 0 28px rgba(200,169,126,.10)!important}
table tr{transition:background .2s ease,transform .2s var(--nl-ease)}table tr:hover{background:rgba(200,169,126,.045);transform:translateX(3px)}
/* stabile Admin-Animationen: kein globaler [class*=admin]-Hack mehr */
body.nl-admin-mode{background:radial-gradient(circle at 16% 12%,rgba(200,169,126,.13),transparent 24rem),radial-gradient(circle at 82% 20%,rgba(196,30,36,.10),transparent 22rem),linear-gradient(180deg,#0a101d,#050811)}
body.nl-admin-mode .wrap,body.nl-admin-mode main{position:relative}body.nl-admin-mode .top,body.nl-admin-mode .card,body.nl-admin-mode .panel,body.nl-admin-mode .stat-card,body.nl-admin-mode .login-card{animation:nlAdminIn .65s var(--nl-ease) both}body.nl-admin-mode .badge,body.nl-admin-mode h1{animation:nlAdminIn .55s var(--nl-ease) both}body.nl-admin-mode tbody tr{animation:nlRowIn .55s var(--nl-ease) both}body.nl-admin-mode .btn:hover,body.nl-admin-mode button:hover{border-color:var(--nl-line-strong)!important}
@keyframes nlAura{to{transform:scale(1.03) translateY(-8px)}}@keyframes nlFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes nlRipple{to{transform:translate(-50%,-50%) scale(4);opacity:0}}@keyframes nlAdminIn{0%{opacity:0;transform:translateY(18px) scale(.985);filter:blur(6px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes nlRowIn{0%{opacity:0;transform:translateX(-10px)}100%{opacity:1;transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.nl-stage,.nl-scrollbar{display:none!important}}@media (max-width:860px){.nl-stage:before{display:none}.product-card,.card,article,.panel,.stat-card,.login-card{transform:none!important}}


/* v7 — rounded product imagery */
.product-card,
[data-slot="card"],
.card,
article { overflow: hidden; }

.product-card img,
[data-slot="card"] img,
.card img,
article img,
img[src*="product-"] {
  border-radius: 22px !important;
  overflow: hidden;
  clip-path: inset(0 round 22px);
}

.product-card picture,
[data-slot="card"] picture,
.card picture,
article picture {
  display:block;
  border-radius:22px;
  overflow:hidden;
}


/* v8 — animated logo drip + premium rounded media */
.nl-logo-drip,
.nl-logo-drip-anchor,
.nl-logo-drip-shell {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.nl-logo-drip img,
img.nl-logo-drip {
  position: relative;
  z-index: 2;
  transform-origin: 50% 18%;
  animation: nlLogoFloat 3.8s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18)) drop-shadow(0 0 18px rgba(200,169,126,.12));
}

.nl-logo-drip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 62%;
  width: 2px;
  height: 0;
  background: linear-gradient(180deg, rgba(200,169,126,.85), rgba(200,169,126,.22));
  border-radius: 999px;
  transform: translateX(-50%);
  opacity: 0;
  animation: nlLogoNeedleDrip 2.6s ease-in-out infinite;
  z-index: 1;
}

.nl-logo-drip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 62%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.92), rgba(200,169,126,.95) 38%, rgba(200,169,126,.32) 72%, rgba(200,169,126,0) 73%);
  box-shadow: 0 0 12px rgba(200,169,126,.35);
  transform: translate(-50%, 0) scale(.55);
  opacity: 0;
  animation: nlLogoDropFall 2.6s ease-in-out infinite;
  z-index: 1;
}

.nl-logo-drip-shell::before {
  content: "";
  position: absolute;
  inset: -6px -10px;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 50%, rgba(200,169,126,.08), transparent 68%);
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}

@keyframes nlLogoFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(.4deg); }
}

@keyframes nlLogoNeedleDrip {
  0%, 16% { height: 0; opacity: 0; }
  20% { height: 10px; opacity: .75; }
  36% { height: 18px; opacity: .95; }
  44% { height: 6px; opacity: .55; }
  100% { height: 0; opacity: 0; }
}

@keyframes nlLogoDropFall {
  0%, 22% { opacity: 0; transform: translate(-50%, 0) scale(.45); }
  26% { opacity: 1; transform: translate(-50%, 10px) scale(.72); }
  38% { opacity: 1; transform: translate(-50%, 26px) scale(.92); }
  52% { opacity: .72; transform: translate(-50%, 50px) scale(1.02); }
  60% { opacity: 0; transform: translate(-50%, 66px) scale(.7); }
  100% { opacity: 0; transform: translate(-50%, 66px) scale(.65); }
}


/* v10 — extra stable premium fx */
.panel,.stat-card,.card,.login-card,.ph-page-card,.ph-modal-shell,.ph-modal-image-shell,.ph-info-card,.box{position:relative}
.panel::after,.stat-card::after,.card::after,.login-card::after,.ph-page-card::after,.ph-modal-shell::after,.ph-modal-image-shell::after,.ph-info-card::after,.box::after{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),rgba(200,169,126,.18),transparent);opacity:.55;pointer-events:none}
.badge,.admin-btn,.mini-btn,.btn{transform:translateZ(0)}
.badge:hover,.admin-btn:hover,.mini-btn:hover,.btn:hover{filter:saturate(1.06)}
.admin-top,.panel-head,.top{position:relative;overflow:hidden}
.admin-top::before,.panel-head::before,.top::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 18%,rgba(255,255,255,.05) 40%,transparent 62%);transform:translateX(-120%);animation:nlHeadSweep 9s ease-in-out infinite}
@keyframes nlHeadSweep{0%,76%,100%{transform:translateX(-120%)}84%{transform:translateX(120%)}}
.order-id,.money,.ph-info-value{letter-spacing:.01em}