:root{
  --paper:#F4F1EA;--panel:#FCFBF8;--ink:#1A2328;--muted:#5E6B70;--rule:#DCD6CA;--field:#FFFFFF;
  --c:#9B2F45;--soft:#F5E1E5;--on-c:#FFFFFF;
  --ok:#2A6E50;--bad:#A3271B;--dim:.45;
  --f-display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#111513;--panel:#1A201D;--ink:#ECEFEC;--muted:#A1ACA8;--rule:#2E3733;--field:#141917;
    --c:#F0A0AE;--soft:#3A1E25;--on-c:#2A0E15;
    --ok:#7BCBA2;--bad:#F2968A;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:16px/1.5 var(--f-body);min-height:100vh;display:flex;flex-direction:column}
[hidden]{display:none !important}
button,input,select{font:inherit;color:inherit}
a{color:var(--c)}
code{font-size:.9em}

.top{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:880px;width:100%;margin:0 auto;padding:16px 20px 0;font-size:15px}
.back{color:var(--muted)}
.who{color:var(--muted);display:flex;gap:10px;align-items:center;min-width:0}
.who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

main{flex:1;width:100%;max-width:880px;margin:0 auto;padding:24px 20px 32px}
.title{display:flex;gap:16px;align-items:center;margin:0 0 24px}
.badge{flex:none;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--c)}
.badge svg{width:26px;height:26px}
h1{font-family:var(--f-display);font-weight:700;font-size:clamp(30px,5vw,42px);line-height:1.05;letter-spacing:-.02em;margin:0 0 4px}
.lede{color:var(--muted);font-size:17px;margin:0}
h2{font-family:var(--f-display);font-weight:600;font-size:20px;line-height:1.25;margin:0 0 14px;display:flex;align-items:center;gap:10px}
h3{font-size:16px;margin:18px 0 6px}
.step{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--soft);color:var(--c);font-size:14px;font-weight:700;font-family:var(--f-body)}

.card{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:18px 20px;margin:0 0 14px}
.signin p{margin:0 0 12px}
fieldset{border:0;margin:0;padding:0;min-width:0}
fieldset:disabled .card{opacity:.55}

.field{display:block;margin:0 0 14px}
.label{display:block;font-weight:700;font-size:15px;margin:0 0 4px}
input[type=text],select{width:100%;background:var(--field);border:1px solid var(--rule);border-radius:8px;padding:9px 11px;min-height:42px}
input[type=text]:focus,select:focus{outline:2px solid var(--c);outline-offset:-1px;border-color:var(--c)}
.pair{display:grid;grid-template-columns:1fr auto;gap:8px}
.pair select{width:auto}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));column-gap:16px}
.hint{color:var(--muted);font-size:14px;margin:0 0 4px}
.check,.radio{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;cursor:pointer}
.check>input,.radio>input{margin:4px 0 0;accent-color:var(--c);width:17px;height:17px;flex:none}
.radio span{flex:1;min-width:0}
input.inline{display:block;margin-top:6px}
.choice{margin-top:6px}

.folder-status{display:block;font-size:14px;margin-top:5px;min-height:1.4em;color:var(--muted)}
.folder-status.ok{color:var(--ok)}
.folder-status.bad,.msg.bad{color:var(--bad)}
.folder-status a{color:inherit}
.warn{background:var(--soft);border-radius:8px;padding:10px 12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 18px;border-radius:8px;border:1px solid var(--rule);background:var(--panel);font-weight:700;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn.primary{background:var(--c);border-color:var(--c);color:var(--on-c)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible,.link:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.link{background:none;border:0;padding:0;color:var(--c);text-decoration:underline;cursor:pointer;font-size:15px}
.actions,.go-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:4px 0 14px}
.msg{color:var(--muted);font-size:15px;margin:0}

.preview-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.preview-head .tools{display:flex;gap:14px}
.summary{font-weight:700;margin:0 0 4px}
.go-bar{margin-bottom:0}
.tree{border:1px solid var(--rule);border-radius:8px;background:var(--field);margin:12px 0 14px;max-height:60vh;overflow:auto;padding:4px 0}
.row{display:grid;grid-template-columns:22px 22px 20px 1fr auto;align-items:center;gap:6px;padding:3px 10px 3px calc(10px + var(--depth,0) * 20px);min-height:36px}
.row:hover{background:var(--paper)}
.row.off .names,.row.off .kind{opacity:var(--dim)}
.twisty{width:22px;height:22px;border:0;background:none;padding:0;cursor:pointer;color:var(--muted);border-radius:4px;transition:transform .12s ease}
.twisty[aria-expanded=true]{transform:rotate(90deg)}
.twisty:focus-visible{outline:2px solid var(--c)}
.row input[type=checkbox]{width:17px;height:17px;margin:0;accent-color:var(--c)}
.kind{width:18px;height:18px;color:var(--muted)}
.kind.folder{color:var(--c)}
.names{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px}
.names input{border:1px solid transparent;background:transparent;border-radius:6px;padding:3px 6px;margin-left:-7px;min-height:0;width:auto;min-width:8ch;max-width:100%;flex:0 1 auto}
.names input:hover{border-color:var(--rule)}
.names input:focus{background:var(--panel);border-color:var(--c);outline:none}
.row.renamed .names input{color:var(--c);font-weight:700}
.was{color:var(--muted);font-size:13px;text-decoration:line-through;overflow-wrap:anywhere}
.note{color:var(--muted);font-size:13px;font-style:italic}
.revert{border:0;background:none;color:var(--muted);cursor:pointer;font-size:17px;padding:2px 6px;border-radius:4px;visibility:hidden}
.row.renamed .revert{visibility:visible}
.revert:hover,.revert:focus-visible{color:var(--c);outline:none}

.bar{height:12px;border-radius:999px;background:var(--soft);overflow:hidden;margin:4px 0 10px}
.bar span{display:block;height:100%;width:0;background:var(--c);transition:width .2s ease}
.reauth{background:var(--soft);border-color:var(--c);position:sticky;top:8px;z-index:2}
.reauth p{margin:0 0 10px}
#errorList{padding-left:20px;margin:0;font-size:15px}
#errorList li{margin:0 0 6px}
#errorList .why{color:var(--muted)}

footer{max-width:840px;width:calc(100% - 40px);margin:0 auto;padding:16px 0 20px;color:var(--muted);font-size:14px;border-top:1px solid var(--rule)}
footer a{color:inherit}

@media (max-width:520px){
  .card{padding:16px 14px}
  .row{grid-template-columns:20px 20px 18px 1fr auto;gap:4px;padding-left:calc(6px + var(--depth,0) * 14px)}
  .pair{grid-template-columns:1fr}
  .pair select{width:100%}
}
@media (prefers-reduced-motion:reduce){.twisty,.bar span{transition:none}}