@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--color-primary: hsl(252, 85%, 57%);--color-primary-hover: hsl(252, 85%, 50%);--color-primary-light: hsl(252, 85%, 95%);--color-accent: hsl(162, 73%, 46%);--color-accent-hover: hsl(162, 73%, 38%);--color-bg: hsl(0, 0%, 99%);--color-bg-secondary: hsl(240, 10%, 97%);--color-surface: hsl(0, 0%, 100%);--color-surface-elevated: hsl(0, 0%, 100%);--color-text: hsl(240, 10%, 12%);--color-text-secondary: hsl(240, 5%, 45%);--color-text-muted: hsl(240, 5%, 65%);--color-border: hsl(240, 10%, 90%);--color-border-strong: hsl(240, 10%, 80%);--color-success: hsl(145, 65%, 40%);--color-warning: hsl(38, 95%, 50%);--color-error: hsl(0, 78%, 54%);--status-pending: hsl(38, 95%, 50%);--status-confirmed: hsl(211, 85%, 55%);--status-shipped: hsl(252, 85%, 57%);--status-delivered: hsl(145, 65%, 40%);--status-cancelled: hsl(0, 78%, 54%);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "Fira Code", "Cascadia Code", monospace;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--radius-sm: .375rem;--radius-md: .625rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 1px 3px hsl(0 0% 0% / .06), 0 1px 2px hsl(0 0% 0% / .04);--shadow-md: 0 4px 12px hsl(0 0% 0% / .08), 0 2px 4px hsl(0 0% 0% / .04);--shadow-lg: 0 10px 30px hsl(0 0% 0% / .1), 0 4px 10px hsl(0 0% 0% / .04);--shadow-xl: 0 20px 60px hsl(0 0% 0% / .12);--transition-fast: .12s ease;--transition-base: .2s ease;--transition-slow: .35s ease;--container-max: 1200px;--nav-height: 64px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-sans);font-size:1rem;line-height:1.6;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,video{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{cursor:pointer;font:inherit;border:none;background:none}input,textarea,select{font:inherit}.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--space-6)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:.625rem var(--space-5);border-radius:var(--radius-md);font-size:.9375rem;font-weight:600;line-height:1;transition:all var(--transition-base);white-space:nowrap;user-select:none}.btn-primary{background:var(--color-primary);color:#fff;box-shadow:0 0 #5934ef00}.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 4px 18px #5934ef59}.btn-primary:active{transform:translateY(0)}.btn-accent{background:var(--color-accent);color:#fff}.btn-accent:hover{background:var(--color-accent-hover);transform:translateY(-1px);box-shadow:0 4px 18px #20cb9859}.btn-ghost{background:transparent;color:var(--color-text-secondary);border:1.5px solid var(--color-border)}.btn-ghost:hover{background:var(--color-bg-secondary);border-color:var(--color-border-strong);color:var(--color-text)}.btn-danger{background:#e52e2e1a;color:var(--color-error);border:1.5px solid hsl(0 78% 54% / .2)}.btn-danger:hover{background:var(--color-error);color:#fff;border-color:var(--color-error)}.btn-sm{padding:.4rem var(--space-3);font-size:.875rem}.btn-lg{padding:.875rem var(--space-8);font-size:1.0625rem}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none!important}.form-group{display:flex;flex-direction:column;gap:var(--space-2)}.form-label{font-size:.875rem;font-weight:600;color:var(--color-text)}.form-input,.form-textarea,.form-select{width:100%;padding:.625rem var(--space-4);border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:.9375rem;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);outline:none}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #5934ef1f}.form-input::placeholder,.form-textarea::placeholder{color:var(--color-text-muted)}.form-textarea{resize:vertical;min-height:100px;line-height:1.5}.form-hint{font-size:.8125rem;color:var(--color-text-muted)}.form-error{font-size:.8125rem;color:var(--color-error)}.card{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm)}.card-hover{transition:transform var(--transition-base),box-shadow var(--transition-base)}.card-hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.badge{display:inline-flex;align-items:center;padding:.25rem .625rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.badge-pending{background:#f9a0061f;color:var(--status-pending)}.badge-confirmed{background:#2b89ee1f;color:var(--status-confirmed)}.badge-shipped{background:#5934ef1f;color:var(--status-shipped)}.badge-delivered{background:#24a85b1f;color:var(--status-delivered)}.badge-cancelled{background:#e52e2e1f;color:var(--status-cancelled)}.alert{padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);font-size:.9375rem;display:flex;align-items:flex-start;gap:var(--space-3)}.alert-error{background:#e52e2e14;color:#a32929;border:1px solid hsl(0 78% 54% / .2)}.alert-success{background:#24a85b14;color:#267346;border:1px solid hsl(145 65% 40% / .2)}.alert-info{background:#2b89ee14;color:#24578f;border:1px solid hsl(211 85% 55% / .2)}.modal-backdrop{position:fixed;inset:0;background:#1c1c2280;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-4);animation:fadeIn var(--transition-fast) ease}.modal{background:var(--color-surface-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;animation:slideUp var(--transition-base) ease}.modal-header{padding:var(--space-6) var(--space-6) 0;display:flex;align-items:center;justify-content:space-between}.modal-body{padding:var(--space-6)}.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--color-text-muted);transition:all var(--transition-fast)}.modal-close:hover{background:var(--color-bg-secondary);color:var(--color-text)}.table-wrapper{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--color-border)}.table{width:100%;border-collapse:collapse;font-size:.9375rem}.table th{padding:var(--space-3) var(--space-4);text-align:left;font-size:.8125rem;font-weight:700;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.06em;background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border)}.table td{padding:var(--space-4);border-bottom:1px solid var(--color-border);vertical-align:middle}.table tr:last-child td{border-bottom:none}.table tbody tr{transition:background var(--transition-fast)}.table tbody tr:hover{background:var(--color-bg-secondary)}.navbar{height:var(--nav-height);background:var(--color-surface);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100;backdrop-filter:blur(8px)}.navbar-inner{display:flex;align-items:center;justify-content:space-between;height:100%}.navbar-brand{font-size:1.125rem;font-weight:800;color:var(--color-primary);letter-spacing:-.03em;display:flex;align-items:center;gap:var(--space-2)}.navbar-brand svg{width:28px;height:28px}.navbar-nav{display:flex;align-items:center;gap:var(--space-2);list-style:none}.nav-link{padding:.4rem var(--space-3);border-radius:var(--radius-sm);font-size:.9375rem;font-weight:500;color:var(--color-text-secondary);transition:all var(--transition-fast)}.nav-link:hover{background:var(--color-bg-secondary);color:var(--color-text)}.nav-link.active{color:var(--color-primary);font-weight:600}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;border:2.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}.page-main{min-height:calc(100vh - var(--nav-height));padding-block:var(--space-8)}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-8);gap:var(--space-4);flex-wrap:wrap}.page-title{font-size:clamp(1.375rem,2.5vw,1.875rem);font-weight:800;letter-spacing:-.03em;color:var(--color-text)}.admin-layout{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - var(--nav-height))}.admin-sidebar{background:var(--color-bg-secondary);border-right:1px solid var(--color-border);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-1)}.sidebar-item{display:flex;align-items:center;gap:var(--space-3);padding:.625rem var(--space-4);border-radius:var(--radius-md);font-size:.9375rem;font-weight:500;color:var(--color-text-secondary);transition:all var(--transition-fast)}.sidebar-item:hover{background:var(--color-border);color:var(--color-text)}.sidebar-item.active{background:var(--color-primary);color:#fff;font-weight:600}.sidebar-item svg{width:18px;height:18px;flex-shrink:0}.admin-content{padding:var(--space-8);overflow:auto}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-6)}.product-card{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--transition-base),box-shadow var(--transition-base);display:flex;flex-direction:column}.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.product-card-image{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--color-bg-secondary)}.product-card-body{padding:var(--space-5);flex:1;display:flex;flex-direction:column;gap:var(--space-2)}.product-card-name{font-size:1.0625rem;font-weight:700;color:var(--color-text);letter-spacing:-.01em}.product-card-desc{font-size:.875rem;color:var(--color-text-secondary);line-height:1.5;flex:1}.product-card-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.product-price{font-size:1.1875rem;font-weight:800;color:var(--color-primary)}@media(max-width:768px){.admin-layout{grid-template-columns:1fr}.admin-sidebar{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--color-border);padding:var(--space-3);gap:var(--space-2)}.sidebar-item{white-space:nowrap;flex-shrink:0}.container{padding-inline:var(--space-4)}}
