/* /dev only: account button + account screen */
.acctbtn{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:var(--glass-2);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi);transition:background .2s}
.acctbtn:hover{background:var(--glass-3)}
.acctbtn img{width:100%;height:100%;object-fit:cover;display:block}
.acctbtn svg{opacity:.9}

#acct{border:0;padding:0;background:transparent;color:var(--ink);width:min(400px,calc(100% - 24px));max-height:calc(100% - 24px);margin:auto;overflow:visible}
#acct::backdrop{background:rgba(10,8,12,.6)}
#acct[open] .acard{animation:up .25s cubic-bezier(.2,.8,.2,1) both}
.acard{position:relative;border-radius:28px;padding:32px 28px 26px;text-align:center;
  background:rgba(24,21,42,.96);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi),0 40px 100px rgba(0,0,0,.6)}
.acard .x{top:12px;right:12px;width:36px;height:36px;font-size:22px;background:var(--glass);border:1px solid var(--edge)}
.acard h2{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.acard p{color:var(--soft);font-size:14.5px;line-height:1.5}
.acard .fine{margin-top:18px;font-size:12.5px;color:var(--mute)}
.gbtn{display:flex;justify-content:center;margin:22px 0 4px;min-height:44px}
.avatar{width:84px;height:84px;border-radius:50%;margin:4px auto 14px;display:grid;place-items:center;overflow:hidden;
  background:var(--glass-3);font-size:34px;font-weight:700;border:1px solid var(--edge)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.acard .email{color:var(--mute);font-size:14px;margin-top:2px;word-break:break-all}
.astats{display:flex;gap:10px;margin:22px 0 4px}
.astats div{flex:1;padding:12px 8px;border-radius:16px;background:var(--glass);border:1px solid var(--edge)}
.astats b{display:block;font-size:22px;font-weight:700}
.astats span{font-size:12.5px;color:var(--mute)}
.abtns{display:flex;gap:10px;margin-top:20px}
.abtns button{flex:1;padding:12px 16px;border-radius:999px;font-weight:600;font-size:14.5px;background:var(--glass-2);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi)}
.abtns button:hover{background:var(--glass-3)}
.abtns .pri{background:var(--butter);color:#1B1408;border-color:var(--butter)}
.setup{text-align:left;margin-top:16px;padding:14px 16px;border-radius:16px;background:var(--glass);border:1px solid var(--edge);font-size:13.5px;line-height:1.55;color:var(--soft)}
.setup ol{list-style:decimal;padding-left:18px}
.setup code{font-size:12.5px;background:rgba(255,255,255,.1);padding:1px 6px;border-radius:6px}
.aerr{margin-top:12px;color:#ffb4b4;font-size:13.5px}
@media(max-width:720px){#bar .acctbtn{order:2}}

/* subscription pane */
.acard .back{position:absolute;top:14px;left:16px;padding:6px 10px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--soft)}
.acard .back:hover{background:var(--glass-2);color:#fff}
.acard .abtns + .abtns{margin-top:10px}
.subrows{margin:20px 0 4px;border-radius:18px;background:var(--glass);border:1px solid var(--edge);text-align:left}
.subrow{display:flex;justify-content:space-between;gap:12px;padding:13px 16px;font-size:14.5px}
.subrow + .subrow{border-top:1px solid var(--edge)}
.subrow span{color:var(--mute)}

/* email + password form */
.atabs{margin:18px auto 0}
.aform{display:flex;flex-direction:column;gap:10px;margin-top:16px;text-align:left}
.afield{width:100%;padding:13px 16px;border-radius:14px;font-size:15px;background:rgba(255,255,255,.06);border:1px solid var(--edge)}
.afield::placeholder{color:var(--mute)}
.afield:focus{outline:none;background:var(--glass-2);border-color:rgba(255,255,255,.4)}
.aform .btn{width:100%;justify-content:center;margin-top:4px}
.btn[disabled]{opacity:.6;cursor:default}
.aerr{margin:0;color:#ffb4b4;font-size:13.5px;text-align:left}
.aerr:empty{display:none}
.anote{margin-top:14px;padding:11px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--edge);font-size:13.5px;color:var(--soft);text-align:left}
.alink{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--soft);text-decoration:underline;text-underline-offset:3px}
.alink:hover{color:#fff}
.setup .alink{margin:0 0 0 4px}
.avatar span{line-height:1}

/* plans */
.plans{display:flex;flex-direction:column;gap:12px;margin-top:18px;text-align:left}
.plan{padding:16px;border-radius:18px;background:var(--glass);border:1px solid var(--edge)}
.plan b{font-size:16px}
.plan p{margin-top:4px;font-size:13.5px}
.plan .btn{width:100%;justify-content:center;margin-top:12px}
#suberr{margin-top:12px;text-align:center}
.plan .price{margin-top:4px;font-size:26px;font-weight:700;letter-spacing:-.02em}
.plan .price span{font-size:13.5px;font-weight:500;color:var(--mute);letter-spacing:0}