:root {
  color-scheme: light dark;
  --bg: #f7f8fb;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-solid: #fff;
  --text: #111319;
  --muted: #767984;
  --hairline: rgba(19, 24, 35, 0.09);
  --accent: #0866ff;
  --danger: #ed3d52;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); overscroll-behavior: none; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); }
button, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.app-shell { min-height: 100dvh; padding: calc(var(--safe-top) + 18px) 12px calc(86px + var(--safe-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 8px; }
.eyebrow { margin: 0 0 3px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .13em; }
.topbar h1 { margin: 0; font-size: clamp(34px, 9vw, 42px); line-height: 1; letter-spacing: -.045em; }
.round-button { width: 39px; height: 39px; border: 0; border-radius: 50%; background: var(--surface-solid); box-shadow: 0 7px 24px rgba(30, 42, 74, .09); font-size: 19px; font-weight: 800; letter-spacing: 1px; }
.topbar-actions { display: flex; gap: 9px; }
.upload-button { background: var(--accent); color: white; font-size: 27px; font-weight: 350; line-height: 1; }

.period-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 12px 6px 24px; padding: 3px; border-radius: 11px; background: rgba(120, 124, 135, .12); }
.period-picker button { min-height: 30px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 650; }
.period-picker button.is-active { background: var(--surface-solid); box-shadow: 0 1px 4px rgba(0, 0, 0, .11); }

.timeline { display: grid; gap: 28px; }
.day-section header { display: flex; align-items: baseline; justify-content: space-between; padding: 0 7px 9px; }
.day-section h2 { margin: 0; font-size: 21px; line-height: 1.1; letter-spacing: -.025em; }
.day-section header span { color: var(--muted); font-size: 12px; }
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; overflow: hidden; border-radius: 13px; }
.photo-tile { position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; background: #d8d9dd; }
.photo-tile img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .22s ease; }
.photo-tile img.is-loaded { opacity: 1; }
.photo-tile .video-badge { position: absolute; right: 5px; bottom: 5px; display: flex; gap: 3px; align-items: center; padding: 3px 5px; border-radius: 5px; background: rgba(0, 0, 0, .54); color: #fff; font-size: 9px; font-weight: 650; backdrop-filter: blur(8px); }
.photo-tile .filename { position: absolute; inset: auto 4px 4px; overflow: hidden; padding: 2px 4px; color: white; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 1px 4px #000; }
.demo-photo { width: 100%; height: 100%; background: linear-gradient(145deg, hsl(var(--h) 72% 70%), hsl(calc(var(--h) + 46) 52% 32%)); }
.demo-photo::after { content: ""; position: absolute; inset: 18% 11% 10%; border-radius: 55% 45% 9% 16%; background: linear-gradient(150deg, rgba(255,255,255,.72), rgba(255,255,255,.02)); transform: rotate(calc((var(--h) - 180) * .08deg)); }

.tabbar { position: fixed; z-index: 20; inset: auto 0 0; display: grid; grid-template-columns: repeat(3, 1fr); min-height: calc(62px + var(--safe-bottom)); padding: 7px 14px var(--safe-bottom); border-top: 1px solid var(--hairline); background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(22px) saturate(1.5); }
.tabbar button { display: grid; place-items: center; gap: 2px; border: 0; background: transparent; color: var(--muted); font-size: 10px; font-weight: 650; }
.tabbar button span { font-size: 22px; line-height: 1; }
.tabbar button.is-active { color: var(--accent); }

.loading-more { display: flex; justify-content: center; gap: 5px; padding: 25px; }
.loading-more span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: pulse 1s ease-in-out infinite; }
.loading-more span:nth-child(2) { animation-delay: .12s; }
.loading-more span:nth-child(3) { animation-delay: .24s; }
@keyframes pulse { 50% { opacity: .25; transform: translateY(-3px); } }
.empty-state { padding: 24vh 24px 0; text-align: center; color: var(--muted); }
.empty-state h2 { margin: 8px 0 5px; color: var(--text); font-size: 20px; }
.empty-state p { margin: 0; font-size: 14px; }
.empty-mark { font-size: 48px; }

.login-view { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; min-height: 100dvh; padding: calc(var(--safe-top) + 24px) 22px calc(var(--safe-bottom) + 24px); background: radial-gradient(circle at 50% 8%, #e9f3ff, var(--bg) 42%); }
.login-card { width: min(100%, 390px); }
.app-glyph { position: relative; width: 78px; height: 78px; margin-bottom: 32px; border-radius: 24px; background: #fff; box-shadow: 0 18px 52px rgba(51, 77, 129, .18); }
.app-glyph i { position: absolute; width: 27px; height: 38px; left: 25px; top: 9px; border-radius: 100% 20% 100% 25%; transform-origin: 14px 30px; background: linear-gradient(#41a4ff, #1265ee); }
.app-glyph i:nth-child(2) { transform: rotate(90deg); background: linear-gradient(#a06eff, #7045db); }
.app-glyph i:nth-child(3) { transform: rotate(180deg); background: linear-gradient(#ff5b88, #ee3557); }
.app-glyph i:nth-child(4) { transform: rotate(270deg); background: linear-gradient(#ffb74e, #ff7628); }
.app-glyph b { position: absolute; inset: 29px; border-radius: 50%; background: white; }
.login-card h1 { margin: 0; font-size: 37px; letter-spacing: -.04em; }
.login-lead { margin: 7px 0 33px; color: var(--muted); font-size: 16px; }
.login-card form { display: grid; gap: 13px; }
.login-card label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 650; }
.login-card input { width: 100%; min-height: 52px; padding: 0 15px; border: 1px solid var(--hairline); border-radius: 13px; outline: none; background: var(--surface-solid); color: var(--text); font-size: 17px; }
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.primary-button { min-height: 52px; margin-top: 8px; border: 0; border-radius: 14px; background: var(--accent); color: white; font-size: 16px; font-weight: 730; }
.privacy-note { margin: 20px 15px 0; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.form-error { margin: 0; color: var(--danger); font-size: 13px; }

.viewer { position: fixed; z-index: 60; inset: 0; overflow: hidden; background: #050506; color: white; touch-action: pan-y pinch-zoom; }
.viewer-bar { position: absolute; z-index: 3; inset: calc(var(--safe-top) + 4px) 0 auto; display: grid; grid-template-columns: 54px 1fr 96px; align-items: center; text-align: center; }
.viewer-bar button { width: 42px; height: 42px; margin: auto; border: 0; border-radius: 50%; background: rgba(34, 34, 38, .58); color: white; font-size: 27px; backdrop-filter: blur(12px); }
.viewer-bar div { display: grid; gap: 2px; }
.viewer-bar strong { font-size: 13px; }
.viewer-bar small { color: rgba(255,255,255,.62); font-size: 11px; }
.viewer-actions { display: flex; justify-content: flex-end; padding-right: 5px; }
.viewer-actions button { margin: 0 2px; font-size: 21px; }
.viewer-actions button.is-favorite { color: #ff466c; }
.viewer-media { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; }
.viewer-media img, .viewer-media video { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 1; transition: transform .22s ease, opacity .18s ease; user-select: none; -webkit-user-drag: none; }
.viewer-media img.is-loading { opacity: .15; }
.viewer-media.is-zoomed img { max-width: none; max-height: none; transform: scale(2); cursor: zoom-out; }
.viewer-media img { cursor: zoom-in; }
.viewer-error { max-width: 280px; padding: 22px; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.6; text-align: center; }
.viewer-arrow { position: absolute; z-index: 2; top: 46%; width: 42px; height: 58px; border: 0; background: transparent; color: rgba(255,255,255,.72); font-size: 48px; }
.viewer-arrow.prev { left: 0; }
.viewer-arrow.next { right: 0; }
.viewer-caption { position: absolute; inset: auto 20px calc(var(--safe-bottom) + 18px); overflow: hidden; color: rgba(255,255,255,.72); font-size: 12px; text-align: center; white-space: nowrap; text-overflow: ellipsis; }

.sheet { position: fixed; z-index: 80; inset: 0; }
.sheet-scrim { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,0,.28); backdrop-filter: blur(3px); }
.sheet-panel { position: absolute; inset: auto 0 0; max-height: 82dvh; overflow: auto; padding: 10px 20px calc(var(--safe-bottom) + 26px); border-radius: 24px 24px 0 0; background: var(--surface-solid); box-shadow: 0 -18px 50px rgba(0,0,0,.15); }
.sheet-handle { display: block; width: 38px; height: 5px; margin: 0 auto 10px; border-radius: 4px; background: rgba(125,125,130,.35); }
.sheet-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.sheet-title-row h2 { margin: 0; font-size: 26px; }
.sheet-title-row button { border: 0; background: transparent; color: var(--accent); font-weight: 650; }
.info-hero { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding-bottom: 17px; border-bottom: 1px solid var(--hairline); }
.info-hero .date-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, var(--surface-solid)); color: var(--accent); font-size: 22px; }
.info-hero strong, .info-hero small { display: block; }
.info-hero small { margin-top: 2px; color: var(--muted); }
.metadata-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 16px; overflow: hidden; border: 1px solid var(--hairline); border-radius: 15px; background: var(--hairline); }
.metadata-cell { min-height: 73px; padding: 13px; background: var(--surface-solid); }
.metadata-cell span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.metadata-cell strong { font-size: 14px; }

.settings-group { margin-bottom: 22px; overflow: hidden; border-radius: 14px; background: color-mix(in srgb, var(--text) 4%, var(--surface-solid)); }
.group-label { margin: 0; padding: 10px 14px 6px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.setting-row { display: flex; align-items: center; justify-content: space-between; min-height: 47px; margin-left: 14px; padding: 0 14px 0 0; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.setting-row:last-child { border-bottom: 0; }
.setting-row strong { max-width: 60%; overflow: hidden; color: var(--muted); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.setting-row input { width: 43px; height: 25px; accent-color: var(--accent); }
.danger-button { width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--danger) 9%, var(--surface-solid)); color: var(--danger); font-weight: 650; }
.version { color: var(--muted); font-size: 10px; text-align: center; }

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.upload-panel { max-height: 91dvh; }
.upload-picker { display: grid; place-items: center; min-height: 156px; padding: 23px; border: 1.5px dashed color-mix(in srgb, var(--accent) 42%, var(--hairline)); border-radius: 19px; background: color-mix(in srgb, var(--accent) 6%, var(--surface-solid)); text-align: center; cursor: pointer; }
.upload-picker span { display: grid; place-items: center; width: 47px; height: 47px; margin-bottom: 10px; border-radius: 15px; background: var(--accent); color: white; font-size: 31px; font-weight: 300; }
.upload-picker strong { font-size: 17px; }
.upload-picker small { margin-top: 5px; color: var(--muted); font-size: 12px; }
.upload-summary { display: flex; justify-content: space-between; gap: 15px; min-height: 47px; padding: 14px 2px 10px; color: var(--muted); font-size: 12px; }
.upload-summary span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-summary span:last-child { flex: none; }
.upload-progress { margin: 5px 0 14px; }
.progress-track { height: 7px; overflow: hidden; border-radius: 7px; background: color-mix(in srgb, var(--text) 9%, transparent); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width .2s ease; }
.progress-label { display: flex; justify-content: space-between; gap: 15px; margin-top: 8px; color: var(--muted); font-size: 11px; }
.progress-label strong { overflow: hidden; color: var(--text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.upload-results { display: grid; gap: 7px; max-height: 146px; margin: 4px 0 10px; overflow: auto; }
.upload-result { display: grid; grid-template-columns: 23px 1fr; gap: 7px; align-items: start; padding: 9px 10px; border-radius: 11px; background: color-mix(in srgb, var(--text) 4%, var(--surface-solid)); font-size: 12px; }
.upload-result strong, .upload-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-result small { margin-top: 2px; color: var(--muted); }
.upload-result.is-error { color: var(--danger); }
.upload-start { width: 100%; }
.secondary-button { width: 100%; min-height: 48px; margin-top: 9px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--text) 7%, var(--surface-solid)); color: var(--text); font-weight: 650; }
.upload-note { margin: 13px 8px 0; color: var(--muted); font-size: 11px; line-height: 1.55; text-align: center; }
.upload-unavailable { padding: 18px; border-radius: 15px; background: color-mix(in srgb, var(--danger) 8%, var(--surface-solid)); color: var(--text); }
.upload-unavailable strong { color: var(--danger); }
.upload-unavailable p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.upload-unavailable code { padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }

@media (min-width: 650px) {
  .app-shell { width: min(100%, 980px); margin: auto; }
  .photo-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .topbar { padding-top: 20px; }
  .tabbar { left: 50%; width: min(100%, 980px); transform: translateX(-50%); border: 1px solid var(--hairline); border-bottom: 0; border-radius: 20px 20px 0 0; }
  .sheet-panel { left: 50%; width: min(100%, 560px); transform: translateX(-50%); }
}

@media (prefers-color-scheme: dark) {
  :root { --bg: #090a0d; --surface: rgba(24, 25, 29, .89); --surface-solid: #191a1f; --text: #f5f6f8; --muted: #9799a3; --hairline: rgba(255,255,255,.09); --accent: #4d98ff; }
  .login-view { background: radial-gradient(circle at 50% 8%, #11253d, var(--bg) 43%); }
  .app-glyph { background: #202126; }
  .app-glyph b { background: #202126; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }