/* features.css - authentication, purchase credits modal, voucher redemption, research mode, viz/history shared rules */
/* ============================================================
   AUTHENTICATION UI STYLES
   ============================================================ */

/* USER INFO BAR (Top Left) */
.user-info-bar {
    position: fixed;
    top: 80px;  /* Moved below help icon (50px + 30px spacing) */
    right: 20px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.user-email {
    font-size: 0.9rem;
    color: #2d3748;
    font-weight: 500;
}

.credits-badge {
    background: linear-gradient(135deg, #DA291C 0%, #FF6B6B 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.credits-badge:hover {
    transform: scale(1.05);
}

.pending-badge {
    background: #ed8936;
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.auth-button {
    background: #DA291C;
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-button:hover {
    background: #B8231A;
    transform: translateY(-1px);
}

.auth-button.secondary {
    background: #4A5568;
}

.auth-button.secondary:hover {
    background: #2D3748;
}

.logout-button {
    background: transparent;
    color: #718096;
    border: 1px solid #E2E8F0;
    padding: 6px 14px;
    border-radius: 15px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logout-button:hover {
    background: #F7FAFC;
    border-color: #CBD5E0;
    color: #2D3748;
}

/* MODAL OVERLAY */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    animation: fadeIn 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* MODAL CONTAINER */
.auth-modal {
    background: white;
    border-radius: 20px;
    padding: 40px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: slideUp 0.3s ease;
    position: relative;
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(30px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #A0AEC0;
    cursor: pointer;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: #F7FAFC;
    color: #2D3748;
}

.modal-header {
    text-align: center;
    margin-bottom: 30px;
}

.modal-title {
    font-size: 1.8rem;
    color: #2D3748;
    margin-bottom: 8px;
    font-weight: 700;
}

.modal-subtitle {
    font-size: 0.95rem;
    color: #718096;
}

/* FORM ELEMENTS */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    color: #4A5568;
    font-weight: 600;
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #E2E8F0;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: #F7FAFC;
}

.form-input:focus {
    outline: none;
    border-color: #DA291C;
    background: white;
}

.form-input::placeholder {
    color: #A0AEC0;
}

.submit-button {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #DA291C 0%, #B8231A 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(218, 41, 28, 0.3);
}

.submit-button:active {
    transform: translateY(0);
}

.submit-button:disabled {
    background: #CBD5E0;
    cursor: not-allowed;
    transform: none;
}

.modal-footer {
    text-align: center;
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #E2E8F0;
}

.modal-footer-text {
    color: #718096;
    font-size: 0.9rem;
}

.modal-link {
    color: #DA291C;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}

.modal-link:hover {
    color: #B8231A;
    text-decoration: underline;
}

/* ERROR/SUCCESS MESSAGES */
.message-box {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    display: none;
}

.message-box.error {
    background: #FFF5F5;
    color: #C53030;
    border: 1px solid #FEB2B2;
}

.message-box.success {
    background: #F0FFF4;
    color: #2F855A;
    border: 1px solid #9AE6B4;
}

.message-box.active {
    display: block;
}

/* PASSWORD REQUIREMENTS */
.password-requirements {
    font-size: 0.8rem;
    color: #718096;
    margin-top: 6px;
    line-height: 1.6;
}

/* MOBILE RESPONSIVE */        
/* ============================================================
   PURCHASE CREDITS MODAL
   ============================================================ */

.purchase-modal {
    max-width: 700px;
    width: 90%;
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.package-card {
    background: #F7FAFC;
    border: 3px solid #E2E8F0;
    border-radius: 15px;
    padding: 25px 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.package-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #DA291C, #FF6B6B);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.package-card:hover {
    border-color: #DA291C;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(218, 41, 28, 0.15);
}

.package-card:hover::before {
    transform: scaleX(1);
}

.package-card.popular {
    border-color: #DA291C;
    background: linear-gradient(135deg, #FFF5F5 0%, #F7FAFC 100%);
}

.package-card.popular .popular-badge {
    display: block;
}

.popular-badge {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #DA291C, #FF6B6B);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.package-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: #DA291C;
    margin: 10px 0;
    line-height: 1;
}

.package-credits {
    font-size: 1.1rem;
    color: #4A5568;
    font-weight: 600;
    margin: 10px 0;
}

.package-value {
    font-size: 0.85rem;
    color: #718096;
    margin: 8px 0 15px 0;
}

.package-buy-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #DA291C 0%, #B8231A 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.package-buy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(218, 41, 28, 0.3);
}

.package-buy-btn:active {
    transform: translateY(0);
}

.purchase-note {
    text-align: center;
    color: #718096;
    font-size: 0.85rem;
    margin-top: 20px;
    padding: 15px;
    background: #F7FAFC;
    border-radius: 10px;
    border-left: 4px solid #4299E1;
}

.purchase-note strong {
    color: #2D3748;
}

@media (max-width: 600px) {
    .packages-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .package-price {
        font-size: 2rem;
    }
}

/* ============================================================================
   VOUCHER REDEMPTION MODAL
   ============================================================================ */

#voucherModal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease;
}

#voucherModal .modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 0;
    width: 90%;
    max-width: 450px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.3s ease;
}

#voucherModal .modal-header {
    background: linear-gradient(135deg, #DA291C 0%, #c41e14 100%);
    color: white;
    padding: 20px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#voucherModal .modal-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

#voucherModal .close {
    color: white;
    font-size: 32px;
    font-weight: 300;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#voucherModal .close:hover {
    transform: rotate(90deg);
}

#voucherModal .modal-body {
    padding: 30px;
}

#voucherModal .voucher-input-group {
    margin-bottom: 20px;
}

#voucherModal .voucher-input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

#voucherModal .voucher-input-wrapper {
    position: relative;
    display: flex;
    gap: 10px;
    /* Without this the row cannot break and the Redeem button is pushed off the
       right edge of a phone (measured: right edge at 405px on a 390px screen).
       Voucher redemption is how every workshop participant gets their credits. */
    flex-wrap: wrap;
}

#voucherModal #voucherCodeInput {
    flex: 1;
    /* A flex item defaults to min-width:auto, i.e. it refuses to shrink below its
       content width. The monospace + letter-spaced "CRED-XXXXXXXX" placeholder is
       what made this row wider than the modal. */
    min-width: 0;
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: border-color 0.3s ease;
}

#voucherModal #voucherCodeInput:focus {
    outline: none;
    border-color: #DA291C;
}

