/* Main Calculator Styles - Desktop First Approach */
.calculator {
    margin-bottom: 3rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

.input-section, .results-section {
    margin-bottom: 3rem;
}

.calculator-interface {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    overflow: hidden;
}

/* Desktop-First Layout Optimizations */
@media (min-width: 992px) {
    .desktop-form-container {
        display: grid;
        grid-template-columns: 1fr 350px;
        gap: 2rem;
        align-items: start;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .desktop-form-column {
        min-height: 100%;
    }
    
    .desktop-info-column {
        position: sticky;
        top: 2rem;
    }
    
    .desktop-optimized-card {
        max-width: none;
    }
    
    .desktop-card-body {
        padding: 2rem;
    }
    
    .desktop-calculator-layout {
        max-width: none;
        padding: 2rem;
    }
    
    .desktop-form-section {
        margin-bottom: 1.5rem;
        padding: 2rem;
        border-radius: 12px;
    }
    
    .desktop-form-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        align-items: start;
    }
    
    .personal-info-row {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .walking-details-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .form-group {
        margin-bottom: 0;
    }
    
    .form-label {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
        color: #374151;
    }
    
    .mobile-form-input, .form-input {
        padding: 1rem 1rem 1rem 3rem;
        font-size: 1rem;
        border-radius: 10px;
        border: 2px solid #e5e7eb;
        transition: all 0.3s ease;
    }
    
    .mobile-form-input:focus, .form-input:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        outline: none;
    }
    
    .btn-calculate {
        padding: 1.2rem 2.5rem;
        font-size: 1.1rem;
        border-radius: 12px;
        margin-top: 1.5rem;
    }
}

/* ========== GAMIFICATION STYLES ========== */

.gamification-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 12px;
    border-left: 4px solid #0ea5e9;
    margin: 1.5rem 0;
}

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

.food-equivalent {
    background: white;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: transform 0.3s ease;
}

.food-equivalent:hover { 
    transform: scale(1.05); 
}

.food-icon { 
    font-size: 1.5rem; 
    min-width: 30px; 
}

.food-text { 
    font-weight: 600; 
    color: #1e293b; 
    flex: 1; 
}

