:root{
  --navy:#0b3d63; --ink:#101a26; --green:#14562c;
  --line:#d4dde5; --soft:#eef2f6; --muted:#5a6b7c; --bg:#f7f9fb;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
header{
  background:var(--navy); color:#fff; padding:22px 24px;
  display:flex; gap:18px; align-items:center;
}
header img{height:46px;width:auto;flex:none}
header h1{margin:0;font-size:21px;letter-spacing:.2px}
header .sub{margin:4px 0 0;font-size:13.5px;color:#c8d3dd;max-width:62ch}
main{max-width:880px;margin:0 auto;padding:24px 20px 60px}

.drop{
  border:2px dashed var(--line); border-radius:14px; background:#fff;
  padding:38px 20px; text-align:center; transition:.15s; cursor:pointer;
}
.drop:hover,.drop.over{border-color:var(--navy); background:#f4f8fc}
.drop svg{color:var(--navy);opacity:.7}
.drop-title{margin:10px 0 2px;font-size:18px;font-weight:600}
.drop-hint{margin:0 0 16px;color:var(--muted);font-size:14px}

.card{background:#fff;border:1px solid var(--line);border-radius:12px;margin-top:18px;padding:16px 18px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.card-head h2{margin:0;font-size:14px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)}

ul{list-style:none;margin:0;padding:0}
li{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--soft);font-size:14.5px}
li:first-child{border-top:0}
li .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
li .meta{color:var(--muted);font-size:13px;flex:none}

.settings{display:grid;gap:16px}
.settings label{display:block;font-size:14px}
.settings label>span{display:block;font-weight:600;margin-bottom:5px}
.settings em{display:block;font-style:normal;color:var(--muted);font-size:12.5px;margin-top:4px}
.settings select{
  width:100%;max-width:340px;padding:9px 10px;border:1px solid var(--line);
  border-radius:8px;background:#fff;font-size:14.5px;color:var(--ink)
}
.settings .check{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start}
.settings .check input{margin-top:4px;width:17px;height:17px}
.settings .check span{margin:0}
.settings .check em{grid-column:2}

.actions{display:flex;gap:10px;margin-top:20px}
.btn{
  border:1px solid var(--navy); background:#fff; color:var(--navy);
  padding:11px 20px; border-radius:9px; font-size:15px; font-weight:600; cursor:pointer;
}
.btn:hover{background:#f0f6fb}
.btn.primary{background:var(--navy);color:#fff}
.btn.primary:hover{background:#0d4a77}
.btn.primary:disabled{background:#a9bccb;border-color:#a9bccb;cursor:not-allowed}
.btn.ghost{border-color:var(--line);color:var(--muted)}
.link{background:none;border:0;color:var(--navy);font-size:13.5px;cursor:pointer;padding:0;text-decoration:underline}

.bar{height:9px;background:var(--soft);border-radius:99px;overflow:hidden}
#barfill{height:100%;width:0;background:var(--green);transition:width .25s}
.status{margin:11px 0 0;font-size:14.5px}
.eta{margin:3px 0 0;color:var(--muted);font-size:13px}

.dl{
  border:1px solid var(--green);color:var(--green);background:#fff;
  padding:6px 13px;border-radius:7px;font-size:13.5px;font-weight:600;cursor:pointer;flex:none
}
.dl:hover{background:#e9f6ee}
.note{margin:12px 0 0;color:var(--muted);font-size:13px}
.err{
  background:#fdecec;border:1px solid #f3c4c4;color:#8c2020;
  padding:12px 14px;border-radius:9px;margin-top:18px;font-size:14px
}
.pill{font-size:12px;padding:2px 9px;border-radius:99px;background:var(--soft);color:var(--muted);flex:none}
.pill.ok{background:#e2f0e8;color:var(--green)}
.pill.bad{background:#fdecec;color:#8c2020}
footer{max-width:880px;margin:0 auto;padding:0 20px 40px;color:var(--muted);font-size:12.5px}
@media (max-width:560px){
  header{flex-direction:column;align-items:flex-start;gap:12px}
  .actions{flex-direction:column}
  .btn{width:100%}
}

/* ---- tabs ---- */
.tabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.tab{
  background:none;border:0;border-bottom:3px solid transparent;
  padding:10px 16px;font-size:14.5px;font-weight:600;color:var(--muted);cursor:pointer
}
.tab.active{color:var(--navy);border-bottom-color:var(--navy)}

/* ---- automatic tab ---- */
.setup .lead{margin:0 0 14px;font-size:14.5px;color:#33414f;max-width:66ch}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.steps{margin:0;padding-left:22px;font-size:14.5px;color:#33414f}
.steps li{display:list-item;border:0;padding:4px 0}
.warn{margin:0;font-size:14.5px;color:#8c2020}
#log li .meta{width:74px}
#log .good{color:var(--green)}
#log .bad{color:#8c2020}
#watchState{min-width:72px;text-align:center}