.spod-toast-region {
position: fixed;
top: 1.25rem;
right: 1.25rem;
z-index: 1200;
display: flex;
flex-direction: column;
gap: 0.75rem;
width: min(24rem, calc(100vw - 2rem));
pointer-events: none;
}

.spod-toast {
pointer-events: auto;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.75rem;
align-items: start;
padding: 0.95rem 1rem;
border-radius: 1rem;
border: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-surface) 96%, transparent);
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
transform: translateY(-8px);
opacity: 0;
transition: opacity .22s ease, transform .22s ease;
}

.spod-toast.is-visible {
opacity: 1;
transform: translateY(0);
}

.spod-toast__icon {
width: 2rem;
height: 2rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
font-weight: 700;
color: var(--color-text-white);
}

.spod-toast__body {
min-width: 0;
}

.spod-toast__title {
font-size: 0.92rem;
font-weight: 700;
line-height: 1.25;
color: var(--color-text-primary);
}

.spod-toast__message {
margin-top: 0.2rem;
font-size: 0.86rem;
line-height: 1.45;
color: var(--color-text-secondary);
word-break: break-word;
}

.spod-toast__close {
border: 0;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
font-size: 1rem;
line-height: 1;
padding: 0.15rem;
border-radius: 999px;
transition: background .18s ease, color .18s ease;
}

.spod-toast__close:hover {
background: color-mix(in srgb, var(--color-surface-subtle-active) 80%, transparent);
color: var(--color-text-primary);
}

.spod-toast--success .spod-toast__icon {
background: var(--color-success);
}

.spod-toast--error .spod-toast__icon {
background: var(--color-error);
}

.spod-toast--warning .spod-toast__icon {
background: var(--color-warning);
}

.spod-toast--info .spod-toast__icon {
background: var(--color-info);
}

.spod-modal-backdrop {
position: fixed;
inset: 0;
z-index: 1300;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: rgba(15, 23, 42, 0.48);
backdrop-filter: blur(4px);
}

.spod-modal-backdrop[hidden] {
display: none;
}

.spod-modal {
width: min(30rem, 100%);
border-radius: 1.5rem;
border: 1px solid color-mix(in srgb, var(--color-border) 90%, transparent);
background: color-mix(in srgb, var(--color-surface) 97%, transparent);
box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
overflow: hidden;
}

.spod-modal__header,
.spod-modal__body,
.spod-modal__footer {
padding-left: 1.5rem;
padding-right: 1.5rem;
}

.spod-modal__header {
padding-top: 1.5rem;
}

.spod-modal__title {
font-size: 1.1rem;
font-weight: 800;
color: var(--color-text-primary);
}

.spod-modal__body {
padding-top: 0.75rem;
padding-bottom: 1.25rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--color-text-secondary);
}

.spod-modal__footer {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding-top: 1rem;
padding-bottom: 1.5rem;
background: color-mix(in srgb, var(--color-surface-subtle-active) 55%, transparent);
}

.spod-modal__button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.7rem;
padding: 0.75rem 1rem;
border-radius: 0.9rem;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-primary);
font-size: 0.92rem;
font-weight: 700;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.spod-modal__button:hover {
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
border-color: var(--color-border-strong);
}

.spod-modal__button--confirm {
border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
background: var(--color-primary);
color: var(--color-text-white);
}

.spod-modal__button--confirm:hover {
background: var(--color-primary-hover);
}

.spod-field-error {
margin-top: 0.4rem;
font-size: 0.82rem;
line-height: 1.4;
color: var(--color-error);
}

.spod-input-error,
.spod-input-error:focus {
border-color: var(--color-error) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 14%, transparent) !important;
}

.spod-form-error {
display: none;
margin-top: 0.25rem;
padding: 0.8rem 0.9rem;
border-radius: 0.9rem;
border: 1px solid color-mix(in srgb, var(--color-error) 28%, var(--color-border));
background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
font-size: 0.86rem;
line-height: 1.5;
color: var(--color-error);
}

.spod-form-error.is-visible {
display: block;
}

@media (max-width: 640px) {
  .spod-toast-region {
    left: 1rem;
    right: 1rem;
    width: auto;
  }

  .spod-modal__footer {
    flex-direction: column-reverse;
  }

  .spod-modal__button {
    width: 100%;
  }
}