.app{min-height:100dvh;display:flex;flex-direction:column}.main{flex:1;padding:16px;max-width:1200px;margin:0 auto;width:100%}.header{background:var(--white);border-bottom:1px solid var(--gray-200);padding:12px 16px;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm)}.header-brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}.header-logo{width:64px;height:64px;border-radius:50%;object-fit:cover}.header-title{font-size:1.5rem;font-weight:700;color:var(--pink-600);line-height:1.2}.header-subtitle{font-size:.875rem;color:var(--gray-500);font-weight:400}.header-tabs{display:flex;gap:4px;background:var(--gray-100);border-radius:var(--radius-sm);padding:3px}.tab-btn{flex:1;padding:8px 16px;font-size:.875rem;font-weight:500;color:var(--gray-600);border-radius:6px;transition:all .2s ease}.tab-btn.tab-active{background:var(--white);color:var(--pink-600);box-shadow:var(--shadow-sm)}.products-area{display:flex;flex-direction:column;gap:24px;margin-bottom:16px}.product-section{background:var(--white);border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow-sm)}.section-title{font-size:1rem;font-weight:600;color:var(--gray-800);margin-bottom:12px;display:flex;align-items:center;gap:8px}.section-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--pink-400)}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.product-card{display:flex;flex-direction:column;align-items:center;background:var(--gray-50);border:2px solid var(--gray-200);border-radius:var(--radius-md);padding:20px 12px;transition:all .15s ease;-webkit-tap-highlight-color:transparent}.product-card:active{transform:scale(.96);border-color:var(--pink-400);background:var(--pink-50)}.product-card-img{width:80px;height:80px;object-fit:contain;margin-bottom:10px}.product-card-info{display:flex;flex-direction:column;align-items:center;gap:4px}.product-card-size{font-size:.875rem;font-weight:500;color:var(--gray-600)}.product-card-price{font-size:1.125rem;font-weight:700;color:var(--pink-600)}.cart{background:var(--white);border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow-sm)}.cart-empty{text-align:center;padding:32px 16px;color:var(--gray-400);font-size:.875rem}.cart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.cart-header h3{font-size:1rem;font-weight:600}.btn-text{font-size:.8125rem;color:var(--gray-500);font-weight:500;padding:4px 8px}.btn-text:active{color:var(--red-500)}.cart-items{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.cart-item{display:flex;align-items:center;gap:8px;padding:10px;background:var(--gray-50);border-radius:var(--radius-sm)}.cart-item-info{flex:1;min-width:0}.cart-item-name{display:block;font-size:.8125rem;font-weight:500;color:var(--gray-800)}.cart-item-category{font-size:.6875rem;color:var(--gray-500)}.cart-item-controls{display:flex;align-items:center;gap:6px}.qty-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gray-200);color:var(--gray-700);font-size:1rem;font-weight:600;transition:background .15s}.qty-btn:active{background:var(--pink-100);color:var(--pink-600)}.qty-value{font-size:.875rem;font-weight:600;width:20px;text-align:center}.cart-item-subtotal{font-size:.8125rem;font-weight:600;color:var(--gray-800);white-space:nowrap}.cart-footer{border-top:1px solid var(--gray-200);padding-top:12px}.cart-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:.9375rem;font-weight:500;color:var(--gray-600)}.cart-total-amount{font-size:1.25rem;font-weight:700;color:var(--pink-600)}.btn-primary{width:100%;padding:14px;background:var(--pink-600);color:var(--white);font-size:.9375rem;font-weight:600;border-radius:var(--radius-sm);transition:background .15s}.btn-primary:active{background:var(--pink-500)}.history{max-width:100%}.history-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:12px}.history-title{font-size:1.125rem;font-weight:600}.history-summary{font-size:.8125rem;color:var(--gray-500);margin-top:2px}.btn-secondary{padding:8px 16px;background:var(--green-500);color:var(--white);font-size:.8125rem;font-weight:600;border-radius:var(--radius-sm);white-space:nowrap;flex-shrink:0;transition:opacity .15s}.btn-secondary:active{opacity:.85}.history-empty{text-align:center;padding:48px 16px;color:var(--gray-400);font-size:.875rem}.history-list{display:flex;flex-direction:column;gap:10px}.history-item{background:var(--white);border-radius:var(--radius-md);padding:14px;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200)}.history-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.history-item-date{font-size:.75rem;color:var(--gray-500);font-weight:500}.history-item-total{font-size:.9375rem;font-weight:700;color:var(--pink-600)}.history-item-products{margin-bottom:10px}.history-product{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--gray-700);padding:3px 0}.btn-delete{font-size:.75rem;color:var(--red-500);font-weight:500;padding:6px 0;opacity:.7}.btn-delete:active{opacity:1}.login-screen{min-height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--cream);padding:16px}.login-card{background:var(--white);border-radius:var(--radius-md);padding:40px 28px;box-shadow:var(--shadow-md);width:100%;max-width:360px;text-align:center}.login-logo{width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 16px;display:block}.login-title{font-size:1.5rem;font-weight:700;color:var(--pink-600);line-height:1.2}.login-subtitle{font-size:.875rem;color:var(--gray-500);margin-bottom:24px}.login-form{display:flex;flex-direction:column;gap:12px}.login-input{width:100%;padding:12px 14px;font-size:.9375rem;border:2px solid var(--gray-200);border-radius:var(--radius-sm);background:var(--gray-50);transition:border-color .15s;text-align:center}.login-input:focus{outline:none;border-color:var(--pink-400);background:var(--white)}.login-input-error{border-color:var(--red-500);animation:shake .4s ease}.login-error{font-size:.8125rem;color:var(--red-500);font-weight:500}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.toast-success{position:fixed;top:16px;left:50%;transform:translate(-50%);background:var(--green-500);color:var(--white);padding:12px 24px;border-radius:var(--radius-sm);font-size:.875rem;font-weight:600;box-shadow:var(--shadow-md);z-index:200;animation:toast-in .3s ease,toast-out .3s ease 2.7s}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(-12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toast-out{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-12px)}}.dashboard{max-width:100%}.dashboard-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:12px}.dashboard-title{font-size:1.125rem;font-weight:600}.dashboard-date{font-size:.8125rem;color:var(--gray-500);margin-top:2px;text-transform:capitalize}.date-filter{display:flex;gap:12px;margin-bottom:16px}.date-filter-field{flex:1;max-width:200px}.date-input{width:100%;padding:8px 10px;font-size:.8125rem;border:1px solid var(--gray-300);border-radius:var(--radius-sm);background:var(--white);color:var(--gray-700)}.dashboard-filter{margin-bottom:16px}.filter-label{display:block;font-size:.8125rem;font-weight:500;color:var(--gray-600);margin-bottom:8px}.filter-buttons{display:flex;gap:6px;flex-wrap:wrap}.filter-btn{padding:6px 14px;font-size:.8125rem;font-weight:500;border-radius:var(--radius-sm);border:1px solid var(--gray-300);color:var(--gray-600);background:var(--white);transition:all .15s}.filter-btn.filter-active{background:var(--pink-600);color:var(--white);border-color:var(--pink-600)}.dashboard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}.stat-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:14px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow-sm)}.stat-card-highlight{border-color:var(--pink-200);background:var(--pink-50)}.stat-label{font-size:.6875rem;font-weight:500;color:var(--gray-500);text-transform:uppercase;letter-spacing:.02em}.stat-value{font-size:1.25rem;font-weight:700;color:var(--gray-800)}.stat-card-highlight .stat-value{color:var(--pink-600)}.dashboard-breakdown{background:var(--white);border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow-sm)}.breakdown-title{font-size:.9375rem;font-weight:600;margin-bottom:12px}.breakdown-empty{text-align:center;padding:32px 16px;color:var(--gray-400);font-size:.875rem}.breakdown-table{display:flex;flex-direction:column;gap:0}.breakdown-row{display:grid;grid-template-columns:2fr 1.2fr .8fr 1fr;gap:8px;padding:8px 4px;font-size:.8125rem;color:var(--gray-700);border-bottom:1px solid var(--gray-100);align-items:center}.breakdown-header-row{font-weight:600;color:var(--gray-500);font-size:.75rem;text-transform:uppercase;letter-spacing:.02em;border-bottom:2px solid var(--gray-200)}.breakdown-total-row{font-weight:700;color:var(--gray-800);border-bottom:none;border-top:2px solid var(--gray-200)}.breakdown-name{font-weight:500}.breakdown-qty{font-weight:600;text-align:center}.breakdown-revenue{font-weight:600;color:var(--pink-600);text-align:right}.modal-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:300;padding:16px;animation:modal-fade-in .15s ease}.modal-card{background:var(--white);border-radius:var(--radius-md);padding:24px;max-width:360px;width:100%;box-shadow:var(--shadow-lg);animation:modal-slide-in .15s ease}.modal-message{font-size:.9375rem;color:var(--gray-800);text-align:center;margin-bottom:20px;line-height:1.5}.modal-actions{display:flex;gap:10px}.modal-btn{flex:1;padding:10px 16px;font-size:.875rem;font-weight:600;border-radius:var(--radius-sm);transition:opacity .15s}.modal-btn-cancel{background:var(--gray-200);color:var(--gray-700)}.modal-btn-confirm{background:var(--pink-600);color:var(--white)}.modal-btn-danger{background:var(--red-500);color:var(--white)}.modal-btn:active{opacity:.85}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-slide-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.header-user{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--gray-600);margin-top:8px}.header-user-name{font-weight:500}.loading-state{display:flex;justify-content:center;align-items:center;padding:64px 16px;color:var(--gray-500);font-size:.9375rem;grid-column:1 / -1}.history-item-code{font-size:.75rem;color:var(--gray-400)}@media(min-width:640px){.main{padding:24px}.header{padding:12px 24px;display:flex;align-items:center;justify-content:space-between}.header-brand{margin-bottom:0}.header-tabs{width:auto;min-width:340px}.header-user{margin-top:0}.header-logo{width:72px;height:72px}.header-title{font-size:1.75rem}.product-card-img{width:96px;height:96px}.product-card{padding:24px 16px}.product-card-size{font-size:.9375rem}.product-card-price{font-size:1.25rem}}@media(min-width:768px){.main{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}.main:has(.history),.main:has(.dashboard){display:block}.products-area{margin-bottom:0}.cart{position:sticky;top:100px}.product-grid{gap:14px}.product-card-img{width:104px;height:104px}.history-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}}@media(min-width:1024px){.main{grid-template-columns:1fr 380px}.product-card{padding:28px 20px}.product-card-img{width:120px;height:120px}.product-card:hover{border-color:var(--pink-400);background:var(--pink-50);box-shadow:var(--shadow-md)}.qty-btn:hover{background:var(--pink-100);color:var(--pink-600)}.btn-primary:hover{background:var(--pink-500)}.btn-delete:hover{opacity:1}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--pink-600: #E91E63;--pink-500: #EC407A;--pink-400: #F06292;--pink-100: #FCE4EC;--pink-50: #FFF0F5;--brown-700: #4E342E;--brown-600: #5D3A1A;--brown-500: #6D4C41;--brown-100: #D7CCC8;--cream: #FFF8F0;--red-500: #E53935;--green-500: #4CAF50;--gray-50: #FAFAFA;--gray-100: #F5F5F5;--gray-200: #EEEEEE;--gray-300: #E0E0E0;--gray-400: #BDBDBD;--gray-500: #9E9E9E;--gray-600: #757575;--gray-700: #616161;--gray-800: #424242;--gray-900: #212121;--white: #FFFFFF;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .1);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--font: "Poppins", system-ui, -apple-system, sans-serif}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font);background-color:var(--gray-50);color:var(--gray-900);line-height:1.5;min-height:100dvh}button{font-family:var(--font);cursor:pointer;border:none;background:none;font-size:inherit}ul{list-style:none}img{display:block;max-width:100%}