body { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 var(--container-pad); }

.top { border-bottom: 1px solid var(--border); }
.top .wrap { height: 72px; display: flex; align-items: center; gap: var(--sp-5); }
.top img { width: 144px; height: auto; display: block; }
.top .wrap > span { padding-left: var(--sp-5); border-left: 1px solid var(--border); }
.top nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-prod-sm); }
.top nav a { font-weight: var(--fw-bold); text-decoration: none; }
.top nav span { color: var(--fg2); }
.top form { margin: 0; }

main { flex: 1; padding: var(--layout-lg) 0; }
main .wrap { display: flex; flex-direction: column; gap: var(--layout-sm); }
.opener p { max-width: 62ch; margin: 0; }
.opener h1 { margin-bottom: var(--sp-4); }
.flash { margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--status-info-bg); color: var(--fg1); border-radius: var(--radius-sm); }

.drop { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-8) var(--sp-5); text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-subtle); color: var(--fg2); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-prod-standard), background var(--dur-fast) var(--ease-prod-standard); }
.drop:hover, .drop.is-over { border-color: var(--sau-blue); background: var(--status-progress-bg); }
.drop:focus-within { box-shadow: var(--focus-shadow); }
.drop b { color: var(--fg1); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.btn { display: inline-flex; align-items: center; gap: var(--sp-2); height: 44px; padding: 0 var(--sp-5); border-radius: var(--radius-sm);
  font-family: var(--font-text); font-size: var(--fs-prod-sm); font-weight: var(--fw-bold); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-prod-standard), border-color var(--dur-fast) var(--ease-prod-standard); }
.btn-primary { background: var(--button-primary-bg); color: var(--button-primary-fg); }
.drop:hover .btn-primary, .btn-primary:hover { background: var(--button-primary-bg-hover); color: var(--button-primary-fg); }
.btn-secondary { background: var(--button-secondary-bg); color: var(--button-secondary-fg); border-color: var(--button-secondary-border); height: 36px; padding: 0 var(--sp-4); }
.btn-secondary:hover { background: var(--button-secondary-bg-hover); border-color: var(--fg2); color: var(--fg1); }

input:not([type=checkbox]), select { height: 36px; padding: 0 var(--sp-3); border: 1px solid var(--input-border); border-radius: var(--input-radius);
  background: var(--input-bg); color: var(--input-fg); font-family: var(--font-text); font-size: var(--fs-prod-sm); }
input:hover, select:hover { border-color: var(--input-border-hover); }
input:focus, select:focus { outline: none; border-color: var(--input-border-focus); box-shadow: var(--focus-shadow); }
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: 0; padding: var(--sp-4); }
.form-row + .form-row, .scroll + .form-row { border-top: 1px solid var(--border-subtle); }
.form-row .btn-primary { height: 36px; }
.form-row > span:first-child { flex: 1; }
.form-row label { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-prod-sm); }
.login { width: 100%; max-width: 380px; }
.login form { display: flex; flex-direction: column; gap: var(--sp-3); }
.login .btn { justify-content: center; }
.err { color: var(--status-error); }

.panel { border: 1px solid var(--border); }
.panel-head { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
form.panel-head { padding: var(--sp-3) var(--sp-4); }
details.panel:not([open]) .panel-head { border-bottom: none; }
summary.panel-head { cursor: pointer; }
.note { margin: 0; padding: var(--sp-4); color: var(--fg2); font-size: var(--fs-prod-sm); }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-prod-sm); }
th, td { padding: 10px var(--sp-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border-subtle); }
th { font-weight: var(--fw-semibold); color: var(--fg2); white-space: nowrap; }
tr:last-child td { border-bottom: none; }
td.mono { font-family: var(--font-mono); font-size: var(--fs-prod-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
td.fname { min-width: 140px; font-weight: var(--fw-bold); overflow-wrap: anywhere; }
td form { display: flex; gap: var(--sp-2); margin: 0; }

.qrow { display: grid; grid-template-columns: 1fr 200px 48px 120px 120px; gap: var(--sp-4); align-items: center; padding: 14px var(--sp-4); border-bottom: 1px solid var(--border-subtle); }
.qrow:last-child { border-bottom: none; }
.qrow .name { min-width: 0; display: flex; flex-direction: column; }
.qrow .name b { font-size: var(--fs-prod-base); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrow .name span, .qrow .pct { font-family: var(--font-mono); font-size: var(--fs-prod-xs); color: var(--fg2); letter-spacing: .04em; }
.qrow .pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg1); }
.qrow .name .err { font-family: var(--font-text); letter-spacing: 0; }
.bar { height: 6px; background: var(--bg-muted); border-radius: var(--radius-sm); overflow: hidden; }
.bar div { height: 100%; width: 0; background: var(--status-progress); }
.qrow.fail .bar div { background: var(--status-error); }
.pill { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 3px 10px; border-radius: var(--radius-sm); white-space: nowrap;
  font-size: var(--fs-prod-xs); font-weight: var(--fw-bold); letter-spacing: .03em; background: var(--status-neutral-bg); color: var(--status-neutral); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.qrow.run .pill, .pill.processing { background: var(--status-progress-bg); color: var(--status-progress); }
.qrow.run .pill .dot { animation: pulse 1.8s var(--ease-prod-standard) infinite; }
.qrow.fail .pill, .pill.failed { background: var(--status-error-bg); color: var(--status-error); }
.pill.ready, .pill.downloaded { background: var(--status-success-bg); color: var(--status-success); }
.qrow .action { justify-self: end; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .4 } }

footer { background: var(--sau-black); color: rgba(255, 255, 255, .6); padding: var(--sp-5) 0; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: var(--fw-medium); }

@media (max-width: 720px) {
  .top .wrap > span, .top nav span { display: none; }
  .top img { width: 112px; }
  .qrow { grid-template-columns: 1fr auto; }
  .qrow .bar { grid-column: 1 / -1; order: 1; }
  .qrow .pct { display: none; }
  .qrow .action { grid-column: 1 / -1; justify-self: start; order: 2; }
}