/* =========================================================
   Intellihost Remote Rescue — help.intelli.host
   Bootstrap 5 theme overlay. Brand: teal #0097B5, DM Sans.
   Single source of truth for both index.php and preview.html.
   ========================================================= */

:root{
  --ih-teal:#0097B5; --ih-teal-dark:#00667A; --ih-teal-mid:#5BC1D5;
  --ih-teal-light:#93D8E5; --ih-teal-pale:#E5F6F9;
  --ih-amber:#F4A847; --ih-amber-pale:#FEF6E7; --ih-amber-ink:#8A5411;
  --ih-ink:#1F2331; --ih-body:#3E4457; --ih-muted:#666D7E;
  --ih-line:#E7E9EE; --ih-line-soft:#F1F2F5; --ih-bg:#FAFAF7;
  --ih-green:#16A34A; --ih-green-pale:#F0FDF4; --ih-green-ink:#15803D;
  --ih-red:#D92632; --ih-red-pale:#FCEEEF; --ih-red-ink:#B6202A;

  /* Bootstrap variable overrides */
  --bs-primary:#0097B5; --bs-primary-rgb:0,151,181;
  --bs-body-color:#3E4457; --bs-body-bg:#FAFAF7;
  --bs-body-font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  --bs-heading-color:#1F2331;
  --bs-border-color:#E7E9EE;
  --bs-link-color:#00667A; --bs-link-hover-color:#0097B5;
  --bs-border-radius:10px; --bs-border-radius-sm:8px; --bs-border-radius-lg:12px;
  --bs-font-monospace:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}

body{ background:var(--ih-bg); color:var(--ih-body); -webkit-font-smoothing:antialiased; }
.mono{ font-family:var(--bs-font-monospace); }

/* ---------- shell ---------- */
.ih-wrap{ max-width:680px; }

/* ---------- header ---------- */
.ih-head{ background:var(--ih-teal-dark); }
.ih-head img{ height:26px; width:auto; }
.ih-head .tag{ font-size:.8125rem; color:var(--ih-teal-light); }

/* ---------- hero ---------- */
.ih-hero h1{ font-weight:700; letter-spacing:-.025em; color:var(--ih-ink); font-size:clamp(1.75rem,6vw,2.375rem); }
.ih-hero .lede{ font-size:1.0625rem; line-height:1.6; color:var(--ih-muted); max-width:46ch; }
.ih-eyebrow{ font-family:var(--bs-font-monospace); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ih-teal-dark); }

