:root[data-theme=dark]{--bg-deep:#120f0c;--panel-bg:#1c1713;--panel-border:#d4882e33;--text-primary:#f7efe6;--text-muted:#a39585;--caramel-gold:#df922e;--caramel-glow:#df922e29;--green-pos:#2ea063;--green-glow:#2ea06329;--rose-red:#e65353;--shadow-color:#00000080;--input-bg:#16120e;--tab-bg:#241e18;--font-main:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}:root[data-theme=light]{--bg-deep:#f7f3ed;--panel-bg:#fff;--panel-border:#b46e1e38;--text-primary:#2c1a0e;--text-muted:#7a6a5a;--caramel-gold:#c2781b;--caramel-glow:#c2781b1f;--green-pos:#21834e;--green-glow:#21834e1f;--rose-red:#d93838;--shadow-color:#78501e14;--input-bg:#f2ebe1;--tab-bg:#ebe2d5;--font-main:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-deep);color:var(--text-primary);font-family:var(--font-main);-webkit-font-smoothing:antialiased;min-height:100vh}.app-viewport{flex-direction:column;gap:16px;max-width:460px;min-height:100vh;margin:0 auto;padding:18px 16px 40px;display:flex;position:relative}.toast-banner{z-index:1000;color:#fff;background:linear-gradient(135deg,#df922e,#b86e18);border-radius:14px;align-items:center;gap:10px;width:min(90%,420px);padding:12px 16px;font-size:.82rem;font-weight:650;animation:.3s ease-out forwards toastSlide;display:flex;position:fixed;top:18px;left:50%;transform:translate(-50%);box-shadow:0 10px 25px #00000059}.toast-banner.green-banner{background:linear-gradient(135deg,#2ea063,#1e7043)}@keyframes toastSlide{0%{opacity:0;transform:translate(-50%,-15px)}to{opacity:1;transform:translate(-50%)}}.app-header{justify-content:space-between;align-items:center;padding:6px 2px;display:flex}.header-brand{align-items:center;gap:12px;display:flex}.icon-circle{background:var(--caramel-glow);border:1px solid var(--panel-border);border-radius:14px;place-items:center;width:42px;height:42px;display:grid}.icon-circle.green-bg{background:var(--green-glow)}.cafe-icon{color:var(--caramel-gold)}.staff-icon{color:var(--green-pos)}.header-title{color:var(--text-primary);font-family:Georgia,Times New Roman,serif;font-size:1.25rem;font-weight:700;line-height:1.1}.header-sub{color:var(--text-muted);margin-top:2px;font-size:.72rem}.header-actions{align-items:center;gap:8px;display:flex}.theme-btn-compact,.logout-btn{border:1px solid var(--panel-border);background:var(--panel-bg);width:36px;height:36px;color:var(--text-primary);cursor:pointer;border-radius:12px;place-items:center;transition:all .2s;display:grid}.theme-btn-compact:hover,.logout-btn:hover{background:var(--caramel-glow);border-color:var(--caramel-gold)}.panel{background:var(--panel-bg);border:1px solid var(--panel-border);box-shadow:0 10px 30px var(--shadow-color);border-radius:20px;padding:18px;position:relative}.panel-row{justify-content:space-between;align-items:center;display:flex}.panel-label{letter-spacing:.05em;color:var(--text-muted);text-transform:uppercase;font-size:.7rem;font-weight:800}.widget-title{letter-spacing:.04em;text-transform:uppercase;align-items:center;gap:8px;font-size:.76rem;font-weight:800;display:flex}.gold-text{color:var(--caramel-gold)}.green-text{color:var(--green-pos)}.red-text{color:var(--rose-red)}.balance-panel{flex-direction:column;gap:12px;display:flex}.balance-amount{align-items:baseline;gap:8px;margin:2px 0;display:flex}.currency-unit{color:var(--text-muted);font-size:1.1rem;font-weight:700}.amount-value{letter-spacing:-.03em;color:var(--text-primary);font-size:2.3rem;font-weight:800}.status-badge{text-transform:uppercase;border-radius:20px;padding:4px 10px;font-size:.68rem;font-weight:700}.active-badge{background:var(--caramel-glow);color:var(--caramel-gold);border:1px solid #d4882e4d}.staff-mode-badge{background:var(--green-glow);color:var(--green-pos);border:1px solid #2ea0634d}.student-profile-card{background:var(--input-bg);border:1px solid var(--panel-border);border-radius:14px;flex-direction:column;gap:8px;margin:4px 0;padding:12px;display:flex}.profile-info-row{justify-content:space-between;align-items:center;font-size:.8rem;display:flex}.profile-label{color:var(--text-muted);font-weight:600}.profile-value{color:var(--text-primary);font-weight:750}.profile-value.id-badge{background:var(--tab-bg);border:1px solid var(--panel-border);border-radius:6px;padding:2px 8px;font-family:monospace;font-size:.78rem}.warning-box{color:var(--rose-red);background:#e653531f;border:1px solid #e653534d;border-radius:12px;align-items:center;gap:8px;padding:10px 12px;font-size:.78rem;font-weight:650;line-height:1.3;display:flex}.action-button-group{grid-template-columns:1fr;gap:10px;margin-top:4px;display:grid}.primary-btn,.secondary-btn{width:100%;height:44px;font-family:var(--font-main);cursor:pointer;border:none;border-radius:14px;justify-content:center;align-items:center;gap:8px;font-size:.82rem;font-weight:700;transition:all .2s;display:flex}.primary-btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.6)}.gold-btn{color:#fff;background:linear-gradient(110deg,#df922e,#a95e19);box-shadow:0 6px 18px #b2641c40}.gold-btn:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}.green-btn{color:#fff;background:linear-gradient(110deg,#2ea063,#1b633d);box-shadow:0 6px 18px #2ea06340}.green-btn:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}.secondary-btn{background:var(--tab-bg);border:1px solid var(--panel-border);color:var(--text-primary)}.secondary-btn:hover{background:var(--input-bg);border-color:var(--caramel-gold)}.budget-panel{flex-direction:column;gap:10px;display:flex}.progress-track{background:var(--input-bg);border:1px solid var(--panel-border);border-radius:10px;width:100%;height:8px;overflow:hidden}.progress-fill{border-radius:10px;height:100%;transition:width .4s}.summary-text{width:100%;color:var(--text-muted);justify-content:space-between;align-items:center;font-size:.78rem;display:flex}.meta-text{color:var(--text-muted);font-size:.73rem}.target-student-panel{background:var(--panel-bg)}.student-profile-info{align-items:center;gap:12px;display:flex}.avatar-box{background:var(--caramel-glow);border-radius:12px;place-items:center;width:38px;height:38px;display:grid}.student-name{color:var(--text-primary);font-size:.9rem;font-weight:750}.student-meta{color:var(--text-muted);margin-top:2px;font-size:.75rem}.scan-mini-btn{border:1px solid var(--panel-border);background:var(--tab-bg);color:var(--text-primary);cursor:pointer;border-radius:10px;align-items:center;gap:6px;padding:6px 12px;font-size:.72rem;font-weight:700;display:flex}.scan-mini-btn:hover{border-color:var(--caramel-gold);color:var(--caramel-gold)}.staff-orders-queue{flex-direction:column;gap:10px;margin-top:6px;display:flex}.staff-order-card{background:var(--input-bg);border:1px solid var(--panel-border);border-radius:14px;flex-direction:column;gap:8px;padding:12px;display:flex}.staff-order-header{border-bottom:1px dashed var(--panel-border);justify-content:space-between;align-items:center;padding-bottom:6px;display:flex}.staff-student-title{color:var(--text-primary);font-size:.85rem}.staff-order-time{color:var(--text-muted);font-size:.68rem}.staff-order-body{flex-direction:column;gap:8px;display:flex}.staff-order-items{flex-wrap:wrap;gap:6px;display:flex}.staff-item-chip{background:var(--tab-bg);border:1px solid var(--panel-border);color:var(--text-primary);border-radius:6px;padding:4px 8px;font-size:.73rem;font-weight:600}.staff-order-footer{justify-content:space-between;align-items:center;margin-top:4px;display:flex}.staff-order-total{color:var(--green-pos);font-size:.8rem}.complete-order-btn{background:var(--green-pos);color:#fff;cursor:pointer;border:none;border-radius:8px;align-items:center;gap:4px;padding:6px 12px;font-size:.72rem;font-weight:700;transition:opacity .2s;display:flex}.complete-order-btn:hover{opacity:.9}.pos-cart-panel{flex-direction:column;gap:12px;display:flex}.pos-cart-title{color:var(--text-primary);align-items:center;gap:8px;font-size:.82rem;font-weight:750;display:flex}.pos-cart-total{color:var(--caramel-gold);font-size:.85rem;font-weight:800}.empty-cart-msg{text-align:center;color:var(--text-muted);border:1px dashed var(--panel-border);border-radius:12px;padding:16px 10px;font-size:.78rem}.cart-items-scroll{flex-direction:column;gap:8px;max-height:160px;padding-right:4px;display:flex;overflow-y:auto}.cart-items-scroll::-webkit-scrollbar{width:4px}.cart-items-scroll::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:4px}.cart-row{background:var(--input-bg);border:1px solid var(--panel-border);color:var(--text-primary);border-radius:10px;justify-content:space-between;align-items:center;padding:8px 12px;font-size:.8rem;display:flex}.cart-row-right{align-items:center;gap:10px;display:flex}.cart-item-price{color:var(--text-primary);font-weight:700}.trash-btn{color:var(--rose-red);cursor:pointer;background:0 0;border:none;border-radius:6px;place-items:center;padding:4px;transition:background .2s;display:grid}.trash-btn:hover{background:#e6535326}.section-title{color:var(--text-primary);align-items:center;gap:8px;margin-top:4px;font-size:.85rem;font-weight:750;display:flex}.category-scroll-bar{gap:8px;padding-bottom:4px;display:flex;overflow-x:auto}.category-scroll-bar::-webkit-scrollbar{display:none}.subcategory-scroll-bar{margin-top:8px}.subcategory-scroll-bar .category-tab{flex:none;padding:8px 12px;font-size:.72rem}.category-tab{border:1px solid var(--panel-border);background:var(--tab-bg);color:var(--text-muted);white-space:nowrap;cursor:pointer;text-align:center;border-radius:12px;flex:1;padding:10px 14px;font-size:.78rem;font-weight:700;transition:all .2s}.category-tab.active-tab{background:var(--caramel-gold);color:#fff;border-color:var(--caramel-gold)}.category-tab.staff-tab.active-staff-tab{background:var(--green-pos);color:#fff;border-color:var(--green-pos)}.menu-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.menu-card-btn{background:var(--panel-bg);border:1px solid var(--panel-border);text-align:left;cursor:pointer;border-radius:16px;flex-direction:column;justify-content:space-between;min-height:85px;padding:12px;transition:all .2s;display:flex}.menu-card-btn:hover:not(:disabled){border-color:var(--caramel-gold);box-shadow:0 6px 16px var(--shadow-color);transform:translateY(-2px)}.menu-card-btn:disabled{opacity:.55;cursor:not-allowed}.menu-card-info{flex-direction:column;gap:2px;display:flex}.item-name{color:var(--text-primary);font-size:.8rem;font-weight:700;line-height:1.25}.item-cat{color:var(--text-muted);font-size:.68rem}.item-price-tag{color:var(--caramel-gold);align-self:flex-end;margin-top:8px;font-size:.78rem;font-weight:800}.staff-add-btn{flex-direction:row;align-items:center;min-height:auto}.item-price-sub{color:var(--green-pos);margin-top:2px;font-size:.74rem;font-weight:700}.transaction-history-panel{flex-direction:column;display:flex}.history-list{flex-direction:column;gap:8px;display:flex}.history-item{background:var(--input-bg);border:1px solid var(--panel-border);border-radius:12px;justify-content:space-between;align-items:center;padding:10px 12px;display:flex}.history-left{flex-direction:column;gap:2px;display:flex}.history-title{color:var(--text-primary);font-size:.8rem;font-weight:700}.history-meta{color:var(--text-muted);font-size:.68rem}.history-amount{font-size:.82rem;font-weight:800}.modal-backdrop{z-index:999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b8;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal-box{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:24px;flex-direction:column;gap:14px;width:min(100%,360px);padding:22px;display:flex;box-shadow:0 20px 50px #00000080}.modal-header{color:var(--text-primary);justify-content:space-between;align-items:center;font-size:.92rem;font-weight:750;display:flex}.icon-close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;place-items:center;display:grid}.modal-body{color:var(--text-muted);font-size:.82rem;line-height:1.4}.pin-field{border:1px solid var(--panel-border);background:var(--input-bg);width:100%;height:48px;color:var(--text-primary);text-align:center;letter-spacing:.3em;border-radius:14px;outline:none;font-size:1.4rem}.pin-field:focus{border-color:var(--caramel-gold)}.cancel-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:6px;font-size:.78rem;font-weight:650}.qr-card-content{text-align:center;flex-direction:column;align-items:center;gap:12px;padding:8px 0;display:flex}.qr-code-wrapper{background:#f7f3ed;border-radius:16px;place-items:center;padding:12px;display:grid;box-shadow:0 6px 18px #0003}.qr-img{border-radius:8px;display:block}.qr-student-info{flex-direction:column;gap:2px;display:flex}.qr-student-name{color:var(--text-primary);font-size:1rem;font-weight:800}.qr-student-id{color:var(--caramel-gold);font-size:.78rem;font-weight:700}.qr-instruction{color:var(--text-muted);max-width:240px;font-size:.73rem}.scanner-modal{width:min(100%,380px)}.viewfinder-container{background:#000;border-radius:16px;place-items:center;width:100%;height:220px;display:grid;position:relative;overflow:hidden}.viewfinder-video{object-fit:cover;width:100%;height:100%;display:block}.viewfinder-placeholder{color:#ffffffbf;text-align:center;flex-direction:column;align-items:center;gap:10px;padding:0 16px;font-size:.76rem;display:flex}.pulse-icon{color:var(--caramel-gold);animation:2s ease-in-out infinite pulseGlow}@keyframes pulseGlow{0%,to{opacity:.4;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}.scanner-overlay{pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.scan-reticle{border:2px dashed #df922ed9;border-radius:14px;width:150px;height:150px}.laser-beam{background:var(--caramel-gold);width:170px;height:2px;box-shadow:0 0 12px var(--caramel-gold);animation:2.2s ease-in-out infinite scanBeam;position:absolute}@keyframes scanBeam{0%,to{top:35px}50%{top:185px}}.quick-scan-sim{flex-direction:column;gap:6px;margin-top:4px;display:flex}.sim-label{color:var(--text-muted);text-transform:uppercase;font-size:.68rem;font-weight:700}.sim-actions{flex-wrap:wrap;gap:6px;display:flex}.sim-chip{border:1px solid var(--panel-border);background:var(--input-bg);color:var(--text-primary);cursor:pointer;border-radius:8px;padding:6px 10px;font-size:.7rem;font-weight:600;transition:all .2s}.sim-chip:hover{border-color:var(--caramel-gold);color:var(--caramel-gold)}.auth-screen{box-sizing:border-box;background:radial-gradient(ellipse at 17% 18%, #e0ad701f, transparent 34%), radial-gradient(ellipse at 88% 72%, #7a97701f, transparent 32%), var(--bg-deep);place-items:center;width:100%;min-height:100vh;padding:28px 18px;display:grid;position:relative}.auth-card{box-sizing:border-box;border:1px solid var(--panel-border);background:var(--panel-bg);width:min(100%,340px);box-shadow:0 24px 70px var(--shadow-color);text-align:center;border-radius:27px;padding:32px 22px 24px;position:relative}.auth-theme{z-index:10;border:1px solid var(--panel-border);color:var(--text-primary);background:var(--tab-bg);font:600 .73rem var(--font-main);cursor:pointer;border-radius:20px;align-items:center;gap:6px;padding:6px 11px;transition:all .2s;display:flex;position:absolute;top:16px;right:16px}.auth-theme:hover{border-color:var(--caramel-gold);background:var(--caramel-glow)}.auth-brand-icon{width:64px;height:64px;color:var(--caramel-gold);background:var(--caramel-glow);border:1px solid #d4882e40;border-radius:22px;place-items:center;margin:0 auto 15px;display:grid}.auth-card h1{letter-spacing:-.045em;color:var(--text-primary);margin:0;font-family:Georgia,Times New Roman,serif;font-size:2.1rem}.auth-subtitle{color:var(--text-muted);margin:5px 0 22px;font-size:.88rem}.auth-tabs{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px;display:grid}.auth-tabs button{border:1px solid var(--panel-border);color:var(--text-muted);font:600 .77rem var(--font-main);cursor:pointer;background:0 0;border-radius:24px;padding:10px 6px}.auth-tabs button.selected{background:var(--caramel-gold);color:#fff;border-color:var(--caramel-gold)}.auth-error-banner{color:var(--rose-red);text-align:left;background:#e653531f;border:1px solid #e653534d;border-radius:12px;align-items:center;gap:8px;margin-bottom:16px;padding:10px 12px;font-size:.76rem;font-weight:600;line-height:1.35;display:flex}.auth-card form{text-align:left}.auth-label{color:var(--text-muted);letter-spacing:.035em;text-transform:uppercase;margin:0 0 7px;font-size:.69rem;font-weight:800;display:block}.auth-label-row{justify-content:space-between;align-items:center;margin-top:17px;display:flex}.auth-label-row .auth-label{margin-bottom:7px}.forgot-link{color:var(--caramel-gold);font:700 .75rem var(--font-main);cursor:pointer;background:0 0;border:0;margin-bottom:7px;padding:0}.auth-input-wrap{box-sizing:border-box;border:1px solid var(--panel-border);min-height:45px;color:var(--text-muted);background:var(--input-bg);border-radius:15px;align-items:center;gap:10px;padding:0 12px;display:flex}.auth-input-wrap:focus-within{border-color:var(--caramel-gold);box-shadow:0 0 0 3px var(--caramel-glow)}.auth-input-wrap input{min-width:0;color:var(--text-primary);font:500 .81rem var(--font-main);background:0 0;border:0;outline:0;flex:1}.auth-input-group{align-items:center;gap:8px;margin-bottom:14px;display:flex}.auth-link-student-btn{border:1px solid var(--caramel-gold);background:var(--caramel-glow);min-height:45px;color:var(--caramel-gold);font-family:var(--font-main);cursor:pointer;white-space:nowrap;border-radius:15px;align-items:center;gap:5px;padding:0 12px;font-size:.74rem;font-weight:700;transition:all .2s;display:flex}.auth-link-student-btn:hover{background:var(--caramel-gold);color:#fff}.auth-linked-badge{color:var(--green-pos);align-items:center;gap:6px;margin-top:5px;margin-bottom:12px;font-size:.72rem;font-weight:700;display:flex}.password-toggle{color:var(--text-muted);cursor:pointer;background:0 0;border:0;place-items:center;padding:3px;display:grid}.auth-role-select{grid-template-columns:repeat(3,1fr);gap:6px;margin:17px 0;display:grid}.auth-role-select button{border:1px solid var(--panel-border);color:var(--text-muted);background:var(--tab-bg);font:650 .69rem var(--font-main);cursor:pointer;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:8px 4px;transition:all .2s;display:flex}.auth-role-select button.active{color:var(--caramel-gold);background:var(--caramel-glow);border-color:#d4882e80}.auth-submit{color:#fff;width:100%;min-height:49px;font:750 .86rem var(--font-main);cursor:pointer;background:linear-gradient(110deg,#df922e,#a95e19);border:0;border-radius:15px;justify-content:center;align-items:center;gap:10px;display:flex;box-shadow:0 9px 22px #b2641c33}.auth-submit:hover{filter:brightness(1.06);transform:translateY(-1px)}.auth-secure-note{color:var(--text-muted);white-space:nowrap;justify-content:center;align-items:center;gap:6px;margin-top:23px;font-size:.69rem;display:flex}.auth-secure-note svg{color:var(--caramel-gold)}@media (width<=380px){.auth-card{padding:27px 18px 22px}.auth-theme{top:12px;right:12px}}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}img,svg{max-width:100%;display:block}button{font:inherit;color:inherit}a{color:inherit}