:root{--brand: #F97316;--brand-600: #EA580C;--brand-50: #FFF7ED;--slate-900: #0F172A;--slate-700: #334155;--slate-600: #475569;--slate-500: #64748B;--slate-400: #94A3B8;--gray-200: #E5E7EB;--gray-100: #F1F5F9;--gray-50: #F8F9FA;--bg: #F9F9FA;--white: #FFFFFF;--success: #15803D;--success-bg: #DCFCE7;--danger: #B91C1C;--danger-bg: #FEE2E2;--info: #1D4ED8;--info-bg: #DBEAFE;--warning: #B45309;--warning-bg: #FEF3C7;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--radius-card: 12px;--radius-control: 10px;--radius-sheet: 16px;--radius-pill: 999px;--touch-min: 44px;--touch-critical: 52px;--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--text-display: 24px;--text-title-lg: 20px;--text-title-md: 18px;--text-body: 15px;--text-label: 13px;--text-caption: 14px;--shadow-card: 0 1px 2px rgba(15, 23, 42, .06);--shadow-raised: 0 2px 12px rgba(15, 23, 42, .08);--shadow-sheet: 0 -8px 32px rgba(15, 23, 42, .16);--scrim: rgba(15, 23, 42, .4);--ease-standard: cubic-bezier(.2, .8, .2, 1);--duration-state: .12s;--duration-press: 80ms;--duration-sheet: .22s;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--slate-900);font-family:var(--font-sans);font-size:var(--text-body);line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}#root{min-height:100vh;min-height:100dvh}button,input{font-family:inherit}button{cursor:pointer}img{max-width:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--touch-min);padding:0 var(--space-5);border-radius:var(--radius-control);border:1px solid transparent;font-family:var(--font-sans);font-size:var(--text-body);font-weight:600;line-height:1;transition:background-color var(--duration-state) var(--ease-standard),transform var(--duration-press) var(--ease-standard),opacity var(--duration-state) var(--ease-standard);white-space:nowrap}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;pointer-events:none}.btn-full{width:100%}.btn-lg{height:var(--touch-critical);font-size:var(--text-title-md);border-radius:14px}.btn-primary{background:var(--brand);color:var(--white)}.btn-primary:active{background:var(--brand-600)}.btn-secondary{background:var(--gray-100);color:var(--slate-900)}.btn-secondary:active{background:var(--gray-200)}.btn-ghost{background:transparent;color:var(--slate-700);border-color:var(--gray-200)}.btn-ghost:active{background:var(--gray-50)}.btn-danger{background:var(--white);color:var(--danger);border-color:var(--danger-bg)}.btn-danger:active{background:var(--danger-bg)}.btn-danger-solid{background:var(--danger);color:var(--white)}.spinner{width:20px;height:20px;border:2.5px solid rgba(255,255,255,.4);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}.spinner-page{width:32px;height:32px;border:3px solid var(--gray-200);border-top-color:var(--brand)}@keyframes spin{to{transform:rotate(360deg)}}.page-loading{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center}.badge{display:inline-flex;align-items:center;gap:var(--space-1);height:24px;padding:0 var(--space-3);border-radius:var(--radius-pill);font-size:var(--text-caption);font-weight:600;white-space:nowrap}.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.badge-pending{background:var(--warning-bg);color:var(--warning)}.badge-success{background:var(--success-bg);color:var(--success)}.badge-danger{background:var(--danger-bg);color:var(--danger)}.badge-info{background:var(--info-bg);color:var(--info)}.badge-neutral{background:var(--gray-100);color:var(--slate-600)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--space-2);padding:var(--space-8) var(--space-6);color:var(--slate-500)}.empty-state-icon{font-size:40px;line-height:1;margin-bottom:var(--space-2)}.empty-state-title{font-size:var(--text-title-md);font-weight:600;color:var(--slate-700)}.empty-state-desc{font-size:var(--text-caption);max-width:240px}.pinpad-dots{display:flex;justify-content:center;gap:var(--space-3);margin:var(--space-6) 0}.pinpad-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--gray-200);background:transparent;transition:background-color var(--duration-state) var(--ease-standard),border-color var(--duration-state) var(--ease-standard)}.pinpad-dot-filled{background:var(--brand);border-color:var(--brand)}.pinpad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);max-width:300px;margin:0 auto}.pinpad-key{height:60px;border-radius:var(--radius-control);border:none;background:var(--white);box-shadow:var(--shadow-card);font-size:22px;font-weight:600;color:var(--slate-900);transition:background-color var(--duration-press) var(--ease-standard)}.pinpad-key:active{background:var(--gray-100)}.pinpad-key-ghost{background:transparent;box-shadow:none}.appbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);height:calc(56px + var(--safe-top));padding:var(--safe-top) var(--space-4) 0;background:var(--bg);border-bottom:1px solid var(--gray-200)}.appbar-title{font-size:var(--text-title-md);font-weight:700;color:var(--slate-900)}.appbar-sub{font-size:var(--text-caption);color:var(--slate-500);font-weight:400}.appbar-actions{display:flex;align-items:center;gap:var(--space-2)}.appbar-icon-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:none;background:transparent;color:var(--slate-600);font-size:18px}.appbar-icon-btn:active{background:var(--gray-100)}.connection-dot{width:8px;height:8px;border-radius:50%;background:var(--slate-400);flex-shrink:0}.connection-dot-live{background:var(--success);box-shadow:0 0 0 3px var(--success-bg)}.segment{display:flex;background:var(--gray-100);border-radius:var(--radius-control);padding:3px;gap:2px}.segment-btn{flex:1;height:38px;border:none;border-radius:8px;background:transparent;font-size:var(--text-label);font-weight:600;color:var(--slate-600);transition:background-color var(--duration-state) var(--ease-standard),color var(--duration-state) var(--ease-standard)}.segment-btn-active{background:var(--white);color:var(--slate-900);box-shadow:var(--shadow-card)}.sheet-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--scrim);z-index:40;animation:fadeIn var(--duration-sheet) var(--ease-standard)}.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--white);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;padding:var(--space-5) var(--space-4) calc(var(--space-5) + var(--safe-bottom));box-shadow:var(--shadow-sheet);animation:slideUp var(--duration-sheet) var(--ease-standard);max-height:80vh;overflow-y:auto}.sheet-title{font-size:var(--text-title-md);font-weight:700;margin:0 0 var(--space-4)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}.field-label{font-size:var(--text-label);font-weight:600;color:var(--slate-600)}.field-input,.field-textarea{height:var(--touch-min);padding:0 var(--space-4);border-radius:var(--radius-control);border:1.5px solid var(--gray-200);background:var(--white);font-size:var(--text-body);color:var(--slate-900);font-family:var(--font-sans);transition:border-color var(--duration-state) var(--ease-standard)}.field-input:focus,.field-textarea:focus{outline:none;border-color:var(--brand)}.field-textarea{height:auto;min-height:90px;padding:var(--space-3) var(--space-4);resize:vertical}.banner{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-control);font-size:var(--text-caption);margin:0 var(--space-4) var(--space-3)}.banner-warning{background:var(--warning-bg);color:var(--warning)}.banner-danger{background:var(--danger-bg);color:var(--danger)}.login-screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:var(--space-6) var(--space-4);padding-bottom:calc(var(--space-6) + var(--safe-bottom))}.login-brand{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin-bottom:var(--space-8)}.login-brand-mark{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(234,88,12,.25))}.login-brand-title{font-size:var(--text-title-lg);font-weight:700;color:var(--slate-900)}.login-brand-sub{font-size:var(--text-caption);color:var(--slate-500)}.login-form{width:100%;max-width:360px;margin:0 auto}.login-pin-label{text-align:center;font-size:var(--text-caption);color:var(--slate-500);margin-bottom:var(--space-2)}.login-switch-user{display:block;margin:var(--space-4) auto 0;background:none;border:none;color:var(--brand-600);font-size:var(--text-caption);font-weight:600;height:var(--touch-min);padding:0 var(--space-2)}.login-error{text-align:center;color:var(--danger);font-size:var(--text-caption);font-weight:500;margin:0 0 var(--space-3);min-height:18px}.screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.screen-body{flex:1;padding-bottom:calc(var(--space-6) + var(--safe-bottom))}.list-toolbar{padding:var(--space-4)}.order-list{display:flex;flex-direction:column;gap:var(--space-3);padding:0 var(--space-4)}.order-card{display:flex;align-items:center;gap:var(--space-4);background:var(--white);border-radius:var(--radius-card);padding:var(--space-4);box-shadow:var(--shadow-card);border:none;width:100%;text-align:left;transition:transform var(--duration-press) var(--ease-standard)}.order-card:active{transform:scale(.985)}.order-card-table{display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;flex-shrink:0;border-radius:14px;background:var(--brand-50);color:var(--brand-600)}.order-card-table-no{font-size:var(--text-title-lg);font-weight:700;line-height:1.1}.order-card-table-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.order-card-main{flex:1;min-width:0}.order-card-branch{font-size:var(--text-caption);color:var(--slate-500);margin-bottom:2px}.order-card-meta{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-caption);color:var(--slate-600);margin-top:var(--space-1)}.order-card-amount{font-weight:700;color:var(--slate-900)}.order-card-time{font-size:12px;color:var(--slate-400);white-space:nowrap}.detail-header{padding:var(--space-4);background:var(--white);border-bottom:1px solid var(--gray-200)}.detail-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}.detail-table-no{font-size:var(--text-display);font-weight:700;color:var(--slate-900)}.detail-meta{font-size:var(--text-caption);color:var(--slate-500)}.item-list{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4)}.item-card{background:var(--white);border-radius:var(--radius-card);padding:var(--space-4);box-shadow:var(--shadow-card)}.item-card-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}.item-card-name{font-weight:600;color:var(--slate-900);font-size:var(--text-body)}.item-card-qty{flex-shrink:0;background:var(--gray-100);color:var(--slate-700);font-weight:700;font-size:var(--text-caption);border-radius:var(--radius-pill);padding:2px var(--space-3)}.item-card-portion{display:inline-block;margin-top:var(--space-2);font-size:12px;font-weight:600;color:var(--brand-600);background:var(--brand-50);border-radius:var(--radius-pill);padding:2px var(--space-2)}.item-card-ingredients{margin-top:var(--space-2);font-size:var(--text-caption);color:var(--slate-500)}.item-card-price{margin-top:var(--space-3);text-align:right;font-weight:700;color:var(--slate-900);font-size:var(--text-caption)}.detail-total-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);font-size:var(--text-title-md);font-weight:700}.action-bar{position:sticky;bottom:0;display:flex;gap:var(--space-3);padding:var(--space-4);padding-bottom:calc(var(--space-4) + var(--safe-bottom));background:var(--bg);border-top:1px solid var(--gray-200)}.action-bar .btn{flex:1}