.web-toast-region{position:fixed;top:88px;right:24px;z-index:2147483647;width:min(400px,calc(100% - 32px));pointer-events:none}
.web-toast{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid transparent;border-left-width:4px;box-shadow:0 12px 28px rgba(15,23,42,.1),0 4px 10px rgba(15,23,42,.04);pointer-events:auto;font-size:12.5px;font-weight:400;animation:web-toast-in .18s ease-out}
.web-toast-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;border-radius:50%;font-weight:600;font-size:13px}
.web-toast-error{background:#fef2f2;border-color:#fecaca;border-left-color:#ef4444;color:#991b1b;box-shadow:0 14px 30px rgba(239,68,68,.16),0 4px 10px rgba(0,0,0,.04)}
.web-toast-error .web-toast-icon{background:#fee2e2;color:#dc2626}
.web-toast-error strong{color:#7f1d1d}
.web-toast-error p{color:#991b1b}
.web-toast-error button{color:#b91c1c}
.web-toast-success{background:#f0fdf4;border-color:#bbf7d0;border-left-color:#10b981;color:#166534;box-shadow:0 14px 30px rgba(16,185,129,.16),0 4px 10px rgba(0,0,0,.04)}
.web-toast-success .web-toast-icon{background:#dcfce7;color:#16a34a}
.web-toast-success strong{color:#14532d}
.web-toast-success p{color:#166534}
.web-toast-success button{color:#15803d}
.web-toast-warning{background:#fffbeb;border-color:#fde68a;border-left-color:#f59e0b;color:#92400e;box-shadow:0 14px 30px rgba(245,158,11,.16),0 4px 10px rgba(0,0,0,.04)}
.web-toast-warning .web-toast-icon{background:#fef3c7;color:#d97706}
.web-toast-warning strong{color:#78350f}
.web-toast-warning p{color:#92400e}
.web-toast-warning button{color:#b45309}
.web-toast-info{background:#f0f9ff;border-color:#bae6fd;border-left-color:#0284c7;color:#075985;box-shadow:0 14px 30px rgba(2,132,199,.16),0 4px 10px rgba(0,0,0,.04)}
.web-toast-info .web-toast-icon{background:#e0f2fe;color:#0284c7}
.web-toast-info strong{color:#0c4a6e}
.web-toast-info p{color:#075985}
.web-toast-info button{color:#0369a1}
.web-toast-content{flex:1;min-width:0;overflow-wrap:anywhere}
.web-toast strong{font-size:13px;font-weight:600;display:block;margin-bottom:2px}
.web-toast p{margin:0;line-height:1.5;font-weight:400;font-size:12.5px;opacity:.92}
.web-toast button{border:0;background:none;cursor:pointer;font-size:20px;line-height:1;min-width:26px;min-height:26px;margin:-2px -4px 0 4px;display:flex;align-items:center;justify-content:center;opacity:.65;transition:opacity .15s}
.web-toast button:hover{opacity:1}
.web-action-dialog,.web-action-dialog *{box-sizing:border-box}
.web-action-dialog{width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 40px);margin:auto;padding:24px;border:1px solid #e5e9ee;border-radius:18px;background:#fff;color:#334155;box-shadow:0 24px 80px rgba(24,37,44,.15);overflow:auto}
.web-action-dialog::backdrop{background:rgba(20,33,44,.45);backdrop-filter:blur(3px)}
.web-action-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.web-action-dialog h2{font-size:18px;line-height:1.4;margin:0;color:#18252c;font-weight:600}
.web-action-dialog header button{border:0;background:none;font-size:24px;color:#64748b;min-width:40px;min-height:40px;cursor:pointer}
.web-action-dialog p{font-size:13.5px;line-height:1.6;font-weight:400;margin:0 0 16px}
.web-action-detail{display:grid;gap:8px;border-top:1px solid #eef1f4;padding-top:16px;margin-bottom:18px;font-size:13px;overflow-wrap:anywhere}
.web-action-detail span{color:#64748b}
.web-action-dialog label{display:grid;gap:8px;font-size:13px;font-weight:500}
.web-action-dialog select{width:100%;min-height:46px;border:1px solid #dce3eb;border-radius:10px;background:#fff;padding:10px;font:inherit}
.web-action-dialog footer{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.web-action-dialog footer button{border:1px solid #dce3eb;border-radius:10px;background:#fff;color:#475569;min-height:42px;padding:10px 16px;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.web-action-dialog footer .web-action-confirm{background:#f2c512;border-color:#f2c512;color:#18252c;font-weight:600}
.web-action-dialog button:disabled{opacity:.5;cursor:not-allowed}
.web-action-dialog :focus-visible,.web-toast :focus-visible{outline:3px solid #c29b20;outline-offset:3px}
@keyframes web-toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){
    .web-toast-region{top:auto;bottom:calc(88px + env(safe-area-inset-bottom));right:16px;left:16px;width:auto}
    .web-action-dialog{padding:20px}
    .web-action-dialog footer button{flex:1}
}
@media(prefers-reduced-motion:reduce){
    .web-toast{animation:none}
}