/* Raspberry-inspired palette: raspberry actions, leaf-green health, warm neutral surfaces. */
:root {
    font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--text);
    background:var(--canvas);
    font-synthesis:none;
    color-scheme:light;
    --muted:#6c626b;
    --accent:#c51a4a;
    --line:#e4dce0;
    --panel:#ffffff;
    --text:#29232a;
    --canvas:#f6f4f3;
    --sidebar:#ffffff;
    --input:#ffffff;
    --input-border:#cbbec5;
    --accent-strong:#97113b;
    --accent-soft:#fce8ee;
    --leaf:#4f8f35;
    --focus:#9e153e;
}
* {
    box-sizing:border-box;
}
body {
    margin:0;
}
a {
    color:var(--accent);
    text-decoration:none;
}
button,input {
    font:inherit;
}
button {
    border:1px solid transparent;
    border-radius:8px;
    background:var(--accent);
    color:#ffffff;
    padding:11px 16px;
    font-weight:650;
    cursor:pointer;
}
button:disabled {
    opacity:.35;
    cursor:not-allowed;
}
button:hover:not(:disabled) {
    filter:brightness(.94);
}
button.secondary {
    background:transparent;
    color:var(--text);
    border-color:var(--line);
}
button.text-button {
    padding:0;
    background:none;
    color:var(--accent);
    font-weight:500;
}
input {
    display:block;
    width:100%;
    background:var(--input);
    color:var(--text);
    border:1px solid var(--input-border);
    border-radius:7px;
    padding:11px;
    margin-top:8px;
}
label {
    display:block;
    font-size:14px;
    color:var(--text);
    margin:18px 0;
}
h1 {
    font-size:clamp(26px,3vw,38px);
    font-weight:580;
    letter-spacing:-1.2px;
    margin:8px 0 12px;
}
h2 {
    font-size:18px;
    font-weight:580;
    margin:0 0 15px;
}
h3 {
    font-size:20px;
}
p {
    color:var(--muted);
    line-height:1.7;
    margin:8px 0 20px;
}
small {
    color:var(--muted);
    font-size:12px;
    line-height:1.65;
}
.metrics strong {
    font-size:30px;
    font-weight:580;
    letter-spacing:-.8px;
}
.shell {
    display:flex;
    min-height:100vh;
}
.sidebar {
    width:235px;
    background:var(--sidebar);
    border-right:1px solid var(--line);
    padding:32px 23px;
    position:fixed;
    inset:0 auto 0 0;
    display:flex;
    flex-direction:column;
}
.brand {
    display:block;
    color:var(--accent);
    font-size:26px;
    font-weight:650;
    letter-spacing:-1px;
    white-space:nowrap;
}
.brand span {
    display:block;
    color:var(--muted);
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin:6px 0 38px 33px;
}
.eyebrow {
    font-size:10px;
    color:#76656d;
    letter-spacing:1.9px;
    font-weight:650;
    margin-top:10px;
}
.sidebar nav {
    display:flex;
    flex-direction:column;
    gap:8px;
}
.sidebar nav a {
    padding:13px 15px;
    color:var(--muted);
    border-radius:8px;
    font-size:14px;
}
.sidebar nav a.active {
    box-shadow:inset 3px 0 var(--accent);
    color:var(--accent-strong);
    background:var(--accent-soft);
}
.sidebar-bottom {
    margin-top:auto;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.workspace {
    width:calc(100% - 235px);
    margin-left:235px;
}
header {
    height:78px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 42px;
    color:var(--muted);
    font-size:13px;
}
header>div {
    display:flex;
    align-items:center;
    gap:24px;
}
header form {
    margin:0;
}
main {
    max-width:1500px;
    margin:auto;
    padding:38px 42px;
}
footer {
    padding:24px 42px;
    color:var(--muted);
    font-size:11px;
    border-top:1px solid var(--line);
    margin-top:30px;
}
.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.pill {
    display:inline-block;
    background:#f4f0f2;
    border:1px solid #d9cbd2;
    color:#62545d;
    border-radius:20px;
    padding:6px 10px;
    font-size:11px;
    white-space:nowrap;
}
.notice {
    padding:15px 18px;
    background:#fff7df;
    border:1px solid #e6d39a;
    border-radius:8px;
    color:#6b5018;
    font-size:13px;
    line-height:1.7;
    margin:15px 0 26px;
}
.metrics {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin:24px 0;
}
.card {
    background:var(--panel);
    box-shadow:0 2px 8px #36222b05;
    border:1px solid var(--line);
    border-radius:12px;
    padding:25px;
    margin-bottom:20px;
    min-width:0;
    overflow:auto;
}
.metrics .card {
    display:flex;
    flex-direction:column;
    gap:15px;
}
.card>span {
    font-size:12px;
    color:var(--muted);
}
.columns {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}
.section-heading {
    display:flex;
    align-items:start;
    justify-content:space-between;
    gap:20px;
}
.section-heading a {
    font-size:12px;
}
.bar {
    height:8px;
    background:var(--line);
    border-radius:8px;
    overflow:hidden;
    margin:25px 0 12px;
}
.bar span {
    display:block;
    height:100%;
    background:var(--leaf);
    min-width:2px;
}
.split {
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-size:12px;
}
dl {
    display:grid;
    grid-template-columns:100px 1fr;
    gap:15px;
    font-size:13px;
}
dt {
    color:var(--muted);
}
dd {
    margin:0;
    line-height:1.6;
    overflow-wrap:anywhere;
}
table {
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}
th,td {
    text-align:left;
    padding:16px 12px;
    border-bottom:1px solid var(--line);
}
th {
    color:#76656d;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:10px;
}
td:first-child,th:first-child {
    padding-left:0;
}
.actions {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:20px 0;
}
.pinout {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    max-width:500px;
    margin:auto;
}
.pin {
    background:#f0f6ed;
    border:1px solid #b6cda9;
    color:#345423;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:9px 12px;
    font-size:12px;
    border-radius:5px;
}
.pin:nth-child(even) {
    flex-direction:row-reverse;
}
.pin.fixed {
    background:#eeecec;
    color:#766e74;
    border-color:#d7d0d4;
}
.pin.forced {
    background:#fff2c6;
    border-color:#d3ac50;
    color:#704b07;
}
.pin small {
    width:35px;
    font-size:9px;
}
.pin b {
    background:#e5ecdf;
    border-radius:50%;
    width:23px;
    height:23px;
    display:grid;
    place-items:center;
    font-size:10px;
}
.pin-header {
    display:flex;
    justify-content:space-between;
    color:var(--muted);
    font-size:11px;
    margin:15px auto;
    max-width:500px;
}
.login {
    max-width:500px;
    margin:8vh auto;
    padding:35px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
}
.login h1 {
    font-size:31px;
}
.login form button {
    width:100%;
    margin:12px 0 24px;
}
.login .brand span {
    margin-bottom:28px;
}
.empty {
    text-align:center;
    padding:40px 30px;
}
.small-value {
    font-size:23px;
}
#blazor-error-ui {
    display:none;
    position:fixed;
    bottom:0;
    padding:20px;
    background:#fff0ec;
    width:100%;
}
@media(max-width:1050px) {
    .metrics {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .columns {
        grid-template-columns:1fr;
    }
    .sidebar {
        width:190px;
        padding:25px 16px;
    }
    .workspace {
        margin-left:190px;
        width:calc(100% - 190px);
    }
    main {
        padding:25px;
    }
    header {
        padding:0 25px;
    }
    .page-heading {
        align-items:start;
        flex-direction:column;
    }
}
@media(max-width:650px) {
    .shell {
        display:block;
    }
    .sidebar {
        position:static;
        width:100%;
        padding:20px;
    }
    .sidebar .eyebrow,.sidebar-bottom {
        display:none;
    }
    .brand span {
        display:inline;
        margin-left:12px;
    }
    .sidebar nav {
        flex-direction:row;
        overflow:auto;
        margin-top:18px;
        gap:3px;
    }
    .sidebar nav a {
        white-space:nowrap;
        padding:10px;
    }
    .workspace {
        margin:0;
        width:100%;
    }
    header {
        height:58px;
    }
    main {
        padding:20px;
    }
    .metrics {
        gap:10px;
    }
    .card {
        padding:18px;
    }
    .metrics strong {
        font-size:24px;
    }
    .login {
        margin:25px 15px;
    }
    footer {
        padding:20px;
    }
}
/* Review refinements: focus, state cues, and layouts that retain context. */ .columns {
    align-items:start;
}
.metrics strong {
    overflow-wrap:anywhere;
    font-variant-numeric:tabular-nums;
}
.metrics .card {
    margin-bottom:0;
}
.metrics {
    margin-bottom:24px;
}
.pin.selected {
    color:var(--accent-strong);
    outline:2px solid var(--accent);
    outline-offset:1px;
    background:var(--accent-soft);
}
.pin.forced.selected {
    background:#fff2c6;
    color:#704b07;
}
.pin-inspector {
    position:sticky;
    top:20px;
}
.pin {
    min-height:44px;
}
.pinout {
    gap:6px;
}
.pin-header {
    margin-top:8px;
}
.pinout .pin b {
    flex-shrink:0;
}
.pinout .pin span {
    min-width:42px;
}
.status-online {
    color:#2f641f;
    border-color:#b5cfa8;
    background:#edf6e8;
}
.status-stale {
    color:#75500b;
    border-color:#ddbe72;
    background:#fff4d5;
}
.status-offline {
    color:#8a263f;
    border-color:#deb4c0;
    background:#fcebf0;
}
.status-neutral {
    color:#62545d;
    border-color:#d9cbd2;
    background:#f4f0f2;
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
    outline:3px solid var(--focus);
    outline-offset:4px;
}
.pin-inspector:focus {
    outline:2px solid var(--focus);
    outline-offset:3px;
}
.skip-link {
    position:fixed;
    top:-100px;
    left:16px;
    z-index:20000;
    padding:14px 20px;
    background:#c51a4a;
    color:#ffffff;
    border-radius:6px;
}
.skip-link:focus {
    top:12px;
}
details {
    margin-top:20px;
    color:var(--muted);
    font-size:13px;
}
summary {
    cursor:pointer;
    line-height:1.7;
}
details p {
    margin:12px 0 0;
}
header button {
    min-height:36px;
}
#main-content:focus {
    outline:none;
}
table {
    font-variant-numeric:tabular-nums;
}
.pin:disabled {
    opacity:.6;
}
@media(max-width:650px) {
    .pin-inspector {
        position:static;
        order:-1;
    }
    .pinout .pin span {
        min-width:35px;
    }
    .pin {
        padding:8px;
        font-size:11px;
    }
    .pin b {
        width:21px;
        height:21px;
    }
    .page-heading>.pill {
        white-space:normal;
    }
    .section-heading {
        flex-wrap:wrap;
    }
    .section-heading a {
        font-size:13px;
    }
    .actions button {
        min-height:44px;
    }
    .sidebar nav a {
        min-height:44px;
    }
    .metrics strong {
        font-size:clamp(19px,6vw,26px);
    }
    .metrics .card {
        padding:16px 12px;
    }
    .sidebar .brand span {
        margin-bottom:0;
    }
}
h1[tabindex="-1"]:focus {
    outline:none;
}

