:root {
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
    --dur-fast: 160ms;
    --dur-norm: 260ms;
    --dur-slow: 420ms;
}

* {
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

button, input, select {
    transition: transform var(--dur-fast) var(--ease-out-quint),
                box-shadow var(--dur-fast) var(--ease-out-quint),
                background-color var(--dur-fast) ease !important;
}

button:hover:not(:disabled) {
    transform: translateY(-1.5px) scale(1.015);
}

button:active:not(:disabled) {
    transform: translateY(0.5px) scale(0.975);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Global body reset */
html, body {
    background-color: var(--bg-body, #f4f7f6);
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Add the new wrapper for the side-by-side layout */
.page-wrapper {
    display: flex;
    gap: 30px; /* Space between the two columns */
    justify-content: center;
    max-width: 1000px;
    width: 100%;
    align-items: flex-start; /* Prevents columns from stretching to equal height unnecessarily */
}

/* Update your existing container rule */
.container {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: left;
    width: 100%;
}

/* Specific styling for the left column */
.score-container {
    flex: 1.2; /* Takes up slightly more space */
    max-width: 500px;
}

/* Specific styling for the right column (News) */
.news-container {
    flex: 1;
    max-width: 400px;
    text-align: left; 
    border: 1px solid #e3e6f0;
}

.news-title {
    margin-top: 0;
    margin-bottom: 15px;
    color: #17a2b8; 
    font-size: 18px;
    border-bottom: 2px solid #f0f2f5;
    padding-bottom: 12px;
}

.news-scroll-area {
    max-height: 400px; 
    overflow-y: auto;
    padding-right: 10px;
}

/* Custom, sleek scrollbar for the news section */
.news-scroll-area::-webkit-scrollbar {
    width: 6px;
}
.news-scroll-area::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
.news-scroll-area::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

/* Make it stack cleanly on mobile phones */
@media (max-width: 768px) {
    .page-wrapper {
        flex-direction: column;
        align-items: center;
    }
    .score-container, .news-container {
        max-width: 100%;
    }
}

.container {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-align: left;
    width: 100%;
    max-width: 400px;
}

.search-box {
    display: flex;
    margin: 20px 0;
    border: 2px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.search-box input {
    flex: 1;
    padding: 12px;
    border: none;
    font-size: 16px;
    text-transform: uppercase;
    outline: none;
}

.search-box button {
    padding: 12px 20px;
    background: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 18px;
}

.search-box button:hover {
    background: #0056b3;
}

.result-card {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fafafa;
}

.result-card img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
}

.score-display {
    font-size: 24px;
    font-weight: bold;
    color: #28a745;
    margin-top: 10px;
}

.hidden {
    display: none;
}

.error {
    color: #dc3545;
    margin-top: 15px;
}

/* Prevents theme button text from wrapping onto two lines */
.theme-toggle-btn:not(.btn-circle) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important; /* Keeps "Light Mode" on 1 line */
    padding: 8px 14px !important;
    min-width: max-content !important;
}

.theme-toggle-btn:not(.btn-circle) .btn-icon {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

/* ======================================================
   SEMANTIC STATUS BADGES & TINTED CHIPS SYSTEM
   ====================================================== */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

.badge-success {
    background: #eefbf3;
    background: oklch(96% 0.03 155);
    color: #166534;
    color: oklch(48% 0.17 155);
    border: 1px solid #bbf7d0;
    border: 1px solid oklch(85% 0.07 155);
}

.badge-warning {
    background: #fffbeb;
    background: oklch(97% 0.04 65);
    color: #92400e;
    color: oklch(52% 0.16 65);
    border: 1px solid #fde68a;
    border: 1px solid oklch(88% 0.09 65);
}

.badge-danger {
    background: #fef2f2;
    background: oklch(96% 0.04 25);
    color: #991b1b;
    color: oklch(48% 0.22 25);
    border: 1px solid #fecaca;
    border: 1px solid oklch(86% 0.09 25);
}

.badge-info {
    background: #eff6ff;
    background: oklch(96% 0.03 230);
    color: #1d4ed8;
    color: oklch(46% 0.16 230);
    border: 1px solid #bfdbfe;
    border: 1px solid oklch(86% 0.08 230);
}

.badge-purple {
    background: #faf5ff;
    background: oklch(96.5% 0.03 300);
    color: #7e22ce;
    color: oklch(46% 0.18 300);
    border: 1px solid #e9d5ff;
    border: 1px solid oklch(86% 0.08 300);
}

/* Category Chip Utilities */
.chip-subject {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chip-math {
    background: #eff6ff;
    background: oklch(95.5% 0.03 260);
    color: #1e40af;
    color: oklch(48% 0.20 260);
    border: 1px solid #bfdbfe;
    border: 1px solid oklch(85% 0.08 260);
}

.chip-science {
    background: #ecfeff;
    background: oklch(95.5% 0.03 180);
    color: #0e7490;
    color: oklch(46% 0.16 180);
    border: 1px solid #a5f3fc;
    border: 1px solid oklch(85% 0.08 180);
}

.chip-english {
    background: #fffbeb;
    background: oklch(96.5% 0.04 65);
    color: #92400e;
    color: oklch(50% 0.16 65);
    border: 1px solid #fde68a;
    border: 1px solid oklch(86% 0.09 65);
}

.chip-character {
    background: #f0fdf4;
    background: oklch(96% 0.03 150);
    color: #15803d;
    color: oklch(46% 0.17 150);
    border: 1px solid #bbf7d0;
    border: 1px solid oklch(85% 0.07 150);
}

/* Surface Tint Wrappers */
.surface-tint-warm {
    background: #fbfbfd;
    background: oklch(98.8% 0.005 245);
    border: 1px solid #e2e8f0;
    border: 1px solid oklch(90% 0.015 250);
}

.card-accent-left {
    border-left: 4px solid var(--primary-blue, #2563eb);
    border-left: 4px solid var(--primary-blue, oklch(50% 0.22 260));
}
.card-accent-left-gold {
    border-left: 4px solid var(--accent-gold, #d97706);
    border-left: 4px solid var(--accent-gold, oklch(68% 0.16 75));
}
.card-accent-left-emerald {
    border-left: 4px solid #16a34a;
    border-left: 4px solid oklch(52% 0.17 155);
}