.scrying-pool.preset-load-dialog { background: var(--sp-surface); color: var(--sp-text-primary); // ── Content wrapper ──────────────────────────────────────────────────── .preset-load-dialog__content { display: flex; flex-direction: column; height: 100%; gap: 0; } // ── Body ────────────────────────────────────────────────────────────── .preset-load-dialog__body { padding: 12px; overflow-y: auto; flex: 1 1 auto; } // ── Empty state ──────────────────────────────────────────────────────── .preset-load-dialog__empty { text-align: center; color: var(--sp-text-muted); font-size: 13px; padding: 24px 0; margin: 0; font-style: italic; } // ── Preset list ──────────────────────────────────────────────────────── .preset-load-dialog__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .preset-load-dialog__item { margin: 0; padding: 0; } .preset-load-dialog__btn { width: 100%; text-align: left; font-size: 13px; padding: 8px 12px; border-radius: 4px; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; display: inline-flex; align-items: center; gap: 8px; i { font-size: 0.85em; opacity: 0.7; flex-shrink: 0; } // Load button — styled as a row item, not a loud primary button &--load { background: var(--sp-surface-elevated, rgba(255,255,255,0.06)); color: var(--sp-text-primary); border: 1px solid var(--sp-border); &:hover { background: var(--sp-accent, #4a6f9c); border-color: var(--sp-accent, #4a6f9c); color: #fff; i { opacity: 1; } } &:active { opacity: 0.85; } } // Cancel button — secondary &--cancel { background: transparent; color: var(--sp-text-muted); border: 1px solid var(--sp-border); &:hover { color: var(--sp-text, inherit); border-color: currentColor; } } } // ── Footer ──────────────────────────────────────────────────────────── .preset-load-dialog__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--sp-border); flex-shrink: 0; } }