/* Eto notification bar: one stack at the top of the page, drops in, dismissable, auto-clears.
   Reads the app theme tokens with fallbacks so it works on any page, light or dark. */
.eto-notify-stack { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 12000; display: flex; flex-direction: column; gap: 8px; width: min(480px, calc(100vw - 24px)); pointer-events: none; }
.eto-notify {
  --n-bg: var(--surface-1, #fff); --n-text: var(--text, #0a0a0a); --n-muted: var(--muted, rgba(10, 10, 10, 0.7));
  --n-ring: var(--ring, #c8c8ce); --n-edge: var(--text, #0a0a0a);
  pointer-events: auto; display: grid; grid-template-columns: 18px minmax(0, 1fr) 24px; gap: 10px; align-items: start;
  padding: 11px 12px 11px 14px; border: 1px solid var(--n-ring); border-radius: 4px; background: var(--n-bg); color: var(--n-text);
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.12), 0 1px 2px rgba(10, 10, 10, 0.06);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 13px; line-height: 1.45;
  opacity: 0; transform: translateY(-12px); transition: opacity 160ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.eto-notify.is-in { opacity: 1; transform: translateY(0); }
.eto-notify.is-out { opacity: 0; transform: translateY(-8px); }
.eto-notify--success { --n-edge: #1a6e45; }
.eto-notify--error { --n-edge: #9f2d1f; }
.eto-notify--warning { --n-edge: #a8500f; }
.eto-notify--info { --n-edge: #2c58a8; }
.eto-notify__icon { width: 18px; height: 18px; margin-top: 1px; color: var(--n-edge); }
.eto-notify__icon svg { width: 18px; height: 18px; display: block; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.eto-notify__title { font-weight: 500; color: var(--n-text); margin-bottom: 1px; }
.eto-notify__message { color: var(--n-muted); overflow-wrap: anywhere; }
.eto-notify__title + .eto-notify__message { margin-top: 1px; }
/* Recognisable at rest: the dismiss control carries its hairline before the
   pointer arrives, so it reads as a button and not as a stray glyph. Hover
   only deepens it (surface tint + ink edge); it never introduces the box. */
.eto-notify__close { width: 24px; height: 24px; margin: -3px -3px 0 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--n-ring); border-radius: 4px; background: transparent; color: var(--n-muted); cursor: pointer; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; }
.eto-notify__close:hover { color: var(--n-text); background: var(--surface-2, #f5f5f5); border-color: var(--n-text); }
.eto-notify__close:focus-visible { outline: none; border-color: var(--n-text); box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.14); }
.eto-notify__close svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; }
.eto-notify__bar { grid-column: 1 / -1; height: 2px; margin: 6px 0 -5px; background: var(--border, #e1e1e5); border-radius: 1px; overflow: hidden; }
.eto-notify__bar > i { display: block; height: 100%; width: 100%; background: var(--n-edge); opacity: 0.55; transform-origin: left; animation: eto-notify-drain var(--n-ms, 5000ms) linear forwards; }
.eto-notify:hover .eto-notify__bar > i { animation-play-state: paused; }
@keyframes eto-notify-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
html:not([data-theme="light"]) .eto-notify { --n-bg: var(--surface-1, #1a1b1e); --n-text: var(--text, #f4f4f5); --n-muted: var(--muted, rgba(244, 244, 245, 0.8)); --n-ring: var(--ring, #3b3c43); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
html:not([data-theme="light"]) .eto-notify__close:focus-visible { box-shadow: 0 0 0 3px rgba(244, 244, 245, 0.18); }
html:not([data-theme="light"]) .eto-notify--success { --n-edge: #83dfab; }
html:not([data-theme="light"]) .eto-notify--error { --n-edge: #f8a69c; }
html:not([data-theme="light"]) .eto-notify--warning { --n-edge: #f6b98b; }
html:not([data-theme="light"]) .eto-notify--info { --n-edge: #b3ccf6; }
@media (prefers-reduced-motion: reduce) { .eto-notify { transition: none; } .eto-notify__bar > i { animation: none; } }
/* Above everything: modals on the page sit at z-index 50 to 200, menus at 11000. */
.eto-notify-stack { z-index: 2147483000; }
.eto-confirm { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }
.eto-confirm__scrim { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.32); opacity: 0; transition: opacity 140ms ease; }
.eto-confirm__box { position: relative; width: min(420px, 100%); padding: 18px 18px 16px; border: 1px solid var(--ring, #c8c8ce); border-radius: 4px; background: var(--surface-1, #fff); color: var(--text, #0a0a0a); box-shadow: 0 16px 40px rgba(10, 10, 10, 0.16); opacity: 0; transform: translateY(6px) scale(0.985); transition: opacity 140ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 140ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.eto-confirm.is-in .eto-confirm__scrim { opacity: 1; }
.eto-confirm.is-in .eto-confirm__box { opacity: 1; transform: none; }
.eto-confirm__title { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.eto-confirm__message { font-size: 13.5px; line-height: 1.5; color: var(--muted, rgba(10, 10, 10, 0.7)); }
.eto-confirm__actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 16px; }
.eto-confirm__btn { height: 32px; padding: 0 14px; border: 1px solid var(--ring, #c8c8ce); border-radius: 4px; background: var(--bg, #fff); color: var(--text, #0a0a0a); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease; }
.eto-confirm__btn:hover { background: var(--surface-2, #f5f5f5); border-color: var(--text, #0a0a0a); }
.eto-confirm__btn:focus-visible { outline: none; border-color: var(--text, #0a0a0a); box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.16); }
.eto-confirm__btn--ok { background: var(--text, #0a0a0a); color: var(--bg, #fff); border-color: var(--text, #0a0a0a); }
.eto-confirm__btn--ok:hover { background: var(--text, #0a0a0a); opacity: 0.9; }
.eto-confirm__btn--ok.is-danger { background: #9f2d1f; border-color: #9f2d1f; color: #fff; }
html:not([data-theme="light"]) .eto-confirm__scrim { background: rgba(0, 0, 0, 0.6); }
html:not([data-theme="light"]) .eto-confirm__box { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
html:not([data-theme="light"]) .eto-confirm__btn:focus-visible { box-shadow: 0 0 0 3px rgba(244, 244, 245, 0.18); }
html:not([data-theme="light"]) .eto-confirm__btn--ok.is-danger { background: #f8a69c; border-color: #f8a69c; color: #161719; }