/* ============================================================================
   ACCOUNT — BANKNOTE
   Ported from the reference account sheet (variant 18) with the same
   composition, type scale and engraving: rainbow-printed ribbons, two-colour
   rosettes, hatched portrait, microtext border.
   Every selector is scoped to .lw-acct, so the desk's own .chip/.dot/.b
   classes are never touched. Colour comes from the active palette.
   ========================================================================= */

.lw-acct{
  position:absolute;inset:0;z-index:60;
  background:var(--bg);
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  animation:lwAcctIn .42s var(--ease) both;
}
@keyframes lwAcctIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lw-acct[hidden]{display:none!important}

.lw-acct .lw-acct-scroll{
  min-height:100%;
  padding:clamp(18px,3.2vh,34px) clamp(16px,3vw,40px) 56px;
}

/* ------------------------------------------------------------------- shell -- */
.lw-acct .v{
  --ac:var(--acc);--fg:var(--tx);--mu:var(--dim);--ln:var(--hair);--r:8px;
  position:relative;z-index:1;max-width:1040px;margin:0 auto;color:var(--fg);
  animation:lwAcctV 1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes lwAcctV{from{opacity:0;transform:translateY(16px);filter:blur(8px)}}

.lw-acct .top{display:flex;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.lw-acct .top .sp{flex:1}
.lw-acct .wm{
  font:italic 600 32px 'Cormorant Garamond',var(--serif),Georgia,serif;
  background:linear-gradient(180deg,#fff1c7,var(--ac) 55%,#8a6420);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:flex;align-items:center;gap:10px;
}
.lw-acct .wm i{
  font:600 9px 'JetBrains Mono',var(--mono),monospace;letter-spacing:.14em;font-style:normal;
  color:var(--ac);-webkit-text-fill-color:var(--ac);
  border:1px solid var(--ac);padding:4px 7px;border-radius:4px;
  background:color-mix(in srgb,var(--ac) 14%,transparent);
}
.lw-acct .top em{
  font:10px 'JetBrains Mono',var(--mono),monospace;letter-spacing:.24em;
  color:var(--mu);font-style:normal;
}
.lw-acct .ses{
  display:flex;align-items:center;gap:8px;
  font:10px 'JetBrains Mono',var(--mono),monospace;letter-spacing:.18em;color:var(--grn);
}
.lw-acct .b,.lw-acct .out a{
  all:unset;box-sizing:border-box;cursor:pointer;
  font:600 10px 'JetBrains Mono',var(--mono),monospace;letter-spacing:.16em;
  padding:10px 16px;border:1px solid var(--line-2);border-radius:var(--r);
  color:var(--fg);transition:.3s;display:inline-block;
}
.lw-acct .b:hover,.lw-acct .out a:hover{background:var(--ac);color:var(--acc-ink);border-color:var(--ac)}
.lw-acct .b:focus-visible,.lw-acct .out a:focus-visible{outline:2px solid var(--ac)}
.lw-acct .out{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;align-items:center}
.lw-acct .out .b.p{background:var(--ac);color:var(--acc-ink)}
.lw-acct .ft{margin-top:18px;color:var(--mu);font-size:11.5px}

.lw-acct .chip{
  display:inline-flex;gap:8px;align-items:center;
  font:600 9.5px 'JetBrains Mono',var(--mono),monospace;letter-spacing:.2em;
  padding:6px 11px;border:1px solid color-mix(in srgb,var(--grn) 40%,transparent);
  color:var(--grn);border-radius:99px;
  background:color-mix(in srgb,var(--grn) 8%,transparent);
}
.lw-acct .dot{
  width:8px;height:8px;border-radius:50%;background:var(--grn);display:inline-block;
  animation:lwAcctPl 2s infinite;
}
@keyframes lwAcctPl{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--grn) 60%,transparent)}
  70%,100%{box-shadow:0 0 0 9px transparent}
}

.lw-acct h1{
  font:italic 600 clamp(38px,6vw,60px)/1 'Cormorant Garamond',var(--serif),Georgia,serif;
}
.lw-acct .em{color:var(--mu);font-size:13px;margin-top:4px;word-break:break-all}

