/* Beast Lap — sign-in, My account and Admin. The site's look: ink background, the four sector colours,
   Saira headings, Inter text. */
:root{
  --ink:#0B0D10; --ink-2:#12151A; --ink-3:#1A1E25; --line:#262B34;
  --text:#F2F4F7; --muted:#9AA3B2; --dim:#6B7482;
  --blue:#1E6BFF; --red:#FF2D3A; --yellow:#FFB800; --green:#00C26E; --purple:#8F3BFF;
  --radius:14px; --radius-lg:20px;
  --head:"Saira",system-ui,sans-serif;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink)}
html,body{margin:0}
body{background:var(--ink);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--head);margin:0;line-height:1.1}
h1{font-size:clamp(28px,4vw,38px);font-weight:800;text-transform:uppercase}
h2{font-size:22px;font-weight:700}
h3{font-size:17px;font-weight:700}
p{margin:0}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:6px}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.small{font-size:14px}

/* top bar */
.bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ink) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar-in{max-width:1180px;margin:0 auto;padding:0 20px;min-height:72px;display:flex;align-items:center;gap:16px}
.brand{display:flex;flex-direction:column;align-items:center;width:fit-content}
.brand img{height:40px;width:auto;display:block} /* (as the website's header) */
/* The four colour dashes under the logo, wherever it is (as on the app's Home): 40% of its width, centred. */
.bl-dashes{display:flex;gap:3px;width:40%;margin:5px auto 0 1.98%;align-self:flex-start}
.bl-dashes i{flex:1;height:3px;border-radius:2px}
.bl-dashes i:nth-child(1){background:#1E6BFF}.bl-dashes i:nth-child(2){background:#FF2D3A}.bl-dashes i:nth-child(3){background:#FFB800}.bl-dashes i:nth-child(4){background:#00C26E}

.bar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
@media (max-width:420px){.bar-in{gap:8px;padding:0 14px}}
@media (max-width:400px){.brand img{height:36px}}
@media (max-width:340px){.brand img{height:31px}}

/* menus (language, account) */
.menu{position:relative}
.menu>button{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--ink-2);color:var(--text);font:600 14px var(--font);cursor:pointer}
.menu>button:hover,.menu.open>button{border-color:#ffffff55}
.menu ul{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;list-style:none;margin:0;padding:6px;background:var(--ink-2);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px #000a;z-index:40;display:none}
.menu.open ul{display:block}
.menu li a,.menu li button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;background:none;border-radius:9px;font:600 15px var(--font);color:var(--text);cursor:pointer;text-align:left}
.menu li a:hover,.menu li button:hover,.menu li [aria-current="true"]{background:var(--ink-3)}
.menu li.sep{border-top:1px solid var(--line);margin:6px 4px}
.flag{width:22px;height:15px;border-radius:2px;box-shadow:0 0 0 1px #ffffff26;flex-shrink:0;display:block}
.avatar{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:700 13px var(--head);color:#fff;background:var(--purple);flex-shrink:0}
@media (max-width:520px){.menu .who,.menu .code{display:none}}

/* page frame */
.page{max-width:1180px;margin:0 auto;padding:32px 20px 80px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:36px;align-items:start}
.side{position:sticky;top:92px;display:flex;flex-direction:column;gap:2px}
.side .group{font:700 12px var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:16px 12px 6px}
.side .group:first-child{padding-top:0}
.side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-weight:600;font-size:15px;color:var(--muted)}
.side a:hover{color:var(--text);background:var(--ink-2)}
.side a[aria-current="page"]{color:var(--text);background:var(--ink-3)}
.side a[aria-current="page"]::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--yellow);margin-left:-4px}
.content{display:flex;flex-direction:column;gap:22px;min-width:0}
.head{display:flex;flex-direction:column;gap:8px}
.head .lead{color:var(--muted);font-size:17px;max-width:62ch}
/* (user, 2026-10-30) The page model (account, admin): one title row, the back arrow at its left on a page one level
   down — as the app's pages — the title's capitals level with its middle; the content always 22 px under the head. */
.head-row{display:flex;align-items:center;gap:10px;min-width:0}
.head-row h1{min-width:0;overflow-wrap:anywhere}
.head-back{flex:none;width:40px;height:40px;margin-left:-8px;display:grid;place-items:center;border-radius:12px;color:var(--text)}
.head-back:hover{background:var(--ink-2)}
@media (max-width:860px){
  .page{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:18px}
  .side{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:6px;margin:0 -20px;padding-inline:20px;scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side .group{display:none}
  .side a{white-space:nowrap;background:var(--ink-2);border:1px solid var(--line)}
  .side a[aria-current="page"]{border-color:var(--yellow)}
  .side a[aria-current="page"]::before{display:none}
}

/* cards, rows */
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card.tight{padding:18px}
.card h2{display:flex;align-items:center;gap:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px;border-top:3px solid var(--blue)}
.stat:nth-child(4n+2){border-top-color:var(--red)}.stat:nth-child(4n+3){border-top-color:var(--yellow)}.stat:nth-child(4n+4){border-top-color:var(--green)}
.stat small{display:block;font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.stat b{display:block;font:800 30px var(--head);margin-top:4px;font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:8px 20px;margin:0}
.kv dt{color:var(--dim);font-size:14px}
.kv dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.badge{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--font);letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--ink-3);color:var(--muted);white-space:nowrap}
.badge.pro{background:#8F3BFF26;color:#c9a2ff}
.badge.team{background:#1E6BFF26;color:#8db4ff}
.badge.free{background:var(--ink-3);color:var(--muted)}
.badge.ok{background:#00C26E22;color:#5be0a6}
.badge.warn{background:#FFB80022;color:#ffd46b}
.badge.bad{background:#FF2D3A22;color:#ff8a92}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;font:700 15px var(--head);letter-spacing:.04em;text-transform:uppercase;border:2px solid transparent;cursor:pointer;background:var(--ink-3);color:var(--text);white-space:nowrap}
.btn:hover{border-color:#ffffff40}
.btn.main{background:var(--yellow);color:var(--ink)}
.btn.main:hover{background:#ffc933;border-color:transparent}
.btn.ghost{background:transparent;border-color:#ffffff33}
.btn.danger{background:transparent;color:#ff8a92;border-color:#FF2D3A66}
.btn.small{min-height:36px;padding:0 14px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:default}
.link{background:none;border:0;padding:0;color:var(--yellow);font:600 15px var(--font);cursor:pointer}
@media (max-width:520px){.btn{white-space:normal;text-align:center;line-height:1.2;padding-block:8px}}

/* forms */
form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field>.label{font-size:14px;font-weight:600;color:var(--muted)}
input,select,textarea{font:inherit;font-size:16px;color:var(--text);background:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;min-height:48px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--yellow)}
input[type=checkbox]{width:20px;height:20px;min-height:0;accent-color:var(--yellow);flex-shrink:0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--muted);cursor:pointer}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.two{grid-template-columns:minmax(0,1fr)}}
.pw{position:relative}
.pw input{padding-right:52px}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:8px;display:grid;place-items:center}
.pw button:hover{color:var(--text)}
.code-input{font:700 28px var(--head);letter-spacing:.4em;text-align:center}
.msg{border-radius:12px;padding:12px 14px;font-size:15px}
.msg.err{background:#FF2D3A1a;border:1px solid #FF2D3A55;color:#ffc2c6}
.msg.ok{background:#00C26E1a;border:1px solid #00C26E55;color:#b6f3d6}
.msg.info{background:#1E6BFF1a;border:1px solid #1E6BFF55;color:#c3d7ff}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:600}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch i{width:46px;height:26px;border-radius:999px;background:var(--ink-3);border:1.5px solid var(--line);position:relative;transition:background .2s;flex-shrink:0}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.switch input:checked+i{background:#00C26E33;border-color:var(--green)}
.switch input:checked+i::after{transform:translateX(20px);background:var(--green)}
.switch input:focus-visible+i{outline:3px solid var(--yellow);outline-offset:2px}

/* sign-in */
.auth{max-width:440px;margin:0 auto;padding:56px 20px 80px;display:flex;flex-direction:column;gap:22px}
.auth .sectors{display:flex;height:4px;width:96px}
.auth .sectors i{flex:1}
.sectors i:nth-child(1){background:var(--blue)}.sectors i:nth-child(2){background:var(--red)}.sectors i:nth-child(3){background:var(--yellow)}.sectors i:nth-child(4){background:var(--green)}
.auth .who-email{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-weight:600;overflow-wrap:anywhere}

/* plans */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.plan{position:relative;background:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:12px}
.plan.current{border-color:var(--green)}
.plan.pick{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple)}
.plan h3{font-size:22px;text-transform:uppercase}
.plan .price{font:800 32px var(--head)}
.plan .price small{font:600 14px var(--font);color:var(--muted)}
.plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--muted)}
.plan li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--green);margin-right:9px;vertical-align:middle}
.plan .btn{margin-top:auto}
.plan>.badge{align-self:flex-start;margin-top:auto}
.seats{display:flex;align-items:center;justify-content:space-between;gap:12px}
.seats input{width:90px;text-align:center;flex:none}
.plan .seats-form .seats{width:100%}
form.row .seats{gap:8px}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--ink-2)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font:700 12px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr.go{cursor:pointer}
tbody tr.go:hover{background:var(--ink-3)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.empty{padding:28px;text-align:center;color:var(--dim)}
.filters,form.filters{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;align-items:center}
.filters input{max-width:320px}
.filters select{width:auto}

/* loading */
.wait{min-height:240px;display:grid;place-items:center;color:var(--dim)}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--yellow);animation:spin .8s linear infinite}
.down{padding:24px 16px}
.down-card{max-width:440px;text-align:center;display:grid;gap:12px;justify-items:center}
.down-card h1{font-size:22px;margin:0;color:var(--text)}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink-3);border:1px solid var(--line);color:var(--text);padding:12px 18px;border-radius:12px;box-shadow:0 20px 50px #000a;z-index:60;font-weight:600;max-width:calc(100% - 32px)}

