:root{
  --bg:#020409; --panel:#070d18; --panel2:#0b1a33; --line:#14284a; --text:#e8eef7; --muted:#7f93b0;
  --accent:#4d8dff; --warn:#f6ad55; --bad:#fc8181; --ok:#68d391;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font:13px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
header{display:flex;align-items:center;gap:20px;padding:6px 14px;background:var(--panel);border-bottom:1px solid var(--line);height:52px}
.brand b{font-size:15px;letter-spacing:.3px}
.big{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:11.5px}
.clock{min-width:150px}
.timectl{display:flex;align-items:center;gap:6px}
.badge{margin-left:auto;font-size:11.5px;padding:4px 9px;border-radius:12px;background:var(--panel2);border:1px solid var(--line)}
.badge.warn{border-color:var(--warn);color:var(--warn)} .badge.good{border-color:#2f855a;color:var(--ok)}
main{display:grid;grid-template-columns:300px 1fr 340px;height:calc(100% - 52px)}
aside{overflow-y:auto;background:var(--panel);padding:8px 10px}
#left{border-right:1px solid var(--line)} #right{border-left:1px solid var(--line)}
section{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
section:last-child{border-bottom:0}
h3{margin:2px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--accent);display:flex;align-items:center;gap:8px}
label{color:var(--muted);font-size:11px;display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.val{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums} .val small{font-size:11px;color:var(--muted);font-weight:400}
.val.small{font-size:12.5px}
.pos{margin:6px 0;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
.row{display:flex;align-items:center;gap:6px;margin:5px 0}
.row>label{width:78px;flex:none}
.row.wrap{flex-wrap:wrap}
input[type=number],input[type=text],select{background:#030812;color:var(--text);border:1px solid var(--line);border-radius:5px;padding:4px 6px;min-width:0;flex:1;font:inherit}
input.tiny{width:44px;flex:none;display:inline-block;padding:1px 4px}
button{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:5px 9px;cursor:pointer;font:inherit}
button:hover{border-color:var(--accent)} button.on,button.active{background:#10347a;border-color:var(--accent)}
button.primary{background:#1b4fb8;border-color:var(--accent);font-weight:600}
button:disabled{opacity:.5;cursor:wait}
label.file{display:inline-block;background:var(--panel2);border:1px dashed var(--line);border-radius:5px;padding:5px 8px;cursor:pointer;color:var(--text);font-size:12px}
label.file input{display:none}
label.check{display:block;margin:6px 0;color:var(--text);font-size:12px}
.alert{color:var(--bad)} .ok{color:var(--ok)}
.hidden{display:none!important}
#grounded,#finished{font-size:11px;border:1px solid currentColor;border-radius:4px;padding:0 5px}
canvas#polarCv{width:100%;height:auto;background:#030812;border-radius:6px;margin-top:4px}
#mapwrap{position:relative;overflow:hidden;background:#050b18}
canvas#map{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
canvas#map.arm{cursor:crosshair}
#mapTools{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px}
#mapTools button{width:34px;height:34px;padding:0;font-size:16px;background:rgba(7,13,24,.9)}
#legend{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px;background:rgba(7,13,24,.85);padding:4px 8px;border-radius:6px;font-size:11px}
#legend i{display:inline-block;width:22px;height:9px}
#isoLegend{position:absolute;left:10px;bottom:48px;max-width:330px;background:rgba(7,13,24,.85);padding:4px 8px;border-radius:6px;font-size:11px;color:var(--muted)}
#hover{position:absolute;left:10px;top:10px;background:rgba(7,13,24,.9);padding:4px 8px;border-radius:6px;font-size:11.5px;font-variant-numeric:tabular-nums}
#mapMsg{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:rgba(246,173,85,.95);color:#222;padding:5px 12px;border-radius:6px;font-weight:600}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,4,9,.93);text-align:center;z-index:5}
#loading.done{display:none}
.spin{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;margin:0 auto 10px;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.summary{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:6px 8px;margin:6px 0;font-variant-numeric:tabular-nums;line-height:1.5}
.tablewrap{max-height:300px;overflow:auto;margin-top:6px;border:1px solid var(--line);border-radius:6px}
table{border-collapse:collapse;width:100%;font-size:11px;font-variant-numeric:tabular-nums}
th,td{padding:2px 5px;text-align:right;white-space:nowrap} th{position:sticky;top:0;background:var(--panel2);color:var(--muted);font-weight:500}
td:nth-child(2),th:nth-child(2){text-align:left}
tr.tackrow td{color:var(--warn)}
tbody tr:nth-child(even){background:rgba(255,255,255,.03)}
ol#board{margin:0;padding-left:22px} ol#board li{padding:2px 0;display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
ol#board li.me{color:var(--accent);font-weight:600} ol#board li.done{color:var(--ok)}
#compassSec{position:sticky;top:-8px;z-index:3;background:var(--panel);margin:-8px -10px 14px;padding:8px 10px 10px;box-shadow:0 6px 12px rgba(0,0,0,.45)}
#compassSec .muted{display:none}
#compassWrap{display:flex;justify-content:center}
canvas#compassCv{width:100%;max-width:min(300px,36vh);height:auto;aspect-ratio:1;cursor:crosshair;touch-action:none;border-radius:50%}
.compassBtns button{flex:1;padding:5px 0;font-size:14px}
.compassBtns button#cmModeHdg,.compassBtns button#cmModeTwa{flex:1.6;font-size:12px}
.cmconfirm{margin:6px 0;padding:7px 8px;border:1px solid #f6e05e;border-radius:6px;background:rgba(246,224,94,.08);font-variant-numeric:tabular-nums}
.cmconfirm #cmPendTxt{font-weight:600;color:#f6e05e}
.cmconfirm .row button{flex:1}
.kc{font-weight:600} .kc-red{color:#fc8181} .kc-green{color:#68d391}
ol#wpList{margin:6px 0;padding:0;list-style:none}
ol#wpList li{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:5px;font-variant-numeric:tabular-nums}
ol#wpList li:nth-child(odd){background:rgba(255,255,255,.04)}
ol#wpList li.done{opacity:.45;text-decoration:line-through}
ol#wpList li.next{outline:1px solid var(--accent)}
ol#wpList .n{flex:none;width:20px;height:20px;border-radius:50%;background:#7c5cff;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
ol#wpList li.done .n{background:#4a5568}
ol#wpList .p{flex:1;font-size:11.5px} ol#wpList .d{color:var(--muted);font-size:11px}
ol#wpList button{padding:0 6px;line-height:20px}
@media (max-width:1000px){main{grid-template-columns:1fr;grid-template-rows:60vh auto auto;overflow:auto;height:auto}
  #mapwrap{order:-1;min-height:60vh}}

#boatPrev{display:block;margin:0 auto 6px;background:#030812;border:1px solid var(--line);border-radius:8px;width:128px;height:128px}
.boatTypes{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:4px 0 6px}
.boatTypes button{padding:5px 4px;font-size:12px}
.row .col{flex:1;display:flex;flex-direction:column;gap:2px}
input[type=color]{width:100%;height:26px;padding:0;border:1px solid var(--line);border-radius:5px;background:#030812;cursor:pointer}
input[type=range]{flex:1;accent-color:var(--accent)}

body:not(.sim) #speedBtns,body:not(.sim) #btnPause,body:not(.sim) #elapsed{display:none}
#simBanner{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(246,173,85,.95);color:#1a1205;padding:6px 12px;border-radius:8px;font-weight:600;display:flex;gap:10px;align-items:center;white-space:nowrap;z-index:4}
#simBanner button{background:#1a1205;color:#f6ad55;border-color:#1a1205}
#btnSim{white-space:nowrap}
body.sim #btnSim{background:#7a4a12;border-color:var(--warn)}

.acct{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}
.acct a{color:var(--accent);text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:4px 10px;background:var(--panel2)}
.acct a:hover{border-color:var(--accent)}
.acct button{padding:3px 8px;font-size:11.5px}

/* parcours routage : cibles, routages enregistrés, ordre au bateau */
.step{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#031024;font-size:11px;font-weight:700;margin-right:2px}
.plan{margin-left:auto;font-size:10.5px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ok);border:1px solid #2f855a;border-radius:10px;padding:1px 8px}
h4.sub{margin:12px 0 4px;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
ol#wpList li{flex-wrap:wrap;row-gap:3px}
ol#wpList .nm{flex:1;min-width:60px;font-weight:600;cursor:text;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ol#wpList .p{flex-basis:100%;order:5;padding-left:28px;color:var(--muted)}
ol#wpList .act{display:flex;gap:3px}
ol#wpList .act button{padding:0 6px;line-height:20px;font-size:11.5px}
ol#wpList .act button.rt{background:#1b4fb8;border-color:var(--accent)}
ol#wpList .act button:disabled{opacity:.35;cursor:default}
ul#rtList{margin:4px 0;padding:0;list-style:none}
ul#rtList li{display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;align-items:start;padding:6px 7px;border-radius:6px;border:1px solid var(--line);margin-bottom:5px;background:rgba(255,255,255,.02)}
ul#rtList li.on{border-color:var(--accent);background:rgba(77,141,255,.08)}
ul#rtList .sw{width:12px;height:12px;border-radius:3px;margin-top:3px}
ul#rtList .nm{font-weight:600;cursor:text} ul#rtList .meta{grid-column:2;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
ul#rtList .act{grid-column:3;grid-row:1 / span 2;display:flex;flex-direction:column;gap:4px}
ul#rtList .act button{padding:2px 7px;font-size:12px} ul#rtList .act button.go{background:#1b4fb8;border-color:var(--accent)}
ul#rtList li.followed .nm::after{content:" · suivi";color:var(--ok);font-weight:500;font-size:11px}
ul#rtList input[type=checkbox]{margin:2px 0 0}
.orderNow{padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);font-weight:600;margin-bottom:6px}
.frozen{margin:6px 0;padding:6px 8px;border:1px solid #f6ad55;border-radius:6px;color:#f6ad55;font-size:12px}
.frozen button{margin-left:6px;padding:2px 7px;font-size:11.5px}
details#ordersBox{margin-top:8px} details#ordersBox summary{cursor:pointer;color:var(--muted);font-size:12px;margin-bottom:4px}
ul#rtList .sw{display:inline-block;margin:0 6px 0 0;vertical-align:-1px}
input.rename{flex:1;min-width:60px;padding:1px 5px}
ol#wpList li{display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;align-items:center;padding:6px 7px}
ol#wpList .p{grid-column:2 / 4;grid-row:2;padding:0;flex-basis:auto}
ol#wpList .act{grid-column:1 / 4;grid-row:3;display:flex;gap:4px;margin-top:2px}
ol#wpList .act button.rt{flex:1}

/* ---- Zones colorées : une couleur par fonction, pour retrouver d'un coup d'œil où l'on est ---- */
[data-zone=nav]{--z:#4d8dff}      /* navigation : compas, bateau, pilote */
[data-zone=route]{--z:#fbbf24}    /* routage : cibles, routages, ordre au bateau */
[data-zone=data]{--z:#a3e635}     /* données : vent, polaire, GPX */
[data-zone=course]{--z:#fb7185}   /* parcours et position de départ */
[data-zone=save]{--z:#a78bfa}     /* sauvegarde de la partie */
[data-zone=boat]{--z:#2dd4bf}     /* mon bateau et sa performance */
[data-zone=rank]{--z:#fb923c}     /* classement */
[data-zone=acct]{--z:#e879f9}     /* compte / connexion */
aside section[data-zone]{
  position:relative;margin:16px 0 8px;padding:12px 10px 10px;border:1px solid color-mix(in srgb,var(--z) 38%,var(--line));
  border-left:4px solid var(--z);border-radius:8px;background:color-mix(in srgb,var(--z) 7%,var(--panel));
}
aside section[data-zone]:first-child{margin-top:14px}
aside section[data-zone]::before{
  content:attr(data-label);position:absolute;top:-8px;left:10px;padding:1px 8px;border-radius:9px;
  background:var(--z);color:#06101f;font-size:9.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;line-height:14px;
}
aside section[data-zone] h3{color:var(--z)}
aside section[data-zone] .step{background:var(--z)}
aside section[data-zone] button:hover,aside section[data-zone] .file:hover{border-color:var(--z)}
aside section[data-zone] input:focus,aside section[data-zone] select:focus{outline:1px solid var(--z);border-color:var(--z)}
/* les trois étapes du routage forment un seul bloc : l'étiquette n'apparaît que sur la première, les cartes se touchent */
#rtSec::before,#orderSec::before{display:none}
#wpSec{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
#rtSec{margin:0;border-radius:0;border-top-color:transparent}
#orderSec{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent}
header .acct[data-zone]{padding:3px 10px;border:1px solid color-mix(in srgb,var(--z) 60%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--z) 10%,var(--panel))}
header .acct[data-zone]::before{content:attr(data-label);color:var(--z);font-size:9.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
/* boutons de la carte : couleur de la fonction qu'ils commandent */
#tgWind,#tgFlow{border-color:#4d8dff}
#tgIso,#tgRoute,#btnAddWp{border-color:#fbbf24}
#tgWind.on,#tgFlow.on{background:rgba(77,141,255,.28)}
#tgIso.on,#tgRoute.on{background:rgba(251,191,36,.24)}