body {
    font-family: 'Manrope', 'Noto Sans Devanagari', sans-serif;
    background-image: radial-gradient(circle at 15% 0%, rgba(54, 89, 227, 0.1), transparent 35%), radial-gradient(circle at 85% 25%, rgba(16, 185, 129, 0.09), transparent 38%);
}

#resultText {
    font-family: 'Noto Sans Devanagari', 'Manrope', sans-serif;
}

.tab-btn {
    color: #64748b;
    transition: all 180ms ease;
}

.tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14);
}

.drop-zone {
    position: relative;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.drop-zone.drag-active {
    border-color: #3659e3;
    background: #eff3ff;
    transform: translateY(-1px);
}

.spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(15, 23, 42, 0.2);
    border-top-color: #0f172a;
    border-radius: 999px;
    display: inline-block;
    animation: spin 0.8s linear infinite;
}

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

.history-item {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0.85rem;
    padding: 0.7rem 0.8rem;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.history-item:hover {
    background: #eef3ff;
    border-color: #bfd0ff;
}

.theme-dark {
    background-color: #0b1220;
    color: #dbe5ff;
    background-image: radial-gradient(circle at 15% 0%, rgba(86, 116, 255, 0.25), transparent 36%), radial-gradient(circle at 85% 25%, rgba(16, 185, 129, 0.2), transparent 40%);
}

.theme-dark header,
.theme-dark .bg-white {
    background-color: #111a2d !important;
}

.theme-dark .bg-slate-50,
.theme-dark .bg-slate-100 {
    background-color: #172036 !important;
}

.theme-dark .border-slate-200,
.theme-dark .border-slate-300 {
    border-color: #32405f !important;
}

.theme-dark .text-slate-900,
.theme-dark .text-slate-800,
.theme-dark .text-slate-700,
.theme-dark .text-slate-600,
.theme-dark .text-slate-500,
.theme-dark .text-slate-400 {
    color: #d7e0f5 !important;
}

.theme-dark .tab-btn.active {
    background: #1f2a44;
    color: #f0f5ff;
}

.theme-dark .drop-zone.drag-active {
    background: #1b2c52;
    border-color: #89a2ff;
}

.theme-dark .history-item {
    background: #172036;
    border-color: #32405f;
}

.theme-dark .history-item:hover {
    background: #213050;
    border-color: #5871b4;
}

@media (max-width: 768px) {
    #resultText {
        height: 18rem;
    }
}