Fix dashboard desktop controls and status sizing

index.html

@@ -4,6 +4,7 @@
 :root{--bg:#070b14;--panel:#101827cc;--line:#ffffff14;--text:#f3f7ff;--muted:#8fa0bb;--cyan:#55dff7;--violet:#8b7cff;--live:#32d6a0;--degraded:#ffbd59;--cached:#65a8ff;--unavailable:#ff667d;--shadow:0 24px 80px #0008}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 78% -10%,#27205c66,transparent 36%),radial-gradient(circle at 22% 12%,#0b617144,transparent 30%),var(--bg);color:var(--text);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}.shell{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;padding:22px 16px;border-right:1px solid var(--line);background:#090f1bee;backdrop-filter:blur(20px);z-index:20}.brand{display:flex;gap:12px;align-items:center;padding:4px 8px 24px}.brand-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,var(--violet),var(--cyan));box-shadow:0 10px 30px #6d74ff55;font-weight:900}.brand strong{display:block;font-size:15px}.brand small{color:var(--muted)}.nav-group{margin:18px 0}.nav-label{padding:0 10px 7px;color:#657590;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.nav-link{display:flex;gap:11px;align-items:center;padding:10px 12px;border-radius:11px;color:#b6c1d4;margin:3px 0}.nav-link:hover,.nav-link.active{color:white;background:#ffffff0c}.nav-link.active{box-shadow:inset 3px 0 var(--cyan);background:linear-gradient(90deg,#55dff719,transparent)}.nav-icon{width:18px;text-align:center}.side-status{position:absolute;left:16px;right:16px;bottom:18px;padding:13px;border:1px solid var(--line);border-radius:14px;background:#0d1625}.side-status-row{display:flex;justify-content:space-between;gap:10px;align-items:center}.side-status small{display:block;color:var(--muted);margin-top:6px}.main{min-width:0;padding:24px 30px 70px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.eyebrow{color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.topbar h1{font-size:clamp(25px,3vw,36px);margin:4px 0 0;letter-spacing:-.04em}.top-actions{display:flex;gap:10px;align-items:center}.button{border:1px solid var(--line);border-radius:11px;background:#ffffff08;color:var(--text);padding:9px 12px;cursor:pointer}.button:hover{background:#ffffff10}.menu-button{display:none}.status-strip{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px;margin-bottom:14px}.status-card,.panel,.market-card,.coverage-card{border:1px solid var(--line);background:linear-gradient(145deg,#121b2bd9,#0b1321d9);box-shadow:var(--shadow);backdrop-filter:blur(18px)}.status-card{border-radius:15px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:14px}.status-card span:first-child{color:var(--muted);font-size:12px}.status-card strong{display:block;margin-top:2px}.badge{display:inline-flex;gap:6px;align-items:center;padding:5px 9px;border:1px solid currentColor;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.08em}.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}.live{color:var(--live);background:#32d6a012}.degraded{color:var(--degraded);background:#ffbd5912}.cached{color:var(--cached);background:#65a8ff12}.unavailable{color:var(--unavailable);background:#ff667d12}.section-head{display:flex;align-items:end;justify-content:space-between;margin:27px 0 12px}.section-head h2{font-size:18px;margin:0}.section-head p{margin:3px 0 0;color:var(--muted)}.market-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.market-card{border-radius:18px;padding:17px;min-height:153px}.market-top{display:flex;justify-content:space-between;align-items:center}.coin{display:flex;align-items:center;gap:9px}.coin-icon{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#ffffff0b;color:var(--cyan);font-weight:900}.coin b,.coin small{display:block}.coin small,.meta{color:var(--muted)}.price{font-size:25px;font-weight:800;letter-spacing:-.04em;margin:22px 0 4px}.meta{font-size:11px;display:flex;justify-content:space-between;gap:8px}.coverage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.coverage-card{border-radius:17px;padding:16px}.coverage-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.coverage-card h3{margin:0;font-size:14px}.coverage-card p{color:var(--muted);font-size:12px;min-height:38px;margin:12px 0}.coverage-meta{display:flex;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid var(--line);font-size:11px;color:#b9c5d8}.ops-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:12px}.panel{border-radius:18px;padding:18px}.panel h3{margin:0 0 14px}.row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}.row:last-child{border:0}.row span{color:var(--muted)}.provider-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.provider{padding:11px;border:1px solid var(--line);border-radius:12px;background:#ffffff05}.provider strong,.provider small{display:block}.provider small{color:var(--muted);margin-top:3px}.notice{margin-top:12px;border:1px solid #ffbd5940;background:#ffbd590d;border-radius:13px;padding:12px;color:#e7c987;font-size:12px}.footer{color:#697b96;margin-top:28px;font-size:11px}.skeleton{color:#5c6b82}.mobile-overlay{display:none}@media(max-width:1080px){.market-grid{grid-template-columns:repeat(2,1fr)}.coverage-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:780px){.shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;transform:translateX(-105%);width:260px;transition:.2s}.sidebar.open{transform:none}.mobile-overlay{position:fixed;inset:0;background:#0009;z-index:10}.mobile-overlay.open{display:block}.main{padding:18px 16px 55px}.menu-button{display:inline-flex}.topbar{align-items:flex-start}.top-actions .button:not(.menu-button){display:none}.status-strip,.market-grid,.coverage-grid,.ops-grid{grid-template-columns:1fr}.market-card{min-height:138px}.provider-list{grid-template-columns:1fr}}
 </style><style>
 :root{--bg:#060812;--panel:#111728dc;--line:#ffffff16;--line-strong:#ffffff27;--text:#f6f7ff;--muted:#96a2ba;--cyan:#22d3ee;--blue:#60a5fa;--violet:#a78bfa;--pink:#f472b6;--amber:#fbbf24;--emerald:#34d399;--shadow:0 24px 80px #0006}body{font-family:"Manrope",Inter,ui-sans-serif,system-ui,sans-serif;background:radial-gradient(circle at 78% -8%,#6839bd40 0,transparent 34%),radial-gradient(circle at 26% 8%,#007a8d38 0,transparent 29%),linear-gradient(145deg,#080b17,#050711 55%,#090817);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.28;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,#000,transparent 78%)}h1,h2,h3,.brand strong,.price{font-family:"Space Grotesk","Manrope",sans-serif}.shell{grid-template-columns:272px minmax(0,1fr)}.sidebar{padding:22px 16px;background:linear-gradient(180deg,#0c1120f5,#080c17f2);box-shadow:18px 0 70px #0003}.brand-mark{position:relative;width:44px;height:44px;border-radius:15px;background:linear-gradient(135deg,#22d3ee,#7367f0 58%,#f472b6);box-shadow:0 12px 35px #5f6af466,inset 0 1px #ffffff77;font-size:0}.brand-mark:before{content:"";width:22px;height:22px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 12c2.2-5 4.3-5 6.5 0s4.3 5 6.5 0 4.3-5 5 0'/%3E%3C/svg%3E")}.brand-mark:after{content:"";position:absolute;inset:-4px;border:1px solid #7c8cff55;border-radius:18px}.nav-group{margin:14px 0 19px}.nav-link{--tone:var(--cyan);padding:9px 10px;border:1px solid transparent;border-radius:13px;transition:.2s ease}.nav-link:nth-child(3){--tone:var(--blue)}.nav-link:nth-child(4){--tone:var(--violet)}.nav-link:hover{color:white;border-color:color-mix(in srgb,var(--tone) 26%,transparent);background:color-mix(in srgb,var(--tone) 8%,transparent);transform:translateX(3px)}.nav-link.active{border-color:color-mix(in srgb,var(--tone) 28%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--tone) 16%,transparent),#ffffff03);box-shadow:inset 3px 0 var(--tone),0 8px 28px #0002}.nav-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;color:var(--tone);background:color-mix(in srgb,var(--tone) 12%,transparent)}.nav-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.nav-group:nth-child(2) .nav-link:nth-child(2){--tone:var(--cyan)}.nav-group:nth-child(2) .nav-link:nth-child(3){--tone:var(--pink)}.nav-group:nth-child(2) .nav-link:nth-child(4){--tone:var(--violet)}.nav-group:nth-child(3) .nav-link:nth-child(2){--tone:var(--emerald)}.nav-group:nth-child(3) .nav-link:nth-child(3){--tone:var(--amber)}.nav-group:nth-child(3) .nav-link:nth-child(4){--tone:var(--blue)}.nav-group:nth-child(3) .nav-link:nth-child(5){--tone:var(--pink)}.side-status{overflow:hidden;border-color:#34d39930;background:linear-gradient(145deg,#10211fdd,#101727ef)}.side-status:before{content:"";position:absolute;width:90px;height:90px;right:-35px;top:-45px;border-radius:50%;background:#34d39926;filter:blur(12px)}.main{position:relative;padding:25px 32px 70px}.main:before,.main:after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(70px);animation:drift 11s ease-in-out infinite alternate}.main:before{width:240px;height:240px;right:7%;top:8%;background:#7147eb24}.main:after{width:180px;height:180px;left:18%;top:42%;background:#00bcd426;animation-delay:-4s}.topbar{align-items:flex-start}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.18em}.eyebrow:before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}.topbar h1{font-size:clamp(29px,3.3vw,43px);line-height:1.08;margin-top:7px}.topbar h1 span{color:transparent;background:linear-gradient(95deg,#63e6ff,#9e8cff 55%,#f68cc6);background-clip:text;-webkit-background-clip:text}.hero-copy{max-width:720px}.hero-copy p{max-width:650px;margin:8px 0 0;color:var(--muted);font-size:13px}.button{display:inline-flex;align-items:center;gap:8px;min-height:40px;border-color:var(--line-strong);transition:.2s ease}.button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.button:hover{transform:translateY(-2px);border-color:#8b9cff55;box-shadow:0 10px 28px #0004}.button.primary{border-color:#6f70ff66;background:linear-gradient(135deg,#5f65eccc,#805ad5cc);box-shadow:0 10px 28px #5b5bea35}.status-card{--accent:var(--cyan);position:relative;overflow:hidden;min-height:88px;border-radius:17px;animation:rise .55s both}.status-card:nth-child(2){--accent:var(--amber);animation-delay:.07s}.status-card:nth-child(3){--accent:var(--violet);animation-delay:.14s}.status-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--accent),transparent)}.status-card:after{content:"";position:absolute;width:100px;height:100px;right:-55px;top:-55px;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,transparent);filter:blur(8px)}.status-card>div{position:relative;z-index:1}.section-head h2{font-weight:600}.market-card{--coin:var(--cyan);position:relative;overflow:hidden;min-height:164px;border-radius:19px;animation:rise .55s both;transition:.25s ease}.market-card:nth-child(1){--coin:var(--amber)}.market-card:nth-child(2){--coin:var(--violet)}.market-card:nth-child(3){--coin:var(--cyan)}.market-card:nth-child(4){--coin:var(--pink)}.market-card:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--coin),transparent 70%)}.market-card:after{content:"";position:absolute;width:130px;height:130px;right:-70px;bottom:-80px;border-radius:50%;background:color-mix(in srgb,var(--coin) 15%,transparent);filter:blur(10px)}.market-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--coin) 35%,transparent);box-shadow:0 24px 70px #0008,0 0 34px color-mix(in srgb,var(--coin) 9%,transparent)}.market-top,.price,.meta{position:relative;z-index:1}.coin-icon{width:38px;height:38px;border:1px solid color-mix(in srgb,var(--coin) 30%,transparent);border-radius:13px;color:var(--coin);background:color-mix(in srgb,var(--coin) 11%,transparent)}.coin-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.coverage-card{--accent:var(--cyan);position:relative;overflow:hidden;min-height:166px;transition:.22s ease}.coverage-card:nth-child(2){--accent:var(--emerald)}.coverage-card:nth-child(3){--accent:var(--blue)}.coverage-card:nth-child(4){--accent:var(--amber)}.coverage-card:nth-child(5){--accent:var(--pink)}.coverage-card:nth-child(6){--accent:var(--violet)}.coverage-card:before{content:"";position:absolute;width:105px;height:105px;right:-55px;top:-58px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);filter:blur(13px)}.coverage-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}.coverage-card h3:before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:3px;background:var(--accent);box-shadow:0 0 15px var(--accent)}.coverage-meta strong{color:var(--accent)}.panel{position:relative}.provider{--accent:var(--cyan);position:relative;overflow:hidden;padding-left:14px;transition:.2s ease}.provider:before{content:"";position:absolute;inset:10px auto 10px 0;width:2px;border-radius:2px;background:var(--accent)}.provider:nth-child(2){--accent:var(--blue)}.provider:nth-child(3){--accent:var(--violet)}.provider:nth-child(4){--accent:var(--amber)}.provider:nth-child(5){--accent:var(--pink)}.provider:nth-child(6){--accent:var(--emerald)}.provider:hover{border-color:color-mix(in srgb,var(--accent) 28%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent)}.footer{display:flex;align-items:center;gap:8px}.footer:before{content:"✓";display:grid;place-items:center;width:19px;height:19px;border:1px solid #34d39955;border-radius:50%;color:var(--emerald)}@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes drift{from{transform:translate3d(-10px,-8px,0) scale(.95)}to{transform:translate3d(16px,18px,0) scale(1.08)}}@keyframes spin{to{transform:rotate(360deg)}}.is-refreshing svg{animation:spin .8s linear infinite}@media(max-width:820px){.shell{grid-template-columns:1fr}.main{padding:18px 16px 55px}.sidebar{width:272px}.hero-copy p{display:none}.topbar h1{font-size:clamp(28px,8vw,38px)}}@media(max-width:610px){.top-actions .primary{width:42px;padding:0;font-size:0}.top-actions .primary svg{width:18px;height:18px}.status-card strong{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
+.menu-button{display:none}.button.primary{white-space:nowrap}.status-card>div{flex:1;min-width:0}.status-card strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-card>.badge{flex:0 0 auto}@media(max-width:820px){.menu-button{display:inline-flex}}@media(max-width:610px){.status-card strong{max-width:100%}}
 </style></head><body><div class="shell">
 <aside class="sidebar" id="sidebar"><div class="brand"><div class="brand-mark">S4</div><div><strong>Crypto Data Hub</strong><small>Space 4 · Operations</small></div></div><nav>
 <div class="nav-group"><div class="nav-label">Overview</div><a class="nav-link active" href="/"><span class="nav-icon"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="2"/><rect x="14" y="3" width="7" height="7" rx="2"/><rect x="3" y="14" width="7" height="7" rx="2"/><rect x="14" y="14" width="7" height="7" rx="2"/></svg></span>Command center</a><a class="nav-link" href="#market"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M3 12h4l2-5 4 10 2-5h6"/></svg></span>Live markets</a><a class="nav-link" href="#coverage"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M4 19V9m5 10V5m6 14v-7m5 7V3"/></svg></span>Data coverage</a></div>