/* Site-styled message boxes (replace the browser's alert / confirm / prompt) and
   toasts in the same look. Works on every layout: the variables fall back from the
   user/public theme names to the admin theme names. */
:root {
    --dlg-bg: var(--bg-card, var(--card, #141826));
    --dlg-bg2: var(--bg-card-2, var(--card-2, rgba(127,127,127,.12)));
    --dlg-border: var(--border-color, var(--border, rgba(127,127,127,.25)));
    --dlg-text: var(--text-primary, var(--text, #F5F7FA));
    --dlg-text2: var(--text-secondary, var(--text-2, #C3C9D6));
    --dlg-muted: var(--text-muted, var(--muted, #8A93A6));
    --dlg-primary: var(--primary, #3B82FF);
    --dlg-grad: var(--gradient-main, var(--grad, linear-gradient(135deg, #3B82FF, #0500FF)));
    --dlg-danger: var(--danger, #EF4444);
    --dlg-success: var(--success, #22C55E);
    --dlg-warning: var(--warning, #F59E0B);
    --dlg-info: var(--info, #3B82FF);
    --dlg-shadow: 0 24px 64px rgba(0, 0, 0, .45);
}
.tw-dlg-wrap { position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center; padding:1rem;
    background: rgba(4, 4, 10, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity:0; transition: opacity .18s ease; }
.tw-dlg-wrap.show { opacity:1; }
.tw-dlg { width:100%; max-width:440px; background: var(--dlg-bg); color: var(--dlg-text); border:1px solid var(--dlg-border);
    border-radius:22px; padding:1.35rem 1.35rem 1.2rem; box-shadow: var(--dlg-shadow); font-family: var(--font, inherit);
    transform: translateY(10px) scale(.98); transition: transform .18s ease; position:relative; }
.tw-dlg-wrap.show .tw-dlg { transform:none; }
.tw-dlg::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; border-radius:22px 22px 0 0; background: var(--dlg-grad); opacity:.9; }
.tw-dlg.danger::before { background: var(--dlg-danger); }
.tw-dlg-head { display:flex; align-items:center; gap:.85rem; margin-bottom:.9rem; }
.tw-dlg-ic { width:44px; height:44px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
    background: color-mix(in srgb, var(--dlg-primary) 16%, transparent); color: var(--dlg-primary); }
.tw-dlg.danger .tw-dlg-ic { background: color-mix(in srgb, var(--dlg-danger) 16%, transparent); color: var(--dlg-danger); }
.tw-dlg.success .tw-dlg-ic { background: color-mix(in srgb, var(--dlg-success) 16%, transparent); color: var(--dlg-success); }
.tw-dlg.warning .tw-dlg-ic { background: color-mix(in srgb, var(--dlg-warning) 16%, transparent); color: var(--dlg-warning); }
.tw-dlg h3 { margin:0; font-size:1.05rem; font-weight:800; letter-spacing:-.02em; line-height:1.25; color: var(--dlg-text); }
.tw-dlg-body { font-size:.9rem; line-height:1.6; color: var(--dlg-text2); }
.tw-dlg-body p { margin:0 0 .6rem; } .tw-dlg-body p:last-child { margin-bottom:0; }
.tw-dlg-body b { color: var(--dlg-text); }
.tw-dlg-input { display:block; width:100%; margin-top:.9rem; padding:.8rem .95rem; border-radius:13px; border:1px solid var(--dlg-border);
    background: var(--dlg-bg2); color: var(--dlg-text); font: inherit; font-size:16px; outline:none; transition: border-color .15s, box-shadow .15s; }
.tw-dlg-input:focus { border-color: var(--dlg-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dlg-primary) 25%, transparent); }
textarea.tw-dlg-input { min-height:88px; resize:vertical; }
.tw-dlg-hint { margin:.45rem 0 0; font-size:.76rem; color: var(--dlg-muted); }
.tw-dlg-cta { display:flex; gap:.6rem; margin-top:1.2rem; }
.tw-dlg-cta button { flex:1; min-height:46px; padding:.75rem 1rem; border-radius:14px; border:none; font: inherit; font-weight:800; font-size:.9rem;
    cursor:pointer; transition: transform .12s, filter .15s; -webkit-tap-highlight-color: transparent; }
.tw-dlg-cta button:active { transform: scale(.97); }
.tw-dlg-cta .ghost { background: var(--dlg-bg2); color: var(--dlg-text); border:1px solid var(--dlg-border); }
.tw-dlg-cta .go { background: var(--dlg-grad); color:#fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--dlg-primary) 30%, transparent); }
.tw-dlg-cta .go.bad { background: var(--dlg-danger); box-shadow: 0 8px 20px color-mix(in srgb, var(--dlg-danger) 30%, transparent); }
.tw-dlg-cta button:focus-visible { outline:2px solid var(--dlg-primary); outline-offset:2px; }
body.tw-dlg-open { overflow:hidden; }
@media (max-width: 576px) {
    .tw-dlg-wrap { align-items:flex-end; padding:0; }
    .tw-dlg { max-width:100%; border-radius:24px 24px 0 0; border-bottom:none; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); transform: translateY(24px); }
    .tw-dlg::before { border-radius:24px 24px 0 0; }
    .tw-dlg-cta { flex-direction:column-reverse; }
}
@media (prefers-reduced-motion: reduce) { .tw-dlg-wrap, .tw-dlg { transition:none; } }

/* toasts in the same card look */
#toast-container > div { background-color: var(--dlg-bg) !important; color: var(--dlg-text) !important; border:1px solid var(--dlg-border);
    border-left:4px solid var(--dlg-primary); border-radius:14px !important; box-shadow: var(--dlg-shadow) !important; opacity:1 !important;
    font-family: var(--font, inherit); font-size:.86rem; line-height:1.5; padding:.85rem 1.1rem .85rem 3.1rem; background-position: .95rem center; }
#toast-container > .toast-success { border-left-color: var(--dlg-success); }
#toast-container > .toast-error { border-left-color: var(--dlg-danger); }
#toast-container > .toast-warning { border-left-color: var(--dlg-warning); }
#toast-container > .toast-info { border-left-color: var(--dlg-info); }
#toast-container > div .toast-title { color: var(--dlg-text); font-weight:800; }
#toast-container > div .toast-message { color: var(--dlg-text2); }
#toast-container > div .toast-close-button { color: var(--dlg-muted); text-shadow:none; opacity:1; }
#toast-container > div .toast-progress { background: var(--dlg-primary); opacity:.6; }
@media (max-width: 600px) {
    #toast-container.toast-top-right { left:10px !important; right:10px !important; top: calc(env(safe-area-inset-top, 0px) + 10px); }
    #toast-container > div { width:auto !important; margin-bottom:8px; }
}