/* Warm "stage lighting" palette: deep espresso surfaces, amber/maple accent, cream text */
:root,
[data-bs-theme=dark] {
    --app-bg: #1b1613;
    --app-surface: #251e1a;
    --app-surface-2: #2e2520;
    --app-border: #41342c;
    --app-accent: #e3a857;
    --app-accent-hover: #f0bd75;
    --app-text: #f1e7da;
    --app-muted: #b3a393;

    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-secondary-color: var(--app-muted);
    --bs-body-color-rgb: 241, 231, 218;
    --bs-secondary-color: rgba(241, 231, 218, .68);
    --bs-tertiary-bg: var(--app-surface-2);
    --bs-border-color: var(--app-border);
    --bs-link-color: var(--app-accent);
    --bs-link-color-rgb: 227, 168, 87;
    --bs-link-hover-color: var(--app-accent-hover);
    --bs-link-hover-color-rgb: 240, 189, 117;
    --bs-heading-color: #fff7ec;
    --bs-emphasis-color: #fff7ec;
}

body {
    background:
        radial-gradient(900px 500px at 15% -10%, rgba(227, 168, 87, .14), transparent 60%),
        var(--app-bg);
    min-height: 100vh;
}

.app-navbar {
    background-color: rgba(27, 22, 19, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--app-border);
    --bs-navbar-color: var(--app-muted);
    --bs-navbar-hover-color: var(--app-text);
    --bs-navbar-brand-color: var(--app-text);
    --bs-navbar-brand-hover-color: var(--app-accent);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--app-surface);
    --bs-dropdown-border-color: var(--app-border);
    --bs-dropdown-link-hover-bg: var(--app-surface-2);
    --bs-dropdown-link-color: var(--app-text);
}

.card {
    --bs-card-bg: var(--app-surface);
    --bs-card-border-color: var(--app-border);
    --bs-card-cap-bg: var(--app-surface-2);
    --bs-card-color: var(--app-text);
}

.form-control, .form-select {
    background-color: var(--app-bg);
    border-color: var(--app-border);
    color: var(--app-text);
}

.form-control:focus, .form-select:focus {
    background-color: var(--app-bg);
    border-color: var(--app-accent);
    box-shadow: 0 0 0 .2rem rgba(227, 168, 87, .25);
    color: var(--app-text);
}

.btn-warning {
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-color: #2a1d10;
    --bs-btn-hover-bg: var(--app-accent-hover);
    --bs-btn-hover-border-color: var(--app-accent-hover);
    --bs-btn-hover-color: #2a1d10;
    --bs-btn-active-bg: var(--app-accent-hover);
    --bs-btn-active-border-color: var(--app-accent-hover);
    --bs-btn-active-color: #2a1d10;
    font-weight: 600;
}

.hero {
    padding: 3.5rem 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #3a2a1e 0%, #2a201a 60%, #231b17 100%);
    border: 1px solid var(--app-border);
}

@media (max-width: 575.98px) {
    .hero {
        padding: 2rem 1rem;
    }

    .hero h1 {
        font-size: 1.75rem;
    }

    .btn-lg {
        width: 100%;
    }
}

.maker-card {
    color: var(--app-text);
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}

.maker-card:hover {
    transform: translateY(-3px);
    border-color: var(--app-accent);
    background-color: var(--app-surface-2);
}

.maker-card .card-title { color: var(--app-accent); }

.badge.text-bg-secondary {
    background-color: rgba(227, 168, 87, .18) !important;
    color: var(--app-accent) !important;
    font-weight: 500;
}

