:root{
  --bg:#04050a;
  --panel:#11141d;
  --panel-2:#171b26;
  --panel-3:#202736;
  --line:#293244;
  --line-soft:rgba(146,186,255,.12);
  --text:#f4f7ff;
  --muted:#92a0ba;
  --muted-2:#6f7d98;
  --green:#75ff9a;
  --green-soft:#133524;
  --cyan:#59c7ff;
  --red:#b12432;
  --red-soft:#ff667f;
  --blue-soft:#86dbff;
  --glow-cyan:rgba(89,199,255,.22);
  --glow-green:rgba(117,255,154,.18);
  --shadow:0 22px 60px rgba(0,0,0,.42);
  --panel-shadow:0 18px 46px rgba(0,0,0,.34);
}

@keyframes panelFloatIn{
  from{
    opacity:0;
    transform:translateY(18px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes hudRotate{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes neonPulse{
  0%,100%{box-shadow:0 0 0 rgba(89,199,255,0), 0 0 0 rgba(117,255,154,0)}
  50%{box-shadow:0 0 28px rgba(89,199,255,.12), 0 0 42px rgba(117,255,154,.08)}
}

@keyframes activeGlow{
  0%,100%{opacity:.72}
  50%{opacity:1}
}

*{box-sizing:border-box}

html{background:#000}

body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(89,199,255,.18), transparent 28%),
    radial-gradient(circle at top right, rgba(117,255,154,.12), transparent 26%),
    radial-gradient(circle at bottom center, rgba(60,96,255,.12), transparent 32%),
    linear-gradient(180deg, #05070d 0%, #090c14 40%, #04060b 100%);
  font-family:"SF Pro Display","Segoe UI","Helvetica Neue",sans-serif;
  position:relative;
  overflow-x:hidden;
}

button,input{font:inherit}

.app-shell{
  min-height:100vh;
  padding:14px 10px 28px;
  position:relative;
}

.app-shell::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 90%);
  opacity:.28;
}

.phone-frame{
  width:min(100%, 860px);
  margin:0 auto;
  position:relative;
}

.phone-frame::before{
  content:"";
  position:absolute;
  inset:78px 6px 18px;
  border-radius:34px;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(89,199,255,.08), transparent 34%, rgba(117,255,154,.05) 100%);
  border:1px solid rgba(120,163,255,.08);
  filter:blur(.2px);
  opacity:.9;
}

.hidden{display:none !important}

.nav-link-icon{
  display:grid;
  place-items:center;
  text-decoration:none;
}

.auth-card,
.user-bar{
  background:
    linear-gradient(135deg, rgba(89,199,255,.12), rgba(117,255,154,.08)),
    rgba(13,16,24,.74);
  border:1px solid rgba(140,182,255,.14);
  border-radius:26px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
}

.auth-card{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:22px;
  padding:22px;
  margin-bottom:10px;
}

.auth-page-card{
  margin-top:18px;
}

.auth-topbar{
  padding-top:14px;
}

.ghost-icon{
  opacity:.3;
  pointer-events:none;
}

.auth-copy h2{
  margin:0 0 10px;
  font-size:clamp(1.6rem, 4vw, 2.5rem);
  letter-spacing:-.04em;
}

.auth-text{
  margin:0;
  color:#c8d0dd;
  line-height:1.6;
}

.auth-panel{
  padding:18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(10,12,18,.9), rgba(15,19,28,.82));
  border:1px solid rgba(136,177,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:16px;
}

.auth-tab,
.auth-submit{
  border:none;
  border-radius:16px;
  min-height:52px;
  font-weight:700;
  color:var(--text);
}

.auth-tab{
  background:linear-gradient(180deg, #232937, #1a202c);
  cursor:pointer;
  border:1px solid rgba(137,175,255,.08);
}

.auth-tab.active{
  background:linear-gradient(135deg, #3dbbff, #6cffab);
  color:#081117;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 10px 24px rgba(89,199,255,.22);
}

.auth-form{
  display:grid;
  gap:14px;
}

.auth-form label{
  display:block;
  color:#aab2c2;
  font-size:.92rem;
}

.auth-form input{
  width:100%;
  margin-top:8px;
  padding:14px 16px;
  border:none;
  border-radius:16px;
  background:linear-gradient(180deg, #1b2130, #171c28);
  color:var(--text);
  border:1px solid rgba(137,175,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.auth-submit{
  background:linear-gradient(135deg, #40c1ff, #73ffad);
  color:#081117;
  cursor:pointer;
  box-shadow:0 16px 32px rgba(89,199,255,.2);
}

.auth-message{
  min-height:24px;
  margin-top:12px;
  font-size:.95rem;
}

.auth-message.ok{color:#9ef991}
.auth-message.error{color:#ff9097}

.user-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  margin-bottom:10px;
}

.user-bar strong{
  display:block;
  font-size:1.2rem;
}

.user-bar span{
  color:#b6becc;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:6px 4px 14px;
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(14px);
}

.topbar h1{
  margin:0;
  font-size:clamp(1.5rem, 3vw, 2rem);
  font-weight:700;
  letter-spacing:.01em;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 0 18px rgba(89,199,255,.18);
}

.icon-btn{
  width:42px;
  height:42px;
  border:1px solid rgba(137,175,255,.14);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(22,28,40,.9), rgba(15,19,28,.78));
  color:var(--text);
  font-size:1.8rem;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.icon-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(89,199,255,.24);
  box-shadow:0 14px 28px rgba(0,0,0,.28), 0 0 18px rgba(89,199,255,.12);
}

.hero-card,
.main-panel,
.chart-card,
.summary-card,
.config-card,
.table-card{
  background:
    linear-gradient(180deg, rgba(18,22,32,.96), rgba(12,15,23,.92)),
    var(--panel);
  border:1px solid rgba(139,180,255,.12);
  border-radius:22px;
  box-shadow:var(--panel-shadow);
  backdrop-filter:blur(14px);
  position:relative;
  overflow:hidden;
  animation:panelFloatIn .55s cubic-bezier(.22,1,.36,1) both;
}

.hero-card::before,
.main-panel::before,
.chart-card::before,
.summary-card::before,
.config-card::before,
.table-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(89,199,255,.08), transparent 28%, transparent 68%, rgba(117,255,154,.05) 100%);
  opacity:.9;
}

.hero-card{
  display:grid;
  grid-template-columns:minmax(260px, 320px) minmax(0, 1fr) 174px;
  gap:18px;
  padding:16px 18px;
  margin-bottom:8px;
}

.exercise-media{
  border-radius:14px;
  min-height:286px;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.55) 0 4%, transparent 5%),
    linear-gradient(90deg, transparent 0 58%, rgba(255,255,255,.08) 58% 61%, transparent 61% 100%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    #20242c;
  border:1px solid var(--line-soft);
  overflow:hidden;
  position:relative;
}

.exercise-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#0f1116;
  z-index:2;
  cursor:zoom-in;
}

.exercise-image-hitbox{
  position:absolute;
  inset:0;
  z-index:3;
  border:none;
  padding:0;
  margin:0;
  background:transparent;
  cursor:zoom-in;
}

.exercise-image-hitbox:disabled{
  cursor:default;
}

.exercise-controls-top{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-bottom:18px;
}

.title-field{
  display:block;
}

.title-field span{
  display:block;
  margin-bottom:8px;
  color:#c4ccda;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.title-field select{
  width:100%;
  border:none;
  border-radius:14px;
  padding:14px 16px;
  background:#1b1f27;
  color:var(--text);
  border:1px solid var(--line);
}

.exercise-figure{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 0 72%, rgba(255,255,255,.12) 72% 74%, transparent 74% 100%),
    linear-gradient(180deg, transparent 0 10%, rgba(255,255,255,.08) 10% 12%, transparent 12% 100%),
    radial-gradient(circle at 28% 18%, rgba(240,240,240,.68) 0 7%, transparent 7.5%),
    linear-gradient(180deg, transparent 0 28%, rgba(226,226,226,.58) 28% 56%, transparent 56% 100%),
    linear-gradient(145deg, transparent 0 36%, rgba(255,108,71,.92) 36% 42%, transparent 42% 100%),
    linear-gradient(97deg, transparent 0 50%, rgba(255,255,255,.48) 50% 70%, transparent 70% 100%),
    linear-gradient(180deg, transparent 0 64%, rgba(255,255,255,.42) 64% 86%, transparent 86% 100%);
  opacity:.95;
  z-index:1;
}

.image-empty-state{
  position:absolute;
  inset:auto 18px 48px 18px;
  z-index:4;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(10,12,17,.78);
  border:1px solid rgba(255,255,255,.08);
  color:#d6dbe5;
  text-align:center;
  font-weight:600;
  backdrop-filter:blur(6px);
  pointer-events:none;
}

.image-hint{
  position:absolute;
  left:18px;
  right:18px;
  bottom:12px;
  z-index:5;
  padding:7px 10px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(6,7,10,.05), rgba(6,7,10,.6));
  color:#eef2f8;
  text-align:center;
  font-size:.8rem;
  font-weight:600;
  pointer-events:none;
}

.exercise-copy{align-self:center}

.eyebrow{
  margin:0 0 10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
}

.exercise-copy h2{
  margin:0;
  font-size:clamp(1.75rem, 4vw, 2.7rem);
  letter-spacing:-.04em;
}

.exercise-subtitle{
  margin:8px 0 20px;
  color:#c7ccd7;
  font-size:clamp(1rem, 2.2vw, 1.2rem);
}

.connection-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
  color:#0df18e;
}

