/* ==========================================================
   KIDS FEED UI v2
   PART 1 - THEME + BACKGROUND + HEADER
   ========================================================== */

:root{

--bg1:#FFF9FC;
--bg2:#FFF3EA;
--bg3:#EDF8FF;

--primary:#FF6FB2;
--secondary:#7ED7FF;
--yellow:#FFE36D;
--mint:#BDF5E5;

--text:#44374E;
--muted:#8E8A9A;

--bg1:#FFF7FC;
--bg2:#FFF2E8;
--bg3:#EEF9FF;

--card:#ffffff;
--card2:#fffdfa;

--primary:#FF7EB6;
--primary2:#FF9A8B;

--blue:#7ED7FF;
--mint:#BDF4E4;
--yellow:#FFE783;
--purple:#CBA8FF;

--text:#41364d;
--muted:#8c8298;

--shadow:
0 12px 35px rgba(255,126,182,.12),
0 4px 15px rgba(0,0,0,.05);

--radius:30px;

--transition:.28s cubic-bezier(.2,.8,.2,1);

}

[data-theme="dark"]{

--bg1:#131321;
--bg2:#18162b;
--bg3:#0f1220;

--card:#1d2030;
--card2:#24273b;

--text:#edf1ff;
--muted:#a9adc7;

--shadow:
0 15px 40px rgba(0,0,0,.45);

}


/* ======================= */

*{
box-sizing:border-box;
}

html{

scroll-behavior:smooth;

}

body{
    margin:0;

    font-family:"Nunito","Cairo",sans-serif;

    color:var(--text);

    background:
        radial-gradient(circle at 10% 10%, rgba(255,228,244,.9), transparent 35%),
        radial-gradient(circle at 90% 15%, rgba(205,241,255,.8), transparent 30%),
        radial-gradient(circle at 70% 90%, rgba(255,244,170,.7), transparent 35%),
        linear-gradient(180deg,var(--bg1),var(--bg2),var(--bg3));

    background-attachment:fixed;
    overflow-x:hidden;
}


/* ======================= */

.feed-page{

min-height:100vh;

position:relative;

padding-bottom:80px;

}


/* فقاعات */

.feed-page::before{

content:"";

position:fixed;

left:-120px;

top:-120px;

width:320px;

height:320px;

border-radius:50%;

background:

rgba(255,255,255,.35);

filter:blur(4px);

z-index:-1;

animation:floatCloud 16s ease-in-out infinite;

}

.feed-page::after{

content:"";

position:fixed;

right:-100px;

bottom:-80px;

width:280px;

height:280px;

border-radius:50%;

background:

rgba(255,255,255,.28);

animation:floatCloud2 19s ease-in-out infinite;

z-index:-1;

}


/* ======================= */

@keyframes floatCloud{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(25px);

}

}

@keyframes floatCloud2{

0%,100%{

transform:translateY(0) translateX(0);

}

50%{

transform:translateY(-18px) translateX(-12px);

}

}


/* ======================= */

.feed-wrap{

max-width:760px;

margin:auto;

padding:35px 18px;

}


/* ======================= */

.feed-header-bar{

position:sticky;

top:0;

z-index:999;

display:flex;

align-items:center;

gap:18px;

padding:18px 26px;

backdrop-filter:blur(18px);

background:rgba(255,255,255,.72);

border-bottom:1px solid rgba(255,255,255,.4);

box-shadow:

0 8px 30px rgba(0,0,0,.06);

}

[data-theme="dark"] .feed-header-bar{

background:rgba(24,26,40,.75);

border-bottom:1px solid rgba(255,255,255,.05);

}

.feed-header-title{

font-size:23px;

font-weight:900;

letter-spacing:.3px;

color:var(--text);

}

.feed-header-bar a{

width:44px;

height:44px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

text-decoration:none;

background:white;

color:var(--primary);

transition:var(--transition);

box-shadow:

0 8px 18px rgba(0,0,0,.08);

}

.feed-header-bar a:hover{

transform:translateY(-3px) rotate(-8deg);

}

[data-theme="dark"] .feed-header-bar a{

background:#2b3045;

}

