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

:root {
    --primary: hsl(158, 64%, 35%);
    --primary-light: hsl(158, 64%, 45%);
    --primary-dark: hsl(158, 64%, 25%);
    --secondary: hsl(158, 30%, 95%);
    --accent: hsl(170, 55%, 50%);
    --background: hsl(0, 0%, 100%);
    --foreground: hsl(0, 0%, 10%);
    --muted: hsl(0, 0%, 96%);
    --muted-foreground: hsl(0, 0%, 45%);
    --border: hsl(0, 0%, 90%);
    --card: hsl(0, 0%, 100%);
    --destructive: hsl(0, 84%, 60%);
    
    --grade-a: hsl(120, 60%, 45%);
    --grade-b: hsl(80, 60%, 50%);
    --grade-c: hsl(45, 100%, 50%);
    --grade-d: hsl(30, 100%, 50%);
    --grade-e: hsl(0, 80%, 50%);
    
    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-emphasis: 0 4px 12px rgba(0, 0, 0, 0.15);
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.6;
    padding-bottom: 80px;
    background-color: hsl(0, 0%, 100%);
    color: hsl(0, 0%, 10%);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, 
        hsla(158, 64%, 35%, 0.1) 0%, 
        var(--background) 50%, 
        hsla(170, 55%, 50%, 0.1) 100%
    );
    padding: 4rem 1rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M36 18c3.314 0 6 2.686 6 6s-2.686 6-6 6-6-2.686-6-6 2.686-6 6-6z' stroke='hsl(158, 64%, 35%)' stroke-opacity='.05'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: hsla(158, 64%, 35%, 0.1);
    margin-bottom: 1.5rem;
}

.hero-icon i {
    font-size: 2.5rem;
    color: var(--primary);
}

.hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--foreground);
}

.hero-description {
    font-size: 1.25rem;
    color: var(--muted-foreground);
    max-width: 42rem;
    margin: 0 auto 2rem;
}

/* Search */
.search-container {
    max-width: 36rem;
    margin: 2rem auto;
    position: relative;
    z-index: 2;
}

.search-form {
    display: flex;
    gap: 0.5rem;
    background: var(--card);
    padding: 0.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-emphasis);
    border: 1px solid var(--border);
}

.search-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    outline: none;
    font-size: 1rem;
    background: transparent;
    color: var(--foreground);
    pointer-events: auto;
}

.search-input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.search-button {
    padding: 0.75rem 1.5rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s;
}

.search-button:hover {
    background: var(--primary-dark);
}

.scanner-button {
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.2s;
}

.scanner-button:hover {
    background: hsl(170, 55%, 45%);
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content {
    background: var(--card);
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-emphasis);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--muted-foreground);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s;
}

.close-btn:hover {
    background: var(--muted);
}

.scanner-container {
    padding: 2rem;
    text-align: center;
}

.scanner-container #scanner {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background: var(--muted);
    border-radius: 8px;
    overflow: hidden;
}

