/* ================================================
   App custom CSS — overrides and supplements styles.css
   ================================================ */

/* e-Ukraine font — self-hosted (fonts.cdnfonts.com is unreliable) */
@font-face {
    font-family: 'e-Ukraine';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('/assets/fonts/e-Ukraine-Light.woff2') format('woff2');
}
@font-face {
    font-family: 'e-Ukraine';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/assets/fonts/e-Ukraine-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'e-Ukraine';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('/assets/fonts/e-Ukraine-Bold.woff2') format('woff2');
}

/* ── CSS variables ── */
:root {
    --black-bg: #000;
    --white-bg: #fff;
    --black-text: #000;
    --white-text: #fff;
    --page-header: #7fc2f2;
    --page-background: #f5f5f5;
    --white-background: #fff;
    --modal-border-radius: 16px;
    --e-Ukraine-font: 'e-Ukraine', 'Arial', sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--e-Ukraine-font);
    background: var(--page-background);
}

/* ── Outer layout ── */
.main-box { width: 1200px; max-width: 100%; margin: 0 auto; }
.white-bg { background: var(--white-background); min-height: 100vh; display: flex; flex-direction: column; }

/* ═══════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════ */
.header-background {
    background: var(--page-header);
    border-bottom: 1px solid var(--black-text);
}
.header-box-padding {
    position: relative;
    padding: 40px 64px 0;
    margin: 0;
}

/* tablet row — hidden on desktop */
.tablet-settings {
    display: none;
    align-items: center;
    margin-bottom: 15px;
}
.minjust-logo-tablet {
    height: 50px;
    width: auto;
}

/* site-header: herb+title on left, minjust-logo on right */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}
.site-logo {
    display: flex;
    align-items: center;
}
.site-logo svg {
    flex-shrink: 0;
}
.site-title {
    font-family: var(--e-Ukraine-font);
    font-weight: 400;
    font-size: 38px;
    line-height: 40px;
    margin: 0 0 0 24px;
    color: var(--black-text);
}
.site-header-right {
    display: flex;
    align-items: center;
}
.minjust-logo {
    width: 280px;
    height: 80px;
    object-fit: contain;
}

/* ── Navigation ── */
.menu { }
.menu_list {
    display: inline-flex !important;
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu_list-item {
    padding: 0 8px;
}
.menu_list-link {
    font-family: var(--e-Ukraine-font);
    font-weight: 400;
    font-size: 1rem;
    line-height: 20px;
    color: var(--black-text);
    padding: 8px 0 6px;
    display: block;
    border-bottom: 2px solid transparent;
    text-decoration: underline;
    transition: border-color .2s ease-in-out;
}
.menu_list-item.active .menu_list-link,
.menu_list-link:hover {
    border-bottom-color: var(--black-text);
}

/* ═══════════════════════════════════════════════
   MAIN CONTENT LAYOUT
═══════════════════════════════════════════════ */
.page-content-box {
    flex: 1;
}
.home-content-wrapper {
    padding: 36px 64px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
.home-content-wrapper > .main-content {
    display: flex;
    flex-direction: column;
    flex: 2;
    padding-right: 40px;
    min-width: 0;
}
.home-content-wrapper > .add-content {
    flex: 1;
    min-width: 220px;
}

/* ── Typography ── */
.page-title {
    font-family: var(--e-Ukraine-font);
    font-size: 34px;
    line-height: 40px;
    font-weight: 400;
    letter-spacing: -.02em;
    color: var(--black-text);
    margin: 0 0 16px;
}
.ac-title {
    font-family: var(--e-Ukraine-font);
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -.02em;
    color: var(--black-text);
    margin: 0 0 8px;
}
.ac-text {
    font-size: 12px;
    line-height: 16px;
    text-align: justify;
    letter-spacing: -.02em;
    color: var(--black-text);
}
.ac-text ul { margin-top: 8px; }
.ac-text p  { margin-bottom: 8px; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }

/* ═══════════════════════════════════════════════
   FORM ELEMENTS
═══════════════════════════════════════════════ */
.form-group { margin-bottom: .7rem; }
.form-group-floating { position: relative; padding-top: 8px; }
.control-label {
    display: block;
    font-size: 0.8rem;
    color: var(--black-text);
    margin-bottom: 0;
}
.form-control {
    display: block;
    width: 100%;
    padding: 0 0 0 3px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--black-text);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--black-text);
    border-radius: 0;
    transition: border-color .15s ease-in-out;
    font-family: inherit;
}
.form-control:focus {
    color: var(--black-text);
    background-color: transparent;
    border-bottom-color: var(--black-text);
    outline: 0;
    box-shadow: none;
}
.form-control-sm {
    font-size: 14px;
    line-height: 1.5;
}

