:root{--bp-bg-primary:#fff;--bp-bg-secondary:#f8fafc;--bp-bg-tertiary:#f1f5f9;--bp-text-primary:#1e293b;--bp-text-secondary:#475569;--bp-text-muted:#64748b;--bp-border:#e2e8f0;--bp-border-light:#f1f5f9;--bp-brand:#2563eb;--bp-brand-hover:#1d4ed8;--bp-brand-light:#eef2ff;--bp-success:#10b981;--bp-danger:#ef4444;--bp-danger-light:#fee2e2;--bp-shadow:#0000000d;--bp-shadow-md:#0000001a}@media (prefers-color-scheme:dark){:root{--bp-bg-primary:#1e293b;--bp-bg-secondary:#0f172a;--bp-bg-tertiary:#334155;--bp-text-primary:#f1f5f9;--bp-text-secondary:#cbd5e1;--bp-text-muted:#94a3b8;--bp-border:#334155;--bp-border-light:#1e293b;--bp-brand:#3b82f6;--bp-brand-hover:#60a5fa;--bp-brand-light:#1e3a5f;--bp-success:#34d399;--bp-danger:#f87171;--bp-danger-light:#7f1d1d;--bp-shadow:#0003;--bp-shadow-md:#0000004d}}.dark-mode{--bp-bg-primary:#1e293b;--bp-bg-secondary:#0f172a;--bp-bg-tertiary:#334155;--bp-text-primary:#f1f5f9;--bp-text-secondary:#cbd5e1;--bp-text-muted:#94a3b8;--bp-border:#334155;--bp-border-light:#1e293b;--bp-brand:#3b82f6;--bp-brand-hover:#60a5fa;--bp-brand-light:#1e3a5f;--bp-success:#34d399;--bp-danger:#f87171;--bp-danger-light:#7f1d1d;--bp-shadow:#0003;--bp-shadow-md:#0000004d}.light-mode{--bp-bg-primary:#fff;--bp-bg-secondary:#f8fafc;--bp-bg-tertiary:#f1f5f9;--bp-text-primary:#1e293b;--bp-text-secondary:#475569;--bp-text-muted:#64748b;--bp-border:#e2e8f0;--bp-border-light:#f1f5f9;--bp-brand:#2563eb;--bp-brand-hover:#1d4ed8;--bp-brand-light:#eef2ff;--bp-success:#10b981;--bp-danger:#ef4444;--bp-danger-light:#fee2e2;--bp-shadow:#0000000d;--bp-shadow-md:#0000001a}.brand-page{background:var(--bp-bg-primary);border-radius:12px;flex-direction:column;gap:1rem;padding:1rem;display:flex}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.page-header h2{color:var(--bp-text-primary);margin:0;font-size:1.5rem}.brand-table{border-collapse:collapse;border:1px solid var(--bp-border);border-radius:8px;width:100%;overflow:hidden}.brand-table th{text-align:center;border-bottom:2px solid var(--bp-border);background:var(--bp-bg-secondary);color:var(--bp-text-primary);padding:.75rem;font-weight:600}.brand-table th,.brand-table td{border-bottom:1px solid var(--bp-border);color:var(--bp-text-secondary);padding:.75rem;font-size:.9rem}.brand-table tr:hover td{background:var(--bp-bg-tertiary)}.brand-table img{object-fit:contain;border-radius:8px;width:40px;height:40px}.empty{text-align:center;color:var(--bp-text-muted);padding:2rem}.actions{justify-content:center;align-items:center;gap:.75rem;display:flex}.btn-edit,.btn-view,.btn-duplicate,.btn-delete{cursor:pointer;border-radius:6px;padding:.4rem .8rem;font-size:.8rem;transition:all .2s}.btn-edit{background:var(--bp-brand-light);border:1px solid var(--bp-brand);color:var(--bp-brand)}.btn-edit:hover{background:var(--bp-brand);color:#fff}.btn-delete{background:var(--bp-danger-light);border:1px solid var(--bp-danger);color:var(--bp-danger)}.btn-delete:hover{background:var(--bp-danger);color:#fff}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0f172a80;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--bp-bg-primary);width:100%;max-width:420px;box-shadow:var(--bp-shadow-md);border-radius:12px;padding:1.5rem;animation:.3s slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal h3{color:var(--bp-text-primary);margin-bottom:1rem;font-size:1.2rem}.modal form{gap:.75rem;display:grid}.modal input,.modal textarea{border:1px solid var(--bp-border);background:var(--bp-bg-primary);color:var(--bp-text-primary);border-radius:8px;padding:.6rem;font-size:.9rem}.modal input:focus,.modal textarea:focus{border-color:var(--bp-brand);outline:none;box-shadow:0 0 0 2px #3b82f61a}.modal-actions{justify-content:flex-end;gap:.5rem;margin-top:.5rem;display:flex}.btn-save,.btn-cancel{cursor:pointer;border-radius:8px;padding:.5rem 1rem;font-size:.85rem;font-weight:500;transition:all .2s}.btn-save{background:var(--bp-brand);color:#fff;border:none}.btn-save:hover{background:var(--bp-brand-hover)}.btn-cancel{background:var(--bp-bg-tertiary);border:1px solid var(--bp-border);color:var(--bp-text-secondary)}.btn-cancel:hover{background:var(--bp-border)}.image-preview-card{justify-content:center;align-items:center;width:100%;display:flex}.image-preview{border:1px dashed var(--bp-border);border-radius:8px;justify-content:center;margin-top:.5rem;padding:.5rem;display:flex}.image-preview img{object-fit:contain;border-radius:8px;max-width:100%;max-height:140px}@media (max-width:1024px){.brand-page{padding:.5rem}.brand-table th,.brand-table td{padding:.5rem;font-size:.85rem}}@media (max-width:768px){.page-header{flex-direction:column;align-items:flex-start;gap:.6rem}.brand-table{width:100%}.actions{flex-wrap:wrap}.modal{max-width:95%;padding:1rem}}@media (max-width:480px){.brand-page{padding:.3rem}.page-header h2{font-size:1.1rem}.brand-table th,.brand-table td{padding:.4rem;font-size:.75rem}.brand-table img{width:30px;height:30px}.actions{flex-direction:column;gap:.3rem}.actions button{width:100%}.modal{border-radius:8px}.modal-actions{flex-direction:column}.modal-actions button{width:100%}}
