*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}

:root{--radius:14px;--shadow:0 8px 24px rgba(0,0,0,.08)}
[data-theme="light"]{
  --bg:#f7f8fb;--card:#ffffff;--text:#0b1020;--muted:#596173;--border:#e6e9f2;
  --blue:#2563eb;--blue-hover:#1d4ed8;--blue-press:#1e40af;--blue-text:#ffffff;
  --green:#16a34a;--green-hover:#15803d;--green-press:#166534;--green-text:#ffffff;
  --red:#dc2626;--red-hover:#b91c1c;--red-press:#991b1b;--red-text:#ffffff;
  --btn-bg:#f1f5f9;--btn-bg-hover:#e2e8f0;--btn-bg-press:#cbd5e1;--btn-text:#0b1020;
}
[data-theme="dark"]{
  --bg:#0b0e14;--card:#111520;--text:#e6e6e6;--muted:#9aa4b2;--border:#1c2230;
  --blue:#3b82f6;--blue-hover:#2563eb;--blue-press:#1d4ed8;--blue-text:#ffffff;
  --green:#22c55e;--green-hover:#16a34a;--green-press:#15803d;--green-text:#0b0e14;
  --red:#ef4444;--red-hover:#dc2626;--red-press:#b91c1c;--red-text:#0b0e14;
  --btn-bg:#1b2233;--btn-bg-hover:#1f2a3f;--btn-bg-press:#27344a;--btn-text:#e6e6e6;
}

body{background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";transition:background .2s,color .2s}
.wrap{width:min(980px,92vw);margin:0 auto}
.header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:32px 0 8px}
#results { opacity: 0; transition: opacity .4s ease; }
h1{margin:0 0 6px;font-size:28px;font-weight:700}
.sub{margin:0;color:var(--muted)}
h2{margin:0 0 12px;font-size:18px}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  margin:18px 0;
  box-shadow:var(--shadow)
}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.gap{gap:8px}
.row.space-between{justify-content:space-between}

input[type="url"],textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--card) 94%, #000 6%);
  color:var(--text);
  border-radius:12px;outline:none;transition:border-color .2s, background .2s
}
input[type="url"]:focus,textarea:focus{border-color:var(--blue)}

button{
  appearance:none;border:1px solid var(--border);
  background:var(--btn-bg);color:var(--btn-text);
  padding:10px 14px;border-radius:12px;
  cursor:pointer;transition:transform .05s ease,opacity .2s,background .2s,border-color .2s,box-shadow .2s
}
button:hover{background:var(--btn-bg-hover)}
button:active{transform:translateY(1px);background:var(--btn-bg-press)}
button:disabled{opacity:.6;cursor:not-allowed}

#fetchBtn, #parseBtn{
  background:var(--blue);color:var(--blue-text);border-color:transparent
}
#fetchBtn:hover, #parseBtn:hover{background:var(--blue-hover)}
#fetchBtn:active, #parseBtn:active{background:var(--blue-press)}

#copyBtn, #downloadTxtBtn, #downloadCsvBtn{
  background:var(--green);color:var(--green-text);border-color:transparent
}
#copyBtn:hover, #downloadTxtBtn:hover, #downloadCsvBtn:hover{background:var(--green-hover)}
#copyBtn:active, #downloadTxtBtn:active, #downloadCsvBtn:active{background:var(--green-press)}

#clearBtn{
  background:var(--red);color:var(--red-text);border-color:transparent
}
#clearBtn:hover{background:var(--red-hover)}
#clearBtn:active{background:var(--red-press)}

.theme-btn{background:var(--btn-bg);color:var(--btn-text)}
.theme-btn:hover{background:var(--btn-bg-hover)}
.theme-btn:active{background:var(--btn-bg-press)}

.hint{color:var(--muted);font-size:12px}
.status{min-height:18px;margin:8px 0;font-size:13px;color:var(--muted)}
.status.ok{color:var(--green)}
.status.warn{color:#f59e0b}
.status.err{color:var(--red)}
.count{font-size:13px;color:var(--muted);margin-bottom:8px}

.output{
  background:color-mix(in oklab,var(--card) 85%,#000 15%);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  max-height:420px;
  overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  line-height:1.45;white-space:pre-wrap;word-break:break-word
}

.footer{padding:24px 0 50px;color:var(--muted);text-align:center}

:focus-visible{outline:3px solid color-mix(in oklab, var(--blue) 70%, #fff 30%);outline-offset:2px;border-color:transparent}