:root{
  --iu-bg: #141414;
  --iu-bg2: #1c1c1c;
  --iu-line: rgba(255,255,255,.1);
  --iu-txt: #f2f2f2;
  --iu-dim: var(--in-dim, #8a8a8a);
  --iu-red: var(--in-accent, #e92038);
  --iu-rad: 8px;
  --iu-font: var(--pp, 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif);
}

/* ── TOOLTIP ── */
.in-tip{
  position: fixed; left: 0; top: 0; z-index: 2147483000;
  max-width: min(280px, calc(100vw - 12px));
  padding: .45rem .65rem;
  background: #0d0d0d; color: var(--iu-txt);
  border: 1px solid var(--iu-line); border-radius: 6px;
  font: 500 .74rem/1.45 var(--iu-font); letter-spacing: 0; text-transform: none; text-align: left;
  white-space: pre-line; overflow-wrap: anywhere;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .12s ease, visibility 0s linear .12s;
}
.in-tip.is-on{ opacity: 1; visibility: visible; transition: opacity .12s ease; }

/* ── MODAL ── */
html.in-modal-open{ overflow: hidden; }
.in-modal-back{
  position: fixed; inset: 0; z-index: 10200;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem 16px;
  background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: inUiFade .2s ease both;
}
.in-modal{
  position: relative; width: 100%; max-width: 640px; max-height: 88vh; overflow: auto;
  padding: 1.8rem; background: var(--iu-bg); color: var(--iu-txt);
  border: 1px solid var(--iu-line); border-radius: var(--iu-rad);
  font-family: var(--iu-font);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  animation: inUiPop .24s cubic-bezier(.2,.8,.2,1) both;
  outline: none;
}
.in-modal--sm{ max-width: 440px; }
.in-modal--lg{ max-width: 920px; }
.in-modal-title{ font-size: 1.3rem; font-weight: 600; line-height: 1.25; margin: 0 2.2rem 1.1rem 0; color: var(--iu-txt); }
.in-modal-title{ font-family: var(--in-font-display, var(--iu-font)); }
html:has(link[href*="tokens.css"]) .in-modal-title{ font-size: 2rem; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
.in-modal-x{
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--iu-bg2); color: var(--iu-dim); border: 1px solid var(--iu-line); border-radius: 999px;
  font-size: 1rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.in-modal-x:hover, .in-modal-x:focus-visible{ color: var(--iu-red); border-color: rgba(233,32,56,.45); background: rgba(233,32,56,.1); }
@keyframes inUiFade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes inUiPop{ from{ opacity: 0; transform: translateY(8px) scale(.98); } to{ opacity: 1; transform: none; } }

.in-modal--dlg .in-modal-x{ display: none; }
.in-dlg{ text-align: center; }
.in-dlg-ic{
  width: 54px; height: 54px; margin: 0 auto 1rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 1.45rem;
  background: var(--iu-bg2); color: var(--iu-dim);
}
.in-dlg-ic.is-danger{ background: rgba(233,32,56,.12); color: var(--iu-red); }
.in-dlg-title{ font-size: 1.12rem; font-weight: 600; margin: 0 0 .5rem; color: var(--iu-txt); }
.in-dlg-msg{ font-size: .9rem; line-height: 1.5; color: var(--iu-dim); margin: 0 0 1.35rem; white-space: pre-line; }
.in-dlg-input{
  display: block; width: 100%; box-sizing: border-box; margin: 0 0 1.25rem; padding: .7rem .85rem;
  background: #0b0b0b; color: var(--iu-txt); border: 1px solid var(--iu-line); border-radius: var(--iu-rad);
  font: 400 .92rem var(--iu-font);
}
.in-dlg-input:focus{ outline: none; border-color: var(--iu-red); }
.in-dlg-actions{ display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.in-btn{
  min-width: 104px; padding: .68rem 1.1rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--iu-bg2); color: var(--iu-txt); border: 1px solid var(--iu-line); border-radius: var(--iu-rad);
  font: 600 .82rem/1 var(--iu-font); letter-spacing: .01em; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.in-btn:hover{ border-color: rgba(255,255,255,.28); }
.in-btn--primary, .in-btn--danger{ background: var(--iu-red); border-color: var(--iu-red); color: #fff; }
.in-btn--primary:hover, .in-btn--danger:hover{ background: #c81a2f; border-color: #c81a2f; }
.in-btn:focus-visible, .in-modal-x:focus-visible{ outline: 2px solid var(--iu-red); outline-offset: 2px; }

/* ── TOAST ── */
.in-toast{
  position: fixed; top: 1.25rem; left: 50%; z-index: 10300;
  min-width: 260px; max-width: min(460px, calc(100vw - 32px));
  display: flex; align-items: stretch; overflow: hidden;
  background: #121212; color: var(--iu-txt); border: 1px solid var(--iu-line); border-radius: var(--iu-rad);
  box-shadow: 0 14px 40px rgba(0,0,0,.45); font-family: var(--iu-font);
  transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.in-toast.is-on{ transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.in-toast:empty{ display: none; }
.in-toast-ic{
  flex: 0 0 46px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #fff;
  background: var(--in-toast-c, #2563eb);
}
.in-toast.is-ok{ --in-toast-c: #18a06a; }
.in-toast.is-err{ --in-toast-c: var(--iu-red); }
.in-toast.is-warn{ --in-toast-c: #d97706; }
.in-toast.is-info{ --in-toast-c: #2563eb; }
.in-toast-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .2rem; padding: .7rem .95rem; }
.in-toast-t{ font-size: .86rem; font-weight: 600; line-height: 1.3; }
.in-toast-d{ font-size: .74rem; line-height: 1.4; color: var(--iu-dim); }
.in-toast-act{
  align-self: center; margin: 0 .8rem 0 0; padding: .45rem .8rem; flex: 0 0 auto;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 6px;
  font: 600 .74rem var(--iu-font); cursor: pointer;
}
.in-toast-act:hover{ background: #fff; color: #111; }
.in-toast::after{
  content: ""; position: absolute; left: 46px; right: 0; bottom: 0; height: 2px;
  background: var(--in-toast-c, #2563eb); transform-origin: left; transform: scaleX(0);
}
.in-toast.is-on::after{ animation: inUiBar var(--in-toast-ms, 2800ms) linear both; }
@keyframes inUiBar{ from{ transform: scaleX(1); } to{ transform: scaleX(0); } }

@media (max-width: 520px){
  .in-modal{ padding: 1.4rem 1.1rem; }
  .in-dlg-actions .in-btn{ flex: 1 1 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce){
  .in-modal-back, .in-modal{ animation: none; }
  .in-toast, .in-tip{ transition: none; }
  .in-toast.is-on::after{ animation: none; }
}