:root{
  --bg:#0e1116; --panel:#161b22; --panel-2:#1c232d; --line:#2a323d;
  --text:#e6edf3; --muted:#9aa7b4; --accent:#4f8cff; --accent-2:#7c5cff;
  --good:#2ecc71; --warn:#f1c40f; --bad:#e74c3c;
  --radius:14px; --radius-sm:9px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); background:radial-gradient(1200px 600px at 80% -10%,#1b2440 0%,var(--bg) 55%);
  color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 22px; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
  background:rgba(14,17,22,.82); backdrop-filter:blur(10px);
}
.brand{display:flex; align-items:center; gap:12px}
.logo-mark{
  display:grid; place-items:center; width:40px; height:40px; border-radius:11px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
}
.brand h1{font-size:1.05rem; margin:0; letter-spacing:.2px}
.tagline{margin:0; font-size:.78rem; color:var(--muted)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--line); background:var(--panel-2); color:var(--text);
  padding:9px 14px; border-radius:var(--radius-sm); font-size:.86rem; font-weight:600;
  transition:.15s ease; line-height:1;
}
.btn:hover{border-color:var(--accent); transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); border:none; color:#fff}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent}
.mini-btn{
  border:1px solid var(--line); background:var(--panel); color:var(--muted);
  font-size:.7rem; padding:5px 8px; border-radius:7px; cursor:pointer;
}
.mini-btn:hover{color:var(--text); border-color:var(--accent)}
.mini-btn.active{background:var(--accent); color:#fff; border-color:var(--accent)}
.link-btn{background:none; border:none; color:var(--accent); cursor:pointer; font-size:.8rem; padding:4px 0}

/* ---------- layout ---------- */
.layout{
  display:grid; grid-template-columns:minmax(360px,440px) 1fr; gap:28px;
  max-width:1280px; margin:0 auto; padding:26px 22px 40px;
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .preview-pane{order:-1}
}

/* ---------- editor cards ---------- */
.editor{display:flex; flex-direction:column; gap:14px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.card>summary{
  list-style:none; cursor:pointer; padding:14px 16px; font-weight:700; font-size:.92rem;
  display:flex; align-items:center; gap:10px; user-select:none;
}
.card>summary::-webkit-details-marker{display:none}
.card>summary::after{content:"⌄"; margin-left:auto; color:var(--muted); transition:.2s; font-size:1.1rem}
.card[open]>summary::after{transform:rotate(180deg)}
.step{
  display:grid; place-items:center; width:22px; height:22px; border-radius:7px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font-size:.78rem;
}
.optional{font-size:.68rem; color:var(--muted); font-weight:500; border:1px solid var(--line); padding:2px 7px; border-radius:20px}
.card-body{padding:4px 16px 18px; display:flex; flex-direction:column; gap:12px}

/* ---------- form fields ---------- */
.field{display:flex; flex-direction:column; gap:6px; font-size:.8rem; color:var(--muted)}
.field>span{font-weight:600}
.field input[type=text],.field input[type=tel],.field input[type=email],.field input[type=url],
.field input[type=date],.field textarea,.field select{
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  border-radius:9px; padding:10px 11px; font-size:.88rem; font-family:inherit; width:100%;
  transition:border-color .15s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--accent)}
.field textarea{resize:vertical}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
.field.checkbox{flex-direction:row; align-items:center; gap:8px}
.field.checkbox span{font-weight:500; color:var(--text)}
.field.toggle{padding-top:4px}
.hint{font-size:.72rem; color:var(--muted); margin:2px 0 0; line-height:1.4}
.muted{color:var(--muted)} .small{font-size:.76rem; margin:2px 0}

.content-panel{display:flex; flex-direction:column; gap:12px}
details.sub{border:1px solid var(--line); border-radius:9px; padding:0 11px}
details.sub>summary{cursor:pointer; padding:10px 0; font-size:.8rem; color:var(--muted); font-weight:600}
details.sub[open]{padding-bottom:11px}

/* range */
.range-field span{display:flex; justify-content:space-between; align-items:center}
.range-field em{color:var(--accent); font-style:normal; font-weight:700}
input[type=range]{-webkit-appearance:none; appearance:none; height:5px; border-radius:5px; background:var(--line); width:100%}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); cursor:pointer; border:2px solid #fff}
input[type=range]::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:var(--accent); cursor:pointer; border:2px solid #fff}

