/* LiveTV.eu - /security (security.php). Alleen .sc-* klassen; kleuren, panelen, randen en knoppen volgen style.css,
   premium.css, donate.css en footer.css (cyaan/blauw, --ok/--warn). Geen animatie. */
.sc-page{--sc-line:rgba(63,196,255,.22);--sc-cyan:#3fc4ff;max-width:1180px;margin:0 auto 8px}
.sc-page h2{margin:0 0 10px;font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.3}
.sc-page p{line-height:1.65}
.sc-page code{font-size:.86em;padding:1px 6px;border-radius:6px;background:rgba(120,166,224,.12);overflow-wrap:anywhere}
.sc-page a:not(.btn):not(.sc-mail){color:#9fd6ff;text-decoration:underline;text-decoration-color:rgba(159,214,255,.4);text-underline-offset:3px}
.sc-page a:not(.btn):not(.sc-mail):hover{color:#fff}
.sc-page :focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:8px}

/* Hero: tekst links, wereldbol met schild rechts. */
/* Compact (v2): tekst en wereldbol naast elkaar tot 640px, kleine marges, zodat de statuskaarten hoger in beeld staan. */
.sc-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:24px;margin-top:0;padding:4px 0 8px}
.sc-hero h1{margin:0;font-size:clamp(2.3rem,5.4vw,4rem);line-height:1.04;letter-spacing:-.015em}
.sc-hero h1 span{background:linear-gradient(135deg,#5fd8ff,#2f8dff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-hero-sub{margin:8px 0 0;font-size:clamp(1.1rem,2vw,1.45rem);font-weight:600;color:#7fdcff}
.sc-hero-lead{max-width:62ch;margin:14px 0 0;font-size:clamp(1rem,1.3vw,1.08rem);color:#c6d5ea}
.sc-hero-art{display:flex;justify-content:center}
.sc-globe{width:100%;max-width:340px;height:auto;filter:drop-shadow(0 0 30px rgba(47,157,255,.28))}
.sc-shield{filter:drop-shadow(0 0 14px rgba(63,196,255,.55))}

/* Statuskaarten. */
.sc-status{margin-top:clamp(8px,1.2vw,16px)}
.sc-status-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:14px}
.sc-status-head h2{margin:0}
.sc-checked{margin:0;font-size:.86rem;color:var(--muted)}
.sc-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0}
.sc-card{position:relative;padding:18px 16px 18px;border:1px solid var(--sc-line);border-radius:var(--radius-sm,12px);
  background:linear-gradient(180deg,rgba(18,40,72,.55),rgba(8,16,30,.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.sc-card-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--sc-cyan);background:rgba(0,185,254,.10);border:1px solid rgba(0,185,254,.22)}
.sc-card-ic .ui-ic{width:22px;height:22px}
.sc-card.is-warn .sc-card-ic{color:var(--warn,#ffb020);background:rgba(255,176,32,.10);border-color:rgba(255,176,32,.28)}
.sc-card-state{position:absolute;top:16px;right:14px;display:block;width:24px;height:24px}
.sc-state-ic{display:block;width:24px;height:24px}
.sc-card.is-ok .sc-card-state{color:var(--ok,#35d07f)}
.sc-card.is-warn .sc-card-state{color:var(--warn,#ffb020)}
.sc-card h3{margin:14px 0 2px;font-size:1.02rem}
.sc-card-status{margin:0 0 8px;font-weight:600;font-size:.95rem}
.sc-card.is-ok .sc-card-status{color:var(--ok,#35d07f)}
.sc-card.is-warn .sc-card-status{color:var(--warn,#ffb020)}
.sc-card-text{margin:0;font-size:.86rem;line-height:1.5;color:#c6d5ea}

/* Panelen (2x2) en drietal. */
.sc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.sc-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.sc-panel{display:flex;gap:20px;padding:clamp(18px,2.4vw,28px);border:1px solid var(--sc-line);border-radius:var(--radius,18px);
  background:linear-gradient(160deg,rgba(18,34,60,.62),rgba(8,15,30,.72));min-width:0}
.sc-panel-body{min-width:0}
.sc-panel-body > p{margin:0 0 10px;color:#c6d5ea}
.sc-panel-body > p:last-child{margin-bottom:0}
.sc-orb{flex:none;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;color:#dff6ff;
  background:radial-gradient(circle at 35% 30%,#2f9dff,#0b3a86 70%);box-shadow:0 0 0 1px rgba(127,220,255,.35),0 0 28px rgba(47,157,255,.35)}
.sc-orb .ui-ic{width:38px;height:38px}
.sc-tile{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;color:var(--sc-cyan);background:rgba(0,185,254,.10);border:1px solid rgba(0,185,254,.22)}
.sc-tile .ui-ic{width:26px;height:26px}
.sc-list{margin:0 0 10px;padding:0;list-style:none;color:#c6d5ea}
.sc-list li{position:relative;margin:0 0 8px;padding-left:22px;line-height:1.55}
.sc-list li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--sc-cyan)}
.sc-list li.is-ok::before{background:var(--ok,#35d07f)}
.sc-list li.is-warn::before{background:var(--warn,#ffb020)}
.sc-list--plain li::before{width:6px;height:6px;top:.65em;left:4px;opacity:.8}
.sc-list--small li{font-size:.92rem}
.sc-note{font-size:.88rem;color:var(--muted)!important}
.sc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.sc-actions .btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none}
.sc-actions .btn .ui-ic{width:16px;height:16px}
.sc-mail{display:inline-flex;align-items:center;gap:10px;min-height:46px;margin:4px 0 12px;padding:0 16px;border-radius:12px;
  border:1px solid rgba(63,196,255,.45);background:rgba(40,150,255,.10);color:#e6f5ff;font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.sc-mail .ui-ic{width:18px;height:18px;color:var(--sc-cyan)}
.sc-mail:hover{border-color:var(--sc-cyan);color:#fff}

/* Afsluiter met het officiële app-pictogram. */
.sc-trust{display:flex;align-items:center;gap:24px;margin-top:20px;padding:clamp(20px,3vw,32px);border:1px solid var(--sc-line);border-radius:var(--radius,18px);
  background:radial-gradient(520px 220px at 100% 100%,rgba(47,157,255,.18),transparent 70%),linear-gradient(160deg,rgba(18,34,60,.62),rgba(8,15,30,.72))}
.sc-trust-ic{flex:none;width:88px;height:88px}
.sc-trust p{margin:0;color:#c6d5ea;max-width:72ch}

@media (max-width:1099px){
  .sc-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sc-trio{grid-template-columns:1fr}
}
@media (max-width:899px){
  .sc-hero{gap:16px}
  .sc-globe{max-width:280px}
  .sc-grid{grid-template-columns:1fr}
}
@media (max-width:639px){
  .sc-hero{grid-template-columns:1fr;gap:8px;padding-top:0}
  .sc-hero-art{order:-1}
  .sc-globe{max-width:200px}
  .sc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc-panel{flex-direction:column;gap:14px}
  .sc-orb{width:60px;height:60px}
  .sc-orb .ui-ic{width:28px;height:28px}
  .sc-trust{flex-direction:column;align-items:flex-start}
  .sc-trust-ic{width:64px;height:64px}
}
@media (max-width:379px){
  .sc-cards{grid-template-columns:1fr}
  .sc-globe{max-width:180px}
}