/* ============================================================================
   UFE° WORLD  —  presentation layer  (preview build, mock data)
   Style: light premium glassmorphism + soft neumorphic shadow, neon-lime +
   blue/indigo accents. Mobile-first (390px), dashboard card grid.
   Engine-frozen: this file only draws what the mock data supplies.
   ============================================================================ */

:root{
  --bg1:#eef2fb; --bg2:#eafaf3; --bg3:#f2ecfb;
  --ink:#10172b; --ink-2:#5a6478; --ink-3:#8a93a8;
  --lime:#c6f74a; --lime-2:#9be013;
  --blue:#4f7cff; --indigo:#7b5cff; --cyan:#33c7f0;
  --good:#16c98a; --warn:#ffb020; --bad:#ff5d73;
  --card:rgba(255,255,255,.66); --card-2:rgba(255,255,255,.82);
  --line:rgba(255,255,255,.9); --line-2:rgba(18,28,54,.08);
  --shadow-s:0 8px 24px -14px rgba(20,40,90,.22);
  --shadow-m:0 18px 48px -20px rgba(20,40,90,.30);
  --neu-hi:rgba(255,255,255,.95); --neu-lo:rgba(120,140,190,.30);
  --radius:22px; --radius-lg:28px;
  --maxw:1180px;
}

*{box-sizing:border-box}
html,body{overflow-x:clip;margin:0}
body{
  font-family:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;
  color:var(--ink); background:var(--bg1);
  background:
    radial-gradient(1100px 600px at 82% -8%, rgba(198,247,74,.34), transparent 60%),
    radial-gradient(900px 560px at -6% 12%, rgba(79,124,255,.24), transparent 55%),
    radial-gradient(1000px 700px at 55% 118%, rgba(123,92,255,.18), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2) 60%, var(--bg3));
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.app{max-width:var(--maxw);margin:0 auto;padding:22px 18px 60px}
@media(min-width:900px){.app{padding:34px 26px 70px}}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.brand .wordmark{font-size:26px;font-weight:800;letter-spacing:.2px}
.brand .deg{color:var(--lime-2);font-size:14px;vertical-align:super;margin:0 1px}
.brand .w2{background:linear-gradient(90deg,#4f7cff,#7b5cff 55%,#9be013);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:2.5px;font-weight:800}
.brand .tag{color:var(--ink-2);font-size:12.5px;letter-spacing:.3px;margin-top:2px;font-weight:500}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px 0 18px;min-width:0;flex-wrap:wrap}
.topbar .datepill{font-size:13px;color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:7px;min-width:0}
.topbar .datepill b{color:var(--ink)}
.tbr{display:flex;align-items:center;gap:9px;flex:0 1 auto;min-width:0}
.iconbtn{
  width:40px;height:40px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--card-2),var(--card));
  box-shadow:var(--neu-hi) inset 0 1px 0, var(--neu-lo) inset 0 -6px 14px, var(--shadow-s);
  display:grid;place-items:center;cursor:pointer;position:relative;color:var(--ink);
  transition:transform .15s ease;
}
.iconbtn:active{transform:scale(.94)}
.iconbtn .dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--bad);border:2px solid #fff}
.iconbtn svg{width:19px;height:19px}
.avatar{width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,var(--blue),var(--indigo));display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;box-shadow:var(--shadow-s)}
.conn{display:flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:14px;cursor:pointer;font-weight:700;font-size:13.5px;
  background:linear-gradient(180deg,#1b2540,#12182c);color:#fff;box-shadow:var(--shadow-m);border:none}
.conn .wallet{width:18px;height:18px;opacity:.95}
.hamburger{display:none}

/* ---------- layout: sidebar + main ---------- */
.shell{display:grid;grid-template-columns:1fr;gap:20px;min-width:0}
@media(min-width:900px){
  .shell{grid-template-columns:232px 1fr}
  .hamburger{display:none}
  .conn .cbtn{display:inline}
}
main{min-width:0}

/* ---------- sidebar ---------- */
.side{display:none}
@media(min-width:900px){
  .side{display:block;position:sticky;top:34px;align-self:start;
    border:1px solid var(--line);border-radius:var(--radius-lg);
    background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.5));
    box-shadow:var(--neu-hi) inset 0 1px 0, var(--neu-lo) inset 0 -10px 22px, var(--shadow-m);
    padding:18px 14px}
}
.side .snav{display:flex;flex-direction:column;gap:5px}
.snav .item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:14px;cursor:pointer;
  color:var(--ink-2);font-weight:600;font-size:14px;transition:all .15s ease}
