/* ============================================================
   iui-engine.css — scoped styles for the interactive troubleshooter.
   Upload as a Zendesk theme asset and load once (see README).
   Every rule is scoped under .interactive-ui; every custom property
   is --iui-* so nothing leaks into or in from Zendesk's CSS.
   ============================================================ */

.interactive-ui{
  --iui-ink:#1b2030; --iui-muted:#697089; --iui-line:#e3e7f0; --iui-surface:#ffffff;
  --iui-c-start:#6366f1;    --iui-t-start:#eef0ff;
  --iui-c-question:#2563eb; --iui-t-question:#e8f0fe;
  --iui-c-solved:#16a34a;   --iui-t-solved:#e6f7ec;
  --iui-c-fix:#e11d48;      --iui-t-fix:#fdeaef;
  --iui-c:var(--iui-c-question); --iui-tint:var(--iui-t-question);
  --iui-radius:18px;
  --iui-font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei","Noto Sans TC",Roboto,Helvetica,Arial,sans-serif;

  font-family:var(--iui-font); color:var(--iui-ink); line-height:1.5; text-align:left;
  -webkit-font-smoothing:antialiased;
  max-width:560px; margin:24px auto; padding:0 4px;
}
.interactive-ui *,
.interactive-ui *::before,
.interactive-ui *::after{ box-sizing:border-box; }
.interactive-ui h2.iui-h1,
.interactive-ui h3.iui-res-title{ font-family:inherit; }

@media (prefers-color-scheme:dark){
  .interactive-ui{
    --iui-ink:#e9ecf5; --iui-muted:#9aa2bd; --iui-line:#262c3b; --iui-surface:#1a2030;
    --iui-t-start:#23264a; --iui-t-question:#15294f; --iui-t-solved:#10331f; --iui-t-fix:#3a1521;
  }
}

/* header */
.interactive-ui .iui-head{ text-align:center; margin:0 0 22px; }
.interactive-ui .iui-tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  color:var(--iui-c-question); background:var(--iui-t-question);
  padding:4px 11px; border-radius:999px; margin-bottom:10px;
}
.interactive-ui .iui-h1{ font-size:1.35rem; font-weight:700; margin:0 0 4px; letter-spacing:-.01em; }
.interactive-ui .iui-sub{ color:var(--iui-muted); font-size:.86rem; margin:0; }

/* progress trail */
.interactive-ui .iui-trail{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; justify-content:center; }
.interactive-ui .iui-trail:empty{ display:none; }
.interactive-ui .iui-trail .iui-chip{
  font-size:.72rem; padding:4px 10px; border-radius:999px; white-space:nowrap;
  background:var(--iui-surface); border:1px solid var(--iui-line); color:var(--iui-muted);
}
.interactive-ui .iui-trail .iui-chip b{ color:var(--iui-ink); font-weight:600; }

/* card */
.interactive-ui .iui-card{
  position:relative; background:var(--iui-surface); border:1px solid var(--iui-line);
  border-radius:var(--iui-radius); padding:26px 24px 24px;
  box-shadow:0 12px 32px -12px rgba(20,30,60,.22), 0 2px 6px -2px rgba(20,30,60,.08);
  overflow:hidden; animation:iui-rise .22s ease both;
}
.interactive-ui .iui-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--iui-c); }
@keyframes iui-rise{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.interactive-ui .iui-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:700; letter-spacing:.04em;
  padding:4px 11px; border-radius:999px; background:var(--iui-tint); color:var(--iui-c); margin-bottom:14px;
}
.interactive-ui .iui-badge .iui-dot{ width:7px; height:7px; border-radius:50%; background:var(--iui-c); }

/* folded-in action / instruction */
.interactive-ui .iui-instruction{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--iui-tint); border-radius:12px; padding:12px 14px; margin:0 0 16px;
}
.interactive-ui .iui-instruction .iui-ico{
  flex:none; width:26px; height:26px; border-radius:8px; background:var(--iui-c); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.95rem; margin-top:1px;
}
.interactive-ui .iui-instruction .iui-txt{ font-size:.97rem; }
.interactive-ui .iui-instruction .iui-lbl{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--iui-c); margin-bottom:2px; opacity:.85;
}

.interactive-ui .iui-card h2{ font-size:1.4rem; line-height:1.3; margin:0 0 4px; letter-spacing:-.01em; color:var(--iui-ink); }
.interactive-ui .iui-note{ font-size:.9rem; color:var(--iui-muted); margin:8px 0 0; white-space:pre-line; }

