*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
}

:root{
--bg:#07100c;
--bg-deep:#030705;
--panel:rgba(255,255,255,0.055);
--panel-2:rgba(255,255,255,0.035);
--line:rgba(255,255,255,0.09);
--green:#6CFF8F;
--green-2:#22d37a;
--mint:#b8ffd0;
--text:#ffffff;
--muted:#9fb3a9;
--muted-2:#cbd5e1;
--danger:#ff4d4d;
--gold:#f7d774;
}

html{
scroll-behavior:smooth;
}

body{
min-height:100vh;
background:
radial-gradient(circle at 15% 5%, rgba(108,255,143,0.12), transparent 34%),
radial-gradient(circle at 85% 12%, rgba(20,160,95,0.13), transparent 30%),
linear-gradient(180deg, #07100c 0%, #08130e 42%, #040806 100%);
color:var(--text);
overflow-x:hidden;
}

body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
z-index:-3;
background:
linear-gradient(rgba(108,255,143,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(108,255,143,0.02) 1px, transparent 1px);
background-size:58px 58px;
mask-image:linear-gradient(to bottom, rgba(0,0,0,0.8), transparent 78%);
}

.grain{
position:fixed;
inset:0;
pointer-events:none;
z-index:-1;
opacity:0.13;
background-image:
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.16) 0 1px, transparent 1px),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.10) 0 1px, transparent 1px);
background-size:16px 16px, 22px 22px;
mix-blend-mode:soft-light;
}

.cursor-glow{
position:fixed;
left:-170px;
top:-170px;
width:340px;
height:340px;
border-radius:50%;
background:radial-gradient(circle, rgba(108,255,143,0.12), transparent 65%);
pointer-events:none;
z-index:1;
transition:opacity .3s ease;
}

/* =========================
   Animated Background
========================= */

.bg{
position:fixed;
border-radius:50%;
filter:blur(130px);
z-index:-2;
pointer-events:none;
animation:float 10s ease-in-out infinite;
}

.bg-one{
width:520px;
height:520px;
top:-160px;
left:-120px;
background:rgba(108,255,143,0.14);
}

.bg-two{
width:560px;
height:560px;
bottom:-170px;
right:-140px;
background:rgba(32,224,138,0.11);
animation-delay:3s;
}

.bg-three{
width:360px;
height:360px;
top:44%;
left:52%;
background:rgba(247,215,116,0.055);
animation-delay:1.5s;
}

@keyframes float{
0%,100%{transform:translate3d(0,0,0) scale(1);}
50%{transform:translate3d(0,40px,0) scale(1.06);}
}

/* =========================
   Navbar
========================= */

.top-navbar{
position:fixed;
top:0;
left:0;
width:100%;
min-height:86px;
padding:14px 6%;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
background:rgba(3,7,5,0.74);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border-bottom:1px solid rgba(108,255,143,0.11);
box-shadow:0 16px 44px rgba(0,0,0,0.42);
z-index:5000;
}

.top-navbar::after{
content:"";
position:absolute;
left:6%;
right:6%;
bottom:-1px;
height:1px;
background:linear-gradient(90deg, transparent, rgba(108,255,143,0.75), transparent);
opacity:.65;
}

.nav-logo{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:white;
font-weight:800;
white-space:nowrap;
position:relative;
z-index:2;
}

.nav-logo img{
width:52px;
height:52px;
object-fit:cover;
border-radius:16px;
border:1px solid rgba(108,255,143,0.34);
box-shadow:0 0 22px rgba(108,255,143,0.18);
transition:0.35s;
}

.nav-logo:hover img{
transform:translateY(-2px) scale(1.04) rotate(-2deg);
box-shadow:0 0 32px rgba(108,255,143,0.34);
}

.nav-logo span{
font-size:17px;
letter-spacing:0.3px;
}

.nav-menu{
display:flex;
align-items:center;
justify-content:center;
gap:22px;
flex:1;
position:relative;
z-index:2;
}

.nav-menu a{
color:#d8e6de;
text-decoration:none;
font-weight:600;
font-size:15px;
transition:0.3s;
position:relative;
}

.nav-menu a::after{
content:"";
position:absolute;
left:0;
bottom:-9px;
width:0;
height:2px;
background:var(--green);
border-radius:99px;
box-shadow:0 0 12px rgba(108,255,143,0.75);
transition:0.3s;
}

.nav-menu a:hover,
.nav-menu a.active{
color:var(--green);
}

.nav-menu a:hover::after,
.nav-menu a.active::after{
width:100%;
}

.menu-toggle{
display:none;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.12);
color:white;
font-size:24px;
width:46px;
height:46px;
border-radius:14px;
cursor:pointer;
transition:0.3s;
position:relative;
z-index:2;
}

.menu-toggle:hover,
.menu-toggle.active{
border-color:var(--green);
color:var(--green);
box-shadow:0 0 22px rgba(108,255,143,0.16);
}

/* =========================
   Login Box In Navbar
========================= */

.auth-box{
display:flex;
align-items:center;
justify-content:flex-end;
min-width:fit-content;
position:relative;
z-index:2;
}

.auth-form{
display:flex;
gap:8px;
align-items:center;
flex-wrap:nowrap;
}

.auth-fields{
display:flex;
gap:8px;
}

