/* ============================================================
   Watchpilot · toast.css
   紧急 Toast 通知系统
   (原 main.css 行 1189-1338)
   ============================================================ */

  /* ═══════════════════════ URGENT TOAST ═══════════════════════ */
  .toast-stack {
    position: fixed;
    top: calc(var(--topbar-h) + var(--tabbar-h) + 16px);
    left: calc(var(--sidebar-w) + 32px);
    right: 32px;
    max-width: calc(1280px - 64px);
    z-index: 50;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .urgent-toast {
    pointer-events: auto;
    background: linear-gradient(95deg, var(--urgent-soft) 0%, #fdf4f3 60%, var(--bg-card) 100%);
    border: 1px solid var(--up-line);
    border-left: 4px solid var(--urgent);
    
    padding: 14px 18px;
    box-shadow: 0 14px 32px rgba(201, 42, 42, 0.14), 0 2px 6px rgba(201, 42, 42, 0.08);
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translateY(-12px);
    opacity: 0;
    animation: toast-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  
  .urgent-toast.dismissing {
    animation: toast-out 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
  }
  
  @keyframes toast-in {
    to { transform: translateY(0); opacity: 1; }
  }
  @keyframes toast-out {
    to { transform: translateY(-12px); opacity: 0; }
  }
  
  .urgent-icon {
    width: 38px;
    height: 38px;
    background: var(--urgent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
    font-weight: 800;
    font-family: var(--font-mono);
    line-height: 1;
  }
  
  .urgent-content { flex: 1; min-width: 0; }
  .urgent-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--urgent);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-mono);
  }
  .urgent-msg {
    font-size: 14px;
    color: var(--text-1);
    margin-top: 4px;
    font-weight: 600;
    letter-spacing: -0.1px;
  }
  .urgent-impact {
    font-family: var(--font-mono);
    color: var(--urgent);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  
  .urgent-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  
  .btn {
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--urgent);
    color: white;
    
  }
  .btn-primary:hover {
    background: var(--up-deep);
    transform: translateY(-1px);
    
  }
  .btn-secondary {
    background: var(--bg-card);
    color: var(--urgent);
    border: 1px solid var(--up-line);
  }
  .btn-secondary:hover { background: var(--urgent-soft); }
  .btn-icon {
    background: transparent;
    color: var(--text-3);
    padding: 7px 8px;
    font-size: 14px;
    line-height: 1;
  }
  .btn-icon:hover { color: var(--text-1); background: rgba(0,0,0,0.04); }
  
  /* Trigger button (demo only) */
  .demo-trigger {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--text-1);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
    
    z-index: 100;
    opacity: 0.8;
    transition: opacity 0.15s, transform 0.15s;
  }
  .demo-trigger:hover { opacity: 1; transform: translateY(-2px); }