:root {
    --primary-color: #a2696f;
    --accent-color: #de8f62;
    --light-accent: #95c8cb;
    --highlight-color: #f1bf54;
    --background-gradient: linear-gradient(-45deg, #e8e2d9, #e2e8e9, #e8e2d9, #e9e8e2);
    --highlight-gradient: linear-gradient(-45deg, #f1bf54, #ff9a76, #f1bf54, #ff9a76);
    --white: #ffffff;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    --border: 1px solid rgba(162, 105, 111, 0.1);
    --border-radius: 8px;
    
    /* Font Sizes */
    --font-xs: 0.75rem;
    --font-sm: 0.88rem;
    --font-md: 1rem;
    --font-lg: 1.17rem;
    --font-xl: 1.3rem;
    --font-2xl: 1.43rem;
    --font-3xl: 1.56rem;
    --font-4xl: 1.69rem;
    --font-5xl: 1.95rem;
    
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 10px;
    --spacing-md: 12px;
    --spacing-lg: 15px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-3xl: 24px;
    --spacing-4xl: 25px;
}

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

body {
    font-family: "IBM Plex Sans Thai", sans-serif;
    background: var(--background-gradient);
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
    color: var(--primary-color);
    min-height: 100vh;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 60px;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.container {
    width: 100%;
    max-width: 900px;
    margin-top: var(--spacing-2xl);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.table-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius);
    border: var(--border);
    box-shadow: var(--shadow);
    width: 100%;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.price-table th, 
.price-table td {
    padding: var(--spacing-md) var(--spacing-sm);
    text-align: center;
    border-bottom: var(--border);
}

.price-table tbody {
    background: var(--white);
}

.table-label {
    font-weight: 700;
    color: var(--primary-color);
    text-align: right;
    padding-right: var(--spacing-2xl);
    width: 50%;
    background-color: var(--white);
    font-size: var(--font-lg);
}

.product-header {
    font-size: var(--font-5xl);
    font-weight: 700;
    color: var(--white);
    padding: var(--spacing-xl) var(--spacing-md);
    background: var(--primary-color);
    font-family: "Nunito", sans-serif;
}

.product-header.highlight {
    background: var(--highlight-gradient);
    background-size: 400% 400%;
    animation: gradientPulse 3s ease infinite;
}

@keyframes gradientPulse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.input-cell {
    font-family: "Nunito", sans-serif;
    background: var(--white);
}

.input-cell:focus-within {
    background: rgba(241, 191, 84, 0.15);
}

.table-input {
    background: transparent;
    border: none;
    color: var(--primary-color);
    font-size: var(--font-2xl);
    text-align: center;
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-xs);
    outline: none;
    font-family: "Nunito", sans-serif;
    border-radius: 4px;
}

.table-input::placeholder {
    color: var(--light-accent);
    opacity: 0.7;
}

.result-cell {
    color: var(--accent-color);
    font-size: var(--font-xl);
    font-weight: 600;
    font-family: "Nunito", sans-serif;
    background: var(--white);
}

.summary-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-4xl);
}

.summary {
    font-size: var(--font-4xl);
    font-weight: 700;
    color: var(--primary-color);
    padding: var(--spacing-xl) var(--spacing-3xl);
    text-align: center;
    width: 100%;
}

.summary.hidden {
    display: none;
}

.highlight-summary {
    color: var(--accent-color);
    animation: textPulse 1.5s infinite;
}

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

footer {
    width: 100%;
    text-align: center;
    font-size: var(--font-xs);
    color: var(--primary-color);
    opacity: 0.7;
    padding: var(--spacing-md) 0;
    position: absolute;
    bottom: 0;
}

footer a {
    color: var(--accent-color);
    text-decoration: none;
}

footer a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

@media (min-width: 769px) {
    .table-container,
    .summary-container {
        width: 50%;
    }
}

@media (max-width: 768px) {
    body {
        padding: var(--spacing-sm);
        padding-bottom: 50px;
    }
    
    .container {
        margin-top: var(--spacing-sm);
    }
    
    .price-table th, 
    .price-table td {
        padding: var(--spacing-sm) var(--spacing-xs);
    }
    
    .table-label {
        padding-right: var(--spacing-md);
        font-size: var(--font-md);
    }
    
    .product-header {
        font-size: var(--font-3xl);
        padding: var(--spacing-md) var(--spacing-xs);
    }
    
    .table-input {
        font-size: var(--font-lg);
        padding: var(--spacing-xs) var(--spacing-xs);
    }
    
    .result-cell {
        font-size: var(--font-sm);
    }
    
    .summary-container {
        margin-top: var(--spacing-2xl);
    }
    
    .summary {
        font-size: var(--font-xl);
        padding: var(--spacing-md) var(--spacing-2xl);
    }
    
    footer {
        position: relative;
        margin-top: var(--spacing-2xl);
    }
}

@media (max-width: 480px) {
    body {
        padding: var(--spacing-xs);
        padding-bottom: 45px;
    }
    
    .container {
        margin-top: 5px;
    }
    
    .price-table th, 
    .price-table td {
        padding: var(--spacing-xs) var(--spacing-xs);
    }
    
    .table-label {
        padding-right: var(--spacing-md);
        font-size: var(--font-sm);
    }
    
    .product-header {
        font-size: var(--font-xl);
        padding: var(--spacing-sm) var(--spacing-xs);
    }
    
    .table-input {
        font-size: var(--font-md);
        padding: 5px 3px;
    }
    
    .result-cell {
        font-size: var(--font-xs);
    }
    
    .summary-container {
        margin-top: var(--spacing-md);
    }
    
    .summary {
        font-size: var(--font-lg);
        padding: var(--spacing-md) var(--spacing-xl);
    }
    
    footer {
        font-size: var(--font-xs);
        padding: var(--spacing-xs) 0;
        margin-top: var(--spacing-md);
    }
}