:root{
  --paper:#f5f6f3; --ink:#1c2420; --ink-soft:#4b544e; --ink-faint:#8a9089;
  --rule:#d8dad0; --accent:#2f4d3f; --accent-soft:#e4ebe3;
  --bad:#8a3a2f; --bad-soft:#f4e2dd; --good:#2f6b4f; --good-soft:#e0ede4;
  --paper-raised:#fff;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:15px/1.5 -apple-system, "Segoe UI", sans-serif;
}
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px; background:var(--paper-raised); border-bottom:1px solid var(--rule);
}
.topbar a{color:var(--ink); text-decoration:none; font-weight:600;}
.topbar .nav a{margin-left:18px; font-weight:400; color:var(--ink-soft); font-size:14px;}
.wrap{max-width:760px; margin:0 auto; padding:28px 20px 60px;}
h1{font-size:22px; margin:0 0 18px;}
h2{font-size:16px; color:var(--accent); margin:24px 0 8px;}
.card{background:var(--paper-raised); border:1px solid var(--rule); border-radius:8px; padding:20px; margin-bottom:16px;}
label{display:block; font-size:13px; color:var(--ink-soft); margin:14px 0 4px; font-weight:600;}
input[type=text], input[type=email], input[type=password], textarea, select{
  width:100%; padding:9px 11px; border:1px solid var(--rule); border-radius:6px;
  font:inherit; background:#fff; color:var(--ink);
}
textarea{min-height:110px; resize:vertical;}
button, .btn{
  display:inline-block; padding:9px 16px; border-radius:6px; border:none;
  background:var(--accent); color:#fff; font:inherit; font-weight:600; cursor:pointer;
  text-decoration:none; margin-top:14px;
}
button.secondary, .btn.secondary{background:#fff; color:var(--accent); border:1px solid var(--accent);}
.status{display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  padding:3px 8px; border-radius:20px; font-weight:600;}
.status-ready{background:var(--good-soft); color:var(--good);}
.status-failed{background:var(--bad-soft); color:var(--bad);}
.status-pending,.status-transcribing,.status-extracting,.status-generating{background:var(--accent-soft); color:var(--accent);}
table{width:100%; border-collapse:collapse; margin-top:6px;}
th,td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--rule); font-size:14px;}
th{font-size:11px; text-transform:uppercase; color:var(--ink-faint); font-weight:600;}
tr:hover td{background:var(--accent-soft);}
.draft-option{border:1px solid var(--rule); border-radius:8px; padding:14px; margin-bottom:12px;}
.draft-option .label{font-size:11px; text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin-bottom:6px;}
.draft-option .hook{font-weight:600; margin-bottom:6px;}
.error{background:var(--bad-soft); color:var(--bad); padding:10px 14px; border-radius:6px; margin-bottom:16px; font-size:14px;}
.muted{color:var(--ink-faint); font-size:13px;}