/* =================================
Kailoora V4.0 Global Style
================================= */


:root{


--bg:#f7f8fc;

--card:#ffffff;

--soft:#f1f3fa;

--text:#202124;

--sub:#6b7280;

--border:#e5e7eb;

--accent:#7c3aed;

--shadow:

0 15px 40px rgba(0,0,0,.08);


--radius:28px;


}





/* ================================
Dark Mode
================================ */


[data-theme="dark"]{


--bg:#101114;

--card:#181a20;

--soft:#22252d;

--text:#f5f5f5;

--sub:#a1a1aa;

--border:#30343d;

--accent:#a78bfa;


--shadow:

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


}







*{


box-sizing:border-box;


}



html{


scroll-behavior:smooth;


}



body{


margin:0;


font-family:

"Inter",
"PingFang SC",
"Microsoft YaHei",
sans-serif;



background:

var(--bg);



color:

var(--text);



transition:

background .25s,
color .25s;


}



a{


text-decoration:none;

color:inherit;


}





/* ================================
Header
================================ */


.header{


height:72px;


display:flex;


align-items:center;


justify-content:space-between;



padding:

0 6%;



position:relative;


z-index:10;



}



.logo{


font-size:24px;


font-weight:800;


letter-spacing:1px;


}





nav{


display:flex;


gap:28px;


}



nav a{


color:

var(--sub);


font-size:15px;


transition:.25s;


}



nav a:hover{


color:

var(--accent);


}






.theme-btn{


width:42px;

height:42px;


border-radius:14px;


border:1px solid var(--border);


background:

var(--card);


color:

var(--text);



cursor:pointer;



font-size:20px;



display:flex;


align-items:center;


justify-content:center;


transition:.25s;


}



.theme-btn:hover{


transform:

rotate(15deg);


}







/* ================================
Main
================================ */


main{


width:

88%;


max-width:

1200px;


margin:

0 auto;


}






/* ================================
Hero
================================ */


.hero{


text-align:center;


padding:

100px 0 70px;


}



.hero h1{


font-size:

52px;


margin-bottom:

20px;


}



.hero p{


font-size:

20px;


color:

var(--sub);


}






.primary-btn{


margin-top:35px;


padding:

16px 38px;


border:none;


border-radius:50px;



background:

var(--accent);



color:white;



font-size:18px;



cursor:pointer;



transition:.25s;


}



.primary-btn:hover{


transform:

translateY(-4px);


}







/* ================================
Common Card
================================ */


.profile-box,
.daily-box,
.feature-box{


background:

var(--card);


border:

1px solid var(--border);


border-radius:

var(--radius);



padding:

40px;



box-shadow:

var(--shadow);



margin-bottom:

40px;


}



h2{


font-size:

30px;


margin-top:0;


}







/* ================================
Profile
================================ */


#userProfile{


line-height:2;


color:

var(--sub);


}



#userProfile strong{


color:

var(--accent);


}







/* ================================
Daily Explore
================================ */


.daily-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);



gap:

20px;


}




.daily-item{


background:

var(--soft);



padding:

28px;



border-radius:

24px;



transition:.25s;



}



.daily-item:hover{


transform:

translateY(-5px);


}



.daily-icon{


font-size:

36px;


}



.daily-item h3{


margin:

15px 0;


}



.daily-item p{


color:

var(--sub);


line-height:1.7;


}







/* ================================
Feature
================================ */


.feature-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:

20px;


}




.feature-card{


background:

var(--soft);



padding:

35px 25px;



border-radius:

26px;



text-align:center;



transition:.25s;


}



.feature-card:hover{


transform:

translateY(-8px);



background:

var(--card);


box-shadow:

var(--shadow);


}



.feature-card:first-letter{


font-size:35px;


}





/* ================================
Sub Pages
================================ */


.page-container{


max-width:

900px;


margin:

60px auto;


}



.page-title{


text-align:center;


font-size:

42px;


}





.content-card{


background:

var(--card);


border:

1px solid var(--border);



border-radius:

32px;



padding:

40px;



box-shadow:

var(--shadow);



}







/* ================================
MBTI
================================ */


.question{


margin-bottom:

25px;


}



.option{


display:block;


padding:

15px;


border-radius:

18px;


background:

var(--soft);


margin:

12px 0;


cursor:pointer;


transition:.2s;


}




.option:hover{


background:

var(--accent);


color:white;


}



.option.active{


background:

var(--accent);


color:white;


}








/* ================================
Share Poster
================================ */


.share-card{


width:

100%;


max-width:

420px;


margin:

30px auto;


padding:

35px;


border-radius:

35px;


background:

var(--card);


border:

1px solid var(--border);


text-align:center;


box-shadow:

var(--shadow);



}






.qr-area{


display:flex;


justify-content:center;


margin-top:30px;


}







/* ================================
Footer
================================ */


footer{


text-align:center;


padding:

40px;


color:

var(--sub);


}







/* ================================
Mobile
================================ */


@media(max-width:900px){



nav{


display:none;


}



.hero h1{


font-size:

38px;


}



.daily-grid{


grid-template-columns:

repeat(2,1fr);


}



.feature-grid{


grid-template-columns:

repeat(2,1fr);


}



}




@media(max-width:480px){



main{


width:

92%;


}



.hero{


padding:

60px 0;


}



.hero h1{


font-size:

32px;


}



.profile-box,
.daily-box,
.feature-box{


padding:

25px;


}



.daily-grid{


grid-template-columns:

1fr;


}



.feature-grid{


grid-template-columns:

1fr;


}



.share-card{


padding:

25px;


border-radius:

25px;


}


}


/* =====================
Kailoora Poster
===================== */


#kailooraPoster{


position:

fixed;


left:

-9999px;



width:

1080px;


height:

1350px;



padding:

100px;


background:

white;



color:

#222;



text-align:center;



border-radius:

50px;



font-family:

"Microsoft YaHei",
sans-serif;


}




.poster-brand{


font-size:

55px;


font-weight:

900;


}




.poster-title{


margin-top:

80px;


font-size:

42px;


color:#777;


}



.poster-type{


font-size:

180px;


font-weight:

900;


margin-top:

60px;


}



.poster-name{


font-size:

60px;


font-weight:

700;


}



.poster-keyword{


margin-top:

40px;


font-size:

35px;


}



.poster-desc{


margin-top:

80px;


font-size:

34px;


line-height:

1.8;


}



.poster-line{


margin:

80px 0;


height:

2px;


background:

#ddd;


}



#posterQR{


display:flex;


justify-content:center;


}


.poster-footer p{


font-size:

30px;


color:#666;


}

/* =====================
Zodiac
===================== */


.zodiac-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:20px;


margin-top:30px;


}



.zodiac-card{


background:

var(--soft);


border-radius:

25px;


padding:

25px;


text-align:center;


cursor:pointer;


transition:.25s;


}



.zodiac-card:hover{


transform:

translateY(-6px);


background:

var(--card);


box-shadow:

var(--shadow);


}



.zodiac-icon{


font-size:

45px;


}



.zodiac-card p{


color:

var(--sub);


}





@media(max-width:900px){


.zodiac-grid{


grid-template-columns:

repeat(3,1fr);


}


}




@media(max-width:480px){


.zodiac-grid{


grid-template-columns:

repeat(2,1fr);


}


}