.auth-form input{
width:150px;
padding:10px 12px;
border:none;
border-radius:12px;
outline:none;
background:rgba(7,16,12,0.86);
color:white;
border:1px solid rgba(255,255,255,0.11);
transition:.25s;
}

.auth-form input::placeholder{
color:#72867a;
}

.auth-form input:focus{
border-color:var(--green);
box-shadow:0 0 0 4px rgba(108,255,143,0.08);
}

.auth-btn,
.logout-btn,
.register-link{
min-height:40px;
}

.auth-btn{
padding:9px 15px;
border:none;
border-radius:12px;
cursor:pointer;
font-weight:800;
background:linear-gradient(135deg, var(--green), #b8ffd0);
color:#031109;
transition:0.3s;
box-shadow:0 0 20px rgba(108,255,143,0.17);
}

.auth-btn:hover{
transform:translateY(-2px);
box-shadow:0 0 28px rgba(108,255,143,0.34);
}

.auth-btn:disabled{
opacity:.65;
cursor:not-allowed;
transform:none;
}

.register-link{
color:var(--green);
text-decoration:none;
font-size:14px;
font-weight:700;
padding:9px 8px;
display:inline-flex;
align-items:center;
}

.register-link:hover{
text-decoration:underline;
}

.user-box{
display:none;
gap:10px;
align-items:center;
}

.user-pill{
padding:7px 10px;
border-radius:999px;
background:rgba(108,255,143,0.1);
color:var(--green);
border:1px solid rgba(108,255,143,0.25);
font-size:12px;
font-weight:800;
}

.user-email{
color:var(--green);
font-weight:800;
max-width:210px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.logout-btn{
padding:9px 14px;
border:none;
border-radius:12px;
cursor:pointer;
font-weight:800;
background:rgba(255,77,77,0.12);
color:#ffb8b8;
border:1px solid rgba(255,77,77,0.32);
transition:0.3s;
}

.logout-btn:hover{
background:var(--danger);
color:white;
transform:translateY(-2px);
box-shadow:0 0 22px rgba(255,77,77,0.25);
}

/* =========================
   Shop Hero
========================= */

.shop-hero{
min-height:100vh;
padding:150px 8% 90px;
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(340px,.75fr);
gap:54px;
align-items:center;
position:relative;
overflow:hidden;
}

.shop-hero::before{
content:"";
position:absolute;
inset:86px 0 0;
background:
linear-gradient(90deg, rgba(0,0,0,0.72), rgba(0,0,0,0.12)),
url('https://images.unsplash.com/photo-1501004318641-b39e6451bec6?q=80&w=1800&auto=format&fit=crop') center/cover;
opacity:.22;
filter:saturate(1.25) contrast(1.03);
z-index:-2;
}

.shop-hero::after{
content:"";
position:absolute;
left:8%;
right:8%;
bottom:22px;
height:1px;
background:linear-gradient(90deg, transparent, rgba(108,255,143,.45), transparent);
}

.hero-grid{
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(transparent 96%, rgba(108,255,143,0.12) 100%),
linear-gradient(90deg, transparent 96%, rgba(108,255,143,0.09) 100%);
background-size:80px 80px;
mask-image:radial-gradient(circle at 38% 44%, black, transparent 74%);
animation:gridDrift 18s linear infinite;
z-index:-1;
}

@keyframes gridDrift{
from{background-position:0 0;}
to{background-position:80px 80px;}
}

.hero-copy{
max-width:820px;
position:relative;
z-index:2;
animation:heroFade .85s ease both;
}

.eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 13px;
border-radius:999px;
background:rgba(108,255,143,0.09);
border:1px solid rgba(108,255,143,0.23);
color:var(--green);
font-weight:800;
font-size:13px;
letter-spacing:.6px;
text-transform:uppercase;
box-shadow:0 0 28px rgba(108,255,143,0.08);
}

.eyebrow::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:var(--green);
box-shadow:0 0 12px var(--green);
}

.shop-hero h1{
margin-top:22px;
font-size:clamp(46px, 7vw, 86px);
line-height:.98;
letter-spacing:-3px;
}

.shop-hero h1 span{
color:var(--green);
text-shadow:0 0 38px rgba(108,255,143,0.2);
}

.shop-hero p{
max-width:720px;
margin-top:24px;
color:#d8e6de;
font-size:18px;
line-height:1.9;
}

.hero-actions{
margin-top:32px;
display:flex;
flex-wrap:wrap;
gap:14px;
}

.hero-btn{
font-size:16px;
}

.ghost-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:14px 26px;
border-radius:16px;
text-decoration:none;
color:white;
font-weight:800;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.12);
transition:.3s;
}

.ghost-btn:hover{
color:var(--green);
border-color:rgba(108,255,143,0.35);
transform:translateY(-4px);
box-shadow:0 0 28px rgba(108,255,143,0.13);
}

@keyframes heroFade{
from{opacity:0;transform:translateY(26px);}
to{opacity:1;transform:translateY(0);}
}

.hero-panel{
height:520px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
animation:heroFade .95s ease .12s both;
}

.panel-orbit{
position:absolute;
width:390px;
height:390px;
border-radius:50%;
border:1px solid rgba(108,255,143,0.16);
box-shadow:
inset 0 0 40px rgba(108,255,143,0.06),
0 0 80px rgba(108,255,143,0.07);
animation:spin 18s linear infinite;
}

