.streaks-page{
  padding-bottom:96px;
}

.streaks-hero{
  align-items:end;
}

.streaks-kpi-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
}

.streaks-primary-grid{
  display:grid;
  grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
  gap:14px;
  margin-top:14px;
}

.streaks-current-card{
  position:relative;
  overflow:hidden;
  display:flex;
  min-height:100%;
  background:
    radial-gradient(circle at 88% 8%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 34%),
    linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),var(--surface));
}

.streaks-current-card::after{
  content:"";
  position:absolute;
  width:210px;
  aspect-ratio:1;
  right:-88px;
  bottom:-112px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  border-radius:50%;
  box-shadow:
    0 0 0 28px color-mix(in srgb,var(--accent) 4%,transparent),
    0 0 0 60px color-mix(in srgb,var(--accent) 3%,transparent);
  pointer-events:none;
}

.streaks-current{
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  flex-direction:column;
  min-height:440px;
}

.streaks-current-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.streaks-current-icon{
  width:58px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  border-radius:18px;
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));
  font-size:1.8rem;
}

.streaks-current-state{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--surface-soft);
  color:var(--muted);
  font-size:.7rem;
  font-weight:850;
}

.streaks-current-state::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--text-subtle);
}

.streaks-current-state.is-complete{
  border-color:color-mix(in srgb,var(--ok) 32%,var(--line));
  color:var(--text-secondary);
}

.streaks-current-state.is-complete::before{
  background:var(--ok);
}

.streaks-current-number{
  margin-top:clamp(28px,5vw,54px);
}

.streaks-current-number strong{
  display:block;
  font-size:clamp(5rem,11vw,8rem);
  line-height:.78;
  letter-spacing:-.095em;
}

.streaks-current-number span{
  display:block;
  margin-top:18px;
  color:var(--muted);
  font-size:.8rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.streaks-current-message{
  max-width:430px;
  margin:24px 0 0;
  color:var(--text-secondary);
  font-size:1rem;
  line-height:1.58;
}

.streaks-goal{
  margin-top:auto;
  padding-top:30px;
}

.streaks-goal-copy{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  color:var(--muted);
  font-size:.72rem;
}

.streaks-goal-copy strong{
  color:var(--text);
  font-size:.82rem;
}

.streaks-goal-track{
  height:9px;
  margin-top:10px;
  overflow:hidden;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--line) 72%,transparent);
}

.streaks-goal-track>span{
  display:block;
  height:100%;
  min-width:4px;
  border-radius:inherit;
  background:var(--brand-gradient);
}

.streaks-today-games{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:16px;
}

.streaks-today-games a,
.streaks-today-games span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--surface-soft);
  color:var(--text-secondary);
  font-size:.68rem;
  font-weight:750;
  text-decoration:none;
}

.streaks-calendar-card{
  min-width:0;
}

.streaks-calendar-header{
  align-items:center;
}

.streaks-calendar-nav{
  display:grid;
  grid-template-columns:36px minmax(132px,auto) 36px;
  align-items:center;
  gap:6px;
}

.streaks-calendar-nav button{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface-soft);
  color:var(--text);
  font:inherit;
  cursor:pointer;
}

.streaks-calendar-nav button:hover:not(:disabled){
  border-color:var(--line-strong);
  background:color-mix(in srgb,var(--accent) 6%,var(--surface-soft));
}

.streaks-calendar-nav button:disabled{
  opacity:.38;
  cursor:default;
}

.streaks-calendar-nav strong{
  text-align:center;
  font-size:.8rem;
  text-transform:capitalize;
}

.streaks-month-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:14px;
}

.streaks-month-stat{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-soft);
}

.streaks-month-stat strong{
  display:block;
  font-size:1rem;
}

.streaks-month-stat span{
  display:block;
  margin-top:2px;
  color:var(--text-subtle);
  font-size:.62rem;
}

