:root{
  --bg:#f4f5f7; --card:#ffffff; --text:#1a1d23; --muted:#6b7280;
  --border:#e3e6ea; --primary:#2563eb; --primary-ink:#fff;
  --ok:#166534; --ok-bg:#dcfce7; --err:#991b1b; --err-bg:#fee2e2;
  --tag:#eef2ff; --tag-ink:#3730a3; --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f172a; --card:#1e293b; --text:#e5e7eb; --muted:#94a3b8;
    --border:#334155; --primary:#3b82f6; --primary-ink:#fff;
    --ok:#86efac; --ok-bg:#14532d; --err:#fecaca; --err-bg:#7f1d1d;
    --tag:#312e81; --tag-ink:#c7d2fe;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--primary); text-decoration:none}
h1{font-size:1.4rem; margin:.2rem 0 .6rem}
h2{font-size:1.15rem; margin:1.2rem 0 .5rem}
h3{font-size:1.02rem; margin:.9rem 0 .3rem}

.topbar{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; padding:.7rem 1rem; background:var(--card); border-bottom:1px solid var(--border);
}
.topbar .brand{font-weight:700; color:var(--text)}
.topbar nav{display:flex; gap:1rem}
.topbar nav a{color:var(--muted); font-size:.95rem}

.wrap{max-width:760px; margin:0 auto; padding:1rem}
.foot{max-width:760px; margin:1rem auto 2rem; padding:0 1rem; color:var(--muted); font-size:.8rem; text-align:center}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem; margin:.7rem 0; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.login-card{max-width:420px; margin:8vh auto 0}

label{display:block; margin:.6rem 0; font-weight:600; font-size:.92rem}
input,select,textarea,button{font:inherit}
input,select,textarea{
  width:100%; margin-top:.3rem; padding:.7rem .8rem; border:1px solid var(--border);
  border-radius:10px; background:var(--bg); color:var(--text);
}
textarea{resize:vertical}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.7rem 1.1rem; border:1px solid var(--border); border-radius:10px;
  background:var(--card); color:var(--text); font-weight:600; cursor:pointer;
  min-height:44px;
}
.btn.primary{background:var(--primary); color:var(--primary-ink); border-color:var(--primary)}
.btn.wide{width:100%; margin-top:.6rem}
.btn.danger{background:var(--err-bg); color:var(--err); border-color:transparent}
.controls{display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0}
.controls select{width:auto; flex:1 1 140px; margin-top:0}

.submit-form{display:flex; gap:.5rem; flex-wrap:wrap}
.submit-form input{flex:1 1 220px}
.submit-form .btn{flex:0 0 auto}

.muted{color:var(--muted)}
.small{font-size:.85rem}
.mt{margin-top:1rem}
.row{display:flex; gap:.6rem; align-items:center}
.between{justify-content:space-between}
.hidden{display:none}

.alert{padding:.6rem .8rem; border-radius:10px; margin:.5rem 0; font-size:.92rem}
.alert.ok{background:var(--ok-bg); color:var(--ok)}
.alert.err{background:var(--err-bg); color:var(--err)}

.badge{display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.75rem; font-weight:700; background:var(--border); color:var(--text)}
.b-done{background:var(--ok-bg); color:var(--ok)}
.b-error{background:var(--err-bg); color:var(--err)}
.b-downloading,.b-transcribing,.b-summarizing,.b-summary_queued,.b-queued{background:#fef3c7; color:#92400e}
@media (prefers-color-scheme: dark){.b-downloading,.b-transcribing,.b-summarizing,.b-summary_queued,.b-queued{background:#78350f; color:#fde68a}}
.b-transcribed{background:var(--tag); color:var(--tag-ink)}
.tag{display:inline-block; padding:.12rem .5rem; border-radius:999px; font-size:.75rem; background:var(--tag); color:var(--tag-ink); font-weight:600}

.joblist,.picklist{list-style:none; padding:0; margin:.4rem 0}
.job a,.joblist a{color:var(--text); display:block}
.job-title{font-weight:600}
.job-meta{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-top:.35rem; font-size:.85rem}
.job{display:flex; align-items:center; gap:.4rem}
.job-main{flex:1; min-width:0}
.yt{flex:0 0 auto; color:#ff3b30; font-size:1.2rem; text-decoration:none; padding:.2rem .5rem; border-radius:8px}
.yt:hover{background:rgba(255,59,48,.12)}
h1 .yt{font-size:1rem}

.pick{display:flex; align-items:center; gap:.6rem}
.pick .chk{flex:1; margin:0; display:flex; align-items:center; gap:.6rem; font-weight:500}
.pick input[type=checkbox]{width:22px; height:22px; margin:0; flex:0 0 auto}
.pick-title{overflow:hidden; text-overflow:ellipsis}
.pick .dur{flex:0 0 auto}
.chk{display:flex; align-items:center; gap:.5rem}
.chk input{width:auto}
.sticky-actions{position:sticky; top:56px; background:var(--bg); padding:.5rem 0; z-index:5}

.spinner{width:26px; height:26px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin 1s linear infinite; margin:.8rem 0}
@keyframes spin{to{transform:rotate(360deg)}}

.transcript{white-space:pre-wrap; font-size:.9rem; max-height:50vh; overflow:auto; margin-top:.6rem; padding:.6rem; background:var(--bg); border-radius:10px}
.prose h3{margin-top:.8rem}
.prose ul{margin:.3rem 0 .3rem 1.1rem; padding:0}
.prose li{margin:.2rem 0}
.prose p{margin:.4rem 0}
.qa-item{background:var(--bg)}
.qa-q{font-weight:600; margin-bottom:.35rem}

.tabs{display:flex; gap:.5rem; margin:.5rem 0}
.tab{flex:1; padding:.6rem; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--muted); font-weight:600; cursor:pointer}
.tab.active{background:var(--primary); color:var(--primary-ink); border-color:var(--primary)}
details summary{cursor:pointer; font-weight:700; padding:.4rem 0}