/* ============ HaTi Baby — giao diện công khai ============ */
:root{
  --bg:#fff8f3; --bg-alt:#fdeee6; --card:#ffffff; --ink:#4b3a45; --ink-soft:#8a7682;
  --line:#f1dcd3; --accent:#ff7f8f; --accent-2:#ffb46b; --accent-soft:#ffe3e3; --mint:#8fd8bf;
  --shadow:0 10px 30px -12px rgba(122,62,72,.25); --radius:20px;
  --font-h:'Baloo 2',system-ui,sans-serif; --font-b:'Be Vietnam Pro',system-ui,sans-serif;
  --tabbar-h:0px;
}
.theme-boy{ --accent:#5b9dff; --accent-2:#7fd1e8; --accent-soft:#e2efff; --bg:#f6f9ff; --bg-alt:#e9f1ff; --line:#d9e5f7; --ink:#34405a; --ink-soft:#75809a; }
.theme-girl{ --accent:#ff6f9c; --accent-2:#ffa9c6; --accent-soft:#ffe1ec; }

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:70px}
body{margin:0; background:var(--bg); color:var(--ink); font:15.5px/1.65 var(--font-b); -webkit-font-smoothing:antialiased; padding-bottom:var(--tabbar-h)}
img{max-width:100%; display:block}
a{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--font-h); line-height:1.2; margin:0 0 .4em}
.container{max-width:1080px; margin:0 auto; padding:0 16px}
.hidden{display:none!important}
.muted{color:var(--ink-soft)} .small{font-size:.85em} .center{text-align:center}

