/* ── Musikia · dark SaaS design system ── */
:root {
    --mk-bg: #0a0b12;
    --mk-bg-2: #10121c;
    --mk-card: rgba(255, 255, 255, 0.035);
    --mk-border: rgba(255, 255, 255, 0.08);
    --mk-p1: #7c5cff;   /* violet */
    --mk-p2: #ff4d8f;   /* pink */
    --mk-accent: #22e0c8; /* teal */
    --mk-text: #eef0f6;
    --mk-dim: #9aa0b5;
}

* { -webkit-tap-highlight-color: transparent; }

body {
    background:
        radial-gradient(1100px 600px at 15% -200px, rgba(124, 92, 255, 0.18), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(34, 224, 200, 0.10), transparent 55%),
        var(--mk-bg);
    color: var(--mk-text);
    font-family: 'Inter', system-ui, sans-serif;
    min-height: 100vh;
}

h1, h2, h3, h4, .navbar-brand, .display-1, .display-2, .display-3, .display-4, .display-5 {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

/* ── Nav ── */
.mk-nav {
    background: rgba(10, 11, 18, 0.75);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--mk-border);
}
.mk-logo {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: linear-gradient(135deg, var(--mk-p1), var(--mk-p2));
    color: #fff; margin-right: 4px;
}
.navbar-brand { color: var(--mk-text) !important; }
.nav-link { color: var(--mk-dim) !important; font-weight: 500; }
.nav-link:hover { color: var(--mk-text) !important; }
.mk-credits {
    background: rgba(124, 92, 255, 0.15);
    color: #c9bcff; border: 1px solid rgba(124, 92, 255, 0.3);
    font-weight: 500; padding: 6px 12px; border-radius: 999px;
}

/* ── Buttons ── */
.btn-gradient {
    background: linear-gradient(135deg, var(--mk-p1), var(--mk-p2));
    border: none; color: #fff; font-weight: 600;
    box-shadow: 0 8px 24px rgba(124, 92, 255, 0.35);
}
.btn-gradient:hover { color: #fff; opacity: 0.92; transform: translateY(-1px); }
.btn-outline-light { border-color: var(--mk-border); }

/* ── Cards ── */
.mk-card {
    background: var(--mk-card);
    border: 1px solid var(--mk-border);
    border-radius: 20px;
    backdrop-filter: blur(24px);
    transition: transform .2s ease, border-color .2s ease;
}
.mk-card:hover { border-color: rgba(124, 92, 255, 0.4); }
.mk-card.lift:hover { transform: translateY(-4px); }

.mk-stat { border-radius: 18px; padding: 22px; }
.mk-stat .n { font-family: 'Space Grotesk'; font-size: 2rem; font-weight: 700; }
.mk-stat .l { color: var(--mk-dim); font-size: .85rem; }
.mk-stat .ico {
    width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    font-size: 1.3rem; background: rgba(124, 92, 255, 0.15); color: #c9bcff;
}

/* ── Hero ── */
.mk-hero { padding: 90px 0 60px; text-align: center; }
.mk-hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 700; }
.mk-gradient-text {
    background: linear-gradient(120deg, #c9bcff, var(--mk-accent), var(--mk-p2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.mk-badge-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px; border-radius: 999px; font-size: .85rem;
    background: var(--mk-card); border: 1px solid var(--mk-border); color: var(--mk-dim);
}
.mk-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--mk-accent);
    box-shadow: 0 0 0 rgba(34,224,200,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(34,224,200,.5)} 70%{box-shadow:0 0 0 10px rgba(34,224,200,0)} 100%{box-shadow:0 0 0 0 rgba(34,224,200,0)} }

