/* helpDJ — estilos dos componentes. Tudo vem dos tokens; nada de cor fixa. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-slam:cubic-bezier(.34,1.56,.64,1);--dur-1:.12s;--dur-2:.16s;--dur-3:.22s;--beat:.46875s}
.dj-silk{font:500 10.5px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);display:inline-flex;align-items:center;gap:10px}
.dj-silk::before{content:"";width:22px;height:2px;border-radius:1px;background:var(--rule);flex:none}
.dj-silk.lit{color:var(--brand)}.dj-silk.lit::before{background:var(--brand);box-shadow:var(--glow-brand)}
.dj-silk.cue{color:var(--cue)}.dj-silk.cue::before{background:var(--cue-fill);box-shadow:var(--glow-cue)}
.dj-silk.plain::before{display:none}
.dj-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:400 20px/1 var(--font-display);letter-spacing:.01em;text-transform:uppercase;padding:15px 24px 13px;border-radius:var(--radius-md);border:2px solid transparent;cursor:pointer;text-decoration:none;transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background var(--dur-2)}
.dj-btn:hover{transform:translateY(-1px)}.dj-btn:active{transform:translateY(1px)}
.dj-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dj-btn.cue{background:linear-gradient(180deg,var(--cue-hi),var(--cue-fill));color:var(--cue-ink);box-shadow:var(--glow-cue)}
.dj-btn.cue:active{background:var(--cue-lo);color:var(--on-brand)}
.dj-btn.brand{background:var(--brand-press);color:var(--on-brand);box-shadow:var(--glow-brand)}
.dj-btn.brand:hover{background:var(--brand-hi);color:var(--void)}
.dj-btn.brand:active{background:var(--brand-lo)}
.dj-btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink-faint)}
.dj-btn.ghost:hover{background:var(--panel-3)}
.dj-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.dj-btn.sm{font-size:16px;padding:11px 16px 9px;border-radius:var(--radius-sm)}
.dj-chip{--c:var(--ink-faint);display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 11px;border-radius:var(--radius-pill);background:var(--panel);border:1.5px solid var(--c);color:var(--ink);font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.dj-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);flex:none}
.dj-chip.signal{--c:var(--signal)}.dj-chip.warn{--c:var(--warn)}.dj-chip.danger{--c:var(--danger)}.dj-chip.brand{--c:var(--brand)}.dj-chip.cue{--c:var(--cue)}
[data-theme="claro"] .dj-chip::before{box-shadow:none}
.dj-card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--rule);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);padding:var(--space-5);color:var(--ink)}
.dj-card h3{font:400 33px/.96 var(--font-display);text-transform:uppercase;letter-spacing:.005em;margin:10px 0 8px}
.dj-card p{font:400 14px/1.5 var(--font-body);color:var(--ink-dim);margin:0}
.dj-lcd{display:inline-flex;flex-direction:column;gap:6px;background:var(--lcd);border:1px solid var(--rule);border-radius:var(--radius-sm);padding:12px 16px;box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.dj-lcd small{font:500 10px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--lcd-ink);opacity:.8}
.dj-lcd b{font:700 28px/1 var(--font-mono);letter-spacing:.06em;color:var(--lcd-ink);text-shadow:0 0 10px rgba(74,144,255,.55)}
.dj-field{display:flex;flex-direction:column;gap:8px;min-width:240px}
.dj-field label{font:500 10.5px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.dj-field input{font:400 16px/1.2 var(--font-body);color:var(--ink);background:var(--panel);border:1.5px solid var(--ink-faint);border-radius:var(--radius-sm);padding:13px 14px}
.dj-field input::placeholder{color:var(--ink-faint)}
.dj-field input:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--brand)}
.dj-field.err input{border-color:var(--danger)}
.dj-field .msg{font:500 13px/1.4 var(--font-body);color:var(--ink);display:flex;gap:8px;align-items:center}
.dj-field .msg::before{content:"!";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--danger);color:var(--void);font:700 12px/1 var(--font-mono);flex:none}
.dj-stepper{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;font:500 10.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.dj-stepper li{display:flex;align-items:center;gap:10px;flex:none}
.dj-stepper li+li::before{content:"";width:36px;height:2px;background:var(--rule);margin:0 12px;border-radius:1px}
.dj-stepper .n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ink-faint);font:700 13px/1 var(--font-mono);color:var(--ink)}
.dj-stepper .done .n{background:var(--signal);border-color:var(--signal);color:var(--void)}
.dj-stepper .now .n{background:var(--brand-press);border-color:var(--brand-press);color:var(--on-brand);box-shadow:var(--glow-brand)}
.dj-stepper .now{color:var(--ink)}
.dj-eq{display:flex;align-items:flex-end;gap:5px;height:96px}
.dj-eq b{width:12px;border-radius:var(--radius-xs) var(--radius-xs) 0 0;background:linear-gradient(0deg,var(--brand),var(--ink))}
.dj-eq b:nth-child(even){background:linear-gradient(0deg,var(--cue-fill),var(--ink))}
@media (prefers-reduced-motion:no-preference){.dj-eq.live b{animation:dj-eq var(--beat) var(--ease-out) infinite alternate}.dj-eq.live b:nth-child(3n){animation-delay:.12s}.dj-eq.live b:nth-child(3n+1){animation-delay:.24s}}
@keyframes dj-eq{from{transform:scaleY(.55);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
.dj-hud{position:relative}
.dj-hud i{position:absolute;width:28px;height:28px;border:2px solid var(--ink-dim)}
.dj-hud i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.dj-hud i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.dj-hud i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.dj-hud i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}