/* ==========================================================================
   iptv-subscription.cloud — design system
   Deliberately unlike the MegIPTV source: dark editorial base, single accent,
   measure-constrained prose, tables that scroll rather than break the page.
   ========================================================================== */

:root{
  --bg:#0f1216; --bg-2:#141a20; --card:#171c22; --line:#242c35;
  --fg:#e8ecf1; --mut:#9aa7b4; --acc:#4ea1ff; --acc-ink:#04111f;
  --ok:#4ec98a; --warn:#e0b341;
  --r:10px; --measure:78ch;
  --s1:.35rem; --s2:.7rem; --s3:1.1rem; --s4:1.8rem; --s5:2.8rem;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#fbfcfd; --bg-2:#f2f5f8; --card:#fff; --line:#dde4ec;
    --fg:#16202b; --mut:#5b6a7a; --acc:#0b62d0; --acc-ink:#fff;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  font-synthesis-weight:none; text-rendering:optimizeLegibility;
}
[dir=rtl] body{font-family:system-ui,"Segoe UI",Tahoma,sans-serif}

.wrap{max-width:var(--measure); margin-inline:auto; padding-inline:20px}

/* --- skip link ---------------------------------------------------------- */
.skip{position:absolute; left:-9999px; top:0; background:var(--acc); color:var(--acc-ink); padding:.6rem 1rem; z-index:10}
.skip:focus{left:0}

/* --- header / footer ---------------------------------------------------- */
header.site,footer.site{background:var(--bg-2); border-block:1px solid var(--line)}
header.site{border-top:0; position:sticky; top:0; z-index:5; backdrop-filter:saturate(1.2) blur(6px)}
header .bar{display:flex; gap:var(--s3); align-items:center; justify-content:space-between; min-height:60px; flex-wrap:wrap}
.brand{font-weight:650; letter-spacing:-.01em; text-decoration:none; color:var(--fg)}
header nav ul,footer nav ul{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); list-style:none; margin:0; padding:0}
header nav a,footer nav a{color:var(--mut); text-decoration:none; font-size:.94rem}
header nav a:hover,footer nav a:hover{color:var(--fg)}
header nav a[aria-current=page]{color:var(--acc)}
footer.site{margin-top:var(--s5); padding-block:var(--s4)}
.fine{color:var(--mut); font-size:.86rem; margin:var(--s2) 0 0}

/* --- typography --------------------------------------------------------- */
main{padding-block:var(--s4) var(--s5)}
h1{font-size:clamp(1.7rem,1.2rem + 2.2vw,2.4rem); line-height:1.18; letter-spacing:-.02em; margin:0 0 var(--s3)}
h2{font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem); line-height:1.25; letter-spacing:-.01em; margin:var(--s5) 0 var(--s2)}
h3{font-size:1.06rem; margin:var(--s4) 0 var(--s1)}
p{margin:0 0 var(--s3)}
a{color:var(--acc); text-underline-offset:.16em}
.lede{font-size:1.1rem; color:var(--mut); margin-bottom:var(--s4)}

/* --- answer box --------------------------------------------------------- */
.answer{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--acc);
  border-radius:var(--r); padding:var(--s3) var(--s3) var(--s1); margin:0 0 var(--s4)}
[dir=rtl] .answer{border-left:1px solid var(--line); border-right:3px solid var(--acc)}
.answer strong{display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; color:var(--mut); margin-bottom:var(--s1)}

/* --- breadcrumbs -------------------------------------------------------- */
.crumbs ol{display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; margin:0 0 var(--s3); padding:0; font-size:.87rem; color:var(--mut)}
.crumbs li+li::before{content:"›"; margin-inline-end:.45rem; color:var(--line)}
.crumbs a{color:var(--mut); text-decoration:none}
.crumbs a:hover{color:var(--fg)}

/* --- tables: scroll, never break the page ------------------------------- */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 var(--s4); border:1px solid var(--line); border-radius:var(--r)}
table{border-collapse:collapse; width:100%; min-width:34ch; font-size:.94rem}
caption{text-align:start; padding:var(--s2) var(--s3); color:var(--mut); font-size:.82rem; text-transform:uppercase; letter-spacing:.07em}
th,td{padding:.6rem var(--s3); text-align:start; border-top:1px solid var(--line); vertical-align:top}
thead th{background:var(--bg-2); font-weight:600; font-size:.86rem; color:var(--mut)}
tbody th{font-weight:600}
tbody tr:hover{background:var(--bg-2)}

/* --- lists -------------------------------------------------------------- */
ol.steps{counter-reset:s; list-style:none; padding:0; margin:0 0 var(--s4)}
ol.steps li{counter-increment:s; position:relative; padding-inline-start:2.4rem; margin-bottom:var(--s2)}
ol.steps li::before{content:counter(s); position:absolute; inset-inline-start:0; top:.05rem;
  width:1.7rem; height:1.7rem; border-radius:50%; background:var(--card); border:1px solid var(--line);
  color:var(--acc); font-size:.82rem; font-weight:600; display:grid; place-items:center}
ul.devices{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s2); list-style:none; padding:0; margin:0 0 var(--s4)}
ul.devices li{background:var(--card); border:1px solid var(--line); border-radius:999px; padding:.2rem .7rem; font-size:.86rem; color:var(--mut)}

/* --- faq ---------------------------------------------------------------- */
.faq-item{border-top:1px solid var(--line); padding-top:var(--s3); margin-top:var(--s3)}
.faq-item h3{margin-top:0}

/* --- related + cta ------------------------------------------------------ */
.related{margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--line)}
.related ul{list-style:none; padding:0; margin:0; display:grid; gap:var(--s2)}
.cta{margin-top:var(--s4)}
.btn{display:inline-block; background:var(--acc); color:var(--acc-ink); text-decoration:none;
  font-weight:600; padding:.7rem 1.3rem; border-radius:var(--r)}
.btn:hover{filter:brightness(1.08)}

/* --- focus + motion ----------------------------------------------------- */
:focus-visible{outline:2px solid var(--acc); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}