:root {
    --bg: #0a0b0d;
    --card: rgba(20, 22, 26, 0.98);
    --border: rgba(255, 255, 255, 0.05);
    --green: #00ff96;
    --red: #ff4d4d;
    --yellow: #f1c40f;
    --blue: #3498db;
    --text: #e1e1e1;
    --text-dim: #888;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; width: 100%; }
body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; padding: 12px; overflow-x: hidden; width: 100%; }

header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; }
.logo-group { display: flex; flex-direction: column; }
.system-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; }
.logo-line { display: flex; align-items: center; gap: 8px; position: relative; }
.logo-text { font-weight: 800; letter-spacing: 1px; font-size: 1.2rem; }
.logo-icon { font-size: 1.3rem; }
.header-sub-row { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: #fff; font-family: 'JetBrains Mono'; margin-top: 4px; }
.header-clock { color: var(--yellow); font-weight: 800; }
.header-name { color: #3b82f6; font-weight: 800; }

.pulse-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 10px var(--green); margin-left: 5px; opacity: 0; transition: opacity 0.2s; }
.pulse-dot.active { opacity: 1; animation: pulse 1s infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }

.price-ticker { display: flex; gap: 20px; }
.ticker-box { display: flex; flex-direction: column; align-items: center; }
.ticker-label { font-size: 0.65rem; color: #666; font-weight: 800; }
.ticker-val { font-family: 'JetBrains Mono'; font-weight: 800; font-size: 1.2rem; }

.main-content { display: grid; grid-template-columns: 320px 1fr 300px; gap: 12px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 15px; }

.step-label-vibrant { font-size: 0.75rem; color: var(--yellow); font-weight: 900; margin-bottom: 10px; display: block; letter-spacing: 1px; }
.trend-vertical-list { display: flex; flex-direction: column; gap: 8px; }
.trend-row { display: flex; justify-content: space-between; font-family: 'JetBrains Mono'; font-weight: 800; font-size: 0.95rem; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 4px; }
.trend-row span:first-child { color: #aaa; font-size: 0.7rem; }

.force-bar-container { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; margin-top: 12px; display: flex; overflow: hidden; }
.force-bar-half { height: 100%; transition: width 0.5s ease; }
.force-bar-half.sell { background: var(--red); margin-left: auto; }
.force-bar-half.buy { background: var(--green); }

.raid-list { display: flex; flex-direction: column; gap: 6px; }
.raid-item { font-family: 'JetBrains Mono'; font-size: 1rem; font-weight: 800; border-bottom: 1px solid rgba(255,255,255,0.03); }
.raid-item.e10 { color: var(--green); }
.raid-item.e21 { color: var(--yellow); }
.raid-item.e63 { color: var(--blue); }
.raid-item.e200 { color: var(--red); }

.pivot-box { padding: 8px; border-radius: 6px; font-family: 'JetBrains Mono'; font-weight: 800; font-size: 0.85rem; }
.pivot-box.support { background: rgba(0,255,150,0.05); border: 1px solid rgba(0,255,150,0.1); color: var(--green); }
.pivot-box.resistance { background: rgba(255,77,77,0.05); border: 1px solid rgba(255,77,77,0.1); color: var(--red); }
.pivot-label { font-size: 0.6rem; color: #666; margin-bottom: 4px; }

.health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.health-item { font-family: 'JetBrains Mono'; font-size: 0.9rem; font-weight: 800; color: #aaa; background: rgba(255,255,255,0.03); padding: 6px; border-radius: 4px; }
.health-item span { color: #fff; }
.ai-container { grid-column: span 2; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border); transition: all 0.3s; }
.ai-glow-green { box-shadow: 0 0 10px var(--green); border-color: var(--green); color: var(--green) !important; }
.ai-glow-red { box-shadow: 0 0 10px var(--red); border-color: var(--red); color: var(--red) !important; }
.direction-badge { font-size: 0.75rem; padding: 2px 6px; border-radius: 3px; font-weight: 700; margin-left: 6px; }
.direction-call { background: var(--green); color: #000; }
.direction-put { background: var(--red); color: #fff; }
.direction-trap { background: #ff9800; color: #000; }
.direction-neutral { background: #666; color: #fff; }

.active-trade-focus { min-height: 280px; position: relative; }
.master-signal-container { position: absolute; top: 12px; right: 12px; }
.signal-icon-master { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.m-bar { width: 5px; background: #222; border-radius: 1px; transition: 0.3s; }
.m-bar:nth-child(1) { height: 6px; }
.m-bar:nth-child(2) { height: 10px; }
.m-bar:nth-child(3) { height: 14px; }
.m-bar:nth-child(4) { height: 18px; }
.m-bar:nth-child(5) { height: 22px; }
.m-bar.active-green { background: var(--green); box-shadow: 0 0 8px var(--green); }
.m-bar.active-red { background: var(--red); box-shadow: 0 0 8px var(--red); }

.pnl-massive { font-size: 4.5rem; font-weight: 900; font-family: 'JetBrains Mono'; text-align: center; margin: 15px 0; }
.monologue-feed { text-align: center; margin-bottom: 20px; padding: 8px; background: rgba(255,255,255,0.02); color: var(--yellow); font-family: 'JetBrains Mono'; font-weight: 700; text-transform: uppercase; }

.pos-grid-large { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.pos-box-lg { background: rgba(255,255,255,0.03); padding: 12px; border-radius: 8px; text-align: center; font-size: 0.65rem; color: #666; font-weight: 800; }
.pos-box-lg span { display: block; font-size: 1.1rem; color: #fff; margin-top: 4px; }

.stats-bar-centered { display: flex; justify-content: space-between; padding: 12px 25px !important; background: rgba(255,255,255,0.01) !important; margin-top: -5px; }
.bar-val-lg { font-size: 1.1rem; font-weight: 800; font-family: 'JetBrains Mono'; }

.radar-view { text-align: center; padding: 20px 0; }
.ping { width: 40px; height: 40px; border: 2px solid var(--green); border-radius: 50%; margin: 0 auto 10px; animation: ping 2s infinite; }
@keyframes ping { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }

.brain-display { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 25px; }
.brain-card { background: rgba(255,255,255,0.03); border: 2px solid var(--border); border-radius: 8px; padding: 15px; text-align: center; transition: all 0.3s; }
.brain-card.ready { border-color: var(--green); box-shadow: 0 0 15px rgba(0,255,0,0.3); }
.brain-header { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; }
.brain-icon { font-size: 1.5rem; }
.brain-name { font-size: 0.8rem; font-weight: 800; color: #888; }
.brain-prob { font-size: 2.5rem; font-weight: 800; color: #fff; margin: 10px 0; }
.brain-direction { font-size: 1rem; font-weight: 700; padding: 4px 12px; border-radius: 4px; display: inline-block; margin: 8px 0; }
.brain-direction.call { background: var(--green); color: #000; }
.brain-direction.put { background: var(--red); color: #fff; }
.brain-direction.trap { background: #ff9800; color: #000; }
.brain-direction.neutral { background: #444; color: #888; }
.brain-status { font-size: 0.75rem; color: #666; margin-top: 8px; }

.history-card-compact { margin-top: 10px; padding: 0 !important; height: 350px; overflow: hidden; }
.table-scroll { height: 100%; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th { text-align: left; padding: 12px; background: #1a1c22; color: #555; font-size: 0.65rem; text-transform: uppercase; position: sticky; top: 0; z-index: 10; }
.sticky-total { background: rgba(241, 196, 15, 0.1) !important; position: sticky; top: 38px; z-index: 9; font-weight: 800; }
td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.01); font-family: 'JetBrains Mono'; }

.log-box-compact { height: 200px; overflow-y: auto; font-size: 0.7rem; font-family: 'JetBrains Mono'; line-height: 1.4; padding: 10px; }
.log-item { margin-bottom: 4px; border-left: 2px solid var(--blue); padding-left: 8px; }

.config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.input-field-sm { width: 100%; background: #1a1a1a; border: 1px solid var(--border); color: #fff; padding: 8px; border-radius: 5px; font-weight: 700; }

.btn { border: none; border-radius: 6px; font-weight: 800; cursor: pointer; padding: 8px 15px; font-size: 0.75rem; transition: 0.2s; }
.btn-green { background: var(--green); color: #000; }
.btn-red { background: var(--red); color: #fff; }
.btn-yellow { background: var(--yellow); color: #000; }
.btn-save { background: var(--blue); color: #fff; padding: 10px; border-radius: 6px; border: none; width: 100%; font-weight: 800; margin-top: 10px; }

.text-green { color: var(--green) !important; }
.text-red { color: var(--red) !important; }
.text-blue { color: var(--blue) !important; }
.text-yellow { color: var(--yellow) !important; }
.text-gray { color: #666 !important; }
.badge { padding: 3px 10px; border-radius: 4px; font-weight: 900; font-size: 0.65rem; }
.badge.call { background: var(--green); color: #000; }
.badge.put { background: var(--red); color: #fff; }
.hidden { display: none !important; }

@media (max-width: 768px) {
    /* Remove body padding on mobile */
    body {
        padding: 0;
        margin: 0;
        overflow-x: hidden;
    }
    
    /* Container full width */
    .app-container {
        width: 100vw;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Stack all cards vertically */
    .main-content { 
        grid-template-columns: 1fr; 
        gap: 0;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    
    /* Header full width */
    header { 
        flex-direction: column; 
        gap: 10px;
        padding: 10px;
        margin: 0;
        border-radius: 0;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* All cards full width, no border radius */
    .card {
        padding: 10px;
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        width: 100%;
        box-sizing: border-box;
    }
    
    .price-ticker { 
        flex-direction: column; 
        gap: 8px;
        width: 100%;
    }
    
    .ticker-box {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding: 5px 0;
        border-bottom: 1px solid var(--border);
    }
    
    /* System controls */
    .system-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: center;
        width: 100%;
    }
    
    .system-controls button {
        flex: 1;
        min-width: 70px;
    }
    
    /* Brain cards */
    .brain-display {
        grid-template-columns: 1fr !important;
        gap: 10px;
        width: 100%;
    }
    
    .brain-card {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Position card */
    .pnl-massive { 
        font-size: 2.5rem; 
    }
    
    .pos-grid-large {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }
    
    /* Stats bar */
    .stats-bar-centered {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    
    .bar-item {
        width: 100%;
        text-align: center;
        padding: 8px;
        border-bottom: 1px solid var(--border);
        box-sizing: border-box;
    }
    
    /* Config grid */
    .config-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
    }
    
    /* Table responsive */
    .table-container {
        overflow-x: auto;
        width: 100%;
    }
    
    table {
        font-size: 0.7rem;
        width: 100%;
    }
    
    td, th {
        padding: 6px 8px;
    }
    
    /* Logo text smaller */
    .logo-text {
        font-size: 1rem;
    }
    
    /* Health grid */
    .health-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    
    /* Panel left/right full width */
    .panel-left, .panel-right {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Force bar container */
    .force-bar-container {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Raid list */
    .raid-list {
        width: 100%;
    }
    
    /* All step elements */
    .step, .highlight-step {
        width: 100%;
        box-sizing: border-box;
    }
    
    .step-body {
        width: 100%;
    }
}


/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    transition: .3s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--green);
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* Status Indicator Dots */
.status-dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; display: inline-block; }
.status-dot.running { background: var(--green); box-shadow: 0 0 10px var(--green); }
.status-dot.paused { background: var(--yellow); box-shadow: 0 0 10px var(--yellow); }
.status-dot.stopped { background: var(--red); box-shadow: 0 0 5px var(--red); }

/* RESTORE SIDE-BY-SIDE SCORES IN MIDDLE CARD */
.hunting-checklist {
    display: flex !important;
    justify-content: center;
    gap: 15px;
    width: 100%;
    margin: 15px auto 0 auto;
}

.gate-item {
    flex: 1;
    min-width: 200px;
    border-radius: 8px;
    text-align: center;
}

/* 📱 MOBILE RESPONSIVE ENGINE (Zerodha Only) */
@media screen and (max-width: 768px) {
    body { padding: 5px; }
    .main-content { flex-direction: column !important; gap: 15px; }
    .panel-left, .panel-center, .panel-right { width: 100% !important; max-width: 100% !important; }
    .pnl-massive { font-size: 42px !important; }
    .hunting-checklist { gap: 8px !important; }
    .gate-item { min-width: 45% !important; padding: 10px !important; }
    #hunt-call-score, #hunt-put-score { font-size: 32px !important; }
    header { flex-direction: column !important; height: auto !important; gap: 10px; padding: 10px !important; }
    .header-left, .header-right { width: 100%; justify-content: center !important; text-align: center; }
    .stats-bar-centered { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
}