.panel-orbit::before,
.panel-orbit::after{
content:"";
position:absolute;
width:15px;
height:15px;
border-radius:50%;
background:var(--green);
box-shadow:0 0 25px var(--green);
}

.panel-orbit::before{
top:26px;
left:68px;
}

.panel-orbit::after{
right:50px;
bottom:52px;
background:var(--gold);
box-shadow:0 0 25px var(--gold);
}

@keyframes spin{
to{transform:rotate(360deg);}
}

.panel-card,
.mini-stat{
background:rgba(5,12,8,0.74);
border:1px solid rgba(108,255,143,0.18);
backdrop-filter:blur(18px);
box-shadow:0 22px 60px rgba(0,0,0,.38);
}

.main-panel-card{
width:min(88vw,340px);
min-height:240px;
border-radius:34px;
padding:34px;
position:relative;
overflow:hidden;
}

.main-panel-card::before{
content:"";
position:absolute;
inset:-1px;
background:
radial-gradient(circle at 30% 20%, rgba(108,255,143,0.18), transparent 42%),
linear-gradient(135deg, rgba(255,255,255,0.08), transparent);
pointer-events:none;
}

.panel-label{
position:relative;
z-index:2;
color:var(--green);
font-size:13px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.7px;
}

.main-panel-card strong{
position:relative;
z-index:2;
display:block;
font-size:54px;
line-height:1;
margin-top:34px;
color:white;
}

.main-panel-card p{
position:relative;
z-index:2;
color:#bcd3c5;
margin-top:16px;
line-height:1.6;
}

.mini-stat{
position:absolute;
padding:18px 20px;
border-radius:22px;
display:grid;
gap:4px;
min-width:132px;
animation:miniFloat 5s ease-in-out infinite;
}

.mini-stat strong{
font-size:28px;
color:var(--green);
}

.mini-stat span{
font-size:12px;
color:#c8d9cf;
font-weight:700;
}

.stat-one{top:42px;left:10px;}
.stat-two{right:0;top:130px;animation-delay:1s;}
.stat-three{bottom:54px;left:44px;animation-delay:2s;}

@keyframes miniFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-12px);}
}

/* =========================
   Trust Strip
========================= */

.trust-strip{
width:min(1180px, 86%);
margin:-38px auto 0;
position:relative;
z-index:5;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
overflow:hidden;
border-radius:26px;
border:1px solid rgba(108,255,143,0.18);
background:rgba(108,255,143,0.15);
box-shadow:0 20px 70px rgba(0,0,0,.32);
}

.trust-strip div{
padding:24px;
background:rgba(3,9,6,0.84);
backdrop-filter:blur(16px);
}

.trust-strip strong{
display:block;
color:var(--green);
font-size:16px;
margin-bottom:6px;
}

.trust-strip span{
color:#b6cabe;
font-size:13px;
}

/* =========================
   Container / Section Head
========================= */

.container{
max-width:1380px;
margin:0 auto;
padding:90px 8% 80px;
}

.section-head{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:28px;
margin-bottom:34px;
}

.section-head h2{
font-size:clamp(30px, 4vw, 52px);
line-height:1.1;
margin-top:18px;
letter-spacing:-1.2px;
}

.section-head p{
max-width:760px;
margin-top:16px;
color:#aebfb5;
line-height:1.8;
}

.store-meta-card{
min-width:150px;
padding:22px;
border-radius:24px;
background:var(--panel);
border:1px solid rgba(108,255,143,0.18);
backdrop-filter:blur(16px);
box-shadow:0 20px 45px rgba(0,0,0,.25);
text-align:center;
}

.store-meta-card span{
color:#adc2b5;
font-size:13px;
font-weight:700;
}

.store-meta-card strong{
display:block;
font-size:44px;
line-height:1;
margin-top:8px;
color:var(--green);
}

/* =========================
   Toolbar
========================= */

.shop-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
margin-bottom:34px;
padding:18px;
border-radius:26px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(18px);
}

.search-box{
flex:1;
display:flex;
align-items:center;
gap:12px;
min-height:52px;
padding:0 18px;
border-radius:18px;
background:rgba(3,7,5,0.7);
border:1px solid rgba(255,255,255,0.08);
}

.search-box span{
color:var(--green);
font-size:24px;
font-weight:800;
}

.search-box input{
width:100%;
background:transparent;
border:none;
outline:none;
color:white;
font-size:15px;
}

.search-box input::placeholder{
color:#73887b;
}

.filter-row{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:flex-end;
}

.filter-btn{
min-height:44px;
padding:0 16px;
border-radius:999px;
border:1px solid rgba(255,255,255,0.1);
background:rgba(255,255,255,0.045);
color:#d6e2db;
font-weight:800;
cursor:pointer;
transition:.3s;
}

.filter-btn:hover,
.filter-btn.active{
background:var(--green);
color:#031109;
border-color:var(--green);
box-shadow:0 0 26px rgba(108,255,143,0.22);
transform:translateY(-2px);
}

/* =========================
   Product Grid
========================= */

.projects-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
margin-bottom:80px;
}

.project-card{
position:relative;
border-radius:30px;
background:
linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
border:1px solid rgba(255,255,255,0.075);
overflow:hidden;
transition:0.45s cubic-bezier(.2,.8,.2,1);
box-shadow:0 18px 50px rgba(0,0,0,.26);
animation:cardIn .6s ease both;
animation-delay:var(--delay);
}

