/* ==================== DOM (DEPTH OF MARKET) ==================== */
.dom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
.dom-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.dom-symbol {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
}

.dom-summary {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.dom-stat {
    text-align: center;
}
.dom-stat-label {
    display: block;
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dom-stat-value {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
}
.dom-stat-value.bid { color: var(--buy); }
.dom-stat-value.ask { color: var(--sell); }

.dom-table-wrapper {
    flex: 1;
    overflow-y: auto;
}

.dom-table {
    width: 100%;
    border-collapse: collapse;
}
.dom-table th {
    position: sticky;
    top: 0;
    background: var(--bg-tertiary);
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    z-index: 1;
}
.dom-table th:first-child { text-align: right; }
.dom-table th:nth-child(2) { text-align: center; }
.dom-table th:last-child { text-align: left; }

.dom-table td {
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid rgba(48,54,61,0.2);
}
.dom-table tr:hover td {
    background: var(--bg-hover);
}

.dom-table td:first-child {
    text-align: right;
    color: var(--buy);
}
.dom-table td:nth-child(2) {
    text-align: center;
    font-weight: 600;
    color: var(--text-primary);
}
.dom-table td:last-child {
    text-align: left;
    color: var(--sell);
}

/* DOM Volume Bars */
.dom-vol-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
}
.dom-vol-bar.bid-bar {
    right: 0;
    background: var(--buy);
}
.dom-vol-bar.ask-bar {
    left: 0;
    background: var(--sell);
}

.dom-table td .vol-text {
    position: relative;
    z-index: 1;
}

/* DOM Price Highlight */
.dom-price-bid {
    background: rgba(0, 212, 170, 0.05);
}
.dom-price-ask {
    background: rgba(255, 73, 118, 0.05);
}
.dom-price-spread {
    background: var(--bg-tertiary);
}

/* Cluster / Absorption */
.dom-cluster {
    font-weight: 700;
    text-shadow: 0 0 4px currentColor;
}
.dom-absorption {
    animation: absorption-flash 0.5s ease;
}
@keyframes absorption-flash {
    0% { background: rgba(240, 180, 41, 0.3); }
    100% { background: transparent; }
}

/* DOM Actions */
.dom-actions {
    display: flex;
    gap: 4px;
    padding: 8px;
    border-top: 1px solid var(--border);
}
.dom-btn {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dom-btn.sell {
    background: rgba(255, 73, 118, 0.15);
    color: var(--sell);
    border: 1px solid rgba(255, 73, 118, 0.3);
}
.dom-btn.buy {
    background: rgba(0, 212, 170, 0.15);
    color: var(--buy);
    border: 1px solid rgba(0, 212, 170, 0.3);
}
.dom-btn.sell:hover {
    background: rgba(255, 73, 118, 0.3);
}
.dom-btn.buy:hover {
    background: rgba(0, 212, 170, 0.3);
}

/* ==================== TAPE (TIME & SALES) ==================== */
.tape-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.tape-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    transition: var(--transition);
}
.tape-clear:hover { color: var(--danger); }

.tape-filters {
    display: flex;
    padding: 6px 8px;
    gap: 4px;
    border-bottom: 1px solid var(--border);
}
.tape-filter {
    flex: 1;
    padding: 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.tape-filter:hover { color: var(--text-primary); }
.tape-filter.active {
    color: var(--accent);
    background: var(--accent-dim);
    border-color: var(--accent);
}

.tape-body {
    flex: 1;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 11px;
}

.tape-entry {
    display: flex;
    justify-content: space-between;
    padding: 3px 12px;
    border-bottom: 1px solid rgba(48,54,61,0.2);
    transition: background 0.1s;
}
.tape-entry:hover {
    background: var(--bg-hover);
}

.tape-time {
    color: var(--text-muted);
    font-size: 10px;
    min-width: 65px;
}
.tape-price {
    font-weight: 600;
    min-width: 80px;
    text-align: center;
}
.tape-vol {
    min-width: 50px;
    text-align: right;
    color: var(--text-secondary);
}

.tape-entry.buy .tape-price { color: var(--buy); }
.tape-entry.sell .tape-price { color: var(--sell); }
.tape-entry.large {
    background: rgba(240, 180, 41, 0.05);
    font-weight: 600;
}
.tape-entry.large .tape-vol {
    color: var(--warning);
}