/* HEXARIUM app — glass & chrome over a navy night, matched to the hero crystal */
:root {
  --bg: #04050a; --bg-2: rgba(14, 17, 30, .55); --panel: rgba(16, 19, 34, .55); --panel-2: rgba(28, 33, 56, .6);
  --line: rgba(170, 185, 255, .09); --line-2: rgba(170, 185, 255, .18);
  --text: #f2f3f8; --mute: #8f94a8; --mute-2: #636880;
  --marble: #eef0f6; --green: #c9d3ff; --glow: #9fb2ff;
  --chrome: linear-gradient(180deg,#fff 0%,#e2e4ec 38%,#b2b6c4 72%,#dadce4 100%);
  --chrome-text: linear-gradient(100deg,#fff 0%,#c8ccd8 30%,#7f8496 58%,#eceef4 80%,#9ca1b2 100%);
  --r: 20px;
}
html, body.app-body { background: radial-gradient(900px 600px at 78% -10%, rgba(80, 100, 220, .22), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(60, 80, 180, .12), transparent 60%), var(--bg) fixed; }
body.app-body { grid-template-columns: 264px 1fr; font-family: 'DM Sans', system-ui, sans-serif; }

/* rail: floating glass column */
.rail { margin: 14px 0 14px 14px; height: calc(100vh - 28px); top: 14px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg, rgba(22, 26, 46, .7), rgba(10, 12, 22, .75)); backdrop-filter: blur(20px); padding: 18px 12px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06); }
.rail-brand { border: 0; padding: 6px 10px 18px; margin: 0; }
.rail-brand img { width: 38px; height: 38px; filter: drop-shadow(0 0 14px rgba(160, 180, 255, .35)); }
.rail-brand .brand-word, .brand-word { font: 800 18px/1 'Manrope', sans-serif; letter-spacing: .14em; padding: 0; }
.rail-label { margin: 8px 12px 8px; font: 600 10.5px/1 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-2); }
.rail-nav { gap: 4px; }
.rail-nav a { border: 0; border-radius: 14px; padding: 12px 14px; font: 500 14.5px/1 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none; color: var(--mute); }
.rail-nav a .ic { width: 19px; height: 19px; }
.rail-nav a:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
.rail-nav a.is-on { color: #0b0c12; background: var(--chrome); box-shadow: 0 10px 30px -12px rgba(180, 195, 255, .55), inset 0 1px 0 #fff; }
.rail-nav a.is-on .ic { color: #0b0c12; }
.rail-foot { border: 0; gap: 4px; padding: 10px 0 0; font: 500 13.5px/1 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none; }
.rail-foot a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; color: var(--mute); }
.rail-foot a:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
.rail-foot .ic { width: 17px; height: 17px; }

/* top bar */
.app-main { padding: 0 clamp(16px, 2.6vw, 36px) 64px; }
.app-top { height: 84px; background: linear-gradient(rgba(4, 5, 10, .9) 60%, rgba(4, 5, 10, 0)); }
.app-title { font: 700 30px/1 'Manrope', sans-serif; letter-spacing: -.03em; }
.ca-chip { border-radius: 99px; border-color: var(--line-2); background: rgba(255, 255, 255, .03); }
.net-dot { padding: 0 14px; height: 36px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 99px; font: 500 11px/1 'JetBrains Mono', monospace; color: var(--mute); }
.connect, .app-top .connect { height: 40px; padding: 0 22px; border-radius: 99px; background: var(--chrome); color: #0b0c12; font: 600 14px/1 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none; box-shadow: 0 12px 30px -14px rgba(180, 195, 255, .6), inset 0 1px 0 #fff; }
.connect.is-on { background: rgba(255, 255, 255, .05); color: var(--text); border: 1px solid var(--line-2); box-shadow: none; }

/* overview hero banner with the live crystal */
.ov-hero { position: relative; overflow: hidden; isolation: isolate; min-height: 300px; border-radius: 28px; border: 1px solid var(--line-2); background: radial-gradient(600px 300px at 72% 50%, rgba(90, 110, 230, .28), transparent 70%), linear-gradient(135deg, rgba(20, 24, 44, .9), rgba(6, 7, 14, .95)); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .07); }
.ov-3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 1.2s; }
.ov-3d.ready { opacity: 1; }
.ov-copy { position: relative; max-width: 520px; padding: 38px 40px; }
.ov-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; font: 500 11.5px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.ov-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #46d98a; box-shadow: 0 0 0 4px rgba(70, 217, 138, .15); }
.ov-copy h2 { margin: 0; font: 700 clamp(30px, 3.2vw, 44px)/1.05 'Manrope', sans-serif; letter-spacing: -.04em; }
.ov-copy h2 span { background: var(--chrome-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ov-copy p { margin: 14px 0 0; color: var(--mute); font-size: 15px; }
.ov-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.ov-btn { height: 46px; display: inline-flex; align-items: center; padding: 0 22px; border-radius: 99px; background: var(--chrome); color: #0b0c12; font-weight: 600; font-size: 14.5px; box-shadow: 0 14px 34px -14px rgba(180, 195, 255, .6), inset 0 1px 0 #fff; }
.ov-btn.ghost { background: rgba(255, 255, 255, .04); color: var(--text); border: 1px solid var(--line-2); box-shadow: none; }

/* surfaces */
.kpis { gap: 14px; border: 0; background: none; }
.kpi { border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, rgba(26, 30, 52, .55), rgba(12, 14, 26, .6)); backdrop-filter: blur(14px); padding: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.kpi + .kpi { border-left: 1px solid var(--line); }
.kpi small, .panel > header { font: 600 11px/1 'DM Sans', sans-serif; letter-spacing: .1em; color: var(--mute); }
.kpi b { font: 700 32px/1 'Manrope', sans-serif; letter-spacing: -.03em; }
.panel, .card { border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg, rgba(24, 28, 48, .6), rgba(10, 12, 22, .7)); backdrop-filter: blur(18px); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06); }
.card { padding: 20px; overflow: hidden; }
.panel { padding: 22px; }
.legs { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: none; }
.leg { background: rgba(0, 0, 0, .3); }
.flip { border-radius: 12px; }
.asset, .sub-modes button, .field, .field.addr, .route-meta, .chips li, .create, .grid2 input, .grid2 select, .grid2 textarea, .notes, .vault-sum > div, .legend-bar, .h-note, .forge-out, .track, .qr, .picker-box, .tok-list .tok, .ghost-btn, .ghost-ic, .icon-btn { border-radius: 14px; }
.asset { border-radius: 99px; }
.sub-modes { gap: 6px; padding: 5px; border-radius: 16px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.sub-modes button[aria-selected="true"] { background: var(--chrome); color: #0b0c12; }
.primary { height: 54px; border-radius: 99px; background: var(--chrome); color: #0b0c12; font: 600 15px/1 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none; box-shadow: 0 16px 36px -16px rgba(180, 195, 255, .6), inset 0 1px 0 #fff, inset 0 -2px 6px rgba(0, 0, 0, .18); }
.primary:hover:not(:disabled) { background: var(--chrome); filter: brightness(1.06); }
.primary:disabled { background: rgba(255, 255, 255, .06); color: var(--mute); box-shadow: none; }
.ghost-btn { border-radius: 99px; }
.live-tag { color: #46d98a; }
.toast { border-radius: 14px; }
.tabbar { border-radius: 22px 22px 0 0; background: rgba(10, 12, 22, .9); backdrop-filter: blur(20px); }
.tabbar a { text-transform: none; letter-spacing: 0; font-family: 'DM Sans', sans-serif; border: 0; }
.tabbar a.is-on { color: #fff; }

@media (max-width: 900px) {
  body.app-body { grid-template-columns: 1fr; }
  .rail { display: none; }
  .ov-copy { padding: 28px 24px; }
  .ov-hero { min-height: 340px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi + .kpi { border-left: 1px solid var(--line); }
}
.ov-actions .ov-btn.ghost { font: 600 14.5px/1 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none; height: 46px; margin: 0; }
.ov-copy h2 { margin-top: 0; }
/* softer labels: DM Sans instead of spaced mono */
.leg-meta, .sub-modes button, .route-meta small, .route-meta span, .chips li, .check span, .field input, .field input::placeholder, .amount small, .link-btn, .legend-bar .link-btn, .vault-sum small, .create summary, .grid2 small, .h-row span:first-child { font-family: 'DM Sans', sans-serif !important; letter-spacing: .04em !important; }
.amount input, .amount output { font-family: 'Manrope', sans-serif !important; font-weight: 700 !important; letter-spacing: -.03em !important; }
.legend-bar { border-style: solid; }

/* ice-blue cards everywhere */
:root { --ice: #dfe6ff; --ice-glass: linear-gradient(180deg, rgba(200, 212, 255, .14) 0%, rgba(130, 150, 240, .06) 40%, rgba(12, 16, 36, .72) 100%); --ice-line: rgba(205, 218, 255, .2); }
.panel, .card, .kpi, .ov-hero, .rail { background: var(--ice-glass); border-color: var(--ice-line); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9), 0 0 70px -40px rgba(140, 160, 255, .35), inset 0 1px 0 rgba(235, 240, 255, .2); }
.ov-hero { background: radial-gradient(600px 300px at 72% 50%, rgba(110, 130, 240, .3), transparent 70%), var(--ice-glass); }
.leg, .field.addr, .route-meta, .notes, .vault-sum > div, .sub-modes { background: rgba(8, 12, 30, .45); border-color: rgba(190, 205, 255, .12); }
.asset { background: rgba(200, 212, 255, .08); border: 1px solid rgba(205, 218, 255, .18); }
.tok-ic { width: 30px; height: 30px; flex: none; }
.tok-ic > img { width: 30px; height: 30px; }
.asset-ic .chain-badge { background: #0b0f22; border-radius: 50%; box-shadow: 0 0 0 2px #0b0f22; }
/* agent card: frosted ice-blue lacquer */
.vcard { color: #0d1124; background: radial-gradient(140% 80% at 0% 0%, rgba(255, 255, 255, .85), transparent 50%), linear-gradient(158deg, #eef2ff 0%, #c9d4fb 34%, #a9b6ec 60%, #cfd8ff 84%, #f3f5ff 100%); border-color: rgba(255, 255, 255, .6); box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(150, 170, 255, .5), inset 0 1px 0 #fff; }
.vcard::before { opacity: .1; filter: grayscale(1) brightness(.4); }
.vc-brand b { background: linear-gradient(180deg, #2a3150, #0d1124); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: 'Manrope', sans-serif; font-weight: 800; }
.vc-brand img { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.vc-kind, .vcard small, .vc-foot, .vc-bal i { color: rgba(13, 17, 36, .55); }
.vc-bal b, .vc-no, .vc-limits span, .vc-status { color: #0d1124; text-shadow: none; }
.vc-status { border-color: rgba(13, 17, 36, .2); background: rgba(255, 255, 255, .35); }
.vc-status i { background: #3b6cff; box-shadow: 0 0 6px #3b6cff; }
.vc-meter { background: rgba(13, 17, 36, .12); }
.vc-meter i { background: linear-gradient(90deg, #6e86ff, #2a3a8f); }
.vc-chip { fill: #e9edf9; stroke: rgba(13, 17, 36, .3); }