:root{--pink:#ff6fb5;--yellow:#ffd166;--blue:#60a5fa;--green:#34d399;--bg1:#fff3d6;--bg2:#ffe0cc;--text:#333;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Comic Sans MS','Baloo 2',cursive,sans-serif;background:linear-gradient(120deg,var(--bg1),var(--bg2));color:var(--text)}
a{text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:16px}
.site-header{display:flex;align-items:center;justify-content:space-between;background:var(--pink);color:#fff;padding:10px 16px;box-shadow:0 4px 10px rgba(0,0,0,.1);position:sticky;top:0;z-index:9}
.site-header .brand{display:flex;align-items:center;gap:10px}
.site-header img{width:44px;height:44px;border-radius:12px;background:#fff}
.brand-text{font-weight:900;font-size:20px}
.main-nav{display:flex;gap:12px}
.main-nav a{background:rgba(255,255,255,.2);padding:8px 12px;border-radius:12px;color:#fff;font-weight:700}
.lang-switch a{color:#fff;margin:0 4px;font-weight:700}
.hero{display:grid;grid-template-columns:1fr;place-items:center;text-align:center;padding:28px 0;gap:12px}
.hero-img{width:160px;height:160px;border-radius:24px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.12);object-fit:cover}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:10px}
.cat-card{background:#fff;border-radius:16px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 4px 10px rgba(0,0,0,.08);color:#222;font-weight:800}
.cat-card img{width:120px;height:90px;object-fit:cover;border-radius:10px}
.stories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.story-card{background:#fff;border-radius:16px;padding:12px;color:#222;box-shadow:0 4px 10px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:8px}
.story-card img{width:100%;height:140px;object-fit:cover;border-radius:12px}
.story-card .tag{align-self:flex-start;background:var(--yellow);padding:4px 8px;border-radius:999px;font-size:12px;font-weight:800}
.story-view{background:#fff;border-radius:16px;padding:16px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.story-hero{width:100%;max-height:300px;object-fit:cover;border-radius:12px;margin:8px 0}
.story-text{font-size:18px;line-height:1.6}
.site-footer{padding:20px;text-align:center;opacity:.8}
[dir="rtl"] .site-header{direction:rtl}
[dir="rtl"] .main-nav{flex-direction:row-reverse}