@keyframes cardIn{
from{opacity:0;transform:translateY(30px) scale(.98);}
to{opacity:1;transform:translateY(0) scale(1);}
}

.project-card::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(120deg, transparent, rgba(108,255,143,0.16), transparent);
transform:translateX(-120%);
transition:.75s;
z-index:2;
pointer-events:none;
}

.project-card::after{
content:"";
position:absolute;
inset:auto 18px 0;
height:1px;
background:linear-gradient(90deg, transparent, rgba(108,255,143,0.58), transparent);
opacity:.6;
}

.project-card:hover{
transform:translateY(-12px);
border-color:rgba(108,255,143,0.45);
box-shadow:
0 26px 70px rgba(0,0,0,.36),
0 0 40px rgba(108,255,143,0.12);
}

.project-card:hover::before{
transform:translateX(120%);
}

.project-image{
width:100%;
height:286px;
background:
radial-gradient(circle at 50% 35%, rgba(108,255,143,0.22), transparent 34%),
rgba(108,255,143,0.065);
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
color:var(--green);
overflow:hidden;
position:relative;
}

.project-image.image-missing::after{
content:"🌱 Product Image";
color:var(--green);
font-weight:800;
letter-spacing:.4px;
}

.project-image img{
width:100%;
height:100%;
object-fit:cover;
transition:0.75s cubic-bezier(.2,.8,.2,1);
filter:saturate(1.05) contrast(1.02);
}

.project-card:hover .project-image img{
transform:scale(1.1) rotate(.5deg);
}

.image-shade{
position:absolute;
inset:0;
background:linear-gradient(180deg, transparent 48%, rgba(0,0,0,0.55));
}

.product-badge{
position:absolute;
top:16px;
left:16px;
z-index:3;
padding:8px 12px;
border-radius:999px;
background:rgba(3,10,6,0.72);
backdrop-filter:blur(12px);
border:1px solid rgba(108,255,143,0.28);
color:var(--green);
font-size:12px;
font-weight:900;
}

.project-info{
padding:28px;
}

.product-topline{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-bottom:14px;
}

.product-category,
.product-spec{
display:inline-flex;
align-items:center;
padding:7px 10px;
border-radius:999px;
font-size:12px;
font-weight:800;
}

.product-category{
color:#031109;
background:var(--green);
text-transform:capitalize;
}

.product-spec{
color:#d8e6de;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.08);
}

.project-info h3{
font-size:25px;
margin-bottom:12px;
color:#ffffff;
letter-spacing:-.3px;
}

.product-desc{
color:#adbfba;
line-height:1.75;
font-size:14.5px;
min-height:76px;
}

.price-row{
margin-top:22px;
padding:16px;
border-radius:18px;
background:rgba(0,0,0,0.22);
border:1px solid rgba(255,255,255,0.06);
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}

.price-row span{
color:#9cafb5;
font-size:14px;
font-weight:700;
}

.price-row strong{
color:var(--green);
font-size:20px;
}

.buy-row{
margin-top:18px;
display:grid;
grid-template-columns:132px 1fr;
gap:14px;
align-items:end;
}

.qty-wrap label{
display:block;
color:#c9d8d0;
font-size:13px;
font-weight:800;
margin-bottom:8px;
}

.qty-control{
display:grid;
grid-template-columns:36px 1fr 36px;
height:46px;
border-radius:16px;
overflow:hidden;
border:1px solid rgba(255,255,255,0.09);
background:rgba(0,0,0,0.28);
}

.qty-control button{
border:none;
background:rgba(255,255,255,0.06);
color:var(--green);
font-size:20px;
font-weight:900;
cursor:pointer;
transition:.25s;
}

.qty-control button:hover{
background:rgba(108,255,143,0.16);
}

.qty-input{
width:100%;
border:none;
outline:none;
text-align:center;
background:transparent;
color:white;
font-weight:900;
}

.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:15px 26px;
min-height:52px;
background:linear-gradient(135deg, var(--green), #c9ffd9);
color:#031109;
border-radius:16px;
text-decoration:none;
font-weight:900;
transition:0.3s;
border:none;
cursor:pointer;
box-shadow:0 0 28px rgba(108,255,143,0.18);
}

.btn:hover{
transform:translateY(-4px);
box-shadow:0 0 42px rgba(108,255,143,0.35);
}

.add-btn{
width:100%;
}

.empty-products{
grid-column:1 / -1;
min-height:320px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
border-radius:28px;
background:rgba(255,255,255,0.045);
border:1px solid rgba(255,255,255,0.08);
}

.empty-products span{
font-size:52px;
margin-bottom:18px;
}

.empty-products h3{
color:var(--green);
font-size:28px;
margin-bottom:8px;
}

.empty-products p{
color:#aebfb5;
}

/* =========================
   Floating Cart
========================= */