#voucherModal .redeem-button {
    padding: 12px 24px;
    background: linear-gradient(135deg, #DA291C 0%, #c41e14 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

#voucherModal .redeem-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(218, 41, 28, 0.3);
}

#voucherModal .redeem-button:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

#voucherModal .voucher-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

#voucherModal .voucher-info ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

#voucherModal .voucher-info li {
    margin: 5px 0;
}

#voucherMessage {
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    display: none;
}

#voucherMessage.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
}

#voucherMessage.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
}

.voucher-btn {
    padding: 6px 12px;
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.voucher-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

@media (max-width: 768px) {
    /* The account bar is a fixed, right-anchored, NON-wrapping flex row. Logged
       in it holds six children (email, credits, Redeem Code, History, Admin,
       Logout), which measured 591px wide on a 390px phone: the email sat
       entirely off-screen (right edge at -48px) and the credits badge was
       mostly clipped, so a participant could see neither who they were logged
       in as nor how many credits they had left. Being fixed, it also sat on top
       of the seed stage's instructions.

       On phones it becomes a normal full-width block at the top of the page
       that wraps -- which both un-clips it and stops it covering content. It is
       the first element in <body>, so static flow puts it above the header
       where a mobile account bar belongs. */
    .user-info-bar {
        position: static;
        width: 100%;
        border-radius: 0;
        padding: 10px 12px;
        gap: 8px;
        font-size: 0.8rem;
        flex-wrap: wrap;
        justify-content: center;
        background: rgba(255, 255, 255, 0.85);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }

    /* The three view containers set display/gap inline, so wrapping and
       centering have to be declared here to take effect. */
    #loggedInView,
    #loggedOutView,
    #pendingView {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px !important;
        max-width: 100%;
    }

    /* A long address must wrap rather than push the row wider than the screen. */
    .user-email {
        max-width: 100%;
        overflow-wrap: anywhere;
        flex-basis: 100%;
        text-align: center;
    }

    /* Every control in this bar was under the 44px minimum tap target
       (History and Admin measured 27px, Logout 29px, Redeem Code 42px). */
    .credits-badge,
    .voucher-btn,
    .history-btn,
    .account-btn,
    .admin-panel-btn,
    .logout-button,
    .auth-button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* The badge's markup is `<span id="creditsCount">0</span> Credits`, and a
           flex container drops the whitespace between those two items -- without
           this gap it reads "25Credits". */
        gap: 4px;
        font-size: 0.8rem;
        padding: 6px 14px;
        touch-action: manipulation;
    }

    .auth-modal {
        padding: 30px 25px;
        max-width: 95%;
    }

    .modal-title {
        font-size: 1.5rem;
    }

    /* Remaining sub-44px controls found by the 390x844 / 360x740 sweep:
       the modal close X (35px), the login/register submit (42px) and the
       voucher Redeem button. */
    .modal-close {
        width: 44px;
        height: 44px;
    }

    .submit-button,
    #voucherModal .redeem-button {
        min-height: 44px;
        touch-action: manipulation;
    }

    /* Stacked by flex-wrap on a narrow screen, Redeem should span the row
       rather than sit as a stub under the input. */
    #voucherModal .redeem-button {
        flex: 1 1 100%;
    }
}

