:root {
  color-scheme: dark;
  --sh-bg: #070914;
  --sh-bg-2: #0b1020;
  --sh-panel: rgba(17, 24, 39, .72);
  --sh-panel-solid: #101827;
  --sh-line: rgba(255,255,255,.11);
  --sh-text: #edf2ff;
  --sh-muted: #9aa7bd;
  --sh-primary: #7c3aed;
  --sh-primary-2: #06b6d4;
  --sh-success: #22c55e;
  --sh-danger: #fb7185;
  --sh-warning: #f59e0b;
  --sh-radius: 24px;
  --sh-shadow: 0 24px 80px rgba(0,0,0,.34);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
.fw-black { font-weight: 900 !important; }

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -10%, rgba(124,58,237,.38), transparent 34rem),
    radial-gradient(circle at 88% 4%, rgba(6,182,212,.27), transparent 30rem),
    radial-gradient(circle at 55% 95%, rgba(236,72,153,.16), transparent 28rem),
    linear-gradient(180deg, var(--sh-bg), var(--sh-bg-2) 52%, #080b16);
  color: var(--sh-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.01em;
}

a { color: inherit; }
main { min-height: calc(100vh - 170px); }

.site-nav {
  background: rgba(7, 9, 20, .74);
  border-bottom: 1px solid var(--sh-line);
  backdrop-filter: blur(18px);
}
.navbar-brand { letter-spacing: -.03em; }
.brand-mark {
  width: 38px; height: 38px; display: inline-grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--sh-primary), var(--sh-primary-2));
  box-shadow: 0 10px 30px rgba(124,58,237,.32);
}
.navbar .nav-link { color: rgba(237,242,255,.72); font-weight: 600; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: #fff; }

.btn {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: -.01em;
  padding: .72rem 1.08rem;
}
.btn-sm { padding: .48rem .82rem; }
.btn-primary {
  border: 0;
  background: linear-gradient(135deg, #8b5cf6, #06b6d4);
  box-shadow: 0 16px 36px rgba(124,58,237,.32);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-outline-light { border-color: rgba(255,255,255,.18); color: #f8fbff; background: rgba(255,255,255,.04); }
.btn-outline-light:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.34); color: #fff; }
.btn-success { border: 0; background: linear-gradient(135deg, #22c55e, #14b8a6); }
.btn-outline-danger { border-color: rgba(251,113,133,.45); color: #fecdd3; }
.btn-outline-danger:hover { background: rgba(251,113,133,.16); border-color: rgba(251,113,133,.72); color: #fff; }

.text-muted { color: var(--sh-muted) !important; }
.text-gradient {
  background: linear-gradient(135deg, #fff 20%, #c4b5fd 50%, #67e8f9 82%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 76%);
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.py-lg-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #dbeafe;
  border-radius: 999px;
  padding: .5rem .8rem;
  font-weight: 800;
  font-size: .82rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.card, .modal-content, .glass-card {
  background: var(--sh-panel);
  color: var(--sh-text);
  border: 1px solid var(--sh-line);
  box-shadow: var(--sh-shadow);
  backdrop-filter: blur(18px);
}
.card { border-radius: var(--sh-radius); }
.card-soft { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; }
.metric-card { min-height: 132px; }
.icon-tile {
  width: 50px; height: 50px; border-radius: 18px;
  display: inline-grid; place-items: center;
  background: linear-gradient(135deg, rgba(124,58,237,.24), rgba(6,182,212,.18));
  border: 1px solid rgba(255,255,255,.12);
}
.service-icon {
  width: 58px; height: 58px; border-radius: 20px;
  display: inline-grid; place-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}

.form-control, .form-select {
  background-color: rgba(4, 8, 20, .78);
  color: var(--sh-text);
  border-color: rgba(255,255,255,.14);
  border-radius: 16px;
  padding: .78rem .95rem;
}
.form-control:focus, .form-select:focus {
  background-color: rgba(4, 8, 20, .95);
  color: #fff;
  border-color: rgba(103,232,249,.64);
  box-shadow: 0 0 0 .25rem rgba(6,182,212,.13);
}
.form-control::placeholder { color: rgba(154,167,189,.72); }
.input-group .form-control { border-radius: 16px 0 0 16px; }
.input-group .btn { border-radius: 0 16px 16px 0; }
.form-check-input { background-color: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.form-check-input:checked { background-color: var(--sh-primary); border-color: var(--sh-primary); }

.badge { border-radius: 999px; padding: .5em .7em; font-weight: 800; }
.text-bg-secondary { background-color: rgba(148,163,184,.22) !important; color: #dbeafe !important; }
.text-bg-success { background-color: rgba(34,197,94,.18) !important; color: #bbf7d0 !important; border: 1px solid rgba(34,197,94,.25); }
.text-bg-primary { background: linear-gradient(135deg, rgba(124,58,237,.92), rgba(6,182,212,.84)) !important; }

.service-card { transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.service-card:hover { transform: translateY(-5px); border-color: rgba(103,232,249,.45); background: rgba(17,24,39,.88); }

.feature-pill {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  border-radius: 999px;
  padding: .58rem .82rem;
  color: #dbeafe;
  font-weight: 700;
  font-size: .92rem;
}

.preview-window { overflow: hidden; border-radius: 28px; border: 1px solid rgba(255,255,255,.14); background: rgba(3,7,18,.78); box-shadow: 0 32px 100px rgba(0,0,0,.42); }
.preview-top { display: flex; gap: 8px; padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,.09); }
.dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.25); }
.preview-scene { min-height: 390px; padding: 28px; background: radial-gradient(circle at top right, rgba(124,58,237,.26), transparent 13rem), linear-gradient(135deg, rgba(15,23,42,.85), rgba(2,6,23,.92)); }
.preview-alert { border-radius: 22px; background: rgba(15,23,42,.86); border: 1px solid rgba(255,255,255,.12); padding: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.preview-chat { border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); padding: 12px 14px; }

.auth-shell { min-height: calc(100vh - 170px); display: grid; align-items: center; }
.auth-card { max-width: 520px; margin-inline: auto; }
.auth-side { background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(6,182,212,.12)); border-radius: 28px; border: 1px solid rgba(255,255,255,.12); }

.table-darkish { --bs-table-bg: transparent; --bs-table-color: var(--sh-text); --bs-table-border-color: rgba(255,255,255,.08); }
.footer { color: rgba(154,167,189,.82); border-top: 1px solid rgba(255,255,255,.1); background: rgba(7,9,20,.38); }

.alert { border-radius: 18px; border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(14px); }
.alert-success { background: rgba(34,197,94,.12); color: #bbf7d0; }
.alert-danger { background: rgba(251,113,133,.12); color: #fecdd3; }
.alert-info { background: rgba(6,182,212,.12); color: #cffafe; }

/* OBS/browser source overlays */
.overlay-body { margin: 0; overflow: hidden; background: transparent; font-family: Inter, Arial, sans-serif; }
.alert-pop {
  min-width: 390px; max-width: 560px; padding: 18px 20px;
  background: linear-gradient(135deg, rgba(17,24,39,.88), rgba(8,13,28,.94));
  border: 1px solid rgba(255,255,255,.22); border-radius: 26px; color: #fff;
  box-shadow: 0 26px 90px rgba(0,0,0,.46), 0 0 42px rgba(124,58,237,.18);
  animation: alertIn .42s cubic-bezier(.2,.8,.2,1);
  position: relative; overflow: hidden;
}
.alert-pop::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #8b5cf6, #06b6d4, #22c55e); }
.alert-pop-icon { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(124,58,237,.48), rgba(6,182,212,.36)); }
@keyframes alertIn { from { opacity: 0; transform: translateY(28px) scale(.94); filter: blur(8px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
.chat-line {
  background: linear-gradient(135deg, rgba(15,23,42,.82), rgba(30,41,59,.72));
  border: 1px solid rgba(255,255,255,.16);
  border-left: 4px solid #22d3ee;
  border-radius: 18px;
  margin: 8px 0;
  padding: 12px 14px;
  color: white;
  box-shadow: 0 12px 36px rgba(0,0,0,.24);
  animation: chatIn .25s ease;
}
@keyframes chatIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 991.98px) {
  .display-3 { font-size: calc(1.65rem + 3vw); }
  .preview-scene { min-height: 300px; }
}
.alert-mini-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(99,102,241,.25),rgba(34,211,238,.16));border:1px solid rgba(255,255,255,.14)}
.alert-pop-inner{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.alert-pop-title{font-size:22px;font-weight:900;letter-spacing:-.03em;line-height:1.05}
.alert-pop-message{opacity:.82;font-size:16px;margin-top:4px}
.alert-pop-image{width:66px;height:66px;object-fit:cover;border-radius:18px;border:1px solid rgba(255,255,255,.22);box-shadow:0 12px 30px rgba(0,0,0,.28)}
.alert-pop.preset-neon{background:linear-gradient(135deg,rgba(236,72,153,.94),rgba(59,130,246,.94));box-shadow:0 0 38px rgba(236,72,153,.45),0 18px 60px rgba(0,0,0,.4)}
.alert-pop.preset-minimal{background:rgba(15,23,42,.92);border:1px solid rgba(255,255,255,.18);box-shadow:0 16px 40px rgba(0,0,0,.32)}
.alert-pop.preset-glass{background:rgba(255,255,255,.12);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.22);box-shadow:0 18px 70px rgba(0,0,0,.42)}
.alert-pop.preset-custom{border:1px solid rgba(255,255,255,.2)}

/* Dashboard shell + live overlay editor */
.dashboard-shell{display:grid;grid-template-columns:292px minmax(0,1fr);gap:24px;width:min(1560px,calc(100% - 32px));margin:0 auto;padding:28px 0 48px;align-items:start}
.dashboard-sidebar{position:sticky;top:94px;min-height:calc(100vh - 126px);border:1px solid rgba(255,255,255,.12);background:rgba(7,9,20,.72);backdrop-filter:blur(18px);border-radius:28px;padding:18px;box-shadow:0 24px 80px rgba(0,0,0,.32)}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:8px 8px 18px;border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:14px}.sidebar-brand strong{display:block;font-weight:900;font-size:1.04rem}.sidebar-brand span span{display:block;color:var(--sh-muted);font-size:.82rem;font-weight:700}.sidebar-nav{display:grid;gap:6px}.sidebar-nav a{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:16px;text-decoration:none;color:rgba(237,242,255,.72);font-weight:800;border:1px solid transparent}.sidebar-nav a i{width:20px;text-align:center;color:#8ddff1}.sidebar-nav a:hover{background:rgba(255,255,255,.07);color:#fff}.sidebar-nav a.active{background:linear-gradient(135deg,rgba(124,58,237,.34),rgba(6,182,212,.18));border-color:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}.sidebar-help{margin-top:18px;padding:15px;border-radius:18px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09)}.sidebar-help a{font-weight:900;text-decoration:none;color:#e0f2fe}.dashboard-main{min-width:0}.dashboard-topbar{display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap}.editor-card{overflow:hidden}.editor-tabs{gap:8px}.editor-tabs .nav-link{border-radius:999px;color:rgba(237,242,255,.72);font-weight:900;background:rgba(255,255,255,.055)}.editor-tabs .nav-link.active{background:linear-gradient(135deg,#8b5cf6,#06b6d4);color:#fff}.code-editor{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;font-size:.9rem;line-height:1.55;min-height:310px;resize:vertical;background:rgba(2,6,23,.82)}.preview-card{top:104px;overflow:visible}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04)}.preview-toolbar strong{display:block;font-weight:900}.preview-toolbar span{display:block;color:var(--sh-muted);font-size:.84rem}.live-preview-frame{display:block;width:100%;min-height:620px;height:620px;border:0;background:#020617;transition:height .18s ease}.input-group-text{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--sh-muted);border-radius:0 16px 16px 0}code{color:#67e8f9;background:rgba(103,232,249,.08);border:1px solid rgba(103,232,249,.15);border-radius:7px;padding:.08rem .28rem}
@media (max-width: 1199.98px){.dashboard-shell{grid-template-columns:1fr}.dashboard-sidebar{position:relative;top:auto;min-height:0}.sidebar-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-card{position:relative!important;top:auto}.live-preview-frame{min-height:520px;height:520px}}
@media (max-width: 575.98px){.dashboard-shell{width:min(100% - 20px,1560px);padding-top:18px}.sidebar-nav{grid-template-columns:1fr}.dashboard-sidebar{border-radius:22px;padding:14px}.live-preview-frame{min-height:440px;height:440px}.dashboard-topbar{align-items:start}.code-editor{min-height:240px}}

/* Goal + animation upgrade */
.dashboard-sidebar { overflow-y: auto; }
.sidebar-nav { padding-bottom: 1rem; }
.sidebar-nav a { min-height: 42px; }
.sh-goal-card { box-sizing: border-box; }

/* Creator-studio dashboard treatment */
:root {
  --studio-bg: #0b0f19;
  --studio-panel: rgba(17, 24, 39, .78);
  --studio-panel-strong: rgba(15, 23, 42, .94);
  --studio-border: rgba(148, 163, 184, .18);
  --studio-accent: #00e5ff;
  --studio-accent-2: #7c3aed;
}
body {
  background:
    radial-gradient(circle at 10% -10%, rgba(0,229,255,.13), transparent 28rem),
    radial-gradient(circle at 88% 10%, rgba(124,58,237,.18), transparent 30rem),
    linear-gradient(180deg, #0b0f19 0%, #070a12 100%);
}
.dashboard-shell { width: min(1660px, calc(100% - 28px)); gap: 18px; }
.dashboard-sidebar {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(2,6,23,.92));
  border: 1px solid var(--studio-border);
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
}
.sidebar-brand { border-bottom-color: rgba(148,163,184,.14); }
.brand-mark, .icon-tile, .alert-mini-icon {
  background: linear-gradient(135deg, rgba(0,229,255,.2), rgba(124,58,237,.22));
  border: 1px solid rgba(103,232,249,.24);
  color: #67e8f9;
}
.sidebar-nav a { border-radius: 10px; color: rgba(226,232,240,.72); font-size: .94rem; }
.sidebar-nav a i { color: #94a3b8; }
.sidebar-nav a.active {
  background: linear-gradient(90deg, rgba(0,229,255,.14), rgba(124,58,237,.13));
  border-color: rgba(0,229,255,.22);
  box-shadow: inset 3px 0 0 #00e5ff;
}
.sidebar-nav a.active i { color: #67e8f9; }
.card, .metric-card, .editor-card, .preview-card {
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.88));
  border: 1px solid var(--studio-border);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.3);
}
.card-soft { border-radius: 14px; background: rgba(148,163,184,.075); border: 1px solid rgba(148,163,184,.14); }
.btn-primary, .btn-success {
  border: 0;
  background: linear-gradient(135deg, #00c2ff, #7c3aed);
  box-shadow: 0 12px 30px rgba(0,194,255,.22);
  font-weight: 900;
}
.btn-outline-light {
  border-color: rgba(148,163,184,.22);
  background: rgba(148,163,184,.06);
  color: #e2e8f0;
  font-weight: 800;
}
.form-control, .form-select {
  border-radius: 10px;
  background-color: rgba(2,6,23,.72);
  border-color: rgba(148,163,184,.18);
}
.preview-toolbar { background: rgba(2,6,23,.58); }
.live-preview-frame { background: #050816; }
.kicker { color: #67e8f9; border-color: rgba(0,229,255,.18); background: rgba(0,229,255,.08); }
.permanent-token-box .form-control { font-family: "SFMono-Regular", Consolas, monospace; letter-spacing: .02em; }