/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  background:#060b18;color:#e2e8f0;min-height:100vh;overflow:hidden}

/* ===== APP SHELL ===== */
.app{display:flex;height:100vh;overflow:hidden}

/* ===== SIDEBAR ===== */
.sidebar{
  width:220px;min-width:220px;height:100vh;
  background:#080e1f;border-right:1px solid rgba(255,255,255,0.06);
  display:flex;flex-direction:column;
  transition:width .25s,min-width .25s;
  overflow:hidden;z-index:50;
}
.sidebar.collapsed{width:64px;min-width:64px}
.sidebar.collapsed .brand-name,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .bt-label,
.sidebar.collapsed .bt-btn span{display:none}

.brand{display:flex;align-items:center;gap:12px;padding:20px 16px;
  border-bottom:1px solid rgba(255,255,255,0.05)}
.brand-icon{width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,#6366f1,#06b6d4);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:18px;color:#fff;flex-shrink:0}
.brand-name{font-size:18px;font-weight:700;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,#a5b4fc,#67e8f9);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}

.sidebar-nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:4px}
.nav-item{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;border:none;
  background:transparent;color:#94a3b8;font-size:14px;font-weight:500;
  cursor:pointer;transition:all .18s;text-align:left;white-space:nowrap;
}
.nav-item:hover{background:rgba(99,102,241,0.12);color:#c7d2fe}
.nav-item.active{
  background:linear-gradient(135deg,rgba(99,102,241,0.25),rgba(6,182,212,0.15));
  color:#fff;border:1px solid rgba(99,102,241,0.3)
}
.ni{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2}

.sidebar-footer{padding:12px;border-top:1px solid rgba(255,255,255,0.05)}
.bt-status-row{display:flex;align-items:center;gap:8px;padding:8px 4px;
  font-size:12px;color:#64748b}
.bt-dot{width:8px;height:8px;border-radius:50%;background:#334155;flex-shrink:0;transition:all .3s}
.bt-dot.on{background:#22c55e;box-shadow:0 0 8px #22c55e;animation:pulse 1.5s infinite}
.bt-label{white-space:nowrap;overflow:hidden}
.bt-btn{
  width:100%;padding:9px;border-radius:8px;border:1px solid rgba(99,102,241,0.3);
  background:rgba(99,102,241,0.15);color:#a5b4fc;font-size:13px;font-weight:600;
  cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;gap:6px;
}
.bt-btn:hover{background:rgba(99,102,241,0.3);border-color:#6366f1}

/* ===== MAIN WRAP ===== */
.main-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* ===== TOPBAR ===== */
.topbar{
  height:56px;min-height:56px;
  background:rgba(8,14,31,0.9);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.05);
  display:flex;align-items:center;gap:14px;padding:0 20px;
  position:relative;z-index:40;
}
.menu-tog{
  background:none;border:none;cursor:pointer;color:#64748b;
  padding:6px;border-radius:6px;transition:.18s;display:flex;
}
.menu-tog:hover{background:rgba(255,255,255,0.06);color:#e2e8f0}
.page-title{font-size:17px;font-weight:700;color:#f1f5f9;flex:1}
.topbar-r{display:flex;align-items:center;gap:12px}
.live-badge{
  display:flex;align-items:center;gap:5px;padding:4px 10px;
  border-radius:20px;font-size:11px;font-weight:700;letter-spacing:1px;
  background:rgba(71,85,105,0.3);color:#64748b;border:1px solid rgba(71,85,105,0.3);
  transition:all .3s;
}
.live-badge.on{background:rgba(34,197,94,0.15);color:#22c55e;border-color:rgba(34,197,94,0.3)}
.live-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.live-badge.on .live-dot{animation:pulse 1.2s infinite}
.clock{font-size:13px;color:#64748b;font-variant-numeric:tabular-nums}

/* ===== PAGES ===== */
.pages{flex:1;overflow-y:auto;padding:20px;min-width:0}
.page{display:none}
.page.active{display:block}

/* ===== GLASS CARD ===== */
.gcard{
  background:rgba(13,18,36,0.85);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.07);border-radius:16px;
  padding:18px;
}
.gc-title{font-size:14px;font-weight:700;color:#cbd5e1;margin-bottom:14px}
.gc-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* ===== STAT CARDS ===== */
.stat-cards-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.scard{
  background:rgba(13,18,36,0.85);border-radius:14px;padding:18px 16px;
  border:1px solid rgba(255,255,255,0.06);position:relative;overflow:hidden;
}
.scard::before{content:'';position:absolute;inset:0;opacity:.06;pointer-events:none}
.scard.red::before{background:#ef4444}
.scard.orange::before{background:#f97316}
.scard.green::before{background:#22c55e}
.scard.blue::before{background:#6366f1}
.scard-num{font-size:34px;font-weight:800;line-height:1;margin-bottom:4px}
.scard.red .scard-num{color:#ef4444}
.scard.orange .scard-num{color:#f97316}
.scard.green .scard-num{color:#22c55e}
.scard.blue .scard-num{color:#6366f1}
.scard-lbl{font-size:13px;font-weight:600;color:#cbd5e1}
.scard-sub{font-size:11px;color:#475569;margin-top:2px}

/* ===== DASHBOARD GRID ===== */
.dash-grid{display:grid;gap:14px;
  grid-template-areas:
    "sc sc sc sc"
    "top5 top5 radar radar"
    "dashline dashline dashline dashline";
  grid-template-columns:1fr 1fr 1fr 1fr;
}
.stat-cards-row{grid-area:sc}

/* TOP5 */
.top5{display:flex;flex-direction:column;gap:8px}
.t5i{display:grid;grid-template-columns:22px 140px 1fr 46px 80px;
  align-items:center;gap:8px;padding:8px 10px;
  background:rgba(255,255,255,0.03);border-radius:8px;
  border:1px solid rgba(255,255,255,0.04);transition:.15s}
.t5i:hover{background:rgba(255,255,255,0.06)}
.t5r{font-size:12px;font-weight:700;color:#475569}
.t5n{font-size:13px;font-weight:600;color:#cbd5e1}
.t5bw{background:#0f1829;border-radius:4px;height:6px;overflow:hidden}
.t5b{height:100%;border-radius:4px;transition:width .4s}
.t5v{font-size:14px;font-weight:700;text-align:right}

/* CHART WRAPS */
.chart-wrap{position:relative;height:240px}
.chart-wrap-tall{position:relative;height:300px}

/* ===== BADGES ===== */
.badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px;white-space:nowrap}
.normal-b{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
.mild-b{background:rgba(234,179,8,.15);color:#eab308;border:1px solid rgba(234,179,8,.3)}
.moderate-b{background:rgba(249,115,22,.15);color:#f97316;border:1px solid rgba(249,115,22,.3)}
.severe-b{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.3)}

/* ===== 3D PAGE ===== */
.b3d-layout{
  display:grid;grid-template-columns:1fr 300px;gap:14px;
  height:calc(100vh - 100px);
}
.b3d-card{display:flex;flex-direction:column;height:100%;padding:16px}
#three-cont{
  flex:1;min-height:0;border-radius:12px;overflow:hidden;
  background:#060b18;position:relative;
}
#three-cont canvas{display:block}
.tleg{display:flex;gap:14px;margin-top:10px;font-size:12px;color:#64748b}
.ld{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:middle}
.b3d-ctrls{display:flex;align-items:center;gap:10px}
.ctrl-btn{
  padding:5px 12px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.05);color:#94a3b8;font-size:12px;cursor:pointer;
  transition:.15s;
}
.ctrl-btn:hover{background:rgba(255,255,255,0.1);color:#e2e8f0}
.tgl-lbl{font-size:12px;color:#64748b;cursor:pointer;display:flex;align-items:center;gap:5px}
.tgl-lbl input{accent-color:#6366f1}

.b3d-side{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.b3d-list-card{flex:1;display:flex;flex-direction:column;overflow:hidden}

/* Muscle detail */
.det-name{font-size:18px;font-weight:700;color:#f1f5f9;margin-bottom:10px}
.det-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.det-val{font-size:28px;font-weight:800}
.det-bar-bg{background:#0f1829;border-radius:6px;height:8px;overflow:hidden;margin-bottom:10px}
.det-bar{height:100%;border-radius:6px;transition:width .4s}
.det-advice{font-size:13px;color:#94a3b8;margin-bottom:12px;line-height:1.5}
.det-mini-lbl{font-size:11px;color:#475569;margin-bottom:6px}
.detail-hint{color:#334155;font-size:13px;text-align:center;padding:20px 0;line-height:1.8}

/* Compact muscle list */
.cml{overflow-y:auto;flex:1}
.cml-item{
  display:grid;grid-template-columns:120px 1fr 38px;
  align-items:center;gap:8px;padding:6px 8px;
  border-radius:6px;cursor:pointer;transition:.12s;font-size:12px;
}
.cml-item:hover{background:rgba(255,255,255,0.04)}
.cml-n{color:#94a3b8;font-weight:500}
.cml-bw{background:#0f1829;border-radius:3px;height:5px;overflow:hidden}
.cml-b{height:100%;border-radius:3px;transition:width .4s}
.cml-v{font-weight:700;text-align:right}

/* ===== ANALYTICS ===== */
.ana-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ana-full{grid-column:1/-1}

/* ===== HISTORY ===== */
.hist-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hist-scroll{overflow-y:auto;max-height:420px}
.htbl{width:100%;border-collapse:collapse;font-size:13px}
.htbl th{
  padding:8px 10px;text-align:left;font-size:11px;font-weight:700;
  color:#475569;text-transform:uppercase;letter-spacing:.5px;
  border-bottom:1px solid rgba(255,255,255,0.06);position:sticky;top:0;
  background:#0a1022;
}
.htbl td{
  padding:8px 10px;border-bottom:1px solid rgba(255,255,255,0.04);
  color:#94a3b8;
}
.htbl tr:hover td{background:rgba(255,255,255,0.03)}

/* ===== SETTINGS ===== */
.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.set-rows{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.set-row{
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;padding:10px 12px;border-radius:8px;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04);
}
.set-row span:first-child{color:#94a3b8}
.set-row span:last-child{color:#cbd5e1;font-weight:600}
.set-btn{
  padding:10px;border-radius:8px;border:none;cursor:pointer;
  font-size:14px;font-weight:600;width:100%;transition:.18s;
}
.set-btn.primary{background:rgba(99,102,241,0.2);color:#a5b4fc;border:1px solid rgba(99,102,241,0.3)}
.set-btn.primary:hover{background:rgba(99,102,241,0.35)}

/* ===== FORM ELEMENTS ===== */
.msel{
  background:rgba(15,24,41,0.9);border:1px solid rgba(255,255,255,0.1);
  color:#94a3b8;font-size:12px;padding:4px 8px;border-radius:6px;cursor:pointer;outline:none;
}

/* ===== TOAST ===== */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  padding:11px 22px;border-radius:10px;font-size:14px;font-weight:500;
  color:#fff;background:#0f172a;border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 8px 32px rgba(0,0,0,0.4);z-index:9999;
  animation:slideUp .3s ease;
}
.t-error{background:#991b1b;border-color:#ef4444}
.t-success{background:#14532d;border-color:#22c55e}
.hidden{display:none!important}
@keyframes slideUp{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#1e293b;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#334155}

/* ===== RESPONSIVE ===== */
@media(max-width:1200px){
  .b3d-layout{grid-template-columns:1fr 260px}
  .dash-grid{grid-template-areas:"sc sc sc sc""top5 top5 top5 top5""radar radar dashline dashline"}
}
@media(max-width:900px){
  .stat-cards-row{grid-template-columns:1fr 1fr}
  .ana-grid{grid-template-columns:1fr}
  .ana-full{grid-column:1}
  .hist-layout{grid-template-columns:1fr}
  .b3d-layout{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .b3d-side{flex-direction:row}
}
@media(max-width:600px){
  .sidebar{width:64px;min-width:64px}
  .sidebar .brand-name,.sidebar .nav-item span,.sidebar .bt-label{display:none}
  .pages{padding:12px}
  .stat-cards-row{grid-template-columns:1fr 1fr}
  .b3d-side{flex-direction:column}
}