* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #ffffff; color: #262626; padding-bottom: 70px; }

/* الهيدر العلوي */
header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #dbdbdb; background: #fff; position: sticky; top: 0; z-index: 100; }
.logo { font-size: 24px; font-weight: bold; color: #0095f6; font-style: italic; font-family: cursive; }
.header-icons i { font-size: 22px; margin-left: 15px; cursor: pointer; color: #262626; position: relative; }
.badge { position: absolute; top: -5px; right: -8px; background: #0095f6; color: white; font-size: 10px; padding: 2px 5px; border-radius: 50%; }

/* شريط الستوريات */
.stories-container { display: flex; overflow-x: auto; padding: 10px 16px; gap: 15px; border-bottom: 1px solid #efefef; background: #fafafa; }
.story { display: flex; flex-direction: column; align-items: center; cursor: pointer; min-width: 65px; }
.story-ring { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #0095f6; padding: 2px; display: flex; justify-content: center; align-items: center; }
.story-img { width: 56px; height: 56px; border-radius: 50%; background: #ddd; background-size: cover; background-position: center; }
.story-name { font-size: 11px; margin-top: 4px; color: #262626; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 65px; }
.add-story .story-ring { border: 2px dashed #0095f6; }

/* محتوى البطاقات الأربع */
.main-content { padding: 20px 16px; max-width: 600px; margin: 0 auto; }
.cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.card { background: #fff; border: 1px solid #dbdbdb; border-radius: 12px; padding: 25px 15px; text-align: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: 0.2s; }
.card:active { transform: scale(0.98); }
.card-icon { width: 60px; height: 60px; background: #0095f6; color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 12px; font-size: 26px; }
.card-title { font-size: 16px; font-weight: 600; color: #262626; }

/* شريط التنقل السفلي */
nav { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; border-top: 1px solid #dbdbdb; display: flex; justify-content: space-around; padding: 10px 0; z-index: 100; }
nav a { font-size: 22px; color: #262626; text-decoration: none; }
nav a.active { color: #0095f6; }