/* سِراج — لمسات الواجهة الحديثة، مع إبقاء أدوات الموقع ووظائفها كما هي */
:root{
  --ink:#142a31;
  --muted:#5d7176;
  --paper:#f3f7f5;
  --card:#ffffff;
  --line:#e0e9e5;
  --green:#13725c;
  --green2:#e7f4ed;
  --lime:#d6f284;
  --amber:#9b5b16;
  --amberbg:#fff5e8;
  --red:#a43c32;
  --redbg:#fff1ee;
  --dark:#10252b;
  --radius:24px;
  --shadow:0 18px 46px rgba(19,46,48,.075);
}
html{scroll-padding-top:22px}
body{
  background:
    radial-gradient(ellipse at 7% 0%,rgba(203,235,216,.28),transparent 34rem),
    radial-gradient(ellipse at 95% 20%,rgba(221,235,204,.24),transparent 31rem),
    var(--paper);
  color:var(--ink);
  letter-spacing:0;
}
.wrap{width:min(1160px,calc(100% - 44px))}
.topbar{padding:18px 0 20px;min-height:82px}
.brand{gap:12px;font-size:21px;letter-spacing:-.45px;color:#17332f}
.brand-mark{
  width:46px;height:46px;border-radius:15px;
  background:linear-gradient(145deg,#e2f69e,#c7eb71);
  color:#12392f;box-shadow:0 8px 18px rgba(89,139,67,.16);
  transition:transform .2s,box-shadow .2s;
}
.brand:hover .brand-mark{transform:translateY(-2px) rotate(-4deg);box-shadow:0 12px 24px rgba(89,139,67,.23)}
.brand small{color:#688078}
.top-note{color:#49675e;background:rgba(255,255,255,.72);border:1px solid #e0eae4;padding:8px 14px;box-shadow:0 4px 14px rgba(19,46,48,.035)}
.hero-shell{
  border:1px solid rgba(255,255,255,.14);
  border-radius:32px;margin-bottom:43px;
  background:radial-gradient(ellipse at 76% 28%,#23473f 0%,transparent 46%),linear-gradient(120deg,#10282d,#142f34 65%,#183a35);
  box-shadow:0 26px 62px rgba(17,48,47,.17);
}
.hero-shell:before{background-image:radial-gradient(rgba(230,247,224,.14) 1px,transparent 1px);background-size:24px 24px;opacity:.46}
.hero{min-height:410px;padding:52px 58px 48px;gap:38px}
.eyebrow{font-size:12px;letter-spacing:.1px;color:#dbf48e}
.eyebrow i{background:#dbf48e;box-shadow:0 0 0 5px rgba(219,244,142,.15)}
h1{font-size:clamp(35px,5vw,58px);letter-spacing:-1.8px;line-height:1.22;margin:19px 0 15px}
.hero p{color:#ccdad7;max-width:500px;font-size:16px;line-height:1.85}
.hero-actions{gap:10px;margin-top:27px}
.btn{border-radius:14px;padding:12px 18px;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.btn-primary{background:linear-gradient(135deg,#dcf59c,#c9ed77);color:#163529}
.btn-primary:hover{background:#e4f8ae;box-shadow:0 10px 24px rgba(197,233,126,.18)}
.btn-quiet{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.17);color:#eef6f2}
.btn-quiet:hover{background:rgba(255,255,255,.14)}
.hero-foot{color:#a5b9b4;font-size:11px;margin-top:18px}
.hero-art{min-height:276px}
.art-glow{width:280px;height:280px;background:rgba(202,239,123,.13);filter:blur(24px)}
.house-card{
  width:min(100%,330px);height:255px;border-radius:27px;
  background:linear-gradient(145deg,rgba(42,76,69,.95),rgba(24,52,54,.98));
  border-color:rgba(222,246,212,.17);box-shadow:0 32px 76px rgba(0,0,0,.32);
}
.house-card:before{border-color:rgba(218,242,145,.24);inset:14px}
.house-card:after{border-color:rgba(255,255,255,.09);inset:27px}
.house-icon{filter:drop-shadow(0 12px 15px rgba(0,0,0,.13))}
.art-chip{background:#203f3d;border-color:rgba(237,248,231,.15);box-shadow:0 12px 24px rgba(0,0,0,.23)}
.art-chip span:first-child{background:rgba(214,242,132,.16);color:#d6f284}
.quick-nav{gap:12px;margin-top:-21px;margin-bottom:54px;grid-template-columns:repeat(4,minmax(0,1fr))}
.quick-card{
  min-height:76px;border-radius:18px;padding:14px 15px;
  border-color:rgba(220,232,225,.94);box-shadow:0 10px 26px rgba(21,53,49,.055);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.quick-card:hover{transform:translateY(-4px);border-color:#b4d5c1;box-shadow:0 15px 28px rgba(21,53,49,.095)}
.quick-icon{border-radius:14px;background:linear-gradient(145deg,#e8f6ec,#dff0e4);color:#18745b}
.quick-card b{color:#19332f;font-size:13px}
.quick-card small{color:#71817b;font-size:10px}
.section{margin-bottom:58px;scroll-margin-top:24px}
.section-head{margin-bottom:22px}
.section-kicker{
  display:inline-flex;align-items:center;gap:7px;padding:5px 10px;
  color:#247257;background:#e7f3eb;border:1px solid #d8eadf;border-radius:999px;
  font-size:10px;letter-spacing:.12px;
}
.section-kicker:before{content:"";width:6px;height:6px;border-radius:50%;background:#42a475}
.section h2{font-size:clamp(25px,3.6vw,35px);letter-spacing:-.8px;margin-top:8px;color:#17332f}
.section-intro{font-size:13px;line-height:1.85;color:#64767a;margin-top:7px}
.card,.ec-shell,.lw-card{border-color:var(--line);box-shadow:0 14px 38px rgba(18,50,47,.055)}
.calculator{padding:28px;border-radius:24px}
.calc-top{padding-bottom:22px}
.calc-top h3{color:#193a34;font-size:20px}
.unit-input .field-label{color:#3c5b51}
.input,.device-row .input{border-color:#d9e5de;background:#fff;border-radius:12px}
.input:focus,.device-row .input:focus{border-color:#4caa80;box-shadow:0 0 0 4px rgba(19,114,92,.10)}
.device-row{background:#fbfdfb;border-color:#e7eee9;border-radius:16px}
.device-row .field-label{color:#61766d}
.add-btn{background:#eef8f1;border-color:#c9e3d2;color:#177052;border-radius:12px}
.add-btn:hover{background:#e2f3e8}
.remove-btn{background:#fff3f0}
.result{background:#f1f6f3;border:1px solid #e8efea}
.result:nth-child(2){background:#edf7f0}
.result:nth-child(3){background:#f4f5ef}
.result:nth-child(4){background:#f8f2e9}
.result strong{color:#183e34}
.load-estimate{background:#edf7f0;border-color:#d5e9db;border-radius:15px}
.warning,.diag-notice,.ec-calc-warning,.lw-disclaimer{border-radius:16px}
.fault-grid{gap:14px}
.fault-card{border-radius:19px;transition:transform .18s,box-shadow .18s}
.fault-card:hover{transform:translateY(-2px);box-shadow:0 15px 34px rgba(20,48,43,.075)}
.fault-card summary{color:#213b35}
.fault-mark{background:#fff2df;color:#a45b17;border-radius:12px}
.diag-panel{padding:26px;border-radius:24px}
.diag-panel-head h3{color:#193a34}
.diag-choice{border-radius:16px;min-height:86px}
.diag-icon{border-radius:13px;background:#e9f5ed;color:#18735a}
.diag-answer{border-radius:13px;background:#f0f8f2;border-color:#d4e8da}
.diag-reset,.diag-back{border-radius:11px}
.safety-panel{
  background:radial-gradient(ellipse at 88% 4%,rgba(47,111,83,.42),transparent 42%),linear-gradient(125deg,#122a2f,#163a37);
  border:1px solid rgba(255,255,255,.08);border-radius:25px;padding:27px 30px;
  box-shadow:0 18px 42px rgba(16,47,44,.12);
}
.safety-title{line-height:1.45}
.safety-item i{border-radius:8px;background:rgba(214,242,132,.17);color:#d6f284}
.contact{border-radius:23px;background:linear-gradient(115deg,#e7f4eb,#f2f7e6);border-color:#d8e8d9}
.contact .btn{border-radius:13px;background:linear-gradient(135deg,#18755c,#12634f);box-shadow:0 8px 18px rgba(19,100,77,.15)}
.footer{border-color:#e0e8e3;color:#73827d;padding:26px 0 36px}
.footer b{color:#2a493f}
.toast{border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 35px rgba(10,30,30,.24);border-radius:14px}
/* أدوات الحساب والإنارة تتبع نظام الألوان نفسه مع إبقاء تخطيطها ووظائفها */
.ec-shell{border-radius:22px}
.ec-tabs{background:linear-gradient(115deg,#153931,#1b4940);padding:13px}
.ec-tabs button,.ec-tools button{border-radius:12px;transition:background .16s,border-color .16s,transform .16s}
.ec-tabs button:hover,.ec-tools button:hover{transform:translateY(-1px)}
.ec-tabs button[aria-selected="true"]{background:#d6f284;color:#18372e}
.ec-tools button{background:#f5f8f5;border-color:#e4ece7;color:#415950}
.ec-tools button[aria-selected="true"]{background:#e7f4ed;border-color:#b7d8c2;color:#13725c}
.ec-calc-btn{background:#13725c;border-radius:13px;box-shadow:0 6px 15px rgba(19,114,92,.12)}
.ec-calc-btn:hover{background:#105e4b}
.ec-result{background:#f2f8f3;border-color:#dbeadf}
.ec-result-item{border-radius:12px}
.lw-shell{--lw-ink:#142a31;--lw-muted:#5d7176;--lw-line:#e0e9e5;--lw-green:#13725c;--lw-pale:#e7f4ed;--lw-lime:#d6f284}
.lw-card{border-radius:23px}
.lw-choice,.lw-fixture{border-radius:16px;border-color:#e1ebe5;transition:transform .16s,border-color .16s,background .16s,box-shadow .16s}
.lw-choice:hover,.lw-fixture:hover{box-shadow:0 8px 20px rgba(19,65,50,.07)}
.lw-step-dot{background:#edf4ef}
.lw-progress .active .lw-step-dot{background:#13725c;box-shadow:0 0 0 4px rgba(19,114,92,.11)}
.lw-btn.primary{background:#13725c;border-color:#13725c}
.lw-btn.primary:hover{background:#105e4b}
.lw-subcard,.lw-plan-card{border-radius:16px;border-color:#e2ebe5}
/* محرر المخطط يبقى مساحة عمل متباينة، وتُنعّم فقط حوافه وتفاعلاته */
.ep-shell{border-radius:22px;box-shadow:0 20px 48px rgba(14,34,43,.16)}
.ep-head,.ep-status{background:#101d2a}
.ep-shell button:focus-visible,.ep-shell input:focus-visible,.ep-shell select:focus-visible{outline-color:#9edb79}
:where(a,button,input,select,summary):focus-visible{outline:3px solid rgba(30,133,100,.27);outline-offset:3px}
@media(max-width:780px){
  .wrap{width:min(100% - 32px,1160px)}
  .topbar{min-height:72px}
  .hero{padding:40px 36px 32px}
  .quick-nav{gap:10px;margin-bottom:46px}
  .quick-card{min-height:72px}
  .section{margin-bottom:49px}
  .calculator{padding:23px}
}
@media(max-width:520px){
  .wrap{width:calc(100% - 24px)}
  .topbar{padding:12px 0 15px;min-height:66px}
  .brand{font-size:17px;gap:9px}
  .brand-mark{height:40px;width:40px;border-radius:13px}
  .top-note{font-size:9px;padding:6px 8px}
  .hero-shell{border-radius:25px;margin-bottom:34px}
  .hero{padding:30px 21px 21px;gap:3px}
  .hero h1{font-size:34px;letter-spacing:-1.1px;line-height:1.25}
  .hero p{font-size:13px;line-height:1.8}
  .hero-foot{font-size:10px;line-height:1.7}
  .hero-actions{gap:8px;margin-top:20px}
  .hero-actions .btn{font-size:11px;padding:10px 11px;border-radius:12px}
  .hero-art{min-height:192px;margin-top:8px}
  .house-card{width:240px;height:178px;border-radius:21px}
  .quick-nav{gap:8px;margin-top:-7px;margin-bottom:40px}
  .quick-card{min-height:73px;padding:10px 9px;border-radius:15px;gap:7px}
  .quick-card b{font-size:10px;line-height:1.55}
  .quick-card small{font-size:9px;line-height:1.45}
  .quick-icon{flex-basis:31px;width:31px;height:31px;border-radius:11px;font-size:13px}
  .section{margin-bottom:43px}
  .section-head{margin-bottom:16px}
  .section h2{font-size:25px;letter-spacing:-.5px}
  .section-intro{font-size:12px;line-height:1.8}
  .calculator{padding:17px 13px;border-radius:19px}
  .calc-top h3{font-size:18px}
  .device-row{border-radius:14px}
  .diag-panel{padding:17px 14px;border-radius:20px}
  .diag-choice{border-radius:14px}
  .safety-panel{padding:21px 17px;border-radius:21px}
  .contact{border-radius:20px}
  .footer{font-size:10px;line-height:1.8}
}
@media(prefers-reduced-motion:reduce){.brand-mark,.quick-card,.fault-card,.btn,.ec-tabs button,.ec-tools button,.lw-choice,.lw-fixture{transition:none!important}}

/* تباين لوحة السلامة، وشبكة الأقسام على الهاتف */
.section .safety-title{color:#fff}
.safety-panel .section-kicker{background:rgba(214,242,132,.09);border-color:rgba(214,242,132,.19)}
.safety-panel .section-kicker:before{background:#d6f284}
@media(max-width:780px){.quick-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}