:root{
  --navy:#1a2744;
  --cream:#f7f4ef;
  --gold:#c9a227;
  --ink:#20242c;
  --muted:#5b6272;
  --line:#dcd7cd;
  --danger:#b23b3b;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:16px;
  line-height:1.7;
}
.wrap{max-width:720px;margin:0 auto;padding:24px 20px 64px}
h1{font-size:20px;margin:0 0 4px;color:var(--navy)}
.sub{font-size:14px;color:var(--muted);margin:0 0 24px}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px;
  margin-bottom:20px;
}
label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
input[type=text],select{
  width:100%;
  font-size:16px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  min-height:48px;
}
.row{margin-bottom:16px}
button{
  font-size:16px;
  font-family:inherit;
  min-height:52px;
  padding:14px 20px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  width:100%;
}
.primary{background:var(--navy);color:#fff}
.primary:disabled{background:#9aa2b4;cursor:not-allowed}
.stop{background:var(--danger);color:#fff}
.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.timer{
  font-size:32px;
  font-variant-numeric:tabular-nums;
  text-align:center;
  color:var(--navy);
  margin:8px 0 16px;
}
.dot{
  display:inline-block;width:12px;height:12px;border-radius:50%;
  background:var(--danger);margin-right:8px;vertical-align:middle;
  animation:blink 1.2s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.status{font-size:14px;color:var(--muted);margin-top:12px;min-height:22px}
.status.err{color:var(--danger)}
.result{display:none;margin-top:16px}
.urlbox{
  display:flex;gap:8px;flex-wrap:wrap;
}
.urlbox input{flex:1 1 200px}
.urlbox button{width:auto;flex:0 0 auto;min-width:96px}
.list-item{
  border-top:1px solid var(--line);
  padding:14px 0;
  display:flex;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.list-item:first-of-type{border-top:none}
.li-main{flex:1 1 200px;min-width:0}
.li-title{font-size:16px;word-break:break-word}
.li-meta{font-size:13px;color:var(--muted)}
.li-act{display:flex;gap:8px;flex:0 0 auto}
.li-act button{width:auto;min-height:44px;padding:10px 14px;font-size:14px}
.note{font-size:13px;color:var(--muted);margin-top:8px}
video{width:100%;border-radius:12px;background:#000;display:block}
.hide{display:none}