.zone-h { display:flex; gap:var(--s3); margin-top:var(--s5); }
.zone-h::after { content:""; flex:1; height:1px; background:var(--line); }
.zone-h.danger { color:var(--red); }
.zone-h.danger::before { background:var(--red); }
.zone-h.danger::after { background:rgba(var(--red-rgb),.25); }
.kv { display:flex; justify-content:space-between; gap:var(--s3); font-size:var(--fs-ui);
      padding:var(--s2) 0; border-bottom:1px solid var(--line); }
.kv:not(:has(~ .kv:not([hidden]))) { border-bottom:0; }   
.kv .v { font-family:var(--mono); }
.rp-pane > section > * + * { margin-top:var(--s3); }

.acct-heads { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
              gap:var(--s3); }

.acct-num { display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0;
            font:var(--fs-lg)/1 var(--mono); letter-spacing:.06em; color:var(--muted); cursor:pointer;
            transition:color .45s; }
.acct-num:hover { color:var(--text); transition-duration:var(--t-fast); }
.acct-num .ico { width:15px; height:15px; flex:none; }

.acct-num .check { display:none; }
.acct-num .check path { stroke-dasharray:24; stroke-dashoffset:24; }
.acct-num.copied { color:var(--acc); transition-duration:var(--t-fast);
                   animation:numPop var(--t) var(--ease-out); }
.acct-num.copied .clip { display:none; }
.acct-num.copied .check { display:inline; }
.acct-num.copied .check path { animation:draw .3s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes numPop { 50% { transform:scale(1.06); } }

.acct-num .blur, .acct-num .g { display:inline-block; }
.acct-num .blur { filter:blur(5px); user-select:none; }
.acct-num .blur::before { content:attr(data-d); }
.acct-num.peeling .g { animation:unblur .34s var(--ease-out) backwards; }
.acct-num.peeling .g:nth-child(2) { animation-delay:.07s; }
.acct-num.peeling .g:nth-child(3) { animation-delay:.14s; }
@keyframes unblur { from { filter:blur(5px); } }
.acct-bal { display:flex; flex-direction:column; gap:var(--s1); padding:var(--s3);
            background:var(--bg2); border:1px solid var(--line); }
.acct-bal .big { font:700 28px/1.1 var(--mono); color:var(--text); }
.acct-bal .big[data-state=ok] { color:var(--green); }
.acct-bal .big[data-state=warn] { color:var(--yellow); }
.acct-bal .big[data-state=bad] { color:var(--red); }

.meter { height:6px; background:var(--bg0); border:1px solid var(--line); margin-top:var(--s1);
         overflow:hidden; }

.meter i { --ink:rgb(var(--heat-rgb, var(--acc-rgb))); position:relative; display:block;
           height:100%; background:var(--ink); transition:width var(--t), background-color var(--t); }

.meter.cooling i { box-shadow:0 0 8px var(--ink); }
.meter.cooling i::after { content:""; position:absolute; inset:0; background-repeat:no-repeat;
  background-image:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  background-size:40% 100%; animation:meterWave 2.6s ease-in-out infinite; }
@keyframes meterWave { from { background-position:-70% 0; } to { background-position:170% 0; } }

.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:1px;
         background:var(--line); border:1px solid var(--line); }
.stats div { background:var(--bg1); padding:var(--s2) var(--s3); }
.stats .k { display:block; font:600 var(--fs-micro) var(--mono); letter-spacing:.08em;
            text-transform:uppercase; color:var(--faint); }
.stats .v { font:700 var(--fs-lg)/1.2 var(--mono); color:var(--text); }

.acct-bal .go { margin-top:var(--s2); }

.fallback { display:flex; flex-direction:column; gap:var(--s1); margin-top:var(--s2);
            padding-top:var(--s2); border-top:1px solid var(--line); }

.charts { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
          grid-auto-rows:minmax(0, 1fr); gap:var(--s3); }
.chart { margin:0; }
.chart figcaption { display:flex; justify-content:space-between; gap:var(--s2);
                    color:var(--faint); }
.chart figcaption b { color:var(--muted); font-weight:600; }

.days { display:flex; align-items:flex-end; gap:2px; flex:1 1 auto; min-height:64px;
        border-bottom:1px solid var(--line2); }
.days i { flex:1; min-width:2px; background:var(--acc); min-height:1px;
          transition:height var(--t); }
.days i[data-zero] { background:var(--line2); }
.ranks { display:flex; flex-direction:column; gap:var(--s2); }
.ranks .r { display:grid; grid-template-columns:1fr auto; gap:var(--s2) var(--s3);
            font:var(--fs-micro) var(--mono); color:var(--muted); }
.ranks .track { grid-column:1 / -1; height:6px; background:var(--bg0);
                border:1px solid var(--line); }
.ranks .track i { display:block; height:100%; background:var(--acc); }
.chart .empty { padding:var(--s4) 0; }