/* ============================================================
   RESEARCH MODE STYLES
   ============================================================ */

.research-mode-section {
    margin: 20px auto;
    max-width: 800px;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.research-mode-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: white;
    gap: 12px;
}

.research-mode-checkbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: #28a745;
}

.checkbox-label {
    font-size: 1rem;
    line-height: 1.4;
}

.checkbox-label strong {
    font-weight: 700;
}

/* Research Modal Specific Styles */
.research-modal-content {
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.research-predictions-display {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    border-left: 4px solid #667eea;
}

.research-predictions-display h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 1.1rem;
}

.prediction-row {
    display: flex;
    align-items: center;
    margin: 10px 0;
    gap: 10px;
}

.prediction-label {
    font-weight: 600;
    color: #555;
    min-width: 60px;
}

.prediction-value {
    flex: 1;
    color: #333;
    font-weight: 500;
}

.confidence-badge {
    background: #28a745;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-size: 0.95rem;
}

.char-counter {
    float: right;
    color: #666;
    font-size: 0.85rem;
    font-weight: 400;
}

.form-input, .form-select {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.form-input:focus, .form-select:focus {
    outline: none;
    border-color: #667eea;
}

.form-select {
    cursor: pointer;
    background-color: white;
}

.research-modal-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.cancel-button {
    flex: 1;
    padding: 12px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.cancel-button:hover {
    background: #5a6268;
}

.submit-button {
    flex: 2;
    padding: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.submit-button:hover {
    transform: translateY(-2px);
}

.submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

#researchMessage {
    margin-top: 15px;
    padding: 12px;
    border-radius: 6px;
    font-size: 0.95rem;
    text-align: center;
}

#researchMessage.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

#researchMessage.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@media (max-width: 768px) {
    .research-mode-section {
        margin: 15px 10px;
        padding: 12px;
    }
    
    .checkbox-label {
        font-size: 0.9rem;
    }
    
    .research-modal-content {
        max-width: 95%;
        padding: 20px;
    }
    
    .research-modal-actions {
        flex-direction: column;
    }
}

.research-mode-info {
    margin-top: 12px;
    padding: 12px 15px;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 6px;
}

.research-mode-info p {
    margin: 0;
    color: #856404;
    font-size: 0.95rem;
    line-height: 1.5;
}

.research-mode-info strong {
    color: #664d03;
}

/* Modal base styles - hidden by default */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
}

