:root{
    --bg:#0b0e11;
    --panel:#0f141a;
    --muted:#9aa6b2;
    --text:#e6eef6;
    --accent:#f3ba2f;
    --success:#27ae60;
    --danger:#e74c3c;
    --glass: rgba(255,255,255,0.02);
    --card-radius:12px;
}


*{
    margin:0px;
    padding: 0px;
    color:var(--muted);
    box-sizing:border-box
}
body{
    margin:0px;
    padding: 0px;
    font-family:Inter,system-ui,Arial;
    background:linear-gradient(180deg,var(--bg),#071018);
    min-height:100vh;
    overflow-x: hidden;
}
.page{
    max-width:1300px;
    margin:28px auto;
    padding:20px;
}
header.topbar{
    display:flex;
    align-items:center;
    gap:20px;
    justify-content:space-between;
    padding:14px 18px;
    border-radius:12px;
    background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
    box-shadow:0 6px 18px rgba(0,0,0,0.5);
    border:1px solid rgba(255,255,255,0.02)
}
.brand {
    display:flex;
    gap:12px;
    align-items:center;
}
.brand .logo {
    width:42px;
    height:42px;
    border-radius:8px;
    background:linear-gradient(90deg,var(--accent),#e0b23a);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#071018;
    font-weight:700;
}
.brand h1{
    font-size:1.1rem;
    margin:0
}
.profile {
    display:flex;
    gap:12px;
    align-items:center;
}
.avatar {
    width:40px;
    height:40px;
    border-radius:50%;
    background:linear-gradient(180deg,#233, #111);
    border:2px solid rgba(255,255,255,0.03);
}

/* Grid layout */
.grid {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:18px;
    margin-top:18px;
}
.col-3 {
    grid-column:span 3
}
.col-4 {
    grid-column:span 4
}
.col-6 {
    grid-column:span 6
}
.col-9 {
    grid-column:span 9
}
.col-12 {
    grid-column:span 12
}

/* Cards */
.card {
    background:var(--panel);
    border-radius:var(--card-radius);
    padding:16px;
    border:1px solid rgba(255,255,255,0.03);
    box-shadow:0 6px 18px rgba(2,6,23,0.6);
}
.stat {
    display:flex;
    flex-direction:column;
    gap:8px
}
.stat .label {
    color:var(--muted);
    font-size:0.85rem
}
.stat .value {
    font-size:1.4rem;
    font-weight:700
}
.small-muted{
    color:var(--muted);
    font-size:0.85rem
}

/* Chart container */
.chart-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px
}
.btn {
    background:transparent;
    border:1px solid rgba(255,255,255,0.04);
    color:var(--text);
    padding:8px 10px;
    border-radius:8px;
    cursor:pointer
}
.btn-primary {
    background:linear-gradient(90deg,var(--accent),#e0b23a);
    color:#071018;
    border:0;
}
.time-toggle {
    display:flex;
    gap:8px
}


/* Responsive tweaks */
@media(max-width:1000px){
    .col-3, .col-4, .col-6, .col-9 {
        grid-column:span 12
    }
    .chart-header {
        flex-direction:column;
        align-items:flex-start;
        gap:10px
    }
}

/* Footer small */
.meta {
    font-size:0.85rem;
    color:var(--muted);
    margin-top:12px
}
.export {
    background:transparent;
    border:1px dashed rgba(255,255,255,0.04);
    padding:8px;
    border-radius:8px;
    color:var(--muted);
    cursor:pointer
}

.quick-links .btn {
    background: #f4f4f4;
    border-radius: 6px;
    padding: 6px 12px;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    color: #333;
    transition: background 0.2s;
}

.quick-links .btn:hover {
    background: #e8e8e8;
}

.quick-links .btn-primary {
    background: #0066ff;
    color: #fff;
}

.quick-links .btn-primary:hover {
    background: #0056d1;
}

a{
    text-decoration: none !important;
}
a:hover{
    color:darkorange !important;
}

label{
    display:block;
    font-size:0.9rem;
    margin-bottom:8px;
    color:var(--muted)
}
input[type="email"],input[type="password"],input[type="text"]
,input[type="tel"],input[type="number"], .custom-select{
    width:100%;
    padding:12px 14px;
    border-radius:11px;
    border:1px solid rgba(255,255,255,0.09);
    background:transparent;
    color:var(--text);
    outline:none
}


.pair-card {
  background: rgba(255,255,255,0.05);
  padding: 16px;
  flex: 1;
  min-width: 180px;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pair-card .symbol { font-weight: 700; font-size: 18px; }
.pair-card .stats { font-size: 14px; display: flex; justify-content: space-between; }
.pair-card .pnl { font-weight: 600; }
.pair-card canvas { margin-top:6px; height: 50px !important; }

/* Table */
.table-container { overflow-x:auto; }
.pairs-table-transparent { width:100%; border-collapse:collapse; font-size:14px; color:#fff; }
.pairs-table-transparent th { text-align:left; padding:8px 10px; font-weight:600; border-bottom:1px solid rgba(255,255,255,0.2);}
.pairs-table-transparent td { padding:8px 10px; border-bottom:1px solid rgba(255,255,255,0.1);}
.pairs-table-transparent tbody tr:hover { background: rgba(255,255,255,0.05); cursor:pointer; }
.pairs-table-transparent td canvas { height: 30px !important; width: 80px !important; }


/* Recent trade card list */
.trade-card {
  background: #1f2937;
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.trade-card:hover {
  transform: translateY(-2px);
}

.trade-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin: 0.2rem 0;
}

.trade-buy {
  color: #10b981; /* green for buy */
}

.trade-sell {
  color: #ef4444; /* red for sell */
}

.trade-time {
  font-size: 0.75rem;
  color: #9ca3af;
}