:root{
  --bg:#F4F4F1;--panel:#FFFFFF;--soft:#EAEAE5;--line:#DCDCD5;--text:#16181C;--muted:#585B62;
  --blue:#0868BD;--bad:#C2272D;--bad-bg:#FCECEC;--warn:#8A5300;--warn-bg:#FDF3E1;--code:#F6F6F3;
  --mono:ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace;
  font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color-scheme:light dark;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#111214;--panel:#1A1C20;--soft:#22252A;--line:#2E3137;--text:#EEEEEA;--muted:#A1A3A8;
  --blue:#4DB5FF;--bad:#FF7A7F;--bad-bg:#2D1517;--warn:#F0A93A;--warn-bg:#2B2010;--code:#15171A;
}}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;padding:clamp(12px,2.5vw,24px)}
button,select,input,textarea{font:inherit;color:inherit}
a{color:var(--blue)}
code{font-family:var(--mono);font-size:.88em}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[hidden]{display:none!important}
.top h1{font-size:1.35rem;letter-spacing:-.01em}
.top p{color:var(--muted);max-width:50rem;margin-top:.2rem}

.layout{display:grid;grid-template-columns:minmax(18rem,25rem) minmax(0,1fr);gap:1.25rem;margin-top:1.1rem;align-items:start}
@media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px}

/* form */
.form{padding:.4rem .9rem .9rem}
fieldset{border:0;border-top:1px solid var(--line);padding:.8rem 0 .2rem;margin:0;min-width:0}
fieldset:first-child{border-top:0}
legend{font-weight:700;font-size:.92rem;padding:0;margin-bottom:.15rem;float:left;width:100%}
legend + *{clear:both}
legend small,label small{font-weight:400;color:var(--muted)}
label{display:grid;gap:.2rem;font-size:.8rem;color:var(--muted);font-weight:600;margin-top:.55rem}
label.check{display:flex;align-items:center;gap:.5rem;color:var(--text);font-weight:500;font-size:.86rem}
label.check input{width:1rem;height:1rem;accent-color:var(--blue)}
input:not([type]),input[type=text],select,textarea{width:100%;padding:.42rem .55rem;border-radius:7px;border:1px solid var(--line);background:var(--bg);font-size:.88rem;font-weight:400;color:var(--text)}
textarea{resize:vertical;font-family:var(--mono);font-size:.8rem}
[aria-invalid=true]{border-color:var(--bad)!important}
.err{color:var(--bad);font-weight:500;font-size:.78rem}
.err:empty{display:none}
.two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:.6rem;align-items:end}
@media(max-width:420px){.two{grid-template-columns:minmax(0,1fr)}}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;margin-top:.45rem}
.seg button{padding:.45rem .3rem;border-radius:8px;border:1px solid var(--line);background:var(--soft);font-size:.84rem;font-weight:600;cursor:pointer}
.seg button[aria-checked=true]{background:var(--blue);border-color:var(--blue);color:#fff}
@media(prefers-color-scheme:dark){.seg button[aria-checked=true]{color:#0B1015}}
.ghost{font-size:.8rem;font-weight:600;padding:.32rem .7rem;border-radius:7px;border:1px solid var(--line);background:var(--soft);cursor:pointer}
.ghost:hover{border-color:var(--blue)}
.ghost.sm{font-size:.75rem;padding:.2rem .55rem}
.rows{display:grid;gap:.35rem;margin:.55rem 0 .45rem}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:.35rem;align-items:center}
.row input{width:100%;padding:.35rem .5rem;border-radius:7px;border:1px solid var(--line);background:var(--bg);font-family:var(--mono);font-size:.8rem}
.row span{color:var(--muted)}
details{border-top:1px solid var(--line);margin-top:.8rem;padding-top:.6rem}
summary{cursor:pointer;font-weight:700;font-size:.92rem}
.foot{margin-top:.9rem;display:flex;gap:.4rem}

/* output */
.out{display:grid;gap:.75rem;min-width:0}
.uris{padding:.7rem .9rem;display:grid;gap:.45rem}
.uris div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.6rem;align-items:center}
.uris span{font-size:.78rem;color:var(--muted);font-weight:600}
.uris code{overflow-wrap:anywhere;background:var(--code);border:1px solid var(--line);border-radius:6px;padding:.2rem .45rem}
@media(max-width:560px){.uris div{grid-template-columns:minmax(0,1fr) auto}.uris span{grid-column:1/-1}}
.alert{border-radius:9px;padding:.55rem .75rem;font-size:.86rem;border:1px solid var(--line);margin-bottom:.4rem}
.alert.bad{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 35%,transparent);color:var(--text)}
.alert.bad::before{content:'Warning: ';font-weight:700;color:var(--bad)}
.notes{margin:.1rem 0 0;padding-left:1.1rem;font-size:.84rem;color:var(--muted);display:grid;gap:.2rem}
.tabs{display:flex;gap:.3rem;flex-wrap:wrap}
.tabs button{padding:.4rem .8rem;border-radius:8px 8px 0 0;border:1px solid var(--line);border-bottom:0;background:var(--soft);font-size:.84rem;font-weight:600;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--panel);color:var(--blue)}
.tabpanel{border-top-left-radius:0;overflow:hidden}
.bar{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.45rem .7rem;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.78rem;color:var(--muted)}
pre{margin:0;padding:.85rem .9rem;overflow:auto;font-family:var(--mono);font-size:.8rem;line-height:1.6;background:var(--code);max-height:34rem;tab-size:4}
#steps{padding:.4rem 1rem 1rem}
#steps h3{font-size:.95rem;margin-top:.7rem}
#steps ol{padding-left:1.3rem;margin-top:.35rem;display:grid;gap:.35rem;font-size:.88rem}
#steps code{background:var(--code);border:1px solid var(--line);border-radius:5px;padding:.05em .3em;overflow-wrap:anywhere}
.help{font-size:.82rem;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--text);color:var(--bg);padding:.45rem .9rem;border-radius:8px;font-size:.84rem;font-weight:600;transition:opacity .2s,transform .2s;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}
@media print{body{padding:0}.form,.tabs,.toast,.ghost{display:none}.tabpanel[hidden]{display:block!important}}