/* Álom Festő – közös komponens-stílusok. tokens.css után töltődik. */
.af-btn{display:inline-flex;align-items:center;gap:var(--space-3);height:64px;padding:0 var(--space-8);border:0;border-radius:var(--radius-pill);font-family:var(--font-display);font-size:22px;font-weight:800;cursor:pointer;box-shadow:var(--shadow-soft)}
.af-btn:focus-visible,.af-tool:focus-visible,.af-crayon:focus-visible,.af-size:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.af-btn--primary{background:var(--brand-500);color:var(--on-brand);box-shadow:var(--shadow-lift)}
.af-btn--soft{background:var(--surface-soft);color:var(--brand-700)}
.af-btn--back{background:var(--lavender-100);color:var(--lavender-700)}
.af-btn--float{background:var(--surface-card);color:var(--brand-700);height:56px;padding:0 var(--space-6)}
.af-btn .ic{font-size:26px;line-height:1}
.af-toolbar{display:inline-flex;gap:var(--space-3);align-items:center}
.af-tool{width:64px;height:64px;border:0;border-radius:var(--radius-md);background:var(--surface-card);box-shadow:var(--shadow-soft);font-size:32px;cursor:pointer;display:grid;place-items:center}
.af-tool[aria-pressed="true"]{background:var(--brand-500);box-shadow:var(--shadow-lift)}
.af-sizes{display:inline-flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--surface-soft);border-radius:var(--radius-pill)}
.af-size{border:0;background:transparent;padding:0;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;border-radius:50%}
.af-size i{display:block;border-radius:50%;background:var(--brand-500)}
.af-size[aria-pressed="true"]{background:var(--surface-card)}
.af-palette{display:inline-flex;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-4) var(--space-6);background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}
.af-crayon{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);width:64px;padding:var(--space-2) 0;border:0;border-radius:var(--radius-sm);background:transparent;cursor:pointer;font-family:var(--font-body);font-size:15px;font-weight:800;color:var(--ink)}
.af-crayon .stick{width:48px;height:48px;border-radius:50%;box-sizing:border-box;background:var(--c);box-shadow:0 4px 10px rgba(214,31,105,.18)}
.af-crayon[aria-pressed="true"] .stick{box-shadow:0 0 0 4px var(--surface-card),0 0 0 7px var(--brand-900)}
.af-crayon .stick.white{background:var(--crayon-feher);border:3px solid var(--brand-300)}
.af-header{display:flex;align-items:center;gap:var(--space-6);padding:var(--space-4) var(--space-8);background:var(--brand-500);color:var(--on-brand)}
.af-brand{display:flex;align-items:center;gap:var(--space-4)}
.af-logo{width:80px;height:80px;border-radius:var(--radius-md);background:var(--surface-soft);display:grid;place-items:center;font-size:44px}
.af-brand h1{margin:0;font-family:var(--font-display);font-size:40px;line-height:44px;font-weight:800}
.af-brand p{margin:0;font-family:var(--font-body);font-size:20px;font-weight:700}
.af-prompt{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-6) var(--space-2) var(--space-2);background:var(--brand-400);border-radius:var(--radius-pill);color:var(--on-brand);flex:1;max-width:760px}
.af-mic{width:64px;height:64px;border:0;border-radius:50%;background:var(--surface-card);font-size:32px;cursor:pointer;flex:none}
.af-mic[aria-pressed="true"]{animation:afpulse .9s ease-in-out infinite alternate}
@keyframes afpulse{to{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.af-mic[aria-pressed="true"]{animation:none}}
.af-prompt small{display:block;font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.af-prompt strong{display:block;font-family:var(--font-display);font-size:22px;line-height:28px;font-weight:800}
.af-stars{display:flex;gap:var(--space-2);margin-left:auto}
.af-star{width:44px;height:44px;border-radius:50%;background:var(--brand-700);display:grid;place-items:center}
.af-star svg{width:26px;height:26px}
.af-star svg path{fill:none;stroke:var(--brand-300);stroke-width:2}
.af-star.on svg path{fill:var(--star);stroke:var(--star)}
.af-canvas{position:relative;background:var(--surface-card);border:3px solid var(--brand-300);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);display:grid;place-items:center;text-align:center;aspect-ratio:16/5;min-height:220px}
.af-canvas .empty{font-family:var(--font-display);font-size:24px;line-height:32px;font-weight:800;color:var(--brand-700)}
.af-canvas .empty .ic{font-size:72px;display:block;margin-bottom:var(--space-2)}