/* ==========================================================================
   ضوء — أدوات صور فورية داخل المتصفح
   Design tokens: darkroom / film-negative theme
   ========================================================================== */

:root{
  --bg:            #141311;
  --bg-alt:        #1c1a17;
  --bg-raised:     #221f1b;
  --paper:         #f2ede3;
  --muted:         #a69c8c;
  --muted-2:       #756b5c;
  --line:          #3a362f;
  --amber:         #e8a33d;
  --amber-dim:     #a97a30;
  --teal:          #3e7c74;
  --teal-dim:      #2c5b55;
  --danger:        #c85c4a;

  --font-display:  "IBM Plex Sans Arabic", "Tajawal", sans-serif;
  --font-body:      "IBM Plex Sans Arabic", "Tajawal", sans-serif;
  --font-mono:      "IBM Plex Mono", monospace;

  --radius: 2px;
  --container: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* --------------------------------------------------------------------------
   Sprocket-hole rule — the recurring film-strip motif
   -------------------------------------------------------------------------- */
.sprockets-row{
  display:flex;
  gap:14px;
  padding:6px 24px;
  overflow:hidden;
}
.sprockets-row span{
  width:7px; height:7px;
  border-radius:1px;
  background:transparent;
  border:1px solid var(--line);
  flex:none;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(20,19,17,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:16px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-weight:700; font-size:1.3rem;
  text-decoration:none;
  letter-spacing:.02em;
}
.brand .dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 10px 1px rgba(232,163,61,.6);
  flex:none;
}
nav.main-nav{ display:flex; gap:28px; }
nav.main-nav a{
  text-decoration:none;
  color:var(--muted);
  font-size:.95rem;
  transition:color .15s ease;
}
nav.main-nav a:hover, nav.main-nav a.active{ color:var(--paper); }
.nav-toggle{ display:none; }
@media (max-width:720px){
  nav.main-nav{ display:none; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{ padding-block:64px 40px; }
.hero-eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.12em;
  color:var(--amber);
  display:flex; align-items:center; gap:10px;
  margin-bottom:18px;
}
.hero-eyebrow::before{ content:""; width:22px; height:1px; background:var(--amber); }
h1.hero-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2rem, 4.2vw, 3.4rem);
  line-height:1.2;
  margin:0 0 18px;
  max-width:18ch;
}
h1.hero-title em{ font-style:normal; color:var(--amber); }
.hero-sub{ color:var(--muted); font-size:1.08rem; max-width:56ch; margin:0 0 28px; }
.hero-trust{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--muted-2);
}
.hero-trust span{ display:flex; align-items:center; gap:8px; }
.hero-trust span::before{ content:""; width:6px; height:6px; background:var(--teal); }

/* --------------------------------------------------------------------------
   Frame / drop-zone — signature element
   -------------------------------------------------------------------------- */
.frame{
  position:relative;
  border:1px solid var(--line);
  background:var(--bg-alt);
  margin-block:28px;
}
.frame-label{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--muted-2);
  letter-spacing:.08em;
  border-bottom:1px solid var(--line);
}
.frame-label b{ color:var(--amber); font-weight:600; }

.dropzone{
  margin:18px;
  padding:48px 24px;
  border:1.5px dashed var(--line);
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone.drag{
  border-color:var(--amber);
  background:rgba(232,163,61,.05);
}
.dropzone .icon{
  width:46px; height:46px;
  margin:0 auto 16px;
  border:1.5px solid var(--muted-2);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted);
  font-size:1.3rem;
}
.dropzone p{ margin:4px 0; color:var(--muted); }
.dropzone .btn{ margin-top:14px; }

/* --------------------------------------------------------------------------
   Buttons / form controls
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px;
  background:var(--amber);
  color:#161310;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.92rem;
  border:none; border-radius:var(--radius);
  cursor:pointer;
  text-decoration:none;
  transition:transform .12s ease, background .12s ease;
}
.btn:hover{ background:#f0b357; transform:translateY(-1px); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.btn.outline{ background:transparent; color:var(--paper); border:1px solid var(--line); }
.btn.outline:hover{ border-color:var(--amber); background:rgba(232,163,61,.06); }

.field{ margin-bottom:20px; }
.field label{
  display:flex; justify-content:space-between;
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:8px;
  font-family:var(--font-mono);
}
.field label b{ color:var(--paper); font-family:var(--font-body); font-weight:600; }
.field .val{ color:var(--amber); }

input[type=range]{ width:100%; accent-color:var(--amber); height:4px; background:var(--line); }
select, input[type=number], input[type=text], input[type=email], textarea{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--paper);
  padding:10px 12px;
  font-family:var(--font-body);
  font-size:.92rem;
  border-radius:var(--radius);
}
select:focus, input:focus, textarea:focus{ border-color:var(--amber); }

.row{ display:flex; gap:16px; }
.row > *{ flex:1; }

.checkline{
  display:flex; align-items:center; gap:8px;
  font-size:.85rem; color:var(--muted);
  margin-top:-8px; margin-bottom:20px;
}
.checkline input{ accent-color:var(--amber); }

/* --------------------------------------------------------------------------
   Tool layout
   -------------------------------------------------------------------------- */
.tool-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:32px;
  align-items:start;
}
@media (max-width:860px){ .tool-grid{ grid-template-columns:1fr; } }

