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

:root{

--bg:#0b0f19;
--bg2:#111827;
--bg3:#1b2433;

--card:#161f2f;
--card2:#1d293b;

--primary:#00d084;
--danger:#ff4d4f;
--warning:#ffb020;
--info:#00b8ff;

--text:#ffffff;
--text2:#cbd5e1;
--text3:#94a3b8;

--border:#2b3648;

--radius:18px;

--shadow:
0 12px 35px rgba(0,0,0,.35);

--transition:.25s ease;

font-family:'Inter',sans-serif;

}

/* ===================================== */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);

color:var(--text);

font-family:'Inter',sans-serif;

overflow-x:hidden;

}

/* ===================================== */

a{

text-decoration:none;

color:inherit;

}

img{

display:block;

max-width:100%;

}

button{

cursor:pointer;

font-family:inherit;

}

input,
select{

font-family:inherit;

}

/* ===================================== */

.app{

display:flex;

min-height:100vh;

background:linear-gradient(
180deg,
#0b0f19,
#101826
);

}

/* ===================================== */

.main-content{

flex:1;

display:flex;

flex-direction:column;

padding:25px;

gap:25px;

}

/* ===================================== */

.top-header{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

padding:20px;

background:var(--card);

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

border-radius:var(--radius);

box-shadow:var(--shadow);

}

.header-left h1{

font-size:28px;

font-weight:700;

}

.header-left p{

margin-top:6px;

color:var(--text3);

}

.header-right{

display:flex;

gap:15px;

flex-wrap:wrap;

}

/* ===================================== */

.market-pill{

background:var(--bg2);

padding:12px 18px;

border-radius:12px;

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

display:flex;

flex-direction:column;

align-items:center;

min-width:120px;

}

.market-pill span{

margin-top:6px;

font-weight:700;

font-size:15px;

}

/* ===================================== */

.overview-grid{

display:grid;

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

gap:20px;

}

.overview-card{

background:var(--card);

padding:22px;

border-radius:18px;

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

transition:var(--transition);

box-shadow:var(--shadow);

}

.overview-card:hover{

transform:translateY(-5px);

}

.overview-card h3{

color:var(--text3);

font-size:14px;

margin-bottom:12px;

}

.overview-card h2{

font-size:28px;

margin-bottom:8px;

}

.overview-card p{

font-size:15px;

font-weight:600;

}

/* ===================================== */

.dashboard-grid{

display:grid;

grid-template-columns:

2fr 1fr;

gap:25px;

}

/* ===================================== */

.panel{

background:var(--card);

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

border-radius:20px;

padding:22px;

box-shadow:var(--shadow);

margin-bottom:25px;

}

.panel-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.panel-header h2{

font-size:20px;

font-weight:700;

}

/* ===================================== */

.live-badge{

background:var(--primary);

padding:7px 14px;

border-radius:30px;

font-size:12px;

font-weight:700;

color:#000;

}

/* ===================================== */

.footer{

display:flex;

justify-content:space-between;

padding:20px;

background:var(--card);

border-radius:18px;

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

color:var(--text3);

font-size:14px;

}

/* ===================================== */

.green{

color:var(--primary);

}

.red{

color:var(--danger);

}

.orange{

color:var(--warning);

}

.blue{

color:var(--info);

}

/* ===================================== */

.loading{

animation:pulse 1.3s infinite;

}

@keyframes pulse{

0%{

opacity:.4;

}

50%{

opacity:1;

}

100%{

opacity:.4;

}

}

/* ===================================== */

::-webkit-scrollbar{

width:8px;

height:8px;

}

::-webkit-scrollbar-thumb{

background:#394960;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#111827;

}

/* ===================================== */

.hidden{

display:none;

}

.text-center{

text-align:center;

}

.mt20{

margin-top:20px;

}

.mb20{

margin-bottom:20px;

}

.w100{

width:100%;

}