:root{
  --bg:#07080a; --bg-2:#0d0f13; --card:#101319; --card-2:#161a22;
  --line:#222631; --line-2:#2c3340;
  --gold:#d4af37; --gold-2:#e8c766; --gold-soft:rgba(212,175,55,.12);
  --txt:#eef1f6; --muted:#9aa3b2; --muted-2:#6b7280;
  --ok:#3ecf8e; --err:#ff6b6b;
  --radius:16px; --shadow:0 18px 50px rgba(0,0,0,.55);
  --head-font:'Cairo',sans-serif; --body-font:'Tajawal',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--body-font);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(212,175,55,.08), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(212,175,55,.05), transparent 55%),
    var(--bg);
  color:var(--txt); min-height:100vh; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.bg-grain{
  position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Header ===== */
.site-head{position:relative; z-index:1; text-align:center; padding:38px 16px 10px}
.brand{display:inline-flex; align-items:center; gap:10px; margin-bottom:18px}
.monogram{
  width:38px; height:38px; display:grid; place-items:center;
  font-family:var(--head-font); font-weight:800; font-size:20px; color:#0a0a0a;
  background:linear-gradient(145deg,var(--gold-2),var(--gold)); border-radius:10px;
  box-shadow:0 6px 18px rgba(212,175,55,.35);
}
.brand-name{font-family:var(--head-font); font-weight:700; letter-spacing:.16em; font-size:15px}
.badge{
  font-family:var(--head-font); font-weight:700; font-size:11px; color:var(--gold-2);
  border:1px solid var(--gold); border-radius:6px; padding:2px 7px; letter-spacing:.1em;
}
.badge.sm{font-size:10px; padding:1px 5px}
.app-title{font-family:var(--head-font); font-weight:800; font-size:clamp(28px,6vw,44px); margin:6px 0 4px;
  background:linear-gradient(180deg,#fff,#cfd4dd); -webkit-background-clip:text; background-clip:text; color:transparent}
.app-sub{color:var(--muted); margin:0; font-size:14px; letter-spacing:.02em}

/* ===== Layout ===== */
.wrap{position:relative; z-index:1; max-width:880px; margin:0 auto; padding:14px 16px 60px}

/* ===== Tool cards ===== */
.tools{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:18px 0 26px}
@media(min-width:680px){.tools{grid-template-columns:repeat(4,1fr)}}
.tool-card{
  font-family:var(--body-font); cursor:pointer; text-align:right;
  background:linear-gradient(180deg,var(--card),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:16px 14px;
  display:flex; flex-direction:column; gap:4px; color:var(--txt);
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.tool-card:hover{transform:translateY(-3px); border-color:var(--line-2)}
.tool-card.active{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold-soft), var(--shadow); background:linear-gradient(180deg,#15171d,#0d0f13)}
.tool-card .ic{font-size:22px}
.tool-card .t{font-family:var(--head-font); font-weight:700; font-size:15px}
.tool-card .d{color:var(--muted); font-size:12px}

/* ===== Panels ===== */
.panel{display:none; animation:fade .35s ease}
.panel.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ===== Dropzone ===== */
.dropzone{
  border:1.5px dashed var(--line-2); border-radius:var(--radius);
  background:rgba(255,255,255,.015); padding:38px 18px; text-align:center; cursor:pointer;
  transition:border-color .2s, background .2s;
}
.dropzone:hover,.dropzone.drag{border-color:var(--gold); background:var(--gold-soft)}
.dz-title{margin:0 0 6px; font-family:var(--head-font); font-weight:600}
.dz-hint{margin:0; color:var(--muted-2); font-size:12.5px}

/* ===== File list ===== */
.file-list{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.file-row{
  display:flex; align-items:center; gap:10px; background:var(--card-2);
  border:1px solid var(--line); border-radius:12px; padding:10px 12px;
}
.file-row .fi-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px}
.file-row .fi-size{color:var(--muted); font-size:12px}
.file-row .fi-thumb{width:34px; height:34px; border-radius:8px; object-fit:cover; border:1px solid var(--line)}
.iconbtn{
  background:transparent; border:1px solid var(--line-2); color:var(--muted);
  width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:15px; line-height:1;
  transition:.15s;
}
.iconbtn:hover{color:var(--gold); border-color:var(--gold)}
.iconbtn.danger:hover{color:var(--err); border-color:var(--err)}

/* ===== Fields ===== */
.field{margin-top:18px}
.field>label{display:block; font-family:var(--head-font); font-weight:600; font-size:14px; margin-bottom:8px}
input[type=range]{width:100%; accent-color:var(--gold)}
.radios{display:flex; flex-wrap:wrap; gap:14px}
.radios label{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:14px; cursor:pointer}
.radios input{accent-color:var(--gold)}

/* ===== Actions / button ===== */
.actions{margin-top:22px; text-align:center}
.btn-gold{
  font-family:var(--head-font); font-weight:700; font-size:16px; cursor:pointer;
  color:#0a0a0a; background:linear-gradient(145deg,var(--gold-2),var(--gold));
  border:0; border-radius:12px; padding:13px 34px; letter-spacing:.02em;
  box-shadow:0 10px 26px rgba(212,175,55,.3); transition:transform .15s, filter .15s, opacity .15s;
}
.btn-gold:hover:not(:disabled){transform:translateY(-2px); filter:brightness(1.06)}
.btn-gold:disabled{opacity:.4; cursor:not-allowed; box-shadow:none}
.btn-gold.loading{pointer-events:none; opacity:.8}

/* ===== Result ===== */
.result{margin-top:20px}
.result-box{
  border-radius:14px; padding:18px; text-align:center;
  border:1px solid var(--line); background:var(--card-2);
}
.result-box.ok{border-color:rgba(62,207,142,.4)}
.result-box.err{border-color:rgba(255,107,107,.4); color:#ffd2d2}
.result-box .stat{color:var(--gold-2); font-family:var(--head-font); font-weight:700; font-size:22px}
.dl-link{
  display:inline-block; margin-top:12px; text-decoration:none; color:#0a0a0a;
  background:linear-gradient(145deg,var(--gold-2),var(--gold)); font-family:var(--head-font); font-weight:700;
  padding:10px 26px; border-radius:10px;
}
.note{color:var(--muted); font-size:12.5px; margin-top:10px}

/* ===== Pages grid ===== */
.pages-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px; margin-top:18px}
.page-tile{
  position:relative; background:var(--card-2); border:1px solid var(--line); border-radius:12px;
  padding:12px 8px 8px; text-align:center; transition:.15s;
}
.page-tile.del{opacity:.35; border-style:dashed}
.page-sheet{
  width:62px; height:84px; margin:0 auto 8px; background:#f4f4f0; border-radius:4px;
  display:grid; place-items:center; color:#0a0a0a; font-family:var(--head-font); font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); transition:transform .2s;
}
.page-tile .pg-no{font-size:12px; color:var(--muted)}
.page-ctrls{display:flex; justify-content:center; gap:5px; margin-top:8px}
.page-ctrls .iconbtn{width:26px; height:26px; font-size:13px}

/* ===== Spinner ===== */
.spin{display:inline-block; width:16px; height:16px; border:2px solid rgba(0,0,0,.25); border-top-color:#0a0a0a; border-radius:50%; animation:rot .7s linear infinite; vertical-align:-3px; margin-left:8px}
@keyframes rot{to{transform:rotate(360deg)}}

/* ===== Footer ===== */
.site-foot{position:relative; z-index:1; text-align:center; color:var(--muted-2); font-size:12.5px; padding:28px 16px 40px}
.site-foot .dot{margin:0 8px}
.site-foot strong{color:var(--gold-2); font-weight:600}

/* ===== Ad slot (ثابت قبل الفوتر) ===== */
.ad-wrap{
  margin:32px 0 8px; min-height:90px; text-align:center; overflow:hidden;
  border-top:1px solid var(--line); padding-top:24px;
}
.ad-wrap ins{margin:0 auto}

/* ===== Footer links ===== */
.site-foot a{color:var(--muted); text-decoration:none; border-bottom:1px dotted var(--muted-2)}
.site-foot a:hover{color:var(--gold-2); border-color:var(--gold-2)}

/* ===== Legal / content pages ===== */
.legal{
  background:linear-gradient(180deg,var(--card),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px; max-width:760px; margin:6px auto 0;
}
.legal h2{
  font-family:var(--head-font); font-weight:800; font-size:24px; margin:0 0 4px;
  color:var(--gold-2);
}
.legal h3{font-family:var(--head-font); font-weight:700; font-size:16px; margin:22px 0 8px; color:var(--txt)}
.legal p{color:#d4d8e0; font-size:14.5px; margin:8px 0}
.legal ul{margin:8px 0; padding-right:22px; color:#d4d8e0; font-size:14.5px; display:flex; flex-direction:column; gap:6px}
.legal a{color:var(--gold-2); text-decoration:none; border-bottom:1px dotted var(--gold)}
.legal a:hover{color:var(--gold)}
.legal-updated{color:var(--muted-2); font-size:12.5px; margin-top:-2px}
.legal-back{margin-top:26px}

/* ===== Cookie consent bar ===== */
.consent-bar{
  position:fixed; inset-inline:12px; bottom:12px; z-index:50;
  max-width:760px; margin:0 auto;
  background:linear-gradient(180deg,#15171d,#0d0f13);
  border:1px solid var(--line-2); border-radius:14px;
  box-shadow:var(--shadow);
  padding:16px 18px; display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  animation:consent-in .35s ease;
}
.consent-bar.hide{opacity:0; transform:translateY(12px); transition:.3s}
@keyframes consent-in{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.consent-text{flex:1 1 320px; margin:0; font-size:13px; color:var(--muted); line-height:1.7}
.consent-text a{color:var(--gold-2); text-decoration:none; border-bottom:1px dotted var(--gold)}
.consent-actions{display:flex; gap:10px; flex:0 0 auto}
.consent-btn{
  font-family:var(--head-font); font-weight:700; font-size:13px; cursor:pointer;
  border-radius:10px; padding:9px 16px; border:1px solid var(--line-2);
  background:transparent; color:var(--txt); transition:.15s;
}
.consent-btn:hover{border-color:var(--gold)}
.consent-btn.consent-accept{
  color:#0a0a0a; background:linear-gradient(145deg,var(--gold-2),var(--gold)); border:0;
}
.consent-btn.consent-accept:hover{filter:brightness(1.06)}
@media(max-width:480px){
  .consent-bar{flex-direction:column; align-items:stretch; text-align:center}
  .consent-actions{justify-content:center}
}

/* ===== Mode switch (pages panel) ===== */
.mode-switch{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.mode-btn{
  flex:1; min-width:140px; font-family:var(--head-font); font-weight:600; font-size:13.5px;
  cursor:pointer; color:var(--muted); background:var(--card-2);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; transition:.15s;
}
.mode-btn:hover{border-color:var(--line-2); color:var(--txt)}
.mode-btn.active{color:#0a0a0a; background:linear-gradient(145deg,var(--gold-2),var(--gold)); border-color:transparent}