.streaks-weekdays,
.streaks-calendar{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
}

.streaks-weekdays{
  margin-bottom:6px;
}

.streaks-weekdays span{
  padding:0 4px;
  color:var(--text-subtle);
  font-size:.62rem;
  font-weight:850;
  text-align:center;
  text-transform:uppercase;
}

.streaks-day{
  position:relative;
  min-height:68px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  padding:8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-soft);
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .14s ease,border-color .14s ease,background .14s ease;
}

button.streaks-day:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:var(--line-strong);
}

.streaks-day.is-empty{
  visibility:hidden;
}

.streaks-day.is-future{
  opacity:.34;
  cursor:default;
}

.streaks-day.is-today{
  border-color:color-mix(in srgb,var(--blue) 48%,var(--line));
}

.streaks-day.is-selected{
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 24%,transparent);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
}

.streaks-day[data-level="1"]{background:color-mix(in srgb,var(--blue) 9%,var(--surface))}
.streaks-day[data-level="2"]{background:color-mix(in srgb,var(--blue) 16%,var(--surface))}
.streaks-day[data-level="3"]{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}
.streaks-day[data-level="4"]{background:color-mix(in srgb,var(--violet) 26%,var(--surface))}

.streaks-day-number{
  font-size:.74rem;
  font-weight:850;
}

.streaks-day-count{
  min-height:18px;
  display:flex;
  align-items:center;
  gap:4px;
  color:var(--text-secondary);
  font-size:.62rem;
  font-weight:800;
}

.streaks-day-count i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--mint);
}

.streaks-day-detail{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb,var(--accent) 3%,var(--surface-soft));
}

.streaks-day-detail-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:baseline;
  margin-bottom:10px;
}

.streaks-day-detail-head strong{
  font-size:.88rem;
}

.streaks-day-detail-head span{
  color:var(--muted);
  font-size:.68rem;
}

.streaks-day-empty{
  margin:0;
  color:var(--muted);
  font-size:.75rem;
}

.streaks-day-games{
  display:grid;
  gap:7px;
}

.streaks-day-game{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface);
}

.streaks-day-game-icon{
  width:25px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:color-mix(in srgb,var(--ok) 10%,var(--surface2));
  color:var(--ok);
  font-size:.7rem;
  font-weight:950;
}

.streaks-day-game strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.75rem;
}

.streaks-day-game small{
  display:block;
  margin-top:2px;
  color:var(--text-subtle);
  font-size:.6rem;
}

.streaks-day-game a{
  color:var(--blue);
  font-size:.7rem;
  font-weight:900;
  text-decoration:none;
}

.streaks-card-meta{
  color:var(--text-subtle);
  font-size:.7rem;
  font-weight:750;
}

.streaks-line-chart{
  min-height:280px;
}

.streaks-line-chart svg{
  width:100%;
  min-height:280px;
  overflow:visible;
}

.streaks-chart-gridline{
  stroke:var(--line);
  stroke-width:1;
}

.streaks-chart-area{
  fill:color-mix(in srgb,var(--accent) 12%,transparent);
}