.connection-icon{
  font-size:1.55rem;
  line-height:1;
  color:#11ea90;
}

.ble-dot{
  width:11px;
  height:11px;
  border-radius:999px;
  background:var(--green);
  box-shadow:0 0 0 7px rgba(99,239,87,.14);
}

.helper-copy{
  margin:0;
  color:var(--muted);
  line-height:1.45;
  max-width:28rem;
}

.sensor-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
  padding:20px 18px 18px;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(31,37,51,.96), rgba(22,28,39,.9));
  border:1px solid rgba(139,180,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.battery-pill{
  display:flex;
  align-items:center;
  gap:14px;
  color:#a8ffe2;
  text-shadow:0 0 16px rgba(117,255,154,.18);
}

.battery-pill strong{
  font-size:1.95rem;
  font-weight:500;
}

.battery-icon{
  width:42px;
  height:22px;
  border-radius:4px;
  border:2px solid #89ff8d;
  position:relative;
}

.battery-icon::before{
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  bottom:3px;
  width:28px;
  border-radius:1px;
  background:#6dff66;
}

.battery-icon::after{
  content:"";
  position:absolute;
  right:-6px;
  top:6px;
  width:4px;
  height:8px;
  border-radius:0 2px 2px 0;
  background:#89ff8d;
}

.sensor-label,.sensor-state,.sensor-meta{
  color:#c9d0dc;
  font-size:1rem;
}

.sensor-ble-actions{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:8px 0 6px;
}

.sensor-ble-btn{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  font-size:.9rem;
  border-radius:12px;
}

.sensor-state{color:#70f596}
.sensor-meta strong{color:#f3f5f8}

.main-panel{
  margin-top:8px;
  padding:20px 22px;
  display:grid;
  grid-template-columns:180px minmax(260px, 1fr) 180px;
  gap:22px;
}

.metric-stack{
  display:grid;
  gap:14px;
}

.mini-stat{
  padding:14px 0 24px;
  border-bottom:1px solid var(--line);
}

.mini-stat:last-child{border-bottom:none;padding-bottom:0}

.mini-stat span{
  display:block;
  color:#aeb4c0;
  text-transform:uppercase;
  font-size:.82rem;
  letter-spacing:.03em;
  margin-bottom:12px;
  font-weight:700;
}

.mini-stat strong{
  font-size:2.95rem;
  line-height:1;
  color:var(--cyan);
  font-weight:700;
}

.mini-stat small{
  font-size:.58em;
  color:#d7deea;
}

.mini-stat.success strong{color:var(--green)}

.ring-panel{
  display:grid;
  place-items:center;
}

.ring-actions{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:start;
  margin-bottom:14px;
}

.ring-action-btn{
  min-height:46px;
  padding:10px 12px;
  font-size:.88rem;
  border-radius:12px;
}

.ring-actions .ring-action-btn:first-child{
  justify-self:start;
}

.ring-actions .ring-action-btn:last-child{
  justify-self:end;
}

.ring-wrap{
  width:min(100%, 372px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  position:relative;
}

.ring-wrap::before,
.ring-wrap::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:50%;
  pointer-events:none;
}

.ring-wrap::before{
  border:1px solid rgba(89,199,255,.16);
  mask-image:linear-gradient(120deg, transparent 8%, rgba(0,0,0,.92) 26%, rgba(0,0,0,.92) 74%, transparent 92%);
  animation:hudRotate 18s linear infinite;
}

.ring-wrap::after{
  inset:22px;
  border:1px dashed rgba(117,255,154,.14);
  opacity:.9;
  animation:hudRotate 28s linear infinite reverse;
}

.progress-ring{
  --progress:.0turn;
  width:100%;
  height:100%;
  border-radius:50%;
  padding:16px;
  background:
    radial-gradient(circle at center, transparent 63%, rgba(255,255,255,.05) 63.6%, transparent 64.2%),
    conic-gradient(var(--green) var(--progress), #2c3038 0);
  display:grid;
  place-items:center;
  position:relative;
  animation:neonPulse 4.2s ease-in-out infinite;
}

.progress-ring::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:50%;
  border:1px solid rgba(89,199,255,.1);
  box-shadow:inset 0 0 28px rgba(89,199,255,.06);
  pointer-events:none;
}

.progress-ring::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  background:
    conic-gradient(from 90deg, transparent 0 12%, rgba(89,199,255,.34) 12% 14%, transparent 14% 48%, rgba(117,255,154,.32) 48% 50%, transparent 50% 84%, rgba(89,199,255,.28) 84% 86%, transparent 86% 100%);
  filter:blur(.3px);
  opacity:.8;
  pointer-events:none;
}

.ring-core{
  width:100%;
  height:100%;
  border-radius:50%;
  background:radial-gradient(circle at top, rgba(255,255,255,.03), rgba(10,11,14,.98) 58%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  box-shadow:inset 0 0 40px rgba(89,199,255,.04);
}

.ring-core::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.04);
  pointer-events:none;
}

.ring-label,
.ring-target{
  color:#9aa2b3;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.ring-label{font-size:1rem}

.ring-core strong{
  font-size:clamp(4.9rem, 10vw, 7.2rem);
  line-height:1;
  letter-spacing:-.05em;
  text-shadow:0 0 22px rgba(89,199,255,.18);
}

.ring-target{
  font-size:1.85rem;
  margin-top:8px;
  color:#eef3fb;
  font-weight:700;
  text-shadow:0 0 18px rgba(89,199,255,.12);
}

.ring-badge{
  margin-top:16px;
  padding:10px 18px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(31,64,43,.94), rgba(22,46,33,.9));
  color:#9dff85;
  font-weight:700;
  font-size:1.15rem;
  border:1px solid rgba(117,255,154,.16);
  animation:activeGlow 2.4s ease-in-out infinite;
}

.chart-card,
.config-card,
.table-card{
  margin-top:10px;
  padding:18px 20px;
}

.quick-config-card{
  padding:16px 18px 18px;
}

.quick-config-grid{
  display:grid;
  grid-template-columns:1.2fr minmax(0, .9fr) minmax(0, .7fr) minmax(0, .7fr) minmax(0, .7fr);
  gap:12px;
  align-items:end;
}

.quick-config-grid label{
  display:block;
  color:#aab2c2;
  font-size:.92rem;
}

.quick-config-grid input{
  width:100%;
  margin-top:8px;
  padding:14px 16px;
  border:none;
  border-radius:16px;
  background:#1b1f27;
  color:var(--text);
  border:1px solid var(--line);
}

.apply-config-btn{
  min-height:56px;
  font-size:1rem;
}

.config-apply-state{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#171b22;
  color:#c7cfdd;
  font-size:.95rem;
}

.config-apply-state.active{
  border-color:rgba(102,239,88,.28);
  background:#172019;
  color:#9ef991;
}

.config-apply-state.pending{
  border-color:rgba(69,184,255,.28);
  background:#131c25;
  color:#8dd7ff;
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.section-head h3,
.summary-card h3,
.table-card h3{
  margin:0;
  color:#a8b0bf;
  font-size:1rem;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.info-chip{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  color:#b7bfce;
  font-size:.9rem;
}

.chart-shell{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:12px;
  align-items:stretch;
}

.chart-axis{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#b3bac8;
  font-size:.9rem;
  padding:4px 0 18px;
}

.chart-area{
  position:relative;
  min-height:190px;
  padding-bottom:28px;
  border-radius:14px;
  overflow:hidden;
  background:#11141b;
  border:1px solid var(--line);
}

.chart-grid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(transparent 24%, rgba(255,255,255,.08) 25%, transparent 26%, transparent 49%, rgba(255,255,255,.08) 50%, transparent 51%, transparent 74%, rgba(255,255,255,.08) 75%, transparent 76%),
    linear-gradient(90deg, transparent 24%, rgba(255,255,255,.08) 25%, transparent 26%, transparent 49%, rgba(255,255,255,.08) 50%, transparent 51%, transparent 74%, rgba(255,255,255,.08) 75%, transparent 76%);
  opacity:.55;
}

.chart-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.chart-line{
  fill:none;
  stroke:#57c6ff;
  stroke-width:4;
}

.chart-fill{
  fill:rgba(99,239,87,.12);
  stroke:none;
}

.chart-time{
  position:absolute;
  left:16px;
  right:16px;
  bottom:8px;
  display:flex;
  justify-content:space-between;
  color:#c0c7d4;
}

.summary-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:10px;
}

.rest-summary-grid{
  grid-template-columns:1fr;
}

.summary-card{
  padding:18px 18px 16px;
  backdrop-filter:blur(14px);
}

.summary-value-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:18px;
}