.food-calories {
    font-size: 0.85rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.achievement-section {
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
    border-radius: 12px;
    border-left: 4px solid #f59e0b;
    margin: 1.5rem 0;
}

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

.achievement-badge {
    background: white;
    padding: 1rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.achievement-badge:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.achievement-badge.gold {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.achievement-badge.silver {
    border-color: #9ca3af;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.achievement-badge.bronze {
    border-color: #d97706;
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
}

.achievement-badge i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
    color: #1e293b;
}

.achievement-badge.gold i { 
    color: #d97706; 
}

.achievement-badge.silver i { 
    color: #6b7280; 
}

.achievement-badge.bronze i { 
    color: #92400e; 
}

.achievement-badge small {
    color: #64748b;
    font-size: 0.75rem;
    display: block;
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .food-equivalents { 
        grid-template-columns: 1fr; 
    }
    .achievements-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* ========== MOBILE TITLE OPTIMIZATION ========== */

.mobile-title { 
    display: none; 
}

.desktop-title { 
    display: inline; 
}

@media (max-width: 768px) {
    .mobile-title { 
        display: inline; 
    }
    .desktop-title { 
        display: none; 
    }
    
    .card-header h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 480px) {
    .card-header h1 {
        font-size: 1.3rem !important;
        text-align: center !important;
        padding: 0.5rem !important;
    }
    
    .social-proof p {
        font-size: 0.8rem !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }
    
    /* Optimize calculator layout for mobile */
    .calculator-interface {
        padding: 1rem 0.5rem !important;
    }
    
    .form-section {
        margin-bottom: 1rem !important;
        padding: 1rem !important;
    }
    
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    .form-input, .form-select {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 0.75rem !important;
    }
    
    .btn-calculate {
        font-size: 1rem !important;
        padding: 1rem !important;
        margin: 1rem 0 !important;
    }
}

/* ========== CONTAINER AND LAYOUT STYLES ========== */

/* Main container specific styles - Desktop friendly */
.main-container {
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 20px;
}

/* Desktop optimizations */
@media (min-width: 1200px) {
    .main-container {
        padding: 0 40px;
    }
}

@media (min-width: 992px) {
    .main-container {
        padding: 0 30px;
    }
}

@media (max-width: 576px) {
    .main-container {
        padding: 0 15px;
    }
}

/* ========== BREADCRUMB STYLES ========== */

.breadcrumb {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    position: relative;
    overflow: hidden;
}

.breadcrumb-list {
    display: contents;
}

.breadcrumb::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

.breadcrumb a {
    color: #4f46e5;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    min-height: 32px;
    display: flex;
    align-items: center;
    position: relative;
}

.breadcrumb a:hover {
    color: #7c3aed;
    background: rgba(79, 70, 229, 0.1);
    transform: translateY(-1px);
}

.breadcrumb-separator {
    margin: 0 0.3rem;
    color: #94a3b8;
    font-weight: 400;
    font-size: 0.8rem;
}

.breadcrumb span:last-child {
    color: #1e293b;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    background: rgba(79, 70, 229, 0.05);
    border-radius: 6px;
    min-height: 32px;
    display: flex;
    align-items: center;
}

/* Enhanced Mobile Breadcrumb */
@media (max-width: 768px) {
    .breadcrumb {
        font-size: 0.85rem;
        margin-bottom: 1rem;
        padding: 0.8rem 1rem;
        border-radius: 10px;
        gap: 0.2rem;
    }

    .breadcrumb a,
    .breadcrumb span:last-child {
        padding: 0.25rem 0.5rem;
        min-height: 28px;
        font-size: 0.85rem;
    }

    .breadcrumb-separator {
        margin: 0 0.2rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .breadcrumb {
        font-size: 0.8rem;
        padding: 0.7rem 0.8rem;
        margin: 0 -0.5rem 1rem;
        border-radius: 8px;
        gap: 0.15rem;
    }

    .breadcrumb a,
    .breadcrumb span:last-child {
        padding: 0.2rem 0.4rem;
        min-height: 26px;
        font-size: 0.8rem;
        border-radius: 4px;
    }

    .breadcrumb-separator {
        margin: 0 0.15rem;
        font-size: 0.7rem;
    }
}

/* Ultra-small devices */
@media (max-width: 360px) {
    .breadcrumb {
        font-size: 0.75rem;
        padding: 0.6rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }

    .breadcrumb a,
    .breadcrumb span:last-child {
        padding: 0.15rem 0.3rem;
        min-height: 24px;
        font-size: 0.75rem;
    }

    .breadcrumb-separator {
        display: none;
    }

    .breadcrumb a::after {
        content: ' >';
        color: #94a3b8;
        margin-left: 0.3rem;
    }

    .breadcrumb span:last-child::after {
        display: none;
    }
}

/* ========== QUICK ANSWER SECTION ========== */

.quick-answer {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.3);
    position: relative;
    overflow: hidden;
}

.quick-answer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    pointer-events: none;
}

.quick-answer h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
    position: relative;
    z-index: 1;
}

.quick-answer p {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

/* ========== TABLE STYLES ========== */

.calorie-table-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.calorie-table-section h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #1e293b;
    text-align: center;
}

.calorie-reference-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.calorie-reference-table th,
.calorie-reference-table td {
    padding: 1.2rem;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
}

.calorie-reference-table th {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.calorie-reference-table td {
    font-size: 0.95rem;
    color: #374151;
    font-weight: 500;
}

.calorie-reference-table tbody tr:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    transform: scale(1.01);
    transition: all 0.2s ease;
}

/* Clickable table row styles */
.calorie-reference-table tbody tr.clickable-row {
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.calorie-reference-table tbody tr.clickable-row::after {
    content: '👆 Click to auto-fill calculator';
    position: absolute;
    right: -200px;
    top: 50%;
    transform: translateY(-50%);
    background: #3b82f6;
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.calorie-reference-table tbody tr.clickable-row:hover::after {
    opacity: 1;
    right: -190px;
}

.calorie-reference-table tbody tr.clickable-row:hover {
    background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.calorie-reference-table tbody tr.row-selected {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* ========== BUTTON STYLES ========== */

.btn-calculate {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    min-height: 56px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-calculate:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
    background: linear-gradient(135deg, #5b52e8 0%, #8b5cf6 100%);
}

.btn-calculate:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}

/* Mobile Button Optimizations */
@media (max-width: 768px) {
    .btn-calculate {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        min-height: 52px;
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .btn-calculate {
        padding: 0.9rem 1.2rem;
        font-size: 0.95rem;
        min-height: 48px;
        border-radius: 8px;
    }
}

/* Table CTA Button Styles */
.table-cta {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e2e8f0;
}

.btn-table-calculate {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 0.9rem 1.8rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.btn-table-calculate:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}

.btn-table-calculate:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.table-note {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
    font-style: italic;
}

@media (max-width: 768px) {
    .table-cta {
        margin-top: 1rem;
        padding-top: 1rem;
    }

    .btn-table-calculate {
        padding: 0.8rem 1.5rem;
        font-size: 0.95rem;
        min-height: 44px;
    }

    .table-note {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .btn-table-calculate {
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
        min-height: 42px;
        border-radius: 8px;
    }
}

/* ========== SOCIAL PROOF STYLES ========== */

.social-proof {
    text-align: center;
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
    border-radius: 12px;
    border: 1px solid rgba(79, 70, 229, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.social-proof p {
    margin: 0;
    font-size: 0.95rem;
    color: #4f46e5;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.social-proof i {
    color: #7c3aed;
    margin-right: 0.5rem;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .social-proof {
        padding: 0.8rem;
        margin-top: 0.8rem;
    }
    
    .social-proof p {
        font-size: 0.85rem;
        line-height: 1.4;
    }
}

@media (max-width: 480px) {
    .social-proof p {
        font-size: 0.8rem;
    }
}

/* ========== RELATED TOOLS STYLES ========== */

.related-tools {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e2e8f0;
}

.related-tools h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.related-tools h4 i {
    color: #4f46e5;
}

.tool-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tool-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    color: #374151;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.tool-link:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-color: #4f46e5;
    color: #4f46e5;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.15);
}

.tool-link i {
    color: #4f46e5;
    font-size: 1.1rem;
    min-width: 18px;
}

.tool-link span {
    font-weight: 500;
}

/* Enhanced Mobile Styles for Related Tools */
@media (max-width: 768px) {
    .related-tools {
        margin-top: 1.5rem;
        padding-top: 1rem;
    }

    .tool-link {
        padding: 0.8rem;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    .tool-link i {
        font-size: 1rem;
        min-width: 16px;
    }
}

@media (max-width: 480px) {
    .tool-link {
        padding: 0.7rem;
        font-size: 0.8rem;
        gap: 0.6rem;
    }
}

/* ========== RESPONSIVE STYLES ========== */

/* Enhanced Mobile responsive styles */
@media (max-width: 768px) {
    .quick-answer {
        padding: 1.5rem 1rem;
        margin-bottom: 1.5rem;
        border-radius: 12px;
    }

    .quick-answer h2 {
        font-size: 1.4rem;
        line-height: 1.3;
    }

    .quick-answer p {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .calorie-table-section {
        padding: 1.5rem 1rem;
        margin-bottom: 1.5rem;
        border-radius: 12px;
    }

    .calorie-table-section h3 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .calorie-reference-table {
        border-radius: 8px;
    }

    .calorie-reference-table th,
    .calorie-reference-table td {
        padding: 0.8rem 0.4rem;
        font-size: 0.85rem;
    }

    .calorie-reference-table th {
        font-size: 0.9rem;
    }
}

/* Ultra-small mobile devices */
@media (max-width: 480px) {
    .quick-answer {
        padding: 1.2rem 0.8rem;
        margin: 0 -0.5rem 1.2rem;
    }

    .quick-answer h2 {
        font-size: 1.3rem;
    }

    .quick-answer p {
        font-size: 0.9rem;
    }

    .calorie-table-section {
        padding: 1.2rem 0.8rem;
        margin: 0 -0.5rem 1.2rem;
    }

    .calorie-reference-table th,
    .calorie-reference-table td {
        padding: 0.6rem 0.3rem;
        font-size: 0.8rem;
    }

    /* Mobile table clickability */
    .calorie-reference-table tbody tr.clickable-row::after {
        display: none; /* Hide tooltip on mobile */
    }

    .calorie-reference-table tbody tr.clickable-row:hover {
        transform: none; /* Simpler transform on mobile */
        background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
    }

    .table-note {
        font-size: 0.9rem;
        text-align: center;
        padding: 1rem;
        background: #f8fafc;
        border-radius: 8px;
        margin-top: 1rem;
        border-left: 4px solid #3b82f6;
    }
}

/* ========== TOAST AND NOTIFICATION STYLES ========== */

.toast-notification {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toast-icon {
    font-size: 1.1rem;
}

.toast-message {
    flex: 1;
}

/* Achievement and Favorites Styles */
.achievement-toast {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.achievement-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.achievement-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.achievement-text {
    flex: 1;
}

.achievement-title {
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

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

.achievement-description {
    font-size: 0.85rem;
    opacity: 0.9;
}

.history-item.favorite-item {
    background: linear-gradient(135deg, #fff8dc 0%, #fef3c7 100%);
    border-left: 4px solid #ffd700;
}

.btn-favorite, .btn-reuse {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-favorite:hover, .btn-reuse:hover {
    background: #f1f5f9;
    transform: scale(1.1);
}

/* ========== ACHIEVEMENT TOAST MOBILE ADJUSTMENTS ========== */

@media (max-width: 480px) {
    /* Achievement toast mobile adjustments */
    .achievement-toast {
        right: 10px;
        left: 10px;
        top: 80px;
        max-width: none;
        padding: 1rem;
    }

    .achievement-icon {
        font-size: 1.5rem;
    }

    .achievement-title, .achievement-name {
        font-size: 0.9rem;
    }

    .achievement-description {
        font-size: 0.8rem;
    }

    /* History item adjustments */
    .history-item {
        padding: 0.8rem;
    }

    .history-actions {
        gap: 0.3rem;
    }

    .btn-favorite, .btn-reuse {
        padding: 0.4rem;
    }
}

/* ========== INTERPRETATION SECTIONS ========== */

.interpretation-section, .recommendations-section, .health-insights-section {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.main-interpretation {
    font-size: 1.1rem;
    font-weight: 500;
    color: #1e40af;
    margin-bottom: 0.5rem;
}

.recommendation-list, .insights-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recommendation-list li, .insights-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.95rem;
}

.recommendation-list li:last-child, .insights-list li:last-child {
    border-bottom: none;
}
/* Main container specific styles - Desktop friendly */
                .main-container {
                    max-width: 1200px;
                    margin: 0 auto;
                    box-sizing: border-box;
                    padding: 0 20px;
                }
                /* Modern Breadcrumb Styles */
.breadcrumb {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    position: relative;
    overflow: hidden;
}

.breadcrumb-list {
    display: contents;
}

.breadcrumb::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}

.breadcrumb a {
    color: #4f46e5;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    min-height: 32px;
    display: flex;
    align-items: center;
    position: relative;
}

.breadcrumb a:hover {
    color: #7c3aed;
    background: rgba(79, 70, 229, 0.1);
    transform: translateY(-1px);
}

.breadcrumb-separator {
    margin: 0 0.3rem;
    color: #94a3b8;
    font-weight: 400;
    font-size: 0.8rem;
}

.breadcrumb span:last-child {
    color: #1e293b;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    background: rgba(79, 70, 229, 0.05);
    border-radius: 6px;
    min-height: 32px;
    display: flex;
    align-items: center;
}

/* Enhanced Mobile Breadcrumb */
@media (max-width: 768px) {
    .breadcrumb {
        font-size: 0.85rem;
        margin-bottom: 1rem;
        padding: 0.8rem 1rem;
        border-radius: 10px;
        gap: 0.2rem;
    }

    .breadcrumb a,
    .breadcrumb span:last-child {
        padding: 0.25rem 0.5rem;
        min-height: 28px;
        font-size: 0.85rem;
    }

    .breadcrumb-separator {
        margin: 0 0.2rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .breadcrumb {
        font-size: 0.8rem;
        padding: 0.7rem 0.8rem;
        margin: 0 -0.5rem 1rem;
        border-radius: 8px;
        gap: 0.15rem;
    }

    .breadcrumb a,
    .breadcrumb span:last-child {
        padding: 0.2rem 0.4rem;
        min-height: 26px;
        font-size: 0.8rem;
        border-radius: 4px;
    }

    .breadcrumb-separator {
        margin: 0 0.15rem;
        font-size: 0.7rem;
    }
}

/* Ultra-small devices */
@media (max-width: 360px) {
    .breadcrumb {
        font-size: 0.75rem;
        padding: 0.6rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }

    .breadcrumb a,
    .breadcrumb span:last-child {
        padding: 0.15rem 0.3rem;
        min-height: 24px;
        font-size: 0.75rem;
    }

    .breadcrumb-separator {
        display: none;
    }

    .breadcrumb a::after {
        content: ' >';
        color: #94a3b8;
        margin-left: 0.3rem;
    }

    .breadcrumb span:last-child::after {
        display: none;
    }
}
                
                /* Desktop optimizations */
                @media (min-width: 1200px) {
                    .main-container {
                        padding: 0 40px;
                    }
                }
                
                @media (min-width: 992px) {
                    .main-container {
                        padding: 0 30px;
                    }
                }
                
                @media (max-width: 576px) {
                    .main-container {
                        padding: 0 15px;
                    }
                }
                
                /* Tool header styles */
                .tool-header {
                    text-align: center;
                    margin-bottom: 2rem;
                    padding: 1.5rem;
                    background-color: #f8f9fa;
                    border-radius: 8px;
                }
                
                .tool-header h1 {
                    font-size: 2.2rem;
                    font-weight: 700;
                    margin-bottom: 1rem;
                    color: #333;
                }
                
                .tool-header p {
                    font-size: 1.1rem;
                    color: #555;
                    max-width: 800px;
                    margin: 0 auto;
                    line-height: 1.6;
                }
                
                
                @media (max-width: 768px) {
                    .tool-header h1 {
                        font-size: 1.8rem;
                    }
                    
                    .tool-header p {
                        font-size: 1rem;
                    }
                }

                /* ========== QUICK ANSWER BOX STYLES ========== */
                
                .quick-answer-box {
                    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
                    border-left: 5px solid #dc2626;
                    padding: 2.5rem;
                    margin: 2rem auto;
                    border-radius: 16px;
                    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.2);
                    max-width: 1200px;
                    transition: all 0.3s ease;
                }
                
                .quick-answer-box:hover {
                    box-shadow: 0 12px 35px rgba(220, 38, 38, 0.25);
                }
                
                .quick-answer-box h2 {
                    margin-top: 0;
                    margin-bottom: 1.5rem;
                    color: #991b1b;
                    font-size: 2rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 15px;
                    font-weight: 700;
                    text-shadow: 0 2px 4px rgba(153, 27, 27, 0.1);
                }
                
                .quick-answer-box h2 span {
                    font-size: 2.5rem;
                    animation: pulse 2s ease-in-out infinite;
                }
                
                @keyframes pulse {
                    0%, 100% { transform: scale(1); }
                    50% { transform: scale(1.1); }
                }
                
                .quick-stats-grid {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 1.5rem;
                    margin: 2rem 0;
                }
                
                .stat-card {
                    background: white;
                    padding: 2rem 1.5rem;
                    border-radius: 12px;
                    text-align: center;
                    border: 2px solid #fecaca;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    position: relative;
                    overflow: hidden;
                }
                
                .stat-card::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 4px;
                    background: linear-gradient(90deg, #dc2626, #f87171);
                    transform: scaleX(0);
                    transition: transform 0.3s ease;
                }
                
                .stat-card:hover::before {
                    transform: scaleX(1);
                }
                
                .stat-card:hover {
                    transform: translateY(-8px);
                    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.25);
                    border-color: #dc2626;
                }
                
                .stat-label {
                    font-size: 1rem;
                    color: #666;
                    margin-bottom: 0.75rem;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                }
                
                .stat-value {
                    font-size: 2.2rem;
                    font-weight: 800;
                    color: #dc2626;
                    margin: 0.5rem 0;
                    line-height: 1.2;
                    text-shadow: 0 2px 4px rgba(220, 38, 38, 0.1);
                }
                
                .stat-note {
                    font-size: 0.875rem;
                    color: #999;
                    margin-top: 0.5rem;
                    font-style: italic;
                }
                
                .quick-answer-note {
                    margin: 2rem 0 0 0;
                    font-size: 1rem;
                    color: #666;
                    text-align: center;
                    padding: 1rem;
                    background: rgba(255, 255, 255, 0.6);
                    border-radius: 8px;
                    font-weight: 500;
                }
                
                /* Desktop enhancements */
                @media (min-width: 1200px) {
                    .quick-answer-box {
                        padding: 3rem;
                        margin: 2.5rem auto;
                    }
                    
                    .quick-stats-grid {
                        gap: 2rem;
                        margin: 2.5rem 0;
                    }
                    
                    .stat-card {
                        padding: 2.5rem 2rem;
                    }
                    
                    .stat-value {
                        font-size: 2.5rem;
                    }
                }
                
                /* Tablet landscape */
                @media (min-width: 992px) and (max-width: 1199px) {
                    .quick-answer-box {
                        padding: 2rem;
                    }
                    
                    .quick-stats-grid {
                        grid-template-columns: repeat(4, 1fr);
                        gap: 1.25rem;
                    }
                    
                    .stat-value {
                        font-size: 2rem;
                    }
                }
                
                /* Mobile-friendly Quick Answer Box */
                @media (max-width: 991px) {
                    .quick-stats-grid {
                        grid-template-columns: repeat(2, 1fr);
                    }
                }
                
                @media (max-width: 768px) {
                    .quick-answer-box {
                        padding: 1.5rem;
                        margin: 1.5rem auto;
                        border-radius: 12px;
                    }
                    
                    .quick-answer-box h2 {
                        font-size: 1.3rem;
                        gap: 8px;
                        margin-bottom: 1rem;
                    }
                    
                    .quick-answer-box h2 span {
                        font-size: 1.5rem;
                    }
                    
                    .quick-stats-grid {
                        grid-template-columns: repeat(2, 1fr);
                        gap: 1rem;
                        margin: 1.5rem 0;
                    }
                    
                    .stat-card {
                        padding: 1.25rem 1rem;
                    }
                    
                    .stat-label {
                        font-size: 0.8rem;
                        margin-bottom: 0.5rem;
                    }
                    
                    .stat-value {
                        font-size: 1.5rem;
                    }
                    
                    .stat-note {
                        font-size: 0.75rem;
                    }
                    
                    .quick-answer-note {
                        font-size: 0.875rem;
                        padding: 0.75rem;
                        margin-top: 1.5rem;
                    }
                }
                
                @media (max-width: 480px) {
                    .quick-answer-box {
                        padding: 1.25rem;
                        margin: 1.25rem 10px;
                        border-radius: 10px;
                    }
                    
                    .quick-answer-box h2 {
                        font-size: 1.1rem;
                        flex-direction: column;
                        text-align: center;
                        gap: 5px;
                    }
                    
                    .quick-stats-grid {
                        gap: 0.75rem;
                        margin: 1rem 0;
                    }
                    
                    .stat-card {
                        padding: 1rem 0.75rem;
                    }
                    
                    .stat-label {
                        font-size: 0.7rem;
                    }
                    
                    .stat-value {
                        font-size: 1.3rem;
                    }
                    
                    .stat-note {
                        font-size: 0.65rem;
                    }
                    
                    .quick-answer-note {
                        font-size: 0.8rem;
                        padding: 0.6rem;
                    }
                }

                /* Quick Answer Section Styles */
                .quick-answer {
                    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
                    color: white;
                    padding: 2rem;
                    border-radius: 16px;
                    margin-bottom: 2rem;
                    text-align: center;
                    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.3);
                    position: relative;
                    overflow: hidden;
                }

                .quick-answer::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 100%);
                    pointer-events: none;
                }

                .quick-answer h2 {
                    font-size: 1.8rem;
                    font-weight: 700;
                    margin-bottom: 1rem;
                    color: white;
                    position: relative;
                    z-index: 1;
                }

                .quick-answer p {
                    font-size: 1.1rem;
                    margin-bottom: 0.5rem;
                    opacity: 0.95;
                    position: relative;
                    z-index: 1;
                }

                /* Calorie Reference Table Styles */
                .calorie-table-section {
                    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
                    padding: 2rem;
                    border-radius: 16px;
                    margin-bottom: 2rem;
                    border: 1px solid #cbd5e1;
                    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
                }

                .calorie-table-section h3 {
                    font-size: 1.5rem;
                    font-weight: 600;
                    margin-bottom: 1.5rem;
                    color: #1e293b;
                    text-align: center;
                }

                .calorie-reference-table {
                    width: 100%;
                    border-collapse: collapse;
                    background: white;
                    border-radius: 12px;
                    overflow: hidden;
                    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
                }

                .calorie-reference-table th,
                .calorie-reference-table td {
                    padding: 1.2rem;
                    text-align: center;
                    border-bottom: 1px solid #e2e8f0;
                }

                .calorie-reference-table th {
                    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
                    color: white;
                    font-weight: 600;
                    font-size: 1rem;
                    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
                }

                .calorie-reference-table td {
                    font-size: 0.95rem;
                    color: #374151;
                    font-weight: 500;
                }

                .calorie-reference-table tbody tr:hover {
                    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
                    transform: scale(1.01);
                    transition: all 0.2s ease;
                }

                /* Clickable table row styles */
                .calorie-reference-table tbody tr.clickable-row {
                    cursor: pointer;
                    position: relative;
                    transition: all 0.2s ease;
                }

                .calorie-reference-table tbody tr.clickable-row::after {
                    content: '👆 Click to auto-fill calculator';
                    position: absolute;
                    right: -200px;
                    top: 50%;
                    transform: translateY(-50%);
                    background: #3b82f6;
                    color: white;
                    padding: 4px 8px;
                    border-radius: 6px;
                    font-size: 0.75rem;
                    opacity: 0;
                    transition: all 0.3s ease;
                    pointer-events: none;
                    white-space: nowrap;
                    z-index: 10;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
                }

                .calorie-reference-table tbody tr.clickable-row:hover::after {
                    opacity: 1;
                    right: -190px;
                }

                .calorie-reference-table tbody tr.clickable-row:hover {
                    background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
                    transform: translateX(5px);
                    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
                }

                .calorie-reference-table tbody tr.row-selected {
                    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
                    transform: scale(1.02);
                    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
                }

                /* Toast notification styles */
                .toast-notification {
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                }

                .toast-content {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }

                .toast-icon {
                    font-size: 1.1rem;
                }

                .toast-message {
                    flex: 1;
                }

                /* Achievement and Favorites Styles */
                .achievement-toast {
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                }

                .achievement-content {
                    display: flex;
                    align-items: flex-start;
                    gap: 1rem;
                }

                .achievement-icon {
                    font-size: 2rem;
                    flex-shrink: 0;
                }

                .achievement-text {
                    flex: 1;
                }

                .achievement-title {
                    font-weight: bold;
                    font-size: 0.9rem;
                    margin-bottom: 0.25rem;
                }

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

                .achievement-description {
                    font-size: 0.85rem;
                    opacity: 0.9;
                }

                .history-item.favorite-item {
                    background: linear-gradient(135deg, #fff8dc 0%, #fef3c7 100%);
                    border-left: 4px solid #ffd700;
                }

                .btn-favorite, .btn-reuse {
                    background: none;
                    border: none;
                    cursor: pointer;
                    padding: 0.25rem;
                    border-radius: 4px;
                    transition: all 0.2s ease;
                }

                .btn-favorite:hover, .btn-reuse:hover {
                    background: #f1f5f9;
                    transform: scale(1.1);
                }

                .interpretation-section, .recommendations-section, .health-insights-section {
                    margin-bottom: 1.5rem;
                    padding: 1rem;
                    border-radius: 8px;
                    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
                }

                .main-interpretation {
                    font-size: 1.1rem;
                    font-weight: 500;
                    color: #1e40af;
                    margin-bottom: 0.5rem;
                }

                .recommendation-list, .insights-list {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                }

                .recommendation-list li, .insights-list li {
                    padding: 0.5rem 0;
                    border-bottom: 1px solid #e5e7eb;
                    font-size: 0.95rem;
                }

                .recommendation-list li:last-child, .insights-list li:last-child {
                    border-bottom: none;
                }

                /* Enhanced Mobile responsive styles */
                @media (max-width: 768px) {
                    .quick-answer {
                        padding: 1.5rem 1rem;
                        margin-bottom: 1.5rem;
                        border-radius: 12px;
                    }

                    .quick-answer h2 {
                        font-size: 1.4rem;
                        line-height: 1.3;
                    }

                    .quick-answer p {
                        font-size: 0.95rem;
                        line-height: 1.5;
                    }

                    .calorie-table-section {
                        padding: 1.5rem 1rem;
                        margin-bottom: 1.5rem;
                        border-radius: 12px;
                    }

                    .calorie-table-section h3 {
                        font-size: 1.2rem;
                        margin-bottom: 1rem;
                    }

                    .calorie-reference-table {
                        border-radius: 8px;
                    }

                    .calorie-reference-table th,
                    .calorie-reference-table td {
                        padding: 0.8rem 0.4rem;
                        font-size: 0.85rem;
                    }

                    .calorie-reference-table th {
                        font-size: 0.9rem;
                    }
                }

                /* Ultra-small mobile devices */
                @media (max-width: 480px) {
                    .quick-answer {
                        padding: 1.2rem 0.8rem;
                        margin: 0 -0.5rem 1.2rem;
                    }

                    .quick-answer h2 {
                        font-size: 1.3rem;
                    }

                    .quick-answer p {
                        font-size: 0.9rem;
                    }

                    /* Achievement toast mobile adjustments */
                    .achievement-toast {
                        right: 10px;
                        left: 10px;
                        top: 80px;
                        max-width: none;
                        padding: 1rem;
                    }

                    .achievement-icon {
                        font-size: 1.5rem;
                    }

                    .achievement-title, .achievement-name {
                        font-size: 0.9rem;
                    }

                    .achievement-description {
                        font-size: 0.8rem;
                    }

                    /* History item adjustments */
                    .history-item {
                        padding: 0.8rem;
                    }

                    .history-actions {
                        gap: 0.3rem;
                    }

                    .btn-favorite, .btn-reuse {
                        padding: 0.4rem;
                    }

                    /* Mobile table clickability */
                    .calorie-reference-table tbody tr.clickable-row::after {
                        display: none; /* Hide tooltip on mobile */
                    }

                    .calorie-reference-table tbody tr.clickable-row:hover {
                        transform: none; /* Simpler transform on mobile */
                        background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
                    }

                    .table-note {
                        font-size: 0.9rem;
                        text-align: center;
                        padding: 1rem;
                        background: #f8fafc;
                        border-radius: 8px;
                        margin-top: 1rem;
                        border-left: 4px solid #3b82f6;
                    }

                    .calorie-table-section {
                        padding: 1.2rem 0.8rem;
                        margin: 0 -0.5rem 1.2rem;
                    }

                    .calorie-reference-table th,
                    .calorie-reference-table td {
                        padding: 0.6rem 0.3rem;
                        font-size: 0.8rem;
                    }
                }

                /* Social Proof Styles */
                .social-proof {
                    text-align: center;
                    margin-top: 1rem;
                    padding: 1rem;
                    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
                    border-radius: 12px;
                    border: 1px solid rgba(79, 70, 229, 0.2);
                    -webkit-backdrop-filter: blur(10px);
                    backdrop-filter: blur(10px);
                }

                .social-proof p {
                    margin: 0;
                    font-size: 0.95rem;
                    color: #4f46e5;
                    font-weight: 600;
                    text-shadow: 0 1px 2px rgba(0,0,0,0.05);
                }

                .social-proof i {
                    color: #7c3aed;
                    margin-right: 0.5rem;
                    font-size: 1rem;
                }

                @media (max-width: 768px) {
                    .social-proof {
                        padding: 0.8rem;
                        margin-top: 0.8rem;
                    }
                    
                    .social-proof p {
                        font-size: 0.85rem;
                        line-height: 1.4;
                    }
                }

                @media (max-width: 480px) {
                    .social-proof p {
                        font-size: 0.8rem;
                    }
                }

                /* Related Tools Styles */
                .related-tools {
                    margin-top: 2rem;
                    padding-top: 1.5rem;
                    border-top: 2px solid #e2e8f0;
                }

                .related-tools h4 {
                    font-size: 1.1rem;
                    font-weight: 600;
                    color: #1e293b;
                    margin-bottom: 1rem;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }

                .related-tools h4 i {
                    color: #4f46e5;
                }

                .tool-links {
                    display: flex;
                    flex-direction: column;
                    gap: 0.75rem;
                }

                .tool-link {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    padding: 1rem;
                    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
                    border: 1px solid #e2e8f0;
                    border-radius: 12px;
                    text-decoration: none;
                    color: #374151;
                    transition: all 0.3s ease;
                    font-size: 0.9rem;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
                }

                .tool-link:hover {
                    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
                    border-color: #4f46e5;
                    color: #4f46e5;
                    transform: translateY(-3px);
                    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.15);
                }

                .tool-link i {
                    color: #4f46e5;
                    font-size: 1.1rem;
                    min-width: 18px;
                }

                .tool-link span {
                    font-weight: 500;
                }

                /* Enhanced Mobile Styles for Related Tools */
                @media (max-width: 768px) {
                    .related-tools {
                        margin-top: 1.5rem;
                        padding-top: 1rem;
                    }

                    .tool-link {
                        padding: 0.8rem;
                        font-size: 0.85rem;
                        border-radius: 10px;
                    }

                    .tool-link i {
                        font-size: 1rem;
                        min-width: 16px;
                    }
                }

                @media (max-width: 480px) {
                    .tool-link {
                        padding: 0.7rem;
                        font-size: 0.8rem;
                        gap: 0.6rem;
                    }
                }

                /* Enhanced Button Styles */
                .btn-calculate {
                    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
                    color: white;
                    border: none;
                    padding: 1rem 2rem;
                    border-radius: 12px;
                    font-size: 1.1rem;
                    font-weight: 600;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
                    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
                    min-height: 56px;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.5rem;
                }

                .btn-calculate:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
                    background: linear-gradient(135deg, #5b52e8 0%, #8b5cf6 100%);
                }

                .btn-calculate:active {
                    transform: translateY(0);
                    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
                }

                /* Mobile Button Optimizations */
                @media (max-width: 768px) {
                    .btn-calculate {
                        padding: 1rem 1.5rem;
                        font-size: 1rem;
                        min-height: 52px;
                        border-radius: 10px;
                    }
                }

                @media (max-width: 480px) {
                    .btn-calculate {
                        padding: 0.9rem 1.2rem;
                        font-size: 0.95rem;
                        min-height: 48px;
                        border-radius: 8px;
                    }
                }

                /* Table CTA Button Styles */
                .table-cta {
                    text-align: center;
                    margin-top: 1.5rem;
                    padding-top: 1.5rem;
                    border-top: 2px solid #e2e8f0;
                }

                .btn-table-calculate {
                    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
                    color: white;
                    border: none;
                    padding: 0.9rem 1.8rem;
                    border-radius: 10px;
                    font-size: 1rem;
                    font-weight: 600;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
                    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
                    min-height: 48px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.5rem;
                    margin-bottom: 0.75rem;
                }

                .btn-table-calculate:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
                    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
                }

                .btn-table-calculate:active {
                    transform: translateY(0);
                    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
                }

                .table-note {
                    font-size: 0.85rem;
                    color: #6b7280;
                    margin: 0;
                    font-style: italic;
                }

                @media (max-width: 768px) {
                    .table-cta {
                        margin-top: 1rem;
                        padding-top: 1rem;
                    }

                    .btn-table-calculate {
                        padding: 0.8rem 1.5rem;
                        font-size: 0.95rem;
                        min-height: 44px;
                    }

                    .table-note {
                        font-size: 0.8rem;
                    }
                }

                @media (max-width: 480px) {
                    .btn-table-calculate {
                        padding: 0.7rem 1.2rem;
                        font-size: 0.9rem;
                        min-height: 42px;
                        border-radius: 8px;
                    }
                }

                 /* Desktop-First Layout Optimizations */
            
            /* Enhanced Desktop Grid Layout */
            @media (min-width: 992px) {
                .desktop-form-container {
                    display: grid;
                    grid-template-columns: 1fr 350px;
                    gap: 2.5rem;
                    align-items: start;
                    min-height: 60vh;
                }
                
                .desktop-form-column {
                    min-height: 100%;
                    display: flex;
                    flex-direction: column;
                    gap: 1.5rem;
                }
                
                .desktop-info-column {
                    position: sticky;
                    top: 2rem;
                    height: fit-content;
                }
                
                .desktop-optimized-card {
                    max-width: none;
                    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
                    border: none;
                    border-radius: 12px;
                }
                
                .desktop-card-body {
                    padding: 2.5rem;
                }
                
                .desktop-calculator-layout {
                    max-width: none;
                }
                
                .desktop-form-section {
                    margin-bottom: 0;
                    padding: 2rem;
                    border-radius: 10px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
                    border: 1px solid #e8e9ea;
                    background: #fafbfc;
                }
                
                /* Enhanced form responsiveness */
                .personal-info-row {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 1.5rem;
                }
                
                .walking-details-row {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 1.5rem;
                }
                
                /* Desktop button styling */
                .desktop-btn-calculate {
                    margin-top: 2rem;
                    padding: 1rem 2rem;
                    font-size: 1.1rem;
                    min-height: 56px;
                    border-radius: 8px;
                    font-weight: 600;
                    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
                    transition: all 0.3s ease;
                }
                
                .desktop-btn-calculate:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 6px 20px rgba(0,123,255,0.4);
                }
                
                /* Desktop results section */
                .desktop-results-section {
                    margin-top: 2rem;
                    grid-column: 1 / -1;
                    background: #f8f9fa;
                    border-radius: 12px;
                    padding: 2rem;
                    border: 1px solid #e9ecef;
                }
            }
            
            /* Ultra-wide desktop optimizations */
            @media (min-width: 1400px) {
                .desktop-form-container {
                    gap: 3rem;
                    grid-template-columns: 1fr 400px;
                }
                
                .desktop-card-body {
                    padding: 3rem;
                }
                
                .desktop-form-section {
                    padding: 2.5rem;
                }
            }
            
            /* Desktop Quick Info Panel */
            .desktop-quick-info {
                background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
                border-radius: 12px;
                padding: 1.5rem;
                box-shadow: 0 6px 20px rgba(0,0,0,0.1);
                border: 1px solid #e0e0e0;
                position: relative;
                overflow: hidden;
                transition: all 0.3s ease;
            }
            
            .desktop-quick-info:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            }
            
            .desktop-quick-info::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: linear-gradient(90deg, #007bff, #28a745, #ffc107, #dc3545);
            }
            
            .quick-info-title {
                font-size: 1.3rem;
                font-weight: 600;
                color: #333;
                margin-bottom: 1.25rem;
                display: flex;
                align-items: center;
                gap: 0.5rem;
                padding-top: 0.5rem;
            }
            
            .quick-info-title i {
                color: #007bff;
                font-size: 1.2rem;
            }
            
            .quick-info-content {
                display: flex;
                flex-direction: column;
                gap: 1rem;
            }
            
            .quick-info-item {
                display: flex;
                align-items: center;
                gap: 1rem;
                padding: 1rem;
                background: white;
                border-radius: 10px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.06);
                border-left: 4px solid #007bff;
                transition: all 0.3s ease;
                cursor: pointer;
            }
            
            .quick-info-item:nth-child(2) {
                border-left-color: #28a745;
            }
            
            .quick-info-item:nth-child(3) {
                border-left-color: #ffc107;
            }
            
            .quick-info-item:nth-child(4) {
                border-left-color: #dc3545;
            }
            
            .quick-info-item:hover {
                transform: translateX(8px);
                box-shadow: 0 6px 15px rgba(0,0,0,0.15);
            }
            
            .quick-info-item i {
                color: #007bff;
                font-size: 1rem;
                min-width: 16px;
            }
            
            .quick-info-item span {
                color: #333;
                font-size: 0.9rem;
                line-height: 1.4;
                font-weight: 500;
            }
            
            /* Desktop Form Improvements */
            @media (min-width: 992px) {
                .personal-info-row {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 1rem;
                }
                
                .walking-details-row {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 1rem;
                }
                
                .desktop-form-row .form-group {
                    margin-bottom: 0;
                }
                
                .desktop-btn-calculate {
                    width: auto;
                    min-width: 200px;
                    padding: 0.875rem 2rem;
                    font-size: 1.1rem;
                    font-weight: 600;
                    border-radius: 8px;
                    margin-top: 1.5rem;
                    transition: all 0.3s ease;
                }
                
                .desktop-btn-calculate:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
                }
            }
            
            /* Desktop Card Enhancements */
            @media (min-width: 992px) {
                .desktop-optimized-card {
                    border-radius: 12px;
                    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
                    border: 1px solid #e0e0e0;
                    overflow: hidden;
                }
                
                .card-header {
                    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
                    border-bottom: 1px solid #e0e0e0;
                    padding: 1.5rem 2rem;
                }
                
                .card-header h2 {
                    font-size: 1.75rem;
                    font-weight: 700;
                    color: #111;
                    margin: 0;
                }
            }
            
            /* Enhanced Input Styling for Desktop */
            @media (min-width: 992px) {
                .form-input {
                    height: 48px;
                    font-size: 1rem;
                    border-radius: 8px;
                    border: 2px solid #e1e5e9;
                    transition: all 0.2s ease;
                    background-color: #fff;
                }
                
                .form-input:focus {
                    border-color: #007bff;
                    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
                    transform: translateY(-1px);
                }
                
                .form-input:hover {
                    border-color: #b3d7ff;
                }
                
                .form-label {
                    font-weight: 600;
                    color: #333;
                    margin-bottom: 0.5rem;
                    font-size: 1rem;
                }
                
                .help-text {
                    font-size: 0.875rem;
                    color: #6c757d;
                    margin-top: 0.25rem;
                    line-height: 1.4;
                }
            }
            
            /* Tablet Layout - 768px to 991px */
            @media (min-width: 768px) and (max-width: 991px) {
                .desktop-form-container {
                    display: block;
                }
                
                .personal-info-row {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 1rem;
                }
                
                .personal-info-row .form-group:last-child {
                    grid-column: 1 / -1;
                    max-width: 50%;
                    margin: 0 auto;
                }
                
                .walking-details-row {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 1rem;
                }
                
                .desktop-quick-info {
                    margin-top: 1.5rem;
                    position: static;
                }
            }
            
            /* Mobile compatibility - maintain existing mobile styles */
            @media (max-width: 767px) {
                .desktop-form-container {
                    display: block;
                }
                
                .desktop-info-column {
                    margin-top: 1rem;
                    position: static;
                }
                
                .personal-info-row,
                .walking-details-row {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                }
                
                .desktop-quick-info {
                    padding: 1rem;
                }
                
                .quick-info-item {
                    padding: 0.5rem;
                }
                
                .quick-info-item span {
                    font-size: 0.85rem;
                }
            }
            
            /* Dark Mode Enhancements for Desktop */
            body.dark-mode .desktop-quick-info {
                background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
                border-color: #444;
            }
            
            body.dark-mode .quick-info-title {
                color: #ddd;
            }
            
            body.dark-mode .quick-info-title i {
                color: #66b3ff;
            }
            
            body.dark-mode .quick-info-item {
                background: #333;
                border-left-color: #66b3ff;
            }
            
            body.dark-mode .quick-info-item i {
                color: #66b3ff;
            }
            
            body.dark-mode .quick-info-item span {
                color: #ddd;
            }
            
            body.dark-mode .desktop-optimized-card {
                border-color: #444;
                box-shadow: 0 8px 25px rgba(0,0,0,0.3);
            }
            
            body.dark-mode .card-header {
                background: linear-gradient(135deg, #333 0%, #2a2a2a 100%);
                border-color: #444;
            }
            
            /* Large Desktop Optimization - 1400px+ */
            @media (min-width: 1400px) {
                .main-container {
                    max-width: 1400px;
                    padding: 0 50px;
                }
                
                .desktop-form-container {
                    grid-template-columns: 1fr 400px;
                    gap: 3rem;
                }
                
                .desktop-card-body {
                    padding: 2.5rem;
                }
                
                .desktop-quick-info {
                    padding: 2rem;
                }
                
                .card-header h2 {
                    font-size: 2rem;
                }
            }
            
            /* Ultra-wide Desktop - 1600px+ */
            @media (min-width: 1600px) {
                .main-container {
                    max-width: 1600px;
                }
                
                .desktop-form-container {
                    grid-template-columns: 1fr 450px;
                    gap: 4rem;
                }
            }
            
            /* Desktop Results Section Enhancements */
            .desktop-results-section {
                margin-top: 2rem;
                animation: slideInUp 0.6s ease-out;
            }
            
            @keyframes slideInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            .desktop-results-card {
                background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
                border-radius: 12px;
                padding: 1.5rem;
                box-shadow: 0 6px 20px rgba(0,0,0,0.1);
                border: 1px solid #e0e0e0;
            }
            
            /* Desktop Results Grid Layout */
            @media (min-width: 992px) {
                .desktop-results-grid {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 1.5rem;
                }
                
                .result-item {
                    display: flex;
                    align-items: center;
                    gap: 1rem;
                    padding: 1.25rem;
                    background: white;
                    border-radius: 10px;
                    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
                    border-left: 4px solid #007bff;
                    transition: all 0.3s ease;
                    min-height: 80px;
                }
                
                .result-item:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
                }
                
                .highlight-result {
                    grid-column: 1 / -1;
                    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
                    color: white;
                    border-left-color: #ffc107;
                }
                
                .highlight-result .result-icon i {
                    color: #ffc107;
                }
                
                .highlight-result .result-label,
                .highlight-result .result-value {
                    color: white;
                }
                
                .result-icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 50px;
                    height: 50px;
                    background: rgba(0, 123, 255, 0.1);
                    border-radius: 50%;
                    flex-shrink: 0;
                }
                
                .result-icon i {
                    font-size: 1.5rem;
                    color: #007bff;
                }
                
                .result-content {
                    display: flex;
                    flex-direction: column;
                    gap: 0.25rem;
                    flex-grow: 1;
                }
                
                .result-label {
                    font-size: 0.9rem;
                    font-weight: 600;
                    color: #666;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                }
                
                .result-value {
                    font-size: 1.4rem;
                    font-weight: 700;
                    color: #333;
                }
                
                .highlight-value {
                    font-size: 1.6rem;
                    color: #ffc107;
                }
            }
            
            /* Desktop Action Buttons */
            @media (min-width: 992px) {
                .desktop-action-buttons {
                    display: flex;
                    justify-content: center;
                    gap: 1rem;
                    margin-top: 2rem;
                }
                
                .desktop-reset-btn,
                .desktop-share-btn {
                    padding: 0.875rem 2rem;
                    font-size: 1rem;
                    font-weight: 600;
                    border-radius: 8px;
                    border: none;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    transition: all 0.3s ease;
                    min-width: 160px;
                    justify-content: center;
                }
                
                .desktop-reset-btn {
                    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
                    color: white;
                }
                
                .desktop-reset-btn:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 6px 20px rgba(108, 117, 125, 0.3);
                }
                
                .desktop-share-btn {
                    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
                    color: white;
                }
                
                .desktop-share-btn:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
                }
            }
            
            /* Desktop Results Details */
            .desktop-results-details {
                margin-top: 2rem;
                padding: 1.5rem;
                background: white;
                border-radius: 10px;
                box-shadow: 0 3px 10px rgba(0,0,0,0.08);
                border-left: 4px solid #28a745;
            }
            
            /* Desktop History Panel Enhancements */
            @media (min-width: 992px) {
                .history-panel {
                    background: white;
                    border-radius: 12px;
                    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
                    border: 1px solid #e0e0e0;
                    margin-top: 2rem;
                }
                
                .history-title {
                    padding: 1.5rem;
                    border-bottom: 1px solid #e0e0e0;
                    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
                    border-radius: 12px 12px 0 0;
                }
                
                .history-list {
                    max-height: 400px;
                    overflow-y: auto;
                }
                
                .history-item {
                    padding: 1.25rem 1.5rem;
                    border-bottom: 1px solid #f0f0f0;
                    transition: background-color 0.2s ease;
                }
                
                .history-item:hover {
                    background-color: #f8f9fa;
                }
            }
            
            /* Mobile-Friendly History Panel */
            .mobile-history-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                flex-wrap: wrap;
                gap: 1rem;
                padding: 1rem 1.25rem;
                background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
                border-bottom: 1px solid #e0e0e0;
            }
            
            .history-title-content {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                flex-grow: 1;
            }
            
            .history-title-content h3 {
                margin: 0;
                font-size: 1.2rem;
                font-weight: 600;
                color: #333;
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }
            
            .mobile-history-info {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                font-size: 0.85rem;
                color: #666;
            }
            
            .mobile-history-info i {
                color: #007bff;
                font-size: 0.9rem;
            }
            
            .mobile-history-actions {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                flex-shrink: 0;
            }
            
            .mobile-clear-btn {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.75rem 1rem;
                background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
                color: white;
                border: none;
                border-radius: 6px;
                font-size: 0.9rem;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.2s ease;
                box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
            }
            
            .mobile-clear-btn:hover {
                background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);
                transform: translateY(-1px);
                box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
            }
            
            .mobile-clear-btn:active {
                transform: translateY(0);
                box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
            }
            
            /* Mobile responsive adjustments */
            @media (max-width: 576px) {
                .mobile-history-header {
                    flex-direction: column;
                    align-items: stretch;
                    gap: 1rem;
                    padding: 1rem;
                }
                
                .history-title-content {
                    align-items: flex-start;
                }
                
                .mobile-history-info {
                    font-size: 0.8rem;
                    line-height: 1.4;
                }
                
                .mobile-history-info .history-info-tooltip {
                    display: block;
                    margin-top: 0.25rem;
                }
                
                .mobile-history-actions {
                    justify-content: stretch;
                }
                
                .mobile-clear-btn {
                    width: 100%;
                    justify-content: center;
                    padding: 0.875rem 1rem;
                    font-size: 1rem;
                    min-height: 44px; /* Better touch target */
                }
                
                .clear-text {
                    margin-left: 0.25rem;
                }
            }
            
            /* Enhanced History Items with Star Functionality */
            .history-item {
                position: relative;
                padding: 1rem;
                border-bottom: 1px solid #f0f0f0;
                transition: all 0.2s ease;
                background: white;
            }
            
            .history-item:hover {
                background-color: #f8f9fa;
                box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            }
            
            .history-item-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 0.75rem;
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            
            .history-date {
                font-size: 0.85rem;
                color: #777;
                font-weight: 500;
            }
            
            .history-actions {
                display: flex;
                gap: 0.5rem;
                align-items: center;
            }
            
            .history-reuse, .history-favorite {
                background: none;
                border: 1px solid #e0e0e0;
                cursor: pointer;
                padding: 0.5rem 0.75rem;
                border-radius: 4px;
                font-size: 0.85rem;
                font-weight: 500;
                transition: all 0.2s ease;
                display: flex;
                align-items: center;
                gap: 0.25rem;
                min-height: 36px;
                min-width: 36px;
                justify-content: center;
            }
            
            .history-reuse {
                color: #333;
                background: #f5f5f5;
            }
            
            .history-reuse:hover {
                background: #e8e8e8;
                border-color: #d0d0d0;
                transform: translateY(-1px);
            }
            
            .history-favorite {
                color: #666;
                background: #fff;
                border-color: #e0e0e0;
                position: relative;
            }
            
            .history-favorite:hover {
                background: #f0f0f0;
                border-color: #ffc107;
                color: #ffc107;
            }
            
            .history-favorite.favorited {
                background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
                color: white;
                border-color: #ffc107;
                box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
            }
            
            .history-favorite.favorited:hover {
                background: linear-gradient(135deg, #e0a800 0%, #cc9a00 100%);
            }
            
            .history-favorite i {
                font-size: 1rem;
                transition: transform 0.2s ease;
            }
            
            .history-favorite:hover i {
                transform: scale(1.1);
            }
            
            .history-details {
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;
                font-size: 0.9rem;
                margin-top: 0.5rem;
            }
            
            .history-details span {
                background: #f2f2f2;
                padding: 0.25rem 0.5rem;
                border-radius: 4px;
                font-size: 0.85rem;
                color: #555;
                font-weight: 500;
                border: 1px solid #e8e8e8;
            }
            
            /* Mobile optimizations for history items */
            @media (max-width: 576px) {
                .history-item {
                    padding: 1rem 0.75rem;
                    margin: 0 0.5rem;
                    border-radius: 8px;
                    border-bottom: none;
                    margin-bottom: 0.5rem;
                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                }
                
                .history-item:last-child {
                    margin-bottom: 1rem;
                }
                
                .history-item-header {
                    flex-direction: column;
                    align-items: stretch;
                    gap: 0.75rem;
                }
                
                .history-date {
                    font-size: 0.9rem;
                    text-align: center;
                    padding: 0.25rem 0.5rem;
                    background: #f8f9fa;
                    border-radius: 4px;
                    margin-bottom: 0.5rem;
                }
                
                .history-actions {
                    justify-content: center;
                    gap: 1rem;
                }
                
                .history-reuse, .history-favorite {
                    padding: 0.75rem 1.25rem;
                    font-size: 0.9rem;
                    min-height: 44px;
                    flex: 1;
                    max-width: 120px;
                }
                
                .history-reuse i, .history-favorite i {
                    margin-right: 0.5rem;
                }
                
                .history-details {
                    flex-direction: column;
                    gap: 0.5rem;
                    margin-top: 0.75rem;
                }
                
                .history-details span {
                    width: 100%;
                    text-align: center;
                    padding: 0.5rem;
                    font-size: 0.9rem;
                }
            }
            
            /* Tablet Responsive Adjustments */
            @media (min-width: 768px) and (max-width: 991px) {
                .desktop-results-grid {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 1rem;
                }
                
                .highlight-result {
                    grid-column: 1;
                }
                
                .desktop-action-buttons {
                    display: flex;
                    justify-content: center;
                    gap: 1rem;
                    flex-wrap: wrap;
                }
            }
            
            /* Dark Mode for Desktop Enhancements */
            body.dark-mode .desktop-results-card {
                background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
                border-color: #444;
            }
            
            body.dark-mode .result-item {
                background: #333;
                border-left-color: #66b3ff;
            }
            
            body.dark-mode .highlight-result {
                background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
                border-left-color: #ffc107;
            }
            
            body.dark-mode .result-icon {
                background: rgba(102, 179, 255, 0.1);
            }
            
            body.dark-mode .result-icon i {
                color: #66b3ff;
            }
            
            body.dark-mode .result-label {
                color: #aaa;
            }
            
            body.dark-mode .result-value {
                color: #ddd;
            }
            
            body.dark-mode .desktop-results-details {
                background: #2a2a2a;
                border-left-color: #28a745;
            }
            
            body.dark-mode .history-panel {
                background: #2a2a2a;
                border-color: #444;
            }
            
            body.dark-mode .history-title {
                background: linear-gradient(135deg, #333 0%, #2a2a2a 100%);
                border-color: #444;
            }
            
            body.dark-mode .history-item {
                border-color: #444;
            }
            
            body.dark-mode .history-item:hover {
                background-color: #333;
            }
            
            /* Desktop Information Sections Enhancement */
            @media (min-width: 992px) {
                /* Main container optimizations */
                .main-container {
                    max-width: 1400px;
                    padding: 0 2rem;
                }
                
                /* Information sections layout */
                .info-section {
                    background: linear-gradient(135deg, #fdfdfd 0%, #f8f9fa 100%);
                    border-radius: 12px;
                    padding: 3rem;
                    margin-bottom: 3rem;
                    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
                    border-left: 5px solid #007bff;
                    position: relative;
                    overflow: hidden;
                    transition: all 0.3s ease;
                }
                
                .info-section:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 12px 35px rgba(0,0,0,0.12);
                }
                
                .info-section::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 120px;
                    height: 120px;
                    background: linear-gradient(135deg, rgba(0,123,255,0.1), rgba(0,123,255,0.05));
                    border-radius: 50%;
                    transform: translate(40px, -40px);
                }
                
                .info-section h2 {
                    color: #1a1a1a;
                    font-size: 2.2rem;
                    margin-bottom: 2rem;
                    font-weight: 700;
                    position: relative;
                    z-index: 1;
                    display: flex;
                    align-items: center;
                    gap: 1rem;
                }
                
                .info-section h2::before {
                    content: '';
                    width: 50px;
                    height: 4px;
                    background: linear-gradient(90deg, #007bff, #28a745);
                    border-radius: 2px;
                }
                
                .info-section h3 {
                    color: #333;
                    font-size: 1.6rem;
                    margin: 2.5rem 0 1.5rem;
                    font-weight: 600;
                    border-bottom: 2px solid #e9ecef;
                    padding-bottom: 0.75rem;
                    position: relative;
                }
                
                .info-section h3::after {
                    content: '';
                    position: absolute;
                    bottom: -2px;
                    left: 0;
                    width: 60px;
                    height: 2px;
                    background: #007bff;
                    border-radius: 1px;
                }
                
                .info-section p {
                    font-size: 1.15rem;
                    line-height: 1.8;
                    color: #444;
                    margin-bottom: 1.5rem;
                    text-align: justify;
                }
                
                .info-section ul, .info-section ol {
                    font-size: 1.1rem;
                    line-height: 1.7;
                    color: #444;
                    padding-left: 2.5rem;
                    margin-bottom: 2rem;
                }
                
                .info-section li {
                    margin-bottom: 0.75rem;
                    padding-left: 0.5rem;
                }
                
                .info-section strong {
                    color: #333;
                    font-weight: 600;
                }
                
                /* Desktop-optimized example grid */
                .example-grid {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 2rem;
                    margin: 2.5rem 0;
                }
                
                .example-card {
                    background: white;
                    border-radius: 12px;
                    padding: 2rem;
                    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
                    border: 1px solid #e9ecef;
                    transition: all 0.3s ease;
                    position: relative;
                    overflow: hidden;
                }
                
                .example-card::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 3px;
                    background: linear-gradient(90deg, #007bff, #28a745, #ffc107);
                }
                
                .example-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
                }
                
                .example-card h4 {
                    color: #333;
                    font-size: 1.3rem;
                    margin-bottom: 1rem;
                    font-weight: 600;
                }
                
                .example-card p {
                    margin-bottom: 0.75rem;
                    font-size: 1rem;
                    line-height: 1.6;
                }
                
                .example-card em {
                    color: #28a745;
                    font-style: normal;
                    font-weight: 500;
                }
            }
                
            .info-section li {
                margin-bottom: 0.75rem;
            }
            
            .info-section strong {
                color: #222;
                font-weight: 600;
            }
            
            /* Example Cards Grid */
            .example-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 1.5rem;
                margin: 2rem 0;
            }
            
            .example-card {
                background: white;
                border-radius: 10px;
                padding: 1.5rem;
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                border-left: 4px solid #28a745;
                transition: transform 0.2s ease;
            }
            
            .example-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 8px 20px rgba(0,0,0,0.15);
            }
            
            .example-card h4 {
                color: #28a745;
                font-size: 1.25rem;
                font-weight: 600;
                margin-bottom: 1rem;
            }
            
            .example-card p {
                margin-bottom: 0.75rem;
                color: #555;
                font-size: 0.95rem;
            }
            
            .example-card em {
                color: #666;
                font-style: italic;
                font-size: 0.9rem;
            }
            
            /* FAQ Grid */
            .faq-grid {
                display: grid;
                gap: 1rem;
                margin: 2rem 0;
            }
            
            @media (min-width: 992px) {
                .faq-item {
                    background: white;
                    border-radius: 10px;
                    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
                    border: 1px solid #e0e0e0;
                    overflow: hidden;
                    transition: all 0.2s ease;
                }
                
                .faq-item:hover {
                    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
                }
                
                .faq-question {
                    padding: 1.5rem;
                    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
                    cursor: pointer;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    transition: all 0.2s ease;
                }
                
                .faq-question h3 {
                    font-size: 1.2rem;
                    font-weight: 600;
                    color: #333;
                    margin: 0;
                    border: none;
                    padding: 0;
                }
                
                .faq-question i {
                    color: #007bff;
                    font-size: 1.1rem;
                    transition: transform 0.3s ease;
                }
                
                .faq-item.active .faq-question {
                    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
                    color: white;
                }
                
                .faq-item.active .faq-question h3 {
                    color: white;
                }
                
                .faq-item.active .faq-question i {
                    color: white;
                    transform: rotate(180deg);
                }
                
                .faq-answer {
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.3s ease-out;
                    background: white;
                }
                
                .faq-item.active .faq-answer {
                    max-height: 1000px;
                    padding: 1.5rem;
                }
                
                .faq-answer p, .faq-answer ul {
                    margin-bottom: 1rem;
                    color: #444;
                    font-size: 1rem;
                    line-height: 1.6;
                }
                
                .faq-answer ul {
                    padding-left: 1.5rem;
                }
                
                .faq-answer li {
                    margin-bottom: 0.5rem;
                }
            }
            
            /* Tips Grid */
            .tips-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 1.5rem;
                margin: 2rem 0;
            }
            
            .tip-card {
                background: white;
                border-radius: 12px;
                padding: 2rem;
                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
                text-align: center;
                border: 1px solid #e0e0e0;
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
            }
            
            .tip-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: linear-gradient(90deg, #007bff, #28a745);
            }
            
            .tip-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            }
            
            .tip-icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 70px;
                height: 70px;
                background: linear-gradient(135deg, #007bff, #0056b3);
                border-radius: 50%;
                margin-bottom: 1.5rem;
                box-shadow: 0 4px 12px rgba(0,123,255,0.3);
            }
            
            .tip-icon i {
                color: white;
                font-size: 1.8rem;
            }
            
            .tip-card h3 {
                color: #333;
                font-size: 1.3rem;
                font-weight: 600;
                margin-bottom: 1rem;
                border: none;
                padding: 0;
            }
            
            .tip-card p {
                color: #555;
                font-size: 1rem;
                line-height: 1.6;
                margin: 0;
            }
            
            /* Enhanced Related Tools Grid for Desktop */
            @media (min-width: 992px) {
                .related-tools-grid {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 2rem;
                    margin-top: 2rem;
                }
                
                .related-tool-card {
                    background: white;
                    border-radius: 12px;
                    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
                    padding: 2rem;
                    text-decoration: none;
                    color: inherit;
                    transition: all 0.3s ease;
                    border: 1px solid #e0e0e0;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    position: relative;
                    overflow: hidden;
                }
                
                .related-tool-card::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 4px;
                    background: linear-gradient(90deg, #007bff, #28a745, #ffc107, #dc3545);
                }
                
                .related-tool-card:hover {
                    transform: translateY(-8px);
                    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
                    border-color: #007bff;
                }
                
                .related-tool-card .card-icon {
                    font-size: 3rem;
                    margin-bottom: 1.5rem;
                    color: #007bff;
                    transition: all 0.3s ease;
                }
                
                .related-tool-card:hover .card-icon {
                    color: #0056b3;
                    transform: scale(1.1);
                }
                
                .related-tool-card h3 {
                    margin: 0 0 1rem;
                    color: #333;
                    font-size: 1.4rem;
                    font-weight: 600;
                    border: none;
                    padding: 0;
                }
                
                .related-tool-card p {
                    margin: 0;
                    color: #666;
                    font-size: 1rem;
                    line-height: 1.6;
                }
            }
            
            /* Dark Mode for Enhanced Content */
            body.dark-mode .info-section {
                background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
                border-left-color: #66b3ff;
            }
            
            body.dark-mode .info-section h2,
            body.dark-mode .info-section h3 {
                color: #ddd;
            }
            
            body.dark-mode .info-section h3 {
                border-color: #444;
            }
            
            body.dark-mode .info-section p,
            body.dark-mode .info-section li {
                color: #bbb;
            }
            
            body.dark-mode .example-card,
            body.dark-mode .tip-card,
            body.dark-mode .related-tool-card {
                background: #333;
                border-color: #444;
            }
            
            body.dark-mode .example-card:hover,
            body.dark-mode .tip-card:hover,
            body.dark-mode .related-tool-card:hover {
                background: #3a3a3a;
                border-color: #66b3ff;
            }
            
            body.dark-mode .faq-item {
                background: #333;
                border-color: #444;
            }
            
            body.dark-mode .faq-question {
                background: linear-gradient(135deg, #444 0%, #333 100%);
            }
            
            body.dark-mode .faq-answer {
                background: #333;
            }
            
            /* Enhanced Mobile Responsiveness */
            @media (max-width: 768px) {
                .container {
                    padding: 0 15px;
                }
                
                .main-container {
                    padding: 0 10px;
                }
                
                .card {
                    margin-bottom: 1rem;
                    border-radius: 12px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                }
                
                .card-header h2 {
                    font-size: 1.4rem;
                    text-align: center;
                }
                
                .card-body {
                    padding: 1.5rem 1rem;
                }
                
                /* Hide desktop quick info on mobile */
                .desktop-info-column {
                    display: none;
                }
                
                /* Stack form sections vertically on mobile */
                .desktop-form-container {
                    display: block;
                }
                
                .form-section {
                    padding: 1.25rem !important;
                    margin-bottom: 1rem !important;
                    border-radius: 10px;
                }
                
                .section-heading {
                    font-size: 1.2rem;
                    margin-bottom: 1rem;
                    text-align: center;
                }
                
                /* Mobile form layout */
                .personal-info-row,
                .walking-details-row,
                .mobile-form-row {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                }
                
                .form-group {
                    margin-bottom: 0;
                }
                
                /* Mobile input styling */
                input.form-input,
                select.form-input {
                    height: 48px;
                    font-size: 16px; /* Prevent iOS zoom */
                    padding: 12px 45px 12px 15px;
                    border-radius: 8px;
                    border: 2px solid #e1e5e9;
                    transition: all 0.3s ease;
                }
                
                input.form-input:focus,
                select.form-input:focus {
                    border-color: var(--color-primary, #007bff);
                    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
                }
                
                .input-with-icon {
                    position: relative;
                }
                
                .input-icon {
                    position: absolute;
                    left: 15px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #6c757d;
                    z-index: 2;
                }
                
                /* Mobile button styling */
                .btn-calculate {
                    height: 52px;
                    margin-top: 1.5rem;
                    font-size: 1.1rem;
                    font-weight: 600;
                    width: 100%;
                    border-radius: 10px;
                    touch-action: manipulation;
                    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
                    transition: all 0.3s ease;
                }
                
                .btn-calculate:active {
                    transform: translateY(1px);
                }
                
                /* Mobile results section */
                .results-section {
                    margin-top: 1.5rem;
                    padding: 1.5rem;
                    border-radius: 12px;
                    background: #f8f9fa;
                }
                
                .results-grid {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 1rem;
                }
                
                .result-item {
                    padding: 1rem;
                    background: white;
                    border-radius: 8px;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                    display: flex;
                    align-items: center;
                    gap: 1rem;
                }
                
                .result-icon {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    background: var(--color-primary, #007bff);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    font-size: 1.2rem;
                }
                
                .result-content {
                    flex: 1;
                }
                
                .result-label {
                    display: block;
                    font-size: 0.9rem;
                    color: #6c757d;
                    margin-bottom: 0.25rem;
                }
                
                .result-value {
                    display: block;
                    font-size: 1.3rem;
                    font-weight: 700;
                    color: #333;
                }
                
                .highlight-value {
                    color: var(--color-primary, #007bff);
                }
                
                /* Mobile action buttons */
                .action-buttons {
                    display: flex;
                    gap: 0.75rem;
                    margin-top: 1.5rem;
                    flex-wrap: wrap;
                }
                
                .reset-btn,
                .share-btn,
                .history-btn {
                    flex: 1;
                    min-height: 44px;
                    padding: 0.75rem 1rem;
                    border-radius: 8px;
                    font-size: 0.95rem;
                    font-weight: 500;
                    touch-action: manipulation;
                }
                
                /* Mobile history panel */
                .history-panel {
                    margin-top: 1.5rem;
                    padding: 1.25rem;
                    background: #f8f9fa;
                    border-radius: 12px;
                }
                
                .history-title {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 1rem;
                    flex-wrap: wrap;
                    gap: 0.75rem;
                }
                
                .history-title h3 {
                    font-size: 1.1rem;
                    margin: 0;
                }
                
                .history-clear {
                    padding: 0.5rem 1rem;
                    font-size: 0.9rem;
                    border-radius: 6px;
                    min-height: 36px;
                }
                
                /* Mobile form labels and help text */
                .form-label {
                    font-size: 1rem;
                    font-weight: 600;
                    margin-bottom: 0.5rem;
                    color: #333;
                }
                
                .help-text {
                    font-size: 0.85rem;
                    color: #6c757d;
                    margin-top: 0.25rem;
                    line-height: 1.4;
                }
                
                .error-message {
                    font-size: 0.8rem;
                    color: #dc3545;
                    margin-top: 0.25rem;
                }
            }
            
            /* Extra small mobile devices */
            @media (max-width: 480px) {
                .main-container {
                    padding: 0 5px;
                }
                
                .card-body {
                    padding: 1rem 0.75rem;
                }
                
                .form-section {
                    padding: 1rem !important;
                }
                
                .section-heading {
                    font-size: 1.1rem;
                }
                
                input.form-input,
                select.form-input {
                    height: 44px;
                    font-size: 16px;
                    padding: 10px 40px 10px 12px;
                }
                
                .btn-calculate {
                    height: 48px;
                    font-size: 1rem;
                }
                
                .result-value {
                    font-size: 1.2rem;
                }
                
                .action-buttons {
                    flex-direction: column;
                }
                
                .reset-btn,
                .share-btn,
                .history-btn {
                    width: 100%;
                }
            }

            /* Personal Information section - Desktop 3-column layout */
            .personal-info-row {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 1rem;
                align-items: start;
            }

            /* Center alignment for Personal Information inputs and icons */
            .personal-info-row .input-with-icon {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .personal-info-row .input-icon {
                position: absolute;
                left: 12px;
                top: 50%;
                transform: translateY(-50%);
                color: #666;
                font-size: 1rem;
                z-index: 2;
                pointer-events: none;
            }

            .personal-info-row .form-input,
            .personal-info-row .form-select {
                width: 100%;
                text-align: center;
                padding: 12px 15px;
                border-radius: 6px;
                border: 1px solid #ddd;
                font-size: 0.95rem;
            }

            .personal-info-row .form-input::placeholder {
                text-align: center;
                color: #999;
            }

            /* Walking Details Row - Center alignment for 2 inputs */
            .walking-details-row .form-input,
            .walking-details-row .form-select {
                width: 100%;
                text-align: center;
                padding: 12px 15px;
                border-radius: 6px;
                border: 1px solid #ddd;
                font-size: 0.95rem;
            }

            .walking-details-row .form-input::placeholder {
                text-align: center;
                color: #999;
            }

            .walking-details-row .input-with-icon {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .walking-details-row .input-icon {
                position: absolute;
                left: 12px;
                top: 50%;
                transform: translateY(-50%);
                color: #666;
                font-size: 1rem;
                z-index: 2;
                pointer-events: none;
            }

            /* Enhanced Walking Details Section */
            .form-section.desktop-form-section {
                background: #fafbfc;
                border-radius: 10px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.05);
                border: 1px solid #e8e9ea;
                padding: 2rem;
                margin-bottom: 1.5rem;
            }

            .walking-details-row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 1.5rem;
                align-items: start;
            }

            /* Ensure consistent styling for walking details inputs */
            .walking-details-row .form-label {
                font-weight: 600;
                color: #333;
                margin-bottom: 0.5rem;
                font-size: 1rem;
                text-align: center;
            }

            /* Tablet responsive - 2 columns for walking details */
            @media (min-width: 577px) {
                .walking-details-row {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 1rem;
                }
            }

            /* Mobile responsive - 1 column, keep center alignment */
            @media (max-width: 576px) {
                .walking-details-row {
                    grid-template-columns: 1fr;
                    gap: 1rem;
                }
                
                .walking-details-row .form-group {
                    margin-bottom: 1rem;
                }
            }
            @media (max-width: 768px) and (min-width: 577px) {
                .personal-info-row {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 0.75rem;
                }
                
                .personal-info-row .form-group:last-child {
                    grid-column: 1 / -1;
                    max-width: 50%;
                    margin: 0 auto;
                }
            }

            /* Mobile responsive - 1 column, keep center alignment */
            @media (max-width: 576px) {
                .personal-info-row {
                    grid-template-columns: 1fr;
                    gap: 1rem;
                }
                
                .personal-info-row .form-group {
                    margin-bottom: 1rem;
                }
            }
            
            /* Removed tool header styles as no longer needed */
            
            /* History button container and action buttons styles */
            .history-btn-container {
                margin-top: 1.5rem;
                display: flex;
                justify-content: center;
            }
            
            .action-buttons {
                margin-top: 1.5rem;
                display: flex;
                justify-content: center;
                gap: 1rem;
            }
            
            /* History items styling */
            .history-item-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;
                flex-wrap: wrap;
            }
            
            .history-date {
                font-size: 0.85rem;
                color: #777;
            }
            
            .history-actions {
                display: flex;
                gap: 8px;
            }
            
            .history-reuse, .history-favorite {
                background: none;
                border: none;
                cursor: pointer;
                padding: 5px 8px;
                border-radius: 3px;
                font-size: 0.85rem;
            }
            
            .history-reuse {
                color: #333;
                background: #f5f5f5;
                border: 1px solid #e0e0e0;
            }
            
            .history-reuse:hover {
                background: #e8e8e8;
            }
            
            .history-favorite {
                color: #555;
                background: #f8f8f8;
                border: 1px solid #e5e5e5;
            }
            
            .history-favorite:hover {
                background: #f0f0f0;
            }
            
            .history-details {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                font-size: 0.9rem;
            }
            
            .history-details span {
                background: #f2f2f2;
                padding: 4px 8px;
                border-radius: 4px;
            }
            
            /* Mobile styles for history */
            @media (max-width: 576px) {
                .history-item {
                    padding: 0.9rem;
                }
                
                .history-item-header {
                    margin-bottom: 10px;
                }
                
                .history-date {
                    width: 100%;
                    margin-bottom: 8px;
                }
                
                .history-actions {
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                }
                
                .history-details {
                    flex-direction: column;
                    gap: 5px;
                }
                
                .history-details span {
                    width: 100%;
                    box-sizing: border-box;
                }
            }
            
            .reset-btn,
            .history-btn {
                padding: 0.75rem 1.25rem;
                font-size: 1rem;
                font-weight: 500;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                transition: all 0.2s ease;
            }
            
            .reset-btn {
                background-color: #f5f5f5;
                color: #333;
                border: 1px solid #ddd;
            }
            
            .reset-btn:hover {
                background-color: #e8e8e8;
                transform: translateY(-2px);
            }
            
            .history-btn {
                background-color: #eee;
                color: #444;
                border: 1px solid #ddd;
            }
            
            .history-btn:hover {
                background-color: #e0e0e0;
                transform: translateY(-2px);
            }
            
            body.dark-mode .reset-btn {
                background-color: #444;
                color: #ddd;
                border-color: #555;
            }
            
            body.dark-mode .reset-btn:hover {
                background-color: #555;
            }
            
            body.dark-mode .history-btn {
                background-color: #333;
                color: #ccc;
                border-color: #444;
            }
            
            body.dark-mode .history-btn:hover {
                background-color: #444;
            }
            
            /* Breadcrumb styling - Black and white theme */
            .breadcrumb {
                display: flex;
                flex-wrap: wrap;
                padding: 0.8rem 0;
                margin-bottom: 2rem;
                list-style: none;
                font-size: 0.95rem;
                border-bottom: 1px solid #e0e0e0;
            }
            
            .breadcrumb a {
                color: #333;
                text-decoration: none;
                transition: all 0.2s ease;
                font-weight: 500;
            }
            
            .breadcrumb a:hover {
                color: #000;
                text-decoration: underline;
            }
            
            .breadcrumb-separator {
                margin: 0 0.5rem;
                color: #999;
            }
            
            .breadcrumb span:last-child {
                color: #111;
                font-weight: 500;
            }
            
            /* Card enhancements - Black and white theme */
            .card {
                border-radius: 8px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                border: 1px solid #e0e0e0;
            }
            
            .card-header {
                background-color: #f5f5f5;
                border-bottom: 1px solid #e0e0e0;
                padding: 1.25rem 1.5rem;
            }
            
            .card-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            
            .card-header h2 {
                font-size: 1.5rem;
                font-weight: 700;
                color: #111;
                margin: 0;
                display: flex;
                align-items: center;
            }
            
            .card-header h2 i {
                margin-right: 0.75rem;
                color: #222;
            }
            
            /* Tool-level dark mode toggle */
            .tool-dark-mode-toggle {
                background: none;
                border: none;
                cursor: pointer;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #333;
                font-size: 1.1rem;
                transition: all 0.3s ease;
                background-color: #f0f0f0;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            }
            
            .tool-dark-mode-toggle:hover {
                background-color: #e0e0e0;
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0,0,0,0.12);
            }
            
            .tool-dark-mode-toggle:focus {
                outline: none;
                box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
            }
            
            body.dark-mode .tool-dark-mode-toggle {
                background-color: #555;
                color: #fff;
                box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            }
            
            body.dark-mode .tool-dark-mode-toggle:hover {
                background-color: #666;
                box-shadow: 0 4px 8px rgba(0,0,0,0.4);
            }
            
            .card-body {
                padding: 1.5rem;
            }
            
            /* Information sections styling - Black and white theme */
            .info-section {
                background-color: #f8f8f8;
                border-radius: 8px;
                padding: 2rem;
                margin-bottom: 2.5rem;
                box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                border-left: 4px solid #222;
            }
            
            .info-section h2 {
                color: #000;
                font-size: 1.75rem;
                margin-top: 0;
                margin-bottom: 1.5rem;
                font-weight: 700;
                border-bottom: 2px solid #eee;
                padding-bottom: 0.75rem;
            }
            
            .info-section h3 {
                color: #222;
                font-size: 1.35rem;
                margin-top: 1.5rem;
                margin-bottom: 1rem;
                font-weight: 600;
            }
            
            .info-section p, .info-section li {
                color: #333;
                line-height: 1.7;
                margin-bottom: 1rem;
            }
            
            .info-section strong {
                color: #000;
                font-weight: 600;
            }
            
            .info-section ul, .info-section ol {
                padding-left: 1.5rem;
                margin-bottom: 1.5rem;
            }
            
            /* Information sections styling */
            .info-section {
                background-color: #f9f9f9;
                border-radius: 8px;
                padding: 2rem;
                margin-bottom: 2.5rem;
                box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                border-left: 4px solid #333;
            }
            
            .info-section h2 {
                color: #222;
                font-size: 1.75rem;
                margin-top: 0;
                margin-bottom: 1.5rem;
                font-weight: 700;
            }
            
            .info-section h3 {
                color: #333;
                font-size: 1.35rem;
                margin-top: 1.5rem;
                margin-bottom: 1rem;
                font-weight: 600;
            }
            
            .info-section p, .info-section li {
                color: #444;
                line-height: 1.7;
                margin-bottom: 1rem;
            }
            
            .info-section strong {
                color: #222;
                font-weight: 600;
            }
            
            .info-section ul, .info-section ol {
                padding-left: 1.5rem;
                margin-bottom: 1.5rem;
            }
            
            /* FAQ section - Black and white theme */
            .faq-item {
                margin-bottom: 1rem;
                border: 1px solid #ddd;
                border-radius: 8px;
                overflow: hidden;
                transition: box-shadow 0.2s ease;
            }
            
            .faq-item:hover {
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            }
            
            .faq-question {
                padding: 1.25rem 1.5rem;
                background-color: #f2f2f2;
                cursor: pointer;
                font-weight: 600;
                color: #222;
                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;
                transition: all 0.2s ease;
                min-height: 60px;
                font-size: 1rem;
                line-height: 1.4;
            }
            
            .faq-question:after {
                content: "\f107";
                font-family: "Font Awesome 5 Free";
                font-size: 1.2rem;
                color: #555;
                transition: transform 0.3s ease;
                margin-left: 1rem;
                flex-shrink: 0;
            }
            
            .faq-item.active .faq-question {
                background-color: #e9e9e9;
            }
            
            .faq-item.active .faq-question:after {
                transform: rotate(180deg);
                color: #333;
            }
            
            .faq-question:hover {
                background-color: #e9e9e9;
            }
            
            .faq-answer {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease-out;
                background: white;
            }
            
            .faq-item.active .faq-answer {
                max-height: 1000px;
                padding: 1.5rem;
                border-top: 1px solid #eee;
            }
            
            .faq-answer p {
                margin-bottom: 1rem;
                line-height: 1.6;
                color: #444;
            }
            
            .faq-answer p:last-child {
                margin-bottom: 0;
            }
            
            /* Results section visibility */
            .results-section {
                display: none;
            }
            
            .results-section.visible {
                display: block;
                animation: fadeIn 0.5s ease-in-out;
            }
            
            /* History panel visibility */
            .history-panel {
                display: none;
            }
            
            .history-panel.visible {
                display: block;
                animation: fadeIn 0.5s ease-in-out;
            }
            
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(-10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            
            /* Results details styling - Black and white theme */
            .results-details {
                margin-top: 1.5rem;
                padding: 1.25rem;
                background-color: #f8f8f8;
                border-radius: 8px;
                border-left: 3px solid #222;
            }
            
            .results-details h4 {
                color: #222;
                margin-top: 1.25rem;
                margin-bottom: 0.75rem;
                font-size: 1.1rem;
                font-weight: 600;
            }
            
            .results-details p {
                margin-bottom: 0.75rem;
                color: #333;
            }
            
            .results-details strong {
                color: #000;
                font-weight: 600;
            }
            
            .results-details ul {
                margin-left: 1.5rem;
                margin-bottom: 1rem;
            }
            
            .results-details li {
                margin-bottom: 0.5rem;
                color: #333;
            }
            
            .result-interpretation, 
            .distance-interpretation, 
            .goal-progress,
            .health-benefits,
            .weight-loss-context {
                margin-bottom: 1.25rem;
            }
            
            /* Dark mode for results details */
            body.dark-mode .results-details {
                background-color: #222;
                border-left-color: #555;
            }
            
            body.dark-mode .results-details h4 {
                color: #ddd;
            }
            
            body.dark-mode .results-details p,
            body.dark-mode .results-details li {
                color: #bbb;
            }
            
            body.dark-mode .results-details strong {
                color: #fff;
            }
            
            /* Related tools - Black and white theme */
            .related-tools-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: 1.5rem;
                margin-top: 1.5rem;
            }
            
            .related-tool-card {
                background: white;
                border-radius: 8px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.08);
                padding: 1.5rem;
                text-decoration: none;
                color: inherit;
                transition: transform 0.2s, box-shadow 0.2s;
                border: 1px solid #e5e5e5;
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            
            .related-tool-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 5px 15px rgba(0,0,0,0.1);
                border-color: #d5d5d5;
            }
            
            .card-icon {
                font-size: 2.5rem;
                margin-bottom: 1.25rem;
                color: #222;
            }
            
            .related-tool-card h3 {
                margin: 0 0 0.75rem;
                color: #111;
                font-size: 1.25rem;
            }
            
            .related-tool-card p {
                margin: 0;
                color: #555;
                font-size: 0.95rem;
            }
            
            /* History items styling */
            .history-item-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;
            }
            
            .history-date {
                font-size: 0.85rem;
                color: #777;
            }
            
            .history-actions {
                display: flex;
                gap: 8px;
            }
            
            .history-reuse, .history-favorite {
                background: none;
                border: none;
                cursor: pointer;
                padding: 3px 6px;
                border-radius: 3px;
                font-size: 0.85rem;
            }
            
            .history-reuse {
                color: #333;
            }
            
            .history-reuse:hover {
                background: #f0f0f0;
            }
            
            .history-favorite {
                color: #555;
            }
            
            .history-favorite:hover {
                background: #f0f0f0;
            }
            
            .history-details {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                font-size: 0.9rem;
            }
            
            .history-details span {
                background: #f2f2f2;
                padding: 4px 8px;
                border-radius: 4px;
            }
            
            /* Mobile responsiveness enhancements */
            @media (max-width: 768px) {
                .info-section {
                    padding: 1.5rem;
                    margin-bottom: 1.5rem;
                }
                
                .info-section h2 {
                    font-size: 1.5rem;
                    padding-bottom: 0.5rem;
                    margin-bottom: 1.25rem;
                }
                
                .info-section h3 {
                    font-size: 1.25rem;
                    margin-top: 1.25rem;
                    margin-bottom: 0.75rem;
                }
                
                .info-section p, .info-section li {
                    font-size: 0.95rem;
                    line-height: 1.6;
                }
                
                .related-tools-grid {
                    grid-template-columns: 1fr;
                    gap: 1rem;
                }
                
                .related-tool-card {
                    padding: 1.25rem;
                }
                
                .faq-question {
                    padding: 1rem 1.25rem;
                    font-size: 0.95rem;
                    min-height: 56px;
                }
                
                .faq-question:after {
                    font-size: 1.1rem;
                    margin-left: 0.75rem;
                }
                
                .faq-item.active .faq-answer {
                    padding: 1.25rem;
                }
                
                .card-icon {
                    font-size: 2.25rem;
                    margin-bottom: 1rem;
                }
                
                .related-tool-card h3 {
                    font-size: 1.15rem;
                    margin-bottom: 0.5rem;
                }
                
                .related-tool-card p {
                    font-size: 0.9rem;
                    line-height: 1.5;
                }
            }
            
            @media (max-width: 576px) {
                .info-section {
                    padding: 1.25rem;
                    margin-bottom: 1.25rem;
                }
                
                .info-section h2 {
                    font-size: 1.35rem;
                    margin-bottom: 1rem;
                }
                
                .info-section h3 {
                    font-size: 1.15rem;
                    margin-top: 1rem;
                    margin-bottom: 0.5rem;
                }
                
                .info-section p, .info-section li {
                    font-size: 0.9rem;
                    line-height: 1.6;
                    margin-bottom: 0.75rem;
                }
                
                .info-section ul, .info-section ol {
                    padding-left: 1.25rem;
                    margin-bottom: 1rem;
                }
                
                .faq-question {
                    padding: 0.9rem 1.1rem;
                    font-size: 0.9rem;
                    min-height: 52px;
                }
                
                .faq-question:after {
                    font-size: 1rem;
                    margin-left: 0.5rem;
                }
                
                .faq-item.active .faq-answer {
                    padding: 1.1rem;
                }
                
                .faq-answer p {
                    font-size: 0.9rem;
                    line-height: 1.6;
                    margin-bottom: 0.75rem;
                }
                
                .related-tool-card {
                    padding: 1rem;
                }
                
                .card-icon {
                    font-size: 2rem;
                    margin-bottom: 0.75rem;
                }
                
                .related-tool-card h3 {
                    font-size: 1.1rem;
                    margin-bottom: 0.5rem;
                }
                
                .related-tool-card p {
                    font-size: 0.85rem;
                    line-height: 1.5;
                }
                
                /* Better touch targets for mobile */
                .tool-dark-mode-toggle {
                    width: 40px;
                    height: 40px;
                    font-size: 1rem;
                }
                
                .card-header h2 {
                    font-size: 1.25rem;
                }
                
                .card-header h2 i {
                    margin-right: 0.5rem;
                }
                
                /* Improve readability on small screens */
                .info-section strong {
                    font-weight: 700;
                }
                
                /* Better list styling on mobile */
                .info-section li {
                    margin-bottom: 0.5rem;
                }
                
                /* Enhanced button spacing */
                .action-buttons {
                    gap: 0.75rem;
                    flex-wrap: wrap;
                }
                
                .reset-btn, .history-btn {
                    padding: 0.75rem 1rem;
                    font-size: 0.9rem;
                    min-height: 44px;
                }
            }
            
            /* Performance optimizations and accessibility */
            * {
                box-sizing: border-box;
            }
            
            /* Smooth scrolling for better UX */
            html {
                scroll-behavior: smooth;
            }
            
            /* Focus indicators for accessibility */
            input:focus,
            button:focus,
            .faq-question:focus {
                outline: 2px solid #007bff;
                outline-offset: 2px;
            }
            
            /* Reduced motion for accessibility */
            @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;
                }
            }
            
            /* High contrast mode support */
            @media (prefers-contrast: high) {
                .info-section {
                    border: 2px solid #000;
                }
                
                .faq-item {
                    border: 2px solid #000;
                }
                
                .card {
                    border: 2px solid #000;
                }
            }
            
            /* Improve loading performance - Note: loading and decoding are HTML attributes, not CSS */
            /* These should be added to img tags as attributes: loading="lazy" decoding="async" */
            
            /* Better text rendering */
            body {
                text-rendering: optimizeLegibility;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
            
            /* Enhanced mobile touch interactions */
            @media (pointer: coarse) {
                .faq-question {
                    min-height: 48px;
                }
                
                .history-reuse, .history-favorite {
                    min-height: 48px;
                    min-width: 48px;
                }
                
                .tool-dark-mode-toggle {
                    min-height: 48px;
                    min-width: 48px;
                }
            }
            
            /* Print styles */
            @media print {
                .card-header,
                .history-panel,
                .action-buttons,
                .tool-dark-mode-toggle {
                    display: none !important;
                }
                
                .info-section {
                    break-inside: avoid;
                    page-break-inside: avoid;
                }
                
                body {
                    font-size: 12pt;
                    line-height: 1.4;
                }
            }
            
            /* Dark mode adjustments */
            body.dark-mode .breadcrumb {
                border-color: #444;
            }
            
            body.dark-mode .breadcrumb a {
                color: #aaa;
            }
            
            body.dark-mode .breadcrumb a:hover {
                color: #fff;
            }
            
            body.dark-mode .breadcrumb span:last-child {
                color: #ddd;
            }
            
            body.dark-mode .breadcrumb-separator {
                color: #777;
            }
            
            body.dark-mode .info-section {
                background-color: #252525;
                border-left-color: #555;
                box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            }
            
            body.dark-mode .info-section h2,
            body.dark-mode .info-section h3 {
                color: #ddd;
            }
            
            body.dark-mode .info-section p,
            body.dark-mode .info-section li {
                color: #bbb;
            }
            
            body.dark-mode .info-section strong {
                color: #eee;
            }
            
            body.dark-mode .faq-item {
                border-color: #444;
            }
            
            body.dark-mode .faq-question {
                background-color: #333;
                color: #ddd;
            }
            
            body.dark-mode .faq-answer {
                background-color: #252525;
            }
            
            body.dark-mode .related-tool-card {
                background-color: #2a2a2a;
                border-color: #444;
                box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            }
            
            body.dark-mode .related-tool-card:hover {
                box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            }
            
            body.dark-mode .related-tool-card h3 {
                color: #ddd;
            }
            
            body.dark-mode .related-tool-card p {
                color: #aaa;
            }
            
            body.dark-mode .card-icon {
                color: #ccc;
            }
            
            body.dark-mode .history-date {
                color: #aaa;
            }
            
            body.dark-mode .history-reuse:hover,
            body.dark-mode .history-favorite:hover {
                background: #333;
            }
            
            body.dark-mode .history-details span {
                background: #333;
            }
            
            /* Additional responsive styles for dark mode toggle */
            @media (max-width: 576px) {
                .tool-dark-mode-toggle {
                    width: 36px;
                    height: 36px;
                    font-size: 1rem;
                }
                
                .card-header h2 {
                    font-size: 1.3rem;
                }
            }

            /* ========== COMPREHENSIVE MOBILE-FRIENDLY STYLES ========== */
            
            /* Mobile-First Base Styles */
            * {
                box-sizing: border-box;
            }
            
            /* Enhanced Mobile Container */
            @media (max-width: 768px) {
                .main-container {
                    padding: 0 10px;
                    margin: 0;
                }
                
                .container {
                    padding: 0 10px;
                }
            }
            
            /* Mobile-Optimized Card Styles */
            @media (max-width: 768px) {
                .desktop-optimized-card {
                    border-radius: 8px;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                    margin-bottom: 1rem;
                }
                
                .card-header {
                    padding: 1rem;
                    flex-direction: column;
                    align-items: stretch;
                    gap: 1rem;
                }
                
                .card-header h2 {
                    font-size: 1.25rem;
                    margin: 0;
                    text-align: center;
                }
                
                .card-header h2 i {
                    margin-right: 0.5rem;
                }
                
                .tool-dark-mode-toggle {
                    align-self: center;
                    width: 40px;
                    height: 40px;
                }
                
                .desktop-card-body {
                    padding: 1rem;
                }
            }
            
            /* Mobile Form Layout */
            @media (max-width: 768px) {
                .desktop-form-container {
                    display: block;
                    gap: 0;
                }
                
                .desktop-form-column {
                    width: 100%;
                }
                
                .desktop-calculator-layout {
                    display: block;
                }
                
                .desktop-optimized-form {
                    display: block;
                }
                
                .desktop-form-section {
                    margin-bottom: 1.5rem;
                    padding: 1rem;
                    border-radius: 8px;
                }
                
                .form-section {
                    margin-bottom: 1.5rem;
                    padding: 1rem;
                    border-radius: 8px;
                    border-left: 3px solid #007bff;
                }
                
                .section-heading {
                    font-size: 1.1rem;
                    margin-bottom: 1rem;
                }
                
                .section-heading i {
                    margin-right: 0.5rem;
                }
            }
            
            /* Mobile Form Rows */
            @media (max-width: 768px) {
                .personal-info-row {
                    display: block;
                    grid-template-columns: none;
                    gap: 0;
                }
                
                .walking-details-row {
                    display: block;
                    grid-template-columns: none;
                    gap: 0;
                }
                
                .desktop-form-row {
                    display: block;
                    gap: 0;
                }
                
                .form-row {
                    display: block;
                    gap: 0;
                }
                
                .form-group {
                    margin-bottom: 1rem;
                    flex: none;
                    width: 100%;
                }
                
                .form-group:last-child {
                    margin-bottom: 0;
                }
            }
            
            /* Mobile Input Styles */
            @media (max-width: 768px) {
                .form-label {
                    font-size: 0.95rem;
                    font-weight: 600;
                    margin-bottom: 0.5rem;
                    color: #333;
                }
                
                .form-input {
                    width: 100%;
                    height: 44px;
                    padding: 0.75rem;
                    padding-left: 2.5rem;
                    font-size: 1rem;
                    border: 2px solid #e1e5e9;
                    border-radius: 8px;
                    transition: all 0.2s ease;
                    -webkit-appearance: none;
                    appearance: none;
                }
                
                .form-input:focus {
                    border-color: #007bff;
                    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
                    outline: none;
                }
                
                .form-select {
                    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
                    background-repeat: no-repeat;
                    background-position: right 12px center;
                    background-size: 16px;
                }
                
                .input-with-icon {
                    position: relative;
                }
                
                .input-icon {
                    position: absolute;
                    left: 12px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #666;
                    font-size: 1rem;
                    pointer-events: none;
                    z-index: 1;
                }
                
                .help-text {
                    font-size: 0.8rem;
                    color: #666;
                    margin-top: 0.25rem;
                    line-height: 1.4;
                }
                
                .error-message {
                    font-size: 0.85rem;
                    color: #dc3545;
                    margin-top: 0.25rem;
                    display: none;
                }
                
                .error-message.visible {
                    display: block;
                }
            }
            
            /* Mobile Button Styles */
            @media (max-width: 768px) {
                .btn-calculate {
                    width: 100%;
                    height: 50px;
                    font-size: 1.1rem;
                    font-weight: 600;
                    border: none;
                    border-radius: 8px;
                    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
                    color: white;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    margin: 1.5rem 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.5rem;
                    touch-action: manipulation;
                }
                
                .btn-calculate:hover,
                .btn-calculate:focus {
                    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
                    transform: translateY(-1px);
                    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
                }
                
                .btn-calculate:active {
                    transform: translateY(0);
                }
                
                .desktop-btn-calculate {
                    width: 100%;
                    min-width: auto;
                    padding: 0.875rem 1rem;
                    font-size: 1.1rem;
                }
            }
            
            /* Mobile Results Section */
            @media (max-width: 768px) {
                .results-section {
                    padding: 1rem;
                    border-radius: 8px;
                    margin-top: 1.5rem;
                    border-left: 4px solid #28a745;
                    background: #f8f9fa;
                }
                
                .results-header {
                    margin-bottom: 1rem;
                    align-items: center;
                }
                
                .results-icon {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    background: #28a745;
                    color: white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 1rem;
                    flex-shrink: 0;
                }
                
                .results-title {
                    font-size: 1.25rem;
                    font-weight: 600;
                    color: #333;
                    margin: 0;
                }
                
                .results-card {
                    background: white;
                    border-radius: 8px;
                    padding: 1rem;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                    margin-bottom: 1rem;
                }
                
                .desktop-results-grid {
                    display: block;
                }
                
                .result-item {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0.75rem 0;
                    border-bottom: 1px solid #eee;
                    min-height: initial;
                }
                
                .result-item:last-child {
                    border-bottom: none;
                }
                
                .result-label {
                    font-weight: 500;
                    color: #555;
                    font-size: 0.9rem;
                }
                
                .result-value {
                    font-weight: 700;
                    color: #333;
                    font-size: 1rem;
                    text-align: right;
                }
                
                .highlight-result {
                    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
                    color: white;
                    padding: 1rem;
                    border-radius: 8px;
                    margin-bottom: 1rem;
                    border-left: none;
                }
                
                .highlight-result .result-label,
                .highlight-result .result-value {
                    color: white;
                }
                
                .highlight-value {
                    font-size: 1.3rem;
                    color: #ffc107;
                }
            }
            
            /* Mobile Action Buttons */
            @media (max-width: 768px) {
                .action-buttons {
                    display: flex;
                    flex-direction: column;
                    gap: 0.75rem;
                    margin-top: 1.5rem;
                }
                
                .desktop-action-buttons {
                    display: flex;
                    flex-direction: column;
                    gap: 0.75rem;
                }
                
                .reset-btn,
                .history-btn,
                .desktop-reset-btn,
                .desktop-share-btn {
                    width: 100%;
                    height: 44px;
                    padding: 0.75rem 1rem;
                    font-size: 1rem;
                    font-weight: 500;
                    border-radius: 8px;
                    border: 2px solid #e1e5e9;
                    background: white;
                    color: #333;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.5rem;
                    touch-action: manipulation;
                }
                
                .reset-btn:hover,
                .history-btn:hover,
                .desktop-reset-btn:hover,
                .desktop-share-btn:hover {
                    background: #f8f9fa;
                    border-color: #007bff;
                    color: #007bff;
                    transform: translateY(-1px);
                }
                
                .history-btn-container {
                    margin-top: 1rem;
                }
            }
            
            /* Mobile History Panel */
            @media (max-width: 768px) {
                .history-panel {
                    margin-top: 1.5rem;
                    border-radius: 8px;
                    background: white;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                }
                
                .mobile-history-header {
                    padding: 1rem;
                    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
                    border-bottom: 1px solid #e0e0e0;
                    border-radius: 8px 8px 0 0;
                }
                
                .history-title-content h3 {
                    font-size: 1.1rem;
                    font-weight: 600;
                    color: #333;
                    margin: 0 0 0.5rem 0;
                }
                
                .mobile-history-info {
                    font-size: 0.85rem;
                    color: #666;
                }
                
                .mobile-clear-btn {
                    width: 100%;
                    height: 44px;
                    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
                    color: white;
                    border: none;
                    border-radius: 6px;
                    font-size: 0.95rem;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.5rem;
                    touch-action: manipulation;
                }
                
                .mobile-clear-btn:hover {
                    background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);
                    transform: translateY(-1px);
                }
                
                .history-list {
                    max-height: 300px;
                    overflow-y: auto;
                    padding: 0;
                    margin: 0;
                }
                
                .history-item {
                    padding: 1rem;
                    border-bottom: 1px solid #f0f0f0;
                    background: white;
                }
                
                .history-item:last-child {
                    border-bottom: none;
                    border-radius: 0 0 8px 8px;
                }
                
                .history-item-header {
                    display: flex;
                    flex-direction: column;
                    gap: 0.75rem;
                    margin-bottom: 0.75rem;
                }
                
                .history-date {
                    font-size: 0.85rem;
                    color: #666;
                    text-align: center;
                    padding: 0.25rem 0.5rem;
                    background: #f8f9fa;
                    border-radius: 4px;
                }
                
                .history-actions {
                    display: flex;
                    justify-content: center;
                    gap: 0.75rem;
                }
                
                .history-reuse,
                .history-favorite {
                    flex: 1;
                    max-width: 120px;
                    height: 36px;
                    padding: 0.5rem 0.75rem;
                    font-size: 0.85rem;
                    border: 1px solid #e0e0e0;
                    border-radius: 6px;
                    background: white;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.25rem;
                    touch-action: manipulation;
                }
                
                .history-reuse {
                    color: #333;
                    background: #f5f5f5;
                }
                
                .history-reuse:hover {
                    background: #e8e8e8;
                    border-color: #007bff;
                    color: #007bff;
                }
                
                .history-favorite {
                    color: #666;
                }
                
                .history-favorite:hover {
                    background: #f0f0f0;
                    border-color: #ffc107;
                    color: #ffc107;
                }
                
                .history-favorite.favorited {
                    background: #ffc107;
                    color: white;
                    border-color: #ffc107;
                }
                
                .history-details {
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                    margin-top: 0.75rem;
                }
                
                .history-details span {
                    width: 100%;
                    padding: 0.5rem;
                    background: #f2f2f2;
                    border-radius: 4px;
                    font-size: 0.85rem;
                    color: #555;
                    text-align: center;
                    border: 1px solid #e8e8e8;
                }
                
                .empty-history {
                    text-align: center;
                    color: #777;
                    padding: 2rem 1rem;
                    font-style: italic;
                }
            }
            
            /* Mobile Info Sections */
            @media (max-width: 768px) {
                .info-section {
                    padding: 1.25rem;
                    margin-bottom: 1.5rem;
                    border-radius: 8px;
                    border-left: 3px solid #333;
                }
                
                .info-section h2 {
                    font-size: 1.4rem;
                    margin-bottom: 1rem;
                    line-height: 1.3;
                }
                
                .info-section h3 {
                    font-size: 1.2rem;
                    margin: 1.25rem 0 0.75rem 0;
                    line-height: 1.3;
                }
                
                .info-section p {
                    font-size: 0.95rem;
                    line-height: 1.6;
                    margin-bottom: 1rem;
                }
                
                .info-section ul,
                .info-section ol {
                    padding-left: 1.25rem;
                    margin-bottom: 1rem;
                }
                
                .info-section li {
                    font-size: 0.95rem;
                    line-height: 1.6;
                    margin-bottom: 0.5rem;
                }
            }
            
            /* Mobile FAQ Section */
            @media (max-width: 768px) {
                .faq-item {
                    margin-bottom: 0.75rem;
                    border-radius: 8px;
                    border: 1px solid #e0e0e0;
                }
                
                .faq-question {
                    padding: 1rem;
                    font-size: 0.95rem;
                    line-height: 1.4;
                    min-height: initial;
                }
                
                .faq-question:after {
                    font-size: 1rem;
                    margin-left: 0.5rem;
                }
                
                .faq-item.active .faq-answer {
                    padding: 1rem;
                }
                
                .faq-answer p {
                    font-size: 0.9rem;
                    line-height: 1.6;
                    margin-bottom: 0.75rem;
                }
            }
            
            /* Mobile Dark Mode Support */
            @media (max-width: 768px) {
                body.dark-mode .desktop-optimized-card {
                    background: #2d2d2d;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
                }
                
                body.dark-mode .card-header {
                    background: #333;
                    border-bottom-color: #444;
                }
                
                body.dark-mode .card-header h2 {
                    color: #fff;
                }
                
                body.dark-mode .form-section {
                    background: #333;
                    border-left-color: #66b3ff;
                }
                
                body.dark-mode .section-heading {
                    color: #fff;
                }
                
                body.dark-mode .form-label {
                    color: #ddd;
                }
                
                body.dark-mode .form-input {
                    background: #444;
                    border-color: #555;
                    color: #fff;
                }
                
                body.dark-mode .form-input:focus {
                    border-color: #66b3ff;
                    box-shadow: 0 0 0 3px rgba(102, 179, 255, 0.1);
                }
                
                body.dark-mode .help-text {
                    color: #aaa;
                }
                
                body.dark-mode .results-section {
                    background: #333;
                    border-left-color: #28a745;
                }
                
                body.dark-mode .results-card {
                    background: #444;
                }
                
                body.dark-mode .result-label {
                    color: #ddd;
                }
                
                body.dark-mode .result-value {
                    color: #fff;
                }
                
                body.dark-mode .history-panel {
                    background: #333;
                }
                
                body.dark-mode .mobile-history-header {
                    background: #444;
                    border-bottom-color: #555;
                }
                
                body.dark-mode .history-title-content h3 {
                    color: #fff;
                }
                
                body.dark-mode .history-item {
                    background: #333;
                    border-bottom-color: #444;
                }
                
                body.dark-mode .history-details span {
                    background: #444;
                    color: #ddd;
                    border-color: #555;
                }
            }
            
            /* Mobile Performance & Accessibility */
            @media (max-width: 768px) {
                /* Smooth scrolling */
                html {
                    scroll-behavior: smooth;
                }
                
                /* Better touch targets */
                button,
                input,
                select,
                .faq-question {
                    min-height: 44px;
                    min-width: 44px;
                }
                
                /* Focus indicators */
                button:focus,
                input:focus,
                select:focus {
                    outline: 2px solid #007bff;
                    outline-offset: 2px;
                }
                
                /* Prevent zoom on input focus */
                input,
                select,
                textarea {
                    font-size: 16px;
                }
                
                /* Optimize animations for mobile */
                * {
                    -webkit-transform: translateZ(0);
                    transform: translateZ(0);
                    -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
                }
                
                /* Better text rendering */
                body {
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    text-rendering: optimizeLegibility;
                }
                
                /* Mobile-specific optimizations */
                .mobile-form-input {
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;
                    border-radius: 8px;
                    background-clip: padding-box;
                }
                
                .mobile-btn-calculate {
                    -webkit-tap-highlight-color: rgba(0, 123, 255, 0.3);
                    touch-action: manipulation;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                }
                
                /* Improve scroll performance */
                .history-list {
                    scroll-behavior: smooth;
                }
                
                /* Better loading states */
                .mobile-form-input:disabled {
                    opacity: 0.6;
                    cursor: not-allowed;
                }
                
                /* Mobile keyboard optimizations */
                input[type="number"] {
                    -moz-appearance: textfield;
                    appearance: textfield;
                }
                
                input[type="number"]::-webkit-outer-spin-button,
                input[type="number"]::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }
                
                /* Mobile-friendly animations */
                .results-section {
                    animation: mobileSlideIn 0.4s ease-out;
                }
                
                @keyframes mobileSlideIn {
                    from {
                        opacity: 0;
                        transform: translateY(20px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
                
                /* Prevent text selection on buttons */
                button,
                .btn-calculate {
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                }
            }
            
            /* Extra small mobile devices */
            @media (max-width: 480px) {
                .main-container {
                    padding: 0 8px;
                }
                
                .desktop-card-body {
                    padding: 0.75rem;
                }
                
                .desktop-form-section {
                    padding: 0.75rem;
                }
                
                .form-input {
                    height: 48px;
                    font-size: 16px;
                }
                
                .btn-calculate {
                    height: 52px;
                    font-size: 1rem;
                }
                
                .card-header h2 {
                    font-size: 1.1rem;
                }
                
                .results-title {
                    font-size: 1.1rem;
                }
                
                .info-section h2 {
                    font-size: 1.25rem;
                }
                
                .info-section h3 {
                    font-size: 1.1rem;
                }
            }
            .popular-queries-section {
                background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
                border-radius: 16px;
                padding: 2.5rem;
                margin: 2rem 0;
                border: 1px solid #cbd5e1;
            }

            .query-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 1.5rem;
                margin: 2rem 0;
            }

            .query-card {
                background: white;
                border-radius: 12px;
                padding: 1.5rem;
                box-shadow: 0 4px 15px rgba(0,0,0,0.08);
                border-left: 4px solid #4f46e5;
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }

            .query-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 8px 25px rgba(79, 70, 229, 0.15);
            }

            .query-card h3 {
                color: #1e293b;
                font-size: 1.1rem;
                font-weight: 600;
                margin-bottom: 1rem;
                line-height: 1.4;
            }

            .query-card p {
                color: #64748b;
                font-size: 0.95rem;
                line-height: 1.6;
                margin: 0;
            }

            .cta-section {
                text-align: center;
                margin-top: 2rem;
                padding-top: 2rem;
                border-top: 2px solid #e2e8f0;
            }

            .btn-secondary {
                background: linear-gradient(135deg, #10b981 0%, #059669 100%);
                color: white;
                border: none;
                padding: 1rem 2rem;
                border-radius: 10px;
                font-size: 1rem;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
            }

            .btn-secondary:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
            }

            @media (max-width: 768px) {
                .popular-queries-section {
                    padding: 1.5rem;
                    margin: 1rem 0;
                }

                .query-grid {
                    grid-template-columns: 1fr;
                    gap: 1rem;
                    margin: 1.5rem 0;
                }

                .query-card {
                    padding: 1.2rem;
                }

                .query-card h3 {
                    font-size: 1rem;
                }

                .query-card p {
                    font-size: 0.9rem;
                }

                .btn-secondary {
                    padding: 0.9rem 1.5rem;
                    font-size: 0.95rem;
                }
            }

