/* Dùng chung bảng màu với qr-manager để các công cụ trong /apps nhìn đồng bộ. */
:root {
    --color-primary: #50AFA4;
    --color-primary-hover: #3D9B90;
    --color-light: #E8F6F2;
    --color-bg: #F6FAF9;
    --color-surface: #FFFFFF;
    --color-border: #DCE9E6;
    --color-text: #253638;
    --color-muted: #738487;
    --color-danger: #D65353;
    --color-warning: #D39A22;
    --color-success: #10B981;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    padding: 1rem;
}

.hidden { display: none !important; }

/* Nhắc đăng nhập — hiện tại chỗ, không chiếm cả trang, để người dùng vẫn thấy công cụ */
.login-prompt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--color-light);
    border: 1px solid var(--color-primary);
    border-radius: 0.5rem;
    padding: 0.875rem;
    margin-top: 0.75rem;
}
.login-prompt > i {
    font-size: 1.25rem;
    color: var(--color-primary);
    flex-shrink: 0;
}
.login-prompt-body { flex: 1; min-width: 12rem; }
.login-prompt-body strong { display: block; font-size: 0.9375rem; }
.login-prompt-body p { font-size: 0.8125rem; color: var(--color-muted); margin-top: 0.125rem; }
.login-prompt .btn { flex-shrink: 0; }

/* Khung chính */
.app-container {
    max-width: 34rem;
    margin: 0 auto;
}
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.app-header h1 { font-size: 1.25rem; font-weight: 600; }
.quota {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-muted);
    background: var(--color-light);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
}
.quota.exhausted { color: var(--color-danger); background: #FBECEC; }

.privacy-note {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    margin-bottom: 1rem;
}
.privacy-note > i { color: var(--color-primary); margin-top: 0.15rem; flex: none; }
/* Cả câu phải nằm trong một thẻ span: chữ trần và <strong> đặt thẳng trong
   khung flex sẽ bị tách thành nhiều cột, vỡ câu văn. */
.privacy-note > span { flex: 1; min-width: 0; }
.privacy-note strong { color: var(--color-text); }

/* Vùng thả tệp */
.dropzone {
    background: var(--color-surface);
    border: 2px dashed var(--color-border);
    border-radius: 0.75rem;
    padding: 2.25rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.dropzone:hover,
.dropzone:focus-visible,
.dropzone.dragover {
    border-color: var(--color-primary);
    background: var(--color-light);
    outline: none;
}
.dropzone > i { font-size: 2rem; color: var(--color-primary); margin-bottom: 0.75rem; }
.dropzone-title { font-weight: 500; }
.dropzone-sub { font-size: 0.875rem; color: var(--color-muted); }
.dropzone-limit { font-size: 0.75rem; color: var(--color-muted); margin-top: 0.5rem; }

/* Thẻ hiển thị tệp đã chọn */
.file-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.75rem;
}
.file-icon { font-size: 1.5rem; color: var(--color-danger); }
.file-meta { flex: 1; min-width: 0; }
.file-name {
    font-size: 0.875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-size { font-size: 0.75rem; color: var(--color-muted); }
.btn-icon {
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    border-radius: 0.25rem;
}
.btn-icon:hover { color: var(--color-danger); background: var(--color-light); }

/* Tuỳ chọn OCR */
.checkbox-row {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    margin: 1rem 0;
    font-size: 0.875rem;
    cursor: pointer;
}
.checkbox-row input { margin-top: 0.25rem; flex-shrink: 0; }
.checkbox-row small {
    display: block;
    color: var(--color-muted);
    font-size: 0.75rem;
    margin-top: 0.125rem;
}

/* Nút */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background-color: var(--color-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background-color: var(--color-primary-hover); }
.btn-outline {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}
.btn-outline:hover:not(:disabled) { background: var(--color-light); border-color: var(--color-primary); }
.btn-block { display: flex; width: 100%; margin-top: 0.5rem; }

/* Đang xử lý */
#step-working { text-align: center; padding: 2.5rem 1rem; }
.spinner {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 1rem;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2.4s; }
}
.working-title { font-weight: 500; }
.working-sub { font-size: 0.8125rem; color: var(--color-muted); margin-top: 0.25rem; }

/* Kết quả */
#step-done { text-align: center; padding: 1.5rem 0; }
.result-icon { font-size: 2.5rem; color: var(--color-success); margin-bottom: 0.75rem; }
.result-title { font-weight: 600; }
.result-meta { font-size: 0.8125rem; color: var(--color-muted); margin: 0.25rem 0 1rem; }
.result-hint {
    font-size: 0.75rem;
    color: var(--color-warning);
    margin-top: 1rem;
    text-align: left;
}

/* Lỗi */
.error-box {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    background: #FBECEC;
    border: 1px solid #F0C9C9;
    color: var(--color-danger);
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-size: 0.875rem;
    margin-top: 1rem;
}