:root {
  --bg: #0f1320;
  --side: #111729;
  --panel: #1b2232;
  --panel2: #222b3d;
  --line: #30405a;
  --text: #f2f5fb;
  --muted: #a7b2c6;
  --violet: #8396ff;
  --gold: #62ddc3;
}

.ambient-a { background: #4268db30; }
.ambient-b { background: #20c9b324; }
.sidebar { background: linear-gradient(170deg, #141b2f, #0e1320 70%); border-color: #2a3851; }
.nav-link.active, .nav-link:hover { background: #263961; color: #fff; }
.nav-link.active { box-shadow: inset 3px 0 #80a0ff; }
.nav-icon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(145deg, #344d86, #22355f); border: 1px solid #5470a2; color: #d9e4ff; box-shadow: inset 0 1px #ffffff2b, 0 3px 8px #07111f66; font-size: 15px; }
.nav-link.active .nav-icon { background: linear-gradient(145deg, #5c7ee9, #344fc2); border-color: #829eff; color: #fff; }
.sidebar-bottom { background: linear-gradient(130deg, #21394d, #1b293b); border-color: #3b6079; }
.sidebar-bottom:after { background: #4bc8d43d; }
.hero-logo { filter: drop-shadow(0 20px 25px #020c244d); }
.hero h1 em { background: linear-gradient(95deg, #95aeff, #62ddc3); -webkit-background-clip: text; background-clip: text; }
.panel { background: linear-gradient(150deg, #1b2435, #171e2c); border-color: #304159; }
.panel-heading, .preview-heading { border-color: #304159; }
.panel-symbol { background: linear-gradient(145deg, #3e5fa3, #263d70); border-color: #6b8ac4; color: #eff5ff; box-shadow: inset 0 1px #ffffff38, inset 0 -2px #0d214a88, 0 5px 12px #0813245c; }
.section-badge { color: #b4ccff; border-color: #3d5682; background: #202e4d; }
.segmented, .text-input, .hex-input, .color-picker { background-color: #111826; border-color: #344760; }
.style-btn.selected { background: #506dda; box-shadow: 0 2px 10px #506dd866; }
.text-input:focus, .hex-input:focus { border-color: #7e9cff; box-shadow: 0 0 0 3px #7e9cff25; }
.icon-btn, .button-secondary { background: #27334a; border-color: #425672; }
.icon-btn:hover { background: #334566; }
.button-primary { background: linear-gradient(110deg, #7291ff, #68dec4); color: #0b1a2a; box-shadow: 0 5px 22px #5c8ce33d; }
.insight-card { background: #1d3040; border-color: #326476; color: #9be8d8; }
.insight-card p { color: #b0c8d1; }
.palette-card { background: #1b2435; border-color: #304159; }
.palette-card:hover { border-color: #7b9df5; }
.toast { background: #bbf4e9; color: #0d2d34; }

/* Os símbolos das ferramentas já trazem o próprio acabamento em PNG. */
.nav-icon, .nav-link.active .nav-icon { display: block; width: 30px; height: 30px; flex: 0 0 30px; padding: 0; object-fit: contain; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.panel-symbol, .panel-symbol.small { display: block; padding: 0; object-fit: contain; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 720px) { .nav-icon, .nav-link.active .nav-icon { width: 24px; height: 24px; flex-basis: 24px; } }