@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap";.scroll-to-top-btn{bottom:calc(var(--bottom-nav-height,60px) + 24px);background-color:var(--color-brand);color:#fff;z-index:90;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;padding:0;display:flex;position:fixed;right:24px;box-shadow:0 4px 12px oklch(20% 0 0/.15)}@media (width>=768px){.scroll-to-top-btn{width:56px;height:56px;bottom:32px;right:32px}}.app-footer{background-color:var(--color-surface);border-top:1px solid var(--color-border);padding:var(--space-6) 0 calc(var(--bottom-nav-height,60px) + var(--space-4)) 0;margin-top:auto;position:relative;overflow:hidden}@media (width>=768px){.app-footer{padding-bottom:var(--space-6)}}.footer-container{gap:var(--space-6);z-index:2;flex-direction:column;display:flex;position:relative}.footer-content{text-align:center;align-items:center;gap:var(--space-4);flex-direction:column;display:flex}@media (width>=768px){.footer-content{text-align:left;flex-direction:row;justify-content:space-between}}.footer-brand h3{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-brand);margin-bottom:var(--space-2);font-weight:700}.footer-brand p{color:var(--color-text-secondary);font-size:var(--text-sm);max-width:300px}.footer-links{gap:var(--space-4);display:flex}.footer-line-btn{align-items:center;gap:var(--space-2);color:#fff;font-size:var(--text-sm);border-radius:var(--radius-full);transition:all var(--transition-fast);background-color:#00b900;padding:10px 20px;font-weight:600;text-decoration:none;display:inline-flex;box-shadow:0 4px 12px #00b90040}.footer-line-btn:hover{background-color:#090;transform:translateY(-2px);box-shadow:0 6px 16px #00b90059}.footer-bottom{border-top:1px dashed var(--color-border);padding-top:var(--space-4);text-align:center}.footer-bottom p{justify-content:center;align-items:center;gap:var(--space-2);color:var(--color-text-muted);font-size:var(--text-xs);display:flex}.heart-icon{color:#ef4444;fill:#ef4444;animation:1.5s ease-in-out infinite heartbeat}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.app-footer:before{content:"";background:radial-gradient(circle, var(--color-brand-light) 0%, transparent 70%);opacity:.5;pointer-events:none;border-radius:50%;width:150px;height:150px;position:absolute;top:-40px;right:-40px}.app-footer:after{content:"";background:radial-gradient(circle, var(--color-warning-light) 0%, transparent 70%);opacity:.5;pointer-events:none;border-radius:50%;width:150px;height:150px;position:absolute;bottom:-40px;left:-40px}.app-shell{background-color:var(--color-surface);flex-direction:column;min-height:100vh;display:flex}.top-nav{background-color:var(--color-surface-raised);box-shadow:var(--shadow-sm);z-index:100;height:var(--nav-height);display:none;position:sticky;top:0}.top-nav-container{justify-content:space-between;align-items:center;height:100%;display:flex}.brand{align-items:center;display:flex}.brand-text{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-brand);font-weight:700}.desktop-nav{gap:var(--space-6);height:100%;display:flex}.desktop-nav-link{align-items:center;gap:var(--space-2);color:var(--color-text-secondary);height:100%;font-weight:500;display:flex;position:relative}.desktop-nav-link:hover,.desktop-nav-link.active{color:var(--color-brand)}.desktop-nav-link.active:after{content:"";background-color:var(--color-brand);border-radius:var(--radius-full) var(--radius-full) 0 0;height:3px;position:absolute;bottom:0;left:0;right:0}.user-section{align-items:center;gap:var(--space-4);display:flex}.welcome-text{color:var(--color-text-secondary);font-weight:500}.logout-btn-desktop{color:var(--color-text-muted);transition:color var(--transition-fast)}.logout-btn-desktop:hover{color:var(--color-danger)}.main-content{padding:var(--space-4) var(--space-4) var(--space-4);flex:1}.bottom-nav{background-color:var(--color-surface-raised);height:var(--bottom-nav-height);padding-bottom:env(safe-area-inset-bottom,16px);z-index:100;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -1px 3px oklch(20% 0 0/.05)}.bottom-nav-link{color:var(--color-text-muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;width:100%;height:100%;transition:color .2s;display:flex;position:relative}.bottom-nav-link span{font-size:11px;font-weight:500;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.bottom-nav-link svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.bottom-nav-link.active{color:var(--color-brand)}.bottom-nav-link.active svg{transform:scale(1.15)translateY(-2px)}.bottom-nav-link.active span{transform:translateY(2px)}@media (width>=768px){.top-nav{display:block}.bottom-nav{display:none}.main-content{padding-bottom:var(--space-8)}}.toast-container{top:var(--space-4);z-index:9999;gap:var(--space-2);width:calc(100% - var(--space-8));pointer-events:none;flex-direction:column;max-width:400px;display:flex;position:fixed;left:50%;transform:translate(-50%)}@media (width>=768px){.toast-container{left:auto;right:var(--space-4);transform:none}}.toast{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);pointer-events:auto;color:#fff;display:flex}.toast-success{background-color:var(--color-success)}.toast-error{background-color:var(--color-danger)}.toast-warning{background-color:var(--color-warning)}.toast-info{background-color:var(--color-info)}.toast-message{font-size:var(--text-sm);flex:1;font-weight:500}.toast-close{color:#ffffffb3;cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.toast-close:hover{color:#fff}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;width:100vw;height:100vh;padding:var(--space-4);background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.pdpa-modal{background-color:var(--color-surface);border-radius:var(--radius-xl);flex-direction:column;width:100%;max-width:500px;max-height:90vh;display:flex;position:relative;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.modal-close-btn{color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-full);transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:8px;display:flex;position:absolute;top:16px;right:16px}.modal-close-btn:hover{background-color:var(--color-surface-mixed);color:var(--color-text-primary)}.pdpa-title{font-size:var(--text-lg);color:var(--color-text-primary);border-bottom:1px solid var(--color-border);margin:0;padding:24px 24px 16px}.pdpa-text-content{font-size:var(--text-sm);color:var(--color-text-secondary);padding:24px;line-height:1.6;overflow-y:auto}.pdpa-text-content p{margin-top:0;margin-bottom:12px}.pdpa-text-content strong{color:var(--color-text-primary)}.pdpa-list{margin-bottom:16px;padding-left:20px}.pdpa-list li{margin-bottom:8px}.pdpa-note{color:var(--color-text-muted);font-size:12px;margin-top:16px!important;margin-bottom:0!important}.modal-actions-footer{border-top:1px solid var(--color-border);justify-content:flex-end;padding:16px 24px;display:flex}.pdpa-accept-btn{width:100%}.login-page{background-color:var(--color-surface);min-height:100vh;display:flex}.login-left-panel{display:none}@media (width>=1024px){.login-left-panel{background-color:var(--color-brand);color:#fff;padding:var(--space-12);perspective:1000px;flex-direction:column;flex:1;justify-content:center;display:flex;position:relative;overflow:hidden}.login-left-bg{pointer-events:none;z-index:0;background:radial-gradient(circle,#ffffff26 0%,#0000 60%);width:200%;height:200%;animation:20s linear infinite rotateGradient;position:absolute;top:-50%;left:-50%}.login-left-glow{background:radial-gradient(800px circle at var(--mouse-x,50%) var(--mouse-y,50%), #ffffff26, transparent 40%);pointer-events:none;z-index:0;opacity:0;transition:opacity .5s;position:absolute;inset:0}.login-left-panel:hover .login-left-glow{opacity:1}@keyframes rotateGradient{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.panel-content{z-index:1;transform:rotateX(var(--rotate-x,0)) rotateY(var(--rotate-y,0));transform-style:preserve-3d;will-change:transform;transition:transform .4s cubic-bezier(.16,1,.3,1);position:relative}.login-left-panel:hover .panel-content{transition:transform .1s linear}.panel-title{margin-bottom:var(--space-6);color:#fff;letter-spacing:-.02em;font-size:4.5rem;font-weight:700;line-height:1.05}.title-dot{color:var(--color-warning)}.panel-subtitle{font-size:var(--text-xl);opacity:.9;max-width:400px;font-weight:400;line-height:1.6}.panel-badge{margin-top:var(--space-8);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--text-sm);letter-spacing:2px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff0d;border:1px solid #ffffff4d;font-weight:600;display:inline-block}}.login-right-panel{padding:var(--space-4);flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.login-container{gap:var(--space-6);flex-direction:column;width:100%;max-width:380px;display:flex}.login-header{margin-bottom:var(--space-6)}@media (width>=1024px){.login-header{display:none}}.login-title{color:var(--color-brand);font-size:var(--text-3xl);margin-bottom:var(--space-2)}.login-subtitle{color:var(--color-text-secondary);font-size:var(--text-base)}.login-form{gap:var(--space-5);flex-direction:column;display:flex}.form-group{gap:var(--space-2);flex-direction:column;display:flex}.form-group label{color:var(--color-text-primary);font-weight:600;font-size:var(--text-sm)}.form-group input{padding:var(--space-4);font-size:var(--text-lg);border:1px solid var(--color-border);border-bottom:2px solid var(--color-border);background-color:var(--color-surface-hover);transition:all var(--transition-normal);border-radius:0}.form-group input:focus{border-color:#0000;border-bottom-color:var(--color-brand);box-shadow:none;background-color:var(--color-surface);outline:none}.form-group input.has-error{border-bottom-color:var(--color-danger)}.secret-form-group{overflow:hidden}.secret-input{width:100%;padding:var(--space-3) var(--space-4);font-size:var(--text-base);background-color:var(--color-surface-hover);color:var(--color-text-primary);border-radius:var(--radius-sm);text-align:center;transition:all var(--transition-fast);letter-spacing:2px;border:none}.secret-input:focus{background-color:var(--color-surface);box-shadow:0 0 0 2px var(--color-brand);outline:none}.password-input-wrapper{align-items:center;display:flex;position:relative}.password-input-wrapper input{width:100%;padding-right:48px}.password-toggle-btn{right:var(--space-4);color:var(--color-text-muted);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:4px;display:flex;position:absolute}.password-toggle-btn:hover{color:var(--color-text-primary)}.error-text{color:var(--color-danger);font-size:var(--text-xs)}.btn{padding:var(--space-4);font-size:var(--text-base);transition:all var(--transition-normal);justify-content:center;align-items:center;gap:var(--space-2);cursor:pointer;border-radius:0;font-weight:600;display:flex}.btn:disabled{opacity:.5;cursor:not-allowed}.pdpa-notice{color:var(--color-text-muted);text-align:center;margin-top:12px;margin-bottom:0;font-size:11px;line-height:1.5}.pdpa-notice .link-btn{font-size:11px;text-decoration:underline}.pdpa-checkbox-group{margin-bottom:var(--space-4);padding:var(--space-3);background-color:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border)}.pdpa-label{align-items:flex-start;gap:var(--space-2);cursor:pointer;font-size:var(--text-sm);color:var(--color-text-secondary);display:flex}.pdpa-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-brand);cursor:pointer;margin-top:4px}.link-btn{color:var(--color-brand);cursor:pointer;font-family:inherit;font-size:inherit;background:0 0;border:none;padding:0;font-weight:500;text-decoration:underline}.link-btn:hover{color:var(--color-brand-light)}.btn-primary{background-color:var(--color-text-primary);color:#fff}.btn-primary:hover:not(:disabled){background-color:#000}.btn-outline{color:var(--color-text-primary);border:1px solid var(--color-text-primary);background-color:#0000}.btn-outline:hover:not(:disabled){background-color:var(--color-surface-hover)}.btn-group{gap:var(--space-3);grid-template-columns:1fr 2fr;display:grid}.login-hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-2)}.alert-info{background-color:var(--color-surface-hover);color:var(--color-text-primary);padding:var(--space-4);font-size:var(--text-sm);border-left:4px solid var(--color-brand)}.dev-toggle-btn{text-align:left;width:100%;color:var(--color-text-muted);font-size:var(--text-xs);margin-top:var(--space-8);cursor:pointer;background:0 0;border:none;display:block}.dev-toggle-btn:hover{color:var(--color-text-primary)}.dev-form{margin-top:var(--space-2);padding:var(--space-6);background-color:var(--color-surface-hover);border-radius:var(--radius-lg)}.dev-header{margin-bottom:var(--space-4);justify-content:space-between;align-items:center;display:flex}.dev-badge{background-color:var(--color-text-primary);color:#fff;font-size:var(--text-xs);border-radius:var(--radius-full);padding:4px 10px;font-weight:700;display:inline-block}.dev-back-btn{color:var(--color-text-muted);font-size:var(--text-xs);cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.dev-back-btn:hover{color:var(--color-text-primary)}.login-footer{margin-top:var(--space-12);color:var(--color-text-muted);font-size:var(--text-xs)}.skeleton-base{background:linear-gradient(90deg, var(--color-surface) 0%, var(--color-surface-raised) 50%, var(--color-surface) 100%);background-size:200% 100%;animation:1.5s linear infinite shimmer}.empty-state{text-align:center;padding:var(--space-8) 0;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-icon-wrapper{color:var(--color-text-muted);background-color:var(--color-surface);border-radius:var(--radius-full);width:80px;height:80px;margin-bottom:var(--space-4);justify-content:center;align-items:center;display:flex}.empty-title{font-size:var(--text-lg);color:var(--color-text-primary);margin-bottom:var(--space-2)}.empty-description{color:var(--color-text-secondary);font-size:var(--text-sm);max-width:300px;margin-bottom:var(--space-4)}.empty-action{margin-top:var(--space-2)}.dashboard-layout{gap:var(--space-6);flex-direction:column;max-width:1000px;margin:0 auto;display:flex}@media (width>=1024px){.dashboard-layout{align-items:flex-start;gap:var(--space-8);flex-direction:row}.dashboard-sidebar{width:280px;top:calc(var(--nav-height) + var(--space-8));position:sticky}.dashboard-main{flex:1;min-width:0}}.dashboard-sidebar{gap:var(--space-6);flex-direction:column;display:flex}.greeting-title{font-size:var(--text-3xl);color:var(--color-text-primary);margin-bottom:var(--space-2);font-weight:700;line-height:1.2}.greeting-subtitle{color:var(--color-text-secondary);font-size:var(--text-sm)}.date-filter-wrapper{margin-top:var(--space-6);gap:var(--space-2);flex-direction:column;display:flex}.filter-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin:0;font-weight:600}.date-filter-stack{gap:var(--space-2);flex-direction:column;display:flex}.date-input-container{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast);box-shadow:var(--shadow-sm);width:100%;display:flex}.date-input-container:hover,.date-input-container:focus-within{border-color:var(--color-brand-light);box-shadow:0 4px 12px #0000000d}.date-input-clean{font-family:inherit;font-size:var(--text-sm);color:var(--color-text-primary);cursor:pointer;background:0 0;border:none;outline:none;width:100%;min-width:0;padding:0;font-weight:500}.date-input-clean::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.5;transition:opacity .2s}.date-input-clean::-webkit-calendar-picker-indicator:hover{opacity:1}.dashboard-pinto-tab{animation:.3s ease-out fadeIn}.pinto-dash-filters{gap:var(--space-3);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.dashboard-tabs{gap:var(--space-2);padding-bottom:var(--space-4);margin-bottom:var(--space-4);border-bottom:1px solid var(--color-border);display:flex;overflow-x:auto}.dashboard-tabs::-webkit-scrollbar{display:none}.dash-tab-btn{padding:var(--space-2) var(--space-4);font-weight:600;font-size:var(--text-sm);color:var(--color-text-secondary);cursor:pointer;white-space:nowrap;transition:color var(--transition-fast);background:0 0;border:none;position:relative}.dash-tab-btn.active{color:var(--color-brand)}.dash-tab-indicator{background-color:var(--color-brand);border-radius:2px 2px 0 0;height:2px;position:absolute;bottom:-17px;left:0;right:0}.dash-tab-label{z-index:1;position:relative}.bento-grid{gap:var(--space-4);grid-template-columns:1fr;display:grid}@media (width>=640px){.bento-grid{grid-template-columns:repeat(2,1fr)}.span-2{grid-column:span 2}}.bento-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm);flex-direction:column;display:flex}.bento-card.highlight{background:linear-gradient(160deg, var(--color-surface) 0%, var(--color-surface-raised) 100%);border-color:var(--color-brand-light)}.bento-title{margin:0 0 var(--space-4) 0;font-size:var(--text-lg);color:var(--color-text-primary);font-weight:600}.macro-chart-container{flex-direction:column;align-items:center;display:flex}@media (width>=640px){.macro-chart-container{flex-direction:row;align-items:center}}.empty-chart{width:100%;height:220px;color:var(--color-text-muted);font-size:var(--text-sm);justify-content:center;align-items:center;display:flex}.macro-legend-group{gap:var(--space-4);width:100%;margin-top:var(--space-4);grid-template-columns:1fr 1fr;display:grid}@media (width>=640px){.macro-legend-group{flex-shrink:0;width:200px;margin-top:0}}.macro-stat{align-items:center;gap:var(--space-3);display:flex}.macro-icon-box{border-radius:var(--radius-md);justify-content:center;align-items:center;width:32px;height:32px;display:flex}.bg-red{color:#ef4444;background:#fee2e2}.bg-indigo{color:#6366f1;background:#e0e7ff}.bg-emerald{color:#10b981;background:#d1fae5}.bg-amber{color:#f59e0b;background:#fef3c7}.macro-info{flex-direction:column;display:flex}.macro-val{font-weight:700;font-size:var(--text-base);color:var(--color-text-primary);line-height:1}.macro-lbl{color:var(--color-text-muted);margin-top:2px;font-size:11px;font-weight:600}.stat-header{align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);display:flex}.stat-title{font-size:var(--text-sm);color:var(--color-text-secondary);font-weight:600}.stat-main{font-size:var(--text-3xl);font-family:var(--font-display);color:var(--color-text-primary);font-weight:700;line-height:1}.stat-unit{font-size:var(--text-base);color:var(--color-text-muted);font-weight:500}.stat-desc{margin:var(--space-2) 0 0 0;font-size:var(--text-xs);color:var(--color-text-muted)}.card-header-flex{margin-bottom:var(--space-4);justify-content:space-between;align-items:flex-start;gap:var(--space-2);display:flex}.header-title-group{align-items:center;gap:var(--space-2);display:flex}.stat-title{font-size:var(--text-sm);color:var(--color-text-secondary);white-space:nowrap;font-weight:600}.mini-progress-track{background-color:var(--color-surface-mixed);border-radius:var(--radius-full);width:100%;height:6px;margin-top:var(--space-4);overflow:hidden}.mini-progress-fill{background-color:var(--color-brand);border-radius:var(--radius-full);height:100%;transition:width .8s cubic-bezier(.16,1,.3,1)}.order-breakdown{gap:var(--space-3);margin-top:var(--space-4);display:flex}.breakdown-item{color:var(--color-text-primary);background-color:var(--color-surface-raised);border-radius:var(--radius-md);border:1px solid var(--color-border-subtle);align-items:center;gap:6px;padding:6px 10px;font-size:11px;font-weight:600;display:flex}.delivery-status{background:var(--color-surface);border-radius:var(--radius-full);color:var(--color-text-muted);border:1px solid var(--color-border);padding:4px 10px;font-size:11px;font-weight:600}.meal-display-select{border-radius:var(--radius-full);border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' 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-position:right 8px center;background-repeat:no-repeat;outline:none;padding:4px 24px 4px 10px;font-family:inherit;font-size:11px;font-weight:500}.meal-display-select:hover,.meal-display-select:focus{border-color:var(--color-brand);color:var(--color-brand)}.alacarte-list{gap:var(--space-4);flex-direction:column;display:flex}.alacarte-card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-5);border:1px solid var(--color-border);transition:all var(--transition-fast)}.alacarte-card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-sm)}.alacarte-card.cancelled{opacity:.6}.alacarte-header{margin-bottom:var(--space-3);font-size:var(--text-sm);justify-content:space-between;display:flex}.alacarte-date{color:var(--color-text-muted)}.alacarte-price{color:var(--color-brand);font-weight:700}.alacarte-title{margin:0 0 var(--space-2) 0;font-size:var(--text-base);color:var(--color-text-primary)}.alacarte-meta{justify-content:space-between;align-items:center;display:flex}.status-pill{background:var(--color-surface-raised);border-radius:var(--radius-full);color:var(--color-text-secondary);padding:4px 10px;font-size:11px;font-weight:600}.status-pill.success{background:var(--color-success-light);color:var(--color-success)}.pinto-page{gap:var(--space-6);flex-direction:column;max-width:800px;margin:0 auto;display:flex}.package-tabs{gap:var(--space-2);padding-bottom:var(--space-2);-ms-overflow-style:none;display:flex;overflow-x:auto}.package-tabs::-webkit-scrollbar{display:none}.package-tab{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);background-color:var(--color-surface-raised);color:var(--color-text-secondary);white-space:nowrap;border:1px solid var(--color-border);transition:all var(--transition-fast);font-weight:500}.package-tab.active{background-color:var(--color-brand);color:#fff;border-color:var(--color-brand)}.pinto-status-widget{background:linear-gradient(145deg, var(--color-surface-raised), var(--color-surface));border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-md);border:1px solid var(--color-border-subtle);position:relative;overflow:hidden}.pinto-status-widget.low-balance{border-color:var(--color-warning);box-shadow:0 8px 30px #f59e0b26}.widget-header{margin-bottom:var(--space-6);justify-content:space-between;align-items:center;display:flex}.package-name{font-size:var(--text-xl);margin:0}.status-badge{border-radius:var(--radius-full);font-size:var(--text-xs);padding:4px 12px;font-weight:600}.status-badge.active{background-color:var(--color-success-light);color:var(--color-success)}.status-badge.paused{background-color:var(--color-warning-light);color:var(--color-warning)}.status-badge.completed{background-color:var(--color-surface);color:var(--color-text-muted);border:1px solid var(--color-border)}.meals-display{margin-bottom:var(--space-6);justify-content:center;display:flex}.progress-ring-container{width:200px;height:200px;position:relative}.progress-ring{width:100%;height:100%;transform:rotate(-90deg)}.ring-bg{fill:none;stroke:var(--color-border-subtle);stroke-width:8px}.ring-progress{fill:none;stroke:var(--color-brand);stroke-width:8px;stroke-linecap:round;stroke-dasharray:283;transition:stroke-dashoffset 1.5s cubic-bezier(.16,1,.3,1)}.low-balance .ring-progress{stroke:var(--color-warning)}.empty-balance .ring-progress{stroke:var(--color-danger)}.meals-count{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.meals-count .remaining{font-family:var(--font-display);color:var(--color-text-primary);font-size:3rem;font-weight:700;line-height:1}.meals-count .divider{display:none}.meals-count .total{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:4px}.meals-count .total:before{content:"จากทั้งหมด "}.meals-count .label{font-size:var(--text-base);color:var(--color-text-secondary);margin-top:-4px}.warning-banner{background-color:var(--color-warning-light);color:var(--color-warning);padding:var(--space-3);border-radius:var(--radius-md);justify-content:center;align-items:center;gap:var(--space-2);font-size:var(--text-sm);margin-bottom:var(--space-6);font-weight:500;display:flex}.warning-banner.danger{background-color:var(--color-danger-light);color:var(--color-danger)}.package-details-grid{gap:var(--space-4);background-color:var(--color-surface);padding:var(--space-4);border-radius:var(--radius-lg);grid-template-columns:repeat(3,1fr);display:grid}.detail-item{text-align:center;flex-direction:column;align-items:center;gap:4px;display:flex}.detail-item.highlight{position:relative}.detail-label{font-size:var(--text-xs);color:var(--color-text-muted)}.detail-value{font-size:var(--text-sm);color:var(--color-text-primary);font-weight:600}.section-header-with-filters{gap:var(--space-4);margin-bottom:var(--space-4);flex-direction:column;display:flex}@media (width>=768px){.section-header-with-filters{flex-direction:row;justify-content:space-between;align-items:center}}.section-title{margin-bottom:0}.filter-controls{gap:var(--space-3);flex-wrap:wrap;display:flex}.search-input-wrapper{flex:1;min-width:200px;position:relative}.search-icon{color:var(--color-text-muted);position:absolute;top:50%;left:12px;transform:translateY(-50%)}.menu-search-input{border-radius:var(--radius-full);border:1px solid var(--color-border);background-color:var(--color-surface);width:100%;font-family:inherit;font-size:var(--text-sm);transition:all var(--transition-fast);padding:8px 12px 8px 36px}.menu-search-input:focus{border-color:var(--color-brand);box-shadow:0 0 0 2px var(--color-brand-light);outline:none}.category-select{border-radius:var(--radius-full);border:1px solid var(--color-border);background-color:var(--color-surface);font-family:inherit;font-size:var(--text-sm);color:var(--color-text-primary);appearance:none;cursor:pointer;transition:all var(--transition-fast);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' 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-position:right 12px center;background-repeat:no-repeat;padding:8px 32px 8px 16px}.category-select:focus{border-color:var(--color-brand);outline:none}.meal-history-list{gap:var(--space-6);flex-direction:column;display:flex}.daily-meal-group{background-color:#0000}.daily-meal-header{padding:var(--space-2) 0;border-bottom:2px solid var(--color-border);margin-bottom:var(--space-4);justify-content:space-between;align-items:center;display:flex}.delivery-date{font-weight:700;font-size:var(--text-lg);color:var(--color-text-primary)}.daily-meal-cards{gap:var(--space-3);flex-direction:column;display:flex}.meal-history-card{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm);transition:transform var(--transition-fast), box-shadow var(--transition-fast)}.meal-history-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border);transform:translateY(-2px)}.meal-card-content{flex-direction:column;gap:4px;display:flex}.meal-card-header{margin-bottom:var(--space-2);justify-content:space-between;align-items:flex-start;display:flex}.meal-title-group{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.category-badge{border-radius:var(--radius-full);background-color:var(--color-surface-mixed);color:var(--color-text-secondary);border:1px solid var(--color-border);white-space:nowrap;padding:2px 8px;font-size:11px;font-weight:600}.meal-name-main{font-size:var(--text-base);color:var(--color-text-primary);font-weight:600;line-height:1.4}.meal-type-row{margin-bottom:var(--space-2);justify-content:space-between;align-items:center;display:flex}.meal-type-label{font-size:var(--text-sm);color:var(--color-text-muted)}.delivery-status{background:var(--color-surface-raised);border-radius:var(--radius-full);color:var(--color-text-muted);border:1px solid var(--color-border);white-space:nowrap;padding:4px 10px;font-size:11px;font-weight:600}.delivery-status.success{background:var(--color-success-light);color:var(--color-success);border-color:#0000}.delivery-status.pending{background:var(--color-warning-light);color:var(--color-warning);border-color:#0000}.package-nutrition-summary{background:var(--color-surface);padding:var(--space-4) var(--space-5);border-radius:var(--radius-xl);margin-bottom:var(--space-6);gap:var(--space-3);border:1px solid var(--color-border-subtle);flex-direction:column;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 15px #00000008}.package-nutrition-summary:before{content:"";background:linear-gradient(to bottom, var(--color-brand), var(--color-brand-light));width:4px;height:100%;position:absolute;top:0;left:0}.package-nutrition-summary h4{font-size:var(--text-sm);color:var(--color-text-primary);letter-spacing:-.2px;margin:0;font-weight:700}.mt-2{margin-top:8px}.macros-row{gap:var(--space-3);flex-wrap:wrap;display:flex}.macros-row.small{gap:var(--space-2)}.macros-row.small .macro{box-shadow:none;padding:2px 8px;font-size:10px}.macro{border-radius:var(--radius-full);align-items:center;gap:4px;padding:4px 12px;font-size:11px;font-weight:600;display:inline-flex;box-shadow:0 2px 6px #00000008}.macro.cal{color:#e11d48;background-color:#e11d4814}.macro.pro{color:#4338ca;background-color:#4338ca14}.macro.carb{color:#059669;background-color:#05966914}.macro.fat{color:#d97706;background-color:#d9770614}.macros-row.small .macro.cal{background-color:#e11d480d}.macros-row.small .macro.pro{background-color:#4338ca0d}.macros-row.small .macro.carb{background-color:#0596690d}.macros-row.small .macro.fat{background-color:#d977060d}.empty-history{text-align:center;padding:var(--space-8);color:var(--color-text-muted);background-color:var(--color-surface-raised);border-radius:var(--radius-lg);font-size:var(--text-sm)}.profile-page{gap:var(--space-8);flex-direction:column;max-width:600px;margin:0 auto;display:flex}.profile-header{padding-top:var(--space-4);flex-direction:column;align-items:center;display:flex}.avatar-container{border-radius:var(--radius-full);width:96px;height:96px;margin-bottom:var(--space-4);background-color:var(--color-surface-hover);overflow:hidden}.avatar-img{object-fit:cover;width:100%;height:100%}.avatar-placeholder{background:var(--color-surface-hover);width:100%;height:100%;color:var(--color-text-muted);justify-content:center;align-items:center;display:flex}.member-name{font-size:var(--text-2xl);margin-bottom:var(--space-1);text-align:center;font-weight:700}.member-phone{color:var(--color-text-secondary);font-size:var(--text-base);margin-bottom:var(--space-4)}.member-status-badges{gap:var(--space-2);display:flex}.badge{border-radius:var(--radius-full);font-size:var(--text-xs);padding:4px 12px;font-weight:600}.badge.success{background-color:var(--color-success-light);color:var(--color-success)}.badge.neutral{background-color:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-secondary)}.badge.brand{background-color:var(--color-brand-light);color:var(--color-brand-dark)}.profile-list-group{flex-direction:column;display:flex}.profile-list-item{align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border);cursor:pointer;transition:background-color var(--transition-fast);display:flex}.profile-list-item:hover{background-color:var(--color-surface-hover);margin:0 calc(var(--space-4) * -1);padding-left:var(--space-4);padding-right:var(--space-4);border-bottom-color:#0000}.item-icon-wrapper{border-radius:var(--radius-full);background-color:var(--color-surface-hover);width:40px;height:40px;color:var(--color-text-primary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.item-icon-wrapper.brand{background-color:var(--color-brand-light);color:var(--color-brand-dark)}.item-content{flex-direction:column;flex:1;gap:4px;display:flex}.item-content h3{font-size:var(--text-base);color:var(--color-text-primary);margin:0;font-weight:600}.item-content p{font-size:var(--text-sm);margin:0}.item-content p.no-data{color:var(--color-text-muted)}.dev-badge{color:var(--color-brand);background-color:var(--color-brand-light);border-radius:var(--radius-full);white-space:nowrap;margin-right:8px;padding:4px 8px;font-size:10px;font-weight:600}.item-chevron,.has-data{color:var(--color-text-secondary)}.action-section{margin-top:var(--space-4);flex-direction:column;display:flex}.btn-logout-flat{width:100%;padding:var(--space-4);color:var(--color-danger);font-size:var(--text-base);cursor:pointer;transition:opacity var(--transition-fast);background-color:#0000;border:none;font-weight:600}.btn-logout-flat:hover{opacity:.7}.logout-confirm{background-color:var(--color-surface-hover);padding:var(--space-5);border-radius:var(--radius-lg);text-align:center}.logout-confirm p{margin-bottom:var(--space-4);font-weight:500}.confirm-actions{gap:var(--space-3);display:flex}.confirm-actions button{padding:var(--space-3);border-radius:var(--radius-md);flex:1;font-weight:500}.btn-cancel{background-color:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-secondary)}.btn-confirm-logout{background-color:var(--color-danger);color:#fff;border:none}.loading-screen{background-color:var(--color-surface);min-height:100vh;color:var(--color-brand);font-family:var(--font-display);font-size:var(--text-xl);justify-content:center;align-items:center;font-weight:600;animation:2s infinite pulse-ring;display:flex}:root{--color-brand:oklch(65% .19 160);--color-brand-light:oklch(92% .08 160);--color-brand-dark:oklch(35% .12 160);--color-accent:oklch(58% .16 35);--color-surface:oklch(98% .005 160);--color-surface-raised:oklch(100% 0 0/.95);--color-surface-hover:oklch(95% .01 160);--color-text-primary:oklch(20% .02 260);--color-text-secondary:oklch(45% .01 260);--color-text-muted:oklch(60% .005 260);--color-text-inverse:oklch(98% .005 160);--color-border:oklch(90% .005 260);--color-border-subtle:oklch(95% .002 260);--color-danger:oklch(55% .2 25);--color-danger-light:oklch(95% .05 25);--color-warning:oklch(75% .15 85);--color-warning-light:oklch(95% .05 85);--color-success:oklch(65% .19 160);--color-success-light:oklch(95% .05 160);--color-info:oklch(60% .15 250);--color-info-light:oklch(95% .05 250);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-8:3rem;--space-12:4.5rem;--font-display:"IBM Plex Sans Thai", sans-serif;--font-body:"Sarabun", sans-serif;--text-xs:clamp(.75rem, .7vw + .5rem, .875rem);--text-sm:clamp(.875rem, .8vw + .5rem, 1rem);--text-base:clamp(1rem, 1vw + .5rem, 1.125rem);--text-lg:clamp(1.125rem, 1.5vw + .5rem, 1.25rem);--text-xl:clamp(1.25rem, 2vw + .5rem, 1.5rem);--text-2xl:clamp(1.5rem, 3vw + .5rem, 2rem);--text-3xl:clamp(2rem, 4vw + .5rem, 2.5rem);--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;--radius-full:9999px;--shadow-sm:0 1px 2px oklch(20% 0 0/.04);--shadow-md:0 4px 6px -1px oklch(20% 0 0/.05), 0 2px 4px -2px oklch(20% 0 0/.05);--shadow-lg:0 10px 15px -3px oklch(20% 0 0/.05), 0 4px 6px -4px oklch(20% 0 0/.05);--shadow-inner:inset 0 2px 4px 0 oklch(20% 0 0/.02);--transition-fast:.15s cubic-bezier(.16, 1, .3, 1);--transition-normal:.4s cubic-bezier(.16, 1, .3, 1);--transition-slow:.7s cubic-bezier(.16, 1, .3, 1);--nav-height:64px;--bottom-nav-height:80px;--container-max:1200px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-body);color:var(--text-primary);background-color:var(--color-surface);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--text-primary);margin-bottom:var(--space-3);font-weight:600;line-height:1.2}a{color:var(--color-brand);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-brand-dark)}button{cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit}img,svg,video{max-width:100%;height:auto;display:block}.container{width:100%;max-width:var(--container-max);padding:0 var(--space-4);margin:0 auto}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}input,textarea,select{font-family:inherit;font-size:var(--text-base);padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);color:var(--color-text-primary);transition:all var(--transition-fast);width:100%}input:focus,textarea:focus,select:focus{border-color:var(--color-brand);box-shadow:0 0 0 3px var(--color-brand-light);outline:none}input:disabled,textarea:disabled,select:disabled{background-color:var(--color-border-subtle);color:var(--color-text-muted);cursor:not-allowed}::selection{background-color:var(--color-brand-light);color:var(--color-brand-dark)}:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-surface)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes pulse-ring{0%{opacity:.5;transform:scale(.8)}80%,to{opacity:0;transform:scale(1.5)}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-fade-in{animation:fadeIn var(--transition-normal) forwards}.animate-slide-up{animation:slideUp var(--transition-normal) forwards}.animate-slide-down{animation:slideDown var(--transition-normal) forwards}.animate-scale-in{animation:scaleIn var(--transition-normal) forwards}.animate-pulse{position:relative}.animate-pulse:before{content:"";border-radius:inherit;background-color:inherit;z-index:-1;width:100%;height:100%;animation:2s cubic-bezier(.215,.61,.355,1) infinite pulse-ring;position:absolute;top:0;left:0}.animate-spin{animation:1s linear infinite spin}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}