:root{
  --bg:#f6f2ec;
  --card:#fffdfa;
  --ink:#33302c;
  --muted:#8b837a;
  --line:#e6ded3;
  --accent:#a9885d;
  --accent-dark:#8d7048;
  --ok:#3f8f5f;
  --err:#b4483f;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex;align-items:center;justify-content:center;
  min-height:100dvh;padding:24px 16px;
}

.card{
  width:100%;max-width:440px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;
  padding:32px 24px;box-shadow:0 8px 28px rgba(90,70,45,.07);
}

.head{text-align:center;margin-bottom:26px}
.rings{font-size:34px;line-height:1}
.head h1{margin:10px 0 6px;font-size:26px;font-weight:600;letter-spacing:.3px}
.sub{margin:0;color:var(--muted);font-size:14.5px}

.field{display:block;margin-bottom:18px}
.field>span{display:block;font-size:14px;font-weight:600;margin-bottom:7px}

input[type=text]{
  width:100%;padding:12px 14px;font-size:16px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
}
input[type=text]:focus{outline:none;border-color:var(--accent)}

input[type=file]{
  width:100%;padding:14px;background:#fff;border:1px dashed var(--line);
  border-radius:10px;font-size:14px;
}

.hint{display:block;margin-top:7px;color:var(--muted);font-size:13px}

.btn{
  width:100%;padding:14px;border:0;border-radius:10px;
  background:var(--accent);color:#fff;font-size:16px;font-weight:600;
  cursor:pointer;
}
.btn:hover{background:var(--accent-dark)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.btn.ghost:hover{background:#f2ece4}

.foot{margin:16px 0 0;text-align:center;color:var(--muted);font-size:12.5px}

/* ---- modal ---- */
.modal{
  position:fixed;inset:0;background:rgba(45,38,30,.5);
  display:flex;align-items:center;justify-content:center;padding:16px;z-index:20;
}
.modal[hidden]{display:none}
.modal-box{
  width:100%;max-width:460px;background:var(--card);border-radius:16px;
  padding:22px;display:flex;flex-direction:column;max-height:85dvh;
}
.modal-box h2{margin:0 0 14px;font-size:18px;font-weight:600}

.overall{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.overall-bar{flex:1;height:6px;background:#ece4d9;border-radius:3px;overflow:hidden}
.overall-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
#overallText{font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

.list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.item{padding:9px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item-top{display:flex;align-items:center;gap:8px;font-size:13.5px}
.item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-state{color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.bar{height:4px;background:#ece4d9;border-radius:2px;margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}
.item.done .bar i{background:var(--ok)}
.item.done .item-state{color:var(--ok)}
.item.fail .bar i{background:var(--err);width:100%}
.item.fail .item-state{color:var(--err)}

.modal-actions{display:flex;gap:10px;margin-top:16px}
.modal-actions .btn{flex:1}

.result{margin:12px 0 0;font-size:14px;color:var(--muted);text-align:center}