/* ================================================================
   KronSafe Widget — v1.0
   Include: <link rel="stylesheet" href="/kronsafe.css">
   ================================================================ */

/* ── Reset scoped ───────────────────────────────────────────────── */
.ks-wrap *, .ks-wrap *::before, .ks-wrap *::after { box-sizing: border-box; }
.ks-wrap { all: initial; display: block; }
.ks-wrap a { color: inherit; text-decoration: none; }
.ks-wrap button { cursor: pointer; border: none; background: none; padding: 0; font: inherit; }

/* ── Tokens ─────────────────────────────────────────────────────── */
.ks-wrap {
  --bg:         #080c14;
  --surface:    rgba(255,255,255,0.03);
  --border:     rgba(255,255,255,0.08);
  --text:       #ffffff;
  --muted:      #94a3b8;
  --faint:      #64748b;
  --mono:       'Menlo', 'Consolas', monospace;

  --indigo:     #6366f1;
  --indigo-bg:  rgba(99,102,241,0.12);
  --indigo-bd:  rgba(99,102,241,0.30);

  --red:        #f87171;
  --red-bg:     rgba(239,68,68,0.13);
  --red-bd:     rgba(239,68,68,0.35);

  --orange:     #fb923c;
  --orange-bg:  rgba(249,115,22,0.13);
  --orange-bd:  rgba(249,115,22,0.35);

  --yellow:     #facc15;
  --yellow-bg:  rgba(234,179,8,0.13);
  --yellow-bd:  rgba(234,179,8,0.35);

  --green:      #4ade80;
  --green-bg:   rgba(34,197,94,0.13);
  --green-bd:   rgba(34,197,94,0.30);

  --sky-bg:     rgba(14,165,233,0.10);
  --sky-bd:     rgba(14,165,233,0.20);
  --sky-text:   #7dd3fc;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  color: var(--text);
  background: transparent;
}

/* ── Page layout ────────────────────────────────────────────────── */
.ks-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 16px;
  min-height: 100vh;
}

