:root{--navy:#0f172a;--navy2:#1e293b;--teal:#0f766e;--teal2:#115e59;--bg:#f8fafc;--card:#fff;--muted:#64748b;--line:#e2e8f0;--danger:#b91c1c;--success:#166534;--shadow:0 8px 28px rgba(15,23,42,.08)}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--navy)}a{text-decoration:none;color:inherit}.container{max-width:1180px;margin:auto;padding:0 18px}.top{background:var(--navy);color:#fff;font-size:13px}.top .container{display:flex;justify-content:space-between;padding-top:9px;padding-bottom:9px}.header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.nav{display:flex;align-items:center;gap:24px;min-height:72px}.logo{font-weight:900;letter-spacing:-1px;font-size:25px;color:var(--navy)}.logo span{color:var(--teal)}.search{flex:1;display:flex;max-width:600px}.search input{width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:10px 0 0 10px;outline:0}.search button{border:0;background:var(--teal);color:#fff;padding:0 18px;border-radius:0 10px 10px 0}.navlinks{display:flex;gap:16px;font-weight:700;font-size:14px}.navlinks a:hover{color:var(--teal)}.cats{background:#fff;border-bottom:1px solid var(--line)}.catrow{display:flex;gap:22px;overflow:auto;padding:13px 18px;white-space:nowrap;font-size:14px;font-weight:700}.catrow a:hover{color:var(--teal)}.hero{margin:22px auto;background:linear-gradient(120deg,#0f172a,#134e4a);border-radius:20px;color:#fff;padding:44px 42px;display:grid;grid-template-columns:1.4fr .8fr;gap:25px;overflow:hidden}.hero h1{font-size:44px;line-height:1.05;margin:0 0 14px}.hero p{color:#cbd5e1;max-width:560px}.hero .pill{display:inline-block;background:#ccfbf1;color:#115e59;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800}.btn{display:inline-block;padding:11px 16px;border:0;border-radius:9px;font-weight:800;cursor:pointer}.btn.primary{background:var(--teal);color:#fff}.btn.dark{background:var(--navy);color:#fff}.btn.light{background:#fff;border:1px solid var(--line)}.section{margin:34px auto}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:16px}.section h2{margin:0;font-size:24px}.muted{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 3px 12px rgba(15,23,42,.03)}.thumb{aspect-ratio:1/1;background:#f1f5f9;display:flex;align-items:center;justify-content:center;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover}.thumb .placeholder{font-size:32px;color:#94a3b8}.cardbody{padding:14px}.card h3{font-size:15px;line-height:1.35;margin:0 0 8px}.price{font-weight:900;font-size:18px}.old{text-decoration:line-through;color:#94a3b8;font-size:13px;margin-left:6px}.badge{display:inline-block;background:#ecfdf5;color:#047857;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:800}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.feature{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center;font-weight:800}.product{display:grid;grid-template-columns:1fr 1fr;gap:35px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}.gallery-main{aspect-ratio:1/1;background:#f1f5f9;border-radius:14px;overflow:hidden}.gallery-main img{width:100%;height:100%;object-fit:cover}.detail h1{font-size:32px;margin:0 0 12px}.detail p{line-height:1.7;color:#475569}.qty{display:flex;align-items:center;gap:8px;margin:18px 0}.qty input{width:70px;padding:10px;border:1px solid var(--line);border-radius:8px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.formgrid .full{grid-column:1/-1}label{display:block;font-weight:700;font-size:14px;margin-bottom:5px}input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:#fff}textarea{min-height:110px}.checkout{display:grid;grid-template-columns:1.3fr .7fr;gap:20px}.box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}.row{display:flex;justify-content:space-between;gap:10px;padding:9px 0}.total{border-top:1px solid var(--line);font-size:19px;font-weight:900;padding-top:14px}.alert{padding:12px 14px;border-radius:9px;margin:12px 0}.alert.error{background:#fef2f2;color:var(--danger)}.alert.success{background:#f0fdf4;color:var(--success)}.footer{margin-top:50px;background:var(--navy);color:#cbd5e1;padding:40px 0}.footergrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:25px}.footer h3{color:#fff}.adminbar{background:var(--navy);color:#fff}.adminnav{display:flex;align-items:center;justify-content:space-between;padding:15px 18px}.adminnav .links{display:flex;gap:16px}.adminmain{max-width:1180px;margin:25px auto;padding:0 18px}.admincards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{background:#fff;border:1px solid var(--line);padding:20px;border-radius:12px}.stat b{font-size:26px}.tablewrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.actions{display:flex;gap:7px}.install-card{max-width:500px;margin:70px auto;background:#fff;padding:30px;border-radius:16px;box-shadow:var(--shadow)}.install-card form{display:grid;gap:15px}.admin-form{max-width:850px;background:#fff;padding:25px;border:1px solid var(--line);border-radius:14px}.check{display:flex;gap:8px;align-items:center}.check input{width:auto}.notice{padding:12px 15px;background:#ecfeff;border:1px solid #a5f3fc;border-radius:9px;color:#155e75}
@media(max-width:900px){.grid{grid-template-columns:repeat(3,1fr)}.hero{grid-template-columns:1fr}.features,.admincards{grid-template-columns:repeat(2,1fr)}.checkout,.product{grid-template-columns:1fr}.footergrid{grid-template-columns:1fr 1fr}.nav{flex-wrap:wrap;padding:10px 0}.search{order:3;flex-basis:100%;max-width:none}.navlinks{margin-left:auto}}
@media(max-width:600px){.grid{grid-template-columns:repeat(2,1fr);gap:10px}.hero{padding:28px 22px}.hero h1{font-size:31px}.formgrid{grid-template-columns:1fr}.footergrid{grid-template-columns:1fr}.top .container{font-size:11px}.product{padding:14px}.detail h1{font-size:25px}}