.scanner-hint {
    margin-top: 1rem;
    color: var(--muted-foreground);
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 4rem;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

.feature-card {
    background: hsla(0, 0%, 100%, 0.5);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid hsla(0, 0%, 90%, 0.5);
    box-shadow: var(--shadow-soft);
}

.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: hsla(158, 64%, 35%, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.feature-icon i {
    font-size: 1.5rem;
    color: var(--primary);
}

.feature-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.feature-card p {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Loading State */
.loading-state {
    text-align: center;
    padding: 3rem 1rem;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

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

.hidden {
    display: none !important;
}

/* Search Results */
.search-results {
    padding: 3rem 0;
}

.search-results h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.product-item {
    background: var(--card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.product-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-emphasis);
}

.product-item-image {
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: var(--muted);
    padding: 1rem;
}

.product-item-content {
    padding: 1rem;
}

.product-item-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.product-item-brand {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.product-item-grades {
    display: flex;
    gap: 0.5rem;
}

/* Grade Badges */
.grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: white;
}

.grade-badge.small {
    padding: 0.25rem 0.75rem;
    font-size: 1rem;
}

.grade-a { background: var(--grade-a); }
.grade-b { background: var(--grade-b); }
.grade-c { background: var(--grade-c); }
.grade-d { background: var(--grade-d); }
.grade-e { background: var(--grade-e); }
.grade-na { background: var(--muted-foreground); }

/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-around;
    padding: 0.75rem 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--muted-foreground);
    text-decoration: none;
    padding: 0.5rem 1.5rem;
    transition: color 0.2s;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary);
}

.nav-link i {
    font-size: 1.25rem;
}

.nav-link span {
    font-size: 0.75rem;
}

/* Page Header */
.page-header {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
    background: var(--card);
    box-shadow: var(--shadow-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-header h1 {
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.back-button,
.clear-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--foreground);
    font-size: 0.875rem;
    transition: background 0.2s;
}

.back-button:hover,
.clear-button:hover {
    background: var(--muted);
}

/* Product Details */
.product-layout {
    display: grid;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (min-width: 1024px) {
    .product-layout {
        grid-template-columns: 1fr 1fr;
    }
}

.product-card {
    background: var(--card);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-emphasis);
}

.product-image-container {
    aspect-ratio: 1;
    background: var(--secondary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    padding: 1rem;
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-name {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.product-brand {
    font-size: 1.125rem;
    color: var(--muted-foreground);
}

/* Scores Card */
/* Impact Score Card */
.impact-score-card {
    background: linear-gradient(135deg, hsla(158, 64%, 35%, 0.1), hsla(170, 55%, 50%, 0.1));
    border-radius: 12px;
    padding: 1.5rem;
    border: 2px solid var(--primary);
    box-shadow: var(--shadow-emphasis);
    margin-bottom: 1.5rem;
}

.impact-score-display {
    text-align: center;
    margin-bottom: 1.5rem;
}

.impact-score-value {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.impact-score-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.impact-score-range {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.impact-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.impact-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.impact-label {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

.impact-grade {
    font-weight: 600;
}

.impact-co2 {
    font-weight: 600;
    color: var(--foreground);
}

.impact-na {
    color: var(--muted-foreground);
    font-style: italic;
}

/* Impact Score Colors */
.impact-excellent {
    color: var(--grade-a);
}

.impact-very-good {
    color: var(--grade-b);
}

.impact-good {
    color: var(--grade-c);
}

.impact-fair {
    color: var(--grade-d);
}

.impact-poor {
    color: var(--grade-e);
}

.impact-very-poor {
    color: var(--destructive);
}

.scores-card,
.alerts-card {
    background: var(--card);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-emphasis);
    margin-bottom: 1.5rem;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.card-title i {
    color: var(--accent);
}


.score-item {
    text-align: center;
}

.score-item h3 {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 0.75rem;
}

.score-item .grade-badge {
    width: 100%;
    font-size: 2rem;
    padding: 0.75rem;
}

.score-description {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-top: 0.5rem;
}

.co2-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground);
    padding: 0.75rem;
    background: var(--muted);
    border-radius: 8px;
    margin: 0.5rem 0;
}

.scores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
}

/* Alerts */
.alert-section {
    margin-bottom: 1rem;
}

.alert-section:last-child {
    margin-bottom: 0;
}

.alert-section h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.badges-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.badge-destructive {
    background: var(--destructive);
    color: white;
}

.badge-outline {
    background: transparent;
    border: 1px solid var(--destructive);
    color: var(--destructive);
}

.badge-secondary {
    background: var(--secondary);
    color: var(--foreground);
}

.badge-warning {
    background: var(--grade-c);
    color: white;
}

.badge-success {
    background: var(--grade-a);
    color: white;
}

/* Health Initiatives */
.health-initiatives {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.health-tips-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.health-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.6;
    transition: transform 0.2s, box-shadow 0.2s;
}

.health-tip:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-soft);
}

.health-tip i {
    font-size: 1.125rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.health-tip-success {
    background: hsla(120, 60%, 45%, 0.1);
    border-left: 3px solid var(--grade-a);
    color: var(--foreground);
}

.health-tip-success i {
    color: var(--grade-a);
}

.health-tip-info {
    background: hsla(200, 100%, 50%, 0.1);
    border-left: 3px solid hsl(200, 100%, 50%);
    color: var(--foreground);
}

.health-tip-info i {
    color: hsl(200, 100%, 50%);
}

.health-tip-warning {
    background: hsla(30, 100%, 50%, 0.1);
    border-left: 3px solid var(--grade-d);
    color: var(--foreground);
}

.health-tip-warning i {
    color: var(--grade-d);
}

/* Ingredients Section */
.ingredients-section {
    background: var(--card);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    margin-bottom: 2rem;
}

.ingredients-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--foreground);
    white-space: pre-wrap;
}

/* Nutrition Section */
.nutrition-section,
.nutrition-chart-section,
.categories-section {
    background: var(--card);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    margin-bottom: 2rem;
}

.chart-container {
    position: relative;
    height: 400px;
    margin-top: 1rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.section-title i {
    color: var(--primary);
}

.nutrition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.nutrition-item {
    background: var(--muted);
    padding: 1rem;
    border-radius: 8px;
}

.nutrition-item-label {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 0.25rem;
}

.nutrition-item-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground);
}

.nutrition-item-unit {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-left: 0.25rem;
}

/* Profile Page */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Profile Impact Score Section */
.profile-impact-section {
    margin-bottom: 2rem;
}

.profile-impact-card {
    background: linear-gradient(135deg, 
        hsla(158, 64%, 35%, 0.15), 
        hsla(170, 55%, 50%, 0.15)
    );
    border-radius: 16px;
    padding: 2rem;
    border: 2px solid var(--primary);
    box-shadow: var(--shadow-emphasis);
    position: relative;
    overflow: hidden;
}

.profile-impact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        var(--grade-a), 
        var(--grade-b), 
        var(--grade-c), 
        var(--grade-d), 
        var(--grade-e)
    );
}