.rest-row,
.heart-row,
.calories-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:18px;
}

.rest-ring{
  --rest-progress:.0turn;
  width:76px;
  height:76px;
  border-radius:50%;
  background:
    radial-gradient(circle at center, #111318 58%, transparent 59%),
    conic-gradient(#3ad5ff var(--rest-progress), #2b303b 0);
}

.summary-card strong{
  font-size:2rem;
  line-height:1;
  text-shadow:0 0 18px rgba(89,199,255,.14);
}

.summary-card strong small{
  font-size:.45em;
  color:#c6cedc;
}

.summary-card span{
  display:block;
  color:var(--muted);
  margin-top:6px;
}

.heart-icon,
.fire-icon{
  font-size:2rem;
}

.heart-icon{color:#ff445a}

.heart-wave{
  margin-top:18px;
  height:72px;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,68,90,.16), rgba(255,68,90,.02)),
    linear-gradient(135deg, transparent 0 14%, rgba(255,68,90,.95) 14% 18%, transparent 18% 24%, rgba(255,68,90,.95) 24% 28%, transparent 28% 34%, rgba(255,68,90,.95) 34% 40%, transparent 40% 46%, rgba(255,68,90,.95) 46% 50%, transparent 50% 56%, rgba(255,68,90,.95) 56% 62%, transparent 62% 100%);
}

.effort-card{
  display:flex;
  flex-direction:column;
}

.effort-header-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
}

