:root {
    --bg: #ffffff;
    --fg: #111827;
    --muted: #6b7280;
    --accent: #673ab7; /* Deep Purple Material */
    --accent-weak: #ede9fe; /* pale lavender */
    --border: #e5e7eb;
    --error: #b91c1c;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font:
        16px/1.5 system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Inter,
        Arial,
        sans-serif;
}

.container {
    max-width: 900px;
    margin: 4rem auto;
    padding: 0 1rem;
}

h1 {
    margin: 0 0 1rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin: 1rem 0 1.25rem;
}

/* Buttons tuned for white background */
button {
    appearance: none;
    border: 1px solid var(--accent);
    background: #fff;
    color: var(--accent);
    padding: 0.6rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition:
        background-color 120ms ease,
        color 120ms ease,
        box-shadow 160ms ease,
        transform 60ms ease;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
button:hover {
    background: var(--accent-weak);
}
button:active {
    transform: translateY(1px);
}
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Device dropdown */
.device-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--fg);
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background: #fff;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 10px;
    font: inherit;
    font-weight: 600;

    /* Match button height and padding exactly */
    padding: 0.6rem 2.25rem 0.6rem 0.75rem;
    line-height: 1; /* prevent extra height from internal baseline */
    height: 2.5rem; /* lock height equal to buttons */
    min-width: 240px;
    cursor: pointer;

    transition:
        background-color 120ms ease,
        color 120ms ease,
        box-shadow 160ms ease,
        transform 60ms ease;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);

    /* Custom chevron (Deep Purple) */
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23673AB7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: right 0.75rem center;
}

select:hover {
    background: var(--accent-weak);
}

select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(103, 58, 183, 0.25);
}

select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* FFT canvas wrapper */
.viz-wrap {
    width: 100%;
    height: 160px;
    background: #ffffff; /* white background */
    border: 2px solid #673ab7; /* Deep Purple (Material Design) */
    border-radius: 16px; /* smooth rounded corners */
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 6px rgba(103, 58, 183, 0.15); /* subtle purple glow */
}

.viz-wrap::after {
    /* optional subtle grid overlay - lighter for white background */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            to right,
            rgba(103, 58, 183, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(to top, rgba(103, 58, 183, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

#spectrumCanvas {
    width: 100%;
    height: 100%;
    display: block;
    background: #fff;
}

/* Status text */
.status {
    margin-top: 0.75rem;
    color: var(--muted);
}

.error {
    color: var(--error);
    font-weight: 600;
}