/* LibXR look for every screen: the blue of the "XR" in the logo, as a gradient, with dark navy text.
   Loaded after each page's own styles, so it sets the colors, buttons and the top bars everywhere. */
:root{color-scheme:light;--b1:#2b9bff;--b2:#0a7ffa;--b3:#0656d6;--b4:#0a2f7a;--grad:linear-gradient(135deg,#2b9bff 0%,#0a7ffa 45%,#0656d6 100%);
 --bg:#f3f7fd;--ink:#0d1b2e;--g:#0a7ffa;--sun:#ffb020;--card:#fff;--line:#d5e2f5;--soft:#e8f2ff;--muted:#5b6b82;--danger:#e5484d}
body{background:var(--bg);color:var(--ink)}
h1,h2,h3{color:var(--ink)}h2{font-size:21px;margin:22px 0 10px}
small{color:var(--muted);opacity:1}

/* buttons */
button{border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:14px;min-height:46px;padding:0 16px;transition:transform .08s,box-shadow .15s,background .15s}
button:hover{border-color:var(--b2)}button:active{transform:scale(.97)}button:disabled{opacity:.5;cursor:not-allowed}
button.pri{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(10,127,250,.28)}
button.pri:hover{box-shadow:0 6px 18px rgba(10,127,250,.4)}
button.sel{background:var(--soft);color:var(--ink);border-color:var(--b2);box-shadow:inset 0 0 0 1px var(--b2)}
button.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
input[type=text],input[type=search],select{border:2px solid var(--line)!important;border-radius:14px!important;background:var(--card)!important;color:var(--ink)!important}
input[type=text]:focus,input[type=search]:focus,select:focus{outline:none;border-color:var(--b2)!important;box-shadow:0 0 0 3px rgba(10,127,250,.18)}
input[type=range]{accent-color:var(--b2)}input[type=checkbox]{accent-color:var(--b2);width:20px;height:20px}
.card{border:2px solid var(--line)!important;box-shadow:0 2px 10px rgba(13,27,46,.06)}.card img{background:var(--soft)!important}
#net{border-radius:12px}#net.ok{border-color:#2fbf71}

/* busy state (a button that is working: shows a spinner and cannot be pressed again) */
button.busy{position:relative;color:transparent!important;pointer-events:none}
button.busy::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .7s linear infinite}
button.busy:not(.pri)::after{border-color:rgba(10,127,250,.25);border-top-color:var(--b2)}
@keyframes spin{to{transform:rotate(360deg)}}
.sending{display:flex;align-items:center;gap:10px;color:var(--b3);font-weight:600}

