/* Local SVG icons inherit semantic colors from their control. */
:root {
  --icon-color: var(--text-color);
  --icon-muted-color: var(--sub-text-color);
  --icon-accent-color: var(--highlight-text);
  --icon-success-color: var(--success-text);
  --icon-danger-color: var(--error-text);
  --icon-disabled-color: #9ca3af;
  --icon-focus-color: #2f70ad;
  --icon-action-bg: #2f70ad;
}
html[data-theme="dark"] {
  --icon-disabled-color: #666;
  --icon-focus-color: #b1c9e8;
  --icon-action-bg: #3a3a3a;
}
.ui-icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.ui-icon { display: inline-block; width: 20px; height: 20px; flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-icon--sm { width: 18px; height: 18px; }
.ui-icon--lg { width: 24px; height: 24px; }
.ui-icon--hero { width: 52px; height: 52px; stroke-width: 2.25; }
.completion-icon { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin-bottom: 20px; border-radius: 24px; background: var(--highlight-bg); color: var(--icon-accent-color); flex: none; }
.completion-icon--success { background: var(--success-color); color: var(--icon-success-color); }
.btn-restart { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--icon-action-bg); }
.folder-icon { display: inline-flex; margin-right: 10px; color: var(--icon-muted-color); flex: none; }
.folder-header .folder-icon--closed, .folder-header.collapsed .folder-icon--open { display: none; }
.folder-header.collapsed .folder-icon--closed { display: inline-flex; }
.icon-btn, .nav-btn { color: var(--icon-color); }
.nav-btn:disabled { color: var(--icon-disabled-color); }
.icon-btn:hover, .theme-btn:hover { background: var(--bg-color); }
.icon-btn:focus-visible, .nav-btn:focus-visible, .theme-btn:focus-visible,
.btn-drawer-close:focus-visible, .search-btn:focus-visible, .info-icon:focus-visible,
.btn-reset:focus-visible, .btn-restart:focus-visible, .folder-header:focus-visible {
  outline: 2px solid var(--icon-focus-color); outline-offset: 3px;
}
.theme-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-color); color: var(--icon-muted-color); border: 1px solid var(--border-color); position: relative; }
.theme-btn.active { color: var(--icon-accent-color); border-color: var(--icon-accent-color); box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--icon-accent-color); }
.theme-btn.active::after { content: ''; position: absolute; right: 0; bottom: 0; width: 7px; height: 7px; border: 2px solid var(--card-bg); border-radius: 50%; background: var(--icon-accent-color); }
.font-anchor-toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; background: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color); box-shadow: 0 3px 12px var(--shadow-color); font-size: 13px; z-index: var(--z-toast); opacity: 0; pointer-events: none; transition: opacity var(--duration-fast); white-space: nowrap; }
.font-anchor-toast.visible { opacity: 1; }
.font-anchor-toast .ui-icon { color: var(--icon-success-color); }
.score-num { color: var(--icon-accent-color); }
.score-ring-value { stroke: var(--icon-accent-color); }
@media (prefers-reduced-motion: reduce) { .font-anchor-toast { transition: none; } }
body.no-anim .font-anchor-toast { transition: none; }