:root { --apple-bg: #FBFBFB; --apple-card: #FFFFFF; --apple-text: #1D1D1F; --apple-text-muted: #86868B; --apple-accent: #0071E3; --apple-border: rgba(0,0,0,0.1); } body { background-color: var(--apple-bg); color: var(--apple-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } .navbar { background-color: rgba(255, 255, 255, 0.8); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--apple-border); padding: 0.8rem 1rem; } .card { background: var(--apple-card); border: 1px solid var(--apple-border); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; overflow: hidden; } .card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .table { margin-bottom: 0; } .table thead th { background: #F5F5F7; border-bottom: 1px solid var(--apple-border); color: var(--apple-text-muted); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 16px; } .table tbody td { padding: 16px; vertical-align: middle; border-bottom: 1px solid var(--apple-border); } .btn-primary { background-color: var(--apple-accent); border: none; border-radius: 8px; font-weight: 500; padding: 8px 20px; } .btn-primary:hover { background-color: #0077ED; } .product-img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background-color: #eee; } .status-instock { color: #34C759; font-weight: 600; } .status-outofstock { color: #FF3B30; font-weight: 600; } .search-input { border-radius: 10px; border: 1px solid var(--apple-border); background-color: #F5F5F7; padding: 10px 16px; font-size: 0.9rem; } .search-input:focus { background-color: #fff; box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1); border-color: var(--apple-accent); outline: none; }