.streaks-chart-line{
  fill:none;
  stroke:var(--blue);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.streaks-chart-point{
  fill:var(--surface-strong);
  stroke:var(--blue);
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}

.streaks-chart-axis{
  fill:var(--text-subtle);
  font-size:10px;
  font-family:var(--font-sans);
}

.streaks-chart-empty{
  min-height:250px;
  display:grid;
  place-items:center;
  padding:24px;
  border:1px dashed var(--line);
  border-radius:var(--radius-sm);
  color:var(--muted);
  text-align:center;
}

.streaks-weekday-chart{
  min-height:280px;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
  align-items:end;
  padding-top:16px;
}

.streaks-weekday-col{
  min-width:0;
  display:grid;
  grid-template-rows:1fr auto auto;
  gap:7px;
  height:250px;
  align-items:end;
  text-align:center;
}

.streaks-weekday-barbox{
  height:190px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.streaks-weekday-bar{
  width:min(34px,76%);
  min-height:4px;
  border-radius:9px 9px 4px 4px;
  background:var(--brand-gradient);
  transition:height .2s ease;
}

.streaks-weekday-col strong{
  font-size:.74rem;
}

.streaks-weekday-col span{
  color:var(--text-subtle);
  font-size:.62rem;
}

.streaks-heatmap-section,
.streaks-games-section,
.streaks-history-section{
  margin-top:14px;
}

.streaks-heatmap{
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(7,13px);
  grid-auto-columns:13px;
  gap:4px;
  overflow-x:auto;
  padding:4px 2px 12px;
  scrollbar-width:thin;
}

.streaks-heatmap-day{
  width:13px;
  height:13px;
  border:1px solid color-mix(in srgb,var(--line) 72%,transparent);
  border-radius:3px;
  background:var(--surface-soft);
}

.streaks-heatmap-day[data-level="1"]{background:color-mix(in srgb,var(--blue) 20%,var(--surface))}
.streaks-heatmap-day[data-level="2"]{background:color-mix(in srgb,var(--blue) 38%,var(--surface))}
.streaks-heatmap-day[data-level="3"]{background:color-mix(in srgb,var(--accent) 56%,var(--surface))}
.streaks-heatmap-day[data-level="4"]{background:color-mix(in srgb,var(--violet) 74%,var(--surface))}

.streaks-heatmap-legend{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--text-subtle);
  font-size:.64rem;
}

.streaks-heatmap-legend i{
  width:10px;
  height:10px;
  border-radius:3px;
  background:var(--surface-soft);
}

.streaks-heatmap-legend i:nth-of-type(2){background:color-mix(in srgb,var(--blue) 20%,var(--surface))}
.streaks-heatmap-legend i:nth-of-type(3){background:color-mix(in srgb,var(--blue) 38%,var(--surface))}
.streaks-heatmap-legend i:nth-of-type(4){background:color-mix(in srgb,var(--accent) 56%,var(--surface))}
.streaks-heatmap-legend i:nth-of-type(5){background:color-mix(in srgb,var(--violet) 74%,var(--surface))}

.streaks-game-controls{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

.streaks-game-controls select{
  min-height:42px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 12px;
  background:var(--surface-soft);
  color:var(--text);
  font:inherit;
  font-size:.77rem;
}

.streaks-game-list{
  display:grid;
  gap:8px;
}

.streaks-game-row{
  display:grid;
  grid-template-columns:minmax(190px,1.5fr) repeat(5,minmax(80px,.58fr)) auto;
  gap:10px;
  align-items:center;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-soft);
}

.streaks-game-name{
  min-width:0;
}

.streaks-game-name strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.86rem;
}

.streaks-game-name small{
  display:block;
  margin-top:3px;
  color:var(--text-subtle);
  font-size:.62rem;
}

.streaks-game-metric span{
  display:block;
  color:var(--text-subtle);
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.streaks-game-metric strong{
  display:block;
  margin-top:3px;
  font-size:.78rem;
}

.streaks-game-row>a{
  color:var(--blue);
  font-weight:900;
  text-decoration:none;
}

.streaks-run-list{
  display:grid;
  gap:8px;
}

.streaks-run{
  display:grid;
  grid-template-columns:54px minmax(190px,1fr) repeat(2,minmax(90px,.45fr)) auto;
  gap:12px;
  align-items:center;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-soft);
}

.streaks-run-length{
  width:54px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:color-mix(in srgb,var(--accent) 11%,var(--surface2));
  color:var(--text);
  font-size:1rem;
  font-weight:950;
}

.streaks-run.is-best .streaks-run-length{
  color:var(--blue);
  background:color-mix(in srgb,var(--accent) 18%,var(--surface2));
}

