/* ═══════════════════════════════════════════
   HeMa Tools — CYBER TECH THEME
   ملف التصميم الخارجي - ربطه بالـ HTML
   ═══════════════════════════════════════════ */

:root{
  --bg:#000000;
  --panel:#0a0a0a;
  --panel2:#111111;
  --text:#e0e0e0;
  --muted:#666666;
  --neon:#00FFCC;
  --neon2:#FF006E;
  --line:#1a1a1a;
  --line-glow:rgba(0,255,204,.3);
  --accent:#00FFCC;
  --accent2:#FF006E;
  --purple:#00FFCC;
  --pink:#FF006E;
  --blue:#00FFCC;
  --green:#00FFCC;
}

/* الخلفية العامة */
html,body{
  background:var(--bg) !important;
  color:var(--text);
  font-family:"JetBrains Mono","Cairo",monospace !important;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(rgba(0,255,204,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,255,204,.03) 1px,transparent 1px);
  background-size:40px 40px;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(0,255,204,.08),transparent 60%);
}
body.light{
  --bg:#f8f9fc;--panel:#fff;--panel2:#f0f2f5;
  --text:#0a0a0a;--muted:#666;--line:#e5e7eb;
  background:#f8f9fc !important;
}
body.light::before,body.light::after{display:none}

/* الهيدر */
.topbar{
  background:rgba(0,0,0,.9) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 0 30px rgba(0,255,204,.1) !important;
}
body.light .topbar{background:rgba(255,255,255,.95) !important}