.modal.active {
    display: block;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 30px;
    border: 1px solid #888;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Research Modal Image Preview */
.research-image-preview {
    text-align: center;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.research-image-preview img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 6px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   TASK 5 ADDITIONS - append to the end of styles.css
   ============================================================================ */

/* ------------------------------------------------------------------
   Visualisation image sections inside a result card (Level 2+)
   ------------------------------------------------------------------ */

.viz-section {
    margin-top: 14px;
    border-top: 1px solid #e2e8f0;
    padding-top: 12px;
}

.viz-label {
    font-size: 0.75rem;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    font-weight: 600;
}

.viz-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    object-fit: contain;
}

/* ------------------------------------------------------------------
   History panel
   ------------------------------------------------------------------ */

.history-panel {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.history-panel-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.history-loading,
.history-empty {
    color: #a0aec0;
    font-size: 0.85rem;
    text-align: center;
    padding: 8px 0;
}

.history-item {
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
}

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

.history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.history-filename {
    font-size: 0.82rem;
    font-weight: 600;
    color: #2d3748;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

.history-date {
    font-size: 0.75rem;
    color: #a0aec0;
    white-space: nowrap;
    flex-shrink: 0;
}

.history-item-body {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.history-tag {
    font-size: 0.72rem;
    background: #edf2f7;
    color: #4a5568;
    border-radius: 4px;
    padding: 2px 6px;
    font-weight: 600;
}

.history-pred {
    font-size: 0.78rem;
    color: #4a5568;
}

.history-sep {
    color: #cbd5e0;
    font-size: 0.78rem;
}

.history-badge {
    font-size: 0.68rem;
    background: #DA291C;
    color: white;
    border-radius: 3px;
    padding: 1px 5px;
    font-weight: 700;
    margin-left: 2px;
}

.history-badge.gradcam {
    background: #6b46c1;
}

@media (max-width: 768px) {
    .history-filename {
        max-width: 50%;
    }
}

/* ============================================================================
   TASK 5 ADDITIONS - append to the end of styles.css
   ============================================================================ */

/* ------------------------------------------------------------------
   Visualisation image sections inside a result card (Level 2+)
   ------------------------------------------------------------------ */

.viz-section {
    margin-top: 14px;
    border-top: 1px solid #e2e8f0;
    padding-top: 12px;
}

.viz-label {
    font-size: 0.75rem;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    font-weight: 600;
}

.viz-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    object-fit: contain;
}

/* ------------------------------------------------------------------
   History panel
   ------------------------------------------------------------------ */

.history-panel {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.history-panel-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.history-loading,
.history-empty {
    color: #a0aec0;
    font-size: 0.85rem;
    text-align: center;
    padding: 8px 0;
}

.history-item {
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
}

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

.history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.history-filename {
    font-size: 0.82rem;
    font-weight: 600;
    color: #2d3748;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 55%;
    margin-right: 8px;
}

.history-date {
    font-size: 0.75rem;
    color: #a0aec0;
    white-space: nowrap;
    flex-shrink: 0;
}

.history-item-body {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.history-tag {
    font-size: 0.72rem;
    background: #edf2f7;
    color: #4a5568;
    border-radius: 4px;
    padding: 2px 6px;
    font-weight: 600;
}

.history-pred {
    font-size: 0.78rem;
    color: #4a5568;
}

.history-sep {
    color: #cbd5e0;
    font-size: 0.78rem;
}

.history-badge {
    font-size: 0.68rem;
    background: #DA291C;
    color: white;
    border-radius: 3px;
    padding: 1px 5px;
    font-weight: 700;
    margin-left: 2px;
}

.history-badge.gradcam {
    background: #6b46c1;
}

.history-direction {
    font-weight: 600;
    color: #c53030;
}

@media (max-width: 768px) {
    .history-filename {
        max-width: 45%;
    }
}

/* ============================================================================
   REFERENCE PHOTO IN RESULT CARD
   ============================================================================ */

/* The "Bloody Object" prediction-value gets flex layout to hold name + photo */
.prediction-value--object {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.prediction-object-name {
    flex: 1;
    min-width: 0;
}

/* Human-readable display name */
.ref-display-name {
    font-weight: 600;
    color: #2d3748;
}

/* Raw class label in muted parentheses */
.ref-raw-label {
    font-size: 0.82em;
    color: #a0aec0;
    font-weight: 400;
}

/* Wrapper keeps the photo/placeholder to the right */
.ref-photo-wrapper {
    flex-shrink: 0;
}

/* Reference thumbnail -- clickable to open lightbox */
.ref-photo-thumb {
    height: 90px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    display: block;
}

.ref-photo-thumb:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    transform: scale(1.04);
}

/* Placeholder text when no photo is available */
.ref-photo-missing {
    display: inline-block;
    font-size: 0.75rem;
    color: #a0aec0;
    font-style: italic;
    white-space: nowrap;
}

/* Responsive: on narrow screens stack name above photo */
@media (max-width: 480px) {
    .prediction-value--object {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .ref-photo-thumb {
        height: 70px;
    }
}

/* ===================================================================== */
/* Object-candidate distribution: pie + color-keyed reference photos     */
/* Names appear once, beneath each photo; the winner is bolded and gets a */
/* thicker border whose color matches its pie slice. No percentages.      */
/* ===================================================================== */
.type-distribution {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.type-pie-wrap {
    flex-shrink: 0;
    text-align: center;
}

.type-pie {
    width: 116px;
    height: 116px;
    display: block;
}

.type-pie-caption {
    font-size: 11px;
    color: #a0aec0;
    margin-top: 2px;
}

.type-cand-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.type-cand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 78px;
}

/* Photo frame -- border-color is set inline to match the pie slice */
.type-cand-frame {
    height: 74px;
    width: 74px;
    border: 1.5px solid #cbd5e0;
    border-radius: 6px;
    background: #f7fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.type-cand--winner .type-cand-frame {
    border-width: 3px;
}

.type-cand-photo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    display: block;
}

.type-cand-missing {
    font-size: 0.7rem;
    color: #a0aec0;
    font-style: italic;
    text-align: center;
}

.type-cand-name {
    font-size: 0.8rem;
    color: #4a5568;
    text-align: center;
    line-height: 1.2;
}

.type-cand--winner .type-cand-name {
    font-weight: 600;
    color: #2d3748;
}

@media (max-width: 480px) {
    .type-distribution { gap: 12px; }
    .type-pie { width: 96px; height: 96px; }
    .type-cand { width: 66px; }
    .type-cand-frame { height: 62px; width: 62px; }
}

/* ============================================================================
   SEED STAGE CONTROLS  (.btn / .btn-primary)
   ============================================================================
   These classes were used by 13 buttons in templates/index.html's seed stage --
   the mode switch, the five Clear buttons, Threshold, Classify, Cancel, the
   overlay toggles and the Refine button -- and were defined in NO stylesheet.
   They rendered as raw browser-default buttons: ~13px text in roughly 20px-tall
   boxes, i.e. under half Apple's 44pt minimum tap target, on the one screen a
   workshop participant spends all their time in.

   The shape deliberately matches .mode-btn / .browse-btn in base.css so the
   seed stage looks like the rest of the app rather than a second design.

   font-size MUST stay >= 16px: iOS Safari zooms the whole page in when a
   control smaller than that receives focus, which throws off the drawing
   canvas' coordinates.
   ============================================================================ */

.seed-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
}

/* Resolution guard banner (app-resolution-guard.js).
   Amber, not red: this is advice, never a block. max-width keeps the two
   sentences readable on a phone without the box running edge to edge, and
   text-align:left stops a wrapped sentence looking like a poem. */
.res-guard {
    max-width: 560px;
    margin: 10px auto;
    padding: 12px 14px;
    background: #fffbeb;
    border: 2px solid #f6c343;
    border-radius: 10px;
    text-align: left;
}

.res-guard-text {
    font-size: 15px;
    line-height: 1.45;
    color: #744210;
}

/* The live readout of whatever box is currently drawn. Hidden until there is
   one, so the banner does not reserve an empty line. */
.res-guard-live {
    display: none;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #744210;
}

.res-guard-live.ok {
    color: #22543d;
}

/* The banner's own buttons wrap like every other seed row; on a phone they
   take half the width each rather than leaving a ragged row (see the .btn
   rule below, which they inherit). */
.res-guard .seed-btn-row {
    margin-bottom: 0;
    justify-content: flex-start;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #f7fafc 0%, #e2e8f0 100%);
    color: #2d3748;
    border: 2px solid #cbd5e0;
    border-radius: 25px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* No 300ms double-tap-to-zoom delay, and no grey flash on tap. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* hover:hover keeps the lift off touch screens, where a :hover state STICKS
   after a tap and leaves the last-pressed button looking permanently active. */
@media (hover: hover) {
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }
}

.btn:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12);
}

.btn:focus-visible {
    outline: 3px solid #DA291C;
    outline-offset: 2px;
}

/* Classify -- the one button that submits. Same red as .browse-btn/.mode-btn.active. */
.btn-primary {
    background: linear-gradient(135deg, #DA291C 0%, #B71C1C 100%);
    color: #ffffff;
    border-color: #DA291C;
}

@media (hover: hover) {
    .btn-primary:hover {
        box-shadow: 0 4px 14px rgba(218, 41, 28, 0.35);
    }
}

/* On a phone the six Clear buttons wrap to three rows of two. Let them share
   the width evenly instead of leaving a ragged last row. */
@media (max-width: 480px) {
    .btn {
        flex: 1 1 calc(50% - 8px);
        padding: 10px 12px;
    }
    /* Classify stays full width -- it is the action, not one of a set. */
    .seed-btn-row .btn-primary {
        flex-basis: 100%;
    }
}