.lw-acct .cols{display:grid;grid-template-columns:1.05fr 1fr;gap:18px;margin-top:18px}
@media(max-width:820px){.lw-acct .cols{grid-template-columns:1fr}}
.lw-acct .pn{
  padding:22px;border:1px solid var(--ln);border-radius:var(--r);position:relative;
  background:color-mix(in srgb,var(--panel) 55%,transparent);
}
.lw-acct .pn h3{
  font:italic 600 22px 'Cormorant Garamond',var(--serif),Georgia,serif;
  color:var(--ac);margin-bottom:6px;
}
.lw-acct .fl div{
  display:flex;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--ln);
}
.lw-acct dt{
  color:var(--mu);font:10px 'JetBrains Mono',var(--mono),monospace;letter-spacing:.2em;
}
.lw-acct dd{font-weight:500;text-align:right;word-break:break-all}
.lw-acct .cdw{
  margin-top:14px;font:10px 'JetBrains Mono',var(--mono),monospace;
  letter-spacing:.16em;color:var(--mu);
}
.lw-acct .cdw b{color:var(--ac);font-size:15px;letter-spacing:.1em;margin-left:8px}
.lw-acct .seal{
  margin-top:8px;font:10px 'JetBrains Mono',var(--mono),monospace;
  color:var(--mu);word-break:break-all;
}
.lw-acct .seal b{color:var(--fg);font-weight:400}
.lw-acct .cth{
  display:flex;align-items:center;gap:10px;font:600 13px var(--sans);margin-bottom:12px;
}
.lw-acct .cth b{
  margin-left:auto;font:600 9px 'JetBrains Mono',var(--mono),monospace;
  letter-spacing:.14em;color:var(--grn);
}
.lw-acct .ct dl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lw-acct .ct dl div{
  padding:10px 12px;border:1px solid var(--ln);border-radius:var(--r);
  background:color-mix(in srgb,var(--panel) 70%,transparent);
}
.lw-acct .ct dd{text-align:left;margin-top:4px;font-size:13px}
.lw-acct .acts{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.lw-acct .acts .b{padding:9px 12px;font-size:9.5px}
.lw-acct .sigs{list-style:none;padding:0}
.lw-acct .sigs li{
  display:grid;grid-template-columns:1fr auto auto auto;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--ln);
  font:11px 'JetBrains Mono',var(--mono),monospace;
}
.lw-acct .sigs i{font-style:normal;color:var(--grn);font-weight:600}
.lw-acct .sigs .SELL i{color:var(--red)}
.lw-acct .sigs em{font-style:normal;color:var(--ac)}

