:root {
    --bg: #0b1020;
    --bg-2: #10182d;
    --card: rgba(255,255,255,.06);
    --stroke: rgba(255,255,255,.08);
    --text: #ecf2ff;
    --muted: #a8b4d1;
    --accent: #72e4ff;
    --accent-2: #8b7cff;
    --success: #28c76f;
    --warning: #ffb020;
}

html, body { min-height: 100%; }
body {
    background:
        radial-gradient(circle at top right, rgba(139,124,255,.20), transparent 24%),
        radial-gradient(circle at top left, rgba(114,228,255,.16), transparent 22%),
        linear-gradient(180deg, #08101f 0%, #0d1424 100%);
    color: var(--text);
}

.app-nav {
    backdrop-filter: blur(12px);
    background: rgba(7, 11, 24, .78);
    border-bottom: 1px solid var(--stroke);
}

.brand-badge {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #05101d;
    font-weight: 900;
    margin-right: .45rem;
}

.version-pill, .tiny-tag, .example-chip {
    display: inline-block;
    border: 1px solid rgba(114,228,255,.22);
    background: rgba(114,228,255,.09);
    color: #bdf6ff;
    border-radius: 999px;
    padding: .35rem .7rem;
    font-size: .78rem;
}

.nav-user {
    color: var(--muted);
    padding: .4rem .8rem;
}

.hero-card,
.panel-card,
.plugin-card,
.auth-card {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045));
    border: 1px solid var(--stroke);
    border-radius: 26px;
    box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

.hero-card, .panel-card, .auth-card { padding: 1.4rem; }
.plugin-card {
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.plugin-icon {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(114,228,255,.18), rgba(139,124,255,.18));
    color: #d5f9ff;
    border: 1px solid rgba(255,255,255,.08);
}

.stats-grid,
.idea-grid {
    display: grid;
    gap: .9rem;
}
.stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.idea-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

.stat-box,
.idea-box,
.output-box,
.empty-box,
.trace-box {
    border-radius: 22px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}

.stat-box {
    padding: 1rem;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.stat-box span { font-size: 1.6rem; font-weight: 800; }
.stat-box small { color: var(--muted); }

.idea-box { padding: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.idea-box span { color: var(--muted); font-size: .95rem; }

.btn-glow, .btn-soft {
    border-radius: 14px;
    padding: .8rem 1rem;
    font-weight: 700;
    border: 1px solid transparent;
}
.btn-glow {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #07111d;
}
.btn-glow:hover { color: #07111d; opacity: .96; }
.btn-soft {
    background: rgba(255,255,255,.06);
    color: var(--text);
    border-color: rgba(255,255,255,.08);
}
.btn-soft:hover, .btn-outline-light:hover { color: #fff; }

.form-control, .form-select {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: var(--text);
    border-radius: 16px;
    padding: .85rem 1rem;
}

.form-control:focus, .form-select:focus {
    background: rgba(255,255,255,.08);
    color: var(--text);
    border-color: rgba(114,228,255,.50);
    box-shadow: 0 0 0 .2rem rgba(114,228,255,.16);
}

.form-select option {
    background: #121b30;
    color: #f3f7ff;
}

.form-label, .form-text, .text-secondary, .plugin-meta, .feature-list li { color: var(--muted) !important; }

.auth-wrap { min-height: 72vh; display: grid; place-items: center; }
.auth-card { width: min(520px, 100%); }

.run-list, .trace-list { display: grid; gap: .85rem; }
.run-item, .trace-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    border-radius: 20px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}
.trace-item { display: block; }
.output-box, .empty-box, .trace-box { padding: 1rem; }
.trace-box pre, .mini-code, .code-area {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.mini-code {
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 18px;
    padding: .8rem;
    font-size: .82rem;
    color: #d7e4ff;
}
.code-area { min-height: 360px; }
.plugin-meta {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: .86rem;
}
.feature-list { padding-left: 1.1rem; }

.alert {
    border-radius: 18px;
}

@media (max-width: 991px) {
    .idea-grid, .stats-grid { grid-template-columns: 1fr; }
    .plugin-meta, .run-item { flex-direction: column; align-items: flex-start; }
}