body { font-family: sans-serif; max-width: 500px; margin: 0 auto; background: #121212; color: #e0e0e0; padding: 0; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; }
.card { background: #1e1e1e; padding: 10px 1.2rem; border-radius: 12px; margin-bottom: 0.8rem; border: 1px solid #333; transition: all 0.3s ease; }
.header-row { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.5rem; cursor: pointer; min-height: 30px; }
h1 { font-size: 1.1rem; margin: 0; color: #00e5ff; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; }
.chevron { font-size: 0.8rem; color: #777; transition: transform 0.3s; display: inline-block; margin-left: 8px; vertical-align: middle; }
.card.collapsed .chevron { transform: rotate(-90deg); }
.card-body { overflow: hidden; max-height: 1000px; opacity: 1; transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease; margin-top: 0.5rem; border-top: 1px solid #333; padding-top: 1rem; }
.card.collapsed .card-body { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; border-top: none; }
#chart { width: 100%; height: 66px; background: #1a1a1a; margin: 0 0 0.6rem 0; border-bottom: 1px solid #333; overflow: hidden; display: block; }
#chart svg { display: block; }
.content-wrapper { padding: 0 0.5rem; padding-bottom: 20px; }
.flow-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 0.8rem; }
.flow-item { background: transparent; padding: 8px 2px; border-radius: 8px; text-align: center; border: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.accent-line { width: 30px; height: 3px; background: #444; border-radius: 2px; margin-top: 4px; }
.flow-ico { font-size: 1.1rem; }
.flow-val { font-size: 0.85rem; font-weight: bold; white-space: nowrap; }

.stat { font-size: 0.9rem; font-weight: bold; margin-left: 5px; display: inline-flex; align-items: center; transition: color 0.3s ease; }
.batt-container { display: flex; align-items: center; gap: 6px; flex-grow: 1; justify-content: flex-end; }
.batt-bar-bg { width: 60px; height: 10px; background: #333; border-radius: 5px; overflow: hidden; border: 1px solid #444; }
#batt_bar_fill { height: 100%; background: #00e676; width: 0%; transition: width 0.5s ease; }
.batt-text { font-size: 0.85rem; font-weight: bold; color: #E1BEE7; white-space: nowrap; }
#battery_soc { color: #E1BEE7; }

.price-text { font-size: 0.85rem; font-weight: bold; color: #E1BEE7; white-space: nowrap; margin-left: 0; }
.control-group { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; height: 32px; }
.input-wrap { display: flex; align-items: center; gap: 8px; color: #aaa; font-size: 0.9rem; }
input[type="number"], input[type="text"] { background: #2c2c2c; border: 1px solid #444; color: #fff; padding: 6px; border-radius: 4px; width: 70px; text-align: right; font-size: 16px; }

/* Custom Range Slider */
input[type="range"] { -webkit-appearance: none; width: 100%; background: transparent; margin: 8px 0; }
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #444; border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb { height: 18px; width: 18px; border-radius: 50%; background: #00e5ff; cursor: pointer; -webkit-appearance: none; margin-top: -7px; box-shadow: 0 0 8px rgba(0,229,255,0.5); }
input[type="range"]::-moz-range-track { width: 100%; height: 4px; cursor: pointer; background: #444; border-radius: 2px; }
input[type="range"]::-moz-range-thumb { height: 18px; width: 18px; border-radius: 50%; background: #00e5ff; cursor: pointer; border: none; box-shadow: 0 0 8px rgba(0,229,255,0.5); }

.switch { position: relative; width: 44px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #444; transition: .3s; border-radius: 22px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background: #00e676; }
input:checked + .slider.red { background: #ff5252; }
input:checked + .slider:before { transform: translateX(22px); }

.footer-action { text-align: center; margin-top: 0.5rem; height: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.btn { display: none; width: 50%; padding: 10px; background: #333; color: #00e676; border: 1px solid #00e676; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }
#status { font-weight: bold; font-size: 0.9rem; }
.spinner { width: 18px; height: 18px; border: 3px solid rgba(0, 229, 255, 0.3); border-top: 3px solid #00e5ff; border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- VIZ PANEL --- */
.viz-panel { width: 100%; aspect-ratio: 1 / 1; background: #000; border-radius: 8px; border: 1px solid #222; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.viz-label { position: absolute; bottom: 4px; right: 8px; font-family: monospace; font-size: 0.65rem; color: #555; pointer-events: none; letter-spacing: 1px; z-index: 100; text-transform: uppercase;}

.e8-node { filter: blur(0.4px); transition: fill 0.5s ease; }

/* --- THE COCYCLE WAVE (RIPPLES) --- */
.cocycle-ripple { fill: none; opacity: 0; transform-origin: center; }
@keyframes rippleExpand {
    0% { r: 4px; opacity: 0.8; stroke-width: 2px; }
    100% { r: 35px; opacity: 0; stroke-width: 0px; }
}
.e8-link { transition: stroke 0.3s ease, stroke-width 0.3s ease, stroke-dasharray 0.3s ease; }

.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(4px); }
.modal-content { background-color: #1a1a1a; margin: 20% auto; padding: 20px; border: 1px solid #333; border-radius: 12px; width: 85%; max-width: 400px; color: #e0e0e0; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.close-modal { color: #777; float: right; font-size: 24px; font-weight: bold; cursor: pointer; line-height: 20px; }
.close-modal:hover { color: #fff; }
.legend-list { list-style-type: none; padding: 0; margin-top: 15px; font-size: 0.85rem; line-height: 1.5; }
.legend-list li { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #2a2a2a; }
.legend-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

#ev_job_setup input { box-sizing: border-box; max-width: 100%; }

/* --- VIZ TABS (Scrollable Chip Bar) --- */
.viz-tabs { 
    display: flex; 
    background: #0a0a0a; 
    border-radius: 6px; 
    padding: 3px; 
    margin-bottom: 10px; 
    border: 1px solid #333; 
    overflow-x: auto; 
    scrollbar-width: none; 
    -ms-overflow-style: none; 
    gap: 4px;
}
.viz-tabs::-webkit-scrollbar { display: none; }

.viz-tab { 
    flex: 0 0 auto; 
    padding: 8px 12px; 
    background: transparent; 
    border: none; 
    color: #777; 
    font-size: 0.75rem; 
    font-weight: bold; 
    cursor: pointer; 
    border-radius: 4px; 
    transition: all 0.2s ease; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
}
.viz-tab.active { background: #2c2c2c; color: #00e5ff; box-shadow: 0 2px 4px rgba(0,0,0,0.5); }