@font-face {
    font-family:Onest;
    src:url('/fonts/Onest-Regular.ttf');
    font-weight:400;
    font-display:swap
}
@font-face {
    font-family:Onest;
    src:url('/fonts/Onest-SemiBold.ttf');
    font-weight:600 800;
    font-display:swap
}
@font-face {
    font-family:Unbounded;
    src:url('/fonts/Unbounded-SemiBold.ttf');
    font-weight:600;
    font-display:swap
}
:root {
    --canvas:oklch(97% .008 150);
    --surface:oklch(99% .004 150);
    --ink:oklch(23% .025 150);
    --muted:oklch(46% .025 150);
    --line:oklch(87% .018 150);
    --accent:oklch(39% .09 150);
    --on-accent:oklch(99% .004 150);
    --accent-soft:oklch(94% .035 150);
    --danger:oklch(43% .17 25);
    --danger-soft:oklch(96% .025 25);
    --route:oklch(48% .16 265);
    --technical:oklch(55% .14 65);
    --focus:oklch(44% .13 250);
    --space-xs:4px;
    --space-sm:8px;
    --space-md:12px;
    --space-lg:16px;
    --space-xl:24px;
    --space-2xl:32px;
    --type-xs:.75rem;
    --type-sm:.875rem;
    --type-base:1rem;
    --type-lg:1.25rem;
    --type-xl:1.5625rem;
    --radius:12px;
    --switch-width:56px;
    --switch-hit-height:48px;
    --switch-thumb-size:24px;
}
.photo-report {
    display:grid;
    gap:var(--space-md);
    margin-top:var(--space-lg);
    padding-top:var(--space-lg);
    border-top:1px solid var(--line)
}
.photo-report .hint { margin:0 }
.photo-pickers { display:flex; flex-wrap:wrap; gap:var(--space-sm) }
.photo-picker {
    position:relative;
    flex:1;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--radius);
    min-height:44px;
    padding:var(--space-sm);
    cursor:pointer
}
.photo-picker:focus-within { outline:3px solid var(--focus); outline-offset:3px }
.photo-picker:has(input:disabled) { opacity:.48; cursor:not-allowed }
.photo-picker input { position:absolute; inset:0; opacity:0; cursor:inherit }
.photo-preview { width:100%; max-height:18rem; object-fit:contain; border-radius:var(--radius); background:var(--accent-soft) }
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--canvas);
    color:var(--ink);
    font-family:Onest,sans-serif;
    font-size:var(--type-base);
    line-height:1.5
}
button,input,select {
    font:inherit;
    border:1px solid var(--line);
    border-radius:8px;
    min-height:44px;
    color:var(--ink);
    background:var(--surface)
}
button,a,input,select,summary {
    touch-action:manipulation
}
button {
    padding:10px var(--space-lg);
    font-weight:600;
    cursor:pointer;
    transition:background-color 160ms ease-out,border-color 160ms ease-out
}
button:hover:enabled {
    background:var(--accent-soft);
    border-color:var(--accent)
}
button:disabled {
    opacity:.48;
    cursor:not-allowed
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
    outline:3px solid var(--focus);
    outline-offset:3px
}
input,select {
    width:100%;
    min-width:0;
    padding:10px var(--space-md);
    font-weight:400
}
label {
    display:flex;
    flex-direction:column;
    gap:var(--space-sm);
    font-size:var(--type-sm);
    font-weight:600
}
a {
    color:var(--accent)
}
h1 {
    font-family:Unbounded,Onest,sans-serif;
    font-size:var(--type-xl);
    line-height:1.35;
    font-weight:600;
    margin:0
}
h2 {
    font-size:var(--type-base);
    font-weight:600;
    margin:0
}
h3 {
    font-size:var(--type-sm);
    font-weight:600;
    margin:0
}
p {
    max-width:70ch
}
.primary {
    background:var(--accent);
    border-color:var(--accent);
    color:var(--on-accent)
}
.primary:hover:enabled {
    background:var(--ink);
    border-color:var(--ink)
}
.danger {
    color:var(--danger);
    background:var(--danger-soft)
}
.secondary[aria-pressed=true] {
    background:var(--accent-soft);
    border-color:var(--accent)
}
.text-button {
    color:var(--accent);
    border-color:transparent;
    background:transparent;
    font-size:var(--type-sm)
}
.skip-link {
    position:absolute;
    left:var(--space-lg);
    top:-100px;
    z-index:3000;
    background:var(--surface);
    padding:var(--space-md)
}
.skip-link:focus {
    top:var(--space-sm)
}
.topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:var(--space-lg) var(--space-2xl);
    border-bottom:1px solid var(--line);
    background:var(--surface)
}
.brand {
    display:flex;
    align-items:center;
    gap:var(--space-md);
    text-decoration:none;
    color:var(--ink)
}
.brand-mark {
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:8px;
    color:var(--on-accent);
    background:var(--accent);
    font-weight:700
}
.brand strong {
    font-weight:400;
    color:var(--muted);
    margin-left:var(--space-xs)
}
.connection-state {
    display:flex;
    align-items:center;
    gap:var(--space-sm);
    font-size:var(--type-sm)
}
.connection-state>span {
    width:8px;
    height:8px;
    border-radius:100%;
    background:var(--muted)
}
.connection-state.online>span {
    background:var(--accent)
}
.console {
    max-width:1440px;
    margin:auto;
    padding:var(--space-2xl)
}
.page-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:var(--space-xl);
    margin-bottom:var(--space-xl)
}
.page-heading>p {
    font-size:var(--type-sm);
    color:var(--muted);
    margin:0
}
.eyebrow {
    font-size:var(--type-xs);
    letter-spacing:.08em;
    font-weight:600;
    text-transform:uppercase;
    color:var(--accent);
    margin:0 0 var(--space-sm)
}
.hint,.muted {
    color:var(--muted);
    font-size:var(--type-sm);
    line-height:1.5
}
.hint {
    margin:var(--space-md) 0 0
}
details>summary {
    min-height:44px;
    cursor:pointer;
    font-weight:600;
    padding:var(--space-md) 0;
    font-size:var(--type-sm)
}
details[open]>summary {
    margin-bottom:var(--space-sm)
}
.connection-drawer {
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--surface)
}
.connection-drawer>summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-lg);
    padding:var(--space-lg) var(--space-xl);
    list-style:none
}
.connection-drawer>summary::-webkit-details-marker {
    display:none
}
.connection-caption {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-md)
}
.connection-caption>span {
    color:var(--muted);
    font-size:var(--type-xs)
}
.connection-edit {
    color:var(--accent);
    font-size:var(--type-sm);
    white-space:nowrap
}
.connection-panel {
    max-width:640px;
    padding:0 var(--space-xl) var(--space-xl)
}
.connection-fields,.forget-confirmation,.saved-robot,.connection-panel form {
    display:grid;
    gap:var(--space-md)
}
.connection-panel button {
    width:100%
}
.saved-robot {
    padding:var(--space-lg);
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--canvas)
}
.saved-robot .device-id {
    margin:0
}
.saved-robot small {
    color:var(--muted)
}
.device-id {
    overflow-wrap:anywhere;
    font-size:var(--type-sm)
}
.section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-md);
    margin-bottom:var(--space-lg)
}
.sandbox-orders {
    display:grid;
    gap:var(--space-sm);
    padding-bottom:var(--space-lg);
    margin-bottom:var(--space-lg);
    border-bottom:1px solid var(--line)
}
.sandbox-switch-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-lg)
}
.mobile-order-link { margin-top:var(--space-md) }
.pairing-code { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-md) }
.pairing-code output { font-weight:600; font-size:var(--type-lg); letter-spacing:.08em; user-select:all }
.pairing-code button { font-size:var(--type-sm) }
.task-details { display:grid; gap:var(--space-xs); margin-bottom:var(--space-lg); font-size:var(--type-sm) }
.task-details>span,.task-next { color:var(--muted); font-size:var(--type-sm) }
.task-details summary { font-size:var(--type-xs) }
.order-reference { overflow-wrap:anywhere; user-select:all; font-size:var(--type-xs) }
.task-next { margin:0 0 var(--space-lg) }
.sandbox-switch-row h3 {
    margin:0;
    font-size:var(--type-base)
}
.sandbox-switch-row div>span,.sandbox-hint {
    color:var(--muted);
    font-size:var(--type-sm)
}
.sandbox-orders p {
    margin:0
}
.sandbox-switch {
    position:relative;
    display:flex;
    align-items:center;
    flex:0 0 var(--switch-width);
    width:var(--switch-width);
    height:var(--switch-hit-height);
    padding:var(--space-xs);
    border:0;
    background:transparent
}
.sandbox-switch::before {
    content:"";
    position:absolute;
    inset:var(--space-sm) 0;
    border-radius:var(--space-xl);
    background:var(--line)
}
.sandbox-switch:hover:enabled {
    background:transparent
}
.sandbox-switch>span {
    position:relative;
    display:block;
    width:var(--switch-thumb-size);
    height:var(--switch-thumb-size);
    border-radius:50%;
    background:var(--surface);
    transition:transform 160ms ease-out
}
.sandbox-switch[aria-checked=true]::before {
    background:var(--accent)
}
.sandbox-switch[aria-checked=true]>span {
    transform:translateX(calc(var(--switch-width) - var(--switch-thumb-size) - 2 * var(--space-xs)))
}
.section-heading>span {
    font-size:var(--type-xs);
    color:var(--muted);
    font-variant-numeric:tabular-nums
}
.feedback-area {
    min-height:52px;
    display:grid;
    align-items:center
}
.feedback-area>p {
    margin:var(--space-sm) 0
}
.signal-receipt {
    display:flex;
    align-items:center;
    gap:var(--space-sm);
    font-size:var(--type-sm);
    color:var(--accent)
}
.signal-receipt svg {
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    flex-shrink:0
}
.signal-receipt time {
    color:var(--muted);
    font-size:var(--type-xs);
    font-variant-numeric:tabular-nums;
    margin-left:var(--space-sm)
}
.notice {
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--accent-soft);
    padding:var(--space-md) var(--space-lg);
    font-size:var(--type-sm);
    margin:var(--space-md) 0
}
.notice.error {
    background:var(--danger-soft);
    border-color:var(--danger);
    color:var(--danger)
}
.signal-warning {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-lg);
    margin-top:0
}
.signal-workspace {
    display:grid;
    grid-template-columns:minmax(0,1fr) 400px;
    align-items:start;
    gap:var(--space-xl)
}
.position-station,.signal-desk {
    min-width:0
}
.position-station {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden
}
.map-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var(--space-lg);
    padding:var(--space-lg) var(--space-xl)
}
.map-toolbar>div {
    display:grid;
    gap:var(--space-xs)
}
.map-toolbar span {
    color:var(--muted);
    font-size:var(--type-sm)
}
.robot-map {
    height:clamp(360px,50vh,560px);
    min-width:0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}
