.as-app-section { padding-top:90px; }
.as-app-layout { display:grid; grid-template-columns: 350px minmax(0, 1fr); gap:24px; align-items:start; }
.as-app-panel { position:sticky; top:98px; padding:24px; }
.as-app-panel h1 { font-size: clamp(2.7rem, 5vw, 4.4rem); }
.as-app-controls { display:grid; gap:16px; margin-top:24px; }
.as-app-controls input[type="date"] { width:100%; }
input[type="range"] { width:100%; accent-color: var(--as-accent); }
.as-segmented { display:flex; padding:4px; border:1px solid var(--as-line); border-radius:999px; background:rgba(0,0,0,.08); }
.as-segmented button { flex:1; border:0; border-radius:999px; min-height:38px; color:var(--as-muted); background:transparent; font-weight:900; cursor:pointer; }
.as-segmented button.is-active { color:var(--as-bg); background:var(--as-text); }
.as-stack-actions { display:grid; grid-template-columns:1fr; gap:10px; }
.as-privacy-note { font-size:.86rem; }
.as-stat-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.as-stat { padding:18px; }
.as-stat span { display:block; color:var(--as-muted); font-size:.84rem; font-weight:800; }
.as-stat strong { display:block; margin-top:8px; font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing:-.05em; }
.as-app-card { padding:22px; }
.as-app-card-head { display:flex; justify-content:space-between; align-items:start; gap:18px; margin-bottom:18px; }
.as-app-card-head h2 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); }
.as-app-card-head p { margin:.4rem 0 0; }
.as-life-grid-app { display:grid; gap:4px; max-height:68vh; overflow:auto; padding:2px; }
.as-life-grid-app[data-mode="weeks"] { grid-template-columns: repeat(52, minmax(8px, 1fr)); }
.as-life-grid-app[data-mode="years"] { grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); }
.as-life-cell { aspect-ratio: 1; border-radius: 3px; background: rgba(168,196,255,.11); border:1px solid var(--as-line); min-width:0; }
.as-life-cell.is-lived { background: linear-gradient(135deg, var(--as-accent), #d6e3ff); border-color: rgba(168,196,255,.55); }
.as-life-cell.is-current { box-shadow:0 0 0 2px var(--as-gold); }
.as-life-cell.is-milestone { background: linear-gradient(135deg, var(--as-gold), var(--as-accent-2)); }
.as-app-bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.as-app-bottom-grid .as-app-card:last-child { grid-column:1 / -1; }
.as-app-bottom-grid h3 { font-size:1.5rem; margin-bottom:12px; }
.as-quote { font-size:1.25rem; color:var(--as-soft); }
@media (max-width: 1024px) {
  .as-app-layout { grid-template-columns:1fr; }
  .as-app-panel { position:relative; top:auto; }
  .as-life-grid-app[data-mode="weeks"] { grid-template-columns: repeat(39, minmax(7px, 1fr)); }
}
@media (max-width: 768px) {
  .as-app-section { padding-top:64px; }
  .as-stat-grid, .as-app-bottom-grid { grid-template-columns:1fr; }
  .as-app-card-head { flex-direction:column; }
  .as-life-grid-app { gap:3px; max-height:none; }
  .as-life-grid-app[data-mode="weeks"] { grid-template-columns: repeat(26, minmax(7px, 1fr)); }
}

@media (max-width: 480px) {
  .as-app-section {
    padding-top: 54px;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  .as-app-layout,
  .as-app-main,
  .as-app-controls,
  .as-app-panel,
  .as-app-card,
  .as-stat-grid,
  .as-app-bottom-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .as-app-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .as-app-panel {
    position: relative;
    top: auto;
    padding: 18px 16px;
    border-radius: 22px;
  }
  .as-app-panel h1 {
    font-size: clamp(2.4rem, 11vw, 3.4rem);
  }
  .as-app-controls {
    gap: 14px;
  }
  .as-app-controls label {
    margin-bottom: 0;
  }
  .as-app-controls input[type="date"],
  .as-app-controls input[type="range"],
  .as-segmented,
  .as-segmented button,
  .as-stack-actions,
  .as-stack-actions > *,
  .as-link-button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .as-segmented {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: 6px;
    border-radius: 20px;
    overflow: hidden;
  }
  .as-segmented button {
    min-height: 46px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 16px;
    font-size: clamp(.78rem, 3.4vw, .92rem);
    white-space: nowrap;
  }
  .as-stat {
    padding: 16px;
  }
  .as-stat strong {
    font-size: clamp(1.45rem, 8vw, 2rem);
  }
  .as-app-card {
    padding: 18px 16px;
    border-radius: 22px;
  }
  .as-app-card-head {
    gap: 12px;
    margin-bottom: 14px;
  }
  .as-app-card-head h2 {
    font-size: clamp(1.75rem, 8.2vw, 2.5rem);
  }
  .as-badge {
    width: fit-content;
    max-width: 100%;
  }
  .as-life-grid-app {
    max-width: 100%;
    overflow-x: hidden;
    gap: 3px;
  }
  .as-life-grid-app[data-mode="weeks"] {
    grid-template-columns: repeat(20, minmax(0, 1fr));
  }
  .as-life-grid-app[data-mode="years"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .as-life-cell {
    min-width: 0;
    border-radius: 3px;
  }
  .as-app-bottom-grid .as-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 375px) {
  .as-app-panel,
  .as-app-card {
    padding-left: 14px;
    padding-right: 14px;
  }
  .as-life-grid-app[data-mode="weeks"] {
    grid-template-columns: repeat(18, minmax(0, 1fr));
  }
  .as-life-grid-app[data-mode="years"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  .as-app-card, .as-app-panel { border-radius:22px; }
  .as-life-grid-app[data-mode="weeks"] { grid-template-columns: repeat(18, minmax(0, 1fr)); }
}


/* AgeSquare year-grid fit hotfix.
   App view is independent from poster/export. Poster remains a strict 8-column year-grid;
   app years view uses adaptive columns so 88 years fit comfortably on desktop. */
.as-app-main,
.as-app-card,
.as-life-grid-app {
  min-width: 0;
  max-width: 100%;
}

.as-stat-grid {
  gap: clamp(10px, .9vw, 14px);
  margin-bottom: clamp(10px, .9vw, 14px);
}

.as-stat {
  padding: clamp(12px, 1.1vw, 16px);
}

.as-app-card {
  padding: clamp(18px, 1.5vw, 22px);
  overflow: hidden;
}

.as-app-card-head {
  gap: clamp(12px, 1.1vw, 18px);
  margin-bottom: clamp(14px, 1.2vw, 18px);
}

.as-app-card-head h2 {
  font-size: clamp(1.8rem, 2.75vw, 2.55rem);
}

.as-life-grid-app {
  display: grid;
  max-width: 100%;
  min-width: 0;
  padding: 2px;
  overflow-x: hidden;
}

.as-life-grid-app[data-mode="weeks"] {
  grid-template-columns: repeat(52, minmax(4px, 1fr));
  gap: clamp(2px, .42vw, 4px);
  max-height: 68vh;
  overflow: auto;
}

.as-life-grid-app[data-mode="weeks"] .as-life-cell {
  aspect-ratio: 1;
  border-radius: clamp(2px, .5vw, 4px);
}

.as-life-grid-app[data-mode="years"] {
  --year-grid-columns: 11;
  --year-cell-size: clamp(42px, 4.1vw, 58px);
  --year-cell-gap: clamp(9px, .8vw, 12px);
  grid-template-columns: repeat(var(--year-grid-columns), minmax(0, var(--year-cell-size)));
  justify-content: center;
  align-content: start;
  gap: var(--year-cell-gap);
  max-height: none;
  overflow: visible;
}

.as-life-grid-app[data-mode="years"][data-fit-mode="fit"] {
  overflow: visible;
  max-height: none;
}

.as-life-grid-app[data-mode="years"][data-fit-mode="scroll"] {
  max-height: min(62svh, 620px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.as-life-grid-app[data-mode="years"] .as-life-cell {
  width: var(--year-cell-size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: clamp(11px, .9vw, 15px);
  background: rgba(168,196,255,.08);
  border: 1px solid rgba(168,196,255,.18);
}

.as-life-grid-app[data-mode="years"] .as-life-cell.is-lived {
  background: linear-gradient(135deg, rgba(168,196,255,.82), rgba(214,227,255,.62));
  border-color: rgba(168,196,255,.56);
}

.as-life-grid-app[data-mode="years"] .as-life-cell.is-current {
  background: rgba(168,196,255,.12);
  box-shadow: inset 0 0 0 2px var(--as-accent), 0 0 0 1px rgba(168,196,255,.18);
}

.as-life-year-age {
  position: relative;
  z-index: 2;
  font-weight: 850;
  font-size: clamp(.78rem, 1.15vw, 1rem);
  letter-spacing: -.035em;
  color: var(--as-soft);
}

.as-life-grid-app[data-mode="years"] .is-lived .as-life-year-age {
  color: #09101a;
}

.as-life-year-progress {
  position: absolute;
  left: 8px;
  bottom: 7px;
  height: 3px;
  width: calc((100% - 16px) * var(--as-year-progress-ratio, 0));
  background: linear-gradient(90deg, var(--as-accent), #d6e3ff);
  border-radius: 999px;
}

@media (min-width: 1280px) and (max-height: 940px) {
  .as-app-section { padding-top: 72px; }
  .as-app-card-head h2 { font-size: clamp(1.75rem, 2.25vw, 2.35rem); }
  .as-life-grid-app[data-mode="years"] {
    --year-cell-size: clamp(40px, 3.75vw, 54px);
    --year-cell-gap: clamp(9px, .75vw, 11px);
  }
}

@media (min-width: 1280px) and (max-height: 820px) {
  .as-app-section { padding-top: 58px; }
  .as-stat { padding: 10px 14px; }
  .as-app-card { padding: 16px; }
  .as-app-card-head { margin-bottom: 12px; }
  .as-life-grid-app[data-mode="years"] {
    --year-cell-size: clamp(38px, 3.45vw, 50px);
    --year-cell-gap: 9px;
  }
}

@media (max-width: 1024px) {
  .as-life-grid-app[data-mode="weeks"] { grid-template-columns: repeat(39, minmax(7px, 1fr)); }
  .as-life-grid-app[data-mode="years"] {
    --year-grid-columns: 8;
    --year-cell-size: clamp(42px, 8.4vw, 58px);
    --year-cell-gap: clamp(8px, 1.4vw, 12px);
  }
}

@media (max-width: 768px) {
  .as-life-grid-app[data-mode="weeks"] {
    grid-template-columns: repeat(52, minmax(0, 1fr));
    gap: 3px;
    max-height: none;
  }
  .as-life-grid-app[data-mode="years"] {
    --year-grid-columns: 6;
    --year-cell-size: clamp(38px, 12.5vw, 54px);
    --year-cell-gap: clamp(7px, 2vw, 10px);
    overflow-y: auto;
    max-height: min(68svh, 620px);
  }
}

@media (max-width: 480px) {
  .as-life-grid-app[data-mode="weeks"] {
    grid-template-columns: repeat(52, minmax(0, 1fr));
    gap: 2px;
  }
  .as-life-grid-app[data-mode="years"] {
    --year-grid-columns: 4;
    --year-cell-size: clamp(50px, 19.5vw, 68px);
    --year-cell-gap: 9px;
    justify-content: center;
    max-height: min(72svh, 680px);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .as-life-grid-app[data-mode="years"] .as-life-cell {
    border-radius: 14px;
  }
  .as-life-year-age {
    font-size: clamp(.86rem, 4vw, 1.05rem);
  }
}

@media (max-width: 375px) {
  .as-life-grid-app[data-mode="weeks"] {
    grid-template-columns: repeat(52, minmax(0, 1fr));
    gap: 1.6px;
  }
  .as-life-grid-app[data-mode="years"] {
    --year-cell-size: clamp(48px, 19vw, 62px);
    --year-cell-gap: 8px;
  }
}