:root {
  --main-background: #050713;
  --secondary-background: #0b0f19;
  --panel-background: #111827;
  --heading-text: #f9fafb;
  --secondary-head-text: #9ca3af;
  --secondary-text: #d1d5db;
  --primary-border: #2b3442;
  --primary-accent: #F72585;
  --secondary-accent: #a930c1;
  --tertiary-accent: #3e2dad;
  
    /* Toast tokens */
    --toast-bg: #242424; /* dark panel; tweak if needed */
    --toast-border: rgba(255,255,255,0.12);
    --toast-shadow: 0 10px 30px rgba(0,0,0,.45);
    --toast-radius: 14px;
    --toast-gap: 10px;
    --toast-padding: 12px 14px 10px 14px;
    --toast-width: min(420px, 92vw);
    --toast-text: var(--heading-text);
    --toast-subtext: var(--secondary-text);
    --toast-progress: rgba(255,255,255,.22);
  
    --accent-success: #22c55e;
    --accent-info: var(--tertiary-accent);
    --accent-warning: #eab308;
    --accent-error: #ef4444;
  }
  .toast { border-radius: var(--radius-xl); box-shadow: var(--elev-2); }
  .toast__close:focus-visible { outline: 2px solid var(--primary-accent); outline-offset:2px; }


  /* Container pinned top-left with safe areas */
  .toast-container {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    right: calc(env(safe-area-inset-left, 0px) + 16px);
    width: var(--toast-width);
    display: flex;
    flex-direction: column;
    gap: var(--toast-gap);
    z-index: 9999;
    pointer-events: none;
  }
  
  /* A single toast */
  .toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "accent title close"
      "accent meta  close";
    column-gap: 10px;
    row-gap: 4px;
  
    background: var(--toast-bg);
    color: var(--toast-text);
    border: 1px solid var(--toast-border);
    border-radius: var(--toast-radius);
    box-shadow: var(--toast-shadow);
    padding: var(--toast-padding);
    backdrop-filter: blur(4px);
  
    transform: translateY(-6px);
    opacity: 0;
    transition:
      opacity 160ms ease-out,
      transform 160ms ease-out,
      height 160ms ease-out,
      margin 160ms ease-out;
  }
  
  .toast[data-state="enter"] { opacity: 1; transform: translateY(0); }
  .toast[data-state="exit"]  { opacity: 0; transform: translateY(-6px); }
  
  @media (prefers-reduced-motion: reduce) {
    .toast, .toast * { transition: none !important; animation: none !important; }
  }
  
  .toast__accent {
    grid-area: accent;
    width: 4px;
    border-radius: 4px;
    background: var(--accent-info);
  }
  .toast[data-type="success"] .toast__accent { background: var(--accent-success); }
  .toast[data-type="info"]    .toast__accent { background: var(--accent-info); }
  .toast[data-type="warning"] .toast__accent { background: var(--accent-warning); }
  .toast[data-type="error"]   .toast__accent { background: var(--accent-error); }
  
  .toast__title {
    grid-area: title;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--heading-text);
    line-height: 1.35;
  }
  .toast__meta {
    grid-area: meta;
    font-size: 0.82rem;
    color: var(--toast-subtext);
  }
  
  .toast__close {
    grid-area: close;
    align-self: start;
    background: transparent;
    color: var(--secondary-head-text);
    border: none;
    width: 32px; height: 32px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
  }
  .toast__close:hover { background: rgba(255,255,255,0.06); }
  .toast__close:focus-visible {
    outline: 2px solid var(--primary-accent);
    outline-offset: 2px;
  }
  
  /* Progress bar (active toast only) */
  .toast__progress {
    grid-column: 1 / -1;
    height: 3px;
    background: var(--toast-progress);
    border-radius: 0 0 var(--toast-radius) var(--toast-radius);
    overflow: hidden;
    margin: 6px -14px -10px -14px;
  }
  .toast__progress > div {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-accent), var(--secondary-accent));
    transition: width linear;
  }:root {

    /* Toast tokens */
    --toast-bg: #242424; /* dark panel; tweak if needed */
    --toast-border: rgba(255,255,255,0.12);
    --toast-shadow: 0 10px 30px rgba(0,0,0,.45);
    --toast-radius: 14px;
    --toast-gap: 10px;
    --toast-padding: 12px 14px 10px 14px;
    --toast-width: min(420px, 92vw);
    --toast-text: var(--heading-text);
    --toast-subtext: var(--secondary-text);
    --toast-progress: rgba(255,255,255,.22);
  
    --accent-success: #22c55e;
    --accent-info: var(--tertiary-accent);
    --accent-warning: #eab308;
    --accent-error: #ef4444;
  }
  
  /* Container pinned top-left with safe areas */
  .toast-container {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    right: calc(env(safe-area-inset-left, 0px) + 16px);
    width: var(--toast-width);
    display: flex;
    flex-direction: column;
    gap: var(--toast-gap);
    z-index: 9999;
    pointer-events: none;
  }
  
  /* A single toast */
  .toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "accent title close"
      "accent meta  close";
    column-gap: 10px;
    row-gap: 4px;
  
    background: var(--toast-bg);
    color: var(--toast-text);
    border: 1px solid var(--toast-border);
    border-radius: var(--toast-radius);
    box-shadow: var(--toast-shadow);
    padding: var(--toast-padding);
    backdrop-filter: blur(4px);
  
    transform: translateY(-6px);
    opacity: 0;
    transition:
      opacity 160ms ease-out,
      transform 160ms ease-out,
      height 160ms ease-out,
      margin 160ms ease-out;
  }
  
  .toast[data-state="enter"] { opacity: 1; transform: translateY(0); }
  .toast[data-state="exit"]  { opacity: 0; transform: translateY(-6px); }
  
  @media (prefers-reduced-motion: reduce) {
    .toast, .toast * { transition: none !important; animation: none !important; }
  }
  
  .toast__accent {
    grid-area: accent;
    width: 4px;
    border-radius: 4px;
    background: var(--accent-info);
  }
  .toast[data-type="success"] .toast__accent { background: var(--accent-success); }
  .toast[data-type="info"]    .toast__accent { background: var(--accent-info); }
  .toast[data-type="warning"] .toast__accent { background: var(--accent-warning); }
  .toast[data-type="error"]   .toast__accent { background: var(--accent-error); }
  
  .toast__title {
    grid-area: title;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--heading-text);
    line-height: 1.35;
  }
  .toast__meta {
    grid-area: meta;
    font-size: 0.82rem;
    color: var(--toast-subtext);
  }
  
  .toast__close {
    grid-area: close;
    align-self: start;
    background: transparent;
    color: var(--secondary-head-text);
    border: none;
    width: 32px; height: 32px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
  }
  .toast__close:hover { background: rgba(255,255,255,0.06); }
  .toast__close:focus-visible {
    outline: 2px solid var(--primary-accent);
    outline-offset: 2px;
  }
  
  /* Progress bar (active toast only) */
  .toast__progress {
    grid-column: 1 / -1;
    height: 3px;
    background: var(--toast-progress);
    border-radius: 0 0 var(--toast-radius) var(--toast-radius);
    overflow: hidden;
    margin: 6px -14px -10px -14px;
  }
  .toast__progress > div {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-accent), var(--secondary-accent));
    transition: width linear;
  }
  
  /* Focus ring on whole toast when interacting by keyboard */
  .toast:focus-within {
    outline: 2px solid rgba(62,45,173,.6);
    outline-offset: 2px;
  }
  
  /* Utility */
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden; white-space: nowrap;
  }
  
  /* Hide fallback .message block when JS is enabled (optional) */
  .noscript-only { display: none; }
  
  
  /* Focus ring on whole toast when interacting by keyboard */
  .toast:focus-within {
    outline: 2px solid rgba(62,45,173,.6);
    outline-offset: 2px;
  }
  
  /* Utility */
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden; white-space: nowrap;
  }
  
  /* Hide fallback .message block when JS is enabled (optional) */
  .noscript-only { display: none; }