/* devices: the connection badge */
.badge.link-bluetooth{background:#1E6BFF26;color:#8db4ff}
.badge.link-wifi{background:#00C26E22;color:#5be0a6}
.badge.link-usb{background:#FFB80022;color:#ffd46b}
.badge.link-sd{background:#8F3BFF26;color:#c9a2ff}
/* devices where the table has no room for a line each (a phone, a tablet, a narrow window): each device a card,
   every value under its label. Decided by the room the table has, not the screen's width. */
.table-wrap:has(.dev-table){container-type:inline-size}
@container (max-width:860px){
  .dev-table thead{display:none}
  .dev-table tr{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .dev-table tr:last-child{border-bottom:0}
  .dev-table td{border:0;padding:0}
  .dev-table td[data-label]::before{content:attr(data-label);display:block;font:700 11px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}
  .dev-table td.num{grid-column:1/-1;text-align:left}
}
.card.soon .badge{align-self:flex-start}
/* detect panel */
.det-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.det-row .badge{justify-self:start}
.det-body{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.det-found{margin-top:6px;padding:16px;border-radius:14px;border:1px solid #00C26E66;background:#00C26E12;display:flex;flex-direction:column;gap:8px}
.det-found .badge{align-self:flex-start}
@media (max-width:520px){.det-row{grid-template-columns:minmax(0,1fr)}}

/* an acquisition device switched off */
.dev-table tr.dev-off td:not(:nth-last-child(-n+2)){opacity:.45}
/* Test, edit, remove: one row, as tall as the Detect button; edit and remove are square icon buttons. */
.dev-acts{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.btn.icon{width:46px;min-width:46px;padding:0;flex:none}
.btn.icon svg{display:block}
.dev-table th,.dev-table td{padding-inline:10px}
.dev-acts .btn:not(.icon){padding:0 16px}
@container (max-width:860px){.dev-acts{justify-content:flex-start}}
.dev-table .switch span{display:none}
@container (max-width:860px){.dev-table .switch span{display:inline}}
/* device test: live data */
.card.test{border-color:#1E6BFF66}
.test-grid .stat b.tval{font-size:20px;line-height:1.25}
.test-table td,.test-table th{white-space:nowrap;font-variant-numeric:tabular-nums}
pre.raw{margin:0;padding:12px 14px;background:var(--ink);border:1px solid var(--line);border-radius:12px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);white-space:pre-wrap;word-break:break-all}
.pw-saved::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--green);margin-right:6px;vertical-align:middle}
.test-grid .tsub{font:600 14px var(--font);color:var(--muted)}
/* the device test page swipes in from the right and back out to the right */
.page{overflow-x:clip}
.content.leave-left{transform:translateX(-60%);opacity:0;transition:transform .2s ease-in,opacity .2s ease-in}
.content.leave-right{transform:translateX(60%);opacity:0;transition:transform .2s ease-in,opacity .2s ease-in}
.content.enter-right{animation:enter-right .3s ease-out}
.content.enter-left{animation:enter-left .3s ease-out}
@keyframes enter-right{from{transform:translateX(60%);opacity:0}to{transform:none;opacity:1}}
@keyframes enter-left{from{transform:translateX(-60%);opacity:0}to{transform:none;opacity:1}}

/* In the installed app the page runs under the status bar (translucent): the top bar takes the status bar's height
   upright and nothing on its side, where there is none; the sides keep clear of the notch. */
.bar{padding-top:env(safe-area-inset-top,0px)}
.bar-in,.page{padding-left:max(20px,calc(env(safe-area-inset-left,0px) + 10px));padding-right:max(20px,calc(env(safe-area-inset-right,0px) + 10px))}
@media (max-width:420px){.bar-in{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}}

/* The question asked before deleting or stopping anything: over the whole screen, two big answers. */
.ask{position:fixed;inset:0;z-index:300;background:var(--ink,#0B0D10);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  padding:calc(env(safe-area-inset-top,0px) + 20px) max(20px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 20px) max(20px,env(safe-area-inset-left,0px))}
.ask h2{font:800 clamp(24px,5vmin,40px)/1.2 var(--head,inherit);text-transform:uppercase;letter-spacing:.03em;text-align:center;margin:0;max-width:820px}
.ask-btns{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(560px,100%)}
.ask-btns .btn{min-height:clamp(84px,20vmin,140px);font:800 clamp(22px,5vmin,36px)/1 var(--head,inherit);text-transform:uppercase;letter-spacing:.06em;justify-content:center}
.ask-btns .danger-fill{background:#FF2D3A;border-color:#FF2D3A;color:#fff}

/* My sessions and tracks */
.srun-bar{gap:12px;flex-wrap:wrap;align-items:center}
.seg-tabs{display:flex;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--ink-3)}
.seg-tabs a{padding:10px 16px;font-weight:700;font-size:15px;color:var(--muted)}
.seg-tabs a[aria-current="true"]{background:var(--purple);color:#fff}
.srun-filter{margin:0;min-width:220px}
.srun-filter select{width:100%;height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--ink-3);color:var(--text);padding:0 12px;font:600 15px var(--font)}
.srun-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.srun{background:radial-gradient(ellipse 70% 120% at 22% 18%,rgba(255,255,255,.08) 0%,rgba(255,255,255,.03) 40%,rgba(255,255,255,0) 75%),var(--ink-2)}
.srun:hover,.trow:hover{border-color:#ffffff40}
.srun-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.srun-trk{color:var(--text)}
.badge.veh{background:#FF8A0022;color:#FFB15C}
.srun-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.srun-figs small{display:block;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.srun-figs b{font:700 18px var(--head);font-variant-numeric:tabular-nums}
.pb{color:#C9A6FF}
.back{color:var(--muted);font-weight:600}
.back:hover{color:var(--text)}
.smap,.tmap{height:min(60vh,520px);border-radius:14px;overflow:hidden;background:#1a1d24}
.table-wrap{overflow-x:auto}
table.laps{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.laps th,table.laps td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
table.laps th:first-child,table.laps td:first-child{text-align:left;color:var(--muted)}
table.laps th{font:600 12px var(--font);text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
table.laps td.tot{font-weight:700}
table.laps .pb-row td:first-child{color:#C9A6FF;font-weight:700}
.row.gap{gap:10px;flex-wrap:wrap}
.trow .flag{display:inline-block;vertical-align:-3px;margin-right:6px}
/* New Version tracks (imported): marked in Beast Lap's yellow; the kind's badge beside it. */
.badge.ver-new{color:#FFB800;background:color-mix(in srgb,#FFB800 14%,transparent)}
.trow .tbdg{gap:6px;flex-wrap:nowrap}
.t-count{margin:0 0 10px}
.t-search{flex:1;min-width:240px;max-width:460px;flex-wrap:nowrap}
.a-imp .row{align-items:center}
.a-fields th{text-align:left;white-space:nowrap;color:var(--muted);font-weight:700;width:1%}
.a-fields td{word-break:break-word}
.badge.k-karting{background:#FF8A0022;color:#FFB15C}
.badge.k-auto{background:#1E6BFF26;color:#8db4ff}
.badge.k-moto{background:#FF2D3A22;color:#ff8a92}
form.card:not([data-act="profile"]):not(.vh-form) input[name="name"]{flex:1;min-width:0;height:46px;border-radius:12px;border:1.5px solid var(--line);background:var(--ink-3);color:var(--text);padding:0 12px;font:600 16px var(--font)}

/* Select lists drawn as fields: the key as an input, the list of our own (dark, framed), the choice ticked green. */
select.dd-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;border:0!important;opacity:0;pointer-events:none}
.dd{position:relative;width:100%}
.dd-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--ink);color:var(--text);font:inherit;font-size:16px;text-align:left;cursor:pointer}
.dd-btn:hover{border-color:#ffffff55}
.dd.open .dd-btn,.dd-btn:focus-visible{outline:none;border-color:var(--yellow)}
.dd-val{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.dd-chev{flex:none;color:var(--muted);transition:transform .15s}
.dd.open .dd-chev{transform:rotate(180deg)}
.dd-menu{display:none;position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);max-height:min(60vh,360px);overflow:auto;padding:6px;background:var(--ink-2);border:1.5px solid var(--line);border-radius:12px;box-shadow:0 20px 50px -12px #000}
.dd.open .dd-menu{display:block}
.dd-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:9px;background:transparent;color:var(--text);font:600 15px var(--font);text-align:left;cursor:pointer}
.dd-menu button:hover{background:var(--ink-3)}
.dd-menu button svg{flex:none}
.dd-menu button .dd-tick{visibility:hidden}
.dd-menu button[aria-selected="true"] .dd-tick{visibility:visible}
.srun-filter .dd-btn{min-height:44px;background:var(--ink-3)}
.filters .dd{width:auto;min-width:180px}

/* Admin: sessions and tracks */
.a-search{flex:1;min-width:240px;max-width:460px;flex-wrap:nowrap}
.a-search input,.t-search input{flex:1;min-width:0}
.a-table tbody tr{cursor:pointer}
.a-table tbody tr:hover td{background:var(--ink-3)}
.a-table td{text-align:left !important;vertical-align:top}
.a-table td.pb{text-align:right !important}
.link{color:var(--text)}

/* Select lists: a flag before the choice; a search line at the top of a long list. */
.dd-val{display:flex;align-items:center;gap:10px}
.dd-val span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dd-menu .flag,.dd-val .flag{width:22px;height:15px;flex:none;border-radius:2px;box-shadow:0 0 0 1px #ffffff26;object-fit:cover}
.dd-find{position:sticky;top:-6px;margin:-6px -6px 6px;padding:6px;background:var(--ink-2);border-bottom:1px solid var(--line)}
.dd-find input{min-height:40px;padding:8px 12px;font-size:15px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:640px){.three{grid-template-columns:minmax(0,1fr)}}
.srun{background:var(--ink-2) !important;background-image:none !important}

/* A timing line's name: a round bubble on its middle (as in the app). */
.gate-bub{width:0 !important;height:0 !important;background:none;border:0}
.gate-bub span{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  color:#05060A;font:800 11px/1 Inter,system-ui,sans-serif;letter-spacing:-.02em;box-shadow:0 0 0 2px rgba(5,6,10,.85);transform:translate(-50%,-50%)}
/* (smaller, a thinner rim) */
.gate-bub span{width:20px;height:20px;font-size:9.5px;box-shadow:0 0 0 1px rgba(5,6,10,.85)}

/* (as wide as 30% of the shortest line on the map: --bub, worked out at each zoom) */
.gate-bub span{width:var(--bub,20px);height:var(--bub,20px);font-size:calc(var(--bub,20px) * .46)}

/* (no rim round the bubbles) */
.gate-bub span{box-shadow:none !important;border:0 !important}
/* Every key on a map: a very thin black border and a soft halo (as the app's). */
.leaflet-control-container .leaflet-bar{border:1px solid #000 !important;background-clip:padding-box !important;box-shadow:0 2px 10px rgba(0,0,0,.45) !important}
/* A track's map turned to fit its outline (as the app's): the frame holds the turned square; keys and credits upright. */
.tmap-wrap{position:relative;height:min(60vh,520px);border-radius:14px;overflow:hidden;background:#1a1d24}
.tmap-wrap > .tmap{height:100%;border-radius:0}
.tmap-wrap > .leaflet-control-container .leaflet-control{pointer-events:auto}
.gate-bub span{transform:translate(-50%,-50%) rotate(calc(-1 * var(--maprot, 0deg))) !important}
/* The credits as the app's: the frame's bottom right corner, no gap, a dark band, one line. */
.tmap-wrap .leaflet-bottom.leaflet-right{right:0;bottom:0}
.tmap-wrap .leaflet-control-attribution{margin:0 !important;padding:1px 6px !important;border-radius:6px 0 0 0;background:rgba(5,6,10,.62) !important;color:#C9CED8 !important;
  font:500 10px/1.45 Inter,system-ui,sans-serif !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;box-shadow:none !important;border:0 !important}
.tmap-wrap .leaflet-control-attribution a{color:#fff !important;text-decoration:none !important;font-weight:600}
.tmap-wrap .leaflet-bottom.leaflet-right{max-width:100%}

/* A track's turns and straights: each a row (its key in its colour, its name, what it is); its label on the map. */
.ly-card h3{margin:0}
.ly-card .ly-ok{color:#4ADE80}
.ly-list{display:flex;flex-direction:column;gap:4px}
.ly-row{display:flex;align-items:center;gap:12px;width:100%;padding:6px 8px;border:0;border-radius:12px;background:rgba(255,255,255,.03);color:var(--text,#E6E9EF);text-align:left;cursor:pointer;font:inherit}
.ly-row:hover{background:rgba(255,255,255,.06)}
.ly-row.is-on{background:rgba(30,107,255,.16)}
.ly-key{flex:0 0 42px;width:42px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--tc);color:#fff;font-weight:800;font-size:13px}
.ly-key.is-str{background:#1C2028;color:#C9CED8;box-shadow:inset 0 -3px 0 var(--tc)}
.ly-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ly-txt b{font-weight:700;font-size:14px}
.ly-txt small{font-size:12px;color:var(--muted,#9AA3B2)}
.ly-lab{width:0 !important;height:0 !important;background:none;border:0}
.ly-lab span{position:absolute;left:0;top:0;padding:3px 6px;border-radius:9px;color:#fff;font-weight:800;font-size:10.5px;line-height:1;white-space:nowrap;
  box-shadow:0 0 0 1px rgba(5,6,10,.85);transform:translate(-50%,-50%) rotate(calc(-1 * var(--maprot, 0deg)))}
/* (squares with rounded corners, no rim, as big as the timing lines' bubbles) */
.ly-lab span{display:flex;align-items:center;justify-content:center;width:var(--bub,20px);height:var(--bub,20px);padding:0;border-radius:24%;box-shadow:none;
  font-size:calc(var(--bub,20px) * .4)}

/* The map keys, as on every map in the app: + and − white at the top left, recentre at their right, full page at the
   top right; a map shown over the whole window. */
.tmap-wrap .leaflet-bar a{display:flex;align-items:center;justify-content:center;width:36px !important;height:36px !important;line-height:36px !important;padding:0;font:600 22px/1 Inter,system-ui,sans-serif;color:#111;background:#fff;text-decoration:none}
.tmap-wrap .leaflet-bar a:first-child{border-bottom:1px solid #ccc}
.tmap-wrap .leaflet-bar a:hover{background:#f2f2f2}
.map-ctlrow{display:flex;align-items:flex-start;gap:10px;float:left;clear:both;margin:10px 0 0 10px;pointer-events:none}
.map-ctlrow > .leaflet-control{float:none !important;clear:none !important;margin:0 !important;pointer-events:auto}
.tmap-wrap .leaflet-top.leaflet-right .leaflet-control{margin:10px 10px 0 0}
.map-key{box-sizing:border-box;width:38px;height:38px;display:flex;align-items:center;justify-content:center;padding:0;background:#fff;color:#222;border:1px solid #000;border-radius:4px;background-clip:padding-box;box-shadow:0 2px 10px rgba(0,0,0,.45);cursor:pointer}
.map-key:hover{background:#f2f2f2}
.tmap-wrap.is-full{position:fixed;inset:0;z-index:1000;height:auto;border-radius:0}
.tmap-wrap.is-full .leaflet-top{top:env(safe-area-inset-top,0px)}
.tmap-wrap.is-full .leaflet-left{left:env(safe-area-inset-left,0px)}
.tmap-wrap.is-full .leaflet-right{right:env(safe-area-inset-right,0px)}
body.map-full-on{overflow:hidden}
.tmap-wrap.is-none{height:auto;background:none}
.tmap-wrap.is-none > .tmap{height:auto;background:none}

/* My tracks' cards (as the app's track cards): a long name on as many lines as it needs, its kind's badge kept at the
   top right; the name's lines and the place under it spaced as in the app (17 px at 1.2, 3 px between). */
.trow{display:flex;flex-direction:column;gap:3px}
.trow > .row:first-child{flex-wrap:nowrap;align-items:flex-start;gap:12px}
.trow > .row:first-child h3{flex:1;min-width:0;line-height:1.2;overflow-wrap:anywhere}
.trow > .row:first-child .badge{flex:none}

/* Admin, Tracks: the database or the drivers' updates; an update's parts, each ticked to be accepted. */
.a-choice{margin:0 0 16px}
.upd-form h3{margin:0 0 12px}
.upd-parts{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.upd-part{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--ink-3);cursor:pointer}
.upd-part input{width:20px;height:20px;margin:2px 0 0;accent-color:#00C26E;flex:none}
.upd-part span{display:flex;flex-direction:column;gap:3px;min-width:0}
.upd-part small{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.upd-part small.upd-new{color:#4BE39B}
/* User updates: a track's updates together under its name (the latest first, marked); on an update's page, the
   track's other updates waiting. */
.a-table tr.upd-grp td{background:var(--ink-3);cursor:default}
.a-table tr.upd-grp .badge{margin-left:8px;vertical-align:2px}
.a-table tr.upd-in td:first-child{padding-left:22px}
.badge.upd-latest{background:#00C26E22;border-color:#00C26E66;color:#4BE39B}
.upd-others h3{margin:0 0 4px}
.upd-others > p{margin:0 0 10px}
.upd-other{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;margin-top:8px;color:var(--text)}
.upd-other:hover{border-color:#ffffff40}
.upd-other > span:first-child{display:flex;flex-direction:column;gap:2px}
/* A map's word when a wheel scrolls over it without ⌘ or Ctrl (it zooms only with them). */
.map-wheel{position:absolute;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(5,6,10,.45);opacity:0;transition:opacity .25s;pointer-events:none}
.map-wheel.on{opacity:1}
.map-wheel span{font-weight:700;font-size:16px;color:#fff;padding:10px 16px;border-radius:999px;background:rgba(5,6,10,.7)}
/* Admin: a track's drawing moved onto the picture — the drawing as it is faded, the moved one and its handle over it. */
.tmap.moving .leaflet-overlay-pane,.tmap.moving .leaflet-marker-pane,.tmap.moving .leaflet-blAim-pane{opacity:.3}
.a-mv-h i{display:block;width:34px;height:34px;border-radius:50%;background:#FFB800;border:3px solid #0B0D10;box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:move}
.a-move{display:grid;gap:10px}
.a-mv-bar{align-items:center;justify-content:space-between;flex-wrap:wrap}
.a-mv-k{min-width:44px}
/* Admins on a track's map: what can be clicked, the handles, and the bar at the map's bottom right (Abort grey, Done white). */
.tmap .a-hit{cursor:pointer}
.tmap .gate-bub{cursor:default}
.a-ed-h i{display:block;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid #0B0D10;box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:grab}
.a-ed-m i{background:#FFB800}
.a-bar{position:absolute;right:12px;bottom:12px;z-index:1000;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 24px)}
.a-bar-txt{font-weight:700;font-size:14px;color:#fff;background:rgba(5,6,10,.75);padding:8px 12px;border-radius:999px}
.a-bar .btn{min-height:42px;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.a-bar .a-abort{background:#2A2F38;color:#fff;border-color:#3A404B}
.a-bar .a-done{background:#fff;color:#0B0D10;border-color:#fff;font-weight:800}
/* Admin: the picture switch under a track's map (its stored one or Apple's), as the other choices. */
/* (the admin's picture switch: over the map, at its bottom left) */
.a-imgsw{position:absolute;left:12px;bottom:12px;z-index:1000}
.a-imgsw .seg-tabs{background:rgba(10,11,16,.85)}
.a-imgsw .seg-tabs button{padding:7px 12px;font-size:13px}
.seg-tabs button{padding:10px 16px;font-weight:700;font-size:15px;color:var(--muted);background:none;border:0;cursor:pointer}
.seg-tabs button[aria-current="true"]{background:var(--purple);color:#fff}
/* A map's + or − it cannot use (at its zoom's limit): greyed. */
.leaflet-bar a.leaflet-disabled{color:#9AA3B2 !important;background:#E9ECF1 !important;cursor:default;pointer-events:none}

/* A track's card: its line from its file, small and yellow, at its left in a 9:16 frame as tall as the card's words,
   as far from them as the card's left edge is (turned as its map is). */
.trow > .t-in{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.trow > .t-in > .row:first-child{flex-wrap:nowrap;align-items:flex-start;gap:12px}
.trow > .t-in > .row:first-child h3{flex:1;min-width:0;line-height:1.2;overflow-wrap:anywhere}
.trow > .t-in > .row:first-child .badge{flex:none}
/* (the frame 9:16 for the card's two lines, 48 px: 27 px wide, held at the card's left, the words 18 px after it) */
.trow.has-shape{position:relative;padding-left:calc(18px + 27px + 18px)}
.trow > .t-shape{position:absolute;left:18px;top:18px;bottom:18px;width:27px;display:block}
.trow > .t-shape svg{display:block;width:100%;height:100%}
.trow > .t-shape path{fill:none;stroke:#FFB800;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-width:1.8px}
.a-imgsw .seg-tabs button.a-cont{border-left:1px solid rgba(255,255,255,.25)}
.a-imgsw .seg-tabs button.a-cont[aria-current="true"]{background:#FFB800;color:#05060A}

/* The archives' … and its menu (Delete All Archives in red), as the app's. */
.more-wrap{position:relative;margin-left:auto}
.more-btn{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--text);cursor:pointer}
.more-btn:hover{background:rgba(255,255,255,.08)}
.more-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:200;min-width:240px;padding:6px;border-radius:14px;background:#26292F;box-shadow:0 14px 40px -8px #000}
.more-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:12px;border:0;border-radius:10px;background:transparent;color:var(--text);font-family:inherit;font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;text-align:left}
.more-menu button:hover{background:rgba(255,255,255,.08)}
.more-menu .mn-del{color:#FF6B6B}
.t-arch{opacity:.62;cursor:pointer}

/* Recentre directly under + and − (as the app's). */
.map-ctlrow{flex-direction:column}
/* Admin → Vehicle categories (2026-10-25): each type a card, each category a row — its five names, kind, engine, hidden,
   its keys (↑ ↓ Save Delete); the last row adds one */
.vc-type{margin-bottom:16px;gap:10px}
.vc-type h2{font:800 20px var(--head);margin:0 0 4px}
.vc-type h2 small{font:600 13px var(--font);color:var(--muted);margin-left:6px}
.vc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--ink-3)}
.vc-row.is-hidden{opacity:.55}
.vc-row:last-child{border-style:dashed}
.two>.field.wide{grid-column:1/-1}
.vc-names{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.vc-n{display:flex;flex-direction:column;gap:3px;font:700 10px var(--font);color:var(--muted);letter-spacing:.06em}
.vc-n input{min-width:0;height:38px;padding:0 10px;font-size:14px}
.vc-opts{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.vc-opts label{display:flex;flex-direction:column;gap:3px;font:700 10px var(--font);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.vc-opts select{height:38px;font-size:14px}
.vc-opts .switch{flex-direction:row;text-transform:none;font:600 13px var(--font);color:var(--text);letter-spacing:0;padding-bottom:6px}
.vc-keys{display:flex;gap:6px;align-items:center}
.vc-keys .btn{height:38px;min-height:38px;padding:0 12px}
@media (max-width:900px){.vc-row{grid-template-columns:1fr}}

/* A track for several vehicle types: its badges side by side (user, 2026-10-25) */
.t-kinds{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.a-kinds{display:inline-flex}
.a-kinds button + button{border-left:1.5px solid var(--line)}

/* An S or a chicane on the track page (user, 2026-10-25): its name over its first turn — S blue, chicane orange */
.ly-cx{margin:8px 0 2px;font-size:13px;color:var(--muted)}
.ly-cx b{color:#1E6BFF;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-right:4px}
.ly-cx.ly-cx-chicane b{color:#FF8A1E}

/* A turn's name beside its apex, on the outside of the bend (--ox/--oy), so its apex dot shows (user, 2026-10-25) */
.ly-lab span{transform:translate(calc(-50% + var(--ox,0px)),calc(-50% + var(--oy,0px))) rotate(calc(-1 * var(--maprot, 0deg))) !important}

/* The driver's picture (Profile), as in the app */
.avatar.has-photo{background-size:cover;background-position:center}
.prof-pic{display:flex;align-items:center;gap:20px;flex-direction:row}
.prof-pic__txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.prof-pic__txt b{font:800 20px var(--head)}
.prof-pic__txt .row{margin-top:8px;gap:8px;flex-wrap:wrap}
.avatar-edit{position:relative;flex:none}
.avatar.big{width:96px;height:96px;border-radius:22px;font-size:34px;cursor:pointer;position:relative;background-size:cover;background-position:center}
.avatar-edit__pen{position:absolute;right:-8px;bottom:-8px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#05060A;font:900 22px/1 var(--font);border:3px solid var(--ink-2,#0B0D10)}
.crop{position:fixed;inset:0;z-index:400;background:rgba(5,6,10,.92);display:grid;place-items:center;padding:20px}
.crop__in{width:min(400px,100%);display:flex;flex-direction:column;gap:16px}
.crop__in h2{margin:0;text-align:center}
.crop__stage{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border-radius:16px;background:#000;touch-action:none;cursor:grab}
.crop__stage img{position:absolute;left:50%;top:50%;max-width:none;user-select:none;pointer-events:none}
.crop__ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(5,6,10,.55);border:2px solid rgba(255,255,255,.8);pointer-events:none}
.crop__zoom{width:100%;accent-color:var(--purple)}
.crop__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* (user, 2026-10-28) Vehicles: as in the app's Settings — the plate (a kart's yellow, a car's white), its name and kind,
   the default switch, change and remove */
.plate{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;flex:none;width:84px;height:84px;padding:0;border-radius:8px;border:3px solid #111;
  background:#fff;color:#000;caret-color:#000;text-align:center;font:400 52px/1 "Anton",var(--head);letter-spacing:0;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.plate.is-kart{background:#FFD400}
.plate.sm{width:44px;height:44px;border-width:2px;border-radius:6px;font-size:27px}
input.plate:focus{outline:3px solid color-mix(in srgb,#B98CFF 70%,transparent);outline-offset:2px}
.vh-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.vh-row{display:flex;align-items:center;gap:14px;flex-direction:row}
.vh-row:not(.is-def) .plate{opacity:.55}
.vh-what{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vh-what b{font:800 17px var(--head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vh-on{background:none;border:0;padding:4px;cursor:pointer}
.vh-on i{display:block;width:46px;height:26px;border-radius:999px;background:var(--ink-3);border:1.5px solid var(--line);position:relative;transition:background .2s}
.vh-on i::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.vh-on[aria-pressed="true"] i{background:#00C26E33;border-color:var(--green)}
.vh-on[aria-pressed="true"] i::after{transform:translateX(20px);background:var(--green)}
.vh-form__top{display:flex;align-items:flex-end;gap:16px}
.vh-form__top .field{flex:1;min-width:0}
@media (max-width:560px){.vh-row{flex-wrap:wrap}.vh-what{flex-basis:calc(100% - 60px)}}
/* (user, 2026-10-28) The app's Modern look: each frame's top edge coloured — blue, red, yellow, green in turn; a
   vehicle's yellow, as the app's Vehicles group */
.page .content .card{border-top:3px solid var(--blue)}
.page .content .card:nth-child(4n+2){border-top-color:var(--red)}
.page .content .card:nth-child(4n+3){border-top-color:var(--yellow)}
.page .content .card:nth-child(4n+4){border-top-color:var(--green)}
.page .content .vh-list .card{border-top-color:var(--yellow)}

/* (user, 2026-10-28) Settings → Theme: the app's themes for the website, on <html data-theme> (none: Modern), set
   before the first paint by app.html and kept on this browser. The app's colours, frames and keys; the top edges kept. */
.th-pick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media (max-width:900px){.th-pick{grid-template-columns:repeat(3,minmax(0,1fr))}}
.th-key{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:8px;border-radius:14px;border:1.5px solid var(--line);background:#12151A;color:var(--text);cursor:pointer;font:700 13px var(--font);text-align:center}
.th-key[aria-pressed="true"]{border-color:#FFB800;box-shadow:0 0 0 3px #FFB800}
.th-key b{font:800 13px/1 var(--head);text-transform:uppercase;letter-spacing:.06em}
.th-sw{position:relative;display:flex;flex-direction:column;gap:4px;height:58px;padding:6px;border-radius:9px;overflow:hidden;background:#05060A}
.th-sw > i{flex:1;border-radius:4px}
.th-modern .th-sw > i{background:#12151A;border:1px solid #262B34;border-top:2px solid #1E6BFF}
.th-modern .th-sw > i:nth-child(2){border-top-color:#FF2D3A}
.th-modern .th-sw > i:nth-child(3){border-top-color:#FFB800}
.th-t1 .th-sw{background:linear-gradient(180deg,#2A2B30,#1E1F23)}
.th-t1 .th-sw > i{flex:none;height:12px;width:70%;margin:0 auto;background:linear-gradient(180deg,#36373D,#2A2B30);border-radius:5px;border-top:2px solid #FF8A4C}
.th-t1 .th-sw > i:nth-child(2){border-top-color:#FF4F7B}.th-t1 .th-sw > i:nth-child(3){border-top-color:#3FA9FF}
.th-t2 .th-sw{background:linear-gradient(180deg,#16181D,#0C0D10)}
.th-t2 .th-sw > i{flex:none;height:12px;width:70%;margin:0 auto;background:#22252C;border:1px solid #2C3038;border-radius:3px;border-top:2px solid #FFA43A;box-shadow:0 -2px 8px -2px rgba(255,164,58,.6)}
.th-t3 .th-sw{background:#2E2F33}
.th-t3 .th-sw > i{flex:none;height:12px;width:70%;margin:0 auto;background:#34353A;border-radius:7px;box-shadow:3px 3px 5px #1F2023,-2px -2px 4px #3E3F45;border-top:2px solid #00E5FF}
.th-t3 .th-sw > i:nth-child(2){border-top-color:#FF2BD6}.th-t3 .th-sw > i:nth-child(3){border-top-color:#C6FF00}
.th-t4 .th-sw{background:#000}
.th-t4 .th-sw > i{flex:none;height:12px;width:70%;margin:0 auto;background:#0E1212;border:1px solid #2E3434;border-top:2px solid #3FE6B4;clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%,0 5px);box-shadow:inset 0 6px 8px -6px rgba(63,230,180,.5)}
.th-t5 .th-sw{background:#141416}
.th-t5 .th-sw > i{flex:none;height:12px;width:70%;margin:0 auto;background:#2A2A2D;border-radius:7px;border-top:2px solid #1E6BFF}
.th-t5 .th-sw > i:nth-child(2){border-top-color:#FF5A1F}.th-t5 .th-sw > i:nth-child(3){border-top-color:#2BD66A}
/* Theme 1: soft graphite, gradient frames */
:root[data-theme="t1"]{--ink:#1E1F23;--line:#34363C;--ink-2:#2A2B30;--ink-3:#303137;--muted:#A3A6AF;--acc:#FF8A4C}
:root[data-theme="t1"] body{background:radial-gradient(120% 70% at 50% -15%,#34363C 0%,rgba(52,54,60,0) 60%),linear-gradient(180deg,#25262B,#1A1B1F) fixed}
:root[data-theme="t1"] .card{background:linear-gradient(180deg,#34353B 0%,#2B2C31 60%,#27282D 100%);border-left:1px solid rgba(255,255,255,.04);border-right:1px solid rgba(0,0,0,.25);border-bottom:1px solid rgba(0,0,0,.35);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 22px -6px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.35)}
:root[data-theme="t1"] .btn.main{background:linear-gradient(90deg,#FF8A4C,#FF4F7B);color:#fff}
/* Theme 2: dark instrument panel, amber */
:root[data-theme="t2"]{--ink:#0F1014;--line:#2A2D34;--ink-2:#1A1C21;--ink-3:#202329;--muted:#8E95A1;--acc:#FFA43A;--g-bg:#14161A;--g-sh:inset 0 2px 5px rgba(0,0,0,.7);--g-rad:10px;--k-rad:8px}
:root[data-theme="t2"] body{background:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,rgba(255,255,255,0) 1px 4px),linear-gradient(180deg,#16181D,#0C0D10) fixed}
:root[data-theme="t2"] .card{background:linear-gradient(180deg,#22252C 0%,#1B1D23 100%);border-left:1px solid #2C3038;border-right:1px solid #2C3038;border-bottom:1px solid #121318;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(0,0,0,.35),0 8px 18px -6px rgba(0,0,0,.8)}
:root[data-theme="t2"] .btn.main{background:linear-gradient(180deg,#FFB65C,#FF9A1F);color:#1A1205;box-shadow:0 0 18px -4px rgba(255,164,58,.6),inset 0 1px 0 rgba(255,255,255,.4)}
/* Theme 3: soft relief (neumorphic), neon edges */
:root[data-theme="t3"]{--ink:#26272B;--line:#3A3B40;--ink-2:#36373B;--ink-3:#3B3C41;--muted:#A9ABB2;--acc:#00E5A0;--g-bg:#2C2D31;--g-sh:inset 5px 5px 10px #222326,inset -4px -4px 10px #3C3D42;--g-rad:16px;--k-rad:12px}
:root[data-theme="t3"] body{background:linear-gradient(180deg,#2B2C30,#232428) fixed}
:root[data-theme="t3"] .card{background:linear-gradient(145deg,#36373B,#2F3034);border-left:0;border-right:0;border-bottom:0;border-radius:22px;box-shadow:9px 9px 18px #1F2023,-7px -7px 16px #3E3F45}
:root[data-theme="t3"] .btn.main{background:linear-gradient(145deg,#3A3B40,#323337);color:#00E5A0;box-shadow:6px 6px 12px #1F2023,-5px -5px 11px #3E3F45,inset 0 0 0 1px rgba(0,229,160,.45)}
:root[data-theme="t3"] :is(input,select,textarea){box-shadow:inset 5px 5px 10px #222326,inset -4px -4px 10px #3C3D42}
/* Theme 4: black, cut corners, mint */
:root[data-theme="t4"]{--ink:#000;--line:#2A2E2E;--ink-2:#0A0C0C;--ink-3:#111414;--muted:#9AA6A3;--acc:#3FE6B4;--k-rad:3px}
:root[data-theme="t4"] .card{background:linear-gradient(180deg,#0E1212 0%,#050606 100%);border-left:1px solid #2E3434;border-right:1px solid #2E3434;border-bottom:1px solid #2E3434;border-radius:4px;box-shadow:inset 0 14px 22px -14px rgba(63,230,180,.18)}
:root[data-theme="t4"] .btn{border-radius:4px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
/* Theme 5: rounded, flat, green */
:root[data-theme="t5"]{--ink:#141416;--line:#2C2C30;--ink-2:#232326;--ink-3:#2A2A2E;--muted:#9C9CA3;--acc:#2BD66A;--g-bg:#1C1C1F;--g-sh:none;--g-rad:22px;--k-rad:18px}
:root[data-theme="t5"] .card{background:linear-gradient(160deg,#2A2A2D 0%,#222225 100%);border-left:0;border-right:0;border-bottom:0;border-radius:26px;box-shadow:0 14px 30px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05)}
:root[data-theme="t5"] .btn.main{background:#2BD66A;color:#0B1A10;box-shadow:0 10px 20px -10px rgba(43,214,106,.7)}
/* (user, 2026-10-28) as the app: sessions green, tracks blue (My tracks too), Settings as its Display group blue */
.page .content .card.srun{border-top-color:var(--green)}
.page .content .card.trow{border-top-color:var(--blue)}
.page .content .card.set-disp{border-top-color:var(--blue)}
/* (user, 2026-10-28) Settings: the language and the units as the app's choice keys — a well, the chosen key raised in
   the theme's colour */
.seg{display:flex;gap:4px;padding:3px;background:var(--g-bg,var(--ink));border:1px solid var(--line);border-radius:var(--g-rad,12px);box-shadow:var(--g-sh,inset 0 2px 6px rgba(0,0,0,.6));width:fit-content;max-width:100%;flex-wrap:wrap}
.seg > button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border:0;border-radius:var(--k-rad,9px);background:transparent;color:var(--text);font:600 15px var(--font);cursor:pointer}
.seg > button:hover{background:color-mix(in srgb,var(--ink-3) 60%,transparent)}
.seg > button[aria-pressed="true"]{background:var(--ink-3);color:var(--acc,var(--yellow));box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
:root[data-theme="t1"] .seg > button[aria-pressed="true"]{background:linear-gradient(180deg,#3B3C42,#2E2F34);text-shadow:0 0 10px rgba(255,138,76,.55)}
:root[data-theme="t3"] .seg > button[aria-pressed="true"]{background:linear-gradient(145deg,#3A3B40,#323337);box-shadow:4px 4px 8px #1F2023,-3px -3px 7px #3E3F45}
.seg .flag{width:24px;height:16px;border-radius:2px;object-fit:cover}
.set-units{display:flex;flex-wrap:wrap;gap:18px}
.set-units > div{display:flex;flex-direction:column;gap:6px}
.set-units .label{font-weight:600;color:var(--muted);font-size:14px}
.plans-h{font:800 18px var(--head);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 0 10px}
/* (user, 2026-10-28) Admin → Stripe: a key shown as it is — its own case (keys are case-sensitive), wrapped in its frame */
.badge.key-val{text-transform:none;letter-spacing:0;white-space:normal;word-break:break-all;max-width:100%;font:600 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;border-radius:10px}

/* (user, 2026-10-29) the profile picture bigger; removed with a round bin key at its bottom left (no Remove button);
   the crop guide square — the picture is saved square */
.avatar.big{width:136px;height:136px;border-radius:26px;font-size:46px}
.avatar-edit__bin{position:absolute;left:-8px;bottom:-8px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;padding:0;background:#fff;color:#E01B2B;border:3px solid var(--ink-2,#0B0D10);cursor:pointer}
.avatar-edit__bin:hover{background:#FFE3E5}
.crop__ring{border-radius:16px;box-shadow:none}
html body .crop,html body .crop__stage{touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:contain}

/* (user, 2026-10-29) Admin → Subscriptions: each column on one line (names and dates no longer broken), the owner's alone may wrap */
table.subs-tbl th,table.subs-tbl td{white-space:nowrap}
table.subs-tbl td:first-child{white-space:normal;min-width:140px}
/* (user, 2026-11-01) Anything clickable shows the hand pointer (links, keys, switches, menu rows, anything with an action);
   disabled ones keep the arrow */
:is(a[href], button, summary, select, label[for], [role="button"], [role="switch"], [role="tab"], [role="link"], [role="option"], [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"], [data-act], [onclick], input:is([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"])):not(:disabled):not([aria-disabled="true"]){cursor:pointer}
:is(button, [role="button"], [data-act], select, input):is(:disabled, [aria-disabled="true"]){cursor:default}
.feat-lnk{color:var(--yellow,#FFB800);font-weight:700} /* (a plan line that leads to its page) */
.card.launch{border:1px solid #FFB80066;background:linear-gradient(135deg,#FFB80012,transparent)} .card.launch h3{color:var(--yellow,#FFB800)} /* (the launch said on the plans page) */

/* (user, 2026-11-01) The profile's functions, in badges under the picture */
.prof-pic{flex-wrap:wrap}
.prof-fns{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px}
/* (user, 2026-11-01) Each function its own colour, as in the app */
.prof-fns .badge.fn-driver{background:rgba(255,122,0,.4);color:#fff}
.prof-fns .badge.fn-coach{background:rgba(46,204,113,.4);color:#fff}
.prof-fns .badge.fn-manager{background:rgba(166,107,255,.4);color:#fff}
.prof-fns .badge.fn-mgr{background:rgba(211,166,255,.4);color:#fff}
.prof-fns .badge.fn-engineer{background:rgba(61,139,255,.4);color:#fff}
.prof-fns .badge.fn-analyst{background:rgba(34,199,224,.4);color:#fff}
.prof-fns .badge.fn-chief{background:rgba(255,77,77,.4);color:#fff}
.prof-fns .badge.fn-mechanic{background:rgba(255,95,168,.4);color:#fff}
.prof-fns .badge{height:18px;padding:0 6px;border-radius:6px;font:800 10px/18px var(--font);letter-spacing:.04em}
.prof-fns .badge.fn-pcoach{background:rgba(46,204,113,.4);color:#fff}
/* (user, 2026-11-02) admin › a user's subscriptions: a white trash (end it), a pen with a green frame (licenses, end date) */
.btn.icon.sub-bin{background:none;border:0;color:#fff;box-shadow:none}
.btn.icon.sub-bin:hover{background:rgba(255,255,255,.08)}
.btn.icon.sub-pen{background:none;border:2px solid var(--green,#00C26E);color:#fff;box-shadow:none}
.btn.icon.sub-pen:hover{background:rgba(0,194,110,.12)}
/* (user, 2026-11-02) admin › a user: their functions, a line each */
.fns-card .fn-list{display:flex;flex-direction:column;gap:8px}
.fns-card .fn-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04)}
.fns-card .fn-who{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.fns-card .fn-n{white-space:nowrap}
.fns-card .fn-b{background:#4C3A8C;color:#fff}
.fns-card .fn-b.fn-pcoach,.fns-card .fn-b.fn-coach{background:#2F6B4A}
.fns-card .fn-b.fn-mechanic,.fns-card .fn-b.fn-chief{background:#7A3B5E}
/* (user, 2026-11-02) every line's keys on the account and admin pages: white trash, white pen in a green frame, the
   switch, then an arrow at the far right; a hand wherever a click does something */
.rkeys{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;flex:none;margin-left:auto;vertical-align:middle}
.rk{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;padding:0;margin:0;border-radius:999px;background:none;border:0;color:#fff;cursor:pointer;box-shadow:none;font:inherit}
.rk svg{display:block;width:20px;height:20px}
.rk:hover{background:rgba(255,255,255,.08)}
.rk.rk-pen{border:2px solid var(--green,#00C26E)}
.rk.rk-pen:hover{background:rgba(0,194,110,.12)}
.rk.rk-go{width:28px;color:var(--muted,#A9B1BE)}
.rk.rk-go:hover{background:none;color:#fff}
span.rk.rk-go{cursor:inherit}
.rk-row,tr.go,tr[data-act],a.card,[role="button"][data-act]{cursor:pointer}
.rk-row :is(label.switch,input,.vh-on){cursor:pointer}
.vh-row .rkeys{margin-left:auto}
.dev-acts{display:flex;align-items:center;justify-content:flex-end;gap:8px}
/* a card that opens as a whole (a track, a session): its arrow at the far right, in the middle of its height */
a.card.trow,a.card.srun{position:relative;padding-right:46px}
a.card.trow > .rk-go,a.card.srun > .rk-go{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
/* the admin's tables whose lines open (sessions, tracks, updates): the arrow drawn at the end of each line */
table.a-table tbody tr[data-act] > td:last-child{position:relative;padding-right:44px}
table.a-table tbody tr[data-act] > td:last-child::after{content:'';position:absolute;right:12px;top:50%;width:20px;height:20px;transform:translateY(-50%);background:var(--muted,#A9B1BE);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
/* (user, 2026-11-02) the picture's pen as the app's: white pen on green, a little ring of the frame's colour */
.avatar-edit__pen{background:var(--green,#00C26E);color:#fff;box-shadow:0 0 0 4px var(--ink-2,#14161B)}
/* (user, 2026-11-02) Theme 4: buttons with plain corners (no cut corners) */
:root[data-theme="t4"] .btn{clip-path:none}
/* (user, 2026-11-02) Theme 3: each frame's top line thinner and less bright */
:root[data-theme="t3"] .page .content .card{border-top-width:2px;border-top-color:color-mix(in srgb,var(--blue) 55%,#2F3034)}
:root[data-theme="t3"] .page .content .card:nth-child(4n+2){border-top-color:color-mix(in srgb,var(--red) 55%,#2F3034)}
:root[data-theme="t3"] .page .content .card:nth-child(4n+3){border-top-color:color-mix(in srgb,var(--yellow) 55%,#2F3034)}
:root[data-theme="t3"] .page .content .card:nth-child(4n+4){border-top-color:color-mix(in srgb,var(--green) 55%,#2F3034)}
:root[data-theme="t3"] .page .content .vh-list .card,:root[data-theme="t3"] .page .content .card.srun{border-top-color:color-mix(in srgb,var(--yellow) 55%,#2F3034)}
:root[data-theme="t3"] .page .content .card.srun{border-top-color:color-mix(in srgb,var(--green) 55%,#2F3034)}
:root[data-theme="t3"] .page .content :is(.card.trow,.card.set-disp){border-top-color:color-mix(in srgb,var(--blue) 55%,#2F3034)}
/* (user, 2026-11-02) Account › My functions: the app's lines — a logo when there is one, a name over the badges */
.fns-card .fn-row{min-height:56px}
.fns-card .fn-row.is-off > :not(.rkeys){opacity:.5}
.fns-card .fn-who{flex-direction:column;align-items:flex-start;gap:4px;flex:1 1 auto}
.fns-card .fn-who > b{display:flex;align-items:center;gap:8px}
.fns-card .fn-who .badge + .badge{margin-left:0}
.fns-card .fn-who:has(.badge + .badge){flex-direction:column}
.fns-card .fn-logo{flex:none;width:40px;height:40px;border-radius:8px;background:#fff center/cover no-repeat}
.fns-card .fn-logo.is-ini{display:grid;place-items:center;background:#8F3BFF;color:#fff;font:800 15px var(--head,inherit)}
.fns-card .fn-row .rk-go{margin-left:4px}
/* (user, 2026-11-02) an Add key always at the right of its own line; a coloured key's background under its border too
   (no seam at its edge); the vehicles' Add as close to the last vehicle as the vehicles are to each other */
.add-line{display:flex;justify-content:flex-end}
.btn{background-origin:border-box}
.vh-list{margin-bottom:0}
.vh-list + .add-line{margin-top:-12px}
/* (user, 2026-11-02) Account › My functions: the frame's content exactly as the app's Settings frame (Modern) —
   lines 59 px, 6 px apart, the picture 40 px, the badges, the counts and the arrow at the app's sizes */
.fns-card.card{padding:12px}
.fns-card .fn-list{gap:6px}
.fns-card .fn-row{min-height:59px;padding:8px 6px 8px 12px;gap:12px;border-radius:7.5px;background:#1A1E25;border:1.5px solid #262B34;box-sizing:border-box}
.fns-card .fn-logo{width:40px;height:40px;border-radius:6px;font-size:15px}
.fns-card .fn-who{flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px}
.fns-card .fn-who > b{font:700 16px var(--font,Inter,system-ui,sans-serif);color:#fff}
.fns-card .fn-b{font:800 12px/18px Inter,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:0 6px;border-radius:6px;color:#fff;border:1px solid transparent}
.fns-card .fn-b.fn-manager{background:rgba(166,107,255,.4);border-color:rgba(166,107,255,.35)}
.fns-card .fn-b.fn-mgr{background:rgba(211,166,255,.4);border-color:rgba(211,166,255,.35)}
.fns-card .fn-b:is(.fn-coach,.fn-pcoach){background:rgba(46,204,113,.4);border-color:rgba(46,204,113,.35)}
.fns-card .fn-b.fn-engineer{background:rgba(61,139,255,.4);border-color:rgba(61,139,255,.35)}
.fns-card .fn-b.fn-analyst{background:rgba(34,199,224,.4);border-color:rgba(34,199,224,.35)}
.fns-card .fn-b.fn-chief{background:rgba(255,77,77,.4);border-color:rgba(255,77,77,.35)}
.fns-card .fn-b.fn-mechanic{background:rgba(255,95,168,.4);border-color:rgba(255,95,168,.35)}
.fns-card .fn-b.fn-driver{background:rgba(255,122,0,.4);border-color:rgba(255,122,0,.35)}
.fns-card .fn-n{margin-left:auto;display:inline-flex;align-items:baseline;gap:6px}
.fns-card .fn-n .muted{font:500 14px Inter,system-ui,sans-serif;color:#9AA3B2}
.fns-card .fn-n b{font:700 16px Saira,system-ui,sans-serif;color:#fff}
.fns-card .fn-row .rk-go{width:18px;height:18px;margin:0 0 0 2px;opacity:.6;color:currentColor}
.fns-card .fn-row .rk-go svg{width:18px;height:18px}
.fns-card .fn-row .rkeys{margin-left:auto}
.fns-card .fn-b{border:0 !important}
/* (user, 2026-11-02) website My functions frame = the app's Settings frame in each theme: the frame, its sunken list, the raised lines (measured from the app) */
html:root body .page .content .card.fns-card{padding:12px !important;background:#12151A !important;box-shadow:none !important;border-radius:20px !important}
html:root body .page .content :is(.card.fns-card .fn-list,.ap-list){background:none !important;box-shadow:none !important;border-radius:12px !important;padding:0 !important;gap:6px !important}
html:root body .page .content :is(.card.fns-card .fn-row,.ap-row){min-height:0 !important;background:#1A1E25 !important;box-shadow:none !important;border:1.5px solid #262B34 !important;border-radius:7.5px !important;padding:8px 6px 8px 12px !important}
html:root body .page .content .card.fns-card .fn-n .muted{color:#9AA3B2 !important}
html:root[data-theme="t1"] body .page .content .card.fns-card{padding:12px !important;background:linear-gradient(180deg,#34353B 0%,#2B2C31 60%,#27282D 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 22px -6px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.35) !important;border-radius:16px !important}
html:root[data-theme="t1"] body .page .content :is(.card.fns-card .fn-list,.ap-list){background:#1F2024 !important;box-shadow:inset 0 2px 6px rgba(0,0,0,.65) !important;border-radius:12px !important;padding:3px !important;gap:3px !important}
html:root[data-theme="t1"] body .page .content :is(.card.fns-card .fn-row,.ap-row){min-height:0 !important;background:linear-gradient(180deg,#3B3C42,#2E2F34) !important;box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08) !important;border:0 !important;border-radius:9px !important;padding:10px 8px 10px 14px !important}
html:root[data-theme="t1"] body .page .content .card.fns-card .fn-n .muted{color:#A3A6AF !important}
html:root[data-theme="t2"] body .page .content .card.fns-card{padding:12px !important;background:linear-gradient(180deg,#22252C 0%,#1B1D23 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(0,0,0,.35),0 8px 18px -6px rgba(0,0,0,.8) !important;border-radius:10px !important}
html:root[data-theme="t2"] body .page .content :is(.card.fns-card .fn-list,.ap-list){background:#14161A !important;box-shadow:inset 0 2px 5px rgba(0,0,0,.7) !important;border-radius:10px !important;padding:3px !important;gap:3px !important}
html:root[data-theme="t2"] body .page .content :is(.card.fns-card .fn-row,.ap-row){min-height:0 !important;background:linear-gradient(180deg,#2A2D35,#20232A) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 3px 8px rgba(0,0,0,.6) !important;border:0 !important;border-radius:8px !important;padding:10px 8px 10px 14px !important}
html:root[data-theme="t2"] body .page .content .card.fns-card .fn-n .muted{color:#8E95A1 !important}
html:root[data-theme="t3"] body .page .content .card.fns-card{padding:12px !important;background:linear-gradient(160deg,#3B3C41,#34353A) !important;box-shadow:8px 8px 16px #18191C,-6px -6px 14px #3A3B41 !important;border-radius:22px !important}
html:root[data-theme="t3"] body .page .content :is(.card.fns-card .fn-list,.ap-list){background:#2C2D31 !important;box-shadow:inset 1.5px 1.5px 4px #222326,inset -1.5px -1.5px 4px #3C3D42 !important;border-radius:16px !important;padding:5px !important;gap:5px !important}
html:root[data-theme="t3"] body .page .content :is(.card.fns-card .fn-row,.ap-row){min-height:0 !important;background:linear-gradient(145deg,#3A3B40,#323337) !important;box-shadow:0 0 0 1px rgba(255,255,255,.04),1px 1px 3px #1F2023,-1px -1px 3px #3E3F45 !important;border:0 !important;border-radius:12px !important;padding:10px 8px 10px 14px !important}
html:root[data-theme="t3"] body .page .content .card.fns-card .fn-n .muted{color:#A9ABB2 !important}
html:root[data-theme="t4"] body .page .content .card.fns-card{padding:12px !important;background:linear-gradient(180deg,#0E1212 0%,#050606 100%) !important;box-shadow:inset 0 14px 22px -14px rgba(63,230,180,.18) !important;border-radius:8px !important}
html:root[data-theme="t4"] body .page .content :is(.card.fns-card .fn-list,.ap-list){background:none !important;box-shadow:none !important;border-radius:6px !important;padding:0 !important;gap:6px !important}
html:root[data-theme="t4"] body .page .content :is(.card.fns-card .fn-row,.ap-row){min-height:0 !important;background:#111414 !important;box-shadow:none !important;border:1.5px solid #2A2E2E !important;border-radius:3px !important;padding:8px 6px 8px 12px !important}
html:root[data-theme="t4"] body .page .content .card.fns-card .fn-n .muted{color:#9AA6A3 !important}
html:root[data-theme="t5"] body .page .content .card.fns-card{padding:12px !important;background:linear-gradient(160deg,#2A2A2D 0%,#222225 100%) !important;box-shadow:0 14px 30px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05) !important;border-radius:26px !important}
html:root[data-theme="t5"] body .page .content :is(.card.fns-card .fn-list,.ap-list){background:#1C1C1F !important;box-shadow:none !important;border-radius:12px !important;padding:3px !important;gap:3px !important}
html:root[data-theme="t5"] body .page .content :is(.card.fns-card .fn-row,.ap-row){min-height:0 !important;background:#2A2A2E !important;box-shadow:0 6px 14px -8px #000 !important;border:0 !important;border-radius:10px !important;padding:10px 8px 10px 14px !important}
html:root[data-theme="t5"] body .page .content .card.fns-card .fn-n .muted{color:#9C9CA3 !important}
html:root body .page .content .card.fns-card{border-top-color:#22C7E0 !important}
/* (user, 2026-11-02) every website frame with the app's frame look in each theme (background, shadow, corners) */
html:root body .page .content .card:not(.fns-card){background:#12151A !important;box-shadow:none !important;border-radius:20px !important}
html:root[data-theme="t1"] body .page .content .card:not(.fns-card){background:linear-gradient(180deg,#34353B 0%,#2B2C31 60%,#27282D 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 22px -6px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.35) !important;border-radius:16px !important}
html:root[data-theme="t2"] body .page .content .card:not(.fns-card){background:linear-gradient(180deg,#22252C 0%,#1B1D23 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(0,0,0,.35),0 8px 18px -6px rgba(0,0,0,.8) !important;border-radius:10px !important}
html:root[data-theme="t3"] body .page .content .card:not(.fns-card){background:linear-gradient(160deg,#3B3C41,#34353A) !important;box-shadow:8px 8px 16px #18191C,-6px -6px 14px #3A3B41 !important;border-radius:22px !important}
html:root[data-theme="t4"] body .page .content .card:not(.fns-card){background:linear-gradient(180deg,#0E1212 0%,#050606 100%) !important;box-shadow:inset 0 14px 22px -14px rgba(63,230,180,.18) !important;border-radius:8px !important}
html:root[data-theme="t5"] body .page .content .card:not(.fns-card){background:linear-gradient(160deg,#2A2A2D 0%,#222225 100%) !important;box-shadow:0 14px 30px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05) !important;border-radius:26px !important}
.ap-list{display:flex;flex-direction:column}
.ap-row{display:flex;align-items:center;gap:12px;box-sizing:border-box}
.vh-frame .add-line{margin-top:0}
html:root body .page .content .card.vh-frame{border-top-color:var(--yellow) !important}
html:root[data-theme="t3"] body .page .content .card.vh-frame{border-top-color:color-mix(in srgb,var(--yellow) 55%,#2F3034) !important}
/* (user, 2026-11-02) the Team members and Private Coach pages: each frame's title above it, the app's lines */
.frame-h{font:800 15px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:6px 0 -12px}
.fn-frame{padding:12px !important;gap:12px}
.fn-frame .ap-row{min-height:59px}
.fn-frame .fn-who{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:1 1 auto;min-width:0}
.fn-frame .fn-who > b{display:flex;align-items:center;gap:8px;font:700 16px var(--font);color:#fff}
.fn-frame .fn-who > b.big{font:800 20px var(--head)}
.fn-frame .fn-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fn-frame .fn-logo{flex:none;width:48px;height:48px;border-radius:8px;background:#fff center/cover no-repeat}
.fn-frame .fn-logo.big{width:80px;height:80px;border-radius:12px}
.fn-frame .fn-logo.is-ini{display:grid;place-items:center;background:#8F3BFF;color:#fff;font:800 16px var(--head)}
.fn-frame .fn-team{display:flex;align-items:center;gap:16px;cursor:default}
.fn-frame .fn-b{background:var(--ink-3);color:#fff}
.fn-frame .fn-b.fn-manager{background:rgba(166,107,255,.4)}.fn-frame .fn-b.fn-mgr{background:rgba(211,166,255,.4)}
.fn-frame .fn-b:is(.fn-coach,.fn-pcoach){background:rgba(46,204,113,.4)}.fn-frame .fn-b.fn-engineer{background:rgba(61,139,255,.4)}
.fn-frame .fn-b.fn-analyst{background:rgba(34,199,224,.4)}.fn-frame .fn-b.fn-chief{background:rgba(255,77,77,.4)}.fn-frame .fn-b.fn-mechanic{background:rgba(255,95,168,.4)}
.badge.free-b{background:#FFD21F;color:#000}
.fn-frame .ap-row.is-off > :not(.rkeys){opacity:.5}
.fn-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px}
.fn-cnt{display:flex;flex-direction:column;gap:2px}
.fn-cnt b{font:700 16px var(--font)}
.fn-addf{display:flex;flex-direction:column;gap:10px}
.fn-addf[hidden]{display:none}
/* (user, 2026-11-02) every badge on the website half as big again */
.badge{font-size:18px;padding:6px 15px;gap:9px}
.badge.key-val{font-size:19.5px}
.prof-fns .badge{height:27px;padding:0 9px;border-radius:9px;font-size:15px;line-height:27px}
.fns-card .fn-b,.fn-frame .fn-b{font-size:18px;line-height:27px;padding:0 9px;border-radius:9px}
html:root body .page .content .card.fn-frame{border-top-color:var(--green) !important}
/* (user, 2026-11-02) website lists: no frame round a list — each line a frame of its own (as the vehicles were), with the app's frame look in each theme */
html:root body .page .content :is(.card.ap-frame.ap-frame.ap-frame,.card.fns-card.fns-card.fns-card){background:none !important;background-image:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important}
html:root:root:root body .page .content :is(.card.ap-frame.ap-frame.ap-frame,.card.fns-card.fns-card.fns-card) :is(.ap-list.ap-list.ap-list,.fn-list.fn-list.fn-list){background:none !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important;gap:10px !important}
html:root body .page .content .card.vh-frame{--row-top:var(--yellow)} html:root body .page .content .card.fns-card{--row-top:#22C7E0} html:root body .page .content .card.fn-frame{--row-top:var(--green)}
html:root body .page .content :is(.card.ap-frame,.card.fns-card) .fn-team{padding:18px;border-top:3px solid var(--row-top,var(--blue));border-radius:var(--radius-lg)}
html:root body .page .content :is(.card.ap-frame,.card.fns-card) :is(.ap-row,.fn-row,.fn-team){background:#12151A !important;box-shadow:none !important;border-radius:20px !important;border:0 !important;border-top:3px solid var(--row-top,var(--blue)) !important;padding:14px 16px !important;min-height:0 !important}
html:root[data-theme="t1"] body .page .content :is(.card.ap-frame,.card.fns-card) :is(.ap-row,.fn-row,.fn-team){background:linear-gradient(180deg,#34353B 0%,#2B2C31 60%,#27282D 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 22px -6px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.35) !important;border-radius:16px !important;border:0 !important;border-top:3px solid var(--row-top,var(--blue)) !important;padding:14px 16px !important;min-height:0 !important}
html:root[data-theme="t2"] body .page .content :is(.card.ap-frame,.card.fns-card) :is(.ap-row,.fn-row,.fn-team){background:linear-gradient(180deg,#22252C 0%,#1B1D23 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(0,0,0,.35),0 8px 18px -6px rgba(0,0,0,.8) !important;border-radius:10px !important;border:0 !important;border-top:3px solid var(--row-top,var(--blue)) !important;padding:14px 16px !important;min-height:0 !important}
html:root[data-theme="t3"] body .page .content :is(.card.ap-frame,.card.fns-card) :is(.ap-row,.fn-row,.fn-team){background:linear-gradient(160deg,#3B3C41,#34353A) !important;box-shadow:8px 8px 16px #18191C,-6px -6px 14px #3A3B41 !important;border-radius:22px !important;border:0 !important;border-top:3px solid var(--row-top,var(--blue)) !important;padding:14px 16px !important;min-height:0 !important}
html:root[data-theme="t4"] body .page .content :is(.card.ap-frame,.card.fns-card) :is(.ap-row,.fn-row,.fn-team){background:linear-gradient(180deg,#0E1212 0%,#050606 100%) !important;box-shadow:inset 0 14px 22px -14px rgba(63,230,180,.18) !important;border-radius:8px !important;border:0 !important;border-top:3px solid var(--row-top,var(--blue)) !important;padding:14px 16px !important;min-height:0 !important}
html:root[data-theme="t5"] body .page .content :is(.card.ap-frame,.card.fns-card) :is(.ap-row,.fn-row,.fn-team){background:linear-gradient(160deg,#2A2A2D 0%,#222225 100%) !important;box-shadow:0 14px 30px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05) !important;border-radius:26px !important;border:0 !important;border-top:3px solid var(--row-top,var(--blue)) !important;padding:14px 16px !important;min-height:0 !important}
html:root body .page .content :is(.card.ap-frame,.card.fns-card){gap:10px !important}
html:root body .page .content .fn-foot{padding:4px 2px 0}
/* (user, 2026-11-02, later) every badge on the website a quarter bigger than at first (not half): 12 → 15 px */
.badge{font-size:15px;padding:5px 12.5px;gap:7.5px}
.badge.key-val{font-size:16.25px}
.prof-fns .badge{height:22.5px;padding:0 7.5px;border-radius:7.5px;font-size:12.5px;line-height:22.5px}
.fns-card .fn-b,.fn-frame .fn-b{font-size:15px;line-height:22.5px;padding:0 7.5px;border-radius:7.5px}
.btn{background-origin:border-box !important} /* (user, 2026-11-02: a theme setting a key's whole background — its gradient still under the border, no seam at its sides) */
/* (user, 2026-11-02) website slides as the app's: the two pages side by side in one stage, clipped at the menu's edge */
.content-stage{display:grid;min-width:0;overflow-x:clip;overflow-y:visible}
.content-stage > .content{grid-area:1/1;min-width:0}
.content-stage.go-left > .content:not(.slide-old){animation:pg-in-right .35s cubic-bezier(.2,.7,.2,1) both}
.content-stage.go-left > .slide-old{animation:pg-out-left .35s cubic-bezier(.2,.7,.2,1) both}
.content-stage.go-right > .content:not(.slide-old){animation:pg-in-left .35s cubic-bezier(.2,.7,.2,1) both}
.content-stage.go-right > .slide-old{animation:pg-out-right .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes pg-in-right{from{transform:translateX(calc(100% + 36px))}to{transform:none}}
@keyframes pg-out-left{from{transform:none}to{transform:translateX(calc(-100% - 36px))}}
@keyframes pg-in-left{from{transform:translateX(calc(-100% - 36px))}to{transform:none}}
@keyframes pg-out-right{from{transform:none}to{transform:translateX(calc(100% + 36px))}}
.slide-old{pointer-events:none}
/* (user, 2026-11-02) the gap between a list's frames, and before the keys under it, as between the Profile page's frames (22 px) */
html:root:root:root body .page .content :is(.card.ap-frame.ap-frame.ap-frame,.card.fns-card.fns-card.fns-card) :is(.ap-list.ap-list.ap-list,.fn-list.fn-list.fn-list){gap:22px !important}
html:root:root:root body .page .content :is(.card.ap-frame.ap-frame.ap-frame,.card.fns-card.fns-card.fns-card){gap:22px !important}
html:root:root:root body .page .content :is(.card.ap-frame,.card.fns-card) :is(.add-line,.fn-foot){margin-top:0 !important;padding-top:0 !important}
/* (user, 2026-11-02) the side menu: each line's background less tall, a little more room between them (same spacing) */
@media (min-width:861px){.side{gap:6px}.side a{padding:7px 12px}}
/* (user, 2026-11-02) a line's keys: the trash in a red frame (as the pen's green one); every gap at the right the same —
   between the keys, the switch and the arrow, and from the arrow to the frame's edge (12 px) */
.rk.rk-bin{border:2px solid #E5484D}
.rk.rk-bin:hover{background:rgba(229,72,77,.12)}
.rkeys{gap:12px}
.rkeys .vh-on{padding:0}
.rkeys label.switch{margin:0;padding:0;gap:0}
.rk.rk-go{width:auto;height:auto;padding:0;border-radius:0}
.rk.rk-go svg{width:9px !important;height:15px !important}
html:root body .page .content :is(.ap-row,.fn-row){padding-right:12px !important}
table .rkeys{gap:12px}
html:root:root:root body .page .content :is(.card.ap-frame.ap-frame.ap-frame,.card.fns-card.fns-card.fns-card) :is(.ap-row.ap-row,.fn-row.fn-row){padding-right:12px !important}
/* (user, 2026-11-02) a switched-off line: a black see-through layer over it (its keys above, to switch it back on) */
html:root body .page .content :is(.ap-row.is-off,.vh-row.ap-row:not(.is-def),.fn-row.is-off){position:relative}
html:root body .page .content :is(.ap-row.is-off,.vh-row.ap-row:not(.is-def),.fn-row.is-off)::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(0,0,0,.4);pointer-events:none;z-index:1}
html:root body .page .content :is(.ap-row.is-off,.vh-row.ap-row:not(.is-def),.fn-row.is-off) .rkeys{position:relative;z-index:2}
html:root body .page .content :is(.ap-row.is-off,.vh-row.ap-row:not(.is-def),.fn-row.is-off) > :not(.rkeys){opacity:1 !important}
html:root body .page .content .vh-row:not(.is-def) .plate{opacity:1}
/* (user, 2026-11-02) section titles white and half as big again everywhere on the website (15 → 22.5 px) */
.frame-h,.page .content > h2{font-size:22.5px !important;color:#fff !important}
/* (user, 2026-11-02) the team's logo (and a member's own page picture) the size of the Profile page's picture */
.fn-frame .fn-logo.big{width:136px;height:136px;border-radius:26px;font-size:40px}
/* a vehicle's number in a line: small, beside its category's badge (it had no size: it showed huge) */
.plate.xs{width:auto;min-width:26px;height:26px;padding:0 5px;border-width:1.5px;border-radius:5px;font-size:17px;line-height:23px;display:inline-grid;place-items:center;box-sizing:border-box}
/* (user, 2026-11-02) a picture's pen: the ring round it only a border's width */
.avatar-edit__pen{box-shadow:0 0 0 2px var(--ink-2,#14161B) !important}
/* (user, 2026-11-02) website lines: logos, plates and profile pictures a quarter bigger */
.fn-frame .fn-logo:not(.big){width:60px;height:60px;border-radius:10px;font-size:20px}
.fns-card .fn-logo{width:50px !important;height:50px !important;border-radius:7.5px !important;font-size:19px !important}
.page .content .ap-row .plate.sm{width:55px;height:55px;border-radius:7.5px;font-size:34px}
.plate.xs{min-width:32.5px;height:32.5px;font-size:21px;line-height:29px;border-radius:6px}
.fn-foot{justify-content:flex-end;align-items:center;gap:16px}
.fn-foot .fn-spots{font-size:15px}
/* (user, 2026-11-02) flags: never a border; after a name, the name's own height and in the middle of it */
html:root body img.flag{box-shadow:none !important;border:0 !important;outline:0 !important}
html:root body :is(.fn-who b,.vh-what b,.prof-pic__txt b,td) img.flag{display:inline-block;height:.78em;width:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px;vertical-align:middle;align-self:center;margin:0}
.fn-who > b{display:inline-flex;align-items:center;gap:.35em}
/* the Team frame's pen at the frame's top right, as the app's */
.fn-frame .fn-team{position:relative}
.fn-frame .fn-team .tm-pen{position:absolute;top:12px;right:12px}
/* (user, 2026-11-02) function badges anywhere on the website, the app's colours */
.badge.fn-b{color:#fff}
.badge.fn-b.fn-manager{background:rgba(166,107,255,.4)}.badge.fn-b.fn-mgr{background:rgba(211,166,255,.4)}
.badge.fn-b:is(.fn-coach,.fn-pcoach){background:rgba(46,204,113,.4)}.badge.fn-b.fn-engineer{background:rgba(61,139,255,.4)}
.badge.fn-b.fn-analyst{background:rgba(34,199,224,.4)}.badge.fn-b.fn-chief{background:rgba(255,77,77,.4)}
.badge.fn-b.fn-mechanic{background:rgba(255,95,168,.4)}.badge.fn-b.fn-driver{background:rgba(255,122,0,.4)}
.ov-fns{display:flex;flex-wrap:wrap;gap:6px;min-height:22px;margin:0}
.ov-fns .badge{font-size:12.5px;padding:3px 9px;border-radius:7px}
/* (user, 2026-11-02) every gap on these pages 22 px: above and under a section title too */
.page .content .frame-h{margin:0 !important}
/* (user, 2026-11-02) in a line every badge the size of a function's (Coach…): the vehicle's and Free too; a driver's plate
   joined to their vehicle's badge, as one */
html:root body .fn-frame .fn-tags .badge{font-size:15px !important;line-height:22.5px !important;height:22.5px;padding:0 7.5px !important;border-radius:7.5px !important;box-sizing:border-box}
html:root body .fn-frame .fn-tags .veh-tag{display:inline-flex;align-items:stretch}
html:root body .fn-frame .fn-tags .veh-tag .plate.xs{height:22.5px;min-width:24px;font-size:15px;line-height:20px;border-radius:7.5px 0 0 7.5px;border-width:1.5px;padding:0 4px}
html:root body .fn-frame .fn-tags .veh-tag .badge{border-radius:0 7.5px 7.5px 0 !important}
/* (user, 2026-11-02) Overview's second line: four cards side by side where they fit */
.page .content > .grid:has(.ov-fns){grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ov-veh{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.veh-tag{display:inline-flex;align-items:stretch}
.veh-tag .plate.xs{height:22.5px;min-width:24px;font-size:15px;line-height:20px;border-radius:7.5px 0 0 7.5px;border-width:1.5px;padding:0 4px}
.veh-tag .badge{border-radius:0 7.5px 7.5px 0 !important;font-size:12.5px;padding:0 7.5px;line-height:22.5px;height:22.5px}
.page .content > .grid:has(.ov-fns){align-items:stretch} .page .content > .grid:has(.ov-fns) > .card{height:100%;box-sizing:border-box} /* (user, 2026-11-02: the four cards the same height) */
.page .content > .grid:has(.ov-fns){grid-auto-rows:1fr}
/* (user, 2026-11-02) My functions: each line's state — yellow Active, red Inactive (the function badges' size) */
html:root body .fns-card .badge.st-b{font-size:15px;line-height:22.5px;height:22.5px;padding:0 7.5px;border-radius:7.5px;border:0}
.badge.st-b.st-on{background:#FFD21F;color:#000}
.badge.st-b.st-off{background:#E5484D;color:#fff}
html:root body .fns-card .fn-row .fn-who,html:root body .fns-card .fn-row .fn-who:has(.badge + .badge){flex-direction:row !important;align-items:center !important;justify-content:flex-start !important;flex:1 1 auto !important;gap:8px !important;text-align:left}
/* (user, 2026-11-02) Overview's counts: a big white number at the card's bottom right */
.page .content > .grid:has(.ov-fns) > .card{display:flex;flex-direction:column}
:is(.ov-veh,.ov-sess,.ov-trk){margin-top:auto !important;align-self:flex-end;display:block}
.ov-big{font:800 40px/1 var(--head);color:#fff}
/* (user, 2026-11-02) the Inactive badge: dark grey ground, a darkened light grey text */
html:root body .badge.st-b.st-off{background:#3A3D44 !important;color:#8E939C !important}
/* (user, 2026-11-02) a session's card as the app's */
.card.srun.rc{gap:6px}
.rc-l1{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rc-l1 h3{margin:0;font:800 22px var(--head);color:#fff}
.rc-best{display:inline-flex;align-items:center;gap:8px}
.rc-best b{font:800 24px var(--head);color:#B98CFF}
.rc-l2{display:flex;align-items:center;gap:10px;font-size:17px}
.rc-l2 .flag{height:.95em;width:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px;display:inline-block}
.rc-trk-n{font:800 19px var(--head);color:#fff}
.rc-l3{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.rc-cond{display:inline-flex;align-items:stretch;border-radius:7.5px;overflow:hidden;height:26px}
.rc-cond > span{display:inline-flex;align-items:center;padding:0 10px;font:800 14px var(--font);letter-spacing:.06em;text-transform:uppercase}
.rc-trk.cf-dry{background:#FFB800;color:#05060A}.rc-trk.cf-wet{background:#7CC4FF;color:#05060A}.rc-trk.cf-rain{background:#1E6BFF;color:#fff}
.rc-sky{background:#2C3446;color:#8DB4FF}
.rc-l3 .badge.veh,.rc-l3 .veh-tag .badge{height:26px;line-height:26px;padding:0 10px;font-size:14px;border-radius:7.5px}
.rc-l3 .veh-tag .badge{border-radius:0 7.5px 7.5px 0 !important}
.rc-l3 .veh-tag .plate.xs{height:26px;line-height:23px;font-size:16px;border-radius:7.5px 0 0 7.5px}
@media (max-width:860px){.srun-list:has(.rc){grid-template-columns:minmax(0,1fr) !important}} /* (one card a line on a phone, as the app) */
.rc-l1 h3{white-space:nowrap}
a.card.srun.rc > .rk-go{top:auto !important;bottom:18px;transform:none !important}
/* (user, 2026-11-02) a margin between the leaving and the coming page while they slide (not touching) */
@keyframes pg-in-right{from{transform:translateX(calc(100% + 64px))}to{transform:none}}
@keyframes pg-out-left{from{transform:none}to{transform:translateX(calc(-100% - 64px))}}
@keyframes pg-in-left{from{transform:translateX(calc(-100% - 64px))}to{transform:none}}
@keyframes pg-out-right{from{transform:none}to{transform:translateX(calc(100% + 64px))}}
/* (user, 2026-11-02, later) the margin between sliding pages: half the gap from the menu to the page (36 px → 18 px); on a
   small screen with no menu at the left, the page's own side margin */
.content-stage{--sg:18px}
@media (max-width:860px){.content-stage{--sg:max(20px,calc(env(safe-area-inset-left,0px) + 10px))}}
@keyframes pg-in-right{from{transform:translateX(calc(100% + var(--sg)))}to{transform:none}}
@keyframes pg-out-left{from{transform:none}to{transform:translateX(calc(-100% - var(--sg)))}}
@keyframes pg-in-left{from{transform:translateX(calc(-100% - var(--sg)))}to{transform:none}}
@keyframes pg-out-right{from{transform:none}to{transform:translateX(calc(100% + var(--sg)))}}
/* (user, 2026-11-02) the session card: every gap between its lines the smallest one (6 px); its arrow on the badges' line */
.card.srun.rc{padding-right:18px}
.rc-l3{margin-top:0 !important}
.rc-l3 > .rk-go{position:static !important;transform:none !important;margin-left:auto}
.card.srun.rc{padding-right:12px !important}
/* (user, 2026-11-02) a plate joined to its badge: no border, the badge's own height */
html:root body .veh-tag{align-items:stretch}
html:root body .veh-tag .plate.xs{border:0 !important;box-shadow:none !important;height:auto !important;min-height:0;align-self:stretch;display:inline-grid;place-items:center;line-height:1 !important}
/* (user, 2026-11-02) Tracks › Search on the map */
.t-mapk{display:inline-flex;align-items:center;gap:8px}
.tm-all-card{padding:12px !important;gap:12px}
.tmap-all{height:min(70vh,720px);border-radius:12px;overflow:hidden}
.tm-find{position:relative}
.tm-q{width:100%}
.tm-hits{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:1000;display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.tm-hits[hidden]{display:none}
.tm-hits button{background:none;border:0;color:#fff;text-align:left;padding:10px 14px;font:600 15px var(--font);cursor:pointer}
.tm-hits button:hover{background:rgba(255,255,255,.06)}
.leaflet-popup-content .tm-open{font-weight:700;color:#7C5CFF}
/* (user, 2026-11-02) Settings › Tracks & maps */
.set-trk{gap:16px}
.set-trk .seg{flex-wrap:wrap}
.trk-sw{display:flex;align-items:center;justify-content:space-between;gap:16px}
.trk-sw > div{display:flex;flex-direction:column;gap:2px}
.trk-sw b{font:600 15px var(--font);color:#fff}
/* (user, 2026-11-02) My functions: pictures and logos the size of the other lists' (60 px) */
html:root body .fns-card .fn-logo{width:60px !important;height:60px !important;border-radius:10px !important;font-size:20px !important}
/* (user, 2026-11-02) Tracks and its map: the radius choice (as the app's: "100 km / all around"), the field for a track or a
   place, and the keys over the map (types, locate me) */
.tr-rsel{position:relative;display:inline-flex;flex-direction:column;justify-content:center;min-height:50px;padding:4px 34px 4px 14px;border-radius:12px;background:var(--ink-3);border:1px solid var(--line);cursor:pointer;flex:none}
.tr-rsel select{appearance:none;-webkit-appearance:none;background:none;border:0;color:#fff;font:800 17px var(--head);padding:0;cursor:pointer;min-height:0;box-shadow:none}
.tr-rsel small{font:600 10px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tr-rsel::after{content:'';position:absolute;right:12px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.tm-bar{display:flex;gap:10px;align-items:stretch}
.tm-bar .tm-find{flex:1 1 auto;display:flex;align-items:center;gap:8px;padding:0 10px 0 14px;border-radius:12px;background:var(--ink-3);border:1px solid var(--line);min-height:50px}
.tm-bar .tm-ic{color:var(--muted);flex:none}
.tm-bar .tm-q{flex:1;border:0 !important;background:none !important;box-shadow:none !important;padding:0 !important;min-height:46px;color:#fff;font:500 16px var(--font)}
.tm-clear{flex:none;width:28px;height:28px;border-radius:50%;border:0;background:#4A4D55;color:#fff;font:700 18px/1 var(--font);cursor:pointer}
.tm-clear[hidden]{display:none}
.tm-hk{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:#FFD21F;vertical-align:middle}
.tm-hk-p{background:#7CC4FF}
.tm-ctl{display:flex;gap:8px;align-items:flex-start}
.tm-kinds{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:4px;padding:3px 26px 3px 10px;cursor:pointer}
.tm-kinds select{appearance:none;-webkit-appearance:none;border:0;background:none;font:800 14px var(--head);color:#111;padding:0;cursor:pointer}
.tm-kinds small{font:600 9px var(--font);letter-spacing:.06em;text-transform:uppercase;color:#666}
.tm-kinds::after{content:'';position:absolute;right:9px;top:45%;width:6px;height:6px;border-right:2px solid #444;border-bottom:2px solid #444;transform:translateY(-50%) rotate(45deg);pointer-events:none}
.tm-loc{width:38px;height:38px;display:grid;place-items:center;background:#fff;color:#111;border:0;border-radius:4px;cursor:pointer}
.srun-bar .t-r{margin-left:auto}
/* the website's own pickers inside the radius and types keys: their key only, the text and arrow of the app's */
html:root body :is(.tr-rsel,.tm-kinds) .dd-btn{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;min-height:0 !important;height:auto !important;font:800 17px var(--head) !important;color:#fff !important;gap:0 !important;justify-content:flex-start !important}
html:root body :is(.tr-rsel,.tm-kinds) .dd-btn > svg{display:none !important}
html:root body .tm-kinds .dd-btn{font-size:14px !important;color:#111 !important}
html:root body :is(.tr-rsel,.tm-kinds) .dd{position:static}
html:root body :is(.tr-rsel,.tm-kinds) .dd-menu{min-width:150px;right:0;left:auto}
/* (user, 2026-11-02) every Free badge a pill: half circles at both ends */
html:root body .badge.free-b{border-radius:999px !important;padding-left:11px !important;padding-right:11px !important}
/* (user, 2026-11-02) a sliding page goes out of sight halfway across the gap to the menu (not at its own edge); with the
   menu on top (small screens), at the screen's edge */
.content-stage{--ext:18px;margin-left:calc(-1 * var(--ext));margin-right:calc(-1 * var(--ext));padding-left:var(--ext);padding-right:var(--ext)}
@media (max-width:860px){.content-stage{--ext:max(20px,calc(env(safe-area-inset-left,0px) + 10px))}}
/* (user, 2026-11-02) every key, field and selector on the website is as tall as the left selector (.seg-tabs, 46 px) */
:root{--ctl-h:46px}
html:root body .seg{box-sizing:border-box;min-height:var(--ctl-h) !important}
html:root body :is(.seg-tabs,.tr-rsel,.tm-bar .tm-find){box-sizing:border-box;height:var(--ctl-h) !important;min-height:var(--ctl-h) !important}
html:root body .seg-tabs > :is(a,button){display:flex;align-items:center;padding-top:0;padding-bottom:0}
html:root body .tr-rsel{padding-top:0 !important;padding-bottom:0 !important}
html:root body .tm-bar .tm-q{min-height:0 !important;height:100% !important}
html:root:root body :where(.btn:not(.small),input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.plate),select:not(.dd-native),.dd-btn,.srun-filter select,.menu > button){box-sizing:border-box;height:var(--ctl-h) !important;min-height:var(--ctl-h) !important}
html:root:root body :where(.btn:not(.small),input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.plate),.dd-btn){padding-top:0 !important;padding-bottom:0 !important}
html:root body :is(.tr-rsel,.tm-kinds,.seg-tabs,.dd-find) :is(.dd-btn,input,select){height:auto !important;min-height:0 !important}
html:root body .seg > button{min-height:calc(var(--ctl-h) - 8px) !important}
html:root body .btn.icon:not(.small){width:var(--ctl-h);min-width:var(--ctl-h)}
.ov-big .ov-sl{color:var(--muted);margin:0 .12em;font-weight:600} /* (user, 2026-11-02: My tracks / Track Database, the slash light grey) */
/* (user, 2026-11-02) the map key: a square with rounded corners, framed as the radius picker beside it */
html:root body .t-mapk{border-radius:12px !important;background:var(--ink-3) !important;border:1px solid var(--line) !important;box-shadow:none !important}
html:root body .t-mapk:hover{border-color:#ffffff55 !important}

/* (user, 2026-11-02) the maps' 2D / 3D switch (under full screen, as the app's: 2D over 3D) and the 3D view over the map */
.tmap-wrap .dd3-sw{clear:both;float:left;margin:10px 0 0 10px;display:flex;flex-direction:column;width:38px;height:76px;box-sizing:border-box;border:1px solid #000;border-radius:4px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.45);background:#fff;pointer-events:auto}
.tmap-wrap .dd3-sw button{flex:1 1 0;width:100%;height:auto !important;min-height:0 !important;padding:0;margin:0;border:0;border-radius:0;background:#fff;color:#222;font:700 13px/1 var(--font);cursor:pointer;box-shadow:none}
.tmap-wrap .dd3-sw button + button{border-top:1px solid #000}
.tmap-wrap .dd3-sw button[aria-pressed="true"]{background:#222;color:#fff}
.tmap-wrap .d3w{position:absolute;inset:0;z-index:700;background:#0B0D10;overflow:hidden}
.tmap-wrap .d3w-view,.tmap-wrap .d3w-view .cesium-viewer,.tmap-wrap .d3w-view .cesium-widget{position:absolute;inset:0;width:100%;height:100%}
.tmap-wrap .d3w-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin:0;background:rgba(5,6,10,.55);color:#C9CED8;font:600 14px/1.3 var(--font);z-index:2}
.tmap-wrap .d3w-spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:d3wspin .8s linear infinite}
@keyframes d3wspin{to{transform:rotate(360deg)}}
.tmap-wrap .d3w-nav{position:absolute;left:10px;top:10px;z-index:3;display:flex;flex-direction:column;gap:0}
.tmap-wrap .d3w-nav .map-key{font:700 20px/1 var(--font)}
.tmap-wrap .d3w-credit{position:absolute;right:0;bottom:0;z-index:2;max-width:70%;padding:1px 6px;border-top-left-radius:6px;background:rgba(5,6,10,.62);color:#C9CED8;font:500 10px/1.3 var(--font)}
.tmap-wrap .d3w-credit img{max-height:14px;vertical-align:middle}
.tmap-wrap .d3w-credit .cesium-credit-logoContainer{display:inline-block}
.tmap-wrap.is-3d .leaflet-control-zoom,.tmap-wrap.is-3d .ly-key-sw{visibility:hidden}
.tmap-wrap.is-3d .leaflet-bottom{display:none}

/* (user, 2026-11-02) the turns view's key at the map's foot on the right: a lap in the logo's colours; pressed: dark */
.tmap-wrap .ly-key-sw{clear:both;margin:10px 0 0 10px}
.tmap-wrap .ly-key-sw[aria-pressed="true"]{background:#222;border-color:#000}
/* (user, 2026-11-02) the 3D view's + and − joined as the 2D map's, its recentre at the bottom left */
.tmap-wrap .d3w-nav [data-op="in"]{border-radius:4px 4px 0 0;border-bottom:1px solid #ccc}
.tmap-wrap .d3w-nav [data-op="out"]{border-radius:0 0 4px 4px;border-top:0}
.tmap-wrap .d3w-nav.d3w-fit{top:auto;bottom:10px}
/* (user, 2026-11-02) the 3D view's credits on one line at the foot on the right (Cesium's own sheet set them loose) */
.tmap-wrap .d3w-credit .cesium-widget-credits{position:static !important;display:flex !important;align-items:center;gap:6px;white-space:nowrap;padding:0 !important;font:500 10px/1.3 var(--font);text-shadow:none}
.tmap-wrap .d3w-credit .cesium-credit-logoContainer,.tmap-wrap .d3w-credit .cesium-credit-textContainer{display:inline-flex !important;align-items:center;gap:6px}
.tmap-wrap .d3w-credit .cesium-credit-expand-link{color:#C9CED8;text-decoration:none;cursor:pointer}
/* (user, 2026-11-02) the map's Types key as the map's other keys: 38 px tall */
html:root body .tm-kinds{box-sizing:border-box;height:38px !important;min-height:38px !important;display:flex;flex-direction:column;justify-content:center}

/* (user, 2026-11-02) the continent's drift key over recentre: dark while on */
.tmap-wrap .cont-key{margin-bottom:10px}
.tmap-wrap .cont-key[aria-pressed="true"]{background:#222;color:#fff}
/* (user, 2026-11-02) every key over a map the same size as the app's: 40 px outside — zoom (two keys), 2D/3D (two
   keys), full screen, recentre, turns, screenshot */
.tmap-wrap .leaflet-bar{border:1px solid #000 !important;border-radius:4px}
.tmap-wrap .leaflet-bar a{box-sizing:border-box;width:38px !important;height:39px !important;line-height:39px !important}
.tmap-wrap .map-key,.tmap-wrap .leaflet-control.map-key{width:40px !important;height:40px !important}
.tmap-wrap .dd3-sw{width:40px !important;height:80px !important}
/* (user, 2026-11-04) every edit pen grey: the lines' pen (its frame too) and the pictures' pen */
.rk.rk-pen,body .rk.rk-pen{color:var(--muted,#9AA3B2) !important;border-color:var(--muted,#9AA3B2) !important}
.rk.rk-pen:hover{background:rgba(154,163,178,.12) !important}
body .avatar-edit__pen{background:#9AA3B2 !important;color:#05060A !important}
body .avatar-edit__pen svg{color:#05060A !important;stroke:#05060A !important}
/* (user, 2026-11-06) a list's search field (Nationality, …) is a field like the others: the fields' height */
html:root body .dd-find input{height:var(--ctl-h) !important;min-height:var(--ctl-h) !important;padding:0 14px;font-size:16px;box-sizing:border-box}
/* (user, 2026-11-06) the account key at the top: the profile picture only (no name, no email), a square key */
html:root body #m-user > button{width:var(--ctl-h);padding:0;justify-content:center}
/* (user, 2026-11-06) …and the picture is the key itself: no padding, no border, no background, at the key's height */
html:root body #m-user > button{border:0;background:none;padding:0;overflow:hidden;border-radius:12px}
html:root body #m-user > button .avatar{width:100%;height:100%;border-radius:12px;font-size:16px}
html:root body #m-user > button:hover .avatar,html:root body #m-user.open > button .avatar{filter:brightness(1.12)}
/* (user, 2026-11-06) the question screen over everything (the map's keys stayed on top of it), its two keys the same size,
   the key chosen first framed inside its own edge (it grew past the other one) */
html:root body .ask{z-index:5000}
html:root body .ask-btns .btn{height:clamp(84px,20vmin,140px) !important;min-height:0 !important;border:0;border-radius:999px;padding:0 20px}
html:root body .ask-btns .btn:not(.danger-fill){background:#2E3138;color:#fff}
html:root body .ask-btns .btn:focus-visible{outline:4px solid var(--yellow);outline-offset:-4px}
/* (user, 2026-11-06) dates and times in the dark: their calendar key light and their calendar dark, as the page */
html:root body :is(input[type=date],input[type=time],input[type=datetime-local],input[type=month],select){color-scheme:dark}
html:root body :is(input[type=date],input[type=time],input[type=datetime-local],input[type=month])::-webkit-calendar-picker-indicator{opacity:.85;cursor:pointer}

/* (user, 2026-11-06) signed in: black, the B with a spinner round it, Syncing… */
#bl-sync{position:fixed;inset:0;z-index:100000;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .3s ease}
#bl-sync.out{opacity:0;pointer-events:none}
#bl-sync .sync-ring{position:relative;width:132px;height:132px;display:flex;align-items:center;justify-content:center}
#bl-sync .sync-ring img{width:47px;height:54px;display:block}
#bl-sync .sync-ring i{position:absolute;inset:0;border-radius:50%;border:4px solid rgba(255,255,255,.12);border-top-color:#fff;animation:blSyncSpin .9s linear infinite}
#bl-sync p{margin:0;color:rgba(255,255,255,.75);font:600 16px/1.2 system-ui,-apple-system,sans-serif;letter-spacing:.02em}
@keyframes blSyncSpin{to{transform:rotate(360deg)}}
/* (user, 2026-11-06) keyboard up on a sign-in screen: no top bar, the form just above the keyboard */
html.kb body header.bar{display:none}
html.kb body .auth{position:fixed;left:0;right:0;top:var(--kb-top,0px);height:var(--kb-h,100%);max-width:440px;margin:0 auto;padding:16px 20px 14px;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;background:var(--ink, #0B0C10);z-index:50}
html.kb body .auth > :first-child{margin-top:auto}