:root, [data-bs-theme=dark] {
  --ml-bg: #0b0d12; --ml-panel: #12151d; --ml-panel-2: #171b25; --ml-line: #232838;
  --ml-text: #e7e9ee; --ml-mute: #8b93a7; --ml-accent: #7c5cff; --ml-accent-2: #22d3ee; --ml-lime: #b4f461;
  --bs-body-bg: var(--ml-bg); --bs-body-color: var(--ml-text); --bs-border-color: var(--ml-line);
  --bs-primary: #7c5cff; --bs-primary-rgb: 124,92,255; --bs-link-color: #a78bfa; --bs-link-hover-color: #c4b5fd;
  --bs-font-sans-serif: 'Inter', system-ui, sans-serif;
}
body { font-feature-settings: "ss01", "cv11"; }
a { text-decoration: none; }
.btn-primary { --bs-btn-bg:#7c5cff; --bs-btn-border-color:#7c5cff; --bs-btn-hover-bg:#6a48f5; --bs-btn-hover-border-color:#6a48f5; --bs-btn-active-bg:#5b3ae8; }
.btn-outline-primary { --bs-btn-color:#a78bfa; --bs-btn-border-color:#4c3a9e; --bs-btn-hover-bg:#7c5cff; --bs-btn-hover-border-color:#7c5cff; }
.form-control, .form-select { background-color: var(--ml-panel-2); border-color: var(--ml-line); }
.form-control:focus, .form-select:focus { border-color:#7c5cff; box-shadow:0 0 0 .2rem rgba(124,92,255,.2); background-color: var(--ml-panel-2); }
.card { background: var(--ml-panel); border: 1px solid var(--ml-line); border-radius: 14px; }
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--ml-line); }
.table thead th { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ml-mute); font-weight:600; }
.label-xs { font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color: var(--ml-mute); font-weight:600; }
.tiny { font-size:.72rem; }
.metric { font-variant-numeric: tabular-nums; }
.h-display { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.02em; }

/* brand */
.brand { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem; color:#fff !important; display:inline-flex; align-items:center; gap:.55rem; }
.brand-mark { display:inline-flex; align-items:flex-end; gap:2px; height:18px; }
.brand-mark span { width:3px; border-radius:2px; background: linear-gradient(#22d3ee,#7c5cff); }
.brand-mark span:nth-child(1){height:8px} .brand-mark span:nth-child(2){height:18px} .brand-mark span:nth-child(3){height:12px} .brand-mark span:nth-child(4){height:15px}

/* public */
.pub-nav a:not(.btn):not(.brand) { color: var(--ml-mute); } .pub-nav a:not(.btn):not(.brand):hover { color:#fff; }
.hero { position:relative; overflow:hidden; padding: 72px 0 40px; }
.hero::before { content:""; position:absolute; inset:-30% -10% auto; height:520px; background: radial-gradient(closest-side, rgba(124,92,255,.35), transparent 70%), radial-gradient(closest-side at 70% 40%, rgba(34,211,238,.18), transparent 70%); filter: blur(20px); z-index:-1; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); line-height:1.04; }
.grad { background: linear-gradient(90deg,#c4b5fd,#22d3ee); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-wave { height:120px; display:flex; align-items:center; gap:3px; margin-top:42px; }
.hero-wave i { flex:1; border-radius:3px; background: linear-gradient(#22d3ee,#7c5cff); opacity:.85; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scaleY(.55); opacity:.6; } }
.feature { padding:22px; height:100%; }
.feature i { font-size:1.4rem; color:#a78bfa; }
.price-card { padding:26px; height:100%; position:relative; transition: transform .15s, border-color .15s; }
.price-card:hover { transform: translateY(-3px); border-color:#4c3a9e; }
.price-card.featured { border-color:#7c5cff; box-shadow: 0 0 0 1px #7c5cff, 0 20px 60px -20px rgba(124,92,255,.5); }
.price-card .price { font-family:'Space Grotesk',sans-serif; font-size:2.3rem; font-weight:700; }
.price-card ul { list-style:none; padding:0; margin:18px 0; font-size:.9rem; color: var(--ml-mute); }
.price-card li { padding:4px 0; } .price-card li i { color: var(--ml-lime); margin-right:6px; }
.ribbon { position:absolute; top:-11px; right:18px; background:#7c5cff; color:#fff; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:20px; letter-spacing:.05em; }
.auth-card { max-width:420px; margin:56px auto; padding:32px; }
footer.pub { border-top:1px solid var(--ml-line); color: var(--ml-mute); font-size:.85rem; }

/* app shell */
.app { display:flex; min-height:100vh; }
.side { width:240px; background: var(--ml-panel); border-right:1px solid var(--ml-line); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; flex-shrink:0; }
.side-link { display:flex; align-items:center; gap:.7rem; padding:.62rem 1.1rem; margin:2px 10px; border-radius:9px; color: var(--ml-mute); font-size:.92rem; }
.side-link:hover { color:#fff; background: var(--ml-panel-2); }
.side-link.active { color:#fff; background: rgba(124,92,255,.16); box-shadow: inset 2px 0 0 #7c5cff; }
.credit-box { margin:12px; padding:14px; border-radius:12px; background: linear-gradient(160deg, rgba(124,92,255,.18), rgba(34,211,238,.06)); border:1px solid #2c2650; }
.credit-num { font-family:'Space Grotesk',sans-serif; font-size:2rem; font-weight:700; line-height:1.1; }
.side-user { display:flex; align-items:center; gap:.6rem; padding:14px 18px; border-top:1px solid var(--ml-line); font-size:.85rem; color: var(--ml-mute); }
.main { flex:1; min-width:0; }
.topbar { display:flex; gap:12px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--ml-line); }
@media (max-width: 991px) { .side { position:fixed; left:-260px; z-index:1050; transition:left .2s; } .side.open { left:0; } }

/* studio */
.drop { border:2px dashed #2f3550; border-radius:14px; padding:34px 18px; text-align:center; cursor:pointer; background: var(--ml-panel-2); transition:.15s; }
.drop.drag, .drop:hover { border-color:#7c5cff; background: rgba(124,92,255,.07); }
.drop .bi { font-size:2.2rem; color:#a78bfa; }
.seg .btn-check:checked + .btn { background:#7c5cff; border-color:#7c5cff; color:#fff; }
.progress { height:6px; background: var(--ml-panel-2); }
.progress-bar { background: linear-gradient(90deg,#7c5cff,#22d3ee); }
.ab-toggle .btn.active { background:#7c5cff; border-color:#7c5cff; color:#fff; }
.kpi { padding:18px; }
.kpi .v { font-family:'Space Grotesk',sans-serif; font-size:1.7rem; font-weight:700; }
.kpi .d { font-size:.78rem; color: var(--ml-mute); }
.stat-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.card > .table-responsive > .table th:first-child, .card > .table-responsive > .table td:first-child, .card > .table th:first-child, .card > .table td:first-child { padding-left: 1rem; }
.card > .table-responsive > .table th:last-child, .card > .table-responsive > .table td:last-child, .card > .table th:last-child, .card > .table td:last-child { padding-right: 1rem; }