.preview-pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.preview-box{
  border:1px solid var(--line);
  background:var(--bg);
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  position:relative;
}
.preview-box img{ max-height:100%; object-fit:contain; }
.preview-box .tag{
  position:absolute; top:8px; inset-inline-start:8px;
  font-family:var(--font-mono); font-size:.68rem;
  color:var(--muted-2);
  background:rgba(20,19,17,.7);
  padding:2px 8px;
}
.preview-box.empty{ color:var(--muted-2); font-size:.85rem; font-family:var(--font-mono); }

.stat-strip{
  display:flex; justify-content:space-between;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:.82rem;
}
.stat-strip .stat b{ display:block; color:var(--paper); font-size:1.1rem; font-weight:600; margin-top:2px; }
.stat-strip .stat{ color:var(--muted-2); }
.stat-strip .stat.win b{ color:var(--teal); }

.panel{ border:1px solid var(--line); background:var(--bg-alt); padding:24px; }
.panel h3{ font-family:var(--font-display); font-size:1.05rem; margin:0 0 20px; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
section{ padding-block:56px; }
.section-head{ margin-bottom:36px; max-width:60ch; }
.eyebrow-mono{
  font-family:var(--font-mono); font-size:.75rem; color:var(--teal);
  letter-spacing:.1em; margin-bottom:10px; display:block;
}
h2{ font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2.1rem); margin:0 0 12px; }
.section-head p{ color:var(--muted); margin:0; }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } }
.step{ padding:28px 24px; border-inline-start:1px solid var(--line); }
.step:first-child{ border-inline-start:none; }
@media (max-width:760px){
  .step{ border-inline-start:none; border-top:1px solid var(--line); }
  .step:first-child{ border-top:none; }
}
.step .num{ font-family:var(--font-mono); color:var(--amber); font-size:.85rem; margin-bottom:12px; }
.step h4{ margin:0 0 8px; font-size:1.02rem; }
.step p{ margin:0; color:var(--muted); font-size:.92rem; }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:760px){ .cards{ grid-template-columns:1fr; } }
.card{ border:1px solid var(--line); padding:22px; background:var(--bg-alt); }
.card .ic{ color:var(--teal); font-family:var(--font-mono); font-size:.8rem; margin-bottom:12px; }
.card h4{ margin:0 0 8px; font-size:1rem; }
.card p{ margin:0; color:var(--muted); font-size:.9rem; }

.faq-item{ border-top:1px solid var(--line); padding-block:18px; }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; font-weight:600; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--amber); font-family:var(--font-mono); font-size:1.1rem; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ color:var(--muted); margin:12px 0 0; max-width:70ch; }

.ad-slot{
  border:1px dashed var(--line);
  color:var(--muted-2);
  font-family:var(--font-mono);
  font-size:.75rem;
  text-align:center;
  padding:18px;
  margin-block:12px;
}

/* --------------------------------------------------------------------------
   Simple content pages
   -------------------------------------------------------------------------- */
.page-hero{ padding-block:56px 20px; border-bottom:1px solid var(--line); }
.page-hero h1{ font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.6rem); margin:0 0 10px; }
.page-hero p{ color:var(--muted); max-width:60ch; margin:0; }

.prose{ max-width:72ch; padding-block:48px; }
.prose h2{ margin-top:40px; font-size:1.3rem; }
.prose h3{ margin-top:28px; font-size:1.05rem; font-family:var(--font-body); }
.prose p, .prose li{ color:var(--muted); }
.prose ul{ padding-inline-start:20px; }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; padding-block:48px; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer{ border-top:1px solid var(--line); padding-block:40px; margin-top:40px; }
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:24px; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a{ text-decoration:none; color:var(--muted); font-size:.88rem; }
.footer-links a:hover{ color:var(--amber); }
.footer-note{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--muted-2);
  border-top:1px solid var(--line);
  padding-top:20px;
}
.toast{
  position:fixed; bottom:24px; inset-inline-start:50%;
  transform:translateX(-50%);
  background:var(--paper); color:#161310;
  padding:12px 20px;
  font-size:.88rem; font-weight:600;
  border-radius:var(--radius);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:60;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

.article-meta{color:var(--muted-2);font-size:.85rem;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:26px}.article-meta small{font-family:var(--font-mono)}


/* SEO-friendly content and navigation */
.breadcrumbs{max-width:1100px;margin:18px auto 0;padding:0 20px;color:var(--muted,#777);font-size:.88rem}
.breadcrumbs a{color:inherit;text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.content-section{padding:54px 0}
.content-section h2{margin:0 0 12px}
.content-section p{max-width:850px;line-height:1.9;color:var(--muted,#666)}
.guide-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:24px 0 34px}
.guide-links a{display:block;padding:15px 16px;border:1px solid rgba(0,0,0,.1);border-radius:12px;text-decoration:none;color:inherit;background:rgba(255,255,255,.55)}
.guide-links a:hover{transform:translateY(-1px)}
.related-articles{max-width:850px;margin:42px auto;padding:24px;border:1px solid rgba(0,0,0,.1);border-radius:14px}
.related-articles h2{margin-top:0}
.related-articles ul{margin:0;padding-right:22px;line-height:2}