/* ---------- Topbar ---------- */
.topbar{position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 24px; transition:.3s; color:#fff}
.topbar.solid{background:rgba(255,255,255,.88); backdrop-filter:blur(12px); box-shadow:0 2px 20px rgba(0,0,0,.06); color:var(--ink); padding:8px 24px}
.brand{font:700 1.25rem var(--font-h); color:inherit; text-decoration:none; display:flex; gap:8px; align-items:center}
.nav{display:flex; gap:4px; flex-wrap:wrap}
.nav a{color:inherit; text-decoration:none; padding:6px 12px; border-radius:99px; font-weight:500; font-size:.92rem; transition:.2s}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.25)}
.topbar.solid .nav a:hover,.topbar.solid .nav a.active{background:var(--accent-soft); color:var(--accent)}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; overflow:hidden; padding:90px 16px 120px}
.hero-bg{position:absolute; inset:-20px; background-size:cover; background-position:center; filter:saturate(1.05); transform:scale(1.05)}
.hero::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(60,30,45,.35),rgba(60,30,45,.55) 60%,rgba(60,30,45,.7))}
.hero-inner{position:relative; z-index:2; max-width:560px; width:100%}
.avatar-wrap{position:relative; width:132px; height:132px; margin:0 auto 14px}
.avatar{width:132px; height:132px; border-radius:50%; object-fit:cover; border:5px solid rgba(255,255,255,.9); box-shadow:0 10px 30px rgba(0,0,0,.25)}
.avatar-empty{display:flex; align-items:center; justify-content:center; font-size:64px; background:rgba(255,255,255,.2); backdrop-filter:blur(6px)}
.avatar-ring{position:absolute; inset:-10px; border-radius:50%; border:2px dashed rgba(255,255,255,.6); animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.baby-name{font-size:clamp(2.6rem,9vw,4.4rem); font-weight:800; letter-spacing:.5px; text-shadow:0 4px 20px rgba(0,0,0,.25); margin:0}
.baby-nick{font:600 1.5rem 'Dancing Script',cursive; opacity:.95; margin-top:-4px}
.quote{font-style:italic; opacity:.9; margin:8px auto 22px; max-width:440px}
.status-card{background:rgba(255,255,255,.95); color:var(--ink); border-radius:24px; padding:22px 22px 18px; box-shadow:var(--shadow); text-align:center}
.status-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.big-num{font:800 3rem/1 var(--font-h); color:var(--accent)}
.big-num small{font-size:1rem; font-weight:600; color:var(--ink-soft); margin-left:3px}
.fruit{display:flex; align-items:center; gap:10px; text-align:left; font-size:.9rem; line-height:1.35}
.fruit-emoji{font-size:2.6rem; animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px) rotate(-6deg)}}
.progress{height:14px; background:var(--accent-soft); border-radius:99px; position:relative}
.progress-bar{height:100%; width:var(--p); background:linear-gradient(90deg,var(--accent-2),var(--accent)); border-radius:99px; position:relative; animation:grow 1.4s ease-out}
@keyframes grow{from{width:0}}
.progress-baby{position:absolute; right:-14px; top:50%; transform:translateY(-50%); font-size:1.5rem}
.progress-labels{display:flex; justify-content:space-between; font-size:.8rem; color:var(--ink-soft); margin:6px 0 10px}
.countdown{font-size:1.05rem}
.countdown b{color:var(--accent); font-size:1.35rem; font-family:var(--font-h)}
.heart{color:var(--accent); display:inline-block; animation:beat 1.2s infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.3)}30%{transform:scale(1)}45%{transform:scale(1.2)}}
.age-big{font:800 2rem/1.15 var(--font-h); color:var(--accent); margin-bottom:10px}
.counter{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.counter div{background:var(--accent-soft); border-radius:14px; padding:8px 4px}
.counter b{display:block; font:700 1.5rem/1.1 var(--font-h); font-variant-numeric:tabular-nums}
.counter span{font-size:.75rem; color:var(--ink-soft)}
.birth-info{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:12px}
.birth-info span{background:var(--bg); border:1px solid var(--line); border-radius:99px; padding:3px 10px; font-size:.82rem}
.next-bday{margin-top:10px; font-size:.9rem; color:var(--ink-soft)}
.parents{margin-top:16px; opacity:.95}
.scroll-hint{display:inline-block; margin-top:18px; color:#fff; font-size:2rem; text-decoration:none; animation:bob 2s infinite}
.wave{position:absolute; bottom:-1px; left:0; width:100%; height:90px; z-index:2; fill:var(--bg)}

.intro{text-align:center; font-size:1.08rem; color:var(--ink-soft); max-width:680px; margin:10px auto 0}

/* ---------- Sections ---------- */
.section{padding:56px 0}
.section.alt{background:var(--bg-alt); position:relative}
.section-title{font-size:clamp(1.7rem,5vw,2.3rem); text-align:center; margin-bottom:8px}
.section-title span{display:inline-block; transform:rotate(-8deg)}
.section-sub{text-align:center; color:var(--ink-soft); max-width:620px; margin:0 auto 26px}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}

.btn{display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer; font:600 .95rem var(--font-b); padding:11px 22px; border-radius:99px; transition:.2s; text-decoration:none}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 6px 16px -6px var(--accent)}
.btn-primary:hover{filter:brightness(1.05); transform:translateY(-1px)}
.btn-primary:disabled{opacity:.6; cursor:wait}
.btn-soft{background:var(--card); color:var(--accent); border:2px solid var(--accent-soft); margin-top:22px}
.btn-soft:hover{background:var(--accent-soft)}
.btn-icon{border:1px solid var(--line); background:var(--card); border-radius:99px; padding:8px 14px; cursor:pointer; font:500 .88rem var(--font-b); color:var(--ink)}