.effort-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(89,199,255,.12);
  border:1px solid rgba(89,199,255,.18);
  color:#eaf4ff;
  margin-top:0;
  text-align:center;
}

.effort-scale{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px;
  margin-top:16px;
}

.effort-chip{
  min-height:44px;
  border-radius:14px;
  border:1px solid rgba(137,175,255,.14);
  background:linear-gradient(180deg, rgba(34,40,55,.96), rgba(22,27,38,.92));
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.effort-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(89,199,255,.28);
}

.effort-chip.active{
  border-color:rgba(111,255,177,.4);
  background:linear-gradient(180deg, rgba(74,220,170,.28), rgba(27,49,41,.92));
  box-shadow:0 0 0 1px rgba(111,255,177,.16), 0 12px 24px rgba(0,0,0,.18);
}

.effort-help{
  margin:12px 0 0;
  color:#aeb8c9;
  font-size:.9rem;
}

.control-row{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:10px;
}

.control-btn{
  border:1px solid rgba(137,175,255,.14);
  border-radius:16px;
  min-height:76px;
  padding:16px 18px;
  font-weight:700;
  font-size:1.1rem;
  color:var(--text);
  cursor:pointer;
  box-shadow:var(--shadow);
  background:linear-gradient(180deg, rgba(34,40,55,.96), rgba(22,27,38,.92));
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

.control-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(89,199,255,.14), transparent 36%, transparent 70%, rgba(117,255,154,.08) 100%);
  pointer-events:none;
}

.control-btn.secondary{
  background:linear-gradient(180deg, rgba(40,47,64,.96), rgba(25,30,42,.92));
}

.control-btn.ghost{
  background:linear-gradient(180deg, rgba(34,41,56,.96), rgba(20,24,34,.9));
}

.control-btn.danger{
  background:linear-gradient(180deg, rgba(177,36,50,.95), rgba(124,20,33,.92));
  border-color:rgba(255,113,130,.2);
}

.compact-btn{
  min-height:52px;
  width:100%;
  font-size:.95rem;
  padding:12px 16px;
}

.btn-icon{
  display:inline-block;
  margin-right:10px;
  font-size:1.05em;
}

.control-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.control-btn:not(:disabled):hover{
  transform:translateY(-1px);
  border-color:rgba(89,199,255,.24);
  box-shadow:0 18px 34px rgba(0,0,0,.28), 0 0 22px rgba(89,199,255,.08);
  filter:saturate(1.08);
}

.profile-link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.config-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.config-grid label{
  display:block;
  color:#aab2c2;
  font-size:.92rem;
}

.config-grid input{
  width:100%;
  margin-top:8px;
  padding:14px 16px;
  border:none;
  border-radius:16px;
  background:#1b1f27;
  color:var(--text);
  border:1px solid var(--line);
}

.config-grid label:last-child{
  grid-column:1 / -1;
}

.text-action{
  border:none;
  background:none;
  color:#8ad5ff;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.notice{
  margin-top:16px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(137,175,255,.12);
  background:linear-gradient(180deg, rgba(24,29,40,.92), rgba(18,22,31,.88));
  color:#b8c0cf;
}

.notice.ok{
  border-color:rgba(99,239,87,.25);
  background:rgba(99,239,87,.08);
  color:#9ef991;
}

.notice.error{
  border-color:rgba(255,87,95,.22);
  background:rgba(255,87,95,.08);
  color:#ff9097;
}

.message{
  margin-top:14px;
  min-height:24px;
  font-size:.96rem;
}

