*{box-sizing:border-box}
body{
  margin:0;
  color:var(--ink);
  font-family:"Sora","Space Grotesk","IBM Plex Sans","Segoe UI",sans-serif;
  background:
    radial-gradient(900px 600px at 8% -10%, var(--bg-accent-1), transparent 60%),
    radial-gradient(700px 520px at 92% 12%, var(--bg-accent-2), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.container{max-width:1100px;margin:0 auto;padding:20px;padding-bottom:120px;}

/* Header with avatar + title */
.chipManager{
  border:1px solid var(--accent-2);
  border-radius:12px;
  background:var(--accent-2);
  padding:16px;
  margin-bottom:16px;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
  min-height:100px;
  color:var(--accent-2-contrast);
}
.chipManager__info{
  flex:1 1 200px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.chipManager__eyebrow{margin:0 0 4px;color:var(--accent-2-contrast);opacity:0.8;font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
.chipManager__labelText{font-size:20px;font-weight:700;margin:0;color:var(--accent-2-contrast);}
.chipManager__code{color:var(--accent-2-contrast);opacity:0.9;font-size:14px;margin-top:2px;}
.chipManager__message{color:var(--accent-2-contrast);opacity:0.9;font-size:15px;margin:0;}
.chipManager__actions{display:flex;gap:10px;flex-wrap:wrap;}
.chipManager__btn{
  border-radius:999px;
  border:1px solid var(--accent-2);
  background:var(--accent-2);
  color:var(--accent-2-contrast);
  padding:8px 18px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.chipManager__btn:hover{
  background:var(--accent-2);
  border-color:var(--accent-2);
  opacity:0.9;
}
.chipManager__btn--outline{
  background:transparent;
  color:var(--accent-2-contrast);
  border-color:var(--accent-2-contrast);
}
.chipManager__btn--outline:hover{
  background:var(--accent-soft-2);
}
.chipManager__title{
  font-size:18px;
  font-weight:700;
  color:var(--accent-2-contrast);
  margin-left:auto;
}

.sessionsHero__block{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sessionsHero__copy{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sessionsHero__chipLabel{
  font-size:0.85em;
  font-weight:600;
  color:var(--muted);
}
.sessionsHero__chip{
  display:flex;
  align-items:center;
  gap:12px;
}

@media (max-width: 1023px){
  .sessionsHero__chip{
    display:none;
  }
}

/* Avatar */
.avatar{
  width:56px;height:56px;border-radius:50%;
  background:var(--avatarBg);color:var(--avatarText);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:18px;overflow:hidden;
  border:1px solid var(--border);
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* Card & table */
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.sessionsTableCard{margin-top:12px;}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
.table th{background:var(--surface-2);font-weight:700}
.table td{background:var(--surface);}
.col-day-mobile,
.col-when,
.col-performance{display:none;}
.groupRow--mobile{display:none;}
.table .groupRow td{
  background:var(--surface-2);
  font-weight:700;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--muted);
}
.table tr:hover{background:var(--hover);cursor:pointer}
.right{text-align:right}
.small{font-size:12px;color:var(--muted)}
.session-metric.is-improved{color:var(--status-good);}
.session-metric.is-regressed{color:inherit;}
.session-metric.is-neutral{color:inherit;}
.trend-icon,
.pb-icon{
  margin-left:6px;
  font-size:0.85em;
  vertical-align:baseline;
  color:var(--status-good);
}

@media (max-width: 640px){
  .table th.speedCol,
  .table td.speedCol{
    display:none;
  }
}

@media (max-width: 480px){
  .sessions-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .sessions-table{
    min-width:320px;
  }
  .sessions-table th,
  .sessions-table td{
    white-space:nowrap;
  }
  .sessions-table thead th{
    font-size:0.95em;
  }
  .sessions-table .col-day{
    display:none;
  }
  .sessions-table .col-date,
  .sessions-table .col-time{
    display:none;
  }
  .sessions-table .col-day-mobile{
    display:table-cell;
    width:56px;
    max-width:56px;
    white-space:nowrap;
  }
  .sessions-table .col-performance{
    display:table-cell;
    white-space:normal;
  }
  .sessions-table .col-when{
    display:table-cell;
    white-space:normal;
  }
  .sessions-table .col-lap,
  .sessions-table .col-speed{
    display:none;
  }
  .sessions-table .perf-lap{
    display:block;
    font-weight:600;
  }
  .sessions-table .perf-speed{
    display:block;
    color:var(--muted);
    font-size:0.9em;
  }
  .sessions-table .perf-speed.is-improved{
    color:var(--status-good);
  }
  .sessions-table .day-name{
    display:inline-block;
    font-weight:600;
    white-space:nowrap;
    letter-spacing:0;
  }
  .sessions-table .when-date{
    display:block;
    font-weight:600;
  }
  .sessions-table .when-time{
    display:block;
    color:var(--muted);
    font-size:0.9em;
    white-space:nowrap;
  }
  .sessions-table th.col-performance{
    white-space:nowrap;
  }
  .groupRow--desktop{display:none;}
  .groupRow--mobile{display:table-row;}
}

/* -------- Global Navigation (same behavior as index) -------- */

/* Bottom tab bar (mobile) */
.tabbar{
  position: fixed; inset: auto 0 0 0;
  background: var(--tabbar-bg);
  border-top: 1px solid var(--tabbar-border);
  box-shadow: var(--tabbar-shadow);
  z-index: 9998;
  padding: 6px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.tabbar__inner{width:100%;margin:0;display:flex;}
.tab{flex:1 1 50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:58px;border-radius:12px;text-decoration:none;color:var(--tab-inactive);font-weight:700;white-space:nowrap;}
.tab--active{ color:var(--accent-contrast); background: var(--tab-active); }

@media (min-width: 1024px){
  body.homeBody,
  body.sessionsBody{
    --desktop-max:1240px;
    color:var(--text);
    background:
      radial-gradient(900px 600px at 8% -10%, var(--bg-accent-1), transparent 60%),
      radial-gradient(700px 520px at 92% 12%, var(--bg-accent-2), transparent 55%),
      linear-gradient(180deg, var(--bg), var(--bg-2));
  }
  body.sessionsBody{
    --desktop-hero-height:168px;
  }
  .brandBar,
  .topNav{
    display:none;
  }
  .homeShell,
  .appShell{
    padding-top:0;
  }
  .homeTopBar{
    position:static;
    margin:24px auto 0;
    max-width:var(--desktop-max);
    background:linear-gradient(180deg, var(--surface), var(--surface-2));
    border:1px solid var(--border);
    border-radius:16px;
  }
  .homeTopBar__inner{
    max-width:none;
    padding:16px 20px;
  }
  .homeTopBar__nav{
    display:none;
  }
  .homeTopBar__chipAvatar{
    background:var(--accent-soft);
    color:var(--text);
    border:1px solid var(--accent);
  }
  .homeTopBar__chipLabel{
    color:var(--muted);
  }
  .homeTopBar__chipName{
    color:var(--text);
  }
  .homeMain{
    max-width:var(--desktop-max);
    margin:0 auto;
    padding:28px 24px 48px;
  }
  body.sessionsBody .heroCard--performance{
    height:var(--desktop-hero-height);
  }
  .sessionsMain{
    max-width:var(--desktop-max);
    margin:0 auto;
    padding:28px 24px 48px;
  }
  .sessionsMain > .heroCard,
  .sessionsMain > .sessionsTableCard{
    width:100%;
  }
  .homeMain--stack > .heroCard,
  .homeMain--stack > .sessionsTableCard{
    width:100%;
  }
  .heroCard,
  .sessionsTableCard{
    background:linear-gradient(180deg, var(--surface), var(--surface-2));
    border:1px solid var(--border);
    border-radius:16px;
    color:var(--text);
  }
  .heroCard__title{
    color:var(--text);
    letter-spacing:0.22em;
  }
.heroCard__subtitle{
  color:var(--muted);
}
  .homeTopBar--mobileOnly{
    display:none;
  }
  .sessionsHero__chip{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .table th,
  .table td{
    border-bottom:1px solid var(--border);
  }
  .table th{
    background:var(--surface-2);
    color:var(--muted);
  }
  .table td{
    background:transparent;
    color:var(--text);
  }
  .table tr:hover{
    background:var(--accent-soft-2);
  }
  .table .groupRow td{
    background:var(--surface-2);
    color:var(--muted);
  }
  .small{
    color:var(--muted);
  }
}

.tab__icon{ width:22px; height:22px; display:inline-block; flex:0 0 auto; }
.tab__label{font-size:12px;}

@media (min-width: 1024px){
  .tabbar{ display:none; }
}

@media (max-width: 820px){
  body.sessionsBody{
    padding-bottom:0;
  }
  body{
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .container{
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }
  .card:last-of-type{
    margin-bottom:20px;
  }
}