:root{--primary: #2e86de;--accent: #3498db;--dark: #1b4f72;--light: #f8f9fa;--text: #212529;--white: #ffffff;--shadow: 0 4px 12px rgba(0, 0, 0, .08);--radius: 12px;--transition: all .3s ease}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:var(--light);color:var(--text);display:flex;flex-direction:column;min-height:100vh;line-height:1.6}#root{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:2rem 1rem}.landing-container{display:flex;flex-direction:column;align-items:center;padding:3rem 1rem;text-align:center}.landing-hero{background:linear-gradient(to right,var(--primary),var(--accent));color:var(--white);padding:3rem 2rem;border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:900px;margin-bottom:3rem}.landing-title{font-size:2.8rem;font-weight:700;margin-bottom:1rem}.landing-subtitle{font-size:1.2rem;max-width:600px;margin:0 auto 2rem;opacity:.95}.landing-buttons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.btn{text-decoration:none;padding:.75rem 1.5rem;font-weight:700;font-size:1rem;border-radius:var(--radius);transition:var(--transition);cursor:pointer}.btn-primary{background-color:var(--white);color:var(--primary);border:2px solid var(--white)}.btn-primary:hover{background-color:transparent;color:var(--white);border-color:var(--white)}.btn-outline{background-color:transparent;color:var(--white);border:2px solid var(--white)}.btn-outline:hover{background-color:var(--white);color:var(--primary)}.features-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;width:100%;max-width:1000px;margin:2rem auto;padding:1rem}.feature-card{background-color:var(--white);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow);text-align:left}.feature-card h2{font-size:1.5rem;margin-bottom:.75rem;color:var(--primary)}.feature-card p{color:var(--text);font-size:1rem}.footer{text-align:center;padding:1.5rem 1rem;font-size:.9rem;color:#777;border-top:1px solid #ddd;margin-top:auto}@media (max-width: 1024px){.landing-title{font-size:2.4rem}.landing-subtitle{font-size:1.1rem}.landing-hero{padding:2rem 1.5rem}}@media (max-width: 768px){.landing-title{font-size:2rem}.landing-subtitle{font-size:1rem}.btn{width:100%;max-width:300px;text-align:center}.landing-buttons{flex-direction:column;align-items:center}}@media (max-width: 480px){.landing-title{font-size:1.75rem}.landing-subtitle{font-size:.95rem}.landing-hero{padding:1.5rem 1rem}.feature-card{padding:1.5rem}}.register-container{max-width:400px;margin:3rem auto;background:#fff;padding:2rem;border-radius:12px;box-shadow:0 6px 18px #00000014;text-align:center}.register-container h2{margin-bottom:1.5rem;color:#2e86de}.password-field{position:relative;width:100%}.password-field input{width:100%;padding-right:2.5rem}.toggle-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);cursor:pointer;font-size:1.1rem}.login-container{max-width:400px;margin:3rem auto;background:#fff;padding:2rem;border-radius:12px;box-shadow:0 6px 18px #00000014;text-align:center}.login-container h2{margin-bottom:1.5rem;color:#2e86de;font-size:2rem}input{padding:.75rem 1rem;margin-bottom:1rem;border-radius:8px;border:1px solid #ccc;font-size:1rem;transition:border-color .3s ease;width:100%}.password-field{position:relative}.toggle-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);cursor:pointer;font-size:1.2rem;-webkit-user-select:none;user-select:none}button{background-color:#2e86de;color:#fff;border:none;padding:.75rem;border-radius:8px;font-size:1rem;cursor:pointer;transition:background-color .3s ease}.message{margin-top:1rem;font-size:.95rem;color:#333}.message{margin-top:15px;font-weight:700;padding:10px;border-radius:5px;text-align:center}.message.success{background-color:#e6ffed;color:#2b7a2b}.message.error{background-color:#ffe6e6;color:#a94442}.message.info{background-color:#e6f0ff;color:#00529b}.forgot-password-container{max-width:420px;margin:3rem auto;padding:2rem;background:#fff;border-radius:12px;box-shadow:0 6px 18px #00000014;text-align:center}.forgot-password-container h2{color:#2e86de;margin-bottom:1rem}.forgot-password-container p{font-size:1rem;margin-bottom:1.5rem;color:#555}input{padding:.75rem 1rem;border-radius:8px;border:1px solid #ccc;margin-bottom:1rem;font-size:1rem;transition:border-color .3s ease}.reset-password-container{max-width:420px;margin:3rem auto;background:#fff;padding:2rem;border-radius:12px;box-shadow:0 6px 18px #00000014;text-align:center}.reset-password-container h2{color:#2e86de;margin-bottom:1rem}.reset-password-container p{font-size:1rem;margin-bottom:1.5rem;color:#555}form{display:flex;flex-direction:column}input{padding:.75rem 1rem;margin-bottom:1rem;border-radius:8px;border:1px solid #ccc;font-size:1rem;transition:border-color .3s ease}input:focus{border-color:#2e86de;outline:none}button{background-color:#2e86de;color:#fff;padding:.75rem;font-size:1rem;border:none;border-radius:8px;cursor:pointer;transition:background-color .3s ease}button:hover{background-color:#1b4f72}.message{margin-top:1rem;font-size:.95rem;color:#2b2b2b}.link{margin-top:1rem}.link a{color:#2e86de;text-decoration:none}.link a:hover{text-decoration:underline}*{margin:0;padding:0;box-sizing:border-box}:root{--font-body: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--color-bg: #f8f9fa;--color-text: #212529;--color-primary: #2e86de;--color-primary-dark: #1b4f72;--color-white: #ffffff;color-scheme:light dark}body{font-family:var(--font-body);background-color:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}a{color:var(--color-primary);text-decoration:none;font-weight:500;transition:color .2s ease}a:hover{color:var(--color-primary-dark)}button{font-family:inherit;font-size:1rem;padding:.6em 1.4em;border:none;border-radius:8px;background-color:var(--color-primary);color:var(--color-white);cursor:pointer;transition:background-color .25s ease}button:hover{background-color:var(--color-primary-dark)}button:focus{outline:3px solid rgba(46,134,222,.5);outline-offset:2px}@media (prefers-color-scheme: light){:root{--color-bg: #ffffff;--color-text: #212529}}.dashboard-container{max-width:1080px;margin:0 auto;padding:2rem 1.2rem;font-family:Segoe UI,sans-serif;background-color:#f9f9fb}.dashboard-header{font-size:2rem;font-weight:600;margin-bottom:2.5rem;text-align:center;color:#2e86de}.overview h2{font-size:1.6rem;margin-bottom:1.2rem;color:#333}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem}.card h3{font-size:2rem;margin-bottom:.4rem;color:#2e86de}.low-stock,.recent-sales{margin-top:2.5rem}.low-stock h3,.recent-sales h3{font-size:1.4rem;margin-bottom:1rem;color:#dc3545}.low-stock ul,.recent-sales ul{list-style:none;padding:0}.low-stock li,.recent-sales li{margin-bottom:.6rem;background:#fff;padding:.8rem 1rem;border-radius:8px;box-shadow:0 3px 10px #00000008}.action-buttons{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.btn{padding:.8rem 1.6rem;border:none;border-radius:8px;background-color:#2e86de;color:#fff;text-decoration:none;font-weight:500;transition:background .3s ease}@media (max-width: 600px){.card h3,.dashboard-header{font-size:1.5rem}.action-buttons{flex-direction:column;align-items:stretch}.btn{width:100%;text-align:center}}.logout{background-color:#e74c3c;color:#fff}.logout:hover{background-color:#c0392b}.status-summary{margin-top:2.5rem}.status-summary h3{font-size:1.4rem;margin-bottom:1rem;color:#2e86de}.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}.status-card{display:flex;flex-direction:column;align-items:center;padding:1.2rem;background:#fff;border-radius:10px;text-decoration:none;box-shadow:0 4px 12px #0000000d;transition:transform .2s ease,box-shadow .2s ease;font-size:1rem}.status-card span{margin-top:.4rem;font-size:.95rem;color:#555}.status-card strong{margin-top:.3rem;font-size:1.6rem;font-weight:600}.status-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px #00000014}.status-card.completed{border-left:5px solid #28a745}.status-card.pending{border-left:5px solid #ffc107}.status-card.refunded{border-left:5px solid #dc3545}.staff-dashboard-container{max-width:900px;margin:0 auto;padding:2rem 1rem;font-family:Segoe UI,sans-serif;background-color:#f9f9fb}.staff-dashboard-header{font-size:1.8rem;font-weight:600;margin-bottom:2rem;text-align:center;color:#2e86de}.overview h2{font-size:1.5rem;margin-bottom:1rem;color:#2e86de}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.2rem}.card{background-color:#fff;border-radius:14px;padding:1.5rem 1rem;box-shadow:0 8px 24px #0000000d;text-align:center;border-left:5px solid #2e86de}.card h3{font-size:1.8rem;margin-bottom:.4rem;color:#2e86de}.card p{font-size:1rem;color:#555}.status-summary{margin-top:2rem}.status-summary h3{font-size:1.3rem;margin-bottom:.8rem;color:#e67e22}.status-summary ul{list-style:none;padding:0}.status-summary li{margin-bottom:.6rem;background:#fff;padding:.8rem 1rem;border-radius:8px;box-shadow:0 3px 10px #00000008}.action-buttons{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.btn{padding:.8rem 1.4rem;border:none;border-radius:8px;background-color:#2e86de;color:#fff;text-decoration:none;font-weight:500;transition:background .3s ease}.btn:hover{background-color:#1b4f72}.logout{background-color:#dc3545}.logout:hover{background-color:#b02a37}@media (max-width: 600px){.card h3{font-size:1.4rem}.staff-dashboard-header{font-size:1.5rem}.btn{width:100%;text-align:center}}.products-container{max-width:700px;margin:2rem auto;padding:2rem;background:#fff;border-radius:12px;box-shadow:0 6px 18px #0000000d;font-family:Segoe UI,sans-serif;color:#333}.products-container h2{margin-bottom:1.5rem;font-size:1.8rem;color:#2e86de}.product-form{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}.product-form label{flex:1 1 240px;display:flex;flex-direction:column;font-size:.95rem;color:#444}.product-form input{padding:.6rem .8rem;font-size:1rem;border-radius:6px;border:1px solid #ccc;background-color:#f9f9f9;margin-top:.3rem}.product-form button{padding:.7rem 1.2rem;background-color:#2e86de;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:1rem;margin-top:auto;height:42px}.product-form button:hover{background-color:#1b4f72}.toast{padding:12px 16px;border-radius:6px;font-weight:500;margin-bottom:1rem;text-align:center;animation:fadeInOut 3s ease-in-out}.toast.success{background-color:#d4edda;color:#155724}.toast.error{background-color:#f8d7da;color:#721c24}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-10px)}10%,90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.search-bar{margin-bottom:1.5rem}.search-bar input{padding:.5rem .8rem;width:250px;border:1px solid #bbb;border-radius:6px}.products-table{width:100%;border-collapse:collapse;font-size:.95rem}.products-table th,.products-table td{padding:.75rem 1rem;border:1px solid #ddd;text-align:left}.products-table th{background-color:#f2f4f8;color:#444}.products-table td button{padding:.4rem .8rem;font-size:.85rem;margin-right:.3rem;border:none;border-radius:4px;cursor:pointer;transition:.2s ease}.products-table td button:hover{opacity:.8}.products-table .edit-btn{background-color:#f0ad4e;color:#fff}.products-table .delete-btn{background-color:#d9534f;color:#fff}@media (max-width: 768px){.product-form{flex-direction:column}.product-form label,.search-bar input{width:100%}.products-table{font-size:.85rem}}.bbn{margin-top:30px}h3{color:#2e86de}.stock-badge{display:inline-block;padding:4px 10px;border-radius:5px;font-size:.85rem;font-weight:700;color:#fff;text-align:center}.stock-badge.low{background-color:#e74c3c}.stock-badge.high{background-color:#f1c40f;color:#333}.sales-container{max-width:800px;margin:0 auto;padding:2rem 1rem;font-family:Segoe UI,sans-serif}.sales-container h2{font-size:1.8rem;margin-bottom:1rem;text-align:center;color:#2e86de}.sales-form select,.sales-form input{display:block;width:100%;padding:.6rem;margin-bottom:1rem;border:1px solid #ccc;border-radius:6px}.add-btn,.submit-btn{background-color:#2e86de;color:#fff;padding:.7rem 1.2rem;border:none;border-radius:6px;margin-top:1rem;cursor:pointer}.add-btn:hover,.submit-btn:hover{background-color:#1b4f72}.total{margin-top:1rem;font-weight:700;font-size:1.2rem}.receipt-msg{margin-top:1rem;background:#d4edda;padding:1rem;border-radius:8px;border:1px solid #c3e6cb}.toast{margin-top:1rem;padding:1rem;border-radius:6px;text-align:center;font-weight:700}.toast.success{background-color:#d1e7dd;color:#0f5132}.toast.error{background-color:#f8d7da;color:#842029}.item-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;align-items:center;gap:.75rem;margin-bottom:.75rem}.item-row select{width:100%}.item-row input{width:100%;text-align:center}.unit-price,.total-price{font-weight:700;text-align:center;white-space:nowrap}.item-row button{background:#dc3545;color:#fff;border:none;border-radius:4px;padding:.4rem .6rem;cursor:pointer}@media print{body *{visibility:hidden}#receipt-container,#receipt-container *{visibility:visible}#receipt-container{position:absolute;left:0;top:0;width:100%}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;padding:20px;border-radius:12px;max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:0 5px 15px #0000004d;position:relative}.close-btn{background:red;color:#fff;border:none;padding:5px 10px;border-radius:6px;cursor:pointer;position:absolute;top:10px;right:10px}.receipts-container{max-width:800px;margin:0 auto;padding:20px}.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.filters input,.filters select{padding:8px;border:1px solid #ccc;border-radius:6px}.filters button{background:#3498db;color:#fff;border:none;padding:8px 15px;border-radius:6px;cursor:pointer}.receipts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:15px}.receipt-card{background:#fff;border-radius:10px;box-shadow:0 2px 5px #0000001a;padding:15px;display:flex;flex-direction:column}.receipt-header{display:flex;justify-content:space-between;align-items:center}.status-badge{padding:4px 8px;border-radius:6px;color:#fff;font-size:.85rem;text-transform:capitalize}.status-badge.completed{background:#27ae60}.status-badge.pending{background:#f39c12}.status-badge.refunded{background:#e74c3c}.status-select{margin-top:10px;padding:5px}.actions{margin-top:12px;display:flex;gap:6px}.view-btn{background:#3498db;color:#fff;border:none;padding:5px 8px;border-radius:6px;cursor:pointer}.whatsapp-btn{background:#25d366;color:#fff;border:none;padding:5px 8px;border-radius:6px;cursor:pointer}.delete-btn{background:#e74c3c;color:#fff;border:none;padding:5px 8px;border-radius:6px;cursor:pointer}.back-btn{margin-top:20px;background:#3498db;color:#fff;border:none;padding:8px 15px;border-radius:6px;cursor:pointer}.business-settings-container{max-width:700px;margin:2rem auto;padding:2rem;background:#fff;border-radius:12px;box-shadow:0 4px 15px #0000000d;font-family:Segoe UI,sans-serif;color:#333}.business-settings-container h2{font-size:1.6rem;font-weight:600;color:#2e86de;margin-bottom:1.5rem;text-align:center}.business-form{display:flex;flex-direction:column;gap:1.2rem}.business-form label{font-weight:500;display:flex;flex-direction:column;gap:.4rem}.business-form input,.business-form textarea{padding:.7rem;border:1px solid #ccc;border-radius:6px;font-size:1rem;transition:border .2s ease}.business-form input:focus,.business-form textarea:focus{outline:none;border-color:#2e86de}.business-form button{background-color:#2e86de;color:#fff;padding:.7rem 1.3rem;border:none;border-radius:6px;cursor:pointer;font-size:1rem;font-weight:500;transition:background .2s ease}.business-form button:hover{background-color:#1b4f72}.msg{padding:.8rem;background-color:#eaf4fe;color:#2e86de;border-radius:6px;margin-bottom:1rem;text-align:center;font-weight:500}.logo-preview{margin-top:1rem;text-align:center}.logo-preview img{max-width:150px;border-radius:8px;border:1px solid #ddd}.add-btn{margin-top:1.5rem;background-color:#2e86de;color:#fff;border:none;padding:.7rem 1.2rem;border-radius:6px;cursor:pointer;transition:background .2s ease}.add-btn:hover{background-color:#1b4f72}@media (max-width: 600px){.business-settings-container{padding:1.5rem}.business-form input,.business-form textarea{font-size:.95rem}.logo-preview img{max-width:100px}}.sales-table-container{max-width:1080px;margin:2rem auto;padding:1.5rem;background:#fefefe;border-radius:12px;box-shadow:0 8px 20px #00000008;font-family:Segoe UI,sans-serif}.sales-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.sales-table-header h2{font-size:1.6rem;color:#2e86de}.export-btn{background-color:#28a745;color:#fff;border:none;padding:.6rem 1.2rem;border-radius:6px;font-weight:500;cursor:pointer;transition:background .3s ease}.export-btn:hover{background-color:#1e7e34}.sales-table{width:100%;border-collapse:collapse}.sales-table th,.sales-table td{padding:.9rem 1rem;border-bottom:1px solid #eaeaea;text-align:left;font-size:.95rem}.sales-table th{background-color:#f4f6f9;color:#333;font-weight:600}.sales-table tr:hover{background-color:#f9f9fb}.status{font-weight:700;text-transform:capitalize}.status.completed{color:#28a745}.status.pending{color:#ffc107}.status.refunded{color:#dc3545}@media (max-width: 768px){.sales-table-container{padding:1rem}.sales-table th,.sales-table td{font-size:.85rem}.sales-table-header h2{font-size:1.3rem}.export-btn{padding:.5rem 1rem;font-size:.9rem}}.staffs-container{max-width:720px;margin:0 auto;padding:2rem 1rem;font-family:Segoe UI,sans-serif;background-color:#f9f9fb}.staffs-container h2{color:#2e86de}.staffs-heading{font-size:1.8rem;color:#2e86de;text-align:center;margin-bottom:2rem}.staff-form{background-color:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 5px 20px #0000000d;margin-bottom:2rem}.staff-form h3{margin-bottom:1rem;color:#2e86de}.staff-form input{width:100%;padding:.8rem;margin-bottom:1rem;border:1px solid #ccc;border-radius:6px;font-size:1rem}.create-btn{width:100%;padding:.9rem;background-color:#2e86de;color:#fff;border:none;border-radius:6px;font-weight:700;cursor:pointer}.create-btn:disabled{background-color:#aacbee}.error-msg{color:#dc3545;font-weight:500;margin-bottom:1rem}.staff-list h3{margin-bottom:1rem;color:#2e86de}.delete-btn{padding:.4rem .8rem;background-color:#dc3545;color:#fff;border:none;border-radius:5px;cursor:pointer}.no-staff{text-align:center;color:#888}.access-denied{text-align:center;padding:2rem;color:#b02a37;font-weight:700}.table-container{width:100%;overflow-x:auto}.staff-table{width:100%;border-collapse:collapse;margin-top:1rem;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 3px 10px #0000000d}.staff-table th,.staff-table td{padding:.8rem 1rem;text-align:left}.staff-table th{background-color:#2e86de;color:#fff;font-weight:600}.staff-table tr:nth-child(2n){background-color:#f9f9f9}.staff-table tr:hover{background-color:#eef5ff;transition:background .2s ease}.delete-btn{background-color:#e74c3c;color:#fff;padding:.4rem .8rem;border:none;border-radius:5px;cursor:pointer;font-size:.85rem}.delete-btn:hover{background-color:#c0392b}@media (max-width: 600px){.staff-table th,.staff-table td{padding:.6rem;font-size:.85rem}.delete-btn{padding:.3rem .6rem;font-size:.75rem}}