/* Custom Font Integration */
@font-face {
    font-family: 'Nunito Sans';
    src: url('fonts/Geist-Regular.woff2') format('woff2');
    font-weight: normal;
}

@font-face {
    font-family: 'Gabarito';
    src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: normal;
}

:root {
    --primary-blue: #0062ff;
    --black: #000000;
    --white: #ffffff;
    --light-blue: #f0f6ff;
    --gray: #e0e0e0;
}

/* Scoped Reset: Only affects elements inside the app-card */
.app-card * { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

/* FIX: Removed 'body' selector to stop conflicts with Top Menu and Footer.
   All layout styles are now applied only to the .app-card container.
*/
.app-card {
    font-family: 'Nunito Sans', sans-serif;
    background-color: var(--white);
    color: var(--black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh; /* Prevents overlap with header/footer */
    width: 100%; 
    text-align: center; 
    padding: 40px 0;
}

/* Scoped Tags: These will not affect your Footer or Top Menu */
.app-card header { 
    margin-bottom: 32px; 
    padding: 0 20px; 
}

.app-card h1 { 
    font-family: 'Gabarito', sans-serif; 
    color: var(--primary-blue); 
    letter-spacing: -1px; 
    margin-bottom: 8px; 
    text-align: center; 
    white-space: nowrap; 
    display: block; 
    width: 100%; 
    font-size: clamp(1rem, 6vw, 2.5rem); 
}

.app-card h1 span { color: #000; }

.app-card p.subtitle { 
    font-size: 1rem; 
    opacity: 0.7; 
}

.app-card .upload-container {
    border: 3px dashed var(--primary-blue);
    border-radius: 16px;
    padding: 50px 30px;
    cursor: pointer;
    transition: 0.3s;
    width: 50%; 
    margin: 0 auto;
}

.app-card .upload-container:hover { 
    background-color: var(--light-blue); 
}

.app-card .upload-container svg { 
    color: var(--primary-blue); 
    margin-bottom: 15px; 
}

/* ORIGINAL IDs: Kept exactly as provided */
#fileInput { 
    display: none; 
}

#loadingWrapper {
    display: none;
    margin-top: 24px;
    text-align: center;
}

.spinner-ring {
    display: inline-block;
    width: 48px;
    height: 48px;
    border: 4px solid var(--gray);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner-label {
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-blue);
}

.btn {
    display: inline-block;
    width: calc(100% - 40px); 
    max-width: 400px; 
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 18px;
    font-family: 'Gabarito', sans-serif;
    font-weight: 700;
    margin-top: 24px;
    border-radius: 12px;
    text-decoration: none;
}

#status { 
    margin-top: 20px; 
    font-weight: 600; 
    color: var(--primary-blue); 
}

#previewContainer { 
    width: 50%;
    margin: 30px auto;
    display: none;
    padding: 20px;
    
    background: #000;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-align: center;
}

#previewImage { 
    width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
    display: block;
}

.error {
    color: red;
}


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE LAYER — appended only. No existing selector, class or ID
   was renamed or removed. Every breakpoint is written out explicitly.
   ══════════════════════════════════════════════════════════════════════ */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

.app-card img,
.app-card svg,
#previewImage { max-width: 100%; }

/* ── Extra large screens (≥ 1600px) ─────────────────────────────── */
@media (min-width: 1600px) {
    .app-card .upload-container { width: 40%; max-width: 760px; }
    #previewContainer { width: 40%; max-width: 760px; }
    .btn { max-width: 440px; }
}

/* ── Large desktop / laptop (≤ 1199px) ──────────────────────────── */
@media (max-width: 1199px) {
    .app-card .upload-container { width: 55%; }
    #previewContainer { width: 55%; }
}

/* ── Small laptop / large tablet landscape (≤ 1024px) ───────────── */
@media (max-width: 1024px) {
    .app-card { padding: 36px 0; }
    .app-card .upload-container { width: 65%; padding: 44px 26px; }
    #previewContainer { width: 65%; }
}

/* ── Tablet portrait (≤ 900px) ──────────────────────────────────── */
@media (max-width: 900px) {
    .app-card { padding: 32px 0; min-height: 60vh; }
    .app-card header { margin-bottom: 26px; }
    .app-card .upload-container { width: 75%; padding: 40px 24px; }
    #previewContainer { width: 75%; }
}

/* ── Small tablet (≤ 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
    .app-card { padding: 28px 0; }
    .app-card .upload-container { width: 82%; padding: 36px 20px; }
    #previewContainer { width: 82%; padding: 16px; }
    .btn { padding: 16px; }
}

/* ── Large phone (≤ 640px) ──────────────────────────────────────── */
@media (max-width: 640px) {
    .app-card { padding: 24px 0; min-height: 55vh; }
    .app-card header { margin-bottom: 22px; padding: 0 16px; }
    .app-card h1 { font-size: clamp(1.25rem, 7vw, 2rem); }
    .app-card p.subtitle { font-size: 0.95rem; }
    .app-card .upload-container { width: 90%; padding: 32px 16px; border-width: 2px; }
    .app-card .upload-container svg { width: 44px; height: 44px; }
    #previewContainer { width: 92%; margin: 22px auto; padding: 14px; }
    .btn { width: calc(100% - 32px); padding: 15px; font-size: 0.95rem; }
    #status { padding: 0 16px; font-size: 0.95rem; }
}

/* ── Phone (≤ 480px) ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .app-card { padding: 20px 0; }
    .app-card header { padding: 0 12px; }
    .app-card h1 { font-size: clamp(1.15rem, 7.5vw, 1.7rem); letter-spacing: -0.5px; }
    .app-card p.subtitle { font-size: 0.9rem; }
    .app-card .upload-container { width: 94%; padding: 28px 14px; border-radius: 12px; }
    #previewContainer { width: 94%; padding: 12px; border-radius: 10px; }
    #previewImage { margin-bottom: 10px; }
    .spinner-ring { width: 40px; height: 40px; border-width: 3px; }
    .spinner-label { font-size: 0.85rem; }
    .btn { width: calc(100% - 24px); padding: 14px; border-radius: 10px; }
}

/* ── Small phone (≤ 380px) ──────────────────────────────────────── */
@media (max-width: 380px) {
    .app-card h1 { white-space: normal; font-size: 1.15rem; }
    .app-card .upload-container { width: 96%; padding: 24px 10px; }
    #previewContainer { width: 96%; padding: 10px; }
    .btn { font-size: 0.9rem; padding: 13px; }
}

/* ── Short landscape phones ─────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
    .app-card { min-height: auto; padding: 18px 0; justify-content: flex-start; }
    .app-card header { margin-bottom: 14px; }
    .app-card .upload-container { width: 60%; padding: 22px 16px; }
    #previewContainer { width: 60%; margin: 16px auto; }
}

/* ── Touch devices: bigger tap targets, no sticky hover ─────────── */
@media (hover: none) and (pointer: coarse) {
    .app-card .upload-container { min-height: 120px; }
    .app-card .upload-container:hover { background-color: transparent; }
    .btn { min-height: 48px; }
}

/* ── Respect reduced-motion preference ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .spinner-ring { animation-duration: 2.5s; }
    .app-card .upload-container { transition: none; }
}