/* Egely Wheel — shared brand styles. Design tokens from the Egely Wheel Brand Guidelines (2026). Fonts (Montserrat + Inter) are loaded per page via in the . */ :root{ --navy:#00033D; /* Dark primary */ --white:#FFFFFF; /* Light primary */ --purple-dark:#401D91; /* Dark secondary */ --blue:#0033FF; /* Medium */ --accent:#5230DA; /* Accent */ /* Surfaces & text */ --panel:rgba(255,255,255,0.04); --panel-border:rgba(255,255,255,0.10); --muted:rgba(255,255,255,0.55); --faint:rgba(255,255,255,0.35); /* Egely Wheel vitality scale */ --red:#C0143C; /* LED 0-5 */ --yellow:#E9D24A; /* LED 6-12 */ --green:#3CC98A; /* LED 13-24 */ } *{margin:0;padding:0;box-sizing:border-box} [hidden]{display:none !important} body{ font-family:'Inter',system-ui,sans-serif; background:var(--navy);color:var(--white); padding:24px;min-height:100vh;line-height:1.5; max-width:880px;margin:0 auto; background-image:radial-gradient(circle at 20% -10%, rgba(82,48,218,0.25), transparent 45%), radial-gradient(circle at 90% 0%, rgba(0,51,255,0.18), transparent 40%); } h1,h2,h3{font-family:'Montserrat',sans-serif;font-weight:500;letter-spacing:-0.01em} .wordmark{font-family:'Montserrat',sans-serif;font-weight:600;font-size:15px; letter-spacing:0.18em;text-transform:none;color:var(--white);white-space:nowrap} /* Panels */ .panel{background:var(--panel);border:1px solid var(--panel-border); border-radius:14px;padding:22px;margin-bottom:22px} .panel h2{font-size:13px;text-transform:uppercase;letter-spacing:0.14em; color:var(--white);margin-bottom:18px;font-weight:600} /* Form controls */ label{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)} input{background:rgba(255,255,255,0.06);color:var(--white); border:1px solid var(--panel-border);border-radius:8px; padding:11px 13px;font-size:14px;font-family:'Inter',sans-serif;width:100%} input:focus{outline:none;border-color:var(--accent);background:rgba(82,48,218,0.12)} input::placeholder{color:var(--faint)} input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.7)} button{font-family:'Inter',sans-serif;background:var(--accent);color:var(--white); border:none;padding:13px 22px;border-radius:8px;font-size:15px;font-weight:500; cursor:pointer;transition:all .2s} button:hover:not(:disabled){background:#6a47f0} button:disabled{opacity:.45;cursor:not-allowed} /* Connection / cloud status */ .cloud-status{display:inline-flex;align-items:center;gap:8px;font-size:12px; color:var(--muted);margin-top:10px} .cloud-status .dot{width:9px;height:9px;border-radius:50%;background:var(--faint);transition:all .3s} .cloud-status.ok .dot{background:#3ddc84;box-shadow:0 0 10px #3ddc84} .cloud-status.err .dot{background:#ff5c5c;box-shadow:0 0 10px #ff5c5c} .cloud-status.waiting .dot{background:var(--blue);box-shadow:0 0 10px var(--blue);animation:pulse 1.4s infinite} @keyframes pulse{50%{opacity:.4}}