:root{--bg-primary: 224, 25%, 8%;--bg-sidebar: 224, 25%, 4%;--bg-panel: 224, 20%, 12%;--text-primary: 220, 20%, 95%;--text-muted: 220, 10%, 65%;--accent-primary: 260, 85%, 65%;--accent-primary-hover: 260, 85%, 55%;--accent-primary-glow: hsla(260, 85%, 65%, .15);--accent-secondary: 195, 85%, 50%;--accent-secondary-glow: hsla(195, 85%, 50%, .15);--accent-alert: 340, 85%, 60%;--accent-success: 145, 80%, 45%;--border-glass: hsla(220, 20%, 95%, .08);--border-glass-focus: hsla(260, 85%, 65%, .3);--shadow-main: 0 8px 32px 0 rgba(0, 0, 0, .4);--font-display: "Outfit", "Inter", system-ui, -apple-system, sans-serif;--font-body: "Inter", system-ui, -apple-system, sans-serif;--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--radius-lg: 16px;--radius-md: 10px;--radius-sm: 6px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:hsl(var(--bg-primary));color:hsl(var(--text-primary));font-family:var(--font-body);overflow-x:hidden;height:100vh}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:hsl(var(--bg-sidebar))}::-webkit-scrollbar-thumb{background:hsl(var(--bg-panel));border-radius:4px}::-webkit-scrollbar-thumb:hover{background:hsla(var(--text-muted),.3)}.hidden{display:none!important}.toast-container{position:fixed;top:24px;right:24px;z-index:10000;display:flex;flex-direction:column;gap:12px;max-width:350px;width:100%}.toast{background:rgba(var(--bg-panel),.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-glass);border-left:4px solid var(--border-color);padding:16px;border-radius:var(--radius-md);box-shadow:var(--shadow-main);display:flex;align-items:flex-start;gap:12px;animation:toast-slide-in .3s cubic-bezier(.175,.885,.32,1.275) forwards;color:hsl(var(--text-primary))}.toast.toast-success{--border-color: hsl(var(--accent-success))}.toast.toast-error{--border-color: hsl(var(--accent-alert))}.toast.toast-info{--border-color: hsl(var(--accent-secondary))}.toast-icon{font-size:1.25rem}.toast-success .toast-icon{color:hsl(var(--accent-success))}.toast-error .toast-icon{color:hsl(var(--accent-alert))}.toast-info .toast-icon{color:hsl(var(--accent-secondary))}.toast-content h4{font-family:var(--font-display);font-size:.95rem;margin-bottom:2px}.toast-content p{font-size:.85rem;color:hsl(var(--text-muted))}@keyframes toast-slide-in{0%{transform:translate(120%);opacity:0}to{transform:translate(0);opacity:1}}.login-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,hsl(var(--bg-primary)),hsl(var(--bg-sidebar)));display:flex;justify-content:center;align-items:center;z-index:9999}.login-card{background:rgba(var(--bg-panel),.45);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);padding:40px;width:100%;max-width:440px;box-shadow:var(--shadow-main);text-align:center}.logo-icon{background:linear-gradient(135deg,hsl(var(--accent-primary)),hsl(var(--accent-secondary)));width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:1.5rem;color:#fff;box-shadow:0 4px 20px hsla(var(--accent-primary),.4)}.login-header h2{font-family:var(--font-display);font-size:1.8rem;font-weight:700;margin-bottom:8px}.login-header p{color:hsl(var(--text-muted));font-size:.9rem;margin-bottom:30px}.form-group{margin-bottom:20px;text-align:left}.form-group label{display:block;font-size:.85rem;font-weight:500;margin-bottom:8px;color:hsl(var(--text-muted))}.input-with-icon{position:relative}.input-with-icon i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:hsl(var(--text-muted))}.form-control,.input-with-icon input{width:100%;background:rgba(var(--bg-primary),.6);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:12px 16px;color:hsl(var(--text-primary));font-family:var(--font-body);font-size:.95rem;transition:var(--transition-smooth)}.input-with-icon input{padding-left:44px}.form-control:focus,.input-with-icon input:focus{outline:none;border-color:hsl(var(--accent-primary));box-shadow:0 0 0 3px var(--accent-primary-glow);background:rgba(var(--bg-primary),.8)}select.form-control option{background-color:hsl(var(--bg-panel));color:hsl(var(--text-primary))}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-md);padding:12px 24px;font-family:var(--font-display);font-weight:600;font-size:.95rem;cursor:pointer;transition:var(--transition-smooth);border:none}.btn-primary{background:linear-gradient(135deg,hsl(var(--accent-primary)),hsl(var(--accent-primary-hover)));color:#fff;box-shadow:0 4px 15px hsla(var(--accent-primary),.25)}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px hsla(var(--accent-primary),.35)}.btn-secondary{background:hsla(var(--text-muted),.15);color:hsl(var(--text-primary));border:1px solid var(--border-glass)}.btn-secondary:hover{background:hsla(var(--text-muted),.25)}.btn-block{width:100%}.main-container{display:flex;height:100vh;width:100vw}.sidebar{width:280px;background-color:hsl(var(--bg-sidebar));border-right:1px solid var(--border-glass);display:flex;flex-direction:column;padding:24px}.sidebar-brand{display:flex;align-items:center;gap:12px;margin-bottom:40px}.brand-logo{background:linear-gradient(135deg,hsl(var(--accent-primary)),hsl(var(--accent-secondary)));width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;color:#fff}.brand-name h1{font-family:var(--font-display);font-size:1.15rem;font-weight:700}.brand-name span{font-size:.75rem;color:hsl(var(--text-muted));text-transform:uppercase;letter-spacing:1px}.sidebar-nav{flex:1}.sidebar-nav ul{list-style:none}.sidebar-nav li{margin-bottom:8px}.nav-link{display:flex;align-items:center;gap:14px;padding:12px 16px;color:hsl(var(--text-muted));text-decoration:none;font-family:var(--font-display);font-weight:500;font-size:.95rem;border-radius:var(--radius-md);transition:var(--transition-smooth)}.nav-link i{font-size:1.1rem;width:20px}.nav-link:hover{color:hsl(var(--text-primary));background-color:#ffffff08}.nav-link.active{color:#fff;background:linear-gradient(135deg,rgba(var(--accent-primary),.15),rgba(var(--accent-secondary),.15));border:1px solid var(--border-glass-focus);box-shadow:0 4px 15px #0000001a}.badge{padding:2px 6px;border-radius:20px;font-size:.7rem;font-weight:700;margin-left:auto}.badge-accent{background:hsl(var(--accent-alert));color:#fff}.sidebar-footer{border-top:1px solid var(--border-glass);padding-top:20px;display:flex;align-items:center;justify-content:space-between}.user-info{display:flex;align-items:center;gap:12px}.user-avatar{width:36px;height:36px;background:linear-gradient(135deg,hsl(var(--accent-primary)),hsl(var(--accent-secondary)));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#fff}.user-fullname{font-family:var(--font-display);font-weight:600;font-size:.85rem}.user-role-label{font-size:.75rem;color:hsl(var(--text-muted));text-transform:capitalize}.btn-logout{background:none;border:none;color:hsl(var(--text-muted));font-size:1.15rem;cursor:pointer;transition:var(--transition-smooth);padding:8px}.btn-logout:hover{color:hsl(var(--accent-alert))}.content-wrapper{flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;background-color:hsl(var(--bg-primary))}.top-bar{height:80px;border-bottom:1px solid var(--border-glass);padding:0 40px;display:flex;align-items:center;justify-content:space-between}.page-title-area h2{font-family:var(--font-display);font-size:1.5rem;font-weight:700}.top-bar-actions{display:flex;align-items:center;gap:10px;font-size:.85rem;color:hsl(var(--text-muted))}.pulse-indicator{width:8px;height:8px;background-color:hsl(var(--accent-success));border-radius:50%;box-shadow:0 0 rgba(var(--accent-success),.7);animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 #2ecc71b3}70%{transform:scale(1);box-shadow:0 0 0 6px #2ecc7100}to{transform:scale(.95);box-shadow:0 0 #2ecc7100}}.view-viewport{flex:1;padding:40px;overflow-y:auto}.view-section{display:none;animation:fade-in .4s ease-out forwards}.view-section.active{display:block}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-bottom:40px}.stat-card{background:rgba(var(--bg-panel),.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);padding:24px;display:flex;align-items:center;gap:20px;box-shadow:var(--shadow-main);transition:var(--transition-smooth)}.stat-card:hover{transform:translateY(-2px);border-color:var(--border-glass-focus)}.stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem}.icon-blue{background:#3498db26;color:#3498db}.icon-purple{background:rgba(var(--accent-primary),.15);color:hsl(var(--accent-primary))}.icon-teal{background:rgba(var(--accent-secondary),.15);color:hsl(var(--accent-secondary))}.icon-gold{background:#f1c40f26;color:#f1c40f}.stat-label{font-size:.85rem;color:hsl(var(--text-muted));margin-bottom:4px}.stat-details h3{font-family:var(--font-display);font-size:1.4rem;font-weight:700}.glass-panel{background:rgba(var(--bg-panel),.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-main);overflow:hidden}.panel-header{padding:24px;border-bottom:1px solid var(--border-glass)}.panel-header h3{font-family:var(--font-display);font-size:1.1rem}.panel-subtitle{font-size:.8rem;color:hsl(var(--text-muted))}.panel-body{padding:24px}.action-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.search-box{position:relative;max-width:320px;width:100%}.search-box i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:hsl(var(--text-muted))}.search-box input{width:100%;background:rgba(var(--bg-panel),.35);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:10px 16px 10px 40px;color:#fff;outline:none;transition:var(--transition-smooth)}.search-box input:focus{border-color:hsl(var(--accent-primary))}.table-container{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;text-align:left}.data-table th,.data-table td{padding:16px 24px;border-bottom:1px solid var(--border-glass);font-size:.9rem}.data-table th{font-family:var(--font-display);font-weight:600;color:hsl(var(--text-muted));background:#0000001a;text-transform:uppercase;font-size:.75rem;letter-spacing:.5px}.data-table tbody tr{transition:var(--transition-smooth)}.data-table tbody tr:hover{background:#ffffff05}.table-avatar{width:36px;height:36px;border-radius:var(--radius-sm);object-fit:cover;background-color:hsla(255,255,255,.05)}.status-pill{display:inline-flex;padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:600}.status-pill.success{background:#2ecc7126;color:#2ecc71}.status-pill.warning{background:#f1c40f26;color:#f1c40f}.status-pill.danger{background:#e74c3c26;color:#e74c3c}.status-pill.info{background:#3498db26;color:#3498db}.activity-timeline{display:flex;flex-direction:column;gap:16px}.timeline-item{display:flex;gap:16px}.timeline-badge{width:32px;height:32px;background-color:#ffffff0d;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0}.timeline-text{font-size:.9rem}.timeline-time{font-size:.75rem;color:hsl(var(--text-muted))}.pagination-footer{display:flex;justify-content:space-between;align-items:center;margin-top:24px}.pagination-btn-group{display:flex;gap:8px}.pagination-btn{background:rgba(var(--bg-panel),.35);border:1px solid var(--border-glass);color:#fff;width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-smooth)}.pagination-btn:hover:not(:disabled){border-color:hsl(var(--accent-primary))}.pagination-btn:disabled{opacity:.4;cursor:not-allowed}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:none;align-items:center;justify-content:center;background:#0009;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:20px}.modal.active{display:flex;animation:modal-open .3s cubic-bezier(.19,1,.22,1) forwards}@keyframes modal-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-content{width:100%;max-width:680px;max-height:90vh;display:flex;flex-direction:column}.modal-content form{display:flex;flex-direction:column;flex:1;overflow:hidden}.modal-header{padding:24px;border-bottom:1px solid var(--border-glass);display:flex;align-items:center;justify-content:space-between}.modal-header h3{font-family:var(--font-display);font-size:1.25rem}.close-modal{background:none;border:none;color:hsl(var(--text-muted));font-size:1.25rem;cursor:pointer}.close-modal:hover{color:#fff}.modal-body-scroll{padding:24px;overflow-y:auto;flex:1}.modal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.span-2{grid-column:span 2}.modal-footer{padding:20px 24px;border-top:1px solid var(--border-glass);display:flex;justify-content:flex-end;gap:12px}.section-divider{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-glass);padding-bottom:8px;margin-top:10px;font-family:var(--font-display);font-weight:600;font-size:.95rem;color:hsl(var(--accent-secondary))}.variants-table{width:100%;border-collapse:collapse}.variants-table th{text-align:left;font-size:.8rem;color:hsl(var(--text-muted));padding-bottom:8px}.variants-table td{padding:6px 0}.variants-table input,.variants-table select{background:#0003;border:1px solid var(--border-glass);border-radius:var(--radius-sm);color:#fff;padding:6px 10px;width:90%}.btn-remove-variant{background:none;border:none;color:hsl(var(--accent-alert));cursor:pointer;padding:6px}.file-dropzone{border:2px dashed var(--border-glass);border-radius:var(--radius-md);padding:24px;text-align:center;position:relative;cursor:pointer;transition:var(--transition-smooth)}.file-dropzone:hover{border-color:hsl(var(--accent-primary))}.file-dropzone input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.file-dropzone i{font-size:2rem;color:hsl(var(--text-muted));margin-bottom:10px}.file-dropzone p{font-size:.85rem;color:hsl(var(--text-muted))}.images-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:12px;margin-top:14px}.preview-img-container{position:relative;width:80px;height:80px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border-glass)}.preview-img-container img{width:100%;height:100%;object-fit:cover}.logo-preview-container{width:90px;height:90px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border-glass);margin-top:14px}.logo-preview-container img{width:100%;height:100%;object-fit:cover}.checkbox-group-container{background:#0003;border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:12px;max-height:120px;overflow-y:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.checkbox-label{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:hsl(var(--text-primary));cursor:pointer}.inline-fields{display:flex;align-items:center;gap:20px}.checkbox-inline{display:inline-flex;align-items:center;gap:8px;cursor:pointer}.invoice-meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.invoice-meta-label{font-size:.8rem;color:hsl(var(--text-muted))}.invoice-meta-value{font-family:var(--font-display);font-weight:600;font-size:1rem}.invoice-divider{height:1px;background:var(--border-glass);margin:20px 0}.invoice-sections{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.invoice-section h4{font-family:var(--font-display);font-size:.9rem;color:hsl(var(--accent-secondary));margin-bottom:8px}.invoice-section p{font-size:.85rem;line-height:1.5}.status-change-section label{font-size:.9rem}.mt-1{margin-top:10px}.row-actions{display:flex;gap:10px}.btn-icon{background:none;border:none;cursor:pointer;width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:var(--transition-smooth)}.btn-icon-edit{color:hsl(var(--accent-secondary));background:hsla(var(--accent-secondary),.1)}.btn-icon-edit:hover{background:hsla(var(--accent-secondary),.25)}.btn-icon-delete{color:hsl(var(--accent-alert));background:hsla(var(--accent-alert),.1)}.btn-icon-delete:hover{background:hsla(var(--accent-alert),.25)}.btn-icon-duplicate{color:#f1c40f;background:#f1c40f1a}.btn-icon-duplicate:hover{background:#f1c40f40}.btn-icon-view{color:#fff;background:#ffffff0d}.btn-icon-view:hover{background:#ffffff26}.variant-cell{display:flex;flex-direction:column;gap:6px}.color-swatch-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}.color-dot{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.2);cursor:default;transition:transform .15s ease;flex-shrink:0;box-shadow:0 0 4px #0000004d}.color-dot:hover{transform:scale(1.25);border-color:#fff9}.color-label-more{font-size:.7rem;color:hsl(var(--text-muted));font-weight:500}.size-pill-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.size-pill{display:inline-flex;align-items:center;padding:1px 6px;border-radius:4px;font-size:.65rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;background:hsla(var(--accent-primary),.12);color:hsl(var(--accent-primary));border:1px solid hsla(var(--accent-primary),.25);white-space:nowrap}.size-pill-more{font-size:.65rem;color:hsl(var(--text-muted))}.no-variants-label{font-size:.75rem;color:hsl(var(--text-muted));font-style:italic}.payment-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--radius-sm);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.payment-badge.visa{background:#1e90ff1f;color:#5aafff;border:1px solid rgba(30,144,255,.25)}.payment-badge.instapay{background:#2ed5731f;color:#2ed573;border:1px solid rgba(46,213,115,.25)}.payment-badge.cash_on_delivery{background:#f1c40f1f;color:#f1c40f;border:1px solid rgba(241,196,15,.25)}.payment-badge.unknown{background:#ffffff0f;color:hsl(var(--text-muted));border:1px solid rgba(255,255,255,.1)}.invoice-variant-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:4px;font-size:.68rem;font-weight:600;background:hsla(var(--accent-primary),.1);color:hsl(var(--accent-primary));border:1px solid hsla(var(--accent-primary),.2);margin:1px 0;white-space:nowrap}.invoice-color-dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(255,255,255,.2);flex-shrink:0}.clickable-cell{cursor:pointer;position:relative;transition:var(--transition-smooth)}.clickable-cell:hover{background:#ffffff0a!important}.clickable-cell:active{background:#ffffff14!important}.clickable-stock{text-decoration:underline dashed rgba(255,255,255,.3);text-underline-offset:4px}