.deposit-gain { position:fixed; z-index:var(--z-pop); pointer-events:none; white-space:nowrap;
                color:var(--acc); font:700 var(--fs-ui) var(--mono);
                text-shadow:0 0 12px rgba(var(--acc-rgb),.6);
                animation:depositRise 1.8s var(--ease-out) forwards; }
@keyframes depositRise { 0% { opacity:0; transform:translateY(14px) scale(.9); }
                         20% { opacity:1; transform:translateY(0) scale(1.1); }
                         75% { opacity:1; transform:translateY(-4px) scale(1); }
                         100% { opacity:0; transform:translateY(-8px) scale(1); } }
.rp-pane .zone-h { margin-top:var(--s4); }
.rp-pane > section > .zone-h:first-child { margin-top:0; }

.cli-win .win-b > * + * { margin-top:var(--s3); }
.docs-row { display:flex; flex-wrap:wrap; gap:var(--s2); }

.bill-grid { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--s5); }
.bill-hist { border-top:1px solid var(--line); padding-top:var(--s5); }
@media (min-width:860px) {
  
  .bill-grid { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0; position:relative; }
  .bill-grid::before { content:""; position:absolute; inset:0 auto 0 50%; width:1px;
                       background:var(--line); }
  .bill-hist { border-top:0; padding:0 0 0 var(--s5); }
  
  .bill-manage { padding-right:var(--s5); position:sticky; top:var(--s4); align-self:start; }
}
.bill-manage > * + *, .bill-hist > * + * { margin-top:var(--s3); }
.bill-manage .zone-h ~ .zone-h { margin-top:var(--s5); }
.bill-manage .zone-h:first-child, .bill-hist .zone-h { margin-top:0; }
.sub-now { display:flex; align-items:center; gap:var(--s3); }

.acct-foot { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--s2); }

#deleteNote { flex-basis:100%; margin:0; text-align:right; color:var(--red); }

#confirmBody label { display:block; margin-top:var(--s3); }
#confirmBody input { width:100%; margin-top:var(--s2); font-family:var(--mono); }
.rowlist { display:flex; flex-direction:column; }
.rowlist .r { display:flex; gap:var(--s3); align-items:center; padding:var(--s2) 0;
              border-bottom:1px solid var(--line); font:var(--fs-ui) var(--mono); }
.rowlist .r .grow { flex:1; min-width:0; color:var(--muted); }
.rowlist .r .when { color:var(--faint); min-width:7ch; }
.rowlist .r .amt { margin-left:auto; font-variant-numeric:tabular-nums; color:var(--text); }
.rowlist .r[data-credited=false] .grow { color:var(--faint); }
.rowlist .r[data-credited=false] .amt { color:var(--faint); text-decoration:line-through; }
.sub-now .nm { flex:1 1 auto; }

.cli-row input { min-width:0; padding:var(--s2) var(--s3); background:var(--bg0);
                 color:inherit; border:1px solid var(--line);
                 font:var(--fs-code)/1.4 var(--mono); }
.cli-row input:focus { outline:1px solid var(--acc); outline-offset:-1px; }

.cli-sep { display:flex; align-items:center; gap:var(--s3); margin:var(--s4) 0; }
.cli-sep::before, .cli-sep::after { content:""; flex:1; height:1px; background:var(--line); }
.cli-sep span { font:var(--fs-micro) var(--mono); color:var(--faint);
                text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.cli-for { display:inline-block; padding:1px var(--s2); border:1px solid var(--acc);
           color:var(--acc); font:600 var(--fs-micro) var(--mono); letter-spacing:.06em;
           text-transform:uppercase; }
.cli-lbl { display:flex; align-items:baseline; gap:var(--s2); margin-bottom:var(--s2); }
.cli-os { display:flex; gap:var(--s2); margin-bottom:var(--s2); }
@media (max-width:720px) {
  
  .charts { grid-auto-rows:auto; }
  .days { flex:none; height:64px; }
  
  #usagePane thead { display:none; }
  #usagePane table, #usagePane tbody { display:block; }
  #usagePane tr { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:var(--s3);
                  padding:var(--s2) var(--s3); border-bottom:1px solid var(--line); }
  #usagePane tr::after { content:""; order:3; flex-basis:100%; }
  #usagePane td { display:block; order:4; padding:0; border:0;
                  font:var(--fs-micro)/1.6 var(--mono); color:var(--muted); }
  #usagePane td.lead { order:1; flex:1; font:600 var(--fs-ui)/1.5 var(--ui); color:var(--text); }
  #usagePane td.fig { order:2; font:600 var(--fs-ui)/1.5 var(--mono); color:var(--text); }
  #usagePane td.empty { order:1; flex:1; padding:var(--s4) 0; text-align:center; }
  #usagePane td:not(.lead):not(.fig):not(.bare)::after { content:" " attr(data-label);
                                                         color:var(--faint); }
  
  #devList .r { flex-wrap:wrap; row-gap:var(--s1); }
  #devList .r .grow { flex-basis:100%; overflow-wrap:anywhere; }
  #devList .r > :last-child { margin-left:auto; }
}