/* =========================
PAGE
========================= */

.cb-submit-page{
padding:26px 0;
background:#f8fafc;
}

.cb-submit-layout{
display:grid;
grid-template-columns:
1fr
360px;

gap:34px;
}

/* =========================
FORMS
========================= */

.cb-submit-main{
display:flex;
flex-direction:column;
gap:30px;
}

/* card */
.cb-submit-card{
background:#fff;

border-radius:34px;

padding:40px;

box-shadow:
0 18px 45px rgba(0,0,0,.05);
}

.cb-submit-card h2{
font-size:34px;
font-weight:900;
margin-bottom:16px;
}

.cb-submit-card p{
font-size:15px;
line-height:1.9;
color:#64748b;

margin-bottom:28px;
}

/* form */
.cb-form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.cb-field{
margin-bottom:22px;
}

.cb-field.full{
grid-column:1/-1;
}

.cb-field label{
display:block;

font-size:14px;
font-weight:800;

margin-bottom:10px;

color:#0f172a;
}

.cb-input,
.cb-textarea{
width:100%;

border:none;
outline:none;

background:#f8fafc;

border-radius:18px;

padding:16px 18px;

font-size:15px;

border:
1px solid #e2e8f0;

transition:.25s;
}

.cb-input:focus,
.cb-textarea:focus{
border-color:#2563eb;

box-shadow:
0 0 0 4px rgba(37,99,235,.08);
}

.cb-textarea{
min-height:140px;
resize:vertical;
}

/* button */
.cb-submit-btn{
height:60px;

padding:0 34px;

border:none;

border-radius:20px;

background:
linear-gradient(
135deg,
#2563eb,
#0ea5e9
);

color:#fff;

font-size:15px;
font-weight:800;

cursor:pointer;

transition:.25s;

box-shadow:
0 18px 35px rgba(37,99,235,.18);
}

.cb-submit-btn:hover{
transform:translateY(-3px);
}

/* =========================
SIDEBAR
========================= */

.cb-sidebar{
display:flex;
flex-direction:column;
gap:24px;
}

/* leaderboard */
.cb-side-card{
background:#fff;

border-radius:30px;

padding:30px;

box-shadow:
0 18px 45px rgba(0,0,0,.05);
}

.cb-side-card h3{
font-size:20px;
font-weight:900;

margin-bottom:22px;
}

/* leader */
.cb-leader{
display:flex;
align-items:center;
justify-content:space-between;

padding:14px 0;

border-bottom:
1px solid #eef2f7;
}

.cb-leader:last-child{
border-bottom:none;
}

.cb-leader-user{
display:flex;
align-items:center;
gap:14px;
}

.cb-rank{
width:42px;
height:42px;

border-radius:14px;

background:#eff6ff;

display:flex;
align-items:center;
justify-content:center;

font-size:14px;
font-weight:900;

color:#2563eb;
}

.cb-leader strong{
font-size:14px;
font-weight:800;
}

.cb-points{
font-size:14px;
font-weight:900;
color:#2563eb;
}

/* =========================
LEADERBOARD
========================= */

.cb-leaderboard-card{
padding:0;
overflow:hidden;
}

/* head */
.cb-leaderboard-head{
height:82px;

padding:0 26px;

display:flex;
align-items:center;

background:
linear-gradient(
135deg,
#eff6ff,
#dbeafe
);

border-bottom:
1px solid #dbeafe;
}

.cb-leaderboard-head h3{
font-size:26px;
font-weight:900;
margin:0;
color:#0f172a;
}

/* list */
.cb-leaderboard-list{
padding:10px 0;
}

/* item */
.cb-leader-item{
display:flex;
align-items:center;
justify-content:space-between;

gap:18px;

padding:22px 26px;

border-bottom:
1px solid #eef2f7;

transition:.25s;
}

.cb-leader-item:last-child{
border-bottom:none;
}

.cb-leader-item:hover{
background:#f8fafc;
}

/* left */
.cb-leader-left{
display:flex;
align-items:flex-start;
gap:18px;
}

/* rank */
.cb-leader-rank{
min-width:34px;

font-size:24px;
font-weight:900;

line-height:1;

color:#2563eb;
}

/* info */
.cb-leader-info{
display:flex;
flex-direction:column;
gap:8px;
}

.cb-leader-info strong{
font-size:16px;
font-weight:800;
line-height:1.5;
color:#0f172a;
}

.cb-leader-info span{
font-size:14px;
font-weight:700;
color:#64748b;
}

/* medal */
.cb-leader-medal{
flex-shrink:0;
}

.cb-leader-medal img{
width:42px;
height:42px;

object-fit:contain;

transition:.25s;
}

/* hover */
.cb-leader-item:hover .cb-leader-medal img{
transform:
rotate(-8deg)
scale(1.08);
}

/* guide */
.cb-guide{
display:flex;
flex-direction:column;
gap:18px;
}

.cb-guide-box{
background:#f8fafc;

border-radius:22px;

padding:20px;
}

.cb-guide-box h4{
font-size:17px;
font-weight:900;

margin-bottom:10px;
}

.cb-guide-box p{
font-size:14px;
line-height:1.8;
color:#64748b;
}

/* =========================
TABS
========================= */

.cb-submit-tabs{
display:flex;
gap:14px;
}

/* button */
.cb-submit-tab{
height:60px;

padding:0 28px;

border:none;
outline:none;

border-radius:20px;

background:#fff;

font-size:15px;
font-weight:800;

color:#64748b;

cursor:pointer;

transition:.28s;

box-shadow:
0 10px 30px rgba(0,0,0,.04);
}

/* active */
.cb-submit-tab.active{
background:
linear-gradient(
135deg,
#2563eb,
#0ea5e9
);

color:#fff;

box-shadow:
0 18px 35px rgba(37,99,235,.2);
}

/* hover */
.cb-submit-tab:hover{
transform:translateY(-2px);
}

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

.cb-tab-content{
display:none;

animation:
cbFade .3s ease;
}

.cb-tab-content.active{
display:block;
}

/* animation */
@keyframes cbFade{

from{
opacity:0;
transform:translateY(8px);
}

to{
opacity:1;
transform:none;
}

}

/* =========================
RESPONSIVE
========================= */

@media(max-width:1100px){

.cb-submit-layout{
grid-template-columns:1fr;
}

}

@media(max-width:768px){

.cb-submit-card{
padding:28px;
}

.cb-form-grid{
grid-template-columns:1fr;
}

.cb-submit-card h2{
font-size:28px;
}

}

/* =========================
SUBMIT MESSAGE
========================= */

.cb-submit-actions{
margin-top:10px;
}

.cb-submit-message{
margin-top:16px;

font-size:14px;
font-weight:700;

min-height:22px;
}

.cb-submit-message.success{
color:#16a34a;
}

.cb-submit-message.error{
color:#dc2626;
}

/* loading */
.cb-submit-btn.loading{
opacity:.7;
pointer-events:none;
}