@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

    .hidden { display: none !important; }


    /* ============================
       ALTIDEAL BRAND SYSTEM
    ============================ */
    :root {
      --navy-midnight: #0A0F2A;
      --navy-royal: #0D1B3D;
      --navy-sapphire: #0F234F;
      --navy-ink: #111827;
      --gold-rich: #C8A44D;
      --gold-royal: #B9912F;
      --gold-antique: #8E6A23;
      --gold-champagne: #E5C97A;
      --gold-light: #F1DA8A;
      --petrol-deep: #0F3A4F;
      --copper-burnt: #B87333;
    }

    body { background: var(--navy-midnight) !important; }

    /* ---- BUTTON HIERARCHY ---- */
    /* Primary CTA: gold gradient, dark text */
    .btn-primary {
      background: linear-gradient(90deg, #8E6A23 0%, #B9912F 60%, #E5C97A 100%);
      color: #0A0F2A;
      font-weight: 800;
      border: none;
      box-shadow: 0 0 0 1px rgba(200,164,77,0.25), 0 4px 12px rgba(0,0,0,0.3);
      transition: all .2s;
    }
    .btn-primary:hover {
      background: linear-gradient(90deg, #B9912F 0%, #C8A44D 50%, #F1DA8A 100%);
      box-shadow: 0 0 0 1px rgba(200,164,77,0.5), 0 6px 20px rgba(0,0,0,0.3);
    }

    /* Secondary: navy fill, gold border hint */
    .btn-secondary {
      background: #0F234F;
      color: #E5E7EB;
      border: 1px solid rgba(200,164,77,0.2);
      font-weight: 700;
      transition: all .2s;
    }
    .btn-secondary:hover {
      background: #123B5D;
      border-color: rgba(200,164,77,0.4);
      box-shadow: 0 0 12px rgba(200,164,77,0.08);
    }

    /* Tertiary: transparent, outline */
    .btn-tertiary {
      background: transparent;
      color: #E5E7EB;
      border: 1px solid #3A3A40;
      font-weight: 700;
      transition: all .2s;
    }
    .btn-tertiary:hover {
      border-color: #9CA3AF;
      background: rgba(15,35,79,0.3);
    }

    /* Danger: burgundy */
    .btn-danger {
      background: #6B1E2C;
      color: #E5E7EB;
      border: 1px solid rgba(107,30,44,0.6);
      font-weight: 700;
      transition: all .2s;
    }
    .btn-danger:hover {
      background: #701F2E;
      border-color: rgba(112,31,46,0.8);
    }

    /* ---- NAV ---- */
    .nav-btn { transition: all 0.2s ease; }
    .nav-btn:hover:not(.active) { background: rgba(15,35,79,0.5); border-color: rgba(200,164,77,0.15); transform: translateY(-1px); }
    .nav-btn.active { background: linear-gradient(90deg, #8E6A23, #B9912F) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(200,164,77,0.3), 0 4px 12px rgba(0,0,0,0.2), 0 0 16px rgba(200,164,77,0.1) !important; transform: translateY(0); }

    /* ---- PANELS ---- */
    .panel {
      border-radius: 1rem;
      border: 1px solid rgba(15,35,79,0.8);
      background: rgba(13,27,61,0.45);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(15,35,79,0.5);
      padding: 12px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .panel:hover {
      border-color: rgba(200,164,77,0.15);
      box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(200,164,77,0.12), 0 0 20px rgba(200,164,77,0.04);
    }
    .panel-inner {
      border-radius: 0.75rem;
      border: 1px solid rgba(15,35,79,0.6);
      background: rgba(10,15,42,0.55);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
      padding: 12px;
      transition: border-color 0.3s ease;
    }

    /* DB items — base colors (layout defined below) */

    /* Upload zone */
    .upload-zone:hover { border-color: var(--gold-rich); background: rgba(200,164,77,.05); }
    .upload-zone.dragover { border-color: var(--gold-rich); background: rgba(200,164,77,.1); }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(15,35,79,0.6); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--gold-antique); }

    /* Minimal UI cosmetics */
    body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }

    /* Pills / badges */
    .pill { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; }
    .pill.ok { background: #145A32; color: #E5E7EB; border: 1px solid rgba(200,164,77,0.25); }
    .pill.warn { background: #9C6B1F; color: #E5E7EB; border: 1px solid rgba(200,164,77,0.25); }
    .pill.onboarding { background: linear-gradient(90deg, #8E6A23 0%, #B9912F 60%, #E5C97A 100%); color: #0A0F2A; }
    .pill.danger { background: #701F2E; color: #E5E7EB; border: 1px solid rgba(112,31,46,0.4); }

    /* Sidebar list items */
    .db-item { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px; border-radius:12px; cursor:pointer; background: rgba(2,6,23,.8); border: 1px solid transparent; transition: all 0.2s ease; }
    .db-item:hover { border-color: rgba(200,164,77,0.2); background: rgba(10,15,42,0.9); transform: translateX(2px); }
    .mini { font-size: 11px; color: rgb(148 163 184); }

    /* KYB/KYS Compliance Ring */
    .kyb-ring { width:56px; height:56px; }
    .kyb-ring circle { fill:none; stroke-width:5; stroke-linecap:round; }
    .kyb-ring .bg { stroke:#0F234F; }
    .kyb-ring .fg { transition: stroke-dashoffset 0.5s ease; }

    /* Document checklist items */
    .doc-check { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:rgba(2,6,23,.6); margin-bottom:4px; font-size:12px; }
    .doc-check .icon { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:900; flex-shrink:0; }
    .doc-check .icon.ok { background:#145A32; color:white; }
    .doc-check .icon.miss { background:#0F234F; color:#9CA3AF; }
    .doc-check .icon.warn { background:#B87333; color:#fff; }
    .doc-check .icon.expired { background:#9B2335; color:#E5E7EB; }

    /* Upload zone */
    .upload-zone { border:2px dashed #1C2540; border-radius:12px; padding:16px; text-align:center; cursor:pointer; transition:all .2s; }
    .upload-zone:hover { border-color:#C8A44D; background:rgba(200,164,77,.05); }
    .upload-zone.dragover { border-color:#C8A44D; background:rgba(200,164,77,.1); }

    /* Spec sheet (print page 3) */
    .spec-sheet { font-size:11px; color:#0f172a; }
    .spec-sheet table { width:100%; border-collapse:collapse; margin-top:12px; }
    .spec-sheet th { background:#f1f5f9; text-align:left; padding:6px 10px; font-size:10px; font-weight:800; text-transform:uppercase; border-bottom:2px solid #0f172a; }
    .spec-sheet td { padding:6px 10px; border-bottom:1px solid #e2e8f0; font-size:11px; }
    .spec-sheet .param { font-weight:700; color:#334155; width:40%; }

    /* ===============================
       A4 PAGE (matches v26 exactly)
    ================================ */
    .page {
      width: 210mm;
      min-height: 297mm;
      background: white;
      box-shadow: 0 15px 35px rgba(0,0,0,0.5);
      position: relative;
      overflow: hidden;
      padding: 15mm;
      margin-bottom: 30px;
      color: #0f172a;
      font-family: 'Inter', sans-serif;
    }

    /* Doc table (v26 style) */
    .doc-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
    .doc-table th { background: #f1f5f9; color: #0f172a; font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 8px 4px; border-bottom: 2px solid #0f172a; text-align: left; }
    .doc-table td { border-bottom: 1px solid #e2e8f0; padding: 8px 4px; font-size: 11px; color: #0f172a; vertical-align: top; }
    .doc-table .total-row td { border-top: 2px solid #0f172a; font-weight: bold; font-size: 14px; color: #0f172a; padding-top: 12px; }
    .vat-row td { border-top: 1px solid #e2e8f0; font-size: 11px; color: #64748b; padding-top: 8px; font-weight: 600; }

    /* Legal T&C two-column (v26 style) */
    .legal-container { column-count: 2; column-gap: 40px; text-align: justify; font-size: 8.5px; line-height: 1.35; color: #0f172a; }
    .legal-container h3 { font-size: 9.5px; font-weight: 900; color: #0f172a; margin-top: 9px; margin-bottom: 2px; text-transform: uppercase; break-after: avoid; }
    .legal-container p { margin-bottom: 7px; }

    /* Stamp overlay fallback */
    .stamp-overlay {
      width: 130px; height: 130px;
      border: 3px double #1e3a8a; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #1e3a8a; font-weight: 900; font-size: 10px; text-align: center;
      transform: rotate(-15deg); opacity: 0.8; pointer-events: none;
    }

    /* ===============================
       PRINT
    ================================ */
    @media print {
      @page { size: A4; margin: 0; }
      body { background: white !important; margin: 0; padding: 0; }
      .no-print { display: none !important; }

      #print-view { display: block !important; }
      #print-view.hidden { display: block !important; }

      .page {
        box-shadow: none;
        box-sizing: border-box;
        overflow: hidden;
        margin: 0;
        width: 210mm;
        height: 297mm;
        padding: 15mm;
      }
      .page.hidden {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
      }
      /* Break before every visible page after the first.
         Hidden pages (display:none) drop out of the print flow,
         so this naturally targets only rendered pages. */
      .page:not(.hidden) ~ .page:not(.hidden) {
        page-break-before: always;
      }
      ::-webkit-scrollbar { display: none; }

      .legal-container h3 { break-after: avoid; page-break-after: avoid; }
      .legal-container p { orphans: 3; widows: 3; }
    }

    /* Status bar */
    .status-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: rgba(2,6,23,0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid rgba(15,35,79,0.6); padding: 6px 16px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
    .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
    .status-dot.online { background: #1E6B3A; }
    .status-dot.offline { background: #ef4444; }

    /* Workflow pipeline */
    .wf-step { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:8px; font-size:10px; font-weight:800; text-transform:uppercase; }
    .wf-step.done { background:#0F3A4F; color:#C8A44D; }
    .wf-step.active { background:linear-gradient(90deg, #8E6A23, #B9912F); color:#fff; animation:pulse-wf 2s infinite; box-shadow: 0 0 8px rgba(200,164,77,0.3); }
    .wf-step.pending { background:#111827; color:#9CA3AF; }
    .wf-step.blocked { background:#701F2E; color:#E5E7EB; }
    .wf-arrow { color:#0F234F; font-size:14px; margin:0 2px; }
    @keyframes pulse-wf { 0%,100%{opacity:1} 50%{opacity:.7} }

    /* Payment milestones */
    .pay-milestone { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:rgba(2,6,23,.6); margin-bottom:4px; font-size:12px; }
    .pay-milestone .dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
    .pay-milestone .dot.received { background:#145A32; }
    .pay-milestone .dot.pending { background:#B9912F; }
    .pay-milestone .dot.overdue { background:#9B2335; }

    /* HS verify badge */
    .hs-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:6px; font-size:10px; font-weight:700; }
    .hs-badge.verified { background:#8E6A2322; color:#C8A44D; border:1px solid #C8A44D44; }
    .hs-badge.unverified { background:#B8733322; color:#B87333; border:1px solid #B8733344; }

    /* Price board */
    .price-row { display:grid; grid-template-columns:1fr 100px 80px 100px; gap:8px; align-items:center; padding:8px 10px; border-radius:10px; background:rgba(2,6,23,.6); margin-bottom:4px; font-size:12px; }
    .price-row:hover { background:rgba(15,35,79,.6); }
    .price-change.up { color:#1E6B3A; } .price-change.down { color:#C43545; } .price-change.flat { color:#64748b; }

    /* Approval log */
    .approval-entry { padding:6px 10px; border-left:3px solid #C8A44D; background:rgba(2,6,23,.6); border-radius:0 8px 8px 0; margin-bottom:4px; font-size:11px; }
    .approval-entry.ceo { border-left-color:#8E6A23; }

    /* Doc tracker badges */
    .doc-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 6px; border-radius:4px; font-size:9px; font-weight:700; }
    .doc-badge.ready { background:#145A3233; color:#1E6B3A; }
    .doc-badge.missing { background:rgba(112,31,46,0.2); color:#701F2E; }
    .doc-badge.uploaded { background:rgba(15,35,79,.4); color:#C8A44D; }

    /* Settings panel */
    .settings-group { border:1px solid #0F234F; border-radius:12px; padding:16px; margin-bottom:12px; }
    .role-pill { display:inline-block; padding:2px 8px; border-radius:9999px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
    .role-pill.owner { background:#1C4E7A; color:#E5C97A; border:1px solid rgba(200,164,77,0.3); }
    .role-pill.admin { background:#1C4E7A; color:#E5C97A; border:1px solid rgba(200,164,77,0.3); }
    .role-pill.manager { background:#B87333; color:#fff; }
    .role-pill.broker { background:#0F234F; color:#fff; }
    .role-pill.viewer { background:#475569; color:#e2e8f0; }
    .team-card { display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid #0F234F; border-radius:12px; background:rgba(10,15,42,.5); }
    .team-card:hover { border-color:#C8A44D44; }
    .team-card .avatar { width:36px; height:36px; border-radius:50%; background:#334155; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#94a3b8; }
    .permission-blocked { opacity:0.4; pointer-events:none; position:relative; }
    .permission-blocked::after { content:'🔒'; position:absolute; top:4px; right:4px; font-size:12px; }
    .settings-label { font-size:11px; color:#94a3b8; font-weight:600; margin-bottom:4px; }

    /* ===============================
       DASHBOARD
    ================================ */
    .dash-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
    .dash-filter input, .dash-filter select { background: #0A0F2A; border: 1px solid #0F234F; border-radius: 8px; padding: 4px 8px; font-size: 11px; color: #E5E7EB; }

    /* ===============================
       LC PIPELINE
    ================================ */
    .lc-stage { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
    .lc-stage.done { background: #0F3A4F; color: #C8A44D; }
    .lc-stage.active { background: linear-gradient(90deg, #8E6A23, #B9912F); color: #fff; animation: pulse-wf 2s infinite; }
    .lc-stage.pending { background: #111827; color: #9CA3AF; }
    .lc-stage.blocked { background: #701F2E; color: #E5E7EB; }
    .lc-arrow { color: #0F234F; font-size: 14px; margin: 0 2px; }

    /* ===============================
       SHIPMENT TRACKING
    ================================ */
    .ship-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; }
    .ship-badge.nominated { background: #0F234F; color: #9CA3AF; border: 1px solid #1C2540; }
    .ship-badge.loaded { background: #123B5D; color: #C8A44D; border: 1px solid #C8A44D44; }
    .ship-badge.in_transit { background: #8E6A2333; color: #E5C97A; border: 1px solid #C8A44D44; animation: pulse-wf 2s infinite; }
    .ship-badge.arrived { background: #145A3233; color: #1E6B3A; border: 1px solid #1E6B3A44; }
    .ship-badge.discharged { background: #145A32; color: #E5E7EB; border: 1px solid #1E6B3A; }
    .ship-badge.completed { background: #0F3A4F; color: #C8A44D; border: 1px solid #C8A44D44; }

    /* ===============================
       SANCTIONS SCREENING
    ================================ */
    .sanctions-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 6px; font-size: 10px; font-weight: 700; }
    .sanctions-badge.clear { background: #145A3233; color: #1E6B3A; border: 1px solid #1E6B3A44; }
    .sanctions-badge.potential { background: #9C6B1F33; color: #E5C97A; border: 1px solid #C8A44D44; }
    .sanctions-badge.match { background: #701F2E; color: #E5E7EB; border: 1px solid rgba(112,31,46,0.6); animation: pulse-wf 2s infinite; }
    .sanctions-badge.screening { background: #0F234F; color: #9CA3AF; border: 1px solid #1C2540; }

    /* ===============================
       BLOTTER & TRADE CARDS
    ================================ */
    .blotter-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
    .blotter-summary .stat { text-align: center; padding: 6px; background: rgba(10,15,42,.8); border-radius: 8px; }
    .blotter-summary .stat-label { font-size: 9px; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.05em; }
    .blotter-summary .stat-value { font-size: 14px; font-weight: 900; }

    /* ===============================
       EMAIL LOG
    ================================ */
    .email-log-entry { padding: 6px 10px; border-left: 3px solid #123B5D; background: rgba(2,6,23,.6); border-radius: 0 8px 8px 0; margin-bottom: 4px; font-size: 11px; }

    /* ===============================
       FORMULATIONS
    ================================ */
    .fm-product-group { border: 1px solid #0F234F; border-radius: 12px; padding: 12px; margin-bottom: 8px; background: rgba(10,15,42,.8); }
    .fm-product-group:hover { border-color: rgba(200,164,77,.25); }
    .fm-product-header { font-size: 12px; font-weight: 900; color: #E5E7EB; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .fm-alt-table { width: 100%; border-collapse: collapse; font-size: 10px; }
    .fm-alt-table th { background: rgba(15,35,79,.4); padding: 4px 8px; text-align: left; font-size: 9px; font-weight: 800; text-transform: uppercase; color: #9CA3AF; border-bottom: 1px solid #1C2540; }
    .fm-alt-table td { padding: 4px 8px; border-bottom: 1px solid rgba(15,35,79,.4); color: #D6D3CE; }
    .fm-alt-table tr:hover { background: rgba(15,35,79,.3); }
    .fm-alt-table tr.selected { background: rgba(200,164,77,.1); outline: 1px solid rgba(200,164,77,.3); }

    /* ===============================
       TYPOGRAPHY POLISH
    ================================ */
    body {
      letter-spacing: -0.01em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    }
    .font-tabular, .price-row, .blotter-summary .stat-value, .pay-milestone {
      font-feature-settings: 'tnum', 'cv02', 'cv03', 'cv04', 'cv11';
      font-variant-numeric: tabular-nums;
    }
    h1, h2, h3, h4, h5, h6 { letter-spacing: -0.025em; }

    /* ===============================
       FORM POLISH
    ================================ */
    input, select, textarea { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
    input:focus, select:focus, textarea:focus {
      outline: none;
      border-color: rgba(200,164,77,0.4) !important;
      box-shadow: 0 0 0 3px rgba(200,164,77,0.1), 0 0 12px rgba(200,164,77,0.06);
    }
    input::placeholder, textarea::placeholder { color: #475569; transition: color 0.2s ease; }
    input:focus::placeholder, textarea:focus::placeholder { color: #64748b; }

    /* Button press feedback */
    .btn-primary:active { transform: scale(0.97); }

    /* ===============================
       VIEW TRANSITIONS
    ================================ */
    .view-section {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.25s ease-out, transform 0.25s ease-out;
    }
    .view-section.view-enter {
      opacity: 1;
      transform: translateY(0);
    }
    .view-section.hidden { display: none !important; }

    /* ===============================
       SKELETON LOADERS
    ================================ */
    @keyframes skeleton-shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .skeleton-line {
      height: 12px;
      border-radius: 6px;
      margin-bottom: 8px;
      background: linear-gradient(90deg, rgba(15,35,79,0.4) 25%, rgba(15,35,79,0.7) 50%, rgba(15,35,79,0.4) 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s ease-in-out infinite;
    }
    .skeleton-line.short { width: 40%; }
    .skeleton-line.medium { width: 70%; }
    .skeleton-line.long { width: 100%; }
    .skeleton-card {
      height: 60px;
      border-radius: 12px;
      margin-bottom: 8px;
      background: linear-gradient(90deg, rgba(15,35,79,0.4) 25%, rgba(15,35,79,0.7) 50%, rgba(15,35,79,0.4) 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s ease-in-out infinite;
    }

    /* ===============================
       TOAST NOTIFICATIONS
    ================================ */
    #toast-container {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
      max-width: 380px;
    }
    .toast {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.4;
      pointer-events: auto;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
      animation: toast-in 0.3s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
      cursor: pointer;
      max-width: 380px;
      word-break: break-word;
    }
    .toast.removing { animation: toast-out 0.25s ease-in forwards; }
    .toast.success { background: rgba(20,90,50,0.85); border: 1px solid rgba(30,107,58,0.5); color: #D1FAE5; }
    .toast.error   { background: rgba(112,31,46,0.85); border: 1px solid rgba(155,35,53,0.5); color: #FEE2E2; }
    .toast.warning { background: rgba(156,107,31,0.85); border: 1px solid rgba(184,134,46,0.5); color: #FEF3C7; }
    .toast.info    { background: rgba(15,35,79,0.85); border: 1px solid rgba(28,78,122,0.5); color: #DBEAFE; }
    .toast-icon { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
    .toast-close { flex-shrink: 0; margin-left: auto; opacity: 0.5; font-size: 16px; cursor: pointer; padding: 0 2px; transition: opacity 0.15s; }
    .toast-close:hover { opacity: 1; }

    @keyframes toast-in {
      0%   { opacity: 0; transform: translateX(40px) scale(0.95); }
      100% { opacity: 1; transform: translateX(0) scale(1); }
    }
    @keyframes toast-out {
      0%   { opacity: 1; transform: translateX(0) scale(1); }
      100% { opacity: 0; transform: translateX(40px) scale(0.95); }
    }