/* ── Input group (date + calendar btn) ── */
.input-group {
    display: flex;
    align-items: stretch;
}
.input-group .form-control {
    flex: 1;
    min-width: 0;
}
.btn-calendar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--black-text);
    font-size: 1rem;
    flex-shrink: 0;
}
.btn-calendar:focus {
    outline: none;
}
.m-l0 { margin-left: 0 !important; }

/* ── Date picker popup ── */
.date-picker-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 25;
    width: 268px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    padding: 12px;
    font-family: var(--e-Ukraine-font);
}
.date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.date-picker-header button {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    color: #999;
    flex-shrink: 0;
}
.date-picker-header button:hover { background: #f2f2f2; border-radius: 4px; color: #555; }
.date-picker-my-group {
    display: flex;
    align-items: center;
    gap: 2px;
}
.date-picker-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="5" viewBox="0 0 10 6"><path d="M0 0L5 6L10 0Z" fill="%23999"/></svg>') no-repeat right 2px center;
    border: none;
    border-radius: 4px;
    padding: 4px 16px 4px 6px;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 400;
    color: var(--black-text);
    cursor: pointer;
}
.date-picker-select:hover { background-color: #f2f2f2; }
.date-picker-weekdays,
.date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}
.date-picker-weekdays span {
    font-size: .75rem;
    font-style: italic;
    font-weight: 600;
    color: #4a90d9;
    padding: 4px 0;
    text-transform: lowercase;
}
.date-picker-day {
    background: none;
    border: none;
    border-radius: 50%;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    font-size: .85rem;
    cursor: pointer;
    color: var(--black-text);
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}
.date-picker-day:hover { background: #f2f2f2; }
.date-picker-day.today { background: #eaf4fd; font-weight: 700; }
.date-picker-day.selected { background: #000; color: #fff; }
span.date-picker-day.muted {
    color: #ccc;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}

/* ── Help icon ── */
.help-icon {
    position: relative;
    font-size: 20px;
    cursor: pointer;
    color: var(--black-text);
}
.help-icon[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 240px;
    background: #000;
    color: #fff;
    font-family: var(--e-Ukraine-font);
    font-size: .8rem;
    line-height: 1.3;
    font-weight: 400;
    text-align: left;
    padding: 8px 10px;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    z-index: 30;
    white-space: normal;
}
.help-icon[title]:hover::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #000;
    margin-bottom: -4px;
    z-index: 30;
}

/* ── Utility ── */
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.col-md-12 { width: 100%; }
.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.row > * { padding-right: 15px; padding-left: 15px; }
.text-uppercase { text-transform: uppercase; }
.link { color: var(--black-text); text-decoration: none; font-size: 1rem; cursor: pointer; }

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--black-bg);
    border: 2px solid var(--black-bg);
    color: var(--white-text);
    border-radius: 2.5rem;
    padding: 11px 20px;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 400;
    cursor: pointer;
    transition: all .4s;
    white-space: nowrap;
    text-decoration: none;
    font-family: var(--e-Ukraine-font);
}
.btn-page.btn-page-sm {
    font-size: .85rem;
    line-height: 1.3rem;
    padding: 8px 20px;
}
.btn-page.primary {
    background-color: transparent;
    border-color: var(--black-text);
    color: var(--black-text);
}
.btn-page.primary:hover,
.btn-page.primary:focus {
    background-color: var(--black-bg);
    color: var(--white-text);
}
.btn-page:disabled,
.btn-page.disabled {
    opacity: .65;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════ */
.app-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 40px;
    overflow-y: auto;
}
.app-modal-dialog {
    background: #fff;
    border-radius: var(--modal-border-radius, 4px);
    width: 100%;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    margin-bottom: 40px;
}
.app-modal-dialog-sm {
    background: #fff;
    border-radius: var(--modal-border-radius, 4px);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    margin: auto;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #dee2e6;
}
.modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    font-family: var(--e-Ukraine-font);
}
.close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
    padding: 0 4px;
    font-family: sans-serif;
}
.close:hover { opacity: 1; }
.pull-right { margin-left: auto; }
.modal-body { padding: 16px 20px; }
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid #dee2e6;
}
.justify-center { justify-content: center; }