/* ── Forms ── */
.form-control, .form-select {
    background: rgba(255,255,255,.04); border: 1px solid var(--mk-border); color: var(--mk-text);
    border-radius: 12px;
}
.form-control:focus, .form-select:focus {
    background: rgba(255,255,255,.06); border-color: var(--mk-p1); color: var(--mk-text);
    box-shadow: 0 0 0 .2rem rgba(124,92,255,.25);
}
.form-control::placeholder { color: #6b7189; }
.form-label { color: var(--mk-dim); font-weight: 500; font-size: .9rem; }

/* ── Auth card ── */
.mk-auth { max-width: 440px; margin: 60px auto; }

/* ── Pricing ── */
.mk-price { font-family: 'Space Grotesk'; font-size: 2.4rem; font-weight: 700; }
.mk-plan.featured { border-color: var(--mk-p1); box-shadow: 0 20px 60px rgba(124,92,255,.25); }
.mk-check { color: var(--mk-accent); }

/* ── Progress / generating ── */
.mk-progress { height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.mk-progress .bar {
    height: 100%; border-radius: 999px; width: 0;
    background: linear-gradient(90deg, var(--mk-p1), var(--mk-p2), var(--mk-accent));
    background-size: 200% 100%; animation: flow 2s linear infinite; transition: width .6s ease;
}
@keyframes flow { to { background-position: 200% 0; } }
.mk-equalizer { display: flex; gap: 5px; align-items: flex-end; height: 60px; justify-content: center; }
.mk-equalizer span {
    width: 7px; border-radius: 4px; background: linear-gradient(var(--mk-p1), var(--mk-p2));
    animation: eq 1s ease-in-out infinite;
}
.mk-equalizer span:nth-child(2){animation-delay:.2s} .mk-equalizer span:nth-child(3){animation-delay:.4s}
.mk-equalizer span:nth-child(4){animation-delay:.1s} .mk-equalizer span:nth-child(5){animation-delay:.3s}
@keyframes eq { 0%,100%{height:12px} 50%{height:52px} }

/* ── Audio player ── */
.mk-player { background: linear-gradient(135deg, rgba(124,92,255,.12), rgba(34,224,200,.06));
    border: 1px solid var(--mk-border); border-radius: 20px; padding: 24px; }
audio { width: 100%; }

/* ── Tables ── */
.table { color: var(--mk-text); }
.table > :not(caption) > * > * { background: transparent; border-color: var(--mk-border); }
.mk-table-card { overflow: hidden; }

/* ── Admin sidebar ── */
.mk-admin { display: grid; grid-template-columns: 240px 1fr; gap: 24px; }
.mk-side { position: sticky; top: 80px; align-self: start; }
.mk-side a {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px;
    color: var(--mk-dim); text-decoration: none; font-weight: 500;
}
.mk-side a:hover, .mk-side a.active { background: var(--mk-card); color: var(--mk-text); }
@media (max-width: 800px){ .mk-admin{ grid-template-columns: 1fr; } .mk-side{ position: static; } }

/* ── Misc ── */
.mk-footer { border-top: 1px solid var(--mk-border); }
.mk-flink { color: var(--mk-dim); text-decoration: none; }
.mk-flink:hover { color: var(--mk-text); }
.mk-alert { border-radius: 14px; border: 1px solid var(--mk-border); }
.text-dim { color: var(--mk-dim) !important; }
.mk-chip { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.75rem;
    background: rgba(255,255,255,.06); border:1px solid var(--mk-border); }
.status-done{ color:#22e0c8 } .status-failed{ color:#ff5c7a } .status-generating,.status-optimizing,.status-queued{ color:#ffcf5c }

/* ── Landing: step number badge ── */
.mk-step-num {
    display:inline-grid; place-items:center;
    width:44px; height:44px; margin:0 auto; border-radius:50%;
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.2rem; color:#fff;
    background:linear-gradient(135deg,var(--mk-p1),var(--mk-p2));
    box-shadow:0 6px 18px rgba(124,92,255,.35);
}
.mk-stat-ico { display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
    background:rgba(255,77,143,.12); flex:none; }