/* ========== ENHANCED RESPONSIVE RESULTS SECTION ========== */

/* Results Section - Base Styles */
.results-section {
    display: none;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    margin: 2rem 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    position: relative;
}

.results-section.visible {
    display: block;
    animation: slideUpFadeIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Results Header */
.results-header {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.results-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

.results-icon {
    display: inline-block;
    width: 70px;
    height: 70px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1;
}

.results-icon i {
    font-size: 2rem;
    color: white;
}

.results-title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.75rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
    letter-spacing: -0.5px;
    position: relative;
    z-index: 1;
}

.results-subtitle {
    font-size: 1.1rem;
    opacity: 0.95;
    margin: 0;
    font-weight: 400;
    position: relative;
    z-index: 1;
}

/* Results Card */
.results-card {
    padding: 2rem;
}

.results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

/* Highlight Result - Main Calorie Display */
.highlight-result {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    border-radius: 24px;
    padding: 2.5rem;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(249, 115, 22, 0.35);
}

.highlight-result::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: sweep 3s ease-in-out infinite;
}

@keyframes sweep {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.result-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.highlight-result .result-icon {
    width: 70px;
    height: 70px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1;
}

.highlight-result .result-icon i {
    font-size: 2rem;
    color: white;
}

.progress-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 4px solid rgba(255,255,255,0.9);
    transition: all 0.5s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1;
}

