/* =========================
 AINAVI v6.0
 AI Communication Design
========================= */


/* =========================
 BASE
========================= */


*{
box-sizing:border-box;
}



:root{

--main-blue:#00d5ff;

--deep-blue:#04142d;

--panel-bg:rgba(255,255,255,.08);

--border:rgba(0,210,255,.35);

--text:#d9efff;

}



body{


margin:0;


font-family:

"Noto Sans JP",
sans-serif;



background:


linear-gradient(

150deg,

#04142d,

#082b57,

#063d7a

);



color:white;


min-height:100vh;


}




.hidden{

display:none;

}





/* =========================
HEADER
========================= */


.header{


text-align:center;


padding:45px 20px;


}



.logo{


font-size:48px;


font-weight:900;


letter-spacing:8px;



color:var(--main-blue);



text-shadow:


0 0 25px rgba(0,207,255,.8);



}



.subtitle{


font-size:12px;


letter-spacing:4px;


color:#8edcff;


}



.header p{


line-height:1.8;


color:#d5edff;


}






/* =========================
MAIN PANEL
========================= */



main{


max-width:500px;


margin:auto;


padding:15px;


}




.panel{


background:


var(--panel-bg);



border:


1px solid var(--border);



border-radius:24px;



padding:25px;



margin-bottom:20px;



backdrop-filter:


blur(15px);



box-shadow:


0 20px 50px rgba(0,0,0,.35);



}







h2{


text-align:center;


margin-bottom:25px;


}



h3{


color:var(--main-blue);



border-left:


4px solid var(--main-blue);



padding-left:10px;



}









/* =========================
FORM
========================= */


label{


display:block;


margin-top:15px;


margin-bottom:6px;



font-size:13px;



color:#a9dcff;



font-weight:bold;



}



input,
select{


width:100%;



height:52px;



border-radius:14px;



border:


1px solid var(--border);



background:


rgba(0,15,40,.8);



color:white;



padding:0 15px;


font-size:15px;



}



input::placeholder{


color:#8aa6c4;


}



input:focus,
select:focus{


outline:none;



border-color:var(--main-blue);



box-shadow:


0 0 20px rgba(0,210,255,.4);



}






/* =========================
BUTTON
========================= */


button{


width:100%;


height:55px;



margin-top:25px;



border:none;



border-radius:15px;



background:


linear-gradient(

90deg,

#00d5ff,

#006aff

);



color:white;



font-size:16px;



font-weight:bold;



letter-spacing:1px;



cursor:pointer;



box-shadow:


0 10px 30px rgba(0,130,255,.45);



transition:.3s;


}



button:hover{


transform:

translateY(-2px);


box-shadow:


0 15px 35px rgba(0,200,255,.6);



}






/* =========================
AI ANALYSIS
========================= */


.ai-circle{


width:120px;


height:120px;


margin:20px auto;



border-radius:50%;



display:flex;


align-items:center;


justify-content:center;



font-size:30px;


font-weight:bold;



background:


linear-gradient(

135deg,

#00eaff,

#006aff

);



box-shadow:


0 0 45px rgba(0,220,255,.8);



animation:


pulse 2s infinite;



}



@keyframes pulse{


50%{


transform:scale(1.08);



}


}



.analysis-list{


line-height:2;


color:#d9efff;



}



/* 分析中アニメーション */


.analysis-list p{


opacity:.45;


transition:.5s;


}



.analysis-list p.active{


opacity:1;


color:#00eaff;


text-shadow:


0 0 15px #00eaff;


}


/* =========================
AI PROGRESS BAR
========================= */


.ai-progress{


margin-top:25px;


}



.progress-item{


margin-bottom:15px;


}



.progress-title{


font-size:13px;


color:#bfeaff;


margin-bottom:6px;


}




.progress-bar{


height:10px;


background:


rgba(255,255,255,.15);



border-radius:20px;


overflow:hidden;


}




.progress-fill{


height:100%;


width:0;



background:


linear-gradient(

90deg,

#00d5ff,

#006aff

);



border-radius:20px;



transition:

width 1s ease;



}







/* =========================
TAB
========================= */


.tabs{


display:flex;


gap:10px;


}



.tabs button{


height:45px;


margin-top:10px;


font-size:14px;


background:


rgba(255,255,255,.1);



border:


1px solid rgba(0,210,255,.3);



}



.tabs .active{


background:


linear-gradient(

90deg,

#00d5ff,

#006aff

);



}









/* =========================
RANKING CARD
========================= */



#ranking,
#set-ranking{


display:flex;


flex-direction:column;


gap:15px;



}



.rank-card{


background:


linear-gradient(

135deg,

rgba(0,150,255,.25),

rgba(0,30,80,.8)

);



border-radius:20px;



padding:20px;



border:


1px solid rgba(0,210,255,.35);



animation:


fadeIn .5s ease;



}



@keyframes fadeIn{


from{


opacity:0;


transform:

translateY(15px);



}


to{


opacity:1;


transform:

translateY(0);



}



}



.rank-card:first-child{


border:


2px solid #00eaff;



box-shadow:


0 0 30px rgba(0,220,255,.4);



}



.rank-number{


font-size:28px;


font-weight:bold;



color:#00eaff;



}




.rank-card h1{


font-size:28px;


text-align:center;


color:#00eaff;



text-shadow:


0 0 20px rgba(0,220,255,.8);



}






/* =========================
SCORE DETAIL
========================= */


.detail-box,
.saving-box,
.network-box,
.ai-box{


margin-top:20px;


padding:20px;



background:


rgba(0,120,255,.15);



border-radius:18px;



}



.detail-box span{


float:right;


color:#00eaff;


font-weight:bold;


}



.saving-box span{


font-size:24px;


font-weight:bold;


color:#00ffcc;



}









/* =========================
AI RESULT
========================= */


.ai-box{


border:


1px solid rgba(0,210,255,.3);



}



.ai-box p{


line-height:1.8;


color:#e3f5ff;



}









/* =========================
OFFICIAL LINK
========================= */


.official-btn{


display:block;


text-align:center;



margin-top:15px;



padding:12px;



border-radius:12px;



background:


rgba(0,210,255,.2);



border:


1px solid #00d5ff;



color:white;



text-decoration:none;



transition:.3s;



}



.official-btn:hover{


background:


rgba(0,210,255,.4);



}








/* =========================
FOOTER
========================= */


footer{


text-align:center;



padding:30px;



font-size:12px;



color:#87b8dc;



letter-spacing:2px;



}


/* 注意書き */
.notice{

font-size:11px;

opacity:0.7;

margin-top:15px;

line-height:1.6;

}







/* =========================
MOBILE
========================= */


@media(max-width:500px){



.logo{


font-size:38px;


}




.panel{


padding:20px;


}



.rank-card h1{


font-size:24px;


}



button{


height:52px;


}



}