.brand-mark{
  background:linear-gradient(135deg,#00FFCC,#00b8a3) !important;
  border-radius:0 !important;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)) !important;
  box-shadow:0 0 15px var(--line-glow) !important;
  color:#000 !important;
  font-family:"JetBrains Mono",monospace !important;
}
.brand>span:nth-child(2){
  background:linear-gradient(100deg,#fff,#00FFCC) !important;
  background-clip:text !important;-webkit-background-clip:text !important;
  color:transparent !important;
  font-family:"JetBrains Mono",monospace !important;
  letter-spacing:1px;
}
.live-dot{
  background:var(--neon) !important;
  box-shadow:0 0 12px var(--neon) !important;
  animation:neonPulse 1.8s infinite !important;
}
@keyframes neonPulse{
  0%,100%{box-shadow:0 0 12px var(--neon)}
  50%{box-shadow:0 0 25px var(--neon),0 0 40px var(--neon)}
}
.nav-select{
  background:#000 !important;
  border:1px solid var(--line) !important;
  color:var(--neon) !important;
  font-family:"JetBrains Mono",monospace !important;
  font-size:11px !important;
  letter-spacing:1px;
  border-radius:0 !important;
}
.nav-select:focus{outline:1px solid var(--neon) !important}

/* Hero */
.hero:before{display:none !important}
.eyebrow{
  border:1px solid var(--neon) !important;
  color:var(--neon) !important;
  background:rgba(0,255,204,.05) !important;
  box-shadow:0 0 20px var(--line-glow) !important;
  font-family:"JetBrains Mono",monospace !important;
  letter-spacing:2px;
  border-radius:0 !important;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.hero h1{
  font-family:"JetBrains Mono",monospace !important;
  letter-spacing:-1.5px !important;
  color:#fff !important;
}
.gradient-text{
  background:linear-gradient(100deg,#00FFCC,#fff 50%,#FF006E) !important;
  background-clip:text !important;-webkit-background-clip:text !important;
  color:transparent !important;
  filter:drop-shadow(0 0 20px rgba(0,255,204,.5));
}
.hero p{color:#888 !important}
.hero-stats span{
  background:#000 !important;
  border:1px solid var(--line) !important;
  color:var(--neon) !important;
  border-radius:0 !important;
  font-family:"JetBrains Mono",monospace !important;
  font-size:10px !important;
  letter-spacing:1px;
}

/* البحث */
.search-wrap input{
  background:#000 !important;
  border:1px solid var(--line) !important;
  color:var(--neon) !important;
  font-family:"JetBrains Mono",monospace !important;
  border-radius:0 !important;
  box-shadow:none !important;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
.search-wrap input:focus{
  border-color:var(--neon) !important;
  box-shadow:0 0 25px var(--line-glow),inset 0 0 15px rgba(0,255,204,.05) !important;
}
.search-wrap input::placeholder{color:#555 !important}
.search-icon{color:var(--neon) !important}

/* التصنيفات */
.chip{
  background:#000 !important;
  border:1px solid var(--line) !important;
  color:#888 !important;
  font-family:"JetBrains Mono",monospace !important;
  border-radius:0 !important;
  font-size:11px !important;
  letter-spacing:1px;
  padding:8px 16px !important;
}
.chip:hover{border-color:var(--neon) !important;color:var(--neon) !important;background:rgba(0,255,204,.05) !important}
.chip.active{
  background:var(--neon) !important;
  color:#000 !important;
  border-color:var(--neon) !important;
  box-shadow:0 0 25px var(--line-glow) !important;
}

/* كروت الأدوات */
.section-head h2{
  font-family:"JetBrains Mono",monospace !important;
  color:#fff !important;
  letter-spacing:.5px;
}
.section-head h2::before{content:"// ";color:var(--neon)}

.tool-card{
  background:#0a0a0a !important;
  border:1px solid var(--line) !important;
  border-radius:0 !important;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  transition:.3s !important;
  padding:20px !important;
}
.tool-card:hover{
  border-color:var(--neon) !important;
  box-shadow:0 0 35px var(--line-glow),inset 0 0 25px rgba(0,255,204,.05) !important;
  transform:translateY(-3px) !important;
}
.tool-icon{
  background:#000 !important;
  border:1px solid var(--neon) !important;
  border-radius:0 !important;
  box-shadow:0 0 15px var(--line-glow) !important;
  font-size:20px !important;
}
.tool-card h3{
  font-family:"JetBrains Mono",monospace !important;
  color:#fff !important;
  font-size:14px !important;
  letter-spacing:.3px;
}
.tool-card p{color:#666 !important;font-size:11px !important}
.tool-tag{
  background:rgba(0,255,204,.08) !important;
  border:1px solid rgba(0,255,204,.3) !important;
  color:var(--neon) !important;
  font-family:"JetBrains Mono",monospace !important;
  border-radius:0 !important;
  font-size:9px !important;
  letter-spacing:1px;
}
.tool-bottom{border-top:1px solid var(--line) !important;padding-top:12px !important}

/* صفحة الأداة */
.breadcrumb{
  font-family:"JetBrains Mono",monospace !important;
  color:#666 !important;
  letter-spacing:1px;
}
.breadcrumb a{color:var(--neon) !important}
.page-head h1{
  font-family:"JetBrains Mono",monospace !important;
  color:#fff !important;
  letter-spacing:-1px;
  text-shadow:0 0 30px rgba(0,255,204,.3);
}
.page-head p{color:#888 !important}

/* بانل الأداة */
.tool-panel{
  background:#0a0a0a !important;
  border:1px solid var(--line) !important;
  border-radius:0 !important;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
  position:relative;
  box-shadow:0 0 50px rgba(0,255,204,.08) !important;
}
.tool-panel::before{
  content:"// TOOL.ACTIVE";position:absolute;top:-11px;right:20px;
  background:#000;padding:0 10px;
  font-family:"JetBrains Mono",monospace;font-size:10px;
  color:var(--neon);letter-spacing:2px;
}

/* الحقول */
.field label{
  color:var(--neon) !important;
  font-family:"JetBrains Mono",monospace !important;
  font-size:11px !important;
  letter-spacing:1px;
  text-transform:uppercase;
}
.field input,.field textarea,.field select{
  background:#000 !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  border-radius:0 !important;
  font-family:"JetBrains Mono",monospace !important;
  transition:.3s !important;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--neon) !important;
  box-shadow:0 0 20px var(--line-glow) !important;
  outline:none !important;
}

/* الأزرار */
.action{
  background:var(--neon) !important;
  color:#000 !important;
  border:1px solid var(--neon) !important;
  border-radius:0 !important;
  font-family:"JetBrains Mono",monospace !important;
  font-weight:700 !important;
  letter-spacing:1px;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:.3s !important;
}
.action:hover{
  box-shadow:0 0 30px var(--neon) !important;
  transform:translateY(-1px);
}
.action.secondary,.action.sec{
  background:transparent !important;
  color:var(--neon) !important;
  border:1px solid var(--neon) !important;
}
.action.secondary:hover,.action.sec:hover{
  background:rgba(0,255,204,.1) !important;
  box-shadow:0 0 25px var(--line-glow) !important;
}

/* النتيجة */
.result{
  background:#000 !important;
  border:1px solid var(--line) !important;
  color:var(--neon) !important;
  border-radius:0 !important;
  font-family:"JetBrains Mono",monospace !important;
  box-shadow:inset 0 0 25px rgba(0,255,204,.05) !important;
}

/* الفوتر */
footer{
  background:transparent !important;
  border-top:1px solid var(--line) !important;
}
.footer-title{
  color:var(--neon) !important;
  font-family:"JetBrains Mono",monospace !important;
  letter-spacing:2px;
}
.footer-title::before{content:"// "}
.footer-links a:hover{color:var(--neon) !important}
.copyright-line{
  font-family:"JetBrains Mono",monospace !important;
  letter-spacing:1px;
  color:#444 !important;
}

/* Toast */
.toast{
  background:#000 !important;
  border:1px solid var(--neon) !important;
  color:var(--neon) !important;
  border-radius:0 !important;
  font-family:"JetBrains Mono",monospace !important;
  box-shadow:0 0 30px var(--line-glow) !important;
  letter-spacing:1px;
}

/* زر الواتساب */
.whatsapp-float{
  background:var(--neon) !important;
  color:#000 !important;
  border-radius:0 !important;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  box-shadow:0 0 25px var(--neon) !important;
  animation:neonPulse 1.8s infinite !important;
}

/* FAQ */
.faq-item{
  background:#0a0a0a !important;
  border:1px solid var(--line) !important;
  border-radius:0 !important;
}
.faq-item summary{
  font-family:"JetBrains Mono",monospace !important;
  color:#fff !important;
}
.faq-item[open] summary{color:var(--neon) !important;border-bottom:1px solid var(--line) !important}
.faq-item p{color:#888 !important}

/* Related */
.related-card{
  background:#0a0a0a !important;
  border:1px solid var(--line) !important;
  border-radius:0 !important;
  color:#888 !important;
  font-family:"JetBrains Mono",monospace !important;
}
.related-card:hover{border-color:var(--neon) !important;color:var(--neon) !important}

/* Pro sections */
.pro-tool-section{border-top:1px solid var(--line) !important}
.pro-tool-section h2{
  color:var(--neon) !important;
  font-family:"JetBrains Mono",monospace !important;
}
.pro-tool-section h2::before{content:"// ";color:var(--neon2)}

/* Responsive */
@media(max-width:600px){
  .hero h1{font-size:32px !important}
  .tool-card{padding:14px !important}
}