:root{
  --bg:#0b1220;
  --panel:#121a2c;
  --panel-2:#0f172a;
  --text:#e7edf7;
  --muted:#a7b2c4;
  --primary:#7c5cff;
  --primary-2:#5ad7ff;
  --danger:#ff5c7a;
  --border:rgba(255,255,255,.08);
  --shadow:0 18px 50px rgba(0,0,0,.4);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{
  background:var(--bg);
}
body{
  margin:0;
  background:transparent;
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.45;
  min-height:100vh;
  position:relative;
  z-index:0;
  display:flex;
  flex-direction:column;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  /* Aurora Mesh Gradients */
  background:
    radial-gradient(circle at 20% 20%, rgba(124,92,255,.3), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(90,215,255,.2), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(124,92,255,.15), transparent 60%),
    var(--bg);
  background-size: 200% 200%;
  animation: meshFloat 10s ease-in-out infinite alternate;
}
/* Subtle Noise Texture Overlay */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
@keyframes meshFloat{
  0% {
    background-position: 0% 0%, 100% 100%, 50% 50%;
    filter: hue-rotate(0deg) saturate(1);
  }
  33% {
    background-position: 100% 20%, 0% 80%, 20% 90%;
    filter: hue-rotate(5deg) saturate(1.1);
  }
  66% {
    background-position: 30% 100%, 80% 0%, 90% 20%;
    filter: hue-rotate(-5deg) saturate(1.05);
  }
  100% {
    background-position: 0% 0%, 100% 100%, 50% 50%;
    filter: hue-rotate(0deg) saturate(1);
  }
}
@media (prefers-reduced-motion: reduce){
  body::before{
    animation:none;
    transform:translate3d(0,0,0) scale(1.02);
    filter:none;
  }
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:22px}
.site-header{
  position:sticky;top:0;z-index:30;
  backdrop-filter:saturate(140%) blur(12px);
  background:linear-gradient(to bottom, rgba(11,18,32,.9), rgba(11,18,32,.55));
  border-bottom:1px solid var(--border);
}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{
  font-weight:800;letter-spacing:.3px;
  display:flex;align-items:center;gap:10px;
}
.brand::before{
  content:"";
  width:10px;height:10px;border-radius:999px;
  background:linear-gradient(45deg,var(--primary),var(--primary-2));
  box-shadow:0 0 0 6px rgba(124,92,255,.14);
}
.nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.nav-link{
  padding:10px 12px;border-radius:12px;
  border:1px solid transparent;
  color:var(--muted);
}
.nav-link:hover{
  color:var(--text);
  border-color:var(--border);
  background:rgba(255,255,255,.03);
}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;
  padding:0 8px;margin-left:6px;
  border-radius:999px;
  background:rgba(124,92,255,.18);
  border:1px solid rgba(124,92,255,.3);
  color:var(--text);
  font-size:12px;
}
.card{
  background:linear-gradient(180deg, rgba(18,26,44,.9), rgba(15,23,42,.85));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  padding:18px;
}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 900px){
  .grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  .container{padding:16px}
}
.h1{font-size:42px;line-height:1.12;margin:0}
.h2{font-size:22px;margin:0 0 10px 0}
.muted{color:var(--muted)}
.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:12px 14px;border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
}
.btn:hover{background:rgba(255,255,255,.06)}
.btn.primary{
  border-color:rgba(124,92,255,.35);
  background:rgba(124,92,255,.1);
  color:#fff;
}
.btn.primary:hover{background:rgba(124,92,255,.2)}
.btn.danger{border-color:rgba(255,92,122,.3);color:var(--danger)}
.btn.danger:hover{background:rgba(255,92,122,.1)}
.btn.small{padding:6px 10px;font-size:13px;border-radius:10px}
#shop-view .btn{padding:8px 10px!important;font-size:12px!important;line-height:1.1!important;border-radius:10px!important;gap:6px!important}
#shop-view .btn.small{padding:6px 8px!important;font-size:12px!important;line-height:1.1!important;border-radius:9px!important}
#shop-view .shop-item-title{font-size:12px!important;line-height:1.2!important}
#shop-view .shop-item-desc{font-size:12px!important;line-height:1.2!important}
#shop-view #pp-title{font-size:12px!important;line-height:1.2!important}
#shop-view #pp-desc{font-size:12px!important;line-height:1.2!important}
.input, .textarea{
  width:100%;
  background:rgba(0,0,0,.2);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  font-family:inherit;font-size:inherit;
}
.input:focus, .textarea:focus{outline:none;border-color:var(--primary)}
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;padding:10px;color:var(--muted);font-weight:500;font-size:14px}
.table td{padding:10px;border-top:1px solid var(--border)}
.notice{padding:12px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--border)}
.notice.danger{background:rgba(255,92,122,.1);border-color:rgba(255,92,122,.2);color:#ffdae0}
.notice.success{background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.2);color:#dcfce7}
.pill{
  display:inline-flex;padding:4px 10px;border-radius:99px;font-size:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
}
/* Slider */
.slider-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    margin-bottom: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.slider-container .slider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.slider-container .slider-track::-webkit-scrollbar {
    display: none;
}
.slider-container .slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
    height: var(--slider-height, 480px);
}
.slider-container .slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slider-container .slide-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 30px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
    pointer-events: none;
}
.slider-container .slider-nav {
    position: absolute;
    bottom: 12px;
    right: 20px;
    display: flex;
    gap: 8px;
    z-index: 10;
}
.slider-container .slider-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background 0.2s;
}
.slider-container .slider-dot.active {
    background: #fff;
    transform: scale(1.2);
}

/* Layout & Footer */
main {
    flex: 1;
    width: 100%;
}
.site-footer {
    padding: 12px 0;
    margin-top: auto;
    border-top: 1px solid var(--border);
    font-size: 13px;
    background: transparent;
}
.site-footer .container {
    padding-top: 0;
    padding-bottom: 0;
}

.product-card-media{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--product-preview-box-width, 100%);
  height:var(--product-preview-box-height, 220px);
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.product-card-media .product-img{
  width:var(--product-preview-image-width, 100%);
  height:var(--product-preview-image-height, 100%);
  object-fit:cover;
  display:block;
}
.product-card-media .product-img--placeholder{
  width:100%;
  height:100%;
  background:rgba(255,255,255,.04);
}

#shop-view .shop-product-grid .shop-product-card{
  width:var(--product-preview-box-width, 100%);
  max-width:100%;
  min-height:var(--product-preview-box-height, auto);
  justify-self:center;
}
#shop-view .shop-product-grid .product-card-media{
  width:var(--product-preview-image-width, 100%);
  height:var(--product-preview-image-height, 220px);
}
#shop-view .shop-product-grid .product-card-media .product-img{
  width:100%;
  height:100%;
}

.product-preview-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:16px;
}
.product-preview-modal{
  width:min(var(--product-preview-modal-width, 960px), calc(100vw - 32px));
  max-height:calc(100vh - 32px);
  overflow:auto;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(18,26,44,.95), rgba(15,23,42,.92));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.product-preview-modal-img{
  max-width:min(720px, 100%);
  max-height:720px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.product-preview-modal-body{
  padding:18px;
}