/* ---------- Filters ---------- */
.filters{margin:18px 0 30px}
.chips{display:flex; gap:8px; overflow-x:auto; padding:4px 2px 10px; scrollbar-width:none; justify-content:safe center}
.chips::-webkit-scrollbar{display:none}
.chip{--c:var(--accent); flex:none; border:2px solid transparent; background:var(--card); color:var(--ink); padding:7px 14px; border-radius:99px; cursor:pointer; font:500 .88rem var(--font-b); box-shadow:0 2px 8px rgba(0,0,0,.05); transition:.2s; white-space:nowrap}
.chip:hover{border-color:var(--c)}
.chip.active{background:var(--c); color:#fff; border-color:var(--c)}
.chip[data-cat=""].active{background:var(--ink); border-color:var(--ink)}
.filter-row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center}
.seg{display:inline-flex; background:var(--card); border-radius:99px; padding:4px; box-shadow:0 2px 8px rgba(0,0,0,.05); flex-wrap:wrap}
.seg button{border:0; background:none; padding:6px 14px; border-radius:99px; cursor:pointer; font:500 .86rem var(--font-b); color:var(--ink-soft)}
.seg button.active{background:var(--accent); color:#fff}
select,.search input{border:1px solid var(--line); background:var(--card); border-radius:99px; padding:8px 14px; font:400 .9rem var(--font-b); color:var(--ink); outline:none}
.search{position:relative}
.search input{padding-right:34px; width:190px}
.search span{position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:.85rem; pointer-events:none}
select:focus,.search input:focus{border-color:var(--accent)}

/* ---------- Timeline ---------- */
.timeline{position:relative; padding:10px 0}
.timeline::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:3px; transform:translateX(-50%);
  background:repeating-linear-gradient(to bottom,var(--line) 0 10px,transparent 10px 18px); border-radius:3px}
