* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Hiragino Sans", sans-serif;
       background: #fdf8f2; color: #3d3a34; }
main { max-width: 780px; margin: 0 auto; padding: 18px; }
h1 { font-size: 1.4rem; color: #4a4238; }
h2 { font-size: 1.08rem; margin: 10px 0; color: #4a4238; }
.center-box { max-width: 430px; margin: 10vh auto 0; text-align: center; }
.center-box.wide { max-width: 570px; margin-top: 4vh; text-align: left; }
.muted { color: #8d867c; } .small { font-size: .85rem; }
.error { color: #d94f4f; font-weight: 600; }
.ok { color: #2f9e63; }
input, select, button {
  width: 100%; padding: 12px; margin: 6px 0 14px; border-radius: 12px;
  border: 1.5px solid #e5dccf; background: #fff; color: #3d3a34; font-size: 1rem;
}
input:focus, select:focus { outline: none; border-color: #f2a03d; }
button { background: #f2a03d; border: none; color: #fff; font-weight: 700;
         cursor: pointer; box-shadow: 0 2px 6px rgba(242,160,61,.35); }
button:hover { background: #e8932c; }
button:disabled { opacity: .45; box-shadow: none; }
button.secondary { background: #efe7db; color: #6b6459; box-shadow: none; }
label { display: block; font-size: .9rem; color: #8d867c; margin-top: 4px; }
.bar { display: flex; justify-content: space-between; align-items: center; }
.card { background: #fff; border-radius: 16px; padding: 16px 18px; margin: 16px 0;
        box-shadow: 0 3px 14px rgba(120,100,70,.08); }
.videobox { position: relative; padding-top: 56.25%; }
.videobox iframe { position: absolute; inset: 0; width: 100%; height: 100%;
                   border: 0; border-radius: 12px; }
video { width: 100%; border-radius: 12px; background: #000; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; background: #fff;
        border-radius: 12px; overflow: hidden; box-shadow: 0 3px 14px rgba(120,100,70,.08); }
th { background: #f7efe3; color: #7a6f5d; font-weight: 600; }
th, td { padding: 9px 10px; border-bottom: 1px solid #f0e9dd; text-align: left; }
tr:last-child td { border-bottom: none; }
code { background: #f4ede1; padding: 2px 7px; border-radius: 7px; font-size: .82rem;
       word-break: break-all; }
ul#progress { list-style: none; padding: 0; } ul#progress li { padding: 4px 0; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px;
         font-size: .8rem; font-weight: 600; }
.badge.collecting { background: #e8f4fd; color: #2a7fc1; }
.badge.published { background: #e6f7ec; color: #2f9e63; }
.badge.working { background: #fdf3e0; color: #c07f1d; }
.badge.error { background: #fdeaea; color: #d94f4f; }
.copybtn { width: auto; padding: 6px 12px; margin: 0 0 0 6px; font-size: .8rem;
           display: inline-block; }
.formrow { background: #fff; border-radius: 16px; padding: 14px 18px; margin: 10px 0 22px;
           box-shadow: 0 3px 14px rgba(120,100,70,.08); }
.notice { background: #fdf3e0; border-radius: 12px; padding: 10px 14px; font-size: .88rem;
          color: #8a6d3b; }