.diw{
  --bg:#ffffff; --fg:#0f172a; --muted:#64748b; --border:rgba(0,0,0,.12); --field:#f9fafb;
  --shadow:0 12px 30px rgba(0,0,0,.07); --ring:rgba(59,130,246,.12); --tab:#eef2ff; --tabfg:#1e293b;
  --ok:#10b981; --warn:#f59e0b; --bad:#ef4444;
  max-width:720px;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:14px;background:var(--bg);
  box-shadow:var(--shadow);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;overflow:hidden;position:relative
}
.diw.diw--dark{
  --bg:#0b1220; --fg:#e5e7eb; --muted:#94a3b8; --border:rgba(255,255,255,.14); --field:#0f172a;
  --shadow:0 18px 38px rgba(0,0,0,.45); --ring:rgba(59,130,246,.18); --tab:#111c33; --tabfg:#e5e7eb;
  border:1px solid rgba(255,255,255,.10)
}
.diw__theme{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:10px;border:1px solid var(--border);background:transparent;cursor:pointer}
.diw__theme:hover{filter:brightness(1.06)}
.diw__theme svg{width:16px;height:16px;fill:none;stroke:var(--fg);stroke-width:2;opacity:.85}
.diw__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;padding-right:40px}
.diw__title{font-size:14px;font-weight:900;letter-spacing:.2px;margin:0;color:var(--fg)}
.diw__badge{display:inline-flex;gap:7px;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(16,185,129,.10);color:#065f46;font-size:12px;font-weight:800;white-space:nowrap}
.diw.diw--dark .diw__badge{background:rgba(16,185,129,.14);color:#a7f3d0}
.diw__dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(16,185,129,.14)}
.diw__row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0 12px}
.diw__input{flex:1 1 260px;min-width:220px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;font-size:14px;background:var(--field);color:var(--fg);outline:none}
.diw__input::placeholder{color:var(--muted)}
.diw__input:focus{border-color:rgba(59,130,246,.55);box-shadow:0 0 0 4px var(--ring);background:var(--bg)}
.diw__btn{border:1px solid var(--border);background:linear-gradient(135deg, rgba(59,130,246,.14), rgba(59,130,246,.02));border-radius:12px;padding:10px 12px;font-size:13px;font-weight:900;color:var(--fg);cursor:pointer}
.diw__btn:hover{filter:brightness(1.04)}
.diw__btn:disabled{opacity:.6;cursor:not-allowed}
.diw__hint{font-size:12px;color:var(--muted);margin-top:-6px}
.diw__tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 8px}
.diw__tab{border:1px solid var(--border);background:var(--tab);color:var(--tabfg);border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900;cursor:pointer;user-select:none}
.diw__tab[aria-selected='true']{outline:none;box-shadow:0 0 0 4px var(--ring)}
.diw__panel{display:none}
.diw__panel.is-active{display:block}
.diw__card{margin-top:8px;border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:12px;background:linear-gradient(135deg, rgba(241,245,249,.9), rgba(255,255,255,1))}
.diw.diw--dark .diw__card{border:1px solid rgba(255,255,255,.10);background:linear-gradient(135deg,#0f172a,#0b1220)}
.diw__grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width: 720px){ .diw__grid{grid-template-columns:1fr 1fr;} }
.diw__kv{border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:10px;background:rgba(255,255,255,.55)}
.diw.diw--dark .diw__kv{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.diw__k{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.3px}
.diw__v{margin-top:6px;font-size:13px;color:var(--fg);font-weight:800;word-break:break-word}
.diw__mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;font-weight:700}
.diw__small{font-size:12px;color:var(--muted)}
.diw__err{border-left:4px solid var(--bad);padding:10px 12px;border-radius:12px;background:rgba(239,68,68,.08);color:var(--fg);font-weight:800}
.diw__ok{border-left:4px solid var(--ok);padding:10px 12px;border-radius:12px;background:rgba(16,185,129,.10);color:var(--fg);font-weight:800}
.diw__warn{border-left:4px solid var(--warn);padding:10px 12px;border-radius:12px;background:rgba(245,158,11,.10);color:var(--fg);font-weight:800}
.diw__preview{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:12px;background:rgba(255,255,255,.55)}
.diw.diw--dark .diw__preview{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.diw__gtitle{font-size:16px;font-weight:900;color:#1d4ed8;margin:0 0 4px}
.diw__gurl{font-size:12px;color:var(--muted);margin:0 0 8px}
.diw__gdesc{font-size:13px;color:var(--fg);margin:0;opacity:.9}