.message.ok{color:#9ef991}
.message.error{color:#ff9097}

.page-card{
  margin-top:10px;
}

.page-stack{
  display:grid;
  gap:18px;
}

.page-stack > *{
  margin-top:0;
}

.page-card,
.summary-card,
.stat-card,
.table-card{
  width:100%;
  min-width:0;
}

.exercise-report-card{
  margin-top:16px;
  display:grid;
  gap:18px;
}

.exercise-report-head{
  align-items:flex-start;
}

.exercise-report-summary,
.exercise-report-metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:14px;
}

.exercise-report-summary article,
.exercise-report-breakdown .exercise-report-summary article{
  padding:16px 18px;
  border-radius:18px;
  background:rgba(17,22,31,.72);
  border:1px solid rgba(139,180,255,.12);
}

.exercise-report-summary span,
.report-metric-card span{
  color:#aeb7c7;
}

.exercise-report-summary strong,
.report-metric-card strong{
  display:block;
  margin-top:10px;
  font-size:1.4rem;
}

.exercise-report-details{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:16px;
}

.exercise-report-block{
  padding:18px;
  border-radius:20px;
  background:rgba(10,17,24,.72);
  border:1px solid rgba(139,180,255,.12);
}

.exercise-report-block h4,
.exercise-report-breakdown h4{
  margin:0 0 12px;
  font-size:1.05rem;
}

.exercise-report-block p{
  margin:0 0 10px;
  color:#dfe7f4;
}

.exercise-report-list{
  margin:0;
  padding-left:20px;
  color:#dfe7f4;
}

.exercise-report-list li + li{
  margin-top:10px;
}

.exercise-report-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.exercise-report-actions [aria-disabled="true"]{
  pointer-events:none;
  opacity:.6;
}

.printable-report-card{
  margin-bottom:20px;
}

.page-grid,
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

@media print{
  body{
    background:#fff;
  }

  .topbar,
  .bottom-nav,
  .user-bar,
  .no-print{
    display:none !important;
  }

  .phone-frame,
  .exercise-report-card,
  .summary-card,
  .table-card{
    background:#fff !important;
    box-shadow:none !important;
    border-color:#d9dee7 !important;
    color:#111 !important;
  }

  .exercise-report-summary article,
  .exercise-report-block{
    background:#fff !important;
    border-color:#d9dee7 !important;
    color:#111 !important;
  }
}

.stat-card strong{
  display:block;
  margin-top:18px;
  font-size:2.5rem;
}

.stat-card span{
  margin-top:10px;
}

.profile-hero{
  display:flex;
  align-items:center;
  gap:18px;
  padding:22px;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:var(--shadow);
}

.profile-avatar{
  width:84px;
  height:84px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg, #45b8ff, #66ef58);
  color:#081015;
  font-size:2rem;
  font-weight:800;
}

.profile-title{
  margin:0;
  font-size:2rem;
  letter-spacing:-.04em;
}

.profile-subtitle{
  margin:8px 0 0;
  color:#bcc4d1;
}

.profile-actions{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.measurement-intro-card{
  padding:18px;
}

.measurement-summary-card{
  display:grid;
  gap:14px;
}

.measurement-intro-copy{
  margin:0 0 14px;
}

.measurement-summary-actions{
  display:flex;
  justify-content:flex-start;
}

.measurement-guide-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}

.measurement-guide-block{
  display:grid;
  gap:8px;
  padding:14px;
  border-radius:18px;
  background:#171b22;
  border:1px solid var(--line);
}

.measurement-guide-block strong{
  font-size:1rem;
}

.measurement-guide-block span{
  color:#b5bdca;
  line-height:1.5;
}

.measurement-layout{
  display:grid;
  grid-template-columns:minmax(320px, 380px) minmax(0, 1fr);
  gap:16px;
  align-items:start;
}

.measurement-layout > *{
  min-width:0;
}

.measurement-side{
  display:grid;
  gap:16px;
  min-width:0;
}

.measurement-form{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.measurement-form > label,
.measurement-stats-grid > *,
.measurement-chart-toolbar > label,
.measurement-chart-summary > *{
  min-width:0;
}

.measurement-form label,
.measurement-chart-toolbar label{
  display:block;
  color:#aab2c2;
  font-size:.92rem;
}

.measurement-form input,
.measurement-form textarea,
.measurement-chart-toolbar select{
  width:100%;
  margin-top:8px;
  padding:14px 16px;
  border:none;
  border-radius:16px;
  background:#1b1f27;
  color:var(--text);
  border:1px solid var(--line);
}

.measurement-form textarea{
  resize:vertical;
}

.measurement-form-notes,
.measurement-form .control-btn{
  grid-column:1 / -1;
}

.measurement-stats-grid{
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}

.compact-stat-card{
  min-height:0;
}

.compact-stat-card strong{
  font-size:1.8rem;
  margin-top:12px;
  overflow-wrap:anywhere;
}

.measurement-chart-toolbar{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  margin-bottom:14px;
}

.measurement-chart-card{
  display:grid;
  gap:14px;
}

.measurement-donut-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
  gap:14px;
}

.measurement-donut-card{
  display:grid;
  justify-items:center;
  gap:10px;
  padding:14px 10px 12px;
  border-radius:18px;
  background:#171b22;
  border:1px solid var(--line);
  text-align:center;
}

.measurement-donut-ring{
  --donut-color:#66ef58;
  --donut-progress:0deg;
  width:88px;
  height:88px;
  border-radius:50%;
  background:
    radial-gradient(circle at center, #12161d 58%, transparent 59%),
    conic-gradient(var(--donut-color) var(--donut-progress), rgba(255,255,255,.08) 0);
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

.measurement-donut-core{
  width:58px;
  height:58px;
  border-radius:50%;
  background:#12161d;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.06);
}

.measurement-donut-core strong{
  font-size:.9rem;
  color:#eef4ff;
  text-shadow:none;
  margin:0;
}

.measurement-donut-label{
  color:#c7cfdb;
  font-size:.84rem;
  line-height:1.2;
}

.measurement-donut-card.positive .measurement-donut-core strong{
  color:#a8ffcb;
}

.measurement-donut-card.negative .measurement-donut-core strong{
  color:#ffb2ba;
}

.measurement-donut-card.neutral .measurement-donut-core strong{
  color:#eef4ff;
}

.measurement-chart-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
}

.measurement-chart-legend span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#c7cfdb;
  font-size:.86rem;
}

.measurement-chart-legend i{
  display:block;
  width:12px;
  height:12px;
  border-radius:999px;
  box-shadow:0 0 0 2px rgba(255,255,255,.08);
}

.measurement-chart-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:16px;
}

.measurement-chart-summary article{
  padding:14px;
  border-radius:18px;
  background:#171b22;
  border:1px solid var(--line);
}

.measurement-chart-summary span{
  display:block;
  color:#97a1b1;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.measurement-chart-summary strong{
  display:block;
  margin-top:10px;
  font-size:1.2rem;
  overflow-wrap:anywhere;
}

.measurement-chart-shell{
  width:100%;
  min-width:0;
  padding:14px 10px 6px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(102,239,88,.08), rgba(69,184,255,.04));
  border:1px solid var(--line);
  overflow-x:auto;
}

.measurement-chart-svg{
  display:block;
  width:100%;
  max-width:820px;
  margin:0 auto;
  height:auto;
  overflow:visible;
}

.measurement-chart-area{
  fill:url(#measurementFillGradient);
}

.measurement-chart-line{
  fill:none;
  stroke:#66ef58;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.measurement-chart-svg #measurementChartAreas path{
  opacity:.8;
}

.measurement-chart-svg #measurementChartLines path{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.measurement-chart-svg g line{
  stroke:rgba(255,255,255,.1);
  stroke-width:1;
}

.measurement-chart-svg text{
  fill:#97a1b1;
  font-size:12px;
}

.measurement-chart-svg .measurement-bar-value{
  fill:#dfe9f8;
  font-size:11px;
  font-weight:700;
}

.measurement-chart-svg .measurement-bar-name{
  fill:#f4f7ff;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  text-shadow:0 0 10px rgba(0,0,0,.28);
}

.measurement-chart-svg #measurementChartBars rect{
  stroke:rgba(255,255,255,.12);
  stroke-width:1;
}

