/* QuickQR — Scanner and local history styles */

/* ---------- Local history rows ---------- */
.history-item {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border, rgba(127, 127, 127, 0.25));
}

.history-item:last-child {
    border-bottom: 0;
}

/* English/LTR layout: content on the left, download buttons on the right. */
.history-item-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 126px;
    align-items: center;
    gap: 1rem;
    direction: ltr;
}

.history-item-content {
    min-width: 0;
}

.history-item-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.35rem 0.8rem;
    margin-bottom: 0.45rem;
}

.history-item-header strong {
    color: var(--text-primary, inherit);
}

.history-item-date {
    color: var(--text-muted, #777);
    font-size: 0.75rem;
}

.history-item-payload {
    margin: 0;
    color: var(--text-muted, #777);
    font-size: 0.84rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    max-height: 5.4em;
    overflow: auto;
}

.history-item-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}

.history-download-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.55rem;
    width: 126px;
}

.history-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.35rem;
    padding: 0.5rem 0.55rem;

    color: var(--text-primary, inherit);
    background: var(--surface, rgba(127, 127, 127, 0.06));
    border: 2px solid var(--border, rgba(127, 127, 127, 0.3));
    border-bottom-width: 4px;
    border-radius: 0.65rem;

    font: inherit;
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;

    box-shadow: 0 4px 9px rgba(0, 0, 0, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

:root[data-theme="light"] .history-download-button {
    color: #174A7C;
    background: linear-gradient(135deg, #FFFFFF, #E2F0FF);
    border-color: #91BCE0;
    border-bottom-color: #659AC7;
    box-shadow: 0 3px 0 rgba(70, 120, 170, 0.12), 0 5px 10px rgba(37, 99, 235, 0.08);
}

:root[data-theme="dark"] .history-download-button {
    color: #E7E3FF;
    background: linear-gradient(135deg, #332A50, #243E49);
    border-color: #7770C9;
    border-bottom-color: #54B8BD;
    box-shadow: 0 3px 0 rgba(20, 15, 45, 0.35), 0 5px 12px rgba(0, 0, 0, 0.18);
}

.history-download-button:disabled {
    opacity: 0.68;
    cursor: wait;
    transform: none;
}

.history-download-button:focus-visible {
    outline: 2px solid #67C9CF;
    outline-offset: 3px;
}

@media (hover: hover) {
    :root[data-theme="light"] .history-download-button:not(:disabled):hover {
        transform: translateY(-2px);
        border-color: #659AC7;
        box-shadow: 0 4px 0 rgba(70, 120, 170, 0.14), 0 8px 14px rgba(37, 99, 235, 0.13);
    }

    :root[data-theme="dark"] .history-download-button:not(:disabled):hover {
        transform: translateY(-2px);
        border-color: #A29AFF;
        border-bottom-color: #76D9D8;
        box-shadow: 0 4px 0 rgba(20, 15, 45, 0.4), 0 8px 16px rgba(0, 0, 0, 0.28);
    }
}

.history-action-danger {
    color: var(--danger, #d64545) !important;
}

.history-error {
    color: var(--danger, #d64545);
}

/* ---------- QR scanner ---------- */
#scannerVideo {
    display: block;
    max-width: 100%;
    max-height: 460px; /* Intentionally overrides the 440px base limit. */
}

.scanner-status {
    margin: 0.75rem 0;
    color: var(--text-muted, #777);
    font-size: 0.84rem;
    line-height: 1.5;
}

.scanner-status.is-error {
    color: var(--danger, #d64545);
}

#scanResultText {
    max-width: 100%;
}

@media (max-width: 520px) {
    .history-item-layout {
        grid-template-columns: minmax(0, 1fr) 112px;
        gap: 0.65rem;
    }

    .history-download-actions {
        width: 112px;
    }

    .history-download-button {
        padding: 0.48rem 0.3rem;
        font-size: 0.7rem;
    }
}

@media (max-width: 360px) {
    .history-item-layout {
        grid-template-columns: minmax(0, 1fr) 100px;
        gap: 0.45rem;
    }

    .history-download-actions {
        width: 100px;
    }

    .history-download-button {
        font-size: 0.66rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .history-download-button {
        transition: none;
    }
}

/* ========================================
   Custom Filename — Compact, Theme-Matched Panel
   ======================================== */

.filename-options {
    max-width: 100%;
    margin: 0.5rem 0 0.75rem;
}

.filename-options > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;

    width: fit-content;
    min-width: 218px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.48rem 0.7rem;

    border: 1.5px solid;
    border-left-width: 3px;
    border-radius: 8px;

    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.4;

    user-select: none;
    list-style: none;

    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.filename-options > summary::marker {
    content: "";
}

.filename-options > summary::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.filename-options[open] > summary::after {
    content: "−";
}

/* Light theme — sage and mint */
:root[data-theme="light"] .filename-options > summary {
    color: #294E38;
    background: linear-gradient(135deg, #F2F7EE 0%, #E3EFE3 100%);
    border-color: #B7CFBB;
    border-left-color: #55866A;
    box-shadow:
        0 2px 0 rgba(72, 116, 83, 0.09),
        0 3px 8px rgba(49, 92, 63, 0.05);
}

:root[data-theme="light"] .filename-options > summary::after {
    color: #294E38;
    background: rgba(255, 255, 255, 0.72);
}

:root[data-theme="light"] .filename-options[open] > summary {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

:root[data-theme="light"] #customFilename {
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    margin-top: 0.5rem;
    padding: 0.55rem 0.7rem;

    color: #29372F;
    background: #FAFCF8;
    border: 1.5px solid #AEC7B6;
    border-radius: 8px;

    font: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    box-shadow: 0 2px 5px rgba(49, 92, 63, 0.05);

    transition: border-color 180ms ease, box-shadow 180ms ease;
}

:root[data-theme="light"] #customFilename::placeholder {
    color: #526458;
    opacity: 0.85;
}

/* Dark theme — forest green and soft mint */
:root[data-theme="dark"] .filename-options > summary {
    color: #EDF5F0;
    background: linear-gradient(135deg, #293D35 0%, #263D39 100%);
    border-color: #526F60;
    border-left-color: #8DC5A2;
    box-shadow:
        0 2px 0 rgba(12, 28, 21, 0.32),
        0 4px 9px rgba(0, 0, 0, 0.13);
}

:root[data-theme="dark"] .filename-options > summary::after {
    color: #F0F8F3;
    background: rgba(255, 255, 255, 0.09);
}

:root[data-theme="dark"] .filename-options[open] > summary {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

:root[data-theme="dark"] #customFilename {
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    margin-top: 0.5rem;
    padding: 0.55rem 0.7rem;

    color: #F0F3F1;
    background: #1B2C29;
    border: 1.5px solid #527367;
    border-radius: 8px;

    font: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

    transition: border-color 180ms ease, box-shadow 180ms ease;
}

:root[data-theme="dark"] #customFilename::placeholder {
    color: #D3DDE0;
    opacity: 0.9;
}

@media (hover: hover) {
    :root[data-theme="light"] .filename-options > summary:hover {
        border-color: #8FB69A;
        border-left-color: #3F7855;
        box-shadow:
            0 3px 0 rgba(72, 116, 83, 0.11),
            0 5px 10px rgba(49, 92, 63, 0.09);
    }

    :root[data-theme="dark"] .filename-options > summary:hover {
        border-color: #739A80;
        border-left-color: #B0DEC0;
        box-shadow:
            0 3px 0 rgba(12, 28, 21, 0.36),
            0 6px 12px rgba(0, 0, 0, 0.2);
    }
}

#customFilename:focus {
    outline: 2px solid #67BFC9;
    outline-offset: 2px;
}

:root[data-theme="light"] #customFilename:focus {
    border-color: #55866A;
    box-shadow: 0 0 0 3px rgba(85, 134, 106, 0.14);
}

:root[data-theme="dark"] #customFilename:focus {
    border-color: #8DC5A2;
    box-shadow: 0 0 0 3px rgba(141, 197, 162, 0.17);
}

.filename-options > summary:focus-visible {
    outline: 2px solid #67BFC9;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .filename-options > summary,
    #customFilename {
        transition: none;
    }
}

@media (max-width: 400px) {
    .filename-options > summary {
        width: 100%;
        min-width: 0;
    }
}


/* =====================================================
   QUICK QR — HOMEPAGE VISUAL REDESIGN
   Light: Mint / Sage / Warm Ivory
   Dark: Forest Green / Teal / Soft Bronze
   ===================================================== */

/* ========================================
   1. LIGHT THEME — COLORS
   ======================================== */

:root[data-theme="light"] {
    --home-text: #29372F;
    --home-heading: #17271E;
    --home-muted: #45594C;
    --home-hint: #526458;

    --home-control-bg: #FAFCF8;
    --home-control-border: #AEC7B6;

    --home-inner-bg: rgba(255, 255, 255, 0.38);
    --home-inner-border: #C6D8C9;

    --home-type-bg: linear-gradient(135deg, #FBFCF7 0%, #EAF3E9 100%);
    --home-type-border: #B9CFBD;

    --home-type-active-bg: linear-gradient(135deg, #D8EDDE 0%, #B9DDC9 100%);
    --home-type-active-border: #54896A;

    --home-primary-bg: linear-gradient(135deg, #31825A 0%, #236747 100%);
    --home-primary-border: #286B4B;
    --home-primary-bottom: #194B35;

    --home-secondary-bg: linear-gradient(135deg, #F9FCF7 0%, #E5F0E6 100%);
    --home-secondary-border: #A9C5B2;
    --home-secondary-text: #254A35;

    --home-focus: #408E66;
}

/* ========================================
   2. DARK THEME — COLORS
   ======================================== */

:root[data-theme="dark"] {
    --home-text: #F0F3F1;
    --home-heading: #FCFDFC;
    --home-muted: #E0E7E9;
    --home-hint: #D2DDE1;

    --home-control-bg: #1B2C29;
    --home-control-border: #527367;

    --home-inner-bg: rgba(13, 27, 25, 0.28);
    --home-inner-border: #415D52;

    --home-type-bg: linear-gradient(135deg, #293D35 0%, #263733 100%);
    --home-type-border: #526F60;

    --home-type-active-bg: linear-gradient(135deg, #3D654F 0%, #315D55 100%);
    --home-type-active-border: #8DC5A2;

    --home-primary-bg: linear-gradient(135deg, #43896A 0%, #28766E 100%);
    --home-primary-border: #76B99A;
    --home-primary-bottom: #245A4C;

    --home-secondary-bg: linear-gradient(135deg, #30453C 0%, #293E3D 100%);
    --home-secondary-border: #587E6D;
    --home-secondary-text: #F0F8F3;

    --home-focus: #8ED8B1;
}

/* ========================================
   3. MAIN GENERATOR CARD
   ======================================== */

:root[data-theme="light"] .generator-card {
    --home-card-bg: linear-gradient(145deg, #EDF6EF 0%, #F4F6EC 54%, #F8F1E4 100%);
    --home-card-edge: #B8D2C0;
    --home-card-bottom: #7EA68A;

    --home-card-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.85),
        inset 0 -4px 10px rgba(91, 139, 103, 0.06),
        0 5px 0 rgba(91, 139, 103, 0.13),
        0 12px 26px rgba(49, 92, 63, 0.08);

    --home-card-hover-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.9),
        inset 0 -4px 10px rgba(91, 139, 103, 0.08),
        0 6px 0 rgba(91, 139, 103, 0.15),
        0 16px 30px rgba(49, 92, 63, 0.13);
}

:root[data-theme="dark"] .generator-card {
    --home-card-bg: linear-gradient(145deg, #20382F 0%, #293B34 52%, #3B3A30 100%);
    --home-card-edge: #648B74;
    --home-card-bottom: #A18C5F;

    --home-card-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.06),
        inset 0 -4px 10px rgba(143, 195, 158, 0.06),
        0 5px 0 rgba(27, 48, 38, 0.65),
        0 12px 26px rgba(0, 0, 0, 0.24);

    --home-card-hover-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.08),
        inset 0 -4px 10px rgba(143, 195, 158, 0.08),
        0 6px 0 rgba(27, 48, 38, 0.7),
        0 16px 30px rgba(0, 0, 0, 0.32);
}

/* ========================================
   4. MAIN SCANNER CARD
   ======================================== */

:root[data-theme="light"] .scanner-card {
    --home-card-bg: linear-gradient(145deg, #EAF5F1 0%, #F1F6EC 55%, #F7F4E8 100%);
    --home-card-edge: #B0D0C5;
    --home-card-bottom: #719F94;

    --home-card-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.85),
        inset 0 -4px 10px rgba(65, 135, 118, 0.06),
        0 5px 0 rgba(65, 135, 118, 0.12),
        0 12px 26px rgba(40, 95, 82, 0.08);

    --home-card-hover-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.9),
        inset 0 -4px 10px rgba(65, 135, 118, 0.08),
        0 6px 0 rgba(65, 135, 118, 0.14),
        0 16px 30px rgba(40, 95, 82, 0.13);
}

:root[data-theme="dark"] .scanner-card {
    --home-card-bg: linear-gradient(145deg, #203840 0%, #254148 52%, #303A42 100%);
    --home-card-edge: #568A87;
    --home-card-bottom: #5F9C96;

    --home-card-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.06),
        inset 0 -4px 10px rgba(89, 193, 177, 0.06),
        0 5px 0 rgba(21, 44, 47, 0.68),
        0 12px 26px rgba(0, 0, 0, 0.24);

    --home-card-hover-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.08),
        inset 0 -4px 10px rgba(89, 193, 177, 0.09),
        0 6px 0 rgba(21, 44, 47, 0.72),
        0 16px 30px rgba(0, 0, 0, 0.32);
}

/* ========================================
   5. SHARED TOOL CARD STYLING
   ======================================== */

.tool-card {
    color: var(--home-text);
    background: var(--home-card-bg);
    border: 2px solid var(--home-card-edge);
    border-bottom: 5px solid var(--home-card-bottom);
    border-radius: 22px;
    box-shadow: var(--home-card-shadow);
    font-size: 1rem;

    transition:
        transform 200ms ease,
        box-shadow 200ms ease,
        border-color 200ms ease;
}

.tool-card .card-heading h2 {
    color: var(--home-heading);
    font-size: 1.45rem;
    line-height: 1.35;
    font-weight: 750;
}

.tool-card .card-heading p {
    color: var(--home-muted);
    font-size: 0.98rem;
    line-height: 1.6;
}

.tool-card .card-number {
    font-weight: 700;
    opacity: 0.9;
}

:root[data-theme="light"] .generator-card .generator-icon,
:root[data-theme="light"] .scanner-card .scanner-icon {
    background: rgba(255, 255, 255, 0.55);
    border: 2px solid rgba(92, 139, 108, 0.25);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.9);
    color: #285D41;
}

:root[data-theme="dark"] .generator-card .generator-icon {
    background: linear-gradient(135deg, #375C47, #30473C);
    border: 1px solid #739A7C;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.08);
    color: #F1F8F2;
}

:root[data-theme="dark"] .scanner-card .scanner-icon {
    background: linear-gradient(135deg, #315B60, #304750);
    border: 1px solid #6AA9A1;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.08);
    color: #F0FBF8;
}

/* ========================================
   6. QR TYPE SELECTOR — SIX OPTIONS
   ======================================== */

.tool-card .section-label {
    color: var(--home-muted);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.09em;
}

.tool-card .type-grid {
    padding: 10px;
    border: 1px solid var(--home-inner-border);
    border-radius: 16px;
    background: var(--home-inner-bg);
    gap: 10px;
}

.tool-card .type-button {
    min-height: 68px;
    padding: 12px 8px;
    color: var(--home-text);
    background: var(--home-type-bg);
    border: 2px solid var(--home-type-border);
    border-bottom-width: 4px;
    border-radius: 13px;
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.4;

    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.18),
        0 3px 0 rgba(32, 66, 46, 0.06);

    transition:
        transform 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.tool-card .type-button .type-icon {
    font-size: 1.25rem;
    line-height: 1.2;
}

.tool-card .type-button.active,
.tool-card .type-button[aria-pressed="true"] {
    color: var(--home-heading);
    background: var(--home-type-active-bg);
    border-color: var(--home-type-active-border);
    border-bottom-width: 4px;

    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.22),
        0 3px 0 rgba(35, 80, 52, 0.12);
}

.tool-card .type-description,
.tool-card .scanner-description {
    color: var(--home-muted);
    font-size: 1rem;
    line-height: 1.8;
}

/* ========================================
   7. INPUTS AND FORM LABELS
   ======================================== */

.tool-card .field-group > label {
    color: var(--home-heading);
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.6;
}

.tool-card .field-hint {
    color: var(--home-hint);
    font-size: 0.88rem;
    line-height: 1.7;
}

.tool-card .field-group input:not([type="color"]):not([type="range"]):not([type="checkbox"]),
.tool-card .field-group textarea,
.tool-card .field-group select {
    color: var(--home-text);
    background: var(--home-control-bg);
    border: 2px solid var(--home-control-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;

    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.025);

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.tool-card .field-group input::placeholder,
.tool-card .field-group textarea::placeholder {
    color: var(--home-hint);
    opacity: 0.78;
}

.tool-card input[type="range"],
.tool-card input[type="checkbox"] {
    accent-color: var(--home-focus);
}

.tool-card .field-group input:focus-visible,
.tool-card .field-group textarea:focus-visible,
.tool-card .field-group select:focus-visible {
    outline: 2px solid var(--home-focus);
    outline-offset: 2px;
    border-color: var(--home-focus);
    box-shadow: 0 0 0 4px rgba(64, 142, 102, 0.12);
}

/* ========================================
   8. CUSTOMIZATION AND HISTORY PANELS
   ======================================== */

.tool-card > .customization,
.tool-card > .history-section {
    color: var(--home-text);
    background: var(--home-inner-bg);
    border: 2px solid var(--home-inner-border);
    border-radius: 14px;

    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.04),
        0 3px 8px rgba(0, 0, 0, 0.025);
}

.tool-card > .customization > summary,
.tool-card > .history-section > summary {
    color: var(--home-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    border-radius: 11px;
    transition: background 160ms ease;
}

.tool-card .history-count {
    color: var(--home-muted);
    font-size: 0.88rem;
    font-weight: 650;
}

.tool-card .history-content,
.tool-card .history-empty {
    color: var(--home-muted);
    font-size: 0.95rem;
    line-height: 1.8;
}

/* ========================================
   9. QR PREVIEW
   ======================================== */

:root[data-theme="light"] .tool-card .qr-preview {
    background: linear-gradient(135deg, #F4F6E9 0%, #F8F5E8 100%);
    border: 2px solid #C4D2B9;
    border-radius: 16px;

    box-shadow:
        inset 0 2px 8px rgba(64, 91, 53, 0.06),
        0 4px 0 rgba(100, 130, 83, 0.08);
}

:root[data-theme="dark"] .tool-card .qr-preview {
    background: linear-gradient(135deg, #1C302B 0%, #273733 100%);
    border: 2px solid #527366;
    border-radius: 16px;

    box-shadow:
        inset 0 2px 9px rgba(0, 0, 0, 0.20),
        0 4px 0 rgba(15, 35, 29, 0.45);
}

.tool-card .preview-heading .section-label {
    color: var(--home-muted);
}

.tool-card .preview-status {
    color: var(--home-muted);
    font-size: 0.88rem;
    font-weight: 650;
}

.tool-card .preview-message {
    color: var(--home-muted);
    font-size: 0.92rem;
    line-height: 1.7;
}

.tool-card .preview-placeholder,
.tool-card .scanner-placeholder {
    color: var(--home-muted);
}

.tool-card .preview-placeholder p,
.tool-card .scanner-placeholder p {
    color: var(--home-heading);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.6;
}

.tool-card .preview-placeholder span,
.tool-card .scanner-placeholder span {
    color: var(--home-hint);
    font-size: 0.9rem;
    line-height: 1.7;
}

.tool-card .placeholder-symbol {
    color: var(--home-muted);
}

/* ========================================
   10. SCANNER PREVIEW
   ======================================== */

:root[data-theme="light"] .tool-card .scanner-preview {
    background: linear-gradient(135deg, #E1F0E8 0%, #EDF3E6 100%);
    border: 2px solid #B5D4C7;
    border-radius: 16px;

    box-shadow:
        inset 0 2px 8px rgba(44, 105, 81, 0.06),
        0 4px 0 rgba(65, 135, 118, 0.08);
}

:root[data-theme="dark"] .tool-card .scanner-preview {
    background: linear-gradient(135deg, #1C3538 0%, #273D45 100%);
    border: 2px solid #507D7B;
    border-radius: 16px;

    box-shadow:
        inset 0 2px 9px rgba(0, 0, 0, 0.20),
        0 4px 0 rgba(15, 35, 40, 0.45);
}

:root[data-theme="light"] .tool-card .scanner-frame {
    color: #357C5A;
}

:root[data-theme="dark"] .tool-card .scanner-frame {
    color: #8DD5B6;
}

.tool-card .scanner-center {
    color: var(--home-heading);
}

/* ========================================
   11. DOWNLOAD BUTTONS
   ======================================== */

.tool-card .button-primary {
    color: #FFFFFF;
    background: var(--home-primary-bg);
    border: 2px solid var(--home-primary-border);
    border-bottom: 4px solid var(--home-primary-bottom);
    border-radius: 11px;
    font-size: 0.98rem;
    font-weight: 700;

    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.15),
        0 4px 0 rgba(20, 65, 42, 0.10),
        0 6px 12px rgba(20, 65, 42, 0.08);

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}

.tool-card .button-secondary {
    color: var(--home-secondary-text);
    background: var(--home-secondary-bg);
    border: 2px solid var(--home-secondary-border);
    border-bottom-width: 4px;
    border-radius: 11px;
    font-size: 0.98rem;
    font-weight: 650;

    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.22),
        0 4px 0 rgba(30, 65, 46, 0.06);

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}

.tool-card .download-note {
    color: var(--home-hint);
    font-size: 0.88rem;
    line-height: 1.7;
}

.tool-card .history-option {
    color: var(--home-heading);
    font-size: 0.96rem;
    font-weight: 600;
}

/* ========================================
   12. PRIVACY NOTE AND SCAN RESULTS
   ======================================== */

:root[data-theme="light"] .tool-card .privacy-note {
    color: var(--home-text);
    background: linear-gradient(135deg, #E4F0E4 0%, #F0F3E7 100%);
    border: 1px solid #BED4BF;
    border-left: 4px solid #629573;
    border-radius: 10px;
}

:root[data-theme="dark"] .tool-card .privacy-note {
    color: var(--home-text);
    background: linear-gradient(135deg, #263E35 0%, #293F40 100%);
    border: 1px solid #4C7564;
    border-left: 4px solid #7BB99A;
    border-radius: 10px;
}

.tool-card .privacy-note p {
    color: var(--home-muted);
    font-size: 0.93rem;
    line-height: 1.8;
}

.tool-card .privacy-note strong {
    color: var(--home-heading);
}

.tool-card .scan-result {
    color: var(--home-text);
    background: var(--home-inner-bg);
    border-color: var(--home-inner-border);
    border-radius: 12px;
}

.tool-card .scan-result pre {
    color: var(--home-text);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* ========================================
   13. ADDITIONAL FEATURES ON HOMEPAGE
   ======================================== */

:root[data-theme="light"] .info-section .feature-card {
    color: #29372F;
    background: linear-gradient(145deg, #F1F6EC 0%, #F8F5EA 100%);
    border: 2px solid #C6D8C9;
    border-bottom: 4px solid #9DBCA5;
    border-radius: 16px;

    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.8),
        0 4px 0 rgba(91, 139, 103, 0.08),
        0 8px 16px rgba(49, 92, 63, 0.05);
}

:root[data-theme="dark"] .info-section .feature-card {
    color: #EDF5F0;
    background: linear-gradient(145deg, #243831 0%, #293A3B 100%);
    border: 2px solid #4F7162;
    border-bottom: 4px solid #648B74;
    border-radius: 16px;

    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.04),
        0 4px 0 rgba(0, 0, 0, 0.14),
        0 8px 16px rgba(0, 0, 0, 0.12);
}

.info-section .feature-card h3 {
    color: var(--home-heading);
    font-size: 1.12rem;
    line-height: 1.5;
}

.info-section .feature-card p,
.info-section .info-heading p {
    color: var(--home-muted);
    font-size: 0.98rem;
    line-height: 1.8;
}

/* ========================================
   14. HOVER EFFECTS — SUBTLE 3D
   ======================================== */

@media (hover: hover) {
    .tool-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--home-card-hover-shadow);
    }

    .tool-card .type-button:hover {
        transform: translateY(-2px);
        border-color: var(--home-focus);

        box-shadow:
            inset 0 1px 3px rgba(255, 255, 255, 0.20),
            0 5px 0 rgba(32, 66, 46, 0.10);
    }

    .tool-card .type-button.active:hover,
    .tool-card .type-button[aria-pressed="true"]:hover {
        border-color: var(--home-focus);
    }

    .tool-card .button-primary:hover,
    .tool-card .button-secondary:hover {
        transform: translateY(-2px);

        box-shadow:
            inset 0 1px 3px rgba(255, 255, 255, 0.18),
            0 5px 0 rgba(20, 65, 42, 0.12),
            0 8px 16px rgba(20, 65, 42, 0.10);
    }

    .info-section .feature-card {
        transition: transform 180ms ease, box-shadow 180ms ease;
    }

    .info-section .feature-card:hover {
        transform: translateY(-3px);
    }
}

/* ========================================
   15. ACCESSIBILITY AND MOBILE
   ======================================== */

.tool-card :is(button, a, summary):focus-visible {
    outline: 2px solid var(--home-focus);
    outline-offset: 3px;
}

.tool-card button:disabled {
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .tool-card {
        border-radius: 18px;
        font-size: 1rem;
    }

    .tool-card .card-heading h2 {
        font-size: 1.3rem;
    }

    .tool-card .type-button {
        min-height: 64px;
        padding: 10px 6px;
        font-size: 0.94rem;
    }

    .tool-card .type-grid {
        padding: 8px;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tool-card,
    .tool-card .type-button,
    .tool-card .button-primary,
    .tool-card .button-secondary,
    .info-section .feature-card {
        transition: none;
    }
}

/* ========================================
   DARK THEME — High-contrast supporting text
   ======================================== */

:root[data-theme="dark"] .tool-card :is(
    .section-label,
    .field-hint,
    .type-description,
    .scanner-description,
    .preview-status,
    .preview-message,
    .preview-placeholder span,
    .scanner-placeholder span,
    .download-note,
    .history-count,
    .history-content,
    .history-empty,
    .scanner-status,
    .history-item-date,
    .history-item-payload
),
:root[data-theme="dark"] .tool-card .card-heading p,
:root[data-theme="dark"] .tool-card .privacy-note p,
:root[data-theme="dark"] .tool-card .scan-result,
:root[data-theme="dark"] .tool-card .scan-result pre,
:root[data-theme="dark"] .info-section .feature-card p,
:root[data-theme="dark"] .info-section .info-heading p {
    color: #E0E7E9;
}

:root[data-theme="dark"] .tool-card .history-count,
:root[data-theme="dark"] .tool-card .field-hint,
:root[data-theme="dark"] .tool-card .preview-placeholder span,
:root[data-theme="dark"] .tool-card .scanner-placeholder span,
:root[data-theme="dark"] .tool-card .download-note {
    color: #D2DDE1;
}

/* ---------- Reset appearance options ---------- */
.reset-options-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.reset-options-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--danger, #c83c55);
    border-radius: 999px;
    background: transparent;
    color: var(--danger, #c83c55);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.reset-options-button:hover,
.reset-options-button:focus-visible {
    background: color-mix(in srgb, var(--danger, #c83c55) 14%, transparent);
}

.reset-options-button:focus-visible {
    outline: 2px solid var(--danger, #c83c55);
    outline-offset: 2px;
}

.reset-options-button:active {
    transform: scale(0.97);
}

/* ========================================
   Touch color picker (js/color-picker.js)
   ======================================== */

   .cp-native-hidden {
    display: none !important;
}

.cp-swatch {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    padding: 0;

    border: 2px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.cp-swatch:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

html.cp-open {
    overflow: hidden;
}

.cp-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    background: rgba(0, 0, 0, 0.55);
}

.cp-overlay[hidden] {
    display: none;
}

.cp-sheet {
    width: 100%;
    max-width: 420px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));

    display: flex;
    flex-direction: column;
    gap: 16px;

    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

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

.cp-done {
    padding: 8px 18px;

    background: var(--accent);
    color: #0b0c12;
    border: 0;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
}

.cp-area {
    position: relative;
    height: 200px;

    border-radius: var(--radius-sm);
    touch-action: none;
    cursor: crosshair;
}

.cp-area-white,
.cp-area-black {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.cp-area-white {
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.cp-area-black {
    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

.cp-thumb,
.cp-hue-thumb {
    position: absolute;
    width: 26px;
    height: 26px;

    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.4);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cp-hue {
    position: relative;
    height: 22px;

    border-radius: 11px;
    background: linear-gradient(to right,
        #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
    touch-action: none;
}

.cp-hue-thumb {
    top: 50%;
}

.cp-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cp-preview {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;

    border: 2px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

.cp-hex {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;

    background: var(--surface-soft);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 16px; /* 16px stops iOS from zooming on focus */
    text-transform: uppercase;
}

.cp-presets {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.cp-preset {
    aspect-ratio: 1;
    padding: 0;

    border: 2px solid var(--border-strong);
    border-radius: 50%;
    cursor: pointer;
}