.settings{display:flex; flex-direction:column; gap:2.4rem}
.settings > *{max-width:64rem; width:100%}
.set-sec{display:grid; grid-template-columns:minmax(0,17rem) minmax(0,1fr); gap:1rem 2rem; align-items:start}
.set-h{display:flex; flex-direction:column; gap:.5rem; position:sticky; top:calc(var(--bar-h) + 1rem)}
@media (max-width:56rem){ .set-sec{grid-template-columns:minmax(0,1fr)} .set-h{position:static} }
.keylist{display:flex; flex-direction:column; gap:.6rem}
.keyrow{display:grid; grid-template-columns:minmax(0,12rem) minmax(0,1fr); gap:.6rem 1rem; padding:.85rem .95rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); scroll-margin-top:calc(var(--bar-h) + 1rem)}
.keyrow.has{border-color:color-mix(in srgb, var(--good) 45%, var(--line))}
.keyrow:target{box-shadow:0 0 0 3px var(--accent-wash); border-color:var(--accent)}
.keyrow-name{display:flex; flex-direction:column; gap:.3rem; min-width:0}
.keyrow-name .mpill b{font-weight:600; font-size:var(--t-sm)}
.keyrow-name p{font:400 var(--t-sm)/1.35 var(--f-serif); color:var(--ink-3)}
.keyrow-ctl{display:flex; flex-direction:column; gap:.5rem; min-width:0}
.keyrow-in{display:flex; gap:.4rem}
.keyrow-in .input{flex:1; min-width:0}
.keyrow-status{font:500 var(--t-xs)/1.4 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink-3); min-height:1.1rem}
.keyrow-status.good{color:var(--good)} .keyrow-status.bad{color:var(--bad)}
@media (max-width:40rem){ .keyrow{grid-template-columns:minmax(0,1fr)} }
.defrow{display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr); gap:.5rem 1rem; align-items:center}
@media (max-width:40rem){ .defrow{grid-template-columns:minmax(0,1fr)} }

#onboard{display:flex; flex-direction:column; gap:1rem}
#onboard:empty{display:none}
.back-banner{align-items:center}
.back-banner .btn{flex:none}
.quickstart .panel-body{gap:.6rem; padding:1.2rem 1.25rem}
.qs-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:.4rem}
.qs-card{display:flex; flex-direction:column; gap:.55rem; padding:1rem; border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--field); min-width:0}
.qs-card .mpill b{font-weight:600; font-size:var(--t-sm)}
.qs-card .btn{align-self:flex-start}
.qs-steps{list-style:decimal; padding-left:1.2rem; display:flex; flex-direction:column; gap:.3rem; font:400 var(--t-sm)/1.45 var(--f-ui); color:var(--ink-2)}
.qs-steps a{font-weight:500}
@media (max-width:44rem){ .qs-grid{grid-template-columns:minmax(0,1fr)} }

/* ── what a key is, and what it is used for ─────────────────────────── */
.settings > .set-what{max-width:76rem}
.set-what{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:1.6rem clamp(1.6rem,4vw,3.5rem); padding:clamp(1.3rem,3vw,2rem); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl); scroll-margin-top:calc(var(--bar-h) + 1rem)}
.set-what-text{display:flex; flex-direction:column; gap:.85rem}
.set-what-text .h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.set-what-text p{font:400 1.06rem/1.6 var(--f-serif); color:var(--ink-2)}
.set-what-text p b{color:var(--ink)}
.set-what-more{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem}
.set-what-more a{font:600 .92rem/1.4 var(--f-ui)}
.set-what-side{display:flex; flex-direction:column; gap:.7rem; min-width:0}
.set-what-side .h4{margin-top:.2rem}
.set-uses{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.set-uses div{display:grid; grid-template-columns:minmax(0,9.5rem) minmax(0,1fr); gap:.2rem 1rem; padding:.55rem 0; border-bottom:1px solid var(--line-2)}
.set-uses dt{font:600 .9rem/1.4 var(--f-ui)}
.set-uses dt a{text-decoration:none}
.set-uses dd{font:400 .97rem/1.45 var(--f-serif); color:var(--ink-2)}
.set-costs td.num,.set-costs th.num{text-align:right}
@media (max-width:60rem){ .set-what{grid-template-columns:minmax(0,1fr)} }
@media (max-width:30rem){ .set-uses div{grid-template-columns:minmax(0,1fr)} }

/* ── the usage log ──────────────────────────────────────────────────── */
.use-sum{display:flex; flex-wrap:wrap; gap:.5rem 2.2rem; margin-bottom:.9rem}
.use-sum div{display:flex; flex-direction:column; gap:.15rem}
.use-sum b{font:300 2rem/1 var(--f-head); font-variant-numeric:lining-nums tabular-nums; color:var(--ink)}
.use-sum span{font:500 .8rem/1.3 var(--f-ui); color:var(--ink-3)}
.use-prov{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.9rem}
.use-log td{font-size:.86rem}
.use-log td.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:.8rem}
.use-log .bad{color:var(--bad)}
.use-empty{font:400 1.02rem/1.55 var(--f-serif); color:var(--ink-2)}
.use-foot{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:.9rem}