/*
    TNT | General Base Converter — page-specific styles
    Created: 2026-08-24
    Base styles: ../styles/tnt-base-styles.css
    Family accent: same energyWaves.jpg hero, cooler blue overlay
    distinguishes this page from base10ToBaseN (warm amber overlay)
*/

/* ── Hero: energyWaves.jpg + cool blue-tinted overlay ── */
#hero {
    background:
        linear-gradient(135deg, rgba(0,8,24,0.72) 0%, rgba(0,22,48,0.64) 100%),
        url('../images/energyWaves.jpg') center / cover no-repeat;
    min-height: 28vh;
    padding: 3.5rem 1rem 2.5rem;
}

/* ── Zen Dots font helper ── */
.zen-dots-regular {
    font-family: "Zen Dots", sans-serif;
    font-weight: 400;
}

/* ── Spark bar ── */
/* span uses margin-left:auto to stay right while links stay left */
.spark-bar {
    background: #00080f;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1.5rem;
    border-bottom: 1px solid rgba(52,152,219,0.35);
}
.spark-bar a {
    color: #5dade2;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
}
.spark-bar a:hover { text-decoration: underline; color: #aed6f1; }
.spark-bar span    { color: rgba(255,255,255,0.45); font-size: 0.80rem; margin-left: auto; }

/* ── Panel backgrounds ── */
.from-panel { background-color: #d6eef8; } /* source: light blue  */
.to-panel   { background-color: #d5f5e3; } /* target: light green */

/* ── Source text input: uppercase + monospace feel ── */
#sourceInput {
    text-transform: uppercase;
    font-family: "Zen Dots", sans-serif;
    letter-spacing: 0.08em;
}

/* ── Result number display in target panel ── */
#resultDisplay {
    font-family: "Zen Dots", sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    text-align: center;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    min-height: 3.2rem;
    word-break: break-all;
    letter-spacing: 0.08em;
}

/* ── Expansion notation ── */
.expansion-note {
    font-size: 0.80rem;
    font-family: "Noto Sans Mono", monospace;
    color: #444;
    margin-top: 0.5rem;
    overflow-x: auto;
    white-space: nowrap;
}