/* zakhrafaarab.online tool styles */

/* ===== زخرفة الأسماء — pro visual design, mobile-first RTL, light+dark ===== */
#zakhrafa-app{
  --zt-bg:#f5f1fc; --zt-card:#ffffff; --zt-ink:#1e1533; --zt-muted:#6f6390;
  --zt-line:#e7defa; --zt-primary:#7c3aed; --zt-deep:#5b21b6; --zt-accent:#ec4899;
  --zt-ok-bg:#e9f9ef; --zt-ok-bd:#bfe6c9; --zt-ok-tx:#17703a;
  --zt-no-bg:#fdecec; --zt-no-bd:#f3c1c1; --zt-no-tx:#a02a2a;
  --zt-shadow:0 8px 24px rgba(92,33,182,.10);
  font-family:'Cairo',-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;
  direction:rtl;text-align:right;padding:12px;
  color:var(--zt-ink);box-sizing:border-box;background:var(--zt-bg);border-radius:20px;
}
#zakhrafa-app *{box-sizing:border-box}
#zakhrafa-app[data-theme="dark"]{
  --zt-bg:#14101f; --zt-card:#1f1833; --zt-ink:#f2edff; --zt-muted:#ab9fd0;
  --zt-line:#332a52; --zt-shadow:0 8px 24px rgba(0,0,0,.35);
  --zt-ok-bg:#123524; --zt-ok-bd:#1f5c37; --zt-ok-tx:#7fe0a0;
  --zt-no-bg:#3a1a1a; --zt-no-bd:#6e2b2b; --zt-no-tx:#ff9d9d;
}
/* hero */
.zt-head{position:relative;overflow:hidden;background:linear-gradient(135deg,#2e1065 0%,#6d28d9 55%,#c026d3 100%);color:#fff;border-radius:18px;padding:28px 18px 24px;margin-bottom:14px;text-align:center;box-shadow:var(--zt-shadow)}
.zt-head::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 12%,rgba(255,255,255,.22),transparent 42%),radial-gradient(circle at 10% 90%,rgba(236,72,153,.5),transparent 46%);pointer-events:none}
.zt-head h2{position:relative;margin:0 0 8px;font-size:1.5rem;font-weight:800}
.zt-head p{position:relative;margin:0;font-size:.88rem;opacity:.94}
#zt-themebtn{position:absolute;top:12px;inset-inline-start:12px;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:#fff;font-size:1.2rem;cursor:pointer;transition:transform .15s,background .15s;font-family:inherit}
#zt-themebtn:hover{background:rgba(255,255,255,.3);transform:scale(1.07)}
/* sticky input bar */
.zt-inputbar{position:sticky;top:8px;z-index:5;background:var(--zt-card);border:1px solid var(--zt-line);border-radius:16px;padding:12px;box-shadow:var(--zt-shadow)}
#zt-input{width:100%;font-size:1.08rem;font-weight:700;padding:12px 14px;border:2px solid var(--zt-line);border-radius:12px;outline:none;background:var(--zt-bg);color:var(--zt-ink);font-family:inherit;transition:border-color .15s,box-shadow .15s}
#zt-input:focus{border-color:var(--zt-primary);box-shadow:0 0 0 3px rgba(124,58,237,.18);background:var(--zt-card)}
.zt-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.zt-count{font-size:.8rem;color:var(--zt-muted);margin-inline-start:auto;font-weight:700}
.zt-btn{border:1px solid var(--zt-line);background:var(--zt-card);color:var(--zt-deep);border-radius:999px;padding:8px 14px;font-size:.9rem;font-weight:800;cursor:pointer;font-family:inherit;transition:transform .12s,box-shadow .15s,background .15s}
#zakhrafa-app[data-theme="dark"] .zt-btn{color:#d9ccff}
.zt-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(124,58,237,.18)}
.zt-btn:active{transform:scale(.97)}
.zt-btn.primary{background:linear-gradient(135deg,var(--zt-primary),var(--zt-accent));color:#fff;border:none;box-shadow:0 4px 14px rgba(124,58,237,.35)}
/* panels */
.zt-panel{position:relative;display:none;background:var(--zt-bg);border:1px solid var(--zt-line);border-radius:14px;padding:12px;margin-top:10px}
.zt-panel.open{display:block;animation:ztfade .18s ease}
.zt-close{position:absolute;top:8px;inset-inline-end:8px;width:30px;height:30px;border-radius:50%;border:1px solid var(--zt-line);background:var(--zt-card);color:var(--zt-muted);font-size:1.1rem;line-height:1;cursor:pointer;font-family:inherit;z-index:2}
.zt-close:hover{color:var(--zt-accent);border-color:var(--zt-accent)}
@keyframes ztfade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.zt-symgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px;max-height:190px;overflow:auto}
.zt-sym{font-size:1.35rem;text-align:center;padding:9px 4px;background:var(--zt-card);border:1px solid var(--zt-line);border-radius:10px;cursor:pointer;color:var(--zt-ink);transition:transform .12s,background .12s;font-family:inherit}
.zt-sym:hover{background:#efe7fd;transform:scale(1.07)}
#zakhrafa-app[data-theme="dark"] .zt-sym:hover{background:#2c2350}
.zt-vibes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.zt-vibe{border:1px solid var(--zt-line);background:var(--zt-card);color:var(--zt-ink);border-radius:999px;padding:7px 15px;font-size:.9rem;font-weight:800;cursor:pointer;font-family:inherit;transition:all .15s}
.zt-vibe.on{background:linear-gradient(135deg,var(--zt-primary),var(--zt-accent));color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(124,58,237,.3)}
#zt-genout{font-size:1.6rem;font-weight:700;text-align:center;padding:16px;background:var(--zt-card);border:2px dashed var(--zt-primary);border-radius:14px;margin:10px 0;word-break:break-word;min-height:70px;color:var(--zt-ink)}
/* platform validator */
.zt-valid{background:var(--zt-card);border:1px solid var(--zt-line);border-radius:16px;padding:12px 14px;margin-top:12px;box-shadow:var(--zt-shadow)}
.zt-valid h4{margin:0 0 10px;font-size:.92rem;color:var(--zt-deep);font-weight:800}
#zakhrafa-app[data-theme="dark"] .zt-valid h4{color:#d9ccff}
.zt-plats{display:flex;flex-wrap:wrap;gap:6px}
.zt-plat{font-size:.78rem;font-weight:700;border-radius:999px;padding:6px 12px;border:1px solid var(--zt-line);background:var(--zt-bg);color:var(--zt-muted);white-space:nowrap}
.zt-plat.ok{background:var(--zt-ok-bg);border-color:var(--zt-ok-bd);color:var(--zt-ok-tx)}
.zt-plat.no{background:var(--zt-no-bg);border-color:var(--zt-no-bd);color:var(--zt-no-tx)}
.zt-plat.hl{border-color:var(--zt-primary);box-shadow:0 0 0 2px rgba(124,58,237,.18);color:var(--zt-ink)}
.zt-note{font-size:.72rem;color:var(--zt-muted);margin-top:8px}
/* category tabs */
.zt-tabs{display:flex;gap:8px;overflow-x:auto;margin:14px 0;padding:4px 2px 8px;scrollbar-width:thin}
.zt-tab{flex:0 0 auto;border:1px solid var(--zt-line);background:var(--zt-card);color:var(--zt-ink);border-radius:999px;padding:8px 18px;font-size:.87rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .16s}
.zt-tab:hover{border-color:var(--zt-primary);transform:translateY(-1px)}
.zt-tab.on{background:linear-gradient(135deg,var(--zt-primary),var(--zt-accent));color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(124,58,237,.35)}
/* style cards */
.zt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
/* on phones the input bar scrolls away instead of sticking over content */
@media(max-width:640px){.zt-inputbar{position:static}}
.zt-card{background:var(--zt-card);border:1.5px solid var(--zt-line);border-radius:16px;padding:12px 14px;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.zt-card:hover{transform:translateY(-3px);box-shadow:var(--zt-shadow);border-color:#c9b3f5}
.zt-card.sel{border-color:var(--zt-primary);box-shadow:0 0 0 3px rgba(124,58,237,.16)}
.zt-cardtop{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.zt-sname{font-size:.8rem;color:var(--zt-deep);font-weight:800}
#zakhrafa-app[data-theme="dark"] .zt-sname{color:#d9ccff}
.zt-risk{font-size:.68rem;font-weight:700;color:#b07800;background:#fff6dd;border-radius:999px;padding:3px 10px}
#zakhrafa-app[data-theme="dark"] .zt-risk{color:#ffd98a;background:#3a2c10}
.zt-out{font-size:1.3rem;font-weight:700;line-height:2;word-break:break-word;min-height:2.2em;color:var(--zt-ink)}
.zt-cardbtns{display:flex;gap:8px;margin-top:10px}
.zt-copy{flex:1;background:linear-gradient(135deg,var(--zt-primary),var(--zt-accent));color:#fff;border:none;border-radius:12px;padding:9px;font-size:.87rem;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 3px 10px rgba(124,58,237,.3);transition:transform .12s,box-shadow .15s}
.zt-copy:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(124,58,237,.4)}
.zt-copy:active{transform:scale(.98)}
.zt-fav{background:var(--zt-card);border:1.5px solid var(--zt-line);color:var(--zt-muted);border-radius:12px;padding:8px 14px;font-size:1.05rem;cursor:pointer;line-height:1;transition:all .15s;font-family:inherit}
.zt-fav:hover{transform:scale(1.08)}
.zt-fav.on{background:#ffe9f3;border-color:var(--zt-accent);color:var(--zt-accent)}
.zt-empty{text-align:center;color:var(--zt-muted);padding:34px 10px;font-size:.92rem}
#zakhrafa-app button:focus-visible,#zakhrafa-app input:focus-visible{outline:2px solid var(--zt-accent);outline-offset:2px}
@media(max-width:400px){
  #zakhrafa-app{padding:8px}
  .zt-head{padding:22px 12px 18px}
  .zt-head h2{font-size:1.25rem}
  .zt-out{font-size:1.15rem}
  #zt-genout{font-size:1.35rem}
}