#main-content {
  width: min(calc(100% - 2rem), var(--content));
  min-height: calc(100svh - 120px);
  margin: 1.2rem auto 7rem;
  overflow: visible;
}

.page-section { display: grid; gap: 1rem; animation: page-in 240ms ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }

.page-intro { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 0.3rem 0.15rem; }
.page-intro h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.55rem, 3vw, 2.35rem); }
.page-intro p { max-width: 720px; margin: 0.3rem 0 0; color: var(--text-muted); }
.page-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }

.dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }

.hero-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: clamp(1.2rem, 3vw, 2rem);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--surface-strong) 92%, transparent), color-mix(in srgb, var(--surface) 82%, transparent)),
    radial-gradient(circle at 85% 20%, rgba(90, 137, 255, 0.25), transparent 45%);
}
.hero-card h2 { max-width: 700px; margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.06; }
.hero-card p { max-width: 640px; color: var(--text-muted); font-size: 1.05rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.2rem; }
.orientation-clock { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em; }

.summary-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.summary-item { padding: 0.9rem; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-muted); }
.summary-item strong { display: block; font-size: 1.45rem; }
.summary-item span { color: var(--text-muted); font-size: 0.88rem; }

.timeline { display: grid; gap: 0.65rem; }
.timeline-item { display: grid; grid-template-columns: 74px 1fr auto; gap: 0.75rem; align-items: center; padding: 0.8rem; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-muted); }
.timeline-time { font-weight: 850; color: var(--primary-strong); }
.timeline-item h3, .timeline-item p { margin: 0; }
.timeline-item p { color: var(--text-muted); font-size: 0.9rem; }

.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.quick-action { display: flex; min-height: 88px; align-items: center; gap: 0.75rem; padding: 0.85rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-muted); color: var(--text); text-align: start; text-decoration: none; cursor: pointer; }
.quick-action span:first-child { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 14px; background: var(--surface-strong); }
.quick-action strong, .quick-action small { display: block; }
.quick-action small { color: var(--text-muted); }

.data-list { display: grid; gap: 0.65rem; }
.data-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-muted); }
.data-row-main { min-width: 0; }
.data-row h3, .data-row p { margin: 0; }
.data-row p { overflow: hidden; color: var(--text-muted); font-size: 0.9rem; text-overflow: ellipsis; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; }

.person-grid, .memory-grid, .routine-grid, .safe-place-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.person-card { text-align: center; }
.person-avatar { display: grid; width: 88px; height: 88px; place-items: center; margin: 0 auto 0.8rem; overflow: hidden; border: 3px solid var(--border-highlight); border-radius: 50%; background: linear-gradient(145deg, var(--primary), var(--secondary)); color: #fff; font-size: 1.4rem; font-weight: 850; box-shadow: var(--shadow-sm); }
.person-avatar img { width: 100%; height: 100%; object-fit: cover; }

.medication-card { border-inline-start: 5px solid var(--pill-color, var(--primary)); }
.medication-photo { width: 100%; max-height: 13rem; object-fit: cover; border-radius: var(--radius-md); }
.pill-visual { width: 48px; height: 28px; border: 3px solid rgba(255,255,255,.65); border-radius: 999px; background: var(--pill-color, var(--primary)); box-shadow: 0 5px 12px rgba(0,0,0,.15); }

.map-shell { position: relative; min-width: 0; min-height: 440px; overflow: hidden; border-radius: var(--radius-md); }
#safe-map {
  width: 100%;
  height: clamp(440px, 58vh, 640px);
  min-height: 440px;
  isolation: isolate;
}
#safe-map.leaflet-container { z-index: 0; background: #dce8ef; }
.map-state { display: grid; min-height: 440px; place-items: center; padding: 2rem; text-align: center; }

.emergency-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1rem; }
.emergency-primary { border: 2px solid color-mix(in srgb, var(--danger) 45%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--danger) 10%, var(--surface-strong)), var(--surface)); }
.emergency-call-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.medical-card { border: 2px solid var(--border); background: var(--surface-strong); }

.dispenser-status { display: flex; align-items: center; gap: 1rem; }
.device-orb { width: 72px; height: 72px; border: 8px solid color-mix(in srgb, var(--primary) 24%, transparent); border-radius: 50%; background: var(--surface-strong); box-shadow: inset 0 0 0 1px var(--border); }
.device-orb.connected { border-color: color-mix(in srgb, var(--success) 55%, transparent); }
.device-orb.busy { animation: device-pulse 1s infinite alternate; border-color: var(--warning); }
@keyframes device-pulse { to { transform: scale(1.06); } }
.serial-log { min-height: 160px; max-height: 260px; overflow: auto; padding: 0.8rem; border-radius: 14px; background: #101827; color: #d8f3ff; font: 0.82rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }
.manual-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }

.voice-panel { display: grid; gap: 0.8rem; }
.voice-state { display: flex; align-items: center; gap: 0.6rem; }
.voice-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--text-muted); }
.voice-dot.listening { background: var(--danger); animation: voice-pulse .8s infinite alternate; }
@keyframes voice-pulse { to { box-shadow: 0 0 0 8px color-mix(in srgb, var(--danger) 16%, transparent); } }

.privacy-table { width: 100%; border-collapse: collapse; }
.privacy-table th, .privacy-table td { padding: 0.75rem; border-bottom: 1px solid var(--border); text-align: start; vertical-align: top; }

