:root {
    --app-bg-1: #07111f;
    --app-bg-2: #0f1f36;
    --glass: rgba(17, 25, 40, 0.72);
    --glass-border: rgba(255,255,255,0.08);
    --soft: rgba(255,255,255,0.04);
    --accent: #4dabf7;
    --accent-2: #7c4dff;
    --surface-2: rgba(255,255,255,0.04);
    --surface-3: rgba(255,255,255,0.06);
    --text-muted: rgba(255,255,255,0.64);
    --grid: rgba(255,255,255,0.06);
    --plan-workshop: rgba(77, 171, 247, 0.5);
    --plan-room: rgba(255, 193, 7, 0.5);
    --plan-stairs: rgba(124, 77, 255, 0.5);
    --text-main: #edf2f7;
    --topbar: rgba(7, 17, 31, 0.58);
    --modal-bg: #111827;
    --invert-machine-image: 1;
    --success: #2bd576;
    --danger: #ff6b6b;
    --warning: #ffd43b;
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.20);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
}

html[data-bs-theme="light"] {
    --app-bg-1: #eef4ff;
    --app-bg-2: #dfe9f7;
    --glass: rgba(255,255,255,0.76);
    --glass-border: rgba(15,23,42,0.08);
    --soft: rgba(15,23,42,0.03);
    --surface-2: rgba(15,23,42,0.03);
    --surface-3: rgba(15,23,42,0.06);
    --text-muted: rgba(15,23,42,0.64);
    --grid: rgba(15,23,42,0.07);
    --plan-workshop: rgba(13,110,253,0.5);
    --plan-room: rgba(255,193,7,0.7);
    --plan-stairs: rgba(124,77,255,0.5);
    --text-main: #0f172a;
    --topbar: rgba(255,255,255,0.76);
    --modal-bg: #ffffff;
    --invert-machine-image: 0;
}

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    background: radial-gradient(circle at top left, rgba(76, 110, 245, 0.18), transparent 26%), radial-gradient(circle at top right, rgba(13, 202, 240, 0.16), transparent 24%), linear-gradient(135deg, var(--app-bg-1), var(--app-bg-2));
    color: var(--text-main);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    transition: background .25s ease, color .25s ease;
}

.glass {
    background: var(--glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-xl);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    background: var(--surface-2);
    border-radius: 999px;
    padding: .5rem .9rem;
    font-size: .82rem;
    font-weight: 600;
}

.small-muted {
    color: var(--text-muted);
    font-size: .9rem;
}

.theme-aware-input,
.theme-aware-input:focus {
    background: var(--surface-2);
    color: var(--text-main);
    border-color: var(--glass-border);
    box-shadow: none;
}

    .theme-aware-input::placeholder {
        color: var(--text-muted);
    }

    .theme-aware-input.is-invalid {
        border-color: rgba(255, 107, 107, .8);
        box-shadow: 0 0 0 4px rgba(255, 107, 107, .12);
    }

    .theme-aware-input.is-valid {
        border-color: rgba(43, 213, 118, .75);
        box-shadow: 0 0 0 4px rgba(43, 213, 118, .10);
    }

.theme-primary-btn {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 16px 30px rgba(77, 171, 247, 0.24);
}

    .theme-primary-btn:hover,
    .theme-primary-btn:focus {
        color: #fff;
        filter: brightness(1.05);
    }

.theme-outline-btn {
    border: 1px solid var(--glass-border);
    background: var(--surface-2);
    color: var(--text-main);
}

    .theme-outline-btn:hover {
        background: var(--surface-3);
        color: var(--text-main);
    }


.alert-danger {
    background: rgba(255, 107, 107, .10);
    border-color: rgba(255, 107, 107, .22);
    color: #ffd7dc;
}

.app-grid-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,1), rgba(0,0,0,.35));
}

.brand-mark {
    width: 64px;
    height: 64px;
    display: inline-grid;
    place-items: center;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 18px 40px rgba(77, 171, 247, 0.28);
}