:root {
        --bg-color: #0f172a;
        --card-bg: #040b1b;
        --border-color: #2a3458;
        --accent-blue: #38bdf8;
        --ask-color: #ff6b6b;
        --bid-color: #a7e665;
        --text-main: #f8fafc;
        --text-muted: #94a3b8;
    }
    body { 
        background: var(--bg-color); 
        color: var(--text-main); 
        font-family: 'Inter', sans-serif; 
        margin: 0; 
        box-sizing: border-box; 
        min-height: 100vh; 
        overflow-x: hidden; 
    }

    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .reveal { animation: fadeInUp 0.8s cubic-bezier(0.2,0.8,0.2,1) forwards; opacity: 0; margin: 40px; }

    h2 { font-weight: 900; font-size: 28px; letter-spacing: -0.05em; margin-bottom: 25px; display: flex; align-items: center; gap: 12px; }
    h2 i { color: var(--accent-blue); }

    .top-bar {
        background: var(--card-bg); padding: 20px 30px; border-radius: 5px;
        border: 1px solid var(--border-color); margin-bottom: 20px;
        display: flex; justify-content: space-between; align-items: center;
        box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    }
    .selector-group { display: flex; align-items: center; gap: 20px; }
    .selector-item  { display: flex; flex-direction: column; gap: 5px; }
    .selector-label { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }

    select {
        padding: 8px 14px; font-size: 13px; font-weight: 700;
        background: #1e293b; color: #fff; border: 1px solid var(--border-color);
        border-radius: 4px; outline: none; cursor: pointer;
    }

    .summary-group { display: flex; gap: 10px; }
    .sumBox {
        background: rgba(56,189,248,0.1); color: var(--accent-blue);
        padding: 10px 18px; border-radius: 5px; font-weight: 800; font-size: 13px;
        border: 1px solid rgba(56,189,248,0.2); display: flex; align-items: center; gap: 8px;
    }
    .sumBox.bid-style { color: var(--bid-color); background: rgba(167,230,101,0.1); border-color: rgba(167,230,101,0.2); }

    #wrap { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border-color); border-radius: 5px; overflow: hidden; background: var(--card-bg); box-shadow: 0 4px 12px rgba(0,0,0,0.7); }
    .box { width: 100%; }

    table { width: 100%; border-collapse: collapse; font-size: 14px; }
    th { background: rgba(255,255,255,0.03); color: var(--text-muted); font-weight: 700; text-transform: uppercase; font-size: 11px; padding: 12px; border-bottom: 1px solid var(--border-color); }
    td { padding: 8px 15px; border-bottom: 1px solid rgba(255,255,255,0.03); transition: all 0.3s ease; }

    .point-ask { color: #ff9f9f !important; text-shadow: 0 0 10px var(--ask-color); font-weight: 900 !important; }
    .point-bid { color: #d4ffaa !important; text-shadow: 0 0 10px var(--bid-color); font-weight: 900 !important; }

    @keyframes rowImpact {
        0%   { filter: brightness(1); }
        50%  { filter: brightness(1.5); background: rgba(255,255,255,0.05); }
        100% { filter: brightness(1); }
    }
    .impact { animation: rowImpact 0.4s ease-out; }

    .price { font-family: 'JetBrains Mono', monospace; font-weight: 800; text-align: center; }
    .price small { font-weight: 500; color: var(--text-muted); font-size: 11px; }

    .barWrap { height: 18px; background: #000; border-radius: 4px; position: relative; overflow: hidden; }
    .bar { height: 100%; transition: width 0.1s ease; }
    .bar.ask { background: linear-gradient(90deg, #991b1b, var(--ask-color)); }
    .bar.bid { background: linear-gradient(90deg, #166534, var(--bid-color)); }
    .qtyLabel { position: absolute; right: 8px; top: 0; height: 100%; font-size: 11px; line-height: 18px; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #fff; }

    .flash-up   { background: rgba(0,255,127,0.1) !important; }
    .flash-down { background: rgba(255,50,50,0.1) !important; }