.progress-circle.pulse-animation {
    animation: pulseGlow 1s ease-in-out;
}

.progress-content {
    text-align: center;
    color: #1a202c;
}

.progress-number {
    font-size: 2.5rem;
    font-weight: 900;
    display: block;
    text-shadow: none;
    line-height: 1;
    color: #f97316;
    letter-spacing: -1px;
}

.progress-unit {
    font-size: 0.9rem;
    opacity: 0.75;
    font-weight: 600;
    text-transform: lowercase;
    color: #64748b;
    margin-top: 0.25rem;
    display: block;
}

@keyframes pulseGlow {
    0% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }
    100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.progress-text {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.highlight-result .result-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.highlight-result .result-label {
    font-size: 1.3rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
    letter-spacing: 0.5px;
}

.highlight-result .result-unit {
    font-size: 1rem;
    opacity: 0.95;
    font-weight: 500;
    color: rgba(255,255,255,0.95);
}

/* Secondary Results */
.secondary-results {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.result-item {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: 1.75rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    border: 2px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.result-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    border-color: #cbd5e0;
}

.result-item .result-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.result-item .result-icon i {
    font-size: 1.4rem;
    color: white;
}

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

.result-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e293b;
    display: block;
    margin-bottom: 0.35rem;
    transition: transform 0.3s ease;
    letter-spacing: -0.5px;
}

.result-value:hover {
    transform: scale(1.03);
}

.result-label {
    font-size: 0.95rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Action Buttons */
.action-buttons {
    padding: 1.5rem 2rem 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.reset-btn, .share-btn {
    flex: 1;
    max-width: 220px;
    padding: 1.1rem 1.75rem;
    border: none;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    letter-spacing: 0.3px;
}

.reset-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
}

.reset-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(79, 70, 229, 0.35);
}

.reset-btn:active {
    transform: translateY(-1px);
}

.share-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.share-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.35);
}