.tl-item{position:relative; width:50%; padding:0 36px 34px; opacity:0; transform:translateY(24px); transition:.6s ease}
.tl-item.show{opacity:1; transform:none}
.tl-item.left{left:0} .tl-item.right{left:50%}
.tl-dot{position:absolute; top:18px; width:40px; height:40px; border-radius:50%; background:var(--card); border:3px solid var(--c,var(--accent)); display:flex; align-items:center; justify-content:center; font-size:1.1rem; z-index:2; box-shadow:0 4px 12px rgba(0,0,0,.1)}
.tl-item.left .tl-dot{right:-20px} .tl-item.right .tl-dot{left:-20px}
.tl-card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:.25s; position:relative}
.tl-card:hover{transform:translateY(-3px); box-shadow:0 18px 36px -14px rgba(122,62,72,.35)}
.tl-card.featured{outline:3px solid var(--accent-2)}
.tl-card.featured::after{content:"★ Đáng nhớ"; position:absolute; top:12px; right:-30px; transform:rotate(35deg); background:var(--accent-2); color:#fff; font-size:.7rem; font-weight:600; padding:2px 34px}
.tl-head{padding:16px 18px 6px}
.tl-meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.8rem; color:var(--ink-soft); margin-bottom:6px}
.pill{display:inline-flex; gap:4px; align-items:center; padding:2px 10px; border-radius:99px; font-size:.76rem; font-weight:600; background:var(--accent-soft); color:var(--accent)}
.pill.cat{background:color-mix(in srgb,var(--c) 22%,white); color:color-mix(in srgb,var(--c) 70%,black)}
.tl-title{font-size:1.3rem; margin:0; cursor:pointer}
.tl-title:hover{color:var(--accent)}
.tl-body{padding:4px 18px 16px}
.tl-text{white-space:pre-line; word-wrap:break-word}
.tl-text.clamp{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.read-more{background:none; border:0; color:var(--accent); font-weight:600; cursor:pointer; padding:4px 0; font-size:.88rem}
.tl-foot{display:flex; gap:12px; flex-wrap:wrap; font-size:.82rem; color:var(--ink-soft); padding:0 18px 14px}
.phase-divider{position:relative; text-align:center; margin:10px 0 40px; z-index:3}
.phase-divider span{display:inline-block; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font:700 1.15rem var(--font-h); padding:10px 24px; border-radius:99px; box-shadow:var(--shadow)}

/* Lưới ảnh trong thẻ */
.photos{display:grid; gap:3px; grid-template-columns:repeat(2,1fr); max-height:420px}
.photos a{position:relative; overflow:hidden; display:block; background:var(--bg-alt)}
.photos img{width:100%; height:100%; object-fit:cover; transition:.4s; aspect-ratio:1}
.photos a:hover img{transform:scale(1.05)}
.photos.n1{grid-template-columns:1fr} .photos.n1 img{aspect-ratio:auto; max-height:420px}
.photos.n3 a:first-child{grid-row:span 2} .photos.n3 a:first-child img{aspect-ratio:auto}
.photos .more{position:absolute; inset:0; background:rgba(40,20,30,.5); color:#fff; display:flex; align-items:center; justify-content:center; font:700 1.8rem var(--font-h)}
.yt{position:relative; aspect-ratio:16/9; background:#000; cursor:pointer}
.yt img{width:100%; height:100%; object-fit:cover; opacity:.85}
.yt::after{content:"▶"; position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; background:rgba(255,0,0,.85); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.6rem}
.yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.tl-empty{text-align:center; padding:40px; color:var(--ink-soft); font-size:1.1rem}

.loader{display:flex; justify-content:center; gap:6px; padding:20px}
.loader span{width:10px; height:10px; border-radius:50%; background:var(--accent); animation:ld 1s infinite}
.loader span:nth-child(2){animation-delay:.15s} .loader span:nth-child(3){animation-delay:.3s}
@keyframes ld{50%{transform:translateY(-8px); opacity:.4}}

/* ---------- Album ---------- */
.gallery{columns:4 220px; column-gap:10px; margin-top:20px}
.gallery a{display:block; margin-bottom:10px; border-radius:14px; overflow:hidden; position:relative; break-inside:avoid; box-shadow:0 4px 14px -6px rgba(0,0,0,.2)}
.gallery img{width:100%; transition:.4s}
.gallery a:hover img{transform:scale(1.04)}
.gallery .cap{position:absolute; left:0; right:0; bottom:0; padding:20px 10px 8px; font-size:.78rem; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.6)); opacity:0; transition:.3s}
.gallery a:hover .cap{opacity:1}

/* ---------- Milestones ---------- */
.ms-progress{max-width:420px; margin:6px auto 26px; text-align:center; color:var(--ink-soft)}
.ms-progress .progress{margin-top:6px}
.milestones{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}
.ms{background:var(--card); border-radius:18px; padding:18px 12px 14px; text-align:center; box-shadow:var(--shadow); position:relative; transition:.25s; overflow:hidden}
.ms:hover{transform:translateY(-4px) rotate(-1deg)}
.ms-ico{font-size:2.3rem; line-height:1; margin-bottom:8px; display:block}
.ms h4{font-size:1rem; margin:0 0 4px}
.ms .d{font-size:.8rem; color:var(--accent); font-weight:600}
.ms .a{font-size:.75rem; color:var(--ink-soft)}
.ms .n{font-size:.78rem; color:var(--ink-soft); margin-top:4px}
.ms.done::before{content:"✓"; position:absolute; top:8px; right:10px; width:22px; height:22px; border-radius:50%; background:var(--mint); color:#fff; font-size:.75rem; display:flex; align-items:center; justify-content:center; font-weight:700}
.ms.todo{background:transparent; border:2px dashed var(--line); box-shadow:none}
.ms.todo .ms-ico{filter:grayscale(1); opacity:.45}
.ms.todo h4{color:var(--ink-soft)}
.ms-photo{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; margin-bottom:8px}

/* ---------- Growth ---------- */
.growth-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:20px 0}
.stat{background:var(--card); border-radius:18px; padding:14px 16px; box-shadow:var(--shadow)}
.stat .l{font-size:.8rem; color:var(--ink-soft)}
.stat .v{font:700 1.7rem/1.2 var(--font-h); color:var(--accent)}
.stat .v small{font-size:.9rem; color:var(--ink-soft)}
.stat .dlt{font-size:.78rem; color:#2fa37a}
.chart-card{text-align:center}
.chart-box{position:relative; height:320px; margin-top:14px}
.growth-table-wrap{margin-top:16px}
.growth-table-wrap summary{cursor:pointer; font-weight:600; color:var(--accent); padding:8px 0}
.table-scroll{overflow-x:auto; background:var(--card); border-radius:16px; box-shadow:var(--shadow)}
.growth-table{width:100%; border-collapse:collapse; font-size:.9rem; min-width:560px}
.growth-table th,.growth-table td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line)}
.growth-table th{font-weight:600; color:var(--ink-soft); font-size:.8rem; text-transform:uppercase}

