:root{
--bg:#0b0e14; --panel:#121826; --panel2:#121826; --text:#e6e9f2; --muted:#9aa3b2;
--line:rgba(255,255,255,.08);
--accent:#f39c12; --red:#e74c3c;
--accent-rgb:243,156,18;
--danger-rgb:231,76,60;
--chip:#1a2233;
--surface-1:rgba(255,255,255,.04);
--surface-2:rgba(255,255,255,.07);
--surface-3:rgba(255,255,255,.07);
--input-bg:rgba(255,255,255,.05);
--input-bg-hover:rgba(255,255,255,.05);
--input-border:rgba(255,255,255,.12);
--radius-sm:6px;
--radius-md:10px;
--radius-lg:14px;
--radius-xl:16px;
--control-h:36px;
--control-h-sm:32px;
--pad-sm:8px;
--pad-md:12px;
--ring:0 0 0 2px rgba(var(--accent-rgb),.28);
--shadow-md:0 8px 24px rgba(0,0,0,.4);
--shadow-lg:0 20px 60px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0; height:100%; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text);}
body{display:flex; flex-direction:column;}
header{padding:6px 16px 0px 16px; display:flex; gap:12px; align-items:center; position:sticky; top:0; background:rgba(11,14,20,.9); backdrop-filter: blur(6px); z-index:5;}
header h1{font-size:16px; margin:0; letter-spacing:.4px;}
.statusbar{margin-left:auto; display:flex; gap:10px; align-items:center;}
.pill{padding:6px 10px; border-radius:999px; background:var(--chip); border:1px solid var(--line); font-size:12px; color:var(--muted);}
.dot{width:8px;height:8px;border-radius:999px;display:inline-block;margin-right:6px;vertical-align:middle;}
.dot.red{background:var(--red)}

.grid{
display:grid;
grid-template-columns: repeat(3, 1fr) 1.15fr; /* 3 bikes + global */
gap:12px;
padding:6px;
flex:1;
min-height:0;
overflow:hidden;
position:relative;
}
.resizeHandle{
position:absolute;
top:0;
bottom:0;
width:4px;
cursor:col-resize;
background:transparent;
transition:background .2s;
z-index:10;
}
.resizeHandle:hover{
background:rgba(var(--accent-rgb),.5);
}
.resizeHandle.dragging{
background:rgba(var(--accent-rgb),.8);
}
.card{
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius-lg);
overflow:hidden;
display:flex;
flex-direction:column;
min-height:0;
}
.card .hd{
padding:6px 6px;
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
gap:5px;
}
.bikeTitle{font-weight:650}
.sub{color:var(--muted); font-size:12px}
.spacer{flex:1}
.btn{
appearance:none;
border:1px solid var(--line);
background:var(--chip);
color:var(--text);
padding:var(--pad-sm) 10px;
border-radius:var(--radius-sm);
cursor:pointer;
font-weight:600;
font-size:11px;
height:var(--control-h);
display:flex;
align-items:center;
justify-content:center;
transition:filter .12s ease,transform .1s ease,background .15s ease,border-color .15s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.small{padding:6px 8px; border-radius:var(--radius-sm); font-size:12px; font-weight:650; height:var(--control-h-sm);}
.btn:focus-visible{outline:none; box-shadow:var(--ring); border-color:rgba(var(--accent-rgb),.45);}

/* Button variants: normal, highlight, danger */
.btn-normal{background:var(--chip); border-color:var(--line); color:var(--text);}
.btn-highlight{
background:rgba(var(--accent-rgb),.14);
border-color:rgba(var(--accent-rgb),.55);
color:#ffd8a8;
}
.btn-highlight:hover{background:rgba(var(--accent-rgb),.22);}
.btn-danger{
background:rgba(var(--danger-rgb),.12);
border-color:rgba(var(--danger-rgb),.45);
color:rgba(255,189,189,1);
}
.btn-danger:hover{background:rgba(var(--danger-rgb),.2);}

/* Modal overlay */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:3000; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); animation:fadeIn .2s ease-out; }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes slideUp { from { transform:translateY(20px); opacity:0 } to { transform:translateY(0); opacity:1 } }
.modal-box { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-xl); padding:28px 24px; width:340px; max-width:95vw; box-shadow:var(--shadow-lg); animation:slideUp .3s ease-out; }
.modal-box h2 { margin:0 0 8px; font-size:18px; }
.modal-box .subtitle { color:var(--muted); font-size:13px; margin:0 0 20px; line-height:1.4; }
.modal-input-group { margin-bottom:14px; }
.modal-input-group label { display:block; font-size:11px; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; font-weight:600; }
.modal-input { width:100%; padding:10px 12px; background:var(--input-bg); border:1px solid var(--input-border); border-radius:10px; color:var(--text); font-size:14px; outline:none; transition:all .2s; }
.modal-input:focus { border-color:rgba(var(--accent-rgb),.4); background:var(--input-bg-hover); }
.modal-error { color:var(--red); font-size:12px; margin-top:12px; padding:10px 12px; background:rgba(231,76,60,.1); border-radius:8px; display:none; }
.modal-actions { display:flex; gap:10px; margin-top:20px; }
.modal-actions .btn { flex:1; }