.measurement-chart-svg circle{
  fill:#45b8ff;
  stroke:#0f141b;
  stroke-width:3;
}

.measurement-chart-labels{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(72px, 1fr));
  gap:8px;
}

.measurement-chart-labels span{
  color:#adb6c5;
  font-size:.82rem;
  text-align:center;
}

.measurement-history-table th,
.measurement-history-table td{
  white-space:nowrap;
}

.stats-bar-chart-card{
  display:grid;
  gap:18px;
  margin-bottom:18px;
}

.profile-hero + .stats-grid,
.stats-grid + .measurement-summary-card,
.measurement-summary-card + .measurement-stats-grid,
.measurement-stats-grid + .table-card,
.measurement-intro-card + .measurement-layout{
  margin-top:18px;
}

.stats-bar-chart-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
}

.stats-bar-chart-summary article{
  padding:14px;
  border-radius:18px;
  background:#171b22;
  border:1px solid var(--line);
}

.stats-bar-chart-summary span{
  display:block;
  color:#97a1b1;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.stats-bar-chart-summary strong{
  display:block;
  margin-top:10px;
  font-size:1.2rem;
  overflow-wrap:anywhere;
}

.stats-bar-chart-shell{
  width:100%;
  min-width:0;
  padding:14px 10px 6px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(89,199,255,.08), rgba(117,255,154,.05));
  border:1px solid var(--line);
  overflow-x:auto;
}

.stats-bar-chart-svg{
  display:block;
  width:max(100%, 920px);
  height:auto;
}

.stats-primary-chart-svg{
  width:max(100%, 860px);
  margin:0 auto;
}

.history-primary-chart-svg{
  width:max(100%, 780px);
  margin:0 auto;
}

.stats-bar-chart-svg line{
  stroke:rgba(255,255,255,.1);
  stroke-width:1;
}

.stats-bar-chart-svg text{
  fill:#97a1b1;
  font-size:12px;
}

.stats-bar-chart-svg .stats-bar-value{
  fill:#dfe9f8;
  font-size:11px;
  font-weight:700;
}

.stats-bar-chart-svg .stats-bar-name{
  fill:#f4f7ff;
  font-size:10px;
  font-weight:700;
  letter-spacing:.02em;
  text-shadow:0 0 10px rgba(0,0,0,.28);
}

.stats-bar-chart-svg .stats-bar-rect{
  fill:url(#statsBarGradient);
  stroke:rgba(255,255,255,.12);
  stroke-width:1;
}

.stats-bar-chart-svg .history-bar-rect{
  fill:url(#historyBarGradient);
  stroke:rgba(255,255,255,.12);
  stroke-width:1;
}

.stats-bar-chart-labels{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  gap:8px;
}

.stats-bar-chart-labels span{
  color:#adb6c5;
  font-size:.82rem;
  text-align:center;
}

@media (max-width:1400px){
  .measurement-layout{
    grid-template-columns:1fr;
  }
}

.sensor-qr-card{
  display:grid;
  gap:14px;
}

.sensor-qr-label{
  display:block;
  color:#aab2c2;
  font-size:.92rem;
}

.sensor-qr-label input{
  width:100%;
  margin-top:8px;
  padding:14px 16px;
  border:none;
  border-radius:16px;
  background:#1b1f27;
  color:var(--text);
  border:1px solid var(--line);
}

.sensor-qr-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.sensor-qr-preview{
  display:grid;
  place-items:center;
  padding:16px;
  border-radius:18px;
  background:#171b22;
  border:1px solid var(--line);
}

.sensor-qr-preview img{
  display:block;
  width:min(100%, 260px);
  border-radius:14px;
  background:#fff;
  padding:10px;
}

.media-admin-intro{
  margin:0;
}

.media-admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}

.media-admin-card{
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--line);
  background:#171b22;
}

.media-admin-preview{
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  background:#0b0d11;
}

.media-admin-copy{
  display:grid;
  gap:8px;
  padding:14px;
}

.media-admin-copy strong{
  font-size:1rem;
}

.media-admin-copy span{
  color:#aab2c2;
  font-size:.86rem;
  word-break:break-word;
}

.empty-card{
  display:grid;
  place-items:center;
  min-height:160px;
  color:#c5ccda;
  text-align:center;
  padding:18px;
}

.manual-assign-form{
  display:grid;
  grid-template-columns:1.2fr 1fr auto;
  gap:12px;
  align-items:end;
}

.manual-assign-form label{
  display:block;
  color:#aab2c2;
  font-size:.92rem;
}

.manual-assign-form select{
  width:100%;
  margin-top:8px;
  padding:14px 16px;
  border:none;
  border-radius:16px;
  background:#1b1f27;
  color:var(--text);
  border:1px solid var(--line);
}

table{
  width:100%;
  border-collapse:collapse;
}

th,td{
  padding:18px 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-size:1rem;
}

th{
  color:#aab2c1;
  font-weight:600;
  text-transform:none;
}

td{color:#e5e9f0}

.history-range-label{
  margin:6px 0 0;
  color:#aeb7c7;
  font-size:.92rem;
}

.history-toolbar{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, max-content));
  gap:12px;
  align-items:end;
  margin:16px 0 14px;
}

.history-toolbar label{
  display:block;
  color:#aab2c2;
  font-size:.92rem;
}

.history-toolbar input{
  width:100%;
  margin-top:8px;
  padding:12px 14px;
  border:none;
  border-radius:12px;
  background:#1b1f27;
  color:var(--text);
  border:1px solid var(--line);
}

.history-toolbar-btn{
  min-height:48px;
  width:100%;
}

.history-bar-chart-card{
  display:grid;
  gap:16px;
  margin:8px 0 18px;
}

.history-chart-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}

.history-chart-head h4{
  margin:0;
  font-size:1rem;
  letter-spacing:.02em;
}

.history-chart-head p{
  margin:6px 0 0;
  color:#9ba7ba;
  font-size:.9rem;
}

.history-chart-control{
  display:grid;
  gap:8px;
  min-width:220px;
  color:#aab2c2;
  font-size:.92rem;
}

.history-chart-control select{
  width:100%;
  padding:12px 14px;
  border:none;
  border-radius:12px;
  background:#1b1f27;
  color:var(--text);
  border:1px solid var(--line);
}

