* ─── Design tokens ───────────────────────────────────────────────────────── */
:root {
    --font-body: 'Manrope', sans-serif;

    /* Deep Navy Gradient — Option 15: radial glow over linear base */
    --color-navy-1: #040e60;
    --color-navy-2: #030e69;
    --color-navy-3: #0e3162;
    --gradient-navy:
        radial-gradient(ellipse at 15% 50%, rgba(14, 49, 98, 0.6) 0%, transparent 60%),
        linear-gradient(135deg, var(--color-navy-1) 0%, var(--color-navy-2) 50%, var(--color-navy-3) 100%);

    --color-gold:               #e6b413;
    --color-gold-hover:         #A88F35;
    --color-gold-muted:         #D4B464;
    --color-gold-border-faint:  rgba(212, 175, 55, 0.3);
    --color-gold-border-subtle: rgba(212, 175, 55, 0.4);
    --color-gold-bg-hover:      rgba(212, 175, 55, 0.2);

    --color-danger:       #C0392B;
    --color-danger-hover: #A5301F;

    --color-white:          #FFFFFF;
    --color-label-grey:     #D3D3D3;
    --color-text-label:     #e0e0e0;
    --color-text-button:    #f0f0f0;
    --color-text-muted:     #c0c0c0;
    --color-navy-text:      #1A3A5F;
    --color-input-border:   #777;
    --color-placeholder:    #999;

    --color-divider:          rgba(255, 255, 255, 0.1);
    --color-divider-strong:   rgba(255, 255, 255, 0.15);
    --color-button-bg-subtle: rgba(255, 255, 255, 0.08);

    --color-status-ok:  #2ecc71;
    --color-status-err: #e74c3c;

    --shadow-soft:   rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-strong: rgba(0, 0, 0, 0.5);

    --animation-duration: 0.8s;
    --overlay-scale:      1.0;
    --panel-scale-factor: 1;
    --panel-base-w:       440px;

    /* Solemn overrides — applied via body.solemn */
    --solemn-text:   #EAEAEA;
    --solemn-accent: #CCCCCC;
    --solemn-muted:  #A2B5C1;
}

/* ─── Solemn mode ─────────────────────────────────────────────────────────── */
body.solemn .contact-info span   { color: var(--solemn-text); }
body.solemn .contact-info img    { filter: grayscale(1) brightness(0.85); }
body.solemn #controlPanel h3     { color: var(--solemn-accent); }
body.solemn .panel-section-title { color: var(--solemn-muted); }
body.solemn #solemnToggleBtn     { background: var(--solemn-accent); color: var(--color-navy-text); border-color: var(--solemn-accent); }

/* ─── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    font-family: var(--font-body);
    background-color: transparent;
    color: var(--color-white);
}

/* ─── Overlay ─────────────────────────────────────────────────────────────── */
#lowerThird {
    position: fixed;
    bottom: 50px;
    left: 50px;
    transform: translateY(150px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

#lowerThird:not(.hidden-overlay) {
    transform: translateY(0);
    opacity: 1;
}

.contact-container {
    position: relative;
    background: var(--gradient-navy);
    border-left: 6px solid var(--color-gold);
    border-radius: 0 10px 10px 0;
    padding: 20px 30px;
    height: 90px;
    display: flex;
    align-items: center;
    min-width: 600px;
    box-shadow: 0 4px 20px var(--shadow-medium);
    transform: scale(var(--overlay-scale));
    transform-origin: bottom left;
}

.contact-info {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--animation-duration) ease, transform var(--animation-duration) ease;
}

.contact-info.active {
    opacity: 1;
    transform: translateY(0);
}

.contact-info img {
    height: 42px;
    width: auto;
    flex-shrink: 0;
}

.contact-info span {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 34px;
    color: var(--color-white);
    white-space: nowrap;
}

.icon-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.icon-group img {
    height: 42px;
    width: auto;
}

/* ─── Control panel ───────────────────────────────────────────────────────── */

/* Panel sits top-right — overlay is bottom-left anchored */
#controlPanel {
    position: fixed;
    top: 15px;
    right: 15px;
    background: var(--gradient-navy);
    color: var(--color-white);
    border-radius: 10px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: calc(var(--panel-base-w) * var(--panel-scale-factor));
    min-width: 340px;
    max-width: calc(100vw - 30px);
    max-height: calc(100vh - 30px);
    overflow: hidden;
    box-shadow: 0 8px 30px var(--shadow-strong);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

#controlPanel.hidden {
    transform: translateX(calc(100% + 25px));
    opacity: 0;
    pointer-events: none;
}

/* Fixed header */
#panelHeader {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(10px * var(--panel-scale-factor));
    padding: calc(20px * var(--panel-scale-factor)) calc(20px * var(--panel-scale-factor)) calc(14px * var(--panel-scale-factor));
    border-bottom: 1px solid var(--color-gold-border-faint);
}

#controlPanel h3 {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-gold);
    font-size: calc(19px * var(--panel-scale-factor));
    letter-spacing: 0.2px;
}

#closePanelButton {
    flex-shrink: 0;
    width: calc(32px * var(--panel-scale-factor));
    height: calc(32px * var(--panel-scale-factor));
    padding: 0;
    border-radius: 50%;
    background: var(--color-danger);
    color: var(--color-white);
    font-size: calc(20px * var(--panel-scale-factor));
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

#closePanelButton:hover { background: var(--color-danger-hover); }

/* Scrollable body */
#controlPanelContent {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: calc(16px * var(--panel-scale-factor));
    padding: calc(16px * var(--panel-scale-factor)) calc(20px * var(--panel-scale-factor)) calc(20px * var(--panel-scale-factor));
}

