/* --- Global & Typography --- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f5f5f7; /* Apple-like light gray background */
    padding: 20px;
    box-sizing: border-box;
}

.container {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 16px; /* Softer, more rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Softer shadow */
    width: 100%;
    max-width: 800px; /* Slightly narrower for a cleaner look */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

h1 {
    color: #1d1d1f; /* Apple's dark gray for text */
    margin-bottom: 25px;
    font-weight: 600;
}

h2 {
    color: #333;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

/* --- Results Section --- */
.results-divider {
    border: none;
    height: 1px;
    background-color: #e5e5e5;
    width: 100%;
    margin: 30px 0;
}

.results {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.image-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.processing-time {
    font-size: 1em;
    font-weight: 500;
    color: #6e6e73; /* Softer gray for secondary text */
    margin-bottom: 10px;
}

img {
    max-width: 100%;
    height: auto;
    border: 1px solid #e5e5e5;
    border-radius: 8px; /* Consistent rounded corners */
}

/* --- OCR Output and Search --- */
.ocr-output {
    width: 100%;
    text-align: left;
}

.ocr-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
}

.ocr-output h2 {
    margin: 0;
}

pre {
    background-color: #f5f5f7; /* Match body background */
    padding: 20px;
    border-radius: 8px;
    white-space: pre-wrap;
    word-wrap: break-word;
    border: 1px solid #e5e5e5; /* Lighter border */
    width: calc(100% - 42px);
    min-height: 100px;
    overflow-y: auto;
    line-height: 1.6;
    color: #333;
}

.highlight {
    background-color: #cce5ff; /* Softer, blue-based highlight */
    border-radius: 3px;
}

/* --- Image Preview --- */
#imagePreview {
    max-width: 400px;
    max-height: 250px;
    border: 2px dashed #d0d0d5; /* Dashed border for drop area */
    border-radius: 12px;
    object-fit: contain;
    display: none;
    margin-bottom: 15px;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

#imagePreview:hover {
    border-color: #007aff;
}

#imagePreview.drag-over {
    border-color: #007aff;
    background-color: #f0f8ff;
}