.history-volume-help{
  border:1px solid var(--line);
  border-radius:18px;
  background:#171b22;
  overflow:hidden;
}

.history-volume-help summary{
  cursor:pointer;
  list-style:none;
  padding:14px 16px;
  color:#eef3ff;
  font-weight:700;
}

.history-volume-help summary::-webkit-details-marker{
  display:none;
}

.history-volume-help summary::after{
  content:"+";
  float:right;
  color:#67d5ff;
  font-size:1.05rem;
}

.history-volume-help[open] summary::after{
  content:"-";
}

.history-volume-help-body{
  padding:0 16px 16px;
  color:#aeb8c9;
  font-size:.92rem;
}

.history-volume-help-body p{
  margin:0;
}

.history-volume-help-body p + p{
  margin-top:10px;
}

.excel-table-wrap{
  overflow-x:auto;
  border:1px solid #3b4350;
  border-radius:14px;
  background:#14181f;
}

.excel-history-table{
  min-width:860px;
  background:#161b22;
}

.excel-history-table th,
.excel-history-table td{
  padding:12px 14px;
  border-right:1px solid #3b4350;
  border-bottom:1px solid #3b4350;
  white-space:nowrap;
}

.excel-history-table th:last-child,
.excel-history-table td:last-child{
  border-right:none;
}

.excel-history-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:#243447;
  color:#f4f7fb;
  font-weight:700;
  letter-spacing:.02em;
}

.excel-history-table tbody tr:nth-child(even) td{
  background:#1b212b;
}

.excel-history-table tbody tr:hover td{
  background:#223246;
}

@media print{
  @page{
    size: landscape;
    margin: 10mm;
  }

  html,
  body{
    background:#fff;
    color:#000;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }

  .topbar,
  .user-bar,
  .bottom-nav,
  .history-toolbar,
  .measurement-chart-toolbar,
  .history-chart-control,
  .history-volume-help,
  .icon-btn,
  form[action="/logout"]{
    display:none !important;
  }

  .app-shell,
  .phone-frame,
  .table-card,
  .page-card{
    padding:0 !important;
    margin:0 !important;
    box-shadow:none !important;
    border:none !important;
    background:#fff !important;
  }

  .app-shell::before,
  .phone-frame::before{
    display:none !important;
  }

  .page-stack{
    gap:14px !important;
  }

  .section-head h3,
  .section-head h4,
  .section-head p,
  .history-chart-head h4,
  .history-chart-head p,
  .measurement-chart-summary span,
  .measurement-chart-summary strong,
  .stats-bar-chart-summary span,
  .stats-bar-chart-summary strong,
  .measurement-chart-legend span,
  .measurement-donut-label,
  .helper-copy,
  .eyebrow,
  .history-range-label,
  .excel-history-table th,
  .excel-history-table td{
    color:#000 !important;
  }

  .section-head,
  .history-chart-head{
    margin-bottom:8px !important;
  }

  .info-chip{
    border-color:#999 !important;
    color:#000 !important;
    background:#fff !important;
  }

  .measurement-chart-summary article,
  .stats-bar-chart-summary article,
  .measurement-donut-card,
  .measurement-chart-shell,
  .stats-bar-chart-card,
  .history-bar-chart-card{
    background:#fff !important;
    border:1px solid #bfbfbf !important;
    box-shadow:none !important;
  }

  .measurement-donut-ring{
    background:
      radial-gradient(circle at center, #fff 58%, transparent 59%),
      conic-gradient(var(--donut-color) var(--donut-progress), #d9d9d9 0) !important;
    box-shadow:inset 0 0 0 1px #999 !important;
  }

  .measurement-donut-core{
    background:#fff !important;
    border:1px solid #999 !important;
  }

  .measurement-donut-core strong,
  .measurement-donut-card.positive .measurement-donut-core strong,
  .measurement-donut-card.negative .measurement-donut-core strong,
  .measurement-donut-card.neutral .measurement-donut-core strong{
    color:#000 !important;
  }

  .excel-table-wrap{
    border:1px solid #999 !important;
    background:#fff !important;
    overflow:visible !important;
    border-radius:0 !important;
  }

  .excel-history-table{
    min-width:0;
    width:100%;
    table-layout:fixed;
    background:#fff !important;
  }

  .excel-history-table th,
  .excel-history-table td{
    padding:6px 8px !important;
    font-size:10pt !important;
    white-space:normal !important;
    word-break:break-word;
  }

  .exercise-history-table th,
  .exercise-history-table td{
    padding:4px 6px !important;
    font-size:8.5pt !important;
    line-height:1.15 !important;
  }

  .excel-history-table thead th,
  .excel-history-table tbody tr:nth-child(even) td,
  .excel-history-table tbody tr:hover td{
    background:#fff !important;
  }

  .excel-history-table thead{
    display:table-header-group;
  }

  .excel-history-table tr{
    page-break-inside:avoid;
    break-inside:avoid;
  }

  .measurement-chart-svg g line,
  .stats-bar-chart-svg line{
    stroke:#c8c8c8 !important;
  }

  .measurement-chart-svg text,
  .measurement-chart-svg .measurement-bar-value,
  .measurement-chart-svg .measurement-bar-name,
  .stats-bar-chart-svg text,
  .stats-bar-chart-svg .stats-bar-value,
  .stats-bar-chart-svg .stats-bar-name{
    fill:#000 !important;
    text-shadow:none !important;
  }

  .measurement-chart-svg #measurementChartBars rect,
  .stats-bar-chart-svg .history-bar-rect,
  .stats-bar-chart-svg .stats-bar-rect{
    stroke:#666 !important;
    opacity:1 !important;
  }

  .measurement-chart-labels span,
  .stats-bar-chart-labels span{
    color:#000 !important;
  }
}

.history-secondary-head{
  margin-top:24px;
}

@media (max-width:900px){
  .history-toolbar{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .history-chart-head{
    flex-direction:column;
    align-items:stretch;
  }

  .history-chart-control{
    min-width:0;
  }
}

@media (max-width:560px){
  .history-toolbar{
    grid-template-columns:1fr;
    gap:10px;
  }
}

.history-set{
  display:flex;
  align-items:center;
  gap:14px;
}

.history-dot{
  width:18px;
  height:18px;
  border-radius:50%;
  border:4px solid #333843;
  flex:0 0 auto;
}

.history-dot.done{
  border-color:#66ef58;
  box-shadow:0 0 0 4px rgba(102,239,88,.12);
}

.history-dot.active{
  border-color:#45b8ff;
  box-shadow:0 0 0 4px rgba(69,184,255,.12);
}

.history-arrow{
  color:#8d95a5;
  font-size:1.35rem;
  text-align:right;
}

.image-modal{
  position:fixed;
  inset:0;
  z-index:60;
  width:100vw;
  height:100vh;
}

.image-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,4,7,.96);
}

.image-modal-panel{
  position:relative;
  z-index:1;
  width:100vw;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:transparent;
}

.image-modal-preview{
  display:block;
  width:100vw;
  height:100vh;
  object-fit:contain;
  border-radius:0;
  background:#050608;
}

.image-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:48px;
  height:48px;
  border:none;
  border-radius:999px;
  background:rgba(0,0,0,.42);
  color:var(--text);
  font-size:1.7rem;
  cursor:pointer;
  z-index:2;
}

body.image-modal-open{
  overflow:hidden;
}

.bottom-nav{
  position:sticky;
  bottom:12px;
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:16px 12px 14px;
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(20,24,34,.94), rgba(13,16,24,.92));
  border:1px solid rgba(137,175,255,.14);
  backdrop-filter:blur(16px);
  box-shadow:0 20px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  position:sticky;
  animation:panelFloatIn .65s cubic-bezier(.22,1,.36,1) both;
}

