@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");:root{--bg-color:#f9fafb;--text-color:#111827;--text-muted:#6b7280;--card-bg:#ffffff;--card-border:#e5e7eb;--primary:#0f172a;--primary-hover:#1e293b;--primary-text:#ffffff;--success:#059669;--success-bg:#d1fae5;--danger:#dc2626;--danger-bg:#fee2e2;--warning:#d97706}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);font-family:Inter,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}h1,h2,h3{font-weight:600;letter-spacing:-.025em}a{color:inherit;text-decoration:none}.app-container{display:flex;min-height:100vh}.sidebar{width:260px;background-color:var(--card-bg);border-right:1px solid var(--card-border);padding:2rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}.sidebar-logo{font-size:1.25rem;font-weight:800;margin-bottom:2.5rem;color:var(--text-color);letter-spacing:-.05em;padding-left:.5rem}.nav-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:.5rem;color:var(--text-muted);transition:all .2s ease;font-weight:500;font-size:.95rem}.nav-item.active,.nav-item:hover{background-color:var(--bg-color);color:var(--text-color)}.main-content{flex:1 1;padding:3rem 4rem;overflow-y:auto}.page-header{margin-bottom:2.5rem;display:flex;justify-content:space-between;align-items:flex-end}.page-title{font-size:2.25rem;font-weight:700;letter-spacing:-.03em}.glass-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:1rem;padding:1.75rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.05),0 2px 4px -1px rgba(0,0,0,.03);transition:box-shadow .2s ease,transform .2s ease}.glass-card:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.05),0 4px 6px -2px rgba(0,0,0,.03);transform:translateY(-2px)}.stat-label{color:var(--text-muted);font-size:.85rem;font-weight:500;margin-bottom:.5rem}.stat-value{font-size:2rem;font-weight:700;letter-spacing:-.02em}.stat-value.success{color:var(--success)}.stat-value.danger{color:var(--danger)}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.25rem;border-radius:.5rem;font-weight:500;border:none;cursor:pointer;transition:all .2s ease;font-size:.95rem}.btn-primary{background-color:var(--primary);color:var(--primary-text);box-shadow:0 1px 3px rgba(0,0,0,.1)}.btn-primary:hover{background-color:var(--primary-hover);box-shadow:0 4px 6px rgba(0,0,0,.1)}.btn-outline{background-color:transparent;border:1px solid var(--card-border);color:var(--text-color)}.btn-outline:hover{background-color:#f3f4f6}.table-container{background:var(--card-bg);border:1px solid var(--card-border);border-radius:1rem;box-shadow:0 1px 3px rgba(0,0,0,.05);overflow:hidden}.table-responsive{width:100%;overflow-x:auto}.data-table{width:100%;border-collapse:collapse;text-align:left}.data-table td,.data-table th{padding:1.125rem 1.5rem;border-bottom:1px solid var(--card-border);font-size:.925rem;vertical-align:middle}.data-table th{background-color:#f9fafb;color:var(--text-muted);font-weight:500;text-transform:uppercase;font-size:.75rem;letter-spacing:.05em;border-bottom:2px solid var(--card-border)}.data-table tbody tr{transition:background-color .15s ease}.data-table tbody tr:hover{background-color:#f9fafb}.data-table tbody tr:last-child td{border-bottom:none}.status-badge{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600}.status-stock{background-color:#e0e7ff;color:#4338ca}.status-sold{background-color:var(--success-bg);color:var(--success)}.modal-backdrop{position:fixed;inset:0;background-color:rgba(17,24,39,.4);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:flex;justify-content:flex-end;z-index:9999}.modal-content{width:100%;max-width:450px;height:100vh;overflow-y:auto;background-color:var(--card-bg);border-left:1px solid var(--card-border);padding:2.5rem 2rem;box-shadow:-10px 0 25px rgba(0,0,0,.05);animation:slideIn .3s cubic-bezier(.16,1,.3,1)}@keyframes slideIn{0%{transform:translateX(100%)}to{transform:translateX(0)}}.form-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-size:.875rem;font-weight:500;color:var(--text-color)}.form-input{background-color:#ffffff;border:1px solid #d1d5db;color:var(--text-color);padding:.625rem .875rem;border-radius:.5rem;font-family:inherit;font-size:.95rem;transition:all .2s ease;box-shadow:0 1px 2px rgba(0,0,0,.02)}.form-input:focus{outline:none;border-color:#0f172a;box-shadow:0 0 0 2px rgba(15,23,42,.1)}.filter-pill{padding:.5rem 1rem;border-radius:2rem;font-size:.85rem;font-weight:500;cursor:pointer;border:1px solid var(--card-border);background-color:var(--card-bg);color:var(--text-muted);transition:all .2s ease}.filter-pill:hover{background-color:#f3f4f6;color:var(--text-color)}.filter-pill.active{background-color:var(--primary);color:var(--primary-text);border-color:var(--primary)}.modal-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--card-border)}@media (max-width:768px){.app-container{flex-direction:column}.sidebar{position:fixed;bottom:0;left:0;width:100%;height:70px;padding:0;border-right:none;border-top:1px solid var(--card-border);z-index:5000;flex-direction:row;background-color:var(--card-bg)}.sidebar-logo{display:none}.sidebar nav{display:flex;flex-direction:row;width:100%;justify-content:space-around;align-items:center;height:100%}.nav-item{flex-direction:column;gap:.25rem;padding:.5rem;font-size:.7rem;flex:1 1;justify-content:center;border-radius:0;height:100%}.nav-item svg{width:20px;height:20px}.main-content{padding:1.5rem 1rem 6rem}.page-header{flex-direction:column;align-items:flex-start;gap:1.25rem}.page-header button,.page-header>div:last-child{width:100%}.dashboard-grid{grid-template-columns:1fr}.glass-card{padding:1.25rem}.table-container{border-radius:.5rem;overflow-x:auto}.data-table td,.data-table th{padding:.75rem 1rem;font-size:.85rem;white-space:nowrap}.modal-backdrop{align-items:flex-end}.modal-content{max-width:100%;height:90vh;border-left:none;border-top-left-radius:1.5rem;border-top-right-radius:1.5rem;padding:1.5rem 1rem 5rem;animation:slideUp .3s cubic-bezier(.16,1,.3,1)}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}}