:root{
  --navy:#0b1f3a; --navy2:#12305c; --blue:#2563eb; --green:#10b981; --green2:#059669;
  --bg:#f5f8fc; --card:#fff; --ink:#0f1b33; --muted:#5d6c86; --line:#e3e9f2;
  --red:#e11d48; --amber:#f59e0b; --r:18px; --shadow:0 10px 30px -12px rgba(11,31,58,.18);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{overflow-x:hidden;font-family:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:17px;line-height:1.8;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{width:min(1080px,100% - 32px);margin-inline:auto}
button,input,select,textarea{font:inherit;color:inherit}

/* شريط الإعلان */
#ann{background:var(--amber);color:#3b2600;text-align:center;padding:8px 14px;font-weight:700;font-size:15px}

/* الأعلى */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:10px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px}
.logo i{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--green));display:grid;place-items:center;color:#fff;font-style:normal}
.logo svg{width:22px;height:22px}
.nav nav{display:flex;gap:8px;align-items:center}
.nav nav a.link{padding:8px 14px;border-radius:12px;font-weight:700;color:var(--muted)}
.nav nav a.link:hover{background:#eef3fb;color:var(--ink)}

/* الأزرار */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;border-radius:14px;padding:12px 22px;font-weight:800;font-size:17px;background:#e8eef9;color:var(--navy);transition:.15s;min-height:48px}
.btn:hover{transform:translateY(-1px)}
.btn.green{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;box-shadow:0 10px 22px -10px rgba(5,150,105,.7)}
.btn.blue{background:var(--blue);color:#fff}
.btn.big{font-size:20px;padding:16px 32px;min-height:60px;border-radius:18px}
.btn.red{background:#ffe4ea;color:var(--red)}
.btn.block{width:100%}
.btn:disabled{opacity:.6;cursor:wait;transform:none}

/* الواجهة الرئيسية */
.hero{background:radial-gradient(1200px 500px at 80% -10%,#2b5fd6 0,transparent 60%),linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;padding:64px 0 90px;position:relative;overflow:hidden}
.hero h1{font-size:clamp(30px,6vw,52px);line-height:1.35;font-weight:800;max-width:760px}
.hero h1 b{color:#6ee7b7}
.hero p{font-size:clamp(17px,2.5vw,21px);opacity:.9;max-width:640px;margin:16px 0 28px}
.hero .row{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn:not(.green){background:rgba(255,255,255,.14);color:#fff}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.chips span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:6px 14px;border-radius:99px;font-size:15px;font-weight:700}

section{padding:60px 0}
.title{text-align:center;margin-bottom:34px}
.title h2{font-size:clamp(26px,4vw,36px);font-weight:800}
.title p{color:var(--muted);margin-top:6px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.step .n{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--blue),#60a5fa);color:#fff;font-weight:800;font-size:22px;display:grid;place-items:center;margin-bottom:12px}
.step h3,.price h3{font-size:20px;font-weight:800;margin-bottom:4px}
.step p,.price p{color:var(--muted);font-size:16px}
.price{display:flex;flex-direction:column;gap:6px}
.price .amt{font-size:26px;font-weight:800;color:var(--green2);margin-top:auto;padding-top:10px}
.price .btn{margin-top:8px}
.soft{background:#fff;border-block:1px solid var(--line)}
.why{display:flex;gap:14px;align-items:flex-start}
.why i{flex:none;width:44px;height:44px;border-radius:12px;background:#e7fbf3;color:var(--green2);display:grid;place-items:center;font-size:22px;font-style:normal}
.why b{display:block;font-size:18px}
.why span{color:var(--muted);font-size:15.5px}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:10px}
summary{cursor:pointer;font-weight:800;font-size:18px}
details p{color:var(--muted);margin-top:8px}
.cta{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;border-radius:26px;padding:44px 24px;text-align:center}
.cta h2{font-size:30px;margin-bottom:8px}
.cta p{opacity:.9;margin-bottom:20px}
footer{background:var(--navy);color:#c7d3e8;padding:36px 0 90px;margin-top:60px;font-size:15px}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer a{color:#fff;font-weight:700}

/* نماذج */
.page{padding:36px 0 20px}
.page h1{font-size:clamp(26px,4vw,34px);font-weight:800}
.page .sub{color:var(--muted);margin:4px 0 22px}
.form{max-width:680px;margin-inline:auto}
.field{margin-bottom:16px}
.field label{display:block;font-weight:800;margin-bottom:6px}
.field label small{color:var(--muted);font-weight:500}
.inp{width:100%;padding:14px 16px;border:2px solid var(--line);border-radius:14px;background:#fff;outline:none;font-size:17px;min-height:52px}
.inp:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
textarea.inp{min-height:110px;resize:vertical}
.two{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(max-width:600px){.two{grid-template-columns:1fr}}
.drop{border:2px dashed #b9c6dc;border-radius:14px;padding:18px;text-align:center;color:var(--muted);cursor:pointer;background:#fbfdff}
.drop:hover{border-color:var(--blue)}
.thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.thumbs div{position:relative}
.thumbs img{width:84px;height:84px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.thumbs button{position:absolute;top:-8px;inset-inline-start:-8px;width:26px;height:26px;border-radius:50%;border:0;background:var(--red);color:#fff;cursor:pointer}
.hp{position:absolute;width:0;height:0;opacity:0;overflow:hidden;pointer-events:none;border:0;padding:0}
.alert{padding:14px 16px;border-radius:14px;margin-bottom:16px;font-weight:700}
.alert.err{background:#ffe4ea;color:#9f1239}
.alert.ok{background:#dcfce7;color:#166534}
.alert.warn{background:#fef3c7;color:#92400e}

/* نجاح */
.done-box{text-align:center;max-width:560px;margin:30px auto}
.done-box .tick{width:84px;height:84px;border-radius:50%;background:#dcfce7;color:var(--green2);display:grid;place-items:center;font-size:44px;margin:0 auto 14px}
.code{font-size:44px;font-weight:800;letter-spacing:6px;background:#fff;border:2px dashed var(--green);border-radius:18px;padding:10px 20px;display:inline-block;margin:10px 0;direction:ltr;color:var(--navy)}

/* تتبع */
.track-box{max-width:680px;margin-inline:auto}
.mine{display:grid;gap:10px;margin-top:20px}
.mine button{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;cursor:pointer;text-align:start}
.mine b{direction:ltr;letter-spacing:2px}
.status-pill{display:inline-block;padding:4px 14px;border-radius:99px;font-weight:800;font-size:14.5px}
.s-new{background:#e0e7ff;color:#3730a3}.s-quoted{background:#fef3c7;color:#92400e}.s-receipt{background:#fae8ff;color:#86198f}
.s-paid{background:#dbeafe;color:#1e40af}.s-working{background:#cffafe;color:#155e75}.s-done{background:#dcfce7;color:#166534}.s-cancelled{background:#ffe4ea;color:#9f1239}
.det-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.det-head h2{font-size:24px}
.det-head .c{direction:ltr;letter-spacing:3px;color:var(--muted);font-weight:800}
.timeline{display:flex;margin:18px 0 8px;gap:4px}
.timeline div{flex:1;text-align:center;font-size:12.5px;color:var(--muted);font-weight:700;line-height:1.4}
.timeline div::before{content:'';display:block;height:8px;border-radius:99px;background:#dbe3f0;margin-bottom:8px}
.timeline div.on{color:var(--green2)}
.timeline div.on::before{background:linear-gradient(90deg,var(--green),#34d399)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:16px}
.kv dt{color:var(--muted);font-weight:700}
.kv dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.pay{background:linear-gradient(135deg,#ecfdf5,#eff6ff);border:2px solid #86efac;border-radius:var(--r);padding:20px;margin-top:16px}
.pay .big{font-size:36px;font-weight:800;color:var(--green2)}
.pay pre{white-space:pre-wrap;font-family:inherit;background:#fff;border-radius:12px;padding:12px 14px;margin:10px 0;border:1px solid var(--line);font-weight:700}
.chat{margin-top:18px}
.chat h3{margin-bottom:8px}
.msgs{background:#eaf0f9;border-radius:var(--r);padding:14px;height:380px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.m{max-width:82%;padding:9px 14px;border-radius:16px;font-size:16px;overflow-wrap:anywhere;white-space:pre-wrap}
.m small{display:block;font-size:11.5px;opacity:.65;margin-top:2px}
.m.customer{align-self:flex-start;background:var(--blue);color:#fff;border-end-start-radius:4px}
.m.admin{align-self:flex-end;background:#fff;border-end-end-radius:4px}
.m.system{align-self:center;background:transparent;color:var(--muted);font-size:14px;text-align:center;font-weight:700}
.m img{max-width:220px;border-radius:10px;display:block;margin-top:6px;cursor:zoom-in}
.sendbar{display:flex;gap:8px;margin-top:10px;align-items:flex-end}
.sendbar textarea{min-height:52px;height:52px;flex:1}
.sendbar .btn{min-height:52px;padding:10px 16px}

/* زر عائم للجوال */
.fab{position:fixed;bottom:14px;inset-inline:14px;z-index:25;display:none}
@media(max-width:700px){.fab{display:block}.fab .btn{width:100%;box-shadow:0 14px 30px -8px rgba(5,150,105,.8)}}
#toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 22px;border-radius:14px;font-weight:700;z-index:99;display:none;max-width:92vw}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:100;display:grid;place-items:center;cursor:zoom-out}
.lightbox img{max-width:94vw;max-height:92vh;border-radius:10px}
.loading{text-align:center;color:var(--muted);padding:30px}
.nav nav .btn{white-space:nowrap}
@media(max-width:480px){.logo{font-size:16px;gap:6px}.logo i{width:32px;height:32px}.nav nav{gap:2px}.nav nav a.link{padding:6px 8px;font-size:15px;white-space:nowrap}.nav nav .btn{padding:8px 14px!important;font-size:15px}}

/* ===== الخلفية المتحركة ===== */
.hero::before,.hero::after{content:'';position:absolute;border-radius:50%;filter:blur(90px);animation:float 14s ease-in-out infinite;pointer-events:none}
.hero::before{width:420px;height:420px;background:#2f7bff;top:-120px;inset-inline-end:-80px;opacity:.45}
.hero::after{width:340px;height:340px;background:#10b981;bottom:-140px;inset-inline-start:-100px;opacity:.3;animation-delay:-6s}
@keyframes float{50%{transform:translate(-40px,36px)}}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 70%);mask-image:radial-gradient(circle at 50% 40%,#000,transparent 70%)}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero .wrap{position:relative;z-index:2}
#glow{position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(37,99,235,.13),transparent 65%);transform:translate(-50%,-50%);left:-999px;top:-999px}
#bar{position:fixed;top:0;inset-inline-start:0;height:3px;width:0;background:linear-gradient(90deg,var(--blue),var(--green));z-index:90}
@media(prefers-reduced-motion:reduce){.hero::before,.hero::after{animation:none}}

/* ===== وضع التعديل للمدير ===== */
#editui{position:fixed;bottom:14px;inset-inline-start:14px;z-index:150;background:var(--navy);color:#fff;border-radius:99px;padding:6px 8px 6px 16px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.35)}
#editui button,#editui a{border:0;border-radius:99px;padding:5px 14px;cursor:pointer;font-weight:800;font-size:13.5px;background:#fff;color:var(--navy)}
#editui button.on{background:var(--green);color:#fff}
body.editing p,body.editing h1,body.editing h2,body.editing h3,body.editing span,body.editing li,body.editing summary,body.editing small,body.editing label,body.editing b,body.editing dd,body.editing dt{outline:1px dashed transparent;outline-offset:3px}
body.editing p:hover,body.editing h1:hover,body.editing h2:hover,body.editing h3:hover,body.editing span:hover,body.editing li:hover,body.editing summary:hover,body.editing b:hover,body.editing small:hover{outline-color:rgba(16,185,129,.8);cursor:text}
.edmodal{position:fixed;inset:0;background:rgba(10,20,40,.6);z-index:200;display:grid;place-items:center;padding:16px}
.edmodal .box{background:#fff;border-radius:20px;padding:22px;width:min(520px,100%);box-shadow:0 30px 60px rgba(0,0,0,.4)}
.edmodal h3{margin-bottom:4px}
.edmodal p{color:var(--muted);font-size:14px;margin-bottom:10px;line-height:1.6}
.edmodal textarea{min-height:100px}
.edmodal .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.edmodal *{outline:none!important;cursor:auto}