.enrollment-code { font-family:ui-monospace,monospace; font-size:1.15rem; font-weight:700; overflow-wrap:anywhere; user-select:all; }
textarea { width:100%; box-sizing:border-box; padding:12px; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--panel); color:var(--text); }
.brand { font-size:24px; }

.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.icon-button { display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; border:1px solid var(--line); border-radius:10px; color:var(--accent); }
.icon-button:hover { background:var(--bg); }
.device-kpis { grid-template-columns:repeat(5,minmax(0,1fr)); }
.device-kpis strong { font-size:clamp(20px,2.3vw,32px); }
.device-kpis small { display:block; margin-top:8px; }
.container-panel { margin-bottom:24px; }
.container-panel > summary { font-size:20px; font-weight:700; cursor:pointer; }
.container-panel > summary .pill { margin-left:12px; font-size:12px; }
.runtime-confirm,.trend-range { display:flex; flex-wrap:wrap; gap:16px; align-items:end; margin:20px 0; }
.runtime-confirm label,.trend-range label { flex:1; min-width:180px; }
.button-row,.trend-toolbar,.trend-summary { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.trend-toolbar,.trend-summary { justify-content:space-between; margin:16px 0; }
.button-row button { margin:0; }
.signal-picker { display:flex; flex-wrap:wrap; gap:12px 24px; margin:20px 0; }
.signal-picker label,.live-switch { display:flex; align-items:center; gap:8px; margin:0; font-size:14px; }
.signal-picker input,.live-switch input { width:auto; margin:0; accent-color:#c51a4a; }
.download-link { display:inline-block; padding:10px 16px; border:1px solid var(--line); border-radius:9px; font-weight:600; }
.trend-track { position:relative; padding:18px 0 12px; border-top:1px solid var(--line); }
.trend-track h3 { margin:0; font-size:16px; }
.trend-track .section-heading span { color:var(--muted); font-size:13px; }
.trend-svg { display:block; width:100%; min-height:135px; max-height:240px; }
.trend-grid { stroke:var(--line); stroke-width:1; stroke-dasharray:4 5; }
.trend-axis-line { stroke:var(--line); stroke-width:1.5; fill:none; }
.trend-line { stroke:#c51a4a; stroke-width:2.5; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
.trend-axis { position:absolute; left:0; top:69px; bottom:37px; display:flex; flex-direction:column; justify-content:space-between; font-size:11px; color:var(--muted); }
.trend-time { display:flex; justify-content:space-between; margin:0 4.8%; color:var(--muted); font-size:12px; }
.table-scroll { overflow-x:auto; }
.sample-table { margin-top:24px; }
@media(max-width:900px) { .device-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .trend-toolbar,.trend-summary { align-items:start; } .trend-track .section-heading { align-items:start; gap:10px; flex-direction:column; } }

.trend-cursor { stroke:#38892e; stroke-width:1.5; stroke-dasharray:3 3; pointer-events:none; }
.trend-cursor-label { display:block; font-size:12px; color:var(--muted); margin:10px 0 -8px; min-height:18px; }

.telemetry-group + .telemetry-group { border-top:1px solid var(--line); margin-top:24px; padding-top:12px; }
.telemetry-channel-list { padding-left:24px; margin:12px 0 20px; }
.telemetry-channel-list li { padding:4px 0; }
.telemetry-channel-list label { display:inline-flex; align-items:center; gap:10px; margin:0; }
.telemetry-channel-list input { width:auto; margin:0; accent-color:#c51a4a; }
.telemetry-help { position:fixed; inset:0; margin:auto; width:min(620px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow:auto; padding:28px; border:1px solid var(--line); border-radius:16px; background:var(--surface,#fff); color:var(--text,#282429); box-shadow:0 18px 60px #0003; }
.telemetry-help::backdrop { background:#28242955; }
.telemetry-help .section-heading { gap:16px; align-items:center; }
.telemetry-help h2 { margin:0; }

.os-update-select { display:block; width:100%; font:inherit; background:var(--input); color:var(--text); border:1px solid var(--input-border); border-radius:7px; padding:11px; margin-top:8px; }
.os-update-select:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

.reauth-dialog { width:min(480px, calc(100vw - 40px)); max-height:calc(100dvh - 40px); box-sizing:border-box; padding:28px; border:1px solid var(--line); border-radius:16px; background:var(--panel); color:var(--text); box-shadow:0 24px 80px #0004; }
.reauth-dialog::backdrop { background:#12121b99; }
.reauth-dialog h2 { margin-top:0; }
.reauth-dialog .button-row { justify-content:flex-end; margin-top:20px; }
.reauth-error:empty { display:none; }
.reauth-error { color:var(--accent); }

/* Account setup and team management share the platform's visual language. */
.account-page { width: min(880px, calc(100% - 40px)); margin: 48px auto; }
.account-page > .brand { margin-bottom: 28px; }
.account-page .card { margin: 24px 0; }
.account-page form { max-width: 560px; margin: 16px 0; }
.account-page label { display: grid; gap: 6px; margin: 16px 0; }
.account-page input, .account-page select { width: 100%; }
.setup-key { overflow-wrap: anywhere; user-select: all; }
.workspace-select { display: flex; align-items: center; gap: 8px; margin: 0; }
.workspace-select select { max-width: 220px; }
.account-page select, .workspace-select select { font: inherit; background: var(--input); color: var(--text); border: 1px solid var(--input-border); border-radius: 7px; padding: 10px; }
.workspace > header { min-height: 78px; height: auto; gap: 12px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.workspace > header > div { flex-wrap: wrap; gap: 14px; }
@media(max-width:650px) { .workspace-select { flex-wrap: wrap; } .account-page { margin: 20px auto; padding: 18px 0; } }