:root{--primary:#172117;--on-primary:#fff;--on-accent:#172117;--soft:#eef0e9}
header{background:var(--paper)}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
#brandLogo{width:48px;height:48px;object-fit:contain;flex-shrink:0}
#brandLogo[hidden],#brandSymbol[hidden]{display:none}
.btn,.sidebar,.hero-art{background:var(--primary);color:var(--on-primary)}
.hero-art:after{color:var(--on-primary)}
#toast{background:var(--primary);color:var(--on-primary)}
.icon-btn{background:var(--soft);color:var(--ink)}
.sidebar .side-link{color:var(--on-primary)}
.btn.accent,.cart-link b{background:var(--lime);color:var(--on-accent)}
.btn.secondary{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.hint,.main-visibility{background:var(--soft);color:var(--ink)}
.branding-settings{max-width:620px}
.branding-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.branding-colors input{height:48px;padding:5px;width:100%;cursor:pointer}
.branding-preview{border:1px solid var(--line);border-radius:16px;overflow:hidden;display:grid;gap:18px;padding:0 16px 18px}
.branding-preview>div{margin:0 -16px;padding:16px;display:flex;align-items:center;gap:12px}
.branding-preview img{width:60px;height:60px;object-fit:contain}
.branding-preview b{padding:12px;border-radius:12px;text-align:center}
.branding-actions{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:600px){#brandLogo{width:34px;height:34px}.brand{font-size:17px}.branding-colors{gap:8px}.branding-colors .label{font-size:13px}}