.snav .item svg{width:18px;height:18px;opacity:.85}
.snav .item:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.snav .item.on{background:linear-gradient(180deg,rgba(198,247,74,.95),rgba(155,224,19,.9));color:#0f2f1c;box-shadow:var(--shadow-s)}
.snav .item.on svg{opacity:1}
.side .sep{height:1px;background:var(--line-2);margin:9px 8px}
.snav .sub{font-size:10.5px;letter-spacing:1.4px;color:var(--ink-3);font-weight:800;padding:8px 12px 3px;text-transform:uppercase}

/* mobile: sidebar collapses to a horizontal chip strip */
@media(max-width:899px){
  .side{display:block;position:sticky;top:0;z-index:30;width:100%;min-width:0;margin:0 -18px;padding:9px 14px;
    background:rgba(244,247,255,.86);backdrop-filter:blur(14px);
    box-shadow:var(--shadow-s);border-radius:0}
  .side .snav{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:2px;width:100%;scrollbar-width:none}
  .side .snav::-webkit-scrollbar{display:none}
  .side .snav{mask-image:linear-gradient(90deg,#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
  .snav .item{white-space:nowrap;padding:8px 12px}
  .side .sep,.snav .sub{display:none}
}

/* ---------- hero ---------- */
.card{border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.52));
  box-shadow:var(--neu-hi) inset 0 1px 0, var(--neu-lo) inset 0 -12px 26px, var(--shadow-m);
  padding:22px;position:relative;overflow:visible}
.hero{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:620px){.hero{grid-template-columns:1.15fr .85fr;align-items:center}}
.hero .kick{font-size:11px;letter-spacing:1.6px;font-weight:800;color:var(--ink-3);text-transform:uppercase}
.hero h1{font-size:34px;line-height:1.04;margin:8px 0 10px;font-weight:800;letter-spacing:-.5px}
.hero h1 .hl{background:linear-gradient(90deg,#4f7cff,#9be013);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{color:var(--ink-2);font-size:15px;max-width:34ch;line-height:1.5}

.ringwrap{position:relative;display:grid;place-items:center}
.ring{position:relative;width:210px;height:210px}
.ring svg{transform:rotate(-90deg)}
.ring .track{stroke:rgba(18,28,54,.07)}
.ring .prog{stroke:url(#g);stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
.ring .mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .num{font-size:52px;font-weight:800;letter-spacing:-1px}
.ring .num span{font-size:22px;color:var(--ink-3);font-weight:700}
.ring .lbl{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--ink-2);text-transform:uppercase;margin-top:2px}
.tier{margin-top:14px;display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;
  background:rgba(22,201,138,.14);color:#0f7a54;font-weight:700;font-size:13px}

.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}
.metric{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#fff,rgba(255,255,255,.6));
  padding:12px 13px;box-shadow:var(--neu-hi) inset 0 1px 0, var(--neu-lo) inset 0 -8px 16px}
.metric .k{font-size:11px;color:var(--ink-3);font-weight:700;letter-spacing:.4px}
.metric .v{font-size:22px;font-weight:800;margin-top:2px}
.metric .d{font-size:12px;font-weight:700}
.metric .d.up{color:var(--good)} .metric .d.down{color:var(--bad)}

/* ---------- generic card head ---------- */
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ch .t{font-size:13px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-2)}
.ch .chip{font-size:11px;color:var(--ink-3);font-weight:600}

/* ---------- area tiles ---------- */
.tiles{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:520px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:820px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{border:1px solid var(--line);border-radius:20px;padding:16px;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.6));
  box-shadow:var(--neu-hi) inset 0 1px 0, var(--neu-lo) inset 0 -10px 22px, var(--shadow-s);
  position:relative;overflow:hidden;min-width:0}
.tile .ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:11px}
.tile .ic svg{width:22px;height:22px;color:#fff}
.tile .nm{font-size:13px;color:var(--ink-2);font-weight:700}
.tile .sc{font-size:30px;font-weight:800;letter-spacing:-.5px;margin-top:1px}
.tile .sc i{font-style:normal;font-size:15px;color:var(--ink-3);font-weight:700}
.tile .bar{height:8px;border-radius:99px;background:rgba(18,28,54,.07);margin-top:11px;overflow:hidden}
.tile .bar b{display:block;height:100%;border-radius:99px}
.tile .tr{font-size:12px;font-weight:800;margin-top:9px}
.tile .tr.up{color:var(--good)} .tile .tr.down{color:var(--bad)}
.tile .glow{position:absolute;width:120px;height:120px;border-radius:50%;filter:blur(34px);opacity:.5;top:-30px;right:-30px}

/* ---------- timing ---------- */
.timing{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:620px){.timing{grid-template-columns:1fr 1fr}}
.tbox{border:1px solid var(--line);border-radius:18px;padding:16px;min-width:0;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.6));box-shadow:var(--neu-hi) inset 0 1px 0,var(--neu-lo) inset 0 -8px 18px}
.tbox.good{background:linear-gradient(180deg,rgba(22,201,138,.10),rgba(22,201,138,.03))}
.tbox.caut{background:linear-gradient(180deg,rgba(255,93,115,.08),rgba(255,93,115,.02))}
.tbox .h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;letter-spacing:.4px}
.tbox.good .h{color:#0f7a54} .tbox.caut .h{color:#c0364b}
.tbox .w{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:15px;font-weight:700;flex-wrap:wrap;min-width:0}
.tbox .w .time{color:var(--ink-3);font-weight:600;font-size:13px;min-width:96px}
.tbox .w svg{width:18px;height:18px;flex:0 0 auto}
.tbox .sub{color:var(--ink-2);font-size:13.5px;margin-top:8px;line-height:1.45}
.chip.neutral{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:12px;
  background:rgba(18,28,54,.05);color:var(--ink-2);font-size:13.5px;font-weight:600;margin-top:4px}

/* ---------- line chart ---------- */
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:rgba(18,28,54,.06)}
.chart .ax{fill:var(--ink-3);font-size:11px;font-weight:600}
.chart .val{fill:var(--ink);font-size:11px;font-weight:800}
.chart .area{fill:url(#area)}
.chart .line{stroke:url(#lc);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chart .dot{fill:#fff;stroke:var(--blue);stroke-width:3}
.chart .peak{fill:#0f7a54}
.chart .peaklbl{fill:#0f7a54;font-size:11px;font-weight:800}
.chart .avg{stroke:var(--ink-3);stroke-dasharray:4 5;stroke-width:1.4;opacity:.5}

/* ---------- ecosystem apps ---------- */
.eco{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:520px){.eco{grid-template-columns:repeat(3,1fr)}}
.eco .a{border:1px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;min-width:0;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.6));box-shadow:var(--neu-hi) inset 0 1px 0,var(--neu-lo) inset 0 -8px 18px;
  transition:transform .14s ease,box-shadow .14s ease}
.eco .a:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}
.eco .a .em{font-size:22px}
.eco .a .n{font-weight:800;font-size:14px;margin-top:7px}
.eco .a .d{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.eco .a .badge{position:absolute}
.eco .a{position:relative}
.eco .a .new{font-size:9.5px;font-weight:800;letter-spacing:.6px;color:#fff;background:var(--indigo);padding:2px 7px;border-radius:99px;position:absolute;top:12px;right:12px}

/* ---------- PRO + share ---------- */
.duo{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){.duo{grid-template-columns:1fr 1fr}}
.pro{border-radius:var(--radius-lg);padding:24px;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(600px 240px at 90% -20%,rgba(198,247,74,.25),transparent 60%),linear-gradient(155deg,#1b2540,#12182c);
  box-shadow:var(--shadow-m)}
.pro .pt{font-size:24px;font-weight:800}
.pro .pp{color:var(--lime);font-weight:800;font-size:16px;margin:4px 0 14px}
.pro .pp small{color:rgba(255,255,255,.55);font-weight:600}
.pro .li{display:flex;align-items:center;gap:9px;font-size:14px;margin:9px 0;color:rgba(255,255,255,.86)}
.pro .li svg{width:16px;height:16px;color:var(--lime)}
.pro .cta{margin-top:18px;width:100%;padding:13px;border:none;border-radius:13px;cursor:pointer;
  background:linear-gradient(90deg,var(--lime),var(--lime-2));color:#0f2f1c;font-weight:800;font-size:14px}
.pro .fine{margin-top:10px;font-size:11.5px;color:rgba(255,255,255,.5);text-align:center}

.share{border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.55));box-shadow:var(--shadow-m)}
.share .st{font-size:16px;font-weight:800}
.share .sd{color:var(--ink-2);font-size:13px;margin:4px 0 15px}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sgrid .s{aspect-ratio:1;border-radius:15px;display:grid;place-items:center;cursor:pointer;transition:transform .14s}
.sgrid .s:active{transform:scale(.92)}
.sgrid .s svg{width:22px;height:22px}
.sgrid .s.tw{background:#0f1419;color:#fff}
.sgrid .s.tg{background:#2aabee;color:#fff}
.sgrid .s.dc{background:#5865f2;color:#fff}
.sgrid .s.cp{background:rgba(18,28,54,.07);color:var(--ink)}
.sgrid .s .ic{display:grid;place-items:center}
.share .row{display:flex;flex-direction:column;gap:8px;margin-top:8px}

/* ---------- footer ---------- */
.foot{margin-top:30px;text-align:center;color:var(--ink-3);font-size:12px;line-height:1.7}
.foot b{color:var(--ink-2)}

/* ---------- mobile (<520) tightening ---------- */
@media(max-width:520px){
  .hero h1{font-size:20px;overflow-wrap:anywhere}
  .hero .lead{max-width:none;overflow-wrap:anywhere}
  .hero .kick,.ch .t{letter-spacing:.8px}
  .ring{width:180px;height:180px}
  .ring svg{width:180px;height:180px}
  .ring .num{font-size:40px}
  .metrics{gap:9px}
  .card{padding:18px}
  .tbox .w .time{min-width:88px}
  .sgrid{grid-template-columns:repeat(4,1fr);gap:8px}
  .brand .wordmark{font-size:22px}
  .tbox .w span:not(.time){flex:1 1 70%;min-width:0;overflow-wrap:anywhere}
  main .card{overflow:hidden}
}

/* ---------- skeleton loaders ---------- */
.sk{border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.35));position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:shim 1.3s infinite}
@keyframes shim{100%{transform:translateX(100%)}}
.fade{animation:fade .5s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}