:root{
  --bg:#0e1116; --card:#171c24; --card2:#1d232d; --line:#2a313c;
  --txt:#e6eaf0; --muted:#8b95a5; --accent:#3b82f6;
  --green:#22c55e; --yellow:#eab308; --red:#ef4444; --grey:#6b7280;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--txt);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:16px;
}
.wrap{max-width:760px;margin:0 auto}
.hero{text-align:center;padding:18px 4px 10px}
.hero h1{font-size:26px;margin:0 0 6px;display:inline-flex;align-items:center;gap:10px}
.sub{color:var(--muted);margin:0 auto;max-width:520px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:14px 0}
.lbl{display:block;font-weight:600;margin-bottom:8px}
textarea{
  width:100%;min-height:170px;resize:vertical;
  background:var(--bg);color:var(--txt);
  border:1px solid var(--line);border-radius:10px;padding:12px;
  font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
textarea:focus{outline:none;border-color:var(--accent)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}
.chk{color:var(--muted);display:flex;align-items:center;gap:8px;cursor:pointer}
.chk input{width:16px;height:16px}
.btn{
  background:var(--accent);color:#fff;border:0;border-radius:10px;
  padding:11px 22px;font-size:15px;font-weight:600;cursor:pointer;
}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.6;cursor:default}
.msg{margin-top:12px;padding:10px 12px;border-radius:9px;background:var(--card2);color:var(--muted)}
.msg.err{color:#fecaca;background:#3a1d1d;border:1px solid #5b2626}
.legend{display:flex;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:13px;margin-bottom:12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block;background:var(--grey);flex:0 0 auto}
.dot-green{background:var(--green)} .dot-yellow{background:var(--yellow)}
.dot-red{background:var(--red)} .dot-grey{background:var(--grey)}
.res{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--card2);margin-bottom:8px;
}
.res .dot{margin-top:5px}
.res .body{min-width:0;flex:1}
.res .top{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.res .line{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;word-break:break-all}
.res .stat{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.stat-green{color:var(--green)} .stat-yellow{color:var(--yellow)}
.stat-red{color:var(--red)} .stat-grey{color:var(--grey)}
.res .meta{color:var(--muted);font-size:12.5px;margin-top:3px}
.res.spin .dot{animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}
.shares{margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.shares .caid{font-family:ui-monospace,monospace;font-size:12.5px;margin:3px 0}
.shares .caid b{color:var(--accent)}
.foot{color:var(--muted);text-align:center;font-size:12.5px;padding:8px 0 20px}
.foot code{background:var(--card2);padding:1px 6px;border-radius:5px}
.tiny{font-size:12px;opacity:.85}
@media(max-width:520px){ .hero h1{font-size:22px} .btn{flex:1} }

/* ===================== animation & polish (v3) ===================== */

/* soft glow pulse on the header status dot */
.dot.pulse{animation:glow 2.2s ease-in-out infinite}
@keyframes glow{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}
}

/* button: smooth press + inline spinner while testing */
.btn{position:relative;transition:transform .08s ease,filter .15s ease;min-width:118px}
.btn:active{transform:translateY(1px)}
.btn .btn-spinner{
  display:none;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:spin .7s linear infinite;vertical-align:-3px;
}
.btn.loading{pointer-events:none}
.btn.loading .btn-label{display:none}
.btn.loading .btn-spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* indeterminate loading bar under the form while testing */
.bar{height:3px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:14px;position:relative}
.bar span{
  position:absolute;left:0;top:0;height:100%;width:40%;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),#22c55e);
  animation:slide 1.1s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes slide{
  0%{left:-40%;width:40%}
  50%{width:55%}
  100%{left:100%;width:40%}
}

/* results summary — one chip per colour with its count */
.summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.summary .chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:999px;font-size:13px;font-weight:600;
  background:var(--card2);border:1px solid var(--line);
}
.summary .chip .dot{width:9px;height:9px}
.summary .chip.zero{opacity:.4}

/* each result row animates in, staggered via --i set in JS */
.res{animation:rowin .32s ease both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes rowin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.res{transition:border-color .15s ease,background .15s ease}
.res:hover{border-color:#3a4252}
/* a thin colour spine on the left edge, matching the status */
.res{border-left-width:3px}
.res.r-green{border-left-color:var(--green)}
.res.r-yellow{border-left-color:var(--yellow)}
.res.r-red{border-left-color:var(--red)}
.res.r-grey{border-left-color:var(--grey)}

/* skeleton placeholder rows shown while waiting for the response */
.skel{
  height:44px;border:1px solid var(--line);border-radius:10px;
  margin-bottom:8px;background:
    linear-gradient(90deg,var(--card2) 25%,#222a35 37%,var(--card2) 63%);
  background-size:400% 100%;animation:shimmer 1.3s ease infinite;
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion:reduce){
  .dot.pulse,.btn .btn-spinner,.bar span,.res,.skel{animation:none}
  .res{opacity:1;transform:none}
}

/* ===================== SEO content section ===================== */
.seo h2{font-size:18px;margin:0 0 10px}
.seo h3{font-size:14px;margin:16px 0 6px;color:var(--txt)}
.seo p{color:var(--muted);margin:0 0 8px}
.seo strong,.seo b{color:var(--txt);font-weight:600}
.seo code{background:var(--card2);padding:1px 6px;border-radius:5px;font-size:12.5px}
.seo-list{list-style:none;padding:0;margin:0 0 8px}
.seo-list li{display:flex;align-items:center;gap:9px;color:var(--muted);padding:3px 0}
.seo-list li .dot{width:10px;height:10px}

.btn.wide{width:100%;justify-content:center;display:flex;align-items:center;gap:8px}

/* ===================== space background ===================== */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;background:#0b0e15}
body{background:#0b0e15}
.wrap{position:relative;z-index:1}
/* let the stars show faintly through the panels while keeping text crisp */
.card{background:rgba(23,28,36,.82);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
textarea{background:rgba(11,14,21,.72)}
.res{background:rgba(29,35,45,.82)}
.msg{background:rgba(29,35,45,.82)}

/* ===================== green-line "fix" CTA ===================== */
.fixcta{margin-top:9px;border-top:1px dashed var(--line);padding-top:9px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fixmsg{color:var(--muted);font-size:12.5px;flex:1;min-width:200px}
.fixmsg b{color:var(--green)}
.fixbtn{display:inline-block;white-space:nowrap;background:var(--green);color:#06230f;
  font-weight:600;font-size:13px;padding:8px 14px;border-radius:9px;text-decoration:none}
.fixbtn:hover{filter:brightness(1.08)}

/* ===================== pending (testing…) rows ===================== */
.res.pending{position:relative;overflow:hidden}
.res.pending .dot{animation:pulse 1s infinite}
.res.pending .stat{display:inline-flex;align-items:center;gap:6px;opacity:.85}
.res.pending::after{content:"";position:absolute;top:0;left:0;height:100%;width:45%;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.10),transparent);
  animation:scan 1.25s linear infinite;pointer-events:none}
@keyframes scan{from{transform:translateX(-120%)}to{transform:translateX(320%)}}
.mini-sp{width:11px;height:11px;border-radius:50%;border:2px solid rgba(139,149,165,.4);
  border-top-color:#8b95a5;display:inline-block;animation:spin .7s linear infinite}
@media (prefers-reduced-motion:reduce){
  .res.pending::after,.res.pending .dot,.mini-sp{animation:none}
}

/* ===================== language switcher ===================== */
.langbar{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 8px;padding-top:2px}
.langlink{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);background:rgba(23,28,36,.6);color:var(--muted);
  font-size:12.5px;text-decoration:none;transition:border-color .15s,color .15s}
.langlink:hover{border-color:#3a4252;color:var(--txt)}
.langlink.active{border-color:var(--accent);color:var(--txt);background:rgba(59,130,246,.12)}
.langlink .flag{font-size:15px;line-height:1}
.langlink .lcode{font-weight:600;letter-spacing:.3px}

/* keep the technical line text left-to-right even in RTL layouts */
.res .line{direction:ltr;unicode-bidi:embed;display:inline-block}

/* ===================== RTL (Arabic) ===================== */
[dir="rtl"] .res{border-left-width:1px;border-right-width:3px}
[dir="rtl"] .res.r-green{border-right-color:var(--green);border-left-color:var(--line)}
[dir="rtl"] .res.r-yellow{border-right-color:var(--yellow);border-left-color:var(--line)}
[dir="rtl"] .res.r-red{border-right-color:var(--red);border-left-color:var(--line)}
[dir="rtl"] .res.r-grey{border-right-color:var(--grey);border-left-color:var(--line)}
[dir="rtl"] .seo-list li{flex-direction:row}
[dir="rtl"] .foot code,[dir="rtl"] .seo code{direction:ltr;unicode-bidi:embed;display:inline-block}

/* ===================== CCcam / Newcamd / IPTV tabs ===================== */
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tab{flex:1;background:rgba(11,14,21,.5);border:1px solid var(--line);color:var(--muted);
  border-radius:9px;padding:9px 10px;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.tab:hover{color:var(--txt);border-color:#3a4252}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.redirnote{margin-top:10px;color:var(--muted);font-size:13px;text-align:center}