#te-webtools { --wt-ink:#12263f; --wt-muted:#50647a; --wt-blue:#175ba8; --wt-line:#d6e1ed; color-scheme:light; color:var(--wt-ink); background:#f3f7fb; font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; border:1px solid var(--wt-line); border-radius:18px; overflow:hidden; margin:20px 0 36px; text-align:left; }
#te-webtools *, #te-webtools *::before, #te-webtools *::after { box-sizing:border-box; }
#te-webtools [hidden] { display:none!important; }
#te-webtools .wt-intro { padding:clamp(24px,4vw,48px); color:#fff; background:linear-gradient(120deg,#0a1e35,#153f65); }
#te-webtools .wt-kicker { display:block; color:#9ddaff; font-size:12px; letter-spacing:.12em; font-weight:750; text-transform:uppercase; margin-bottom:10px; }
#te-webtools h2 { color:inherit; font-size:clamp(27px,3vw,38px); line-height:1.15; margin:0 0 14px; font-weight:750; letter-spacing:-.025em; }
#te-webtools h3 { color:var(--wt-ink); font-size:24px; line-height:1.25; margin:0 0 12px; font-weight:750; }
#te-webtools h4 { color:var(--wt-ink); font-size:17px; margin:0 0 12px; font-weight:700; }
#te-webtools p { margin:0 0 16px; font:inherit; }
#te-webtools .wt-intro p { color:#dfebf7; max-width:760px; margin-bottom:14px; }
#te-webtools .wt-intro .wt-small { color:#b6ccdf; font-size:13px; margin:0; }
#te-webtools .wt-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:16px clamp(16px,3vw,32px); border-bottom:1px solid var(--wt-line); background:#fff; }
#te-webtools button, #te-webtools input, #te-webtools select, #te-webtools textarea { font:inherit; letter-spacing:normal; text-transform:none; float:none; max-width:100%; }
#te-webtools button { display:inline-flex; align-items:center; justify-content:center; gap:8px; margin:0; padding:12px 18px; min-height:46px; border:1px solid var(--wt-blue); border-radius:9px; color:#fff; background:var(--wt-blue); line-height:1.25; font-weight:650; cursor:pointer; box-shadow:none; width:auto; }
#te-webtools button:hover { background:#11477f; border-color:#11477f; }
#te-webtools button:disabled { cursor:wait; opacity:.65; }
#te-webtools button.wt-quiet { background:#fff; color:var(--wt-blue); border-color:#a8bfd6; }
#te-webtools button.wt-quiet:hover { background:#e9f2fb; }
#te-webtools .wt-tabs button { flex:1 1 150px; border-color:transparent; background:#f0f5fa; color:#405971; }
#te-webtools .wt-tabs button[aria-selected="true"] { color:#fff; background:#153f65; }
#te-webtools button:focus-visible, #te-webtools a:focus-visible, #te-webtools summary:focus-visible { outline:3px solid #efb849; outline-offset:3px; }
#te-webtools .wt-panel { padding:clamp(20px,3vw,36px); }
#te-webtools .wt-lead { color:var(--wt-muted); max-width:780px; }
#te-webtools .wt-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:24px; align-items:start; }
#te-webtools .wt-box { min-width:0; padding:24px; background:#fff; border:1px solid var(--wt-line); border-radius:12px; }
#te-webtools .wt-note { background:#eaf2f9; border-radius:10px; padding:18px; color:#354f69; font-size:14px; }
#te-webtools label { display:block; color:var(--wt-ink); margin:0 0 7px; font-size:14px; font-weight:700; line-height:1.4; }
#te-webtools input, #te-webtools select, #te-webtools textarea { display:block; width:100%; height:auto; min-height:48px; margin:0 0 10px; border:1px solid #9cb2c8; border-radius:8px; padding:11px 13px; background:#fff; color:#102d49; box-shadow:none; line-height:1.4; }
#te-webtools input::placeholder, #te-webtools textarea::placeholder { color:#72869b; opacity:1; }
#te-webtools input:focus, #te-webtools select:focus, #te-webtools textarea:focus { border-color:#175ba8; outline:3px solid #c2def9; outline-offset:1px; }
#te-webtools textarea { min-height:132px; resize:vertical; white-space:pre-wrap; overflow-wrap:anywhere; }
#te-webtools .wt-hint { color:var(--wt-muted); font-size:13px; margin:0 0 18px; }
#te-webtools .wt-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:16px 0 0; }
#te-webtools .wt-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-top:14px; }
#te-webtools .wt-fields > div { min-width:0; }
#te-webtools .wt-result { margin-top:18px; border-radius:9px; padding:17px; background:#eff4fa; color:#334e69; white-space:pre-line; overflow-wrap:anywhere; font-size:15px; }
#te-webtools .wt-result[data-state="ok"] { background:#e9f6f0; color:#12543c; border-left:4px solid #268463; }
#te-webtools .wt-result[data-state="error"] { background:#fff0ec; color:#913d2b; border-left:4px solid #b9563c; }
#te-webtools .wt-result[data-state="note"] { background:#fff7e4; color:#775410; border-left:4px solid #be8b28; }
#te-webtools .wt-result:empty { display:none; }
#te-webtools .wt-value { font-size:24px; font-weight:750; font-variant-numeric:tabular-nums; }
#te-webtools .wt-details { margin-top:24px; border-top:1px solid var(--wt-line); padding-top:16px; }
#te-webtools summary { cursor:pointer; color:var(--wt-blue); font-weight:700; }
#te-webtools .wt-details p { margin:12px 0 0; color:var(--wt-muted); font-size:14px; }
#te-webtools a { color:#14569a; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
#te-webtools a:hover { color:#072f58; }
#te-webtools .wt-table-wrap { overflow-x:auto; margin-top:18px; }
#te-webtools table { width:100%; border-collapse:collapse; color:var(--wt-ink); font-size:14px; table-layout:fixed; }
#te-webtools th, #te-webtools td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--wt-line); overflow-wrap:anywhere; vertical-align:top; }
#te-webtools th { font-weight:750; background:#edf4fa; }
#te-webtools .wt-batch { margin-top:24px; }
#te-webtools .wt-footer { padding:18px clamp(20px,3vw,36px); color:var(--wt-muted); font-size:13px; border-top:1px solid var(--wt-line); background:#fff; }
#te-webtools .wt-footer p { margin:0; }
#te-webtools .wt-status { min-height:20px; font-size:13px; color:var(--wt-muted); margin:10px 0 0; }
@media(max-width:700px) { #te-webtools .wt-grid { grid-template-columns:minmax(0,1fr); gap:16px; } #te-webtools .wt-box { padding:18px; } #te-webtools .wt-tabs { gap:6px; padding:12px; } #te-webtools .wt-tabs button { flex-basis:40%; padding:11px 8px; font-size:14px; } }
@media(max-width:390px) { #te-webtools .wt-fields { grid-template-columns:minmax(0,1fr); gap:3px; } #te-webtools .wt-panel { padding:15px; } }