/* One visual language for confirmations, results and transient notifications. */
:root{--notice-surface:#111c2c;--notice-border:#2b3e55;--notice-text:#f1f5fc;--notice-muted:#b7c6da;--notice-blue:#3287ef;--notice-radius:16px}
#custom-modal{--notice-color:#539fff;box-sizing:border-box;align-items:center;justify-content:center;background:#030812b8;padding:24px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#custom-modal[data-notice-kind=success]{--notice-color:#4ed284}
#custom-modal[data-notice-kind=warning]{--notice-color:#ffbc48}
#custom-modal[data-notice-kind=error],#custom-modal[data-notice-kind=danger]{--notice-color:#ff6570}
#custom-modal>.modal-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:100%;min-width:0;max-width:460px!important;max-height:calc(100dvh - 48px);padding:28px 24px 24px!important;border:1px solid var(--notice-border);border-radius:var(--notice-radius);background:var(--notice-surface);box-shadow:0 20px 60px #0006;text-align:center;color:var(--notice-text);overflow-x:hidden;overflow-y:auto;overflow-wrap:anywhere}
#custom-modal .notice-heading{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;flex-shrink:0;gap:14px;padding:0 24px;margin-bottom:18px}
#custom-modal .modal-icon{display:grid;place-items:center;width:46px;height:46px;box-sizing:border-box;margin:0 auto;border:1.5px solid var(--notice-color);border-radius:12px;color:var(--notice-color);background:transparent;animation:none;font-size:24px}
#custom-modal .modal-icon svg{width:26px;height:26px}
#custom-modal .modal-title{min-width:0;max-width:100%;margin:0;color:var(--notice-text);font-size:19px;font-weight:700;line-height:1.45;letter-spacing:-.3px;text-align:center;white-space:normal;overflow-wrap:anywhere}
#custom-modal .notice-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:32px;min-width:32px;height:32px;min-height:32px;padding:6px;border:0;border-radius:8px;background:transparent;color:#a6b8ce;cursor:pointer}
#custom-modal .notice-close svg{width:20px;height:20px;pointer-events:none}
#custom-modal .notice-close:hover{background:#233248;color:#fff}
#custom-modal .modal-msg{min-width:0;min-height:0;overflow:auto;margin:0;color:var(--notice-muted);font-size:14px;line-height:1.7;text-align:center}
#custom-modal .modal-msg p{margin:0 0 12px}
#custom-modal .modal-msg p:last-child{margin-bottom:0}
#custom-modal .modal-msg strong,#custom-modal .modal-msg b{color:var(--notice-text)}
#custom-modal .notice-account{display:inline-flex;align-items:center;gap:9px;max-width:100%;padding:8px 12px;border:1px solid var(--notice-border);border-radius:9px;background:#203249;color:var(--notice-text);font-weight:600;overflow-wrap:anywhere}
#custom-modal .notice-account svg{width:19px;height:19px;flex:0 0 19px;color:#b7c6da}
#custom-modal .modal-msg input,#custom-modal .modal-msg textarea,#custom-modal .modal-msg select{font:inherit;max-width:100%;box-sizing:border-box;text-align:left}
#custom-modal .modal-msg label,#custom-modal .modal-msg ul,#custom-modal .modal-msg ol{display:block;text-align:left}
#custom-modal .modal-btns{display:flex;justify-content:center;flex-shrink:0;flex-wrap:wrap;gap:10px;margin:20px 0 0;padding-top:18px;border-top:1px solid var(--notice-border)}
#custom-modal .modal-btn-act{flex:0 1 auto;min-width:104px;min-height:44px;padding:10px 18px;border:1px solid transparent;border-radius:10px;font:600 14px/1.4 'Be Vietnam Pro',system-ui,sans-serif;box-shadow:none;transition:background 140ms ease,opacity 140ms ease;transform:none}
#custom-modal .btn-m-confirm{background:var(--notice-blue);color:#fff}
#custom-modal .btn-m-confirm:hover{background:#4798fb;filter:none}
#custom-modal .btn-m-danger{background:#e84453;color:#fff}
#custom-modal .btn-m-danger:hover{background:#f05260;filter:none}
#custom-modal .btn-m-cancel{border-color:#4b6480;background:transparent;color:var(--notice-text)}
#custom-modal .btn-m-cancel:hover{background:#1b2b40;filter:none}
#custom-modal button:disabled{opacity:.5;cursor:wait;transform:none;filter:none}
#custom-modal button:focus-visible,#toast.toast-banner button:focus-visible{outline:2px solid #80bdff;outline-offset:3px}
#custom-modal .notice-progress{height:4px;margin-top:18px;overflow:hidden;border-radius:4px;background:#2b3e55}
#custom-modal .notice-progress[hidden]{display:none}
#custom-modal .notice-progress span{display:block;width:40%;height:100%;border-radius:inherit;background:var(--notice-blue);animation:notice-progress 1.3s ease-in-out infinite}
#custom-modal[data-notice-kind=loading] .modal-icon svg{animation:notice-spin 1.5s linear infinite}
@keyframes notice-progress{from{transform:translateX(-100%)}to{transform:translateX(350%)}}
@keyframes notice-spin{to{transform:rotate(360deg)}}
#toast.toast-banner{--notice-color:#539fff;box-sizing:border-box;width:max-content;max-width:min(460px,calc(100vw - 32px));min-height:62px;padding:13px 44px 13px 14px;gap:12px;border:1px solid var(--notice-border);border-radius:12px;background:var(--notice-surface);box-shadow:0 10px 30px #0005;backdrop-filter:none;-webkit-backdrop-filter:none}
#toast.toast-banner[data-kind=success],#toast.toast-banner[data-kind=copy]{--notice-color:#4ed284;background:var(--notice-surface)}
#toast.toast-banner[data-kind=error],#toast.toast-banner[data-kind=delete]{--notice-color:#ff6570;background:var(--notice-surface)}
#toast.toast-banner[data-kind=warning]{--notice-color:#ffbc48;background:var(--notice-surface)}
#toast.toast-banner .toast-banner-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;box-sizing:border-box;padding:0;border:1.5px solid var(--notice-color);border-radius:8px;color:var(--notice-color)}
#toast.toast-banner .toast-banner-icon svg{width:21px;height:21px}
#toast.toast-banner .toast-center-title{font:600 13px/1.6 'Be Vietnam Pro',system-ui,sans-serif;color:var(--notice-text);overflow-wrap:anywhere}
#toast.toast-banner .toast-center-sub{color:var(--notice-muted);font-size:12px}
#toast.toast-banner .toast-delete-close{top:8px;right:7px;width:30px;height:30px;border-radius:7px;color:#a6b8ce}
#toast.toast-banner .toast-center-action-btn{min-height:40px;border:1px solid #4b6480;border-radius:8px;background:transparent;box-shadow:none;color:var(--notice-text)}
#toast.toast-banner .toast-delete-progress{height:2px;opacity:.45}
body:has(#custom-modal.show) :is(#toast.toast-banner,.activity-toast-container){z-index:9998}
.activity-toast-container .activity-toast-item{padding:14px;border:1px solid var(--notice-border);border-radius:12px;background:var(--notice-surface);box-shadow:0 10px 30px #0005;backdrop-filter:none;-webkit-backdrop-filter:none}
.activity-toast-container .activity-toast-body{font-size:13px;line-height:1.65;font-weight:400;color:var(--notice-muted)}
.activity-toast-container .activity-toast-user{background:none;-webkit-text-fill-color:var(--notice-text);color:var(--notice-text);font-weight:600}
.activity-toast-container .activity-toast-acc-preview{border-radius:8px;background:#203249;color:var(--notice-text)}
@media(max-width:600px){
 #custom-modal{padding:16px; padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
 #custom-modal>.modal-card{max-width:420px!important;padding:20px!important;max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
 #custom-modal .notice-heading{gap:12px;padding:8px 20px 0;margin-bottom:16px}
 #custom-modal .modal-icon{width:44px;height:44px;border-radius:11px}
 #custom-modal .modal-title{font-size:17px}
 #custom-modal .notice-close{width:28px;min-width:28px;height:28px;min-height:28px;padding:4px}
 #custom-modal .modal-btn-act{flex:1;min-width:0;min-height:46px;padding:11px 12px}
 #toast.toast-banner{max-width:calc(100vw - 24px);bottom:calc(var(--mobile-nav-height,76px) + max(12px,env(safe-area-inset-bottom)));gap:10px}
}
@media(prefers-reduced-motion:reduce){#custom-modal .notice-progress span,#custom-modal[data-notice-kind=loading] .modal-icon svg{animation:none}#custom-modal .modal-btn-act{transition:none}}