.map-legend {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-lg);
    padding:var(--space-md) var(--space-xl);
    font-size:var(--type-xs)
}
.map-legend>span {
    display:flex;
    align-items:center;
    gap:var(--space-sm)
}
.map-legend i {
    width:10px;
    height:10px;
    display:block
}
.legend-robot {
    background:var(--accent);
    border-radius:100%
}
.legend-area {
    border:1px solid var(--accent);
    background:var(--accent-soft)
}
.robot-marker {
    fill:var(--accent);
    fill-opacity:1;
    stroke:var(--surface);
    stroke-width:3
}
.dispatch-route {
    stroke:var(--route)
}
.work-area {
    stroke:var(--accent);
    fill:var(--accent)
}
.zone-shape.work {
    stroke:var(--route);
    fill:var(--route)
}
.zone-shape.technical {
    stroke:var(--technical);
    fill:var(--technical)
}
.zone-shape.unassigned {
    stroke-dasharray:5 5;
    fill-opacity:.02
}
.position-readout {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:var(--space-sm);
    padding:var(--space-lg) var(--space-xl);
    border-top:1px solid var(--line);
    font-size:var(--type-xs);
    color:var(--muted)
}
.position-readout strong {
    display:block;
    color:var(--ink);
    font-size:var(--type-sm);
    font-weight:600;
    font-variant-numeric:tabular-nums
}
.location-status {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-md);
    padding:0 var(--space-xl) var(--space-lg);
    color:var(--muted);
    font-size:var(--type-sm)
}
.location-status p {
    margin:0
}
.location-status button {
    font-size:var(--type-sm)
}
.location-status:has(button) {
    padding-top:var(--space-md);
    background:var(--accent-soft);
}
.signal-desk {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius)
}
.signal-section {
    padding:var(--space-xl)
}
.signal-section+.signal-section {
    border-top:1px solid var(--line)
}
.state-choices {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-sm)
}
.state-choice {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:start;
    gap:var(--space-xs);
    text-align:left;
    min-height:80px;
    padding:var(--space-lg) var(--space-md)
}
.state-choice>span {
    font-size:var(--type-sm);
    padding-right:var(--space-lg)
}
.state-choice>small {
    font-size:var(--type-xs);
    color:var(--muted);
    font-weight:400
}
.state-choice[aria-pressed=true] {
    border-color:var(--accent);
    background:var(--accent-soft)
}
.state-choice[data-status=Maintenance][aria-pressed=true] {
    border-color:var(--danger);
    background:var(--danger-soft)
}
.state-check {
    position:absolute;
    right:var(--space-sm);
    top:var(--space-lg);
    width:18px;
    height:18px;
    fill:none;
    stroke:var(--accent);
    stroke-width:2;
    visibility:hidden
}
.state-choice[aria-pressed=true] .state-check {
    visibility:visible
}
.charge-control {
    padding-top:var(--space-xl)
}
.charge-control .section-heading {
    margin-bottom:var(--space-sm)
}
.charge-control strong {
    font-size:var(--type-sm);
    font-variant-numeric:tabular-nums
}
.charge-presets {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--space-sm)
}
.charge-presets button {
    font-size:var(--type-sm);
    padding:var(--space-sm)
}
.custom-charge summary {
    font-weight:400;
    color:var(--accent);
    padding-bottom:0
}
.custom-charge form {
    display:flex;
    align-items:end;
    gap:var(--space-md)
}
.custom-charge label {
    flex:1
}
.custom-charge button {
    font-size:var(--type-sm)
}
.assignment-context {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-md);
    font-size:var(--type-sm);
    margin-bottom:var(--space-lg)
}
.assignment-context>strong {
    background:var(--accent-soft);
    color:var(--accent);
    padding:var(--space-xs) var(--space-sm);
    border-radius:4px;
    font-size:var(--type-xs)
}
.assignment-context>span {
    color:var(--muted);
    white-space:nowrap
}
.order-actions {
    display:grid;
    gap:var(--space-sm)
}
.order-actions button {
    text-align:left
}
.order-failure {
    margin-top:var(--space-sm)
}
.order-failure>summary {
    color:var(--danger);
    font-weight:400;
    padding-bottom:0
}
.order-failure form {
    display:grid;
    gap:var(--space-md)
}
.empty-assignment {
    padding:var(--space-sm) 0
}
.empty-assignment>strong {
    font-size:var(--type-base);
    font-weight:600
}
.empty-assignment>p {
    font-size:var(--type-sm);
    color:var(--muted);
    margin:var(--space-sm) 0 0
}
.zone-list {
    padding:0 var(--space-xl);
    border-top:1px solid var(--line)
}
.count {
    font-size:var(--type-xs);
    color:var(--muted);
    font-weight:400;
    margin-left:var(--space-sm)
}
.zone-row {
    display:flex;
    justify-content:space-between;
    gap:var(--space-md);
    padding:var(--space-md) 0;
    border-top:1px solid var(--line);
    font-size:var(--type-xs)
}
.zone-row strong {
    font-weight:600
}
.zone-row>span {
    color:var(--muted);
    flex-shrink:0
}
.journal {
    margin-top:var(--space-xl);
    border-top:1px solid var(--line)
}
.journal ol {
    list-style:none;
    padding:0;
    margin:0;
    max-height:320px;
    overflow:auto
}
.journal li {
    display:flex;
    gap:var(--space-lg);
    padding:var(--space-md) 0;
    border-bottom:1px solid var(--line);
    font-size:var(--type-sm)
}
.journal time {
    color:var(--muted);
    font-variant-numeric:tabular-nums;
    flex-shrink:0
}
#blazor-error-ui {
    display:none;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:3000;
    background:var(--danger-soft);
    color:var(--danger);
    padding:var(--space-lg);
    text-align:center
}
@media(max-width:1100px) {
    .signal-workspace {
        grid-template-columns:minmax(0,1fr) 360px;
        gap:var(--space-lg)
    }
    .console {
        padding:var(--space-xl)
    }
    .signal-section {
        padding:var(--space-lg)
    }
    .map-toolbar {
        align-items:start;
        flex-direction:column
    }
    .map-toolbar,.map-legend,.position-readout,.location-status,.zone-list {
        padding-left:var(--space-lg);
        padding-right:var(--space-lg)
    }
}
@media(max-width:800px) {
    .signal-workspace {
        grid-template-columns:minmax(0,1fr)
    }
    .console {
        padding:var(--space-xl) var(--space-lg)
    }
    .page-heading {
        align-items:start;
        flex-direction:column;
        gap:var(--space-sm)
    }
    .page-heading>p {
        display:none
    }
    .robot-map {
        height:300px
    }
    .map-toolbar {
        flex-direction:row;
        align-items:center
    }
    .signal-desk {
        display:block
    }
    .topbar {
        padding:var(--space-md) var(--space-lg)
    }
    .connection-drawer>summary {
        padding:var(--space-md) var(--space-lg)
    }
    .connection-panel {
        padding:0 var(--space-lg) var(--space-lg)
    }
    .connection-caption {
        gap:var(--space-xs);
        align-items:start;
        flex-direction:column
    }
    .signal-warning {
        align-items:start;
        flex-direction:column
    }
    .signal-receipt {
        flex-wrap:wrap
    }
}
@media(max-width:440px) {
    h1 {
        font-size:var(--type-lg)
    }
    .brand strong {
        display:none
    }
    .map-toolbar {
        align-items:start;
        flex-direction:column
    }
    .robot-map {
        height:260px
    }
    .state-choice {
        min-height:88px
    }
    .signal-receipt time {
        margin-left:26px
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        scroll-behavior:auto!important;
        animation:none!important;
        transition:none!important
    }
}