.tz-wrap { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Cairo, Arial, sans-serif; z-index: 999999; }
.tz-dark { --bg:#0f1216; --fg:#fff; --muted:#cbd5e1; --btn:#0ea5e9; --btnfg:#fff; --border:#1f2937; }
.tz-light{ --bg:#ffffff; --fg:#0f172a; --muted:#475569; --btn:#2563eb; --btnfg:#fff; --border:#e5e7eb; }

.tz-btn { background: var(--btn); color: var(--btnfg); padding:.6rem 1rem; border-radius:.6rem; text-decoration:none; font-weight:600; display:inline-block }
.tz-close { background:transparent; border:0; color:var(--muted); font-size:20px; cursor:pointer }

.tz-modal { position: fixed; inset:0; display:flex; align-items:center; justify-content:center; }
.tz-backdrop{ position:absolute; inset:0; background:#0008; }
.tz-dlg { position:relative; background:var(--bg); color:var(--fg); max-width:520px; width:calc(100% - 32px); border-radius:16px; padding:20px; box-shadow:0 10px 40px #0008; border:1px solid var(--border) }
.tz-dlg h3 { margin:.2rem 0 .4rem; font-size:1.35rem }
.tz-sub { color:var(--muted); margin-bottom:.4rem }
.tz-msg { margin:.6rem 0 1rem; line-height:1.6 }
.tz-hero{ width:100%; border-radius:12px; margin-bottom:.6rem }

.tz-banner{ position:fixed; top:0; left:0; right:0; background:var(--bg); color:var(--fg); border-bottom:1px solid var(--border); }
.tz-banner .tz-content{ max-width:1100px; margin:0 auto; padding:.8rem 1rem; display:flex; gap:.8rem; align-items:center }
.tz-banner .tz-img{ width:48px; height:48px; object-fit:cover; border-radius:8px; }
.tz-banner .tz-text{ flex:1; }
.tz-banner .tz-btn{ margin-left:auto }
.tz-banner .tz-close{ margin-left:.6rem }

.tz-toast{ position:fixed; }
.tz-toast.tz-br{ right:16px; bottom:16px; }
.tz-toast.tz-bl{ left:16px; bottom:16px; }
.tz-toast.tz-tr{ right:16px; top:16px; }
.tz-toast.tz-tl{ left:16px; top:16px; }
.tz-toast .tz-card{ background:var(--bg); color:var(--fg); border:1px solid var(--border); border-radius:14px; padding:12px; min-width:280px; max-width:360px; box-shadow:0 10px 30px #0006; display:flex; gap:10px; align-items:flex-start }
.tz-toast .tz-thumb{ width:56px; height:56px; object-fit:cover; border-radius:10px }
.tz-toast .tz-body{ flex:1 }
.tz-toast .tz-ttl{ font-weight:700 }
.tz-toast .tz-sub{ color:var(--muted); margin:.15rem 0 .35rem }
.tz-toast .tz-acts{ display:flex; gap:8px; align-items:center; }