/* Bike top row layout */
.bikeTop{
padding:6px 6px;
align-items:center;
}
.rssiBox{
height:10px; background:var(--surface-2); border:1px solid var(--line);
border-radius:999px; overflow:hidden;
}
.rssiFill{height:100%; width:0%;}
.rssiTxt{font-size:12px; color:var(--muted); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.metrics{
padding:2px;
gap:2px;
display:grid;
grid-template-columns: 1fr 1fr 1fr;
}
.metric{
container-type:inline-size;
background:var(--surface-1);
border:0;
border-radius:0;
padding:8px;
min-width:0;
min-height:60px;
display:flex;
flex-direction:column;
justify-content:center;
}
.hd .metric{ flex:1; }
.metric .k{font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden;}
.metric .v{
font-size:16px; font-weight:700; margin-top:4px;
overflow:hidden; white-space:nowrap;
font-variant-numeric:tabular-nums;
}
@container (max-width:60px){.metric .v{font-size:12px;}}

/* Driver list */
.drivers{
border-top:1px solid var(--line);
flex:1;
display:flex;
flex-direction:column;
overflow:hidden;
min-height:0;
}
.driversHd{
  padding:6px 10px;
  background:var(--surface-2);

  display:flex; gap:8px; align-items:center;
}
select, input[type="number"]{
background:var(--input-bg); color:var(--text);
border:1px solid var(--input-border); border-radius:var(--radius-md); padding:8px 10px;
outline:none;
}
select:focus-visible,
input[type="number"]:focus-visible,
.panel-input:focus-visible,
.panel-textarea:focus-visible,
.driversInput:focus-visible,
input.driversNumberInput:focus-visible,
.bike-config-row input[type="text"]:focus-visible,
.modal-input:focus-visible{
outline:none;
box-shadow:var(--ring);
border-color:rgba(var(--accent-rgb),.45);
}
.scroll{
flex:1;
overflow:auto;
min-height:0;
}
.driversBody{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
}
.driversPane{
  min-height:0;
  border:none;
  border-radius:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.waitingPane{flex:0 0 40%; margin-bottom:6px;}
.historyPane{flex:0 0 60%;}
.waitingScroll,
.historyScroll{padding:0;}
.queueStack{
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.historyEmpty{
  font-size:12px;
  color:var(--muted);
  opacity:.8;
  padding:10px;
}
.item{
background:var(--surface-2);
border-radius:var(--radius-sm);
padding:12px;
margin: 6px 6px 0 6px;
display:flex;
gap:6px;
align-items:center;
user-select:none;
transition:all .15s ease;
height:50px;
}
.item:hover{
background:var(--surface-3);
border-color:rgba(255,255,255,.12);
}
.item.addWaiting{
  border:1px solid rgba(var(--accent-rgb),.18);
}
.item.addWaiting .name{
  display:flex;
  align-items:center;
}
.addWaitNameInput{
  width:100%;
  background:transparent;
  color:var(--text);
  border:1px solid transparent;
  border-radius:8px;
  padding:4px 6px;
  font-size:14px;
  font-weight:700;
  outline:none;
}
.addWaitNameInput:hover{
  border-color:var(--input-border);
  background:var(--surface-2);
}
.addWaitNameInput:focus{
  border-color:rgba(var(--accent-rgb),.35);
  background:var(--surface-3);
}
.addWaitLapsInput{
  width:38px;
}
/* ---- Drag ---- */
.item.dragging{opacity:.15;transform:scale(.96);border-style:dashed;transition:opacity .1s,transform .1s;}

/* ---- Queue item delete-exit animation ---- */
@keyframes itemExit{
  0%  {opacity:1;transform:translateX(0) scale(1);   max-height:68px;margin:6px 6px;padding:12px;border-width:1px}
  40% {opacity:.4;transform:translateX(8px) scale(.97)}
  100%{opacity:0;transform:translateX(18px) scale(.94);max-height:0;margin:0 6px;padding:0 12px;border-width:0}
}
.item.item-exit{
  animation:itemExit .22s ease forwards;
  pointer-events:none;
  overflow:hidden;
}

/* ---- Number slot: swap to delete button on hover ---- */
.numWrap{
  position:relative;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
}
.numWrap .num{
  transition:opacity .15s;
}
.item.pos:hover .numWrap .num{opacity:0;}
.item.pos .itemDeleteBtn{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;height:100%;
  border-radius:8px;
  border:1px solid rgba(231,76,60,.45);
  background:rgba(231,76,60,.0);
  color:rgba(231,76,60,.75);
  font-size:13px;
  cursor:pointer;
  opacity:0;
  transition:opacity .15s,background .15s,color .15s,transform .1s;
}
.item.pos:hover .itemDeleteBtn{opacity:1;}
.itemDeleteBtn:hover{
  background:rgba(231,76,60,.18);
  border-color:rgba(231,76,60,.8);
  color:rgba(231,76,60,1);
  transform:scale(1.1);
}
.itemDeleteBtn:active{transform:scale(.9);}

.item.pos:hover .num{filter:brightness(1.15)}
.item.mid:hover .num{filter:brightness(1.12)}
.num{
font-weight:600;
text-align:center;
border-radius:12px;
padding:0px;
background:transparent;
border:none;
flex: 0 0 auto;
font-size:24px;
color:var(--text);
}
.itemInfo{
flex: 1 1 auto;
min-width:0;
container-type:inline-size;
}
@container (max-width:100px){
.meta .meta-prefix{
    display:none;
}
}
.name{font-weight:700; font-size:14px;}
.meta{font-size:12px; color:var(--muted); margin-top:2px}
.itemRightSection{
flex: 0 0 auto;
display:flex;
gap:0px;
align-items:center;
justify-content:flex-end;
}
.lapTimeDisplay{
font-size:12px; 
color:var(--muted); 
min-width:50px;
text-align:right;
}
.hl{
background: rgba(var(--accent-rgb),.08);
z-index:1;
color:var(--accent) !important;
}
.lapsInput{
width:30px;
background:transparent !important;
color:var(--text);
border: 1px solid transparent !important;
padding:5px 5px 5px 2px !important;
font-weight:700;
font-size:18px; 
text-align:left;
transition:all .15s ease;
}
.lapsInput:hover{
border: 1px solid var(--input-border) !important;
background:var(--surface-2) !important;
}
.lapsInput:focus{
border: 1px solid rgba(var(--accent-rgb),.35) !important;
background:var(--surface-3) !important;
}

/* Hide spinner arrows */
.lapsInput::-webkit-outer-spin-button,
.lapsInput::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.smallTxt{font-size:14px; color:var(--muted)}

/* History section */
.historySection{padding:4px 0;}

/* Global column */
.globalBody{
/* padding:12px; */
display:flex;
flex-direction:column;
flex:1;
min-height:0;
gap:12px;
}
.section{
flex:1;
min-height:0;
overflow:auto;
display:flex;
flex-direction:column;
}
.section h3{margin:0 0 8px 0; font-size:13px; color:var(--muted); font-weight:700; letter-spacing:.2px;}
#map{flex:1; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); cursor:pointer;}
#lapChart{width:100%; height:100%; background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-lg); padding:8px; cursor:pointer;}

/* Modal/Panel Overlay */
.panelOverlay{
position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.7);
z-index:1000; display:flex; align-items:center; justify-content:center;
opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s;
}
.panelOverlay.active{opacity:1; visibility:visible;}

/* Panel Container */
.panel{
background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-xl);
width:95vw; height:95vh; overflow:hidden; display:flex; flex-direction:column;
box-shadow:var(--shadow-lg);
animation:panelSlideIn .3s ease-out;
}
@keyframes panelSlideIn{from{opacity:0; transform:scale(.95)} to{opacity:1; transform:scale(1)}}

.panelHeader{
display:flex; justify-content:space-between; align-items:center;
padding:16px; border-bottom:1px solid var(--line);
}
.panelHeader h2{margin:0; font-size:18px; font-weight:700;}
.panelClose{
appearance:none; background:none; border:none; color:var(--text);
cursor:pointer; font-size:24px; padding:0; width:32px; height:32px;
display:flex; align-items:center; justify-content:center;
border-radius:8px; transition:background .2s;
}
.panelClose:hover{background:rgba(255,255,255,.1)}

.panelBody{
flex:1; overflow:auto; padding:20px 24px; min-height:0;
}

/* Collapsible debug sections */
details.settings-details{margin-top:4px;}
details.settings-details summary{
cursor:pointer; font-size:12px; color:var(--muted); user-select:none;
padding:6px 0; list-style:none; display:flex; align-items:center; gap:6px;
}
details.settings-details summary::-webkit-details-marker{display:none;}
details.settings-details summary::before{content:'▶'; font-size:9px; transition:transform .2s;}
details.settings-details[open] summary::before{transform:rotate(90deg);}
details.settings-details summary:hover{color:var(--text);}

/* Clickable elements */
.debugItem{background:var(--surface-1); border:1px solid var(--line); border-radius:12px; padding:12px;}
.debugLabel{font-size:11px; color:var(--muted); margin-bottom:6px;}
.debugValue{font-size:14px; font-weight:700; font-family:monospace; word-break:break-all;}

/* Cyclist stats panel */
.cyclistStat{display:flex; justify-content:space-between; align-items:center; 
padding:10px 0; border-bottom:1px solid var(--line);}
.cyclistStat:last-child{border-bottom:none;}
.cyclistStatLabel{color:var(--muted); font-size:13px;}
.cyclistStatValue{font-weight:700; font-size:15px; font-family:monospace;}

/* Timer elements */
.timer{font-variant-numeric:tabular-nums;}

/* Health status styles */
.healthStatus{
display:flex; gap:8px; align-items:center; margin:0 12px;
}
.healthIndicator{
display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:6px; background:var(--surface-1); border:1px solid var(--line); font-size:11px; color:var(--muted);
}
.healthDot{
width:6px; height:6px; border-radius:999px; display:inline-block;
}
.healthDot.ok{background:var(--accent)}
.healthDot.offline{background:var(--red)}
.healthDot.unknown{background:#666}

/* Notification System */
.notificationContainer{
position:fixed;
top:72px;
left:12px;
z-index:2000;
display:flex;
flex-direction:column;
gap:8px;
max-width:320px;
pointer-events:none;
}
.notification{
background:var(--panel);
border:1px solid var(--line);
border-radius:12px;
padding:12px 14px;
box-shadow:var(--shadow-md);
animation:notifySlideIn .25s ease-out;
pointer-events:auto;
cursor:pointer;
transition:all .2s ease;
border-left:4px solid rgba(var(--accent-rgb),.7);
min-width:280px;
}
.notification:hover{
background:var(--panel2);
box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.notification.info{border-left-color:rgba(var(--accent-rgb),.7);}
.notification.success{border-left-color:rgba(var(--accent-rgb),.7);}
.notification.warning{border-left-color:rgba(var(--accent-rgb),.7);}
.notification.error{border-left-color:rgba(231,76,60,.7);}

.notifyTitle{
font-weight:700;
font-size:13px;
color:var(--text);
margin-bottom:4px;
display:flex;
align-items:center;
gap:6px;
}
.notifyIcon{
display:inline-block;
width:16px;
height:16px;
line-height:16px;
text-align:center;
font-size:12px;
flex:0 0 auto;
}
.notifyMsg{
font-size:12px;
color:var(--muted);
line-height:1.4;
word-break:break-word;
}
.notifyProgress{
height:2px;
background:var(--surface-3);
border-radius:1px;
margin-top:8px;
overflow:hidden;
}
.notifyProgressBar{
height:100%;
background:rgba(var(--accent-rgb),.7);
border-radius:1px;
animation:notifyFadeOut linear forwards;
}
.notification.info .notifyProgressBar{background:rgba(var(--accent-rgb),.7);}
.notification.warning .notifyProgressBar{background:rgba(var(--accent-rgb),.7);}
.notification.error .notifyProgressBar{background:rgba(231,76,60,.6);}

@keyframes notifySlideIn{from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)}}
@keyframes notifyFadeOut{from{transform:scaleX(1)} to{transform:scaleX(0)}}

/* ---- Utility Classes ---- */
.section-h3{margin:0 0 12px; font-size:13px; color:var(--muted); font-weight:700; letter-spacing:.2px;}
.section-h3.mt{margin-top:24px;}
.section-h3.mt-sm{margin-top:16px;}
.dbg-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:12px;}
.flex-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.flex-col{display:flex; flex-direction:column; gap:8px;}
.full-w{width:100%;}
.code-block{font-family:monospace; font-size:11px; color:var(--text); background:rgba(0,0,0,.18); padding:8px; border-radius:6px; word-break:break-all; line-height:1.5;}
.settings-group{border-top:1px solid var(--line); padding-top:16px; margin-top:4px;}
.bike-config-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--surface-1);border-radius:6px;margin-bottom:8px;transition:background .2s;}
.bike-config-row input[type="text"]{flex:1;padding:6px 10px;outline:none;}
.bike-config-row label.checkbox-label{display:flex;align-items:center;cursor:pointer;min-width:24px;}
.bike-config-row input[type="checkbox"]{width:18px;height:18px;cursor:pointer;margin:0;}
.bike-config-row label.bike-label{flex:0 0 80px;font-weight:500;cursor:pointer;opacity:.9;}
.hint-block{font-size:13px;opacity:.7;margin-bottom:12px;padding:8px 12px;background:rgba(var(--accent-rgb),.1);border-left:3px solid rgba(var(--accent-rgb),.5);border-radius:4px;}
.driversInput{flex:1;min-width:0;padding:6px 0 6px 10px;}
input.driversNumberInput{width:40px;padding:6px 0 6px 6px;}
.driversNumberInput::-webkit-outer-spin-button,.driversNumberInput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}


