#brands-view { min-width: 0; }
#brands-view .brand-hint, #brands-view #brandCount { color: var(--muted); font-size: 12px; }
.brand-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:24px 0 16px; }
.brand-toolbar input { width:min(360px,100%); height:38px; padding:8px 12px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--ink); }
.brand-list-table { background:var(--surface); border:1px solid var(--line); border-radius:8px; }
.brand-list-table td { padding:15px 12px; vertical-align:middle; }
.brand-list-table td strong { color:var(--ink); }
.brand-empty { text-align:center; color:var(--muted); padding:48px !important; }
.brand-attribute { display:inline-flex; padding:4px 9px; border-radius:999px; font-size:12px; font-weight:700; background:var(--brand-soft); color:var(--brand); }
.brand-attribute-r { background:#dcfce7; color:#166534; }.brand-attribute-tm { background:#fef3c7; color:#92400e; }.brand-attribute-bg { background:#dbeafe; color:#1d4ed8; }
#brandDialog { width:min(620px,calc(100vw - 32px)); border:1px solid var(--line); border-radius:12px; padding:0; background:var(--surface); color:var(--ink); }
#brandDialog::backdrop { background:rgba(15,23,42,.45); }
#brandDialog form { padding:24px; }.dialog-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }.dialog-heading h3 { margin:0; }
.brand-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px; }.brand-fields label { display:flex; flex-direction:column; gap:7px; color:var(--muted); font-size:12px; }.brand-fields input,.brand-fields select { height:38px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); color:var(--ink); font:inherit; }.required { color:#dc2626; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }.text-button { border:0; background:transparent; padding:8px; cursor:pointer; color:var(--brand); }.danger-text { color:#dc2626; }
@media(max-width:650px){.brand-toolbar{align-items:stretch; flex-direction:column}.brand-toolbar input{width:100%}.brand-fields{grid-template-columns:1fr}#brands-view .table-wrap{overflow-x:auto}}