body { 
    background-color: #0e1629; 
    color: #f8fafc; 
    margin: 0; 
    padding: 0; 
    font-family: 'Inter', 'Pretendard', sans-serif; 
    overflow-y: auto; 
    user-select: none; 
}
.short_term_volume {
    background: #1a1f3a;
    border: 1px solid #2a3458;
    border-radius: 5px;
    padding: 15px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}
.short_term_volume:hover {
    border: 1px solid #3b82f6;
    box-shadow: 10px 10px 20px rgba(59, 130, 246, 0.3);
    cursor: pointer;
}
#chart-container { 
    position: relative; 
    width: 100%; 
    height: 280px; 
    border: 1px solid #2a3458;
    border-bottom: 0px;
    border-bottom: 2px solid #1e293b; 
    background: #020617; 
    overflow: hidden;
}
canvas { 
    image-rendering: auto; 
    display: block; 
    cursor: grab; 
    width: 100%; 
    height: 100%; 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}
canvas:active { cursor: grabbing; }
.info-overlay { 
    position: absolute; top: 15px; left: 15px; z-index: 50; 
    background: rgba(15, 23, 42, 0.9); padding: 18px; border-radius: 4px;
    border: 1px solid #334155; pointer-events: auto; backdrop-filter: blur(12px);
    cursor: move; width: 340px; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.5);
}
#depth-bar { 
    position: absolute; right: 0; top: 0; width: 45px; height: 280px; 
    z-index: 10; display: flex; flex-direction: column; 
    border-left: 1px solid #1e293b; background: #020617; 
}
.depth-label { 
    position: absolute; width: 100%; text-align: center; 
    font-size: 9px; font-weight: bold; color: white; 
    text-shadow: 1px 1px 2px black; z-index: 11; 
}
#bid-label { top: 5px; }
#ask-label { bottom: 5px; }
.status-bar { position: absolute; bottom: 10px; right: 55px; font-size: 10px; color: #475569; display: flex; gap: 15px; z-index: 20; }
.btn-tool { background: #1e293b; color: #94a3b8; padding: 2px 8px; border-radius: 2px; font-size: 10px; border: 1px solid #475569; transition: all 0.2s; cursor: pointer; }
.btn-tool:hover { background: #334155; color: #f8fafc; }
#ratio-monitor, #score-monitor { width: 100%; height: 25px; background: #010409; display: flex; align-items: center; padding: 0 10px; border-bottom: 1px solid #1e293b; }
#ratio-monitor {
    border: 1px solid #2a3458;
    border-top: 0px;
    border-bottom: 0px;
}
#score-monitor {
    border: 1px solid #2a3458;
    border-top: 0px;
}

.ratio-bar-container, .score-bar-container { flex: 1; height: 4px; background: #111827; border-radius: 10px; overflow: hidden; position: relative; border: 1px solid #1e293b; margin: 0 10px; }
#buy-ratio-fill { height: 100%; background: #f43f5e; transition: width 0.5s ease-out; }
#sell-ratio-fill { height: 100%; background: #3b82f6; transition: width 0.5s ease-out; }
#score-fill { position: absolute; left: 50%; height: 100%; width: 0%; transition: all 0.4s cubic-bezier(0.1, 0.7, 1.0, 0.1); }
.score-text-block { font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.4; border-bottom: 1px solid #1e293b; padding-bottom: 8px; margin-bottom: 8px; }