/* ---------- Dialog ---------- */
.sp-dialog__scrim { position: fixed; inset: 0; background: var(--surface-scrim); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: var(--space-8); z-index: 60; animation: sp-fade var(--duration-fast) var(--ease-express); }
.sp-dialog { width: 100%; background: var(--paper-000); border-radius: var(--radius-sheet); box-shadow: var(--shadow-4); overflow: hidden; animation: sp-rise var(--duration-base) var(--ease-express); }
.sp-dialog--sm { max-width: 420px; }
.sp-dialog--md { max-width: 560px; }
.sp-dialog--lg { max-width: 760px; }
.sp-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); padding: var(--space-7) var(--space-7) var(--space-5); }
.sp-dialog__title { font: var(--text-heading-m); letter-spacing: var(--tracking-heading); color: var(--text-strong); margin: 0; }
.sp-dialog__sub { font: var(--text-body-s); color: var(--text-muted); margin: 4px 0 0; }
.sp-dialog__body { padding: 0 var(--space-7) var(--space-7); }
.sp-dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-4); padding: var(--space-6) var(--space-7); background: var(--paper-050); border-top: 1px solid var(--border-hairline); }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-rise { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }

/* ---------- Toast ---------- */
.sp-toast { display: flex; align-items: flex-start; gap: var(--space-5); min-width: 300px; max-width: 440px; padding: 13px 14px; background: var(--ink-900); color: var(--paper-050); border-radius: var(--radius-md); box-shadow: var(--shadow-3); animation: sp-rise var(--duration-base) var(--ease-express); }
.sp-toast__dot { width: 8px; height: 8px; border-radius: var(--radius-full); margin-top: 6px; flex: none; }
.sp-toast__title { font: var(--text-label); color: #fff; }
.sp-toast__body { font: var(--text-body-s); color: var(--ink-300); margin-top: 2px; }
.sp-toast__action { appearance: none; background: none; border: 0; padding: 0; margin-top: 7px; font: var(--text-label); color: var(--volt-500); cursor: pointer; }
.sp-toast__action:hover { text-decoration: underline; }
.sp-toast__close { appearance: none; background: none; border: 0; color: var(--ink-400); cursor: pointer; padding: 2px; border-radius: var(--radius-xs); }
.sp-toast__close:hover { color: #fff; background: rgba(255,255,255,0.1); }
.sp-toast-stack { position: fixed; right: var(--space-8); bottom: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); z-index: 70; }

/* ---------- Tooltip ---------- */
.sp-tip { position: relative; display: inline-flex; }
.sp-tip__bubble { position: absolute; z-index: 80; padding: 6px 9px; background: var(--ink-900); color: #fff; font: var(--text-caption); font-weight: 500; border-radius: var(--radius-sm); box-shadow: var(--shadow-3); white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity var(--duration-fast) var(--ease-express), transform var(--duration-fast) var(--ease-express); }
.sp-tip:hover .sp-tip__bubble, .sp-tip:focus-within .sp-tip__bubble { opacity: 1; transform: none; }
.sp-tip__bubble--top { bottom: calc(100% + 7px); left: 50%; translate: -50% 0; }
.sp-tip__bubble--bottom { top: calc(100% + 7px); left: 50%; translate: -50% 0; }
.sp-tip__bubble--right { left: calc(100% + 7px); top: 50%; translate: 0 -50%; }
.sp-tip__bubble--left { right: calc(100% + 7px); top: 50%; translate: 0 -50%; }
.sp-tip__key { font: var(--text-mono-s); color: var(--ink-300); margin-left: 6px; }