/* Trade Terminal Base */
html, body.trade-body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg-main, #0b0e14);
    color: var(--text-primary, #ffffff);
    font-family: var(--font-main, 'Inter', sans-serif);
    font-size: 12px;
}

/* Compact Header */
.trade-header {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    background-color: var(--bg-secondary, #13151a);
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.th-left, .th-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.logo {
    font-size: 20px;
    font-weight: 800;
}

.ticker-info {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: 16px;
}

.ticker-info h1 {
    font-size: 20px;
    margin: 0;
}

.ticker-item {
    display: flex;
    flex-direction: column;
}

.ticker-item.price-main {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.t-label {
    color: var(--text-secondary, #8c939d);
    font-size: 11px;
}

.t-val {
    font-weight: 600;
    font-size: 13px;
}

.t-val.positive { color: #00d287; }
.t-val.negative { color: var(--danger-color, #f75565); }

/* Main Grid Layout */
.trade-layout {
    display: grid;
    grid-template-columns: 300px 1fr 320px;
    height: calc(100vh - 130px);
    width: 100%;
    background-color: #0b0e14;
}

.panel {
    border-right: 1px solid var(--border-color, rgba(255,255,255,0.08));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.panel-header {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

/* Order Book Panel */
.ob-headers, .th-headers {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 8px 16px;
    color: var(--text-secondary, #8c939d);
    font-size: 11px;
}
.ob-headers span:nth-child(2) { text-align: right; }
.ob-headers span:last-child { text-align: right; }

.ob-list {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ob-asks {
    justify-content: flex-end; /* Push asks to bottom of container */
}

.ob-row, .th-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 2px 16px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    position: relative;
}

.ob-row:hover, .th-row:hover {
    background-color: rgba(255,255,255,0.05);
}

.ob-row span:nth-child(2), .ob-row span:nth-child(3) {
    text-align: right;
}

.ob-row.ask .price { color: var(--danger-color, #f75565); }
.ob-row.bid .price { color: #00d287; }

.ob-current-price {
    padding: 8px 16px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
    display: flex;
    align-items: center;
}

/* Chart Panel */
.chart-panel {
    background-color: #0b0e14;
}

/* Right Column (History & Order Entry) */
.right-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.history-panel {
    flex: 1;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-right: none;
}

.th-list {
    flex: 1;
    overflow-y: auto;
}

.th-row span:nth-child(2) { text-align: right; }
.th-row span:last-child { text-align: right; color: var(--text-secondary); }

.th-row.up .price { color: #00d287; }
.th-row.down .price { color: var(--danger-color, #f75565); }

/* Order Panel */
.order-panel {
    flex: 1.2;
    border-right: none;
    overflow-y: auto;
}

.order-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.order-tab {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 600;
}

.order-tab.active {
    color: var(--primary-color, #f1c40f);
    border-bottom: 2px solid var(--primary-color, #f1c40f);
}

.order-forms {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.trade-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-balance {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: right;
}

.input-wrap {
    display: flex;
    align-items: center;
    background-color: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 8px 12px;
}

.input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    outline: none;
    font-size: 14px;
    width: 100%;
}

.input-wrap .suffix {
    color: var(--text-secondary);
    font-size: 12px;
    margin-left: 8px;
}

.slider-wrap {
    padding: 8px 0;
}
.slider {
    width: 100%;
    accent-color: var(--primary-color, #f1c40f);
}

.btn-buy-order {
    background-color: #00d287;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}

.btn-sell-order {
    background-color: var(--danger-color, #f75565);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}