.cart-float{
position:fixed;
right:28px;
bottom:28px;
width:68px;
height:68px;
border-radius:24px;
background:linear-gradient(135deg, var(--green), #c7ffd8);
color:#031109;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
text-decoration:none;
z-index:4000;
box-shadow:
0 0 34px rgba(108,255,143,0.36),
0 18px 38px rgba(0,0,0,.36);
transition:0.3s;
}

.cart-float:hover{
transform:translateY(-6px) scale(1.05);
box-shadow:0 0 52px rgba(108,255,143,0.56);
}

.cart-badge{
position:absolute;
top:-8px;
right:-8px;
min-width:28px;
height:28px;
padding:0 7px;
border-radius:999px;
background:var(--danger);
color:white;
font-size:13px;
font-weight:900;
display:flex;
align-items:center;
justify-content:center;
border:2px solid #07100c;
}

/* =========================
   Modal / Contact Popup
========================= */

.modal{
position:fixed;
inset:0;
z-index:9000;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(0,0,0,.74);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
opacity:0;
visibility:hidden;
transition:.35s ease;
}

.modal.show{
opacity:1;
visibility:visible;
}

.modal-content{
width:min(94vw,440px);
position:relative;
padding:32px;
border-radius:26px;
background:rgba(7,16,12,.96);
border:1px solid rgba(108,255,143,.24);
box-shadow:
0 25px 70px rgba(0,0,0,.52),
0 0 40px rgba(108,255,143,.12);
color:white;
transform:translateY(34px) scale(.92);
transition:.35s ease;
overflow:hidden;
}

.modal.show .modal-content{
transform:translateY(0) scale(1);
}

.modal-content::before{
content:"";
position:absolute;
width:190px;
height:190px;
border-radius:50%;
background:var(--green);
filter:blur(94px);
opacity:.15;
top:-82px;
right:-82px;
}

.modal-content h3{
position:relative;
z-index:2;
margin-bottom:18px;
font-size:28px;
color:var(--green);
text-shadow:0 0 20px rgba(108,255,143,.25);
}

.modal-content p{
position:relative;
z-index:2;
color:#d2e0d7;
line-height:1.75;
margin-bottom:13px;
font-size:15px;
}

.modal-content a{
color:var(--green);
text-decoration:none;
}

.modal-content a:hover{
text-decoration:underline;
}

.modal-content strong{
color:white;
}

.modal-content .btn{
position:relative;
z-index:2;
width:100%;
text-align:center;
margin-top:18px;
}

.close{
position:absolute;
top:14px;
right:14px;
z-index:3;
width:38px;
height:38px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.08);
color:#d1d5db;
font-size:27px;
line-height:1;
cursor:pointer;
transition:.3s;
}

.close:hover{
background:var(--danger);
color:white;
transform:rotate(90deg);
box-shadow:0 0 18px rgba(255,77,77,.35);
}

.qr-box{
text-align:center;
margin:20px 0;
position:relative;
z-index:2;
}

.qr-box img{
width:200px;
height:200px;
object-fit:cover;
border-radius:15px;
border:1px solid rgba(108,255,143,.22);
}

/* =========================
   Toast
========================= */

.toast{
position:fixed;
left:50%;
bottom:30px;
transform:translate(-50%, 30px);
min-width:min(92vw, 360px);
padding:15px 18px;
border-radius:18px;
background:rgba(7,16,12,.94);
color:white;
border:1px solid rgba(108,255,143,.24);
box-shadow:0 18px 55px rgba(0,0,0,.42);
z-index:9500;
opacity:0;
visibility:hidden;
transition:.35s ease;
text-align:center;
font-weight:800;
}

.toast.show{
opacity:1;
visibility:visible;
transform:translate(-50%,0);
}

.toast.success{
color:var(--green);
}

.toast.error{
color:#ffb8b8;
border-color:rgba(255,77,77,.35);
}

/* =========================
   Footer
========================= */

footer{
padding:38px;
text-align:center;
color:#9fb3a9;
border-top:1px solid rgba(108,255,143,0.09);
margin-top:50px;
background:rgba(0,0,0,0.15);
}

/* =========================
   Responsive
========================= */