.alert-success { --bs-alert-bg: rgba(122, 170, 118, .15); --bs-alert-border-color: rgba(122, 170, 118, .45); --bs-alert-color: #cfe6cb; }
.alert-warning { --bs-alert-bg: rgba(227, 168, 87, .14); --bs-alert-border-color: rgba(227, 168, 87, .45); --bs-alert-color: #f3d9b0; }
.alert-danger  { --bs-alert-bg: rgba(201, 98, 85, .16); --bs-alert-border-color: rgba(201, 98, 85, .5); --bs-alert-color: #f2c2ba; }
.alert-info    { --bs-alert-bg: var(--app-surface-2); --bs-alert-border-color: var(--app-border); --bs-alert-color: var(--app-muted); }
.alert-secondary { --bs-alert-bg: var(--app-surface-2); --bs-alert-border-color: var(--app-border); --bs-alert-color: var(--app-muted); }

footer { border-color: var(--app-border) !important; }

.result-date {
    font-size: 1.25rem;
    font-weight: 600;
}

.serial-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .05em;
}

/* ---- Guitar aesthetic ---- */

h1, h2, h3, .navbar-brand {
    font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif;
    letter-spacing: .01em;
}

/* Navbar */
.app-navbar {
    background: #1b1613;
}

/* Fretboard strip: nut, frets, and pearl position markers */
.fretboard {
    position: relative;
    height: 22px;
    background:
        linear-gradient(90deg, #d9d2c3 0 6px, transparent 6px),
        repeating-linear-gradient(90deg, transparent 0 calc(10% - 3px), #b9b2a6 calc(10% - 3px) 10%),
        linear-gradient(180deg, #2a1a12, #1a0f0a);
    border-bottom: 1px solid var(--app-border);
    overflow: hidden;
}

.fretboard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, 0) 2px 3px);
    background:
        linear-gradient(180deg, transparent 15%, rgba(214, 196, 160, .55) 15% 17%, transparent 17% 38%, rgba(214, 196, 160, .6) 38% 40%, transparent 40% 60%, rgba(214, 196, 160, .65) 60% 63%, transparent 63% 80%, rgba(214, 196, 160, .7) 80% 84%, transparent 84%);
}

.fretboard::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 10px;
    transform: translateY(-50%);
    background:
        radial-gradient(circle 4px at 35% 50%, #efe7d6 98%, transparent 100%),
        radial-gradient(circle 4px at 55% 50%, #efe7d6 98%, transparent 100%),
        radial-gradient(circle 4px at 75% 50%, #efe7d6 98%, transparent 100%);
    opacity: .85;
}

/* Sunburst hero */
.hero {
    background:
        radial-gradient(ellipse at 50% 45%, #d98a2b 0%, #a8541a 38%, #5a2a14 70%, #1e120c 100%);
    border: 1px solid #6b3a1c;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), 0 8px 24px rgba(0, 0, 0, .4);
    position: relative;
}

.hero h1, .hero p {
    text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}

/* Soft sound-hole rings behind hero content */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: repeating-radial-gradient(circle at 50% 50%, transparent 0 28px, rgba(0, 0, 0, .12) 28px 30px);
}

.hero > * { position: relative; }

/* Brand tiles: shared layout, per-brand accent color only */
.maker-card {
    --brand: var(--app-accent);
    border: 1px solid var(--app-border);
    border-left: 6px solid var(--brand);
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 16%, var(--app-surface)) 0%, var(--app-surface) 70%);
}

.maker-card:hover {
    border-color: var(--brand);
}

.maker-card .card-title { color: var(--brand); }

.maker-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}

/* Strings under the footer */
footer {
    border-top: 1px solid var(--app-border) !important;
}

.btn-warning {
    border-radius: 2rem;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}

/* ---- Layout polish ---- */

.card {
    border-radius: .85rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

.card-header {
    border-bottom: 1px solid var(--app-border);
    border-radius: .85rem .85rem 0 0 !important;
}

.form-label {
    font-weight: 600;
}

.form-control, .form-select {
    min-height: 2.75rem;
    border-radius: .6rem;
}

.form-text {
    color: var(--app-muted);
}

.result-date {
    color: #fff7ec;
}

.alert {
    border-radius: .7rem;
}

.navbar-nav .nav-link {
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.navbar-toggler {
    border-color: var(--app-border);
    --bs-navbar-toggler-icon-bg: none;
}

.navbar-toggler-icon {
    filter: invert(1);
}

@media (max-width: 575.98px) {
    main.container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    h1.h3 {
        font-size: 1.5rem;
    }

    form .btn-lg {
        width: 100%;
    }

    .card-body {
        padding: 1rem;
    }

    .fretboard {
        height: 16px;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        padding-bottom: .5rem;
    }
}