/* ================================
   LIST
================================ */

.forecast-list{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-top:12px;
}

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

.forecast-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:16px;
}

/* ================================
   TOP LINE
================================ */

.forecast-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}

/* ================================
   BET LINE
================================ */

.forecast-bet-line{
    display:flex;
    align-items:center;
    gap:10px;
}

.forecast-stage{
    font-size:11px;
    color:#6b7280;
    background:#f3f4f6;
    padding:3px 8px;
    border-radius:6px;
}

.forecast-bet{
    font-size:16px;
    font-weight:700;
    color:#111827;
}

/* ================================
   STATUS
================================ */

.forecast-status{
    width:10px;
    height:10px;
    border-radius:50%;
}

.forecast-status-wait{
    background:#9ca3af;
}

.forecast-status-win{
    background:#22c55e;
}

.forecast-status-lose{
    background:#ef4444;
}

/* ================================
   ODD
================================ */

.forecast-odd{
    font-weight:700;
    font-size:14px;
    background:#ecfdf5;
    color:#16a34a;
    border:1px solid #22c55e;
    padding:6px 12px;
    border-radius:8px;
}

/* ================================
   TEXT
================================ */
.forecast-text-str{
    position:relative;
    line-height:1.5;
}
.forecast-text{
    position:relative;
    display:-webkit-box;
    -webkit-line-clamp:6;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.5;
    font-size: 17px;
}

.forecast-text.truncated::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:40px;
    background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}

.forecast-text.expanded{
    -webkit-line-clamp:unset;
}

.forecast-text.expanded::after{
    display:none;
}
.forecast-text-link{
color:inherit;
text-decoration:none;
display:block;
}
.forecast-more{
    display:block;
    text-align:center;
    margin-top:10px;
    font-size:13px;
    color:#2b7cff;
    cursor:pointer;
    font-weight:600;
    padding-top:6px;
}

.forecast-more:hover{
    text-decoration:underline;
}
/* ================================
   BOTTOM
================================ */

.forecast-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top: 10px;
}

/* ================================
   USER
================================ */

.forecast-user{
    display:flex;
    align-items:center;
    gap:10px;
}

.forecast-avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    object-fit:cover;
}

.forecast-user-meta{
    display:flex;
    flex-direction:column;
}

.forecast-user-name a{
    font-weight:600;
    font-size:14px;
    color:#111827;
    text-decoration:none;
}

.forecast-user-name a:hover{
    color:#2563eb;
}

.forecast-date{
    font-size:12px;
    color:#9ca3af;
}

/* ================================
   LIKE
================================ */

.forecast-actions{
    display:flex;
    align-items:center;
}
.forecast-comm{
    display:flex;
    align-items:center;
    gap:6px;
    border:0;
    background:#f6f6f6;
    padding:6px 10px;
    border-radius:20px;
    cursor:pointer;
    font-size:14px;
    color:#777;
    text-decoration:none;
    margin-right: 10px;
}

.forecast-comm:hover{
    color:#666;
    background:#f6f6f6;
}
.forecast-like{
    display:flex;
    align-items:center;
    gap:6px;
    border:0;
    background:#f4f4f4;
    padding:6px 10px;
    border-radius:20px;
    cursor:pointer;
    font-size:14px;
    color:#666;
}

.forecast-like:hover{
    color:#ff2d55;
    background:#f4f4f4;
}

.forecast-like.liked{
    color:#ff2d55;
    background:#f4f4f4;
}

.forecast-like-view{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:20px;
    font-size:14px;
    color:#888;
    background:#f4f4f4;
}

/* ================================
   EMPTY
================================ */

.forecast-empty{
    padding:20px;
    text-align:center;
    color:#9ca3af;
}

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

.forecast-add-box{
    margin-bottom:16px;
    display:flex;
    justify-content:flex-end;
}

.forecast-submit{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 15px;
    background:#16a34a;
    color:#fff;
    font-size:14px;
    font-weight:600;
    border-radius:8px;
    text-decoration:none;
}

.forecast-submit:hover{
    background:#15803d;
}
.forecast-event{
margin-bottom:8px;
}

.forecast-event-link{
display:flex;
align-items:center;
justify-content:flex-start;
gap:10px;

background:#f7f7f7;
padding:8px 10px;
border-radius:8px;

text-decoration:none;
color:#111;
font-size:13px;
}

.forecast-event-date{
color:#777;
font-size:12px;
margin-right:8px;
}

.forecast-event-team{
display:flex;
align-items:center;
gap:5px;
font-weight:600;
}

.forecast-event-logo{
width:18px;
height:18px;
object-fit:contain;
}

.forecast-event-sep{
color:#999;
font-weight:600;
}


.forecasts-main-wrap{
    display:grid;
    grid-template-columns: 1fr 320px;
    gap:24px;
    align-items:start;
    margin-bottom: 60px;
}

.forecasts-main-left{
    min-width:0;
}

.forecasts-main-right{
    width:320px;
    margin-top:16px;
}
.forecasts-main-right-str{
    width:320px;
}
.sport-count{
display:flex;
justify-content:center;
gap:4px;
}

.sport-count::before{
content:attr(data-new);
background:#22c55e;
color:#fff;
font-size:11px;
font-weight:600;
padding:2px 7px;
}

.sport-count::after{
content:attr(data-total);
background:#e5e7eb;
color:#444;
font-size:11px;
font-weight:600;
padding:2px 7px;
}
.top-forecasters{
background:#fff;
border:1px solid #e5e7eb;
border-radius:10px;
padding:14px;
margin-top: 16px;
}

.top-forecasters-title{
font-size:15px;
font-weight:700;
margin-bottom:12px;
color:#111;
text-transform: uppercase;
}

.top-forecaster{
display:flex;
align-items:center;
gap:10px;

padding:8px 0;

text-decoration:none;
color:#111;

border-bottom:1px solid #f1f1f1;
}

.top-forecaster:last-child{
border-bottom:none;
}

.top-forecaster:hover{
background:#fafafa;
}

.top-forecaster-rank{
width:20px;
text-align:center;
font-weight:700;
color:#999;
font-size:13px;
}

.top-forecaster-avatar{
width:34px;
height:34px;
border-radius:50%;
object-fit:cover;
}

.top-forecaster-meta{
display:flex;
flex-direction:column;
}

.top-forecaster-name{
font-size:13px;
font-weight:600;
}

.top-forecaster-count{
font-size:12px;
color:#777;
}
.forecast-tabs-top{
display:flex;
gap:10px;
margin-bottom:14px;
}

.forecast-tab-top{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:16px;
padding:10px 18px;

font-size:14px;
font-weight:600;
text-decoration:none;

color:#1f2937;
background:#f4f4f5;

border:1px solid #e4e4e7;
border-radius:8px;

transition:
background-color .18s ease,
border-color .18s ease,
color .18s ease,
box-shadow .18s ease;
}

.forecast-tab-top:hover{
background:#eeeeee;
border-color:#d4d4d8;
color:#111827;
}

.forecast-tab-top.active{
background:#16a34a;
border-color:#15803d;
color:#fff;

box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

.forecast-tab-top.active:hover{
background:#15803d;
}
.forecast-sport{
display:inline-flex;
align-items:center;
gap:5px;

background:#eef2f7;
color:#374151;

font-size:11px;
font-weight:600;

padding:3px 7px;
border-radius:6px;

margin-right:6px;
}

.forecast-sport i{
font-size:11px;
opacity:.9;
}