/*
 * InstaHost interface theme 1.0.0
 * Canonical source: phamid/instahost docs/design-system/instahost-theme.css
 */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --cp-bg: #04060f;
  --cp-bg-elevated: #0a1030;
  --cp-surface: rgba(20, 28, 64, 0.72);
  --cp-surface-soft: rgba(120, 140, 255, 0.08);
  --cp-border: rgba(140, 165, 255, 0.18);
  --cp-border-strong: rgba(124, 201, 255, 0.42);
  --cp-text: #eaf0ff;
  --cp-text-muted: #aeb9e6;
  --cp-text-soft: #93a0cf;
  --cp-accent: #22d3ee;
  --cp-accent-hover: #67e8f9;
  --cp-accent-soft: rgba(34, 211, 238, 0.12);
  --cp-accent-fg: #04060f;
  --cp-violet: #a855f7;
  --cp-blue: #4f74ff;
  --cp-success: #4ade80;
  --cp-danger: #fb7185;
  --cp-warning: #fbbf24;
  --cp-link: #67e8f9;
  --cp-shadow: 0 22px 55px rgba(3, 6, 24, 0.55);
  --cp-overlay: rgba(4, 6, 15, 0.82);
  --cp-panel: rgba(10, 16, 48, 0.76);
  --cp-panel-strong: rgba(10, 16, 48, 0.94);
  --cp-sheen: rgba(255, 255, 255, 0.06);
  --cp-highlight: rgba(34, 211, 238, 0.24);
  --bg: var(--cp-bg);
  --card: var(--cp-surface);
  --ink: var(--cp-text);
  --muted: var(--cp-text-muted);
  --line: var(--cp-border);
  --accent: var(--cp-accent);
  --accent-d: var(--cp-accent-hover);
  --warn: var(--cp-danger);
  --warn-bg: rgba(251, 113, 133, 0.14);
  --ok: var(--cp-success);
  --gold: var(--cp-warning);
  --gold-bg: rgba(251, 191, 36, 0.14);
  --shadow: var(--cp-shadow);
}

html {
  background: var(--cp-bg);
}

body,
#login,
#landing,
#app {
  background: transparent;
  color: var(--cp-text);
}

body {
  isolation: isolate;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.landing-wrap {
  width: min(1120px, calc(100% - 48px)) !important;
}

.wrap {
  width: min(1160px, calc(100% - 48px)) !important;
}

.shell {
  width: min(1180px, calc(100% - 48px)) !important;
}

.app-shell {
  width: min(1120px, calc(100% - 48px)) !important;
}

.instahost-app {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -2;
  background:
    radial-gradient(circle at 4% 4%, rgba(34, 211, 238, 0.34), transparent 28rem),
    radial-gradient(circle at 96% 22%, rgba(168, 85, 247, 0.32), transparent 30rem),
    radial-gradient(circle at 48% 102%, rgba(79, 116, 255, 0.3), transparent 28rem),
    var(--cp-bg);
}

body::after {
  z-index: -1;
  background-image:
    linear-gradient(rgba(140, 165, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 165, 255, 0.12) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 68% at 50% 28%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 68% at 50% 28%, #000 40%, transparent 100%);
  opacity: 0.5;
}

h1,
h2,
h3,
.brand,
.landing-brand,
.product-name,
.section-title,
.landing-section h2 {
  font-family: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
}

h1,
.landing-hero h1 {
  color: transparent;
  background: linear-gradient(100deg, #eaf0ff 8%, #7cc9ff 40%, #c39bff 72%, #eaf0ff 96%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

h1 em,
.landing-hero h1 em {
  color: transparent;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
}

.brand,
.landing-brand,
.insta-wordmark,
.brand strong,
.brand span,
.app-brand-link span {
  color: transparent;
  background: linear-gradient(90deg, var(--cp-accent), var(--cp-violet));
  -webkit-background-clip: text;
  background-clip: text;
}

.kicker,
.landing-kicker,
.landing-eyebrow,
.badge,
.pill,
.status-badge,
.tech-pill {
  border: 1px solid var(--cp-border);
  background: rgba(120, 140, 255, 0.08);
  color: #c9d4ff;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card,
.feature,
.feature-card,
.preview,
.preview-card,
.login-card,
.landing-login,
.landing-phone-screen,
.landing-scan,
.landing-result,
.landing-float,
.architecture-row,
.stat,
.task,
.provider-card,
.channel,
.release-card,
dialog {
  border-color: var(--cp-border);
  background: var(--cp-surface);
  box-shadow: var(--cp-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.card,
.feature,
.feature-card,
.preview,
.login-card,
.landing-login,
.stat,
.task,
.provider-card,
.channel,
dialog {
  border-radius: 18px;
}

.card:hover,
.feature-card:hover,
.task:hover,
.release-card:hover,
.provider-card:hover,
.channel:hover {
  border-color: var(--cp-border-strong);
}

.features,
.landing-section.alt {
  background: rgba(10, 16, 48, 0.38);
  border-color: var(--cp-border);
}

.landing-nav,
.topbar,
header.top,
.top,
.tabs,
nav.tabs,
.dialog-head {
  border-color: var(--cp-border);
  background: var(--cp-panel-strong);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

button,
.landing-cta,
.landing-signin-link {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--cp-accent), var(--cp-violet));
  color: var(--cp-accent-fg);
  box-shadow: 0 8px 30px rgba(120, 90, 255, 0.28);
}

button:hover,
.landing-cta:hover,
.landing-signin-link:hover {
  background: linear-gradient(90deg, #67e8f9, #c084fc);
  box-shadow: 0 12px 38px rgba(120, 90, 255, 0.4);
  transform: translateY(-1px);
}

button.secondary,
button.sec,
button.quiet,
button.ghost,
.tabs button,
nav.tabs button {
  border-color: var(--cp-border);
  background: rgba(120, 140, 255, 0.07);
  color: var(--cp-text);
  box-shadow: none;
}

button.secondary:hover,
button.sec:hover,
button.quiet:hover,
button.ghost:hover,
.tabs button:hover,
nav.tabs button:hover {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

button.danger {
  border-color: var(--cp-danger);
  background: var(--cp-danger);
  color: #140409;
}

input,
select,
textarea,
.output {
  border-radius: 12px;
  border-color: var(--cp-border);
  background: rgba(4, 6, 15, 0.68);
  color: var(--cp-text);
}

input::placeholder,
textarea::placeholder {
  color: var(--cp-text-soft);
}

:focus-visible {
  outline: 3px solid var(--cp-accent);
  outline-offset: 3px;
}

a {
  color: var(--cp-link);
}

.lead,
.sub,
.muted,
.small,
.section-copy,
.landing-lead,
.landing-note,
.landing-section-intro,
.feature p,
.feature-card p,
.footer,
.landing-footer,
.meta {
  color: var(--cp-text-muted);
}

.privacy-banner,
.record-center,
.landing-cover {
  background: linear-gradient(135deg, var(--cp-accent), var(--cp-violet));
  color: var(--cp-accent-fg);
}

.record,
.landing-orbit,
.landing-scan-frame {
  border-color: var(--cp-accent);
}

.tabs button.active,
.tabs button.on,
nav.tabs button.on,
.nav button.on {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent);
}

@media (prefers-reduced-motion: no-preference) {
  h1,
  .landing-hero h1 {
    animation: instahost-shine 8s linear infinite;
  }
}

@keyframes instahost-shine {
  to {
    background-position: 200% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}