/* ========== Design tokens (dark-first) ========== */
:root{
  --brand:#FF5D17;

  --bg-0:#0C0D10;
  --bg-1:#111318;
  --bg-2:#171A20;

  --card:#1B2027;
  --muted:#2A303A;
  --ring:rgba(255,93,23,.35);

  --txt:#ECEEF3;
  --txt-2:#B6BBC6;

  --ok:#22C55E; --warn:#F59E0B; --bad:#EF4444; --info:#60A5FA;

  --radius:14px;
  --shadow:0 1px 1px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg-0),var(--bg-1));
  color:var(--txt);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:1.5;
}

/* ========== Layout shell ========== */
.shell{display:grid; grid-template-columns:260px 1fr; min-height:100vh}
.sidebar{
  position:sticky; top:0; height:100vh;
  background:var(--bg-2);
  border-right:1px solid #1e232b;
  padding:20px 16px; display:flex; flex-direction:column; gap:16px;
}
.logo{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px}
.logo__dot{width:10px; height:10px; background:var(--brand); border-radius:50%}
.nav{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.nav a{
  text-decoration:none; color:var(--txt-2); padding:10px 12px; border-radius:10px; display:flex; gap:10px; align-items:center;
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav a:hover{background:#202530; color:var(--txt); transform:scale(1.03)}
.nav a.active{background:linear-gradient(180deg,#20242c,#191e26); color:var(--txt); border:1px solid #232a35}

.content{display:flex; flex-direction:column; min-width:0}
.topbar{
  position:sticky; top:0; z-index:20; backdrop-filter:saturate(120%) blur(8px);
  background:rgba(17,19,24,.7); border-bottom:1px solid #1e232b; padding:12px 18px;
  display:flex; align-items:center; gap:12px; justify-content:space-between;
}
.topbar__right{display:flex; gap:10px; align-items:center}
.container{padding:22px 22px 32px; display:flex; flex-direction:column; gap:18px}

/* ========== UI primitives ========== */
.btn{
  --_bg:var(--brand); --_fg:#FFFFFF; --_bd:transparent;
  display:inline-flex; gap:8px; align-items:center; justify-content:center;
  border-radius:12px; padding:10px 14px; border:1px solid var(--_bd);
  background:var(--_bg); color:var(--_fg); font-weight:700; cursor:pointer;
  transition:transform .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .15s ease, background .2s ease, filter .2s ease, opacity .2s ease, scale .2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:0 2px 0 rgba(0,0,0,.4);
  text-decoration:none;
}
.btn:hover{filter:brightness(1.1); transform:scale(1.03); text-decoration:none}
.btn:active{transform:translateY(1px) scale(0.98); box-shadow:0 1px 0 rgba(0,0,0,.4)}
.btn--ghost{--_bg:transparent; --_fg:var(--txt); --_bd:#263042}
.btn--ghost:hover{background:#1a1f2a; border-color:#2a3442}
.btn--muted{--_bg:#222733; --_fg:var(--txt); --_bd:#2a3040}
.btn--muted:hover{background:#282d3f; border-color:#333a4c; filter:brightness(1.1)}
.btn--bad{--_bg:var(--bad); --_fg:#0a0b0d}
.btn--bad:hover{filter:brightness(1.15)}
.btn--ok{--_bg:var(--ok); --_fg:#08110a}
.btn--ok:hover{filter:brightness(1.1)}

.input, .select, input[type="text"], input[type="password"], input[type="email"], input[type="number"]{
  background:#12151b; color:var(--txt); border:1px solid #222936;
  outline:none; border-radius:12px; padding:10px 12px; min-height:40px; width:100%;
}
.input:focus, .select:focus, input:focus{border-color:#2d3646; box-shadow:0 0 0 4px var(--ring)}

label{color:var(--txt-2); font-weight:600; margin-bottom:6px; display:block}

.badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  border:1px solid #232a35; background:#13161c; color:var(--txt-2); font-weight:700; font-size:12px;
}
.badge--brand{border-color:#3a2b23; background:rgba(255,93,23,.12); color:#ffd6c7}
.badge--ok{background:rgba(34,197,94,.13); color:#d3ffe4; border-color:#214030}

/* ========== Cards / sections ========== */
.section{display:flex; flex-direction:column; gap:12px}
.h1{font-size:24px; letter-spacing:.2px; margin:0}
.h2{font-size:18px; letter-spacing:.2px; margin:0; color:var(--txt-2)}

.h1, .h2, .card__title {
  letter-spacing:-0.3px;
  font-weight:700;
}

.card{
  background:linear-gradient(180deg,var(--card),#161b22);
  border:1px solid #232934; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; min-width:0;
  transition:transform .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .2s ease;
}
.card:not(:has(.table)):hover{
  transform:scale(1.02);
  box-shadow:0 1px 1px rgba(0,0,0,.25), 0 15px 40px rgba(0,0,0,.4);
}
.card__body{padding:16px}
.card__header{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #222834}
.card__title{font-weight:800; letter-spacing:.2px}

/* ========== Stats grid ========== */
.grid{display:grid; gap:14px}
.grid--stats{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1400px){.grid--stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1100px){.grid--stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid--stats{grid-template-columns:1fr}}

.stat{
  display:grid; gap:8px; padding:16px; border-radius:var(--radius);
  background:linear-gradient(180deg,#1b212a,#161a22); border:1px solid #222936;
  transition:transform .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .2s ease;
}
.stat:hover{
  transform:scale(1.03);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.stat__label{color:var(--txt-2); font-weight:600; display:flex; align-items:center; gap:8px}
.stat__value{font-size:32px; font-weight:900; letter-spacing:.3px}
.stat--brand{box-shadow:inset 0 0 0 1px rgba(255,93,23,.15)}
.stat--ok{box-shadow:inset 0 0 0 1px rgba(34,197,94,.12)}

/* ========== Tables ========== */
.table{width:100%; border-collapse:separate; border-spacing:0 8px}
.table th{color:var(--txt-2); font-weight:700; text-align:left; padding:10px 12px}
.table td{padding:14px 12px; background:#14181f; border-top:1px solid #202737; border-bottom:1px solid #202737; transition:background .2s cubic-bezier(0.4, 0, 0.2, 1)}
.table tr:hover td{background:#1a2028}
.table tr td:first-child{border-left:1px solid #202737; border-top-left-radius:12px; border-bottom-left-radius:12px}
.table tr td:last-child{border-right:1px solid #202737; border-top-right-radius:12px; border-bottom-right-radius:12px}

/* Unity Error rows */
.table tr.unity-error-row:hover td{background:rgba(239, 68, 68, 0.12)}

/* ========== Utils & toasts ========== */
.row{display:flex; align-items:center; gap:12px}
.right{margin-left:auto}
.kbd{border:1px solid #2b3240; background:#151922; padding:2px 6px; border-radius:6px; font-weight:700; font-size:12px}
.hr{height:1px; background:#1e2531; border:none; margin:6px 0}
.link{color:var(--txt-2); text-decoration:none}
.link:hover{color:var(--txt)}

.toast-wrap{position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:10px; z-index:50}
.toast{ background:#141820; border:1px solid #2a3040; padding:12px 14px; border-radius:12px; box-shadow:var(--shadow) }

/* Theme toggle button */
.theme-toggle{
  padding:8px 12px !important;
  font-size:18px;
  line-height:1;
  min-width:40px;
  cursor:pointer;
}
.theme-toggle__icon{
  display:inline-block;
  transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1);
  font-style:normal;
  pointer-events:none;
  user-select:none;
}
.theme-toggle:hover .theme-toggle__icon{
  transform:rotate(15deg) scale(1.1);
}

/* Default = dark theme via root vars above */

html[data-theme="light"]{
  --bg-0:#fafafa;
  --bg-1:#ffffff;
  --bg-2:#f2f2f2;
  --card:#ffffff;
  --txt:#111;
  --txt-2:#444;
  --muted:#ddd;
  --ring:rgba(255,93,23,.25);
  --shadow:0 1px 3px rgba(0,0,0,.1);
  color-scheme: light;
}
/* Light theme overrides - make ALL dark backgrounds light and ALL text dark */
html[data-theme="light"] body{
  color:var(--txt);
}
html[data-theme="light"] .sidebar{
  border-right-color:#e0e0e0;
  background:var(--bg-2);
}
html[data-theme="light"] .topbar{
  background:rgba(255,255,255,.9);
  border-bottom-color:#e0e0e0;
  color:var(--txt);
}
html[data-theme="light"] .nav a{
  color:var(--txt-2);
}
html[data-theme="light"] .nav a:hover{
  background:#e8e8e8;
  color:var(--txt);
}
html[data-theme="light"] .nav a.active{
  background:linear-gradient(180deg,#f5f5f5,#eeeeee);
  border-color:#ddd;
  color:var(--txt);
}
html[data-theme="light"] .card{
  background:linear-gradient(180deg,var(--card),#fafafa);
  border-color:#e0e0e0;
  color:var(--txt);
}
html[data-theme="light"] .card__header{
  border-bottom-color:#e8e8e8;
}
html[data-theme="light"] .card__title{
  color:var(--txt);
}
html[data-theme="light"] .stat{
  background:linear-gradient(180deg,#ffffff,#f8f8f8);
  border-color:#e0e0e0;
  color:var(--txt);
}
html[data-theme="light"] .stat__value{
  color:var(--txt);
}
html[data-theme="light"] .table th{
  color:var(--txt-2);
}
html[data-theme="light"] .table td{
  background:#fafafa;
  border-color:#e0e0e0;
  color:var(--txt);
}
html[data-theme="light"] .table tr:hover td{
  background:#f0f0f0;
}
html[data-theme="light"] .table tr td:first-child,
html[data-theme="light"] .table tr td:last-child{
  border-color:#e0e0e0;
}
html[data-theme="light"] .input,
html[data-theme="light"] .select,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="number"]{
  background:#fff;
  border-color:#ddd;
  color:var(--txt);
}
html[data-theme="light"] .input:focus,
html[data-theme="light"] .select:focus,
html[data-theme="light"] input:focus{
  border-color:#FF5D17;
}
html[data-theme="light"] label{
  color:var(--txt-2);
}
html[data-theme="light"] .badge{
  border-color:#ddd;
  background:#f5f5f5;
  color:var(--txt-2);
}
html[data-theme="light"] .badge--brand{
  border-color:#ffaa88;
  background:rgba(255,93,23,.15);
  color:#b33900;
}
html[data-theme="light"] .badge--ok{
  background:rgba(34,197,94,.15);
  color:#0f7a3a;
  border-color:#4ade80;
}
html[data-theme="light"] .btn--ghost:hover{
  background:#f0f0f0;
  border-color:#ddd;
  color:var(--txt);
}
html[data-theme="light"] .btn--muted{
  --_bg:#e8e8e8;
  --_fg:var(--txt);
  --_bd:#ddd;
}
html[data-theme="light"] .btn--muted:hover{
  background:#e0e0e0;
  border-color:#ccc;
}
html[data-theme="light"] .toast{
  background:#fff;
  border-color:#ddd;
  color:var(--txt);
}
html[data-theme="light"] .kbd{
  border-color:#ddd;
  background:#f5f5f5;
  color:var(--txt);
}
html[data-theme="light"] .hr{
  background:#e0e0e0;
}
html[data-theme="light"] .link{
  color:var(--txt-2);
}
html[data-theme="light"] .link:hover{
  color:var(--txt);
}
html[data-theme="light"] .timeline-chart{
  border-bottom-color:#ddd;
}
html[data-theme="light"] .download-link{
  color:var(--txt);
}
html[data-theme="light"] .download-link:hover{
  background:rgba(0,0,0,.05);
  color:var(--txt);
}
html[data-theme="light"] .modal__overlay{
  background:rgba(0,0,0,.5);
}
html[data-theme="light"] .modal__content{
  background:linear-gradient(180deg,var(--card),#fafafa);
  border-color:#ddd;
  color:var(--txt);
}
html[data-theme="light"] .modal__header{
  border-bottom-color:#e8e8e8;
}
html[data-theme="light"] .modal__header h3{
  color:var(--txt);
}
html[data-theme="light"] .modal__close{
  color:var(--txt-2);
}
html[data-theme="light"] .modal__close:hover{
  background:#f0f0f0;
  color:var(--txt);
}
html[data-theme="light"] .modal__body{
  color:var(--txt);
}
html[data-theme="light"] .modal__option{
  background:#fafafa;
  border-color:#ddd;
  color:var(--txt);
}
html[data-theme="light"] .modal__option:hover{
  background:#f0f0f0;
  border-color:#ccc;
}
html[data-theme="light"] .modal__option strong{
  color:var(--txt);
}
html[data-theme="light"] .modal__option span{
  color:var(--txt-2);
}
html[data-theme="light"] #densityChartScrollWrapper::-webkit-scrollbar-track{
  background:var(--bg-2);
}
html[data-theme="light"] #densityChartScrollWrapper::-webkit-scrollbar-thumb{
  background:var(--muted);
}
html[data-theme="light"] #densityChartScrollWrapper::-webkit-scrollbar-thumb:hover{
  background:#bbb;
}
html[data-theme="light"] .homepage-hero__title{
  background:linear-gradient(180deg,var(--txt),var(--txt-2));
}
html[data-theme="light"] .feature-card{
  background:linear-gradient(180deg,var(--card),#fafafa);
  border-color:#e0e0e0;
  color:var(--txt);
}
html[data-theme="light"] .feature-card__title{
  color:var(--txt);
}
html[data-theme="light"] .integration-card{
  background:linear-gradient(180deg,var(--card),#fafafa);
  border-color:#e0e0e0;
  color:var(--txt);
}
html[data-theme="light"] .integration-card__name{
  color:var(--txt);
}
html[data-theme="light"] .code-sample{
  background:linear-gradient(180deg,var(--card),#fafafa);
  border-color:#e0e0e0;
  color:var(--txt);
}
html[data-theme="light"] .code-sample__header{
  border-bottom-color:#e8e8e8;
}
html[data-theme="light"] .code-sample__label{
  color:var(--txt);
}
html[data-theme="light"] .code-sample{
  background:linear-gradient(180deg,var(--card),#fafafa);
  overflow:visible;
}
html[data-theme="light"] .code-sample__tab{
  background:linear-gradient(180deg,var(--card),#fafafa);
  border-color:#e0e0e0; color:var(--txt-2);
}
html[data-theme="light"] .code-sample__tab:hover{
  background:linear-gradient(180deg,#f5f5f5,#eeeeee); color:var(--txt);
}
html[data-theme="light"] .code-sample__tab--active{
  background:#f8f8f8; border-color:#e0e0e0; border-bottom-color:#f8f8f8; 
  color:var(--txt);
  box-shadow:0 -2px 8px rgba(0,0,0,.1);
}
html[data-theme="light"] .code-sample__tab--active:hover{
  background:#f8f8f8;
}
html[data-theme="light"] .code-sample__pre{
  background:#f8f8f8 !important;
  border-color:#e0e0e0;
}
html[data-theme="light"] .code-sample__pre code[class*="language-"],
html[data-theme="light"] .code-sample__pre pre[class*="language-"],
html[data-theme="light"] pre[class*="language-"] {
  background: #f8f8f8 !important;
}
html[data-theme="light"] .code-sample__code{
  color:#333;
}
html[data-theme="light"] .code-sample__code::selection{
  background:rgba(255,93,23,.3);
}
html[data-theme="light"] strong{
  color:var(--txt);
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6{
  color:var(--txt);
}
/* Homepage layout overrides */
html[data-theme="light"] .homepage-header{
  background:rgba(255,255,255,.9);
  border-bottom-color:#e0e0e0;
  color:var(--txt);
}
html[data-theme="light"] .homepage-header__logo{
  color:var(--txt);
}
html[data-theme="light"] .homepage-hero{
  background:linear-gradient(180deg,var(--bg-0),var(--bg-1));
}
html[data-theme="light"] .homepage-hero__subtitle{
  color:var(--txt-2);
}
html[data-theme="light"] .homepage-section__title{
  color:var(--txt);
}
html[data-theme="light"] .homepage-section__subtitle{
  color:var(--txt-2);
}
html[data-theme="light"] .feature-card{
  background:linear-gradient(180deg,var(--card),#fafafa);
  border-color:#e0e0e0;
  color:var(--txt);
}
html[data-theme="light"] .feature-card__title{
  color:var(--txt);
}
html[data-theme="light"] .integration-card{
  background:linear-gradient(180deg,var(--card),#fafafa);
  border-color:#e0e0e0;
  color:var(--txt);
}
html[data-theme="light"] .integration-card__name{
  color:var(--txt);
}
html[data-theme="light"] .code-sample{
  background:#f8f8f8;
  border-color:#e0e0e0;
  color:var(--txt);
}
html[data-theme="light"] .code-sample__header{
  border-bottom-color:#e8e8e8;
}
html[data-theme="light"] .code-sample__label{
  color:var(--txt);
}
html[data-theme="light"] .code-sample__textarea{
  background:transparent;
  color:var(--txt);
}
html[data-theme="light"] .footer{
  background:var(--bg-2);
  border-top-color:#e0e0e0;
  color:var(--txt-2);
}

html[data-theme="dark"]{
  /* just ensure fallback to your default vars */
  /* empty by design - defaults are set in :root above */
  color-scheme: dark;
}

.toast.loading{
  border-left:4px solid var(--brand);
  font-weight:600;
}

/* ========== Timeline Charts ========== */
.timeline-chart{
  display:flex; align-items:flex-end; gap:6px; height:180px; padding:8px 0;
  border-bottom:2px solid #222834; margin-bottom:8px;
}
.timeline-chart--days{
  height:160px;
}
.timeline-bar{
  display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; align-self:stretch;
}
.timeline-bar__container{
  width:100%; flex:1; display:flex; align-items:flex-end; position:relative; min-height:0;
}
.timeline-bar__fill{
  width:100%; min-height:4px; border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--brand),#ff7d3d);
  transition:height .2s ease; position:relative; cursor:pointer;
}
.timeline-bar__fill:hover{
  filter:brightness(1.15);
  box-shadow:0 0 8px rgba(255,93,23,.4);
  z-index:10;
}
.timeline-bar__label{
  font-size:11px; color:var(--txt-2); font-weight:600;
  text-align:center; white-space:nowrap; margin-top:8px;
  height:20px; line-height:20px; min-width:40px;
  overflow:visible; text-overflow:ellipsis;
  /* Always reserve space for labels to prevent bar movement */
  flex-shrink:0;
}
.timeline-chart--days .timeline-bar__label{
  font-size:12px;
}

/* Event density chart specific styles */
.density-bar-label{
  /* Labels are always in DOM but hidden via visibility to prevent layout shift */
  display:block; /* Keep display:block so space is always reserved */
}
.density-bar{
  /* Ensure bar container maintains consistent spacing */
  position:relative;
}
@media (max-width:768px){
  .timeline-chart{height:140px; gap:4px}
  .timeline-chart--days{height:120px}
  .timeline-bar__label{font-size:10px}
}

/* ========== Download Link & Modal ========== */
.download-link{
  background:none; border:none; color:var(--txt); cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
  font-size:14px; padding:6px 8px; border-radius:8px;
  transition:background .2s cubic-bezier(0.4, 0, 0.2, 1), color .2s ease, transform .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.download-link:hover{background:rgba(255,255,255,.05); color:var(--txt); transform:scale(1.05)}
.download-link strong{font-weight:700}

/* Modal */
.modal{
  position:fixed; top:0; left:0; right:0; bottom:0;
  z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal__overlay{
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
}
.modal__content{
  position:relative; z-index:1001;
  background:linear-gradient(180deg,var(--card),#161b22);
  border:1px solid #232934; border-radius:var(--radius);
  box-shadow:var(--shadow); max-width:480px; width:100%;
  animation:modalSlideIn .2s ease;
}
@keyframes modalSlideIn{
  from{opacity:0; transform:translateY(-20px)}
  to{opacity:1; transform:translateY(0)}
}
.modal__header{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px; border-bottom:1px solid #222834;
}
.modal__header h3{
  margin:0; font-size:18px; font-weight:700; color:var(--txt);
}
.modal__close{
  background:none; border:none; color:var(--txt-2);
  font-size:24px; cursor:pointer; padding:0;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; transition:background .2s cubic-bezier(0.4, 0, 0.2, 1), color .2s ease, transform .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal__close:hover{background:#222834; color:var(--txt); transform:scale(1.1)}
.modal__body{padding:18px}
.modal__options{
  display:grid; gap:10px;
}
.modal__option{
  background:#14181f; border:1px solid #222936; border-radius:10px;
  padding:14px 16px; cursor:pointer; text-align:left;
  color:var(--txt); transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  display:flex; flex-direction:column; gap:4px;
}
.modal__option:hover{
  background:#1a2028; border-color:#2a3442;
  transform:translateY(-2px) scale(1.02); box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.modal__option strong{
  font-weight:700; font-size:15px; color:var(--txt);
}
.modal__option span{
  font-size:12px; color:var(--txt-2);
}

/* ========== Event Density Chart Scrolling ========== */
#densityChartScrollWrapper{
  overflow-x:auto; overflow-y:visible; 
  margin-top:8px; padding-bottom:8px;
  /* Custom scrollbar styling for webkit browsers */
  scrollbar-width:thin; scrollbar-color:var(--muted) var(--bg-2);
}
#densityChartScrollWrapper::-webkit-scrollbar{
  height:8px;
}
#densityChartScrollWrapper::-webkit-scrollbar-track{
  background:var(--bg-2); border-radius:4px;
}
#densityChartScrollWrapper::-webkit-scrollbar-thumb{
  background:var(--muted); border-radius:4px;
}
#densityChartScrollWrapper::-webkit-scrollbar-thumb:hover{
  background:#3a4450;
}

/* ========== Tab Buttons ========== */
.tab-button{
  background:transparent; border:none; border-bottom:2px solid transparent;
  color:var(--txt-2); padding:12px 16px; font-size:14px; font-weight:600;
  cursor:pointer; transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius:0; margin-bottom:-1px;
}
.tab-button:hover{
  color:var(--txt); background:rgba(255,255,255,.02);
}
.tab-button--active{
  color:var(--txt); border-bottom-color:var(--brand);
  background:transparent;
}

/* ========== Homepage Styles ========== */
.homepage-hero{
  text-align:center; padding:80px 20px 60px; max-width:800px; margin:0 auto;
}
.homepage-hero__title{
  font-size:64px; font-weight:900; margin:0 0 16px; letter-spacing:-1px;
  background:linear-gradient(180deg,var(--txt),var(--txt-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.homepage-hero__subtitle{
  font-size:20px; color:var(--txt-2); line-height:1.6; margin:0 0 32px;
}
.homepage-hero__actions{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
}

.homepage-section{
  padding:60px 20px; max-width:1200px; margin:0 auto;
}
.homepage-section__title{
  font-size:36px; font-weight:800; text-align:center; margin:0 0 12px; letter-spacing:-0.5px;
}
.homepage-section__subtitle{
  font-size:18px; color:var(--txt-2); text-align:center; margin:0 0 40px;
}

.features-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-top:32px;
}
.feature-card{
  background:linear-gradient(180deg,var(--card),#161b22); border:1px solid #232934;
  border-radius:var(--radius); padding:24px; transition:transform .2s ease,box-shadow .2s ease;
}
.feature-card:hover{
  transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.feature-card__icon{font-size:32px; margin-bottom:12px}
.feature-card__title{font-size:18px; font-weight:700; margin:0 0 8px}
.feature-card__desc{color:var(--txt-2); line-height:1.6; margin:0}

.integrations-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; margin-top:32px;
}
.integration-card{
  text-align:center; padding:24px; background:linear-gradient(180deg,var(--card),#161b22);
  border:1px solid #232934; border-radius:var(--radius); transition:transform .2s ease;
}
.integration-card:hover{transform:translateY(-4px)}
.integration-card__icon{font-size:40px; margin-bottom:12px}
.integration-card__name{font-size:18px; font-weight:700; margin:0}

/* ========== Code Sample Styles ========== */
.code-sample{
  max-width:900px; margin:0 auto; background:linear-gradient(180deg,var(--card),#161b22);
  border:1px solid #232934; border-radius:var(--radius); overflow:visible; box-shadow:var(--shadow);
  padding-top:40px; position:relative;
}
.code-sample__header{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:8px 18px 0 0; position:absolute; top:0; left:0; right:0; height:40px;
  background:transparent; border:none; z-index:4;
}
.code-sample__tabs{
  display:flex; gap:0; align-items:flex-start; padding-left:14px;
}
.code-sample__tab{
  background:linear-gradient(180deg,var(--card),#161b22); 
  border:1px solid #232934; border-bottom:none;
  padding:10px 18px 14px; font-size:13px; font-weight:600;
  cursor:pointer; transition:all .2s ease; color:var(--txt-2);
  border-radius:8px 8px 0 0; position:relative; z-index:2;
  border-right:1px solid #232934;
}
.code-sample__tab:first-of-type{
  border-top-left-radius:8px;
}
.code-sample__tab:last-of-type{
  border-right:1px solid #232934;
}
.code-sample__tab:hover{
  background:linear-gradient(180deg,#1e2328,#1a1f26); color:var(--txt);
}
.code-sample__tab--active{
  background:#0A0B0E; border-color:#232934; border-bottom-color:#0A0B0E; 
  color:var(--txt); z-index:3;
  box-shadow:0 -2px 8px rgba(0,0,0,.2);
}
.code-sample__tab--active:hover{
  background:#0A0B0E;
}
.code-sample__pre{
  margin:0; padding:20px; background:#0A0B0E; overflow-x:auto;
  font-family:'Consolas','Monaco','Courier New',monospace; font-size:13px; line-height:1.6;
  border-radius:0 0 var(--radius) var(--radius);
}
.code-sample__code{
  color:#e6e6e6; white-space:pre; display:block;
}
.code-sample__code::selection{
  background:rgba(255,93,23,.3);
}

/* ========== Prism.js Syntax Highlighting Overrides (IDE-like theme) ========== */
.code-sample__pre code[class*="language-"],
.code-sample__pre pre[class*="language-"] {
  text-shadow: none;
  background: #0A0B0E !important;
}

.code-sample__pre pre[class*="language-"],
.code-sample__pre code[class*="language-"] {
  background: #0A0B0E !important;
}

/* Override Prism's default background */
pre[class*="language-"] {
  background: #0A0B0E !important;
}

/* Keywords (public, private, class, void, using, etc.) */
.code-sample__pre .token.keyword,
.code-sample__pre .token.operator {
  color: #569cd6;
}

/* Strings */
.code-sample__pre .token.string {
  color: #ce9178;
}

/* Comments */
.code-sample__pre .token.comment {
  color: #6a9955;
  font-style: italic;
}

/* Types and classes */
.code-sample__pre .token.class-name,
.code-sample__pre .token.function {
  color: #4ec9b0;
}

/* Numbers */
.code-sample__pre .token.number {
  color: #b5cea8;
}

/* Punctuation */
.code-sample__pre .token.punctuation {
  color: #d4d4d4;
}

/* Properties/identifiers */
.code-sample__pre .token.property,
.code-sample__pre .token.attr-name {
  color: #9cdcfe;
}

/* String interpolation */
.code-sample__pre .token.interpolation-punctuation {
  color: #569cd6;
}

/* Light theme overrides */
html[data-theme="light"] .code-sample__pre .token.keyword,
html[data-theme="light"] .code-sample__pre .token.operator {
  color: #0000ff;
}

html[data-theme="light"] .code-sample__pre .token.string {
  color: #a31515;
}

html[data-theme="light"] .code-sample__pre .token.comment {
  color: #008000;
  font-style: italic;
}

html[data-theme="light"] .code-sample__pre .token.class-name,
html[data-theme="light"] .code-sample__pre .token.function {
  color: #267f99;
}

html[data-theme="light"] .code-sample__pre .token.number {
  color: #098658;
}

html[data-theme="light"] .code-sample__pre .token.punctuation {
  color: #000000;
}

html[data-theme="light"] .code-sample__pre .token.property,
html[data-theme="light"] .code-sample__pre .token.attr-name {
  color: #001080;
}