/* --- Custom File Upload --- */
.custum-file-upload {
    height: 200px;
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    cursor: pointer;
    border: 2px dashed #d0d0d5; /* Softer dashed border */
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 12px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.custum-file-upload.drag-over, .custum-file-upload:hover {
    background-color: #fafafa;
    border-color: #a0a0a0;
}

.custum-file-upload .icon svg {
    height: 60px;
    fill: #888;
    transition: fill 0.2s ease;
}

.custum-file-upload:hover .icon svg {
    fill: #555;
}

.custum-file-upload .text {
    text-align: center;
}

.custum-file-upload .text span {
    font-weight: 500;
    color: #6e6e73;
}

.custum-file-upload .text .file-name {
    font-size: 0.9em;
    color: #1d1d1f;
    margin-top: 8px;
    font-weight: bold;
}

.custum-file-upload input {
    display: none;
}

/* --- ORIGINAL Animated Button CSS --- */
.type--A {
    --line_color: #555555;
    --back_color: #ffecf6;
}
.button {
    position: relative;
    z-index: 0;
    width: 240px;
    height: 56px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: var(--line_color);
    letter-spacing: 2px;
    transition: all 0.3s ease;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}
.button__text {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.button::before,
.button::after,
.button__text::before,
.button__text::after {
    content: "";
    position: absolute;
    height: 3px;
    border-radius: 2px;
    background: var(--line_color);
    transition: all 0.5s ease;
}
.button::before {
    top: 0;
    left: 54px;
    width: calc(100% - 56px * 2 - 16px);
}
.button::after {
    top: 0;
    right: 54px;
    width: 8px;
}
.button__text::before {
    bottom: 0;
    right: 54px;
    width: calc(100% - 56px * 2 - 16px);
}
.button__text::after {
    bottom: 0;
    left: 54px;
    width: 8px;
}
.button__line {
    position: absolute;
    top: 0;
    width: 56px;
    height: 100%;
    overflow: hidden;
}
.button__line::before {
    content: "";
    position: absolute;
    top: 0;
    width: 150%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 300px;
    border: solid 3px var(--line_color);
}
.button__line:nth-child(1),
.button__line:nth-child(1)::before {
    left: 0;
}
.button__line:nth-child(2),
.button__line:nth-child(2)::before {
    right: 0;
}
.button:hover {
    letter-spacing: 6px;
}
.button:hover::before,
.button:hover .button__text::before {
    width: 8px;
}
.button:hover::after,
.button:hover .button__text::after {
    width: calc(100% - 56px * 2 - 16px);
}
.button__drow1,
.button__drow2 {
    position: absolute;
    z-index: -1;
    border-radius: 16px;
    transform-origin: 16px 16px;
}
.button__drow1 {
    top: -16px;
    left: 40px;
    width: 32px;
    height: 0;
    transform: rotate(30deg);
}
.button__drow2 {
    top: 44px;
    left: 77px;
    width: 32px;
    height: 0;
    transform: rotate(-127deg);
}
.button__drow1::before,
.button__drow1::after,
.button__drow2::before,
.button__drow2::after {
    content: "";
    position: absolute;
}
.button__drow1::before {
    bottom: 0;
    left: 0;
    width: 0;
    height: 32px;
    border-radius: 16px;
    transform-origin: 16px 16px;
    transform: rotate(-60deg);
}
.button__drow1::after {
    top: -10px;
    left: 45px;
    width: 0;
    height: 32px;
    border-radius: 16px;
    transform-origin: 16px 16px;
    transform: rotate(69deg);
}
.button__drow2::before {
    bottom: 0;
    left: 0;
    width: 0;
    height: 32px;
    border-radius: 16px;
    transform-origin: 16px 16px;
    transform: rotate(-146deg);
}
.button__drow2::after {
    bottom: 26px;
    left: -40px;
    width: 0;
    height: 32px;
    border-radius: 16px;
    transform-origin: 16px 16px;
    transform: rotate(-262deg);
}
.button__drow1,
.button__drow1::before,
.button__drow1::after,
.button__drow2,
.button__drow2::before,
.button__drow2::after {
    background: var(--back_color);
}
.button:hover .button__drow1 {
    animation: drow1 ease-in 0.06s;
    animation-fill-mode: forwards;
}
.button:hover .button__drow1::before {
    animation: drow2 linear 0.08s 0.06s;
    animation-fill-mode: forwards;
}
.button:hover .button__drow1::after {
    animation: drow3 linear 0.03s 0.14s;
    animation-fill-mode: forwards;
}
.button:hover .button__drow2 {
    animation: drow4 linear 0.06s 0.2s;
    animation-fill-mode: forwards;
}
.button:hover .button__drow2::before {
    animation: drow3 linear 0.03s 0.26s;
    animation-fill-mode: forwards;
}
.button:hover .button__drow2::after {
    animation: drow5 linear 0.06s 0.32s;
    animation-fill-mode: forwards;
}
@keyframes drow1 { 0% { height: 0; } 100% { height: 100px; } }
@keyframes drow2 { 0% { width: 0; opacity: 0; } 10% { opacity: 0; } 11% { opacity: 1; } 100% { width: 120px; } }
@keyframes drow3 { 0% { width: 0; } 100% { width: 80px; } }
@keyframes drow4 { 0% { height: 0; } 100% { height: 120px; } }
@keyframes drow5 { 0% { width: 0; } 100% { width: 124px; } }
.button:not(:last-child) { margin-bottom: 64px; }


/* --- Search Input --- */
.search-group {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 220px;
}

.search-group .input {
    width: 100%;
    height: 38px;
    line-height: 28px;
    padding: 0 1rem 0 2.5rem;
    border: 1px solid #dcdcdc; /* Subtle border */
    border-radius: 8px;
    outline: none;
    background-color: #f5f5f7;
    color: #333;
    transition: .3s ease;
}

.search-group .input::placeholder {
    color: #8a8a8e;
}

.search-group .input:focus, .search-group .input:hover {
    border-color: #007aff;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

.search-group .icon {
    position: absolute;
    left: 0.8rem;
    fill: #8a8a8e;
    width: 1rem;
    height: 1rem;
}

/* --- Loading overlay and hamster animation --- */
.loading-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 10; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border-radius: 16px; /* Match the container's border-radius */
}
.loading-overlay.active { opacity: 1; visibility: visible; }
.loading-overlay p { margin-top: 20px; font-size: 1.2em; color: #555; }
.processing-timer { font-size: 1.1em; font-weight: bold; color: #555; margin-top: 10px; }
.wheel-and-hamster { --dur: 1s; position: relative; width: 12em; height: 12em; font-size: 14px; }
.wheel, .hamster, .hamster div, .spoke { position: absolute; }
.wheel, .spoke { border-radius: 50%; top: 0; left: 0; width: 100%; height: 100%; }
.wheel { background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%); z-index: 2; }
.hamster { animation: hamster var(--dur) ease-in-out infinite; top: 50%; left: calc(50% - 3.5em); width: 7em; height: 3.75em; transform: rotate(4deg) translate(-0.8em,1.85em); transform-origin: 50% 0; z-index: 1; }
.hamster__head { animation: hamsterHead var(--dur) ease-in-out infinite; background: hsl(30,90%,55%); border-radius: 70% 30% 0 100% / 40% 25% 25% 60%; box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset, 0.75em -1.55em 0 hsl(30,90%,90%) inset; top: 0; left: -2em; width: 2.75em; height: 2.5em; transform-origin: 100% 50%; }
.hamster__ear { animation: hamsterEar var(--dur) ease-in-out infinite; background: hsl(0,90%,85%); border-radius: 50%; box-shadow: -0.25em 0 hsl(30,90%,55%) inset; top: -0.25em; right: -0.25em; width: 0.75em; height: 0.75em; transform-origin: 50% 75%; }
.hamster__eye { animation: hamsterEye var(--dur) linear infinite; background-color: hsl(0,0%,0%); border-radius: 50%; top: 0.375em; left: 1.25em; width: 0.5em; height: 0.5em; }
.hamster__nose { background: hsl(0,90%,75%); border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%; top: 0.75em; left: 0; width: 0.2em; height: 0.25em; }
.hamster__body { animation: hamsterBody var(--dur) ease-in-out infinite; background: hsl(30,90%,90%); border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%; box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset, 0.15em -0.5em 0 hsl(30,90%,80%) inset; top: 0.25em; left: 2em; width: 4.5em; height: 3em; transform-origin: 17% 50%; transform-style: preserve-3d; }
.hamster__limb--fr, .hamster__limb--fl { clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%); top: 2em; left: 0.5em; width: 1em; height: 1.5em; transform-origin: 50% 0; }
.hamster__limb--fr { animation: hamsterFRLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%); transform: rotate(15deg) translateZ(-1px); }
.hamster__limb--fl { animation: hamsterFLLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%); transform: rotate(15deg); }
.hamster__limb--br, .hamster__limb--bl { border-radius: 0.75em 0.75em 0 0; clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%); top: 1em; left: 2.8em; width: 1.5em; height: 2.5em; transform-origin: 50% 30%; }
.hamster__limb--br { animation: hamsterBRLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%); transform: rotate(-25deg) translateZ(-1px); }
.hamster__limb--bl { animation: hamsterBLLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%); transform: rotate(-25deg); }
.hamster__tail { animation: hamsterTail var(--dur) linear infinite; background: hsl(0,90%,85%); border-radius: 0.25em 50% 50% 0.25em; box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset; top: 1.5em; right: -0.5em; width: 1em; height: 0.5em; transform: rotate(30deg) translateZ(-1px); transform-origin: 0.25em 0.25em; }
.spoke { animation: spoke var(--dur) linear infinite; background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%), linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat; }
@keyframes hamster { from, to { transform: rotate(4deg) translate(-0.8em,1.85em); } 50% { transform: rotate(0) translate(-0.8em,1.85em); } }
@keyframes hamsterHead { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(8deg); } }
@keyframes hamsterEye { from, 90%, to { transform: scaleY(1); } 95% { transform: scaleY(0); } }
@keyframes hamsterEar { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(12deg); } }
@keyframes hamsterBody { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-2deg); } }
@keyframes hamsterFRLimb { from, 25%, 50%, 75%, to { transform: rotate(50deg) translateZ(-1px); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-30deg) translateZ(-1px); } }
@keyframes hamsterFLLimb { from, 25%, 50%, 75%, to { transform: rotate(-30deg); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(50deg); } }
@keyframes hamsterBRLimb { from, 25%, 50%, 75%, to { transform: rotate(-60deg) translateZ(-1px); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(20deg) translateZ(-1px); } }
@keyframes hamsterBLLimb { from, 25%, 50%, 75%, to { transform: rotate(20deg); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-60deg); } }
@keyframes hamsterTail { from, 25%, 50%, 75%, to { transform: rotate(30deg) translateZ(-1px); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(10deg) translateZ(-1px); } }
@keyframes spoke { from { transform: rotate(0); } to { transform: rotate(-1turn); } }