.profile-impact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.impact-tag {
    padding: 0.5rem 1.25rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-soft);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.profile-impact-display {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.profile-impact-value {
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-impact-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.profile-impact-range {
    font-size: 1rem;
    color: var(--muted-foreground);
    font-weight: 500;
}

.profile-impact-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border);
}

.profile-impact-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    transition: transform 0.2s, background 0.2s;
}

.profile-impact-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.5);
}

.profile-impact-label {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.profile-impact-label i {
    color: var(--primary);
    font-size: 1rem;
}

.profile-impact-grade {
    font-weight: 600;
    font-size: 1.125rem;
}

.profile-impact-co2 {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--foreground);
}

.stat-card {
    background: var(--card);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: hsla(158, 64%, 35%, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon i {
    font-size: 1.5rem;
    color: var(--primary);
}

.stat-icon.eco {
    background: hsla(120, 60%, 45%, 0.1);
}

.stat-icon.eco i {
    color: var(--grade-a);
}

.stat-icon.health {
    background: hsla(0, 84%, 60%, 0.1);
}

.stat-icon.health i {
    color: hsl(0, 84%, 60%);
}

.stat-icon.trophy {
    background: hsla(45, 100%, 50%, 0.1);
}

.stat-icon.trophy i {
    color: var(--grade-c);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    display: block;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* Achievements */
.achievements-section,
.activity-section {
    background: var(--card);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    margin-bottom: 2rem;
}

.achievements-section h2,
.activity-section h2 {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.achievement-card {
    background: var(--muted);
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    border: 2px solid var(--border);
}

.achievement-card.locked {
    opacity: 0.5;
}

.achievement-card.unlocked {
    background: linear-gradient(135deg, hsla(158, 64%, 35%, 0.1), hsla(170, 55%, 50%, 0.1));
    border-color: var(--primary);
}

.achievement-card i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.achievement-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.achievement-card p {
    font-size: 0.875rem;
    color: var(--muted-foreground);
}

/* History Page */
.filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.filter-button:hover {
    background: var(--muted);
}

.filter-button.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.history-item {
    background: var(--card);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    display: flex;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.history-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-emphasis);
}

.history-item-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: var(--muted);
    border-radius: 8px;
    padding: 0.5rem;
    flex-shrink: 0;
}

.history-item-content {
    flex: 1;
}

.history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 0.5rem;
}

.history-item-name {
    font-weight: 600;
    font-size: 1rem;
}

.history-item-date {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.history-item-brand {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.history-item-grades {
    display: flex;
    gap: 0.5rem;
}

/* Empty State */
.empty-state-container {
    text-align: center;
    padding: 4rem 1rem;
}

.empty-state-container i {
    font-size: 4rem;
    color: var(--muted-foreground);
    margin-bottom: 1rem;
}

.empty-state-container h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.empty-state-container p {
    color: var(--muted-foreground);
    margin-bottom: 1.5rem;
}

.primary-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--primary);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.2s;
}

.primary-button:hover {
    background: var(--primary-dark);
}

.empty-state {
    color: var(--muted-foreground);
    text-align: center;
    padding: 2rem;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.activity-item {
    padding: 1rem;
    background: var(--muted);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.activity-item-text {
    font-size: 0.875rem;
}

.activity-item-time {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

/* Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .scores-grid {
        grid-template-columns: 1fr;
    }
}
h2{
     color: #333;               /* Default text color (dark gray) */
    background-color: #f0f0f0;  /* Default background color (light gray) */
    padding: 20px;             /* Space inside the box */
    text-align: center;        /* Center the text */
    border-radius: 8px;        /* Rounded corners */
    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition for the effect */
    cursor: pointer;   
}
h2:hover {
    color: #ffffff;            /* Change text color to white */
    background-color:hsl(158, 64%, 35%);;
}