.app{display:grid;grid-template-columns:220px 1fr;gap:2.5rem;padding:2.5rem 1.5rem 5rem}
@media (max-width:860px){.app{grid-template-columns:1fr}}
.side a{display:block;padding:.5rem .7rem;border-radius:10px;color:var(--platinum);text-decoration:none;margin-bottom:.15rem}
.side a:hover{background:var(--graphite);color:var(--mist)}
.side a.on{background:var(--graphite);color:var(--mist);font-weight:700}
.side h4{color:var(--slate);font-size:.85rem;font-weight:600;margin:1.4rem 0 .4rem .7rem}
.main h1{font-size:2rem;letter-spacing:-.02em;color:var(--mist);margin:0 0 .4rem}
.main h2{font-size:1.25rem;color:var(--mist);margin:2rem 0 .7rem}
.muted{color:var(--slate)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin:1.2rem 0}
.card{background:var(--graphite);border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem}
.card b{display:block;font-size:1.8rem;color:var(--mist);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.card span{color:var(--slate);font-size:.95rem}
table.t{width:100%;border-collapse:collapse;font-size:.97rem;font-variant-numeric:tabular-nums}
table.t th,table.t td{text-align:left;padding:.55rem .6rem .55rem 0;border-bottom:1px solid var(--line);vertical-align:top}
table.t th{color:var(--slate);font-weight:600}
.scroll{overflow-x:auto}
.pill{display:inline-block;padding:.1rem .55rem;border-radius:999px;font-size:.85rem;background:var(--line);color:var(--platinum)}
.pill.ok{background:#6FCF9722;color:#A8E6C1}.pill.warn{background:#FBBF2422;color:#FBD57A}.pill.bad{background:#EB8A8A22;color:#F2B8B8}
.box{background:var(--graphite);border:1px solid var(--line);border-radius:16px;padding:1.2rem;margin:1rem 0}
.box.warn{border-color:#FBBF2466}
form.f{display:grid;gap:.8rem;max-width:560px}
.f label,.inline label{display:grid;gap:.3rem;color:var(--mist);font-weight:600;font-size:.97rem}
.f input,.f select,.f textarea,.inline input,.inline select{font:inherit;color:var(--mist);background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:.6rem .75rem}
.f input:focus,.f select:focus,.f textarea:focus,.inline input:focus,.inline select:focus{border-color:var(--ice);outline:none}
.inline{display:flex;flex-wrap:wrap;gap:.8rem;align-items:end}
.inline label{min-width:130px}
.check{display:flex!important;gap:.5rem;align-items:center;font-weight:500!important}
.btn.sm{padding:.45rem .9rem;font-size:.95rem}
.btn.danger{background:#EB8A8A;color:var(--ink)}
.row-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.note{color:var(--slate);font-size:.93rem}
.msg{margin:.8rem 0}
.keybox{font:600 1.05rem ui-monospace,Menlo,monospace;background:var(--ink);border:1px dashed var(--ice);border-radius:10px;padding:.8rem;word-break:break-all;color:var(--mist)}
.signin{max-width:420px;margin:8vh auto}
details.acc{background:var(--graphite);border:1px solid var(--line);border-radius:16px;padding:.9rem 1.1rem;margin:.8rem 0}
details.acc summary{cursor:pointer;color:var(--mist);font-weight:700}
/* v2: phone first - the menu becomes a row of scrolling tabs, tables tighten */
@media (max-width:860px){.app{gap:1rem;padding:1rem .9rem 4rem}
.side nav{display:flex;gap:.3rem;overflow-x:auto;white-space:nowrap;padding-bottom:.4rem;border-bottom:1px solid var(--line)}
.side a{display:inline-block;margin:0}.side h4{display:inline-block;margin:0 .2rem 0 .8rem;align-self:center}
.main h1{font-size:1.6rem}.who{display:none}.cards{grid-template-columns:repeat(2,1fr)}.card b{font-size:1.5rem}}
.help{color:var(--slate);font-size:.95rem;margin:.2rem 0 1rem;max-width:720px}
.r{text-align:right}
ul.plain{margin:.5rem 0 0;padding-left:1.1rem}ul.plain li{margin:.25rem 0}
details.checklist summary{font-size:1.05rem}
ol.steps2{list-style:none;margin:.8rem 0 0;padding:0;counter-reset:s}
ol.steps2 li{counter-increment:s;display:flex;justify-content:space-between;gap:.8rem;align-items:center;padding:.7rem 0;border-top:1px solid var(--line)}
ol.steps2 li>div:first-child::before{content:counter(s) ". ";color:var(--ice);font-weight:700}
ol.steps2 li b{color:var(--mist)}ol.steps2 li span{display:block;color:var(--slate);font-size:.93rem}
ol.steps2 li.done b{color:var(--slate);text-decoration:line-through}
@media (max-width:600px){ol.steps2 li{flex-direction:column;align-items:flex-start}}
.approve{border-top:1px solid var(--line);margin-top:.8rem;padding-top:.6rem}
.approve .inline{margin:.4rem 0}
/* v2.1: phones - nothing scrolls sideways; the menu wraps; tables become stacked rows */
@media (max-width:860px){.side nav{flex-wrap:wrap;overflow-x:visible;white-space:normal;row-gap:.3rem}}
@media (max-width:600px){
table.t,table.t tbody,table.t tr,table.t td{display:block;width:100%}
table.t thead{display:none}
table.t tr{border-bottom:1px solid var(--line);padding:.5rem 0}
table.t td{border:0;padding:.15rem 0}
table.t td.r{text-align:left}
.scroll{overflow-x:visible}
.inline label{min-width:0;flex:1 1 45%}
.keybox{font-size:.9rem}
.main h2{margin-top:1.4rem}}
ol.steps2 .row-actions{flex-wrap:nowrap;align-items:center}
/* v2.2: a dropdown menu on phones; checklist actions all the same size and on one line */
.mnav{display:none}
@media (max-width:860px){.side nav{display:none}
.mnav{display:block;width:100%;font:inherit;font-weight:600;color:var(--mist);background:var(--graphite);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem}}
ol.steps2 li>div:first-child{flex:1;min-width:0}
ol.steps2 .row-actions{flex:none;justify-content:flex-end}
ol.steps2 .row-actions>*{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box;height:2.2rem;min-width:6.5rem;padding:0 .9rem;margin:0;border-radius:999px;font-size:.9rem;line-height:1}
@media (max-width:600px){ol.steps2 .row-actions{justify-content:flex-start}}
/* v2.4: compact base lines */
details.baserow{padding:.6rem .9rem;margin:.4rem 0}
details.baserow summary{font-weight:500;font-size:.95rem}
details.baserow table.set{margin-top:.6rem;max-width:420px}
.inline input.bad,.f input.bad{border-color:#F2B8B8;box-shadow:0 0 0 1px #F2B8B8}
.box.ok{border-color:#6FCF9766}
.toast{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:100;max-width:min(92vw,560px);padding:.8rem 1.2rem;border-radius:12px;font-weight:700;background:var(--graphite);color:var(--mist);border:1px solid var(--line);box-shadow:0 8px 30px #0008;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}.toast.ok{border-color:#6FCF97}.toast.bad{border-color:#F2B8B8;color:#F8D4D4}
/* v2.9 approval: one row per account; the symbol box shows once its account is ticked */
.pick{display:grid;gap:.55rem;margin:.7rem 0}
.pick-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:.9rem;align-items:start;padding:.7rem .8rem;border:1px solid var(--line);border-radius:12px}
.pick-row.on{border-color:var(--ice)}
.pick-acc{display:flex;gap:.65rem;align-items:flex-start;cursor:pointer;color:var(--mist);font-weight:600;line-height:1.35}
.pick-acc input{margin:.2rem 0 0;width:1.05rem;height:1.05rem;flex:none;accent-color:var(--ice)}
.pick-acc .muted{display:block;font-weight:400;font-size:.88rem;margin-top:.1rem}
.pick-sym{display:grid;gap:.3rem}
.pick-sym[hidden]{display:none}
.pick-sym label{color:var(--slate);font-size:.88rem;font-weight:600}
.pick-sym input{font:inherit;color:var(--mist);background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;width:100%;box-sizing:border-box}
.pick-sym input:focus{border-color:var(--ice);outline:none}
.pick-sym input.good{border-color:#8FD9B6}
.pick-sym input.bad{border-color:#F2B8B8;box-shadow:0 0 0 1px #F2B8B8}
.sym-msg{margin:0;font-size:.88rem;line-height:1.4;color:var(--slate)}
.sym-msg:empty{display:none}
.sym-msg.ok{color:#8FD9B6}
.sym-msg.bad{color:#F2B8B8}
.sym-msg .chip{font:inherit;font-size:.86rem;color:var(--mist);background:transparent;border:1px solid var(--ice);border-radius:999px;padding:.05rem .55rem;cursor:pointer;margin:0 .1rem}
@media (max-width:640px){.pick-row{grid-template-columns:1fr;gap:.55rem}}
/* v2.10 two-step set-up: the QR code on white, so every phone can read it */
.qr{display:inline-block;background:#fff;padding:10px;border-radius:12px;margin:.4rem 0}
.qr img,.qr svg{display:block;width:200px;height:200px}
.form-row{margin:1.5rem 0;flex-wrap:nowrap}
.form-row label{flex:1 1 0;min-width:0}
.form-row.wide-last label:last-child{flex:2 1 0}
.form-row select,.form-row input{width:100%;min-width:0;height:2.9rem;box-sizing:border-box}
@media (max-width:640px){.form-row{flex-wrap:wrap}.form-row label,.form-row.wide-last label:last-child{flex:1 1 100%}}
.dd-explain{border-left:3px solid var(--line);padding:.15rem 0 .15rem .9rem;margin:.4rem 0 1.2rem}
.dd-explain p{margin:.4rem 0}
.dd-explain .dd-now{color:var(--mist)}
.lbl{display:none}
@media (max-width:600px){table.trades .lbl{display:block;color:var(--slate);font-size:.82rem;font-weight:600;margin-top:.2rem}}