/* Dashboard on the AppZen look. Class names are the partner's (original/dashboard.html). */
body.app-page { font-size: 15px; padding-inline: 20px; }
body.app-page > .wrap { max-width: 1080px; gap: 20px; }
body.app-page #app > .wrap { gap: 16px; margin-top: 56px; }

/* cards: the template's dark rounded cards */
body.app-page .card, body.app-page .tile { background: #0d0d0d; border: 0; border-radius: 24px; box-shadow: rgba(255, 255, 255, .04) 0 0 0 1px inset; }
body.app-page .card { padding: 24px; }
body.app-page .card h2 { font: 400 28px/1.15 var(--font-display); letter-spacing: -0.3px; color: #fff; }
body.app-page .card .sub { color: #8a8a8a; font-size: 15px; line-height: 1.5; }
body.app-page .card .sub a, body.app-page .dev-head .sub a { color: #e5e5e5; text-decoration: underline; text-underline-offset: 3px; }

/* sign-in strip = small hero */
body.app-page .strip { position: relative; overflow: hidden; padding: 40px; grid-template-columns: minmax(0, 1fr) auto; background: #0d0d0d; }
body.app-page .strip::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 100% at 25% 0%, rgba(61, 123, 255, .16) 0%, rgba(61, 123, 255, 0) 100%); pointer-events: none; }
body.app-page .strip > * { position: relative; }
body.app-page .strip h1 { font: 500 clamp(36px, 5vw, 56px)/1.1 var(--font-display); letter-spacing: -0.2px; color: #fff; }
body.app-page .strip h1 em { color: #737373; }
body.app-page .strip .sub { font-size: 18px; line-height: 1.4; color: #737373; margin-top: 16px; }
body.app-page .strip .btn { padding: 16px 32px; font-size: 18px; }

/* stat tiles */
body.app-page .tile { padding: 20px 22px; gap: 8px; }
body.app-page .tile .k { color: #8a8a8a; font-size: 14px; }
body.app-page .tile .v { font: 400 36px/1.1 var(--font-display); letter-spacing: -0.7px; color: #f5f5f5; font-variant-numeric: tabular-nums; }
body.app-page .tile .v.go { color: #8CB8FF; }

/* section tabs */
body.app-page .tabs { background: #0d0d0d; border-radius: 16px; padding: 4px; box-shadow: rgba(255, 255, 255, .04) 0 0 0 1px inset; }
body.app-page .tabs button { font: 400 16px var(--font-body); letter-spacing: -0.32px; color: #a3a3a3; border-radius: 12px; padding: 8px 16px; }
body.app-page .tabs button[aria-selected="true"] { background: #262626; color: #fff; box-shadow: none; }
body.app-page .badge-soon { font: 500 11px var(--font-body); letter-spacing: 0; text-transform: none; color: #8CB8FF; background: rgba(61, 123, 255, .12); border-radius: 6px; }

/* vaults list + detail */
body.app-page .vlist { padding: 8px; }
body.app-page .vlist h3 { font: 500 14px var(--font-body); letter-spacing: -0.2px; text-transform: none; color: #737373; padding: 12px 12px 8px; }
body.app-page .vrow { border-radius: 14px; padding: 12px; color: #f5f5f5; }
body.app-page .vrow:hover { background: #171717; }
body.app-page .vrow[aria-selected="true"] { background: #171717; box-shadow: inset 0 0 0 1px rgba(61, 123, 255, .35); }
body.app-page .vrow .ic, body.app-page .vhead .sym i { width: 34px; height: 34px; border-radius: 10px; background: #1f1f1f; color: #e5e5e5; font: 600 11px var(--font-body); }
body.app-page .vrow .nm small { color: #737373; }
body.app-page .vrow .rt { font: 500 14px var(--font-body); }
body.app-page .vhead .sym { font: 400 28px var(--font-display); color: #fff; }
body.app-page .vrate .big { font: 500 clamp(44px, 6vw, 64px)/1 var(--font-display); color: #8CB8FF; letter-spacing: -1px; }
body.app-page .vrate .big small { color: #737373; font-size: 18px; }
body.app-page .facts div { background: #171717; border-radius: 14px; padding: 12px 14px; }
body.app-page .facts span { color: #737373; font-size: 13px; }
body.app-page .facts b { font: 500 16px var(--font-body); color: #f5f5f5; }
body.app-page .buys strong { color: #f5f5f5; }
body.app-page .pill { font: 500 12px var(--font-body); background: #1f1f1f; color: #a3a3a3; border-radius: 8px; padding: 3px 9px; }
body.app-page .pill.go { background: rgba(61, 123, 255, .12); color: #8CB8FF; }
body.app-page .health .bar { background: linear-gradient(90deg, rgba(61, 123, 255, .25) 0 38%, rgba(234, 179, 8, .25) 38% 62.5%, rgba(248, 113, 113, .25) 62.5% 100%); }
body.app-page .health .scale { font: 12px var(--font-body); }
body.app-page .safe { border-top-color: rgba(255, 255, 255, .06); }
body.app-page .safe .contract { font: 500 14px var(--font-body); color: #8CB8FF; }
body.app-page .seg { background: #171717; border-radius: 14px; }
body.app-page .seg button { border-radius: 10px; font: 400 15px var(--font-body); color: #a3a3a3; }
body.app-page .seg button[aria-pressed="true"] { background: #262626; color: #fff; }
body.app-page .maxbtn { font: 500 13px var(--font-body); color: #8CB8FF; }

/* inputs */
body.app-page .money-in, body.app-page .buy-input { background: #171717; border: 0; box-shadow: rgba(255, 255, 255, .06) 0 0 0 1px inset; border-radius: 16px; }
body.app-page .money-in:focus-within, body.app-page .buy-input:focus-within { box-shadow: rgba(61, 123, 255, .5) 0 0 0 1px inset; }
body.app-page .money-in input { font: 400 28px var(--font-display); color: #fff; }
body.app-page .money-in span, body.app-page .buy-input span { font: 400 16px var(--font-body); color: #737373; }
body.app-page .buy-input span { font-size: 26px; line-height: 1.5; }
body.app-page .buy-input input { font: 400 40px var(--font-display); color: #fff; letter-spacing: -0.8px; }
body.app-page .quick button { font: 500 13px var(--font-body); border: 0; background: #1f1f1f; color: #a3a3a3; border-radius: 10px; }
body.app-page .addr { font: 13px var(--font-mono); background: #171717; border-radius: 12px; }
body.app-page .keybox { background: #070707; box-shadow: rgba(255, 255, 255, .06) 0 0 0 1px inset; border-radius: 12px; color: #BFD7FF; }
body.app-page .newkey { border: 0; background: rgba(61, 123, 255, .08); box-shadow: rgba(61, 123, 255, .3) 0 0 0 1px inset; border-radius: 18px; }
body.app-page .keyform { border: 0; background: #121212; box-shadow: rgba(255, 255, 255, .05) 0 0 0 1px inset; border-radius: 18px; padding: 18px; }
body.app-page .keyform label { color: #e5e5e5; font: 500 14px var(--font-body); }
body.app-page .keyform input, body.app-page .keyform textarea { background: #1a1a1a; color: #f5f5f5; border: 0; box-shadow: rgba(255, 255, 255, .07) 0 0 0 1px inset; border-radius: 12px; padding: 11px 14px; }
body.app-page .keyform input:focus, body.app-page .keyform textarea:focus { outline: 0; box-shadow: rgba(61, 123, 255, .5) 0 0 0 1px inset; }
body.app-page .apptype label { background: #1a1a1a; border: 0; box-shadow: rgba(255, 255, 255, .07) 0 0 0 1px inset; border-radius: 14px; }
body.app-page .apptype label:has(input:checked) { box-shadow: rgba(61, 123, 255, .5) 0 0 0 1px inset; background: rgba(61, 123, 255, .06); }
body.app-page .apptype b { color: #f5f5f5; }
body.app-page .kv > span { font: 500 13px var(--font-body); letter-spacing: 0; text-transform: none; color: #737373; }
body.app-page .kv div { border-bottom-color: rgba(255, 255, 255, .06); }
body.app-page .kv { border-top-color: rgba(255, 255, 255, .06); }
body.app-page .kv dd { font: 500 15px var(--font-body); }
body.app-page select, body.app-page .chat-top select, body.app-page .act-tools select { background-color: #1a1a1a; color: #f5f5f5; border: 0; box-shadow: rgba(255, 255, 255, .07) 0 0 0 1px inset; border-radius: 12px; font: 400 15px var(--font-body); }

/* buy credits */
body.app-page .buy { max-width: none; }
body.app-page .buy-tabs { border-bottom-color: rgba(255, 255, 255, .06); }
body.app-page .buy-tabs h2::after { background: #3D7BFF; }
body.app-page .buy-hint, body.app-page .buy-label, body.app-page .buy .fine { color: #8a8a8a; }
body.app-page .preview { background: #121212; border: 0; box-shadow: rgba(255, 255, 255, .05) 0 0 0 1px inset; border-radius: 18px; }
body.app-page .pv-big { font: 400 48px/1.1 var(--font-display); letter-spacing: -1px; color: #fff; }
body.app-page .pv-chip { font: 500 13px var(--font-body); background: rgba(61, 123, 255, .12); color: #8CB8FF; border-radius: 8px; }
body.app-page .pv-rows > div.tot { border-top-color: rgba(255, 255, 255, .08); color: #fff; }
body.app-page .buy-go { border-radius: 18px; padding: 16px; font-size: 18px; }

/* chat */
body.app-page .chat { padding: 0; height: min(72vh, 760px); }
body.app-page .chat-top { border-bottom-color: rgba(255, 255, 255, .06); padding: 14px 18px; }
body.app-page .msg.user { background: #262626; color: #f5f5f5; border-radius: 18px 18px 6px 18px; }
body.app-page .msg.bot { background: #171717; color: #e5e5e5; border-radius: 18px 18px 18px 6px; box-shadow: rgba(255, 255, 255, .04) 0 0 0 1px inset; }
body.app-page .msg.bot .mh { font: 500 20px/1.3 var(--font-display); color: #fff; }
body.app-page .msg.bot code { background: rgba(255, 255, 255, .08); }
body.app-page .msg .meta { font: 12px var(--font-body); color: #8CB8FF; opacity: .85; }
body.app-page .composer { border-top-color: rgba(255, 255, 255, .06); padding: 14px; }
body.app-page .composer textarea { background: #171717; color: #f5f5f5; border: 0; box-shadow: rgba(255, 255, 255, .07) 0 0 0 1px inset; border-radius: 16px; padding: 12px 16px; }
body.app-page .composer textarea:focus { box-shadow: rgba(61, 123, 255, .45) 0 0 0 1px inset; }
body.app-page .composer .btn { border-radius: 14px; }
body.app-page .hello b { font: 500 34px var(--font-display); color: #fff; }
body.app-page .hello span { color: #737373; }

/* marketplace + soon */
body.app-page .soon-card { padding: 56px 24px; }
body.app-page .soon-card h2 { font: 500 clamp(32px, 4vw, 44px)/1.1 var(--font-display); }

/* developer platform */
body.app-page table { color: #e5e5e5; }
body.app-page th, body.app-page td { border-bottom-color: rgba(255, 255, 255, .06); }
body.app-page td.n { font-family: var(--font-body); }
body.app-page .empty { color: #737373; }
body.app-page .chart { border-bottom-color: rgba(255, 255, 255, .08); }
body.app-page .chart span { background: linear-gradient(180deg, #8CB8FF, #1E46B8); }
body.app-page .chart span.zero { background: rgba(255, 255, 255, .08); }
body.app-page .ktag { font: 500 12px var(--font-body); background: #1f1f1f; color: #a3a3a3; border-radius: 6px; }
body.app-page .ktag.off, body.app-page .st.bad { background: rgba(248, 113, 113, .12); color: #fca5a5; }
body.app-page .st { font: 500 12px var(--font-body); border-radius: 6px; }
body.app-page .st.ok { background: rgba(61, 123, 255, .12); color: #8CB8FF; }
body.app-page .lnk { color: #8CB8FF; font: 500 14px var(--font-body); }
body.app-page .lnk.danger { color: #fca5a5; }
body.app-page button.lnk.mono { color: #e5e5e5; font-family: var(--font-mono); }
body.app-page .siwr-demo { background: radial-gradient(120% 90% at 50% 0%, rgba(61, 123, 255, .18), #121212); border: 0; box-shadow: rgba(255, 255, 255, .05) 0 0 0 1px inset; border-radius: 20px; }
body.app-page .siwr-btn { background: #fff; color: #171717; border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
body.app-page .siwr-btn img { width: 20px; height: 20px; }
body.app-page .siwr-cap { font: 500 13px var(--font-body); letter-spacing: 0; text-transform: none; color: #737373; }
body.app-page .banner { background: #171717; color: #e5e5e5; border-radius: 14px; }
body.app-page .banner.warn { background: rgba(248, 113, 113, .12); color: #fecaca; }
body.app-page #who { color: #a3a3a3; }
@media (max-width: 640px) {
  body.app-page #app > .wrap { margin-top: 32px; }
  body.app-page .strip { padding: 28px 22px; grid-template-columns: minmax(0, 1fr); }
  body.app-page .strip .btn { justify-self: start; }
}