:root{--bg:#0b0d12;--panel:#12151c;--line:#1f2430;--txt:#e7ebf3;--dim:#8a93a6;--up:#22d66b;--down:#ff4d4f;--cyan:#8ff3ff;--sol1:#ffb347;--sol2:#c84bff;--sol3:#5b6cff}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--txt);font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.screen{max-width:720px;min-height:100%;margin:0 auto;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 30%,#171b26 0%,var(--bg) 70%)}
.top{border-bottom:1px solid var(--line);padding:14px 16px 0;text-align:center}
.top h1{font-size:17px;font-weight:600;letter-spacing:.2px}
.tabs{display:flex;justify-content:center;gap:4px;margin-top:10px}
.tabs button{background:none;border:0;color:var(--dim);font:inherit;font-size:13px;padding:8px 14px;border-bottom:2px solid transparent;cursor:pointer}
.tabs button[aria-selected=true]{color:var(--cyan);border-color:var(--cyan)}
.view{display:none;flex:1;padding:24px 16px;flex-direction:column;align-items:center;justify-content:center}
.view.active{display:flex}
.change{font-weight:600;font-size:15px;color:var(--dim)}
.up{color:var(--up)!important}.down{color:var(--down)!important}
.unavail{color:var(--dim)!important;font-weight:400}
.note{color:var(--dim);font-size:11px;min-height:14px}
sup{font-size:.28em;font-weight:500;vertical-align:top;margin-left:4px;position:relative;top:.6em;color:var(--txt);opacity:.85}

/* clock view */
.sol-logo{width:min(46vw,190px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--sol1),var(--sol2) 55%,var(--sol3));
  box-shadow:0 0 0 4px rgba(255,255,255,.08) inset,0 0 40px rgba(200,75,255,.55),0 0 90px rgba(255,140,60,.25)}
.sol-logo svg{width:52%;height:52%;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.big-price{margin-top:26px;font-size:clamp(52px,15vw,88px);font-weight:700;color:var(--cyan);letter-spacing:-1px;line-height:1;
  text-shadow:0 0 18px rgba(143,243,255,.55),0 0 40px rgba(143,243,255,.25)}
#clock-change{margin-top:10px}
.spark{width:min(90%,320px);height:40px;margin-top:16px;overflow:visible}
.spark path{fill:none;stroke:#7b8496;stroke-width:1.4;vector-effect:non-scaling-stroke}
.spark .area{fill:rgba(123,132,150,.12);stroke:none}

/* orbit view */
.orbit-wrap{position:relative;width:min(92vw,520px);aspect-ratio:1}
.orbit-lines{position:absolute;inset:0;width:100%;height:100%}
.orbit-lines line{stroke:rgba(200,200,255,.18);stroke-width:.25}
.orbit-ring{position:absolute;inset:0}
.sol-bubble{position:absolute;left:50%;top:50%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(circle at 40% 35%,#c86bff,#8a2bd8 70%);box-shadow:0 0 30px rgba(180,70,255,.8),0 0 80px rgba(180,70,255,.35)}
.sol-bubble::after{content:"";position:absolute;inset:-9%;border-radius:50%;border:1px solid rgba(255,255,255,.12);border-left-color:transparent;border-bottom-color:transparent}
.sb-sym{font-size:clamp(14px,4vw,22px);font-weight:600}
.sb-price{font-size:clamp(20px,6.2vw,34px);font-weight:700;color:var(--cyan);text-shadow:0 0 12px rgba(143,243,255,.6);line-height:1.15}
.sol-bubble .change{font-size:clamp(11px,3vw,15px);color:#fff}
.sol-bubble .change.up{color:#9dffbf!important}.sol-bubble .change.down{color:#ffb0b0!important}
.coin{position:absolute;width:16%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;font-size:clamp(8px,2.2vw,11px);line-height:1.15;color:#fff;background:radial-gradient(circle at 40% 35%,var(--c1),var(--c2) 75%);
  box-shadow:0 0 18px var(--glow)}
.coin::after{content:"";position:absolute;inset:-14%;border-radius:50%;border:1px solid rgba(255,255,255,.12);border-right-color:transparent;border-top-color:transparent}
.coin b{font-size:1.15em}
.coin .cp{font-weight:600}
.coin .cc{font-size:.9em;opacity:.9}

/* table view */
.view#view-table{justify-content:flex-start;padding:8px 0}
.table-scroll{width:100%;overflow-x:auto}
.mkt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.mkt th{font-weight:500;font-size:12px;color:var(--dim);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.mkt td{padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.mkt .num{text-align:right}
.mkt td.price{font-size:16px}
.asset{display:flex;align-items:center;gap:10px}
.ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;flex:none}
.ic svg{width:60%;height:60%}
.asset small{display:block;color:var(--dim);font-size:11px}
.mkt tr.sol td{background:rgba(20,241,200,.05)}
.mkt tr.sol td:first-child{box-shadow:inset 2px 0 0 #2fe0d0}
.exch{color:var(--dim);font-size:12px}

.foot{border-top:1px solid var(--line);text-align:center;padding:10px 12px 14px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--dim)}
#sources span.off{text-decoration:line-through;opacity:.5}
.foot .note{text-transform:none;letter-spacing:0;margin-top:2px}
@media (max-width:420px){.hide-xs{display:none}.mkt td,.mkt th{padding:9px 8px}.mkt td.price{font-size:14px}}
.big-price.unavail{font-size:clamp(34px,10vw,56px);text-shadow:none}
.sb-price.unavail{font-size:clamp(14px,4vw,20px);text-shadow:none}
.big-price.unavail sup,.sb-price.unavail sup{display:none}

/* network clock line */
.net{margin-top:14px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.2px}
.net b{color:var(--cyan);font-weight:600;text-shadow:0 0 8px rgba(143,243,255,.35)}
.net i{font-style:normal;opacity:.5}
.net-prog{display:inline-flex;align-items:center;gap:6px}
.net .bar{width:56px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.net .bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#9945FF,#14F195);box-shadow:0 0 6px rgba(20,241,149,.6);transition:width .6s}
.net .net-off{display:none}
.net.off>*{display:none}
.net.off>.net-off{display:inline}