.bottom-nav::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(89,199,255,.08), transparent 26%, transparent 74%, rgba(117,255,154,.06));
}

.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:#8f9bb0;
  font-size:.88rem;
  padding:8px 6px;
  border-radius:16px;
  position:relative;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}

.nav-item span{font-size:1.5rem; line-height:1}

.nav-item.active{
  color:var(--cyan);
  background:linear-gradient(180deg, rgba(89,199,255,.12), rgba(89,199,255,.04));
  box-shadow:inset 0 0 0 1px rgba(89,199,255,.14);
  text-shadow:0 0 16px rgba(89,199,255,.18);
}

.nav-item:hover{
  transform:translateY(-1px);
  color:#c5e7ff;
  background:linear-gradient(180deg, rgba(89,199,255,.08), rgba(89,199,255,.02));
}

@media (max-width:900px){
  .auth-card{
    grid-template-columns:1fr;
  }

  .hero-card,
  .main-panel{
    grid-template-columns:1fr;
  }

  .main-panel{
    gap:16px;
    padding:18px 16px;
  }

  .hero-card{
    padding:16px;
  }

  .sensor-card{
    order:3;
  }

  .helper-copy{
    max-width:none;
  }

  .sensor-card{
    min-height:auto;
  }

  .summary-grid,
  .page-grid,
  .stats-grid,
  .measurement-guide-grid,
  .profile-actions,
  .control-row,
  .config-grid,
  .manual-assign-form,
  .quick-config-grid{
    grid-template-columns:1fr;
  }

  .measurement-layout{
    grid-template-columns:1fr;
  }

  .measurement-form,
  .measurement-chart-toolbar,
  .measurement-stats-grid,
  .measurement-chart-summary{
    grid-template-columns:1fr;
  }

  .measurement-chart-legend{
    gap:8px 10px;
  }

  .chart-shell{
    grid-template-columns:1fr;
  }

  .chart-axis{
    display:none;
  }

  .ring-wrap{
    width:min(100%, 318px);
  }

  .ring-core strong{
    font-size:clamp(4rem, 13vw, 5.6rem);
  }

  .ring-target{
    font-size:1.55rem;
  }

  .ring-badge{
    margin-top:12px;
    padding:8px 14px;
    font-size:1rem;
  }

  .ring-action-btn{
    min-height:42px;
    padding:9px 10px;
    font-size:.82rem;
  }

  .mini-stat{
    padding:10px 0 16px;
  }

  .mini-stat strong{
    font-size:2.25rem;
  }
}

@media (max-width:560px){
  .app-shell{padding:10px 8px 20px}

  .hero-card,
  .chart-card,
  .summary-card,
  .config-card,
  .table-card{
    border-radius:22px;
  }

  .hero-card{padding:14px}

  .auth-card,
  .user-bar{
    border-radius:22px;
  }

  .user-bar{
    align-items:flex-start;
    flex-direction:column;
  }

  .exercise-media{
    min-height:260px;
  }

  .measurement-form{
    gap:10px;
  }

  .measurement-chart-shell{
    padding:10px 6px 2px;
  }

  .measurement-chart-labels{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .main-panel{
    grid-template-columns:minmax(82px, 1fr) minmax(0, 258px) minmax(82px, 1fr);
    gap:10px;
    align-items:start;
    padding:16px 12px;
  }

  .metric-stack{
    gap:10px;
  }

  .mini-stat{
    padding:8px 0 12px;
  }

  .ring-wrap{
    width:min(100%, 258px);
  }

  .ring-actions{
    gap:8px;
    margin-bottom:10px;
  }

  .ring-action-btn{
    min-height:38px;
    padding:8px 8px;
    font-size:.76rem;
    border-radius:10px;
  }

  .ring-core strong{
    font-size:clamp(3.4rem, 16vw, 4.6rem);
  }

  .ring-label{
    font-size:.88rem;
  }

  .ring-target{
    font-size:1.28rem;
    margin-top:6px;
  }

  .ring-badge{
    margin-top:10px;
    padding:7px 12px;
    font-size:.92rem;
  }

  .mini-stat span{
    font-size:.72rem;
    margin-bottom:8px;
  }

  .mini-stat strong{
    font-size:1.75rem;
  }

  .mini-stat small{
    font-size:.5em;
  }

  .metric-stack.right{
    text-align:right;
  }

  .metric-stack.right .mini-stat span{
    text-align:right;
  }

  .metric-stack.right .mini-stat strong{
    justify-content:flex-end;
  }

  .exercise-controls-top{
    grid-template-columns:1fr;
  }

  .topbar h1{
    font-size:1.4rem;
  }

  .bottom-nav{
    gap:2px;
    padding-inline:6px;
  }

  th,td{
    padding:12px 6px;
    font-size:.85rem;
  }
}