:root{
    --af-bg: rgba(18,18,26,.96);
    --af-fg: #fff;
    --af-muted: #cfd3dc;
    --af-primary: #ff8a00; /* Shopee-ish orange */
    --af-gradient: linear-gradient(135deg,#ff8a00 0%,#ff5b00 45%,#ff2d00 100%);
}

.af-toast{position:fixed;right:18px;bottom:18px;z-index:1060;display:none;animation:af-pop .35s ease-out both}
@keyframes af-pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

.af-card{
    position:relative;width:min(92vw,380px);border-radius:16px;color:var(--af-fg);
    padding:16px;border:1px solid transparent;
    background:linear-gradient(var(--af-bg),var(--af-bg)) padding-box,var(--af-gradient) border-box;
    box-shadow:0 14px 40px rgba(0,0,0,.35);
}

.af-close{position:absolute;top:8px;right:10px;background:transparent;border:0;color:#fff;opacity:.85;cursor:pointer;font-size:18px;line-height:1}
.af-close:hover{opacity:1;transform:scale(1.05)}

.af-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.af-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:var(--af-gradient);box-shadow:0 6px 16px rgba(255,90,0,.35)}
.af-title{font-weight:700;font-size:16px;letter-spacing:.2px}
.af-pill{
    margin-left:auto;font-size:12px;color:#111;background:#ffe8d1;padding:4px 8px;border-radius:999px;
    border:1px dashed rgba(0,0,0,.12)
}

.af-body{font-size:13.5px;color:var(--af-muted);margin-top:2px}
.af-points{display:flex;gap:10px;margin:8px 0 0 0;padding:0;list-style:none;font-size:12.5px;color:#e7eaef;opacity:.95}
.af-points li{display:flex;gap:6px;align-items:center}
.af-points li::before{content:"✓";font-weight:700;opacity:.9}

.af-actions{display:flex;gap:10px;margin-top:12px}
.af-btn{
    flex:1;padding:12px 14px;border-radius:12px;border:0;cursor:pointer;text-align:center;text-decoration:none;transition:transform .08s ease, box-shadow .2s ease
}
.af-btn-primary{
    background:var(--af-gradient); color:#111; font-weight:800; letter-spacing:.2px;
    box-shadow:0 10px 22px rgba(255,80,0,.35)
}
.af-btn-primary:hover{transform:translateY(-1px)}
.af-btn-ghost{background:transparent;color:#fff;border:1px dashed #ffffff80}
.af-btn-ghost:hover{transform:translateY(-1px);border-style:solid}

.af-safe{margin-top:8px;font-size:11.5px;color:#b9bec9;opacity:.9}

/* light mode adjustment */
@media (prefers-color-scheme:light){
    :root{ --af-bg: rgba(25,25,35,.98); }
}