/* ===========================================================
KANA Capital Crypto Professional v2
cards.css
=========================================================== */

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

.card{

background:#161f2f;

border:1px solid #293548;

border-radius:18px;

padding:22px;

box-shadow:0 12px 30px rgba(0,0,0,.25);

transition:.25s;

}

.card:hover{

transform:translateY(-5px);

box-shadow:0 20px 45px rgba(0,0,0,.35);

}

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

.coin-card{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px;

background:#101826;

border:1px solid #293548;

border-radius:16px;

margin-bottom:18px;

}

.coin-left{

display:flex;

align-items:center;

gap:15px;

}

.coin-logo{

width:48px;

height:48px;

border-radius:50%;

background:#1f2d44;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

}

.coin-info h3{

font-size:18px;

font-weight:700;

margin-bottom:5px;

}

.coin-info p{

font-size:13px;

color:#94a3b8;

}

.coin-right{

text-align:right;

}

.coin-price{

font-size:24px;

font-weight:700;

margin-bottom:6px;

}

.coin-change{

font-size:15px;

font-weight:700;

}

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

.watch-card{

display:flex;

justify-content:space-between;

align-items:center;

padding:14px 18px;

border-radius:14px;

background:#111827;

border:1px solid #293548;

margin-bottom:12px;

cursor:pointer;

transition:.25s;

}

.watch-card:hover{

background:#182438;

transform:translateX(5px);

}

.watch-symbol{

font-weight:700;

font-size:16px;

}

.watch-price{

font-size:15px;

}

.watch-change{

font-weight:700;

}

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

.signal-card{

padding:25px;

border-radius:18px;

background:linear-gradient(
180deg,
#13253d,
#111827
);

border:1px solid #29405d;

}

.signal-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.signal-title{

font-size:22px;

font-weight:700;

}

.signal-status{

padding:8px 18px;

border-radius:30px;

font-size:14px;

font-weight:700;

}

.buy{

background:#00d084;

color:#000;

}

.sell{

background:#ff4d4f;

color:#fff;

}

.hold{

background:#ffb020;

color:#000;

}

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

.indicator-card{

background:#101826;

padding:18px;

border-radius:14px;

border:1px solid #293548;

margin-bottom:15px;

}

.indicator-card h4{

margin-bottom:12px;

font-size:16px;

}

.indicator-value{

font-size:26px;

font-weight:700;

}

.indicator-label{

font-size:13px;

color:#94a3b8;

margin-top:6px;

}

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

.news-item{

background:#111827;

padding:18px;

border-left:4px solid #00d084;

border-radius:12px;

margin-bottom:15px;

transition:.25s;

cursor:pointer;

}

.news-item:hover{

transform:translateX(6px);

}

.news-item h4{

font-size:17px;

margin-bottom:10px;

}

.news-item p{

font-size:14px;

color:#94a3b8;

line-height:1.6;

}

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

.stat-box{

background:#111827;

border:1px solid #293548;

border-radius:14px;

padding:20px;

text-align:center;

}

.stat-box label{

display:block;

font-size:13px;

color:#94a3b8;

margin-bottom:10px;

}

.stat-box h2{

font-size:30px;

font-weight:800;

}

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

.position-card{

background:#101826;

border:1px solid #293548;

border-radius:16px;

padding:20px;

margin-bottom:15px;

}

.position-header{

display:flex;

justify-content:space-between;

margin-bottom:15px;

}

.position-symbol{

font-size:18px;

font-weight:700;

}

.position-side{

padding:6px 12px;

border-radius:20px;

font-size:12px;

font-weight:700;

}

.long{

background:#00d084;

color:#000;

}

.short{

background:#ff4d4f;

color:#fff;

}

.position-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:12px;

margin-top:15px;

}

.position-grid div{

background:#182438;

padding:12px;

border-radius:10px;

}

/* ===============================
BUTTONS
=============================== */

.btn{

padding:12px 20px;

border:none;

border-radius:10px;

font-weight:700;

cursor:pointer;

transition:.25s;

}

.btn-primary{

background:#00d084;

color:#000;

}

.btn-danger{

background:#ff4d4f;

color:#fff;

}

.btn-warning{

background:#ffb020;

color:#000;

}

.btn:hover{

transform:translateY(-2px);

opacity:.95;

}

/* ===============================
BADGES
=============================== */

.badge{

display:inline-flex;

align-items:center;

padding:6px 12px;

border-radius:20px;

font-size:12px;

font-weight:700;

}

.badge-success{

background:rgba(0,208,132,.15);

color:#00d084;

}

.badge-danger{

background:rgba(255,77,79,.15);

color:#ff4d4f;

}

.badge-warning{

background:rgba(255,176,32,.15);

color:#ffb020;

}

.badge-info{

background:rgba(0,184,255,.15);

color:#00b8ff;

}