/* ==========================================================
   PART 2 - POST COMPOSER
   ========================================================== */

.post-composer{

position:relative;

background:
linear-gradient(180deg,#ffffff,#fffdfb);

border-radius:32px;

padding:24px;

margin-bottom:26px;

border:2px solid rgba(255,255,255,.65);

box-shadow:

0 18px 45px rgba(255,126,182,.10),

0 10px 22px rgba(0,0,0,.05);

overflow:hidden;

transition:.35s;

}

.post-composer:hover{

transform:translateY(-4px);

box-shadow:

0 25px 55px rgba(255,126,182,.16),

0 12px 30px rgba(0,0,0,.06);

}

.post-composer::before{

content:"";

position:absolute;

width:180px;

height:180px;

right:-70px;

top:-70px;

border-radius:50%;

background:

radial-gradient(circle,#FFE783,transparent 70%);

opacity:.35;

pointer-events:none;

}

.post-composer::after{

content:"";

position:absolute;

width:150px;

height:150px;

left:-60px;

bottom:-60px;

border-radius:50%;

background:

radial-gradient(circle,#BDF4E4,transparent 70%);

opacity:.45;

pointer-events:none;

}

/* ===================== */

[data-theme="dark"] .post-composer{

background:#1f2436;

border-color:#313851;

}

/* ===================== */

.composer-top{

display:flex;

align-items:flex-start;

gap:16px;

}

/* ===================== */

.composer-avatar{

width:58px;

height:58px;

border-radius:50%;

overflow:hidden;

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

background:

linear-gradient(135deg,#FF7EB6,#FFD36C);

border:4px solid #fff;

box-shadow:

0 10px 22px rgba(255,126,182,.25);

transition:.3s;

}

.composer-avatar:hover{

transform:rotate(-6deg) scale(1.06);

}

.composer-avatar img{

width:100%;

height:100%;

object-fit:cover;

}

/* ===================== */

.composer-textarea{

flex:1;

border:none;

outline:none;

resize:none;

min-height:105px;

padding:18px;

font-size:16px;

line-height:1.7;

color:var(--text);

background:#FFF9FD;

border-radius:22px;

box-shadow:

inset 0 0 0 2px #F7E2EF;

transition:.30s;

}

.composer-textarea:focus{

background:#fff;

box-shadow:

0 0 0 4px rgba(255,126,182,.16),

inset 0 0 0 2px #FF92C5;

}

[data-theme="dark"] .composer-textarea{

background:#2a3045;

color:white;

box-shadow:

inset 0 0 0 2px #39425f;

}

/* ===================== */

.composer-footer{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:18px;

padding-top:18px;

border-top:2px dashed rgba(255,126,182,.18);

}

/* ===================== */

.char-count{

font-weight:800;

font-size:13px;

color:#999;

}

.char-count.warn{

color:#ff5a5a;

}

/* ===================== */

.post-submit-btn{

border:none;

cursor:pointer;

padding:13px 28px;

border-radius:999px;

font-size:15px;

font-weight:900;

color:white;

background:

linear-gradient(135deg,#FF7EB6,#FFB77A);

box-shadow:

0 12px 24px rgba(255,126,182,.35);

transition:.28s;

}

.post-submit-btn:hover{

transform:

translateY(-3px)

scale(1.03);

box-shadow:

0 18px 35px rgba(255,126,182,.42);

}

.post-submit-btn:active{

transform:scale(.96);

}

.post-submit-btn:disabled{

opacity:.45;

cursor:not-allowed;

transform:none;

}

/* ===================== */

.login-prompt{

padding:20px;

text-align:center;

font-size:15px;

color:var(--muted);

}

.login-prompt a{

color:#FF5AA5;

font-weight:900;

text-decoration:none;

}

.login-prompt a:hover{

text-decoration:underline;

}
/* ==========================================================
   PART 3 - POST CARD
   ========================================================== */

.post-card{

position:relative;

overflow:hidden;

background:
linear-gradient(180deg,#ffffff,#fffefd);

border-radius:34px;

padding:24px;

margin-bottom:26px;

border:2px solid rgba(255,255,255,.65);

box-shadow:

0 18px 45px rgba(0,0,0,.06),

0 10px 30px rgba(255,126,182,.08);

transition:.35s cubic-bezier(.2,.8,.2,1);

animation:feedCard .45s ease;

}

.post-card:hover{

transform:

translateY(-6px);

box-shadow:

0 28px 55px rgba(255,126,182,.15),

0 18px 45px rgba(0,0,0,.08);

}

.post-card::before{

content:"";

position:absolute;

width:180px;

height:180px;

top:-90px;

right:-90px;

border-radius:50%;

background:

radial-gradient(circle,#FFE783,transparent 70%);

opacity:.30;

pointer-events:none;

}

.post-card::after{

content:"";

position:absolute;

width:140px;

height:140px;

left:-60px;

bottom:-60px;

border-radius:50%;

background:

radial-gradient(circle,#BDF4E4,transparent 70%);

opacity:.35;

pointer-events:none;

}

@keyframes feedCard{

from{

opacity:0;

transform:

translateY(20px)

scale(.97);

}

to{

opacity:1;

transform:

translateY(0)

scale(1);

}

}

/* ====================== */

[data-theme="dark"] .post-card{

background:#1f2436;

border-color:#313851;

}

/* ====================== */

.post-header{

display:flex;

align-items:center;

gap:16px;

margin-bottom:18px;

}

/* ====================== */

.post-avatar{

width:58px;

height:58px;

border-radius:50%;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

flex-shrink:0;

background:

linear-gradient(135deg,#FF7EB6,#FFD36C);

border:4px solid #fff;

box-shadow:

0 12px 25px rgba(255,126,182,.25);

transition:.30s;

}

.post-avatar:hover{

transform:

rotate(-6deg)

scale(1.08);

}

.post-avatar img{

width:100%;

height:100%;

object-fit:cover;

}

/* ====================== */

.post-meta{

flex:1;

min-width:0;

}

.post-username{

font-size:17px;

font-weight:900;

color:var(--text);

text-decoration:none;

transition:.25s;

}

.post-username:hover{

color:#FF5DA8;

}

.post-time{

margin-top:4px;

font-size:12px;

font-weight:700;

color:var(--muted);

}

/* ====================== */

.post-delete-btn{

width:42px;

height:42px;

border:none;

cursor:pointer;

border-radius:50%;

background:#FFF6FA;

color:#ff6c9d;

transition:.25s;

}

.post-delete-btn:hover{

background:#ff6b95;

color:#fff;

transform:rotate(90deg);

}

[data-theme="dark"] .post-delete-btn{

background:#313851;

}

/* ====================== */

.post-content{

margin-top:10px;

margin-bottom:20px;

font-size:16px;

line-height:1.85;

color:var(--text);

white-space:pre-wrap;

word-break:break-word;

}

/* ====================== */

.post-content img{

display:block;

max-width:100%;

border-radius:22px;

margin-top:16px;

box-shadow:

0 15px 35px rgba(0,0,0,.10);

transition:.35s;

}

.post-content img:hover{

transform:scale(1.02);

}

/* ====================== */

.post-card:hover .post-avatar{

box-shadow:

0 18px 30px rgba(255,126,182,.35);

}
/* ==========================================================
   PART 4 - ACTIONS + COMMENTS
   ========================================================== */

/* ===== شريط الأزرار ===== */

.post-actions{

display:flex;

align-items:center;

gap:12px;

padding-top:18px;

margin-top:8px;

border-top:2px dashed rgba(255,126,182,.18);

flex-wrap:wrap;

}

/* ====================== */

.action-btn{

display:flex;

align-items:center;

justify-content:center;

gap:8px;

padding:12px 20px;

border:none;

cursor:pointer;

border-radius:999px;

font-size:14px;

font-weight:800;

background:#FFF7FB;

color:#666;

transition:.28s;

box-shadow:

0 8px 20px rgba(0,0,0,.05);

}

.action-btn:hover{

transform:

translateY(-3px)

scale(1.04);

background:#ffffff;

box-shadow:

0 14px 28px rgba(255,126,182,.20);

}

/* ====================== */

.action-btn svg{

transition:.30s;

}

.action-btn:hover svg{

transform:scale(1.15);

}

/* ====================== */

.action-btn.liked{

background:

linear-gradient(135deg,#FF6FA9,#FFB47E);

color:#fff;

box-shadow:

0 15px 28px rgba(255,126,182,.35);

animation:heartBeat .45s;

}

@keyframes heartBeat{

0%{

transform:scale(.92);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

/* ====================== */

[data-theme="dark"] .action-btn{

background:#313851;

color:#eef1ff;

}

[data-theme="dark"] .action-btn.liked{

background:

linear-gradient(135deg,#ff6ea8,#ffaf71);

}

/* ========================================================== */
/* COMMENTS */
/* ========================================================== */

.comments-section{

margin-top:22px;

display:none;

animation:commentsFade .35s ease;

}

.comments-section.open{

display:block;

}

@keyframes commentsFade{

from{

opacity:0;

transform:translateY(10px);

}

to{

opacity:1;

transform:none;

}

}

/* ====================== */

.comment-item{

display:flex;

align-items:flex-start;

gap:12px;

margin-bottom:16px;

}

/* ====================== */

.comment-avatar{

width:42px;

height:42px;

border-radius:50%;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

background:

linear-gradient(135deg,#FF7EB6,#FFD36C);

border:3px solid #fff;

box-shadow:

0 10px 20px rgba(255,126,182,.22);

transition:.25s;

}

.comment-avatar:hover{

transform:

rotate(-6deg)

scale(1.08);

}

.comment-avatar img{

width:100%;

height:100%;

object-fit:cover;

}

/* ====================== */

.comment-bubble{

position:relative;

flex:1;

padding:14px 16px;

background:#FFF8FC;

border-radius:22px;

box-shadow:

0 10px 24px rgba(0,0,0,.05);

}

.comment-bubble::before{

content:"";

position:absolute;

left:-8px;

top:18px;

width:18px;

height:18px;

background:#FFF8FC;

transform:rotate(45deg);

}

/* ====================== */

[data-theme="dark"] .comment-bubble{

background:#2b3148;

}

[data-theme="dark"] .comment-bubble::before{

background:#2b3148;

}

/* ====================== */

.comment-name{

display:inline-block;

font-size:14px;

font-weight:900;

color:#FF5DA8;

margin-bottom:4px;

text-decoration:none;

}

.comment-name:hover{

text-decoration:underline;

}

/* ====================== */

.comment-text{

font-size:14px;

line-height:1.7;

color:var(--text);

word-break:break-word;

white-space:pre-wrap;

}

/* ====================== */

.comment-time{

margin-top:8px;

font-size:11px;

font-weight:700;

color:var(--muted);

}

/* ========================================================== */

.comment-input-row{

display:flex;

align-items:flex-end;

gap:12px;

margin-top:18px;

}

/* ====================== */

.comment-input{

flex:1;

border:none;

outline:none;

resize:none;

min-height:46px;

max-height:140px;

padding:14px 16px;

font-size:14px;

line-height:1.6;

border-radius:20px;

background:#FFF9FD;

box-shadow:

inset 0 0 0 2px #F4DDEA;

transition:.28s;

}

.comment-input:focus{

background:#fff;

box-shadow:

0 0 0 4px rgba(255,126,182,.15),

inset 0 0 0 2px #FF8BC0;

}

[data-theme="dark"] .comment-input{

background:#2a3045;

color:#fff;

box-shadow:

inset 0 0 0 2px #3b4565;

}

/* ====================== */

.comment-send-btn{

border:none;

cursor:pointer;

padding:13px 20px;

border-radius:18px;

font-size:14px;

font-weight:900;

color:#fff;

background:

linear-gradient(135deg,#FF79B2,#FFB979);

box-shadow:

0 12px 25px rgba(255,126,182,.28);

transition:.28s;

white-space:nowrap;

}

.comment-send-btn:hover{

transform:

translateY(-2px)

scale(1.03);

}

.comment-send-btn:active{

transform:scale(.95);

}

.comment-send-btn:disabled{

opacity:.45;

cursor:not-allowed;

}

/* ==========================================================
   PART 5 - LOAD MORE + EMPTY + RESPONSIVE + FINAL EFFECTS
   ========================================================== */

/* ===== زر تحميل المزيد ===== */

.load-more-btn{

width:100%;

padding:18px;

border:none;

cursor:pointer;

border-radius:26px;

font-size:15px;

font-weight:900;

color:white;

background:
linear-gradient(135deg,#7ED7FF,#A98CFF);

box-shadow:

0 15px 35px rgba(126,215,255,.30);

transition:.30s;

}

.load-more-btn:hover{

transform:

translateY(-4px)

scale(1.02);

box-shadow:

0 25px 45px rgba(126,215,255,.35);

}

.load-more-btn:active{

transform:scale(.97);

}

[data-theme="dark"] .load-more-btn{

background:

linear-gradient(135deg,#536DFE,#7C4DFF);

}

/* ================================= */

.feed-spinner{

padding:70px 20px;

text-align:center;

font-size:16px;

font-weight:800;

color:var(--muted);

}

.feed-spinner::before{

content:"✨";

display:block;

font-size:42px;

margin-bottom:16px;

animation:spinStar 2s linear infinite;

}

@keyframes spinStar{

0%{

transform:rotate(0);

}

100%{

transform:rotate(360deg);

}

}

/* ================================= */

.feed-empty{

padding:80px 25px;

text-align:center;

color:var(--muted);

}

.feed-empty .empty-icon{

font-size:70px;

margin-bottom:18px;

animation:floatEmpty 3s ease-in-out infinite;

}

@keyframes floatEmpty{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/* ================================= */

/* Scroll */

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-track{

background:#F8F6FD;

}

::-webkit-scrollbar-thumb{

border-radius:999px;

background:

linear-gradient(#FF7EB6,#7ED7FF);

}

::-webkit-scrollbar-thumb:hover{

background:

linear-gradient(#FF65A7,#66CBFF);

}

/* ================================= */

::selection{

background:#FF7EB6;

color:white;

}

/* ================================= */

/* جميع البطاقات */

.post-card,
.post-composer,
.comment-bubble{

transition:

transform .30s,

box-shadow .30s,

background .30s;

}

/* ================================= */

/* صور */

img{

image-rendering:auto;

}

/* ================================= */

/* الجوال */

@media (max-width:900px){

.feed-wrap{

padding:20px 14px;

}

.feed-header-bar{

padding:16px;

}

.feed-header-title{

font-size:20px;

}

.post-card{

padding:20px;

border-radius:28px;

}

.post-composer{

padding:20px;

border-radius:28px;

}

}

/* ================================= */

@media (max-width:650px){

.feed-wrap{

padding:14px 10px;

}

.post-header{

gap:12px;

}

.post-avatar{

width:50px;

height:50px;

}

.composer-avatar{

width:50px;

height:50px;

}

.post-actions{

gap:8px;

}

.action-btn{

flex:1;

justify-content:center;

padding:12px;

font-size:13px;

}

.comment-input-row{

flex-direction:column;

}

.comment-send-btn{

width:100%;

}

.post-submit-btn{

width:100%;

}

.composer-footer{

flex-direction:column;

align-items:stretch;

gap:14px;

}

}

/* ================================= */

@media (max-width:430px){

.feed-header-title{

font-size:18px;

}

.post-content{

font-size:15px;

}

.comment-text{

font-size:13px;

}

.post-card{

border-radius:24px;

}

.post-composer{

border-radius:24px;

}

}

/* ================================= */

/* حركة بسيطة للبطاقات */

.post-card:hover{

rotate:.2deg;

}

.post-composer:hover{

rotate:-.2deg;

}

/* ================================= */

/* تأثير خفيف على الصور */

.post-avatar img,
.comment-avatar img,
.composer-avatar img{

transition:transform .35s;

}

.post-avatar:hover img,
.comment-avatar:hover img,
.composer-avatar:hover img{

transform:scale(1.08);

}

/* ================================= */

/* تحسين الخطوط */

.post-content,
.comment-text,
.composer-textarea{

letter-spacing:.15px;

}

/* ================================= */

/* نهاية التصميم */

.feed-page{

overflow-x:hidden;

}

/* ==========================================================
   PART 6 - MAGIC EFFECTS
   ========================================================== */

/* =======================
   خلفية سحرية
======================= */

.feed-page{

position:relative;

isolation:isolate;

}

.feed-page::before,
.feed-page::after{

pointer-events:none;

}

/* =======================
   نجوم
======================= */

.feed-wrap::before{

content:"";

position:fixed;

inset:0;

z-index:-2;

opacity:.45;

background-image:

radial-gradient(circle,#fff 1.4px,transparent 1.6px),

radial-gradient(circle,#FFE783 1.8px,transparent 2px),

radial-gradient(circle,#BDF4E4 1.6px,transparent 1.8px),

radial-gradient(circle,#FFD4F0 1.4px,transparent 1.6px);

background-size:

180px 180px,

240px 240px,

320px 320px,

420px 420px;

animation:starsMove 80s linear infinite;

}

@keyframes starsMove{

from{

transform:translateY(0);

}

to{

transform:translateY(-600px);

}

}

/* =======================
   توهج البطاقات
======================= */

.post-card::before{

transition:.45s;

}

.post-card:hover::before{

opacity:.75;

transform:scale(1.2);

}

/* =======================
   Glow
======================= */

.post-card:hover{

box-shadow:

0 25px 55px rgba(255,126,182,.18),

0 0 45px rgba(255,231,131,.22);

}

/* =======================
   Avatar Glow
======================= */

.post-avatar,
.comment-avatar,
.composer-avatar{

position:relative;

}

.post-avatar::after,
.comment-avatar::after,
.composer-avatar::after{

content:"";

position:absolute;

inset:-5px;

border-radius:50%;

background:

linear-gradient(

135deg,

#FFD36C,

#FF7EB6,

#7ED7FF

);

z-index:-1;

opacity:0;

transition:.35s;

filter:blur(8px);

}

.post-avatar:hover::after,
.comment-avatar:hover::after,
.composer-avatar:hover::after{

opacity:.7;

}

/* =======================
   زر لايك
======================= */

.action-btn{

overflow:hidden;

position:relative;

}

.action-btn::before{

content:"";

position:absolute;

width:0;

height:0;

left:50%;

top:50%;

background:

rgba(255,255,255,.25);

border-radius:50%;

transform:

translate(-50%,-50%);

transition:.5s;

}

.action-btn:hover::before{

width:240px;

height:240px;

}

/* =======================
   زر إرسال
======================= */

.post-submit-btn,
.comment-send-btn{

position:relative;

overflow:hidden;

}

.post-submit-btn::after,
.comment-send-btn::after{

content:"";

position:absolute;

left:-120%;

top:0;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transform:skewX(-20deg);

transition:.8s;

}

.post-submit-btn:hover::after,
.comment-send-btn:hover::after{

left:150%;

}

/* =======================
   فقاعات التعليق
======================= */

.comment-bubble{

transition:.30s;

}

.comment-bubble:hover{

transform:translateY(-3px);

}

/* =======================
   Bounce
======================= */

.post-submit-btn:hover,
.comment-send-btn:hover,
.load-more-btn:hover{

animation:buttonBounce .45s;

}

@keyframes buttonBounce{

0%{

transform:scale(1);

}

40%{

transform:scale(1.06);

}

100%{

transform:scale(1);

}

}

/* =======================
   Fade للأزرار
======================= */

.action-btn,
.post-submit-btn,
.comment-send-btn,
.load-more-btn{

transition:

background .3s,

transform .3s,

box-shadow .3s,

color .3s;

}

/* =======================
   تحسين الصور
======================= */

.post-content img{

cursor:pointer;

}

.post-content img:hover{

filter:

brightness(1.04)

saturate(1.08);

}

/* =======================
   الوضع الليلي
======================= */

[data-theme="dark"]{

color-scheme:dark;

}

[data-theme="dark"] .post-card{

background:

linear-gradient(

180deg,

#23283c,

#1d2235

);

}

[data-theme="dark"] .post-composer{

background:

linear-gradient(

180deg,

#23283c,

#1d2235

);

}

/* =======================
   النهاية
======================= */

html{

scroll-padding-top:90px;

}

body{

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}

/* ==========================================================
   FEED v3 — reacciones multiples + foto del post + nombre del dia
   ========================================================== */

/* ── tarjeta: nombre del dia ── */
.nod-card{
    display:block;
    background:linear-gradient(120deg, var(--card), var(--card2));
    border:2px solid rgba(255,126,182,.35);
    border-radius:var(--radius);
    padding:18px 22px;
    margin-bottom:18px;
    text-decoration:none;
    color:var(--text);
    box-shadow:var(--shadow);
    transition:transform var(--transition);
}
.nod-card:hover{ transform:translateY(-3px) }
.nod-label{
    font-size:12px;
    font-weight:800;
    letter-spacing:.6px;
    color:var(--primary);
    margin-bottom:6px;
}
.nod-name{
    font-size:26px;
    font-weight:900;
    line-height:1.2;
}
.nod-ar{
    font-size:20px;
    font-weight:700;
    color:var(--muted);
    margin-inline-start:8px;
}
.nod-meaning{
    font-size:14px;
    color:var(--muted);
    font-style:italic;
    margin-top:6px;
}
.nod-origin{
    font-size:12px;
    color:var(--muted);
    margin-top:8px;
    font-weight:700;
}

/* ── selector de reacciones ── */
.react-wrap{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.react-summary{
    font-size:14px;
    letter-spacing:-2px;
}
.react-picker{
    position:absolute;
    bottom:calc(100% + 8px);
    inset-inline-start:0;
    display:none;
    gap:2px;
    background:var(--card);
    border:1px solid rgba(255,126,182,.4);
    border-radius:999px;
    padding:6px 10px;
    box-shadow:var(--shadow);
    z-index:30;
    white-space:nowrap;
}
.react-picker.open{ display:flex }
.react-opt{
    background:none;
    border:none;
    font-size:22px;
    line-height:1;
    padding:4px 6px;
    cursor:pointer;
    border-radius:50%;
    transition:transform .15s;
}
.react-opt:hover{ transform:scale(1.35) }

/* ── imagen del post ── */
.post-image{
    display:block;
    width:100%;
    max-height:340px;
    object-fit:cover;
    border-radius:18px;
    margin:10px 0 4px;
    cursor:zoom-in;
    border:1px solid rgba(0,0,0,.06);
}
.post-image.expanded{
    max-height:none;
    object-fit:contain;
    cursor:zoom-out;
}
[data-theme="dark"] .post-image{ border-color:rgba(255,255,255,.08) }

/* ── foto en el compositor ── */
.composer-photo-btn{
    font-size:20px;
    cursor:pointer;
    padding:4px 8px;
    border-radius:12px;
    transition:background .2s;
    user-select:none;
}
.composer-photo-btn:hover{ background:rgba(255,126,182,.15) }
.composer-photo-preview{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin:10px 0 4px;
}
.composer-photo-preview img{
    max-width:180px;
    max-height:140px;
    border-radius:14px;
    object-fit:cover;
    border:2px solid rgba(255,126,182,.4);
}
.composer-photo-del{
    background:var(--card2);
    border:1px solid rgba(0,0,0,.1);
    border-radius:50%;
    width:26px;
    height:26px;
    cursor:pointer;
    font-size:13px;
    color:var(--text);
    line-height:1;
}
[data-theme="dark"] .composer-photo-del{ border-color:rgba(255,255,255,.15) }

/* ━━━ Título de la página (el header ahora es la barra unificada) ━━━ */
.feed-page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 1.35rem;
    font-weight: 900;
    margin: 20px 0 18px;
}
.feed-hub-link {
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: #f0a0c8;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 6px 16px;
    border-radius: 999px;
    transition: background 0.2s;
}
.feed-hub-link:hover { background: rgba(255, 255, 255, 0.16); }