@import url('./tokens.css');

.vault-page {
 --world-color-ink:var(--cw-ink); --world-color-line:var(--cw-line); --world-color-chip:var(--cw-chip); --world-color-up:var(--cw-up);
 max-width:1100px; margin:0 auto; padding:16px 24px 32px; font-size: 0.875rem;
}
.w-kit{font-family:var(--font-ui); color:var(--world-color-ink); font-size:0.875rem; line-height:1.45; -webkit-text-size-adjust:100%}
.w-kit *{box-sizing:border-box}
.w-kit :focus-visible{outline:2px solid var(--cw-link); outline-offset:2px; border-radius:4px}
.w-num{font-variant-numeric:tabular-nums}
.w-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--world-color-action); background:var(--world-color-action); color:var(--cw-on-solid); font:inherit; font-weight:700; border-radius:8px; min-height:44px; padding:0 18px; cursor:pointer; text-decoration:none; transition:background 150ms ease}
.w-btn:hover,.w-btn.is-hover{background:var(--cw-red-ink); border-color:var(--cw-red-ink)}
.w-btn:active,.w-btn.is-active{transform:translateY(1px)}
.w-btn--secondary{background:var(--cw-card); border-color:var(--cw-line); color:var(--world-color-ink)}
.w-btn--secondary:hover,.w-btn--secondary.is-hover{background:var(--world-color-chip); border-color:var(--cw-line)}
.w-btn:disabled,.w-btn.is-disabled{opacity:.45; cursor:not-allowed; box-shadow:none; transform:none}
.w-read{display:inline-flex; align-items:center; gap:5px; color:var(--cw-muted); font-size:0.6875rem; font-weight:400}
.w-banner{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--world-color-line); background:var(--cw-card); border-radius:8px; padding:10px 14px; font-size:0.8125rem}
.w-badge-chain{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; min-width:16px; border-radius:50%; font-size: 0.5625rem; font-weight:800; color:#FFF}
.w-badge-chain--20{width:20px; height:20px; min-width:20px; font-size: 0.625rem}
.ch-base{background:var(--base); color:var(--cw-on-solid)}
.w-coin{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--cw-chip); color:var(--world-color-link); font-weight:800; font-size:0.875rem; letter-spacing:.02em; overflow:hidden}
.w-coin--sm{width:32px; height:32px; font-size:0.6875rem}
.w-lol{display:inline-flex; align-items:center; gap:7px; font-weight:700}
.w-lol::before{content:""; width:16px; height:16px; border-radius:50%; background:var(--cw-amber)}
.w-pad{border:1px solid var(--cw-line); background:var(--cw-card); border-radius:12px; padding:12px 14px}
.w-pad .amt{display:flex; align-items:baseline; gap:8px}
.w-pad .amt input{all:unset; font-size:1.625rem; font-weight:700; font-variant-numeric:tabular-nums; width:100%; min-width:0}
.w-pad .unit{font-size:0.875rem; color:var(--cw-muted); font-weight:500}
.w-pad .sub{display:flex; justify-content:space-between; margin-top:4px; font-size:0.75rem; color:var(--cw-muted)}
.w-pad .max{all:unset; cursor:pointer; color:var(--world-color-link); font-weight:700; font-size:0.75rem}
.w-check{width:20px; height:20px; accent-color:var(--world-color-action); flex:none}
.w-ledger{border-top:2px solid var(--world-color-ink)}
.w-ledger .w-lrow{display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--world-color-line)}
.w-lrow .mid{flex:1; min-width:0}
.w-lrow .sym{font-weight:700; display:flex; align-items:center; gap:6px}
.w-lrow .meta{color:var(--cw-muted); font-size:0.6875rem; margin-top:1px}
.w-lrow.is-hover,.w-lrow:hover{background:color-mix(in srgb, var(--world-color-chip) 45%, transparent)}
.w-status-chip{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:3px 10px; font-size:0.75rem; font-weight:700}
.w-status-chip.ok{background:var(--cw-good); color:var(--world-color-up)}
.w-quote{background:var(--cw-card); border:1px solid var(--cw-line); border-radius:12px; padding:14px}
.w-quote .w-btn{width:100%; margin-top:12px; border-radius:8px; box-shadow:none}
.w-risk{border:2px solid var(--world-color-ink); border-radius:8px; background:var(--cw-card); padding:14px}
.w-risk ol{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:0.8125rem; line-height:1.55}
.w-risk .ack{display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding-top:12px; border-top:1px dashed var(--cw-line); font-size:0.8125rem; font-weight:500}
.w-risk + .w-btn[disabled]{margin-top:10px}
.vhead{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-size: 0.8125rem}
.vhead .kv b{font-size: 1rem; font-variant-numeric:tabular-nums; display:block}
.vhead .kv span{color:var(--cw-muted); font-size: 0.6875rem}
.w-lrow .mid{flex:1 1 0; min-width:0}
@media (max-width:700px){
  .w-lrow{flex-wrap:wrap}
}
.spark30{display:inline-block; vertical-align:middle}
.util{display:inline-flex; align-items:center; gap:6px; cursor:help; border-bottom:1px dotted var(--cw-muted)}
.vgrid{display:grid; grid-template-columns:1fr; gap:18px}
@media (min-width:1000px){ .vgrid{grid-template-columns:minmax(0,1fr) 380px; align-items:start} .vside{position:sticky; top:74px} }
.ptabs{display:flex; gap:4px; background:var(--world-color-chip); border-radius:999px; padding:3px; width:fit-content}
.ptabs button{all:unset; cursor:pointer; padding:7px 16px; border-radius:999px; font-weight:700; font-size: 0.8125rem; min-height:30px; display:flex; align-items:center}
.ptabs button[aria-pressed="true"]{background:var(--cw-card); box-shadow:none}
.pend{border:1px solid var(--world-color-line); border-radius:10px; padding:10px 12px; font-size: 0.78125rem; display:flex; justify-content:space-between; gap:10px; font-variant-numeric:tabular-nums}