/* ── Error modal ── */
.notification-app-header {
    padding: 24px 35px 8px;
    text-align: center;
}
.err-title {
    width: 100%;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 500;
    margin: 8px 0 0;
    font-family: var(--e-Ukraine-font);
}
.text-color-red { color: #ff3a44 !important; }
.err-msg {
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
    color: var(--black-text);
    padding: 12px 20px;
}

/* ── Captcha ── */
#captchaImg:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--black-bg);
    min-height: 172px;
    margin-top: 20px;
    font-family: var(--e-Ukraine-font);
    font-weight: 400;
    padding: 44px 62px;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -.02em;
    color: var(--white-text);
}
.footer-brand { }
.footer-contacts .contacts {
    margin-bottom: .75rem;
}
.footer-contacts .contacts span:first-child {
    margin-right: 3rem;
}
/* desktop: show only footer-brand's footer-site */
.footer-contacts .footer-site { display: none; }
.footer-brand .footer-site   { display: block; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 1060px) {
    .site-title { font-size: 24px; line-height: 30px; }
    .minjust-logo { width: 200px; height: 60px; }
    .header-box-padding { padding: 30px 34px 0; }
    .home-content-wrapper { padding: 26px 34px; gap: 24px; }
}

@media (max-width: 895px) {
    footer {
        min-height: auto;
        height: auto;
        padding: 20px 34px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .footer-contacts .footer-site { display: block; }
    .footer-brand { display: none; }
}

@media (max-width: 820px) {
    .tablet-settings     { display: flex; }
    .site-header         { margin-bottom: 16px; }
    .minjust-logo        { display: none; }
    .header-utility-bar  { display: none; }
}

@media (max-width: 655px) {
    .home-content-wrapper {
        flex-direction: column;
        padding: 20px 16px;
        gap: 24px;
    }
    .home-content-wrapper > .main-content { padding-right: 0; }
    .site-title { font-size: 20px; line-height: 26px; }
    .page-title { font-size: 24px; line-height: 30px; }
    .app-modal-dialog { max-width: 100vw; border-radius: 0; }
}

@media (max-width: 480px) {
    .header-box-padding { padding: 20px 16px 0; }
    footer { padding: 20px 16px; font-size: 14px; }
    .site-logo svg { width: 50px; height: 50px; }
}

/* ═══════════════════════════════════════════════
   UTILITY BAR — language switch + accessibility
═══════════════════════════════════════════════ */
.header-utility-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    font-family: var(--e-Ukraine-font);
}