/* color inputs */
.color-wrap{display:flex; align-items:center; gap:8px}
input[type=color]{width:46px; height:34px; border:1px solid var(--line); border-radius:8px; background:var(--panel-2); cursor:pointer; padding:2px}

.bg-actions{display:flex; gap:10px}
.upload-btn{justify-content:center}
.upload-btn.full{width:100%}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.gallery .swatch{
  aspect-ratio:9/16; border-radius:8px; cursor:pointer; border:2px solid transparent;
  background-size:cover; background-position:center; transition:.15s;
}
.gallery .swatch:hover{transform:scale(1.05)}
.gallery .swatch.active{border-color:#fff; box-shadow:0 0 0 2px var(--accent)}

/* ---------- preview ---------- */
.preview-pane{display:flex; flex-direction:column; align-items:center; gap:12px; position:sticky; top:90px; align-self:start}
.phone{
  position:relative; width:300px; max-width:78vw; aspect-ratio:1170/2532;
  border-radius:42px; padding:11px; background:linear-gradient(160deg,#2b3340,#11151b);
  box-shadow:var(--shadow),inset 0 0 0 2px #000; 
}
.phone-screen{
  position:relative; width:100%; height:100%; border-radius:32px; overflow:hidden;
  background:#000; touch-action:none;
}
.bg-canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.phone-notch{
  position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:34%; height:22px; background:#000; border-radius:0 0 14px 14px; z-index:5;
}

/* safe zones */
.safe-zones{position:absolute; inset:0; pointer-events:none; z-index:4}
.safe-zones.hidden{display:none}
.sz{position:absolute; left:6%; right:6%; border:1.5px dashed rgba(255,255,255,.5); border-radius:10px; display:grid; place-items:center}
.sz span{font-size:.55rem; color:rgba(255,255,255,.8); background:rgba(0,0,0,.35); padding:1px 6px; border-radius:20px; letter-spacing:.3px}
.sz-clock{top:7%; height:13%; border-color:rgba(79,140,255,.7)}
.sz-notif{top:22%; height:12%; border-color:rgba(255,255,255,.35)}
.sz-bottom{bottom:4%; height:9%; border-color:rgba(255,255,255,.35)}

/* overlay text */
.overlay-text{position:absolute; left:0; right:0; padding:0 8%; text-align:center; z-index:3; pointer-events:none; text-shadow:0 1px 6px rgba(0,0,0,.55)}
.overlay-text.pos-top{top:36%} .overlay-text.pos-bottom{bottom:16%}
.ov-title{font-size:1.15rem; font-weight:800; line-height:1.15}
.ov-sub{font-size:.8rem; opacity:.92; margin-top:3px}

/* draggable QR */
.qr-holder{
  position:absolute; z-index:6; cursor:grab; touch-action:none;
  width:34%; left:33%; top:60%;
}
.qr-holder:active{cursor:grabbing}
.qr-holder:focus{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.qr-inner{width:100%; height:100%; box-sizing:border-box}
.qr-inner canvas,.qr-inner svg{width:100%!important; height:auto!important; display:block; border-radius:inherit}
.qr-panel-rounded .qr-inner{background:#fff; border-radius:14%}
.qr-panel-square .qr-inner{background:#fff}
.qr-panel-none .qr-inner{background:transparent}
.resize-handle{
  position:absolute; right:-7px; bottom:-7px; width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid var(--accent); cursor:nwse-resize; z-index:7;
}

/* scan status */
.scan-status{font-size:.78rem; font-weight:600; min-height:18px; display:flex; align-items:center; gap:7px}
.scan-status .dot{width:9px; height:9px; border-radius:50%}
.scan-status.good{color:var(--good)} .scan-status.good .dot{background:var(--good)}
.scan-status.warn{color:var(--warn)} .scan-status.warn .dot{background:var(--warn)}
.preview-hint{font-size:.72rem; color:var(--muted); text-align:center; margin:0; max-width:300px}

/* footer + dialog */
.footer{text-align:center; padding:18px; font-size:.76rem; color:var(--muted); border-top:1px solid var(--line)}
.footer a{color:var(--accent); text-decoration:none}
dialog{border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:var(--radius); max-width:440px; padding:24px; box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.55); backdrop-filter:blur(3px)}
dialog h2{margin:0 0 12px} dialog p{color:var(--muted); font-size:.88rem; line-height:1.5}
dialog .btn{margin-top:10px}

@media (max-width:560px){
  .grid-3{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(5,1fr)}
  .topbar h1{font-size:.95rem}
}

/* ---------- magnetic alignment guides ---------- */
.align-guides{position:absolute; inset:0; pointer-events:none; z-index:8}
.align-guides .guide{position:absolute; opacity:0; transition:opacity .08s ease}
.align-guides .guide::after{content:""; position:absolute; inset:0; background:#ff3ea5; box-shadow:0 0 6px rgba(255,62,165,.9)}
.guide-v{top:0; bottom:0; left:50%; width:1px; transform:translateX(-.5px)}
.guide-h{left:0; right:0; top:50%; height:1px; transform:translateY(-.5px)}
.guide-t{left:0; right:0; top:33.333%; height:1px; transform:translateY(-.5px)}
.guide-b{left:0; right:0; top:66.666%; height:1px; transform:translateY(-.5px)}
.guide.show{opacity:.95}
.qr-holder.snapping{box-shadow:0 0 0 2px rgba(255,62,165,.85)}

/* ---------- fix: ensure hidden panels actually disappear ----------
   .content-panel sets display:flex, which would otherwise override the
   browser's default [hidden]{display:none}. This attribute selector has
   higher specificity, so non-selected content panels truly hide. */
.content-panel[hidden]{display:none !important}
[hidden]{display:none !important}

/* ---------- SEO content sections ---------- */
.seo-content{max-width:880px; margin:10px auto 0; padding:10px 22px 40px; line-height:1.65}
.seo-content section{margin:34px 0}
.seo-content h2{font-size:1.5rem; margin:0 0 12px; letter-spacing:.2px}
.seo-content h3{font-size:1rem; margin:0 0 6px}
.seo-content p{color:var(--muted); margin:0 0 10px}
.seo-content strong{color:var(--text)}
.seo-content .steps{color:var(--muted); padding-left:20px; display:flex; flex-direction:column; gap:10px}
.seo-content .steps li{padding-left:6px}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.feature{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.feature h3{color:var(--text)}
.feature p{margin:0; font-size:.88rem}
.faq-item{border-top:1px solid var(--line); padding:16px 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item h3{color:var(--text); font-size:1.02rem}
.faq-item p{margin:0}
@media (max-width:720px){ .feature-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .feature-grid{grid-template-columns:1fr} }

/* ====================================================================
   MOBILE COMPATIBILITY
   ==================================================================== */
@media (max-width:900px){
  /* preview shouldn't stick on small screens — it would eat the viewport */
  .preview-pane{position:static; top:auto; align-self:auto}
}

@media (max-width:640px){
  body{font-size:15px}
  .topbar{flex-wrap:wrap; padding:11px 14px; gap:10px; position:relative; z-index:60}
  .tagline{display:none}
  .brand h1{font-size:1rem}
  #downloadBtn{margin-left:auto; padding:10px 13px; font-size:.82rem}
  .layout{padding:16px 12px 30px; gap:18px}
  .phone{width:264px; max-width:84vw; border-radius:34px; padding:9px}
  .seo-content{padding:6px 14px 30px}
  .seo-content h2{font-size:1.28rem}
  .card>summary{padding:13px 14px; font-size:.9rem}
  .preview-hint{max-width:280px}
  /* 16px inputs prevent iOS Safari from auto-zooming on focus */
  .field input, .field select, .field textarea{font-size:16px}
}

@media (max-width:400px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .bg-actions{flex-direction:column}
  .bg-actions .btn{width:100%; justify-content:center}
  .gallery{grid-template-columns:repeat(4,1fr)}
  .phone{width:230px; max-width:80vw}
}

/* ---------- share bar ---------- */
.share-bar{max-width:880px; margin:0 auto; padding:20px 22px 8px; text-align:center}
.share-bar h2{font-size:1.3rem; margin:0 0 6px}
.share-bar p{color:var(--muted); font-size:.9rem; margin:0 0 16px}
.share-icons{display:flex; flex-wrap:wrap; justify-content:center; gap:12px}
.sh{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  color:#fff; border:none; cursor:pointer; text-decoration:none;
  transition:transform .15s ease, filter .15s ease; background:var(--panel-2);
}
.sh:hover{transform:translateY(-3px); filter:brightness(1.1)}
.sh-wa{background:#25D366}
.sh-fb{background:#1877F2}
.sh-x{background:#000; border:1px solid #333}
.sh-li{background:#0A66C2}
.sh-tg{background:#229ED9}
.sh-mail{background:#5b6470}
.sh-copy{background:#2a323d; border:1px solid var(--line); color:var(--text)}
.sh-native{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff}
.copied-msg{display:inline-block; margin-top:12px; color:var(--good); font-size:.85rem; font-weight:600}
@media (max-width:640px){ .share-bar{padding:14px 16px 4px} .sh{width:44px; height:44px} }

/* ---------- donate ---------- */
.donate{
  max-width:680px; margin:24px auto 8px; padding:28px 26px;
  text-align:center; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.donate h2{font-size:1.4rem; margin:0 0 12px}
.donate p{color:var(--muted); line-height:1.65; margin:0 0 12px}
.donate .donate-lead{color:var(--text)}
.donate .donate-lead strong{color:var(--accent)}
#donate-button-container{margin:18px auto 8px; display:flex; justify-content:center; min-height:48px}
.donate .donate-note{font-size:.78rem; color:var(--muted); margin:8px 0 0}
@media (max-width:640px){ .donate{margin:18px 12px; padding:22px 18px} .donate h2{font-size:1.25rem} }

/* ---------- donate hero image ---------- */
.donate-hero{
  display:block; width:100%; max-width:520px; height:auto; margin:0 auto 18px;
  border-radius:var(--radius); border:1px solid var(--line);
}

/* ---------- promo video ---------- */
.promo-video{max-width:880px; margin:18px auto 0; padding:18px 22px 6px; text-align:center}
.promo-video h2{font-size:1.5rem; margin:0 0 6px}
.promo-video p{color:var(--muted); font-size:.9rem; margin:0 0 16px}
.video-frame{
  position:relative; width:100%; max-width:840px; margin:0 auto;
  aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow); background:#000;
}
.video-frame video{position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover}
@media (max-width:640px){
  .promo-video{padding:10px 12px 4px}
  .promo-video h2{font-size:1.28rem}
}

/* ---------- language switcher ---------- */
.lang-menu{position:relative; margin-left:8px}
.lang-menu>summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--text);
  padding:8px 11px; border-radius:var(--radius-sm); font-size:.82rem; font-weight:600;
}
.lang-menu>summary::-webkit-details-marker{display:none}
.lang-menu[open]>summary{border-color:var(--accent)}
.lang-list{
  position:absolute; right:0; top:calc(100% + 6px); z-index:200;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); padding:6px; min-width:170px; max-height:320px; overflow:auto;
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
}
.lang-list a{
  display:block; padding:7px 9px; border-radius:7px; color:var(--text);
  text-decoration:none; font-size:.82rem;
}
.lang-list a:hover{background:var(--panel-2)}
.lang-list a.active{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff}
@media (max-width:640px){ .lang-menu>summary span.lang-full{display:none} }

/* ---------- right-to-left (Arabic) ---------- */
[dir="rtl"] .seo-content,[dir="rtl"] .donate,[dir="rtl"] .promo-video{text-align:right}
[dir="rtl"] .seo-content .steps{padding-left:0; padding-right:20px}
[dir="rtl"] .share-bar,[dir="rtl"] .donate{text-align:center}
[dir="rtl"] .lang-menu{margin-left:0; margin-right:8px}
[dir="rtl"] .lang-list{right:auto; left:0}