/* ── Header ─────────────────────────────────────────────────────── */
.ks-header { text-align: center; margin-bottom: 48px; }
.ks-logo   {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.ks-logo-img {
  width: 48px; height: 48px; object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(99,102,241,0.3));
}
.ks-logo-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--indigo-bg); border: 1px solid var(--indigo-bd);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.ks-logo h1 { font-size: 22px; font-weight: 900; letter-spacing: -0.5px; color: var(--text); margin: 0; }
.ks-logo h1 span { color: var(--indigo); }
.ks-logo-by { font-size: 10px; color: #475569; margin: 0 0 8px; }
.ks-logo-by span { color: #64748b; font-weight: 500; }
.ks-header p { color: var(--muted); font-size: 14px; max-width: 340px; margin: 0 auto; line-height: 1.6; }

/* ── Input ──────────────────────────────────────────────────────── */
.ks-input-wrap { width: 100%; max-width: 672px; }
.ks-input-row {
  display: flex; gap: 8px; padding: 6px;
  border-radius: 18px; border: 1px solid var(--border);
  background: var(--surface); backdrop-filter: blur(8px);
  transition: border-color .2s, background .2s;
}
.ks-input-row:focus-within {
  border-color: var(--indigo-bd);
  background: rgba(255,255,255,0.05);
}
.ks-input-row input {
  flex: 1; background: transparent; border: none; outline: none;
  padding: 12px 16px; font-size: 14px; color: var(--text);
  font-family: var(--mono); min-width: 0;
}
.ks-input-row input::placeholder { color: var(--faint); }
.ks-input-row input:disabled { opacity: .5; }
.ks-btn {
  padding: 12px 24px; border-radius: 12px; font-size: 14px;
  font-weight: 600; background: var(--indigo); color: #fff;
  transition: background .15s, transform .1s; white-space: nowrap;
}
.ks-btn:hover:not(:disabled) { background: #5254cc; }
.ks-btn:active:not(:disabled) { transform: scale(.97); }
.ks-btn:disabled { opacity: .4; cursor: not-allowed; }

.ks-hints {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 16px;
}
.ks-hints span {
  font-size: 12px; color: var(--faint);
  padding: 4px 10px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface);
}

/* ── Safety banner ──────────────────────────────────────────────── */
.ks-banner {
  width: 100%; max-width: 672px; margin-top: 32px;
  border-radius: 18px; border: 1px solid var(--indigo-bd);
  background: linear-gradient(135deg, rgba(30,27,75,.6), rgba(15,23,42,.6), rgba(46,16,101,.3));
  padding: 20px; position: relative; overflow: hidden;
}
.ks-banner::before, .ks-banner::after {
  content:''; position: absolute; border-radius: 50%; pointer-events: none;
}
.ks-banner::before { top:-32px; right:-32px; width:128px; height:128px; background: rgba(99,102,241,.08); filter:blur(16px); }
.ks-banner::after  { bottom:-24px; left:-24px; width:96px; height:96px; background: rgba(139,92,246,.08); filter:blur(16px); }
.ks-banner-inner { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.ks-banner-icon {
  width:40px; height:40px; flex-shrink:0; border-radius:12px;
  background: rgba(99,102,241,.15); border:1px solid var(--indigo-bd);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.ks-banner-body { flex:1; min-width:200px; }
.ks-banner-body strong { display:block; font-size:14px; font-weight:700; color:var(--text); }
.ks-banner-body p { font-size:12px; color:var(--muted); margin:2px 0 0; line-height:1.5; }
.ks-banner-body p em { font-style:normal; color:#a5b4fc; }
.ks-banner-btn {
  flex-shrink:0; display:flex; align-items:center; gap:8px;
  padding: 10px 16px; border-radius: 12px; font-size:12px; font-weight:600;
  border:1px solid var(--indigo-bd); background:var(--indigo-bg);
  color:#a5b4fc; transition:background .15s, color .15s;
}
.ks-banner-btn:hover { background: rgba(99,102,241,.2); color:#c7d2fe; }

/* ── Loading stages ─────────────────────────────────────────────── */
.ks-loading-stages {
  margin-top: 64px; display:flex; flex-direction:column;
  align-items:center; gap:24px; color:var(--muted);
  animation: ks-fadein .4s ease;
}
.ks-loading-spinner-wrap {
  position:relative; width:56px; height:56px;
}
.ks-loading-track {
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(99,102,241,.2);
}
.ks-spinner {
  position:absolute; inset:0;
  width:56px; height:56px; border-radius:50%;
  border:2px solid transparent; border-top-color: var(--indigo);
  animation: ks-spin .9s linear infinite;
}
.ks-loading-stage-icon {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1;
  transition:opacity .25s, transform .25s;
}
@keyframes ks-spin { to { transform: rotate(360deg); } }

.ks-loading-text-wrap { text-align:center; }
.ks-loading-stage-text {
  font-size:14px; font-weight:500; color:var(--muted);
  margin:0 0 4px; transition:opacity .25s;
}
.ks-loading-sub { font-size:11px; color:var(--faint); display:block; }

.ks-loading-dots { display:flex; align-items:center; gap:6px; }
.ks-loading-dot {
  width:8px; height:8px; border-radius:4px;
  background:rgba(255,255,255,.1);
  transition:width .35s ease, background .35s ease;
}
.ks-loading-dot.active { width:24px; background:#818cf8; }

/* ── Error ──────────────────────────────────────────────────────── */
.ks-error {
  margin-top:32px; width:100%; max-width:672px;
  padding:16px; border-radius:12px;
  border:1px solid var(--red-bd); background:var(--red-bg); color:var(--red);
}
.ks-error strong { display:block; margin-bottom:4px; font-size:14px; }
.ks-error p { font-size:13px; opacity:.7; margin:0; }

/* ── Back link ──────────────────────────────────────────────────── */
.ks-back {
  margin-top:12px; font-size:12px; color:var(--faint);
  transition:color .15s; display:inline-block;
}
.ks-back:hover { color:var(--muted); }

/* ── Report wrapper ─────────────────────────────────────────────── */
.ks-report {
  margin-top:32px; width:100%; max-width:672px;
  display:flex; flex-direction:column; gap:16px;
  animation: ks-fadein .4s ease;
}
@keyframes ks-fadein {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Card / Section ─────────────────────────────────────────────── */
.ks-card {
  border-radius:12px; border:1px solid var(--border);
  background:var(--surface); padding:20px;
}
.ks-section-title {
  font-size:10px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin:0 0 12px;
}
.ks-section-sub {
  font-size:10px; color:var(--faint); margin-top:2px; margin-bottom:12px;
}
.ks-divider { border:none; border-top:1px solid var(--border); margin:12px 0; }

/* ── Risk badge ─────────────────────────────────────────────────── */
.ks-badge-card {
  border-radius:12px; border:1px solid; padding:20px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.ks-badge-card.CRITICAL { border-color:var(--red-bd);    background:var(--red-bg); }
.ks-badge-card.HIGH     { border-color:var(--orange-bd); background:var(--orange-bg); }
.ks-badge-card.MEDIUM   { border-color:var(--yellow-bd); background:var(--yellow-bg); }
.ks-badge-card.LOW      { border-color:var(--green-bd);  background:var(--green-bg); }

.ks-gauge { position:relative; width:112px; height:112px; flex-shrink:0; }
.ks-gauge-svg { width:100%; height:100%; transform:rotate(-90deg); }
.ks-gauge-label {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ks-gauge-score  { font-size:30px; font-weight:900; line-height:1; }
.ks-gauge-denom  { font-size:11px; font-weight:600; opacity:.6; }
.CRITICAL .ks-gauge-score, .CRITICAL .ks-gauge-denom { color:var(--red); }
.HIGH     .ks-gauge-score, .HIGH     .ks-gauge-denom { color:var(--orange); }
.MEDIUM   .ks-gauge-score, .MEDIUM   .ks-gauge-denom { color:var(--yellow); }
.LOW      .ks-gauge-score, .LOW      .ks-gauge-denom { color:var(--green); }

.ks-badge-level {
  font-size:12px; font-weight:700; letter-spacing:.12em;
  padding:4px 14px; border-radius:20px; border:1px solid;
}
.CRITICAL .ks-badge-level { color:var(--red);    border-color:var(--red-bd);    background:var(--red-bg); }
.HIGH     .ks-badge-level { color:var(--orange); border-color:var(--orange-bd); background:var(--orange-bg); }
.MEDIUM   .ks-badge-level { color:var(--yellow); border-color:var(--yellow-bd); background:var(--yellow-bg); }
.LOW      .ks-badge-level { color:var(--green);  border-color:var(--green-bd);  background:var(--green-bg); }

.ks-risk-summary {
  font-size:14px; font-weight:600; text-align:center; line-height:1.5; margin:0;
}
.CRITICAL .ks-risk-summary { color:var(--red); }
.HIGH     .ks-risk-summary { color:var(--orange); }
.MEDIUM   .ks-risk-summary { color:var(--yellow); }
.LOW      .ks-risk-summary { color:var(--green); }

.ks-field        { margin-bottom:12px; }
.ks-field-label  { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:0 0 4px; }
.ks-field-mono   { font-family:var(--mono); font-size:12px; color:var(--muted); word-break:break-all; line-height:1.5; margin:0; }
.ks-field-text   { font-size:13px; color:var(--muted); margin:0; }

/* ── Attacker profile ───────────────────────────────────────────── */
.ks-attacker {
  border-radius:12px; border:1px solid var(--red-bd);
  background: linear-gradient(135deg, rgba(127,29,29,.35), rgba(15,23,42,.8), rgba(15,23,42,.9));
  padding:20px;
}
.ks-attacker-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.ks-attacker-icon {
  width:28px; height:28px; border-radius:8px;
  background:var(--red-bg); border:1px solid var(--red-bd);
  display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0;
}
.ks-attacker-title { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin:0; }
.ks-attacker-sub   { font-size:10px; color:rgba(248,113,113,.5); margin:2px 0 0; }

.ks-attacker-section { margin-bottom:16px; }
.ks-attacker-section .ks-field-label { color:var(--faint); }
.ks-attacker-objective { font-size:14px; font-weight:600; color:rgba(254,226,226,.8); line-height:1.6; margin:0; }

.ks-tactic-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.ks-tactic-item { display:flex; align-items:flex-start; gap:10px; }
.ks-tactic-num {
  width:16px; height:16px; border-radius:4px; flex-shrink:0;
  background:var(--red-bg); border:1px solid var(--red-bd);
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; color:var(--red);
}
.ks-tactic-text { font-size:12px; color:#cbd5e1; line-height:1.6; }

.ks-psych {
  padding:14px; border-radius:8px; background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.12);
  margin-bottom:12px;
}
.ks-psych-text { font-size:12px; color:#94a3b8; line-height:1.6; font-style:italic; margin:0; }
.ks-attacker-target {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px; border-radius:8px; background:rgba(249,115,22,.06); border:1px solid rgba(249,115,22,.12);
}
.ks-attacker-target-icon {
  width:24px; height:24px; flex-shrink:0; border-radius:6px;
  background:rgba(249,115,22,.1); border:1px solid rgba(249,115,22,.2);
  display:flex; align-items:center; justify-content:center; font-size:10px;
}
.ks-attacker-target-text { font-size:12px; color:#94a3b8; line-height:1.6; margin:0; }

/* ── VirusTotal ─────────────────────────────────────────────────── */
.ks-vt-score-row { display:flex; align-items:flex-start; gap:16px; margin-bottom:16px; }
.ks-vt-score {
  font-size:32px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums;
}
.ks-vt-score.danger { color:var(--red); }
.ks-vt-score.warn   { color:var(--yellow); }
.ks-vt-score.clean  { color:var(--green); }
.ks-vt-score span   { font-size:14px; font-weight:400; color:var(--faint); }
.ks-vt-desc p { font-size:14px; font-weight:600; color:var(--text); margin:0; }
.ks-vt-desc small { font-size:12px; color:var(--faint); }

.ks-vt-bars { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.ks-vt-bar  { display:flex; align-items:center; gap:8px; }
.ks-vt-bar-label { font-size:10px; width:72px; flex-shrink:0; }
.ks-vt-bar-label.red    { color:var(--red); }
.ks-vt-bar-label.yellow { color:var(--yellow); }
.ks-vt-bar-label.green  { color:var(--green); }
.ks-vt-bar-label.slate  { color:var(--faint); }
.ks-vt-bar-track {
  flex:1; height:6px; border-radius:3px;
  background: rgba(255,255,255,0.05); overflow:hidden;
}
.ks-vt-bar-fill { height:100%; border-radius:3px; transition:width .7s ease; }
.ks-vt-bar-fill.red    { background:var(--red); }
.ks-vt-bar-fill.yellow { background:var(--yellow); }
.ks-vt-bar-fill.green  { background:rgba(74,222,128,.7); }
.ks-vt-bar-fill.slate  { background:#475569; }
.ks-vt-bar-count { font-size:10px; width:16px; text-align:right; }
.ks-vt-bar-count.red    { color:var(--red); }
.ks-vt-bar-count.yellow { color:var(--yellow); }
.ks-vt-bar-count.green  { color:var(--green); }
.ks-vt-bar-count.slate  { color:var(--faint); }

.ks-vendor-list { display:flex; flex-direction:column; gap:2px; }
.ks-vendor-row {
  display:flex; align-items:center; gap:8px; padding:6px 8px;
  border-radius:8px; transition:background .15s;
}
.ks-vendor-row:hover { background:rgba(255,255,255,.04); }
.ks-vendor-badge {
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px;
  flex-shrink:0; border:1px solid;
}
.ks-vendor-badge.mal  { color:var(--red);    background:var(--red-bg);    border-color:var(--red-bd); }
.ks-vendor-badge.susp { color:var(--yellow); background:var(--yellow-bg); border-color:var(--yellow-bd); }
.ks-vendor-name { font-size:12px; font-weight:500; color:#cbd5e1; flex:1; }
.ks-vendor-result { font-size:11px; color:var(--faint); }
.ks-vendor-link { font-size:10px; color:var(--faint); transition:color .15s; }
.ks-vendor-row:hover .ks-vendor-link { color:var(--indigo); }

/* ── Inline risk reasons (in hero card) ─────────────────────────── */
.ks-inline-reasons { list-style:none; padding:0; margin:4px 0 0; display:flex; flex-direction:column; gap:8px; }
.ks-inline-reason  { display:flex; align-items:flex-start; gap:8px; }
.ks-pts-badge {
  flex-shrink:0; font-size:10px; font-weight:700;
  padding:2px 6px; border-radius:4px; border:1px solid;
  font-variant-numeric:tabular-nums; margin-top:2px;
}
.ks-pts-red    { color:var(--red);    background:var(--red-bg);    border-color:var(--red-bd); }
.ks-pts-orange { color:var(--orange); background:var(--orange-bg); border-color:var(--orange-bd); }
.ks-pts-yellow { color:var(--yellow); background:var(--yellow-bg); border-color:var(--yellow-bd); }
.ks-reason-dot { color:var(--red); font-size:12px; flex-shrink:0; margin-top:2px; }
.ks-reason-text { font-size:12px; color:#cbd5e1; line-height:1.6; }

/* ── Unreachable domain banner ──────────────────────────────────── */
.ks-unreachable {
  display:flex; gap:12px; padding:16px; border-radius:12px;
  border:1px solid rgba(245,158,11,.4); background:rgba(245,158,11,.1);
}
.ks-unreachable-icon {
  width:32px; height:32px; flex-shrink:0; border-radius:8px;
  background:rgba(245,158,11,.2); border:1px solid rgba(245,158,11,.3);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.ks-unreachable-title { font-size:13px; font-weight:700; color:#fcd34d; margin:0 0 4px; }
.ks-unreachable-desc  { font-size:12px; color:rgba(252,211,77,.7); line-height:1.6; margin:0; }

/* ── Link purpose card ──────────────────────────────────────────── */
.ks-purpose-header { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.ks-purpose-icon {
  width:28px; height:28px; flex-shrink:0; border-radius:8px; border:1px solid;
  display:flex; align-items:center; justify-content:center; font-size:12px; margin-top:1px;
}
.ks-purpose-icon.danger { background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.25); }
.ks-purpose-icon.warn   { background:rgba(234,179,8,.15);  border-color:rgba(234,179,8,.25); }
.ks-purpose-icon.safe   { background:rgba(34,197,94,.15);  border-color:rgba(34,197,94,.25); }
.ks-purpose-text { font-size:13px; color:#cbd5e1; line-height:1.7; margin:0; }
.ks-purpose-mechanism { font-size:13px; color:rgba(253,186,116,.8); line-height:1.7; margin:0; }

/* ── Threat databases ────────────────────────────────────────────── */
.ks-tdb-list { display:flex; flex-direction:column; gap:12px; }
.ks-tdb-row  { display:flex; align-items:flex-start; gap:12px; }
.ks-tdb-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.ks-tdb-dot.red    { background:var(--red); }
.ks-tdb-dot.yellow { background:var(--yellow); }
.ks-tdb-dot.green  { background:var(--green); }
.ks-tdb-dot.grey   { background:#475569; }
.ks-tdb-name   { font-size:12px; font-weight:600; color:#cbd5e1; margin:0 0 2px; }
.ks-tdb-status { font-size:12px; margin:0; }

/* ── URL structural analysis ────────────────────────────────────── */
.ks-url-patterns { display:flex; flex-direction:column; gap:10px; }
.ks-url-pattern  { display:flex; align-items:flex-start; gap:8px; }
.ks-url-pattern-arrow { font-size:12px; flex-shrink:0; margin-top:2px; }
.ks-url-pattern-text  { font-size:13px; color:#cbd5e1; line-height:1.6; }

/* ── Domain age badge ────────────────────────────────────────────── */
.ks-domain-badge {
  display:inline-block; font-size:10px; font-weight:700; padding:1px 6px;
  border-radius:4px; border:1px solid; margin-left:6px; vertical-align:middle;
}
.ks-domain-badge.red { color:var(--red); background:var(--red-bg); border-color:var(--red-bd); }

/* ── Glossary ────────────────────────────────────────────────────── */
.ks-glossary { display:flex; flex-direction:column; gap:8px; }
.ks-glossary-row { display:flex; gap:12px; }
.ks-glossary-term { font-size:12px; font-weight:700; color:#a5b4fc; flex-shrink:0; width:80px; }
.ks-glossary-def  { font-size:12px; color:var(--faint); line-height:1.6; }

/* ── Redirect chain ─────────────────────────────────────────────── */
.ks-hops { display:flex; flex-direction:column; gap:0; }
.ks-hop  { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-top:1px solid var(--border); }
.ks-hop:first-child { border-top:none; padding-top:0; }
.ks-hop-num {
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700;
}
.ks-hop-num.first { background:#dbeafe; color:#1d4ed8; }
.ks-hop-num.last  { background:#ffedd5; color:#c2410c; }
.ks-hop-num.mid   { background:rgba(255,255,255,.07); color:var(--muted); }
.ks-hop-body { flex:1; min-width:0; }
.ks-hop-label { font-size:10px; color:var(--faint); margin:0 0 4px; }
.ks-hop-url   { font-family:var(--mono); font-size:12px; color:#cbd5e1; word-break:break-all; line-height:1.5; margin:0 0 6px; }
.ks-hop-badges { display:flex; flex-wrap:wrap; gap:6px; }
.ks-badge-cf {
  font-size:11px; color:var(--orange);
  background:var(--orange-bg); border:1px solid var(--orange-bd);
  padding:2px 8px; border-radius:4px;
}
.ks-ext-link {
  display:inline-flex; align-items:center; gap:2px;
  font-size:11px; font-weight:500; padding:2px 6px; border-radius:4px;
  border:1px solid var(--indigo-bd); background:var(--indigo-bg); color:#a5b4fc;
  transition:background .15s, color .15s;
}
.ks-ext-link:hover { background:rgba(99,102,241,.2); color:#c7d2fe; }
.ks-ext-link sup { font-size:8px; opacity:.5; }
.ks-ext-link-subtle {
  display:inline-flex; align-items:center; gap:2px;
  font-size:11px; font-weight:500; padding:2px 6px; border-radius:4px;
  border:1px solid var(--border); background:var(--surface); color:var(--faint);
  transition:background .15s, color .15s;
}
.ks-ext-link-subtle:hover { background:rgba(255,255,255,.06); color:var(--muted); }

/* ── Domains ────────────────────────────────────────────────────── */
.ks-domain-list { display:flex; flex-direction:column; gap:0; }
.ks-domain { padding:12px 0; border-top:1px solid var(--border); }
.ks-domain:first-child { border-top:none; padding-top:0; }
.ks-domain-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; }
.ks-badge-mal {
  font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px;
  color:var(--red); background:var(--red-bg); border:1px solid var(--red-bd);
}

/* ── Content flags ──────────────────────────────────────────────── */
.ks-flags { display:flex; flex-wrap:wrap; gap:8px; }
.ks-flag {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:20px; font-size:12px; font-weight:500;
  border:1px solid;
}
.ks-flag.on  { color:var(--red);    background:var(--red-bg);    border-color:var(--red-bd); }
.ks-flag.off { color:var(--faint);  background:var(--surface);   border-color:var(--border); }
.ks-flag-dot { font-size:8px; }
.ks-badge-brand {
  display:inline-flex; align-items:center; padding:5px 12px; border-radius:20px;
  font-size:12px; font-weight:500;
  color:#c084fc; background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.3);
}

/* ── SSL ────────────────────────────────────────────────────────── */
.ks-ssl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:480px) { .ks-ssl-grid { grid-template-columns:1fr 1fr; } }
.ks-ssl-key { font-size:10px; color:var(--faint); margin:0 0 4px; }
.ks-ssl-val { font-family:var(--mono); font-size:12px; color:var(--muted); margin:0; }
.ks-ssl-fresh { font-size:12px; font-weight:700; color:var(--red); margin:0; }

/* ── IOC ────────────────────────────────────────────────────────── */
.ks-ioc-list { display:flex; flex-direction:column; gap:0; }
.ks-ioc      { padding:10px 0; border-top:1px solid var(--border); }
.ks-ioc:first-child { border-top:none; padding-top:0; }
.ks-ioc-type { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:0 0 4px; }
.ks-ioc-val  { font-family:var(--mono); font-size:12px; color:#cbd5e1; word-break:break-all; margin:0 0 6px; }
.ks-ioc-links { display:flex; flex-wrap:wrap; gap:6px; }

/* ── Hook banner (in-report CTA) ────────────────────────────────── */
.ks-hook {
  display:flex; gap:12px; padding:16px; border-radius:12px;
  border:1px solid var(--sky-bd); background:linear-gradient(90deg, rgba(8,47,73,.5), rgba(15,23,42,.4));
}
.ks-hook-icon {
  width:32px; height:32px; flex-shrink:0; border-radius:8px;
  background:var(--sky-bg); border:1px solid var(--sky-bd);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.ks-hook-title { font-size:12px; font-weight:700; color:var(--sky-text); margin:0 0 4px; }
.ks-hook-desc  { font-size:12px; color:rgba(125,211,252,.55); line-height:1.6; margin:0; }

/* ── Plans CTA ──────────────────────────────────────────────────── */
.ks-cta {
  border-radius:16px; border:1px solid var(--indigo-bd);
  background:linear-gradient(135deg, rgba(30,27,75,.8), rgba(15,23,42,.9), rgba(46,16,101,.5));
  padding:24px;
}
.ks-cta-header { margin-bottom:20px; }
.ks-cta-eyebrow {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:8px;
}
.ks-cta-eyebrow-icon {
  width:24px; height:24px; border-radius:6px;
  background:var(--indigo-bg); border:1px solid var(--indigo-bd);
  display:flex; align-items:center; justify-content:center; font-size:11px;
}
.ks-cta-eyebrow span { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#a5b4fc; }
.ks-cta h2 { font-size:20px; font-weight:900; color:var(--text); margin:0 0 6px; }
.ks-cta p  { font-size:13px; color:var(--muted); line-height:1.6; margin:0; }

.ks-plans { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:20px 0; }
@media(min-width:600px) { .ks-plans { grid-template-columns:repeat(4,1fr); } }
.ks-plan {
  border-radius:12px; padding:16px; border:1px solid var(--border);
  background:var(--surface); position:relative;
}
.ks-plan.highlight { border-color:var(--indigo-bd); background:rgba(99,102,241,.15); }
.ks-plan-badge {
  position:absolute; top:-10px; left:12px;
  font-size:9px; font-weight:700; color:#a5b4fc;
  border:1px solid var(--indigo-bd); background:rgba(30,27,75,.9);
  padding:2px 8px; border-radius:20px;
}
.ks-plan-name  { font-size:14px; font-weight:700; color:var(--text); margin:0 0 2px; }
.ks-plan.highlight .ks-plan-name { color:#fff; }
.ks-plan-price { font-size:11px; color:var(--faint); margin:0 0 12px; }
.ks-plan.highlight .ks-plan-price { color:#a5b4fc; }
.ks-plan-features { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.ks-plan-feature  { display:flex; align-items:flex-start; gap:6px; font-size:11px; color:var(--muted); line-height:1.4; }
.ks-plan-feature-check { font-size:10px; color:var(--green); flex-shrink:0; margin-top:1px; }
.ks-plan.highlight .ks-plan-feature { color:#c7d2fe; }
.ks-plan.highlight .ks-plan-feature-check { color:#a5b4fc; }

.ks-cta-sub { font-size:10px; color:#475569; margin:2px 0 6px; }
.ks-cta-sub strong { color:#64748b; font-weight:500; }
.ks-plan-cta {
  display:block; width:100%; text-align:center; margin-top:10px;
  padding:6px; border-radius:8px; font-size:11px; font-weight:600;
  border:1px solid var(--border); background:rgba(255,255,255,.04);
  color:#cbd5e1; transition:background .15s; text-decoration:none;
}
.ks-plan-cta:hover { background:rgba(255,255,255,.08); }
.ks-plan-cta.primary { background:var(--indigo); border-color:transparent; color:#fff; }
.ks-plan-cta.primary:hover { background:#5254cc; }
.ks-plan-cta-current {
  display:block; width:100%; text-align:center; margin-top:10px;
  padding:6px; border-radius:8px; font-size:11px; font-weight:500;
  border:1px solid var(--border); color:#475569;
}
.ks-cta-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--border); }
.ks-cta-btn-primary {
  display:inline-block; padding:12px 24px; border-radius:12px;
  font-size:14px; font-weight:700; background:var(--indigo); color:#fff;
  transition:background .15s, transform .1s; text-decoration:none;
  box-shadow:0 4px 24px rgba(99,102,241,.25);
}
.ks-cta-btn-primary:hover { background:#5254cc; }

/* ── Safety modal ───────────────────────────────────────────────── */
.ks-modal-overlay {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:flex-end; justify-content:center; padding:16px;
  background:rgba(0,0,0,.75); backdrop-filter:blur(6px);
}
@media(min-width:640px) { .ks-modal-overlay { align-items:center; } }
.ks-modal {
  width:100%; max-width:640px; max-height:90vh; overflow-y:auto;
  border-radius:18px; border:1px solid var(--border);
  background:#0f1117; box-shadow:0 24px 80px rgba(0,0,0,.6);
  animation:ks-slide-up .3s ease;
}
@keyframes ks-slide-up {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
.ks-modal-header {
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; border-bottom:1px solid var(--border);
  background:rgba(15,17,23,.95); backdrop-filter:blur(8px);
}
.ks-modal-title-row { display:flex; align-items:center; gap:12px; }
.ks-modal-icon {
  width:32px; height:32px; border-radius:8px;
  background:var(--indigo-bg); border:1px solid var(--indigo-bd);
  display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;
}
.ks-modal-title { font-size:13px; font-weight:700; color:var(--text); margin:0; }
.ks-modal-sub   { font-size:11px; color:var(--faint); margin:2px 0 0; }
.ks-modal-close {
  width:32px; height:32px; border-radius:8px;
  background:rgba(255,255,255,.05); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1; transition:background .15s, color .15s;
}
.ks-modal-close:hover { background:rgba(255,255,255,.1); color:var(--text); }
.ks-modal-body  { padding:24px; display:flex; flex-direction:column; gap:32px; }
.ks-modal-intro { font-size:13px; color:var(--muted); line-height:1.6; margin:0; }
.ks-modal-intro strong { color:var(--text); font-weight:600; }

.ks-modal-features-title {
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin:0 0 12px;
}
.ks-modal-feature-list { display:flex; flex-direction:column; gap:10px; }
.ks-modal-feature {
  display:flex; gap:16px; padding:16px; border-radius:12px; border:1px solid;
}
.ks-mf-indigo { background:rgba(99,102,241,.1);  border-color:rgba(99,102,241,.25); }
.ks-mf-violet { background:rgba(139,92,246,.1);  border-color:rgba(139,92,246,.25); }
.ks-mf-rose   { background:rgba(244,63,94,.1);   border-color:rgba(244,63,94,.25); }
.ks-mf-amber  { background:rgba(245,158,11,.1);  border-color:rgba(245,158,11,.25); }
.ks-mf-teal   { background:rgba(20,184,166,.1);  border-color:rgba(20,184,166,.25); }
.ks-mf-icon   { font-size:20px; flex-shrink:0; margin-top:2px; }
.ks-mf-name   { font-size:13px; font-weight:700; color:var(--text); margin:0 0 4px; }
.ks-mf-badge  {
  display:inline-block; font-size:10px; font-weight:600; padding:1px 8px;
  border-radius:20px; border:1px solid; margin:0 0 6px;
}
.ks-mf-indigo .ks-mf-badge { color:#a5b4fc; background:rgba(99,102,241,.1);  border-color:rgba(99,102,241,.25); }
.ks-mf-violet .ks-mf-badge { color:#c4b5fd; background:rgba(139,92,246,.1);  border-color:rgba(139,92,246,.25); }
.ks-mf-rose   .ks-mf-badge { color:#fda4af; background:rgba(244,63,94,.1);   border-color:rgba(244,63,94,.25); }
.ks-mf-amber  .ks-mf-badge { color:#fcd34d; background:rgba(245,158,11,.1);  border-color:rgba(245,158,11,.25); }
.ks-mf-teal   .ks-mf-badge { color:#5eead4; background:rgba(20,184,166,.1);  border-color:rgba(20,184,166,.25); }
.ks-mf-desc   { font-size:12px; color:var(--muted); line-height:1.6; margin:0; }

.ks-modal-plans-title {
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin:0 0 12px;
}
.ks-modal-plans { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ks-modal-plan  {
  border-radius:12px; padding:14px; border:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.ks-modal-plan.hl { border-color:var(--indigo-bd); background:var(--indigo-bg); }
.ks-mp-header { display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.ks-mp-name  { font-size:13px; font-weight:700; color:var(--text); }
.ks-modal-plan.hl .ks-mp-name { color:#a5b4fc; }
.ks-mp-price { font-family:var(--mono); font-size:11px; color:var(--faint); }
.ks-mp-features { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px; }
.ks-mp-feat { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
.ks-mp-check { color:var(--faint); font-size:10px; }
.ks-modal-plan.hl .ks-mp-check { color:#a5b4fc; }

.ks-modal-actions { display:flex; flex-wrap:wrap; gap:10px; }
.ks-modal-btn-primary {
  flex:1; padding:12px; border-radius:12px;
  background:var(--indigo); color:#fff; font-size:13px; font-weight:700;
  text-align:center; transition:background .15s;
}
.ks-modal-btn-primary:hover { background:#5254cc; }
.ks-modal-btn-secondary {
  padding:12px 20px; border-radius:12px;
  border:1px solid var(--border); background:rgba(255,255,255,.04);
  color:#cbd5e1; font-size:13px; font-weight:500; transition:background .15s;
}
.ks-modal-btn-secondary:hover { background:rgba(255,255,255,.07); }

/* ── Footer ─────────────────────────────────────────────────────── */
.ks-footer {
  margin-top:auto; padding-top:48px;
  font-size:11px; color:var(--faint); text-align:center;
  display:flex; flex-direction:column; gap:4px;
}
.ks-footer a { color:var(--faint); transition:color .15s; }
.ks-footer a:hover { color:var(--muted); }