/* --------------------------------------------------------------- banknote -- */
.lw-acct .a18{--ac:var(--acc);--fg:var(--tx);--mu:var(--dim);--ln:var(--hair)}
.lw-acct .bn18{
  position:relative;border-radius:18px;overflow:hidden;
  aspect-ratio:2.2;min-height:380px;
  background:var(--panel);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  border:1px solid color-mix(in srgb,var(--acc) 18%,transparent);
}
.lw-acct .bn18>canvas{position:absolute;inset:0;width:100%;height:100%}
.lw-acct .in18{
  position:absolute;inset:0;display:grid;grid-template-columns:170px 1fr;
  gap:28px;padding:36px 46px;align-items:center;
}
.lw-acct .l18{display:flex;flex-direction:column;align-items:center}
.lw-acct .por{
  width:150px;height:196px;border-radius:50%;display:grid;place-items:center;
  background:
    repeating-linear-gradient(135deg,color-mix(in srgb,var(--acc) 34%,transparent) 0 1px,transparent 1px 4px),
    radial-gradient(color-mix(in srgb,var(--panel-2) 82%,#0e2022),var(--bg));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--acc) 38%,transparent),
    0 0 0 6px var(--panel),
    0 0 0 7px color-mix(in srgb,var(--acc) 25%,transparent);
}
.lw-acct .por b{
  font:italic 600 62px 'Cormorant Garamond',var(--serif),Georgia,serif;
  color:var(--acc-2);
}
.lw-acct .sn{
  margin-top:18px;text-align:center;
  font:600 10px 'JetBrains Mono',var(--mono),monospace;letter-spacing:.2em;color:var(--ac);
}
.lw-acct .m18{
  padding:20px 26px;border-radius:14px;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.lw-acct .m18 h1{font-size:clamp(34px,5vw,52px)}
.lw-acct .f18{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-top:16px}
.lw-acct .f18 small{
  display:block;font:9px 'JetBrains Mono',var(--mono),monospace;
  letter-spacing:.18em;color:var(--mu);margin-bottom:3px;
}
.lw-acct .f18 b{
  font:500 17px 'Cormorant Garamond',var(--serif),Georgia,serif;word-break:break-all;
}

@media(max-width:760px){
  .lw-acct .in18{grid-template-columns:1fr;position:relative;padding:26px 22px}
  .lw-acct .bn18{aspect-ratio:auto}
  .lw-acct .l18{flex-direction:row;gap:18px;justify-content:flex-start;margin-bottom:14px}
  .lw-acct .por{width:78px;height:100px}
  .lw-acct .por b{font-size:34px}
  .lw-acct .sn{margin-top:0;text-align:left}
}

/* empty state */
.lw-acct .lw-acct-empty{max-width:520px;margin:12vh auto 0;text-align:center}
.lw-acct .lw-acct-empty .kicker{
  font:600 9px 'JetBrains Mono',var(--mono),monospace;letter-spacing:.26em;color:var(--dim);
}
.lw-acct .lw-acct-empty h2{
  font:italic 600 clamp(34px,4.4vw,50px)/1.06 'Cormorant Garamond',var(--serif),Georgia,serif;
  color:var(--tx);margin:14px 0 12px;
}
.lw-acct .lw-acct-empty p{color:var(--dim);font-size:13px;line-height:1.8;margin-bottom:22px}
.lw-acct .lw-acct-empty .b{display:inline-block}

/* long values wrap at spaces, not mid-word */
.lw-acct .ct dd{word-break:normal;overflow-wrap:anywhere}
.lw-acct .seal b{word-break:break-all}

/* ============================================================================
   ACCOUNT — INSTITUTIONAL (v1)
   The original reference card: a 200px engraved cover, a rotating conic avatar
   ring, a gradient name, and the identity ledger. The dust field is the
   reference R4 engine, unchanged in geometry.
   ========================================================================= */
.lw-acct .a1 .cover{
  height:200px;border:1px solid var(--acc-line);border-radius:8px;
  overflow:hidden;position:relative;background:var(--bg);
}
.lw-acct .a1 .cover canvas{width:100%;height:100%;display:block}
.lw-acct .a1 .cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 0%,transparent 45%,var(--bg) 100%),
    linear-gradient(transparent 72%,var(--bg));
}
.lw-acct .a1 .id{
  display:flex;gap:22px;align-items:flex-end;
  margin:-54px 0 0 28px;position:relative;flex-wrap:wrap;z-index:2;
}
.lw-acct .a1 .av{
  width:112px;height:112px;border-radius:50%;padding:3px;flex:none;
  background:conic-gradient(from 0deg,var(--acc-2),var(--acc-3),var(--acc),var(--acc-2));
  animation:lwAvSpin 8s linear infinite;
}
.lw-acct .a1 .av b{
  display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:var(--bg);
  font:italic 600 44px 'Cormorant Garamond',var(--serif),Georgia,serif;
  color:var(--acc-2);
  animation:lwAvSpin 8s linear infinite reverse;
}
@keyframes lwAvSpin{to{transform:rotate(360deg)}}
.lw-acct .a1 h1{
  margin:8px 0 4px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc-2) 70%,#fff),var(--acc) 60%,var(--acc-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lw-acct .a1 .id p{color:var(--dim);font-size:12.5px}
.lw-acct .a1 .id .chip{margin-bottom:2px}

@media(max-width:760px){
  .lw-acct .a1 .cover{height:150px}
  .lw-acct .a1 .id{margin:-40px 0 0 16px;gap:14px}
  .lw-acct .a1 .av{width:84px;height:84px}
  .lw-acct .a1 .av b{font-size:32px}
}

/* the ledger is the only card: full width, no second panel */
.lw-acct .cols.single{grid-template-columns:1fr}
.lw-acct .out{gap:14px;margin-top:26px;align-items:center}
.lw-acct .out .b.p{
  background:var(--acc)!important;color:var(--acc-ink)!important;
  border:0!important;outline:0!important;border-radius:4px!important;
  padding:12px 22px!important;box-shadow:none!important;
}
.lw-acct .out .b.p:hover{filter:brightness(1.06)}
.lw-acct .out a{
  border:0!important;outline:0!important;border-radius:0!important;
  background:transparent!important;color:var(--dim)!important;
  padding:12px 4px!important;text-decoration:none;
  border-bottom:1px solid transparent!important;
}
.lw-acct .out a:hover{color:var(--tx)!important;border-bottom-color:var(--acc)!important}
.lw-acct .out .b:focus-visible,
.lw-acct .out a:focus-visible{outline:none!important;box-shadow:none!important}