@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* =========================================
   Bento Grid Design System (bnt-)
   ========================================= */

*, *::before, *::after { box-sizing: border-box; }

:root {
    /* Space backgrounds */
    --bnt-bg:              #0A0A0F; /* Deep Space Black */
    --bnt-surface:         #111118; /* Dark Indigo Surface */
    --bnt-surface-2:       #1A1A27; /* Elevated Tile */
    --bnt-surface-3:       #22222F; /* Deep Tile */

    /* Vibrant Brand Palette */
    --bnt-violet:          #7C3AED; /* Electric Violet */
    --bnt-violet-light:    #8B5CF6;
    --bnt-violet-hover:    #6D28D9;
    --bnt-violet-muted:    rgba(124, 58, 237, 0.12);
    --bnt-violet-glow:     rgba(124, 58, 237, 0.25);

    --bnt-cyan:            #06B6D4; /* Cyber Cyan */
    --bnt-cyan-light:      #22D3EE;
    --bnt-cyan-muted:      rgba(6, 182, 212, 0.12);

    --bnt-emerald:         #10B981; /* Neon Emerald */
    --bnt-emerald-muted:   rgba(16, 185, 129, 0.12);

    --bnt-rose:            #F43F5E; /* Alert Rose */
    --bnt-rose-muted:      rgba(244, 63, 94, 0.12);

    --bnt-amber:           #F59E0B;
    --bnt-amber-muted:     rgba(245, 158, 11, 0.12);

    /* Gradients */
    --bnt-grad-primary:    linear-gradient(135deg, #7C3AED, #06B6D4);
    --bnt-grad-warm:       linear-gradient(135deg, #7C3AED, #F43F5E);
    --bnt-grad-cool:       linear-gradient(135deg, #06B6D4, #10B981);
    --bnt-grad-subtle:     linear-gradient(135deg, rgba(124,58,237,0.15), rgba(6,182,212,0.08));

    /* Text */
    --bnt-text:            #F8FAFC; /* Snow White */
    --bnt-text-muted:      #94A3B8; /* Slate 400 */
    --bnt-text-light:      #64748B; /* Slate 500 */

    /* Borders */
    --bnt-border:          #1E1E2E;
    --bnt-border-strong:   #2D2D40;
    --bnt-border-glow:     rgba(124, 58, 237, 0.3);

    /* Rounded Shapes */
    --bnt-radius-sm:       6px;
    --bnt-radius:          12px;
    --bnt-radius-lg:       20px;
    --bnt-radius-xl:       28px;
    --bnt-radius-pill:     999px;

    /* Fonts */
    --bnt-font-heading:    'Plus Jakarta Sans', sans-serif;
    --bnt-font-body:       'Inter', sans-serif;
    --bnt-font-mono:       'DM Mono', monospace;

    /* Shadows */
    --bnt-shadow-sm:       0 2px 10px rgba(0,0,0,0.4);
    --bnt-shadow:          0 8px 30px rgba(0,0,0,0.5);
    --bnt-shadow-glow:     0 0 30px rgba(124, 58, 237, 0.15);
    --bnt-shadow-cyan:     0 0 30px rgba(6, 182, 212, 0.1);

    /* Transition */
    --bnt-transition:      all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    margin: 0;
    font-family: var(--bnt-font-body);
    color: var(--bnt-text);
    background-color: var(--bnt-bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* ── Bento Base Tile ──────────── */
.bnt-tile {
    background-color: var(--bnt-surface);
    border: 1px solid var(--bnt-border);
    border-radius: var(--bnt-radius-lg);
    padding: 2rem;
    transition: var(--bnt-transition);
    position: relative;
    overflow: hidden;
}

.bnt-tile:hover {
    border-color: var(--bnt-border-strong);
    transform: translateY(-2px);
    box-shadow: var(--bnt-shadow-glow);
}

/* Gradient glow tile variant */
.bnt-tile-glow {
    background: var(--bnt-grad-subtle);
    border-color: var(--bnt-border-glow);
}

/* ── Typography ───────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--bnt-font-heading);
    font-weight: 700;
    margin: 0;
    color: var(--bnt-text);
    line-height: 1.2;
}

p {
    font-family: var(--bnt-font-body);
    color: var(--bnt-text-muted);
    margin: 0;
    line-height: 1.6;
}

/* ── Buttons ──────────────────── */
.bnt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    font-family: var(--bnt-font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: var(--bnt-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: var(--bnt-transition);
    white-space: nowrap;
    user-select: none;
}

.bnt-btn-primary {
    background: var(--bnt-grad-primary);
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px var(--bnt-violet-glow);
}
.bnt-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px var(--bnt-violet-glow);
    filter: brightness(1.1);
}

.bnt-btn-violet {
    background-color: var(--bnt-violet);
    color: #fff;
    border-color: var(--bnt-violet);
}
.bnt-btn-violet:hover {
    background-color: var(--bnt-violet-hover);
    transform: translateY(-1px);
    box-shadow: var(--bnt-shadow-glow);
}

.bnt-btn-outline {
    background-color: transparent;
    color: var(--bnt-text-muted);
    border-color: var(--bnt-border-strong);
}
.bnt-btn-outline:hover {
    background-color: var(--bnt-surface-2);
    color: var(--bnt-text);
    border-color: var(--bnt-violet);
}

.bnt-btn-ghost {
    background-color: transparent;
    color: var(--bnt-text-muted);
    border-color: transparent;
}
.bnt-btn-ghost:hover {
    background-color: var(--bnt-surface-2);
    color: var(--bnt-text);
}

.bnt-btn-cyan {
    background-color: var(--bnt-cyan);
    color: #0A0A0F;
    border-color: var(--bnt-cyan);
    font-weight: 800;
}
.bnt-btn-cyan:hover {
    background-color: var(--bnt-cyan-light);
    transform: translateY(-1px);
    box-shadow: var(--bnt-shadow-cyan);
}

.bnt-btn-sm  { padding: 0.4rem 1rem; font-size: 0.8rem; border-radius: var(--bnt-radius-sm); }
.bnt-btn-lg  { padding: 0.9rem 2rem; font-size: 0.95rem; border-radius: var(--bnt-radius-lg); }
.bnt-btn-pill { border-radius: var(--bnt-radius-pill); }
.bnt-btn-block { width: 100%; }
.bnt-btn-icon { width: 42px; height: 42px; padding: 0; border-radius: var(--bnt-radius); }

/* ── Form Controls ────────────── */
.bnt-input {
    width: 100%;
    padding: 0.7rem 1.1rem;
    border: 1px solid var(--bnt-border-strong);
    border-radius: var(--bnt-radius);
    font-family: var(--bnt-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bnt-text);
    background-color: var(--bnt-surface-2);
    outline: none;
    transition: var(--bnt-transition);
}
.bnt-input::placeholder { color: var(--bnt-text-light); }
.bnt-input:focus {
    border-color: var(--bnt-violet);
    box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}

.bnt-label {
    display: block;
    margin-bottom: 0.45rem;
    font-family: var(--bnt-font-heading);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--bnt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bnt-select {
    width: 100%;
    padding: 0.7rem 1.1rem;
    border: 1px solid var(--bnt-border-strong);
    border-radius: var(--bnt-radius);
    font-family: var(--bnt-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bnt-text);
    background-color: var(--bnt-surface-2);
    outline: none;
    transition: var(--bnt-transition);
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238B5CF6' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
    background-size: 1rem;
    cursor: pointer;
}
.bnt-select:focus {
    border-color: var(--bnt-violet);
    box-shadow: 0 0 0 3px var(--bnt-violet-muted);
}

/* ── Badges ───────────────────── */
.bnt-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--bnt-radius-pill);
    font-family: var(--bnt-font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.bnt-badge-violet  { background-color: var(--bnt-violet-muted); color: var(--bnt-violet-light); border-color: rgba(124,58,237,0.2); }
.bnt-badge-cyan    { background-color: var(--bnt-cyan-muted); color: var(--bnt-cyan); border-color: rgba(6,182,212,0.2); }
.bnt-badge-emerald { background-color: var(--bnt-emerald-muted); color: var(--bnt-emerald); border-color: rgba(16,185,129,0.2); }
.bnt-badge-rose    { background-color: var(--bnt-rose-muted); color: var(--bnt-rose); border-color: rgba(244,63,94,0.2); }
.bnt-badge-amber   { background-color: var(--bnt-amber-muted); color: var(--bnt-amber); border-color: rgba(245,158,11,0.2); }
.bnt-badge-default { background-color: var(--bnt-surface-3); color: var(--bnt-text-muted); border-color: var(--bnt-border-strong); }

/* ── Checkbox ─────────────────── */
.bnt-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
}

.bnt-checkbox {
    appearance: none;
    width: 17px;
    height: 17px;
    border: 1px solid var(--bnt-border-strong);
    border-radius: 5px;
    background-color: var(--bnt-surface-2);
    outline: none;
    cursor: pointer;
    transition: var(--bnt-transition);
    position: relative;
    flex-shrink: 0;
}
.bnt-checkbox:checked {
    background: var(--bnt-grad-primary);
    border-color: var(--bnt-violet);
}
.bnt-checkbox:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.bnt-checkbox-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bnt-text-muted);
}

/* ── Divider ──────────────────── */
.bnt-divider { border: none; border-top: 1px solid var(--bnt-border); margin: 0; }

/* ── Gradient Text ────────────── */
.bnt-text-gradient {
    background: var(--bnt-grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Utilities ────────────────── */
.text-violet  { color: var(--bnt-violet-light) !important; }
.text-cyan    { color: var(--bnt-cyan) !important; }
.text-emerald { color: var(--bnt-emerald) !important; }
.text-muted   { color: var(--bnt-text-muted) !important; }