/* ---------- cards ---------- */
.ih-card{ background:#fff; border:1px solid var(--ih-line); border-radius:14px; }
.ih-card-pad{ padding:clamp(1.25rem,4vw,1.75rem); }
.ih-card-head{ display:flex; align-items:center; gap:.75rem; }
.ih-card-head h2{ font-size:1.125rem; font-weight:600; letter-spacing:-.015em; color:var(--ih-ink); margin:0; }
.ih-ico{ width:38px; height:38px; border-radius:10px; background:var(--ih-teal-pale); color:var(--ih-teal-dark); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.ih-ico svg{ width:19px; height:19px; }
.ih-ico.amber{ background:var(--ih-amber-pale); color:var(--ih-amber-ink); }
.ih-ico.green{ background:var(--ih-green-pale); color:var(--ih-green-ink); }

/* ---------- buttons ---------- */
.btn{ font-weight:600; border-radius:10px; }
.btn-lg{ padding:.8125rem 1.25rem; font-size:1rem; }
.btn-ih{ background:var(--ih-teal); border-color:var(--ih-teal); color:#fff; }
.btn-ih:hover,.btn-ih:focus{ background:var(--ih-teal-dark); border-color:var(--ih-teal-dark); color:#fff; }
.btn-ih-amber{ background:var(--ih-amber); border-color:var(--ih-amber); color:var(--ih-ink); }
.btn-ih-amber:hover,.btn-ih-amber:focus{ background:#D9881F; border-color:#D9881F; color:#fff; }
.btn-ih-outline{ background:#fff; border-color:var(--ih-line); color:var(--ih-body); }
.btn-ih-outline:hover,.btn-ih-outline:focus{ border-color:var(--ih-teal); color:var(--ih-teal-dark); background:#fff; }
.btn svg{ width:18px; height:18px; flex:0 0 auto; }
.btn:focus-visible{ outline:3px solid rgba(0,151,181,.35); outline-offset:2px; box-shadow:none; }

/* ---------- password form ---------- */
.form-label{ font-weight:600; font-size:.875rem; color:var(--ih-ink); }
.form-control{ border:1.5px solid #CFD2DB; border-radius:10px; padding:.8125rem 1rem; font-size:1rem; color:var(--ih-ink); }
.form-control::placeholder{ color:#ABB1BF; }
.form-control:focus{ border-color:var(--ih-teal); box-shadow:0 0 0 4px var(--ih-teal-pale); }
.form-text{ color:var(--ih-muted); font-size:.8125rem; }
.ih-code-input{ font-family:var(--bs-font-monospace); letter-spacing:.06em; }

/* ---------- alerts ---------- */
.ih-alert{ border:1px solid; border-radius:10px; padding:.75rem 1rem; font-size:.9375rem; display:flex; gap:.625rem; align-items:flex-start; }
.ih-alert svg{ width:17px; height:17px; flex:0 0 auto; margin-top:.125rem; }
.ih-alert-err{ background:var(--ih-red-pale); border-color:#F4C3C6; color:var(--ih-red-ink); }
.ih-alert-ok{ background:var(--ih-green-pale); border-color:#BBF7D0; color:var(--ih-green-ink); }
.ih-alert-warn{ background:var(--ih-amber-pale); border-color:#FCEAC4; color:var(--ih-amber-ink); }
.ih-alert-info{ background:var(--ih-teal-pale); border-color:#C8ECF2; color:var(--ih-teal-dark); }

/* ---------- tabs (Windows / macOS / Linux) ---------- */
.ih-tabs{ border-bottom:1px solid var(--ih-line); gap:.25rem; }
.ih-tabs .nav-link{ border:0; border-bottom:2px solid transparent; border-radius:0; color:var(--ih-muted); font-weight:600; font-size:.9375rem; padding:.625rem .875rem; display:flex; align-items:center; gap:.5rem; }
.ih-tabs .nav-link svg{ width:16px; height:16px; }
.ih-tabs .nav-link:hover{ color:var(--ih-ink); }
.ih-tabs .nav-link.active{ color:var(--ih-teal-dark); border-bottom-color:var(--ih-teal); background:transparent; }

/* ---------- architecture picker hint ---------- */
.ih-arch-hint{ font-size:.8125rem; line-height:1.55; color:var(--ih-muted); }
.ih-arch-hint code{ background:var(--ih-line-soft); border:1px solid var(--ih-line); border-radius:5px; padding:.0625rem .3125rem; font-size:.75rem; color:var(--ih-teal-dark); }

/* ---------- steps ---------- */
.ih-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.125rem; counter-reset:s; }
.ih-steps > li{ display:flex; gap:.875rem; align-items:flex-start; counter-increment:s; }
.ih-steps > li::before{ content:counter(s); flex:0 0 auto; width:27px; height:27px; border-radius:50%; background:var(--ih-teal); color:#fff; font-size:.8125rem; font-weight:700; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.ih-steps .st-body{ min-width:0; padding-top:.125rem; }
.ih-steps h3{ font-size:.9875rem; font-weight:600; color:var(--ih-ink); margin:0 0 .1875rem; }
.ih-steps p{ font-size:.875rem; line-height:1.55; color:var(--ih-muted); margin:0; }
.ih-steps p + p{ margin-top:.375rem; }
.ih-steps code{ background:var(--ih-line-soft); border:1px solid var(--ih-line); border-radius:5px; padding:.0625rem .3125rem; font-size:.8125rem; color:var(--ih-teal-dark); }

/* ---------- the two numbers to read out ---------- */
.ih-readout{ background:var(--ih-amber-pale); border:1px solid #FCEAC4; border-radius:12px; padding:1rem 1.125rem; }
.ih-readout .rk{ font-family:var(--bs-font-monospace); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ih-amber-ink); }
.ih-readout .rv{ font-family:var(--bs-font-monospace); font-size:1.125rem; font-weight:500; color:var(--ih-ink); letter-spacing:.02em; }
.ih-readout .rv .dim{ color:#B9852F; }

/* ---------- IP panel ---------- */
.ih-ip{ background:linear-gradient(160deg,var(--ih-teal-dark),#073C48); border-radius:14px; color:#fff; }
.ih-ip .lbl{ font-family:var(--bs-font-monospace); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ih-teal-light); }
.ih-ip .val{ font-family:var(--bs-font-monospace); font-size:clamp(1.375rem,6.5vw,1.875rem); font-weight:500; letter-spacing:-.01em; color:#fff; word-break:break-all; line-height:1.2; }
.ih-ip .hint{ font-size:.8125rem; color:rgba(255,255,255,.72); }
.ih-ip .btn-copy{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26); color:#fff; font-size:.875rem; padding:.5rem .875rem; border-radius:9px; font-weight:600; display:inline-flex; align-items:center; gap:.4375rem; }
.ih-ip .btn-copy:hover{ background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.4); color:#fff; }
.ih-ip .btn-copy svg{ width:15px; height:15px; }

/* ---------- footer ---------- */
.ih-foot{ border-top:1px solid var(--ih-line); font-size:.875rem; color:var(--ih-muted); }
.ih-foot a{ color:var(--ih-teal-dark); font-weight:600; text-decoration:none; }
.ih-foot a:hover{ text-decoration:underline; }
.ih-foot .sorted{ font-weight:600; color:var(--ih-body); }

/* ---------- misc ---------- */
.ih-divider{ height:1px; background:var(--ih-line); border:0; }
.ih-lockrow{ font-size:.8125rem; color:var(--ih-muted); }
.ih-lockrow a{ color:var(--ih-muted); text-decoration:underline; }
.ih-lockrow a:hover{ color:var(--ih-body); }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }