/* base.css - reset, layout, header, help, instructions, FAQ, mode selector, upload zone, progress, results, rotation table */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #DA291C 0%, #FFFFFF 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    flex: 1;
}

/* COMPACT HEADER */
.header {
    text-align: center;
    margin-bottom: 10px;
    color: white;
    padding: 15px 0;
}

.header h1 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0;
}

.header p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 5px;
}

/* HELP BUTTON */
.help-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.help-toggle:hover { transform: scale(1.1); background: white; }
.help-toggle.active { background: #DA291C; color: white; }

@media (max-width: 768px) {
    .help-toggle { top: auto; bottom: 20px; right: 20px; width: 44px; height: 44px; font-size: 1.25rem; }
}

/* SCROLLABLE INSTRUCTIONS */
.instructions-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    background: #FFF9E6;
    border-bottom: 3px solid #FFA500;
    z-index: 999;
    transition: max-height 0.4s ease;
}

.instructions-box.active {
    max-height: 600px;
}

.instructions-content {
    padding: 25px;
    max-width: 800px;
    margin: 0 auto;
    max-height: 550px;
    overflow-y: auto;
}

.instructions-box h3 {
    color: #DA291C;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.instructions-list {
    margin: 15px 0;
    padding-left: 0;
    list-style: none;
}

.instructions-list li {
    margin: 12px 0;
    padding-left: 30px;
    position: relative;
    line-height: 1.6;
    font-size: 1rem;
}

.instructions-list li:before {
    content: "-";
    position: absolute;
    left: 0;
    color: #cccccc;
    font-size: 0.8rem;
    opacity: 0.5;
}

.platform-specific {
    background: white;
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
    border-left: 4px solid #DA291C;
}

/* FAQ MODAL */
.faq-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    padding: 20px;
    overflow-y: auto;
}

.faq-modal.active {
    display: flex;
}

.faq-content {
    background: white;
    border-radius: 15px;
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 30px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    position: relative;
}

.faq-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #DA291C;
    padding: 0;
    width: 30px;
    height: 30px;
}

.faq-close:hover {
    transform: scale(1.2);
}

.faq-title {
    color: #DA291C;
    font-size: 1.8rem;
    margin-bottom: 18px;
    font-weight: 800;
}

/* GETTING STARTED PDF DOWNLOAD LINK (sits at the top of the FAQ modal) */
.faq-pdf-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 22px;
    background: linear-gradient(135deg, #fff5f4 0%, #ffe7e4 100%);
    border: 2px solid #DA291C;
    border-radius: 12px;
    text-decoration: none;
    color: #2d3748;
    transition: all 0.2s ease;
}

.faq-pdf-link:hover {
    background: linear-gradient(135deg, #DA291C 0%, #B71C1C 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(218, 41, 28, 0.25);
}

.faq-pdf-link:hover .faq-pdf-sub {
    color: rgba(255, 255, 255, 0.85);
}

.faq-pdf-icon {
    background: #DA291C;
    color: white;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 6px 10px;
    border-radius: 6px;
    flex-shrink: 0;
}

.faq-pdf-link:hover .faq-pdf-icon {
    background: white;
    color: #DA291C;
}

.faq-pdf-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.faq-pdf-title {
    font-weight: 700;
    font-size: 1.05rem;
}

.faq-pdf-sub {
    font-size: 0.85rem;
    color: #718096;
    margin-top: 2px;
}

.faq-section-title {
    color: #2d3748;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.faq-item {
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 15px;
}

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

.faq-question {
    color: #DA291C;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.faq-answer {
    color: #333;
    line-height: 1.7;
    font-size: 0.95rem;
}

/* MODE SELECTOR */
.mode-selector {
    background: white;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    text-align: center;
}

.mode-selector h3 {
    color: #2d3748;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.mode-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.mode-btn {
    background: linear-gradient(135deg, #f7fafc 0%, #e2e8f0 100%);
    color: #2d3748;
    border: 2px solid #cbd5e0;
    padding: 12px 24px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-weight: 600;
}

.mode-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.mode-btn.active {
    background: linear-gradient(135deg, #DA291C 0%, #B71C1C 100%);
    color: white;
    border-color: #DA291C;
}

/* UPLOAD ZONE */
.upload-section {
    background: white;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.drop-zone {
    border: 3px dashed #DA291C;
    border-radius: 15px;
    min-height: 12.5vh;
    padding: 20px 15px;
    text-align: center;
    transition: all 0.3s ease;
    background: linear-gradient(145deg, #f8f9ff, #e8edff);
    cursor: pointer;
}

@media (max-width: 768px) {
    /* Was 50vh, which put a mostly-empty box across half a phone screen and
       pushed everything else below the fold. The whole zone is clickable (see
       app-init.js), so it still has to stay big -- ~30vh is a 250px tap target
       on a 390x844 phone while leaving the page readable. */
    .drop-zone {
        min-height: 30vh;
        padding: 24px 15px;
    }
}

.drop-zone.dragover {
    border-color: #B71C1C;
    background: linear-gradient(145deg, #eef2ff, #dce7ff);
    transform: scale(1.02);
}

.drop-zone-content { color: #DA291C; }
.drop-zone-icon { font-size: 3rem; margin-bottom: 15px; }
.drop-zone h3 { font-size: 1.3rem; margin-bottom: 8px; font-weight: 700; }
.drop-zone p { color: #718096; margin-bottom: 15px; font-size: 0.95rem; }

.browse-btn {
    background: linear-gradient(135deg, #DA291C 0%, #B71C1C 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.browse-btn:hover { transform: translateY(-2px); }

.file-input { display: none; }

/* PROGRESS & RESULTS */
.progress-section, .results-section, .rotation-analysis {
    background: white;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    display: none;
}

.progress-item {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: #f7fafc;
}

.progress-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 1.2rem;
}

.progress-icon.processing { background: #fef5e7; color: #f6ad55; }
.progress-icon.complete { background: #f0fff4; color: #48bb78; }
.progress-icon.error { background: #fed7d7; color: #f56565; }

.progress-details { flex: 1; }
.progress-title { font-weight: 600; margin-bottom: 5px; }
.progress-subtitle { color: #718096; font-size: 0.9rem; }

/* ROTATION ANALYSIS TABLE */
.rotation-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.rotation-table th, .rotation-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
}

.rotation-table th {
    background: #f7fafc;
    font-weight: 600;
    color: #2d3748;
}

.rotation-table tr.best-rotation {
    background: #f0fff4;
    font-weight: 600;
}

.rotation-table tr.best-rotation td {
    color: #38a169;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
}

.results-title { font-size: 1.8rem; color: #2d3748; font-weight: 700; }

.download-buttons { display: flex; gap: 10px; }
.download-btn {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
}

.result-card {
    background: linear-gradient(145deg, #f8f9ff, #e8edff);
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
    border-left: 5px solid #DA291C;
}

/* Image sits full-width at the top — no side-by-side layout */
.result-header {
    display: block;
    margin-bottom: 0;
}

/* FULL-WIDTH IMAGE WITH ARROW OVERLAY */
.image-container {
    position: relative;
    width: 100%;
    line-height: 0; /* collapse whitespace gap under img */
    background: white;
}

.result-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 0;
}

/* Canvas overlay matches rendered image size — sized via JS */
.arrow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Filename + predictions sit below the image */
.result-body {
    padding: 16px 20px 20px 20px;
}

.result-filename {
    font-size: 0.85rem;
    color: #718096;
    font-weight: 500;
    margin-bottom: 14px;
    word-break: break-all;
}

/* Two-column grid for the two prediction tiles */
.predictions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.prediction-item {
    background: white;
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.prediction-label { font-size: 0.8rem; color: #718096; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.prediction-value { font-size: 1.2rem; font-weight: 700; color: #2d3748; margin-bottom: 6px; }
.prediction-confidence { font-size: 0.9rem; color: #DA291C; font-weight: 600; }

.confidence-bar {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    margin-top: 8px;
}
.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, #48bb78, #38a169);
    transition: width 0.8s ease;
}

@media (max-width: 768px) {
    .predictions-grid { grid-template-columns: 1fr; }
    .results-header { flex-direction: column; gap: 15px; }
    .download-buttons { width: 100%; flex-direction: column; }
    /* Download JSON / CSV measured 35px tall -- under the 44px tap minimum. */
    .download-btn { width: 100%; min-height: 44px; touch-action: manipulation; }
}

.footer {
    text-align: center;
    padding: 20px;
    color: white;
    opacity: 0.8;
}

@media (max-width: 768px) {
    /* The extra bottom padding clears the fixed help "?" button, which on phones
       floats over the bottom-right corner and otherwise sits on top of whatever
       control happens to end the page (on the seed stage, Cancel). The button is
       on top so it absorbs the tap rather than mis-firing the control under it,
       but every control still has to be scrollable clear of it. */
    .container { padding: 10px 10px 76px; }
    .header h1 { font-size: 1.8rem; }
    .mode-buttons { flex-direction: column; width: 100%; }
    .mode-btn { width: 100%; }

    /* The FAQ panel's close X measured 30px. It is the only way out of a
       full-screen overlay, so it is the last control that should be fiddly.
       This has to live in a block AFTER .faq-close's 30px declaration above --
       a media query adds no specificity, so source order decides. */
    .faq-close { width: 44px; height: 44px; touch-action: manipulation; }
}

/* PURCHASE CREDITS COMING SOON (replaces the old packages grid) */
.purchase-coming-soon {
    text-align: center;
    padding: 10px 8px 4px 8px;
    color: #2d3748;
    line-height: 1.6;
}

.purchase-coming-soon p {
    margin: 0 0 14px 0;
    font-size: 0.98rem;
}

.purchase-coming-soon-lead {
    font-size: 1.05rem !important;
    font-weight: 600;
    color: #2d3748;
}

.purchase-coming-soon-foot {
    font-size: 0.88rem !important;
    color: #718096;
    margin-top: 18px !important;
}

.purchase-contact-btn {
    display: inline-block;
    margin: 6px 0 8px 0;
    padding: 12px 22px;
    background: linear-gradient(135deg, #DA291C 0%, #B71C1C 100%);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.98rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(218, 41, 28, 0.20);
}

.purchase-contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(218, 41, 28, 0.30);
}