.streaks-run-copy strong{
  display:block;
  font-size:.8rem;
}

.streaks-run-copy small{
  color:var(--text-subtle);
  font-size:.62rem;
}

.streaks-run-metric span{
  display:block;
  color:var(--text-subtle);
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.streaks-run-metric strong{
  display:block;
  margin-top:3px;
  font-size:.75rem;
}

.streaks-run-badge{
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  color:var(--muted);
  font-size:.6rem;
  font-weight:850;
}

.streaks-run-badge.is-current{
  border-color:color-mix(in srgb,var(--ok) 32%,var(--line));
  color:var(--ok);
}

.streaks-empty{
  padding:30px 20px;
  border:1px dashed var(--line);
  border-radius:var(--radius-sm);
  color:var(--muted);
  text-align:center;
}

.streaks-empty strong{
  display:block;
  margin-bottom:4px;
  color:var(--text);
}

@media(max-width:1180px){
  .streaks-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .streaks-primary-grid{grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr)}
  .streaks-game-row{grid-template-columns:minmax(180px,1.4fr) repeat(3,minmax(76px,.55fr)) auto}
  .streaks-game-row .streaks-game-metric:nth-of-type(4),
  .streaks-game-row .streaks-game-metric:nth-of-type(5){display:none}
}

@media(max-width:900px){
  .streaks-primary-grid{grid-template-columns:1fr}
  .streaks-current{min-height:360px}
  .streaks-game-controls{width:100%;justify-content:flex-start}
  .streaks-run{grid-template-columns:50px minmax(0,1fr) minmax(82px,.42fr) auto}
  .streaks-run .streaks-run-metric:nth-of-type(2){display:none}
}

@media(max-width:720px){
  .streaks-page{padding-bottom:72px}
  .streaks-calendar-header{align-items:flex-start}
  .streaks-calendar-nav{width:100%;grid-template-columns:36px 1fr 36px}
  .streaks-month-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  .streaks-day{min-height:54px;padding:6px;border-radius:10px}
  .streaks-day-count{font-size:0}
  .streaks-day-count i{width:7px;height:7px}
  .streaks-weekday-chart{gap:5px}
  .streaks-game-controls{display:grid;grid-template-columns:1fr 1fr}
  .streaks-game-controls .stats-search{grid-column:1/-1}
  .streaks-game-controls input,
  .streaks-game-controls select{width:100%}
  .streaks-game-row{grid-template-columns:minmax(0,1fr) repeat(2,minmax(62px,.4fr)) auto;padding:11px}
  .streaks-game-row .streaks-game-metric:nth-of-type(n+3){display:none}
}

@media(max-width:520px){
  .streaks-kpi-grid{grid-template-columns:1fr 1fr}
  .streaks-current-number strong{font-size:5rem}
  .streaks-current{min-height:330px}
  .streaks-month-summary{grid-template-columns:1fr 1fr 1fr}
  .streaks-month-stat{padding:8px}
  .streaks-weekdays,
  .streaks-calendar{gap:4px}
  .streaks-day{min-height:46px;padding:5px}
  .streaks-day-detail-head{align-items:flex-start;flex-direction:column;gap:2px}
  .streaks-day-game{grid-template-columns:auto minmax(0,1fr)}
  .streaks-day-game>a{display:none}
  .streaks-weekday-col{height:225px}
  .streaks-weekday-barbox{height:170px}
  .streaks-game-row{grid-template-columns:minmax(0,1fr) minmax(68px,.45fr) auto}
  .streaks-game-row .streaks-game-metric:nth-of-type(n+2){display:none}
  .streaks-run{grid-template-columns:46px minmax(0,1fr) auto;padding:10px}
  .streaks-run-length{width:46px}
  .streaks-run .streaks-run-metric{display:none}
}

@media(prefers-reduced-motion:reduce){
  .streaks-day,
  .streaks-weekday-bar{transition:none}
}