[hidden]{display:none!important}
.vault-page .vgrid>*,.vault-page .pend>*{min-width:0}
.vault-page h1{font-size: 1.5rem;margin:0;display:flex;gap:10px;align-items:center;font-weight:800}
.vault-page h2{font-size: 1.0625rem;margin:0 0 6px}
.vault-page .sec{padding-top:18px}
.vault-page .samplechip{font-size: 0.5625rem;font-weight:800;color:var(--cw-amber);border:1.5px dashed var(--cw-amber);border-radius:5px;padding:1px 6px;background:var(--cw-note);white-space:nowrap}
.vault-page .source,.vault-page .footnote{font-size: 0.65625rem;color:var(--cw-muted)}
.vault-page .source{margin:8px 0}
.vault-page .footnote{padding:14px 0 4px}
.vault-page .spark30{display:inline-block;vertical-align:middle}
.vault-page .demo{margin-top:24px;border-top:1px solid var(--world-color-line)}
.vault-page button,.vault-page select,.vault-page summary,.vault-page label.ack{min-height:44px}
.vault-page button,.vault-page select{font:inherit;color:inherit}
.vault-page select,.vault-page #theme-toggle{background:var(--cw-card);border:1px solid var(--world-color-line);border-radius:8px;padding:8px}
.vault-page .max{min-width:44px;text-align:center}
.vault-page .w-pad input:focus-visible{outline:2px solid var(--cw-link)}
.vault-page .w-banner{margin-top:12px;border-style:dashed}
.vault-page .util{min-height:24px}
.vault-page .pend{flex-wrap:wrap}
.vault-page .w-skel{min-height:100px;background:var(--world-color-chip);border-radius:8px}
.skiplink{position:absolute;left:-9999px;padding:12px;background:var(--cw-card);color:var(--cw-link)}
.skiplink:focus{left:0;z-index:999}
html[data-theme="dark"] .vault-page{--cw-bg:var(--race-panel);--cw-card:var(--race-panel-2);--cw-ink:var(--race-ink);--cw-muted:var(--race-ink-2);--cw-line:var(--race-zero);--cw-chip:var(--race-grid);--cw-up:var(--race-up);--cw-good:var(--race-panel);--cw-note:var(--race-panel);--cw-amber:var(--race-sun);--cw-link:var(--race-sky);background:var(--cw-bg);color:var(--cw-ink)}
@media(max-width:699px){.vault-page{padding-left:16px;padding-right:16px}.vault-page .w-lrow{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.vault-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.vault-page .samplechip,.vault-page .w-status-chip{border:1px solid CanvasText}}
.vault-page .w-pad .amt input{min-height:44px}
.vault-page .vhead>.source{flex-basis:100%}
.vault-page .w-btn:disabled{color:var(--cw-on-solid);opacity:1;background:var(--cw-muted);border-color:var(--cw-muted)}
.vault-page .w-btn--secondary:disabled{background:var(--cw-chip);color:var(--cw-ink);border-color:var(--cw-line)}
.vault-page [data-state="stale"] .w-quote{border-style:dashed}

.vault-page .w-banner[role="alert"]{border:2px solid var(--cw-amber);background:var(--cw-note);font-weight:700}