@media(max-width:1220px){

.top-navbar{
padding:14px 4%;
gap:14px;
}

.nav-menu{
gap:14px;
}

.auth-form input{
width:128px;
}

.nav-logo span{
display:none;
}

.user-email{
max-width:170px;
}

.projects-grid{
grid-template-columns:repeat(2,1fr);
}

.shop-hero{
grid-template-columns:1fr;
padding-top:150px;
}

.hero-panel{
height:430px;
}

.trust-strip{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:980px){

.cursor-glow{
display:none;
}

.top-navbar{
align-items:flex-start;
flex-wrap:wrap;
}

.nav-logo{
order:1;
}

.menu-toggle{
display:flex;
order:2;
margin-left:auto;
}

.auth-box{
order:3;
width:100%;
justify-content:flex-start;
}

.nav-menu{
order:4;
width:100%;
flex:0 0 100%;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:0;
max-height:0;
opacity:0;
overflow:hidden;
padding:0;
transform:translateY(-12px);
transition:max-height .45s ease, opacity .35s ease, transform .35s ease, padding .35s ease;
}

.nav-menu.active{
max-height:420px;
opacity:1;
padding:14px 0 4px;
transform:translateY(0);
}

.nav-menu a{
width:100%;
padding:13px 0;
border-bottom:1px solid rgba(255,255,255,0.06);
}

.nav-menu a::after{
display:none;
}

.shop-toolbar,
.section-head{
flex-direction:column;
align-items:stretch;
}

.filter-row{
justify-content:flex-start;
}

.store-meta-card{
text-align:left;
}

}

@media(max-width:760px){

.auth-form{
width:100%;
display:grid;
grid-template-columns:1fr;
}

.auth-fields{
display:grid;
grid-template-columns:1fr;
gap:8px;
}

.auth-form input,
.auth-btn,
.register-link{
width:100%;
text-align:center;
}

.user-box{
width:100%;
flex-direction:column;
align-items:stretch;
}

.user-email,
.user-pill{
max-width:100%;
text-align:center;
justify-content:center;
}

.logout-btn{
width:100%;
}

.shop-hero{
padding:250px 7% 70px;
}

.shop-hero h1{
letter-spacing:-1.5px;
}

.hero-panel{
display:none;
}

.trust-strip{
width:88%;
margin-top:-22px;
grid-template-columns:1fr;
}

.container{
padding:70px 7% 60px;
}

.projects-grid{
grid-template-columns:1fr;
}

.buy-row{
grid-template-columns:1fr;
}

.product-desc{
min-height:auto;
}

.cart-float{
right:18px;
bottom:18px;
width:60px;
height:60px;
border-radius:20px;
font-size:27px;
}

}

@media(max-width:520px){

.top-navbar{
min-height:78px;
padding:12px 5%;
}

.nav-logo img{
width:48px;
height:48px;
}

.shop-hero{
padding-top:250px;
}

.shop-hero p{
font-size:15.5px;
}

.hero-actions{
flex-direction:column;
}

.hero-actions .btn,
.ghost-btn{
width:100%;
}

.project-image{
height:240px;
}

.project-info{
padding:24px;
}

.shop-toolbar{
padding:14px;
}

.filter-btn{
flex:1 1 auto;
}

.modal-content{
padding:28px 22px;
}

}

/* =========================
   Sales Dashboard / Ranking
========================= */

.sales-dashboard{
margin:34px 0 42px;
padding:26px;
border-radius:34px;
background:
linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
border:1px solid rgba(108,255,143,0.14);
box-shadow:0 22px 70px rgba(0,0,0,.32), inset 0 0 42px rgba(108,255,143,.035);
backdrop-filter:blur(18px);
position:relative;
overflow:hidden;
}

.sales-dashboard::before{
content:"";
position:absolute;
width:360px;
height:360px;
right:-140px;
top:-160px;
border-radius:50%;
background:rgba(108,255,143,0.09);
filter:blur(80px);
pointer-events:none;
}

.dashboard-head{
display:flex;
justify-content:space-between;
gap:24px;
position:relative;
z-index:2;
margin-bottom:24px;
}

.dashboard-head h2{
font-size:clamp(28px,4vw,48px);
line-height:1.08;
margin-top:14px;
letter-spacing:-1.1px;
}

.dashboard-head p{
margin-top:12px;
color:#aebfb5;
line-height:1.7;
}

.dashboard-kpis{
display:flex;
gap:14px;
min-width:280px;
}

.dashboard-kpis div{
flex:1;
padding:18px;
border-radius:22px;
background:rgba(0,0,0,0.26);
border:1px solid rgba(255,255,255,0.08);
}

.dashboard-kpis span{
display:block;
font-size:12px;
font-weight:800;
color:#9fb3a9;
margin-bottom:8px;
}

.dashboard-kpis strong{
font-size:32px;
line-height:1;
color:var(--green);
}

.dashboard-grid{
display:grid;
grid-template-columns:1fr 1.4fr;
gap:18px;
position:relative;
z-index:2;
}

.analytics-card{
position:relative;
padding:22px;
border-radius:28px;
background:rgba(3,9,6,0.68);
border:1px solid rgba(255,255,255,0.08);
box-shadow:0 18px 50px rgba(0,0,0,.24);
overflow:hidden;
}

.pie-card{
grid-column:1 / -1;
}

.analytics-title{
display:flex;
align-items:center;
gap:12px;
margin-bottom:18px;
}

.analytics-title span{
width:42px;
height:42px;
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(108,255,143,0.1);
border:1px solid rgba(108,255,143,0.22);
box-shadow:0 0 22px rgba(108,255,143,.08);
}

.analytics-title h3{
font-size:21px;
letter-spacing:-.3px;
}

.ranking-list{
display:grid;
gap:12px;
}

.ranking-item{
display:grid;
grid-template-columns:48px 1fr auto;
align-items:center;
gap:13px;
padding:13px;
border-radius:18px;
background:rgba(255,255,255,0.045);
border:1px solid rgba(255,255,255,0.065);
transition:.3s;
}

.ranking-item:hover{
transform:translateY(-3px);
border-color:rgba(108,255,143,.24);
box-shadow:0 0 26px rgba(108,255,143,.08);
}

.rank-no{
width:42px;
height:42px;
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,var(--green),#c9ffd9);
color:#031109;
font-weight:900;
}

.rank-body strong{
display:block;
font-size:15px;
margin-bottom:4px;
}

.rank-body span{
font-size:12px;
color:#9fb3a9;
}

.rank-sold{
text-align:right;
}

.rank-sold strong{
display:block;
font-size:20px;
color:var(--green);
line-height:1;
}

.rank-sold span{
font-size:11px;
color:#9fb3a9;
font-weight:800;
}

.chart-note{
color:#9fb3a9;
font-size:13px;
line-height:1.6;
margin-top:-8px;
margin-bottom:16px;
}

.candle-chart{
min-height:310px;
display:flex;
align-items:flex-end;
gap:15px;
overflow-x:auto;
padding:12px 8px 6px;
}

.candle-chart::-webkit-scrollbar{
height:8px;
}

.candle-chart::-webkit-scrollbar-thumb{
background:rgba(108,255,143,.26);
border-radius:999px;
}

.candle-item{
min-width:58px;
height:280px;
display:grid;
grid-template-rows:1fr auto auto;
justify-items:center;
gap:8px;
}

.candle-stage{
position:relative;
width:38px;
height:210px;
display:flex;
justify-content:center;
align-items:flex-end;
}

.candle-wick{
position:absolute;
bottom:0;
width:3px;
border-radius:999px;
background:rgba(255,255,255,.22);
box-shadow:0 0 14px rgba(108,255,143,.12);
}

.candle-body{
position:absolute;
bottom:0;
width:30px;
min-height:7px;
border-radius:9px 9px 4px 4px;
background:linear-gradient(180deg,#c9ffd9,var(--green-2));
box-shadow:0 0 22px rgba(108,255,143,.26);
}

.candle-body.hot{
background:linear-gradient(180deg,#f7d774,#6CFF8F);
}

.candle-body.danger{
background:linear-gradient(180deg,#ffb86b,#ff4d4d);
box-shadow:0 0 22px rgba(255,77,77,.25);
}

.candle-item strong{
color:var(--green);
font-size:15px;
}

.candle-item small{
width:76px;
color:#aebfb5;
font-size:11px;
text-align:center;
line-height:1.25;
white-space:normal;
}

.pie-wrap{
display:grid;
grid-template-columns:320px 1fr;
gap:24px;
align-items:center;
}

#salesPieChart{
max-width:300px;
max-height:300px;
margin:auto;
filter:drop-shadow(0 0 28px rgba(108,255,143,.1));
}

.pie-legend{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}

.pie-legend-item,
.legend-empty{
display:grid;
grid-template-columns:14px 1fr auto;
gap:10px;
align-items:center;
padding:11px 12px;
border-radius:16px;
background:rgba(255,255,255,0.045);
border:1px solid rgba(255,255,255,0.06);
}

.pie-legend-item span{
width:14px;
height:14px;
border-radius:50%;
box-shadow:0 0 12px currentColor;
}

.pie-legend-item strong{
font-size:13px;
font-weight:800;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.pie-legend-item em{
font-style:normal;
color:var(--green);
font-weight:900;
}

.legend-empty{
grid-template-columns:1fr;
color:#9fb3a9;
text-align:center;
}

/* =========================
   Inventory Add-ons
========================= */

.inventory-box{
margin-top:14px;
padding:14px;
border-radius:18px;
background:rgba(0,0,0,0.2);
border:1px solid rgba(255,255,255,0.055);
}

.inventory-row{
display:flex;
justify-content:space-between;
gap:12px;
font-size:12px;
font-weight:800;
color:#9fb3a9;
margin-bottom:10px;
}

.inventory-row strong{
color:var(--green);
}

.stock-meter{
height:8px;
border-radius:999px;
background:rgba(255,255,255,0.08);
overflow:hidden;
}

.stock-meter span{
display:block;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,var(--green),var(--gold),var(--danger));
box-shadow:0 0 16px rgba(108,255,143,.22);
}

.project-card.sold-out{
filter:saturate(.72);
opacity:.76;
}

.project-card.sold-out .project-image::before{
content:"SOLD OUT";
position:absolute;
inset:auto 18px 18px;
z-index:5;
height:44px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,77,77,.86);
color:white;
font-weight:900;
letter-spacing:.8px;
box-shadow:0 0 24px rgba(255,77,77,.25);
}

.qty-control button:disabled,
.qty-input:disabled,
.add-btn:disabled{
opacity:.45;
cursor:not-allowed;
transform:none;
box-shadow:none;
}

@media(max-width:980px){
.dashboard-head,
.dashboard-grid,
.pie-wrap{
grid-template-columns:1fr;
}

.dashboard-head{
flex-direction:column;
}

.dashboard-kpis{
min-width:0;
}
}

@media(max-width:620px){
.sales-dashboard{
padding:18px;
border-radius:26px;
}

.dashboard-kpis{
flex-direction:column;
}

.ranking-item{
grid-template-columns:42px 1fr;
}

.rank-sold{
grid-column:2;
text-align:left;
}

.pie-legend{
grid-template-columns:1fr;
}

.candle-item{
min-width:52px;
}
}


/* =========================
   Stock Guard Feedback
========================= */

.project-card.stock-warning{
    animation:stockShake .48s ease both;
    border-color:rgba(255,77,77,.55) !important;
    box-shadow:0 0 38px rgba(255,77,77,.22), 0 26px 70px rgba(0,0,0,.36) !important;
}

@keyframes stockShake{
    0%,100%{transform:translateX(0);}
    20%{transform:translateX(-7px);}
    40%{transform:translateX(7px);}
    60%{transform:translateX(-5px);}
    80%{transform:translateX(5px);}
}

.qty-control button:disabled,
.qty-input:disabled,
.add-btn:disabled{
    opacity:.42;
    cursor:not-allowed;
    filter:grayscale(.35);
}

.add-btn:disabled:hover{
    transform:none;
    box-shadow:0 0 28px rgba(108,255,143,0.08);
}
/* =====================================================
   MOBILE PATCH: Sales Share / Dashboard responsive fix
   ใส่ท้ายไฟล์ CSS เพื่อให้กราฟและตัวเลขไม่หลุดบนมือถือ
===================================================== */

.pie-card,
.pie-wrap,
.pie-legend,
.pie-legend-item,
.legend-empty{
min-width:0;
max-width:100%;
}

.pie-legend-item{
grid-template-columns:14px minmax(0,1fr) max-content;
}

.pie-legend-item strong{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.pie-legend-item em{
display:block;
min-width:26px;
text-align:right;
white-space:nowrap;
}

@media(max-width:760px){
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}

.container{
width:100%;
max-width:100%;
padding:66px 16px 88px;
}

.sales-dashboard{
width:100%;
max-width:100%;
margin:26px 0 38px;
padding:18px;
border-radius:26px;
overflow:hidden;
}

.dashboard-head{
gap:16px;
margin-bottom:18px;
}

.dashboard-head h2{
font-size:clamp(26px,8vw,34px);
letter-spacing:-.6px;
}

.dashboard-head p{
font-size:14px;
line-height:1.65;
}

.dashboard-kpis{
width:100%;
min-width:0;
flex-direction:column;
gap:10px;
}

.dashboard-kpis div{
padding:15px;
border-radius:18px;
}

.dashboard-kpis strong{
font-size:28px;
}

.dashboard-grid{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:14px;
width:100%;
min-width:0;
}

.analytics-card{
width:100%;
min-width:0;
padding:16px;
border-radius:22px;
overflow:hidden;
}

.analytics-title{
gap:10px;
margin-bottom:16px;
}

.analytics-title span{
width:38px;
height:38px;
flex:0 0 38px;
border-radius:14px;
}

.analytics-title h3{
font-size:19px;
line-height:1.25;
min-width:0;
}

.pie-wrap{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:18px;
justify-items:center;
align-items:center;
width:100%;
}

#salesPieChart{
display:block;
width:min(240px,72vw) !important;
height:min(240px,72vw) !important;
max-width:100% !important;
max-height:none !important;
margin:0 auto 4px;
}

.pie-legend{
width:100%;
display:grid;
grid-template-columns:minmax(0,1fr);
gap:10px;
}

.pie-legend-item,
.legend-empty{
width:100%;
padding:11px 12px;
border-radius:15px;
}

.pie-legend-item{
grid-template-columns:14px minmax(0,1fr) minmax(28px,max-content);
gap:10px;
}

.pie-legend-item span{
width:14px;
height:14px;
flex:0 0 14px;
}

.pie-legend-item strong{
font-size:12px;
line-height:1.2;
}

.pie-legend-item em{
font-size:17px;
line-height:1;
justify-self:end;
}

.cart-float{
right:16px;
bottom:18px;
width:58px;
height:58px;
border-radius:20px;
font-size:26px;
z-index:4500;
}

.cart-badge{
top:-7px;
right:-7px;
min-width:26px;
height:26px;
font-size:12px;
}
}

@media(max-width:420px){
.container{
padding-left:12px;
padding-right:12px;
}

.sales-dashboard{
padding:14px;
border-radius:22px;
}

.analytics-card{
padding:14px;
border-radius:20px;
}

#salesPieChart{
width:min(218px,68vw) !important;
height:min(218px,68vw) !important;
}

.pie-legend-item{
padding:10px;
gap:8px;
grid-template-columns:12px minmax(0,1fr) minmax(24px,max-content);
}

.pie-legend-item span{
width:12px;
height:12px;
}

.pie-legend-item strong{
font-size:11px;
}

.pie-legend-item em{
font-size:16px;
}

.cart-float{
right:12px;
bottom:14px;
width:54px;
height:54px;
border-radius:18px;
font-size:24px;
}
}

