body.demo-page{background:#0d1114;color:#eef1f5}.demo-top{position:sticky;top:0;z-index:40;background:rgba(13,17,20,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.07)}.demo-shell{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh}.demo-side{border-right:1px solid rgba(255,255,255,.07);padding:1rem;background:#100f30;position:sticky;top:61px;height:calc(100vh - 61px)}.demo-side a{display:flex;align-items:center;gap:.7rem;color:#9ca5b4;text-decoration:none;padding:.72rem .8rem;border-radius:12px;margin:.18rem 0}.demo-side a.active,.demo-side a:hover{background:rgba(255,255,255,.08);color:white}.demo-main{padding:2rem;min-width:0}.demo-note{border:1px solid rgba(255,194,74,.25);background:rgba(255,194,74,.07);border-radius:14px;padding:.75rem 1rem;color:#dfc47f}.demo-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}.demo-card{border:1px solid rgba(255,255,255,.08);background:#171c21;border-radius:20px;padding:1.1rem}.demo-card small{display:block;color:#8d96a4}.demo-card strong{display:block;font-size:1.4rem;margin-top:.35rem}.demo-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:1rem}.demo-panel{border:1px solid rgba(255,255,255,.08);background:#171c21;border-radius:22px;padding:1.2rem;min-width:0}.demo-ring{width:110px;height:110px;border-radius:50%;background:conic-gradient(#6f63ff 0 72%,#252b31 72% 100%);display:grid;place-items:center;margin:1rem auto}.demo-ring:after{content:'';width:78px;height:78px;border-radius:50%;background:#171c21;position:absolute}.demo-ring strong{position:relative;z-index:1;font-size:1.6rem}.demo-chart{height:190px}.demo-cta{border:1px solid rgba(111,99,255,.26);background:linear-gradient(135deg,rgba(111,99,255,.12),rgba(204,79,209,.08));border-radius:22px;padding:1.4rem}@media(max-width:1199.98px){.demo-metrics{grid-template-columns:repeat(3,1fr)}}@media(max-width:991.98px){.demo-shell{grid-template-columns:1fr}.demo-side{display:none}.demo-main{padding:1.2rem}.demo-grid{grid-template-columns:1fr}}@media(max-width:767.98px){.demo-metrics{grid-template-columns:1fr 1fr}}@media(max-width:480px){.demo-metrics{grid-template-columns:1fr}}