/* =====================
CardShop Common CSS V1
公共样式
===================== */



*{

box-sizing:border-box;

}



html,
body{

margin:0;

padding:0;

background:#080808;

color:#fff;

font-family:

"Microsoft YaHei",
Arial,
sans-serif;

}



body{

min-height:100vh;

}



a{

text-decoration:none;

color:inherit;

}



img{

max-width:100%;

display:block;

}



button{

cursor:pointer;

border:none;

font-family:inherit;

}





/* =====================
Header
===================== */


.header{

height:72px;

background:#111;

border-bottom:1px solid #222;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 8%;

}



.brand h2{

margin:0;

font-size:30px;

color:#ffc43d;

}



.brand p{

margin:5px 0 0;

font-size:12px;

color:#888;

}



.header nav{

display:flex;

gap:35px;

}



.header nav a{

color:#aaa;

font-size:16px;

}



.header nav a:hover{

color:#ffc43d;

}





/* =====================
Container
===================== */


.container{

width:100%;

max-width:1200px;

margin:auto;

padding:0 20px;

}





/* =====================
Button
===================== */


.primary-btn{

background:#ffc43d;

color:#111;

padding:14px 40px;

border-radius:30px;

font-size:16px;

display:inline-block;

}



.secondary-btn{

color:#ffc43d;

margin-left:20px;

}






.buy-btn{

background:#ffc43d;

color:#111;

height:48px;

border-radius:30px;

width:100%;

font-size:16px;

}






/* =====================
Input
===================== */


input,

textarea,

select{


background:#111;

border:1px solid #333;

color:white;

padding:14px;

border-radius:10px;

outline:none;

}

/* Commercial Pro storefront polish */
:root{
--shop-bg:#0b0f17;
--shop-panel:#111827;
--shop-panel-2:#172033;
--shop-line:#263244;
--shop-text:#f8fafc;
--shop-muted:#94a3b8;
--shop-accent:#22c55e;
--shop-accent-2:#38bdf8;
}

html,
body{
background:var(--shop-bg);
color:var(--shop-text);
}

.header{
background:rgba(11,15,23,.92);
border-bottom:1px solid var(--shop-line);
backdrop-filter:blur(10px);
}

.brand h2{
color:var(--shop-text);
letter-spacing:0;
}

.brand p,
.header nav a{
color:var(--shop-muted);
}

.header nav a:hover{
color:var(--shop-accent);
}

.primary-btn,
.buy-btn{
background:var(--shop-accent);
color:#052e16;
border-radius:8px;
font-weight:700;
}

.secondary-btn{
color:var(--shop-accent-2);
}

input,
textarea,
select{
background:#0f172a;
border:1px solid var(--shop-line);
color:var(--shop-text);
border-radius:8px;
}

input:focus,
textarea:focus,
select:focus{
border-color:var(--shop-accent);
box-shadow:0 0 0 3px rgba(34,197,94,.14);
}

.panel,
.order-card{
background:var(--shop-panel);
border:1px solid var(--shop-line);
border-radius:8px;
box-shadow:0 18px 40px rgba(0,0,0,.22);
}





input:focus,

textarea:focus{

border-color:#ffc43d;

}








/* =====================
Card
===================== */


.card{

background:#151515;

border:1px solid #222;

border-radius:20px;

padding:25px;

}





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


.toast{

position:fixed;

left:50%;

bottom:80px;

transform:translateX(-50%);

background:

rgba(20,20,20,.95);

border:1px solid #ffc43d;

color:#ffc43d;

padding:14px 35px;

border-radius:30px;

z-index:99999;

}





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


.footer{

background:#050505;

border-top:1px solid #111;

padding:60px 8% 30px;

}



.footer-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:30px;

}



.footer h3{

color:#ffc43d;

}



.footer p,

.footer a{

color:#888;

display:block;

margin:10px 0;

}



.copyright{

margin-top:40px;

padding-top:20px;

border-top:1px solid #222;

text-align:center;

color:#666;

}





/* =====================
Mobile
===================== */


@media(max-width:800px){



.header{

padding:0 20px;

}



.header nav{

display:none;

}



.footer-container{

grid-template-columns:

1fr;

}



}