\
:root{
  --bg:#0b0d10;--text:#e8eef5;--muted:#9aa7b5;--accent:#5de4c7;--warn:#ffb400;--danger:#ff4d4d;
  --glass:rgba(255,255,255,.06);--hdrH:64px;--r:16px;--cardEdge:rgba(255,255,255,.12)
}
* {box-sizing:border-box;min-width:0;max-width:100%}
html,body {height:100%;width:100%;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto}
body {margin:0;overflow:hidden}
.app {position:fixed;inset:0;height:100svh;width:100%;display:grid;grid-template-rows:var(--hdrH) 1fr}

/* Scroll helpers */
.hide-scroll {overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}
.hide-scroll::-webkit-scrollbar {width:0;height:0}

/* Header */
.hdr {display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:nowrap;
  padding:calc(max(14px, env(safe-area-inset-top, 0px)) + 6px) 12px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent);
  border-bottom:1px solid rgba(255,255,255,.08);position:relative;z-index:5}
.brand {font-weight:800;letter-spacing:.2px;display:flex;align-items:center;gap:10px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(8px)}
.brand::before {content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px rgba(93,228,199,.9)}
.brand.hidden {display:none!important}
.row {display:flex;gap:8px;align-items:center;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.row::-webkit-scrollbar {display:none}
.btn {cursor:pointer;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--text);border-radius:10px;padding:8px 10px;white-space:nowrap}
.icon-btn {width:36px;height:36px;display:grid;place-items:center;border-radius:10px;flex:0 0 auto}
.pill {padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:var(--glass);font-size:13px;display:flex;gap:6px;align-items:center;flex:0 0 auto;white-space:nowrap}
.clock {font-size:12px;color:var(--muted);margin-left:8px;flex:0 0 auto}
.dropdown {position:relative}.drop-btn {cursor:pointer}
.menu {position:absolute;top:110%;left:0;min-width:160px;background:rgba(18,22,28,.98);border:1px solid rgba(255,255,255,.12);border-radius:10px;display:none;z-index:20}
.menu.open {display:block}
.menu button {display:block;width:100%;text-align:left;border:0;background:transparent;padding:8px 10px;color:var(--text);cursor:pointer}
.menu button:hover {background:rgba(255,255,255,.08)}
.hint {position:absolute;left:0;right:0;bottom:-2px;font-size:11px;color:#ffbf69;text-align:center;opacity:.95;display:none}
.hint.show {display:block}
.bal-text.masked .digits {filter:blur(6px)}

/* Slides */
.content {position:relative}
.slide {position:absolute;inset:0;padding:12px;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .2s,transform .2s}
.slide.active {opacity:1;pointer-events:auto;transform:none}
.slide .clickout {position:absolute;inset:0}
.inner {position:relative;z-index:1}
.card {background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* Home orb base */
.centerbox {height:100%;display:grid;place-items:center}
.orb-wrap {position:fixed;z-index:50;touch-action:none}
.orb {width:clamp(140px,22vw,200px);height:clamp(140px,22vw,200px);border-radius:50%;position:relative;cursor:pointer;transition:filter .2s,transform .2s}
.unread {position:absolute;right:-2px;top:-2px;width:12px;height:12px;border-radius:50%;background:var(--warn)}
.orb--center {top:50%;left:50%;transform:translate(-50%,-50%)}

/* LOOK 1: Glass Orb (default) */
.orb.look-glass {box-shadow:0 22px 70px rgba(93,228,199,.45)}
.orb.look-glass::before {content:"";position:absolute;inset:0;border-radius:inherit;background:
  radial-gradient(120% 120% at 70% 20%,rgba(255,255,255,.45),rgba(255,255,255,0) 50%),
  radial-gradient(120% 120% at 30% 80%,rgba(255,255,255,.12),rgba(255,255,255,0) 60%),
  radial-gradient(60% 60% at 50% 50%,rgba(93,228,199,.25),rgba(93,228,199,0) 70%)}
.orb.look-glass .core {position:absolute;inset:16px;border-radius:50%;background:
  radial-gradient(60% 60% at 50% 50%,rgba(93,228,199,.92),rgba(32,180,255,.85) 35%,rgba(15,17,24,.92) 75%);
  animation:breath 4s ease-in-out infinite;filter:drop-shadow(0 0 28px rgba(93,228,199,.5))}
@keyframes breath {0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* LOOK 2: Neon Ring (hollow torus) */
.orb.look-ring {box-shadow:0 20px 70px rgba(157,114,255,.55)}
.orb.look-ring::before {content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(157,114,255,.75), rgba(114,255,205,.75), rgba(157,114,255,.75));
  -webkit-mask:radial-gradient(circle 56% at 50% 50%, transparent 56%, black 57%); mask:radial-gradient(circle 56% at 50% 50%, transparent 56%, black 57%);
  filter:blur(0.2px)}
.orb.look-ring .core {position:absolute;inset:28%;border-radius:50%;background:radial-gradient(60% 60% at 50% 50%,rgba(0,0,0,.8),rgba(20,24,34,.95) 70%);box-shadow:inset 0 0 40px rgba(157,114,255,.45)}

/* LOOK 3: Hex Prism (faceted) */
.orb.look-hex {clip-path:polygon(50% 0%, 88% 20%, 88% 80%, 50% 100%, 12% 80%, 12% 20%);border-radius:0;box-shadow:0 18px 60px rgba(127,255,222,.4)}
.orb.look-hex::before {content:"";position:absolute;inset:0;background:
  linear-gradient(135deg, rgba(120,255,220,.2), rgba(90,140,255,.2)),
  linear-gradient(45deg, rgba(255,255,255,.25), rgba(255,255,255,.02));mix-blend-mode:screen}
.orb.look-hex .core {position:absolute;inset:0;background:
  linear-gradient(200deg, rgba(60,240,200,.35), rgba(40,120,255,.15) 60%, rgba(0,0,0,.85) 80%);
  box-shadow:inset 0 0 60px rgba(60,240,200,.35)}

/* LOOK 4: Halo Core (ring + particles) */
.orb.look-halo {box-shadow:0 26px 80px rgba(55,255,179,.55)}
.orb.look-halo::before {content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(70% 70% at 50% 50%, rgba(55,255,179,.25), rgba(55,255,179,0) 60%);
}
.orb.look-halo .core {position:absolute;inset:18px;border-radius:50%;background:radial-gradient(60% 60% at 50% 50%,rgba(55,255,179,.9),rgba(255,120,200,.8) 45%,rgba(15,17,24,.95) 80%)}
.orb.look-halo .core::after {content:"";position:absolute;left:50%;top:50%;width:88%;height:88%;transform:translate(-50%,-50%);border-radius:50%;
  border:2px dashed rgba(55,255,179,.55);animation:spin 10s linear infinite;opacity:.8}
@keyframes spin {to{transform:translate(-50%,-50%) rotate(360deg)}}

/* P/L reflection on orb core */
.orb.trade-pos .core {box-shadow:0 0 28px rgba(124,255,158,.6) inset, 0 0 30px rgba(124,255,158,.35)}
.orb.trade-neg .core {box-shadow:0 0 28px rgba(255,122,122,.6) inset, 0 0 30px rgba(255,122,122,.35)}
.orb.glow-strong {filter:drop-shadow(0 0 30px rgba(93,228,199,.55))}
.brand.loss::before {background:#ff7a7a; box-shadow:0 0 12px rgba(255,122,122,.85)}

/* Quick Reply */
.qr {position:fixed;z-index:51;display:none;min-width:300px;max-width:92vw;background:rgba(12,14,18,.96);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px}
.qr.open {display:block}

/* Mini-Chat */
.mini {position:fixed;z-index:52;display:none;min-width:clamp(300px,40vw,420px);max-width:92vw;max-height:60vh;left:50%;top:calc(50% - 110px);transform:translateX(-50%);background:rgba(12,14,18,.96);border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.mini.open {display:flex;flex-direction:column}
.mini-h {display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.mini-b {padding:10px 12px;gap:8px;display:flex;flex-direction:column;overflow-y:auto}
.mini-m {padding:9px 11px;border-radius:12px;max-width:92%}
.mini-m.bot {background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.mini-m.you {align-self:flex-end;background:rgba(93,228,199,.22);border:1px solid rgba(93,228,199,.35)}
.mini-f {display:flex;gap:8px;padding:10px;border-top:1px solid rgba(255,255,255,.08)}
.typing {display:inline-flex;gap:4px;align-items:center}
.dot {width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.75);opacity:.25;animation:blink 1.4s infinite}
.dot:nth-child(2) {animation-delay:.2s}.dot:nth-child(3) {animation-delay:.4s}
@keyframes blink {0%{opacity:.25}50%{opacity:1}100%{opacity:.25}}

/* Palette */
.palette {position:fixed;inset:0;z-index:53;display:none;align-items:center;justify-content:center;background:rgba(5,7,10,.55);backdrop-filter:blur(6px)}
.palette.open {display:flex}
.pal-body {background:rgba(12,14,18,.96);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px;max-width:840px;width:92%}
.pal-top {display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pal-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:640px) {.pal-grid {grid-template-columns:1fr}}
.pal-tile {padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);cursor:pointer}
.pal-tile:active {transform:scale(.98)}
.pal-home-orb {position:fixed;bottom:18px;left:50%;transform:translateX(-50%);width:60px;height:60px;border-radius:50%;cursor:pointer;border:1px solid rgba(255,255,255,.18);
  background:radial-gradient(60% 60% at 50% 50%,rgba(93,228,199,.35),rgba(32,180,255,.2) 40%,rgba(12,14,18,.9) 75%);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.pal-home-orb::after {content:"";position:absolute;inset:10px;border-radius:50%;background:radial-gradient(60% 60% at 50% 50%,rgba(93,228,199,.8),rgba(32,180,255,.75) 40%,rgba(15,17,24,.95) 78%)}

/* Chats list/detail */
.ch-list {display:grid;gap:10px}
.thread {display:flex;gap:10px;align-items:center;padding:12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);cursor:pointer}
.badge {margin-left:auto;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:2px 8px;font-size:12px}
.chat-header {display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.chat-title {display:flex;gap:8px;align-items:center}
.more {position:relative}
.more-menu {position:absolute;right:0;top:110%;background:rgba(18,22,28,.98);border:1px solid rgba(255,255,255,.12);border-radius:10px;display:none;min-width:230px;z-index:5}
.more-menu.open {display:block}
.more-menu button {display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--text);padding:8px 10px;cursor:pointer}
.more-menu button:hover {background:rgba(255,255,255,.08)}
.chat-body {height:calc(100% - 56px - 56px);padding:12px}
.conv {display:flex;flex-direction:column;gap:10px}
.msg {padding:11px 13px;border-radius:14px;max-width:85%}
.msg.bot {background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.12)}
.msg.you {align-self:flex-end;background:linear-gradient(180deg,rgba(93,228,199,.22),rgba(93,228,199,.12));border:1px solid rgba(93,228,199,.35)}
.ts {font-size:11px;color:var(--muted);margin-top:2px}
.attach-row {display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.attach-chip {padding:6px 8px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.06);font-size:12px}
.composer {display:flex;gap:8px;align-items:center;padding:8px;border-top:1px solid rgba(255,255,255,.10)}
.composer input {flex:1;border:0;background:transparent;color:var(--text);outline:0;padding:10px;border:1px solid rgba(255,255,255,.10);border-radius:12px}

/* Trades */
.table {width:100%;border-collapse:collapse}
.table th,.table td {padding:10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.pl-pos {color:#7cff9e}.pl-neg {color:#ff7a7a}
.summary {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pill-lite {padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.tr-sheet {position:absolute;z-index:60;background:rgba(18,22,28,.98);border:1px solid rgba(255,255,255,.12);border-radius:10px;display:none;min-width:180px}
.tr-sheet.open {display:block}
.tr-sheet button {display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;color:var(--text);cursor:pointer}
.tr-sheet button:hover {background:rgba(255,255,255,.08)}

/* Active Charts */
.ac-strip {display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ac-strip::-webkit-scrollbar {display:none}
.ac-chip {min-width:170px;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);cursor:pointer}
.ac-chip.active {outline:2px solid var(--accent)}
.canvas-wrap {position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.canvas-wrap::-webkit-scrollbar {display:none}
.ac-canvas {width:100%;height:260px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px}
.ac-legend {display:flex;gap:10px;margin-top:8px;color:var(--muted);font-size:12px}
.chart-box {margin-top:10px;display:none;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.chart-box.active {display:block}
.chart-box::-webkit-scrollbar {display:none}
#tradeCanvas {width:100%;height:260px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px}

/* Themes */
body[data-theme="aurora"] {--bg:#0b0d10;--text:#e8eef5;--muted:#9aa7b5;--accent:#5de4c7;--glass:rgba(255,255,255,.06)}
body[data-theme="neon"] {--bg:#0a0712;--text:#e9ddff;--muted:#bda9ff;--accent:#9d72ff;--glass:rgba(157,114,255,.09)}
body[data-theme="glass"] {--bg:#0a1014;--text:#e6f3ff;--muted:#a7c1d6;--accent:#7fd2ff;--glass:rgba(255,255,255,.08)}
body[data-theme="cyber"] {--bg:#0b0f13;--text:#e7fff1;--muted:#a5ffdb;--accent:#37ffb3;--glass:rgba(55,255,179,.10)}

@media (max-width:640px){
  .pill {padding:4px 8px;font-size:12px}
  .row {gap:6px}
  .table th,.table td {padding:8px 6px;font-size:13px}
  .ac-canvas,#tradeCanvas {height:220px}
}