:root {
    --radius: 14px;
    --radius-small: 10px;
    --color-bg: #f5f5f5;
    --color-border: #ccc;
    --color-dark: #222;
    --glass-bg: rgba(255, 255, 255, 0.25);
    --glass-border: rgba(255, 255, 255, 0.45);
    --glass-shadow: rgba(0, 0, 0, 0.12);
    --glass-blur: 14px;
}

/* Layout */
main {
    padding-top: 2rem;
    padding-bottom: 0;
}

/* Two-column layout only in Tag/Author mode */
.quote-layout {
    margin-top: 0.5rem;
}

main.two-col .quote-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    column-gap: 2rem;
    align-items: flex-start;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    main.two-col .quote-layout {
        grid-template-columns: 1fr;
    }
}

/* Utility */
.hidden {
    display: none !important;
}

/* Mode toggles: centered over quote window */
.mode-switches {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    max-width: 700px;              /* match quote width */
    margin: 0 auto 1.25rem auto;   /* center over quote */
}

.switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.switch input {
    display: none;
}

.switch .track {
    width: 46px;
    height: 26px;
    background: #ddd;
    border-radius: 26px;
    position: relative;
    transition: background 0.25s ease;
}

.switch .knob {
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.25s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* ON state */
.switch input:checked + .track {
    background: #333;
}

.switch input:checked + .track .knob {
    transform: translateX(20px);
}

.switch .label {
    font-size: 0.95rem;
    color: var(--color-dark);
}

/* Dropdowns (left column) */
.left-side .dropdown-wrap {
    margin-bottom: 1.25rem;
}

.dropdown-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-dark);
    margin-bottom: 0.25rem;
}

.dropdown-wrap select {
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-small);
    background: #fff;
    border: 1px solid var(--color-border);
    font-size: 0.9rem;
    cursor: pointer;
    max-width: 240px;
    width: 100%;
}

/* Quote card (right column / centered in random mode) */
#quoteCard {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-radius: var(--radius);
    border: 1px solid var(--glass-border);
    box-shadow: 0 6px 28px var(--glass-shadow);
    text-align: center;
}

#quoteCard h4 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

#quoteCard .author {
    font-size: 1rem;
    color: #444;
}

/* New quote button */
.quote-actions {
    text-align: center;
    margin-top: 0.75rem;
}

#refresh {
    display: inline-block;
    padding: 0.45rem 1rem;
    border-radius: 8px;
    background: #333;
    color: #fff;
    border: none;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

#refresh:hover {
    background: #555;
    transform: translateY(-2px);
}

.dropdown-label {
    font-size: 1rem;
    font-weight: 600;
}