:root{
  color-scheme: light;
  --bg:#F3F4F6;
  --surface:#FFFFFF;
  --ink:#1A1D23;
  --muted:#6B7280;
  --line:#E2E5EA;
  --accent:#1E5F5A;
  --accent-dark:#153F3C;
  --accent-soft:#DCEAE8;
  --danger:#B3261E;
  --danger-soft:#FBE9E7;
  --ok:#1E7A45;
  --ok-soft:#E3F3E9;
  --radius:10px;
  --shadow:0 1px 2px rgba(20,20,30,.04), 0 6px 20px rgba(20,20,30,.06);
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px; margin:0 auto; padding:0 20px;}

.site-header{background:var(--accent-dark); color:#fff; padding:18px 0;}
.site-header .wrap{display:flex; align-items:baseline; gap:10px;}
.brand{font-weight:700; font-size:1.15rem; letter-spacing:-0.01em;}
.brand-logo{height:28px; display:block;}
.brand-sub{font-size:0.9rem; opacity:0.8;}

main.wrap{padding:36px 20px 60px;}

h1{font-size:1.6rem; font-weight:700; margin:0 0 10px; letter-spacing:-0.01em;}
.lede{color:var(--muted); font-size:0.98rem; max-width:56ch; margin:0 0 28px;}

.field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 18px;
  margin-bottom:24px;
}
.field{display:flex; flex-direction:column; gap:6px;}
.field-wide{grid-column:1 / -1;}
label{font-size:0.86rem; font-weight:600; color:var(--ink);}
.req{color:var(--danger);}
input[type="text"],input[type="email"],textarea{
  font:inherit;
  font-size:0.96rem;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  color:var(--ink);
  width:100%;
  transition:border-color .15s, box-shadow .15s;
}
input:focus,textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
input.invalid,textarea.invalid{
  border-color:var(--danger);
}
textarea{resize:vertical; min-height:70px;}
.err{
  display:block;
  font-size:0.82rem;
  color:var(--danger);
  min-height:1.1em;
}

.dropzone{
  border:2px dashed var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:32px 20px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--accent); outline:none;}
.dropzone.dragover{border-color:var(--accent); background:var(--accent-soft);}
.dropzone-inner p{margin:6px 0 0;}
.dz-icon{width:34px; height:34px; color:var(--accent); margin-bottom:4px;}
.dz-hint{color:var(--muted); font-size:0.85rem;}

.file-list{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
.file-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.file-item-top{display:flex; align-items:center; gap:10px;}
.file-name{font-weight:600; font-size:0.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;}
.file-size{font-size:0.8rem; color:var(--muted); white-space:nowrap;}
.file-remove{
  background:none; border:none; color:var(--muted); cursor:pointer; font-size:1.1rem; line-height:1; padding:2px 6px; border-radius:6px;
}
.file-remove:hover{background:var(--danger-soft); color:var(--danger);}
.file-bar{height:6px; border-radius:4px; background:var(--line); overflow:hidden;}
.file-bar-fill{height:100%; background:var(--accent); width:0%; transition:width .2s;}
.file-status{font-size:0.8rem; color:var(--muted);}
.file-item.done .file-bar-fill{background:var(--ok);}
.file-item.done .file-status{color:var(--ok);}
.file-item.error .file-bar-fill{background:var(--danger);}
.file-item.error .file-status{color:var(--danger);}
.file-retry{
  align-self:flex-start;
  font-size:0.8rem;
  background:none;
  border:1px solid var(--danger);
  color:var(--danger);
  border-radius:6px;
  padding:3px 10px;
  cursor:pointer;
}

.submit-row{display:flex; align-items:center; justify-content:flex-end; gap:16px; margin-top:26px;}
.overall-progress{display:flex; align-items:center; gap:10px; flex:1;}
.overall-progress .bar{flex:1; height:8px; border-radius:5px; background:var(--line); overflow:hidden;}
.overall-progress .bar-fill{height:100%; width:0%; background:var(--accent); transition:width .2s;}
.overall-progress span{font-size:0.85rem; color:var(--muted); min-width:3.5em; text-align:right;}

button[type="submit"]{
  font:inherit;
  font-weight:700;
  font-size:0.98rem;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:12px 26px;
  cursor:pointer;
  transition:background .15s;
  white-space:nowrap;
}
button[type="submit"]:hover:not(:disabled){background:var(--accent-dark);}
button[type="submit"]:disabled{background:var(--line); color:var(--muted); cursor:not-allowed;}

.form-status{margin-top:18px; font-size:0.94rem; padding:0;}
.form-status.ok{color:var(--ok); background:var(--ok-soft); padding:14px 16px; border-radius:8px;}
.form-status.error{color:var(--danger); background:var(--danger-soft); padding:14px 16px; border-radius:8px;}

.site-footer{padding:22px 0 40px; color:var(--muted); font-size:0.82rem; text-align:center;}

@media (max-width: 620px){
  .field-grid{grid-template-columns:1fr;}
  .submit-row{flex-direction:column-reverse; align-items:stretch;}
  button[type="submit"]{width:100%;}
  h1{font-size:1.35rem;}
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#15171B;
    --surface:#1D2025;
    --ink:#E7E8EA;
    --muted:#9BA1AC;
    --line:#2C3036;
    --accent:#4FA89E;
    --accent-dark:#0F2A28;
    --accent-soft:#1B3634;
    --danger:#E5867E;
    --danger-soft:#3A2220;
    --ok:#7FCB9C;
    --ok-soft:#1B3324;
  }
}