/* top bar of the scan station, the sheets page and the start page */
nav.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:nowrap;padding:10px 16px;background:var(--card);color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(13,27,46,.06)}
nav.topbar::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0;margin-right:auto}
.brand img{height:30px;width:auto;display:block}
.brand .ttl{font-weight:600;font-size:18px;white-space:nowrap;padding-left:10px;border-left:2px solid var(--line)}
.evchip{font-size:13px;font-weight:600;color:var(--b3);background:var(--soft);border-radius:999px;padding:4px 10px;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.tabs{display:flex;gap:4px;background:var(--soft);padding:4px;border-radius:14px}
.tabs button{min-height:40px;border:0;background:transparent;border-radius:10px;padding:0 16px}
.tabs button.on{background:var(--grad);color:#fff;box-shadow:0 2px 8px rgba(10,127,250,.3)}
.acts{display:flex;gap:8px;align-items:center}
.acts a{text-decoration:none}
.menu-btn{display:none;min-width:46px;padding:0 12px;font-size:22px;line-height:1}
.menu-btn .bars,.menu-btn .bars::before,.menu-btn .bars::after{display:block;width:20px;height:2.5px;border-radius:2px;background:currentColor;position:relative;content:""}
.menu-btn .bars::before{position:absolute;top:-6px}.menu-btn .bars::after{position:absolute;top:6px}
@media(max-width:820px){
 nav.topbar{flex-wrap:wrap}
 .brand .ttl{display:none}
 .menu-btn{display:inline-flex;align-items:center;justify-content:center}
 .acts{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:6px;padding:8px 0 4px;order:9}
 .acts.open{display:flex}
 .acts button,.acts a button{width:100%}
 .tabs{order:8;flex-basis:100%}.tabs button{flex:1}
}

/* class screen (projector) controls */
#hud{position:absolute;left:12px;right:12px;top:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;pointer-events:none;flex-wrap:nowrap!important;z-index:15}
#hud>*{pointer-events:auto}
.hud-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
#hud .hud-brand{display:flex;align-items:center;background:#fff!important;border-radius:14px!important;padding:7px 12px!important;min-height:36px;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.hud-brand img{height:24px;display:block}
#hud .chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:12px;background:rgba(9,22,48,.78);color:#fff;font-size:15px;font-weight:600;backdrop-filter:blur(6px)}
#hud span#cnt,#hud span#net2{background:rgba(9,22,48,.78)!important;color:#fff!important;border-radius:12px!important;padding:0 12px!important;font-size:15px!important}
#net2::before{content:"";width:9px;height:9px;border-radius:50%;background:#2fbf71;display:inline-block;margin-right:6px}#net2.bad::before{background:#e5484d}
.hud-right{position:relative;display:flex;align-items:flex-start;gap:8px}
#hud button,#hud select{min-height:40px!important;border-radius:12px!important;font-size:15px!important;padding:0 14px!important;background:rgba(255,255,255,.95)!important;color:var(--b4)!important;border:0!important;box-shadow:0 3px 10px rgba(0,0,0,.15)}
#hud button.pri{background:var(--grad)!important;color:#fff!important}
#hud button.danger{color:#c4282d!important}
#hudacts{display:flex;gap:8px;align-items:flex-start}
#hudacts .grp{display:flex;gap:8px;align-items:center}
#hudacts .sec{display:none;position:absolute;right:0;top:50px;flex-direction:column;align-items:stretch;gap:8px;background:rgba(255,255,255,.97);padding:12px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);min-width:240px}
#hudacts.open .sec{display:flex}
#hudacts .sec button,#hudacts .sec select,#hudacts .sec input{width:100%;box-shadow:none!important;background:var(--soft)!important}
#hudacts .sec input{min-height:40px;width:100%!important}
#hudacts .sec .lbl{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:4px 2px 0}
#hudmenu{display:inline-flex;align-items:center;gap:8px}
@media(max-width:820px){
 #hudacts{display:none;position:absolute;right:0;top:50px;flex-direction:column;align-items:stretch;background:rgba(255,255,255,.97);padding:12px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);min-width:230px;max-height:70vh;overflow:auto}
 #hudacts.open{display:flex}
 #hudacts .grp{flex-direction:column;align-items:stretch}
 #hudacts .sec{display:flex;position:static;box-shadow:none;padding:0;background:none;min-width:0}
 #hudacts button{width:100%}
 #hud .chip.hide-sm{display:none}
}
/* the logo stays on the class screen even when the controls are hidden */
.wm{position:absolute;right:14px;bottom:12px;z-index:5;background:rgba(255,255,255,.85);border-radius:12px;padding:6px 10px;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.wm img{height:22px;display:block}

label.row{flex-wrap:nowrap}
.menu-btn .bars{font-style:normal}

/* ---- the logo is black, so every place that shows it stays light, also in dark mode ---- */
nav.topbar{background:#fff!important;color:#0d1b2e!important;border-bottom-color:#d5e2f5!important}
nav.topbar .brand,nav.topbar .brand .ttl{color:#0d1b2e!important}nav.topbar .brand .ttl{border-left-color:#d5e2f5!important}
nav.topbar .evchip{background:#e8f2ff!important;color:#0656d6!important}
nav.topbar .tabs{background:#e8f2ff!important}nav.topbar .tabs button{color:#0d1b2e!important;background:transparent}
nav.topbar .tabs button.on{background:var(--grad)!important;color:#fff!important}
nav.topbar .acts button,nav.topbar .menu-btn{background:#fff!important;color:#0d1b2e!important;border-color:#d5e2f5!important}
nav.topbar .acts button.danger{color:#c4282d!important;border-color:#f3c2c4!important}
nav.topbar .menu-btn[aria-expanded="true"]{background:#e8f2ff!important;border-color:#0a7ffa!important;color:#0656d6!important}
/* class screen: one logo only (top left with the controls); the menu panel is light */
.wm{display:none!important}
#hud .menu-btn{background:#fff!important;color:#0d1b2e!important}
#hudacts .sec,#hudacts{color:#0d1b2e}
#hudacts .sec button,#hudacts .sec select,#hudacts .sec input{color:#0a2f7a!important}
/* when the controls fade out, the logo stays */
#hud .hud-brand{transition:none}
#hud .chip,#hud .hud-right{transition:opacity .4s}
body.hud-off #hud .chip,body.hud-off #hud .hud-right{opacity:0;pointer-events:none}
/* the test page shows the class screen and the scan station side by side: there only the class screen shows the logo */
.embedded nav.topbar .brand img{display:none}.embedded nav.topbar .brand .ttl{display:inline;border-left:0;padding-left:0}

/* one light look on every device, whether the phone is in dark mode or not (each page's own dark-mode colors are replaced here) */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:light;--bg:#f3f7fd;--ink:#0d1b2e;--g:#0a7ffa;--sun:#ffb020;--card:#fff;--line:#d5e2f5;--soft:#e8f2ff;--muted:#5b6b82}}
:root[data-theme="dark"]{color-scheme:light;--bg:#f3f7fd;--ink:#0d1b2e;--g:#0a7ffa;--sun:#ffb020;--card:#fff;--line:#d5e2f5;--soft:#e8f2ff;--muted:#5b6b82}
html,body{background:var(--bg);color:var(--ink)}

/* ---- popups: one style everywhere (white card, soft navy tint behind) ---- */
.cm-dlg,#cityRes>div,#cityCmp>div,#citiesBox>div,#modeAsk>div{background:#fff!important;color:#0d1b2e!important;border-radius:22px!important;padding:22px!important;box-shadow:0 20px 60px rgba(9,22,48,.35);width:100%}
#cityRes h2,#cityCmp h2,#citiesBox h2,#modeAsk h2{color:#0d1b2e;margin-top:0}
#cityRes small,#cityCmp small,#citiesBox small,#modeAsk small{color:#5b6b82}
.cm-choice{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cm-choice button{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:18px;border:2px solid #d5e2f5;background:#fff;color:#0d1b2e;padding:16px}
.cm-choice button:hover{border-color:#0a7ffa;background:#f3f8ff}
.cm-choice b{font-size:20px}.cm-choice small{font-weight:400;font-size:14px;color:#5b6b82!important}
.cm-choice .ic{width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;font:600 22px Fredoka,system-ui,sans-serif;display:flex;align-items:center;justify-content:center}
@media(max-width:520px){.cm-choice{grid-template-columns:1fr}.cm-choice button{min-height:110px}}
/* small text inside a blue button stays readable */
button.pri small{color:rgba(255,255,255,.88)!important}
#cityRes button.pri{min-height:80px!important;border-radius:16px!important}
#cityRes button.pri:disabled{background:#eef3fb!important;color:#8a9ab0!important;box-shadow:none}
/* the "is built!" bar on the class screen */
#cityAsk{background:#fff!important;border:2px solid #d5e2f5!important;border-radius:18px!important;color:#0d1b2e!important;box-shadow:0 10px 30px rgba(9,22,48,.25)!important}
#cityAsk button{min-height:44px}
/* compare window cards */
#cityCmp table td{color:#0d1b2e}
/* results screen: light text on the blue background */
#rst,#rsp{color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.25)}
/* a sending button keeps its full color while the spinner turns */
button.busy:disabled{opacity:1!important}
/* "is built!" bar fits a phone */
@media(max-width:600px){#cityAsk{left:10px!important;right:10px!important;bottom:10px!important;transform:none!important;max-width:none!important;display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}#cityAsk b{grid-column:1/-1;text-align:center;margin:0!important}#cityAsk button{width:100%}#cityAsk button.pri{grid-column:1/-1}}
/* the sound hint stays small on phones */
@media(max-width:600px){#hint{font-size:14px!important;padding:8px 14px!important;white-space:nowrap;bottom:20px!important}}
/* saved pictures: the three buttons sit in one tidy row */
.card .row:last-child{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.card .row:last-child button{min-height:38px!important;padding:0 6px;font-size:14px;width:100%}
@media(min-width:601px){#cityAsk{flex-wrap:nowrap!important;white-space:nowrap}}
@media(max-width:600px){#cityAsk button{font-size:15px;padding:0 8px}}
/* turn / flip the cutout before sending */
.orihint{margin:8px 0 4px;color:var(--muted,#5b6b82)}
.ori{gap:8px;flex-wrap:wrap}.ori button{min-height:44px;font-size:15px}.ori button span{font-size:19px;line-height:1;margin-right:2px}
@media(max-width:480px){.ori{display:grid;grid-template-columns:1fr 1fr 1fr}.ori button{padding:0 6px;font-size:14px}}
/* teams: each team has its own color (Red, Blue, Green, Yellow, Orange, Purple) */
#pickt .tbtn{border-color:var(--tc)!important;min-height:84px}#pickt .tbtn span{color:var(--tc);font-weight:600}
#pickt .tbtn.sel{background:var(--tc)!important;border-color:var(--tc)!important;color:#fff!important}#pickt .tbtn.sel span,#pickt .tbtn.sel small{color:#fff!important}
.pickg.nteams{grid-template-columns:repeat(3,1fr)}.pickg.nteams button{min-height:84px}
.cm-choice.teamsN{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.cm-choice.teamsN button.sug{outline:4px solid #ffc61a;outline-offset:2px}
@media(max-width:560px){.cm-choice.teamsN{grid-template-columns:repeat(2,1fr)}}
.cm-choice.teamsN button{min-height:110px}