.share-btn:active {
    transform: translateY(-1px);
}

/* Mobile button adjustments */
@media (max-width: 767px) {
    .action-buttons {
        padding: 1.25rem 1.5rem 1.75rem;
        flex-direction: column;
        gap: 0.85rem;
    }
    
    .reset-btn, .share-btn {
        max-width: 100%;
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 479px) {
    .action-buttons {
        padding: 1rem 1.25rem 1.5rem;
    }
    
    .reset-btn, .share-btn {
        padding: 0.9rem 1.25rem;
        font-size: 0.95rem;
        border-radius: 12px;
    }
}

/* Desktop Large (1200px+) - Premium Experience */
@media (min-width: 1200px) {
    .results-section {
        max-width: 900px;
        margin: 2.5rem auto;
    }
    
    .results-header {
        padding: 3rem 2rem;
    }
    
    .results-icon {
        width: 80px;
        height: 80px;
    }
    
    .results-icon i {
        font-size: 2.25rem;
    }
    
    .results-title {
        font-size: 2.25rem;
    }
    
    .results-subtitle {
        font-size: 1.2rem;
    }
    
    .results-card {
        padding: 2.5rem;
    }
    
    .results-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
    
    .highlight-result {
        padding: 3rem 2.5rem;
    }
    
    .progress-circle {
        width: 160px;
        height: 160px;
    }
    
    .progress-number {
        font-size: 3rem;
    }
    
    .progress-unit {
        font-size: 1rem;
    }
    
    .result-item {
        padding: 2rem;
    }
    
    .result-value {
        font-size: 1.75rem;
    }
}

/* Desktop Standard (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .results-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    .highlight-result {
        padding: 2.25rem;
    }
    
    .progress-circle {
        width: 130px;
        height: 130px;
    }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .results-section {
        margin: 1.5rem 0;
    }
    
    .results-header {
        padding: 2rem 1.5rem;
    }
    
    .results-title {
        font-size: 1.75rem;
    }
    
    .results-subtitle {
        font-size: 1rem;
    }
    
    .results-card {
        padding: 2rem 1.5rem;
    }
    
    .secondary-results {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Mobile (480px - 767px) */
@media (max-width: 767px) {
    .results-section {
        margin: 1rem 0;
        border-radius: 12px;
    }
    
    .results-header {
        padding: 1.75rem 1.25rem;
    }
    
    .results-icon {
        width: 56px;
        height: 56px;
    }
    
    .results-icon i {
        font-size: 1.5rem;
    }
    
    .results-title {
        font-size: 1.5rem;
    }
    
    .results-subtitle {
        font-size: 0.95rem;
    }
    
    .results-card {
        padding: 1.5rem;
    }
    
    .highlight-result {
        padding: 1.75rem;
        border-radius: 18px;
    }
    
    .result-visual {
        gap: 1.25rem;
    }
    
    .progress-circle {
        width: 120px;
        height: 120px;
    }
    
    .progress-number {
        font-size: 2rem;
    }
    
    .progress-unit {
        font-size: 0.8rem;
    }
    
    .highlight-result .result-icon {
        width: 56px;
        height: 56px;
    }
    
    .highlight-result .result-icon i {
        font-size: 1.5rem;
    }
    
    .highlight-result .result-label {
        font-size: 1.1rem;
    }
    
    .result-item {
        padding: 1.5rem;
        border-radius: 14px;
        gap: 1rem;
    }
    
    .result-item .result-icon {
        width: 48px;
        height: 48px;
    }
    
    .result-item .result-icon i {
        font-size: 1.2rem;
    }
    
    .result-value {
        font-size: 1.4rem;
    }
    
    .result-label {
        font-size: 0.85rem;
    }
}

/* Small Mobile (up to 479px) */
@media (max-width: 479px) {
    .results-header {
        padding: 1.5rem 1rem;
    }
    
    .results-icon {
        width: 50px;
        height: 50px;
    }
    
    .results-icon i {
        font-size: 1.35rem;
    }
    
    .results-title {
        font-size: 1.35rem;
    }
    
    .results-subtitle {
        font-size: 0.9rem;
    }
    
    .results-card {
        padding: 1.25rem;
    }
    
    .highlight-result {
        padding: 1.5rem;
    }
    
    .result-visual {
        gap: 1rem;
    }
    
    .progress-circle {
        width: 110px;
        height: 110px;
    }
    
    .progress-number {
        font-size: 1.85rem;
    }
    
    .progress-unit {
        font-size: 0.75rem;
    }
    
    .highlight-result .result-icon {
        width: 50px;
        height: 50px;
    }
    
    .highlight-result .result-icon i {
        font-size: 1.35rem;
    }
    
    .highlight-result .result-label {
        font-size: 1rem;
    }
    
    .result-item {
        padding: 1.25rem;
        border-radius: 12px;
    }
    
    .result-item .result-icon {
        width: 44px;
        height: 44px;
    }
    
    .result-item .result-icon i {
        font-size: 1.1rem;
    }
    
    .result-value {
        font-size: 1.3rem;
    }
    
    .result-label {
        font-size: 0.8rem;
    }
    
    .result-item .result-icon {
        width: 45px;
        height: 45px;
        margin: 0 auto;
    }
    
    .result-value {
        font-size: 1.3rem;
    }
    
    .action-buttons {
        padding: 1rem;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .reset-btn, .share-btn {
        max-width: none;
        padding: 1rem;
        font-size: 1rem;
    }
    
    /* Mobile-specific touch improvements */
    .reset-btn:active, .share-btn:active {
        transform: translateY(1px) scale(0.98);
    }
    
    /* Improved mobile scrolling */
    .results-section {
        scroll-margin-top: 1rem;
    }
    
    /* Better mobile typography */
    .highlight-result .result-label {
        font-size: 1.1rem;
        line-height: 1.3;
        color: #1a202c;
    }
    
    .result-item .result-content {
        width: 100%;
    }
}

/* Tablet Responsive Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .results-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .secondary-results {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .action-buttons {
        flex-direction: row;
        justify-content: center;
    }
}

/* Desktop Responsive Styles */
@media (min-width: 1025px) {
    .results-grid {
        grid-template-columns: 1fr 1.5fr;
        gap: 2rem;
        align-items: start;
    }
    
    .secondary-results {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .highlight-result {
        position: sticky;
        top: 2rem;
        padding: 2.5rem;
    }
    
    .result-visual {
        flex-direction: row;
        gap: 2rem;
        justify-content: center;
        align-items: center;
    }
    
    .progress-circle {
        width: 140px;
        height: 140px;
    }
    
    .progress-number {
        font-size: 2.2rem;
    }
    
    .progress-unit {
        font-size: 0.9rem;
    }
    
    .highlight-result .result-icon {
        width: 70px;
        height: 70px;
    }
    
    .highlight-result .result-icon i {
        font-size: 2rem;
    }
    
    .highlight-result .result-label {
        font-size: 1.3rem;
    }
    
    .result-item {
        padding: 1.8rem;
    }
    
    .result-item .result-icon {
        width: 55px;
        height: 55px;
    }
    
    .result-item .result-icon i {
        font-size: 1.3rem;
    }
    
    .result-value {
        font-size: 1.5rem;
    }
    
    .result-label {
        font-size: 1rem;
    }
    
    .results-section {
        max-width: 1200px;
        margin: 2rem auto;
    }
    
    .results-header {
        padding: 2.5rem;
    }
    
    .results-title {
        font-size: 2rem;
    }
    
    .results-subtitle {
        font-size: 1.1rem;
    }
    
    .results-card {
        padding: 2.5rem;
    }
    
    .action-buttons {
        padding: 2rem 2.5rem;
    }
    
    .reset-btn, .share-btn {
        padding: 1.2rem 2rem;
        font-size: 1.1rem;
        max-width: 250px;
    }
}

/* Ultra-wide Desktop Optimization (1400px+) */
@media (min-width: 1400px) {
    .calculator {
        max-width: 1400px;
        padding: 0 2rem;
    }
    
    .desktop-form-container {
        grid-template-columns: 2fr 1fr;
        gap: 3rem;
    }
    
    .results-section {
        max-width: 1400px;
    }
    
    .results-grid {
        grid-template-columns: 1fr 2fr;
        gap: 3rem;
    }
    
    .secondary-results {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .highlight-result {
        padding: 3rem;
    }
    
    .progress-circle {
        width: 160px;
        height: 160px;
    }
    
    .progress-number {
        font-size: 2.5rem;
    }
    
    .results-title {
        font-size: 2.2rem;
    }
    
    .results-header {
        padding: 3rem;
    }
    
    .results-card {
        padding: 3rem;
    }
}

/* History Panel Styles */
.history-btn-container {
    margin: 1rem 0;
    text-align: center;
}

.history-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

.history-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

.history-panel {
    display: none;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    margin: 2rem 0;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.history-panel.visible {
    display: block;
    animation: slideDownFadeIn 0.4s ease-out;
}

@keyframes slideDownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.history-title {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.history-title h3 {
    margin: 0;
    color: #1a202c;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.history-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
}

.history-item {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.history-item:hover {
    background-color: #f8fafc;
}

.history-item:last-child {
    border-bottom: none;
}

.history-item.empty-history {
    text-align: center;
    color: #64748b;
    font-style: italic;
    padding: 2rem;
}

.history-content {
    flex: 1;
}

.history-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.history-calories {
    font-weight: 700;
    color: #dc2626;
    font-size: 1.1rem;
}

.history-details {
    color: #64748b;
    font-size: 0.9rem;
}

.history-date {
    color: #94a3b8;
    font-size: 0.8rem;
}

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

.history-reuse {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.history-reuse:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Mobile responsive styles for history */
@media (max-width: 768px) {
    .history-btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;
    }
    
    .history-content {
        width: 100%;
    }
    
    .history-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .history-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .history-reuse {
        padding: 0.625rem 1rem;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .history-panel {
        background: #1a202c;
        border-color: #2d3748;
    }
    
    .history-title {
        background: linear-gradient(135deg, #2d3748, #4a5568);
        border-color: #4a5568;
    }
    
    .history-title h3 {
        color: white;
    }
    
    .history-item {
        border-color: #2d3748;
        color: white;
    }
    
    .history-item:hover {
        background-color: #2d3748;
    }
    
    .history-calories {
        color: #f56565;
    }
    
    .history-details {
        color: #a0aec0;
    }
    
    .history-date {
        color: #718096;
    }
}

/* ========================================
   Calculator Header Section - Responsive Styles
   ======================================== */

/* Content Utility Classes - Remove Inline Styles */
.calorie-table-spacing {
    margin: 1.5rem 0;
}

.table-caption {
    text-align: left;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #2c3e50;
    caption-side: top;
}

.pro-tip-text {
    font-size: 0.9rem;
    color: #666;
    margin-top: 1rem;
}

.inline-link {
    color: #3498db;
    text-decoration: underline;
}

.inline-link:hover {
    color: #2980b9;
    text-decoration: none;
}

.content-spacing {
    margin-top: 1rem;
}

.info-list {
    margin: 1rem 0;
    line-height: 1.8;
}

.cta-spacing {
    margin-top: 2rem;
}

/* Walking Hero Container Styles */
.walking-hero-container {
    text-align: center;
    margin: 25px auto 30px;
    max-width: 600px;
    padding: 0 20px;
    min-height: 220px;
}

.walking-hero-container img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(255,152,0,0.3);
    image-rendering: -webkit-optimize-contrast;
    display: block;
    margin: 0 auto;
}

.walking-cta-box {
    margin-top: 15px;
    padding: 15px;
    background: #fff3e0;
    border-radius: 8px;
    border-left: 4px solid #ff9800;
    min-height: 60px;
}

.walking-cta-box p {
    margin: 0;
    color: #e65100;
    font-weight: 600;
    font-size: 15px;
}

/* Calculator Main Title */
.calculator-main-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

.calculator-main-title i {
    color: #ff6b35;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.calculator-main-title .desktop-title {
    display: inline;
}

.calculator-main-title .mobile-title {
    display: none;
}

/* Social Proof Section */
.social-proof {
    margin-top: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 8px;
    border-left: 4px solid #0ea5e9;
}

.social-proof p {
    margin: 0;
    font-size: 0.95rem;
    color: #0c4a6e;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.social-proof i {
    color: #0ea5e9;
    font-size: 1rem;
    flex-shrink: 0;
}

.social-proof-text {
    font-weight: 500;
}

.social-proof-separator {
    color: #0ea5e9;
    font-weight: 700;
}

.social-proof strong {
    color: #0c4a6e;
    font-weight: 700;
}

/* Desktop Optimizations - Premium Experience (1200px+) */
@media (min-width: 1200px) {
    .calculator-main-title {
        font-size: 2.25rem;
        gap: 16px;
    }
    
    .calculator-main-title i {
        font-size: 2rem;
    }
    
    .social-proof {
        padding: 16px 24px;
        margin-top: 16px;
    }
    
    .social-proof p {
        font-size: 1.05rem;
        gap: 12px;
    }
    
    .walking-hero-container {
        max-width: 700px;
        margin: 30px auto 35px;
    }
    
    .walking-cta-box {
        padding: 18px;
        margin-top: 18px;
    }
    
    .walking-cta-box p {
        font-size: 17px;
    }
}

/* Desktop Standard (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .calculator-main-title {
        font-size: 2rem;
        gap: 14px;
    }
    
    .calculator-main-title i {
        font-size: 1.75rem;
    }
    
    .social-proof {
        padding: 14px 20px;
    }
    
    .social-proof p {
        font-size: 1rem;
    }
    
    .walking-hero-container {
        max-width: 650px;
    }
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    .calculator-main-title {
        font-size: 1.5rem;
        gap: 10px;
    }
    
    .calculator-main-title i {
        font-size: 1.35rem;
    }
    
    .social-proof {
        padding: 12px 16px;
    }
    
    .social-proof p {
        font-size: 0.9rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .social-proof-separator {
        display: none;
    }
    
    .walking-hero-container {
        max-width: 500px;
        margin: 20px auto 25px;
    }
    
    .walking-cta-box {
        padding: 12px;
    }
    
    .walking-cta-box p {
        font-size: 14px;
    }
}

/* Mobile (480px - 767px) */
@media (max-width: 767px) {
    .calculator-main-title .desktop-title {
        display: none;
    }
    
    .calculator-main-title .mobile-title {
        display: inline;
    }
    
    .calculator-main-title {
        font-size: 1.35rem;
        gap: 8px;
        justify-content: center;
        text-align: center;
    }
    
    .calculator-main-title i {
        font-size: 1.25rem;
    }
    
    .social-proof {
        padding: 10px 12px;
        margin-top: 10px;
    }
    
    .social-proof p {
        font-size: 0.85rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .walking-hero-container {
        max-width: 400px;
        padding: 0 15px;
        margin: 15px auto 20px;
        min-height: 180px;
    }
    
    .walking-hero-container img {
        max-width: 180px;
        border-radius: 10px;
    }
    
    .walking-cta-box {
        padding: 10px;
        margin-top: 12px;
    }
    
    .walking-cta-box p {
        font-size: 13px;
    }
}

/* Small Mobile (up to 479px) */
@media (max-width: 479px) {
    .calculator-main-title {
        font-size: 1.2rem;
        gap: 6px;
    }
    
    .calculator-main-title i {
        font-size: 1.1rem;
    }
    
    .social-proof {
        padding: 8px 10px;
    }
    
    .social-proof p {
        font-size: 0.8rem;
    }
    
    .walking-hero-container {
        max-width: 320px;
        padding: 0 10px;
        min-height: 160px;
    }
    
    .walking-hero-container img {
        max-width: 160px;
        border-radius: 8px;
    }
    
    .walking-cta-box {
        padding: 8px;
        margin-top: 10px;
        min-height: 50px;
    }
    
    .walking-cta-box p {
        font-size: 12px;
    }
}