@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@500;700;800&display=swap');
/* =============================================================================================================
FULL LOOKS for the working screens: FLIR thermal camera, Night vision, Cyber (cyberpunk x alien tech).
-------------------------------------------------------------------------------------------------------------
The colours come from the theme presets in lib/theme.php (Themes panel). This file adds everything a colour
cannot do: screen overlays (scanlines, grain, vignette), map tint, HUD lettering, card shapes and glows.
Each look only applies while the page has , which the server sets from the
saved theme and the Themes panel sets while you preview. Camera stills are never tinted.
Change a look here; add a new one with a new [data-look] block and a preset with 'style' in lib/theme.php.
============================================================================================================= */
/* ---------- shared: HUD overlay layer and the label in the corner ---------- */
html[data-look] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2400}
html[data-look] body::before{position:fixed;right:14px;bottom:10px;z-index:2401;pointer-events:none;font:11px 'Share Tech Mono',ui-monospace,monospace;letter-spacing:.18em;padding:3px 8px;border-radius:3px;background:rgba(0,0,0,.72)}
html[data-look] #cam-img,html[data-look] .cam video{filter:none!important}
@media (max-width:860px){html[data-look] body::before{display:none}}
@media (prefers-reduced-motion:reduce){html[data-look] body::after{animation:none!important}}
/* =============================================================================================================
FLIR THERMAL: "white hot". Cold = deep purple and black, warm = magenta and red, hot = orange, yellow, white.
============================================================================================================= */
html[data-look="flir"] body{background:radial-gradient(ellipse at 50% 40%,#1a0820 0%,#06020b 70%)}
html[data-look="flir"] body::after{background:
repeating-linear-gradient(0deg,rgba(255,140,60,.035) 0 1px,transparent 1px 3px),
radial-gradient(ellipse at center,transparent 60%,rgba(20,0,25,.55) 100%)}
html[data-look="flir"] body::before{content:"FLIR \00B7 WHITE HOT \00B7 NUC OK \00B7 30HZ";color:#ffb02e}
/* map: thermal false colour (dark land = cold purple, roads and labels = hot orange) */
html[data-look="flir"] .leaflet-tile-pane{filter:grayscale(1) contrast(1.35) sepia(1) hue-rotate(-55deg) saturate(3.4) brightness(.95)}
html[data-look="flir"] #mapwrap::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);pointer-events:none;z-index:500;opacity:.55;
background:linear-gradient(#ffb02e,#ffb02e) center/1.5px 100% no-repeat,linear-gradient(#ffb02e,#ffb02e) center/100% 1.5px no-repeat}
/* panels: camera viewfinder corner brackets */
html[data-look="flir"] .card,html[data-look="flir"] #page,html[data-look="flir"] .kpi{background-image:
linear-gradient(#ff8a2a,#ff8a2a),linear-gradient(#ff8a2a,#ff8a2a),linear-gradient(#ff8a2a,#ff8a2a),linear-gradient(#ff8a2a,#ff8a2a),
linear-gradient(#ff8a2a,#ff8a2a),linear-gradient(#ff8a2a,#ff8a2a),linear-gradient(#ff8a2a,#ff8a2a),linear-gradient(#ff8a2a,#ff8a2a),
linear-gradient(180deg,#140818,#0d0511)!important;
background-size:14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px,auto!important;
background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%,0 0!important;background-repeat:no-repeat!important;border-radius:3px!important}
html[data-look="flir"] .ch h2,html[data-look="flir"] .ptools h1,html[data-look="flir"] .navsec,html[data-look="flir"] th,html[data-look="flir"] .kpi .kl,html[data-look="flir"] .sub{
font-family:'Share Tech Mono',ui-monospace,monospace!important;text-transform:uppercase;letter-spacing:.14em}
html[data-look="flir"] .ch h2::before{width:8px;height:8px;border-radius:50%;background:#ffe24d;box-shadow:0 0 8px #ff8a2a}
html[data-look="flir"] .kpi .kv,html[data-look="flir"] .ov b,html[data-look="flir"] .big strong{font-family:'Share Tech Mono',ui-monospace,monospace!important;color:#fff3c4;text-shadow:0 0 10px rgba(255,140,40,.6)}
html[data-look="flir"] button.pri{background:linear-gradient(180deg,#fff0a8,#ffb02e 45%,#e8551a)!important;border-color:#ffd27a!important;color:#2b0618!important;box-shadow:0 0 14px rgba(255,140,40,.45)}
html[data-look="flir"] .mk{box-shadow:0 0 12px var(--c),0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)!important}
html[data-look="flir"] #navlist button.on{box-shadow:inset 3px 0 0 #ffe24d}
/* =============================================================================================================
NIGHT VISION: green phosphor image intensifier. Grain, scanlines, tube vignette, glowing text.
Problems stay visible: danger is hot white with a glow, warnings yellow-green.
============================================================================================================= */
html[data-look="nv"] body{background:radial-gradient(ellipse at 50% 45%,#0a2209 0%,#010501 72%)}
html[data-look="nv"] body::after{background:
url("data:image/svg+xml;utf8,"),
repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
radial-gradient(ellipse 85% 90% at center,transparent 55%,rgba(0,18,0,.78) 100%);
opacity:.55;animation:nvgrain .18s steps(3) infinite}
@keyframes nvgrain{0%{background-position:0 0,0 0,0 0}33%{background-position:-40px 25px,0 1px,0 0}66%{background-position:30px -35px,0 0,0 0}100%{background-position:-10px 45px,0 1px,0 0}}
html[data-look="nv"] body::before{content:"NV \00B7 GEN III \00B7 AUTO-GAIN \00B7 IR ON";color:#9dff8a;text-shadow:0 0 6px #4dff3a}
/* map: everything through the tube */
html[data-look="nv"] .leaflet-tile-pane{filter:grayscale(1) brightness(1.7) contrast(1.25) sepia(1) hue-rotate(52deg) saturate(4.5)}
html[data-look="nv"] .leaflet-marker-pane,html[data-look="nv"] .leaflet-overlay-pane{filter:drop-shadow(0 0 4px rgba(120,255,100,.55))}
html[data-look="nv"] .ch h2,html[data-look="nv"] .ptools h1,html[data-look="nv"] .navsec,html[data-look="nv"] th,html[data-look="nv"] .kpi .kl,html[data-look="nv"] .sub{
font-family:'Share Tech Mono',ui-monospace,monospace!important;text-transform:uppercase;letter-spacing:.12em;text-shadow:0 0 6px rgba(110,255,90,.55)}
html[data-look="nv"] .kpi .kv,html[data-look="nv"] .ov b,html[data-look="nv"] .big strong{font-family:'Share Tech Mono',ui-monospace,monospace!important;color:#e6ffdc;text-shadow:0 0 12px rgba(120,255,100,.75)}
html[data-look="nv"] .card,html[data-look="nv"] #page,html[data-look="nv"] .kpi{box-shadow:0 0 0 1px rgba(110,255,90,.10),0 0 22px rgba(60,200,40,.08) inset!important}
html[data-look="nv"] .bad,html[data-look="nv"] .chip.critical,html[data-look="nv"] .kpi.bad .kv{text-shadow:0 0 8px #fff,0 0 16px #b8ff9e}
html[data-look="nv"] button.pri{background:linear-gradient(180deg,#d8ffc9,#7dff6a 50%,#2f9a22)!important;color:#021a01!important;box-shadow:0 0 16px rgba(110,255,90,.5)}
html[data-look="nv"] img:not(#cam-img){filter:grayscale(1) sepia(1) hue-rotate(52deg) saturate(3)}
/* =============================================================================================================
CYBER: cyberpunk neon meets alien (covenant-like) technology. Deep violet, plasma purple, cyan and magenta,
iridescent edges, smooth asymmetric curves on panels, notched corners on buttons, a faint hex lattice.
============================================================================================================= */
html[data-look="cyber"] body{background:
radial-gradient(ellipse 60% 50% at 15% 10%,rgba(182,92,255,.20),transparent 70%),
radial-gradient(ellipse 50% 45% at 90% 85%,rgba(62,240,255,.14),transparent 70%),
url("data:image/svg+xml;utf8,"),
#06021a}
html[data-look="cyber"] body::after{background:linear-gradient(180deg,transparent 0%,rgba(62,240,255,.05) 50%,transparent 100%);background-size:100% 220px;background-repeat:no-repeat;animation:cysweep 7s linear infinite}
@keyframes cysweep{0%{background-position:0 -220px}100%{background-position:0 calc(100vh + 220px)}}
html[data-look="cyber"] body::before{content:"\25C8 LINK ESTABLISHED \00B7 SIGNAL 99.7 \00B7 CORE STABLE";color:#3ef0ff;text-shadow:0 0 8px #3ef0ff}
html[data-look="cyber"] .leaflet-tile-pane{filter:grayscale(.4) sepia(1) hue-rotate(215deg) saturate(2.6) brightness(.95) contrast(1.15)}
/* panels: iridescent edge, smooth alien curves */
html[data-look="cyber"] .card,html[data-look="cyber"] #page,html[data-look="cyber"] .kpi,html[data-look="cyber"] #mapwrap{
border:1px solid transparent!important;border-radius:22px 6px 22px 6px!important;
background:linear-gradient(160deg,#140c36,#0c0726) padding-box,linear-gradient(135deg,#3ef0ff,#7a4dff 35%,#b65cff 60%,#ff3df2) border-box!important;
box-shadow:0 0 18px rgba(122,77,255,.25),inset 0 0 30px rgba(182,92,255,.06)!important}
html[data-look="cyber"] #mapwrap{background:linear-gradient(#0c0726,#0c0726) padding-box,linear-gradient(135deg,#3ef0ff,#7a4dff 35%,#b65cff 60%,#ff3df2) border-box!important}
html[data-look="cyber"] .ch h2,html[data-look="cyber"] .ptools h1,html[data-look="cyber"] .brand b,html[data-look="cyber"] .kpi .kv,html[data-look="cyber"] .ov b,html[data-look="cyber"] .big strong{
font-family:'Orbitron',Manrope,sans-serif!important;letter-spacing:.06em}
html[data-look="cyber"] .ch h2{font-size:12px!important;text-transform:uppercase}
html[data-look="cyber"] .ch h2::before{width:10px;height:10px;border-radius:50% 50% 50% 0;background:linear-gradient(135deg,#3ef0ff,#ff3df2);box-shadow:0 0 10px #b65cff}
html[data-look="cyber"] .kpi .kv,html[data-look="cyber"] .ov b{background:linear-gradient(90deg,#3ef0ff,#c48bff,#ff3df2);-webkit-background-clip:text;background-clip:text;color:transparent!important}
html[data-look="cyber"] .kpi.bad .kv{background:linear-gradient(90deg,#ff3d6e,#ff3df2);-webkit-background-clip:text;background-clip:text}
html[data-look="cyber"] .navsec,html[data-look="cyber"] th,html[data-look="cyber"] .sub{font-family:'Orbitron',Manrope,sans-serif!important;letter-spacing:.16em;color:#8f7fd6}
html[data-look="cyber"] button{clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);border-radius:0!important}
html[data-look="cyber"] .seg button,html[data-look="cyber"] .hb,html[data-look="cyber"] .lnk,html[data-look="cyber"] .mapctl button,html[data-look="cyber"] .th-ic{clip-path:none}
html[data-look="cyber"] button.pri{background:linear-gradient(90deg,#7a4dff,#b65cff 50%,#ff3df2)!important;border:0!important;color:#fff!important;text-shadow:0 0 6px rgba(255,255,255,.5);box-shadow:0 0 18px rgba(182,92,255,.55)}
html[data-look="cyber"] #navlist button.on{background:linear-gradient(90deg,rgba(62,240,255,.18),rgba(255,61,242,.06))!important;box-shadow:inset 3px 0 0 #3ef0ff}
html[data-look="cyber"] #navlist button.on svg{color:#3ef0ff!important;filter:drop-shadow(0 0 4px #3ef0ff)}
html[data-look="cyber"] .chip{border-radius:10px 2px 10px 2px}
html[data-look="cyber"] .mk{border-radius:50% 50% 50% 8px!important;box-shadow:0 0 14px var(--c)!important}
html[data-look="cyber"] .sechead{border-radius:16px 4px 16px 4px;background:linear-gradient(90deg,rgba(122,77,255,.25),rgba(255,61,242,.10))}
html[data-look="cyber"] input,html[data-look="cyber"] select,html[data-look="cyber"] textarea{border-radius:12px 3px 12px 3px!important}
html[data-look="cyber"] dialog,html[data-look="cyber"] #drawer{border-image:linear-gradient(180deg,#3ef0ff,#b65cff,#ff3df2) 1}
/* sign-in, users and server status pages (lib/page.php) */
html[data-look] .pg .card{box-shadow:0 0 24px rgba(0,0,0,.4)}
html[data-look="flir"] .pg .brand span{color:#ffb02e}html[data-look="nv"] .pg .brand span{color:#7dff6a;text-shadow:0 0 8px #4dff3a}
html[data-look="cyber"] .pg .brand b{font-family:'Orbitron',sans-serif}
/* =============================================================================================================
SIGN-IN AND SETUP PAGES (lib/page.php). They carry their own small stylesheet, so give them the look's colours.
============================================================================================================= */
html[data-look="flir"]:has(main.pg){--teal:#ffb02e;--bg:#06020b;--surface:#140818;--surface2:#1d0b22;--line:#2a1230;--line2:#3d1a44;--tx:#fff3e6;--mu:#c79aa8;--on-accent:#1a0600}
html[data-look="nv"]:has(main.pg){--teal:#7dff6a;--bg:#010501;--surface:#061206;--surface2:#0a1a0a;--line:#123012;--line2:#1d461d;--tx:#dcffd2;--mu:#86b97c;--on-accent:#021a01}
html[data-look="cyber"]:has(main.pg){--teal:#b65cff;--bg:#06021a;--surface:#140c36;--surface2:#1b1145;--line:#2a1d5c;--line2:#3b2a7a;--tx:#efeaff;--mu:#a99be0;--on-accent:#ffffff}
html[data-look="cyber"] main.pg .brand span{background:linear-gradient(90deg,#3ef0ff,#b65cff,#ff3df2);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-look="cyber"] main.pg .brand svg{color:#3ef0ff;filter:drop-shadow(0 0 6px #b65cff)}
/* =============================================================================================================
LIVE MAP THEME (Themes panel > Live map theme): the map's own look, separate from the page theme.
html[data-maplook] is set by lib/shell.php and core/map.js; without it the map follows the page's full look above.
============================================================================================================= */
html[data-maplook] #map .leaflet-tile-pane{filter:none}
html[data-maplook="night"] #map .leaflet-tile-pane{filter:grayscale(1) brightness(1.7) contrast(1.25) sepia(1) hue-rotate(52deg) saturate(4.5)}
html[data-maplook="flir"] #map .leaflet-tile-pane{filter:grayscale(1) contrast(1.35) sepia(1) hue-rotate(-55deg) saturate(3.4) brightness(.95)}
html[data-maplook="cyber"] #map .leaflet-tile-pane{filter:grayscale(.4) sepia(1) hue-rotate(215deg) saturate(2.6) brightness(.95) contrast(1.15)}
html[data-maplook="blueprint"] #map .leaflet-tile-pane{filter:grayscale(1) invert(1) sepia(1) hue-rotate(175deg) saturate(3.2) brightness(.62) contrast(1.4)}
html[data-maplook="gray"] #map .leaflet-tile-pane{filter:grayscale(1) contrast(1.35) brightness(1.1)}
html[data-maplook] #mapwrap::after{display:none}
.plan-flag span{display:inline-block;white-space:nowrap;padding:2px 7px;border-radius:6px;font:700 11px Manrope,sans-serif;color:#000;background:var(--c);box-shadow:0 0 0 2px #000,0 2px 10px rgba(0,0,0,.6)}