/* =========================
   FLOATING HISTORY BUTTON
========================= */

.history-float{
    position:fixed;
    left:28px;
    bottom:36px;
    z-index:1500;

    min-width:86px;
    height:70px;
    padding:0 18px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    text-decoration:none;
    border-radius:26px;

    background:
        linear-gradient(135deg, rgba(108,255,143,.98), rgba(216,255,224,.96));
    color:#031008;

    border:1px solid rgba(255,255,255,.55);
    box-shadow:
        0 18px 45px rgba(0,0,0,.34),
        0 0 34px rgba(108,255,143,.34);

    font-weight:900;
    transition:.28s ease;
}

.history-float::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
    transform:translateX(-120%);
    transition:.6s ease;
    pointer-events:none;
}

.history-float:hover{
    transform:translateY(-5px) scale(1.04);
    box-shadow:
        0 24px 58px rgba(0,0,0,.42),
        0 0 46px rgba(108,255,143,.52);
}

.history-float:hover::before{
    transform:translateX(120%);
}

.history-icon{
    font-size:25px;
    line-height:1;
}

.history-text{
    font-size:14px;
    letter-spacing:.2px;
}

@media(max-width:720px){
    .history-float{
        left:18px;
        bottom:24px;
        min-width:68px;
        height:62px;
        padding:0 14px;
        border-radius:22px;
    }

    .history-text{
        display:none;
    }

    .history-icon{
        font-size:28px;
    }
}