/* tooltip */
.btn[data-tooltip] {position: relative;}

.btn[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: rgba(20, 20, 20, 0.95);
color: white;
padding: 6px 8px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 6px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 1000;
}

.btn[data-tooltip]::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top: none;
border-bottom-color: rgba(255, 255, 255, 0.95);
opacity: 0;
transition: opacity 0.2s ease;
}

.btn[data-tooltip]:hover::after,
.btn[data-tooltip]:hover::before {
opacity: 1;
}

/* ---- Panel layouts ---- */
.settings-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;height:100%;overflow:hidden;}
.settings-col{overflow-y:auto;padding-right:12px;}
details.settings-details.mt{margin-top:20px;}
.settings-details-body{padding-top:10px;}
.panel-cyclist{display:flex;gap:24px;height:100%;overflow:hidden;}
.panel-col-left{flex:0 0 35%;overflow-y:auto;padding-right:12px;}
.panel-col-right{flex:1;min-width:0;display:flex;flex-direction:column;}
.chart-container{flex:1;position:relative;}
/* ---- Reusable form controls ---- */
.panel-input{flex:1;padding:6px 10px;outline:none;}
.panel-textarea{width:100%;box-sizing:border-box;padding:8px 10px;resize:vertical;line-height:1.6;outline:none;}
.helper-text{font-size:12px;opacity:.55;margin-bottom:6px;}
.form-label{font-size:12px;font-weight:600;opacity:.7;margin-bottom:8px;}
.btn-wide{width:fit-content;min-width:200px;}
.mt-sm{margin-top:8px;}
.mb-md{margin-bottom:16px;}
/* ---- Per-bike stats table ---- */
.per-bike-table{width:100%;font-size:12px;border-collapse:collapse;}
.per-bike-table th,.per-bike-table td{padding:2px 6px;}
.per-bike-table th:first-child,.per-bike-table td:first-child{text-align:left;}
.per-bike-table th:not(:first-child),.per-bike-table td:not(:first-child){text-align:right;}

/* Compact base controls */
.driversInput,
input.driversNumberInput,
.panel-input,
.panel-textarea,
.bike-config-row input[type="text"]{
background:var(--input-bg);
border:1px solid var(--input-border);
border-radius:var(--radius-sm);
color:inherit;
font-size:14px;
}

/* ---- Responsive ---- */
@media (max-width: 1200px){
  .settings-panel-grid{grid-template-columns:1fr;gap:14px;}
  .panel-cyclist{flex-direction:column;gap:14px;}
  .panel-col-left{flex:0 0 auto;max-height:42%;padding-right:0;}
  .panel-col-right{min-height:320px;}
}

@media (max-width: 900px){
  .grid{gap:10px;padding:10px;}
  .panel{width:100vw;height:100vh;border-radius:0;}
  .panelHeader{padding:12px;}
  .panelBody{padding:12px;}
  .notificationContainer{left:8px;right:8px;max-width:none;}
  .notification{min-width:0;width:100%;}
}