/* Simple baby-friendly styles */
:root{
  --bg:#fff7f0;
  --accent:#ff9aa2;
  --accent2:#ffd6a5;
  --text:#333;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  margin:0; background:linear-gradient(180deg,var(--bg),#fff); color:var(--text);
}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:linear-gradient(90deg,var(--accent2),var(--accent));}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:56px;height:56px;background:rgba(255,255,255,0.6);border-radius:50%}
.site-header h1{font-size:20px;margin:0;color:#4b2e2e}
.top-nav{display:flex;gap:8px}
.nav-btn{background:rgba(255,255,255,0.85);border:0;padding:8px 12px;border-radius:10px;font-weight:600;cursor:pointer}
.nav-btn:focus{outline:3px solid rgba(0,0,0,0.08)}
.lang-select{display:flex;align-items:center;gap:6px}
.lang-select select{padding:6px;border-radius:8px;border:0}

main.page{padding:20px;min-height:60vh}
.card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 6px 18px rgba(0,0,0,0.06);max-width:900px;margin:12px auto}
.hero{display:flex;gap:18px;align-items:center}
.hero .baby-photo{width:160px;height:160px;border-radius:14px;background:linear-gradient(135deg,#ffd6a5,#ffb3c6);display:flex;align-items:center;justify-content:center;font-weight:700;color:#6a3b3b}
.large{font-size:1.4rem}
.small{font-size:0.95rem;color:#5b4545}
.center{text-align:center}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.gallery-item{height:120px;border-radius:10px;background:linear-gradient(135deg,#fff,#ffd6a5);display:flex;align-items:center;justify-content:center;font-weight:700}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.color-btn, .shape-btn{padding:12px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
.color-btn{min-width:96px}
.shape-btn{min-width:72px}

footer.site-footer{padding:12px;text-align:center;color:#6b4f4f}

/* RTL support when html[dir='rtl'] */
html[dir='rtl'] .site-header{direction:rtl}
html[dir='rtl'] .top-nav{flex-direction:row-reverse}

@media (max-width:620px){
  .hero{flex-direction:column;align-items:flex-start}
  .brand h1{font-size:18px}
}