.banner { padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-muted); }
.banner-warning { border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.banner-danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

.simple-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.simple-action { display: grid; min-height: 150px; place-items: center; gap: 0.5rem; border: 2px solid var(--border); border-radius: 24px; padding: 1rem; background: var(--surface-strong); color: var(--text); font-size: 1.35rem; cursor: pointer; }
.simple-action span { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; background: var(--surface-muted); color: var(--primary-strong); font-size: 2rem; }
.simple-action-danger { border-color: var(--danger); color: var(--danger-strong); }
.simple-action-danger span { background: color-mix(in srgb, var(--danger) 12%, var(--surface-strong)); color: var(--danger); }

.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.game-panel:last-child { grid-column: 1 / -1; }
.game-status { margin: 0 0 0.8rem; padding: 0.7rem; border-radius: 12px; background: var(--surface-muted); }
.memory-game-board { display: grid; grid-template-columns: repeat(4, minmax(52px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.memory-tile { aspect-ratio: 1; border: 2px solid var(--border); border-radius: 16px; background: linear-gradient(145deg, var(--primary), var(--secondary)); color: #fff; font-size: clamp(1.3rem, 4vw, 2rem); font-weight: 900; cursor: pointer; }
.memory-tile.is-open { background: var(--surface-strong); color: var(--text); }
.memory-tile.is-matched { border-color: var(--success); background: color-mix(in srgb, var(--success) 16%, var(--surface-strong)); color: var(--success); }
.sequence-board { display: grid; grid-template-columns: repeat(2, minmax(80px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.sequence-key { min-height: 100px; border: 4px solid transparent; border-radius: 22px; color: #fff; font-size: 1.4rem; font-weight: 900; opacity: 0.72; cursor: pointer; }
.sequence-0 { background: #2676d9; }.sequence-1 { background: #198a62; }.sequence-2 { background: #c87716; }.sequence-3 { background: #8552c7; }
.sequence-key.is-active { border-color: #fff; opacity: 1; transform: scale(1.04); box-shadow: 0 0 0 5px var(--focus); }
.recall-words { display: flex; min-height: 84px; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; margin: 1rem 0; border: 2px dashed var(--border); border-radius: 18px; padding: 1rem; }
.recall-words strong { padding: 0.45rem 0.7rem; border-radius: 10px; background: var(--surface-muted); }

.camera-stage { position: relative; min-height: 360px; overflow: hidden; border-radius: 20px; background: #0d1725; }
.camera-stage video { display: block; width: 100%; min-height: 360px; max-height: 540px; object-fit: cover; transform: scaleX(-1); }
.camera-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleX(-1); pointer-events: none; }
.recognized-person { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: center; margin-top: 1rem; padding: 1rem; border: 2px solid var(--success); border-radius: 18px; background: color-mix(in srgb, var(--success) 8%, var(--surface-strong)); }
.recognized-person .person-avatar { margin: 0; }
.recognized-person h3, .recognized-person p { margin: 0.2rem 0; }

.ai-chat-card { display: grid; gap: 1rem; }
.ai-messages { display: grid; max-height: 50vh; gap: 0.75rem; overflow-y: auto; padding: 0.5rem; }
.ai-message { max-width: 86%; border: 1px solid var(--border); border-radius: 18px; padding: 0.8rem 1rem; background: var(--surface-muted); }
.ai-message p { margin: 0.25rem 0 0; }
.ai-user { justify-self: end; background: color-mix(in srgb, var(--primary) 13%, var(--surface-strong)); }
.ai-composer { display: grid; gap: 0.65rem; }
.ai-composer textarea { min-height: 110px; resize: vertical; border: 1px solid var(--border); border-radius: 15px; padding: 0.8rem; background: var(--surface-strong); color: var(--text); font: inherit; }

.danger-zone { border: 2px solid color-mix(in srgb, var(--danger) 40%, transparent); }

[data-simple="true"] .optional-detail,
[data-simple="true"] .advanced-only { display: none !important; }
[data-simple="true"] .sidebar .nav-link:not([data-route-link="home"]):not([data-route-link="today"]):not([data-route-link="medications"]):not([data-route-link="people"]):not([data-route-link="places"]):not([data-route-link="emergency"]),
[data-simple="true"] .topbar-actions > :first-child { display: none !important; }

@media (max-width: 900px) {
  .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column: span 12; }
  .person-grid, .memory-grid, .routine-grid, .safe-place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emergency-layout { grid-template-columns: 1fr; }
  .game-grid { grid-template-columns: 1fr; }
  .game-panel:last-child { grid-column: auto; }
}

@media (max-width: 640px) {
  #main-content { width: calc(100% - 1rem); margin-top: 0.75rem; }
  .page-intro { align-items: stretch; flex-direction: column; }
  .page-actions .button { flex: 1; }
  .summary-row { grid-template-columns: repeat(2, 1fr); }
  .timeline-item { grid-template-columns: 62px 1fr; }
  .timeline-item .row-actions { grid-column: 1 / -1; justify-content: stretch; }
  .timeline-item .row-actions .button { flex: 1; }
  .person-grid, .memory-grid, .routine-grid, .safe-place-grid, .quick-grid { grid-template-columns: 1fr; }
  .data-row { align-items: stretch; flex-direction: column; }
  .row-actions { justify-content: stretch; }
  .row-actions .button { flex: 1; }
  .emergency-call-grid { grid-template-columns: 1fr; }
  .manual-controls { grid-template-columns: repeat(2, 1fr); }
  .simple-action-grid { grid-template-columns: 1fr; }
  .simple-action { min-height: 120px; }
  .memory-game-board { gap: 0.35rem; }
  .camera-stage, .camera-stage video { min-height: 280px; }
  .recognized-person { grid-template-columns: 1fr; text-align: center; }
  .recognized-person .person-avatar { margin-inline: auto; }
  #safe-map { height: min(62vh, 520px); min-height: 360px; }
  .map-shell, .map-state { min-height: 360px; }
}