:root{--color-primary: #D4AF37;--color-secondary: #8B4513;--color-background: #F5E6D3;--color-surface: #FFF8DC;--color-text: #3C2415;--color-accent: #CD853F;--color-success: #28a745;--color-warning: #ffc107;--color-danger: #dc3545;--spacing-xxs: .25rem;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--border-radius: 12px;--border-radius-sm: 8px;--border-radius-lg: 16px;--shadow: 0 4px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 20px rgba(0, 0, 0, .2);--font-family: "Arial", sans-serif;--font-size-sm: .9rem;--font-size-base: 1rem;--font-size-lg: 1.2rem;--font-size-xl: 1.5rem;--font-size-xxl: 1.8rem;--transition: all .3s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background:linear-gradient(135deg,var(--color-background) 0%,#F0D0A0 100%);color:var(--color-text);min-height:100vh;overflow-x:hidden;font-size:var(--font-size-base);line-height:1.6}.hidden{display:none!important}.text-center{text-align:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.btn{padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--border-radius);cursor:pointer;font-size:var(--font-size-base);transition:var(--transition);text-decoration:none;display:inline-block;text-align:center}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-secondary)}.btn-secondary{background:var(--color-accent);color:#fff;border:2px solid var(--color-secondary)}.btn-secondary:hover{background:var(--color-secondary)}.btn-success{background:var(--color-success);color:#fff}.btn-warning{background:var(--color-warning);color:var(--color-text)}.btn-danger{background:var(--color-danger);color:#fff}.add-slot-btn{position:fixed;top:var(--spacing-xxs);right:var(--spacing-xxs);width:60px;height:60px;background:var(--color-primary);color:#fff;border:none;border-radius:50%;font-size:2rem;cursor:pointer;box-shadow:var(--shadow-lg);transition:var(--transition);z-index:1000}.add-slot-btn:hover{transform:scale(1.1);background:var(--color-secondary)}.close-recipe-btn{background:var(--color-danger);color:#fff;border:none;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius);cursor:pointer;font-size:var(--font-size-base)}.timer-controls{display:flex;gap:var(--spacing-xs);justify-content:center}.timer-controls .btn{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm)}.lang-btn{padding:var(--spacing-xxs) var(--spacing-xs);background:var(--color-background);border:2px solid var(--color-accent);border-radius:var(--border-radius);color:var(--color-text);cursor:pointer;transition:var(--transition)}.lang-btn.active,.lang-btn:hover{background:var(--color-primary);color:#fff}.lang-btn[data-lang=th]{font-family:Arial Unicode MS,Arial,sans-serif;line-height:1}.app-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-surface);box-shadow:var(--shadow);border-bottom:3px solid var(--color-primary);position:sticky;top:0;z-index:100}.app-title{font-size:var(--font-size-xxl);font-weight:700;color:var(--color-secondary)}.language-switcher{display:flex;gap:var(--spacing-xs)}.place-holder{width:20px;height:10px;display:block}@media (max-width: 768px){.app-header{padding:var(--spacing-sm)}.app-title{font-size:var(--font-size-xl)}}.slots-container{padding:var(--spacing-lg);max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:var(--spacing-lg)}.slot{min-height:400px;background:var(--color-surface);border:3px solid var(--color-accent);border-radius:var(--border-radius);box-shadow:var(--shadow);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:var(--transition);animation:fadeIn .5s ease}.slot:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.empty-slot .slot-content{display:flex;align-items:center;justify-content:center;height:100%;cursor:pointer}.add-recipe-btn{text-align:center;padding:var(--spacing-lg);transition:transform .3s ease}.add-recipe-btn:hover{transform:scale(1.05)}.plus-icon{display:block;font-size:8rem;color:var(--color-primary);line-height:.6}.add-text{font-size:var(--font-size-lg);color:var(--color-secondary);font-weight:700}.recipe-slot .slot-content{padding:var(--spacing-md);height:100%;display:flex;flex-direction:column}.recipe-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--color-accent)}.recipe-title{font-size:var(--font-size-xl);color:var(--color-secondary);font-weight:700}@media (max-width: 768px){.slots-container{padding:var(--spacing-sm)}.slot{min-height:300px}.add-recipe-btn{padding:var(--spacing-sm)}}.ingredients-view{width:100%;height:100%;display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-md)}.ingredients-image{width:100%;height:20vh;object-fit:contain}.ingredients-title{font-size:var(--font-size-xl);font-weight:700;color:var(--color-secondary);text-align:center;margin-bottom:var(--spacing-sm)}.ingredients-list{background:#fff8dce6;border-radius:var(--border-radius);padding:var(--spacing-md);border-left:4px solid var(--color-primary);flex-grow:1}.ingredients-list h3{font-size:var(--font-size-lg);color:var(--color-secondary);margin-bottom:var(--spacing-sm);display:flex;align-items:center;gap:var(--spacing-xs)}.ingredients-list h3:before{content:"🥄";font-size:1.2em}.ingredients-list ul{list-style:none;padding:0;margin:0}.ingredients-list li{padding:var(--spacing-xs) 0;border-bottom:1px solid rgba(205,133,63,.2);display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-base);color:var(--color-text)}.ingredients-list li:last-child{border-bottom:none}.ingredients-list li:before{content:"✓";color:var(--color-primary);font-weight:700;font-size:1.1em;min-width:20px}.ingredients-actions{display:flex;gap:var(--spacing-sm);padding-top:var(--spacing-sm);border-top:2px solid var(--color-accent)}.start-cooking-btn{flex-grow:1;padding:var(--spacing-md) var(--spacing-lg);background:linear-gradient(135deg,var(--color-primary),var(--color-accent));color:#fff;border:none;border-radius:var(--border-radius);font-size:var(--font-size-lg);font-weight:700;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow)}.start-cooking-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);background:linear-gradient(135deg,var(--color-secondary),var(--color-primary))}.start-cooking-btn:before{content:"👨‍🍳 ";margin-right:var(--spacing-xs)}@media (max-width: 768px){.ingredients-view{padding:var(--spacing-sm)}.ingredients-image{height:15vh}.ingredients-actions{flex-direction:column}.ingredients-list li{font-size:var(--font-size-sm)}}.step-navigation{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-md);padding:var(--spacing-md) var(--spacing-sm);background:#fff8dc80;border-radius:var(--border-radius);border:2px solid var(--color-accent)}.nav-arrow{width:50px;height:50px;border-radius:50%;border:2px solid var(--color-primary);background:linear-gradient(135deg,var(--color-surface),var(--color-background));color:var(--color-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);box-shadow:var(--shadow);position:relative;overflow:hidden}.nav-arrow:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(212,175,55,.3),transparent);transition:left .5s ease}.nav-arrow:hover:before{left:100%}.nav-arrow:hover{transform:scale(1.1);background:linear-gradient(135deg,var(--color-primary),var(--color-accent));color:#fff;border-color:var(--color-secondary);box-shadow:var(--shadow-lg)}.nav-arrow:active{transform:scale(.95)}.nav-arrow:disabled{opacity:.4;cursor:not-allowed;transform:none;background:var(--color-background);color:#3c241580;border-color:#cd853f80}.nav-arrow:disabled:hover{transform:none;background:var(--color-background);color:#3c241580;border-color:#cd853f80;box-shadow:var(--shadow)}.nav-arrow:disabled:before{display:none}.arrow-icon{font-size:1.5rem;font-weight:700;-webkit-user-select:none;user-select:none;transition:var(--transition);pointer-events:none}.nav-arrow-left:hover .arrow-icon{transform:translate(-2px)}.nav-arrow-right:hover .arrow-icon{transform:translate(2px)}.step-indicator{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface);border-radius:var(--border-radius);border:2px solid var(--color-primary);box-shadow:inset 0 2px 4px #0000001a}.current-step{font-size:var(--font-size-lg);font-weight:700;color:var(--color-primary);min-width:20px;text-align:center}.step-separator{font-size:var(--font-size-base);color:var(--color-accent);font-weight:700}.total-steps{font-size:var(--font-size-base);color:var(--color-secondary);font-weight:700;min-width:20px;text-align:center}@keyframes stepChange{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.step-indicator.updated{animation:stepChange .3s ease}@media (max-width: 768px){.step-navigation{padding:var(--spacing-sm);margin-top:var(--spacing-sm)}.nav-arrow{width:40px;height:40px}.arrow-icon{font-size:1.2rem}.step-indicator{padding:var(--spacing-xs) var(--spacing-sm)}.current-step,.total-steps{font-size:var(--font-size-base)}}.recipe-media{width:100%;max-height:200px;border-radius:var(--border-radius);margin-bottom:var(--spacing-sm);object-fit:cover;box-shadow:var(--shadow);position:relative}.recipe-image{transition:var(--transition);cursor:pointer}.recipe-image:hover{transform:scale(1.02);box-shadow:var(--shadow-lg)}.recipe-media:after{content:"";position:absolute;top:var(--spacing-xs);right:var(--spacing-xs);width:24px;height:24px;border-radius:50%;background:#000000b3;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;z-index:10}.recipe-video:after{content:"▶️"}.recipe-image:after{content:"🖼️"}.step-content{flex:1;display:flex;flex-direction:column}.step-text{font-size:var(--font-size-lg);line-height:1.6;margin-bottom:var(--spacing-sm);color:var(--color-text);background:#fff8dcb3;padding:var(--spacing-sm);border-radius:var(--border-radius);border-left:4px solid var(--color-primary)}.timer-section{margin:var(--spacing-sm) 0}.timer-display{display:flex;align-items:center;justify-content:space-between;background:var(--color-background);padding:var(--spacing-sm);border-radius:var(--border-radius);margin-bottom:var(--spacing-xs);border:2px solid var(--color-accent)}.timer-text{font-size:var(--font-size-lg);font-weight:700;color:var(--color-secondary)}.timer-progress{width:100%;height:8px;background:var(--color-background);border-radius:4px;overflow:hidden;margin-bottom:var(--spacing-xs)}.timer-progress-bar{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));width:0%;transition:width .1s linear;border-radius:4px}.timer-progress-bar.ending{background:linear-gradient(90deg,var(--color-warning),var(--color-danger));animation:pulse .5s infinite}@media (max-width: 768px){.timer-display{flex-direction:column;gap:var(--spacing-xs)}.recipe-media{max-height:150px}.recipe-media:after{width:20px;height:20px;font-size:10px}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}.modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:var(--color-surface);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);padding:var(--spacing-lg);max-width:500px;width:90%;min-height:600px;max-height:80vh;overflow-y:auto;display:flex;flex-direction:column;justify-content:space-between;align-items:center;position:relative;z-index:1001}.modal-header{width:100%;text-align:center;margin-bottom:var(--spacing-lg)}.modal-header h2{color:var(--color-secondary);font-size:var(--font-size-xl);margin:0}.recipe-wheel{margin:var(--spacing-lg) 0;width:100%}.wheel-container{display:flex;flex-direction:column;gap:var(--spacing-sm);max-height:300px;overflow-y:auto}.recipe-option{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-background);border:2px solid var(--color-accent);border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);text-align:center}.recipe-option:hover,.recipe-option.selected{background:var(--color-primary);color:#fff}.recipe-option span{font-size:var(--font-size-lg);font-weight:700}.modal-footer{width:100%;display:flex;justify-content:center;gap:var(--spacing-sm);margin-top:var(--spacing-lg);padding-top:var(--spacing-sm);border-top:1px solid var(--color-accent)}@media (max-width: 768px){.modal-content{width:95%;padding:var(--spacing-sm)}.modal-footer{flex-direction:column}}