/* ══════════════════════════════════════════════════════════════════════════
   กล่องโต้ตอบกลาง — ใช้แทน alert / confirm / prompt ของเบราว์เซอร์
   ใช้ตัวแปรธีมที่มีทั้งฝั่งเว็บและหลังบ้าน (มี fallback ให้ครบ)
   ══════════════════════════════════════════════════════════════════════════ */

.ui-back {
    position: fixed; inset: 0; z-index: 9500;
    display: grid; place-items: center;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--ink, #07120f) 74%, transparent);
    backdrop-filter: blur(8px);
    animation: ui-fade .2s ease;
}
@keyframes ui-fade { from { opacity: 0; } }

.ui-dialog {
    width: min(460px, 100%);
    background: var(--ink-2, #0b1c18);
    border: 1px solid var(--line-solid, var(--line-2, #1c3630));
    border-radius: var(--radius);
    box-shadow: 0 36px 90px -34px rgba(0, 0, 0, .8);
    padding: 1.8rem;
    text-align: center;
    animation: ui-rise .28s cubic-bezier(.22, 1, .36, 1);
}
@keyframes ui-rise { from { opacity: 0; transform: translateY(16px) scale(.97); } }

.ui-ico {
    width: 54px; height: 54px; margin: 0 auto 1rem;
    border-radius: 50%; display: grid; place-items: center;
    font-size: 1.4rem;
    border: 1px solid color-mix(in srgb, var(--ember, #e8a33d) 45%, transparent);
    background: color-mix(in srgb, var(--ember, #e8a33d) 12%, transparent);
    color: var(--ember, #e8a33d);
}
.ui-dialog.danger .ui-ico {
    border-color: color-mix(in srgb, var(--clay, #c8623c) 50%, transparent);
    background: color-mix(in srgb, var(--clay, #c8623c) 14%, transparent);
    color: var(--clay, #c8623c);
}

.ui-dialog h3 {
    font-family: var(--font-display, serif);
    font-size: 1.35rem; line-height: 1.35;
    color: var(--paper, #f4efe3);
    margin: 0 0 .4rem;
}
.ui-dialog p {
    margin: 0; font-size: .94rem; line-height: 1.7;
    color: var(--mist-dim, #8ba49b);
}

.ui-field { margin-top: 1.2rem; text-align: left; }
.ui-field label {
    display: block; margin-bottom: .35rem;
    font-family: var(--font-meta, sans-serif); font-size: .72rem;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--mist-dim, #8ba49b);
}
.ui-field input {
    width: 100%; padding: .75rem .95rem;
    background: var(--ink, #07120f);
    border: 1px solid var(--line-solid, var(--line-2, #1c3630));
    border-radius: var(--radius-sm);
    color: var(--paper, #f4efe3);
    font-family: var(--font-body, sans-serif); font-size: 1rem;
}
.ui-field input:focus { outline: none; border-color: var(--ember, #e8a33d); }

.ui-actions { display: flex; gap: .6rem; justify-content: center; margin-top: 1.6rem; }
.ui-actions .btn { min-width: 116px; justify-content: center; }
.ui-actions .btn.danger {
    background: var(--clay, #c8623c); border-color: var(--clay, #c8623c); color: #fff;
}
.ui-actions .btn.danger:hover { box-shadow: 0 12px 30px -12px var(--clay, #c8623c); }

@media (max-width: 460px) {
    .ui-actions { flex-direction: column-reverse; }
    .ui-actions .btn { width: 100%; }
}