:root{--primary-color: #8c7ae6;--secondary-color: #8c7ae6;--background-color: #f4f7f6;--text-color: #333;--card-bg-color: #ffffff;--shadow-color: rgba(0, 0, 0, .1);--border-color: #e0e0e0}body,html{height:100%;margin:0;font-family:Poppins,sans-serif;background-color:var(--background-color);color:var(--text-color)}#app,#stats-app{width:90%;max-width:1200px;margin:20px auto;padding:20px}h1,h2,h3{color:var(--primary-color)}h1{text-align:center;margin-bottom:20px}table{width:100%;border-collapse:collapse;margin-top:20px;background-color:var(--card-bg-color);box-shadow:0 2px 10px var(--shadow-color);border-radius:8px;overflow:hidden}th,td{border:1px solid var(--border-color);padding:12px 15px;text-align:left}td.toggle-cell{text-align:center;vertical-align:middle}th{background-image:linear-gradient(to right,var(--primary-color),var(--secondary-color));color:#fff;font-weight:600}tr:nth-child(2n){background-color:#f8f9fa}tr:hover{background-color:#f1f1f1}form{margin-bottom:20px;background:var(--card-bg-color);padding:20px;border-radius:8px;box-shadow:0 2px 10px var(--shadow-color)}input,select,button{padding:12px;margin-right:10px;border-radius:5px;border:1px solid var(--border-color);font-size:16px}input[readonly]{background-color:#f8f9fa;color:#6c757d;cursor:not-allowed}button{cursor:pointer;background-image:linear-gradient(to right,var(--primary-color),var(--secondary-color));color:#fff;border:none;transition:transform .2s}button:hover{transform:scale(1.05)}.delete-btn{background-image:none;background-color:#ff7675}.action-buttons{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}.action-btn{padding:6px 8px;font-size:14px;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;background:linear-gradient(to right,var(--primary-color),var(--secondary-color));color:#fff;min-width:32px;display:flex;align-items:center;justify-content:center}.action-btn:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0003}.action-btn.delete-btn{background:linear-gradient(to right,#e74c3c,#c0392b)}.action-btn.move-up-btn{background:linear-gradient(to right,#27ae60,#2ecc71)}.action-btn.move-down-btn{background:linear-gradient(to right,#f39c12,#e67e22)}.autocomplete{position:relative;display:inline-block}.autocomplete-items{position:absolute;border:1px solid #d4d4d4;border-bottom:none;border-top:none;z-index:99;top:100%;left:0;right:0;max-height:297px;overflow-y:auto;box-shadow:0 4px 8px #0000001a;border-radius:0 0 6px 6px;background-color:#fff}.autocomplete-items::-webkit-scrollbar{width:6px}.autocomplete-items::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.autocomplete-items::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:3px;opacity:.7}.autocomplete-items::-webkit-scrollbar-thumb:hover{background:var(--secondary-color);opacity:1}.autocomplete-items div{padding:8px 15px;cursor:pointer;background-color:#fff;border-bottom:1px solid #e0e0e0;height:54px;display:flex;align-items:center;transition:background-color .2s ease;overflow:hidden;line-height:1.3}.autocomplete-items div:hover{background-color:#f5f5f5}.autocomplete-active{background-color:var(--primary-color)!important;color:#fff}.autocomplete-items div strong{font-weight:600;display:inline}.autocomplete-items div>span{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;width:100%;line-height:1.3}.highlight{font-weight:700}.not-paid{background-color:#fff0f0!important;border-left:5px solid #e74c3c}#past-orders-section{margin-top:40px}.past-order{background:var(--card-bg-color);border:1px solid var(--border-color);padding:20px;margin-bottom:20px;border-radius:8px;box-shadow:0 2px 10px var(--shadow-color)}#totals{margin-top:20px;font-size:1.2em;font-weight:600}#totals p{display:flex;justify-content:space-around;background:var(--card-bg-color);padding:15px;border-radius:8px;box-shadow:0 2px 10px var(--shadow-color)}#totals strong{color:var(--primary-color)}.btn{background-color:var(--primary-color);color:#fff;border:none}.totals-container{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 20px;background-color:#f9f9f9;border-top:1px solid #eee;box-sizing:border-box;margin-top:10px}.totals,.missing-payments{flex-shrink:0}.missing-payments{color:#e74c3c;font-weight:700}.totals-past{display:flex;justify-content:space-between;align-items:center}.totals-past .missing-payments-past{color:#e74c3c;font-weight:700}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:24px;height:24px;background-color:#fff;border:2px solid var(--primary-color);border-radius:5px;cursor:pointer;position:relative;vertical-align:middle;transition:background-color .3s,border-color .3s}input[type=checkbox]:checked{background-color:#2ecc71;border-color:#2ecc71}input[type=checkbox]:checked:after{content:"✔";font-size:18px;color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.app-container{display:flex;min-height:100vh}.top-controls{position:fixed;top:20px;right:20px;display:flex;gap:12px;z-index:1500}.control-btn{padding:10px 16px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;box-shadow:0 2px 8px var(--shadow-color)}.control-btn.sample-btn{background:linear-gradient(to right,#27ae60,#2ecc71);color:#fff}.control-btn.sample-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #27ae604d}.control-btn.danger-btn{background:linear-gradient(to right,#e74c3c,#c0392b);color:#fff}.control-btn.danger-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #e74c3c4d}.sidebar{width:250px;background:linear-gradient(to bottom,var(--primary-color),var(--secondary-color));color:#fff;padding:20px;box-shadow:2px 0 10px var(--shadow-color);position:fixed;height:100vh;overflow-y:auto;top:0;left:0;z-index:1000}.sidebar h2{color:#fff;margin-bottom:30px;text-align:center;font-weight:600}.nav-menu{list-style:none;padding:0;margin:0}.nav-menu li{margin-bottom:10px}.nav-link{display:block;padding:15px 20px;color:#fff;text-decoration:none;border-radius:8px;transition:background-color .3s;font-weight:500}.nav-link:hover{background-color:#ffffff1a}.nav-link.active{background-color:#fff3;font-weight:600}.main-content{flex:1;margin-left:250px;padding:20px;background-color:var(--background-color);min-height:100vh;width:calc(100% - 250px);box-sizing:border-box}.page{display:none}.page.active{display:block}.stats-grid{display:grid;gap:20px;grid-template-columns:1fr}.stats-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:var(--card-bg-color);padding:25px;border-radius:12px;box-shadow:0 4px 15px var(--shadow-color);text-align:center;border-left:5px solid var(--primary-color)}.stat-card h3{margin:0 0 15px;color:var(--text-color);font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:1px}.stat-value{font-size:28px;font-weight:700;color:var(--primary-color);margin:0}.stats-section{background:var(--card-bg-color);padding:25px;border-radius:12px;box-shadow:0 4px 15px var(--shadow-color)}.stats-section h2{margin-top:0;margin-bottom:20px;color:var(--primary-color);font-size:20px;font-weight:600}.stats-section.full-width{grid-column:1 / -1}.chart-container{overflow-x:auto}#weekly-performance-chart{max-width:100%;height:400px!important}.stats-table{width:100%;margin:0;border-radius:8px;overflow:hidden}.stats-table th{background:var(--primary-color);color:#fff;font-weight:600;padding:12px 15px}.stats-table td{padding:12px 15px;border-bottom:1px solid var(--border-color)}.stats-table tr:last-child td{border-bottom:none}.bar-chart{padding:20px 0}.bar-item{display:flex;align-items:center;margin-bottom:15px}.bar-label{width:80px;font-weight:500;color:var(--text-color)}.bar-container{flex:1;height:25px;background-color:#f0f0f0;border-radius:12px;margin:0 15px;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(to right,var(--primary-color),var(--secondary-color));border-radius:12px;transition:width .6s ease}.bar-value{font-weight:600;color:var(--primary-color);min-width:50px}.growth-positive{color:#27ae60;font-weight:600}.growth-negative{color:#e74c3c;font-weight:600}.size-bar{display:flex;align-items:center;margin-bottom:15px;padding:10px;background:#f8f9fa;border-radius:8px}.size-label{width:60px;font-weight:500;color:var(--text-color)}.size-progress{flex:1;height:20px;background:#e9ecef;border-radius:10px;margin:0 15px;overflow:hidden}.size-fill{height:100%;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));border-radius:10px;transition:width .3s ease}.size-value{min-width:80px;text-align:right;font-weight:500;color:var(--text-color)}#size-distribution{padding:20px;background:var(--card-bg-color);border-radius:8px;box-shadow:0 2px 10px var(--shadow-color)}.top-controls{position:fixed;top:20px;right:20px;z-index:1001;display:flex;gap:10px}.control-btn{padding:10px 16px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px var(--shadow-color)}.sample-btn{background:linear-gradient(to right,var(--primary-color),var(--secondary-color));color:#fff}.sample-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px var(--shadow-color)}.danger-btn{background:linear-gradient(to right,#e74c3c,#c0392b);color:#fff}.danger-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #e74c3c4d}.backup-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:none;justify-content:center;align-items:center;z-index:2000}.backup-modal-content{background:var(--card-bg-color);border-radius:12px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 10px 30px #0000004d}.backup-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 25px;border-bottom:1px solid var(--border-color)}.backup-modal-header h3{margin:0;color:var(--primary-color);font-size:18px}.backup-modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:#999;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.backup-modal-close:hover{background-color:#f0f0f0;color:#333}.backup-modal-body{padding:25px}.backup-modal-body p{margin-bottom:20px;color:var(--text-color);line-height:1.5}.backup-list-section h4{margin-bottom:15px;color:var(--primary-color);font-size:16px}.backup-list{max-height:300px;overflow-y:auto;border:1px solid var(--border-color);border-radius:8px;padding:10px}.backup-item{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid #f0f0f0;transition:background-color .2s}.backup-item:last-child{border-bottom:none}.backup-item:hover{background-color:#f9f9f9}.backup-info{flex:1;display:flex;flex-direction:column;gap:4px}.backup-description{font-weight:500;color:var(--text-color);font-size:14px}.backup-date{font-size:12px;color:#666}.backup-actions{display:flex;gap:8px}.backup-btn{padding:6px 12px;border:none;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:4px}.backup-btn.small{padding:4px 8px;font-size:11px}.backup-btn.primary{background:linear-gradient(to right,var(--primary-color),var(--secondary-color));color:#fff}.backup-btn.secondary{background:#f8f9fa;color:var(--text-color);border:1px solid var(--border-color)}.backup-btn.primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px var(--shadow-color)}.backup-btn.secondary:hover{background:#e9ecef}.restore-backup-btn{background:linear-gradient(to right,#27ae60,#2ecc71);color:#fff}.restore-backup-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px #27ae604d}.delete-backup-btn{background:linear-gradient(to right,#e74c3c,#c0392b);color:#fff}.delete-backup-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px #e74c3c4d}.backup-modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:20px 25px;border-top:1px solid var(--border-color);background:#f9f9f9;border-radius:0 0 12px 12px}.no-backups{text-align:center;color:#666;font-style:italic;padding:20px}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));display:flex;align-items:center;justify-content:center;z-index:9999}.loading-container{text-align:center;color:#fff}.loading-container h2{margin:20px 0 10px;font-size:2rem;font-weight:300}.loading-container p{margin:0;opacity:.8;font-size:1.1rem}.loading-spinner{width:50px;height:50px;border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.login-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));display:flex;justify-content:center;align-items:center;z-index:1000}.login-container{background:var(--card-bg-color);border-radius:16px;padding:40px;box-shadow:0 20px 60px #0000004d;max-width:400px;width:90%;text-align:center}.login-header h1{margin:0 0 10px;color:var(--primary-color);font-size:2.5em}.login-header p{margin:0 0 30px;color:#666;font-size:1.1em}.auth-tabs{display:flex;margin-bottom:20px;background:#f5f5f5;border-radius:8px;overflow:hidden}.auth-tab{flex:1;padding:12px;border:none;background:#e9ecef;color:#495057;cursor:pointer;transition:all .3s ease;font-weight:500}.auth-tab:hover{background:#dee2e6;color:#212529}.auth-tab.active{background:var(--primary-color);color:#fff}.login-form input{width:100%;padding:15px;margin-bottom:15px;border:2px solid #e0e0e0;border-radius:8px;font-size:16px;transition:border-color .3s ease;box-sizing:border-box}.login-form input:focus{outline:none;border-color:var(--primary-color)}.login-form button[type=submit]{width:100%;padding:15px;background:var(--primary-color);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .3s ease}.login-form button[type=submit]:hover{background:var(--secondary-color)}.auth-status{margin-top:15px;padding:10px;border-radius:6px;font-size:14px}.auth-status.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.auth-status.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.user-info{position:absolute;bottom:80px;left:20px;right:20px;padding:15px;background:#ffffff1a;border-radius:8px;color:#fff;font-size:14px}.logout-btn{width:100%;margin-top:10px;padding:8px;background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:4px;cursor:pointer;transition:background .3s ease}.logout-btn:hover{background:#ffffff4d}.autocomplete-id{font-size:16px;font-weight:600;color:var(--primary-color)}.autocomplete-size{font-size:14px;color:#666;font-weight:500}.autocomplete-name{font-size:14px;color:var(--text-color);font-weight:400}.autocomplete-keyword{font-size:12px;color:#888;font-style:italic}.mobile-card{background:var(--card-bg-color);border-radius:12px;padding:20px;margin-bottom:15px;box-shadow:0 4px 15px var(--shadow-color);border-left:4px solid var(--primary-color)}.mobile-card-header{font-weight:600;color:var(--primary-color);font-size:16px;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--border-color)}.mobile-card-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f0f0f0}.mobile-card-row:last-child{border-bottom:none;margin-top:10px;padding-top:15px}.mobile-card-label{font-weight:500;color:var(--text-color);font-size:14px}.mobile-card-value{font-weight:600;color:var(--primary-color);text-align:right}.mobile-card-actions{display:flex;gap:8px;margin-top:15px;padding-top:15px;border-top:1px solid var(--border-color)}.mobile-card-btn{flex:1;padding:8px 12px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:40px;display:flex;align-items:center;justify-content:center}.mobile-card-btn.delete-btn{background:#ff7675;color:#fff}.mobile-card-btn.delete-btn:hover{background:#e74c3c;transform:translateY(-1px)}.mobile-card-btn.move-up-btn{background:linear-gradient(to right,#27ae60,#2ecc71);color:#fff}.mobile-card-btn.move-up-btn:hover{background:linear-gradient(to right,#2ecc71,#27ae60);transform:translateY(-1px)}.mobile-card-btn.move-down-btn{background:linear-gradient(to right,#f39c12,#e67e22);color:#fff}.mobile-card-btn.move-down-btn:hover{background:linear-gradient(to right,#e67e22,#f39c12);transform:translateY(-1px)}.mobile-toggle-container{display:flex;align-items:center;gap:10px}.mobile-toggle{position:relative;width:50px;height:25px;background:#ccc;border-radius:25px;cursor:pointer;transition:background .3s}.mobile-toggle.active{background:var(--primary-color)}.mobile-toggle:before{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;background:#fff;border-radius:50%;transition:transform .3s}.mobile-toggle.active:before{transform:translate(25px)}.mobile-header{display:none;background:linear-gradient(to right,var(--primary-color),var(--secondary-color));color:#fff;padding:15px 20px;box-shadow:0 2px 10px var(--shadow-color);position:sticky;top:0;z-index:2000}.mobile-header-content{display:flex;justify-content:space-between;align-items:center;width:100%}.mobile-header h2{color:#fff;margin:0;font-size:20px;font-weight:600}.mobile-nav-toggle{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:5px;width:34px;height:34px;display:flex;align-items:center;justify-content:center}.mobile-nav-menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 4px 15px var(--shadow-color);border-radius:0 0 12px 12px;overflow:hidden;z-index:2001;border-top:2px solid rgba(255,255,255,.3)}.mobile-nav-menu.active{display:block}.mobile-nav-menu .nav-link{display:block;padding:15px 20px;color:var(--text-color);text-decoration:none;border-bottom:1px solid var(--border-color);transition:background-color .3s}.mobile-nav-menu .nav-link:hover{background-color:#f5f5f5}.mobile-nav-menu .nav-link.active{background-color:var(--primary-color);color:#fff}.mobile-user-info{display:none;padding:15px 20px;background:#f8f9fa;border-top:1px solid var(--border-color)}.mobile-user-info.active{display:block}.mobile-logout-btn{width:100%;margin-top:10px;padding:10px;background:var(--primary-color);color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background .3s ease}.mobile-logout-btn:hover{background:var(--secondary-color)}.not-paid-mobile{border-left-color:#e74c3c!important;background:#e74c3c0d}.mobile-order-section{margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid var(--border-color)}.mobile-order-section:last-child{border-bottom:none;margin-bottom:0}.mobile-order-totals{margin-top:20px}.mobile-order-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:15px;background:var(--card-bg-color);border-radius:12px;box-shadow:0 2px 8px var(--shadow-color);border-left:4px solid var(--primary-color)}.mobile-collapse-btn{background:transparent;border:none;padding:5px;cursor:pointer;border-radius:6px;transition:background-color .2s ease;display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0}.mobile-collapse-btn:hover{background-color:var(--hover-color, #f0f0f0)}.mobile-collapse-btn:active{transform:scale(.95)}.collapse-arrow{font-size:14px;color:var(--primary-color);transition:transform .2s ease;font-weight:700}.mobile-order-content{transition:all .3s ease;overflow:hidden}@media (max-width: 1024px){.sidebar{width:220px}.main-content{margin-left:220px;width:calc(100% - 220px)}.stats-overview{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.sidebar{display:none}.mobile-header{display:block}.main-content{margin-left:0;width:100%;padding:15px;margin-top:0}.app-container{flex-direction:column}.top-controls{position:static!important;top:auto!important;right:auto!important;margin:15px auto;justify-content:center;flex-wrap:wrap;z-index:1000;width:fit-content}.control-btn{padding:8px 12px;font-size:12px;margin:2px}.stats-overview{grid-template-columns:repeat(2,1fr);gap:15px}.stat-value{font-size:22px}.stats-table,#current-order-table,#past-orders-list{display:none}.mobile-cards-container{display:block!important}form{padding:15px}input,select,button{margin-right:0;margin-bottom:10px;width:100%;box-sizing:border-box}.autocomplete{display:block;width:100%}button{margin-bottom:0}.card{margin-bottom:15px}.card-body{padding:15px}.chart-container{overflow-x:auto;-webkit-overflow-scrolling:touch}#weekly-performance-chart{min-width:500px;height:300px!important}.totals-container{flex-direction:column;align-items:stretch;padding:15px}.totals{margin-bottom:10px}.missing-payments{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-color)}}@media (max-width: 600px){.main-content{padding:10px}.stats-overview{grid-template-columns:1fr;gap:10px}.stat-card{padding:15px}.stat-value{font-size:20px}.mobile-cards-container{display:block}table:not(.mobile-table){display:none}form{padding:10px}.autocomplete-items{max-height:200px}.mobile-card{padding:15px;margin-bottom:10px}.mobile-card-header{font-size:14px;margin-bottom:10px}.mobile-card-label,.mobile-card-value{font-size:13px}#weekly-performance-chart{min-width:400px;height:250px!important}.chart-container{margin:0 -10px;padding:0 10px}.stats-section{padding:15px}.stats-section h2{font-size:18px;margin-bottom:15px}.size-bar{padding:8px;margin-bottom:8px}.size-label{width:50px;font-size:12px}.size-value{min-width:60px;font-size:12px}.totals-container{padding:10px;font-size:14px;flex-direction:column;align-items:stretch}.totals{margin-bottom:10px}.missing-payments{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-color)}}@media (max-width: 480px){.mobile-header-content h2{font-size:18px}.control-btn{padding:6px 10px;font-size:11px}.mobile-card{padding:12px}.mobile-card-header{font-size:13px}.mobile-card-label,.mobile-card-value{font-size:12px}.stat-card{padding:12px}.stat-value{font-size:18px}.stats-section{padding:12px}}