:root { --ink:#e9eff6; --muted:#9cadbd; --bg:#101923; --panel:#172431; --line:#314555; --accent:#68c5ba; --warn:#f7b955; --danger:#ee7c76; --ok:#73d39b; font-family:Inter,Segoe UI,Arial,sans-serif; }
[hidden] { display:none !important }
.signed-out { min-height:100svh; background:var(--bg) url('/images/rovlink-underwater.png') center / cover fixed no-repeat }
.sign-in-screen { min-height:100svh; display:flex; align-items:center; padding:clamp(1.5rem,7vw,8rem); background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 55%,transparent),transparent) }
.sign-in-card { width:min(100%,25rem); padding:clamp(1.5rem,3vw,2.5rem); background:color-mix(in srgb,var(--bg) 88%,transparent); border:1px solid var(--line); border-radius:10px; box-shadow:0 1rem 4rem color-mix(in srgb,var(--bg) 65%,transparent) }
.sign-in-card h1 { margin:.45rem 0; font-size:clamp(2.5rem,5vw,3.5rem); letter-spacing:-.04em; line-height:1.1 }
.sign-in-intro { color:var(--muted); margin:.8rem 0 2rem }
.sign-in-card form { display:grid; gap:1.1rem }
.sign-in-card .field input { padding:.7rem }
.sign-in-card form .button { margin-top:.25rem; padding:.7rem }
.login-message { min-height:1.5em; color:var(--muted); font-size:.85rem; margin:1rem 0 }
.operator-login { color:var(--accent); font-size:.85rem; text-underline-offset:.2em }
@media(max-width:600px) { .signed-out { background-position:65% center; background-attachment:scroll }.sign-in-screen { justify-content:center; padding:1.25rem }.sign-in-card { background:color-mix(in srgb,var(--bg) 94%,transparent) } }
* { box-sizing:border-box } body { margin:0; background:var(--bg); color:var(--ink); line-height:1.45 } button,input,select,textarea { font:inherit } button { cursor:pointer } .skip-link { position:absolute; left:-999px } .skip-link:focus { left:1rem; top:1rem; z-index:4; background:white; color:black; padding:.5rem }
.topbar { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1rem clamp(1rem,4vw,3rem); background:#0b121a; border-bottom:1px solid var(--line) } .topbar h1 { margin:0; font-size:1.35rem } .eyebrow { color:var(--accent); font-size:.72rem; font-weight:bold; letter-spacing:.14em } .session { color:var(--muted); font-size:.9rem; text-align:right }
main { max-width:1500px; margin:auto; padding:1rem clamp(1rem,3vw,2rem) 2rem } .message { min-height:1.4rem; margin-bottom:.55rem; color:var(--muted) } .message.error { color:#ffd0cc }.message.success { color:#c8f5dc }
.tabs { display:flex; border-bottom:1px solid var(--line); gap:.25rem; margin-bottom:1rem } .tab { color:var(--muted); background:transparent; border:0; border-bottom:3px solid transparent; padding:.7rem 1rem } .tab[aria-selected="true"] { color:var(--ink); border-color:var(--accent) }
.layout { display:grid; grid-template-columns:minmax(270px, .9fr) minmax(420px, 1.5fr); gap:1rem; align-items:start }.list-panel,.detail-panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; min-height:420px }.panel-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1rem .5rem }.panel-head h2 { font-size:1rem; margin:0 }.summary { padding:0 1rem .75rem; color:var(--muted); font-size:.84rem }.record-list { border-top:1px solid var(--line) }
.record { width:100%; text-align:left; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line); padding:.85rem 1rem }.record:hover,.record:focus { background:#203442 }.record strong,.record span { display:block }.record small { color:var(--muted) }.record.active { box-shadow:inset 3px 0 var(--accent) }.badge { display:inline-block; border:1px solid currentColor; border-radius:2rem; padding:.1rem .45rem; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em }.connected { color:var(--ok) }.stale { color:var(--warn) }.offline,.failed,.cancelled,.expired { color:var(--danger) }.queued,.running,.waiting-for-device,.waiting-for-delivery,.waiting-for-idle,.awaiting-approval,.uncertain { color:var(--warn) }.badge.relay { color:var(--muted); text-transform:none; letter-spacing:0; font-weight:500 }.badge.qualification-qualified { color:var(--ok) }.badge.qualification-unqualified { color:var(--danger) }.badge.qualification-unknown { color:var(--warn) }.badge.qualification-unreported { color:var(--muted) }
.fleet-tree { padding:.3rem 0 .6rem }.tree-branch { margin-left:.7rem; border-left:1px solid var(--line) }.fleet-tree > .tree-branch { margin-left:0; border-left:0 }.tree-branch > summary { cursor:pointer; padding:.55rem .7rem; color:var(--ink) }.tree-branch > summary:hover,.tree-branch > summary:focus-visible { background:#203442 }.tree-branch > summary .badge { margin-left:.5rem; vertical-align:middle }.tree-entry { display:block; width:calc(100% - .7rem); margin-left:.7rem; padding:.5rem .7rem; text-align:left; color:var(--ink); background:transparent; border:0; border-left:1px solid var(--line) }.tree-entry:hover,.tree-entry:focus-visible { background:#203442 }.tree-entry.active { background:#203442; box-shadow:inset 3px 0 var(--accent) }.tree-entry .badge { margin-left:.5rem }.tree-empty { padding:.35rem .7rem; margin:.1rem 0 .35rem .7rem; color:var(--muted); font-size:.85rem }
.detail-panel { padding:1.15rem }.empty { color:var(--muted); padding:2rem 0 }.detail-title { margin:0 0:.25rem; font-size:1.35rem }.meta { color:var(--muted); margin:.1rem 0 1rem }.section { border-top:1px solid var(--line); margin-top:1rem; padding-top:1rem }.section h3 { margin:0 0:.55rem; font-size:1rem }.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.65rem }.field { display:grid; gap:.25rem; color:var(--muted); font-size:.85rem }.field input,.field select,.field textarea { background:#0e1821; border:1px solid var(--line); border-radius:5px; color:var(--ink); padding:.5rem; width:100% }.field textarea { min-height:90px; resize:vertical }.button { border:1px solid var(--accent); border-radius:5px; padding:.45rem .7rem; background:var(--accent); color:#08221e; font-weight:650 }.button.secondary { color:var(--ink); background:transparent; border-color:var(--line) }.button.danger { color:#350807; background:var(--danger); border-color:var(--danger) }.button:disabled { opacity:.5; cursor:not-allowed }.actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem }.warning { border-left:3px solid var(--warn); background:#332915; padding:.65rem .75rem; color:#ffe2ae; font-size:.9rem }.danger-note { border-left-color:var(--danger); color:#ffd2cf }.confirm { margin-top:.7rem; color:#ffe2ae; font-size:.9rem } pre.result { max-height:360px; overflow:auto; background:#0d161f; padding:.8rem; border-radius:5px; white-space:pre-wrap; word-break:break-word }.inline-list { margin:0; padding-left:1.25rem }.muted { color:var(--muted) }
.license-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:5px }.license-table { width:100%; min-width:900px; border-collapse:collapse; font-size:.85rem }.license-table th,.license-table td { padding:.6rem .7rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line) }.license-table th { color:var(--muted); background:#0e1821; font-size:.78rem; letter-spacing:.03em }.license-table tbody tr:last-child td { border-bottom:0 }.license-mac-group { border-top:1px solid var(--line); margin-top:1rem; padding-top:1rem }.license-mac-group h4 { margin:.1rem 0 .55rem }
@media (max-width:850px) { .layout { grid-template-columns:1fr }.detail-panel { min-height:300px }.topbar { align-items:flex-start; flex-direction:column }.session { text-align:left } }