/* ===============================
   RESET + BASE
================================ */
:root{
    --bgTop:#0b1220;
    --bgBot:#09101a;
    --card:rgba(255,255,255,.03);
    --stroke:rgba(255,255,255,.06);
    --txt:#e5e7eb;
    --muted:#9fb3c8;
    --accent:#31e2ff;
    --accent2:#7de9ff;
    --danger:#ff6b6b;
    --radius:.875rem; /* 14px */
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, var(--bgTop) 0%, var(--bgBot) 100%);
    color:var(--txt);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

body {
    min-height: 100vh;
}

body::before{
    content:""; position:fixed; inset:0; pointer-events:none;
    background:
            radial-gradient(60vw 60vw at 70% -10%, rgba(49,226,255,.10), transparent 60%),
            linear-gradient(0deg, transparent 24px, rgba(255,255,255,.03) 25px),
            linear-gradient(90deg, transparent 24px, rgba(255,255,255,.03) 25px);
    background-size:100% 100%, 25px 25px, 25px 25px;
    mask-image:radial-gradient(1200px 800px at 50% 18%, #000 70%, transparent 100%);
}

/* ===============================
   CONTAINER
================================ */
.ocr-container {
    max-width: 68.75rem  /* 1100/16 */;
    margin: 2.5rem  /* 40/16 */ auto;
}

/* ===============================
   HEADINGS
================================ */
h1, h2, h3, h4 {
    color: var(--txt);
}

/* Page title */
h1 {
    margin-bottom: 14px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

/* Section title */
h2 {
    margin-bottom: 14px;
    font-size: 20px;
    font-weight: 600;
}

/* Block / card title */
h3 {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--txt);
}

/* Minor title / label-like */
h4 {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--txt);
}

.card-header {
    padding: 1rem;
    border-bottom: 1px solid rgba(31, 41, 55, 0.95);
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.7));
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.card-header * {
    margin: 0;
}

.subtitle {
    margin-top: 1rem;
    color: var(--muted);
    font-size: 0.875rem  /* 14/16 */;
}

/* ===============================
   FORM
================================ */
.form-wrap {
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--stroke);
    padding: 0;
    box-shadow: 0 12px 60px rgba(2, 8, 23, .55);
    backdrop-filter: blur(6px);
    overflow: hidden;
}

form {
    margin: 0;
    background: #020617;
    position: relative;
    color: #e5e7eb;
    padding: 1.875rem  /* 30/16 */;
}

form::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.45), transparent 60%), radial-gradient(circle at bottom right, rgba(94, 234, 212, 0.35), transparent 55%);
    opacity: 0.8;
    pointer-events: none;
}

.upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}

.upload-box {
    background: linear-gradient(180deg, #020617, #020617) padding-box,
    linear-gradient(135deg, #1e293b, #0f172a) border-box;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 18px;
}

.upload-box h3 {
    margin: 0 0 1rem;
}

/* ===============================
   BUTTONS
================================ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: .625rem;
    padding: 0 .5rem;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    color: #001018;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(49, 226, 255, .25);
    text-shadow: none !important;
    -webkit-text-fill-color: unset !important;
    height: 2.1875rem  /* 35/16 */;
    margin: 0 auto;
    cursor: pointer;
    min-width: 12.5rem  /* 200/16 */;
}

.btn-primary:hover {
    filter: brightness(1.05);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary.is-loading {
    pointer-events: none;
    opacity: 0.8;
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
}

/* ===============================
   RESULT
================================ */
.face-result {
    margin-top: 2.25rem  /* 36/16 */;
    padding: 1.625rem  /* 26/16 */;
    border-radius: 1rem;
    background: linear-gradient(180deg, #020617, #020617) padding-box,
    linear-gradient(135deg, #1e293b, #0f172a) border-box;
    border: 1px solid transparent;
}

.face-result.result-pass {
    box-shadow: 0 0 0 1px rgba(34,197,94,0.25);
}

.face-result.result-fail {
    box-shadow: 0 0 0 1px rgba(239,68,68,0.35);
}

.face-result h3 {
    margin: 0 0 1.125rem  /* 18/16 */;
    font-size: 1.125rem  /* 18/16 */;
    font-weight: 600;
}

/* Face preview */
.face-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem  /* 24/16 */;
    margin-bottom: 1.25rem  /* 20/16 */;
}

.face-preview-grid p {
    margin: 0 0 0.5rem  /* 8/16 */;
    font-size: 0.8125rem  /* 13/16 */;
    color: var(--txt);
}

.face-preview-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0.75rem  /* 12/16 */;
    border: 1px solid #1e293b;
    background: #020617;
}

/* Meta info */
.face-meta {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 24px;
    font-size: 14px;
}

.face-meta strong {
    color: #e5e7eb;
}

.face-meta span {
    font-weight: 600;
}

/* Status colors */
.status-pass {
    color: #22c55e;
}

.status-fail {
    color: #ef4444;
}

/* ===============================
   HELPERS
================================ */
.hidden {
    display: none;
}

.filepond--root {
    margin-bottom: 0;
}

.filepond--root .filepond--credits {
    display: none !important;
}