/* Sections */
.panel-section {
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--panel-scale-factor));
    padding-bottom: calc(16px * var(--panel-scale-factor));
    border-bottom: 1px solid var(--color-divider);
}

.panel-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.panel-section-title {
    font-family: var(--font-body);
    font-size: calc(12px * var(--panel-scale-factor));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--color-gold-muted);
    margin-bottom: calc(2px * var(--panel-scale-factor));
}

/* Shortcuts */
#shortcutsList {
    border-top: 1px solid var(--color-divider-strong);
    padding-top: calc(14px * var(--panel-scale-factor));
}

#shortcutsList dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc(6px * var(--panel-scale-factor)) calc(12px * var(--panel-scale-factor));
    font-size: calc(13px * var(--panel-scale-factor));
    margin-top: calc(10px * var(--panel-scale-factor));
}

#shortcutsList dt { font-weight: 700; color: var(--color-gold); white-space: nowrap; }
#shortcutsList dd { color: var(--color-text-muted); }

/* Panel size control */
#panelScaleControl {
    padding-top: calc(2px * var(--panel-scale-factor));
    border-top: 1px solid var(--color-divider);
}

/* Fields */
.field { margin-bottom: 0; }

.contact-row {
    display: flex;
    flex-direction: column;
    gap: calc(5px * var(--panel-scale-factor));
}

.contact-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#controlPanel label {
    display: block;
    font-weight: 600;
    font-size: calc(14px * var(--panel-scale-factor));
    color: var(--color-text-label);
    margin-bottom: 0;
}

#controlPanel input[type="text"],
#controlPanel input[type="number"] {
    width: 100%;
    padding: calc(11px * var(--panel-scale-factor));
    border: 1px solid var(--color-input-border);
    border-radius: 5px;
    background: var(--color-white);
    color: var(--color-navy-text);
    font-family: var(--font-body);
    font-size: calc(15px * var(--panel-scale-factor));
    min-height: calc(44px * var(--panel-scale-factor));
}

#controlPanel input[type="text"]::placeholder,
#controlPanel input[type="number"]::placeholder { color: var(--color-placeholder); }

/* Buttons */
#controlPanel button {
    padding: calc(12px * var(--panel-scale-factor)) calc(14px * var(--panel-scale-factor));
    min-height: calc(44px * var(--panel-scale-factor));
    border: 1px solid var(--color-gold-border-subtle);
    background: var(--color-button-bg-subtle);
    color: var(--color-text-button);
    cursor: pointer;
    border-radius: 5px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: calc(13px * var(--panel-scale-factor));
    line-height: 1.2;
    white-space: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    touch-action: manipulation;
    transition: background 0.2s ease, transform 0.1s ease;
}

#controlPanel button:hover  { background: var(--color-gold-bg-hover); }
#controlPanel button:active { transform: translateY(1px); }

#controlPanel button.button-primary {
    background: var(--color-gold);
    color: var(--color-navy-text);
    border-color: var(--color-gold);
}

#controlPanel button.button-primary:hover { background: var(--color-gold-hover); }

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: calc(10px * var(--panel-scale-factor));
}

.button-row button { flex: 1 1 auto; }

/* Sliders */
.font-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(14px * var(--panel-scale-factor));
    align-items: start;
}

.scale-control label {
    display: block;
    font-size: calc(13px * var(--panel-scale-factor));
    color: var(--color-text-label);
    margin-bottom: calc(5px * var(--panel-scale-factor));
}

.scale-control input[type="range"] {
    width: 100%;
    min-height: calc(44px * var(--panel-scale-factor));
    cursor: pointer;
    touch-action: manipulation;
    accent-color: var(--color-gold);
}

/* Checkboxes */
.checkbox-container {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--panel-scale-factor));
    cursor: pointer;
}

.checkbox-container input[type="checkbox"] {
    width: calc(20px * var(--panel-scale-factor));
    height: calc(20px * var(--panel-scale-factor));
    accent-color: var(--color-gold);
    touch-action: manipulation;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-container span,
.checkbox-container label {
    margin-bottom: 0;
    font-weight: 500;
    font-size: calc(14px * var(--panel-scale-factor));
    color: var(--color-text-label);
}

.contact-row-header .checkbox-container { gap: calc(6px * var(--panel-scale-factor)); }
.contact-row-header .checkbox-container span {
    font-size: calc(13px * var(--panel-scale-factor));
    color: var(--color-text-muted);
}

/* Import / export text areas */
.json-area {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--panel-scale-factor));
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-gold-border-faint);
    border-radius: 6px;
    padding: calc(12px * var(--panel-scale-factor));
}

.json-area label {
    font-size: calc(12px * var(--panel-scale-factor));
    color: var(--color-text-muted);
    font-weight: 400;
}

.json-area textarea {
    width: 100%;
    font-family: monospace;
    font-size: calc(12px * var(--panel-scale-factor));
    padding: calc(8px * var(--panel-scale-factor));
    border: 1px solid var(--color-input-border);
    border-radius: 4px;
    background: #0a1540;
    color: var(--color-label-grey);
    resize: vertical;
    line-height: 1.5;
}

/* Status line */
.status-line {
    font-size: calc(13px * var(--panel-scale-factor));
    font-weight: 600;
    padding: calc(8px * var(--panel-scale-factor)) calc(10px * var(--panel-scale-factor));
    border-radius: 4px;
    text-align: center;
}

.status-line.ok  { color: var(--color-status-ok);  background: rgba(46, 204, 113, 0.1); }
.status-line.err { color: var(--color-status-err); background: rgba(231, 76, 60, 0.1);  }
.hidden { display: none !important; }