/* ── Language switch ── */
.lang-switch { position: relative; }
.lang-switch-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 2px;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--black-text);
    cursor: pointer;
}
.lang-globe-icon { flex-shrink: 0; color: var(--black-text); }
.lang-switch-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    min-width: 84px;
    overflow: hidden;
    z-index: 20;
}
.lang-switch-menu.open { display: block; }
.lang-switch-option {
    display: block;
    padding: 8px 14px;
    font-size: .85rem;
    color: var(--black-text);
    text-decoration: none;
    transition: background .15s;
}
.lang-switch-option:hover { background: #f2f2f2; }
.lang-switch-option.active { font-weight: 700; background: #f5f5f5; }

/* ── Accessibility toggle button ── */
.a11y-toggle-btn {
    display: block;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    color: var(--black-text);
    cursor: pointer;
    max-width: 200px;
}
.a11y-icon {
    float: left;
    margin-top: 6px;
    margin-right: 8px;
    color: var(--black-text);
}
.a11y-toggle-label {
    display: inline-block;
    font-size: .9rem;
    line-height: 1.3;
    text-decoration: underline;
    text-align: left;
}
.a11y-toggle-btn:hover .a11y-toggle-label { text-decoration-thickness: 2px; }

/* ═══════════════════════════════════════════════
   ACCESSIBILITY PANEL
═══════════════════════════════════════════════ */
.a11y-panel {
    max-width: 420px;
    font-family: var(--e-Ukraine-font);
    overflow: hidden;
}
.a11y-panel .modal-content { overflow: hidden; }
.a11y-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--page-header);
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.a11y-panel-title { font-weight: 700; font-size: 1.1rem; }
.a11y-panel-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
}
.a11y-panel-close:hover { opacity: 1; }
.a11y-panel-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.a11y-row-label { font-size: .8rem; font-weight: 300; color: #6c757d; margin: 0 0 8px; }

.a11y-stepper-grid { display: flex; gap: 16px; }
.a11y-stepper { flex: 1; }
.a11y-stepper-buttons { display: flex; gap: 8px; }
.a11y-step-btn {
    flex: 1;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    cursor: pointer;
    color: #000;
    transition: all .15s;
}
.a11y-step-btn:hover { border-color: #000; background: #f5f5f5; }
.a11y-step-btn:disabled { opacity: .35; cursor: not-allowed; }

.a11y-color-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.btn-color-spectrum {
    height: 30px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.15);
    cursor: pointer;
    font-weight: 700;
    font-size: .85rem;
    transition: transform .1s;
}
.btn-color-spectrum:hover { transform: scale(1.08); }
.btn-color-spectrum.active { outline: 2px solid #000; outline-offset: 1px; }
.theme-default      { background: #fff; color: #000; }
.theme-invert        { background: #000; color: #fff; }
.theme-black-yellow   { background: #ffe700; color: #000; }
.theme-yellow-black   { background: #000; color: #ffe700; }
.theme-blue-yellow    { background: #ffe700; color: #0000cc; }
.theme-yellow-blue    { background: #003399; color: #ffe700; }
.theme-green-white    { background: #fff; color: #006600; }
.theme-white-green    { background: #006600; color: #fff; }
.theme-brown-white    { background: #fff; color: #663300; }
.theme-white-brown    { background: #663300; color: #fff; }

.a11y-toggle-buttons-row { display: flex; flex-wrap: wrap; gap: 8px; }
.a11y-feature-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 2px solid #000;
    border-radius: 2.5rem;
    padding: 6px 12px;
    font-family: inherit;
    font-size: .8rem;
    color: #000;
    cursor: pointer;
    transition: all .15s;
}
.a11y-feature-btn:hover { background: #f5f5f5; }
.a11y-feature-btn[aria-pressed="true"] { background: #000; color: #fff; }

.a11y-panel-footer { display: flex; justify-content: center; }
.a11y-reset-btn {
    background: none;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: .85rem;
    cursor: pointer;
    transition: all .15s;
}
.a11y-reset-btn:hover { border-color: #000; background: #f5f5f5; }

/* ── Accessibility states (applied to <html>) ── */
html.a11y-font-1 { font-size: 106%; }
html.a11y-font-2 { font-size: 112%; }
html.a11y-font-3 { font-size: 118%; }

html.a11y-spacing-1 body { letter-spacing: .5px; }
html.a11y-spacing-2 body { letter-spacing: 1px; }
html.a11y-spacing-3 body { letter-spacing: 1.5px; }

html.a11y-scale-1 .main-box { zoom: 1.06; }
html.a11y-scale-2 .main-box { zoom: 1.12; }
html.a11y-scale-3 .main-box { zoom: 1.18; }

html.a11y-underline a,
html.a11y-underline .link,
html.a11y-underline .menu_list-link {
    text-decoration: underline !important;
}

html.a11y-big-cursor,
html.a11y-big-cursor * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24"><path d="M4 2l14 12h-7l4 8-3 1-4-8-4 4z" fill="black" stroke="white" stroke-width="1"/></svg>') 4 4, auto !important;
}

.a11y-reading-line {
    position: fixed;
    left: 0;
    width: 100%;
    height: 32px;
    background: rgba(255, 231, 0, .35);
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    pointer-events: none;
    z-index: 1200;
    display: none;
}
html.a11y-reading-line-on .a11y-reading-line { display: block; }

/* ── Color theme overrides (CSS custom properties cascade through
     nearly every rule in this file via var(--black-text) etc.) ── */
html.a11y-theme-invert {
    --black-text: #fff; --white-background: #000; --page-background: #000;
    --page-header: #000; --black-bg: #fff; --white-text: #000;
}
html.a11y-theme-black-yellow {
    --black-text: #000; --white-background: #ffe700; --page-background: #ffe700;
    --page-header: #ffe700; --black-bg: #000; --white-text: #ffe700;
}
html.a11y-theme-yellow-black {
    --black-text: #ffe700; --white-background: #000; --page-background: #000;
    --page-header: #000; --black-bg: #ffe700; --white-text: #000;
}
html.a11y-theme-blue-yellow {
    --black-text: #0000cc; --white-background: #ffe700; --page-background: #ffe700;
    --page-header: #ffe700; --black-bg: #0000cc; --white-text: #ffe700;
}
html.a11y-theme-yellow-blue {
    --black-text: #ffe700; --white-background: #003399; --page-background: #003399;
    --page-header: #003399; --black-bg: #ffe700; --white-text: #003399;
}
html.a11y-theme-green-white {
    --black-text: #006600; --white-background: #fff; --page-background: #fff;
    --page-header: #e6f5e6; --black-bg: #006600; --white-text: #fff;
}
html.a11y-theme-white-green {
    --black-text: #fff; --white-background: #006600; --page-background: #006600;
    --page-header: #006600; --black-bg: #fff; --white-text: #006600;
}
html.a11y-theme-brown-white {
    --black-text: #663300; --white-background: #fff; --page-background: #fff;
    --page-header: #f0e0d0; --black-bg: #663300; --white-text: #fff;
}
html.a11y-theme-white-brown {
    --black-text: #fff; --white-background: #663300; --page-background: #663300;
    --page-header: #663300; --black-bg: #fff; --white-text: #663300;
}
html[class*="a11y-theme-"] footer { background: var(--black-bg); color: var(--white-text); }
html[class*="a11y-theme-"] .site-logo svg path { fill: var(--black-text); }

/* ═══════════════════════════════════════════════
   FILE UPLOAD CONTROL (verify tab)
═══════════════════════════════════════════════ */
.file-upload-control {
    display: flex;
    align-items: center;
    gap: 14px;
}
.file-choose-btn {
    flex-shrink: 0;
    white-space: nowrap;
}
.file-name-display {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 0 0 3px;
    border-bottom: 2px solid var(--black-text);
    font-size: 14px;
    color: #6c757d;
}

@media (max-width: 480px) {
    .a11y-toggle-label { display: none; }
}