/* ---------- Letters ---------- */
.letters{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px}
.envelope{position:relative; background:linear-gradient(160deg,#fff,#fff4ec); border-radius:16px; padding:26px 20px 20px; box-shadow:var(--shadow); cursor:pointer; transition:.3s; overflow:hidden; min-height:170px; border:1px solid var(--line)}
.envelope::before{content:""; position:absolute; top:0; left:0; right:0; height:70px; background:linear-gradient(to bottom right,transparent 49.5%,var(--accent-soft) 50%) left/50% 100% no-repeat,linear-gradient(to bottom left,transparent 49.5%,var(--accent-soft) 50%) right/50% 100% no-repeat; transform:scaleY(-1); opacity:.7}
.envelope:hover{transform:translateY(-4px) rotate(.6deg)}
.envelope .seal{position:absolute; top:44px; left:50%; transform:translateX(-50%); width:44px; height:44px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.2rem; box-shadow:0 4px 10px -2px var(--accent)}
.envelope .inner{margin-top:70px; text-align:center}
.envelope h4{font-size:1.1rem; margin-bottom:2px}
.envelope .by{font:600 1.15rem 'Dancing Script',cursive; color:var(--accent)}
.envelope .dt{font-size:.78rem; color:var(--ink-soft)}
.envelope.sealed{cursor:not-allowed; background:repeating-linear-gradient(45deg,#fff,#fff 10px,#fff8f4 10px,#fff8f4 20px)}
.envelope.sealed .seal{background:#b08b8b}
.letter-paper{background:#fffdf8 repeating-linear-gradient(transparent 0 31px,#f0e4da 31px 32px); padding:30px 26px; border-radius:6px; font:1.05rem/32px 'Be Vietnam Pro',serif; white-space:pre-line; min-height:300px}
.letter-paper h3{font:600 1.8rem 'Dancing Script',cursive; color:var(--accent); line-height:1.3; margin-bottom:16px}
.letter-sign{text-align:right; font:600 1.4rem 'Dancing Script',cursive; color:var(--accent); margin-top:16px}

/* ---------- Wishes ---------- */
.wishes-layout{display:grid; grid-template-columns:340px 1fr; gap:22px; align-items:start; margin-top:20px}
.wish-form{display:flex; flex-direction:column; gap:10px; position:sticky; top:80px}
.wish-form h3{font-size:1.2rem}
.wish-form input,.wish-form textarea{border:1px solid var(--line); border-radius:12px; padding:11px 14px; font:400 .95rem var(--font-b); color:var(--ink); background:var(--bg); outline:none; resize:vertical}
.wish-form input:focus,.wish-form textarea:focus{border-color:var(--accent); background:#fff}
.wish-form .btn{justify-content:center}
.hp{position:absolute!important; left:-9999px!important}
.form-msg{font-size:.88rem; text-align:center; min-height:1.2em}
.form-msg.ok{color:#2fa37a} .form-msg.err{color:#e04f5f}
.wish-list{columns:2 240px; column-gap:14px}
.wish{break-inside:avoid; background:var(--card); border-radius:16px; padding:16px 18px; margin-bottom:14px; box-shadow:var(--shadow); position:relative}
.wish::before{content:"❝"; position:absolute; top:4px; right:14px; font-size:2.6rem; color:var(--accent-soft); font-family:serif}
.wish p{margin:0 0 10px; white-space:pre-line}
.wish .who{font-weight:600; font-size:.9rem} .wish .who span{font-weight:400; color:var(--ink-soft)}
.wish .when{font-size:.75rem; color:var(--ink-soft)}
.wish:nth-child(3n+1){transform:rotate(-.6deg)} .wish:nth-child(3n+2){transform:rotate(.5deg)}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; z-index:100; display:none}
.modal.open{display:block}
.modal-backdrop{position:absolute; inset:0; background:rgba(40,20,30,.55); backdrop-filter:blur(4px); animation:fade .25s}
.modal-dialog{position:relative; max-width:760px; margin:5vh auto; max-height:90vh; overflow:auto; background:var(--card); border-radius:24px; box-shadow:0 30px 60px rgba(0,0,0,.3); animation:pop .3s}
.modal-close{position:sticky; top:10px; float:right; margin:10px 10px 0 0; width:38px; height:38px; border-radius:50%; border:0; background:var(--bg-alt); font-size:1.5rem; cursor:pointer; z-index:3; color:var(--ink)}
.modal-body{padding:26px}
.modal-body .photos{max-height:none}
.modal-body .photos img{aspect-ratio:auto; height:auto}
.modal-body .photos.grid-all{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.modal-body .photos.grid-all img{aspect-ratio:1; height:100%}
@keyframes fade{from{opacity:0}} @keyframes pop{from{opacity:0; transform:translateY(20px) scale(.97)}}
body.no-scroll{overflow:hidden}

.to-top{position:fixed; right:16px; bottom:calc(16px + var(--tabbar-h)); width:44px; height:44px; border-radius:50%; border:0; background:var(--accent); color:#fff; font-size:1.2rem; cursor:pointer; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.3s; z-index:40}
.to-top.show{opacity:1; pointer-events:auto}

.footer{text-align:center; padding:30px 16px 40px; color:var(--ink-soft); font-size:.88rem}
.admin-link{color:var(--ink-soft); font-size:.8rem; opacity:.6}
.tabbar{display:none}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .nav{display:none}
  .topbar{padding:10px 16px} .topbar.solid{padding:8px 16px}
  :root{--tabbar-h:64px}
  .tabbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; height:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
    background:rgba(255,255,255,.95); backdrop-filter:blur(12px); box-shadow:0 -4px 20px rgba(0,0,0,.07)}
  .tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:.68rem; color:var(--ink-soft); text-decoration:none; gap:1px}
  .tabbar a span{font-size:1.25rem; transition:.2s}
  .tabbar a.active{color:var(--accent); font-weight:600} .tabbar a.active span{transform:translateY(-3px) scale(1.15)}
  .timeline::before{left:20px}
  .tl-item,.tl-item.left,.tl-item.right{width:100%; left:0; padding:0 0 26px 52px}
  .tl-item .tl-dot,.tl-item.left .tl-dot,.tl-item.right .tl-dot{left:0; right:auto; width:40px; height:40px}
  .phase-divider{text-align:left; padding-left:4px}
  .wishes-layout{grid-template-columns:1fr}
  .wish-form{position:static}
  .search input{width:100%}
  .search{flex:1 1 100%}
  .chips{justify-content:flex-start}
  .modal-dialog{margin:0; max-height:100%; height:100%; border-radius:0}
  .modal-body{padding:18px 16px 30px}
  .section{padding:44px 0}
}
@media (max-width:420px){
  .big-num{font-size:2.4rem}
  .status-card{padding:18px 14px 14px}
  .counter b{font-size:1.25rem}
  .gallery{columns:2 140px; column-gap:6px} .gallery a{margin-bottom:6px; border-radius:10px}
  .milestones{grid-template-columns:repeat(2,1fr); gap:10px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important} html{scroll-behavior:auto}}