*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#070a10;color:#e6e8ec;font-family:Inter,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:14px;-webkit-text-size-adjust:100%}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
a{color:#7fb4ff;text-decoration:none}
#app{position:fixed;top:0;right:0;bottom:0;left:0;padding-top:env(safe-area-inset-top);background:#070a10;display:flex;flex-direction:column;max-width:520px;margin:0 auto}
#main{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 16px 12px;display:flex;flex-direction:column;gap:10px}
#nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #1c2330;background:#0a0e15;padding:4px 4px max(8px, calc(env(safe-area-inset-bottom) - 10px))}
#nav button{height:48px;background:transparent;border:0;color:#9aa3b5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:600}
#nav button .bar{width:22px;height:4px;border-radius:2px;background:transparent}
#nav button.on{color:#7fb4ff}
#nav button.on .bar{background:#7fb4ff}
h1{margin:0;font-size:26px;font-weight:700;color:#fff;letter-spacing:-.01em}
.row{display:flex;justify-content:space-between;align-items:center}
.pill{font-size:12px;color:#9aa3b5;background:#121826;border:1px solid #1c2330;border-radius:999px;padding:4px 10px;white-space:nowrap}
.pill.warn{color:#ffd54f;border-color:#3d2e05;background:#1a1505}
.box{background:#0f141d;border:1px solid #1c2330;border-radius:14px;padding:10px 12px}
.cap{font-size:11.5px;font-weight:600;color:#9aa3b5;letter-spacing:.06em}
.mut{color:#9aa3b5}
.back{align-self:flex-start;height:32px;padding:0 12px 0 8px;display:flex;align-items:center;gap:4px;background:#121826;border:1px solid #1c2330;border-radius:999px;color:#7fb4ff;font-size:13px;font-weight:500}
.chip{font-size:11px;font-weight:600;text-align:center;border-radius:6px;padding:2px 0}
.buy{background:#0f3320;color:#7af0b4}.sell{background:#3a1418;color:#ff9a9a}.none{background:#1a2130;color:#c7ccd6}
.gA{background:#1b5e20;color:#c8f7d6}.gB{background:#6d4c00;color:#ffe082}
.up{color:#00e676}.dn{color:#ff6b6b}.flat{color:#e6e8ec}.dim{color:#5b6577}
/* currencies */
.cur{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}
/* dollar meter row: same seven columns as the bars below */
.usdrow{align-items:center;margin-bottom:7px}
.usdrow .un{font-size:12px;font-weight:600;color:#e6e8ec}
.usdrow .um{grid-column:2/7;min-width:0;padding:9px 2px 0}
.usdrow .uv{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.meter{position:relative;height:8px;border-radius:99px;background:#161d2a}
.meter .mid{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:#2c3444}
.meter .f{position:absolute;top:0;bottom:0;border-radius:99px}
.ticks{display:flex;justify-content:space-between;font-size:9px;color:#5b6577;margin-top:2px;font-variant-numeric:tabular-nums}
.cur .n{font-size:11px;color:#9aa3b5}.cur .v{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.cur .bw{position:relative;width:12px;height:72px;margin:4px auto 0}
.cur .zl{position:absolute;left:-6px;right:-6px;top:36px;height:1px;background:#2c3444}
.cur .b{position:absolute;left:0;right:0;border-radius:3px}
/* hot list */
.hot{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 52px 30px 44px 78px;align-items:center;gap:6px;height:30px;padding:0;background:transparent;border:0;border-bottom:1px solid #161c27;text-align:left;font-variant-numeric:tabular-nums}
.hot:last-child{border-bottom:0}
.hot .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tile{text-align:center;border-radius:14px;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tile .t{font-weight:600}.tile .v{font-size:20px;font-weight:600}.tile .s{font-size:11px}
/* markets */
.mk{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 100px 46px 18px 14px;align-items:center;gap:6px;height:52px;font-size:14.5px;padding:0;background:transparent;border:0;border-top:1px solid #161c27;text-align:left;font-variant-numeric:tabular-nums}
.mk .nm{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.mk .nm b{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk .nm span{font-size:12px;color:#9aa3b5}
/* card */
.card{background:#0f141d;border:1px solid #1c2330;border-radius:16px;padding:12px 14px}
.card .hd{display:flex;align-items:center;gap:10px}
.card .nm{font-size:20px;font-weight:600;color:#fff;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .dir{font-size:13px;font-weight:600;border-radius:6px;padding:3px 10px}
.bulb{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#1a1505;border:1px solid #3d2e05;border-radius:12px}
.bulb.on{background:#3d2e05}
.grid3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,.9fr);margin-top:10px;font-variant-numeric:tabular-nums}
.grid3>div{padding:0 8px}.grid3>div:first-child{padding-left:0}.grid3>div:last-child{padding-right:0}
.grid3>div+div{border-left:1px solid #1c2330}
.grid3 .k{font-size:11px;color:#9aa3b5}.grid3 .v{font-weight:500;white-space:nowrap}
.grid3 .k2{margin-top:6px}
.card .ft{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #1c2330;margin-top:10px;padding-top:8px}
.tag{font-size:12px;font-weight:600;border-radius:6px;padding:3px 10px}
.tALIGNED{background:#1b5e20;color:#c8f7d6}.tMIXED{background:#3d2e05;color:#ffd54f}.tNOT{background:#3a1418;color:#ff9a9a}
.big{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.sec{font-size:11px;color:#9aa3b5;letter-spacing:.06em;margin-top:6px}
.txt{line-height:1.5}
.news a{display:block;color:#c7ccd6;padding:4px 0;line-height:1.4}
.news .m{font-size:11px;color:#5b6577}
/* trend rows */
.tr{display:grid;grid-template-columns:36px 44px minmax(0,1fr) 30px;gap:8px;align-items:center;height:38px;border-bottom:1px solid #161c27;font-variant-numeric:tabular-nums}
.tr:last-child{border-bottom:0}
.tr .track{height:8px;border-radius:4px;background:#1a2130;overflow:hidden}
.tr .fill{display:block;height:8px}
.kv{display:flex;justify-content:space-between;height:34px;align-items:center;border-bottom:1px solid #161c27}
.kv:last-child{border-bottom:0}
/* segmented */
.seg{display:grid;gap:4px;background:#0a0e15;border-radius:10px;padding:3px}
.seg button{height:34px;border:0;border-radius:8px;background:transparent;color:#9aa3b5;font-size:12px;font-weight:500}
.seg button.on{background:#2a3550;color:#fff}
.seg.top{background:#0f141d;border:1px solid #1c2330;border-radius:12px;padding:4px}
.seg.top button{height:36px;font-size:13px}
.snapb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.snapb button{height:44px;border:1px solid #2a3550;border-radius:10px;background:#121a2b;color:#fff;font-size:14px;font-weight:600}
.step{display:flex;justify-content:space-between;align-items:center;height:52px;border-bottom:1px solid #161c27}
.step:last-child{border-bottom:0}
.step .c{display:flex;align-items:center;gap:10px}
.step button{width:44px;height:36px;border:1px solid #2a3550;border-radius:10px;background:#121a2b;color:#fff;font-size:18px}
.step .n{width:40px;text-align:center;font-size:16px;font-weight:600}
/* power */
.pw{display:flex;justify-content:space-between;align-items:center}
.pw .v{font-size:36px;font-weight:600;font-variant-numeric:tabular-nums}
.calc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center;margin-top:6px;font-variant-numeric:tabular-nums}
.calc .k{font-size:11px;color:#9aa3b5}.calc .v{font-size:18px;font-weight:600}
/* login */
.login{margin:auto 0;display:flex;flex-direction:column;gap:12px;padding:24px 4px}
.login input{height:48px;border-radius:12px;border:1px solid #2a3550;background:#0f141d;color:#fff;font-size:16px;padding:0 14px}
.login button{height:48px;border-radius:12px;border:0;background:#2a3550;color:#fff;font-size:15px;font-weight:600}
.err{color:#ff9a9a;min-height:18px}
.empty{color:#9aa3b5;padding:24px 0;text-align:center;line-height:1.5}
/* news calendar */
.cday{font-size:11px;color:#9aa3b5;letter-spacing:.06em;text-transform:uppercase;padding:12px 0 4px;border-bottom:1px solid #161c27}
.cev{display:grid;grid-template-columns:62px 38px minmax(0,1fr) 54px;gap:8px;align-items:center;min-height:46px;padding:6px 0;border-bottom:1px solid #161c27;font-variant-numeric:tabular-nums}
.cev:last-child{border-bottom:0}
.cev .ct{color:#c7ccd6;font-size:12px}
.cev .ccur{font-size:11px;font-weight:600;text-align:center;border-radius:6px;padding:2px 0;background:#121a2b;color:#c7ccd6}
.cev .cti{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.cev .cti b{font-weight:500}
.cev .cti span{font-size:11px;color:#9aa3b5}
.cev .cim{font-size:11px;font-weight:600;text-align:center;border-radius:6px;padding:2px 0}
.imH{background:#3a1418;color:#ff9a9a}.imM{background:#3a2a0a;color:#ffc46b}.imL{background:#1a2130;color:#9aa3b5}.imX{background:#0a1730;color:#9db4dc}
.cev.past{opacity:.45}
.cev.next .ct{color:#7fb4ff;font-weight:600}
/* live dot */
.pill.live{display:inline-flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:#00e676;box-shadow:0 0 0 0 rgba(0,230,118,.6);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,230,118,.6);opacity:1}70%{box-shadow:0 0 0 6px rgba(0,230,118,0);opacity:.55}100%{box-shadow:0 0 0 0 rgba(0,230,118,0);opacity:1}}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}
/* people */
button.sm{height:32px;padding:0 12px;border:1px solid #2a3550;border-radius:9px;background:#121a2b;color:#e6e8ec;font-size:12.5px;font-weight:600}
button.sm.danger{background:#3a1418;border-color:#5a2026;color:#ff9a9a}
button.sm.add{background:#1b3a6b;border-color:#2a5aa8;color:#fff}
.person{display:flex;justify-content:space-between;align-items:center;min-height:54px;border-bottom:1px solid #161c27;gap:10px}
.person .pn{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.person .pn span{font-size:12px;color:#9aa3b5}
.person .pa{display:flex;gap:6px;flex:none}
.padd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px;padding:10px 0;border-bottom:1px solid #161c27}
.padd:has(#rpw){grid-template-columns:1fr}
.padd input,.login input{font-family:inherit}
.padd input{height:36px;border-radius:9px;border:1px solid #2a3550;background:#0a0e15;color:#fff;font-size:16px;padding:0 10px;min-width:0}
.pmsg{font-size:12px;color:#7af0b4;padding:8px 0 10px}
/* no accidental zoom: no double-tap zoom, and text fields are 16px so iPhone doesn't zoom into them */
html,body,button,a,input{touch-action:manipulation}
/* ---------- views: phone keeps the single column ---------- */
.vw{display:flex;flex-direction:column;gap:10px}
.s-left,.s-right{display:contents}
.d-l,.d-r{display:contents}
.d-cal{display:none}
/* ---------- desktop layout (wide screens only; the phone is unchanged) ---------- */
@media (min-width:1024px){
  #app{max-width:none;flex-direction:row}
  #nav{order:-1;width:220px;flex:none;display:flex;flex-direction:column;gap:4px;border-top:0;border-right:1px solid #1c2330;padding:28px 14px}
  #nav::before{content:"Omni";font-weight:700;font-size:24px;color:#fff;padding:0 14px 22px;letter-spacing:-.01em}
  #nav button{flex-direction:row;justify-content:flex-start;height:46px;padding:0 14px;border-radius:12px;font-size:15px;gap:12px}
  #nav button.on{background:#121a2b}
  #nav button .bar{width:4px;height:20px;border-radius:2px}
  #main{padding:32px 40px 40px}
  .vw{width:100%;max-width:1320px;margin:0 auto;gap:18px}
  h1{font-size:30px}
  .box,.card{border-radius:16px}
  /* Home: currencies and tiles on the left, hot symbols on the right */
  #main{padding-bottom:24px}
  .v-desk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(max-content,1fr) auto;gap:18px;flex:1;min-height:0}
  .vw>.back{justify-self:start;align-self:flex-start}
  .v-desk .back{grid-column:1/-1}
  .d-head{grid-column:1/-1}
  /* Two even rows: hot symbols | coming up on top, currencies | tiles below - every edge lines up */
  .d-l,.d-r{display:contents}
  .d-hot{grid-column:1;grid-row:2;padding:14px 22px!important;display:flex;flex-direction:column;justify-content:space-between}
  .d-cal{grid-column:2;grid-row:2;min-height:0;contain:size;display:flex;flex-direction:column;padding:8px 22px!important;overflow:hidden}
  .d-cur{grid-column:1;grid-row:3;padding:20px 26px}
  .d-cal .cev{grid-template-columns:120px 50px minmax(0,1fr) 64px;min-height:50px;font-size:15px}
  .d-tiles{grid-column:2;grid-row:3;gap:18px!important}
  .d-tiles .tile{height:100%}
  .cur .n{font-size:13px}.cur .v{font-size:18px}.cur .bw{width:22px;margin-top:6px}.cur .zl{left:-16px;right:-16px}
  .usdrow{margin-bottom:16px}.usdrow .un{font-size:15px}.usdrow .um{padding:14px 4px 0}.usdrow .uv{font-size:26px}.meter{height:12px}.ticks{font-size:11px;margin-top:4px}
  .hot{height:auto;flex:1;min-height:34px;font-size:15px;grid-template-columns:minmax(0,1fr) 62px 36px 54px 92px}
  .tiles{gap:14px}.tile{padding:22px 16px}.tile .t{font-size:16px}.tile .v{font-size:34px}.tile .s{font-size:13px}
  /* Markets and group lists: cards side by side */
  .v-markets,.v-group{display:block;column-width:400px;column-gap:18px}
  .v-markets>*,.v-group>*{break-inside:avoid;margin-bottom:18px}
  .v-markets>h1,.v-group>h1,.v-group>.back{column-span:all}
  .v-group>.back{display:inline-flex}
  /* Symbol page: card and breakdown on the left, power and trend on the right */
  .v-symbol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
  .v-symbol>.back{grid-column:1/-1}
  .s-left,.s-right{display:flex;flex-direction:column;gap:18px;min-width:0}
  .card{padding:20px 22px}.card .nm{font-size:26px}.grid3 .v{font-size:16px}
  .v-symbol svg[aria-label="Strength line"]{height:190px!important}
  /* News and Settings */
  .v-news{max-width:960px}
  .cev{min-height:52px;grid-template-columns:80px 46px minmax(0,1fr) 64px}
  .v-settings{display:block;column-width:460px;column-gap:18px}
  .v-settings>*{break-inside:avoid;margin-bottom:18px}
  .v-settings>h1{column-span:all}
}
/* iPhone and iPad only: Safari draws Inter thinner than the preview does, so plain text goes up one weight
   (400 -> 500) to match. Text that already has its own weight (headings, chips, numbers set to 600/700) is unchanged. */
@supports (-webkit-touch-callout:none){
  body,button{font-weight:500}
  .hot .s{font-weight:500}
  .hot span[style*="text-align:right"]:not(.mut){font-weight:600}
}