body { font-family: system-ui, sans-serif; background: #f4f4f9; color: #333; margin: 0; padding: 20px; }
.container { max-width: 1100px; margin: 0 auto; }
.header-row { display: flex; justify-content: space-between; align-items: center; }
.panel { background: #fff; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

button { padding: 10px 15px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
button:hover { background: #0056b3; }
.btn-secondary { background: #6c757d; }
.grid-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 15px; }
label { display: flex; flex-direction: column; font-weight: bold; font-size: 0.9em; }
input { margin-top: 5px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.hint { font-size: 0.8em; color: #666; font-weight: normal; margin-top: 2px; }
.error { color: #d9534f; font-weight: bold; }
.hidden { display: none !important; }
.disabled { opacity: 0.5; pointer-events: none; }

.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
.modal.show { display: flex; }
.modal-content { background: white; padding: 30px; border-radius: 8px; max-width: 700px; width: 100%; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }

/* Number Line */
.number-line-container { position: relative; height: 120px; margin-top: 20px; }
.line-axis { position: absolute; top: 50px; left: 5%; right: 5%; height: 4px; background: #ccc; border-radius: 2px; }
/* Update existing nl-marker to guarantee it sits on top */
.nl-marker {
    position: absolute; top: 0; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center;
    transition: filter 0.3s, opacity 0.3s;
    z-index: 10; /* Added z-index */
}

/* New classes for static background price annotations */
.nl-grid-tick {
    position: absolute; top: 35px; /* Sits just above the line */
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center;
    z-index: 0; /* Sits behind order markers */
    color: #999;
    pointer-events: none;
}
.nl-grid-tick .tick-label { font-size: 0.65em; margin-bottom: 2px; }
.nl-grid-tick .tick-mark { width: 1px; height: 10px; background: #ccc; }
.nl-marker.pending { filter: grayscale(100%); opacity: 0.6; }
.nl-marker .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 4px rgba(0,0,0,0.4); margin-bottom: 5px; }
.nl-marker .label { font-size: 0.75em; font-weight: bold; background: #333; color: #fff; padding: 2px 5px; border-radius: 3px; white-space: nowrap; }
.nl-marker .connector { width: 2px; height: 25px; background: #999; }
.nl-regular .dot { background: #0d47a1; }
.nl-search .dot { background: #e65100; }
.nl-annotation { position: absolute; top: 65px; transform: translateX(-50%); font-size: 0.75em; text-align: center; color: #555; }
.nl-annotation.cfg { color: #0d47a1; font-weight: bold; }
.nl-annotation.act { color: #e65100; font-weight: bold; }

/* Panels and Animations */
.state-panels { display: flex; gap: 20px; align-items: flex-start; transition: all 0.5s; }
.state-panel { flex: 1; transition: all 0.5s ease; overflow: hidden; opacity: 1; max-height: 500px; }
.state-panel.collapsed { flex: 0.0001; max-height: 0; padding: 0; opacity: 0; margin: 0; border: none; }

.tracker-sides { display: flex; justify-content: space-around; margin-top: 15px; }
.tracker-side { text-align: center; }
.slots-container { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.slot { width: 30px; height: 30px; border-radius: 4px; border: 2px solid #ccc; display: flex; align-items: center; justify-content: center; font-size: 0.75em; font-weight: bold; }
.slot.unseen { background: #f0f0f0; color: #aaa; }
.slot.outside { background: #ffebee; border-color: #d32f2f; color: #d32f2f; }
.slot.within { background: #e8f5e9; border-color: #388e3c; color: #388e3c; }

/* Search Slots */
.search-slots-container { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.s-slot { border: 1px solid #ccc; border-radius: 4px; padding: 8px; background: #fafafa; font-size: 0.85em; display: flex; justify-content: space-between; }
.s-slot.awaited { border-color: #ff9800; background: #fff8e1; }
.s-slot.resend { border-color: #f44336; background: #ffebee; }
.s-slot.success { border-color: #4caf50; background: #e8f5e9; }

/* Order Queue */
.queue-container { display: flex; gap: 10px; min-height: 80px; overflow-x: auto; padding-bottom: 10px; scroll-behavior: smooth; }
.order-card { flex: 0 0 auto; padding: 10px; border-radius: 6px; font-size: 0.9em; min-width: 150px; border: 1px solid rgba(0,0,0,0.1); transition: opacity 0.3s; }
.order-regular { background: #e3f2fd; color: #0d47a1; }
.order-search { background: #fff3e0; color: #e65100; }
.order-completed { opacity: 0.4; background: #e0e0e0; color: #555; border-style: dashed; }