/* options */
.interactive-ui .iui-options{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.interactive-ui .iui-option{
  appearance:none; font-family:inherit; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:12px; width:100%; margin:0;
  padding:14px 16px; border-radius:12px;
  background:var(--iui-surface); color:var(--iui-ink); border:1.5px solid var(--iui-line);
  transition:border-color .14s, background .14s, transform .06s, box-shadow .14s;
}
.interactive-ui .iui-option:hover{ border-color:var(--iui-c); background:var(--iui-tint); transform:translateY(-1px);
  box-shadow:0 6px 16px -8px rgba(20,30,60,.3); }
.interactive-ui .iui-option:active{ transform:translateY(0); }
.interactive-ui .iui-option:focus-visible{ outline:2px solid var(--iui-c); outline-offset:2px; }
.interactive-ui .iui-option .iui-body{ flex:1; }
.interactive-ui .iui-option .iui-opt-label{ display:block; font-weight:650; font-size:1.02rem; }
.interactive-ui .iui-option .iui-opt-hint{ display:block; font-size:.8rem; color:var(--iui-muted); margin-top:1px; }
.interactive-ui .iui-option .iui-arrow{ color:var(--iui-c); font-size:1.05rem; opacity:.5; transition:opacity .14s, transform .14s; }
.interactive-ui .iui-option:hover .iui-arrow{ opacity:1; transform:translateX(2px); }

/* reference links */
.interactive-ui .iui-links{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.interactive-ui .iui-link{
  display:flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer;
  padding:10px 12px; border-radius:10px; border:1px solid var(--iui-line);
  background:var(--iui-surface); font-size:.9rem;
  transition:border-color .14s, background .14s, transform .06s;
}
.interactive-ui .iui-link:hover{ border-color:var(--iui-c); background:var(--iui-tint); transform:translateY(-1px); }
.interactive-ui .iui-link-ico{ flex:none; font-size:1.05rem; line-height:1; }
.interactive-ui .iui-link-label{ flex:1; color:var(--iui-ink); }
.interactive-ui .iui-link-ext{ flex:none; color:var(--iui-c); opacity:.55; font-size:.85rem; }
.interactive-ui .iui-res-links{ margin-top:16px; text-align:left; }
.interactive-ui .iui-res-links .iui-links{ margin-top:0; }

/* controls */
.interactive-ui .iui-controls{ display:flex; gap:10px; margin-top:18px; align-items:center; }
.interactive-ui .iui-spacer{ flex:1; }
.interactive-ui .iui-ghost{
  appearance:none; font-family:inherit; font-size:.85rem; cursor:pointer; margin:0;
  padding:9px 14px; border-radius:10px; border:1px solid var(--iui-line);
  background:transparent; color:var(--iui-muted); transition:color .14s, border-color .14s, background .14s;
}
.interactive-ui .iui-ghost:hover:not(:disabled){ color:var(--iui-ink); border-color:var(--iui-muted); }
.interactive-ui .iui-ghost:disabled{ opacity:.4; cursor:not-allowed; }

/* result dialog */
.interactive-ui .iui-dialog{
  border:none; border-radius:var(--iui-radius); padding:0; max-width:400px; width:calc(100% - 32px);
  background:var(--iui-surface); color:var(--iui-ink);
  box-shadow:0 24px 60px -12px rgba(10,15,40,.5);
}
.interactive-ui .iui-dialog::backdrop{ background:rgba(12,16,30,.5); backdrop-filter:blur(3px); }
.interactive-ui .iui-dialog[open]{ animation:iui-pop .2s ease both; }
@keyframes iui-pop{ from{opacity:0; transform:scale(.96);} to{opacity:1; transform:none;} }
.interactive-ui .iui-res{ padding:28px 24px 22px; text-align:center; }
.interactive-ui .iui-res-ico{
  width:58px; height:58px; border-radius:50%; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center; font-size:1.7rem;
  background:var(--iui-tint); color:var(--iui-c);
}
.interactive-ui .iui-res-title{ margin:0 0 8px; font-size:1.25rem; color:var(--iui-c); }
.interactive-ui .iui-res-body{ color:var(--iui-muted); white-space:pre-line; font-size:.95rem; margin:0; }
.interactive-ui .iui-res-foot{ display:flex; gap:10px; margin-top:22px; }
.interactive-ui .iui-res-foot button{ flex:1; }
.interactive-ui .iui-btn-solid{
  appearance:none; font-family:inherit; font-size:.92rem; font-weight:600; cursor:pointer; margin:0;
  padding:11px 14px; border-radius:11px; border:none; background:var(--iui-c); color:#fff;
  transition:filter .14s;
}
.interactive-ui .iui-btn-solid:hover{ filter:brightness(1.07); }

@media (max-width:480px){
  .interactive-ui .iui-card{ padding:22px 18px; }
  .interactive-ui .iui-controls{ flex-direction:column-reverse; align-items:stretch; }
  .interactive-ui .iui-spacer{ display:none; }
  .interactive-ui .iui-ghost{ text-align:center; }
  .interactive-ui .iui-res-foot{ flex-direction:column; }
}