:root{--primary:#0e7490;--primary-d:#155e75;--accent:#f59e0b;--ink:#0f172a;--muted:#64748b;--bg:#f1f5f9;--line:#e2e8f0;--danger:#dc2626;--radius:14px}
*{box-sizing:border-box}body{margin:0;font-family:'Cairo',Tahoma,sans-serif;background:var(--bg);color:var(--ink);line-height:1.7}
img{max-width:100%;display:block}a{text-decoration:none;color:var(--primary)}
.container{max-width:1150px;margin:0 auto;padding:0 16px}
.topbar{background:var(--primary-d);color:#e0f2fe;font-size:.85rem;display:flex;justify-content:space-between;gap:10px;padding:6px 18px;flex-wrap:wrap}
.header{background:#fff;box-shadow:0 1px 4px rgb(0 0 0/.08);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 22px;flex-wrap:wrap;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}.brand img{width:46px;height:46px}
.brand strong{display:block;font-size:1.15rem;font-weight:900}.brand small{color:var(--muted);font-size:.75rem}
.nav{display:flex;gap:18px;font-weight:700}.nav a{color:var(--ink)}
.nav .count{background:var(--accent);color:#fff;border-radius:20px;padding:0 8px;font-size:.75rem}
.hero{background:linear-gradient(135deg,var(--primary-d),var(--primary));color:#fff;text-align:center;padding:56px 16px}
.hero h1{margin:0 0 6px;font-size:2rem;font-weight:900}.hero p{margin:0 0 22px;opacity:.92}
.search{display:flex;gap:8px;max-width:560px;margin:auto}.search input{flex:1;border:none;border-radius:10px;padding:12px 16px;font:inherit}
.section-title{margin:26px 0 14px;font-weight:900}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;padding-bottom:40px}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 5px rgb(0 0 0/.08);display:flex;flex-direction:column;transition:.2s}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgb(0 0 0/.12)}
.card>a img{height:190px;width:100%;object-fit:cover;background:#eef6fb}
.card-body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{margin:0;font-size:1rem;font-weight:800}.card-body p{color:var(--muted);font-size:.85rem;margin:0;flex:1}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.badge{border-radius:20px;padding:2px 12px;font-size:.75rem;font-weight:700}.badge.price{background:#fef3c7;color:#92400e}
.btn{display:inline-block;border:none;cursor:pointer;border-radius:10px;padding:9px 18px;font:inherit;font-weight:700;font-size:.9rem}
.btn-primary{background:var(--primary);color:#fff}.btn-accent{background:var(--accent);color:#fff}
.btn-danger{background:var(--danger);color:#fff}.btn-ghost{background:#e2e8f0;color:var(--ink)}
.btn-sm{padding:5px 12px;font-size:.8rem;border-radius:8px}
.product{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:26px;background:#fff;border-radius:var(--radius);padding:22px;margin:26px 0;box-shadow:0 1px 5px rgb(0 0 0/.08)}
.p-info h1{margin:0 0 8px;font-size:1.4rem;font-weight:900}.p-info .desc{color:var(--muted)}
.specs{width:100%;border-collapse:collapse;margin:14px 0;font-size:.9rem}
.specs th,.specs td{border:1px solid var(--line);padding:8px 12px;text-align:right}
.specs th{background:#f0fdfa;width:30%;font-weight:700}
.order-box{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:14px}
.order-box input[type=number]{width:110px;padding:9px;border:1px solid var(--line);border-radius:10px;font:inherit}
.note{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:10px 14px;font-size:.85rem;margin-top:16px}
.field{margin-bottom:14px}.field label{display:block;font-weight:700;font-size:.88rem;margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;background:#fff}
.field textarea{min-height:90px;resize:vertical}
.panel{background:#fff;border-radius:var(--radius);padding:20px;margin:22px 0;box-shadow:0 1px 5px rgb(0 0 0/.08)}
.panel h2{margin-top:0;font-size:1.1rem;font-weight:900;border-bottom:2px solid var(--line);padding-bottom:10px}
.table-wrap{overflow-x:auto}.table{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff}
.table th,.table td{border:1px solid var(--line);padding:9px 12px;text-align:right;vertical-align:middle}
.table th{background:#f8fafc;font-weight:800}.table img{width:52px;height:52px;object-fit:cover;border-radius:8px}
.alert{border-radius:10px;padding:10px 16px;margin:14px 0;font-weight:700;font-size:.9rem}
.alert.success{background:#dcfce7;color:#166534}.alert.error{background:#fee2e2;color:#991b1b}
.empty{color:var(--muted);text-align:center;padding:30px 0}
.st-new{background:#dbeafe;color:#1d4ed8}.st-contacted{background:#fef9c3;color:#854d0e}
.st-confirmed{background:#dcfce7;color:#166534}.st-completed{background:#d1fae5;color:#065f46}
.st-cancelled{background:#fee2e2;color:#991b1b}
.footer{background:var(--primary-d);color:#e0f2fe;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 30px;margin-top:30px}
.footer a{color:#fff}.footer p{margin:4px 0;font-size:.9rem}
body.admin{background:#eef2f7}.admin-wrap{display:flex;min-height:100vh}
.sidebar{width:230px;background:#0f172a;color:#cbd5e1;flex-shrink:0}
.side-brand{display:flex;gap:10px;align-items:center;padding:18px;font-weight:900;color:#fff}.side-brand img{width:34px}
.sidebar nav{display:flex;flex-direction:column}
.sidebar nav a{color:#cbd5e1;padding:12px 20px;border-bottom:1px solid #1e293b;font-weight:700;font-size:.92rem}
.sidebar nav a:hover{background:#1e293b;color:#fff}
.admin-content{flex:1;padding:24px;max-width:1100px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:22px}
.stat{background:#fff;border-radius:var(--radius);padding:16px;box-shadow:0 1px 4px rgb(0 0 0/.07)}
.stat b{font-size:1.6rem;display:block;color:var(--primary)}.stat span{color:var(--muted);font-size:.85rem;font-weight:700}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filters a{background:#fff;border:1px solid var(--line);border-radius:20px;padding:4px 14px;font-size:.82rem;font-weight:700;color:var(--ink)}
.filters a.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-d),#0f172a)}
.login-box{background:#fff;border-radius:var(--radius);padding:34px;width:min(400px,92%);box-shadow:0 20px 50px rgb(0 0 0/.3)}
.login-box h1{margin:0 0 4px;font-size:1.25rem;text-align:center;font-weight:900}
.login-box p{text-align:center;color:var(--muted);margin:0 0 18px;font-size:.85rem}
.login-box img{width:64px;margin:0 auto 12px}
@media(max-width:800px){.product{grid-template-columns:1fr}.admin-wrap{flex-direction:column}
.sidebar{width:100%}.sidebar nav{flex-direction:row;flex-wrap:wrap}.sidebar nav a{border:none;padding:10px 14px}.search{flex-direction:column}}
.st-quoted{background:#e0e7ff;color:#3730a3}

.milestones{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:16px 0}
.milestone{background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;padding:10px;text-align:center}
.milestone.active{background:#dcfce7;border-color:#16a34a}
.milestone .mi{font-size:1.5rem;display:block}
.milestone .ml{font-weight:800;font-size:.8rem;color:#64748b}
.milestone .md{font-size:.7rem;color:#94a3b8;margin-top:4px}
.milestone.active .ml{color:#166534}
.mini-check{margin-top:6px}
.mini-check button{border:none;background:#0e7490;color:#fff;padding:3px 10px;border-radius:6px;cursor:pointer;font-weight:700;font-size:.72rem}
.mini-check button.off{background:#dc2626}
.stage-pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:800;background:#dbeafe;color:#1e40af}
.stage-pill.s-quoted{background:#fef3c7;color:#92400e}
.stage-pill.s-approved{background:#e0e7ff;color:#3730a3}
.stage-pill.s-delivered{background:#cffafe;color:#0e7490}
.stage-pill.s-paid{background:#dcfce7;color:#166534}
.stage-pill.s-closed{background:#1e293b;color:#fff}