:root{
    --app-gradient: linear-gradient(135deg, #5f62d8 0%, #5b6ee1 40%, #4f7cff 100%);
    --primary:#5b6ee1;
    --bg:#f6f7fb;
    --card:#ffffff;
    --text:#0f172a;
    --muted:#64748b;

    --success:#22c55e;
    --error:#ef4444;
    --warning:#f59e0b;
    --danger:#dc2626;

    --radius: 18px;
    --shadow: 0 18px 44px rgba(2,8,23,.18);
    --shadow-soft: 0 10px 22px rgba(2,8,23,.10);
    --border: rgba(15, 23, 42, .10);
  }

  /* Overlay */
  .app-alert{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: flex-end; /* mobile: bottom sheet feel */
    justify-content: center;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  }
  .app-alert.show{ display:flex; }

  .app-alert__backdrop{
    position:absolute;
    inset:0;
    background: rgba(2,8,23,.45);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .22s ease;
  }
  .app-alert.show .app-alert__backdrop{ opacity: 1; }

  /* Sheet */
  .app-alert__sheet{
    position: relative;
    width: 100%;
    max-width: 520px;
    background: rgba(255,255,255,.88);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
    overflow: hidden;

    transform: translateY(18px) scale(.98);
    opacity: 0;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
  }
  .app-alert.show .app-alert__sheet{
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  /* Top accent */
  .app-alert__accent{
    height: 6px;
    background: var(--app-gradient);
    opacity: .95;
  }
  .app-alert[data-type="success"] .app-alert__accent{ background: linear-gradient(135deg, #22c55e, #4ade80); }
  .app-alert[data-type="error"]   .app-alert__accent{ background: linear-gradient(135deg, #ef4444, #fb7185); }
  .app-alert[data-type="warning"] .app-alert__accent{ background: linear-gradient(135deg, #f59e0b, #fbbf24); }
  .app-alert[data-type="confirm"] .app-alert__accent{ background: linear-gradient(135deg, #dc2626, #fb7185); }

  .app-alert__body{
    padding: 14px 14px 12px;
    display:flex;
    gap: 12px;
    align-items:flex-start;
  }

  /* Icon capsule */
  .app-alert__icon{
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(255,255,255,.65);
    position: relative;
    overflow:hidden;
  }

  .app-alert__icon::before{
    content:"";
    position:absolute;
    inset:-20px -40px auto auto;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    transform: rotate(12deg);
  }

  .app-alert[data-type="success"] .app-alert__icon{ background: rgba(34,197,94,.14); }
  .app-alert[data-type="error"]   .app-alert__icon{ background: rgba(239,68,68,.14); }
  .app-alert[data-type="warning"] .app-alert__icon{ background: rgba(245,158,11,.14); }
  .app-alert[data-type="confirm"] .app-alert__icon{ background: rgba(220,38,38,.14); }

  .app-alert__icon svg{
    width: 26px;
    height: 26px;
    position: relative;
    z-index: 2;
  }

  /* Text */
  .app-alert__content{ flex:1; min-width:0; }
  .app-alert__title{
    margin: 0;
    font-size: 1.02rem;
    font-weight: 900;
    letter-spacing: .2px;
    color: var(--text);
    line-height: 1.2;
  }
  .app-alert__msg{
    margin: 6px 0 0;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.35;
  }

  /* Buttons */
  .app-alert__actions{
    display:flex;
    gap: 10px;
    padding: 0 14px 14px;
  }

  .app-alert__btn{
    width: 100%;
    border: none;
    border-radius: 16px;
    padding: 12px 14px;
    font-weight: 900;
    font-size: .95rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 8px;
  }

  .btn-ghost{
    background: rgba(15,23,42,.06);
    color: var(--text);
    border: 1px solid rgba(15,23,42,.08);
  }
  .btn-ghost:active{ transform: scale(.99); }

  .btn-primary{
    background: var(--primary);
    color:#fff;
    box-shadow: 0 14px 26px rgba(91,110,225,.24);
  }
  .btn-primary:active{ transform: scale(.99); }

  /* Type-based primary button */
  .app-alert[data-type="success"] .btn-primary{ background: var(--success); box-shadow: 0 14px 26px rgba(34,197,94,.22); }
  .app-alert[data-type="error"]   .btn-primary{ background: var(--error);   box-shadow: 0 14px 26px rgba(239,68,68,.22); }
  .app-alert[data-type="warning"] .btn-primary{ background: var(--warning); box-shadow: 0 14px 26px rgba(245,158,11,.22); }
  .app-alert[data-type="confirm"] .btn-primary{ background: var(--danger);  box-shadow: 0 14px 26px rgba(220,38,38,.22); }

  /* Desktop center modal feel */
  @media (min-width: 768px){
    .app-alert{ align-items: center; padding: 20px; }
    .app-alert__sheet{ max-width: 520px; }
  }

  /* =========================
     UNIQUE ICON ANIMATIONS
     (per type)
  ========================= */

  /* SUCCESS: check draw + bounce */
  .anim-success .check{
    stroke-dasharray: 28;
    stroke-dashoffset: 28;
    animation: draw .55s ease forwards;
  }
  .anim-success{
    animation: pop .35s cubic-bezier(.2,.9,.2,1) both;
  }

  /* ERROR: shake + cross draw */
  .anim-error{
    animation: shake .45s ease both;
  }
  .anim-error .x1, .anim-error .x2{
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: draw .45s ease forwards;
  }

  /* WARNING: wobble triangle + pulse dot */
  .anim-warning{
    animation: wobble .55s ease both;
  }
  .anim-warning .dot{
    animation: pulse .9s ease infinite;
    transform-origin: center;
  }

  /* CONFIRM: trash lid wiggle */
  .anim-confirm .lid{
    transform-origin: 13px 7px;
    animation: lidWiggle .7s ease infinite;
  }
  .anim-confirm{
    animation: pop .35s cubic-bezier(.2,.9,.2,1) both;
  }

  /* ===== SUCCESS CHECK LIKE SWEETALERT (LOOP) ===== */
.anim-success-loop{
  width: 28px;
  height: 28px;
  position: relative;
  z-index: 2;
}

/* jalur check digambar ulang */
.anim-success-loop .sa-check{
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: saCheckDraw 1.15s ease-in-out infinite;
}

/* optional: sedikit “pop” saat selesai */
.anim-success-loop{
  animation: saPop 1.15s cubic-bezier(.2,.9,.2,1) infinite;
  animation-delay: .15s; /* biar sinkron dengan draw */
}

@keyframes saCheckDraw{
  0%   { stroke-dashoffset: 100; opacity: 0; }
  10%  { opacity: 1; }
  55%  { stroke-dashoffset: 0; }
  80%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; } /* reset halus */
}

@keyframes saPop{
  0%   { transform: scale(.92); }
  45%  { transform: scale(1.06); }
  100% { transform: scale(.92); }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .anim-success-loop .sa-check,
  .anim-success-loop{
    animation: none !important;
  }
}


  @keyframes draw{
    to{ stroke-dashoffset: 0; }
  }
  @keyframes pop{
    0%{ transform: scale(.84); }
    70%{ transform: scale(1.06); }
    100%{ transform: scale(1); }
  }
  @keyframes shake{
    0%{ transform: translateX(0); }
    20%{ transform: translateX(-3px); }
    40%{ transform: translateX(3px); }
    60%{ transform: translateX(-2px); }
    80%{ transform: translateX(2px); }
    100%{ transform: translateX(0); }
  }
  @keyframes wobble{
    0%{ transform: rotate(0deg); }
    25%{ transform: rotate(-8deg); }
    50%{ transform: rotate(6deg); }
    75%{ transform: rotate(-3deg); }
    100%{ transform: rotate(0deg); }
  }
  @keyframes pulse{
    0%,100%{ transform: scale(1); opacity: 1; }
    50%{ transform: scale(1.25); opacity: .7; }
  }
  @keyframes lidWiggle{
    0%,100%{ transform: rotate(0deg) translateY(0); }
    40%{ transform: rotate(-10deg) translateY(-1px); }
    80%{ transform: rotate(8deg) translateY(-1px); }
  }